/**
 * Header v5 (round 2, Homepage 6; PLAN-FEEDBACK-ROUND-2.md D-263; HEADER-V5-PORT.md).
 *
 * Loaded after header-v3.css, header-v4.css, header-search-v2.css and the design-v4 sheets, only while
 * `eupepsia_header_v5` is on and design system v4 is active (body classes `eup-hd5` and `eup-ds4`).
 * Every rule is scoped to `body.eup-hd5`. Tokens are D-248 names with today's value as the fallback.
 *
 * Measured on Homepage_6.ai artboard 2 at 1920 (render p2-1): logo left, outside the bar; the bar
 * 64 px tall (`--eup3-nav-h`), radius 10, Pantone 2239 C teal at 62 % over the hero photo; labels
 * SHOP · BODY MAP · THE EUPEPSIA WAY in indigo caps (600, +0.12 em); the search placeholder in small
 * caps; search, account and wishlist icons in indigo inside the bar; the bag a separate coral square
 * of the bar's height about 14 px to its right, with an indigo icon.
 *
 * The bar's fill:
 *   - over the homepage hero (`eup-hd3-overlay`, 768 and up, not pinned): teal at 62 %;
 *   - everywhere else, and once pinned: opaque teal on the white bar.
 * Labels and icons stay indigo (8.17:1 on opaque teal). Over the hero the ratio depends on the photo:
 * measured by chrome-r2/scripts/header-smoke-v5.mjs (D-263: at least 4.5:1 at 1024, 1280, 1440 and
 * 1920, or the bar goes opaque at that width).
 *
 * The bag sits outside the bar: it is positioned against `.eup-hd3__inner`, the header's one
 * positioned box (the SHOP panel needs that box as its containing block, so neither the bar nor its
 * children may be positioned), and the bar keeps a gap of the bag's width on its right.
 */

/* -------------------------------------------------------------------------
 * Sizes and colours
 * ---------------------------------------------------------------------- */

