/**
 * Global site header — v3 redesign, full rewrite (not a v2 iteration).
 *
 * Smart reveal-on-scroll (assets/js/header-scroll.js): sticky at the top of
 * the viewport, slides up out of the way on scroll-down past a small
 * threshold, and slides straight back in on scroll-up — never a plain
 * permanently-sticky header. `position: sticky` (not `fixed` + a manual
 * height spacer) is what gives requirement 1's "no extra top offset at
 * the very top of the page" and the "no CLS on normal -> fixed" rule for
 * free: a sticky element keeps its own normal-flow slot, so there's never
 * a moment where the document reflows to compensate for it leaving flow.
 * `.is-hidden` only translates it off-screen visually; it never leaves
 * flow, never changes height, and the JS never touches layout-affecting
 * properties (transform + opacity only) — so CLS is 0 throughout the
 * transition, not just at rest.
 *
 * `--ed-header-visible-height` / `--ed-header-stack-offset` (published on
 * `:root` by header-scroll.js on every hide/show) let anything that stacks
 * under the header — `.ed-guide-nav` and its `scroll-margin-top` siblings
 * — position itself relative to the header's real height instead of a
 * guessed constant. `.ed-guide-nav` consumes `--ed-header-stack-offset`
 * directly as its sticky `top` (so it slides in lockstep with the header
 * and never needs a per-scroll-tick JS measurement); the guide/legal/
 * content pages consume it in `scroll-margin-top`. See the top comment in
 * header-scroll.js and guide-page.css / content-page.css /
 * guia-de-tejidos.css / legal-page.css / como-medir.css.
 *
 * `position: sticky` lives on `.ed-header-shell`, NOT `.ed-site-header`
 * itself — see the PHP-injected wrapper class in inc/header.php for why:
 * the outer wrapper WordPress's core/template-part block renders around
 * this part hugs the header's own height with no extra room, and a sticky
 * element can't stay stuck past the point its own containing block has
 * scrolled out of view. `.ed-site-header` only ever gets `transform` (the
 * hide/reveal) and its own visual styling.
 *
 * `.ed-site-header`'s base rule deliberately carries NO `transform` (not
 * even `translateY(0)`) and NO `will-change` — only `.is-hidden` adds a
 * `transform`. Any non-`none` `transform` (translateY(0) included) or a
 * `will-change: transform` makes the element a containing block for
 * `position: fixed` descendants, which `.ed-mobile-drawer` and (at
 * <1024px) `.ed-header-samples__panel`/`__overlay` both are — they'd
 * anchor to this header's own small box instead of the viewport, landing
 * mostly off-screen. Scoping the `transform` to `.is-hidden` only works
 * because `refreshMenuPin()` in header-scroll.js guarantees `.is-hidden`
 * is never applied while either is open. `will-change` is gone entirely
 * (see `.ed-site-header.is-hidden` below for why).
 *
 * Desktop (>=1024px) — three stacked regions:
 *   1. Promo bar (dark)
 *   2. Main utility header (white): wordmark, utility nav, CTA
 *   3. Product navigation (dark): 4 launch categories, each with a
 *      hover/focus/click mega-menu
 *
 * Mobile (<1024px) — two stacked regions:
 *   1. Promo bar (dark, single line)
 *   2. Main row (white): wordmark + hamburger
 *   -> hamburger opens a full-height drawer (assets/js/header-nav.js):
 *      a main category list, each item replacing the whole drawer content
 *      with its own category screen (never an inline accordion).
 *
 * The 1024px cutover (not the design system's usual 768px tablet
 * checkpoint) is deliberate: Level 3 carries four full category labels
 * plus chevrons and Level 2 carries a wordmark + 4 utility items + a CTA
 * pill, both measurably tighter than the previous 2-level header. Verified
 * live in the browser at 1024/900/768px — see project-docs/05-components.md.
 */

.ed-header-shell {
	position: sticky;
	top: 0;
	/*
	 * Below the mobile drawer (100) and the "Mis muestras" panel/overlay
	 * (95/96) — both must be able to cover the header — but above ordinary
	 * page content and the mega-menu's own z-index:40 (the mega-menu is a
	 * child of this header, so it only needs to win against page content,
	 * not against the header itself).
	 */
	z-index: 90;
}

/*
 * Same technique as .ed-mobile-drawer below and .ed-guide-nav in
 * guide-page.css: #wpadminbar is fixed at z-index:99999 above this
 * header's z-index:90, so a logged-in visitor would otherwise see the
 * header stick underneath it instead of right below it.
 */
body.admin-bar .ed-header-shell {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .ed-header-shell {
		top: 46px;
	}
}

