/**
 * Header v6 (round 3c, Lane RB2; PLAN-ROUND-3C-REBRAND-AUDIT.md D-460; HEADER-V6-PORT.md).
 *
 * Loaded after header v5 (116), brand v2 (117) and footer v5 (118), only while `eupepsia_header_v6` renders
 * (body class `eup-hd6`, always with `eup-hd5`). Every rule is scoped to `body.eup-hd6.eup-hd5`, the same weight as
 * brand v2's `body.eup-brand2.eup-hd5` (later sheet wins).
 *
 * Measured on the owner's PDF (Eupepsia Boutique_ NewHomepage.pdf, 1920 wide, PyMuPDF objects):
 *   logo     the stacked ink lockup, x 154-366, y 104-266 (162 px tall, ratio 1.307), outside the bar
 *   bar      x 398-1690, y 196-260: 64 px, white, 2 px line #DCBA8C, radius 10; its foot 6 px above the
 *            logo's foot (the lockup's baseline); 32 px right of the logo
 *   labels   SHOP (filled triangle) · BODY MAP · THE EUPEPSIA WAY: Poppins SemiBold 22.85 px, #231F20,
 *            tracking 0.12 em; SHOP starts 57 px into the bar
 *   search   "WHAT ARE YOU LOOKING FOR?" Poppins Light 15 px, #231F20, tracking 0.12 em; search, account and
 *            wishlist icons #231F20 (about 28 px tall); the bar's right padding 28 px
 *   bag      x 1703-1765: a 62 x 64 ink square, radius 10, 14 px right of the bar, a sand (#D5AD86) cart icon
 * The bar is opaque white over the hero too (no frost). Below 1280 the sizes are derived (assumption B): 1024-1279
 * keep brand v2's 106 px logo centred on a 48 px bar, the phone and tablet drawer keep header v5's structure.
 * Pinned (all widths): a white full-width bar, the mark alone (logo-mark-ink.svg) at the bar's height.
 */

/*
 * Round 3d (Lane H, owner and design team 28 Oct 2026; PLAN-ROUND-3D-FEEDBACK.md D-484 to D-488, D-484/D-485 as the
 * owner corrected them after slot 18) replaces the drawn geometry above with the pre-colour-change header's (header
 * v5 + brand v2), in the v7 colours:
 *   logo     at the top of the page the normal stacked logo (the logo attachment, served as brand-v7/logo-ink.svg) at
 *            brand v2's sizes: 106 px from 1024, 73 px below 768 (header v3's 52-70 px at 768-1023); once pinned the
 *            horizontal ink lockup (brand-v7/logo-horizontal-ink.svg, ratio 4.116) at brand v2's 48 px (44 px below
 *            1024, smaller at 360 where the bar and the bag need the room). The swap is brand v2's: display only, at
 *            once, no size animation (brand-v2.css, "The pinned bar appears at once").
 *   geometry brand v2's: the logo, the bar and the bag centred on one line; the header's reserve is the logo + 28 px
 *            from 1024, + 20 px below 768; no 5.4 vw drop over the hero.
 *   fill     white at 50 % (D-484, assumption D); the sand line stays.
 *   panel    D-402's row rhythm on the category and Eupepsia lists (D-487); 44 px rows in the phone drawer.
 */

/* -------------------------------------------------------------------------
 * Tokens (the v7 swatches: brand sheet ink and sand, the PDF's line sand and greys)
 * ---------------------------------------------------------------------- */

body.eup-hd6.eup-hd5 {
	--eup-hd6-ink: #231f20;
	--eup-hd6-sand: #d4ad86;
	--eup-hd6-line: #dcba8c;
	--eup-hd6-ground: #ffffff;
	--eup-hd6-veil: #f3f4f4;
	--eup-hd6-mist: #eceded;
	/* D-484: white at 50 %; slot 25b raises it to 55 %, the least that keeps the ink labels at 4.5:1 over any photo: 55 % white
	   over pure black is sRGB 0.55 (relative luminance 0.263), 4.86:1 with ink #231f20; at 50 % the worst case was 4.08:1 and
	   staging measured 4.12 at 1920 (slot 25 smoke). */
	--eup-hd6-fill: rgb(255 255 255 / 0.55);
	/* D-506 (owner, 29 Oct 2026): "increasing the logo size by 10% - 20% and reducing the menu size by 10% - 20%".
	   Default +15 % / -15 %. To change the pick, edit only these two factors (1.10/0.90, 1.15/0.85, 1.20/0.80). */
	--eup-hd6-logo-k: 1.15;
	--eup-hd6-menu-k: 0.85;
	--eup-hd6-logo: calc(106px * var(--eup-hd6-logo-k)); /* brand v2's full logo from 1024 (brand-v2.css:26), D-506 */
	--eup-hd6-logo-pinned: 48px; /* brand v2's pinned lockup from 1024 (brand-v2.css:57-61, 118-133) */
	--eup-hd6-bar: 48px;
	--eup-hd6-h: var(--eup3-header-h);
}

