/*
 * FLEXD — storefront components
 * ---------------------------------------------------------------------------
 * Values measured off the Figma frames (Home / Desktop / 1440):
 *   Note ticker  31:4   1440x34   fill Inverse Surface
 *   Header       31:6   1440x96   fill Inverse Surface
 *   divider      59:16  1440x1    fill Outline Variant
 *   09 Footer    40:2   1440x620
 *
 * Light mode only (DECISIONS.md #13). The footer is BLACK rather than the
 * paper of the Figma frame — an owner override for visual contrast, so the
 * page is bookended by the two dark bands (DECISIONS.md #14).
 */

/* ===========================================================================
   Masthead — ticker + header. Black band on every page (CLAUDE.md rule 6).
   =========================================================================== */

.masthead {
	position: relative;
	background: var(--color-inverse-surface);
	color: var(--color-inverse-on-surface);
}

/* --- Note ticker: the perfumer's-bench material feed. The one "delight"
   element — deliberately subtle. ----------------------------------------- */

.ticker {
	height: 34px;
	display: flex;
	align-items: center;
	overflow: hidden;
	white-space: nowrap;
}

.ticker__track {
	display: flex;
	flex: none;
	gap: 0;
	animation: flexd-ticker 90s linear infinite;
}

.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track {
	animation-play-state: paused;
}

/* Two identical runs sit side by side; translating by exactly -50% puts the
   second run where the first started, so the loop is seamless. */
.ticker__run {
	flex: none;
	padding-inline-end: 3em;
	font-weight: 500;
	font-size: 10.5px;
	line-height: 13px;
	letter-spacing: 2.4px;
	color: var(--color-outline);
}

@keyframes flexd-ticker {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.ticker__track {
		animation: none;
	}
	.ticker {
		overflow-x: auto;
	}
}

/* --- Header --------------------------------------------------------------- */

.site-header {
	min-height: 96px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
}

.site-header__logo {
	display: block;
	flex: none;
	line-height: 0;
}

.site-header__logo img,
.site-header__logo svg {
	display: block;
	width: 150px;
	height: auto;
}

/* 1px hairline under the header (Figma 59:16). */
.masthead__divider {
	height: 1px;
	background: var(--color-outline-variant);
}

/* --- Nav: lime labels, 44px apart, active item carries a lime dot. -------- */

.nav {
	display: flex;
	align-items: center;
	gap: 44px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-weight: 500;
	font-size: 12px;
	line-height: 15px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-primary);
	white-space: nowrap;
}

/* An underline that draws in from the left on hover instead of just appearing. */
.nav__link {
	background-image: linear-gradient( currentColor, currentColor );
	background-size: 0% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 200ms ease;
}

.nav__link:hover {
	background-size: 100% 1px;
}

/* The active-nav dot — a sanctioned use of the accent (CLAUDE.md rule 2). */
.nav__link[aria-current]::before {
	content: "";
	width: 6px;
	height: 6px;
	flex: none;
	border-radius: var(--radius-full);
	background: var(--color-primary);
}

/* Shop / Collection / About — one nested list, laid out inline on desktop. */
.nav__item--group {
	display: flex;
}

.nav__panel {
	display: flex;
	align-items: center;
	gap: 44px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav__toggle {
	border: 0;
	background: transparent;
	padding: 0;
	cursor: pointer;
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--color-primary);
}

/* Hide the whole <li>, not just the button — a display:none child still leaves
   its list item participating in the flex gap, which opened a phantom 44px
   space between ABOUT and BAG on desktop. The MENU button also does nothing
   without JS, so it only appears once the .js class is set (see header.php). */
.nav__item--menu {
	display: none;
}

/* Mobile: the full nav collapses to MENU + BAG (DESIGN_SYSTEM.md 6). */
@media (max-width: 599px) {
	.site-header {
		min-height: 64px;
	}

	.site-header__logo img,
	.site-header__logo svg {
		width: 100px;
	}

	.nav {
		gap: var(--space-5);
	}

	.js .nav__item--menu {
		display: block;
	}

	/* The group's own <li> box would otherwise sit in the flex row and add a
	   phantom gap; only the absolutely-positioned panel should remain. */
	.nav__item--group {
		display: contents;
	}

	/*
	 * The dropdown drops below the whole masthead (past the 1px divider) and
	 * runs full-bleed. Without JS it just stays open as a stacked list, so the
	 * links are never trapped behind a button that cannot toggle.
	 */
	.nav__panel {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 30;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: var(--space-2) var(--gutter) var(--space-4);
		background: var(--color-inverse-surface);
		border-block: 1px solid var(--color-outline-variant);
	}

	.js .nav__panel {
		display: none;
	}

	.js .nav__panel[data-open] {
		display: flex;
	}

	.nav__panel .nav__link {
		display: block;
		padding: 15px 0;
		font-size: 13px;
		background-image: none;
	}
}

/* ===========================================================================
   Footer — black band, four link columns, legal line, cropped wordmark.
   =========================================================================== */

.site-footer {
	background: var(--color-inverse-surface);
	color: var(--color-inverse-on-surface);
	padding-top: 64px;
}

/* Figma column origins on the 1440 frame: 96 / 396 / 696 / 1044, widths
   240/240/240/300. The gaps are NOT uniform — 60, 60, then 108 — because the
   first three columns pack from the left while CONNECT is pinned to the right
   gutter. `margin-inline-start: auto` on the last column reproduces that;
   grid space-between would have spread the slack across all three gaps. */
.site-footer__cols {
	display: flex;
	gap: 60px;
	padding-bottom: var(--space-8);
}

.site-footer__col {
	flex: 0 0 240px;
}

.site-footer__col:last-child {
	flex-basis: 300px;
	margin-inline-start: auto;
}

.site-footer__heading {
	margin: 0 0 34px;
	font-weight: 500;
	font-size: 11px;
	line-height: 14px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--color-outline);
}

/* Type goes on the list, not the anchor: an <li> otherwise keeps the body's
   24px line-height, which turned Figma's 30px link rhythm into 38px. */
.site-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 14px;
	font-size: 13px;
	line-height: 16px;
	letter-spacing: 0.2px;
}

.site-footer__list a {
	text-decoration: none;
	color: var(--color-inverse-on-surface);
}

.site-footer__list a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.site-footer__legal {
	border-top: 1px solid rgba(240, 241, 240, 0.24);
	padding-block: var(--space-5);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3) var(--space-8);
	font-weight: 500;
	font-size: 11px;
	line-height: 14px;
	letter-spacing: 1.4px;
	color: var(--color-outline-variant);
}

/* The inspired-by disclaimer (CLAUDE.md rule 10). Rendered once per page in
   footer.php, immediately above the footer: block centred on the page and the
   lines centred within it. */
.disclaimer {
	max-width: 68ch;
	margin-inline: auto;
	padding-block: var(--space-8);
	text-align: center;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.4px;
	color: var(--color-outline);
}

/* --- The oversized `flexd` wordmark, cropped by the footer's bottom edge.
   Figma: 340px Thin, tracking -14px, starting 22px left of the gutter, with
   roughly the lower 40% of the line clipped away. ------------------------- */

.site-footer__wordmark {
	overflow: hidden;
	/* keeps the same crop ratio as the Figma frame at any size */
	height: clamp(3.75rem, 1rem + 13.7vw, 12.5rem);
	margin-inline-start: -0.065em;
}

.site-footer__wordmark span {
	display: block;
	font-family: var(--font-display);
	font-weight: 100;
	font-variation-settings: "wght" 100;
	font-size: clamp(6.375rem, 1rem + 23.6vw, 21.25rem);
	line-height: 1;
	letter-spacing: -0.041em;
	text-transform: lowercase;
	color: var(--color-inverse-on-surface);
	user-select: none;
}

/* Below the 1440 frame the fixed 240/240/240/300 columns + 96px gutters add up
   to more than the content width (they overshoot by ~16px at 1280), so fall
   back to an even grid everywhere under the frame width. */
@media (max-width: 1439px) {
	.site-footer__cols {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--space-6);
	}

	.site-footer__col,
	.site-footer__col:last-child {
		flex-basis: auto;
		margin-inline-start: 0;
	}
}

@media (max-width: 899px) {
	.site-footer__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-8) var(--space-6);
	}
}

@media (max-width: 479px) {
	.site-footer__cols {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ===========================================================================
   PLP — title, filter bar, contact-sheet grid, pager.
   Figma: PLP / Desktop / 1440 (51:3).
   =========================================================================== */

/* --- Title block. Figma 51:15: padding 56/96/48/82, 18px vertical gaps. ---
   The heading sits 14px left of the gutter — optical compensation for the
   giant hairline glyph, the same trick as the footer wordmark. */

.plp-title {
	padding-top: 56px;
	padding-bottom: 48px;
}

.plp-title__eyebrow {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	margin: 0 0 18px;
	font-weight: 500;
	font-size: 12px;
	line-height: 15px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--color-on-surface-variant);
}

.plp-title__heading {
	margin: 0 0 18px;
	margin-inline-start: -0.093em;
	font-size: clamp(3.5rem, 0.5rem + 9.4vw, 9.375rem);
	line-height: 1;
	letter-spacing: -0.04em;
}

.plp-title__sub {
	margin: 0;
	font-size: 14px;
	line-height: 18px;
	letter-spacing: 0.3px;
	color: var(--color-on-surface-variant);
}

/* --- Filter bar. Figma 51:22: 60px tall, pills left, tools right. --------
   Only the ACTIVE category is a lime chip; the rest are plain tracked caps
   with no border or outline. */

.plp-filter__inner {
	min-height: 60px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
}

.plp-filter__cats {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 26px;
}

.plp-filter__cat {
	font-weight: 500;
	font-size: 11px;
	line-height: 14px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-on-surface-variant);
	white-space: nowrap;
}

