/* livvmore component styles — part 2 of 2 (product pages, v1 system, responsive).
   Split from theme.css to keep each file under the 1000-LOC project limit. Enqueued
   AFTER theme.css (handle pep-theme) as pep-theme-store; both define/consume the same
   design tokens, which resolve regardless of stylesheet order. */
/* ===== lane:pages ===== */
/* OPTIONAL — not required (appearance is carried by inline block styles matching disclaimer-callout).
   Provide a named hook only if central wants the DRAFT notice styleable from theme.css.
   Mirrors .pep-ruo-callout: tint-light band with a 3px brass left rule. */
.pep-draft-note .pep-eyebrow { color: var(--pep-brass); }

/* ========================================================================
   Product-offer page (single-product) — re-created 2026-07-29 after the
   L2 build lane's returned CSS was lost to the session limit. Uses the
   theme's existing --pep-* / --wp--preset tokens. Base classes
   (pep-section, pep-eyebrow, pep-coa-list, pep-chip--data) already styled.
   ======================================================================== */

/* Labelled placeholders (compliance: unpopulated data must read as pending) */
.pep-placeholder {
  color: var(--wp--preset--color--muted);
  font-style: italic;
}
.pep-placeholder-label {
  margin: 0.75rem 0 0;
  font-family: var(--wp--preset--font-family--data);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pep-brass);
}

/* Breadcrumbs row */
.pep-pdp-crumbs { padding-block: 0.25rem 0; margin-bottom: 0; }

/* 1. Above-fold purchase panel */
.pep-buy__cols { gap: clamp(1.5rem, 4vw, 3.5rem); align-items: flex-start; }
.pep-buy__gallery img { border-radius: 12px; }
.pep-buy__panel { display: flex; flex-direction: column; }
.pep-buy__title {
  margin: 0.25rem 0 0.5rem;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 400;
  /* v1 PDP title scale (was ~half size) so the headline matches the approved design. */
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--pep-ink);
}
.pep-buy__format { margin: 0 0 0.75rem; }
.pep-ruo {
  margin: 0 0 1rem;
  padding: 0.55rem 0.75rem;
  font-family: var(--wp--preset--font-family--data);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  border: 1px solid var(--pep-line);
  border-left: 3px solid var(--pep-brass);
  border-radius: 4px;
  background: var(--wp--preset--color--paper-shade);
}
/* Beautified compliance flag (PDP): brass badge + lab-flask icon + tint wash, so the
   research-use notice reads as a designed callout rather than a default alert box. Scoped to
   the --flag modifier; the plain .pep-ruo (announce bar, content-page callouts) is untouched. */
.pep-ruo--flag {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0.25rem 0 1.25rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--pep-brass) 30%, var(--pep-line));
  border-left: 4px solid var(--pep-brass);
  border-radius: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pep-brass) 8%, var(--pep-paper)), var(--pep-paper));
}
.pep-ruo--flag .pep-ruo__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--pep-brass) 15%, transparent);
  color: var(--pep-brass);
}
.pep-ruo--flag .pep-ruo__icon svg { width: 19px; height: 19px; }
.pep-ruo--flag .pep-ruo__text {
  margin: 0;
  font-family: var(--wp--preset--font-family--data);
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--pep-ink);
}
.pep-buy__pricewrap { margin: 0 0 1rem; }
.pep-buy__pricewrap .wp-block-woocommerce-product-price,
.pep-buy__pricewrap .price {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.5rem;
  color: var(--pep-ink);
}

/* Quantity control (disabled pre-launch) */
.pep-qty { margin: 0 0 1rem; }
.pep-qty__label {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--wp--preset--font-family--data);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}
.pep-qty__control { display: inline-flex; align-items: stretch; border: 1px solid var(--pep-line); border-radius: 6px; overflow: hidden; opacity: 0.6; }
.pep-qty__step { width: 40px; border: 0; background: var(--pep-paper); font-size: 1.1rem; color: var(--pep-ink); cursor: not-allowed; }
.pep-qty__input { width: 56px; border: 0; border-inline: 1px solid var(--pep-line); text-align: center; background: var(--pep-paper); font-family: var(--wp--preset--font-family--data); }
.pep-qty__perunit { margin: 0.5rem 0 0; font-size: 0.8rem; color: var(--wp--preset--color--muted); }

/* CTA + note */
.pep-buy__ctawrap { margin: 0 0 0.5rem; }
/* Vertical CTA stack: primary "Enquire about access" ABOVE "View specifications"
   (Sophia's request), each full-width. At launch the primary becomes Buy now. */
.pep-buycta { display: flex; flex-direction: column; gap: 0.6rem; }
/* When the flag-gated quote buy box renders (Buy now / Add to quote), it owns the PDP CTA area;
   hide the static Enquire/View-specs fallback so the two groups never double up. Flag off => no
   .pep-quoteadd => .pep-buycta stays as the compliant no-JS fallback. */
.hero__body:has(.pep-quoteadd) .pep-buycta { display: none; }
/* Open FAQ cards, two-up (v1 shows the FAQ visible, not collapsed). */
.pep-faq__grid { grid-template-columns: repeat(2, 1fr); margin-top: 0; }
.pep-faq__grid .step p { font-size: 0.95rem; line-height: 1.6; }
@media (max-width: 720px) { .pep-faq__grid { grid-template-columns: 1fr; } }
.pep-buy__note { margin: 0 0 1.25rem; }

/* Documentation meta list */
.pep-docmeta { margin: 0 0 1.25rem; padding: 1rem 0; border-block: 1px solid var(--pep-line); }
.pep-docmeta__row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.3rem 0; font-size: 0.9rem; }
.pep-docmeta__row dt { color: var(--wp--preset--color--muted); font-family: var(--wp--preset--font-family--data); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }
.pep-docmeta__row dd { margin: 0; text-align: right; color: var(--pep-ink); }

/* Documentation links */
.pep-doclinks { margin: 0 0 1.25rem; font-size: 0.9rem; }
.pep-doclinks a { color: var(--pep-ink); text-decoration: underline; text-underline-offset: 3px; }
.pep-doclinks__sep { margin: 0 0.5rem; color: var(--pep-line); }

/* Reassurance row (3 icons under CTA — the IM8 mechanic) */
.pep-reassure { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.pep-reassure__item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: var(--pep-ink); }
.pep-reassure__icon { flex: none; color: var(--pep-sage); }

/* Full-width image break */
.pep-imagebreak { padding-block: clamp(3rem, 8vw, 5rem); color: var(--pep-paper); }
.pep-imagebreak .pep-eyebrow { color: var(--pep-brass); }
.pep-imagebreak__title { margin: 0.5rem 0 0; font-family: var(--wp--preset--font-family--display); font-size: clamp(1.5rem, 3.5vw, 2.4rem); color: var(--pep-paper); letter-spacing: -0.01em; }

/* ── Batch documentation: self-contained specimen certificate card. ── */
.pep-batchdoc__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.75rem,4vw,3rem);margin-top:2.25rem;align-items:start}
.pep-coa-cert{margin:0;position:relative;overflow:hidden;background:var(--pep-paper);border:1px solid var(--pep-line);border-radius:14px;padding:clamp(1.4rem,3vw,1.9rem);box-shadow:0 10px 30px rgba(18,50,39,.06)}
.pep-coa-cert__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:1rem;margin-bottom:.5rem;border-bottom:1px solid var(--pep-line)}
.pep-coa-cert__doc{font-family:var(--wp--preset--font-family--display);font-size:1.08rem;color:var(--pep-ink)}
.pep-coa-cert__stamp{flex:none;position:static;top:auto;left:auto;right:auto;transform:none;font-family:var(--wp--preset--font-family--data);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pep-brass);border:1px solid var(--pep-brass);border-radius:100px;padding:.32rem .7rem;line-height:1;white-space:nowrap}
.pep-coa-cert__fields{margin:0;display:grid;gap:0}
.pep-coa-cert__row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.62rem 0;border-bottom:1px dashed var(--pep-line)}
.pep-coa-cert__row:last-child{border-bottom:0}
.pep-coa-cert__row dt{font-family:var(--wp--preset--font-family--data);font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--wp--preset--color--muted)}
.pep-coa-cert__row dd{margin:0;font-family:var(--wp--preset--font-family--data);font-size:.85rem;color:var(--pep-ink);text-align:right}
.pep-coa-cert__seal{display:inline-flex;align-items:center;gap:.45rem;margin-top:1.25rem;font-family:var(--wp--preset--font-family--data);font-size:.72rem;letter-spacing:.04em;color:var(--wp--preset--color--accent)}
.pep-coa-cert__seal svg{width:18px;height:18px}
/* Real-certificate "stamped" look — mirrors the COA-library .pep-cert (brass top rule + wash +
   diagonal SPECIMEN watermark + rubber-stamp seal). Base .pep-coa-cert already has
   position:relative;overflow:hidden, so the layers are contained. Content is lifted above them. */
.pep-coa-cert{background:linear-gradient(180deg,color-mix(in srgb,var(--pep-brass) 6%,var(--pep-paper)),var(--pep-paper) 22%);border-top:3px solid var(--pep-brass)}
.pep-coa-cert__head,.pep-coa-cert__fields,.pep-coa-cert__seal{position:relative;z-index:2}
.pep-coa-cert__watermark{position:absolute;inset:0;z-index:0;display:grid;place-items:center;font-family:var(--wp--preset--font-family--data);font-size:clamp(2.4rem,9vw,4.2rem);font-weight:700;letter-spacing:.18em;color:color-mix(in srgb,var(--pep-brass) 11%,transparent);transform:rotate(-24deg);pointer-events:none;user-select:none;white-space:nowrap}
.pep-coa-cert__stampmark{position:absolute;right:.85rem;bottom:.85rem;z-index:1;width:98px;height:98px;border-radius:50%;display:grid;place-items:center;text-align:center;gap:.12rem;border:2px solid color-mix(in srgb,var(--pep-brass) 55%,transparent);box-shadow:inset 0 0 0 4px color-mix(in srgb,var(--pep-brass) 14%,transparent);color:color-mix(in srgb,var(--pep-brass) 70%,transparent);transform:rotate(-12deg);opacity:.5;pointer-events:none;user-select:none}
.pep-coa-cert__stampmark strong{font-family:var(--wp--preset--font-family--data);font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1}
.pep-coa-cert__stampmark span{font-family:var(--wp--preset--font-family--data);font-size:.4rem;letter-spacing:.11em;text-transform:uppercase;line-height:1.25}
@media (max-width:520px){.pep-coa-cert__stampmark{width:78px;height:78px;right:.6rem;bottom:.6rem}.pep-coa-cert__stampmark strong{font-size:.56rem}.pep-coa-cert__stampmark span{font-size:.34rem}}
.pep-batchdoc__annot{align-self:start}
.pep-batchdoc__annot .pep-placeholder-label{margin-top:0}
.pep-batchdoc__notes{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.9rem}
.pep-batchdoc__notes li{position:relative;padding-left:1.6rem;font-size:.95rem;line-height:1.55;color:var(--wp--preset--color--body)}
.pep-batchdoc__notes li::before{content:"";position:absolute;left:0;top:.55rem;width:8px;height:8px;border-radius:50%;background:var(--pep-brass)}
.pep-batchdoc__notes strong{color:var(--pep-ink)}
.pep-batchdoc__link{margin:1rem 0 0;font-size:.9rem}
.pep-batchdoc__link a{color:var(--pep-ink);text-decoration:underline;text-underline-offset:3px}

/* ── Shared PDP feature-card grid — "Included with each order" + "How orders are handled". ── */
.pep-cardgrid{list-style:none;margin:2.25rem 0 0;padding:0;display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.pep-card{display:flex;flex-direction:column;gap:.75rem;padding:1.6rem 1.5rem;background:var(--pep-paper);border:1px solid var(--pep-line);border-radius:14px;box-shadow:0 1px 2px rgba(18,50,39,.03);transition:transform .2s,box-shadow .2s,border-color .2s}
.pep-card:hover{transform:translateY(-3px);border-color:var(--pep-sage);box-shadow:0 14px 32px rgba(18,50,39,.08)}
.pep-card__icon{display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:12px;background:var(--wp--preset--color--tint-light);color:var(--wp--preset--color--accent)}
.pep-card__icon svg{width:24px;height:24px}
.pep-card__title{margin:0;font-family:var(--wp--preset--font-family--display);font-weight:500;font-size:1.12rem;line-height:1.2;color:var(--pep-ink)}
.pep-card__note{margin:0;font-size:.92rem;line-height:1.6;color:var(--wp--preset--color--body)}

/* ── PDP proof strip: slim 4-up signal band with hairline dividers. ── */
.pep-proofstrip__row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.pep-proofstrip__item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.35rem;padding-inline:1rem;position:relative}
.pep-proofstrip__item + .pep-proofstrip__item::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:62%;background:var(--pep-line)}
.pep-proofstrip__icon{color:var(--wp--preset--color--accent);margin-bottom:.2rem}
.pep-proofstrip__label{font-family:var(--wp--preset--font-family--data);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--pep-ink);font-weight:600}
.pep-proofstrip__note{font-size:.82rem;line-height:1.5;color:var(--wp--preset--color--muted)}
@media(max-width:781px){.pep-proofstrip__row{grid-template-columns:repeat(2,1fr);gap:1.75rem 1rem}.pep-proofstrip__item:nth-child(odd)::before{display:none}}
@media(max-width:460px){.pep-proofstrip__row{grid-template-columns:1fr}.pep-proofstrip__item::before{display:none}.pep-proofstrip__item{flex-direction:row;text-align:left;align-items:flex-start;gap:.7rem}}