/* Below 1024 the pinned lockup is 44 px (brand v2's), and never wider than the room beside the bar (104 px), the bag
   (48 px), the gaps and the gutters: 100vw - 204 px, so 37.9 px tall at 360. */
@media (max-width: 1023.98px) {
	body.eup-hd6.eup-hd5 {
		--eup-hd6-logo-pinned: min(44px, calc((100vw - 204px) / var(--eup-hd6-logo-ratio, 4.116)));
	}
}

/* Phones: brand v2's 73 px stacked logo, 10 px above and below (reserve: logo + 20 px). 768-1023 keep header v3's
   logo and padding, as brand v2 did. */
@media (max-width: 767.98px) {
	body.eup-hd6.eup-hd5 {
		--eup-hd6-logo: calc(73px * var(--eup-hd6-logo-k)); /* D-506: the logo grows on phones too; the 48 px touch bar does not shrink */
		--eup3-header-h: calc(max(var(--eup-hd6-logo), var(--eup-hd6-bar)) + 20px);
	}

	body.eup-hd6.eup-hd5 .eup-hd.eup-hd3:not(.is-pinned) {
		--eup3-hd-logo: var(--eup-hd6-logo);
		--eup3-hd-pad: 10px;
	}
}

body.eup-hd6.eup-hd5 .eup-hd.eup-hd3 {
	--eup-hd5-ink: var(--eup-hd6-ink);
	--eup-hd5-teal: var(--eup-hd6-ground);
	--eup-hd5-fill: var(--eup-hd6-ground);
	--eup-hd5-frost: var(--eup-hd6-ground);
	--eup-hd5-gap: clamp(8px, 0.73vw, 14px);
	--eup-hd5-radius: 10px;
	color: var(--eup-hd6-ink);
}

/* -------------------------------------------------------------------------
 * 1024 and up: brand v2's geometry. The logo (106 px; the 48 px lockup pinned), the bar (48-64 px) and the bag on
 * one centre line, 14 px above and below the logo; the SHOP panel hangs 8-14 px under the bar, wherever the bar is.
 * ---------------------------------------------------------------------- */