.plp-filter__cat:hover {
	color: var(--color-on-surface);
}

.plp-filter__cat--active {
	padding: 8px 16px;
	border-radius: var(--radius-full);
	background: var(--color-primary);
	color: var(--color-on-primary);
}

.plp-filter__cat--active:hover {
	color: var(--color-on-primary);
}

.plp-filter__tools {
	display: flex;
	align-items: center;
	gap: 32px;
}

.plp-filter__sort {
	font-weight: 500;
	font-size: 11px;
	line-height: 14px;
	letter-spacing: 1.4px;
	color: var(--color-on-surface);
	white-space: nowrap;
}

/* Density toggle: four 3x14 bars, 6px apart, the last one active. */
.plp-filter__density {
	display: flex;
	gap: 6px;
}

.plp-filter__density i {
	width: 3px;
	height: 14px;
	background: var(--color-outline);
}

.plp-filter__density i.is-on {
	background: var(--color-on-surface);
}

/* --- Contact-sheet grid: edge to edge, ZERO gutter, 1px hairlines. -------
   The 1px grid gap shows the container's background through as the hairline,
   which keeps the cells themselves borderless. */

.grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	background: var(--color-outline-variant);
	border-block: 1px solid var(--color-outline-variant);
}

/* --- Card. Figma cell 360x593: img 360x480, cap 113. ------------------- */

.card {
	display: flex;
	flex-direction: column;
	background: var(--color-surface);
}

.card__media {
	position: relative;
	aspect-ratio: 360 / 480;
	background: var(--color-surface-container-highest);
}

.card__media--dark {
	background: var(--color-inverse-surface);
}

.card__media-link {
	position: absolute;
	inset: 0;
}

.card__tag {
	position: absolute;
	left: 16px;
	bottom: 16px;
	font-weight: 500;
	font-size: 9.5px;
	line-height: 12px;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: var(--color-on-surface-variant);
	pointer-events: none;
}

.card__media--dark .card__tag {
	color: var(--color-inverse-on-surface);
}

/* Lime quick-add: 40x40, full radius, 16px in from the bottom-right. */
.card__add {
	position: absolute;
	right: 16px;
	bottom: 16px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-full);
	background: var(--color-primary);
	color: var(--color-on-primary);
	font-size: 20px;
	line-height: 1;
	text-decoration: none;
	opacity: 0;
	transition: opacity 120ms ease;
}

/* Revealed on hover, but always visible for touch and keyboard users. */
.card:hover .card__add,
.card__add:focus-visible {
	opacity: 1;
}

@media (hover: none) {
	.card__add {
		opacity: 1;
	}
}

.card__cap {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 18px 22px;
}

.card__name {
	font-weight: 500;
	font-size: 12.5px;
	line-height: 16px;
	letter-spacing: 1px;
	text-decoration: none;
	color: var(--color-on-surface);
}

.card__spirit {
	margin: 0;
	font-size: 11px;
	line-height: 14px;
	color: var(--color-on-surface-variant);
}

.card__meta {
	margin: 0;
	display: flex;
	gap: 8px;
	font-size: 10.5px;
	line-height: 13px;
	color: var(--color-on-surface-variant);
}

.card__price {
	margin: 0;
	font-weight: 500;
	font-size: 11px;
	line-height: 14px;
	letter-spacing: 1px;
	color: var(--color-on-surface);
}

.card__price .amount {
	font-weight: 500;
}

/* --- Pager. Figma 54:43: 96px tall. ------------------------------------- */

.plp-pager__inner {
	min-height: 96px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 1.4px;
	color: var(--color-on-surface-variant);
}

.plp-pager__more--end {
	color: var(--color-outline);
}

.plp-empty {
	padding-block: var(--space-10);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-5);
}

@media (max-width: 899px) {
	.grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.plp-filter__inner {
		flex-wrap: wrap;
	}

	.plp-filter__tools {
		display: none;
	}

	.plp-pager__inner {
		flex-wrap: wrap;
		gap: var(--space-3);
	}
}

/* --- Combo offers. Figma 153:2 — label at y40, rule at y66, four columns
   324px apart starting y102, caption at y196. --------------------------- */

.combos {
	padding-top: 40px;
	padding-bottom: 26px;
	background: var(--color-surface);
}

.combos__label {
	margin: 0 0 14px;
	font-weight: 500;
	font-size: 9.5px;
	line-height: 12px;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: var(--color-on-surface);
}

/* Figma spaces these columns exactly 324px apart (96 / 420 / 744 / 1068), which
   is not the same as four equal fractions of the content width. */
.combos__grid {
	display: grid;
	grid-template-columns: repeat(4, 324px);
	justify-content: start;
	gap: 0;
	padding-top: 35px;
}

@media (max-width: 1439px) {
	.combos__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--space-5);
	}
}

.combos__item p {
	margin: 0;
}

.combos__title {
	font-weight: 500;
	font-size: 9.5px;
	line-height: 12px;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: var(--color-on-surface);
}

.combos__price {
	margin-top: 10px !important;
	font-weight: 500;
	font-size: 12.5px;
	line-height: 16px;
	letter-spacing: 1px;
	color: var(--color-on-surface);
}

.combos__note {
	margin-top: 18px !important;
	font-size: 11px;
	line-height: 14px;
	color: var(--color-on-surface-variant);
}

.combos__caption {
	margin: 24px 0 0;
	font-size: 11px;
	line-height: 14px;
	color: var(--color-on-surface-variant);
}

/* Figma's LOAD MORE is a sharp outline button, 142x41, padding 13/22/13/24. */
.plp-pager__more {
	padding: 13px 22px 13px 24px;
	gap: 10px;
	font-size: 11px;
	letter-spacing: 1.4px;
}

@media (max-width: 899px) {
	.combos__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-6) var(--space-5);
	}
}

/* ===========================================================================
   PDP. Figma: PDP / Desktop / 1440 (70:3), buy column 70:39.
   =========================================================================== */

.breadcrumb__inner {
	min-height: 52px;
	display: flex;
	align-items: center;
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--color-on-surface-variant);
}

.breadcrumb a {
	text-decoration: none;
	color: inherit;
}

/* Hero split: gallery 840 / buy column 600 on the 1440 frame. */
.pdp {
	display: grid;
	grid-template-columns: 840fr 600fr;
	border-top: 1px solid var(--color-outline-variant);
}

.pdp__gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--color-outline-variant);
}

.pdp__shot {
	background: var(--color-surface-container-highest);
	aspect-ratio: 1 / 1;
}

.pdp__shot--dark {
	background: var(--color-inverse-surface);
}

.pdp__shot--tall {
	grid-column: 1 / -1;
	aspect-ratio: 840 / 780;
}

/* Buy column: Figma padding 56/96/64/64, content capped at 440. */
.pdp__buy {
	padding: 56px 96px 64px 64px;
	background: var(--color-surface);
}

.pdp__buy > * {
	max-width: 440px;
}

.pdp__eyebrow {
	margin: 0 0 20px;
	font-weight: 500;
	font-size: 12px;
	line-height: 15px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--color-on-surface-variant);
}

.pdp__title {
	margin: 0 0 20px;
	font-size: clamp(2.75rem, 1rem + 3.2vw, 4.125rem);
	line-height: 1;
	letter-spacing: -0.038em;
}

.pdp__meta {
	margin: 0 0 20px;
	font-weight: 500;
	font-size: 11px;
	line-height: 14px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--color-on-surface-variant);
}

.pdp__desc {
	margin: 0 0 20px;
	font-weight: 300;
	font-size: 15px;
	line-height: 24px;
}

.pdp__desc p {
	margin: 0;
}

.pdp__rating {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 20px;
}

.stars {
	display: inline-flex;
	gap: 2px;
	font-size: 16px;
	line-height: 1;
	color: var(--color-outline-variant);
}

.star--on {
	color: var(--color-primary);
}

.pdp__rating-count {
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.1px;
	color: var(--color-on-surface-variant);
}

/* Figma 70:52 — 34px Light, tight negative tracking. */
.pdp__price {
	margin: 0 0 6px;
	font-weight: 300;
	font-size: 34px;
	line-height: 43px;
	letter-spacing: -0.5px;
	color: var(--color-on-surface);
}

.pdp__price-note {
	margin: 0 0 34px;
	font-size: 11px;
	line-height: 14px;
	letter-spacing: 0.3px;
	color: var(--color-on-surface-variant);
}

.pdp__size-label {
	margin: 0 0 20px;
	font-weight: 500;
	font-size: 11px;
	line-height: 14px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--color-on-surface-variant);
}

/* Size selector: three 139x58 options, 12px apart. The 12px radius comes from
   the Figma component (71:12). It is a documented exception to CLAUDE.md rule 3
   (radius at the extremes only) — owner ruled for the frame, DECISIONS.md #15. */
.sizes {
	display: flex;
	gap: 12px;
	margin-bottom: 20px;
}

.size {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 10px 18px;
	border: 1px solid var(--color-outline-variant);
	border-radius: 12px;
	background: var(--color-surface);
	cursor: pointer;
	text-align: center;
}

.size input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.size__name {
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0.1px;
	color: var(--color-on-surface);
}

.size__price {
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.4px;
	color: var(--color-on-surface-variant);
}

.size--on {
	border-color: transparent;
	background: var(--color-primary-container);
}

.size--on .size__name,
.size--on .size__price {
	color: var(--color-on-primary-container);
}

.size:focus-within {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* Sold-out size: struck through and disabled (DESIGN_SYSTEM.md 7). */
.size--out {
	opacity: 0.38;
	cursor: not-allowed;
	background:
		linear-gradient(to top right, transparent calc(50% - 1px), var(--color-outline) 50%, transparent calc(50% + 1px));
}

.pdp__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 20px;
}

