/* ═══════════════════════════════════════════════════════════════════
   PEPTIDE PAGE — v2

   Brief:  .design/peptide-bpc-157/DESIGN_BRIEF.md
   IA:     .design/peptide-bpc-157/INFORMATION_ARCHITECTURE.md
   Tokens: .design/peptide-bpc-157/DESIGN_TOKENS.css

   Loaded only on /peptides/{slug}/ via peptide-routing.php's
   wp_enqueue_scripts hook. Sits below brand-system.css (sitewide
   tokens, Söhne Mono and Tiempos Headline @font-face) and above any
   sitewide overrides.

   Fonts:
     - Poppins (body, UI)            — Amino body sans, declared below
     - Anek Telugu (section H2s)     — Amino display sans, declared below
     - Tiempos Headline (hero H1)    — premium editorial serif, declared in brand-system.css
     - Söhne Mono (DOIs, sequence)   — declared in brand-system.css

   Poppins + Anek Telugu are also declared inline in the SFSC site
   header (themes/astra-child/sfsc-sections/header.php). Browser
   caches dedupe by URL so the redeclaration here is free; the
   purpose is load-order resilience — peptide-page.css is in <head>
   while the header's <style> is in <body>.

   Aesthetic: modern utilitarian (Dieter Rams influence) — quiet,
   functional, restrained. Hairline borders over shadows. Mathematical
   spacing scale. One accent (green-600) doing the heavy lifting.
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   0. @FONT-FACE — Anek Telugu (Amino's body font, self-hosted)
   Round 4-c: Poppins @font-face dropped (no longer used; SFSC site
   header still declares it for chrome). Söhne Mono + Tiempos Headline
   are declared in brand-system.css.
   ═══════════════════════════════════════════════════════════════════ */

