/*
Theme Name: RUO Storefront
Description: Tokenized Warm Scientific storefront for a research-use-only catalog.
Author: RUO Platform Team
Version: 0.9.0
Requires PHP: 8.1
Text Domain: ruo-storefront
*/

/*
 * Brand direction is expressed through theme.json. This stylesheet consumes
 * those tokens and never fetches remote assets. Commerce and evidence share
 * the same warm, rounded card system.
 */

@font-face {
	font-family: "Newsreader";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("./assets/fonts/Newsreader%5Bopsz%2Cwght%5D.ttf") format("truetype");
}

@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("./assets/fonts/Archivo%5Bwdth%2Cwght%5D.ttf") format("truetype");
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("./assets/fonts/IBMPlexMono-Regular.ttf") format("truetype");
}

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

html {
	scroll-behavior: smooth;
}

body {
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
}

.wp-site-blocks {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}

.wp-site-blocks > main {
	flex: 1;
}

.wp-site-blocks > footer {
	margin-block-start: 0;
}

body.home .wp-site-blocks > .ruo-main,
.wp-site-blocks > .ruo-main:has(> .ruo-hero-cover),
/* Pages that open on their own full-bleed band sit flush under the header.
   The strip above them was WordPress's block gap, a margin between the two
   site-level blocks — zeroing padding alone left it in place. */
.wp-site-blocks > .ruo-main.ruo-flush-top,
.wp-site-blocks > .ruo-main.ruo-about-page,
.wp-site-blocks > .ruo-main.ruo-contact-page,
.wp-site-blocks > .ruo-main.ruo-doc-page,
.wp-site-blocks > .ruo-main:has(> .ruo-coa-hero) {
	margin-block-start: 0;
	padding-block-start: 0;
	padding-block-end: 0;
}

.ruo-main {
	padding-block: var(--wp--preset--spacing--60);
}

:where(a) {
	text-underline-offset: 0.17em;
	text-decoration-thickness: 1px;
	transition: color var(--wp--custom--motion--quick, 150ms ease-out), border-color var(--wp--custom--motion--quick, 150ms ease-out);
}

:where(a, button, input, select, summary, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.ruo-disclosure :where(a, button, input, select, summary, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
	outline-color: var(--wp--preset--color--on-accent);
}

:where(.wp-element-button, .wp-block-button__link, .wc-block-components-button, button, input[type="submit"]) {
	min-height: 2.75rem;
	transition: background-color var(--wp--custom--motion--quick, 150ms ease-out), border-color var(--wp--custom--motion--quick, 150ms ease-out), color var(--wp--custom--motion--quick, 150ms ease-out);
}

:where(.wp-element-button, .wp-block-button__link, .wc-block-components-button, button, input[type="submit"]):hover {
	background-color: var(--wp--preset--color--accent-deep);
	border-color: var(--wp--preset--color--accent-deep);
	color: var(--wp--preset--color--on-accent);
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: var(--wp--preset--color--button-outline);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
}

:where(input:not([type="checkbox"], [type="radio"]), select, textarea) {
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--control, 8px);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font: inherit;
}

/* Global header */

.ruo-disclosure {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.625rem;
	padding-block: 0.375rem;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.875rem;
	letter-spacing: 0.02em;
	line-height: 1.3;
}

.ruo-disclosure p {
	margin-block: 0;
	font-size: inherit !important;
}

/* With a sticky header, anything scrolled to by an anchor lands underneath it.
   The FAQ questions are all anchor-linkable and the footer links into them, so
   every id gets clearance. */
[id] {
	scroll-margin-block-start: calc(var(--ruo-sticky-h) + 1.25rem);
}

/* Sticky goes on the <header> the template part renders, not on the shell
   inside it: a sticky element can never travel outside its own parent's box,
   and the shell's parent is exactly its own height. */
.wp-site-blocks > header:has(.ruo-header-shell) {
	position: sticky;
	top: 0;
	/* Above every in-page layer: the hero, the closing band and the QA panel
	   each establish their own stacking at 1. */
	z-index: 100;
}

.ruo-header-shell {
	border-block-end: 1px solid var(--wp--preset--color--border);
	/* The mobile search panel hangs off the bottom of this box. */
	position: relative;
}

/* Hamburger drawn here rather than taken from the block.

   WordPress ships a two-bar glyph inside a 24x24 viewBox whose content sits
   above the box's own centre, so the button looked high however the button
   itself was aligned — the offset was inside the artwork. Three bars, centred
   on the button's true middle: the outer two from the pseudo-elements, the
   middle one from a background stripe, so no extra element is needed. */
.wp-block-navigation__responsive-container-open {
	position: relative;
	width: 2.75rem;
	height: 2.75rem;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 1.25rem 2px;
	background-position: center;
	background-repeat: no-repeat;
}

.wp-block-navigation__responsive-container-open svg {
	display: none;
}

.wp-block-navigation__responsive-container-open::before,
.wp-block-navigation__responsive-container-open::after {
	content: "";
	position: absolute;
	left: 50%;
	width: 1.25rem;
	height: 2px;
	background: currentColor;
	translate: -50% 0;
}

.wp-block-navigation__responsive-container-open::before {
	top: calc(50% - 0.3125rem);
}

.wp-block-navigation__responsive-container-open::after {
	top: calc(50% + 0.3125rem);
}

/* Mobile menu drawer (phone only).

   A panel under the sticky header, not a full-screen overlay. Keeping the
   header in place is the whole point: the cart stays reachable while the menu
   is open, instead of being buried under it.

   The drawer carries its own hamburger and its own links; WordPress's
   navigation block still renders the desktop bar, and its overlay is
   suppressed below. The links are therefore duplicated in inc/mobile-menu.php
   — a block template part is static markup and cannot be read back, so the
   drawer cannot derive them. */
.ruo-menu-toggle,
.ruo-menu-close {
	display: none;
	position: relative;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
}

/* Two bars, not three — the owner preferred the original. The bars stay
   symmetric about the button's centre, which is what was actually wrong before:
   WordPress's own glyph sits above its viewBox's middle. */
.ruo-menu-toggle::before,
.ruo-menu-toggle::after {
	content: "";
	position: absolute;
	left: 50%;
	width: 1.25rem;
	height: 2px;
	background: currentColor;
	translate: -50% 0;
}

.ruo-menu-toggle::before { top: calc(50% - 0.3125rem); }
.ruo-menu-toggle::after  { top: calc(50% + 0.3125rem); }

.ruo-menu-close svg {
	width: 1.35rem;
	height: 1.35rem;
}

.ruo-mobile-menu {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 5;
	/* Fills what is left of the viewport below the header rather than sizing to
	   its contents, so the menu is the screen while it is open instead of a card
	   floating over the page. */
	height: calc(100svh - 100%);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	background: var(--wp--preset--color--paper);
}

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

/* Search sits at the top and is simply there — no icon to press first.
   Borrowed wholesale from the desktop control: same 2.75rem height, same small
   radius, same border token, same surface. It is the same field, so it should
   not look like a different one. Its edges land on the gutter, which is where
   the hamburger's left edge and the close button's right edge already sit. */
.ruo-mobile-menu__search {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	height: 2.75rem;
	/* Same two alignment lines as the rows below it, so the field is not the
	   one element sitting proud of everything else. */
	margin: 1.25rem calc(var(--wp--custom--gutter) + 1rem) 0.5rem
		calc(var(--wp--custom--gutter) + 0.75rem);
	padding: 0 0.75rem;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--small, 7px);
	background: var(--wp--preset--color--surface);
}

.ruo-mobile-menu__search input {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	font-size: 16px;
}

.ruo-mobile-menu__search input:focus { outline: none; }

.ruo-mobile-menu__search button {
	flex: 0 0 auto;
	/* inline-flex + centre is what actually sits the glyph on the field's
	   midline; inline alone leaves an SVG on the text baseline, riding low. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
}

.ruo-mobile-menu__search button svg { display: block; width: 1.35rem; height: 1.35rem; }

.ruo-mobile-menu__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Rows run edge to edge, but their CONTENT is inset by the same gutter the
   wordmark uses, so every label starts on the wordmark's left edge and every
   arrow ends on the close button's right edge. */
.ruo-mobile-menu__links a,
.ruo-mobile-menu__foot a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	/* Aligned to what you can SEE, not to the boxes around it. Both header
	   controls are 2.75rem tap targets with a smaller mark centred inside, so
	   aligning to their button edges misses by the inset every time:

	     hamburger  1.25rem of bars in a 2.75rem button -> 0.75rem in from its left
	     close      the X path ends at 18/24 of its svg -> 1rem in from its right

	   Measured at 28 and 358 on a 390px screen; the padding below reproduces
	   exactly those two numbers. */
	padding: 1.15rem calc(var(--wp--custom--gutter) + 1rem) 1.15rem
		calc(var(--wp--custom--gutter) + 0.75rem);
	font-size: 1.125rem;
	font-weight: 600;
	text-decoration: none;
	color: inherit;
}

.ruo-mobile-menu__links { padding-block: 0.75rem; }

/* No rule between rows. A line per row made seven of them on one screen, which
   is what read as busy; the space does the separating instead. */

.ruo-mobile-menu__arrow {
	flex: 0 0 auto;
	width: 0.5rem;
	height: 0.875rem;
	opacity: 0.45;
}

/* Account and cart are a different KIND of destination from the catalog, so
   they read as a different block rather than four more links. */
/* Account and cart are a different KIND of destination, so the block itself
   does the separating — no rule needed once it carries its own colour.

   `flex: 1 0 auto` rather than `margin-block-start: auto`: auto margin pushed
   the block to the floor and left a white gap the height of whatever was
   spare. Growing instead puts it directly under the links and lets the blue
   run to the bottom of the drawer, which is the empty space the owner was
   happy to trade the gap for. */
.ruo-mobile-menu__foot {
	flex: 1 0 auto;
	margin-block-start: 1.25rem;
	padding-block: 1rem;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
}

/* The row's label is a flex box so the word and the badge centre on each
   OTHER. Inline layout aligns them on the text baseline instead, which sat the
   badge a couple of pixels low — visible, and not worth chasing with a nudge
   that would drift with the font size. */
.ruo-mobile-menu__links a > span,
.ruo-mobile-menu__foot a > span {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.ruo-mobile-menu__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4rem;
	height: 1.4rem;
	padding-inline: 0.35rem;
	border-radius: 999px;
	background: var(--wp--preset--color--on-accent);
	color: var(--wp--preset--color--accent);
	font-size: 0.75rem;
	font-weight: 700;
}

.ruo-mobile-menu__count[hidden] { display: none; }

@media (max-width: 40rem) {
	.ruo-menu-toggle { display: inline-block; grid-area: menu; justify-self: start; }

	/* The block's own hamburger and overlay stand down; the drawer replaces
	   both. The links inside it still render for desktop. */
	.ruo-header-grid .ruo-primary-navigation { display: none; }

	/* Open: search and account give way to the close button. The cart is
	   exempt — someone opening the menu with items in it is usually trying to
	   reach it, so it stays put rather than making them close the menu first. */
	.ruo-header-shell.is-menu-open .ruo-header-searchtoggle,
	.ruo-header-shell.is-menu-open .ruo-header-account {
		display: none;
	}

	.ruo-header-shell.is-menu-open .ruo-menu-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		order: 4;
	}
}

/* Icon-only search control. Desktop shows the field itself, so the control has
   nothing to do there and is hidden below. */
.ruo-header-searchtoggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
}

.ruo-header-searchtoggle svg {
	width: 1.15rem;
	height: 1.15rem;
}

/* Only where a pointer can actually hover. A tap leaves :hover stuck on the
   element until something else is tapped, so on a phone the search icon stayed
   lit after the panel had closed — it read as "still open" when it was not.
   aria-expanded keeps carrying the real state, on every device. */
@media (hover: hover) {
	.ruo-header-searchtoggle:hover {
		background: color-mix(in srgb, var(--wp--preset--color--ink) 8%, transparent);
	}
}

.ruo-header-searchtoggle[aria-expanded="true"] {
	background: color-mix(in srgb, var(--wp--preset--color--ink) 8%, transparent);
}

@media (max-width: 40rem) {
	.ruo-header-searchtoggle {
		display: inline-flex;
	}
}

.ruo-header-grid {
	display: grid !important;
	height: 4.875rem;
	min-height: 4.875rem;
	grid-template-columns: minmax(10rem, 1fr) auto minmax(20rem, 1fr);
	align-items: center;
	gap: 2rem;
}

.ruo-header-grid > * {
	align-self: center;
	margin-block: 0 !important;
}

.ruo-wordmark {
	min-width: 0;
}

.ruo-wordmark__link {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.125rem;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.ruo-wordmark__link:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.ruo-wordmark__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5625rem;
	font-weight: 400;
	letter-spacing: 0.06em;
	line-height: 1;
}

.ruo-wordmark__descriptor {
	color: var(--wp--preset--color--ink-55);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.59375rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	line-height: 1;
}

.ruo-primary-navigation .current-menu-item > a,
.ruo-primary-navigation a[aria-current="page"] {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.25rem;
}

.ruo-header-actions {
	justify-self: end;
	/* Text link sits between two bordered controls; it needs more air than the
	   controls need from each other. */
	gap: 1rem;
}

.ruo-header-search {
	width: clamp(10rem, calc(45vw - 21.25rem), 16.75rem);
}

.ruo-header-search .wp-block-search__inside-wrapper {
	/* 44px matches WooCommerce's accessible minimum on the cart control, so the
	   two header boxes share one height instead of missing by 4px. */
	height: 2.75rem;
	border-color: var(--wp--preset--color--border-strong) !important;
	border-radius: var(--wp--custom--radius--small, 7px);
	background: var(--wp--preset--color--surface);
	padding: 0;
}

.ruo-header-search .wp-block-search__input {
	min-width: 0;
	border: 0;
	background: transparent;
	font-size: 0.84375rem;
	/* The field had no inset of its own, so the placeholder sat ~4px off the
	   border; the search button supplies the trailing inset. */
	padding: 0 0 0 0.875rem;
}

.ruo-header-search .wp-block-search__button {
	min-height: 2.25rem;
	margin: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--ink-55);
	padding: 0.45rem 0.65rem;
}

.ruo-header-search .wp-block-search__button:hover {
	background: transparent;
	color: var(--wp--preset--color--accent);
}

.ruo-header-account {
	color: var(--wp--preset--color--ink);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
}

.wc-block-components-drawer__content {
	box-shadow: none !important;
}

.ruo-header-actions .wc-block-mini-cart__button {
	/* Matched to the search field so the two controls share a baseline box. */
	height: 2.75rem;
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--small, 7px);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	padding: 0 0.875rem;
	font-size: 0.875rem;
	gap: 0.4rem;
}

.ruo-header-actions .wc-block-mini-cart__button::before {
	content: "Cart";
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.875rem;
	font-weight: 500;
}

.ruo-header-actions .wc-block-mini-cart__icon {
	width: 1.25rem;
}

.ruo-header-actions .wc-block-mini-cart__button:hover {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--accent);
}

/* Homepage */

.ruo-home-hero {
	padding-block: clamp(4rem, 6.7vw, 6rem) clamp(3.5rem, 6.1vw, 5.5rem);
}

.ruo-hero-grid {
	display: grid !important;
	grid-template-columns: minmax(0, 1.02fr) minmax(20rem, 1fr);
	align-items: center;
	gap: clamp(3rem, 5vw, 4.5rem);
}

.ruo-hero-copy {
	max-width: 39rem;
	margin-inline: 0;
}

.ruo-eyebrow,
.ruo-evidence-label {
	margin-block: 0 1rem;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.71875rem;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-transform: uppercase;
}

.ruo-home-hero h1 {
	max-width: 43rem;
	margin-block: 0;
	font-size: clamp(2.375rem, 1.5rem + 3.833333vw, 4.375rem);
	line-height: 1.02;
	white-space: nowrap;
}

.ruo-home-hero .has-large-font-size {
	max-width: 29rem;
	color: var(--wp--preset--color--ink-70);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 1.1875rem !important;
	line-height: 1.55;
}

.ruo-trust-strip {
	border-block: 1px solid var(--wp--preset--color--border);
	padding-block: 2.375rem;
}

.ruo-trust-grid {
	gap: 0;
	margin-block: 0;
}

.ruo-trust-cell {
	padding-inline: clamp(1rem, 2.3vw, 2rem);
}

.ruo-trust-cell + .ruo-trust-cell {
	border-inline-start: 1px solid var(--wp--preset--color--border-soft);
}

.ruo-trust-cell:first-child {
	padding-inline-start: 0;
}

.ruo-trust-cell:last-child {
	padding-inline-end: 0;
}

.ruo-trust-cell h3 {
	margin-block: 0 0.25rem;
	font-size: clamp(1.5rem, 0.785714rem + 1.785714vw, 2.125rem);
	letter-spacing: -0.01em;
}

.ruo-trust-cell p {
	margin: 0;
	color: var(--wp--preset--color--ink-55);
	font-size: 0.84375rem;
}

.ruo-home-section {
	padding-block: var(--wp--preset--spacing--70);
}

.ruo-home-section > h2,
.ruo-home-section > .wp-block-group > h2 {
	font-size: clamp(2rem, 0.875rem + 2.833333vw, 3rem);
}

.ruo-recent-lots {
	margin-block-start: 0;
}

/* Evidence surfaces use the same quiet card idiom as commerce surfaces. */

.ruo-lot-library {
	margin-block-start: var(--wp--preset--spacing--60);
}

.ruo-lot-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: clamp(1.25rem, 2vw, 2rem);
}

.ruo-lot-card {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card, 10px);
	background: var(--wp--preset--color--surface);
	padding: 1rem;
}

.ruo-lot-card > :first-child,
.ruo-product-research > :first-child,
.ruo-lot-record > :first-child {
	margin-block-start: 0;
}

.ruo-lot-card > :last-child,
.ruo-product-research > :last-child,
.ruo-lot-record > :last-child {
	margin-block-end: 0;
}

.ruo-lot-card h3 {
	margin-block: 0.35rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.9375rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
}

.ruo-lot-card__status,
.ruo-evidence-label {
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
}

.ruo-lot-card__status {
	margin-block: 0;
	color: var(--wp--preset--color--accent);
	font-size: 0.65625rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.ruo-lot-search {
	margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

.ruo-lot-search label {
	display: block;
	margin-block-end: var(--wp--preset--spacing--20);
	font-weight: 600;
}

.ruo-lot-search > div {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

.ruo-lot-search input[type="search"] {
	flex: 1 1 18rem;
	min-height: 2.75rem;
	padding-inline: var(--wp--preset--spacing--30);
}

.ruo-lot-document {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card, 10px);
	padding: clamp(2rem, 4.45vw, 4rem);
}

.ruo-lot-document > .wp-block-post-title {
	margin-block-start: 0;
	border-block-end: 1px solid var(--wp--preset--color--border);
	padding-block-end: 1.375rem;
	font-size: clamp(2.75rem, 2.25rem + 1.833333vw, 3.625rem);
}

.ruo-lot-record {
	max-width: none;
}

.ruo-lot-record h2,
.ruo-product-research h2 {
	margin-block: 1.75rem 0.625rem;
	color: var(--wp--preset--color--ink-55);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	line-height: 1.4;
	text-transform: uppercase;
}

.ruo-data-table,
.ruo-compact-data {
	margin-block: var(--wp--preset--spacing--40);
	border-block-start: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.78125rem;
	font-variant-numeric: tabular-nums;
}

.ruo-data-table > div,
.ruo-compact-data > div {
	display: grid;
	grid-template-columns: minmax(8rem, 1fr) minmax(0, 2fr);
	gap: var(--wp--preset--spacing--40);
	border-block-end: 1px solid var(--wp--preset--color--rule-faint);
	padding-block: 0.6875rem;
}

.ruo-data-table > div:last-child,
.ruo-compact-data > div:last-child {
	border-block-end: 0;
}

.ruo-data-table dt,
.ruo-compact-data dt {
	color: var(--wp--preset--color--ink-55);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.ruo-data-table dd,
.ruo-compact-data dd {
	margin: 0;
}

.ruo-current-lots {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

.ruo-current-lot-summary {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card, 10px);
	background: var(--wp--preset--color--surface);
	padding: 1rem;
}

.ruo-current-lot-summary h3 {
	margin-block: 0 0.75rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.9375rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
}

.ruo-current-lot-summary .ruo-compact-data {
	margin-block: 0.75rem;
}

.ruo-current-lot-summary .ruo-document-list {
	margin-block: 0.75rem;
	padding-inline-start: 1.25rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.78125rem;
	font-variant-numeric: tabular-nums;
}

.ruo-current-lot-summary > p:last-child {
	margin-block-end: 0;
	font-size: 0.875rem;
	font-weight: 500;
}

.ruo-empty-state {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card, 10px);
	background: var(--wp--preset--color--surface);
	padding: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--ink-55);
}

/* Warm commerce cards and controls. */

.woocommerce ul.products,
.wc-block-grid__products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.5rem;
	margin: 0 !important;
	padding: 0 !important;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	display: none !important;
}

.woocommerce ul.products li.product,
.wc-block-grid__product {
	display: flex;
	width: auto !important;
	min-width: 0;
	float: none !important;
	flex-direction: column;
	margin: 0 !important;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card, 10px);
	background: var(--wp--preset--color--surface);
	transition: border-color var(--wp--custom--motion--quick, 150ms ease-out);
}

.woocommerce ul.products li.product:hover,
.wc-block-grid__product:hover {
	border-color: var(--wp--preset--color--border-strong);
}

.woocommerce ul.products li.product.outofstock,
.wc-block-grid__product.is-out-of-stock {
	border-color: var(--wp--preset--color--border-soft);
	background: var(--wp--preset--color--surface-sunken);
}

.woocommerce ul.products li.product > .woocommerce-LoopProduct-link {
	display: flex;
	min-height: 100%;
	flex: 1;
	flex-direction: column;
	text-decoration: none;
}

.woocommerce ul.products li.product a img,
.wc-block-grid__product-image img {
	width: 100%;
	aspect-ratio: 1;
	margin: 0 !important;
	border-block-end: 1px solid var(--wp--preset--color--rule-faint);
	background: var(--wp--preset--color--surface);
	object-fit: cover;
}

.woocommerce ul.products li.product.outofstock a img {
	opacity: 0.75;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title {
	margin: 0;
	padding: 1rem 1.125rem 0.375rem !important;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 1.1875rem !important;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.ruo-product-card-detail,
.ruo-product-card-stock {
	margin: 0;
	padding-inline: 1.125rem;
	color: var(--wp--preset--color--ink-55);
	font-size: 0.8125rem;
}

.ruo-product-card-stock {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin-block-start: 0.25rem;
	font-weight: 500;
}

.ruo-product-card-stock::before {
	width: 0.4375rem;
	height: 0.4375rem;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	content: "";
}

.outofstock .ruo-product-card-stock::before {
	background: var(--wp--preset--color--ink-30);
}

.woocommerce ul.products li.product .price,
.wc-block-grid__product-price {
	margin-block: auto 0 !important;
	padding: 0.25rem 1.125rem 0.75rem;
	color: var(--wp--preset--color--ink) !important;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 1.1875rem !important;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.woocommerce ul.products li.product > .button,
.wc-block-grid__product-add-to-cart {
	margin: 0 1.125rem 1.125rem !important;
}

.woocommerce ul.products li.product > .button,
.wc-block-grid__product-add-to-cart .wp-block-button__link {
	width: auto;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--small, 7px);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font-weight: 500;
	text-align: center;
}

.woocommerce ul.products li.product.outofstock > .button {
	border-color: var(--wp--preset--color--button-outline);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink-55);
}

/* Product detail: commerce layout with quiet evidence cards beside it. */

.single-product .woocommerce-breadcrumb {
	/* The page opened with ~76px of dead space: the main's own block padding
	   plus the breadcrumb's inherited top margin stacked up. */
	margin-block-start: 0;
	margin-block-end: 1.625rem;
	color: var(--wp--preset--color--ink-55);
	font-size: 0.8125rem;
}

.single-product div.product div.images {
	width: calc(54% - 2rem);
	margin-block-end: 2rem;
}

.single-product div.product div.images img {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card, 10px);
	background: var(--wp--preset--color--surface);
}

.single-product div.product .summary {
	display: flex;
	width: calc(46% - 2rem);
	flex-direction: column;
	gap: 1.375rem;
}

.single-product div.product .summary > * {
	margin-block: 0 !important;
}

.single-product div.product .product_title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.375rem, 1.375rem + 2.5vw, 3.25rem);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.05;
}

.single-product div.product .summary .price {
	color: var(--wp--preset--color--ink);
	font-size: clamp(1.75rem, 1.321429rem + 1.071429vw, 2.125rem);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

.single-product div.product .summary > .ruo-product-currency {
	margin-block-start: -0.875rem !important;
	color: var(--wp--preset--color--ink-55);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.single-product .woocommerce-product-details__short-description,
.single-product .product_meta {
	color: var(--wp--preset--color--ink-55);
	font-size: 0.875rem;
}

.single-product .woocommerce-product-details__short-description {
	font-size: 0.9375rem;
}

.single-product .stock {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--wp--preset--color--ink) !important;
	font-weight: 500;
}

.single-product .stock::before {
	width: 0.4375rem;
	height: 0.4375rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	content: "";
}

.single-product .out-of-stock::before {
	background: var(--wp--preset--color--ink-30);
}

.single-product .product-type-simple .summary form.cart {
	display: grid;
	grid-template-columns: auto minmax(10rem, 1fr);
	gap: 0.75rem;
}

.single-product .product-type-simple .summary form.cart::before,
.single-product .product-type-simple .summary form.cart::after {
	display: none !important;
}

.single-product .product-type-variable .woocommerce-variation-add-to-cart.variations_button {
	display: grid;
	grid-template-columns: auto minmax(10rem, 1fr);
	gap: 0.75rem;
}

.single-product .product-type-variable .woocommerce-variation-add-to-cart.variations_button::before,
.single-product .product-type-variable .woocommerce-variation-add-to-cart.variations_button::after {
	display: none !important;
}

/* The custom mass chips proxy Woo's select. The native control stays visible
   until the controller is running, so delayed customization preserves Woo's
   own variation UI instead of flashing an empty purchase state. */
.single-product form.variations_form.ruo-variation-controls-ready table.variations,
.single-product form.variations_form.ruo-variation-controls-ready .single_variation .woocommerce-variation-price {
	display: none;
}

.single-product form.cart .quantity .qty {
	width: 5rem;
	min-height: 3.25rem;
	padding-inline: 0.75rem;
	text-align: center;
}

.single-product form.cart .single_add_to_cart_button {
	min-height: 3.25rem;
	border-radius: var(--wp--custom--radius--control, 8px);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font-size: 1.03125rem;
	font-weight: 500;
}

.single-product table.variations {
	margin-block-end: 0.75rem;
}

.single-product table.variations th,
.single-product table.variations td {
	padding-block: 0.4rem;
	text-align: start;
}

.single-product table.variations label {
	color: var(--wp--preset--color--ink-55);
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.single-product table.variations select {
	min-height: 2.75rem;
	padding-inline: 0.75rem;
}

.single-product .ruo-product-research {
	width: calc(46% - 2rem);
	max-width: none;
	float: right;
	clear: right;
	margin-block: 0 2.5rem;
	border: 0;
	border-radius: var(--wp--custom--radius--card, 10px);
	padding-block: 1.125rem 1rem;
}

.single-product .woocommerce-tabs,
.single-product .related.products {
	clear: both;
}

.single-product .woocommerce-tabs {
	border-block-start: 1px solid var(--wp--preset--color--border);
	padding-block-start: 2rem;
}

/* Shared commerce/system surfaces */

.woocommerce .woocommerce-notices-wrapper > :where(.woocommerce-message, .woocommerce-error, .woocommerce-info),
.wc-block-components-notice-banner {
	border: 1px solid var(--wp--preset--color--border);
	border-inline-start: 3px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--control, 8px);
	background: var(--wp--preset--color--surface);
	box-shadow: none;
}

.wp-block-search:not(.ruo-header-search) .wp-block-search__input {
	padding-inline: 0.875rem;
}

.wp-block-search:not(.ruo-header-search) .wp-block-search__button {
	border-radius: var(--wp--custom--radius--control, 8px);
}

:root :where(.wc-block-components-button:not(.is-link)) {
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--control, 8px);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	box-shadow: none;
}

