/*
 * Oath lab results design system, taken verbatim from the live plugin
 * (oath-lab-results-v2/assets/css/lab-v4.css) so the certificate pages and the
 * lab-tested block inside product descriptions render exactly as they do on the
 * live site. Every rule is scoped to .oath-lab-v4, so it cannot affect the rest
 * of the theme. Do not hand edit; refetch from source if the live design changes.
 */

/* ==========================================================
   OATH LAB RESULTS — V4 DESIGN SYSTEM
   Single unified stylesheet for archive, single cert, and product badge.
   Typography: Fraunces display serif (matches the Oath wordmark/label),
   Roboto sans (matches the live site body), Roboto Mono only for
   genuine identifiers (batch numbers, CAS).
   ========================================================== */

/* ----- DESIGN TOKENS (scoped to .oath-lab-v4 so they don't pollute Savoy globals) ----- */
.oath-lab-v4 {
  /* Colors — base palette */
  --color-cream:       #f5efe3;
  --color-cream-soft:  #faf6ed;
  --color-off-white:   #fafafa;
  --color-white:       #ffffff;
  --color-ink:         #0a0a0a;
  --color-text:        #282828;
  --color-text-soft:   #555555;
  --color-text-muted:  #888888;
  --color-border:      #e7e3dc;
  --color-border-soft: #f0ece4;
  --color-gold:        #dc9814;
  --color-gold-soft:   #fff8ec;
  --color-sage:        #7ea98f;
  --color-sage-deep:   #3f6a54;   /* WCAG AA contrast on sage-soft */
  --color-sage-soft:   #e9f1ec;
  --color-red:         #c0392b;
  --color-red-soft:    #fdecea;

  /* Typography — Fraunces stays (it matches the elegant Oath wordmark/label
     serif); sans matches the live site body (Roboto via Elementor). Mono is
     reserved for genuine identifiers and stays in the Roboto family. */
  --font-serif: var(--savoy-serif, 'Fraunces', 'Playfair Display', Georgia, serif);
  --font-sans:  var(--savoy-sans, 'Roboto', -apple-system, 'Helvetica Neue', Arial, sans-serif);
  --font-mono:  'Roboto Mono', 'Menlo', monospace;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* Shadows — single very subtle elevation */
  --shadow-card: 0 1px 2px rgba(10,10,10,.04), 0 4px 16px rgba(10,10,10,.04);
  --shadow-lift: 0 2px 4px rgba(10,10,10,.06), 0 10px 28px rgba(10,10,10,.07);

  /* Layout */
  --container-max: 1200px;
}

/* ----- SCOPED RESET (only within .oath-lab-v4 container — doesn't touch Savoy) ----- */
.oath-lab-v4, .oath-lab-v4 *, .oath-lab-v4 *::before, .oath-lab-v4 *::after {
  box-sizing: border-box;
}
.oath-lab-v4 {
  font-family: var(--font-sans);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
  font-size: 16px;
}
.oath-lab-v4 img { max-width: 100%; display: block; }
.oath-lab-v4 a { color: inherit; text-decoration: none; }
.oath-lab-v4 button { font: inherit; cursor: pointer; }

/* Focus indicator for plugin-rendered interactives only */
.oath-lab-v4 :focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
  border-radius: inherit;
}