@font-face {
    font-family: 'Anek Telugu';
    src: url('../fonts/Anek_Telugu/static/AnekTelugu-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Anek Telugu';
    src: url('../fonts/Anek_Telugu/static/AnekTelugu-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Anek Telugu';
    src: url('../fonts/Anek_Telugu/static/AnekTelugu-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* ═══════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS — scoped to .sfsc-pep-page so they never leak into
   the rest of the SFSC site (admin, distributor, splash). All page
   styles below reference --pep-* exclusively; no hardcoded values.
   ═══════════════════════════════════════════════════════════════════ */

.sfsc-pep-page {

    /* ─── Typography ───────────────────────────────────────────── */
    --pep-font-sans:    'Anek Telugu', system-ui, sans-serif;  /* round 4-c: Anek is now the global body font (was Poppins) */
    --pep-font-display: 'Anek Telugu', system-ui, sans-serif;
    --pep-font-mono:    'Söhne Mono', ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
    --pep-font-serif:   'Tiempos Headline', Georgia, 'Times New Roman', serif;  /* hero H1 only — locked serif divergence */
    --font-anek:        'Anek Telugu';  /* short alias kept for back-compat with literal CSS supplied in round 3 */

    --pep-text-xs:    11px;
    --pep-text-sm:    12px;
    --pep-text-base:  14px;
    --pep-text-md:    16px;
    --pep-text-lg:    18px;
    --pep-text-xl:    20px;
    --pep-text-2xl:   24px;
    --pep-text-3xl:   32px;
    --pep-text-4xl:   40px;
    --pep-text-5xl:   48px;
    --pep-text-6xl:   56px;

    --pep-text-h1:         clamp(30px, 4vw, 48px);  /* round 4-c: Amino's text-3xl → text-5xl (30 mobile, 48 desktop) */
    --pep-text-h2:         clamp(26px, 3.2vw, 32px);
    --pep-text-h3:         20px;
    --pep-text-coa-purity: clamp(40px, 5.5vw, 64px);

    --pep-weight-regular:  400;
    --pep-weight-medium:   500;
    --pep-weight-semibold: 600;
    --pep-weight-bold:     700;

    --pep-leading-tight:   1.1;
    --pep-leading-snug:    1.25;
    --pep-leading-normal:  1.5;
    --pep-leading-relaxed: 1.65;

    --pep-tracking-tight:  -0.02em;
    --pep-tracking-snug:   -0.01em;
    --pep-tracking-normal:  0;
    --pep-tracking-wide:    0.08em;
    --pep-tracking-wider:   0.12em;

    /* ─── Color ─────────────────────────────────────────────────── */
    --pep-bg:           #ffffff;
    --pep-bg-soft:      #fafaf9;
    --pep-surface:      #ffffff;
    --pep-surface-soft: #f8f8f8;        /* pedestal + trust strip bg (round 4) */
    --pep-surface-inset:#fafaf9;

    --pep-border:        #e8e8e8;       /* extracted from Amino compiled markup (round 4-b) — true neutral gray */
    --pep-border-soft:   #f3f4f6;
    --pep-border-strong: #d1d5db;

    --pep-text:         #18181b;
    --pep-text-body:    #3f3f46;
    --pep-text-muted:   #71717a;
    --pep-text-faint:   #a1a1aa;
    --pep-text-inverse: #fafafa;

    --pep-accent:        #16a34a;
    --pep-accent-hover:  #15803d;
    --pep-accent-active: #166534;
    --pep-accent-soft:   #f0fdf4;
    --pep-accent-ring:   #bbf7d0;

    --pep-warning-bg:     #fefce8;
    --pep-warning-border: #fef08a;
    --pep-warning-text:   #854d0e;
    --pep-warning-strong: #a16207;

    --pep-danger-bg:      #fef2f2;
    --pep-danger-border:  #fecaca;
    --pep-danger-text:    #991b1b;
    --pep-danger-strong:  #7f1d1d;

    --pep-info-bg:        #eff6ff;
    --pep-info-text:      #1e40af;

    --pep-pill-dark-bg:   #18181b;
    --pep-pill-dark-text: #fafafa;

    /* CTA gradient — ESTIMATED FROM SCREENSHOT, may need Phase 6
       tuning side-by-side with the reference. See DESIGN_TOKENS.css
       Provenance section. */
    --pep-cta-band-from:  #fffbeb;   /* amber-50 (warm cream) */
    --pep-cta-band-to:    #dcfce7;   /* green-100 (pale mint) */
    --pep-cta-band-angle: 135deg;

    --pep-storage-cold-bg:    #e0f2fe;
    --pep-storage-cold-fg:    #0284c7;
    --pep-storage-bench-bg:   #dcfce7;
    --pep-storage-bench-fg:   #16a34a;
    --pep-storage-shield-bg:  #fef3c7;
    --pep-storage-shield-fg:  #ca8a04;

    /* ─── Spacing ───────────────────────────────────────────────── */
    --pep-space-0:    0;
    --pep-space-0_5:  2px;
    --pep-space-1:    4px;
    --pep-space-1_5:  6px;
    --pep-space-2:    8px;
    --pep-space-3:    12px;
    --pep-space-4:    16px;
    --pep-space-5:    20px;
    --pep-space-6:    24px;
    --pep-space-7:    32px;
    --pep-space-8:    40px;
    --pep-space-9:    48px;
    --pep-space-10:   64px;
    --pep-space-11:   80px;
    --pep-space-12:   96px;

    --pep-section-y:   clamp(48px, 6vw, 88px);
    --pep-card-pad:    clamp(20px, 2.5vw, 32px);
    --pep-card-pad-lg: clamp(28px, 3vw, 40px);
    --pep-hero-gap:    clamp(20px, 4vw, 48px);

    --pep-container-max:    1520px;        /* round 4-h (option C): 1440 → 1520, columns ~736px each at 1fr/1fr. Pairs with description font-size 14px to fit ~2 lines. */
    --pep-container-narrow: 960px;
    --pep-container-pad:    clamp(16px, 3vw, 32px);

    /* ─── Radius ────────────────────────────────────────────────── */
    --pep-radius-sm:   6px;
    --pep-radius-md:   12px;
    --pep-radius-lg:   16px;
    --pep-radius-xl:   20px;
    --pep-radius-2xl:  24px;
    --pep-radius-pill: 9999px;

    /* ─── Borders ───────────────────────────────────────────────── */
    --pep-border-w-thin:   1px;
    --pep-border-w-medium: 2px;

    /* ─── Shadows ───────────────────────────────────────────────── */
    --pep-shadow-sm:         0 1px 2px rgba(15, 23, 42, .04);
    --pep-shadow-md:         0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
    --pep-shadow-lg:         0 4px 12px rgba(15, 23, 42, .06);
    --pep-shadow-xl:         0 10px 25px rgba(15, 23, 42, .08), 0 4px 10px rgba(15, 23, 42, .04);

    --pep-shadow-cta:         0 4px 12px rgba(22, 163, 74, .15);
    --pep-shadow-card-hover:  0 4px 16px rgba(15, 23, 42, .08);
    --pep-shadow-toast:       0 10px 25px rgba(15, 23, 42, .08), 0 4px 10px rgba(15, 23, 42, .04);

    --pep-shadow-focus:        0 0 0 3px var(--pep-accent-ring);
    --pep-shadow-focus-danger: 0 0 0 3px var(--pep-danger-border);

    /* ─── Motion ────────────────────────────────────────────────── */
    --pep-duration-instant: 50ms;
    --pep-duration-fast:    150ms;
    --pep-duration-normal:  250ms;
    --pep-duration-slow:    400ms;

    --pep-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --pep-ease-in:      cubic-bezier(0.4, 0, 1, 1);
    --pep-ease-out:     cubic-bezier(0, 0, 0.2, 1);
    --pep-ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ─── Z-Index ───────────────────────────────────────────────── */
    --pep-z-base:   0;
    --pep-z-elev:   10;
    --pep-z-sticky: 100;
    --pep-z-toast:  9999;
}


/* ═══════════════════════════════════════════════════════════════════
   2. REDUCED-MOTION — zero out durations on user request.
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .sfsc-pep-page {
        --pep-duration-instant: 0ms;
        --pep-duration-fast:    0ms;
        --pep-duration-normal:  0ms;
        --pep-duration-slow:    0ms;
    }

    /* Token-zeroing alone makes transitions instant but transforms
       still apply (scale/translateY snap to target). Brief requires
       these hover/active gestures to be fully suppressed for reduced-
       motion users — not just made instant. */
    .sfsc-pep-page a.pep-related-art:hover .pep-related-photo,
    .sfsc-pep-page a.pep-related-art:hover .pep-related-svg-wrap svg,
    .sfsc-pep-page .pep-source-card:hover,
    .sfsc-pep-page .pep-cta-add:active,
    .sfsc-pep-page .pep-cta-band-btn:hover {
        transform: none;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   3. DARK MODE — STUB. Never auto-activates (no prefers-color-scheme
   coupling). The SFSC site is light-only; this block is future-ready
   for if/when SFSC adds [data-theme="dark"] sitewide. See
   DESIGN_TOKENS.css for rationale.
   ═══════════════════════════════════════════════════════════════════ */
.sfsc-pep-page[data-theme="dark"],
[data-theme="dark"] .sfsc-pep-page {
    --pep-bg:           #0a0a0a;
    --pep-bg-soft:      #0f0f0f;
    --pep-surface:      #18181b;
    --pep-surface-soft: #27272a;
    --pep-surface-inset:#1f1f22;

    --pep-border:        #27272a;
    --pep-border-soft:   #1f1f22;
    --pep-border-strong: #3f3f46;

    --pep-text:         #fafafa;
    --pep-text-body:    #d4d4d8;
    --pep-text-muted:   #a1a1aa;
    --pep-text-faint:   #71717a;
    --pep-text-inverse: #18181b;

    --pep-accent:        #22c55e;
    --pep-accent-hover:  #16a34a;
    --pep-accent-active: #15803d;
    --pep-accent-soft:   #052e16;
    --pep-accent-ring:   #14532d;

    --pep-warning-bg:     #1c1917;
    --pep-warning-border: #422006;
    --pep-warning-text:   #fde68a;
    --pep-warning-strong: #fcd34d;

    --pep-danger-bg:      #1c0a0a;
    --pep-danger-border:  #7f1d1d;
    --pep-danger-text:    #fecaca;
    --pep-danger-strong:  #fca5a5;

    --pep-pill-dark-bg:   #fafafa;
    --pep-pill-dark-text: #18181b;

    --pep-cta-band-from:  #422006;
    --pep-cta-band-to:    #052e16;

    --pep-shadow-sm:  0 1px 2px rgba(0, 0, 0, .4);
    --pep-shadow-md:  0 1px 3px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .35);
    --pep-shadow-lg:  0 4px 12px rgba(0, 0, 0, .5);
    --pep-shadow-cta: 0 4px 12px rgba(34, 197, 94, .25);
}


/* ═══════════════════════════════════════════════════════════════════
   4. ASTRA CONTAINER RESET — peptide pages run full-bleed. Astra's
   default theme constrains content width via .ast-container and
   friends; we break out so .sfsc-pep-page can manage its own layout
   from the viewport edge in. The body class .sfsc-peptide-page is
   added by peptide-routing.php's body_class filter.
   ═══════════════════════════════════════════════════════════════════ */
body.sfsc-peptide-page,
body.sfsc-peptide-page .ast-container,
body.sfsc-peptide-page .site-content,
body.sfsc-peptide-page .site-content > .ast-container,
body.sfsc-peptide-page .site-main,
body.sfsc-peptide-page .entry-content,
body.sfsc-peptide-page #primary,
body.sfsc-peptide-page #content {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
}
body.sfsc-peptide-page .entry-header { display: none !important; }


/* ═══════════════════════════════════════════════════════════════════
   5. PAGE SHELL — viewport-pull so .pep-container can center itself
   regardless of any constrained Astra wrapper. The `width: 100vw +
   negative-margin` pattern is a known-good break-out for theme
   containers; keep it as v1 had it.
   ═══════════════════════════════════════════════════════════════════ */
.sfsc-pep-page {
    font-family: var(--pep-font-sans);
    font-size: var(--pep-text-md);
    line-height: var(--pep-leading-normal);
    color: var(--pep-text);
    background: var(--pep-bg);

    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow-x: hidden;
}
.sfsc-pep-page * { box-sizing: border-box; }


/* ═══════════════════════════════════════════════════════════════════
   6. CONTAINER — max-width 1180px (per tokens), fluid padding,
   centered. Each section wraps its content in a .pep-container so
   the section background can run full-bleed while content stays
   capped at the reading width.
   ═══════════════════════════════════════════════════════════════════ */
.sfsc-pep-page .pep-container {
    max-width: var(--pep-container-max);
    margin-inline: auto;
    padding-inline: var(--pep-container-pad);
}
.sfsc-pep-page .pep-container--narrow {
    max-width: var(--pep-container-narrow);
}


/* ═══════════════════════════════════════════════════════════════════
   7. RESEARCH-ONLY BANNER — soft yellow strip at the top of every
   peptide page. Full-bleed; non-sticky. Compliance-first.
   ═══════════════════════════════════════════════════════════════════ */
.sfsc-pep-page .pep-research-banner {
    background: #1a1a1a;
    color: var(--pep-text-inverse);
    padding: var(--pep-space-3) var(--pep-space-4);
    text-align: center;
    width: 100%;
}
.sfsc-pep-page .pep-research-banner p {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--pep-space-2);
    flex-wrap: wrap;
    font-size: var(--pep-text-base);
    font-weight: var(--pep-weight-medium);
    line-height: var(--pep-leading-normal);
    color: var(--pep-text-inverse);
}
.sfsc-pep-page .pep-research-banner p svg {
    color: #fbbf24;        /* amber-400 — warning icon visible on dark zinc */
    flex-shrink: 0;
}
.sfsc-pep-page .pep-research-banner__strong {
    /* semibold (600) not bold (700) — Poppins is loaded at 400/500/600
       only; 700 would fake-bold or fall back. The banner emphasis
       still reads strong because the surrounding text is 500. */
    font-weight: var(--pep-weight-semibold);
    color: #fca5a5;        /* red-300 — emphasis on dark bg, contrast ~6.8:1 */
    letter-spacing: var(--pep-tracking-wide);
    text-transform: uppercase;
}


/* ═══════════════════════════════════════════════════════════════════
   8. HERO / BUY — vial pedestal (left) + buy panel (right).
   Mobile-first: stacked, vial above buy. ≥1024px: 2-col 1fr/1fr grid.
   The vial pedestal is the only "card" element in the hero — the
   buy panel is borderless typed content (Rams discipline).
   ═══════════════════════════════════════════════════════════════════ */

.sfsc-pep-page .pep-hero {
    padding-top: var(--pep-section-y);
    padding-bottom: var(--pep-space-8);  /* 40px — tightens approach to trust strip (Task 6 follow-up, re-applied) */
}

.sfsc-pep-page .pep-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--pep-hero-gap);
    /* Default align-items is `stretch` — pedestal grows to match
       buy panel content height (round 4). */
}
@media (min-width: 1024px) {
    .sfsc-pep-page .pep-hero-grid {
        /* 1fr 1fr — equal-width columns. Round 4-d: matches user's
           container math (1180 - 48 gap) / 2 = 566px per column.
           Reverted from 0.9fr/1.1fr (round 3) since the font swap to
           Anek Telugu changed text metrics; description should wrap
           cleanly at 566px column width without needing the asymmetry. */
        grid-template-columns: 1fr 1fr;
    }
}

/* ─── LEFT: vial pedestal ─────────────────────────────────────── */
/* Values extracted from Amino's compiled markup (round 4-b):
   Mobile: 20px radius, 24px padding, min-height 300px, 5/4 aspect.
   Desktop: 24px radius, 32px padding, min-height 450px, stretches to
   match buy panel column height (no aspect-ratio constraint). */
.sfsc-pep-page .pep-vial-stage {
    background: var(--pep-surface-soft);
    border: var(--pep-border-w-thin) solid var(--pep-border);
    border-radius: var(--pep-radius-xl);     /* 20px */
    padding: 24px;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 5 / 4;
}
@media (min-width: 1024px) {
    .sfsc-pep-page .pep-vial-stage {
        aspect-ratio: auto;
        height: 100%;
        min-height: 500px;  /* round 4-d: ~1.15:1 aspect at 566px column width = ~492px → rounded to 500 */
        padding: 32px;
        border-radius: var(--pep-radius-2xl); /* 24px */
    }
}
/* Vial photo: max-height bounded (220 mobile / 320 desktop) — round
   4-f scaled down to ~85% for more whitespace around the vial. */
