/**
 * eup-header-v2 — the site header (v2) stylesheet.
 *
 * Handle:  eup-header-v2 (style)
 * Loads:   site-wide, from eupepsia_header_v2_enqueue_assets() in inc/enqueue-header-v2.php,
 *          only while the option eupepsia_header_v2 is `yes`.
 * Depends: eup-base, which in turn depends on flatsome-main.
 *
 * Plain CSS with a .css extension, matching the rest of the repository: there is no build step.
 *
 * SCOPE
 * -----
 * Everything is scoped under .eup-hd, which is the <header> element itself, plus a short block at
 * the end under body.eup-has-header-v2 for the two things that genuinely have to reach outside the
 * header: the scroll lock while the drawer is open, and switching off the parent theme's sticky-
 * header offset, which measures a header that is no longer on the page.
 *
 * TOKENS
 * ------
 * The --eup-* tokens are the homepage's (assets/css/home.css), reused, never redefined. D-027:
 * --eup-brand (#00CCB8) is for fills, rules, marks and focus rings only — it measures about 1.9:1
 * on white and must never be type on a light ground; --eup-brand-text (#0E7A70, about 5.2:1) is
 * the type colour. Typography is Poppins (D-028), already self-hosted by the theme from
 * /wp-content/fonts/poppins/. No font is loaded here and no CDN is used.
 *
 * The tokens are declared on .eup-hd because the header is a sibling of .eup-home, not a
 * descendant of it, so it cannot inherit them. The values are copied from home.css verbatim; when
 * a build step lands, both blocks become one import.
 *
 * HEIGHT, AND WHY IT IS FIXED
 * ---------------------------
 * The brief: at most 80px below the topbar on desktop, and no layout shift on load. So:
 *
 *   --eup-hd-bar:    72px   the bar, desktop from 1360px (one row). Fixed, not content-driven.
 *                    96px   the bar, 1024-1359px: a 56px row (--eup-hd-row) over a 40px nav
 *                           row (--eup-hd-navrow). See "DESKTOP LAYOUT" below (F-208).
 *                    60px   the control row, phone.
 *   --eup-hd-logo:   64px   the logo box in the one-row 72px bar (1360px and up), 56px in the
 *                           stacked bar (1024-1359) and on phone. Fixed height, width: auto, so
 *                           an SVG of any aspect ratio occupies a known box before it has loaded.
 *                           Was 40 / 34px until 2026-09-24 (critique C-005): the lockup carries
 *                           the wordmark, and at 40px its strokes fell under a pixel.
 *
 * Every row height is declared, the mega panels are position: absolute so opening one cannot move
 * the page, and the drawer and the scrim are rendered in the HTML with the `hidden` attribute
 * rather than created by JavaScript. Nothing in this header is measured at runtime.
 *
 * PHONE FIRST
 * -----------
 * The base rules are the phone layout. The only media query that adds anything is
 * `min-width: 1024px`, which turns the drawer back into a menu bar and the accordions into mega
 * panels (stacked, two grid rows). `min-width: 1360px` folds the bar into one 72px row; 480px,
 * 1280px and 1440px only tune the gutter and the panel columns.
 */

/* -------------------------------------------------------------------------
 * Tokens and the shell
 * ---------------------------------------------------------------------- */

.eup-hd {
	/* Fallback only; system-v2.css sets the same value when eupepsia_system_v2 is on. Deep green,
	   not the logo teal, since 2026-09-24 (D-085): the focus ring, the search border and the open-
	   item rule all read this token, and teal belongs to the logo artwork alone (D-069). */
	--eup-brand: #123f3a;
	--eup-brand-text: #0e7a70;
	--eup-deep: #123f3a;
	--eup-ink: #17211e;
	--eup-muted: #565f5b;
	--eup-line: #dcd3c0;
	--eup-line-soft: #e8e2d4;
	--eup-surface: #ffffff;
	--eup-surface-alt: #f7f5ef;
	--eup-panel: #ece7db;
	--eup-wrap: 1400px;
	--eup-gutter: 20px;

	--eup-hd-bar: 60px;
	--eup-hd-logo: 56px;

	background: var(--eup-surface);
	border-bottom: 1px solid var(--eup-line-soft);
	color: var(--eup-ink);
	font-family: Poppins, Helvetica, Arial, sans-serif;
	font-weight: 300;
	position: relative;
	z-index: 90;
}

.eup-hd *,
.eup-hd *::before,
.eup-hd *::after {
	box-sizing: border-box;
}

/*
 * Reset, and why every line of it is here rather than left to the cascade.
 *
 * It is deliberately three elements long, not a blanket. The parent theme's base stylesheet puts
 * a bottom margin on every form control on the site — measured on staging with the flag on: 14px
 * under each nav <button> and 15.5px under the search submit — and those two alone pushed the bar
 * to 86px, six over the 80px the brief allows. They did it invisibly, as whitespace under
 * controls that are vertically centred, so the bar simply looked a little tall with nothing in
 * this file to explain why.
 *
 * Headings, paragraphs and lists are **not** in the reset even though the parent styles those
 * too: their parent rules are bare element selectors, so the single-class rules further down this
 * file already beat them, and a blanket reset at (0,1,1) would instead beat those rules and flatten
 * every margin in the panels.
 *
 * `min-height: 0` is applied only where something smaller is wanted: the parent sets 38.8px on
 * every button, which silently wins over a smaller height set here.
 *
 * The two-class selector on the search field is for the same reason in reverse. The parent's rule
 * is `input[type="search"]` (0,1,1), which outranks `.eup-hd__search-field` (0,1,0); `.eup-hd`
 * plus the class is (0,2,0) and wins.
 *
 * The rule this encodes: the measured height of this header is the height this stylesheet
 * declares, and nothing about it is inherited from the theme whose header it replaces.
 */