/* Respect motion preferences (scoped to our elements) */
@media (prefers-reduced-motion: reduce) {
  .oath-lab-v4, .oath-lab-v4 *, .oath-lab-v4 *::before, .oath-lab-v4 *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================
   Everything below is nested inside .oath-lab-v4 to prevent
   style leaks into Savoy. Native CSS nesting (modern browsers).
   ========================================================== */
.oath-lab-v4 {

/* Site header is Savoy's — we don't render our own. */
/* ----- CONTAINER ----- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ----- ARCHIVE HEADER (legacy, simple) ----- */
.archive-hero {
  padding: 64px 24px 32px;
  text-align: center;
}
.archive-eyebrow {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
  font-weight: 600;
  margin-bottom: 12px;
}
.archive-hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 500;
  margin: 0 0 12px 0;
  color: var(--color-ink);
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.archive-hero p {
  max-width: 620px;
  margin: 0 auto;
  color: var(--color-text-soft);
  font-size: 16px;
  line-height: 1.6;
}

/* ----- ARCHIVE EDITORIAL HERO (new classy version) ----- */
.archive-editorial {
  /* Soft top-to-bottom cream wash — depth without noise */
  background: linear-gradient(180deg, var(--color-cream-soft) 0%, var(--color-cream) 100%);
  padding: 96px 24px 64px;
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}
.archive-editorial .ae-eyebrow {
  /* Letter-spaced Roboto caps — matches the site's own amber eyebrows */
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
  font-weight: 600;
  margin-bottom: 28px;
}
.archive-editorial h1 {
  font-family: var(--font-serif);
  font-size: clamp(52px, 8vw, 104px);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--color-ink);
}
.archive-editorial h1 .ae-line {
  display: block;
}
.archive-editorial h1 .ae-dot {
  color: var(--color-gold);
}
.archive-editorial .ae-sub {
  max-width: 620px;
  margin: 32px auto 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 2vw, 22px);
  color: var(--color-text);
  line-height: 1.45;
}
.archive-editorial .ae-login-hint {
  margin: 20px auto 0;
  font-size: 14px;
  color: var(--color-text-soft);
  letter-spacing: 0.02em;
}
.archive-editorial .ae-login-hint strong {
  color: var(--color-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.archive-editorial .ae-login-hint a {
  color: var(--color-gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.archive-editorial .ae-login-hint a:hover {
  opacity: 0.8;
}
.archive-editorial .ae-rule {
  width: 72px;
  height: 1px;
  background: linear-gradient(90deg, rgba(220, 152, 20, 0) 0%, var(--color-gold) 18%, var(--color-gold) 82%, rgba(220, 152, 20, 0) 100%);
  margin: 40px auto 28px;
  border: 0;
}
.archive-editorial .ae-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 0;
  row-gap: 28px;
  max-width: 880px;
  margin: 0 auto;
}
.archive-editorial .ae-stat {
  text-align: center;
  padding: 0 20px;
}
/* Hairline separators between stats — editorial "specimen strip" feel */
.archive-editorial .ae-stat + .ae-stat {
  border-left: 1px solid var(--color-border);
}
.archive-editorial .ae-stat-value {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 500;
  color: var(--color-ink);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.archive-editorial .ae-stat-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: 6px;
  font-weight: 600;
}
/* Tablet — ease hero padding, keep the 4-up stat strip */
@media (max-width: 900px) {
  .archive-editorial { padding: 72px 24px 52px; }
  .archive-editorial .ae-stat { padding: 0 14px; }
}
/* Mobile — 2x2 stat grid; separators only between columns, not rows */
@media (max-width: 600px) {
  .archive-editorial { padding: 56px 20px 44px; }
  .archive-editorial h1 { font-size: clamp(44px, 13vw, 64px); }
  .archive-editorial .ae-sub { margin-top: 24px; }
  .archive-editorial .ae-stats { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
  .archive-editorial .ae-stat + .ae-stat { border-left: 0; }
  .archive-editorial .ae-stat:nth-child(even) { border-left: 1px solid var(--color-border); }
}
.archive-editorial + .archive-search {
  margin-top: -24px;
  position: relative;
  z-index: 5;
}
.archive-editorial + .archive-search input {
  box-shadow: var(--shadow-card);
}

/* ----- SEARCH ----- */
.archive-search {
  max-width: 560px;
  margin: 32px auto 48px;
  position: relative;
}
.archive-search input {
  width: 100%;
  font: inherit;
  font-size: 15px;
  padding: 16px 48px 16px 52px;
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  background: var(--color-white);
  color: var(--color-text);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.archive-search input::placeholder { color: var(--color-text-muted); }
.archive-search input:hover { border-color: #d8d1c3; }
.archive-search input:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 4px var(--color-gold-soft), var(--shadow-lift);
}
.archive-search svg {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--color-text-muted);
  pointer-events: none;
}
/* Clear button — archive-v4.js toggles .visible while a query is active */
.archive-search .search-clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 20px;
  line-height: 1;
}
.archive-search .search-clear.visible { display: flex; }
.archive-search .search-clear:hover {
  color: var(--color-ink);
  background: var(--color-cream-soft);
}
/* Live result count — absolute so the icon/clear stay centered on the input */
.archive-search .search-count {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  text-align: center;
  font-size: 12px;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}
/* Keep the floating search off the screen edges on small phones */
@media (max-width: 620px) {
  .archive-search { margin-left: 20px; margin-right: 20px; }
}

/* ----- ARCHIVE GRID ----- */
.coa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  padding: 0 24px 96px;
  max-width: var(--container-max);
  margin: 0 auto;
}

/* ----- COA CARD ----- */
.coa-card,
.history-row,
.related-card,
.vs-volume {
  text-decoration: none;
  color: inherit;
}
.coa-card {
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.coa-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}

/* Swatch section (top) — product images are 1:1 so we match that exactly */
.coa-swatch {
  position: relative;
  background: #fafafa;
  padding: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.coa-swatch .product-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.coa-swatch .oath-mark {
  font-family: var(--font-serif);
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  line-height: 1;
}
.coa-swatch .coa-compound {
  margin-top: 20px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.5px;
  color: var(--color-ink);
}
.coa-swatch .coa-cas {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-soft);
  margin-top: 2px;
}
.coa-swatch .coa-footer-text {
  position: absolute;
  bottom: 14px;
  left: 24px;
  right: 24px;
  font-size: 11px;
  color: var(--color-text-muted);
  letter-spacing: 0.3px;
}
.coa-swatch .coa-sale-pill {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-gold);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Meta section (bottom) */
.coa-meta {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.coa-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--color-ink);
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0;
}
.coa-title .coa-volume {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-gold);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: 6px;
  padding: 2px 7px;
  background: var(--color-gold-soft);
  border-radius: var(--r-sm);
}
/* Combined-product card: multiple volumes tested */
.coa-volumes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.coa-volumes .vol-pill {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-gold);
  letter-spacing: 0.4px;
  padding: 2px 7px;
  background: var(--color-gold-soft);
  border: 1px solid #f0dab0;
  border-radius: var(--r-sm);
}
/* Muted mono fallback for cards with many volumes (4+) — avoids gold-wall effect */
.coa-volumes-text {
  font-size: 11px;
  letter-spacing: 0.3px;
  color: var(--color-text-muted);
  margin-top: 2px;
}
.coa-metrics {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--color-text-soft);
}
.coa-metric-sage {
  color: var(--color-sage-deep);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.coa-metric-sep {
  color: var(--color-border);
}
.coa-meta-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border-soft);
  font-size: 12px;
  color: var(--color-text-muted);
}
.coa-meta-view {
  color: var(--color-ink);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.3px;
}
.coa-card:hover .coa-meta-view { color: var(--color-gold); }

