/* Botanical Editorial — component styles. Reads top-down: base, voice
   (kicker, buttons, links), header and navigation, footer, hero, specimen
   tag. Every color and size resolves through tokens.css; grounds and text
   pair only per the contracted tables. */

/* ---------- base ---------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-ui);
	font-size: var(--text-body);
	font-weight: 400;
	line-height: var(--leading-body);
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-display);
	font-weight: 500;
	line-height: var(--leading-display);
	margin: 0 0 var(--space-4);
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); font-weight: 600; }

p {
	margin: 0 0 var(--space-4);
	max-width: var(--measure);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--emerald);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: text-decoration-thickness var(--duration-micro) ease;
}

a:hover {
	text-decoration-thickness: 2px;
}

:focus-visible {
	outline: 2px solid var(--emerald);
	outline-offset: 2px;
}

/* the emerald ground carries the white focus ring and the original
   dark-ground pairings: cream text and underlined cream links */
.ground-emerald {
	background: var(--emerald);
	color: var(--cream);
}

.ground-emerald :focus-visible {
	outline-color: var(--white);
}

/* sage ground — the re-derived pairings: White survives only at display
   sizes, Ink carries all body and small text, the focus ring is Ink */
.ground-sage {
	background: var(--sage);
	color: var(--ink);
}

.ground-sage :focus-visible {
	outline-color: var(--ink);
}

.ground-sage .kicker {
	color: var(--ink);
}

.ground-sage a {
	color: var(--ink);
}

.ground-sage .button {
	background: var(--white);
	color: var(--emerald);
}

.container {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* the fail-closed gate cover's critical CSS lives inline in the document
   head — a compliance wall must not depend on this stylesheet loading.
   The gate dialog composes WITH the cover: the cover carries the paper
   ground; when the gate is present it carries the mark and the choice,
   so the cover's own mark steps aside. */

html.age-gate__restricted .gate-cover__mark {
	display: none;
}

.age-gate__wrapper {
	position: fixed;
	inset: 0;
	z-index: 210;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--gutter);
	overflow-y: auto;
	background: var(--paper);
}

.age-gate {
	width: min(28rem, 92vw);
	text-align: center;
}

.age-gate__heading-title--logo {
	width: 11rem !important;
	height: auto !important;
	display: block;
	margin: 0 auto var(--space-8);
}

.age-gate__headline {
	font-family: var(--font-display);
	font-size: var(--text-h1);
	font-weight: 500;
	line-height: var(--leading-display);
	color: var(--ink);
	margin-bottom: var(--space-3);
}

.age-gate__subheadline {
	font-family: var(--font-ui);
	font-size: var(--text-body);
	color: var(--ink);
	max-width: none;
	margin-bottom: var(--space-8);
}

/* the gate's one wink, in the kicker voice */
.age-gate__challenge {
	font-family: var(--font-ui);
	font-size: var(--text-kicker);
	font-weight: 600;
	letter-spacing: var(--kicker-tracking);
	text-transform: uppercase;
	color: var(--emerald);
	max-width: none;
	margin-bottom: var(--space-4);
}

.age-gate__buttons {
	display: flex;
	justify-content: center;
	gap: var(--space-4);
	flex-wrap: wrap;
}

.age-gate button.age-gate__submit {
	font-family: var(--font-ui);
	font-size: var(--text-small);
	font-weight: 600;
	letter-spacing: 0.02em;
	min-height: 48px;
	padding: 0.875rem 2rem;
	border-radius: var(--radius);
	cursor: pointer;
}

.age-gate button.age-gate__submit--yes {
	background: var(--emerald);
	color: var(--white);
	border: 1px solid var(--emerald);
}

.age-gate button.age-gate__submit--no {
	background: transparent;
	color: var(--emerald);
	border: 1px solid var(--emerald);
}

/* the refusal is register 1 — warm and final, never an error scold */
.age-gate__errors:not(:empty) {
	margin-top: var(--space-6);
	background: var(--cream);
	border-radius: var(--radius);
	padding: var(--space-4);
	font-family: var(--font-ui);
}

.age-gate .age-gate__errors,
.age-gate .age-gate__errors * {
	color: var(--ink);
}

.skip-link {
	position: absolute;
	left: var(--space-4);
	top: var(--space-2);
	z-index: 100;
	background: var(--emerald);
	color: var(--white);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius);
	transform: translateY(-300%);
}

.skip-link:focus {
	transform: none;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- voice: kicker, buttons ---------- */

.kicker {
	display: block;
	font-family: var(--font-ui);
	font-size: var(--text-kicker);
	font-weight: 600;
	letter-spacing: var(--kicker-tracking);
	text-transform: uppercase;
	color: var(--emerald);
	margin-bottom: var(--space-3);
}

.ground-emerald .kicker {
	color: var(--cream);
}

.button {
	display: inline-block;
	font-family: var(--font-ui);
	font-size: var(--text-small);
	font-weight: 600;
	letter-spacing: 0.02em;
	background: var(--emerald);
	color: var(--white);
	text-decoration: none;
	padding: 0.875rem 2rem;
	border: 0;
	border-radius: var(--radius);
	cursor: pointer;
	transition: transform var(--duration-micro) ease, box-shadow var(--duration-micro) ease;
	min-height: 44px;
}

.button:hover {
	transform: translateY(-1px);
	box-shadow: 0 2px 12px rgb(20 16 4 / 18%);
}

/* WooCommerce's sheet also styles `.button` on its pages (its `.alt`
   variant ships purple); ours loads after it, so restating the voice at
   its highest specificity keeps one button. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background: var(--emerald);
	color: var(--white);
	font-weight: 600;
	border-radius: var(--radius);
	padding: 0.875rem 2rem;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: var(--emerald);
	color: var(--white);
}

/* the account Log in / Register buttons match the field + card radius they sit
   beside (--radius-field), not the tighter general --radius (cutover render gate) */
.woocommerce-account .woocommerce-form-login button,
.woocommerce-account .woocommerce-form-register button {
	border-radius: var(--radius-field);
}

.woocommerce a.button.disabled,
.woocommerce button.button.disabled,
.woocommerce button.button.alt.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
	background: var(--emerald);
	color: var(--white);
	opacity: 0.45;
}

/* emerald-filled buttons are barred from dark grounds */
.ground-emerald .button {
	background: var(--white);
	color: var(--emerald);
}

.text-cta {
	font-weight: 500;
}

/* standalone links (never inline in a sentence) meet the 44px target floor */
.text-cta,
.menu-sheet__account,
.specimen-tag__coa,
.site-footer__social a,
.site-footer__nav a,
.site-footer__legal-links a,
.site-footer__practical a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.ground-emerald a {
	color: var(--cream);
}

/* ---------- header ---------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--paper);
	border-bottom: 1px solid rgb(20 16 4 / 12%);
	transition: transform var(--duration-micro) ease;
}

.site-header.is-tucked {
	transform: translateY(-100%);
}

/* mobile: trigger · centered brand · cart; search and account live in the
   sheet. desktop: logo hard-left, utilities hard-right, nav centered in
   the free span, generous gaps. */
.site-header__inner {
	/* the content sits well inboard — 13% side insets on wide screens hold
	   the logo and utilities in the annotated 12–16% band at every width;
	   narrow screens collapse to modest padding */
	padding-inline: clamp(1rem, 3vw, 2rem);
	min-height: var(--header-height);
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--space-4);
}

@media (min-width: 1024px) {
	.site-header__inner {
		padding-inline: 13%;
	}
}

@media (min-width: 768px) {
	.site-header__inner {
		gap: var(--space-12);
	}
}

.site-header__brand img {
	height: 3.75rem;
	width: auto;
	display: block;
	/* the genuine logo carries a white ground; multiply seats it on paper */
	mix-blend-mode: multiply;
}

.site-header__brand {
	display: flex;
	align-items: center;
	justify-self: center;
	text-decoration: none;
	color: var(--ink);
}


.site-header__actions .header-search,
.site-header__actions .header-account {
	display: none;
}


.site-nav {
	display: none;
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.header-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	color: var(--ink);
	text-decoration: none;
	background: none;
	border: 0;
	cursor: pointer;
	padding: var(--space-2);
}

.header-action svg {
	width: 1.25rem;
	height: 1.25rem;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.5;
}

/* FiboSearch internals (`.dgwt-wcas-*`) — plugin-coupled CSS, register C-1;
   re-verified by the headerSearch checks in catalog-behavior.mjs. The
   retained search surface adopts the system's sharp geometry — compact
   width, hairline rule, token radius; the plugin's own pill and heavy
   border both retire. Wide enough for the plugin's full placeholder — a
   clipped "Search for produc" reads as a defect on every page. */
.header-search {
	max-width: 17rem;
}

.header-search .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp,
.menu-sheet .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp {
	border-radius: var(--radius) !important;
}

.header-search .dgwt-wcas-search-input,
.menu-sheet .dgwt-wcas-search-input {
	border: 1px solid rgb(20 16 4 / 25%) !important;
	border-radius: var(--radius) !important;
	background: var(--white) !important;
	color: var(--ink) !important;
	font-family: var(--font-ui) !important;
}

.cart-link {
	position: relative;
}

.cart-link__count {
	position: absolute;
	top: 0;
	right: -2px;
	min-width: 1.25rem;
	height: 1.25rem;
	border-radius: 999px;
	background: var(--emerald);
	color: var(--white);
	font-size: var(--text-kicker);
	font-weight: 600;
	line-height: 1.25rem;
	text-align: center;
	padding-inline: 0.25em;
}

/* shown only once chrome.js runs — a no-JS visitor never meets a dead control */
.menu-trigger {
	display: none;
}

html.has-chrome .menu-trigger {
	display: inline-flex;
}

/* External-departure cue (designer ruling, this session): the one nav item that
   leaves the store for a separate business site — Lounge → the external Lounge
   site, carrying target="_blank" + rel set on the menu item — gets a subtle
   "leaving-site" mark so the primary human isn't surprised off the store (§3.2).
   Bound to the target attribute, not a hardcoded item, so it attaches wherever
   the external meta is set and never mislabels an internal link. Renders on the
   desktop nav, the mobile drawer, and the no-JS fallback list alike. */
.site-nav a[target="_blank"]::after,
.menu-sheet nav a[target="_blank"]::after {
	content: "\2197" / ""; /* ↗ — the empty alt hides the decorative glyph from
	   assistive tech; the "opens in a new tab" cue for AT belongs on the link
	   markup (sr-only / aria), the implementor's lane */
	display: inline-block;
	margin-left: 0.3em;
	font-size: 0.8em;
	line-height: 1;
	opacity: 0.5;
}

/* Graceful degradation (§7.6): without chrome.js the mobile drawer cannot open
   and its trigger stays hidden (no dead control — chrome.js's own contract),
   so the primary nav would vanish on mobile. This renders it instead as a
   static, reachable list on a full-width row below the header. Scoped to
   html:not(.has-chrome), so the normal (JS) drawer experience is untouched;
   chrome.js restores the drawer the moment it runs. The age veil is NOT
   affected — it lifts only on a genuine age-gate pass (the inline cookie
   script / chrome.js), never on this rule. Cache-safe: pure CSS, no state. */
@media (max-width: 767px) {
	html:not(.has-chrome) .site-nav {
		display: block;
		grid-column: 1 / -1;
		margin-top: var(--space-3);
		padding-top: var(--space-3);
		border-top: 1px solid rgb(20 16 4 / 12%);
	}

	html:not(.has-chrome) .site-nav > ul {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	html:not(.has-chrome) .site-nav a {
		display: block;
		padding: var(--space-2) 0;
		font-family: var(--font-ui);
		font-size: var(--text-small);
		color: var(--ink);
		text-decoration: none;
	}

	html:not(.has-chrome) .site-nav .sub-menu {
		display: block;
		position: static;
		min-width: 0;
		margin: 0 0 var(--space-1) var(--space-4);
		padding: 0;
		list-style: none;
		background: none;
		box-shadow: none;
	}
}

@media (min-width: 768px) {
	.menu-trigger,
	html.has-chrome .menu-trigger {
		display: none;
	}

	.site-header__brand {
		justify-self: start;
	}

	.site-header__actions .header-account {
		display: inline-flex;
	}

	.site-header__actions .header-search {
		display: block;
	}

	.site-nav {
		display: block;
		justify-self: center;
	}

	.site-nav > ul {
		display: flex;
		gap: var(--space-6);
		list-style: none;
		margin: 0;
		padding: 0;
		white-space: nowrap;
	}

	.site-nav a {
		font-family: var(--font-ui);
		font-size: var(--text-small);
		font-weight: 500;
		letter-spacing: 0.01em;
		color: var(--ink);
		text-decoration: none;
		background: none;
		border: 0;
		cursor: pointer;
		padding: var(--space-2) 0;
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.site-nav a:hover {
		color: var(--emerald);
	}

	/* the shop panel — two seeded columns under a hairline */
	.site-nav .menu-item-has-children {
		position: relative;
	}

	/* one column per top-level group; a childless group renders in the same
	   header style as a plain link — never a third style */
	.site-nav .sub-menu {
		position: absolute;
		top: calc(100% + 0.75rem);
		left: 50%;
		transform: translateX(-50%);
		background: var(--white);
		border: 1px solid rgb(20 16 4 / 12%);
		border-radius: var(--radius);
		box-shadow: 0 16px 40px rgb(20 16 4 / 10%);
		padding: var(--space-6);
		display: none;
		grid-auto-flow: column;
		align-items: start;
		gap: var(--space-8);
		list-style: none;
		margin: 0;
		min-width: 30rem;
	}

	.site-nav .menu-item-has-children.is-open > .sub-menu {
		display: grid;
	}

	.site-nav .sub-menu .sub-menu {
		position: static;
		transform: none;
		display: block;
		border: 0;
		box-shadow: none;
		padding: 0;
		min-width: 0;
	}

	.site-nav .sub-menu > li > a {
		font-size: var(--text-kicker);
		font-weight: 600;
		letter-spacing: var(--kicker-tracking);
		text-transform: uppercase;
		color: var(--emerald);
	}

	.site-nav .sub-menu .sub-menu a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: var(--space-1) 0;
		font-weight: 400;
		text-transform: none;
		letter-spacing: 0;
		font-size: var(--text-small);
		color: var(--ink);
	}
}

/* ---------- header panels: mini-cart and account ---------- */

.header-panel-anchor {
	position: relative;
	display: inline-flex;
}

.header-panel {
	position: absolute;
	top: calc(100% + 0.75rem);
	right: 0;
	z-index: 60;
	width: 23.75rem;
	max-width: calc(100vw - 2rem);
	background: var(--white);
	border: 1px solid rgb(20 16 4 / 12%);
	border-radius: var(--radius);
	box-shadow: var(--shadow-elevation);
	padding: var(--space-6);
}

.header-panel[hidden] {
	display: none;
}

.header-panel__close {
	position: absolute;
	top: var(--space-2);
	right: var(--space-2);
}

.header-panel__heading {
	font-size: var(--text-h3);
	font-weight: 600;
	margin-bottom: var(--space-4);
}

/* mobile: the mini-cart is a full-width sheet below the header */
@media (max-width: 767px) {
	.mini-cart.header-panel {
		position: fixed;
		inset: var(--header-height) 0 0 0;
		width: auto;
		max-width: none;
		border-radius: 0;
		border-inline: 0;
		overflow-y: auto;
	}

	body.header-panel-open {
		overflow: hidden;
	}
}

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

.mini-cart__item {
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
	padding-block: var(--space-3);
	border-bottom: 1px solid rgb(20 16 4 / 10%);
}

.mini-cart__item img {
	width: 3.5rem;
	height: 3.5rem;
	object-fit: cover;
	border-radius: var(--radius);
	flex: none;
}

.mini-cart__item-body {
	flex: 1;
}

.mini-cart__item-name {
	font-size: var(--text-small);
	font-weight: 500;
	margin-bottom: var(--space-1);
}

.mini-cart__stepper {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	border: 1px solid rgb(20 16 4 / 20%);
	border-radius: var(--radius);
}

.mini-cart__step {
	background: none;
	border: 0;
	cursor: pointer;
	font: inherit;
	min-width: 2.25rem;
	min-height: 2.25rem;
}

.mini-cart__item-end {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--space-2);
}

.mini-cart__price {
	font-size: var(--text-small);
	font-weight: 600;
}

.mini-cart__remove {
	background: none;
	border: 0;
	cursor: pointer;
	font-size: 1.1rem;
	line-height: 1;
	min-width: 2rem;
	min-height: 2rem;
	color: var(--ink);
}

.mini-cart__undo[hidden] {
	display: none;
}

.mini-cart__undo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--paper);
	border-radius: var(--radius);
	padding: var(--space-2) var(--space-3);
	margin-bottom: var(--space-3);
	font-size: var(--text-small);
}

.mini-cart__undo-action {
	background: none;
	border: 0;
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	color: var(--emerald);
	text-decoration: underline;
	min-height: 44px;
}

.mini-cart__subtotal {
	display: flex;
	justify-content: space-between;
	font-weight: 600;
	padding-block: var(--space-4);
}

.mini-cart__actions {
	display: flex;
	align-items: center;
	gap: var(--space-6);
}

.mini-cart__empty p {
	margin-bottom: var(--space-4);
}

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

.account-panel__links a {
	display: flex;
	align-items: center;
	min-height: 44px;
	text-decoration: none;
	font-size: var(--text-small);
	font-weight: 500;
}

.account-panel__links a:hover,
.account-panel__links a:focus-visible {
	text-decoration: underline;
}

.account-panel__primary {
	margin-bottom: var(--space-3);
}

/* ---------- mobile menu sheet ---------- */

.menu-sheet {
	position: fixed;
	inset: 0;
	z-index: 60;
	background: var(--paper);
	padding: var(--space-6) var(--gutter) var(--space-12);
	overflow-y: auto;
}

.menu-sheet[hidden] {
	display: none;
}

.menu-sheet__close {
	position: absolute;
	top: var(--space-4);
	right: var(--space-4);
}

.menu-sheet__search {
	margin: var(--space-16) 0 var(--space-8);
}

.menu-sheet nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.menu-sheet nav a {
	display: block;
	font-family: var(--font-display);
	font-size: var(--text-h2);
	font-weight: 500;
	color: var(--ink);
	text-decoration: none;
	padding: var(--space-3) 0;
	border-bottom: 1px solid rgb(20 16 4 / 8%);
}

/* the sheet keeps the seeded two-level shop hierarchy legible: group
   headers read as labels, their children as entries */
.menu-sheet nav .sub-menu > li > a {
	font-family: var(--font-ui);
	font-size: var(--text-kicker);
	font-weight: 600;
	letter-spacing: var(--kicker-tracking);
	text-transform: uppercase;
	color: var(--emerald);
	padding: var(--space-3) 0 var(--space-1) var(--space-6);
	border-bottom: 0;
}

.menu-sheet nav .sub-menu .sub-menu a {
	font-family: var(--font-ui);
	font-size: var(--text-body);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink);
	padding: var(--space-2) 0 var(--space-2) var(--space-8);
	border-bottom: 0;
}

