/*
Theme Name: Medicina Labs
Theme URI: https://example.com
Author: Medicina Labs
Author URI: https://example.com
Description: Custom theme for Medicina Labs, a research peptide storefront. Built for WooCommerce.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: medicina-labs
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
	/* V2 technical-lane palette (build spec 2026-09). Green is the single
	   brand colour: --color-accent for CTAs and emphasis, --color-green-deep
	   for large surfaces (announcement strip, header, footer, gates). */
	--color-accent: #15654B;
	--color-accent-hover: #0E4635;
	--color-accent-light: #DCEBE4;
	--color-green-deep: #0E4635;

	--color-text-primary: #16211C;
	--color-text-secondary: #4F5A55;
	--color-text-muted: #7C857F;
	--color-text-inverse: #ffffff;

	/* Paper page ground; sand for the surfaces that hold product imagery and
	   for secondary panels. --color-surface is the true white reserved for
	   cards, inputs and dialogs so they lift off the paper. */
	--color-bg: #F4F5F0;
	--color-surface: #ffffff;
	--color-sand: #EDE7D8;
	--color-bg-warm: #F0ECE1;
	--color-bg-warm-strong: #E2DBC8;

	--color-border: #DDDFD6;
	--color-border-strong: #C5C9BE;

	--color-error: #c0392b;
	--color-error-light: #fbeae8;

	/* One soft-rectangle geometry everywhere; the pill and the three card
	   radii collapse to the same 8px so no component reads rounder than
	   another. Round icon buttons keep their own 50%. */
	--radius-pill: 8px;
	--radius-card: 8px;
	--radius-card-sm: 8px;
	--radius-input: 8px;

	--font-display: "Archivo", "IBM Plex Sans", Arial, Helvetica, sans-serif;
	--font-body: "IBM Plex Sans", Arial, Helvetica, sans-serif;
	--font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;

	--page-width: 78rem;
	--page-margin: 2.9296875rem;

	--shadow-card: 0 2px 10px rgba(26, 26, 26, 0.05);
	/* Lift for the interactive cards in the product grid. The resting
	   --shadow-card is deliberately near-invisible; on a warm card against a
	   white page it reads as no feedback at all, so hover gets its own,
	   deeper shadow tinted with the brand green rather than neutral black. */
	--shadow-card-hover: 0 12px 28px rgba(14, 70, 53, 0.12);
}

/* ==========================================================================
   Reset / base
   ========================================================================== */
* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--color-text-primary);
	background: var(--color-bg);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

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

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

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

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em;
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.15;
}

/* Technical data — prices, lot/CAS identifiers, counts, chips — is set in
   the mono face so it reads as data rather than copy. Applied by class, not
   by element, so body copy never picks it up by accident. */
.font-mono,
.woocommerce-Price-amount,
.product-card__price,
.product-price-card__price,
.product-tier__total,
.product-tier__meta del,
.product-sticky-bar__price,
.cart-drawer__item-price,
.cart-drawer__subtotal,
.product-subtitle,
.catalog-count,
.product-card__tag,
.catalog-filter,
.hero__badge,
.product-stock-badge {
	font-family: var(--font-mono);
}

/* Mono has no true bold at the weights we load; keep price emphasis at 500
   and let size carry the hierarchy. */
.product-card__price,
.product-price-card__price,
.product-tier__total ins,
.product-sticky-bar__price,
.cart-drawer__item-price {
	font-weight: 500;
	letter-spacing: -0.01em;
}

p {
	margin: 0 0 1em;
}

button {
	font-family: inherit;
}

.container {
	width: 100%;
	max-width: var(--page-width);
	margin: 0 auto;
	padding: 0 var(--page-margin);
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--color-text-primary);
	color: var(--color-text-inverse);
	padding: 0.75rem 1.25rem;
	z-index: 999;
	border-radius: 0 0 var(--radius-card-sm) 0;
}

.skip-link:focus {
	left: 0;
}

/* ==========================================================================
   Age gate
   ========================================================================== */
/* `align-items: center` on an overflowing flex container clips the top of the
   child out of reach, and with `body` locked to `overflow: hidden` behind the
   gate there is nothing left to scroll. On a 375px viewport the dialog runs
   817px tall, so the confirm button landed under Safari's toolbar with no way
   to reach it. Centring via `margin: auto` on the dialog keeps the dialog
   centred whenever it fits and lets the overlay scroll when it does not. */
.age-gate {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
	background: rgba(14, 70, 53, 0.8);
}

html.age-verified .age-gate {
	display: none;
}

html:not(.age-verified) body {
	overflow: hidden;
}

.age-gate__dialog {
	background: var(--color-surface);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	padding: 2.5rem;
	max-width: 27rem;
	width: 100%;
	margin: auto;
	text-align: center;
}

.age-gate__icon {
	width: 3.75rem;
	height: 3.75rem;
	border-radius: 50%;
	background: var(--color-accent-light);
	color: var(--color-accent-hover);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1.25rem;
}

.age-gate__title {
	font-size: 1.5rem;
	margin-bottom: 0.75rem;
}

.age-gate__text {
	color: var(--color-text-secondary);
	font-size: 0.9375rem;
	line-height: 1.6;
	margin-bottom: 1.5rem;
}

.age-gate__text strong {
	color: var(--color-text-primary);
}

.age-gate__checks {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
	text-align: left;
}

.age-gate__check {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.9rem 1rem;
	background: var(--color-bg-warm);
	border-radius: var(--radius-card-sm);
	cursor: pointer;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--color-text-primary);
}

.age-gate__check input[type="checkbox"] {
	flex-shrink: 0;
	width: 1.15rem;
	height: 1.15rem;
	margin-top: 0.1rem;
	accent-color: var(--color-accent);
	cursor: pointer;
}

.age-gate__legal {
	color: var(--color-text-muted);
	font-size: 0.8125rem;
	line-height: 1.6;
	margin-bottom: 1.75rem;
	text-align: left;
}

.age-gate__legal a {
	color: var(--color-accent-hover);
	text-decoration: underline;
}

.age-gate__actions {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	align-items: center;
}

.age-gate__confirm {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.9rem 1.75rem;
	border-radius: var(--radius-pill);
	font-size: 0.9375rem;
	font-weight: 600;
	border: none;
	cursor: pointer;
	background: var(--color-accent);
	color: var(--color-text-inverse);
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.age-gate__confirm:hover:not(:disabled) {
	background: var(--color-accent-hover);
}

.age-gate__confirm:disabled {
	background: var(--color-border-strong);
	cursor: not-allowed;
}

.age-gate__decline {
	background: none;
	border: none;
	color: var(--color-text-muted);
	font-size: 0.875rem;
	text-decoration: underline;
	cursor: pointer;
	padding: 0.5rem 1rem;
}

/* Scrolling above is what makes the gate usable at any height; this trims
   roughly 100px of chrome so that on most phones there is nothing to scroll
   in the first place. The legal copy keeps its size — it is already at the
   floor for fine print. */
@media (max-width: 600px) {
	.age-gate {
		padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
	}

	.age-gate__dialog {
		padding: 1.5rem 1.25rem;
	}

	.age-gate__icon {
		width: 2.75rem;
		height: 2.75rem;
		margin-bottom: 0.875rem;
	}

	.age-gate__title {
		font-size: 1.25rem;
	}

	.age-gate__text {
		margin-bottom: 1rem;
	}

	.age-gate__checks {
		gap: 0.5rem;
		margin-bottom: 1rem;
	}

	.age-gate__check {
		padding: 0.75rem 0.875rem;
	}

	.age-gate__legal {
		margin-bottom: 1.25rem;
	}
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.85rem 1.75rem;
	border-radius: var(--radius-pill);
	font-size: 0.9375rem;
	font-weight: 600;
	border: none;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
	white-space: nowrap;
}

/* One CTA colour sitewide: brand green, deep green on hover. */
.btn-primary {
	background: var(--color-accent);
	color: var(--color-text-inverse);
}

.btn-primary:hover {
	background: var(--color-accent-hover);
	transform: translateY(-1px);
}

/* Inverse button for deep-green surfaces (header, footer, gates): paper
   fill with deep-green text, so it never sits green-on-green. */
.btn-inverse {
	background: var(--color-bg);
	color: var(--color-green-deep);
}

.btn-inverse:hover {
	background: #ffffff;
	transform: translateY(-1px);
}

.btn-accent {
	background: var(--color-accent);
	color: var(--color-text-inverse);
}

.btn-accent:hover {
	background: var(--color-accent-hover);
	transform: translateY(-1px);
}

.btn:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* Standalone call to action under a block of content (the homepage
   favorites grid), where the default pill reads as small against a
   full-width section. */
.btn-lg {
	padding: 1.05rem 2.75rem;
	font-size: 1rem;
	font-weight: 600;
}

/* Same green as the card buttons at a much lighter weight: a pale accent
   fill with a ring and text in the full accent. Used for a section CTA that
   sits under a grid of solid accent pills, where a thirteenth solid pill
   would read as one more card button. Hover fills it to the solid accent,
   so it still resolves to the button colour on interaction. */
.btn-accent-soft {
	background: var(--color-accent-light);
	color: var(--color-accent-hover);
	box-shadow: inset 0 0 0 1.75px var(--color-accent);
}

.btn-accent-soft:hover {
	background: var(--color-accent);
	color: var(--color-text-inverse);
	transform: translateY(-1px);
}

.btn-secondary {
	background: transparent;
	color: var(--color-text-primary);
	box-shadow: inset 0 0 0 1.5px var(--color-border-strong);
}

.btn-secondary:hover {
	box-shadow: inset 0 0 0 1.5px var(--color-text-primary);
}

/* ==========================================================================
   Announcement bar
   ========================================================================== */
/* Sand band with deep-green text, so it reads as a separate quiet notice
   above the deep-green header rather than part of it. */
.announcement-bar {
	background: var(--color-sand);
	color: var(--color-green-deep);
	padding: 0.55rem 0;
	overflow: hidden;
}

.announcement-bar__marquee {
	width: 100%;
	max-width: var(--page-width);
	margin: 0 auto;
	padding: 0 var(--page-margin);
}

/* Static, centred strip: one row on desktop, no motion. */
.announcement-bar__track {
	display: flex;
	justify-content: center;
	width: 100%;
}

.announcement-bar__group {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	row-gap: 0.2rem;
}

.announcement-bar__item {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.01em;
	padding: 0 1.25rem;
	position: relative;
}

.announcement-bar__item::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: rgba(14, 70, 53, 0.35);
	transform: translateY(-50%);
}

.announcement-bar__item:last-child::after {
	display: none;
}

/* Inline accent icon before each statement: 14px stroke glyph, sized to the
   text's cap height and optically centred on the line. */
.announcement-bar__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.1em;
	height: 1.1em;
	margin-right: 0.5em;
	color: var(--color-accent);
	opacity: 1;
}

.announcement-bar__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Drawn at an exact 13px so each of the 13 stripes is one device pixel;
   at the old 2em (~12.6px) the stripes fell between pixels and smeared. The
   rects snap to the pixel grid; the stars keep normal anti-aliasing. */
.announcement-bar__flag {
	flex: 0 0 auto;
	display: block;
	width: auto;
	height: 13px;
	margin-right: 0.55em;
	border-radius: 1px;
	box-shadow: 0 0 0 1px rgba(14, 70, 53, 0.18);
}

.announcement-bar__flag rect {
	shape-rendering: crispEdges;
}

/* Restraint over completeness: the UPS upgrade line is the longest and the
   least essential, so it is not shown in the strip at any width; the four
   remaining statements fit one line down to ~1140px. */
.announcement-bar__item:nth-child(2) {
	display: none;
}

/* Tablet and small laptops: drop the COA line too, so the row still sits on
   one line without shrinking the type. */
@media (max-width: 1140px) {
	.announcement-bar__item:nth-child(3) {
		display: none;
	}
}

/* Phones: two short statements only — shipping and the RUO notice — so the
   strip stays one quiet line rather than a paragraph. */
@media (max-width: 599px) {
	.announcement-bar {
		padding: 0.5rem 0;
	}

	.announcement-bar__marquee {
		padding: 0 1rem;
	}

	.announcement-bar__item {
		font-size: 0.75rem;
		padding: 0 0.75rem;
	}

	.announcement-bar__item:nth-child(5) {
		display: none;
	}

	/* The two statements stack on a phone, so the separator dot would hang
	   at the end of the first line; drop it and let the rows centre. */
	.announcement-bar__item::after {
		display: none;
	}
}

/* Between the phone and tablet cut-offs the flag line still fits beside the
   two essentials, so it stays until the row would wrap. */
@media (min-width: 600px) and (max-width: 720px) {
	.announcement-bar__item:nth-child(5) {
		display: none;
	}

	.announcement-bar__item:nth-child(4)::after {
		display: none;
	}
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--color-green-deep);
	color: var(--color-text-inverse);
	border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1rem 0;
}

.site-logo {
	font-size: 1.375rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-text-inverse);
}

.site-logo img,
.site-logo .custom-logo {
	display: block;
	height: 3rem;
	width: auto;
}

.primary-nav {
	display: none;
}

.primary-nav ul {
	display: flex;
	align-items: center;
	gap: 2rem;
}

.primary-nav a {
	position: relative;
	display: inline-block;
	font-size: 0.9375rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.82);
	padding-bottom: 0.4rem;
	transition: color 0.15s ease;
}

.primary-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--color-bg);
	transform: scaleX(0);
	transition: transform 0.15s ease;
}

/* Direct child only: a current top-level item must not recolour the links
   inside its dropdown (they sit on a white panel). */
.primary-nav a:hover,
.primary-nav a.is-active,
.primary-nav li.current-menu-item > a {
	color: var(--color-text-inverse);
}

.primary-nav a:hover::after,
.primary-nav a.is-active::after,
.primary-nav li.current-menu-item > a::after {
	transform: scaleX(1);
}

/* --- Dropdowns (top-level items with children, e.g. About) ---------------
   Hover / focus-within open it in pure CSS; main.js layers aria state,
   Escape, click-outside and a first-tap-opens rule for touch screens. --- */
.primary-nav > ul > li.menu-item-has-children {
	position: relative;
}

.primary-nav li.menu-item-has-children > a {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

.primary-nav__caret {
	flex: 0 0 auto;
	margin-top: 1px;
	color: rgba(255, 255, 255, 0.6);
	transition: transform 0.15s ease, color 0.15s ease;
}

.primary-nav li.menu-item-has-children > a:hover .primary-nav__caret,
.primary-nav li.menu-item-has-children.is-open > a .primary-nav__caret,
.primary-nav li.menu-item-has-children:focus-within > a .primary-nav__caret {
	color: var(--color-text-inverse);
}

.primary-nav li.menu-item-has-children:hover > a .primary-nav__caret,
.primary-nav li.menu-item-has-children.is-open > a .primary-nav__caret,
.primary-nav li.menu-item-has-children:focus-within > a .primary-nav__caret {
	transform: rotate(180deg);
}

/* A child page being current lights up its parent exactly like a
   current top-level item. */
.primary-nav li.current-menu-ancestor > a,
.primary-nav li.current-menu-parent > a,
.primary-nav li.menu-item-has-children:hover > a,
.primary-nav li.menu-item-has-children.is-open > a,
.primary-nav li.menu-item-has-children:focus-within > a {
	color: var(--color-text-inverse);
}

.primary-nav li.current-menu-ancestor > a::after,
.primary-nav li.current-menu-parent > a::after,
.primary-nav li.menu-item-has-children:hover > a::after,
.primary-nav li.menu-item-has-children.is-open > a::after,
.primary-nav li.menu-item-has-children:focus-within > a::after {
	transform: scaleX(1);
}

.primary-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 20;
	display: block;
	min-width: 11.5rem;
	margin: 0;
	/* The transparent top edge bridges the gap between the link and the
	   panel so the pointer never "falls out" while moving down. */
	padding: 0.75rem 0 0;
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, -4px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
	pointer-events: none;
}

.primary-nav .sub-menu::before {
	content: "";
	display: block;
	position: absolute;
	inset: 0.75rem 0 0;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card-sm);
	box-shadow: 0 10px 30px rgba(14, 70, 53, 0.14), var(--shadow-card);
	z-index: -1;
}

.primary-nav li.menu-item-has-children:hover > .sub-menu,
.primary-nav li.menu-item-has-children.is-open > .sub-menu,
.primary-nav li.menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
	transition-delay: 0s;
	pointer-events: auto;
}

/* Escape closed it while the parent link is still focused. */
.primary-nav li.menu-item-has-children.is-dismissed:focus-within > .sub-menu {
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, -4px);
	pointer-events: none;
}

.primary-nav li.menu-item-has-children.is-dismissed:focus-within > a .primary-nav__caret {
	transform: none;
}

.primary-nav .sub-menu li {
	padding: 0;
}

.primary-nav .sub-menu li:first-child {
	padding-top: 0.5rem;
}

.primary-nav .sub-menu li:last-child {
	padding-bottom: 0.5rem;
}

.primary-nav .sub-menu a {
	display: block;
	margin: 0 0.5rem;
	padding: 0.6rem 0.85rem;
	border-radius: 8px;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.3;
	color: var(--color-text-secondary);
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.primary-nav .sub-menu a::after {
	display: none;
}

.primary-nav .sub-menu a:hover,
.primary-nav .sub-menu a:focus-visible,
.primary-nav .sub-menu li.current-menu-item > a {
	background: var(--color-accent-light);
	color: var(--color-accent-hover);
}

.primary-nav .sub-menu a:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
	.primary-nav .sub-menu,
	.primary-nav__caret {
		transition: none;
	}
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.header-icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	/* Shared by <a> and <button> (the search trigger): reset the UA button
	   chrome so both render as the same bare icon. */
	background: none;
	color: var(--color-text-inverse);
	cursor: pointer;
	font: inherit;
	transition: background-color 0.15s ease;
}

.header-icon-btn:hover {
	background: rgba(255, 255, 255, 0.12);
}

/* Feather's shopping-cart glyph carries more visual weight toward the
   right and top of its own viewBox, so it reads as off-centre inside
   the round icon button — most obvious against the hover/tap
   background. Nudge it to sit optically centred. */
#cart-drawer-trigger > svg {
	transform: translate(-1px, 0.5px);
}

.header-icon-btn__badge {
	position: absolute;
	top: 0.15rem;
	right: 0.15rem;
	min-width: 1.05rem;
	height: 1.05rem;
	padding: 0 0.3rem;
	border-radius: 999px;
	background: var(--color-bg);
	color: var(--color-green-deep);
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.05rem;
	text-align: center;
}

.menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	background: none;
	border: none;
	color: var(--color-text-inverse);
	cursor: pointer;
	border-radius: var(--radius-card-sm);
}

.menu-toggle:hover {
	background: rgba(255, 255, 255, 0.12);
}

@media (min-width: 960px) {
	.primary-nav {
		display: block;
	}
	.menu-toggle {
		display: none;
	}
}

/* Mobile nav drawer */
.mobile-nav {
	position: fixed;
	inset: 0;
	z-index: 200;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

.mobile-nav.is-open {
	visibility: visible;
	opacity: 1;
}

.mobile-nav__overlay {
	position: absolute;
	inset: 0;
	background: rgba(14, 70, 53, 0.55);
}

.mobile-nav__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 85%;
	max-width: 320px;
	background: var(--color-surface);
	padding: 1.5rem;
	transform: translateX(100%);
	transition: transform 0.25s ease;
	overflow-y: auto;
}

.mobile-nav.is-open .mobile-nav__panel {
	transform: translateX(0);
}

/* The menu's nine links left roughly the bottom 40% of the panel empty while
   the fastest route to an answer — the staffed text line — was only reachable
   from the contact page. Anchor a block there instead: shop, cart, and a
   tappable number. Column layout so it sits at the bottom on a tall phone but
   simply follows the links when the panel has to scroll. */
.mobile-nav__panel {
	display: flex;
	flex-direction: column;
}

.mobile-nav__footer {
	margin-top: auto;
	padding-top: 1.5rem;
	padding-bottom: env(safe-area-inset-bottom, 0px);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	border-top: 1px solid var(--color-border);
}

/* Everything below the divider is a block of actions, not more menu rows.
   .mobile-nav a puts a border-bottom on every link in the panel, which drew a
   rule under the cart and under the phone number and made them read as two
   more list items — and a stray line across the bottom of the pill.

   Note the .mobile-nav__panel qualifier here and on the three rules below.
   .mobile-nav a is one class plus one type, and it is declared further down
   this file, so it beat every bare .mobile-nav__shop / __cart / __tel rule on
   both specificity and order — their display:flex, colours and font sizes had
   never actually applied. The extra class puts them back in front.

   The header is in here too because the cart moved up beside the close
   button; without the exemption .mobile-nav a draws a rule under it and it
   reads as the first menu row rather than as a utility above the menu. */
.mobile-nav__panel .mobile-nav__header a,
.mobile-nav__panel .mobile-nav__footer a {
	border-bottom: 0;
}

/* .mobile-nav a also sets display:block, which beat .btn's inline-flex: the
   label sat against the left edge of a centred pill. Restoring the flex row
   re-centres it and lets the arrow sit on the baseline beside the text. */
.mobile-nav__panel .mobile-nav__shop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	width: 100%;
	min-height: 48px;
	padding: 0.75rem 1.25rem;
	font-size: 0.9375rem;
	/* .btn-accent's white lost to .mobile-nav a's --color-text-primary the same
	   way display and padding did, leaving near-black text on the accent fill. */
	color: var(--color-text-inverse);
	font-weight: 600;
}

/* The number and the reply promise are one thought, but they were siblings in
   a 0.75rem flex column, so the promise floated as far from the number as the
   number did from the cart. A tinted block binds them and reads as the
   support corner of the menu rather than a fourth link. */
.mobile-nav__support {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	padding: 0.6rem 0.75rem 0.7rem;
	background: var(--color-bg-warm);
	border-radius: var(--radius-card-sm);
}

/* In the panel header now, opposite the close button. Smaller than a menu
   row on purpose — it is a utility sitting above the navigation, not the
   first item of it. The 0.5rem left inset still lines its icon up with the
   menu links below. */
.mobile-nav__panel .mobile-nav__cart {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-text-primary);
}

.mobile-nav__panel .mobile-nav__cart:hover {
	color: var(--color-accent-hover);
}

.mobile-nav__cart-count {
	background: var(--color-accent);
	color: var(--color-text-inverse);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1;
	padding: 0.2rem 0.45rem;
	border-radius: var(--radius-pill);
	min-width: 1.25rem;
	text-align: center;
}

.mobile-nav__panel .mobile-nav__tel {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	/* Holds the 44px tap target without the card's padding making it taller. */
	min-height: 44px;
	padding: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--color-accent-hover);
}

.mobile-nav__promise {
	/* Hangs under the number, indented past the icon so it reads as a note on
	   the number rather than a line of its own. */
	margin: 0 0 0 1.75rem;
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--color-text-muted);
}

/* Which page you are on, in the menu you opened to leave it. */
.mobile-nav li.current-menu-item > a,
.mobile-nav__secondary a[aria-current="page"] {
	font-weight: 700;
	color: var(--color-accent-hover);
}

.mobile-nav__header {
	display: flex;
	/* Cart on the left, close on the right. */
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.5rem;
}

.mobile-nav__close {
	background: none;
	border: none;
	color: var(--color-text-primary);
	cursor: pointer;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--radius-card-sm);
}

.mobile-nav__close:hover {
	background: var(--color-bg-warm);
}

.mobile-nav ul {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.mobile-nav a {
	display: block;
	padding: 0.9rem 0.5rem;
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--color-text-primary);
	border-bottom: 1px solid var(--color-border);
}

/* The last link of the primary menu sits directly above .mobile-nav__secondary,
   which draws its own border-top as the group divider. With .mobile-nav a
   giving every link a border-bottom as well, the two rules stacked: a rule
   under "About" at the end of the list and a second one 20px lower at the top
   of the secondary group, with nothing between them. The secondary's border is
   the one that means something — it separates the groups and owns the spacing
   around it — so the list's trailing rule comes off. */
.mobile-nav__panel > ul:not(.mobile-nav__secondary) > li:last-child > a {
	border-bottom: 0;
}

/* 1.25rem here sat on top of the link's own 0.9rem of bottom padding, so
   the divider under "About" had 34px above it where every other rule in the
   list has 14px — the hole that read as an empty row. 0.5rem puts 22px above
   the line against 23px below it (this padding plus the secondary link's
   0.7rem), so the divider sits centred in its own gap. */
.mobile-nav__secondary {
	margin-top: 0.5rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--color-border);
}

.mobile-nav__secondary a {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--color-text-secondary);
	border-bottom: none;
	padding: 0.7rem 0.5rem;
}

.mobile-nav__secondary a:hover {
	color: var(--color-text-primary);
}

/* ==========================================================================
   Footer
   ========================================================================== */
body.home .site-footer {
	margin-top: 1.25rem;
}

body.single-product .site-footer {
	margin-top: 0.5rem;
}

.site-footer {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	background: var(--color-green-deep);
	color: rgba(255, 255, 255, 0.78);
	margin-top: 5rem;
}

.site-footer__main {
	padding: 3.25rem 0 2.25rem;
	display: grid;
	grid-template-columns: 1.6fr repeat(3, 1fr);
	gap: 2rem;
}

@media (max-width: 767px) {
	.site-footer__main {
		grid-template-columns: 1fr;
		gap: 2.5rem;
		padding-left: 5%;
	}

	.site-footer .site-footer__notice-wrap,
	.site-footer .site-footer__bottom {
		padding-left: 5%;
	}

	.site-footer__logo img {
		height: 3.74rem;
	}
}

.site-footer__brand .site-logo {
	display: inline-block;
	margin-bottom: 0.75rem;
}

.site-footer__logo img {
	display: block;
	height: 3.25rem;
	width: auto;
}

.site-footer__tagline {
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.9375rem;
	max-width: 26rem;
}

.footer-heading {
	font-size: 0.8125rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-family: var(--font-mono);
	color: rgba(255, 255, 255, 0.55);
	margin-bottom: 1rem;
}

.footer-links li {
	margin-bottom: 0.55rem;
}

.footer-links a {
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.78);
}

.footer-links a:hover {
	color: var(--color-text-inverse);
}

.site-footer__notice-wrap {
	padding-bottom: 1.75rem;
}

.site-footer__notice {
	padding: 1.25rem 1.5rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--radius-card);
}

.site-footer__legal-lead {
	margin: 0 0 0.85rem;
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-text-inverse);
}

.site-footer__legal {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 2.5rem;
}

.site-footer__legal p {
	margin: 0 0 0.6rem;
	font-size: 0.75rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.7);
}

.site-footer__legal strong {
	font-weight: 600;
	color: rgba(255, 255, 255, 0.92);
}

.site-footer__address {
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.55);
}

.site-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	padding: 1.25rem 0 1.5rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.site-footer__copyright {
	margin: 0;
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.55);
}

.site-footer__payments img {
	display: block;
	width: 7.5rem;
	height: auto;
	opacity: 0.85;
}

@media (max-width: 767px) {
	.site-footer__legal {
		grid-template-columns: 1fr;
	}

	.site-footer__notice {
		padding: 1rem 1.1rem 0.75rem;
	}
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
	background: var(--color-bg);
	/* Shallow bottom padding: the trust strip is the last thing in the hero
	   and the Research Use Only notice follows immediately, so this plus
	   that section's own top padding is the whole gap between them. */
	padding: 0 0 0.5rem;
	text-align: left;
}

/* The hero photograph IS the hero, edge to edge. The stage deliberately sits
   OUTSIDE `.container` so the picture reaches both viewport edges with no card,
   radius or gutter; only the copy inside it is pulled back onto the normal
   content grid by a nested `.container`.

   Ratio: 1706/760 (not the photo's own 1706/922) keeps the band wider than the
   image at every viewport, which means `cover` always fits by WIDTH — so the
   three vials are never cropped horizontally and the left negative space is
   preserved in full. Everything `cover` trims comes off the top and bottom,
   where the photo is empty wall and empty marble. */
.hero__stage {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	aspect-ratio: 1706 / 700;
	min-height: 28rem;
	/* The 72vh term only bites on wide-but-short screens (a 1536x800 laptop,
	   say), where the photo's own ratio would otherwise push the credibility
	   strip below the fold. Everywhere else the ratio or the rem cap wins. */
	max-height: min(44rem, 72vh);
	overflow: hidden;
	/* Matches the photo's own off-white so the band never flashes grey. */
	background: var(--color-bg);
}

.hero__stage-media {
	position: absolute;
	inset: 0;
	display: block;
}

/* Edge treatment: a soft dissolve into the page white so the photo doesn't end
   on a hard rectangle. The bottom ramp starts below the vial bases (they sit at
   ~86% of the band) so nothing on the product group is washed out, and the side
   ramps are barely-there — no border, no shadow, no card. */
.hero__stage-media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	/* Reaches solid white at 96%, not 100%. The trust row is pulled up over
	   the bottom of the photo, so its icon circles straddle the photo's edge;
	   with the fade still short of opaque at that edge the ground stepped
	   from ~rgb(250,250,250) above it to pure white below, and the step read
	   as a faint border around the top of each circle. Finishing the fade
	   early puts the whole overlap on one flat white. */
	background:
		linear-gradient(to bottom, rgba(244, 245, 240, 0) 84%, rgba(244, 245, 240, 0.6) 92%, #F4F5F0 96%),
		linear-gradient(to right, rgba(244, 245, 240, 0.62) 0%, rgba(244, 245, 240, 0) 22%),
		linear-gradient(to left, rgba(244, 245, 240, 0.32) 0%, rgba(244, 245, 240, 0) 6%);
}

.hero__stage-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Balanced so BOTH ends of the composition survive the vertical trim: the
	   foliage in the top-right corner and the vial bases + reflections at the
	   bottom. */
	object-position: center 55%;
}

.hero__inner {
	position: relative;
	width: 100%;
}

