/* =========================================================================
   Mega-menu (Worker M) — desktop hover/focus panels + mobile accordions.
   B&W editorial. Panels drop under the sticky header, hairline top border.
   Hidden by default; never cause horizontal scroll.
   ========================================================================= */

/* ---- Desktop nav item wrapper -------------------------------------------- */
.header-nav .mega-item {
	position: static; /* anchor panels to the header, full width */
	display: inline-flex;
	align-items: center;
}

.header-nav .mega-trigger {
	display: inline-block;
}

/* ---- The panel ----------------------------------------------------------- */
.mega-panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 60;
	background: var(--paper, #fff);
	border-top: 1px solid var(--line, #e8e8e8);
	box-shadow: 0 18px 30px -24px rgba(13, 13, 13, 0.25);
	padding: 36px 0 44px;

	/* Hidden by default. */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-6px);
	transition:
		opacity 0.18s var(--ease, ease),
		transform 0.18s var(--ease, ease),
		visibility 0s linear 0.18s;
}

.mega-panel__inner {
	position: relative;
}

/* Open state — driven by CSS hover/focus-within AND by JS (.is-open). */
.header-nav .mega-item:hover > .mega-panel,
.header-nav .mega-item:focus-within > .mega-panel,
.header-nav .mega-item.is-open > .mega-panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
	transition:
		opacity 0.2s var(--ease, ease),
		transform 0.2s var(--ease, ease),
		visibility 0s linear 0s;
}

/* ---- Brand panel: multi-column maison list ------------------------------- */
.mega-brand-cols {
	column-count: 5;
	column-gap: 32px;
}

.mega-brand-group {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	margin-bottom: 22px;
}