.menu-sheet__account {
	display: inline-block;
	margin-top: var(--space-8);
}

body.menu-sheet-open {
	overflow: hidden;
}

/* ---------- footer ---------- */

/* the footer's ground class carries its pairings: on sage, White serif
   headings, Ink body and underlined links */
.site-footer h2 {
	color: var(--white);
	font-size: var(--text-h3);
	font-weight: 600;
	margin-bottom: var(--space-4);
}

.site-footer__zones {
	display: grid;
	gap: var(--space-12);
	padding-block: var(--space-16);
}

@media (min-width: 768px) {
	.site-footer__zones {
		/* the practical column earns the widest track — its longest line
		   ("Same-day local delivery in Tarrant County") fits unbroken
		   (John R25c); the mission is 24ch-capped and never needed 1.4fr */
		grid-template-columns: 1fr 1.4fr 1fr;
		gap: var(--space-16);
	}
}

/* the footer centers (John R25b): every zone's content center-justified,
   the brandmark and socials included; Browse runs two columns; the hours
   align their colons via an inline two-column grid — labels right-aligned
   so every colon ends at one edge, the whole block shrink-wrapped and
   centered. No magic numbers; resize-proof. */
.site-footer__brand,
.site-footer__practical,
.site-footer__nav {
	text-align: center;
}

.site-footer__brandmark svg,
.site-footer__brandmark img {
	margin-inline: auto;
}

.site-footer__social {
	justify-content: center;
}

.site-footer__practical .site-footer__group {
	margin: var(--space-4) 0 0;
}

.site-footer__line {
	margin: 0;
}

.site-footer__hours-wrap {
	/* the wrap centers the shrink-wrapped grid */
	text-align: center;
}

.site-footer__hours {
	display: inline-grid;
	grid-template-columns: auto auto;
	column-gap: 0.6ch;
	row-gap: 0.15em;
	margin: 0;
	text-align: left;
}

.site-footer__hours dt {
	text-align: right;
	font-weight: inherit;
}

.site-footer__hours dd {
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.site-footer__nav ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-2) var(--space-4);
	justify-items: center;
}

.site-footer__brandmark {
	color: var(--white);
	margin-bottom: var(--space-6);
}

.site-footer__brandmark svg {
	width: 11rem;
	height: auto;
	display: block;
}

.site-footer__mission {
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-weight: 500;
	font-style: italic;
	max-width: 24ch;
	/* centered, period retired — the readability pass (John R25) */
	text-align: center;
	margin-inline: auto;
}

.site-footer__social {
	list-style: none;
	margin: var(--space-6) 0 0;
	padding: 0;
	display: flex;
	gap: var(--space-6);
}

.site-footer address {
	font-style: normal;
}

.site-footer__practical p {
	margin-bottom: var(--space-2);
}

/* the reach lines sit flush — phone directly over email (John R25c) */
.site-footer__practical p.site-footer__line {
	margin: 0;
}

.site-footer__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__nav li {
	padding: var(--space-1) 0;
}

.site-footer__legal {
	border-top: 1px solid rgb(240 230 197 / 25%);
	padding-block: var(--space-8);
	font-size: var(--text-small);
}

.site-footer__legal-label {
	display: block;
	font-size: var(--text-kicker);
	font-weight: 600;
	letter-spacing: var(--kicker-tracking);
	text-transform: uppercase;
	margin-bottom: var(--space-4);
}

.site-footer__legal p {
	max-width: none;
	line-height: 1.7;
}

.site-footer__legal-links {
	margin-top: var(--space-4);
	display: flex;
	gap: var(--space-6);
}

/* ---------- hero: the split-panel moment ---------- */

/* mobile: photo stacks above the type panel, seam stays hard; the ground
   class carries the panel color and its pairings */
.hero-split {
	display: flex;
	flex-direction: column-reverse;
}

.hero-split__panel {
	display: flex;
	align-items: center;
}

.hero-split__panel-inner {
	padding: var(--space-16) var(--gutter);
	max-width: 38rem;
}

.hero-split__photo {
	position: relative;
	overflow: hidden;
	min-height: 55vh;
}

/* the photo carries the named single-layer fallback: a slow ≤2% drift plus
   scroll parallax on the container (a masked-figure two-layer build slots
   in when that asset exists); base scale keeps edges covered under both */
.hero-split__photo img {
	width: 100%;
	height: 100%;
	min-height: 55vh;
	object-fit: cover;
	object-position: 50% 22%;
	scale: 1.06;
	animation: photo-drift 20s ease-in-out infinite alternate;
}

@keyframes photo-drift {
	from { scale: 1.06; }
	to { scale: 1.08; }
}

@media (min-width: 768px) {
	.hero-split {
		flex-direction: row;
		min-height: min(90vh, 56rem);
	}

	/* left-breathe: the type block claims the left space */
	.hero-split__panel {
		width: 55%;
		justify-content: flex-start;
	}

	.hero-split__panel-inner {
		padding: var(--space-24) var(--space-8) var(--space-24) 9vw;
		max-width: none;
	}

	.hero-split__photo {
		width: 45%;
		min-height: 0;
	}

	.hero-split__photo img {
		position: absolute;
		inset: 0;
		min-height: 0;
	}
}

/* the sage hero is White-first: every supporting element sits at a
   large-text threshold where White holds the floor (3.93 ≥ 3.0), so zero
   dark text remains on the sage */
.hero-split__kicker {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-6);
	color: var(--white);
	font-size: 1.1875rem;
	font-weight: 700;
}

.ground-sage .hero-split__kicker {
	color: var(--white);
}

.hero-split__sprig {
	display: inline-flex;
	color: var(--white);
}

.hero-split__sprig svg {
	width: 2.25rem;
	height: auto;
	display: block;
}

/* White holds only at display size on sage; everything supporting is Ink */
.hero-split__headline {
	font-size: var(--text-display-xl);
	font-weight: 500;
	line-height: var(--leading-display-xl);
	letter-spacing: -0.015em;
	margin-bottom: var(--space-8);
	color: var(--white);
}

.hero-split__line {
	display: block;
}

.hero-split__headline em {
	font-style: italic;
}

.hero-split__sub {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 1.5;
	color: var(--white);
	margin-bottom: var(--space-6);
}

@media (min-width: 768px) {
	.hero-split__sub {
		font-size: 1.625rem;
	}
}

.hero-split__promise {
	font-size: 1.1875rem;
	font-weight: 700;
	color: var(--white);
	letter-spacing: 0.02em;
	padding-left: var(--space-4);
	border-left: 2px solid var(--white);
	margin-bottom: var(--space-8);
}

.hero-split .text-cta {
	color: var(--white);
	font-size: 1.1875rem;
	font-weight: 700;
}

.hero-split__actions {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	flex-wrap: wrap;
}

/* the load overture — five beats, ≤1.6s. Armed pre-paint only where motion
   is welcome; everyone else gets a single quiet fade, which also plays
   without JS since it is pure CSS. The beats initialize PAUSED and run only
   when the page truly reveals — the age gate's affirmative action, or
   straight away for a verified session — so the sequence never elapses
   behind the overlay. */
.hero-split {
	animation: hero-fade 200ms ease both;
}

@keyframes hero-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

html.overture-play {
	--overture-state: running;
}

html.has-overture .hero-split {
	animation: none;
}

html.has-overture .hero-split__photo {
	animation: photo-wipe calc(var(--overture-scale, 1) * 700ms) var(--ease-reveal) both;
	animation-play-state: var(--overture-state, paused);
}

@keyframes photo-wipe {
	from { clip-path: inset(0 100% 0 0); }
	to { clip-path: inset(0 0 0 0); }
}

html.has-overture .hero-split__kicker {
	animation: rise-fade calc(var(--overture-scale, 1) * 300ms) var(--ease-reveal) calc(var(--overture-scale, 1) * 350ms) both;
	animation-play-state: var(--overture-state, paused);
}

html.has-overture .hero-split__line {
	animation: rise-fade calc(var(--overture-scale, 1) * 500ms) var(--ease-reveal) both;
	animation-play-state: var(--overture-state, paused);
}

html.has-overture .hero-split__line:nth-child(1) { animation-delay: calc(var(--overture-scale, 1) * 450ms); }
html.has-overture .hero-split__line:nth-child(2) { animation-delay: calc(var(--overture-scale, 1) * 540ms); }

html.has-overture .hero-split__sub,
html.has-overture .hero-split__promise,
html.has-overture .hero-split__actions {
	animation: rise-fade calc(var(--overture-scale, 1) * 400ms) var(--ease-reveal) both;
	animation-play-state: var(--overture-state, paused);
}

html.has-overture .hero-split__sub { animation-delay: calc(var(--overture-scale, 1) * 780ms); }
html.has-overture .hero-split__promise { animation-delay: calc(var(--overture-scale, 1) * 860ms); }
html.has-overture .hero-split__actions { animation-delay: calc(var(--overture-scale, 1) * 940ms); }

/* the sprig reveals along its length — a wipe standing in for stroke
   draw-on while the mark exists only as fill paths */
html.has-overture .hero-split__sprig svg {
	animation: sprig-wipe calc(var(--overture-scale, 1) * 600ms) var(--ease-reveal) calc(var(--overture-scale, 1) * 600ms) both;
	animation-play-state: var(--overture-state, paused);
}

@keyframes sprig-wipe {
	from { clip-path: inset(0 100% 0 0); }
	to { clip-path: inset(0 0 0 0); }
}

@keyframes rise-fade {
	from {
		opacity: 0;
		transform: translateY(0.55em);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ---------- the strain ticker: her jar wall, drifting ---------- */

.strain-ticker {
	display: flex;
	overflow: hidden;
	background: var(--paper);
	color: var(--ink);
	border-block: 1px solid rgb(20 16 4 / 20%);
	padding-block: var(--space-4);
}

.strain-ticker__track {
	display: flex;
	flex: none;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	animation: ticker-drift var(--ticker-duration, 150s) linear infinite;
}

.strain-ticker__track li {
	white-space: nowrap;
	font-size: var(--text-kicker);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding-inline: var(--space-6);
	border-right: 1px solid rgb(20 16 4 / 25%);
}

/* every strain is a real destination */
.strain-ticker__track a {
	color: var(--ink);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.strain-ticker__track a:hover,
.strain-ticker__track a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

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

/* keyboard browsing: the band stands still and scrolls natively so the
   focused item is always in view */
.strain-ticker.is-browsing {
	overflow-x: auto;
}

.strain-ticker.is-browsing .strain-ticker__track {
	animation: none;
}

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

/* ---------- chapters: products as art ---------- */

.chapter {
	padding-block: var(--space-24);
}

/* the pinned chapter: the layout holds for ~130vh of extra scroll while
   the staged flower and its caption crossfade — scroll-scrubbed, so it is
   naturally reversible */
.chapter--pinned {
	height: 230vh;
	padding-block: 0;
}

.chapter__pin {
	position: sticky;
	top: 0;
	min-height: 100vh;
	display: flex;
	align-items: center;
}

.chapter__stage {
	position: relative;
	display: grid;
	width: min(30rem, 72vw);
	aspect-ratio: 1;
}

.chapter__stage .chapter__cutout {
	grid-area: 1 / 1;
	width: 100%;
	align-self: center;
}

.chapter__cutout--fade,
.chapter__caption-swap--fade {
	opacity: var(--crossfade, 0);
}

.chapter__stage .chapter__cutout:not(.chapter__cutout--fade),
.chapter__caption-swap:not(.chapter__caption-swap--fade) {
	opacity: calc(1 - var(--crossfade, 0));
}

.chapter__caption {
	position: relative;
	display: grid;
}

.chapter__caption-swap {
	grid-area: 1 / 1;
}

.ground-paper { background: var(--paper); }
.ground-cream { background: var(--cream); }
.ground-sand { background: var(--sand); }

.chapter__layout {
	display: grid;
	gap: var(--space-12);
	align-items: center;
}

@media (min-width: 768px) {
	.chapter__layout {
		grid-template-columns: 5fr 6fr;
		gap: var(--space-16);
	}

	.chapter:nth-of-type(even) .chapter__copy {
		order: 2;
	}
}

.chapter__headline {
	font-size: var(--text-h1);
	font-weight: 500;
	max-width: 14ch;
}

.chapter__body {
	font-size: var(--text-body);
	max-width: 44ch;
	margin-bottom: var(--space-6);
}

/* true-alpha cutouts sit directly on the section ground; the stage box
   reserves the space and each image fades in 200ms once decoded */
.chapter__art {
	margin: 0;
	position: relative;
	display: grid;
	justify-items: center;
	gap: var(--space-6);
}

.chapter__cutout {
	width: min(30rem, 72vw);
	max-height: 34rem;
	object-fit: contain;
	filter: drop-shadow(0 18px 22px rgb(20 16 4 / 22%));
}

/* A3.9 framed-photo panel: where a clean cutout mask is impossible, the uncut
   product photo sits in a framed panel — never a broken mask or a blend hack.
   The beverage chapter's permanent treatment (J-7 ruled 2026-07-24 — the damaged
   cutout is not replaced); driven by the chapter's 'framed' flag in front-page.php. */
.chapter__art--framed .chapter__frame {
	width: min(26rem, 68vw);
	padding: var(--space-4);
	background: var(--white);
	border: 1px solid rgb(20 16 4 / 14%);
	border-radius: var(--radius-field);
	box-shadow: var(--shadow-card);
}

.chapter__art--framed .chapter__photo {
	display: block;
	width: 100%;
	height: auto;
	border-radius: calc(var(--radius-field) - 2px);
}

.has-motion [data-fade-in] {
	transition: opacity 200ms ease;
}

.has-motion [data-fade-in]:not(.is-decoded) {
	opacity: 0;
}

.chapter__caption {
	width: min(18rem, 80%);
}

/* ---------- featured rail ---------- */

.featured-rail {
	background: var(--paper);
	padding: var(--space-16) 0 var(--space-24);
}

.featured-rail__heading {
	font-family: var(--font-display);
	font-size: var(--text-display);
	font-weight: 600;
	line-height: var(--leading-display);
	margin: 0 0 var(--space-8);
}

/* the picks stay a list everywhere; on small screens the list snap-scrolls
   sideways (A2.7) — no autoplay, nothing hidden from keyboard or SR. The
   compound selector outweighs the catalog grid rule declared later. */
@media (max-width: 700px) {
	.product-grid.featured-rail__grid {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: var(--space-4);
		padding-bottom: var(--space-4);
	}

	.product-grid.featured-rail__grid .product-card {
		flex: 0 0 78%;
		scroll-snap-align: start;
	}
}

/* ---------- our story: the brand narrative ---------- */

/* the opening breathes: display leading (not the xl-tight token), a full
   step between each element, generous block padding — rhythm from the
   system scale throughout */
.story-hero {
	padding: var(--space-32) 0;
}

.story-hero__inner {
	max-width: 56rem;
}

.story-hero__kicker {
	color: var(--cream);
	margin-bottom: var(--space-6);
}

.story-hero__headline {
	font-family: var(--font-display);
	/* capped below the xl token so the headline breaks as authored —
	   "Led with love, / grown from healing." — instead of stranding the
	   last word on a third line (measured: two lines need 5.5rem at this
	   measure); the slope matches the xl token's */
	font-size: clamp(3.25rem, 8vw, 5.5rem);
	font-weight: 500;
	line-height: var(--leading-display);
	color: var(--white);
	margin: 0 0 var(--space-8);
}

.story-hero__mission {
	font-size: var(--text-h3);
	line-height: var(--leading-body);
	color: var(--cream);
	max-width: var(--measure);
}

.story-founder {
	padding: var(--space-24) 0;
}

.story-founder__layout {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: var(--space-16);
	align-items: center;
}

@media (max-width: 860px) {
	.story-founder__layout {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}
}

.story-founder__figure {
	margin: 0;
}

/* Candice's before-and-after survivorship collage (owner-directed): two tall
   portraits side by side — during treatment, and healthy today. The slot takes
   the collage's own near-square ratio so the WHOLE image shows and neither
   photo is sliced; centered, not face-cropped. */
.story-founder__portrait {
	width: 100%;
	aspect-ratio: 1536 / 1458;
	object-fit: cover;
	object-position: 50% 50%;
	border-radius: var(--radius);
}

.story-founder__caption {
	font-size: var(--text-kicker);
	font-weight: 600;
	letter-spacing: var(--kicker-tracking);
	text-transform: uppercase;
	color: rgb(20 16 4 / 70%);
	margin-top: var(--space-3);
}

.story-founder__prose p:not(.kicker) {
	font-size: var(--text-h3);
	line-height: 1.6;
	max-width: var(--measure);
	margin: 0 0 var(--space-4);
}

.story-catalyst {
	padding: var(--space-24) 0;
}

.story-catalyst__inner {
	max-width: 48rem;
}

/* A5.1 on the sage ground: White holds only at large sizes — this kicker
   rides the 19px/700 treatment, so it earns White where the 13px base
   kicker (`.ground-sage .kicker`, Ink) cannot */
.story-catalyst__kicker,
.ground-sage .story-catalyst__kicker {
	color: var(--white);
	font-size: 1.1875rem;
	font-weight: 700;
}

.story-catalyst__lead {
	font-family: var(--font-display);
	font-size: var(--text-h1);
	font-weight: 500;
	line-height: 1.25;
	color: var(--white);
	margin: 0 0 var(--space-6);
}

/* A5.1: White/400 on sage needs ≥24px — this rides the 26px sub scale */
.story-catalyst__note {
	font-size: 1.625rem;
	line-height: 1.5;
	color: var(--white);
	max-width: var(--measure);
}

.story-press {
	padding: var(--space-24) 0;
}

.story-press__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--space-16);
	align-items: center;
}

.story-press--no-photo .story-press__layout {
	grid-template-columns: 1fr;
}

@media (max-width: 860px) {
	.story-press__layout {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}
}

.story-press__photo {
	width: 100%;
	height: auto;
	border-radius: var(--radius);
}

.story-press__quote {
	font-family: var(--font-display);
	font-size: var(--text-h1);
	font-weight: 500;
	line-height: 1.25;
	margin: var(--space-3) 0 var(--space-3);
	border: 0;
	padding: 0;
}

.story-press__source {
	font-size: var(--text-small);
	color: rgb(20 16 4 / 70%);
	margin: 0 0 var(--space-1);
}

.story-press__source + .story-press__actions {
	margin-top: var(--space-8);
}

.story-press__actions {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	flex-wrap: wrap;
}

/* ---------- contact ---------- */

.contact {
	padding: var(--space-12) 0 var(--space-24);
}

.contact__header {
	margin-bottom: var(--space-12);
}

.contact__title {
	font-family: var(--font-display);
	font-size: var(--text-display);
	font-weight: 600;
	line-height: var(--leading-display);
	margin: 0 0 var(--space-2);
}

/* the form stays simple: one measured column above the visit plate */
.contact__form {
	max-width: 40rem;
	margin-bottom: var(--space-16);
}

/* the visit plate: the store as its own specimen beside the framed map */
.visit-plate {
	padding: var(--space-16) 0 var(--space-24);
}

.visit-plate__heading {
	font-family: var(--font-display);
	font-size: var(--text-h1);
	font-weight: 600;
	line-height: var(--leading-display);
	margin: 0 0 var(--space-8);
}

.visit-plate__layout {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	gap: var(--space-8);
	align-items: start;
}

@media (max-width: 860px) {
	.visit-plate__layout {
		grid-template-columns: 1fr;
	}
}

.visit-plate__tag {
	background: var(--white);
}

.visit-plate__address {
	white-space: pre-line;
}

.visit-plate__rows {
	margin: var(--space-4) 0 0;
}

.visit-plate__row {
	display: grid;
	grid-template-columns: minmax(5rem, auto) 1fr;
	gap: var(--space-4);
	padding-top: var(--space-3);
	border-top: 1px solid rgb(20 16 4 / 12%);
}

.visit-plate__row dt {
	font-size: var(--text-kicker);
	font-weight: 600;
	letter-spacing: var(--kicker-tracking);
	text-transform: uppercase;
	color: rgb(20 16 4 / 70%);
}

.visit-plate__row dd {
	margin: 0;
	font-size: var(--text-small);
	white-space: pre-line;
}

/* phone and email as the papers */
.visit-plate__papers {
	list-style: none;
	margin: var(--space-4) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.visit-plate__chip {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--space-4);
	border: 1px solid rgb(20 16 4 / 30%);
	border-radius: var(--radius);
	background: var(--white);
	color: var(--emerald);
	font-size: var(--text-small);
	font-weight: 500;
	text-decoration: none;
}

.visit-plate__chip:hover {
	border-color: var(--ink);
}

.contact__map {
	border-radius: var(--radius);
	overflow: hidden;
	border: var(--rule-ink);
	background: var(--white);
}

.contact__map iframe {
	display: block;
	width: 100%;
	height: 24rem;
	border: 0;
}

/* the Gravity Form, restyled to the tokens. The active Orbital theme drives
   its controls from these custom properties — the intended theming surface,
   set here to the brand palette. */
.contact__form .gform-theme--framework {
	--gf-ctrl-btn-bg-color-primary: var(--emerald);
	--gf-ctrl-btn-bg-color-hover-primary: var(--emerald);
	--gf-ctrl-btn-bg-color-active-primary: var(--emerald);
	--gf-ctrl-btn-border-color-primary: var(--emerald);
	--gf-ctrl-btn-color-primary: var(--white);
	--gf-color-primary: var(--emerald);
	--gf-ctrl-border-color-focus: var(--emerald);
	--gf-radius: var(--radius);
	--gf-color-danger: var(--signal-red);
	--gf-ctrl-label-color-required: var(--signal-red);
}

.contact__form .gform_wrapper .gfield_label {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: var(--text-small);
}

/* the required indicator speaks in the system's Signal red */
.contact__form .gform_wrapper .gfield_label .gfield_required,
.contact__form .gform_wrapper .gfield_required .gfield_required_text,
.contact__form .gform_wrapper span.gfield_required {
	color: var(--signal-red);
}

.contact__form .gform_wrapper input:not([type="submit"]),
.contact__form .gform_wrapper textarea,
.contact__form .gform_wrapper select {
	width: 100%;
	min-height: 44px;
	padding: var(--space-2) var(--space-3);
	border: 1px solid rgb(20 16 4 / 30%);
	border-radius: var(--radius);
	background: var(--white);
	font: inherit;
	font-size: var(--text-body);
}

.contact__form .gform_wrapper textarea {
	min-height: 8rem;
}

.contact__form .gform_wrapper .gform_footer input[type="submit"],
.contact__form .gform_wrapper .gform_button {
	font-family: var(--font-ui);
	font-size: var(--text-small);
	font-weight: 600;
	background: var(--emerald);
	color: var(--white);
	padding: 0.875rem 2rem;
	border: 0;
	border-radius: var(--radius);
	cursor: pointer;
	min-height: 44px;
}

/* ---------- lounge page ---------- */

.lounge-hero {
	position: relative;
	overflow: hidden;
	padding: var(--space-32) 0 var(--space-24);
}

.lounge-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.32;
	z-index: 0;
}

