/**
 * TC Storefront — presentation layer.
 *
 * Two identities, one stylesheet. The palette and typefaces are switched by the
 * body class that functions.php derives from TC_SITE_MODE, so branding is a
 * configuration change and never a code fork.
 *
 *   .tc-mode-timelesscompounds   Timeless Research — "laboratory ledger". Cool bone paper,
 *                       near-black ink, instrument blue, hairline rules, a
 *                       high-contrast serif over a technical sans, and monospace
 *                       for anything that is data. It should read like a
 *                       certificate, because half of what this site sells is
 *                       confidence in the certificate.
 *
 *   .tc-mode-livingforyourhealth Living for Your Health — "apothecary". Warm parchment,
 *                       deep botanical green, copper accents, a characterful
 *                       display serif over a humanist sans. Warm without being a
 *                       wellness cliché.
 *
 * Shared across both: the same monospace for lot numbers, SKUs, and CAS numbers,
 * the same restraint with shadows, and the same generous rhythm. The two sites
 * should feel like siblings with different jobs, not like one template recoloured.
 *
 * Plain CSS. No build step, no preprocessor — what is committed is what ships.
 *
 * @package tc-storefront
 */

/* -------------------------------------------------------------------------
   1. Design tokens
   ---------------------------------------------------------------------- */

:root {
	--tc-space-2xs: 0.25rem;
	--tc-space-xs: 0.5rem;
	--tc-space-sm: 0.75rem;
	--tc-space-md: 1.25rem;
	--tc-space-lg: 2rem;
	--tc-space-xl: 3.5rem;
	--tc-space-2xl: 5.5rem;

	--tc-measure: 34rem;
	--tc-radius: 2px;

	/* The size of a page title, and the only place it is decided.
	   Three different page titles had drifted to three different sizes, each
	   set by its own rule in its own file: the homepage hero at 5.8vw, the
	   research intro at 6vw, and every other h1 on the base clamp. At a 1512px
	   desktop that read as 88px, 80px and 52px for what is the same thing on
	   three pages — and none of them matched, which is the part a visitor
	   notices even without being able to name it.
	   Pinned to the section-heading scale ("From the catalog" on the homepage)
	   so a page title is never smaller than a heading inside the page, which
	   was the other half of the problem. Every rule that sizes a title now
	   reads this token; change it here and all of them move together. */
	--tc-title-size: clamp(2.3rem, 4vw, 3.7rem);

	/* Footer text size, and the only place it is decided. The footer's
	   compliance line had been sized by four rules (0.75, 0.9375 and 1.0625rem,
	   last-loaded winning) and read larger than the tagline above it; on
	   2026-10-07 Carl asked for the tagline, the copyright and the disclaimer to
	   match. They all read this token. */
	--tc-footer-text-size: 1rem;

	/* The space between the blocks of the Timeless Research footer brand column
	   (heading, tagline, copyright), so they stay evenly spaced. */
	--tc-footer-gap: 1.5rem;

	/* Timeless Research main menu label size. Three .tc-mode rules across two
	   stylesheets each set their own (0.875, 1 and 0.85rem) and the last one
	   loaded won, so the menu rendered at 13.6px while the other values sat in
	   the file looking authoritative. All three now read this token. The
	   .tc-shell rule keeps its own 0.8125rem: it is the shared base for Living
	   for Your Health, whose menu nobody asked to change.
	   1.02rem is 120% of the old 13.6px, set on request (2026-10-01) after 150%
	   proved too large. Even at this size the menu meets the full-width search
	   box just above 1200px, so section 28 narrows the box in that band. */
	--tc-nav-size: 1.02rem;

	--tc-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
	--tc-duration: 240ms;

	/* Consumed by the plugin's structural stylesheet. */
	--tc-danger-bg: #fbe7e5;
	--tc-danger-text: #8d1d13;
	--tc-warning-bg: #fbf0d9;
	--tc-warning-text: #7a4d0c;
}

/* --- Research: the vault -------------------------------------------------
   Timeless Research. Near-black ground with metallic gold, taken from the
   brand assets: #080808 ground, #FDE5AF highlight, #946E38 mid, #5C3917 shadow.
   High-contrast serif wordmark over wide-tracked geometric caps, hairline gold
   rules, and a warm glow behind the hero echoing the backlit vial photography.
   Restrained on purpose — gold earns its weight by being scarce.            */

.tc-mode-timelesscompounds {
	--tc-surface: #080808;
	--tc-surface-raised: #101010;
	--tc-surface-muted: #17150F;
	--tc-ink: #F3EEE4;
	--tc-text-muted: #9A9287;
	--tc-border: #2A2620;
	--tc-rule-strong: #D9B166;

	--tc-accent: #D9B166;
	--tc-accent-strong: #FDE5AF;
	--tc-accent-deep: #946E38;
	--tc-accent-shadow: #5C3917;
	--tc-accent-contrast: #080808;
	--tc-signal: #C8873A;

	--tc-font-display: "Cormorant Garamond", "Hoefler Text", Georgia, serif;
	--tc-font-body: "Jost", "Avenir Next", "Futura", Helvetica, sans-serif;
	--tc-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

	--tc-display-weight: 500;
	--tc-display-tracking: 0.01em;
	--tc-grain-opacity: 0.07;

	/* On a near-black ground the shared danger/warning tokens need to be dark
	   surfaces with light text, not light surfaces with dark text. */
	--tc-danger-bg: #2A1210;
	--tc-danger-text: #F0A79C;
	--tc-warning-bg: #2A2110;
	--tc-warning-text: #E8C27A;
}

/* --- Supplement: apothecary --------------------------------------------- */

.tc-mode-livingforyourhealth {
	--tc-surface: #f7f2e9;
	--tc-surface-raised: #fffdf8;
	--tc-surface-muted: #efe7d8;
	--tc-ink: #23201b;
	--tc-text-muted: #6a6053;
	--tc-border: #e2d8c6;
	--tc-rule-strong: #2f5d3f;
	--tc-accent: #2f5d3f;
	--tc-accent-strong: #1c3d29;
	/* Used for hairline borders and secondary accent text. It was missing here
	   while 24 declarations referenced it, so on the supplement palette those
	   borders resolved to nothing and simply disappeared. */
	--tc-accent-deep: #244a31;
	--tc-accent-shadow: #16301f;
	--tc-accent-contrast: #fffdf8;
	--tc-signal: #a75d2b;

	--tc-font-display: "Fraunces", "Hoefler Text", Georgia, serif;
	--tc-font-body: "Karla", "Avenir Next", Helvetica, sans-serif;
	--tc-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

	--tc-display-weight: 600;
	--tc-display-tracking: -0.01em;
	--tc-grain-opacity: 0.035;
}

/* -------------------------------------------------------------------------
   2. Base
   ---------------------------------------------------------------------- */

body.tc-mode-timelesscompounds,
body.tc-mode-livingforyourhealth {
	background-color: var(--tc-surface);
	color: var(--tc-ink);
	font-family: var(--tc-font-body);
	font-size: 1rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/*
 * A single fixed grain layer gives both palettes the paper quality they need
 * without shipping an image. Inlined SVG, so it costs one repaint and no request.
 */
body.tc-mode-timelesscompounds::before,
body.tc-mode-livingforyourhealth::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: var(--tc-grain-opacity);
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.tc-mode-timelesscompounds h1,
.tc-mode-timelesscompounds h2,
.tc-mode-timelesscompounds h3,
.tc-mode-livingforyourhealth h1,
.tc-mode-livingforyourhealth h2,
.tc-mode-livingforyourhealth h3 {
	font-family: var(--tc-font-display);
	font-weight: var(--tc-display-weight);
	letter-spacing: var(--tc-display-tracking);
	line-height: 1.15;
	color: var(--tc-ink);
}

.tc-mode-timelesscompounds h1,
.tc-mode-livingforyourhealth h1 {
	font-size: var(--tc-title-size);
}

.tc-mode-timelesscompounds h2,
.tc-mode-livingforyourhealth h2 {
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
}

.tc-mode-timelesscompounds p,
.tc-mode-livingforyourhealth p {
	max-width: var(--tc-measure);
}

.tc-mode-timelesscompounds .entry-content p,
.tc-mode-livingforyourhealth .entry-content p {
	max-width: none;
}

/* Links: a rule that draws itself rather than a permanent underline. */
.tc-mode-timelesscompounds a,
.tc-mode-livingforyourhealth a {
	color: var(--tc-accent);
	text-decoration: none;
	background-image: linear-gradient(var(--tc-accent), var(--tc-accent));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size var(--tc-duration) var(--tc-ease), color var(--tc-duration) var(--tc-ease);
}

.tc-mode-timelesscompounds a:hover,
.tc-mode-livingforyourhealth a:hover {
	color: var(--tc-accent-strong);
	background-size: 100% 1px;
}

.tc-mode-timelesscompounds a:focus-visible,
.tc-mode-livingforyourhealth a:focus-visible,
.tc-mode-timelesscompounds button:focus-visible,
.tc-mode-livingforyourhealth button:focus-visible,
.tc-mode-timelesscompounds input:focus-visible,
.tc-mode-livingforyourhealth input:focus-visible,
.tc-mode-timelesscompounds select:focus-visible,
.tc-mode-livingforyourhealth select:focus-visible,
.tc-mode-timelesscompounds textarea:focus-visible,
.tc-mode-livingforyourhealth textarea:focus-visible {
	outline: 2px solid var(--tc-accent);
	outline-offset: 3px;
}

/* Anything that is data gets the monospace and tabular figures. */
.tc-mode-timelesscompounds .sku,
.tc-mode-livingforyourhealth .sku,
.tc-mode-timelesscompounds .price,
.tc-mode-livingforyourhealth .price,
.tc-mode-timelesscompounds .tc-current-lot__number,
.tc-mode-livingforyourhealth .tc-current-lot__number,
.tc-mode-timelesscompounds .tc-lot__facts dd,
.tc-mode-livingforyourhealth .tc-lot__facts dd,
.tc-mode-timelesscompounds .tc-lot-list__table td:first-child,
.tc-mode-livingforyourhealth .tc-lot-list__table td:first-child {
	font-family: var(--tc-font-mono);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

/* -------------------------------------------------------------------------
   3. Header and navigation
   ---------------------------------------------------------------------- */

.tc-mode-timelesscompounds .site-header,
.tc-mode-livingforyourhealth .site-header {
	background-color: transparent;
	border-bottom: 1px solid var(--tc-border);
	padding-top: var(--tc-space-md);
	padding-bottom: var(--tc-space-md);
	margin-bottom: var(--tc-space-xl);
}

.tc-mode-timelesscompounds .site-branding .site-title a,
.tc-mode-livingforyourhealth .site-branding .site-title a {
	font-family: var(--tc-font-display);
	font-weight: var(--tc-display-weight);
	color: var(--tc-ink);
	background-image: none;
}

.tc-mode-timelesscompounds .main-navigation ul li a,
.tc-mode-livingforyourhealth .main-navigation ul li a {
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tc-ink);
}

.tc-mode-timelesscompounds .main-navigation ul li a:hover,
.tc-mode-livingforyourhealth .main-navigation ul li a:hover {
	color: var(--tc-accent);
}

/* -------------------------------------------------------------------------
   4. Buttons
   ---------------------------------------------------------------------- */

.tc-mode-timelesscompounds .button,
.tc-mode-timelesscompounds button,
.tc-mode-timelesscompounds input[type="submit"],
.tc-mode-timelesscompounds .woocommerce #respond input#submit,
.tc-mode-timelesscompounds .woocommerce a.button,
.tc-mode-timelesscompounds .woocommerce button.button,
.tc-mode-livingforyourhealth .button,
.tc-mode-livingforyourhealth button,
.tc-mode-livingforyourhealth input[type="submit"],
.tc-mode-livingforyourhealth .woocommerce #respond input#submit,
.tc-mode-livingforyourhealth .woocommerce a.button,
.tc-mode-livingforyourhealth .woocommerce button.button {
	font-family: var(--tc-font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: var(--tc-radius);
	padding: 0.85em 1.6em;
	border: 1px solid var(--tc-accent);
	background-color: var(--tc-accent);
	color: var(--tc-accent-contrast);
	background-image: none;
	text-shadow: none;
	transition: background-color var(--tc-duration) var(--tc-ease),
		color var(--tc-duration) var(--tc-ease),
		transform var(--tc-duration) var(--tc-ease);
}

.tc-mode-timelesscompounds .button:hover,
.tc-mode-timelesscompounds .woocommerce a.button:hover,
.tc-mode-timelesscompounds .woocommerce button.button:hover,
.tc-mode-livingforyourhealth .button:hover,
.tc-mode-livingforyourhealth .woocommerce a.button:hover,
.tc-mode-livingforyourhealth .woocommerce button.button:hover {
	background-color: var(--tc-accent-strong);
	border-color: var(--tc-accent-strong);
	color: var(--tc-accent-contrast);
	transform: translateY(-1px);
}

/* Secondary: outline only, fills on hover. */
.tc-mode-timelesscompounds .woocommerce a.button.alt,
.tc-mode-livingforyourhealth .woocommerce a.button.alt {
	background-color: transparent;
	color: var(--tc-accent);
}

/* -------------------------------------------------------------------------
   5. Product catalogue
   ---------------------------------------------------------------------- */

.tc-mode-timelesscompounds.woocommerce ul.products li.product,
.tc-mode-livingforyourhealth.woocommerce ul.products li.product {
	background-color: var(--tc-surface-raised);
	border: 1px solid var(--tc-border);
	border-radius: var(--tc-radius);
	padding: var(--tc-space-sm) var(--tc-space-sm) var(--tc-space-md);
	transition: border-color var(--tc-duration) var(--tc-ease),
		transform var(--tc-duration) var(--tc-ease);
}

.tc-mode-timelesscompounds.woocommerce ul.products li.product:hover,
.tc-mode-livingforyourhealth.woocommerce ul.products li.product:hover {
	border-color: var(--tc-accent);
	transform: translateY(-3px);
}

.tc-mode-timelesscompounds.woocommerce ul.products li.product .woocommerce-loop-product__title,
.tc-mode-livingforyourhealth.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--tc-font-display);
	font-size: 1.0625rem;
	font-weight: var(--tc-display-weight);
	line-height: 1.25;
	padding-top: var(--tc-space-xs);
}

.tc-mode-timelesscompounds.woocommerce ul.products li.product .price,
.tc-mode-livingforyourhealth.woocommerce ul.products li.product .price {
	color: var(--tc-ink);
	font-size: 0.9375rem;
	font-weight: 500;
}

.tc-mode-timelesscompounds.woocommerce ul.products li.product .price del,
.tc-mode-livingforyourhealth.woocommerce ul.products li.product .price del {
	color: var(--tc-text-muted);
	opacity: 1;
}

.tc-mode-timelesscompounds.woocommerce ul.products li.product .price ins,
.tc-mode-livingforyourhealth.woocommerce ul.products li.product .price ins {
	color: var(--tc-signal);
	text-decoration: none;
	font-weight: 600;
}

.tc-mode-timelesscompounds.woocommerce span.onsale,
.tc-mode-livingforyourhealth.woocommerce span.onsale {
	background-color: var(--tc-signal);
	color: #fff;
	border-radius: var(--tc-radius);
	font-family: var(--tc-font-body);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	min-height: 0;
	min-width: 0;
	line-height: 1;
	padding: 0.5em 0.85em;
}

/*
 * One orchestrated reveal on load. Staggering the grid by position is cheaper and
 * calmer than animating every element, and it degrades to nothing when the visitor
 * has asked for reduced motion.
 */
@media (prefers-reduced-motion: no-preference) {
	.tc-mode-timelesscompounds.woocommerce ul.products li.product,
	.tc-mode-livingforyourhealth.woocommerce ul.products li.product {
		animation: tc-rise 520ms var(--tc-ease) both;
	}

	.tc-mode-timelesscompounds.woocommerce ul.products li.product:nth-child(2),
	.tc-mode-livingforyourhealth.woocommerce ul.products li.product:nth-child(2) {
		animation-delay: 60ms;
	}

	.tc-mode-timelesscompounds.woocommerce ul.products li.product:nth-child(3),
	.tc-mode-livingforyourhealth.woocommerce ul.products li.product:nth-child(3) {
		animation-delay: 120ms;
	}

	.tc-mode-timelesscompounds.woocommerce ul.products li.product:nth-child(4),
	.tc-mode-livingforyourhealth.woocommerce ul.products li.product:nth-child(4) {
		animation-delay: 180ms;
	}

	.tc-mode-timelesscompounds.woocommerce ul.products li.product:nth-child(n + 5),
	.tc-mode-livingforyourhealth.woocommerce ul.products li.product:nth-child(n + 5) {
		animation-delay: 240ms;
	}
}