@media (min-width: 1024px) {
	body.eup-hd6.eup-hd5 {
		/* D-506: the bar 15 % lower (40.8-54.4 px; 40 px at least) */
		--eup-hd6-bar: max(40px, calc(clamp(48px, 3.34vw, 64px) * var(--eup-hd6-menu-k)));
		--eup3-header-h: calc(max(var(--eup-hd6-logo), var(--eup-hd6-bar)) + 28px);
	}

	/* D-506: the menu's type and icons 15 % smaller, top and pinned alike (the bag follows the bar's height). */
	body.eup-hd6.eup-hd5 .eup-hd.eup-hd3 {
		--eup3-hd-menu: calc(var(--eup3-fs-nav, clamp(16px, 0.759vw + 8.23px, 22.8px)) * var(--eup-hd6-menu-k));
		--eup3-hd-icon: calc(clamp(20px, 1.3vw, 25px) * var(--eup-hd6-menu-k));
		--eup3-hd-icon-h: calc(clamp(18px, 1.146vw, 22px) * var(--eup-hd6-menu-k));
		--eup-hd6-drop: 0px;
	}

	/* D-506 alignment ("the 'Eupepsia' in the logo is aligned with the 'Shop' from the header"): the bar, the bag and
	   the panel drop below the logo's centre line until the wordmark's baseline and SHOP's baseline meet. The wordmark's
	   baseline is 78.05 % down the stacked logo (logo-ink.svg and Homepage_1.ai artboard 5: y 230.2 of 103.7-265.8);
	   SHOP's caps are centred in the bar, so its baseline is 0.35 em (half of Poppins' 0.70 cap height) below the bar's
	   centre. Drop = logo x (0.7805 - 0.5) - 0.35 x the menu's size. Not pinned only (pinned keeps brand v2's one line). */
	body.eup-hd6.eup-hd5 .eup-hd.eup-hd3:not(.is-pinned) {
		--eup3-hd-logo: var(--eup-hd6-logo);
		--eup3-hd-pill: var(--eup-hd6-bar);
		--eup3-hd-pad: 14px;
		--eup-hd6-drop: calc(var(--eup-hd6-logo) * 0.2805 - var(--eup3-hd-menu) * 0.35);
	}

	body.eup-hd6.eup-hd5 .eup-hd.eup-hd3 .eup-hd3__inner {
		align-items: center;
	}

	/* A top margin of twice the drop moves the centred bar down by the drop. Not a transform or relative position:
	   either would make the bar the containing block of the absolutely placed bag inside it. */
	body.eup-hd6.eup-hd5 .eup-hd.eup-hd3 .eup-hd3__pill {
		margin-top: calc(var(--eup-hd6-drop) * 2);
	}

	/* The bar is the bar's height, not its tallest child's: the 44 px search field, search button and icon buttons
	   (transparent) stay 44 px tall and centred, overhanging the 2 px line by 2 px at most where the bar is 40.8 px. */
	body.eup-hd6.eup-hd5 .eup-hd.eup-hd3:not(.is-pinned) .eup-hd3__pill {
		height: var(--eup3-hd-pill);
	}

	body.eup-hd6.eup-hd5 .eup-hd.eup-hd3 .eup-hd__action.eup-hd__action--cart {
		bottom: auto;
		top: calc(50% - var(--eup3-hd-pill) / 2 + var(--eup-hd6-drop));
	}

	body.eup-hd6.eup-hd5 .eup-hd.eup-hd3 .eup-hd__panel.eup-hd3__panel {
		top: calc(50% + var(--eup3-hd-pill) / 2 + var(--eup-hd5-gap) + var(--eup-hd6-drop));
	}

	/* D-506: the search line 15 % smaller with the menu (header-v3.css: clamp(11px, 0.78vw, 15px)), 11 px at least. */
	body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd3__search-field::placeholder,
	body.eup-hd6.eup-hd5.eup-hd-search2 .eup-hd3 .eup-hd3__search .eup-hd3__search-field::placeholder {
		font-size: max(11px, calc(clamp(11px, 0.78vw, 15px) * var(--eup-hd6-menu-k)));
	}
}

/* 1280 and up: the panel's left edge on the bar's: gutter + the stacked logo's width (ratio 1.307) + the logo-to-bar
   gap at the top; pinned, the lockup's width (ratio 4.116; the pinned rule below). */
@media (min-width: 1280px) {
	body.eup-hd6.eup-hd5 .eup-hd.eup-hd3 .eup-hd3__inner {
		gap: clamp(16px, 1.67vw, 32px);
	}

	/* Slot 25b (owner, 29 Oct 2026: "can the length of the bar start from the green line instead since there is a
	   lot of space"): at the top the bar starts later and keeps its right edge and the bag, so the empty run between THE
	   EUPEPSIA WAY and the search shrinks. The inset is 0 at 1280 (the run is 136 px there), 156 px at 1440 (the owner's
	   line at x 403: the run becomes 84 px), 220 px from 1920 (the bar's left edge 18 % of the way from the logo to the
	   bag; the owner's line is 16 % at 1440; the run 129 px). 1024-1279 keep today's bar (at 1024 the run is 8 px).
	   Pinned unchanged (the compact full-width strip with the lockup).
	   Slot 25d (owner, 29 Oct: "too much"; the new line at 22 % of the window): the bar's left edge at 22 % of the
	   viewport (capped at the 1920 layout, where the header stops growing): 282 px at 1280, 317 at 1440, 422 at 1920.
	   The inset is that edge minus the bar's own start (gutter + logo x 1.307 + the logo-to-bar gap), never below 0. */
	body.eup-hd6.eup-hd5 .eup-hd.eup-hd3:not(.is-pinned) {
		--eup-hd6-bar-inset: max(0px, min(100vw, 1920px) * 0.22 - var(--eup3-gutter, 16px) - var(--eup3-hd-logo) * 1.307 - clamp(16px, 1.67vw, 32px));
	}

	body.eup-hd6.eup-hd5 .eup-hd.eup-hd3:not(.is-pinned) .eup-hd3__pill {
		margin-left: var(--eup-hd6-bar-inset);
	}

	body.eup-hd6.eup-hd5 .eup-hd.eup-hd3:not(.is-pinned) .eup-hd__panel.eup-hd3__panel {
		left: calc(var(--eup3-gutter, 16px) + var(--eup3-hd-logo) * 1.307 + clamp(16px, 1.67vw, 32px) + var(--eup-hd6-bar-inset, 0px));
	}

	body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd3__pill {
		padding: 0 clamp(12px, 1.48vw, 28px) 0 clamp(18px, 2.97vw, 57px);
	}

	body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd3__menu {
		gap: clamp(14px, 2.2vw, 42px);
	}

	/* D-506: the smaller menu leaves room, so the field takes 20 px more where the placeholder was cut (1280-1679). */
	body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd3__search {
		flex-basis: clamp(270px, 18.2vw, 330px);
	}
}