.wc-block-components-text-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input,
.wc-block-components-quantity-selector {
	border-color: var(--wp--preset--color--border-strong) !important;
	border-radius: var(--wp--custom--radius--control, 8px) !important;
	background: var(--wp--preset--color--surface);
	box-shadow: none !important;
}

/* Footer */

.ruo-footer-row {
	row-gap: var(--wp--preset--spacing--30);
}

.ruo-footer-navigation .wp-block-navigation__container {
	row-gap: var(--wp--preset--spacing--30);
}

@media (max-width: 70rem) {
	.ruo-header-grid {
		height: auto;
		grid-template-columns: minmax(10rem, auto) 1fr;
		padding-block: 1rem;
	}

	.ruo-primary-navigation {
		justify-self: end;
	}

	.ruo-header-actions {
		width: 100%;
		grid-column: 1 / -1;
	}

	.ruo-header-search {
		width: min(100%, 24rem);
		margin-inline-start: auto;
	}
}

@media (max-width: 56.25rem) {
	.ruo-hero-grid {
		grid-template-columns: 1fr;
	}

	.woocommerce ul.products,
	.wc-block-grid__products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.single-product div.product div.images,
	.single-product div.product .summary,
	.single-product .ruo-product-research {
		width: 100%;
		float: none;
		clear: both;
	}

	.single-product div.product .summary {
		margin-block-end: 2rem;
	}
}

@media (max-width: 40rem) {
	.ruo-main {
		padding-block: 2rem;
	}

	.ruo-disclosure {
		font-size: 0.6875rem;
	}

	/* One row, three zones: menu | wordmark | actions. The search bar used to
	   take a whole second row to itself on a screen that has none to spare, so
	   it collapses behind an icon and the row it needs is spent on the vial
	   instead. */
	.ruo-header-grid {
		min-height: 3.25rem;
		/* Left-aligned, not centred, and that is a measurement rather than a
		   preference. At 390px the three zones total 352px of the 358
		   available, so they fit — but centring on the SCREEN needs equal side
		   columns, and equal columns squeeze the brand to 116px against the
		   159px the wordmark actually wants. Centring here costs a visibly
		   smaller wordmark, or a logo that shifts sideways when the cart
		   appears. Left-aligned keeps it full size and in one place. */
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas: "menu brand actions";
		gap: 0.5rem;
		padding-block: 0.75rem;
	}

	.ruo-header-grid .ruo-primary-navigation {
		grid-area: menu;
		justify-self: start;
	}

	.ruo-wordmark {
		grid-area: brand;
		justify-self: start;
	}

	.ruo-header-actions {
		grid-area: actions;
		justify-self: end;
		width: auto;
		justify-content: flex-end;
		gap: 0.25rem;
	}

	/* Down from 1.1875rem, and explicitly unbreakable. The right-hand group has
	   grown twice now — a word for the cart, then a counter — and each time it
	   took width from the brand column until "Caltrexa Labs" wrapped onto two
	   lines. Wrapping is the failure worth preventing outright: a two-line
	   wordmark changes the header's height and reads as broken, where a
	   slightly smaller one does not. */
	.ruo-wordmark__name {
		font-size: 0.9rem;
		white-space: nowrap;
	}

	/* Pulled left, into the gap the grid leaves after the menu button. The
	   right-hand group is the crowded end of this row, so the width is worth
	   more there than as breathing space between the menu and the brand. */
	.ruo-wordmark {
		margin-inline-start: -0.375rem;
	}

	.ruo-wordmark__descriptor {
		font-size: 0.40625rem;
		letter-spacing: 0.26em;
	}

	/* Source order is search, toggle, cart, account — the desktop order, which
	   must not move. The row reads toggle, account, CART here: the cart sits
	   last because that is where a header cart lives almost everywhere, and on
	   a phone the far right is the easiest reach of the row. */
	.ruo-header-searchtoggle { order: 1; }
	.ruo-header-account { order: 2; }
	.ruo-header-actions .wc-block-mini-cart { order: 3; flex: 0 0 auto; }

	/* The search field drops out of the row entirely and becomes a panel
	   anchored under the header. The header is sticky, so anchoring to it
	   rather than to the page is what keeps the panel travelling with it. */
	.ruo-header-search {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: auto;
		min-width: 0;
		margin: 0;
		padding: 0.75rem var(--wp--custom--gutter);
		background: var(--wp--preset--color--paper);
		border-block-end: 1px solid var(--wp--preset--color--border);
		box-shadow: 0 12px 20px -16px rgb(0 0 0 / 0.35);
		display: none;
	}

	.ruo-header-shell.is-search-open .ruo-header-search {
		display: block;
	}

	.ruo-header-search .wp-block-search__inside-wrapper,
	.ruo-header-search .wp-block-search__input {
		min-width: 0;
	}

	/* iOS Safari zooms the viewport whenever a focused field is under 16px,
	   and then leaves it zoomed — which is what made opening search feel like
	   losing your place. 16px exactly; the field was 13.5px. */
	.ruo-header-search .wp-block-search__input {
		font-size: 16px;
	}

	.ruo-header-searchtoggle {
		margin-inline-end: 0.35rem;
	}

	.ruo-header-account {
		flex: 0 0 auto;
		font-size: 0.9375rem;
		font-weight: 600;
		white-space: nowrap;
	}

	/* "Cart" with the count set as a superscript, and no box around it.
	   The bordered control was fine beside a search field on desktop; on a
	   390px row it is the heaviest thing there and crowds "Log in". Word plus
	   superscript carries the same information in a third of the space. */
	.ruo-header-actions .wc-block-mini-cart__button {
		height: auto;
		min-height: 0;
		padding: 0.25rem 0.25rem;
		border: 0;
		border-radius: 0;
		background: none;
		font-size: 0.9375rem;
		font-weight: 600;
		gap: 0;
	}

	.ruo-header-actions .wc-block-mini-cart__button::before {
		font-size: inherit;
		font-weight: inherit;
	}

	/* The bag is what the box was framing; the word says it now. */
	.ruo-header-actions .wc-block-mini-cart__icon {
		display: none;
	}

	.ruo-header-actions .wc-block-mini-cart__quantity-badge {
		min-width: 0;
	}

	/* A filled disc, still set as a superscript. Accent-on-paper at 0.7em was
	   too quiet to find on a busy row — a small solid counter reads instantly
	   at a glance, which is the whole job of a cart count. */
	.ruo-header-actions .wc-block-mini-cart__badge {
		position: static;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 1.05rem;
		height: 1.05rem;
		margin: 0 0 0 0.15em;
		padding: 0 0.2em;
		border: 0;
		border-radius: 999px;
		background: var(--wp--preset--color--accent) !important;
		color: var(--wp--preset--color--on-accent) !important;
		font-size: 0.68rem;
		font-weight: 700;
		line-height: 1;
		vertical-align: super;
	}

	/* An empty cart is not worth a permanent icon on a 390px row. WooCommerce
	   keeps the count badge `hidden` until there is something in the cart and
	   toggles it reactively, so the cart follows that rather than needing its
	   own state to keep in sync. */
	.ruo-header-actions .wc-block-mini-cart:not(:has([data-wp-text="state.totalItemsInCart"]:not([hidden]))) {
		display: none;
	}

	.ruo-header-actions .wc-block-mini-cart__icon {
		display: none;
	}

	.ruo-home-hero {
		padding-block: 3.5rem 3rem;
	}

	.ruo-home-hero h1 {
		font-size: 2.375rem;
		white-space: normal;
	}

	.ruo-home-hero .has-large-font-size {
		font-size: 1rem !important;
	}

	.ruo-trust-grid {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ruo-trust-cell,
	.ruo-trust-cell:first-child,
	.ruo-trust-cell:last-child {
		padding: 1rem;
	}

	.ruo-trust-cell + .ruo-trust-cell {
		border-inline-start: 0;
	}

	.ruo-trust-cell:nth-child(even) {
		border-inline-start: 1px solid var(--wp--preset--color--border-soft);
	}

	.ruo-trust-cell:nth-child(n + 3) {
		border-block-start: 1px solid var(--wp--preset--color--border-soft);
	}

	.woocommerce ul.products,
	.wc-block-grid__products {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.ruo-lot-document {
		margin-inline: calc(-1 * var(--wp--custom--gutter));
		border-inline: 0;
		padding: 1.5rem var(--wp--custom--gutter);
	}

	.ruo-data-table > div,
	.ruo-compact-data > div {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--20);
	}

	.single-product div.product .summary {
		gap: 0.75rem;
	}

	.single-product div.product .product_title {
		font-size: 2.375rem;
	}

	.single-product div.product .summary .price {
		font-size: 1.75rem;
	}

	/* Fixed, not sticky. `position: sticky` can only hold an element inside its
	   own containing block, and that is `.summary` — 606px tall on a phone
	   against a 9,972px page. The bar therefore scrolled away for good at about
	   1,000px and only reappeared when the summary came back on the way up,
	   which is exactly the behaviour the owner described. A buy bar that is
	   meant to be permanent has to be pinned to the viewport. */
	.single-product .product-type-simple .summary form.cart {
		position: fixed;
		z-index: 20;
		inset-inline: 0;
		bottom: 0;
		margin-inline: 0 !important;
		border-block-start: 1px solid var(--wp--preset--color--border);
		background: var(--wp--preset--color--surface);
		padding: 0.75rem var(--wp--custom--gutter) max(0.75rem, env(safe-area-inset-bottom));
	}

	/* Out of flow now, so the page has to reserve the height itself or the bar
	   sits on top of the footer's last row. */
	body.single-product {
		padding-block-end: 5.5rem;
	}

	.ruo-footer-row {
		align-items: flex-start;
		flex-direction: column;
	}

	.ruo-footer-navigation .wp-block-navigation__container {
		align-items: flex-start;
		flex-direction: column;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* W-13 final-draft presentation pass. */

.wp-site-blocks > .ruo-main {
	flex: 1;
}

/* Homepage composition */

.ruo-hero-copy > * {
	margin-inline: 0 !important;
}

.ruo-hero-copy .wp-block-buttons {
	justify-content: flex-start;
}

.ruo-hero-media {
	--ruo-hero-media-offset: clamp(0rem, calc(9rem - 10vw), 3.5rem);
	width: calc(100% - var(--ruo-hero-media-offset));
	margin-block: 0;
	margin-inline: var(--ruo-hero-media-offset) 0;
}

.ruo-hero-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card, 10px);
	background: var(--wp--preset--color--surface-sunken);
	object-fit: cover;
	object-position: center;
}

.ruo-hero-media figcaption {
	margin-block-start: 0.625rem;
	color: var(--wp--preset--color--ink-55);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
}

.ruo-trust-grid {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ruo-trust-cell .ruo-trust-value {
	min-height: 2.16em;
	margin-block: 0 0.25rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.5rem, 0.785714rem + 1.785714vw, 2.125rem);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.08;
}

@media (min-width: 56.251rem) and (max-width: 75rem) {
	.ruo-trust-cell .ruo-trust-value {
		min-height: 3.24em;
	}
}

.ruo-home-section > :where(h2, .woocommerce) {
	width: 100%;
	max-width: none !important;
	margin-inline: 0 !important;
}

.ruo-home-section > h2 {
	margin-block-end: var(--wp--preset--spacing--50);
}

/* Catalog heading, search, filters, result tools */

.ruo-catalog-heading > * {
	margin-inline: 0 !important;
}

.ruo-catalog-heading h1 {
	margin-block: 0;
	font-size: clamp(2.75rem, 2.25rem + 1.833333vw, 3.625rem);
}

.ruo-catalog-heading p {
	max-width: 38rem;
	margin-block: 0.75rem 0;
	color: var(--wp--preset--color--ink-55);
}

.ruo-catalog-tools {
	display: grid !important;
	grid-template-columns: minmax(20rem, 1fr) auto;
	align-items: end;
	gap: 1.5rem;
	margin-block: 1.5rem 2rem;
}

.ruo-catalog-search {
	width: 100%;
	max-width: none !important;
	margin: 0 !important;
}

.ruo-catalog-search .wp-block-search__label,
.ruo-catalog-filters label {
	display: block;
	margin-block-end: 0.4375rem;
	color: var(--wp--preset--color--ink-55);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: 0.14em;
	line-height: 1.2;
	text-transform: uppercase;
}

.ruo-catalog-search .wp-block-search__inside-wrapper {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.625rem;
}

.ruo-catalog-search .wp-block-search__input,
.ruo-catalog-search .wp-block-search__button,
.ruo-catalog-filters select,
.ruo-catalog-filters button,
.woocommerce-ordering .orderby {
	min-height: 2.75rem;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--control, 8px);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.8125rem;
}

.ruo-catalog-search .wp-block-search__input {
	width: 100%;
	padding-inline: 0.875rem;
}

.ruo-catalog-search .wp-block-search__button {
	margin: 0;
	padding-inline: 1.25rem;
}

.ruo-catalog-filters,
.ruo-catalog-filters fieldset {
	margin: 0;
}

.ruo-catalog-filters fieldset {
	display: flex;
	min-width: 0;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.625rem;
	border: 0;
	padding: 0;
}

.ruo-catalog-filters legend {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.ruo-catalog-filters label {
	align-self: center;
	margin: 0 0.125rem 0 0;
}

.ruo-catalog-filters select,
.woocommerce-ordering .orderby {
	min-width: 10.5rem;
	appearance: none;
	background-color: var(--wp--preset--color--surface);
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 0.875rem) calc(50% - 0.125rem), calc(100% - 0.625rem) calc(50% - 0.125rem);
	background-repeat: no-repeat;
	background-size: 0.3125rem 0.3125rem, 0.3125rem 0.3125rem;
	color: var(--wp--preset--color--ink);
	padding: 0 2rem 0 0.875rem;
}

.ruo-catalog-filters button {
	border-color: var(--wp--preset--color--button-outline);
	border-radius: var(--wp--custom--radius--small, 7px);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	padding-inline: 1rem;
}

.ruo-catalog-filters a {
	min-height: 2.75rem;
	display: inline-flex;
	align-items: center;
	color: var(--wp--preset--color--ink-55);
	font-size: 0.8125rem;
	text-decoration-color: var(--wp--preset--color--ink-40);
}

.post-type-archive-product .woocommerce-products-header,
.post-type-archive-product .woocommerce-breadcrumb {
	display: none;
}

.post-type-archive-product #main.site-main {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 1rem 1.5rem;
}

.post-type-archive-product #main.site-main > :where(.woocommerce-notices-wrapper, ul.products, .woocommerce-pagination) {
	grid-column: 1 / -1;
}

.post-type-archive-product .woocommerce-result-count,
.post-type-archive-product .woocommerce-ordering {
	float: none;
	margin: 0 0 0.5rem;
}

.post-type-archive-product .woocommerce-result-count {
	color: var(--wp--preset--color--ink-55);
	font-size: 0.8125rem;
}

.post-type-archive-product .woocommerce-ordering {
	justify-self: end;
}

/* Product cards: semantic theme override, compact and content-led. */

.woocommerce ul.products,
.wc-block-grid__products {
	align-items: stretch;
}

.woocommerce ul.products li.product.ruo-product-card {
	display: flex !important;
	min-height: 0;
	flex-direction: column;
}

.ruo-product-card__media {
	position: relative;
	flex: 0 0 auto;
	background: var(--wp--preset--color--surface-sunken);
}

.ruo-product-card__image-link {
	display: block;
	text-decoration: none;
}

.woocommerce ul.products li.product .ruo-product-card__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	margin: 0 !important;
	border: 0;
	border-block-end: 1px solid var(--wp--preset--color--rule-faint);
	border-radius: 0;
	object-fit: cover;
}

.ruo-product-card__badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	display: inline-flex;
	min-height: 1.5rem;
	align-items: center;
	border-radius: var(--wp--custom--radius--badge, 3px);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	line-height: 1;
	padding-inline: 0.5rem;
	text-transform: uppercase;
}

.ruo-product-card__badge--new {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--on-accent);
}

.ruo-product-card__badge--unavailable {
	border: 1px solid var(--wp--preset--color--border-strong);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink-55);
}

.ruo-product-card__body {
	display: flex;
	min-width: 0;
	flex: 1;
	flex-direction: column;
	gap: 0.625rem;
	padding: 1rem 1.125rem 1.125rem;
}

.ruo-product-card__lot {
	display: flex;
	min-height: 2.75rem;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.ruo-product-card__lot p {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 0.125rem;
	margin: 0;
}

.ruo-product-card__purity {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}

.ruo-product-card__lot-label {
	color: var(--wp--preset--color--ink-40);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	line-height: 1.35;
	text-transform: uppercase;
}

.ruo-product-card__lot > a {
	flex: 0 0 auto;
	color: var(--wp--preset--color--accent);
	font-size: 0.78125rem;
	font-weight: 500;
	text-decoration-color: color-mix(in srgb, var(--wp--preset--color--accent) 40%, transparent);
}

.ruo-product-card__lot--empty p > span:last-child {
	color: var(--wp--preset--color--ink-55);
	font-size: 0.8125rem;
}

.ruo-product-card__rule {
	border-block-start: 1px solid var(--wp--preset--color--rule-faint);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin: 0;
	padding: 0 !important;
	font-size: 1.1875rem !important;
	line-height: 1.25;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title a {
	color: inherit;
	text-decoration: none;
}

.ruo-product-card__meta {
	margin: 0;
	color: var(--wp--preset--color--ink-55);
	font-size: 0.8125rem;
}

.ruo-product-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-block-start: auto;
	padding-block-start: 0.25rem;
}

.woocommerce ul.products li.product .ruo-product-card__footer .price {
	margin: 0 !important;
	padding: 0;
	font-size: 1.1875rem !important;
	line-height: 1.2;
}

.ruo-product-card__action {
	margin-inline-start: auto;
}

.woocommerce ul.products li.product .ruo-product-card__action .button {
	min-height: 2.5rem;
	margin: 0 !important;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--small, 7px);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.2;
	padding: 0.6875rem 1.375rem;
	text-align: center;
}

.woocommerce ul.products li.product.ruo-product-card:not(.purchasable) .ruo-product-card__action .button,
.woocommerce ul.products li.product.ruo-product-card.outofstock .ruo-product-card__action .button {
	border-color: var(--wp--preset--color--button-outline);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink-55);
}

.woocommerce ul.products li.product.ruo-product-card.outofstock .woocommerce-loop-product__title,
.woocommerce ul.products li.product.ruo-product-card.outofstock .ruo-product-card__purity {
	color: var(--wp--preset--color--ink-70);
}

/* Structured footer */

.ruo-footer-shell {
	border-block-start: 1px solid var(--wp--preset--color--border);
	padding-block: var(--wp--preset--spacing--60);
}

/* The footer carries the disclaimer, so it opens on the sections' rhythm
   everywhere. This was previously conditional on `main:has(.ruo-close)`, which
   silently stopped matching as soon as the closing band was adopted by pages
   whose wrapper is a div rather than a <main>. */
.ruo-footer-shell {
	padding-block-start: var(--wp--preset--spacing--70);
}

.ruo-footer-primary {
	display: grid !important;
	grid-template-columns: minmax(16rem, 1fr) auto;
	align-items: start;
	gap: var(--wp--preset--spacing--60);
}

.ruo-footer-primary > *,
.ruo-footer-links > * {
	margin-block-start: 0 !important;
}

.ruo-footer-brand > * {
	margin-inline: 0 !important;
}

.ruo-footer-brand > p {
	max-width: 25rem;
	margin-block: 1.25rem 0;
	color: var(--wp--preset--color--ink-55);
	font-size: 0.875rem;
}

.ruo-footer-links {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(8.5rem, auto));
	gap: clamp(1.75rem, 4vw, 4rem);
}

.ruo-footer-link-group > * {
	margin-inline: 0 !important;
	margin-block-start: 0 !important;
}

.ruo-footer-label {
	margin-block: 0 0.875rem;
	color: var(--wp--preset--color--ink-40);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.625rem;
	letter-spacing: 0.18em;
	line-height: 1.2;
}

.ruo-footer-navigation .wp-block-navigation__container {
	align-items: flex-start;
	gap: 0.625rem;
}

.ruo-footer-navigation a {
	font-size: 0.8125rem;
}

.ruo-footer-meta {
	display: flex !important;
	align-items: flex-start;
	gap: 1rem 2rem;
	margin-block-start: var(--wp--preset--spacing--60);
	border-block-start: 1px solid var(--wp--preset--color--border-soft);
	padding-block-start: 1.25rem;
}

.ruo-footer-meta p {
	margin-block: 0;
}

.ruo-footer-meta p:first-child {
	max-width: 55rem;
}

.ruo-footer-copyright {
	flex: 0 0 auto;
	white-space: nowrap;
}

@media (max-width: 56.25rem) {
	.ruo-hero-media {
		--ruo-hero-media-offset: 0rem;
	}

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

	.ruo-trust-cell,
	.ruo-trust-cell:first-child,
	.ruo-trust-cell:last-child {
		padding: 1rem;
	}

	.ruo-trust-cell + .ruo-trust-cell {
		border-inline-start: 0;
	}

	.ruo-trust-cell:nth-child(even) {
		border-inline-start: 1px solid var(--wp--preset--color--border-soft);
	}

	.ruo-trust-cell:nth-child(n + 3) {
		border-block-start: 1px solid var(--wp--preset--color--border-soft);
	}

	.ruo-trust-cell .ruo-trust-value {
		min-height: 1.08em;
	}

	.ruo-catalog-tools {
		grid-template-columns: 1fr;
		align-items: stretch;
	}

	.ruo-catalog-filters fieldset {
		align-items: center;
	}

	.ruo-footer-primary {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 40rem) {
	.ruo-hero-copy .wp-block-buttons {
		align-items: stretch;
		flex-direction: column;
	}

	.ruo-hero-copy .wp-block-button,
	.ruo-hero-copy .wp-block-button__link {
		width: 100%;
	}

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

	.ruo-trust-cell .ruo-trust-value {
		min-height: 2.16em;
		font-size: 1.375rem;
	}

	.ruo-catalog-tools {
		gap: 1rem;
		margin-block-end: 1.5rem;
	}

	.ruo-catalog-search .wp-block-search__inside-wrapper {
		grid-template-columns: 1fr;
	}

	.ruo-catalog-search .wp-block-search__button,
	.ruo-catalog-filters select,
	.ruo-catalog-filters button {
		width: 100%;
	}

	.ruo-catalog-filters fieldset {
		display: grid;
		grid-template-columns: 1fr;
		align-items: stretch;
	}

	.ruo-catalog-filters label {
		margin-block: 0.25rem -0.125rem;
	}

	.ruo-catalog-filters a {
		justify-content: center;
	}

	.post-type-archive-product #main.site-main {
		grid-template-columns: 1fr;
	}

	.post-type-archive-product #main.site-main > * {
		grid-column: 1;
	}

	.post-type-archive-product .woocommerce-ordering {
		width: 100%;
		justify-self: stretch;
	}

	.post-type-archive-product .woocommerce-ordering .orderby {
		width: 100%;
	}

	.ruo-product-card__body {
		padding: 1rem;
	}

	.ruo-footer-shell {
		padding-block: var(--wp--preset--spacing--60);
	}

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

	.ruo-footer-meta {
		align-items: flex-start;
		flex-direction: column;
	}

	.ruo-footer-copyright {
		white-space: normal;
	}
}

/* W-13 P1: product detail and evidence-document surfaces. */

.ruo-pdp-mobile-chrome {
	display: none;
}

@media (min-width: 56.251rem) {
	/* Two real columns rather than floats. Floats cannot equalise height, which
	   left a 452px image frame beside a ~1025px buy column; as a grid the frame
	   spans both rows of the right column and stretches to match it.
	   Every child defaults to full width, so anything WooCommerce injects
	   (notices, for one) spans instead of landing in a column by accident. */
	.single-product div.product {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 3rem;
		align-items: stretch;
	}

	.single-product div.product > * {
		grid-column: 1 / -1;
		float: none !important;
		width: auto !important;
	}

	.single-product div.product > div.images {
		grid-column: 1;
		grid-row: 1 / span 2;
		align-self: stretch;
		margin-block-end: 0;
	}

	.single-product div.product > .summary {
		grid-column: 2;
		grid-row: 1;
	}

	.single-product div.product > .ruo-product-research {
		grid-column: 2;
		grid-row: 2;
		align-self: start;
		/* The 2.5rem bottom margin made row 2 taller than its content, so the
		   stretched frame overshot the last line of text by exactly that much.
		   Separation from the next band is handled below instead. */
		margin-block-end: 0;
	}

	/* The full-bleed sections are grid items inside div.product, so a margin on
	   div.product itself separates nothing. This is the white space under the
	   image frame. Adjacent-sibling, not :first-of-type — the research panel is
	   also a <section>, so it wins that match and the rule never applies. */
	.single-product div.product > .ruo-product-research + * {
		margin-block-start: var(--wp--preset--spacing--60);
	}

}

.single-product .ruo-product-research {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	border: 0;
	padding-block: 0;
}

.single-product .ruo-product-research > * {
	margin-block: 0;
}

.single-product .ruo-product-research > h2:has(+ .ruo-data-table:empty),
.single-product .ruo-product-research > .ruo-data-table:empty {
	display: none;
}

.single-product .ruo-product-research > h2 {
	margin-block: 0;
}

.single-product .ruo-current-lot-summary {
	padding-block: 1.125rem 1rem;
}

.single-product .ruo-current-lot-summary h3 {
	margin-block-end: 1rem;
	font-size: 1.875rem;
}

.single-product .ruo-current-lot-summary .ruo-compact-data {
	margin-block: 0;
}

.single-product .ruo-current-lot-summary .ruo-compact-data > div {
	grid-template-columns: minmax(8rem, 1fr) auto;
	gap: 1rem;
	padding-block: 0.625rem;
}

.single-product .ruo-current-lot-summary .ruo-compact-data dd {
	text-align: end;
}

.single-product .ruo-current-lot-summary .ruo-document-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin-block: 0.875rem 0;
	border-block-start: 1px solid var(--wp--preset--color--rule-faint);
	padding: 0.875rem 0 0;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.875rem;
	font-weight: 500;
	list-style: none;
}

.single-product .ruo-current-lot-summary .ruo-document-list li {
	margin: 0;
}

.single-product .ruo-current-lot-summary > p:last-child {
	margin-block-start: 0.875rem;
}

.single-product .ruo-product-research > p {
	color: var(--wp--preset--color--ink-55);
	font-size: 0.8125rem;
	line-height: 1.55;
}

/* Testing library: one compact card per lot. */

.ruo-testing-page > .wp-block-post-title,
.ruo-testing-page > .wp-block-post-content,
.ruo-testing-library-wrap,
.ruo-testing-library-wrap > * {
	width: 100%;
	max-width: none !important;
}

.ruo-testing-page > .wp-block-post-title {
	margin-block-end: 0.75rem;
	font-size: clamp(2.75rem, 2.25rem + 1.833333vw, 3.625rem);
}

.ruo-testing-page > .wp-block-post-content {
	margin-block-start: 0;
}

.ruo-testing-page > .wp-block-post-content > * {
	max-width: 48rem;
	margin-inline: 0 !important;
}

.ruo-testing-page .ruo-lot-library {
	margin-block-start: var(--wp--preset--spacing--60);
}

.ruo-testing-page .ruo-lot-library > h2 {
	margin-block: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 1.125rem + 2.166667vw, 2.75rem);
	font-weight: 400;
	letter-spacing: -0.015em;
}

.ruo-testing-page .ruo-lot-library > h3 {
	margin-block: 2.5rem 0;
	color: var(--wp--preset--color--ink-55);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	line-height: 1.4;
	text-transform: uppercase;
}

.ruo-testing-page .ruo-lot-search {
	max-width: 48rem;
	margin-block: 1.5rem 2rem;
}

.ruo-testing-page .ruo-lot-search label {
	margin-block-end: 0.5rem;
	color: var(--wp--preset--color--ink-55);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ruo-testing-page .ruo-lot-search input[type="search"],
.ruo-testing-page .ruo-lot-search button {
	min-height: 2.75rem;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--control, 8px);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.8125rem;
}