@keyframes tc-rise {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* -------------------------------------------------------------------------
   6. Single product
   ---------------------------------------------------------------------- */

.tc-mode-timelesscompounds.woocommerce div.product .product_title,
.tc-mode-livingforyourhealth.woocommerce div.product .product_title {
	margin-bottom: var(--tc-space-xs);
}

.tc-mode-timelesscompounds.woocommerce div.product p.price,
.tc-mode-livingforyourhealth.woocommerce div.product p.price {
	font-size: 1.5rem;
	font-weight: 500;
	color: var(--tc-ink);
	margin-bottom: var(--tc-space-md);
}

.tc-mode-timelesscompounds.woocommerce div.product .woocommerce-tabs ul.tabs,
.tc-mode-livingforyourhealth.woocommerce div.product .woocommerce-tabs ul.tabs {
	border-bottom: 1px solid var(--tc-border);
	padding-left: 0;
	margin-bottom: var(--tc-space-md);
}

.tc-mode-timelesscompounds.woocommerce div.product .woocommerce-tabs ul.tabs li,
.tc-mode-livingforyourhealth.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 0 var(--tc-space-md) 0 0;
	padding: 0;
}

.tc-mode-timelesscompounds.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.tc-mode-livingforyourhealth.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: var(--tc-space-xs) 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--tc-text-muted);
	border-bottom: 2px solid transparent;
	background-image: none;
}

.tc-mode-timelesscompounds.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.tc-mode-livingforyourhealth.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--tc-ink);
	border-bottom-color: var(--tc-rule-strong);
}

/* -------------------------------------------------------------------------
   7. Plugin-rendered components
   ---------------------------------------------------------------------- */

/*
 * These elements are printed by tc-commerce-core. The plugin ships their
 * structure; everything below is branding only. The disclaimer text itself comes
 * from the plugin and is not editable from here by design.
 */

.tc-mode-timelesscompounds .tc-disclaimer,
.tc-mode-livingforyourhealth .tc-disclaimer {
	border-left-width: 2px;
	border-radius: var(--tc-radius);
}

.tc-mode-timelesscompounds .tc-disclaimer__headline,
.tc-mode-livingforyourhealth .tc-disclaimer__headline {
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.tc-mode-timelesscompounds .tc-footer-disclaimer,
.tc-mode-livingforyourhealth .tc-footer-disclaimer {
	background-color: var(--tc-surface-muted);
	border-top-color: var(--tc-border);
	max-width: none;
	padding-left: var(--tc-space-md);
	padding-right: var(--tc-space-md);
}

.tc-mode-timelesscompounds .tc-footer-disclaimer p,
.tc-mode-livingforyourhealth .tc-footer-disclaimer p {
	max-width: 62ch;
	margin-left: auto;
	margin-right: auto;
}

.tc-mode-timelesscompounds .tc-specs th,
.tc-mode-livingforyourhealth .tc-specs th {
	font-family: var(--tc-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.tc-mode-timelesscompounds .tc-current-lot,
.tc-mode-livingforyourhealth .tc-current-lot {
	border-top-color: var(--tc-rule-strong);
	border-bottom-color: var(--tc-border);
}

.tc-mode-timelesscompounds .tc-current-lot__label,
.tc-mode-livingforyourhealth .tc-current-lot__label {
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tc-text-muted);
}

/* The lot page is the QR destination. It should look like a document. */
.tc-mode-timelesscompounds .tc-lot-page,
.tc-mode-livingforyourhealth .tc-lot-page {
	max-width: 52rem;
	margin: 0 auto;
	padding: var(--tc-space-lg) var(--tc-space-md) var(--tc-space-2xl);
}

.tc-mode-timelesscompounds .tc-lot-page__eyebrow,
.tc-mode-livingforyourhealth .tc-lot-page__eyebrow {
	margin: 0 0 var(--tc-space-2xs);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tc-accent);
}

.tc-mode-timelesscompounds .tc-lot-page__title,
.tc-mode-livingforyourhealth .tc-lot-page__title {
	font-family: var(--tc-font-mono);
	font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	padding-bottom: var(--tc-space-md);
	border-bottom: 2px solid var(--tc-rule-strong);
}

.tc-mode-timelesscompounds .tc-lot__heading,
.tc-mode-livingforyourhealth .tc-lot__heading {
	margin-top: var(--tc-space-xl);
	font-size: 0.75rem;
	font-family: var(--tc-font-body);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tc-text-muted);
}

.tc-mode-timelesscompounds .tc-lot__fact dt,
.tc-mode-livingforyourhealth .tc-lot__fact dt {
	font-family: var(--tc-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.tc-mode-timelesscompounds .tc-lot__alert,
.tc-mode-livingforyourhealth .tc-lot__alert {
	border: 1px solid currentColor;
	background-color: var(--tc-danger-bg);
	color: var(--tc-danger-text);
}

.tc-mode-timelesscompounds .tc-lot__alert.tc-lot-status--expired,
.tc-mode-livingforyourhealth .tc-lot__alert.tc-lot-status--expired {
	background-color: var(--tc-warning-bg);
	color: var(--tc-warning-text);
}

.tc-mode-timelesscompounds .tc-gate,
.tc-mode-livingforyourhealth .tc-gate {
	padding: var(--tc-space-xs) 0;
}

.tc-mode-timelesscompounds .tc-gate__message,
.tc-mode-livingforyourhealth .tc-gate__message {
	font-style: italic;
	font-family: var(--tc-font-display);
}

.tc-mode-timelesscompounds .tc-supplement-facts,
.tc-mode-livingforyourhealth .tc-supplement-facts {
	max-width: 26rem;
	padding: var(--tc-space-md);
	border: 2px solid var(--tc-ink);
	border-radius: var(--tc-radius);
	background-color: var(--tc-surface-raised);
}

.tc-mode-timelesscompounds .tc-supplement-facts__title,
.tc-mode-livingforyourhealth .tc-supplement-facts__title {
	margin: 0 0 var(--tc-space-xs);
	padding-bottom: var(--tc-space-2xs);
	border-bottom: 6px solid var(--tc-ink);
	font-family: var(--tc-font-body);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* -------------------------------------------------------------------------
   8. Forms
   ---------------------------------------------------------------------- */

.tc-mode-timelesscompounds input[type="text"],
.tc-mode-timelesscompounds input[type="email"],
.tc-mode-timelesscompounds input[type="tel"],
.tc-mode-timelesscompounds input[type="password"],
.tc-mode-timelesscompounds input[type="search"],
.tc-mode-timelesscompounds input[type="date"],
.tc-mode-timelesscompounds textarea,
.tc-mode-timelesscompounds select,
.tc-mode-livingforyourhealth input[type="text"],
.tc-mode-livingforyourhealth input[type="email"],
.tc-mode-livingforyourhealth input[type="tel"],
.tc-mode-livingforyourhealth input[type="password"],
.tc-mode-livingforyourhealth input[type="search"],
.tc-mode-livingforyourhealth input[type="date"],
.tc-mode-livingforyourhealth textarea,
.tc-mode-livingforyourhealth select {
	background-color: var(--tc-surface-raised);
	border: 1px solid var(--tc-border);
	border-radius: var(--tc-radius);
	box-shadow: none;
	color: var(--tc-ink);
	font-family: var(--tc-font-body);
	padding: 0.7em 0.85em;
}

.tc-mode-timelesscompounds .tc-application,
.tc-mode-livingforyourhealth .tc-application {
	max-width: 38rem;
}

.tc-mode-timelesscompounds .tc-application__field label,
.tc-mode-livingforyourhealth .tc-application__field label {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--tc-text-muted);
}

.tc-mode-timelesscompounds .tc-application__field--check label,
.tc-mode-livingforyourhealth .tc-application__field--check label {
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--tc-ink);
}

/* -------------------------------------------------------------------------
   9. Footer
   ---------------------------------------------------------------------- */

.tc-mode-timelesscompounds .site-footer,
.tc-mode-livingforyourhealth .site-footer {
	background-color: transparent;
	color: var(--tc-text-muted);
	border-top: 1px solid var(--tc-border);
	padding-top: var(--tc-space-lg);
	margin-top: var(--tc-space-2xl);
	font-size: 0.875rem;
}

.tc-mode-timelesscompounds .site-footer a,
.tc-mode-livingforyourhealth .site-footer a {
	color: var(--tc-ink);
}

.tc-footer-line {
	padding: var(--tc-space-md) 0;
	font-size: 0.8125rem;
	color: var(--tc-text-muted);
}

/* -------------------------------------------------------------------------
   10. Motion preferences
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.tc-mode-timelesscompounds *,
	.tc-mode-livingforyourhealth * {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* =========================================================================
   11. Research mode — dark surface treatment
   =========================================================================
   Storefront is built for light backgrounds, so every surface it paints has to
   be answered explicitly here. Everything below is scoped to .tc-mode-timelesscompounds
   and has no effect on the supplement site.
   ---------------------------------------------------------------------- */

/* Multiply blend turns the grain invisible on a near-black ground; screen lifts
   it into a faint film instead. */
body.tc-mode-timelesscompounds::before {
	mix-blend-mode: screen;
	opacity: var(--tc-grain-opacity);
}

/* A single warm pool of light behind the top of the page, echoing the backlit
   vial photography. Fixed and non-interactive, so it costs nothing to scroll. */
body.tc-mode-timelesscompounds::after {
	content: "";
	position: fixed;
	inset: 0 0 auto 0;
	height: 70vh;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient( 62rem 34rem at 50% -14%, rgba( 217, 177, 102, 0.13 ), transparent 70% ),
		radial-gradient( 30rem 20rem at 88% 4%, rgba( 148, 110, 56, 0.10 ), transparent 72% );
}

.tc-mode-timelesscompounds .site,
.tc-mode-timelesscompounds .site-content,
.tc-mode-timelesscompounds .site-footer {
	position: relative;
	z-index: 2;
}

/* The header must outrank .site-content, not tie with it — at equal z-index the
   later element in the document wins, and the page content painted straight over
   the open mini-cart panel. */
.tc-mode-timelesscompounds .site-header {
	position: relative;
	z-index: 20;
}

/* --- Header and navigation ---------------------------------------------- */

.tc-mode-timelesscompounds .site-header {
	background-color: transparent;
	border-bottom: 1px solid var(--tc-border);
	box-shadow: none;
}

.tc-mode-timelesscompounds .site-branding .site-title a,
.tc-mode-timelesscompounds .site-title a {
	font-family: var(--tc-font-display);
	font-size: 2rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tc-accent-strong);
}

.tc-mode-timelesscompounds .site-description {
	font-family: var(--tc-font-body);
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: 0.42em;
	text-transform: uppercase;
	color: var(--tc-text-muted);
}

.tc-mode-timelesscompounds .main-navigation ul li a,
.tc-mode-timelesscompounds .secondary-navigation ul li a {
	color: var(--tc-ink);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.tc-mode-timelesscompounds .main-navigation ul li a:hover,
.tc-mode-timelesscompounds .site-header-cart .cart-contents:hover {
	color: var(--tc-accent);
}

.tc-mode-timelesscompounds .site-header-cart .cart-contents,
.tc-mode-timelesscompounds .site-header-cart .amount {
	color: var(--tc-ink);
}

.tc-mode-timelesscompounds .main-navigation ul.menu ul.sub-menu,
.tc-mode-timelesscompounds .site-header-cart .widget_shopping_cart {
	background-color: var(--tc-surface-raised);
	border: 1px solid var(--tc-border);
}

/* --- Buttons ------------------------------------------------------------- */

.tc-mode-timelesscompounds .button,
.tc-mode-timelesscompounds button,
.tc-mode-timelesscompounds input[type="submit"],
.tc-mode-timelesscompounds .woocommerce a.button,
.tc-mode-timelesscompounds .woocommerce button.button,
.tc-mode-timelesscompounds .woocommerce #respond input#submit,
.tc-mode-timelesscompounds .woocommerce input.button {
	background-color: transparent;
	background-image: none;
	border: 1px solid var(--tc-accent-deep);
	color: var(--tc-accent-strong);
	font-family: var(--tc-font-body);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-shadow: none;
	box-shadow: none;
	padding: 0.95em 1.9em;
	border-radius: var(--tc-radius);
}

.tc-mode-timelesscompounds .button:hover,
.tc-mode-timelesscompounds .woocommerce a.button:hover,
.tc-mode-timelesscompounds .woocommerce button.button:hover,
.tc-mode-timelesscompounds .woocommerce input.button:hover,
.tc-mode-timelesscompounds .woocommerce #respond input#submit:hover {
	background-color: var(--tc-accent);
	border-color: var(--tc-accent);
	color: var(--tc-accent-contrast);
	transform: translateY(-1px);
}

/* The primary action fills, so it reads first against everything outlined. */
.tc-mode-timelesscompounds .woocommerce button.button.alt,
.tc-mode-timelesscompounds .woocommerce a.button.alt,
.tc-mode-timelesscompounds .woocommerce input.button.alt,
.tc-mode-timelesscompounds .single_add_to_cart_button {
	background-color: var(--tc-accent);
	border-color: var(--tc-accent);
	color: var(--tc-accent-contrast);
	font-weight: 600;
}

.tc-mode-timelesscompounds .woocommerce button.button.alt:hover,
.tc-mode-timelesscompounds .single_add_to_cart_button:hover {
	background-color: var(--tc-accent-strong);
	border-color: var(--tc-accent-strong);
	color: var(--tc-accent-contrast);
}

/* --- Catalogue ----------------------------------------------------------- */

.tc-mode-timelesscompounds.woocommerce ul.products li.product,
.tc-mode-timelesscompounds .woocommerce ul.products li.product {
	background-color: var(--tc-surface-raised);
	border: 1px solid var(--tc-border);
	border-radius: var(--tc-radius);
	padding: var(--tc-space-sm) var(--tc-space-sm) var(--tc-space-md);
	transition: border-color var(--tc-duration) var(--tc-ease),
		transform var(--tc-duration) var(--tc-ease),
		box-shadow var(--tc-duration) var(--tc-ease);
}

.tc-mode-timelesscompounds.woocommerce ul.products li.product:hover,
.tc-mode-timelesscompounds .woocommerce ul.products li.product:hover {
	border-color: var(--tc-accent-deep);
	transform: translateY(-3px);
	box-shadow: 0 12px 34px rgba( 0, 0, 0, 0.55 ), 0 0 0 1px rgba( 217, 177, 102, 0.18 );
}

.tc-mode-timelesscompounds.woocommerce ul.products li.product .woocommerce-loop-product__title,
.tc-mode-timelesscompounds .woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--tc-font-display);
	font-size: 1.35rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--tc-ink);
}

.tc-mode-timelesscompounds .woocommerce ul.products li.product .price,
.tc-mode-timelesscompounds.woocommerce ul.products li.product .price,
.tc-mode-timelesscompounds .woocommerce div.product p.price,
.tc-mode-timelesscompounds.woocommerce div.product p.price {
	color: var(--tc-accent);
	font-family: var(--tc-font-mono);
	font-variant-numeric: tabular-nums;
}

.tc-mode-timelesscompounds .woocommerce ul.products li.product img {
	background-color: #000;
	border: 1px solid var(--tc-border);
	border-radius: var(--tc-radius);
}

.tc-mode-timelesscompounds.woocommerce span.onsale,
.tc-mode-timelesscompounds .woocommerce span.onsale {
	background-color: var(--tc-accent);
	color: var(--tc-accent-contrast);
	font-family: var(--tc-font-body);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* --- Single product ------------------------------------------------------ */

.tc-mode-timelesscompounds.woocommerce div.product .product_title,
.tc-mode-timelesscompounds .woocommerce div.product .product_title {
	font-size: clamp( 2.2rem, 1.6rem + 2.4vw, 3.4rem );
	letter-spacing: 0.03em;
}

.tc-mode-timelesscompounds .woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--tc-text-muted);
	font-size: 1.05rem;
}

.tc-mode-timelesscompounds .woocommerce div.product form.cart div.quantity input,
.tc-mode-timelesscompounds .quantity input.qty {
	background-color: var(--tc-surface-raised);
	border: 1px solid var(--tc-border);
	color: var(--tc-ink);
}