/* -------------------------------------------------------------------------
 * The bar: white at 50 % with the sand line (round 3d, D-484; round 3c drew it opaque). Over the hero the photo
 * shows through; on a white page and once pinned (the white full-width bar) it reads white.
 * ---------------------------------------------------------------------- */

body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd3__pill,
body.eup-hd6.eup-hd5.eup-hd3-overlay .eup-hd.eup-hd3:not(.is-pinned) .eup-hd3__pill {
	background-color: var(--eup-hd6-fill);
	background-image: none;
	border: 2px solid var(--eup-hd6-line);
	border-radius: 10px;
	box-sizing: border-box;
	color: var(--eup-hd6-ink);
}

body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd__top,
body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd__top:hover,
body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd__top[aria-expanded="true"],
body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd__action,
body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd__action:hover,
body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd3__burger,
body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd3__search-submit {
	color: var(--eup-hd6-ink);
}

body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd__top[aria-expanded="true"]::after {
	background: var(--eup-hd6-ink);
}

body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd3__pill a:focus-visible,
body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd3__pill button:focus-visible,
body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd__logo:focus-visible {
	outline: 3px solid var(--eup-hd6-ink);
	outline-offset: 2px;
}

@media (min-width: 1024px) {
	body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd__top {
		font-weight: 600;
		letter-spacing: 0.12em;
	}

	/* SHOP's mark: a filled triangle (11 x 6 px at 22.85 px), not header v2's rotated chevron. */
	body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd__top .eup-hd__chevron,
	body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd__top[aria-expanded="true"] .eup-hd__chevron {
		border-color: currentColor transparent transparent;
		border-style: solid;
		border-width: 0.25em 0.25em 0;
		height: 0;
		margin-left: 0.3em;
		transform: none;
		width: 0;
	}

	body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd__top[aria-expanded="true"] .eup-hd__chevron {
		transform: rotate(180deg);
	}

	/* The bar is exactly --eup3-hd-pill tall: the items inside its 2 px line (header v3 gives them the full height). */
	body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd__top {
		min-height: calc(var(--eup3-hd-pill) - 4px);
	}

	/* The search line: Light 300, ink. */
	body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd3__search-field::placeholder,
	body.eup-hd6.eup-hd5.eup-hd-search2 .eup-hd3 .eup-hd3__search .eup-hd3__search-field::placeholder {
		color: var(--eup-hd6-ink);
		font-weight: 300;
		opacity: 1;
	}
}

/* 1024-1279: the bar's 2 px line takes 4 px from the search field; give the field that room back plus a margin, so
   the whole placeholder shows at 1024 (header v3 sized it at 224 px). */
@media (min-width: 1024px) and (max-width: 1279.98px) {
	body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd3__search {
		flex-basis: 256px;
	}

	body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd3__search-field::placeholder,
	body.eup-hd6.eup-hd5.eup-hd-search2 .eup-hd3 .eup-hd3__search .eup-hd3__search-field::placeholder {
		letter-spacing: 0;
	}

	/* Round 3d (D-484): pinned, the 198 px horizontal lockup is 60 px wider than the 138 px stacked logo at the top
	   (brand v2 showed the mark here for that reason). The labels' tracking eases to 0.08 em (D-402's) and the item
	   gap to header v3's 16 px, so the search field keeps about 250 px at 1024 with the lockup and about 310 px with
	   the stacked logo (Poppins metrics: the placeholder needs 158 px plus the 44 px button). */
	body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd3__menu {
		gap: 16px;
	}

	body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd__top {
		letter-spacing: 0.08em;
	}
}

/* From 1280 the drawn tracking (0.12 em); 1024-1279 keep header v3's, so the whole placeholder fits the field. */
@media (min-width: 1280px) {
	body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd3__search-field::placeholder,
	body.eup-hd6.eup-hd5.eup-hd-search2 .eup-hd3 .eup-hd3__search .eup-hd3__search-field::placeholder {
		letter-spacing: 0.12em;
	}
}