/*
 * Hit-testing fix (confirmed production bug): `.ed-header-shell` keeps
 * `position: sticky; top: 0` at all times — only `.ed-site-header` inside
 * it gets `transform: translateY(-100%)` on hide. A `transform` moves an
 * element visually without taking it out of flow, so the shell's own box
 * never shrinks; it keeps occupying its full pre-hide height at the very
 * top of the viewport. At z-index:90 that invisible box still wins a
 * hit-test over anything stacking under the header at a lower z-index —
 * concretely `.ed-guide-nav` (z-index:20, sticky top:
 * var(--ed-header-stack-offset)) in guide-page.css, which slides up to
 * top:0 the moment the header hides. Result: every click/tap on the
 * sticky in-page nav landed on the empty header shell instead, confirmed
 * with elementFromPoint()/elementsFromPoint() at the nav's own on-screen
 * position.
 *
 * `is-header-hidden` is toggled on this shell by header-scroll.js in
 * lockstep with `.ed-site-header.is-hidden` (same `hidden` boolean), so
 * the shell only opts out of hit-testing for exactly the window where its
 * content is actually off-screen. `pointer-events: none` only affects
 * pointer/touch hit-testing, not focus — keyboard Tab into the header's
 * own links still works exactly as before (header-scroll.js's `focusin`
 * pin reveals the header before a focused control can be activated), and
 * `pinnedByMenu` in header-scroll.js already guarantees `.is-hidden` (and
 * therefore this class) is never applied while the mega-menu, "Mis
 * muestras" panel, or mobile drawer is open — those keep the shell fully
 * interactive throughout.
 */
.ed-header-shell.is-header-hidden {
	pointer-events: none;
}

.ed-site-header {
	background-color: var(--ed-color-background);
	/* Transform-only transitions never trigger layout, only compositing. */
	transition: transform var(--ed-transition-base);
}

.ed-site-header.is-hidden {
	transform: translateY(-100%);
	/*
	 * No `will-change: transform` here on purpose. Adding/removing it on
	 * every hide/show toggle promotes and demotes a compositing layer each
	 * time; on Android, toggling that mid-scroll (against the dynamic
	 * toolbar animation) re-rasterises the header at a transient page
	 * scale, which reads as the header rapidly zooming/rescaling while you
	 * scroll. The transform transition below is already GPU-composited
	 * without it, and header-scroll.js now only toggles this class once per
	 * deliberate gesture, so there is nothing to hint in advance.
	 */
}

@media (prefers-reduced-motion: reduce) {
	.ed-site-header {
		transition: none;
	}
}

/* -------------------------------------------------------------------- */
/* Level 1 — promo bar                                                   */
/* -------------------------------------------------------------------- */

.ed-topbar {
	background-color: var(--ed-color-graphite);
}

.ed-topbar__inner {
	padding-block: var(--ed-space-2xs);
}

.ed-topbar__message {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	column-gap: var(--ed-space-2xs);
	margin: 0;
	color: var(--ed-color-graphite-muted);
	font-size: var(--ed-font-size-xs);
	font-weight: 500;
	line-height: 1.4;
}

.ed-icon-delivery {
	flex: none;
	width: 16px;
	height: 13px;
	color: var(--ed-color-graphite-muted);
}

.ed-topbar__divider {
	opacity: 0.5;
}

.ed-topbar__link {
	color: #ffffff;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color var(--ed-transition-fast);
}

.ed-topbar__link:hover {
	color: var(--ed-color-primary);
}

.ed-topbar__link:focus-visible {
	outline: var(--ed-focus-outline);
	outline-offset: var(--ed-focus-outline-offset);
}

/* Mobile keeps a single confident line — see 05-components.md research notes. */
@media (max-width: 1023px) {
	.ed-topbar__divider,
	.ed-topbar__link {
		display: none;
	}
}

/* -------------------------------------------------------------------- */
/* Level 2 — main utility header                                         */
/* -------------------------------------------------------------------- */

.ed-header-main {
	border-bottom: 1px solid var(--ed-color-border);
}

@media (min-width: 1024px) {
	.ed-header-main {
		/* Level 3's dark background provides the visual boundary instead. */
		border-bottom: 0;
	}
}

.ed-header-main__inner {
	display: flex;
	align-items: center;
	gap: var(--ed-space-lg);
	padding-block: 0.625rem;
}

@media (min-width: 1024px) {
	.ed-header-main__inner {
		padding-block: 0.875rem;
	}
}

/*
 * H4 (site-wide audit) — below ~414px the mobile header row
 * (wordmark | "Mis muestras" | hamburger) was inheriting the desktop-scale
 * `gap: var(--ed-space-lg)` (32px) between every item, so the row overflowed
 * the viewport and forced a horizontal page scroll on every page
 * (~12px over at 390px, ~42px at 360px). Root fix: size the row gap to its
 * real mobile budget, and ease the wordmark on the smallest phones where
 * the gap alone still isn't enough. No control is dropped, touch targets
 * stay 44px, and the >=1024px header is untouched.
 */
@media (max-width: 1023px) {
	.ed-header-main__inner {
		gap: var(--ed-space-sm);
	}
}

