/* ==================================================================
   07 - HEADER
   The floating pill navbar, mobile drawer, and search overlay.

   Written mobile first: what you read here is the phone layout -
   logo, hamburger, cart. The desktop switch (inline nav appears,
   hamburger disappears) lives in 13-responsive.css at 992px.
   ================================================================== */


/* ------------------------------------------------------------------
   SHELL
   Fixed, floating, inset from the screen edge on all sides.
   ------------------------------------------------------------------ */

.wo-header {
	position: fixed;
	top: var(--wo-space-4);
	left: 0;
	right: 0;
	z-index: var(--wo-z-header);

	padding-inline: var(--wo-gutter);
	pointer-events: none;   /* the bar itself re-enables this */

	transition: top var(--wo-transition);
}

.wo-header__bar {
	pointer-events: auto;
	position: relative;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wo-space-4);

	width: min(100%, var(--wo-container-wide));
	margin-inline: auto;
	padding: var(--wo-space-3) var(--wo-space-3) var(--wo-space-3) var(--wo-space-5);
	min-height: var(--wo-header-height);

	/* Crystal glass.
	   The diagonal wash gives the surface a direction, so light
	   appears to fall across it rather than sitting flat. The inset
	   shadows are the physical part: a bright top edge where light
	   catches the bevel, a dim bottom edge in its shade, and a faint
	   inner bloom for thickness. */
	background: linear-gradient(
		132deg,
		rgba(255, 255, 255, 0.15) 0%,
		rgba(255, 255, 255, 0.055) 38%,
		rgba(255, 255, 255, 0.025) 62%,
		rgba(255, 255, 255, 0.085) 100%
	);
	border: 1px solid rgba(255, 255, 255, 0.20);
	border-radius: var(--wo-radius-pill);

	box-shadow:
		0 20px 52px rgba(6, 3, 20, 0.52),
		0 2px 10px rgba(6, 3, 20, 0.32),
		inset 0 1px 0 rgba(255, 255, 255, 0.32),
		inset 0 -1px 0 rgba(255, 255, 255, 0.07),
		inset 0 0 44px rgba(214, 202, 255, 0.05);

	/* brightness lifts the starfield showing through, so the glass
	   reads as lit rather than as a dark filter. */
	backdrop-filter: blur(30px) saturate(190%) brightness(1.07);
	-webkit-backdrop-filter: blur(30px) saturate(190%) brightness(1.07);

	transition:
		background var(--wo-transition),
		border-color var(--wo-transition),
		box-shadow var(--wo-transition);
}

/* Specular highlight. A separate layer so it can sit above the
   backdrop blur without being blurred itself - that contrast is what
   makes the surface read as glass rather than as frosting.
   No overflow:hidden anywhere here, or the nav dropdowns would clip. */
.wo-header__bar::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	border-radius: inherit;

	background:
		linear-gradient(
			118deg,
			rgba(255, 255, 255, 0.17) 0%,
			rgba(255, 255, 255, 0.05) 24%,
			transparent 44%
		),
		radial-gradient(
			130% 110% at 10% -30%,
			rgba(255, 255, 255, 0.20),
			transparent 58%
		);
}

/* Content sits above the highlight. */
.wo-header__bar > * {
	position: relative;
	z-index: 1;
}

/* Solidifies once the page scrolls - class added by navigation.js */
.wo-header.is-scrolled .wo-header__bar {
	background: linear-gradient(
		132deg,
		rgba(255, 255, 255, 0.185) 0%,
		rgba(255, 255, 255, 0.075) 38%,
		rgba(255, 255, 255, 0.04) 62%,
		rgba(255, 255, 255, 0.11) 100%
	);
	border-color: rgba(255, 255, 255, 0.26);

	box-shadow:
		0 24px 60px rgba(6, 3, 20, 0.60),
		0 2px 12px rgba(6, 3, 20, 0.40),
		inset 0 1px 0 rgba(255, 255, 255, 0.40),
		inset 0 -1px 0 rgba(255, 255, 255, 0.08),
		inset 0 0 50px rgba(214, 202, 255, 0.07);

	backdrop-filter: blur(38px) saturate(200%) brightness(1.09);
	-webkit-backdrop-filter: blur(38px) saturate(200%) brightness(1.09);
}