.qty {
	display: inline-flex;
	align-items: center;
	flex: none;
	width: 112px;
	height: 40px;
	border: 1px solid var(--color-outline-variant);
	border-radius: var(--radius-full);
	overflow: hidden;
}

.qty__btn {
	width: 40px;
	height: 100%;
	border: 0;
	background: transparent;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	color: var(--color-on-surface);
}

.qty__value {
	width: 32px;
	height: 100%;
	border: 0;
	background: transparent;
	text-align: center;
	font-size: 14px;
	-moz-appearance: textfield;
	appearance: textfield;
}

.qty__value::-webkit-outer-spin-button,
.qty__value::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Figma 71:31 — 312x56 sharp lime. */
.pdp__add {
	flex: 1 1 auto;
	min-height: 56px;
	padding-inline: var(--space-5);
}

.pdp__cod {
	width: 100%;
	min-height: 54px;
	margin-bottom: 20px;
}

.pdp__soldout {
	margin: 0 0 20px;
	font-size: 13px;
	line-height: 20px;
	color: var(--color-on-surface-variant);
}

.pdp__trust {
	margin: 0 0 16px;
	font-size: 11px;
	line-height: 14px;
	letter-spacing: 0.3px;
	color: var(--color-on-surface-variant);
}

/* --- Accordions. Figma 71:37: 56px rows, 1px rules, +/- markers. -------- */

.acc {
	border-top: 1px solid var(--color-outline-variant);
}

.acc__row {
	border-bottom: 1px solid var(--color-outline-variant);
}

.acc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 56px;
	cursor: pointer;
	list-style: none;
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--color-on-surface);
}

.acc__head::-webkit-details-marker {
	display: none;
}

.acc__head::after {
	content: "+";
	font-size: 16px;
	font-weight: 400;
	line-height: 20px;
}

/* Open state: the "+" rotates to an "×" (see the Microinteractions block).
   With motion disabled the rotation is instant, so the mark still changes. */
.acc__row[open] > .acc__head::after {
	content: "+";
}

.acc__body {
	padding-bottom: 24px;
}

.acc__text {
	margin: 0;
	font-size: 13px;
	line-height: 20px;
	color: var(--color-on-surface-variant);
}

/* Scent notes: Top / Heart / Base rows of pill chips (Figma 29:24). */
.notes + .notes {
	margin-top: 16px;
}

.notes__stage {
	margin: 0 0 8px;
	font-weight: 500;
	font-size: 10.5px;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: var(--color-outline);
}

.notes__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

@media (max-width: 899px) {
	.pdp {
		grid-template-columns: minmax(0, 1fr);
	}

	.pdp__buy {
		padding: var(--space-8) var(--gutter);
	}

	.pdp__buy > * {
		max-width: none;
	}
}

/* ===========================================================================
   PDP sections 01–03.
   =========================================================================== */

.breadcrumb__inner {
	justify-content: space-between;
}

.breadcrumb__nav {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	color: var(--color-on-surface);
}

.breadcrumb__nav a {
	text-decoration: none;
}

.breadcrumb__nav a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- 01 Sillage collision band. Figma 72:50, 1440x720. -------------------
   Absolutely composed: the word "sillage" is split so "sil" sits on paper in
   dark ink and "lage" lands on the dark photo block in light ink (CLAUDE.md
   rule 9). Positions are percentages of the 1440 frame so the composition
   holds together as it scales. */

.collide {
	position: relative;
	aspect-ratio: 1440 / 720;
	background: var(--color-surface);
	border-top: 1px solid var(--color-outline-variant);
}

.collide__eyebrow {
	position: absolute;
	top: 8.9%;
	left: 6.67%;
	display: flex;
	gap: 29px;
	margin: 0;
	font-weight: 500;
	font-size: 12px;
	line-height: 15px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--color-on-surface-variant);
}

/* 640x520 at x560 y110 on the 1440x720 frame. */
.collide__photo {
	position: absolute;
	left: 38.89%;
	top: 15.28%;
	width: 44.44%;
	height: 72.22%;
	background: var(--color-inverse-surface);
}

.collide__fig {
	position: absolute;
	left: 24px;
	bottom: 21px;
	font-weight: 500;
	font-size: 10px;
	line-height: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--color-inverse-on-surface);
}

.collide__word {
	position: absolute;
	top: 34.7%;
	font-family: var(--font-display);
	font-weight: 100;
	font-variation-settings: "wght" 100;
	font-size: min(11.8vw, 170px);
	line-height: 1;
	letter-spacing: -0.035em;
	user-select: none;
}

.collide__word--paper {
	left: 6.11%;
	color: var(--color-on-surface);
}

/* Sits over the dark photo block, so it inverts. */
.collide__word--dark {
	left: 39.58%;
	color: var(--color-inverse-on-surface);
}

.collide__body {
	position: absolute;
	left: 6.11%;
	top: 65.3%;
	width: 29.86%;
	margin: 0;
	font-weight: 300;
	font-size: min(1.18vw, 17px);
	line-height: 1.55;
	color: var(--color-on-surface);
}

/* --- 02 Reviews. Figma 72:58, padding 64/96/88/96. ---------------------- */

.reviews {
	padding-top: 64px;
	padding-bottom: 88px;
	background: var(--color-surface);
}

.reviews__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	margin-bottom: 32px;
}

.reviews__label {
	display: flex;
	gap: 40px;
	margin: 0;
}

.reviews__label,
.reviews__write,
.reviews__all {
	font-weight: 500;
	font-size: 12px;
	line-height: 15px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--color-on-surface-variant);
	text-decoration: none;
}

.reviews__write,
.reviews__all {
	color: var(--color-on-surface);
}

.reviews__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.review {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px;
	border: 1px solid var(--color-outline-variant);
	background: var(--color-surface);
}

.review__head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.review__avatar {
	width: 40px;
	height: 40px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-full);
	background: var(--color-surface-container-highest);
	font-weight: 500;
	font-size: 14px;
	text-transform: uppercase;
	color: var(--color-on-surface-variant);
}

.review__name {
	margin: 0;
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	color: var(--color-on-surface);
}

.review__meta {
	margin: 0;
	font-size: 11px;
	line-height: 14px;
	color: var(--color-outline);
}

.review__head .stars {
	margin-inline-start: auto;
}

.stars--sm {
	font-size: 13px;
}

.review__body {
	margin: 0;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0.25px;
	color: var(--color-on-surface-variant);
}

.reviews__all {
	display: inline-block;
	margin-top: 32px;
	cursor: pointer;
	list-style: none;
}

.reviews__all::-webkit-details-marker {
	display: none;
}

.reviews__all::after {
	content: " →";
}

.reviews__more[open] .reviews__all::after {
	content: " ↑";
}

.reviews__more[open] .reviews__all {
	margin-bottom: 24px;
}

.reviews__cards--rest {
	margin-top: 0;
}

.reviews__empty {
	margin: 0;
	font-size: 14px;
	line-height: 20px;
	color: var(--color-outline);
}

/* --- 03 Wears well with. Figma 73:85 — cells 360x550 (img 460, cap 90). -- */

.crossell {
	padding-top: 48px;
	background: var(--color-surface);
}

.crossell__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	padding-bottom: 28px;
}

.crossell__label {
	display: flex;
	gap: 40px;
	margin: 0;
}

.crossell__label,
.crossell__all {
	font-weight: 500;
	font-size: 12px;
	line-height: 15px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--color-on-surface-variant);
	text-decoration: none;
}

.crossell__all {
	color: var(--color-on-surface);
}

/* The cross-sell cell is shorter than the PLP cell: 460 media, 90 caption,
   and it drops the sizes/rating line. */
.card--compact .card__media {
	aspect-ratio: 360 / 460;
}

.card--compact .card__cap {
	gap: 5px;
	padding: 16px 18px 20px;
}

@media (max-width: 899px) {
	/*
	 * The collision survives on mobile — it is the signature motif (CLAUDE.md
	 * rule 9) and Figma 75:3 / 46:2 keep it: the dark block bleeds off the right
	 * edge and the second half of the word lands on it in light ink. Only the
	 * geometry changes. Eyebrow and body return to normal flow; the block and
	 * the two word halves share one grid area so they still overlap.
	 */
	/*
	 * Three columns: the gutter, the paper half of the word (auto — exactly as
	 * wide as the word is), then the rest. Putting the two halves in adjacent
	 * auto/1fr columns keeps them a single continuous word whatever the words
	 * are ("sil|lage", "worn|close", "un|diluted"), which absolute lefts could
	 * not do. The block spans the whole row underneath and the words paint over
	 * it, so the second half ghosts on paper and turns solid on the dark.
	 */
	.collide {
		aspect-ratio: auto;
		display: grid;
		grid-template-columns: var(--gutter) auto minmax(0, 1fr);
		gap: var(--space-6) 0;
		padding-block: var(--space-8);
	}

	.collide__eyebrow,
	.collide__body {
		position: static;
		width: auto;
		grid-column: 2 / -1;
		margin-right: var(--gutter);
	}

	.collide__eyebrow {
		grid-row: 1;
		gap: 20px;
	}

	.collide__body {
		grid-row: 3;
		font-size: 15px;
	}

	/* 240x300 at x150 on the 390 frame, running off the right edge. */
	.collide__photo,
	.collide--proposition .collide__photo {
		position: relative;
		grid-row: 2;
		grid-column: 1 / -1;
		left: auto;
		top: auto;
		width: 61.54%;
		height: auto;
		aspect-ratio: 240 / 300;
		margin-left: 38.46%;
	}

	.collide__fig {
		left: 16px;
		bottom: 16px;
	}

	.collide__word {
		position: relative;
		grid-row: 2;
		top: auto;
		left: auto;
		align-self: center;
		justify-self: start;
		font-size: 17vw;
	}

	.collide__word--paper {
		grid-column: 2;
	}

	.collide__word--dark {
		grid-column: 3;
	}

	.reviews__cards {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ===========================================================================
   Cart. Figma: Cart / Desktop / 1440 — Title 79:29, Columns 79:34,
   Empty state 80:151.
   =========================================================================== */

.cart-title {
	padding-top: 52px;
	padding-bottom: 40px;
}

.cart-title__eyebrow {
	display: flex;
	flex-wrap: wrap;
	gap: 36px;
	margin: 0 0 14px;
	font-weight: 500;
	font-size: 12px;
	line-height: 15px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--color-on-surface-variant);
}

.cart-title__heading {
	margin: 0;
	margin-inline-start: -0.09em;
	font-size: clamp(3rem, 0.5rem + 8.3vw, 8.25rem);
	line-height: 1;
	letter-spacing: -0.038em;
}

/* Columns: 744 line items + 440 summary, 64px apart (Figma 79:34). */
.cart-cols {
	display: grid;
	grid-template-columns: minmax(0, 744fr) 440fr;
	gap: 64px;
	padding-bottom: 96px;
}

.cart-items__head {
	display: flex;
	justify-content: space-between;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--color-outline-variant);
	font-weight: 500;
	font-size: 10.5px;
	line-height: 13px;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: var(--color-on-surface-variant);
}