.eup-hd button,
.eup-hd input,
.eup-hd select {
	margin-bottom: 0;
	/*
	 * Added 2026-09-23 (F-208). The parent also gives every button `margin-right: 1em`: 13.5px
	 * after each of the four panel buttons, 15.5px after the burger and the search submit, 26px
	 * after the drawer close. It is outside the button's box, so the nav measured 54px wider
	 * than its buttons and the phone accordion buttons ran 13.5px past the drawer's edge.
	 * margin-left is left alone: the burger sets its own.
	 */
	margin-right: 0;
}

/*
 * The parent theme upper-cases every <button> on the site. That silently rewrote the six D-022
 * labels — "Shop by Need" rendered as "SHOP BY NEED" — and the four of them that open a panel are
 * buttons, so four of six shouted and two did not. The decision records the labels in sentence
 * case; they are printed as recorded. Where this header does want small caps (the drawer title,
 * the panel subheadings, the A-Z letters) it asks for them on the element itself.
 */
.eup-hd button {
	text-transform: none;
}

/*
 * Note on specificity: the reset above is (0,1,1), which outranks a single class. Every rule
 * below that has to beat it — the two that set a min-height or a bottom margin of their own —
 * therefore carries the `.eup-hd` prefix and lands at (0,2,0). Written out rather than wrapped in
 * `:where()` so that a browser without `:where()` support still gets the whole stylesheet instead
 * of silently dropping the reset.
 */
.eup-hd .eup-hd__search-submit,
.eup-hd .eup-hd__burger,
.eup-hd .eup-hd__drawer-close {
	min-height: 0;
}

.eup-hd .eup-hd__search-field {
	border: 0;
	box-shadow: none;
}

/* One visible focus treatment for every control in the header. --eup-brand as a ring, never as
   type: D-027. 3px at a 2px offset clears 3:1 against both grounds used here. */
.eup-hd a:focus-visible,
.eup-hd button:focus-visible,
.eup-hd input:focus-visible {
	outline: 3px solid var(--eup-brand);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Topbar
 * ---------------------------------------------------------------------- */

.eup-hd__topbar {
	background: var(--eup-deep);
	color: #ffffff;
}

.eup-hd__topbar-inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 24px;
	justify-content: center;
	margin: 0 auto;
	max-width: var(--eup-wrap);
	min-height: 30px;
	padding: 5px var(--eup-gutter);
	width: 100%;
}

.eup-hd__topbar-line {
	/* 13px, the system's "Small" role (critique C-015, 2026-09-24; was 11px). 13 x 1.5 = 19.5px
	   of line inside 5px padding keeps the topbar at its declared 30px. */
	font-size: 13px;
	letter-spacing: 0.02em;
	line-height: 1.5;
	margin: 0;
	text-align: center;
}

/* 2026-09-23: a parent rule colours every <p> #4d4d4f, which beat the topbar's inherited white and
   left both lines at about 1.6:1 on --eup-deep. Two classes so it wins; white is about 11:1. */
.eup-hd .eup-hd__topbar-line {
	color: #ffffff;
}

.eup-hd__topbar-line--shipping {
	font-weight: 400;
}

/*
 * Below 768px the origin line is not printed. It is the longer of the two and it wraps to three
 * lines at 390px, which took the topbar to 64px and the whole header to 169px — on the viewport
 * where header height costs the most. The shipping threshold stays, because it is the
 * transactional fact and the one a shopper acts on; the origin sentence is brand context and it
 * is already on the homepage trust bar and in the footer.
 *
 * `display: none` and not a clip, deliberately: this is not a label for a control, it is prose,
 * and reading it aloud in place of a shorter header helps nobody. The shipping line never hides
 * at any width — a promise that appears only on desktop would be worse than no promise.
 *
 * 2026-09-23 (F-208 smoke): the threshold moved from 768px to 1024px. At 768 the two lines need
 * about 757px side by side and the topbar had 705px, so it wrapped to two lines (47px) and the
 * header grew to 152px on a portrait tablet. From 1024 the lines sit left and right on one row.
 */
.eup-hd__topbar-line--origin {
	display: none;
}

@media (min-width: 1024px) {
	.eup-hd__topbar-line--origin {
		display: block;
	}
}

/* -------------------------------------------------------------------------
 * The bar
 * ---------------------------------------------------------------------- */

.eup-hd__bar {
	/* The positioning context for the mega panels: they are absolute against the full-width bar,
	   not against the <li> they are nested in, so a panel spans the viewport. */
	position: relative;
}