/* Backdrop-filter is unsupported on some older Android browsers.
   Without this the bar would render fully transparent. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.wo-header__bar {
		background: rgba(26, 18, 56, 0.96);
	}

	.wo-header__bar::before {
		display: none;
	}
}

/* Pushes page content clear of the fixed bar. */
.wo-header-spacer {
	height: var(--wo-header-offset);
	flex-shrink: 0;
}


/* ------------------------------------------------------------------
   LOGO
   Text-based: "Wax" white, "Orbit" purple.
   If a custom logo image is uploaded in the Customizer, the image
   rules below take over automatically.
   ------------------------------------------------------------------ */

.wo-logo {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	line-height: 1;
	text-decoration: none;
}

.wo-logo__text {
	font-family: var(--wo-font-display);
	font-size: clamp(1.25rem, 2.2vw, 1.5rem);
	font-weight: var(--wo-weight-bold);
	letter-spacing: var(--wo-tracking-tight);
	font-variation-settings: 'opsz' 40, 'SOFT' 30, 'WONK' 1;
	color: var(--wo-text);
	white-space: nowrap;
	transition: opacity var(--wo-transition);
}

.wo-logo__accent {
	color: var(--wo-primary-hover);
}

.wo-logo:hover .wo-logo__text {
	opacity: 0.85;
}

/* Uploaded logo image */
.wo-logo img,
.custom-logo {
	width: auto;
	height: 34px;
	max-height: 40px;
	object-fit: contain;
}


/* ------------------------------------------------------------------
   PRIMARY NAV
   Hidden on mobile - lives inside the drawer instead.
   Revealed at 992px in 13-responsive.css.
   ------------------------------------------------------------------ */

.wo-nav {
	display: none;
}

.wo-nav__list {
	display: flex;
	align-items: center;
	gap: var(--wo-space-1);
	list-style: none;
	margin: 0;
	padding: 0;
}

.wo-nav__list a {
	display: inline-flex;
	align-items: center;
	padding: var(--wo-space-2) var(--wo-space-4);

	font-family: var(--wo-font-body);
	font-size: var(--wo-text-sm);
	font-weight: var(--wo-weight-medium);
	color: var(--wo-text-muted);
	text-decoration: none;
	white-space: nowrap;

	border-radius: var(--wo-radius-pill);
	transition: color var(--wo-transition), background var(--wo-transition);
}

.wo-nav__list a:hover {
	color: var(--wo-text);
	background: rgba(255, 255, 255, 0.10);
}

/* Current page */
.wo-nav__list .current-menu-item > a,
.wo-nav__list .current_page_item > a,
.wo-nav__list .current-menu-ancestor > a {
	color: var(--wo-text);
	font-weight: var(--wo-weight-semibold);
}


/* ------------------------------------------------------------------
   DROPDOWN SUBMENU
   Shows on hover on desktop, expands inline on mobile.
   ------------------------------------------------------------------ */

.wo-nav__list li {
	position: relative;
}

.wo-nav__list .sub-menu {
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%) translateY(-6px);
	z-index: 2;

	min-width: 190px;
	padding: var(--wo-space-2);
	margin: 0;
	list-style: none;

	/* Same glass language as the bar, at higher opacity so menu text
	   stays readable over whatever is behind it. */
	background: linear-gradient(
		140deg,
		rgba(46, 34, 96, 0.94) 0%,
		rgba(30, 22, 66, 0.96) 100%
	);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--wo-radius);

	box-shadow:
		0 18px 44px rgba(6, 3, 20, 0.55),
		inset 0 1px 0 rgba(255, 255, 255, 0.22);

	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);

	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity var(--wo-transition),
		transform var(--wo-transition),
		visibility var(--wo-transition);
}

.wo-nav__list li:hover > .sub-menu,
.wo-nav__list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

.wo-nav__list .sub-menu a {
	display: block;
	width: 100%;
	padding: var(--wo-space-3) var(--wo-space-4);
	border-radius: var(--wo-radius-sm);
	font-size: var(--wo-text-sm);
}


/* ------------------------------------------------------------------
   ACTIONS
   Search, wishlist, cart, account.
   ------------------------------------------------------------------ */

.wo-header__actions {
	display: flex;
	align-items: center;
	gap: var(--wo-space-1);
	flex-shrink: 0;
}

/* Wishlist and account are secondary - hidden on the smallest screens
   so the bar never crowds. They reappear at 600px. */
.wo-header__actions .wo-action--secondary {
	display: none;
}