/* Line item 744x132, padding 16 vertical, 16px gaps. */
.line {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding-block: 16px;
	border-bottom: 1px solid var(--color-outline-variant);
}

.line__thumb {
	flex: none;
	width: 72px;
	height: 90px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--color-surface-container-highest);
}

.line__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.line__info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.line__info p {
	margin: 0;
}

.line__name {
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0.1px;
	color: var(--color-on-surface);
}

.line__name a {
	text-decoration: none;
}

.line__size,
.line__unit {
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.4px;
	color: var(--color-on-surface-variant);
}

.line__right {
	flex: none;
	width: 112px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
}

.line__total {
	margin: 0;
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0.1px;
	color: var(--color-on-surface);
}

.line__remove {
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0.1px;
	text-decoration: none;
	color: var(--color-on-surface-variant);
}

.line__remove:hover {
	color: var(--color-on-surface);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cart-items__foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-5);
	padding-top: 24px;
}

.cart-items__back {
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-on-surface);
}

/* Promo: underline-only field with the APPLY affordance inline. */
.promo {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	width: 280px;
	max-width: 100%;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--color-outline-variant);
}

.promo__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	font-weight: 300;
	font-size: 13px;
	letter-spacing: 0.2px;
}

.promo__input:focus {
	outline: none;
}

.promo:focus-within {
	border-bottom-color: var(--color-primary);
}

.promo__apply {
	flex: none;
	border: 0;
	background: transparent;
	cursor: pointer;
	font-weight: 500;
	font-size: 10.5px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--color-on-surface);
}

/* --- Summary: the bespoke inline editorial one, not the M3 component. ---- */

.summary__label {
	margin: 0 0 20px;
	font-weight: 500;
	font-size: 10.5px;
	line-height: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--color-on-surface-variant);
}

.summary__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	min-height: 40px;
	font-size: 13px;
	line-height: 16px;
	letter-spacing: 0.2px;
	color: var(--color-on-surface-variant);
}

.summary__row > span:last-child {
	color: var(--color-on-surface);
}

/* Figma paints the delivery amount in Primary — one of the sanctioned
   accent uses, drawing the eye to the one number that changes by address. */
.summary__delivery {
	color: var(--color-primary) !important;
}

.summary__delivery .is-free {
	color: var(--color-primary);
}

.summary__row--total {
	font-weight: 500;
	font-size: 15px;
	line-height: 19px;
	color: var(--color-on-surface);
}

.summary__checkout {
	width: 100%;
	min-height: 58px;
	margin-top: 20px;
}

.summary__cod {
	width: 100%;
	min-height: 54px;
	margin-top: 12px;
}

.summary__trust {
	margin: 16px 0 0;
	font-size: 10.5px;
	line-height: 13px;
	letter-spacing: 0.2px;
	color: var(--color-on-surface-variant);
}

/* --- Empty state (80:151). Class is `bag-empty`, NOT `cart-empty`:
   WooCommerce ships its own .cart-empty notice element and the two collided,
   applying this block's 120px padding to Woo's message: centred, CTA is the full-radius pill. -------- */

.bag-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 24px;
	padding: 120px var(--gutter) 160px;
}

.bag-empty__eyebrow {
	margin: 0;
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--color-on-surface-variant);
}

.bag-empty__heading {
	margin: 0;
	font-size: clamp(2.75rem, 0.5rem + 6.5vw, 6.5rem);
	line-height: 1;
	letter-spacing: -0.038em;
}

.bag-empty__body {
	margin: 0;
	max-width: 42ch;
	font-size: 14px;
	line-height: 22px;
	letter-spacing: 0.3px;
	color: var(--color-on-surface-variant);
}

/* --- Generic content page (About, FAQ, …) -------------------------------
   Named `textpage`, NOT `page`: WordPress puts a bare `page` class on the BODY
   of every Page, so `.page { padding-block: 64px }` was padding the document
   and pushing the masthead down 64px on the cart. Avoid single generic words
   that collide with WP/Woo body classes. */

.textpage {
	padding-block: var(--space-10);
}

.textpage__title {
	margin: 0 0 var(--space-6);
}

.textpage__body {
	max-width: 68ch;
	font-size: 16px;
	line-height: 26px;
}

@media (max-width: 899px) {
	.cart-cols {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-8);
	}

	.cart-items__foot {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-5);
	}

	.promo {
		width: 100%;
	}
}

/* ===========================================================================
   WooCommerce notices.
   Woo's own stylesheet is dequeued, so these are styled from scratch. They also
   need margin:0 — the default <ul> margin collapsed out to the root and pushed
   the whole page, masthead included, down by 64px on the cart.
   Error styling follows DESIGN_SYSTEM.md 7: Error Container on On Error Container.
   =========================================================================== */

.woocommerce-notices-wrapper {
	margin: 0;
}

.woocommerce-notices-wrapper:not(:empty) {
	padding-block: var(--space-4);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	margin: 0;
	padding: var(--space-4) var(--gutter);
	list-style: none;
	border-block: 1px solid var(--color-outline-variant);
	background: var(--color-surface-container-low);
	font-size: 13px;
	line-height: 20px;
	letter-spacing: 0.2px;
	color: var(--color-on-surface);
}

/*
 * WooCommerce gives the first notice tabindex="-1" and focuses it so screen
 * readers announce it (frontend/woocommerce.js). Chrome then matches
 * :focus-visible and paints the 2px lime ring from base.css around the whole
 * message — a lime frame nobody asked for, on a box that cannot be tabbed to.
 * The announcement comes from role="alert" plus the focus, not from the ring.
 */
.woocommerce-message:focus,
.woocommerce-info:focus,
.woocommerce-error:focus,
.woocommerce-message:focus-visible,
.woocommerce-info:focus-visible,
.woocommerce-error:focus-visible {
	outline: none;
}

.woocommerce-message + .woocommerce-message,
.woocommerce-info + .woocommerce-info,
.woocommerce-error + .woocommerce-error {
	border-top: 0;
}

.woocommerce-message li,
.woocommerce-info li,
.woocommerce-error li {
	margin: 0;
}

.woocommerce-error {
	border-color: var(--color-error);
	background: var(--color-error-container);
	color: var(--color-on-error-container);
}

/* The "View cart" / "Undo?" affordance inside a notice. */
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
	font-weight: 500;
	color: inherit;
	text-underline-offset: 3px;
}

.woocommerce-message .button,
.woocommerce-info .button {
	float: right;
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	text-decoration: none;
}

/* ===========================================================================
   Checkout. Figma: Checkout / Desktop / 1440 — Header 84:4 (minimal, 88px, no
   ticker), Title 84:23, Columns 84:28, Legal footer 86:42.
   =========================================================================== */

.nav--minimal {
	display: flex;
	align-items: center;
	gap: 40px;
}

.nav__secure {
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--color-outline);
}

.legal-bar {
	border-top: 1px solid var(--color-outline-variant);
	background: var(--color-surface);
}

.legal-bar__inner {
	min-height: 64px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	font-weight: 500;
	font-size: 10.5px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--color-on-surface-variant);
}

.co-title {
	padding-top: 48px;
	padding-bottom: 32px;
}

.co-title__eyebrow {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin: 0 0 12px;
	font-weight: 500;
	font-size: 12px;
	line-height: 15px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--color-on-surface-variant);
}

.co-title__heading {
	margin: 0;
	margin-inline-start: -0.09em;
	font-size: clamp(2.75rem, 0.5rem + 7vw, 7rem);
	line-height: 1;
	letter-spacing: -0.036em;
}

/* Columns: 748 form + 420 summary, 80px apart. */
.co-cols {
	display: grid;
	grid-template-columns: minmax(0, 748fr) 420fr;
	gap: 80px;
	padding-bottom: 96px;
	align-items: start;
}

/* Blocks are separated by hairlines, padding 32 top / 40 bottom. */
.co-block {
	padding-block: 32px 40px;
	border-top: 1px solid var(--color-outline-variant);
}

.co-block--last {
	border-bottom: 1px solid var(--color-outline-variant);
}

.co-head {
	display: flex;
	align-items: baseline;
	gap: 20px;
	margin: 0 0 24px;
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--color-on-surface-variant);
}

/* The section name is 22px Light lowercase, not the giant hairline. */
.co-head em {
	font-style: normal;
	font-weight: 300;
	font-size: 22px;
	line-height: 28px;
	letter-spacing: -0.3px;
	text-transform: lowercase;
	color: var(--color-on-surface);
}