/* Endotoxin-only card variant */
.coa-card[data-type="endotoxin"] .coa-metric-sage::before {
  content: "✓ ";
}

/* "Endo tested ever" compact pill (used on cards + badges) */
.endo-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--color-sage-soft);
  color: var(--color-sage-deep);
  padding: 3px 8px;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.4;
}
.endo-flag .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-sage);
}
.endo-flag-inline {
  font-size: 11px;
  padding: 4px 10px;
}

/* ==========================================================
   SINGLE CERT PAGE
   ========================================================== */

.cert-page {
  background: var(--color-off-white);
  min-height: 100vh;
}
.cert-breadcrumb {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 20px 24px 0;
  font-size: 13px;
  color: var(--color-text-muted);
}
.cert-breadcrumb a:hover { color: var(--color-gold); }
.cert-breadcrumb .sep { margin: 0 8px; color: var(--color-border); }
/* Enlarged touch targets on mobile (iOS HIG: ≥44px) */
@media (max-width: 600px) {
  .cert-breadcrumb a {
    display: inline-block;
    padding: 8px 2px;
    min-height: 36px;
  }
}

.cert-hero {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 24px 24px 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 48px;
}
@media (max-width: 960px) {
  .cert-hero { grid-template-columns: 1fr; gap: 32px; }
}