/* -------------------------------------------------------------------------
 * The logo (round 3d slot 18b, owner 28 Oct 2026): the stacked lockup at the top, the horizontal lockup once pinned,
 * swapped as brand v2 swapped them (display only, at once; brand-v2.css keeps the logo's size transition off)
 * ---------------------------------------------------------------------- */

/* The pinned lockup (eupepsia_header_v6_pinned_mark()): hidden at the top; its file's ratio at any height. */
body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd6__logo-horizontal {
	aspect-ratio: var(--eup-hd6-logo-aspect, 670.19 / 162.84);
	display: none;
	height: var(--eup3-hd-logo, 48px);
	max-width: none;
	width: auto;
}

body.eup-hd6.eup-hd5 .eup-hd.eup-hd3.is-pinned .eup-hd__logo-img {
	display: none;
}

body.eup-hd6.eup-hd5 .eup-hd.eup-hd3.is-pinned .eup-hd6__logo-horizontal {
	display: block;
}

/* The mark alone: pinned at 1024-1279 only, as brand v2 (brand-v2.css:113-133: there the 198 px lockup cuts the search
   line), or at every width if the lockup file is missing. */
body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd6__logo-mark {
	display: none;
	height: var(--eup3-hd-logo, 48px);
	max-width: none;
	width: auto;
}

body.eup-hd6.eup-hd5 .eup-hd.eup-hd3.is-pinned .eup-hd__logo:not(:has(.eup-hd6__logo-horizontal)) .eup-hd6__logo-mark {
	display: block;
}

@media (min-width: 1024px) and (max-width: 1279.98px) {
	body.eup-hd6.eup-hd5 .eup-hd.eup-hd3.is-pinned .eup-hd6__logo-horizontal {
		display: none;
	}

	body.eup-hd6.eup-hd5 .eup-hd.eup-hd3.is-pinned .eup-hd6__logo-mark {
		display: block;
	}
}

/* Pinned: the lockup at 48 px on the 48 px bar, 8 px above and below (brand v2; the pinned reserve stays 64 px). */
@media (min-width: 1024px) {
	body.eup-hd6.eup-hd5 .eup-hd.eup-hd3.is-pinned {
		--eup3-hd-logo: var(--eup-hd6-logo-pinned);
		--eup3-hd-pad: 8px;
		--eup3-hd-pill: 48px;
	}
}

/* 1280 and up, pinned: the panel from the bar's left edge (brand v2's pinned rule is one class heavier). */
@media (min-width: 1280px) {
	body.eup-hd6.eup-hd5 .eup-hd.eup-hd3.is-pinned .eup-hd__panel.eup-hd3__panel {
		left: calc(var(--eup3-gutter, 16px) + var(--eup3-hd-logo) * var(--eup-hd6-logo-ratio, 4.116) + clamp(16px, 1.67vw, 32px));
	}
}

@media (max-width: 1023.98px) {
	body.eup-hd6.eup-hd5 .eup-hd.eup-hd3.is-pinned {
		--eup3-hd-logo: var(--eup-hd6-logo-pinned);
	}
}

/* Hero tone hook (D-507, homepage carousel; lane HP sets html[data-eup-hero-tone="dark|light"] while a slide is in view
   at the top). Over a dark slide the stacked logo turns white (the ink file filtered to #fff: no second request, no
   markup change) and the bar's white rises from 50 % to 80 %, so the ink labels and icons keep at least 7:1 over any
   photo (80 % white over black is #ccc: 10.6:1 with ink). Not pinned, homepage only; light or absent: unchanged. */
html[data-eup-hero-tone="dark"] body.home.eup-hd6.eup-hd5 .eup-hd.eup-hd3:not(.is-pinned) .eup-hd__logo-img {
	filter: brightness(0) invert(1);
}

html[data-eup-hero-tone="dark"] body.home.eup-hd6.eup-hd5 .eup-hd.eup-hd3:not(.is-pinned) .eup-hd3__pill {
	background-color: rgb(255 255 255 / 0.8);
}

body.eup-hd6.eup-motion-v3 .eup-hd3.is-pinned .eup-hd3__bar {
	background-color: var(--eup-hd6-ground);
	box-shadow: 0 4px 18px rgba(35, 31, 32, 0.1);
}

/* -------------------------------------------------------------------------
 * The bag: an ink square with a sand icon
 * ---------------------------------------------------------------------- */