.sfsc-pep-page .pep-vial-image {
    width: auto;
    height: auto;
    max-height: 220px;
    object-fit: contain;
    display: block;
}
@media (min-width: 1024px) {
    .sfsc-pep-page .pep-vial-image {
        max-height: 320px;
    }
}
.sfsc-pep-page .pep-vial-fallback {
    width: auto;
    max-width: 60%;
    max-height: 80%;
    height: auto;
}

/* ─── RIGHT: buy panel — card chrome, content stacked inside ─── */
/* Mobile: 20px radius, 24px padding. Desktop: 24px radius, 28px
   padding (1.75rem at lg). Amino exact, round 4-b. */
.sfsc-pep-page .pep-hero-buy {
    display: flex;
    flex-direction: column;
    background: var(--pep-surface);
    border: var(--pep-border-w-thin) solid var(--pep-border);
    border-radius: var(--pep-radius-xl);    /* 20px */
    padding: 24px;
    box-shadow: var(--pep-shadow-sm);
}
@media (min-width: 1024px) {
    .sfsc-pep-page .pep-hero-buy {
        padding: 28px;
        border-radius: var(--pep-radius-2xl); /* 24px */
    }
}

/* Eyebrow — italic small body, color #555. Not uppercase, not tracked
   wide — softer treatment than typical UI labels. */
.sfsc-pep-page .pep-hero-eyebrow {
    margin: 0 0 var(--pep-space-2);
    font-size: var(--pep-text-base);
    font-style: italic;
    font-weight: var(--pep-weight-regular);
    color: #555;
}

/* H1 — Anek Telugu Bold (round 4-e). Reverts the "Serif H1" locked
   divergence in favour of reference fidelity: Amino's H1 is Anek
   Telugu, and a real 700 face beats a fake-bolded Tiempos 600.
   Specs: text-3xl/5xl (30/48), font-bold (700), color #000,
   line-height 1, mb-1 (4px). !important guards against sitewide
   H1 selectors. */
.sfsc-pep-page .pep-hero-title {
    margin: 0 0 var(--pep-space-1);
    font-family: var(--pep-font-sans) !important;
    font-size: var(--pep-text-h1);
    font-weight: var(--pep-weight-bold);
    line-height: 1;
    letter-spacing: var(--pep-tracking-tight);
    color: #000;
}

/* Aliases — outlined pills (transparent bg, hairline border).
   Text color #52525b (zinc-600) per round 4 iteration. */
.sfsc-pep-page .pep-hero-aliases {
    list-style: none;
    margin: 0 0 var(--pep-space-5);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--pep-space-2);
}
.sfsc-pep-page .pep-hero-aliases li {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    /* Round 4-i: padding-top 2px compensates Anek's outsized descent
       metric (see .pep-dosage-pill comment for full explanation). */
    padding: 2px var(--pep-space-3) 0;
    background: transparent;
    border: var(--pep-border-w-thin) solid var(--pep-border);
    border-radius: var(--pep-radius-pill);
    font-size: var(--pep-text-sm);
    font-weight: var(--pep-weight-regular);
    line-height: 1;
    color: #52525b;
}

/* Description — inherits the global Anek Telugu sans. Round 4-h
   (option C): font-size dropped 16 → 14 so ~230-char description
   fits in 2 lines at 736px column width. */
.sfsc-pep-page .pep-hero-desc {
    margin: 0 0 var(--pep-space-7);
    font-size: var(--pep-text-base);  /* 14px — was --pep-text-md (16px) */
    line-height: var(--pep-leading-relaxed);
    color: var(--pep-text-body);
}

/* Buy rows — generic label-left, control-right pattern */
.sfsc-pep-page .pep-buy-row {
    display: flex;
    align-items: center;
    gap: var(--pep-space-4);
    flex-wrap: wrap;
    margin-bottom: var(--pep-space-5);
}
.sfsc-pep-page .pep-buy-label {
    flex-shrink: 0;
    width: 80px;
    font-size: var(--pep-text-sm);
    font-weight: var(--pep-weight-semibold);
    color: var(--pep-text);
    letter-spacing: var(--pep-tracking-wide);
    text-transform: uppercase;
}

/* Dosage pills — white default, dark when active */
.sfsc-pep-page .pep-dosage-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pep-space-2);
}
.sfsc-pep-page .pep-dosage-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;     /* 44 min touch target (Task 16) */
    /* Round 4-i: padding-top 3px compensates Anek Telugu's outsized
       descent metric (Telugu vowel marks reserve space below baseline,
       making Latin glyphs sit ~3-4px high inside flex-centered line
       boxes). Without this, "10MG" reads upper-shifted. */
    padding: 3px var(--pep-space-5) 0;
    font-family: inherit;
    font-size: var(--pep-text-md);    /* 16px — round 4-g (was 14px text-base) */
    font-weight: var(--pep-weight-medium);
    line-height: 1;
    text-align: center;               /* round 4-h: defensive against sitewide button defaults */
    text-indent: 0;
    color: var(--pep-text);
    background: var(--pep-surface);
    border: var(--pep-border-w-thin) solid var(--pep-border);
    border-radius: var(--pep-radius-md);
    cursor: pointer;
    transition:
        border-color var(--pep-duration-fast) var(--pep-ease-default),
        background var(--pep-duration-fast) var(--pep-ease-default),
        color var(--pep-duration-fast) var(--pep-ease-default);
}
.sfsc-pep-page .pep-dosage-pill:hover {
    border-color: var(--pep-border-strong);
}
.sfsc-pep-page .pep-dosage-pill.is-active {
    background: var(--pep-text);
    color: var(--pep-text-inverse);
    border-color: var(--pep-text);
}
.sfsc-pep-page .pep-dosage-pill:focus-visible {
    outline: none;
    box-shadow: var(--pep-shadow-focus);
}

/* Quantity stepper — pill-shaped border container with `−` / number / `+`.
   Round 4-f: border softened from --pep-text (full black) to --pep-border
   (#e8e8e8) so it visually matches the rest of the panel hairlines. The
   +/− icon strokes (light #e4e4e7 in markup) read because they sit
   inside the visible bordered pill. Container 40px tall. */
.sfsc-pep-page .pep-qty {
    display: inline-flex;
    align-items: center;
    height: 40px;
    border: var(--pep-border-w-thin) solid var(--pep-border);
    border-radius: var(--pep-radius-pill);
    background: var(--pep-surface);
    overflow: hidden;
    padding: 0;
}
.sfsc-pep-page .pep-qty-btn {
    width: 44px;      /* 44×44 min touch target (Task 16, was 40×40) */
    height: 44px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--pep-duration-fast) var(--pep-ease-default);
}
.sfsc-pep-page .pep-qty-btn:hover {
    background: var(--pep-surface-soft);
}
.sfsc-pep-page .pep-qty-btn:focus-visible {
    outline: none;
    background: var(--pep-surface-soft);
    box-shadow: inset 0 0 0 2px var(--pep-accent-ring);
}
.sfsc-pep-page .pep-qty-btn svg {
    flex-shrink: 0;
    display: block;
}
.sfsc-pep-page .pep-qty-input {
    width: 44px;
    height: 40px;          /* round 4-g: match parent pill height */
    /* Round 4-i: padding-top 3px compensates Anek Telugu's outsized
       descent (Latin "1" sits high in line-box otherwise). */
    padding: 3px 0 0 0;
    border: 0;
    background: transparent;
    text-align: center;
    font-family: inherit;
    font-size: var(--pep-text-md);
    font-weight: var(--pep-weight-semibold);
    line-height: 1;
    color: var(--pep-text);
    appearance: textfield;
    -moz-appearance: textfield;
}
.sfsc-pep-page .pep-qty-input::-webkit-outer-spin-button,
.sfsc-pep-page .pep-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.sfsc-pep-page .pep-qty-input:focus {
    outline: none;
}

/* Price — large, tabular numbers, right-aligned via auto margin */
.sfsc-pep-page .pep-buy-price {
    margin-left: auto;
    font-size: var(--pep-text-2xl);
    font-weight: var(--pep-weight-semibold);
    color: var(--pep-text);
    font-variant-numeric: tabular-nums;
}

/* CTA row — secondary CoA pill (left) + primary green Add-to-cart (right) */
.sfsc-pep-page .pep-cta-row {
    display: flex;
    align-items: center;
    gap: var(--pep-space-3);
    margin-top: var(--pep-space-6);
    margin-bottom: var(--pep-space-4);  /* round 4-f: 32 → 16 to tighten gap before trust strip */
}

/* Secondary CoA pill — outline, equal height, anchors to #pep-coa.
   Text color #52525b (zinc-600) per round 4 iteration. */