.cert-hero-left .cert-eyebrow {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
  font-weight: 600;
  margin-bottom: 10px;
}
.cert-hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(34px, 4.5vw, 52px);
  font-weight: 500;
  margin: 0 0 8px 0;
  color: var(--color-ink);
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.cert-hero .cert-subtitle {
  font-family: var(--font-sans);
  font-size: 18px;
  color: var(--color-text-soft);
  font-weight: 400;
  margin: 0 0 24px 0;
}
.cert-hero .cert-subtitle .cert-volume-pill {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-gold);
  background: var(--color-gold-soft);
  border: 1px solid #f0dab0;
  padding: 2px 10px;
  border-radius: var(--r-sm);
  margin-left: 8px;
  vertical-align: middle;
}

/* Tested badge (sage green) */
.tested-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-sage-soft);
  color: var(--color-sage-deep);
  padding: 6px 14px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.tested-badge .check {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: var(--color-sage);
  color: #fff;
  border-radius: 3px;
  text-align: center;
  line-height: 16px;
  font-size: 11px;
  font-weight: 700;
}

/* Metric strip (right column on desktop, below hero on mobile) */
.metric-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 24px;
}
.metric-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.metric-box {
  background: var(--color-off-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-md);
  padding: 14px 10px;
  text-align: center;
}
.metric-box .metric-value {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-ink);
  letter-spacing: -0.01em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.metric-box .metric-value.is-sage { color: var(--color-sage-deep); }
/* Genuine identifiers (batch numbers) render in mono; measurements (purity %)
   and dates stay Roboto. Applied selectively via .is-mono — the de-mono sweep
   deliberately removed mono from the shared .metric-value. */
.metric-box .metric-value.is-mono { font-family: var(--font-mono); font-variant-numeric: normal; }
.metric-box .metric-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-top: 6px;
}

.cert-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: all .15s ease;
  border: 1px solid transparent;
  font-family: inherit;
}
.btn-primary {
  background: var(--color-sage);
  color: #fff;
}
.btn-primary:hover { background: var(--color-sage-deep); }
.btn-secondary {
  background: var(--color-ink);
  color: #fff;
}
.btn-secondary:hover { background: #2a2a2a; color: #fff; }
.btn-ghost {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-border);
}
.btn-ghost:hover { border-color: var(--color-ink); background: var(--color-off-white); }

/* ----- SECTION NAV (desktop sticky) ----- */
.cert-layout {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px 96px;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 48px;
}
@media (max-width: 960px) {
  .cert-layout { grid-template-columns: 1fr; }
  .section-nav { display: none; }
}

.section-nav {
  position: sticky;
  top: 24px;
  align-self: start;
  border-left: 1px solid var(--color-border-soft);
  padding-left: 16px;
}
.section-nav-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 12px;
  font-weight: 600;
}
.section-nav ul { list-style: none; padding: 0; margin: 0; }
.section-nav li { margin-bottom: 8px; }
.section-nav a {
  display: block;
  padding: 6px 0;
  font-size: 13px;
  color: var(--color-text-soft);
  transition: color .1s;
}
.section-nav a.active, .section-nav a:hover {
  color: var(--color-ink);
  font-weight: 500;
}