/* Specifications + quantity tables */
.pep-specs__table th, .pep-qtytable th, .pep-qtytable td, .pep-specs__table td { padding: 0.6rem 0.75rem; text-align: left; border-bottom: 1px solid var(--pep-line); font-size: 0.9rem; }
.pep-specs__table th[scope="row"] { color: var(--wp--preset--color--muted); font-family: var(--wp--preset--font-family--data); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; width: 40%; }
.pep-qtytable { width: 100%; border-collapse: collapse; }
.pep-qtytable thead th { font-family: var(--wp--preset--font-family--data); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.pep-qtytable__value td { font-weight: 600; }

/* Sticky mobile purchase bar (small screens only) */
.pep-buybar { display: none; }
@media (max-width: 781px) {
  .pep-buybar {
    display: flex;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 40;
    align-items: center;
    gap: 1rem;
    padding: 0.65rem 1rem;
    background: var(--pep-paper);
    border-top: 1px solid var(--pep-line);
    box-shadow: 0 -6px 20px rgba(18, 50, 39, 0.08);
  }
  .pep-batchdoc__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   livvmore approved homepage — ported section styles (front-page.html)
   ------------------------------------------------------------------------
   Copied verbatim from the approved static preview <style>. The base/reset
   rules are scoped under .lm-home so they never leak into the WooCommerce
   templates (shop/product/cart); every component class is plain and does not
   collide with the theme's pep-* namespace (verified). Only the homepage
   sections that were ported are covered here.
   ========================================================================== */
:root{
  /* Single source of truth = theme.json palette. These v1 names alias the presets 1:1
     (each byte-equal to the hex it replaced), so there is no second palette definition and
     zero rendered-colour change. --near-black has no preset, so it stays a literal. */
  --maroon:var(--wp--preset--color--ink-deep); --maroon-darkest:var(--wp--preset--color--ink); --crimson:var(--wp--preset--color--accent); --gold:var(--wp--preset--color--brass);
  --cream:var(--wp--preset--color--paper-warm); --salmon:var(--wp--preset--color--sage); --near-black:#071410; --white:var(--wp--preset--color--paper); --tint:var(--wp--preset--color--tint);
  --bg:var(--cream); --bg-dark:var(--maroon); --bg-darkest:var(--near-black);
  --text:var(--maroon-darkest); --text-on-dark:var(--cream);
  --accent:var(--gold); --accent-on-dark:var(--salmon);
  --cta-bg:var(--crimson); --cta-text:var(--white);
  --hairline:1px solid color-mix(in srgb, var(--maroon-darkest) 14%, transparent);
  --hairline-on-dark:1px solid color-mix(in srgb, var(--salmon) 22%, transparent);
  --font-display:'Fraunces','Cormorant Garamond',Georgia,serif;
  --font-body:'Hanken Grotesk','Manrope','Helvetica Neue',Arial,sans-serif;
  --font-mono:'Space Mono',ui-monospace,monospace;
  --radius-pill:100px; --radius-lg:16px; --radius-md:10px;
  --max:1280px; --gutter:clamp(1.25rem,4vw,3rem); --pad-y:clamp(3.5rem,7vw,6rem);
  --shadow:0 2px 8px rgba(7,20,16,.06),0 14px 44px rgba(7,20,16,.09);
}
/* scoped reset — homepage only, never touches shop/product templates */
/* overflow-x:CLIP (not hidden): clip still guards against horizontal overflow, but unlike
   `hidden` it does NOT force overflow-y to `auto`, so <main> never becomes a nested scroll
   container. `hidden` here made main a second scroller (~18px), which caused the homepage
   "have to scroll twice / improper scroll" bug — the first wheel tick moved main's tiny
   internal range instead of the document. clip = single document scroller. */
.lm-home{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
.lm-home *{box-sizing:border-box}
.lm-home img,.lm-home svg,.lm-home video{display:block;max-width:100%}
.lm-home a{color:inherit;text-decoration:none}
.lm-home button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
/* The reset above out-specifies .btn and flattens filled <button class="btn"> on the homepage
   (e.g. the featured-card "Buy now"). Re-assert the .btn look inside .lm-home. */
.lm-home .btn{font-family:var(--font-body);font-weight:700;font-size:.9375rem;letter-spacing:.32px;color:var(--cta-text);background:var(--cta-bg)}
.lm-home .btn:hover{background:color-mix(in srgb,var(--cta-bg) 88%,#000)}
.lm-home .btn--ghost{color:var(--maroon-darkest);background:transparent;border:1px solid color-mix(in srgb,var(--maroon-darkest) 32%,transparent)}
.lm-home .btn--ghost:hover{background:color-mix(in srgb,var(--maroon-darkest) 6%,transparent)}
.lm-home h1,.lm-home h2,.lm-home h3{margin:0;font-family:var(--font-display);font-weight:400;color:var(--text);font-optical-sizing:auto}
.lm-home p{margin:0}
/* type + layout utilities */
/* box-sizing:border-box + widening the cap by 2x the gutter makes every .wrap (homepage border-box
   AND header/footer/content-page content-box) resolve to exactly --max (1280) of CONTENT = wideSize,
   so .wrap bands line up pixel-for-pixel with WP-native align:full/constrained sections everywhere. */
.wrap{max-width:calc(var(--max) + 2 * var(--gutter));margin:0 auto;padding-inline:var(--gutter);box-sizing:border-box}
.h1{font-size:clamp(2.4rem,5vw,4.1rem);line-height:1.02;letter-spacing:-.02em}
.h2{font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.08;letter-spacing:-.015em}
.h3{font-weight:500;font-size:clamp(1.15rem,1.8vw,1.5rem);line-height:1.18;letter-spacing:-.01em}
.eyebrow{font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.2em;color:var(--maroon);font-weight:400}
.lead{font-size:clamp(1.02rem,1.15vw,1.15rem);line-height:1.55;color:color-mix(in srgb,var(--text) 84%,transparent)}
.mono{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem}
.on-dark{color:var(--text-on-dark)} .on-dark .eyebrow{color:var(--accent-on-dark)} .on-dark h1,.on-dark h2,.on-dark h3{color:var(--text-on-dark)}
.gold-i{font-family:var(--font-display);font-style:italic;color:var(--accent)}
.section{padding-block:var(--pad-y)}
.btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--font-body);font-weight:700;font-size:.9375rem;letter-spacing:.32px;color:var(--cta-text);background:var(--cta-bg);border:0;border-radius:var(--radius-pill);padding:1rem 1.75rem;transition:background .18s,transform .18s,box-shadow .18s;text-transform:uppercase;text-decoration:none;cursor:pointer}
/* Buttons are never underlined, anywhere (theme.json underlines all <a>; .btn opts out globally). */
a.btn,a.btn:hover,.btn:hover,.wp-block-button__link{text-decoration:none}
.btn:hover{background:color-mix(in srgb,var(--cta-bg) 88%,#000);transform:translateY(-1px);box-shadow:0 6px 18px rgba(35,89,63,.28)}
/* WordPress applies a global link colour to <a>; keep filled .btn links white text (ghost/inv/light keep theirs). */
a.btn:not(.btn--ghost):not(.btn--inv):not(.btn--light){color:var(--cta-text)}
a.btn--ghost{color:var(--maroon-darkest)}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.btn--ghost{background:transparent;color:var(--maroon-darkest);border:1px solid color-mix(in srgb,var(--maroon-darkest) 32%,transparent)}
.btn--ghost:hover{background:color-mix(in srgb,var(--maroon-darkest) 6%,transparent);box-shadow:none}
.btn--inv{background:var(--cream);color:var(--maroon-darkest)} .btn--inv:hover{background:#fff;color:var(--maroon)}
.btn--block{width:100%}
/* Prominent hero purchase CTA — larger primary Buy now, reusing the .btn system. Placed after
   .lm-home .btn (line ~268) so the scoped font-size wins the specificity tie. */
.btn--lg{padding:1.2rem 2.6rem;font-size:1.02rem;letter-spacing:.4px}
.lm-home .btn--lg{font-size:1.02rem}
@media(max-width:560px){.lm-home .hero__cta{flex-direction:column;align-items:stretch}.lm-home .hero__cta .btn{width:100%}}
/* Core outline buttons (is-style-outline): the filled token above is white-on-crimson,
   which would make an outline variant white-on-light. Force the readable ghost look
   (dark text + hairline) so every outline CTA matches .btn--ghost site-wide. */
.wp-block-button.is-style-outline > .wp-block-button__link{
  background:transparent;
  color:var(--maroon-darkest);
  border:1px solid color-mix(in srgb, var(--maroon-darkest) 32%, transparent);
  border-radius:var(--radius-pill);
  text-transform:uppercase;font-weight:700;letter-spacing:.02em}
.wp-block-button.is-style-outline > .wp-block-button__link:hover{
  background:color-mix(in srgb, var(--maroon-darkest) 6%, transparent);color:var(--maroon)}
.on-dark .wp-block-button.is-style-outline > .wp-block-button__link,
[class*="ink"] .wp-block-button.is-style-outline > .wp-block-button__link{
  color:var(--cream);border-color:color-mix(in srgb, var(--cream) 45%, transparent)}
.chip{display:inline-flex;align-items:center;gap:.45em;font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;border:var(--hairline);border-radius:var(--radius-pill);padding:.5em .85em;color:color-mix(in srgb,var(--text) 78%,transparent)}
.chip svg{width:14px;height:14px}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.6,.2,1)}
.reveal.in{opacity:1;transform:none}
/* laurel "Documented by batch" badge */
.laurel{display:inline-flex;align-items:center;gap:.7rem;border:var(--hairline);background:var(--white);border-radius:var(--radius-md);padding:.5rem 1.3rem;align-self:flex-start;box-shadow:var(--shadow)}
.laurel__branch{width:26px;height:44px;color:var(--maroon-darkest);flex:0 0 auto}
.laurel__branch--r{transform:scaleX(-1)}
.laurel__t{text-align:center;line-height:1.02}
.laurel__t b,.laurel__t span{font-family:var(--font-display);font-weight:500;font-size:1.12rem;color:var(--maroon-darkest);display:block;letter-spacing:.005em}
/* proof stats */
.proof{color:var(--cream);text-align:center}
.proof .wrap{display:flex;align-items:center;justify-content:center;gap:clamp(1.5rem,4vw,3.5rem);flex-wrap:wrap;padding-block:1.3rem;position:relative;z-index:1}
.proof .p{display:flex;align-items:center;gap:.6rem;font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:color-mix(in srgb,var(--cream) 82%,transparent)}
.proof .p b{font-family:var(--font-display);font-size:1.6rem;color:var(--salmon);font-weight:500;letter-spacing:normal;text-transform:none}
.proof .p svg{width:22px;height:22px;stroke:var(--salmon);fill:none;stroke-width:1.3;flex:0 0 auto}
/* hero (split video + body) */
.hero{display:grid;grid-template-columns:1fr 1fr;min-height:auto}
.hero__media{position:relative;overflow:hidden;background:var(--maroon-darkest);min-height:420px}
.hero__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62}
.hero--shop .hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62}
.hero__media .scrim{position:absolute;inset:0;background:linear-gradient(115deg,rgba(7,20,16,.55),rgba(7,20,16,.2) 60%,transparent)}
.hero__media .molecule{position:absolute;inset:0;display:grid;place-items:center;opacity:.5}
.hero__body{display:flex;flex-direction:column;justify-content:center;gap:1rem;padding:clamp(1.75rem,3.5vw,3.25rem);background:var(--cream)}
.hero__eyebrow{display:inline-flex;align-items:center;gap:.5em;align-self:flex-start;border:var(--hairline);border-radius:var(--radius-pill);padding:.5em .95em;font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;color:var(--maroon)}
.hero__eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--crimson)}
.hero__count{display:flex;align-items:center;gap:.6rem;font-family:var(--font-mono);font-size:.76rem;letter-spacing:.06em;color:color-mix(in srgb,var(--text) 70%,transparent)}
.hero__count b{color:var(--crimson);font-size:1rem}
.hero__cta{display:flex;gap:.8rem;flex-wrap:wrap}
.hero__chips{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.2rem}
/* Product-page hero (v1 .hero--pdp): the vial sits on an #ecebe7 well, whole vial visible.
   The live WooCommerce gallery is kept inside .hero__media; pep-loupe.js binds to
   .woocommerce-product-gallery__image (unchanged) and handles the object-fit letterbox. The
   base .hero__media overflow:hidden clips the loupe glass to the well edge, exactly as v1 does. */
