/* ============================================================
   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
   (#C91D26, bright/vivid) as the primary CTA color, Upsdell Red
   (#AE2029, 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{
    --navy:#14355f;            /* primary brand color (logo dark blue) */
    --accent:#c91d26;          /* Crimson Red — primary CTA */

    --navy-2:#1d4a80;
    --navy-deep:#0c2138;        /* footer only */
    --accent-dark:#ae2029;     /* Upsdell Red — hover / pressed state */

    --bg:#f2f3f6;
    --surface:#ffffff;
    --surface-2:#f6f7f9;
    --border:#dedfe4;
    --ink:#1f232a;
    --muted:#6b7280;
    --green:#178a52;
    --warn:#b45309;            /* error / invalid-coupon text — kept distinct from the red brand accent */
    --red:#c0392b;             /* legacy alias, no longer used directly — kept in case older code references it */

    --radius:16px;
    --radius-sm:11px;
    --shadow:0 6px 20px rgba(20,24,32,.08);
    --shadow-lift:0 16px 36px rgba(20,24,32,.15);
    --font-display:"Space Grotesk","Segoe UI",system-ui,sans-serif;
    --font-body:"Inter","Segoe UI",system-ui,sans-serif;
}

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

/* ---------------- Header ---------------- */
.site-header{background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
.header-inner{max-width:1240px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:28px;position:relative}
.header-inner .logo img{height:54px;display:block;flex-shrink:0}
nav.main-nav{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.nav-item{position:relative}
.nav-item > a{display:block;padding:11px 15px;font-size:16px;font-weight:600;color:var(--navy);border-radius:9px;transition:background .15s}
.nav-item > a:hover{background:var(--surface-2)}
.dropdown{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lift);min-width:260px;padding:8px;z-index:101}
.nav-item:hover .dropdown{display:block}
.dropdown a{display:block;padding:10px 12px;font-size:15px;color:var(--ink);border-radius:8px}
.dropdown a:hover{background:var(--surface-2);color:var(--navy)}
.header-cta{margin-left:auto;display:flex;gap:12px;align-items:center;flex-shrink:0}
.btn-outline{border:1.5px solid var(--navy);color:var(--navy);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:var(--navy);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}
.nav-toggle{display:none;background:none;border:1.5px solid var(--border);width:44px;height:44px;align-items:center;justify-content:center;border-radius:9px;cursor:pointer;color:var(--navy);flex-shrink:0}
.nav-toggle svg{width:21px;height:21px}
.nav-toggle:hover{background:var(--surface-2)}

/* ---------------- Mobile nav ---------------- */
@media(max-width:900px){
    .nav-toggle{display:flex}
    nav.main-nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--border);
        flex-direction:column;align-items:stretch;padding:8px;box-shadow:var(--shadow-lift);max-height:75vh;overflow-y:auto}
    nav.main-nav.open{display:flex}
    .nav-item{width:100%}
    .nav-item > a{display:flex;justify-content:space-between;align-items:center;padding:13px 14px;border-radius:9px}
    .dropdown{display:none;position:static;box-shadow:none;border:none;border-radius:0;background:var(--surface-2);
        margin:2px 4px 8px 4px;min-width:0;padding:4px}
    .nav-item.open .dropdown{display:block}
    .nav-item.open > a{background:var(--surface-2)}
}
@media(max-width:640px){
    .header-inner .logo img{height:42px}
}
@media(max-width:420px){
    .btn-outline{padding:8px 12px;font-size:13px}
    .cart-chip{padding:8px 13px;font-size:13px}
    .header-inner{gap:10px;padding:10px 14px}
    .header-inner .logo img{height:36px}
}

/* ---------------- 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(20,53,95,.06) 1px,transparent 1px),
        linear-gradient(90deg,rgba(20,53,95,.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{transform:translateY(-3px);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(20,24,32,.18));transition:transform .25s}
.card:hover .card-media img{transform:translateY(-3px) 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}}

.card .tagline{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.4px;color:var(--muted)}
.card h2{font-family:var(--font-display);font-size:19px;color:var(--navy);letter-spacing:-.2px;margin-top:-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). */
.paylater-msg{margin-top:8px;min-height:0}
.paylater-msg:empty{margin-top:0}
.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(20,24,32,.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 ---------------- */
.site-footer{background:var(--navy-deep);color:#aebfd2;margin-top:0;font-size:14px;position:relative}
.site-footer::before{content:"";display:block;height:3px;background:linear-gradient(90deg,var(--navy-2),var(--accent))}
.footer-inner{max-width:1240px;margin:0 auto;padding:30px 24px 18px}
.footer-links{display:flex;gap:8px 22px;flex-wrap:wrap;justify-content:center;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.12)}
.footer-links a{color:#e6edf5;font-weight:600;transition:color .15s}
.footer-links a:hover{color:var(--accent)}
.footer-offices{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:20px 0;max-width:900px;margin:0 auto}
@media(max-width:700px){.footer-offices{grid-template-columns:1fr}}
.footer-offices h4{font-family:var(--font-display);color:#fff;font-size:14.5px;margin-bottom:6px}
.footer-offices a{color:var(--accent)}
.footer-copy{text-align:center;padding-top:14px;border-top:1px solid rgba(255,255,255,.12);color:#8393a8;font-size:12px}
@media(max-width:640px){.footer-inner{padding:22px 16px 14px}.footer-offices{padding:16px 0}}

/* ---------------- Header currency / language selects ---------------- */
.locale-selects{display:flex;gap:6px}
.locale-select{appearance:none;-webkit-appearance:none;border:1.5px solid var(--border);border-radius:8px;
    background:var(--surface-2);color:var(--navy);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%,var(--navy) 50%),linear-gradient(135deg,var(--navy) 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:var(--accent)}
@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 ---------------- */
.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}