body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd__action.eup-hd__action--cart,
body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd__action.eup-hd__action--cart:hover {
	background: var(--eup-hd6-ink);
	border-radius: 10px;
	color: var(--eup-hd6-sand);
}

body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd__action.eup-hd__action--cart:hover {
	opacity: 0.88;
}

body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd__action.eup-hd__action--cart:focus-visible {
	outline: 3px solid var(--eup-hd6-ink);
	outline-offset: 2px;
}

/* The count: a sand disc, ink number (8.6:1), ringed in ink so it reads apart from the sand icon. */
body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd__action--cart .eup-hd__cart-count,
body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd__action--cart .eup-hd__cart-count.is-filled {
	background: var(--eup-hd6-sand);
	box-shadow: 0 0 0 2px var(--eup-hd6-ink);
	color: var(--eup-hd6-ink);
}

/* -------------------------------------------------------------------------
 * The SHOP panel, 1024 and up: white with the bar's sand line, ink words (no frost, no teal)
 * ---------------------------------------------------------------------- */

@media (min-width: 1024px) {
	body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd__panel.eup-hd3__panel {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background-color: var(--eup-hd6-ground);
		background-image: none;
		border: 2px solid var(--eup-hd6-line);
		border-radius: 10px;
		box-shadow: 0 24px 48px rgba(35, 31, 32, 0.12);
		color: var(--eup-hd6-ink);
	}

	body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd3__panel :is(.eup-hd3__section-btn, .eup-hd__panel-title, .eup-hd__column-title, .eup-hd__range-title, .eup-hd4__season-name, .eup-hd3__shop-link, .eup-hd__link, .eup-hd__panel-all, .eup-hd4__season-line, .eup-b2-by__link) {
		color: var(--eup-hd6-ink);
	}

	body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd3__panel .eup-hd3__section-btn:hover,
	body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd3__panel .eup-hd3__shop-link:hover {
		background: var(--eup-hd6-veil);
	}

	body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd3__panel .eup-hd3__section-btn[aria-expanded="true"],
	body.eup-hd6.eup-brand2.eup-hd5 .eup-hd3 .eup-hd3__panel .eup-hd3__shop > .eup-hd3__section:not([hidden]) {
		background: var(--eup-hd6-veil);
	}

	body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd3__panel :is(.eup-hd3__shop-links, .eup-hd__panel-foot) {
		border-top-color: var(--eup-hd6-line);
	}

	body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd3__panel :is(a, button):focus-visible {
		outline: 3px solid var(--eup-hd6-ink);
		outline-offset: 2px;
	}

	/* Round 3d (D-487, owner 28 Oct 2026): "By need" spacing for every column. D-402's rhythm (brand-v2.css: rows
	   36 px with 4 px above and below, line 1.3, tracking 0.08 em, columns as wide as their longest label spread
	   across the section, 16 px above the foot link) on the department columns (By category) and the Eupepsia
	   list. Type stays at header v5's 13 px (D-488: no size above the earlier one); the need and body map grids
	   already have it (brand-v2.css, unchanged). */
	body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd3__panel .eup-hd__columns {
		column-gap: clamp(24px, 2.5vw, 48px);
		grid-auto-columns: minmax(0, max-content);
		justify-content: space-between;
		margin-bottom: 16px;
	}

	body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd3__panel .eup-hd__column-list--split {
		column-gap: clamp(24px, 2.5vw, 48px);
	}

	body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd3__panel .eup-hd__columns .eup-hd__link,
	body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd3__panel .eup-b2-by .eup-hd__link {
		letter-spacing: 0.08em;
		line-height: 1.3;
		min-height: 36px;
		padding-bottom: 4px;
		padding-top: 4px;
	}

	body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd3__panel .eup-b2-by {
		column-gap: clamp(24px, 2.5vw, 48px);
		grid-template-columns: repeat(2, minmax(0, max-content));
		justify-content: space-between;
		margin-bottom: 16px;
		row-gap: 0;
	}

	/* The Eupepsia rows hold a 32 px icon: 2 px above and below keeps them at the 36 px pitch. */
	body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd3__panel .eup-b2-by .eup-b2-by__link {
		padding-bottom: 2px;
		padding-top: 2px;
	}

	/* Round 3d (D-505, owner 28 Oct 2026), the SHOP panel's three sections.
	   By body map: two columns at every width (brand-v2.css gives the shared need grid three from 1440), set side by
	   side with a fixed gap instead of pushed to the section's edges. */
	body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd3__panel .eup-hd__grid--needs.eup-b2-body {
		column-gap: clamp(48px, 5vw, 96px);
		grid-template-columns: repeat(2, minmax(0, max-content));
		justify-content: start;
	}

	/* Eupepsia: one column, one item under the other, the icon beside its label; 8 px between the 36 px rows. */
	body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd3__panel .eup-b2-by {
		grid-template-columns: minmax(0, max-content);
		justify-content: start;
		row-gap: 8px;
	}

	/* By category: each department title reads as the header of its group, the panel's caption type (600, tracked
	   caps) over a sand rule as wide as the whole group, both list columns of a split group included (the title is a
	   block in the section, which spans the group's two tracks). */
	body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd3__panel .eup-hd__columns .eup-hd__column-title {
		border-bottom: 1px solid var(--eup-hd6-line);
		margin: 0 0 8px;
		padding: 0 0 6px;
	}

	body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd3__panel .eup-hd__columns .eup-hd__column-title .eup-hd__link {
		font-weight: 600;
		letter-spacing: var(--eup3-ls-caps, 0.12em);
		min-height: 28px;
		padding-bottom: 2px;
		padding-top: 4px;
		white-space: nowrap;
	}
}