/* Thin divider before the hamburger. */
.wo-header__divider {
	width: 1px;
	height: 22px;
	margin-inline: var(--wo-space-2);
	background: rgba(255, 255, 255, 0.22);
}


/* ------------------------------------------------------------------
   HAMBURGER
   Three lines that morph into an X. Hidden at 992px.
   ------------------------------------------------------------------ */

.wo-burger {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;

	width: 42px;
	height: 42px;
	padding: 0;

	background: transparent;
	border: none;
	border-radius: var(--wo-radius-circle);
	cursor: pointer;
	transition: background var(--wo-transition);
}

.wo-burger:hover {
	background: rgba(255, 255, 255, 0.12);
}

.wo-burger:focus-visible {
	outline: none;
	box-shadow: var(--wo-ring);
}

.wo-burger__line {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--wo-text);
	border-radius: 2px;
	transition: transform var(--wo-transition), opacity var(--wo-duration-fast) var(--wo-ease);
}

.wo-burger[aria-expanded='true'] .wo-burger__line:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.wo-burger[aria-expanded='true'] .wo-burger__line:nth-child(2) {
	opacity: 0;
}

.wo-burger[aria-expanded='true'] .wo-burger__line:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}


/* ------------------------------------------------------------------
   MOBILE DRAWER
   Slides in from the right. Uses translate rather than left/right
   so it is composited on the GPU and stays smooth on cheap phones.
   ------------------------------------------------------------------ */

.wo-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: var(--wo-z-drawer);

	width: min(88vw, 340px);
	padding: var(--wo-space-6) var(--wo-space-6) var(--wo-space-10);

	display: flex;
	flex-direction: column;
	gap: var(--wo-space-6);

	/* Glass panel, but weighted enough that nav text stays legible
	   over product images sliding past behind it. */
	background: linear-gradient(
		200deg,
		rgba(48, 35, 100, 0.92) 0%,
		rgba(26, 18, 56, 0.95) 55%,
		rgba(20, 14, 42, 0.96) 100%
	);
	border-left: 1px solid rgba(255, 255, 255, 0.16);

	box-shadow:
		-24px 0 64px rgba(6, 3, 20, 0.62),
		inset 1px 0 0 rgba(255, 255, 255, 0.14);

	backdrop-filter: blur(26px) saturate(180%);
	-webkit-backdrop-filter: blur(26px) saturate(180%);

	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;

	transform: translateX(100%);
	visibility: hidden;
	transition:
		transform var(--wo-duration-slow) var(--wo-ease-out),
		visibility var(--wo-duration-slow);
}

.wo-drawer.is-open {
	transform: translateX(0);
	visibility: visible;
}

.wo-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: var(--wo-space-5);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* The drawer reuses .wo-nav__list, which is flex-row for the desktop
   bar. Force it to stack here. */
.wo-drawer__nav ul,
.wo-drawer__nav .wo-nav__list {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--wo-space-1);

	list-style: none;
	margin: 0;
	padding: 0;
}

.wo-drawer__nav li {
	width: 100%;
}

.wo-drawer__nav a {
	display: block;
	padding: var(--wo-space-4) var(--wo-space-3);

	font-family: var(--wo-font-display);
	font-size: var(--wo-text-lg);
	font-weight: var(--wo-weight-semibold);
	color: var(--wo-text);
	text-decoration: none;

	border-radius: var(--wo-radius-sm);
	transition: background var(--wo-transition), color var(--wo-transition);
}

.wo-drawer__nav a:hover,
.wo-drawer__nav .current-menu-item > a {
	background: var(--wo-primary-soft);
	color: var(--wo-primary-hover);
}

.wo-drawer__nav .sub-menu {
	padding-left: var(--wo-space-4);
	border-left: 1px solid var(--wo-line);
	margin-left: var(--wo-space-3);
}

.wo-drawer__nav .sub-menu a {
	font-family: var(--wo-font-body);
	font-size: var(--wo-text-base);
	font-weight: var(--wo-weight-normal);
	color: var(--wo-text-muted);
	padding-block: var(--wo-space-3);
}

.wo-drawer__footer {
	margin-top: auto;
	padding-top: var(--wo-space-6);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	display: flex;
	flex-direction: column;
	gap: var(--wo-space-3);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.wo-drawer {
		background: #1A1238;
	}
}


