/* ============================================================
   ActCAD Store stylesheet
   BRAND PALETTE — edit these lines to match the logo exactly.
   Navy/red carry real weight here (hero tint, card accent bars,
   footer) but stay contained to accents and one dark section
   (the footer) rather than washing the whole page in blue.

   RED: confirmed brand colors from Murali (2026-07-28) — Crimson Red
   (#D22E33, bright/vivid) as the primary CTA color, Upsdell Red
   (#B62228, deep/muted) as its hover/pressed shade.

   FONT SIZES (round 14, 2026-07-29): raised across the board to match
   standard e-commerce/UX guidance — 16px body baseline (was 15px), form
   inputs at 16px+ specifically to stop mobile Safari auto-zooming on
   focus, secondary/label/caption text nudged out of the 11-12.5px range.
   Primary headings, badges, and pill-style labels (MOST POPULAR badge,
   currency/language selects) were left as-is on purpose — those are
   deliberately compact UI chrome, not reading content.
   ============================================================ */
:root{
    /* Retheme (3 Sep 2026): moved from the "Harbour" palette to **Blueprint**,
       which the rest of the site now uses. Values only — every variable name
       and all store logic is untouched, so nothing downstream had to change.
       Token names are the store's; the comment gives the site equivalent.

       Blueprint also carries a two-colour rule: --accent (red) is for things
       you click, and the instrument cyan below is for data and marks. */
    --navy:#0B2545;            /* site --field */
    --accent:#D22E33;          /* site --red, unchanged — already Blueprint's */

    --navy-2:#16406E;          /* site --field-2 */
    --navy-deep:#0B2545;       /* footer; Blueprint uses one navy, not a darker one */
    --accent-dark:#B62228;     /* site --red-2, unchanged */

    --data:#0D7495;            /* site --data — prices, ticks, figures */
    --data-2:#5FD0EE;          /* site --data-2 — the same idea on the navy */

    --bg:#F4F7FB;              /* site --paper (was cream) */
    --surface:#ffffff;
    --surface-2:#E9EFF7;       /* site --paper-2 */
    --border:#DCE4EF;          /* site --rule */
    --ink:#08203E;             /* site --ink — headings, prices, emphasis */
    --text:#47566B;            /* site --text — body copy. The store had body at
                                  --ink, which rendered every paragraph a shade
                                  heavier than the same copy on the rest of the
                                  site. Headings set their own colour, so only
                                  running text changes. */
    --muted:#627185;           /* site --text-3, 5.08:1 on paper */
    --green:#167F5B;           /* site --ok */
    --warn:#96650B;            /* error / invalid-coupon text — kept distinct from the red brand accent */
    --red:#C4362F;             /* legacy alias, no longer used directly — kept in case older code references it */

    --radius:14px;
    --radius-sm:10px;
    --shadow:0 6px 20px rgba(8,32,62,.08);
    --shadow-lift:0 16px 36px rgba(8,32,62,.15);
    --font-display:"Sora","Segoe UI",system-ui,sans-serif;   /* site heading face */
    --font-body:"Inter","Segoe UI",system-ui,sans-serif;
}

/* ==========================================================================
   Collision guards.

   The store now loads the site stylesheet first, for the shared header and
   footer. Seven class names exist in both files and are used by store markup:
   .field .badges .err .faq-item .mono .no .yes — the site's versions were
   landing on store content. The worst was .field: the site paints it as the
   navy hero band, so the licence picker inside every product card turned into
   a dark block with 96px of padding.

   Rather than rename seven classes inside a live checkout, the site's versions
   are neutralised wherever store content lives (.shell, .card, the cart and
   the footer of the page). Only the properties the site adds are reset; each
   class's own store rules below still apply.
   ========================================================================== */
.shell .field, .card .field, .cart-col .field {
    position: static; background: none; color: inherit;
    padding: 0; overflow: visible;
}
.shell .badges, .card .badges {
    display: flex; grid-template-columns: none; max-width: none; margin-inline: 0;
}
.shell .faq-item, .card .faq-item {
    background: none; border-radius: 0; overflow: visible;
}
.shell .mono, .card .mono { font-variant-numeric: normal; }

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.55;font-size:16px}
a{text-decoration:none;color:inherit}
button{font-family:var(--font-body)}

