/* =========================================================
   AVELOR — Gender mega-menu (desktop only)
   Triggered by .av-mega-trigger items in the top nav.
   Mobile uses Blocksy's native offcanvas; we hide the panel.
   ========================================================= */

/* Hide on mobile/tablet — Blocksy offcanvas handles those. */
.av-megamenu {
	display: none;
}

@media (min-width: 901px) {
	/* The trigger <li>: position context for the panel. We intentionally
	   do NOT add a custom chevron/diamond here — the trigger keeps Blocksy's
	   native menu-link styling (the animated underline + its own dropdown
	   indicator), so the catalog triggers look identical to «Бренди». */
	header [data-id="menu"] > .menu > .av-mega-trigger {
		position: relative;
	}

	/* «Бренди» native dropdown reveal. Blocksy's JS-driven .ct-active toggle
	   stopped firing after the menu was rebuilt, so we reveal the native
	   top-level .sub-menu on hover / keyboard focus with plain CSS — the same
	   model the mega panel uses below. Only «Бренди» carries a real .sub-menu
	   (the catalog triggers use .av-megamenu instead), so this selector is
	   naturally scoped to it. */
	header [data-id="menu"] > .menu > .menu-item-has-children:hover > .sub-menu,
	header [data-id="menu"] > .menu > .menu-item-has-children:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		pointer-events: auto;
	}

	/* Mega panel — drops below the trigger, left-aligned to it and
	   growing rightward. The menu lives in the header's left column, so
	   left-alignment keeps every panel on-screen (centering spilled the
	   leftmost «Одяг» panel off the left edge). Sizes to its content. */
	.av-megamenu {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		transform: translateY(8px);
		width: max-content;
		max-width: min(1100px, 96vw);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition:
			opacity 0.18s ease,
			transform 0.18s ease,
			visibility 0s linear 0.18s;
		z-index: 1000;
	}

	/* Show on hover or keyboard focus of the trigger li, OR when cursor
	   is inside the panel itself. */
	header [data-id="menu"] > .menu > .av-mega-trigger:hover > .av-megamenu,
	header [data-id="menu"] > .menu > .av-mega-trigger:focus-within > .av-megamenu,
	.av-megamenu:hover {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0);
		transition:
			opacity 0.18s ease,
			transform 0.18s ease,
			visibility 0s linear 0s;
	}

	/* Invisible bridge so cursor can travel from trigger to panel
	   without crossing a dead zone. Equal to the translateY gap. */
	.av-megamenu::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -16px;
		height: 16px;
		background: transparent;
	}

	/* Panel chrome */
	.av-megamenu__panel {
		background: var(--avelor-white, #FEFEFE);
		border: 1px solid var(--avelor-line, #E8E2D8);
		border-radius: 16px;
		box-shadow:
			0 1px 0 rgba(20, 20, 20, 0.02),
			0 20px 50px -20px rgba(20, 20, 20, 0.2);
		padding: 26px 30px;
		overflow: hidden;
	}

	/* Columns layout — flex so the panel hugs its content (a flat 3-link
	   category collapses to one tidy column instead of stretching). */
	.av-megamenu__cols {
		display: flex;
		flex-wrap: wrap;
		gap: 30px 44px;
		align-items: flex-start;
	}

	.av-megamenu__col {
		display: flex;
		flex-direction: column;
		gap: 14px;
		flex: 0 1 auto;
		min-width: 160px;
	}

	/* Column head — top-level category name (Одяг / Пляжний / Аксесуари) */
	.av-megamenu__col-head {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 12px;
		font-family: var(--font-display, "Inter", "Manrope", sans-serif);
		font-size: 18px;
		font-weight: 500;
		letter-spacing: -0.01em;
		color: var(--avelor-graphite, #202322);
		text-decoration: none;
		padding-bottom: 10px;
		border-bottom: 1px solid var(--avelor-line, #E8E2D8);
		transition: color 0.18s ease, border-color 0.18s ease;
	}
	.av-megamenu__col-head:hover {
		color: var(--avelor-deep-green, #1F3A2E);
		border-bottom-color: var(--avelor-deep-green, #1F3A2E);
	}
	.av-megamenu__col-all {
		font-family: var(--font-sans, "Inter", sans-serif);
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--fg-muted, #6F6F6A);
	}

	/* Section block within a column (Active wear, Lifestyle inside Одяг) */
	.av-megamenu__section {
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	.av-megamenu__section-head {
		font-family: var(--font-sans, "Inter", sans-serif);
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.15em;
		text-transform: uppercase;
		color: var(--avelor-deep-green, #1F3A2E);
		text-decoration: none;
		margin-bottom: 2px;
		transition: color 0.18s ease;
	}
	.av-megamenu__section-head:hover {
		color: var(--avelor-graphite, #202322);
	}

	/* Leaf list */
	.av-megamenu__list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 2px;
	}
	.av-megamenu__list li {
		margin: 0;
	}
	.av-megamenu__list a {
		display: inline-block;
		padding: 5px 0;
		font-family: var(--font-sans, "Inter", sans-serif);
		font-size: 14px;
		color: var(--avelor-graphite, #202322);
		text-decoration: none;
		letter-spacing: -0.005em;
		transition: color 0.18s ease, transform 0.18s ease;
	}
	.av-megamenu__list a:hover {
		color: var(--avelor-deep-green, #1F3A2E);
		transform: translateX(2px);
	}

	/* Direct-leaf list (e.g. Купальники / Туніки under Пляжний) gets
	   slightly more breathing room than nested section lists. */
	.av-megamenu__list--direct {
		gap: 4px;
	}

	/* Panel footer — "view all" link to the trigger category archive. */
	.av-megamenu__viewall {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin-top: 22px;
		padding-top: 16px;
		border-top: 1px solid var(--avelor-line, #E8E2D8);
		font-family: var(--font-sans, "Inter", sans-serif);
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--avelor-deep-green, #1F3A2E);
		text-decoration: none;
		transition: color 0.18s ease, gap 0.18s ease;
	}
	.av-megamenu__viewall::after {
		content: "→";
		font-size: 13px;
		transition: transform 0.18s ease;
	}
	.av-megamenu__viewall:hover {
		color: var(--avelor-graphite, #202322);
	}
	.av-megamenu__viewall:hover::after {
		transform: translateX(3px);
	}

	/* Strip Blocksy's auto-injected dropdown chevron from EVERY top-level
	   item (catalog triggers + «Бренди»). Two reasons:
	     1. Visual — the only hover affordance we want is the animated
	        underline; no little carets/diamonds next to the labels.
	     2. Layout — the chevrons widen each item by ~20px. With four items
	        in the ~482px menu column, that overflow makes Blocksy collapse
	        the last items («Аксесуари», «Бренди») into an auto «Більше»
	        dropdown, which is what stopped «Бренди» from opening. Narrow
	        labels keep all four inline. */
	header [data-id="menu"] > .menu > .menu-item > .ct-menu-link > .ct-toggle-dropdown-desktop,
	header [data-id="menu"] > .menu > .menu-item > .ct-menu-link > .ct-toggle-dropdown-mobile {
		display: none !important;
	}

	/* Blocksy renders the trigger inside <span class="ct-sub-menu-parent">
	   when the item has children; un-wrap visually by stripping spacing. */
	header [data-id="menu"] > .menu > .av-mega-trigger > .ct-sub-menu-parent {
		display: inline-flex;
		align-items: center;
	}
}

/* =========================================================
   AVELOR — Catalog accordion inside the mobile offcanvas.
   The same wp_nav_menu render that feeds the desktop header
   also feeds Blocksy's offcanvas, so each catalog trigger's
   .av-megamenu is already in the DOM there. Desktop hover makes
   no sense on a touch panel, so we turn each trigger into a
   tap-to-expand accordion: the label still links to the archive,
   the arrow (button.ct-toggle-dropdown-mobile) toggles .av-m-open
   on the <li> (wired by the inline script in header-megamenu.php),
   which reveals the subcategory list inline.

   Scoped to #offcanvas — Blocksy only surfaces that panel on the
   mobile/offcanvas header layout, so these rules never touch the
   desktop mega panel under header [data-id="menu"].
   ========================================================= */

/* Trigger row: [ label .......... arrow ] with the panel dropping
   onto its own full-width line below (DOM order is link, panel,
   button — re-order so the arrow stays on the label's row). */
#offcanvas .av-mega-trigger > .ct-sub-menu-parent {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
#offcanvas .av-mega-trigger > .ct-sub-menu-parent > .ct-menu-link {
	order: 1;
	flex: 1 1 auto;
	min-width: 0;
}
#offcanvas .av-mega-trigger > .ct-sub-menu-parent > .ct-toggle-dropdown-mobile {
	order: 2;
}

/* The injected panel: inline, full width, collapsed by default. */
#offcanvas .av-mega-trigger > .ct-sub-menu-parent > .av-megamenu {
	order: 3;
	display: block;
	position: static;
	flex-basis: 100%;
	width: 100%;
	max-width: none;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	z-index: auto;
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.3s ease;
}
#offcanvas .av-mega-trigger.av-m-open > .ct-sub-menu-parent > .av-megamenu {
	max-height: 2200px;
}
/* Kill the desktop hover-bridge pseudo-element. */
#offcanvas .av-megamenu::before { display: none; }

/* Strip desktop panel chrome — render as a plain indented list. */
#offcanvas .av-megamenu__panel {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 2px 0 14px 14px;
	overflow: visible;
}
#offcanvas .av-megamenu__cols {
	display: block;
	gap: 0;
}
#offcanvas .av-megamenu__col {
	min-width: 0;
	margin: 0 0 16px;
}
#offcanvas .av-megamenu__col:last-child {
	margin-bottom: 4px;
}
#offcanvas .av-megamenu__col-head {
	font-size: 15px;
	padding-bottom: 8px;
	margin-bottom: 4px;
}
#offcanvas .av-megamenu__section {
	gap: 4px;
	margin-top: 6px;
}
#offcanvas .av-megamenu__list a {
	font-size: 14px;
	padding: 8px 0;
}
#offcanvas .av-megamenu__viewall {
	margin-top: 6px;
	padding-top: 14px;
}