/* 1024 to 1679: the section is about 607 to 750 px wide (from 1280 the panel follows the bar, slots 25b and 25d), too
   narrow for the titles at 0.12 em, so the titles take 0.04 em tracking and the gaps 12 px; every title then sits on one
   line inside its own rule and the three rules stay level (slot 25d: measured in the fixture at 1024-1920). */
@media (min-width: 1024px) and (max-width: 1679.98px) {
	body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd3__panel .eup-hd__columns,
	body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd3__panel .eup-hd__column-list--split {
		column-gap: 12px;
	}

	body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd3__panel .eup-hd__columns .eup-hd__column-title .eup-hd__link {
		letter-spacing: 0.04em;
	}
}

/* Slots 25b/25d: with the panel on the bar, the need grid's three columns (about 704 px of labels and gaps, brand-v2.css)
   need a panel of about 1144 px: from 1600 since slot 25d (1154 px there); 1440-1599 keep two columns, as 1024-1439
   do, so no need label wraps. */
@media (min-width: 1440px) and (max-width: 1599.98px) {
	body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd3__panel .eup-hd__grid--needs {
		grid-template-columns: repeat(2, minmax(0, max-content));
	}
}

/* -------------------------------------------------------------------------
 * Phone and tablet drawer (below 1024): ink words, the mist panel for an open accordion
 * ---------------------------------------------------------------------- */

@media (max-width: 1023.98px) {
	body.eup-hd6.eup-hd5 .eup-hd4 .eup-hd4__route-btn,
	body.eup-hd6.eup-hd5 .eup-hd4 .eup-hd4__route-link,
	body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd3__drawer-link {
		color: var(--eup-hd6-ink);
	}

	body.eup-hd6.eup-hd5 .eup-hd4 .eup-hd4__route-panel {
		background: var(--eup-hd6-mist);
	}

	/* D-475 / PH-13 (owner, 26 Oct): every drawer row one height and one type: the accordion rows, the links and
	   "Sign in" / "Wishlist" are 48 px, one line, 600 tracked caps, the same line between rows; no gap before the
	   account rows. */
	body.eup-hd6.eup-hd5 .eup-hd4 .eup-hd4__route-btn,
	body.eup-hd6.eup-hd5 .eup-hd4 .eup-hd4__route-link,
	body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd3__drawer-link {
		align-items: center;
		border-top: 1px solid var(--eup-hd6-line);
		box-sizing: border-box;
		display: flex;
		font-size: var(--eup3-fs-caption, 14px);
		font-weight: 600;
		height: 48px;
		letter-spacing: var(--eup3-ls-caps, 0.12em);
		line-height: 1.2;
		min-height: 48px;
		overflow: hidden;
		padding: 0 var(--eup-gutter, 20px);
		text-overflow: ellipsis;
		text-transform: uppercase;
		white-space: nowrap;
	}

	body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd3__drawer-links {
		margin: 0 0 24px;
	}

	/* Round 3d (D-487): every link inside an open drawer group is a 44 px target (the 36 px desktop rows are not
	   brought here), the "see all" foot links too. */
	body.eup-hd6.eup-hd5 .eup-hd4 .eup-hd4__route-panel .eup-hd__link {
		min-height: 44px;
	}

	body.eup-hd6.eup-hd5 .eup-hd4 .eup-hd4__route-panel .eup-hd__panel-all {
		align-items: center;
		display: inline-flex;
		min-height: 44px;
	}

	body.eup-hd6.eup-hd5 .eup-hd .eup-hd__drawer-title,
	body.eup-hd6.eup-hd5 .eup-hd .eup-hd__drawer-close {
		color: var(--eup-hd6-ink);
	}

	body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd3__drawer-links li:last-child .eup-hd3__drawer-link {
		border-bottom: 1px solid var(--eup-hd6-line);
	}

	/* D-475: the bag is a square of the bar's drawn height (48 px: 44 px buttons inside the 2 px line), at the top
	   and pinned, so logo, bar and bag share one centre and the bag never shrinks below the bar. */
	body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd3__pill {
		min-height: 48px;
	}

	body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd__action.eup-hd__action--cart {
		bottom: auto;
		height: 48px;
		top: calc(50% - 24px);
		width: 48px;
	}
}

