/**
 * eup-header-v3 — the header as drawn at the top of Homepage.svg (2026-09-29).
 *
 * Handle:  eup-header-v3 (inc/enqueue-system-v3.php), with system v3 and header v2 both on.
 * Markup:  template-parts/header-v3/ (header, panel-shop, search, wishlist).
 * Loads after header-v2.css and keeps its drawer, panel and link styles; every rule here is
 * scoped to `.eup-hd3` so it outranks header-v2.css's single-class rules without !important.
 *
 * Measured at 1920 (SVG units = CSS px): logo 180 x 131 at x 200, y 80; pill #e5e7e2 at x 448 to
 * 1720, y 110 to 189 (79 tall, radius 36); menu Poppins SemiBold 22.8 px #3d3935 uppercase, SHOP
 * at x 505, EUPEPSIA FEATURES 639, BODY MAP 947; placeholder Poppins 15 px uppercase at x 1232;
 * four 2 px line icons from about x 1522 to 1685. Sizes scale with the viewport between the
 * clamps below and reach the drawn values at 1920.
 *
 * 2026-09-30 (responsive v3, system-v3.css section 2b): the menu size is --eup3-fs-nav (16 px at
 * 1024, 22.8 at 1920, Pebble's fixed-UI rule ramped only where the desktop menu exists); the four
 * icons are the designer's (template-parts/icon-v3.php), sized by height so each keeps its drawn
 * proportions; the menu labels draw a 1 px underline on hover (mouse only); calm transitions.
 */

/* -------------------------------------------------------------------------
 * The shell
 * ---------------------------------------------------------------------- */

.eup-hd.eup-hd3 {
	--eup3-hd-logo: clamp(52px, 6.8vw, 131px);
	--eup3-hd-pill: clamp(48px, 4.1vw, 79px);
	--eup3-hd-pad: clamp(10px, 2.1vw, 40px);
	--eup3-hd-menu: var(--eup3-fs-nav, clamp(16px, 0.759vw + 8.23px, 22.8px));
	--eup3-hd-icon: clamp(20px, 1.3vw, 25px);
	--eup3-hd-icon-h: clamp(18px, 1.146vw, 22px); /* designer icons: ~22 px tall at 1920 */

	background: var(--eup3-ground);
	border-bottom: 0;
	color: var(--eup3-ink);
	font-family: var(--eup3-font);
}

.eup-hd3 .eup-hd3__bar {
	position: relative;
}

/* The one positioned ancestor of the SHOP panel: the panel spans the logo-to-pill width. */
.eup-hd3 .eup-hd3__inner {
	align-items: center;
	box-sizing: content-box;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	margin: 0 auto;
	max-width: var(--eup3-wrap);
	padding: var(--eup3-hd-pad) var(--eup3-gutter);
	position: relative;
}

.eup-hd3 .eup-hd__logo {
	flex: 0 0 auto;
	justify-content: flex-start;
	min-height: 44px;
}

.eup-hd3 .eup-hd__logo-img {
	height: var(--eup3-hd-logo);
	max-width: none;
}

/* -------------------------------------------------------------------------
 * The pill
 * ---------------------------------------------------------------------- */

.eup-hd3 .eup-hd3__pill {
	align-items: center;
	background: var(--eup3-pill);
	border-radius: var(--eup3-radius-pill);
	display: flex;
	flex: 0 1 auto;
	min-height: var(--eup3-hd-pill);
	min-width: 0;
	padding: 0 6px;
}

.eup-hd3 .eup-hd3__actions {
	align-items: center;
	display: flex;
	gap: 0;
	margin: 0;
}

.eup-hd3 .eup-hd__action {
	background: none;
	border: 0;
	border-radius: 50%;
	color: var(--eup3-ink);
	cursor: pointer;
	flex-direction: row;
	min-height: 44px;
	min-width: 44px;
	padding: 0;
}

.eup-hd3 .eup-hd__action {
	transition: opacity var(--eup3-dur-fast, 0.25s) ease-in-out;
}

.eup-hd3 .eup-hd__action:hover {
	color: var(--eup3-ink);
	opacity: 0.7;
}

