/* ============================================================================
   FleetStack UI  —  faithful rebuild of https://fleetstack-cart.lovable.app/
   Self-contained design system (no Bootstrap/Tailwind dependency).
   Product cards are HORIZONTAL (image left, details right) per requirement.
   All cart.js / proceedToCheckout hook classes are kept in the markup.
   ============================================================================ */

   :root {
    --navy:#0f2440; --navy-2:#0b1d33; --ink:#102540;
    --blue:#2563eb; --blue-deep:#1d4ed8; --blue-tint:#eaf2fb; --blue-tint-2:#f3f8fd;
    --amber:#f59e0b; --amber-tint:#fdecc8; --amber-ink:#7a4f05;
    --green:#16a34a; --green-tint:#e7f6ee;
    --muted:#64748b; --muted-2:#7b889b; --line:#e6ecf4;
    --shadow:0 1px 2px rgba(15,36,64,.04), 0 10px 30px rgba(15,36,64,.07);
    --shadow-sm:0 1px 2px rgba(15,36,64,.05), 0 4px 14px rgba(15,36,64,.05);
  }
  
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0; font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    color:var(--ink); background:#fff; line-height:1.5; -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%; display:block}
  a{color:inherit; text-decoration:none}
  button{font-family:inherit}
  .fs-wrap{max-width:1300px; margin:0 auto; padding:0 24px}
  
  /* ---------- header ---------- */
  .fs-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
    backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--line)}
  .fs-header-in{display:flex; align-items:center; gap:28px; height:64px}
  .fs-logo{display:flex; align-items:center; gap:8px; font-weight:800; font-size:20px; color:var(--navy)}
  .fs-logo .dot{display:grid; place-items:center; width:30px; height:30px; border-radius:9px;
    background:linear-gradient(135deg,var(--blue),var(--blue-deep)); color:#fff}
  .fs-nav{display:flex; gap:26px; margin-left:6px}
  .fs-nav a{color:#33415c; font-weight:500; font-size:15px}
  .fs-nav a:hover{color:var(--blue)}
  .fs-header-cta{margin-left:auto; display:flex; align-items:center; gap:16px}
  .fs-phone{display:flex; align-items:center; gap:7px; color:var(--navy); font-weight:600; font-size:15px}
  @media (max-width:860px){.fs-nav{display:none} .fs-header-in{gap:14px}}
  
  /* ---------- hero ---------- */
  .fs-hero{/*background:linear-gradient(180deg,#f7faff 0%,#fff 70%); */
    background-image: linear-gradient(#eaf2fb 0%, #fff 100%);border-bottom:1px solid var(--line);
    text-align:center; padding:46px 0 36px}
  .fs-eyebrow{display:inline-flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:center;
    font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--blue);
    background:var(--blue-tint); border:1px solid #d8e6f7; padding:7px 14px; border-radius:999px}
  .fs-h1{font-size:52px; line-height:1.05; font-weight:800; letter-spacing:-.02em; color:var(--navy); margin:22px 0 0}
  .fs-h1 .b{color:var(--blue); display:block}
  .fs-sub{max-width:680px; margin:16px auto 0; color:var(--muted); font-size:17px}
  .fs-trust{display:flex; gap:22px; flex-wrap:wrap; justify-content:center; align-items:center;
    margin-top:22px; color:#42526b; font-size:14px; font-weight:500}
  .fs-trust .it{display:inline-flex; align-items:center; gap:7px}
  .fs-trust .it svg{width: calc(.25rem * 4);}
  .fs-trust .star{color:var(--amber)}
  .fs-awards{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:24px}
  .fs-award{display:flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--line);
    border-radius:12px; padding:10px 16px; box-shadow:var(--shadow-sm); font-size:13px}
  .fs-award .t{font-weight:700; color:var(--navy); /*line-height:1.1*/ text-align: left;}
  .fs-award .s{color:var(--muted); font-size:12px;text-align: left;}
  .fs-award .ic{color:var(--amber)}
  @media (max-width:640px){.fs-h1{font-size:34px} .fs-sub{font-size:15px}}
  
  /* ---------- filter tabs ---------- */
  /* full-width sticky bar; inner row stays centered in the wrap, so no 100vw / no horizontal scroll */
  .fs-tabs-bar{position:sticky; top:64px; z-index:40; background:#fff; border-bottom:1px solid var(--line);
    transition:box-shadow .2s}
  .fs-tabs-bar.fs-stuck{box-shadow:0 6px 18px rgba(15,36,64,.08)}
  /* Mobile: keep the products tabs bar STICKY, but make sure the open hamburger
     menu sits ABOVE it. The header has z-index:101, the tabs bar z-index:40, so the
     menu already wins the stacking — we just give the open menu a solid background
     (and explicit stacking) so the pinned buttons are fully hidden behind it. */
  @media (max-width:991.98px){
    .fs-tabs-bar{z-index:0}
    #navbarNav{position:relative; z-index:110; background:#fff}
    /* The shared navbar's Bootstrap dropdown sub-menus render absolutely-positioned and
       overlap when expanded on mobile; stack them inline instead (scoped to this page). */
    #navbarNav .navbar-nav{width:100%; align-items:stretch !important; gap:0 !important; list-style:none; padding-left:0; margin-bottom:0}
    #navbarNav .nav-item{width:100%; text-align:center; list-style:none}
    #navbarNav .dropdown-menu{position:static !important; display:block; float:none; width:100%;
      border:none; box-shadow:none; margin:0; padding:0 0 6px; background:transparent; list-style:none}
    #navbarNav .dropdown-menu li{list-style:none}
    #navbarNav .dropdown-menu .dropdown-item{padding:8px 0}
  }
  .fs-tabs-row{display:flex; align-items:center; gap:14px; padding:14px 24px}
  .fs-tabs{display:flex; gap:10px; flex-wrap:wrap; overflow-x:auto; min-width:0}
  .fs-tab{border:1px solid transparent; background:var(--blue-tint); color:var(--navy); font-weight:600;
    font-size:14px; padding:9px 18px; border-radius:999px; cursor:pointer; white-space:nowrap; transition:.15s}
  .fs-tab:hover{background:#dfeafb}
  .fs-tab.active{background:var(--navy); color:#fff}
  .fs-count{margin-left:auto; color:var(--muted); font-size:14px; white-space:nowrap}
  @media (max-width:640px){.fs-count{display:none}}
  
  /* ---------- main layout ---------- */
  .fs-main{display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:30px; padding:28px 0 60px; align-items:stretch}
  /* aside stretches to the full height of the product column so the summary card
     can stay sticky the whole way down until the products end */
  .fs-main > aside{align-self:stretch}
  @media (max-width:1024px){.fs-main{grid-template-columns:1fr} .fs-main > aside{align-self:start}}
  
  /* section divider label */
  .fs-divider{display:flex; align-items:center; gap:16px; margin:14px 0 18px}
  .fs-divider .lab{display:inline-flex; align-items:center; gap:8px; background:var(--navy); color:#fff;
    font-size:12px; font-weight:700; letter-spacing:.06em; padding:7px 14px; border-radius:999px}
  .fs-divider .ln{flex:1; height:1px; background:var(--line)}
  
  /* ---------- horizontal product card ---------- */
  .fs-card{display:flex; gap:24px; background:#fff; border:1px solid var(--line); border-radius:20px;
    padding:20px; box-shadow:var(--shadow); margin-bottom:22px; transition:border-color .18s, box-shadow .18s}
  .fs-card:hover{border-color:rgba(37,99,235,.4); box-shadow:0 4px 12px rgba(15,36,64,.07),0 18px 44px rgba(15,36,64,.10)}
  /* LEFT column = product identity (image + name) */
  .fs-card-media{flex:0 0 290px; max-width:290px; display:flex; flex-direction:column}
  .fs-media-img{position:relative; background:var(--blue-tint-2); border:1px solid var(--line);
    border-radius:16px; min-height:210px; display:grid; place-items:center; padding:18px}
  /* .fs-media-img.navy{background:linear-gradient(160deg,#11294a 0%,#0b1d33 100%); border-color:#11294a} */
  .fs-media-img img{width:100%; height:auto; max-height:190px; object-fit:contain}
  .fs-award-pill{position:absolute; top:5px; left:12px; display:inline-flex; align-items:center; gap:6px;
    background:linear-gradient(135deg,#fbbf24,#f59e0b); color:#5a3c05; font-size:12px; font-weight:700;
    padding:5px 11px; border-radius:999px; box-shadow:0 2px 6px rgba(245,158,11,.35)}
  .fs-media-cap{text-align:left; padding:14px 4px 2px}
  .fs-media-cap h3{font-size:20px; font-weight:800; color:var(--navy); margin:10px 0 6px; letter-spacing:-.01em}
  .fs-media-cap .fs-rating{justify-content:flex-start;margin-top: 15px;}
  .fs-media-cap .fs-free{margin-top:10px}
  .fs-card-body{flex:1; min-width:0; display:flex; flex-direction:column}
  .fs-card-body h5 {
    margin: 4px 0;
    font-size: 14px;
  }
  .fs-subhead {
    margin: 6px 0;
      font-weight: 600;
      font-size: 14px;
  }
  .fs-cats{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-start}
  .fs-cat{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.05em; color:var(--blue);
    background:var(--blue-tint); border:1px solid #d8e6f7; padding:5px 11px; border-radius:999px; text-transform:uppercase}
  .fs-free{display:inline-flex; align-items:center; gap:7px; background:var(--green-tint); color:var(--green);
    font-weight:700; font-size:13px; padding:7px 12px; border-radius:10px; margin-top:10px}
  .fs-card h3{font-size:23px; font-weight:800; color:var(--navy); margin:0 0 0px; letter-spacing:-.01em}
  .fs-rating{display:flex; align-items:center; gap:7px; font-size:13px; color:var(--muted)}
  .fs-rating .stars{color:var(--amber); letter-spacing:1px}
  .fs-rating b{color:var(--navy)}
  .fs-desc{color:var(--muted); font-size:14.5px; margin:6px 0 0; max-width:620px}
  .fs-specs{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
  .fs-chip{display:inline-flex; align-items:center; gap:6px; background:var(--blue-tint); color:#3a4a63;
    font-size:12.5px; font-weight:600; padding:6px 11px; border-radius:9px}
  .fs-chip .ic{color:var(--blue)}
  
  /* price box (non-eld) */
  .fs-pricebox{display:flex; gap:14px; background:var(--blue-tint-2); border:1px solid var(--line);
    border-radius:14px; padding:14px 16px; margin-top:16px; max-width:520px}
  .fs-pricebox .col{flex:1}
  .fs-pricebox .col + .col{border-left:1px solid var(--line); padding-left:16px}
  .fs-pl{font-size:12.5px; color:var(--muted); font-weight:600}
  .fs-pv{font-size:24px; font-weight:800; color:var(--navy); line-height:1.1; margin-top:2px}
  .fs-pu{font-size:12px; color:var(--muted-2); font-weight:600; margin-left:2px}
  .fs-incl{font-size:13px; color:var(--green); font-weight:700; margin-top:6px}
  
  /* eld plan selector (reuses .plan-card hooks) */
  .fs-plans-head{display:flex; justify-content:space-between; align-items:center; background:var(--blue-tint-2);
    border:1px solid var(--line); border-bottom:none; border-radius:14px 14px 0 0; padding:12px 16px; margin-top:16px}
  .fs-plans-head .h{font-weight:700; color:var(--navy)}
  .fs-plans-head .f{font-weight:800; color:var(--green); font-size:15px; text-align:right; line-height:1.1}
  .fs-plans-head .f small{display:block; font-size:11px; color:var(--muted); font-weight:600}
  .fs-plans{display:flex; flex-direction:column; gap:10px; background:var(--blue-tint-2); border:1px solid var(--line);
    border-top:none; border-radius:0 0 14px 14px; padding:14px 16px; max-width:520px}
  .plan-card{display:flex; align-items:center; gap:12px; background:#fff; border:1.5px solid var(--line);
    border-radius:12px; padding:12px 14px; cursor:pointer; transition:.15s; position:relative}
  .plan-card:hover{border-color:#bcd2f3}
  .plan-card-active{border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.16); background:#fff}
  .plan-card-radio{flex:0 0 auto; width:20px; height:20px; border-radius:50%; border:2px solid #c4d3e6; display:inline-block}
  .plan-card-check{flex:0 0 auto; width:20px; height:20px; border-radius:50%; display:inline-grid; place-items:center;
    background:var(--blue)}
  .plan-card-check svg{width:13px; height:13px}
  .plan-card-check svg path{fill:#fff}
  .plan-name{font-weight:700; color:var(--navy)}
  .plan-pop{display:inline-flex; align-items:center; gap:4px; background:var(--amber-tint); color:var(--amber-ink);
    font-size:10.5px; font-weight:800; letter-spacing:.04em; padding:3px 8px; border-radius:999px; margin-left:8px}
  .plan-card-price{margin-left:auto; font-weight:800; color:var(--navy); font-size:16px; white-space:nowrap}
  .plan-card-price small{color:var(--muted); font-weight:600; font-size:12px}
  .plan-card ul{display:none}  /* feature lists hidden in compact selector */
  
  /* quantity + line total */
  .fs-qtyrow{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:18px}
  .fs-qty-label{font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--muted); text-transform:uppercase}
  .quantity-box{display:inline-flex; align-items:center; border:1.5px solid var(--line); border-radius:12px; overflow:hidden; background:#fff}
  .qty-btn{width:42px; height:42px; border:none; background:#fff; color:var(--blue); font-size:20px; font-weight:600; cursor:pointer; transition:.12s}
  .qty-btn:hover{background:var(--blue-tint)}
  .qty-value,.qty-value-maa,.qty-value-vt,.qty-value-dashcam-eld,.qty-value-dashcam{
    min-width:46px; text-align:center; font-size:16px; font-weight:800; color:var(--navy)}
  .fs-line-total{display:flex; align-items:baseline; gap:6px; margin-left:auto}
  .price-main,.price-main-maa,.price-main-vt,.price-main-dashcam,.price-main-dashcam-eld{
    font-size:22px; font-weight:800; color:var(--blue)}
  .price-main::before,.price-main-maa::before,.price-main-vt::before,
  .price-main-dashcam::before,.price-main-dashcam-eld::before{content:"$"}
  .price-detail,.price-details-maa,.price-details-vt,.price-details-dashcam,.price-details-dashcam-eld{
    font-size:12px; color:var(--muted-2); font-weight:600}
  
  @media (max-width:620px){
    .fs-card{flex-direction:column; gap:16px}
    .fs-card-media{flex-basis:auto; max-width:none; width:100%}
    .plan-card, .fs-media-img {position: initial;}
  }
  
  /* card action buttons (Add to Cart + View Full Details) */
  .fs-actions{margin-top:auto; padding-top:18px}
  .fs-addcart{display:flex; align-items:center; justify-content:center; gap:9px; width:100%; border:none; cursor:pointer;
    background:linear-gradient(135deg,#16386e 0%,#2563eb 100%); color:#fff; font-weight:800; font-size:15.5px;
    padding:14px 18px; border-radius:13px; box-shadow:0 6px 16px rgba(37,99,235,.26); transition:.15s}
  .fs-addcart:hover{filter:brightness(1.07)}
  .fs-addcart.added{background:linear-gradient(135deg,#0f7a3d 0%,#16a34a 100%); box-shadow:0 6px 16px rgba(22,163,74,.28)}
  .fs-details{display:block; width:100%; text-align:center; margin-top:12px; background:none; border:none;
    color:var(--blue); font-weight:700; font-size:14px; cursor:pointer}
  .fs-details:hover{text-decoration:underline}
  
  /* order-summary line thumbnails */
  .cart-table > div{align-items:center}
  .fs-line-img{width:45px; height:45px; flex:0 0 36px; border-radius:8px; object-fit:contain;
    background:var(--blue-tint-2); border:1px solid var(--line); padding:3px}
  .fs-line-name{flex:1; min-width:0}
  .fs-line-price{white-space:nowrap}
  
  /* product details modal */
  .fs-pmodal{position:fixed; inset:0; background:rgba(15,36,64,.55); display:flex; align-items:center;
    justify-content:center; z-index:1200; padding:20px}
  .fs-pmodal.hidden{display:none}
  .fs-pmodal-card{background:#fff; border-radius:18px; max-width:760px; width:100%; max-height:90vh; overflow:auto;
    position:relative; box-shadow:var(--shadow); padding:26px}
  .fs-pmodal-close{position:absolute; top:12px; right:16px; border:none; background:none; font-size:28px; color:var(--muted); cursor:pointer; line-height:1}
  .fs-pmodal-grid{display:grid; grid-template-columns:260px 1fr; gap:24px}
  @media (max-width:640px){.fs-pmodal-grid{grid-template-columns:1fr}}
  .fs-pmodal-media{background:var(--blue-tint-2); border:1px solid var(--line); border-radius:14px;
    display:grid; place-items:center; padding:18px; min-height:200px}
  .fs-pmodal-media img{max-width:100%; max-height:210px; object-fit:contain}
  .fs-pmodal-body h3{font-size:24px; font-weight:800; color:var(--navy); margin:10px 0 8px}
  .fs-pmodal-body > p{color:var(--muted); font-size:14.5px; line-height:1.6}
  .fs-pmodal-body .fs-pricewrap{margin:14px 0}
  .fs-pmodal-body .fs-addcart{margin-top:8px}
  
  /* ---------- order summary sidebar ---------- */
  .fs-summary{position:sticky; top:140px; background:#fff; border:1px solid var(--line); border-radius:20px;
    box-shadow:var(--shadow); padding:22px}
  .fs-sum-head{display:flex; align-items:center; gap:10px; font-weight:800; color:var(--navy); font-size:17px;
    padding-bottom:14px; border-bottom:1px solid var(--line)}
  .fs-sum-head .ic{display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--blue-tint); color:var(--blue)}
  .fs-empty{text-align:center; padding:26px 8px}
  .fs-empty .ic{display:grid; place-items:center; width:54px; height:54px; border-radius:50%; background:var(--blue-tint-2);
    color:#9fb2cc; margin:0 auto 12px}
  .fs-empty .t{color:var(--navy); font-weight:600}
  .fs-empty .s{color:var(--muted); font-size:13px; margin-top:4px}
  .cart-table{padding:16px 0 4px}
  .cart-table > div{display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:13.5px;
    color:var(--ink); padding:7px 0}
  .cart-table > div > span:first-child{color:var(--navy); font-weight:600}
  .cart-table > div .text-muted{color:var(--muted-2); font-weight:500}
  .cart-table > div .fs-line-price,
  .cart-table > div > span:last-child{font-weight:700; color:var(--navy); white-space:nowrap}
  /* per-line quantity / remove controls in the order summary */
  .fs-line-ctl{flex:0 0 100%; display:flex; justify-content:flex-end; align-items:center; gap:7px; margin-top:2px}
  .fs-line-ctl .fs-qtybtn{width:24px; height:24px; border:1px solid var(--line); background:#fff; border-radius:7px;
    color:var(--navy); font-weight:700; font-size:15px; line-height:1; cursor:pointer; display:grid; place-items:center; transition:.12s}
  .fs-line-ctl .fs-qtybtn:hover{background:var(--blue-tint); border-color:#cfe0f5}
  .fs-line-ctl .fs-line-rm{border:none; background:none; color:var(--muted); font-size:12px; cursor:pointer;
    padding:2px 4px; margin-left:4px}
  .fs-line-ctl .fs-line-rm:hover{color:#dc2626; text-decoration:underline}
  .fs-totline{display:flex; justify-content:space-between; font-size:14px; color:var(--muted); padding:6px 0}
  .fs-totline b{color:var(--navy)}
  .fs-totline.green b{color:var(--green)}
  .fs-sum-rule{height:1px; background:var(--line); margin:12px 0}
  .fs-due{display:flex; justify-content:space-between; align-items:baseline; margin:6px 0 16px}
  .fs-due .l{font-size:12px; font-weight:800; letter-spacing:.07em; color:var(--navy); text-transform:uppercase}
  .fs-due .v{font-size:30px; font-weight:800; color:var(--navy)}
  .checkout-btn,.fs-checkout{display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
    border:none; cursor:pointer; background:linear-gradient(135deg,var(--blue),var(--blue-deep)); color:#fff;
    font-weight:700; font-size:16px; padding:15px 18px; border-radius:13px; box-shadow:0 6px 16px rgba(37,99,235,.30); transition:.15s}
  .checkout-btn:hover,.fs-checkout:hover{background:linear-gradient(135deg,var(--blue-deep),#1740b8)}
  .fs-checklist{list-style:none; margin:16px 0 0; padding:0; display:grid; gap:9px}
  .fs-checklist li{display:flex; align-items:center; gap:9px; font-size:13.5px; color:#3a4a63}
  .fs-checklist .ck{color:var(--green)}
  
  /* ---------- lower sections ---------- */
  .fs-section{padding:54px 0; border-top:1px solid var(--line)}
  .fs-sec-title{font-size:32px; font-weight:800; color:var(--navy); letter-spacing:-.01em; text-align:center}
  .fs-sec-sub{text-align:center; color:var(--muted); margin-top:8px; font-size:16px}
  
  /* comparison-table section sits on a light-blue band (matches reference) */
  .fs-compare-section{background:linear-gradient(180deg,#eef5fc 0%,#e5eff9 100%); border-top:none}
  
  /* FAQ — two-column accordion */
  .fs-faq{max-width:980px; margin:30px auto 0; display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start}
  @media (max-width:760px){.fs-faq{grid-template-columns:1fr}}
  .fs-faq details{border:1px solid var(--line); border-radius:14px; padding:0 18px; background:#f8fafc; box-shadow:var(--shadow-sm)}
  .fs-faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center;
    gap:12px; padding:16px 0; font-weight:700; color:var(--navy); font-size:14.5px}
  .fs-faq summary::-webkit-details-marker{display:none}
  .fs-faq summary .pl{color:var(--blue); font-size:22px; line-height:1; transition:.2s}
  .fs-faq details[open] summary .pl{transform:rotate(45deg)}
  .fs-faq p{margin:0 0 16px; color:var(--muted); font-size:14px; line-height:1.6}
  
  /* ---------- dark (navy) band: bundle + stats + reviews + final CTA ---------- */
  .fs-dark{background:linear-gradient(135deg,#0f2a44 0%,#163759 100%); color:#dbe6f4; padding:58px 0}
  .fs-dark-title{font-size:34px; font-weight:800; color:#fff; letter-spacing:-.01em; line-height:1.12; margin:0}
  .fs-dark-sub{color:#9fb2cc; font-size:16px; margin-top:12px; line-height:1.55}
  .fs-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center}
  @media (max-width:760px){.fs-stats{grid-template-columns:repeat(2,1fr); gap:20px}}
  .fs-stat .n{font-size:30px; font-weight:800; color:#fff}
  .fs-stat .l{font-size:13px; color:#94a7c2; margin-top:4px}
  
  /* ---------- BUNDLE & SAVE section (amber gradient band, navy content) ---------- */
  .fs-amber{background:linear-gradient(135deg,#fde68a 0%,#f59e0b 100%); padding:58px 0}
  .fs-amber .fs-dark-title{color:#0f2a44}
  .fs-amber .fs-dark-sub{color:#5b4708}
  .fs-bundle-eyebrow{display:inline-block; font-weight:800; letter-spacing:.1em; text-transform:uppercase; font-size:12px;
    color:#fff; background:rgba(15,42,68,.92); padding:7px 14px; border-radius:999px; margin:0 0 18px}
  .fs-bundle-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:40px; align-items:center}
  @media (max-width:880px){.fs-bundle-grid{grid-template-columns:1fr; gap:28px}}
  .fs-bundle-list{list-style:none; margin:20px 0 0; padding:0; display:grid; gap:13px}
  .fs-bundle-list li{display:flex; align-items:flex-start; gap:11px; font-size:15.5px; color:#26323f; line-height:1.5; font-weight:500}
  .fs-bundle-list .ck{flex:0 0 auto; color:#0f2a44; font-weight:800; font-size:18px; line-height:1.3}
  .fs-bundle-cta{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:26px}
  .fs-btn-navy{display:inline-flex; align-items:center; gap:8px; background:#0f2a44; color:#fff;
    font-weight:700; font-size:15px; padding:14px 24px; border-radius:12px; box-shadow:0 8px 18px rgba(15,42,68,.3)}
  .fs-btn-navy:hover{background:#0a1e33}
  .fs-cta-note{color:#9fb2cc; font-size:13px}
  .fs-cta-note a{color:#cdd8e6; font-weight:600}
  .fs-amber .fs-cta-note{color:#5b4708}
  .fs-amber .fs-cta-note a{color:#0f2a44; font-weight:700}
  .fs-bundle-imgs{display:flex; gap:18px; justify-content:center; align-items:stretch; flex-wrap:wrap; margin:0}
  .fs-bundle-imgs figure{margin:0; text-align:center; background:#fff; border-radius:16px; padding:18px 16px; box-shadow:0 14px 30px rgba(0,0,0,.18);width: 30%;}
  .fs-bundle-imgs img{height:78px; width:100%; object-fit:contain}
  .fs-bundle-imgs figcaption{margin-top:8px; font-size:12px; font-weight:700; color:var(--navy)}
  
  /* ---------- comparison table ---------- */
  .fs-compare-wrap{margin-top:26px; overflow-x:auto; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-sm)}
  .fs-compare{border-collapse:collapse; width:100%; min-width:920px; font-size:13.5px; background:#fff}
  .fs-compare th,.fs-compare td{padding:12px 12px; text-align:center; border-bottom:1px solid var(--line); white-space:nowrap}
  .fs-compare thead th{position:sticky; top:0; background:var(--navy); color:#fff; font-weight:700; font-size:12.5px;
    letter-spacing:.01em; z-index:2}
  .fs-compare thead th:first-child{text-align:left; background:var(--navy-2)}
  .fs-compare tbody th{text-align:left; font-weight:700; color:var(--navy); background:var(--blue-tint-2);
    position:sticky; left:0; z-index:1; white-space:nowrap}
  .fs-compare tbody tr:nth-child(even) td{background:#fbfdff}
  .fs-compare tbody tr:hover td{background:var(--blue-tint)}
  .fs-compare .yes{color:var(--green); font-weight:800}
  .fs-compare .no{color:#c2ccd9}
  .fs-compare .val{color:var(--navy); font-weight:600}
  .fs-compare .prem{color:var(--amber-ink); background:var(--amber-tint); border-radius:999px; padding:2px 9px; font-weight:700; font-size:11.5px}
  .fs-compare .free{color:var(--green); font-weight:800}
  
  /* ---------- testimonials (inside .fs-dark) ---------- */
  .fs-reviews{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:34px}
  @media (max-width:880px){.fs-reviews{grid-template-columns:1fr}}
  .fs-review{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:22px;
    display:flex; flex-direction:column; gap:12px}
  .fs-review .stars{color:var(--amber); font-size:15px; letter-spacing:1px}
  .fs-review .quote{color:#e3ecf7; font-size:15px; line-height:1.55; flex:1}
  .fs-review .who{display:flex; align-items:center; gap:11px}
  .fs-review .av{flex:0 0 auto; width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
    font-weight:800; color:#fff; background:linear-gradient(135deg,var(--blue),var(--blue-deep))}
  .fs-review .nm{font-weight:700; color:#fff; font-size:14.5px}
  .fs-review .ro{color:#94a7c2; font-size:12.5px}
  .fs-review .badge{display:inline-flex; align-items:center; gap:6px; align-self:flex-start; font-size:11px; font-weight:700;
    letter-spacing:.04em; color:var(--amber); background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.3); border-radius:999px; padding:5px 11px}
  
  /* ---------- final CTA (inside .fs-dark) ---------- */
  .fs-cta-title .g1{color:var(--blue)} .fs-cta-title .g2{color:var(--amber)}
  .fs-cta-btns{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:24px}
  .fs-cta-btns .fs-checkout{width:auto}
  .fs-btn-outline{display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.06); color:#fff;
    border:1px solid rgba(255,255,255,.22); font-weight:700; font-size:15px; padding:14px 22px; border-radius:12px}
  .fs-btn-outline:hover{background:rgba(255,255,255,.12)}
  .fs-cta-contact{margin-top:22px; color:#cdd8e6; font-size:14px}
  .fs-cta-hours{color:#7e92ad; font-size:13px; margin-top:4px}
  
  /* ---------- footer (navy, 4 columns) ---------- */
  .fs-footer{background:#0b1d33; color:#aebdd1; padding:46px 0 28px}
  .fs-foot-top{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
    padding-bottom:26px; border-bottom:1px solid rgba(255,255,255,.1)}
  .fs-footer .fs-logo{color:#fff}
  .fs-foot-ratings{display:flex; gap:18px; flex-wrap:wrap; color:#cdd8e6; font-size:13.5px}
  .fs-foot-ratings .st{color:var(--amber)}
  .fs-foot-cols{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding:28px 0}
  @media (max-width:760px){.fs-foot-cols{grid-template-columns:repeat(2,1fr)}}
  .fs-foot-col h4{margin:0 0 12px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#7e92ad}
  .fs-foot-col a{display:block; color:#aebdd1; font-size:14px; padding:5px 0} .fs-foot-col a:hover{color:#fff}
  .fs-foot-copy{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.1);
    padding-top:20px; color:#7e92ad; font-size:13px; line-height:1.6}
  
  /* ---------- thank-you modal (kept) ---------- */
  .modal-overlay{position:fixed; inset:0; background:rgba(15,36,64,.55); display:flex; align-items:center;
    justify-content:center; z-index:1000; padding:20px}
  .modal-overlay.hidden{display:none}
  .modal-custom{background:#fff; border-radius:18px; max-width:440px; width:100%; padding:28px; position:relative; box-shadow:var(--shadow)}
  .modal-custom .close-button{position:absolute; top:14px; right:16px; border:none; background:none; font-size:26px; color:var(--muted); cursor:pointer}
  .modal-title-custom{font-size:22px; font-weight:800; color:var(--navy); margin:0 0 10px}
  .modal-text-custom{color:var(--muted); margin:0 0 20px}
  .back-home-button{background:linear-gradient(135deg,var(--blue),var(--blue-deep)); color:#fff; border:none;
    padding:12px 20px; border-radius:11px; font-weight:700; cursor:pointer}
  
  /* ---------- mobile floating cart + slide-in drawer ---------- */
  /* Floating cart button (bottom-left) — hidden on desktop, shown on mobile */
  .fs-cart-fab{display:none; position:fixed; right:18px; bottom:18px; z-index:1100;
    width:75px; height:75px; border-radius:50%; border:none; cursor:pointer;
    align-items:center; justify-content:center; color:#fff;
    background:linear-gradient(135deg,var(--blue),var(--blue-deep));
    box-shadow:0 10px 24px rgba(37,99,235,.40)}
  .fs-cart-fab:active{transform:scale(.94)}
  .fs-fab-count{position:absolute; top:-4px; right:-4px; min-width:22px; height:22px; padding:0 5px;
    border-radius:11px; background:var(--amber,#F2A618); color:#1f2937; font-size:12px; font-weight:800;
    display:none; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.2)}
  /* backdrop + drawer close button (only active on mobile) */
  .fs-cart-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:1099;
    opacity:0; visibility:hidden; transition:opacity .28s ease, visibility .28s ease}
  .fs-drawer-close{display:none}
  
  @media (max-width:1024px){
    .fs-cart-fab{display:flex}
    /* turn the order-summary card into a left slide-in drawer */
    .fs-main > aside{align-self:start}
    .fs-summary{position:fixed; top:0; right:0; bottom:0; margin:0; z-index:1101;
      width:90%; max-width:380px; height:100%; height:100dvh; overflow-y:auto;
      border-radius:18px 0 0 18px; box-shadow:0 0 40px rgba(0,0,0,.28);
      transform:translateX(105%); transition:transform .28s ease}
    body.fs-cart-open .fs-summary{transform:translateX(0)}
    body.fs-cart-open .fs-cart-backdrop{opacity:1; visibility:visible}
    body.fs-cart-open{overflow:hidden}
    .fs-drawer-close{display:grid; place-items:center; position:absolute; top:14px; left:14px;
      width:34px; height:34px; border:none; background:#f1f5fa; color:var(--navy);
      border-radius:50%; font-size:22px; line-height:1; cursor:pointer; z-index:2}
  }
  
  
  
  
  
  
  .site-footer {
    max-width: 1220px;
    margin: 0 auto;
  }