.tc-mode-timelesscompounds .woocommerce div.product .woocommerce-tabs ul.tabs {
	border-bottom-color: var(--tc-border);
}

.tc-mode-timelesscompounds .woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: var(--tc-text-muted);
	letter-spacing: 0.16em;
}

.tc-mode-timelesscompounds .woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--tc-accent);
	border-bottom-color: var(--tc-accent);
}

.tc-mode-timelesscompounds .woocommerce div.product .woocommerce-tabs .panel h2 {
	font-family: var(--tc-font-display);
	color: var(--tc-ink);
}

.tc-mode-timelesscompounds .product_meta {
	border-top: 1px solid var(--tc-border);
	padding-top: var(--tc-space-sm);
	font-size: 0.8125rem;
	color: var(--tc-text-muted);
}

/* --- Plugin components on a dark ground ---------------------------------- */

.tc-mode-timelesscompounds .tc-specs th {
	color: var(--tc-accent-deep);
	letter-spacing: 0.14em;
	border-bottom-color: var(--tc-border);
}

.tc-mode-timelesscompounds .tc-specs td,
.tc-mode-timelesscompounds .tc-lot__results td,
.tc-mode-timelesscompounds .tc-lot__results th,
.tc-mode-timelesscompounds .tc-lot-list__table td,
.tc-mode-timelesscompounds .tc-lot-list__table th {
	border-bottom-color: var(--tc-border);
}

.tc-mode-timelesscompounds .tc-current-lot {
	border-top: 1px solid var(--tc-accent-deep);
	border-bottom: 1px solid var(--tc-border);
	background: linear-gradient( 180deg, rgba( 217, 177, 102, 0.05 ), transparent );
}

.tc-mode-timelesscompounds .tc-current-lot__number {
	color: var(--tc-accent-strong);
}

/* The RUO block is the one piece of compliance text on every product page. It
   gets the brand's hairline gold frame rather than being tucked away — on this
   site the disclaimer is part of the identity, not an apology. */
.tc-mode-timelesscompounds .tc-disclaimer--ruo {
	border: 1px solid var(--tc-accent-deep);
	border-left-width: 2px;
	background: linear-gradient( 180deg, rgba( 217, 177, 102, 0.06 ), rgba( 8, 8, 8, 0 ) );
	border-radius: var(--tc-radius);
}

.tc-mode-timelesscompounds .tc-disclaimer--ruo .tc-disclaimer__headline {
	color: var(--tc-accent-strong);
	letter-spacing: 0.14em;
	font-weight: 500;
}

.tc-mode-timelesscompounds .tc-footer-disclaimer {
	background-color: transparent;
	border-top: 1px solid var(--tc-border);
	color: var(--tc-text-muted);
}

.tc-mode-timelesscompounds .tc-lot-page__title {
	color: var(--tc-accent-strong);
	border-bottom-color: var(--tc-accent-deep);
}

.tc-mode-timelesscompounds .tc-lot__embed {
	border-color: var(--tc-border);
	background-color: var(--tc-surface-raised);
}

/* --- Sidebar, forms, footer ---------------------------------------------- */

.tc-mode-timelesscompounds .widget,
.tc-mode-timelesscompounds .widget-area .widget {
	background-color: transparent;
	color: var(--tc-ink);
}

.tc-mode-timelesscompounds .widget h2,
.tc-mode-timelesscompounds .widget .widget-title {
	font-family: var(--tc-font-body);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--tc-accent-deep);
	padding-bottom: var(--tc-space-xs);
	border-bottom: 1px solid var(--tc-border);
}

.tc-mode-timelesscompounds .widget ul li {
	border-bottom: 1px solid var(--tc-border);
	padding: 0.4rem 0;
}

.tc-mode-timelesscompounds input[type="text"],
.tc-mode-timelesscompounds input[type="email"],
.tc-mode-timelesscompounds input[type="tel"],
.tc-mode-timelesscompounds input[type="password"],
.tc-mode-timelesscompounds input[type="search"],
.tc-mode-timelesscompounds input[type="number"],
.tc-mode-timelesscompounds input[type="date"],
.tc-mode-timelesscompounds textarea,
.tc-mode-timelesscompounds select,
.tc-mode-timelesscompounds .select2-container .select2-selection {
	background-color: var(--tc-surface-raised);
	border: 1px solid var(--tc-border);
	color: var(--tc-ink);
	box-shadow: none;
}

.tc-mode-timelesscompounds ::placeholder {
	color: #6E675E;
}

.tc-mode-timelesscompounds .site-footer {
	background-color: transparent;
	border-top: 1px solid var(--tc-border);
	color: var(--tc-text-muted);
}

.tc-mode-timelesscompounds .site-footer a {
	color: var(--tc-text-muted);
}

.tc-mode-timelesscompounds .site-footer a:hover {
	color: var(--tc-accent);
}

/* --- WooCommerce chrome --------------------------------------------------- */

.tc-mode-timelesscompounds .woocommerce-breadcrumb,
.tc-mode-timelesscompounds .woocommerce-result-count,
.tc-mode-timelesscompounds .woocommerce-ordering select {
	color: var(--tc-text-muted);
	font-size: 0.8125rem;
}

.tc-mode-timelesscompounds .woocommerce-message,
.tc-mode-timelesscompounds .woocommerce-info,
.tc-mode-timelesscompounds .woocommerce-error {
	background-color: var(--tc-surface-raised);
	border-top-color: var(--tc-accent);
	color: var(--tc-ink);
}

.tc-mode-timelesscompounds .woocommerce table.shop_table,
.tc-mode-timelesscompounds .woocommerce table.shop_table td,
.tc-mode-timelesscompounds .woocommerce table.shop_table th,
.tc-mode-timelesscompounds .woocommerce-cart table.cart td.actions {
	background-color: transparent;
	border-color: var(--tc-border);
	color: var(--tc-ink);
}

.tc-mode-timelesscompounds .woocommerce .cart_totals,
.tc-mode-timelesscompounds .woocommerce-checkout #order_review,
.tc-mode-timelesscompounds #payment {
	background-color: var(--tc-surface-raised);
	border: 1px solid var(--tc-border);
}

.tc-mode-timelesscompounds .woocommerce-tabs .panel,
.tc-mode-timelesscompounds .storefront-sorting {
	color: var(--tc-ink);
}

/* =========================================================================
   12. Research homepage sections
   ---------------------------------------------------------------------- */

.tc-mode-timelesscompounds .has-text-align-center {
	margin-left: auto;
	margin-right: auto;
}

.tc-mode-timelesscompounds .tc-hero {
	text-align: center;
}

.tc-mode-timelesscompounds .tc-eyebrow {
	margin-bottom: var(--tc-space-md);
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: 0.44em;
	text-transform: uppercase;
	color: var(--tc-accent-deep);
}

.tc-mode-timelesscompounds .tc-hero__title {
	margin: 0 0 var(--tc-space-md);
	font-size: clamp( 3rem, 1.8rem + 6vw, 6.5rem );
	font-weight: 300;
	letter-spacing: 0.06em;
	line-height: 1.02;
	background: linear-gradient( 175deg, #FDE5AF 8%, #D9B166 38%, #946E38 68%, #E7CE96 100% );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.tc-mode-timelesscompounds .tc-hero__lede {
	max-width: 44rem;
	margin: 0 auto var(--tc-space-lg);
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--tc-text-muted);
}

/* A hairline gold frame with a gap at the top, lifted from the brand cards. */
.tc-mode-timelesscompounds .tc-coa-band {
	position: relative;
	margin: var(--tc-space-2xl) auto;
	padding: var(--tc-space-xl) var(--tc-space-lg);
	border: 1px solid var(--tc-accent-deep);
	border-radius: var(--tc-radius);
	background: radial-gradient( 40rem 16rem at 50% 0%, rgba( 217, 177, 102, 0.08 ), transparent 70% );
}

.tc-mode-timelesscompounds .tc-coa-band::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 50%;
	transform: translateX(-50%);
	width: 6rem;
	height: 3px;
	background: var(--tc-surface);
}

.tc-mode-timelesscompounds .tc-coa-band h2 {
	font-size: clamp( 1.8rem, 1.2rem + 2.2vw, 3rem );
	font-weight: 300;
	letter-spacing: 0.04em;
	color: var(--tc-accent-strong);
}

.tc-mode-timelesscompounds .tc-coa-band p {
	max-width: 46rem;
	color: var(--tc-text-muted);
}

.tc-mode-timelesscompounds .tc-pillars {
	margin: var(--tc-space-xl) auto;
	padding-top: var(--tc-space-lg);
	border-top: 1px solid var(--tc-border);
}

.tc-mode-timelesscompounds .tc-pillars h3 {
	margin-bottom: var(--tc-space-xs);
	font-family: var(--tc-font-body);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tc-accent);
}

.tc-mode-timelesscompounds .tc-pillars p {
	font-size: 0.875rem;
	line-height: 1.7;
	color: var(--tc-text-muted);
}

.tc-mode-timelesscompounds .tc-section-title {
	margin-top: var(--tc-space-2xl);
	font-size: clamp( 1.8rem, 1.3rem + 2vw, 2.8rem );
	font-weight: 300;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--tc-ink);
}

.tc-mode-timelesscompounds .tc-section-lede {
	max-width: 40rem;
	margin: 0 auto var(--tc-space-lg);
	color: var(--tc-text-muted);
	font-size: 0.9375rem;
}

/* Storefront's own homepage product sections. */
.tc-mode-timelesscompounds .storefront-product-section > h2,
.tc-mode-timelesscompounds .storefront-product-section .section-title {
	margin-top: var(--tc-space-2xl);
	font-family: var(--tc-font-display);
	font-size: clamp( 1.6rem, 1.2rem + 1.6vw, 2.4rem );
	font-weight: 300;
	letter-spacing: 0.08em;
	text-align: center;
	color: var(--tc-ink);
}

.tc-mode-timelesscompounds .storefront-product-section ul.products li.product-category .woocommerce-loop-category__title {
	font-family: var(--tc-font-body);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tc-accent);
}

/* Kept in step with the header rule in section 13, which is the one that wins.
   Two different heights here read as a bug to whoever finds them next. */
.tc-mode-timelesscompounds .site-branding img.custom-logo {
	max-height: 72px;
	width: auto;
}

/* The homepage template prints the page title above the content; the hero is the
   title on this page, so the duplicate is hidden rather than deleted (screen
   readers still get the h1 from the hero). */
.tc-mode-timelesscompounds.page-template-template-homepage .entry-title,
.tc-mode-timelesscompounds.home .entry-header .entry-title,
.tc-mode-livingforyourhealth.page-template-template-homepage .entry-title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Storefront's homepage sections sit tighter than the hero wants. */
.tc-mode-timelesscompounds .storefront-full-width-content .tc-hero {
	padding-top: 3rem;
}

/* Block-editor buttons are a separate element from WooCommerce buttons and need
   the same treatment, or the hero call to action arrives as a white slab. */
.tc-mode-timelesscompounds .wp-block-button__link,
.tc-mode-timelesscompounds .wp-element-button {
	background-color: var(--tc-accent);
	background-image: none;
	border: 1px solid var(--tc-accent);
	border-radius: var(--tc-radius);
	color: var(--tc-accent-contrast);
	font-family: var(--tc-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 1.05em 2.4em;
	box-shadow: none;
	transition: background-color var(--tc-duration) var(--tc-ease),
		transform var(--tc-duration) var(--tc-ease);
}

.tc-mode-timelesscompounds .wp-block-button__link:hover,
.tc-mode-timelesscompounds .wp-element-button:hover {
	background-color: var(--tc-accent-strong);
	border-color: var(--tc-accent-strong);
	color: var(--tc-accent-contrast);
	transform: translateY(-1px);
}

/* `.entry-content p { max-width: none }` is right for prose and wrong for these
   centred blocks, so they reclaim their measure explicitly. */
.tc-mode-timelesscompounds .entry-content p.tc-hero__lede { max-width: 44rem; margin-left: auto; margin-right: auto; }
.tc-mode-timelesscompounds .entry-content .tc-coa-band p  { max-width: 46rem; margin-left: auto; margin-right: auto; }
.tc-mode-timelesscompounds .entry-content p.tc-section-lede { max-width: 40rem; margin-left: auto; margin-right: auto; }
.tc-mode-timelesscompounds .entry-content .tc-pillars p   { max-width: 22rem; margin-left: auto; margin-right: auto; }

/* Storefront colours table cells for a light ground; on black the values were
   almost invisible against the surface. */
.tc-mode-timelesscompounds .tc-specs td,
.tc-mode-timelesscompounds .tc-lot__results td,
.tc-mode-timelesscompounds .tc-lot-list__table td,
.tc-mode-timelesscompounds .woocommerce table.shop_attributes td,
.tc-mode-timelesscompounds .woocommerce table.shop_attributes th {
	color: var(--tc-ink);
	background-color: transparent;
}

.tc-mode-timelesscompounds .tc-specs tr:nth-child(odd) td,
.tc-mode-timelesscompounds .tc-specs tr:nth-child(odd) th {
	background-color: rgba( 255, 255, 255, 0.015 );
}

.tc-mode-timelesscompounds .woocommerce div.product .stock,
.tc-mode-timelesscompounds .woocommerce .stock.in-stock {
	color: var(--tc-accent-deep);
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
}

.tc-mode-timelesscompounds .woocommerce div.product .out-of-stock {
	color: var(--tc-signal);
}

.tc-mode-timelesscompounds .woocommerce-product-gallery__trigger {
	background-color: var(--tc-surface-raised);
	border: 1px solid var(--tc-border);
	color: var(--tc-accent);
}

/* Storefront zebra-stripes table rows with #fbfbfb, which on a black ground puts
   cream text on near-white. Reclaim every table background, then re-stripe by
   lightening the dark surface instead. */
.tc-mode-timelesscompounds table tbody tr td,
.tc-mode-timelesscompounds table tbody tr th,
.tc-mode-timelesscompounds table tbody tr:nth-child(2n) td,
.tc-mode-timelesscompounds table tbody tr:nth-child(2n) th,
.tc-mode-timelesscompounds .tc-specs tbody tr:nth-child(2n) td,
.tc-mode-timelesscompounds .tc-specs tbody tr:nth-child(2n) th,
.tc-mode-timelesscompounds .woocommerce table.shop_attributes tr:nth-child(2n) td,
.tc-mode-timelesscompounds .woocommerce table.shop_attributes tr:nth-child(2n) th {
	background-color: transparent;
	color: var(--tc-ink);
}

.tc-mode-timelesscompounds .tc-specs tbody tr:nth-child(2n) td,
.tc-mode-timelesscompounds .tc-specs tbody tr:nth-child(2n) th,
.tc-mode-timelesscompounds .tc-lot__results tbody tr:nth-child(2n) td,
.tc-mode-timelesscompounds .tc-lot-list__table tbody tr:nth-child(2n) td {
	background-color: rgba( 255, 255, 255, 0.025 );
}

.tc-mode-timelesscompounds .tc-specs th,
.tc-mode-timelesscompounds .tc-lot__fact dt {
	color: var(--tc-accent-deep);
}

/* The zebra override above outranked the gold label colour on even rows. */
.tc-mode-timelesscompounds .tc-specs tbody tr:nth-child(2n) th,
.tc-mode-timelesscompounds .tc-lot__results tbody tr:nth-child(2n) th {
	color: var(--tc-accent-deep);
}

/* =========================================================================
   13. Single-row header, and the footer band
   ---------------------------------------------------------------------- */

.tc-shell .site-header .col-full {
	display: flex;
	align-items: center;
	gap: var(--tc-space-md);
	flex-wrap: wrap;
}

.tc-shell .site-header .site-branding {
	margin: 0;
	padding: 0;
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	float: none;
}

/* The logo is a horizontal lockup — ring, monogram and wordmark on one line — so
   it carries the header at a fraction of the height the old stacked mark needed.
   Dropping from 132px reclaims roughly 60px of header on every page; the cap is
   height, not width, because WordPress separately limits the logo to 230px wide. */
.tc-shell .site-branding img.custom-logo,
.tc-mode-timelesscompounds .site-header .custom-logo-link img {
	max-height: 72px;
	width: auto;
	margin: 0;
	/* Lifts the gold off the near-black ground so it reads at a glance. */
	filter: drop-shadow( 0 0 22px rgba( 217, 177, 102, 0.30 ) )
	        drop-shadow( 0 0 4px rgba( 253, 229, 175, 0.20 ) );
}

.tc-shell .site-header .main-navigation,
.tc-shell .site-header .storefront-primary-navigation {
	/* Content width only, and allowed to shrink. With flex-grow it swallowed
	   800px and pushed the search and cart onto a second row. The margin
	   shorthand must come before margin-right, or it resets it. */
	flex: 0 1 auto;
	min-width: 0;
	margin: 0;
	margin-right: auto;
	padding: 0;
	background: transparent;
	float: none;
	width: auto;
}

.tc-shell .site-header .main-navigation ul.menu,
.tc-shell .site-header .main-navigation ul.nav-menu {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: var(--tc-space-md);
	margin: 0;
	padding: 0;
	float: none;
}

.tc-shell .site-header .main-navigation ul li {
	float: none;
	margin: 0;
	padding: 0;
}

.tc-shell .site-header .main-navigation ul li a {
	padding: 0;
	font-size: 0.8125rem;
	letter-spacing: 0.22em;
}

.tc-shell .site-header .site-search {
	flex: 0 1 17rem;
	margin: 0;
	padding: 0;
	width: auto;
	float: none;
	order: 8;
}

.tc-shell .site-header .site-header-cart {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
	float: none;
	width: auto;
	order: 9;
}

.tc-shell .site-header .site-header-cart li { margin: 0; padding: 0; }
.tc-shell .site-header .site-header-cart .cart-contents { padding: 0 0 0 var(--tc-space-sm); }

.tc-shell .tc-header-checkout {
	order: 10;
	display: flex;
	align-items: center;
}

.tc-shell .tc-header-checkout a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	border: 1px solid var(--tc-border);
	border-radius: 50%;
	background-image: none;
	color: var(--tc-accent);
}