/*
 * Phase 2 (account icon) — the row is now wordmark + FOUR 44px-tall controls
 * (account / samples / cart / menu). Every item is flex:none, so nothing can
 * shrink: when their sum exceeded the container's content box the row simply
 * overflowed it (at 360px the menu button ended 1.6px from the edge instead of
 * 16px; at 412px the fluid wordmark + 16px gaps made the row ~63px too wide,
 * which on a real phone pushed the hamburger off-screen / widened the layout
 * viewport). The fix budgets the row per width: tighter gap, 40px-wide controls,
 * a wordmark that steps down, and — only at <=374px — a 12px gutter. The free
 * space is absorbed by .ed-header-account's margin-inline-start:auto
 * (header-samples.css), so the menu button always sits on the gutter.
 */
@media (max-width: 480px) {
	.ed-header-main__inner {
		gap: var(--ed-space-3xs);
	}
}

@media (max-width: 400px) {
	.ed-header-main__inner {
		gap: 0.125rem;
	}
}

@media (max-width: 374px) {
	.ed-header-main .ed-header-main__inner {
		padding-inline: var(--ed-space-xs);
	}
}

/* -------------------------------------------------------------------- */
/* Logo / wordmark                                                       */
/* -------------------------------------------------------------------- */

.ed-logo {
	display: inline-flex;
	align-items: baseline;
	flex: none;
	text-decoration: none;
	line-height: 1;
	white-space: nowrap;
}

.ed-logo:hover {
	text-decoration: none;
}

/*
 * Header-only modifier: the header wordmark gained a graphic mark
 * (.ed-logo__mark) placed before the text, so this instance needs
 * center-aligned flex children (image + text block) and a gap between
 * them — unlike the Footer's plain-text .ed-logo--footer, which has no
 * image and must keep the base rule's baseline alignment untouched.
 */
.ed-logo--header {
	align-items: center;
	gap: 10px;
}

/*
 * Specificity note (root cause of the oversized logo on WooCommerce pages —
 * Cart, Checkout, My Account, shop): WooCommerce's woocommerce-layout.css
 * ships `.woocommerce img, .woocommerce-page img { height: auto;
 * max-width: 100% }` (0,1,1). A bare `.ed-logo__mark` (0,1,0) lost to it,
 * so the mark fell back to its intrinsic 240x236 and blew the header up.
 * Keeping the selector two classes deep (0,2,0) makes the header sizing win
 * on every page without touching WooCommerce or adding a per-page override.
 */
/*
 * Graphic mark (the roller-blind illustration) — sized well above a
 * generic small nav icon on purpose, per project-docs/05-components.md:
 * it needs to read as "a roller blind" at a glance, not just as brand
 * decoration. height + width: auto (not two fixed dimensions) is what
 * actually guarantees no stretch/squash — object-fit: contain is kept as
 * a defensive second guard. The source file's own intrinsic 240x236
 * (via the width/height attributes in header.html) is what lets the
 * browser reserve the right box before CSS/the image loads, so this
 * never causes layout shift.
 */
.ed-logo--header .ed-logo__mark {
	display: block;
	flex: none;
	height: 44px;
	width: auto;
	object-fit: contain;
}

@media (min-width: 768px) {
	.ed-logo--header .ed-logo__mark {
		height: 47px;
	}
}

@media (min-width: 1024px) {
	.ed-logo--header .ed-logo__mark {
		height: 52px;
	}
}

.ed-logo__text {
	display: inline-flex;
	align-items: baseline;
}

.ed-logo__main {
	color: var(--ed-color-heading);
	font-size: clamp(1.1875rem, 1.1rem + 0.3vw, 1.3125rem);
	/*
	 * 600, not 700: only 400/500/600 Montserrat weights are self-hosted
	 * (see theme.json). A 700 request here would trigger synthetic/faux
	 * bold instead of loading a real weight.
	 */
	font-weight: 600;
	letter-spacing: -0.01em;
}

.ed-logo__suffix {
	margin-inline-start: 1px;
	color: var(--ed-color-primary);
	font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
	font-weight: 600;
}

/*
 * Phone wordmark, stepped down in three stages so it always fits next to the
 * four header controls (see the row-budget note above): <=480px a fixed 16px
 * lockup (instead of the fluid vw-based size, which made it ~219px wide at
 * 412px), <=400px 15px + 41px mark, <=389px 14px + 38px mark. Placed after the
 * base .ed-logo__main / .ed-logo__suffix rules so it wins the cascade.
 */
@media (max-width: 480px) {
	.ed-logo--header {
		gap: 6px;
	}

	.ed-logo__main {
		font-size: 1rem;
	}

	.ed-logo__suffix {
		font-size: 0.9375rem;
	}
}

@media (max-width: 400px) {
	.ed-logo__main {
		font-size: 0.9375rem;
	}

	.ed-logo__suffix {
		font-size: 0.875rem;
	}

	.ed-logo--header .ed-logo__mark {
		height: 41px;
	}
}