.hero--pdp .hero__media{background:#ecebe7;min-height:clamp(340px,40vw,470px);display:grid;place-items:center;padding:clamp(1.5rem,3vw,2.75rem);position:relative;overflow:hidden;cursor:crosshair}
.hero--pdp .hero__media .woocommerce-product-gallery,
.hero--pdp .hero__media .woocommerce-product-gallery__wrapper,
.hero--pdp .hero__media .woocommerce-product-gallery__image{width:100%;max-width:440px;margin:0;float:none}
.hero--pdp .hero__media .woocommerce-product-gallery__image>a{display:block}
.hero--pdp .hero__media img{width:100%;height:auto;max-height:calc(clamp(340px,40vw,470px) - 3rem);object-fit:contain;object-position:center;border-radius:0}
.hero--pdp .hero__media .flex-control-thumbs{display:none}
/* Branded vial fallback on the PDP hero for products with no photo yet (David's new compounds).
   Absolute heights: the WooCommerce gallery wrappers collapse to 0, so a percentage height would too. */
.pep-pdp-vial{display:grid;place-items:center;width:100%;min-height:clamp(340px,40vw,470px)}
.pep-pdp-vial .prod__vial{width:auto;height:clamp(230px,32vw,330px);opacity:.92}
/* The v1 element reset is scoped to .lm-home and doesn't reach the product template, so
   restate the heading font/weight and neutralise WP default block margins for the body. */
.hero--pdp .hero__body>*{margin-block:0}
.hero--pdp .hero__body .h1{font-family:var(--font-display);font-weight:400;color:var(--maroon-darkest);margin:.1rem 0 .3rem}
@media (hover:none),(pointer:coarse){.hero--pdp .hero__media{cursor:default}}
/* Sticky product image: pin the vial well while the taller identity/CTA column scrolls, so the
   product stays in view instead of scrolling away (no more scroll up-and-down to re-check it).
   align-items:start lets .hero__media keep its natural (shorter) height — that height gap is
   what gives the sticky element room to travel; top clears the 74px sticky masthead + a 16px
   gap. Disabled on mobile (single-column hero) in the max-width:900px block below. */
.hero--pdp{align-items:start}
.hero--pdp .hero__media{position:sticky;top:130px;align-self:start}
/* Fit the PDP hero (image + full buy box through "Buy it now") into one viewport: start the buy
   column at the top instead of vertically centring it, trim the oversized top padding, and tighten
   the inter-element rhythm so nothing important sits below the fold on a laptop screen. */
.hero--pdp .hero__body{justify-content:flex-start;padding-top:clamp(.35rem,.9vw,.65rem);gap:.55rem}
.hero--pdp .pep-buy__title,.hero--pdp .hero__body .h1{margin:.1rem 0 .15rem}
.hero--pdp .pep-ruo--flag{margin:.15rem 0 .3rem;padding:.7rem 1rem}
.hero--pdp .pep-demo-buy .cart{margin-bottom:.85rem}
.hero--pdp .pep-demo-buy__ship{margin-top:.55rem}
/* dark bands + documentation carousel */
.band,.darkrun{background:var(--bg-dark);position:relative;overflow:hidden}
.band::before,.darkrun::before{content:"";position:absolute;inset:0;background-image:radial-gradient(color-mix(in srgb,var(--salmon) 20%,transparent) 1px,transparent 1.6px);background-size:24px 24px;opacity:.4;pointer-events:none}
.band .wrap{text-align:center;max-width:1000px;position:relative}
.darkrun>.wrap,.darkrun>.proof{position:relative;z-index:1}
.band .h2{max-width:24ch;margin-inline:auto}
.railwrap{position:relative}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(258px,288px);gap:1.25rem;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:.25rem;scrollbar-width:none;scroll-behavior:smooth}
.rail::-webkit-scrollbar{display:none}
.rail-nav{display:flex;gap:.6rem;justify-content:center;margin-top:1.6rem}
.rail-nav button{width:44px;height:44px;border-radius:50%;border:var(--hairline-on-dark);display:grid;place-items:center;color:var(--salmon);transition:background .15s}
.rail-nav button:hover{background:color-mix(in srgb,var(--salmon) 12%,transparent)}
.rail-nav svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.pcard{scroll-snap-align:start;background:color-mix(in srgb,var(--white) 6%,transparent);border:var(--hairline-on-dark);border-radius:var(--radius-lg);padding:1.2rem;min-height:300px;display:flex;flex-direction:column;justify-content:space-between}
.pcard .doc{aspect-ratio:4/5;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:var(--hairline-on-dark);display:grid;place-items:center;margin-bottom:1rem;overflow:hidden;padding:.6rem}
.pcard .doc svg{width:100%;height:100%}
.pcard h3{font-size:1.25rem}
.pcard .lot{font-family:var(--font-mono);font-size:.72rem;color:var(--salmon);letter-spacing:.06em;margin-top:.3rem}
.pcard .coa{margin-top:.8rem;font-family:var(--font-mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.12em;color:var(--accent-on-dark);border:var(--hairline-on-dark);border-radius:100px;padding:.4em .8em;align-self:flex-start}
/* catalogue intro */
.intro{text-align:center;max-width:820px;margin-inline:auto;display:grid;gap:1rem;justify-items:center}
/* featured product grid */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;align-items:stretch}
.prod{background:var(--white);border:var(--hairline);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
/* The whole card is an <a> (product-card.php); theme.json underlines every link, which bled
   onto the card's eyebrow/title/spec text. Kill it on the card link everywhere (shop, collection,
   related, home) — the card is a block target, not a text link. */
a.prod,a.prod:hover,a.prod:focus{text-decoration:none;color:inherit}
a.prod :where(h3,.prod__fam,.prod__spec,.prod__price,.prod__price small){text-decoration:none}
.prod:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.prod--featured{border-top:3px solid var(--gold)}
.prod__badges{display:flex;gap:.5rem;padding:1rem 1.2rem 0}
.prod__badges span{font-family:var(--font-mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;color:var(--crimson);border:var(--hairline);border-radius:100px;padding:.35em .7em}
/* Portrait well to suit the 2:3 vial photos (was 5/4 landscape, which floated a tiny vial with the
   name text spilling over it on mobile). overflow:hidden clips any bleed; the <img> is explicitly
   sized + object-fit:cover so a full-resolution photo fills the tile sharply without overlapping the
   text below. The abstract SVG placeholder keeps its fixed centred size. */
.prod__well{position:relative;aspect-ratio:4/5;background:var(--tint);display:grid;place-items:center;margin:1rem 1.2rem;border-radius:12px;overflow:hidden}
.prod__well svg{width:64px;height:120px}
/* Absolutely positioned so the photo fills the aspect-ratio box exactly and can never grow the well
   (a height:100% grid child fights aspect-ratio and spills over the name text on mobile). */
.prod__well img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.prod__b{padding:0 1.4rem 1.4rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.prod__fam{font-family:var(--font-mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.14em;color:color-mix(in srgb,var(--text) 58%,transparent)}
/* David: make the product NAME much more prominent — it was blending into the vial photo. Larger
   Fraunces display, heavier weight, deep-green ink, tight leading so the compound name is the focal
   point of the card, above the muted family eyebrow. */
.prod h3{font-family:var(--font-display);font-size:clamp(1.5rem,1.1rem+1vw,1.9rem);font-weight:600;line-height:1.08;letter-spacing:-.01em;color:var(--maroon-darkest);margin:.1rem 0 0}
.prod__from{font-family:var(--font-mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:color-mix(in srgb,var(--text) 66%,transparent);vertical-align:.15em;margin-right:.15em}
.prod__spec{font-family:var(--font-mono);font-size:.74rem;color:color-mix(in srgb,var(--text) 68%,transparent);line-height:1.5}
/* Push the price to the bottom of the (equal-height) card body so price + the Buy-now button align
   across every card in a row, regardless of how many spec lines each product has. */
.prod__price{margin-top:auto;padding-top:.6rem;font-family:var(--font-display);font-size:1.4rem;font-weight:500;color:var(--maroon-darkest)}
.prod__price small{display:block;font-family:var(--font-mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.1em;color:color-mix(in srgb,var(--text) 74%,transparent);margin-top:.25rem}
.prod__checks{list-style:none;margin:.4rem 0;padding:0;display:grid;gap:.5rem}
.prod__checks li{display:flex;gap:.55rem;align-items:flex-start;font-size:.86rem}
.prod__checks svg{width:15px;height:15px;stroke:var(--crimson);fill:none;stroke-width:2;flex:0 0 auto;margin-top:3px}
/* Card + action footer: the anchor is the clickable card; "Buy now" + "View Specifications" sit
   below it as SIBLINGS (outside the anchor = valid HTML). Emitted on every card, so these base
   rules live in the always-loaded sheet (not pep-quote.css). */
/* width:100% so the card fills its grid/flex cell. Without it the wrap is a
   flex item with flex:0 1 auto and HUGS its content, so shorter-text cards render
   narrower than longer-text ones (inconsistent card width on the shop/collection
   archives at mobile). min-width:0 keeps long tokens from forcing overflow. */
.pep-prodwrap{display:flex;flex-direction:column;height:100%;gap:.7rem;width:100%;min-width:0}
.pep-prodwrap>.prod{flex:1}
.pep-cardactions{display:flex;flex-direction:column;gap:.5rem}
.pep-cardactions .btn{width:100%}
/* ── Sophia 2026-08-24 mobile redesign ──────────────────────────────────────
   Cleaner mobile cards (size pill, lighter well, soft-shadow vial that reads as
   product photography), a PDP in-stock indicator, and the PDP trust-icon row.
   Real prices + pack pricing + "Buy now · from $X" are kept. */
.prod__size{display:none;align-self:flex-start;font-family:var(--font-mono);font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--maroon-darkest);background:var(--tint);border-radius:100px;padding:.34em .85em;margin:.15rem 0 0}
.prod__well{background:#f3f2ef;overflow:visible}
/* Centre the vial in the well. inset:7% + width:86% left the box full-width when WooCommerce's
   `li.product img{width:100%}` beat the 86%, so left:7% pushed the vial ~11px past the right edge.
   Absolute inset:0 + margin:auto + max-width/height (with width:auto to override Woo) centres it
   reliably at any size. */
.prod__well img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:auto!important;height:auto;max-width:82%;max-height:86%;object-fit:contain;object-position:center;filter:drop-shadow(0 9px 16px rgba(18,50,39,.16))}
.hero--pdp .hero__media img{filter:drop-shadow(0 12px 22px rgba(18,50,39,.15))}
.pep-size{text-transform:uppercase}
@media (max-width:760px){
  .prod__size{display:inline-flex}
  .prod__spec,.prod__fam,.prod__badges{display:none}
  .prod__b{padding:0 1rem 1.1rem;gap:.4rem}
  .prod__well{margin:.7rem .7rem 0}
  .prod h3{font-size:1.2rem}
  .pep-coll-snapshot{display:none}
}
.pep-demo-buy__avail{display:inline-flex;align-items:center;gap:.42rem}
.pep-demo-buy__avail::before{content:"";width:8px;height:8px;border-radius:50%;background:#3f9142;display:inline-block;flex:0 0 auto}
.pep-pdp-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.4rem;padding-top:1.3rem;border-top:1px solid var(--pep-line,#e4e2dc)}
.pep-pdp-trust__item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem;font-size:.76rem;line-height:1.35;color:color-mix(in srgb,var(--text) 78%,transparent)}
.pep-pdp-trust__item svg{width:26px;height:26px;stroke:var(--maroon-darkest);fill:none;stroke-width:1.6}
.pep-pdp-trust__item strong{display:block;font-weight:600;color:var(--maroon-darkest);font-size:.8rem}
@media (max-width:520px){.pep-pdp-trust{gap:.55rem}.pep-pdp-trust__item{font-size:.66rem}.pep-pdp-trust__item strong{font-size:.72rem}}
.pep-readmore-cb{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.pep-readmore-btn{display:none}
@media (max-width:760px){
  .pep-readmore-text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .pep-readmore-cb:checked ~ .pep-readmore-text{-webkit-line-clamp:unset;overflow:visible}
  .pep-readmore-btn{display:inline-block;margin-top:.5rem;color:var(--maroon-darkest);font-weight:600;cursor:pointer;font-size:.85rem;text-decoration:underline}
  .pep-readmore-btn::before{content:"Read more"}
  .pep-readmore-cb:checked ~ .pep-readmore-btn::before{content:"Read less"}
}
/* ── Sophia round-2 mobile polish (2026-08-25): compact card CTA + card-as-one-tile, PDP zoom + tighter well ── */
.pep-card-buy{white-space:nowrap}
/* 3-up spec box is a mobile-only element (desktop keeps the RUO flag + docmeta rows). Base rule
   sits BEFORE the mobile block so the @media `display:grid` wins on phones. */
.pep-specbox{display:none}
@media (max-width:760px){
  /* whole card = one bordered white tile (vial + name + pill + price + compact button), like the mockup */
  .pep-prodwrap{border:1px solid var(--pep-line,#e6e4de);border-radius:14px;background:var(--white,#fff);padding:.55rem .55rem .7rem;gap:.45rem}
  .pep-prodwrap>.prod{border:0;border-radius:0;background:transparent;overflow:visible}
  .prod:hover{transform:none;box-shadow:none}
  .prod__well{margin:0 0 .1rem}
  .prod__b{padding:0 .35rem;gap:.3rem}
  /* Push the price to the bottom of the card so the Buy now button sits right under it
     (equal-height cards kept, but the price no longer floats far above the button). */
  .prod__price{margin-top:auto;padding-top:0;font-size:1.05rem}
  .prod__from{font-size:.58rem}
  .pep-cardactions{margin-top:.4rem}
  .pep-cardactions .btn{font-size:.82rem;padding:.6rem;border-radius:9px;min-height:0;line-height:1;letter-spacing:.02em}
  /* tighter PDP image well (mobile only — desktop keeps the sticky gallery + loupe).
     position:relative reactivates the desktop sticky `top:130px`, which pushed the vial down and
     left an empty band under the breadcrumb, so reset top. min-height:0 lets the well hug the vial
     (round-4: kill the empty band BELOW the vial + above the eyebrow, #250). */
  .hero--pdp .hero__media{min-height:0;padding:.5rem 1rem .3rem;position:relative!important;top:auto!important}
  .hero--pdp .hero__media img{max-height:240px}
  .hero--pdp .hero__media .woocommerce-product-gallery,
  .hero--pdp .hero__media .wp-block-woocommerce-product-image-gallery{position:static!important}
  /* Zoom/loupe trigger hidden on mobile: pinned to the well corner it overlapped the sticky header
     when scrolled to top (#248), and phones pinch-zoom natively. Desktop keeps the loupe. */
  .hero--pdp .hero__media .woocommerce-product-gallery__trigger{display:none!important}
  /* Breadcrumb: keep it on ONE line at a smaller size on phones (long trails scroll sideways
     rather than wrapping to two lines and eating vertical space above the vial). */
  .pep-pdp-crumbs{font-size:.78rem;white-space:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-block:.15rem 0}
  .pep-pdp-crumbs::-webkit-scrollbar{display:none}
  /* Collection header: the 2.75rem desktop bottom margin left a big gap above the Filter/Sort
     bar on phones; tighten it (the separator line now lives on the toolbar itself). */
  .pep-coll-header{margin-bottom:1.1rem}
  .woocommerce-products-header{margin:0}

  /* ── Round-4 compact "one view" mobile PDP (Sophia mock #251) ───────────────
     Order: eyebrow, title, desc, 3-up spec box, [size, buying option, price, buy now,
     add to cart, trust], with the verbose desktop blocks hidden. */
  .hero--pdp .hero__body{padding-top:.3rem;gap:.4rem;margin-top:0}
  /* Compact type so the whole buy panel fits one view (Sophia mock #255). */
  .hero--pdp .hero__body .h1{font-size:2rem;line-height:1.08;margin:.05rem 0 .15rem}
  .hero--pdp .hero__body .lead{margin:.05rem 0 .1rem;font-size:.86rem;line-height:1.45}
  /* Kill the WooCommerce gallery's 2em bottom margin — it was the empty band below the vial (#250). */
  .hero--pdp .hero__media .woocommerce-product-gallery{margin-bottom:0!important}
  /* Hide the desktop-only detail blocks — the 3-up box + compact buy card carry the essentials */
  .hero--pdp .pep-ruo--flag,
  .hero--pdp .pep-indicative,
  .hero--pdp .pep-docmeta,
  .hero--pdp .pep-doclinks,
  .hero--pdp .pep-reassure{display:none}
  /* 3-up research spec box (mirrors the vial label: research use / purity / batch tested) */
  .pep-specbox{display:grid;grid-template-columns:repeat(3,1fr);gap:.3rem;border:1px solid var(--pep-line,#e4e2dc);border-radius:14px;background:#faf9f6;padding:.62rem .4rem;margin:.1rem 0 .05rem}
  .pep-specbox__i{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.32rem}
  .pep-specbox__ic{width:30px;height:30px;border-radius:50%;background:#fff;border:1px solid var(--pep-line,#e4e2dc);display:grid;place-items:center;flex:0 0 auto}
  .pep-specbox__ic svg{width:17px;height:17px;stroke:var(--maroon-darkest,#123227);fill:none;stroke-width:1.6}
  .pep-specbox__t{font-size:.7rem;line-height:1.2;color:var(--maroon-darkest,#123227);font-weight:600}
  /* Compact buy card + reorder (size, buying option, price, buy now, add to cart, trust) */
  .pep-demo-buy{border:1px solid var(--pep-line,#e4e2dc);border-radius:14px;background:#fff;padding:.8rem;gap:.42rem;margin:.1rem 0 1rem}
  .pep-demo-buy .pep-buyrow:not(.pep-buyrow--pack){order:1;margin:0}
  .pep-demo-buy .pep-buyrow--pack{order:2;margin:0}
  .pep-demo-buy__head{order:3;margin:.1rem 0 0}
  .pep-demo-buy__now{order:4}
  .pep-demo-buy form.cart{order:5}
  /* Trust row is its OWN section below the card (#260) — no card border, clear space above it (#264/#265).
     Higher specificity than `.hero--pdp .hero__body>*{margin-block:0}`, which was zeroing the gap. */
  .hero--pdp .hero__body .pep-pdp-trust{margin-top:1.3rem;padding-top:0;border-top:0}
  /* Volume table + ship line hidden on mobile — the buying-option dropdown keeps pack pricing,
     the table was a redundant repeat and the ship line is covered by the trust row. */
  .pep-demo-buy__ship,
  .pep-demo-buy .pep-voltable{display:none}
}
/* ── Round-6: compact buttons GLOBALLY on mobile (Jeko #259) — trimmer .btn everywhere on phones.
   More-specific control rules (card CTA, buy now, size chips, toolbar) set their own compact size. ── */
@media (max-width:760px){
  .btn{padding:.6rem 1.2rem;font-size:.86rem}
}
/* ── Product-image lightbox (WooCommerce PhotoSwipe): use the light product-well background instead of
   black, so the vial reads on the same ground as the product page (#267). White sprite icons are
   inverted to dark so they stay visible on the light background. ── */
.pswp__bg{background:#ecebe7 !important}
/* The image element defaults to a dark fill; keep it transparent so the light bg (not black) shows
   through the transparent vial PNG. background-color only, so any loading placeholder image stays. */
.pswp__img{background-color:transparent !important}
.pswp__top-bar{background:transparent !important}
.pswp__button{filter:invert(1) brightness(.4)}
.pswp__counter,.pswp__caption__center{color:var(--maroon-darkest,#123227)}
/* methods strip */
.methods{border-block:var(--hairline);background:var(--white)}
.methods .wrap{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;padding-block:2.2rem}
.methods .m{display:flex;align-items:center;gap:.7rem;font-family:var(--font-mono);font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:color-mix(in srgb,var(--text) 72%,transparent)}
.methods .m svg{width:22px;height:22px;stroke:var(--crimson);fill:none;stroke-width:1.4}
/* ships split */
.split{display:grid;grid-template-columns:1fr 1fr;min-height:520px}
.split__media{background:radial-gradient(120% 90% at 50% 34%,color-mix(in srgb,var(--white) 55%,var(--tint)),var(--tint));display:grid;place-items:center;position:relative;overflow:hidden}
.split__media::before{content:"";position:absolute;inset:0;background-image:radial-gradient(color-mix(in srgb,var(--maroon-darkest) 9%,transparent) 1px,transparent 1.5px);background-size:22px 22px;opacity:.55;pointer-events:none}
.split__media video,.split__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.split__body{background:var(--maroon);color:var(--cream);display:flex;flex-direction:column;justify-content:center;gap:1.2rem;padding:clamp(2rem,5vw,4.5rem)}
.split__body .eyebrow{color:var(--accent-on-dark)}
.split__body h2{color:var(--text-on-dark)}
.ships{list-style:none;margin:.5rem 0;padding:0;display:grid;gap:.85rem}
.ships li{display:flex;gap:.7rem;align-items:flex-start;padding-bottom:.85rem;border-bottom:var(--hairline-on-dark);font-size:.95rem}
.ships li b{font-family:var(--font-body);font-weight:600}
.ships svg{width:17px;height:17px;stroke:var(--salmon);fill:none;stroke-width:2;flex:0 0 auto;margin-top:3px}
/* stat cards */
.stats{position:relative;background:radial-gradient(120% 140% at 30% 10%,var(--crimson),var(--maroon-darkest) 80%);color:var(--cream);overflow:hidden}
.stats::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 2px,transparent 2px 26px);opacity:.2;z-index:0}
.stats-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.4;z-index:0}
.stats .wrap{position:relative;z-index:1}
.stats__head{text-align:center;max-width:760px;margin:0 auto 2.6rem}
.stats__head h2{color:var(--white)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.scard{background:rgba(255,255,255,.07);backdrop-filter:blur(6px);border:var(--hairline-on-dark);border-radius:var(--radius-lg);padding:1.6rem;text-align:center}
.scard .n{font-family:var(--font-display);font-size:clamp(2rem,3.4vw,3rem);line-height:1;color:var(--white)}
.scard .l{margin-top:.7rem;font-family:var(--font-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent-on-dark)}
/* documentation process */
.process{text-align:center}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-top:2.6rem;text-align:left}
.step{border-top:2px solid var(--gold);padding-top:1.1rem;display:grid;gap:.5rem}
.step .num{font-family:var(--font-mono);font-size:.8rem;color:var(--crimson);letter-spacing:.1em}
.step h3{font-size:1.15rem}
.step p{font-size:.9rem;color:color-mix(in srgb,var(--text) 78%,transparent)}
/* owner quote */
.quote{max-width:860px;margin-inline:auto;background:var(--white);border:var(--hairline);border-radius:var(--radius-lg);padding:clamp(2rem,4vw,3.5rem);box-shadow:var(--shadow);text-align:center}
.quote q{font-family:var(--font-display);font-style:italic;font-size:clamp(1.35rem,2.4vw,1.9rem);line-height:1.35;color:var(--maroon-darkest);quotes:none}
.quote .by{margin-top:1.6rem;display:flex;align-items:center;justify-content:center;gap:.8rem}
.quote .av{width:48px;height:48px;border-radius:50%;background:var(--tint);display:grid;place-items:center;font-family:var(--font-display);color:var(--crimson);font-size:1.1rem}
.quote .by div{text-align:left}
.quote .by b{font-family:var(--font-body);font-weight:600;font-size:.95rem}
.quote .by span{font-family:var(--font-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:color-mix(in srgb,var(--text) 60%,transparent)}
/* founder note */
.note{background:var(--maroon);color:var(--cream)}
.note .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.note h2{color:var(--cream);max-width:12ch}
.note .txt{display:grid;gap:1.1rem}
.note .txt p{color:color-mix(in srgb,var(--cream) 90%,transparent);font-size:1.02rem;line-height:1.65}
.note .sig{font-family:var(--font-display);font-style:italic;font-size:1.3rem;color:var(--salmon)}
.note .sig small{display:block;font-family:var(--font-mono);font-style:normal;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--cream) 70%,transparent);margin-top:.3rem}
.note .media{position:relative;aspect-ratio:4/5;border-radius:var(--radius-lg);overflow:hidden;background:var(--near-black)}
.note .media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.7}
.note .media .scrim{position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(7,20,16,.5))}
/* promise */
.promise{text-align:center}
.promise .h2{max-width:20ch;margin:1rem auto 1.4rem}
.promise .chips{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center}
/* newsletter */
.news{background:var(--tint);text-align:center}
.news form{display:flex;gap:.6rem;max-width:520px;margin:1.4rem auto 0}
.news input{flex:1;border:var(--hairline);border-radius:var(--radius-pill);padding:1rem 1.4rem;font-family:var(--font-body);background:var(--white)}
.news small{display:block;margin-top:1rem;font-size:.78rem;color:color-mix(in srgb,var(--text) 60%,transparent)}
/* responsive */
@media (max-width:900px){
  .hero,.split,.note .wrap{grid-template-columns:1fr}
  .hero__media{min-height:300px;order:-1}
  .hero--pdp .hero__media{position:static}
  /* When the split stacks, the absolutely-positioned media has no flow height, so give it
     an explicit height on mobile or the banner image would collapse to 0 and vanish. */
  .split__media{min-height:clamp(240px,60vw,320px)}
  .grid3,.grid4,.steps{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .grid3,.grid4,.steps{grid-template-columns:1fr}
  .methods .wrap{justify-content:flex-start;gap:1.2rem}
}
@media (prefers-reduced-motion:reduce){
  .lm-home *{animation:none!important;transition:none!important}
  .hero__media video,.note .media video,.split__media video,.stats-bg{display:none}
}

/* ==========================================================================
   Header + footer ported from the approved static livvmore.com design.
   Uses the same classes + tokens so the store matches the static pixel-for-pixel.
   ========================================================================== */
.announce{background:linear-gradient(90deg,var(--maroon-darkest),var(--crimson) 130%);color:var(--white);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase}
.announce .wrap{display:flex;align-items:center;justify-content:center;gap:1.5rem;min-height:40px;position:relative;text-align:center}
.announce .region{position:absolute;right:var(--gutter);opacity:.85}
/* The header template-part wrapper must own the sticky, not .masthead: .masthead's containing
   block is that wrapper (only ~115px tall), so a sticky masthead pins for ~40px then scrolls off
   with the wrapper. Pinning the wrapper (containing block = the full-height .wp-site-blocks) makes
   the announce bar + nav follow for the whole page. :has() targets only the header wrapper (the
   footer wrapper has no .masthead). .masthead keeps position:sticky as a positioning context for
   the mega-menu + a graceful fallback. */
.wp-site-blocks>.wp-block-template-part:has(.masthead){position:sticky;top:0;z-index:60}
.masthead{position:sticky;top:0;z-index:50;background:var(--white);border-bottom:var(--hairline);transition:box-shadow .2s}
.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:74px}
.nav__left,.nav__right{display:flex;align-items:center;gap:1.6rem}
.nav__right{justify-content:flex-end}
.nav a,.nav>button,.nav__left button,.nav__right button{font-family:var(--font-body);font-size:.9rem;font-weight:500;color:var(--maroon-darkest);letter-spacing:.01em;white-space:nowrap;background:none;border:0;cursor:pointer}
.nav a:hover,.mega-wrap>button:hover{color:var(--crimson)}
.wordmark{font-family:var(--font-display);font-weight:500;font-size:1.5rem;letter-spacing:.02em;color:var(--maroon-darkest);text-align:center;line-height:1;text-decoration:none}
.wordmark__img{height:26px;width:auto;display:block;margin:0 auto}
.wordmark small{display:block;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.3em;color:var(--crimson);margin-top:3px}
.nav__icons{display:flex;gap:.35rem;align-items:center}
.nav__icons button[disabled]{opacity:.4;cursor:not-allowed}
.nav__icons svg,.nav__burger svg{width:20px;height:20px;stroke:var(--maroon-darkest);fill:none;stroke-width:1.6}
.nav__burger{display:none;align-items:center;background:none;border:0}
.nav__icons button,.nav__icons a,.nav__burger{min-width:44px;min-height:44px;align-items:center;justify-content:center}
.nav__icons button,.nav__icons a{display:inline-flex;background:none;border:0;cursor:pointer}
.nav__icons a::after{content:none}
.nav__account:hover svg{stroke:var(--crimson)}
.mega-wrap{position:relative}
.mega{position:absolute;top:100%;left:0;box-sizing:border-box;white-space:normal;width:min(1280px,91vw);background:var(--white);border:var(--hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:2rem;display:none;grid-template-columns:repeat(4,1fr) .85fr;gap:1.5rem;margin-top:10px}
.mega::before{content:"";position:absolute;left:0;right:0;top:-16px;height:18px}
.mega-wrap:hover .mega,.mega-wrap.open .mega{display:grid}
.mega h4{font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.16em;color:var(--crimson);margin:0 0 .9rem}
.mega h4 a{color:inherit;text-decoration:none;transition:color .15s}
.mega h4 a:hover{color:var(--maroon-darkest)}
.mega ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.mega li a{display:flex;align-items:center;gap:.6rem;font-family:var(--font-body);font-size:.92rem;color:var(--maroon-darkest);text-decoration:none;white-space:normal;overflow-wrap:anywhere}
.mega li a:hover{color:var(--crimson)}
.mega .dot{width:26px;height:26px;border-radius:6px;background:var(--tint);display:grid;place-items:center;flex:0 0 auto}
.mega .dot svg{width:15px;height:15px;stroke:var(--crimson);fill:none;stroke-width:1.5}
/* Let grid/flex children shrink below their content's intrinsic width so long headings and compound
   names wrap inside their column instead of overflowing the menu (default grid/flex min-width is auto). */
.mega>div,.mega ul,.mega li,.mega li a{min-width:0}
.mega .promo{grid-column:5;grid-row:1 / 3;align-self:stretch;background:var(--maroon);border-radius:var(--radius-md);padding:1.5rem;color:var(--cream);display:flex;flex-direction:column;gap:1.2rem}
.mega .promo__trust{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.mega .promo__trust li{display:flex;align-items:flex-start;gap:.5rem;font-family:var(--font-body);font-size:.82rem;line-height:1.3;color:color-mix(in srgb,var(--cream) 86%,transparent)}
.mega .promo__trust svg{width:15px;height:15px;flex:0 0 auto;margin-top:1px;stroke:var(--salmon);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Narrower desktops (901-1180px): drop to 3 wide category columns (long headings stay on one line)
   and let the promo span the bottom. Below 900px the whole mega is hidden (burger menu). */
@media (max-width:1180px){
  .mega{grid-template-columns:repeat(3,1fr)}
  .mega .promo{grid-column:1 / -1;grid-row:auto}
}
.mega .promo p{font-family:var(--font-display);font-size:1.15rem;line-height:1.2;margin:0}
.mega .promo a{margin-top:auto;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--salmon);text-decoration:none;min-width:0;white-space:normal;overflow-wrap:break-word}
.mobile-menu{position:fixed;inset:0;z-index:60;background:rgba(7,20,16,.5);opacity:0;pointer-events:none;transition:opacity .25s}
.mobile-menu.open{opacity:1;pointer-events:auto}
.mobile-menu__panel{position:absolute;top:0;right:0;height:100%;width:min(340px,86vw);background:var(--cream);transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.6,.2,1);display:flex;flex-direction:column;padding:1.5rem;overflow-y:auto}
.mobile-menu.open .mobile-menu__panel{transform:none}
.mm-close{align-self:flex-end;font-size:1.4rem;color:var(--maroon-darkest);line-height:1;background:none;border:0;cursor:pointer;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.mobile-menu h4{font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;color:var(--crimson);margin:1.2rem 0 .5rem}
.mobile-menu .mm-sub{display:flex;flex-direction:column}
.mobile-menu .mm-sub a{font-family:var(--font-body);font-size:1rem;padding:.6rem 0;color:var(--maroon-darkest);text-decoration:none}
.search-overlay{position:fixed;inset:0;z-index:70;background:rgba(7,20,16,.55);display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 16px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,visibility .2s}
.search-overlay.open{opacity:1;visibility:visible;pointer-events:auto}
.search-panel{width:min(640px,100%);background:var(--cream);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden;max-height:76vh;display:flex;flex-direction:column}
.search-bar{display:flex;align-items:center;gap:.7rem;padding:1rem 1.2rem;border-bottom:var(--hairline)}
.search-bar svg{width:20px;height:20px;stroke:var(--crimson);fill:none;stroke-width:1.8;flex:0 0 auto}
.search-bar input{flex:1;border:0;background:none;font-family:var(--font-body);font-size:1.05rem;color:var(--maroon-darkest);outline:none}
.search-bar .search-close{font-size:1.3rem;color:var(--maroon-darkest);line-height:1;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;cursor:pointer}
.search-results{overflow-y:auto;padding:.5rem}
.search-hit{display:flex;flex-direction:column;gap:.15rem;padding:.75rem 1rem;border-radius:var(--radius-md);text-decoration:none}
.search-hit:hover,.search-hit:focus-visible{background:color-mix(in srgb,var(--crimson) 8%,transparent);outline:none}
.search-hit__n{font-family:var(--font-display);font-size:1.1rem;color:var(--maroon-darkest)}
.search-hit__c{font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:color-mix(in srgb,var(--text) 62%,transparent)}
.search-empty{padding:1.4rem 1rem;color:color-mix(in srgb,var(--text) 65%,transparent);font-size:.92rem}
.footer{background:var(--maroon);color:var(--cream);padding-top:var(--pad-y);overflow:hidden}
.footer__cols{display:grid;grid-template-columns:repeat(4,1fr) 1.4fr;gap:2rem}
.footer h5{font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:var(--salmon);margin:0 0 1rem}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.footer a{font-family:var(--font-body);font-size:.9rem;color:color-mix(in srgb,var(--cream) 82%,transparent);text-decoration:none}
.footer a:hover{color:var(--cream)}
.footer .join p{font-family:var(--font-display);font-size:1.1rem;line-height:1.3;margin-bottom:1rem}
.footer .join form{display:flex;flex-direction:column;gap:.6rem;max-width:320px}
.footer .join input{border:var(--hairline-on-dark);background:rgba(255,255,255,.05);color:var(--cream);border-radius:var(--radius-md);padding:.9rem 1.1rem;font-family:var(--font-body)}
.footer .join .btn{width:100%}
.footer__ruo{border:var(--hairline-on-dark);border-radius:var(--radius-md);padding:1.1rem;text-align:center;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--salmon);margin:2rem auto 1.5rem;max-width:760px}
/* .footer prefix beats WooCommerce's `.woocommerce-page img{max-width:100%}` (0,1,1). */
.footer .footer__logo{display:block;margin:2.75rem auto .6rem;max-width:600px;width:76%;height:auto;opacity:.95}
.footer__legal{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.5rem 0 2.5rem;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;color:color-mix(in srgb,var(--cream) 65%,transparent)}
.footer__legal a{color:inherit;text-decoration:none}
@media (max-width:900px){
  .nav__left>a,.nav__left .mega-wrap,.nav__right>a{display:none}
  .nav__burger{display:inline-flex}
  .footer__cols{grid-template-columns:1fr 1fr}
}
/* Narrow phones: the four header icons (search/account/wishlist/cart) at 44px each overran the header
   and clipped the cart (#275). Tighten the tap targets + gap so all four fit; the row is still tall
   enough (~60px header) to tap comfortably. */
@media (max-width:600px){
  .masthead .wrap,.nav{padding-left:14px;padding-right:14px}
  .nav__icons{gap:.1rem}
  .nav__icons button,.nav__icons a,.nav__burger{min-width:38px}
  .nav__icons svg,.nav__burger svg{width:19px;height:19px}
}
@media (max-width:400px){
  .masthead .wrap,.nav{padding-left:10px;padding-right:10px}
  .nav__icons{gap:0}
  .nav__icons button,.nav__icons a,.nav__burger{min-width:32px}
  .nav__icons svg,.nav__burger svg{width:18px;height:18px}
}
/* Hide the absolutely-positioned side items until there is genuine room (was 720px), so between
   721-1000px they cannot overlap the centred research-use compliance notice. */
/* Hide the absolutely-positioned side items until there is real clearance from the
   centered compliance notice — at 1001-1150px they overlapped it (incl. iPad landscape). */
@media (max-width:1180px){ .announce .region{display:none} }
@media (max-width:380px){ .wordmark small{letter-spacing:.18em} .masthead{overflow-x:clip} }

/* ==========================================================================
   Blog — Research notes (home.html = posts index, single.html = one post).
   Reuses the .prod card language (paper card, hairline, radius-lg, hover lift)
   and the shared .pep-doc reading surface. Tokens only, no new colours. Blog
   STAYS noindex (blog_public=0 + PEP_BLOG_LIVE undefined). Nothing here indexes.
   ========================================================================== */
.pep-bloghero { text-align: center; }
.pep-bloghero .pep-section__eyebrow, .pep-bloghero .pep-section__title { margin-inline: auto; }
.pep-bloghero__standfirst { max-width: 60ch; margin: 1rem auto 0; color: var(--wp--preset--color--muted); font-size: 1.05rem; line-height: 1.6; }
.pep-articlegrid { list-style: none; margin: 2.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.6rem; }
.pep-articlegrid > li.wp-block-post { display: flex; flex-direction: column; margin: 0; background: var(--white); border: var(--hairline); border-radius: var(--radius-lg); overflow: hidden; transition: transform .2s, box-shadow .2s; }
.pep-articlegrid > li.wp-block-post:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.pep-article__media { margin: 0; background: var(--tint); }
.pep-article__media img { width: 100%; display: block; }
.pep-article__body { display: flex; flex-direction: column; gap: .55rem; padding: 1.4rem; flex: 1; }
.pep-article__cat, .pep-article__cat a { font-family: var(--font-mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .14em; color: var(--pep-brass); text-decoration: none; }
.pep-article__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; line-height: 1.2; letter-spacing: -.01em; }
.pep-article__title a { color: var(--pep-ink); text-decoration: none; }
.pep-article__title a:hover { color: var(--pep-brass); }
.pep-article__date { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.pep-article__date time { color: inherit; }
.pep-article__excerpt { color: var(--wp--preset--color--muted); font-size: .92rem; line-height: 1.55; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pep-article__more { align-self: flex-start; margin-top: .5rem; padding: .6rem 1.15rem; font-size: .8rem; }
.pep-pagination { margin-top: 2.75rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem; }
.pep-pagination .wp-block-query-pagination-numbers { display: flex; flex-wrap: wrap; gap: .35rem; }
.pep-pagination a, .pep-pagination .page-numbers { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .04em; color: var(--wp--preset--color--muted); text-decoration: none; padding: .45rem .75rem; border: 1px solid var(--pep-line); border-radius: var(--radius-md); transition: border-color .18s, color .18s; }
.pep-pagination a:hover { color: var(--pep-ink); border-color: var(--pep-brass); }
.pep-pagination .page-numbers.current { color: var(--pep-ink); border-color: var(--pep-brass); }
.pep-posthead .pep-crumbs { margin-bottom: 1.25rem; }
.pep-posthead .pep-section__title { margin-top: .25rem; }
.pep-post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; margin-top: 1rem; }
.pep-post__cat, .pep-post__cat a { font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--pep-brass); text-decoration: none; }
.pep-post__date { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.pep-postbody .wp-block-post-featured-image { margin: 0 0 2.5rem; }
.pep-postbody .wp-block-post-featured-image img { width: 100%; border-radius: var(--radius-lg); display: block; }
.pep-post__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--pep-line); }
@media (max-width: 640px) { .pep-articlegrid { grid-template-columns: 1fr; } }
@media (max-width:560px){ .footer__cols{grid-template-columns:1fr} .footer .join form{max-width:none} }

/* ==========================================================================
   Feedback fixes (David + Sophia, 2026-07-31)
   ========================================================================== */
/* Logo: WooCommerce's own img rules blow up the wordmark on shop/PDP/collection
   pages (homepage is fine). Pin it hard. */
.masthead .wordmark__img{height:26px !important;width:auto !important;max-width:none !important}
/* Header nav: kill WordPress's link underline; animated underline on hover; sticky shadow. */
.nav a{text-decoration:none}
.nav__left a,.nav__right a{position:relative}
.nav__left a::after,.nav__right a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;background:var(--crimson);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.nav__left a:hover::after,.nav__right a:hover::after{transform:scaleX(1)}
.masthead[data-scrolled="true"]{box-shadow:0 2px 16px rgba(7,20,16,.10)}
/* Split-section CTA: WP link colour made the inverse (cream) button's text invisible. */
a.btn--inv{color:var(--maroon-darkest)}
a.btn--inv:hover{color:var(--maroon)}
/* Newsletter Join button: drop the heavy offset shadow, keep it clean. */
.footer .join .btn{box-shadow:none}
.footer .join .btn:hover{box-shadow:none;transform:none}
/* Founder note: justify the body copy. */
.note .txt p{text-align:justify;hyphens:auto}
/* Dark-run carousel: product images in the doc well (parity with v1) */
.pcard .doc{padding:0;background:var(--tint)}
.pcard .doc img{width:100%;height:100%;object-fit:cover;display:block}

/* --------------------------------------------------------------------------
   Collection identity comparison table (pep/collection-body)
   -------------------------------------------------------------------------- */
.pep-idtable__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pep-idtable { width: 100%; border-collapse: collapse; margin-top: .5rem; }
.pep-idtable thead th { font-family: var(--wp--preset--font-family--data); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--muted); text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--pep-line); white-space: nowrap; }
.pep-idtable td, .pep-idtable th[scope="row"] { padding: .95rem .9rem; border-bottom: 1px solid var(--pep-line); font-size: .95rem; text-align: left; vertical-align: top; }
.pep-idtable th[scope="row"] { width: auto; font-weight: 400; }
.pep-idtable th[scope="row"] a { font-family: var(--wp--preset--font-family--display); font-size: 1.12rem; color: var(--pep-ink); text-decoration: none; }
.pep-idtable th[scope="row"] a:hover { color: var(--wp--preset--color--accent); }
.pep-idtable td { font-family: var(--wp--preset--font-family--data); color: color-mix(in srgb, var(--pep-ink) 82%, transparent); }
.pep-idtable tbody tr:last-child td, .pep-idtable tbody tr:last-child th { border-bottom: 0; }
.pep-idtable tbody tr:hover { background: color-mix(in srgb, var(--pep-sage) 8%, transparent); }
.pep-idtable__note { font-size: .8rem; color: var(--wp--preset--color--muted); margin-top: 1rem; }

/* --------------------------------------------------------------------------
   COA library — specimen certificate document card + archive groups
   -------------------------------------------------------------------------- */
.pep-cert { position: relative; max-width: 640px; margin: 2.5rem auto 1rem; background: linear-gradient(180deg, color-mix(in srgb, var(--pep-brass) 6%, var(--pep-paper)), var(--pep-paper) 22%); border: 1px solid var(--pep-line); border-top: 3px solid var(--pep-brass); border-radius: var(--radius-md); box-shadow: var(--shadow); overflow: hidden; }
.pep-cert__watermark { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--wp--preset--font-family--data); font-size: clamp(3rem, 12vw, 6rem); font-weight: 700; letter-spacing: .18em; color: color-mix(in srgb, var(--pep-brass) 12%, transparent); transform: rotate(-24deg); pointer-events: none; user-select: none; white-space: nowrap; }
.pep-cert__head { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.4rem 1.6rem 1.1rem; border-bottom: 1px solid var(--pep-line); }
.pep-cert__kicker { margin: 0; font-family: var(--wp--preset--font-family--display); font-size: 1.3rem; color: var(--pep-ink); letter-spacing: -.01em; }
.pep-cert__doc { margin: .25rem 0 0; font-family: var(--wp--preset--font-family--data); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.pep-cert__seal { flex: none; font-family: var(--wp--preset--font-family--data); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--pep-brass); border: 1px solid var(--pep-brass); border-radius: 999px; padding: .35rem .8rem; }
.pep-cert__body { position: relative; z-index: 1; padding: 1.25rem 1.6rem; }
.pep-cert__rows { margin: 0; display: grid; gap: 0; }
.pep-cert__row { display: grid; grid-template-columns: 42% 1fr; gap: 1rem; padding: .6rem 0; border-bottom: 1px dashed color-mix(in srgb, var(--pep-line) 80%, transparent); }
.pep-cert__row:last-child { border-bottom: 0; }
.pep-cert__row dt { font-family: var(--wp--preset--font-family--data); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--muted); align-self: center; }
.pep-cert__row dd { margin: 0; font-family: var(--wp--preset--font-family--data); font-size: .9rem; color: var(--pep-ink); }
.pep-cert__foot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.6rem; border-top: 1px solid var(--pep-line); background: color-mix(in srgb, var(--pep-brass) 5%, transparent); font-size: .8rem; color: var(--wp--preset--color--muted); }
.pep-cert__foot-mono { font-family: var(--wp--preset--font-family--data); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--pep-brass); }
.pep-cert__caption { text-align: center; font-size: .8rem; color: var(--wp--preset--color--muted); margin: 0 0 2.5rem; }
.pep-coa-group { margin-top: 2.25rem; }
.pep-coa-group__title { font-family: var(--wp--preset--font-family--display); font-size: 1.4rem; color: var(--pep-ink); font-weight: 600; letter-spacing: -.01em; margin: 0 0 .75rem; padding-bottom: .5rem; border-bottom: 2px solid var(--pep-brass); }
.pep-coa-list__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pep-coa-status { display: inline-block; font-family: var(--wp--preset--font-family--data); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--pep-ink); background: color-mix(in srgb, var(--pep-sage) 16%, transparent); border: 1px solid color-mix(in srgb, var(--pep-sage) 40%, transparent); border-radius: 999px; padding: .25rem .65rem; }
@media (max-width: 520px) { .pep-cert__row { grid-template-columns: 1fr; gap: .15rem; } }

/* ==========================================================================
   Content pages — Privacy / Terms / Shipping / Returns / Research disclaimer /
   FAQ / Contact. Premium reading surface, refined rhythm, draft callout,
   FAQ accordions, sticky TOC, matched contact form. Tokens only.
   ========================================================================== */
.pep-doc { --pep-measure: 68ch; }
.pep-doc > :where(p, ul, ol, .pep-draft-note, .pep-ruo-callout, .wp-block-details),
.pep-doc__prose > :where(p, ul, ol, .pep-draft-note, .pep-ruo-callout, .wp-block-details) { max-width: var(--pep-measure); }
.pep-doc p { color: var(--pep-ink); line-height: 1.72; margin: 0 0 1.15rem; }
.pep-doc :where(ul, ol) { color: var(--pep-ink); line-height: 1.7; margin: 0 0 1.25rem; padding-left: 1.25rem; }
.pep-doc li { margin: 0.35rem 0; }
/* Prose links inside content pages. EXCLUDE both the .btn component AND the core button block
   (.wp-element-button) so a button in page content keeps the ONE reusable button look (white text,
   green pill, no underline) instead of picking up dark-on-dark prose-link styling. */
.pep-doc a:where(:not(.btn):not(.wp-element-button)) { color: var(--pep-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--pep-brass) 55%, transparent); transition: text-decoration-color .18s; }
.pep-doc a:where(:not(.btn):not(.wp-element-button)):hover { text-decoration-color: var(--pep-brass); }
.pep-doc__lede { font-size: 1.08rem; line-height: 1.6; color: var(--wp--preset--color--muted); max-width: var(--pep-measure); }
.pep-doc__meta { font-family: var(--wp--preset--font-family--data); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--muted); margin: 0.6rem 0 0; }
/* Legal clause headings */
.pep-doc--legal h2 { font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: clamp(1.35rem, 2.2vw, 1.85rem); line-height: 1.16; letter-spacing: -0.01em; color: var(--pep-ink); margin: 2.75rem 0 0.85rem; padding-top: 1.7rem; border-top: 1px solid var(--pep-line); scroll-margin-top: 110px; }
.pep-doc--legal h2.pep-doc__h2--flush, .pep-doc--legal h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 1.4rem; }
.pep-doc--legal h3 { font-family: var(--wp--preset--font-family--display); font-weight: 500; font-size: 1.15rem; color: var(--pep-ink); margin: 1.7rem 0 0.55rem; }
/* Draft / pending-review callout */
.pep-draft-note { position: relative; border: 1px solid color-mix(in srgb, var(--pep-brass) 32%, var(--pep-line)) !important; border-left: 3px solid var(--pep-brass) !important; border-radius: var(--radius-md) !important; background: var(--wp--preset--color--tint-light) !important; padding: 1.05rem 1.25rem 1.1rem !important; margin: 1.5rem 0 2rem !important; }
.pep-draft-note .pep-eyebrow { color: var(--pep-brass); display: inline-flex; align-items: center; gap: 0.55em; margin: 0 0 0.4rem; }
.pep-draft-note .pep-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pep-brass); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pep-brass) 22%, transparent); }
.pep-draft-note p:last-child { margin-bottom: 0; color: var(--pep-ink); line-height: 1.55; }
/* Sticky TOC */
.pep-doc__layout { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 1000px) { .pep-doc--toc .pep-doc__layout { grid-template-columns: 210px minmax(0, 1fr); } }
.pep-toc { align-self: start; }
@media (min-width: 1000px) { .pep-toc { position: sticky; top: 108px; } }
.pep-toc__label { font-family: var(--wp--preset--font-family--data); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--muted); margin: 0 0 0.75rem; }
.pep-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--pep-line); }
.pep-toc a { display: block; padding: 0.42rem 0 0.42rem 1rem; margin-left: -1px; border-left: 2px solid transparent; font-size: 0.88rem; line-height: 1.4; color: var(--wp--preset--color--muted); text-decoration: none; transition: color .18s, border-color .18s; }
.pep-toc a:hover, .pep-toc a[aria-current="true"] { color: var(--pep-ink); border-left-color: var(--pep-brass); }
/* FAQ accordions */
.pep-doc--faq h2.pep-doc__cat { font-family: var(--wp--preset--font-family--data); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pep-brass); margin: 2.4rem 0 0.9rem; }
.pep-doc--faq h2.pep-doc__cat:first-of-type { margin-top: 1.5rem; }
/* Breathing room between the FAQ section title and the first accordion (was touching). */
.pep-doc--faq .pep-section__title { margin-bottom: 1.6rem; }
.pep-doc--faq .wp-block-details { border: 1px solid var(--pep-line); border-radius: var(--radius-md); background: var(--wp--preset--color--paper-warm); margin: 0 0 0.7rem; overflow: hidden; transition: border-color .18s, box-shadow .18s, background .18s; }
.pep-doc--faq .wp-block-details:hover { border-color: color-mix(in srgb, var(--pep-sage) 55%, var(--pep-line)); }
.pep-doc--faq .wp-block-details[open] { background: var(--pep-paper); border-color: color-mix(in srgb, var(--pep-brass) 38%, var(--pep-line)); box-shadow: var(--shadow); }
.pep-doc--faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.25rem; font-family: var(--wp--preset--font-family--display); font-weight: 500; font-size: 1.05rem; line-height: 1.35; color: var(--pep-ink); }
.pep-doc--faq summary::-webkit-details-marker { display: none; }
.pep-doc--faq summary::after { content: ""; flex: 0 0 auto; width: 11px; height: 11px; margin-top: -4px; border-right: 2px solid var(--pep-brass); border-bottom: 2px solid var(--pep-brass); transform: rotate(45deg); transition: transform .2s ease; }
.pep-doc--faq .wp-block-details[open] summary { color: var(--pep-brass); border-bottom: 1px solid var(--pep-line); }
.pep-doc--faq .wp-block-details[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.pep-doc--faq summary:hover { color: var(--pep-brass); }
.pep-doc--faq .wp-block-details > :not(summary) { padding: 0 1.25rem; }
.pep-doc--faq .wp-block-details > p { margin: 1.1rem 0; color: var(--pep-ink); line-height: 1.65; max-width: none; }
@media (prefers-reduced-motion: reduce) { .pep-doc--faq summary::after { transition: none; } }
/* Contact form */
.pep-contact-form { max-width: 620px; }
.pep-contact-form .pep-field { margin: 0 0 1.1rem; }
.pep-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 560px) { .pep-field-row { grid-template-columns: 1fr; gap: 0; } }
.pep-contact-form label { display: block; margin-bottom: 0.4rem; font-family: var(--wp--preset--font-family--data); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.pep-contact-form input, .pep-contact-form textarea { width: 100%; box-sizing: border-box; font-family: var(--wp--preset--font-family--body); font-size: 0.95rem; padding: 0.8rem 1rem; border: 1px solid var(--pep-line); border-radius: var(--radius-md); background: var(--wp--preset--color--paper-warm); color: var(--pep-ink); transition: border-color .18s, box-shadow .18s, background .18s; }
.pep-contact-form :is(input, textarea):focus { outline: none; background: var(--pep-paper); border-color: var(--pep-brass); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pep-brass) 18%, transparent); }
.pep-contact-form textarea { resize: vertical; min-height: 140px; }
.pep-contact-form .pep-field--submit { margin-top: 0.3rem; }
.pep-contact-form .btn { width: auto; }
.pep-contact-aside { background: var(--wp--preset--color--paper-warm); border: 1px solid var(--pep-line); border-radius: var(--radius-lg); padding: 1.5rem 1.6rem; }
.pep-contact-aside p { color: var(--pep-ink); line-height: 1.6; margin: 0 0 0.9rem; }
.pep-contact-aside p:last-child { margin-bottom: 0; }