/* Field grid — 12 columns, 32px gutters, matching the frame's 6/6, 12 and
   4/4/4 rows. */
.co-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 24px 32px;
}

.co-grid .flexd-col-12 { grid-column: span 12; }
.co-grid .flexd-col-6  { grid-column: span 6; }
.co-grid .flexd-col-4  { grid-column: span 4; }
.co-grid .flexd-hidden,
#billing_country_field {
	display: none;
}

/* Underline-only fields, never filled M3 boxes (CLAUDE.md). */
.co-grid .form-row {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
}

.co-grid label {
	font-weight: 500;
	font-size: 10px;
	line-height: 13px;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: var(--color-on-surface-variant);
}

.co-grid .required {
	border: 0;
	color: inherit;
	text-decoration: none;
}

.co-grid input[type="text"],
.co-grid input[type="tel"],
.co-grid input[type="email"],
.co-grid input[type="number"],
.co-grid select,
.co-grid .select2-selection {
	width: 100%;
	padding: 0 0 12px;
	border: 0;
	border-bottom: 1px solid var(--color-outline-variant);
	border-radius: var(--radius-none);
	background: transparent;
	font-size: 16px;
	line-height: 20px;
	appearance: none;
}

/*
 * `appearance: none` above strips the native dropdown arrow, which left the
 * plain selects (Zone) looking like text inputs next to the select2-enhanced
 * City. Paint the chevron back on so both read as pickable.
 */
.co-grid select {
	padding-right: 22px;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23444841' stroke-width='1.5'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 2px top 6px;
	background-size: 11px 7px;
	cursor: pointer;
}

.co-grid input:focus,
.co-grid select:focus {
	outline: none;
	border-bottom-color: var(--color-primary);
	border-bottom-width: 2px;
	padding-bottom: 11px;
}

.co-grid .woocommerce-invalid input,
.co-grid .woocommerce-invalid select {
	border-bottom-color: var(--color-error);
}

.co-optin {
	margin: 24px 0 0;
	font-size: 12px;
	line-height: 18px;
	letter-spacing: 0.2px;
	color: var(--color-on-surface-variant);
}

.co-optin label {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
}

/* --- Delivery zones and payment methods share the row shape. ------------ */

.zone {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-block: 18px;
	border-top: 1px solid var(--color-outline-variant);
	cursor: pointer;
}

.zone:first-child {
	border-top: 0;
}

.zone input {
	appearance: none;
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 1px solid var(--color-outline);
	border-radius: var(--radius-full);
	cursor: pointer;
}

/* Selected control: 5px lime ring (DESIGN_SYSTEM.md 7). */
.zone--on input,
.zone input:checked {
	border-color: var(--color-primary);
	border-width: 5px;
}

.zone__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.zone__name {
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0.1px;
	color: var(--color-on-surface);
}

.zone__note,
.zone__note p {
	margin: 0;
	font-size: 12px;
	line-height: 18px;
	letter-spacing: 0.2px;
	color: var(--color-on-surface-variant);
}

.zone__price {
	flex: none;
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.1px;
	color: var(--color-on-surface);
}

.co-delivery__none,
.co-payment__sms {
	margin: 16px 0 0;
	font-size: 12px;
	line-height: 18px;
	color: var(--color-on-surface-variant);
}

/* --- Summary panel: 420 wide, padding 32. ------------------------------- */

.co-summary {
	padding: 32px;
	border: 1px solid var(--color-outline-variant);
	background: var(--color-surface);
	position: sticky;
	top: var(--space-5);
}

.co-summary__label {
	margin: 0 0 20px;
	font-weight: 500;
	font-size: 10.5px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--color-on-surface-variant);
}

.co-summary__items {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-bottom: 20px;
}

.co-item {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-4);
}

.co-item__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.co-item__name {
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 1px;
	color: var(--color-on-surface);
}

.co-item__meta {
	font-size: 12px;
	color: var(--color-on-surface-variant);
}

.co-item__total {
	flex: none;
	font-size: 13px;
	color: var(--color-on-surface);
}

.co-place {
	width: 100%;
	min-height: 58px;
	margin-top: 20px;
}

.co-summary__legal {
	margin: 16px 0 0;
	font-size: 11px;
	line-height: 16px;
	color: var(--color-on-surface-variant);
}

@media (max-width: 899px) {
	.co-cols {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-8);
	}

	.co-summary {
		position: static;
	}

	.co-grid .flexd-col-6,
	.co-grid .flexd-col-4 {
		grid-column: span 12;
	}
}

/* ===========================================================================
   Order confirmation. Figma: Confirmation / Desktop / 1440 — hero 89:21,
   columns 89:32. Minimal masthead, but the FULL footer unlike checkout.
   =========================================================================== */

.ty-hero {
	padding-top: 72px;
	padding-bottom: 56px;
}

.ty-hero__eyebrow {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0 0 18px;
	font-weight: 500;
	font-size: 12px;
	line-height: 15px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--color-on-surface-variant);
}

.ty-hero__dot {
	width: 7px;
	height: 7px;
	border-radius: var(--radius-full);
	background: var(--color-primary);
}

.ty-hero__state {
	color: var(--color-on-surface);
}

/* The order number IS the page — 128px Thin, not a checkmark and a thank-you. */
.ty-hero__number {
	margin: 0 0 18px;
	margin-inline-start: -0.03em;
	font-size: clamp(3rem, 0.5rem + 8vw, 8rem);
	line-height: 1;
	letter-spacing: -0.032em;
	text-transform: none;
}

.ty-hero__note {
	margin: 0 0 18px;
	max-width: 60ch;
	font-weight: 300;
	font-size: 15px;
	line-height: 24px;
	color: var(--color-on-surface);
}

.ty-hero__track {
	padding: 15px 24px 15px 28px;
	gap: 12px;
}

/* Columns: 748 receipt + 420 side, 80px apart. */
.ty-cols {
	display: grid;
	grid-template-columns: minmax(0, 748fr) 420fr;
	gap: 80px;
	padding-bottom: 96px;
	align-items: start;
}

.ty-block {
	padding-block: 28px 36px;
	border-top: 1px solid var(--color-outline-variant);
}

.ty-block--last {
	border-bottom: 1px solid var(--color-outline-variant);
}

.ty-item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-block: 8px;
}

.ty-item__thumb {
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: 8px;
	background: var(--color-surface-container-highest);
}

.ty-item__info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ty-item__name {
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0.1px;
	color: var(--color-on-surface);
}

.ty-item__meta {
	font-size: 12px;
	line-height: 16px;
	color: var(--color-on-surface-variant);
}

.ty-item__total {
	flex: none;
	font-weight: 500;
	font-size: 14px;
	color: var(--color-on-surface);
}

.ty-address {
	margin: 0 0 18px;
	font-size: 13px;
	line-height: 21px;
	letter-spacing: 0.2px;
	color: var(--color-on-surface);
}

.ty-shipline {
	margin: 0;
	font-weight: 500;
	font-size: 11px;
	line-height: 14px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--color-on-surface-variant);
}

.ty-payment {
	margin: 0;
	font-size: 13px;
	line-height: 20px;
	letter-spacing: 0.2px;
	color: var(--color-on-surface);
}

/* Side panel sits on Surface Container Low, not paper (Figma 91:2). */
.ty-side {
	padding: 32px;
	background: var(--color-surface-container-low);
}

.ty-side__label {
	margin: 0 0 16px;
	font-weight: 500;
	font-size: 10px;
	line-height: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--color-on-surface-variant);
}

.ty-side .summary__row {
	min-height: 34px;
	font-size: 12.5px;
}

.ty-payable {
	padding-block: 16px 28px;
}

.ty-payable__label {
	margin: 0 0 4px;
	font-weight: 500;
	font-size: 10px;
	line-height: 13px;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: var(--color-on-surface-variant);
}

/* 32px Light — the second-loudest number on the page after the order number. */
.ty-payable__value {
	margin: 0;
	font-weight: 300;
	font-size: 32px;
	line-height: 40px;
	letter-spacing: -0.5px;
	color: var(--color-on-surface);
}

.ty-side .rule + .ty-side__label {
	margin-top: 24px;
}

.ty-steps {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ty-steps li {
	display: flex;
	gap: 14px;
	padding-block: 10px;
	font-size: 12.5px;
	line-height: 19px;
	letter-spacing: 0.2px;
	color: var(--color-on-surface);
}

/* Numbered steps carry the accent — a sanctioned lime use. */
.ty-steps span {
	flex: none;
	font-weight: 500;
	font-size: 11px;
	line-height: 19px;
	letter-spacing: 1px;
	color: var(--color-primary);
}

.ty-side__help {
	margin: 16px 0 0;
	font-size: 11px;
	line-height: 17px;
	letter-spacing: 0.2px;
	color: var(--color-on-surface-variant);
}

@media (max-width: 899px) {
	.ty-cols {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-8);
	}
}

/* ===========================================================================
   Utility pages — About, Contact, FAQ, Shipping & Returns, Terms, Track order.
   Shared shape (Figma 117:3 / 119:3 / 120:3 / 121:3): tracked-caps eyebrow at
   y183 over the giant hairline heading at y212.
   =========================================================================== */

.util-hero {
	padding-top: 52px;
	padding-bottom: 40px;
}

.util-hero__eyebrow {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	margin: 0 0 14px;
	font-weight: 500;
	font-size: 12px;
	line-height: 15px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--color-on-surface-variant);
}

.util-hero__heading {
	margin: 0;
	margin-inline-start: -0.08em;
	font-size: clamp(2.75rem, 0.5rem + 6.8vw, 7.5rem);
	line-height: 0.98;
	letter-spacing: -0.04em;
}

.util-body {
	padding-bottom: var(--space-10);
}