/* the §4.1 emerald-wash floor under the copy: a left-anchored scrim guarantees
   the wash over the text column even where the rendering behind it is light
   (the pale couch/rug), without over-darkening the whole image (cutover gate) */
.lounge-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(100deg, rgb(27 67 50 / 66%) 0 44%, rgb(27 67 50 / 24%) 74%, transparent);
}

.lounge-hero__inner {
	position: relative;
	z-index: 2;
	max-width: 44rem;
}

.lounge-hero__kicker {
	color: var(--cream);
}

.lounge-hero__headline {
	font-family: var(--font-display);
	font-size: var(--text-display-xl);
	font-weight: 500;
	line-height: var(--leading-display-xl);
	color: var(--white);
	margin: 0 0 var(--space-6);
}

.lounge-hero__lead {
	font-size: var(--text-h3);
	line-height: 1.5;
	color: var(--cream);
	max-width: var(--measure);
	margin: 0 0 var(--space-8);
}

/* the A6.1 honesty caption — tracked caps, full-opacity Cream (A7.4),
   never dimmed below the floor */
.lounge-hero__note {
	font-size: var(--text-kicker);
	font-weight: 600;
	letter-spacing: var(--kicker-tracking);
	text-transform: uppercase;
	color: var(--cream);
	margin: var(--space-8) 0 0;
}

.lounge-detail {
	padding: var(--space-24) 0;
}

.lounge-detail__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	gap: var(--space-12);
}

.lounge-detail__kicker {
	margin-bottom: var(--space-3);
}

.lounge-detail__heading {
	font-family: var(--font-display);
	font-size: var(--text-h1);
	font-weight: 600;
	margin: 0 0 var(--space-4);
}

.lounge-detail__card p {
	font-size: var(--text-h3);
	line-height: 1.6;
	max-width: var(--measure);
	margin: 0 0 var(--space-4);
}

/* ---------- lab results: the flagship trust surface ---------- */

/* the trust-statement band: the page opens as proof, not a directory */
.trust-statement {
	padding: var(--space-16) 0;
}

.trust-statement__title {
	font-family: var(--font-ui);
	font-size: var(--text-kicker);
	font-weight: 700;
	letter-spacing: var(--kicker-tracking);
	text-transform: uppercase;
	color: var(--cream);
	margin: 0 0 var(--space-4);
}

.trust-statement__line {
	font-family: var(--font-display);
	font-size: var(--text-display);
	font-weight: 600;
	line-height: var(--leading-display);
	color: var(--white);
	margin: 0;
	max-width: 18ch;
}

.trust-statement__intro {
	font-size: var(--text-h3);
	color: var(--cream);
	max-width: var(--measure);
	margin: var(--space-4) 0 0;
}

.lab-results__body {
	padding-top: var(--space-12);
	padding-bottom: var(--space-24);
}

.lab-results__filter {
	margin-bottom: var(--space-8);
}

.lab-results__filter label {
	display: block;
	font-weight: 600;
	margin-bottom: var(--space-1);
}

.lab-results__filter input {
	width: min(100%, 28rem);
	min-height: 44px;
	padding: 0 var(--space-3);
	border: 1px solid rgb(20 16 4 / 30%);
	border-radius: var(--radius);
	background: var(--white);
	font: inherit;
	font-size: var(--text-body);
}

.lab-results__no-match,
.lab-results__empty {
	font-size: var(--text-h3);
	color: rgb(20 16 4 / 75%);
	max-width: var(--measure);
}

.lab-group {
	margin-bottom: var(--space-12);
}

.lab-group[hidden] {
	display: none;
}

/* category groups open as mini chapters on their line tints */
.lab-group__heading {
	font-family: var(--font-display);
	font-size: var(--text-h1);
	font-weight: 600;
	margin: 0 0 var(--space-6);
	padding: var(--space-4) var(--space-6);
	border-radius: var(--radius);
}

.lab-group__heading--d9 { background: var(--tint-d9); }
.lab-group__heading--thca { background: var(--tint-thca); }
.lab-group__heading--cbd { background: var(--tint-cbd); }
.lab-group__heading--default { background: color-mix(in srgb, var(--paper) 90%, var(--sand)); }

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

.lab-entry[hidden] {
	display: none;
}

/* the papers row: the tag beside its certificates, ruled like a file */
.lab-entry {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4) var(--space-6);
	flex-wrap: wrap;
	padding: var(--space-4) 0;
	border-bottom: 1px solid rgb(20 16 4 / 12%);
}

.lab-entry .specimen-tag {
	flex: 0 1 22rem;
}

.lab-entry__coas {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

/* a certificate as a date chip, not a link dump */
.lab-entry__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	min-height: 44px;
	padding: 0 var(--space-4);
	border: 1px solid rgb(20 16 4 / 30%);
	border-radius: var(--radius);
	background: var(--white);
	color: var(--emerald);
	font-size: var(--text-small);
	font-weight: 500;
	text-decoration: none;
}

.lab-entry__link:hover {
	border-color: var(--ink);
}

.lab-entry__updated {
	font-size: var(--text-kicker);
	font-weight: 600;
	letter-spacing: var(--kicker-tracking);
	text-transform: uppercase;
	color: rgb(20 16 4 / 60%);
	border-left: 1px solid rgb(20 16 4 / 20%);
	padding-left: var(--space-3);
}

/* the archive — discontinued strains, product-less by design */
.lab-archive {
	margin-top: var(--space-16);
	border-top: 1px solid rgb(20 16 4 / 20%);
	padding-top: var(--space-8);
}

.lab-archive summary {
	font-family: var(--font-display);
	font-size: var(--text-h2);
	font-weight: 600;
	cursor: pointer;
	min-height: 44px;
	display: flex;
	align-items: center;
}

.lab-archive__note {
	font-size: var(--text-body);
	color: rgb(20 16 4 / 70%);
	max-width: var(--measure);
	margin: var(--space-3) 0 var(--space-8);
}

/* ---------- events & news: the rails and the page ---------- */

.events-rail,
.news-rail {
	background: var(--paper);
	padding: var(--space-16) 0 var(--space-24);
}

.events-rail__heading,
.news-rail__heading,
.events-page__title {
	font-family: var(--font-display);
	font-size: var(--text-display);
	font-weight: 600;
	line-height: var(--leading-display);
	margin: 0 0 var(--space-8);
}

.events-rail__grid,
.news-rail__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
	gap: var(--space-8) var(--space-6);
}

.event-card,
.news-item {
	background: var(--white);
	border: var(--rule-ink);
	border-radius: var(--radius);
	padding: var(--space-6);
}

.event-card__photo,
.news-item__photo {
	width: calc(100% + 2 * var(--space-6));
	margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-4);
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--radius) var(--radius) 0 0;
}

/* the date block carries the tag's rule language */
.event-card__date,
.news-item__posted {
	font-size: var(--text-kicker);
	font-weight: 600;
	letter-spacing: var(--kicker-tracking);
	text-transform: uppercase;
	color: var(--emerald);
	margin: 0 0 var(--space-3);
	padding-bottom: var(--space-2);
	border-bottom: var(--rule-ink);
	display: flex;
	align-items: baseline;
	gap: var(--space-2);
	flex-wrap: wrap;
}

.event-card__today {
	background: var(--emerald);
	color: var(--cream);
	padding: 0.1rem var(--space-2);
	border-radius: var(--radius);
}

.event-card__canceled {
	color: var(--notice-amber);
}

.event-card__title,
.news-item__title {
	font-family: var(--font-display);
	font-size: var(--text-h2);
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 var(--space-2);
}

.event-card--canceled .event-card__title {
	text-decoration: line-through;
	color: rgb(20 16 4 / 60%);
}

.event-card__place {
	font-size: var(--text-small);
	font-weight: 600;
	margin: 0 0 var(--space-2);
}

.event-card__blurb,
.news-item__body {
	font-size: var(--text-body);
	margin: 0;
}

.event-card__link,
.news-item__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: var(--space-2);
	color: var(--emerald);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.events-page {
	padding: var(--space-12) 0 var(--space-24);
}

.events-page__section {
	margin-bottom: var(--space-16);
}

/* the marquee: the next event on the calendar, its date staged huge */
.marquee {
	margin-bottom: var(--space-8);
	padding: var(--space-12) 0;
}

.marquee__layout {
	display: flex;
	align-items: center;
	gap: var(--space-8) var(--space-12);
	flex-wrap: wrap;
}

/* the date as the stage object, in the tag's own anatomy */
.marquee__date {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1;
	background: var(--white);
	border: var(--rule-ink);
	border-radius: var(--radius);
	padding: var(--space-6) var(--space-8);
	min-width: 11rem;
}

.marquee__weekday {
	font-size: var(--text-kicker);
	font-weight: 600;
	letter-spacing: var(--kicker-tracking);
	text-transform: uppercase;
	padding-bottom: var(--space-2);
	margin-bottom: var(--space-3);
	border-bottom: var(--rule-ink);
	align-self: stretch;
	text-align: center;
}

.marquee__day {
	font-family: var(--font-display);
	font-size: clamp(4rem, 8vw, 6.5rem);
	font-weight: 600;
}

.marquee__month {
	font-size: var(--text-kicker);
	font-weight: 600;
	letter-spacing: var(--kicker-tracking);
	text-transform: uppercase;
	margin-top: var(--space-2);
}

.marquee__copy {
	flex: 1;
	min-width: 18rem;
}

.marquee__when {
	font-size: var(--text-kicker);
	font-weight: 600;
	letter-spacing: var(--kicker-tracking);
	text-transform: uppercase;
	color: var(--emerald);
	margin: 0 0 var(--space-2);
	display: flex;
	align-items: baseline;
	gap: var(--space-2);
	flex-wrap: wrap;
}

.marquee__today {
	background: var(--emerald);
	color: var(--cream);
	padding: 0.15rem var(--space-3);
	border-radius: var(--radius);
}

@media (prefers-reduced-motion: no-preference) {
	.marquee__today {
		animation: today-glow 2.4s ease-in-out infinite;
	}

	@keyframes today-glow {
		0%, 100% { box-shadow: 0 0 0 0 rgb(27 67 50 / 45%); }
		60% { box-shadow: 0 0 0 8px rgb(27 67 50 / 0%); }
	}
}

.marquee__title {
	font-family: var(--font-display);
	font-size: var(--text-h1);
	font-weight: 600;
	line-height: var(--leading-display);
	margin: 0 0 var(--space-2);
}

.marquee__place {
	font-size: var(--text-small);
	font-weight: 600;
	margin: 0 0 var(--space-2);
}

.marquee__blurb {
	font-size: var(--text-h3);
	max-width: var(--measure);
	margin: 0;
}

.marquee__cta {
	margin-top: var(--space-6);
}

.marquee__photo {
	flex: 0 1 20rem;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--radius);
	border: var(--rule-ink);
}

/* the newest news item leads at lede weight — same anatomy, scaled */
.news-item--lede {
	margin-bottom: var(--space-8);
	padding: var(--space-8);
}

.news-item--lede .news-item__photo {
	width: calc(100% + 2 * var(--space-8));
	margin: calc(-1 * var(--space-8)) calc(-1 * var(--space-8)) var(--space-6);
}

.news-item--lede .news-item__title {
	font-size: var(--text-display);
	line-height: var(--leading-display);
	max-width: 22ch;
}

.news-item--lede .news-item__body {
	font-size: var(--text-h3);
	max-width: var(--measure);
}

.events-page__section h2 {
	font-family: var(--font-display);
	font-size: var(--text-h1);
	font-weight: 600;
	margin: 0 0 var(--space-6);
}

.events-page__empty {
	font-size: var(--text-h3);
	color: rgb(20 16 4 / 75%);
	max-width: var(--measure);
}

.events-page__past {
	margin-top: var(--space-8);
}

.events-page__past summary {
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-weight: 600;
	cursor: pointer;
	min-height: 44px;
	display: flex;
	align-items: center;
	margin-bottom: var(--space-4);
}

/* ---------- trust band ---------- */

.trust-band {
	background: var(--white);
	border-block: 1px solid rgb(20 16 4 / 12%);
	padding-block: var(--space-12);
}

.trust-band__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-8);
}