.eup-hd__bar-inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	/* No row gap on phone since 2026-09-24 (C-005): the 56px logo makes the control row 56px
	   instead of 44, and 56 + 46 (search) + 6 (search margin) keeps the bar at its measured
	   108px (HEADER-PORT.md section 15). */
	gap: 0 8px;
	margin: 0 auto;
	max-width: var(--eup-wrap);
	min-height: var(--eup-hd-bar);
	padding: 0 var(--eup-gutter);
	width: 100%;
}

/* -------------------------------------------------------------------------
 * Burger
 * ---------------------------------------------------------------------- */

.eup-hd__burger {
	align-items: center;
	background: none;
	border: 0;
	border-radius: 4px;
	color: var(--eup-ink);
	cursor: pointer;
	display: flex;
	flex: 0 0 auto;
	height: 44px;
	justify-content: center;
	margin-left: -10px;
	padding: 0;
	width: 44px;
}

.eup-hd__burger-bars,
.eup-hd__burger-bars::before,
.eup-hd__burger-bars::after {
	background: currentColor;
	border-radius: 2px;
	display: block;
	height: 2px;
	width: 20px;
}

.eup-hd__burger-bars {
	position: relative;
}

.eup-hd__burger-bars::before,
.eup-hd__burger-bars::after {
	content: "";
	left: 0;
	position: absolute;
}

.eup-hd__burger-bars::before {
	top: -6px;
}

.eup-hd__burger-bars::after {
	top: 6px;
}

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

.eup-hd__logo {
	align-items: center;
	color: var(--eup-deep);
	display: flex;
	flex: 1 1 auto;
	justify-content: center;
	/* A 44px target on phone (section 8). The artwork is 56px tall (C-005), so the box is larger. */
	min-height: 44px;
	min-width: 0;
	text-decoration: none;
}

/* Fixed height, auto width. The attributes on the <img> give the intrinsic ratio, so the browser
   reserves the right box before the file arrives and the bar never jumps. The parent theme ships
   the same SVG with width="1" height="1", which is exactly the shift this avoids. */
.eup-hd__logo-img {
	display: block;
	height: var(--eup-hd-logo);
	max-width: 190px;
	object-fit: contain;
	width: auto;
}

.eup-hd__logo-text {
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1.2;
	text-align: center;
}

/* -------------------------------------------------------------------------
 * Actions: account and cart
 * ---------------------------------------------------------------------- */

.eup-hd__actions {
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	gap: 2px;
	margin-right: -8px;
}

.eup-hd__action {
	align-items: center;
	border-radius: 4px;
	color: var(--eup-ink);
	display: flex;
	flex-direction: column;
	gap: 2px;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
	padding: 4px 6px;
	text-decoration: none;
}

.eup-hd__action:hover .eup-hd__action-label,
.eup-hd__action:hover {
	color: var(--eup-brand-text);
}

.eup-hd__icon {
	display: block;
	flex: 0 0 auto;
}

/* The label is clipped rather than removed at phone width, so the accessible name survives.
   display: none would take it out of the accessibility tree and leave the account link
   unlabelled. */