@media (max-width: 389px) {
	.ed-logo--header {
		gap: 5px;
	}

	.ed-logo--header .ed-logo__mark {
		height: 38px;
	}

	.ed-logo__main {
		font-size: 0.875rem;
	}

	.ed-logo__suffix {
		font-size: 0.8125rem;
	}
}

/* -------------------------------------------------------------------- */
/* Utility nav (Cómo medir / Cómo instalar / Fabricado en España / WhatsApp) */
/* Desktop only (>=1024px) — mobile reaches the same destinations via the  */
/* hamburger drawer instead.                                              */
/* -------------------------------------------------------------------- */

.ed-utility-nav {
	display: none;
}

@media (min-width: 1024px) {
	.ed-utility-nav {
		display: flex;
		align-items: center;
		/*
		 * --ed-space-md, not --ed-space-lg: at exactly 1024px (this
		 * component's own desktop cutover) the combined width of the
		 * wordmark, all four utility items, and the CTA pill is tight
		 * enough that the larger gap let "WhatsApp" visually overlap the
		 * CTA — a real bug found during Home page QA at the 1024px
		 * checkpoint, not a redesign. Verified live: no overlap from
		 * 1024px up with this tighter gap.
		 */
		gap: var(--ed-space-md);
		margin-inline-start: var(--ed-space-lg);
		flex: 1 1 auto;
		min-width: 0;
	}
}

.ed-utility-nav a {
	display: inline-flex;
	align-items: center;
	gap: var(--ed-space-3xs);
	min-height: 44px;
	color: var(--ed-color-text);
	font-size: var(--ed-font-size-sm);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--ed-transition-fast);
}

.ed-utility-nav a:hover {
	/*
	 * --ed-color-link, not raw --ed-color-primary: #00B7B7 measures ~2.49:1
	 * on white, failing WCAG 2.2 AA's 4.5:1 text-contrast minimum.
	 * --ed-color-link (~5.17:1) is the AA-safe variant used sitewide.
	 */
	color: var(--ed-color-link);
}

.ed-utility-nav a:focus-visible {
	outline: var(--ed-focus-outline);
	outline-offset: var(--ed-focus-outline-offset);
}

/*
 * WhatsApp glyph — brands/whatsapp.svg via estoresdirecto_icon(), used in the
 * desktop utility nav and the drawer root. Sizes and spacing deliberately
 * match the previous hand-made glyph (16px + the link's 3xs gap on desktop,
 * 20px + 2xs in the drawer) so the labels don't move. Brand green: the icon is
 * decorative (aria-hidden) and always sits next to the label.
 */
.ed-icon--whatsapp {
	width: 16px;
	height: 16px;
	color: var(--ed-color-whatsapp);
}

.ed-mobile-drawer__secondary .ed-icon--whatsapp {
	width: 20px;
	height: 20px;
	margin-inline-end: var(--ed-space-2xs);
}

/*
 * Utility-nav width budget (>=1024px). The row is wordmark + nav + "Muestras gratis"
 * CTA + account / samples / cart (~556px of fixed widths) inside the 1200px container
 * (944px at 1024px). With "Cómo instalar" added there is no room left for the old
 * "Fabricado en España" item (that claim lives in the promo bar, hero and CTAs), so it
 * was removed. Between 1024px and 1279px the gaps tighten; below 1100px the WhatsApp
 * link keeps its icon and its text stays available to screen readers only.
 */
@media (min-width: 1024px) and (max-width: 1279px) {
	.ed-header-main__inner {
		gap: 1.25rem;
	}

	.ed-utility-nav {
		margin-inline-start: 0;
		gap: var(--ed-space-sm);
	}
}

@media (min-width: 1024px) and (max-width: 1099px) {
	.ed-utility-nav a[href^="https://wa.me"] {
		justify-content: center;
		min-width: 44px;
	}

	.ed-utility-nav__label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
}

/* -------------------------------------------------------------------- */
/* CTA — Muestras gratis (desktop, Level 2)                              */
/* -------------------------------------------------------------------- */

.ed-nav-cta {
	display: none;
}

@media (min-width: 1024px) {
	.ed-nav-cta {
		display: inline-flex;
		align-items: center;
		flex: none;
		margin-inline-start: auto;
		min-height: 44px;
		padding: var(--ed-space-xs) 1.375rem;
		background-color: var(--ed-color-primary);
		/*
		 * Dark text, not white: white-on-#00B7B7 measures ~2.48:1, failing
		 * WCAG 2.2 AA's 4.5:1 text-contrast minimum. --ed-color-heading on
		 * the same background measures ~7.3:1.
		 */
		color: var(--ed-color-heading);
		border-radius: var(--ed-radius-full);
		box-shadow: var(--ed-shadow-sm);
		font-size: var(--ed-font-size-sm);
		font-weight: 600;
		letter-spacing: var(--ed-letter-spacing-button);
		text-decoration: none;
		white-space: nowrap;
		transition: background-color var(--ed-transition-fast), transform var(--ed-transition-fast), box-shadow var(--ed-transition-fast);
	}

	.ed-nav-cta:hover {
		background-color: var(--ed-color-primary-hover);
		color: var(--ed-color-heading);
		transform: translateY(-1px);
		box-shadow: var(--ed-shadow-md);
	}

	.ed-nav-cta:focus-visible {
		outline: var(--ed-focus-outline);
		outline-offset: var(--ed-focus-outline-offset);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ed-nav-cta:hover {
		transform: none;
	}
}

/* -------------------------------------------------------------------- */
/* Hamburger toggle — mobile only (<1024px)                              */
/* -------------------------------------------------------------------- */

.ed-menu-toggle {
	display: none;
}

@media (max-width: 1023px) {
	.ed-menu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: 44px;
		height: 44px;
		color: var(--ed-color-heading);
		background: none;
		border: 0;
		cursor: pointer;
	}

	.ed-menu-toggle svg {
		/* Lucide menu */
		width: var(--ed-icon-lg);
		height: var(--ed-icon-lg);
	}
}