@media (min-width: 768px) {
	.trust-band__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.trust-band__item {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-size: var(--text-small);
	font-weight: 500;
}

.trust-band__icon {
	display: inline-flex;
	color: var(--emerald);
	flex: none;
}

.trust-band__icon svg {
	width: 1.75rem;
	height: 1.75rem;
}

/* ---------- the press moment ---------- */

.press-quote {
	padding-block: var(--space-24);
	text-align: center;
}

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

.press-quote__quote p {
	font-family: var(--font-display);
	font-size: var(--text-display);
	font-weight: 500;
	line-height: 1.1;
	max-width: none;
	margin: 0 auto;
}

.press-quote__source {
	font-size: var(--text-kicker);
	font-weight: 600;
	letter-spacing: var(--kicker-tracking);
	text-transform: uppercase;
	max-width: none;
	margin-bottom: var(--space-1);
}

/* ---------- story teaser ---------- */

.story-teaser {
	padding-block: var(--space-24);
}

.story-teaser__layout {
	display: grid;
	gap: var(--space-12);
	align-items: center;
}

@media (min-width: 768px) {
	.story-teaser__layout {
		grid-template-columns: auto 1fr;
		gap: var(--space-16);
	}
}

/* the founder before-and-after collage as a warm personal aside — sized a touch
   larger than the old single portrait so both photos read, still an aside and
   not a hero. Near-square (the collage's own ratio) so neither photo is sliced. */
.story-teaser__portrait {
	border-radius: var(--radius);
	width: 17rem;
	aspect-ratio: 1536 / 1458;
	object-fit: cover;
	justify-self: center;
}

.story-teaser__inner {
	max-width: 46rem;
}

.story-teaser__kicker {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.story-teaser__sprig {
	display: inline-flex;
	color: var(--emerald);
}

.story-teaser__sprig svg {
	width: 2rem;
	height: auto;
	display: block;
}

/* the sprig draws on when the teaser reveals */
.has-motion .story-teaser__inner.is-revealed .story-teaser__sprig svg {
	animation: sprig-wipe 600ms var(--ease-reveal) 200ms both;
}

.story-teaser__body {
	font-family: var(--font-display);
	font-size: var(--text-h3);
	line-height: 1.5;
	max-width: 52ch;
	margin-block: var(--space-6);
}

/* ---------- the specimen tag ---------- */

.specimen-tag {
	background: var(--white);
	border: var(--rule-ink);
	border-radius: var(--radius);
	padding: var(--space-4) var(--space-4) var(--space-3);
	color: var(--ink);
}

/* no text-transform: the PHP eyebrow caser owns the letters, so protected
   casing (THCa) survives to the glass */
.specimen-tag__eyebrow {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: var(--text-kicker);
	font-weight: 600;
	letter-spacing: 0.12em;
	padding-bottom: var(--space-2);
	margin-bottom: var(--space-3);
	border-bottom: 1px solid rgb(20 16 4 / 20%);
}

.specimen-tag__name {
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-weight: 600;
	line-height: 1.25;
	margin: 0 0 var(--space-1);
}

.specimen-tag__data {
	font-size: var(--text-small);
	margin: 0;
}

.specimen-tag__coa {
	display: inline-block;
	font-size: var(--text-small);
	margin-top: var(--space-2);
}

/* ---------- catalog: the gallery floor ---------- */

.catalog {
	background: var(--paper);
}

.catalog__body {
	padding-top: var(--space-8);
	padding-bottom: var(--space-24);
}

/* the floor band: the category opens as a staged moment on its line tint —
   kicker, serif name, blurb, one oversized product bleeding off the edge */
.floor-band {
	position: relative;
	overflow: hidden;
}

.floor-band--d9 { background: var(--tint-d9); }
.floor-band--thca { background: var(--tint-thca); }
.floor-band--cbd { background: var(--tint-cbd); }
.floor-band--default { background: color-mix(in srgb, var(--paper) 90%, var(--sand)); }

.floor-band__layout {
	position: relative;
	min-height: 20rem;
	display: flex;
	align-items: center;
	padding-top: var(--space-12);
	padding-bottom: var(--space-12);
}

.floor-band--compact .floor-band__layout {
	min-height: 14rem;
	padding-top: var(--space-8);
	padding-bottom: var(--space-8);
}

.floor-band__copy {
	max-width: 34rem;
	position: relative;
	z-index: 1;
}

.floor-band__kicker {
	margin-bottom: var(--space-3);
}

.floor-band__title {
	font-family: var(--font-display);
	font-size: var(--text-display);
	font-weight: 600;
	line-height: var(--leading-display);
	margin: 0;
}

.floor-band__blurb {
	font-size: var(--text-h3);
	color: rgb(20 16 4 / 75%);
	max-width: var(--measure);
	margin: var(--space-3) 0 0;
}

/* the band's staged object: oversized, cropped by the band's edge, its
   white ground melting into the tint under multiply */
.floor-band__art {
	position: absolute;
	margin: 0;
	right: calc(-1 * var(--space-8));
	bottom: calc(-1 * var(--space-12));
	width: min(26rem, 34vw);
	pointer-events: none;
}

.floor-band__cutout {
	width: 100%;
	height: auto;
	mix-blend-mode: multiply;
}

@media (max-width: 640px) {
	.floor-band__art {
		display: none;
	}

	.floor-band__layout {
		min-height: 0;
	}
}

/* the toolbar: chips, count, and sort seated in one hairline-ruled row */
.catalog-toolbar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-3) var(--space-4);
	padding-bottom: var(--space-4);
	margin-bottom: var(--space-8);
	border-bottom: 1px solid rgb(20 16 4 / 20%);
}

.catalog-toolbar__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-right: auto;
}

.catalog-chip {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--space-4);
	border: 1px solid rgb(20 16 4 / 30%);
	border-radius: var(--radius);
	font-size: var(--text-small);
	font-weight: 500;
	text-decoration: none;
	color: var(--ink);
	background: var(--white);
}

.catalog-chip:hover {
	border-color: var(--ink);
}

.catalog-chip.is-current {
	background: var(--emerald);
	border-color: var(--emerald);
	color: var(--cream);
}

.catalog-toolbar__count {
	font-size: var(--text-kicker);
	font-weight: 600;
	letter-spacing: var(--kicker-tracking);
	text-transform: uppercase;
	color: rgb(20 16 4 / 70%);
	margin: 0;
}

.catalog-toolbar__form {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.catalog-toolbar__form label {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-small);
	font-weight: 500;
}

.catalog-toolbar__form select {
	appearance: none;
	min-height: 44px;
	padding: 0 var(--space-8) 0 var(--space-3);
	border: 1px solid rgb(20 16 4 / 30%);
	border-radius: var(--radius);
	background: var(--white) 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='%23141004' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right var(--space-3) center / 12px 8px;
	color: var(--ink);
	font: inherit;
	font-size: var(--text-small);
}

.has-chrome .catalog-toolbar__apply {
	display: none;
}

.product-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: var(--space-8) var(--space-6);
}

.product-card {
	display: flex;
	flex-direction: column;
}

.product-card__link {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	flex: 1; /* the card fills its grid row, so the block below pins to the bottom */
	text-decoration: none;
	color: var(--ink);
}

/* the card stage: the object on its line tint, never a white box; under
   the cursor the second photograph takes the stage where one exists */
.product-card__media {
	display: block;
	position: relative;
	aspect-ratio: 1;
	background: var(--tint-default);
	border-radius: var(--radius);
	overflow: hidden;
}

.product-card__media--d9 { background: var(--tint-d9); }
.product-card__media--thca { background: var(--tint-thca); }
.product-card__media--cbd { background: var(--tint-cbd); }

.product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.product-card__swap {
	position: absolute;
	inset: 0;
	opacity: 0;
}

.product-card__link:hover .product-card__media img:first-child:not(:only-child),
.product-card__link:focus-visible .product-card__media img:first-child:not(:only-child) {
	opacity: 0;
}

.product-card__link:hover .product-card__swap,
.product-card__link:focus-visible .product-card__swap {
	opacity: 1;
}

/* the tag lifts one shadow step under the cursor */
.product-card__link:hover .specimen-tag,
.product-card__link:focus-visible .specimen-tag {
	box-shadow: 0 3px 10px rgb(20 16 4 / 15%);
}

@media (prefers-reduced-motion: no-preference) {
	.product-card__media img {
		transition: transform 400ms ease, opacity var(--duration-micro) ease;
	}

	.product-card__link .specimen-tag {
		transition: box-shadow var(--duration-micro) ease;
	}

	.product-card__link:hover .product-card__media img {
		transform: scale(1.03);
	}
}

.product-card__link:hover .specimen-tag__name {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* price and badge settle to one baseline across the row; the varying
   name/potency heights breathe out above them */
.product-card__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-2);
	margin-top: auto;
}

/* an out-of-stock card keeps its button slot empty (A9.4 — no button is
   reintroduced) so the row's price, badge, and button lines all hold */
.product-card:not(:has(.product-card__add)) {
	padding-bottom: calc(44px + var(--space-3));
}

.product-card__price {
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-weight: 600;
}

.product-card__price del {
	font-size: var(--text-small);
	font-weight: 400;
	color: rgb(20 16 4 / 60%);
	margin-right: var(--space-1);
}

.product-card__price ins {
	text-decoration: none;
}

.stock-badge {
	font-size: var(--text-kicker);
	font-weight: 600;
	letter-spacing: var(--kicker-tracking);
	text-transform: uppercase;
	white-space: nowrap;
}

.stock-badge--in { color: var(--success-green); }
.stock-badge--low { color: var(--notice-amber); }
.stock-badge--out { color: var(--ink); }

.product-card__add {
	margin-top: var(--space-3);
	text-align: center;
}

.product-card__add.is-added {
	background: var(--success-green);
	border-color: var(--success-green);
}

.product-card__error {
	font-size: var(--text-small);
	color: var(--signal-red);
	margin: var(--space-3) 0 0;
}

.product-card__error[hidden] {
	display: none;
}

/* shelf talkers: the floor's room dividers, spanning the grid between rows */
.product-grid .shelf-talker {
	grid-column: 1 / -1;
}

.shelf-talker {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-8) var(--space-6);
	border-radius: var(--radius);
	text-align: center;
}

.shelf-talker__line {
	font-family: var(--font-display);
	font-size: var(--text-h2);
	font-weight: 600;
	line-height: var(--leading-display);
	margin: 0;
}

.shelf-talker__trust {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2) var(--space-6);
	font-size: var(--text-body);
	font-weight: 500;
}

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

.shelf-talker__strains {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2) var(--space-6);
}

.shelf-talker__strains a {
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-style: italic;
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.catalog-empty {
	padding: var(--space-16) 0;
	text-align: center;
}

.catalog-empty p {
	font-size: var(--text-h3);
	margin: 0 0 var(--space-6);
}

/* ---------- the specimen plate: stage + dossier ---------- */

.plate__layout {
	display: grid;
	grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
	gap: var(--space-16);
	align-items: start;
	padding-top: var(--space-8);
	padding-bottom: var(--space-24);
}

@media (max-width: 900px) {
	.plate__layout {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}
}

/* the stage: a line-tinted environment, never a white border box */
.plate__stage {
	position: sticky;
	top: var(--space-8);
	border-radius: var(--radius);
	padding: var(--space-12) var(--space-8) var(--space-8);
	min-height: 34rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-6);
}

@media (max-width: 900px) {
	.plate__stage {
		position: static;
		min-height: 0;
		padding: var(--space-8) var(--space-6);
	}
}

.plate--d9 .plate__stage { background: var(--tint-d9); }
.plate--thca .plate__stage { background: var(--tint-thca); }
.plate--cbd .plate__stage { background: var(--tint-cbd); }
.plate--default .plate__stage { background: var(--tint-default); }

.stage__object {
	margin: 0;
	position: relative;
	text-align: center;
}

/* the staged object: the white-ground vendor photography melts into the
   light tint under multiply — the cutout effect the photography allows;
   the img itself carries blend + drift so no ancestor isolates it */
.stage__image {
	max-width: min(100%, 34rem);
	width: 88%;
	height: auto;
	margin-inline: auto;
	mix-blend-mode: multiply;
}

/* soft contact shadow beneath the object */
.stage__object::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -0.75rem;
	transform: translateX(-50%);
	width: 55%;
	height: 1.5rem;
	background: radial-gradient(ellipse at center, rgb(20 16 4 / 18%) 0%, transparent 70%);
}

/* gallery as specimen chips — bordered, keyboard-operable, the selected
   chip carries the non-color indicator (border weight + check) */
.stage__chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--space-3);
	justify-content: center;
	flex-wrap: wrap;
}

.stage__chip {
	position: relative;
	display: block;
	padding: 0.25rem;
	background: var(--white);
	border: 1px solid rgb(20 16 4 / 30%);
	border-radius: var(--radius);
	cursor: pointer;
	min-width: 44px;
	min-height: 44px;
}

.stage__chip img {
	display: block;
	width: 3.5rem;
	height: 3.5rem;
	object-fit: contain;
}

.stage__chip.is-selected {
	border: 2px solid var(--ink);
}

.stage__chip.is-selected::after {
	content: '✓';
	position: absolute;
	top: -0.5rem;
	right: -0.5rem;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 999px;
	background: var(--emerald);
	color: var(--white);
	font-size: 0.75rem;
	line-height: 1.25rem;
	text-align: center;
}

/* the dossier: composed, per-element weight */
.dossier__orientation {
	margin: 0 0 var(--space-4);
}

.dossier__orientation a {
	font-size: var(--text-small);
	font-weight: 500;
	color: var(--emerald);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

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

.plate__dossier .specimen-tag {
	margin-bottom: var(--space-2);
}

.dossier__maker {
	font-size: var(--text-small);
	color: rgb(20 16 4 / 70%);
	margin: 0 0 var(--space-4);
}

/* the counter — everything transactional in one bordered card */
.counter {
	position: sticky;
	top: var(--space-8);
	background: var(--white);
	border: var(--rule-ink);
	border-radius: var(--radius);
	padding: var(--space-6);
	margin: var(--space-6) 0 var(--space-8);
	z-index: 5;
}

@media (max-width: 900px) {
	.counter {
		position: static;
	}
}

.counter__price-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3);
	flex-wrap: wrap;
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-4);
	border-bottom: 1px solid rgb(20 16 4 / 15%);
}

.counter__price {
	font-family: var(--font-display);
	font-size: var(--text-h1);
	font-weight: 600;
	margin: 0;
}

.counter__price del {
	font-size: var(--text-h3);
	font-weight: 400;
	color: rgb(20 16 4 / 60%);
	margin-right: var(--space-2);
}

.counter__price ins {
	text-decoration: none;
}

.counter__per-unit {
	font-size: var(--text-small);
	font-weight: 600;
	color: var(--success-green);
	margin: 0;
	white-space: nowrap;
}

/* variations seated in the card; these selectors are Woo core's stable
   `.variations` markup — the swatch plugin renders into it, we style only
   the core surface; the Clear link gets a real seat instead of overlapping */
.counter .variations {
	width: 100%;
	margin: 0 0 var(--space-4);
}

.counter .variations th,
.counter .variations td {
	text-align: left;
	padding: var(--space-2) var(--space-2) var(--space-2) 0;
	font-size: var(--text-small);
}

.counter .variations select {
	width: 100%;
	min-height: 44px;
	padding: 0 var(--space-3);
	border: 1px solid rgb(20 16 4 / 30%);
	border-radius: var(--radius);
	background: var(--white);
	font: inherit;
	font-size: var(--text-small);
}

.counter .reset_variations {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: var(--text-kicker);
	color: rgb(20 16 4 / 70%);
	text-decoration: underline;
	text-underline-offset: 3px;
	margin-top: var(--space-1);
}

.counter .woocommerce-variation-price {
	margin-bottom: var(--space-3);
	font-weight: 600;
}

/* the fused control: quantity joined to a dominant Add to cart — one shape */
.counter form.cart:not(.variations_form),
.counter .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: stretch;
	gap: 0;
}

.counter .quantity .qty {
	height: 100%;
	min-height: 48px;
	width: 4.25rem;
	padding: 0 var(--space-2);
	border: 1px solid var(--ink);
	border-right: 0;
	border-radius: var(--radius) 0 0 var(--radius);
	font: inherit;
	font-weight: 600;
	text-align: center;
}

.counter .single_add_to_cart_button {
	flex: 1;
	border-radius: 0 var(--radius) var(--radius) 0 !important;
	min-height: 48px;
}

.counter__base {
	display: flex;
	align-items: baseline;
	gap: var(--space-4);
	flex-wrap: wrap;
	margin-top: var(--space-4);
	padding-top: var(--space-4);
	border-top: 1px solid rgb(20 16 4 / 15%);
}

.counter__base .stock-badge {
	margin: 0;
	flex-shrink: 0;
}

.product-page__promise {
	font-size: var(--text-small);
	color: rgb(20 16 4 / 75%);
	margin: 0;
	flex: 1 1 14rem;
}

.counter__footnote {
	font-size: var(--text-kicker);
	margin: var(--space-3) 0 0;
}

.counter__footnote a {
	color: var(--emerald);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.product-page__error {
	font-size: var(--text-small);
	color: var(--signal-red);
	margin: 0 0 var(--space-3);
}

.product-page__error[hidden] {
	display: none;
}

.product-page__out {
	font-weight: 600;
	margin: 0;
}

.product-page__view-cart {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: var(--space-2);
	color: var(--emerald);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* the mobile dock: the same counter, repositioned — one control set */
@media (max-width: 700px) {
	.counter.is-docked {
		position: fixed;
		left: 0;
		right: 0;
		top: auto; /* the sticky state's top must not stretch the fixed dock */
		bottom: 0;
		margin: 0;
		border-radius: 0;
		border-left: 0;
		border-right: 0;
		border-bottom: 0;
		padding: var(--space-3) var(--space-4);
		box-shadow: 0 -4px 16px rgb(20 16 4 / 12%);
		z-index: 90;
	}

	.counter.is-docked .variations,
	.counter.is-docked .woocommerce-variation-price,
	.counter.is-docked .reset_variations,
	.counter.is-docked .counter__base,
	.counter.is-docked .counter__footnote {
		display: none;
	}

	.counter.is-docked .counter__price-row {
		margin-bottom: var(--space-2);
		padding-bottom: 0;
		border-bottom: 0;
	}

	.counter.is-docked .counter__price {
		font-size: var(--text-h3);
	}

	/* the cart summary's dock carries the Total + the Check out control — the
	   product hide-list above hides .counter__base, so the cart wins it back */
	.counter--cart.is-docked .counter__heading,
	.counter--cart.is-docked .counter__rows > :not(.counter__row--total),
	.counter--cart.is-docked .counter__coupon,
	.counter--cart.is-docked .counter__promise {
		display: none;
	}

	.counter--cart.is-docked .counter__base {
		display: block;
		margin: 0;
		padding: 0;
		border: 0;
	}

	.counter--cart.is-docked .counter__rows {
		margin: 0 0 var(--space-2);
	}

	.counter--cart.is-docked .counter__row--total {
		padding: 0;
		border: 0;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.counter.is-docked {
		animation: dock-rise 200ms ease both;
	}

	@keyframes dock-rise {
		from { transform: translateY(100%); }
		to { transform: translateY(0); }
	}
}

/* the disclosure: a plate content row whose heading is the control and
   whose affordance is a − / + mark at the right end of its own hairline
   rule (− open, + closed) — marginalia in the Ink-rule language, no
   chevron pill. Reused by the review form's Write-a-review row. */
.disclosure {
	margin: 0 0 var(--space-6);
}

.disclosure__heading {
	margin: 0;
}

.disclosure__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	width: 100%;
	min-height: 44px;
	padding: 0 0 var(--space-2);
	border: 0;
	border-bottom: 1px solid rgb(20 16 4 / 20%);
	background: none;
	font-family: var(--font-display);
	font-size: var(--text-h2);
	font-weight: 600;
	color: var(--ink);
	text-align: left;
	cursor: pointer;
}

.disclosure__toggle::after {
	content: '−';
	font-family: var(--font-ui);
	font-size: var(--text-h3);
	font-weight: 400;
	line-height: 1;
	color: rgb(20 16 4 / 55%);
}

.disclosure__toggle[aria-expanded="false"]::after {
	content: '+';
}

.disclosure__body {
	padding-top: var(--space-4);
}

.disclosure__body[hidden] {
	display: none;
}

/* without JS the toggle can't open, so a collapsed body reveals — the
   review submission path is never lost to a script that didn't load */
html:not(.has-chrome) .disclosure__body[hidden] {
	display: block;
}

.editorial__lede {
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-style: italic;
	line-height: 1.4;
	margin: 0 0 var(--space-4);
	max-width: var(--measure);
}

.editorial__prose {
	max-width: 68ch;
	margin: 0 0 var(--space-4);
}

.editorial__rows {
	margin: 0 0 var(--space-4);
}

.editorial__row {
	display: grid;
	grid-template-columns: minmax(7rem, auto) 1fr;
	gap: var(--space-4);
	padding: var(--space-3) 0;
	border-bottom: 1px solid rgb(20 16 4 / 12%);
}

.editorial__row dt {
	font-size: var(--text-kicker);
	font-weight: 600;
	letter-spacing: var(--kicker-tracking);
	text-transform: uppercase;
	color: rgb(20 16 4 / 70%);
}

.editorial__row dd {
	margin: 0;
	font-size: var(--text-small);
}

/* a spec list absorbed as a row's value sits flush inside its dd */
.editorial__row .editorial__specs {
	margin: 0;
}

.editorial__row .editorial__specs li:first-child {
	padding-top: 0;
}

.editorial__row .editorial__specs li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

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

.editorial__specs li {
	padding: var(--space-2) 0 var(--space-2) var(--space-6);
	position: relative;
	font-size: var(--text-small);
	border-bottom: 1px solid rgb(20 16 4 / 8%);
}

.editorial__specs li::before {
	content: '';
	position: absolute;
	left: var(--space-2);
	top: 1.05em;
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 999px;
	background: var(--emerald);
}

/* the papers: the product's documentation, closing its plate */
.papers {
	margin-top: var(--space-8);
	border-left: 3px solid var(--notice-amber);
	padding-left: var(--space-4);
}

.papers__coas {
	list-style: none;
	margin: 0 0 var(--space-2);
	padding: 0;
}

.papers__coa {
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
	min-height: 44px;
	color: var(--emerald);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.papers__updated {
	font-size: var(--text-kicker);
	font-weight: 600;
	letter-spacing: var(--kicker-tracking);
	text-transform: uppercase;
	color: rgb(20 16 4 / 60%);
	text-decoration: none;
}

/* the legal part: compliance text is never behind a toggle (§14 visibility
   is the job; §7.2) — it shows, always, under the papers' amber rule */
.product-legal {
	margin-top: var(--space-3);
}

.product-legal__label {
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-weight: 600;
	margin: 0 0 var(--space-2);
}

.product-legal__notice {
	max-width: var(--measure);
	margin: 0;
	font-size: var(--text-small);
	color: rgb(20 16 4 / 80%);
}

/* ---------- what people say: reviews composed into the plate ---------- */

.reviews-band {
	background: var(--paper);
	border-top: 1px solid rgb(20 16 4 / 12%);
	padding: var(--space-16) 0;
}

.reviews-band__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-8);
	flex-wrap: wrap;
	margin-bottom: var(--space-8);
}

.reviews-band__heading {
	font-family: var(--font-display);
	font-size: var(--text-display);
	font-weight: 600;
	line-height: var(--leading-display);
	margin: 0;
}

/* the summary in tag anatomy: eyebrow, the average as a serif figure, the data line */
.reviews-summary {
	background: var(--white);
	border: var(--rule-ink);
	border-radius: var(--radius);
	padding: var(--space-4) var(--space-6);
	text-align: center;
	min-width: 8rem;
}

.reviews-summary__eyebrow {
	font-size: var(--text-kicker);
	font-weight: 600;
	letter-spacing: var(--kicker-tracking);
	text-transform: uppercase;
	color: rgb(20 16 4 / 70%);
	margin: 0;
}

.reviews-summary__figure {
	font-family: var(--font-display);
	font-size: var(--text-display);
	font-weight: 600;
	line-height: 1.1;
	margin: 0;
}

.reviews-summary__data {
	font-size: var(--text-kicker);
	color: rgb(20 16 4 / 70%);
	margin: 0;
}

.reviews-list {
	list-style: none;
	margin: 0 0 var(--space-8);
	padding: 0;
	max-width: var(--measure);
}

.review-row {
	padding: var(--space-6) 0;
	border-bottom: 1px solid rgb(20 16 4 / 12%);
}

.review-row__rating {
	margin: 0 0 var(--space-2);
}

.review-stars__star {
	color: rgb(20 16 4 / 22%);
	font-size: var(--text-h3);
	line-height: 1;
}

.review-stars__star.is-filled {
	color: var(--emerald);
}

.review-row__byline {
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
	margin: 0 0 var(--space-2);
}

.review-row__name {
	font-weight: 600;
}

.review-row__date {
	font-size: var(--text-kicker);
	font-weight: 600;
	letter-spacing: var(--kicker-tracking);
	text-transform: uppercase;
	color: rgb(20 16 4 / 55%);
}

.review-row__text {
	max-width: var(--measure);
}

.review-row__text p:last-child {
	margin-bottom: 0;
}

.review-row__moderation {
	margin: 0;
	font-style: italic;
	color: rgb(20 16 4 / 70%);
}

.reviews-band__empty {
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-style: italic;
	color: rgb(20 16 4 / 70%);
	margin: 0 0 var(--space-8);
}

.reviews-band__gated {
	color: rgb(20 16 4 / 70%);
	margin: var(--space-6) 0 0;
}

/* the Write-a-review disclosure and its restyled WooCommerce form */
.reviews-write {
	max-width: var(--measure);
	margin: 0;
}

.reviews-write__form {
	padding-top: var(--space-6);
}

.review-form__field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: 0 0 var(--space-4);
}

