:root {
    /* SR brand — Apothecary Trust palette */
    --ink:        #1a1a2e;
    --ink-soft:   #4a4a55;
    --paper:      #ffffff;
    --paper-warm: #ffffff;
    --line:       #e5d9c4;
    --line-soft:  #efe6d4;
    --red:        #8b2424;
    --red-deep:   #6b1818;
    --gold:       #c89d2a;
    --gold-soft:  #ecd9a3;
    --green:      #2f7d5b;
    --signal:     #d33;
    --shadow-sm:  0 1px 2px rgba(26,26,46,.04);
    --shadow-md:  0 6px 24px rgba(26,26,46,.08);

    /* Spacing scale — 4pt grid */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;
    --s-8: 64px;

    /* Type system */
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
    --t-display-l:  32px;
    --t-h1:         24px;
    --t-h2:         18px;
    --t-body:       15px;
    --t-body-s:     13px;
    --t-caption:    11px;

    /* Backward-compat aliases — keep so existing rules don't break. Map old → new. */
    --teal-900:   var(--red-deep);
    --teal-700:   var(--red);
    --teal-500:   var(--red);
    --teal-200:   var(--gold-soft);
    --teal-50:    var(--paper-warm);
    --yellow:     var(--gold);
    --red:        var(--red);    /* identity, alias retained */
    --gray-900:   var(--ink);
    --gray-600:   var(--ink-soft);
    --gray-300:   var(--line);
    --gray-100:   var(--paper-warm);
    --white:      var(--paper);
    --shadow:     var(--shadow-sm);
}