/* Every offcanvas toggle is a tap target: skip the legacy double-tap-zoom
   delay and keep the browser from folding the tap into a pan/zoom gesture
   (the JS toggles on pointerup; see header-megamenu.php). */
#offcanvas .ct-toggle-dropdown-mobile {
	touch-action: manipulation;
}

/* Arrow reflects open state — for every accordion item we drive, catalog
   triggers and native .sub-menu items («Бренди») alike. */
#offcanvas .ct-toggle-dropdown-mobile svg {
	transition: transform 0.25s ease;
}
#offcanvas li.av-m-open > .ct-sub-menu-parent > .ct-toggle-dropdown-mobile svg {
	transform: rotate(180deg);
}

/* =========================================================
   AVELOR — Native .sub-menu accordion inside the offcanvas.
   «Бренди» (and any other plain menu-item-has-children) renders
   its ul.sub-menu as a DIRECT child of the <li> (sibling of
   .ct-sub-menu-parent), which Blocksy leaves display:none and —
   because its menu init crashes on the catalog items' .av-megamenu —
   never reveals. We drive it with the same .av-m-open class the
   inline script toggles, mirroring the catalog accordion.

   Catalog triggers are also menu-item-has-children but have NO
   direct > .sub-menu (they carry .av-megamenu instead), so this
   selector is naturally scoped to the native items only.
   ========================================================= */
#offcanvas li.menu-item-has-children > .sub-menu {
	display: block;
	overflow: hidden;
	max-height: 0;
	margin: 0;
	padding: 0 0 0 14px;
	list-style: none;
	transition: max-height 0.3s ease;
}
#offcanvas li.menu-item-has-children.av-m-open > .sub-menu {
	max-height: 2200px;
}
#offcanvas li.menu-item-has-children > .sub-menu li {
	margin: 0;
}
#offcanvas li.menu-item-has-children > .sub-menu a {
	display: block;
	font-size: 14px;
	padding: 8px 0;
}