/**
 * StrikePoint — Product page batch panel + compact strip
 *
 * Tokens mirror /coa/, /ambassadors/ and the /verify page so every surface
 * that reports lab data reads as one system. Flat fills, square corners,
 * no gradients.
 */

.spbp {
    --spbp-dark:        #1a2218;
    --spbp-gold:        #8a6e2a;
    --spbp-gold-muted:  rgba(138, 110, 42, 0.08);
    --spbp-gold-border: rgba(138, 110, 42, 0.25);
    --spbp-offwhite:    #f0ebe0;
    --spbp-surface:     #f4f3f0;
    --spbp-text:        #1a1a14;
    --spbp-text-mid:    #4a5244;
    --spbp-text-light:  #7a8474;
    --spbp-border:      rgba(0, 0, 0, 0.09);
    --spbp-pass:        #2d6e3a;
    --spbp-pass-bg:     rgba(45, 110, 58, 0.08);
    --spbp-pass-border: rgba(45, 110, 58, 0.25);

    --spbp-display: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
    --spbp-body:    'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --spbp-mono:    'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Monaco, monospace;

    box-sizing: border-box;
    margin: 0 0 1.5rem;
    border: 1px solid var(--spbp-border);
    background: #fff;
    overflow: hidden;
    color: var(--spbp-text);
    font-family: var(--spbp-body);

    /* Adapt to the container, not the viewport — the panel may sit full-width
       below the summary or inside a narrower column depending on placement. */
    container-type: inline-size;
    container-name: spbp;
}

.spbp *,
.spbp *::before,
.spbp *::after { box-sizing: border-box; }

/* Panel is a scroll target for the strip link — never show a focus ring on
   the section itself, only on real controls. */
.spbp:focus { outline: none; }

/* ============================================================
   HEADER STRIP
   Dark band, matching the result card on /verify.
   ============================================================ */
.spbp-head {
    background: var(--spbp-dark);
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1.125rem;
}