/* ----- CONTENT SECTIONS ----- */
.cert-section { margin-bottom: 64px; }
.cert-section:last-child { margin-bottom: 0; }

.section-heading {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 500;
  color: var(--color-ink);
  letter-spacing: -0.01em;
  margin: 0 0 8px 0;
}
.section-subheading {
  font-size: 14px;
  color: var(--color-text-soft);
  margin: 0 0 24px 0;
}

/* Data table (flat, clean) */
.data-table {
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin: 0;
}
.data-row {
  display: flex;
  border-bottom: 1px solid var(--color-border-soft);
}
.data-row:last-child { border-bottom: 0; }
.data-row:nth-child(even) { background: var(--color-off-white); }
.data-label {
  width: 40%;
  padding: 14px 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-right: 1px solid var(--color-border-soft);
}
.data-value {
  flex: 1;
  padding: 14px 20px;
  font-size: 15px;
  color: var(--color-text);
}
.data-value .mono { font-family: var(--font-mono); font-size: 14px; }
.data-value .highlight {
  font-weight: 600;
  color: var(--color-sage-deep);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
  .data-row { flex-direction: column; }
  .data-label { width: 100%; border-right: 0; padding: 10px 16px 4px; }
  .data-value { padding: 4px 16px 14px; }
}

/* Endotoxin replicate grid */
.replicate-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 600px) {
  .replicate-grid { grid-template-columns: 1fr; }
}
.replicate-card {
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-md);
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.replicate-card .rep-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.replicate-card .rep-value {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-sage-soft);
  color: var(--color-sage-deep);
  padding: 5px 12px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.replicate-card .rep-value.is-fail {
  background: var(--color-red-soft);
  color: var(--color-red);
}
.replicate-card .rep-sensitivity {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 4px;
}
.rep-header { display: flex; flex-direction: column; gap: 4px; }

/* Callout (for method, disclaimers, etc) */
.callout {
  background: var(--color-cream-soft);
  border: 1px solid #f0dab0;
  border-left: 3px solid var(--color-gold);
  border-radius: var(--r-md);
  padding: 18px 22px;
  margin: 16px 0 24px;
}
.callout-heading {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 4px;
  letter-spacing: 0.2px;
}
.callout p { margin: 0; font-size: 14px; color: var(--color-text-soft); line-height: 1.55; }

/* RUO disclaimer */
.ruo-strip {
  background: var(--color-ink);
  color: #cfcfcf;
  padding: 24px;
  border-radius: var(--r-lg);
  margin-top: 32px;
  font-size: 13px;
  line-height: 1.6;
}
.ruo-strip strong { color: #fff; display: block; font-size: 14px; margin-bottom: 4px; letter-spacing: 0.3px; }

/* PDF embed */
.pdf-wrap {
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.pdf-frame {
  width: 100%;
  height: 880px;
  border: 0;
  display: block;
  background: var(--color-off-white);
}
.pdf-actions {
  padding: 16px 20px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  border-top: 1px solid var(--color-border-soft);
  background: var(--color-off-white);
}
.pdf-actions .btn { padding: 10px 18px; font-size: 13px; }

/* Mobile touch target comfort — all .btn hit the iOS 44px baseline on small screens */
@media (max-width: 600px) {
  .btn { padding: 14px 20px; min-height: 44px; }
  .vs-volume { padding: 12px 16px; }
}

/* History list */
.history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.history-row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 16px;
  padding: 14px 18px;
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-md);
  align-items: center;
  transition: border-color .1s, background .1s;
}
.history-row:hover { border-color: var(--color-gold); }
.history-row.is-current {
  background: var(--color-gold-soft);
  border-color: #f0dab0;
}
.history-metric {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-sage-deep);
  font-variant-numeric: tabular-nums;
}
.history-details { font-size: 13px; }
.history-batch {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text);
  font-weight: 600;
}
.history-date {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
}
.history-current-tag {
  font-size: 11px;
  color: var(--color-gold);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.history-view {
  font-size: 12px;
  color: var(--color-text-muted);
}
.history-row:hover .history-view { color: var(--color-gold); }

/* ==========================================================
   PRODUCT-PAGE CoA BADGE (standalone component preview)
   ========================================================== */

.product-badge {
  /* Match the surrounding product-page content width (e.g. the overview block
     directly below it) instead of the old fixed 720px, which left the badge
     visibly narrower than its neighbours on desktop. Falls to container width
     when narrower; collapses to a single column below 720px (see media query). */
  max-width: var(--container-max);
  margin: 32px auto;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: 24px 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
}
/* Stack into one column below 720px: the two-column split gets too tight for
   the text on tablet/large-phone widths once the badge fills the full content
   width. */
@media (max-width: 720px) {
  .product-badge { grid-template-columns: 1fr; }
  .product-badge .badge-right { width: 100%; }
}
.product-badge .badge-heading {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--color-ink);
  margin: 12px 0 4px;
  letter-spacing: -0.01em;
}
.product-badge .badge-text {
  font-size: 14px;
  color: var(--color-text-soft);
  margin: 0;
}
.product-badge .badge-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 280px;
}
.product-badge .badge-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.product-badge .badge-metrics .metric-box {
  padding: 10px 8px;
}
.product-badge .btn {
  padding: 12px 18px;
  font-size: 13px;
}