* { box-sizing: border-box; }
html, body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--t-body);
    line-height: 22px;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, .v5-cart-card h3, .v5-form-card h2, .footer-col h3 {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.cart-summary-label { font-family: var(--font-body); }

.container { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* Header — band constrained to column width (no full-bleed) */
.v5-header { background: transparent; color: var(--white);
             max-width: 1180px; margin: 0 auto; padding: 16px 0 0; }
.v5-header-banner { display: block; width: 100%; margin: 0; padding: 0; }
.header-banner-img { width: 100%; height: auto; display: block; border-radius: 4px; }
@media (max-width: 900px) {
    .v5-header { padding: 8px 12px 0; }
}
.reservation-bar { background: var(--gray-100); color: var(--gray-900); text-align: center;
                   padding: 8px; font-weight: 600; font-size: 14px; }

/* Desktop: 2-col grid via named areas. Mobile: flex column = source order. */
.v5-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 24px;
    padding-top: 24px;
    padding-bottom: 48px;
    align-items: start;
    max-width: 1180px;
    margin: 0 auto;
}
.v5-cart-col { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 16px; }
.v5-form-col { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 16px; }

/* Below-fold testimonial collage */
.sr-americans-img { width: 100%; height: auto; display: block; border-radius: 4px; }

@media (max-width: 900px) {
    .v5-main {
        display: flex;
        flex-direction: column;
        gap: 16px;
        max-width: 100%;
        padding-top: 12px;
    }
    /* Flatten wrappers + reorder via flex order so mobile flow stays:
       cart → form → cta → below. */
    .v5-cart-col, .v5-form-col { display: contents; }
    .cart-card-section { order: 1; }
    .form-section      { order: 2; }
    .cta-block-section { order: 3; }
    .below-fold-section{ order: 4; }
    .cart-card-section,
    .form-section,
    .cta-block-section,
    .below-fold-section { width: 100%; }
}

/* Form — 3 stacked cards */
.v5-form-card { background: var(--white); border: 1px solid #e1e1e1;
                border-radius: 4px; padding: 16px 18px; margin-bottom: 12px;
                box-shadow: none; }
.v5-form-card h2 { font-size: 16px; color: var(--gray-900); margin: 0 0 10px; font-weight: 700; }
.v5-form-card label { display: block; font-size: 12px; color: var(--gray-600); margin-bottom: 10px; }
.v5-form-card input, .v5-form-card select { width: 100%; padding: 12px; font-size: 16px;
                                             border: 1px solid var(--gray-300); border-radius: 4px;
                                             margin-top: 4px; background: var(--white); }
.v5-form-card input:focus, .v5-form-card select:focus { outline: 2px solid var(--teal-500); }
.v5-form-card .two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.v5-form-card .three-up { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.v5-form-card .checkbox { display: flex; align-items: flex-start; gap: 8px; flex-direction: row; }
.v5-form-card .checkbox .check-text { flex: 1; }
.field-error { color: var(--red); font-size: 12px; min-height: 14px; display: block; margin-top: 4px; }
.card-brands { display: flex; gap: 8px; margin: 0; }

/* Payment method radio (collapsed accordion look) */
.pay-method { border: 1px solid var(--gray-300); border-radius: 6px; padding: 12px; margin-top: 8px; }
.pay-method-label { display: flex; justify-content: space-between; align-items: center;
                    padding-left: 28px; position: relative; cursor: pointer; margin-bottom: 12px; }
.pay-method input[type="radio"] { position: absolute; left: 0; margin: 0; }
.pay-method-title { font-weight: 600; color: var(--gray-900); }
.pay-method .card-brands { display: flex; gap: 4px; margin: 0; }

/* Cart card stack */
.cart-card-section { display: flex; flex-direction: column; gap: 16px; }
.order-summary { background: transparent; border-radius: 0; box-shadow: none;
                 padding: 0; position: relative; }
.bundle-badge { position: absolute; top: -10px; right: 16px; background: var(--teal-500);
                color: var(--white); font-size: 11px; font-weight: 700;
                padding: 4px 8px; border-radius: 4px; letter-spacing: .5px; }
.bundle-hero { width: 100%; height: auto; display: block; }
.cart-summary .row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; }
.cart-summary .strike { text-decoration: line-through; color: var(--red); }
.cart-summary .total-row { font-weight: 700; color: var(--gray-900); }
.cart-summary .grand-total { font-size: 16px; font-weight: 700; padding-top: 8px;
                              border-top: 1px solid var(--gray-300); }
.cart-summary .savings { font-size: 13px; color: var(--green); margin-top: 4px; }

/* Cart card wrapper */
.v5-cart-card { background: var(--white); border: 1px solid var(--gray-300);
                border-radius: 8px; padding: 16px; margin-bottom: 16px;
                box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.v5-cart-card .live-counter { background: transparent; color: #2196f3;
                              text-align: center; padding: 0 0 10px; font-size: 14px;
                              border-bottom: 1px solid var(--gray-300); margin-bottom: 12px;
                              border-radius: 0; font-weight: 600; }
.v5-cart-card .live-counter .eye-icon { margin-right: 6px; color: #2196f3; }
.v5-cart-card .live-counter strong { font-weight: 700; color: #2196f3; }

/* Cart summary label */
.cart-summary-label { font-size: 13px; font-weight: 700; color: var(--gray-900);
                      text-align: center; margin-top: 12px; }
.cart-summary h3 { text-align: center; font-size: 18px; color: var(--gray-900);
                   margin: 4px 0 12px; }

/* TODAY'S PRICE bigger */
.cart-summary .row.big { font-size: 18px; font-weight: 700; padding: 8px 0; }

/* Discount visuals */
.cart-summary .discount-percent { background: var(--yellow); color: var(--gray-900);
                                   padding: 1px 6px; border-radius: 3px; font-size: 12px;
                                   text-decoration: underline; }
.cart-summary .discount-amount { color: var(--green); font-weight: 700; }

/* CTA section bottom of cart card */
.cta-section { padding-top: 8px; }

/* VIP upsell with arrow */
.vip-upsell { display: flex; gap: 12px; padding: 14px 14px 14px 36px;
              border: 2px dashed #ff9800; border-radius: 6px; background: #fff7e6;
              align-items: flex-start; position: relative; margin-top: 16px; }
.vip-upsell p { font-size: 12px; margin: 4px 0 0; color: var(--gray-600); }
.vip-upsell .vip-arrow { position: absolute; left: 10px; top: 14px; color: #d9534f;
                         font-size: 18px; font-weight: 700; }

/* Pay Now: yellow with blue border */
.pay-now { width: 100%; padding: 16px; font-size: 20px; font-weight: 700;
           background: var(--yellow); color: var(--gray-900); border: 2px solid #2196f3;
           border-radius: 6px; cursor: pointer; transition: background .15s, opacity .15s;
           text-transform: none; letter-spacing: normal; margin-top: 12px; }
.pay-now:hover:enabled { background: #ffc107; }
.pay-now:disabled { background: var(--yellow); color: var(--gray-900);
                    border-color: #2196f3; opacity: .55; cursor: not-allowed; }
@media (max-width: 900px) {
    .pay-now {
        position: fixed;
        left: 16px;
        right: 16px;
        bottom: 12px;
        width: auto;                  /* override the desktop width:100% */
        z-index: 100;
        box-shadow: var(--shadow);
    }
    /* Reserve space at page bottom so fixed CTA doesn't cover the footer/disclaimers */
    .v5-footer { padding-bottom: 96px; }
}

.payment-tagline { display: flex; justify-content: space-around; font-size: 13px;
                   color: var(--gray-900); margin: 12px 0; }
.trust-row { display: flex; gap: 8px; align-items: center; justify-content: center;
             padding: 8px 0; flex-wrap: wrap; font-size: 11px; color: var(--gray-600); }

/* You've made a great choice — BLUE */
.great-choice { color: #2196f3; }
.urgency { text-align: center; font-size: 14px; color: var(--gray-900);
           margin: 12px 0 0; line-height: 1.5; }

/* Below-cart guarantee block in right rail */
.v5-guarantee-block { background: var(--white); border-radius: 8px; padding: 0;
                      border: 1px solid var(--gray-300); overflow: hidden; }
.guarantee-header { background: var(--teal-900); color: var(--white);
                    padding: 16px; display: flex; gap: 12px; align-items: center; }
.guarantee-header .guarantee-round { width: 80px; height: 80px; }
.guarantee-header .guarantee-brand { width: 120px; height: auto; display: block; margin-bottom: 6px; }
.guarantee-header p { font-size: 12px; margin: 0; font-weight: 600; line-height: 1.4; }
.guarantee-callout { color: #e8a92e; background: var(--white); margin: 0;
                     text-align: center; font-size: 16px; padding: 16px 16px 8px; line-height: 1.4; }

/* Benefit cards inside the guarantee block */
.benefit-card { display: flex; gap: 10px; align-items: flex-start;
                background: #fffaee; border: 1px dashed #d4a72c;
                border-radius: 6px; padding: 10px; margin: 0 16px 12px; }
.benefit-card:last-child { margin-bottom: 16px; }
.benefit-card .check { background: var(--green); color: var(--white);
                       width: 18px; height: 18px; border-radius: 50%;
                       display: inline-flex; align-items: center; justify-content: center;
                       font-size: 12px; font-weight: 700; flex-shrink: 0; margin-top: 2px; }
.benefit-card strong { color: var(--gray-900); font-size: 14px; display: block; }
.benefit-card p { color: var(--gray-600); font-size: 12px; margin: 4px 0 0; }

/* Below fold */
.v5-guarantee-panel { background: var(--teal-900); color: var(--white); padding: 24px 0; }
.v5-guarantee-panel .container { display: flex; align-items: center; gap: 24px; justify-content: center; }
.v5-guarantee-panel p { font-size: 14px; margin: 0; font-weight: 700; letter-spacing: .5px; }
.v5-guarantee-panel .guarantee-shield { font-size: 28px; }

.v5-benefits .container { display: grid; grid-template-columns: repeat(4, 1fr);
                          gap: 24px; padding-top: 40px; padding-bottom: 40px; }
@media (max-width: 900px) { .v5-benefits .container { grid-template-columns: 1fr 1fr; } }
.benefit h3 { font-size: 16px; color: var(--teal-900); margin: 8px 0 4px; }
.benefit p { font-size: 13px; color: var(--gray-600); margin: 0; }

.v5-testimonials { background: var(--white); padding: 40px 0; }
.v5-testimonials h2 { text-align: center; color: var(--teal-900); }
.v5-testimonials .collage { display: grid; grid-template-columns: repeat(4, 1fr);
                             gap: 16px; margin-top: 24px; }
@media (max-width: 900px) { .v5-testimonials .collage { grid-template-columns: 1fr 1fr; } }
.v5-testimonials figure { margin: 0; }
.v5-testimonials img { width: 100%; height: auto; border-radius: 8px; }
.v5-testimonials figcaption { font-size: 12px; color: var(--gray-600); padding: 4px 0; }

/* Footer */
.v5-footer { background: var(--gray-100); padding: 24px 0; }
.v5-footer .disclaimer { font-size: 11px; color: var(--gray-600); line-height: 1.5; }
.v5-footer .legal-nav { display: flex; gap: 16px; justify-content: center; margin: 16px 0;
                        font-size: 13px; }
.v5-footer .legal-nav a { color: var(--teal-700); text-decoration: none; }
.v5-footer .copyright { text-align: center; font-size: 11px; color: var(--gray-600); }

/* Noscript */
.noscript-warning { background: var(--red); color: var(--white); text-align: center;
                     padding: 12px; font-weight: 600; }

/* === ClickBank-alignment additions === */

/* Hint subcopy */
.hint { color: var(--gray-600); font-size: 12px; display: block; margin-top: 4px; }

/* Phone input with country-code prefix */
.phone-input { display: flex; align-items: stretch; border: 1px solid var(--gray-300);
               border-radius: 6px; overflow: hidden; margin-top: 4px; background: var(--white); }
.phone-cc { background: var(--gray-100); padding: 0 12px; display: flex; align-items: center;
            font-size: 14px; font-weight: 600; color: var(--gray-900); border-right: 1px solid var(--gray-300); }
.phone-input input { border: 0; margin: 0; border-radius: 0; }

/* SMS opt-in — checkbox + label inline, hint as block below */
.v5-form-card .sms-optin { display: grid;
             grid-template-columns: 20px 1fr;
             gap: 4px 8px; align-items: center;
             font-size: 13px; cursor: pointer; }
.v5-form-card .sms-optin input[type="checkbox"] { margin: 0; grid-row: 1; grid-column: 1; }
.v5-form-card .sms-optin .check-text { grid-row: 1; grid-column: 2; }
.v5-form-card .sms-optin .hint { grid-row: 2; grid-column: 1 / -1; margin: 0; }

/* Bundle rating in cart — green pill on score */
.bundle-rating { display: flex; align-items: center; justify-content: center;
                 gap: 6px; padding: 8px 0; font-size: 13px;
                 border-bottom: 1px solid var(--gray-300); margin-bottom: 12px; }
.rating-score-pill { background: var(--green); color: var(--white);
                     padding: 2px 6px; border-radius: 3px; font-size: 13px; }
.rating-stars { color: var(--yellow); letter-spacing: 1px; font-size: 14px; }
.rating-label { color: var(--green); }
.rating-count { color: var(--gray-600); margin-left: 4px; }

/* "Limited time — act now" yellow pill */
.recommended-label { background: var(--yellow); color: var(--red); font-weight: 700;
                     text-align: center; padding: 6px 12px; border-radius: 999px;
                     font-size: 12px; margin: 0 auto; display: inline-block;
                     position: relative; top: 8px; left: 50%; transform: translateX(-50%); }

/* Terms disclaimer */
.terms-disclaimer { font-size: 12px; color: var(--gray-600); text-align: center; margin: 8px 0; }
.terms-disclaimer a { color: var(--teal-700); }

/* Footer 3-col */
.v5-footer .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .v5-footer .container { grid-template-columns: 1fr; } }
.footer-col h3 { font-size: 14px; color: var(--teal-900); margin: 0 0 8px; }
.footer-col p { font-size: 12px; color: var(--gray-600); margin: 0 0 8px; line-height: 1.5; }
.footer-col a { color: var(--teal-700); }

/* === Layout-match pass === */

/* Secure Checkout sub-bar (between banner and timer) */
.secure-checkout-bar { background: var(--white); color: var(--gray-900);
                       text-align: center; padding: 10px; font-size: 14px;
                       font-weight: 700; border-bottom: 1px solid var(--gray-300); }
.secure-checkout-bar .shield-icon { margin-right: 8px; font-size: 16px; }

/* Bottle hero with overlay 60-day badge */
.bundle-hero-wrap { position: relative; }
.bundle-hero-wrap .bundle-hero { width: 100%; height: auto; display: block; }
.bundle-hero-wrap .bundle-guarantee-badge {
    position: absolute; right: -8px; bottom: -8px;
    width: 100px; height: 100px;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    background: var(--white);
}
@media (max-width: 900px) {
    .bundle-hero-wrap .bundle-guarantee-badge { width: 72px; height: 72px; }
}

/* Hide the now-removed standalone guarantee text in cart (kept here in case
   existing renderer output still includes it from older variant copies) */
.cart-summary .guarantee-badge { display: none; }

/* === Bladder Balance v5/6 brand-asset overrides === */
.sr-guarantee { padding: 0; border: 0; background: transparent; }
.sr-guarantee-img { width: 100%; height: auto; display: block; border-radius: 8px; }
.v5-americans { max-width: 1180px; margin: 24px auto 48px; padding: 0 20px; }
.v5-americans .americans-img { width: 100%; height: auto; display: block; border-radius: 8px; }

/* SR bottle hero already has 30-day badge baked in — hide duplicate overlay */
.bundle-guarantee-badge { display: none !important; }

/* === JellyFit-style left column: floating labels, green check, brand badges right === */

/* Floating label fields */
.v5-form-card .float-field {
    position: relative;
    margin-bottom: 12px;
}
.v5-form-card .float-field input,
.v5-form-card .float-field select {
    width: 100%;
    padding: 18px 12px 6px;
    font-size: 15px;
    border: 1px solid #c4c4c4;
    border-radius: 4px;
    background: var(--white);
    margin: 0;
    height: 56px;
    line-height: 1.2;
    box-sizing: border-box;
}
.v5-form-card .float-field select { appearance: none; -webkit-appearance: none;
                                     padding-right: 32px; }
.v5-form-card .float-field label {
    position: absolute;
    top: 18px;
    left: 12px;
    font-size: 15px;
    color: #888;
    pointer-events: none;
    transition: all .15s ease;
    background: var(--white);
    padding: 0 4px;
    margin: 0;
}
.v5-form-card .float-field input:focus,
.v5-form-card .float-field select:focus {
    outline: none;
    border-color: #2196f3;
}
.v5-form-card .float-field input:not(:placeholder-shown) + label,
.v5-form-card .float-field input:focus + label,
.v5-form-card .float-field select:focus + label,
.v5-form-card .float-field select:not([value=""]) + label,
.v5-form-card .float-field select + label {
    top: -8px;
    font-size: 12px;
    color: #555;
}
.v5-form-card .float-field.has-caret::after {
    content: '▾';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    pointer-events: none;
    font-size: 14px;
}
.v5-form-card .float-field.has-icon-right .input-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    font-size: 16px;
    cursor: help;
}
.v5-form-card .float-field.has-icon-right input { padding-right: 36px; }

/* Phone field special: country code prefix inside the field */
.v5-form-card .float-field.phone-field input { padding-left: 52px; }
.v5-form-card .phone-field .phone-cc {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--gray-900);
    z-index: 1;
    background: transparent;
    border: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 2px;
}
.v5-form-card .phone-field .phone-cc .caret { font-size: 10px; color: #888; }
.v5-form-card .phone-field label { left: 52px; }
.v5-form-card .phone-field input:not(:placeholder-shown) + label,
.v5-form-card .phone-field input:focus + label { left: 12px; }

/* Hint under floating field */
.v5-form-card .float-field .hint { margin-top: 4px; padding-left: 4px; }

/* Payment method radio row */
.v5-form-card .pay-method-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    cursor: pointer;
}
.v5-form-card .pay-method-row input[type="radio"] {
    width: 18px; height: 18px; margin: 0;
    appearance: none; -webkit-appearance: none;
    border: 2px solid #c4c4c4; border-radius: 50%;
    position: relative; flex-shrink: 0;
}
.v5-form-card .pay-method-row input[type="radio"]:checked {
    border-color: #2196f3;
}
.v5-form-card .pay-method-row input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 10px; height: 10px;
    background: #2196f3;
    border-radius: 50%;
}
.v5-form-card .pay-method-row .pay-method-label-text {
    display: flex; align-items: center; gap: 8px;
    flex: 1;
    color: var(--gray-900);
    font-size: 15px;
}
.v5-form-card .pay-method-row .pp-fallback {
    color: #0070ba; font-weight: 700;
}
.v5-form-card .pay-method-row .pay-method-title {
    color: var(--gray-900); font-weight: 500;
}
.v5-form-card .pay-method-row .card-brands { display: flex; gap: 4px; margin: 0; }
.v5-form-card .pay-divider {
    border: 0;
    border-top: 1px solid #e1e1e1;
    margin: 0;
}

.v5-form-card .pay-method-body { margin-top: 12px; }
.v5-form-card hr.pay-divider + .pay-method-row { padding-top: 12px; }

/* Green-check style for SMS opt-in + billing checkbox */
.v5-form-card .sms-optin {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 4px 8px;
    align-items: start;
    cursor: pointer;
    font-size: 14px;
    margin-top: 8px;
    padding: 4px 0;
}
.v5-form-card .sms-optin input[type="checkbox"] {
    /* hide native; we render green check via .check-icon when checked */
    appearance: none; -webkit-appearance: none;
    width: 20px; height: 20px;
    border: 0; background: transparent;
    grid-row: 1; grid-column: 1;
    margin: 0; padding: 0;
}
.v5-form-card .sms-optin .check-icon {
    grid-row: 1; grid-column: 1;
    width: 20px; height: 20px;
    background: var(--green); color: var(--white);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    pointer-events: none;
    transition: opacity .15s, transform .15s;
}
.v5-form-card .sms-optin input[type="checkbox"]:not(:checked) ~ .check-icon {
    background: transparent; color: transparent;
    border: 2px solid #c4c4c4;
}
.v5-form-card .sms-optin .check-text {
    grid-row: 1; grid-column: 2;
    color: var(--gray-900);
    font-size: 14px;
    align-self: center;
}
.v5-form-card .sms-optin .hint {
    grid-row: 2; grid-column: 2;
    margin: 0; padding: 0;
}

/* === SR subscription model (replaces JellyFit-style VIP orange box) === */
.sr-vip-optin {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 8px;
    align-items: center;
    padding: 12px;
    background: #fff7e6;
    border: 1px solid #ffd23f;
    border-radius: 6px;
    margin-top: 12px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.4;
}
.sr-vip-optin input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    width: 20px; height: 20px;
    grid-row: 1; grid-column: 1;
    margin: 0; padding: 0;
}
.sr-vip-optin .check-icon {
    grid-row: 1; grid-column: 1;
    width: 20px; height: 20px;
    background: var(--green); color: var(--white);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    pointer-events: none;
}
.sr-vip-optin input[type="checkbox"]:not(:checked) ~ .check-icon {
    background: transparent; color: transparent;
    border: 2px solid #c4c4c4;
}
.sr-vip-optin > span:last-child { grid-row: 1; grid-column: 2; color: var(--gray-900); }
.sr-vip-optin strong { color: #c45500; }

.sr-sub-disclosure {
    font-size: 11px; color: var(--gray-600);
    text-align: center;
    margin: 12px 0 0;
    line-height: 1.5;
}

/* === Secure Checkout bar — clean lock + label === */
.secure-checkout-bar { background: var(--paper); color: var(--ink);
                       text-align: center; padding: 12px;
                       border-bottom: 1px solid var(--line);
                       display: flex; align-items: center; justify-content: center;
                       gap: 8px; font-size: 14px; }
.secure-checkout-bar .lock-icon { color: var(--ink); }
.secure-checkout-bar strong { font-weight: 700; font-family: var(--font-body); }

/* === Card brand row (no radio, no label) === */
.card-brands-row { display: flex; gap: 10px; align-items: center;
                   margin: 12px 0 16px; padding-bottom: 14px;
                   border-bottom: 1px solid var(--line); }
.card-brands-row img { display: block; }
.pay-method-body { margin-top: 4px; }

/* Encryption hint above the card row */
.hint-block { color: var(--ink-soft); font-size: 12px; margin: 0 0 4px; }

/* === Refined CTA cluster (Pay Now + tagline + trust seals) === */

.pay-now { width: 100%; padding: 18px;
           font-family: var(--font-display);
           font-size: 22px; font-weight: 700; letter-spacing: 0.01em;
           background: var(--gold); color: var(--ink);
           border: 2px solid #2196f3;
           border-radius: 6px; cursor: pointer;
           transition: background .15s; margin-top: 12px; }
.pay-now:hover:enabled { background: #ffc62b; }
.pay-now:disabled { background: var(--gold); color: var(--ink);
                    border-color: #2196f3; cursor: not-allowed; opacity: 1; }

.payment-tagline { display: flex; justify-content: center; gap: 24px;
                   margin: 14px 0; font-size: 14px; color: var(--ink); }
.payment-tagline .tag { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }

.trust-row { display: flex; justify-content: center; gap: 8px;
             padding: 8px 0 6px; flex-wrap: wrap; }
.trust-seal { display: inline-flex; align-items: center; gap: 6px;
              padding: 6px 10px;
              background: var(--paper);
              border: 1px solid var(--line);
              border-radius: 4px;
              min-height: 36px; }
.trust-seal .seal-text { display: flex; flex-direction: column; line-height: 1; }
.trust-seal .seal-text strong { font-size: 11px; color: var(--ink); font-weight: 700; }
.trust-seal .seal-text small { font-size: 8px; color: var(--ink-soft);
                                letter-spacing: 0.08em; font-weight: 700; margin-top: 2px; }
.trust-bbb .seal-mark { font-size: 14px; font-weight: 800; color: #fff;
                        background: #1664a8; padding: 4px 6px; border-radius: 2px; }

/* === Billing fields section (revealed when "same as shipping" unchecked) === */
.billing-fields { margin-top: 16px; padding-top: 16px;
                  border-top: 1px solid var(--line); }
.billing-fields[hidden] { display: none; }
.billing-fields-title { font-family: var(--font-display);
                        font-size: 16px; font-weight: 600;
                        color: var(--ink);
                        margin: 0 0 12px; }

/* ============== Upsell page ============== */
.v5-upsell-main { max-width: 720px; margin: 0 auto; padding: 24px 16px 64px; display: flex; flex-direction: column; gap: 24px; }
.upsell-hero-banner { background: var(--ink, #1c1c1c); color: var(--paper, #f5efe6); font-family: 'DM Sans', sans-serif; font-weight: 600; text-align: center; padding: 10px 16px; border-radius: 4px; letter-spacing: 0.04em; text-transform: uppercase; font-size: 13px; }
.upsell-hero-headline { font-family: 'Fraunces', serif; font-weight: 600; font-size: 32px; line-height: 1.15; margin: 16px 0 8px; text-align: center; color: var(--ink, #1c1c1c); }
.upsell-hero-img { width: 100%; max-width: 360px; height: auto; display: block; margin: 8px auto; }
.upsell-hero-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f5efe6 0%, #efe5d3 100%);
    border: 1px solid rgba(0,0,0,0.08);
    aspect-ratio: 1 / 1;
    min-height: 240px;
    max-width: 320px;
    margin: 8px auto;
    border-radius: 8px;
    font-family: 'Fraunces', serif;
    font-size: 22px;
    color: var(--ink, #1c1c1c);
    text-align: center;
    padding: 16px;
}
.upsell-hero-pitch { font-family: 'DM Sans', sans-serif; font-size: 16px; line-height: 1.5; text-align: center; color: var(--ink, #1c1c1c); }
.upsell-hero-img-wrap { display: flex; justify-content: center; }
.v5-upsell-offer { background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 8px; padding: 20px; display: flex; flex-direction: column; gap: 16px; }

/* Pack-size selector */
.upsell-options { display: flex; gap: 12px; }
.upsell-option { flex: 1; position: relative; display: flex; align-items: center; gap: 10px; padding: 12px; border: 2px solid rgba(0,0,0,0.12); border-radius: 8px; cursor: pointer; background: #fff; transition: border-color 0.15s, box-shadow 0.15s; }
.upsell-option:has(input:checked) { border-color: var(--gold, #b08a4a); box-shadow: 0 0 0 1px var(--gold, #b08a4a); }
.upsell-option input[type="radio"] { position: absolute; top: 10px; right: 10px; accent-color: var(--gold, #b08a4a); margin: 0; }
.upsell-option-img { width: 72px; height: 72px; object-fit: contain; flex: none; }
.upsell-option-info { display: flex; flex-direction: column; font-family: 'DM Sans', sans-serif; }
.upsell-option-badge { display: inline-block; align-self: flex-start; background: var(--gold, #b08a4a); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; margin-bottom: 2px; }
.upsell-option-title { font-weight: 700; font-size: 16px; color: var(--ink, #1c1c1c); }
.upsell-option-sub { font-size: 12px; color: #666; }
.upsell-option-price { font-family: 'Fraunces', serif; font-weight: 700; font-size: 22px; color: var(--gold, #b08a4a); }
@media (max-width: 600px) { .upsell-options { flex-direction: column; } }
.upsell-price-block { display: flex; align-items: baseline; justify-content: center; gap: 12px; font-family: 'Fraunces', serif; }
.upsell-price-anchor { text-decoration: line-through; color: #888; font-size: 18px; }
.upsell-price-member { font-size: 36px; font-weight: 700; color: var(--gold, #b08a4a); }
.upsell-price-shipping { font-size: 14px; color: #555; }
.upsell-ingredients { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-family: 'DM Sans', sans-serif; font-size: 15px; }
.upsell-ingredients li::before { content: '✓'; color: var(--gold, #b08a4a); margin-right: 8px; font-weight: 700; }
.upsell-cta-yes { background: var(--gold, #b08a4a); color: #fff; border: none; border-radius: 6px; padding: 16px 20px; font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 17px; cursor: pointer; width: 100%; text-transform: uppercase; letter-spacing: 0.04em; }
.upsell-cta-yes:disabled { opacity: 0.6; cursor: not-allowed; }
.upsell-cta-no { display: block; text-align: center; font-family: 'DM Sans', sans-serif; font-size: 13px; color: #666; text-decoration: underline; padding: 8px; }
.upsell-microcopy { text-align: center; font-size: 13px; color: #666; margin: 0; }
.upsell-guarantee { background: #f5efe6; border-left: 3px solid var(--gold, #b08a4a); padding: 10px 14px; font-family: 'DM Sans', sans-serif; font-size: 14px; }
.v5-upsell-faq { display: flex; flex-direction: column; gap: 8px; }
.upsell-faq-title { font-family: 'Fraunces', serif; font-size: 20px; margin: 16px 0 8px; }
.upsell-faq-item { background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 6px; padding: 10px 14px; font-family: 'DM Sans', sans-serif; }
.upsell-faq-item summary { font-weight: 600; cursor: pointer; }
.upsell-faq-item p { margin: 8px 0 0; color: #444; line-height: 1.5; }

/* ============== Thankyou page ============== */
.v5-thankyou-main { max-width: 640px; margin: 0 auto; padding: 32px 16px 64px; }
.thankyou-headline { font-family: 'Fraunces', serif; font-weight: 600; font-size: 28px; margin: 0 0 12px; }
.thankyou-receipt-line { font-family: 'DM Sans', sans-serif; font-size: 14px; color: #555; margin: 0 0 16px; }
.thankyou-summary { width: 100%; border-collapse: collapse; margin: 16px 0; font-family: 'DM Sans', sans-serif; }
.thankyou-summary td { padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.08); }
.thankyou-summary td:last-child { text-align: right; font-weight: 600; }
.thankyou-arrival { background: #f5efe6; border-left: 3px solid var(--gold, #b08a4a); padding: 10px 14px; font-family: 'DM Sans', sans-serif; }
.thankyou-address { font-style: normal; margin-top: 16px; font-family: 'DM Sans', sans-serif; font-size: 14px; color: #444; }

@media (max-width: 600px) {
  .upsell-hero-headline { font-size: 26px; }
  .upsell-price-member { font-size: 30px; }
  .upsell-cta-yes { font-size: 16px; padding: 14px 16px; }
}


/* LP-399 buy-page fixes */
.v5-form-card .float-field.phone-field input { padding-left: 12px; }
.v5-form-card .float-field.phone-field label { left: 12px; }
@media (max-width: 900px) {
  .pay-now { position: fixed; left: 16px; right: 16px; bottom: 12px;
             width: auto; box-sizing: border-box; font-size: 18px; padding: 15px; }
}

/* ── Upsell modal — shown in place on the checkout page after a held-order checkout.
   The upsell offer DOM is lifted verbatim into #upsell-modal on index.html and
   surfaced by toggling data-show. Ported from glycogen d-payment.html. ── */
#upsell-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: auto;
  background: #fff;
}
#upsell-modal[data-show="1"] { display: block; }
body.upsell-modal-open { overflow: hidden; }