.eup-hd__action-label {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.eup-hd__cart-icon {
	display: block;
	position: relative;
}

.eup-hd__cart-count {
	align-items: center;
	background: var(--eup-deep);
	border-radius: 9px;
	color: #ffffff;
	display: flex;
	font-size: 10px;
	font-weight: 500;
	height: 17px;
	justify-content: center;
	line-height: 1;
	min-width: 17px;
	padding: 0 4px;
	position: absolute;
	right: -8px;
	top: -6px;
}

.eup-hd__cart-count.is-filled {
	background: var(--eup-brand-text);
}

/*
 * An empty cart shows no badge. The element still exists in the DOM and keeps its class, because
 * that class is the WooCommerce fragment key: `wc-cart-fragments` replaces the element matching
 * `.eup-hd__cart-count`, and a badge that had been removed from the page could never come back
 * when the first item is added. Hidden, not deleted.
 */
.eup-hd__cart-count:not(.is-filled) {
	display: none;
}

/* -------------------------------------------------------------------------
 * Search
 * ---------------------------------------------------------------------- */

/* Its own full-width row on phone: order 5 puts it after the bar's other children, and
   flex-basis 100% forces the wrap. One DOM node, two layouts — the field is never behind a menu,
   which is spec §1.3's acceptance criterion and the live site's worst mobile defect. */
.eup-hd__search {
	align-items: center;
	background: var(--eup-surface-alt);
	border: 1px solid var(--eup-line);
	border-radius: 999px;
	display: flex;
	flex: 1 1 100%;
	margin-bottom: 6px;
	order: 5;
	overflow: hidden;
	/* No right padding on phone: the submit is a full 44x44 target flush with the pill's end. */
	padding: 0 0 0 14px;
}

.eup-hd__search:focus-within {
	border-color: var(--eup-brand);
}

.eup-hd__search-field {
	background: none;
	border: 0;
	box-shadow: none;
	color: var(--eup-ink);
	flex: 1 1 auto;
	font-family: inherit;
	font-size: 14px;
	font-weight: 300;
	height: 44px;
	margin: 0;
	min-width: 0;
	padding: 0;
	text-overflow: ellipsis;
}

.eup-hd__search-field::placeholder {
	color: var(--eup-muted);
	opacity: 1;
}

.eup-hd__search-field:focus {
	outline: none;
}

/* The field is the focus target; the ring is drawn on the pill so it surrounds both. */
.eup-hd__search:focus-within {
	outline: 3px solid var(--eup-brand);
	outline-offset: 2px;
}

.eup-hd__search-submit {
	align-items: center;
	background: none;
	border: 0;
	border-radius: 999px;
	color: var(--eup-deep);
	cursor: pointer;
	display: flex;
	flex: 0 0 auto;
	height: 44px;
	justify-content: center;
	padding: 0;
	width: 44px;
}

.eup-hd__search-submit:hover {
	color: var(--eup-brand-text);
}

/* -------------------------------------------------------------------------
 * Nav — phone: an off-canvas drawer
 * ---------------------------------------------------------------------- */

.eup-hd__nav {
	background: var(--eup-surface);
	bottom: 0;
	display: flex;
	flex-direction: column;
	left: 0;
	max-width: 92vw;
	overflow-y: auto;
	position: fixed;
	top: 0;
	transform: translateX(-100%);
	transition: transform 0.22s ease;
	visibility: hidden;
	width: 340px;
	z-index: 120;
}

.eup-hd__nav.is-open {
	transform: translateX(0);
	visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
	.eup-hd__nav {
		transition: none;
	}
}

.eup-hd__scrim {
	background: rgba(18, 63, 58, 0.45);
	inset: 0;
	position: fixed;
	z-index: 110;
}

.eup-hd__scrim[hidden] {
	display: none;
}

.eup-hd__drawer-head {
	align-items: center;
	border-bottom: 1px solid var(--eup-line-soft);
	display: flex;
	justify-content: space-between;
	min-height: var(--eup-hd-bar);
	padding: 0 8px 0 var(--eup-gutter);
}

.eup-hd__drawer-title {
	color: var(--eup-deep);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.eup-hd__drawer-close {
	background: none;
	border: 0;
	border-radius: 4px;
	color: var(--eup-ink);
	cursor: pointer;
	font-size: 26px;
	height: 44px;
	line-height: 1;
	width: 44px;
}

.eup-hd__menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.eup-hd__item {
	border-bottom: 1px solid var(--eup-line-soft);
	list-style: none;
	margin: 0;
}

.eup-hd__top {
	align-items: center;
	background: none;
	border: 0;
	color: var(--eup-ink);
	cursor: pointer;
	display: flex;
	font-family: inherit;
	font-size: 15px;
	font-weight: 400;
	justify-content: space-between;
	letter-spacing: 0.005em;
	line-height: 1.3;
	min-height: 52px;
	padding: 12px var(--eup-gutter);
	text-align: left;
	text-decoration: none;
	width: 100%;
}

.eup-hd__top:hover,
.eup-hd__top[aria-expanded="true"] {
	color: var(--eup-brand-text);
}

.eup-hd__chevron {
	border-bottom: 2px solid currentColor;
	border-right: 2px solid currentColor;
	flex: 0 0 auto;
	height: 8px;
	margin-left: 12px;
	transform: rotate(45deg);
	transition: transform 0.15s ease;
	width: 8px;
}

.eup-hd__top[aria-expanded="true"] .eup-hd__chevron {
	transform: rotate(-135deg);
}

@media (prefers-reduced-motion: reduce) {
	.eup-hd__chevron {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * Panels — phone: accordion sections inside the drawer
 * ---------------------------------------------------------------------- */

.eup-hd__panel[hidden] {
	display: none;
}

.eup-hd__panel {
	background: var(--eup-surface-alt);
}

.eup-hd__panel-inner {
	padding: 4px var(--eup-gutter) 20px;
}

/* The panel already has a visible label — the button that opened it — so its own <h2> is exposed
   to assistive technology and hidden from sight on phone, where repeating it wastes a screenful.
   It becomes visible at desktop width, where the button label is in a different place. */
.eup-hd__panel-title {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.eup-hd__panel-intro {
	color: var(--eup-muted);
	font-size: 13px;
	line-height: 1.5;
	margin: 0 0 12px;
}

.eup-hd__panel-block + .eup-hd__panel-block {
	margin-top: 18px;
}

/* Panel headings: 14px 500 in deep green, sentence case (Panel compaction, 2026-09-24, tech lead;
   they were 12px upper-case with 0.08em tracking). A department heading is itself a link, so the
   link inside takes the heading's weight and colour. */
.eup-hd__panel-subtitle,
.eup-hd__column-title {
	color: var(--eup-deep);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.3;
	margin: 0 0 4px;
	text-transform: none;
}

.eup-hd__column-title .eup-hd__link {
	color: var(--eup-deep);
	font-weight: 500;
}

.eup-hd__grid,
.eup-hd__column-list,
.eup-hd__range-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.eup-hd__grid-item,
.eup-hd__column-list li,
.eup-hd__range-list li {
	list-style: none;
	margin: 0;
}

/* Phone: every panel row is at least 44px (Panel compaction, 2026-09-24: they measured 38 to 42px
   before). Desktop sets its own row heights in the 1024px block. */
.eup-hd__link {
	align-items: center;
	color: var(--eup-ink);
	display: flex;
	flex-wrap: wrap;
	font-size: 14px;
	gap: 2px 8px;
	line-height: 1.35;
	min-height: 44px;
	padding: 11px 0;
	text-decoration: none;
}

.eup-hd__link:hover .eup-hd__link-label {
	color: var(--eup-brand-text);
	text-decoration: underline;
}

.eup-hd__link--compact {
	font-size: 14px;
	min-height: 44px;
}

.eup-hd__link--lead {
	font-weight: 500;
}

/* Since 2026-09-24 no panel prints a product count; the class survives for the By Eupepsia
   panel's "Coming soon" status on an empty shelf. --eup-muted is 4.9:1 on --eup-surface-alt and
   6.3:1 on white: small type, so it has to clear AA on both grounds the panel uses. */
.eup-hd__count {
	color: var(--eup-muted);
	font-size: 11.5px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/*
 * Shop by Brand: letter ranges (2026-09-24, tech lead) with a "Find a brand" field (2026-09-24,
 * canvas row 8, recommended variant). The "Most stocked" chips and the single-letter groups are
 * gone. Six ranges, each a heading ("A to B") over one A to Z list with no letter headings.
 *
 * Phone (this block): the field, then one list of 44 px rows under the six range headings. The
 * headings stick to the top of the drawer while their range scrolls past (the drawer, .eup-hd__nav,
 * is the scroll container, so `top: 0` is its top edge); they are the only orientation in a
 * 78-name list and replace the second accordion level the canvas rejected.
 * Desktop (1024 and up, below): six columns, one per range, the field above them.
 */
.eup-hd__find {
	margin: 8px 0 16px;
}

.eup-hd__find-label {
	color: var(--eup-ink);
	display: block;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	margin: 0 0 6px;
}

.eup-hd__find-box {
	position: relative;
}

.eup-hd__find-icon {
	color: var(--eup-muted);
	left: 12px;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

/*
 * (0,2,0) to beat the parent theme's `input[type="search"]` (0,1,1) and the header reset above.
 * 16px type on the phone: iOS Safari zooms the page into any field set smaller. The border is
 * --eup-muted rather than the hairline because a field's edge is a control boundary and needs
 * 3:1 against the panel (WCAG 1.4.11); the hairline is 1.3:1 on --eup-surface-alt.
 */
.eup-hd .eup-hd__find-field {
	-webkit-appearance: none;
	appearance: none;
	background: var(--eup-surface);
	border: 1px solid var(--eup-muted);
	border-radius: 3px;
	box-shadow: none;
	color: var(--eup-ink);
	display: block;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	height: 44px;
	line-height: 1.2;
	margin: 0;
	min-height: 44px;
	padding: 0 12px 0 36px;
	width: 100%;
}

.eup-hd .eup-hd__find-field::placeholder {
	color: var(--eup-muted);
	opacity: 1;
}

/* Deep green, not the header's shared ring colour: the D-069 rule keeps teal out of focus rings,
   and this field is new. 3px at a 2px offset, as everywhere else in the header. */
.eup-hd .eup-hd__find-field:focus,
.eup-hd .eup-hd__find-field:focus-visible {
	border-color: var(--eup-deep);
	outline: 3px solid var(--eup-deep);
	outline-offset: 2px;
}

/* The announcement for screen readers ("3 brands match"); the visible state is the list itself. */
.eup-hd__find-status {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.eup-hd__find-empty {
	padding: 4px 0 8px;
}

.eup-hd__find-empty-title {
	color: var(--eup-ink);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	margin: 0 0 4px;
}

.eup-hd__find-empty-help {
	color: var(--eup-muted);
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
}

.eup-hd__find-empty-link {
	color: var(--eup-brand-text);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* The filter only flips `hidden`; these make sure no display rule here ever outranks it. */
.eup-hd__find-empty[hidden],
.eup-hd__range[hidden],
.eup-hd__range-list li[hidden] {
	display: none;
}

.eup-hd__ranges {
	display: grid;
	gap: 8px;
	grid-template-columns: minmax(0, 1fr);
}

.eup-hd__range-title {
	background: var(--eup-surface-alt);
	border-bottom: 1px solid var(--eup-line);
	color: var(--eup-ink);
	font-family: var(--eup-font-display, "Newsreader", Georgia, "Times New Roman", serif);
	font-size: 18px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.3;
	margin: 0;
	padding: 10px 0 6px;
	position: sticky;
	top: 0;
	z-index: 1;
}

.eup-hd__range-list .eup-hd__link {
	min-height: 44px;
}

.eup-hd__column + .eup-hd__column {
	margin-top: 18px;
}

.eup-hd__panel-foot {
	border-top: 1px solid var(--eup-line);
	margin: 16px 0 0;
	padding-top: 12px;
}

.eup-hd__panel-all {
	align-items: center;
	color: var(--eup-brand-text);
	display: inline-flex;
	font-size: 14px;
	font-weight: 400;
	min-height: 44px;
	padding: 0;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * 480px and up — the bar has room for the search field beside the logo
 * ---------------------------------------------------------------------- */

@media (min-width: 480px) {
	.eup-hd {
		--eup-gutter: 24px;
	}
}

/* -------------------------------------------------------------------------
 * 1024px and up — menu bar, mega panels
 * ---------------------------------------------------------------------- */

/*
 * DESKTOP LAYOUT, AND WHY IT HAS TWO SHAPES (F-208, 2026-09-23)
 * -------------------------------------------------------------
 * The first version laid the bar out as one nowrap flex row with the nav allowed to shrink
 * (`flex: 0 1 auto; min-width: 0`) and the search on a fixed basis. A nowrap menu cannot actually
 * get narrower than its labels, so the nav box shrank while its content did not, and the search
 * pill was painted over "Best Sellers", "The Eupepsia Standard" and the account icon. Measured on
 * staging: the six items need 959px at 14px type, and at 1440 the bar had about 760px for them.
 * The overlap was visible at every width from 1024 to 1440, not only at zoomed laptops.
 *
 * The fix is a grid with declared track heights, in two shapes:
 *
 *   1024-1359  stacked:  row 1 (56px)  logo | search | account, cart
 *                        row 2 (40px)  the six items
 *              bar 96px, header 127px.
 *   1360+      one row:  logo | six items | search | account, cart     bar 72px, header 103px.
 *              The account and cart labels are clipped (not removed) to icons, which is what
 *              buys the room: the nav needs 831px at 13.5px, the icons 92px, and the search keeps
 *              at least 200px.
 *
 * Grid rather than flex because a grid track sized `auto` never goes below its content's
 * min-content width, so the nav can never be squeezed under the search again: if the space ran
 * out, the bar would overflow rather than overlap, and the breakpoint below is chosen so that it
 * does not run out. A viewport media query rather than a container query: `container-type` on the
 * header or the bar would make it the containing block for the fixed-position phone drawer, and
 * the thresholds below already carry 17px of slack for a classic Windows scrollbar.
 */
@media (min-width: 1024px) {

	.eup-hd {
		--eup-gutter: 32px;
		--eup-hd-row: 56px;
		--eup-hd-navrow: 40px;
		--eup-hd-bar: 96px;
		--eup-hd-logo: 56px;
	}

	.eup-hd__topbar-inner {
		justify-content: space-between;
	}

	.eup-hd__topbar-line {
		text-align: left;
	}

	.eup-hd__bar-inner {
		align-items: center;
		column-gap: 24px;
		display: grid;
		grid-template-areas:
			"logo search actions"
			"nav  nav    nav";
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-rows: var(--eup-hd-row) var(--eup-hd-navrow);
		height: var(--eup-hd-bar);
		min-height: var(--eup-hd-bar);
		/*
		 * Focus order in the stacked shape (critique C-025, 2026-09-24). The DOM order is logo,
		 * nav, search, actions, which is the visual order of the one-row shape; here the eye
		 * reads logo, search, account, cart, then the six items. `reading-flow: grid-rows` makes
		 * Tab follow the grid's rows instead of the DOM in browsers that support it (Chromium
		 * 137+). Moving the search and actions before the nav in the DOM was measured and
		 * rejected: it would fix this shape and break the one-row shape at 1360+, where the nav
		 * sits before the search. Browsers without the property keep the DOM order, which is
		 * recorded as a deviation in HEADER-PORT.md section 17.
		 */
		reading-flow: grid-rows;
		row-gap: 0;
	}

	.eup-hd__burger,
	.eup-hd__drawer-head,
	.eup-hd__scrim {
		display: none;
	}

	.eup-hd__logo {
		grid-area: logo;
		justify-content: flex-start;
	}

	/* Back to a static menu bar: no transform, no fixed position, nothing to animate. */
	.eup-hd__nav {
		align-self: stretch;
		background: none;
		bottom: auto;
		display: block;
		grid-area: nav;
		left: auto;
		max-width: none;
		overflow: visible;
		position: static;
		top: auto;
		transform: none;
		visibility: visible;
		width: auto;
	}

	.eup-hd__menu {
		display: flex;
		flex-wrap: nowrap;
		height: 100%;
		/* The first label's text lines up with the logo's left edge, not its padding. */
		margin-left: -10px;
	}

	.eup-hd__item {
		border: 0;
	}

	.eup-hd__top {
		/* 13.5px Poppins 400 and 10px padding: the six labels measure 831px, which fits the
		   stacked nav row at 1024 (943px available) with room for a 14-character label. */
		font-size: 13.5px;
		height: 100%;
		min-height: var(--eup-hd-navrow);
		padding: 0 10px;
		/*
		 * The containing block for the underline below — and ONLY for the underline. The <li> is
		 * deliberately left unpositioned: the mega panel is the <li>'s other child and is
		 * `position: absolute`, so positioning the <li> would make it the panel's containing block
		 * and the panel would be sized against a ~100px menu item instead of the full-width bar.
		 * That was measured on staging before this comment existed: the brand panel's A-Z columns
		 * came out 17px wide and the panel 1860px tall. The only positioned ancestor a panel may
		 * have is .eup-hd__bar.
		 */
		position: relative;
		white-space: nowrap;
		width: auto;
	}

	/* A 2px rule under the open item, drawn inside the bar so it cannot change the bar's height. */
	.eup-hd__top[aria-expanded="true"]::after {
		background: var(--eup-brand);
		bottom: 0;
		content: "";
		height: 2px;
		left: 10px;
		position: absolute;
		right: 10px;
	}

	.eup-hd__chevron {
		height: 6px;
		margin-left: 7px;
		transform: rotate(45deg) translate(-2px, -2px);
		width: 6px;
	}

	.eup-hd__top[aria-expanded="true"] .eup-hd__chevron {
		transform: rotate(-135deg);
	}

	/* Centred in its own column in the stacked shape; never narrower than the column allows and
	   never wider than a comfortable query field. */
	.eup-hd__search {
		grid-area: search;
		justify-self: center;
		margin: 0;
		max-width: 600px;
		order: 0;
		width: 100%;
	}

	.eup-hd__search {
		padding-right: 4px;
	}

	.eup-hd__search-field,
	.eup-hd__search-submit {
		height: 38px;
	}

	.eup-hd__search-submit {
		width: 40px;
	}

	.eup-hd__actions {
		gap: 6px;
		grid-area: actions;
	}

	.eup-hd__action {
		flex-direction: row;
		gap: 8px;
		padding: 4px 8px;
	}

	/* The labels come back as visible text next to the icons. */
	.eup-hd__action-label {
		clip: auto;
		clip-path: none;
		font-size: 13px;
		height: auto;
		max-width: 11ch;
		overflow: hidden;
		position: static;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: auto;
	}

	/* --- the mega panel ------------------------------------------------- */

	/* Absolute against .eup-hd__bar, so the panel is the width of the viewport and opening one
	   moves nothing. It is painted over the page, never inserted into its flow. */
	.eup-hd__panel {
		background: var(--eup-surface);
		border-top: 1px solid var(--eup-line-soft);
		box-shadow: 0 18px 34px rgba(18, 63, 58, 0.12);
		left: 0;
		max-height: calc(100vh - var(--eup-hd-bar) - 60px);
		overflow-y: auto;
		position: absolute;
		right: 0;
		top: 100%;
		z-index: 100;
	}

	/*
	 * Panel compaction (2026-09-24, tech lead): 24px above and below the content (was 26 and 30),
	 * 32px rows, 14px links, 14px 500 headings, 24px between columns, a 45px foot (was 55).
	 * Measured at 1440 x 900 before and after in HEADER-PORT.md, "Panel compaction". The sides stay
	 * on the header gutter so the panel's first column lines up with the logo above it.
	 */
	.eup-hd__panel-inner {
		margin: 0 auto;
		max-width: var(--eup-wrap);
		padding: 24px var(--eup-gutter);
	}

	.eup-hd__panel-title {
		clip: auto;
		clip-path: none;
		color: var(--eup-deep);
		font-size: 20px;
		font-weight: 400;
		height: auto;
		letter-spacing: -0.01em;
		line-height: 1.3;
		margin: 0 0 12px;
		overflow: visible;
		position: static;
		white-space: normal;
		width: auto;
	}

	.eup-hd__panel-intro {
		margin: 0 0 12px;
	}

	.eup-hd__grid--needs {
		display: grid;
		gap: 0 24px;
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/*
	 * Shop by Category. One grid track per department, all the same width; a department with more
	 * than six children (panel-category.php adds --split) spans two tracks and its one list flows
	 * into two columns, A to Z down the first and then the second (11 children: 6 + 5). The inner
	 * column gap equals the grid gap, so the two halves sit exactly on the grid's tracks. The three
	 * headings share the top row, and the tallest department (six rows) sets the panel height.
	 * `grid-auto-flow: column` with 1fr auto columns means the track count follows the live tree.
	 */
	.eup-hd__columns {
		display: grid;
		gap: 0 24px;
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
	}

	.eup-hd__column--split {
		grid-column: span 2;
	}

	.eup-hd__column-list--split {
		column-count: 2;
		column-gap: 24px;
	}

	.eup-hd__column-list--split li {
		break-inside: avoid;
	}

	.eup-hd__columns--farm {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: 720px;
	}

	.eup-hd__column + .eup-hd__column {
		margin-top: 0;
	}

	/* Department and shelf headings: a soft rule under the heading row, the list right below. */
	.eup-hd__column-title {
		border-bottom: 1px solid var(--eup-line-soft);
		margin: 0 0 4px;
	}

	/*
	 * Shop by Brand: the panel title and "Find a brand" share one 40px row (the label beside the
	 * field, not above it), then the six ranges. Styled from here only; panel-brand.php is
	 * unchanged. Without :has() support the field simply stacks under the title, as before.
	 */
	.eup-hd__panel-inner:has(> .eup-hd__find) {
		align-items: center;
		column-gap: 24px;
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.eup-hd__panel-inner:has(> .eup-hd__find) > * {
		grid-column: 1 / -1;
	}

	.eup-hd__panel-inner:has(> .eup-hd__find) > .eup-hd__panel-title {
		grid-column: 1;
		margin: 0;
	}

	.eup-hd__panel-inner:has(> .eup-hd__find) > .eup-hd__find {
		grid-column: 2;
		margin: 0;
	}

	.eup-hd__panel-inner:has(> .eup-hd__find) > .eup-hd__ranges,
	.eup-hd__panel-inner:has(> .eup-hd__find) > .eup-hd__find-empty {
		margin-top: 12px;
	}

	.eup-hd__find {
		align-items: center;
		display: flex;
		gap: 12px;
		margin: 12px 0 16px;
	}

	.eup-hd__find-label {
		font-size: 14px;
		margin: 0;
		white-space: nowrap;
	}

	.eup-hd__find-box {
		width: 320px;
	}

	.eup-hd .eup-hd__find-field {
		font-size: 14px;
		height: 40px;
		min-height: 40px;
	}

	/* Six ranges, six columns, one list each, as drawn. While filtering, an emptied range is
	   `hidden` and the survivors close up from the left. */
	.eup-hd__ranges {
		gap: 0 24px;
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	/* The range headings take the panel heading style (14px 500) at desktop; the phone drawer
	   keeps its sticky Newsreader headings, which are the only orientation in a 78-name list. */
	.eup-hd__range-title {
		background: none;
		border-bottom-color: var(--eup-line-soft);
		color: var(--eup-deep);
		font-family: inherit;
		font-size: 14px;
		font-weight: 500;
		line-height: 1.3;
		margin: 0 0 4px;
		padding: 0 0 6px;
		position: static;
	}

	/* Rows: 32px (14px type on an 18px line, 7px above and below). */
	.eup-hd__link,
	.eup-hd__link--compact {
		line-height: 18px;
		min-height: 32px;
		padding: 7px 0;
	}

	/*
	 * The brand lists are the one exception: 24px rows. Its longest range holds 16 names, and 16
	 * rows of 32px are 512px on their own, so a 32px row cannot meet the 560px target for this
	 * panel. 24px is the WCAG 2.2 minimum target size (2.5.8, AA) and each row is the full column
	 * width. See HEADER-PORT.md, "Panel compaction", for the numbers and the open question.
	 */
	.eup-hd__range-list .eup-hd__link {
		min-height: 24px;
		padding: 3px 0;
	}

	.eup-hd__panel-foot {
		margin-top: 12px;
		padding-top: 0;
	}

	.eup-hd__panel-all {
		min-height: 32px;
	}
}

/*
 * 1360px and up — one 72px row.
 *
 * Budget at the threshold, with a 17px scrollbar (1343px of layout): gutters 64, logo 84 (64px
 * tall since 2026-09-24, C-005; was 52), three 16px gaps 48, nav 831, icons 92 = 1119, leaving the
 * search 224px. The 200px floor on the
 * search column is a guard, not a target: if a longer label ever pushes past it, the bar
 * overflows at the right edge instead of painting the field over the menu, and the smoke in
 * HEADER-PORT.md section 15 catches it.
 */
@media (min-width: 1360px) {
	.eup-hd {
		--eup-hd-bar: 72px;
		/* 64px in the 72px bar: 4px of air above and below (C-005). 84px wide from the 582x445
		   artwork, 32px more than the 40px logo the budget above was written for. */
		--eup-hd-logo: 64px;
	}

	.eup-hd__bar-inner {
		column-gap: 16px;
		grid-template-areas: "logo nav search actions";
		grid-template-columns: auto auto minmax(200px, 1fr) auto;
		grid-template-rows: var(--eup-hd-bar);
		/* One row: the DOM order is the visual order, so Tab follows the DOM again. */
		reading-flow: normal;
	}

	.eup-hd__menu {
		margin-left: 0;
	}

	.eup-hd__top {
		min-height: var(--eup-hd-bar);
	}

	.eup-hd__search {
		justify-self: end;
		max-width: 380px;
	}

	/* Icons only on the single row. Clipped, never display: none — the account and cart links
	   keep their accessible names (HEADER-PORT.md section 8). */
	.eup-hd__action-label {
		clip: rect(1px, 1px, 1px, 1px);
		clip-path: inset(50%);
		height: 1px;
		max-width: none;
		padding: 0;
		position: absolute;
		width: 1px;
	}

	.eup-hd__action {
		padding: 4px 6px;
	}
}

@media (min-width: 1440px) {
	.eup-hd {
		--eup-gutter: 44px;
	}
}

@media (min-width: 1280px) {
	.eup-hd__grid--needs {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* -------------------------------------------------------------------------
 * Outside the header
 * ---------------------------------------------------------------------- */

/* Scroll lock while the drawer is open. Added and removed by assets/js/header-v2.js on <html>,
   not on <body>, so it works in iOS Safari. */
.eup-hd-locked,
.eup-hd-locked body {
	overflow: hidden;
}

/* The parent theme reserves space for its own sticky header and paints a shadow under it. With
   the v2 header on, #header is this element and neither applies — left in place, the offset
   leaves a strip of empty page under the bar on load, which is a layout shift by another name. */
body.eup-has-header-v2 .header-wrapper,
body.eup-has-header-v2 .header-shadow,
body.eup-has-header-v2 #masthead {
	display: none;
}

body.eup-has-header-v2 #main {
	padding-top: 0;
}