/* ---------------- Header ---------------- */

/* Below 560px the header ran 123px past a 375px viewport, which scrolled the
   whole page sideways. The two long labels go: their icons carry the meaning,
   and the cart still shows its count. Clipped rather than display:none so a
   screen reader still announces "WhatsApp Us" and "Cart". */
@media(max-width:560px){
    #whatsappBtn span[data-i18n],
    .cart-chip span[data-i18n]{
        position:absolute;width:1px;height:1px;padding:0;overflow:hidden;
        clip:rect(0 0 0 0);white-space:nowrap;border:0
    }
    #whatsappBtn{padding:9px 11px}
    .cart-chip{padding:9px 12px;gap:5px}
}
@media(max-width:420px){
    .btn-outline{padding:8px 12px;font-size:13px}
    .cart-chip{padding:8px 11px;font-size:13px}
}

/* ---------------- Hero ---------------- */
.hero{position:relative;overflow:hidden;text-align:center;padding:50px 20px 42px;
    background:linear-gradient(180deg,#dfe7f1 0%,var(--bg) 100%);border-bottom:1px solid var(--border)}
.hero::before{content:"";position:absolute;inset:0;opacity:.8;pointer-events:none;
    background-image:
        linear-gradient(rgba(29,58,102,.06) 1px,transparent 1px),
        linear-gradient(90deg,rgba(29,58,102,.06) 1px,transparent 1px);
    background-size:52px 52px;
    mask-image:radial-gradient(ellipse 70% 100% at 50% 0%,#000 45%,transparent 90%)}
.hero > *{position:relative;z-index:1}
.hero .kicker{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;
    color:var(--accent-dark);background:#fde8e9;border:1px solid #f3b6ba;border-radius:24px;padding:6px 16px}
.hero h1{font-family:var(--font-display);font-size:clamp(26px,4vw,40px);font-weight:700;margin-top:16px;letter-spacing:-.4px;color:var(--navy)}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero-global-badge{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:8px 18px;
    border-radius:999px;background:var(--accent);color:#fff;font-weight:700;font-size:14px;letter-spacing:.2px}
.hero-global-badge svg{width:16px;height:16px;flex-shrink:0}
.hero p{margin:10px auto 0;color:var(--muted);font-size:16px;max-width:520px}
.badges{margin-top:20px;display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
.badges span{display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--border);
    border-radius:24px;padding:7px 15px;font-size:13px;font-weight:500;color:var(--ink)}
.badges svg{width:13px;height:13px;color:var(--green)}
@media(max-width:640px){
    .hero{padding:30px 16px 24px}
    .hero p{font-size:15px}
    .hero-global-badge{font-size:12.5px;padding:7px 14px;margin-top:12px}
    .badges{margin-top:16px;gap:7px}
    .badges span{font-size:12.5px;padding:6px 12px}
}

/* ---------------- Page shell: products row, then wide cart row ---------------- */
.shell{max-width:1240px;margin:0 auto;padding:34px 24px 44px}
@media(max-width:640px){.shell{padding:22px 14px 30px}}

/* ---------------- Product cards (row 1) ---------------- */
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.products{grid-template-columns:1fr;gap:16px}}
.card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px 22px 20px;
    display:flex;flex-direction:column;gap:13px;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s;
    border-top:4px solid var(--navy)}
.card:hover{box-shadow:var(--shadow-lift)}
.card.popular{border:1.5px solid var(--accent);border-top:4px solid var(--accent)}
.pop-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;
    font-size:10.5px;font-weight:700;letter-spacing:1.3px;padding:5px 15px;border-radius:20px;white-space:nowrap}
@media(max-width:900px){.card{padding:18px 18px 16px;gap:11px}}

/* Product box image stage (monogram shows only if the image fails) */
.card-media{position:relative;height:168px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:var(--surface-2)}
.card-media img{position:relative;max-height:150px;max-width:80%;object-fit:contain;
    filter:drop-shadow(0 10px 14px rgba(8,32,62,.18));transition:transform .25s}
.card:hover .card-media img{transform:scale(1.02)}
.card.popular .card-media{background:#fdedee}
.mono{display:none;width:58px;height:58px;border-radius:16px;align-items:center;justify-content:center;
    font-family:var(--font-display);font-size:24px;font-weight:700;color:#fff;background:var(--navy)}
.card.popular .mono{background:var(--accent)}
.card-media.noimg img{display:none}
.card-media.noimg .mono{display:flex}
@media(max-width:900px){.card-media{height:128px}.card-media img{max-height:110px}}

/* The eyebrow and the product name are one unit, so the gap between them is set
   here rather than left to whatever line-height each font happens to have.
   The heading used to pull itself up with margin-top:-6px, which was tuned
   when this page had only store.css. It now also loads the site stylesheet
   for the shared header and footer, that changed the eyebrow's line-height,
   and the negative margin dragged the name straight through the eyebrow —
   a 6px overlap on all three cards. Explicit line-heights, no negative pull. */
.card .tagline{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.4px;
    color:var(--muted);line-height:1.35;margin:0 0 4px}
.card h2{font-family:var(--font-display);font-size:19px;color:var(--navy);letter-spacing:-.2px;
    line-height:1.25;margin:0 0 6px}
.features{list-style:none;display:flex;flex-direction:column;gap:6px;font-size:14.5px;color:#434a56}
.features li{display:flex;gap:8px;align-items:flex-start}
.features svg{width:14px;height:14px;flex-shrink:0;margin-top:3px;color:var(--green)}
/* Pushes the license selector + seats/price + Add to Cart button as one group
   to the bottom of the card, so all three Add to Cart buttons line up at the
   same height regardless of how many feature bullets a card has above them
   (cards are already equal-height via CSS grid's default row stretch). */
.field{margin-top:auto}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.7px;margin-bottom:6px}
.select-wrap{position:relative}
.select-wrap::after{content:"";position:absolute;right:14px;top:50%;transform:translateY(-30%) rotate(45deg);
    width:7px;height:7px;border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);pointer-events:none}
.select-wrap select{width:100%;appearance:none;-webkit-appearance:none;padding:11px 36px 11px 12px;border:1.5px solid var(--border);
    border-radius:var(--radius-sm);font-size:16px;font-family:var(--font-body);color:var(--ink);background:var(--surface-2);cursor:pointer;transition:border .15s}
.select-wrap select:focus{outline:none;border-color:var(--accent)}
.qty-price{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.qty-ctrl{display:flex;align-items:center;border:1.5px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;background:var(--surface-2)}
.qty-ctrl button{width:32px;height:38px;border:none;background:transparent;font-size:17px;cursor:pointer;color:var(--navy);transition:background .15s}
.qty-ctrl button:hover{background:var(--border)}
.qty-ctrl input{width:44px;height:38px;border:none;background:transparent;text-align:center;font-size:16px;font-weight:600;font-family:var(--font-body)}
.qty-ctrl input:focus{outline:none}
.price-block{text-align:right}
.price-block .unit{font-family:var(--font-display);font-size:23px;font-weight:700;color:var(--navy);line-height:1.05}
.price-block .unit small{font-size:12.5px;color:var(--muted);font-weight:400;font-family:var(--font-body)}
.price-block .line-total{font-size:13px;color:var(--muted);margin-top:2px}
.price-block .line-total b{color:var(--accent-dark);font-size:14.5px}
.add-btn{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:2px;background:var(--accent);color:#fff;border:none;
    border-radius:var(--radius-sm);padding:16px;font-size:16px;font-weight:700;cursor:pointer;transition:background .18s,transform .12s;width:100%}
.add-btn:hover{background:var(--accent-dark);transform:translateY(-1px)}
.add-btn:active{transform:translateY(0)}
.add-btn.added{background:var(--green)}
.add-btn svg{width:18px;height:18px}

/* Reassurance line under each product's Add to Cart button (round 18; highlighted
   bold/accent-colored round 19 so it reads as a benefit, not fine print) */
.lifetime-note{text-align:center;font-size:12.5px;font-weight:700;color:var(--accent-dark);margin-top:8px}

/* Windows compatibility line + "Everything in Standard, plus:" note */
.os-compat{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);margin-top:4px}
.os-compat svg{width:13px;height:13px;flex-shrink:0}
.features-note{font-size:13px;font-weight:700;color:var(--accent-dark);text-transform:uppercase;letter-spacing:.4px;margin-top:-4px}

/* ---------------- Trust strip ---------------- */
.trust{margin-top:22px;display:flex;gap:24px;justify-content:center;flex-wrap:wrap;color:var(--muted);font-size:13px}
.trust span{display:flex;align-items:center;gap:6px}
.trust svg{width:14px;height:14px;color:var(--navy)}
@media(max-width:640px){.trust{margin-top:16px;gap:14px 18px}}

/* ---------------- Cart row (row 2, full width) ---------------- */
.cart-panel{margin-top:28px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
    padding:22px 26px;box-shadow:var(--shadow);display:grid;grid-template-columns:1.15fr 1px 0.85fr 1px 0.95fr;gap:26px;align-items:start;
    border-top:4px solid var(--navy)}
.cart-divider{background:var(--border);align-self:stretch}
@media(max-width:960px){
    .cart-panel{grid-template-columns:1fr;gap:18px;padding:18px 18px;margin-top:20px}
    .cart-divider{display:none}
    .cart-col{padding-bottom:14px;border-bottom:1px solid var(--border)}
    .cart-col:last-child{padding-bottom:0;border-bottom:none}
}

.cart-col h3{font-family:var(--font-display);color:var(--navy);font-size:16.5px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}
.cart-col h3 span{font-size:15px;color:var(--accent-dark)}
.cart-col h3.cart-title-main{font-weight:800;font-size:19px;letter-spacing:.6px;text-transform:uppercase;color:var(--navy)}
.usd-note{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.5}
/* Pay Later messaging widget container (PayPal renders its own iframe content
   inside this div — the min-height just avoids a layout jump while it loads,
   and it collapses to 0 automatically when PayPal decides not to show anything). */
/* PayPal's Pay Later message is an iframe that PayPal sizes itself, and it does
   not settle on one answer: the same card was measured at 18px and 38px, because
   the sentence ("Starting at $23.79/mo or as low as 0% APR with PayPal. Learn
   more") wraps to one line or two depending on how many digits the amount has —
   and the amount changes with every quantity. The cards are a stretch grid, so
   each row matches its tallest card and that 20px wobble moved all three at once.

   min-height was not enough: it sets a floor, and the iframe still grew past it.
   So the slot is a FIXED height that the content cannot negotiate. 42px clears
   the two-line case (38px measured) with a little headroom, and overflow keeps
   anything unexpected inside instead of pushing the card. The card's height is
   now independent of the widget entirely, which is the only way this stays fixed. */
.paylater-msg{margin-top:8px;height:42px;overflow:hidden}
.cart-empty{color:var(--muted);font-size:14.5px;text-align:center;padding:22px 10px}
.cart-empty svg{width:36px;height:36px;color:#cfd3da;display:block;margin:0 auto 8px}
.cart-err{color:var(--warn);font-size:14px;text-align:center;padding:14px 6px}
.cart-lines-scroll{max-height:280px;overflow-y:auto;margin-right:-6px;padding-right:6px}
.cart-line{display:flex;gap:10px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--border);font-size:14px}
.cart-line:last-child{border-bottom:none}
.cart-line .n{flex:1}
.cart-line .n b{color:var(--navy);display:block;font-size:14px;font-weight:600}
.cart-line .n span{color:var(--muted);font-size:13px}
.cart-line .n input{width:50px;padding:4px 6px;border:1px solid var(--border);border-radius:7px;font-size:16px;text-align:center}
.cart-line .p{font-weight:700;white-space:nowrap;color:var(--navy);font-size:14px}
.cart-line .rm{border:none;background:none;color:#c3c8d0;font-size:17px;cursor:pointer;line-height:1;transition:color .15s}
.cart-line .rm:hover{color:var(--accent)}

.coupon-row{display:flex;gap:8px;margin-bottom:4px}
.coupon-row input{flex:1;min-width:0;padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:16px;text-transform:uppercase;background:var(--surface-2)}
.coupon-row input:focus{outline:none;border-color:var(--accent)}
.coupon-row button{background:var(--navy);color:#fff;border:none;border-radius:var(--radius-sm);padding:0 16px;font-weight:700;font-size:14px;cursor:pointer;transition:background .15s}
.coupon-row button:hover{background:var(--accent)}
.coupon-msg{font-size:13px;min-height:16px;margin-bottom:8px}
.coupon-msg.ok{color:var(--green)} .coupon-msg.err{color:var(--warn)}
.totals{font-size:14.5px;margin-top:4px}
.totals .row{display:flex;justify-content:space-between;padding:4px 0;color:#434a56}
.totals .row.disc{color:var(--green)}
.totals .grand{border-top:2px solid var(--navy);margin-top:8px;padding-top:9px;font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--navy)}
.upg-box{margin-top:14px}
.upg-box label{font-size:12.5px;font-weight:600;color:var(--muted)}
.upg-box input{width:100%;margin-top:5px;padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:16px;background:var(--surface-2)}
.upg-box input:focus{outline:none;border-color:var(--accent)}

/* Recent-purchases trust signal (round 18; moved into its own third-column card
   and expanded to a list in round 19, tuned to the latest 4 in round 20).
   Occupies the same grid column payColumn uses once checkout starts — the two
   are toggled opposite each other in JS, so this fills what would otherwise
   be blank space and steps aside the moment the buyer actually starts paying.
   Row text switched from the low-contrast --muted gray to --navy (round 20 —
   the muted color was hard to read); the customer's name is bolded via a
   dedicated <b> tag for a clearer visual anchor per row. */
#recentOrdersCol{max-height:420px;overflow-y:auto}
.recent-orders-list{display:flex;flex-direction:column;gap:8px}
.recent-order-row{font-size:13.5px;line-height:1.5;color:var(--navy);background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 11px}
.recent-order-row b{color:var(--navy)}
.recent-order-row .row-time{color:var(--muted);font-size:12px}

/* Billing details (name/email/phone/country), captured before any payment method */
.billing-group{margin-bottom:2px}
.billing-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.billing-row label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px}
.billing-row .optional-tag{text-transform:none;font-weight:400;letter-spacing:0;color:#9aa0ab}
.billing-row input,.billing-row select{width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:16px;background:var(--surface-2);font-family:var(--font-body)}
/* The native <select> dropdown arrow needs a bit more reserved space than a plain
   text input once the font grew to 16px — without this, longer option text (e.g.
   "Select country") clips against the arrow. */
.billing-row select{padding-right:26px}
.billing-row input:focus,.billing-row select:focus{outline:none;border-color:var(--accent)}
.billing-row input.field-invalid,.billing-row select.field-invalid{border-color:var(--warn)}
.billing-msg{font-size:13px;color:var(--warn);min-height:16px;margin-top:-2px}
@media(max-width:640px){.billing-row{grid-template-columns:1fr}}

/* Shipping address (round 28) — only shown while the cart contains a physical
   item (see #shippingAddressGroup in index.php); .shipping-note explains why
   it suddenly appeared, since a buyer who only ever bought software licenses
   before would otherwise be surprised by an address form. */
.shipping-note{font-size:13px;color:var(--muted);margin:-4px 0 10px 0;line-height:1.4}

/* Payment column: Card on top, PayPal/Venmo wallets below */
.pay-group{margin-bottom:6px}
.pay-label{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);margin-bottom:8px}
.pay-divider{display:flex;align-items:center;gap:10px;margin:14px 0;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.pay-divider::before,.pay-divider::after{content:"";flex:1;height:1px;background:var(--border)}
#card-btn,#venmo-btn,#paypal-btn{margin-top:2px}
.pay-note{font-size:12px;color:var(--muted);text-align:center;margin-top:12px;line-height:1.5}
.checkout-msg{font-size:13px;color:var(--warn);margin-top:8px;min-height:16px}

/* Express wallets: Google Pay / Apple Pay */
.wallet-buttons{display:flex;flex-direction:column;gap:8px}
.wallet-buttons > div,.wallet-buttons > button{width:100%}
#googlepay-btn > button{width:100%!important}
.apple-pay-button{
    -webkit-appearance:-apple-pay-button;-apple-pay-button-type:buy;-apple-pay-button-style:black;
    width:100%;height:44px;border-radius:var(--radius-sm);border:none;cursor:pointer;
    /* Fallback for browsers where -apple-pay-button isn't supported (JS only shows this button
       at all once Apple Pay eligibility is confirmed, so the fallback mainly matters for older
       WebKit builds where the native appearance value silently falls through). */
    background:#000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M7.5 2.5a2.3 2.3 0 0 1 1.7-.9 2.5 2.5 0 0 1-.6 1.9 2 2 0 0 1-1.7.9 2.3 2.3 0 0 1 .6-1.9Zm.8 2.3c.9 0 1.5.5 2 .5s1.2-.5 2-.5c1 0 2 .5 2.5 1.4-2.2 1.2-1.8 4.3.4 5.1-.4 1.2-.9 2.3-1.8 3.4-.6.8-1.3 1.7-2.3 1.7s-1.3-.6-2.4-.6-1.5.6-2.4.6-1.6-.9-2.3-1.7C2.3 13.6 1.6 9.9 3.3 7.7c.9-1.1 2.3-1.8 3.5-1.8.9 0 1.8.5 2.4.5Z'/%3E%3C/svg%3E") no-repeat center/22px;
    background-size:auto 22px;background-position:center}
@media(max-width:960px){.apple-pay-button{height:44px}}

/* Advanced Card Fields (hosted card form) */
#card-fields-form{margin-top:2px}
.cf-row{margin-bottom:10px}
.cf-row label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px}
.cf-row-split{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cf-field{border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;background:var(--surface-2);transition:border-color .15s;min-height:40px}
.cf-field:focus-within{border-color:var(--accent)}
.cf-field.card-field-invalid{border-color:var(--warn)}
#cardFieldsSubmit{margin-top:4px}

/* ---------------- Success ---------------- */
.success{background:#effaf4;border:1px solid #bfe6d0;border-radius:var(--radius);padding:22px;text-align:center;display:none;margin-top:20px}
.success h3{font-family:var(--font-display);color:var(--green);font-size:19px;margin-bottom:6px}
.success p{font-size:14.5px}

/* ---------------- Floating "view cart" bar ---------------- */
.cart-fab{display:none;position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:90;background:var(--navy);color:#fff;
    border-radius:14px;padding:12px 26px;font-weight:700;font-size:15px;text-align:center;box-shadow:0 12px 28px rgba(8,32,62,.3);cursor:pointer;
    align-items:center;gap:8px}
.cart-fab.show{display:flex}
.cart-fab:hover{background:var(--accent)}
.cart-fab svg{width:16px;height:16px}
@media(max-width:640px){.cart-fab{bottom:14px;padding:11px 20px;font-size:14px}}

/* ---------------- Footer ---------------- */

/* ---------------- Header currency / language selects ---------------- */
/* ---------------- Store controls in the shared header ----------------
   These sit inside nav_bar()'s .acts block, which the site stylesheet does not
   style, so they keep their own rules. They were briefly lost when the old
   .site-header block was deleted on 4 Sep 2026 — the elements are still
   rendered, only their container changed. */
.btn-outline{border:1.5px solid rgba(255,255,255,.72);color:#fff;padding:10px 18px;border-radius:10px;font-size:15px;font-weight:700;transition:all .15s;white-space:nowrap;display:inline-flex;align-items:center}
.btn-outline:hover{background:#fff;color:var(--navy);border-color:#fff}
.btn-outline svg{flex-shrink:0}
.cart-chip{background:var(--navy);color:#fff;border-radius:24px;padding:10px 18px;font-size:15px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:7px;transition:background .15s;white-space:nowrap}
.cart-chip:hover{background:var(--accent)}
.cart-chip svg{width:17px;height:17px}

.locale-selects{display:flex;gap:6px}
.locale-select{appearance:none;-webkit-appearance:none;border:1.5px solid rgba(255,255,255,.34);border-radius:8px;
    background:rgba(255,255,255,.12);color:#fff;font-size:13px;font-weight:600;padding:7px 24px 7px 10px;cursor:pointer;
    font-family:var(--font-body);
    background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);
    background-position:calc(100% - 14px) 55%,calc(100% - 9px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.locale-select:hover{border-color:#fff}
/* The closed control is white-on-navy, and <option> inherits that colour — so
   the native dropdown was painting white text onto its own white popup and the
   list looked empty. Options are drawn by the OS, not the page, so they need
   their own colours stated. Applied to every select in the store, not just
   these two, so a dark-styled control can never hide its list again. */
select option{color:var(--ink);background:#fff}
select optgroup{color:var(--ink);background:#fff}
@media(max-width:780px){.locale-selects{display:none}}

/* ---------------- Stats / trust banner ---------------- */
.stats-banner{background:var(--navy);color:#fff}
.stats-inner{max-width:1240px;margin:0 auto;padding:20px 24px;display:flex;justify-content:center;gap:48px;flex-wrap:wrap;text-align:center}
.stats-inner .stat{display:flex;flex-direction:column;align-items:center;gap:2px}
.stats-inner .stat b{font-family:var(--font-display);font-size:22px;font-weight:700;color:#fff}
.stats-inner .stat span{font-size:13px;color:#c7d3e3}
.stats-inner .stat .stat-icon{width:24px;height:24px;color:#fff;opacity:.85;margin-bottom:4px}
@media(max-width:640px){
    .stats-inner{padding:16px 16px;gap:22px 28px}
    .stats-inner .stat b{font-size:18px}
    .stats-inner .stat span{font-size:12px}
    .stats-inner .stat .stat-icon{width:20px;height:20px;margin-bottom:2px}
}

/* ---------------- Section titles (compare / FAQ) ---------------- */
.section-title{font-family:var(--font-display);color:var(--navy);font-size:22px;font-weight:700;text-align:center;margin:40px 0 18px;letter-spacing:-.3px}
@media(max-width:640px){.section-title{font-size:18px;margin:28px 0 14px}}

/* ---------------- Standard vs Premium comparison table ---------------- */
/* Comparison and FAQ side by side. Both are short columns; stacked, each left
   the other half of the page empty. align-items:start so the shorter one does
   not stretch, and the section titles lose their 40px top margin because the
   grid gap already provides that space. */
.lower-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px 34px;align-items:start;margin-top:40px}
.lower-grid .section-title{margin-top:0;text-align:left}
.lower-grid .faq-section{margin-top:0}
@media(max-width:900px){
  /* One column below 900px: two would squeeze the comparison table to the point
     of horizontal scrolling. */
  .lower-grid{grid-template-columns:1fr;gap:0;margin-top:0}
  .lower-grid .section-title{margin-top:40px;text-align:center}
}
.compare-section{scroll-margin-top:90px}
.compare-table-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.compare-table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:14.5px;min-width:480px}
.compare-table th{background:var(--surface-2);color:var(--navy);font-family:var(--font-display);font-weight:700;text-align:left;padding:12px 16px;border-bottom:1px solid var(--border)}
.compare-table th:nth-child(2),.compare-table th:nth-child(3),
.compare-table td:nth-child(2),.compare-table td:nth-child(3){text-align:center;width:110px}
.compare-table td{padding:11px 16px;border-bottom:1px solid var(--border);color:#434a56;word-break:break-word}
.compare-table tr:last-child td{border-bottom:none}
.compare-table td.yes,.compare-table td.no{text-align:center;font-weight:700}
.compare-table td.yes{color:var(--green)}
.compare-table td.no{color:#c3c8d0}
.compare-link{display:block;text-align:center;margin-top:14px;color:var(--accent-dark);font-weight:700;font-size:14.5px}
.compare-link:hover{text-decoration:underline}
/* Below 640px the table drops its fixed min-width and shrinks its columns so
   all three fit the viewport without needing horizontal scroll. */
@media(max-width:640px){
    .compare-table{font-size:12.5px;min-width:0}
    .compare-table th,.compare-table td{padding:8px 6px}
    .compare-table th:nth-child(2),.compare-table th:nth-child(3),
    .compare-table td:nth-child(2),.compare-table td:nth-child(3){width:52px}
}

/* ---------------- FAQ ---------------- */
.faq-section{margin-top:8px}
.faq-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 18px;margin-bottom:10px}
.faq-item summary{cursor:pointer;font-weight:700;color:var(--navy);font-size:15.5px;list-style:none;position:relative;padding-right:24px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:0;top:0;font-size:18px;color:var(--accent);font-weight:700}
.faq-item[open] summary::after{content:"\2212"}
.faq-item p{margin-top:10px;font-size:14.5px;color:#434a56;line-height:1.6}
.desk-hours{display:inline-block;margin-top:4px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,#fff 62%,transparent)}