.tc-mode-timelesscompounds .tc-header-checkout a:hover {
	border-color: var(--tc-accent);
	background-color: rgba( 217, 177, 102, 0.10 );
}

/* Inline SVG so the icon needs no font and no extra request. */
.tc-shell .tc-icon-checkout {
	width: 1.05rem;
	height: 1.05rem;
	background-color: currentColor;
	-webkit-mask: var(--tc-checkout-icon) center / contain no-repeat;
	mask: var(--tc-checkout-icon) center / contain no-repeat;
}

.tc-shell {
	--tc-checkout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11.2a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.5L21 8H6'/%3E%3Ccircle cx='10' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3Cpath d='m10.5 11.5 1.8 1.8 3.4-3.6'/%3E%3C/svg%3E");
}

@media (max-width: 900px) {
	.tc-shell .site-header .col-full { gap: var(--tc-space-md); }
	.tc-shell .site-header .site-search { flex-basis: 100%; order: 12; }
	/* Below ~60px the "COMPOUNDS" line in the lockup stops resolving. */
	.tc-shell .site-branding img.custom-logo { max-height: 60px; }
}

/* --- Footer band: copyright and compliance line share a row -------------- */

.tc-footer-band {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--tc-space-md);
	max-width: 66.5rem;
	margin: 0 auto;
	padding: var(--tc-space-md) var(--tc-space-md) var(--tc-space-lg);
}

.tc-shell .tc-footer-band {
	border-top: 1px solid var(--tc-border);
}

.tc-footer-band .tc-footer-disclaimer {
	flex: 1 1 26rem;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	text-align: left;
}

.tc-footer-band .tc-footer-disclaimer p {
	max-width: none;
	margin: 0;
	font-size: var(--tc-footer-text-size);
	line-height: 1.6;
}

.tc-footer-band .tc-footer-line {
	flex: 0 0 auto;
	padding: 0;
	white-space: nowrap;
}

.tc-footer-band .tc-footer-line p {
	margin: 0;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	color: var(--tc-text-muted);
}

@media (max-width: 700px) {
	.tc-footer-band { flex-direction: column; align-items: flex-start; }
	.tc-footer-band .tc-footer-line { white-space: normal; }
}

/* Cart as an icon with a count, rather than a price and an item count in words. */
.tc-shell .site-header-cart .cart-contents {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--tc-font-mono);
	font-size: 0.75rem;
	color: var(--tc-accent);
}

.tc-shell .site-header-cart .cart-contents .amount { display: none; }

.tc-shell .site-header-cart .cart-contents .count {
	font-size: 0.7rem;
	letter-spacing: 0.04em;
}

.tc-shell .site-header .site-branding,
.tc-shell .site-header .main-navigation { clear: none; }

/* The nav element was sized to content, but the ul inside still carried
   Storefront's width:100%, so the nav measured ~460px and pushed the checkout
   icon onto a second row. Both need to collapse to content width. */
.tc-shell .site-header .main-navigation {
	max-width: max-content;
}

.tc-shell .site-header .main-navigation ul.menu,
.tc-shell .site-header .main-navigation ul.nav-menu,
.tc-shell .site-header .main-navigation div.menu {
	width: auto;
	max-width: max-content;
}

/* Storefront wraps the menu in .primary-navigation (and a fallback div.menu).
   Both are block-level and were filling the header, so the nav measured ~460px
   no matter what the ul did. */
.tc-shell .site-header .main-navigation .primary-navigation,
.tc-shell .site-header .main-navigation > div.menu {
	display: inline-block;
	width: auto;
	max-width: max-content;
	float: none;
}

/* Storefront sizes header children with a percentage float grid defined across
   several minified rules and media queries. Matching its specificity from a
   child theme turns into a guessing game, so the widths are pinned here. This is
   the sanctioned place for a child theme to override a parent's layout, and the
   declarations are confined to the header row. */
.tc-shell .site-header .main-navigation {
	width: max-content !important;
	max-width: 34rem !important;
	flex: 0 0 auto !important;
}

.tc-shell .site-header .site-search {
	width: 17rem !important;
	flex: 0 1 17rem !important;
}

.tc-shell .site-header .site-branding {
	width: auto !important;
	flex: 0 0 auto !important;
}

.tc-shell .site-header .site-header-cart {
	width: auto !important;
	flex: 0 0 auto !important;
}

/* =========================================================================
   14. Header row — authoritative layout
   =========================================================================
   Storefront lays the header out with percentage-width floats spread across
   several minified rules and breakpoints. Overriding those one at a time turned
   into whack-a-mole, so the row is rebuilt as an explicit grid: every child is
   reset, then placed. Grid ignores the float widths entirely, which makes this
   both shorter and far more predictable than out-specifying the parent.

   Columns: logo | menu | spacer | search | cart | checkout
   ---------------------------------------------------------------------- */

.tc-shell .site-header .col-full {
	display: grid !important;
	/* One flexible track after the logo pushes the menu across to sit directly
	   beside the search box. */
	grid-template-columns: auto 1fr auto auto auto auto;
	align-items: center;
	column-gap: 1.5rem;
	row-gap: 0;
}

.tc-shell .site-header .col-full > * {
	float: none !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
	clear: none !important;
}

/* Skip links must not consume a grid cell. */
.tc-shell .site-header .col-full > .skip-link {
	position: absolute !important;
}

.tc-shell .site-header .site-branding   { grid-column: 1; align-self: center; }
.tc-shell .site-header .main-navigation { grid-column: 3; align-self: center; }
.tc-shell .site-header .site-search     { grid-column: 4; width: 17rem !important; align-self: center; }
.tc-shell .site-header .site-header-cart{ grid-column: 5; align-self: center; }
.tc-shell .site-header .tc-header-checkout { grid-column: 6; align-self: center; }

.tc-shell .site-header .main-navigation .primary-navigation,
.tc-shell .site-header .main-navigation > div.menu,
.tc-shell .site-header .main-navigation ul.menu,
.tc-shell .site-header .main-navigation ul.nav-menu {
	width: auto !important;
	max-width: none !important;
	float: none !important;
}

/* The six-column header needs about 1200px of window to hold everything on one
   row: logo 207, menu 376, search 272, cart 103, checkout 38 and five gaps. Below
   that the grid does not wrap — it crushes the menu's column instead, and the menu
   itself does not wrap either, so the list overflows its own column and the first
   item ends up UNDER the logo. Nothing looks broken; the item is simply not there.
   Raised from 980px, which was set before the menu gained a Home item and a wider
   logo lockup, and had left a band of widths where the header quietly ate a link. */
@media (max-width: 1200px) {
	.tc-shell .site-header .col-full {
		grid-template-columns: auto 1fr auto auto;
		row-gap: var(--tc-space-sm);
	}
	.tc-shell .site-header .site-branding    { grid-column: 1; }
	.tc-shell .site-header .main-navigation  { grid-column: 2; }
	.tc-shell .site-header .site-header-cart { grid-column: 3; }
	.tc-shell .site-header .tc-header-checkout { grid-column: 4; }
	.tc-shell .site-header .site-search      { grid-column: 1 / -1; width: 100% !important; }
}

/* The nav box is centred by the grid, but its list was left-aligned inside that
   box, so the links still read as sitting left of centre. */
.tc-shell .site-header .main-navigation ul.menu,
.tc-shell .site-header .main-navigation ul.nav-menu {
	justify-content: center;
}

.tc-shell .site-header .main-navigation,
.tc-shell .site-header .main-navigation .primary-navigation,
.tc-shell .site-header .main-navigation > div.menu {
	text-align: center;
}

/* =========================================================================
   15. Header refinements and the certificate search
   ---------------------------------------------------------------------- */

/* The nav, the search field and the cart all sit on different internal
   baselines. Zeroing the list's vertical padding and matching line-height is
   what actually lines them up — align-items alone centres the boxes, not the
   text inside them. */
.tc-mode-timelesscompounds .site-header .main-navigation ul.menu,
.tc-mode-timelesscompounds .site-header .main-navigation ul.nav-menu {
	line-height: 1;
}

.tc-mode-timelesscompounds .site-header .main-navigation ul li a {
	display: block;
	padding: 0;
	line-height: 1;
}

.tc-mode-timelesscompounds .site-header .site-search form,
.tc-mode-timelesscompounds .site-header .site-search .widget_product_search,
.tc-mode-timelesscompounds .site-header .site-search .woocommerce-product-search {
	margin: 0;
	display: flex;
	align-items: center;
}

.tc-mode-timelesscompounds .site-header .site-search input[type="search"] {
	margin: 0;
	line-height: 1.2;
}

/* The cart count was too faint to read as a control. */
.tc-mode-timelesscompounds .site-header-cart .cart-contents {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--tc-accent-strong);
	letter-spacing: 0.06em;
}

.tc-mode-timelesscompounds .site-header-cart .cart-contents .count {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--tc-accent-strong);
	opacity: 1;
}

.tc-mode-timelesscompounds .site-header-cart .cart-contents:hover,
.tc-mode-timelesscompounds .site-header-cart .cart-contents:hover .count {
	color: #fff;
}

.tc-mode-timelesscompounds .tc-header-checkout a {
	border-color: var(--tc-accent-deep);
	color: var(--tc-accent-strong);
}

/* --- Certificate search -------------------------------------------------- */

.tc-lot-search {
	max-width: 40rem;
	margin: 0 auto var(--tc-space-xl);
	padding: var(--tc-space-md) var(--tc-space-lg) var(--tc-space-md);
	border: 1px solid var(--tc-border);
	border-radius: var(--tc-radius);
	background: var(--tc-surface-raised);
}

.tc-mode-timelesscompounds .tc-lot-search {
	border-color: var(--tc-accent-deep);
	background: radial-gradient( 30rem 12rem at 50% 0%, rgba( 217, 177, 102, 0.07 ), transparent 70% ),
	            var(--tc-surface-raised);
}

.tc-lot-search__label {
	display: block;
	margin-bottom: var(--tc-space-xs);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tc-accent);
}

.tc-lot-search__row {
	display: flex;
	gap: var(--tc-space-xs);
	align-items: stretch;
	flex-wrap: wrap;
}

.tc-lot-search__row input[type="search"] {
	flex: 1 1 16rem;
	min-width: 0;
	font-family: var(--tc-font-mono);
	font-size: 0.9375rem;
}

.tc-lot-search__clear {
	align-self: center;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.tc-lot-search__hint {
	margin: var(--tc-space-xs) 0 0;
	max-width: none;
	font-size: 0.75rem;
	color: var(--tc-text-muted);
}

.tc-lot-archive__result-count {
	max-width: none;
	margin-bottom: var(--tc-space-md);
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	color: var(--tc-text-muted);
}

.tc-lot-archive {
	max-width: 62rem;
	margin: 0 auto;
	padding: var(--tc-space-lg) var(--tc-space-md) var(--tc-space-2xl);
}

.tc-mode-timelesscompounds .tc-lot-archive__title {
	color: var(--tc-accent-strong);
}

.tc-lot-archive__intro {
	max-width: 44rem;
	margin: 0 auto var(--tc-space-lg);
	text-align: center;
	color: var(--tc-text-muted);
}

.tc-lot-archive__header {
	text-align: center;
}

/* Storefront paints thead with a light fill, which on black became a white bar
   across the certificate table. */
.tc-mode-timelesscompounds table thead th,
.tc-mode-timelesscompounds .tc-lot-list__table thead th,
.tc-mode-timelesscompounds .tc-lot__results thead th,
.tc-mode-timelesscompounds .woocommerce table.shop_table thead th {
	background-color: transparent;
	border-bottom: 1px solid var(--tc-accent-deep);
	color: var(--tc-accent-deep);
	font-family: var(--tc-font-body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.tc-mode-timelesscompounds table thead,
.tc-mode-timelesscompounds .tc-lot-list__table thead {
	background-color: transparent;
}

/* Lot numbers are the thing people scan for; give them the accent. */
.tc-mode-timelesscompounds .tc-lot-list__table td:first-child a {
	color: var(--tc-accent-strong);
	font-family: var(--tc-font-mono);
}

/* Auto-placement was putting the search on a second grid row on some templates.
   Pinning every header item to row 1 removes the ambiguity entirely. */
.tc-shell .site-header .site-branding,
.tc-shell .site-header .main-navigation,
.tc-shell .site-header .site-search,
.tc-shell .site-header .site-header-cart,
.tc-shell .site-header .tc-header-checkout {
	grid-row: 1 !important;
}

/* Kept in step with the header grid above; the search only has a second row to
   move to while that four-column layout is the one in force. */
@media (max-width: 1200px) {
	.tc-shell .site-header .site-search {
		grid-row: 2 !important;
	}
}

/* =========================================================================
   16. Header alignment, mini-cart, and variation selects
   ---------------------------------------------------------------------- */

/* The nav BOX was centred correctly, but its list sat at the top of that box —
   the nav is taller than its links, so centring the box was not enough. Making
   the nav a flex container centres the list inside it too. */
.tc-mode-timelesscompounds .site-header .main-navigation {
	display: flex !important;
	align-items: center;
	justify-content: center;
}

.tc-mode-timelesscompounds .site-header .main-navigation .primary-navigation,
.tc-mode-timelesscompounds .site-header .main-navigation > div.menu {
	display: flex;
	align-items: center;
}

/* --- Mini-cart dropdown --------------------------------------------------- */

.tc-mode-timelesscompounds .site-header-cart .widget_shopping_cart {
	background-color: #0E0E0E;
	border: 1px solid var(--tc-accent-deep);
	border-radius: var(--tc-radius);
	box-shadow: 0 18px 44px rgba( 0, 0, 0, 0.7 );
	padding: var(--tc-space-md);
	width: 22rem;
	max-width: calc( 100vw - 2rem );
	right: 0;
	left: auto;
}

.tc-mode-timelesscompounds .site-header-cart .widget_shopping_cart .widget_shopping_cart_content {
	font-family: var(--tc-font-body);
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--tc-ink);
}

.tc-mode-timelesscompounds .site-header-cart .cart_list,
.tc-mode-timelesscompounds .site-header-cart ul.cart_list {
	margin: 0 0 var(--tc-space-sm);
	padding: 0;
	list-style: none;
	max-height: 20rem;
	overflow-y: auto;
}

.tc-mode-timelesscompounds .site-header-cart ul.cart_list li {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--tc-space-sm);
	margin: 0;
	padding: var(--tc-space-sm) 0;
	border-bottom: 1px solid var(--tc-border);
	font-size: 0.8125rem;
	line-height: 1.45;
}

.tc-mode-timelesscompounds .site-header-cart ul.cart_list li:last-child {
	border-bottom: 0;
}

/* Storefront floats the thumbnail and absolutely positions the remove link;
   neither works inside a flex row. */
.tc-mode-timelesscompounds .site-header-cart ul.cart_list li img {
	order: -1;
	float: none;
	width: 3.25rem;
	height: auto;
	margin: 0;
	border: 1px solid var(--tc-border);
	border-radius: var(--tc-radius);
	background-color: #000;
}

.tc-mode-timelesscompounds .site-header-cart ul.cart_list li a:not(.remove) {
	display: block;
	padding: 0;
	font-family: var(--tc-font-display);
	font-size: 1rem;
	letter-spacing: 0.02em;
	color: var(--tc-ink);
	background-image: none;
}

.tc-mode-timelesscompounds .site-header-cart ul.cart_list li a:not(.remove):hover {
	color: var(--tc-accent-strong);
}

.tc-mode-timelesscompounds .site-header-cart ul.cart_list li .quantity {
	display: block;
	font-family: var(--tc-font-mono);
	font-size: 0.75rem;
	color: var(--tc-text-muted);
}

.tc-mode-timelesscompounds .site-header-cart ul.cart_list li a.remove {
	position: absolute;
	top: var(--tc-space-sm);
	right: 0;
	width: 1.25rem;
	height: 1.25rem;
	line-height: 1.15rem;
	text-align: center;
	font-size: 0.9rem;
	color: var(--tc-text-muted);
	border: 1px solid var(--tc-border);
	border-radius: 50%;
	background-image: none;
}

.tc-mode-timelesscompounds .site-header-cart ul.cart_list li a.remove:hover {
	color: var(--tc-signal);
	border-color: var(--tc-signal);
	background-color: transparent;
}

.tc-mode-timelesscompounds .site-header-cart .woocommerce-mini-cart__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 0 0 var(--tc-space-sm);
	padding-top: var(--tc-space-sm);
	border-top: 1px solid var(--tc-accent-deep);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tc-text-muted);
}

