/**
 * Categories mega menu.
 *
 * A left rail of departments and a right panel of child cards. Hover is a
 * pointer enhancement layered on top of a component that already works with
 * keyboard, with touch and with JavaScript off — every department is a real
 * link, and focusing a rail item swaps the panel exactly as hovering does.
 *
 * @package XShop
 */

.xs-mega-wrap { position: relative; flex: none; }

/* -------------------------------------------------------------------------
 * Trigger
 * ---------------------------------------------------------------------- */
.xs-mega-trigger {
	display: inline-flex; align-items: center; gap: 9px;
	height: var(--xs-control-h); padding: 0 20px;
	/* The CTA gradient. It is the one navigational action in the header and
	   there is no competing filled control up here, so the "one gradient per
	   viewport" rule still holds. */
	background: var(--xs-color-primary);
	background-image: linear-gradient(165deg, var(--xs-color-cta-from), var(--xs-color-cta-to));
	border: 0;
	border-radius: var(--xs-control-r);
	color: var(--xs-on-primary);
	font: inherit; font-size: 0.92rem; font-weight: 650;
	cursor: pointer; white-space: nowrap;
	position: relative;
	box-shadow: 0 6px 20px -6px var(--xs-color-cta-glow),
	            inset 0 1px 0 var(--xs-color-cta-rim);
	isolation: isolate;
	/* background-image does not interpolate — the browser swaps gradients in a
	   single frame, which is why this button snapped on hover while everything
	   around it eased. The hover gradient now rides on an ::before whose
	   OPACITY animates, so it composites. */
	transition: box-shadow var(--xs-dur-fast) var(--xs-ease-out),
	            transform var(--xs-dur-fast) var(--xs-ease-out);
}
.xs-mega-trigger::before {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	border-radius: inherit;
	background-image: linear-gradient(165deg, var(--xs-color-primary-hover), var(--xs-color-cta-to));
	opacity: 0;
	transition: opacity var(--xs-dur-fast) var(--xs-ease-out);
}
.xs-mega-trigger svg { width: 17px; height: 17px; flex: none; }
.xs-mega-trigger__chev { width: 13px; height: 13px; transition: transform var(--xs-dur-fast) var(--xs-ease-out); opacity: .6; }
.xs-mega-trigger:hover::before,
.xs-mega-trigger:focus-visible::before { opacity: 1; }
.xs-mega-trigger[aria-expanded="true"] {
	box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.35), inset 0 1px 0 var(--xs-color-cta-rim);
}
/* After :hover::before so the open state keeps reading as pressed even while
   the pointer is still on the button. */
.xs-mega-trigger[aria-expanded="true"]::before {
	background-image: linear-gradient(165deg, var(--xs-color-primary-pressed), var(--xs-color-cta-to));
	opacity: 1;
}
.xs-mega-trigger[aria-expanded="true"] .xs-mega-trigger__chev { transform: rotate(180deg); }

/* -------------------------------------------------------------------------
 * Panel
 * ---------------------------------------------------------------------- */
.xs-mega {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	z-index: 300;
	/* Ends where the search field ends. --xs-mega-w is measured in JS from the
	   trigger's left edge to the search input's right edge, because the two are
	   siblings with different growth behaviour and CSS alone cannot relate them. */
	width: var(--xs-mega-w, min(1180px, calc(100vw - 48px)));
	display: grid;
	grid-template-columns: 268px minmax(0, 1fr);
	min-height: 460px;
	max-height: min(560px, calc(100vh - var(--xs-header-h) - 40px));
	background: var(--xs-color-bg);
	border: 1px solid var(--xs-color-line);
	border-radius: 18px;
	box-shadow: 0 28px 60px -28px rgba(0, 0, 0, 0.55);
	overflow: hidden;
	animation: xs-mega-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Frosted ground. Only where the blur is actually supported — a translucent
   panel without it would just be an unreadable wash over the product grid. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.xs-mega {
		background: color-mix(in srgb, var(--xs-color-bg) var(--xs-mega-veil, 68%), transparent);
		-webkit-backdrop-filter: var(--xs-mega-blur, blur(30px) saturate(1.5));
		backdrop-filter: var(--xs-mega-blur, blur(30px) saturate(1.5));
	}
}
.xs-mega[hidden] { display: none; }