/* Phones: 40px-wide (44px-tall) menu button, 38px at <=374px — see the row-budget note above. */
@media (max-width: 480px) {
	.ed-menu-toggle {
		width: 40px;
	}
}

@media (max-width: 374px) {
	.ed-menu-toggle {
		width: 38px;
	}
}

.ed-menu-toggle:focus-visible {
	outline: var(--ed-focus-outline);
	outline-offset: var(--ed-focus-outline-offset);
}

/* -------------------------------------------------------------------- */
/* Level 3 — dark product navigation with mega-menus (desktop, >=1024px) */
/* -------------------------------------------------------------------- */

.ed-product-nav {
	display: none;
}

@media (min-width: 1024px) {
	.ed-product-nav {
		display: block;
		position: relative;
		background-color: var(--ed-color-graphite);
		/* Positioning context for absolutely-positioned .ed-mega-menu panels. */
	}
}

.ed-product-nav__inner {
	padding-inline: 0;
}

.ed-product-nav__list {
	display: flex;
	justify-content: center;
	align-items: stretch;
	column-gap: var(--ed-space-2xl);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ed-product-nav__item {
	display: flex;
}

.ed-product-nav__trigger {
	display: inline-flex;
	align-items: center;
	gap: var(--ed-space-3xs);
	min-height: 44px;
	padding-block: var(--ed-space-sm);
	color: #ffffff;
	background: none;
	border: 0;
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-sm);
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
	cursor: pointer;
	transition: color var(--ed-transition-fast);
}

.ed-product-nav__trigger:hover,
.ed-product-nav__trigger[aria-expanded="true"] {
	/*
	 * Raw --ed-color-primary, not --ed-color-link: on --ed-color-graphite
	 * this measures ~7.2:1 (see 02-design-system.md's dark-surface contrast
	 * table) — well past AA, unlike on white where raw primary fails.
	 */
	color: var(--ed-color-primary);
}

.ed-product-nav__trigger:focus-visible {
	outline: var(--ed-focus-outline);
	outline-offset: var(--ed-focus-outline-offset);
	outline-offset: 2px;
}

.ed-product-nav__chevron {
	/*
	 * Lucide chevron-down at 16px (glyph ~8x4, as before); negative margins
	 * keep the old 10x7 footprint so nav item widths/gaps don't change.
	 */
	flex: none;
	width: 16px;
	height: 16px;
	margin: -4.5px -3px;
	transition: transform var(--ed-transition-fast);
}

.ed-product-nav__trigger[aria-expanded="true"] .ed-product-nav__chevron {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	.ed-product-nav__chevron {
		transition: none;
	}
}

/* -------------------------------------------------------------------- */
/* Mega-menu panels                                                       */
/* -------------------------------------------------------------------- */

.ed-mega-menu {
	position: absolute;
	inset-inline: 0;
	top: 100%;
	background-color: var(--ed-color-surface);
	border-bottom: 3px solid var(--ed-color-primary);
	box-shadow: var(--ed-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--ed-transition-base), transform var(--ed-transition-base), visibility 0s linear var(--ed-transition-base);
	z-index: 40;
}

.ed-mega-menu.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity var(--ed-transition-base), transform var(--ed-transition-base), visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
	.ed-mega-menu {
		transition: opacity var(--ed-transition-fast), visibility 0s linear var(--ed-transition-fast);
		transform: none;
	}

	.ed-mega-menu.is-open {
		transition: opacity var(--ed-transition-fast), visibility 0s;
	}
}

.ed-mega-menu__inner {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	column-gap: var(--ed-space-2xl);
	align-items: start;
	padding-block: var(--ed-space-lg);
}

/*
 * Column variant (.ed-mega-menu--columns) — image + group title + links,
 * a fixed 4-track row sized from the standard .ed-container (not --wide),
 * so columns line up with page content and never sprawl on ultrawide.
 * The --compact / --contained modifiers below only shrink the white panel
 * around those same columns.
 * Images keep their native 4:3 ratio (no crop — the motorized remote and
 * wireless waves sit in the bottom-right corner). Links are placeholder
 * <a> elements without href until the category pages exist, hence the
 * explicit cursor.
 */