/* Woo gallery zoom is replaced by the circular loupe; hide its .zoomImg (opacity:0 already,
   but its natural-size layout box overflowed the viewport on mobile). Keeps the gallery + loupe. */
.zoomImg{display:none !important}

/* ==========================================================================
   PDP Overview — compliant identity/documentation tree (.pep-idtree)
   --------------------------------------------------------------------------
   Replaces a competitor's banned "receptor agonist" tree with a FACTUAL
   identity/documentation tree in the same one-root + three-child shape:
   root = "Documented by batch", children = compound identity / batch records /
   independent testing. Labels only — no invented numbers, no mechanism, no
   pathway, no purity or grade claim. Connectors are an inline SVG that stretches
   with the row (preserveAspectRatio:none) while non-scaling-stroke keeps the
   hairlines crisp; the three drop points sit at 1/6, 1/2, 5/6 of the row width,
   which are the exact centres of three equal grid columns whose nodes are
   justify-self:centre — so the wire always lands on each node.
   ========================================================================== */
.pep-idtree-slot { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.pep-idtree { display: flex; flex-direction: column; }
.pep-idtree__top { display: flex; justify-content: center; }
.pep-idtree__wire { display: block; width: 100%; height: clamp(26px, 4vw, 42px); color: color-mix(in srgb, var(--pep-brass) 55%, var(--pep-line)); }
.pep-idtree__children { display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; }
.pep-idtree__node { justify-self: center; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; max-width: 210px; padding: 0 .5rem; }
.pep-idtree__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--wp--preset--color--tint-light); color: var(--wp--preset--color--accent); border: 1px solid color-mix(in srgb, var(--pep-brass) 22%, var(--pep-line)); }
.pep-idtree__icon svg { width: 26px; height: 26px; }
.pep-idtree__node--root .pep-idtree__icon { width: 60px; height: 60px; background: var(--pep-ink); color: var(--pep-paper); border-color: var(--pep-ink); }
.pep-idtree__node--root .pep-idtree__icon svg { width: 30px; height: 30px; }
.pep-idtree__label { font-family: var(--wp--preset--font-family--display); font-size: 1.02rem; line-height: 1.2; color: var(--pep-ink); }
.pep-idtree__node--root .pep-idtree__label { font-size: 1.18rem; }
.pep-idtree__sub { font-family: var(--wp--preset--font-family--data); font-size: .68rem; letter-spacing: .04em; line-height: 1.5; color: var(--wp--preset--color--muted); }
/* Stack on small screens: drop the horizontal wire, run a hairline rail behind the
   centred nodes (icon fills sit above it), single column, no overflow. */