.tc-mode-timelesscompounds .site-header-cart .woocommerce-mini-cart__total .amount,
.tc-mode-timelesscompounds .site-header-cart .woocommerce-mini-cart__total strong {
	font-family: var(--tc-font-mono);
	font-size: 1rem;
	letter-spacing: 0;
	text-transform: none;
	color: var(--tc-accent-strong);
}

.tc-mode-timelesscompounds .site-header-cart .woocommerce-mini-cart__buttons {
	display: flex;
	gap: var(--tc-space-xs);
	margin: 0;
}

.tc-mode-timelesscompounds .site-header-cart .woocommerce-mini-cart__buttons a {
	flex: 1 1 0;
	margin: 0;
	padding: 0.8em 1em;
	text-align: center;
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
}

.tc-mode-timelesscompounds .site-header-cart .woocommerce-mini-cart__empty-message {
	margin: 0;
	font-size: 0.875rem;
	color: var(--tc-text-muted);
}

/* --- Variation selects ---------------------------------------------------- */

.tc-mode-timelesscompounds .woocommerce div.product form.cart .variations {
	margin-bottom: var(--tc-space-md);
	border: 0;
}

.tc-mode-timelesscompounds .woocommerce div.product form.cart .variations th,
.tc-mode-timelesscompounds .woocommerce div.product form.cart .variations td {
	padding: 0 0 var(--tc-space-xs);
	border: 0;
	background: transparent;
	vertical-align: middle;
}

.tc-mode-timelesscompounds .woocommerce div.product form.cart .variations th.label label {
	font-family: var(--tc-font-body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tc-accent-deep);
}

.tc-mode-timelesscompounds .woocommerce div.product form.cart .variations select {
	width: 100%;
	min-width: 14rem;
	padding: 0.7em 2.2em 0.7em 0.85em;
	background-color: var(--tc-surface-raised);
	border: 1px solid var(--tc-accent-deep);
	border-radius: var(--tc-radius);
	color: var(--tc-ink);
	font-family: var(--tc-font-body);
	font-size: 0.9375rem;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23D9B166' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.85em center;
	background-size: 0.7em;
}

.tc-mode-timelesscompounds .woocommerce div.product form.cart .reset_variations {
	display: inline-block;
	margin-top: var(--tc-space-2xs);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
}

.tc-mode-timelesscompounds .woocommerce div.product .single_variation_wrap .woocommerce-variation-price {
	margin-bottom: var(--tc-space-sm);
}

.tc-mode-timelesscompounds .woocommerce div.product .woocommerce-variation-price .amount {
	font-family: var(--tc-font-mono);
	font-size: 1.5rem;
	color: var(--tc-accent);
}

/* Storefront paints the mini-cart's total and button rows #F5F5F5, which on the
   dark dropdown showed as two white bars. It also collapses the item list to zero
   height, so the products never appeared. */
.tc-mode-timelesscompounds .site-header-cart .woocommerce-mini-cart__total,
.tc-mode-timelesscompounds .site-header-cart .woocommerce-mini-cart__buttons,
.tc-mode-timelesscompounds .site-header-cart .widget_shopping_cart .total,
.tc-mode-timelesscompounds .site-header-cart .widget_shopping_cart .buttons {
	background-color: transparent !important;
	padding-left: 0;
	padding-right: 0;
}

.tc-mode-timelesscompounds .site-header-cart ul.cart_list,
.tc-mode-timelesscompounds .site-header-cart .widget_shopping_cart .cart_list {
	height: auto !important;
	max-height: 20rem;
	overflow-y: auto;
	display: block !important;
}

.tc-mode-timelesscompounds .site-header-cart .widget_shopping_cart_content {
	color: var(--tc-ink);
}

/* Menu labels must not break across two lines. */
.tc-mode-timelesscompounds .site-header .main-navigation ul li a {
	white-space: nowrap;
}

/* Mini-cart rows: WooCommerce emits the remove link, then the product link, then
   a quantity span, as flat siblings. A flex row put the price above the name and
   stranded the remove control. Grid places all four without touching the markup. */
.tc-mode-timelesscompounds .site-header-cart ul.cart_list li {
	display: grid;
	grid-template-columns: 3.25rem 1fr 1.5rem;
	grid-template-rows: auto auto;
	column-gap: var(--tc-space-sm);
	row-gap: 0.15rem;
	align-items: center;
	position: relative;
}

.tc-mode-timelesscompounds .site-header-cart ul.cart_list li img {
	grid-column: 1;
	grid-row: 1 / span 2;
	order: 0;
	align-self: center;
}

.tc-mode-timelesscompounds .site-header-cart ul.cart_list li a:not(.remove) {
	grid-column: 2;
	grid-row: 1;
	align-self: end;
}

.tc-mode-timelesscompounds .site-header-cart ul.cart_list li .quantity {
	grid-column: 2;
	grid-row: 2;
	align-self: start;
}

.tc-mode-timelesscompounds .site-header-cart ul.cart_list li a.remove {
	grid-column: 3;
	grid-row: 1 / span 2;
	position: static;
	justify-self: end;
	align-self: center;
}

/* Both mini-cart buttons should read as brand controls: the secondary outlined,
   the primary filled. Storefront ships them light. */
.tc-mode-timelesscompounds .site-header-cart .woocommerce-mini-cart__buttons a.button {
	background-color: transparent;
	border: 1px solid var(--tc-accent-deep);
	color: var(--tc-accent-strong);
}

.tc-mode-timelesscompounds .site-header-cart .woocommerce-mini-cart__buttons a.button:hover {
	background-color: rgba( 217, 177, 102, 0.12 );
	border-color: var(--tc-accent);
}

.tc-mode-timelesscompounds .site-header-cart .woocommerce-mini-cart__buttons a.checkout,
.tc-mode-timelesscompounds .site-header-cart .woocommerce-mini-cart__buttons a.button.alt {
	background-color: var(--tc-accent);
	border-color: var(--tc-accent);
	color: var(--tc-accent-contrast);
	font-weight: 600;
}

.tc-mode-timelesscompounds .site-header-cart .woocommerce-mini-cart__buttons a.checkout:hover {
	background-color: var(--tc-accent-strong);
	border-color: var(--tc-accent-strong);
	color: var(--tc-accent-contrast);
}

/* WooCommerce nests the thumbnail INSIDE the product link, so it is not a grid
   child of the row and cannot be placed in its own column. The link becomes the
   flex row that carries thumbnail and name together; the quantity sits beneath,
   indented to line up with the name. */
.tc-mode-timelesscompounds .site-header-cart ul.cart_list li {
	grid-template-columns: 1fr 1.5rem;
}

.tc-mode-timelesscompounds .site-header-cart ul.cart_list li a:not(.remove) {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	align-items: center;
	gap: var(--tc-space-sm);
	align-self: center;
}

.tc-mode-timelesscompounds .site-header-cart ul.cart_list li a:not(.remove) img {
	width: 3.25rem;
	height: auto;
	flex: 0 0 auto;
	margin: 0;
	border: 1px solid var(--tc-border);
	border-radius: var(--tc-radius);
	background-color: #000;
}

.tc-mode-timelesscompounds .site-header-cart ul.cart_list li .quantity {
	grid-column: 1;
	grid-row: 2;
	padding-left: 4rem;
}

.tc-mode-timelesscompounds .site-header-cart ul.cart_list li a.remove {
	grid-column: 2;
	grid-row: 1 / span 2;
}

/* The rules above were scoped `.tc-mode-timelesscompounds .woocommerce div.product`, which
   needs a .woocommerce ANCESTOR. On a single product page that class sits on the
   body — the same element as .tc-mode-timelesscompounds — so the selector never matched
   and the variation dropdown kept Storefront's light styling. Scoped to the
   component instead. */
.tc-mode-timelesscompounds .variations {
	margin-bottom: var(--tc-space-md);
	border: 0;
	background: transparent;
}

.tc-mode-timelesscompounds .variations th,
.tc-mode-timelesscompounds .variations td {
	padding: 0 0 var(--tc-space-xs);
	border: 0;
	background: transparent;
	vertical-align: middle;
}

.tc-mode-timelesscompounds .variations th.label label,
.tc-mode-timelesscompounds .variations label {
	font-family: var(--tc-font-body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tc-accent-deep);
}

.tc-mode-timelesscompounds .variations select,
.tc-mode-timelesscompounds select.orderby,
.tc-mode-timelesscompounds .woocommerce-ordering select {
	width: auto;
	min-width: 15rem;
	max-width: 100%;
	padding: 0.75em 2.4em 0.75em 0.9em;
	background-color: var(--tc-surface-raised);
	border: 1px solid var(--tc-accent-deep);
	border-radius: var(--tc-radius);
	color: var(--tc-ink);
	font-family: var(--tc-font-body);
	font-size: 0.9375rem;
	line-height: 1.3;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23D9B166' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9em center;
	background-size: 0.7em;
}

.tc-mode-timelesscompounds .variations select:hover,
.tc-mode-timelesscompounds .variations select:focus {
	border-color: var(--tc-accent);
}

/* The dropdown list itself is painted by the OS; give it readable colours. */
.tc-mode-timelesscompounds .variations select option,
.tc-mode-timelesscompounds .woocommerce-ordering select option {
	background-color: #141414;
	color: var(--tc-ink);
}

.tc-mode-timelesscompounds .reset_variations {
	display: inline-block;
	margin-top: var(--tc-space-2xs);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
}

.tc-mode-timelesscompounds .woocommerce-variation-price .amount,
.tc-mode-timelesscompounds .single_variation .price .amount {
	font-family: var(--tc-font-mono);
	font-size: 1.5rem;
	color: var(--tc-accent);
}

.tc-mode-timelesscompounds .woocommerce-variation-availability .stock {
	color: var(--tc-accent-deep);
	font-size: 0.8125rem;
}

/* =========================================================================
   17. Mini-cart dropdown — explicit implementation
   =========================================================================
   The panel was computing to `position: static`, so it rendered in normal flow
   at zero width. That one fault produced everything that looked wrong about it:
   the thumbnail collapsed to a broken box, the product name wrapped one letter
   per line, and the panel had no dropdown behaviour to speak of. Rather than
   patch Storefront's version further, the dropdown is defined here outright.
   ---------------------------------------------------------------------- */

.tc-mode-timelesscompounds .site-header .site-header-cart {
	position: relative;
	z-index: 210;
}

/* Dimmed backdrop over the rest of the page while the panel is open.
   pointer-events:none is essential — a backdrop that accepts the mouse keeps the
   :hover alive and the panel never closes. */
.tc-mode-timelesscompounds .site-header .site-header-cart::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 1;
	background: rgba( 0, 0, 0, 0.66 );
	backdrop-filter: blur( 2px );
	-webkit-backdrop-filter: blur( 2px );
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--tc-duration) var(--tc-ease), visibility var(--tc-duration);
}

.tc-mode-timelesscompounds .site-header .site-header-cart:hover::after,
.tc-mode-timelesscompounds .site-header .site-header-cart:focus-within::after {
	opacity: 1;
	visibility: visible;
}

/* The trigger stays above its own backdrop. */
.tc-mode-timelesscompounds .site-header .site-header-cart .cart-contents {
	position: relative;
	z-index: 3;
}

.tc-mode-timelesscompounds .site-header .site-header-cart .widget_shopping_cart {
	display: block !important;
	position: absolute;
	top: 100%;          /* No gap: a gap between trigger and panel closes it mid-move. */
	right: 0;
	left: auto;
	z-index: 3;
	width: 23rem;
	max-width: calc( 100vw - 2rem );
	margin: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY( -6px );
	transition: opacity var(--tc-duration) var(--tc-ease),
		transform var(--tc-duration) var(--tc-ease),
		visibility var(--tc-duration);
}

.tc-mode-timelesscompounds .site-header .site-header-cart:hover .widget_shopping_cart,
.tc-mode-timelesscompounds .site-header .site-header-cart:focus-within .widget_shopping_cart {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY( 0 );
}

/* Guard against a zero-width row collapsing the thumbnail and wrapping the name
   one character per line, which is what the static panel produced. */
.tc-mode-timelesscompounds .site-header-cart ul.cart_list li a:not(.remove) {
	min-width: 0;
}

.tc-mode-timelesscompounds .site-header-cart ul.cart_list li a:not(.remove) img {
	width: 3.25rem !important;
	min-width: 3.25rem;
	max-width: 3.25rem;
	height: auto;
	object-fit: cover;
}

.tc-mode-timelesscompounds .site-header-cart ul.cart_list li a:not(.remove) {
	font-size: 0.9375rem;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

/* =========================================================================
   18. Reading size and vertical rhythm
   ---------------------------------------------------------------------- */

/* Jost runs small for its point size; 17px is a more comfortable base and lifts
   every relative size with it. */
body.tc-mode-timelesscompounds {
	font-size: 1.0625rem;
	line-height: 1.7;
}

.tc-mode-timelesscompounds .site-header .main-navigation ul li a {
	font-size: var(--tc-nav-size);
}

.tc-mode-timelesscompounds .tc-hero__lede {
	font-size: 1.125rem;
}

.tc-mode-timelesscompounds .tc-pillars p,
.tc-mode-timelesscompounds .tc-section-lede,
.tc-mode-timelesscompounds .tc-lot-search__hint,
.tc-mode-timelesscompounds .tc-footer-band .tc-footer-line p {
	font-size: 0.9375rem;
}

.tc-mode-timelesscompounds .tc-coa-band p,
.tc-mode-timelesscompounds .woocommerce div.product .woocommerce-product-details__short-description {
	font-size: 1.125rem;
}

.tc-mode-timelesscompounds .tc-specs,
.tc-mode-timelesscompounds .tc-lot-list__table,
.tc-mode-timelesscompounds .tc-lot__results,
.tc-mode-timelesscompounds .tc-lot__facts {
	font-size: 0.9375rem;
}

.tc-mode-timelesscompounds .tc-disclaimer {
	font-size: 0.9375rem;
}

.tc-mode-timelesscompounds .product_meta,
.tc-mode-timelesscompounds .woocommerce-breadcrumb,
.tc-mode-timelesscompounds .woocommerce-result-count {
	font-size: 0.875rem;
}

.tc-mode-timelesscompounds.woocommerce ul.products li.product .woocommerce-loop-product__title,
.tc-mode-timelesscompounds .woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1.45rem;
}

.tc-mode-timelesscompounds .woocommerce ul.products li.product .price,
.tc-mode-timelesscompounds.woocommerce ul.products li.product .price {
	font-size: 1rem;
}

/* The gap between the header rule and the hero was doing nothing but pushing the
   page down. */
.tc-mode-timelesscompounds .site-header {
	margin-bottom: var(--tc-space-md);
	padding-top: var(--tc-space-sm);
	padding-bottom: var(--tc-space-sm);
}