.hero__badge {
	display: inline-block;
	background: var(--color-accent-light);
	color: var(--color-accent-hover);
	font-size: 0.8125rem;
	font-weight: 500;
	padding: 0.5rem 1.05rem;
	border-radius: var(--radius-pill);
	margin-bottom: 1.5rem;
}

/* A slow "live" dot ahead of the claims — the ring breathes outward and
   fades, so the badge reads as something being verified continuously
   rather than a static label. Kept to one element and one ring: the pill
   sits under the headline and shouldn't compete with it.

   inline-block rather than a flex item so the " · " separators between the
   spans below are untouched. */
.hero__badge::before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	position: relative;
	top: -0.05em;
	width: 0.5rem;
	height: 0.5rem;
	margin-right: 0.5rem;
	border-radius: 50%;
	/* Lit core rather than a flat disc: a brighter green at the centre
	   falling to the accent at the rim, so the edge stays crisp. A white
	   core reads as a hole at this size, and the pill's light mint
	   background gives a glow little to work against. */
	background: radial-gradient(circle at 50% 42%, #5FB894 0%, #2F8A66 42%, var(--color-accent) 100%);
	animation: hero-badge-pulse 2.6s ease-out infinite;
}

/* rgba() of --color-accent (#1d9e75); a custom property can't be used
   inside rgba() without a separate channel token. */
@keyframes hero-badge-pulse {
	0% {
		box-shadow: 0 0 0.3rem rgba(47, 138, 102, 0.9), 0 0 0 0 rgba(21, 101, 75, 0.55);
		opacity: 1;
	}

	/* Holds real opacity while the ring is already wide. Fading straight
	   from 0.55 to 0 across the whole expansion made the ring invisible by
	   the time it had any size, so only the first instant of the pulse
	   ever read. */
	40% {
		box-shadow: 0 0 0.4rem rgba(47, 138, 102, 0.75), 0 0 0 0.35rem rgba(21, 101, 75, 0.24);
		opacity: 0.8;
	}

	75% {
		box-shadow: 0 0 0.3rem rgba(47, 138, 102, 0.85), 0 0 0 0.6rem rgba(21, 101, 75, 0);
		opacity: 0.85;
	}

	100% {
		box-shadow: 0 0 0.3rem rgba(47, 138, 102, 0.9), 0 0 0 0 rgba(21, 101, 75, 0);
		opacity: 1;
	}
}

/* The dot stays, the breathing stops. */
@media (prefers-reduced-motion: reduce) {
	.hero__badge::before {
		animation: none;
		box-shadow: 0 0 0.3rem rgba(47, 138, 102, 0.9), 0 0 0 0.15rem rgba(21, 101, 75, 0.25);
	}
}

.hero__badge span + span::before {
	content: " · ";
}

.hero__text {
	position: relative;
	width: 46%;
	min-width: 0;
	padding: 0 1.25rem 0 0;
}

.hero__headline {
	font-size: clamp(2rem, 3.45vw, 3.25rem);
	line-height: 1.12;
	max-width: 34rem;
	margin: 0 0 1.35rem;
	color: var(--color-text-primary);
}

.hero__headline-accent {
	color: var(--color-accent);
}

.hero__lead {
	color: var(--color-text-secondary);
	font-size: 1.125rem;
	line-height: 1.6;
	max-width: 30rem;
	margin: 0 0 2rem;
}

.hero__actions {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.hero__text-link {
	color: var(--color-text-primary);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hero__text-link:hover {
	color: var(--color-accent-hover);
}

/* Trust strip: four open claims, no boxes. A bold label beside a round
   tinted icon badge, set under a hairline, so it reads as a confident
   proof bar rather than a footnote. Four equal columns, each claim
   centred in its own.
   Tablet pairs them 2x2 (<=900px); phones stack icon over label below.

   No rule above it and no dividers between: the claims carry themselves.
   The negative margin lifts the strip until the labels sit just inside the
   bottom of the hero photo, which has ramped to near-white by then
   (.hero__stage-media::after runs 87% -> 95% -> 100%), so the dark text
   stays legible over it. z-index keeps the strip above the image. Desktop
   only; the narrower layouts below restore a normal gap. */
.hero__trust-row {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: -2.75rem 0 0;
	padding-top: 2rem;
}

.hero__trust-row li {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	padding: 0.25rem 0.5rem;
	white-space: nowrap;
	color: var(--color-text-primary);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
}

/* Technical verification marker: rounded square (8px), thin green rule,
   pale mint fill, green glyph. The marker is the wrapper, not the icon.
   It used to be background + border-radius:50% on the <svg> itself, which
   clipped the artwork: an SVG maps its viewBox to the border box and ignores
   padding for that mapping, so the round clip cut the corners off every icon
   — worst on the flag, whose viewBox is a 38x20 rectangle being squeezed into
   a 44px circle. With the disc on a wrapper the icon draws at its own size
   inside it and nothing is cut. */
.hero__trust-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	background: #EEF5F1;
	border: 1px solid rgba(21, 101, 75, 0.55);
	border-radius: var(--radius-card-sm);
	color: var(--color-accent-hover);
}

.hero__trust-icon > svg {
	width: 1.375rem;
	height: 1.375rem;
	display: block;
}

/* The flag keeps its own 38:20 proportions rather than being forced square —
   a squashed flag is more noticeable than a slightly wider icon. Height is
   auto so it scales from the width. Clears the base flag's radius/shadow. */
.hero__trust-icon > .hero__flag {
	width: 1.5rem;
	height: auto;
	border-radius: 2px;
	box-shadow: none;
}

@media (min-width: 901px) and (max-width: 1150px) {
	.hero__trust-row li {
		gap: 0.625rem;
		padding: 0.25rem 0.75rem;
		font-size: 0.9375rem;
		white-space: normal;
	}

	.hero__trust-icon {
		width: 2.5rem;
		height: 2.5rem;
	}

	.hero__trust-icon > svg {
		width: 1.25rem;
		height: 1.25rem;
	}

	.hero__trust-icon > .hero__flag {
		width: 1.375rem;
		height: auto;
	}
}

.contact-tile__chat picture,
.about-cta__media picture {
	display: block;
	width: 100%;
}

.site-footer__logo picture {
	display: block;
}

/* About page hero */
.about-hero {
	background: var(--color-bg);
	padding: 4.75rem 0 1.25rem;
}

.about-hero__grid {
	display: grid;
	grid-template-columns: 1fr 1.08fr;
	align-items: center;
	gap: 3.5rem;
}

.about-hero__eyebrow {
	margin: 0 0 1.1rem;
	color: var(--color-accent);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.about-hero__headline {
	margin: 0 0 1.5rem;
	font-size: clamp(2rem, 3.3vw, 2.75rem);
	font-weight: 700;
	line-height: 1.12;
	color: var(--color-text-primary);
}

.about-hero__headline-line {
	display: block;
}

.about-hero__headline-line--accent {
	color: var(--color-accent);
}

.about-hero__lead {
	margin: 0 0 2.25rem;
	max-width: 31rem;
	color: var(--color-text-secondary);
	font-size: 1.0625rem;
	line-height: 1.65;
}

.about-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
}

.about-hero__media {
	display: flex;
}

.about-hero__photo,
.about-hero__placeholder {
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-card);
	display: block;
}

.about-hero__photo {
	object-fit: cover;
}

.about-hero__placeholder {
	background: var(--color-accent-light);
	border: 1px solid var(--color-border);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.85rem;
	color: var(--color-accent-hover);
}

.about-hero__placeholder svg {
	width: 3.25rem;
	height: 3.25rem;
	opacity: 0.6;
}

.about-hero__placeholder span {
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	opacity: 0.8;
}

/* About page — closing CTA */
.about-cta {
	background: var(--color-bg);
	padding: 1.75rem 0 2.5rem;
}

.about-cta__panel {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	align-items: center;
	gap: 2.5rem;
	padding: 3rem 3.25rem;
	background: var(--color-bg-warm);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	overflow: hidden;
}

.about-cta__title {
	margin: 0 0 1rem;
	font-size: clamp(1.75rem, 2.9vw, 2.35rem);
	font-weight: 700;
	line-height: 1.15;
	color: var(--color-text-primary);
}

.about-cta__title-line {
	display: block;
}

.about-cta__lead {
	margin: 0 0 1.75rem;
	max-width: 30rem;
	color: var(--color-text-secondary);
	font-size: 1.0625rem;
	line-height: 1.6;
}

.about-cta__media img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--radius-card-sm);
}

@media (max-width: 900px) {
	.about-cta {
		padding: 1.25rem 0 1.5rem;
	}

	.about-cta__panel {
		grid-template-columns: 1fr;
		gap: 1.75rem;
		padding: 2rem 1.5rem 2.25rem;
	}

	.about-cta__lead {
		max-width: none;
	}
}

/* Tighten the space before the footer on the About page only. */
.page-template-template-about .site-footer {
	margin-top: 1.25rem;
}

.about-body {
	padding: 0 0 4rem;
}

.about-body__inner {
	max-width: 44rem;
	color: var(--color-text-secondary);
	line-height: 1.7;
}

.about-body__inner h2,
.about-body__inner h3 {
	color: var(--color-text-primary);
}

@media (max-width: 900px) {
	.about-hero {
		padding: 2.5rem 0 1.25rem;
	}

	.about-hero__grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.about-hero__lead {
		max-width: none;
	}
}

/* About page — values section */
.about-values {
	background: var(--color-bg-warm);
	padding: 3.5rem 0 4.5rem;
}

.about-values__intro {
	display: grid;
	grid-template-columns: 1fr 1.25fr;
	gap: 3.5rem;
	padding-bottom: 3rem;
}

.about-values__intro-title {
	margin: 0 0 0.9rem;
	font-size: clamp(1.5rem, 2.3vw, 1.85rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--color-text-primary);
}

.about-values__intro-note {
	margin: 0;
	max-width: 24rem;
	color: var(--color-text-secondary);
	font-size: 1rem;
	line-height: 1.6;
}

.about-values__intro-body p {
	margin: 0 0 1rem;
	color: var(--color-text-secondary);
	font-size: 1rem;
	line-height: 1.7;
}

.about-values__intro-body p:last-child {
	margin-bottom: 0;
}

.about-values__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}

.about-values__card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	padding: 1.75rem 1.85rem 1.9rem;
}

.about-values__card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.15rem;
}

.about-values__num {
	font-size: 1.875rem;
	font-weight: 700;
	line-height: 1;
	color: var(--color-text-primary);
}

.about-values__icon {
	display: inline-flex;
	color: var(--color-accent);
}

.about-values__icon svg {
	width: 1.5rem;
	height: 1.5rem;
	display: block;
}

.about-values__card-title {
	margin: 0 0 0.5rem;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--color-text-primary);
}

.about-values__card-text {
	margin: 0;
	color: var(--color-text-secondary);
	font-size: 1rem;
	line-height: 1.55;
}

@media (max-width: 900px) {
	.about-values {
		padding: 2.5rem 0 3.25rem;
	}

	.about-values__intro {
		grid-template-columns: 1fr;
		gap: 1.5rem;
		padding-bottom: 2rem;
	}

	.about-values__intro-note {
		max-width: none;
	}

	.about-values__grid {
		grid-template-columns: 1fr;
	}
}

/* Small laptops / large tablets: the stage follows the photo's own ratio here
   (max-height never bites), so it is shorter than on a wide screen while the
   copy is the same length. Trim the copy's vertical bulk so it keeps clear of
   both the stage edges and the marble horizon. */
@media (min-width: 901px) and (max-width: 1150px) {
	.hero__lead {
		font-size: 1rem;
		margin-bottom: 1.5rem;
	}

	.hero__headline {
		margin-bottom: 1rem;
	}

	.hero__badge {
		margin-bottom: 1rem;
	}

	.hero__actions {
		gap: 1rem;
	}
}

/* Below ~900px the overlay stops working: the copy column would be too narrow
   to hold the headline without running into the vials. Unstack the photo
   instead — copy first on clean white, the composition in full underneath. */
@media (max-width: 900px) {
	.hero__stage {
		display: flex;
		flex-direction: column;
		aspect-ratio: auto;
		min-height: 0;
		max-height: none;
		overflow: visible;
		background: none;
		padding-top: 2.25rem;
	}

	/* Copy leads, photo follows — the headline should be the first thing read
	   on a phone, with the composition supporting it underneath. Both stay
	   full-bleed children of the stage; only the copy is re-gridded by its own
	   nested container. */
	.hero__inner {
		order: 1;
	}

	.hero__stage-media {
		order: 2;
		position: relative;
		display: block;
		aspect-ratio: 16 / 9;
		margin-top: 1.75rem;
		overflow: hidden;
	}

	.hero__stage-media::after {
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 85%, rgba(255, 255, 255, 0.5) 93%, #fff 97%);
	}

	.hero__stage-img {
		/* The band is close to the photo's own ratio here, so the trim is small;
		   a slight right bias keeps the vial group off the edge. */
		object-position: 72% center;
	}

	.hero__text {
		width: auto;
		padding: 0;
	}

	.hero__headline {
		font-size: clamp(2.25rem, 5.2vw, 3rem);
	}

	.hero__trust-row {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem 1rem;
		margin-top: 2rem;
		padding-top: 1.75rem;
	}

	.hero__trust-row li {
		justify-content: flex-start;
		padding: 0;
		white-space: normal;
	}

	.hero__headline,
	.hero__lead {
		max-width: none;
	}
}

/* Phones: the hero copy is packed into a compact block — badge on one line,
   headline and lead paragraph side by side, both CTAs on a single row — so the
   photo underneath still lands above the fold instead of a scroll away.
   Scoped to phones; >=601px keeps the stacked full-size copy and the desktop
   overlay is untouched. */
@media (max-width: 600px) {
	.hero__stage {
		padding-top: 1.25rem;
	}

	/* Copy runs full width on phones: at this size a split column gives the
	   headline a ~130px measure and the paragraph a ~22-character line, which
	   reads as cramped no matter how it is styled. Full width buys the headline
	   three clean lines and the paragraph a proper measure, and the compact type
	   below still leaves the photo above the fold. */
	.hero__text {
		display: block;
	}

	.hero__badge {
		/* Set as a small tracked cap line rather than shrunken body copy — at
		   this size uppercase + letterspacing reads as a credential stamp, and it
		   holds "HPLC-MS Verified · 99.4%+ Purity" on one line. */
		/* A slim credential chip, not a full-width bar: at 12px the line ran to
		   267px of the 281px column and dominated the block. 10px tracked caps
		   holds one line down to 320px and reads as a stamp. */
		font-size: 0.625rem;
		letter-spacing: 0.04em;
		line-height: 1.45;
		text-transform: uppercase;
		white-space: nowrap;
		padding: 0.28rem 0.7rem;
		margin-bottom: 0.9rem;
	}

	.hero__headline {
		font-size: 1.625rem;
		line-height: 1.16;
		letter-spacing: -0.01em;
		margin: 0 0 0.6rem;
	}

	.hero__lead {
		font-size: 0.8125rem;
		line-height: 1.55;
		color: var(--color-text-secondary);
		margin: 0 0 1.1rem;
	}

	/* Twin pills: the primary button and the COA link share the row as equal
	   halves. An underlined text link next to a filled pill reads as leftover
	   desktop styling at this width, and two even targets are easier to hit. */
	.hero__actions {
		margin-top: 0;
		gap: 0.5rem;
	}

	/* Padding is tuned so both pills clear a 375px row together — at 1.1rem
	   they total ~288px against 281px of content width and the second one wraps
	   to a line of its own. */
	.hero__actions .btn,
	.hero__text-link {
		padding: 0.68rem 0.85rem;
		font-size: clamp(0.75rem, 3.45vw, 0.8125rem);
	}

	/* The COA link becomes an outlined pill: an underlined text link beside a
	   filled button reads as leftover desktop styling at this width, and two
	   matched pills give two even tap targets. */
	.hero__text-link {
		text-align: center;
		text-decoration: none;
		border: 1px solid var(--color-border-strong);
		border-radius: var(--radius-pill);
		white-space: nowrap;
		/* Its 1px border would otherwise make it 2px taller than the filled
		   button beside it. */
		padding: calc(0.68rem - 1px) calc(0.85rem - 1px);
	}

	/* Photo returns to a full-width band under the copy, cropped to the three
	   vials with even air either side.

	   The vial group runs 0.573 -> 0.904 of the source width, so its centre is
	   at 0.739 and the widest crop that can stay centred on it is bounded by
	   the right edge: half-width 1 - 0.739 = 0.261, crop width 0.5225 of the
	   source. With object-fit: cover the crop width is (container ratio /
	   image ratio), so 0.5225 x 1200 / 649 = 627/649 is the ratio that yields
	   it, and the crop then sits flush right — hence 100%, not 94%. Result is
	   18.3% empty either side of the vials.

	   Both numbers are tied to this photo's composition. A different hero
	   image needs them re-derived, not nudged. */
	.hero__stage-media {
		aspect-ratio: 627 / 649;
		margin-top: 1rem;
	}

	.hero__stage-img {
		object-position: 100% center;
	}

	/* Dissolve at BOTH ends, so the band doesn't start or finish on a hard
	   horizontal line. The top ramp clears by 22% — above the vial caps at
	   ~31% — and the bottom ramp is the one the wider breakpoints use. */
	.hero__stage-media::after {
		background: linear-gradient(
			to bottom,
			#fff 0%,
			rgba(255, 255, 255, 0.75) 6%,
			rgba(255, 255, 255, 0.3) 13%,
			rgba(255, 255, 255, 0) 22%,
			rgba(255, 255, 255, 0) 86%,
			rgba(255, 255, 255, 0.5) 95%,
			#fff 100%
		);
	}

	/* Phones: one compact 1x4 row instead of the old 2x2 block.

	   The row breaks out of the container's phone gutter — ~14.6vw a side,
	   which left only 53px a cell and clipped "Independent Lab Testing" — to a
	   flat 1rem gutter: 50% is half the container's content box and 50vw half
	   the viewport, so the pair pulls each edge back to the viewport and adds
	   the gutter back. That buys ~66px a cell at 320px and ~80px at 375px.

	   Disc and label size off the viewport rather than fixed rem so the label
	   still clears the gutter at the 320px class, and minmax(0,1fr) lets the
	   cells shrink under their content instead of forcing the grid wider. */
	.hero__trust-row {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0.375rem 0.5rem;
		margin-top: 0.25rem;
		margin-left: calc(50% - 50vw + 1rem);
		margin-right: calc(50% - 50vw + 1rem);
		padding-top: 0.5rem;
	}

	.hero__trust-row li {
		flex-direction: column;
		align-items: center;
		gap: 0.4375rem;
		font-size: clamp(0.625rem, 3vw, 0.75rem);
		line-height: 1.3;
		text-align: center;
		overflow-wrap: break-word;
		hyphens: auto;
	}

	.hero__trust-icon {
		width: clamp(2rem, 9vw, 2.5rem);
		height: clamp(2rem, 9vw, 2.5rem);
	}

	/* Percentages of the disc, so each glyph tracks the clamped disc size. */
	.hero__trust-icon > svg {
		width: 50%;
		height: 50%;
	}

	.hero__trust-icon > .hero__flag {
		width: 56%;
		height: auto;
	}
}

/* Very small phones (320px class). The badge's `nowrap` holds one line down to
   ~345px; below that the line is wider than the copy column and would bleed
   past the page gutter, so let it wrap instead of overflowing. */
@media (max-width: 344px) {
	.hero__badge {
		white-space: normal;
	}
}

/* About page — tighter type + spacing on phones.
   Placed after all the base .about-* rules so these win when the query matches. */
@media (max-width: 600px) {
	.about-hero {
		padding: 2rem 0 0.5rem;
	}

	.about-hero__grid {
		gap: 1.5rem;
	}

	.about-hero__eyebrow {
		margin-bottom: 0.75rem;
		font-size: 0.8125rem;
	}

	.about-hero__headline {
		margin-bottom: 1rem;
		font-size: 1.625rem;
		line-height: 1.15;
	}

	.about-hero__lead {
		margin-bottom: 1.5rem;
		font-size: 0.9375rem;
		line-height: 1.55;
	}

	.about-hero__actions .btn {
		padding: 0.7rem 1.35rem;
		font-size: 0.875rem;
	}

	.about-values {
		padding: 2.25rem 0 2.5rem;
	}

	.about-values__intro {
		gap: 1.25rem;
		padding-bottom: 1.75rem;
	}

	.about-values__intro-title {
		margin-bottom: 0.6rem;
		font-size: 1.25rem;
		line-height: 1.3;
	}

	.about-values__intro-note {
		font-size: 0.875rem;
	}

	.about-values__intro-body p {
		margin-bottom: 0.75rem;
		font-size: 0.875rem;
		line-height: 1.6;
	}

	.about-values__grid {
		gap: 0.75rem;
	}

	.about-values__card {
		padding: 1.15rem 1.25rem 1.3rem;
	}

	.about-values__card-head {
		margin-bottom: 0.75rem;
	}

	.about-values__num {
		font-size: 1.5rem;
	}

	.about-values__icon svg {
		width: 1.25rem;
		height: 1.25rem;
	}

	.about-values__card-title {
		margin-bottom: 0.35rem;
		font-size: 1rem;
	}

	.about-values__card-text {
		font-size: 0.875rem;
		line-height: 1.5;
	}

	.about-cta {
		padding: 1rem 0 1.5rem;
	}

	.about-cta__panel {
		gap: 1.25rem;
		padding: 1.5rem 1.25rem 1.75rem;
	}

	.about-cta__title {
		margin-bottom: 0.75rem;
		font-size: 1.375rem;
		line-height: 1.2;
	}

	.about-cta__lead {
		margin-bottom: 1.25rem;
		font-size: 0.9375rem;
		line-height: 1.55;
	}

	.about-cta__text .btn {
		padding: 0.7rem 1.35rem;
		font-size: 0.875rem;
	}

	.about-body__inner {
		font-size: 0.9375rem;
		line-height: 1.6;
	}

	.page-template-template-about .research-notice {
		padding: 0.9rem 1.1rem;
	}
}

/* ==========================================================================
   Research notice + favorites marquee
   ========================================================================== */
.research-notice {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card-sm);
	padding: 1.1rem 1.4rem;
}

/* A <p>, not a heading: this is a legal notice, not a section of the page.
   It used to be an h2, which put a disclaimer at the same document level as
   the product sections. The declarations below were inherited from the global
   heading rule and are restated here so the tag change is invisible. */
.research-notice__title {
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0 0 0.3rem;
}

.research-notice__text {
	color: var(--color-text-muted);
	font-size: 0.8125rem;
	line-height: 1.5;
	margin: 0;
}

.section--tight.research-notice-section {
	padding-top: 1rem;
	padding-bottom: 1.75rem;
}

/* Phones: the notice ran eight lines and 215px tall — a legal disclaimer
   standing taller than the first row of the product grid. Two changes do the
   work: the 1rem gutter the favorites grid already uses widens the measure
   from 235px to 308px, and 12px at 1.45 line-height takes it to six lines and
   154px. That is a 28% cut without dropping to fine print — the text is still
   a step above the 11px card labels.

   Scoped to the section wrapper, so the product page's own
   .product-research-notice is untouched. The About page renders the same
   markup inside the same wrapper and gets this too, which is the point: it is
   one component with one set of copy. */
@media (max-width: 600px) {
	.research-notice-section .research-notice {
		margin-left: calc(50% - 50vw + 1rem);
		margin-right: calc(50% - 50vw + 1rem);
		padding: 0.85rem 1.1rem;
	}

	.research-notice-section .research-notice__title {
		font-size: 0.875rem;
	}

	.research-notice-section .research-notice__text {
		font-size: 0.75rem;
		line-height: 1.45;
	}

	.section--tight.research-notice-section {
		padding-top: 0.75rem;
		padding-bottom: 1.25rem;
	}
}

/* "Researchers' Favorites" — a 12-card grid between the In The Lab strip
   and Our Process. The photo strip above runs edge to edge with no bottom
   padding of its own, so this carries the gap between them. */
.section--tight.favorites-section {
	padding-top: 1.75rem;
	padding-bottom: 1rem;
}

.favorites-cta {
	display: flex;
	justify-content: center;
	margin-top: 2.5rem;
}

/* Phones: .btn-lg is sized for a full-width desktop section, and under 165px
   cards it came out 254x58 — the heaviest thing on the screen, heavier than
   the twelve card buttons it sits below. The 2.5rem above it comes down with
   it, so shrinking the button tightens the block instead of leaving the old
   hole behind. 0.75rem of vertical padding holds the tap target at 45px,
   clear of the 44px minimum. .btn-lg has this one use, so the override needs
   no further scoping. */
@media (max-width: 600px) {
	.btn-lg {
		padding: 0.75rem 1.75rem;
		font-size: 0.875rem;
	}

	.favorites-cta {
		margin-top: 1.5rem;
	}
}

.favorites-title {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--color-text-primary);
	margin: 0 0 1.5rem;
}

/* "Medicina In The Lab" — real photographs, square, in place of the product
   cards this marquee used to carry. Reuses the marquee shell and its JS; the
   only differences are square tiles and data-pause-on-hover="false", since a
   photo strip has nothing to stop and read. */
/* Sits directly under the Research Use Only notice, which carries its own
   bottom padding — .section--tight's 2.5rem on top of that left a 68px
   trough between the two. */
.section--tight.real-life-section {
	padding-top: 0.5rem;
	/* The favorites grid below carries the gap between the two; --tight's
	   2.5rem on both sides of the join stacked to 84px. */
	padding-bottom: 0.75rem;
}

.real-life-eyebrow {
	margin: 0 0 0.35rem;
	color: var(--color-accent);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.real-life-title {
	margin-bottom: 1.25rem;
}

.real-life-tile {
	flex-shrink: 0;
	width: 16rem;
	margin: 0;
	border-radius: var(--radius-card);
	overflow: hidden;
	background: var(--color-sand);
}

.real-life-tile img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: cover;
	/* The strip is decoration, not a gallery: pointer-events keeps the photo
	   from being a right-click / open-in-new-tab target, and the rest refuse
	   the native image drag. None of this stops someone determined — the file
	   is still in the network tab — it just stops it being casual. */
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
}

/* Fixed: no grab-drag, no wheel or touch scrolling. scrollLeft is still
   settable from JS with overflow hidden, so the auto-scroll is unaffected.
   Compound selectors because .favorites-marquee sets overflow-x and cursor
   further down the file at the same specificity — matching on both classes
   wins on specificity instead of relying on source order. */
.favorites-marquee.real-life-marquee {
	overflow-x: hidden;
	touch-action: pan-y;
	/* Align the strip's edges — and so its mask fade — with .container's
	   CONTENT box, matching the notice above and the process panel below.
	   The inherited `padding: 0 var(--page-margin)` doesn't do this: padding
	   on a scrolling box isn't a clip, so tiles render straight through it
	   to the element's edges and the fade landed out in the page gutter.
	   Reproducing the container's own sizing instead keeps them lined up at
	   every width, including wherever --page-margin is redefined. */
	width: calc(100% - (var(--page-margin) * 2));
	max-width: calc(var(--page-width) - (var(--page-margin) * 2));
	padding: 0;
	margin: 0 auto;
}

@media (hover: hover) and (pointer: fine) {
	.favorites-marquee.real-life-marquee,
	.favorites-marquee.real-life-marquee.is-dragging {
		cursor: default;
	}
}

@media (max-width: 599px) {
	.real-life-tile {
		width: 12rem;
	}
}

.favorites-marquee {
	width: 100%;
	max-width: var(--page-width);
	margin: 0 auto;
	padding: 0 var(--page-margin);
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
}

.favorites-marquee::-webkit-scrollbar {
	display: none;
}


/* Grab-and-drag affordance. The grab cursor is mouse/trackpad only — touch
   devices swipe natively and shouldn't be told to grab anything. */
@media (hover: hover) and (pointer: fine) {
	.favorites-marquee {
		cursor: grab;
	}

	.favorites-marquee.is-dragging {
		cursor: grabbing;
	}
}

.favorites-marquee.is-dragging {
	-webkit-user-select: none;
	user-select: none;
}

/* Cards shouldn't lift under the cursor mid-drag, and shouldn't be picked up
   by the browser as native link/image drags. */
.favorites-marquee.is-dragging .favorites-card:hover {
	box-shadow: none;
	transform: none;
}

.favorites-card,
.favorites-card__media img {
	-webkit-user-drag: none;
}

.favorites-marquee__track {
	display: flex;
	align-items: stretch;
	gap: 1.25rem;
	width: max-content;
}

.favorites-card {
	flex-shrink: 0;
	width: 16rem;
	background: linear-gradient(180deg, var(--color-bg-warm) 0%, var(--color-bg) 100%);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.favorites-card:hover {
	box-shadow: var(--shadow-card);
	transform: translateY(-2px);
}

.favorites-card__body {
	padding: 1.25rem 1.25rem 1.25rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	text-align: center;
}

.favorites-card__title {
	font-weight: 700;
	font-size: 1.1875rem;
	line-height: 1.15;
	color: var(--color-text-primary);
	margin: 0;
	min-height: 2.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.favorites-card__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.3164rem;
	background: var(--color-accent);
	color: var(--color-text-inverse);
	font-size: 0.5537rem;
	font-weight: 500;
	padding: 0.3797rem 0.791rem;
	border-radius: var(--radius-pill);
}

.favorites-card__btn svg {
	width: 8.86px;
	height: 8.86px;
}

.favorites-card__media {
	position: relative;
	height: 11.5rem;
	overflow: hidden;
}

.favorites-card__media img {
	position: absolute;
	top: 0.64rem;
	left: 50%;
	transform: translateX(-50%);
	width: 46%;
	height: auto;
	filter: drop-shadow(0 12px 10px rgba(14, 70, 53, 0.18));
}

.favorites-card__media::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3rem;
	background: linear-gradient(to bottom, transparent, var(--color-bg));
}

/* ==========================================================================
   Our Process
   ========================================================================== */
.process-panel {
	background: rgba(21, 101, 75, 0.08);
	border-radius: var(--radius-card);
	padding: 1.5rem 2rem 2rem;
}