.sfsc-pep-page .pep-cta-coa {
    flex-shrink: 0;
    height: 52px;
    /* Round 4-i: padding-top 2px to compensate Anek descent metric. */
    padding: 2px var(--pep-space-5) 0;
    background: var(--pep-surface);
    color: #52525b;
    border: var(--pep-border-w-thin) solid var(--pep-border);
    border-radius: var(--pep-radius-pill);
    font-family: inherit;
    font-size: var(--pep-text-base);
    font-weight: var(--pep-weight-medium);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        border-color var(--pep-duration-fast) var(--pep-ease-default),
        color var(--pep-duration-fast) var(--pep-ease-default);
}
.sfsc-pep-page .pep-cta-coa:hover {
    border-color: var(--pep-border-strong);
    color: var(--pep-text);
}
.sfsc-pep-page .pep-cta-coa:focus-visible {
    outline: none;
    border-color: var(--pep-accent);
    box-shadow: var(--pep-shadow-focus);
}

/* At ≤480px the buy panel inner is ~240px; View CoA's 20px sides
   + Add to cart need to share that. Reduce View CoA padding so
   Add to cart doesn't compress at 320 viewport. */
@media (max-width: 480px) {
    .sfsc-pep-page .pep-cta-coa {
        padding: 2px var(--pep-space-3) 0;   /* 12px — was 20px */
    }
}

.sfsc-pep-page .pep-cta-add {
    flex: 1;
    height: 52px;
    padding: 0 var(--pep-space-5);
    background: var(--pep-text);
    color: var(--pep-text-inverse);
    border: 0;
    border-radius: var(--pep-radius-pill);
    font-family: inherit;
    font-size: var(--pep-text-md);
    font-weight: var(--pep-weight-semibold);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pep-space-4);       /* 16px — Task 16 round 3 (12px still felt tight against cart SVG's internal left padding) */
    box-shadow: var(--pep-shadow-md);
    transition:
        background var(--pep-duration-fast) var(--pep-ease-default),
        transform var(--pep-duration-fast) var(--pep-ease-default);
}
.sfsc-pep-page .pep-cta-add:hover {
    background: #27272a;  /* zinc-800 — slight lift from pure black on hover */
}
.sfsc-pep-page .pep-cta-add:active {
    transform: scale(0.98);
}
.sfsc-pep-page .pep-cta-add:focus-visible {
    outline: none;
    box-shadow: var(--pep-shadow-md), var(--pep-shadow-focus);
}
.sfsc-pep-page .pep-cta-add:disabled,
.sfsc-pep-page .pep-cta-add.is-loading {
    opacity: 0.65;
    cursor: not-allowed;
}
/* Success state keeps green — confirms the add visually. The base
   button is black; flipping to green on success is a meaningful
   colour shift, not just a tone change. */
.sfsc-pep-page .pep-cta-add.is-success {
    background: var(--pep-accent);
}
.sfsc-pep-page .pep-cta-add.is-error {
    background: var(--pep-danger-strong);
}
.sfsc-pep-page .pep-cta-add svg {
    flex-shrink: 0;
    display: block;  /* round 4-g: kill inline baseline offset so icon aligns to text mid-line, not text baseline */
}
/* Round 4-i: the "Add to cart" text label sits 2-3px high vs the
   cart icon (Anek descent metric). Pushing only the text-span down
   via position so the icon stays at flex-center. */
.sfsc-pep-page .pep-cta-add-label {
    position: relative;
    top: 2px;
}

/* Trust mini-row — 3 evenly-split items, full panel width. Round 4-f:
   margin-top removed (4-e's 24mt + cta-row 32mb = 56px gap was too
   large; tightened to 16px via cta-row mb only). Items centered
   within cells via justify-items. #f8f8f8 bg + #e8e8e8 border. */
.sfsc-pep-page .pep-trust-mini {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
    align-items: center;
    gap: var(--pep-space-3);
    padding: var(--pep-space-3) var(--pep-space-4);
    background: var(--pep-surface-soft);
    border: var(--pep-border-w-thin) solid var(--pep-border);
    border-radius: var(--pep-radius-md);
}
/* Round 4-f/g: stacked layout (icon on top, label below). Round 4-g
   bumped icon 20 → 24 in template + label 11 → 12 here. */
.sfsc-pep-page .pep-trust-mini-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--pep-space-2);  /* 8px between icon and label */
    color: var(--pep-text-muted);
    font-size: var(--pep-text-sm);  /* 12px (was 11px text-xs) */
    font-weight: var(--pep-weight-medium);
    line-height: var(--pep-leading-snug);
    text-align: center;
}
.sfsc-pep-page .pep-trust-mini-item svg {
    color: var(--pep-accent);
    flex-shrink: 0;
}

/* At ≤480px the 3-col mini-row gets tight. Stay 3-col (Task 16
   round 3 reverted an earlier icon-LEFT stack approach) but shrink
   icons to 18px and labels to 11px — these are ambient trust signals,
   not body content, so sub-12px is acceptable. Tighter gap (8px)
   buys back column width. Math at 320 buy-panel width ~240:
   240 − 16 (2 gaps) / 3 = ~75px per col. */
@media (max-width: 480px) {
    .sfsc-pep-page .pep-trust-mini {
        gap: var(--pep-space-2);
    }
    .sfsc-pep-page .pep-trust-mini-item svg {
        width: 18px;
        height: 18px;
    }
    .sfsc-pep-page .pep-trust-mini-item span {
        font-size: 11px;
        line-height: 1.3;
    }
}

/* Payment marks — inline label + simpleicons CDN.
   Round 4-h: scaled up — label 11 → 14px, icons 18 → 26px tall. */
.sfsc-pep-page .pep-payment {
    display: flex;
    align-items: center;
    gap: var(--pep-space-3);
    margin-top: var(--pep-space-5);
}
.sfsc-pep-page .pep-payment-label {
    font-size: var(--pep-text-md);  /* 16px — round 4-i (was 14px) */
    color: var(--pep-text-muted);
}
.sfsc-pep-page .pep-payment-marks {
    display: inline-flex;
    align-items: center;
    gap: var(--pep-space-4);  /* round 4-i: 12 → 16 to balance the larger icons */
}
.sfsc-pep-page .pep-pay-icon {
    height: 32px;                      /* round 4-i: 26 → 32 */
    width: auto;
    display: block;
}

/* Soft fallback — no matching WC product */
.sfsc-pep-page .pep-buy-unavailable {
    padding: var(--pep-space-7);
    background: var(--pep-surface-soft);
    border: var(--pep-border-w-thin) solid var(--pep-border);
    border-radius: var(--pep-radius-lg);
    font-size: var(--pep-text-md);
    color: var(--pep-text-body);
}
.sfsc-pep-page .pep-buy-unavailable p { margin: 0; }
.sfsc-pep-page .pep-buy-unavailable a {
    color: var(--pep-text);
    font-weight: var(--pep-weight-semibold);
}

/* Distributor routing card — replaces the commerce block when a
   logged-in `sfsc_distributor` user views a peptide page (Task 4).
   Distributors purchase via /distributor/ where wholesale pricing
   is wired; the public peptide page is retail-facing. */
.sfsc-pep-page .pep-buy-distributor {
    padding: 24px 28px;
    background: var(--pep-surface-soft);
    border: var(--pep-border-w-thin) solid var(--pep-border);
    border-radius: var(--pep-radius-lg);
}
.sfsc-pep-page .pep-buy-distributor-text {
    margin: 0 0 18px;
    font-size: var(--pep-text-base);
    line-height: var(--pep-leading-relaxed);
    color: var(--pep-text-body);
}
/* The base .pep-cta-add has `flex: 1` (fills its CTA row container).
   Outside that flex context the link won't span the card width
   without an explicit override. */
.sfsc-pep-page .pep-buy-distributor-cta {
    width: 100%;
    text-decoration: none;
}


/* ═══════════════════════════════════════════════════════════════════
   9. TRUST STRIP — 3-col band below hero (Task 5). Stacked layout
   per item (icon above strong + sub text), green-ringed icon circles.
   Stays 3-col at all widths down to 320px — Task 16 round 2 reverted
   the earlier mobile 1-col stack; sub-text wraps to 2-3 lines at
   narrow widths, which is the intended Amino-faithful trade.
   ═══════════════════════════════════════════════════════════════════ */