.ruo-testing-page .ruo-lot-search button {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font-weight: 500;
	padding-inline: 1.25rem;
}

.ruo-testing-page .ruo-lot-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
}

.ruo-testing-page .ruo-lot-card {
	display: grid;
	grid-template-columns: 5.5rem 10.5rem minmax(11rem, 1.15fr) minmax(26rem, 2.4fr);
	align-items: center;
	gap: 1.25rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card, 10px);
	background: var(--wp--preset--color--surface);
	padding: 0.875rem 1rem;
}

.ruo-testing-page .ruo-lot-card:first-child {
	border-block-start: 1px solid var(--wp--preset--color--border);
}

.ruo-testing-page .ruo-lot-card:last-child {
	border-block-end: 1px solid var(--wp--preset--color--border);
}

.ruo-testing-page .ruo-lot-card h3,
.ruo-testing-page .ruo-lot-card > p {
	margin: 0;
}

.ruo-testing-page .ruo-lot-card h3 {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.9375rem;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
}

.ruo-testing-page .ruo-lot-card > p:not(.ruo-lot-card__status) {
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.35;
}

.ruo-testing-page .ruo-lot-card .ruo-compact-data {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	margin: 0;
	border: 0;
}

.ruo-testing-page .ruo-lot-card .ruo-compact-data > div {
	display: block;
	min-width: 0;
	border: 0;
	border-inline-start: 1px solid var(--wp--preset--color--rule-faint);
	padding: 0 0.6875rem;
}

.ruo-testing-page .ruo-lot-card .ruo-compact-data dt {
	font-size: 0.625rem;
	letter-spacing: 0.1em;
}

.ruo-testing-page .ruo-lot-card .ruo-compact-data dd {
	margin-block-start: 0.25rem;
	font-size: 0.78125rem;
	line-height: 1.35;
}

/* Individual testing records retain document geometry. */

.ruo-lot-breadcrumb {
	display: flex;
	gap: 0.5rem;
	margin-block: 0 1rem;
	color: var(--wp--preset--color--ink-55);
	font-size: 0.8125rem;
}

.ruo-lot-breadcrumb a {
	color: inherit;
}

.ruo-lot-document > * {
	width: 100%;
	max-width: none !important;
	margin-inline: 0 !important;
}

.ruo-lot-document-label {
	margin-block: 0 0.75rem;
	color: var(--wp--preset--color--ink-55);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.65625rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.2em;
	line-height: 1.4;
}

.ruo-lot-document > .wp-block-post-title {
	margin-block: 0;
	font-size: clamp(2.75rem, 2.25rem + 1.833333vw, 3.625rem);
}

.ruo-lot-record {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 1fr);
	gap: 0 4rem;
}

.ruo-lot-record > p:first-child {
	grid-column: 1 / -1;
	margin-block: 1.125rem 2rem;
	font-size: 1.125rem;
}

.ruo-lot-record > .ruo-data-table {
	grid-column: 1;
	grid-row: 2 / span 3;
	margin-block: 0;
}

.ruo-lot-record > h2 {
	grid-column: 2;
	grid-row: 2;
	align-self: end;
	margin-block: 0 0.625rem;
}

.ruo-lot-record > .ruo-document-list {
	grid-column: 2;
	grid-row: 3;
	align-self: start;
	margin: 0;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card, 10px);
	padding: 0;
	list-style: none;
}

.ruo-lot-record > .ruo-document-list li {
	margin: 0;
	border-block-end: 1px solid var(--wp--preset--color--rule-faint);
	padding-block: 0.75rem;
	font-size: 0.8125rem;
}

.ruo-lot-record > .ruo-document-list li:last-child {
	border-block-end: 0;
}

.ruo-lot-record > p:last-child {
	grid-column: 2;
	grid-row: 4;
	align-self: start;
	margin-block: 1rem 0;
	color: var(--wp--preset--color--ink-55);
	font-size: 0.78125rem;
	line-height: 1.55;
}

.wp-block-navigation__responsive-container-open,
.woocommerce-product-gallery__trigger {
	min-width: 2.75rem;
	min-height: 2.75rem;
}

@media (max-width: 56.25rem) {
	.ruo-testing-page .ruo-lot-card {
		grid-template-columns: 5.5rem 10.5rem minmax(0, 1fr);
		gap: 0.75rem 1rem;
	}

	.ruo-testing-page .ruo-lot-card .ruo-compact-data {
		grid-column: 1 / -1;
		margin-block-start: 0.25rem;
	}

	.ruo-lot-record {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.ruo-lot-record > p:first-child,
	.ruo-lot-record > .ruo-data-table,
	.ruo-lot-record > h2,
	.ruo-lot-record > .ruo-document-list,
	.ruo-lot-record > p:last-child {
		grid-column: 1;
		grid-row: auto;
	}

	.ruo-lot-record > h2 {
		margin-block: 2rem 0.625rem;
	}
}

@media (max-width: 40rem) {
	/* The PDP's bespoke mobile chrome is gone; it uses the shared header now.
	   The breadcrumb it always had is what sits below the header and above the
	   image — it only looked wrong because a second back arrow sat above it.
	   Without that bar it inherits the main's full block padding, which opened
	   ~137px of dead space at the top of the page. */
	.single-product .woocommerce-breadcrumb {
		margin-block-start: 0;
		margin-block-end: 1rem;
	}

	.single-product .ruo-main {
		padding-block-start: 1rem;
	}
}

/* W-13 P2: search, error, cart, and checkout states. */

.ruo-system-page > .wp-block-query-title,
.ruo-system-page > .wp-block-post-title,
.ruo-checkout-title {
	margin-block: 0 var(--wp--preset--spacing--50);
	font-size: clamp(2.75rem, 2.25rem + 1.833333vw, 3.625rem);
	letter-spacing: -0.015em;
}

.ruo-search-results {
	width: 100%;
	max-width: none !important;
}

.ruo-search-results .wp-block-post-template {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	border: 0;
	padding: 0;
	list-style: none;
}

.ruo-search-results .wp-block-post-template > li {
	margin: 0;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card, 10px);
	background: var(--wp--preset--color--surface);
	padding: 0;
}

.ruo-search-results .wp-block-post-template > li:last-child {
	border-block-end-color: var(--wp--preset--color--border);
}

.ruo-search-result {
	padding: 1.375rem;
}

.ruo-search-result > * {
	max-width: 48rem;
	margin-inline: 0 !important;
}

.ruo-search-result .wp-block-post-title {
	margin-block: 0 0.5rem;
	font-size: clamp(1.5rem, 0.928571rem + 1.428571vw, 2rem);
	line-height: 1.15;
}

.ruo-search-result .wp-block-post-excerpt,
.ruo-search-result .wp-block-post-excerpt__excerpt {
	margin-block: 0;
	color: var(--wp--preset--color--ink-55);
	font-size: 0.875rem;
	line-height: 1.6;
}

.ruo-search-results .wp-block-query-pagination {
	margin-block-start: 2rem;
}

.ruo-search-empty {
	max-width: 48rem !important;
	margin-inline: 0 !important;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--control, 8px);
	background: var(--wp--preset--color--surface);
	padding: 1.5rem;
}

.ruo-search-empty > * {
	margin-inline: 0 !important;
}

.ruo-search-empty > p {
	margin-block-start: 0;
}

.ruo-search-empty .wp-block-search,
.ruo-not-found-page .wp-block-search {
	width: min(100%, 40rem);
	max-width: none !important;
	margin-inline: 0 !important;
}

.ruo-search-empty .wp-block-search__label,
.ruo-not-found-page .wp-block-search__label {
	display: block;
	margin-block-end: 0.5rem;
	color: var(--wp--preset--color--ink-55);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ruo-search-empty .wp-block-search__inside-wrapper,
.ruo-not-found-page .wp-block-search__inside-wrapper {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.625rem;
}

.ruo-search-empty :where(.wp-block-search__input, .wp-block-search__button),
.ruo-not-found-page :where(.wp-block-search__input, .wp-block-search__button) {
	min-height: 2.75rem;
	margin: 0;
}

.ruo-system-panel {
	margin-block: clamp(2rem, 5vw, 4.5rem);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card, 10px);
	background: var(--wp--preset--color--surface);
	padding: clamp(2rem, 5vw, 4rem);
}

.ruo-system-panel > * {
	max-width: 48rem;
	margin-inline: 0 !important;
}

.ruo-system-eyebrow {
	margin-block: 0 0.875rem;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	line-height: 1.4;
}

.ruo-system-panel h1 {
	margin-block: 0 0.75rem;
	font-size: clamp(2.75rem, 2.25rem + 1.833333vw, 3.625rem);
}

.ruo-system-panel > p:not(.ruo-system-eyebrow) {
	margin-block: 0 1.5rem;
	color: var(--wp--preset--color--ink-55);
}

.ruo-system-panel .wp-block-buttons {
	margin-block-start: 1rem;
	justify-content: flex-start;
}

/* Product-search requests retain the composed shop tools and semantic cards. */

.ruo-product-search-page > #primary {
	width: 100%;
	max-width: none !important;
	margin-inline: 0 !important;
}

.ruo-product-search-page #main.site-main {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 1rem 1.5rem;
}

.ruo-product-search-page .woocommerce-products-header,
.ruo-product-search-page .woocommerce-notices-wrapper,
.ruo-product-search-page ul.products,
.ruo-product-search-page .woocommerce-pagination,
.ruo-product-search-page .woocommerce-no-products-found {
	width: 100%;
	max-width: none !important;
	margin-inline: 0 !important;
	justify-self: stretch;
}

.ruo-product-search-page .woocommerce-breadcrumb {
	display: none;
}

.ruo-product-search-page .ruo-catalog-heading .ruo-system-eyebrow {
	margin-block: 0 0.75rem;
}

.ruo-product-search-page .woocommerce-products-header {
	display: block;
	grid-column: 1 / -1;
	width: 100%;
	margin: 0;
}

.ruo-product-search-page .woocommerce-products-header h1 {
	margin: 0;
	font-size: clamp(2.25rem, 1.107143rem + 2.857143vw, 3.25rem);
	font-weight: 400;
	letter-spacing: -0.015em;
}

.ruo-product-search-page .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

.ruo-product-search-page .woocommerce-notices-wrapper:empty {
	display: none;
}

.ruo-product-search-page ul.products,
.ruo-product-search-page .woocommerce-pagination,
.ruo-product-search-page .woocommerce-no-products-found {
	grid-column: 1 / -1;
}

.ruo-product-search-page .woocommerce-result-count,
.ruo-product-search-page .woocommerce-ordering {
	float: none;
	margin: 0 0 0.5rem;
}

.ruo-product-search-page .woocommerce-result-count {
	grid-column: 1;
	color: var(--wp--preset--color--ink-55);
	font-size: 0.8125rem;
}

.ruo-product-search-page .woocommerce-ordering {
	grid-column: 2;
	justify-self: end;
}

.ruo-product-search-page .woocommerce-info {
	grid-column: 1 / -1;
}

.post-type-archive-product .woocommerce-no-products-found .wc-block-components-notice-banner.is-info,
.ruo-product-search-page .woocommerce-no-products-found .wc-block-components-notice-banner.is-info {
	grid-column: 1 / -1;
	border: 1px solid var(--wp--preset--color--border) !important;
	border-inline-start: 3px solid var(--wp--preset--color--accent) !important;
	border-radius: var(--wp--custom--radius--control, 8px) !important;
	background: var(--wp--preset--color--surface) !important;
	color: var(--wp--preset--color--ink) !important;
	box-shadow: none !important;
}

.post-type-archive-product .woocommerce-no-products-found .wc-block-components-notice-banner.is-info > svg,
.ruo-product-search-page .woocommerce-no-products-found .wc-block-components-notice-banner.is-info > svg {
	background-color: var(--wp--preset--color--accent) !important;
}

/* Woo system blocks stay warm and usable without inheriting legacy flex widths. */

.wc-block-grid__product {
	max-width: none !important;
	flex: none !important;
}

.ruo-cart-page .wc-block-cart__empty-cart__title.with-empty-cart-icon::before,
.ruo-cart-page .wc-block-cart__empty-cart__title.with-empty-cart-icon::after {
	display: none !important;
	content: none !important;
}

.ruo-cart-page .wc-block-cart__empty-cart__title.with-empty-cart-icon {
	margin-block: 0 1.5rem;
	padding-block-start: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.75rem, 0.875rem + 2.166667vw, 2.5rem);
	font-weight: 400;
}

.ruo-cart-page .wp-block-woocommerce-empty-cart-block > hr {
	display: none;
}

.ruo-cart-page .wp-block-woocommerce-empty-cart-block > .wp-block-heading:not(.wc-block-cart__empty-cart__title) {
	margin-block: 2.5rem 1.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.75rem, 0.875rem + 2.166667vw, 2.5rem);
	font-weight: 400;
}

/* Cart and checkout sit in the same wide container as the header, the page
   title and every other wide section. They previously carried
   `max-width: none`, so the form ran edge-to-edge while the title above it
   stopped at the site container — the break in the left margin is what read
   as "off", and it also gave single fields far more width than they use. */
.ruo-cart-page > .wp-block-post-content,
.ruo-checkout-page > .wp-block-post-content {
	width: 100%;
	max-width: var(--wp--style--global--wide-size) !important;
	margin-inline: auto;
}

/* The form column took every pixel the container did not give the summary,
   which put a ~870px email field on a desktop viewport. Capping it keeps the
   fields at a comfortable size and lets the summary sit next to the form
   instead of across a void. */
.ruo-checkout-page .wc-block-checkout__main {
	max-width: 48rem;
}

/* With the form capped, the summary sat right beside it and left a lopsided
   gap at the page's right edge. Pushing it to the end of the row makes the
   outer margins symmetric — the summary now ends where the header's own
   content ends — and puts the slack between the columns instead. Scoped to
   `.is-large` (Woo's two-column state) so the stacked mobile layout is
   untouched. */
.ruo-checkout-page .wc-block-checkout.is-large .wc-block-checkout__sidebar {
	margin-inline-start: auto;
}

.wc-blocks-components-select__select,
.wc-block-components-select__select,
.wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input {
	border-color: var(--wp--preset--color--border-strong) !important;
	border-radius: var(--wp--custom--radius--control, 8px) !important;
	background-color: var(--wp--preset--color--surface) !important;
}

.ruo-checkout-page .wc-block-components-checkout-order-summary-block,
.ruo-checkout-page .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary-block {
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card, 10px);
	background: var(--wp--preset--color--surface);
}

@media (max-width: 40rem) {
	.ruo-search-empty .wp-block-search__inside-wrapper,
	.ruo-not-found-page .wp-block-search__inside-wrapper {
		grid-template-columns: 1fr;
	}

	.ruo-search-empty .wp-block-search__button,
	.ruo-not-found-page .wp-block-search__button {
		width: 100%;
	}

	.ruo-system-panel {
		margin-block: 1rem;
		padding: 1.5rem;
	}

	.ruo-product-search-page #main.site-main {
		grid-template-columns: minmax(0, 1fr);
	}

	.ruo-product-search-page #main.site-main > *,
	.ruo-product-search-page .woocommerce-result-count,
	.ruo-product-search-page .woocommerce-ordering {
		grid-column: 1;
	}

	.ruo-product-search-page .woocommerce-ordering,
	.ruo-product-search-page .woocommerce-ordering .orderby {
		width: 100%;
		justify-self: stretch;
	}
}

@media (max-width: 22rem) {
	.ruo-trust-cell .ruo-trust-value {
		min-height: 3.24em;
	}
}

/* W-13.3 / D-017: locked 1a Warm Scientific evidence surfaces. */

.single-product .ruo-current-lot-summary {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card, 10px);
	background: var(--wp--preset--color--surface);
	padding: 1.125rem 1.25rem;
}

.ruo-current-lot-summary__heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.ruo-current-lot-label,
.single-product .ruo-current-lot-summary h3 {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
}

.ruo-current-lot-label {
	color: var(--wp--preset--color--ink-55);
	font-size: 0.65625rem;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-transform: uppercase;
}

.ruo-current-lot-label__mobile {
	display: none;
}

.single-product .ruo-current-lot-summary h3 {
	flex: 0 0 auto;
	font-size: 0.9375rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.4;
}

.single-product .ruo-current-lot-summary h3 a {
	color: inherit;
	text-decoration: none;
}

.single-product .ruo-current-lot-summary .ruo-compact-data {
	display: flex;
	flex-direction: column;
	margin: 0;
	border: 0;
	font-size: 0.78125rem;
}

.single-product .ruo-current-lot-summary .ruo-compact-data > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	border: 0;
	border-block-start: 1px solid var(--wp--preset--color--rule-faint);
	padding-block: 0.5rem;
}

.single-product .ruo-current-lot-summary .ruo-compact-data dt {
	letter-spacing: 0;
	text-transform: none;
}

.single-product .ruo-current-lot-summary .ruo-document-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin: 0;
	border: 0;
	padding: 0;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.875rem;
	font-weight: 500;
	list-style: none;
}

.single-product .ruo-current-lot-summary .ruo-document-list li {
	display: flex;
	min-width: 10rem;
	flex: 1 1 0;
}

.single-product .ruo-current-lot-summary .ruo-document-list a,
.ruo-current-lot-report a,
.ruo-lot-record__documents a {
	display: flex;
	min-height: 2.75rem;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--wp--preset--color--button-outline);
	border-radius: var(--wp--custom--radius--small, 7px);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.35;
	padding: 0.6875rem;
	text-align: center;
	text-decoration: none;
}

.single-product .ruo-current-lot-summary .ruo-document-list a {
	width: 100%;
}

.single-product .ruo-current-lot-summary .ruo-document-list a:hover,
.ruo-current-lot-report a:hover,
.ruo-lot-record__documents a:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.ruo-current-lot-report {
	display: none;
	margin: 0;
}

/* The Testing register keeps its dense desktop scan while each lot is a card. */

.ruo-testing-page .ruo-lot-card {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card, 10px);
	background: var(--wp--preset--color--surface);
}

.ruo-testing-page .ruo-lot-card:first-child,
.ruo-testing-page .ruo-lot-card:last-child {
	border-block-color: var(--wp--preset--color--border);
}

.ruo-testing-page .ruo-lot-card h3 {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
}

.ruo-testing-page .ruo-lot-card .ruo-compact-data dt {
	letter-spacing: 0;
	text-transform: none;
}

/* A testing record is one document card containing quieter section cards. */

.ruo-lot-document {
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card, 10px);
	background: var(--wp--preset--color--surface);
	padding: 3.5rem 4rem;
}

.ruo-lot-record {
	display: block;
}

.ruo-lot-record__masthead {
	border-block-end: 1px solid var(--wp--preset--color--border);
	padding-block-end: 1.375rem;
}

.ruo-lot-record__masthead .ruo-lot-document-label {
	margin-block: 0 0.75rem;
	text-transform: uppercase;
}

.ruo-lot-record__masthead h1 {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 3.625rem;
	font-weight: 400;
	letter-spacing: -0.015em;
	line-height: 1.05;
}

.ruo-lot-record__masthead h1 a {
	color: inherit;
	text-decoration: none;
}

.ruo-lot-record__lot {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-block: 1.25rem 0;
}

.ruo-lot-record__lot span {
	color: var(--wp--preset--color--ink-55);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.65625rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.ruo-lot-record__lot strong {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1.75rem;
	font-variant-numeric: tabular-nums;
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.2;
}

.ruo-lot-record__sections {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 1fr);
	gap: 1.5rem;
	margin-block-start: 1.75rem;
}

.ruo-lot-record__section {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card, 10px);
	background: var(--wp--preset--color--surface);
	padding: 1.375rem 1.5rem;
}

.ruo-lot-record__section:first-child {
	grid-row: 1 / span 2;
	align-self: start;
}

.ruo-lot-record__section h2 {
	margin: 0 0 0.75rem;
	color: var(--wp--preset--color--ink-55);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.65625rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	line-height: 1.4;
	text-transform: uppercase;
}

.ruo-lot-record__section .ruo-data-table {
	margin: 0;
	border: 0;
}

.ruo-lot-record__section .ruo-data-table > div {
	border: 0;
	border-block-start: 1px solid var(--wp--preset--color--rule-faint);
	padding-block: 0.6875rem;
}

.ruo-lot-record__section .ruo-data-table dt {
	letter-spacing: 0;
	text-transform: none;
}

.ruo-lot-record__documents .ruo-document-list {
	display: grid;
	gap: 0.625rem;
	margin: 0;
	border: 0;
	padding: 0;
	list-style: none;
}

.ruo-lot-record__documents .ruo-document-list li {
	margin: 0;
	border: 0;
	padding: 0;
}

.ruo-lot-record__disclosure {
	grid-column: 1 / -1;
}

.ruo-lot-record__disclosure p {
	margin: 0;
	color: var(--wp--preset--color--ink-55);
	font-size: 0.78125rem;
	line-height: 1.55;
}

@media (min-width: 40.001rem) and (max-width: 66rem) {
	.ruo-testing-page .ruo-lot-card {
		grid-template-columns: 5.5rem 10.5rem minmax(0, 1fr);
		gap: 0.75rem 1rem;
	}

	.ruo-testing-page .ruo-lot-card .ruo-compact-data {
		grid-column: 1 / -1;
		margin-block-start: 0.25rem;
	}
}

@media (max-width: 56.25rem) {
	.ruo-lot-record__sections {
		grid-template-columns: 1fr;
	}

	.ruo-lot-record__section:first-child,
	.ruo-lot-record__disclosure {
		grid-column: 1;
		grid-row: auto;
	}
}

@media (max-width: 40rem) {
	.single-product .ruo-current-lot-summary {
		gap: 0.625rem;
		padding: 0.875rem;
	}

	.ruo-current-lot-label {
		font-size: 0.65625rem;
		letter-spacing: 0.14em;
	}

	.ruo-current-lot-label__desktop {
		display: none;
	}

	.ruo-current-lot-label__mobile {
		display: inline;
	}

	.single-product .ruo-current-lot-summary h3 {
		font-size: 0.65625rem;
		letter-spacing: 0.04em;
	}

	.single-product .ruo-current-lot-summary .ruo-compact-data {
		font-size: 0.75rem;
	}

	.single-product .ruo-current-lot-summary .ruo-compact-data > div {
		padding-block: 0.4375rem;
	}

	.single-product .ruo-current-lot-summary .ruo-compact-data > .ruo-current-lot-row--identity,
	.single-product .ruo-current-lot-summary .ruo-document-list {
		display: none;
	}

	.ruo-current-lot-report {
		display: block;
	}

	.ruo-current-lot-report a {
		width: 100%;
	}

	.ruo-testing-page .ruo-lot-card {
		padding: 0.875rem;
	}

	.ruo-testing-page .ruo-lot-card h3 {
		font-size: 0.9375rem;
	}

	.ruo-lot-document {
		padding: 1.5rem;
	}

	.ruo-lot-record__masthead h1 {
		font-size: 2.75rem;
	}

	.ruo-lot-record__lot {
		align-items: flex-start;
		flex-direction: column;
		gap: 0.375rem;
	}

	.ruo-lot-record__sections {
		gap: 0.75rem;
		margin-block-start: 1.5rem;
	}

	.ruo-lot-record__section {
		padding: 1.125rem;
	}

	.ruo-lot-record__section .ruo-data-table > div {
		grid-template-columns: minmax(6.75rem, 0.85fr) minmax(0, 1.15fr);
		gap: 0.75rem;
	}
}

/*
 * Owner-directed hero variant (2026-08-31): full-bleed image hero, headline
 * over the calm left third with a warm scrim bridging the cool image toward
 * the paper palette. Image is MOCK (AI-generated), not launch photography.
 */
:root {
	--ruo-scrim-rgb: 255, 255, 255;

	/* One type scale for the whole page. Section headings, eyebrows, ledes and
	   fine print each get a single value rather than a near-miss per section. */
	--ruo-t-h2: clamp(1.875rem, 0.9rem + 2.45vw, 3rem);
	--ruo-t-h3: clamp(1.25rem, 0.95rem + 0.85vw, 1.75rem);
	--ruo-t-eyebrow: 0.6875rem;
	--ruo-t-lede: 1.0625rem;
	--ruo-t-body: 0.9375rem;
	--ruo-t-fine: 0.8125rem;
	--ruo-t-eyebrow-tracking: 0.16em;

	/* RUO disclosure bar + header row; used for anchor scroll clearance. */
	--ruo-sticky-h: 7.625rem;
}

/* Section headings: quality, QA, FAQ and the closing band all sit on the same
   step as the theme's own h2, which the shop band uses. */
.ruo-shop-head__title {
	font-weight: 600;
}

.ruo-shop-head__title,
.ruo-standard__title,
.ruo-qa__title,
.ruo-faq__title,
.ruo-close__title {
	font-size: var(--ruo-t-h2);
}

/* Eyebrows: mono, same size, same weight, same tracking everywhere. Colour and
   background stay per-element. */
.ruo-standard__pill,
.ruo-qa__pill,
.ruo-faq__group-label,
.ruo-footer-label,
.ruo-footer-disclaimer__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--ruo-t-eyebrow);
	font-weight: 500;
	letter-spacing: var(--ruo-t-eyebrow-tracking);
	line-height: 1.2;
	text-transform: uppercase;
}

/* Ledes, secondary body and fine print. */
.ruo-standard__lede,
.ruo-qa__lede,
.ruo-faq__lede,
.ruo-close__body {
	font-size: var(--ruo-t-lede);
	line-height: 1.6;
}

.ruo-faq__a,
.ruo-close__subscribe-sub,
.ruo-standard__guarantee h3 {
	font-size: var(--ruo-t-body);
}

.ruo-standard__guarantee p,
.ruo-close__subscribe-fine,
.ruo-footer-disclaimer__text {
	font-size: var(--ruo-t-fine);
}

.ruo-hero-cover {
	position: relative;
	/* Fill the viewport below the fixed chrome (RUO banner 42px + 78px header + border). */
	min-height: calc(100svh - 121px - var(--wp--preset--spacing--60));
	display: flex;
	align-items: center;
	overflow: hidden;
	margin-block-start: 0;
}
body.home .wp-site-blocks > .ruo-main,
.wp-site-blocks > .ruo-main:has(> .ruo-hero-cover),
/* Padding alone leaves the block gap between <header> and <main>; a page that
   opens on its own band needs the margin gone too. */
.wp-site-blocks > .ruo-main.ruo-flush-top {
	margin-block-start: 0;
}
.ruo-hero-cover-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	/* Constrained layout caps children at content width even when absolutely
	   positioned; the backdrop must escape it. */
	max-width: none;
	margin: 0;
	object-fit: cover;
	object-position: 72% center;
}
.ruo-hero-scrim {
	position: absolute;
	inset: 0;
	max-width: none;
	margin: 0;
	/* Must reach zero BEFORE the vial cluster begins (~45% at desktop widths):
	   any residual tint reads as haze on the two left vials. */
	background: linear-gradient(90deg, rgba(var(--ruo-scrim-rgb), 0.94) 0%, rgba(var(--ruo-scrim-rgb), 0.9) 24%, rgba(var(--ruo-scrim-rgb), 0.55) 34%, rgba(var(--ruo-scrim-rgb), 0) 42%);
}
@media (max-width: 1400px) {
	.ruo-hero-cover-img {
		object-position: 60% center;
	}
}
@media (max-width: 1100px) {
	.ruo-hero-cover-img {
		object-position: 42% center;
	}
}