@media (max-width: 640px) {
  .pep-idtree__wire { display: none; }
  .pep-idtree__children { grid-template-columns: 1fr; gap: 1.6rem; margin-top: 1.4rem; position: relative; }
  /* The centred node labels have no opaque backing, so a full-height rail behind them read as a line
     struck THROUGH the text. Drop the continuous rail on mobile; the stacked icon+label nodes read as
     a clean sequence on their own. */
  .pep-idtree__children::before { display: none; }
  .pep-idtree__node { max-width: none; }
  .pep-idtree__node .pep-idtree__icon { position: relative; }
}

/* ==========================================================================
   PDP trust strip — full-width 6-up signal band (.pep-truststrip)
   --------------------------------------------------------------------------
   Sits below the tabbed/overview content, above related products. COMPLIANT
   labels only (no "high purity" / "research grade" / "discreet"): third-party
   tested, documented by batch, certificate of analysis, identity by HPLC & LC-MS,
   secure packaging, supplied for laboratory research. 6-up desktop, 3-up
   tablet, 2-up mobile; hairline dividers reset at the start of each wrapped row.
   ========================================================================== */
.pep-truststrip { padding-block: clamp(2.25rem, 5vw, 3.25rem); }
.pep-truststrip__row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.5rem 0; }
.pep-truststrip__item { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .55rem; padding: .25rem 1.15rem; }
.pep-truststrip__item + .pep-truststrip__item::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 64%; background: var(--pep-line); }
.pep-truststrip__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--wp--preset--color--tint-light); color: var(--wp--preset--color--accent); }
.pep-truststrip__icon svg { width: 23px; height: 23px; }
.pep-truststrip__label { font-family: var(--wp--preset--font-family--data); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; line-height: 1.25; color: var(--pep-ink); }
.pep-truststrip__sub { font-size: .8rem; line-height: 1.45; color: var(--wp--preset--color--muted); max-width: 20ch; }
@media (max-width: 1024px) {
  .pep-truststrip__row { grid-template-columns: repeat(3, 1fr); gap: 2rem 0; }
  .pep-truststrip__item:nth-child(3n+1)::before { display: none; }
}
@media (max-width: 560px) {
  .pep-truststrip__row { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 0; }
  .pep-truststrip__item::before { display: none; }
}