.sfsc-pep-page .pep-trust {
    /* Task 6 follow-up: 16 top + 32 bottom. Pairs with .pep-hero
       asymmetric padding (top kept, bottom 40) and .pep-coa reduced
       top (32) to give hero→trust 56px and trust→CoA 64px gaps. */
    padding: var(--pep-space-4) 0 var(--pep-space-7);
}
.sfsc-pep-page .pep-trust-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--pep-space-6);
}
.sfsc-pep-page .pep-trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--pep-space-3);
}
.sfsc-pep-page .pep-trust-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: var(--pep-accent-soft);
    color: var(--pep-accent);
    border-radius: var(--pep-radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sfsc-pep-page .pep-trust-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sfsc-pep-page .pep-trust-strong {
    font-size: var(--pep-text-md);
    font-weight: var(--pep-weight-semibold);
    color: var(--pep-text);
    line-height: 1.3;
}
.sfsc-pep-page .pep-trust-sub {
    font-size: var(--pep-text-base);
    color: var(--pep-text-muted);
    line-height: 1.4;
}
@media (max-width: 640px) {
    .sfsc-pep-page .pep-trust-grid {
        gap: var(--pep-space-3);   /* tighter cols at narrow widths; stays 3-col */
    }
}


/* ═══════════════════════════════════════════════════════════════════
   10. SECTION HEAD — generic (icon + h2 + sub) reused across CoA,
   Compound Info, Related, Sources, Compliance, CTA band sections.
   ═══════════════════════════════════════════════════════════════════ */
.sfsc-pep-page .pep-section-head {
    display: flex;
    align-items: center;
    gap: var(--pep-space-4);
    margin-bottom: var(--pep-space-7);
}
.sfsc-pep-page .pep-section-head-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: var(--pep-accent-soft);
    color: var(--pep-accent);
    border-radius: var(--pep-radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sfsc-pep-page .pep-section-head-text {
    display: flex;
    flex-direction: column;
}
.sfsc-pep-page .pep-section-title {
    font-family: var(--pep-font-display);
    font-size: var(--pep-text-h2);
    font-weight: var(--pep-weight-semibold);
    color: var(--pep-text);
    line-height: var(--pep-leading-snug);
    letter-spacing: var(--pep-tracking-snug);
    margin: 0;
}
.sfsc-pep-page .pep-section-sub {
    font-size: var(--pep-text-base);
    color: var(--pep-text-muted);
    margin: 2px 0 0;
    line-height: 1.4;
}


/* ═══════════════════════════════════════════════════════════════════
   11. CERTIFICATE OF ANALYSIS — Single focal card. 2px black border
   per Amino reference; 99.11% purity number is the visual anchor.
   Card centered, max-width 720px (focal treatment, not full-width).
   ═══════════════════════════════════════════════════════════════════ */
.sfsc-pep-page .pep-coa {
    /* Task 6 follow-up: 32 top + section-y bottom. Tightens approach
       from trust strip; bottom keeps full section-y for next section. */
    padding: var(--pep-space-7) 0 var(--pep-section-y);
}

/* CoA strip — horizontal flex container that holds the card(s).
   Single card today; supports horizontal scroll + snap when more
   variants ship later. Padding-block keeps any hover-lift transform
   from clipping. Scrollbar hidden cross-browser per Amino pattern. */
.sfsc-pep-page .pep-coa-strip {
    display: flex;
    gap: var(--pep-space-3);
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    padding-block: 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.sfsc-pep-page .pep-coa-strip::-webkit-scrollbar { display: none; }

.sfsc-pep-page .pep-coa-card {
    flex-shrink: 0;
    width: 280px;
    scroll-snap-align: start;
    background: var(--pep-surface);
    border: var(--pep-border-w-medium) solid var(--pep-text);
    border-radius: var(--pep-radius-2xl);
    padding: 20px;                /* Amino p-5 (round 6 follow-up) */
    display: flex;
    flex-direction: column;
    gap: var(--pep-space-3);      /* 12px (was 20px) */
}

/* Pills row — single "Latest" dark pill */
.sfsc-pep-page .pep-coa-pills {
    display: flex;
    align-items: center;
    gap: var(--pep-space-2);
}
.sfsc-pep-page .pep-coa-pill {
    padding: 5px 10px 3px;       /* slight asymmetric to compensate Anek descent in tiny uppercase */
    font-size: 11px;
    font-weight: var(--pep-weight-semibold);
    letter-spacing: var(--pep-tracking-wide);
    text-transform: uppercase;
    border-radius: var(--pep-radius-pill);
    line-height: 1;
}
.sfsc-pep-page .pep-coa-pill--dark {
    background: var(--pep-pill-dark-bg);
    color: var(--pep-pill-dark-text);
}

/* Purity — the focal number. Sized to match Amino's compact card. */
.sfsc-pep-page .pep-coa-purity {
    text-align: center;
    margin: 0;
}
.sfsc-pep-page .pep-coa-purity-num {
    font-family: var(--pep-font-sans);
    font-size: 36px;                  /* round 6 follow-up: was clamp(40, 5.5vw, 64) — Amino reference is ~36px */
    font-weight: var(--pep-weight-bold);
    color: var(--pep-accent);
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 0;
    font-variant-numeric: tabular-nums;
}
.sfsc-pep-page .pep-coa-purity-label {
    font-size: 11px;
    font-weight: var(--pep-weight-semibold);
    color: var(--pep-text-muted);
    letter-spacing: var(--pep-tracking-wider);
    text-transform: uppercase;
    margin: var(--pep-space-1) 0 0;   /* 4px (was 8px) */
    line-height: 1;
}

/* Data table — inset card with 5 rows. Round 6 follow-up: tightened
   padding so card matches Amino's ~369px height. */
.sfsc-pep-page .pep-coa-data {
    background: var(--pep-surface-inset);
    border: var(--pep-border-w-thin) solid var(--pep-border);
    border-radius: var(--pep-radius-md);
    padding: var(--pep-space-2) var(--pep-space-3);   /* 8px 12px (was 12 20) */
}
.sfsc-pep-page .pep-coa-data-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--pep-space-3);
    padding: var(--pep-space-2) 0;                    /* 8px (was 12) */
}
.sfsc-pep-page .pep-coa-data-row + .pep-coa-data-row {
    border-top: var(--pep-border-w-thin) solid var(--pep-border);
}
.sfsc-pep-page .pep-coa-data-key {
    font-size: var(--pep-text-base);
    color: var(--pep-text-muted);
    flex-shrink: 0;
}
.sfsc-pep-page .pep-coa-data-val {
    font-size: var(--pep-text-base);
    font-weight: var(--pep-weight-semibold);
    color: var(--pep-text);
    text-align: right;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}
.sfsc-pep-page .pep-coa-data-val--green {
    color: var(--pep-accent);
}
.sfsc-pep-page .pep-coa-data-val.pep-mono {
    font-family: var(--pep-font-mono);
    font-size: 13px;
}

/* "View COA" button — black pill, full width within card.
   Round 6 follow-up: 48 → 40px to match Amino's compact card. */
.sfsc-pep-page .pep-coa-btn {
    width: 100%;
    height: 40px;
    padding: 0 var(--pep-space-5);
    background: var(--pep-text);
    color: var(--pep-text-inverse);
    border: 0;
    border-radius: var(--pep-radius-md);
    font-family: inherit;
    font-size: var(--pep-text-base);
    font-weight: var(--pep-weight-semibold);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pep-space-2);
    transition: background var(--pep-duration-fast) var(--pep-ease-default);
}
.sfsc-pep-page .pep-coa-btn:hover {
    background: #27272a;
}
.sfsc-pep-page .pep-coa-btn svg {
    flex-shrink: 0;
    display: block;
}
/* Same Anek descent fix as Add-to-cart button — text drops 1-2px to
   sit at icon's level, not above it. */
.sfsc-pep-page .pep-coa-btn-label {
    position: relative;
    top: 1px;
}


/* ═══════════════════════════════════════════════════════════════════
   12. MONO UTILITY — applies Söhne Mono to any element. Used for
   sequence/formula in compound table, lot numbers in CoA, DOIs in
   sources cards (Task 9). Slightly smaller font-size since mono
   glyphs read denser than the surrounding sans.
   ═══════════════════════════════════════════════════════════════════ */
.sfsc-pep-page .pep-mono {
    font-family: var(--pep-font-mono);
    font-size: 13px;
    letter-spacing: 0;
}


/* ═══════════════════════════════════════════════════════════════════
   13. COMPOUND INFORMATION (Task 7) — 2-card grid: Molecular Profile
   + Stability Information. Constrained to --pep-container-narrow
   (960px) for readability of long technical specs.
   ═══════════════════════════════════════════════════════════════════ */
.sfsc-pep-page .pep-compound {
    /* Same asymmetric pattern as .pep-coa: tight top, full section-y
       bottom. CoA's bottom (88px) + this top (32px) = 120px gap;
       can be tightened in a follow-up if too airy. */
    padding: var(--pep-space-7) 0 var(--pep-section-y);
}

/* 2-card grid */
.sfsc-pep-page .pep-compound-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--pep-space-6);
}
@media (min-width: 1024px) {
    .sfsc-pep-page .pep-compound-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--pep-space-6);
    }
}

/* Individual card */
.sfsc-pep-page .pep-compound-card {
    background: var(--pep-surface);
    border: var(--pep-border-w-thin) solid var(--pep-border);
    border-radius: var(--pep-radius-xl);
    padding: 24px;
    display: flex;
    flex-direction: column;
}
@media (min-width: 1024px) {
    .sfsc-pep-page .pep-compound-card {
        padding: 32px;
    }
}

/* Card eyebrow — small icon + uppercase label, like a tab header */
.sfsc-pep-page .pep-compound-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--pep-space-1_5);
    font-size: var(--pep-text-sm);
    font-weight: var(--pep-weight-semibold);
    color: var(--pep-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--pep-tracking-wide);
    margin-bottom: var(--pep-space-3);
    line-height: 1;
}
.sfsc-pep-page .pep-compound-eyebrow svg {
    flex-shrink: 0;
}
.sfsc-pep-page .pep-compound-card--molecular .pep-compound-eyebrow svg {
    color: var(--pep-accent);
}
.sfsc-pep-page .pep-compound-card--storage .pep-compound-eyebrow svg {
    color: var(--pep-storage-cold-fg);
}