.review-form__field label {
	font-size: var(--text-small);
	font-weight: 600;
}

.review-form__field input,
.review-form__field textarea {
	border: 1px solid rgb(20 16 4 / 30%);
	border-radius: var(--radius);
	background: var(--white);
	color: var(--ink);
	font: inherit;
	padding: var(--space-3);
}

.review-form__rating {
	border: 0;
	margin: 0 0 var(--space-4);
	padding: 0;
}

.review-form__rating legend {
	font-size: var(--text-small);
	font-weight: 600;
	padding: 0;
	margin-bottom: var(--space-2);
}

/* the star input: radios in descending order, reversed so they read 1→5,
   the hovered or chosen star and every star left of it lit Emerald */
.review-form__stars {
	display: inline-flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
}

.review-form__stars input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.review-form__stars label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	cursor: pointer;
}

.review-form__star {
	font-size: var(--text-h2);
	line-height: 1;
	color: rgb(20 16 4 / 22%);
}

.review-form__stars label:hover ~ label .review-form__star,
.review-form__stars label:hover .review-form__star,
.review-form__stars input:checked ~ label .review-form__star {
	color: var(--emerald);
}

.review-form__stars input:focus-visible + label {
	outline: 2px solid var(--emerald);
	outline-offset: 2px;
}

.review-form__must-log-in {
	color: rgb(20 16 4 / 70%);
}

/* from the same shelf */
.shelf {
	padding: var(--space-16) 0 var(--space-24);
	border-top: 1px solid rgb(20 16 4 / 12%);
}

.shelf__heading {
	font-family: var(--font-display);
	font-size: var(--text-display);
	font-weight: 600;
	line-height: var(--leading-display);
	margin: 0 0 var(--space-8);
}

/* generic page header (non-transactional pages using page.php) */
.page-header {
	padding-top: var(--space-12);
	padding-bottom: var(--space-6);
}

.page-title {
	font-family: var(--font-display);
	font-size: var(--text-display);
	font-weight: 600;
	line-height: var(--leading-display);
	margin: 0;
}

/* ---------- cart: your shelf (S9) ---------- */

.cart-page {
	max-width: var(--container);
	margin-inline: auto;
	padding: var(--space-12) var(--gutter) 0;
}

.cart-page__header {
	border-bottom: 1px solid rgb(20 16 4 / 15%);
	padding-bottom: var(--space-4);
	margin-bottom: var(--space-8);
}

.cart-page__title {
	font-family: var(--font-display);
	font-size: var(--text-display);
	font-weight: 600;
	line-height: var(--leading-display);
	margin: 0;
}

.cart-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 22rem;
	gap: var(--space-12);
	align-items: start;
	padding-bottom: var(--space-24);
}

/* the counter column stretches to its row so the sticky inside has a real
   track — the same fake-sticky cure as the checkout (R19) */
.cart-layout > .cart-counter {
	align-self: stretch;
}

@media (max-width: 860px) {
	.cart-layout {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}
}

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

.cart-item {
	display: grid;
	grid-template-columns: 5.5rem 1fr;
	gap: var(--space-6);
	padding: var(--space-6) 0;
	border-bottom: 1px solid rgb(20 16 4 / 12%);
}

.cart-item:first-child {
	padding-top: 0;
}

/* the thumbnail on its small line-tinted stage, blended like the plate */
.cart-item__stage {
	display: block;
	aspect-ratio: 1;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--tint-default);
}

.cart-item__stage--d9 { background: var(--tint-d9); }
.cart-item__stage--thca { background: var(--tint-thca); }
.cart-item__stage--cbd { background: var(--tint-cbd); }

.cart-item__stage img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.cart-item__body {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--space-1) var(--space-4);
	align-items: start;
}

.cart-item__name {
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-weight: 600;
	margin: 0;
}

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

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

.cart-item__pricing {
	text-align: right;
}

.cart-item__price {
	font-weight: 600;
}

.cart-item__per-unit {
	display: block;
	font-size: var(--text-kicker);
	color: var(--emerald);
}

.cart-item__controls {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin-top: var(--space-3);
}

/* the fused quantity stepper: [−][value][+] as one shape in the field
   geometry (designer exact spec). Woo's input stays the middle segment —
   and, with the buttons hidden no-JS, the shape degrades to the plain
   boxed input beside Update cart. */
.qty-stepper {
	display: inline-flex;
	height: 44px;
	border: 1px solid rgb(20 16 4 / 30%);
	border-radius: var(--radius);
	background: var(--white);
	overflow: hidden;
}

/* Woo's .quantity wrapper dissolves so its label (screen-reader) and input
   participate directly as segments of the fused shape */
.qty-stepper .quantity {
	display: contents;
}

.qty-stepper__btn {
	width: 44px;
	height: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--ink);
}

.qty-stepper__btn svg {
	width: 1rem;
	height: 1rem;
	stroke: currentColor;
	stroke-width: 1.5;
	fill: none;
}

.qty-stepper__btn:hover {
	background: var(--paper);
	transition: background var(--duration-micro) ease;
}

.qty-stepper__btn:focus-visible {
	outline: 2px solid var(--emerald);
	outline-offset: -2px;
}

.qty-stepper__btn[disabled] {
	color: rgb(20 16 4 / 35%);
	cursor: default;
	background: none;
}

.qty-stepper__input {
	width: 3.5ch;
	border: 0;
	background: transparent;
	text-align: center;
	font: inherit;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
	border-inline: 1px solid rgb(20 16 4 / 15%);
	appearance: textfield;
	-moz-appearance: textfield;
}

/* the − / + segments replace the native spinner; keyboard arrows still work */
.qty-stepper__input::-webkit-outer-spin-button,
.qty-stepper__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.qty-stepper__input:focus-visible {
	outline: 2px solid var(--emerald);
	outline-offset: -2px;
}

/* no-JS: the buttons stay hidden, so the input's segment hairlines vanish
   with them and the shape reads as the plain boxed field */
.qty-stepper__btn[hidden] {
	display: none;
}

html:not(.has-chrome) .qty-stepper__input {
	border-inline: 0;
	width: 4.5ch;
}

/* a pending sync fades the value; the controls stay live — the UI is
   optimistic and the server reconciles on resolve */
.cart-item[aria-busy='true'] .qty-stepper__input {
	opacity: 0.6;
}

.cart-shelf__error {
	color: var(--signal-red);
	font-size: var(--text-small);
	margin: 0 0 var(--space-4);
}

.cart-item__remove {
	font-size: var(--text-small);
	color: var(--signal-red);
	text-decoration: underline;
	text-underline-offset: 3px;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.cart-item__subtotal {
	grid-column: 2;
	text-align: right;
	margin: var(--space-3) 0 0;
	font-weight: 600;
}

.cart-item__subtotal-label {
	font-size: var(--text-kicker);
	font-weight: 600;
	letter-spacing: var(--kicker-tracking);
	text-transform: uppercase;
	color: rgb(20 16 4 / 55%);
	margin-right: var(--space-2);
}

.cart-shelf__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin-top: var(--space-6);
}

/* the no-JS manual update, as the ghost secondary — JS hides it once the
   stepper takes over. Selector strength matters twice here: the `.woocommerce
   button.button` voice restatement above outranks a lone class (it painted
   this emerald-filled), and its display also outranks the [hidden] attribute
   (the button stayed visible under JS with hidden set). Matching its
   specificity later in the sheet wins both. */
.woocommerce button.cart-shelf__update {
	background: transparent;
	color: var(--emerald);
	border: 1px solid rgb(20 16 4 / 30%);
	border-radius: var(--radius);
	min-height: 44px;
	padding: 0 var(--space-4);
	margin-left: auto;
}

.woocommerce button.cart-shelf__update:hover {
	background: transparent;
	color: var(--emerald);
}

.woocommerce button.cart-shelf__update[hidden] {
	display: none;
}

/* a removed row collapses in place to a quiet strip holding its undo */
.cart-item--removed {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-4) 0;
	color: rgb(20 16 4 / 70%);
}

.cart-item__removed-line {
	margin: 0;
}

.cart-item__undo {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-weight: 500;
	color: var(--emerald);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* the totals recomposed as the Counter card, sticky beside the shelf */
.counter--cart {
	position: sticky;
	top: var(--space-8);
}

@media (max-width: 860px) {
	.counter--cart {
		position: static;
	}
}

.counter__heading {
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-weight: 600;
	margin: 0 0 var(--space-4);
}

.counter__rows {
	margin: 0;
}

.counter__row {
	display: flex;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-2) 0;
}

.counter__row dt,
.counter__row dd {
	margin: 0;
}

.counter__row--discount dd {
	color: var(--success-green);
}

/* the shipping row carries method options + destination — a block, not a
   single label|value line */
.counter__row--shipping {
	flex-direction: column;
	gap: var(--space-2);
}

.counter__row--shipping dt {
	font-weight: 600;
}

.counter__shipping-methods {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--text-small);
}

.counter__shipping-methods li {
	display: flex;
	gap: var(--space-2);
	align-items: baseline;
	padding: var(--space-1) 0;
}

.counter__shipping-destination {
	font-size: var(--text-kicker);
	color: rgb(20 16 4 / 65%);
	margin: var(--space-1) 0 0;
}

.counter__shipping-destination a,
.counter__shipping .shipping-calculator-button {
	color: var(--emerald);
	text-underline-offset: 3px;
}

.counter__row--total {
	border-top: 1px solid rgb(20 16 4 / 20%);
	margin-top: var(--space-2);
	padding-top: var(--space-3);
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-weight: 600;
}

.counter__promise {
	font-size: var(--text-small);
	color: rgb(20 16 4 / 70%);
	margin: var(--space-3) 0 0;
}

/* "Have a code?" — the A24 disclosure at counter scale: a quiet UI-face
   toggle instead of the plate's serif heading row */
.counter__coupon {
	margin: var(--space-3) 0 0;
}

.counter__coupon .disclosure__toggle {
	font-family: var(--font-ui);
	font-size: var(--text-small);
	font-weight: 600;
	padding: var(--space-2) 0;
	border-bottom: 0;
}

.counter__coupon .disclosure__toggle::after {
	font-size: var(--text-body);
}

.counter__coupon .disclosure__body {
	padding-top: var(--space-2);
}

.counter__coupon-form {
	display: flex;
	gap: var(--space-2);
}

.counter__coupon-form .input-text {
	flex: 1;
	min-width: 0;
	min-height: 44px;
	padding: 0 var(--space-3);
	border: 1px solid rgb(20 16 4 / 30%);
	border-radius: var(--radius);
	background: var(--white);
	font: inherit;
}

.counter__coupon-form .button {
	padding: 0.6rem var(--space-4);
}

.counter--cart .wc-proceed-to-checkout {
	margin-top: var(--space-4);
}

.counter--cart .wc-proceed-to-checkout .checkout-button {
	display: block;
	width: 100%;
	text-align: center;
}

/* empty cart, staged */
.cart-empty-stage {
	padding: var(--space-24) 0;
	border-top: 1px solid rgb(20 16 4 / 12%);
}

.cart-empty-stage__inner {
	text-align: center;
}

.cart-empty-stage__line {
	font-family: var(--font-display);
	font-size: var(--text-display);
	font-weight: 600;
	line-height: var(--leading-display);
	margin: 0 0 var(--space-6);
}

/* the cart backport (John, R19): the summary counter and the cart's
   controls join the checkout's finish — the soften ladder and the
   whisper elevation. Sticky travel verified same as the checkout's. */
.cart-page .counter {
	border-radius: var(--radius-field);
	box-shadow: var(--shadow-card);
}

.cart-page .input-text,
.cart-page .button,
.cart-page .qty,
.cart-page .qty-stepper {
	border-radius: var(--radius-field);
}

/* ---------- checkout: composed conservatism (S9) ---------- */

/* The tunnel header: at the money page the store steps back — one labeled
   exit (cart), the brand centered, nothing else. Not sticky by design. */
.checkout-tunnel {
	/* white, not paper: the logo asset carries a white ground and must sit
	   seamless — and the white band reads as the tunnel's own quiet chrome */
	background: var(--white);
	border-bottom: 1px solid rgb(20 16 4 / 12%);
}

.checkout-tunnel__inner {
	max-width: var(--container-checkout);
	margin-inline: auto;
	padding: var(--space-4) var(--gutter);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
}

.checkout-tunnel__back {
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 44px;
	font-size: var(--text-small);
	font-weight: 600;
	color: var(--emerald);
	text-decoration: none;
}

.checkout-tunnel__back:hover,
.checkout-tunnel__back:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.checkout-tunnel__back svg {
	width: 1rem;
	height: 1rem;
	stroke: currentColor;
	stroke-width: 1.5;
	fill: none;
}

.checkout-tunnel__brand img {
	display: block;
	width: 120px;
	height: auto;
}

@media (max-width: 768px) {
	.checkout-tunnel__back {
		font-size: 0.8rem;
	}

	.checkout-tunnel__brand img {
		width: 100px;
	}
}

.checkout-page {
	max-width: var(--container-checkout);
	margin-inline: auto;
	/* 3rem below — the contracted separation to the trust-close band, which
	   closes the page in place of a paper cliff */
	padding: var(--space-12) var(--gutter) var(--space-12);
}

/* no rule under the H1 — the page opens with type, not a fence (John R8) */
.checkout-page__header {
	padding-bottom: 0;
	/* the cards start right under the H1 (John R13) */
	margin-bottom: var(--space-2);
}

.checkout-page__kicker {
	font-family: var(--font-ui);
	font-size: var(--text-kicker);
	font-weight: 600;
	letter-spacing: var(--kicker-tracking);
	text-transform: uppercase;
	color: var(--emerald);
	margin: 0 0 var(--space-2);
}

.checkout-page__title {
	font-family: var(--font-display);
	font-size: var(--text-display);
	font-weight: 600;
	line-height: var(--leading-display);
	margin: 0;
}

.checkout-layout {
	display: grid;
	/* the chasm sits off-center left (John R11): the order column widened
	   24rem → 30rem, the form column gives up the difference */
	grid-template-columns: minmax(0, 1fr) 30rem;
	gap: var(--space-6) var(--space-12);
	align-items: start;
}

/* the card: an Ink-rule printed white card on the warm paper ground — the
   counter language, spoken by the form and the summary alike */
.checkout-card {
	background: var(--white);
	border: 1px solid var(--ink);
	border-radius: var(--radius-field);
	/* the three section cards rest a millimeter above the page — nothing
	   else gets depth (John R12, the Domino's rule) */
	box-shadow: var(--shadow-card);
	padding: var(--space-6) clamp(1rem, 3vw, 2rem);
}

