@charset "UTF-8";
/**
 * IMPERVORA - Catalog navigation.
 *
 * Scoped entirely to .impervora-mega*, .impervora-nav__* and the
 * .impervora-nav-parent <li>. The only rules that reach Astra's own markup are
 * the two containing-block declarations on the header bar and the scroll
 * behaviour on the mobile drawer, both flagged where they appear.
 *
 * Mobile first. The base rules below ARE the tablet/mobile accordion; the
 * desktop mega panel is a >=1281px override.
 *
 * BREAKPOINT CONTRACT -- 1280px is the tablet/desktop divide, and it is stated
 * in THREE places that must always agree:
 *   1. impervora_nav_header_breakpoint() in inc/catalog-navigation.php
 *      (filters astra_header_break_point -> drives Astra's own menu JS)
 *   2. the two media queries below
 *   3. var DESKTOP in assets/js/impervora-catalog-nav.js
 * Change one without the others and the header and the panel disagree.
 *
 * Astra's default was 921, which fell between tablet portrait and tablet
 * landscape: the same iPad got the hamburger held upright and the full desktop
 * mega menu turned sideways. 1280 puts every tablet orientation below the line
 * (iPad landscape 1024, iPad Pro 11 landscape 1194, Android tablet landscape
 * 1280) and every desktop width above it (1366, 1440, 1920).
 *
 * Tokens come from impervora.css :root. Per the brand typography standard nav
 * labels stay link-styled and are never gilded; accents use the systemic gold
 * --imp-gold, never the brand gold.
 */

/* -------------------------------------------------------------------------
 * Mobile: inline accordion inside Astra's drawer
 * ---------------------------------------------------------------------- */

/**
 * Which header renders, up to the tablet/desktop divide.
 *
 * Astra hardcodes `#ast-desktop-header{display:none}` at max-width 921.99px and
 * `#ast-mobile-header{display:none}` at min-width 922px in main.min.css. Those
 * are STATIC -- the astra_header_break_point filter moves Astra's JS and body
 * class but never touches these two rules, so raising the breakpoint alone left
 * both headers rendering at once between 922px and 1280px.
 *
 * These two lines are the whole cutover. Nothing inside either header is
 * touched: no layout, no spacing, no markup -- only which one is shown.
 *
 * #ast-mobile-header matches Astra's own rule at (1,0,0), so this wins on
 * source order (the child theme stylesheet loads after astra-theme-css).
 * Astra's `.ast-header-break-point #ast-mobile-header` at (1,1,0) also resolves
 * the same way once its script runs, so the two agree with and without JS.
 */
@media (max-width: 1280px) {

	#ast-desktop-header {
		display: none;
	}

	#ast-mobile-header {
		display: block;
	}
}

.impervora-nav-parent {
	position: relative;
}

.impervora-mega {
	display: none;
}

.impervora-nav-parent.is-open > .impervora-mega {
	display: block;
}

/**
 * The accordion control.
 *
 * padding: 0 is LOAD-BEARING. Astra ships a bare `button` rule with its own
 * padding and background; without an explicit reset this renders as a blank
 * pale oval with the chevron collapsed inside it.
 *
 * Hidden until the script marks the document enhanced, so a no-JS visitor is
 * never shown a control that cannot do anything. The department link beside it
 * still goes to a real category page.
 */
