/**
 * Header v4 (HEADER-V4-PORT.md, 2026-10-05). Loaded after header-v3.css only while
 * `eupepsia_header_v4` is on; every rule is scoped to `.eup-hd4` (the header root).
 *
 *   Phone and tablet (< 1024): the drawer opens on the routes list (.eup-hd4__routes); the menu
 *   bar's list (.eup-hd4__menu) is not shown there.
 *   Desktop (>= 1024): the menu bar shows SHOP, BRANDS (link + chevron button), THE EUPEPSIA
 *   STANDARD, BODY MAP; the routes list is not shown. The BRANDS panel uses header v3's panel box.
 *   1024-1279: a 15 px menu, 10 px gaps and a 214 px search field keep the four items, the field
 *   and the full placeholder on one line (measured on staging, 2026-10-05, with a classic 15 px
 *   scrollbar: v3 left 99 px spare at 1024; v4's two longer items need about 135 px more).
 */

/* -------------------------------------------------------------------------
 * Phone drawer: the routes
 * ---------------------------------------------------------------------- */

@media (max-width: 1023.98px) {
	.eup-hd4 .eup-hd4__menu {
		display: none;
	}
}

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

.eup-hd4 .eup-hd4__route {
	margin: 0;
}

.eup-hd4 .eup-hd4__route-btn,
.eup-hd4 .eup-hd4__route-link {
	border-top: 1px solid var(--eup3-line, #e4ded9);
	color: var(--eup3-ink, #3d3935);
	font-size: 15px;
	font-weight: 500;
	min-height: 48px;
	padding: 0 var(--eup-gutter, 20px);
}

.eup-hd4 .eup-hd4__route:last-child .eup-hd4__route-link {
	border-bottom: 1px solid var(--eup3-line, #e4ded9);
}

.eup-hd4 .eup-hd4__route-panel {
	padding: 4px var(--eup-gutter, 20px) 16px;
}

.eup-hd4 .eup-hd4__route-panel[hidden] {
	display: none;
}

.eup-hd4 .eup-hd4__route-btn:focus-visible,
.eup-hd4 .eup-hd4__route-link:focus-visible {
	outline: 3px solid var(--eup3-focus, #00857a);
	outline-offset: -3px;
}

/* Season section (SHOP panel on desktop, accordion on the phone). */
.eup-hd4 .eup-hd4__season-name {
	color: var(--eup3-ink, #3d3935);
	font-size: 15px;
	font-weight: 500;
	margin: 4px 0 2px;
}

.eup-hd4 .eup-hd4__season-line {
	color: var(--eup3-ink-soft, #6b625b);
	font-size: 14px;
	margin: 0 0 12px;
}

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

/* -------------------------------------------------------------------------
 * Desktop
 * ---------------------------------------------------------------------- */

@media (min-width: 1024px) {
	.eup-hd4 .eup-hd4__routes {
		display: none;
	}

	/* BRANDS: the link, then the chevron button that discloses the panel. */
	.eup-hd4 .eup-hd4__item--brands {
		align-items: center;
	}

	.eup-hd4 .eup-hd4__disclose {
		align-items: center;
		align-self: stretch;
		background: none;
		border: 0;
		border-radius: 6px;
		box-shadow: none;
		color: var(--eup3-ink, #3d3935);
		cursor: pointer;
		display: flex;
		font-size: var(--eup3-hd-menu, 16px);
		justify-content: center;
		line-height: 1;
		margin: 0;
		min-height: 44px;
		min-width: 24px;
		padding: 0 4px;
		text-transform: none;
	}

	.eup-hd4 .eup-hd4__disclose .eup-hd__chevron {
		border-width: 0 1.8px 1.8px 0;
		height: 0.36em;
		margin: 0;
		width: 0.36em;
	}

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

	.eup-hd4 .eup-hd4__disclose:focus-visible {
		outline: 3px solid var(--eup3-focus, #00857a);
		outline-offset: 0;
	}

	.eup-hd4 .eup-hd4__item--brands:has(.eup-hd4__disclose[aria-expanded="true"]) .eup-hd__top::after {
		background: var(--eup3-accent, #00ccb8);
		height: 2px;
		transform: none;
	}

	/* The BRANDS panel (2026-10-05): header v2's A-Z partial (title and "Find a brand" on one row,
	   six balanced letter-range columns, header-v2.css) inside the v3 panel box; the title takes the
	   v3 section-title style. */
	.eup-hd4 .eup-hd4__brands .eup-hd__panel-title {
		clip: auto;
		clip-path: none;
		color: var(--eup3-accent-text, var(--eup3-accent, #00ccb8));
		font-family: var(--eup3-font, "Poppins", sans-serif);
		font-size: clamp(22px, 1.6vw, 30px);
		font-weight: 200;
		height: auto;
		margin: 0;
		overflow: visible;
		position: static;
		width: auto;
	}

	.eup-hd4 .eup-hd4__brands .eup-hd__panel-foot {
		border-top: 1px solid var(--eup3-line, #e4ded9);
		margin: 16px 0 0;
		padding: 12px 0 0;
	}

	.eup-hd4 .eup-hd4__brands .eup-hd__panel-all {
		color: var(--eup3-ink, #3d3935);
		font-weight: 500;
		text-decoration: underline;
		text-decoration-color: var(--eup3-accent, #00ccb8);
		text-underline-offset: 4px;
	}

	.eup-hd4 .eup-hd4__season-list {
		column-gap: clamp(24px, 3vw, 56px);
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) and (max-width: 1279.98px) {
	.eup-hd4 .eup-hd3__menu {
		gap: 10px;
	}

	.eup-hd4 .eup-hd__top {
		font-size: 15px;
	}

	.eup-hd4 .eup-hd3__search {
		flex-basis: 214px;
	}
}

/* 1600 and up: v3's menu gap grows to 56 px while the type grows too, and the search field
   shrank to 267 px at 1920 (placeholder cut, 225 of 219 px). A smaller gap gives it back. */
@media (min-width: 1600px) {
	.eup-hd4 .eup-hd3__menu {
		gap: clamp(14px, 2.2vw, 44px);
	}
}

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