/* ==========================================================
   V2 — CONVERSION + POLISH COMPONENTS
   ========================================================== */

/* ----- Volumes-tested strip (cert page — shows all volumes of this product) ----- */
.volumes-strip {
  max-width: var(--container-max);
  margin: 0 auto 24px;
  padding: 0 24px;
}
.volumes-strip .vs-inner {
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-lg);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.volumes-strip .vs-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.volumes-strip .vs-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
}
.volumes-strip .vs-volume {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--color-off-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-md);
  transition: all .12s;
  font-size: 13px;
  color: var(--color-text);
}
.volumes-strip .vs-volume:hover {
  border-color: var(--color-ink);
  background: var(--color-white);
}
.volumes-strip .vs-volume.is-current {
  background: var(--color-sage-soft);
  border-color: var(--color-sage);
  color: var(--color-sage-deep);
  font-weight: 600;
}
.volumes-strip .vs-vol {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink);
}
.volumes-strip .vs-volume.is-current .vs-vol { color: var(--color-sage-deep); }
.volumes-strip .vs-count {
  font-size: 11px;
  color: var(--color-text-muted);
}
.volumes-strip .vs-volume.is-current .vs-count { color: var(--color-sage-deep); }

/* ----- Newer-test-available banner (top of older-batch pages) ----- */
.newer-test-banner {
  max-width: var(--container-max);
  margin: 20px auto 28px;
  padding: 14px 20px;
  background: var(--color-gold-soft);
  border: 1px solid #f0dab0;
  border-left: 3px solid var(--color-gold);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
}
.newer-test-banner .nb-icon {
  font-size: 18px;
  line-height: 1;
}
.newer-test-banner .nb-body { flex: 1; color: var(--color-text); }
.newer-test-banner .nb-body strong { color: var(--color-ink); }
.newer-test-banner .nb-body a {
  color: var(--color-gold);
  font-weight: 600;
  border-bottom: 1px solid transparent;
}
.newer-test-banner .nb-body a:hover { border-bottom-color: var(--color-gold); }
.newer-test-banner .nb-dismiss {
  background: transparent;
  border: 0;
  font-size: 20px;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 4px 10px;
  line-height: 1;
  min-width: 36px;
  min-height: 36px;
}
/* Mobile: stack icon/body/dismiss so the "View latest batch" link has room */
@media (max-width: 600px) {
  .newer-test-banner {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 16px 20px;
  }
  .newer-test-banner .nb-body a {
    display: inline-block;
    margin-top: 4px;
  }
}

