/* togo-page-misc.css
   ─────────────────────────────────────────────────────────────────
   Per-page polish voor ALLE resterende content / tool / help / artikel-pages
   die nog geen eigen togo-page-*.css hadden.

   Geladen NA togo-final-polish.css → overrides plakken.
   Strategie:
     - Alle selectors gescoped via body[data-page="..."] of body[data-page^="..."]
     - Mobile-first (<=640) ingebed via @media blocks
     - Print stylesheet aan het einde
     - Light-theme contrast via [data-theme="light"] of @media (prefers-color-scheme: light)
     - prefers-reduced-motion respecteren

   Pages in scope (23):
     help / glossary / lab / fresh-batch / sustainability
     changelog / whats-new / roadmap / roadmap-public
     loyalty / pay / success / track-order / bulk-order
     compound-compare / compound-graph / calc-reconstitution / stack-builder
     peptide-research-101 / article-lyo / article-purity
     coa / article-coa

   Geen levende wezens. Geen Klarna. Royal Restraint.
   ──────────────────────────────────────────────────────────────── */

/* Long-form content pages cannot use the global section lazy-render
   placeholder from glowup.css. Several sections are taller than 600px on
   mobile, so content-visibility:auto lets following sections reserve too
   little height and visually overlap while scrolling. */
body[data-page="peptide-research-101"] .section,
body[data-page="article-lyo"] .section,
body[data-page="article-purity"] .section,
body[data-page="article-coa"] .section,
body[data-page="coa"] .section,
body[data-page="how-to-read-a-coa"] .section,
body[data-page="fresh-batch"] .section,
body[data-page="sustainability"] .section {
  content-visibility: visible !important;
  contain-intrinsic-size: none !important;
}


/* ═══════════════════════════════════════════════════════════════════
   ISSUE 01 — Shared content-page reading rhythm
   Lange teksten op help / glossary / lab / fresh-batch / sustainability
   / peptide-research-101 / article-* / coa / how-to-read-a-coa
   kregen brede regels (>80ch) op desktop → moeilijk te scannen.
   Fix: typografische max-inline op .section__lead + .card__body-text
        en consistente line-height + paragraph-spacing.
   ─────────────────────────────────────────────────────────────── */
body[data-page="help"] .section__lead,
body[data-page="glossary"] .section__lead,
body[data-page="lab"] .section__lead,
body[data-page="fresh-batch"] .section__lead,
body[data-page="sustainability"] .section__lead,
body[data-page="peptide-research-101"] .section__lead,
body[data-page="article-lyo"] .section__lead,
body[data-page="article-purity"] .section__lead,
body[data-page="article-coa"] .section__lead,
body[data-page="coa"] .section__lead,
body[data-page="how-to-read-a-coa"] .section__lead {
  max-width: 68ch;
  line-height: 1.62;
  text-wrap: pretty;
}

body[data-page="peptide-research-101"] .section .card__body-text,
body[data-page="article-lyo"] .section .card__body-text,
body[data-page="article-purity"] .section .card__body-text,
body[data-page="article-coa"] .section .card__body-text {
  max-width: 70ch;
  line-height: 1.66;
  text-wrap: pretty;
}


/* ═══════════════════════════════════════════════════════════════════
   ISSUE 02 — Vertical rhythm: long-form articles
   Sections op artikel-pages mochten een hair krappere top-padding op
   mobile (anders verticaal lui scrollen).
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  body[data-page="peptide-research-101"] .section,
  body[data-page="article-lyo"] .section,
  body[data-page="article-purity"] .section,
  body[data-page="article-coa"] .section {
    padding-block: clamp(28px, 6vw, 48px);
  }
  body[data-page="peptide-research-101"] .section__head,
  body[data-page="article-lyo"] .section__head,
  body[data-page="article-purity"] .section__head,
  body[data-page="article-coa"] .section__head {
    margin-bottom: 14px;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   ISSUE 03 — Section heading hierarchy on article pages
   h2 binnen primer/articles was te dicht bij section__eyebrow.
   ─────────────────────────────────────────────────────────────── */
body[data-page="peptide-research-101"] .section__head .section__title,
body[data-page="article-lyo"] .section__head .section__title,
body[data-page="article-purity"] .section__head .section__title,
body[data-page="article-coa"] .section__head .section__title {
  margin-top: 6px;
  letter-spacing: -0.012em;
}


/* ═══════════════════════════════════════════════════════════════════
   ISSUE 04 — Glossary: smoothed scroll-into-view + scroll-margin
   Wanneer A-Z anchors gebruikt worden, header overlapt anders het
   doel-element. scroll-margin-top fixt dit.
   ─────────────────────────────────────────────────────────────── */
