/*
Theme Name: Purum
Theme URI: https://purum.bio
Author: Davies Brands
Description: WooCommerce block theme. Conversion structure follows the Mito Labs reference — pill navigation, quantity ladder, protocol bundles — executed in the Purum identity at a premium register: warm-white ground, ink, one ice accent per view, DM Mono as ornament, generous editorial spacing.
Version: 0.5.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: purum
Tags: full-site-editing, block-patterns, e-commerce
*/

/* ═══════════════════════════════════════════════════════════════════
   Premium is restraint, executed precisely.

   - Ice is spent once per view (brand brief §4: "one use per view").
     Everywhere else: ink, steel, mute.
   - Separation comes from space and hairlines, not boxes. Borders are
     rgba-soft; shadows appear only on hover.
   - Data is decor (brief §2): batch codes and purity figures are the
     ornament. Nothing else is added.
   - Mono is never set beyond two lines; uppercase mono ≥ .12em (brief §5).
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --r-xl: 12px;
  --r-2xl: 18px;
  --r-3xl: 28px;
  --r-full: 9999px;

  --shadow-nav: 0 1px 0 rgba(14,20,25,.04), 0 8px 32px -12px rgba(14,20,25,.10);
  --shadow-lift: 0 24px 48px -20px rgba(14,20,25,.18);

  --ink: var(--wp--preset--color--contrast);
  --slate: var(--wp--preset--color--slate);
  --ice: var(--wp--preset--color--ice);
  --ice-tint: var(--wp--preset--color--ice-tint);
  --steel: var(--wp--preset--color--steel);
  --line: rgba(14,20,25,.08);
  --hairline: rgba(14,20,25,.06);
  --mute: var(--wp--preset--color--mute);
  --panel: var(--wp--preset--color--sand);

  --mono: var(--wp--preset--font-family--mono);
  --sans: var(--wp--preset--font-family--body);
}

body{ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection{ background: var(--ice); color: #fff; }

h1,h2,h3{ text-wrap: balance; }

/* ── brand lockup ─────────────────────────────────────────── */
.purum-lockup{ display:flex; align-items:center; gap:.65rem; text-decoration:none; }
.purum-lockup__mark{ width:24px; height:24px; color: var(--ink); flex:none; display:block; }
.purum-lockup__mark svg{ display:block; width:100%; height:100%; }
.purum-wordmark,
.purum-header .wp-block-site-title a{
  font-family: var(--mono); font-weight:500; text-transform:uppercase;
  letter-spacing:-.055em; line-height:.9; font-size:1.1rem;
  color: var(--ink); text-decoration:none;
}

/* ── announcement — a fact, set like a label ──────────────── */
.purum-announce{
  background: var(--ink); color: rgba(251,250,247,.85);
  font-family: var(--mono); font-size:.5625rem; font-weight:400;
  letter-spacing:.22em; text-transform:uppercase;
  text-align:center; padding:.75rem 1rem; margin:0;
}
.purum-announce a{ color:#fff; text-decoration:none; border-bottom:1px solid rgba(251,250,247,.4); padding-bottom:1px; }

/* ── floating pill header ─────────────────────────────────── */
header.purum-header{
  position:sticky; top:0; z-index:50; padding:1.1rem 1rem;
  background:transparent; pointer-events:none;
}
.purum-header__bar{
  pointer-events:auto; max-width:1040px; margin:0 auto;
  background: rgba(251,250,247,.86);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  border:1px solid var(--line); border-radius: var(--r-full);
  box-shadow: var(--shadow-nav);
  padding:.55rem .55rem .55rem 1.4rem; min-height:58px;
}
.purum-header .wp-block-navigation{
  font-family: var(--mono); font-size:.625rem; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase;
}
.purum-header .wp-block-navigation a{
  color: var(--wp--preset--color--body-text); text-decoration:none;
  transition: color .18s ease;
}
.purum-header .wp-block-navigation a:hover{ color: var(--ink); }

/* header CTA stays compact */
.purum-header .wp-block-button__link{
  min-height:0 !important; padding:.65rem 1.25rem !important;
}

/* ── hero ─────────────────────────────────────────────────── */
.purum-hero{ overflow:hidden; }
.purum-hero__display{
  font-family: var(--mono) !important;
  font-weight:500; letter-spacing:-.035em; line-height:1.03;
  color: var(--ink);
}
.purum-hero__lede{ max-width:30rem; }

/* staged entrance — one orchestrated moment, then stillness */
@media (prefers-reduced-motion: no-preference){
  .purum-hero [class*="wp-block-column"]:first-child > *{
    animation: purum-rise .7s cubic-bezier(.22,1,.36,1) both;
  }
  .purum-hero [class*="wp-block-column"]:first-child > *:nth-child(2){ animation-delay:.06s; }
  .purum-hero [class*="wp-block-column"]:first-child > *:nth-child(3){ animation-delay:.12s; }
  .purum-hero [class*="wp-block-column"]:first-child > *:nth-child(4){ animation-delay:.18s; }
  .purum-hero [class*="wp-block-column"]:first-child > *:nth-child(5){ animation-delay:.24s; }
  .purum-hero__figure-wrap{ animation: purum-rise .8s .1s cubic-bezier(.22,1,.36,1) both; }
}
@keyframes purum-rise{
  from{ opacity:0; transform: translateY(14px); }
  to{ opacity:1; transform: none; }
}

/* the product panel — vial on warm seamless, data as the caption */
.purum-hero__figure-wrap{ position:relative; }
.purum-hero__figure{
  background: var(--panel);
  border:1px solid var(--hairline);
  border-radius: var(--r-3xl);
  margin:0; overflow:hidden;
}
.purum-hero__figure img{ display:block; width:100%; aspect-ratio:1; object-fit:cover; }
.purum-hero__data{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:1rem; flex-wrap:wrap;
  margin:1.1rem .35rem 0;
  font-family: var(--mono); font-size:.625rem; letter-spacing:.16em;
  text-transform:uppercase; color: var(--mute);
  font-variant-numeric: tabular-nums;
}
.purum-hero__data strong{ color: var(--ink); font-weight:500; }

/* ghost figure — the measurement as ornament (brief §2) */
.purum-ghost{
  position:absolute; right:1.5rem; bottom:4.2rem; z-index:1;
  font-family: var(--mono); font-weight:500;
  font-size:clamp(3.2rem, 6vw, 5rem); letter-spacing:-.04em; line-height:1;
  color: transparent; -webkit-text-stroke: 1px rgba(14,20,25,.14);
  pointer-events:none; user-select:none;
  font-variant-numeric: tabular-nums;
}

/* ── labels ───────────────────────────────────────────────── */
.purum-eyebrow{
  font-family: var(--mono); font-size:.5625rem; font-weight:400;
  letter-spacing:.24em; text-transform:uppercase;
  color: var(--mute); margin:0 0 .9rem;
}
.purum-chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:0; border:0; background:none;
  font-family: var(--mono); font-size:.5625rem; letter-spacing:.24em;
  text-transform:uppercase; color: var(--mute); margin:0 0 1.4rem;
}
.purum-chip::before{ content:""; width:18px; height:1px; background: var(--steel); }

/* ── section rhythm ───────────────────────────────────────── */
.purum-section-head{ max-width:44rem; }
.purum-section-title{
  font-family: var(--sans); font-weight:600; letter-spacing:-.03em; line-height:1.1;
}

/* ── trust marquee — quiet, slow ──────────────────────────── */
.purum-marquee{
  overflow:hidden; border-block:1px solid var(--hairline);
  background: var(--wp--preset--color--base); padding:.9rem 0;
}
.purum-marquee__track{
  display:flex; gap:3.25rem; width:max-content;
  animation: purum-scroll 56s linear infinite;
}
.purum-marquee span{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family: var(--mono); font-size:.5625rem;
  letter-spacing:.2em; text-transform:uppercase;
  color: var(--mute); white-space:nowrap;
}
.purum-marquee span::before{ content:""; width:4px; height:4px; background: var(--steel); flex:none; }
@keyframes purum-scroll{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion: reduce){ .purum-marquee__track{ animation:none } }