/* ----- CTA stack (right rail: Shop + PDF buttons) ----- */
.cta-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-soft);
}

/* ----- Tablet sticky scroll topbar ----- */
.scroll-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border-soft);
  transform: translateY(-100%);
  transition: transform 0.22s ease;
  z-index: 90;
  padding: 10px 20px;
}
.scroll-topbar.is-visible { transform: translateY(0); }
.scroll-topbar-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.scroll-topbar img {
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--color-cream);
}
.scroll-topbar .stb-info { flex: 1; min-width: 0; }
.scroll-topbar .stb-name {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--color-ink);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scroll-topbar .stb-meta {
  font-size: 11px;
  color: var(--color-text-muted);
}
.scroll-topbar .stb-meta .pur { color: var(--color-sage-deep); font-weight: 600; margin-right: 6px; }
/* Batch value only — the surrounding meta mixes purity/endotoxin text, which
   stays Roboto, so the batch code is wrapped in .mono rather than mono-ing the
   whole line. */
.scroll-topbar .stb-meta .mono { font-family: var(--font-mono); }
.scroll-topbar .stb-price {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--color-ink);
  font-weight: 500;
  margin-right: 6px;
}
.scroll-topbar .btn {
  padding: 9px 14px;
  font-size: 13px;
}

/* Show scroll-topbar on tablet AND desktop (mobile uses the bottom bar instead) */
@media (max-width: 600px) { .scroll-topbar { display: none; } }

/* ----- Mobile pinned bar (simplified — just points to store, no cart) ----- */
.mobile-cta-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--color-white);
  border-top: 1px solid var(--color-border-soft);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.05);
  z-index: 95;
  /* reserve space for dismiss pill above the bar's right edge */
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translateY(0);
  transition: transform 0.22s ease;
}
.mobile-cta-bar.is-dismissed { transform: translateY(100%); }
.mobile-cta-bar img {
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--color-cream);
  flex-shrink: 0;
}
.mobile-cta-bar .mcb-info { flex: 1; min-width: 0; }
.mobile-cta-bar .mcb-name {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--color-ink);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mobile-cta-bar .mcb-sub {
  font-size: 11px;
  color: var(--color-text-muted);
}
.mobile-cta-bar .mcb-sub .pur { color: var(--color-sage-deep); font-weight: 600; margin-right: 4px; }
.mobile-cta-bar .btn {
  padding: 12px 18px;
  font-size: 13px;
  flex-shrink: 0;
  min-height: 44px;
}
/* Dismiss — moved ABOVE the bar as a small pill so it doesn't overlap Shop button */
.mobile-cta-bar .mcb-dismiss {
  position: absolute;
  top: -28px; right: 10px;
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-pill);
  width: 44px; height: 44px;
  font-size: 20px;
  color: var(--color-text-soft);
  cursor: pointer;
  line-height: 40px;
  padding: 0;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
}

/* When mobile CTA bar is visible, reserve space so it doesn't cover footer content */
@media (max-width: 600px) {
  body { padding-bottom: 72px; }
}
@media (min-width: 601px) { .mobile-cta-bar { display: none; } }

/* ----- Lab seal card ----- */
.lab-seal {
  display: flex;
  gap: 18px;
  padding: 18px 22px;
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-md);
  align-items: center;
  margin-top: 16px;
}
.lab-seal-logo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-sage-soft);
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--color-sage-deep);
  font-weight: 500;
  flex-shrink: 0;
  border: 1px solid var(--color-sage);
}
.lab-seal-info { flex: 1; }
.lab-seal-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink);
  margin: 0 0 2px 0;
}
.lab-seal-meta {
  font-size: 12px;
  color: var(--color-text-soft);
  line-height: 1.5;
}
.lab-seal-meta .lab-seal-date {
  color: var(--color-text-muted);
  margin-left: 4px;
}
.lab-seal-sig {
  font-family: 'Caveat', 'Dancing Script', cursive;
  font-size: 24px;
  color: var(--color-text-soft);
  transform: rotate(-4deg);
  opacity: 0.75;
  padding-right: 10px;
}
@media (max-width: 600px) {
  .lab-seal-sig { display: none; }
}

