/**
 * 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 Compounds — "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;

	--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 Compounds. 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: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
}

.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 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 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 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);
}

.tc-mode-timelesscompounds .site-branding img.custom-logo {
	max-height: 88px;
	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 mark is the brand; give it room and let it carry the header. */
.tc-shell .site-branding img.custom-logo,
.tc-mode-timelesscompounds .site-header .custom-logo-link img {
	max-height: 132px;
	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; }
	.tc-shell .site-branding img.custom-logo { max-height: 92px; }
}

/* --- 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: 0.75rem;
	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;
}

@media (max-width: 980px) {
	.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;
}

@media (max-width: 980px) {
	.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: 0.875rem;
}

.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-disclaimer p,
.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: 1rem; }

.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-disclaimer p,
.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 Compounds, 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);
}