@keyframes xs-mega-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

/* Dismissal. 140ms here must stay in step with CLOSE_ANIM in mega.js, which
   owns the hidden flag. Slightly faster than the open and on an accelerating
   curve: leaving should feel decisive, arriving should feel settled. */
.xs-mega.is-closing {
	animation: xs-mega-out 140ms cubic-bezier(0.3, 0, 0.8, 0.15) both;
	pointer-events: none;
}
@keyframes xs-mega-out {
	from { opacity: 1; transform: none; }
	to   { opacity: 0; transform: translateY(-4px); }
}

/* -------------------------------------------------------------------------
 * Rail — never scrolls. Scrolling it would move the department list out from
 * under the pointer mid-gesture.
 * ---------------------------------------------------------------------- */
.xs-mega__rail {
	overflow: visible;
	padding: 14px 10px;
	border-right: 1px solid var(--xs-color-line);
}
.xs-mega__rail ul { list-style: none; margin: 0; padding: 0; }

.xs-mega__dep {
	display: flex; align-items: center; gap: 10px;
	/* Two lines by design: "მასტურბატორები და პენისის სათამაშოები" is 38
	   characters, and truncating it in an unfamiliar script is far more
	   damaging than letting it wrap. */
	min-height: 48px; padding: 9px 14px;
	border-radius: 12px;
	color: var(--xs-color-body);
	font-size: 0.9rem; font-weight: 500; line-height: 1.3;
	transition: background .16s ease, color .16s ease;
}
.xs-mega__dep-label { min-width: 0; flex: 1 1 auto; }

/* The rail carries no icons, so the row needs some other cue that it reveals
   a panel rather than just navigating. A chevron that only appears on the
   hovered/active row does that without adding 12 more marks to the column. */
.xs-mega__dep::after {
	content: ""; flex: none;
	width: 7px; height: 7px; margin-right: 1px;
	border-right: 2px solid currentColor;
	border-top: 2px solid currentColor;
	border-radius: 1px;
	transform: rotate(45deg) translate(-1px, 1px);
	opacity: 0;
	transition: opacity .16s ease, transform .16s ease;
}
.xs-mega__dep:hover::after,
.xs-mega__dep:focus-visible::after,
.xs-mega__dep.is-active::after { opacity: .75; transform: rotate(45deg) translate(1px, -1px); }

.xs-mega__dep:hover,
.xs-mega__dep:focus-visible { background: var(--xs-color-hover-bg); color: var(--xs-color-ink); }
.xs-mega__dep.is-active {
	background: var(--xs-color-bg-soft);
	color: var(--xs-color-active);
	font-weight: 650;
}

/* -------------------------------------------------------------------------
 * Panels — only the right side scrolls
 * ---------------------------------------------------------------------- */
.xs-mega__panels { position: relative; min-width: 0; }
.xs-mega__panel {
	position: absolute; inset: 0;
	overflow-y: auto;
	padding: 18px 22px 22px;
	/* Absolute so the outgoing and incoming panels occupy the same box. While
	   they were in flow, a department swap collapsed the column to nothing and
	   then faded the next one up from empty — a flash on every row crossed.
	   Fading from 0.35 rather than 0 keeps the swap continuous. */
	animation: xs-mega-fade var(--xs-dur-fast) var(--xs-ease-out) both;
}
.xs-mega__panel[hidden] { display: none; }

@keyframes xs-mega-fade { from { opacity: 0.35; } to { opacity: 1; } }

.xs-mega__viewall {
	display: inline-flex; align-items: center; gap: 7px;
	margin-bottom: 14px;
	font-size: 0.9rem; font-weight: 650;
	color: var(--xs-color-active);
}
.xs-mega__viewall:hover { color: var(--xs-color-ink); }

.xs-mega__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

/* The archive card, resized for the panel. Three across inside a panel that
   only reaches as far as the search bar leaves ~185px per card, and Georgian
   category names run to three lines at that width. So the mark is a grid row
   rather than an absolute corner: it can still bleed past the padding, but it
   can never land underneath the name. */
