/*
 | Public supplement storefront: shared primitives + cart, checkout and confirmation.
 |
 | WHY THIS FILE EXISTS. .vp-shell, .vp-token, .vp-gap* and .vp-cta were authored inside
 | resources/views/vitamins/show.blade.php's inline <style>. I reused those class names on the index
 | on 08-12 and shipped a page whose comparison band and CTAs rendered as unstyled stacked text,
 | because the rules were never shared. Duplicating them a third time for cart and checkout would
 | guarantee drift, so the primitives live here and every view that needs them links this file.
 |
 | show.blade.php still carries its own inline copy. Values here are byte-identical to it, so the two
 | cannot look different; deleting its copy means editing a file another terminal was committing to
 | the same day, and that consolidation is left for a pass that owns both.
 |
 | Brand: light ground, copper/gold accents, Fraunces display, per DESIGN.md. Gold text on light
 | grounds uses #8c6f2a (the deep gold), never #C3691F, which measures 3.45:1 on cream and fails AA.
 */

/* ---------- primitives (identical to vitamins/show.blade.php) ---------- */
.vp-shell {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 max(20px, 4vw);
}
.vp-token {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.82em;
    letter-spacing: 0.04em;
    border: 1.5px dashed rgba(122, 95, 34, 0.5);
    border-radius: 6px;
    padding: 0 6px;
    color: #8c6f2a;
    white-space: nowrap;
}
.vp-token--dark {
    border-color: rgba(230, 203, 132, 0.5);
    color: #e6cb84;
}
.vp-gap {
    background: linear-gradient(160deg, #191713, #221c12);
    color: #f5f1e6;
    padding: clamp(2.2rem, 5vw, 3.6rem) 0;
    margin: clamp(1rem, 2vw, 1.5rem) 0;
}
.vp-gap__kicker {
    font-family: "IBM Plex Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #e6cb84;
    margin: 0;
}
.vp-gap__title {
    font-family:
        "Helvetica Neue", "Helvetica Neue LT Std", Helvetica, Arial, sans-serif;
    font-weight: 600;
    font-size: clamp(24px, 3vw, 36px);
    margin: 0.4rem 0 1.4rem;
}
.vp-gap__title em {
    color: #e6cb84;
    font-style: italic;
}
/* 08-14: minmax(0,1fr) in both, not 1fr. Fourth instance of this defect in the codebase (.plans, the
   plan grid, the footer newsletter, here) and this one is mine. A 1fr track's automatic minimum is
   min-content, so the 26px price line plus 36px of cell padding held a 311.3px track inside 280px of
   available width at 320px, putting /shop at scrollWidth 331: the last 11px of document overflow. */
.vp-gap__pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    max-width: 640px;
}
@media (max-width: 620px) {
    .vp-gap__pair {
        grid-template-columns: minmax(0, 1fr);
    }
}
.vp-gap__cell {
    border: 1px solid rgba(230, 203, 132, 0.2);
    border-radius: 14px;
    padding: 16px 18px;
}
.vp-gap__cell--m {
    background: rgba(230, 203, 132, 0.1);
    border-color: rgba(230, 203, 132, 0.45);
}
.vp-gap__label {
    font-family: "IBM Plex Mono", monospace;
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(245, 241, 230, 0.6);
    margin: 0;
}
.vp-gap__price {
    font-family:
        "Helvetica Neue", "Helvetica Neue LT Std", Helvetica, Arial, sans-serif;
    font-size: 26px;
    margin: 0.35rem 0;
}
.vp-gap__sub {
    font-size: 12.5px;
    color: rgba(245, 241, 230, 0.65);
    margin: 0;
}
.vp-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 26px;
    margin-top: 1.4rem;
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    background: linear-gradient(180deg, #e6cb84, #cfa94e);
    color: #2a1e08;
    box-shadow: 0 6px 16px rgba(196, 149, 48, 0.35);
}
.vp-cta[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}
.vp-gap__foot {
    font-size: 11px;
    color: rgba(245, 241, 230, 0.45);
    margin-top: 1.2rem;
    max-width: 52ch;
}
/* 08-17: names the product the two figures belong to. "Same bottle. Two prices." needs one
   bottle, and the figures were literal placeholder tokens until they were wired to the catalog. */