/* The tinted panel makes every bit of slack visible as a band of green, so
   the header sits tighter here than the default .section__header. The title
   also carries a 12px bottom margin from the global heading rule, which
   stacked on top of the header's own margin for 44px between the heading and
   the cards — a gap with nothing in it. */
.process-panel .section__header {
	margin-bottom: 1.25rem;
}

.process-panel .section__header .section__title {
	margin-bottom: 0;
}

.process-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.process-card {
	position: relative;
	/* 3:2 rather than 4:3. The art is now cropped wide (700x350) with the
	   baked-in caption removed, so a tall box would crop hard into the sides
	   and leave a large dead band of gradient under the subject. */
	aspect-ratio: 3 / 2;
	border-radius: var(--radius-card);
	overflow: hidden;
	isolation: isolate;
}

.process-card picture {
	display: contents;
}

.process-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The three shots are three different labs at three different white
	   balances, which is most of what makes them read as bought rather than
	   taken. Pulling the colour out and letting the green overlay do the
	   tinting makes them look like one set. It can't stop them being stock —
	   only real photographs do that — but it stops them being three
	   obviously unrelated ones. */
	filter: grayscale(0.62) contrast(1.06) brightness(1.02);
	object-position: center;
}

/* Biased off the model's face and onto the gloved hands and the tube rack:
   a face is the strongest stock tell in the set, equipment is the weakest. */
.process-card:nth-child(2) .process-card__img {
	object-position: 34% center;
}

.process-card:nth-child(3) .process-card__img {
	object-position: 52% center;
}

.process-card__overlay {
	position: absolute;
	inset: 0;
	/* Was 0.97/0.9/0.45 — near-solid over the bottom half. That weight was
	   load-bearing: steps 1 and 2 had a caption burned into the photo (step
	   1's didn't even match the copy below it) and the gradient was hiding
	   it. With the captions cropped out the overlay only has to carry text
	   contrast, so it can lift and let the photograph read. */
	background:
		linear-gradient(
			to top,
			rgba(16, 43, 36, 0.93) 0%,
			rgba(16, 43, 36, 0.78) 34%,
			rgba(16, 43, 36, 0.3) 62%,
			rgba(16, 43, 36, 0) 82%
		),
		/* Flat wash over the whole frame so the desaturated photo picks up
		   the brand green instead of reading as plain grey. */
		linear-gradient( rgba(22, 74, 58, 0.22), rgba(22, 74, 58, 0.22) );
}

.process-card__content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.4rem;
	padding: 1.75rem;
}

.process-card__step {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	/* Was --color-accent-light (near-white mint); too faint on the photo.
	   White at 75% reads clearly as a secondary label under the title
	   (audit 2026-09-01, finding M5). */
	color: rgba(255, 255, 255, 0.75);
}

.process-card__title {
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--color-text-inverse);
	margin: 0;
}

.process-card__text {
	font-size: 0.8125rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.85);
	margin: 0;
}

@media (max-width: 782px) {
	.process-panel {
		padding: 1.25rem;
	}

	.process-grid {
		grid-template-columns: 1fr;
	}
}

.section--tight.process-section {
	padding-top: 0.75rem;
	padding-bottom: 1.125rem;
}

.section--tight.contact-tile-section {
	padding-top: 1.125rem;
	padding-bottom: 0.703125rem;
}

.process-section .section__title {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--color-text-primary);
}

/* The related row sits directly above Our Process, so it takes the same
   heading treatment and vertical rhythm as its neighbours rather than the
   large accent .section__title, which is sized for homepage-level sections
   and dwarfed everything around it here. */
.section--tight.related-products-section {
	padding-top: 1.75rem;
	padding-bottom: 1.125rem;
}

.related-products-section .section__title {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--color-text-primary);
}

.related-products-section .section__header {
	margin-bottom: 1.25rem;
}

/* The catalog's card is sized for a 3-up grid on a page of its own. Here
   it's 4-up and secondary to the product being viewed, so everything is
   dialled back: shallower padding, a landscape media box instead of a
   square, and smaller type. */
.related-products-section .product-card {
	position: relative;
	padding: 1rem 1rem 1.25rem;
}

/* Landscape media box, shorter than the catalog's square: the four vials
   look near-identical, so the name and price are what actually tell the
   cards apart and they earn the space. */
.related-products-section .product-card__media {
	position: relative;
	aspect-ratio: 3 / 2;
}

.related-products-section .product-card__media img {
	max-width: 62%;
	max-height: 100%;
}

/* Card reads name -> price -> button, which is the order the decision is
   actually made in. The catalog card puts the button above the name so it
   can clip the image edge; at this size that just looks detached. */
.related-products-section .product-card__info {
	padding-bottom: 0;
	gap: 0.25rem;
}

.related-products-section .product-card__cart {
	margin: 0.75rem 0 0;
	position: relative;
	z-index: 1;
}

/* Two lines' worth of room on every title so the prices below stay on one
   baseline across the row, whatever the product is called. */
.related-products-section .product-card__title {
	font-size: 0.9375rem;
	line-height: 1.3;
	min-height: 2.6em;
	display: flex;
	align-items: center;
}

.related-products-section .product-card__price {
	font-size: 0.875rem;
}

/* The whole card is the click target. A stretched pseudo-element on the
   title link covers it, rather than nesting the button inside an <a>,
   which isn't valid HTML — the button sits above it on z-index. */
.related-products-section .product-card__info::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Free 2nd Day Air progress, directly above four addable products. */
.related-products__shipping {
	margin: 0.4rem 0 0;
	font-size: 0.875rem;
	color: var(--color-text-secondary);
}

.related-products__shipping .cart-drawer__shipping-lead {
	font-weight: 700;
	color: var(--color-text-primary);
}

.related-products__shipping .cart-drawer__shipping-check {
	color: var(--color-accent);
	font-weight: 700;
}

/* Single product pages wrap their content in .woocommerce, which brings
   WooCommerce's own `.woocommerce a.button` (0,2,1) into play — it outbids
   the card's `.product-card__cart .button` (0,2,0) and the pill reverts to
   Woo's grey default. The catalog page never hit this because it's a plain
   page template with no .woocommerce ancestor. Restated here at a higher
   specificity so the card button looks the same wherever it renders. */
.woocommerce .product-card__cart .add_to_cart_button,
.woocommerce .product-card__cart .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.55rem 1.1rem;
	border-radius: var(--radius-pill);
	background: var(--color-accent);
	color: var(--color-text-inverse);
	font-weight: 600;
	font-size: 0.8125rem;
	line-height: 1.2;
	white-space: nowrap;
	box-shadow: 0 2px 10px rgba(26, 26, 26, 0.12);
}

.woocommerce .product-card__cart .add_to_cart_button:hover,
.woocommerce .product-card__cart .button:hover {
	background: var(--color-accent-hover);
	color: var(--color-text-inverse);
}

/* ==========================================================================
   Sections
   ========================================================================== */
.section {
	padding: 4rem 0;
}

.section--tight {
	padding: 2.5rem 0;
}

.section__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 1rem;
	margin-bottom: 2rem;
	flex-wrap: wrap;
}

.section__title {
	font-size: clamp(2.25rem, 5vw, 3.5rem);
	letter-spacing: -0.02em;
	color: var(--color-accent);
}

.section__subtitle {
	color: var(--color-text-secondary);
	max-width: 40rem;
}

/* ==========================================================================
   Product / card grid
   ========================================================================== */
.card-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.5rem;
}

/* Four across needs the card's own padding to come in with it, or the vial
   is squeezed into a third of a card that is mostly margin. Scoped away from
   --related, which sets its own tighter padding a few hundred lines up. */

/* Between 1024 and 1199 there isn't room for four without the titles going
   to three lines, so the catalog drops back to three. */
@media (max-width: 1199px) {
	.card-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.75rem;
	}
}

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

@media (max-width: 599px) {
	body.page-template-template-catalog-php .page-content {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.75rem;
	}

	/* The catalog template above drops to a 1rem page gutter at this width,
	   but the home page keeps the container's ~14.6vw one, so the same two-up
	   grid produced 135px cards there against 165px on the catalog — and
	   "View Product" had 106px of card to sit in. Give the favorites grid the
	   catalog's gutter so the two pages' cards match. 50% is half the
	   container's content box and 50vw half the viewport, so the pair pulls
	   each edge out to the viewport and adds the 1rem back. */
	.favorites-section .card-grid {
		margin-left: calc(50% - 50vw + 1rem);
		margin-right: calc(50% - 50vw + 1rem);
	}
}

@media (max-width: 359px) {
	.card-grid {
		grid-template-columns: 1fr;
	}
}

/* "Researchers are also buying" on product pages: always one full row of
   four, so the row never orphans a card. It holds four from 1024 up, where
   the catalog drops to three, and keeps the 1.75rem gap it was tuned at.
   Below 1024 the shared breakpoints take over — two across makes a clean
   2x2 out of the same four cards. */
@media (min-width: 1024px) {
	.card-grid--related {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1.75rem;
	}
}

.carousel {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.carousel__track {
	display: flex;
	gap: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 0.5rem;
	scrollbar-width: none;
}

.carousel__track::-webkit-scrollbar {
	display: none;
}

.carousel__item {
	flex: 0 0 auto;
	width: 15.5rem;
	scroll-snap-align: start;
}

.carousel__arrow {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	border: 1px solid var(--color-border-strong);
	background: var(--color-bg);
	color: var(--color-text-primary);
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.carousel__arrow:hover {
	background: var(--color-bg-warm);
}

@media (max-width: 599px) {
	.carousel__arrow {
		display: none;
	}
}

.product-card {
	/* Technical catalog card (V2 Pass 2): identity and spec, price and one
	   call to action. White card on the paper page. The photo tile is white
	   too, not sand: the vial renders carry a white-matte shadow and
	   semi-transparent glass, so any tinted ground shows a halo (Pass 2.1).
	   Sand tiles return with the photography pass. */
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	display: flex;
	flex-direction: column;
	padding: 0.75rem 0.75rem 0.9rem;
	transition: box-shadow 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-card:hover,
.product-card:focus-within {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-4px);
}

/* The vial lifts a touch further than the card it sits in, so the product
   reads as coming forward rather than the whole box sliding. */
.product-card:hover .product-card__media img,
.product-card:focus-within .product-card__media img {
	transform: translateY(-4px) scale(1.03);
}

/* Anyone who has asked their system for less movement gets the shadow and
   nothing that travels. */
@media (prefers-reduced-motion: reduce) {
	.product-card,
	.product-card__media img {
		transition: box-shadow 0.25s ease;
	}

	.product-card:hover,
	.product-card:focus-within,
	.product-card:hover .product-card__media img,
	.product-card:focus-within .product-card__media img {
		transform: none;
	}
}

.product-card__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: var(--color-sand);
	border-radius: var(--radius-card-sm);
	margin-bottom: 0.9rem;
	color: var(--color-text-muted);
	font-size: 0.8125rem;
	overflow: hidden;
}

.product-card__media img {
	/* The vials are tall and narrow (roughly 9:16), so in this media box it is
	   max-height that binds, not max-width. max-width stays as a rail for any
	   wider product image. */
	max-width: 80%;
	max-height: 88%;
	width: auto;
	height: auto;
	object-fit: contain;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-card__info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.2rem;
	text-align: left;
	padding: 0 0.25rem 0.85rem;
}

/* Category label: the first thing that tells one vial from another. */
.product-card__tag {
	font-family: var(--font-mono);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.2;
	color: var(--color-accent);
	margin-bottom: 0.15rem;
}

.product-card__title {
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.2;
	margin: 0;
	color: var(--color-text-primary);
}

.product-card__cas,
.product-card__spec {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	line-height: 1.35;
	color: var(--color-text-secondary);
	/* Tabular figures keep the CAS groups and strengths aligned down a column. */
	font-variant-numeric: tabular-nums;
}

.product-card__spec {
	color: var(--color-text-muted);
}

/* Price and the one CTA share a rule-off footer row, pinned to the card's
   bottom so the row lines up across a grid whose titles wrap unevenly. */
.product-card__footer {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.75rem 0.25rem 0;
	border-top: 1px solid var(--color-border);
}

.product-card__price {
	font-weight: 500;
	font-size: 1rem;
	color: var(--color-text-primary);
	white-space: nowrap;
}

.product-card__cart .add_to_cart_button,
.product-card__cart .button,
.product-card__cart .added_to_cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 0.9rem;
	border-radius: var(--radius-pill);
	background: var(--color-accent);
	color: var(--color-text-inverse);
	font-weight: 600;
	font-size: 0.8125rem;
	white-space: nowrap;
	transition: background-color 0.15s ease;
}

/* "View Product →" (medicina_labs_loop_view_product_link): inline-flex drops
   the space before the arrow, so restore it as a gap. */
.product-card__view {
	gap: 0.35rem;
}

.product-card__cart .add_to_cart_button:hover,
.product-card__cart .button:hover {
	background: var(--color-accent-hover);
}

.product-card__cart .added_to_cart {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.75rem;
	font-weight: 500;
	background: none;
	color: var(--color-accent-hover);
	box-shadow: none;
	text-align: center;
	padding: 0;
}

/* Compact product cards on mobile (2-up grid) — must come after the base
   .product-card rules above so these win when the media query matches. The
   footer stacks: price over a full-width button, since a 160px card cannot
   hold both on one line without shrinking the type. */
@media (max-width: 599px) {
	.product-card {
		padding: 0.5rem 0.5rem 0.65rem;
		border-radius: var(--radius-card-sm);
	}

	.product-card__media {
		margin-bottom: 0.65rem;
	}

	.product-card__info {
		gap: 0.15rem;
		padding: 0 0.15rem 0.6rem;
	}

	.product-card__tag {
		font-size: 0.5625rem;
	}

	.product-card__title {
		font-size: 0.9375rem;
	}

	.product-card__cas,
	.product-card__spec {
		font-size: 0.6875rem;
	}

	.product-card__footer {
		flex-direction: column;
		align-items: stretch;
		gap: 0.5rem;
		padding: 0.6rem 0.15rem 0;
	}

	.product-card__price {
		font-size: 0.9375rem;
	}

	.product-card__cart .add_to_cart_button,
	.product-card__cart .button {
		width: 100%;
		padding: 0.5rem 0.6rem;
		font-size: 0.75rem;
	}

	/* Tighter than the base gap to buy the label room on the narrow cards. */
	.product-card__view {
		gap: 0.3rem;
	}
}

/* ==========================================================================
   Feature / value-prop row
   ========================================================================== */
.feature-grid__title {
	margin-bottom: 2rem;
}

.feature-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

@media (max-width: 767px) {
	.feature-grid {
		grid-template-columns: 1fr;
	}
}

.feature-item {
	text-align: center;
	padding: 1.5rem 1.1rem 1.35rem;
	background: var(--color-bg-warm);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card-sm);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.feature-item:hover {
	background: var(--color-accent-light);
	border-color: var(--color-accent);
}

.feature-item__icon {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 9px;
	background: var(--color-accent-light);
	color: var(--color-accent-hover);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 0.9rem;
}

.feature-item__title {
	font-size: 1.1875rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin-bottom: 0.25rem;
}

.feature-item__desc {
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
	line-height: 1.4;
}

.feature-item__desc a {
	color: var(--color-accent-hover);
	text-decoration: underline;
}

/* ==========================================================================
   Category tiles
   ========================================================================== */
.tile-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}

@media (max-width: 767px) {
	.tile-grid {
		grid-template-columns: 1fr;
	}
}

.category-tile {
	background: var(--color-sand);
	border-radius: var(--radius-card-sm);
	padding: 2rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	transition: background 0.2s ease;
}

.category-tile:hover {
	background: var(--color-bg-warm-strong);
}

.category-tile__title {
	font-size: 1.1875rem;
	margin: 0;
}

.category-tile__desc {
	color: var(--color-text-secondary);
	font-size: 0.9375rem;
	margin-bottom: 0.25rem;
}

.category-tile__link {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-accent-hover);
}

/* ==========================================================================
   Generic content page
   ========================================================================== */
.page-header {
	padding: 3rem 0 1.25rem;
	margin-bottom: 2rem;
}

.page-header.catalog-header,
.page-header.coas-header {
	padding-top: 0.875rem;
	padding-bottom: 0.75rem;
	margin-bottom: 1rem;
}

.page-header__title {
	font-size: 2.25rem;
	margin-bottom: 0.5rem;
}

.page-header__subtitle {
	color: var(--color-text-secondary);
	font-size: 1.0625rem;
	max-width: 42rem;
}

/* Search on the left, Sort on the right of the same line. Sort used to sit
   under the filter pills; moving it up here gives the pills the toolbar's
   full width (they need 1012px of it) and fills space the search row had
   going spare. Wraps on narrow screens, where Sort drops below the field. */
.catalog-search-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	margin-top: 1rem;
}

.catalog-search {
	position: relative;
	flex: 1 1 18rem;
	max-width: 21rem;
}

.catalog-search-row .catalog-menu--sort {
	margin-left: auto;
}

/* ==========================================================================
   Catalog info bar
   ========================================================================== */
.catalog-info-bar {
	background: var(--color-accent-light);
	padding: 0.875rem 0;
}

.catalog-info-bar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	column-gap: 2.5rem;
	row-gap: 0.5rem;
}

.catalog-info-bar__item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--color-accent-hover);
	white-space: nowrap;
}

.catalog-info-bar__item svg {
	flex-shrink: 0;
	color: var(--color-accent);
}

@media (max-width: 767px) {
	.catalog-info-bar {
		padding: 1rem 0;
	}

	.catalog-info-bar__inner {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 0.75rem;
		row-gap: 0.75rem;
	}

	.catalog-info-bar__item {
		align-items: flex-start;
		gap: 0.375rem;
		font-size: 0.75rem;
		line-height: 1.3;
		white-space: normal;
	}

	.catalog-info-bar__item svg {
		width: 16px;
		height: 16px;
	}
}

/* Phones: the four-up strip becomes two claims on one line — Purity first,
   then Processing. Shipping and Support are hidden here only; tablets keep
   the 2x2 grid above and desktop the full row. */
@media (max-width: 600px) {
	.catalog-info-bar__inner {
		display: flex;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		column-gap: 1.25rem;
		/* The 47px page gutter left only 281px at 375 wide; the pair needs
		   ~320px to sit on one line. */
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.catalog-info-bar__item {
		align-items: center;
		white-space: nowrap;
	}

	.catalog-info-bar__item:nth-child(2),
	.catalog-info-bar__item:nth-child(3) {
		display: none;
	}

	.catalog-info-bar__item:nth-child(4) {
		order: -1;
	}
}

/* 320px-class phones: one step down so the pair still fits one line. */
@media (max-width: 359px) {
	.catalog-info-bar__inner {
		column-gap: 0.75rem;
	}

	.catalog-info-bar__item {
		font-size: 0.6875rem;
	}
}

.catalog-search__icon {
	position: absolute;
	top: 50%;
	left: 0.75rem;
	transform: translateY(-50%);
	color: var(--color-text-muted);
	pointer-events: none;
}

.catalog-search__input {
	width: 100%;
	/* Inputs don't inherit the page font; without this the field rendered
	   in the OS default (Helvetica/Arial) instead of Montserrat. */
	font-family: inherit;
	background: var(--color-bg-warm);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	padding: 0.5625rem 0.9375rem 0.5625rem 2.0625rem;
	font-size: 0.703125rem;
	color: var(--color-text-primary);
}

.catalog-search__input::placeholder {
	color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Catalog header — phones
   At 1.75rem the title ran to three lines. 1.5rem is the largest size that
   gets it onto two, so it stays a proper page heading rather than shrinking
   into a subtitle.

   The search field's 16px font is deliberate and must not be reduced —
   anything smaller makes iOS Safari zoom the viewport on focus and never zoom
   back (audit finding M1, set at the bottom of this file). Slimming it down is
   therefore a padding job: 38px tall becomes 34px with the type untouched.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
	.catalog-header .page-header__title {
		font-size: 1.5rem;
		line-height: 1.2;
		margin-bottom: 0.375rem;
	}
}

/* The two-line fit runs out at 368px: the first line, "Shop Trusted Medicina",
   measures 274px at 1.5rem and the page gutter leaves less than that below it,
   which tips the title back to three lines. Step down once more so narrow
   phones keep the two-line set. */
@media (max-width: 367px) {
	.catalog-header .page-header__title {
		font-size: 1.1875rem;
	}
}

@media (max-width: 767px) {
	/* The row carries the top margin now that it wraps the field. */
	.catalog-search-row {
		margin-top: 0.75rem;
	}

	.catalog-search {
		max-width: 17rem;
	}

	.catalog-search__input {
		padding-top: 0.3125rem;
		padding-bottom: 0.3125rem;
		padding-left: 1.9375rem;
	}

	/* The field itself must stay 16px (iOS zoom, finding M1 below) but the
	   placeholder can be smaller — Safari applies this to the hint text
	   only, so the box reads as a compact search, not a form field. */
	.catalog-search__input::placeholder {
		font-size: 0.8125rem;
	}
}

/* Catalog empty state. Was one grey sentence and no way out; it now names
   what was searched for, offers a single reset, and puts four real products
   underneath so the page is never a dead end. */
.catalog-empty {
	padding: 1rem 0 0;
}

.catalog-empty__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 2rem;
	background: var(--color-bg-warm);
	border-radius: var(--radius-card);
}

.catalog-empty__title {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--color-text-primary);
	margin: 0;
}

/* The quoted term wraps with the heading rather than pushing it wide. */
.catalog-empty__term {
	color: var(--color-accent-hover);
	overflow-wrap: anywhere;
}

.catalog-empty__text {
	margin: 0;
	color: var(--color-text-secondary);
	font-size: 0.9375rem;
}

.catalog-empty__head .btn {
	margin-top: 0.6rem;
}

.catalog-empty__suggestions {
	margin-top: 2.25rem;
}

.catalog-empty__suggestions-title {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin: 0 0 1rem;
}

@media (max-width: 599px) {
	.catalog-empty__head {
		padding: 1.25rem;
	}
}

/* ==========================================================================
   Catalog toolbar — category filters + sort (inc/catalog.php, catalog.js)
   Sits between the page header and the product grid, on the grid's own
   content width. No box around it: pills on the left, a text-style sort
   control on the right. Green is an accent (active border/tint) only.
   ========================================================================== */
/* Filter pills only — Sort moved up into the search row, which is what
   lets the renamed categories (1012px of pills) stay on one line here. */
.catalog-toolbar {
	margin-bottom: 1.75rem;
}

.catalog-filters {
	position: relative;
	min-width: 0;
	flex: 1 1 auto;
}

.catalog-filters__track {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.catalog-filter {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5625rem 1.0625rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background: var(--color-bg);
	color: var(--color-text-secondary);
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.catalog-filter:hover {
	border-color: var(--color-border-strong);
	background: var(--color-bg-warm);
	color: var(--color-text-primary);
}

.catalog-filter.is-active {
	border-color: var(--color-green-deep);
	background: var(--color-green-deep);
	color: var(--color-text-inverse);
}

.catalog-filter.is-active:hover {
	background: var(--color-accent);
	border-color: var(--color-accent);
}

/* Category chips carry their own colour, so the filter bar doubles as the
   key for the pills on the cards below it.

   Scoped to [data-category] and written with fallbacks, so "All" — which
   carries data-category="all" but declares no colours — and the "More"
   button, which carries none at all, keep the neutral treatment above.

   The active chip repeats --cat-ink as an inset ring rather than changing
   hue, the same doubled-border device .product-tier--active already uses, so
   selected still reads as selected once the chips are no longer all alike. */
.catalog-filter[data-category] {
	background: var(--color-surface);
	border-color: var(--color-border);
	color: var(--color-text-secondary);
}

.catalog-filter[data-category]:hover {
	background: var(--color-accent-light);
	border-color: var(--color-accent);
	color: var(--color-accent-hover);
}

.catalog-filter[data-category].is-active {
	background: var(--color-green-deep);
	border-color: var(--color-green-deep);
	color: var(--color-text-inverse);
	box-shadow: none;
}

.catalog-filter:focus-visible,
.catalog-sort:focus-visible,
.catalog-menu__item:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* --- Sort ("SORT  Most Popular ▾") — text control, no border --- */
.catalog-sort {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5625rem 0.25rem;
	border: 0;
	background: none;
	color: var(--color-text-primary);
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
}

.catalog-sort__label {
	color: var(--color-text-muted);
	font-weight: 500;
}

.catalog-sort__label::after {
	content: ":";
}

.catalog-menu__chevron {
	flex-shrink: 0;
	color: var(--color-text-muted);
	transition: transform 0.15s ease;
}

.catalog-sort:hover .catalog-menu__chevron,
.catalog-filter:hover .catalog-menu__chevron {
	color: currentColor;
}

.catalog-menu.is-open .catalog-menu__chevron {
	transform: rotate(180deg);
}

/* --- Dropdown panel shared by More and Sort --- */
.catalog-menu {
	position: relative;
	flex-shrink: 0;
}

.catalog-menu__list {
	position: absolute;
	top: calc(100% + 0.375rem);
	left: 0;
	z-index: 20;
	min-width: 12.5rem;
	margin: 0;
	padding: 0.375rem;
	list-style: none;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card-sm);
	box-shadow: 0 8px 24px rgba(14, 70, 53, 0.1);
}

.catalog-menu__list--right {
	left: auto;
	right: 0;
}

.catalog-menu__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--color-text-secondary);
	font-family: inherit;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: left;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.12s ease, color 0.12s ease;
}

.catalog-menu__item:hover,
.catalog-menu__item:focus-visible {
	background: var(--color-bg-warm);
	color: var(--color-text-primary);
	outline-offset: -2px;
}

.catalog-menu__item.is-active {
	color: var(--color-text-primary);
}

/* Small dot marks the selected option — in the category's own colour, so
   the dropdown reads as part of the same key as the chips and the pills. */
.catalog-menu__item.is-active::after {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--cat-ink, var(--color-accent));
	flex-shrink: 0;
}

.catalog-menu__item[data-category] {
	color: var(--color-text-secondary);
}

.catalog-menu__item[data-category]:hover,
.catalog-menu__item[data-category]:focus-visible {
	background: var(--color-accent-light);
	color: var(--color-accent-hover);
}

/* --- Grid state --- */
.card-grid .product-card.is-hidden,
#catalog-grid[hidden] {
	/* .card-grid's display:grid would otherwise beat the UA [hidden] rule. */
	display: none;
}

#catalog-grid {
	transition: opacity 0.18s ease;
}

#catalog-grid.is-updating {
	opacity: 0.35;
}