/* Card H3 */
.sfsc-pep-page .pep-compound-title {
    font-family: var(--pep-font-display);
    font-size: var(--pep-text-h3);          /* 20px */
    font-weight: var(--pep-weight-semibold);
    color: var(--pep-text);
    margin: 0 0 var(--pep-space-5);
    letter-spacing: -0.005em;
    line-height: 1.25;
}

/* Card A — molecular profile table */
.sfsc-pep-page .pep-compound-table {
    background: var(--pep-surface-inset);
    border: var(--pep-border-w-thin) solid var(--pep-border);
    border-radius: var(--pep-radius-md);
    padding: var(--pep-space-2) var(--pep-space-4);
    margin-bottom: var(--pep-space-4);
}
.sfsc-pep-page .pep-compound-tr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pep-space-3);
    padding: var(--pep-space-4) 0;
}
.sfsc-pep-page .pep-compound-tr + .pep-compound-tr {
    border-top: var(--pep-border-w-thin) solid var(--pep-border);
}
.sfsc-pep-page .pep-compound-tk {
    font-size: var(--pep-text-base);
    color: var(--pep-text-muted);
    flex-shrink: 0;
}
.sfsc-pep-page .pep-compound-tv {
    font-size: var(--pep-text-base);
    font-weight: var(--pep-weight-semibold);
    color: var(--pep-text);
    text-align: right;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

/* PubChem external link — pinned to bottom of Card A so cards align */
.sfsc-pep-page .pep-compound-link {
    display: inline-flex;
    align-items: center;
    gap: var(--pep-space-2);
    font-size: var(--pep-text-base);
    font-weight: var(--pep-weight-medium);
    color: var(--pep-text-muted);
    text-decoration: none;
    margin-top: auto;
    transition: color var(--pep-duration-fast) var(--pep-ease-default);
}
.sfsc-pep-page .pep-compound-link:hover {
    color: var(--pep-text);
}
.sfsc-pep-page .pep-compound-link svg {
    flex-shrink: 0;
}

/* Card B — stability tags row */
.sfsc-pep-page .pep-stability-tags {
    list-style: none;
    margin: 0 0 var(--pep-space-5);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--pep-space-2);
}
.sfsc-pep-page .pep-stability-tags li {
    padding: 6px 12px;
    background: var(--pep-surface-soft);
    border-radius: var(--pep-radius-md);
    font-size: var(--pep-text-base);
    font-weight: var(--pep-weight-medium);
    color: var(--pep-text-body);
}

/* Card B — storage rows. Each row: tinted icon chip + label/value. */
.sfsc-pep-page .pep-storage-list {
    display: flex;
    flex-direction: column;
    gap: var(--pep-space-3);
}
.sfsc-pep-page .pep-storage-row {
    display: flex;
    align-items: center;
    gap: var(--pep-space-4);
    padding: var(--pep-space-4) var(--pep-space-5);
    background: var(--pep-surface-inset);
    border: var(--pep-border-w-thin) solid var(--pep-border);
    border-radius: var(--pep-radius-md);
}
.sfsc-pep-page .pep-storage-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--pep-radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Per-icon tinted chips per --pep-storage-* tokens */
.sfsc-pep-page .pep-storage-icon-snowflake     { background: var(--pep-storage-cold-bg);   color: var(--pep-storage-cold-fg); }
.sfsc-pep-page .pep-storage-icon-flask-conical { background: var(--pep-storage-bench-bg);  color: var(--pep-storage-bench-fg); }
.sfsc-pep-page .pep-storage-icon-shield        { background: var(--pep-storage-shield-bg); color: var(--pep-storage-shield-fg); }

.sfsc-pep-page .pep-storage-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.sfsc-pep-page .pep-storage-label {
    font-size: var(--pep-text-base);
    color: var(--pep-text-muted);
    line-height: 1.3;
}
.sfsc-pep-page .pep-storage-value {
    font-size: var(--pep-text-md);
    font-weight: var(--pep-weight-semibold);
    color: var(--pep-text);
    line-height: 1.3;
}
.sfsc-pep-page .pep-storage-meta {
    font-weight: var(--pep-weight-regular);
    color: var(--pep-text-muted);
}


/* ═══════════════════════════════════════════════════════════════════
   14. FREQUENTLY RESEARCHED TOGETHER (Task 8) — horizontal scroll-
   snap carousel of related-peptide cards. Each card: white surface,
   fixed width clamp(240, 70vw, 280), edge-to-edge 1:1 photo area
   with peptide-specific tint (from peptide-data tint_color), white
   info area below with title / category / foot row (price-block +
   circular arrow button). Functional vs placeholder branched at PHP
   runtime via sfsc_get_peptide_data or matching WC product. Placeholder
   cards dim photo to 60% and use "Coming soon" + a disabled gray
   arrow in place of price + functional arrow.
   ═══════════════════════════════════════════════════════════════════ */
.sfsc-pep-page .pep-related {
    padding: var(--pep-space-7) 0 var(--pep-section-y);
}

/* Carousel — horizontal scroll-snap strip at all viewports */
.sfsc-pep-page .pep-related-strip {
    display: flex;
    gap: var(--pep-space-4);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--pep-space-2);   /* visual scrollbar gutter */
    scrollbar-width: thin;
}
.sfsc-pep-page .pep-related-strip::-webkit-scrollbar {
    height: 4px;
}
.sfsc-pep-page .pep-related-strip::-webkit-scrollbar-thumb {
    background: var(--pep-border);
    border-radius: var(--pep-radius-pill);
}

/* Card — fixed width, snaps to start of strip. flex shorthand
   (grow=0, shrink=0, basis=clamp) is more robust than `width:` in
   flex contexts; max-width caps any external !important rule that
   might try to force the card to fill its container. */
.sfsc-pep-page .pep-related-card {
    flex: 0 0 clamp(220px, 65vw, 280px);  /* Task 16: was 240/70vw — narrowed for ~1.5 cards visible at 320 */
    max-width: 280px;
    scroll-snap-align: start;
    background: var(--pep-surface);
    border-radius: var(--pep-radius-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
@media (min-width: 1024px) {
    .sfsc-pep-page .pep-related-card {
        border-radius: var(--pep-radius-2xl);
    }
}

/* Photo area — edge-to-edge square (1:1); tinted bg via inline style
   from peptide-data tint_color. Photo padded inside so vial/silhouette
   doesn't touch the card edges. Square aspect was the Task 8 visual-
   round correction — original spec called for 4:5 portrait. */
.sfsc-pep-page .pep-related-art {
    display: block;
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--pep-surface-soft);   /* fallback when no tint */
}
.sfsc-pep-page a.pep-related-art {
    text-decoration: none;
}
.sfsc-pep-page .pep-related-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: 12%;
    transition: transform var(--pep-duration-normal) var(--pep-ease-default);
}
.sfsc-pep-page a.pep-related-art:hover .pep-related-photo {
    transform: scale(1.05);
}
.sfsc-pep-page .pep-related-svg-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sfsc-pep-page .pep-related-svg-wrap svg {
    width: 50%;
    height: auto;
    opacity: 0.85;
    transition: transform var(--pep-duration-normal) var(--pep-ease-default);
}
.sfsc-pep-page a.pep-related-art:hover .pep-related-svg-wrap svg {
    transform: scale(1.05);
}

/* Info area — white card bottom; holds title / category / foot row */
.sfsc-pep-page .pep-related-info {
    background: var(--pep-surface);
    padding: var(--pep-space-4);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: var(--pep-space-1);
}
@media (min-width: 1024px) {
    .sfsc-pep-page .pep-related-info {
        padding: var(--pep-space-5);
    }
}