/* ==========================================================================
   PDP tabbed information (.pep-tabs) — accessible tab interface for the
   below-hero content. Underline active-tab bar on the brass token; on mobile
   the tab row scrolls horizontally (no page overflow). Panels are server
   rendered (first visible, rest [hidden]) so there is zero layout shift, and a
   <noscript> block in the template reveals them all when JS is off.
   ========================================================================== */
.pep-tabsect { padding-block: clamp(1.75rem, 4.5vw, 3.25rem); }
.pep-tabs { width: 100%; }

/* Tab bar — a single underline rail; the row scrolls sideways on narrow screens. */
.pep-tabs__nav { position: relative; border-bottom: 1px solid var(--pep-line); margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.pep-tabs__list {
  display: flex;
  gap: clamp(0.85rem, 3vw, 2.25rem);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.pep-tabs__list::-webkit-scrollbar { display: none; }

.pep-tab {
  flex: 0 0 auto;
  scroll-snap-align: start;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0.95rem 0.15rem;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  font-family: var(--wp--preset--font-family--data);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--wp--preset--color--muted);
  transition: color 0.18s ease;
}
.pep-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--pep-brass);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.22s ease;
}
.pep-tab:hover { color: var(--pep-ink); }
.pep-tab[aria-selected="true"] { color: var(--pep-ink); }
.pep-tab[aria-selected="true"]::after { transform: scaleX(1); }
.pep-tab:focus-visible { outline: 2px solid var(--pep-brass); outline-offset: 4px; border-radius: 4px; }