.ruo-hero-cover-copy {
	position: relative;
	width: 100%;
	padding-block: var(--wp--preset--spacing--70);
	margin-block: 0;
}
.ruo-hero-cover .ruo-hero-title {
	margin-block-start: 0;
}
.ruo-hero-cover .wp-block-buttons {
	margin-block-end: 0;
}
.ruo-hero-cover .ruo-hero-title {
	/* Between Seed (~48px) and the previous 70px x-large: ~58px cap. */
	font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.625rem);
	/* Brand-token driven: repalette the accent and the hero follows.
	   color-mix halves the token's lightness - reads near-black, stays green. */
	color: #122a1e;
	color: color-mix(in srgb, var(--wp--preset--color--accent) 50%, #000);
	font-weight: 600;
	letter-spacing: -0.022em;
	max-width: 12em;
}
.ruo-hero-sub {
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	line-height: 1.55;
	max-width: 30rem;
	color: #122a1e;
	color: color-mix(in srgb, var(--wp--preset--color--accent) 50%, #000);
	margin-top: 1.25rem;
}
.ruo-hero-cover .wp-block-buttons {
	margin-top: 1.75rem;
	align-items: stretch;
	gap: 0.75rem;
}

/* Both CTAs must share one box: core's outline style ships its own border and
   padding, which is what made the pair mismatch in height. */
.ruo-hero-cover .wp-block-button__link {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.875rem;
	padding: 0.625rem 1.375rem;
	border-width: 1px;
	border-style: solid;
	font-size: 0.9375rem;
	line-height: 1.2;
}

/* Hero curve: the image's bottom edge bows, the page ground shows through the
   shoulders (reference: seed.com). */
.ruo-hero-cover {
	border-bottom-left-radius: 2.75rem;
	border-bottom-right-radius: 2.75rem;
	margin-block-end: 0;
	z-index: 1;
}
.ruo-hero-caption {
	position: absolute;
	right: 2rem;
	bottom: 3.25rem;
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	color: color-mix(in srgb, var(--wp--preset--color--ink) 45%, transparent);
}
@media (max-width: 700px) {
	.ruo-hero-cover {
		min-height: calc(100svh - 150px - var(--wp--preset--spacing--60));
		display: block;
		padding-block: 3.5rem 4.5rem;
	}
	.ruo-hero-cover-copy {
		max-width: 100%;
		box-sizing: border-box;
	}
	.ruo-hero-title {
		max-width: 100%;
		font-size: clamp(1.9rem, 9vw, 2.375rem);
	}
	.ruo-hero-sub {
		max-width: 100%;
	}
	.ruo-hero-cover-img {
		object-position: 62% center;
	}
	.ruo-hero-scrim {
		background: linear-gradient(180deg, rgba(var(--ruo-scrim-rgb), 0.94) 0%, rgba(var(--ruo-scrim-rgb), 0.78) 55%, rgba(var(--ruo-scrim-rgb), 0.3) 100%);
	}
}

/* Shop band: the announcement bar's ground carried into the catalog section.
   Only the section's own type flips to on-accent - product cards keep their
   own light surface and ink, so nothing inherits an unreadable colour. */
.ruo-shop-band > .ruo-home-section > h2,
.ruo-shop-band > .ruo-home-section > p {
	color: var(--wp--preset--color--on-accent);
}

/* The accent ground rises behind the hero's curved shoulders (seed.com
   pattern): pulled up by the corner radius, with matching top padding so the
   band's own content keeps its rhythm. */
.ruo-shop-band {
	margin-block-start: -2.75rem;
	padding-block-start: 2.75rem;
	/* Extra ground below the cards so the next section's rounded top can sit
	   over green without stealing the band's own spacing. */
	padding-block-end: 2.75rem;
}

/* Quality-standard section: copy column beside a product figure and three
   guarantee cards. Same card idiom as the rest of the site (1a). */
.ruo-standard {
	position: relative;
	margin-block-start: -2.75rem;
	padding-block: calc(var(--wp--preset--spacing--70) + 2.75rem) var(--wp--preset--spacing--70);
	background: var(--wp--preset--color--paper);
	border-start-start-radius: 2.75rem;
	border-start-end-radius: 2.75rem;
}

.ruo-standard__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(2rem, 4vw, 4rem);
	align-items: center;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.ruo-standard__pill {
	display: inline-block;
	margin: 0 0 1.25rem;
	padding: 0.4rem 0.85rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent);
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ruo-standard__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 0.875rem + 2.83vw, 3rem);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.022em;
	color: #122a1e;
	color: color-mix(in srgb, var(--wp--preset--color--accent) 50%, #000);
}

.ruo-standard__lede {
	margin: 1rem 0 0;
	max-width: 34ch;
	font-size: 1.0625rem;
	color: var(--wp--preset--color--ink-70);
}

.ruo-standard__points {
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.875rem;
}

.ruo-standard__points li {
	position: relative;
	padding-inline-start: 1.6rem;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--wp--preset--color--ink-70);
}

.ruo-standard__points li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.55em;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}

.ruo-standard__points strong {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

.ruo-standard__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.75rem;
}

.ruo-standard__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 2.875rem;
	padding: 0.625rem 1.375rem;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--wp--custom--motion--quick), border-color var(--wp--custom--motion--quick);
}

.ruo-standard__cta--ghost {
	background: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--button-outline);
	color: var(--wp--preset--color--ink);
}

.ruo-standard__cta:hover {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 88%, #000);
}

.ruo-standard__cta--ghost:hover {
	background: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--ink);
}

.ruo-standard__media {
	display: grid;
	gap: 0.75rem;
}

/* The artwork is now a transparent cut-out, so the tint is the panel's own
   background rather than something baked into a photograph. */
/* The image fills the frame edge to edge. 3:2 is the ratio the previously
   padded version measured at 1440 (661x431), so dropping the padding leaves
   the section the height it already had. The tint stays as the backdrop while
   the image loads. */
.ruo-standard__figure {
	position: relative;
	display: grid;
	place-items: center;
	margin: 0;
	padding: 0;
	aspect-ratio: 3 / 2;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	background: color-mix(in srgb, var(--wp--preset--color--accent) 12%, var(--wp--preset--color--surface));
	overflow: hidden;
}

.ruo-standard__figure img {
	width: 80%;
}

.ruo-standard__figure img {
	display: block;
	width: 100%;
	height: 100%;
	/* The figure's own radius plus overflow:hidden does the rounding. */
	object-fit: cover;
}

.ruo-standard__guarantees {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ruo-standard__guarantee {
	display: grid;
	gap: 0.4rem;
	align-content: start;
	padding: 1.1rem 1.15rem 1.25rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--surface);
}

.ruo-standard__guarantee svg {
	width: 1.625rem;
	height: 1.625rem;
	color: var(--wp--preset--color--accent);
	margin-bottom: 0.35rem;
}

.ruo-standard__guarantee h3 {
	margin: 0;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0;
	color: var(--wp--preset--color--ink);
}

.ruo-standard__guarantee p {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--wp--preset--color--ink-55);
}

@media (max-width: 1000px) {
	.ruo-standard__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.5rem;
	}
}

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

/* QA section: translucent panel over a blurred peptide-chain field, with a
   photograph of the bench. Structure mirrors the quality-standard section so
   the two read as a pair. */
.ruo-qa {
	position: relative;
	/* Raw-HTML section inside a constrained group: claim the full width
	   explicitly rather than relying on the block layout's align classes. */
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	padding-block: var(--wp--preset--spacing--70);
	padding-inline: var(--wp--custom--gutter);
	background-image: url("assets/mock/qa-chains-blur-r5.jpg");
	background-size: cover;
	background-position: center;
}

.ruo-qa__panel {
	position: relative;
	box-sizing: border-box;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(2rem, 4vw, 4rem);
	align-items: center;
	padding: clamp(1.75rem, 3.4vw, 3.25rem);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--surface) 70%, transparent);
	border-radius: 2rem;
	background: color-mix(in srgb, var(--wp--preset--color--surface) 82%, transparent);
	backdrop-filter: blur(14px) saturate(1.05);
	-webkit-backdrop-filter: blur(14px) saturate(1.05);
}

.ruo-qa__pill {
	display: inline-block;
	margin: 0 0 1.25rem;
	padding: 0.4rem 0.85rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent);
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ruo-qa__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--ruo-t-h2);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.022em;
	color: #122a1e;
	color: color-mix(in srgb, var(--wp--preset--color--accent) 50%, #000);
	max-width: 18ch;
}

.ruo-qa__lede {
	margin: 1rem 0 0;
	max-width: 42ch;
	font-size: var(--ruo-t-lede);
	line-height: 1.6;
	color: var(--wp--preset--color--ink-70);
}

.ruo-qa__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 2.875rem;
	margin-top: 1.75rem;
	padding: 0.625rem 1.375rem;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--wp--custom--motion--quick);
}

.ruo-qa__cta:hover {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 88%, #000);
}

/* The card sits to the right so the inset has room to hang off its left edge
   into the gap that was otherwise empty between the copy and the photo. */
.ruo-qa__media {
	position: relative;
	display: grid;
	justify-items: end;
}

@media (max-width: 1000px) {
	.ruo-qa__panel {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.25rem;
	}
	.ruo-qa__title {
		max-width: 100%;
	}
}

/* FAQ section: one narrow column of restrained accordion groups, closing the
   homepage. Native <details> so every answer stays in the markup, stays
   anchor-linkable, and works with no JavaScript. */
.ruo-faq {
	position: relative;
	/* Raw-HTML section inside a constrained group — same full-bleed claim as .ruo-qa. */
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	padding-block: var(--wp--preset--spacing--70);
	padding-inline: var(--wp--custom--gutter);
	background: var(--wp--preset--color--paper);
}

.ruo-faq__inner {
	max-width: 56rem;
	margin-inline: auto;
}

.ruo-faq__head {
	text-align: center;
	max-width: 44rem;
	margin-inline: auto;
	margin-block-end: clamp(2.25rem, 4vw, 3.5rem);
}


.ruo-faq__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--ruo-t-h2);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.022em;
	color: color-mix(in srgb, var(--wp--preset--color--accent) 50%, #000);
}

.ruo-faq__lede {
	margin: 1rem auto 0;
	max-width: 38rem;
	font-size: var(--ruo-t-lede);
	line-height: 1.6;
	color: var(--wp--preset--color--ink-70);
}


.ruo-faq__group + .ruo-faq__group {
	margin-block-start: 2.5rem;
}

.ruo-faq__group-label {
	margin: 0 0 0.875rem;
	color: var(--wp--preset--color--ink-40);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--ruo-t-eyebrow);
	font-weight: 500;
	letter-spacing: var(--ruo-t-eyebrow-tracking);
	line-height: 1.2;
	text-transform: uppercase;
}

.ruo-faq__item {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--surface);
}

.ruo-faq__item + .ruo-faq__item {
	margin-block-start: 0.625rem;
}

.ruo-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	padding: 1.125rem clamp(1rem, 2vw, 1.5rem);
	cursor: pointer;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
	list-style: none;
}

.ruo-faq__q::-webkit-details-marker {
	display: none;
}

.ruo-faq__q::marker {
	content: "";
}

.ruo-faq__q:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: -2px;
	border-radius: var(--wp--custom--radius--card);
}

.ruo-faq__chevron {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--ink) 6%, transparent);
}

.ruo-faq__chevron::before {
	content: "";
	width: 0.4rem;
	height: 0.4rem;
	border-inline-end: 1.5px solid var(--wp--preset--color--ink-70);
	border-block-end: 1.5px solid var(--wp--preset--color--ink-70);
	transform: translateY(-0.09rem) rotate(45deg);
	transition: transform var(--wp--custom--motion--quick);
}

.ruo-faq__item[open] .ruo-faq__chevron::before {
	transform: translateY(0.07rem) rotate(225deg);
}

.ruo-faq__a {
	margin-inline: clamp(1rem, 2vw, 1.5rem);
	border-block-start: 1px solid var(--wp--preset--color--rule-faint);
	padding-block: 1.125rem 1.375rem;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--wp--preset--color--ink-70);
}

.ruo-faq__a > :first-child {
	margin-block-start: 0;
}

.ruo-faq__a > :last-child {
	margin-block-end: 0;
}

.ruo-faq__a p {
	margin-block: 0.875rem 0;
}

.ruo-faq__a ul {
	margin-block: 0.875rem 0;
	padding-inline-start: 1.15rem;
}

.ruo-faq__a li + li {
	margin-block-start: 0.3rem;
}

.ruo-faq__a a {
	color: var(--wp--preset--color--accent);
	text-decoration-color: color-mix(in srgb, var(--wp--preset--color--accent) 40%, transparent);
	text-underline-offset: 0.18em;
}









@media (max-width: 40rem) {
	.ruo-faq__q {
		font-size: 0.9375rem;
		gap: 0.875rem;
	}

}

/* Footer on the brand ground: the accent fill replaces the hairline that used
   to separate the footer from the page, so every ink token inside it is
   restated against on-accent. */
.ruo-footer-shell {
	border-block-start: 0;
	color: var(--wp--preset--color--on-accent);
}

.ruo-footer-shell .ruo-wordmark__link,
.ruo-footer-shell .ruo-wordmark__link:hover {
	color: var(--wp--preset--color--on-accent);
}

.ruo-footer-shell .ruo-wordmark__descriptor {
	color: color-mix(in srgb, var(--wp--preset--color--on-accent) 68%, transparent);
}

.ruo-footer-shell .ruo-footer-brand > p {
	color: color-mix(in srgb, var(--wp--preset--color--on-accent) 78%, transparent);
}

.ruo-footer-shell .ruo-footer-label {
	color: color-mix(in srgb, var(--wp--preset--color--on-accent) 62%, transparent);
}

.ruo-footer-shell .ruo-footer-navigation a {
	color: color-mix(in srgb, var(--wp--preset--color--on-accent) 88%, transparent);
	text-decoration: none;
}

.ruo-footer-shell .ruo-footer-navigation a:hover {
	color: var(--wp--preset--color--on-accent);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.ruo-footer-shell .ruo-footer-meta {
	border-block-start-color: color-mix(in srgb, var(--wp--preset--color--on-accent) 22%, transparent);
}

/* WordPress emits its preset colour classes with !important, so the footer's
   ink-55 paragraphs have to be restated the same way to sit on the accent. */
.ruo-footer-shell .ruo-footer-meta p.has-ink-55-color {
	color: color-mix(in srgb, var(--wp--preset--color--on-accent) 84%, transparent) !important;
}

.ruo-footer-shell .ruo-footer-meta p.has-ink-55-color strong {
	color: var(--wp--preset--color--on-accent);
}

/* Closing band: contact prompt over a soft accent wash, with the subscribe
   card beneath it. Curved shoulders and the -2.75rem pull-up match the
   hero/quality sections, so the page keeps one shape language throughout. */
.ruo-close {
	/* No curve and no clipping here: the vials deliberately break out of the
	   band into the sections above and below, and the subscribe card straddles
	   the band's bottom edge. z-index lifts the whole section over the footer,
	   which follows it in the DOM. */
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	/* One width for both vials, so the left one's overhang can be expressed as
	   a fraction of it and stay proportional at every size. */
	--ruo-close-vial-w: clamp(4.9rem, 8.4vw, 8.05rem);
	/* Breathing room between the subscribe card and the footer. */
	--ruo-close-tail: clamp(2.5rem, 5vw, 4.5rem);
	padding-block: var(--wp--preset--spacing--70) var(--ruo-close-tail);
	padding-inline: var(--wp--custom--gutter);
	/* Vertical, and strong at the top: the band has to read as its own colour
	   field, not as a tint. It stops 30% into the subscribe card below. */
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--wp--preset--color--accent) 34%, var(--wp--preset--color--surface)) 0%,
		color-mix(in srgb, var(--wp--preset--color--accent) 22%, var(--wp--preset--color--surface)) 38%,
		color-mix(in srgb, var(--wp--preset--color--accent) 9%, var(--wp--preset--color--surface)) 74%,
		var(--wp--preset--color--surface) 100%
	);
}

/* The card straddles the boundary: its own height defines where the gradient
   stops and the white ground begins, so the 30/70 split holds at every size
   without hard-coding a card height. */
.ruo-close__zone {
	position: relative;
	margin-block-start: clamp(2.5rem, 4.5vw, 3.75rem);
}

.ruo-close__zone::after {
	content: "";
	position: absolute;
	inset-inline: calc(50% - 50vw);
	inset-block: 30% calc(-1 * var(--ruo-close-tail));
	background: var(--wp--preset--color--surface);
}

/* Decorative vials bleeding off the band's edges, as in the reference. They
   carry no meaning, so they are hidden from assistive tech and dropped
   entirely on small screens where they would crowd the copy. */
.ruo-close__vial {
	position: absolute;
	/* Above the zone's white ground, which follows them in the DOM and was
	   painting over the right vial's lower third. */
	z-index: 1;
	width: var(--ruo-close-vial-w);
	height: auto;
	opacity: 0.9;
	pointer-events: none;
	user-select: none;
}

.ruo-close__vial--left {
	inset-block-start: calc(-0.71 * var(--ruo-close-vial-w));
	inset-inline-start: clamp(1.5rem, 5vw, 7rem);
	transform: rotate(-19deg);
}

.ruo-close__vial--right {
	inset-block-end: calc(2.5rem + var(--ruo-close-tail));
	inset-inline-end: clamp(1.5rem, 5vw, 7rem);
	transform: rotate(14deg);
}

.ruo-close__contact {
	position: relative;
	z-index: 1;
	max-width: 46rem;
	margin-inline: auto;
	text-align: center;
}

.ruo-close__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--ruo-t-h2);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.024em;
	color: color-mix(in srgb, var(--wp--preset--color--accent) 50%, #000);
}

.ruo-close__body {
	margin: 1.125rem auto 0;
	max-width: 40rem;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-70);
}

.ruo-close__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	box-sizing: border-box;
	min-height: 2.875rem;
	margin-block-start: 1.75rem;
	padding: 0.625rem 1.5rem;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font-size: var(--ruo-t-body);
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--wp--custom--motion--quick);
}

.ruo-close__cta:hover {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 88%, #000);
	color: var(--wp--preset--color--on-accent);
}

.ruo-close__arrow {
	position: relative;
	display: block;
	width: 1.5rem;
	height: 1px;
	background: currentColor;
	transition: transform var(--wp--custom--motion--quick);
}

.ruo-close__arrow::after {
	content: "";
	position: absolute;
	inset-inline-end: 0;
	inset-block-start: -0.219rem;
	width: 0.4375rem;
	height: 0.4375rem;
	border-inline-end: 1px solid currentColor;
	border-block-start: 1px solid currentColor;
	transform: rotate(45deg);
}

.ruo-close__cta:hover .ruo-close__arrow {
	transform: translateX(0.25rem);
}

.ruo-close__subscribe {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	max-width: 64rem;
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	align-items: center;
	gap: clamp(1.5rem, 3vw, 3rem);
	padding: clamp(1.75rem, 3.2vw, 2.75rem);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 9%, transparent);
	border-radius: var(--wp--custom--radius--card);
	background: color-mix(in srgb, var(--wp--preset--color--ink) 5.5%, var(--wp--preset--color--surface));
}

.ruo-close__subscribe-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--ruo-t-h3);
	font-weight: 600;
	letter-spacing: -0.018em;
	line-height: 1.15;
	color: var(--wp--preset--color--ink);
}

.ruo-close__subscribe-sub {
	margin: 0.625rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--wp--preset--color--ink-70);
}

.ruo-close__subscribe-fine {
	margin: 0.5rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--wp--preset--color--ink-40);
}

.ruo-close__form {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	box-sizing: border-box;
	padding: 0.375rem 0.375rem 0.375rem 0.25rem;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--surface);
}

.ruo-close__form:focus-within {
	border-color: var(--wp--preset--color--accent);
}

.ruo-close__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 0.5rem 0.75rem;
	font-family: inherit;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--ink);
}

.ruo-close__input:focus {
	outline: none;
}

.ruo-close__input::placeholder {
	color: var(--wp--preset--color--ink-40);
}

.ruo-close__submit {
	flex: 0 0 auto;
	min-height: 2.5rem;
	padding: 0.5rem 1.25rem;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: calc(var(--wp--custom--radius--control) - 4px);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color var(--wp--custom--motion--quick);
}

.ruo-close__submit:hover {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 88%, #000);
}

.ruo-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 60rem) {
	.ruo-close__subscribe {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 40rem) {
	.ruo-close__vial {
		display: none;
	}

	.ruo-close__cta {
		width: 100%;
	}

	/* Stacked, the single bordered shell reads as one oversized box, so the
	   field takes its own border and the wrapper steps back. */
	.ruo-close__form {
		flex-wrap: wrap;
		gap: 0.625rem;
		padding: 0;
		border: 0;
		background: transparent;
	}

	.ruo-close__input,
	.ruo-close__submit {
		width: 100%;
		flex: 1 1 100%;
	}

	.ruo-close__input {
		min-height: 2.875rem;
		padding: 0.625rem 0.875rem;
		border: 1px solid var(--wp--preset--color--border-strong);
		border-radius: var(--wp--custom--radius--control);
		background: var(--wp--preset--color--surface);
	}

	.ruo-close__input:focus {
		border-color: var(--wp--preset--color--accent);
	}

	.ruo-close__submit {
		min-height: 2.875rem;
		border-radius: var(--wp--custom--radius--control);
	}
}

/* Footer disclaimer: the site's research-use position stated once, loudly, at
   the bottom of every page. Amber is deliberately outside the brand palette —
   this block is meant to read as a notice, not as decoration. */
.ruo-footer-disclaimer {
	--ruo-caution: #E8B75A;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.875rem;
	margin-block-start: var(--wp--preset--spacing--60);
	border: 1px solid color-mix(in srgb, var(--ruo-caution) 34%, transparent);
	border-inline-start: 3px solid var(--ruo-caution);
	border-radius: var(--wp--custom--radius--card);
	padding: 1.25rem clamp(1rem, 2vw, 1.5rem);
	background: color-mix(in srgb, #000 22%, transparent);
}

.ruo-footer-disclaimer__icon {
	width: 1.25rem;
	height: 1.25rem;
	margin-block-start: 0.05rem;
	color: var(--ruo-caution);
}

.ruo-footer-disclaimer__label {
	margin: 0 0 0.5rem;
	color: var(--ruo-caution);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	line-height: 1.2;
	text-transform: uppercase;
}

.ruo-footer-disclaimer__text {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.65;
	color: color-mix(in srgb, var(--wp--preset--color--on-accent) 82%, transparent);
}

.ruo-footer-disclaimer__text strong {
	color: var(--wp--preset--color--on-accent);
	font-weight: 600;
}

.ruo-footer-disclaimer__link {
	display: inline-block;
	margin-block-start: 0.75rem;
	color: var(--ruo-caution);
	font-size: 0.8125rem;
	font-weight: 500;
	text-decoration: none;
}

.ruo-footer-disclaimer__link:hover {
	color: var(--ruo-caution);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

@media (max-width: 40rem) {
	.ruo-footer-disclaimer {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------------------------------------------------------------------
   Layered hero (Alt2 prototype)

   The flat photograph is split into an inpainted bench plate plus four vial
   sprites, so each vial can move on its own. The baked reflections were
   painted out of the plate and are regenerated here from the same sprite:
   mirrored, foreshortened, masked and blurred. That way a lifted vial's
   reflection lengthens and fades with it instead of staying nailed to the
   bench, which is what gives the motion away.

   Motion is deliberately small (~10px). The sprites are cut from transparent
   glass, so each one carries the background it was refracting; at this
   amplitude the offset is imperceptible, and a bigger bounce would expose it.
   --------------------------------------------------------------------------- */

.ruo-hero-cover--layered .ruo-hero-stage {
	position: absolute;
	inset: 0;
	max-width: none;
	margin: 0;
	overflow: hidden;
	container-type: size;
}

.ruo-hero-stage__inner {
	/* Reproduces object-fit: cover with object-position: var(--stage-x) center,
	   but as a real box, so the sprites can be placed in percentages of the
	   original photograph and stay registered to the plate at every size. */
	--stage-ar: 3004 / 1408;
	--stage-x: 0.72;
	--stage-w: max(100cqw, calc(100cqh * (var(--stage-ar))));
	--stage-h: max(100cqh, calc(100cqw / (var(--stage-ar))));
	position: absolute;
	width: var(--stage-w);
	height: var(--stage-h);
	max-width: none;
	left: calc((100cqw - var(--stage-w)) * var(--stage-x));
	top: calc((100cqh - var(--stage-h)) * 0.5);
}

.ruo-hero-plate {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.ruo-hero-vial {
	position: absolute;
	left: var(--l);
	top: var(--t);
	width: var(--w);
	translate: 0 0;
	transition: translate 380ms cubic-bezier(0.22, 0.9, 0.28, 1);
	animation: ruo-hero-vial-in 950ms cubic-bezier(0.22, 0.9, 0.28, 1) var(--d, 0ms) backwards;
	will-change: translate;
}

.ruo-hero-vial__img {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
}

/* Contact shadow (soft analytic ellipse). Faint while the vial stands on the
   bench — ambient occlusion at the contact — then stronger and pinned to the
   bench while the vial is lifted. */
.ruo-hero-vial__shadow {
	position: absolute;
	left: 0;
	bottom: -1.5%;
	width: 100%;
	height: auto;
	max-width: none;
	opacity: 0.3;
	scale: 0.9 0.6;
	transform-origin: 50% 100%;
	transition: opacity 380ms ease-out, scale 380ms ease-out,
		translate 380ms cubic-bezier(0.22, 0.9, 0.28, 1);
	pointer-events: none;
}

/* Reflection: the vial mirrored into the bench, faint and foreshortened. It
   is an element rather than plate content so it can travel with the vial at
   rest and give way to the shadow while lifted. */
.ruo-hero-vial__refl {
	position: absolute;
	left: 0;
	top: 99%;
	width: 100%;
	transform-origin: top center;
	/* Rest reflection at roughly half the strength of the original polished-
	   steel photograph: longer, with readable structure, fading over ~70% of
	   the mirrored height. Still fades out entirely on lift. */
	scale: 1 0.9;
	opacity: 0.44;
	filter: blur(2px);
	-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.35) 42%, transparent 84%);
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.35) 42%, transparent 84%);
	transition: opacity 380ms ease-out, filter 380ms ease-out,
		translate 380ms cubic-bezier(0.22, 0.9, 0.28, 1);
	pointer-events: none;
}

.ruo-hero-vial__refl img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	transform: scaleY(-1);
}

.ruo-hero-vial:hover .ruo-hero-vial__refl {
	/* A mirror image recedes as far below the surface as the object rises
	   above it: +10px cancels the span's lift, +10px is the recession. It
	   dims and softens rather than vanishing. */
	translate: 0 20px;
	opacity: 0.26;
	filter: blur(3px);
}



.ruo-hero-vial:hover {
	translate: 0 -10px;
}

.ruo-hero-vial:hover .ruo-hero-vial__shadow {
	/* Cancels the span's lift exactly, so the shadow stays on the bench. */
	translate: 0 10px;
	scale: 1 1;
	opacity: 0.8;
}

@keyframes ruo-hero-vial-in {
	0% {
		translate: 0 22px;
		opacity: 0;
	}
	55% {
		translate: 0 -7px;
		opacity: 1;
	}
	100% {
		translate: 0 0;
		opacity: 1;
	}
}

.ruo-hero-cover .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
}

.ruo-hero-cover .wp-block-button__link:hover .ruo-close__arrow {
	transform: translateX(0.25rem);
}

/* The scrim and the copy block both span the hero, so they would otherwise
   swallow every pointer event before it reached a vial. */
.ruo-hero-cover--layered .ruo-hero-scrim,
.ruo-hero-cover--layered .ruo-hero-cover-copy {
	pointer-events: none;
}

.ruo-hero-cover--layered .ruo-hero-cover-copy :is(a, button, input) {
	pointer-events: auto;
}

@media (max-width: 1400px) {
	.ruo-hero-stage__inner {
		--stage-x: 0.6;
	}
}

@media (max-width: 1100px) {
	.ruo-hero-stage__inner {
		--stage-x: 0.42;
	}
}

/* Mobile hero: the vials come out from behind the copy and line up under it.

   At desktop the copy holds the left of the bench and the vials the right. On a
   phone there is no "right" — the stage's cover-crop put three of the four
   vials clean off the canvas (x = 409, 528 and 665 on a 390px screen) and left
   the fourth half-cropped behind the paragraph. The hero was selling peptides
   with no peptides in it.

   So the layered arrangement is dropped rather than squeezed: the cover-crop is
   switched off so the stage is exactly the hero box, `__inner` becomes a plain
   row pinned to its foot, and the hero grows to make room. Reference is
   seed.com, minus the edge-to-edge bleed — the owner wants the row inset from
   the screen edges rather than running into them. */