.ed-mega-menu--columns {
	--ed-mega-col-gap: var(--ed-space-lg);
	/*
	 * One column of the 4-track row, as laid out in a full-width .ed-container.
	 * The percentage resolves where the variable is used (the panel's width /
	 * left), i.e. against .ed-product-nav — the panel's containing block.
	 */
	--ed-mega-col: calc((min(var(--ed-container-width), 100%) - 2 * var(--ed-container-gutter) - 3 * var(--ed-mega-col-gap)) / 4);
	--ed-mega-pad: var(--ed-space-lg);
}

.ed-mega-menu--columns .ed-mega-menu__inner {
	display: block;
	padding-block: var(--ed-space-lg) var(--ed-space-xl);
}

.ed-mega-menu__columns {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: var(--ed-mega-col-gap);
	align-items: start;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ed-mega-menu__col {
	min-width: 0;
}

/*
 * Compact 2-column panel (.ed-mega-menu--compact): shrinks to its two
 * columns instead of spanning the viewport, keeping the approved
 * --ed-mega-col width and gap. header-nav.js sets --ed-mega-anchor (the
 * trigger's centre in px); clamp() centres the panel under it but keeps
 * it a gutter inside the viewport. Without JS it simply centres.
 */
.ed-mega-menu--compact {
	--ed-mega-width: calc(2 * var(--ed-mega-col) + var(--ed-mega-col-gap) + 2 * var(--ed-mega-pad));
	inset-inline: auto;
	left: clamp(var(--ed-container-gutter), calc(var(--ed-mega-anchor, 50%) - var(--ed-mega-width) / 2), calc(100% - var(--ed-mega-width) - var(--ed-container-gutter)));
	width: var(--ed-mega-width);
}

/*
 * Contained 4-column panel (.ed-mega-menu--contained): the white panel
 * hugs its four columns plus --ed-mega-pad each side and is centred in
 * the nav, so the columns stay exactly where the full-width layout put
 * them (centred container). Pure CSS — not anchored to the trigger, which
 * would push a panel this wide off-screen at 1024px.
 */
.ed-mega-menu--contained {
	--ed-mega-width: calc(4 * var(--ed-mega-col) + 3 * var(--ed-mega-col-gap) + 2 * var(--ed-mega-pad));
	inset-inline: auto;
	left: calc((100% - var(--ed-mega-width)) / 2);
	width: var(--ed-mega-width);
}

.ed-mega-menu--compact .ed-mega-menu__inner,
.ed-mega-menu--contained .ed-mega-menu__inner {
	max-width: none;
	padding-inline: var(--ed-mega-pad);
}

.ed-mega-menu--compact .ed-mega-menu__columns {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ed-mega-menu__col-head,
.ed-mega-menu__sublinks a {
	color: var(--ed-color-heading);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
	cursor: pointer;
	transition: color var(--ed-transition-fast), text-decoration-color var(--ed-transition-fast);
}

.ed-mega-menu__col-head {
	display: block;
	text-decoration: none;
}

.ed-mega-menu__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	margin-bottom: var(--ed-space-sm);
	background-color: var(--ed-color-surface-alt);
	border-radius: var(--ed-radius-md);
}

.ed-mega-menu__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--ed-transition-slow);
}

.ed-mega-menu__col-title {
	display: block;
	/* Always reserve two lines so every column's links start on one line. */
	min-height: calc(2em * 1.35);
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-sm);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ed-mega-menu__col-title > span {
	display: block;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
	transition: text-decoration-color var(--ed-transition-fast);
}

/*
 * Sublinks: font-size and line-height sit on the list so each <li>'s own
 * line box matches its link exactly (no inherited body line-height padding
 * around the inline-block <a>). The tight 1.35 line-height keeps the two
 * lines of a wrapped link visibly closer together than the 0.625rem gap
 * between separate links.
 */
.ed-mega-menu__sublinks {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	margin: 0.625rem 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--ed-font-size-sm);
	line-height: 1.35;
}

.ed-mega-menu__sublinks a {
	display: inline-block;
	color: var(--ed-color-text);
}

@media (min-width: 1280px) {
	.ed-mega-menu__sublinks {
		font-size: 0.9375rem;
	}
}

/*
 * Hover: AA-safe turquoise text (--ed-color-link) + a thin raw-accent
 * underline indicator fading in; a very slight image zoom on the group
 * head (image + title are one link).
 */
.ed-mega-menu__col-head:hover,
.ed-mega-menu__sublinks a:hover {
	color: var(--ed-color-link);
}

.ed-mega-menu__col-head:hover .ed-mega-menu__col-title > span,
.ed-mega-menu__sublinks a:hover {
	text-decoration-color: var(--ed-color-primary);
}

.ed-mega-menu__col-head:hover .ed-mega-menu__media img {
	transform: scale(1.03);
}