/* Panels */
.pep-tabpanel { animation: pep-tabfade 0.28s ease; }
.pep-tabpanel[hidden] { display: none; }
.pep-tabpanel:focus { outline: none; }
@keyframes pep-tabfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* The dynamic blocks/patterns each render their own full-width band with its own
   background + section rhythm. Inside a tab they must read as ONE unified content
   column, so drop the band background and heavy vertical padding (only one panel is
   ever visible). The intentional inline callouts (e.g. .pep-ruo-callout) are NOT
   .pep-section, so they keep their tint. */
.pep-tabpanel .alignfull { margin-inline: 0 !important; max-width: 100% !important; width: 100% !important; }
.pep-tabpanel .pep-section.has-background { background: transparent !important; }
.pep-tabpanel > .pep-section,
.pep-tabpanel .pep-section { padding-block: clamp(0.25rem, 1vw, 0.75rem); }
.pep-tabpanel > .section,
.pep-tabpanel .section { padding-block: clamp(0.25rem, 1vw, 0.75rem); }
.pep-tabpanel > *:first-child { margin-top: 0; }

/* COA library CTA inside the documentation panel */
.pep-tabs__doclink { margin: 1.75rem 0 0; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .pep-tabpanel { animation: none; }
  .pep-tab::after { transition: none; }
  .pep-tabs__list { scroll-behavior: auto; }
}

/* ==========================================================================
   Why choose livvmore — 6-up circular-icon value grid + free-shipping strip
   (pattern pep/why-choose; front-page.html). Uses the homepage-scoped tokens
   (--font-*, --maroon/--crimson/--cream/--salmon/--tint) so it matches the
   approved design pixel-for-pixel. --crimson = brand green (#23593F). Copy is
   compliant: no health/mechanism/grade/purity/"discreet" wording.
   ========================================================================== */
.pep-why{background:var(--white);text-align:center;position:relative;background-image:radial-gradient(color-mix(in srgb,var(--crimson) 6%,transparent) 1.3px,transparent 1.3px);background-size:24px 24px}
.pep-why__head{display:flex;flex-direction:column;align-items:center;gap:1rem}
.pep-why__eyebrow{display:inline-flex;align-items:center;gap:.5em;background:var(--maroon);color:var(--cream);font-family:var(--font-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.18em;border-radius:var(--radius-pill);padding:.6em 1.15em}
.pep-why__title{margin:0}
.pep-why__leaf{width:120px;height:20px;color:var(--crimson);margin-top:.2rem}
.pep-why__grid{list-style:none;margin:clamp(2.25rem,5vw,3.25rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:2.25rem 1.25rem}
.pep-why__item{display:flex;flex-direction:column;align-items:center;gap:.85rem}
.pep-why__icon{display:grid;place-items:center;width:74px;height:74px;border-radius:50%;background:var(--tint);color:var(--crimson);border:1px solid color-mix(in srgb,var(--crimson) 20%,transparent)}
.pep-why__icon svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pep-why__label{font-family:var(--font-display);font-weight:500;font-size:1.05rem;line-height:1.2;color:var(--maroon-darkest)}
.pep-why__desc{max-width:22ch;margin:0;font-size:.85rem;line-height:1.55;color:color-mix(in srgb,var(--text) 74%,transparent)}
.pep-why__strip{margin-top:clamp(2.5rem,5vw,3.5rem);display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.6rem 1.25rem;padding:1.05rem 1.6rem;background:var(--maroon);color:var(--cream);border-radius:var(--radius-pill);font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.14em}
.pep-why__strip b{color:var(--salmon);font-weight:400}
.pep-why__strip-sep{opacity:.4}
@media (max-width:1024px){.pep-why__grid{grid-template-columns:repeat(3,1fr);gap:2.5rem 1.25rem}}
@media (max-width:560px){.pep-why__grid{grid-template-columns:repeat(2,1fr)}.pep-why__strip{border-radius:var(--radius-lg)}}
/* Why-choose: hover lift + icon fill, and a staggered scroll-reveal (respects reduced motion). */
.pep-why__item{transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.pep-why__icon{transition:transform .28s cubic-bezier(.2,.7,.2,1),background .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease}
.pep-why__item:hover{transform:translateY(-4px)}
.pep-why__item:hover .pep-why__icon{transform:scale(1.07);background:var(--crimson);color:var(--cream);border-color:var(--crimson);box-shadow:0 10px 24px color-mix(in srgb,var(--crimson) 22%,transparent)}
@media (prefers-reduced-motion:no-preference){
  .pep-why__head,.pep-why__grid>.pep-why__item,.pep-why__strip{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
  .pep-why.is-in .pep-why__head,.pep-why.is-in .pep-why__grid>.pep-why__item,.pep-why.is-in .pep-why__strip{opacity:1;transform:none}
  .pep-why.is-in .pep-why__grid>.pep-why__item:nth-child(1){transition-delay:.06s}
  .pep-why.is-in .pep-why__grid>.pep-why__item:nth-child(2){transition-delay:.14s}
  .pep-why.is-in .pep-why__grid>.pep-why__item:nth-child(3){transition-delay:.22s}
  .pep-why.is-in .pep-why__grid>.pep-why__item:nth-child(4){transition-delay:.30s}
  .pep-why.is-in .pep-why__grid>.pep-why__item:nth-child(5){transition-delay:.38s}
  .pep-why.is-in .pep-why__grid>.pep-why__item:nth-child(6){transition-delay:.46s}
  .pep-why.is-in .pep-why__strip{transition-delay:.42s}
}

/* Announce bar — free-shipping line (DEMO/commercial, threshold pending David). */
.announce__ship{position:absolute;left:var(--gutter);opacity:.85}
@media (max-width:1180px){.announce__ship{display:none}}

/* ── My Account ([woocommerce_my_account]) ── The theme shipped no account CSS, so the nav rendered
   as a sparse oversized list swimming in whitespace. Lay it out as a compact sidebar card + content. */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation){display:grid;grid-template-columns:minmax(190px,230px) 1fr;gap:clamp(1.75rem,4vw,3.5rem);align-items:start;max-width:1160px;margin-inline:auto;padding-block:clamp(1.25rem,2.5vw,2.25rem)}
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation)::before,.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation)::after{content:none}
.woocommerce-account .woocommerce-MyAccount-navigation{margin:0;float:none;width:auto;grid-column:1}
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;border:1px solid var(--pep-line);border-radius:14px;overflow:hidden;background:var(--cream)}
.woocommerce-account .woocommerce-MyAccount-navigation ul li{margin:0;padding:0;list-style:none}
.woocommerce-MyAccount-navigation li a{display:block;padding:.82rem 1.1rem;color:var(--maroon-darkest);text-decoration:none;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--pep-line);transition:background .15s ease,color .15s ease}
.woocommerce-MyAccount-navigation li:last-child a{border-bottom:0}
.woocommerce-MyAccount-navigation li a:hover{background:color-mix(in srgb,var(--maroon-darkest) 7%,transparent)}
.woocommerce-MyAccount-navigation li.is-active a{background:var(--maroon-darkest);color:var(--cream);font-weight:600}
.woocommerce-account .woocommerce-MyAccount-content{margin:0;min-width:0;float:none;width:auto;grid-column:2;font-size:.98rem;line-height:1.65;color:var(--maroon-darkest)}
.woocommerce-MyAccount-content>p:first-of-type{margin-top:0}
.woocommerce-MyAccount-content a{color:var(--maroon);text-underline-offset:3px}
.woocommerce-MyAccount-content .woocommerce-Button,.woocommerce-MyAccount-content .button{display:inline-block;background:var(--maroon-darkest);color:var(--cream);border:0;border-radius:999px;padding:.7rem 1.5rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.woocommerce-MyAccount-content table.woocommerce-orders-table,.woocommerce-MyAccount-content table.shop_table{width:100%;border-collapse:collapse;font-size:.9rem}
.woocommerce-MyAccount-content table th,.woocommerce-MyAccount-content table td{padding:.7rem .6rem;border-bottom:1px solid var(--pep-line);text-align:left}
@media (max-width:720px){.woocommerce-account .woocommerce{grid-template-columns:1fr;gap:1.25rem}}

/* --------------------------------------------------------------------------
   Responsive-audit fixes (2026-08-08) — same-pattern issues found after the card fix.
   -------------------------------------------------------------------------- */
/* Two latent copies of the card-image bug: aspect-ratio wells holding an SVG today that would
   overflow onto adjacent text the moment a real photo is dropped in. Same recipe as .prod__well. */
.pep-lp-featured__media, .pep-docproof__vial { position: relative; overflow: hidden; }
.pep-lp-featured__media img, .pep-docproof__vial img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pep-lp-featured__media svg, .pep-docproof__vial svg, .pep-vial-well__svg { max-width: 100%; height: auto; }
/* Long spaceless identity data (CAS, molecular formula, sequence, lot, email) must wrap, not overflow. */
.pep-docmeta__row dd, .pep-cert__row dd, .pep-coa-cert__row dd, .pep-spec-list dd, .pep-specs__table td { overflow-wrap: anywhere; word-break: break-word; }
.pep-docmeta__row dd { min-width: 0; }
/* Wide data tables get a horizontal scroller on small screens instead of forcing whole-page overflow. */
@media (max-width: 640px) {
  .pep-coa-list { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .woocommerce-MyAccount-content table.woocommerce-orders-table,
  .woocommerce-MyAccount-content table.shop_table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
}
/* Collections grid: single column on small phones (auto-fit 280px floor can overflow < 320px). */
@media (max-width: 600px) { .pep-coll-grid, .pep-coll-grid--compact { grid-template-columns: 1fr; } }
/* Touch tap targets to ~44px (WCAG 2.5.8) on interactive controls. NB: .pep-size (the buy-box size
   chip) is deliberately EXCLUDED — a 44px min forced the chip taller than the buy buttons on phones
   (Jeko #272/#274); the chip stays compact and its whole area is still tappable. */
@media (pointer: coarse) {
  .pep-pagination a, .pep-pagination .page-numbers, .pep-tab, .pep-qtybtn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}


/* ==========================================================================
   Polish pass (2026-08-08): homepage hero ONE-VIEW fill + beautify (.lm-home
   scoped so the shared .hero base and the PDP .hero--pdp are untouched).
   ========================================================================== */
:root{ --header-h:115px; }
.lm-home .hero{ min-height:calc(100vh - var(--header-h)); min-height:calc(100svh - var(--header-h)); align-content:stretch; }
.lm-home .hero__body{ gap:1.15rem; padding:clamp(2.25rem,4.5vw,4rem); }
.lm-home .hero__eyebrow{ margin-bottom:.15rem; }
.lm-home .hero .lead{ max-width:54ch; }
.lm-home .hero__cta{ margin-top:.4rem; }
@media (max-width:900px){
  .lm-home .hero{ grid-template-rows:minmax(220px,38svh) 1fr; }
  .lm-home .hero__media{ min-height:0; }
  .lm-home .hero__body{ justify-content:center; padding-block:clamp(2rem,7vw,3rem); }
}


/* ==========================================================================
   Polish pass: /my-account/ login form (scoped to .woocommerce-form-login).
   ========================================================================== */
/* logged-out account page = the login screen; give it breathing room */
body.woocommerce-account:not(.logged-in) .woocommerce {
  padding-block: clamp(1.5rem, 4vw, 3rem);
}
body.woocommerce-account:not(.logged-in) h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 500;
  text-align: center;
  color: var(--maroon-darkest);
  margin: 0 auto 1.5rem;
  max-width: 460px;
}

/* the form as a branded card */
.woocommerce-form-login {
  max-width: 460px;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--cream);
  border: 1px solid var(--pep-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

/* field rows + field labels (username / password only — remember-me is a .form-row) */
.woocommerce-form-login .woocommerce-form-row { margin: 0 0 1.15rem; }
.woocommerce-form-login .woocommerce-form-row > label {
  display: block;
  margin-bottom: .45rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--maroon-darkest) 68%, transparent);
}
.woocommerce-form-login .required {
  color: var(--gold);
  border: 0;
  text-decoration: none;
}

