/* Prima Diagnostics — mobile web app. White background, red theme. */
:root{
  /* Rule: no off-white / light-red fills; icons never on a background. */
  --primary:#D32F2F; --primary-dark:#9E1B1B;
  --text:#0F1B2D; --muted:#65758B; --border:#E5EAF1;
  --green:#19B36B; --star:#F6A609; --card:#FFFFFF;
  --shadow:0 4px 12px rgba(11,33,56,.06);
  --nav-h:72px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Manrope',system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--text); background:var(--card); -webkit-font-smoothing:antialiased;
  font-size:14px; line-height:1.4;
}
a{color:var(--text); text-decoration:none}
img{max-width:100%}
.ic{display:block}

/* The app always fills the window. It used to be a 430px "phone card" floating
   on a grey background below 600px, which left dead gutters on a 500–600px
   window; the phone layout now just stretches, and 600px+ switches to the
   tablet/desktop layout with centered reading columns applied per-section. */
.app{
  position:relative; width:100%; margin:0 auto;
  background:var(--card); min-height:100vh;
}
body.has-nav .app{padding-bottom:var(--nav-h)}
@media(min-width:600px){ body.has-nav .app{padding-bottom:0} }

/* Centered reading column for content sections once the shell is full-width.
   Header/hero/footer backgrounds stay full-bleed; this only caps what's
   inside them so rows of cards don't stretch edge-to-edge on wide screens. */
@media(min-width:1280px){
  .header-inner,.promo,.sec-head,.symrail,.hscroll,.scan-grid,.why-grid,.grid-3,
  .px,.listing-shell,.test-list,.cart-shell,#coBody,.team-grid,.pillar-grid,.cert-grid,
  .contact-grid,.perk-grid,.centre-directory,.legal,.info-sec,.detail{
    max-width:1280px; margin-left:auto; margin-right:auto;
  }
}

/* ---- desktop/tablet visibility helpers ----
   .dweb-only elements each carry a component class (.searchbar, .icon-btn,
   .chips) that also sets `display` unconditionally further down this file.
   A bare `.dweb-only{display:none}` has the SAME specificity as those rules,
   so whichever is declared later in the file would win the mobile cascade —
   which silently un-hid the desktop search bar and cart icon on phones.
   Redeclaring the hide rule per combined selector (2 classes) always beats
   the 1-class component rule regardless of source order. */
.dweb-nav{display:none}
.dweb-only{display:none}
.searchbar.dweb-only{display:none}
.icon-btn.dweb-only{display:none}
.chips.dweb-only{display:none}
.mobile-only{display:inline-flex}
@media(min-width:600px){
  .mobile-only{display:none !important}
  .dweb-nav{display:flex;align-items:center;gap:22px;font-size:13.5px;font-weight:700;color:var(--muted)}
  .dweb-nav a.on{color:var(--text)}
  .searchbar.dweb-only{display:flex}
  .icon-btn.dweb-only{display:inline-flex}
  .chips.dweb-only{display:flex}
  .listing-side-title.dweb-only{display:block}
}

/* ---- generic bits ---- */
.px{padding-left:20px; padding-right:20px}
.row{display:flex; align-items:center}
.between{display:flex; align-items:center; justify-content:space-between}
.grow{flex-grow:1}
.muted{color:var(--muted)}
.strike{color:var(--muted); text-decoration:line-through}
.price{color:var(--text); font-weight:800}
.sec-head{display:flex; align-items:center; justify-content:space-between; padding:18px 20px 12px}
.sec-title{font-size:16px; font-weight:800}
.link-all{font-size:12px; font-weight:700; color:var(--text)}
.divider{height:1px; background:var(--border)}
.strut{width:20px}

/* ---- sticky app header (logo + centre + reports + search) ---- */
.app-header-sticky{position:sticky; top:0; z-index:15; background:#fff; border-bottom:1px solid transparent;
  padding-bottom:8px}
.app-header-sticky.scrolled{border-bottom-color:var(--border); box-shadow:0 2px 10px rgba(11,33,56,.05)}
.header-inner{width:100%}
@media(min-width:600px){ .header-inner{padding:0 28px} }

/* ---- header ---- */
.appbar{display:flex; align-items:center; justify-content:space-between; padding:18px 20px 10px}
@media(min-width:600px){ .appbar{padding:20px 0 12px; gap:24px} }
.brand{display:flex; align-items:center; gap:10px; flex-shrink:0}
/* Desktop inline search (sits in the header row, next to the nav). The
   tap-to-search bar below the header is mobile-only — see .mobile-searchbar. */