/* Numbered spec-sheet section: number, label, body (Figma 120:3). */
.spec {
	display: grid;
	grid-template-columns: 40px 320px minmax(0, 1fr);
	gap: var(--space-5);
	padding-block: 28px;
	border-top: 1px solid var(--color-outline-variant);
}

.spec:last-child {
	border-bottom: 1px solid var(--color-outline-variant);
}

.spec__num {
	margin: 0;
	font-weight: 500;
	font-size: 12px;
	line-height: 24px;
	letter-spacing: 1.6px;
	color: var(--color-on-surface-variant);
}

.spec__label {
	margin: 0;
	font-weight: 300;
	font-size: 20px;
	line-height: 24px;
	letter-spacing: -0.2px;
	text-transform: uppercase;
	color: var(--color-on-surface);
}

.spec__body {
	margin: 0;
	font-weight: 300;
	font-size: 16px;
	line-height: 26px;
	color: var(--color-on-surface);
}

.spec__body--alone {
	max-width: 62ch;
	margin-bottom: var(--space-6);
}

/* --- FAQ ---------------------------------------------------------------- */

.faq-group {
	padding-top: var(--space-8);
}

.faq-group__head {
	display: flex;
	gap: 48px;
	margin: 0 0 var(--space-4);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--color-on-surface-variant);
}

.faq-row__q {
	min-height: 76px;
	font-weight: 300;
	font-size: 19px;
	line-height: 26px;
	letter-spacing: -0.2px;
	text-transform: none;
	gap: var(--space-5);
}

.faq-row__a {
	margin: 0;
	max-width: 78ch;
	font-size: 15px;
	line-height: 25px;
	color: var(--color-on-surface-variant);
}

/* --- Contact ------------------------------------------------------------ */

.contact-cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 440px;
	gap: 80px;
	align-items: start;
}

/*
 * Channels index, Figma 117:3: LABEL in tracked caps on the left, the
 * destination on the right, hairline between rows. No 01-05 numbers — those
 * belong to the policy pages, not here.
 */
.channel {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	gap: var(--space-4);
	align-items: baseline;
	padding-block: 20px;
	border-top: 1px solid var(--color-outline-variant);
}

.channel:last-child {
	border-bottom: 1px solid var(--color-outline-variant);
}

.channel__label {
	margin: 0;
	font-weight: 500;
	font-size: 12px;
	line-height: 20px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--color-on-surface);
}

.channel__note {
	margin: 0;
	font-size: 15px;
	line-height: 22px;
	color: var(--color-on-surface);
}

.channel__note a {
	color: inherit;
	text-underline-offset: 3px;
}

/* The message form sits in a filled card, not on bare paper (Figma 117:3). */
.contact-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	padding: var(--space-6);
	background: var(--color-surface-container);
}

.contact-form__label {
	margin: 0;
	font-weight: 500;
	font-size: 11px;
	line-height: 16px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--color-on-surface-variant);
}

.contact-form__sent {
	margin: 0;
	padding: var(--space-4);
	border: 1px solid var(--color-primary);
	font-size: 13px;
}

.contact-form textarea.field__input {
	resize: vertical;
}

.contact-form__send {
	align-self: stretch;
	width: 100%;
}

/* --- Track order -------------------------------------------------------- */

.track__note {
	margin: 0 0 var(--space-6);
	max-width: 56ch;
	font-size: 15px;
	line-height: 24px;
	color: var(--color-on-surface-variant);
}

.track__form {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	max-width: 420px;
}

.track__form .btn {
	align-self: flex-start;
	min-width: 160px;
}

.track__pending {
	margin: var(--space-6) 0 0;
	max-width: 62ch;
	font-size: 14px;
	line-height: 22px;
	color: var(--color-on-surface-variant);
}

/* --- Terms -------------------------------------------------------------- */

.terms {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 80px;
	align-items: start;
}

.terms__rail {
	position: sticky;
	top: var(--space-5);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.terms__rail a {
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.6px;
	text-decoration: none;
	color: var(--color-on-surface-variant);
}

.terms__rail a:hover {
	color: var(--color-on-surface);
}

.terms .spec {
	grid-template-columns: 40px minmax(0, 1fr);
}

.terms .spec__label {
	grid-column: 2;
	margin-bottom: var(--space-3);
}

.terms .spec__body {
	grid-column: 2;
	font-weight: 400;
	font-size: 15px;
	line-height: 25px;
}

/* --- About -------------------------------------------------------------- */

.about-hero {
	padding-top: 72px;
	padding-bottom: var(--space-10);
}

.about-hero__heading {
	margin: 0 0 var(--space-8);
	margin-inline-start: -0.05em;
	font-size: clamp(3rem, 0.5rem + 8vw, 8rem);
	line-height: 0.96;
	letter-spacing: -0.04em;
}

.about-hero__body {
	margin: 0;
	max-width: 72ch;
	font-weight: 300;
	font-size: 19px;
	line-height: 30px;
	color: var(--color-on-surface);
}

.about-block {
	padding-block: var(--space-10);
	border-top: 1px solid var(--color-outline-variant);
}

.about-block__eyebrow {
	display: flex;
	gap: 48px;
	margin: 0 0 var(--space-5);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--color-on-surface-variant);
}

.about-block__lead {
	margin: 0 0 var(--space-6);
	max-width: 20ch;
	font-size: clamp(2rem, 1rem + 2.4vw, 3.25rem);
	line-height: 1.06;
	letter-spacing: -0.03em;
	text-transform: none;
}

.about-block__body {
	margin: 0;
	max-width: 62ch;
	font-weight: 300;
	font-size: 16px;
	line-height: 26px;
}

.about-block__body--wide {
	max-width: 76ch;
	font-size: 18px;
	line-height: 28px;
}

.stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-6);
	margin: var(--space-10) 0 0;
}

.stats__item {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.stats__value {
	margin: 0;
	font-size: clamp(2.5rem, 1rem + 3.4vw, 4.5rem);
	line-height: 1;
	letter-spacing: -0.03em;
}

.stats__label {
	margin: 0;
	font-size: 12px;
	line-height: 18px;
	color: var(--color-on-surface-variant);
}

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

.wont__item {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: var(--space-4);
	padding-block: 22px;
	border-top: 1px solid var(--color-outline-variant);
}

.wont__item:last-child {
	border-bottom: 1px solid var(--color-outline-variant);
}

.wont__num {
	font-weight: 500;
	font-size: 12px;
	line-height: 22px;
	letter-spacing: 1.4px;
	color: var(--color-on-surface-variant);
}

.wont__text {
	font-weight: 300;
	font-size: 15px;
	line-height: 22px;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--color-on-surface);
}

/* 05 The short version sits on an inverted band. */
.about-short {
	padding-block: var(--space-10);
	background: var(--color-inverse-surface);
	color: var(--color-inverse-on-surface);
}

.about-block__eyebrow--inverted {
	color: var(--color-outline-variant);
}

.about-short__line {
	margin: 0 0 var(--space-6);
	max-width: 22ch;
	font-size: clamp(2.5rem, 1rem + 3.6vw, 4.75rem);
	line-height: 1.04;
	letter-spacing: -0.035em;
	color: var(--color-inverse-on-surface);
}

.about-short__body {
	margin: 0;
	max-width: 66ch;
	font-weight: 300;
	font-size: 18px;
	line-height: 28px;
	color: var(--color-outline-variant);
}

.about-contact {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
	margin: 0 0 var(--space-6);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--color-on-surface-variant);
}

.about-contact a {
	text-decoration: none;
	color: var(--color-on-surface);
}

@media (max-width: 899px) {
	.spec,
	.terms,
	.contact-cols,
	.terms .spec {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-2);
	}

	/*
	 * The desktop rules pin the terms label and body to column 2. Once the grid
	 * is a single column that forces an implicit second track, and the number
	 * and label collide on one line ("01TERMS OF SALE"). Put them back in flow.
	 */
	.terms .spec__label,
	.terms .spec__body {
		grid-column: auto;
	}

	.spec__num {
		line-height: 1.4;
	}

	.spec__label {
		margin-bottom: var(--space-1);
	}

	.terms__rail {
		position: static;
		flex-flow: row wrap;
		gap: var(--space-2) var(--space-4);
		padding-bottom: var(--space-4);
		margin-bottom: var(--space-2);
		border-bottom: 1px solid var(--color-outline-variant);
	}

	.stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ===========================================================================
   Home. Figma: Home / Desktop / 1440 (31:3).
   =========================================================================== */

/* --- Hero 31:15. Video block fills the right ~70%; the wordmark straddles its
   left edge, ink on paper and white over the video. ---------------------- */

.hero {
	position: relative;
	aspect-ratio: 1440 / 720;
	background: var(--color-surface);
	overflow: hidden;
}

.hero__video {
	position: absolute;
	inset: 0 0 0 29.86%;
	background: var(--color-inverse-surface);
	overflow: hidden;
}

.hero__play {
	position: absolute;
	left: 45.6%;
	top: 43.9%;
	width: 8.7%;
	aspect-ratio: 1;
	border-radius: var(--radius-full);
	background: var(--color-primary);
}

/* The play triangle, drawn rather than shipped as an asset. */
.hero__play::after {
	content: "";
	position: absolute;
	left: 56%;
	top: 50%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 0.52em 0 0.52em 0.9em;
	border-color: transparent transparent transparent var(--color-on-primary);
	font-size: min(1.8vw, 26px);
}

.hero__caption {
	position: absolute;
	left: 3.96%;
	bottom: 7.6%;
	font-size: min(0.83vw, 12px);
	letter-spacing: 0.42em;
	color: var(--color-inverse-on-surface);
	white-space: nowrap;
}

.hero__word {
	position: absolute;
	left: 6.67%;
	top: 20.8%;
	margin: 0;
	font-family: var(--font-display);
	font-weight: 100;
	font-variation-settings: "wght" 100;
	font-size: min(16.1vw, 232px);
	line-height: 1;
	letter-spacing: -0.039em;
	user-select: none;
}