@media (prefers-reduced-motion: reduce) {
	#catalog-grid,
	.catalog-filter,
	.catalog-menu__chevron,
	.catalog-menu__item {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   Category treatment — retired the six pastel families (V2 Pass 1). Every
   category pill and filter chip now shares one green technical treatment;
   the category name itself carries the information.
   --------------------------------------------------------------------------- */
.catalog-filter[data-category],
.catalog-menu__item[data-category] {
	--cat-tint: transparent;
	--cat-ink: var(--color-accent);
	--cat-line: var(--color-accent);
	--cat-fill: var(--color-accent-light);
}


/* --- Tablet + phones: single scrolling row of pills, sort on its own line.
   Matches the grid's 2-column breakpoint; between 768 and 927px the pills
   plus the sort control no longer fit one line, so wrapping starts there. --- */
/* Raised from 1023px: below roughly 1200px the container is too narrow for
   even the shortened labels, so the scrolling row takes over there instead
   of letting the pills wrap. */
@media (max-width: 1199px) {
	.catalog-toolbar {
		gap: 0.625rem;
		margin-bottom: 1.5rem;
	}

	/* Bleed the row to the viewport edges so pills scroll under the page
	   gutter; padding restores the gutter so the first pill lines up with
	   the grid and the last one has room to stop. */
	.catalog-filters {
		margin-left: calc(-1 * var(--page-margin));
		margin-right: calc(-1 * var(--page-margin));
	}

	.catalog-filters__track {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		padding: 2px var(--page-margin);
	}

	.catalog-filters__track::-webkit-scrollbar {
		display: none;
	}

	/* Edge fades signal that the row continues; toggled by catalog.js. */
	.catalog-filters::before,
	.catalog-filters::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		width: 2.5rem;
		pointer-events: none;
		opacity: 0;
		transition: opacity 0.15s ease;
	}

	.catalog-filters::before {
		left: 0;
		background: linear-gradient(to right, var(--color-bg) 30%, rgba(255, 255, 255, 0));
	}

	.catalog-filters::after {
		right: 0;
		background: linear-gradient(to left, var(--color-bg) 30%, rgba(255, 255, 255, 0));
	}

	.catalog-filters.has-more-left::before,
	.catalog-filters.has-more-right::after {
		opacity: 1;
	}

	.catalog-filter {
		flex-shrink: 0;
		/* Comfortable tap target without growing the type. */
		padding: 0.625rem 1rem;
	}

	/* The More menu opens from a pill that may be scrolled; anchor it to
	   the row instead so it never clips inside the overflow container. */
	.catalog-menu--more {
		position: static;
	}

	.catalog-menu--more .catalog-menu__list {
		left: var(--page-margin);
		right: var(--page-margin);
		min-width: 0;
	}

	.catalog-menu--sort {
		align-self: flex-start;
	}

	.catalog-sort {
		padding-left: 0;
		padding-right: 0;
	}

	.catalog-menu--sort .catalog-menu__list {
		left: 0;
		right: auto;
	}
}

@media (max-width: 599px) {
	/* The page content gutter is 1rem on phones (see .page-content above);
	   the bleed has to match it, not --page-margin. */
	.catalog-filters {
		margin-left: -1rem;
		margin-right: -1rem;
	}

	.catalog-filters__track {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.catalog-menu--more .catalog-menu__list {
		left: 1rem;
		right: 1rem;
	}
}

.page-content {
	padding-bottom: 4rem;
}

.contact-page-content {
	padding-bottom: 1.5rem;
}

/* Research Library link visibility (hub page 319 and its children).
   page.php carries no link styling of its own, so inline links inside
   .page-content rendered in the body colour with no underline and were
   indistinguishable from plain text. Scoped by body class rather than on
   .page-content itself, because seven custom templates plus cart, checkout,
   my-account and shop share that container and must not be touched.
   Inline/citation links reuse the site's existing convention from
   .product-details__description; heading links stay in the brand accent so the
   hub's section headings keep their colour. */
body.page-id-319 .page-content a,
body.parent-pageid-319 .page-content a {
	color: var(--color-accent);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

body.page-id-319 .page-content a:hover,
body.parent-pageid-319 .page-content a:hover {
	color: var(--color-accent-hover);
}

body.page-id-319 .page-content h2 a,
body.parent-pageid-319 .page-content h2 a {
	color: var(--color-accent-hover, #0E4635);
	text-decoration-thickness: 1px;
}

body.page-id-319 .page-content h2 a:hover,
body.parent-pageid-319 .page-content h2 a:hover {
	color: var(--color-accent, #15654B);
}

body.page-id-319 .page-content a:focus-visible,
body.parent-pageid-319 .page-content a:focus-visible {
	outline: 2px solid var(--color-accent, #15654B);
	outline-offset: 2px;
	border-radius: 2px;
}

.placeholder-notice {
	background: var(--color-accent-light);
	border: 1px dashed var(--color-accent);
	border-radius: var(--radius-card-sm);
	padding: 1.25rem 1.5rem;
	color: var(--color-accent-hover);
	font-size: 0.9375rem;
	margin-bottom: 2rem;
}

/* ==========================================================================
   FAQ accordion
   ========================================================================== */
.faq-category {
	margin-bottom: 2.5rem;
}

.faq-category__title {
	font-size: 1.375rem;
	margin-bottom: 1rem;
}

.faq-list {
	max-width: 48rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.faq-item {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card-sm);
	overflow: hidden;
}

.faq-item__question {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	background: none;
	border: none;
	text-align: left;
	padding: 1.1rem 1.4rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-text-primary);
	cursor: pointer;
}

.faq-item__icon {
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.faq-item__question[aria-expanded="true"] .faq-item__icon {
	transform: rotate(45deg);
}

.faq-item__answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.25s ease;
}

.faq-item__answer-inner {
	padding: 0 1.4rem 1.25rem;
	color: var(--color-text-secondary);
	font-size: 0.9375rem;
}

.faq-item__answer-inner a {
	color: var(--color-accent-hover);
	text-decoration: underline;
}

/* Some answers are more than one sentence of prose: the returns rules are
   genuinely a list of cases, and a couple of answers carry a follow-up
   paragraph. Answers are still plain strings by default, so these only bite
   when an answer actually contains the markup. */
.faq-item__answer-inner p {
	margin: 0 0 0.7rem;
}

.faq-item__answer-inner p:last-child {
	margin-bottom: 0;
}

.faq-item__answer-inner ul {
	margin: 0.5rem 0 0;
	padding-left: 1.15rem;
	list-style: disc;
}

.faq-item__answer-inner li {
	margin-bottom: 0.35rem;
}

.faq-item__answer-inner li:last-child {
	margin-bottom: 0;
}

/* FAQ page: centered layout */
body.page-template-template-faq-php .page-header {
	text-align: center;
	padding-top: 0.875rem;
	padding-bottom: 1rem;
	margin-bottom: 1.5rem;
}

body.page-id-1 .page-header,
body.page-template-template-contact-php .page-header,
body.page-template-template-policies-php .page-header {
	padding-top: 0.875rem;
	padding-bottom: 1rem;
	margin-bottom: 1.5rem;
}

body.page-template-template-faq-php .page-header__subtitle {
	margin-left: auto;
	margin-right: auto;
}

body.page-template-template-faq-php .page-content {
	display: flex;
	flex-direction: column;
	align-items: center;
}

body.page-template-template-faq-php .faq-category {
	width: 100%;
	max-width: 48rem;
	text-align: center;
}

body.page-template-template-faq-php .faq-list {
	max-width: none;
	text-align: left;
}

.faq-cta {
	width: 100%;
	max-width: 48rem;
	text-align: center;
	padding-top: 1rem;
}

/* The FAQ is the one page that ends on a small centred CTA rather than a full
   block of content, so the page's standard 4rem bottom padding stacked on the
   footer's own 5rem top margin left ~144px of empty white under a single
   button — enough that the page read as unfinished. The footer's margin is
   sitewide and stays; this only gives up the page's own share on this
   template, leaving a deliberate ~5rem rather than an accidental ~9rem. */
body.page-template-template-faq-php .page-content {
	padding-bottom: 0;
}

.home-faq {
	padding-top: 1.125rem;
	padding-bottom: 1rem;
}

.home-faq .container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.home-faq .section__header {
	justify-content: center;
	text-align: center;
	width: 100%;
	max-width: 48rem;
	margin-bottom: 1rem;
}

.home-faq .section__title {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--color-text-primary);
}

.home-faq .faq-list {
	width: 100%;
	max-width: 48rem;
	text-align: left;
}

.faq-cta p {
	color: var(--color-text-secondary);
	font-size: 1.0625rem;
	margin-bottom: 1.25rem;
}

/* ==========================================================================
   Homepage contact tile
   ========================================================================== */
.contact-tile {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.75rem;
	background: rgba(21, 101, 75, 0.08);
	border-radius: var(--radius-card);
	padding: 1.25rem 2rem;
}

.contact-tile__content {
	max-width: 28rem;
}

/* Also a <p>. This is a support prompt attached to a button, not a section —
   as an h2 it sat beside "Our Process", and demoting it to h3 would have been
   worse, implying it were a subsection of whatever preceded it. Weight and
   spacing came from the global heading rule and are restated here. */
.contact-tile__title {
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.15;
	white-space: nowrap;
	margin: 0 0 0.3rem;
}

.contact-tile__subtitle {
	color: var(--color-text-secondary);
	font-size: 0.75rem;
	white-space: nowrap;
	margin-bottom: 0.75rem;
}

.contact-tile__btn {
	flex-direction: row-reverse;
	padding: 0.6rem 1.25rem;
	font-size: 0.8125rem;
}

.contact-tile__chat {
	flex-shrink: 0;
	width: 24rem;
}

.contact-tile__chat img {
	display: block;
	width: 100%;
	height: auto;
}

.chat-bubble {
	position: relative;
	padding: 0.55rem 1rem;
	border-radius: 16px;
	font-size: 0.8125rem;
	line-height: 1.4;
	max-width: 85%;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba(22, 32, 55, 0.08);
}

.chat-bubble--user {
	align-self: flex-end;
	background: var(--color-green-deep);
	color: #ffffff;
}

.chat-bubble--user::before {
	content: "";
	position: absolute;
	bottom: -0.5px;
	right: -7px;
	width: 20px;
	height: 20px;
	background: var(--color-green-deep);
	border-bottom-left-radius: 16px;
}

.chat-bubble--user::after {
	content: "";
	position: absolute;
	bottom: -0.5px;
	right: -12px;
	width: 12px;
	height: 20px;
	background: rgba(21, 101, 75, 0.08);
	border-bottom-left-radius: 10px;
}

.chat-bubble--team {
	align-self: flex-start;
	background: var(--color-accent-light);
	color: var(--color-text-primary);
}

.chat-bubble--team::before {
	content: "";
	position: absolute;
	bottom: -0.5px;
	left: -7px;
	width: 20px;
	height: 20px;
	background: var(--color-accent-light);
	border-bottom-right-radius: 16px;
}

.chat-bubble--team::after {
	content: "";
	position: absolute;
	bottom: -0.5px;
	left: -12px;
	width: 12px;
	height: 20px;
	background: rgba(21, 101, 75, 0.08);
	border-bottom-right-radius: 10px;
}

@media (max-width: 767px) {
	.contact-tile {
		flex-direction: column;
		text-align: center;
		padding: 2rem 1.5rem;
	}

	.contact-tile__content {
		max-width: none;
	}

	.contact-tile__title,
	.contact-tile__subtitle,
	.chat-bubble {
		white-space: normal;
	}

	.contact-tile__chat {
		width: 100%;
	}
}

@media (max-width: 600px) {
	.page-header__title {
		font-size: 1.75rem;
	}

	.faq-category__title {
		font-size: 1.1875rem;
	}

	.faq-item__question {
		padding: 0.95rem 1.1rem;
		font-size: 0.9375rem;
		gap: 0.75rem;
	}

	.faq-item__answer-inner {
		padding: 0 1.1rem 1.1rem;
	}
}

/* ==========================================================================
   Contact form
   ========================================================================== */
.contact-layout {
	display: grid;
	grid-template-columns: minmax(0, 28rem) minmax(0, 33rem);
	/* Was `center`. The right column now carries the contact details as well as
	   the two help cards, so it outgrows the form; centring the shorter column
	   against it left the form floating with uneven gaps above and below. */
	align-items: start;
	justify-content: center;
	gap: 3rem;
}

.contact-form-panel {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	padding: 1.5rem 1.75rem;
	max-width: 28rem;
}

/* The form panel ends level with the bottom of the help column, not at the
   bottom of its own last field. The right column carries the direct-contact
   card plus the FAQ and COA cards, so it always runs longer; left alone the
   form stopped short and the two columns read as a ragged pair. Only the
   panel stretches — the grid keeps align-items:start, so the help column is
   untouched, and below 901px the layout is one column and this is moot. */
@media (min-width: 901px) {
	.contact-form-column {
		align-self: stretch;
		display: flex;
	}

	.contact-form-panel {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	/* The stretched panel has to give its extra height to something, or it
	   pools as dead space under the submit button. The message box is the one
	   field that genuinely benefits from being taller, so the form becomes a
	   flex column and the textarea absorbs the slack — the opt-in and button
	   stay tight beneath it however tall the help column grows. */
	.contact-form-panel form {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.form-field--grow {
		flex: 1;
		min-height: 0;
	}

	.form-field--grow textarea {
		flex: 1;
		/* rows="3" is the floor on narrow screens; keep a sane one here too so
		   a short help column can never squash the box to a sliver. */
		min-height: 7rem;
	}
}

@media (max-width: 900px) {
	.contact-layout {
		grid-template-columns: 1fr;
	}
}

.form-field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-bottom: 1.25rem;
}

.form-field label {
	font-size: 0.875rem;
	font-weight: 400;
}

.form-field input,
.form-field textarea,
.form-field select {
	font-family: var(--font-body);
	font-size: 0.9375rem;
	padding: 0.8rem 1rem;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-input);
	background: var(--color-surface);
	max-width: 24rem;
}

.form-field textarea {
	resize: vertical;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px var(--color-accent-light);
}

.contact-help-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.contact-help-card {
	background: var(--color-bg-warm);
	border-radius: var(--radius-card-sm);
	padding: 1.75rem;
}

.contact-help-card__title {
	font-size: 1.0625rem;
	font-weight: 600;
	margin: 0 0 0.5rem;
	color: var(--color-text-primary);
}

.contact-help-card__text {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--color-text-secondary);
	margin: 0;
}

.contact-help-card__text a {
	color: var(--color-accent-hover);
	font-weight: 600;
	text-decoration: underline;
}

/* Direct contact details — the trust anchor of the page.
   Deliberately heavier than the two self-serve cards below it: white ground,
   accent ring and a real button, against their flat warm fill. The response
   promise is the first line because that is the question being asked, and the
   number and address are live tel:/mailto: links rather than plain text so the
   phone can act on them. */
.contact-direct {
	background: var(--color-surface);
	border: 1px solid var(--color-accent-light);
	border-radius: var(--radius-card-sm);
	box-shadow: var(--shadow-card);
	padding: 1.75rem;
}

.contact-direct__title {
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0 0 0.75rem;
	color: var(--color-text-primary);
}

/* Block, not flex: flex would make the <strong> around "12 hours" its own flex
   item, and the row gap then opened a space either side of it — the sentence
   rendered as "within 12 hours , 7 days a week". The icon goes inline instead
   so the promise stays one continuous run of text. */
.contact-direct__promise {
	display: block;
	margin: 0 0 1.25rem;
	padding: 0.55rem 0.8rem;
	border-radius: var(--radius-pill);
	background: var(--color-accent-light);
	color: var(--color-accent-hover);
	font-size: 0.875rem;
	line-height: 1.35;
}

.contact-direct__promise strong {
	font-weight: 700;
}

.contact-direct__promise-icon {
	display: inline-flex;
	vertical-align: -0.175em;
	margin-right: 0.4rem;
}

.contact-direct__channels {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

.contact-channel {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

/* Same 2.25rem disc as the hero trust row, so the two icon treatments on the
   site read as one component rather than two near-misses. */
.contact-channel__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--color-accent-light);
	color: var(--color-accent-hover);
}

.contact-channel__body {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.contact-channel__label {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.contact-channel__value {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-text-primary);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.contact-channel__value:hover,
.contact-channel__value:focus-visible {
	color: var(--color-accent-hover);
	text-decoration: underline;
}

.contact-direct__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.form-field--checkbox {
	flex-direction: row;
	align-items: flex-start;
	gap: 0.65rem;
}

.form-field--checkbox input[type="checkbox"] {
	margin-top: 0.2rem;
	width: 1rem;
	height: 1rem;
	accent-color: var(--color-accent);
	flex-shrink: 0;
}

.form-field--checkbox label {
	font-size: 0.9375rem;
}

.form-hp-field {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form-notice {
	border-radius: var(--radius-card-sm);
	padding: 1rem 1.25rem;
	font-size: 0.9375rem;
	margin-bottom: 1.5rem;
}

.form-notice--success {
	background: var(--color-accent-light);
	color: var(--color-accent-hover);
}

.form-notice--error {
	background: var(--color-error-light);
	color: var(--color-error);
}

.contact-disclaimer {
	margin: 2rem auto 0;
	max-width: 64rem;
	padding: 1.25rem 1.5rem;
	background: var(--color-bg-warm);
	border-left: 3px solid var(--color-accent);
	border-radius: var(--radius-card-sm);
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--color-text-secondary);
}

.contact-disclaimer strong {
	color: var(--color-text-primary);
}

/* ==========================================================================
   COA database
   ========================================================================== */
.coa-filters {
	display: grid;
	grid-template-columns: 1fr 1fr auto auto;
	gap: 1rem;
	background: var(--color-bg-warm);
	border-radius: var(--radius-card-sm);
	padding: 1.5rem;
	margin-bottom: 2rem;
	align-items: end;
}

@media (max-width: 767px) {
	.coa-filters {
		grid-template-columns: 1fr;
	}
}

.coa-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card-sm);
}

.coa-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 560px;
}

.coa-table th,
.coa-table td {
	text-align: left;
	padding: 0.9rem 1.1rem;
	font-size: 0.9375rem;
	border-bottom: 1px solid var(--color-border);
}

.coa-table th {
	background: var(--color-bg-warm);
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-text-muted);
}

.coa-table tr:last-child td {
	border-bottom: none;
}

.coa-table a {
	color: var(--color-accent-hover);
	font-weight: 500;
}

.coa-table a:hover {
	text-decoration: underline;
}

.coa-empty-state {
	padding: 3rem 1.5rem;
	text-align: center;
	color: var(--color-text-secondary);
}

.coa-results-count {
	font-size: 0.875rem;
	color: var(--color-text-muted);
	margin-bottom: 1rem;
}


/* ==========================================================================
   WooCommerce single product page
   ========================================================================== */

/* The page wrapper carries both `.container` and `.section`, and `.section`
   (later in source, equal specificity) zeroes the container's horizontal
   padding. That left the gallery and summary flush against the 1248px wrapper
   edge — a full `--page-margin` wider than every other page on the site, so
   the top of the product page didn't line up with the Our Process / Text us /
   Common Questions panels below it. Restore the standard gutter. */
.woocommerce-product-page.container {
	padding-left: var(--page-margin);
	padding-right: var(--page-margin);
	/* Shallower than the 4rem .section default: on a 1440x900 screen the
	   whole buy box has to clear the fold. */
	padding-top: 2.25rem;
}

/* Those three shared sections nest their own `.container`. The wrapper above
   now supplies the page gutter, so the nested ones must not add a second —
   that double inset is what pushed them in past the product content. */
.woocommerce-product-page.container .section > .container {
	padding-left: 0;
	padding-right: 0;
}

.woocommerce-product-page div.product {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	grid-template-rows: auto auto;
	gap: 3rem;
	align-items: start;
}

.woocommerce-product-page .woocommerce-product-gallery {
	grid-column: 1;
	grid-row: 1 / span 2;
	position: sticky !important;
	top: 6rem;
	align-self: start;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 1.25rem;
	background: var(--color-sand);
	/* Same hairline as .product-card: warm on white is about a 3% luminance
	   step, which leaves this panel without an edge. box-sizing is already
	   border-box above, so the border eats a pixel of the padding rather
	   than widening the sticky column. */
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	padding: 3rem;
}

.woocommerce-product-page .summary.entry-summary {
	grid-column: 2;
	grid-row: 1;
	width: 70% !important;
	max-width: 70% !important;
	float: none !important;
}

.woocommerce-product-page .product-details {
	grid-column: 2;
	grid-row: 2;
	width: 70%;
	max-width: 70%;
}

/* This must come after the base rules above — at equal specificity,
   later-in-source wins the cascade tie, so placing it first would let
   the sticky-gallery rule silently win even inside this media query. */
@media (max-width: 900px) {
	.woocommerce-product-page div.product {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		gap: 2rem;
	}

	.woocommerce-product-page .woocommerce-product-gallery,
	.woocommerce-product-page .summary.entry-summary,
	.woocommerce-product-page .product-details {
		grid-column: 1 !important;
		grid-row: auto !important;
		position: static !important;
		top: auto;
		width: 100% !important;
		max-width: 100% !important;
	}

	/* The gallery still needs to be a positioned element (just not
	   sticky) so the COA badge — absolutely positioned against it —
	   stays anchored to the image instead of the nearest ancestor. */
	.woocommerce-product-page .woocommerce-product-gallery {
		position: relative !important;
	}
}

/* Sized here rather than on .flex-viewport: that element only exists
   once WooCommerce's flexslider wraps 2+ images, so a product with a
   single image (most of the catalog) has no .flex-viewport at all and
   the image would render at full column width instead. __wrapper is
   unconditional, so anchoring the 50% here keeps single- and
   multi-image products the same size. .flex-viewport gets 100% of
   this (not another 50%) so multi-image products aren't shrunk twice. */
.woocommerce-product-page .woocommerce-product-gallery__wrapper {
	margin: 0;
	padding: 0;
	width: 50%;
}

/* The viewport is a sibling-level wrapper that flexslider inserts AROUND
   __wrapper (as a direct child of the gallery), not inside it — and it sets
   __wrapper's width inline (e.g. 400%) as the slide strip. So the 50% has to
   live here for multi-image products, or their image renders at the full
   panel width and dwarfs the single-image products. */
.woocommerce-product-page .flex-viewport {
	width: 50%;
	overflow: hidden;
}

.woocommerce-product-page .woocommerce-product-gallery__image img.wp-post-image {
	width: 100%;
	height: auto;
	border-radius: var(--radius-card-sm);
	display: block;
}

/* Hover-zoom and the full-screen (magnifying-glass) trigger are disabled
   via theme support; hide the trigger and the zoom image defensively in
   case a plugin re-adds them. */
.woocommerce-product-page .woocommerce-product-gallery__trigger {
	display: none;
}

.woocommerce-product-page .woocommerce-product-gallery__image img.zoomImg {
	display: none;
}

/* Thumbnail strip — clicking a thumbnail switches the main image
   (WooCommerce's own flexslider handles the switching logic; this
   just makes the thumbnail row visible and styled to match the site). */
.woocommerce-product-page .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	justify-content: center;
	width: 50%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-product-page .flex-control-thumbs li {
	width: 7.3125rem !important;
	float: none !important;
	list-style: none;
}

.woocommerce-product-page .flex-control-thumbs img {
	width: 100% !important;
	height: 7.3125rem !important;
	object-fit: cover;
	border-radius: var(--radius-card-sm);
	border: 2px solid transparent;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 0.15s ease, border-color 0.15s ease;
}

.woocommerce-product-page .flex-control-thumbs img.flex-active,
.woocommerce-product-page .flex-control-thumbs img:hover {
	opacity: 1;
	border-color: var(--color-accent);
}

/* RENDER / PHOTO switcher.
   Products carry the studio render as their main image and, where one has
   been shot, a photo of the real vial as the single gallery image. With two
   images WooCommerce's flexslider emits this thumbnail list; these rules turn
   it into labelled tiles. Products with no photo have one image, get no
   thumbnail list, and look exactly as before.

   Labels come from position, not data: the render is always the product's
   main image and so always the first slide. They are CSS content, so no
   template or slider change is needed.

   The thumbnail <img> fills the whole tile and the label floats over its
   bottom edge with pointer-events off. That is deliberate: flexslider binds
   its click handler to the <img>, not the <li>, so a label laid out beneath
   the image would be a dead zone — clicking the word "PHOTO" would do
   nothing. */
.woocommerce-product-page .flex-control-thumbs li {
	position: relative;
	width: 4.25rem !important;
	height: 5.25rem;
	flex: 0 0 auto;
	background: var(--color-bg);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-card-sm);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	transition: border-color 0.15s ease;
}

.woocommerce-product-page .flex-control-thumbs li img,
.woocommerce-product-page .flex-control-thumbs li img.flex-active,
.woocommerce-product-page .flex-control-thumbs li img:hover {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	box-sizing: border-box;
	padding: 0.4rem 0.4rem 1.3rem;
	object-fit: contain;
	border: 0;
	border-radius: 0;
	background: transparent;
	opacity: 0.55;
}

.woocommerce-product-page .flex-control-thumbs li img.flex-active,
.woocommerce-product-page .flex-control-thumbs li img:hover {
	opacity: 1;
}

.woocommerce-product-page .flex-control-thumbs li::after {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.4rem;
	text-align: center;
	font-size: 0.5625rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	pointer-events: none;
}

.woocommerce-product-page .flex-control-thumbs li:nth-child(1)::after {
	content: "Render";
}

.woocommerce-product-page .flex-control-thumbs li:nth-child(2)::after {
	content: "Photo";
}

.woocommerce-product-page .flex-control-thumbs li:has(img.flex-active) {
	border-color: var(--color-accent);
}

.woocommerce-product-page .flex-control-thumbs li:has(img.flex-active)::after {
	color: var(--color-accent-hover);
}

/* Desktop: a vertical rail on the left edge of the image panel, centred,
   the way the render/photo switch reads on comparable stores. The panel is
   already the positioning context for the COA badge (bottom-right) and the
   USA tag (top-right), so the rail simply takes the free left edge. */
@media (min-width: 901px) {
	.woocommerce-product-page .flex-control-thumbs {
		position: absolute;
		left: 1.25rem;
		top: 50%;
		transform: translateY(-50%);
		z-index: 5;
		flex-direction: column;
		flex-wrap: nowrap;
		width: auto;
		gap: 0.5rem;
	}
}

/* Phones and tablets: the vial fills most of the panel's width here, so a
   left rail would sit on top of it. The tiles become a row beneath the image
   instead — left-aligned, not centred, because the COA badge owns the
   panel's bottom-right corner and a centred row ran straight under it,
   covering the PHOTO tile. Left-aligned, the two share the bottom line. */
@media (max-width: 900px) {
	.woocommerce-product-page .flex-control-thumbs {
		width: auto;
		gap: 0.5rem;
		align-self: flex-start;
		justify-content: flex-start;
	}

	.woocommerce-product-page .flex-control-thumbs li {
		width: 3.75rem !important;
		height: 4.625rem;
	}
}

/* Narrow phones: the tile row and the COA badge share the panel's bottom
   line, so their combined width sets a floor. Smaller tiles keep them side by
   side down to a 360px screen (the common Android width)... */
@media (max-width: 400px) {
	.woocommerce-product-page .flex-control-thumbs li {
		width: 3.5rem !important;
		height: 4.375rem;
	}
}

/* ...and below that there is no room for both, so the panel grows at the
   bottom and the COA badge drops beneath the tiles instead of onto them.
   The extra `div` in the selector outranks the later mobile rule that resets
   this panel's padding to 1.5rem all round; at equal specificity that later
   rule won and the badge stayed on top of the tiles. Only products that
   actually have the tile row (a photo) get the extra room. */
@media (max-width: 350px) {
	.woocommerce-product-page div.woocommerce-product-gallery:has(.flex-control-thumbs) {
		padding-bottom: 5.25rem;
	}
}

.woocommerce-product-page .product_title.entry-title {
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	margin: 0 0 0.75rem;
}

.woocommerce-product-page .price {
	font-family: var(--font-body);
	font-size: 1.625rem;
	font-weight: 600;
	color: var(--color-text-primary) !important;
	margin: 0 0 0.75rem;
}

.woocommerce-product-page .price .woocommerce-Price-currencySymbol {
	font-size: 1rem;
	font-weight: 500;
	color: var(--color-text-primary) !important;
}

.product-stock-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: var(--color-accent-light);
	color: var(--color-accent-hover);
	font-size: 0.8125rem;
	font-weight: 600;
	padding: 0.3rem 0.8rem;
	border-radius: var(--radius-pill);
	margin-bottom: 0.85rem;
}

.product-stock-badge--out {
	background: var(--color-error-light);
	color: var(--color-error);
}

.woocommerce-product-page .woocommerce-product-details__short-description {
	color: var(--color-text-secondary);
	font-size: 0.9375rem;
	line-height: 1.6;
	margin-bottom: 1.5rem;
}

.woocommerce-product-page .woocommerce-product-details__short-description p {
	margin: 0 0 0.5em;
}

.woocommerce-product-page .woocommerce-product-details__short-description p:last-child {
	margin-bottom: 0;
}

.woocommerce-product-page .woocommerce-product-details__short-description strong {
	color: var(--color-text-primary);
}

.product-subtitle {
	font-size: 0.9375rem;
	color: var(--color-text-primary);
	margin: 0 0 1rem;
}

.woocommerce-product-page .product_title {
	margin-bottom: 0.6rem;
}

/* --------------------------------------------------------------------------
   Technical specification block (V2 Pass 2, inc/product-specs.php). A dense
   mono table under the stock badge and above the tier cards: label column
   fitted to its widest entry, hairline rules, no fills.
   -------------------------------------------------------------------------- */
.product-specs {
	margin: 0 0 1rem;
}

/* Compact summary above the tiers: six fields at most in two columns, each
   cell a label/value pair on one line. */
.product-specs__table--summary {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 1.5rem;
	border-top: 1px solid var(--color-border);
}

.product-specs__table--summary .product-specs__row {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	min-width: 0;
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--color-border);
}

.product-specs__table--summary .product-specs__label,
.product-specs__table--summary .product-specs__value {
	padding: 0;
	border-bottom: 0;
}

.product-specs__table--summary .product-specs__label {
	flex: 0 0 auto;
	padding-right: 0;
}