.mega-brand-letter {
	display: block;
	margin-bottom: 8px;
	color: var(--muted, #5f5f5f);
	border-bottom: 1px solid var(--line, #e8e8e8);
	padding-bottom: 4px;
}

.mega-brand-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mega-brand-list li {
	margin: 0 0 6px;
}

.mega-brand-list a {
	display: inline-block;
	color: var(--ink, #0d0d0d);
	text-decoration: none;
	font-family: var(--font-sans, sans-serif);
	font-size: 0.86rem;
	line-height: 1.35;
	transition: color 0.15s var(--ease, ease);
}

.mega-brand-list a:hover,
.mega-brand-list a:focus-visible {
	color: var(--muted, #5f5f5f);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- Category panel (Bambina / Bambino / Baby): multi-column groups ------ */

/* Flex row: one column per top group, comfortable gap. */
.mega-cat-cols {
	display: flex;
	flex-wrap: wrap;
	gap: 0 48px;
	align-items: flex-start;
}

/* Each column = group heading + sub-item list. */
.mega-cat-group {
	flex: 0 0 auto;
	min-width: 140px;
}

/* Group heading: uppercase label style, linked, visually separates the column. */
.mega-cat-group__heading {
	display: block;
	margin-bottom: 14px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--line, #e8e8e8);
	color: var(--ink, #0d0d0d);
	text-decoration: none;
	font-family: var(--font-sans, sans-serif);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transition: color 0.15s var(--ease, ease);
}

.mega-cat-group__heading:hover,
.mega-cat-group__heading:focus-visible {
	color: var(--muted, #5f5f5f);
}

/* Sub-item list: clean vertical stack, no bullets. */
.mega-cat-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mega-cat-list li {
	margin: 0 0 9px;
}

.mega-cat-list a {
	display: inline-block;
	color: var(--ink-2, #3a3a3a);
	text-decoration: none;
	font-family: var(--font-sans, sans-serif);
	font-size: 0.86rem;
	line-height: 1.35;
	transition: color 0.15s var(--ease, ease), opacity 0.15s var(--ease, ease);
}

.mega-cat-list a:hover,
.mega-cat-list a:focus-visible {
	color: var(--ink, #0d0d0d);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- 'Tutte le maison' / 'Vedi tutto' link ------------------------------- */
.mega-panel__all {
	display: inline-block;
	margin-top: 26px;
	color: var(--ink, #0d0d0d);
	text-decoration: none;
	border-bottom: 1px solid var(--ink, #0d0d0d);
	padding-bottom: 3px;
	transition: opacity 0.15s var(--ease, ease);
}

.mega-panel__all:hover,
.mega-panel__all:focus-visible {
	opacity: 0.6;
}

/* ---- Wishlist icon in header-icons --------------------------------------- */
.header-icons .cuv-wish {
	position: relative;
}

.header-icons .cuv-wish-count {
	position: absolute;
	top: -6px;
	right: -8px;
	min-width: 15px;
	height: 15px;
	padding: 0 3px;
	border-radius: 999px;
	background: var(--ink, #0d0d0d);
	color: var(--paper, #fff);
	font-family: var(--font-sans, sans-serif);
	font-size: 0.6rem;
	line-height: 15px;
	text-align: center;
	font-weight: 500;
}

/* Hide the badge entirely when empty so it doesn't sit as a stray dot. */
.header-icons .cuv-wish-count[data-count="0"] {
	display: none;
}

/* =========================================================================
   Mobile: tap-to-expand accordions inside .mobile-nav
   ========================================================================= */
.mobile-nav .m-acc {
	border-bottom: 1px solid var(--line, #e8e8e8);
}

.mobile-nav .m-acc__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.mobile-nav .m-acc__link {
	flex: 1 1 auto;
	display: block;
	padding: 16px 0;
	color: var(--ink, #0d0d0d);
	text-decoration: none;
	font-family: var(--font-sans, sans-serif);
	font-size: 1.05rem;
	letter-spacing: 0.02em;
}

.mobile-nav .m-acc__toggle {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--ink, #0d0d0d);
}

.mobile-nav .m-acc__toggle svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.2s var(--ease, ease);
}

.mobile-nav .m-acc.is-open .m-acc__toggle svg {
	transform: rotate(180deg);
}

/* Collapsed by default via max-height; JS toggles .is-open. */
.mobile-nav .m-acc__panel {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.28s var(--ease, ease);
}

.mobile-nav .m-acc.is-open .m-acc__panel {
	max-height: 2400px; /* increased to accommodate deeper sub-item lists */
}

/* Inside the mobile accordion the panel is a plain, static block. */
.mobile-nav .m-acc__panel .mega-panel {
	position: static;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	transition: none;
	border-top: 0;
	box-shadow: none;
	padding: 0 0 18px;
}

.mobile-nav .m-acc__panel .wrap {
	padding-left: 0;
	padding-right: 0;
	max-width: none;
}

.mobile-nav .m-acc__panel .mega-brand-cols {
	column-count: 2;
	column-gap: 18px;
}

/* Mobile: stack groups vertically; each group heading + sub-list indented. */
.mobile-nav .m-acc__panel .mega-cat-cols {
	display: block;
}

.mobile-nav .m-acc__panel .mega-cat-group {
	margin-bottom: 18px;
	min-width: 0;
}

.mobile-nav .m-acc__panel .mega-cat-group__heading {
	font-size: 0.7rem;
	margin-bottom: 8px;
	padding-bottom: 6px;
}

.mobile-nav .m-acc__panel .mega-cat-list {
	padding-left: 12px; /* indent sub-items under the group heading */
}

.mobile-nav .m-acc__panel .mega-cat-list li {
	margin-bottom: 10px;
}

.mobile-nav .m-acc__panel .mega-cat-list a {
	font-size: 0.92rem;
}

.mobile-nav .m-acc__panel .mega-panel__all {
	margin-top: 14px;
}

/* =========================================================================
   Responsive guards — keep desktop panels off small screens, never scroll-x
   ========================================================================= */
@media (max-width: 900px) {
	.header-nav .mega-panel {
		display: none; /* desktop panels suppressed; mobile uses accordions */
	}
	.mega-brand-cols {
		column-count: 3;
	}
}

/* Safety: panels are full-bleed but must never trigger horizontal scroll. */
.mega-panel {
	max-width: 100vw;
	overflow-x: hidden;
}