body.eup-hd5 .eup-hd.eup-hd3 {
	--eup3-hd-pill: clamp(48px, 3.34vw, var(--eup3-nav-h, 64px));
	--eup-hd5-teal: var(--eup3-accent, #00ccb8);
	--eup-hd5-ink: var(--eup3-accent-ink, #3d3935);
	--eup-hd5-fill: var(--eup-hd5-teal);
	--eup-hd5-frost: transparent;
	--eup-hd5-gap: clamp(8px, 0.73vw, 14px);
	--eup-hd5-radius: var(--eup3-radius, 10px);
}

/* Over the hero, 768 and up, until pinned: the designer's 62 % teal, laid on a white frost at 55 % so
   the bar stays pale over the photo as drawn (the comp samples #89d0c9 to #83c1b1 end to end). Over
   pure black the result is still 6.5:1 for indigo; measured over hero-v6: see header-smoke-v5.mjs.
   (Finish review 2026-10-13: without the frost the bar went to #139081 over the hair and the search
   line to 3.37:1.) */
@media (min-width: 768px) {
	body.eup-hd5.eup-hd3-overlay .eup-hd.eup-hd3:not(.is-pinned) {
		--eup-hd5-fill: color-mix(in srgb, var(--eup-hd5-teal) 62%, transparent);
		--eup-hd5-frost: rgb(255 255 255 / 0.55);
	}
}

/* 1280 and up: the drawn logo (188 px tall at 1920, today 131) with the bar seated at its lower half.
   Below 1280 the logo keeps today's size, so the three items, search and bag keep their room. The
   header's reserve (--eup3-header-h, header-v3.css) follows the logo. */
@media (min-width: 1280px) {
	body.eup-hd5 {
		--eup3-header-h: calc(clamp(131px, 9.8vw, 188px) + 2 * clamp(10px, 2.1vw, 40px));
	}

	body.eup-hd5 .eup-hd.eup-hd3 {
		--eup3-hd-logo: clamp(131px, 9.8vw, 188px);
	}
}

@media (min-width: 1024px) {
	body.eup-hd5 .eup-hd3 .eup-hd3__inner {
		align-items: flex-end;
	}
}

/* Phones: the logo a little larger, so "Wellness Boutique" stays legible beside the teal bar. */
@media (max-width: 767.98px) {
	body.eup-hd5 .eup-hd.eup-hd3 {
		--eup3-hd-logo: 56px;
	}
}

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

body.eup-hd5 .eup-hd3 .eup-hd3__pill {
	background-color: var(--eup-hd5-frost);
	background-image: linear-gradient(var(--eup-hd5-fill), var(--eup-hd5-fill));
	border-radius: var(--eup-hd5-radius);
	color: var(--eup-hd5-ink);
	margin-right: calc(var(--eup3-hd-pill) + var(--eup-hd5-gap));
	transition: background-color var(--eup3-dur-fast, 0.25s) ease-in-out;
}

/* Pinned: the bar's white ground and lift stay as in v3 (the grey pill fill is not spread across
   it, so the teal bar and the coral bag keep their own shapes). */
body.eup-hd5.eup-motion-v3 .eup-hd3.is-pinned .eup-hd3__bar {
	background-color: var(--eup3-ground, #ffffff);
}

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

/* Teal on teal would vanish: the open SHOP item's 2 px rule is indigo. */
body.eup-hd5 .eup-hd3 .eup-hd__top[aria-expanded="true"]::after {
	background: var(--eup-hd5-ink);
}

/* Focus on the teal bar: the indigo ring (8.17:1 on teal, 16.45:1 on white). */
body.eup-hd5 .eup-hd3 .eup-hd3__pill a:focus-visible,
body.eup-hd5 .eup-hd3 .eup-hd3__pill button:focus-visible {
	outline: 3px solid var(--eup3-focus, #3d3935);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * The bag: a coral square of the bar's height, outside it
 * ---------------------------------------------------------------------- */

body.eup-hd5 .eup-hd3 .eup-hd__action.eup-hd__action--cart {
	align-items: center;
	background: var(--eup3-cta, var(--eup3-accent, #00ccb8));
	border-radius: var(--eup-hd5-radius);
	color: var(--eup3-cta-ink, var(--eup3-accent-ink, #3d3935));
	display: flex;
	height: var(--eup3-hd-pill);
	justify-content: center;
	min-height: 0;
	min-width: 0;
	opacity: 1;
	position: absolute;
	right: var(--eup3-gutter, 16px);
	top: calc(50% - var(--eup3-hd-pill) / 2);
	transition:
		background-color var(--eup3-dur-fast, 0.25s) ease-in-out,
		height var(--eup3-dur-fast, 0.25s) ease-in-out,
		width var(--eup3-dur-fast, 0.25s) ease-in-out,
		top var(--eup3-dur-fast, 0.25s) ease-in-out;
	width: var(--eup3-hd-pill);
}

/* With the bar at the logo's foot (1024 and up), the bag sits at the same foot. */
@media (min-width: 1024px) {
	body.eup-hd5 .eup-hd3 .eup-hd__action.eup-hd__action--cart {
		bottom: var(--eup3-hd-pad, 10px);
		top: auto;
	}
}

body.eup-hd5 .eup-hd3 .eup-hd__action.eup-hd__action--cart:hover {
	background: var(--eup3-cta-hover, var(--eup3-ink-strong, #3d3935));
	color: var(--eup3-cta-ink, #ffffff);
	opacity: 1;
}

body.eup-hd5 .eup-hd3 .eup-hd__action.eup-hd__action--cart:active {
	transform: scale(0.98);
	transition-duration: var(--eup3-dur-instant, 90ms);
}

body.eup-hd5 .eup-hd3 .eup-hd__action.eup-hd__action--cart:focus-visible {
	outline: 3px solid var(--eup3-focus, #3d3935);
	outline-offset: 2px;
}

/* The count on the coral square: an indigo disc with a white number (16.45:1), ringed in coral so
   it reads apart from the icon. */
body.eup-hd5 .eup-hd3 .eup-hd__action--cart .eup-hd__cart-count,
body.eup-hd5 .eup-hd3 .eup-hd__action--cart .eup-hd__cart-count.is-filled {
	background: var(--eup3-indigo, var(--eup3-ink, #3d3935));
	box-shadow: 0 0 0 2px var(--eup3-cta, var(--eup3-accent, #00ccb8));
	color: var(--eup3-ground, #ffffff);
}

/* -------------------------------------------------------------------------
 * 1024 and up: three caps labels and the small-caps search line on the bar
 * ---------------------------------------------------------------------- */

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

	/* The search line sits on the bar itself, as drawn: no white capsule at rest. */
	body.eup-hd5 .eup-hd3 .eup-hd3__search-field::placeholder,
	body.eup-hd5.eup-hd-search2 .eup-hd3 .eup-hd3__search .eup-hd3__search-field::placeholder {
		color: var(--eup-hd5-ink);
		opacity: 1;
	}
}

/* -------------------------------------------------------------------------
 * The SHOP panel, 1024 and up (Homepage 6 v2, artboard 3, render v2/renders/p3-1: a translucent teal
 * panel under the bar, caps headings over columns of caps links, all indigo; the drawing's words are
 * lorem ipsum, so the panel keeps its real sections, categories and links).
 *
 * The fill is the bar's material: teal at 62 % on a white frost at 50 %, with a 20 px backdrop blur.
 * Indigo text stays at least 6.2:1 over any page beneath (the frost and teal over black), about 10:1
 * over white. Without the frost, 62 % teal over dark photo areas falls to 3.4:1. No transform or
 * filter on the panel itself (a backdrop filter only).
 * ---------------------------------------------------------------------- */

@media (min-width: 1024px) {
	body.eup-hd5 .eup-hd3 .eup-hd__panel.eup-hd3__panel {
		-webkit-backdrop-filter: blur(20px) brightness(1.3) saturate(0.9);
		backdrop-filter: blur(20px) brightness(1.3) saturate(0.9);
		background-color: rgb(255 255 255 / 0.5);
		background-image: linear-gradient(color-mix(in srgb, var(--eup-hd5-teal) 62%, transparent), color-mix(in srgb, var(--eup-hd5-teal) 62%, transparent));
		border-radius: var(--eup-hd5-radius);
		box-shadow: 0 24px 48px rgba(13, 25, 34, 0.16);
		color: var(--eup-hd5-ink);
		top: calc(100% - var(--eup3-hd-pad) + var(--eup-hd5-gap));
	}

	/* Every word on the panel: indigo, tracked caps (the drawing's 600 headings and 400 links). */
	body.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) {
		color: var(--eup-hd5-ink);
		font-family: var(--eup3-font, "Poppins", sans-serif);
		letter-spacing: var(--eup3-ls-caps, 0.12em);
		text-transform: uppercase;
	}

	body.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) {
		font-size: var(--eup3-fs-caption, 14px);
		font-weight: 600;
	}

	body.eup-hd5 .eup-hd3 .eup-hd3__panel :is(.eup-hd3__shop-link, .eup-hd__link, .eup-hd__panel-all) {
		font-size: var(--eup3-fs-micro, 13px);
		font-weight: 400;
	}

	body.eup-hd5 .eup-hd3 .eup-hd3__panel .eup-hd4__season-line {
		color: var(--eup-hd5-ink);
	}

	/* The section rail: no fill at rest, a white veil on hover, the open section underlined. */
	body.eup-hd5 .eup-hd3 .eup-hd3__panel .eup-hd3__section-btn {
		background: none;
	}

	body.eup-hd5 .eup-hd3 .eup-hd3__panel .eup-hd3__section-btn:hover,
	body.eup-hd5 .eup-hd3 .eup-hd3__panel .eup-hd3__shop-link:hover {
		background: rgba(255, 255, 255, 0.3);
	}

	body.eup-hd5 .eup-hd3 .eup-hd3__panel .eup-hd3__section-btn[aria-expanded="true"] {
		background: rgba(255, 255, 255, 0.45);
	}

	/* A dense, quiet list as drawn: about a 25 px pitch (targets stay 24 px or more), no rule under
	   the column titles. */
	body.eup-hd5 .eup-hd3 .eup-hd3__panel .eup-hd__link {
		line-height: 1.5;
		min-height: 0;
		padding-bottom: 3px;
		padding-top: 3px;
	}

	body.eup-hd5 .eup-hd3 .eup-hd3__panel .eup-hd__column-title {
		border-bottom: 0;
	}

	/* Rules between groups: indigo at 30 % (decoration). */
	body.eup-hd5 .eup-hd3 .eup-hd3__panel :is(.eup-hd3__shop-links, .eup-hd__panel-foot) {
		border-top-color: color-mix(in srgb, var(--eup-hd5-ink) 30%, transparent);
	}

	body.eup-hd5 .eup-hd3 .eup-hd3__panel :is(.eup-hd__link, .eup-hd__panel-all):hover {
		text-decoration: underline;
		text-decoration-color: currentColor;
		text-underline-offset: 0.3em;
	}

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

/* 1280 and up: the panel hangs from the bar, from its left edge to the bag's right edge (the logo is
   582 x 445, so its width is 1.308 x its height; the gap is header-v3.css's logo-to-bar gap). */
@media (min-width: 1280px) {
	body.eup-hd5 .eup-hd3 .eup-hd__panel.eup-hd3__panel {
		left: calc(var(--eup3-gutter, 16px) + var(--eup3-hd-logo, 131px) * 1.308 + clamp(24px, 3.55vw, 68px));
		right: var(--eup3-gutter, 16px);
	}
}

/* -------------------------------------------------------------------------
 * Phone and tablet drawer (below 1024): the same indigo tracked caps for the routes, radius 10 for
 * the search field, an open accordion on mint.
 * ---------------------------------------------------------------------- */

@media (max-width: 1023.98px) {
	body.eup-hd5 .eup-hd4 .eup-hd4__route-btn,
	body.eup-hd5 .eup-hd4 .eup-hd4__route-link {
		color: var(--eup3-indigo, var(--eup3-ink, #3d3935));
		font-size: var(--eup3-fs-caption, 14px);
		font-weight: 600;
		letter-spacing: var(--eup3-ls-caps, 0.12em);
		text-transform: uppercase;
	}

	body.eup-hd5 .eup-hd4 .eup-hd4__route-panel {
		background: var(--eup3-mint, var(--eup3-surface, #f0f0ee));
	}


	body.eup-hd5 .eup-hd3 .eup-hd3__drawer-link {
		color: var(--eup3-indigo, var(--eup3-ink, #3d3935));
		font-size: var(--eup3-fs-caption, 14px);
		letter-spacing: var(--eup3-ls-caps, 0.12em);
		text-transform: uppercase;
	}
}

@supports not (background: color-mix(in srgb, red 50%, transparent)) {
	body.eup-hd5 .eup-hd3 .eup-hd__panel.eup-hd3__panel {
		background: var(--eup-hd5-teal);
	}
}

/* -------------------------------------------------------------------------
 * The search field's states (tech lead's review, 2026-10-15: the clicked state looked abrupt and the
 * outline harsh). header-search-v2.css draws the open field on the form's two pseudo-elements; under
 * header v5 they become:
 *   ::before  the field's frost: white at 50 %, radius 8 (inside the bar's 10), fading in over
 *             --eup3-dur-med on --eup3-ease-smooth when the field has focus; no wipe, no clip.
 *   ::after   the keyboard ring: a 2 px indigo inner ring (8.17:1 on teal, 10:1 or more on the frost),
 *             fading in over --eup3-dur-fast, only when the field was reached by keyboard. A click or
 *             tap sets `data-eup-hd5-pointer` on the form (header-v5.js), and the ring stays off; Tab
 *             clears the mark. Without the script the ring shows on every focus.
 * The words stay indigo: the placeholder at 70 % while the field is focused and empty, typed text at
 * full strength (contrast measured over the hero by chrome-r2/scripts/search-states.mjs).
 * ---------------------------------------------------------------------- */
body.eup-hd5 .eup-hd3 .eup-hd3__search,
body.eup-hd5.eup-hd-search2 .eup-hd3 .eup-hd3__search::before,
body.eup-hd5.eup-hd-search2 .eup-hd3 .eup-hd3__search::after {
	border-radius: var(--eup3-radius-sm, 8px); /* header v3 rounds the form fully (999 px) */
}

body.eup-hd5.eup-hd-search2 .eup-hd3 .eup-hd3__search::before,
body.eup-hd5.eup-hd-search2 .eup-hd3 .eup-hd3__search:focus-within::before,
body.eup-hd5.eup-hd-search2 .eup-hd3 .eup-hd3__search.is-closed:focus-within::before {
	background: rgb(255 255 255 / 0.5);
	box-shadow: none;
	clip-path: none;
	transition: opacity var(--eup3-dur-med, 0.35s) var(--eup3-ease-smooth, ease);
}

body.eup-hd5.eup-hd-search2 .eup-hd3 .eup-hd3__search:focus-within::before {
	opacity: 1;
}

/* Escape on an empty field: the frost fades back out; focus (and a keyboard ring) stays. */
body.eup-hd5.eup-hd-search2 .eup-hd3 .eup-hd3__search.is-closed:focus-within::before {
	opacity: 0;
}

body.eup-hd5.eup-hd-search2 .eup-hd3 .eup-hd3__search::after {
	border: 0;
	box-shadow: inset 0 0 0 2px var(--eup3-focus, #3d3935);
	transition: opacity var(--eup3-dur-fast, 0.25s) var(--eup3-ease-smooth, ease);
}

body.eup-hd5.eup-hd-search2 .eup-hd3 .eup-hd3__search:focus-within::after {
	opacity: 0;
}

body.eup-hd5.eup-hd-search2 .eup-hd3 .eup-hd3__search:not([data-eup-hd5-pointer]):focus-within::after {
	opacity: 1;
}

/* Mouse: a hint of the frost on hover. */
@media (hover: hover) and (pointer: fine) {
	body.eup-hd5.eup-hd-search2 .eup-hd3 .eup-hd3__search:not(.is-closed):hover::before {
		clip-path: none;
		opacity: 0.4;
	}

	body.eup-hd5.eup-hd-search2 .eup-hd3 .eup-hd3__search:not(.is-closed):focus-within:hover::before {
		opacity: 1;
	}
}

/* The magnifier: the same soft ring, keyboard only (a click never shows a ring on a button). */
body.eup-hd5.eup-hd-search2 .eup-hd3 .eup-hd3__search .eup-hd3__search-submit:focus-visible {
	border-radius: var(--eup3-radius-sm, 8px);
	outline: 0;
	box-shadow: inset 0 0 0 2px var(--eup3-focus, #3d3935);
}

body.eup-hd5.eup-hd-search2 .eup-hd3 .eup-hd3__search .eup-hd3__search-field::placeholder {
	transition: opacity var(--eup3-dur-med, 0.35s) var(--eup3-ease-smooth, ease);
}

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

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

/* The results list (Advanced Woo Search, under the field): the bar's corners, a small gap under the bar,
   a soft shadow, indigo titles and a mint hover; it keeps search v2's short drop-in. */
body.eup-hd5 .aws-search-result.eup-afx-aws-result {
	border: 0;
	border-radius: var(--eup3-radius, 10px) !important; /* the plugin forces 0 !important */
	box-shadow: 0 16px 40px rgba(13, 25, 34, 0.16), 0 0 0 1px rgba(29, 24, 72, 0.06);
	margin-top: var(--eup3-sp-2, 8px);
	overflow: hidden;
}

body.eup-hd5 .eup-afx-aws-result .aws_result_item.hovered,
body.eup-hd5 .eup-afx-aws-result .aws_result_item:hover {
	background: var(--eup3-mint, var(--eup3-surface, #f0f0ee));
}

body.eup-hd5 .eup-afx-aws-result .aws_result_title {
	color: var(--eup3-ink, #3d3935) !important; /* site-legacy.css !important */
}

/* 1024-1279: three items leave room v4's four did not: a wider search field (the full placeholder with
   margin; v4 kept 1 px) and wider gaps between the tracked labels. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
	body.eup-hd5 .eup-hd3 .eup-hd3__menu {
		gap: 24px;
	}
}

@media (min-width: 1024px) {
	body.eup-hd5 .eup-hd3 .eup-hd3__search {
		flex-basis: clamp(250px, 17vw, 330px);
	}
}

/* --- D-390: the mega panel appears at once (owner, 2026-10-21) -------------------------------------------------
 * Header v3's motion v3 slid the panel down from under the bar over 0.6 s (clip-path + translateY(-100%)) and faded its
 * content in over another 0.6 s after 100 ms. Under header v5 the panel opens with no animation at all (measured in
 * headless Chrome: the first paint of the blurred panel already costs ~40 ms, so even an 80 ms fade pushed "fully
 * visible" past 200 ms) and closes with an 80 ms opacity fade (header-v3.js waits for an animationend before it hides
 * the panel, so the closing state still needs a short animation). Prefers-reduced-motion: no animation, as before (the
 * v3 slide only ran under no-preference, and header-v3.js closes at once under reduce).
 * The hover delays are the data attributes of header.php (eupepsia_header_v5_shop_hover_ms()) and header-v5.js. */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
	body.eup-hd5.eup-motion-v3 .eup-hd3 .eup-hd3__panel:not([hidden]) {
		animation: none;
	}

	body.eup-hd5.eup-motion-v3 .eup-hd3 .eup-hd3__panel:not([hidden]) .eup-hd3__panel-inner {
		animation: none;
	}

	body.eup-hd5.eup-motion-v3 .eup-hd3 .eup-hd3__panel.is-closing {
		animation: eup-hd5-panel-out 80ms linear both;
		pointer-events: none;
	}
}

@keyframes eup-hd5-panel-out {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.eup-hd5 .eup-hd3 .eup-hd3__pill,
	body.eup-hd5 .eup-hd3 .eup-hd__action.eup-hd__action--cart {
		transition: none;
	}
}