/* Title */
.sfsc-pep-page .pep-related-name {
    font-family: var(--pep-font-display);
    font-size: var(--pep-text-md);
    font-weight: var(--pep-weight-semibold);
    color: var(--pep-text);
    line-height: 1.2;
    letter-spacing: -0.005em;
    margin: 0;
    /* Clamp long names to 2 lines so card heights stay aligned */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (min-width: 1024px) {
    .sfsc-pep-page .pep-related-name { font-size: var(--pep-text-lg); }
}

/* Category — single-line clamped */
.sfsc-pep-page .pep-related-cat {
    font-size: var(--pep-text-base);   /* 14px — Task 16 (was 12) */
    color: var(--pep-text-muted);
    margin: 0;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Foot row — pinned to bottom of info area: price-block left, arrow right */
.sfsc-pep-page .pep-related-foot {
    margin-top: auto;
    padding-top: var(--pep-space-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pep-space-2);
}
.sfsc-pep-page .pep-related-price-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
    gap: 2px;
}
.sfsc-pep-page .pep-related-from {
    font-size: 11px;
    color: var(--pep-text-muted);
}
.sfsc-pep-page .pep-related-price {
    font-family: var(--pep-font-display);
    font-size: var(--pep-text-md);
    font-weight: var(--pep-weight-semibold);
    color: var(--pep-text);
    font-variant-numeric: tabular-nums;
}
@media (min-width: 1024px) {
    .sfsc-pep-page .pep-related-price { font-size: var(--pep-text-lg); }
}
.sfsc-pep-page .pep-related-soon {
    font-size: var(--pep-text-base);   /* 14px — Task 16 (was 12) */
    color: var(--pep-text-muted);
    font-style: italic;
}

/* Circular arrow button — bottom-right of foot row */
.sfsc-pep-page .pep-related-arrow {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    position: relative;
    border-radius: 50%;
    background: var(--pep-text);
    color: var(--pep-text-inverse);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background var(--pep-duration-fast) var(--pep-ease-default);
}
/* Extend tap target to ~44×44 without bumping the visual circle.
   The pseudo-element captures pointer events that bubble to the
   parent <a>, so a tap 4px outside the visible button still hits. */
.sfsc-pep-page .pep-related-arrow::before {
    content: '';
    position: absolute;
    inset: -4px;
}
.sfsc-pep-page .pep-related-arrow:hover {
    background: #27272a;
}
.sfsc-pep-page .pep-related-arrow--disabled {
    background: var(--pep-text-faint);
    cursor: not-allowed;
}
.sfsc-pep-page .pep-related-arrow--disabled:hover {
    background: var(--pep-text-faint);
}

/* Placeholder card treatment — dimmed photo, no hover effects */
.sfsc-pep-page .pep-related-card--placeholder .pep-related-art {
    cursor: default;
}
.sfsc-pep-page .pep-related-card--placeholder .pep-related-photo,
.sfsc-pep-page .pep-related-card--placeholder .pep-related-svg-wrap svg {
    opacity: 0.6;
}
.sfsc-pep-page .pep-related-card--placeholder .pep-related-photo {
    transform: none;
}
.sfsc-pep-page .pep-related-card--placeholder .pep-related-name {
    color: var(--pep-text-muted);
}


/* ═══════════════════════════════════════════════════════════════════
   15. SOURCES & REFERENCES (Task 9) — 12-card responsive grid of
   peer-reviewed citations. White surface cards with hairline
   borders; subtle hover lift. 1-col mobile, 2-col tablet, 3-col
   desktop. Cards align to consistent height via 3-line title clamp
   and 2-line authors clamp; "View Source" link pins to bottom via
   margin-top: auto.
   ═══════════════════════════════════════════════════════════════════ */
.sfsc-pep-page .pep-sources {
    padding: var(--pep-space-7) 0 var(--pep-section-y);
}

.sfsc-pep-page .pep-sources-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--pep-space-4);
}
@media (min-width: 720px) {
    .sfsc-pep-page .pep-sources-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--pep-space-5);
    }
}
@media (min-width: 1024px) {
    .sfsc-pep-page .pep-sources-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.sfsc-pep-page .pep-source-card {
    background: var(--pep-surface);
    border: var(--pep-border-w-thin) solid var(--pep-border);
    border-radius: var(--pep-radius-lg);
    padding: var(--pep-space-5);
    box-shadow: var(--pep-shadow-sm);
    transition:
        box-shadow var(--pep-duration-fast) var(--pep-ease-default),
        transform var(--pep-duration-fast) var(--pep-ease-default);
    display: flex;
    flex-direction: column;
}
.sfsc-pep-page .pep-source-card:hover {
    box-shadow: var(--pep-shadow-card-hover);
    transform: translateY(-2px);
}

.sfsc-pep-page .pep-source-journal {
    font-size: var(--pep-text-sm);
    font-weight: var(--pep-weight-semibold);
    color: var(--pep-accent);
    text-transform: uppercase;
    letter-spacing: var(--pep-tracking-wide);
    margin: 0 0 var(--pep-space-2);
    line-height: 1.3;
}

.sfsc-pep-page .pep-source-title {
    font-family: var(--pep-font-display);
    font-size: var(--pep-text-md);
    font-weight: var(--pep-weight-semibold);
    color: var(--pep-text);
    line-height: 1.35;
    margin: 0 0 var(--pep-space-3);
    /* 3-line clamp so cards align to consistent height */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sfsc-pep-page .pep-source-meta {
    font-size: var(--pep-text-base);
    color: var(--pep-text-muted);
    margin: 0 0 var(--pep-space-2);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pep-space-2);
}
.sfsc-pep-page .pep-source-bullet {
    color: var(--pep-text-faint);
}

.sfsc-pep-page .pep-source-authors {
    font-size: var(--pep-text-base);
    font-style: italic;
    color: var(--pep-text-muted);
    margin: 0 0 var(--pep-space-4);
    line-height: 1.4;
    /* 2-line clamp — keeps lead + co-author visible before ellipsis,
       matches academic citation convention. Slight inter-card height
       variance is acceptable. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sfsc-pep-page .pep-source-link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--pep-space-1_5);
    font-size: var(--pep-text-base);
    font-weight: var(--pep-weight-medium);
    color: var(--pep-accent);
    text-decoration: none;
    transition: color var(--pep-duration-fast) var(--pep-ease-default);
}
.sfsc-pep-page .pep-source-link:hover {
    color: var(--pep-accent-hover);
}
.sfsc-pep-page .pep-source-link svg {
    flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════════
   16. IMPORTANT RESEARCH NOTICE (Task 10) — single soft-red card.
   Heading + 3 body paragraphs, all in danger-tinted text per Amino
   reference. Body strong + heading = --pep-danger-strong (red-900);
   paragraph body = --pep-danger-text (red-800). Card uses solid
   --pep-danger-bg (v1 had a gradient; reference is solid). Brief
   spec said --pep-text-body for paragraphs but reference fidelity
   won — see DESIGN_BRIEF principle #1 / TASKS.md item 10 update.
   ═══════════════════════════════════════════════════════════════════ */
.sfsc-pep-page .pep-compliance {
    padding: var(--pep-space-7) 0 var(--pep-section-y);
}

.sfsc-pep-page .pep-compliance-card {
    background: var(--pep-danger-bg);
    border: var(--pep-border-w-medium) solid var(--pep-danger-border);
    border-radius: var(--pep-radius-2xl);
    padding: var(--pep-card-pad-lg);
}

.sfsc-pep-page .pep-compliance-heading {
    font-family: var(--pep-font-display);
    font-size: var(--pep-text-base);
    font-weight: var(--pep-weight-bold);
    color: var(--pep-danger-strong);
    text-transform: uppercase;
    letter-spacing: var(--pep-tracking-wide);
    line-height: 1;
    margin: 0 0 var(--pep-space-4);
    display: inline-flex;
    align-items: center;
    gap: var(--pep-space-2);
}
.sfsc-pep-page .pep-compliance-heading svg {
    color: var(--pep-danger-strong);
    flex-shrink: 0;
}

.sfsc-pep-page .pep-compliance-body {
    color: var(--pep-danger-text);
    line-height: var(--pep-leading-relaxed);
}
.sfsc-pep-page .pep-compliance-body p {
    margin: 0 0 var(--pep-space-3);
    font-size: var(--pep-text-base);
}
.sfsc-pep-page .pep-compliance-body p:last-child {
    margin-bottom: 0;
}
.sfsc-pep-page .pep-compliance-body strong {
    color: var(--pep-danger-strong);
    font-weight: var(--pep-weight-semibold);
}


/* ═══════════════════════════════════════════════════════════════════
   17. CTA GRADIENT BAND (Task 11) — full-bleed pastel gradient,
   centered headline + black "Shop Now" pill. Gradient values from
   --pep-cta-band-* tokens (DESIGN_TOKENS.css flags these as estimated;
   visual pass may require tuning). Decorative vial photos visible in
   the Amino reference are intentionally skipped — see DESIGN_BRIEF
   intentional divergence #6.
   ═══════════════════════════════════════════════════════════════════ */
.sfsc-pep-page .pep-cta-band {
    background: linear-gradient(
        var(--pep-cta-band-angle),
        var(--pep-cta-band-from),
        var(--pep-cta-band-to)
    );
    padding: clamp(48px, 6vw, 80px) 0 clamp(100px, 12vw, 160px);   /* bottom bumped to absorb email-card overlap (divergence #7) — Task 16 round 5 dialed up overlap from 28-40 to 40-64 */
}

.sfsc-pep-page .pep-cta-band-inner {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--pep-container-pad);
    text-align: center;
}

.sfsc-pep-page .pep-cta-band-title {
    font-family: var(--pep-font-display);
    font-size: clamp(24px, 3.5vw, 36px);
    font-weight: var(--pep-weight-semibold);
    color: var(--pep-text);
    line-height: 1.25;
    letter-spacing: -0.015em;
    margin: 0 0 var(--pep-space-6);
}

.sfsc-pep-page .pep-cta-band-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--pep-space-2);
    background: var(--pep-text);
    color: var(--pep-text-inverse);
    padding: 14px 28px;
    border-radius: var(--pep-radius-pill);
    font-family: inherit;
    font-size: var(--pep-text-base);
    font-weight: var(--pep-weight-medium);
    line-height: 1;
    text-decoration: none;
    transition:
        background var(--pep-duration-fast) var(--pep-ease-default),
        transform var(--pep-duration-fast) var(--pep-ease-default);
}
.sfsc-pep-page .pep-cta-band-btn:hover {
    background: #27272a;
    transform: translateY(-1px);
}
.sfsc-pep-page .pep-cta-band-btn svg {
    flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════════
   18. EMAIL SIGNUP (Task 12) — single full-width card, lavender
   surface (matches Amino reference; v1's white misread the screenshot).
   Stacks on mobile, splits text-left / form-right at ≥1024px. Stub
   form: onsubmit toggles .is-submitted, CSS swaps form-shell for
   success message. No network call.

   Decorative NAD+ vial bleed-in present in reference is skipped —
   see DESIGN_BRIEF intentional divergence #6.
   ═══════════════════════════════════════════════════════════════════ */
.sfsc-pep-page .pep-email {
    padding: var(--pep-space-7) 0 var(--pep-section-y);
    /* Pull the lavender card up into the CTA gradient band's bottom
       edge for a layered transition (Task 16 round 3, reverses Task 12
       decision D). Clamp scales overlap from ~28px on mobile to ~40px
       on desktop — visible without reading as broken. position +
       z-index ensures the card sits above the gradient where they
       intersect. CTA band's padding-bottom is bumped to absorb the
       overlap visually. See DESIGN_BRIEF intentional divergence #7. */
    margin-top: clamp(-64px, -5vw, -40px);
    position: relative;
    z-index: 1;
}

.sfsc-pep-page .pep-email-card {
    background: #ece4f5;   /* lavender — color-picked from reference */
    border-radius: var(--pep-radius-2xl);
    padding: var(--pep-card-pad-lg);
    display: flex;
    flex-direction: column;
    gap: var(--pep-space-5);
}
@media (min-width: 1024px) {
    .sfsc-pep-page .pep-email-card {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--pep-space-7);
    }
}

.sfsc-pep-page .pep-email-text {
    flex: 1;
    min-width: 0;
}

.sfsc-pep-page .pep-email-title {
    font-family: var(--pep-font-display);
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: var(--pep-weight-semibold);
    color: var(--pep-text);
    margin: 0 0 var(--pep-space-2);
    line-height: 1.25;
    letter-spacing: -0.005em;
}

.sfsc-pep-page .pep-email-sub {
    font-size: var(--pep-text-base);
    color: var(--pep-text-muted);
    line-height: 1.5;
    margin: 0 0 var(--pep-space-3);
}

.sfsc-pep-page .pep-email-fine {
    font-size: var(--pep-text-sm);
    color: var(--pep-danger-text);
    margin: 0;
    line-height: 1.4;
}

.sfsc-pep-page .pep-email-form {
    flex-shrink: 0;
    width: 100%;
    margin: 0;
}
@media (min-width: 1024px) {
    .sfsc-pep-page .pep-email-form {
        width: auto;
        min-width: 380px;
    }
}

.sfsc-pep-page .pep-email-form-shell {
    display: flex;
    align-items: center;
    background: var(--pep-surface);
    padding: 4px 4px 4px 20px;
    border-radius: var(--pep-radius-pill);
}

.sfsc-pep-page .pep-email-form input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    padding: 12px 0;
    font-family: inherit;
    font-size: var(--pep-text-base);
    color: var(--pep-text);
}
.sfsc-pep-page .pep-email-form input::placeholder {
    color: var(--pep-text-faint);
}