.product-specs__table--summary .product-specs__value {
	flex: 1 1 auto;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Detailed table under the buy box, at the top of the details column. */
.product-specs--details {
	margin: 0 0 2rem;
}

.product-specs__heading {
	font-size: 1.25rem;
	margin: 0 0 0.75rem;
	color: var(--color-text-primary);
}

.product-specs__designation {
	margin: 0 0 0.5rem;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.product-specs__table {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	margin: 0;
	border-top: 1px solid var(--color-border);
}

.product-specs__row {
	display: contents;
}

.product-specs__label,
.product-specs__value {
	margin: 0;
	padding: 0.45rem 0;
	border-bottom: 1px solid var(--color-border);
	font-family: var(--font-mono);
	line-height: 1.4;
}

.product-specs__label {
	padding-right: 1.5rem;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	white-space: nowrap;
}

.product-specs__value {
	font-size: 0.8125rem;
	color: var(--color-text-primary);
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.product-specs__value sub {
	font-size: 0.75em;
	line-height: 0;
	vertical-align: -0.2em;
}

.product-specs__pending {
	color: var(--color-text-muted);
}

.product-specs__note {
	font-family: var(--font-body);
	font-size: 0.6875rem;
	color: var(--color-text-muted);
}

.product-specs__link {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: var(--color-accent);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	cursor: pointer;
}

.product-specs__link:hover {
	color: var(--color-accent-hover);
}

.product-specs__link:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

@media (max-width: 599px) {
	.product-specs__label {
		padding-right: 1rem;
		font-size: 0.625rem;
	}

	.product-specs__value {
		font-size: 0.75rem;
	}

	/* Two columns of stacked label-over-value cells: an inline pair does
	   not fit a 160px column without shrinking the type. */
	.product-specs__table--summary {
		column-gap: 1rem;
	}

	.product-specs__table--summary .product-specs__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.1rem;
		padding: 0.35rem 0;
	}

	.product-specs__table--summary .product-specs__value {
		white-space: normal;
	}
}

.product-options-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1.75rem;
	margin-bottom: 1rem;
}

.product-option-block {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.product-option-label {
	font-size: 0.8125rem;
	color: var(--color-text-muted);
}

.product-option-group {
	display: flex;
	/* Four-option products (LP1-S: 5/10/15/30mg) overflowed the summary column
	   below ~390px because the row could not break. Wrapping changes nothing
	   while the options fit, so desktop layout is unaffected. */
	flex-wrap: wrap;
	gap: 0.6rem;
}

.product-option-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.6rem 1.25rem;
	border-radius: var(--radius-input);
	border: 1.5px solid var(--color-border-strong);
	background: var(--color-bg);
	color: var(--color-text-primary);
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 500;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.product-option-btn--active {
	border-color: var(--color-accent);
	color: var(--color-accent-hover);
	background: var(--color-accent-light);
}

.woocommerce-product-page form.cart {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}

.woocommerce-product-page .quantity {
	display: none;
}

.woocommerce-product-page .quantity .qty {
	font-family: var(--font-body);
	font-size: 0.9375rem;
	width: 4.5rem;
	padding: 0.8rem 0.75rem;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-input);
	background: var(--color-bg);
	text-align: center;
}

.woocommerce-product-page form.cart .single_add_to_cart_button.button.alt {
	font-family: var(--font-body);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.85rem 2rem;
	border-radius: var(--radius-pill);
	font-size: 0.9375rem;
	font-weight: 500;
	border: none;
	cursor: pointer;
	background: var(--color-accent) !important;
	color: var(--color-text-inverse) !important;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.woocommerce-product-page form.cart .single_add_to_cart_button.button.alt:hover {
	background: var(--color-accent-hover) !important;
}

.woocommerce-product-page form.cart .single_add_to_cart_button.button.alt.disabled {
	background: var(--color-border-strong) !important;
	cursor: not-allowed;
}

.product-price-card {
	background: var(--color-bg-warm);
	/* The tier row above and the research notice below are both bordered;
	   without this the buy box was the one edgeless thing between them. */
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	padding: 1.1rem 1.25rem 0.75rem;
	margin-bottom: 1.25rem;
}

.product-price-card__row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
	margin-bottom: 0.9rem;
}

.product-price-card__info,
.product-price-card__price-block {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.product-price-card__price-block {
	align-items: flex-end;
	text-align: right;
}

.product-price-card__name {
	font-weight: 700;
	font-size: 1.125rem;
	color: var(--color-text-primary);
}

.product-price-card__price {
	font-weight: 700;
	font-size: 1.375rem;
	color: var(--color-text-primary);
}

.product-price-card__meta {
	font-size: 0.8125rem;
	color: var(--color-text-muted);
}

.product-price-card form.cart {
	flex-direction: column;
	align-items: stretch;
	margin-bottom: 0;
}

/* Trim dead grey space below "Buy it now" inside the price card:
   - WooCommerce core sets `div.product form.cart { margin-bottom: 2em }` at a
     specificity the earlier rule can't override.
   - WooCommerce's `.cart::before/::after` clearfix pseudo-elements are
     `display: table`, so in this flex column they count as items and the
     `gap` reserves ~1rem above the first child and below the last. */
.woocommerce-product-page div.product .product-price-card form.cart {
	margin-bottom: 0;
}

.product-price-card form.cart::before,
.product-price-card form.cart::after {
	display: none !important;
}

.product-price-card form.cart .single_add_to_cart_button.button.alt {
	width: 100%;
}

.product-research-notice {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	padding: 1.25rem 1.5rem;
	margin-bottom: 0;
}

.product-research-notice h3 {
	font-size: 1rem;
	margin: 0 0 0.5rem;
	color: var(--color-text-primary);
}

.product-research-notice p {
	font-size: 0.875rem;
	color: var(--color-text-secondary);
	line-height: 1.6;
	margin: 0;
}

/* Strength selector (variable products) */
.product-strength-group .product-option-btn {
	min-width: 4rem;
}

/* Quantity-tier ("bulk") discount cards */
.product-tier-block {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-bottom: 1rem;
}

.product-tier-list {
	display: grid;
	/* Column count comes from the renderer (--tier-columns) because the
	   cards are the only grid items and auto-fit has nothing to collapse. */
	grid-template-columns: repeat(var(--tier-columns, 4), minmax(0, 1fr));
	gap: 0.625rem;
	/* Clearance for the badges, which straddle the top border. */
	margin-top: 0.5rem;
}

.product-tier {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Top-aligned, with the comparison rows always reserved, so every
	   card's quantity and total sit on the same baseline whether or not
	   that card carries a saving. */
	justify-content: flex-start;
	gap: 0.25rem;
	width: 100%;
	padding: 0.9rem 0.4rem 0.8rem;
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-card-sm);
	background: var(--color-surface);
	font-family: var(--font-body);
	color: var(--color-text-primary);
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.product-tier:hover {
	border-color: var(--color-accent);
}

.product-tier:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* Selected: the accent border doubled by an inset ring, over the lightest
   green in the palette. Unselected cards stay on the neutral border. */
.product-tier--active {
	border-color: var(--color-accent);
	background: #EEF4F0;
	box-shadow: inset 0 0 0 1px var(--color-accent);
}

.product-tier__qty {
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}

/* Four across, a card is ~109px wide: "$100.00 each" on one line sat under
   5px from the border, so "each" stacks under the price as a unit label.
   The 2x2 layout below has the width to set it inline. */
.product-tier__total {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.15;
	white-space: nowrap;
}

.product-tier__each {
	margin-top: 0.05rem;
	font-size: 0.6875rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--color-text-muted);
}

.product-tier__total ins {
	text-decoration: none;
	background: none;
	color: inherit;
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

/* Comparison price over saving, always two rows tall — four cards in a
   ~465px column leave no room to set them side by side, and reserving both
   rows on every card is what keeps the four totals on one baseline. */
.product-tier__meta {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 0.02rem;
	min-height: 1.9rem;
	font-size: 0.75rem;
	line-height: 1.3;
}

.product-tier__meta del {
	font-weight: 500;
	color: var(--color-text-muted);
	white-space: nowrap;
}

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

.product-tier__save {
	font-weight: 600;
	color: var(--color-accent);
	white-space: nowrap;
}

/* Badges straddle the top border, so they cost the card no content space.
   "Most popular" is the call-out; "Best value" is the same pill in the
   quieter accent tint. */
.product-tier__badge {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 0.08rem 0.45rem;
	border-radius: var(--radius-pill);
	background: var(--color-accent);
	color: var(--color-text-inverse);
	/* Plex Sans, not mono: at this size the mono glyphs were hard to read on
	   phones (V2 Pass 2). */
	font-family: var(--font-body);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.7;
	white-space: nowrap;
}

.product-tier__badge--soft {
	background: var(--color-accent-light);
	color: var(--color-accent-hover);
}

/* Below the width that fits four readable cards, fall back to a 2x2 grid
   rather than shrinking the type any further. */
@media (max-width: 1199px) {
	.product-tier-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.product-tier {
		padding: 1.15rem 0.75rem 1.05rem;
	}

	.product-tier__total {
		flex-direction: row;
		align-items: baseline;
		justify-content: center;
		gap: 0.2rem;
	}

	.product-tier__total ins {
		font-size: 1.25rem;
	}

	.product-tier__each {
		margin-top: 0;
	}
}

/* Quantity stepper (wraps WooCommerce's own qty input) */
.woocommerce-product-page .quantity {
	display: inline-flex;
	align-items: center;
}

.product-qty {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-bottom: 0.25rem;
}

.product-qty__label {
	font-size: 0.8125rem;
	color: var(--color-text-muted);
	margin-right: auto;
}

.product-qty__step {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	border: 1.5px solid var(--color-border-strong);
	background: var(--color-surface);
	color: var(--color-text-primary);
	font-size: 1.05rem;
	line-height: 1;
	cursor: pointer;
	flex-shrink: 0;
	transition: border-color 0.15s ease;
}

.product-qty__step:hover {
	border-color: var(--color-text-primary);
}

.woocommerce-product-page .quantity .qty {
	width: 3rem;
	padding: 0.55rem 0.4rem;
	-moz-appearance: textfield;
	appearance: textfield;
}

.woocommerce-product-page .quantity .qty::-webkit-outer-spin-button,
.woocommerce-product-page .quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Variation form — hide WooCommerce's stock selector / price and let
   our strength buttons + tier cards + price card stand in for them. */
.woocommerce-product-page .variations,
.woocommerce-product-page .single_variation .price,
.woocommerce-product-page .woocommerce-variation-price,
.woocommerce-product-page .reset_variations {
	display: none !important;
}

.woocommerce-product-page .single_variation_wrap,
.woocommerce-product-page .woocommerce-variation-add-to-cart {
	width: 100%;
}

.woocommerce-product-page .woocommerce-variation-add-to-cart {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.75rem;
}

.woocommerce-product-page .woocommerce-variation-add-to-cart.woocommerce-variation-add-to-cart-disabled .single_add_to_cart_button {
	opacity: 0.45;
	pointer-events: none;
}

/* Price-card headline: was-total stacked above the current line total */
.product-price-card__price {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	line-height: 1.15;
}

.product-price-card__price del {
	color: var(--color-text-muted);
	font-weight: 500;
	font-size: 0.875rem;
}

.product-price-card__price ins {
	text-decoration: none;
	background: none;
	color: inherit;
}

/* Sticky buy bar */
.product-sticky-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 150;
	background: var(--color-surface);
	border-top: 1px solid var(--color-border);
	box-shadow: 0 -4px 20px rgba(26, 26, 26, 0.08);
	transform: translateY(100%);
	transition: transform 0.25s ease;
}

.product-sticky-bar.is-visible {
	transform: translateY(0);
}

.product-sticky-bar__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	/* `.container` gives horizontal padding, but this element also carries
	   `.container` and needs its own vertical padding — restate both so the
	   bar's contents don't butt against the screen edge. */
	padding: 0.85rem var(--page-margin);
}

.product-sticky-bar__info {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	flex: 1;
	min-width: 0;
}

.product-sticky-bar__name {
	flex: 1;
	min-width: 0;
	font-weight: 700;
	font-size: 1rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.product-sticky-bar__qty {
	display: flex;
	gap: 0.5rem;
}

.product-option-btn--sm {
	padding: 0.4rem 0.85rem;
	font-size: 0.8125rem;
}

.product-sticky-bar__size {
	flex-shrink: 0;
	cursor: default;
}

.product-sticky-bar__price {
	font-weight: 700;
	font-size: 1.125rem;
	flex-shrink: 0;
	white-space: nowrap;
}

.product-sticky-bar__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.75rem;
	border-radius: var(--radius-pill);
	background: var(--color-accent);
	color: var(--color-text-inverse);
	font-weight: 600;
	font-size: 0.9375rem;
	font-family: var(--font-body);
	border: none;
	cursor: pointer;
	flex-shrink: 0;
	white-space: nowrap;
	transition: background-color 0.15s ease;
}

.product-sticky-bar__cta:hover {
	background: var(--color-accent-hover);
}

@media (max-width: 640px) {
	/* Name + price + CTA don't all fit on one phone-width row alongside
	   the strength pill, and the name is the piece worth keeping (which
	   product am I buying, now that I've scrolled away). Drop the pill
	   here — the price already reflects the selected strength — and
	   tighten the price/CTA so a normal product name fits without an
	   ellipsis. */
	.product-sticky-bar__qty,
	.product-sticky-bar__size {
		display: none;
	}

	.product-sticky-bar__inner {
		gap: 0.75rem;
	}

	.product-sticky-bar__name {
		font-size: 0.9375rem;
	}

	.product-sticky-bar__price {
		font-size: 1rem;
	}

	.product-sticky-bar__cta {
		padding: 0.7rem 1.25rem;
	}
}

.woocommerce-product-page .product-details {
	margin-top: -2rem;
}

.product-details__description {
	color: var(--color-text-secondary);
	font-size: 0.9375rem;
	line-height: 1.7;
	margin-bottom: 2rem;
}

.product-details__description h2 {
	font-size: 1.25rem;
	margin: 2rem 0 1rem;
	color: var(--color-text-primary);
}

.product-details__description > h2:first-child,
.product-details__description > .product-section--intro > h2:first-child {
	margin-top: 0;
}

.product-details__description p {
	margin: 0 0 1rem;
}

.product-details__description ul {
	list-style: disc;
	margin: 0 0 1rem;
	padding-left: 1.25rem;
}

.product-details__description ul li {
	margin-bottom: 0.4rem;
}

.product-details__description .product-citation {
	color: var(--color-accent-hover);
	font-weight: 600;
	font-size: 0.875rem;
	margin-top: -0.5rem;
}

.product-details__description .product-reference {
	font-size: 0.875rem;
	margin-bottom: 1rem;
}

.product-details__description .product-reference em {
	color: var(--color-text-secondary);
	font-style: italic;
}

/* Citation / reference links (and any inline links in the description). */
.product-details__description a {
	color: var(--color-accent);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.product-details__description a:hover {
	color: var(--color-accent-hover);
}

.product-details__description .product-reference a em {
	color: inherit;
}

/* --- Research sections as accordions -------------------------------------
   medicina_labs_product_description_sections() wraps each authored <h2>
   section of the product description in .product-section; everything after
   the Overview also gets a .product-section__panel. All of it renders open
   — these rules only take effect once the inline primer in
   medicina_labs_product_details_section() has added .is-accordion, and
   main.js then supplies the button semantics.

   No width gate: .is-accordion is itself the switch, and the rows are sized
   in rem, so the same accordion runs at every width. Without JavaScript the
   class is never added and every section stays expanded, which is still
   what a crawler sees. ---------------------------------------------------- */
.product-details__description.is-accordion .product-section--intro {
	margin-bottom: 1.75rem;
}

/* Hairline rows rather than cards: a separator above each section and
   one under the last closes the list off. */
.product-details__description.is-accordion .product-section--collapsible {
	border-top: 1px solid var(--color-border);
}

.product-details__description.is-accordion .product-section--collapsible:last-child {
	border-bottom: 1px solid var(--color-border);
}

/* The heading element, its level and its text are untouched; main.js
   moves its contents into a button so the whole row is the control. */
.product-details__description.is-accordion .product-section--collapsible > h2 {
	margin: 0;
	font-size: 1.0625rem;
	/* Holds the row at its final height between the inline primer
	   adding .is-accordion and main.js inserting the button, so the
	   list never reflows. The button takes the padding over once it
	   exists, which is what .product-section__heading marks. */
	padding: 1.05rem 0;
}

.product-details__description.is-accordion .product-section--collapsible > h2.product-section__heading {
	padding: 0;
}

.product-section__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: 1.05rem 0;
	background: none;
	border: 0;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
	transition: color 0.15s ease;
}

.product-section__toggle:hover {
	color: var(--color-accent-hover);
}

.product-section__toggle:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

.product-section__label {
	min-width: 0;
}

.product-section__chevron {
	flex: 0 0 auto;
	color: var(--color-text-muted);
	transition: transform 0.25s ease, color 0.15s ease;
}

.product-section__toggle:hover .product-section__chevron {
	color: var(--color-accent-hover);
}

.product-section.is-open .product-section__chevron {
	transform: rotate(180deg);
}

/* 0fr -> 1fr animates to the content's own height, so nothing has to
   measure it and it stays correct if the text reflows. */
.product-details__description.is-accordion .product-section__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.28s ease;
}

.product-details__description.is-accordion .product-section.is-open .product-section__panel {
	grid-template-rows: 1fr;
}

/* visibility (delayed until the collapse finishes) keeps links inside a
   closed section out of the tab order and the accessibility tree. */
.product-details__description.is-accordion .product-section__panel-inner {
	min-height: 0;
	overflow: hidden;
	visibility: hidden;
	transition: visibility 0s linear 0.28s;
}

.product-details__description.is-accordion .product-section.is-open .product-section__panel-inner {
	visibility: visible;
	transition-delay: 0s;
}

.product-details__description.is-accordion .product-section__panel-inner > :last-child {
	margin-bottom: 1.4rem;
}

@media (prefers-reduced-motion: reduce) {
	.product-details__description.is-accordion .product-section__panel,
	.product-section__chevron,
	.product-section__toggle {
		transition: none;
	}
}

.product-specs-table {
	width: 100%;
	border-collapse: collapse;
}

.product-specs-table tr {
	border-bottom: 1px solid var(--color-border);
}

.product-specs-table th,
.product-specs-table td {
	text-align: left;
	padding: 0.85rem 0;
	font-size: 0.9375rem;
	font-weight: 400;
}

.product-specs-table th {
	width: 40%;
	color: var(--color-text-primary);
	font-weight: 600;
}

.product-specs-table td {
	color: var(--color-text-secondary);
}

.woocommerce-product-page .comment-form input:not([type="checkbox"]),
.woocommerce-product-page .comment-form textarea,
.woocommerce-product-page .comment-form select {
	font-family: var(--font-body);
	font-size: 0.9375rem;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-input);
	background: var(--color-surface);
	width: 100%;
	max-width: 26rem;
}

.woocommerce-product-page .comment-form p {
	margin-bottom: 1rem;
}

.woocommerce-product-page #submit {
	font-family: var(--font-body);
	padding: 0.8rem 1.75rem;
	border-radius: var(--radius-pill);
	font-size: 0.9375rem;
	font-weight: 500;
	border: none;
	cursor: pointer;
	background: var(--color-accent);
	color: var(--color-text-inverse);
	max-width: none;
}

/* --------------------------------------------------------------------------
   Single product page — mobile
   `--page-margin` is a generous gutter that reads as too wide once the screen
   is this narrow, so tighten the wrapper's padding here. The nested-container
   reset lives with the base rules above and still applies, so the product grid
   and the three shared sections stay on the same edge.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.woocommerce-product-page.container {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}

	/* Full-bleed warm panel looked oversized with 3rem of inner padding
	   around a single tall vial; tighten it and let the vial sit a little
	   larger in the reclaimed space. */
	.woocommerce-product-page.container {
		padding-top: 1.25rem;
	}
	/* Shorter photo panel on phones so the tier selector starts near the
	   fold; the sticky bar carries the CTA from first paint (main.js). */
	.woocommerce-product-page .woocommerce-product-gallery {
		padding: 1rem 1rem 0.9rem;
		margin-bottom: 1.1rem;
		gap: 0.75rem;
	}
	.woocommerce-product-page .woocommerce-product-gallery__wrapper,
	.woocommerce-product-page .flex-viewport {
		width: 48%;
	}

	.product-price-card {
		padding: 1.25rem 1.25rem 0.75rem;
	}

	.product-research-notice {
		padding: 1rem 1.25rem;
	}

	/* `.product-sticky-bar__inner` is a `.container` but sets its own
	   `padding: 0.85rem 0`, so the bar's contents also hit both edges. */
	.product-sticky-bar__inner {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}
}

/* ==========================================================================
   Cart drawer
   ========================================================================== */
.cart-drawer {
	position: fixed;
	inset: 0;
	z-index: 200;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

.cart-drawer.is-open {
	visibility: visible;
	opacity: 1;
}

.cart-drawer__overlay {
	position: absolute;
	inset: 0;
	background: rgba(14, 70, 53, 0.55);
}

.cart-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 90%;
	max-width: 420px;
	background: var(--color-surface);
	padding: 2rem 1.75rem;
	transform: translateX(100%);
	transition: transform 0.25s ease;
	overflow-y: auto;
}

.cart-drawer.is-open .cart-drawer__panel {
	transform: translateX(0);
}

/* Mobile add-to-cart posts in the background and opens this drawer rather
   than reloading the page, so the button has to show it is working for the
   fraction of a second the request takes. Matches .cart-suggestion__add. */
@media (max-width: 767px) {
	.woocommerce-product-page form.cart .single_add_to_cart_button.is-busy {
		opacity: 0.55;
		cursor: default;
	}

	/* The panel already sits at 90% / max 420px, which fits a phone; it only
	   needs to clear the home indicator once it is the full height of one. */
	.cart-drawer__panel {
		padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
	}
}

.cart-drawer__close {
	position: absolute;
	top: 1.5rem;
	right: 1.75rem;
	background: none;
	border: none;
	color: var(--color-text-primary);
	cursor: pointer;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--radius-card-sm);
}

.cart-drawer__close:hover {
	background: var(--color-bg-warm);
}

.cart-drawer__header {
	margin-bottom: 1.5rem;
	padding-right: 2rem;
}

.cart-drawer__title {
	font-size: 1.5rem;
	margin: 0;
}

.cart-drawer__count {
	font-size: 1rem;
	font-weight: 400;
	color: var(--color-text-muted);
}

.cart-drawer__shipping {
	margin-bottom: 1.75rem;
}

.cart-drawer__shipping-msg {
	color: var(--color-accent);
	font-weight: 600;
	font-size: 0.9375rem;
	margin: 0 0 0.6rem;
}

.cart-drawer__progress {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.cart-drawer__progress-label {
	font-size: 0.75rem;
	color: var(--color-text-muted);
	white-space: nowrap;
}

.cart-drawer__progress-track {
	flex: 1;
	height: 0.5rem;
	background: var(--color-bg-warm-strong);
	border-radius: var(--radius-pill);
	overflow: hidden;
}

.cart-drawer__progress-fill {
	display: block;
	height: 100%;
	background: var(--color-accent);
	border-radius: var(--radius-pill);
	transition: width 0.25s ease;
}

.cart-drawer__items {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin-bottom: 1.75rem;
	padding-bottom: 1.75rem;
	border-bottom: 1px solid var(--color-border);
}

.cart-drawer__item {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.cart-drawer__item-image {
	flex-shrink: 0;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: var(--radius-card-sm);
	overflow: hidden;
	background: var(--color-surface);
}

.cart-drawer__item-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cart-drawer__item-info {
	flex: 1;
	min-width: 0;
	/* Stack name → discount pill → qty stepper. Was a plain block with
	   the pill as `inline-block` and the stepper as `inline-flex`, so
	   whenever a bulk discount applied the pill and the stepper collided
	   on one line and wrapped awkwardly. */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
}

.cart-drawer__item-name {
	font-size: 0.9375rem;
	font-weight: 600;
	margin: 0;
}

.cart-drawer__item-discount {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--color-accent-hover);
	background: var(--color-accent-light);
	padding: 0.1rem 0.45rem;
	border-radius: var(--radius-pill);
}

.cart-drawer__qty {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.cart-drawer__qty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	border: 1px solid var(--color-border-strong);
	background: none;
	color: var(--color-text-primary);
	cursor: pointer;
	font-size: 0.9375rem;
	line-height: 1;
}

.cart-drawer__qty-btn:hover {
	background: var(--color-bg-warm);
}

.cart-drawer__qty-value {
	font-size: 0.9375rem;
	font-weight: 600;
	min-width: 1ch;
	text-align: center;
}

.cart-drawer__item-price {
	font-weight: 700;
	font-size: 0.9375rem;
	white-space: nowrap;
}

.cart-drawer__subtotal {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: 700;
	font-size: 1rem;
	margin-bottom: 1rem;
}

/* Drawer summary when a coupon is applied: subtotal, each coupon's
   discount, (shipping / tax only when non-zero) and the total — the
   same figures as the cart page. Without a coupon the single
   .cart-drawer__subtotal row above is used instead. */
.cart-drawer__summary {
	margin-bottom: 1rem;
}

.cart-drawer__summary-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 0.2rem 0;
	font-size: 0.9375rem;
	color: var(--color-text-secondary);
}

.cart-drawer__summary-row > span:last-child {
	white-space: nowrap;
}

.cart-drawer__summary-row--discount {
	color: var(--color-accent-hover);
	font-weight: 600;
}

.cart-drawer__summary-coupon {
	display: inline-block;
	padding: 0.1rem 0.45rem;
	border-radius: var(--radius-pill);
	background: var(--color-accent-light);
	color: var(--color-accent-hover);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.cart-drawer__summary-row--total {
	margin-top: 0.35rem;
	padding-top: 0.65rem;
	border-top: 1px solid var(--color-border);
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-text-primary);
}

.cart-drawer__checkout-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.9rem 1.5rem;
	border-radius: var(--radius-pill);
	background: var(--color-accent);
	color: var(--color-text-inverse);
	font-weight: 600;
	font-size: 0.9375rem;
	transition: background-color 0.15s ease;
}

.cart-drawer__checkout-btn:hover {
	background: var(--color-accent-hover);
}

.cart-drawer__timeline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	margin-top: 1rem;
	color: var(--color-accent);
	font-size: 0.8125rem;
	font-weight: 600;
	text-align: center;
}

.cart-drawer__timeline svg {
	flex-shrink: 0;
}

.cart-drawer__timeline-step {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

.cart-drawer__timeline-sep {
	color: var(--color-accent);
	opacity: 0.6;
}

.cart-drawer__empty {
	text-align: center;
	padding: 1.5rem 0 0;
}

.cart-drawer__empty-title {
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--color-text-primary);
	margin: 0 0 1.5rem;
}

.cart-drawer__empty-icon {
	position: relative;
	display: inline-flex;
	margin-bottom: 1.75rem;
}

.cart-drawer__empty-badge {
	position: absolute;
	top: -0.25rem;
	right: -0.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--color-accent);
	box-shadow: 0 0 0 4px var(--color-bg);
}

.cart-drawer__start-shopping {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.9rem 1.5rem;
	border-radius: var(--radius-pill);
	background: var(--color-accent);
	color: var(--color-text-inverse);
	font-weight: 600;
	font-size: 0.9375rem;
	transition: background-color 0.15s ease;
}

.cart-drawer__start-shopping:hover {
	background: var(--color-accent-hover);
}

.cart-drawer__guarantees {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	margin-top: 2rem;
	text-align: left;
}

.cart-drawer__guarantees li {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	color: var(--color-text-secondary);
	font-size: 0.875rem;
}

.cart-drawer__guarantees svg {
	flex-shrink: 0;
	color: var(--color-accent);
}

@media (max-width: 480px) {
	.cart-drawer__panel {
		width: 100%;
		max-width: 100%;
		padding: 1.5rem 1.25rem;
	}
}

/* ==========================================================================
   Checkout (Fluid Checkout / medicinalabs.com/checkout/)
   The checkout layer lives in assets/css/checkout.css, enqueued after the
   plugin's stylesheets (medicina_labs_checkout_styles in functions.php):
   step / place-order buttons, fields, review rows, option boxes and the
   plugin token overrides are all there. Only the handoff note below stays
   in this file.
   ========================================================================== */
/* Reassurance line under the button (medicina_labs_checkout_handoff_note
   in functions.php): small, muted, centred like the button above it.
   Fluid Checkout's .fc-place-order wrapper carries 10px bottom padding;
   drop it when the note follows so the gap is a clean 10px. */
.medicina-handoff-note {
	margin: 10px 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: #66706A; /* a step darker than --color-text-muted (#8a8a8a) so it reads on the live page; still lighter than --color-text-secondary */
	text-align: center;
}

.fc-wrapper .fc-place-order:has(+ .medicina-handoff-note) {
	padding-bottom: 0;
}

.medicina-handoff-note__icon {
	font-size: 0.9em;
	opacity: 0.7;
	filter: grayscale(1);
}

/* Accepted cards under the handoff note. Narrower than the 62% used on the
   product page and in the cart: the place-order column is already narrow, and
   at 62% here the marks rendered larger than the note above them and pulled
   focus from the button. */
.medicina-handoff-payments {
	margin: 0.75rem 0 0;
	line-height: 0;
}

.medicina-handoff-payments img {
	display: block;
	width: 34%;
	max-width: 8.8rem;
	height: auto;
	margin-inline: auto;
}

/* ==========================================================================
   Cart page (medicinalabs.com/cart/) — reskin of WooCommerce's native
   Cart block. Structural layout (two-column grid, quantity stepper,
   coupon panel) stays native; this just restyles it to match the rest
   of the site and adds the "Products" heading / shipping progress /
   delivery timeline that assets/js/main.js layers on top.
   ========================================================================== */
body.woocommerce-cart .page-header {
	padding-top: 0.875rem;
	padding-bottom: 1rem;
	margin-bottom: 1.5rem;
}

body.woocommerce-cart .wp-block-woocommerce-product-collection {
	display: none;
}

.wp-block-woocommerce-cart {
	font-family: var(--font-body);
	color: var(--color-text-primary);
}

.wc-block-components-sidebar-layout.wc-block-cart {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 1.75rem;
	align-items: start;
}

.wc-block-cart__main,
.wc-block-cart__sidebar {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	/* WooCommerce Blocks' own stylesheet sets width AND an asymmetric
	   padding (padding-left/right: 2.26415% on .wc-block-components-sidebar
	   and -main, equal specificity) that otherwise fights our grid column
	   sizing above and pulls the cart-totals text off-centre. */
	padding: 1.75rem !important;
	width: auto !important;
	max-width: none !important;
}

.cart-page__products-heading {
	font-size: 1.25rem;
	margin: 0 0 1.25rem;
}

.wc-block-cart-items {
	width: 100%;
	border-collapse: collapse;
}

.wc-block-cart-items thead th {
	text-align: left;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding-bottom: 0.75rem;
}

/* The rule under the column headings. WooCommerce Blocks resets `th`
   borders with `table.wc-block-cart-items th { border: 0 }` and instead
   draws this line as a border-top on every cell of the first row — but it
   also lays the line-total cell out as a flex box, which takes that cell
   out of the collapsed-border model, so its segment renders a pixel lower
   with a visible break before it. Draw one continuous rule on the heading
   cells (out-specifying the reset) and drop Blocks' per-cell one. */
table.wc-block-cart-items thead th {
	border-bottom: 1px solid var(--color-border);
}

.wc-block-cart__main .wc-block-cart-items .wc-block-cart-items__row td {
	border-top: 0;
}

.wc-block-cart-items__row {
	border-bottom: 1px solid var(--color-border);
}

.wc-block-cart-items__row td {
	padding: 1.25rem 0.5rem 1.25rem 0;
	vertical-align: top;
}

.wc-block-cart-item__image img {
	width: 3.5rem;
	height: 3.5rem;
	object-fit: cover;
	border-radius: var(--radius-card-sm);
	background: var(--color-surface);
}

.wc-block-components-product-name {
	color: var(--color-text-primary);
	font-weight: 600;
	font-size: 0.9375rem;
}

.wc-block-cart-item__prices {
	margin: 0.25rem 0;
	font-size: 0.875rem;
	color: var(--color-text-secondary);
}

.wc-block-components-product-metadata__description {
	font-size: 0.8125rem;
	color: var(--color-text-muted);
}

.wc-block-cart-item__quantity {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.75rem;
}

/* Blocks wraps the stepper in its own bordered, rounded pill. Two circular
   buttons already read as a control, so the pill was a second container drawn
   around a control that did not need one — and it is not what the cart drawer
   shows, which left the same stepper looking like two different components on
   two pages. !important throughout because the Blocks stylesheet loads after
   this one and the plain `border: none` here lost on source order. */
.wc-block-components-quantity-selector {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border: none !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	width: auto !important;
	min-width: 0 !important;
}

/* The pill positioned its input absolutely to fill the box; without the pill
   that has to go back to being a normal flex child between the buttons. */
.wc-block-components-quantity-selector::after {
	display: none !important;
}