.impervora-nav__toggle {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	align-items: center;
	justify-content: center;
	width: 56px;
	min-width: 56px;
	height: 48px;
	min-height: 48px;
	margin: 0;
	padding: 0;
	color: inherit;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.impervora-nav-js .impervora-nav__toggle {
	display: inline-flex;
}

.impervora-nav__toggle:hover,
.impervora-nav__toggle:focus {
	background: none;
	color: inherit;
}

.impervora-nav__toggle:focus-visible {
	outline: 2px solid var(--imp-gold, #c6a667);
	outline-offset: -2px;
}

.impervora-nav__chevron {
	display: block;
	width: 9px;
	height: 9px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.25s var(--imp-ease, ease);
}

.impervora-nav-parent.is-open > .impervora-nav__toggle .impervora-nav__chevron {
	transform: translateY(2px) rotate(225deg);
}

.impervora-mega__inner {
	padding: 4px 0 12px;
}

.impervora-mega__cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: 4px 24px;
}

.impervora-mega__heading {
	margin: 12px 0 2px;
	padding: 0 0 0 16px;
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--imp-gold, #c6a667);
}

.impervora-mega__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.impervora-mega__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 48px minimum touch target, per the mobile brief. */
.impervora-mega__link {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 4px 16px 4px 28px;
	font-size: 0.92rem;
	line-height: 1.35;
	text-decoration: none;
	color: var(--imp-ink, #0e0e0e);
}

.impervora-mega__link:focus-visible {
	outline: 2px solid var(--imp-gold, #c6a667);
	outline-offset: -2px;
}

.impervora-mega__feature {
	padding: 12px 16px 0 28px;
}

.impervora-mega__eyebrow {
	margin: 0 0 8px;
	font-size: 0.64rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--imp-gold, #c6a667);
}

.impervora-mega__media {
	display: none;
}

/* Square, per the deliberate site-wide button rule. */
.impervora-mega__cta {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 20px;
	font-size: 0.72rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--imp-white, #fff);
	background: var(--imp-ink, #0e0e0e);
	border-radius: 0;
	transition: background 0.3s var(--imp-ease, ease);
}

.impervora-mega__cta:hover,
.impervora-mega__cta:focus-visible {
	color: var(--imp-white, #fff);
	background: var(--imp-gold-deep, #b08f4e);
}

/**
 * Astra's mobile drawer, made to scroll smoothly under a long menu.
 * Reaches Astra markup on purpose -- there is no wrapper of ours to hang it on.
 */
.ast-mobile-header-content,
#ast-mobile-site-navigation {
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
}

/* -------------------------------------------------------------------------
 * Tablet: two columns inside the same accordion
 * ---------------------------------------------------------------------- */

@media (min-width: 600px) and (max-width: 1280px) {

	.impervora-mega__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px 32px;
		padding-right: 16px;
	}

	.impervora-mega__feature {
		grid-column: 1 / -1;
	}
}

/* -------------------------------------------------------------------------
 * Desktop: full-width mega panel
 * ---------------------------------------------------------------------- */

@media (min-width: 1281px) {

	/**
	 * Containing block for the panel. Anchoring to the full-width header bar
	 * rather than to the <li> is what lets a panel span the page without the
	 * left-most and right-most departments overflowing the viewport -- the
	 * failure mode of centring a wide panel on its own menu item.
	 */
	#ast-desktop-header .ast-primary-header-bar {
		position: relative;
	}

	/**
	 * Both of these are SPECIFICITY FIXES, not style choices.
	 *
	 * Astra ships `.main-header-menu .menu-item { position: relative }` at
	 * (0,2,0) and makes the menu <ul> relative too. A bare
	 * `.impervora-nav-parent { position: static }` is (0,1,0) and loses, so the
	 * nearest positioned ancestor stayed the <li> and the panel rendered 97px
	 * wide with all 22 links crushed inside it. Media queries add no
	 * specificity, so being inside this block does not help.
	 *
	 * Neutralising both makes .ast-primary-header-bar above the containing
	 * block, which is what gives the panel the full header width. Safe here
	 * because these menu items have no WordPress sub-menus -- Astra's own
	 * dropdowns are what that `position: relative` exists for.
	 */
	#ast-desktop-header .main-header-menu.ast-nav-menu {
		position: static;
	}

	#ast-desktop-header .main-header-menu .menu-item.impervora-nav-parent {
		position: static;
	}

	.impervora-nav__toggle {
		display: none !important;
	}

	.impervora-mega {
		display: block;
		position: absolute;
		z-index: 999;
		top: 100%;
		left: 0;
		right: 0;
		padding-top: 0;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(6px);
		transition:
			opacity var(--imp-dur, 0.35s) var(--imp-ease, ease),
			transform var(--imp-dur, 0.35s) var(--imp-ease, ease),
			visibility 0s linear var(--imp-dur, 0.35s);
	}

	.impervora-nav-parent:hover > .impervora-mega,
	.impervora-nav-parent:focus-within > .impervora-mega,
	.impervora-nav-parent > .impervora-mega.is-open {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0);
		transition-delay: 0s;
	}

	/**
	 * ELEVATE THE HEADER'S STACKING CONTEXT WHILE A PANEL IS OPEN.
	 *
	 * The panel's own z-index of 999 is scoped to header.site-header, which
	 * Astra's sticky header parks at 998. Anything higher in the ROOT context
	 * therefore paints over the panel no matter what the panel asks for --
	 * .impervora-fab (9990), .astra-cart-drawer (10000) and the first-order
	 * tab all qualify.
	 *
	 * Raising the header only while a panel is open keeps the cart drawer and
	 * the floating buttons behaving normally the rest of the time; raising it
	 * permanently would let the header sit over an open cart drawer.
	 *
	 * Deliberately BELOW .impervora-scrim (99999) and .impervora-motion-loader
	 * (100000): the mobile scrim and the page-transition overlay are both meant
	 * to cover the header.
	 *
	 * Degrades safely without :has() -- the sidebar overlap is fixed by the
	 * z-index reset in impervora-catalog-filters.css, which needs no :has() at
	 * all. This rule only buys the extra elevation over the floating layer.
	 *
	 * The #masthead prefix is REQUIRED, not decorative. The sticky-header layer
	 * in impervora-lux.css sets `#masthead { z-index: 998 }` -- an ID selector
	 * at (1,0,0). A `.site-header:has(...)` rule computes to (0,3,0) and loses
	 * to it outright, so the first version of this rule was silently dead and
	 * the header stayed at 998, below .impervora-fab (9990) and
	 * .astra-cart-drawer (10000). Matching the ID takes this to (1,2,0).
	 * impervora-lux.css is the deliberate sticky-header layer and is left alone.
	 */
	#masthead:has(.impervora-nav-parent:hover),
	#masthead:has(.impervora-nav-parent:focus-within),
	#masthead:has(.impervora-mega.is-open) {
		z-index: 10050;
	}

	/**
	 * Belt and braces for the covered filter controls. Correct stacking already
	 * sends clicks to the panel; this guarantees nothing underneath can take a
	 * pointer event even if a future rule re-raises something.
	 *
	 * Scoped to the desktop tier so the mobile filter drawer is never affected.
	 */
	body:has(.impervora-nav-parent:hover) .impervora-filters,
	body:has(.impervora-nav-parent:focus-within) .impervora-filters,
	body:has(.impervora-mega.is-open) .impervora-filters,
	body:has(.impervora-nav-parent:hover) .impervora-shopbar,
	body:has(.impervora-mega.is-open) .impervora-shopbar {
		pointer-events: none;
	}

	/* Surface sits on the full-bleed panel; the inner grid only constrains the
	   content column. Painting the background on __inner instead would leave a
	   strip of page showing either side of a 1180px column on a wide screen. */
	.impervora-mega {
		background: var(--imp-white, #fff);
		border-top: 1px solid var(--imp-warm-grey, #d8d5d0);
		border-radius: 0;
		box-shadow: var(--imp-shadow-lift, 0 18px 44px rgba(14, 14, 14, 0.16));
	}

	.impervora-mega__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
		max-width: 1180px;
		margin: 0 auto;
		padding: 34px 24px 38px;
	}

	.impervora-mega:has(.impervora-mega__feature) .impervora-mega__inner {
		grid-template-columns: minmax(0, 1fr) 260px;
	}

	.impervora-mega__cols {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
		gap: 0 36px;
		align-items: start;
	}

	.impervora-mega__heading {
		margin: 0 0 14px;
		padding: 0 0 12px;
		border-bottom: 1px solid var(--imp-warm-grey, #d8d5d0);
		font-size: 0.66rem;
		letter-spacing: 0.2em;
	}

	.impervora-mega__link {
		display: block;
		min-height: 0;
		padding: 7px 0;
		font-size: 0.85rem;
		letter-spacing: 0.02em;
		text-transform: none;
		transition: color 0.25s var(--imp-ease, ease);
	}

	.impervora-mega__link:hover,
	.impervora-mega__link:focus-visible {
		color: var(--imp-gold-deep, #b08f4e);
	}

	.impervora-mega__link:focus-visible {
		outline: 2px solid var(--imp-gold, #c6a667);
		outline-offset: 2px;
	}

	.impervora-mega__feature {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		padding: 0 0 0 36px;
		border-left: 1px solid var(--imp-warm-grey, #d8d5d0);
	}

	.impervora-mega__eyebrow {
		margin: 0;
	}

	.impervora-mega__media {
		display: block;
		overflow: hidden;
		width: 100%;
		aspect-ratio: 4 / 3;
		background: var(--imp-warm-white, #f4f2ef);
		border-radius: var(--imp-radius, 6px);
	}

	.impervora-mega__img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 0.6s var(--imp-ease, ease);
	}

	.impervora-mega__feature:hover .impervora-mega__img {
		transform: scale(1.05);
	}
}

@media (prefers-reduced-motion: reduce) {

	.impervora-mega,
	.impervora-mega__img,
	.impervora-nav__chevron {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Mobile menu touch targets (accessibility, 2026-08-11)

   Measured before this rule:
     desktop header  .main-header-menu > li > a.menu-link  = 80px  (fine)
     mobile  header  same selector                         = 35.6px (too small)

   The mobile anchors were display:block with no vertical padding, so their
   height came purely from line-height. min-height plus centering lifts the hit
   area to 44px without touching font-size, colour, labels, order, URLs or the
   menu's open/close behaviour -- the text stays exactly the size it was and
   simply sits centred in a taller row.

   Scoped to .ast-mobile-header-wrap deliberately: the desktop header renders
   its own copy of .main-header-menu, and those links are already 80px. A
   container scope leaves them untouched at every viewport width, so no media
   query is needed and the desktop header dimensions cannot shift.

   Top-level anchors only (> li >). The mega-menu panel uses its own
   .impervora-mega__link component and the disclosure chevrons are already
   48px, so neither is in scope here.
   -------------------------------------------------------------------------- */

.ast-mobile-header-wrap .main-header-menu > li > a.menu-link {
  display: flex;
  align-items: center;
  min-height: 44px;
}