.checkout-card + .checkout-card {
	margin-top: var(--space-6);
}

/* desktop: fields and payment stack in the left column, the summary counter
   holds the right column. The review wrapper must STRETCH to its spanned
   area — under the grid's align-items:start it otherwise shrinks to the
   counter's own height and the sticky inside has no track to travel (the
   fake-sticky bug, founder session). */
@media (min-width: 901px) {
	.checkout-fields { grid-column: 1; grid-row: 1; }
	.checkout-review { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; }
	.checkout-payment-column { grid-column: 1; grid-row: 2; }
}

/* mobile: one column in DOM order — fields → summary (with Total) → payment →
   place order, so the Total is always seen before the CTA */
@media (max-width: 900px) {
	.checkout-layout {
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}

	/* linear flow: details → card entry → order (totals, tip, Place order).
	   The commit lives in the order card now, so the payment fields must
	   come before it or the button precedes the card number (R14) */
	.checkout-fields { order: 1; }
	.checkout-payment-column { order: 2; }
	.checkout-review { order: 3; }
}

/* inside the details card: the shipping/notes block sits at the foot,
   hairline-separated — no orphaned controls between cards */
/* two drawn rules, each with a purpose a stranger can state: one separates
   the address form from the ship-elsewhere option; the notes drawer's own
   handle line (the one carrying the +/−) is the second. The wrapper above
   the drawer draws no rule of its own — two rules bracketing one collapsed
   row was the indicted double (founder session) */
.checkout-fields > .woocommerce-shipping-fields {
	margin-top: var(--space-6);
	padding-top: var(--space-6);
	border-top: 1px solid rgb(20 16 4 / 15%);
}

.checkout-fields > .woocommerce-additional-fields {
	margin-top: var(--space-6);
}

.checkout-fields .disclosure {
	margin-bottom: 0;
}

/* the details header row: the heading left, the quiet login link right
   (John R24 — the reminder strip is retired, its link rides here) */
.checkout-fields__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
	margin: 0 0 var(--space-3);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid rgb(20 16 4 / 15%);
}

.checkout-fields__header h3 {
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-weight: 600;
	line-height: var(--leading-display);
	margin: 0;
	padding: 0;
	border: 0;
}

.checkout-login-link {
	font-size: var(--text-small);
	color: var(--emerald);
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

/* the login card: hidden until the link toggles it, opening above the
   layout (it cannot nest inside form.checkout — invalid HTML) */
.woocommerce-checkout form.login {
	max-width: var(--container-checkout);
	margin: 0 auto var(--space-6);
	padding: var(--space-6) clamp(1rem, 3vw, 2rem);
	background: var(--white);
	border: 1px solid var(--ink);
	border-radius: var(--radius-field);
	box-shadow: var(--shadow-card);
}

/* the card heading rule returns — "Your details" matches "Your order" and
   "Payment" (John: the three components' headers speak one language) */
.checkout-fields > .woocommerce-billing-fields > h3 {
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-weight: 600;
	line-height: var(--leading-display);
	margin: 0 0 var(--space-3);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid rgb(20 16 4 / 15%);
}

.checkout-fields h3,
#ship-to-different-address {
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-weight: 600;
	line-height: var(--leading-display);
	margin: 0;
	padding-bottom: 0;
	/* the ship-to toggle keeps no underline: it separated a heading from
	   nothing while the drawer is closed (stranger test, founder session) */
	border-bottom: 0;
}

#ship-to-different-address label {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	cursor: pointer;
}

#ship-to-different-address input {
	width: 1.1rem;
	height: 1.1rem;
}

/* the field column is a compact 12-track grid, prod as the floor — Woo's
   width classes place the rows, and the address fields pair on top (§14-safe:
   layout only, no field moves between the billing/shipping groups) */
.checkout-fields .woocommerce-billing-fields__field-wrapper,
.checkout-fields .woocommerce-shipping-fields__field-wrapper {
	display: grid;
	/* minmax(0,…) strips the tracks' min-content floors — long content in one
	   cell can no longer inflate its tracks and shrink its neighbors' (the
	   ragged-width root cause) */
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--space-4);
	/* THE ROW GAP — halved by John's R17 ruling; the heading seam and the
	   card-foot seam live outside this grid and hold their distance */
	row-gap: var(--space-3);
	/* tops align because every box is the same 60px object — no alignment
	   property patches anything anymore (the align-items:end fossil is gone) */
	align-items: start;
}

.checkout-fields .form-row {
	position: relative; /* hosts the floating label */
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	grid-column: 1 / -1;
	min-width: 0;
}

/* the width-discipline rule: every row fills its grid cell exactly.
   WooCommerce's stock float layout (`.woocommerce form .form-row-first/-last
   { width: 47%; float: … }`) shrinks rows INSIDE their cells — the ragged
   widths' root cause — so this out-ranks it for every checkout row.
   And the WC form-row spacing layer (padding 3px, margin 6px on EVERY row —
   the +12 on every gap and the −3 on every label, found by the uniformity
   assertion) dies at the same specificity (founder session R9). */
.woocommerce form .checkout-fields .form-row,
.woocommerce form .checkout-payment .payment_box .form-row {
	width: 100%;
	float: none;
	margin: 0 !important;
	padding: 0 !important;
}

.checkout-fields .form-row-first { grid-column: span 6; }
.checkout-fields .form-row-last { grid-column: span 6; }
/* the R17 cuts: street and city shortened to John's red lines, their
   neighbors holding their seats (the air between is drawn, not accidental);
   country takes the ZIP's old slot — the ZIP itself rides the card form */
.checkout-fields [id$="_address_1_field"] { grid-column: 1 / span 6; }
.checkout-fields [id$="_address_2_field"] { grid-column: 7 / span 6; }
.checkout-fields [id$="_city_field"] { grid-column: 1 / span 4; }
.checkout-fields [id$="_state_field"] { grid-column: 5 / span 3; }
.checkout-fields [id$="_country_field"] { grid-column: 8 / span 5; }
/* shipping only (billing's ZIP rides the card form): the ZIP takes a full
   row above Phone, as in the payment box — visual order only, DOM and tab
   order unchanged (R18c). Scoped to the shipping wrapper so billing's grid
   never sees these. */
.checkout-fields .woocommerce-shipping-fields__field-wrapper [id$="_postcode_field"] { grid-column: 1 / -1; order: 1; }
.checkout-fields .woocommerce-shipping-fields__field-wrapper [id$="_phone_field"] { order: 2; }
.checkout-fields [id$="_phone_field"] { grid-column: span 6; }
.checkout-fields [id$="_email_field"] { grid-column: span 6; }

@media (max-width: 900px) {
	.checkout-fields .woocommerce-billing-fields__field-wrapper,
	.checkout-fields .woocommerce-shipping-fields__field-wrapper {
		grid-template-columns: 1fr;
	}

	.checkout-fields .form-row {
		grid-column: 1 / -1 !important;
	}
}

/* THE floating-label recipe — one home, parameterized (Required 7 realizes
   the session's one-recipe ruling). Full-size in the box when empty, a
   small persistent caption at the box top once focused or filled — it
   transforms, never vanishes (all five references run this; R6). Anchored
   to the box's fixed geometry, never a row percentage (the Phone bug, R9).
   Variants set the custom properties: --float-center (box center),
   --float-cap (floated top), --float-inset (left inset). */
.checkout-fields .form-row label,
.checkout-payment .payment_box .form-row label,
.checkout-review .tip-custom-label {
	position: absolute;
	z-index: 1;
	top: var(--float-center, 30px);
	translate: 0 -50%;
	left: calc(var(--float-inset, var(--space-3)) + 1px);
	max-width: calc(100% - 2 * var(--float-maxsub, var(--float-inset, var(--space-3))));
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 1rem;
	font-weight: 400;
	color: rgb(20 16 4 / 55%);
	pointer-events: none;
	transition: top var(--duration-micro) ease, translate var(--duration-micro) ease, font-size var(--duration-micro) ease;
}

.checkout-fields .form-row:focus-within label,
.checkout-fields .form-row.has-value label,
.checkout-payment .payment_box .form-row:focus-within label,
.checkout-payment .payment_box .form-row.has-value label,
.checkout-review .tip-custom-row.has-value .tip-custom-label {
	top: var(--float-cap, 8px);
	translate: 0 0;
	font-size: 0.6875rem;
	font-weight: 600;
	color: rgb(20 16 4 / 62%);
}

@media (prefers-reduced-motion: reduce) {
	.checkout-fields .form-row label,
	.checkout-payment .payment_box .form-row label,
	.checkout-review .tip-custom-label {
		transition: none;
	}
}

/* the variants */
.checkout-payment .payment_box .form-row {
	--float-inset: var(--space-4); /* the deeper money-field inset (R16g) */
	--float-maxsub: var(--space-3); /* the label's max-width keeps the space-3
	   subtraction it carried before the R7 recipe consolidation. The left inset
	   rides space-4, but subtracting space-4 on both sides too clipped the
	   required "*" off "Expiry (MM/YY) *" on the mobile half-width field
	   (approved 8cde163 cleared it; the consolidation tightened it 8px) */
}

.checkout-review .tip-custom-row {
	--float-center: 21px; /* center of the thinner 42px box */
	--float-cap: 6px;
}

.checkout-review .tip-custom-row.has-value .tip-custom-label {
	line-height: 1; /* the caption sits wholly inside the 42px box (R18d) */
}

.checkout-fields .form-row.woocommerce-invalid label {
	color: var(--signal-red);
}

/* the notes label stays screen-reader-only (its disclosure heading is the
   visible label) — exempt from the float */
.checkout-fields .form-row label.screen-reader-text {
	position: absolute !important;
}

/* WooCommerce's address-locale script re-injects placeholders client-side,
   past the server-side blanking — they go silent so they never double-speak
   under the in-box label */
.checkout-fields .form-row .input-text::placeholder,
.checkout-fields .form-row textarea::placeholder {
	color: transparent;
}

/* checkbox rows (create account) are not boxes — their label sits beside the
   control, exempt from the float */
.checkout-fields .form-row:has(input[type="checkbox"]) {
	margin-top: var(--space-4);
}

.checkout-fields .form-row:has(input[type="checkbox"]) label {
	position: static;
	translate: none;
	max-width: none;
	font-size: var(--text-small);
	color: var(--ink);
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.checkout-fields .form-row .required {
	color: var(--signal-red);
	text-decoration: none;
}

/* warm wells: fields read as set INTO the white card; 48px presence on the
   money page (44 is the floor, not the ceiling); focus lifts the well white
   behind the emerald ring */
/* the `.woocommerce form` prefix out-ranks WooCommerce 10.9.4's own
   form-row input styling (white fill, height auto, 0.5em padding) */
.woocommerce form .checkout-fields .form-row .input-text,
.woocommerce form .checkout-fields .form-row select {
	width: 100%;
	height: 60px; /* room for the floated caption + the value beneath it */
	padding: 26px var(--space-3) 8px;
	border: 1px solid rgb(20 16 4 / 30%);
	border-radius: var(--radius-field);
	background: var(--paper);
	color: var(--ink);
	font: inherit;
}

.woocommerce form .checkout-fields .form-row textarea {
	width: 100%;
	height: auto;
	min-height: 6rem;
	padding: 26px var(--space-3) 8px; /* caption room, same as every box */
	border: 1px solid rgb(20 16 4 / 30%);
	border-radius: var(--radius-field);
	background: var(--paper);
	color: var(--ink);
	font: inherit;
}

/* the notes field greets with its instructions (the placeholder stays
   visible, alone among checkout fields) and the "Order notes (optional)"
   caption appears only once the field holds text or focus (John R15) */
.checkout-fields .form-row label.notes-float-label {
	opacity: 0;
}

.checkout-fields .form-row:focus-within label.notes-float-label,
.checkout-fields .form-row.has-value label.notes-float-label {
	opacity: 1;
	top: 8px;
	translate: 0 0;
	font-size: 0.6875rem;
	font-weight: 600;
	color: rgb(20 16 4 / 62%);
}

.checkout-fields .form-row textarea#order_comments::placeholder {
	color: rgb(20 16 4 / 45%);
}

.woocommerce form .checkout-fields .form-row .input-text:focus-visible,
.woocommerce form .checkout-fields .form-row select:focus-visible,
.woocommerce form .checkout-fields .form-row textarea:focus-visible {
	background: var(--white);
	border-color: var(--emerald);
	outline: 2px solid var(--emerald);
	outline-offset: 2px;
}

.checkout-fields .select2-container {
	width: 100% !important; /* the face fills its cell like every box */
}

.checkout-fields .select2-container .select2-selection {
	height: 60px !important;
	border: 1px solid rgb(20 16 4 / 30%);
	border-radius: var(--radius-field);
	background: var(--paper);
	display: flex;
	align-items: flex-end; /* the value sits beneath the floated caption */
	padding: 0 var(--space-3) 8px;
}

.checkout-fields .select2-container .select2-selection__rendered {
	padding: 0;
	line-height: 1.4;
}

/* a US-only store renders the country as a single-option select that
   WooCommerce strips to look like plain text (.country_to_state--single);
   box it in the field geometry so it reads as a composed, intentional
   read-only field beside the inputs — the border override beats Woo's strip */
.checkout-page .checkout-fields [id$="_country_field"] .woocommerce-input-wrapper select.country_to_state {
	appearance: none !important;
	-webkit-appearance: none !important;
	height: 60px !important;
	min-height: 0 !important;
	padding: 26px var(--space-3) 8px !important;
	border: 1px solid rgb(20 16 4 / 20%) !important;
	border-radius: var(--radius-field) !important;
	background: var(--paper) !important;
	color: rgb(20 16 4 / 80%) !important;
	font-weight: 500 !important;
	/* fills its R17 slot (the ZIP's old seat) — the 24ch content-sizing dies */
	max-width: 100%;
	width: 100% !important;
}

/* the contact fields say why they exist; an on-blur error replaces the help.
   WooCommerce styles form-row descriptions as its bright-blue tooltip (blue
   fill, white text, a caret) and hides them by default — every part of that
   treatment is neutralized here to the specced quiet line */
.woocommerce form .checkout-fields .form-row .description {
	display: block;
	position: static;
	background: none;
	padding: 0;
	border-radius: 0;
	font-size: var(--text-small);
	color: rgb(20 16 4 / 70%);
	margin: var(--space-1) 0 0;
}

.woocommerce form .checkout-fields .form-row .description::before,
.woocommerce form .checkout-fields .form-row .description::after {
	display: none; /* the tooltip caret */
}

/* the notes disclosure speaks at body scale — the cart's "Have a code?"
   treatment; ship-to-different-address keeps its section weight (it toggles a
   whole fieldset) */
.checkout-notes .disclosure__toggle {
	font-family: var(--font-ui);
	font-size: var(--text-body);
	font-weight: 600;
	color: var(--ink);
}

.checkout-field-error {
	display: block;
	font-size: var(--text-small);
	color: var(--signal-red);
	margin-top: var(--space-1);
}

.woocommerce-input-wrapper:has(.checkout-field-error) .description {
	display: none;
}

/* the checkout coupon error line under the disclosure */
.counter__coupon-notice {
	font-size: var(--text-small);
	color: var(--signal-red);
	margin: var(--space-2) 0 0;
}

.checkout-fields .form-row.woocommerce-invalid .input-text,
.checkout-fields .form-row.woocommerce-invalid select {
	border-color: var(--signal-red);
}

/* the review Counter card, sticky beside the field column; its heading
   rides inside the card, calm at h3 with the card-header hairline */
.checkout-review__heading {
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-weight: 600;
	margin: 0 0 var(--space-4);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid rgb(20 16 4 / 15%);
}

.counter--checkout {
	position: sticky;
	top: var(--space-12); /* air at the pin — the references never kiss the top edge */
	display: block;
	/* no outer margins in composition — the card top holds the shared datum
	   with the details card; spacing belongs to the grid, not the component */
	margin: 0;
}

@media (max-width: 900px) {
	.counter--checkout {
		position: static;
	}
}

.checkout-review__items {
	list-style: none;
	margin: 0 0 var(--space-4);
	padding: 0 0 var(--space-3);
	border-bottom: 1px solid rgb(20 16 4 / 15%);
}

.checkout-review__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-2) 0;
	font-size: var(--text-small);
}

/* the little picture beside the line (John R21) — the summary finally shows
   what is being bought */
.checkout-review__thumb img {
	display: block;
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: var(--radius-field);
	border: 1px solid rgb(20 16 4 / 12%);
}

.checkout-review__item-qty {
	color: rgb(20 16 4 / 60%);
}

.checkout-review__item-total {
	white-space: nowrap;
	font-weight: 600;
}

/* the payment card: the sibling printed card — the shared .checkout-card
   shell carries ground and rule; !important still beats the checkout
   plugin's lavender on load order (the C3 last resort) */
#payment {
	background: var(--white) !important;
}

.checkout-payment__heading {
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-weight: 600;
	margin: 0 0 var(--space-3);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid rgb(20 16 4 / 15%);
}

.checkout-payment__methods {
	list-style: none;
	margin: 0;
	/* WC core injects a 1em padding layer on every #payment wrapper — the
	   machined-in bloat John indicted. Composition owns the seams; the
	   component layers own none (founder session R8) */
	padding: 0 !important;
	/* WC core also draws its own rule under the methods list — noise under
	   the stranger test with a single method */
	border-bottom: 0 !important;
}

#payment li,
#payment .wc_payment_method {
	margin: 0 !important;
}

/* the checkout plugin pads the methods list and fieldset through ID-weighted
   !important rules — matched and out-ranked here, once, at the source
   (the uniformity assertion's 48px first step) */
#payment ul.payment_methods.checkout-payment__methods,
#payment ul.payment_methods.checkout-payment__methods > li {
	padding: 0 !important;
}

/* a container that renders nothing draws no row — on dev the Turnstile div
   is empty (domain-bound key); on prod it has the badge and keeps its row */
.checkout-commit > div:empty {
	display: none;
}

/* NOTE (R9): the payment box's em-based margins and the noscript's
   display:block come from the checkout plugin's cross-origin sheet, which
   uses layered !important that no theme stylesheet can out-rank (cascade
   layers invert importance; its layer is declared first). The armistice
   lives in chrome.js as inline-style importants — the one cascade level
   above all author sheets — re-applied on WooCommerce's payment re-render. */

#payment .payment_box fieldset {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

/* the place-order zone: one composed stack — every child's own margin dies,
   the grid draws every seam once */
.checkout-commit {
	display: grid;
	/* THE stack gap — the second of the two spacing numbers; the seam above
	   (margin-top) is the same number (founder session R9, rehomed R14) */
	row-gap: var(--space-4);
	margin: var(--space-4) 0 0;
}

.checkout-commit > * {
	margin: 0 !important;
}


/* the stock caret ornament pointing box-to-method: with one method it
   annotates nothing — gone */
.checkout-payment .payment_box::before {
	display: none !important;
}