/* ------------------------------------------------------------------
   OVERLAY
   Dims and blocks the page behind the drawer or search panel.
   ------------------------------------------------------------------ */

.wo-overlay {
	position: fixed;
	inset: 0;
	z-index: var(--wo-z-overlay);

	background: rgba(10, 6, 26, 0.68);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);

	opacity: 0;
	visibility: hidden;
	transition: opacity var(--wo-transition), visibility var(--wo-transition);
}

.wo-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

/* The drawer must sit above the overlay. */
.wo-drawer {
	z-index: calc(var(--wo-z-overlay) + 1);
}


/* ------------------------------------------------------------------
   SEARCH PANEL
   Drops down from the top when the search icon is clicked.
   ------------------------------------------------------------------ */

.wo-search-panel {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: calc(var(--wo-z-overlay) + 2);

	padding: var(--wo-space-8) var(--wo-gutter) var(--wo-space-10);

	background: linear-gradient(
		168deg,
		rgba(40, 28, 88, 0.95) 0%,
		rgba(22, 15, 48, 0.97) 100%
	);
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);

	box-shadow:
		0 26px 60px rgba(6, 3, 20, 0.55),
		inset 0 1px 0 rgba(255, 255, 255, 0.20);

	backdrop-filter: blur(28px) saturate(180%);
	-webkit-backdrop-filter: blur(28px) saturate(180%);

	transform: translateY(-100%);
	visibility: hidden;
	transition:
		transform var(--wo-duration-slow) var(--wo-ease-out),
		visibility var(--wo-duration-slow);
}

.wo-search-panel.is-open {
	transform: translateY(0);
	visibility: visible;
}

.wo-search-panel__inner {
	width: min(100%, 720px);
	margin-inline: auto;
}

.wo-search-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wo-space-4);
	margin-bottom: var(--wo-space-5);
}

.wo-search-panel__label {
	font-size: var(--wo-text-xs);
	font-weight: var(--wo-weight-semibold);
	letter-spacing: var(--wo-tracking-wider);
	text-transform: uppercase;
	color: var(--wo-gold);
}

.wo-search-panel .wo-search__input {
	min-height: 56px;
	font-size: var(--wo-text-lg);
}

.wo-search-panel__hint {
	margin-top: var(--wo-space-4);
	font-size: var(--wo-text-xs);
	color: var(--wo-text-dim);
}


/* ------------------------------------------------------------------
   ANNOUNCEMENT BAR
   Optional strip above the header - free shipping, offers.
   ------------------------------------------------------------------ */

.wo-announce {
	position: relative;
	z-index: calc(var(--wo-z-header) + 1);

	padding: var(--wo-space-2) var(--wo-gutter);

	font-size: var(--wo-text-xs);
	font-weight: var(--wo-weight-medium);
	text-align: center;
	color: var(--wo-text-on-gold);
	background: var(--wo-gold);
}

.wo-announce a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* When the announcement bar is present the header sits below it. */
body.has-announce .wo-header {
	top: calc(var(--wo-space-4) + 34px);
}

/* ------------------------------------------------------------------
   DRAWER ACCOUNT ROW
   Circular wishlist, then My Account - always on one line.

   flex-wrap: nowrap is the rule that matters. Without it the row
   inherits the default wrap and breaks onto a second line as soon as
   the button's intrinsic width plus the heart exceeds the drawer,
   which is what pushed the heart onto its own row.

   The heart is pinned on both axes so it can neither shrink nor
   stretch; min-width: 0 on the button lets that compress instead.
   ------------------------------------------------------------------ */

/*
 * The drawer footer is a flex COLUMN with gap: var(--wo-space-3), so
 * every button in it - Shop Fragrances, My Account, Wishlist, Track
 * Your Order - gets its width, height, icon gap, spacing and hover
 * from .wo-btn--block. None of them needs a rule of its own.
 *
 * Removed from here: the fixed 46px square that made Wishlist an
 * icon-only circle, and the flex sizing that let My Account shrink
 * and ellipsise beside it. Both existed for the old layout where the
 * two shared one horizontal row. Wishlist now carries its "Wishlist"
 * label and sits on its own full-width line like the others, so that
 * CSS no longer described anything on the page.
 *
 * Leaving it in place would have been an active hazard rather than
 * dead weight: .wo-drawer__account still matched, and its
 * `overflow: hidden; text-overflow: ellipsis` would have silently
 * truncated the label the moment the button was narrow enough.
 */