@media (max-width: 700px) {
	.ruo-hero-cover--layered {
		/* One value drives the space above the row and the space below it, so
		   they cannot drift apart. */
		--ruo-hero-vial-gap: 2rem;
		/* Flow order is stage-then-copy, which is what the desktop overlay
		   needs; a column flex box is what lets the row move below the copy
		   without touching the markup. */
		display: flex;
		flex-direction: column;
		align-items: stretch;
		/* Content sets the height. A min-height taller than the content does
		   not distribute its slack — all of it lands above the row, which is
		   how the gap came to be 91px on top against 40px underneath. */
		min-height: 0;
		padding-block: 2.5rem var(--ruo-hero-vial-gap);
	}

	/* Two paddings were stacking above the headline — the hero's own and this
	   block's — putting 104px between the fixed chrome and the H1, roughly
	   2.5x what a mobile hero wants. The hero keeps one; the copy adds none. */
	.ruo-hero-cover--layered .ruo-hero-cover-copy {
		order: 1;
		padding-block: 0;
	}

	/* Out of the absolute overlay and into the flow, so the row's height is
	   real and the space above it is a stated margin rather than whatever
	   happened to be left over. */
	.ruo-hero-cover--layered .ruo-hero-stage {
		order: 2;
		position: static;
		container-type: normal;
		overflow: visible;
		margin-block-start: var(--ruo-hero-vial-gap);
	}

	.ruo-hero-cover--layered .ruo-hero-stage__inner {
		/* Cancel the cover-crop: percentages of the photograph are meaningless
		   now that the vials no longer stand on it. */
		position: static;
		width: 100%;
		height: auto;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		/* No inset of its own. The hero already pads the band, and doubling it
		   here cost the row 40px a side — which comes straight off the vials,
		   since their width is a share of what is left. */
		padding-inline: 0;
		box-sizing: border-box;
	}

	/* The plate is the backdrop, not a member of the row. The stage no longer
	   establishes a containing block, so this now resolves against the hero
	   itself — which is what should back the whole band anyway. */
	.ruo-hero-cover--layered .ruo-hero-plate {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
	}

	.ruo-hero-cover--layered .ruo-hero-vial {
		position: relative;
		left: auto;
		top: auto;
		flex: 0 0 auto;
		/* Overlapping buys width: four vials abutting can only be a quarter of
		   the row each, while four that tuck behind their neighbour can be
		   larger than that. Same trade the desktop cluster makes. */
		width: 27%;
		max-width: none;
		z-index: 2;   /* over the scrim, which is painted after the stage */
	}

	/* Source order is 2, 4, 1, 3 — the paint order the desktop overlap needs.
	   Side by side that reads as shuffled, so the row restores 1-4.

	   The negative start margin is what produces the overlap; at 3% of the row
	   it is ~11% of a vial's width, inside the 9-16% the desktop cluster uses.
	   It sits at the low end deliberately: the overlap covers the right edge of
	   the vial behind, and at 16% that reached into the longest name on the
	   shelf — "Semaglutide" lost its final letter.

	   Depth and stagger are the desktop hero's own, not an approximation of it.
	   Desktop places the vials by --l/--t/--w percentages and paints them in
	   DOM order 2, 4, 1, 3, so the last one painted is frontmost:

	     rear   v2  ->  v4  ->  v1  ->  v3   front

	   which is the alternating front/rear read: 1 front, 2 rear, 3 front, 4
	   rear, with each rear vial sitting slightly higher than the front one to
	   its right. The offsets below are those same --t values, converted out of
	   stage-height percentages (--t) into stage-width ones (dividing by the
	   3004/1408 stage aspect, since --l and --w are widths) and then expressed
	   as a share of the row: v3 sits lowest at 0, v1 1.59, v4 3.01, v2 4.38.

	   A percentage margin-bottom resolves against the containing block's WIDTH,
	   not its height, which is why those read small — on a 350px row, 4.38% is
	   the ~15px separating the back vial from the front one at desktop. */
	.ruo-hero-cover--layered .ruo-hero-vial--1 { order: 1; z-index: 4; margin-bottom: 1.59%; }
	.ruo-hero-cover--layered .ruo-hero-vial--2 { order: 2; z-index: 2; margin-bottom: 4.38%; }
	.ruo-hero-cover--layered .ruo-hero-vial--3 { order: 3; z-index: 5; margin-bottom: 0; }
	.ruo-hero-cover--layered .ruo-hero-vial--4 { order: 4; z-index: 3; margin-bottom: 3.01%; }

	.ruo-hero-cover--layered .ruo-hero-vial--2,
	.ruo-hero-cover--layered .ruo-hero-vial--3,
	.ruo-hero-cover--layered .ruo-hero-vial--4 {
		margin-inline-start: -3%;
	}

	/* The gradient has to be clear of the glass before the row starts, for the
	   same reason it does at desktop: residual tint reads as haze on the vials.
	   The vertical version above ends at 0.3, which would sit right on them. */
	.ruo-hero-cover--layered .ruo-hero-scrim {
		background: linear-gradient(180deg,
			rgba(var(--ruo-scrim-rgb), 0.94) 0%,
			rgba(var(--ruo-scrim-rgb), 0.88) 30%,
			rgba(var(--ruo-scrim-rgb), 0.5) 48%,
			rgba(var(--ruo-scrim-rgb), 0) 62%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ruo-hero-vial {
		animation: none;
		transition: none;
	}

	.ruo-hero-vial:hover {
		translate: 0 0;
	}
}

/* Footer trust row: sits opposite the copyright, same line. */
.ruo-footer-trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	order: 2;
}

.ruo-footer-trust li {
	display: inline-flex;
	align-items: center;
	gap: 0.4375rem;
	color: color-mix(in srgb, var(--wp--preset--color--on-accent) 76%, transparent);
	font-size: var(--ruo-t-fine);
	line-height: 1.3;
	white-space: nowrap;
}

.ruo-footer-trust svg {
	width: 1rem;
	height: 1rem;
	flex: 0 0 auto;
	color: color-mix(in srgb, var(--wp--preset--color--on-accent) 60%, transparent);
}

.ruo-footer-copyright {
	order: 1;
}

/* QA section reveal: the media card slides up first, then the vial fades in
   and its spin starts. The resting state is the finished state, so if the
   observer never fires — no JS, reduced motion — everything is simply there. */
.ruo-qa__card {
	position: relative;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--surface);
}

.ruo-qa[data-ruo-reveal] .ruo-qa__panel {
	translate: 0 2.75rem;
	opacity: 0;
	transition: translate 760ms cubic-bezier(0.22, 0.9, 0.28, 1),
		opacity 560ms ease-out;
}

.ruo-qa[data-ruo-reveal] .ruo-qa__vial {
	opacity: 0;
	/* Waits for the panel to land before starting. */
	transition: opacity 620ms ease-out 700ms;
}

.ruo-qa[data-ruo-reveal].is-in .ruo-qa__panel {
	translate: 0 0;
	opacity: 1;
}

.ruo-qa[data-ruo-reveal].is-in .ruo-qa__vial {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.ruo-qa[data-ruo-reveal] .ruo-qa__panel,
	.ruo-qa[data-ruo-reveal] .ruo-qa__vial {
		translate: 0 0;
		opacity: 1;
		transition: none;
	}
}

/* Sentence-case wordmark (Alt2 / Caltrexa Labs). The uppercase lockup carries
   0.06em to open the caps up; at mixed case that same tracking reads loose. */
.ruo-wordmark__link--sentence .ruo-wordmark__name {
	letter-spacing: 0.005em;
	font-size: 1.625rem;
	font-weight: 700;
}

.ruo-wordmark__link--sentence .ruo-wordmark__descriptor {
	letter-spacing: 0.2em;
}

/* Shop band heading row: title left, View All right, RUO footnote beneath. */
/* The heading row and its footnote share a wrapper: WordPress's constrained
   layout centres every direct child of the group with !important margins,
   which pushed the footnote off the content edge. */
.ruo-shop-intro {
	/* Direct children of a constrained group are capped at contentSize (48rem)
	   and centred. The heading row needs the full alignwide column. */
	max-width: none;
	margin-block-end: 2.75rem;
}

.ruo-shop-head {
	/* Title, supporting line, and Shop All on one row, bottom-aligned. */
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.9fr) auto;
	/* Aligned on the baseline of each element's LAST line — not the box
	   bottom, which let descenders decide. */
	align-items: last baseline;
	gap: 1rem clamp(1.5rem, 4vw, 4rem);
}

.ruo-shop-head__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	line-height: 1.08;
	letter-spacing: -0.022em;
	color: var(--wp--preset--color--on-accent);
}

.ruo-shop-head__all {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding-block-end: 0.3125rem;
	border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--on-accent) 55%, transparent);
	color: var(--wp--preset--color--on-accent);
	font-size: var(--ruo-t-body);
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color var(--wp--custom--motion--quick);
}

.ruo-shop-head__all:hover {
	border-block-end-color: var(--wp--preset--color--on-accent);
	color: var(--wp--preset--color--on-accent);
}

.ruo-shop-head__arrow {
	position: relative;
	display: block;
	width: 1.25rem;
	height: 1px;
	background: currentColor;
	transition: transform var(--wp--custom--motion--quick);
}

.ruo-shop-head__arrow::after {
	content: "";
	position: absolute;
	inset-inline-end: 0;
	inset-block-start: -0.219rem;
	width: 0.4375rem;
	height: 0.4375rem;
	border-inline-end: 1px solid currentColor;
	border-block-start: 1px solid currentColor;
	transform: rotate(45deg);
}

.ruo-shop-head__all:hover .ruo-shop-head__arrow {
	transform: translateX(0.25rem);
}

.ruo-shop-note {
	max-width: 28rem;
	margin: 0;
	color: color-mix(in srgb, var(--wp--preset--color--on-accent) 74%, transparent);
	font-size: var(--ruo-t-fine);
	line-height: 1.55;
}

.ruo-shop-note a {
	color: var(--wp--preset--color--on-accent);
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-color: color-mix(in srgb, var(--wp--preset--color--on-accent) 50%, transparent);
}

.ruo-shop-note a:hover {
	color: var(--wp--preset--color--on-accent);
	text-decoration-color: currentColor;
}

/* Product card hover: the image pushes in behind a brand-tinted scrim, and the
   name takes a sweep of the same colour. The sweep is a background-size
   animation rather than padding, so nothing reflows. */
.ruo-product-card__media {
	overflow: hidden;
}

.ruo-product-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	/* Even across the whole image. A bottom-weighted gradient only tinted the
	   lower half, which read as a banding artifact rather than a highlight. */
	background: color-mix(in srgb, var(--wp--preset--color--accent) 15%, transparent);
	opacity: 0;
	pointer-events: none;
	transition: opacity 380ms ease-out;
}

.woocommerce ul.products li.product .ruo-product-card__media img {
	transition: transform 560ms cubic-bezier(0.22, 0.9, 0.28, 1);
	will-change: transform;
}

.woocommerce ul.products li.product.ruo-product-card:hover .ruo-product-card__media img,
.woocommerce ul.products li.product.ruo-product-card:focus-within .ruo-product-card__media img {
	transform: scale(1.07);
}

.woocommerce ul.products li.product.ruo-product-card:hover .ruo-product-card__media::after,
.woocommerce ul.products li.product.ruo-product-card:focus-within .ruo-product-card__media::after {
	opacity: 1;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title a {
	background-image: linear-gradient(
		color-mix(in srgb, var(--wp--preset--color--accent) 15%, transparent),
		color-mix(in srgb, var(--wp--preset--color--accent) 15%, transparent)
	);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 100%;
	transition: background-size 340ms cubic-bezier(0.22, 0.9, 0.28, 1),
		color var(--wp--custom--motion--quick);
}

.woocommerce ul.products li.product.ruo-product-card:hover .woocommerce-loop-product__title,
.woocommerce ul.products li.product.ruo-product-card:focus-within .woocommerce-loop-product__title {
	font-weight: 600;
}

.woocommerce ul.products li.product.ruo-product-card:hover .woocommerce-loop-product__title a,
.woocommerce ul.products li.product.ruo-product-card:focus-within .woocommerce-loop-product__title a {
	background-size: 100% 100%;
	color: var(--wp--preset--color--accent);
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product .ruo-product-card__media img,
	.woocommerce ul.products li.product .woocommerce-loop-product__title a,
	.ruo-product-card__media::after {
		transition: none;
	}

	.woocommerce ul.products li.product.ruo-product-card:hover .ruo-product-card__media img {
		transform: none;
	}
}

@media (max-width: 40rem) {
	.ruo-shop-head {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
	}

	.ruo-shop-head__all {
		justify-self: start;
	}
}

@media (max-width: 60rem) {
	.ruo-shop-head {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.ruo-shop-note {
		grid-column: 1 / -1;
		grid-row: 2;
	}
}

/* The guarantee cards sit on the section's own rhythm rather than crowding the
   panel above them. */
.ruo-standard__media {
	display: grid;
	gap: clamp(1.75rem, 3.5vw, 2.75rem);
}

/* Contact eyebrow, matching every other eyebrow on the page. */
.ruo-close__pill,
.ruo-faq__pill {
	display: inline-block;
	margin: 0 0 1.25rem;
	padding: 0.4rem 0.85rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent);
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--ruo-t-eyebrow);
	font-weight: 500;
	letter-spacing: var(--ruo-t-eyebrow-tracking);
	line-height: 1.2;
	text-transform: uppercase;
}

/* QA vial. A cylinder with a featureless label has an unchanging silhouette as
   it turns — only its highlights travel — so the turn is a specular band
   sweeping across the body, masked to the vial's own shape. */
/* Sized by width, not by the card. aspect-ratio on the card cannot shrink it
   below the image's intrinsic height, so the vial drove the panel taller than
   the copy beside it. */
.ruo-qa__card {
	display: grid;
	place-items: center;
	padding: clamp(1.5rem, 3vw, 2.5rem);
}

/* Photo variant: the image IS the card, so the padding and centring that
   framed the turning vial are dropped and the picture fills the radius. */
.ruo-qa__card--photo {
	margin: 0;
	padding: 0;
	width: min(100%, 24rem);
	aspect-ratio: 3 / 4;
}

.ruo-qa__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

/* Second image, overlapping the card's left edge at its vertical midpoint.
   The surface-coloured ring is what separates the two photographs — without
   it they read as one collaged image rather than two stacked prints. */
.ruo-qa__inset {
	position: absolute;
	top: 50%;
	left: 0;
	translate: 0 -50%;
	width: min(62%, 16rem);
	aspect-ratio: 4 / 3;
	margin: 0;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--card);
	box-shadow: 0 0 0 6px var(--wp--preset--color--paper, #fff),
		0 18px 38px -18px rgb(0 0 0 / 0.45);
}

.ruo-qa__inset img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Below ~640px the media column has narrowed to the card's own width, so the
   inset can no longer hang beside it and overlaps outright. Centred it would
   land on the researchers' faces, so it drops to the bottom corner — over the
   bench — and shrinks to stay secondary to the photo behind it. Above this the
   column is still wider than the card and the side overlap holds. */
@media (max-width: 640px) {
	.ruo-qa__inset {
		top: auto;
		bottom: 0.75rem;
		left: 0.75rem;
		translate: none;
		width: min(52%, 12rem);
	}
}

/* Catalog-card cart state. data-qty drives everything: at 0 only the Add
   button exists; above 0 the stepper and the "In cart" link replace it. */
.ruo-loop-cart {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.ruo-loop-cart[data-qty="0"] .ruo-loop-cart__stepper,
.ruo-loop-cart[data-qty="0"] .ruo-loop-cart__incart {
	display: none;
}

/* WooCommerce's stylesheet reaches the loop button at (0,4,2), so the state
   swap needs !important to win. Its injected "View cart" link is always
   hidden — the wrapper renders its own In-cart link. */
.ruo-loop-cart:not([data-qty="0"]) > .add_to_cart_button,
.ruo-loop-cart .added_to_cart {
	display: none !important;
}

.ruo-loop-cart.is-busy {
	opacity: 0.6;
	pointer-events: none;
}

.ruo-loop-cart__stepper {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--surface);
}

.ruo-loop-cart__step {
	min-height: 2.25rem;
	width: 2.125rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--ink);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}

.ruo-loop-cart__step:hover {
	background: color-mix(in srgb, var(--wp--preset--color--ink) 6%, transparent);
	color: var(--wp--preset--color--ink);
}

.ruo-loop-cart__count {
	min-width: 1.375rem;
	text-align: center;
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
}

.ruo-loop-cart__incart {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	padding: 0.6875rem 1.125rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
	border-radius: var(--wp--custom--radius--small, 7px);
	background: color-mix(in srgb, var(--wp--preset--color--accent) 13%, var(--wp--preset--color--surface));
	color: var(--wp--preset--color--accent);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}

.ruo-loop-cart__incart:hover {
	border-color: var(--wp--preset--color--accent);
	background: color-mix(in srgb, var(--wp--preset--color--accent) 20%, var(--wp--preset--color--surface));
	color: var(--wp--preset--color--accent);
}

/* Stepper matches the button height. */
.ruo-loop-cart__step {
	min-height: 2.5rem;
}

/* "N in cart" indicator pinned to the card's top-right corner. */
.woocommerce ul.products li.product.ruo-product-card {
	position: relative;
}

.ruo-loop-cart__flag {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	padding: 0.4rem 0.8rem;
	border-radius: 999px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	pointer-events: none;
}

.ruo-loop-cart[data-qty="0"] .ruo-loop-cart__flag {
	display: none;
}

/* Elevation inverts on this palette: the page ground is pure white, so the
   raised product-card shell takes the slightly darker value and the border
   carries more of the separation. */
.woocommerce ul.products li.product {
	background-color: #FCFCFD;
}

/* WooCommerce auto-inserts its customer-account block into header template
   parts. It became a fourth child of the three-column header grid, which
   pushed the search/account/cart group onto a second row. The header already
   carries its own Account link, so the injected block is removed from flow. */
.ruo-header-grid > .wp-block-woocommerce-customer-account {
	display: none;
}

/* ---------------------------------------------------------------------------
   Product page (W-24 / WS-2)
   --------------------------------------------------------------------------- */

/* Single image, no zoom: the frame is a tinted panel and the vial sits at
   roughly half its height, matching the reference proportion. */
.single-product div.product div.images {
	display: grid;
	place-items: center;
	position: relative;
	box-sizing: border-box;
	padding: clamp(2rem, 5vw, 4rem);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	background: color-mix(in srgb, var(--wp--preset--color--ink) 3.5%, var(--wp--preset--color--surface));
	overflow: hidden;
}

.single-product div.product div.images .woocommerce-product-gallery__image,
.single-product div.product div.images .woocommerce-product-gallery__wrapper {
	display: grid;
	place-items: center;
	width: 100%;
}

/* The gallery wraps its image in an anchor that shrinks to content. Left
   alone, the image's percentage width resolves against that shrunken box
   rather than the frame, which squashed a square shot to 104x168 on mobile. */
.single-product div.product div.images a {
	display: block;
	width: 100%;
}

.woocommerce div.product div.images img {
	/* Percentages here resolve against the frame's CONTENT box, which the
	   frame's own padding has already narrowed — hence values this high. */
	width: auto;
	max-width: 92%;
	max-height: 58%;
	height: auto;
	margin-inline: auto;
	object-fit: contain;
	border: 0;
	border-radius: 0;
	background: transparent;
}

/* The zoom trigger and any thumbnail rail have no place on a one-image PDP. */
.woocommerce-product-gallery__trigger,
.single-product div.product div.images .flex-control-thumbs,
.single-product div.product div.images .flex-control-nav {
	display: none !important;
}

.ruo-pdp-frame-chips {
	position: absolute;
	left: clamp(0.875rem, 2vw, 1.25rem);
	bottom: clamp(0.875rem, 2vw, 1.25rem);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ruo-pdp-frame-chips li {
	padding: 0.35rem 0.7rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink-55);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.625rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* PDP sections below the buy summary. Full-bleed bands on the section rhythm,
   alternating ground so each reads as its own moment. */
.ruo-pdp-section {
	clear: both;
	box-sizing: border-box;
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	padding-block: var(--wp--preset--spacing--70);
	padding-inline: var(--wp--custom--gutter);
}

/* Tints are declared per section, not counted. nth-of-type(even) also counted
   ruo-core's research section and Woo's related block, which put two tinted
   bands back to back. */
.ruo-pdp-coa,
.single-product .related.products {
	background: color-mix(in srgb, var(--wp--preset--color--ink) 3%, var(--wp--preset--color--surface));
}

.ruo-pdp-section__inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.ruo-pdp-section__eyebrow {
	margin: 0 0 0.75rem;
	color: var(--wp--preset--color--ink-40);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--ruo-t-eyebrow);
	font-weight: 500;
	letter-spacing: var(--ruo-t-eyebrow-tracking);
	text-transform: uppercase;
}

.ruo-pdp-section__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--ruo-t-h2);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.022em;
	color: color-mix(in srgb, var(--wp--preset--color--accent) 50%, #000);
}

.ruo-pdp-section__lede {
	max-width: 46rem;
	margin: 1rem 0 0;
	font-size: var(--ruo-t-lede);
	line-height: 1.6;
	color: var(--wp--preset--color--ink-70);
}

.ruo-pdp-card,
.ruo-pdp-coa__cert,
.ruo-pdp-coa__assays,
.ruo-pdp-notice__card {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--surface);
	padding: clamp(1.25rem, 2.6vw, 2rem);
}

.ruo-pdp-card h3,
.ruo-pdp-coa__prior-title {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--ruo-t-h3);
	font-weight: 600;
	letter-spacing: -0.018em;
	color: var(--wp--preset--color--ink);
}

.ruo-pdp-card p {
	margin: 0 0 0.75rem;
	font-size: var(--ruo-t-body);
	line-height: 1.6;
	color: var(--wp--preset--color--ink-70);
}

.ruo-pdp-card__foot a,
.ruo-pdp-coa__prior a {
	color: var(--wp--preset--color--accent);
	font-weight: 500;
	text-decoration: none;
}

.ruo-pdp-card__foot a:hover,
.ruo-pdp-coa__prior a:hover {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* --- COA -------------------------------------------------------------- */
.ruo-pdp-coa__grid,
.ruo-pdp-compound__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	margin-block-start: clamp(1.75rem, 3.5vw, 2.75rem);
}

.ruo-pdp-coa__label {
	margin: 0;
	color: var(--wp--preset--color--ink-40);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--ruo-t-eyebrow);
	letter-spacing: var(--ruo-t-eyebrow-tracking);
	text-transform: uppercase;
}

.ruo-pdp-coa__lot {
	margin: 0.4rem 0 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1.5rem;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--ink);
}

.ruo-pdp-coa__purity {
	margin: 1.25rem 0 0;
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
}

.ruo-pdp-coa__purity span {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.25rem, 1.2rem + 3vw, 3.25rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--accent);
}

.ruo-pdp-coa__purity small {
	font-size: var(--ruo-t-fine);
	color: var(--wp--preset--color--ink-55);
}

.ruo-pdp-coa__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin-block-start: 1.5rem;
}

.ruo-pdp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.875rem;
	padding: 0.625rem 1.25rem;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font-size: var(--ruo-t-body);
	font-weight: 500;
	text-decoration: none;
}

.ruo-pdp-btn:hover {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 88%, #000);
	color: var(--wp--preset--color--on-accent);
}

.ruo-pdp-btn--ghost {
	border-color: var(--wp--preset--color--button-outline);
	background: transparent;
	color: var(--wp--preset--color--ink);
}

.ruo-pdp-btn--ghost:hover {
	background: color-mix(in srgb, var(--wp--preset--color--ink) 5%, transparent);
	color: var(--wp--preset--color--ink);
}

.ruo-pdp-coa__assays dl {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
}

.ruo-pdp-coa__assays dl > div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.7rem 0;
	border-block-start: 1px solid var(--wp--preset--color--rule-faint);
}

.ruo-pdp-coa__assays dl > div:first-child {
	border-block-start: 0;
}

.ruo-pdp-coa__assays dt {
	color: var(--wp--preset--color--ink-55);
}

.ruo-pdp-coa__assays dd {
	margin: 0;
	color: var(--wp--preset--color--ink);
	text-align: right;
}

.ruo-pdp-coa__note {
	margin: 1rem 0 0;
	font-size: var(--ruo-t-fine);
	line-height: 1.55;
	color: var(--wp--preset--color--ink-55);
}

.ruo-pdp-coa__prior-title {
	margin-block: clamp(2rem, 4vw, 3rem) 1rem;
}

.ruo-pdp-coa__prior {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ruo-pdp-coa__prior li {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--surface);
	padding: 1rem 1.125rem;
}

.ruo-pdp-coa__prior-lot {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	color: var(--wp--preset--color--ink-55);
}

.ruo-pdp-coa__prior-purity {
	margin: 0.35rem 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.ruo-pdp-coa__prior-date {
	margin: 0.15rem 0 0.75rem;
	font-size: var(--ruo-t-fine);
	color: var(--wp--preset--color--ink-40);
}

.ruo-pdp-coa__prior a {
	font-size: var(--ruo-t-fine);
}

/* --- compound + notice ------------------------------------------------- */
.ruo-pdp-compound__grid dl {
	margin: 0;
	font-size: var(--ruo-t-body);
}

.ruo-pdp-compound__grid dl > div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.7rem 0;
	border-block-start: 1px solid var(--wp--preset--color--rule-faint);
}

.ruo-pdp-compound__grid dl > div:first-child {
	border-block-start: 0;
}

.ruo-pdp-compound__grid dt {
	color: var(--wp--preset--color--ink-55);
}

.ruo-pdp-compound__grid dd {
	margin: 0;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	text-align: right;
}

.ruo-pdp-notice__card {
	border-inline-start: 3px solid var(--wp--preset--color--accent);
}

.ruo-pdp-notice__label {
	margin: 0 0 0.6rem;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--ruo-t-eyebrow);
	font-weight: 500;
	letter-spacing: var(--ruo-t-eyebrow-tracking);
	text-transform: uppercase;
}

.ruo-pdp-notice__card p {
	margin: 0 0 0.75rem;
	font-size: var(--ruo-t-body);
	line-height: 1.65;
	color: var(--wp--preset--color--ink-70);
}

/* --- related products -------------------------------------------------- */
.single-product .related.products {
	clear: both;
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	padding-block: var(--wp--preset--spacing--70);
	padding-inline: var(--wp--custom--gutter);
	background: color-mix(in srgb, var(--wp--preset--color--ink) 3%, var(--wp--preset--color--surface));
}

.single-product .related.products > h2 {
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto clamp(1.75rem, 3.5vw, 2.75rem);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--ruo-t-h2);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.022em;
	color: color-mix(in srgb, var(--wp--preset--color--accent) 50%, #000);
}

.single-product .related.products ul.products {
	max-width: var(--wp--style--global--wide-size);
	/* !important is required: the shared products-grid rule sets
	   `margin: 0 !important`, so auto side margins are otherwise ignored and
	   the row spans the full band above 1440px. */
	margin-inline: auto !important;
}

@media (max-width: 56.25rem) {
	.ruo-pdp-coa__grid,
	.ruo-pdp-compound__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------------------------------------------------------------------
   Testing page / COA library (W-24 / WS-5)
   --------------------------------------------------------------------------- */

.ruo-coa-hero {
	box-sizing: border-box;
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	padding-block: var(--wp--preset--spacing--70);
	padding-inline: var(--wp--custom--gutter);
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--wp--preset--color--accent) 30%, var(--wp--preset--color--surface)) 0%,
		color-mix(in srgb, var(--wp--preset--color--accent) 12%, var(--wp--preset--color--surface)) 55%,
		var(--wp--preset--color--surface) 100%
	);
	text-align: center;
}

.ruo-coa-hero__inner {
	max-width: 46rem;
	margin-inline: auto;
}

.ruo-coa-hero__eyebrow,
.ruo-coa-section__eyebrow {
	margin: 0 0 0.875rem;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--ruo-t-eyebrow);
	font-weight: 500;
	letter-spacing: var(--ruo-t-eyebrow-tracking);
	text-transform: uppercase;
}

.ruo-coa-hero__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.25rem, 1.1rem + 3vw, 3.5rem);
	font-weight: 600;
	line-height: 1.06;
	letter-spacing: -0.024em;
	color: color-mix(in srgb, var(--wp--preset--color--accent) 50%, #000);
}