.tc-mode-timelesscompounds .tc-hero {
	padding-top: var(--tc-space-lg) !important;
	padding-bottom: var(--tc-space-lg) !important;
}

.tc-mode-timelesscompounds.home .site-content,
.tc-mode-timelesscompounds .site-content {
	padding-top: 0;
}

.tc-mode-timelesscompounds .tc-pillars {
	margin-top: var(--tc-space-lg);
}

/* Storefront stacks 72px on .site-main and another 44px on the page article,
   which on the homepage pushed the hero a long way below the header rule. */
.tc-mode-timelesscompounds .site-main {
	padding-top: var(--tc-space-md);
}

.tc-mode-timelesscompounds .site-main > .type-page,
.tc-mode-timelesscompounds .site-main > .type-product,
.tc-mode-timelesscompounds .site-main > article {
	padding-top: 0;
}

.tc-mode-timelesscompounds.home .site-main,
.tc-mode-timelesscompounds.page-template-template-homepage .site-main {
	padding-top: 0;
}

.tc-mode-timelesscompounds.home .tc-hero,
.tc-mode-timelesscompounds.page-template-template-homepage .tc-hero {
	padding-top: var(--tc-space-md) !important;
}

/* =========================================================================
   19. Mini-cart width, and a larger type scale
   ---------------------------------------------------------------------- */

/* Storefront sizes the panel `width: 100%` — of .site-header-cart, which the
   header reset had already shrunk to the width of the cart link (~42px). The
   panel inherited that, the grid row resolved to ~107px, and the product name
   wrapped one letter per line beside a thumbnail that never got room to load.
   Pinned outright so no ancestor width can leak into it. */
.tc-mode-timelesscompounds .site-header .site-header-cart .widget_shopping_cart {
	width: 23rem !important;
	min-width: 23rem !important;
	max-width: min( 23rem, calc( 100vw - 2rem ) ) !important;
}

.tc-mode-timelesscompounds .site-header-cart .widget_shopping_cart_content,
.tc-mode-timelesscompounds .site-header-cart ul.cart_list,
.tc-mode-timelesscompounds .site-header-cart ul.cart_list li {
	width: auto !important;
	max-width: none !important;
	min-width: 0;
}

/* Thumbnails are 324px images shown at 52px; give them explicit box dimensions so
   a slow or deferred load cannot collapse the row. */
.tc-mode-timelesscompounds .site-header-cart ul.cart_list li a:not(.remove) img {
	width: 3.25rem !important;
	height: 3.25rem !important;
	min-width: 3.25rem;
	object-fit: cover;
	display: block;
}

/* --- Type scale: 20px base ------------------------------------------------ */

body.tc-mode-timelesscompounds {
	font-size: 1.25rem;
	line-height: 1.65;
}

.tc-mode-timelesscompounds .site-header .main-navigation ul li a { font-size: var(--tc-nav-size); }

.tc-mode-timelesscompounds .tc-hero__lede { font-size: 1.3125rem; }

.tc-mode-timelesscompounds .tc-pillars p,
.tc-mode-timelesscompounds .tc-section-lede,
.tc-mode-timelesscompounds .tc-lot-search__hint,
.tc-mode-timelesscompounds .tc-footer-band .tc-footer-line p { font-size: 1.0625rem; }

.tc-mode-timelesscompounds .tc-coa-band p,
.tc-mode-timelesscompounds .woocommerce div.product .woocommerce-product-details__short-description { font-size: 1.3125rem; }

.tc-mode-timelesscompounds .tc-specs,
.tc-mode-timelesscompounds .tc-lot-list__table,
.tc-mode-timelesscompounds .tc-lot__results,
.tc-mode-timelesscompounds .tc-lot__facts,
.tc-mode-timelesscompounds .tc-disclaimer { font-size: 1.0625rem; }

.tc-mode-timelesscompounds .product_meta,
.tc-mode-timelesscompounds .woocommerce-breadcrumb,
.tc-mode-timelesscompounds .woocommerce-result-count { font-size: 1rem; }

.tc-mode-timelesscompounds.woocommerce ul.products li.product .woocommerce-loop-product__title,
.tc-mode-timelesscompounds .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1.7rem; }

.tc-mode-timelesscompounds .woocommerce ul.products li.product .price,
.tc-mode-timelesscompounds.woocommerce ul.products li.product .price { font-size: 1.1875rem; }

.tc-mode-timelesscompounds .button,
.tc-mode-timelesscompounds button,
.tc-mode-timelesscompounds input[type="submit"],
.tc-mode-timelesscompounds .woocommerce a.button,
.tc-mode-timelesscompounds .woocommerce button.button,
.tc-mode-timelesscompounds .wp-block-button__link,
.tc-mode-timelesscompounds .wp-element-button { font-size: 0.875rem; }

.tc-mode-timelesscompounds .tc-eyebrow { font-size: 0.8125rem; }
.tc-mode-timelesscompounds .tc-specs th,
.tc-mode-timelesscompounds .tc-lot__fact dt,
.tc-mode-timelesscompounds .variations label,
.tc-mode-timelesscompounds .tc-pillars h3,
.tc-mode-timelesscompounds .widget .widget-title { font-size: 0.8125rem; }

.tc-mode-timelesscompounds .site-header-cart .cart-contents,
.tc-mode-timelesscompounds .site-header-cart .cart-contents .count { font-size: 0.9375rem; }

.tc-mode-timelesscompounds .site-header-cart ul.cart_list li a:not(.remove) { font-size: 1.0625rem; }
.tc-mode-timelesscompounds .site-header-cart ul.cart_list li .quantity { font-size: 0.9375rem; }
.tc-mode-timelesscompounds .site-header-cart .woocommerce-mini-cart__total { font-size: 0.875rem; }
.tc-mode-timelesscompounds .site-header-cart .woocommerce-mini-cart__total .amount { font-size: 1.1875rem; }
.tc-mode-timelesscompounds .site-header-cart .woocommerce-mini-cart__buttons a { font-size: 0.8125rem; }

.tc-mode-timelesscompounds .variations select,
.tc-mode-timelesscompounds .woocommerce-ordering select { font-size: 1.0625rem; }

.tc-mode-timelesscompounds .tc-lot-search__row input[type="search"] { font-size: 1.0625rem; }
.tc-mode-timelesscompounds .tc-lot-search__label { font-size: 0.8125rem; }

/* =========================================================================
   20. The coming-soon page
   ----------------------------------------------------------------------
   WooCommerce renders its coming-soon template inside the active theme, so it
   inherits our palette — except for the banner heading, which it places inside a
   cover block. Storefront and WooCommerce both ship inline rules colouring that
   h1 near-black, and

       .wp-block-cover .wp-block-cover__inner-container h1:not(.has-text-color)

   is specificity (0,3,1), which outranks our (0,1,1) heading rule. Result: black
   text on the near-black ground — invisible, and the first thing a visitor sees
   while the store is gated.

   Scoped to .tc-shell and painted with the accent token, so each brand gets its
   own: gold on Timeless Research, green on Living for Your Health.
   ---------------------------------------------------------------------- */

.tc-shell .wp-block-cover .wp-block-cover__inner-container h1.woocommerce-coming-soon-banner,
.tc-shell h1.woocommerce-coming-soon-banner {
	color: var(--tc-accent);
	font-family: var(--tc-font-display);
}

/* The tagline beneath it, and any other copy the template drops on the page. */
.tc-shell .woocommerce-coming-soon-banner + p,
.tc-shell .wp-block-cover .wp-block-cover__inner-container .woocommerce-coming-soon-banner + p {
	color: var(--tc-ink);
}

/* =========================================================================
   21. The research-use attestation at checkout
   ----------------------------------------------------------------------
   The required checkbox above the place-order button, rendered by the plugin's
   TC_Checkout_Attestation. Two things are deliberate here.

   It is given a visible box rather than being styled as one more inline form
   row. The buyer is being asked to make a statement about what they will do
   with the material, and a legal attestation that looks like a newsletter
   opt-in will be clicked through without being read.

   The checkbox itself is enlarged and the whole sentence is inside the label,
   so the tap target is the full block rather than a 13px square. Brand colour
   comes from the accent token, so this reads as part of whichever site it is
   on without the rule knowing which site that is.
   ---------------------------------------------------------------------- */

.tc-shell .tc-attestation {
	margin: var(--tc-space-md) 0;
	padding: var(--tc-space-sm) var(--tc-space-md);
	border: 1px solid var(--tc-rule-strong);
	border-radius: var(--tc-radius);
	background: var(--tc-surface-muted);
}

.tc-shell .tc-attestation__label {
	display: flex;
	gap: var(--tc-space-sm);
	align-items: flex-start;
	margin: 0;
	cursor: pointer;
	font-weight: 400;
}

.tc-shell .tc-attestation__input {
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	margin: 0.15rem 0 0;
	accent-color: var(--tc-accent);
	cursor: pointer;
}

.tc-shell .tc-attestation__text {
	color: var(--tc-ink);
}

.tc-shell .tc-attestation__text a {
	color: var(--tc-accent);
	text-decoration: underline;
}

/* The asterisk WooCommerce styles red elsewhere; keep it legible on this ground. */
.tc-shell .tc-attestation__text .required {
	color: var(--tc-accent);
	border: 0;
	text-decoration: none;
}

/* Admin order screen: the recorded attestation, not an input. */
.tc-attestation-record {
	margin-top: 1em;
}

/* =========================================================================
   22. Button text size — reclaiming it from the parent theme
   ----------------------------------------------------------------------
   Section 19 sets every button to 0.875rem, and most of them obey. Two did
   not, because Storefront reaches them with selectors that outrank a
   .tc-mode-* class rule, and both of the escaping rules are relative units
   sized against a 20px body:

     #payment .place-order .button                          1.41575em -> 28px
       (woocommerce.css, specificity 1,2,0 — an ID beats our 0,3,1)

     .hentry .entry-content .wp-block-button
       .wp-block-button__link                                     1em -> 20px
       (gutenberg-blocks.css, specificity 0,4,0 — four classes beat our two)

   So Place Order rendered at twice the size of Add to Cart, and the homepage
   call-to-action buttons rendered at exactly body-copy size, which is why the
   hero read as two slabs of text rather than a paragraph followed by buttons.
   A button label should sit below body copy in the hierarchy; it is a control,
   not prose.

   Fixed by out-specifying rather than by !important, so these stay overridable
   in the ordinary way. Each selector below is the parent theme's own selector
   with one class in front of it, which is the smallest change that wins.

   Padding on both is em-based, so it follows the type down and the boxes come
   back into proportion without being touched here.
   ---------------------------------------------------------------------- */

.tc-shell #payment .place-order .button,
.tc-shell .hentry .entry-content .wp-block-button .wp-block-button__link,
.tc-shell .wp-block-button__link,
.tc-shell .wp-element-button {
	font-size: 0.875rem;
}

/* =========================================================================
   23. Light surfaces Storefront generates, and this theme has to close
   ----------------------------------------------------------------------
   Storefront writes a block of inline CSS from its customizer colour settings,
   and those settings describe a light theme. Most of what it paints has been
   overridden somewhere above — header, footer, buttons, inputs. What was left
   is a scatter of panels that stayed near-white while the text on them stayed
   our cream ink, which is light-on-light and effectively invisible:

     fieldset, fieldset legend            #fbfbfb  the Password change box on
                                                   /my-account/edit-account/
     #order_review                        #ffffff  the whole checkout summary
                                                   panel, privacy notice and
                                                   research-use attestation
                                                   included
     #payment .payment_methods > li       #f5f5f5  each gateway row
     #payment .payment_box, .place-order  #fafafa
     .order_details                       #f8f8f8  the order confirmation table
     table th / td / even rows            #f8f8f8 .. #fdfdfd
     .select2-dropdown                    #ffffff  the country and state pickers

   Two of these are on the purchase path, which is the reason this is worth
   doing properly rather than patching the one field that got reported.

   WHY NOT FIX IT AT THE SOURCE. Storefront derives all of it from theme mods,
   so setting those to the dark palette would fix every rule at once. They live
   in the database: they would not travel with a deploy, they would differ
   between the two sites, and a database restore would silently undo them. This
   is presentation, and presentation in this project travels as files.

   Each selector below is Storefront's own with .tc-shell in front of it, which
   is the smallest thing that outranks it and keeps the pairing readable. Scoped
   to .tc-shell rather than a brand class because both sites are dark surfaces;
   nothing here picks a hue.
   ---------------------------------------------------------------------- */

.tc-shell fieldset,
.tc-shell fieldset legend,
.tc-shell #order_review,
.tc-shell .order_details,
.tc-shell #payment .payment_methods > li:not(.woocommerce-notice),
.tc-shell #payment .payment_methods > li:not(.woocommerce-notice):hover,
.tc-shell #payment .payment_methods > li .payment_box,
.tc-shell #payment .place-order,
.tc-shell .storefront-product-pagination a,
.tc-shell .storefront-sticky-add-to-cart,
.tc-shell #comments .comment-list .comment-content .comment-text {
	background-color: var(--tc-surface-raised);
	color: var(--tc-ink);
}

/* Tables: Storefront paints the head, the body and every even row separately,
   each a slightly different near-white. Flattened onto the two surface tokens
   so a table reads as a table rather than as three shades of invisible. */
.tc-shell table:not(.has-background) th {
	background-color: var(--tc-surface-muted);
	color: var(--tc-ink);
}

.tc-shell table:not(.has-background) tbody td,
.tc-shell table:not(.has-background) tbody tr:nth-child(2n) td,
.tc-shell .wp-block-table:not(.has-background):not(.is-style-stripes) tbody tr:nth-child(2n) td {
	background-color: var(--tc-surface-raised);
	color: var(--tc-ink);
}

/* The checkout summary sits on the page background, so it needs an edge of its
   own now that it is no longer a white card. */
.tc-shell #order_review,
.tc-shell .order_details,
.tc-shell fieldset {
	border: 1px solid var(--tc-border);
}

.tc-shell fieldset legend {
	padding: 0 var(--tc-space-xs);
}

/* Select2 renders the country and state pickers into a panel at the end of
   <body>, outside anything the form rules reach, so it keeps its own white. */
.tc-shell .select2-dropdown,
.select2-dropdown {
	background-color: var(--tc-surface-raised);
	border-color: var(--tc-border);
	color: var(--tc-ink);
}

.select2-container .select2-results__option {
	color: var(--tc-ink);
}

.select2-container .select2-results__option--highlighted[aria-selected],
.select2-container .select2-results__option[data-selected="true"] {
	background-color: var(--tc-accent-deep);
	color: var(--tc-accent-contrast);
}

.tc-shell .pagination .page-numbers li .page-numbers.current,
.tc-shell .woocommerce-pagination .page-numbers li .page-numbers.current {
	background-color: var(--tc-accent-deep);
	color: var(--tc-accent-contrast);
}

/* =========================================================================
   24. Line breaks inside specification values
   ----------------------------------------------------------------------
   The storage row carries two states — how the material is stored as supplied,
   and how it is stored once reconstituted — and they belong on separate lines.
   The break is a newline in the product data rather than markup, because the
   same text is read by the label data package and the CSV export, and neither
   wants a <br> in it. The specification template escapes its values, so markup
   would print literally there anyway.

   pre-line honours those newlines while still collapsing the ordinary wrapping
   whitespace, so a value with no newline behaves exactly as before.
   ---------------------------------------------------------------------- */

.tc-shell .tc-specs__value {
	white-space: pre-line;
}

/* =========================================================================
   25. Space around the shop page's own title
   ----------------------------------------------------------------------
   Storefront sizes the gap around the archive title in em against a large
   heading, which on this theme's type scale opened to roughly 120px above the
   "Shop" title and another 120px below it. At a 1024px viewport that is a
   quarter of the screen spent on two empty bands, and the first product sits
   below the fold on a page whose entire job is showing products.

   Two separate rules produce it, which is why it reads as one enormous gap:
   the breadcrumb block's own padding and margin account for the space above,
   and the products header's padding-bottom for the space below. Both are cut
   to the theme's spacing tokens, which leaves the title clearly separated
   without the page opening on emptiness.

   SCOPED TO THE PRODUCT ARCHIVES ON PURPOSE. The breadcrumb rule is shared
   with every other page, and the same oversized gap is there too — a product
   page has the identical 122px. That is worth fixing, but it is a change to
   pages nobody asked about, so it stays here until it is asked for. The
   products header only renders on an archive, so it needs no such guard.
   ---------------------------------------------------------------------- */