.ed-mega-menu__col-head:focus-visible,
.ed-mega-menu__sublinks a:focus-visible {
	outline: var(--ed-focus-outline);
	outline-offset: var(--ed-focus-outline-offset);
}

@media (prefers-reduced-motion: reduce) {
	.ed-mega-menu__media img {
		transition: none;
	}

	.ed-mega-menu__col-head:hover .ed-mega-menu__media img {
		transform: none;
	}
}

/* -------------------------------------------------------------------- */
/* Mobile navigation drawer (<1024px)                                     */
/* -------------------------------------------------------------------- */

.ed-mobile-drawer[hidden] {
	display: none;
}

.ed-mobile-drawer {
	position: fixed;
	inset: 0;
	z-index: 100;
}

/*
 * WordPress's #wpadminbar is fixed with z-index:99999 (above this drawer's
 * z-index:100), so a logged-in editor previewing the mobile menu would
 * otherwise have the close button hidden underneath it. Mirrors core's own
 * admin-bar responsive heights (32px desktop, 46px at its own <=782px
 * breakpoint) rather than inventing a new value.
 */
body.admin-bar .ed-mobile-drawer {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .ed-mobile-drawer {
		top: 46px;
	}
}

.ed-mobile-drawer__panel {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	height: 100%;
	height: 100dvh;
	background-color: var(--ed-color-background);
}

.ed-mobile-drawer__bar {
	display: flex;
	justify-content: flex-end;
	flex: none;
	padding: var(--ed-space-sm) var(--ed-container-gutter);
	border-bottom: 1px solid var(--ed-color-border);
}

.ed-mobile-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--ed-color-heading);
	background: none;
	border: 0;
	cursor: pointer;
}

.ed-mobile-drawer__close svg {
	/* Lucide x */
	width: var(--ed-icon-lg);
	height: var(--ed-icon-lg);
}

.ed-mobile-drawer__close:focus-visible {
	outline: var(--ed-focus-outline);
	outline-offset: var(--ed-focus-outline-offset);
}

.ed-mobile-drawer__screens {
	position: relative;
	flex: 1 1 auto;
	overflow: hidden;
}

.ed-mobile-drawer__screen {
	position: absolute;
	inset: 0;
	overflow-y: auto;
	padding: var(--ed-space-lg) var(--ed-container-gutter) var(--ed-space-xl);
	opacity: 0;
	visibility: hidden;
	transform: translateX(100%);
	transition: transform var(--ed-transition-base), opacity var(--ed-transition-base), visibility 0s linear var(--ed-transition-base);
}

/* Main screen's resting (non-active) position is off to the LEFT, since it's
   "behind" every category screen — category screens rest off to the right. */
.ed-mobile-drawer__screen[data-screen="main"] {
	transform: translateX(-100%);
}

.ed-mobile-drawer__screen.is-active {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
	transition: transform var(--ed-transition-base), opacity var(--ed-transition-base), visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
	.ed-mobile-drawer__screen {
		transition: opacity var(--ed-transition-fast), visibility 0s linear var(--ed-transition-fast);
	}

	.ed-mobile-drawer__screen.is-active {
		transition: opacity var(--ed-transition-fast), visibility 0s;
	}
}

@media (min-width: 1024px) {
	.ed-mobile-drawer {
		display: none !important;
	}
}

/* Main screen contents */

.ed-mobile-drawer__categories {
	margin: 0 0 var(--ed-space-lg);
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--ed-color-border);
}

.ed-mobile-drawer__category {
	display: flex;
	align-items: center;
	gap: var(--ed-space-sm);
	width: 100%;
	min-height: 56px;
	padding-block: var(--ed-space-sm);
	color: var(--ed-color-heading);
	background: none;
	border: 0;
	border-bottom: 1px solid var(--ed-color-border);
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-md);
	font-weight: 600;
	text-align: start;
	cursor: pointer;
}

.ed-mobile-drawer__category:focus-visible {
	outline: var(--ed-focus-outline);
	outline-offset: -2px;
}

.ed-mobile-drawer__category-icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--ed-color-link);
}

.ed-mobile-drawer__category-icon svg {
	width: 22px;
	height: 22px;
}

.ed-mobile-drawer__category-label {
	flex: 1 1 auto;
}

.ed-mobile-drawer__category > svg:last-child {
	flex: none;
	/* Lucide chevron-right (glyph 5x10, as before) in the old 8px-wide footprint */
	width: var(--ed-icon-md);
	height: var(--ed-icon-md);
	margin-inline: -6px;
	color: var(--ed-color-muted);
}

.ed-mobile-drawer__secondary {
	display: flex;
	flex-direction: column;
	margin: 0 0 var(--ed-space-lg);
	padding: 0;
	list-style: none;
}

.ed-mobile-drawer__secondary a {
	display: flex;
	align-items: center;
	min-height: 44px;
	color: var(--ed-color-text);
	font-size: var(--ed-font-size-base);
	font-weight: 500;
	text-decoration: none;
}