.ruo-coa-hero__lede {
	margin: 1rem auto 0;
	max-width: 34rem;
	font-size: var(--ruo-t-lede);
	line-height: 1.6;
	color: var(--wp--preset--color--ink-70);
}

.ruo-coa-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 2.875rem;
	margin-block-start: 1.75rem;
	padding: 0.625rem 1.5rem;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font-size: var(--ruo-t-body);
	font-weight: 500;
	text-decoration: none;
}

.ruo-coa-hero__cta:hover {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 88%, #000);
	color: var(--wp--preset--color--on-accent);
}

.ruo-coa-hero__cta:hover .ruo-close__arrow {
	transform: translateX(0.25rem);
}

.ruo-coa-section {
	box-sizing: border-box;
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	padding-block: var(--wp--preset--spacing--70);
	padding-inline: var(--wp--custom--gutter);
}

.ruo-coa-section--tint {
	background: color-mix(in srgb, var(--wp--preset--color--ink) 3%, var(--wp--preset--color--surface));
}

.ruo-coa-section__inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.ruo-coa-section__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--ruo-t-h2);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.022em;
	color: color-mix(in srgb, var(--wp--preset--color--accent) 50%, #000);
}

.ruo-coa-section__lede {
	max-width: 46rem;
	margin: 1rem 0 0;
	font-size: var(--ruo-t-lede);
	line-height: 1.6;
	color: var(--wp--preset--color--ink-70);
}

/* --- library ----------------------------------------------------------- */
.ruo-coa-library__tools {
	margin-block-end: 1.75rem;
}

.ruo-coa-library__filter {
	box-sizing: border-box;
	width: min(100%, 34rem);
	min-height: 2.875rem;
	padding: 0.625rem 1rem;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--surface);
	font-family: inherit;
	font-size: var(--ruo-t-body);
	color: var(--wp--preset--color--ink);
}

.ruo-coa-library__filter:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
}

.ruo-coa-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
	gap: 0.875rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Evidence idiom, deliberately unlike the shop card: mono-led, purity as the
   hero figure, hairline rows, no price and no add-to-cart. */
.ruo-coa-card {
	display: flex;
	flex-direction: column;
	padding: 1.25rem 1.375rem 1.125rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--surface);
}

.ruo-coa-card__lot {
	margin: 0;
	color: var(--wp--preset--color--ink-40);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
}

.ruo-coa-card__purity {
	margin: 0.35rem 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 2.125rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--accent);
}

.ruo-coa-card__name {
	margin: 0.6rem 0 0.875rem;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--ink);
}

.ruo-coa-card__rows {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
}

.ruo-coa-card__rows > div {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.5rem 0;
	border-block-start: 1px solid var(--wp--preset--color--rule-faint);
}

.ruo-coa-card__rows dt {
	color: var(--wp--preset--color--ink-55);
}

.ruo-coa-card__rows dd {
	margin: 0;
	color: var(--wp--preset--color--ink);
}

.ruo-coa-card__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-block-start: auto;
	padding-block-start: 1rem;
}

.ruo-coa-card__primary {
	color: var(--wp--preset--color--accent);
	font-size: var(--ruo-t-fine);
	font-weight: 600;
	text-decoration: none;
}

.ruo-coa-card__secondary {
	color: var(--wp--preset--color--ink-55);
	font-size: var(--ruo-t-fine);
	text-decoration: none;
}

.ruo-coa-card__primary:hover,
.ruo-coa-card__secondary:hover {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.ruo-coa-library__count {
	margin: 1.5rem 0 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--ruo-t-fine);
	color: var(--wp--preset--color--ink-40);
}

/* --- stats + columns + assays ------------------------------------------ */
.ruo-coa-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 0.75rem;
	margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0;
	padding: 0;
	list-style: none;
}

.ruo-coa-stats li {
	display: grid;
	gap: 0.3rem;
	padding: 1.125rem 1.25rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--surface);
	text-align: center;
}

.ruo-coa-stats__value {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.1;
	color: var(--wp--preset--color--accent);
}

.ruo-coa-stats__label {
	font-size: var(--ruo-t-fine);
	color: var(--wp--preset--color--ink-55);
}

.ruo-coa-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: clamp(1.25rem, 3vw, 2.5rem);
	margin-block-start: clamp(2rem, 4vw, 3rem);
}

.ruo-coa-column__step {
	margin: 0 0 0.6rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	color: var(--wp--preset--color--accent);
}

.ruo-coa-column h3 {
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 1rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.ruo-coa-column p {
	margin: 0;
	font-size: var(--ruo-t-body);
	line-height: 1.6;
	color: var(--wp--preset--color--ink-70);
}

.ruo-coa-assays {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: 0.875rem;
	margin: clamp(2rem, 4vw, 3rem) 0 0;
	padding: 0;
	list-style: none;
}

.ruo-coa-assays li {
	padding: 1.25rem 1.375rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--surface);
}

.ruo-coa-assays h3 {
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: var(--ruo-t-eyebrow-tracking);
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.ruo-coa-assays p {
	margin: 0;
	font-size: var(--ruo-t-body);
	line-height: 1.6;
	color: var(--wp--preset--color--ink-70);
}

/* --- buy column (W-24.1) ------------------------------------------------ */
.ruo-pdp-mobile-buy-context {
	display: none;
}

.ruo-pdp-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

.ruo-pdp-tags li {
	padding: 0.3rem 0.7rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink-55);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.625rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ruo-pdp-mass__label,
.ruo-pdp-secure__label {
	margin: 0 0 0.6rem;
	color: var(--wp--preset--color--ink-40);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--ruo-t-eyebrow);
	font-weight: 500;
	letter-spacing: var(--ruo-t-eyebrow-tracking);
	text-transform: uppercase;
}

.ruo-pdp-mass__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ruo-pdp-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.5rem 1.25rem;
	border: 1px solid var(--wp--preset--color--button-outline);
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font-size: var(--ruo-t-body);
	font-weight: 500;
	text-decoration: none;
}

button.ruo-pdp-chip {
	font-family: inherit;
	cursor: pointer;
}

.ruo-variation-panel[hidden] {
	display: none !important;
}

.ruo-pdp-chip:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.ruo-pdp-chip.is-current {
	border-color: var(--wp--preset--color--accent);
	border-width: 2px;
	color: var(--wp--preset--color--accent);
	font-weight: 600;
}

/* The currency line stays: ruo-core publishes it deliberately (explicit
   currency is a payment-clarity measure, not decoration), so it is quieted
   into a caption under the price rather than removed. It cannot share the
   price's line -- .summary is a flex column, so every child owns its row. */
.ruo-product-currency {
	margin: 0.25rem 0 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--ruo-t-fine);
	color: var(--wp--preset--color--ink-40);
	text-transform: uppercase;
}

.ruo-pdp-dispatch {
	margin: 0.75rem 0 0;
	font-size: var(--ruo-t-body);
	color: var(--wp--preset--color--ink-70);
}

.ruo-pdp-subscribe__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	width: 100%;
	min-height: 2.875rem;
	padding: 0.75rem 1.25rem;
	border: 1px solid var(--wp--preset--color--button-outline);
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	font-size: var(--ruo-t-body);
	font-weight: 500;
}

/* Inert on purpose: there is no subscriptions backend yet. */
.ruo-pdp-subscribe__btn[aria-disabled="true"] {
	opacity: 0.6;
	cursor: not-allowed;
}

.ruo-pdp-subscribe__note {
	margin: 0.45rem 0 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.625rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-40);
	text-align: center;
}


/* --- bundle presets (W-70) ------------------------------------------------
   Quantity brackets above the purchase row. Sized so the bottle count, not the
   bottle size, is what changes between cards — the label already states the
   number, and vials that shrank card to card read as four different products. */
.ruo-bundle {
	margin-block-start: 0.25rem;
}

.ruo-bundle__label {
	margin: 0 0 0.6rem;
	color: var(--wp--preset--color--ink-40);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--ruo-t-eyebrow);
	font-weight: 500;
	letter-spacing: var(--ruo-t-eyebrow-tracking);
	text-transform: uppercase;
}

.ruo-bundle__cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	/* Every row the same height as its tallest card, so the two-column phone
	   layout matches across rows as well as within one. */
	grid-auto-rows: 1fr;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The grid stretches the item; the button inside it was free to be shorter.
   A card without a savings line therefore ended one line early and sat
   visibly short of its neighbours. */
.ruo-bundle__cards li {
	display: flex;
}

/* A bracket the selected mass has no stock for is retired outright. Hiding
   beats disabling: a greyed-out "10+ bottles" still reads as an offer. */
.ruo-bundle__cards li[hidden] {
	display: none;
}

.ruo-bundle__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	/* Fill the stretched grid item rather than shrink-wrapping the text. */
	flex: 1;
	padding: 0.75rem 0.375rem 0.625rem;
	border: 1px solid var(--wp--preset--color--button-outline);
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	cursor: pointer;
	transition: border-color var(--wp--custom--motion--quick), box-shadow var(--wp--custom--motion--quick);
}

.ruo-bundle__card:hover {
	border-color: var(--wp--preset--color--accent);
}

/* The mass chips thicken their border to 2px when current. Four cards holding
   images cannot afford that: the extra pixel reflows every sibling in the row
   and the vials visibly jump. An inset ring paints the same weight without
   taking part in layout. */
.ruo-bundle__card.is-current {
	border-color: var(--wp--preset--color--accent);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent);
}

.ruo-bundle__card.is-current .ruo-bundle__name {
	color: var(--wp--preset--color--accent);
}

/* Both rows occupy the one cell and sit on its floor, so the rear row's lift
   is measured from the same baseline the front row stands on. */
.ruo-bundle__art {
	display: grid;
	grid-template-areas: "stack";
	align-items: end;
	justify-items: center;
	width: 100%;
	/* Taller than the tallest bottle by design: the spare band at the top is
	   headroom for the rear row to rise into. Sizing the bottles off the box
	   instead would have spent that band making the single-bottle card's vial
	   huge, and the four cards need to look like one set. */
	height: 6rem;
}

.ruo-bundle__row {
	--ruo-bundle-count: 1;
	/* Both rows are grid items, which honour z-index without being positioned.
	   They need it: the rear row's filter and transform make it a stacking
	   context, and a stacking context paints ABOVE a plain sibling whatever the
	   document order says — so the blurred row was rendering in FRONT of the
	   sharp one, which is exactly backwards. */
	z-index: 0;
	/* Overlap is a quarter rather than a third: these are photographed vials
	   with printed labels, and at a third the labels collide into texture.
	   Two ceilings then apply, whichever is tighter — the width n overlapping
	   bottles can have before the row outgrows the card, and the width the art
	   box's height allows at the vial's own proportions. The second usually
	   wins, which is what keeps the bottles one size across the four cards. */
	--ruo-bundle-overlap: 0.26;
	--ruo-bundle-bottle: min(
		calc(100% / (var(--ruo-bundle-count) * (1 - var(--ruo-bundle-overlap)) + var(--ruo-bundle-overlap))),
		calc(4.75rem * 62 / 130)
	);
	grid-area: stack;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
}

/* Raised, and pushed back into the page.

   Geometry alone could not separate the rows. The vials are dark, high-contrast
   and label-heavy, and two rows of printed labels at this size collide into
   texture however far the back one is lifted — fully clearing one label from
   the other needs a lift so large the rear row stops looking like it is
   standing behind anything. So the separation is the one a photograph would
   have given for free: throw the back row slightly out of focus and let the
   air lighten it. The labels stop competing because only one row is legible,
   which is also true of the real photograph this imitates.

   The bulk card is five behind five, standing squarely behind rather than in
   the gaps, so what clears the front row is a row of caps — which is what a
   second row of bottles on a bench actually looks like. */
.ruo-bundle__row--front {
	z-index: 1;
}

.ruo-bundle__row--rear {
	transform: translateY(-45%) scale(0.9);
	transform-origin: bottom center;
	/* At a smaller lift the only part of a rear bottle clearing the front row
	   was its cap — silver on an almost-white card, which read as a smudge
	   rather than a bottle. Rising far enough to show cap, shoulder and the top
	   of the label is what makes it count, and the brightness lift is gone:
	   against a near-white ground, lightening the far row just erased it. */
	opacity: 0.85;
	filter: blur(0.6px) saturate(0.75);
}

.ruo-bundle__bottle {
	flex: 0 0 auto;
	width: var(--ruo-bundle-bottle);
	/* The renders are square with ~29% transparent margin each side. Cropping
	   to the vial's own box is what stops a 25px bottle from being 10px of
	   glass in a field of nothing. */
	aspect-ratio: 62 / 130;
	height: auto;
	object-fit: cover;
	object-position: center;
}

.ruo-bundle__bottle--blank {
	border-radius: 2px;
	background: var(--wp--preset--color--border);
}

.ruo-bundle__bottle + .ruo-bundle__bottle {
	margin-inline-start: calc(var(--ruo-bundle-bottle) * -1 * var(--ruo-bundle-overlap));
}

.ruo-bundle__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 0.125rem;
	text-align: center;
}

.ruo-bundle__name {
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}

/* The saving is the one line on the card making a claim about money, so it
   carries the accent rather than sharing the total's grey. */
.ruo-bundle__save {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	white-space: nowrap;
}

.ruo-bundle__card:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Four across stops being readable once each card is narrower than its own
   label; two rows of two is the next honest step down. */
@media (max-width: 30rem) {
	.ruo-bundle__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.ruo-pdp-secure {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	padding-block-start: 0.5rem;
}

.ruo-pdp-secure__label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	color: var(--wp--preset--color--ink-55);
}

.ruo-pdp-secure__label svg {
	width: 1rem;
	height: 1rem;
	color: var(--wp--preset--color--accent);
}

.ruo-pdp-secure__marks {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ruo-pdp-secure__marks li {
	padding: 0.3rem 0.55rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--badge, 6px);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink-55);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.5625rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* COA card media: the same catalog shot the shop cards use, on the sunken
   ground so the certificate data still leads. */
.ruo-coa-card {
	padding-block-start: 0;
	overflow: hidden;
}

.ruo-coa-card__media {
	margin: 0 -1.375rem 1rem;
	background: color-mix(in srgb, var(--wp--preset--color--ink) 3%, var(--wp--preset--color--surface));
	border-block-end: 1px solid var(--wp--preset--color--rule-faint);
}

.ruo-coa-card__img {
	display: block;
	width: 62%;
	height: auto;
	margin: 0 auto;
	padding-block: 0.75rem;
}

/* W-62.1: the wide record was requested for phones only. Above that breakpoint
   flatten the shared wrappers and recover the exact pre-W-52 tall-card order
   without duplicating a value or serving viewport-conditional markup. */
@media (min-width: 40.001rem) {
	.ruo-coa-card__body,
	.ruo-coa-card__lotline {
		display: contents;
	}

	.ruo-coa-card__lot {
		order: 1;
		margin: 0;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}

	.ruo-coa-card__purity {
		order: 2;
	}

	.ruo-coa-card__name {
		order: 3;
	}

	.ruo-coa-card__verdict {
		order: 4;
	}

	.ruo-coa-card__tested {
		order: 5;
	}

	.ruo-coa-card__actions {
		order: 6;
	}

	.ruo-coa-card__purity strong {
		font: inherit;
		font-weight: inherit;
		color: inherit;
	}

	.ruo-coa-card__purity span,
	.ruo-coa-card__tick,
	.ruo-coa-card__tested-separator {
		display: none;
	}

	.ruo-coa-card__verdict,
	.ruo-coa-card__tested {
		display: flex;
		justify-content: space-between;
		gap: 0.75rem;
		margin: 0;
		padding: 0.5rem 0;
		border-radius: 0;
		border-block-start: 1px solid var(--wp--preset--color--rule-faint);
		background: transparent;
		font-family: var(--wp--preset--font-family--mono);
		font-size: 0.75rem;
		color: var(--wp--preset--color--ink);
	}

	.ruo-coa-card__field-label {
		color: var(--wp--preset--color--ink-55);
	}
}

/* --- Variable PDP purchase bar, phone (W-65) ------------------------------
   A variable product's selector stays in the page. Only the resolved
   add-to-cart block is fixed, so the attribute table can never become part of
   the viewport chrome. */
@media (max-width: 40rem) {
	.single-product .product-type-variable .woocommerce-variation-add-to-cart.variations_button {
		position: fixed;
		z-index: 20;
		inset-inline: 0;
		bottom: 0;
		grid-template-columns: minmax(0, 30fr) minmax(0, 70fr);
		column-gap: 0.75rem;
		row-gap: 0.5rem;
		margin: 0 !important;
		border-block-start: 1px solid var(--wp--preset--color--border);
		background: var(--wp--preset--color--surface);
		padding: 0.75rem var(--wp--custom--gutter) max(0.75rem, env(safe-area-inset-bottom));
	}
}

@media (max-width: 56.25rem) {
	/* The frame is content-sized here, so absolutely-positioned chips sat on
	   top of the vial. They flow beneath it instead. */
	/* One row, centred. The two chips total ~300px against a 292px frame, so
	   they wrapped onto two lines and took 65px of height directly under the
	   vial — the owner would rather spend that on the product. Trimmed just
	   enough to sit side by side; the tracking is what was costing the width,
	   not the words. */
	.ruo-pdp-frame-chips {
		position: static;
		flex-wrap: nowrap;
		justify-content: center;
		gap: 0.375rem;
		margin-block-start: 0.875rem;
	}

	.ruo-pdp-frame-chips li {
		padding: 0.3rem 0.55rem;
		font-size: 0.5625rem;
		letter-spacing: 0.06em;
	}

	.single-product div.product div.images {
		padding-block: clamp(1.5rem, 6vw, 2.5rem);
		overflow: visible;
	}

	/* The gallery wrapper is a stretched grid item, which was pulling the
	   image to the row's height and squashing a square shot to 104x168.
	   Centring it keeps the intrinsic ratio. */
	.single-product div.product div.images .woocommerce-product-gallery__wrapper {
		align-self: center;
		justify-self: center;
		width: 100%;
	}

	.woocommerce div.product div.images img {
		width: 62%;
		/* !important: something in the gallery's own styles pins a height here,
		   which crops the square shot to the frame's row instead of letting the
		   frame grow. */
		height: auto !important;
		max-height: none !important;
		align-self: center;
	}
}

/* Faint brand halo behind the product shot, so the vial sits in light rather
   than on a flat panel. Deliberately weak — it should register as atmosphere,
   not as a graphic. */
.single-product div.product div.images::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	width: min(78%, 30rem);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(
		circle,
		color-mix(in srgb, var(--wp--preset--color--accent) 22%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent) 46%,
		transparent 74%
	);
	filter: blur(34px);
	pointer-events: none;
	z-index: 0;
}

/* z-index only. Giving this `position: relative` made it the containing block
   for the frame's absolutely-positioned chips, which pulled them off the
   frame's corner and into the middle of the image. It is a grid item, so
   z-index applies without positioning it. */
.single-product div.product div.images .woocommerce-product-gallery__wrapper {
	z-index: 1;
}

/* Stacking only — the chips keep the absolute placement set earlier. */
.ruo-pdp-frame-chips {
	z-index: 2;
}

/* Kept for the single-column (mobile) case, where the sections really are
   siblings in flow rather than grid items. */
.single-product div.product {
	margin-block-end: var(--wp--preset--spacing--60);
}

/* "View All" beside the related-products heading. */
.ruo-pdp-related-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem 2rem;
	flex-wrap: wrap;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.ruo-pdp-related-all {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding-block-end: 0.3125rem;
	border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
	color: var(--wp--preset--color--accent);
	font-size: var(--ruo-t-body);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.ruo-pdp-related-all:hover {
	border-block-end-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.ruo-pdp-related-all .ruo-close__arrow {
	width: 1.1rem;
}

.single-product .related.products > h2 {
	margin: 0;
}

/* Product pages open on a breadcrumb, which needs far less air above it than a
   full-bleed band does. */
.single-product .wp-site-blocks > .ruo-main {
	padding-block-start: var(--wp--preset--spacing--40);
}

/* Four assay tiles per row at desktop, two at tablet. */
@media (min-width: 64rem) {
	.ruo-coa-assays {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* COA card: product first, certificate second. */
.ruo-coa-card__actions {
	gap: 0.5rem;
}

.ruo-coa-card__primary {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.5rem;
	padding: 0.5rem 1rem;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--small, 7px);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font-size: var(--ruo-t-fine);
	font-weight: 600;
}

.ruo-coa-card__primary:hover {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 88%, #000);
	color: var(--wp--preset--color--on-accent);
	text-decoration: none;
}

.ruo-coa-card__secondary {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.5rem;
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--wp--preset--color--button-outline);
	border-radius: var(--wp--custom--radius--small, 7px);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ruo-coa-card__secondary:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}


/* ---------------------------------------------------------------------------
   Contact page (W-28 / §5). Blue hero shared with the policy pages, then a
   wide two-column band: the form is the page's job, the aside deflects the
   questions the site already answers. The first pass sat in a 768px column
   because post-content renders at content-size — these bands widen themselves.
   --------------------------------------------------------------------------- */

.ruo-contact-band {
	box-sizing: border-box;
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	padding-inline: var(--wp--custom--gutter);
	padding-block: clamp(2.75rem, 5vw, 4rem) clamp(3.5rem, 7vw, 5.5rem);
}

.ruo-contact-band__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.55fr);
	gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.ruo-contact__h2 {
	margin: 0 0 1.1rem;
	font-size: var(--ruo-t-h3);
}

.ruo-contact__form {
	display: grid;
	gap: 1.1rem;
}

/* Wider column, so name/email and topic/order pair up and the form stops
   being a tall single stack. */
.ruo-contact__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.1rem;
}

.ruo-contact__field {
	display: grid;
	gap: 0.4rem;
	margin: 0;
}

.ruo-contact__field label {
	font-size: var(--ruo-t-fine);
	font-weight: 600;
}

.ruo-contact__field label span {
	font-weight: 400;
	color: color-mix(in srgb, currentColor 60%, transparent);
}

.ruo-contact__field input,
.ruo-contact__field select,
.ruo-contact__field textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--surface);
	font: inherit;
	font-size: var(--ruo-t-body);
	color: inherit;
}

.ruo-contact__field textarea {
	resize: vertical;
}

.ruo-contact__field :is(input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
}

/* Honeypot: out of view for people, still reachable by anything filling the
   DOM. display:none would let some bots skip it. */
.ruo-contact__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ruo-contact__fine {
	margin: 0;
	font-size: var(--ruo-t-fine);
	color: color-mix(in srgb, currentColor 65%, transparent);
}

.ruo-contact__actions {
	margin: 0.25rem 0 0;
}

.ruo-contact__submit {
	padding: 0.8rem 1.6rem;
	border: 0;
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font-family: inherit;
	font-size: var(--ruo-t-body);
	font-weight: 600;
	cursor: pointer;
}

.ruo-contact__submit:hover {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 88%, #000);
}

.ruo-contact__notice {
	margin: 0 0 1.25rem;
	padding: 0.85rem 1rem;
	border: 1px solid;
	border-radius: var(--wp--custom--radius--control);
	font-size: var(--ruo-t-body);
}

.ruo-contact__notice--ok {
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 40%, transparent);
	background: color-mix(in srgb, var(--wp--preset--color--accent) 8%, transparent);
}

.ruo-contact__notice--err {
	border-color: #d1495b;
	background: color-mix(in srgb, #d1495b 8%, transparent);
}

.ruo-contact__aside {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	background: color-mix(in srgb, var(--wp--preset--color--accent) 5%, var(--wp--preset--color--surface));
}

.ruo-contact__aside-text {
	margin: 0 0 0.75rem;
	font-size: var(--ruo-t-body);
}

.ruo-contact__aside-text:last-child {
	margin-bottom: 0;
}

.ruo-contact__policies {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.5rem;
	font-size: var(--ruo-t-body);
}

.ruo-contact__policies a {
	color: var(--wp--preset--color--accent);
}

@media (max-width: 900px) {
	.ruo-contact-band__inner {
		grid-template-columns: minmax(0, 1fr);
	}
}

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

/* ---------------------------------------------------------------------------
   Product page: quantity stepper, cart state, tighter column (W-27 / §1).
   --------------------------------------------------------------------------- */

/* The stepper is one control: a bordered track holding minus, the native
   number input, and plus. The input keeps its own box but loses its chrome so
   the three read as a single unit.

   Led with `body` deliberately. WooCommerce ships
   `.woocommerce div.product form.cart .quantity { float: left }` at 0-4-2, and
   a theme selector that merely ties on specificity loses to it on load order,
   which left the three parts stacked in a 54px column. */
body.single-product div.product form.cart .quantity {
	display: inline-flex;
	align-items: center;
	/* Air to the left of minus and the right of plus. They ran flush to the
	   border and looked cropped by it — but the control keeps its original
	   width against the button beside it, which was already right. */
	padding-inline: 0.5rem;
	position: relative;
	border: 1px solid var(--wp--preset--color--border-strong, var(--wp--preset--color--border));
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--surface);
	overflow: hidden;
}

/* WooCommerce puts a visually-hidden <label> inside the control, between the
   minus button and the field. Hidden or not it is still a flex item, and it was
   taking a pixel of the line on the LEFT only — which is the whole reason the
   number never sat on the control's midline. Out of flow, and the two buttons
   are finally symmetric. */
body.single-product div.product form.cart .quantity > label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

body.single-product div.product form.cart .quantity .qty {
	/* Fixed width again. Flexing it made the control grow to fill the row and
	   swallow the Add to cart button's share, which was never the problem —
	   the offset was the input's own margin, dealt with below. */
	flex: 0 0 auto;
	width: 2.75rem;
	min-height: 3.25rem;
	padding-inline: 0;
	/* WooCommerce's own sheet puts margin-right: 7.5px on this input. Inside a
	   flex row that is 7.5px of space on ONE side of the number and nowhere
	   else — the whole reason it never sat on the control's midline. Chasing it
	   with padding or text-align could never have worked; the box itself was
	   off-centre, not the text inside it. */
	margin: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	text-align: center;
	font-size: var(--ruo-t-body);
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
	appearance: textfield;
}

/* The spinners would sit beside our own buttons and do the same job twice. */
body.single-product div.product form.cart .quantity .qty::-webkit-outer-spin-button,
body.single-product div.product form.cart .quantity .qty::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
}

body.single-product div.product form.cart .quantity .qty:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: -2px;
}

body.single-product .ruo-qty__step {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	min-height: 3.25rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	font-size: 1.0625rem;
	line-height: 1;
	cursor: pointer;
	user-select: none;
}

body.single-product .ruo-qty__step:hover {
	background: color-mix(in srgb, var(--wp--preset--color--ink) 6%, transparent);
}

body.single-product .ruo-qty__step:active {
	background: color-mix(in srgb, var(--wp--preset--color--ink) 11%, transparent);
}

/* §1.1 — tighter vertical rhythm down the buy column. The owner released the
   requirement that it match the image frame exactly, so the column is set by
   its own content: one small base gap, with deliberate extra air only where a
   section genuinely changes subject (into the price, and into the lot panel). */
.single-product div.product .summary {
	gap: 0.875rem;
}

.single-product div.product .summary > .price {
	margin-block-start: 0.375rem !important;
}

.single-product div.product .summary > .ruo-pdp-lot {
	margin-block-start: 0.625rem !important;
}

/* ---------------------------------------------------------------------------
   About page (W-28 / §6). Built in bands rather than one column on white:
   the owner asked for far more brand blue, so the hero and the thesis are
   full-bleed accent and the argument sits on paper between them.
   --------------------------------------------------------------------------- */

/* Raw-HTML sections inside a constrained group have to claim full width
   themselves; the align class alone does not reach them. The paper band takes
   the same treatment even though it carries no background — otherwise its
   inner centres inside the constrained column while the blue bands centre on
   the viewport, and the text steps inward at every colour change. */
.ruo-about-hero,
.ruo-about-close,
.ruo-about-body {
	box-sizing: border-box;
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	padding-inline: var(--wp--custom--gutter);
}

.ruo-about-hero,
.ruo-about-close {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
}

.ruo-about-hero {
	padding-block: clamp(4rem, 9vw, 7.5rem);
}