/* SPECIFICITY, and it is load-bearing. The markup is class="cat-card
   cat-card--mega", and archive.css:374 styles bare .cat-card at the same
   (0,1,0) weight but loads AFTER this file on every shop page. Worse, those
   declarations read --card-r, --tile, --dur and --ease-out, which archive.css
   declares only on .shop-layout — and the mega menu renders in the header,
   outside it. Undefined var() is invalid at computed-value time, so on every
   archive page the mega cards were computing border-radius: 0, background:
   transparent and no transition at all: square, see-through, snapping. The
   .xs-mega prefix takes these to (0,2,0) so they win on weight rather than on
   load order, and the card no longer depends on tokens it cannot see. */
.xs-mega .cat-card--mega {
	position: relative;
	display: grid; grid-template-rows: auto 1fr; row-gap: 6px;
	min-height: 108px; padding: 14px 15px;
	background: var(--xs-surface);
	border: 1px solid var(--xs-color-line-soft);
	border-radius: var(--xs-radius-card);
	box-shadow: none;
	overflow: hidden;
	isolation: isolate;
	color: inherit;
	/* Inherited from .cat-card, where it resolves to the archive's staggered
	   entry. In a panel that opens in 180ms an 11-step 38ms stagger would hold
	   the last card blank past the open, so it is refused here outright. */
	animation: none;
	transition: background var(--xs-dur, 250ms) var(--xs-ease-out, cubic-bezier(0.05, 0.7, 0.1, 1)),
	            border-color var(--xs-dur, 250ms) var(--xs-ease-out, cubic-bezier(0.05, 0.7, 0.1, 1)),
	            transform var(--xs-dur, 250ms) var(--xs-ease-out, cubic-bezier(0.05, 0.7, 0.1, 1));
}

/* The per-department bloom. mega-menu.php writes --cat-tint inline on every
   card from xshop_core_art_tint() — twelve hand-picked rose and pink hues —
   but the only rule that consumed it lived in archive.css, so it painted on
   shop pages and nowhere else. Brought here, graded through violet, it is a
   purple-to-pink wash behind the mark on every page the menu opens on. */
.xs-mega .cat-card--mega::after {
	content: "";
	position: absolute; inset: auto -38% -30% auto;
	width: 78%; aspect-ratio: 1; z-index: 0;
	background: radial-gradient(circle at 68% 70%,
		var(--cat-tint, color-mix(in srgb, var(--xs-color-primary) 16%, transparent)),
		var(--xs-bloom-violet) 46%, transparent 72%);
	opacity: 0.9;
	transition: opacity var(--xs-dur, 250ms) var(--xs-ease-out, cubic-bezier(0.05, 0.7, 0.1, 1)),
	            transform var(--xs-dur-slow, 400ms) var(--xs-ease-out, cubic-bezier(0.05, 0.7, 0.1, 1));
}
.xs-mega .cat-card--mega .cat-card__name {
	position: relative; z-index: 2;
	display: block; max-width: 100%;
	font-size: 0.875rem; font-weight: 600; line-height: 1.32;
	color: var(--xs-color-ink);
	transition: color var(--xs-dur, 250ms) var(--xs-ease-out, cubic-bezier(0.05, 0.7, 0.1, 1));
}
.xs-mega .cat-card--mega .cat-card__media {
	justify-self: end; align-self: end;
	margin: 0 -13px -12px 0;
	width: 72px; aspect-ratio: 1; z-index: 1;
	transition: transform var(--xs-dur-slow, 400ms) var(--xs-ease-out, cubic-bezier(0.05, 0.7, 0.1, 1));
}
.xs-mega .cat-card--mega .cat-art { color: var(--xs-color-warm); opacity: .9; }
.xs-mega .cat-card--mega:hover,
.xs-mega .cat-card--mega:focus-visible {
	background: var(--xs-surface-2);
	border-color: var(--xs-color-active-line);
	transform: translateY(-2px);
}
.xs-mega .cat-card--mega:hover::after { opacity: 1; transform: scale(1.08); }
.xs-mega .cat-card--mega:hover .cat-card__media { transform: scale(1.06); }
.xs-mega .cat-card--mega:hover .cat-card__name { color: var(--xs-color-active); }