.wc-block-components-quantity-selector__input {
	position: static !important;
	border: none !important;
	background: none !important;
	box-shadow: none !important;
	font-weight: 600;
	font-size: 0.9375rem;
	width: 1.5rem !important;
	min-width: 0 !important;
	height: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	flex: 0 0 auto;
	text-align: center;
	color: var(--color-text-primary);
}

.wc-block-components-quantity-selector__button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 1.5rem !important;
	min-width: 1.5rem !important;
	height: 1.5rem !important;
	border-radius: 50% !important;
	/* !important like its siblings above: without it WooCommerce Blocks' own
	   later stylesheet resets the border to 0 and the stepper renders as two
	   bare glyphs instead of the circular buttons the drawer uses. */
	border: 1px solid var(--color-border-strong) !important;
	background: none;
	color: var(--color-text-primary);
	line-height: 1;
	font-size: 0.9375rem;
}

/* Blocks dims every quantity button to 0.6; this keeps the usable ones at
   full strength without also flattening the disabled state, which the old
   blanket `opacity: 1 !important` here did. */
.wc-block-components-quantity-selector__button:not(:disabled) {
	opacity: 1 !important;
}

/* Minus is disabled at a quantity of one — the trash icon is how a line is
   removed — but at full opacity in the same colour as plus it read as a
   button that simply does not work. */
.wc-block-components-quantity-selector__button:disabled {
	opacity: 0.3 !important;
	cursor: not-allowed;
}

.wc-block-components-quantity-selector__button:hover {
	background: var(--color-bg-warm);
}

.wc-block-cart-item__remove-link {
	color: var(--color-text-muted);
}

.wc-block-cart-item__remove-link:hover {
	color: var(--color-error);
}

.wc-block-cart-item__total {
	font-weight: 700;
	font-size: 0.9375rem;
	white-space: nowrap;
}

.wc-block-cart__totals-title {
	font-size: 1.25rem;
	margin: 0 0 1.25rem;
}

#cart-page-shipping {
	margin-bottom: 1.5rem;
}

.wc-block-components-totals-item__label {
	font-size: 0.9375rem;
	color: var(--color-text-secondary);
}

.wc-block-components-totals-item__value {
	font-weight: 600;
	color: var(--color-text-primary);
}

/* "Free" shipping in the cart totals: the Cart block wraps it in <strong>
   set to uppercase at weight 900, heavier than anything else on the page.
   Match the green "FREE" used on the shipping options above it. */
.wc-block-components-totals-shipping .wc-block-components-totals-item__value strong {
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--color-accent);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--color-text-primary);
}

/* No border of its own: the Cart block's totals wrapper already draws the
   rule above "Estimated total"; a second border here doubled it. */
.wc-block-components-totals-item.wc-block-components-totals-footer-item {
	padding-top: 0.75rem;
	margin-top: 0.5rem;
}

.wc-block-components-totals-coupon .wc-block-components-panel__button {
	color: var(--color-accent);
	font-weight: 600;
	font-size: 0.875rem;
}

.wc-block-components-totals-coupon input[type="text"] {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-input);
	padding: 0.6rem 0.85rem;
	font-family: var(--font-body);
}

.wc-block-components-totals-coupon button {
	background: var(--color-accent);
	color: var(--color-text-inverse);
	border-radius: var(--radius-pill);
	border: none;
	font-weight: 600;
	padding: 0.6rem 1.25rem;
}

.wc-block-components-totals-coupon button:hover {
	background: var(--color-accent-hover);
}

.wc-block-cart__submit-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0.9rem 1.5rem !important;
	border-radius: var(--radius-pill) !important;
	background: var(--color-accent) !important;
	color: var(--color-text-inverse) !important;
	font-weight: 600;
	font-size: 0.9375rem;
	border: none !important;
}

.wc-block-cart__submit-button:hover {
	background: var(--color-accent-hover) !important;
}

/* Delivery steps inside the cart totals' Shipping row, under the method
   name: left-aligned to match the row, with a little room above. */
.cart-page__timeline .cart-drawer__timeline {
	justify-content: flex-start;
	margin-top: 0.6rem;
	text-align: left;
}

/* Payment-methods strip under Proceed to Checkout, above the timeline.
   Same 62% centred sizing as the product-page strip. */
.cart-page__payments {
	margin: 1rem 0 0;
	line-height: 0;
}

.cart-page__payments img {
	display: block;
	width: 27%;
	height: auto;
	margin-inline: auto;
}

/* Empty cart: our injected markup reuses .cart-drawer__empty, just
   sized up for a full page rather than a narrow side panel. */
.wp-block-woocommerce-empty-cart-block .cart-drawer__empty {
	max-width: 26rem;
	margin: 0 auto;
	padding: 2.5rem 0;
}

.wp-block-woocommerce-empty-cart-block .cart-drawer__empty-icon svg:first-child {
	width: 120px;
	height: 120px;
}

@media (max-width: 900px) {
	.wc-block-components-sidebar-layout.wc-block-cart {
		grid-template-columns: 1fr;
	}
}

/* Grid children default to `min-width: auto`, so neither cart column could
   shrink below its own min-content — the line-items table needs 348px and the
   totals panel 406px, but on a 375px screen the column is only 281px. Both
   cards spilled off the right edge, taking the line totals and the "Save"
   badge with them. This one line is what stops the overflow. */
.wc-block-cart__main,
.wc-block-cart__sidebar {
	min-width: 0;
}

/* --------------------------------------------------------------------------
   Cart page — phones
   Once WooCommerce Blocks tags the cart `.is-mobile` it lays each line item
   out as a grid with fixed `80px 132px` tracks. With only two tracks declared
   the line total lands in an implicit third column that wraps under the
   thumbnail, stranding the price away from the product it belongs to. Declare
   a fluid three-track grid instead — thumbnail, details, total — so the total
   sits top-right beside the name and the details column takes what's left.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
	/* --page-margin costs a quarter of a 375px screen; use the tighter gutter
	   the product page already uses at this width. */
	body.woocommerce-cart .container.page-content {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}

	.wc-block-cart__main,
	.wc-block-cart__sidebar {
		padding: 1.25rem !important;
	}

	/* The long selectors are deliberate: these have to out-specify
	   WooCommerce Blocks' own `.is-mobile table.wc-block-cart-items
	   .wc-block-cart-items__row ...` rules, which are (0,4,1).

	   Blocks spans the details cell across `grid-column: 2 / 4` against only
	   two declared tracks, so the total gets bumped into an implicit fourth
	   column and wraps under the thumbnail. Declaring three tracks and pinning
	   each cell to exactly one of them keeps the row honest. */
	.wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-items__row,
	.wc-block-cart.is-small table.wc-block-cart-items .wc-block-cart-items__row,
	.wc-block-cart.is-medium table.wc-block-cart-items .wc-block-cart-items__row {
		grid-template-columns: 4rem minmax(0, 1fr) auto;
		column-gap: 0.875rem;
		align-items: start;
	}

	.wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product,
	.wc-block-cart.is-small table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product,
	.wc-block-cart.is-medium table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product {
		grid-column: 2 / 3;
	}

	.wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total,
	.wc-block-cart.is-small table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total,
	.wc-block-cart.is-medium table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
		grid-column: 3 / 4;
		text-align: right;
	}
}

/* Phones in portrait. Three tracks leave the details column between 69px (at
   320) and 126px (at 375) — too narrow for the product description, which
   shreds into a two-word ribbon. Drop to two tracks and let the line total sit
   under the details rather than beside them: at 375 that takes the details
   column from 126px to 223px. Above this the third column has room to earn its
   place, so the total goes back up beside the product name. */
@media (max-width: 480px) {
	.wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-items__row,
	.wc-block-cart.is-small table.wc-block-cart-items .wc-block-cart-items__row,
	.wc-block-cart.is-medium table.wc-block-cart-items .wc-block-cart-items__row {
		grid-template-columns: 3.5rem minmax(0, 1fr);
	}

	.wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total,
	.wc-block-cart.is-small table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total,
	.wc-block-cart.is-medium table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
		grid-column: 2 / 3;
		grid-row: 2;
		margin-top: 0.5rem;
	}
}

/* ==========================================================================
   Product COA badge
   ========================================================================== */
.product-coa-badge {
	position: absolute;
	bottom: 1.75rem;
	right: 1.75rem;
	z-index: 5;
	display: flex;
	align-items: stretch;
	background: var(--color-bg);
	border: none;
	border-radius: var(--radius-card-sm);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	padding: 0;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.product-coa-badge:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(26, 26, 26, 0.14);
}

.product-coa-badge__preview {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	background: var(--color-accent-light);
	color: var(--color-accent-hover);
	overflow: hidden;
}

.product-coa-badge__preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
}

.product-coa-badge__label {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0 0.85rem;
	background: var(--color-text-primary);
	color: var(--color-text-inverse);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ==========================================================================
   Product "Made in the USA" tag — top-right of the gallery image
   (medicina_labs_product_usa_tag in functions.php). Display only.
   ========================================================================== */
.product-usa-tag {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 0.4375rem;
	padding: 0.385rem 0.63rem 0.385rem 0.49rem;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: 7px;
	box-shadow: var(--shadow-card);
	cursor: default;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Hover: lifts like the COA badge, and the flag gives a short wave. */
.product-usa-tag:hover {
	transform: translateY(-2px);
	border-color: var(--color-border-strong);
	box-shadow: 0 8px 22px rgba(26, 26, 26, 0.14);
}

.product-usa-tag:hover .product-usa-tag__flag {
	animation: product-usa-tag-wave 0.6s ease-in-out;
}

@keyframes product-usa-tag-wave {
	0%, 100% { transform: rotate(0deg); }
	25% { transform: rotate(-8deg); }
	50% { transform: rotate(6deg); }
	75% { transform: rotate(-3deg); }
}

.product-usa-tag__flag {
	flex-shrink: 0;
	width: 1.33rem;
	height: auto;
	border-radius: 2px;
	box-shadow: 0 0 0 0.5px rgba(14, 70, 53, 0.18);
	transform-origin: left center;
}

.product-usa-tag__text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.product-usa-tag__title {
	color: var(--color-text-primary);
	font-size: 0.525rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.product-usa-tag__sub {
	color: var(--color-text-muted);
	font-size: 0.48rem;
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.product-usa-tag,
	.product-usa-tag:hover {
		transition: none;
		transform: none;
	}

	.product-usa-tag:hover .product-usa-tag__flag {
		animation: none;
	}
}

@media (max-width: 600px) {
	.product-usa-tag {
		top: 0.75rem;
		right: 0.75rem;
		gap: 0.35rem;
		padding: 0.28rem 0.455rem 0.28rem 0.35rem;
	}

	.product-usa-tag__flag {
		width: 1.05rem;
	}

	.product-usa-tag__title {
		font-size: 0.48rem;
	}

	.product-usa-tag__sub {
		font-size: 0.4375rem;
	}
}

/* ==========================================================================
   Product COA modal — on-page Certificate of Analysis report, opened
   by the badge above. Same fixed-overlay + is-open toggle convention
   as .cart-drawer, but a centered card instead of a side panel.
   ========================================================================== */
.coa-modal {
	position: fixed;
	inset: 0;
	z-index: 210;
	visibility: hidden;
	opacity: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem 1rem;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

.coa-modal.is-open {
	visibility: visible;
	opacity: 1;
}

.coa-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(14, 70, 53, 0.55);
}

.coa-modal__panel {
	position: relative;
	background: var(--color-surface);
	border-radius: var(--radius-card);
	width: 100%;
	max-width: 56rem;
	max-height: 90vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transform: translateY(12px);
	transition: transform 0.25s ease;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.coa-modal.is-open .coa-modal__panel {
	transform: translateY(0);
}

.coa-modal__bar {
	flex: 0 0 auto;
	display: flex;
	justify-content: flex-end;
	padding: 0.4rem;
	background: var(--color-text-primary);
}

.coa-modal__close {
	width: 2rem;
	height: 2rem;
	border: none;
	border-radius: var(--radius-card-sm);
	background: transparent;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.coa-modal__close:hover {
	background: rgba(255, 255, 255, 0.16);
}

.coa-modal__doc {
	width: 100%;
	height: 80vh;
	border: 0;
	display: block;
	background: var(--color-bg-warm);
}

img.coa-modal__doc {
	height: auto;
	max-height: 82vh;
	object-fit: contain;
	margin: 0 auto;
}

@media (max-width: 600px) {
	.coa-modal {
		padding: 0;
	}

	.coa-modal__panel {
		max-width: none;
		max-height: 100vh;
		border-radius: 0;
	}

	.coa-modal__doc {
		height: 100vh;
	}
}

/* ==========================================================================
   Registration page (/register/ — template-register.php)
   Single-page account creation; the card is 36rem (576px) wide on desktop.
   ========================================================================== */
.register-page {
	display: flex;
	justify-content: center;
	padding-top: 2.5rem;
	padding-bottom: 4rem;
}

.register-card {
	width: 100%;
	max-width: 36rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	background: var(--color-surface);
	box-shadow: var(--shadow-card);
	padding: 2.5rem 2.75rem 2.25rem;
}

.register-card__brand {
	display: flex;
	justify-content: center;
	margin: 0 0 1.5rem;
}

.register-card__brand .custom-logo-link {
	display: inline-flex;
	line-height: 0;
}

.register-card__brand .custom-logo {
	width: auto;
	height: 44px;
	max-width: 190px;
	object-fit: contain;
}

.register-card__title {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	text-align: center;
	font-size: clamp(1.625rem, 4vw, 2rem);
	line-height: 1.15;
	margin: 0 0 0.75rem;
}

.register-card__eyebrow {
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--color-text-muted);
}

.register-card__lead {
	text-align: center;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--color-text-secondary);
	max-width: 26rem;
	margin: 0 auto 1.75rem;
}

/* Social sign-in slot — only prints when a provider is enabled in Nextend. */
.register-social {
	margin: 0 0 1.25rem;
}

.register-social .nsl-container {
	margin: 0;
}

.register-social .nsl-container-block-fullwidth .nsl-container-buttons {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	max-width: none;
}

.register-social .nsl-container-block-fullwidth .nsl-container-buttons a {
	margin: 0;
}

.register-social .nsl-button {
	border-radius: var(--radius-input) !important;
	box-shadow: none !important;
	border: 1px solid var(--color-border-strong) !important;
	background: var(--color-bg) !important;
	color: var(--color-text-primary) !important;
	font-family: var(--font-body) !important;
	font-weight: 500 !important;
	transition: border-color 0.15s ease;
}

.register-social .nsl-button:hover {
	border-color: var(--color-text-primary) !important;
}

.register-social .nsl-button .nsl-button-label-container {
	font-family: var(--font-body) !important;
	font-size: 0.9375rem !important;
	color: var(--color-text-primary) !important;
}

.register-social .nsl-button .nsl-button-label-container b {
	font-weight: 600;
}

.register-social .nsl-button:focus-visible {
	outline: none;
	border-color: var(--color-accent) !important;
	box-shadow: 0 0 0 3px var(--color-accent-light) !important;
}

.register-divider {
	display: flex;
	align-items: center;
	gap: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--color-text-muted);
	margin: 0 0 1.5rem;
}

.register-divider::before,
.register-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--color-border);
}

.register-form {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

.register-page .form-field {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	margin: 0;
}

.register-page .form-field label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-text-primary);
}

.register-page .form-field .required {
	color: var(--color-error);
}

.register-page .form-field input,
.register-page .form-field select {
	width: 100%;
	max-width: none;
	box-sizing: border-box;
	font-family: var(--font-body);
	font-size: 0.9375rem;
	padding: 0.8rem 0.95rem;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-input);
	background: var(--color-bg);
	color: var(--color-text-primary);
}

.register-page .form-field input::placeholder {
	color: var(--color-text-muted);
}

.register-page .form-field select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2316332b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 0.95rem center;
	padding-right: 2.5rem;
}

.register-page .form-field select:invalid,
.register-page .form-field select option[value=""] {
	color: var(--color-text-muted);
}

.register-page .form-field select option {
	color: var(--color-text-primary);
}

.register-page .form-field input:focus,
.register-page .form-field select:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px var(--color-accent-light);
}

.register-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.register-password {
	position: relative;
}

.register-page .register-password input {
	padding-right: 3rem;
}

.register-password__toggle {
	position: absolute;
	top: 50%;
	right: 0.5rem;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--color-text-muted);
	cursor: pointer;
}

.register-password__toggle:hover,
.register-password__toggle:focus-visible {
	color: var(--color-text-primary);
	outline: none;
}

.register-password__toggle:focus-visible {
	box-shadow: 0 0 0 3px var(--color-accent-light);
}

.register-password__icon--hide,
.register-password__toggle.is-visible .register-password__icon--show {
	display: none;
}

.register-password__toggle.is-visible .register-password__icon--hide {
	display: block;
}

.register-field-error {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--color-error);
}

.register-page .form-field.is-invalid input,
.register-page .form-field.is-invalid select {
	border-color: var(--color-error);
}

.register-page .form-field.is-invalid input:focus,
.register-page .form-field.is-invalid select:focus {
	border-color: var(--color-error);
	box-shadow: 0 0 0 3px var(--color-error-light);
}

.register-page .form-field.is-invalid label {
	color: var(--color-error);
}

.register-agreement-group {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}

.register-agreement-group.is-invalid .register-agreement {
	color: var(--color-error);
}

.register-agreement-group.is-invalid input[type="checkbox"] {
	outline: 2px solid var(--color-error);
	outline-offset: 1px;
	border-radius: 3px;
}

.register-agreement-group {
	margin-top: 0.25rem;
}

.register-agreement {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.7rem;
	align-items: start;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--color-text-secondary);
	cursor: pointer;
}

.register-agreement input[type="checkbox"] {
	margin: 0.15rem 0 0;
	width: 1.05rem;
	height: 1.05rem;
	accent-color: var(--color-accent);
	flex-shrink: 0;
}

.register-agreement a {
	color: var(--color-accent-hover);
	font-weight: 600;
	text-decoration: underline;
}

.register-agreement .required {
	color: var(--color-error);
}

.register-form__submit {
	width: 100%;
	margin-top: 0.5rem;
	padding-top: 0.95rem;
	padding-bottom: 0.95rem;
	font-size: 1rem;
	font-weight: 600;
}

.register-card__signin {
	text-align: center;
	font-size: 0.875rem;
	color: var(--color-text-secondary);
	margin: 1.5rem 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--color-border);
}

.register-card__signin a {
	color: var(--color-accent-hover);
	font-weight: 600;
}

.register-page .woocommerce-error,
.register-page .woocommerce-message,
.register-page .woocommerce-info {
	margin-bottom: 1.5rem;
}

/* Complete-account mode (after a Google sign-in): the lead names the
   signed-in address, and the email field is display-only. Everything else
   reuses the create-account rules above. */
.register-card__lead strong {
	color: var(--color-text-primary);
	font-weight: 600;
	overflow-wrap: anywhere;
}

.register-page .form-field input[readonly] {
	background: var(--color-bg-warm);
	border-color: var(--color-border);
	color: var(--color-text-secondary);
	cursor: default;
}

.register-page .form-field input[readonly]:focus {
	border-color: var(--color-border);
	box-shadow: none;
}

.register-card__signin--complete {
	overflow-wrap: anywhere;
}

@media (max-width: 600px) {
	.register-page {
		padding: 1.5rem 1rem 3rem;
	}

	.register-card {
		padding: 1.75rem 1.25rem 1.5rem;
		border-radius: var(--radius-card-sm);
	}

	.register-card__brand .custom-logo {
		height: 38px;
	}

	.register-field-row {
		grid-template-columns: 1fr;
		gap: 1.1rem;
	}
}


/* ==========================================================================
   WooCommerce / system notices — shared styling
   Covers every classic notice WooCommerce prints (.woocommerce-message,
   .woocommerce-error, .woocommerce-info) wherever it appears: product
   added-to-cart, registration / login / account errors, checkout
   validation, coupons, stock messages — plus the notice banners the Cart
   block renders (.wc-block-components-notice-banner). Styling only: the
   markup, wording and role="alert" semantics are WooCommerce's own.
   ========================================================================== */
:root {
	--notice-success-bg: #EEF4F0;
	--notice-success-border: #B9D4C7;
	--notice-error-bg: #fdf6f5;
	--notice-error-border: #efc9c4;
	--notice-info-bg: var(--color-bg-warm);
	--notice-info-border: var(--color-border-strong);
}

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
	position: relative;
	box-sizing: border-box;
	width: auto;
	margin: 0 0 1.5rem;
	padding: 0.75rem 1rem 0.75rem 2.6rem;
	border: 1px solid var(--notice-info-border);
	border-top-width: 1px;
	border-radius: var(--radius-card-sm);
	background: var(--notice-info-bg);
	color: var(--color-text-primary);
	font-family: var(--font-body);
	font-size: 0.9rem;
	line-height: 1.5;
	list-style: none;
	word-wrap: break-word;
}

/* Icon: a brand-coloured SVG mask, replacing the WooCommerce glyph font. */
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
	content: "";
	position: absolute;
	top: 0.85rem;
	left: 1rem;
	width: 1.1rem;
	height: 1.1rem;
	display: block;
	font: 0/0 a;
	background-color: var(--color-text-secondary);
	-webkit-mask: var(--notice-icon) center / contain no-repeat;
	mask: var(--notice-icon) center / contain no-repeat;
}

.woocommerce-message::after,
.woocommerce-error::after,
.woocommerce-info::after {
	content: none;
}

.woocommerce-info {
	--notice-icon: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm-1 6h2v7h-2v-7zm0-3h2v2h-2V7z'/%3E%3C/svg%3E" );
}

.woocommerce-message {
	--notice-icon: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm4.3 5.3 1.4 1.4L11 15.4l-4.2-4.2 1.4-1.4L11 12.6l5.3-5.3z'/%3E%3C/svg%3E" );
	background: var(--notice-success-bg);
	border-color: var(--notice-success-border);
}

.woocommerce-message::before {
	background-color: var(--color-accent);
}

.woocommerce-error {
	--notice-icon: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm-1 3h2v7h-2V7zm0 9h2v2h-2v-2z'/%3E%3C/svg%3E" );
	background: var(--notice-error-bg);
	border-color: var(--notice-error-border);
}

.woocommerce-error::before {
	background-color: var(--color-error);
}

/* Error lists: one line per message, no bullets. */
.woocommerce-error li,
.woocommerce-info li,
.woocommerce-message li {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.woocommerce-error li + li {
	margin-top: 0.3rem !important;
}

.woocommerce-message strong,
.woocommerce-error strong,
.woocommerce-info strong {
	font-weight: 600;
	color: inherit;
}

.woocommerce-message a:not(.button),
.woocommerce-error a:not(.button),
.woocommerce-info a:not(.button) {
	color: var(--color-accent-hover);
	font-weight: 600;
	text-decoration: underline;
}

/* Success / info notices that carry an action ("View cart", "Continue
   shopping"): message and button on one line, button in brand pill style.
   Doubled .button beats WooCommerce's `.woocommerce a.button` reset. */
.woocommerce-message,
.woocommerce-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
}

.woocommerce-message .button.button,
.woocommerce-info .button.button,
.woocommerce-error .button.button {
	float: none;
	order: 2;
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 1.1rem;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--color-accent);
	color: var(--color-text-inverse);
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.woocommerce-message .button.button:hover,
.woocommerce-info .button.button:hover,
.woocommerce-error .button.button:hover {
	background: var(--color-accent-hover);
	color: var(--color-text-inverse);
}

/* Fluid Checkout's inline coupon feedback sits directly under the coupon
   field and is forced to zero padding by the plugin — render it as a
   compact coloured line rather than a boxed notice. */
body .fc-wrapper .fc-coupon-code-messages .woocommerce-error,
body .fc-wrapper .fc-coupon-code-messages .woocommerce-message {
	padding: 0.35rem 0 0.35rem 1.6rem !important;
	margin: 0.25rem 0 0.5rem !important;
	background: transparent;
	border: 0;
	border-radius: 0;
	font-size: 0.85rem;
}

body .fc-wrapper .fc-coupon-code-messages .woocommerce-error::before,
body .fc-wrapper .fc-coupon-code-messages .woocommerce-message::before {
	top: 0.5rem;
	left: 0;
	width: 1rem;
	height: 1rem;
}

body .fc-wrapper .fc-coupon-code-messages .woocommerce-error {
	color: var(--color-error);
}

body .fc-wrapper .fc-coupon-code-messages .woocommerce-message {
	color: var(--color-accent-hover);
}

body .fc-wrapper .fc-coupon-code-messages .fc-coupon-code-message-dismiss {
	font-size: 0.8rem;
	color: var(--color-text-secondary);
	text-decoration: underline;
}

/* Cart block (and any other block-rendered) notice banners. */
.wc-block-components-notice-banner {
	--wc-notice-radius: var(--radius-card-sm);
	box-sizing: border-box;
	align-items: flex-start;
	gap: 0.75rem;
	margin: 0 0 1.25rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--notice-info-border);
	border-radius: var(--radius-card-sm);
	background: var(--notice-info-bg);
	color: var(--color-text-primary);
	font-family: var(--font-body);
	font-size: 0.9rem;
	line-height: 1.5;
}

.wc-block-components-notice-banner > svg {
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	margin: 0.1rem 0 0;
	padding: 0;
	background: transparent;
	fill: var(--color-text-secondary);
}

.wc-block-components-notice-banner.is-success {
	background: var(--notice-success-bg);
	border-color: var(--notice-success-border);
}

.wc-block-components-notice-banner.is-success > svg {
	fill: var(--color-accent);
}

.wc-block-components-notice-banner.is-error {
	background: var(--notice-error-bg);
	border-color: var(--notice-error-border);
}

.wc-block-components-notice-banner.is-error > svg {
	fill: var(--color-error);
}

.wc-block-components-notice-banner.is-warning {
	background: var(--notice-info-bg);
	border-color: var(--notice-info-border);
}

.wc-block-components-notice-banner .wc-block-components-notice-banner__content {
	padding: 0;
	color: inherit;
	font-size: inherit;
}

.wc-block-components-notice-banner .wc-block-components-notice-banner__content a {
	color: var(--color-accent-hover);
	font-weight: 600;
}

.wc-block-components-notice-banner .wc-block-components-button.is-link {
	color: var(--color-text-secondary);
}

.wc-block-components-notice-banner__dismiss {
	color: var(--color-text-muted);
}

/* Snackbar toasts (coupon applied / item removed) — charcoal pill so the
   white icon and text stay readable. */
.wc-block-components-notice-banner.wc-block-components-notice-snackbar,
.wc-block-components-notice-banner.wc-block-components-notice-snackbar.is-info,
.wc-block-components-notice-banner.wc-block-components-notice-snackbar.is-success,
.wc-block-components-notice-banner.wc-block-components-notice-snackbar.is-error {
	background: var(--color-text-primary);
	border-color: var(--color-text-primary);
	color: var(--color-text-inverse);
	box-shadow: var(--shadow-card);
}

.wc-block-components-notice-banner.wc-block-components-notice-snackbar > svg {
	fill: var(--color-text-inverse);
}

.wc-block-components-notice-banner.wc-block-components-notice-snackbar .wc-block-components-notice-banner__content,
.wc-block-components-notice-banner.wc-block-components-notice-snackbar .wc-block-components-notice-banner__dismiss,
.wc-block-components-notice-banner.wc-block-components-notice-snackbar .wc-block-components-button.is-link {
	color: var(--color-text-inverse);
}

/* Inline field validation in the Cart / Checkout blocks (e.g. a coupon that
   does not exist): brand error colour instead of WooCommerce's default red. */
.wc-block-components-validation-error {
	color: var(--color-error);
	font-family: var(--font-body);
}

.wc-block-components-validation-error svg {
	fill: var(--color-error);
}

@media (max-width: 600px) {
	.woocommerce-message,
	.woocommerce-error,
	.woocommerce-info {
		padding: 0.7rem 0.9rem 0.7rem 2.4rem;
		font-size: 0.875rem;
		margin-bottom: 1.25rem;
	}

	.woocommerce-message::before,
	.woocommerce-error::before,
	.woocommerce-info::before {
		left: 0.85rem;
		top: 0.8rem;
	}

	.woocommerce-message .button.button,
	.woocommerce-info .button.button,
	.woocommerce-error .button.button {
		margin-left: 0;
		width: 100%;
	}

	.wc-block-components-notice-banner {
		padding: 0.7rem 0.9rem;
		font-size: 0.875rem;
	}
}


/* ==========================================================================
   Mobile: 16px form fields (audit 2026-09-01, finding M1)
   Anything below 16px makes iOS Safari zoom the viewport on focus and never
   zoom back. Kept in a mobile query so desktop sizing is untouched; this
   block is last in the file so it wins over the base rules above.
   ========================================================================== */
@media (max-width: 767px) {
	.catalog-search__input,
	.form-field input,
	.form-field textarea,
	.form-field select,
	.register-page .form-field input,
	.register-page .form-field select,
	.woocommerce-product-page .quantity .qty,
	.product-sticky-bar__qty input {
		font-size: 16px;
	}
}

/* ==========================================================================
   Mobile: COA table reflows to stacked cards (audit 2026-09-01, finding M2)
   Below 600px the 4-column table used to scroll sideways with Purity and
   Quantity hidden off-screen. Each row becomes a labelled card instead.
   ========================================================================== */
@media (max-width: 600px) {
	.coa-table-wrap {
		overflow-x: visible;
	}

	.coa-table {
		min-width: 0;
	}

	.coa-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.coa-table tr {
		display: block;
		padding: 0.85rem 1.1rem;
		border-bottom: 1px solid var(--color-border);
	}

	.coa-table tr:last-child {
		border-bottom: none;
	}

	.coa-table td {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 1.5rem;
		padding: 0.2rem 0;
		border: none;
		font-size: 0.9375rem;
	}

	.coa-table td::before {
		content: attr(data-label);
		flex-shrink: 0;
		font-size: 0.75rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: var(--color-text-muted);
	}

	.coa-table td:first-child {
		margin-bottom: 0.3rem;
		font-size: 1.0625rem;
		font-weight: 600;
	}

	.coa-table td:first-child::before {
		align-self: center;
	}
}