.sfsc-pep-page .pep-email-form button {
    flex-shrink: 0;
    background: var(--pep-text);
    color: var(--pep-text-inverse);
    border: none;
    padding: 12px 24px;       /* 44+ min touch target (Task 16, was 10/24) */
    border-radius: var(--pep-radius-pill);
    font-family: inherit;
    font-size: var(--pep-text-base);
    font-weight: var(--pep-weight-medium);
    line-height: 1;
    cursor: pointer;
    transition: background var(--pep-duration-fast) var(--pep-ease-default);
}
.sfsc-pep-page .pep-email-form button:hover {
    background: #27272a;
}

/* Stub success state — submit toggles .is-submitted, swap views */
.sfsc-pep-page .pep-email-success {
    display: none;
    margin: 0;
    font-size: var(--pep-text-base);
    color: var(--pep-accent);
    font-weight: var(--pep-weight-medium);
}
.sfsc-pep-page .pep-email-form.is-submitted .pep-email-form-shell {
    display: none;
}
.sfsc-pep-page .pep-email-form.is-submitted .pep-email-success {
    display: block;
}

/* Stack form vertically at narrow widths — at 320px viewport the
   inline pill compressed the email field below ~95px usable width
   (Task 16 stress test). Threshold 480px gives breathing room above
   small-phone landscape (~414×736) and modern mobile portrait widths. */
@media (max-width: 480px) {
    .sfsc-pep-page .pep-email-form-shell {
        flex-direction: column;
        align-items: stretch;
        gap: var(--pep-space-2);
        padding: var(--pep-space-2);
        border-radius: var(--pep-radius-lg);
    }
    .sfsc-pep-page .pep-email-form input {
        padding: 12px 16px;
        min-height: 44px;
    }
    .sfsc-pep-page .pep-email-form button {
        width: 100%;
        min-height: 44px;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   19. TOAST (Task 14) — single fixed-position notification injected
   by JS on first AJAX response. Slides in from right (desktop) or
   bottom (mobile); auto-dismisses after 3s. JS toggles .is-visible
   to show; .is-error swaps the left-border tint to red.

   Force-reflow trick lives in the JS (offsetHeight read between class
   strip + add); CSS just declares the two states. White card with
   colored left-border accent — restrained, fits the page's airy tone.
   ═══════════════════════════════════════════════════════════════════ */
.sfsc-pep-page .sfsc-pep-toast {
    position: fixed;
    z-index: var(--pep-z-toast);
    bottom: var(--pep-space-5);
    right: var(--pep-space-5);
    max-width: 360px;
    padding: var(--pep-space-4) var(--pep-space-5);
    background: var(--pep-surface);
    color: var(--pep-text);
    border: var(--pep-border-w-thin) solid var(--pep-border);
    border-left: 4px solid var(--pep-accent);
    border-radius: var(--pep-radius-md);
    box-shadow: var(--pep-shadow-toast);
    font-size: var(--pep-text-base);
    font-weight: var(--pep-weight-medium);

    /* Hidden state */
    opacity: 0;
    transform: translateX(120%);
    pointer-events: none;
    transition:
        opacity var(--pep-duration-normal) var(--pep-ease-default),
        transform var(--pep-duration-normal) var(--pep-ease-spring);
}
.sfsc-pep-page .sfsc-pep-toast.is-visible {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}
.sfsc-pep-page .sfsc-pep-toast.is-error {
    border-left-color: var(--pep-danger-strong);
}

/* Mobile — full-width minus gutters, slides up from bottom */
@media (max-width: 640px) {
    .sfsc-pep-page .sfsc-pep-toast {
        left: var(--pep-space-4);
        right: var(--pep-space-4);
        bottom: var(--pep-space-4);
        max-width: none;
        transform: translateY(120%);
    }
    .sfsc-pep-page .sfsc-pep-toast.is-visible {
        transform: translateY(0);
    }
}

/* Reduced motion — drop the transform, keep opacity fade only */
@media (prefers-reduced-motion: reduce) {
    .sfsc-pep-page .sfsc-pep-toast {
        transform: none;
        transition: opacity var(--pep-duration-fast) var(--pep-ease-default);
    }
    .sfsc-pep-page .sfsc-pep-toast.is-visible {
        transform: none;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   20. SMOOTH-SCROLL + ANCHOR OFFSET (Task 15) — smooth-scroll for
   in-page anchor links (e.g. hero "View CoA" → #pep-coa). Wrapped in
   prefers-reduced-motion: no-preference so accessibility-conscious
   users get instant jumps.

   scroll-margin-top compensates for the sticky site header (72px
   mobile / 80px desktop after the portrait-logo round bumped header
   heights) so the section title isn't hidden under the header after
   scroll. Applied broadly to any anchored section so future anchors
   (compound, sources, etc.) just-work without CSS additions.

   Note: scroll-behavior on `html` is scoped to peptide pages only by
   virtue of this CSS file's enqueue (peptide-routing.php).
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

.sfsc-pep-page section[id] {
    scroll-margin-top: 88px;
}

/* Sticky header offset — Astra's site header is position:sticky
   72px (mobile) / 80px (desktop). scroll-padding-top reserves 88px
   at the top of the viewport (8px buffer above the header) for any
   scroll-into-view operation (anchor jumps, browser scroll restoration,
   focus-into-view, iOS Safari address-bar quirks). Applies regardless
   of reduced-motion preference, so it lives outside the prefers-
   reduced-motion block above. Complements section[id] scroll-margin-top. */
html {
    scroll-padding-top: 88px;
}


/* Mobile-specific — small viewports get compressed buy-row spacing
   and a wider, full-width price line. */
@media (max-width: 640px) {
    .sfsc-pep-page .pep-buy-label { width: 64px; }
    .sfsc-pep-page .pep-buy-price { width: 100%; text-align: right; }
    .sfsc-pep-page .pep-cta-row { margin-top: var(--pep-space-3); }   /* 12px — Task 16 round 4: was 24px, tightens gap below right-aligned price on its own row */
    .sfsc-pep-page .pep-trust-mini-item span { font-size: 12px; }   /* Task 16: 10 was below readable floor */
}