/* The blocks let the panel's own frosted ground through rather than sitting on
   it as solid tiles. Same (0,2,0) weight as the rules above, so it has to come
   AFTER them to win — and inside @supports, so a browser with no backdrop
   filter still gets a solid, readable card instead of a wash. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.xs-mega .cat-card--mega {
		background: color-mix(in srgb, var(--xs-surface) var(--xs-card-veil, 50%), transparent);
		border-color: color-mix(in srgb, var(--xs-color-line) 55%, transparent);
	}
	.xs-mega .cat-card--mega:hover,
	.xs-mega .cat-card--mega:focus-visible {
		background: color-mix(in srgb, var(--xs-surface-2) calc(var(--xs-card-veil, 50%) + 24%), transparent);
		border-color: var(--xs-color-active-line);
	}
}

/* -------------------------------------------------------------------------
 * Hover behaviour is gated: on a touch device the trigger is a plain toggle.
 * ---------------------------------------------------------------------- */
@media (hover: none) {
	.xs-mega { position: fixed; inset: var(--xs-header-total, 120px) 0 0 0; width: auto; max-height: none;
	           border-radius: 0; grid-template-columns: minmax(0, 1fr); }
	.xs-mega__rail { border-right: 0; border-bottom: 1px solid var(--xs-color-line); }
	.xs-mega__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
	.xs-mega { width: min(920px, calc(100vw - 32px)); grid-template-columns: 236px minmax(0, 1fr); }
	.xs-mega__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	/* The wrap stays in the DOM — the burger opens this same panel as a
	   full-screen drawer, so hiding it would remove category navigation from
	   the header entirely. Only its own trigger button goes. */
	.xs-mega-trigger { display: none; }
	.xs-mega-wrap { position: static; }
	.xs-mega {
		position: fixed; inset: var(--xs-header-total, 120px) 0 0 0;
		width: auto; max-height: none; border-radius: 0;
		/* minmax(0,…) not 1fr: a grid item defaults to min-width:auto, so the
		   twelve nowrap department chips would otherwise size the track to
		   their combined min-content width — measured at 2792px inside a
		   375px drawer. */
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto minmax(0, 1fr);
		overflow-y: auto;
	}
	.xs-mega__rail {
		min-width: 0;
		overflow-x: auto;
		scrollbar-width: none;
		border-right: 0; border-bottom: 1px solid var(--xs-color-line);
	}
	.xs-mega__rail::-webkit-scrollbar { display: none; }
	.xs-mega__rail ul { display: flex; gap: 6px; width: max-content; }
	.xs-mega__dep { white-space: nowrap; }
	.xs-mega__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body.xs-mega-open { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
	.xs-mega, .xs-mega__panel, .xs-mega.is-closing { animation: none; }
	.xs-mega-trigger::before { transition-duration: 1ms; }
	.xs-mega .cat-card--mega, .xs-mega .cat-card--mega::after,
	.xs-mega .cat-card--mega .cat-card__media { transition-duration: 1ms; }
	.xs-mega .cat-card--mega:hover { transform: none; }
	.xs-mega .cat-card--mega:hover::after { transform: none; }
	.xs-mega .cat-card--mega:hover .cat-card__media { transform: none; }
}

/* -------------------------------------------------------------------------
 * Instant search
 *
 * The panel is aligned to the mega menu's geometry so the two header surfaces
 * read as one system. It never scrolls: the result caps are set so it cannot
 * overflow, which also sidesteps the aria-activedescendant scroll problem.
 * ---------------------------------------------------------------------- */
.xs-search { position: relative; flex: 1 1 auto; min-width: 0; max-width: 680px; }

.xs-search__field { position: relative; display: flex; align-items: center; }

.xs-search__icon {
	position: absolute; left: 17px; width: 17px; height: 17px;
	color: var(--xs-color-muted); pointer-events: none;
}

.xs-search__input {
	width: 100%; height: var(--xs-control-h);
	padding: 0 80px 0 46px;
	background: var(--xs-color-bg-soft);
	border: 1px solid var(--xs-color-line);
	border-radius: var(--xs-control-r);
	color: var(--xs-color-ink);
	font: inherit; font-size: 0.95rem;
	transition: border-color .18s ease, background .18s ease;
}
.xs-search__input::placeholder { color: var(--xs-color-muted); }
.xs-search__input:focus { outline: none; border-color: var(--xs-control-line); background: var(--xs-surface-2); }
.xs-search__input::-webkit-search-cancel-button { display: none; }

.xs-search__clear {
	position: absolute; right: 14px;
	width: 28px; height: 28px; padding: 0;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--xs-tint-strong); border: 0; border-radius: 50%;
	color: var(--xs-color-ink); cursor: pointer;
}
.xs-search__clear svg { width: 12px; height: 12px; }