.hero__word--ink {
	color: var(--color-on-surface);
}

/* Positioned relative to the video block so it lands on exactly the same spot
   as the ink copy and is clipped by the block's overflow. The word starts at
   96px on the 1440 frame; the block starts at 430 and is 1010 wide, so the
   offset is (96 - 430) / 1010 = -33.07%. */
.hero__word--clip {
	left: -33.07%;
	color: var(--color-inverse-on-surface);
}

.hero__copy {
	position: absolute;
	left: 6.8%;
	top: 65.3%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.hero__line {
	margin: 0;
	font-size: min(1.04vw, 15px);
	line-height: 19px;
	letter-spacing: 0.4px;
	color: var(--color-on-surface-variant);
	white-space: nowrap;
}

.hero__cta {
	padding: 15px 24px 15px 28px;
	gap: 12px;
}

/* --- 01 The proposition: same collision machinery as the PDP band. ------ */

.collide--proposition {
	aspect-ratio: 1440 / 820;
	border-top: 0;
}

.collide--proposition .collide__photo {
	left: 37.5%;
	top: 11%;
	width: 45.83%;
	height: 84.15%;
}

.collide--proposition .collide__word {
	top: 39%;
	font-size: min(13.2vw, 190px);
	letter-spacing: -0.037em;
}

.collide--proposition .collide__word--paper { left: 10.42%; }
.collide--proposition .collide__word--dark   { left: 38.06%; }

.collide__body--lead {
	top: 73.2%;
	left: 5.7%;
	width: 22%;
	font-size: min(1.39vw, 20px);
	line-height: 1.55;
}

.collide__sub {
	position: absolute;
	left: 5.7%;
	top: 86.8%;
	margin: 0;
	font-size: min(0.9vw, 13px);
	letter-spacing: 0.3px;
	color: var(--color-on-surface-variant);
	white-space: nowrap;
}

/* --- 02 The collection -------------------------------------------------- */

.home-collection {
	padding-top: 48px;
	background: var(--color-surface);
}

/* --- 03 Format ---------------------------------------------------------- */

.formats {
	padding-block: 64px 72px;
	background: var(--color-surface);
	border-top: 1px solid var(--color-outline-variant);
}

/* The frame's copy box is exactly 521px wide and the 96px lead is set to fill
   it on two lines. A fractional split gave 502px, which pushed "formats." onto
   a third line — so the column is capped at the real width and only shrinks
   below it. */
.formats__inner {
	display: grid;
	grid-template-columns: minmax(0, 521px) minmax(0, 1fr);
	gap: 0 11px;
	align-items: end;
}

.formats__stage {
	display: flex;
	flex-direction: column;
	/* The bottle silhouettes are sized to true relative volume, so their total
	   width can exceed this grid cell in the ~900-1023px band before the
	   section stacks. They are aria-hidden decoration; clip rather than push
	   the page wider. */
	overflow: hidden;
}

/* The frame sets this at 96px across a 521px box on two lines. Measured in the
   browser, our Google Sans Flex renders "three formats." at 554px for the same
   nominal size — about 6% wider than Figma lays it out — which pushed it onto a
   third line. Trimmed to 90px so the two-line composition survives; a 6px
   difference in size reads as nothing next to a broken line. */
.formats__lead {
	margin: 0 0 var(--space-5);
	margin-inline-start: -0.08em;
	font-size: clamp(2.5rem, 0.5rem + 6.25vw, 5.625rem);
	line-height: 1;
	letter-spacing: -0.032em;
}

.formats__sub {
	margin: 0 0 var(--space-8);
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0.3px;
	color: var(--color-on-surface-variant);
}

.formats__combos {
	max-width: 474px;
}

.formats__combo-row {
	display: flex;
	justify-content: space-between;
	gap: var(--space-5);
	padding-block: 12px;
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: var(--color-on-surface-variant);
}

.formats__combo-row span:last-child {
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 0.3px;
	text-transform: none;
}

/* Bottle silhouettes, sized to true relative volume and sat on one baseline. */
.bottles {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 118px;
	padding-bottom: 0;
	border-bottom: 1px solid var(--color-outline-variant);
}

.bottle {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.bottle__neck {
	height: 14px;
	background: var(--color-inverse-surface);
}

.bottle__body {
	background: var(--color-inverse-surface);
}

.bottle-labels {
	display: flex;
	justify-content: center;
	gap: 118px;
	margin: 16px 0 0;
}

.bottle-labels div {
	width: 92px;
}

.bottle-labels dt {
	font-weight: 500;
	font-size: 14px;
	line-height: 18px;
	letter-spacing: 1px;
	color: var(--color-on-surface);
}

.bottle-labels dd {
	margin: 4px 0 0;
}

.bottle-labels__use {
	font-weight: 500;
	font-size: 11px;
	line-height: 13px;
	letter-spacing: 1.8px;
	color: var(--color-on-surface-variant);
}

.bottle-labels__price {
	font-size: 12px;
	line-height: 15px;
	letter-spacing: 0.3px;
	color: var(--color-on-surface-variant);
}

/* --- 04 Olfactive index ------------------------------------------------- */

.notewall {
	padding-block: 72px 96px;
	background: var(--color-surface);
	border-top: 1px solid var(--color-outline-variant);
}

.notewall__wall {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 28px;
	margin-bottom: 36px;
	font-family: var(--font-display);
	line-height: 1.25;
	color: var(--color-on-surface);
}

/* One material set in lime — the single sanctioned highlight here. */
.notewall__note--accent {
	color: var(--color-primary);
}

.notewall__caption {
	margin: 0;
	font-size: 12px;
	line-height: 15px;
	letter-spacing: 0.3px;
	color: var(--color-on-surface-variant);
}

/* --- 05 The ritual: inverted band --------------------------------------- */

.ritual {
	padding-block: 110px 120px;
	background: var(--color-inverse-surface);
	color: var(--color-inverse-on-surface);
}

.ritual__line {
	margin: 28px 0;
	margin-inline-start: -0.05em;
	font-size: clamp(2.5rem, 0.5rem + 5.6vw, 5rem);
	line-height: 1.05;
	letter-spacing: -0.037em;
	color: var(--color-inverse-on-surface);
}

.ritual__body {
	margin: 0 0 28px;
	max-width: 46ch;
	font-weight: 300;
	font-size: 19px;
	line-height: 31px;
	color: var(--color-inverse-on-surface);
}

.ritual__accent {
	display: block;
	width: 64px;
	height: 2px;
	background: var(--color-primary);
}

/* --- 06 Dispatch -------------------------------------------------------- */

.dispatch {
	padding-block: 80px 88px;
	background: var(--color-surface);
}

.dispatch__list {
	margin-top: 28px;
	border-top: 1px solid var(--color-outline-variant);
}

.dispatch__entry {
	display: grid;
	grid-template-columns: 113px minmax(0, 1fr) 24px;
	gap: 48px;
	align-items: start;
	padding-block: 28px;
	border-bottom: 1px solid var(--color-outline-variant);
	text-decoration: none;
	color: inherit;
}

.dispatch__date {
	font-weight: 500;
	font-size: 11px;
	line-height: 20px;
	letter-spacing: 1.8px;
	color: var(--color-on-surface-variant);
}

.dispatch__text {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dispatch__title {
	font-weight: 300;
	font-size: 22px;
	line-height: 28px;
	letter-spacing: -0.2px;
	color: var(--color-on-surface);
}

.dispatch__excerpt {
	font-size: 14px;
	line-height: 22px;
	color: var(--color-on-surface-variant);
}

.dispatch__arrow {
	font-size: 16px;
	line-height: 20px;
	color: var(--color-on-surface);
}

/* --- Newsletter --------------------------------------------------------- */

.newsletter {
	padding-block: 100px 110px;
	background: var(--color-surface);
	border-top: 1px solid var(--color-outline-variant);
}

.newsletter__heading {
	margin: 0 0 36px;
	margin-inline-start: -0.06em;
	font-size: clamp(2.25rem, 0.5rem + 4.4vw, 4rem);
	line-height: 1;
	letter-spacing: -0.031em;
}

.newsletter__form {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	max-width: 560px;
	padding-bottom: 14px;
	margin-bottom: 36px;
	border-bottom: 1px solid var(--color-outline-variant);
}

.newsletter__form:focus-within {
	border-bottom-color: var(--color-primary);
}

.newsletter__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	font-weight: 300;
	font-size: 18px;
	line-height: 23px;
	letter-spacing: 0.2px;
}

.newsletter__input:focus {
	outline: none;
}

.newsletter__submit {
	flex: none;
	border: 0;
	background: transparent;
	cursor: pointer;
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--color-on-surface);
}

.newsletter__note {
	margin: 0;
	font-size: 12px;
	line-height: 15px;
	letter-spacing: 0.3px;
	color: var(--color-on-surface-variant);
}

/* --- Home responsive ---------------------------------------------------- */

@media (max-width: 899px) {
	.hero {
		aspect-ratio: auto;
		display: flex;
		flex-direction: column;
	}

	.hero__video {
		position: relative;
		inset: auto;
		aspect-ratio: 16 / 10;
	}

	/* No video edge to break across on one column, so the wordmark sits whole
	   on paper above it rather than half-clipped. */
	.hero__word--clip {
		display: none;
	}

	.hero__word {
		position: static;
		order: -1;
		font-size: 26vw;
		padding: var(--space-6) var(--gutter) 0;
	}

	.hero__copy {
		position: static;
		padding: var(--space-6) var(--gutter) var(--space-8);
	}

	.hero__line {
		white-space: normal;
	}

	/*
	 * The proposition band's desktop geometry is declared after the shared
	 * mobile rules above, so it wins on source order and specificity. Undo it
	 * here, where this media query comes later still.
	 */
	.collide--proposition {
		aspect-ratio: auto;
	}

	.collide--proposition .collide__photo {
		left: auto;
		top: auto;
		width: 61.54%;
		height: auto;
		margin-left: 38.46%;
	}

	.collide--proposition .collide__word {
		top: auto;
		left: auto;
		font-size: 17vw;
	}

	.collide--proposition .collide__word--paper,
	.collide--proposition .collide__word--dark {
		left: auto;
	}

	.collide__body--lead,
	.collide__sub {
		position: static;
		top: auto;
		left: auto;
		width: auto;
		white-space: normal;
	}

	.collide__body--lead {
		grid-row: 3;
		grid-column: 2 / -1;
		font-size: 15px;
	}

	.collide__sub {
		grid-row: 4;
		grid-column: 2 / -1;
		margin-right: var(--gutter);
		/* min(0.9vw, …) is 3.5px at 390 — unreadable off the desktop frame. */
		font-size: 13px;
	}

	.formats__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.formats__copy {
		grid-row: auto;
	}

	.bottles,
	.bottle-labels {
		gap: var(--space-8);
	}

	.dispatch__entry {
		grid-template-columns: minmax(0, 1fr) 24px;
		gap: var(--space-3);
	}

	.dispatch__date {
		grid-column: 1 / -1;
	}
}

/* --- Real media, once it is uploaded. The placeholder tones stay underneath so
   a product without a photo still reads as designed rather than as a gap. --- */

.card__img,
.pdp__img,
.hero__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pdp__shot {
	position: relative;
	overflow: hidden;
}

/* A slot with a real photo should not also paint the placeholder tone. */
.pdp__shot:has(.pdp__img) {
	background: none;
}

.ty-item__thumb {
	position: relative;
	overflow: hidden;
}

.ty-item__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.line__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Copy now comes from the editor, which wraps it in <p>. Strip the inherited
   margins so the body still aligns with its section label. */
.spec__body > :first-child,
.channel__note > :first-child,
.acc__body > :first-child {
	margin-top: 0;
}

.spec__body > :last-child,
.channel__note > :last-child,
.acc__body > :last-child {
	margin-bottom: 0;
}

.spec__body p,
.channel__note p {
	margin-block: 0 0.8em;
}

.newsletter__state {
	margin: 0 0 var(--space-5);
	font-size: 13px;
	line-height: 20px;
	color: var(--color-on-surface);
}

.newsletter__state--error,
.contact-form__sent--error {
	color: var(--color-error);
	border-color: var(--color-error);
}

/* ---------------------------------------------------------------------------
   Undesigned routes: 404, search, and the optional lede above a spec sheet.
   Built from the existing utility-page vocabulary rather than new shapes.
   --------------------------------------------------------------------------- */

.util-lede {
	max-width: 640px;
	padding-bottom: var(--space-6);
	font-size: 18px;
	line-height: 1.5;
	color: var(--color-on-surface-variant);
}

.util-cta {
	margin: var(--space-6) 0 0;
}

.search-form {
	display: flex;
	gap: var(--space-3);
	align-items: stretch;
	max-width: 560px;
	margin-bottom: var(--space-8);
}

.search-form input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 12px 0;
	font: inherit;
	color: var(--color-on-surface);
	background: none;
	border: 0;
	border-bottom: 1px solid var(--color-outline);
	border-radius: 0;
}