/* -------------------------------------------------------------------------
 * The search field's states on the white bar
 * ---------------------------------------------------------------------- */

body.eup-hd6.eup-hd5.eup-hd-search2 .eup-hd3 .eup-hd3__search::before,
body.eup-hd6.eup-hd5.eup-hd-search2 .eup-hd3 .eup-hd3__search:focus-within::before,
body.eup-hd6.eup-hd5.eup-hd-search2 .eup-hd3 .eup-hd3__search.is-closed:focus-within::before {
	background: var(--eup-hd6-veil);
}

body.eup-hd6.eup-hd5.eup-hd-search2 .eup-hd3 .eup-hd3__search::after,
body.eup-hd6.eup-hd5.eup-hd-search2 .eup-hd3 .eup-hd3__search .eup-hd3__search-submit:focus-visible {
	box-shadow: inset 0 0 0 2px var(--eup-hd6-ink);
}

body.eup-hd6.eup-hd5.eup-hd-search2 .eup-hd3 .eup-hd3__search .eup-hd3__search-field,
body.eup-hd6.eup-hd5.eup-hd-search2 .eup-hd3 .eup-hd3__search .eup-hd3__search-field:focus::placeholder {
	caret-color: var(--eup-hd6-ink);
	color: var(--eup-hd6-ink);
}

body.eup-hd6.eup-hd5 .eup-afx-aws-result .aws_result_item.hovered,
body.eup-hd6.eup-hd5 .eup-afx-aws-result .aws_result_item:hover {
	background: var(--eup-hd6-veil);
}

body.eup-hd6.eup-hd5 .eup-afx-aws-result .aws_result_title {
	color: var(--eup-hd6-ink) !important; /* site-legacy.css and header-v5.css use !important */
}

@media (prefers-reduced-motion: reduce) {
	body.eup-hd6.eup-hd5 .eup-hd3 .eup-hd__top .eup-hd__chevron {
		transition: none;
	}
}

/* Round 3d (D-570, owner 29 Oct 2026): "The Timeless Collection" in the SHOP panel and the phone drawer is plain text:
   same classes and box as the other By Eupepsia rows (the markup is a span), no pointer, no hover underline or colour. */
body.eup-hd6 .eup-b2-by__link--static {
	cursor: default;
}

body.eup-hd6.eup-hd5 .eup-hd3 .eup-b2-by .eup-b2-by__link--static:hover,
body.eup-hd6.eup-hd5 .eup-hd3 .eup-b2-by .eup-b2-by__link--static:hover .eup-hd__link-label {
	color: inherit;
	text-decoration: none;
}

/* Round 4 SF2 (owner, 31 Oct 2026): "Coming soon" after The Timeless Collection, the site's capital label (slot 26b:
   text-transform, so the HTML and screen readers keep "Coming soon"; 0.12em tracking as SHOP NOW). The row's own
   colour (no new colour: palette v7 stays valid), smaller than the label, never split across lines. */
body.eup-hd6 .eup-b2-by__soon {
	display: inline-block;
	font-size: 0.85em;
	font-weight: 500;
	letter-spacing: 0.12em;
	margin-inline-start: 0.3em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

/* SF2: the row is a wrapping flex box in the phone drawer; the label (with the tag) keeps its place beside the icon and
   wraps its own text, so a tag that does not fit goes under the label, not the whole label under the icon. */
body.eup-hd6 .eup-b2-by .eup-b2-by__link--static .eup-hd__link-label {
	flex: 1 1 0%;
	min-width: 0;
}