.checkout-payment__methods > li {
	padding: 0;
	/* no rule: a one-method list has nothing to separate (stranger test) */
	border-bottom: 0;
}

/* the method row wraps so the title always reads on one line and the gateway's
   card-brand icon drops below it at narrow widths (the mobile one-line fix) */
.checkout-payment__methods label {
	font-weight: 600;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: var(--space-3);
	row-gap: var(--space-2);
	min-height: 44px;
	cursor: pointer;
	margin: 0 !important;
	padding: 0 !important; /* WC's 1em label layer */
}

.checkout-payment__methods label img {
	height: 24px;
	width: auto;
}

/* below 700px the icon takes its own full-width row after the title, so
   "Credit Card - one time payment" is never crushed to a multi-line wrap */
@media (max-width: 700px) {
	.checkout-payment__methods label img {
		flex: 0 0 100%;
		order: 3;
	}
}

/* the sealed box: the gateway's own fields render here; the frame gives them
   a composed home and never reshapes their internals */
.checkout-payment .payment_box {
	display: grid;
	row-gap: var(--space-3); /* halved (R17); box padding holds top/bottom */
	margin: var(--space-4) 0 0;
	padding: var(--space-4);
	/* a warm-greige card so the entry area reads with tonal depth against the
	   paper ground — paper ground → greige card → white fields (designer) */
	background: color-mix(in srgb, var(--sand) 50%, var(--white)) !important;
	border: 1px solid rgb(20 16 4 / 15%);
	border-radius: var(--radius-field);
	font-size: var(--text-small);
}

.checkout-payment .payment_box p {
	font-size: var(--text-small);
	line-height: 1.4;
	margin: 0; /* the box grid draws the seams */
}

/* WooCommerce's float-era clear div must not become a phantom grid row */
.checkout-payment .payment_box .clear {
	display: none;
}

/* the references' lesson (founder session R7): the fields FILL the box —
   card number spans, expiry + CVC split a row, nothing wasted beside them.
   Layout + widths only; the gateway's fields and grouping stay its own (§14) */
.checkout-payment .payment_box fieldset {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: var(--space-4);
	row-gap: var(--space-3); /* halved (R17), with the details form */
	border: 0;
	margin: 0;
	padding: 0;
}

.checkout-payment .payment_box fieldset .form-row {
	position: relative;
	margin: 0;
	padding: 0;
	width: 100%;
	float: none;
	grid-column: 1 / -1;
}

.checkout-payment .payment_box fieldset .form-row-first,
.checkout-payment .payment_box fieldset .form-row-last {
	grid-column: span 1;
}

/* the `.woocommerce form` prefix out-ranks WC core's own form-row input
   styling (the 0.5em-padding rule), exactly as the details form does; the
   width !important beats the gateway's inline style="width:100px" on CVC —
   the fill-the-box ruling needs the cell honored (last-resort, documented) */
.woocommerce form .checkout-payment .payment_box .input-text {
	width: 100% !important;
	height: 60px; /* the details-form geometry — one field system, everywhere */
	border: 1px solid rgb(20 16 4 / 30%);
	border-radius: var(--radius-field);
	/* fields stay white so they pop against the greige card */
	background: var(--white);
	font-family: inherit;
	/* AFTER the family, never a font: shorthand — it silently resets size
	   (the 21px regression, R16g). Weighted against WC/plugin sizing. */
	font-size: 1.375rem !important; /* +4 more on John's call — the money fields read big */
	padding: 26px var(--space-4) 8px !important; /* deeper inset — less hard-left */
	color: var(--ink);
}


/* the gateway's placeholders go silent — the label carries the field's name
   and format (“Expiry (MM/YY)”) exactly as the details form does */
.woocommerce form .checkout-payment .payment_box .input-text::placeholder {
	/* !important: the checkout plugin styles placeholders via #payment-ID
	   selectors that outrank any class chain — the C3 last resort, again */
	color: transparent !important;
}

/* trust at the payment fields (Baymard): the quiet secure line + lock,
   directly above Place order */
.checkout-secure-line {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-small);
	color: rgb(20 16 4 / 70%);
}

.checkout-secure-line svg {
	width: 1rem;
	height: 1rem;
	flex: none;
	stroke: currentColor;
	stroke-width: 1.5;
	fill: none;
}

.checkout-payment__place-order {
	display: block;
	width: 100%;
	text-align: center;
}

.checkout-payment .woocommerce-terms-and-conditions-wrapper {
	margin: var(--space-4) 0 0;
}

.checkout-payment .woocommerce-terms-and-conditions-wrapper,
.checkout-payment .woocommerce-privacy-policy-text,
.checkout-commit .woocommerce-terms-and-conditions-wrapper,
.checkout-commit .woocommerce-privacy-policy-text {
	font-size: var(--text-small);
}

.checkout-payment .woocommerce-privacy-policy-text p,
.checkout-commit .woocommerce-privacy-policy-text p {
	margin: 0;
}


/* quiet sentence-case labels inside the sealed payment box (gateway-emitted
   markup: styling only, the grouping untouched) */
.checkout-payment .payment_box label {
	font-size: var(--text-small);
	font-weight: 600;
	color: rgb(20 16 4 / 78%);
}

/* the tip block (wpslash-tipping plugin) composed into the counter — the
   plugin lays its wrapper out as a flex row and injects its own widths, so
   these rules are scoped tighter than the plugin's to stack it in the card;
   register C-8 */
.checkout-review .wpslash-tip-wrapper {
	/* !important overrides the fixed height the plugin's script leaves and
	   its float layout — the last-resort plugin override (§7.6); the R16
	   rebuild makes this wrapper the flex column further down */
	float: none !important;
	box-shadow: none;
	height: auto !important;
	margin: var(--space-4) 0;
	padding: var(--space-4);
	background: var(--paper);
	border-radius: var(--radius);
	max-width: 100%;
}

.checkout-review .wpslash-tip-wrapper > * {
	float: none !important;
}

/* the tip title, two lines (John R16): a tiny eyebrow asks the question,
   the invitation sits beneath at reading size, indented four spaces —
   the split is presentation-side (chrome.js) on the plugin's one string */
.checkout-review .wpslash-tip-title {
	display: block !important;
	justify-content: flex-start !important;
	font-family: var(--font-ui);
	font-size: 0.875rem;
	font-weight: 600;
	text-align: left !important;
	color: var(--ink) !important;
	-webkit-text-fill-color: var(--ink) !important;
	/* the white rectangle dies (John R16c): the title sits on the well,
	   one hairline beneath — a drawn rule with a stateable purpose:
	   it separates the invitation from the controls */
	background: transparent !important;
	box-shadow: none !important;
	border-bottom: 1px solid rgb(20 16 4 / 15%);
	padding: 0 0 var(--space-2) !important;
	margin: 0 0 var(--space-3);
}

.wpslash-tip-title .tip-title-eyebrow {
	display: block;
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: var(--kicker-tracking);
	text-transform: uppercase;
	color: rgb(20 16 4 / 62%) !important;
	-webkit-text-fill-color: rgb(20 16 4 / 62%) !important;
}

/* the ghost bar (John R16d): four preset cells fused into one outlined row,
   percentage over amount, hairline dividers — no dark solids; Place order
   stays the card's only solid. The custom row sits beneath, full width. */
.checkout-review .wpslash-tip-wrapper {
	display: flex !important;
	flex-direction: column;
}

.checkout-review .wpslash-tip-title { order: 0; }
.checkout-review .wpslash-percentage-tip-buttons { order: 1; }
.checkout-review .wpslash-tipping-form-wrapper { order: 2; }

.checkout-review .wpslash-percentage-tip-buttons {
	display: flex !important;
	gap: var(--space-2); /* the inset between cells John approved (8cde163) —
	   carried by a pre-R16 rule the correction round wrongly removed as dead;
	   restored here, in the live rule, at its approved value */
	border: 1px solid rgb(20 16 4 / 30%);
	border-radius: var(--radius-field);
	overflow: hidden;
	background: var(--white);
	margin: 0 0 6px; /* half the old seam to the custom row (John R16g) */
}

.checkout-review a.wpslash-tip-percentage-btn {
	flex: 1 1 0;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-height: 44px; /* the approved cell height (8cde163); a pre-R16 rule held
	   this over the 56px this rule once carried, and the correction round
	   removed that rule as dead — it was winning. Folded to the approved value */
	font-size: var(--text-small); /* approved cell font-size — same reason */
	text-align: center;
	padding: var(--space-2) !important;
	margin: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	cursor: pointer;
	text-decoration: none;
}

.checkout-review a.wpslash-tip-percentage-btn + a.wpslash-tip-percentage-btn {
	border-left: 1px solid rgb(20 16 4 / 15%) !important;
}

.checkout-review a.wpslash-tip-percentage-btn:hover,
.checkout-review a.wpslash-tip-percentage-btn:focus-visible {
	background: var(--paper) !important;
}

/* the chosen cell says so: inset emerald ring, emerald numbers (John R16f) */
.checkout-review a.wpslash-tip-percentage-btn.is-selected {
	background: var(--paper) !important;
	box-shadow: inset 0 0 0 2px var(--emerald);
}

.checkout-review a.wpslash-tip-percentage-btn.is-selected .tip-cell-pct,
.checkout-review a.wpslash-tip-percentage-btn.is-selected .tip-cell-amt {
	color: var(--emerald) !important;
	-webkit-text-fill-color: var(--emerald) !important;
}

.checkout-review .tip-cell-pct {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ink) !important;
	-webkit-text-fill-color: var(--ink) !important;
}

.checkout-review .tip-cell-amt {
	font-size: 0.75rem;
	color: rgb(20 16 4 / 62%) !important;
	-webkit-text-fill-color: rgb(20 16 4 / 62%) !important;
}

/* the custom row: amount box + a smaller quiet Add fill the whole width */
.checkout-review .wpslash-tipping-form-wrapper {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: var(--space-2);
	width: 100% !important;
	max-width: none !important;
	justify-content: flex-start !important;
	margin: 0 !important;
	padding: 0 !important; /* the plugin's 10px pad broke the caption anchor (R18d) */
}

.checkout-review .wpslash-tipping-form-wrapper input.wpslash-tip-input {
	flex: 1 1 auto !important;
	width: auto !important;
	min-width: 0;
	max-width: none !important;
	height: 44px !important; /* even with the 44px Add button beside it — the
	   approved 8cde163 row (input 44 = Add 44). A pre-R16 min-height:44 floored
	   this to 44 until the correction round removed it, leaving a 2px-ragged
	   42/44 row (R16g's own "no ragged row"); restored to the approved 44 */
	padding: 18px var(--space-3) 5px !important;
	text-align: left !important;
	border: 1px solid rgb(20 16 4 / 30%) !important;
	border-radius: var(--radius-field) !important;
	background: var(--white) !important;
	color: var(--ink) !important;
	font: inherit;
}

.checkout-review .tip-custom-row {
	position: relative;
}


.checkout-review a.wpslash-tip-submit {
	flex: 0 0 auto;
	display: inline-flex !important;
	align-items: center;
	height: 42px; /* matches the thinner box beside it — no ragged row */
	padding: 0 var(--space-4) !important;
	background: transparent !important;
	border: 1px solid rgb(20 16 4 / 30%) !important;
	border-radius: var(--radius-field) !important;
	color: var(--emerald) !important;
	-webkit-text-fill-color: var(--emerald) !important;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
}

.checkout-review a.wpslash-tip-submit:hover,
.checkout-review a.wpslash-tip-submit:focus-visible {
	border-color: var(--emerald) !important;
	background: var(--paper) !important;
}

.wpslash-tip-title .tip-title-main {
	display: block;
	padding-left: 4ch; /* indented four spaces (John's spec) */
	font-size: 1rem; /* 14 → 16 on John's call */
	font-weight: 600;
}


/* the returning-customer login toggle composed, not a default notice bar
   (the stock coupon bar is retired — the coupon lives in the summary) */
.woocommerce-form-login-toggle,
.woocommerce-form-login {
	margin-bottom: var(--space-6);
	font-size: var(--text-small);
}

.woocommerce-form-login-toggle .woocommerce-info {
	background: var(--paper);
	border: 1px solid rgb(20 16 4 / 15%);
	border-radius: var(--radius);
	padding: var(--space-3) var(--space-4);
	margin: 0;
}

/* Woo's notice carries a ::before icon (an icon font that doesn't load here)
   whose box clips the leading text — drop it so the line reads clean */
.woocommerce-form-login-toggle .woocommerce-info::before {
	display: none;
}

.woocommerce-form-login-toggle a {
	color: var(--emerald);
	text-underline-offset: 3px;
}

.woocommerce-form-login .form-row {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-bottom: var(--space-4);
}

.woocommerce-form-login .input-text {
	min-height: 44px;
	padding: var(--space-3);
	border: 1px solid rgb(20 16 4 / 30%);
	border-radius: var(--radius);
	background: var(--white);
	font: inherit;
}

/* the trust close: one quiet typographic row on the Sand ground — the paper →
   sand → emerald(footer) descent closing the checkout (designer exact spec) */
.checkout-close {
	background: var(--sand);
	padding: var(--space-6) var(--gutter);
}

.checkout-close__inner {
	max-width: var(--container-checkout);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: var(--space-8);
	align-items: center;
}

.checkout-close__item {
	font-family: var(--font-ui);
	font-size: var(--text-small);
	line-height: 1.4;
	color: var(--ink);
	text-align: center;
	padding-inline: var(--space-4);
	margin: 0;
}

.checkout-close__item + .checkout-close__item {
	border-left: 1px solid rgb(20 16 4 / 15%);
}

.checkout-close__item a {
	color: var(--emerald);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 900px) {
	.checkout-close__inner {
		grid-template-columns: 1fr;
		row-gap: var(--space-3);
	}

	.checkout-close__item + .checkout-close__item {
		border-left: 0;
	}
}

/* ---------- order received: the receipt across the counter (S9) ---------- */

.order-received-page {
	padding: 0;
}

.order-plate {
	padding: var(--space-24) 0;
	text-align: center;
}

.order-plate--received {
	color: var(--cream);
}

.order-plate__heading {
	font-family: var(--font-display);
	font-size: var(--text-display);
	font-weight: 600;
	line-height: var(--leading-display);
	margin: 0 0 var(--space-4);
}

.order-plate__line {
	font-size: var(--text-h3);
	max-width: var(--measure);
	margin-inline: auto;
	margin-bottom: 0;
}

.order-plate--received .order-plate__line {
	color: rgb(240 230 197 / 90%);
}

.order-plate--failed {
	text-align: left;
}

.order-plate--failed .order-plate__inner {
	max-width: var(--measure);
}

.order-plate--failed .order-plate__line {
	margin-inline: 0;
	margin-bottom: var(--space-6);
}

.order-plate__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-4);
}

/* the de-emphasized retry on the uncertain branch — present, never the lead,
   so no one blind-retries into a possible double charge */
.order-plate__pay-quiet {
	font-size: var(--text-small);
	color: rgb(20 16 4 / 55%);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.order-received-body__inner {
	max-width: var(--measure);
	margin-inline: auto;
	padding-top: var(--space-16);
	padding-bottom: var(--space-16);
}

/* the overview as a papers block — the order documented, not dumped */
.order-papers__rows {
	margin: 0;
}

.order-papers__row {
	display: flex;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-3) 0;
	border-bottom: 1px solid rgb(20 16 4 / 12%);
}

.order-papers__row dt {
	font-size: var(--text-kicker);
	font-weight: 600;
	letter-spacing: var(--kicker-tracking);
	text-transform: uppercase;
	color: rgb(20 16 4 / 65%);
	margin: 0;
}

.order-papers__row dd {
	margin: 0;
	font-weight: 600;
	text-align: right;
}

.order-next {
	margin-top: var(--space-12);
}

.order-next__heading {
	font-family: var(--font-display);
	font-size: var(--text-h2);
	font-weight: 600;
	margin: 0 0 var(--space-3);
}

.order-next__line {
	font-size: var(--text-h3);
	margin: 0 0 var(--space-3);
}

.order-next__contact {
	color: rgb(20 16 4 / 70%);
	margin: 0;
}

.order-next__contact a,
.order-plate__line a {
	color: var(--emerald);
	text-underline-offset: 3px;
}

/* the WooCommerce order-details table (rendered by the thankyou hook)
   composed onto the receipt rather than dumped as a raw shop_table */
.order-received-page .woocommerce-order-details,
.order-received-page .woocommerce-customer-details {
	max-width: var(--measure);
	margin: var(--space-8) auto 0;
	padding-inline: var(--gutter);
}

.order-received-page .woocommerce-order-details h2,
.order-received-page .woocommerce-customer-details h2 {
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-weight: 600;
	margin: 0 0 var(--space-3);
}

.order-received-page .woocommerce-table--order-details {
	width: 100%;
	border-collapse: collapse;
}

.order-received-page .woocommerce-table--order-details th,
.order-received-page .woocommerce-table--order-details td {
	padding: var(--space-3) 0;
	border-bottom: 1px solid rgb(20 16 4 / 12%);
	text-align: left;
}

/* ---------- my account: the standing counter (S9) ---------- */

.account-page {
	max-width: var(--container);
	margin-inline: auto;
	padding: var(--space-12) var(--gutter) var(--space-24);
}

.account-page__header {
	border-bottom: 1px solid rgb(20 16 4 / 15%);
	padding-bottom: var(--space-4);
	margin-bottom: var(--space-8);
}

.account-page__title {
	font-family: var(--font-display);
	font-size: var(--text-display);
	font-weight: 600;
	line-height: var(--leading-display);
	margin: 0;
}

.account-layout {
	display: grid;
	grid-template-columns: 15rem minmax(0, 1fr);
	gap: var(--space-16);
	align-items: start;
}

/* the composed rail: labeled rows, the current one marked by a solid rule and
   weight — never color alone (§11). Sticky on desktop so it stands beside long
   endpoint content the way the counter stands beside the shelf. */
.account-nav {
	position: sticky;
	top: calc(var(--header-height) + var(--space-4));
}

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

.account-nav__item {
	margin: 0;
}

.account-nav__link {
	display: block;
	position: relative;
	padding: var(--space-3) 0 var(--space-3) var(--space-4);
	border-bottom: 1px solid rgb(20 16 4 / 10%);
	font-family: var(--font-ui);
	font-size: var(--text-body);
	font-weight: 500;
	color: rgb(20 16 4 / 62%);
	text-decoration: none;
	transition: color var(--duration-micro) ease;
}

.account-nav__item:last-child .account-nav__link {
	border-bottom: 0;
}

.account-nav__link::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 0;
	background: var(--emerald);
	transition: height var(--duration-micro) ease;
}

.account-nav__link:hover {
	color: var(--ink);
}

.account-nav__item.is-active .account-nav__link {
	color: var(--ink);
	font-weight: 600;
}

.account-nav__item.is-active .account-nav__link::before {
	height: 1.15em;
}