/* inputs */
.woocommerce-form-login .woocommerce-Input,
.woocommerce-form-login input.input-text {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: .95rem;
  padding: .8rem 1rem;
  color: var(--maroon-darkest);
  background: var(--white);
  border: 1px solid var(--pep-line);
  border-radius: var(--radius-md);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.woocommerce-form-login .woocommerce-Input::placeholder {
  color: color-mix(in srgb, var(--maroon-darkest) 40%, transparent);
}
.woocommerce-form-login .woocommerce-Input:focus,
.woocommerce-form-login input.input-text:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent);
}

/* password wrapper + Woo's show/hide toggle (kept on account pages) */
.woocommerce-form-login .password-input { position: relative; display: block; }
.woocommerce-form-login .password-input input { padding-right: 2.6rem; }
.woocommerce-form-login .password-input .show-password-input {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: color-mix(in srgb, var(--maroon-darkest) 55%, transparent);
}
.woocommerce-form-login .password-input .show-password-input.display-password { color: var(--maroon); }

/* remember-me + submit share one .form-row: stack them */
.woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0 0 .25rem;
}

/* custom "Remember me" checkbox */
.woocommerce-form-login__rememberme {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  cursor: pointer;
  user-select: none;
  font-family: var(--font-body);
  font-size: .9rem;
  line-height: 1.2;
  color: var(--maroon-darkest);
}
.woocommerce-form-login__rememberme input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  display: inline-grid;
  place-content: center;
  background: var(--white);
  border: 1px solid color-mix(in srgb, var(--maroon-darkest) 32%, transparent);
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.woocommerce-form-login__rememberme input[type="checkbox"]::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transform-origin: center;
  transition: transform .15s ease;
  box-shadow: inset 1em 1em var(--cream);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.woocommerce-form-login__rememberme input[type="checkbox"]:checked {
  background: var(--maroon-darkest);
  border-color: var(--maroon-darkest);
}
.woocommerce-form-login__rememberme input[type="checkbox"]:checked::before { transform: scale(1); }
.woocommerce-form-login__rememberme input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* the LOG IN pill */
.woocommerce-form-login .woocommerce-form-login__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: .85rem 1.5rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--maroon-darkest);
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background .18s ease, box-shadow .18s ease, transform .12s ease;
}
.woocommerce-form-login .woocommerce-form-login__submit:hover {
  background: var(--maroon);
  box-shadow: 0 6px 18px rgba(7, 20, 16, .16);
}
.woocommerce-form-login .woocommerce-form-login__submit:active { transform: translateY(1px); }
.woocommerce-form-login .woocommerce-form-login__submit:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* lost your password */
.woocommerce-form-login .woocommerce-LostPassword,
body.woocommerce-account:not(.logged-in) .lost_password {
  margin: 1.1rem 0 0;
  text-align: center;
  font-size: .85rem;
}
.woocommerce-form-login .woocommerce-LostPassword a,
body.woocommerce-account:not(.logged-in) .lost_password a {
  color: var(--maroon);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--maroon) 35%, transparent);
  padding-bottom: 1px;
  transition: color .15s ease, border-color .15s ease;
}
.woocommerce-form-login .woocommerce-LostPassword a:hover,
body.woocommerce-account:not(.logged-in) .lost_password a:hover {
  color: var(--maroon-darkest);
  border-color: var(--maroon-darkest);
}

@media (max-width: 480px) {
  .woocommerce-form-login { padding: 1.35rem 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .woocommerce-form-login .woocommerce-Input,
  .woocommerce-form-login input.input-text,
  .woocommerce-form-login__rememberme input[type="checkbox"],
  .woocommerce-form-login__rememberme input[type="checkbox"]::before,
  .woocommerce-form-login .woocommerce-form-login__submit,
  .woocommerce-form-login .woocommerce-LostPassword a { transition: none; }
}

/* ── Reusable 4-column product grid ──────────────────────────────────────────
   ONE responsive rule for every hand-built product grid (homepage "featured"
   strip + related-products), matching the ul.products catalogue breakpoints
   4 → 3 → 2 → 1. Appended last so it wins over the shared .grid3/.grid4/.steps
   media rules above. Article/blog grids stay on .grid3 (3-up by design). */
.grid4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1080px){.grid4{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.grid4{grid-template-columns:1fr}}

/* ── Responsive hardening (final mobile audit 2026-08-09) ─────────────────────
   Runtime audit found ZERO horizontal overflow at 360/390/768 across every page.
   Belt-and-braces so future content can never break mobile. Scoped to the WP
   content wrapper (.entry-content / .wp-block-post-content) ONLY, so an editor-
   inserted wide image on a content page can't overflow — component images
   (.prod__well, hero, stats-bg …) are deliberately untouched to preserve their
   object-fit fills. */
.entry-content img,.entry-content svg,.entry-content video,
.wp-block-post-content img{max-width:100%;height:auto}
/* A long single-token compound name breaks instead of spilling on the narrowest phones. */
.h1,.h2,.pep-buy__title,.pep-hero__title,.hero--pdp .h1{overflow-wrap:break-word}
/* Homepage newsletter row wraps (then stacks) instead of crowding below ~360px. */
.news form{flex-wrap:wrap}
.news input{min-width:0}
@media (max-width:430px){.news form{flex-direction:column}.news form .btn,.news form button{width:100%}}

/* ── Mobile readable-label floor (text audit 2026-08-10) ──────────────────────
   The uppercase mono micro-label system is fixed-rem, so a family of READABLE
   labels rendered below ~10px on phones. Lift them to a comfortable ~11-12px
   floor on small screens ONLY — desktop typography is unchanged. Sizes chosen so
   nothing reflows (short pills / single-line labels). Compliance copy (research-use
   notice + announcement bar) gets a 12px floor. */
@media (max-width:600px){
  .wordmark small{font-size:.66rem;letter-spacing:.2em}
  .prod__badges span{font-size:.7rem}
  .prod__fam,.prod__from{font-size:.7rem}
  .pep-docproof__specimen{font-size:.7rem}
  .pep-coa-cert__stamp{font-size:.64rem}
  .pep-indicative,.prod__price small{font-size:.7rem}
  .pep-cert__seal,.pep-coa-status{font-size:.7rem}
  .footer__legal{font-size:.74rem}
  .announce,.pep-announce__row p{font-size:.74rem;letter-spacing:.08em}
  .pep-ruo,.pep-ruo--flag .pep-ruo__text{font-size:.75rem}
}

/* Per-product Overview / Research Information rich text (client-supplied copy). */
.pep-richtext{display:grid;gap:1rem;font-size:1.02rem;line-height:1.65;color:var(--text,#222)}
.pep-richtext > h2,.pep-richtext > h3{margin:.9rem 0 -.1rem;line-height:1.25;font-family:var(--font-head,Georgia,serif)}
.pep-richtext > h2{font-size:1.5rem}
.pep-richtext > h2:first-child,.pep-richtext > h3:first-child{margin-top:0}
.pep-richtext > h3{font-size:1.15rem;letter-spacing:.01em}
.pep-richtext p{margin:0}
.pep-richtext ul{margin:0;padding-left:1.15rem;display:grid;gap:.35rem}
.pep-richtext li{line-height:1.5}
.pep-richtext a{color:var(--maroon-darkest,#123227);text-underline-offset:2px}
.pep-richtext .pep-refs{list-style:none;padding-left:0;gap:.6rem;font-size:.92rem;color:color-mix(in srgb,var(--text,#222) 78%,transparent)}
.pep-richtext .pep-refs li{padding-left:1.2rem;text-indent:-1.2rem}
.pep-richtext .pep-ruo-note{font-size:.92rem;color:color-mix(in srgb,var(--text,#222) 68%,transparent);border-top:1px solid color-mix(in srgb,var(--maroon-darkest,#123227) 14%,transparent);padding-top:.9rem;margin-top:.2rem}
@media (max-width:600px){.pep-richtext{font-size:.98rem}.pep-richtext > h2{font-size:1.3rem}}

/* ── Sophia homepage simplification (2026-08-22): shop-first hero, 3-step process, single trust section ── */
/* Hero: the video banner sits on the RIGHT (base .hero__media dark well + scrim + object-fit:cover video),
   text on the left. The whole hero is one clean view (.lm-home .hero already = 100svh - header-h). */
/* small RUO line under the hero trust chips — present but not dominant (compliance floor also lives in the announce bar + footer) */
.hero__ruo{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;line-height:1.5;color:color-mix(in srgb,var(--text) 55%,transparent);margin-top:.35rem}
/* tablet + phone: text-only hero (video hidden). Size to content so there is no big empty gap
   below the text; the product cards sit right after it (products appear with minimal scroll). */
@media(max-width:900px){.hero--shop .hero__media{display:none}.lm-home .hero--shop{display:block;min-height:auto}.hero--shop .hero__body{justify-content:flex-start;padding-bottom:clamp(1.25rem,4vw,2rem)}}
/* 3-column process variant (base .steps is repeat(4,1fr)) */
.steps--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.steps--3{grid-template-columns:1fr}}
/* one WHY section on the homepage: hide the site-wide 6-up why-choose on the front page only (the front page is the only page with .lm-home) */
body:has(.lm-home) .pep-why{display:none}
/* The peptide "Why choose" band (research-vial / batch-COA framing) must not bleed onto dietary-supplement pages. */
body.pep-supp-page .pep-why{display:none}
/* Tighten the vertical rhythm between homepage sections (base --pad-y up to 6rem left large gaps) */
.lm-home .section{padding-block:clamp(2rem,4vw,3.25rem)}
.lm-home .process{padding-block:clamp(2rem,4vw,3.25rem)}
/* Shop-by-category: force a clean 4-across on the homepage (base grid auto-fits to 3+1) */
.lm-home .pep-coll-grid{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.lm-home .pep-coll-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.lm-home .pep-coll-grid{grid-template-columns:1fr}}