.spbp-eyebrow {
    font-family: var(--spbp-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #c7b37a;
    white-space: nowrap;
}

.spbp-badge {
    margin-left: auto;
    padding: 4px 11px;
    border: 1px solid rgba(111, 174, 122, 0.3);
    background: rgba(45, 110, 58, 0.18);
    color: #6fae7a;
    font-family: var(--spbp-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ============================================================
   HISTORY PILLS
   ============================================================ */
.spbp-history {
    display: flex;
    align-items: center;
    gap: 0.5625rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.spbp-history::-webkit-scrollbar { display: none; }

.spbp-history-label {
    flex-shrink: 0;
    white-space: nowrap;
    font-family: var(--spbp-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #7a9e76;
    white-space: nowrap;
}

.spbp-pills {
    display: flex;
    gap: 0.375rem;
}

.spbp-pill {
    padding: 5px 12px;
    border: 1px solid rgba(199, 179, 122, 0.3);
    border-radius: 0;
    background: transparent;
    color: #c7d4c4;
    font-family: var(--spbp-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.spbp-pill:hover,
.spbp-pill:focus-visible {
    border-color: rgba(199, 179, 122, 0.75);
    color: #c7b37a;
}

.spbp-pill:focus-visible {
    outline: 2px solid #c7b37a;
    outline-offset: 2px;
}

.spbp-pill[aria-pressed="true"] {
    background: #c7b37a;
    border-color: #c7b37a;
    color: #111;
}

/* ============================================================
   BODY — data left, document right

   The certificate gets its own column at reading size rather than
   a crop in the corner. "COAs published as issued, unedited" is
   the claim; a 92px sliver of letterhead doesn't support it.
   ============================================================ */
.spbp-body {
    padding: 1.75rem 1.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 2.5rem;
    align-items: start;
}

.spbp-data { min-width: 0; }

/* ============================================================
   PURITY + SPEC BAR
   ============================================================ */
.spbp-purity-zone { min-width: 0; }

.spbp-purity-label {
    display: block;
    margin-bottom: 3px;
    font-family: var(--spbp-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--spbp-text-light);
}

.spbp-purity {
    display: block;
    font-family: var(--spbp-display);
    font-size: 46px;
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.8px;
    color: var(--spbp-pass);
}

.spbp-spec { margin-top: 0.875rem; max-width: 420px; }

.spbp-spec-track {
    height: 6px;
    background: var(--spbp-surface);
    border: 1px solid var(--spbp-border);
    overflow: hidden;
}

/* Static readout — deliberately not animated. */
.spbp-spec-fill {
    height: 100%;
    background: var(--spbp-pass);
}

.spbp-spec-ends {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    font-family: var(--spbp-mono);
    font-size: 10px;
    color: var(--spbp-text-light);
}

.spbp-spec-caption {
    margin: 0.5rem 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--spbp-text-mid);
}

.spbp-spec-caption b {
    font-weight: 600;
    color: var(--spbp-text);
}

/* ============================================================
   DATA CELLS
   Monospace values — these are recorded measurements, not copy.
   ============================================================ */
.spbp-cells {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 2rem;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--spbp-border);
}

.spbp-cell { margin: 0; min-width: 0; }

.spbp-cell dt {
    margin: 0 0 4px;
    font-family: var(--spbp-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--spbp-text-light);
}

.spbp-cell dd {
    margin: 0;
    font-family: var(--spbp-mono);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--spbp-text-mid);
    word-break: break-word;
}

/* ============================================================
   THE DOCUMENT
   ============================================================ */
.spbp-doc {
    margin: 0;
    min-width: 0;
}

.spbp-doc-btn {
    display: block;
    position: relative;
    width: 100%;
    padding: 0;
    border: 1px solid var(--spbp-border);
    border-radius: 0;
    background: #fff;
    cursor: zoom-in;
    overflow: hidden;
    font-family: inherit;
    transition: border-color 0.15s ease;
}

.spbp-doc-btn:hover,
.spbp-doc-btn:focus-visible { border-color: var(--spbp-gold-border); }

.spbp-doc-btn:focus-visible {
    outline: 2px solid var(--spbp-gold);
    outline-offset: 2px;
}

/* The whole page, uncropped. Portrait certificates are tall; cap the
   height so an unusually long document can't run away with the layout,
   and anchor to the top so the letterhead is always the part in view. */
.spbp-doc-btn img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: cover;
    object-position: top;
}

.spbp-doc-zoom {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 6px 12px;
    background: rgba(26, 34, 24, 0.92);
    color: #f0ebe0;
    font-family: var(--spbp-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.spbp-doc-btn:hover .spbp-doc-zoom,
.spbp-doc-btn:focus-visible .spbp-doc-zoom { opacity: 1; }

/* Touch devices have no hover, so the affordance has to be permanent. */
@media (hover: none) {
    .spbp-doc-zoom { opacity: 1; }
}

/* PDFs have no raster derivative — offer the file instead of a dead frame. */
.spbp-doc-pdf {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 220px;
    padding: 2rem 1.5rem;
    border: 1px dashed var(--spbp-border);
    background: var(--spbp-surface);
    color: var(--spbp-text-mid);
    font-family: var(--spbp-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.spbp-doc-pdf svg { width: 32px; height: 32px; }

.spbp-doc-pdf:hover,
.spbp-doc-pdf:focus-visible {
    border-color: var(--spbp-gold-border);
    color: var(--spbp-gold);
}

.spbp-doc-cap {
    margin: 0.625rem 0 0;
    font-size: 11px;
    line-height: 1.5;
    color: var(--spbp-text-light);
}

/* ============================================================
   PERMALINK
   ============================================================ */
.spbp-permalink {
    margin: 1.5rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--spbp-border);
}

.spbp-permalink a {
    font-family: var(--spbp-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--spbp-gold);
    text-decoration: none;
    border-bottom: 1px solid var(--spbp-gold-border);
    transition: color 0.15s ease, border-color 0.15s ease;
}

.spbp-permalink a:hover,
.spbp-permalink a:focus-visible {
    color: #5a4818;
    border-bottom-color: var(--spbp-gold);
}

/* ============================================================
   NARROW CONTAINERS
   Container queries so the panel responds to its own column
   rather than the viewport — correct wherever it's placed.
   ============================================================ */

/* Not enough room for two columns: document moves below the data. */
@container spbp (max-width: 860px) {
    .spbp-body {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.75rem;
        padding: 1.5rem 1.25rem;
    }
    .spbp-purity { font-size: 38px; }
    .spbp-doc-btn img { max-height: 460px; }
    /* Centre the document once it has the full width to itself. */
    .spbp-doc { max-width: 440px; }
}

/* Header strip wraps before the pills would be squeezed. Reorder so the
   eyebrow and badge share row one and the pills take row two — otherwise
   the badge wraps alone and burns a whole line. */
@container spbp (max-width: 620px) {
    .spbp-head {
        flex-wrap: wrap;
        gap: 0.625rem 1.125rem;
    }
    .spbp-eyebrow { order: 1; }
    .spbp-badge   { order: 2; margin-left: auto; }
    .spbp-history { order: 3; width: 100%; }
}

@container spbp (max-width: 420px) {
    .spbp-cells { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .spbp-purity { font-size: 34px; }
    .spbp-doc-btn img { max-height: 380px; }
}

/* ============================================================
   FALLBACK for browsers without container query support.
   ============================================================ */
@supports not (container-type: inline-size) {
    @media (max-width: 900px) {
        .spbp-body {
            grid-template-columns: minmax(0, 1fr);
            gap: 1.75rem;
            padding: 1.5rem 1.25rem;
        }
        .spbp-purity { font-size: 38px; }
        .spbp-doc { max-width: 440px; }
        .spbp-doc-btn img { max-height: 460px; }
        .spbp-head { flex-wrap: wrap; gap: 0.625rem 1.125rem; }
        .spbp-eyebrow { order: 1; }
        .spbp-badge   { order: 2; margin-left: auto; }
        .spbp-history { order: 3; width: 100%; }
    }
    @media (max-width: 480px) {
        .spbp-cells { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
        .spbp-purity { font-size: 34px; }
    }
}

@media (prefers-reduced-motion: reduce) {
    .spbp * { transition: none !important; }
}

/* ============================================================
   COMPACT STRIP — [sp_batch_strip]

   Two parts only: what it is on the left, the number on the
   right. Batch and test date deliberately absent — they live on
   the panel and the certificate page. Before a purchase the
   buyer wants one figure and a way to check it; batch and date
   matter once a vial is in hand.

   The border is what lets purity run larger than the price
   without competing with it: a bounded object reads as evidence
   attached to the product, not as a second headline.
   ============================================================ */
.spbs {
    --spbs-gold:       #8a6e2a;
    --spbs-gold-muted: rgba(138, 110, 42, 0.06);
    --spbs-text-light: #7a8474;
    --spbs-border:     rgba(0, 0, 0, 0.09);
    --spbs-pass:       #2d6e3a;
    --spbs-display:    'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;

    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    margin: 1.125rem 0 0;
    padding: 0.9375rem 1.25rem;
    border: 1px solid var(--spbs-border);
    border-left: 3px solid var(--spbs-gold);
    background: var(--spbs-gold-muted);
    font-family: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

.spbs *,
.spbs *::before,
.spbs *::after { box-sizing: border-box; }

.spbs-left {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.spbs-eyebrow {
    font-family: var(--spbs-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--spbs-gold);
}

.spbs-link {
    font-family: var(--spbs-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #1a2218;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 1px solid rgba(0, 0, 0, 0.18);
    align-self: flex-start;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.spbs-link:hover,
.spbs-link:focus-visible {
    color: var(--spbs-gold);
    border-bottom-color: var(--spbs-gold);
}

.spbs-link:focus-visible {
    outline: 2px solid var(--spbs-gold);
    outline-offset: 3px;
}

.spbs-right {
    flex-shrink: 0;
    text-align: right;
}

.spbs-key {
    display: block;
    font-family: var(--spbs-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--spbs-text-light);
    margin-bottom: 1px;
}

.spbs-purity {
    display: block;
    font-family: var(--spbs-display);
    font-size: 38px;
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.8px;
    color: var(--spbs-pass);
}

@media (max-width: 480px) {
    .spbs { padding: 0.875rem 1rem; gap: 1rem; }
    .spbs-purity { font-size: 32px; }
    .spbs-link { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .spbs * { transition: none !important; }
}

/* Verification mark. Same shield-and-check used on the /verify hero and the
   certificate badge — one mark across every surface that makes this claim is
   worth more than a prettier mark used once. */
.spbs-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.spbs-mark {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    /* Optical alignment: the shield's visual mass sits high against
       uppercase condensed type. */
    margin-top: -1px;
}