.search-form input[type="search"]:focus-visible {
	outline: none;
	border-bottom-color: var(--color-on-surface);
}

@media (max-width: 599px) {
	.search-form {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-4);
	}

	.search-form .btn {
		align-self: flex-start;
	}
}

.search-pages {
	margin: var(--space-4) 0 0;
	padding: 0;
	list-style: none;
}

.search-pages li {
	border-top: 1px solid var(--color-outline-variant);
}

.search-pages li:last-child {
	border-bottom: 1px solid var(--color-outline-variant);
}

.search-pages a {
	display: block;
	padding: 20px 0;
	text-decoration: none;
	color: var(--color-on-surface);
}

.search-pages a:hover {
	color: var(--color-on-surface-variant);
}

.flexd-pagination .nav-links {
	display: flex;
	gap: var(--space-4);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-outline-variant);
}

/*
 * A partial last row would otherwise expose the grid's own hairline background
 * as a grey block (see flexd_grid_fillers()).
 */
.card--filler {
	background: var(--color-surface);
}

/* --- Track order result (Figma 98:138 has the form only; the result block
       reuses the confirmation's eyebrow + monument vocabulary). ------------ */

.track__result {
	margin-top: var(--space-8);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-outline-variant);
}

.track__eyebrow {
	display: flex;
	gap: var(--space-3);
	align-items: center;
	margin: 0 0 var(--space-3);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--color-on-surface-variant);
}

.track__dot {
	width: 8px;
	height: 8px;
	border-radius: 9999px;
	background: var(--color-primary);
}

.track__number {
	margin: 0 0 var(--space-6);
	font-weight: 100;
	font-size: 72px;
	line-height: 1;
	letter-spacing: -0.03em;
	/* The order number is a code, not display copy: .display lowercases. */
	text-transform: none;
}

.track__facts {
	margin: 0;
	display: grid;
	gap: 0;
}

.track__facts > div {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	gap: var(--space-4);
	padding-block: 18px;
	border-top: 1px solid var(--color-outline-variant);
}

.track__facts > div:last-child {
	border-bottom: 1px solid var(--color-outline-variant);
}

.track__facts dt {
	margin: 0;
	font-weight: 500;
	font-size: 11px;
	line-height: 20px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--color-on-surface-variant);
}

.track__facts dd {
	margin: 0;
	font-size: 15px;
	line-height: 22px;
	color: var(--color-on-surface);
}

@media (max-width: 599px) {
	.track__number {
		font-size: 56px;
	}

	/* 180px + value is too tight at 390 — stack label over value. */
	.track__facts > div {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-1);
	}
}

.track__pending--error {
	color: var(--color-error);
}

/* ===========================================================================
   Microinteractions — small, editorial, and all suppressed by the global
   prefers-reduced-motion rule in base.css. Nothing here changes layout size
   on interaction (no reflow), only transform / opacity / colour.
   =========================================================================== */

/* --- Product card: the image settles back as you leave, the quick-add lifts
       into place, the name picks up an underline. ------------------------- */

.card__media {
	overflow: hidden;
}

.card__img {
	transition: transform 600ms cubic-bezier(0.2, 0, 0.1, 1);
}

.card:hover .card__img {
	transform: scale(1.04);
}

/* The dark/paper placeholder tone gets the same treatment so a photo-less
   product still responds. */
.card__media::before {
	content: "";
	position: absolute;
	inset: 0;
	background: inherit;
	transition: transform 600ms cubic-bezier(0.2, 0, 0.1, 1);
}

.card:hover .card__media::before {
	transform: scale(1.04);
}

.card__add {
	transform: translateY(6px);
	transition: opacity 160ms ease, transform 200ms ease, background-color 120ms ease;
}

.card:hover .card__add,
.card__add:focus-visible {
	transform: translateY(0);
}

.card__add:hover {
	background: var(--color-inverse-primary);
}

.card__name {
	background-image: linear-gradient( currentColor, currentColor );
	background-size: 0% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 220ms ease;
}

.card:hover .card__name,
.card__name:focus-visible {
	background-size: 100% 1px;
}

@media (hover: none) {
	.card__add {
		transform: none;
	}
}

/* --- Selectable / pressable controls: ease the state change instead of
       snapping. -------------------------------------------------------------- */

.size {
	transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.size:not(.size--out):hover {
	border-color: var(--color-outline);
}

.qty__btn,
.plp-filter__cat,
.plp-filter__sort,
.line__remove,
.crossell__all,
.reviews__all,
.reviews__write,
.site-footer__list a,
.terms__rail a,
.search-pages a,
.dispatch__entry {
	transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.qty__btn:hover {
	background: var(--color-surface-container-highest);
}

/* --- Arrow affordances: the → drifts on hover. ------------------------- */

.dispatch__arrow {
	transition: transform 200ms ease;
}

.dispatch__entry:hover .dispatch__arrow {
	transform: translateX(5px);
}

.dispatch__entry:hover .dispatch__title {
	background-image: linear-gradient( currentColor, currentColor );
	background-size: 100% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
}

/* --- PDP / FAQ accordion: the panel eases open, the marker rotates. ---- */

.acc__head::after {
	transition: transform 200ms ease;
}

.acc__row[open] > .acc__head::after {
	/* "+" set on its side reads as the same mark mid-collapse, no content swap
	   flash. */
	transform: rotate(45deg);
}

.acc__head:hover {
	color: var(--color-on-surface-variant);
}

.acc__row[open] > .acc__body {
	animation: flexd-acc-in 240ms ease both;
}

@keyframes flexd-acc-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* --- Mobile menu: the dropdown falls in rather than blinking on. ------- */

@media (max-width: 599px) {
	.js .nav__panel[data-open] {
		animation: flexd-nav-drop 200ms ease both;
	}
}

@keyframes flexd-nav-drop {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* --- Logo: a whisper of feedback on the one image in the masthead. ---- */

.site-header__logo img {
	transition: opacity 150ms ease;
}

.site-header__logo:hover img {
	opacity: 0.82;
}

/* --- Scroll reveal. reveal.js adds .js-reveal ONLY to blocks that are below
       the fold when it runs, so on-screen content never flashes. Absent the
       script (or under reduced motion) nothing is touched and everything is
       simply visible. --------------------------------------------------------- */

.js-reveal {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 550ms ease, transform 550ms cubic-bezier(0.2, 0, 0.1, 1);
}

.js-reveal.is-visible {
	opacity: 1;
	transform: none;
}