/* ── sections ─────────────────────────────────────────────── */
.purum-section--sand{ background: var(--panel); }
.purum-section--dark{ background: var(--slate); color: rgba(201,205,210,.85); position:relative; overflow:hidden; }
.purum-section--dark :where(h1,h2,h3,h4){ color:#fff; }
.purum-section--dark .purum-eyebrow{ color: rgba(201,205,210,.55); }

/* watermark mark in the dark section */
.purum-watermark{
  position:absolute; right:-4rem; top:50%; transform:translateY(-50%);
  width:26rem; height:26rem; color: rgba(251,250,247,.035);
  pointer-events:none;
}
.purum-watermark svg{ width:100%; height:100%; }

/* ── cards (goal / why) — boxless, hairline-separated ─────── */
.purum-card{
  background:transparent; border:0; border-top:1px solid var(--line);
  border-radius:0; padding:1.6rem 0 0; box-shadow:none; height:100%;
}
.purum-section--sand .purum-card{ border-top-color: rgba(14,20,25,.12); }
.purum-card h3{
  font-size:1.05rem; font-weight:600; letter-spacing:-.018em; margin:0 0 .55rem;
}
.purum-card p{
  font-size:.875rem; color: var(--wp--preset--color--body-text);
  margin:0; line-height:1.65; max-width:30rem;
}
.purum-card__link{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:1.1rem;
  font-family: var(--mono); font-size:.5625rem; letter-spacing:.2em;
  text-transform:uppercase; color: var(--ink); text-decoration:none;
}
.purum-card__link a{ color:inherit; }

/* ═══ product grid ═══════════════════════════════════════════ */

.wp-block-woocommerce-product-collection .wp-block-post-template,
.wc-block-product-template{
  display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px !important; list-style:none; margin:0; padding:0;
}
@media (max-width:900px){
  .wp-block-woocommerce-product-collection .wp-block-post-template,
  .wc-block-product-template{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px !important; }
}
@media (max-width:560px){
  .wp-block-woocommerce-product-collection .wp-block-post-template,
  .wc-block-product-template{ grid-template-columns:minmax(0,1fr); }
}

/* Woo sets width:33% on its flex children; inside a grid cell that
   resolves against the cell and collapses the card to ~106px. */
.wc-block-product-template.is-flex-container > li,
.wc-block-product-template > li.wc-block-product,
.wp-block-post-template > li.wc-block-product{
  width:auto !important; max-width:none !important;
  flex:initial !important; margin:0 !important;
}

/* card: image-forward, no chrome until hover */
.wc-block-product-template .wc-block-product{
  position:relative; display:flex; flex-direction:column;
  background:transparent; border:0; border-radius:0;
  overflow:visible; box-shadow:none;
}

.wc-block-components-product-image{
  margin:0; background: var(--panel);
  border:1px solid var(--hairline);
  border-radius: var(--r-2xl);
  overflow:hidden;
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}
.wc-block-product:hover .wc-block-components-product-image{
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}
.wc-block-components-product-image img,
.wc-block-product img{
  display:block; width:100%; aspect-ratio:1; object-fit:cover;
  border-radius:0 !important;
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.wc-block-product:hover .wc-block-components-product-image img{ transform: scale(1.03); }

.wc-block-product .wp-block-post-title{
  font-family: var(--sans); font-size:1rem; font-weight:600;
  line-height:1.3; letter-spacing:-.018em; margin:1.15rem 0 0; color: var(--ink);
}
.wc-block-product .wp-block-post-title a{ text-decoration:none; color:inherit; }

.purum-card__assay{
  margin:.45rem 0 0; font-family: var(--mono); font-size:.5625rem;
  letter-spacing:.14em; text-transform:uppercase;
  font-variant-numeric:tabular-nums; color: var(--mute); line-height:1.6;
}

.wc-block-product .wc-block-components-product-price{
  margin:.55rem 0 0; font-family: var(--mono); font-size:.9375rem; font-weight:500;
  color: var(--ink); font-variant-numeric:tabular-nums;
}

.wc-block-product .wc-block-components-product-button{ margin:1rem 0 0; padding:0; }

/* badges — quiet labels, not stickers */
.purum-badge{
  position:absolute; top:.9rem; left:.9rem; z-index:2;
  display:inline-flex; align-items:center; padding:.32rem .7rem;
  border-radius: var(--r-full);
  font-family: var(--mono); font-size:.5rem; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase;
  background: rgba(251,250,247,.92); color: var(--wp--preset--color--body-text);
  border:1px solid var(--hairline);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.purum-badge--featured{ background: var(--ink); color: var(--wp--preset--color--base); border-color:transparent; }
.purum-badge--low{ background: rgba(251,250,247,.92); color:#8A5A1B; }
.purum-badge--right{ left:auto; right:.9rem; }

/* ═══ buttons ════════════════════════════════════════════════ */

.wc-block-components-product-button .wc-block-components-product-button__button,
.wp-block-button__link,
button.single_add_to_cart_button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:46px; padding:.85rem 1.7rem;
  border:1px solid var(--ink); border-radius: var(--r-full) !important;
  background: var(--ink) !important; color: var(--wp--preset--color--base) !important;
  font-family: var(--mono) !important; font-size:.625rem !important; font-weight:500 !important;
  letter-spacing:.18em; text-transform:uppercase; text-decoration:none;
  box-shadow:none !important;
  transition: background .18s ease, border-color .18s ease, transform .14s ease;
}
.wc-block-components-product-button .wc-block-components-product-button__button:hover,
.wp-block-button__link:hover,
button.single_add_to_cart_button:hover{ background: var(--slate) !important; border-color: var(--slate); }
.wp-block-button__link:active{ transform:scale(.985); }

.wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent !important; color: var(--ink) !important;
  border:1px solid var(--steel) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover{
  background:transparent !important; border-color: var(--ink) !important;
}

.wp-block-buttons .wp-block-button{ width:auto; }
.wp-block-buttons .wp-block-button__link{ width:auto; }
.wc-block-product .wc-block-components-product-button__button{ width:100% !important; }

.quantity input.qty{
  border:1px solid var(--steel) !important; border-radius: var(--r-xl) !important;
  min-height:46px; text-align:center;
  font-family: var(--mono); font-variant-numeric:tabular-nums;
  background: var(--wp--preset--color--surface);
}

/* ═══ single product ═════════════════════════════════════════ */

.purum-pdp__gallery{ position:relative; }
.purum-pdp__gallery img{
  border:1px solid var(--hairline); border-radius: var(--r-3xl);
  background: var(--panel); width:100%; aspect-ratio:1; object-fit:cover;
}
.woocommerce-product-gallery__wrapper{ margin:0; }

.purum-pdp .wp-block-post-title{
  font-family: var(--sans); font-size:clamp(1.7rem,3.2vw,2.3rem); font-weight:600;
  letter-spacing:-.03em; line-height:1.1; margin:.4rem 0 .65rem; color: var(--ink);
}
.purum-pdp .price,
.purum-pdp .wc-block-components-product-price{
  font-family: var(--mono); font-size:1.5rem; font-weight:500;
  color: var(--ink); font-variant-numeric:tabular-nums;
}
.purum-pdp .price del{ color: var(--mute); font-size:1rem; }

/* batch data — hairline rows, label register */
.purum-data{
  display:grid; grid-template-columns:auto 1fr; gap:.6rem 2rem; margin:0;
  font-family: var(--mono); font-size:.75rem; letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
  border-top:1px solid var(--line); padding-top:1.1rem;
}
.purum-data dt{ font-size:.5625rem; letter-spacing:.2em; text-transform:uppercase; color: var(--mute); align-self:center; }
.purum-data dd{ margin:0; color: var(--ink); }

.woocommerce-tabs ul.tabs{
  display:flex; gap:2rem; list-style:none; margin:0 0 1.5rem;
  padding:0 0 .9rem; border-bottom:1px solid var(--line);
}
.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after{ display:none !important; }
.woocommerce-tabs ul.tabs li{ margin:0; padding:0; border:0; background:none; }
.woocommerce-tabs ul.tabs li a{
  font-family: var(--mono); font-size:.5625rem; letter-spacing:.2em;
  text-transform:uppercase; color: var(--mute); text-decoration:none;
}
.woocommerce-tabs ul.tabs li.active a{ color: var(--ink); }
.purum-pdp .wc-block-product-details h2,
.woocommerce-Tabs-panel h2{ font-size:1.2rem; letter-spacing:-.02em; margin-bottom:.75rem; }

/* the bestsellers rail is featured-by-definition; the badge is noise there */
.purum-rail .purum-badge--featured{ display:none; }
.purum-rail .purum-badge--right{ right:auto; left:.9rem; }

/* the metaline already states stock; Woo's native line duplicates it */
.purum-pdp p.stock.in-stock{ display:none; }

/* gallery pins while the buy column scrolls */
@media (min-width:900px){
  .purum-pdp__gallery{ position:sticky; top:110px; align-self:flex-start; }
}

/* left-justified constrained groups: children hug the left edge */
.is-content-justification-left > *{ margin-left:0 !important; }

/* ═══ notices, tables ════════════════════════════════════════ */

.woocommerce-message,.woocommerce-info,.woocommerce-error,
.wc-block-components-notice-banner{
  border-radius: var(--r-xl) !important;
  border:1px solid var(--line) !important;
  background: var(--panel) !important; color: var(--ink) !important;
  font-size:.875rem; box-shadow:none !important;
}

.woocommerce table.shop_table,.wc-block-cart-items{
  border:1px solid var(--line); border-radius: var(--r-2xl);
  border-collapse:separate; border-spacing:0; overflow:hidden; width:100%;
}
.woocommerce table.shop_table th,.woocommerce table.shop_table td{
  border-bottom:1px solid var(--hairline); padding:1.05rem 1.15rem;
}
.woocommerce table.shop_table th{
  font-family: var(--mono); font-size:.5625rem; letter-spacing:.2em; text-transform:uppercase;
  color: var(--mute); background: var(--panel); text-align:left;
}
.woocommerce .amount,.wc-block-formatted-money-amount{
  font-family: var(--mono); font-variant-numeric:tabular-nums;
}

/* ═══ stats — the figures ARE the design ═════════════════════ */
.purum-stat__figure{
  font-family: var(--mono); font-weight:500;
  font-size:clamp(2.6rem,4.6vw,3.8rem); letter-spacing:-.045em;
  line-height:1; color: var(--ink); margin:0; font-variant-numeric:tabular-nums;
}
.purum-section--dark .purum-stat__figure{ color:#fff; }
.purum-stat__label{
  font-family: var(--mono); font-size:.5625rem; letter-spacing:.22em;
  text-transform:uppercase; color: var(--mute); margin:.7rem 0 0;
}
.purum-section--dark .purum-stat__label{ color: rgba(201,205,210,.55); }
.purum-section--dark .wp-block-column{
  border-left:1px solid rgba(251,250,247,.1); padding-left:1.75rem;
}
.purum-section--dark .wp-block-column:first-child{ border-left:0; padding-left:0; }

/* ═══ footer ═════════════════════════════════════════════════ */
footer.wp-block-group{ border-top:1px solid var(--hairline); background: var(--wp--preset--color--base); }
footer a{ color: var(--wp--preset--color--body-text); text-decoration:none; font-size:.875rem; transition: color .15s ease; }
footer a:hover{ color: var(--ink); }
.purum-footnote{
  font-family: var(--mono); font-size:.5625rem; letter-spacing:.08em;
  color: var(--mute); line-height:2;
}

:where(a:focus-visible),:where(button:focus-visible){
  outline:2px solid var(--ice); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }

/* ═══════════════════════════════════════════════════════════════════
   v0.6 — anatomy matched to the reference storefront, verified
   against side-by-side screenshots of the live site.
   ═══════════════════════════════════════════════════════════════════ */

/* ── dark hero ────────────────────────────────────────────── */
.purum-hero-dark{ background: var(--ink); color: rgba(251,250,247,.78); }
.purum-hero-dark__inner{
  max-width:1280px; margin:0 auto; padding:4.5rem 1.5rem 5rem;
  display:grid; grid-template-columns: 1.1fr .9fr; gap:4rem; align-items:center;
}
@media (max-width:900px){ .purum-hero-dark__inner{ grid-template-columns:1fr; padding:3rem 1.25rem; } }
.purum-chip--dark{ color: rgba(251,250,247,.5); }
.purum-chip--dark::before{ background: rgba(251,250,247,.25); }
.purum-hero-dark__title{
  font-family: var(--mono); font-weight:500; letter-spacing:-.035em; line-height:1.05;
  font-size:clamp(2.3rem,4.6vw,3.5rem); color:#fff; margin:0 0 1.4rem;
}
.purum-hero-dark__title span{ color:#8FBCCD; }
.purum-hero-dark__lede{ max-width:30rem; font-size:1rem; line-height:1.7; margin:0 0 2rem; }
.purum-hero-dark__actions{ display:flex; gap:.8rem; flex-wrap:wrap; }
.purum-hero-dark__checks{
  list-style:none; display:flex; gap:1.75rem; flex-wrap:wrap;
  margin:2.2rem 0 0; padding:0;
}
.purum-hero-dark__checks li{
  font-family: var(--mono); font-size:.5625rem; letter-spacing:.16em;
  text-transform:uppercase; color: rgba(251,250,247,.5);
  display:flex; align-items:center; gap:.5rem;
}
.purum-hero-dark__checks li::before{ content:"✓"; color:#8FBCCD; font-size:.75rem; }
.purum-hero-dark__panel{
  position:relative; margin:0; border-radius: var(--r-3xl); overflow:hidden;
  border:1px solid rgba(251,250,247,.1);
  background: var(--panel);
}
.purum-hero-dark__panel img{ display:block; width:100%; aspect-ratio:1; object-fit:cover; }
.purum-hero-dark__badge{
  position:absolute; right:1.1rem; bottom:1.1rem;
  display:flex; flex-direction:column; gap:.15rem;
  background: rgba(14,20,25,.88); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(251,250,247,.14); border-radius:14px;
  padding:.7rem 1rem; text-decoration:none;
}
.purum-hero-dark__badge strong{
  font-family: var(--mono); font-weight:500; font-size:1.15rem;
  letter-spacing:-.02em; color:#fff; font-variant-numeric:tabular-nums;
}
.purum-hero-dark__badge span{
  font-family: var(--mono); font-size:.5rem; letter-spacing:.18em;
  text-transform:uppercase; color:#8FBCCD;
}

/* ── shared button set ────────────────────────────────────── */
.purum-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:46px; padding:.85rem 1.7rem; border-radius: var(--r-full);
  font-family: var(--mono); font-size:.625rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; text-decoration:none;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.purum-btn--light{ background:#fff; color: var(--ink); border:1px solid #fff; }
.purum-btn--light:hover{ background: var(--panel); border-color: var(--panel); color: var(--ink); }
.purum-btn--ghost{ background:transparent; color:#fff; border:1px solid rgba(251,250,247,.3); }
.purum-btn--ghost:hover{ border-color:#fff; color:#fff; }
.purum-btn--ink{ background: var(--ink); color: var(--wp--preset--color--base); border:1px solid var(--ink); }
.purum-btn--ink:hover{ background: var(--slate); border-color: var(--slate); color:#fff; }

/* ── 4-up rail ────────────────────────────────────────────── */
.purum-rail .wp-block-post-template,
.purum-rail.wc-block-product-template,
.purum-rail .wc-block-product-template{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:20px !important;
}
@media (max-width:1000px){
  .purum-rail .wp-block-post-template,
  .purum-rail .wc-block-product-template{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:560px){
  .purum-rail .wp-block-post-template,
  .purum-rail .wc-block-product-template{ grid-template-columns:minmax(0,1fr) !important; }
}

/* ── card meta: eyebrow, desc, dual CTA ───────────────────── */
.purum-card__cat{
  margin:1rem 0 0; font-family: var(--mono); font-size:.5rem;
  letter-spacing:.2em; text-transform:uppercase; color: var(--ice);
}
.purum-card__cat + .wp-block-post-title{ margin-top:.3rem; }
.purum-card__desc{
  margin:.45rem 0 0; font-size:.8125rem; line-height:1.55;
  color: var(--wp--preset--color--body-text);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.wc-block-product .wc-block-components-product-button{
  display:flex; gap:.5rem; align-items:stretch;
}
.purum-buynow{
  flex:1 1 50%; display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:.7rem 1rem; border-radius: var(--r-full);
  background: var(--ink); color: var(--wp--preset--color--base);
  border:1px solid var(--ink);
  font-family: var(--mono); font-size:.5625rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
  transition: background .15s ease;
}
.purum-buynow:hover{ background: var(--slate); color:#fff; }
.wc-block-product .wc-block-components-product-button__button{
  flex:1 1 50%; width:auto !important;
  background:transparent !important; color: var(--ink) !important;
  border:1px solid var(--steel) !important;
}
.wc-block-product .wc-block-components-product-button__button:hover{
  border-color: var(--ink) !important; background:transparent !important;
}
.purum-addcart{
  flex:1 1 50%; display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:.7rem 1rem; border-radius: var(--r-full);
  background:transparent; color: var(--ink); border:1px solid var(--steel);
  font-family: var(--mono); font-size:.5625rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
}
.purum-addcart:hover{ border-color: var(--ink); }

/* nothing inside the card column may flex-grow except the button row */
.wc-block-product > *{ flex:0 0 auto; }
.wc-block-product > .wc-block-components-product-button{ margin-top:auto; }

/* ── size switcher ────────────────────────────────────────── */
.purum-buy-label{
  font-family: var(--mono); font-size:.5625rem; letter-spacing:.22em;
  text-transform:uppercase; color: var(--mute); margin:1.25rem 0 .6rem;
}
.purum-sizes{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.purum-sizes__opt{
  display:flex; flex-direction:column; gap:.2rem; padding:.8rem 1rem;
  border:1px solid var(--line); border-radius:14px; text-decoration:none;
  background: var(--wp--preset--color--surface);
  transition: border-color .15s ease;
}
.purum-sizes__opt:hover{ border-color: var(--steel); }
.purum-sizes__opt.is-active{
  border-color: var(--ice); background: var(--ice-tint);
  box-shadow:0 0 0 1px var(--ice) inset;
}
.purum-sizes__label{ font-family: var(--sans); font-size:.875rem; font-weight:600; color: var(--ink); }
.purum-sizes__price{
  font-family: var(--mono); font-size:.75rem; color: var(--mute);
  font-variant-numeric:tabular-nums;
}
.purum-sizes__opt.is-active .purum-sizes__price{ color: var(--ice); }

/* ── protocols band ───────────────────────────────────────── */
.purum-proto{
  max-width:1280px; margin:0 auto; background: var(--ink);
  border-radius: var(--r-3xl); padding:3rem;
  color: rgba(251,250,247,.75);
}
@media (max-width:760px){ .purum-proto{ padding:1.75rem; } }
.purum-eyebrow--dark{ color:#8FBCCD; }
.purum-proto__head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:2rem; flex-wrap:wrap; margin-bottom:2.25rem;
}
.purum-proto__title{
  font-size:clamp(1.5rem,2.8vw,2.1rem); font-weight:600;
  letter-spacing:-.03em; color:#fff; margin:0 0 .7rem;
}
.purum-proto__lede{ max-width:34rem; font-size:.9375rem; line-height:1.65; margin:0; }
.purum-proto__all{
  font-family: var(--mono); font-size:.5625rem; letter-spacing:.18em;
  text-transform:uppercase; color:#fff; text-decoration:none; white-space:nowrap;
}
.purum-bundles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; }
@media (max-width:900px){ .purum-bundles{ grid-template-columns:1fr; } }
.purum-bcard{
  background: rgba(251,250,247,.04); border:1px solid rgba(251,250,247,.1);
  border-radius: var(--r-2xl); overflow:hidden;
  transition: border-color .18s ease;
}
.purum-bcard:hover{ border-color: rgba(251,250,247,.28); }
.purum-bcard__media{
  position:relative; display:block; background: var(--panel);
  aspect-ratio:4/3; overflow:hidden;
}
.purum-bcard__media img{
  display:block; width:100% !important; height:100% !important; object-fit:cover;
}
.purum-bcard__off{
  position:absolute; top:.8rem; left:.8rem;
  background: var(--ink); color:#fff; border:1px solid rgba(251,250,247,.2);
  font-family: var(--mono); font-size:.5rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.3rem .65rem; border-radius: var(--r-full);
}
.purum-bcard__body{ padding:1.25rem 1.35rem 1.5rem; }
.purum-bcard__name{ font-size:1.05rem; font-weight:600; letter-spacing:-.02em; margin:0 0 .35rem; }
.purum-bcard__name a{ color:#fff; text-decoration:none; }
.purum-bcard__desc{ font-size:.8125rem; line-height:1.55; margin:0 0 .9rem; color: rgba(251,250,247,.55); }
.purum-bcard__price{
  font-family: var(--mono); font-size:1.05rem; font-weight:500; color:#fff;
  font-variant-numeric:tabular-nums; margin:0;
}
.purum-bcard__price s{ font-size:.75rem; color: rgba(251,250,247,.4); margin-left:.4rem; }
.purum-bcard__save{
  font-family: var(--mono); font-size:.5625rem; letter-spacing:.14em;
  text-transform:uppercase; color:#8FBCCD; margin:.4rem 0 0;
}

/* ── lab band with certificate cards ──────────────────────── */
.purum-lab{ background: var(--slate); color: rgba(201,205,210,.8); }
.purum-lab__inner{
  max-width:1280px; margin:0 auto; padding:4.5rem 1.5rem;
  display:grid; grid-template-columns:1.05fr .95fr; gap:4rem; align-items:center;
}
@media (max-width:900px){ .purum-lab__inner{ grid-template-columns:1fr; padding:3rem 1.25rem; } }
.purum-lab__title{
  font-size:clamp(1.6rem,3vw,2.3rem); font-weight:600; letter-spacing:-.03em;
  color:#fff; margin:0 0 1rem;
}
.purum-lab__lede{ font-size:.9375rem; line-height:1.7; max-width:30rem; margin:0 0 2rem; }
.purum-lab__stats{ display:flex; gap:2.5rem; flex-wrap:wrap; margin:0 0 2.25rem; }
.purum-lab__stats .purum-stat__figure{ color:#fff; font-size:clamp(1.9rem,3vw,2.5rem); }
.purum-lab__stats .purum-stat__label{ color: rgba(201,205,210,.5); }
.purum-ccards{ display:flex; flex-direction:column; gap:.9rem; }
.purum-ccard{
  background: var(--wp--preset--color--base);
  border-radius: var(--r-2xl); padding:1.15rem 1.3rem;
  display:grid; grid-template-columns:1fr auto; gap:.15rem 1rem; align-items:center;
}
.purum-ccard__batch{
  grid-column:1 / -1; font-family: var(--mono); font-size:.5625rem;
  letter-spacing:.18em; text-transform:uppercase; color: var(--mute); margin:0;
}
.purum-ccard__name{ font-size:.9375rem; font-weight:600; letter-spacing:-.015em; margin:.1rem 0 0; color: var(--ink); }
.purum-ccard__data{
  grid-column:1; display:flex; gap:1.5rem; margin:.35rem 0 0;
  font-family: var(--mono); font-size:.6875rem; font-variant-numeric:tabular-nums; color: var(--ink);
}
.purum-ccard__data dt{
  display:inline; font-size:.5rem; letter-spacing:.16em; text-transform:uppercase;
  color: var(--mute); margin-right:.35rem;
}
.purum-ccard__data dd{ display:inline; margin:0; }
.purum-ccard__verify{
  grid-column:2; grid-row:2 / span 2;
  font-family: var(--mono); font-size:.5625rem; letter-spacing:.16em;
  text-transform:uppercase; color: var(--ice); text-decoration:none; white-space:nowrap;
}

/* ── duo band ─────────────────────────────────────────────── */
.purum-duo{
  max-width:1280px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
@media (max-width:820px){ .purum-duo{ grid-template-columns:1fr; } }
.purum-duo__card{
  background: var(--wp--preset--color--surface);
  border:1px solid var(--hairline); border-radius: var(--r-3xl);
  padding:2.25rem;
}
.purum-duo__card h3{ font-size:1.35rem; font-weight:600; letter-spacing:-.025em; margin:0 0 .6rem; }
.purum-duo__card p{ font-size:.9375rem; line-height:1.65; color: var(--wp--preset--color--body-text); margin:0 0 1.4rem; max-width:26rem; }
.purum-duo__card .purum-eyebrow{ margin-bottom:.8rem; }

/* ── related band ─────────────────────────────────────────── */
.purum-related{
  margin:3.5rem 0 0; background: var(--panel);
  border:1px solid var(--hairline); border-radius: var(--r-3xl);
  padding:2.25rem;
}
@media (max-width:760px){ .purum-related{ padding:1.5rem; } }
.purum-related__head{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:1rem; margin-bottom:1.75rem;
}
.purum-related__title{ font-size:1.35rem; font-weight:600; letter-spacing:-.025em; margin:0; }
.purum-related__all{
  font-family: var(--mono); font-size:.5625rem; letter-spacing:.18em;
  text-transform:uppercase; color: var(--ink); text-decoration:none;
}
.purum-related__grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
@media (max-width:1000px){ .purum-related__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .purum-related__grid{ grid-template-columns:1fr; } }
.purum-rcard{
  background: var(--wp--preset--color--base);
  border:1px solid var(--hairline); border-radius: var(--r-2xl);
  padding:0 0 1.15rem; overflow:hidden; display:flex; flex-direction:column;
  transition: box-shadow .2s ease, transform .2s ease;
}
.purum-rcard:hover{ box-shadow: var(--shadow-lift); transform:translateY(-2px); }
.purum-rcard__media{
  display:block; background: var(--panel); border-bottom:1px solid var(--hairline);
  aspect-ratio:1/1; overflow:hidden;
}
.purum-rcard__media img{
  display:block; width:100% !important; height:100% !important; object-fit:cover;
}
.purum-rcard__name{ font-size:.9375rem; font-weight:600; letter-spacing:-.015em; margin:.9rem 1rem 0; }
.purum-rcard__name a{ color: var(--ink); text-decoration:none; }
.purum-rcard__desc{
  margin:.35rem 1rem 0; font-size:.75rem; line-height:1.5; color: var(--wp--preset--color--body-text);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.purum-rcard__price{
  margin:.55rem 1rem 0; font-family: var(--mono); font-size:.9375rem;
  font-weight:500; color: var(--ink); font-variant-numeric:tabular-nums;
}
.purum-rcard__actions{ display:flex; flex-direction:column; gap:.45rem; margin:.9rem 1rem 0; }
.purum-rcard__actions .purum-buynow,
.purum-rcard__actions .purum-addcart{ min-height:38px; padding:.5rem .6rem; font-size:.5rem; }

/* ── delivery block ───────────────────────────────────────── */
.purum-local{
  margin:3.5rem 0 0; border:1px solid var(--hairline);
  border-radius: var(--r-3xl); padding:2.25rem;
  background: var(--wp--preset--color--surface);
}
@media (max-width:760px){ .purum-local{ padding:1.5rem; } }
.purum-local__title{ font-size:1.35rem; font-weight:600; letter-spacing:-.025em; margin:0 0 1.5rem; }
.purum-local__cols{ display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; }
@media (max-width:760px){ .purum-local__cols{ grid-template-columns:1fr; } }
.purum-chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.purum-chip-pill{
  display:inline-flex; align-items:center; padding:.45rem .85rem;
  border:1px solid var(--line); border-radius: var(--r-full);
  font-family: var(--mono); font-size:.5625rem; letter-spacing:.12em;
  text-transform:uppercase; color: var(--wp--preset--color--body-text);
}
.purum-ticks{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.purum-ticks li{
  font-size:.8125rem; line-height:1.55; color: var(--wp--preset--color--body-text);
  padding-left:1.3rem; position:relative;
}
.purum-ticks li::before{ content:"✓"; position:absolute; left:0; color: var(--ice); }

/* ── dark footer ──────────────────────────────────────────── */
footer.purum-footer-dark{
  background: var(--ink); color: rgba(251,250,247,.6);
  border-top:0; padding-bottom:3rem;
}
footer.purum-footer-dark a{ color: rgba(251,250,247,.72); }
footer.purum-footer-dark a:hover{ color:#fff; }
footer.purum-footer-dark .purum-eyebrow{ color: rgba(251,250,247,.35); }
footer.purum-footer-dark .purum-lockup__mark,
footer.purum-footer-dark .purum-wordmark{ color:#fff; }
.purum-footer-dark__pay{ margin-top:3rem; padding-top:2rem; border-top:1px solid rgba(251,250,247,.1); }
.purum-paychips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.75rem; }
.purum-paychips span{
  display:inline-flex; padding:.4rem .8rem; border-radius:8px;
  background: rgba(251,250,247,.07); border:1px solid rgba(251,250,247,.12);
  font-family: var(--mono); font-size:.5625rem; letter-spacing:.1em;
  text-transform:uppercase; color: rgba(251,250,247,.75);
}
footer.purum-footer-dark .purum-footnote{ color: rgba(251,250,247,.35); margin-top:2rem; }
footer.purum-footer-dark .purum-footnote--last{ margin-top:.75rem; padding-bottom:0; }

/* ── ladder: chip pinned to the cell corner ───────────────── */
.purum-schedule__row{ align-items:flex-start; }
.purum-schedule__row .purum-schedule__off{
  position:absolute; top:.6rem; right:.6rem; width:auto; margin:0;
  align-self:auto;
}

/* ── cart + checkout, branded ─────────────────────────────── */
.wc-block-components-form .wc-block-components-text-input input,
.wc-block-components-text-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input,
.woocommerce-checkout input.input-text,
.woocommerce-checkout select{
  border:1px solid var(--steel) !important; border-radius: var(--r-xl) !important;
  min-height:48px; background: var(--wp--preset--color--surface) !important;
  font-family: var(--sans); box-shadow:none !important;
}
.wc-block-components-text-input input:focus,
.woocommerce-checkout input.input-text:focus{
  border-color: var(--ice) !important; box-shadow:0 0 0 1px var(--ice) !important;
}
.wc-block-components-checkout-step__title,
.wc-block-components-title{
  font-family: var(--sans) !important; font-weight:600 !important; letter-spacing:-.02em;
}
.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-components-order-summary{ border-radius: var(--r-2xl); }
.wc-block-components-radio-control__option,
.wc-block-components-checkout-payment-methods .wc-block-components-radio-control-accordion-option{
  border-radius: var(--r-xl) !important;
}
.wc-block-checkout__sidebar .wc-block-components-product-name{ font-weight:600; }
.wc-block-components-order-summary-item__total-price,
.wc-block-components-totals-item__value{
  font-family: var(--mono); font-variant-numeric:tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════
   v0.7 — px-parity layer.
   Geometry, sizes and weights measured from the reference storefront
   with getComputedStyle; colour and marks stay Purum. Later rules win,
   so this layer overrides the register experiments above.
   ═══════════════════════════════════════════════════════════════════ */

body{ font-weight:400; }

/* announce: 36px, sentence case */
.purum-announce{
  font-family: var(--sans); font-size:13.5px; font-weight:500;
  letter-spacing:0; text-transform:none; padding:.45rem 1rem; min-height:36px;
}

/* header: 54px pill, sans links, active page as ink pill */
.purum-header__bar{ min-height:54px; padding:8px 12px 8px 20px; }
.purum-header .wp-block-navigation{
  font-family: var(--sans); font-size:14px; font-weight:500;
  letter-spacing:0; text-transform:none;
}
.purum-header .wp-block-navigation a{ padding:.45rem .9rem; border-radius:9999px; }
.purum-header .wp-block-navigation a[aria-current],
.purum-header .wp-block-navigation .current-menu-item > a{
  background: var(--ink); color:#fff;
}
.purum-header .wp-block-button__link{
  font-family: var(--sans) !important; font-size:14px !important; font-weight:600 !important;
  letter-spacing:0; text-transform:none; min-height:0 !important; padding:.55rem 1.15rem !important;
}

/* hero: 60/60 · 800 · −1.5px, lede 16/26, CTAs 48px sans pills */
.purum-hero-dark__title{
  font-family: var(--sans) !important; font-weight:800;
  font-size:clamp(2.5rem,4.6vw,3.75rem); line-height:1; letter-spacing:-0.025em;
}
.purum-hero-dark__lede{ font-size:16px; line-height:26px; max-width:448px; }
.purum-hero-dark__checks li{
  font-family: var(--sans); font-size:13px; letter-spacing:0; text-transform:none;
}
.purum-btn{
  font-family: var(--sans); font-size:14px; font-weight:600;
  letter-spacing:0; text-transform:none; min-height:48px; padding:12px 24px;
}

/* section headings: 30px/700 sans; eyebrows 11px mono */
.purum-proto__title,.purum-lab__title,
h2.wp-block-heading{ font-size:clamp(24px,2.6vw,30px) !important; font-weight:700; letter-spacing:-.02em; }
.purum-eyebrow{ font-size:11px; letter-spacing:.14em; }
.purum-chip{ font-size:11px; letter-spacing:.14em; }

/* ── cards: borderless r22, measured type scale ───────────── */
.wc-block-components-product-image{
  border:0; border-radius:22px 22px 0 0;
}
.wc-block-product-template .wc-block-product,
.purum-rcard{
  background: var(--wp--preset--color--surface);
  border:0 !important; border-radius:22px;
  box-shadow:0 1px 2px rgba(14,20,25,.05), 0 0 0 1px rgba(14,20,25,.04);
  overflow:hidden;
}
.wc-block-product-template .wc-block-product{ padding-bottom:16px; }
.wc-block-product:hover .wc-block-components-product-image{ transform:none; box-shadow:none; }
.wc-block-product-template .wc-block-product{ transition:box-shadow .2s ease, transform .2s ease; }
.wc-block-product-template .wc-block-product:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 32px -12px rgba(14,20,25,.16), 0 0 0 1px rgba(14,20,25,.05);
}
.purum-card__cat{
  margin:14px 16px 0; font-family: var(--mono); font-size:10px;
  letter-spacing:.1em; color: var(--ice);
}
.wc-block-product .wp-block-post-title{
  font-size:15px; font-weight:600; letter-spacing:-.01em; margin:4px 16px 0;
}
.purum-card__desc{
  margin:6px 16px 0; font-size:12px; line-height:1.55;
  font-family: var(--sans); color: var(--mute);
}
.purum-card__assay{
  margin:6px 16px 0; font-size:10px; letter-spacing:.06em; text-transform:none;
}
.wc-block-product .wc-block-components-product-price{
  margin:10px 16px 0; font-family: var(--sans); font-size:16px; font-weight:800;
  letter-spacing:-.01em;
}
.wc-block-product .wc-block-components-product-price del{
  font-size:12px; font-weight:500; color: var(--mute); margin-left:6px;
}
.wc-block-product .wc-block-components-product-button{ margin:12px 16px 0; gap:8px; }
.purum-buynow,.purum-addcart,
.wc-block-product .wc-block-components-product-button__button{
  font-family: var(--sans) !important; font-size:13px !important; font-weight:600 !important;
  letter-spacing:0 !important; text-transform:none !important;
  min-height:36px !important; padding:8px 12px !important;
}

/* out of stock: dark badge + pale disabled buttons */
li.wc-block-product.outofstock .purum-buynow,
li.wc-block-product.outofstock .wc-block-components-product-button__button{
  opacity:.4; pointer-events:none;
}

/* ── PLP header kit: subtitle, search, filter chips ───────── */
.purum-plp-sub{ font-size:14px; color: var(--mute); margin:6px 0 0; }
.purum-search{ margin:18px 0 14px; }
.purum-search input[type="search"]{
  width:100%; min-height:44px; padding:0 20px;
  border:1px solid var(--line); border-radius:9999px;
  background: var(--wp--preset--color--surface);
  font-family: var(--sans); font-size:14px; color: var(--ink);
}
.purum-search input[type="search"]:focus{ outline:none; border-color: var(--ice); box-shadow:0 0 0 1px var(--ice); }
.purum-filters{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px; }
.purum-filters a{
  display:inline-flex; align-items:center; min-height:32px; padding:6px 16px;
  border-radius:9999px; border:1px solid var(--line);
  background: var(--wp--preset--color--surface);
  font-family: var(--sans); font-size:14px; font-weight:500;
  color: var(--wp--preset--color--body-text); text-decoration:none;
  transition:border-color .15s ease;
}
.purum-filters a:hover{ border-color: var(--steel); }
.purum-filters a.is-active{ background: var(--ink); border-color: var(--ink); color:#fff; }
.purum-filters a span{ color: inherit; opacity:.55; margin-left:4px; }

/* pagination: outline pills */
.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers{
  font-family: var(--sans); font-size:14px; font-weight:500;
  padding:8px 16px; border:1px solid var(--line); border-radius:9999px;
  color: var(--wp--preset--color--body-text); text-decoration:none;
}
.wp-block-query-pagination .current{ background: var(--ink); border-color: var(--ink); color:#fff; }

/* ── PDP px-parity ────────────────────────────────────────── */
.purum-pdp .wp-block-post-title{
  font-size:30px; line-height:36px; font-weight:700; letter-spacing:-.01em;
}
.purum-pdp .price,
.purum-pdp .wc-block-components-product-price{
  font-family: var(--sans); font-size:30px; font-weight:700; letter-spacing:-.015em;
}
.purum-pdp .price del{ font-size:16px; }
.purum-pdp__gallery img{ border:0; border-radius:24px; }

/* size switcher → segmented track (measured: track r12, pad 4) */
.purum-sizes{
  display:flex; gap:4px; padding:4px; border-radius:12px;
  background: var(--panel); border:1px solid var(--hairline);
}
.purum-sizes__opt{
  flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:1px;
  padding:9px 8px; border:0; border-radius:9px; background:transparent;
  box-shadow:none;
}
.purum-sizes__opt:hover{ background:rgba(255,255,255,.6); }
.purum-sizes__opt.is-active{
  background: var(--wp--preset--color--surface);
  border:0; box-shadow:0 1px 3px rgba(14,20,25,.08);
}
.purum-sizes__label{ font-size:14px; font-weight:600; }
.purum-sizes__price{ font-family: var(--sans); font-size:11px; }

/* ladder cells: sans, measured weights */
.purum-schedule__band{ font-family: var(--sans); font-size:13px; font-weight:500; letter-spacing:0; color: var(--ink); }
.purum-schedule__price{ font-family: var(--sans); font-size:15px; font-weight:700; }
.purum-schedule__price s{ font-size:12px; }
.purum-schedule__row .purum-schedule__off{
  font-family: var(--sans); font-size:10px; font-weight:600; letter-spacing:.02em;
  background: var(--ice); text-transform:none; padding:3px 8px;
}

/* buy row: stepper + wide ATC, radius 6, 48px */
button.single_add_to_cart_button{
  min-height:48px !important; border-radius:6px !important;
  font-family: var(--sans) !important; font-size:15px !important; font-weight:600 !important;
  letter-spacing:0 !important; text-transform:none !important;
  flex:1 1 auto;
}
.purum-pdp form.cart{ display:flex; gap:10px; align-items:stretch; flex-wrap:wrap; }
.purum-pdp form.cart .quantity{ flex:0 0 auto; }
.quantity input.qty{ border-radius:6px !important; min-height:48px; width:64px; }

/* trust ticks + metaline: sans quiet */
.purum-trust-strip li{ font-family: var(--sans); font-size:12px; letter-spacing:0; text-transform:none; }
.purum-trust-strip li::before{ content:"✓"; background:none; width:auto; height:auto; color: var(--ice); }
.purum-metaline{ font-family: var(--sans); font-size:12px; letter-spacing:.02em; text-transform:none; }

/* accordions: 15/600, roomier rows */
.purum-section__summary{ font-size:15px; padding:16px 0; }
.purum-section__body{ font-size:14px; }

/* bundle banner */
.purum-crosssell{ font-size:13.5px; border-radius:10px; }

/* stats keep mono figures, size to theirs */
.purum-stat__figure{ font-size:clamp(28px,3vw,40px); }

/* related cards inherit card scale */
.purum-rcard__name{ font-size:15px; }
.purum-rcard__desc{ font-size:12px; }
.purum-rcard__price{ font-family: var(--sans); font-size:16px; font-weight:800; }
.purum-rcard__actions .purum-buynow,
.purum-rcard__actions .purum-addcart{ font-size:13px !important; min-height:34px !important; }

/* cart upsell strip inside the block cart */
.wp-block-woocommerce-cart .purum-upsells{ margin:20px 0 0; }
.purum-freeship{
  margin:0 0 14px; padding:10px 14px; border-radius:10px;
  background: var(--ice-tint); border:1px solid rgba(62,122,146,.25);
  font-size:13px; color: var(--ink);
}
.purum-freeship strong{ font-weight:700; }
.purum-badge--oos{ background: var(--ink); color:#fff; border-color:transparent; }

/* dual CTA side-by-side, half width each (reference layout) */
.wc-block-product .wc-block-components-product-button{ flex-wrap:nowrap; }
.wc-block-product .wc-block-components-product-button__button{
  width:auto !important; flex:1 1 0 !important;
}
.wc-block-product .purum-buynow{ flex:1 1 0; }

/* ═══════════════════════════════════════════════════════════════════
   v0.8 — scale-up and photography layer.
   Every UI size stepped up per review; real transparent packshots sit
   on the warm panel with contain-fit; Add to Cart moves to the Ice
   accent.
   ═══════════════════════════════════════════════════════════════════ */

/* global type step-up */
.purum-announce{ font-size:14px; min-height:38px; }
.purum-header .wp-block-navigation{ font-size:15px; }
.purum-header .wp-block-site-title a,.purum-wordmark{ font-size:1.35rem; }
.purum-lockup__mark{ width:30px; height:30px; }
.purum-header .wp-block-button__link{ font-size:15px !important; padding:.65rem 1.35rem !important; }
.purum-header__bar{ min-height:60px; }

.purum-hero-dark__title{ font-size:clamp(3rem,5.2vw,4.25rem); }
.purum-hero-dark__lede{ font-size:17px; line-height:28px; max-width:480px; }
.purum-hero-dark__checks li{ font-size:14px; }
.purum-btn{ font-size:15px; min-height:52px; padding:14px 28px; }

.purum-eyebrow{ font-size:12px; }
.purum-chip{ font-size:12px; }
.purum-proto__title,.purum-lab__title,
h2.wp-block-heading{ font-size:clamp(28px,3.2vw,38px) !important; }
.purum-proto__lede,.purum-lab__lede{ font-size:16.5px; }
.purum-card h3{ font-size:19px; }
.purum-card p{ font-size:15px; }
.purum-card__link{ font-size:12px; }

/* product cards */
.purum-card__cat{ font-size:11px; margin:16px 18px 0; }
.wc-block-product .wp-block-post-title{ font-size:17px; margin:5px 18px 0; }
.purum-card__desc{ font-size:13.5px; line-height:1.6; margin:7px 18px 0; }
.purum-card__assay{ font-size:11px; margin:7px 18px 0; }
.wc-block-product .wc-block-components-product-price{ font-size:19px; margin:11px 18px 0; }
.wc-block-product .wc-block-components-product-button{ margin:14px 18px 0; }
.purum-buynow,.purum-addcart,
.wc-block-product .wc-block-components-product-button__button{
  font-size:14px !important; min-height:42px !important;
}
.purum-badge{ font-size:11px; padding:.4rem .85rem; letter-spacing:.04em; font-family: var(--sans); font-weight:600; text-transform:none; }

/* PLP kit */
.purum-plp-sub{ font-size:16px; }
.purum-search input[type="search"]{ font-size:15px; min-height:48px; }
.purum-filters a{ font-size:15px; min-height:38px; padding:8px 18px; }

/* PDP */
.purum-pdp .wp-block-post-title{ font-size:34px; line-height:40px; }
.purum-pdp .price,.purum-pdp .wc-block-components-product-price{ font-size:32px; }
.purum-buy-label{ font-size:12px; }
.purum-sizes__label{ font-size:15px; }
.purum-sizes__price{ font-size:12.5px; }
.purum-schedule__band{ font-size:14px; }
.purum-schedule__price{ font-size:17px; }
.purum-schedule__price s{ font-size:13px; }
.purum-schedule__row .purum-schedule__off{ font-size:11px; }
.purum-crosssell{ font-size:14.5px; }
.purum-trust-strip li{ font-size:14px; }
.purum-trust-strip{ gap:.7rem 1.25rem; }
.purum-metaline{ font-size:13.5px; }
.purum-section__summary{ font-size:17px; padding:18px 0; }
.purum-section__body{ font-size:15.5px; }
.purum-refs__list{ font-size:14px; }
.purum-certificate__data{ font-size:13.5px; }
.purum-certificate__title{ font-size:20px; }
.purum-certificate__link{ font-size:12px; min-height:46px; }
.purum-included{ margin-top:2rem; border-top:1px solid var(--line); padding-top:1.25rem; }
.purum-ticks li{ font-size:14.5px; }
.purum-chip-pill{ font-size:11px; min-height:34px; padding:.5rem 1rem; }
.purum-local__title,.purum-related__title,.purum-duo__card h3{ font-size:1.6rem !important; }
.purum-duo__card p{ font-size:16px; }
.purum-rcard__name{ font-size:16.5px; }
.purum-rcard__desc{ font-size:13px; }
.purum-rcard__price{ font-size:17px; }
.purum-rcard__actions .purum-buynow,
.purum-rcard__actions .purum-addcart{ font-size:14px !important; min-height:38px !important; }
.purum-related__all,.purum-proto__all{ font-size:12px; }

/* stats */
.purum-stat__label{ font-size:11px; }
.purum-ccard__name{ font-size:16px; }
.purum-ccard__data{ font-size:12.5px; }
.purum-ccard__batch,.purum-ccard__verify{ font-size:11px; }

/* footer */
footer a{ font-size:15px !important; }
footer .purum-eyebrow{ font-size:11px; }
.purum-footnote{ font-size:11.5px; }
.purum-paychips span{ font-size:11px; padding:.5rem 1rem; }

/* marquee */
.purum-marquee span{ font-size:11px; }

/* ── Add to Cart: the accent ─────────────────────────────── */
button.single_add_to_cart_button{
  background: var(--ice) !important; border-color: var(--ice) !important;
  color:#fff !important; font-size:16px !important; min-height:52px !important;
}
button.single_add_to_cart_button:hover{
  background: var(--wp--preset--color--ice-deep) !important;
  border-color: var(--wp--preset--color--ice-deep) !important;
}

/* ── photography: transparent packshots on the warm panel ── */
.wc-block-components-product-image img,
.wc-block-product img,
.purum-rcard__media img,
.purum-bcard__media img,
.purum-hero-dark__panel img,
.purum-pdp__gallery img{
  object-fit:contain !important;
  padding:7%;
  box-sizing:border-box;
  background: var(--panel);
}
.purum-hero-dark__panel img{ padding:9%; }
.purum-pdp__gallery img{ padding:8%; }

/* hero panel: smaller column */
.purum-hero-dark__inner{ grid-template-columns:1.25fr .75fr; gap:4.5rem; }
.purum-hero-dark__badge strong{ font-size:1.3rem; }
.purum-hero-dark__badge span{ font-size:10px; }

/* ═══════════════════════════════════════════════════════════════════
   v0.9 — measured parity.
   Every number below was read off the reference storefront with
   getComputedStyle at 1440px, then mapped to the Purum palette.
   Reference → Purum: green-600 → Ice, zinc-900 → Ink, zinc-400 → Mute,
   zinc-300 → Steel, #09090b → Ink, #fafaf9 → Sand, #1c1917 → Slate.
   ═══════════════════════════════════════════════════════════════════ */

/* ── section rhythm: 96px block padding, 1216px measure ──── */
.purum-goals,.purum-lab,.purum-hero-dark{ padding:0; }
.purum-goals__inner,.purum-lab__inner,.purum-hero-dark__inner{
  max-width:1216px; margin:0 auto; padding-left:1.5rem; padding-right:1.5rem;
}

/* ── hero: 606px tall, two 592px columns, 320×420 panel ──── */
.purum-hero-dark{ background: var(--ink); color: rgba(251,250,247,.72); }
.purum-hero-dark__inner{
  display:grid; grid-template-columns:1fr 1fr; gap:32px;
  align-items:center; min-height:606px; padding-top:64px; padding-bottom:64px;
}
@media (max-width:900px){
  .purum-hero-dark__inner{ grid-template-columns:1fr; min-height:0; padding-top:48px; padding-bottom:48px; }
}
.purum-chip--dark{ color: rgba(251,250,247,.45); margin-bottom:1.15rem; }
.purum-hero-dark__title{
  font-family: var(--sans) !important; font-weight:800;
  font-size:60px; line-height:60px; letter-spacing:-1.5px;
  color:#fff; margin:0 0 1.25rem;
}
@media (max-width:1100px){ .purum-hero-dark__title{ font-size:46px; line-height:48px; } }
@media (max-width:600px){ .purum-hero-dark__title{ font-size:36px; line-height:40px; } }
.purum-hero-dark__title span{ color: var(--ice); }
.purum-hero-dark__lede{
  font-size:16px; line-height:26px; max-width:448px;
  color: rgba(251,250,247,.62); margin:0 0 2rem;
}
.purum-hero-dark__actions{ display:flex; gap:12px; flex-wrap:wrap; }
.purum-hero-dark__checks{
  list-style:none; display:flex; gap:1.5rem; flex-wrap:wrap; margin:2rem 0 0; padding:0;
}
.purum-hero-dark__checks li{
  font-family: var(--sans); font-size:13px; letter-spacing:0; text-transform:none;
  color: rgba(251,250,247,.55); display:flex; align-items:center; gap:.45rem;
}
.purum-hero-dark__checks li::before{ content:"✓"; color: var(--ice); font-size:13px; }

.purum-hero-dark__figure{ display:flex; justify-content:center; position:relative; }
.purum-hero-dark__panel{
  width:320px; height:420px; margin:0;
  border-radius:30px; overflow:hidden;
  background: rgba(251,250,247,.06);
  border:1px solid rgba(251,250,247,.09);
  display:flex; align-items:center; justify-content:center;
}
.purum-hero-dark__panel img{
  width:100%; height:100%; object-fit:contain !important;
  padding:26px; background:transparent;
}
.purum-hero-dark__badge{
  position:absolute; right:calc(50% - 200px); top:34px;
  display:flex; flex-direction:column; gap:2px;
  background: rgba(14,20,25,.92);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(251,250,247,.14); border-radius:14px;
  padding:10px 14px; text-decoration:none; min-width:132px;
}
@media (max-width:900px){ .purum-hero-dark__badge{ right:1rem; } }
.purum-hero-dark__badge-label{
  font-family: var(--mono); font-size:9px; letter-spacing:.18em;
  text-transform:uppercase; color: rgba(251,250,247,.5);
}
.purum-hero-dark__badge strong{
  font-family: var(--sans); font-weight:800; font-size:22px;
  letter-spacing:-.02em; color:#fff; line-height:1.1;
}
.purum-hero-dark__badge-link{
  font-family: var(--sans); font-size:10.5px; color: var(--ice); font-weight:600;
}

/* buttons: 48px, 14px/600, pill */
.purum-btn{ font-family: var(--sans); font-size:14px; font-weight:600; letter-spacing:0;
  text-transform:none; min-height:48px; padding:12px 24px; }

/* ── product cards: 275 wrap, r22, 275 square contain ────── */
.wp-block-woocommerce-product-collection .wp-block-post-template,
.wc-block-product-template{ gap:20px !important; }

.wc-block-product-template .wc-block-product{
  background: var(--wp--preset--color--surface);
  border:1px solid var(--hairline) !important;
  border-radius:22px; overflow:hidden; padding-bottom:16px;
  box-shadow:none;
}
.wc-block-product-template .wc-block-product:hover{
  transform:none; box-shadow:0 12px 28px -14px rgba(14,20,25,.18);
  border-color: var(--line) !important;
}
.wc-block-components-product-image{
  border:0; border-radius:0; background: var(--panel);
  border-bottom:1px solid var(--hairline);
}
.wc-block-components-product-image img,
.wc-block-product img{
  aspect-ratio:1; object-fit:contain !important; padding:9%;
  background: var(--panel);
}
.wc-block-product:hover .wc-block-components-product-image{ transform:none; box-shadow:none; }
.wc-block-product:hover .wc-block-components-product-image img{ transform:none; }

.purum-card__cat{
  margin:14px 16px 0; font-family: var(--sans); font-size:10px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color: var(--ice);
}
.wc-block-product .wp-block-post-title{
  font-size:14px; font-weight:700; letter-spacing:-.01em; line-height:1.35;
  margin:6px 16px 0; color: var(--ink);
}
.purum-card__desc{
  margin:6px 16px 0; font-size:12px; line-height:1.55; color: var(--mute);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.purum-card__assay{
  margin:6px 16px 0; font-family: var(--mono); font-size:10px;
  letter-spacing:.05em; text-transform:none; color: var(--mute);
}
.wc-block-product .wc-block-components-product-price{
  margin:10px 16px 0; font-family: var(--sans); font-size:16px; font-weight:800;
  letter-spacing:-.01em; color: var(--ink);
}
.wc-block-product .wc-block-components-product-button{
  display:grid !important; grid-template-columns:1fr 1fr; gap:8px;
  margin:14px 16px 0; padding:0;
}
.purum-buynow,.purum-addcart,
.wc-block-product .wc-block-components-product-button__button{
  min-height:34px !important; padding:8px 12px !important;
  font-family: var(--sans) !important; font-size:12px !important; font-weight:600 !important;
  letter-spacing:0 !important; text-transform:none !important;
  border-radius:9999px !important; width:auto !important;
}
.wc-block-product .purum-buynow{
  background: var(--ice); border:0; color:#fff;
}
.wc-block-product .purum-buynow:hover{ background: var(--wp--preset--color--ice-deep); }
.wc-block-product .wc-block-components-product-button__button{
  background:transparent !important; color: var(--ink) !important;
  border:1px solid var(--steel) !important;
}
.wc-block-product .wc-block-components-product-button__button:hover{
  border-color: var(--ink) !important;
}
.purum-badge{
  font-family: var(--sans); font-size:10px; font-weight:600;
  letter-spacing:.02em; padding:3px 10px; text-transform:none;
  top:12px; left:12px;
}
.purum-badge--featured{ background: var(--ink); color:#fff; }
.purum-badge--low{ background:#8A5A1B; color:#fff; border-color:transparent; }
.purum-badge--oos{ background: var(--slate); color:#fff; }

/* ── goals: centred 48px heading, iconed cards ───────────── */
.purum-goals{ background: var(--wp--preset--color--base); }
.purum-goals__inner{ padding-top:96px; padding-bottom:96px; text-align:center; }
.purum-eyebrow--center{ text-align:center; }
.purum-goals__title{
  font-family: var(--sans); font-size:48px; font-weight:800; letter-spacing:-.03em;
  line-height:1.1; color: var(--ink); margin:0 0 .85rem;
}
@media (max-width:800px){ .purum-goals__title{ font-size:34px; } }
.purum-goals__lede{
  font-size:16px; line-height:1.65; color: var(--mute);
  max-width:38rem; margin:0 auto 3rem;
}
.purum-goals__grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; text-align:left;
}
@media (max-width:900px){ .purum-goals__grid{ grid-template-columns:1fr; } }
.purum-goal{
  display:block; padding:28px; border-radius:16px;
  border:1px solid var(--hairline); background: var(--wp--preset--color--surface);
  text-decoration:none; transition:border-color .18s ease, box-shadow .18s ease;
}
.purum-goal:hover{ border-color: var(--steel); box-shadow:0 12px 28px -16px rgba(14,20,25,.16); }
.purum-goal__icon{
  display:flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:12px;
  background: var(--ice-tint); color: var(--ice); margin-bottom:1.15rem;
}
.purum-goal__icon svg{ width:28px; height:28px; }
.purum-goal__title{ font-size:18px; font-weight:700; letter-spacing:-.015em; color: var(--ink); margin:0 0 .5rem; }
.purum-goal__copy{ font-size:14px; line-height:1.6; color: var(--mute); margin:0 0 1.1rem; }
.purum-goal__link{ font-size:14px; font-weight:500; color: var(--ice); }

/* ── protocols band: 24px radius, slate, 56/40 padding ───── */
.purum-proto{
  max-width:1216px; border-radius:24px; padding:56px 40px;
  background: var(--slate); color: rgba(201,205,210,.75);
}
@media (max-width:760px){ .purum-proto{ padding:32px 24px; } }
.purum-proto__title{ font-size:36px !important; font-weight:800; letter-spacing:-.03em; color:#fff; }
@media (max-width:800px){ .purum-proto__title{ font-size:28px !important; } }
.purum-proto__lede{ font-size:15px; color: rgba(201,205,210,.7); }
.purum-bundles{ grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:20px; }
.purum-bcard{
  background: rgba(251,250,247,.05); border:1px solid rgba(251,250,247,.1);
  border-radius:18px;
}
.purum-bcard__media{ aspect-ratio:16/11; background: var(--panel); }
.purum-bcard__media img{ object-fit:contain !important; padding:8%; }
.purum-bcard__name{ font-size:16px; font-weight:700; }
.purum-bcard__desc{ font-size:12.5px; }
.purum-bcard__price{ font-family: var(--sans); font-size:18px; font-weight:800; }
.purum-bcard__save{ font-family: var(--sans); font-size:11.5px; letter-spacing:0; text-transform:none; color: var(--ice); }
.purum-bcard__off{
  font-family: var(--sans); font-size:10px; font-weight:700; letter-spacing:.02em;
  text-transform:none; background: var(--ice); border:0; color:#fff;
}

/* ── lab band: 96px, 48px heading ────────────────────────── */
.purum-lab{ background: var(--ink); color: rgba(201,205,210,.75); }
.purum-lab__inner{
  padding-top:96px; padding-bottom:96px;
  display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center;
}
@media (max-width:900px){ .purum-lab__inner{ grid-template-columns:1fr; padding-top:56px; padding-bottom:56px; gap:40px; } }
.purum-lab__title{ font-size:48px !important; font-weight:800; letter-spacing:-.03em; line-height:1.08; color:#fff; }
@media (max-width:900px){ .purum-lab__title{ font-size:32px !important; } }
.purum-lab__lede{ font-size:15px; line-height:1.7; color: rgba(201,205,210,.65); }
.purum-lab__stats .purum-stat__figure{ font-size:38px; }
.purum-lab__stats .purum-stat__label{ font-size:10.5px; }

/* ── contact duo + section headings elsewhere ────────────── */
h2.wp-block-heading{ font-size:36px !important; font-weight:800 !important; letter-spacing:-.03em; }
@media (max-width:800px){ h2.wp-block-heading{ font-size:28px !important; } }

/* PLP + PDP headings to their scale */
.purum-pdp .wp-block-post-title{ font-size:30px; line-height:36px; font-weight:700; }
.purum-pdp .price,.purum-pdp .wc-block-components-product-price{ font-size:30px; font-weight:700; }

/* ═══════════════════════════════════════════════════════════════════
   v0.10 — photography fit.
   Our vials carry a black label, so they need a LIGHT ground to read.
   The reference uses silver-on-dark; the inverse is true here, so the
   hero panel flips to the warm panel colour rather than dark-on-dark.
   ═══════════════════════════════════════════════════════════════════ */

.purum-hero-dark__panel{
  background: var(--panel);
  border:1px solid rgba(251,250,247,.14);
}
.purum-hero-dark__panel img{ padding:18px; }

/* badge sits inside the panel, bottom-right */
.purum-hero-dark__figure{ position:relative; }
.purum-hero-dark__badge{
  right:auto; left:50%; top:auto; bottom:22px;
  transform:translateX(76px);
  background: rgba(14,20,25,.94);
}
@media (max-width:900px){
  .purum-hero-dark__badge{ left:auto; right:1.25rem; transform:none; }
}

/* vials fill their frame properly */
.wc-block-components-product-image img,
.wc-block-product img{ padding:5%; }
.purum-rcard__media img{ padding:6%; }
.purum-bcard__media img{ padding:5%; }
.purum-pdp__gallery img{ padding:6%; }

/* ═══════════════════════════════════════════════════════════════════
   v0.11 — hero badge inside the panel, marquee restored.
   ═══════════════════════════════════════════════════════════════════ */

.purum-hero-dark__figure{
  position:relative; width:320px; margin:0 auto;
}
@media (max-width:900px){ .purum-hero-dark__figure{ width:100%; max-width:320px; } }
.purum-hero-dark__panel{ width:100%; }
.purum-hero-dark__badge{
  position:absolute; left:auto; right:14px; top:14px; bottom:auto;
  transform:none; min-width:0; padding:9px 12px;
  background: rgba(14,20,25,.9);
  border:1px solid rgba(251,250,247,.16);
}
.purum-hero-dark__badge strong{ font-size:19px; }
.purum-hero-dark__badge-link{ font-size:9.5px; }

/* marquee sits directly under the dark hero */
.purum-marquee{ border-top:0; }

/* ═══════════════════════════════════════════════════════════════════
   v0.12 — badge sizing and consumable art.
   ═══════════════════════════════════════════════════════════════════ */

/* the low-stock badge stretched full width: pin it to content size */
.purum-badge{
  width:auto; max-width:calc(100% - 24px);
  white-space:nowrap;
}
.purum-badge--low{ background:#8A5A1B; }
.purum-badge--right{ left:auto; right:12px; }

/* consumables use the drawn SVG, which needs less inset than a photo */
.wc-block-components-product-image img[src$=".svg"],
.purum-rcard__media img[src$=".svg"],
.purum-bcard__media img[src$=".svg"]{ padding:12%; }

/* badge clears the vial: bottom-left of the panel */
.purum-hero-dark__badge{
  right:auto; left:14px; top:auto; bottom:14px;
}

/* ═══════════════════════════════════════════════════════════════════
   v0.13 — review pass.

   Vertical rhythm at the top of the page, a legible scale in the
   sections that had shrunk below it, and a second and third colour
   so the page is not carried by ink alone.

   The colour system now has three registers, and they never mix:

     Ice     #3E7A92   brand accent. Still one use per view.
     Amber   #B26B18   merchandising. Ranking and scarcity-of-fact.
     Green   #2C6E52   availability. Never persuasion.

   Amber and green say what is true about a product. Ice says this is
   Purum. Keeping them apart is what stops the page reading as a
   template with a palette dropped on it.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --amber: #B26B18;
  --amber-tint: #FBF1E2;
  --green: #2C6E52;
  --green-tint: #E7F1EC;
}

/* ── top of page: announcement and header ────────────────── */
/* The bar was a 38px sliver of 9px type under a 130px band of empty
   warm white. Both are now sized to the content they hold. */
.purum-announce{
  font-size:12.5px; letter-spacing:.08em; text-transform:none;
  font-family: var(--sans); font-weight:400;
  padding:11px 1rem; min-height:0;
  color: rgba(251,250,247,.82);
}
.purum-announce a{ color:#fff; }
@media (max-width:700px){ .purum-announce{ font-size:11.5px; padding:9px 1rem; } }

header.purum-header{ padding:.7rem 1rem; }
@media (max-width:700px){ header.purum-header{ padding:.55rem .75rem; } }

/* ── hero ─────────────────────────────────────────────────── */
/* Tighter top, and the figure column takes back the width the copy
   column did not need. */
.purum-hero-dark__inner{
  grid-template-columns:1fr .92fr; gap:3.5rem;
  padding-top:52px; padding-bottom:72px;
}
@media (max-width:900px){
  .purum-hero-dark__inner{ grid-template-columns:1fr; padding-top:40px; padding-bottom:52px; gap:2.5rem; }
}
.purum-hero-dark__panel img{ padding:10px; }

/* Sentence case. Uppercase on a checklist reads as shouting, and it was
   the thing that made these three unreadable at 9px. */
.purum-hero-dark__checks{ gap:1.5rem 2rem; margin-top:2rem; }
.purum-hero-dark__checks li{
  font-family: var(--sans); font-size:14.5px; font-weight:400;
  letter-spacing:0; text-transform:none;
  color: rgba(251,250,247,.72);
}
.purum-hero-dark__checks li::before{ font-size:.9rem; }

.purum-hero-dark__badge{ padding:.8rem 1.1rem; }
.purum-hero-dark__badge span{ font-size:.5625rem; }

/* ── buttons: less air above and below ───────────────────── */
.purum-btn{
  min-height:46px; padding:11px 26px;
  font-size:12.5px; letter-spacing:.12em;
}
@media (max-width:700px){ .purum-btn{ min-height:44px; padding:10px 22px; } }

/* ── trust marquee ───────────────────────────────────────── */
/* Spacing moved off the track and onto the items: a flex gap sits
   between the two copies without belonging to either, so translating
   half the track landed mid-gap and the row jumped every cycle. */
.purum-marquee{ padding:14px 0; }
.purum-marquee__track{ gap:0; }
.purum-marquee span{
  font-family: var(--sans); font-size:13px; font-weight:400;
  letter-spacing:.01em; text-transform:none;
  color: var(--wp--preset--color--body-text);
  margin-right:3.25rem; gap:.65rem;
}
.purum-marquee span::before{
  width:5px; height:5px; border-radius:50%; background: var(--steel);
}
@media (max-width:700px){
  .purum-marquee{ padding:11px 0; }
  .purum-marquee span{ font-size:12px; margin-right:2.25rem; }
}

/* ── badges ──────────────────────────────────────────────── */
.purum-badge{
  display:inline-flex; align-items:center; gap:.34rem;
  font-family: var(--sans); font-size:11.5px; font-weight:600;
  letter-spacing:.01em; text-transform:none;
  padding:.4rem .7rem; border-radius:var(--r-full);
  border:0;
}
.purum-badge--popular{ background: var(--amber); color:#fff; }
.purum-badge__flame{ width:12px; height:12px; fill:currentColor; flex:none; }
.purum-badge--low{ background: var(--amber-tint); color: var(--amber); }
.purum-badge--stock{ background: var(--green-tint); color: var(--green); }
.purum-badge--oos{ background: var(--ink); color:#fff; }
.purum-rail .purum-badge--popular{ display:inline-flex; }

/* ── shop by goal ────────────────────────────────────────── */
.purum-goal__icon{ background: var(--ice-tint); color: var(--ice); }
.purum-goal__link{ font-size:14px; }

/* ── independent lab testing ─────────────────────────────── */
/* Everything in this band had drifted to 10 and 11px, which is why the
   verify cards could not be read at arm's length. */
.purum-lab__stats{ gap:2.75rem; }
.purum-lab__stats .purum-stat__label{ font-size:12px; letter-spacing:.12em; }
.purum-ccard{ padding:1.15rem 1.35rem; }
.purum-ccard__batch{ font-size:12px; letter-spacing:.14em; }
.purum-ccard__name{ font-size:17.5px; margin-top:.25rem; }
.purum-ccard__data{ font-size:14px; margin-top:.5rem; }
.purum-ccard__data dt{ font-size:11px; letter-spacing:.13em; }
.purum-ccard__verify{ font-size:12.5px; letter-spacing:.11em; }

/* ── verification / talk to us ───────────────────────────── */
/* Two cards that say the same kind of thing should be set the same
   way. They were not: different heading sizes, different body sizes,
   and buttons that ended up different widths. */
.purum-duo{ align-items:stretch; }
.purum-duo__card{
  display:flex; flex-direction:column;
  padding:2rem 2rem 1.85rem;
}
.purum-duo__card h3{ font-size:1.5rem !important; line-height:1.2; margin:0 0 .65rem; }
@media (max-width:800px){ .purum-duo__card h3{ font-size:1.3rem !important; } }
.purum-duo__card p{
  font-size:15.5px; line-height:1.68; max-width:30rem;
  margin:0 0 1.6rem; flex:1 1 auto;
}
.purum-duo__card .purum-btn{ align-self:flex-start; }

/* ── PDP: availability, and colour on the cross-sell ─────── */
.purum-stockline{
  display:inline-flex; align-items:center; gap:.5rem;
  margin:.9rem 0 .2rem; padding:.42rem .85rem .42rem .7rem;
  border-radius: var(--r-full);
  font-family: var(--sans); font-size:13.5px; font-weight:600;
  letter-spacing:.005em;
}
.purum-stockline__dot{ width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
.purum-stockline__sub{
  font-weight:400; opacity:.72;
  padding-left:.55rem; margin-left:.15rem;
  border-left:1px solid currentColor;
}
.purum-stockline--in{ background: var(--green-tint); color: var(--green); }
.purum-stockline--low{ background: var(--amber-tint); color: var(--amber); }
.purum-stockline--out{ background: rgba(14,20,25,.06); color: var(--ink); }

/* The bundle swap is the one offer on the page worth interrupting for, so it
   is the one that carries the amber. Consumable top-ups stay quiet. */
.purum-upsell--bundle{
  border:1px solid rgba(178,107,24,.28);
  background: var(--amber-tint);
  border-radius: var(--r-2xl);
}
.purum-upsell--bundle .purum-upsell__name{ color: var(--amber); font-weight:700; }
.purum-upsell--bundle .purum-upsell__action{
  background: var(--amber); color:#fff; border-color: var(--amber);
}
.purum-upsell--bundle .purum-upsell__action:hover{ background:#96590F; border-color:#96590F; }

/* The PDP marquee is a claims strip, not a section: keep it thin. */
.purum-pdp-marquee-slot .purum-marquee{ padding:10px 0; }

/* ── v0.13a — corrections from the measured pass ─────────── */

/* Buttons were 70px tall, not 46: the label was wrapping to two lines inside
   them. That, not the padding, is why no two buttons matched. */
.purum-btn{ white-space:nowrap; }

/* The duo card rule was sizing the eyebrow too, since the eyebrow is also a
   <p>. It had grown from a 10px mono label to 15.5px body text. */
.purum-duo__card .purum-eyebrow{
  font-family: var(--mono); font-size:11px; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase;
  color: var(--mute); line-height:1.4; margin:0 0 .85rem;
}

/* Badge rail: one positioned row, so a card carrying two flags lays them out
   instead of stacking one on the other. */
.purum-badges{
  position:absolute; top:.85rem; left:.85rem; right:.85rem; z-index:3;
  display:flex; flex-wrap:wrap; gap:.4rem; pointer-events:none;
}
.purum-badges .purum-badge{
  position:static; top:auto; left:auto; right:auto;
  box-shadow:0 1px 2px rgba(14,20,25,.06);
}
.purum-badges .purum-badge--stock,
.purum-badges .purum-badge--low,
.purum-badges .purum-badge--oos{ margin-left:auto; }

/* Three claims, one line. */
.purum-hero-dark__checks{ gap:1.35rem 1.6rem; }
.purum-hero-dark__checks li{ font-size:13.5px; }
@media (max-width:1100px){ .purum-hero-dark__checks li{ font-size:13px; } }

/* The buttons were computing to 70px against a 46px min-height because they
   inherited content-box: the minimum applied to the content, then padding and
   border were added on top of it. Any two buttons with different padding
   therefore ended up different heights, which is exactly what they did. */
.purum-btn{ box-sizing:border-box; }

/* ── PDP bundle cross-sell ───────────────────────────────── */
/* The single highest-value offer on the page. It carries the amber, the
   packshot of what is actually being offered, and the saving as a number. */
.purum-crosssell{
  display:flex; align-items:center; gap:1rem;
  margin:1.4rem 0 0; padding:.9rem 1.1rem .9rem .9rem;
  border:1px solid rgba(178,107,24,.3);
  background: var(--amber-tint);
  border-radius: var(--r-2xl);
  text-decoration:none;
  transition: border-color .18s ease, background .18s ease;
}
.purum-crosssell:hover{ border-color: rgba(178,107,24,.55); background:#F8E9D3; }
.purum-crosssell__media{
  flex:none; width:92px; height:69px;
  background:#fff; border-radius:12px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.purum-crosssell__media img{ width:100%; height:100%; object-fit:contain; padding:6px; box-sizing:border-box; }
.purum-crosssell__body{ display:flex; flex-direction:column; gap:.15rem; min-width:0; flex:1 1 auto; }
.purum-crosssell__label{
  align-self:flex-start;
  font-family: var(--sans); font-size:10.5px; font-weight:700;
  letter-spacing:.02em; text-transform:uppercase;
  background: var(--amber); color:#fff;
  padding:.2rem .45rem; border-radius:5px; margin-bottom:.15rem;
}
.purum-crosssell__name{
  font-family: var(--sans); font-size:16px; font-weight:700;
  letter-spacing:-.015em; color: var(--ink); line-height:1.25;
}
.purum-crosssell__meta{
  font-family: var(--sans); font-size:12.5px; font-weight:400;
  color: #8A6B45; line-height:1.4;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.purum-crosssell__cta{
  flex:none; align-self:center; white-space:nowrap;
  font-family: var(--sans); font-size:12.5px; font-weight:700;
  color: var(--amber);
}
@media (max-width:520px){
  .purum-crosssell{ flex-wrap:wrap; }
  .purum-crosssell__cta{ width:100%; padding-top:.25rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   v0.14 — second review pass.
   ═══════════════════════════════════════════════════════════════════ */

/* ── shop by goal: the card is the control ───────────────── */
/* The link at the foot of each card was plain blue text doing the work of a
   button. The whole card is clickable, so the card gets the affordance: it
   lifts, the icon fills with the accent, and the arrow moves. */
.purum-goal{
  position:relative; display:flex; flex-direction:column;
  padding:1.75rem 1.6rem 1.5rem;
  border:1px solid var(--line); border-radius: var(--r-2xl);
  background: var(--wp--preset--color--surface);
  text-decoration:none;
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease, border-color .22s ease;
}
.purum-goal:hover{
  transform:translateY(-3px);
  border-color: rgba(62,122,146,.35);
  box-shadow:0 18px 40px -22px rgba(14,20,25,.3);
}
.purum-goal__icon{
  width:46px; height:46px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background: var(--ice-tint); color: var(--ice);
  transition: background .22s ease, color .22s ease;
}
.purum-goal__icon svg{ width:22px; height:22px; }
.purum-goal:hover .purum-goal__icon{ background: var(--ice); color:#fff; }
.purum-goal__title{ margin:1.15rem 0 .45rem; font-size:1.0625rem; font-weight:700; letter-spacing:-.02em; }
.purum-goal__copy{ flex:1 1 auto; margin:0 0 1.25rem; font-size:14.5px; line-height:1.62; }
.purum-goal__link{
  display:inline-flex; align-items:center; gap:.4rem; align-self:flex-start;
  font-family: var(--sans); font-size:13px; font-weight:700; letter-spacing:.01em;
  color: var(--ice);
  padding:.5rem .95rem; border-radius: var(--r-full);
  background: var(--ice-tint);
  transition: background .22s ease, color .22s ease, gap .22s ease;
}
.purum-goal:hover .purum-goal__link{ background: var(--ice); color:#fff; gap:.65rem; }

/* ── protocols: the saving has to be readable on ink ─────── */
/* Ice at 11.5px on a near-black panel was under 3:1. Amber tint carries the
   same "this is money" meaning as the badge and actually reads. */
.purum-bcard__save{ color:#E9B872; font-size:12.5px; font-weight:600; }
.purum-bcard__off{ background: var(--amber); }

/* ── lab cards: labels and values on a grid ──────────────── */
/* These were inline text, so the gap between each label and its value came
   from whitespace and drifted card to card. A grid pins the columns, and
   because every card carries the same two labels they line up across all
   three. */
.purum-ccard__data{
  display:grid; grid-template-columns:max-content max-content max-content max-content;
  align-items:baseline; column-gap:.7rem; row-gap:.2rem;
}
.purum-ccard__data dt{ display:block; margin:0; }
.purum-ccard__data dd{ display:block; margin:0; font-variant-numeric:tabular-nums; }
.purum-ccard__data dt + dd{ margin-right:1.5rem; }
@media (max-width:520px){
  .purum-ccard__data{ grid-template-columns:max-content max-content; }
  .purum-ccard__data dt + dd{ margin-right:0; }
}

/* ── availability: green that actually reads as green ────── */
.purum-badge--stock{
  background:#E2F5EA; color:#1E7A4C;
  box-shadow:inset 0 0 0 1px rgba(30,122,76,.18);
}
.purum-stockline--in{
  background:#E2F5EA; color:#1E7A4C;
  box-shadow:inset 0 0 0 1px rgba(30,122,76,.2);
}

/* ── price in the body face, not mono ────────────────────── */
/* Mono is the data register in the brand brief, and a price is data. On the
   page it read as a spec figure rather than the number you pay, so it moves
   to the body face at the weight the rest of the type uses. */
.purum-pdp .price,
.purum-pdp .wc-block-components-product-price,
.wc-block-product .wc-block-components-product-price,
.purum-schedule__row .purum-schedule__price,
.purum-bcard__price{
  font-family: var(--sans) !important;
  font-weight:700; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.purum-pdp .price,
.purum-pdp .wc-block-components-product-price{ font-size:32px; }

/* ── quantity stepper ────────────────────────────────────── */
.purum-qty{
  display:inline-flex; align-items:stretch;
  border:1px solid var(--line); border-radius: var(--r-full);
  background: var(--wp--preset--color--surface);
  overflow:hidden; height:52px;
}
.purum-qty__step{
  width:44px; flex:none; border:0; background:transparent; cursor:pointer;
  font-family: var(--sans); font-size:19px; font-weight:500; line-height:1;
  color: var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition: background .16s ease, color .16s ease;
}
.purum-qty__step:hover:not(:disabled){ background: var(--ice-tint); color: var(--ice); }
.purum-qty__step:disabled{ color: var(--steel); cursor:default; }
.purum-qty__step:focus-visible{ outline:2px solid var(--ice); outline-offset:-2px; }
.purum-qty input.qty{
  width:52px !important; min-width:0; flex:none;
  border:0 !important; background:transparent !important;
  text-align:center; padding:0 !important; height:auto !important;
  font-family: var(--sans); font-size:16px; font-weight:600;
  font-variant-numeric:tabular-nums; color: var(--ink);
  -moz-appearance:textfield;
}
.purum-qty input.qty::-webkit-outer-spin-button,
.purum-qty input.qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.purum-qty input.qty:focus{ outline:none; }
.purum-qty:focus-within{ border-color: var(--ice); }

/* ── related products: a real width, not a skinny rail ───── */
.purum-related{ padding:2rem 2.25rem 2.25rem; }
.purum-related__grid{ gap:22px; }
.purum-related__grid .purum-rcard__media{ aspect-ratio:1; }
.purum-related__title{ font-size:1.6rem !important; }
@media (max-width:760px){ .purum-related{ padding:1.5rem 1.25rem; } }

/* ── delivery and handling: room to breathe ──────────────── */
.purum-local{ padding:2.25rem 2.25rem 2.4rem; }
.purum-local__title{ font-size:1.6rem !important; margin:0 0 1.9rem; }
.purum-local__cols{ grid-template-columns:1fr 1fr; gap:3.25rem; }
@media (max-width:860px){ .purum-local__cols{ grid-template-columns:1fr; gap:2.25rem; } }
.purum-local .purum-buy-label{ margin:0 0 1rem; }
.purum-chips{ display:flex; flex-wrap:wrap; gap:.55rem; }
.purum-chip-pill{
  font-family: var(--sans); font-size:13px; font-weight:500;
  letter-spacing:0; text-transform:none;
  padding:.5rem .95rem; border-radius: var(--r-full);
  background: var(--panel); color: var(--wp--preset--color--body-text);
  border:1px solid var(--hairline);
}
.purum-local .purum-ticks{ display:flex; flex-direction:column; gap:.85rem; margin:0; padding:0; }
.purum-local .purum-ticks li{ font-size:14.5px; line-height:1.6; }
@media (max-width:760px){ .purum-local{ padding:1.6rem 1.25rem 1.75rem; } }

/* Woo nests the figure in .woocommerce-Price-amount inside the price block, and
   that inner span is where the mono was set. Styling the wrapper alone left the
   number untouched. */
.purum-pdp .woocommerce-Price-amount,
.wc-block-product .woocommerce-Price-amount,
.purum-rcard .woocommerce-Price-amount,
.purum-bcard .woocommerce-Price-amount,
.wc-block-components-product-price .woocommerce-Price-amount{
  font-family: var(--sans) !important;
  font-weight:700; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}

/* Related products and Delivery sat at content width, 768px, while the
   disclosure sections above them ran the full 1280. They are injected into a
   constrained group, whose layout rule caps every child at contentSize. The
   :where() that rule uses carries no specificity, so naming them here is
   enough to widen them. */
.purum-pdp .purum-related,
.purum-pdp .purum-local,
.purum-pdp .purum-certificate{
  max-width: var(--wp--style--global--wide-size, 1280px);
  width:100%;
  margin-left:auto; margin-right:auto;
}

/* Related-product cards were falling back to the base ink button while the
   same action on the shop grid is ice. Two colours for one action across two
   grids is just an inconsistency. Ice is the primary here, ink stays for
   navigation like Shop now. Now that the block is full width the pair also
   fits on one row. */
.purum-rcard__actions{ flex-direction:row; gap:.5rem; margin:.9rem 1rem 1.1rem; }
.purum-rcard__actions > *{ flex:1 1 0; min-width:0; }
.purum-rcard__actions .purum-buynow{
  background: var(--ice); border:1px solid var(--ice); color:#fff;
}
.purum-rcard__actions .purum-buynow:hover{
  background: var(--wp--preset--color--ice-deep); border-color: var(--wp--preset--color--ice-deep);
}
.purum-rcard__actions .purum-addcart{
  background:transparent; color: var(--ink); border:1px solid var(--steel);
}
.purum-rcard__actions .purum-addcart:hover{ border-color: var(--ink); }
@media (max-width:1000px){ .purum-rcard__actions{ flex-direction:column; } }

/* ═══════════════════════════════════════════════════════════════════
   v0.15 — mobile.

   Three classes of problem, all measured rather than eyeballed:
   the box model, tap targets, and a type floor.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1 · box model ───────────────────────────────────────── */
/* Our components inherited content-box, so `width:100%` plus padding came out
   wider than the parent. It cost 70px-tall buttons once and 40px of horizontal
   page scroll on every product page. Fixing it per-case twice was enough;
   every Purum component is border-box from here.

   Scoped to our own class prefix on purpose. A blanket reset would also
   re-measure every WordPress and WooCommerce block, which are laid out against
   their own assumptions. */
[class^="purum-"],
[class*=" purum-"],
[class^="purum-"]::before,
[class^="purum-"]::after{
  box-sizing:border-box;
}

/* Nothing may exceed its container, whatever it is. */
.purum-pdp .purum-related,
.purum-pdp .purum-local,
.purum-pdp .purum-certificate{ max-width:min(var(--wp--style--global--wide-size, 1280px), 100%); }

img, svg, video{ max-width:100%; height:auto; }

/* ── 2 · tap targets ─────────────────────────────────────── */
/* Anything a thumb has to hit gets 44px, which is the smallest target that is
   reliably hittable. The hamburger was 24px and the cart 36px, which is the
   difference between a menu that opens and one that feels broken. */
/* Size only. WordPress hides these above its own overlay breakpoint, and an
   unconditional `display:flex !important` here overrode that, putting a
   hamburger and a stray close button on the desktop header. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close{
  min-width:44px; min-height:44px;
  align-items:center; justify-content:center;
}
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg{ width:24px; height:24px; }

/* Only where the overlay menu is actually in play. */
@media (max-width:599px){
  .wp-block-navigation__responsive-container-open:not(.wp-block-navigation__responsive-container-open--hidden),
  .wp-block-navigation__responsive-container-close{
    display:flex;
  }
}

.wc-block-mini-cart__button{
  min-width:44px !important; min-height:44px !important;
  display:flex !important; align-items:center; justify-content:center;
}

.purum-lockup{ min-height:44px; align-items:center; }

/* Text links that act as buttons get a real hit area rather than the height of
   their own line box. */
.purum-related__all,
.purum-proto__all,
.purum-goal__link,
.purum-ccard__verify,
.purum-crosssell__cta{
  display:inline-flex; align-items:center;
  min-height:44px;
}
.purum-related__head .purum-related__all{ padding-left:.5rem; }

/* Card titles are small text links sitting on top of a large image link to the
   same place. Padding the line gives the title itself a usable target too. */
.purum-card__name a,
.purum-rcard__name a,
.wc-block-product .wp-block-post-title a{
  display:inline-block; padding-block:.35rem;
}

/* ── 3 · type floor ──────────────────────────────────────── */
/* Uppercase mono at 9 and 10px is a label on a desktop monitor and a smudge on
   a phone. Nothing that carries meaning goes below 11px on mobile, and nothing
   read as prose goes below 13px. */
@media (max-width:900px){
  .purum-hero-dark__badge-label,
  .purum-hero-dark__badge-link{ font-size:11px !important; letter-spacing:.12em; }
  .purum-hero-dark__badge strong{ font-size:1.3rem; }

  .purum-card__cat,
  .purum-card__assay{ font-size:11.5px !important; letter-spacing:.06em; }

  .purum-bcard__off,
  .purum-schedule__off,
  .purum-crosssell__label{ font-size:11px !important; }

  .purum-eyebrow,
  .purum-buy-label{ font-size:11.5px !important; letter-spacing:.14em; }

  .purum-badge{ font-size:12px; padding:.42rem .75rem; }
  .purum-ccard__data dt,
  .purum-certificate__data dt{ font-size:11px !important; }
  .purum-bundle__anchor{ font-size:12.5px !important; }
}

/* Woo renders the currency symbol a size down from its own amount, so the cart
   showed a $ smaller than the number beside it. */
.woocommerce-Price-currencySymbol{ font-size:inherit !important; }

/* ── 4 · layout at tablet ────────────────────────────────── */
@media (max-width:900px){
  /* Two-up rather than four, with room for the card to be a card. */
  .purum-related__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  .purum-rail .wp-block-post-template,
  .purum-rail.wc-block-product-template,
  .purum-rail .wc-block-product-template{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:16px !important;
  }
  .purum-bundles{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .purum-goals__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }

  .purum-pdp .wp-block-columns{ gap:2rem !important; }
}

/* ── 5 · layout on a phone ───────────────────────────────── */
@media (max-width:700px){
  /* One column everywhere. Two 160px cards side by side is not a product
     grid, it is two thumbnails. */
  .purum-related__grid,
  .purum-bundles,
  .purum-goals__grid{ grid-template-columns:1fr !important; gap:14px; }
  .purum-rail .wp-block-post-template,
  .purum-rail.wc-block-product-template,
  .purum-rail .wc-block-product-template{
    grid-template-columns:1fr !important; gap:14px !important;
  }

  /* Section rhythm: the desktop scale leaves a phone scrolling through air. */
  .purum-goals__inner,
  .purum-lab__inner,
  .purum-proto__inner{ padding-top:44px !important; padding-bottom:44px !important; }
  .purum-goals__title,
  .purum-lab__title,
  .purum-proto__title{ font-size:28px !important; }
  .purum-goals__lede,
  .purum-lab__lede,
  .purum-proto__lede{ font-size:15px !important; }

  /* Hero: the panel is the second thing seen, not a column beside the copy. */
  .purum-hero-dark__inner{ padding:32px 1.25rem 40px; gap:2rem; }
  .purum-hero-dark__title{ font-size:clamp(2.2rem,10vw,2.9rem) !important; }
  .purum-hero-dark__lede{ font-size:15.5px; margin-bottom:1.5rem; }
  .purum-hero-dark__checks{ gap:.85rem 1.25rem; margin-top:1.6rem; }
  .purum-hero-dark__checks li{ font-size:13.5px; }
  .purum-hero-dark__actions .purum-btn{ flex:1 1 auto; justify-content:center; }
  .purum-hero-dark__panel img{ padding:14px; }
  .purum-hero-dark__badge{ left:12px; bottom:12px; padding:.6rem .8rem; }

  /* Buy column: full-width controls, stepper above the button. */
  .purum-pdp form.cart{ display:flex; flex-direction:column; gap:.75rem; align-items:stretch; }
  .purum-qty{ width:100%; justify-content:space-between; height:52px; }
  .purum-qty__step{ width:56px; }
  .purum-qty input.qty{ flex:1 1 auto; width:auto !important; }
  .purum-pdp .single_add_to_cart_button,
  .purum-pdp button.single_add_to_cart_button{ width:100% !important; justify-content:center; }

  /* Price schedule: two columns of tiles is tight but readable; one is clearer. */
  .purum-schedule__rows{ grid-template-columns:1fr !important; }
  .purum-schedule__row{ display:flex; align-items:baseline; justify-content:space-between; gap:.75rem; }

  /* Cross-sell stacks, and the CTA becomes a full-width row. */
  .purum-crosssell{ flex-wrap:wrap; gap:.85rem; padding:.85rem; }
  .purum-crosssell__media{ width:76px; height:58px; }
  .purum-crosssell__body{ flex:1 1 55%; }
  .purum-crosssell__cta{ width:100%; justify-content:center; min-height:44px; }

  /* Certificate cards: batch, name and data stack rather than compete. */
  .purum-ccard{ padding:1rem 1.1rem; }
  .purum-ccard__verify{ margin-top:.5rem; }

  /* Delivery, related and the duo: consistent inset. */
  .purum-related,
  .purum-local,
  .purum-duo__card{ padding:1.4rem 1.15rem 1.5rem; }
  .purum-related__head{ flex-wrap:wrap; gap:.25rem; }
  .purum-local__title,
  .purum-related__title,
  .purum-duo__card h3{ font-size:1.35rem !important; }
  .purum-duo{ grid-template-columns:1fr; gap:14px; }
  .purum-duo__card .purum-btn{ align-self:stretch; }

  /* Footer columns stack instead of squeezing to four. */
  .purum-footer-dark .wp-block-columns{ gap:1.75rem !important; }
}

/* ── 6 · very narrow ─────────────────────────────────────── */
@media (max-width:400px){
  .purum-hero-dark__inner,
  .purum-goals__inner,
  .purum-lab__inner{ padding-left:1rem !important; padding-right:1rem !important; }
  .purum-btn{ padding:10px 18px; font-size:12px; }
  .purum-hero-dark__actions{ gap:.6rem; }
  .purum-crosssell__meta{ white-space:normal; }
}

/* ── 7 · the gate on a phone ─────────────────────────────── */
@media (max-width:520px){
  .purum-gate{ padding:1rem; align-items:flex-start; }
  .purum-gate__card{ margin:auto 0; padding:1.9rem 1.35rem 1.5rem; }
  .purum-gate__title{ font-size:1.25rem; }
  .purum-gate__actions{ gap:.65rem; }
  .purum-gate__btn{ flex:1 1 0; min-width:0; min-height:48px; }
  .purum-gate__fine{ font-size:12.5px; }
}

/* ── 8 · tap targets, second pass ────────────────────────── */
/* The card buttons were tuned for a dense desktop grid and carried 34 and 38px
   minimums with !important. On a phone the grid is one column, so there is
   room to give them the full 44. */
@media (max-width:900px){
  .purum-rcard__actions .purum-buynow,
  .purum-rcard__actions .purum-addcart,
  .purum-card__actions .purum-buynow,
  .purum-card__actions .purum-addcart,
  .wc-block-product .purum-buynow,
  .wc-block-product .wc-block-components-product-button__button,
  .wc-block-product .wp-block-button__link{
    min-height:44px !important;
    font-size:14px !important;
    padding:10px 16px !important;
  }

  /* Nav items sat at 39px, one pixel under the line. */
  .wp-block-navigation-item__content{
    min-height:44px; display:inline-flex !important; align-items:center;
  }

  /* Announcement link: at 360 it wrapped to a 16px-tall two-line target. */
  .purum-announce{ line-height:1.5; }
  .purum-announce a{ display:inline-block; padding-block:.3rem; }

  /* Trailing "View all" style links. */
  .purum-rail__all,
  .wp-block-group .purum-viewall,
  .purum-section__more,
  a[href$="/shop/"].purum-morelink{ min-height:44px; display:inline-flex; align-items:center; }

  /* Card titles: pad the hit box, pull the visual position back so the card
     rhythm does not change. */
  .purum-card__name a,
  .purum-rcard__name a,
  .purum-bcard__name a,
  .wc-block-product .wp-block-post-title a{
    display:block;
    padding-block:.72rem;
    margin-block:-.4rem;
  }
}

/* Any bare inline link sitting alone as a section action. */
@media (max-width:900px){
  .purum-goals__inner > a,
  .purum-rail-head a,
  .purum-head__all{ min-height:44px; display:inline-flex; align-items:center; }
}

/* ── 9 · type floor, second pass ─────────────────────────── */
@media (max-width:900px){
  .purum-gate__eyebrow{ font-size:11px; }
  .purum-bcard__off,
  .purum-schedule__off,
  .purum-crosssell__label{ font-size:11.5px !important; }
  .purum-ccard__data dt,
  .purum-certificate__data dt{ font-size:11.5px !important; }
}

/* Woo sets the currency symbol a step down inside its own money component as
   well as on the classic price, so both paths need saying. */
.woocommerce-Price-currencySymbol,
.wc-block-components-formatted-money-amount .woocommerce-Price-currencySymbol,
.wc-block-formatted-money-amount{ font-size:inherit !important; }

/* ── 10 · final mobile corrections ───────────────────────── */

/* The section's "View all" was a bare anchor in a paragraph with no class of
   its own, so nothing could give it a hit area. */
.purum-headlink{ margin:0; }
.purum-headlink__a{ display:inline-flex; align-items:center; }
@media (max-width:900px){
  .purum-headlink__a{ min-height:44px; }
  /* The announcement link is real navigation, so it gets a real target even
     though that makes the bar taller on a phone. */
  .purum-announce a{ min-height:44px; display:inline-flex; align-items:center; padding-inline:.15rem; }
  .purum-announce{ padding-block:2px; }
}

/* Content, not decoration: these carry a figure or a destination, so they sit
   above the label floor rather than on it. */
@media (max-width:900px){
  .purum-card__assay,
  .purum-rcard__desc,
  .purum-hero-dark__badge-link{ font-size:12.5px !important; letter-spacing:.04em; }
}

/* The block cart renders line prices through its own money component, which
   was resolving to 10.8px. A price is the one number in a cart that has to be
   unambiguous. */
.wc-block-cart .woocommerce-Price-amount,
.wc-block-cart .wc-block-components-product-price,
.wc-block-cart .wc-block-formatted-money-amount,
.wc-block-components-totals-item__value,
.wp-block-woocommerce-cart .woocommerce-Price-amount{
  font-size:15px !important;
  font-family: var(--sans) !important;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{ font-size:20px !important; font-weight:700; }

/* ── 11 · header on a phone ──────────────────────────────── */
/* The bar was one paragraph with separators baked into the text, so it could
   only wrap, and on a 390px screen it wrapped into a 150px-tall block. The
   claims are separate elements now, and the two least important step aside
   rather than forcing a second line. */
.purum-announce{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:0 .55rem;
}
.purum-announce__item,
.purum-announce__link{ display:inline-flex; align-items:center; }
.purum-announce__item + .purum-announce__item::before,
.purum-announce__item + .purum-announce__link::before{
  content:"·"; margin-right:.55rem; opacity:.5;
}
.purum-announce__link{ border-bottom:1px solid rgba(251,250,247,.4); }

@media (max-width:640px){
  .purum-announce__item--drop{ display:none; }
  .purum-announce{ gap:0 .5rem; }
}

/* "Shop now" was breaking across two lines and inflating the header pill into
   a 170px block. A label on a button never wraps. */
.purum-header .wp-block-button__link{ white-space:nowrap; }

@media (max-width:900px){
  .purum-header__bar{ gap:.5rem; }
  .purum-header .wp-block-button__link{
    padding:.6rem .95rem !important; font-size:13px !important;
    min-height:44px; display:inline-flex; align-items:center;
  }
  .purum-lockup__mark{ width:26px; height:26px; }
  .purum-wordmark{ font-size:1rem; }
  .wp-block-navigation__responsive-container-open svg{ width:22px; height:22px; }
}
@media (max-width:420px){
  .purum-header .wp-block-button__link{ padding:.6rem .8rem !important; font-size:12.5px !important; }
  .purum-wordmark{ font-size:.9375rem; }
}

/* ── 12 · density on a phone ─────────────────────────────── */
@media (max-width:700px){
  /* The eyebrow wrapped to two lines and left its rule dangling on the first.
     Tightening the tracking fits it on one without shrinking the type. */
  .purum-chip{ letter-spacing:.1em; font-size:11.5px; }

  /* A square packshot plus a full card body was running each product to
     roughly 900px, so four of them took three and a half screens. A 4:3 crop
     keeps the vial legible and gives back about 90px a card. */
  .purum-card__media,
  .wc-block-components-product-image img,
  .wc-block-product img{ aspect-ratio:4/3 !important; }
  .purum-rcard__media{ aspect-ratio:4/3; }

  /* Schedule tiles: same information, less air. */
  .purum-schedule__row{ padding:.85rem 1rem; }
  .purum-schedule__band{ font-size:13.5px; }
  .purum-schedule__price{ font-size:19px; }
  .purum-schedule__rows{ gap:.5rem; }
}

/* ── 13 · product gallery ────────────────────────────────── */
/* These only appeared once products carried real attachments: before that the
   gallery rendered a placeholder with no zoom affordance and no image link. */

/* The zoom trigger ships at 16px, which is a target nobody can hit. */
.woocommerce-product-gallery__trigger{
  min-width:44px !important; min-height:44px !important;
  display:flex !important; align-items:center; justify-content:center;
  top:.75rem !important; right:.75rem !important;
  background: rgba(251,250,247,.92);
  border:1px solid var(--hairline);
  border-radius: var(--r-full);
  font-size:0; line-height:0; text-decoration:none;
}
.woocommerce-product-gallery__trigger::after{
  content:"⤢"; font-size:16px; line-height:1; color: var(--ink);
}
.woocommerce-product-gallery__trigger img{ display:none; }

/* The anchor wrapping the gallery image collapsed to the height of an empty
   line box, so the image was not part of its own link's hit area. */
.woocommerce-product-gallery__image > a,
.woocommerce-product-gallery__wrapper > a{ display:block; line-height:0; }
.woocommerce-product-gallery__image img,
.woocommerce-product-gallery__wrapper img{ display:block; width:100%; height:auto; }

/* The trigger needs a positioned ancestor and an explicit size, or min-width
   on a block-level anchor just stretches it into a full-width bar above the
   photograph. */
.woocommerce-product-gallery,
.purum-pdp__gallery,
.wp-block-woocommerce-product-image-gallery{ position:relative; }
.woocommerce-product-gallery__trigger{
  position:absolute !important; z-index:4;
  width:44px !important; height:44px !important; min-width:0 !important;
  padding:0 !important; margin:0 !important;
  box-shadow:0 2px 8px -2px rgba(14,20,25,.18);
}

/* ── 14 · mobile menu overlay ────────────────────────────── */
/* The overlay was rendering inside the header pill: a white strip showing one
   right-aligned link and no way out of it. The header is sticky with
   pointer-events disabled so the pill can float, and the nav container was
   inheriting both that stacking context and the pill's constraints.
   The panel is given its own fixed layer and the brand's own treatment. */
.wp-block-navigation__responsive-container.is-menu-open{
  position:fixed !important; inset:0 !important;
  z-index:2147482000 !important;
  display:flex !important; flex-direction:column;
  padding:1.25rem 1.5rem 2rem !important;
  background: var(--wp--preset--color--base) !important;
  pointer-events:auto;
  overflow-y:auto;
}
.purum-header,
.purum-header__bar{ pointer-events:auto; }

.is-menu-open .wp-block-navigation__responsive-close{
  width:100%; max-width:none; height:100%;
  display:flex; flex-direction:column;
}
.is-menu-open .wp-block-navigation__responsive-dialog{
  flex:1 1 auto; display:flex; flex-direction:column;
}

/* Close control: top right, on its own row above the links. */
.is-menu-open .wp-block-navigation__responsive-container-close{
  position:static !important;
  align-self:flex-end;
  width:44px; height:44px;
  border-radius: var(--r-full);
  border:1px solid var(--line);
  color: var(--ink);
  margin-bottom:1.5rem;
}

/* Links: stacked, generous, and set like the rest of the site rather than
   like a default block-theme list. */
.is-menu-open .wp-block-navigation__container{
  flex-direction:column !important;
  align-items:stretch !important;
  gap:0 !important; width:100%;
}
.is-menu-open .wp-block-navigation-item{ width:100%; }
.is-menu-open .wp-block-navigation-item__content{
  display:flex !important; align-items:center;
  width:100%; min-height:60px;
  padding:.5rem 0;
  font-family: var(--sans); font-size:1.375rem; font-weight:600;
  letter-spacing:-.02em; color: var(--ink) !important;
  border-bottom:1px solid var(--hairline);
  text-decoration:none;
}
.is-menu-open .wp-block-navigation-item__content:hover{ color: var(--ice) !important; }

/* The overlay covers the page, so nothing behind it should scroll. */
.has-modal-open{ overflow:hidden; }

/* The overlay is fixed, but the header pill carries backdrop-filter, and any
   of transform / filter / backdrop-filter on an ancestor makes it the
   containing block for fixed descendants. So the full-screen menu was being
   laid out inside a 44px-tall pill. Dropping the blur while the menu is open
   lets the panel resolve against the viewport again. */
.has-modal-open .purum-header__bar,
.has-modal-open .purum-header{
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  filter:none !important;
  transform:none !important;
}

/* Panel polish: content starts under the close control rather than floating in
   the middle, and the header pill is hidden outright while the menu is open
   instead of ghosting through behind the links. */
.has-modal-open .purum-header__bar{ visibility:hidden; }
.has-modal-open .purum-announce{ visibility:hidden; }

.wp-block-navigation__responsive-container.is-menu-open{
  background:#FBFAF7 !important;
  justify-content:flex-start !important;
}
.is-menu-open .wp-block-navigation__responsive-dialog{
  flex:0 0 auto; margin:0 !important;
}
.is-menu-open .wp-block-navigation__container{ margin-top:.5rem; }
.is-menu-open .wp-block-navigation-item,
.is-menu-open .wp-block-navigation-item__content{
  border-radius:0 !important; box-shadow:none !important; background:transparent !important;
}

/* visibility inherits, and the overlay is a descendant of the bar being
   hidden, so it has to opt back in. */
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open *{ visibility:visible !important; }

/* Core centres the menu content in the panel, which left ~380px of empty warm
   white above three links. They belong under the close control. */
.is-menu-open .wp-block-navigation__responsive-container-content{
  justify-content:flex-start !important;
  align-items:stretch !important;
  margin:0 !important;
  flex:0 0 auto !important;
  width:100%;
}
.is-menu-open .wp-block-navigation__responsive-close{ height:auto; margin:0 !important; }

/* Core pads the content wrapper 56px on every side to centre a short menu.
   With the panel top-aligned that padding is just a hole above the links. */
.is-menu-open .wp-block-navigation__responsive-container-content{
  padding:0 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   v1.0 — the system, stated once.

   The audit that produced this layer measured, across five pages:
   30 distinct font sizes, 13 border radii, 25 text colours, seven
   different H3 treatments and five button heights. None of that was
   decided; it accumulated one fix at a time.

   Everything below is the canonical value for its role. Where an
   earlier layer disagrees, this wins. New work sets a role, not a
   number.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* Type scale. Twelve steps, and nothing between them. */
  --t-micro: 11px;   /* mono uppercase labels          */
  --t-meta:  12px;   /* captions, batch codes, badges  */
  --t-fine:  13px;   /* card descriptions, fine print  */
  --t-sm:    14px;   /* dense body, buttons            */
  --t-body:  15px;   /* default body                   */
  --t-lg:    16px;   /* ledes                          */
  --t-card:  17px;   /* card titles                    */
  --t-block: 20px;   /* block titles                   */
  --t-sub:   24px;   /* sub-section headings           */
  --t-page:  32px;   /* page titles                    */
  --t-sect:  40px;   /* section headings               */
  --t-hero:  48px;   /* the one display size           */

  /* Weight by role, not by whim. */
  --w-display: 800;
  --w-heading: 700;
  --w-label:   600;
  --w-body:    400;

  /* Radius. Four values, no others. */
  --r-sm:   12px;
  --r-md:   18px;
  --r-lg:   28px;
  --r-full: 9999px;

  /* Text on a dark ground. Three levels, not nine opacities. */
  --on-dark:       rgb(251,250,247);
  --on-dark-2:     rgba(251,250,247,.72);
  --on-dark-mute:  rgba(251,250,247,.48);

  /* Band rhythm. */
  --band:     80px;
  --band-sub: 56px;
}

/* ── headings ────────────────────────────────────────────── */
/* Eight roles. Weight steps down as size steps down, which is what
   makes a hierarchy read as one system rather than eight decisions. */

.purum-hero-dark__title{
  font-size: var(--t-hero) !important;
  font-weight: var(--w-display); letter-spacing:-.025em; line-height:1.0;
}

h2.wp-block-heading,
.purum-goals__title,
.purum-lab__title,
.purum-proto__title{
  font-size: var(--t-sect) !important;
  font-weight: var(--w-display) !important; letter-spacing:-.027em; line-height:1.1;
}

.purum-related__title,
.purum-local__title{
  font-size: var(--t-sub) !important;
  font-weight: var(--w-heading) !important; letter-spacing:-.022em; line-height:1.2;
}

.purum-pdp .wp-block-post-title,
.purum-plp-title,
.wp-block-woocommerce-cart h1,
.wp-block-woocommerce-checkout h1{
  font-size: var(--t-page) !important;
  font-weight: var(--w-heading) !important; letter-spacing:-.02em; line-height:1.15;
}

.purum-duo__card h3{
  font-size: 22px !important;
  font-weight: var(--w-heading) !important; letter-spacing:-.02em; line-height:1.22;
}

.purum-certificate__title{
  font-size: 18px !important;
  font-weight: var(--w-heading); letter-spacing:-.02em; line-height:1.25;
}

.purum-goal__title,
.purum-rcard__name,
.purum-rcard__name a,
.purum-ccard__name{
  font-size: var(--t-card) !important;
  font-weight: var(--w-heading) !important; letter-spacing:-.02em; line-height:1.25;
}

.purum-card__name,
.purum-card__name a,
.purum-bcard__name,
.wc-block-product .wp-block-post-title,
.wc-block-product .wp-block-post-title a{
  font-size: 15px !important;
  font-weight: var(--w-heading) !important; letter-spacing:-.018em; line-height:1.3;
}

/* ── radius ──────────────────────────────────────────────── */
/* Nine off-token values were in use. These map them home. */
.purum-badge,
.purum-chip-pill,
.purum-crosssell__label,
.purum-schedule__off,
.purum-bcard__off{ border-radius: var(--r-full); }

.purum-crosssell__media,
.purum-goal__icon,
.purum-ccard,
.purum-schedule__row,
.purum-hero-dark__badge{ border-radius: var(--r-sm); }

.purum-goal,
.purum-duo__card,
.purum-related,
.purum-local,
.purum-crosssell,
.purum-bcard,
.purum-rcard,
.purum-certificate,
.purum-upsell,
.wc-block-product,
.purum-card{ border-radius: var(--r-md); }

.purum-hero-dark__panel,
.purum-proto__inner,
.purum-gate__card{ border-radius: var(--r-lg); }

/* ── text on dark ────────────────────────────────────────── */
.purum-hero-dark{ color: var(--on-dark-2); }
.purum-hero-dark__lede{ color: var(--on-dark-2); }
.purum-hero-dark__checks li{ color: var(--on-dark-2); }
.purum-chip--dark,
.purum-hero-dark__badge-label{ color: var(--on-dark-mute); }
.purum-lab{ color: var(--on-dark-2); }
.purum-lab__lede{ color: var(--on-dark-2); }
.purum-lab__stats .purum-stat__label,
.purum-proto__lede{ color: var(--on-dark-mute); }
.purum-eyebrow--dark{ color: var(--on-dark-mute); }
.purum-footer-dark{ color: var(--on-dark-2); }
.purum-footnote{ color: var(--on-dark-mute); }
.purum-bcard__desc{ color: var(--on-dark-mute); }
.purum-announce{ color: var(--on-dark-2); }
.purum-announce a{ color: var(--on-dark); }

/* ── buttons: one register ───────────────────────────────── */
/* The audit found five heights, three sizes, two letter-spacings and
   uppercase mono sitting next to sentence-case sans. A button is a
   button: sans, sentence case, no tracking. Two sizes only, and the
   difference between them is where it sits, not what it is. */
.purum-btn,
.purum-buynow,
.purum-addcart,
.purum-upsell__action,
.wc-block-components-button,
.wp-block-button__link,
.wc-block-product .wc-block-components-product-button__button,
.purum-pdp .single_add_to_cart_button,
button.single_add_to_cart_button{
  font-family: var(--sans) !important;
  font-weight: var(--w-label) !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  border-radius: var(--r-full) !important;
  box-sizing:border-box;
  white-space:nowrap;
}

/* Standalone: anything sitting on its own in a band. */
.purum-btn,
.purum-upsell__action,
.wc-block-components-button,
.purum-pdp .single_add_to_cart_button,
button.single_add_to_cart_button{
  min-height:48px !important;
  padding:12px 26px !important;
  font-size: var(--t-sm) !important;
}

/* In-card: the pair at the foot of a product card. */
.purum-buynow,
.purum-addcart,
.wc-block-product .wc-block-components-product-button__button,
.wc-block-product .wp-block-button__link{
  min-height:40px !important;
  padding:9px 16px !important;
  font-size: var(--t-fine) !important;
}

/* Header CTA sits between the two. */
.purum-header .wp-block-button__link{
  min-height:44px !important;
  padding:10px 20px !important;
  font-size: var(--t-fine) !important;
}

/* ── band rhythm ─────────────────────────────────────────── */
.purum-goals__inner,
.purum-lab__inner,
.purum-proto__inner{
  padding-top: var(--band) !important;
  padding-bottom: var(--band) !important;
}
.purum-related,
.purum-local{
  padding:40px 40px 44px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   v0.14 — dark packshot photography.

   The packshots are no longer transparent cut-outs on a warm panel.
   They are photographs shot on the ink ground: a full-bleed square,
   vial lit from the upper left, everything else falling into black.
   So the inset that framed a cut-out now shows as a sand border round
   a dark tile — it comes off, and the media well goes to ink so the
   photograph runs to the edge of the card.

   Scoped to `.jpg` because the consumables are still drawn SVGs and
   still want the panel and the inset. Same trick as the v0.12 rule.
   ═══════════════════════════════════════════════════════════════════ */

.wc-block-components-product-image img[src$=".jpg"],
.wc-block-product img[src$=".jpg"],
.purum-rcard__media img[src$=".jpg"],
.purum-bcard__media img[src$=".jpg"],
.purum-hero-dark__panel img[src$=".jpg"],
.purum-pdp__gallery img[src$=".jpg"]{
  object-fit:cover !important;
  padding:0 !important;
  height:auto;
  aspect-ratio:1;
  background: var(--ink);
}

/* The well behind the photograph. Cover fills it, but a dark well
   means no sand flash while the image decodes. */
.wc-block-components-product-image:has(img[src$=".jpg"]),
.purum-rcard__media:has(img[src$=".jpg"]),
.purum-bcard__media:has(img[src$=".jpg"]){
  background: var(--ink);
}

/* A dark tile against a white card needs no hairline to separate it. */
.purum-rcard__media:has(img[src$=".jpg"]){ border-bottom:0; }

/* PDP gallery: the photograph is already framed by its own falloff. */
.purum-pdp__gallery img[src$=".jpg"]{
  border-color: rgba(14,20,25,.14);
  background: var(--ink);
}

/* Hero: the panel and the photograph share a ground, so the seam goes. */
.purum-hero-dark__panel:has(img[src$=".jpg"]){
  background: var(--ink);
  border-color: rgba(251,250,247,.10);
}

/* ── v1.0a · the stragglers ──────────────────────────────── */
/* Every value the off-scale sweep reported, mapped to its role. Halves
   (12.5, 14.5, 15.5) came from tuning one component at a time; each was
   defensible alone and none of them agreed with each other. */

/* Type */
.purum-card__cat{ font-size: var(--t-micro) !important; }
.purum-card__assay{ font-size: var(--t-meta) !important; }
.purum-badge,
.purum-badge--stock,
.purum-badge--low,
.purum-badge--popular,
.purum-badge--oos,
.purum-bcard__off{ font-size: var(--t-meta) !important; }
.purum-announce,
.purum-announce__item,
.purum-announce__link{ font-size: var(--t-fine) !important; }
.purum-wordmark,
.purum-header .wp-block-site-title a{ font-size:20px !important; }
.purum-footnote{ font-size: var(--t-meta) !important; }
.purum-goal__copy,
.purum-local .purum-ticks li,
.purum-included li,
.purum-trust li,
.purum-hero-dark__checks li{ font-size: var(--t-sm) !important; }
.purum-bcard__desc,
.purum-bcard__save,
.purum-ccard__verify,
.purum-rcard__desc,
.purum-card__desc{ font-size: var(--t-fine) !important; }
.purum-qty__step{ font-size: var(--t-block) !important; }
.purum-certificate__data dt,
.purum-ccard__data dt,
.purum-bundle__anchor{ font-size: var(--t-micro) !important; }
.purum-certificate__data dd,
.purum-ccard__data dd{ font-size: var(--t-fine) !important; }
.purum-hero-dark__badge strong{ font-size: var(--t-block) !important; }
.purum-hero-dark__badge-label,
.purum-hero-dark__badge-link{ font-size: var(--t-micro) !important; }
.purum-paychips span{ font-size: var(--t-meta) !important; }
.purum-footer-dark .wp-block-button__link{ font-size: var(--t-meta) !important; }

/* Radius */
.wc-block-product,
.wc-block-product .wc-block-components-product-image,
.wc-block-product .wp-post-image,
.purum-bundle__rows,
.purum-rcard__media,
.purum-card__media{ border-radius: var(--r-md) !important; }
.purum-proto__inner{ border-radius: var(--r-lg) !important; }
.purum-qty input.qty{ border-radius:0 !important; }
.purum-paychips span,
.purum-crosssell__label{ border-radius: var(--r-sm) !important; }

/* Text on dark: three levels, and these were the last strays. */
.purum-footer-dark .purum-eyebrow,
.purum-eyebrow--dark,
.purum-footnote{ color: var(--on-dark-mute) !important; }
.purum-footer-dark p,
.purum-footer-dark a,
.purum-footer-dark span{ color: var(--on-dark-2); }
.purum-footer-dark a:hover{ color: var(--on-dark); }
.purum-bcard__anchor,
.purum-bcard s,
.purum-proto s{ color: var(--on-dark-mute) !important; }

/* ── v1.0b · last of them ────────────────────────────────── */
.purum-duo__card p,
.purum-section__body,
.purum-section__body p,
.purum-section__body li,
.purum-section__body strong,
.purum-included li,
.purum-bundle__rows li{ font-size: var(--t-body) !important; }

.purum-stat__figure{ font-size: var(--t-sect) !important; }
.purum-lab__stats .purum-stat__figure{ font-size: var(--t-sect) !important; }

.purum-stockline,
.purum-stockline__sub,
.purum-metaline,
.purum-crosssell__meta,
.purum-crosssell__cta{ font-size: var(--t-fine) !important; }
.purum-crosssell__label{ font-size: var(--t-micro) !important; }

.purum-paychips span,
.purum-footer-dark .wp-block-button__link,
footer .wp-block-button__link{ font-size: var(--t-meta) !important; }

.wp-post-image,
.zoomImg,
.purum-proto{ border-radius: var(--r-lg) !important; }
.wc-block-product .wp-post-image{ border-radius: var(--r-md) !important; }

.wc-block-mini-cart__badge{ border-radius: var(--r-full) !important; }
.wp-block-woocommerce-empty-cart-block .wp-block-button__link,
.wc-block-cart .wp-block-button__link{ font-size: var(--t-sm) !important; }

/* Buttons landed on 41, 43, 44, 48, 49 and 52px for three roles, because the
   inherited line-height pushed the content box past each minimum by a
   different amount. Pinning line-height makes the minimum the actual height,
   so a role is one number rather than a range. */
.purum-btn,
.purum-buynow,
.purum-addcart,
.purum-upsell__action,
.wc-block-components-button,
.wp-block-button__link,
.wc-block-product .wc-block-components-product-button__button,
.purum-pdp .single_add_to_cart_button,
button.single_add_to_cart_button{
  line-height:1 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.purum-rcard__actions .purum-buynow,
.purum-rcard__actions .purum-addcart,
.purum-card__actions .purum-buynow,
.purum-card__actions .purum-addcart{
  min-height:40px !important; padding:9px 16px !important; font-size: var(--t-fine) !important;
}

/* Woo wraps its button labels in an inner span with its own line-height, so
   pinning the button alone still left two of them at 52px. Height is set
   outright for the standalone role: these are single-line, nowrap buttons, so
   there is nothing for an auto height to accommodate. */
.purum-btn,
.purum-upsell__action,
.wc-block-components-button,
.wc-block-cart .wp-block-button__link,
.wp-block-woocommerce-empty-cart-block .wp-block-button__link,
.purum-pdp .single_add_to_cart_button,
button.single_add_to_cart_button{
  height:48px !important; min-height:48px !important;
}
.wc-block-components-button__text,
.wp-element-button > span{ line-height:1 !important; }

.purum-buynow,
.purum-addcart,
.wc-block-product .wc-block-components-product-button__button,
.wc-block-product .wp-block-button__link{ height:40px !important; }

.purum-header .wp-block-button__link{ height:44px !important; }

/* A "10% off" tile is a saving, and savings are amber everywhere else on the
   site. It was ice here, which both broke the colour split and spent the brand
   accent on something that is not the brand. */
.purum-schedule__off{ background: var(--amber) !important; color:#fff !important; }

/* Inset cards. Two roles and two numbers, not five:
     feature band  56px   the dark protocols panel
     content card  40px   related, delivery, the contact pair          */
.purum-proto{ padding:56px !important; }
.purum-related,
.purum-local,
.purum-duo__card{ padding:40px !important; }
@media (max-width:760px){
  .purum-proto{ padding:32px 20px !important; }
  .purum-related,
  .purum-local,
  .purum-duo__card{ padding:24px 20px !important; }
}

/* ═══ product gallery: packshot, then the purity card ════════
   Every product now carries a second image, so the gallery has a thumbnail
   rail to style. Woo only builds the rail once flexslider has run; until then
   the wrapper holds both images as siblings, which would stack them down the
   whole column — hence the grid and the override once .flex-viewport exists. */

.purum-pdp__gallery .woocommerce-product-gallery__wrapper{ display:grid; gap:10px; }
.purum-pdp__gallery .flex-viewport .woocommerce-product-gallery__wrapper{ display:block; gap:0; }

.purum-pdp__gallery .flex-control-thumbs{
  display:grid !important; grid-template-columns:repeat(4,1fr); gap:10px;
  list-style:none !important; margin:10px 0 0 !important; padding:0 !important;
}
.purum-pdp__gallery .flex-control-thumbs::before,
.purum-pdp__gallery .flex-control-thumbs li::before,
.purum-pdp__gallery .flex-control-thumbs li::marker{ content:none !important; display:none !important; }
.purum-pdp__gallery .flex-control-thumbs li{ margin:0 !important; padding:0 !important; list-style:none !important; }
.purum-pdp__gallery .flex-control-thumbs img{
  width:100%; border-radius:12px; cursor:pointer; opacity:.5;
  transition:opacity .15s ease, box-shadow .15s ease;
}
.purum-pdp__gallery .flex-control-thumbs img:hover,
.purum-pdp__gallery .flex-control-thumbs img.flex-active{
  opacity:1; box-shadow:0 0 0 2px var(--ink);
}

/* The cart cross-sell thumbnail is the one place a packshot sits inside a
   warm-tinted card. A white well round a dark photograph reads as a mistake,
   so it takes the ink ground too. */
.purum-crosssell__media:has(img[src$=".jpg"]){ background: var(--ink); }
.purum-crosssell__media img[src$=".jpg"]{
  object-fit:cover;
  padding:0;
}

/* The hero panel is a fixed 320 × 420 window and the packshot is square, so
   fitting it by width left 50px of empty panel above and below the vial. The
   photograph fills the window instead: the vial sits in the middle 55% of the
   frame, so covering a portrait window crops only the empty ground at the
   sides. Nothing of the vial is lost. */
.purum-hero-dark__panel img[src$=".jpg"]{
  width:100%;
  height:100%;
  aspect-ratio:auto;
  object-fit:cover !important;
  padding:0 !important;
}

.purum-pdp__gallery img{ border-radius: var(--r-lg) !important; }

/* ═══════════════════════════════════════════════════════════════════
   v1.1 — review pass.
   ═══════════════════════════════════════════════════════════════════ */

/* Hero was reading thin: 52px above and 72px below a 60px headline is not
   enough room for the one thing the page opens on. */
.purum-hero-dark__inner{
  padding-top:88px !important;
  padding-bottom:104px !important;
  gap:4rem;
}
@media (max-width:900px){
  .purum-hero-dark__inner{ padding-top:52px !important; padding-bottom:60px !important; }
}

/* The claims strip is a rule with words in it, not a band. */
.purum-marquee{ padding:9px 0 !important; }
@media (max-width:700px){ .purum-marquee{ padding:8px 0 !important; } }

/* ── shop by goal: invert the ground ─────────────────────── */
/* Section and cards were warm white on white, which is not a break, it is a
   rounding error. White ground with sand cards gives the band its own
   temperature and separates it from the warm-white sections either side. */
.purum-goals{ background:#FFFFFF !important; }
.purum-goal{
  background: var(--panel) !important;
  border-color: rgba(14,20,25,.07) !important;
}
.purum-goal:hover{
  background:#FFFFFF !important;
  border-color: rgba(62,122,146,.35) !important;
}
.purum-goal__icon{ background:#FFFFFF !important; }
.purum-goal:hover .purum-goal__icon{ background: var(--ice) !important; color:#fff !important; }
.purum-goal__link{ background: rgba(62,122,146,.10) !important; }
.purum-goal:hover .purum-goal__link{ background: var(--ice) !important; color:#fff !important; }

/* The protocols band keeps its dark panel; the page behind it goes white so
   the two sections read as one white stretch with an ink inset in it. */
.purum-proto-wrap{ background:#FFFFFF !important; }

/* Lockup: the mark was 24px in a 44px pill, which left it looking incidental
   rather than like the thing the header is built around. */
.purum-lockup__mark{ width:34px !important; height:34px !important; }
.purum-wordmark,
.purum-header .wp-block-site-title a{ font-size: var(--t-sub) !important; }
.purum-lockup{ gap:.6rem !important; }
@media (max-width:900px){
  .purum-lockup__mark{ width:30px !important; height:30px !important; }
  .purum-wordmark{ font-size:20px !important; }
}
@media (max-width:420px){
  .purum-lockup__mark{ width:27px !important; height:27px !important; }
  .purum-wordmark{ font-size:17px !important; }
}

/* ── free delivery progress ──────────────────────────────── */
.purum-ship{
  margin:1.1rem 0 0;
  padding:.85rem 1rem .9rem;
  border:1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--wp--preset--color--surface);
}
.purum-ship__label{
  margin:0 0 .55rem;
  font-family: var(--sans); font-size: var(--t-fine);
  font-weight:400; line-height:1.4; color: var(--wp--preset--color--body-text);
}
.purum-ship__label strong{ font-weight:700; color: var(--ink); }
.purum-ship__track{
  height:6px; border-radius: var(--r-full);
  background: rgba(14,20,25,.09); overflow:hidden;
}
.purum-ship__fill{
  display:block; height:100%; border-radius: var(--r-full);
  background: var(--ice);
  transition: width .4s cubic-bezier(.2,.7,.3,1);
}
.purum-ship.is-unlocked{ background: var(--green-tint); border-color: rgba(44,110,82,.25); }
.purum-ship.is-unlocked .purum-ship__label strong{ color: var(--green); }
.purum-ship.is-unlocked .purum-ship__fill{ background: var(--green); }
.purum-ship.is-empty .purum-ship__track{ display:none; }
.purum-ship.is-empty .purum-ship__label{ margin-bottom:0; }
@media (prefers-reduced-motion: reduce){ .purum-ship__fill{ transition:none; } }

/* ── checkout recommendations ────────────────────────────── */
.purum-recs{ margin-top:1.5rem; }
.purum-recs .purum-eyebrow{ margin:0 0 .85rem; }
.purum-recs__grid{ display:flex; flex-direction:column; gap:.6rem; }
.purum-rec{
  display:flex; align-items:center; gap:.85rem;
  padding:.6rem .75rem;
  border:1px solid var(--line); border-radius: var(--r-sm);
  background: var(--wp--preset--color--surface);
}
.purum-rec__media{
  flex:none; width:52px; height:52px; overflow:hidden;
  border-radius:10px; background: var(--ink);
}
.purum-rec__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.purum-rec__body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:.1rem; }
.purum-rec__name{
  font-family: var(--sans); font-size: var(--t-fine); font-weight:700;
  letter-spacing:-.015em; color: var(--ink); text-decoration:none;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.purum-rec__name:hover{ color: var(--ice); }
.purum-rec__price{
  font-family: var(--sans); font-size: var(--t-meta); font-weight:600;
  color: var(--mute); font-variant-numeric:tabular-nums;
}
.purum-rec__add{
  flex:none; min-height:36px; padding:8px 18px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: var(--r-full); border:1px solid var(--steel);
  font-family: var(--sans); font-size: var(--t-meta); font-weight:600;
  color: var(--ink); text-decoration:none; white-space:nowrap;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.purum-rec__add:hover{ background: var(--ink); border-color: var(--ink); color:#fff; }

/* ── buy block ───────────────────────────────────────────── */
/* The controls were three separate rhythms stacked: quantity, button,
   schedule, each with its own margin. One gap between them. */
.purum-pdp form.cart{ margin-bottom:0; }
.purum-pdp .purum-schedule{ margin-top:1.25rem; }
.purum-pdp .purum-schedule .purum-eyebrow{ margin-bottom:.6rem; }
.purum-pdp .purum-crosssell{ margin-top:1.1rem; }

/* The claims strip under the buy block is a footnote to it, not a band. */
.purum-pdp-marquee{ margin-top:1.4rem; }
.purum-pdp-marquee .purum-marquee{
  border-radius: var(--r-sm);
  border:1px solid var(--line);
  background: var(--wp--preset--color--surface);
}
.purum-pdp-marquee .purum-marquee span{ font-size: var(--t-meta); }

/* Full-bleed bands butt against each other. The main group was applying a 24px
   block gap between every section, so a strip of the warm-white body showed
   through between them. It was invisible while every band was warm white and
   became a seam the moment two of them went pure white. Each band carries its
   own padding, so the gap was never doing any work. */
main.wp-block-group > *{ margin-block:0 !important; }

/* ── certificates page ───────────────────────────────────── */
.purum-certpage{ margin-top:2rem; }

.purum-certlookup{ margin:0 0 2.25rem; max-width:34rem; }
.purum-certlookup__label{
  display:block; margin-bottom:.6rem;
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing:.16em; text-transform:uppercase; color: var(--mute);
}
.purum-certlookup__row{ display:flex; gap:.6rem; align-items:stretch; flex-wrap:wrap; }
.purum-certlookup__input{
  flex:1 1 16rem; min-width:0; height:48px;
  padding:0 1rem; box-sizing:border-box;
  border:1px solid var(--line); border-radius: var(--r-full);
  background: var(--wp--preset--color--surface);
  font-family: var(--mono); font-size: var(--t-sm);
  letter-spacing:.06em; color: var(--ink);
}
.purum-certlookup__input:focus{ outline:2px solid var(--ice); outline-offset:1px; border-color: var(--ice); }
.purum-certlookup__hint{
  margin:.75rem 0 0; font-size: var(--t-fine); line-height:1.6; color: var(--mute); max-width:34rem;
}

/* Grid rather than a table element: six columns that collapse to stacked
   label/value pairs on a phone without the row ever scrolling sideways. */
.purum-certtable{
  border:1px solid var(--line); border-radius: var(--r-md);
  overflow:hidden; background: var(--wp--preset--color--surface);
}
.purum-certtable__head,
.purum-certtable__row{
  display:grid;
  grid-template-columns:9rem 1fr 5rem 5rem 7rem 6rem;
  gap:1rem; align-items:center;
  padding:.9rem 1.25rem;
}
.purum-certtable__head{
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing:.14em; text-transform:uppercase; color: var(--mute);
  background: var(--panel); border-bottom:1px solid var(--line);
}
.purum-certtable__row{ border-top:1px solid var(--hairline); font-size: var(--t-sm); }
.purum-certtable__row:first-of-type{ border-top:0; }
.purum-certtable__batch{
  font-family: var(--mono); font-size: var(--t-fine);
  letter-spacing:.06em; color: var(--ink);
}
.purum-certtable__num{ font-family: var(--mono); font-size: var(--t-fine); font-variant-numeric:tabular-nums; }
.purum-certtable__row a{ color: var(--ink); text-decoration:none; font-weight:600; }
.purum-certtable__row a:hover{ color: var(--ice); }
.purum-certtable__verify{
  font-family: var(--sans); font-size: var(--t-fine); font-weight:700;
  color: var(--ice) !important; white-space:nowrap;
}
.purum-certtable__pending{ font-size: var(--t-fine); color: var(--mute); }

.purum-certpage__empty{
  margin:0 0 1rem; padding:1rem 1.25rem;
  border:1px solid rgba(178,107,24,.3); border-radius: var(--r-sm);
  background: var(--amber-tint); color: var(--ink); font-size: var(--t-sm);
}
.purum-certpage__all{ font-size: var(--t-sm); font-weight:700; color: var(--ice); }

@media (max-width:900px){
  .purum-certtable__head{ display:none; }
  .purum-certtable__row{
    grid-template-columns:1fr auto; gap:.4rem .75rem;
    padding:1rem 1.1rem;
  }
  .purum-certtable__row > span:nth-child(2){ grid-column:1 / -1; order:-1; font-size: var(--t-card); }
  .purum-certtable__verify{ justify-self:end; }
}

/* ═══════════════════════════════════════════════════════════════════
   v1.2 — checkout upsells.
   ═══════════════════════════════════════════════════════════════════ */

/* The free-delivery bar was a quiet line above the summary. At checkout it is
   the last chance to grow an order, so it gets the weight of a panel: the
   figure large enough to read at a glance, the track thick enough to see, and
   a caption saying what happens when it fills. */
.wp-block-woocommerce-checkout .purum-ship,
.wc-block-checkout .purum-ship{
  padding:1.25rem 1.35rem 1.35rem;
  border-radius: var(--r-md);
  border-color: rgba(62,122,146,.3);
  background: var(--ice-tint);
  margin-bottom:1.25rem;
}
.wp-block-woocommerce-checkout .purum-ship__label,
.wc-block-checkout .purum-ship__label{
  font-size: var(--t-lg); line-height:1.35; margin-bottom:.85rem;
  color: var(--ink);
}
.wp-block-woocommerce-checkout .purum-ship__label strong,
.wc-block-checkout .purum-ship__label strong{
  font-size: var(--t-sub); font-weight:800; letter-spacing:-.02em;
  display:inline-block; color: var(--ice-deep);
}
.wp-block-woocommerce-checkout .purum-ship__track,
.wc-block-checkout .purum-ship__track{ height:10px; background: rgba(14,20,25,.10); }
.wp-block-woocommerce-checkout .purum-ship.is-unlocked,
.wc-block-checkout .purum-ship.is-unlocked{
  background: var(--green-tint); border-color: rgba(44,110,82,.3);
}
.wp-block-woocommerce-checkout .purum-ship.is-unlocked .purum-ship__label strong,
.wc-block-checkout .purum-ship.is-unlocked .purum-ship__label strong{ color: var(--green); }

.purum-ship__caption{
  margin:.7rem 0 0; font-size: var(--t-fine); line-height:1.5; color: var(--mute);
}

/* ── recommendations ─────────────────────────────────────── */
.purum-recs{ margin-top:1.75rem; }
.purum-rec{ align-items:flex-start; padding:.85rem .9rem; gap:.9rem; }
.purum-rec__media{ width:60px; height:60px; }
.purum-rec__body{ gap:.2rem; padding-top:.1rem; }
.purum-rec__note{
  font-family: var(--sans); font-size: var(--t-meta); font-weight:400;
  line-height:1.45; color: var(--mute);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.purum-rec__buy{
  flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:.4rem;
}
.purum-rec__price{ font-size: var(--t-fine); color: var(--ink); font-weight:700; }
.purum-rec__add{
  min-height:36px; padding:8px 18px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: var(--r-full); border:1px solid var(--ink);
  background: var(--ink); color:#fff;
  font-family: var(--sans); font-size: var(--t-meta); font-weight:600;
  white-space:nowrap; line-height:1;
  transition: background .18s ease, border-color .18s ease, opacity .18s ease;
}
.purum-rec__add:hover:not(:disabled){ background: var(--slate); border-color: var(--slate); }
.purum-rec__add:disabled{ opacity:.6; cursor:default; }
.purum-rec__add:focus-visible{ outline:2px solid var(--ice); outline-offset:2px; }

/* Already in the cart: still offerable, visibly quieter. */
.purum-rec.is-held{ border-color: rgba(44,110,82,.3); background: var(--green-tint); }
.purum-rec.is-held .purum-rec__add{
  background:transparent; color: var(--green); border-color: rgba(44,110,82,.45);
}
.purum-rec.is-held .purum-rec__add:hover:not(:disabled){ background: var(--green); color:#fff; border-color: var(--green); }

.purum-upsell__error{
  margin:.5rem 0 0; font-size: var(--t-meta); color:#9B2C2C;
}

@media (max-width:700px){
  .purum-rec{ flex-wrap:wrap; }
  .purum-rec__buy{ flex-direction:row; align-items:center; width:100%; justify-content:space-between; padding-top:.2rem; }
  .purum-rec__add{ min-height:44px; padding:10px 22px; }
}

/* inline-block on the figure collapses the whitespace either side of it, so
   the sentence rendered as "Add $90.01more for free delivery". */
.wp-block-woocommerce-checkout .purum-ship__label strong,
.wc-block-checkout .purum-ship__label strong{
  margin-inline:.18em .28em;
}

/* ═══════════════════════════════════════════════════════════════════
   v1.3 — mobile density, measured against the reference.

   The reference runs an 86px header, a 36px h1 and a two-column
   product grid at a 12px gap. Ours ran a 130px header, a 60px h1
   and one product per screen, which is why it read as looser and
   longer for the same content.
   ═══════════════════════════════════════════════════════════════════ */

/* ── header ──────────────────────────────────────────────── */
.purum-iconlink{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; flex:none;
  color: var(--ink); text-decoration:none;
  border-radius: var(--r-full);
  transition: background .16s ease, color .16s ease;
}
.purum-iconlink svg{ width:21px; height:21px; }
.purum-iconlink:hover{ background: var(--panel); color: var(--ice); }

header.purum-header{ padding:.55rem 1rem; }
.purum-header__bar{ padding-block:.35rem; }

/* The gap under the bar was the header's own padding plus the hero's,
   stacked. The hero owns the space now. */
.purum-hero-dark__inner{ padding-top:56px !important; }

@media (max-width:900px){
  header.purum-header{ padding:.45rem .75rem; }
  .purum-header__bar{ padding:.3rem .5rem .3rem .9rem; gap:.25rem; }
  .purum-iconlink{ width:40px; height:40px; }
  .purum-iconlink svg{ width:20px; height:20px; }
  .wc-block-mini-cart__button{ min-width:40px !important; }
}

/* ── hero ────────────────────────────────────────────────── */
/* 60px was a poster headline, not a page one. */
.purum-hero-dark__title{ font-size: var(--t-hero) !important; }

@media (max-width:900px){
  .purum-hero-dark__inner{ padding-top:28px !important; padding-bottom:36px !important; gap:1.5rem; }
  .purum-hero-dark__title{ font-size:36px !important; line-height:1.06; }
  .purum-hero-dark__lede{ font-size:15px; margin-bottom:1.25rem; }
  .purum-chip{ margin-bottom:.6rem; }
  .purum-hero-dark__actions{ gap:.5rem; }
  .purum-hero-dark__checks{ gap:.6rem 1.1rem; margin-top:1.25rem; }
}

/* ── claims strip: the one thing that got bigger ─────────── */
.purum-marquee{ padding:14px 0 !important; }
.purum-marquee span{ font-size: var(--t-sm) !important; margin-right:2.75rem; }
@media (max-width:900px){
  .purum-marquee{ padding:13px 0 !important; }
  .purum-marquee span{ font-size: var(--t-fine) !important; margin-right:2rem; }
}

/* ── band rhythm: 80px is a desktop number ───────────────── */
@media (max-width:900px){
  .purum-goals__inner,
  .purum-lab__inner,
  .purum-proto__inner,
  main.wp-block-group > .wp-block-group.has-global-padding{
    padding-top:40px !important;
    padding-bottom:40px !important;
  }
  .purum-proto{ padding:28px 18px !important; }
  .purum-related,
  .purum-local,
  .purum-duo__card{ padding:22px 18px !important; }
  .purum-goals__title,
  .purum-lab__title,
  .purum-proto__title{ font-size:26px !important; margin-bottom:.5rem; }
  .purum-goals__lede,
  .purum-lab__lede,
  .purum-proto__lede{ font-size:14.5px !important; margin-bottom:1.5rem; }
  .purum-eyebrow{ margin-bottom:.5rem !important; }
}
@media (max-width:700px){
  .purum-goals__inner,
  .purum-lab__inner,
  .purum-proto__inner,
  main.wp-block-group > .wp-block-group.has-global-padding{
    padding-top:34px !important;
    padding-bottom:34px !important;
  }
}

/* ── products two up, bundles one ────────────────────────── */
/* A single product per screen turns a catalogue into a scroll. Two up
   is what the reference does and what makes a grid scannable. */
@media (max-width:900px){
  .purum-rail .wp-block-post-template,
  .purum-rail.wc-block-product-template,
  .purum-rail .wc-block-product-template,
  .wc-block-product-template,
  .purum-related__grid,
  .purum-goals__grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
  }

  /* Protocols stay one per row: each carries three vials, a component
     list and two prices, and none of that survives a 170px column. */
  .purum-bundles{ grid-template-columns:1fr !important; gap:12px; }
}
@media (max-width:700px){
  .purum-goals__grid{ grid-template-columns:1fr !important; }
}

/* Two-up cards are narrow, so the card has to give the content back the
   room the grid took. */
@media (max-width:900px){
  .wc-block-product,
  .purum-rcard{ padding-bottom:.5rem; }
  .wc-block-product .wp-block-post-title,
  .purum-rcard__name{ font-size:14px !important; line-height:1.25; }
  .purum-card__desc,
  .purum-rcard__desc{ display:none; }
  .purum-card__assay{ font-size:11px !important; }
  .wc-block-product .wc-block-components-product-price,
  .purum-rcard__price{ font-size:15px !important; }
  .purum-rcard__actions,
  .wc-block-product .wc-block-components-product-button{ flex-direction:column; gap:.4rem; }
  .purum-rcard__actions > *,
  .purum-buynow,
  .purum-addcart,
  .wc-block-product .wc-block-components-product-button__button{
    width:100%; min-height:38px !important; font-size:12.5px !important; padding:8px 10px !important;
  }
  .purum-badge{ font-size:10.5px; padding:.3rem .55rem; }
  .purum-badges{ top:.5rem; left:.5rem; right:.5rem; gap:.3rem; }
}

/* The category label sat flush against the top of the card body. */
.purum-card__cat{ margin-top:.85rem !important; }
.wc-block-product .wc-block-components-product-image{ margin-bottom:0; }
.wc-block-product > *:first-child{ margin-top:0; }

/* The earlier gap fix only reached inside main. Header, main and footer are
   siblings one level up, so a 24px band of the body's warm white sat between
   the header pill and the hero. Each of the three owns its own padding. */
.wp-site-blocks > *{ margin-block:0 !important; }

/* ── two-up card internals ───────────────────────────────── */
/* The button row is a grid, not a flex row, so flex-direction did nothing to
   it and the pair stayed side by side in a 139px column: "Add to cart" broke
   across three lines. */
@media (max-width:900px){
  /* The container keeps whatever inset the rest of the card body uses. Giving
     it width:100% resolved against the card's full width, not the inset
     content box, so both buttons hung 15px past the card edge. */
  .wc-block-product .wp-block-button,
  .wc-block-product .wc-block-components-product-button{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:.4rem !important;
    width:auto !important;
    margin-inline:1rem !important;
  }
  .wc-block-product .purum-buynow,
  .wc-block-product .wc-block-components-product-button__button,
  .wc-block-product .wp-block-button__link{
    width:100% !important;
    white-space:nowrap;
  }

  /* The anchor inside the title carried its own size, so setting the heading
     alone left the visible text a step larger than intended. */
  .wc-block-product .wp-block-post-title,
  .wc-block-product .wp-block-post-title a{ font-size:14px !important; }

  /* Purity is the number that sells; the batch code belongs on the product
     page, and at 173px wide it only wrapped to a second line. */
  .purum-card__assay{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .purum-card__assay .purum-card__batch{ display:none; }
}

/* ── product page on a phone ─────────────────────────────── */
@media (max-width:900px){
  .purum-pdp{
    padding-top:20px !important;
    padding-bottom:40px !important;
  }
  .purum-pdp .wp-block-columns{ gap:1.5rem !important; }
  .purum-pdp__gallery{ margin-bottom:.25rem; }

  .purum-pdp .wp-block-post-title{ font-size:26px !important; margin-bottom:.5rem; }
  .purum-pdp .price,
  .purum-pdp .wc-block-components-product-price{ font-size:28px !important; }
  .purum-standfirst{ font-size:14.5px !important; line-height:1.55; margin:.75rem 0 1rem; }
  .purum-stockline{ margin-top:.6rem; }

  /* Price schedule two up. One tile per row turned four bands into a scroll
     and made the cheapest unit price the hardest thing to find. */
  .purum-schedule__rows{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:.5rem !important;
  }
  .purum-schedule__row{
    display:flex !important; flex-direction:column; align-items:flex-start;
    justify-content:flex-start; gap:.15rem;
    padding:.7rem .8rem !important;
    position:relative;
  }
  .purum-schedule__band{ font-size:12px !important; }
  .purum-schedule__price{ font-size:17px !important; }
  .purum-schedule__was{ font-size:12px !important; }
  .purum-schedule__off{
    position:absolute; top:.5rem; right:.5rem;
    font-size:10px !important; padding:.2rem .4rem;
  }

  /* Sections were stacked with no air between them. */
  .purum-sections{ margin-top:1.75rem; }
  .purum-section__summary{ padding-block:1rem !important; font-size:16px !important; }
  .purum-section__body{ padding-bottom:1.25rem; }
  .purum-trust,
  .purum-included{ margin-top:1.25rem; }
  .purum-included li,
  .purum-trust li{ padding-block:.3rem; }
  .purum-metaline{ margin-top:1rem; }
  .purum-certificate{ padding:1.4rem 1.15rem !important; margin-top:1.75rem; }
  .purum-related,
  .purum-local{ margin-top:1.75rem; }

  /* The protocol offer was a four-part row crammed into 358px: thumbnail,
     badge, name, component list and a call to action all fighting. It reads
     as a card on a phone. */
  .purum-crosssell{
    display:grid !important;
    grid-template-columns:64px 1fr;
    grid-template-areas:"media body" "cta cta";
    gap:.75rem .85rem;
    padding:.9rem !important;
  }
  .purum-crosssell__media{ grid-area:media; width:64px; height:64px; }
  .purum-crosssell__body{ grid-area:body; }
  .purum-crosssell__cta{
    grid-area:cta; width:100%; justify-content:center;
    min-height:44px; border-radius: var(--r-full);
    background: var(--amber); color:#fff !important;
  }
  .purum-crosssell__meta{ white-space:normal; font-size:12px; }
}