.searchbar.dweb-searchbar{flex:1; max-width:360px; height:40px; margin:0}
@media(min-width:600px){ .searchbar.mobile-searchbar{display:none} }
.brand-logo{display:block;height:38px;width:auto}
.icon-btn{position:relative;width:40px;height:40px;border-radius:999px;background:#fff;border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center}
/* Labelled pills at every width — on phones only Reports is in the header
   (the cart button is .dweb-only), so there is room for it. */
.icon-btn{width:auto;padding:0 13px;gap:7px}
.icon-btn-lbl{font-size:13px;font-weight:800;color:var(--text);white-space:nowrap}
/* Round icons again where the row genuinely has no room: very narrow phones,
   and 768–1023px where the top nav appears but the window is still small
   (measured: with both labels the nav is squeezed to min-content and wraps). */
@media(max-width:379px),(min-width:768px) and (max-width:1023px){
  .icon-btn{width:40px;padding:0}
  .icon-btn-lbl{display:none}
}
.centre-pill{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border);border-radius:999px;
  padding:8px 11px;background:#fff;cursor:pointer;font:inherit}
.centre-pill-txt{min-width:0}
.centre-pill-lbl{font-size:11.5px;font-weight:800;color:var(--text);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;display:block;max-width:92px}
.centre-group-label{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.centre-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.centre-mini{display:flex;align-items:center;gap:6px;border:1.5px solid var(--border);border-radius:12px;
  padding:11px 12px;background:#fff;cursor:pointer;font:inherit;font-size:12.5px;font-weight:800;color:var(--text)}
.centre-mini.on{border-color:var(--primary)}
.centre-mini span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- search field ---- */
.searchbar{margin:8px 20px 0; display:flex; align-items:center; gap:10px; height:48px;
  border-radius:14px; background:#fff; border:1px solid var(--border); padding:0 14px}
.searchbar.active{background:#fff; border:1.5px solid var(--primary)}
.searchbar input{border:0; outline:0; background:transparent; flex-grow:1; font:inherit;
  font-size:13.5px; font-weight:600; color:var(--text)}
.searchbar input::placeholder{color:var(--muted); font-weight:500}
.searchbar .ph{font-size:13.5px; color:var(--muted); font-weight:500}

/* ---- hero promo banner (single full-bleed slide, original size) ---- */
.promo{margin:14px 20px 0}
.promo-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.promo-track::-webkit-scrollbar{display:none}
.promo-slide{flex:0 0 100%;scroll-snap-align:start;border-radius:16px;overflow:hidden;
  aspect-ratio:12/5;background:transparent;display:block}
.promo-slide img{width:100%;height:100%;object-fit:cover;display:block}
@media(min-width:600px){
  .promo-track{gap:16px}
  .promo-slide{flex:0 0 calc((100% - 16px) / 2)}
}

/* ---- package-offers carousel (separate section, own sizing) ----
   2 slides fully visible + a 10% peek of the 3rd, at every breakpoint:
   width math for slide s, gap g, container 100% -> 2s + 0.1s + 2g = 100%
   -> s = (100% - 2g) / 2.1. Portrait package-banner cards (450x550 source). */
.pkg-promo-slide{flex:0 0 calc((100% - 24px) / 2.1);scroll-snap-align:start;border-radius:16px;overflow:hidden;
  aspect-ratio:9/11;background:transparent;display:block}
.pkg-promo-slide img{width:100%;height:100%;object-fit:cover;display:block}
#pkgPromoTrack.promo-track{gap:12px}
/* Tablet/desktop: more room, so more cards fit — same "N full + 10% peek"
   pattern, just a higher N so cards stay a sensible reading size instead of
   the phone's 2-up getting stretched wide. */
@media(min-width:600px){
  #pkgPromoTrack.promo-track{gap:16px}
  .pkg-promo-slide{flex:0 0 calc((100% - 48px) / 3.1)}
}
@media(min-width:1280px){
  #pkgPromoTrack.promo-track{gap:20px}
  .pkg-promo-slide{flex:0 0 calc((100% - 80px) / 4.1)}
}

/* legacy small banner (used on symptom page) */
.banner{margin:14px 20px 0; display:flex; align-items:center; gap:12px;
  background:linear-gradient(100deg,var(--primary),var(--primary-dark));
  border-radius:16px; padding:14px 16px; color:#fff}
.banner-ic{width:40px;height:40px;border-radius:12px;background:transparent;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.banner h3{margin:0;font-size:14px;font-weight:700}
.banner p{margin:2px 0 0;font-size:11.5px;color:rgba(255,255,255,.85);font-weight:500}

/* ---- grids ---- */
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:0 20px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:14px 20px 0}

/* symptom tile */
.sym{display:flex;flex-direction:column;align-items:center;gap:7px;background:#fff;
  border:1px solid var(--border);border-radius:14px;padding:10px 4px}
.sym-ic{width:40px;height:40px;border-radius:999px;background:transparent;
  display:flex;align-items:center;justify-content:center}
.sym-lbl{font-size:11px;font-weight:700;text-align:center}

/* category cards — 4 in view, infinite marquee */
.symrail{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding:0 20px}
.symrail::-webkit-scrollbar{display:none}
.sym-card{flex:0 0 calc((100% - 36px) / 4);display:flex;flex-direction:column;gap:6px}
/* Category tiles carry transparent 3D icons: white surface, thin border, the
   art contained (never cropped) with breathing room around it. */
.sym-img{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;border-radius:16px;
  overflow:hidden;background:#fff;border:1px solid var(--border);padding:10%;box-sizing:border-box;
  transition:border-color .15s,transform .15s}
.sym-card:hover .sym-img{border-color:var(--primary);transform:translateY(-2px)}
.sym-img img{width:100%;height:100%;object-fit:contain;display:block}
.sym-card-lbl{font-size:13px;font-weight:800;color:var(--text);text-align:center;line-height:1.2;text-wrap:pretty}

/* scan image grid (radiology) */
.scan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0 20px 8px}
.scan-card{display:flex;flex-direction:column;gap:7px}
/* The scan photos are white equipment in white rooms, so without an outline
   they read as empty slots on the white page. A hairline border frames them. */
.scan-img{display:block;width:100%;aspect-ratio:1;border-radius:14px;overflow:hidden;background:transparent;border:1px solid var(--border)}
.scan-img img{width:100%;height:100%;object-fit:cover;display:block}
.scan-card-lbl{font-size:13px;font-weight:800;color:var(--text);text-align:center;text-wrap:pretty}

/* ---- horizontal scroller ---- */
.hscroll{display:flex;gap:12px;padding:0 20px 4px;overflow-x:auto;scrollbar-width:none}
.hscroll::-webkit-scrollbar{display:none}

/* package mini card (home) */
/* Package rail card — same visual language as the packages listing cards. */
.pkg-mini{flex-shrink:0;width:262px;min-width:0;background:#fff;border:1.5px solid var(--border);
  border-radius:20px;padding:16px;display:flex;flex-direction:column;gap:9px;box-shadow:var(--shadow);
  transition:transform .2s,box-shadow .2s}
.pkg-mini:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(11,33,56,.10)}
.pkg-mini .pm-eyebrow{font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.pkg-mini .pkg-name{font-size:15.5px;line-height:1.28;color:var(--text);text-decoration:none;display:block}
.pkg-mini a.pkg-name:hover{color:var(--primary)}
.pkg-mini .pkg-sub{font-size:12.5px;font-weight:800;color:var(--text)}
.pkg-mini .pk-params{display:flex;flex-wrap:wrap;gap:6px}
.pkg-mini .pk-param{font-size:11px;font-weight:700;color:var(--muted);border:1px solid var(--border);border-radius:8px;padding:3px 8px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;text-decoration:none}
.pkg-mini .pk-param.more{color:var(--primary);border-color:rgba(211,47,47,.3)}
.pkg-mini .pk-facts{display:flex;flex-wrap:wrap;gap:10px}
.pkg-mini .pk-facts span{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--muted)}
.pkg-mini .pk-facts span.fast{color:#B26A2E}
.pkg-mini .pm-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;border-top:1px solid var(--border);padding-top:12px;margin-top:auto}
.pkg-mini .pm-foot .price{font-size:19px}
.pkg-mini .pm-save{font-size:11.5px;font-weight:800;color:var(--green);margin-top:4px}
.pkg-mini .pm-foot .btn{flex:0 0 auto;height:42px;border-radius:12px;font-size:13.5px;padding:0 18px;text-decoration:none}
.chip-tag{background:transparent;border:1px solid var(--border);color:var(--text);font-size:10px;font-weight:800;
  border-radius:999px;padding:4px 10px;letter-spacing:.3px}
.off{font-size:11px;color:var(--green);font-weight:800}
.pkg-name{font-size:14.5px;font-weight:800}
.pkg-sub{font-size:11.5px;color:var(--muted);font-weight:500}
.btn{display:flex;align-items:center;justify-content:center;border-radius:12px;
  background:var(--primary);color:#fff;font-weight:800;font-size:13px;height:38px}
.btn:active{background:var(--primary-dark)}

/* ---- packages page ---- */
.chips{display:flex;gap:8px;padding:2px 20px 14px;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;border:1px solid var(--border);color:var(--text);border-radius:999px;
  padding:8px 16px;font-size:12px;font-weight:600;background:#fff;cursor:pointer}
.chip.on{background:var(--primary);color:#fff;border-color:var(--primary);font-weight:800}
.pkg-list{display:flex;flex-direction:column;gap:14px;padding:0 20px}
.pkg-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:16px;
  display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow)}
.pkg-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pkg-meta .m{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted);font-weight:600}

/* ---- search page ---- */
.suggest{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--border)}
.suggest:last-child{border-bottom:0}
.suggest-ic{width:36px;height:36px;border-radius:10px;background:transparent;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.suggest-name{font-size:13.5px;font-weight:700}
.suggest-sub{font-size:11px;color:var(--muted);font-weight:500}
.hl{color:var(--text);font-weight:800}
.pill-wrap{display:flex;flex-wrap:wrap;gap:8px;padding:0 20px}
.pill{display:flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:999px;
  padding:8px 14px;font-size:12px;font-weight:600;color:var(--text);background:#fff}
.pill.tint{background:transparent;color:var(--text);border-color:var(--border);font-weight:700}
.trend{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--border)}
.trend:last-child{border-bottom:0}

/* ---- topbar (inner pages: back button + title) ---- */
.topbar{display:flex;align-items:center;gap:12px;padding:18px 20px 12px;
  position:sticky;top:0;z-index:15;background:#fff;border-bottom:1px solid transparent}
.topbar.scrolled{border-bottom-color:var(--border);box-shadow:0 2px 10px rgba(11,33,56,.05)}
.topbar-back{display:flex}
.topbar-title{font-size:16px;font-weight:800;flex-grow:1}

/* ---- product page ---- */
.detail{padding-bottom:170px}
.title-card{margin:4px 20px 0;background:#fff;
  border:1px solid #FFFFFF;border-radius:16px;padding:16px}
.title-card .rowtop{display:flex;align-items:center;gap:12px}
.title-ic{width:48px;height:48px;border-radius:14px;background:transparent;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.title-name{font-size:17px;font-weight:800}
.title-alias{font-size:11.5px;color:var(--muted);font-weight:600}
.badges{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.badge{display:flex;align-items:center;gap:4px;background:#fff;border:1px solid var(--border);
  border-radius:999px;padding:5px 10px;font-size:11px;font-weight:700}

.blk{padding:20px 20px 0}
.blk-title{font-size:14px;font-weight:800;margin-bottom:10px}
.about{font-size:12.5px;line-height:1.65;color:var(--muted);font-weight:500}

/* variant selector */
.variant{display:flex;align-items:center;gap:12px;border:1px solid var(--border);border-radius:14px;
  padding:12px 14px;cursor:pointer;background:#fff}
.variant.on{border:1.5px solid var(--primary);background:#fff}
.radio{width:18px;height:18px;border-radius:999px;border:2px solid #C6CFDA;flex-shrink:0}
.variant.on .radio{border:5px solid var(--primary)}
.variant-name{font-size:13.5px;font-weight:800}
.variant-note{font-size:11px;color:var(--muted);font-weight:600}
.variant-list{display:flex;flex-direction:column;gap:8px}

/* key facts */
.fact{display:flex;flex-direction:column;align-items:center;gap:5px;border:1px solid var(--border);
  border-radius:14px;padding:12px 6px}
.fact-k{font-size:10px;color:var(--muted);font-weight:600}
.fact-v{font-size:11.5px;font-weight:800}

/* parameters */
.param-count{display:flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--border);border-radius:999px;padding:4px 12px}
.param-count b{font-size:15px;font-weight:800;color:var(--text)}
.param-count span{font-size:11px;font-weight:700;color:var(--text)}
.param{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:12px;padding:10px 12px}
.param-dept{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;
  margin:2px 0 8px;display:flex;align-items:center;gap:8px}
.param-dept-n{background:transparent;border:1px solid var(--border);color:var(--text);border-radius:999px;
  font-size:10px;font-weight:800;padding:1px 8px;letter-spacing:0}
.param .dot{width:6px;height:6px;border-radius:999px;background:var(--primary);flex-shrink:0}
.view-more,.read-more{display:inline-flex;align-items:center;gap:4px;background:transparent;border:1px solid var(--border);
  color:var(--text);font:inherit;font-size:12px;font-weight:800;border-radius:999px;padding:9px 14px;cursor:pointer;margin-top:2px}
.view-more .ic,.read-more .ic{transition:transform .2s}
.read-more{border:0;padding:6px 0}
.read-more.open .ic{transform:rotate(-90deg)}

/* bottom-sheet modal */
.modal{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(11,33,56,.45)}
.sheet{position:relative;width:100%;max-width:430px;max-height:82vh;background:#fff;
  border-radius:20px 20px 0 0;display:flex;flex-direction:column;
  animation:sheetUp .22s ease;overflow:hidden}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid var(--border)}
.sheet-title{font-size:15px;font-weight:800}
.sheet-close{background:transparent;border:0;cursor:pointer;padding:2px;display:flex}
.sheet-body{overflow-y:auto;padding:16px 20px calc(20px + env(safe-area-inset-bottom))}
.param span{font-size:12px;font-weight:600}

/* centre selector — 3-column grid, wraps to next row */
.centre-scroll{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.centre-chip{display:flex;flex-direction:column;gap:4px;align-items:flex-start;
  border:1.5px solid var(--border);border-radius:14px;padding:12px;background:#fff;cursor:pointer;font:inherit}
.centre-chip.on{border-color:var(--primary)}
.centre-chip-name{font-size:13.5px;font-weight:800;color:var(--text)}
.centre-chip-price{font-size:15px;font-weight:800;color:var(--text)}
.centre-note{font-size:11px;color:var(--muted);font-weight:600;margin-top:8px}

/* tier switcher (merged variable product, e.g. cardiac Gold/Platinum) */
.tier-select{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tier-opt{display:flex;flex-direction:column;gap:8px;align-items:stretch;text-align:left;
  border:1.5px solid var(--border);border-radius:14px;padding:13px 14px;background:#fff;cursor:pointer;font:inherit}
.tier-opt.on{border-color:var(--primary);box-shadow:0 0 0 3px rgba(211,47,47,.08)}
.tier-opt-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tier-opt-name{font-size:14px;font-weight:800;color:var(--text)}
.tier-opt-off{font-size:10.5px;font-weight:800;color:var(--green)}
.tier-opt-price{font-size:16px;font-weight:800;color:var(--text)}
@media(min-width:600px){ .tier-select{max-width:520px} }

/* prep list */
.prep{display:flex;flex-direction:column;gap:9px}
.prep .p{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600}

/* reviews */
.rev-summary{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--border);
  border-radius:16px;padding:16px}
.rev-score{display:flex;flex-direction:column;align-items:center;gap:2px;padding-right:16px;border-right:1px solid var(--border)}
.rev-score .big{font-size:30px;font-weight:800;line-height:1}
.rev-bars{display:flex;flex-direction:column;gap:6px;flex-grow:1}
.bar-row{display:flex;align-items:center;gap:8px}
.bar-row .n{font-size:10px;color:var(--muted);font-weight:700;width:8px}
.bar{flex-grow:1;height:6px;border-radius:999px;background:var(--border);overflow:hidden}
.bar > i{display:block;height:100%;background:var(--green)}
.rev-card{border:1px solid var(--border);border-radius:14px;padding:14px}
.rev-top{display:flex;align-items:center;gap:10px}
.avatar{width:34px;height:34px;border-radius:999px;background:#fff;border:1px solid var(--border);display:flex;
  align-items:center;justify-content:center;font-size:13px;font-weight:800;color:var(--text)}
.rev-name{font-size:12.5px;font-weight:800}
.rev-when{font-size:10px;color:var(--muted);font-weight:600}
.rev-rating{display:flex;align-items:center;gap:3px;background:#E3F6EF;border-radius:999px;padding:3px 8px;
  font-size:11px;font-weight:800;color:var(--green)}
.rev-text{font-size:12px;line-height:1.6;color:var(--muted);font-weight:500;margin-top:8px}
.rev-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}

/* home reviews */
.rev-strip{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--border);
  border-radius:14px;padding:12px 14px}
.rev-strip-score{display:flex;align-items:center;gap:5px;padding-right:12px;border-right:1px solid var(--border)}
.rev-strip-score .big{font-size:20px;font-weight:800}
.rev-strip-txt{font-size:12px;color:var(--muted);font-weight:600;line-height:1.4}
.rev-strip-txt b{color:var(--text);font-weight:800}
.rev-card.home{flex-shrink:0;width:280px;background:#fff;display:flex;flex-direction:column;gap:8px}
.rev-for{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);font-weight:700;margin-top:2px}

/* why prima */
.why-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0 20px 8px}
.why-card{border:1px solid var(--border);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:8px}
.why-ic{width:42px;height:42px;border-radius:12px;background:transparent;display:flex;align-items:center;justify-content:flex-start}
.why-title{font-size:13.5px;font-weight:800;color:var(--text);line-height:1.15}
.why-sub{font-size:11.5px;color:var(--muted);font-weight:500;line-height:1.45}

/* related */
/* Related / popular-test rail card — same language as the package cards. */
.rel-card{flex-shrink:0;width:236px;min-width:0;border:1.5px solid var(--border);border-radius:20px;padding:16px;
  display:flex;flex-direction:column;gap:9px;background:#fff;box-shadow:var(--shadow);text-decoration:none;
  transition:transform .2s,box-shadow .2s}
.rel-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(11,33,56,.10)}
.rel-card .between{margin-top:auto;border-top:1px solid var(--border);padding-top:12px;align-items:center}
.rel-card .price{font-size:17px}
.rel-ic{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.rel-ic svg{width:14px;height:14px}
.rel-name{font-size:14px;font-weight:800;color:var(--text);line-height:1.3}
.rel-sub{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted);font-weight:700}
.add-btn{width:40px;height:40px;border-radius:12px;background:#fff;border:1.5px solid var(--border);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;padding:0}
.add-btn svg{stroke:var(--text)}
.add-btn:active{transform:scale(.92)}

/* sticky CTA */
.stickybar{position:fixed;left:50%;transform:translateX(-50%);bottom:var(--nav-h);width:100%;box-sizing:border-box;
  background:#fff;border-top:1px solid var(--border);padding:14px 20px;
  display:flex;align-items:center;gap:14px;z-index:20}
.stickybar .p-main{display:flex;flex-direction:column;gap:1px}
.stickybar .p-row{display:flex;align-items:baseline;gap:7px}
.stickybar .p-now{font-size:19px;font-weight:800;color:var(--text)}
.stickybar .p-note{font-size:10.5px;color:var(--green);font-weight:800}
.stickybar .book{flex-grow:1;height:50px;font-size:15px;border-radius:14px;box-shadow:0 6px 16px rgba(211,47,47,.3)}

/* list rows (symptom page) */
.test-row{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--border)}
.test-row:active{background:rgba(15,27,45,.04)}
.test-ic{width:40px;height:40px;border-radius:12px;background:transparent;display:flex;
  align-items:center;justify-content:center;flex-shrink:0}
.test-name{font-size:13.5px;font-weight:700}
.test-sub{font-size:11px;color:var(--muted);font-weight:500}

/* empty / info */
.empty{padding:60px 20px;text-align:center;color:var(--muted)}
.chip-tag.green{background:#E3F6EF;color:var(--green)}

/* ---- add-to-cart buttons ---- */
.add-pill{flex-shrink:0;border:1.5px solid var(--primary);background:#fff;color:var(--primary);
  font:inherit;font-size:12px;font-weight:800;border-radius:999px;padding:7px 14px;cursor:pointer;white-space:nowrap}
.add-pill.added{background:var(--primary);color:#fff}
.add-btn{cursor:pointer}
.add-btn.added{background:var(--green);border-color:var(--green)}
.add-btn.added svg{stroke:#fff}
.test-right{text-align:right;flex-shrink:0}
#addBtn.added{background:#fff;color:var(--green);border-color:var(--green)}
.stickybar .btn{height:44px;padding:0 14px;font-size:13px}

/* ---- filter + sort bar ---- */
.filterbar{display:flex;align-items:center;gap:8px;padding:8px 20px 0}
.fchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:#fff;
  color:var(--text);font:inherit;font-size:12px;font-weight:700;border-radius:999px;padding:8px 14px;cursor:pointer}
.fchip.on{border-color:var(--primary);color:var(--primary)}
.fsort{margin-left:auto;border:1px solid var(--border);background:#fff;color:var(--text);
  font:inherit;font-size:12px;font-weight:700;border-radius:999px;padding:8px 12px;cursor:pointer}

/* ---- floating cart bar ---- */
/* ---- cart page ---- */
.cart-list{display:flex;flex-direction:column}
.cart-item{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--border)}
.cart-name{font-size:13.5px;font-weight:800}
.cart-sub{font-size:11.5px;color:var(--muted);font-weight:600;margin-top:2px}
.cart-right{text-align:right;flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.cart-x{border:0;background:transparent;color:var(--muted);font:inherit;font-size:11px;font-weight:700;cursor:pointer;padding:0;text-decoration:underline}
.cart-foot{border-top:1px solid var(--border);margin-top:6px;padding-top:6px;padding-bottom:16px}

/* ---- checkout ---- */
.co-summary{display:flex;flex-direction:column;gap:8px}
.co-item{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600}
.coupon-input{display:flex;gap:8px}
.coupon-input input{flex-grow:1;height:44px;border:1px solid var(--border);border-radius:12px;padding:0 14px;
  font:inherit;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text)}
.coupon-input input::placeholder{letter-spacing:0;text-transform:none;color:var(--muted);font-weight:500}
.coupon-msg{font-size:12px;font-weight:700;margin-top:8px}
.coupon-msg.ok{color:var(--green)}
.coupon-msg.err{color:var(--primary)}
/* Coupon carousel — horizontal scroll-snap cards instead of a stacked list. */
.coupon-list{display:flex;gap:10px;margin-top:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding-bottom:2px}
.coupon-list::-webkit-scrollbar{display:none}
.coupon{flex:0 0 200px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:flex-start;
  gap:8px;border:1px dashed var(--border);border-radius:14px;padding:14px}
.coupon.on{border-style:solid;border-color:var(--primary)}
.coupon-badge{font-size:11px;font-weight:800;color:var(--primary);border:1px solid var(--primary);
  border-radius:8px;padding:6px 8px;letter-spacing:.4px;flex-shrink:0;display:flex;align-items:center;gap:5px}
.coupon-title{font-size:13px;font-weight:800;line-height:1.3}
.coupon-desc{font-size:11px;color:var(--muted);font-weight:600;line-height:1.4}
.coupon-apply{border:1px solid var(--primary);background:transparent;color:var(--primary);font:inherit;
  font-size:12px;font-weight:800;cursor:pointer;border-radius:999px;padding:7px 14px;width:100%;margin-top:auto}
.coupon.on .coupon-apply{background:var(--primary);color:#fff;border-color:var(--primary)}

.opt-row{display:flex;flex-direction:column;gap:8px}
.opt-card{display:flex;align-items:center;gap:12px;border:1.5px solid var(--border);border-radius:14px;padding:14px;cursor:pointer}
.opt-card.on{border-color:var(--primary)}
.opt-name{font-size:13.5px;font-weight:800;display:block}
.opt-sub{font-size:11.5px;color:var(--muted);font-weight:600}
.pay-readonly{display:flex;align-items:center;gap:12px;border:1.5px solid var(--border);border-radius:14px;
  padding:14px;font-size:13.5px;font-weight:800}

.field{margin-bottom:12px}
.field label,.field-label{display:block;font-size:12px;font-weight:800;color:var(--text);margin-bottom:6px}
.field-label{margin-bottom:8px}
.field input,.field textarea{width:100%;border:1px solid var(--border);border-radius:12px;padding:12px 14px;
  font:inherit;font-size:13.5px;font-weight:600;color:var(--text);resize:none}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);font-weight:500}

.chip-scroll{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.chip-scroll::-webkit-scrollbar{display:none}
.datechip{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:64px;
  border:1.5px solid var(--border);border-radius:12px;padding:10px 8px;background:#fff;cursor:pointer;font:inherit}
.datechip.on{border-color:var(--primary)}
.dc-day{font-size:12px;font-weight:800;color:var(--text)}
.dc-date{font-size:10.5px;color:var(--muted);font-weight:600}

.slot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.slot{border:1.5px solid var(--border);border-radius:12px;padding:11px 8px;background:#fff;cursor:pointer;
  font:inherit;font-size:12px;font-weight:700;color:var(--text)}
.slot.on{border-color:var(--primary);color:var(--primary)}
.slot.disabled,.slot:disabled{cursor:not-allowed;color:var(--muted);background:#fff;
  border-color:var(--border);text-decoration:line-through;opacity:.55}
.slot-note{grid-column:1/-1;font-size:12px;color:var(--muted);font-weight:600;padding:4px 2px}

.bill{display:flex;flex-direction:column;gap:8px}
.bill-row{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:600;color:var(--muted)}
.bill-total{display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:800;color:var(--text);
  border-top:1px solid var(--border);padding-top:10px;margin-top:2px}

/* selected centre + change popup */
.selected-centre{display:flex;align-items:center;gap:12px;width:100%;border:1.5px solid var(--primary);
  border-radius:14px;padding:14px;background:#fff;cursor:pointer;font:inherit;text-align:left}
.sc-name{font-size:13.5px;font-weight:800;display:block;color:var(--text)}
.sc-area{font-size:11.5px;color:var(--muted);font-weight:600}
.sc-change{font-size:12px;font-weight:800;color:var(--primary);flex-shrink:0}
.centre-opts{display:flex;flex-direction:column;gap:8px}
.centre-opt{display:flex;align-items:center;gap:12px;border:1px solid var(--border);border-radius:14px;
  padding:13px 14px;background:#fff;cursor:pointer;font:inherit;text-align:left}
.centre-opt.on{border-color:var(--primary)}
.centre-opt .co-name{font-size:13.5px;font-weight:800;display:block;color:var(--text)}
.centre-opt .co-area{font-size:11.5px;color:var(--muted);font-weight:600}
.centre-opt .co-tick{opacity:0;flex-shrink:0}
.centre-opt.on .co-tick{opacity:1}

/* thank you */
.ty{max-width:430px;margin:0 auto;padding:40px 24px 40px;display:flex;flex-direction:column;align-items:center;text-align:center}
.ty-check{width:76px;height:76px;border-radius:999px;background:var(--green);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.ty-title{font-size:22px;font-weight:800}
.ty-sub{font-size:13px;color:var(--muted);font-weight:500;margin-top:8px;line-height:1.5;max-width:300px}
.ty-order{width:100%;border:1px solid var(--border);border-radius:14px;padding:14px;margin-top:22px}
.ty-details{width:100%;display:flex;flex-direction:column;gap:12px;margin-top:12px;text-align:left}
.ty-card{border:1px solid var(--border);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px}
.ty-row{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600}
.ty-row.ty-tot{border-top:1px solid var(--border);padding-top:8px;font-weight:800;font-size:14px}
.ty-line{font-size:12.5px;line-height:1.5}
.ty-actions{width:100%;display:flex;flex-direction:column;gap:10px;margin-top:24px;align-items:center}
.ty-actions .btn{width:100%}
.btn.ghost{background:#fff;border:1.5px solid var(--primary);color:var(--primary)}

/* profile / orders */
.prof-head{display:flex;align-items:center;gap:14px;padding:20px}
.prof-head[hidden]{display:none}
.prof-avatar{width:52px;height:52px;border-radius:999px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.prof-name{font-size:16px;font-weight:800}
.prof-sub{font-size:12px;color:var(--muted);font-weight:600;margin-top:2px}
.ord-list{display:flex;flex-direction:column;gap:12px}
.ord-card{border:1px solid var(--border);border-radius:16px;padding:14px;box-shadow:var(--shadow)}
.ord-id{font-size:13px;font-weight:800}
.ord-status{font-size:10.5px;font-weight:800;color:var(--green);border:1px solid var(--border);border-radius:999px;padding:3px 10px}
.ord-items{font-size:13px;font-weight:700;margin-top:8px;line-height:1.4}
.ord-meta{font-size:11.5px;color:var(--muted);font-weight:600;margin-top:4px}

/* ---- reports (Attune) ---- */
.rep-gate{display:flex;flex-direction:column;align-items:center;text-align:center;padding:30px 4px}
.rep-gate-ic{width:60px;height:60px;border-radius:999px;border:1.5px solid var(--primary);color:var(--primary);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.rep-gate-ic svg{width:26px;height:26px}
.rep-gate-title{font-size:18px;font-weight:800}
.rep-gate-sub{font-size:12.5px;color:var(--muted);font-weight:500;line-height:1.55;margin:8px 0 20px;max-width:290px}
.rep-phone{display:flex;gap:8px;width:100%;margin-bottom:12px}
.rep-cc{display:flex;align-items:center;padding:0 14px;border:1px solid var(--border);border-radius:12px;font-weight:800;font-size:13.5px}
.rep-in{flex:1;width:100%;border:1px solid var(--border);border-radius:12px;padding:13px 14px;font:inherit;
  font-size:13.5px;font-weight:600;color:var(--text)}
.rep-in::placeholder{color:var(--muted);font-weight:500}
.rep-otp{text-align:center;font-size:20px;letter-spacing:10px;font-weight:800}
.linkbtn{border:0;background:transparent;color:var(--muted);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;margin-top:12px;text-decoration:underline}
.rep-err{color:var(--primary);font-size:12.5px;font-weight:700;margin-top:12px}
.or-divider{display:flex;align-items:center;gap:12px;width:100%;margin:16px 0;color:var(--muted);font-size:11.5px;font-weight:700}
.or-divider::before,.or-divider::after{content:"";flex:1;height:1px;background:var(--border)}
.rep-head{display:flex;align-items:center;gap:10px;padding:14px 0 4px}
.rep-hi{font-size:16px;font-weight:800}
.rep-hsub{font-size:12px;color:var(--muted);font-weight:600}
.rep-lookup{border:1px solid var(--border);border-radius:14px;padding:14px;margin-top:14px}
.rep-list{display:flex;flex-direction:column;gap:12px}
.rep-card{border:1px solid var(--border);border-radius:16px;padding:14px;box-shadow:var(--shadow)}
.rep-card-top{font-size:14px;font-weight:800}
.rep-meta{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);font-weight:600;margin-top:5px}
.rep-visit{font-size:11.5px;font-weight:800;margin-top:6px}
.rep-card .btn{display:flex;gap:8px;height:44px}
/* patient-grouped report cards (a number can carry several family members) */
.rep-patient{display:flex;align-items:center;gap:10px;color:var(--primary)}
.rep-patient .rep-card-top{color:var(--text)}
.rep-patient .rep-hsub{margin-top:1px}
.rep-visits{display:flex;flex-direction:column;margin-top:10px;border-top:1px solid var(--border)}
.rep-visit-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:11px 0;border-bottom:1px solid var(--border)}
.rep-visit-row:last-child{border-bottom:0}
.rep-visit-when{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--text)}
.rep-visit-when svg{color:var(--muted)}
.rep-open{height:38px!important;padding:0 16px}
.rep-soon{font-size:12px;font-weight:700;color:var(--muted)}
.rep-pdferr{flex-basis:100%;margin-top:0}

/* ---- WP-parity content pages (blog/pages/product long desc) ---- */
.wp-title{font-size:22px;font-weight:800;line-height:1.25;margin:14px 0 8px;text-wrap:pretty}
.wp-meta{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);font-weight:600;margin-bottom:14px}
.wp-cover{width:100%;border-radius:16px;margin-bottom:16px;display:block}
.wp-content{font-size:14px;line-height:1.75;color:var(--text);font-weight:500;overflow-wrap:break-word}
.wp-content p{margin:0 0 14px}
.wp-content h2{font-size:17px;font-weight:800;margin:22px 0 10px}
.wp-content h3{font-size:15px;font-weight:800;margin:18px 0 8px}
.wp-content ul,.wp-content ol{margin:0 0 14px;padding-left:20px}
.wp-content li{margin-bottom:6px}
.wp-content img{max-width:100%;height:auto;border-radius:12px}
.wp-content table{width:100%;border-collapse:collapse;font-size:12.5px;margin:0 0 14px;display:block;overflow-x:auto}
.wp-content th,.wp-content td{border:1px solid var(--border);padding:8px 10px;text-align:left}
.wp-content strong{font-weight:800}
.wp-content a{text-decoration:underline}

/* ---- static info pages (about/accreditation/why-prima/contact/legal/franchise) ---- */
.info-hero{margin:0 0 4px;padding:32px 20px 26px;background:linear-gradient(120deg,var(--primary),var(--primary-dark));color:#fff}
.info-eyebrow{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:rgba(255,255,255,.75);margin-bottom:8px}
.info-hero h1{margin:0;font-size:24px;font-weight:800;line-height:1.25;text-wrap:pretty}
.info-hero p{margin:10px 0 0;font-size:13px;line-height:1.6;color:rgba(255,255,255,.88);font-weight:500;max-width:520px}
.info-sec{padding:26px 20px 0}
.info-sec:first-of-type{padding-top:22px}
.info-h2{font-size:18px;font-weight:800;margin:0 0 6px;text-wrap:pretty}
.info-lead{font-size:13px;line-height:1.7;color:var(--muted);font-weight:500;margin:0 0 16px;max-width:640px}

.team-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:16px 20px 8px}
.team-card{border:1px solid var(--border);border-radius:16px;padding:16px 14px;text-align:center}
.team-photo{width:76px;height:76px;border-radius:999px;object-fit:cover;margin:0 auto 10px;display:block;border:1px solid var(--border)}
.team-avatar{width:76px;height:76px;border-radius:999px;background:#fff;border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;color:var(--primary);margin:0 auto 10px}
.team-name{font-size:13.5px;font-weight:800;color:var(--text)}
.team-role{font-size:11.5px;color:var(--muted);font-weight:600;margin-top:4px;line-height:1.4}

.pillar-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:4px 20px 8px}
.pillar-card{border:1px solid var(--border);border-radius:16px;padding:16px 14px}
.pillar-ic{display:flex;margin-bottom:10px}
.pillar-title{font-size:13px;font-weight:800;color:var(--text);line-height:1.3}
.pillar-sub{font-size:11.5px;color:var(--muted);font-weight:500;margin-top:5px;line-height:1.55}

.cert-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:16px 20px 8px}
.cert-card{border:1px solid var(--border);border-radius:16px;overflow:hidden;background:#fff}
.cert-card img{width:100%;height:180px;object-fit:cover;display:block;border-radius:0}
.cert-card-body{padding:12px 14px}
.cert-card-name{font-size:12.5px;font-weight:800;color:var(--text)}

.perk-grid{display:grid;grid-template-columns:1fr;gap:10px;padding:4px 20px 8px}
.perk{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--border);border-radius:14px;padding:12px 14px;font-size:12.5px;font-weight:700;color:var(--text)}
.perk .ic{flex-shrink:0;margin-top:1px}

.contact-grid{display:grid;grid-template-columns:1fr;gap:12px;padding:16px 20px 8px}
.contact-card{display:flex;align-items:center;gap:12px;border:1px solid var(--border);border-radius:16px;padding:14px 16px}
.contact-ic{width:40px;height:40px;border-radius:999px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-k{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.contact-v{font-size:13.5px;font-weight:800;color:var(--text);margin-top:2px}

.centre-directory{display:grid;grid-template-columns:1fr;gap:8px;padding:4px 20px 8px}
.centre-dir-row{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:14px;padding:12px 14px}
.centre-dir-name{font-size:13px;font-weight:800;color:var(--text)}
.centre-dir-area{font-size:11.5px;color:var(--muted);font-weight:600;margin-top:2px}
.centre-dir-tag{margin-left:auto;font-size:10px;font-weight:800;color:var(--primary);border:1px solid var(--primary);border-radius:999px;padding:3px 9px;flex-shrink:0;white-space:nowrap}

.legal{padding:20px 20px 8px}
.legal-updated{font-size:11.5px;color:var(--muted);font-weight:700;margin:-4px 0 16px}

.info-cta{margin:8px 20px 24px;padding:20px;border-radius:18px;background:linear-gradient(120deg,var(--primary),var(--primary-dark));color:#fff;text-align:center}
.info-cta h3{margin:0 0 6px;font-size:15px;font-weight:800}
.info-cta p{margin:0 0 14px;font-size:12px;color:rgba(255,255,255,.85);font-weight:500}
.info-cta .btn{background:#fff;color:var(--primary);display:inline-flex;padding:0 24px;height:44px}

@media(min-width:600px){
  .info-hero{padding:44px 28px 36px}
  .info-hero h1{font-size:32px;max-width:640px}
  .info-hero p{font-size:14px}
  .info-sec,.legal{padding-left:28px;padding-right:28px}
  .team-grid,.pillar-grid,.cert-grid{grid-template-columns:repeat(4,minmax(0,1fr));padding-left:28px;padding-right:28px}
  .contact-grid{grid-template-columns:repeat(3,minmax(0,1fr));padding-left:28px;padding-right:28px}
  .perk-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding-left:28px;padding-right:28px}
  .centre-directory{grid-template-columns:repeat(2,minmax(0,1fr));padding-left:28px;padding-right:28px}
  .legal-body{max-width:760px}
  .info-cta{margin-left:28px;margin-right:28px}
}
@media(min-width:1024px){
  .centre-directory{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---- pager (category/packages lists, 20 per page) ---- */
.app-pager{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px 6px}
.app-pg-btn{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--border);border-radius:12px;
  padding:11px 18px;font-size:13px;font-weight:800;color:var(--text);background:#fff}
.app-pg-btn.off{opacity:.4}
.app-pg-info{font-size:12.5px;font-weight:800;color:var(--muted)}

/* ---- footer ---- */
.footer{margin-top:36px;border-top:1px solid var(--border);background:#fff}
.footer-inner{padding:28px 20px 30px}
@media(min-width:600px){ .footer-inner{padding:40px 28px 34px} }
@media(min-width:1280px){ .footer-inner{max-width:1280px;margin-left:auto;margin-right:auto} }
.footer-top{display:flex;flex-direction:column;gap:18px;padding-bottom:24px;border-bottom:1px solid var(--border);margin-bottom:24px}
@media(min-width:600px){ .footer-top{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:32px} }
.footer-brand{max-width:520px}
.footer-logo{display:block;height:36px;width:auto;margin-bottom:12px}
.footer-about{font-size:13px;line-height:1.65;color:var(--muted);font-weight:500;margin:0 0 14px}
.footer-trust{display:flex;flex-wrap:wrap;gap:8px 16px}
.footer-trust span{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--text)}
.footer-cta{display:flex;gap:10px;flex-shrink:0}
.footer-cta .btn{height:44px;padding:0 18px;font-size:13.5px;gap:8px;white-space:nowrap}
.footer-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 20px;margin-bottom:24px}
@media(min-width:600px){ .footer-cols{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 28px} }
.footer-h{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-bottom:10px}
.footer-col a{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text);padding:5px 0;text-decoration:none}
.footer-col a:hover{color:var(--primary)}
.footer-hours{display:flex;align-items:flex-start;gap:8px;font-size:12px;font-weight:600;color:var(--muted);padding:6px 0 0;line-height:1.4}
.footer-bottom{display:flex;flex-direction:column;gap:14px;padding-top:18px;border-top:1px solid var(--border)}
@media(min-width:600px){ .footer-bottom{flex-direction:row;align-items:center;justify-content:space-between} }
.footer-legal{font-size:12px;line-height:1.7;color:var(--muted);font-weight:600}
.footer-legal-links{display:inline-flex;gap:14px;margin-left:14px}
.footer-legal-links a{color:var(--muted);text-decoration:none;font-weight:700}
.footer-legal-links a:hover{color:var(--primary)}
.footer-social{display:flex;gap:16px}
.footer-social a{display:flex;opacity:.85}
.footer-social a:hover{opacity:1}

/* ---- bottom tab bar ---- */
.tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;
  height:var(--nav-h);background:#fff;border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-around;
  padding:6px 8px calc(0px + env(safe-area-inset-bottom));z-index:30}
@media(min-width:600px){ .tabbar{display:none} }

/* Floating WhatsApp chat — official green, always clear of fixed bottom bars.
   --fab-b is set by cart.js = tab bar + any visible fixed stickybar + gap. */
.wa-fab{position:fixed;right:16px;bottom:var(--fab-b,calc(var(--nav-h) + 16px));z-index:19;width:54px;height:54px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(37,211,102,.4);
  transition:bottom .2s ease,transform .15s ease}
.wa-fab:active{transform:scale(.94)}
.wa-fab svg{display:block}
.modal:not([hidden]) ~ .wa-fab,body.modal-open .wa-fab{display:none}
@media(min-width:600px){ .wa-fab{right:24px;width:58px;height:58px} }
@media print{ .wa-fab{display:none} }
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:56px;padding-top:6px;color:var(--muted)}
.tab-ic{position:relative;display:flex}
.tab-badge{position:absolute;top:-6px;right:-10px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  background:var(--primary);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center}
.tab-badge[hidden]{display:none}
.tab-lbl{font-size:10.5px;font-weight:600}
.tab.on .tab-lbl{color:var(--text);font-weight:800}

/* =========================================================
   Tablet / desktop layout (600px+ / 1024px+)
   ========================================================= */
@media(min-width:600px){
  /* header */
  .dweb-header-actions{gap:14px}

  /* category marquee → static grid, no more scrolling/animation */
  .symrail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;overflow:visible;padding:0 28px}
  .symrail [aria-hidden="true"]{display:none}

  .scan-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;padding:0 28px 8px}
  .hscroll{flex-wrap:wrap;overflow-x:visible;padding:0 28px 4px}
  .hscroll>*{flex:0 0 calc((100% - 36px) / 4)}
  .why-grid{grid-template-columns:repeat(4,minmax(0,1fr));padding:0 28px 8px}
  .grid-3{padding:14px 28px 0}
  .sec-head{padding-left:28px;padding-right:28px}
  .px{padding-left:28px;padding-right:28px}

  /* packages: sidebar filters + main list grid */
  .listing-shell{display:grid;grid-template-columns:220px 1fr;gap:24px;align-items:start;padding:0 28px}
  .listing-side{position:sticky;top:88px;padding-top:4px}
  .listing-side .chips{flex-direction:column;overflow:visible;padding:0}
  .listing-side-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:10px}
  .listing-main{min-width:0}
  .pkg-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:0}

  /* test/category listing rows → 2-col card grid */
  .test-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-left:28px;padding-right:28px}
  .test-row{border:1px solid var(--border);border-radius:14px}

  /* cart: items + sticky summary sidebar */
  .cart-shell{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start;padding:0 28px}
  .cart-main,.cart-side{min-width:0}
  .cart-main .px{padding:0}
  .cart-foot{border-top:0;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);
    position:sticky;top:88px;margin-top:0}

  /* checkout: form column + sticky sidebar (summary, confirm, bill) */
  #coBody{padding:0 28px;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start}
  #coBody[hidden]{display:none}
  #coBody .co-main{display:block;min-width:0}
  #coBody .co-aside{display:flex;flex-direction:column;gap:16px;min-width:0}

  /* footer */

  /* product detail — centered reading column; stickybar stays a full-width
     bottom bar (matched to the same column) rather than a sidebar */
  .detail{max-width:760px;margin:0 auto}
  .stickybar{max-width:760px}
}

@media(min-width:1024px){
  #coBody .co-aside{position:sticky;top:96px}
  .listing-shell{grid-template-columns:240px 1fr;gap:32px}
  .pkg-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .test-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cart-shell{grid-template-columns:minmax(0,1fr) 380px;gap:32px}
  #coBody{grid-template-columns:1fr 380px;gap:32px}
}

/* ---- iOS/Android auto-zoom fix ----
   Mobile browsers (esp. iOS Safari) zoom the page in when a focused text
   input's computed font-size is under 16px, then leave the user to pinch
   back out — that's the bug: search, checkout coupon field, address fields,
   and the OTP login all used ~13.5px inputs. Forcing every text field to
   16px on phone widths removes the trigger entirely (desktop keeps its
   tighter sizing — this block only applies under 600px). Do NOT "fix" this
   by disabling user-scalable in the viewport meta instead — that would
   block legitimate pinch-zoom for accessibility. */
@media (max-width:599px) {
  .searchbar input,
  .coupon-input input,
  .field input,
  .field textarea,
  .rep-in,
  input[type="text"], input[type="tel"], input[type="email"],
  input[type="number"], input[type="search"], input[type="password"],
  textarea, select {
    font-size: 16px !important;
  }
}

/* ---- Home CTA: AI Smart Custom Package builder (hero banner) ---- */
.cp-cta{
  position:relative;display:flex;align-items:center;overflow:hidden;margin:18px 20px;
  min-height:210px;padding:32px;border-radius:20px;
  background:linear-gradient(120deg,#DCF1FF 0%,#F1FAFF 55%,#FFFFFF 100%);
  color:#0C5288;box-shadow:var(--shadow);
}
.cp-cta-txt{position:relative;z-index:2;max-width:64%}
.cp-cta-tag{font-size:11.5px;font-weight:800;letter-spacing:.7px;color:#0C5288;text-transform:uppercase}
.cp-cta-title{font-size:22px;font-weight:800;margin:6px 0 6px;line-height:1.18;color:#0C5288}
.cp-cta-sub{font-size:14px;font-weight:700;color:#0C5288;line-height:1.5}
.cp-cta-btn{
  display:inline-block;margin-top:14px;background:linear-gradient(120deg,#3AA0E0 0%,#0C5288 100%);
  color:#fff;font-size:13px;font-weight:800;padding:10px 18px;border-radius:999px;white-space:nowrap;
}
.cp-cta-img{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  height:88%;width:auto;max-width:52%;
  object-fit:contain;object-position:center right;pointer-events:none;z-index:1;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.16));
}
@media(max-width:520px){
  .cp-cta{min-height:196px;padding:26px}
  .cp-cta-txt{max-width:56%}
  .cp-cta-title{font-size:16px}
  .cp-cta-img{right:2px;max-width:50%}
}
@media(min-width:600px){
  .cp-cta{min-height:250px;padding:44px 48px}
  .cp-cta-txt{max-width:66%}
  .cp-cta-tag{font-size:13px}
  .cp-cta-title{font-size:34px;margin:8px 0 8px}
  .cp-cta-sub{font-size:17px}
  .cp-cta-btn{font-size:15px;padding:13px 24px;margin-top:20px}
  .cp-cta-img{max-width:50%}
}

/* ---- Shared product/package card system (.pk-*) — used by packages, category
   and any listing. Single source of truth; pages must not redeclare these. ---- */
.pk-wrap{padding:0 20px}
.pk-grid{display:grid;grid-template-columns:1fr;gap:14px}
.pk-card{position:relative;min-width:0;background:#fff;border:1.5px solid var(--border);border-radius:20px;padding:16px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow);animation:pkIn .45s ease both;animation-delay:calc(var(--i,0)*40ms);transition:transform .2s,box-shadow .2s,border-color .2s}
.pk-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(11,33,56,.10)}
.pk-card.hide{display:none}
@keyframes pkIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pk-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pk-eyebrow{font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.pk-tools{display:flex;gap:6px;flex-shrink:0}
.pk-tool{width:32px;height:32px;border-radius:10px;border:1.5px solid var(--border);background:#fff;display:grid;place-items:center;cursor:pointer;padding:0;transition:all .2s}
.pk-tool:active{transform:scale(.9)}
.pk-tool svg{transition:transform .2s}
.pk-save.on{border-color:var(--primary)}
.pk-save.on svg{fill:var(--primary);stroke:var(--primary);transform:scale(1.12)}
.pk-cmp.on{border-color:#0C5288;background:#0C5288}
.pk-cmp.on svg{stroke:#fff}
.pk-badge{align-self:flex-start;font-size:10.5px;font-weight:800;letter-spacing:.3px;border-radius:999px;padding:4px 9px;border:1.5px solid;line-height:1}
.pk-badge.value{color:var(--green);border-color:rgba(25,179,107,.45)}
.pk-badge.tests{color:#0C5288;border-color:rgba(12,82,136,.35)}
.pk-name{font-size:16px;font-weight:800;line-height:1.28;color:var(--text);text-decoration:none;display:block}
.pk-name:hover{color:var(--primary)}
.pk-tests{font-size:12.5px;font-weight:800;color:var(--text)}
.pk-params{display:flex;flex-wrap:wrap;gap:6px}
.pk-param{font-size:11px;font-weight:700;color:var(--muted);border:1px solid var(--border);border-radius:8px;padding:3px 8px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.pk-param.more{color:var(--primary);border-color:rgba(211,47,47,.3);text-decoration:none}
.pk-desc{font-size:12.5px;color:var(--muted);font-weight:600;line-height:1.5}
.pk-facts{display:flex;flex-wrap:wrap;gap:12px}
.pk-facts span{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--muted)}
.pk-facts span.fast{color:#B26A2E}
.pk-foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px;border-top:1px solid var(--border);padding-top:12px;margin-top:auto}
.pk-price{font-size:20px;font-weight:800;line-height:1}
.pk-mrp{font-size:12px;color:var(--muted);text-decoration:line-through;font-weight:700;margin-left:6px}
.pk-save-pct{font-size:11.5px;font-weight:800;color:var(--green);margin-top:5px}
.pk-acts{display:flex;align-items:center;gap:8px;flex-shrink:0}
.pk-add{width:42px;height:42px;border-radius:12px;border:1.5px solid var(--border);background:#fff;display:grid;place-items:center;cursor:pointer;transition:all .2s;padding:0}
.pk-add:active{transform:scale(.92)}
.pk-add.added{border-color:var(--green);background:var(--green)}
.pk-add.added svg{stroke:#fff}
.pk-book{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 20px;border-radius:12px;background:var(--primary);color:#fff;font-size:13.5px;font-weight:800;text-decoration:none;white-space:nowrap;transition:transform .15s,background .2s}
.pk-book:hover{background:var(--primary-dark)}
.pk-book:active{transform:scale(.97)}
.pk-cta{border-color:transparent;background:linear-gradient(140deg,#DCF1FF 0%,#F1FAFF 60%,#FFFFFF 100%);justify-content:center;gap:8px;text-decoration:none}
.pk-cta .k{font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#0C5288}
.pk-cta .t{font-size:19px;font-weight:800;color:#0C5288;line-height:1.2}
.pk-cta .s{font-size:12.5px;font-weight:700;color:#0C5288;opacity:.8;line-height:1.5}
.pk-cta .b{margin-top:8px;display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 18px;border-radius:12px;background:linear-gradient(120deg,#3AA0E0,#0C5288);color:#fff;font-size:13px;font-weight:800;width:max-content}
@media(min-width:600px){
  .pk-wrap{max-width:1200px;margin:0 auto;padding:0 32px}
  .pk-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
}
@media(min-width:1100px){.pk-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* =========================================================
   Tablet (600px–1023px): the desktop header/grids assume ≥1024px of room.
   Between those widths keep the phone's full-width search bar under the
   header, tighten the header row so it never overflows, and use 3-per-row
   rails instead of 4. Everything ≥1024px is untouched.
   ========================================================= */
@media(min-width:600px) and (max-width:1023px){
  .appbar{gap:14px}
  .dweb-nav{gap:14px;font-size:13px}
  .searchbar.dweb-searchbar{display:none}          /* inline header search needs ~360px it doesn't have here */
  .searchbar.mobile-searchbar{display:flex;margin:6px 28px 0}
  .dweb-header-actions{gap:8px}
  .centre-pill-lbl{max-width:74px}
  /* Category rail: back to a scrolling row here (the 3-across grid read as a
     finished block). 5 cards in view + a 10% sliver of the 6th, which is what
     tells the eye it scrolls: 5 cards + 5 gaps + 0.1 card = the visible width. */
  .symrail{display:flex;gap:14px;overflow-x:auto;padding:0 28px}
  .sym-card{flex:0 0 calc((100% - 70px) / 5.1)}
  .scan-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hscroll>*{flex:0 0 calc((100% - 24px) / 3)}
  .why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cart-shell{grid-template-columns:minmax(0,1fr);max-width:720px;margin:0 auto}   /* cart: one column until the 380px summary fits */
  .footer-cols{grid-template-columns:repeat(2,minmax(0,1fr))}                      /* 4 columns need ~900px to breathe */
}
/* Narrow tablets (600–767px) get the tablet CONTENT layout but keep the phone's
   bottom tab bar. Measured: logo + top nav + centre pill + icons need ~565px of
   header row, which is already exactly the full width at ~656px — at 600px it
   overflows. Shrinking all four to fit looks cramped, and a bottom tab bar is
   normal on a tablet, so navigation stays there until 768px where the top nav
   genuinely fits. */
@media(min-width:600px) and (max-width:767px){
  .dweb-nav{display:none}
  .tabbar{display:flex}
  body.has-nav .app{padding-bottom:var(--nav-h)}
  .header-inner{padding:0 20px}
  .searchbar.mobile-searchbar{margin:6px 20px 0}
  .symrail{padding:0 20px}
  .scan-grid{padding:0 20px 8px}
  .px{padding-left:20px;padding-right:20px}
}
/* product page related rail lives inside the 2-col grid's main column */
@media(min-width:960px){
  .pd-rel .hscroll>*{flex:0 0 calc((100% - 12px) / 2)}
}
@media(min-width:1280px){
  .pd-rel .hscroll>*{flex:0 0 calc((100% - 24px) / 3)}
}

/* =========================================================
   Page transitions. Pages load fast enough to feel abrupt, so:
   1. same-origin navigations cross-fade (View Transitions API, Chrome/Safari;
      other browsers simply get the plain load),
   2. a thin progress bar at the very top appears the instant a link is tapped
      (see cart.js) so the tap is acknowledged before the next page paints,
   3. browsers without view transitions get a soft fade-in on load.
   All of it is off for users who prefer reduced motion.
   ========================================================= */
@view-transition{navigation:auto}
@keyframes pt-out{to{opacity:0}}
@keyframes pt-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
::view-transition-old(root){animation:160ms ease-in both pt-out}
::view-transition-new(root){animation:320ms cubic-bezier(.2,.8,.2,1) both pt-in}
@supports not (view-transition-name:root){
  @keyframes pt-fade{from{opacity:0}to{opacity:1}}
  body{animation:pt-fade 280ms ease-out both}
}
.pt-bar{position:fixed;left:0;top:0;height:3px;width:0;z-index:1000;background:var(--primary);
  box-shadow:0 0 10px rgba(211,47,47,.6);opacity:0;pointer-events:none;
  transition:width .35s cubic-bezier(.2,.8,.2,1),opacity .25s}
.pt-bar.on{opacity:1}
.pt-bar.done{width:100%!important;opacity:0;transition:width .2s ease-out,opacity .4s .15s}
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  body{animation:none}
  .pt-bar{display:none}
}
/* branded loading screen shown between page taps (cart.js) */
.pt-load{position:fixed;inset:0;z-index:2000;background:#fff;display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .18s ease,visibility 0s .18s;padding:24px}
.pt-load.show{opacity:1;visibility:visible;transition:opacity .16s ease}
.pt-load-in{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:420px;
  transform:translateY(8px) scale(.98);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.pt-load.show .pt-load-in{transform:none}
.pt-load-logo{width:150px;height:auto;display:block;animation:pt-logo 1.6s ease-in-out infinite}
@keyframes pt-logo{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.pt-load-ecg{width:240px;height:60px;margin:18px 0 14px;display:block}
.pt-ecg-base{stroke:var(--border);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.pt-ecg-draw{stroke:var(--primary);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:90 330;stroke-dashoffset:90;animation:pt-ecg 1.4s linear infinite}
@keyframes pt-ecg{to{stroke-dashoffset:-330}}
.pt-load-tip{font-size:15px;font-weight:700;line-height:1.45;color:var(--text);text-wrap:pretty;
  animation:pt-tip .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes pt-tip{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pt-load-cap{margin-top:10px;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
@media(prefers-reduced-motion:reduce){.pt-load{display:none}}

/* ---- sign-in widget (.lg-*, assets/otp-ui.js) — customers, reports, admin ---- */
.lg{display:flex;flex-direction:column;max-width:400px;margin:0 auto;padding:22px 0 8px;text-align:left}
.lg-title{font-size:22px;font-weight:800;line-height:1.2;color:var(--text)}
.lg-sub{font-size:13.5px;color:var(--muted);font-weight:600;line-height:1.55;margin:6px 0 18px}
.lg-sub b{color:var(--text)}
.lg-google{display:flex;align-items:center;justify-content:center;gap:10px;height:50px;border-radius:14px;border:1.5px solid var(--border);background:#fff;font:inherit;font-size:14px;font-weight:800;color:var(--text);cursor:pointer;transition:border-color .15s,transform .1s}
.lg-google:active{transform:scale(.98)}
.lg-google:disabled{opacity:.6}
.lg-or{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--muted);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.lg-or::before,.lg-or::after{content:"";flex:1;height:1px;background:var(--border)}
.lg-phone{display:flex;align-items:center;height:54px;border:1.5px solid var(--border);border-radius:14px;background:#fff;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.lg-phone:focus-within{border-color:var(--primary);box-shadow:0 0 0 4px rgba(211,47,47,.10)}
.lg-phone.err{border-color:var(--primary)}
.lg-cc{display:flex;align-items:center;padding:0 14px;height:100%;font-weight:800;font-size:15px;color:var(--text);border-right:1.5px solid var(--border);background:#fff}
.lg-in{flex:1;min-width:0;border:0;outline:0;background:transparent;padding:0 14px;height:100%;font:inherit;font-size:17px;font-weight:700;letter-spacing:.02em;color:var(--text)}
.lg-in::placeholder{color:var(--muted);font-weight:500;font-size:15px;letter-spacing:0}
.lg-field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.lg-field>span{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.lg-field .lg-in{height:50px;border:1.5px solid var(--border);border-radius:14px;padding:0 14px;font-size:15px}
.lg-field .lg-in:focus{border-color:var(--primary)}
.lg-btn{display:flex;align-items:center;justify-content:center;gap:10px;height:52px;margin-top:12px;border:0;border-radius:14px;background:var(--primary);color:#fff;font:inherit;font-size:15px;font-weight:800;cursor:pointer;transition:opacity .15s,transform .1s}
.lg-btn:active{transform:scale(.98)}
.lg-btn:disabled{opacity:.45;cursor:default;transform:none}
.lg-spin{width:16px;height:16px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:lgspin .7s linear infinite}
@keyframes lgspin{to{transform:rotate(360deg)}}
.lg-err{color:var(--primary);font-size:13px;font-weight:700;margin-top:10px;line-height:1.4}
.lg-trust{display:flex;align-items:flex-start;gap:6px;margin-top:16px;font-size:12px;color:var(--muted);font-weight:600;line-height:1.45}
.lg-trust svg{flex-shrink:0;margin-top:2px}
.lg-link{border:0;background:none;padding:0;font:inherit;font-size:inherit;font-weight:800;color:var(--primary);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.lg-back{margin-top:16px;font-size:13px;color:var(--muted);align-self:center}
.lg-otp{position:relative;margin-top:4px;cursor:text}
.lg-otp-in{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px;border:0;outline:0;background:transparent;color:transparent;caret-color:transparent}
.lg-boxes{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.lg-box{height:56px;border:1.5px solid var(--border);border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;color:var(--text);transition:border-color .12s,box-shadow .12s}
.lg-box.filled{border-color:var(--text)}
.lg-otp-in:focus ~ .lg-boxes .lg-box.on{border-color:var(--primary);box-shadow:0 0 0 4px rgba(211,47,47,.10)}
.lg-otp.err .lg-box{border-color:var(--primary)}
.lg-otp.shake{animation:lgshake .4s}
@keyframes lgshake{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.lg-resend{margin-top:16px;text-align:center;font-size:13px;color:var(--muted);font-weight:600}
.lg-resend b{color:var(--text)}
@media(min-width:600px){.lg{padding-top:30px}}

/* ---- automatic discounts block (cart) + bill summary line ---- */
.offer-list{display:flex;flex-direction:column;gap:10px}
.offer{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1.5px dashed var(--border);border-radius:14px;background:#fff}
.offer.on{border-style:solid;border-color:var(--green)}
.offer-pct{flex-shrink:0;min-width:52px;text-align:center;font-size:15px;font-weight:800;color:var(--green);border:1.5px solid var(--green);border-radius:10px;padding:6px 8px}
.offer:not(.on) .offer-pct{color:var(--muted);border-color:var(--border)}
.offer-title{display:block;font-size:13.5px;font-weight:800;color:var(--text)}
.offer-desc{display:block;font-size:11.5px;font-weight:600;color:var(--muted);line-height:1.4;margin-top:2px}
.offer-state{flex-shrink:0;font-size:13px;font-weight:800;color:var(--green);white-space:nowrap}
.offer-unlock{flex-shrink:0;border:1.5px solid var(--primary);background:#fff;color:var(--primary);border-radius:999px;padding:7px 11px;font:inherit;font-size:11.5px;font-weight:800;cursor:pointer;white-space:nowrap}
.bill-save{margin-top:10px;padding:10px 12px;border-radius:12px;border:1.5px solid var(--green);font-size:12.5px;font-weight:600;color:var(--text);line-height:1.5}
.bill-save b{color:var(--green);font-weight:800}

/* ---- selectable option cards (collection type + payment method) ----
   The chosen card flips to the solid dark surface used by the compare bar, so
   the selection is unmistakable at a glance; the rest stay plain white. */
.opt-card{position:relative;transition:background .15s,border-color .15s,color .15s}
.opt-card .opt-name{font-size:13.5px;font-weight:800;color:var(--text);display:block}
.opt-card .opt-sub{font-size:11.5px;font-weight:600;color:var(--muted);display:block;margin-top:2px;line-height:1.4}
.opt-card .opt-tick{display:none;width:26px;height:26px;border-radius:999px;background:var(--green);
  align-items:center;justify-content:center;flex-shrink:0}
.opt-card .opt-flag{font-size:10.5px;font-weight:800;color:var(--green);border:1px solid var(--green);
  border-radius:999px;padding:2px 8px;white-space:nowrap;flex-shrink:0}
.opt-card.on{background:var(--text);border-color:var(--text);box-shadow:0 8px 20px rgba(11,33,56,.18)}
.opt-card.on .opt-name{color:#fff}
.opt-card.on .opt-sub{color:rgba(255,255,255,.72)}
.opt-card.on .opt-flag{color:#fff;border-color:rgba(255,255,255,.5)}
.opt-card.on .radio{display:none}
.opt-card.on .opt-tick{display:flex}
.opt-card.opt-off{display:none}

/* short explanatory line above a choice (why home collection isn't offered) */
.co-note{border:1px solid var(--border);border-radius:12px;padding:11px 13px;font-size:12.5px;font-weight:600;
  color:var(--muted);line-height:1.5;margin-bottom:12px}
.co-note b{color:var(--text);font-weight:800}

/* first-visit centre gate: the sheet can't be dismissed until one is picked */
.modal.force .sheet-close{display:none}
.modal.force .modal-backdrop{pointer-events:none}
.centre-force-note{border:1px solid var(--border);border-radius:12px;padding:11px 13px;margin-bottom:14px;
  font-size:12.5px;font-weight:600;color:var(--muted);line-height:1.5}
.req{color:var(--primary);font-weight:800;font-size:11px}

/* nine category tiles fit on one row once there is room for them */
@media(min-width:1100px){ .symrail{grid-template-columns:repeat(9,minmax(0,1fr));gap:12px} }

/* ---- carousels line up with the content column ----
   .promo and .cp-cta set their own side margins further up the file, which
   beat the earlier centring block on the cascade and pinned both carousels to
   the left edge on wide screens. These rules come last, so the hero banner,
   the package-offer rail and the builder CTA share the exact left/right edges
   of the section headings above and below them. */
@media(min-width:600px){
  .promo{margin:14px 0 0;padding:0 28px;box-sizing:border-box}
  .cp-cta{margin:18px 28px}
}
@media(min-width:1280px){
  .promo{max-width:1280px;margin-left:auto;margin-right:auto}
  .cp-cta{max-width:1224px;margin-left:auto;margin-right:auto}
}

/* A page with a fixed bottom action bar (product buy bar, cart summary) needs
   room under the footer, or its last rows sit behind that bar on phones. */
@media(max-width:959px){
  body:has(.stickybar) .footer-inner{padding-bottom:104px}
}

/* ---- segmented filter (category type toggle; reusable) ---- */
.seg{display:inline-flex;gap:4px;margin-top:12px;padding:4px;border:1px solid var(--border);border-radius:999px;background:#fff;max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;font-size:12.5px;
  font-weight:800;color:var(--muted);text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}
.seg-btn b{font-weight:800;font-size:11px;color:var(--muted);opacity:.85}
.seg-btn:hover{color:var(--text)}
.seg-btn.on{background:var(--text);color:#fff}
.seg-btn.on b{color:#fff;opacity:.75}
.cart-item{align-items:flex-start}
.cart-tag{display:inline-flex;align-items:center;gap:5px;margin-top:6px;font-size:11px;font-weight:800;
  color:var(--muted);border:1px solid var(--border);border-radius:999px;padding:3px 9px}
.cart-tag.ok{color:var(--green);border-color:#9FE0C2}
.cart-tag svg{flex-shrink:0}

/* ---- checkout on desktop ----
   The order summary sits in the right column, so without dense packing the
   left column starts on row 2 and the page opens with a large empty gap.
   The place-order bar stops being a floating bottom bar and becomes the last
   card in the sidebar, under the bill. */
@media(min-width:600px){
  /* two columns need more room than the 760px single-column reading width */
  .detail.co-detail{max-width:1120px;padding-bottom:40px}
  /* the action bar stops floating and becomes the card under the order summary */
  #coBody .stickybar{position:static;transform:none;max-width:none;width:auto;
    flex-direction:column;align-items:stretch;gap:10px;border:1px solid var(--border);border-radius:16px;
    padding:16px;box-shadow:var(--shadow);z-index:auto;margin:0}
  #coBody .stickybar .p-main{display:flex;flex-direction:row;align-items:baseline;gap:8px;justify-content:space-between}
  #coBody .stickybar .book{width:100%}
}
/* Phones: the wrappers dissolve so each card is a direct child again and can be
   ordered independently — summary first, then the form, then the bill. */
@media(max-width:599px){
  #coBody{display:flex;flex-direction:column}
  #coBody .co-main,#coBody .co-aside{display:contents}
  #coBody .co-summary-blk{order:1}
  #coBody .co-main>.blk{order:2}
  #coBody .co-bill{order:3}
}
.stickybar .book{gap:8px}                            /* flex trims the space before the amount */
/* `hidden` must beat the display rules above, or the empty-cart guard on
   checkout leaves the form and the confirm bar on screen. */
#coBody[hidden],.stickybar[hidden]{display:none!important}

/* The `hidden` attribute is only as strong as a plain `display:none`, so any
   component that sets its own display must opt back in explicitly. Doing it
   once, here, for every such component in the app. */
.opt-card[hidden],.pay-readonly[hidden],.seg[hidden],.promo[hidden],.symrail[hidden],
.hscroll[hidden],.sec-head[hidden],.cart-tag[hidden],.opt-tick[hidden],.bill-save[hidden],
.signin-row[hidden],.ord-note[hidden]{display:none!important}

/* Status strip above the order list on My Orders. */
.ord-note{display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:10px 12px;border:1.5px solid var(--border);
  border-radius:12px;background:#fff;font-size:12.5px;font-weight:600;color:var(--muted);line-height:1.45}
.ord-note.err{border-color:var(--primary);color:var(--text)}

/* Optional sign-in prompt at checkout. White card, no tinted fill. */
.signin-row{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:12px 14px;
  border:1.5px solid var(--border);border-radius:14px;background:#fff}
.signin-row .grow{display:flex;flex-direction:column;gap:2px;min-width:0}
.signin-row b{font-size:13.5px;font-weight:800;color:var(--text)}
.signin-row span span,.signin-row .grow>span{font-size:12px;color:var(--muted);line-height:1.45}
.signin-row.done{border-color:var(--primary)}
.signin-row.done .grow{flex-direction:row;flex-wrap:wrap;gap:4px;font-size:13px;color:var(--text);font-weight:600}
.signin-btn{flex:none;height:38px;padding:0 18px;border:0;border-radius:11px;background:var(--primary);
  color:#fff;font:inherit;font-size:13.5px;font-weight:800;cursor:pointer}
.signin-btn:active{opacity:.85}
.signin-link{flex:none;border:0;background:none;padding:0;font:inherit;font-size:12.5px;font-weight:700;
  color:var(--primary);cursor:pointer;text-decoration:underline}

/* ---- centre pages (/centres/, /centres/{slug}/) ---- */
.ce-hero{padding:18px 20px 6px}
.ce-eyebrow{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--primary)}
.ce-hero h1{font-size:26px;font-weight:800;margin:4px 0 2px;line-height:1.15}
.ce-sub{font-size:13px;color:var(--muted);font-weight:600}
.ce-rating{display:inline-flex;align-items:center;gap:8px;margin-top:10px;text-decoration:none;color:var(--text);font-size:13px;font-weight:700}
.ce-rating b{font-size:18px;font-weight:800}
.ce-stars{display:inline-flex;gap:1px}
.ce-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.ce-actions .btn{height:44px;padding:0 16px;gap:8px;font-size:13.5px}
.ce-photos{display:flex;gap:10px;overflow-x:auto;padding:14px 20px 4px;scroll-snap-type:x mandatory;scrollbar-width:none}
.ce-photos::-webkit-scrollbar{display:none}
.ce-photos img{flex:0 0 78%;max-width:360px;aspect-ratio:4/3;object-fit:cover;border-radius:16px;scroll-snap-align:start;border:1px solid var(--border)}
.ce-grid{display:grid;grid-template-columns:1fr;gap:14px;padding:14px 20px 0}
.ce-card{border:1px solid var(--border);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px}
.ce-h{font-size:15px;font-weight:800;margin-bottom:8px}
.ce-h-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ce-h-row .ce-h{margin-bottom:0}
.ce-addr{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;font-weight:600;line-height:1.5}
.ce-addr a{color:var(--text);text-decoration:none}
.ce-addr .ic{flex-shrink:0;margin-top:2px}
.ce-map{border:1px solid var(--border);border-radius:16px;overflow:hidden;min-height:220px}
.ce-map iframe{width:100%;height:100%;min-height:220px;border:0;display:block}
.ce-sec{padding:22px 20px 0}
.ce-chips{display:flex;flex-wrap:wrap;gap:8px}
.ce-chips span,.ce-chips a{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border:1px solid var(--border);border-radius:999px;font-size:12.5px;font-weight:700;color:var(--text);text-decoration:none;background:#fff}
.ce-reviews{display:grid;grid-template-columns:1fr;gap:12px;margin-top:12px}
.ce-review{border:1px solid var(--border);border-radius:16px;padding:14px}
.ce-review p{margin:10px 0 0;font-size:13.5px;line-height:1.6}
.ce-rv-top{display:flex;gap:10px;align-items:center}
.ce-rv-top img,.ce-rv-av{width:34px;height:34px;border-radius:50%;flex-shrink:0;object-fit:cover}
.ce-rv-av{display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--primary);color:var(--primary);font-weight:800}
.ce-rv-name{font-size:13.5px;font-weight:800}
.ce-rv-when{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);font-weight:600}
.ce-rv-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px;border:1px solid var(--border);border-radius:16px;padding:14px 16px;font-size:13.5px;font-weight:700}
.ce-rv-cta .btn{height:40px;padding:0 14px;font-size:13px}
.ce-list{display:flex;flex-direction:column;gap:8px}
.ce-item{display:flex;align-items:center;gap:12px;border:1px solid var(--border);border-radius:14px;padding:12px 14px;text-decoration:none;color:var(--text)}
.ce-item b{display:block;font-size:13.5px;font-weight:800}
.ce-item small{display:block;font-size:11.5px;color:var(--muted);font-weight:600;margin-top:2px}
.ce-price{font-weight:800;font-size:14px;white-space:nowrap}
.ce-index{display:grid;grid-template-columns:1fr;gap:12px;padding:0 20px}
.ce-tile{display:flex;align-items:center;gap:12px;border:1px solid var(--border);border-radius:16px;padding:12px;text-decoration:none;color:var(--text)}
.ce-tile img,.ce-tile-ph{width:72px;height:72px;border-radius:12px;object-fit:cover;flex-shrink:0;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;background:#fff}
.ce-tile-body{flex:1;min-width:0}
.ce-tile-body b{display:block;font-size:15px;font-weight:800}
.ce-tile-body small{display:block;font-size:12px;color:var(--muted);font-weight:600;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ce-tile-meta{display:flex;gap:8px;align-items:center;margin-top:6px;flex-wrap:wrap}
.ce-tile-rating{font-size:12.5px;font-weight:800;color:#B26A2E}
.ce-tile-rating em{font-style:normal;color:var(--muted);font-weight:600}
@media(min-width:600px){
  .ce-grid{grid-template-columns:1.1fr 1fr}
  .ce-reviews{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ce-index{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ce-photos img{flex-basis:340px}
  .ce-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:1100px){ .ce-index{grid-template-columns:repeat(3,minmax(0,1fr))} .ce-reviews{grid-template-columns:repeat(3,minmax(0,1fr))} }