.ruo-about-hero__inner,
.ruo-about-close__inner,
.ruo-about-body__inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.ruo-about-hero__pill {
	display: inline-block;
	margin: 0 0 1.5rem;
	padding: 0.4rem 0.9rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--on-accent) 45%, transparent);
	border-radius: 999px;
	color: var(--wp--preset--color--on-accent);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--ruo-t-eyebrow);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ruo-about-hero__title {
	max-width: 20ch;
	margin: 0 0 1.25rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.75rem, 1.5rem + 3.4vw, 4.75rem);
	font-weight: 400;
	letter-spacing: -0.025em;
	line-height: 1.02;
}

.ruo-about-hero__lede {
	max-width: 58ch;
	margin: 0;
	font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem);
	line-height: 1.5;
	color: color-mix(in srgb, var(--wp--preset--color--on-accent) 88%, transparent);
}

.ruo-about-body {
	padding-block: clamp(3rem, 6vw, 5rem);
}

.ruo-about-body--tail {
	padding-block: clamp(3rem, 6vw, 5rem) clamp(3.5rem, 7vw, 6rem);
}

.ruo-about-body__inner > p {
	max-width: 66ch;
	margin: 0 0 1.35rem;
	font-size: var(--ruo-t-lede);
	line-height: 1.7;
}

.ruo-about-body__inner > p:last-child {
	margin-bottom: 0;
}

/* One size throughout. Stepping the opening paragraph up made the body read as
   three different treatments in four paragraphs. */

.ruo-about-body__link {
	font-weight: 700;
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.ruo-about-body__signoff {
	margin-top: 2.25rem !important;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--ruo-t-body) !important;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--ink-55, inherit);
}


.ruo-doc-hero,
.ruo-doc-body {
	box-sizing: border-box;
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	padding-inline: var(--wp--custom--gutter);
}

.ruo-doc-hero {
	padding-block: clamp(3.25rem, 7vw, 5.5rem);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
}

.ruo-doc-hero__inner,
.ruo-doc-body__inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.ruo-doc-hero__pill {
	display: inline-block;
	margin: 0 0 1.25rem;
	padding: 0.4rem 0.9rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--on-accent) 45%, transparent);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--ruo-t-eyebrow);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ruo-doc-hero__title {
	max-width: 20ch;
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.75rem);
	font-weight: 400;
	letter-spacing: -0.025em;
	line-height: 1.05;
}

.ruo-doc-hero__lede {
	max-width: 58ch;
	margin: 0;
	font-size: var(--ruo-t-lede);
	line-height: 1.55;
	color: color-mix(in srgb, var(--wp--preset--color--on-accent) 88%, transparent);
}

.ruo-doc-body {
	padding-block: clamp(3rem, 6vw, 4.5rem) clamp(3.5rem, 7vw, 5.5rem);
}

.ruo-doc-body__inner h2 {
	max-width: 40ch;
	margin: 2.5rem 0 0.85rem;
	font-size: var(--ruo-t-h3);
	line-height: 1.2;
}

.ruo-doc-body__inner h2:first-child {
	margin-top: 0;
}

.ruo-doc-body__inner p {
	max-width: 68ch;
	margin: 0 0 1.1rem;
	font-size: var(--ruo-t-body);
	line-height: 1.7;
}

.ruo-doc-body__inner a {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.ruo-doc-body__updated {
	margin-top: 2.75rem !important;
	padding-top: 1.25rem;
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: var(--ruo-t-fine) !important;
	color: var(--wp--preset--color--ink-55, inherit);
}

/* ---------------------------------------------------------------------------
   Catalog / COA toolbar (W-28 / §2, §3). One shared control width so the two
   search surfaces read as the same component on both pages.
   --------------------------------------------------------------------------- */

:root {
	--ruo-search-width: 34rem;
}

.ruo-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem 1.5rem;
}

.ruo-toolbar__search {
	flex: 0 1 var(--ruo-search-width);
	min-width: 0;
}

.ruo-toolbar__label,
.ruo-coa-library__label {
	display: block;
	margin-bottom: 0.5rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--ruo-t-eyebrow);
	font-weight: 500;
	letter-spacing: var(--ruo-t-eyebrow-tracking, 0.14em);
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-55, inherit);
}

.ruo-toolbar__control,
.ruo-coa-library__control {
	display: flex;
	width: 100%;
	max-width: var(--ruo-search-width);
}

.ruo-toolbar__input,
.ruo-coa-library__filter {
	flex: 1 1 auto;
	min-width: 0;
	box-sizing: border-box;
	padding: 0.625rem 1rem;
	border: 1px solid var(--wp--preset--color--border-strong, var(--wp--preset--color--border));
	border-right: 0;
	border-radius: var(--wp--custom--radius--control) 0 0 var(--wp--custom--radius--control);
	background: var(--wp--preset--color--surface);
	font: inherit;
	font-size: var(--ruo-t-body);
	color: inherit;
}

.ruo-toolbar__submit,
.ruo-coa-library__submit {
	flex: 0 0 auto;
	padding: 0.625rem 1.35rem;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 0 var(--wp--custom--radius--control) var(--wp--custom--radius--control) 0;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font-family: inherit;
	font-size: var(--ruo-t-body);
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
}

.ruo-toolbar__submit:hover,
.ruo-coa-library__submit:hover {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 88%, #000);
}

.ruo-toolbar__sort {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.ruo-toolbar__sort .ruo-toolbar__label {
	margin-bottom: 0;
}

/* Woo's ordering form carries its own float and margins. */
.ruo-toolbar__sort form.woocommerce-ordering {
	float: none !important;
	margin: 0 !important;
}

.ruo-toolbar__sort select {
	padding: 0.5rem 2rem 0.5rem 0.75rem;
	border: 1px solid var(--wp--preset--color--border-strong, var(--wp--preset--color--border));
	border-radius: var(--wp--custom--radius--control);
	background-color: var(--wp--preset--color--surface);
	font: inherit;
	font-size: var(--ruo-t-body);
}

.ruo-toolbar__count {
	margin: 1rem 0 0;
	font-size: var(--ruo-t-fine);
	color: var(--wp--preset--color--ink-55, inherit);
}

/* The COA filter gets the same label + field + button shape. */
.ruo-coa-library__tools {
	max-width: var(--ruo-search-width);
}

/* ---------------------------------------------------------------------------
   In-cart state and the add-to-cart confirmation (W-28 / §4).
   --------------------------------------------------------------------------- */

/* The primary button becomes the confirmation, per the owner's reference: once
   the product is in the cart the button goes dark and reads "In cart". It is
   still the form's submit, so changing the quantity and pressing it again adds
   more — the state is a label, not a dead end. */
body.ruo-has-in-cart.single-product form.cart .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper, #fff);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 0.9375rem;
	font-weight: 600;
}