.xs-search__spinner {
	position: absolute; right: 46px;
	width: 15px; height: 15px; border-radius: 50%;
	border: 2px solid var(--xs-color-line);
	border-top-color: var(--xs-color-active);
	animation: xs-spin .6s linear infinite;
}
@keyframes xs-spin { to { transform: rotate(360deg); } }

.xs-search__panel {
	position: absolute; top: calc(100% + 8px); left: 0; right: 0;
	z-index: 320;
	padding: 8px;
	background: var(--xs-color-bg);
	border: 1px solid var(--xs-color-line);
	border-radius: var(--xs-control-r);
	box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.6);
	animation: xs-mega-fade 140ms ease both;
}
.xs-search__panel[hidden] { display: none; }

/* Frosted, and it has to come after the base rule above to win on order —
   which is why it never took effect while it lived up with the mega panel's
   @supports block near the top of the file. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.xs-search__panel {
		/* Denser type than the mega panel, so it keeps a little more body. */
		background: color-mix(in srgb, var(--xs-color-bg) calc(var(--xs-mega-veil, 68%) + 10%), transparent);
		-webkit-backdrop-filter: var(--xs-mega-blur, blur(30px) saturate(1.5));
		backdrop-filter: var(--xs-mega-blur, blur(30px) saturate(1.5));
	}
}

.xs-search__group + .xs-search__group { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--xs-color-line); }
.xs-search__label { margin: 4px 8px 4px; font-size: .7rem; font-weight: 800; color: var(--xs-color-muted); }

.xs-search__opt {
	display: flex; align-items: center; gap: 10px;
	padding: 8px 9px; border-radius: 9px;
	color: var(--xs-color-body); font-size: .89rem; line-height: 1.3;
	transition: background .14s ease, color .14s ease;
}
.xs-search__opt b { color: var(--xs-color-active); font-weight: 700; }
.xs-search__opt:hover,
.xs-search__opt.is-cursor { background: var(--xs-color-hover-bg); color: var(--xs-color-ink); }

.xs-search__opt--cat .cat-art { width: 22px; height: 22px; flex: none; color: var(--xs-color-warm); }
.xs-search__opt--prod img,
.xs-search__noimg {
	width: 44px; height: 44px; flex: none; object-fit: cover;
	border-radius: 8px; background: var(--xs-media-bg);
}
.xs-search__pname { flex: 1 1 auto; min-width: 0; }
.xs-search__price { flex: none; font-weight: 700; color: var(--xs-color-ink); font-size: .86rem; }

.xs-search__all {
	display: block; margin-top: 6px; padding: 9px;
	text-align: center; border-radius: 9px;
	background: var(--xs-color-bg-soft);
	color: var(--xs-color-active); font-size: .86rem; font-weight: 650;
}
.xs-search__all:hover { background: var(--xs-tint-strong); color: var(--xs-color-ink); }
.xs-search__empty { margin: 0; padding: 18px 12px; text-align: center; color: var(--xs-color-muted); font-size: .88rem; }

@media (max-width: 900px) {
	.xs-search { max-width: none; }
	.xs-search__panel { position: fixed; left: 12px; right: 12px; top: calc(var(--xs-header-total, 120px) + 8px); }
}

@media (prefers-reduced-motion: reduce) {
	.xs-search__panel { animation: none; }
	.xs-search__spinner { animation-duration: 1.2s; }
}