.tc-shell.woocommerce-shop .storefront-breadcrumb,
.tc-shell.post-type-archive-product .storefront-breadcrumb,
.tc-shell.tax-product_cat .storefront-breadcrumb,
.tc-shell.tax-product_tag .storefront-breadcrumb {
	padding-bottom: var(--tc-space-xs);
	margin-bottom: var(--tc-space-md);
}

/* Both selectors are needed. WooCommerce's own rule is
   `.storefront-full-width-content .woocommerce-products-header` inside a
   min-width media query — exactly as specific as `.tc-shell .woocommerce-...`,
   and its stylesheet is enqueued after this one, so an equally specific rule
   here loses on source order alone. Repeating the body class it uses puts this
   one class ahead. The unqualified selector stays for the layouts that do not
   carry that body class. */
.tc-shell .woocommerce-products-header,
.tc-shell.storefront-full-width-content .woocommerce-products-header {
	padding-bottom: var(--tc-space-lg);
}

/* =========================================================================
   26. The researcher verification interstitial
   ----------------------------------------------------------------------
   TC_Age_Verification renders a complete document in place of the requested
   page, so this section cannot lean on any of the storefront layout above it:
   there is no site header, no .col-full wrapper and no WooCommerce markup on
   the page at all. Everything the gate needs is declared here.

   It is styled entirely from --tc-* tokens, so the gate is painted by whichever
   palette is active rather than by a second copy of the brand colours. That is
   also what lets the same markup serve a theme swap without the control's
   appearance being tied to this stylesheet's specifics — if the theme goes, the
   gate loses its styling but keeps working, which is the correct direction for
   a compliance control to fail in.

   The vial photography behind the card on the reference design is deliberately
   not reproduced. It would mean shipping a background image the plugin has no
   way to guarantee is present, and the gate has to render correctly before a
   visitor has been granted anything at all.
   ========================================================================= */

body.tc-age-gate-page {
	margin: 0;
	background: var(--tc-surface);
	color: var(--tc-ink);
	font-family: var(--tc-font-body);
}

.tc-age-gate {
	box-sizing: border-box;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.75rem;
	/* 16px side gutter so the card never touches the edge on a phone. */
	padding: 3rem 1rem;
	background:
		radial-gradient( ellipse at 50% 0%, var(--tc-surface-raised) 0%, var(--tc-surface) 60% );
}

.tc-age-gate * {
	box-sizing: border-box;
}

.tc-age-gate__brand img,
.tc-age-gate__brand .custom-logo {
	display: block;
	width: auto;
	max-width: min(260px, 70vw);
	height: auto;
	margin: 0 auto;
}

.tc-age-gate__wordmark {
	display: block;
	font-family: var(--tc-font-display);
	font-size: 1.9rem;
	font-weight: var(--tc-display-weight);
	letter-spacing: var(--tc-display-tracking);
	text-align: center;
	color: var(--tc-ink);
}

.tc-age-gate__card {
	width: 100%;
	max-width: 27rem;
	padding: 2.25rem;
	border: 1px solid var(--tc-border);
	border-radius: 14px;
	background: var(--tc-surface-raised);
	box-shadow: 0 24px 60px -32px var(--tc-accent-shadow);
}

.tc-age-gate__title {
	margin: 0 0 0.75rem;
	font-family: var(--tc-font-display);
	/* Not --tc-title-size: that token is scaled for a page title with a whole
	   page around it, and would overwhelm a 27rem card. */
	font-size: 1.85rem;
	font-weight: var(--tc-display-weight);
	letter-spacing: var(--tc-display-tracking);
	line-height: 1.15;
	color: var(--tc-ink);
}

.tc-age-gate__lede {
	margin: 0 0 1.5rem;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--tc-text-muted);
}

.tc-age-gate__error {
	margin: 0 0 1.25rem;
	padding: 0.7rem 0.9rem;
	border-radius: 8px;
	background: var(--tc-danger-bg);
	color: var(--tc-danger-text);
	font-size: 0.9rem;
}

.tc-age-gate__check {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	margin: 0 0 0.85rem;
	padding: 0.95rem 1rem;
	border: 1px solid var(--tc-border);
	border-radius: 10px;
	background: var(--tc-surface);
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--tc-ink);
	cursor: pointer;
}

.tc-age-gate__check:focus-within {
	border-color: var(--tc-accent);
}

.tc-age-gate__check input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.05rem;
	height: 1.05rem;
	margin: 0.15rem 0 0;
	accent-color: var(--tc-accent);
}

.tc-age-gate__check strong {
	font-weight: 600;
	color: var(--tc-ink);
}

/* Specificity, deliberately.
   The brand's own button rule is `.tc-mode-* button`, which outranks a single
   class and forces every button to the ghost treatment: transparent ground, gold
   hairline, gold text. That is right for a product grid full of buttons and wrong
   here, where there is exactly one action on the page and the whole design hangs
   on the visitor being able to see at a glance whether it is available yet. Scoped
   to the gate's own body class so it cannot reach any other button on the site. */
body.tc-age-gate-page .tc-age-gate__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	margin-top: 1.1rem;
	padding: 0.95rem 1.25rem;
	border: 1px solid var(--tc-accent);
	border-radius: 999px;
	background: var(--tc-accent);
	color: var(--tc-accent-contrast);
	font-family: var(--tc-font-body);
	font-size: 0.98rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	cursor: pointer;
}

body.tc-age-gate-page .tc-age-gate__submit:hover:not(:disabled),
body.tc-age-gate-page .tc-age-gate__submit:focus-visible:not(:disabled) {
	background: var(--tc-accent-strong);
	border-color: var(--tc-accent-strong);
}

/* Matches the reference design, where the button reads as unavailable until
   every statement is ticked. The server refuses an incomplete submission
   regardless, so this is appearance rather than enforcement. */
body.tc-age-gate-page .tc-age-gate__submit:disabled {
	background: var(--tc-surface-muted);
	border-color: var(--tc-border);
	color: var(--tc-text-muted);
	cursor: not-allowed;
}

@media (max-width: 480px) {
	.tc-age-gate__card {
		padding: 1.6rem 1.25rem;
	}

	.tc-age-gate__title {
		font-size: 1.6rem;
	}

	/* The brand's uppercase button treatment plus a long site name wraps to two
	   lines on a phone, which leaves the arrow floating beside a two-line block.
	   A slightly smaller label keeps it on one line at 375px. */
	body.tc-age-gate-page .tc-age-gate__submit {
		font-size: 0.82rem;
		padding: 0.9rem 1rem;
	}
}

/* =========================================================================
   27. A tight top on the Products and Research Library pages
   ----------------------------------------------------------------------
   Asked for on 2026-10-01: the breadcrumb should sit close under the header
   rule, the Products listing should start right below it with no "Shop" title
   in between, and the Research Library should not open on an empty band.

   The space was four rules stacked, none large on its own: the header's
   margin-bottom, the breadcrumb block's padding and margin (74px of margin on
   the library, from Storefront's em-based default), .site-main's padding-top,
   and on the library the intro's own padding-top. Each is cut here rather
   than at its source, because the sources are shared with every other page.

   Still scoped, as section 25 was, to the pages that were asked about: the
   COAs and Support pages were added the same day. The category and tag
   archives come along because they are the same Products listing filtered;
   a single research compound page and a single lot certificate because each
   is its index one click further in. Support is addressed by its slug class
   (tc-page-contact-us, from functions.php), because its page ID differs
   between the local and production databases.
   ---------------------------------------------------------------------- */

.tc-shell.woocommerce-shop .site-header,
.tc-shell.post-type-archive-product .site-header,
.tc-shell.tax-product_cat .site-header,
.tc-shell.tax-product_tag .site-header,
.tc-shell.post-type-archive-tc_research .site-header,
.tc-shell.single-tc_research .site-header,
.tc-shell.post-type-archive-coa_lot .site-header,
.tc-shell.single-coa_lot .site-header,
.tc-shell.tc-page-contact-us .site-header {
	margin-bottom: 0;
}

.tc-shell.woocommerce-shop .storefront-breadcrumb,
.tc-shell.post-type-archive-product .storefront-breadcrumb,
.tc-shell.tax-product_cat .storefront-breadcrumb,
.tc-shell.tax-product_tag .storefront-breadcrumb,
.tc-shell.post-type-archive-tc_research .storefront-breadcrumb,
.tc-shell.single-tc_research .storefront-breadcrumb,
.tc-shell.post-type-archive-coa_lot .storefront-breadcrumb,
.tc-shell.single-coa_lot .storefront-breadcrumb,
.tc-shell.tc-page-contact-us .storefront-breadcrumb {
	padding-top: var(--tc-space-md);
	padding-bottom: 0;
	margin-bottom: var(--tc-space-sm);
}

.tc-shell.woocommerce-shop .site-main,
.tc-shell.post-type-archive-product .site-main,
.tc-shell.tax-product_cat .site-main,
.tc-shell.tax-product_tag .site-main,
.tc-shell.post-type-archive-tc_research .site-main,
.tc-shell.single-tc_research .site-main,
.tc-shell.post-type-archive-coa_lot .site-main,
.tc-shell.single-coa_lot .site-main,
.tc-shell.tc-page-contact-us .site-main {
	padding-top: 0;
}

.tc-shell.post-type-archive-tc_research .tc-resource-intro,
.tc-shell.single-tc_research .tc-resource-intro,
.tc-shell .tc-lot-archive,
.tc-shell .tc-lot-page {
	padding-top: 0;
}

/* The "Products" heading duplicates the breadcrumb directly above it, so it is
   taken off the screen but left in the page: it is the page's only h1, and a
   screen reader landing here still needs to hear what the page is. Category
   archives keep their visible title, which names the category and says
   something the breadcrumb's last crumb alone does not. */
.tc-shell.woocommerce-shop .woocommerce-products-header {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* =========================================================================
   28. Room for the larger menu
   ----------------------------------------------------------------------
   The menu labels grew (--tc-nav-size, 2026-10-01). Between 1201px, where
   the search box rejoins the header row, and about 1300px the centred menu
   and the 17rem search box no longer fit side by side: at 1205px the search
   covered the end of SUPPORT by 14px. The search box gives up 4rem in that
   band rather than the menu giving back its size. It is still wide enough
   for its placeholder, and above 1400px it is back to full width.

   !important because the header grid pins the box with `width: 17rem
   !important` (section 14, the header row layout); this selector is one class more specific,
   which is what lets it win between two !important declarations.
   ---------------------------------------------------------------------- */

@media (min-width: 1201px) and (max-width: 1399px) {
	.tc-mode-timelesscompounds.tc-shell .site-header .site-search {
		width: 13rem !important;
		flex-basis: 13rem !important;
	}
}

/* =========================================================================
   29. The Timeless Research footer brand column, and one footer text size
   ----------------------------------------------------------------------
   Requested by Carl on 2026-10-07 from an annotated screenshot. The copyright
   moves out of the bottom band and under the tagline (functions.php prints it
   there for Timeless Research only, so Living for Your Health keeps it in the
   band); the gap under "Science Beyond Time" closes from Storefront's
   paragraph margin (1.41575em of a 2.8rem heading, about 63px) to the same
   --tc-footer-gap that separates the tagline from the copyright; and the
   tagline, copyright and compliance line share --tc-footer-text-size.

   With the copyright gone from the band, the compliance line is its only
   child and already takes the full width, so the band is one column without
   a rule of its own.
   ---------------------------------------------------------------------- */

.tc-mode-timelesscompounds .tc-service-footer .tc-footer-heading,
.tc-mode-timelesscompounds .tc-service-footer .tc-footer-tagline {
	margin-bottom: var(--tc-footer-gap);
}

.tc-mode-timelesscompounds .tc-service-footer .tc-footer-copyright {
	margin: 0;
	font-size: var(--tc-footer-text-size);
	letter-spacing: 0.08em;
	color: var(--tc-text-muted);
}

/* =========================================================================
   30. "Company name" without "(optional)"
   ----------------------------------------------------------------------
   Company became optional on 2026-10-07 (docs/wc-settings.php), and
   WooCommerce marks every optional field by appending "(optional)" inside
   the label, with no setting to turn it off. Carl asked for the label to
   read just "Company name", with no asterisk since it is not required.
   Required again from 2026-10-09, when WooCommerce prints its asterisk
   instead and there is no "(optional)" span; the rule is then inert, and
   kept so the label stays plain if the field goes optional again.
   Hiding WooCommerce's own span keeps the field and its validation native;
   rewriting the label in PHP would mean overriding WooCommerce's form markup
   for one word. Applies wherever the billing company field appears, which is
   checkout and the account's billing address form, so the two match.
   ---------------------------------------------------------------------- */

#billing_company_field label .optional {
	display: none;
}

/* =========================================================================
   31. "Returning customer?" and "Have a coupon?" side by side at checkout
   ----------------------------------------------------------------------
   Carl asked (2026-10-19) for the two prompts above the checkout form to share
   one line: returning customer on the left, coupon on the right, each over the
   column it belongs to. WooCommerce prints them as two full-width notices, each
   followed by the form it opens, as plain siblings inside .woocommerce, and the
   checkout form after them. A grid on that container places the two prompts in
   one row and each opened form under its own prompt, while every other child
   (notice wrappers, the checkout form itself) keeps the full width. No markup
   changes, so WooCommerce's slide-open script still finds both forms.

   The columns copy Storefront's own checkout columns from 768px, so the
   prompts line up with Billing details and Your order below: 52.9412% and
   41.1765% with a 5.88235% gap on the standard page template (Site A), and
   two 47.8261% columns with a 4.34783% gap on the full-width template (the
   local site). A single 1fr 1fr matched local and sat 47px off on Site A. Applied only when both prompts are present: a signed-in
   buyer sees no login prompt, and the coupon alone would otherwise sit over an
   empty left column. Below 768px, and in a browser without :has(), the prompts
   stay stacked, which is what they were before.
   ---------------------------------------------------------------------- */

@media (min-width: 768px) {
	.tc-shell.woocommerce-checkout .woocommerce:has(> .woocommerce-form-login-toggle):has(> .woocommerce-form-coupon-toggle) {
		display: grid;
		grid-template-columns: 52.9411764706% 41.1764705882%;
		column-gap: 5.8823529412%;
		align-items: start;
	}

	.tc-shell.page-template-template-fullwidth-php.woocommerce-checkout .woocommerce:has(> .woocommerce-form-login-toggle):has(> .woocommerce-form-coupon-toggle) {
		grid-template-columns: 47.8260869565% 47.8260869565%;
		column-gap: 4.3478260870%;
	}

	.tc-shell.woocommerce-checkout .woocommerce:has(> .woocommerce-form-login-toggle):has(> .woocommerce-form-coupon-toggle) > * {
		grid-column: 1 / -1;
		min-width: 0;
	}

	.tc-shell.woocommerce-checkout .woocommerce:has(> .woocommerce-form-login-toggle):has(> .woocommerce-form-coupon-toggle) > .woocommerce-form-login-toggle {
		grid-column: 1;
		grid-row: 2;
	}

	.tc-shell.woocommerce-checkout .woocommerce:has(> .woocommerce-form-login-toggle):has(> .woocommerce-form-coupon-toggle) > .woocommerce-form-coupon-toggle {
		grid-column: 2;
		grid-row: 2;
	}

	.tc-shell.woocommerce-checkout .woocommerce:has(> .woocommerce-form-login-toggle):has(> .woocommerce-form-coupon-toggle) > form.woocommerce-form-login {
		grid-column: 1;
		grid-row: 3;
	}

	.tc-shell.woocommerce-checkout .woocommerce:has(> .woocommerce-form-login-toggle):has(> .woocommerce-form-coupon-toggle) > form.checkout_coupon {
		grid-column: 2;
		grid-row: 3;
	}
	/* At half width each prompt takes two lines. Keep its link whole, so the
	   break falls after the question rather than inside "Click here to login". */
	.tc-shell.woocommerce-checkout .woocommerce-form-login-toggle .showlogin,
	.tc-shell.woocommerce-checkout .woocommerce-form-coupon-toggle .showcoupon {
		white-space: nowrap;
	}
}