/* ----- Batch summary (above history list) ----- */
.batch-summary {
  background: var(--color-cream-soft);
  border: 1px solid #f0dab0;
  border-left: 3px solid var(--color-gold);
  border-radius: var(--r-md);
  padding: 16px 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}
.batch-summary-item { text-align: left; }
.batch-summary-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-ink);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.batch-summary-label {
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
  margin-top: 4px;
}
@media (max-width: 600px) {
  .batch-summary { grid-template-columns: 1fr 1fr; gap: 12px; }
}

/* ----- FAQ accordion ----- */
.faq-list {
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.faq-item {
  border-bottom: 1px solid var(--color-border-soft);
}
.faq-item:last-child { border-bottom: 0; }
.faq-item summary {
  padding: 16px 22px;
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-ink);
  transition: background .1s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: var(--color-off-white); }
.faq-item summary::after {
  content: '+';
  font-size: 20px;
  color: var(--color-text-muted);
  transition: transform 0.2s;
  flex-shrink: 0;
  margin-left: 12px;
}
.faq-item[open] summary::after { content: '−'; color: var(--color-gold); }
.faq-answer {
  padding: 0 22px 18px;
  font-size: 14px;
  color: var(--color-text-soft);
  line-height: 1.6;
}

/* ----- Related products row ----- */
.related-section {
  margin: 64px 0 0;
  padding-top: 32px;
  border-top: 1px solid var(--color-border-soft);
}
.related-heading {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--color-ink);
  margin: 0 0 20px 0;
  letter-spacing: -0.01em;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 800px) { .related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .related-grid { grid-template-columns: 1fr; } }
.related-card {
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all .15s;
}
.related-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-gold);
}
.related-card .rc-swatch {
  background: var(--color-cream);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 24px;
  color: var(--color-ink);
}
.related-card .rc-meta {
  padding: 10px 12px;
}
.related-card .rc-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-ink);
  line-height: 1.2;
}
.related-card .rc-metric {
  font-size: 11px;
  color: var(--color-sage-deep);
  font-weight: 600;
  margin-top: 2px;
}

/* .trust-row removed — wasn't rendered in final design */

/* ----- Print stylesheet ----- */
@media print {
  .section-nav,
  .scroll-topbar,
  .mobile-cta-bar,
  .cta-stack,
  .newer-test-banner,
  .related-section,
  .pdf-actions {
    display: none !important;
  }
  body { background: #fff; }
  .cert-layout { grid-template-columns: 1fr !important; padding: 0 !important; }
  .cert-hero { grid-template-columns: 1fr !important; padding: 0 !important; }
  .metric-card { position: static !important; box-shadow: none !important; border: 1px solid #ccc !important; }
  .data-table, .callout, .lab-seal, .faq-list { break-inside: avoid; }
  .cert-section { break-inside: avoid-page; page-break-inside: avoid; }
  .pdf-frame { display: none !important; }
  .pdf-wrap::after {
    content: 'PDF is available online at this certificate URL.';
    display: block;
    padding: 40px;
    text-align: center;
    color: #666;
    font-size: 14px;
  }
  /* Only expand hrefs inside history rows on print — not every link */
  .history-row[href]::after {
    content: " (" attr(href) ")";
    font-size: 9px;
    color: #888;
    word-break: break-all;
  }
  .cert-print-qr {
    display: block !important;
    float: right;
    width: 90px;
    height: 90px;
    margin: 0 0 10px 10px;
  }
}
.cert-print-qr { display: none; }

} /* ========== end .oath-lab-v4 nested wrapper ========== */