.eup-hd3 .eup-hd__icon {
	height: var(--eup3-hd-icon);
	stroke-width: 1.8;
	width: var(--eup3-hd-icon);
}

/* The designer's filled icons: height-led, width from the viewBox (bag 34 x 22, search 21 x 22). */
.eup-hd3 .eup-hd__icon.eup-hd3__icon,
.eup-hd3 .eup-hd3__search-submit .eup-hd__icon.eup-hd3__icon {
	height: var(--eup3-hd-icon-h);
	width: auto;
}

/* Icons only at every width; the names stay in the accessibility tree. */
.eup-hd3 .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;
}

/* The cart badge: the accent disc, ink number (5.6:1). */
.eup-hd3 .eup-hd__cart-count,
.eup-hd3 .eup-hd__cart-count.is-filled {
	background: var(--eup3-accent);
	color: var(--eup3-ink);
	font-family: var(--eup3-font);
	font-weight: 600;
}

/* Phone: account and wishlist move into the drawer; the pill holds search, bag, menu. */
.eup-hd3 .eup-hd__action--account,
.eup-hd3 .eup-hd3__action--wishlist {
	display: none;
}

.eup-hd3 .eup-hd3__burger {
	border-radius: 50%;
	color: var(--eup3-ink);
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Phone: the drawer (header-v2.css positions it; v3 sets the type and the search row)
 * ---------------------------------------------------------------------- */

.eup-hd3 .eup-hd__nav {
	background: var(--eup3-ground);
}

.eup-hd3 .eup-hd__scrim {
	background: rgba(61, 57, 53, 0.45);
}

.eup-hd3 .eup-hd__drawer-title {
	color: var(--eup3-ink);
	font-weight: 600;
}

.eup-hd3 .eup-hd__top {
	color: var(--eup3-ink);
	font-family: var(--eup3-font);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

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

.eup-hd3 .eup-hd3__search {
	background: var(--eup3-pill);
	border: 0;
	border-radius: var(--eup3-radius-pill);
	flex: 0 0 auto;
	margin: 16px var(--eup-gutter, 20px) 8px;
	order: 0;
	padding: 0 4px 0 18px;
}

.eup-hd3 .eup-hd3__search-field {
	color: var(--eup3-ink);
	font-family: var(--eup3-font);
	font-size: 16px;
	height: 48px;
}

.eup-hd3 .eup-hd3__search-field::placeholder {
	color: var(--eup3-ink-soft);
	font-size: 13px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.eup-hd3 .eup-hd3__search-submit {
	color: var(--eup3-ink);
	height: 44px;
	width: 44px;
}

.eup-hd3 .eup-hd3__search:focus-within {
	outline: 3px solid var(--eup3-focus);
	outline-offset: 2px;
}

.eup-hd3 .eup-hd3__drawer-links {
	list-style: none;
	margin: 8px 0 24px;
	padding: 0;
}

.eup-hd3 .eup-hd3__drawer-links li {
	margin: 0;
}

.eup-hd3 .eup-hd3__drawer-link {
	align-items: center;
	color: var(--eup3-ink);
	display: flex;
	font-size: 15px;
	font-weight: 400;
	min-height: 44px;
	padding: 0 var(--eup-gutter, 20px);
	text-decoration: none;
}

/* The SHOP panel inside the drawer: its sections read as an accordion. */
.eup-hd3 .eup-hd3__panel {
	background: var(--eup3-ground);
}

.eup-hd3 .eup-hd3__panel-inner {
	padding: 0 0 8px;
}

.eup-hd3 .eup-hd3__section-btn {
	align-items: center;
	background: none;
	border: 0;
	border-top: 1px solid var(--eup3-line);
	color: var(--eup3-ink);
	cursor: pointer;
	display: flex;
	font-family: var(--eup3-font);
	font-size: 15px;
	font-weight: 400;
	justify-content: space-between;
	letter-spacing: 0;
	margin: 0;
	min-height: 48px;
	padding: 0 var(--eup-gutter, 20px) 0 calc(var(--eup-gutter, 20px) + 12px);
	text-align: left;
	text-transform: none;
	width: 100%;
}

.eup-hd3 .eup-hd3__section-chevron {
	border-bottom: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	height: 7px;
	transform: rotate(45deg);
	width: 7px;
}

.eup-hd3 .eup-hd3__section-btn[aria-expanded="true"] .eup-hd3__section-chevron {
	transform: rotate(-135deg);
}

.eup-hd3 .eup-hd3__section {
	background: var(--eup3-surface);
	padding: 4px var(--eup-gutter, 20px) 16px calc(var(--eup-gutter, 20px) + 12px);
}

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

/* The section's own h2 repeats the button label on phone: hidden from sight, kept for AT. */
.eup-hd3 .eup-hd3__section .eup-hd__panel-title {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: 0;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

.eup-hd3 .eup-hd3__shop-links {
	border-top: 1px solid var(--eup3-line);
	list-style: none;
	margin: 0;
	padding: 6px 0 0;
}

.eup-hd3 .eup-hd3__shop-links li {
	margin: 0;
}

.eup-hd3 .eup-hd3__shop-link {
	align-items: center;
	color: var(--eup3-ink);
	display: flex;
	font-size: 15px;
	font-weight: 400;
	min-height: 44px;
	padding: 0 var(--eup-gutter, 20px) 0 calc(var(--eup-gutter, 20px) + 12px);
	text-decoration: none;
}

.eup-hd3 .eup-hd3__shop-link:hover {
	text-decoration: underline;
	text-decoration-color: var(--eup3-accent);
	text-underline-offset: 4px;
}

/* Panel content from header v2, in v3 type and colour. */
.eup-hd3 .eup-hd__link,
.eup-hd3 .eup-hd__panel-all {
	color: var(--eup3-ink);
	font-family: var(--eup3-font);
}

.eup-hd3 .eup-hd__column-title,
.eup-hd3 .eup-hd__range-title {
	color: var(--eup3-ink);
	font-family: var(--eup3-font);
	font-weight: 500;
}

/* -------------------------------------------------------------------------
 * 1024 and up: logo, then the full pill
 * ---------------------------------------------------------------------- */

@media (min-width: 1024px) {

	.eup-hd3 .eup-hd3__inner {
		gap: clamp(24px, 3.55vw, 68px);
	}

	.eup-hd3 .eup-hd3__pill {
		flex: 1 1 auto;
		padding: 0 clamp(12px, 1.8vw, 35px) 0 clamp(18px, 3vw, 57px);
	}

	.eup-hd3 .eup-hd__nav.eup-hd3__nav {
		align-items: center;
		align-self: stretch;
		background: none;
		display: flex;
		flex-direction: row;
		flex: 1 1 auto;
		gap: 16px;
		min-width: 0;
	}

	.eup-hd3 .eup-hd3__menu {
		align-items: stretch;
		display: flex;
		flex: 0 0 auto;
		gap: clamp(14px, 2.9vw, 56px);
		height: auto;
		margin: 0;
	}

	.eup-hd3 .eup-hd__item {
		display: flex;
		position: static;
	}

	.eup-hd3 .eup-hd__top {
		font-size: var(--eup3-hd-menu);
		gap: 0;
		height: auto;
		letter-spacing: 0.005em;
		min-height: var(--eup3-hd-pill);
		padding: 0;
	}

	/* Under the label, inside the pill: a 1 px ink rule drawn in from the left on hover and
	   retracted to the right (Pebble's underline, as a scaleX transform: no repaint of the text),
	   and the 2 px accent rule while the SHOP panel is open. */
	.eup-hd3 .eup-hd__top {
		position: relative;
	}

	.eup-hd3 .eup-hd__top::after {
		background: currentColor;
		bottom: 22%;
		content: "";
		height: 1px;
		left: 0;
		position: absolute;
		right: 0;
		transform: scaleX(0);
		transform-origin: right center;
		transition: transform var(--eup3-dur-med, 0.35s) var(--eup3-ease-smooth, ease-out);
	}

	.eup-hd3 .eup-hd__top[aria-expanded="true"]::after {
		background: var(--eup3-accent);
		height: 2px;
		transform: none;
	}

	@media (hover: hover) and (pointer: fine) {
		.eup-hd3 .eup-hd__top:hover::after {
			transform: scaleX(1);
			transform-origin: left center;
		}
	}

	.eup-hd3 .eup-hd__chevron {
		border-width: 0 1.8px 1.8px 0;
		height: 0.36em;
		margin-left: 0.7em;
		width: 0.36em;
	}

	.eup-hd3 .eup-hd3__search {
		background: none;
		flex: 0 1 clamp(170px, 17vw, 330px);
		justify-self: auto;
		margin: 0 0 0 auto;
		max-width: none;
		min-width: 0;
		padding: 0;
	}

	.eup-hd3 .eup-hd3__search-field {
		background: none;
		font-size: clamp(14px, 0.8vw, 15px);
		height: 44px;
		order: 0;
		padding: 0 4px 0 0;
		text-align: right;
	}

	.eup-hd3 .eup-hd3__search-field::placeholder {
		color: var(--eup3-muted);
		font-size: clamp(11px, 0.78vw, 15px);
		font-weight: 400;
		letter-spacing: 0.02em;
		text-transform: uppercase;
	}

	.eup-hd3 .eup-hd3__search-field:focus::placeholder {
		color: var(--eup3-ink-soft);
	}

	.eup-hd3 .eup-hd3__search-submit {
		height: 44px;
		width: 44px;
	}


	.eup-hd3 .eup-hd3__drawer-links,
	.eup-hd3 .eup-hd3__search-open,
	.eup-hd3 .eup-hd3__burger {
		display: none;
	}

	.eup-hd3 .eup-hd__action--account,
	.eup-hd3 .eup-hd3__action--wishlist {
		display: flex;
	}

	/* --- the SHOP panel ------------------------------------------------- */

	.eup-hd3 .eup-hd__panel.eup-hd3__panel {
		background: var(--eup3-ground);
		border: 0;
		border-radius: var(--eup3-radius-panel);
		box-shadow: 0 24px 48px rgba(61, 57, 53, 0.14), 0 0 0 1px var(--eup3-line);
		left: var(--eup3-gutter);
		max-height: calc(100vh - 160px);
		overflow-y: auto;
		position: absolute;
		right: var(--eup3-gutter);
		top: calc(100% - var(--eup3-hd-pad) + 10px);
		z-index: 100;
	}

	.eup-hd3 .eup-hd3__panel-inner {
		padding: 28px clamp(24px, 2.5vw, 48px) 32px;
	}

	.eup-hd3 .eup-hd3__shop {
		align-items: start;
		column-gap: clamp(24px, 3vw, 56px);
		display: grid;
		grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
		grid-template-rows: auto auto auto auto 1fr;
	}

	.eup-hd3 .eup-hd3__section-btn {
		border: 0;
		border-radius: var(--eup3-radius-field);
		grid-column: 1;
		margin: 0 0 4px;
		padding: 0 16px;
	}

	.eup-hd3 .eup-hd3__section-btn:hover {
		background: var(--eup3-surface);
	}

	.eup-hd3 .eup-hd3__section-btn[aria-expanded="true"] {
		background: var(--eup3-pill);
		font-weight: 500;
	}

	.eup-hd3 .eup-hd3__section-chevron,
	.eup-hd3 .eup-hd3__section-btn[aria-expanded="true"] .eup-hd3__section-chevron {
		transform: rotate(-45deg);
	}

	.eup-hd3 .eup-hd3__row-1 { grid-row: 1; }
	.eup-hd3 .eup-hd3__row-2 { grid-row: 2; }
	.eup-hd3 .eup-hd3__row-3 { grid-row: 3; }
	.eup-hd3 .eup-hd3__row-4 { grid-row: 4; }
	.eup-hd3 .eup-hd3__row-5 { grid-row: 5; }

	.eup-hd3 .eup-hd3__section.eup-hd__panel-inner {
		background: none;
		grid-column: 2;
		grid-row: 1 / span 5;
		margin: 0;
		max-width: none;
		padding: 0;
	}

	.eup-hd3 .eup-hd3__section .eup-hd__panel-title {
		clip: auto;
		clip-path: none;
		color: var(--eup3-accent-text, var(--eup3-accent));
		font-family: var(--eup3-font);
		font-size: clamp(22px, 1.6vw, 30px);
		font-weight: 200;
		height: auto;
		margin: 4px 0 16px;
		overflow: visible;
		position: static;
		width: auto;
	}

	.eup-hd3 .eup-hd3__shop-links {
		border-top: 1px solid var(--eup3-line);
		grid-column: 1;
		margin-top: 12px;
		padding: 12px 0 0;
	}

	.eup-hd3 .eup-hd3__shop-link {
		min-height: 36px;
		padding: 0 16px;
	}
}

/* 1024-1279: the full placeholder, "WHAT ARE YOU LOOKING FOR?", needs 166 px at 11 px; the field had
   126-163 px. Tighter menu, pill and logo gaps give the search field 224 px (2026-09-30 follow-up;
   measured with search-fit.json in the research workspace). */
@media (min-width: 1024px) and (max-width: 1279.98px) {
	.eup-hd3 .eup-hd3__inner {
		gap: 20px;
	}

	.eup-hd3 .eup-hd3__pill {
		padding-left: 18px;
	}

	.eup-hd3 .eup-hd__nav.eup-hd3__nav {
		gap: 8px;
	}

	.eup-hd3 .eup-hd3__menu {
		gap: 16px;
	}

	.eup-hd3 .eup-hd3__search {
		flex-basis: 224px;
	}
}

/* -------------------------------------------------------------------------
 * Over the homepage hero (opt-in, see eupepsia_header_v3_overlay())
 * ---------------------------------------------------------------------- */

body.eup-hd3-overlay .eup-hd.eup-hd3 {
	background: transparent;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

body.eup-hd3-overlay.admin-bar .eup-hd.eup-hd3 {
	top: var(--wp-admin--admin-bar--height, 32px);
}

body.eup-hd3-overlay #wrapper {
	position: relative;
}

@media (prefers-reduced-motion: reduce) {
	.eup-hd3 .eup-hd__action,
	.eup-hd3 .eup-hd__top::after {
		transition: none;
	}
}

/* =========================================================================
 * Motion v3 (2026-10-01, `body.eup-motion-v3`, option eupepsia_motion_v3; SYSTEM-V3-PORT.md 10)
 *
 * Pebble (Wellina), measured 2026-09-30 and 2026-10-01 (research workspace
 * research/design/2026-10-01/motion-v3/): the header is pinned on every page in both scroll
 * directions ("always"); once the page has scrolled past the header it becomes a full-width bar
 * with square corners, a solid fill and a soft shadow, easing over 0.25 s.
 *
 * HOW, WITHOUT A LAYOUT JUMP
 *   - The bar (`.eup-hd3__bar`) is `position: fixed` from the first paint; the <header> keeps the
 *     drawn height (`--eup3-header-h`, logo + 2 x padding: 72 px at 390, 211 at 1920) as an empty
 *     reserve in the flow, so nothing below it moves when the bar shrinks.
 *   - Pinned (`.is-pinned`, set by header-v3.js from an IntersectionObserver on a marker as tall as
 *     the header, so it flips once the header height has scrolled by): smaller logo and padding,
 *     the pill's fill spread across the bar, shadow.
 *   - Homepage with the overlay option, 768 and up: the <header> takes no space, the bar starts
 *     transparent over the full-screen hero (the pill keeps its light fill), then pins the same
 *     way. Phones keep the header in the flow (white), as Pebble does below 768.
 *   - No transform, filter or will-change on the bar or the header: either would become the
 *     containing block of the fixed phone drawer inside it.
 *   - WordPress admin bar: the bar sits under it (`--wp-admin--admin-bar--height`, set by core);
 *     below 601 px the admin bar scrolls away, so the pinned bar goes to 0 there.
 * ========================================================================= */

:root {
	--eup3-hd-top: var(--wp-admin--admin-bar--height, 0px);
	--eup3-header-h: calc(clamp(52px, 6.8vw, 131px) + 2 * clamp(10px, 2.1vw, 40px));
	--eup3-hd-pinned-h: calc(clamp(44px, 3.34vw, 64px) + 2 * clamp(8px, 0.53vw, 10px));
}

/* Anchors and focused fields land below the pinned bar, not under it. */
html:has(> body.eup-motion-v3) {
	scroll-padding-top: calc(var(--eup3-hd-pinned-h) + var(--eup3-hd-top) + 16px);
}

body.eup-motion-v3 .eup-hd3-sentinel {
	height: var(--eup3-header-h);
	left: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	visibility: hidden;
	width: 1px;
}

body.eup-motion-v3 .eup-hd.eup-hd3 {
	min-height: var(--eup3-header-h);
}

body.eup-motion-v3 .eup-hd3 .eup-hd3__bar {
	background-color: var(--eup3-ground);
	box-shadow: 0 0 0 rgba(61, 57, 53, 0);
	left: 0;
	position: fixed;
	right: 0;
	top: var(--eup3-hd-top);
	transition:
		background-color var(--eup3-dur-fast, 0.25s) ease-in-out,
		box-shadow var(--eup3-dur-fast, 0.25s) ease-in-out;
	z-index: 1;
}

body.eup-motion-v3 .eup-hd3 .eup-hd3__inner {
	transition: padding var(--eup3-dur-fast, 0.25s) ease-in-out;
}

body.eup-motion-v3 .eup-hd3 .eup-hd__logo-img {
	transition: height var(--eup3-dur-fast, 0.25s) ease-in-out;
}

body.eup-motion-v3 .eup-hd3 .eup-hd3__pill,
body.eup-motion-v3 .eup-hd3 .eup-hd__top {
	transition: min-height var(--eup3-dur-fast, 0.25s) ease-in-out;
}

/* Pinned: Pebble's 70 px bar is 60 (390) to 84 px (1920) here; the logo stays at 44 px or more so
   the wordmark keeps its strokes (critique C-005). */
body.eup-motion-v3 .eup-hd.eup-hd3.is-pinned {
	--eup3-hd-logo: clamp(44px, 3.34vw, 64px);
	--eup3-hd-pad: clamp(8px, 0.53vw, 10px);
	--eup3-hd-pill: clamp(44px, 2.92vw, 56px);
}

body.eup-motion-v3 .eup-hd3.is-pinned .eup-hd3__bar {
	background-color: var(--eup3-pill);
	box-shadow: 0 4px 18px rgba(61, 57, 53, 0.1);
}

@media (max-width: 600px) {
	body.eup-motion-v3.admin-bar .eup-hd3.is-pinned .eup-hd3__bar {
		top: 0;
	}
}

/* The phone drawer is inside the fixed bar, so the bar is its stacking context: while the drawer is
   open the bar rises above header v2's scrim and dims itself, which looks as before. */
html.eup-hd-locked body.eup-motion-v3 .eup-hd3 .eup-hd3__bar {
	z-index: 115;
}

html.eup-hd-locked body.eup-motion-v3 .eup-hd3 .eup-hd3__bar::after {
	background: rgba(61, 57, 53, 0.45);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 110;
}

/* Over the homepage hero, 768 and up: no reserve, a transparent bar until pinned. */
@media (min-width: 768px) {
	body.eup-motion-v3.eup-hd3-overlay .eup-hd.eup-hd3 {
		min-height: 0;
	}

	body.eup-motion-v3.eup-hd3-overlay .eup-hd3:not(.is-pinned) .eup-hd3__bar {
		background-color: transparent;
	}
}

/* Phones: Pebble keeps the header in the flow below 768, and so does this, on the homepage too. */
@media (max-width: 767.98px) {
	body.eup-motion-v3.eup-hd3-overlay .eup-hd.eup-hd3 {
		background: var(--eup3-ground);
		position: relative;
		top: auto;
	}
}

/* Other sticky columns sit below the bar (product gallery, shop filters, brand letters, legal
   contents; their own offsets were 16-24 px from the top of the window). */
@media (min-width: 1024px) {
	body.eup-motion-v3 .eup-product-v3 .eup-pv3__media,
	body.eup-motion-v3 .eup-brandspage .eup-brands__rail,
	body.eup-motion-v3 .eup-legal .eup-legal__toc {
		top: calc(var(--eup3-hd-pinned-h) + var(--eup3-hd-top) + 24px);
	}

	body.eup-motion-v3 .eup-shop__rail {
		top: calc(var(--eup3-hd-pinned-h) + var(--eup3-hd-top) + 16px);
	}

	body.eup-motion-v3 .eup-legal .eup-legal__toc {
		max-height: calc(100vh - var(--eup3-hd-pinned-h) - var(--eup3-hd-top) - 48px);
	}
}

/* --- Mega menu (SHOP), 1024 and up: Pebble's slide ------------------------------------------
 * The panel slides down from under the bar: translateY(-100%) to 0 over 0.6 s cubic-bezier(.7,0,.2,1)
 * while a clip-path hides whatever is still above its resting top edge, so it reads as a sheet
 * coming out of the bar. The content fades in over 0.6 s cubic-bezier(.3,1,.3,1) after 100 ms.
 * Hover waits 100 ms before opening and 150 ms before closing (header-v3.js); keyboard Enter, Space
 * and Escape still go through header-v2.js (opens with the slide, closes at once).
 */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
	body.eup-motion-v3 .eup-hd3 .eup-hd3__panel:not([hidden]) {
		animation: eup3-panel-in 0.6s var(--eup3-ease-panel, cubic-bezier(0.7, 0, 0.2, 1)) both;
	}

	body.eup-motion-v3 .eup-hd3 .eup-hd3__panel:not([hidden]) .eup-hd3__panel-inner {
		animation: eup3-fade-in 0.6s var(--eup3-ease-smooth, cubic-bezier(0.3, 1, 0.3, 1)) 0.1s both;
	}

	body.eup-motion-v3 .eup-hd3 .eup-hd3__panel.is-closing {
		animation: eup3-panel-out 0.45s var(--eup3-ease-panel, cubic-bezier(0.7, 0, 0.2, 1)) both;
		pointer-events: none;
	}
}

@keyframes eup3-panel-in {
	from {
		clip-path: inset(100% -80px -100px -80px);
		transform: translateY(-100%);
	}

	to {
		clip-path: inset(-2px -80px -100px -80px);
		transform: none;
	}
}

@keyframes eup3-panel-out {
	from {
		clip-path: inset(-2px -80px -100px -80px);
		transform: none;
	}

	to {
		clip-path: inset(100% -80px -100px -80px);
		transform: translateY(-100%);
	}
}

@keyframes eup3-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* --- Phone drawer: Pebble's 0.5 s panel easing; the scrim fades in -------------------------- */
@media (max-width: 1023.98px) and (prefers-reduced-motion: no-preference) {
	body.eup-motion-v3 .eup-hd3 .eup-hd__nav {
		transition: transform 0.5s var(--eup3-ease-panel, cubic-bezier(0.7, 0, 0.2, 1)), visibility 0s linear 0.5s;
	}

	body.eup-motion-v3 .eup-hd3 .eup-hd__nav.is-open {
		transition: transform 0.5s var(--eup3-ease-panel, cubic-bezier(0.7, 0, 0.2, 1)), visibility 0s;
	}

	body.eup-motion-v3 .eup-hd3 .eup-hd__scrim:not([hidden]) {
		animation: eup3-fade-in 0.5s ease-in-out both;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.eup-motion-v3 .eup-hd3 .eup-hd3__bar,
	body.eup-motion-v3 .eup-hd3 .eup-hd3__inner,
	body.eup-motion-v3 .eup-hd3 .eup-hd__logo-img,
	body.eup-motion-v3 .eup-hd3 .eup-hd3__pill,
	body.eup-motion-v3 .eup-hd3 .eup-hd__top {
		transition: none;
	}
}