.vp-gap__eg{margin:1rem auto 0;max-width:46ch;font-family:var(--vx-mono,ui-monospace,monospace);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--vx-mute,#5B5750);opacity:.85}

/* ---------- storefront brand tokens ----------
   Declared here rather than inherited: shop.css loads on pages whose layouts do not all define the
   brand custom properties, so relying on them would silently fall back. Values are OT's canonical
   ones lifted from home-redesign.blade.php, not approximations. */
.vp,
.sc-wrap,
.vx-card,
.sc-panel {
    --ot-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --ot-mono: "IBM Plex Mono", ui-monospace, monospace;
    --ot-ink: #1b1a1a;
    --ot-grad-gold: linear-gradient(180deg, #e6cb84 0%, #cfa94e 100%);
    --ot-gold-deep: #7a5f22;
    --ot-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Add to cart ----------
   Rebuilt 2026-08-12. Clement: "the design looks plain and pathetic." He was right, and the cause
   was a category error: this was an 11px UPPERCASE MONO chip with .14em tracking, which is OT's
   LABEL idiom (eyebrows, counts, meta). Primary actions on this brand are Helvetica Neue 600 at
   15px, sentence case, gold-gradient pill, 2px hover lift. Dressing a button in the label treatment
   is what made it read as an afterthought beside the real CTAs.

   Now matched to .btn / .btn--gold in home-redesign.blade.php: same face, weight, size, radius,
   gradient, ink, shadow and easing, so the shop's buttons and the site's buttons are one system.
   Full width inside a card is the one deliberate difference: at 390px a hugging button beside a
   price wraps, and a card's primary action reads better as a full-width base. */
.sc-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: auto;
    min-height: 48px;
    margin-top: 14px;
    padding: 0.95rem 1.5rem;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font-family: var(--ot-sans);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.01em;
    white-space: nowrap;
    background: var(--ot-grad-gold);
    color: var(--ot-ink);
    box-shadow: 0 4px 12px rgba(184, 151, 63, 0.16); /* a notch quieter, gradient untouched (R6 brief critic) */
    transition:
        transform 0.3s var(--ot-ease),
        box-shadow 0.3s var(--ot-ease),
        filter 0.3s;
    will-change: transform;
}
.sc-add:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(184, 151, 63, 0.34);
    filter: brightness(1.03);
}
.sc-add:active {
    transform: translateY(0);
}
.sc-add:focus-visible {
    outline: 2px solid var(--ot-gold-deep);
    outline-offset: 3px;
}
.sc-add svg {
    width: 15px;
    height: 15px;
}
/* Disabled: flatten it, do not fade it. A translucent gold pill still looks pressable, which is the
   whole problem with greyed-out gold; a flat sand one does not. The reason prints in .sc-why. */
.sc-add[disabled] {
    background: #efe9dc;
    color: #9a8f7d;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
    filter: none;
}
/* Momentary confirmation, kept inside the warm palette. No cold green: DESIGN.md is warm-only and a
   green pill in a row of gold reads as a different product. The label returns to "Add to cart" after
   1.4s, so the control never misstates itself the way the old shop's permanent "Added to order" did. */
.sc-add.is-added {
    background: linear-gradient(180deg, #f0e4c2 0%, #e0c98f 100%);
    color: #4a3a12;
    box-shadow: none;
    transform: none;
}
.sc-why {
    margin-top: 9px;
    font-family: var(--ot-sans);
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ot-gold-deep);
}

@media (prefers-reduced-motion: reduce) {
    .sc-add {
        transition: none;
    }
    .sc-add:hover {
        transform: none;
    }
}

/* ---------- cart count badge in the nav ---------- */
.sc-badge {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 6px;
    border-radius: 999px;
    background: #cfa94e;
    color: #2a1e08;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

/* ---------- cart + checkout shell ---------- */
.sc-wrap {
    padding: 52px 0 76px;
}
.sc-h1 {
    font-family:
        "Helvetica Neue", "Helvetica Neue LT Std", Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-size: clamp(30px, 4.4vw, 48px);
    letter-spacing: -0.02em;
    margin: 0;
}
.sc-h1 em {
    font-style: italic;
    color: #8c6f2a;
}
.sc-kicker {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #8c6f2a;
    margin: 0 0 10px;
}
.sc-cols {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
    gap: 34px;
    margin-top: 30px;
    align-items: start;
}
@media (max-width: 900px) {
    .sc-cols {
        grid-template-columns: 1fr;
        gap: 26px;
    }
}

/* ---------- line items ---------- */
.sc-lines {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid #ece5d7;
}
.sc-line {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) auto;
    gap: 15px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #ece5d7;
}
@media (max-width: 520px) {
    /* The price/qty column drops beneath the name instead of squeezing it to two words. */
    .sc-line {
        grid-template-columns: 60px minmax(0, 1fr);
        row-gap: 12px;
    }
    .sc-line__end {
        grid-column: 1/-1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
    }
}
.sc-line__media {
    width: 74px;
    height: 74px;
    border-radius: 12px;
    border: 1px solid #ece5d7;
    background: linear-gradient(170deg, #f8f4ea, #f1eadb);
    display: grid;
    place-items: center;
    overflow: hidden;
}
@media (max-width: 520px) {
    .sc-line__media {
        width: 60px;
        height: 60px;
    }
}
.sc-line__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 7px;
    box-sizing: border-box;
}
.sc-line__seal {
    width: 56%;
    height: auto;
    opacity: 0.85;
}
.sc-line__name {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}
.sc-line__name a {
    color: inherit;
    text-decoration: none;
}
.sc-line__name a:hover {
    color: #8c6f2a;
}
.sc-line__form {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #9a8f7d;
    margin-top: 5px;
}
.sc-line__each {
    font-size: 12.5px;
    color: #5c5346;
    margin-top: 5px;
}
.sc-line__end {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 9px;
}
.sc-line__total {
    font-family:
        "Helvetica Neue", "Helvetica Neue LT Std", Helvetica, Arial, sans-serif;
    font-size: 19px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.sc-line__none {
    font-size: 12.5px;
    color: #8c6f2a;
    max-width: 22ch;
    text-align: right;
}

/* Quantity stepper. Real buttons, not a select: 44px targets on a phone. */
.sc-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid #ded6c6;
    border-radius: 999px;
    overflow: hidden;
    background: #fffdf9;
}
.sc-qty button {
    width: 38px;
    height: 38px;
    border: 0;
    background: none;
    cursor: pointer;
    font-size: 17px;
    line-height: 1;
    color: #191713;
}
.sc-qty button:hover {
    background: rgba(199, 162, 78, 0.12);
    color: #8c6f2a;
}
.sc-qty button:focus-visible {
    outline: 2px solid #8c6f2a;
    outline-offset: -2px;
}
.sc-qty button[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
}
.sc-qty__n {
    min-width: 30px;
    text-align: center;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.sc-drop {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #9a8f7d;
    border-bottom: 1px solid rgba(154, 143, 125, 0.4);
}
.sc-drop:hover {
    color: #b3261e;
    border-bottom-color: rgba(179, 38, 30, 0.5);
}

/* ---------- summary panel ---------- */
.sc-panel {
    border: 1px solid #e6e0d4;
    border-radius: 18px;
    background: #fffdf9;
    padding: 22px;
}
.sc-panel__h {
    font-family:
        "Helvetica Neue", "Helvetica Neue LT Std", Helvetica, Arial, sans-serif;
    font-size: 21px;
    font-weight: 600;
    margin: 0 0 14px;
}
.sc-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    font-size: 14.5px;
    padding: 7px 0;
    color: #5c5346;
}
.sc-row b {
    color: #191713;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.sc-row--total {
    border-top: 1px solid #ece5d7;
    margin-top: 8px;
    padding-top: 13px;
    font-size: 16px;
}
.sc-row--total b {
    font-family:
        "Helvetica Neue", "Helvetica Neue LT Std", Helvetica, Arial, sans-serif;
    font-size: 23px;
}
.sc-note {
    font-size: 12.5px;
    line-height: 1.55;
    color: #9a8f7d;
    margin-top: 12px;
}

/* A blocker is stated, never implied by a greyed button on its own. */
.sc-block {
    margin-top: 14px;
    padding: 13px 15px;
    border: 1px solid rgba(179, 38, 30, 0.28);
    border-radius: 14px;
    background: rgba(179, 38, 30, 0.05);
}
.sc-block p {
    font-size: 13.5px;
    line-height: 1.5;
    color: #8a2b23;
    margin: 0;
}
.sc-block p + p {
    margin-top: 6px;
}
.sc-info {
    margin-top: 14px;
    padding: 13px 15px;
    border: 1px solid rgba(199, 162, 78, 0.4);
    border-radius: 14px;
    background: rgba(199, 162, 78, 0.07);
}
.sc-info p {
    font-size: 13.5px;
    line-height: 1.5;
    color: #5c5346;
    margin: 0;
}
.sc-info__chip {
    display: inline-block;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #8c6f2a;
    border: 1px solid rgba(199, 162, 78, 0.45);
    border-radius: 999px;
    padding: 3px 9px;
    background: rgba(199, 162, 78, 0.1);
    margin-bottom: 8px;
}

/* Progress toward the $50 floor. Shows the gap as a number, since "minimum not met" without the
   remaining amount makes the customer do the arithmetic. */
.sc-min {
    margin-top: 14px;
}
.sc-min__bar {
    height: 6px;
    border-radius: 999px;
    background: #ece5d7;
    overflow: hidden;
}
.sc-min__fill {
    height: 100%;
    background: linear-gradient(90deg, #e6cb84, #cfa94e);
    transition: width 0.3s;
}
.sc-min__t {
    font-size: 12.5px;
    color: #5c5346;
    margin-top: 8px;
    line-height: 1.5;
}

/* ---------- empty ---------- */
.sc-empty {
    text-align: center;
    padding: 56px 20px;
}
.sc-empty__t {
    font-family:
        "Helvetica Neue", "Helvetica Neue LT Std", Helvetica, Arial, sans-serif;
    font-size: 26px;
    font-weight: 300;
}
.sc-empty__p {
    font-size: 15px;
    color: #5c5346;
    margin: 10px auto 0;
    max-width: 44ch;
    line-height: 1.6;
}

/* ---------- checkout form ---------- */
.sc-field {
    margin-top: 15px;
}
.sc-field label {
    display: block;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #8c6f2a;
    margin-bottom: 6px;
}
.sc-field input {
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid #ded6c6;
    border-radius: 12px;
    background: #fffdf9;
    font-size: 15.5px;
    color: #191713;
    box-sizing: border-box;
}
.sc-field input:focus {
    outline: 2px solid #8c6f2a;
    outline-offset: 1px;
    border-color: #8c6f2a;
}
.sc-field input.is-invalid {
    border-color: #b3261e;
    outline: 2px solid #b3261e;
    outline-offset: 1px;
}
/* City / state / zip on one row: state and zip are 2 and 5 characters, so giving them full-width
   fields wastes a whole line each on a phone and makes the form feel longer than it is. */
.sc-three {
    display: grid;
    grid-template-columns: 1fr 0.5fr 0.7fr;
    gap: 12px;
}
@media (max-width: 520px) {
    .sc-three {
        grid-template-columns: 1fr 0.6fr 0.8fr;
        gap: 9px;
    }
}

.sc-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 520px) {
    .sc-two {
        grid-template-columns: 1fr;
    }
}
/* Stripe Elements mount points need the same box as a real input, since Stripe renders an iframe. */
.sc-el {
    min-height: 46px;
    padding: 13px 14px;
    border: 1px solid #ded6c6;
    border-radius: 12px;
    background: #fffdf9;
}
.sc-el--focus {
    outline: 2px solid #8c6f2a;
    outline-offset: 1px;
    border-color: #8c6f2a;
}
.sc-el--invalid {
    border-color: #b3261e;
}
.sc-err {
    margin-top: 10px;
    font-size: 13.5px;
    color: #b3261e;
    line-height: 1.45;
}
/* Discount code: the field, and the two answers it can give.
   Moved out of inline styles on the blade (24 Aug) so the applied and failed states could share a
   type scale and icon size with the rest of the checkout instead of drifting.

   Colours are the project's own, not new ones. #b3261e is already the error red in this file
   (.sc-err, .sc-el--invalid) and #1c7a4e is --good from portal-assets/od.css, where it marks a
   completed step and an in-range marker.

   ⚠️ The note at the top of this file about "no cold green" is about a green PILL on the add-to-cart
   button, where it would sit in a row of gold buttons and read as a different product. It is not a
   ban on semantic state colour: DESIGN.md's warm-only rule governs NEUTRALS ("no cold grey enters
   this system"), and the portal has used --good for status since it was written. A check beside a
   confirmation message is that, not a competing button. */
/* The membership benefit, stated rather than subtracted.
   It sits OUTSIDE the figures column on purpose: rendered as a row with a minus sign it read as
   part of the arithmetic and the column stopped adding up. The subtotal above is already the
   member price. */
.sc-membernote {
    margin: 6px 0 10px;
    padding: 8px 10px;
    border-left: 2px solid #1c7a4e;
    background: rgba(28, 122, 78, 0.06);
    font-size: 12.5px;
    line-height: 1.45;
    color: #1c7a4e;
}

.sc-promo {
    margin-top: 18px;
}
.sc-promo-lab {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #565149;
    margin-bottom: 6px;
}
.sc-promo-row {
    display: flex;
    gap: 8px;
}
.sc-promo-row input {
    flex: 1;
    min-width: 0;
    font: inherit;
    /* 16px minimum: anything smaller makes iOS Safari zoom the page on focus. */
    font-size: 16px;
    padding: 10px 12px;
    border: 1px solid #d8cdb8;
    border-radius: 10px;
}
.sc-promo-row button {
    padding: 10px 18px;
}
.sc-promo-row button:disabled {
    opacity: 0.55;
    cursor: default;
}

/* The message line. Both states share it; only the icon and colour change, so a failure and a
   success cannot end up different sizes or on different baselines. */
.sc-promo-msg {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 8px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: #b3261e;
}
.sc-promo-msg svg {
    flex: none;
    width: 14px;
    height: 14px;
    /* Optical, not mathematical: 14px cap height sits slightly below a 12.5px line's centre. */
    margin-top: 1px;
}
.sc-promo-msg.is-ok {
    color: #1c7a4e;
}

/* Applied. Rendered from the session rather than from the click, so it cannot claim a discount the
   charge will not honour. Quiet on purpose: a working code is reassurance, not a celebration, and
   the money it saved is already stated in the order summary. */
.sc-promo-applied {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid rgba(28, 122, 78, 0.28);
    background: rgba(28, 122, 78, 0.07);
    border-radius: 10px;
    font-size: 13px;
    color: #1c7a4e;
}
.sc-promo-applied svg {
    flex: none;
    width: 15px;
    height: 15px;
}
.sc-promo-applied__code {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
}
.sc-promo-applied__amt {
    margin-left: auto;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.sc-promo-applied button {
    border: 0;
    background: none;
    padding: 0;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #565149;
    border-bottom: 1px solid rgba(86, 81, 73, 0.35);
    cursor: pointer;
}
.sc-promo-applied button:hover {
    color: #1c7a4e;
    border-bottom-color: rgba(28, 122, 78, 0.5);
}

/* The way back into the portal. Quiet: it is an exit, not an action competing with checkout. */
.sc-backportal {
    display: inline-block;
    margin-bottom: 14px;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8c6f2a;
    text-decoration: none;
    border-bottom: 1px solid rgba(140, 111, 42, 0.35);
}
.sc-backportal:hover {
    border-bottom-color: #8c6f2a;
}

.sc-secure {
    margin-top: 14px;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #9a8f7d;
}

/* ---------- confirmation ---------- */
.sc-done {
    text-align: center;
    padding: 60px 20px 30px;
}
.sc-done__tick {
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(28, 122, 78, 0.12);
    color: #1c7a4e;
}
.sc-done__tick svg {
    width: 26px;
    height: 26px;
}
.sc-done__t {
    font-family:
        "Helvetica Neue", "Helvetica Neue LT Std", Helvetica, Arial, sans-serif;
    font-size: clamp(26px, 3.6vw, 38px);
    font-weight: 300;
}
.sc-done__p {
    font-size: 15.5px;
    color: #5c5346;
    margin: 12px auto 0;
    max-width: 50ch;
    line-height: 1.6;
}
.sc-ref {
    display: inline-block;
    margin-top: 18px;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: 0.16em;
    color: #8c6f2a;
    border: 1px dashed rgba(122, 95, 34, 0.45);
    border-radius: 8px;
    padding: 7px 12px;
}

@media (prefers-reduced-motion: reduce) {
    .sc-min__fill {
        transition: none;
    }
}

/* ---------- Shared card idioms, lifted from the grid 2026-08-21 ----------
   The absorption checkbox and the member/non-member "per" labels were authored inside
   vitamins/index.blade.php's local <style>, so the product page could not use the section's own
   patterns without copying them. They live here now, verbatim from the grid's R5/R7 rules; the
   grid keeps its local copies (later in the cascade, identical values, no visual change there). */
.vx-per{font-family:inherit;font-size:10.5px;font-weight:400;color:#6f6a5f;margin-left:6px}
.vx-per--nm{margin-left:4px}
.vx-adv{display:inline-flex;align-items:center;gap:.5rem;margin:0;cursor:pointer;
  padding:.6rem 0 .35rem;min-height:44px}
.vx-adv:hover .vx-adv__text{color:#191713}
.vx-adv__price{color:#8C877E;font-weight:400}
.vx-adv__box{flex:0 0 auto;appearance:none;-webkit-appearance:none;width:18px;height:18px;margin:2px 0 0;
  border:1px solid #d8cdb8;border-radius:5px;background:#fff;cursor:pointer;display:grid;place-items:center}
.vx-adv__box:checked{background:linear-gradient(180deg,#E6CB84,#CFA94E);border-color:#B8973F}
.vx-adv__box:checked::after{content:"";width:9px;height:5px;border:2px solid #2a1e08;border-top:0;border-right:0;
  transform:rotate(-45deg) translateY(-1px)}
.vx-adv__box:focus-visible{outline:2px solid #b8973f;outline-offset:2px}
.vx-adv__text{flex:1 1 auto;min-width:0;font-size:11.5px;line-height:1.35;color:#5c5346;
  letter-spacing:.005em}
.vx-adv__note{display:block;margin-top:2px;font-size:11px;color:#8C877E}