.ed-mobile-drawer__secondary a:hover,
.ed-mobile-drawer__secondary a:focus-visible {
	color: var(--ed-color-link);
}

.ed-mobile-drawer__secondary a:focus-visible {
	outline: var(--ed-focus-outline);
	outline-offset: 2px;
}

.ed-mobile-drawer__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding-block: var(--ed-space-sm);
	background-color: var(--ed-color-primary);
	color: var(--ed-color-heading);
	border-radius: var(--ed-radius-full);
	font-weight: 600;
	letter-spacing: var(--ed-letter-spacing-button);
	text-align: center;
	text-decoration: none;
}

.ed-mobile-drawer__cta:hover {
	background-color: var(--ed-color-primary-hover);
}

.ed-mobile-drawer__cta:focus-visible {
	outline: var(--ed-focus-outline);
	outline-offset: 2px;
}

/*
 * Category screen contents — text-only drill-down navigation (no images):
 * a sticky head (icon back button + centred title), then accordion groups
 * separated by hairline dividers. A group title is a toggle button, never a
 * link. Links without href are the same placeholder links as the desktop
 * mega-menu.
 */

.ed-mobile-drawer__screen-head {
	position: sticky;
	/* Sticky offsets are measured from the screen's padding edge, so cancel
	   that padding to pin the head flush to the very top. */
	top: calc(-1 * var(--ed-space-lg));
	z-index: 1;
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) 44px;
	align-items: center;
	column-gap: var(--ed-space-2xs);
	/* Bleed over the screen's own padding so the head sits flush at the top. */
	margin: calc(-1 * var(--ed-space-lg)) calc(-1 * var(--ed-container-gutter)) 0;
	padding: var(--ed-space-xs) var(--ed-container-gutter);
	background-color: var(--ed-color-background);
	border-bottom: 1px solid var(--ed-color-border);
}

.ed-mobile-drawer__back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: var(--ed-color-link);
	background: none;
	border: 0;
	cursor: pointer;
}

.ed-mobile-drawer__back svg {
	flex: none;
	/* Lucide arrow-left */
	width: var(--ed-icon-lg);
	height: var(--ed-icon-lg);
}

.ed-mobile-drawer__back:focus-visible {
	outline: var(--ed-focus-outline);
	outline-offset: 2px;
}

.ed-mobile-drawer__screen-title {
	margin: 0;
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-md);
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	color: var(--ed-color-heading);
}

/* Accordion groups: one row per group, only one open at a time (header-nav.js). */
.ed-mobile-drawer__group {
	border-bottom: 1px solid var(--ed-color-border);
}

.ed-mobile-drawer__group-title {
	margin: 0;
}

.ed-mobile-drawer__group-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ed-space-sm);
	width: 100%;
	min-height: 56px;
	padding-block: var(--ed-space-xs);
	padding-inline: 0;
	color: var(--ed-color-heading);
	background: none;
	border: 0;
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-sm);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.06em;
	text-align: start;
	text-transform: uppercase;
	cursor: pointer;
}

.ed-mobile-drawer__group-toggle:focus-visible {
	outline: var(--ed-focus-outline);
	outline-offset: -2px;
}

.ed-mobile-drawer__group-label > span {
	display: block;
}

/* Lucide chevron-down (ui/chevron-down.svg via estoresdirecto_icon()). */
.ed-mobile-drawer__group-chevron {
	flex: none;
	width: var(--ed-icon-md);
	height: var(--ed-icon-md);
	color: var(--ed-color-muted);
	transition: transform var(--ed-transition-fast);
}

.ed-mobile-drawer__group-toggle[aria-expanded="true"] .ed-mobile-drawer__group-chevron {
	transform: rotate(180deg);
}

.ed-mobile-drawer__links {
	margin: 0;
	padding: 0 0 var(--ed-space-xs);
	list-style: none;
}

.ed-mobile-drawer__links:not([hidden]) {
	animation: ed-drawer-group-reveal var(--ed-transition-base);
}

@keyframes ed-drawer-group-reveal {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ed-mobile-drawer__group-chevron {
		transition: none;
	}

	.ed-mobile-drawer__links:not([hidden]) {
		animation: none;
	}
}

/* Each link is one ≥44px touch target, even when its text wraps. */
.ed-mobile-drawer__links a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding-block: var(--ed-space-3xs);
	color: var(--ed-color-text);
	font-size: var(--ed-font-size-base);
	line-height: 1.35;
	text-decoration: none;
	cursor: pointer;
}

.ed-mobile-drawer__links a:hover,
.ed-mobile-drawer__links a:focus-visible {
	color: var(--ed-color-link);
}

.ed-mobile-drawer__links a:focus-visible {
	outline: var(--ed-focus-outline);
	outline-offset: 2px;
}

/* Body scroll lock while the drawer is open — toggled by header-nav.js */
body.ed-drawer-open {
	overflow: hidden;
}