body.ruo-has-in-cart.single-product form.cart .single_add_to_cart_button:hover {
	background: color-mix(in srgb, var(--wp--preset--color--ink) 88%, #fff);
}

body.ruo-has-in-cart.single-product form.cart .single_add_to_cart_button::before {
	content: "";
	display: inline-block;
	/* Flex gap does not reliably space a pseudo-element from the adjacent
	   anonymous text box, so the tick carries its own margin. */
	margin-right: 0.5rem;
	width: 0.95em;
	height: 0.95em;
	background: currentColor;
	/* A mask keeps the tick the same colour as the label without shipping an
	   icon font or an inline SVG through a translation filter. */
	-webkit-mask: no-repeat center / contain
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5l5.5 5.5L20 6.5'/%3E%3C/svg%3E");
	mask: no-repeat center / contain
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5l5.5 5.5L20 6.5'/%3E%3C/svg%3E");
}

/* The confirmation sits under the buy row rather than at the top of the
   document, where it appeared off screen. */
.ruo-pdp-notice {
	grid-column: 1 / -1;
	margin-top: 0.25rem;
	transition: opacity 400ms ease-out, transform 400ms ease-out;
}

.ruo-pdp-notice[hidden] {
	display: none !important;
}

.ruo-pdp-notice.is-going {
	opacity: 0;
	transform: translateY(-0.25rem);
}

.ruo-pdp-notice .woocommerce-message,
.ruo-pdp-notice .woocommerce-info,
.ruo-pdp-notice .woocommerce-error {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	padding: 0.8rem 1rem;
	border: 1px solid color-mix(in srgb, #1f9d55 45%, transparent);
	border-radius: var(--wp--custom--radius--control);
	background: color-mix(in srgb, #1f9d55 8%, var(--wp--preset--color--surface));
	color: var(--wp--preset--color--ink);
	font-size: var(--ruo-t-body);
	list-style: none;
}

.ruo-pdp-notice .woocommerce-error {
	border-color: color-mix(in srgb, #d1495b 45%, transparent);
	background: color-mix(in srgb, #d1495b 8%, var(--wp--preset--color--surface));
}

/* Woo emits the "View cart" link BEFORE the message text inside the same
   element, so it needs reordering as well as pushing to the far end. */
.ruo-pdp-notice .woocommerce-message .button,
.ruo-pdp-notice .woocommerce-message a.wc-forward {
	order: 2;
	margin-left: auto;
	padding: 0;
	background: none;
	color: var(--wp--preset--color--accent);
	font-size: var(--ruo-t-fine);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}


/* Reflections by depth (W-31.1).

   Two problems, one visible symptom. Each reflection carries its own
   opacity, so where two overlap the far one shows THROUGH the near one —
   a real reflection is an image on the surface and occludes what is behind
   it rather than blending with it. And every reflection was the same length
   regardless of how far back its vial stands, so the rear pair reached as
   far down the table as the front pair and read as equidistant.

   Proper occlusion would mean lifting all four reflections into one faded
   group, which breaks the per-vial hover physics. Grading them by depth
   fixes the perception at its source instead: the rear pair sit shorter and
   fainter, as distance and foreshortening actually do, so the overlap stops
   competing for the same plane. Slot order back-to-front is 2, 4, 1, 3. */
.ruo-hero-vial--2 .ruo-hero-vial__refl {
	scale: 1 0.58;
	opacity: 0.2;
	filter: blur(3px);
}

.ruo-hero-vial--4 .ruo-hero-vial__refl {
	scale: 1 0.68;
	opacity: 0.26;
	filter: blur(2.6px);
}

.ruo-hero-vial--1 .ruo-hero-vial__refl {
	scale: 1 0.82;
	opacity: 0.38;
}

/* Full-bleed bands sit flush under the header; .ruo-main's own top padding
   would otherwise show as a white strip above them. */
.ruo-about-page,
.ruo-doc-page,
.ruo-contact-page {
	padding-block-start: 0;
}

/* Closing band. The device the thesis section used, moved to where it earns
   its keep — the last line is the one worth landing on, and the page closes on
   the colour it opened with. */
.ruo-about-close {
	padding-block: clamp(3.5rem, 7vw, 6rem);
}

.ruo-about-close__line {
	max-width: 30ch;
	margin: 0 0 1.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.625rem, 1rem + 2vw, 2.75rem);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.ruo-about-close__sign {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--ruo-t-body);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--on-accent) 72%, transparent);
}



/* Mounted-print treatment for free-floating photography (W-33 / §3).

   The ring's job is separation, and what it must separate from differs by
   surface — so the colour does too rather than being white everywhere. On the
   QA card the inset sits on another photograph, where paper-white is the only
   thing that reads. In the guarantee panel the image sits on the accent tint,
   so a pure white ring would half-vanish into it; there the ring takes the
   page's own paper and leans on the shadow for lift.

   Product imagery is deliberately excluded: those are cutouts on transparency
   and a ring around them would frame empty space, not a photograph. */
.ruo-standard__figure {
	box-shadow: 0 0 0 7px var(--wp--preset--color--paper, #fff),
		0 20px 44px -22px rgb(0 0 0 / 0.4);
}

/* The ring is drawn outside the figure's box, so the figure is inset by the
   ring's width — that puts the ring's outer edge on the same line as the
   guarantee cards below, rather than 7px proud of them. */
.ruo-standard__figure {
	margin-inline: 7px;
}

.ruo-qa__card--photo {
	box-shadow: 0 0 0 7px var(--wp--preset--color--paper, #fff),
		0 22px 48px -24px rgb(0 0 0 / 0.45);
}

/* TEMPORARY (W-34): QA collage arrangements. Remove with assets/js/collage.js
   once one is chosen.

   The third image is hidden unless the three-photo arrangement is active, so
   the two-photo options are unaffected by its presence in the markup. */
.ruo-qa__chain {
	position: absolute;
	margin: 0;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--card);
	box-shadow: 0 0 0 6px var(--wp--preset--color--paper, #fff),
		0 18px 38px -18px rgb(0 0 0 / 0.45);
	display: none;
}

.ruo-qa__chain img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Anchored to the card's lower-left corner rather than parked mid-edge, so the
   overlap reads as deliberate stacking. */
[data-collage="two-corner"] .ruo-qa__inset {
	top: auto;
	bottom: -1.25rem;
	left: -1.5rem;
	translate: none;
	width: min(58%, 15rem);
}

/* Three: the tall card anchors, a wide band sits high-left and the square-ish
   rack low-left, so the trio forms a stagger rather than a stack. Sizes stay
   distinct — three similar shapes read as a grid, not a collage. */
[data-collage="three"] .ruo-qa__chain {
	display: block;
	top: 4%;
	left: -2rem;
	width: min(54%, 14rem);
	aspect-ratio: 4 / 3;
}

[data-collage="three"] .ruo-qa__inset {
	top: auto;
	bottom: -1rem;
	left: 1rem;
	translate: none;
	width: min(46%, 12rem);
}

[data-collage="three"] .ruo-qa__card--photo {
	width: min(100%, 21rem);
}

/* TEMPORARY: comparison controls (W-34 collage, W-44 catalog layout).

   Deliberately red and deliberately ugly. These are scaffolding shown to
   reviewers who are being told "use the red button to cycle" — they have to be
   impossible to mistake for part of the design, and impossible to miss on a
   page that is otherwise blue and paper. Every one of them, and the CSS below,
   comes out once the choices are made. */
.ruo-collage-switch,
.ruo-ab-switch {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	margin: 1.25rem 0 0;
}

.ruo-collage-switch__btn,
.ruo-ab-switch__btn {
	padding: 0.6rem 1.15rem;
	border: 2px solid #b3261e;
	border-radius: 999px;
	background: #d93025;
	color: #fff;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--ruo-t-fine);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: 0 2px 10px -2px rgb(217 48 37 / 0.55);
}

.ruo-collage-switch__btn:hover,
.ruo-ab-switch__btn:hover {
	background: #b3261e;
}

.ruo-collage-switch__btn:focus-visible,
.ruo-ab-switch__btn:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

.ruo-collage-switch__label,
.ruo-ab-switch__hint {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--ruo-t-fine);
	color: var(--wp--preset--color--ink-55, inherit);
}

/* The catalog switch sits on the accent band, where the muted ink token is
   nearly invisible. */
.ruo-shop-band .ruo-ab-switch__hint {
	color: color-mix(in srgb, var(--wp--preset--color--on-accent) 78%, transparent);
}

/* TEMPORARY (W-44): the wrapper must not inherit the content-width cap.

   `.ruo-home-section` is a WordPress constrained layout, so it caps every
   direct child at contentSize — 768px inside a 1418px section. The products
   list used to be that direct child and carried its own full-width rules;
   introducing this wrapper moved the cap onto it instead, and the catalog
   silently shrank to half the band on desktop. The wrapper is a grouping
   element, not a measure of text, so it takes the width its parent offers. */
.ruo-shop-layout {
	max-width: none;
	width: 100%;
}

/* TEMPORARY (W-44): the three catalog layouts — MOBILE ONLY.

   Desktop's four-across is settled and must not move, so every rule here is
   inside the phone breakpoint and the control itself is hidden above it. A
   reviewer on a laptop should not be offered a button that changes nothing.

   Below 40rem the catalog is a single stacked column, so "row" is that — the
   control's first state is genuinely the status quo rather than a
   reconstruction of it. The other two are what the owner asked to compare it
   against. */
@media (max-width: 40rem) {
	.ruo-shop-layout[data-shop-layout="grid"] ul.products,
	.ruo-shop-layout[data-shop-layout="grid"] .wc-block-grid__products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.75rem;
	}

	/* Two to a row halves each card, and the card's furniture was sized for a
	   full-width one: at 173px the lot line broke across three rows and the
	   add-to-cart label stacked a word per line. The footer stops being a row
	   and the type steps down, so the vial keeps the space instead of the
	   chrome around it. */
	.ruo-shop-layout[data-shop-layout="grid"] li.product {
		min-width: 0;
	}

	.ruo-shop-layout[data-shop-layout="grid"] .ruo-product-card__lot-label,
	.ruo-shop-layout[data-shop-layout="grid"] .ruo-product-card__purity {
		font-size: 0.68rem;
		letter-spacing: 0.02em;
	}

	/* "Current lot C269130" broke over three lines on a 173px card and was the
	   single largest waste of height there — more than the title and the button
	   together. The lot code is the identifier that matters; the words in front
	   of it are a label the COA link already implies, so they go and the code
	   stays on one line. */
	.ruo-shop-layout[data-shop-layout="grid"] .ruo-product-card__lot > p {
		display: flex;
		flex-direction: column;
		gap: 0.1rem;
		min-width: 0;
	}

	.ruo-shop-layout[data-shop-layout="grid"] .ruo-product-card__lot-label {
		font-size: 0;
		white-space: nowrap;
	}

	.ruo-shop-layout[data-shop-layout="grid"] .ruo-product-card__lot-label::after {
		content: attr(data-lot);
		font-size: 0.6875rem;
	}

	.ruo-shop-layout[data-shop-layout="grid"] .woocommerce-loop-product__title {
		font-size: 0.95rem;
		line-height: 1.25;
	}

	.ruo-shop-layout[data-shop-layout="grid"] .ruo-product-card__meta {
		font-size: 0.78rem;
	}

	/* "Research peptide" is on every card, so on a half-width card it spends a
	   row telling the reader nothing that distinguishes one from another. */
	.ruo-shop-layout[data-shop-layout="grid"] .ruo-product-card__meta {
		display: none;
	}

	/* column-reverse rather than reordered markup: the action follows the price
	   in the DOM, which is the right reading order for a screen reader and the
	   right tab order, and neither should change to move a button up. */
	.ruo-shop-layout[data-shop-layout="grid"] .ruo-product-card__footer {
		display: flex;
		flex-direction: column-reverse;
		align-items: center;
		gap: 0.5rem;
	}

	/* The card pushes its action right with margin-inline-start:auto so the
	   price and button sit at opposite ends of a row. Stacked and centred,
	   that auto has to work on both sides. */
	.ruo-shop-layout[data-shop-layout="grid"] .ruo-product-card__action {
		width: 100%;
		margin-inline: auto;
		display: flex;
		justify-content: center;
	}

	.ruo-shop-layout[data-shop-layout="grid"] .ruo-product-card__action .button {
		width: 100%;
	}

	.ruo-shop-layout[data-shop-layout="grid"] .ruo-product-card__action .button {
		padding-inline: 0.5rem;
		font-size: 0.82rem;
		white-space: nowrap;
		text-align: center;
	}

	/* Two lines reserved, one type size. Auto-shrinking the name to force it
	   onto one line breaks the type scale, gives every card a slightly
	   different size, and puts the smallest text on the longest names — which
	   are the ones that most need reading. Reserving the second line keeps the
	   cards aligned whether the name wraps or not. */
	/* "Current lot C269130" broke over three lines on a 173px card and was the
	   single largest waste of height there — more than the title and the button
	   together. The lot code is the identifier that matters; the words in front
	   of it are a label the COA link already implies, so they go and the code
	   stays on one line. */
	.ruo-shop-layout[data-shop-layout="grid"] .ruo-product-card__lot > p {
		display: flex;
		flex-direction: column;
		gap: 0.1rem;
		min-width: 0;
	}

	.ruo-shop-layout[data-shop-layout="grid"] .ruo-product-card__lot-label {
		font-size: 0;
		white-space: nowrap;
	}

	.ruo-shop-layout[data-shop-layout="grid"] .ruo-product-card__lot-label::after {
		content: attr(data-lot);
		font-size: 0.6875rem;
	}

	.ruo-shop-layout[data-shop-layout="grid"] .woocommerce-loop-product__title {
		/* Two lines of room, and a one-line name sits in the middle of it
		   rather than on the first line with a hole beneath. The reserved
		   height is what keeps the cards aligned; centring is what stops the
		   short names looking like they are missing something. */
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		min-height: calc(2 * 1.3em);
		overflow: hidden;
	}

	/* The in-cart stepper was sized for a full-width card's right-hand end. At
	   half width it read as a stray control rather than this card's own, so it
	   takes the whole row the button would have had: minus, count, plus. */
	/* Scoped to the in-cart state. A bare `display: flex` here outranked the
	   `[data-qty="0"] … { display: none }` rule that hides the stepper before
	   anything is added, and put a "0" stepper above every Add to cart. */
	.ruo-shop-layout[data-shop-layout="grid"] .ruo-loop-cart:not([data-qty="0"]) .ruo-loop-cart__stepper {
		display: flex;
		width: 100%;
		justify-content: space-between;
	}

	.ruo-shop-layout[data-shop-layout="grid"] .ruo-loop-cart__step {
		flex: 0 0 auto;
		width: 2.5rem;
	}

	.ruo-shop-layout[data-shop-layout="grid"] .ruo-loop-cart__count {
		flex: 1 1 auto;
		text-align: center;
	}

	.ruo-shop-layout[data-shop-layout="grid"] .ruo-loop-cart {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.4rem;
		width: 100%;
	}

	/* The "In cart" link under the stepper goes. The card already carries the
	   flag in its top corner, so the link was saying the same thing a second
	   time and costing a whole row on a card that is half as wide as it was
	   designed for — the height was the complaint, and this is the row that
	   was not earning it. */
	.ruo-shop-layout[data-shop-layout="grid"] .ruo-loop-cart__incart {
		display: none;
	}

	/* "Starting at" is added in CSS rather than by filtering the price, so the
	   qualifier lives with the layout that asked for it and vanishes with it.
	   Nothing here changes what is charged. */
	/* Carries `ul.products li.product` purely for specificity: the card's own
	   price rule at style.css:1628 is written that way and outranks a plainer
	   selector, which left "Starting at" at display size while the amount beside
	   it shrank. The amount is listed separately because it carries its own
	   size too. */
	.ruo-shop-layout[data-shop-layout="grid"] ul.products li.product .ruo-product-card__footer .price,
	.ruo-shop-layout[data-shop-layout="grid"] ul.products li.product .ruo-product-card__footer .woocommerce-Price-amount {
		display: block;
		width: 100%;
		text-align: center;
		/* !important only because the card's own price rule at style.css:1631
		   is itself !important; without matching it the qualifier renders at
		   display size beside a small figure. Both are set here so the two
		   halves of "Starting at $60.00" are one size. */
		font-size: 0.85rem !important;
		font-weight: 400;
		white-space: nowrap;
	}

	.ruo-shop-layout[data-shop-layout="grid"] ul.products li.product .ruo-product-card__footer .woocommerce-Price-amount {
		display: inline;
		width: auto;
	}

	.ruo-shop-layout[data-shop-layout="grid"] ul.products li.product .ruo-product-card__footer .price::before {
		content: "Starting at ";
	}

	.ruo-shop-layout[data-shop-layout="carousel"] ul.products,
	.ruo-shop-layout[data-shop-layout="carousel"] .wc-block-grid__products {
		display: flex !important;
		grid-template-columns: none;
		gap: 0.875rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		/* Room for the cards' own shadow, which a plain overflow container
		   would otherwise clip along the bottom edge. */
		padding-block-end: 0.75rem !important;
		scrollbar-width: thin;
		overscroll-behavior-x: contain;
		/* Let the row run to the screen edges so the next card peeks in and
		   advertises that there is more to scroll to. */
		margin-inline: calc(-1 * var(--wp--custom--gutter));
		padding-inline: var(--wp--custom--gutter) !important;
	}

	.ruo-shop-layout[data-shop-layout="carousel"] ul.products li.product,
	.ruo-shop-layout[data-shop-layout="carousel"] .wc-block-grid__product {
		flex: 0 0 min(72vw, 17rem);
		scroll-snap-align: start;
	}
}

/* The catalog switch sits ABOVE the products, so a reviewer meets the control
   before the thing it changes rather than scrolling past four cards to find
   it. Matched on the band rather than on sibling order, which that move would
   otherwise have quietly broken. */
.ruo-shop-band .ruo-ab-switch {
	margin: 0 0 1rem;
}

/* Phone-only control; desktop is settled. Matched on the switch itself rather
   than on the shop band — the catalogue's toolbar is not inside that band, so
   the banded selector left a live button on the desktop archive. */
@media (min-width: 40.0625rem) {
	.ruo-ab-switch {
		display: none;
	}
}


/* TEMPORARY (W-34): two more collage arrangements.

   Both put all three photos in contact with each other rather than parking two
   satellites beside a card, which is what the first three did. Stacking order
   is explicit — in an overlapping cluster the reading order IS the z-order, and
   leaving it to document order is what makes these look accidental. */
.ruo-qa__media[data-collage="cascade"],
.ruo-qa__media[data-collage="cluster"] {
	position: relative;
}

/* Cascade: a diagonal running top-left to bottom-right, each photo overlapping
   the next, the card largest and frontmost so the right side stays dominant. */
[data-collage="cascade"] .ruo-qa__card--photo {
	position: relative;
	z-index: 3;
	width: min(100%, 20rem);
	margin-inline-start: auto;
}

[data-collage="cascade"] .ruo-qa__inset {
	display: block;
	z-index: 2;
	top: auto;
	bottom: 8%;
	left: -1rem;
	translate: none;
	width: min(52%, 13.5rem);
}

[data-collage="cascade"] .ruo-qa__chain {
	display: block;
	z-index: 1;
	top: -1.5rem;
	left: 12%;
	width: min(46%, 12rem);
	aspect-ratio: 4 / 3;
}

/* Cluster: the three gathered around one centre, each overlapping its
   neighbours, so the group reads as a single object rather than a row. */
[data-collage="cluster"] .ruo-qa__card--photo {
	position: relative;
	z-index: 3;
	width: min(100%, 18rem);
	margin-inline: auto;
}

[data-collage="cluster"] .ruo-qa__chain {
	display: block;
	z-index: 2;
	top: 6%;
	left: -1rem;
	width: min(48%, 12.5rem);
	aspect-ratio: 4 / 3;
}

[data-collage="cluster"] .ruo-qa__inset {
	display: block;
	z-index: 4;
	top: auto;
	bottom: 4%;
	left: auto;
	right: -1.5rem;
	translate: none;
	width: min(48%, 12.5rem);
}

/* Triad — the owner's reference. Two above, one below centre, each tilted a
   few degrees and only just touching, so the group reads as prints dropped on
   a surface rather than a composed layout. The rotations alternate: matching
   tilts look like a mistake, opposing ones look deliberate.

   Note this arrangement needs its own vertical room, since the trio is taller
   than the card alone. */
.ruo-qa__media[data-collage="triad"] {
	position: relative;
	/* Tall enough for the card at the top plus the third print hanging below
	   it; the panel centres its columns, so anything short of this pushes the
	   trio past the panel's own bottom edge. */
	min-height: 30rem;
}

[data-collage="triad"] .ruo-qa__card--photo,
[data-collage="triad"] .ruo-qa__chain,
[data-collage="triad"] .ruo-qa__inset {
	box-shadow: 0 0 0 6px var(--wp--preset--color--paper, #fff),
		0 16px 34px -16px rgb(0 0 0 / 0.4);
}

[data-collage="triad"] .ruo-qa__card--photo {
	position: absolute;
	z-index: 3;
	top: 0;
	right: 0;
	width: min(46%, 12rem);
	rotate: 3deg;
}

[data-collage="triad"] .ruo-qa__chain {
	display: block;
	z-index: 2;
	top: 4%;
	left: 0;
	width: min(44%, 11.5rem);
	aspect-ratio: 4 / 3;
	rotate: -4deg;
}

[data-collage="triad"] .ruo-qa__inset {
	display: block;
	z-index: 4;
	top: auto;
	bottom: 6%;
	left: 24%;
	right: auto;
	translate: none;
	width: min(42%, 11rem);
	rotate: -2deg;
}

/* Stack — the owner's reference, flush. The reference itself frames each print
   in white and leaves a gap between them; the ask was to close both, so the
   three photographs abut directly and the mount survives only as a ring around
   the whole block.

   Absolute positioning cannot express "flush" — it can only approximate it
   with percentages that re-open a hairline at some viewport width. A grid is
   flush by construction: two columns, the portrait spanning both rows, zero
   gap, and nothing to drift. Interior corners are squared for the same reason;
   rounded ones would reopen the gap at each junction. */
.ruo-qa__media[data-collage="stack"] {
	display: grid;
	grid-template-columns: 1fr 1.08fr;
	grid-template-rows: 1fr 1fr;
	--ruo-collage-ring: 7px;
	/* Exactly one ring width. Each neighbour's outline reaches all the way
	   across this gap from its own side, so the two coincide inside it and the
	   seam stays one ring thick instead of stacking into two. */
	gap: var(--ruo-collage-ring);
	position: relative;
	min-height: 26rem;
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	box-shadow: 0 0 0 7px var(--wp--preset--color--paper, #fff),
		0 22px 48px -24px rgb(0 0 0 / 0.45);
}

/* The arrangements above all position these absolutely and size them to
   themselves. The grid needs them back in flow, sized by their cell. */
[data-collage="stack"] .ruo-qa__card--photo,
[data-collage="stack"] .ruo-qa__chain,
[data-collage="stack"] .ruo-qa__inset {
	position: static;
	display: block;
	/* The media column sets justify-items: end, so a grid item left at
	   width:auto shrinks to its content and parks against the track's right
	   edge. Each photograph then reaches its neighbour only where the track
	   happens to match the image's own 4:3 — which is what `stack` did by
	   coincidence and `offset` did not, opening a 4.6px seam on one join.
	   Stretching makes flush structural instead of lucky. */
	justify-self: stretch;
	align-self: stretch;
	inset: auto;
	translate: none;
	rotate: none;
	margin: 0;
	padding: 0;
	width: auto;
	min-width: 0;
	height: auto;
	aspect-ratio: auto;
	/* Square by default; each arrangement rounds back the corners that face
	   outward. A corner where both edges are shared must stay square — round
	   it and the ring curves away from the join, opening a notch at the
	   junction, which is the very seam the merged ring exists to close. */
	border-radius: 0;
	box-shadow: none;
	overflow: hidden;
	/* The mounted-print ring. `outline` rather than a border or a box-shadow
	   spread: it is painted outside the border box and takes no space in
	   layout, so paired with a gap of the same width the two rings meeting at a
	   seam land on the same pixels and read as one band. A border would have
	   contributed its width to the layout from both sides and produced a
	   double-thick seam, and a white background on the container would have
	   filled the empty cells — squaring off the ragged silhouette that is the
	   whole point of the offset arrangement. */
	outline: var(--ruo-collage-ring) solid var(--wp--preset--color--paper, #fff);
}

[data-collage="stack"] .ruo-qa__card--photo > img,
[data-collage="stack"] .ruo-qa__chain > img,
[data-collage="stack"] .ruo-qa__inset > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

[data-collage="stack"] .ruo-qa__card--photo {
	grid-area: 1 / 1 / 3 / 2;
}

[data-collage="stack"] .ruo-qa__chain {
	grid-area: 1 / 2 / 2 / 3;
}

[data-collage="stack"] .ruo-qa__inset {
	grid-area: 2 / 2 / 3 / 3;
}

/* Offset — the owner's marked-up reference, measured off the coloured boxes.

   Same flush principle as `stack`, different shape. In `stack` the three prints
   square off into one rectangle; here the shared seams stay flush but the outer
   edges deliberately do not line up:

     · the molecule starts ABOVE the portrait's top edge
     · the tubes end BELOW the portrait's bottom edge
     · the tubes stop short of the molecule's right edge

   That ragged outline is the whole effect — it is what stops three photographs
   reading as a table. Expressed as a 3x4 grid whose tracks are the reference's
   own proportions: each track is one of the edges where a photograph starts or
   stops, so every span below lands exactly on a marked box.

     cols   portrait | shared | molecule's tail
     rows   molecule's head | both | both | tubes' foot

   Tracks come from the owner's second, corrected mark-up. The correction was
   the portrait: it no longer anchors the block from top to bottom but sits
   shorter and inset, so the molecule clears it by a wide margin at the top
   rather than a sliver. Only the track sizes moved — which cell each
   photograph occupies was right the first time. */
.ruo-qa__media[data-collage="offset"] {
	display: grid;
	grid-template-columns: 40.5fr 44.5fr 15fr;
	grid-template-rows: 19.2fr 38.8fr 33.5fr 8.5fr;
	--ruo-collage-ring: 7px;
	/* Exactly one ring width. Each neighbour's outline reaches all the way
	   across this gap from its own side, so the two coincide inside it and the
	   seam stays one ring thick instead of stacking into two. */
	gap: var(--ruo-collage-ring);
	position: relative;
	min-height: 0;
	/* The outer ring is painted outside each photograph's box, so the block
	   reserves room for it rather than letting an ancestor crop it. */
	box-sizing: border-box;
	padding: var(--ruo-collage-ring);
	aspect-ratio: 555 / 433;
	/* Traces the stepped silhouette rather than a bounding box, because the
	   empty grid cells are genuinely transparent. A box-shadow would draw the
	   rectangle the photographs deliberately do not fill. */
	filter: drop-shadow(0 16px 30px rgb(0 0 0 / 0.3));
}

[data-collage="offset"] .ruo-qa__card--photo,
[data-collage="offset"] .ruo-qa__chain,
[data-collage="offset"] .ruo-qa__inset {
	position: static;
	display: block;
	/* The media column sets justify-items: end, so a grid item left at
	   width:auto shrinks to its content and parks against the track's right
	   edge. Each photograph then reaches its neighbour only where the track
	   happens to match the image's own 4:3 — which is what `stack` did by
	   coincidence and `offset` did not, opening a 4.6px seam on one join.
	   Stretching makes flush structural instead of lucky. */
	justify-self: stretch;
	align-self: stretch;
	inset: auto;
	translate: none;
	rotate: none;
	margin: 0;
	padding: 0;
	width: auto;
	min-width: 0;
	height: auto;
	aspect-ratio: auto;
	/* Square by default; each arrangement rounds back the corners that face
	   outward. A corner where both edges are shared must stay square — round
	   it and the ring curves away from the join, opening a notch at the
	   junction, which is the very seam the merged ring exists to close. */
	border-radius: 0;
	box-shadow: none;
	overflow: hidden;
	/* The mounted-print ring. `outline` rather than a border or a box-shadow
	   spread: it is painted outside the border box and takes no space in
	   layout, so paired with a gap of the same width the two rings meeting at a
	   seam land on the same pixels and read as one band. A border would have
	   contributed its width to the layout from both sides and produced a
	   double-thick seam, and a white background on the container would have
	   filled the empty cells — squaring off the ragged silhouette that is the
	   whole point of the offset arrangement. */
	outline: var(--ruo-collage-ring) solid var(--wp--preset--color--paper, #fff);
}

[data-collage="offset"] .ruo-qa__card--photo > img,
[data-collage="offset"] .ruo-qa__chain > img,
[data-collage="offset"] .ruo-qa__inset > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

[data-collage="offset"] .ruo-qa__card--photo {
	grid-area: 2 / 1 / 4 / 2;
}

[data-collage="offset"] .ruo-qa__chain {
	grid-area: 1 / 2 / 3 / 4;
}

[data-collage="offset"] .ruo-qa__inset {
	grid-area: 3 / 2 / 5 / 3;
}

/* Corners round only where a print faces the outside; a corner whose two edges
   are both shared stays square so the ring runs straight through the join.
   Reading the layout above, corner by corner:

     portrait  right edge is shared for its whole height  -> TR, BR square
     molecule  its foot sits on the portrait and the tubes -> BL square
     tubes     head and left edge both meet a neighbour   -> TL, TR square

   Everything else meets open air and keeps the card radius. */
[data-collage="offset"] .ruo-qa__card--photo {
	border-radius: var(--wp--custom--radius--card) 0 0 var(--wp--custom--radius--card);
}

[data-collage="offset"] .ruo-qa__chain {
	border-radius: var(--wp--custom--radius--card) var(--wp--custom--radius--card)
		var(--wp--custom--radius--card) 0;
}

[data-collage="offset"] .ruo-qa__inset {
	border-radius: 0 0 var(--wp--custom--radius--card) var(--wp--custom--radius--card);
}

/* --- Phone-only corrections to shared components (W-51/W-53) --------------
   At the END of the sheet on purpose. Written near the header rules it lost to
   the ring declarations 7,000 lines further down — same specificity, later
   wins — so the override was inert and the ring stayed on mobile. */
@media (max-width: 40rem) {
	/* The ring is drawn OUTSIDE the figure's box, so desktop compensates with a
	   7px inset that lines its outer edge up with the cards below. On a phone
	   everything aligns to the section gutter, and ring plus inset put the
	   photograph 7px inside every other edge on screen. Desktop keeps it. */
	.ruo-standard__figure {
		box-shadow: 0 20px 44px -22px rgb(0 0 0 / 0.4);
		margin-inline: 0;
	}

	/* Stacked, the panel's single padding value served the photograph and the
	   copy alike, leaving far less beneath the image than above it. */
	.ruo-qa__media {
		margin-block-end: 1.5rem;
	}
}

/* --- PDP phone corrections (W-59) ---------------------------------------- */
@media (max-width: 40rem) {
	/* No success toast on a phone. It rendered inside the fixed buy bar, so a
	   confirmation that is already obvious — the button says "In cart" and the
	   header count changes — pushed the bar taller and covered the product to
	   say so. Errors are deliberately NOT hidden: those are the only notices
	   here carrying something the interface does not already show. */
	.ruo-pdp-notice .woocommerce-message,
	.ruo-pdp-notice .woocommerce-info {
		display: none !important;
	}

	/* The wrapper collapses with them, or it leaves a padded empty strip. */
	.ruo-pdp-notice:not(:has(.woocommerce-error)) {
		display: none !important;
	}

	/* Add to cart should dominate. At 142px against 200px the control was
	   taking 41% of the row for a number that is almost always 1; trimmed to
	   about 30% so the button reads as the action and the stepper as the
	   adjustment. Height is untouched, so the tap targets stay full-size
	   vertically even as they narrow. */
	body.single-product div.product form.cart .quantity {
		padding-inline: 0.25rem;
	}

	body.single-product div.product form.cart .quantity .qty {
		width: 2.125rem;
	}

	body.single-product .ruo-qty__step {
		width: 1.875rem;
	}
}

/* --- Contact page, phone (W-59) ------------------------------------------ */
@media (max-width: 40rem) {
	/* "Support information" moves above the form. Stacked, the desktop DOM order
	   put the guidance underneath the thing it is guidance for — you only met
	   the list of what to include after you had written without it. Side by
	   side that order is fine, which is why it reads correctly at desktop and
	   only needed changing here.
	   
	   Done with `order` rather than by moving the block, because the page's
	   content lives in the database and the desktop layout wants the form on
	   the left. The trade is that a screen reader still meets the form first;
	   worth revisiting if the contact copy is ever re-authored. */
	.ruo-contact-band__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.ruo-contact__aside {
		order: -1;
	}
}

/* --- PDP related products, phone (W-62.2) ---------------------------------
   The wrapper opts into the homepage's owner-approved compact grid-card
   treatment. Keep the explicit columns here at the END as a guard against a
   future homepage refactor, and never let a changed Woo default spill a fifth
   recommendation onto the phone. */
@media (max-width: 40rem) {
	.single-product .related.products.ruo-shop-layout[data-shop-layout="grid"] ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.75rem;
	}

	.single-product .related.products li.product:nth-child(n + 5) {
		display: none !important;
	}
}

/* --- PDP fixed purchase context, phone (W-62.3) -------------------------- */
@media (max-width: 40rem) {
	.single-product .product-type-simple .summary form.cart {
		column-gap: 0.75rem;
		row-gap: 0.5rem;
	}

	.ruo-pdp-mobile-buy-context {
		display: flex;
		grid-column: 1 / -1;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		min-width: 0;
	}

	.ruo-pdp-mobile-buy-context__identity {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		min-width: 0;
		margin: 0;
	}

	.ruo-pdp-mobile-buy-context__name {
		min-width: 0;
		overflow: hidden;
		font-family: var(--wp--preset--font-family--display);
		font-size: 1.0625rem;
		font-weight: 600;
		line-height: 1.1;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.ruo-pdp-mobile-buy-context__divider {
		width: 1px;
		height: 1.25rem;
		flex: 0 0 auto;
		background: var(--wp--preset--color--border-strong);
	}

	.ruo-pdp-mobile-buy-context__mass {
		flex: 0 0 auto;
		color: var(--wp--preset--color--ink-55);
		font-family: var(--wp--preset--font-family--mono);
		font-size: 0.625rem;
		letter-spacing: 0.1em;
		line-height: 1;
		text-transform: uppercase;
		white-space: nowrap;
	}

	.ruo-pdp-order-type {
		display: flex;
		flex: 0 0 auto;
		gap: 0.375rem;
	}

	.ruo-pdp-order-type button {
		min-height: 2.5rem;
		padding: 0.45rem 0.625rem;
		border: 1px solid var(--wp--preset--color--button-outline);
		border-radius: 999px;
		background: var(--wp--preset--color--surface);
		color: var(--wp--preset--color--ink-55);
		font: inherit;
		font-size: 0.6875rem;
		font-weight: 600;
		line-height: 1;
		white-space: nowrap;
		cursor: pointer;
	}

	.ruo-pdp-order-type button[aria-pressed="true"] {
		border-color: var(--wp--preset--color--accent);
		background: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--on-accent);
	}

	.ruo-pdp-order-type button:focus-visible {
		outline: 2px solid var(--wp--preset--color--accent);
		outline-offset: 2px;
	}

	/* JS measures the real fixed bar, including safe-area padding and any visible
	   error. The fallback still leaves the page usable before/devoid of script. */
	body.single-product {
		padding-block-end: calc(var(--ruo-pdp-buy-bar-height, 8.25rem) + 0.5rem);
	}
}

/* --- COA library wide records, phone only (W-62.1) -----------------------
   W-52's compact record remains the phone treatment. These rules deliberately
   live last: desktop gets the recovered tall evidence tile above, while an
   equal-specificity rule added earlier cannot silently undo the phone card. */
@media (max-width: 40rem) {
	.ruo-coa-grid {
		grid-template-columns: repeat(auto-fill, minmax(min(32rem, 100%), 1fr));
		gap: 0.75rem;
	}

	.ruo-coa-card {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas:
			"media   body"
			"verdict verdict"
			"actions actions";
		align-items: start;
		column-gap: 1rem;
		row-gap: 0.875rem;
		padding: 1rem 1.125rem;
		overflow: hidden;
	}

	.ruo-coa-card__media {
		grid-area: media;
		margin: 0;
		border: 0;
		border-radius: var(--wp--custom--radius--small, 7px);
		background: color-mix(in srgb, var(--wp--preset--color--ink) 3%, var(--wp--preset--color--surface));
	}

	.ruo-coa-card__img {
		display: block;
		width: 4.5rem;
		height: 4.5rem;
		margin: 0;
		padding: 0.25rem;
		object-fit: contain;
	}

	.ruo-coa-card__body {
		grid-area: body;
		display: flex;
		flex-direction: column;
		gap: 0.15rem;
		min-width: 0;
	}

	.ruo-coa-card__name {
		margin: 0;
		font-size: 1rem;
	}

	.ruo-coa-card__purity {
		display: flex;
		align-items: baseline;
		gap: 0.35rem;
		margin: 0.1rem 0 0;
		line-height: 1;
	}

	.ruo-coa-card__purity strong {
		font-family: var(--wp--preset--font-family--display);
		font-size: 1.875rem;
		font-weight: 600;
		letter-spacing: -0.02em;
		color: var(--wp--preset--color--accent);
	}

	.ruo-coa-card__purity span {
		font-family: var(--wp--preset--font-family--ui);
		font-size: var(--ruo-t-fine);
		color: var(--wp--preset--color--ink-55, inherit);
	}

	.ruo-coa-card__lotline {
		display: flex;
		align-items: baseline;
		min-width: 0;
		margin: 0.15rem 0 0;
		color: var(--wp--preset--color--ink-40);
		font-family: var(--wp--preset--font-family--mono);
		font-size: 0.6875rem;
		letter-spacing: 0.06em;
	}

	.ruo-coa-card__lotline p {
		margin: 0;
		color: inherit;
		font: inherit;
		letter-spacing: inherit;
		white-space: nowrap;
	}

	.ruo-coa-card__tested .ruo-coa-card__field-label {
		display: none;
	}

	.ruo-coa-card__verdict {
		grid-area: verdict;
		display: flex;
		align-items: center;
		gap: 0;
		margin: 0;
		padding: 0.5rem 0.75rem;
		border-radius: var(--wp--custom--radius--small, 7px);
		background: color-mix(in srgb, var(--wp--preset--color--ink) 4%, transparent);
		font-family: var(--wp--preset--font-family--mono);
		font-size: var(--ruo-t-fine);
		color: var(--wp--preset--color--ink-55, inherit);
	}

	.ruo-coa-card__verdict .ruo-coa-card__field-label {
		margin-inline-start: 0.5rem;
	}

	.ruo-coa-card__verdict .ruo-coa-card__field-value {
		margin-inline-start: 0.25em;
	}

	.ruo-coa-card__tick {
		flex: 0 0 auto;
		width: 1rem;
		height: 1rem;
		color: var(--wp--preset--color--accent);
	}

	.ruo-coa-card__actions {
		grid-area: actions;
		justify-content: normal;
		gap: 0.5rem;
		margin: 0;
		padding: 0;
	}
}

/* --- PDP phone options sheet + priced buy bar (W-64 v2) ------------------
   These defaults keep every new surface out of desktop layout. The phone
   rules intentionally live at the END of the sheet so they beat the older
   W-62.3 purchase-context treatment they replace. */
.ruo-pdp-frequency-inline,
.ruo-pdp-options-dialog,
.ruo-pdp-subscription-caption {
	display: none;
}

.ruo-pdp-cta-stack {
	display: contents;
}

@keyframes ruo-pdp-sheet-in {
	from {
		translate: 0 1.5rem;
		opacity: 0;
	}
	to {
		translate: 0 0;
		opacity: 1;
	}
}

@media (max-width: 40rem) {
	.ruo-pdp-mobile-buy-context {
		display: none;
		grid-column: 1 / -1;
		align-items: center;
		gap: 0.45rem;
		width: 100%;
		min-width: 0;
		min-height: 1.875rem;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--wp--preset--color--ink);
		font: inherit;
		text-align: start;
		cursor: pointer;
		appearance: none;
	}

	.ruo-pdp-options-ready .ruo-pdp-mobile-buy-context {
		display: flex;
	}

	.ruo-pdp-mobile-buy-context:focus-visible {
		border-radius: var(--wp--custom--radius--small, 7px);
		outline: 2px solid var(--wp--preset--color--accent);
		outline-offset: 3px;
	}

	.ruo-pdp-mobile-buy-context__name {
		/* Shrinks and truncates, but never grows: growing padded the name box
		   with empty space and pushed the divider away from the word it
		   divides. Free space is claimed by __selections' auto margin below. */
		flex: 0 1 auto;
		min-width: 0;
		overflow: hidden;
		font-family: var(--wp--preset--font-family--display);
		font-size: 1rem;
		font-weight: 600;
		line-height: 1.1;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.ruo-pdp-mobile-buy-context__divider {
		width: 1px;
		height: 1.25rem;
		flex: 0 0 auto;
		background: var(--wp--preset--color--border-strong);
	}

	.ruo-pdp-mobile-buy-context__selections {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		gap: 0.3rem;
		/* Absorbs the row's free space so the hint stays pinned right while
		   name + divider + tags stay clustered left. */
		margin-inline-end: auto;
	}

	.ruo-pdp-mobile-buy-context__tag {
		flex: 0 0 auto;
		padding: 0.3rem 0.7rem;
		border: 1px solid var(--wp--preset--color--border);
		border-radius: 999px;
		background: var(--wp--preset--color--surface);
		color: var(--wp--preset--color--ink-55);
		font-family: var(--wp--preset--font-family--mono);
		font-size: 0.625rem;
		letter-spacing: 0.08em;
		line-height: 1;
		text-transform: uppercase;
		white-space: nowrap;
	}

	.ruo-pdp-mobile-buy-context__hint {
		display: flex;
		flex: 0 999 5.75rem;
		align-items: center;
		justify-content: flex-end;
		gap: 0.2rem;
		min-width: 0;
		overflow: hidden;
		color: var(--wp--preset--color--ink-40);
		font-family: var(--wp--preset--font-family--mono);
		font-size: 0.5625rem;
		letter-spacing: 0.04em;
		line-height: 1;
		text-transform: uppercase;
		white-space: nowrap;
	}

	.ruo-pdp-mobile-buy-context__hint span,
	.ruo-pdp-mobile-buy-context__hint b {
		flex: 0 0 auto;
	}

	.ruo-pdp-mobile-buy-context__hint b {
		font-family: var(--wp--preset--font-family--ui);
		font-size: 1rem;
		font-weight: 400;
	}

	.single-product form.cart .single_add_to_cart_button {
		min-width: 0;
		padding-inline: 0.5rem;
		font-size: 0.9375rem;
		white-space: nowrap;
	}

	.single-product form.cart .ruo-pdp-cta-stack {
		display: flex;
		grid-column: 2;
		flex-direction: column;
		gap: 0.25rem;
		min-width: 0;
	}

	.single-product form.cart .ruo-pdp-subscription-caption:not([hidden]) {
		display: block;
		order: -1;
		margin: 0;
		color: var(--wp--preset--color--ink-40);
		font-family: var(--wp--preset--font-family--mono);
		font-size: 0.5625rem;
		letter-spacing: 0.035em;
		line-height: 1.25;
		text-align: center;
		text-transform: uppercase;
	}

	body.ruo-subscription-preview.single-product form.cart .single_add_to_cart_button {
		background: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--on-accent);
		font-size: 0.9375rem;
		font-weight: 500;
		letter-spacing: normal;
		text-transform: none;
		cursor: not-allowed;
		opacity: 1;
	}

	body.ruo-subscription-preview.single-product form.cart .single_add_to_cart_button::before {
		display: none;
	}

	html.ruo-pdp-options-ready body.ruo-has-in-cart.single-product form.cart .single_add_to_cart_button {
		font-size: 0.9375rem;
		font-weight: 500;
		letter-spacing: normal;
		text-transform: none;
	}

	html.ruo-pdp-options-ready body.ruo-has-in-cart.single-product form.cart .single_add_to_cart_button::before {
		margin-right: 0;
	}

	/* The page control replaces the disabled desktop teaser on phones. It is a
	   second view of the same JS-owned frequency state, never another field. */
	.ruo-pdp-options-ready .ruo-pdp-subscribe__btn {
		display: none;
	}

	.ruo-pdp-options-ready .ruo-pdp-frequency-inline {
		display: block;
	}

	.ruo-pdp-frequency-inline > p,
	.ruo-pdp-options-dialog__section h3 {
		margin: 0 0 0.6rem;
		color: var(--wp--preset--color--ink-40);
		font-family: var(--wp--preset--font-family--mono);
		font-size: var(--ruo-t-eyebrow);
		font-weight: 500;
		letter-spacing: var(--ruo-t-eyebrow-tracking);
		text-transform: uppercase;
	}

	.ruo-pdp-frequency-inline > div,
	.ruo-pdp-options-dialog__choices {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.5rem;
	}

	.ruo-pdp-frequency-inline button,
	.ruo-pdp-options-dialog__choices button {
		min-height: 2.75rem;
		padding: 0.55rem 0.75rem;
		border: 1px solid var(--wp--preset--color--button-outline);
		border-radius: var(--wp--custom--radius--control);
		background: var(--wp--preset--color--surface);
		color: var(--wp--preset--color--ink);
		font: inherit;
		font-size: var(--ruo-t-body);
		font-weight: 500;
		cursor: pointer;
	}

	.ruo-pdp-frequency-inline button[aria-pressed="true"],
	.ruo-pdp-options-dialog__choices button[aria-pressed="true"],
	.ruo-pdp-options-dialog__choices button[aria-current="true"] {
		border: 2px solid var(--wp--preset--color--accent);
		color: var(--wp--preset--color--accent);
		font-weight: 600;
	}

	/* Mass pills size to their content and match the page's own mass chips
	   (.ruo-pdp-chip, 1.25rem inline padding) rather than splitting the sheet
	   into halves — a two-column grid made "5 mg" occupy half the width.
	   Frequency keeps the grid: it is a binary choice and reads better as two
	   equal halves. */
	.ruo-pdp-options-dialog__choices--mass {
		display: flex;
		flex-wrap: wrap;
	}

	.ruo-pdp-options-dialog__choices--mass button {
		padding-inline: 1.25rem;
	}

	.ruo-pdp-frequency-inline button:focus-visible,
	.ruo-pdp-options-dialog button:focus-visible {
		outline: 2px solid var(--wp--preset--color--accent);
		outline-offset: 2px;
	}

	body.ruo-pdp-options-open {
		position: fixed;
		inset-inline: 0;
		width: 100%;
		overflow: hidden;
	}

	dialog.ruo-pdp-options-dialog {
		box-sizing: border-box;
		inset: auto 0 0;
		width: 100%;
		max-width: none;
		max-height: min(82dvh, 38rem);
		margin: auto 0 0;
		padding: 0;
		border: 1px solid var(--wp--preset--color--border);
		border-block-end: 0;
		border-radius: 1.125rem 1.125rem 0 0;
		background: var(--wp--preset--color--surface);
		color: var(--wp--preset--color--ink);
		overflow: auto;
	}

	dialog.ruo-pdp-options-dialog[open] {
		display: block;
		animation: ruo-pdp-sheet-in 180ms ease-out both;
	}

	dialog.ruo-pdp-options-dialog::backdrop {
		background: rgb(12 17 29 / 0.52);
	}

	.ruo-pdp-options-dialog__sheet {
		position: relative;
		padding: 1.25rem var(--wp--custom--gutter)
			max(1.25rem, env(safe-area-inset-bottom));
	}

	/* Opening parks focus here (tabindex="-1") so no choice shows a ring on top
	   of its selected border. The sheet is a container, not a control, and the
	   dialog announces itself via aria-labelledby, so it needs no ring of its
	   own. Real controls keep their :focus-visible rings when tabbed to. */
	.ruo-pdp-options-dialog__sheet:focus {
		outline: none;
	}

	.ruo-pdp-options-dialog header {
		display: flex;
		align-items: center;
		gap: 1rem;
		margin-block-end: 1.5rem;
		padding-inline-end: 3.5rem;
	}

	.ruo-pdp-options-dialog h2 {
		min-width: 0;
		margin: 0;
		overflow: hidden;
		font-family: var(--wp--preset--font-family--display);
		font-size: 1.75rem;
		font-weight: 600;
		line-height: 1.1;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.ruo-pdp-options-dialog__close {
		position: absolute;
		top: 1.25rem;
		right: var(--wp--custom--gutter);
		display: inline-flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		width: 2.75rem;
		height: 2.75rem;
		padding: 0;
		border: 1px solid var(--wp--preset--color--border);
		border-radius: 999px;
		background: var(--wp--preset--color--surface);
		color: var(--wp--preset--color--ink);
		font-family: var(--wp--preset--font-family--ui);
		font-size: 1.6rem;
		line-height: 1;
		cursor: pointer;
	}

	.ruo-pdp-options-dialog__close span {
		translate: 0 -0.05em;
	}

	.ruo-pdp-options-dialog__section + .ruo-pdp-options-dialog__section {
		margin-block-start: 1.5rem;
		padding-block-start: 1.5rem;
		border-block-start: 1px solid var(--wp--preset--color--border);
	}
}

@media (max-width: 23.5rem) {
	.ruo-pdp-mobile-buy-context__hint span {
		display: none;
	}

	.ruo-pdp-buy-cta__discount {
		display: none;
	}
}

@media (max-width: 40rem) and (prefers-reduced-motion: reduce) {
	dialog.ruo-pdp-options-dialog[open] {
		animation: none;
	}
}