/* ==========================================================================
   Mobile polish (audit 2026-09-01, findings M4 / M6)
   ========================================================================== */
@media (max-width: 767px) {
	/* M4 — the third claim is dropped at this width so the eyebrow pill sits
	   on one line. Its type/padding now live in the 601-767px block below:
	   this block is later in the file than the phone styles, so leaving them
	   here silently overrode the phone pill's sizing. */
	.hero__badge-extra {
		display: none;
	}

	/* M6 — comfortable touch targets (were 36–40px). */
	.header-icon-btn,
	.menu-toggle {
		width: 2.75rem;
		height: 2.75rem;
	}

	.product-qty__step {
		width: 2.75rem;
		height: 2.75rem;
	}

	.footer-links a {
		display: inline-block;
		padding: 0.45rem 0;
	}

	.footer-links li {
		margin-bottom: 0.35rem;
	}
}

/* Tablet-width eyebrow pill (the phone sizing lives in the <=600px hero
   block). At 10.5px it wrapped to two lines, hence the bump. */
@media (min-width: 601px) and (max-width: 767px) {
	.hero__badge {
		font-size: 0.75rem;
		padding: 0.4rem 0.9rem;
	}
}

/* ==========================================================================
   Shipping offer (inc/shipping.php) — free 2-day tracker, product-page
   shipping line, Cart / Checkout block shipping options.
   ========================================================================== */
.cart-drawer__shipping-msg strong {
	font-weight: 700;
	color: var(--color-text-primary);
}

.cart-drawer__shipping-check {
	display: inline-block;
	margin-left: 0.15rem;
	color: var(--color-accent);
	font-weight: 700;
}

.cart-drawer__shipping-note {
	margin: 0.55rem 0 0;
	font-size: 0.75rem;
	line-height: 1.45;
	color: var(--color-text-muted);
}

/* Almost there: "Only $X more" carries the weight. Unlocked: the headline
   swaps to the confirmation and the bar fills. The green stays the same
   accent in every state (`.is-near`, `.is-unlocked`) so the tracker never
   looks like it changed colour when the threshold is crossed. */
.cart-drawer__shipping-lead {
	font-weight: 700;
	color: var(--color-text-primary);
}

/* Cart page — the shipping methods as selectable rows under the tracker
   (inc/shipping.php + main.js). The upgrade carries its own price so the
   $19.95 is a number the customer can weigh against adding another vial;
   once the threshold is met that price is struck through and the row reads
   FREE. Same visual language as the checkout's rate rows above. */
.cart-shipping-choice {
	margin: 0 0 1.5rem;
	padding: 0;
	border: 0;
	min-width: 0;
}

.cart-shipping-choice__legend {
	padding: 0;
	margin-bottom: 0.6rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

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

.cart-shipping-choice__option {
	margin: 0 0 0.625rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card-sm);
	background: var(--color-surface);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.cart-shipping-choice__option:last-child {
	margin-bottom: 0;
}

.cart-shipping-choice__option:hover {
	border-color: var(--color-border-strong);
}

.cart-shipping-choice__option.is-selected {
	border-color: var(--color-accent);
	background: #EEF4F0;
}

.cart-shipping-choice__label {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	padding: 0.85rem 0.95rem;
	cursor: pointer;
}

.cart-shipping-choice__input {
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	margin: 0.15rem 0 0;
	accent-color: var(--color-accent);
	cursor: pointer;
}

.cart-shipping-choice__input:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.cart-shipping-choice__body {
	flex: 1 1 auto;
	min-width: 0;
}

.cart-shipping-choice__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.15rem 0.5rem;
}

.cart-shipping-choice__name {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-text-primary);
	white-space: nowrap;
}

/* Right-aligned beside the name, and onto its own line rather than
   breaking the method name apart when the column is too narrow. */
.cart-shipping-choice__price {
	flex: 0 0 auto;
	margin-left: auto;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--color-text-primary);
	white-space: nowrap;
}

.cart-shipping-choice__free {
	color: var(--color-accent);
	letter-spacing: 0.02em;
}

.cart-shipping-choice__meta {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--color-text-muted);
}

.cart-shipping-choice__note:empty {
	display: none;
}

.cart-shipping-choice__note {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--color-text-muted);
}

/* Threshold met: the note is the payoff line, so it carries the accent —
   the same green as the tracker above it, in every state. */
.cart-shipping-choice__option.is-free .cart-shipping-choice__note {
	color: var(--color-accent);
	font-weight: 600;
}

/* Waiting on the Store API to record the choice. */
.cart-shipping-choice.is-busy {
	opacity: 0.55;
	pointer-events: none;
}

@media (max-width: 600px) {
	.cart-shipping-choice__label {
		padding: 0.8rem 0.85rem;
	}
}

/* Product page — one quiet line under the purchase controls. */
/* Accepted payment methods strip (price card in functions.php). The image
   background is pre-matched to the card colour, so no panel or border. */
.product-price-card__payments {
	margin: 0.875rem 0 0;
	line-height: 0;
}

.product-price-card__payments img {
	display: block;
	width: 27%;
	height: auto;
	margin-inline: auto;
}

.product-price-card__benefits {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin: 1rem 0 0;
	padding: 0.9rem 0 0;
	border-top: 1px solid var(--color-border);
	list-style: none;
}

.product-price-card__benefit {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	min-width: 0;
	margin: 0;
	padding: 0;
}

/* Second benefit sits flush with the card's right edge. */
.product-price-card__benefit + .product-price-card__benefit {
	justify-self: end;
}

/* Plain icon aligned to the title's first line — no badge, no divider. */
.product-price-card__benefit-icon {
	display: inline-flex;
	flex-shrink: 0;
	margin-top: 0.05rem;
	color: var(--color-accent);
}

.product-price-card__benefit-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.3;
}

.product-price-card__benefit-title {
	color: var(--color-text-primary);
	font-size: 0.8125rem;
	font-weight: 500;
}

.product-price-card__benefit-sub {
	color: var(--color-text-muted);
	font-size: 0.75rem;
}

/* --- Purchase box, desktop only ------------------------------------------
   Compacts the card carrying the name, price, stepper and buttons into a
   single control: the stepper and Add to Cart share one row and one height,
   Buy It Now sits directly under them, and the card takes the same 12px
   radius and density as the quantity cards above. Placed after every rule
   it overrides, and wrapped in the product page's own 901px desktop
   breakpoint, so the stacked mobile layout is untouched. */
@media (min-width: 901px) {
	.product-price-card {
		--purchase-control-h: 2.75rem;
		padding: 1.15rem 1.15rem 1rem;
		border-radius: var(--radius-card-sm);
	}

	.product-price-card__row {
		margin-bottom: 0.85rem;
	}

	.product-price-card__info,
	.product-price-card__price-block {
		gap: 0.15rem;
	}

	/* Simple products put the controls straight in form.cart; variable ones
	   nest them in WooCommerce's variation container. Both become the same
	   two-column grid. */
	.product-price-card form.cart:not(.variations_form),
	.product-price-card .woocommerce-variation-add-to-cart {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		column-gap: 0.5rem;
		row-gap: 0.4rem;
	}

	.product-price-card form.cart input[type="hidden"] {
		display: none;
	}

	/* One bordered group so the stepper reads as a single control the same
	   height as the button beside it. */
	.product-price-card .product-qty {
		grid-column: 1;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: nowrap;
		gap: 0;
		height: var(--purchase-control-h);
		margin-bottom: 0;
		border: 1.5px solid var(--color-border-strong);
		border-radius: var(--radius-pill);
		background: var(--color-bg);
		overflow: hidden;
	}

	/* The caption is redundant beside the stepper; the input keeps its own
	   screen-reader label and aria-label. */
	.product-price-card .product-qty__label {
		display: none;
	}

	.product-price-card .product-qty__step {
		width: 2.25rem;
		height: 100%;
		border: 0;
		border-radius: 0;
		background: none;
	}

	.product-price-card .product-qty__step:hover {
		background: var(--color-bg-warm);
		border: 0;
	}

	.product-price-card .quantity {
		height: 100%;
	}

	.product-price-card .quantity .qty {
		width: 2.25rem;
		height: 100%;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		font-weight: 600;
	}

	.product-price-card form.cart .single_add_to_cart_button.button.alt {
		grid-column: 2;
		width: 100%;
		height: var(--purchase-control-h);
		padding: 0 1.25rem;
	}

	.product-price-card .product-price-card__benefits {
		margin-top: 0.85rem;
		padding-top: 0.8rem;
	}
}

/* Checkout: tracker sits at the top of the shipping-method step. */
#checkout-shipping-progress {
	margin: 0 0 1.25rem;
	padding: 1rem 1.125rem 0.95rem;
	background: var(--color-bg-warm);
	border-radius: var(--radius-card-sm);
}

#checkout-shipping-progress .cart-drawer__shipping-msg {
	font-size: 0.9375rem;
}

/* Cart / Checkout block shipping options as selectable rows. The block
   renders name + price on the first line and the delivery estimate +
   our server-written note beneath; this only dresses that structure. */
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__option {
	margin: 0 0 0.625rem;
	padding: 0.95rem 1rem 0.95rem 2.75rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card-sm);
	background: var(--color-bg);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.wc-block-components-shipping-rates-control .wc-block-components-radio-control__option:last-child {
	margin-bottom: 0;
}

.wc-block-components-shipping-rates-control .wc-block-components-radio-control__option:hover {
	border-color: var(--color-border-strong);
}

.wc-block-components-shipping-rates-control .wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__option:has(> input:checked) {
	border-color: var(--color-accent);
	background: #EEF4F0;
}

.wc-block-components-shipping-rates-control .wc-block-components-radio-control__option::before,
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__option::after {
	left: 1rem;
}

.wc-block-components-shipping-rates-control .wc-block-components-radio-control__input {
	left: 1rem;
}

.wc-block-components-shipping-rates-control .wc-block-components-radio-control__label {
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--color-text-primary);
}

.wc-block-components-shipping-rates-control .wc-block-components-radio-control__secondary-label {
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--color-text-primary);
	white-space: nowrap;
}

.wc-block-components-shipping-rates-control .wc-block-components-radio-control__description,
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__secondary-description {
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--color-text-muted);
}

/* "$19.95" struck beside "Free" once the threshold is met (main.js). */
.medicina-list-price {
	margin-right: 0.35rem;
	font-weight: 500;
	color: var(--color-text-muted);
}

/* Free 2nd Day Air: the note under the option reads in the accent green. */
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__option.is-two-day .medicina-list-price ~ * {
	color: var(--color-accent-hover);
}

@media (max-width: 600px) {
	.wc-block-components-shipping-rates-control .wc-block-components-radio-control__option {
		padding: 0.85rem 0.875rem 0.85rem 2.5rem;
	}

	.wc-block-components-shipping-rates-control .wc-block-components-radio-control__option::before,
	.wc-block-components-shipping-rates-control .wc-block-components-radio-control__option::after,
	.wc-block-components-shipping-rates-control .wc-block-components-radio-control__input {
		left: 0.875rem;
	}

	#checkout-shipping-progress {
		padding: 0.875rem 0.9375rem 0.8rem;
	}
}

/* Fluid Checkout shipping-method step: estimate + note under each option,
   explicit FREE, struck list price once the threshold is met. */
.woocommerce ul#shipping_method .shipping-method__option .shipping-method__option-description {
	margin-top: 0.2rem;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--color-text-muted);
}

.shipping-method__estimate + .shipping-method__note::before {
	content: " · ";
	color: var(--color-border-strong);
}

.shipping-method__note--free {
	color: var(--color-accent-hover);
	font-weight: 600;
}

.woocommerce ul#shipping_method .shipping-method__option-price .shipping-method__free {
	font-weight: 700;
	color: var(--color-accent-hover);
	letter-spacing: 0.02em;
}

.woocommerce ul#shipping_method .shipping-method__option-price {
	white-space: nowrap;
}

.woocommerce ul#shipping_method .shipping-method__option-price .medicina-list-price {
	margin-right: 0.35rem;
	font-weight: 500;
	color: var(--color-text-muted);
}

.fc-shipping-method__packages #checkout-shipping-progress {
	margin-bottom: 1rem;
}

@media (max-width: 600px) {
	/* Benefits: a little tighter so both columns keep one-line text. */
	.product-price-card__benefits {
		gap: 0.75rem;
	}

	.product-price-card__benefit {
		gap: 0.4rem;
	}

	.shipping-method__estimate + .shipping-method__note::before {
		content: "";
		display: block;
	}
}


/* ==========================================================================
   Policies page (template-policies.php) — editorial legal layout
   --------------------------------------------------------------------------
   Everything here is scoped to the policies template (body class or a
   `.policies-*` hook) so no other page is affected. Layout: a compact intro,
   an "On this page" index that becomes a sticky sidebar from 960px up, and a
   single reading column (max ~50rem) for the policy text itself.
   ========================================================================== */

/* --- Intro ------------------------------------------------------------- */
body.page-template-template-policies-php .page-header--policies {
	padding-top: 2.75rem;
	padding-bottom: 2rem;
	margin-bottom: 2.5rem;
}

.page-header--policies .page-header__eyebrow {
	margin: 0 0 0.75rem;
	color: var(--color-accent);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.2;
}

.page-header--policies .page-header__title {
	font-size: 2.5rem;
	font-weight: 700;
	margin-bottom: 0.75rem;
}

.page-header--policies .page-header__subtitle {
	font-size: 1.0625rem;
	line-height: 1.6;
	max-width: 40rem;
	margin: 0;
}

/* --- Layout ------------------------------------------------------------ */
.policies-page-content {
	padding-bottom: 5rem;
}

.policies-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2.5rem;
	align-items: start;
}

.policies-sidebar,
.policies-doc {
	min-width: 0;
}

.policies-doc {
	max-width: 50rem;
}

/* --- "On this page" index ---------------------------------------------- */
.policies-nav {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card-sm);
	overflow: hidden;
}

.policies-nav__label {
	margin: 0;
	padding: 0.9rem 1.1rem 0.7rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

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

.policies-nav__item {
	border-top: 1px solid var(--color-border);
}

.policies-nav__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.95rem 1.1rem;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.35;
	color: var(--color-text-primary);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.policies-nav__text {
	min-width: 0;
}

.policies-nav__arrow {
	flex: 0 0 auto;
	color: var(--color-text-muted);
	transition: transform 0.15s ease, color 0.15s ease;
}

.policies-nav__link:hover {
	background: rgba(21, 101, 75, 0.06);
	color: var(--color-accent-hover);
}

.policies-nav__link:hover .policies-nav__arrow {
	color: var(--color-accent);
	transform: translateX(3px);
}

.policies-nav__link:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: -2px;
	background: rgba(21, 101, 75, 0.06);
	color: var(--color-accent-hover);
}

.policies-nav__link.is-active {
	color: var(--color-accent-hover);
	font-weight: 600;
	box-shadow: inset 3px 0 0 var(--color-accent);
}

.policies-nav__link.is-active .policies-nav__arrow {
	color: var(--color-accent);
}

/* --- Reading column ---------------------------------------------------- */
.policies-doc {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--color-text-primary);
	text-align: left;
	overflow-wrap: anywhere;
}

.policies-section {
	scroll-margin-top: 6.5rem;
}

.policies-section + .policies-section {
	margin-top: 4rem;
	padding-top: 3.5rem;
	border-top: 1px solid var(--color-border);
}

.policies-section__title {
	position: relative;
	font-size: 1.875rem;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0 0 0.5rem;
	padding-top: 1rem;
}

.policies-section__title::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 2.5rem;
	height: 3px;
	border-radius: 2px;
	background: var(--color-accent);
}

.policies-section__meta {
	margin: 0 0 2rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-text-muted);
}

.policies-doc h3 {
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	margin: 2.25rem 0 0.75rem;
}

.policies-section__meta + h3 {
	margin-top: 0;
}

.policies-doc p {
	margin: 0 0 1.1rem;
}

.policies-doc .policies-lead {
	font-weight: 600;
	color: var(--color-text-primary);
	margin: 1.4rem 0 0.5rem;
}

.policies-doc ul {
	list-style: disc;
	margin: 0 0 1.25rem;
	padding-left: 1.4rem;
}

.policies-doc li {
	margin: 0 0 0.5rem;
	padding-left: 0.2rem;
}

.policies-doc li::marker {
	color: var(--color-accent);
}

.policies-doc a {
	color: var(--color-accent-hover);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color 0.15s ease;
}

.policies-doc a:hover {
	color: var(--color-accent);
}

.policies-doc a:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* --- Restrained callouts (wrappers only; wording is untouched) --------- */
.policies-callout {
	background: #EEF4F0;
	border: 1px solid #C4DBD0;
	border-radius: var(--radius-card-sm);
	padding: 1.1rem 1.35rem;
	margin: 0 0 1.25rem;
}

.policies-callout > :last-child {
	margin-bottom: 0;
}

.policies-callout ul {
	margin-bottom: 0;
}

.policies-callout li:last-child {
	margin-bottom: 0;
}

/* --- Support CTA ------------------------------------------------------- */
.policies-support {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem 2rem;
	flex-wrap: wrap;
	margin-top: 4rem;
	padding: 1.75rem 2rem;
	background: var(--color-bg-warm);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card-sm);
}

.policies-support__body {
	flex: 1 1 20rem;
	min-width: 0;
}

.policies-support__title {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 0.35rem;
}

.policies-support__text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--color-text-secondary);
}

.policies-support__btn {
	flex: 0 0 auto;
}

/* Keep the CTA's button in the brand green on hover (the reading-column
   link rule above would otherwise recolour it). */
.policies-doc .policies-support__btn,
.policies-doc .policies-support__btn:hover {
	color: var(--color-text-inverse);
	text-decoration: none;
	font-weight: 500;
}

/* --- Desktop: sticky sidebar + reading column -------------------------- */
@media (min-width: 960px) {
	.policies-layout {
		grid-template-columns: 15.5rem minmax(0, 50rem);
		gap: 4.5rem;
	}

	.policies-sidebar {
		position: sticky;
		top: 6.5rem;
	}

	.policies-nav__link {
		padding: 0.85rem 1rem;
		font-size: 0.9375rem;
	}
}

/* --- Phones ------------------------------------------------------------ */
@media (max-width: 600px) {
	body.page-template-template-policies-php .page-header--policies {
		padding-top: 2rem;
		padding-bottom: 1.5rem;
		margin-bottom: 2rem;
	}

	.page-header--policies .page-header__title {
		font-size: 2rem;
	}

	.page-header--policies .page-header__subtitle {
		font-size: 1rem;
	}

	.policies-layout {
		gap: 2rem;
	}

	.policies-nav__link {
		padding: 1rem 1rem;
	}

	.policies-section {
		scroll-margin-top: 5.75rem;
	}

	.policies-section + .policies-section {
		margin-top: 3rem;
		padding-top: 2.5rem;
	}

	.policies-section__title {
		font-size: 1.5rem;
	}

	.policies-doc h3 {
		font-size: 1.0625rem;
		margin-top: 1.9rem;
	}

	.policies-callout {
		padding: 1rem 1.1rem;
	}

	.policies-support {
		margin-top: 3rem;
		padding: 1.5rem 1.25rem;
	}

	.policies-support__btn {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.policies-nav__link,
	.policies-nav__arrow,
	.policies-doc a {
		transition: none;
	}

	.policies-nav__link:hover .policies-nav__arrow {
		transform: none;
	}
}

/* ==========================================================================
   Research Library hub (template-research.php, page 319)
   --------------------------------------------------------------------------
   Scoped to the research template / `.research-hub` so nothing else moves.
   Shares the Policies page's editorial rhythm: compact intro, ~52rem reading
   column, hairline section breaks, and a two-column index of reference-page
   cards where the whole card is the link.
   ========================================================================== */
body.page-template-template-research-php .page-header--research {
	padding-top: 2.75rem;
	padding-bottom: 2rem;
	margin-bottom: 2.5rem;
}

.page-header--research .page-header__eyebrow {
	margin: 0 0 0.75rem;
	color: var(--color-accent);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.2;
}

.page-header--research .page-header__title {
	font-size: 2.5rem;
	font-weight: 700;
	margin-bottom: 0;
}

.research-hub {
	padding-bottom: 5rem;
}

.research-hub__inner {
	max-width: 52rem;
	min-width: 0;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--color-text-primary);
	overflow-wrap: anywhere;
}

.research-hub__inner p {
	margin: 0 0 1.1rem;
}

.research-hub__lead {
	font-size: 1.125rem;
	line-height: 1.65;
	color: var(--color-text-secondary);
}

.research-hub__notice {
	background: #EEF4F0;
	border: 1px solid #C4DBD0;
	border-radius: var(--radius-card-sm);
	padding: 1.1rem 1.35rem;
	margin: 1.5rem 0 0;
	font-size: 0.9375rem;
}

.research-hub__notice > :last-child {
	margin-bottom: 0;
}

.research-hub__section {
	margin-top: 3.25rem;
	padding-top: 2.75rem;
	border-top: 1px solid var(--color-border);
}

.research-hub__section h2 {
	position: relative;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	margin: 0 0 1rem;
	padding-top: 0.875rem;
}

.research-hub__section h2::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 2.5rem;
	height: 3px;
	border-radius: 2px;
	background: var(--color-accent);
}

.research-hub__section--note p {
	color: var(--color-text-secondary);
}

/* --- Reference-page index ---------------------------------------------- */
.research-index {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.research-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.35rem 3rem 1.35rem 1.4rem;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card-sm);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.research-card::after {
	content: "\2192";
	position: absolute;
	top: 1.3rem;
	right: 1.25rem;
	font-size: 1rem;
	line-height: 1.35;
	color: var(--color-text-muted);
	transition: color 0.15s ease, transform 0.15s ease;
}

.research-card__title {
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	margin: 0;
}

/* Beats the page-319 link rule (body.page-id-319 .page-content a, 0-2-2) so the
   card title reads as the site's own text colour, and the whole card is the
   hit area via the stretched pseudo-element. */
.research-hub .research-index .research-card__title a {
	color: var(--color-text-primary);
	text-decoration: none;
	transition: color 0.15s ease;
}

.research-hub .research-index .research-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.research-hub .research-index .research-card__title a:focus-visible {
	outline: none;
}

.research-card:focus-within {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.research-card__text {
	margin: 0 !important;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--color-text-secondary);
}

.research-card:hover {
	border-color: #B9D4C7;
	background: rgba(21, 101, 75, 0.04);
}

.research-hub .research-card:hover .research-card__title a,
.research-hub .research-card:focus-within .research-card__title a {
	color: var(--color-accent-hover);
}

.research-card:hover::after,
.research-card:focus-within::after {
	color: var(--color-accent);
	transform: translateX(3px);
}

/* --- Phones ------------------------------------------------------------ */
@media (max-width: 767px) {
	.research-index {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 600px) {
	body.page-template-template-research-php .page-header--research {
		padding-top: 2rem;
		padding-bottom: 1.5rem;
		margin-bottom: 2rem;
	}

	.page-header--research .page-header__title {
		font-size: 2rem;
	}

	.research-hub__lead {
		font-size: 1.0625rem;
	}

	.research-hub__notice {
		padding: 1rem 1.1rem;
	}

	.research-hub__section {
		margin-top: 2.5rem;
		padding-top: 2.25rem;
	}

	.research-hub__section h2 {
		font-size: 1.3125rem;
	}

	.research-card {
		padding: 1.15rem 2.75rem 1.15rem 1.15rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.research-card,
	.research-card::after,
	.research-hub .research-card__title a {
		transition: none;
	}

	.research-card:hover::after,
	.research-card:focus-within::after {
		transform: none;
	}
}

/* ==========================================================================
   Guest checkout — research qualification (inc/checkout-qualification.php)

   The three compliance fields sit in WooCommerce's `order` field group, which
   is what Fluid Checkout renders as its notes substep. These rules make that
   group read as a deliberate step rather than as extra order notes, and match
   the register form's treatment of the same three fields so a customer sees
   one house style whichever path they came through.
   ========================================================================== */
.medicina-qual-intro {
	margin: 0 0 1.1rem;
}

.medicina-qual-intro__title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-text-primary);
	margin: 0 0 0.3rem;
}

.medicina-qual-intro__text {
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--color-text-secondary);
	margin: 0;
	max-width: 34rem;
}

/* The checkout's own field styling handles the selects; this only tightens
   the rhythm between the three rows so they group visually. */
.form-row.medicina-qual-row {
	margin-bottom: 1rem;
}

/* Checkbox + long attestation. WooCommerce renders the label after the
   input, so the grid puts the box in a fixed first column and lets the text
   wrap in the second instead of hanging under the checkbox. */
.form-row.medicina-qual-agreement label,
.form-row.medicina-qual-agreement .woocommerce-form__label-for-checkbox {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.7rem;
	align-items: start;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--color-text-secondary);
	cursor: pointer;
}

.form-row.medicina-qual-agreement input[type="checkbox"] {
	margin: 0.15rem 0 0;
	width: 1.05rem;
	height: 1.05rem;
	accent-color: var(--color-accent);
	flex-shrink: 0;
}

.form-row.medicina-qual-agreement a {
	color: var(--color-accent);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   "Save your details for next time" on the order-received page
   ----------------------------------------------------------------------- */
.medicina-save-account {
	background: var(--color-bg-warm);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	padding: 1.5rem 1.75rem;
	margin: 2rem 0;
	max-width: 38rem;
}

.medicina-save-account__title {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--color-text-primary);
	margin: 0 0 0.4rem;
}

.medicina-save-account__text {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--color-text-secondary);
	margin: 0 0 1.1rem;
}

.medicina-save-account__form {
	margin: 0;
}

.medicina-save-account--done {
	background: var(--color-accent-light);
	border-color: var(--color-accent);
}

@media (max-width: 599px) {
	.medicina-save-account {
		padding: 1.15rem 1.15rem;
	}
}

/* Admin order screen block is styled by wp-admin; only the spacing is ours. */
.medicina-admin-qual {
	clear: both;
	padding-top: 1rem;
}

/* --------------------------------------------------------------------------
   Cart line items: name, variant, quantity, price — nothing else.

   WooCommerce Blocks renders a product's short description under the price,
   and falls back to the *full* description when the short one is empty. Only
   6 of 33 products have a short description, so for most simple products the
   cart was clamping the first three lines of a 5,000-character research page
   — which starts with its own H2, so rows read "GLOW Peptide Blend Overview"
   as grey body text. Variable products were unaffected (their slot holds the
   variation attributes instead), so a mixed cart looked inconsistent too.

   Only the description is hidden. .wc-block-components-product-details, the
   sibling that carries "Size: 10mg", is untouched.
   ----------------------------------------------------------------------- */
.wp-block-woocommerce-cart .wc-block-components-product-metadata__description {
	display: none;
}

/* Blend composition beside the size pill in the buy box. Blends carry one
   combined strength — 70mg, 80mg — so without this the split existed only in
   the long description.

   Each constituent is a tag, deliberately rounder and flatter than the Size
   pill next to it: Size is a control, this is information, and they should not
   look like the same kind of thing. Taking the rest of the row lets four
   constituents wrap inside the block instead of pushing the whole block onto
   its own line, which is why KLOW sat below the pill and GLOW beside it. */
.product-composition {
	flex: 1 1 16rem;
	min-width: 0;
}

.product-composition__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.product-composition__item {
	display: inline-flex;
	align-items: baseline;
	gap: 0.3rem;
	padding: 0.34rem 0.7rem;
	border-radius: var(--radius-pill);
	background: var(--color-bg-warm);
	box-shadow: inset 0 0 0 1px var(--color-border);
	font-size: 0.8125rem;
	line-height: 1.35;
	white-space: nowrap;
}

.product-composition__name {
	font-weight: 600;
	color: var(--color-text-primary);
}

.product-composition__dose {
	color: var(--color-text-secondary);
	font-variant-numeric: tabular-nums;
}

/* Below the summary column's two-column comfort the tags read better on
   their own line than squeezed beside the pill. */
@media (max-width: 480px) {
	.product-composition {
		flex-basis: 100%;
	}
}

/* ==========================================================================
   "Researchers also add" — cart cross-sells (inc/cart-cross-sells.php)

   One component, two hosts: a narrow column inside the cart drawer and a
   full-width block under the cart page's filled-cart block. Tiles are rows
   rather than cards so three of them fit the drawer without scrolling, and so
   the row never competes with the product cards elsewhere on the site.
   ========================================================================== */
.cart-suggestions {
	border-top: 1px solid var(--color-border);
	padding-top: 1.1rem;
	margin-top: 1.25rem;
}

.cart-suggestions__title {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin: 0 0 0.75rem;
}

.cart-suggestions__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.cart-suggestion {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.cart-suggestion__media {
	flex-shrink: 0;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--radius-card-sm);
	background: var(--color-surface);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.cart-suggestion__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 0.2rem;
}

.cart-suggestion__info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.cart-suggestion__name {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-text-primary);
	text-decoration: none;
	/* Names like "CJC-1295 (No DAC) + Ipamorelin" would otherwise push the
	   Add button out of the drawer's width. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cart-suggestion__name:hover {
	color: var(--color-accent-hover);
}

.cart-suggestion__price {
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
	font-variant-numeric: tabular-nums;
}

/* Soft accent, matching the homepage's secondary CTA: this is an optional
   addition, not the primary action of the page it sits on. */
.cart-suggestion__add {
	flex-shrink: 0;
	padding: 0.4rem 0.9rem;
	border: none;
	border-radius: var(--radius-pill);
	background: var(--color-accent-light);
	color: var(--color-accent-hover);
	box-shadow: inset 0 0 0 1.5px var(--color-accent);
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.cart-suggestion__add:hover {
	background: var(--color-accent);
	color: var(--color-text-inverse);
}

.cart-suggestion__add.is-busy,
.cart-suggestion__add:disabled {
	opacity: 0.55;
	cursor: default;
}

/* Cart page: the row sits inside the items column, directly under the last
   product, so it is in view while someone is still reviewing the cart. That
   column is roughly half the page, so the tiles stay stacked rows rather than
   three across — at this width three columns would leave ~110px for a name
   like "CJC-1295 (No DAC) + Ipamorelin" and truncate most of it away. */
.cart-suggestions--cart {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--color-border);
}