/* =========================================================================
   32. The Alexios entry pop-up, in the brand
   ----------------------------------------------------------------------
   Site A's entry gate moved to Aperture's Alexios plugin on 2026-10-20 (see
   docs/alexios-install-plan.md). It has no colour, font or logo settings of
   its own: its stylesheet paints a white card with near-black text and the
   browser's default controls, which on this site's near-black ground reads as
   a different company's dialog. So it is dressed here to match section 26,
   TC's own interstitial, from the same --tc-* tokens: raised surface, hairline
   border, display-face title, muted lede, the one solid gold action.

   Presentation only. The markup, the JavaScript and the server's checks are
   the plugin's; if this section is removed the pop-up keeps working in its
   own white styling, which is the right direction for a control to fail in.

   Every selector is prefixed body.tc-shell. The plugin's stylesheet loads
   after the theme's, so a rule of equal specificity would lose to it, and the
   brand's own `.tc-mode-* button` ghost treatment would otherwise reach the
   submit button, as it did on the interstitial (see the note in section 26).
   ========================================================================= */

body.tc-shell .gg-gate__backdrop {
	background: color-mix( in srgb, var(--tc-surface) 88%, transparent );
	backdrop-filter: blur( 6px );
}

body.tc-shell .gg-gate__panel {
	box-sizing: border-box;
	width: min( 30rem, 100% );
	max-height: calc( 100dvh - 2rem );
	overflow-y: auto;
	padding: 2.25rem;
	border: 1px solid var(--tc-border);
	border-radius: 14px;
	background: var(--tc-surface-raised);
	color: var(--tc-ink);
	font-family: var(--tc-font-body);
	box-shadow: 0 24px 60px -32px var(--tc-accent-shadow);
}

body.tc-shell .gg-gate__panel h2 {
	margin: 0 0 0.75rem;
	font-family: var(--tc-font-display);
	font-size: 1.85rem;
	font-weight: var(--tc-display-weight);
	letter-spacing: var(--tc-display-tracking);
	line-height: 1.15;
	color: var(--tc-ink);
}

body.tc-shell .gg-gate__panel > p {
	margin: 0 0 1.5rem;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--tc-text-muted);
}

body.tc-shell .gg-gate__field label {
	font-size: 0.85rem;
	color: var(--tc-ink);
}

body.tc-shell .gg-gate__field label strong {
	font-weight: 600;
}

body.tc-shell .gg-gate__field label span {
	color: var(--tc-text-muted);
}

body.tc-shell .gg-gate__field select,
body.tc-shell .gg-gate__field input[type="text"] {
	box-sizing: border-box;
	width: 100%;
	min-height: 2.9rem;
	padding: 0.6rem 0.85rem;
	border: 1px solid var(--tc-border);
	border-radius: 10px;
	background-color: var(--tc-surface);
	color: var(--tc-ink);
	font-family: var(--tc-font-body);
	font-size: 0.95rem;
	box-shadow: none;
}

body.tc-shell .gg-gate__field select:focus,
body.tc-shell .gg-gate__field input[type="text"]:focus {
	border-color: var(--tc-accent);
	outline: none;
}

/* The open list is drawn by the operating system, which takes its colours
   from the options rather than the closed control. */
body.tc-shell .gg-gate__field select option {
	background: var(--tc-surface-raised);
	color: var(--tc-ink);
}

body.tc-shell .gg-gate__certification {
	gap: 0.75rem;
	margin: 0.25rem 0 0.85rem;
	padding: 0.95rem 1rem;
	border: 1px solid var(--tc-border);
	border-radius: 10px;
	background: var(--tc-surface);
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--tc-ink);
	cursor: pointer;
}

body.tc-shell .gg-gate__certification:focus-within {
	border-color: var(--tc-accent);
}

body.tc-shell .gg-gate__certification input[type="checkbox"] {
	width: 1.05rem;
	height: 1.05rem;
	margin: 0.15rem 0 0;
	accent-color: var(--tc-accent);
}

body.tc-shell .gg-gate__error {
	padding: 0.7rem 0.9rem;
	border-radius: 8px;
	background: var(--tc-danger-bg);
	color: var(--tc-danger-text);
	font-size: 0.9rem;
	font-weight: 400;
}

body.tc-shell .gg-gate__panel button {
	width: 100%;
	min-height: 0;
	margin-top: 0.25rem;
	padding: 0.95rem 1.25rem;
	border: 1px solid var(--tc-accent);
	border-radius: 999px;
	background: var(--tc-accent);
	color: var(--tc-accent-contrast);
	font-family: var(--tc-font-body);
	font-size: 0.98rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-transform: none;
}

body.tc-shell .gg-gate__panel button:hover:not(:disabled),
body.tc-shell .gg-gate__panel button:focus-visible:not(:disabled) {
	background: var(--tc-accent-strong);
	border-color: var(--tc-accent-strong);
	color: var(--tc-accent-contrast);
}

body.tc-shell .gg-gate__panel button:disabled {
	background: var(--tc-surface-muted);
	border-color: var(--tc-border);
	color: var(--tc-text-muted);
	opacity: 1;
}

@media (max-width: 480px) {
	body.tc-shell .gg-gate {
		padding: 1rem;
	}

	body.tc-shell .gg-gate__panel {
		padding: 1.6rem 1.25rem;
	}

	body.tc-shell .gg-gate__panel h2 {
		font-size: 1.6rem;
	}
}

/* =========================================================================
   33. "Questions about your order?" under the cart totals
   ----------------------------------------------------------------------
   TC_Payments::render_cart_help() prints it after WooCommerce's totals box
   (2026-10-20), and append_checkout_help() under the checkout page, where it
   is often the only thing below "This store cannot take payments". Set as quiet supporting text under the totals, in the body
   face, with the links in the accent so the two ways to reach us stand out.
   ========================================================================= */

.tc-shell .tc-cart-help {
	margin-top: 1.25rem;
	padding: 1rem 1.1rem;
	border: 1px solid var(--tc-border);
	border-radius: 10px;
	background: var(--tc-surface-raised);
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--tc-text-muted);
}

.tc-shell .tc-cart-help p {
	margin: 0;
}

.tc-shell .tc-cart-help p + p {
	margin-top: 0.5rem;
	font-size: 0.85rem;
}

.tc-shell .tc-cart-help strong {
	color: var(--tc-ink);
	font-weight: 600;
}

.tc-shell .tc-cart-help a {
	color: var(--tc-accent);
	white-space: nowrap;
}

/* =========================================================================
   34. The research-use box in the column under the product image
   ----------------------------------------------------------------------
   From 2026-10-21 TC_Disclaimers prints the box straight after the summary
   (woocommerce_after_single_product_summary, where Alexios had printed its
   own product blocks), at Carl's request: under the image, which otherwise
   leaves an empty column beside the long specifications. Unstyled, the box
   is a full-width block, so its text wraps around the floated summary while
   its border and background run behind it. Here it is floated into the
   image column instead, at Storefront's own gallery widths, so the two line
   up: 39.13% under storefront-full-width-content, which both sites' product
   pages carry (checked 2026-10-21), and Storefront's 41.18% otherwise.

   clear: left puts it under the gallery whatever the summary's height; the
   tabs below already clear both columns. Below 768px Storefront stacks the
   columns, and the box stays a full-width block between summary and tabs.
   ========================================================================= */

@media (min-width: 768px) {
	.tc-shell.single-product div.product > .tc-disclaimer {
		float: left;
		clear: left;
		box-sizing: border-box;
		width: 41.1764705882%;
		margin-top: 0;
	}

	.tc-shell.storefront-full-width-content.single-product div.product > .tc-disclaimer {
		width: 39.1304347826%;
	}
}

/* =========================================================================
   35. The sign-in prompt where the catalogue would be
   ----------------------------------------------------------------------
   TC_Login_Wall (2026-10-22) replaces the homepage's product listing and
   research preview with one prompt for a visitor who is not signed in. Set
   like the cart help box (section 33): raised surface, hairline border, the
   one gold action.
   ========================================================================= */

.tc-shell .tc-login-wall-prompt {
	max-width: 40rem;
	margin: 1.5rem auto;
	padding: 1.5rem 1.75rem;
	border: 1px solid var(--tc-border);
	border-radius: 12px;
	background: var(--tc-surface-raised);
	text-align: center;
	color: var(--tc-text-muted);
}

.tc-shell .tc-login-wall-prompt strong {
	display: block;
	margin-bottom: 0.35rem;
	font-family: var(--tc-font-display);
	font-size: 1.5rem;
	font-weight: var(--tc-display-weight);
	color: var(--tc-ink);
}

.tc-shell .tc-login-wall-prompt p:last-child {
	margin: 1rem 0 0;
}

.tc-shell .tc-register-researcher label {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	line-height: 1.5;
}

.tc-shell .tc-register-researcher input[type="checkbox"] {
	flex: 0 0 auto;
	margin-top: 0.3rem;
	accent-color: var(--tc-accent);
}

/* =========================================================================
   36. The type and signature on TC's gate, and Alexios's sign-up fields
   ----------------------------------------------------------------------
   Styles the researcher type list and the typed signature added to TC's own
   gate (TC_Age_Verification, statement version 4), so Alexios finds that
   gate complete and leaves its pop-up off; then Alexios's fields on the My
   Account sign-up form.

   Until 2026-11-03 this section also dressed Alexios's "Research Purchase
   Verification" box at checkout, whose white card left the theme's cream
   ink unreadable. Alexios 0.6.29 gave the box Aperture's approved look (a
   slate panel, cream text, gold accents, its own fonts and mark) in its own
   stylesheet, scoped to #gg-checkout-gate so a theme cannot repaint it. Its
   ID selectors beat these class rules, so what was left of ours only leaked
   through where it set something Alexios does not, such as a second border
   inside each statement tile. The box is Aperture's to present now; nothing
   here targets .gg-cgate.
   ========================================================================= */

/* TC's own gate: the researcher type list and the signature. */

.tc-age-gate__field {
	margin: 0 0 1rem;
}

.tc-age-gate__field label {
	display: block;
	margin: 0 0 0.4rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--tc-ink);
}

.tc-age-gate__field select,
.tc-age-gate__field input[type="text"] {
	width: 100%;
	min-height: 2.9rem;
	padding: 0.6rem 0.85rem;
	border: 1px solid var(--tc-border);
	border-radius: 10px;
	background-color: var(--tc-surface);
	color: var(--tc-ink);
	font-family: var(--tc-font-body);
	font-size: 0.95rem;
	box-shadow: none;
}

.tc-age-gate__field select:focus,
.tc-age-gate__field input[type="text"]:focus {
	border-color: var(--tc-accent);
	outline: none;
}

.tc-age-gate__field select option {
	background: var(--tc-surface-raised);
	color: var(--tc-ink);
}

.tc-age-gate__signature {
	margin-top: 1.25rem;
}

.tc-age-gate__statement {
	margin: 0 0 0.75rem;
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--tc-ink);
}

.tc-age-gate__field input.tc-age-gate__sign {
	font-family: var(--tc-font-display);
	font-size: 1.15rem;
	font-style: italic;
}

.tc-age-gate__date {
	margin: 0.4rem 0 0;
	font-size: 0.82rem;
	color: var(--tc-text-muted);
}

/* Alexios's sign-up fields (GG_Registration, on while Alexios cannot read a
   complete sign-up form of TC's own, which TC's gate hides from its reader).
   Its inline style removes the fieldsets' border and padding; section 23's
   fieldset rule still paints the legends as raised blocks, offset left of the
   fields. The date of birth was the one white control on the page: section 8
   lacked input[type="date"] until 2026-10-29, and the browser's own picker
   needs telling the ground is dark. */

body.tc-shell #gg-registration fieldset,
body.tc-shell #gg-registration fieldset legend {
	background: transparent;
}

body.tc-shell #gg-registration fieldset legend {
	padding: 0;
	margin: 0 0 0.6rem;
	font-weight: 600;
	color: var(--tc-ink);
}

body.tc-shell #gg-registration .gg-registration__choice {
	border-color: var(--tc-border);
	background: var(--tc-surface-raised);
}

body.tc-shell #gg-registration input[type="radio"],
body.tc-shell #gg-registration input[type="checkbox"] {
	accent-color: var(--tc-accent);
}

.tc-mode-timelesscompounds input[type="date"] {
	color-scheme: dark;
}

/* The sign-up column's heading is Alexios's "Create an account" (TC_Alexios,
   2026-10-29), so Alexios's own copy beneath would say it twice. Only on the
   My Account page, where WooCommerce prints that heading; TC_Alexios merges it
   under the same condition Alexios prints its own (its sign-up being on), so
   the two appear and disappear together. */
body.tc-shell #customer_login .gg-registration__heading {
	display: none;
}

/* Alexios's line under it, "An account is required to view the catalog and
   order. Research use only, 21+.", stopped being true when the login wall came
   down on 2026-10-29 (Aperture had itself suggested opening the catalogue).
   Removed at Carl's request; the form below still states the 21+ rule and asks
   the research-use confirmation. Alexios still lists the line in the text its
   sign-up record says was shown, which Aperture would need to change. */
body.tc-shell #customer_login .gg-registration__line {
	display: none;
}

/* =========================================================================
   37. My Account: the dashboard and its menu
   ----------------------------------------------------------------------
   The dashboard template (woocommerce/myaccount/dashboard.php, 2026-10-29)
   replaces WooCommerce's two sentences of links with a greeting and one card
   per task. Cards are drawn like the cart help box (section 33) and the
   sign-in prompt (section 35): raised surface, hairline border, gold on hover.
   The menu beside it becomes one panel with the current page marked in gold,
   rather than a column of loose links.

   Storefront underlines every link in page content (.hentry .entry-content a)
   and pads the menu links to the edge with a longer selector of its own, so
   the card and the menu links are matched with .hentry .entry-content too.
   ========================================================================= */

.tc-shell .tc-account-dashboard__welcome {
	margin: 0 0 1.75rem;
}

.tc-shell .tc-account-dashboard__greeting {
	margin: 0 0 0.35rem;
	font-family: var(--tc-font-display);
	font-size: 2rem;
	font-weight: var(--tc-display-weight);
	letter-spacing: var(--tc-display-tracking);
	color: var(--tc-ink);
}

.tc-shell .tc-account-dashboard__signed-in {
	margin: 0;
	font-size: 0.92rem;
	color: var(--tc-text-muted);
}

.tc-shell .tc-account-dashboard__cards {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 14rem, 1fr ) );
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tc-shell .tc-account-dashboard__cards li {
	margin: 0;
}

.tc-shell .hentry .entry-content a.tc-account-card {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	box-sizing: border-box;
	height: 100%;
	padding: 1.25rem 1.35rem;
	border: 1px solid var(--tc-border);
	border-radius: 12px;
	background: var(--tc-surface-raised);
	text-decoration: none;
	transition: border-color var(--tc-duration) var(--tc-ease), transform var(--tc-duration) var(--tc-ease);
}

.tc-shell .hentry .entry-content a.tc-account-card:hover,
.tc-shell .hentry .entry-content a.tc-account-card:focus-visible {
	border-color: var(--tc-accent);
	transform: translateY( -2px );
	outline: none;
}

.tc-shell .tc-account-card__title {
	font-family: var(--tc-font-display);
	font-size: 1.3rem;
	font-weight: var(--tc-display-weight);
	color: var(--tc-accent);
}

.tc-shell .tc-account-card__text {
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--tc-text-muted);
}

.tc-shell .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0.5rem;
	border: 1px solid var(--tc-border);
	border-radius: 12px;
	background: var(--tc-surface-raised);
	list-style: none;
}

.tc-shell .woocommerce-MyAccount-navigation ul li {
	border: 0;
}

.tc-shell .hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link a {
	padding: 0.75rem 0.9rem;
	border-radius: 8px;
	color: var(--tc-ink);
	text-decoration: none;
}

.tc-shell .hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link a:hover {
	background: var(--tc-surface-muted);
	color: var(--tc-accent);
}

.tc-shell .hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link.is-active a {
	background: var(--tc-surface-muted);
	color: var(--tc-accent);
	box-shadow: inset 2px 0 0 var(--tc-accent);
}

@media (prefers-reduced-motion: reduce) {
	.tc-shell .hentry .entry-content a.tc-account-card {
		transition: none;
	}

	.tc-shell .hentry .entry-content a.tc-account-card:hover,
	.tc-shell .hentry .entry-content a.tc-account-card:focus-visible {
		transform: none;
	}
}

/* Storefront gives the menu 17.6% of the row, which at a laptop width broke
   "Dashboard" and "Addresses" mid-word; a quarter keeps every label whole. */
@media (min-width: 768px) {
	.tc-shell.woocommerce-account .woocommerce-MyAccount-navigation {
		width: 24%;
		margin-right: 4%;
	}

	.tc-shell.woocommerce-account .woocommerce-MyAccount-content {
		width: 72%;
	}
}