/* Log out reads as the quiet terminal action, set apart from the endpoints */
.account-nav__item--customer-logout {
	margin-top: var(--space-4);
	padding-top: var(--space-4);
	border-top: 1px solid rgb(20 16 4 / 15%);
}

.account-content {
	min-width: 0;
}

/* the dashboard: the greeting on a line seam, then the account's shape as
   composed entry cards — the front desk, not a paragraph of links */
.account-dashboard__welcome {
	font-family: var(--font-display);
	font-size: var(--text-h1);
	font-weight: 600;
	line-height: var(--leading-display);
	margin: 0 0 var(--space-8);
	padding-bottom: var(--space-4);
	border-bottom: 1px solid rgb(20 16 4 / 15%);
}

.account-dashboard__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-4);
}

/* each card carries the counter language: the Ink rule, data set into it */
.account-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-6);
	background: var(--white);
	border: var(--rule-ink);
	border-radius: var(--radius);
	text-decoration: none;
	color: var(--ink);
	transition: box-shadow var(--duration-micro) ease, transform var(--duration-micro) ease;
}

.account-card:hover {
	box-shadow: var(--shadow-elevation);
	transform: translateY(-2px);
}

.account-card__label {
	font-family: var(--font-ui);
	font-size: var(--text-kicker);
	font-weight: 600;
	letter-spacing: var(--kicker-tracking);
	text-transform: uppercase;
	color: rgb(20 16 4 / 65%);
}

.account-card__lead {
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-weight: 600;
	color: var(--ink);
}

.account-card__lead--muted {
	font-family: var(--font-ui);
	font-size: var(--text-small);
	font-weight: 400;
	color: rgb(20 16 4 / 60%);
	overflow-wrap: anywhere;
}

/* the status badge: the status name toned by the contract palette (§4.1). The
   name text carries the meaning; the tone reinforces, never replaces it (§11) */
.order-status {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	font-family: var(--font-ui);
	font-size: var(--text-kicker);
	font-weight: 600;
	letter-spacing: var(--kicker-tracking);
	text-transform: uppercase;
	white-space: nowrap;
	padding: 0.2em 0.6em;
	border-radius: var(--radius);
	color: var(--status-color);
	background: color-mix(in srgb, var(--status-color) 12%, var(--white));
	border: 1px solid color-mix(in srgb, var(--status-color) 30%, var(--white));
}

/* semantic toning so states read at a glance: done, in-progress, waiting,
   failed — with a neutral Ink fail-safe for any unmapped status (§4.1) */
.order-status--done { --status-color: var(--success-green); }
.order-status--in-progress { --status-color: var(--emerald); }
.order-status--attention { --status-color: var(--notice-amber); }
.order-status--failed { --status-color: var(--signal-red); }
.order-status--neutral { --status-color: var(--ink); }

/* orders as specimen rows — the order history in the papers language, one
   ruled row per order, not the stock shop_table */
.orders-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.orders-row {
	display: grid;
	/* the id keeps a floor so a wide status badge never squeezes the date to
	   a wrap; status/total/actions size to content, actions held to the right */
	grid-template-columns: minmax(8rem, 1fr) auto auto auto;
	gap: var(--space-6);
	align-items: center;
	padding: var(--space-6) 0;
	border-bottom: 1px solid rgb(20 16 4 / 12%);
}

.orders-row:first-child {
	padding-top: 0;
}

.orders-row__id {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.orders-row__number {
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
}

.orders-row__number:hover {
	color: var(--emerald);
}

.orders-row__date {
	font-size: var(--text-small);
	color: rgb(20 16 4 / 60%);
	white-space: nowrap;
}

.orders-row__total {
	font-weight: 600;
	white-space: nowrap;
}

.orders-row__actions {
	display: flex;
	gap: var(--space-4);
	justify-content: flex-end;
}

.orders-row__actions .text-cta {
	color: var(--emerald);
}

.orders-pagination {
	display: flex;
	justify-content: space-between;
	margin-top: var(--space-8);
}

.orders-empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-4);
}

.orders-empty__line {
	font-size: var(--text-h3);
	margin: 0;
}

/* the lede that opens an endpoint (addresses description, etc.) */
.account-intro {
	max-width: var(--measure);
	margin: 0 0 var(--space-8);
	color: rgb(20 16 4 / 70%);
}

/* addresses as specimen tags: the type as the eyebrow, the address set in */
.account-addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-6);
}

.address-tag {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-6);
	background: var(--white);
	border: var(--rule-ink);
	border-radius: var(--radius);
}

.address-tag__eyebrow {
	font-family: var(--font-ui);
	font-size: var(--text-kicker);
	font-weight: 600;
	letter-spacing: var(--kicker-tracking);
	text-transform: uppercase;
	color: rgb(20 16 4 / 65%);
}

.address-tag__lines {
	font-style: normal;
	line-height: var(--leading-body);
	margin: 0;
}

.address-tag__edit {
	margin-top: auto;
	align-self: flex-start;
	color: var(--emerald);
}

/* account forms (edit-account, edit-address) in the system's field geometry.
   Kept separate from the §14-sealed checkout field CSS so an account change
   never reaches into the revenue-critical selectors (§2.2 change isolation) */
.account-content form {
	max-width: 40rem;
}

:is(.account-content, .account-auth) .form-row {
	margin: 0 0 var(--space-4);
}

:is(.account-content, .account-auth) .form-row label {
	display: block;
	margin-bottom: var(--space-1);
	font-size: var(--text-small);
	font-weight: 600;
}

:is(.account-content, .account-auth) .form-row .required {
	color: var(--signal-red);
	text-decoration: none;
}

:is(.account-content, .account-auth) .form-row .input-text,
:is(.account-content, .account-auth) .form-row input[type="text"],
:is(.account-content, .account-auth) .form-row input[type="email"],
:is(.account-content, .account-auth) .form-row input[type="password"],
:is(.account-content, .account-auth) .form-row input[type="tel"],
:is(.account-content, .account-auth) .form-row select,
:is(.account-content, .account-auth) .form-row textarea {
	width: 100%;
	min-height: 44px;
	padding: var(--space-3);
	border: 1px solid rgb(20 16 4 / 30%);
	border-radius: var(--radius);
	background: var(--white);
	color: var(--ink);
	font: inherit;
}

:is(.account-content, .account-auth) .form-row.woocommerce-invalid .input-text,
:is(.account-content, .account-auth) .form-row.woocommerce-invalid select {
	border-color: var(--signal-red);
}

/* the remember-me checkbox is not a boxed field — inline it with its label */
.account-auth .woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-weight: 400;
	cursor: pointer;
}

.account-auth .woocommerce-form-login__rememberme input {
	width: auto;
	min-height: 0;
}

/* the two-name row pairs; WooCommerce's own .clear div breaks the float */
.account-content .form-row-first {
	float: left;
	width: 48%;
}

.account-content .form-row-last {
	float: right;
	width: 48%;
}

.account-content .clear {
	clear: both;
}

.account-content fieldset {
	margin: var(--space-8) 0 0;
	padding: var(--space-6) 0 0;
	border: 0;
	border-top: 1px solid rgb(20 16 4 / 15%);
}

.account-content fieldset legend {
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-weight: 600;
	padding: 0;
	margin-bottom: var(--space-4);
}

/* the inline field note (display-name hint) reads as quiet guidance */
.account-content .form-row span em {
	display: block;
	margin-top: var(--space-1);
	font-size: var(--text-small);
	font-style: normal;
	color: rgb(20 16 4 / 60%);
}

/* the login page: sign-in beside register, staged under the account seam */
.account-auth {
	max-width: var(--measure);
}

.account-auth--split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	max-width: 58rem;
}

.account-auth--split .account-auth__panel:first-child {
	padding-right: var(--space-12);
	border-right: 1px solid rgb(20 16 4 / 12%);
}

.account-auth--split .account-auth__panel:last-child {
	padding-left: var(--space-12);
}

.account-auth__heading {
	font-family: var(--font-display);
	font-size: var(--text-h2);
	font-weight: 600;
	margin: 0 0 var(--space-6);
}

.account-auth__note {
	color: rgb(20 16 4 / 70%);
}

.account-auth .lost_password {
	margin-top: var(--space-4);
}

.account-auth .lost_password a {
	color: var(--emerald);
	text-underline-offset: 3px;
}

@media (max-width: 860px) {
	.account-layout {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}

	.account-dashboard__cards {
		grid-template-columns: 1fr;
	}

	/* the order row stacks: identity + status on top, then total, then actions */
	.orders-row {
		grid-template-columns: 1fr auto;
		gap: var(--space-3) var(--space-4);
	}

	.orders-row__id {
		grid-column: 1;
	}

	.orders-row__total {
		grid-column: 1 / -1;
	}

	.orders-row__actions {
		grid-column: 1 / -1;
		justify-content: flex-start;
	}

	.account-addresses {
		grid-template-columns: 1fr;
	}

	.account-content .form-row-first,
	.account-content .form-row-last {
		float: none;
		width: 100%;
	}

	.account-auth--split {
		grid-template-columns: 1fr;
	}

	.account-auth--split .account-auth__panel:first-child {
		padding-right: 0;
		padding-bottom: var(--space-8);
		margin-bottom: var(--space-8);
		border-right: 0;
		border-bottom: 1px solid rgb(20 16 4 / 12%);
	}

	.account-auth--split .account-auth__panel:last-child {
		padding-left: 0;
	}

	/* on mobile the rail composes into a horizontal scroller of chips — a
	   composed selector, never a tall raw stack pushing content off-screen */
	.account-nav {
		position: static;
		margin-inline: calc(var(--gutter) * -1);
		padding-inline: var(--gutter);
		overflow-x: auto;
		scrollbar-width: none;
	}

	.account-nav::-webkit-scrollbar {
		display: none;
	}

	.account-nav__list {
		display: flex;
		gap: var(--space-2);
		width: max-content;
	}

	.account-nav__link {
		padding: var(--space-2) var(--space-4);
		border: 1px solid rgb(20 16 4 / 18%);
		border-radius: 999px;
		white-space: nowrap;
	}

	.account-nav__item:last-child .account-nav__link {
		border: 1px solid rgb(20 16 4 / 18%);
	}

	.account-nav__link::before {
		display: none;
	}

	.account-nav__item.is-active .account-nav__link {
		border-color: var(--emerald);
		box-shadow: inset 0 0 0 1px var(--emerald);
	}

	.account-nav__item--customer-logout {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}
}

/* ---------- view order: the delivery reality (S9 slice 4g) ---------- */

.view-order__header {
	padding-bottom: var(--space-6);
	margin-bottom: var(--space-6);
	border-bottom: 1px solid rgb(20 16 4 / 15%);
}

.view-order__header .order-status {
	margin-bottom: var(--space-3);
}

.view-order__id {
	font-family: var(--font-display);
	font-size: var(--text-h1);
	font-weight: 600;
	line-height: var(--leading-display);
	margin: 0;
}

.view-order__date {
	display: block;
	margin-top: var(--space-1);
	font-size: var(--text-small);
	color: rgb(20 16 4 / 60%);
}

.view-order__section-heading,
.view-order .woocommerce-order-details h2,
.view-order .woocommerce-customer-details .woocommerce-column__title,
.view-order .woocommerce-customer-details > h2 {
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-weight: 600;
	margin: 0 0 var(--space-4);
}

/* the timeline — the real record of what happened, in the papers language
   (dated rows, not a numbered list, not a map or a phantom tracker) */
.view-order__timeline {
	margin-bottom: var(--space-6);
}

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

.order-timeline__row {
	display: grid;
	grid-template-columns: 4.5rem 1fr;
	gap: var(--space-4);
	padding: var(--space-3) 0;
	border-bottom: 1px solid rgb(20 16 4 / 10%);
}

.order-timeline__date {
	font-size: var(--text-kicker);
	font-weight: 600;
	letter-spacing: var(--kicker-tracking);
	text-transform: uppercase;
	color: rgb(20 16 4 / 60%);
}

.order-timeline__note {
	margin: 0;
}

.view-order__reassurance {
	max-width: var(--measure);
	margin: 0 0 var(--space-8);
	padding-bottom: var(--space-6);
	border-bottom: 1px solid rgb(20 16 4 / 15%);
	color: rgb(20 16 4 / 75%);
}

.view-order__reassurance a {
	color: var(--emerald);
	text-underline-offset: 3px;
}

/* the order documents — the table composed as clean rows, addresses as tags */
.view-order .woocommerce-order-details {
	margin-bottom: var(--space-8);
}

.view-order .woocommerce-table--order-details {
	width: 100%;
	border-collapse: collapse;
}

.view-order .woocommerce-table--order-details th,
.view-order .woocommerce-table--order-details td {
	padding: var(--space-3) 0;
	border-bottom: 1px solid rgb(20 16 4 / 12%);
	text-align: left;
}

.view-order .woocommerce-table--order-details .woocommerce-table__product-total {
	text-align: right;
	white-space: nowrap;
}

.view-order .woocommerce-table--order-details tfoot th {
	font-weight: 600;
}

.view-order .woocommerce-order-details a {
	color: var(--emerald);
	text-underline-offset: 3px;
}

.view-order .woocommerce-customer-details .addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-6);
}

.view-order .woocommerce-customer-details address {
	font-style: normal;
	line-height: var(--leading-body);
	margin: 0;
	padding: var(--space-6);
	background: var(--white);
	border: var(--rule-ink);
	border-radius: var(--radius);
}

/* order-again — WooCommerce's own button (completed orders only), as the
   counter action closing the order */
.view-order .order-again {
	margin-top: var(--space-6);
}

@media (max-width: 860px) {
	.view-order .woocommerce-customer-details .addresses {
		grid-template-columns: 1fr;
	}
}

/* ---------- lounge crossover ---------- */

.lounge-band {
	position: relative;
	overflow: hidden;
	min-height: 28rem;
	display: flex;
	align-items: center;
}

.lounge-band__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* text over the rendering sits on the contracted emerald scrim */
.lounge-band::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(27 67 50 / 62%);
}

.lounge-band__content {
	position: relative;
	z-index: 1;
	padding-block: var(--space-16);
}

.lounge-band__line {
	font-family: var(--font-display);
	font-size: var(--text-h2);
	font-weight: 500;
	line-height: 1.25;
	color: var(--white);
	max-width: 24ch;
	margin-bottom: var(--space-8);
}

.lounge-band__note {
	font-size: var(--text-kicker);
	font-weight: 600;
	letter-spacing: var(--kicker-tracking);
	text-transform: uppercase;
	color: var(--cream);
	margin: var(--space-6) 0 0;
}

/* ---------- reviews ---------- */

.reviews {
	padding-block: var(--space-24);
}

.reviews__grid {
	display: grid;
	gap: var(--space-12);
}

@media (min-width: 768px) {
	.reviews__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-16);
	}
}

.reviews__quote {
	margin: 0;
	border-left: 2px solid var(--emerald);
	padding-left: var(--space-6);
}

.reviews__quote p {
	font-family: var(--font-display);
	font-size: var(--text-h3);
	line-height: 1.5;
	max-width: none;
}

.reviews__quote cite {
	font-family: var(--font-ui);
	font-style: normal;
	font-size: var(--text-kicker);
	font-weight: 600;
	letter-spacing: var(--kicker-tracking);
	text-transform: uppercase;
	color: var(--emerald);
}

/* ---------- motion ---------- */

/* reversible reveals: in at full duration with stagger; out (bottom exit
   while scrolling up) at ~60% duration with no stagger; an interrupted
   transition resolves from its current progress */
.has-motion [data-reveal] {
	opacity: 0;
	transform: translateY(var(--reveal-rise));
	transition:
		opacity calc(var(--duration-reveal) * 0.6) var(--ease-reveal),
		transform calc(var(--duration-reveal) * 0.6) var(--ease-reveal);
	transition-delay: 0ms;
}

.has-motion [data-reveal].is-revealed {
	opacity: 1;
	transform: none;
	transition-duration: var(--duration-reveal);
	transition-delay: calc(var(--reveal-index, 0) * var(--stagger));
}

/* the not-found / empty-search fallback — a register-2 moment takes a
   composed, generous scale */
.not-found {
	padding-block: var(--space-32);
	max-width: 46rem;
}

.not-found h1 {
	font-size: var(--text-h1);
}

.not-found .search-form {
	display: flex;
	gap: var(--space-2);
	max-width: 28rem;
	margin-block: var(--space-8);
}

.search-form .search-field {
	flex: 1;
	font: inherit;
	color: var(--ink);
	background: var(--white);
	border: 1px solid rgb(20 16 4 / 25%);
	border-radius: var(--radius);
	padding: 0.75rem 1rem;
	min-height: 44px;
}

.search-form .search-submit {
	font-family: var(--font-ui);
	font-size: var(--text-small);
	font-weight: 600;
	letter-spacing: 0.02em;
	background: var(--emerald);
	color: var(--white);
	border: 0;
	border-radius: var(--radius);
	padding: 0.75rem 1.5rem;
	min-height: 44px;
	cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
	.site-header {
		transition: none;
	}

	.has-motion [data-reveal] {
		transform: none;
	}

	.has-motion [data-reveal].is-revealed {
		transition: opacity 200ms ease;
	}

	/* the overture collapses to the single quiet fade */
	html.has-overture .hero-split,
	html.has-overture .hero-split *,
	html.has-overture .hero-split__photo,
	html.has-overture .hero-split__sprig svg {
		animation: none;
	}

	.hero-split {
		animation: hero-fade 200ms ease both;
	}

	/* the ticker stands still as a single row */
	.strain-ticker__track {
		animation: none;
	}

	.strain-ticker__track[aria-hidden="true"] {
		display: none;
	}

	/* the photo lies flat; the pinned chapter unpins to normal flow */
	.hero-split__photo img {
		animation: none;
		scale: 1;
	}

	.chapter--pinned {
		height: auto;
		padding-block: var(--space-24);
	}

	.chapter__pin {
		position: static;
		min-height: 0;
	}

	.chapter__cutout--fade,
	.chapter__caption-swap--fade {
		display: none;
	}

	.chapter__stage .chapter__cutout:not(.chapter__cutout--fade),
	.chapter__caption-swap:not(.chapter__caption-swap--fade) {
		opacity: 1;
	}

	.has-motion [data-fade-in] {
		transition: none;
		opacity: 1;
	}

	.has-motion .story-teaser__inner.is-revealed .story-teaser__sprig svg {
		animation: none;
	}

	[data-depth] {
		transform: none !important;
	}

	.button:hover {
		transform: none;
	}
}


/* one corner, everywhere the checkout's hand touches (founder session R10):
   the tip module's controls and the place-order button join the same ladder
   token as the cards and field boxes — three probed values (2/4/5) become
   one. */
.checkout-review .wpslash-tip-wrapper input,
.checkout-review .wpslash-tip-wrapper button,
.checkout-review .wpslash-tip-wrapper .button,
.checkout-review .wpslash-tip-wrapper input[type="submit"],
.checkout-page .form-coupon .button,
#place_order {
	border-radius: var(--radius-field) !important;
}