/* In the drawer the items list already ends in a rule and 1.75rem of space,
   so the section's own border-top and margin stacked into two hairlines with
   a trough between them. The list's divider is the one that stays. */
.cart-suggestions--drawer {
	border-top: none;
	margin-top: 0;
	padding-top: 0;
}

/* Subtotal was sitting directly against the last suggestion. Give the footer
   its own rule and room so the total reads as the summary of the cart rather
   than as a fourth line of the suggestion list. */
.cart-drawer__footer {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--color-border);
}

/* Strength beside the price on a suggestion tile. pa_strength carries the
   dose for single compounds and the combined total for blends, so "70mg"
   against GLOW is the whole blend, not one constituent. */
.cart-suggestion__meta {
	display: flex;
	align-items: baseline;
	gap: 0.35rem;
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
}

.cart-suggestion__strength {
	font-variant-numeric: tabular-nums;
}

.cart-suggestion__sep {
	color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Cart page quantity stepper

   WooCommerce Blocks ships this control almost unstyled, so next to the
   drawer's stepper it looked unfinished. More importantly the minus button is
   disabled at a quantity of one — correct, since the trash icon is how you
   remove a line — but it rendered at full opacity in the same colour as the
   plus, so it read as broken rather than as unavailable.
   ----------------------------------------------------------------------- */
/* One rule between the last product and the suggestions, not three: the row
   carried a border-bottom, the table carried one, and the suggestions section
   added a third. The suggestions' own border is the one that stays. */
.wp-block-woocommerce-cart table.wc-block-cart-items {
	border-bottom: none;
}

.wp-block-woocommerce-cart .wc-block-cart-items__row:last-child {
	border-bottom: none;
}

/* ...which WooCommerce Blocks then overrides on phones, leaving the trailing
   rule back under the last product and a second one on .cart-suggestions
   24px below it — the double line. Blocks' own selector is
   `.is-mobile table.wc-block-cart-items:not(.wc-block-mini-cart-items):not(:last-child)
   .wc-block-cart-items__row` at (0,5,1), so the rule above at (0,3,0) never
   applies there. Same long-selector approach the cart's mobile grid rules
   already use, plus the wrapper class to clear the tie. Desktop is untouched:
   .is-mobile / .is-small / .is-medium are container-width classes Blocks only
   sets on narrow layouts. */
.wp-block-woocommerce-cart .wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-items__row:last-child,
.wp-block-woocommerce-cart .wc-block-cart.is-small table.wc-block-cart-items .wc-block-cart-items__row:last-child,
.wp-block-woocommerce-cart .wc-block-cart.is-medium table.wc-block-cart-items .wc-block-cart-items__row:last-child {
	border-bottom: none;
}

.cart-suggestions--cart {
	border-top: 1px solid var(--color-border);
	padding-top: 1.25rem;
}

/* Result count beside the sort control. Pairs with the sort so the two pieces
   of "what am I looking at" sit together, and reads as a label rather than a
   figure competing with the product prices below. */
.catalog-search-row__meta {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-shrink: 0;
}

.catalog-count {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--color-text-muted);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 599px) {
	.catalog-search-row__meta {
		width: 100%;
		justify-content: space-between;
		gap: 0.75rem;
	}
}

/* ==========================================================================
   Phone-only ordering fixes
   Both blocks below reorder existing markup at phone widths only; nothing
   above the breakpoint is touched, and no element is hidden or restyled.
   ========================================================================== */

/* Home: products were 1,495px down — past the hero, the research notice and
   the lab photo strip — so the shop began two screens into the page. Lift
   "Researchers' Favorites" to sit directly under the hero. The notice and the
   lab strip keep their order relative to each other, just below it.

   The hero itself is deliberately left alone: its phone treatment is already
   tuned (4:3 photo band, 2x2 trust row) with the fold in mind. */
@media (max-width: 767px) {
	.home #main-content {
		display: flex;
		flex-direction: column;
	}

	/* Everything not named below keeps its source order after the four. */
	.home #main-content > * {
		order: 5;
	}

	.home #main-content > .hero {
		order: 1;
	}

	.home #main-content > .favorites-section {
		order: 2;
	}

	.home #main-content > .research-notice-section {
		order: 3;
	}

	.home #main-content > .real-life-section {
		order: 4;
	}
}

/* Contact: the page opened with a four-field form while the phone number and
   the Text Us button — what someone on a phone actually reaches for — sat
   ~1,650px below it. display:contents lets the help column's children join
   the page column directly, so only the "Talk to a person" card moves up;
   the FAQ and COA cards stay where they were, under the form. */
@media (max-width: 767px) {
	.contact-layout {
		display: flex;
		flex-direction: column;
		gap: 1.25rem;
		/* The two-column rule sets align-items:start and justify-content:center
		   for the grid. In a column flex container those stop the children
		   filling the width, so both are reset here. */
		align-items: stretch;
		justify-content: flex-start;
	}

	.contact-form-panel {
		max-width: none;
	}

	.contact-help-list {
		display: contents;
	}

	.contact-direct {
		order: -1;
	}

	/* Long address in a narrow card: break only when it must, and never
	   leave a fragment like "…medicinalabs.c / om". The <wbr> after the @
	   in the template gives it a sane place to break first. */
	.contact-channel__value {
		overflow-wrap: break-word;
		word-break: normal;
		hyphens: none;
	}
}


/* WooCommerce's add-to-cart row (.woocommerce-variation-add-to-cart — a
   flex row on mobile, a two-column grid on desktop) is stacked so the Add
   to cart button takes the full row, matching the simple-product form. */
.woocommerce-product-page .woocommerce-variation-add-to-cart,
.woocommerce-product-page .quantity {
	flex-wrap: wrap;
}

.woocommerce-product-page .woocommerce-variation-add-to-cart > * {
	grid-column: 1 / -1;
	width: 100%;
}

.cart-drawer__item-price {
	flex-shrink: 0;
	white-space: nowrap;
}

/* ------------------------------------------------------------------------
 * "Complete your kit" add-on card
 * ---------------------------------------------------------------------- */
.cart-kit__title {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-accent-hover);
}

.cart-kit__title::before,
.cart-kit__title::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--color-border);
}

.cart-kit__card {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.75rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card-sm);
	background: var(--color-bg);
}

.cart-kit__media {
	flex-shrink: 0;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: var(--radius-card-sm);
	overflow: hidden;
	background: var(--color-surface);
}

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

.cart-kit__info {
	flex: 1;
	min-width: 0;
}

.cart-kit__name {
	display: block;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--color-text-primary);
	text-decoration: none;
}

.cart-kit__desc {
	margin: 0.15rem 0 0;
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cart-kit__add {
	padding: 0.55rem 1rem;
	background: var(--color-accent);
	color: var(--color-text-inverse);
	box-shadow: none;
	font-weight: 700;
	white-space: nowrap;
}

.cart-kit__add:hover {
	background: var(--color-accent-hover);
}

.cart-kit__add .woocommerce-Price-amount {
	font-weight: 700;
}

.cart-kit--cart {
	margin: 1.5rem 0 0;
}


/* COA pending state */
.coa-pending {
	max-width: 44rem;
	margin: 0 auto 2rem;
	padding: 1.75rem 2rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	background: var(--color-bg-warm);
	text-align: center;
}

.coa-pending__badge {
	display: inline-block;
	margin-bottom: 0.75rem;
	padding: 0.3rem 0.85rem;
	border-radius: var(--radius-pill);
	background: var(--color-accent-light);
	color: var(--color-accent-hover);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.coa-pending__title {
	margin: 0 0 0.6rem;
	font-size: 1.25rem;
	color: var(--color-text-primary);
}

.coa-pending__text {
	margin: 0 0 0.5rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--color-text-secondary);
}

.coa-pending__text a {
	color: var(--color-accent-hover);
	font-weight: 600;
}

.product-coa-badge--pending {
	cursor: default;
}

.product-coa-badge--pending:hover {
	transform: none;
	box-shadow: var(--shadow-card);
}

.product-coa-badge--pending .product-coa-badge__preview {
	color: var(--color-text-muted);
}

.product-coa-badge__status {
	display: inline-block;
	margin-left: 0.3rem;
	padding: 0.1rem 0.45rem;
	border-radius: var(--radius-pill);
	background: var(--color-bg-warm-strong);
	color: var(--color-text-secondary);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Kit card in the drawer: the items list already ends in a rule, so no
   second hairline above the card; and the cross-sell row that follows was
   written with margin-top: 0 for sitting directly under the items list, so
   give it its room back when the kit card is in between. */
.cart-kit--drawer {
	border-top: none;
	margin-top: 0;
	padding-top: 0;
}

.cart-kit--drawer + .cart-suggestions--drawer {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--color-border);
}

/* ------------------------------------------------------------------------
 * Quantity beside the size pills (2026-09-21). The stepper left the price
 * card (and the "One-time" caption went with it); it now sits at the right
 * end of .product-options-row as a pill the same height as the size pills.
 * ---------------------------------------------------------------------- */
.product-options-row {
	align-items: flex-end;
}

.product-option-btn {
	min-height: 2.75rem;
}

.product-qty-block {
	margin-left: auto;
	align-items: flex-end;
}

.product-qty-block .product-qty {
	display: inline-flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 0;
	height: 2.75rem;
	margin: 0;
	border: 1.5px solid var(--color-border-strong);
	border-radius: var(--radius-pill);
	background: var(--color-bg);
	overflow: hidden;
}

.product-qty-block .product-qty__step {
	width: 2.5rem;
	height: 100%;
	border: 0;
	border-radius: 0;
	background: none;
	font-size: 1.05rem;
}

.product-qty-block .product-qty__step:hover {
	background: var(--color-bg-warm);
	border: 0;
}

.woocommerce-product-page .product-qty-block .quantity {
	display: flex;
	height: 100%;
}

.woocommerce-product-page .product-qty-block .quantity .qty {
	width: 2.5rem;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-weight: 600;
	text-align: center;
}

/* With the stepper gone, the price card's Add to cart takes the full row. */
.product-price-card form.cart .single_add_to_cart_button.button.alt {
	grid-column: 1 / -1;
}

/* COA page: upload date line */
.coa-pending__date {
	display: inline-block;
	margin: 0.25rem 0 0.75rem;
	padding: 0.45rem 0.85rem;
	border-radius: var(--radius-pill);
	background: var(--color-accent-light);
	color: var(--color-accent-hover);
	font-weight: 700;
	font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   COA: product page lot cells, history selector, viewer bar (V2 Pass 3)
   -------------------------------------------------------------------------- */
.product-coa-badge__icon--pending,
.product-coa-badge--pending .product-coa-badge__icon--ready {
	display: none;
}

.product-coa-badge--pending .product-coa-badge__icon--pending {
	display: block;
}

.product-coa-badge[disabled] {
	cursor: default;
}

/* The status pill and the arrow are toggled with the hidden attribute by
   coa-product.js; their own display rules must not override it. */
.product-coa-badge__status[hidden],
.product-coa-badge__arrow[hidden],
.coa-modal__download[hidden] {
	display: none !important;
}

.product-specs__history-wrap:empty {
	display: none;
}

.product-specs__history {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.75rem;
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.product-specs__history-select {
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	text-transform: none;
	letter-spacing: 0;
	padding: 0.4rem 0.6rem;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-input);
	background: var(--color-surface);
	color: var(--color-text-primary);
	max-width: 100%;
}

.coa-modal__bar {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.coa-modal__title {
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	color: var(--color-text-primary);
	margin-right: auto;
}

.coa-modal__download {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-accent);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Library */
.coa-filters {
	grid-template-columns: 1.4fr 1fr 1fr auto;
	align-items: end;
}

.coa-filters__field {
	margin-bottom: 0;
}

.coa-filters__field select,
.coa-filters__field input {
	width: 100%;
	max-width: none;
}

.coa-table__product {
	font-weight: 600;
	color: var(--color-text-primary);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-color: var(--color-border-strong);
}

.coa-table__product:hover {
	color: var(--color-accent-hover);
	text-decoration-color: currentColor;
}

.coa-table__current {
	display: inline-block;
	margin-left: 0.5rem;
	padding: 0.1rem 0.45rem;
	border-radius: var(--radius-pill);
	background: var(--color-accent-light);
	color: var(--color-accent-hover);
	font-family: var(--font-mono);
	font-size: 0.625rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	vertical-align: middle;
}

.coa-table__mono {
	font-family: var(--font-mono);
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.coa-table__report {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	color: var(--color-accent);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.coa-table__report:hover {
	color: var(--color-accent-hover);
}

@media (max-width: 767px) {
	.coa-filters {
		grid-template-columns: 1fr 1fr;
	}

	.coa-filters__reset {
		grid-column: 1 / -1;
	}
}

/* ==========================================================================
   Site search (V2 Pass 4, inc/search.php + assets/js/search.js)
   ========================================================================== */
.site-search {
	position: fixed;
	inset: 0;
	z-index: 300;
}

.site-search__overlay {
	position: absolute;
	inset: 0;
	background: rgba(14, 70, 53, 0.55);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.site-search__panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
	box-shadow: 0 16px 40px rgba(14, 70, 53, 0.18);
	transform: translateY(-8px);
	opacity: 0;
	transition: transform 0.2s ease, opacity 0.2s ease;
	max-height: 100vh;
	overflow-y: auto;
}

.site-search.is-open .site-search__overlay {
	opacity: 1;
}

.site-search.is-open .site-search__panel {
	transform: none;
	opacity: 1;
}

html.site-search-open body {
	overflow: hidden;
}

.site-search__inner {
	padding-top: 1.25rem;
	padding-bottom: 1.25rem;
}

.site-search__form {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0 0.25rem 0 1rem;
	background: var(--color-surface);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-input);
}

.site-search__form:focus-within {
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px var(--color-accent-light);
}

.site-search__icon {
	flex: 0 0 auto;
	color: var(--color-text-muted);
}

.site-search__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: none;
	padding: 0.9rem 0;
	font-family: var(--font-body);
	font-size: 1.0625rem;
	color: var(--color-text-primary);
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.site-search__input::-webkit-search-decoration,
.site-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.site-search__close {
	flex: 0 0 auto;
	width: 2.5rem;
	height: 2.5rem;
	border: 0;
	background: none;
	border-radius: var(--radius-card-sm);
	color: var(--color-text-secondary);
	cursor: pointer;
}

.site-search__close:hover {
	background: var(--color-bg-warm);
	color: var(--color-text-primary);
}

.site-search__status {
	margin: 0.75rem 0 0.25rem;
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	min-height: 1em;
}

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

.site-search__results:empty {
	display: none;
}

.site-search__link {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.6rem 0.5rem;
	border-top: 1px solid var(--color-border);
	border-radius: var(--radius-card-sm);
	color: var(--color-text-primary);
}

.site-search__item:first-child .site-search__link {
	border-top: 0;
}

.site-search__item.is-active .site-search__link {
	background: var(--color-surface);
	box-shadow: inset 0 0 0 1px var(--color-accent);
}

.site-search__thumb {
	flex: 0 0 2.5rem;
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card-sm);
	overflow: hidden;
}

.site-search__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.site-search__text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.site-search__name {
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.25;
}

.site-search__meta {
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.02em;
	color: var(--color-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.site-search__price {
	flex: 0 0 auto;
	font-family: var(--font-mono);
	font-size: 0.875rem;
	font-weight: 500;
	white-space: nowrap;
}

.site-search__foot {
	margin: 0.75rem 0 0;
	font-size: 0.8125rem;
}

.site-search__foot a {
	color: var(--color-accent);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

@media (max-width: 599px) {
	.site-search__panel {
		bottom: 0;
		border-bottom: 0;
	}

	.site-search__inner {
		padding-top: 0.75rem;
	}

	.site-search__input {
		font-size: 1rem;
	}

	.site-search__meta {
		white-space: normal;
	}
}

/* ==========================================================================
   Catalog filters — strength menu, COA toggle, active row, mobile sheet
   (V2 Pass 5). Category chips, More and Sort keep their rules above.
   ========================================================================== */
.catalog-toolbar__row {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
}

/* Thin rule between the category chips and the strength / COA controls. */
.catalog-filters__divider {
	align-self: stretch;
	width: 1px;
	margin: 0.25rem 0.25rem;
	background: var(--color-border);
	flex-shrink: 0;
}

.catalog-filter--strength.is-active,
.catalog-filter--coa.is-active {
	background: var(--color-green-deep);
	border-color: var(--color-green-deep);
	color: var(--color-text-inverse);
}

.catalog-filter--coa svg {
	flex-shrink: 0;
}

/* Native checkboxes in the dropdown and the sheet. */
.catalog-menu__list--checks {
	min-width: 13.5rem;
	padding: 0.375rem;
}

.catalog-check {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.5rem 0.625rem;
	border-radius: var(--radius-card-sm);
	color: var(--color-text-primary);
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.12s ease;
}

.catalog-check:hover {
	background: var(--color-accent-light);
}

.catalog-check__input {
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	margin: 0;
	accent-color: var(--color-accent);
	cursor: pointer;
}

.catalog-check__input:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.catalog-check__count {
	margin-left: auto;
	padding-left: 0.75rem;
	color: var(--color-text-muted);
	font-variant-numeric: tabular-nums;
}

/* Active-filter row: one removable chip per facet + Clear all. */
.catalog-active {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.875rem;
	color: var(--color-text-muted);
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.2;
}

.catalog-active[hidden] {
	display: none;
}

.catalog-active__chips {
	display: contents;
}

.catalog-active__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.375rem 0.5rem 0.375rem 0.625rem;
	border: 1px solid var(--color-accent);
	border-radius: var(--radius-card-sm);
	background: var(--color-accent-light);
	color: var(--color-accent-hover);
	font: inherit;
	letter-spacing: inherit;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.12s ease, color 0.12s ease;
}

.catalog-active__chip:hover,
.catalog-active__chip:focus-visible {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-text-inverse);
}

.catalog-active__chip:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.catalog-active__x {
	font-size: 0.875rem;
	line-height: 1;
}

.catalog-active__clear {
	padding: 0.375rem 0.25rem;
	border: 0;
	background: none;
	color: var(--color-text-primary);
	font: inherit;
	letter-spacing: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.catalog-active__clear:hover {
	color: var(--color-accent-hover);
}

.catalog-active__clear:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* A deep-linked ?q= view is held back until catalog.js has applied it. */
.is-awaiting {
	visibility: hidden;
}

/* "Filters" button (phones only) with an active-count badge. */
.catalog-filter--sheet {
	display: none;
	gap: 0.5rem;
}

.catalog-filter__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.125rem;
	height: 1.125rem;
	padding: 0 0.3rem;
	border-radius: 999px;
	background: var(--color-green-deep);
	color: var(--color-text-inverse);
	font-size: 0.625rem;
	line-height: 1;
}

.catalog-filter--sheet.is-active .catalog-filter__badge,
.catalog-filter__badge[hidden] {
	display: none;
}

/* The sheet itself: only reachable on phones (the opener is hidden above
   767px and catalog.js closes it if the viewport widens). */
.catalog-sheet {
	position: fixed;
	inset: 0;
	z-index: 1200;
}

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

.catalog-sheet__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(22, 33, 28, 0.45);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.catalog-sheet__panel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	max-height: 86vh;
	max-height: 86dvh;
	background: var(--color-bg);
	border-radius: var(--radius-card) var(--radius-card) 0 0;
	box-shadow: 0 -8px 32px rgba(14, 70, 53, 0.18);
	transform: translateY(100%);
	transition: transform 0.22s ease;
}

.catalog-sheet.is-open .catalog-sheet__backdrop {
	opacity: 1;
}

.catalog-sheet.is-open .catalog-sheet__panel {
	transform: none;
}

.catalog-sheet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem 0.75rem;
	border-bottom: 1px solid var(--color-border);
}

.catalog-sheet__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--color-text-primary);
}

.catalog-sheet__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid var(--color-border);
	border-radius: 50%;
	background: var(--color-surface);
	color: var(--color-text-primary);
	cursor: pointer;
}

.catalog-sheet__close:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.catalog-sheet__body {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 0 1.25rem 0.5rem;
}

.catalog-sheet__section {
	padding: 1rem 0;
	border-bottom: 1px solid var(--color-border);
}

.catalog-sheet__section:last-child {
	border-bottom: 0;
}

.catalog-sheet__heading {
	margin: 0 0 0.625rem;
	color: var(--color-text-muted);
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.catalog-sheet__options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.catalog-sheet__checks {
	display: grid;
	gap: 0.125rem;
	margin: 0 -0.625rem;
}

.catalog-sheet__checks .catalog-check {
	font-size: 0.8125rem;
	padding: 0.625rem;
}

.catalog-sheet__foot {
	display: flex;
	gap: 0.625rem;
	padding: 0.875rem 1.25rem calc(0.875rem + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--color-border);
	background: var(--color-bg);
}

.catalog-sheet__foot .btn {
	flex: 1 1 0;
	justify-content: center;
	white-space: nowrap;
}

html.catalog-sheet-open,
html.catalog-sheet-open body {
	overflow: hidden;
}

@media (max-width: 767px) {
	/* One line: "33 compounds" on the left, Filters and Sort as a pair of
	   matching outlined chips on the right. The category chips, strength
	   menu and COA toggle live in the sheet; the scrolling row is not shown. */
	.catalog-search-row__meta {
		width: 100%;
		justify-content: flex-start;
		gap: 0.5rem;
	}

	.catalog-search-row__meta .catalog-count {
		margin-right: auto;
		font-family: var(--font-mono);
		font-size: 0.75rem;
		letter-spacing: 0.02em;
	}

	.catalog-filter--sheet {
		display: inline-flex;
		padding: 0.5rem 0.75rem;
	}

	.catalog-search-row__meta .catalog-menu--sort {
		align-self: auto;
		margin-left: 0;
	}

	.catalog-search-row__meta .catalog-sort {
		padding: 0.5rem 0.625rem 0.5rem 0.75rem;
		border: 1px solid var(--color-border);
		border-radius: var(--radius-pill);
		background: var(--color-surface);
		gap: 0.4rem;
	}

	.catalog-search-row__meta .catalog-sort__label {
		color: var(--color-text-secondary);
	}

	.catalog-search-row__meta .catalog-sort__label::after {
		content: none;
	}

	/* The chosen sort is shown as a chip in the active row instead, so the
	   button stays short enough to share the line. */
	.catalog-search-row__meta .catalog-sort__value {
		display: none;
	}

	.catalog-search-row__meta .catalog-menu--sort .catalog-menu__list {
		left: auto;
		right: 0;
	}

	.catalog-toolbar__row {
		display: none;
	}

	.catalog-toolbar {
		margin-bottom: 1.25rem;
	}

	.catalog-active {
		margin-top: 0;
		margin-bottom: 1rem;
	}

	.catalog-active[hidden] {
		display: none;
	}
}

@media (min-width: 768px) {
	.catalog-sheet {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.catalog-sheet__backdrop,
	.catalog-sheet__panel,
	.catalog-active__chip,
	.catalog-check {
		transition: none;
	}
}

/* The catalog field is type="search" so Escape clears it; drop WebKit's
   own chrome so it keeps the theme styling. */
.catalog-search__input {
	appearance: none;
	-webkit-appearance: none;
}

.catalog-search__input::-webkit-search-decoration,
.catalog-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

/* Tablets (768–1199px): the strength dropdown opens from the scrolling chip
   row, so like More it is anchored to the row rather than the pill. */
@media (max-width: 1199px) {
	.catalog-menu--strength {
		position: static;
	}

	.catalog-menu--strength .catalog-menu__list {
		left: var(--page-margin);
		right: auto;
	}
}

/* ==========================================================================
   Entry gate (age / RUO) — V2 restyle (visual only). Markup (header.php)
   and behaviour (assets/js/main.js) are unchanged; these rules follow the
   originals above and take precedence. The registration overlay was
   retired on 2026-09-23 (account creation moved to checkout).
   ========================================================================== */

/* --- Age gate ------------------------------------------------------------ */
.age-gate {
	background: rgba(22, 33, 28, 0.72);
}

.age-gate__dialog {
	max-width: 26.5rem;
	padding: 2rem 2rem 1.75rem;
	text-align: left;
	background: var(--color-surface);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-card);
	box-shadow: 0 16px 40px rgba(14, 70, 53, 0.18);
}

/* The shield sits as a technical marker above the title: rounded square,
   thin green rule, pale fill — the same device as the homepage trust strip. */
.age-gate__icon {
	width: 2.5rem;
	height: 2.5rem;
	margin: 0 0 1rem;
	border: 1px solid rgba(21, 101, 75, 0.55);
	border-radius: var(--radius-card-sm);
	background: #EEF5F1;
	color: var(--color-green-deep);
}

.age-gate__icon svg {
	width: 1.25rem;
	height: 1.25rem;
}

.age-gate__title {
	margin: 0 0 0.5rem;
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--color-text-primary);
}

.age-gate__text {
	margin: 0 0 1.25rem;
	font-family: var(--font-body);
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--color-text-secondary);
}

.age-gate__checks {
	gap: 0.5rem;
	margin-bottom: 1.125rem;
}

.age-gate__check {
	gap: 0.75rem;
	padding: 0.75rem 0.875rem;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card-sm);
	font-family: var(--font-body);
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--color-text-primary);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.age-gate__check:hover {
	border-color: var(--color-border-strong);
}

.age-gate__check:has(input:checked) {
	border-color: var(--color-accent);
	background: #EEF5F1;
}

.age-gate__check input[type="checkbox"] {
	width: 1.125rem;
	height: 1.125rem;
	margin-top: 0.125rem;
	accent-color: var(--color-accent);
}

.age-gate__check input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.age-gate__legal {
	margin: 0 0 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid var(--color-border);
	font-family: var(--font-body);
	font-size: 0.75rem;
	line-height: 1.55;
	color: var(--color-text-muted);
}

.age-gate__legal a {
	color: var(--color-accent-hover);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.age-gate__actions {
	gap: 0.5rem;
}

.age-gate__confirm {
	padding: 0.875rem 1.25rem;
	border-radius: var(--radius-card-sm);
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0;
	background: var(--color-accent);
	color: var(--color-text-inverse);
	transition: background-color 0.15s ease;
}

.age-gate__confirm:hover:not(:disabled) {
	background: var(--color-green-deep);
}

.age-gate__confirm:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.age-gate__confirm:disabled {
	background: var(--color-border);
	color: var(--color-text-muted);
	cursor: not-allowed;
}

.age-gate__decline {
	padding: 0.5rem 0.75rem;
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--color-text-secondary);
	text-decoration: underline;
	text-underline-offset: 3px;
	border-radius: 4px;
}

.age-gate__decline:hover {
	color: var(--color-text-primary);
}

.age-gate__decline:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

@media (max-width: 600px) {
	.age-gate {
		padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
	}

	.age-gate__dialog {
		padding: 1.5rem 1.25rem 1.25rem;
	}

	.age-gate__icon {
		width: 2.25rem;
		height: 2.25rem;
		margin-bottom: 0.875rem;
	}

	.age-gate__title {
		font-size: 1.3125rem;
	}

	.age-gate__text {
		margin-bottom: 1rem;
	}

	.age-gate__check {
		padding: 0.6875rem 0.75rem;
	}

	.age-gate__legal {
		margin-bottom: 1rem;
	}

	.age-gate__confirm {
		padding: 0.8125rem 1rem;
	}
}

/* ==========================================================================
   Full-bleed product renders (photography pass). An attachment flagged
   `_medicina_full_bleed` fills the card tile edge to edge; everything else
   keeps the vial rail above.
   ========================================================================== */
.product-card__media--bleed img {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
}

.product-card:hover .product-card__media--bleed img,
.product-card:focus-within .product-card__media--bleed img {
	/* Scale only: the lift would expose the tile behind the render. */
	transform: scale(1.03);
}

/* Product page: a flagged render fills a square panel of the same width the
   panel has today; the thumb rail, USA tag and COA badge sit on the image.
   Any other slide in the same gallery (the real-vial PHOTO) is letterboxed
   with object-fit: contain rather than cropped. */
.woocommerce-product-page .woocommerce-product-gallery--bleed {
	display: block;
	padding: 0 !important;
	aspect-ratio: 1 / 1;
}

/* !important on the viewport: flexslider writes its own inline height
   (the first slide's natural height) and animates it on every switch. */
.woocommerce-product-page .woocommerce-product-gallery--bleed .flex-viewport,
.woocommerce-product-page .woocommerce-product-gallery--bleed > .woocommerce-product-gallery__wrapper {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
}

.woocommerce-product-page .woocommerce-product-gallery--bleed .flex-viewport .woocommerce-product-gallery__wrapper {
	height: 100%;
}

.woocommerce-product-page .woocommerce-product-gallery--bleed .woocommerce-product-gallery__image {
	height: 100%;
}

.woocommerce-product-page .woocommerce-product-gallery--bleed .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 0;
}

.woocommerce-product-page .woocommerce-product-gallery--bleed .woocommerce-product-gallery__image.is-bleed img {
	object-fit: cover;
}

/* Overlays on the image: rail left, tag top-right, badge bottom-right. */
.woocommerce-product-page .woocommerce-product-gallery--bleed .flex-control-thumbs {
	position: absolute;
	z-index: 5;
	margin: 0;
	width: auto;
}

@media (min-width: 901px) {
	.woocommerce-product-page .woocommerce-product-gallery--bleed .flex-control-thumbs {
		left: 1.25rem;
		top: 50%;
		transform: translateY(-50%);
	}
}

@media (max-width: 900px) {
	.woocommerce-product-page .woocommerce-product-gallery--bleed .flex-control-thumbs {
		left: 1rem;
		bottom: 1rem;
		top: auto;
		transform: none;
		flex-direction: row;
	}

	.woocommerce-product-page div.woocommerce-product-gallery--bleed {
		padding: 0 !important;
	}
}