body[data-page="glossary"] {
  scroll-behavior: smooth;
}
body[data-page="glossary"] .card[id],
body[data-page="glossary"] [id^="g-"],
body[data-page="glossary"] [id^="letter-"] {
  scroll-margin-top: 100px;
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="glossary"] {
    scroll-behavior: auto;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   ISSUE 05 — Glossary: search bar + locale buttons alignment
   Op mobile vielen EN/NL knoppen op een andere regel terwijl search
   te smal werd. Fix: explicit row layout met wrap.
   ─────────────────────────────────────────────────────────────── */
body[data-page="glossary"] .glossary-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
body[data-page="glossary"] .glossary-search__input {
  flex: 1 1 220px;
  min-width: 0;
}
body[data-page="glossary"] .glossary-locale {
  display: inline-flex;
  gap: 4px;
  flex-shrink: 0;
}
body[data-page="glossary"] .glossary-locale__btn {
  min-height: 36px;
  padding-inline: 12px;
}
@media (max-width: 480px) {
  body[data-page="glossary"] .glossary-search {
    gap: 8px;
  }
  body[data-page="glossary"] .glossary-locale {
    width: 100%;
    justify-content: flex-end;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   ISSUE 06 — Glossary cards: more breathing room + monospace look op term
   ─────────────────────────────────────────────────────────────── */
body[data-page="glossary"] .card {
  padding-block: 18px;
}
body[data-page="glossary"] .card__title {
  letter-spacing: -0.005em;
  text-wrap: balance;
}


/* ═══════════════════════════════════════════════════════════════════
   ISSUE 07 — Help center quick-link cards: equal heights + hover-lift
   ─────────────────────────────────────────────────────────────── */
body[data-page="help"] .section--surface .grid > a.card,
body[data-page="help"] .section--surface .grid > .card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 100%;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
body[data-page="help"] a.card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--color-accent) 35%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="help"] a.card,
  body[data-page="help"] a.card:hover {
    transition: none;
    transform: none;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   ISSUE 08 — Help center: <details>/FAQ accordion alignment
   FAQ-style <details> waren niet alignment-consistent met de cards
   eromheen op mobile.
   ─────────────────────────────────────────────────────────────── */
body[data-page="help"] details,
body[data-page="article-coa"] details,
body[data-page="how-to-read-a-coa"] details {
  border: 1px solid color-mix(in oklab, var(--color-border, #2a2f3a) 100%, transparent);
  border-radius: 12px;
  padding: 12px 16px;
  margin-block: 8px;
  background: color-mix(in oklab, var(--color-surface, #15171e) 60%, transparent);
}
body[data-page="help"] details > summary,
body[data-page="article-coa"] details > summary,
body[data-page="how-to-read-a-coa"] details > summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
body[data-page="help"] details > summary::-webkit-details-marker,
body[data-page="article-coa"] details > summary::-webkit-details-marker,
body[data-page="how-to-read-a-coa"] details > summary::-webkit-details-marker {
  display: none;
}
body[data-page="help"] details > summary::after,
body[data-page="article-coa"] details > summary::after,
body[data-page="how-to-read-a-coa"] details > summary::after {
  content: "+";
  font-size: 18px;
  line-height: 1;
  opacity: 0.6;
  transition: transform 180ms ease;
}
body[data-page="help"] details[open] > summary::after,
body[data-page="article-coa"] details[open] > summary::after,
body[data-page="how-to-read-a-coa"] details[open] > summary::after {
  content: "−";
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="help"] details > summary::after,
  body[data-page="article-coa"] details > summary::after,
  body[data-page="how-to-read-a-coa"] details > summary::after {
    transition: none;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   ISSUE 09 — Lab hub: tool-card grid evenly distributed on tablets
   Op 700–1000px breakpoint vielen 5 tool-cards in een 3+2 grid
   met de laatste row te wide. Force 2-col tot 900px.
   ─────────────────────────────────────────────────────────────── */
body[data-page="lab"] .grid {
  gap: 16px;
}
@media (min-width: 641px) and (max-width: 900px) {
  body[data-page="lab"] .section .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ═══════════════════════════════════════════════════════════════════
   ISSUE 10 — Fresh-batch page: timeline numbers nicely aligned
   ─────────────────────────────────────────────────────────────── */
body[data-page="fresh-batch"] .section .card {
  position: relative;
}
body[data-page="fresh-batch"] .section .card__eyebrow {
  font-variant-numeric: tabular-nums;
}


/* ═══════════════════════════════════════════════════════════════════
   ISSUE 11 — Sustainability: stat-cards consistent decimal alignment
   ─────────────────────────────────────────────────────────────── */
body[data-page="sustainability"] .card strong,
body[data-page="sustainability"] .card .card__title {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.012em;
}


/* ═══════════════════════════════════════════════════════════════════
   ISSUE 12 — Changelog: time + h2 typography
   ─────────────────────────────────────────────────────────────── */
body[data-page="changelog"] .changelog-entry,
body[data-page="whats-new"] .changelog-entry {
  border-top: 1px solid color-mix(in oklab, var(--color-border, #2a2f3a) 70%, transparent);
  padding-block: 22px;
}
body[data-page="changelog"] .changelog-entry:first-of-type,
body[data-page="whats-new"] .changelog-entry:first-of-type {
  border-top: 0;
  padding-top: 0;
}
body[data-page="changelog"] .changelog-entry > header,
body[data-page="whats-new"] .changelog-entry > header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 12px;
}
body[data-page="changelog"] .changelog-entry h2,
body[data-page="whats-new"] .changelog-entry h2 {
  font-family: var(--font-display, "EB Garamond", serif);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  margin: 0;
  letter-spacing: -0.01em;
}
body[data-page="changelog"] .changelog-entry time,
body[data-page="whats-new"] .changelog-entry time {
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  opacity: 0.7;
  letter-spacing: 0.04em;
}


/* ═══════════════════════════════════════════════════════════════════
   ISSUE 13 — Roadmap: status badges + column rhythm
   ─────────────────────────────────────────────────────────────── */
body[data-page="roadmap"] .card,
body[data-page="roadmap-public"] .card {
  position: relative;
}
body[data-page="roadmap"] .card__eyebrow,
body[data-page="roadmap-public"] .card__eyebrow {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-accent, #c19a4f) 16%, transparent);
  border: 1px solid color-mix(in oklab, var(--color-accent, #c19a4f) 32%, transparent);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}
@media (max-width: 640px) {
  body[data-page="roadmap"] .section .grid,
  body[data-page="roadmap-public"] .section .grid {
    gap: 12px;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   ISSUE 14 — Loyalty: summary cards equal width + bigger value emphasis
   ─────────────────────────────────────────────────────────────── */
body[data-page="loyalty"] .loyalty-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
body[data-page="loyalty"] .loyalty-summary__card {
  text-align: left;
}
body[data-page="loyalty"] .loyalty-summary__value {
  font-family: var(--font-display, "EB Garamond", serif);
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  margin: 6px 0 0;
}
body[data-page="loyalty"] .loyalty-summary__label {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.72;
  margin: 0;
}
body[data-page="loyalty"] .loyalty-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}


/* ═══════════════════════════════════════════════════════════════════
   ISSUE 15 — Pay (checkout): summary sticky on desktop, full-width mobile
   ─────────────────────────────────────────────────────────────── */
@media (min-width: 901px) {
  body[data-page="pay"] .pay-summary {
    position: sticky;
    top: 100px;
    align-self: start;
  }
}
body[data-page="pay"] .pay-summary__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-variant-numeric: tabular-nums;
  padding-block: 6px;
}
body[data-page="pay"] .pay-summary__row--total {
  border-top: 1px solid color-mix(in oklab, var(--color-border, #2a2f3a) 100%, transparent);
  margin-top: 10px;
  padding-top: 12px;
  font-weight: 700;
  font-size: 1.05rem;
}
body[data-page="pay"] .pay-summary__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.45;
  font-size: 0.88rem;
  min-height: 44px;
  padding-block: 10px;
  cursor: pointer;
}
body[data-page="pay"] .pay-summary__consent input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  margin-top: 1px;
  flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════════
   ISSUE 16 — Pay: email/input full-width with focus ring
   ─────────────────────────────────────────────────────────────── */
body[data-page="pay"] .pay-summary__fields .input,
body[data-page="pay"] input[type="email"] {
  width: 100%;
  min-height: 44px;
}
body[data-page="pay"] input:focus-visible {
  outline: 2px solid var(--color-accent, #c19a4f);
  outline-offset: 2px;
}


/* ═══════════════════════════════════════════════════════════════════
   ISSUE 17 — Success: action button row centered + wrap
   ─────────────────────────────────────────────────────────────── */
body[data-page="success"] .success-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-block: 20px;
}
body[data-page="success"] .success-actions .btn {
  min-height: 44px;
}
body[data-page="success"] .success-next {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="success"] .success-confetti {
    display: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   ISSUE 18 — Track-order: form alignment + result card
   ─────────────────────────────────────────────────────────────── */
body[data-page="track-order"] form,
body[data-page="track-order"] .track-form {
  display: grid;
  gap: 12px;
  max-width: 480px;
  margin-inline: auto;
}
body[data-page="track-order"] form input,
body[data-page="track-order"] .track-form input {
  min-height: 44px;
  width: 100%;
}
body[data-page="track-order"] form button,
body[data-page="track-order"] .track-form button {
  min-height: 44px;
  width: 100%;
}
body[data-page="track-order"] #track-result .card {
  margin-inline: auto;
  max-width: 640px;
}


/* ═══════════════════════════════════════════════════════════════════
   ISSUE 19 — Bulk-order: drop-zone + table consistency
   ─────────────────────────────────────────────────────────────── */
body[data-page="bulk-order"] .bulk-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 18px;
}
@media (max-width: 800px) {
  body[data-page="bulk-order"] .bulk-grid {
    grid-template-columns: 1fr;
  }
}
body[data-page="bulk-order"] .bulk-drop {
  border: 2px dashed color-mix(in oklab, var(--color-border, #2a2f3a) 100%, transparent);
  border-radius: 14px;
  padding: 26px 18px;
  text-align: center;
  transition: border-color 180ms ease, background 180ms ease;
}
body[data-page="bulk-order"] .bulk-drop:hover,
body[data-page="bulk-order"] .bulk-drop:focus-visible {
  border-color: var(--color-accent, #c19a4f);
  background: color-mix(in oklab, var(--color-accent, #c19a4f) 6%, transparent);
}
body[data-page="bulk-order"] .bulk-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: 0.92rem;
}
body[data-page="bulk-order"] .bulk-table th,
body[data-page="bulk-order"] .bulk-table td {
  padding: 8px 10px;
  border-bottom: 1px solid color-mix(in oklab, var(--color-border, #2a2f3a) 70%, transparent);
  text-align: left;
}
body[data-page="bulk-order"] .bulk-table th {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.72;
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="bulk-order"] .bulk-drop {
    transition: none;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   ISSUE 20 — Compound-compare: 3-col → 1-col on mobile + select height
   ─────────────────────────────────────────────────────────────── */
body[data-page="compound-compare"] .compare-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 900px) {
  body[data-page="compound-compare"] .compare-grid {
    grid-template-columns: 1fr;
  }
}
body[data-page="compound-compare"] .compare-picker {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 10px;
}
body[data-page="compound-compare"] .compare-slot__label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.72;
  margin-bottom: 6px;
}
body[data-page="compound-compare"] .compare-card {
  min-height: 200px;
}


/* ═══════════════════════════════════════════════════════════════════
   ISSUE 21 — Compound-graph: canvas sized + side-panel mobile-friendly
   ─────────────────────────────────────────────────────────────── */
body[data-page="compound-graph"] .graph-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 18px;
  align-items: start;
}
@media (max-width: 900px) {
  body[data-page="compound-graph"] .graph-layout {
    grid-template-columns: 1fr;
  }
}
body[data-page="compound-graph"] .graph-canvas {
  position: relative;
  min-height: 420px;
  border-radius: 14px;
  overflow: hidden;
  background: color-mix(in oklab, var(--color-surface, #15171e) 60%, transparent);
  border: 1px solid color-mix(in oklab, var(--color-border, #2a2f3a) 80%, transparent);
}
body[data-page="compound-graph"] .graph-svg {
  width: 100%;
  height: auto;
  display: block;
}
body[data-page="compound-graph"] .graph-panel + .graph-panel {
  margin-top: 14px;
}
body[data-page="compound-graph"] .graph-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}


/* ═══════════════════════════════════════════════════════════════════
   ISSUE 22 — Reconstitution calculator: input alignment + result emphasis
   data-page is "calc-reconstitution"
   ─────────────────────────────────────────────────────────────── */
body[data-page="calc-reconstitution"] .calc-inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
body[data-page="calc-reconstitution"] .calc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body[data-page="calc-reconstitution"] .calc-input-group {
  display: flex;
  align-items: stretch;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--color-border, #2a2f3a) 100%, transparent);
}
body[data-page="calc-reconstitution"] .calc-input-group input {
  flex: 1 1 auto;
  border: 0;
  background: transparent;
  padding: 10px 12px;
  min-height: 44px;
  font-variant-numeric: tabular-nums;
  width: 100%;
  min-width: 0;
}
body[data-page="calc-reconstitution"] .calc-input-group input:focus-visible {
  outline: 2px solid var(--color-accent, #c19a4f);
  outline-offset: 2px;
}
body[data-page="calc-reconstitution"] .calc-unit {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  background: color-mix(in oklab, var(--color-surface, #15171e) 70%, transparent);
  border-left: 1px solid color-mix(in oklab, var(--color-border, #2a2f3a) 70%, transparent);
  font-size: 0.85rem;
  opacity: 0.85;
}
body[data-page="calc-reconstitution"] .calc-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin-block: 12px;
}
body[data-page="calc-reconstitution"] .calc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
body[data-page="calc-reconstitution"] .calc-action {
  min-height: 36px;
  padding-inline: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
body[data-page="calc-reconstitution"] .calc-error-msg {
  font-size: 0.82rem;
  color: #ff7a7a;
  margin: 0;
  min-height: 1.1em;
}


/* ═══════════════════════════════════════════════════════════════════
   ISSUE 23 — Reconstitution calculator: result display readability
   ─────────────────────────────────────────────────────────────── */
body[data-page="calc-reconstitution"] .calc-card {
  padding: 20px;
}
body[data-page="calc-reconstitution"] [class*="calc-result"],
body[data-page="calc-reconstitution"] [id*="calc-result"] {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
body[data-page="calc-reconstitution"] .calc-history__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
body[data-page="calc-reconstitution"] .calc-history__summary {
  cursor: pointer;
  font-weight: 600;
}

@media (max-width: 640px) {
  body[data-page="calc-reconstitution"] main > .section {
    padding-block: 22px;
  }

  body[data-page="calc-reconstitution"] main > .section:first-child {
    padding-block: 24px 18px;
  }

  body[data-page="calc-reconstitution"] main > .section:nth-of-type(2) {
    padding-block: 10px 12px;
  }

  body[data-page="calc-reconstitution"] main > .section:nth-of-type(3) {
    padding-block: 14px;
  }

  body[data-page="calc-reconstitution"] .section__lead {
    line-height: 1.5;
  }

  body[data-page="calc-reconstitution"] .lab-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    gap: 6px;
    max-width: 100%;
    margin-bottom: 0;
    padding: 6px;
    overflow: visible;
    scroll-snap-type: none;
  }

  body[data-page="calc-reconstitution"] .lab-tabs::-webkit-scrollbar {
    display: none;
  }

  body[data-page="calc-reconstitution"] .lab-tabs__btn {
    min-width: 0;
    min-height: 38px;
    padding: 8px 9px;
    scroll-snap-align: unset;
    letter-spacing: 0.02em;
    white-space: normal;
    line-height: 1.15;
  }

  body[data-page="calc-reconstitution"] .section--surface .card {
    padding: 16px;
  }

  body[data-page="calc-reconstitution"] .section--surface .card__body-text {
    margin-top: 8px !important;
    line-height: 1.52;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   ISSUE 24 — Stack-builder: 2-column layout collapses on mobile
   ─────────────────────────────────────────────────────────────── */
body[data-page="stack-builder"] .section .grid {
  gap: 16px;
}
@media (max-width: 800px) {
  body[data-page="stack-builder"] .section .grid {
    grid-template-columns: 1fr;
  }
}
body[data-page="stack-builder"] .card {
  min-width: 0;
}


/* ═══════════════════════════════════════════════════════════════════
   ISSUE 25 — Article pages: figure + caption typography
   ─────────────────────────────────────────────────────────────── */
body[data-page^="article-"] figure,
body[data-page="peptide-research-101"] figure {
  margin: 24px 0;
}
body[data-page^="article-"] figure img,
body[data-page="peptide-research-101"] figure img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}
body[data-page^="article-"] figcaption,
body[data-page="peptide-research-101"] figcaption {
  font-size: 0.85rem;
  opacity: 0.72;
  margin-top: 8px;
  text-align: center;
  line-height: 1.5;
}


/* ═══════════════════════════════════════════════════════════════════
   ISSUE 26 — Article pages: blockquote styling
   ─────────────────────────────────────────────────────────────── */
body[data-page^="article-"] blockquote,
body[data-page="peptide-research-101"] blockquote {
  border-left: 3px solid var(--color-accent, #c19a4f);
  padding: 4px 16px;
  margin: 18px 0;
  font-style: italic;
  opacity: 0.92;
}


/* ═══════════════════════════════════════════════════════════════════
   ISSUE 27 — COA pages: monospaced cert IDs + table alignment
   ─────────────────────────────────────────────────────────────── */
body[data-page="coa"] code,
body[data-page="article-coa"] code,
body[data-page="how-to-read-a-coa"] code,
body[data-page="coa"] [data-mono],
body[data-page="article-coa"] [data-mono] {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.88em;
  padding: 2px 6px;
  background: color-mix(in oklab, var(--color-surface, #15171e) 60%, transparent);
  border-radius: 4px;
  letter-spacing: 0.02em;
}
body[data-page="coa"] table,
body[data-page="article-coa"] table,
body[data-page="how-to-read-a-coa"] table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: 0.92rem;
  margin-block: 14px;
}
body[data-page="coa"] table th,
body[data-page="coa"] table td,
body[data-page="article-coa"] table th,
body[data-page="article-coa"] table td,
body[data-page="how-to-read-a-coa"] table th,
body[data-page="how-to-read-a-coa"] table td {
  padding: 8px 10px;
  border-bottom: 1px solid color-mix(in oklab, var(--color-border, #2a2f3a) 70%, transparent);
  text-align: left;
  vertical-align: top;
}
body[data-page="coa"] table th,
body[data-page="article-coa"] table th,
body[data-page="how-to-read-a-coa"] table th {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.72;
}


/* ═══════════════════════════════════════════════════════════════════
   ISSUE 28 — Mobile reading width: container cap for content pages
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  body[data-page="help"] .container,
  body[data-page="glossary"] .container,
  body[data-page="lab"] .container,
  body[data-page="fresh-batch"] .container,
  body[data-page="sustainability"] .container,
  body[data-page="loyalty"] .container,
  body[data-page="changelog"] .container,
  body[data-page="whats-new"] .container,
  body[data-page="roadmap"] .container,
  body[data-page="roadmap-public"] .container,
  body[data-page="peptide-research-101"] .container,
  body[data-page="article-lyo"] .container,
  body[data-page="article-purity"] .container,
  body[data-page="article-coa"] .container,
  body[data-page="coa"] .container,
  body[data-page="how-to-read-a-coa"] .container {
    padding-inline: 16px;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   ISSUE 29 — Light-theme contrast fixes
   Borders + soft surfaces vielen weg op licht-thema bij tool / form pages.
   ─────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  body[data-page="calc-reconstitution"] .calc-input-group,
  body[data-page="bulk-order"] .bulk-drop,
  body[data-page="compound-compare"] .compare-picker,
  body[data-page="compound-graph"] .graph-canvas {
    border-color: rgba(0, 0, 0, 0.18);
  }
  body[data-page="pay"] .pay-summary__row--total {
    border-top-color: rgba(0, 0, 0, 0.18);
  }
  body[data-page="changelog"] .changelog-entry,
  body[data-page="whats-new"] .changelog-entry {
    border-top-color: rgba(0, 0, 0, 0.12);
  }
  body[data-page="help"] details,
  body[data-page="article-coa"] details,
  body[data-page="how-to-read-a-coa"] details {
    border-color: rgba(0, 0, 0, 0.16);
    background: rgba(0, 0, 0, 0.02);
  }
  body[data-page="glossary"] .glossary-locale__btn {
    border-color: rgba(0, 0, 0, 0.18);
  }
}
[data-theme="light"] body[data-page="calc-reconstitution"] .calc-input-group,
[data-theme="light"] body[data-page="bulk-order"] .bulk-drop,
[data-theme="light"] body[data-page="compound-compare"] .compare-picker,
[data-theme="light"] body[data-page="compound-graph"] .graph-canvas {
  border-color: rgba(0, 0, 0, 0.18);
}


/* ═══════════════════════════════════════════════════════════════════
   ISSUE 30 — Code/PRE blocks on article pages: horizontal scroll + line
   ─────────────────────────────────────────────────────────────── */
body[data-page^="article-"] pre,
body[data-page="peptide-research-101"] pre,
body[data-page="how-to-read-a-coa"] pre {
  overflow-x: auto;
  padding: 14px 16px;
  border-radius: 10px;
  background: color-mix(in oklab, var(--color-surface, #15171e) 70%, transparent);
  font-size: 0.86rem;
  line-height: 1.55;
  border: 1px solid color-mix(in oklab, var(--color-border, #2a2f3a) 80%, transparent);
}


/* ═══════════════════════════════════════════════════════════════════
   ISSUE 31 — Lists in article pages: spacing + marker color
   ─────────────────────────────────────────────────────────────── */
body[data-page^="article-"] .card__body-text + ul,
body[data-page^="article-"] .card__body-text + ol,
body[data-page="peptide-research-101"] ul,
body[data-page="peptide-research-101"] ol,
body[data-page="how-to-read-a-coa"] ul,
body[data-page="how-to-read-a-coa"] ol {
  margin-block: 10px 14px;
  padding-left: 22px;
  line-height: 1.6;
}
body[data-page^="article-"] li::marker,
body[data-page="peptide-research-101"] li::marker,
body[data-page="how-to-read-a-coa"] li::marker {
  color: color-mix(in oklab, var(--color-accent, #c19a4f) 85%, transparent);
}


/* ═══════════════════════════════════════════════════════════════════
   ISSUE 32 — Focus rings sitewide on these pages (a11y)
   ─────────────────────────────────────────────────────────────── */
body[data-page="help"] a:focus-visible,
body[data-page="glossary"] a:focus-visible,
body[data-page="lab"] a:focus-visible,
body[data-page="loyalty"] a:focus-visible,
body[data-page="changelog"] a:focus-visible,
body[data-page="whats-new"] a:focus-visible,
body[data-page="roadmap"] a:focus-visible,
body[data-page="roadmap-public"] a:focus-visible,
body[data-page="track-order"] button:focus-visible,
body[data-page="bulk-order"] button:focus-visible,
body[data-page="stack-builder"] button:focus-visible,
body[data-page="compound-compare"] select:focus-visible,
body[data-page="compound-graph"] button:focus-visible,
body[data-page="calc-reconstitution"] button:focus-visible {
  outline: 2px solid var(--color-accent, #c19a4f);
  outline-offset: 3px;
  border-radius: 6px;
}


/* ═══════════════════════════════════════════════════════════════════
   ISSUE 33 — Mobile tap targets sitewide on tool pages
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  body[data-page="calc-reconstitution"] .calc-action,
  body[data-page="bulk-order"] button,
  body[data-page="stack-builder"] button,
  body[data-page="compound-compare"] button,
  body[data-page="compound-graph"] button,
  body[data-page="track-order"] button {
    min-height: 44px;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   ISSUE 34 — Loyalty + Roadmap + Changelog: even spacing between cards
   op breakpoints waar grid-auto-flow wat opbreekt
   ─────────────────────────────────────────────────────────────── */
@media (min-width: 641px) {
  body[data-page="loyalty"] .section .grid,
  body[data-page="roadmap"] .section .grid,
  body[data-page="roadmap-public"] .section .grid {
    align-items: stretch;
  }
  body[data-page="loyalty"] .section .grid > .card,
  body[data-page="roadmap"] .section .grid > .card,
  body[data-page="roadmap-public"] .section .grid > .card {
    display: flex;
    flex-direction: column;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   ISSUE 35 — Pay: bundle suggest + upsell row mobile wraps
   ─────────────────────────────────────────────────────────────── */
body[data-page="pay"] .pay-upsell__row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
body[data-page="pay"] .pay-upsell__img {
  border-radius: 8px;
}
body[data-page="pay"] .pay-upsell__info {
  flex: 1 1 160px;
  min-width: 0;
}
body[data-page="pay"] .pay-shipping-progress__bar {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-border, #2a2f3a) 70%, transparent);
  overflow: hidden;
  margin-top: 6px;
}
body[data-page="pay"] .pay-shipping-progress__bar-fill {
  height: 100%;
  background: var(--color-accent, #c19a4f);
  transition: width 280ms ease;
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="pay"] .pay-shipping-progress__bar-fill {
    transition: none;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   ISSUE 36 — Success: check-icon constraint + tier-3 step list mobile
   ─────────────────────────────────────────────────────────────── */
body[data-page="success"] .success-check {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in oklab, var(--color-accent, #c19a4f) 18%, transparent);
  border: 1px solid color-mix(in oklab, var(--color-accent, #c19a4f) 40%, transparent);
}
body[data-page="success"] .success-next__step {
  padding: 18px;
  border-radius: 14px;
  background: color-mix(in oklab, var(--color-surface, #15171e) 60%, transparent);
  border: 1px solid color-mix(in oklab, var(--color-border, #2a2f3a) 70%, transparent);
}
body[data-page="success"] .success-next__num {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 6px;
}
body[data-page="success"] .success-next__title {
  font-weight: 600;
  margin: 0 0 4px;
}
body[data-page="success"] .success-next__lead {
  font-size: 0.9rem;
  line-height: 1.55;
  opacity: 0.86;
  margin: 0;
}


/* ═══════════════════════════════════════════════════════════════════
   ISSUE 37 — Reduced motion sitewide on these pages
   ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body[data-page="success"] *,
  body[data-page="loyalty"] *,
  body[data-page="changelog"] *,
  body[data-page="whats-new"] *,
  body[data-page="roadmap"] *,
  body[data-page="roadmap-public"] * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   ISSUE 38 — PRINT stylesheet (al deze pages)
   Doel: leesbare hard-copy van calc-resultaten, COA-uitleg, articles,
   changelog-entries en checkout-bevestigingen. Verberg nav/footer/floaters.
   ─────────────────────────────────────────────────────────────── */
@media print {
  body[data-page="help"],
  body[data-page="glossary"],
  body[data-page="lab"],
  body[data-page="fresh-batch"],
  body[data-page="sustainability"],
  body[data-page="changelog"],
  body[data-page="whats-new"],
  body[data-page="roadmap"],
  body[data-page="roadmap-public"],
  body[data-page="loyalty"],
  body[data-page="pay"],
  body[data-page="success"],
  body[data-page="track-order"],
  body[data-page="bulk-order"],
  body[data-page="compound-compare"],
  body[data-page="compound-graph"],
  body[data-page="calc-reconstitution"],
  body[data-page="stack-builder"],
  body[data-page="peptide-research-101"],
  body[data-page="article-lyo"],
  body[data-page="article-purity"],
  body[data-page="article-coa"],
  body[data-page="coa"],
  body[data-page="how-to-read-a-coa"] {
    background: #ffffff !important;
    color: #1a1a1a !important;
  }

  body[data-page="help"] .site-header,
  body[data-page="help"] .site-footer,
  body[data-page="glossary"] .site-header,
  body[data-page="glossary"] .site-footer,
  body[data-page="lab"] .site-header,
  body[data-page="lab"] .site-footer,
  body[data-page="changelog"] .site-header,
  body[data-page="changelog"] .site-footer,
  body[data-page="whats-new"] .site-header,
  body[data-page="whats-new"] .site-footer,
  body[data-page="roadmap"] .site-header,
  body[data-page="roadmap"] .site-footer,
  body[data-page="roadmap-public"] .site-header,
  body[data-page="roadmap-public"] .site-footer,
  body[data-page="loyalty"] .site-header,
  body[data-page="loyalty"] .site-footer,
  body[data-page="pay"] .site-header,
  body[data-page="pay"] .site-footer,
  body[data-page="success"] .site-header,
  body[data-page="success"] .site-footer,
  body[data-page="track-order"] .site-header,
  body[data-page="track-order"] .site-footer,
  body[data-page="bulk-order"] .site-header,
  body[data-page="bulk-order"] .site-footer,
  body[data-page="compound-compare"] .site-header,
  body[data-page="compound-compare"] .site-footer,
  body[data-page="compound-graph"] .site-header,
  body[data-page="compound-graph"] .site-footer,
  body[data-page="calc-reconstitution"] .site-header,
  body[data-page="calc-reconstitution"] .site-footer,
  body[data-page="stack-builder"] .site-header,
  body[data-page="stack-builder"] .site-footer,
  body[data-page="peptide-research-101"] .site-header,
  body[data-page="peptide-research-101"] .site-footer,
  body[data-page="fresh-batch"] .site-header,
  body[data-page="fresh-batch"] .site-footer,
  body[data-page="sustainability"] .site-header,
  body[data-page="sustainability"] .site-footer,
  body[data-page="article-lyo"] .site-header,
  body[data-page="article-lyo"] .site-footer,
  body[data-page="article-purity"] .site-header,
  body[data-page="article-purity"] .site-footer,
  body[data-page="article-coa"] .site-header,
  body[data-page="article-coa"] .site-footer,
  body[data-page="coa"] .site-header,
  body[data-page="coa"] .site-footer,
  body[data-page="how-to-read-a-coa"] .site-header,
  body[data-page="how-to-read-a-coa"] .site-footer {
    display: none !important;
  }

  /* Verberg floaters / chat / cookiebar / cart drawer overal */
  body[data-page]:is([data-page="help"], [data-page="glossary"], [data-page="lab"],
                    [data-page="fresh-batch"], [data-page="sustainability"],
                    [data-page="changelog"], [data-page="whats-new"],
                    [data-page="roadmap"], [data-page="roadmap-public"],
                    [data-page="loyalty"], [data-page="pay"], [data-page="success"],
                    [data-page="track-order"], [data-page="bulk-order"],
                    [data-page="compound-compare"], [data-page="compound-graph"],
                    [data-page="calc-reconstitution"], [data-page="stack-builder"],
                    [data-page="peptide-research-101"], [data-page="article-lyo"],
                    [data-page="article-purity"], [data-page="article-coa"],
                    [data-page="coa"], [data-page="how-to-read-a-coa"])
                    [class*="floater"],
  body[data-page]:is([data-page="help"], [data-page="glossary"], [data-page="lab"],
                    [data-page="fresh-batch"], [data-page="sustainability"],
                    [data-page="changelog"], [data-page="whats-new"],
                    [data-page="roadmap"], [data-page="roadmap-public"],
                    [data-page="loyalty"], [data-page="pay"], [data-page="success"],
                    [data-page="track-order"], [data-page="bulk-order"],
                    [data-page="compound-compare"], [data-page="compound-graph"],
                    [data-page="calc-reconstitution"], [data-page="stack-builder"],
                    [data-page="peptide-research-101"], [data-page="article-lyo"],
                    [data-page="article-purity"], [data-page="article-coa"],
                    [data-page="coa"], [data-page="how-to-read-a-coa"])
                    .bottom-nav,
  body[data-page] [data-floater],
  body[data-page] .togo-cookiebar,
  body[data-page] .nav-cart__panel,
  body[data-page] .nav-search__panel,
  body[data-page] .nav-account__panel,
  body[data-page] .skip-link {
    display: none !important;
  }

  /* Cards / sections: geen schaduw, vaste border, page-break-aware */
  body[data-page="changelog"] .changelog-entry,
  body[data-page="whats-new"] .changelog-entry,
  body[data-page="help"] .card,
  body[data-page="glossary"] .card,
  body[data-page="coa"] .card,
  body[data-page="article-coa"] .card,
  body[data-page="how-to-read-a-coa"] .card,
  body[data-page="calc-reconstitution"] .calc-card {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    background: #fff !important;
    color: #1a1a1a !important;
    page-break-inside: avoid;
  }

  body[data-page="success"] .success-confetti,
  body[data-page="compound-graph"] .graph-svg {
    display: none !important;
  }

  /* Tables print well */
  body[data-page="coa"] table,
  body[data-page="article-coa"] table,
  body[data-page="how-to-read-a-coa"] table,
  body[data-page="bulk-order"] .bulk-table {
    page-break-inside: auto;
  }
  body[data-page="coa"] table tr,
  body[data-page="article-coa"] table tr,
  body[data-page="how-to-read-a-coa"] table tr,
  body[data-page="bulk-order"] .bulk-table tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }

  /* Headings: keep with next */
  body[data-page] h1,
  body[data-page] h2,
  body[data-page] h3 {
    page-break-after: avoid;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   END togo-page-misc.css
   ──────────────────────────────────────────────────────────── */