/* ════════════════════════════════════════════════════════════════
   SHIVAA — v95 mobile experience layer (loaded last, wins ties)
   Goal: butter-smooth, app-like, thumb-friendly on every phone.
   Bands:
     · pointer:coarse  → touch ergonomics on every touch device
     · ≤900px           → tablets / large phones (stacking already done)
     · ≤768px           → phone refinements & sticky action bars
     · ≤600px           → primary phone band
     · ≤380px           → small phones (iPhone SE / budget Android)
   Nothing here hides content; it only reflows, rescales and repositions.
   ════════════════════════════════════════════════════════════════ */

/* sticky cart/checkout action bars are phone-only; the in-page CTA remains
   the primary control on laptops where they would duplicate it */
.mcta-bar { display: none; }

/* ───────────────────── 1 · TOUCH FOUNDATIONS ───────────────────── */
@media (pointer: coarse) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  /* iOS Safari zooms focused inputs whose font-size is below 16px */
  input, select, textarea,
  .fld input, .fld select, .fld textarea,
  .prof-form input, .prof-form select, .prof-form textarea,
  .kyc-form input, .kyc-form select, .kyc-form textarea,
  .ds-form-card input, .ds-form-card select, .ds-form-card textarea,
  .bbc-form input, .bbc-form select, .svc-form input, .svc-form select,
  .shv-card input, .shv-card select,
  #couponIn, #hdrSearchInput, #searchInput { font-size: 16px; }
  /* kill the 300 ms tap delay + grey flash, everywhere tappable */
  a, button, .btn, .tab, .chip, .size-pill, .pay-opt, .icon-btn,
  .cat-pill, .cat-mini-card, .p-card, .cat-card, .acct-tile,
  .mnav a, .dw-row, .dw-tile, .adm-nav a,
  .qty-row button, .summary label, details summary {
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }
  /* touch screens have no hover — neutralise EVERY hover lift/tilt so nothing
     ever sticks after a tap (stateful .open transforms are untouched) */
  *:hover { transform: none !important; }
  /* keep crisp press feedback instead (must outrank the rule above) */
  .p-card:active, .cat-card:active, .acct-tile:active, .cat-mini-card:active,
  .svc:active, .trust:active, .testi:active, .pillar:active, .poster:active,
  .wp-card:active, .vault-card:active, .plan-card:active, .fin-panel:active,
  .cert-card:active, .hm-card:active, .fine-card:active, .ms-card:active {
    transform: scale(.98) !important;
  }
  .btn:active, button:active, .icon-btn:active, .pay-opt:active, .chip:active,
  .size-pill:active, .cat-pill:active, .tab:active,
  .mnav a:active, .adm-nav a:active, .dw-tile:active, .dw-row:active {
    transform: scale(.96) !important;
  }
  /* desktop cursor effects never belong on touch */
  .cursor-glow { display: none !important; }
}

/* ───────────────────── 2 · PHONE BAND ≤768 ───────────────────── */
@media (max-width: 768px) {
  :root { --r-lg: 18px; }
  html { height: 100%; }
  body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: none;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
  }
  /* fluid, edge-aware canvas */
  .container { width: 100%; max-width: 100%; padding-inline: 16px; }
  .sec { padding: 46px 0; }
  .sec-head { margin-bottom: 26px; }
  .sec-head h2 { font-size: clamp(23px, 7.2vw, 32px); }
  .sec-head p.sub { font-size: 14px; }
  .label { letter-spacing: .22em; }

  /* headings that were sized for desktop */
  h1 { font-size: clamp(25px, 7.4vw, 34px); }
  .page-hero { padding: 38px 0 34px; }
  .page-hero h1 { font-size: clamp(25px, 7.6vw, 34px); line-height: 1.08; }
  .page-hero p { font-size: 13.5px; }
  .crumbs { font-size: 10.5px; margin-bottom: 12px; }
  .page-hero::before, .page-hero::after { width: 34px; height: 34px; }

  /* buttons — comfortable 46–52 px thumb targets */
  .btn { min-height: 46px; padding: 13px 22px; font-size: 12px; letter-spacing: .1em; }
  .btn-sm { min-height: 40px; padding: 10px 16px; font-size: 11.5px; }
  .btn-lg { min-height: 52px; padding: 16px 24px; font-size: 13px; }
  .btn-block { width: 100%; }
  .icon-btn, .header-top .icon-btn { width: 42px; height: 42px; }
  .icon-e, .icon-x { padding: 9px 11px; }
  .tab { padding: 11px 18px; min-height: 42px; display: inline-flex; align-items: center; }

  /* cards breathe a little less so more fits above the fold */
  .order-card, .acct-sec, .b2b-form-card, .quote-sheet, .inv-sheet,
  .catlog, .trust, .nps-card { border-radius: 16px; }
  .order-card { padding: 18px 16px; }
  .order-card.mt-3 { margin-top: 18px; }

  /* ── modals: full bottom-sheets, dvh-aware, grab handle ── */
  .modal-overlay { padding: 0; align-items: flex-end; z-index: 1000; }
  .modal {
    width: 100%; max-width: 100%; border-radius: 24px 24px 0 0;
    max-height: 90vh; max-height: 92dvh;
    padding: 24px 18px calc(24px + env(safe-area-inset-bottom));
    animation: sheetUp .42s var(--ease);
  }
  .modal::before {
    content: ''; display: block; width: 42px; height: 4px; border-radius: 4px;
    background: var(--line); margin: -6px auto 16px;
  }
  .modal.lg { max-width: 100%; }
  .modal-close { top: 12px; right: 12px; width: 42px; height: 42px; }
  .modal h3 { font-size: 21px; }
  @keyframes sheetUp { from { transform: translateY(72px); opacity: 0; } }

  /* wide-sheet content that lives in a modal (pay sheet, size guide …) */
  .pay-sheet { max-width: 100%; }

  /* ── Passport (auth) sheet — native feel + home-indicator clearance ── */
  #shvAuthWrap { align-items: flex-end; }
  .shv-card {
    max-width: 100%; max-height: 94dvh;
    border-radius: 24px 24px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .shv-x { min-width: 42px; min-height: 42px; }
  .shv-foot { padding: 12px 20px calc(16px + env(safe-area-inset-bottom)); }
  .shv-body { padding: 18px 20px; }
  .shv-phone-row input, .shv-body input, .shv-body select { min-height: 50px; font-size: 16px; }
  .shv-cta { min-height: 52px; width: 100%; }
  .shv-grid2 { grid-template-columns: 1fr; }
  .shv-aud-btn { min-height: 50px; }

  /* ── generic form ergonomics ── */
  .form-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .fld label { font-size: 11px; margin-bottom: 5px; letter-spacing: .06em; text-transform: none; color: var(--ink-2); font-weight: 600; }
  .fld input, .fld select, .fld textarea {
    min-height: 48px; border-radius: 13px; padding: 13px 15px;
    background: var(--white);
  }
  textarea.fld, .fld textarea { min-height: 96px; }
  .fld.full { grid-column: 1 / -1; }
  select { background-position: right 14px center; padding-right: 38px; }

  /* ── utility strip: keep live rates, drop clutter ── */
  .utilbar { font-size: 11.5px; }
  .utilbar-in { gap: 8px; }
  .ub-contact svg { width: 13px; height: 13px; }

  /* ── header ── */
  .header { padding-top: env(safe-area-inset-top); }
  .header-in.header-top { height: 58px; gap: 6px; }
  .header.scrolled .header-in.header-top { height: 54px; }
  .header-top .brand { padding: 4px 10px; border-radius: 10px; }
  .header-top .brand-logo { height: 32px; }
  .header.scrolled .header-top .brand-logo { height: 28px; }
  .nav-toggle { width: 40px; height: 40px; }
  .header-actions { gap: 0; margin-left: auto; }
  .header-actions .icon-btn svg { width: 20px; height: 20px; }
  .badge { font-size: 9.5px; min-width: 16px; height: 16px; }
  .portal-pill { padding: 8px 10px; }

  /* search drawer as a proper sheet */
  .search-drawer { max-height: 88dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .search-in { padding: 14px 0; gap: 10px; }
  #searchInput, #hdrSearchInput { font-size: 17px; }
  .search-sugg { grid-template-columns: 1fr 1fr; }

  /* ── bottom navigation — thumb arc ── */
  .mnav { padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .mnav a { padding: 7px 10px; min-height: 52px; justify-content: center; flex: 1; gap: 3px; font-size: 9.5px; }
  .mnav a svg { width: 21px; height: 21px; }
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  body[data-page="product"], body[data-page="admin"], body[data-page="partner"] { padding-bottom: 0; }

  /* floating elements must ride above the bottom nav */
  .wa-fab {
    left: 14px; bottom: calc(72px + env(safe-area-inset-bottom));
    width: 52px; height: 52px;
  }
  .wa-fab svg { width: 26px; height: 26px; }
  .compare-tray { bottom: calc(70px + env(safe-area-inset-bottom)); }

  /* toast stack above everything */
  .toast-wrap { left: 12px; right: 12px; bottom: calc(74px + env(safe-area-inset-bottom)); }
  .toast { max-width: none; padding: 13px 18px; font-size: 13.5px; border-radius: 14px; }

  /* ── HOME: hero ── */
  .hero { padding: 40px 0 34px; min-height: auto; }
  .hero-in { padding: 0; text-align: center; }
  .hero-kicker { margin: 0 auto 14px; }
  .hero h1 { font-size: clamp(32px, 9.4vw, 44px); }
  .hero-sub { font-size: 14px; margin-inline: auto; }
  .hero-cta { flex-wrap: wrap; justify-content: center; }
  .hero-cta .btn { width: 100%; }
  .hero-trust { flex-wrap: wrap; justify-content: center; gap: 5px 12px; font-size: 9px; }
  .hero-stage { height: 300px; margin-top: 14px; }
  .hero-stats { margin: 16px -16px 0; border-radius: 16px; }
  .hstat b { font-size: 18px; }

  /* category rails snap as you swipe */
  .catbar-outer { padding: 16px 0; }
  .catbar { gap: 18px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .cat-pill { min-width: 76px; scroll-snap-align: start; gap: 7px; }
  .cp-ic { width: 54px; height: 54px; }
  .cp-lb { font-size: 11.5px; }
  .catbar2 { gap: 14px; padding: 6px 4px 10px; }
  .cb-img { width: 64px; height: 64px; }

  /* category mini grid */
  .cat-mini { grid-template-columns: repeat(4, 1fr) !important; gap: 8px; }
  .cat-mini-card { padding: 9px 4px; border-radius: 13px; }
  .cat-mini-card img { width: 38px; height: 38px; }

  /* festive poster stack */
  .poster-grid { gap: 14px; }
  .poster-xl { min-height: 340px; }
  .poster-side { gap: 14px; }
  .poster-side .poster { min-height: 190px; }
  .p-body, .poster-xl .p-body { max-width: 100%; padding: 22px 20px; }
  .p-body h3 { font-size: clamp(20px, 6.4vw, 27px); }
  .poster .flash-countdown { transform: scale(.82); transform-origin: left; }

  /* heritage carousel */
  .c-slide { min-height: 380px; }
  .c-body { padding: 26px 20px; }
  .c-body h3 { font-size: clamp(25px, 7.4vw, 32px); }
  .c-arrow { width: 40px; height: 40px; }
  .c-prev { left: 8px; } .c-next { right: 8px; }

  /* review cards rail */
  .rev-card { width: 262px; padding: 18px 16px; }

  /* ── SHOP ── */
  .shop-main { padding: 20px 0 90px; }
  .p-grid { grid-template-columns: repeat(2, 1fr); gap: 11px; }
  .p-card { border-radius: 16px; }
  .pc-imgwrap { aspect-ratio: 1/1.08; }
  .pc-body { padding: 11px 11px 13px; }
  .pc-name { font-size: 14.5px !important; line-height: 1.3; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; }
  .pc-price b { font-size: 15.5px; }
  .pc-price { font-size: 11px; }
  .pc-meta, .pc-tag { font-size: 10.5px; }
  .pc-quick { padding: 8px 10px; font-size: 10px; }
  .shop-head, .shop-toolbar { flex-wrap: wrap; gap: 10px; }
  .f-toggle { min-height: 44px; }

  /* filter panel becomes a true bottom sheet (base CSS slides it from the left) */
  .filters {
    top: auto; left: 0; right: 0; bottom: 0;
    width: 100% !important; max-width: none;
    height: auto; max-height: 88dvh;
    border-radius: 24px 24px 0 0;
    transform: translateY(105%);
    padding-bottom: calc(26px + env(safe-area-inset-bottom));
    animation: none;
  }
  .filters.open { transform: none; box-shadow: 0 -24px 70px rgba(31, 4, 9, .42); }
  .filters::before { height: 4px; width: 42px; margin: 10px auto 0; border-radius: 4px; background: var(--line); }
  .fsheet-bar { padding-top: 10px; }
  .fgroup { padding: 14px 18px; }

  /* ── PRODUCT PAGE ── */
  .pd-layout { gap: 24px; padding-top: 18px; }
  .pd-gallery { border-radius: 18px; }
  .gal-wrap { border-radius: 18px; }
  .gal-nav { width: 42px; height: 42px; }
  .pd-info { padding: 0; }
  .pd-info h1 { font-size: clamp(24px, 7vw, 32px); }
  .pd-pricebox { padding: 16px; border-radius: 16px; flex-wrap: wrap; gap: 10px; }
  .pd-perks { grid-template-columns: 1fr 1fr !important; gap: 8px; font-size: 12px; }
  .pd-perks .perk { padding: 9px 10px; border-radius: 12px; }
  .pd-perks .perk svg { width: 17px; height: 17px; flex: none; }
  .pd-cta-row { gap: 8px; }
  .pd-cta-row .btn { padding: 13px 8px; font-size: 11px; min-height: 48px; }
  .miy-btn { min-height: 54px; font-size: 12px !important; }
  .size-pill { min-height: 42px; padding: 9px 16px; }
  /* sticky buy bar above the safe area */
  .pd-stickybar { padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); gap: 10px; z-index: 90; }
  .pd-stickybar .btn { padding: 12px 18px; min-height: 48px; }
  body[data-page="product"] #view { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  body[data-page="product"] .wa-fab { bottom: calc(92px + env(safe-area-inset-bottom)); }
  body[data-page="product"] .compare-tray { bottom: calc(92px + env(safe-area-inset-bottom)); }

  /* ── CART ── */
  .cart-layout { grid-template-columns: 1fr; gap: 20px; padding: 26px 0 172px; }
  .cart-item { grid-template-columns: 68px 1fr; gap: 12px; padding: 13px; border-radius: 16px; }
  .cart-item img { width: 68px; height: 68px; border-radius: 12px; }
  .ci-name { font-size: 14.5px; }
  .ci-right { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; border-top: 1px dashed var(--line); padding-top: 9px; margin-top: 2px; }
  .qty-row { transform: scale(.92); transform-origin: left; }
  .qty-row button { min-width: 38px; min-height: 38px; font-size: 17px; }
  .summary { padding: 18px 16px; border-radius: 18px; position: static; top: auto; }
  .summary h3 { font-size: 19px; }
  .sum-row { font-size: 13.5px; padding: 7px 0; }
  .coupon-row { flex-wrap: wrap; }
  .coupon-row input { flex: 1 1 100%; min-height: 46px; font-size: 16px; }

  /* ── CHECKOUT ── */
  .sec-title { font-size: 19px; margin: 22px 0 12px; }
  .pay-opt { padding: 14px; border-radius: 15px; }
  .pay-opt b { font-size: 14px; }
  .pay-opt small { font-size: 12px; line-height: 1.45; }
  .pay-opt input[type="radio"], .pay-opt input[type="checkbox"] { width: 19px; height: 19px; margin-top: 2px; flex: none; }
  .rate-lock-card { padding: 13px 14px; border-radius: 14px; }
  #rlTimer { font-size: 15px; }

  /* ── payment sheet ── */
  .pay-sheet .ps-amt { font-size: 29px; padding: 8px 0 12px; }
  .ps-m { min-height: 50px; display: flex; align-items: center; border-radius: 14px; }
  .ps-tab { min-height: 46px; font-size: 12px; }
  .ps-upiid { flex-wrap: wrap; }
  .ps-qr svg { width: 196px; height: 196px; }
  .ps-upload { min-height: 50px; display: flex; align-items: center; justify-content: center; }

  /* sticky thumb action bars for cart & checkout (JS mounts them) */
  .mcta-bar {
    position: fixed; left: 0; right: 0; z-index: 89;
    display: flex; align-items: center; gap: 14px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 253, 249, .97);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -12px 34px rgba(61, 14, 21, .13);
    animation: sheetUp .38s var(--ease);
  }
  .mcta-bar .mcta-total { display: flex; flex-direction: column; line-height: 1.15; }
  .mcta-bar .mcta-total small { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
  .mcta-bar .mcta-total b { font-family: var(--ff-disp); font-size: 21px; color: var(--maroon-deep); font-variant-numeric: tabular-nums; }
  .mcta-bar .btn { flex: 1; margin: 0; min-height: 52px; white-space: normal; line-height: 1.2; }
  .mcta-bar { bottom: calc(64px + env(safe-area-inset-bottom)); }

  /* ── ORDER / SUCCESS PAGE ── */
  .order-logo { height: 52px; }
  .order-top { flex-wrap: wrap; gap: 6px; }
  .order-id { font-size: 12.5px; word-break: break-all; }
  .order-card .sum-row { font-size: 13.5px; }
  .pay-due-card { padding: 18px 16px; border-radius: 16px; }
  .pay-due-btns { flex-direction: column; }
  .pay-due-btns .btn { width: 100%; min-height: 50px; }
  .pp-banner { border-radius: 14px; padding: 12px 14px; font-size: 13.5px; margin-bottom: 14px; }
  /* order tracker scrolls sideways instead of crushing its labels */
  .tracker-wrap { padding: 16px 12px 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tracker-head { margin-bottom: 12px; }
  .tracker-wrap .stages { min-width: max-content; }
  .st-step { min-width: 74px; }
  .st-step b { font-size: 10.5px; }

  /* invoice */
  .inv-page { padding: 16px 0 50px; }
  .inv-sheet { padding: 18px 14px; border-radius: 14px; }
  .inv-head { flex-wrap: wrap; gap: 10px; }
  .inv-meta { margin-left: 0; text-align: left; }
  .inv-tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── ACCOUNT ── */
  .acct-wrap { padding: 22px 0 6px; }
  .acct-hero { padding: 20px 18px; border-radius: 18px; }
  .ah-av { width: 52px; height: 52px; font-size: 20px; }
  .ah-id b { font-size: 19px; }
  .acct-tiles { grid-template-columns: 1fr 1fr !important; gap: 10px; margin: 18px 0; }
  .acct-tile { padding: 13px; border-radius: 15px; gap: 10px; }
  .at-ic { width: 40px; height: 40px; border-radius: 12px; font-size: 17px; }
  .at-tx b { font-size: 14.5px; }
  .at-tx small { font-size: 11px; }
  .at-go { display: none; }
  .acct-sec { padding: 18px 16px; border-radius: 16px; }
  .addr-card { padding: 15px; }
  .ac-actions .btn { flex: 1; }

  /* ── ADMIN — a proper phone console ── */
  .admin-shell { display: block; min-height: 100dvh; }
  .adm-side {
    position: sticky !important; top: 0; z-index: 80; height: auto;
    overflow: visible;
    padding: 10px 10px calc(8px + env(safe-area-inset-top));
    border-radius: 0 0 18px 18px;
  }
  .adm-nav a[href="#/"] { margin-top: 0 !important; flex: 0 0 auto; }
  .adm-logo { padding: 4px 8px 12px; margin-bottom: 8px; }
  .adm-logo img { height: 28px; }
  .adm-logo b, .adm-logo small { display: none; }
  .adm-nav {
    display: flex !important; grid-template-columns: none !important;
    gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
  }
  .adm-nav::-webkit-scrollbar { display: none; }
  .adm-nav a {
    flex: 0 0 auto; padding: 9px 14px; border-radius: 20px; font-size: 12.5px;
    white-space: nowrap; margin-bottom: 0; min-height: 40px;
  }
  .adm-nav a .ic { width: 17px; height: 17px; }
  .adm-main { padding: 16px 12px 90px !important; }
  .adm-head { margin-bottom: 18px; gap: 10px; }
  .adm-head h2 { font-size: 23px; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
  .stat { padding: 15px 14px; border-radius: 15px; }
  .stat b { font-size: 22px; }
  .stat span { font-size: 11px; }
  .adm-card { padding: 15px 14px; border-radius: 16px; margin-bottom: 14px; }
  .adm-card h3 { font-size: 17px; margin-bottom: 12px; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; white-space: nowrap; }
  /* tables become swipeable cards, never crush their columns */
  .adm-table-wrap, .mc-table-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-radius: 14px; border: 1px solid var(--line); margin: 0 -2px;
  }
  .adm-table, .settle-table, .mc-table { font-size: 12.5px; min-width: 560px; }
  .adm-table th { padding: 10px 9px; font-size: 9.5px; }
  .adm-table td { padding: 10px 9px; }
  .adm-table img { width: 40px; height: 40px; }
  .adm-table select { font-size: 15px; padding: 8px; }
  /* multi-column inline-grid admin toolboxes stack instead of overflowing */
  .adm-main [style*="grid-template-columns"][style*="auto"] { grid-template-columns: 1fr !important; gap: 8px; }
  .adm-main [style*="grid-template-columns: 2.2fr"],
  .adm-main [style*="grid-template-columns: 1.6fr"],
  .adm-main [style*="grid-template-columns: 1.2fr 1fr 1fr"],
  .adm-main [style*="grid-template-columns: .8fr"] { grid-template-columns: 1fr !important; gap: 8px; }
  .drop-zone { padding: 24px 16px; }
  #admChart { height: 220px; }
  .mc-stamp { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; }
  .mc-stamp .mc-ver { margin-left: 0; }

  /* tight 3-up stat rows (referrals, passbook, B2B headline numbers) */
  .ref-stats, .svb-top, .b2b-stats { gap: 8px; }
  .ref-stats > div, .svb-top > div, .b2b-stats > div { padding: 12px 8px; border-radius: 13px; }
  .ref-stats b, .svb-top b { font-size: 17px; }
  .ref-stats small, .svb-top small { font-size: 10px; }

  /* ── BULLION DESK ── */
  .bd-deals .adm-table-wrap { margin-inline: -16px; border-radius: 0; border-inline: none; }
  .bullion-door { padding: 18px; }
  .bd-call-fab { bottom: calc(76px + env(safe-area-inset-bottom)); }

  /* ── B2B / WHOLESALE ── */
  .wp-grid, .b2b-grid { grid-template-columns: 1fr !important; gap: 16px; }
  .b2b-form-card, .wp-form-card { padding: 20px 16px; }
  .b2b-gate { padding: 32px 18px; }
  .b2b-gate h2 { font-size: 24px; }

  /* ── POLICY / PRIVACY / LEGAL SHEETS ── */
  .priv-hero-card { padding: 22px 18px; }
  .priv-facts { grid-template-columns: 1fr 1fr; gap: 9px; }
  .pfact { padding: 13px 9px; border-radius: 13px; }
  .ps-body { padding: 15px 15px 18px; font-size: 13.5px; }
  .priv-sec summary { padding: 15px 16px; font-size: 12px; }

  /* ── FINALE / CAMPAIGN PAGES ── */
  .pco-prime { padding: 20px 16px; }
  .finq { font-size: 14px; }
  .fin-hero h1 { font-size: clamp(26px, 8vw, 36px); }

  /* ── CARE / QUOTE / CONTACT ── */
  .care-grid, .contact-grid, .story-grid, .quote-sheet, .sizer-grid { grid-template-columns: 1fr !important; }
  .quote-sheet { padding: 20px 16px; }
  .st-step { min-width: 70px; }

  /* ── trust / hallmark / services blocks ── */
  .trust-grid, .testi-grid, .svc-grid, .team-grid, .rate-cards,
  .pillars, .cb-grid, .f-body, .foot-grid-lux { grid-template-columns: 1fr 1fr !important; }
  .svc, .trust, .testi, .pillar, .pfact { padding: 17px 14px; }

  /* ── FOOTER — bleed the dark panel behind the floating bottom nav
        (only where the mnav is mounted; product/admin/partner hide it) ── */
  body:not([data-page="product"]):not([data-page="admin"]):not([data-page="partner"]) .footer {
    margin-bottom: calc(-1 * (60px + env(safe-area-inset-bottom)));
    padding-bottom: calc(24px + 60px + env(safe-area-inset-bottom));
  }
  .footer .foot-grid, .foot-grid-lux { grid-template-columns: 1fr 1fr !important; gap: 18px; }
  .footer .f-brand-col, .footer .fl-news { grid-column: 1 / -1; }
  .footer h4, .f-col h4 { font-size: 13px; }
  .footer a, .f-col a { font-size: 12.5px; padding: 4px 0; min-height: 32px; display: inline-flex; align-items: center; }
  .foot-legal { flex-direction: column; gap: 8px; text-align: center; }

  /* ── mini-bag drawer ── */
  .mc-drawer { width: 100% !important; max-width: 440px; border-radius: 22px 22px 0 0; }
  .mc-head { padding: 16px 18px 12px; }
  .mc-body { padding: 12px 14px; }
  .mc-line { grid-template-columns: 58px 1fr 24px; padding: 9px; }
  .mc-line img { width: 58px; height: 58px; }
  .mc-foot { padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); }

  /* pdf / catalogue viewer */
  .pdf-bar { padding: 10px 14px calc(10px + env(safe-area-inset-top)); flex-wrap: wrap; gap: 8px; }
  .pdf-title { font-size: 17px; }
  .pdf-actions .btn { padding: 9px 13px; }

  /* misc */
  .qty-banner { font-size: 12.5px; padding: 13px 15px; border-radius: 12px; }
  .pay-strip { gap: 6px; }
  .pay-chip { height: 28px; font-size: 9.5px; }
  .mc-table { min-width: 420px; }
  .newsletter { padding: 34px 18px; }
  .nps-card { padding: 18px 16px; }
  .empty { padding: 80px 22px !important; }
  .empty-logo { max-width: 170px; }
  video, iframe, embed { max-width: 100%; }
  .review-media img, .rev-photo img { width: 100%; height: auto; }
}

/* ───────────────────── 3 · SMALL PHONES ≤380 ───────────────────── */
@media (max-width: 380px) {
  .container { padding-inline: 13px; }
  .header-in.header-top { gap: 2px; }
  .header-top .icon-btn { width: 38px; height: 38px; }
  .header-top .icon-btn svg { width: 18px; height: 18px; }
  .brand { padding: 3px 8px; }
  .header-top .brand-logo { height: 28px; }
  /* compare icon moves into the drawer on tiny screens; the fixed tray
     still appears whenever items are selected */
  .compare-btn { display: none !important; }
  .p-grid { gap: 9px; }
  .pc-body { padding: 10px 9px 11px; }
  .pc-name { font-size: 13.5px !important; }
  .pc-price b { font-size: 14.5px; }
  .cat-mini { grid-template-columns: repeat(3, 1fr) !important; }
  .acct-tiles { grid-template-columns: 1fr !important; }
  .stat-grid { grid-template-columns: 1fr; }
  .trust-grid, .testi-grid, .svc-grid, .team-grid, .rate-cards,
  .pillars, .cb-grid, .footer .foot-grid, .foot-grid-lux { grid-template-columns: 1fr !important; }
  .hero-cta .btn { font-size: 11px; padding: 12px; }
  .hero-trust span:nth-child(3) { display: none; }
  .modal { padding-inline: 15px; }
  .mcta-bar { padding-inline: 12px; }
  .mcta-bar .mcta-total b { font-size: 18px; }
  .mcta-bar .btn { font-size: 11px; padding-inline: 12px; }
  .pd-cta-row { flex-direction: column; }
  .pd-cta-row .btn { width: 100%; }
  .pp-banner { font-size: 12.5px; }
  .c-slide { min-height: 360px; }
  .poster-xl { min-height: 300px; }
  .adm-main { padding-inline: 10px !important; }
  .otp-row input, .shv-otp input { width: 40px !important; height: 52px !important; font-size: 19px !important; }
}

/* ───────────────────── 4 · TABLET REFINEMENTS 601–900 ───────────────────── */
@media (min-width: 601px) and (max-width: 900px) {
  .p-grid { grid-template-columns: repeat(3, 1fr); }
  .acct-tiles { grid-template-columns: repeat(3, 1fr) !important; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .container { padding-inline: 22px; }
  .adm-nav { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; }
}

/* ───────────────────── 5 · SHORT LANDSCAPE PHONES ───────────────────── */
@media (max-width: 920px) and (max-height: 500px) and (orientation: landscape) {
  .modal { max-height: 96dvh; border-radius: 18px; }
  .modal::before { display: none; }
  .hero { min-height: auto; padding: 28px 0; }
  .hero-stage { display: none; }
  .mnav { display: none; }
  body { padding-bottom: 16px; }
  .wa-fab, .compare-tray { bottom: 14px; }
  /* nav is gone in landscape — stick the CTA bar to the screen edge */
  .mcta-bar { bottom: env(safe-area-inset-bottom); }
  .cart-layout { padding-bottom: 110px; }
}

/* ───────────────────── 6 · MOTION SAFETY ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  .modal, .nav, .mc-drawer, .filters, .mcta-bar, .toast { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ════════════════════════════════════════════════════════════════════════
   v97 — THE UNICORN PASS
   Nothing below was guessed. Every rule repairs a defect that was proved by
   simulating the *real* CSS cascade at 320 / 360 / 390 / 430 px
   (qa/mobile_audit.py + qa/mobile_legibility.py + qa/css_why.py), which
   evaluates specificity, source order, !important and @media exactly like a
   browser does. Four families of defect were found:

     A · CASCADE DEFEATS  — a v95 phone rule existed but LOST (a later
                            !important in styles.css beat it), so the fix
                            never rendered.            → §2
     B · DEAD SELECTORS   — a v95 phone rule targeted a class name that does
                            not exist in the app, so it matched nothing.
                                                     → §1
     C · LEGIBILITY       — micro-type that WINS on a phone: 7.0–9.6px.
                            A jewellery storefront must be readable.   → §3
     D · GEOMETRY         — rigid multi-track grids, oversized display type,
                            60–120px desktop gutters, and `1fr` tracks whose
                            implicit `auto` minimum lets a long price blow the
                            grid wider than the screen.               → §5–§9

   Plus a tap-target floor (§4), an overflow guard (§0) and scroll-cost
   containment (§10). Nothing is hidden, removed or de-featured — the same
   content, rescaled for a thumb.
   ════════════════════════════════════════════════════════════════════════ */

/* ─────────────── §0 · OVERFLOW GUARD & SCROLL FEEL ───────────────
   The single most common "site is not mobile friendly" symptom is a page that
   pans sideways. v97 tried to stop that with one root-level `overflow-x: clip`.
   That was the wrong lever: the fix belongs on the element that overflows, not
   on the scrollport that contains it. v98 keeps the goal and changes the
   mechanism — shrink the offenders, never clip the page. */
/* v98 REVERTED — `html { overflow-x: clip }` was removed.
   The root element's overflow propagates to the viewport, and v95 already sets
   `html { height: 100% }` on phones; putting a clip there broke vertical
   scrolling on the handset. Horizontal overflow is instead prevented at its
   source: §8 gives every nowrap flex/grid child `min-width:0` + ellipsis so it
   shrinks, §9 gives unwrapped tables their own scroller, and the image guard
   below stays. That covers the real causes without touching the scrollport. */
@media (max-width: 768px) {
  /* an image can never be the thing that widens the page */
  #view img, .footer img, .modal img { max-width: 100%; }
  /* `1fr` == `minmax(auto,1fr)`: an unbreakable price or HUID can stretch a
     track past the viewport.

     v98 CHANGED APPROACH. v97 re-declared `grid-template-columns` with
     `minmax(0,1fr)` — but a grid-template-columns declaration cannot be
     scoped to "phones" without colliding with the bands this file already
     owns: at ≤768 it clobbered v95's 601–900px tablet band (3 product
     columns became 2), and at ≤380 it clobbered v95's small-phone band
     (.cat-mini 3→4, .acct-tiles 1→2, .stat-grid 1→2). Two regressions from
     one well-intentioned rule.

     `min-width: 0` on the grid ITEMS fixes the identical blowout without
     naming a column count at all, so it composes with every band instead of
     fighting them. A grid item's automatic minimum is `auto`; zeroing it lets
     the item shrink and lets the track honour whatever column count the
     winning band asked for. */
  .p-grid > *, .cat-mini > *, .acct-tiles > *, .stat-grid > *,
  .priv-facts > *, .pd-perks > *, .search-sugg > *, .mth-rail > *,
  .bd-gridhead > *, .bd-row > *, .ref-stats > *, .svb-top > *,
  .b2b-stats > *, .dw-tiles > *, .otp-boxes > *, .rate-strip-in > * {
    min-width: 0;
  }
}

@media (max-width: 768px) {

  /* ─────────────── §1 · DEAD-SELECTOR REPAIRS ───────────────
     These v95 rules were written against class names the app does not use, so
     they matched zero elements. Re-pointed at the real names found in
     index.html / js/app.js. */
  .shop-bar, .shop-catbar { flex-wrap: wrap; gap: 10px; }   /* was .shop-head/.shop-toolbar */
  .shop-bar { margin-bottom: 14px; }
  .shop-bar .res { font-size: 13px; width: 100%; }
  .shop-bar .res b { font-size: 15.5px; }
  .pc-tags { gap: 5px; }                                     /* was .pc-tag */
  .pc-tags .tagx, .pc-tags .pill { font-size: 10px; padding: 4px 9px; }
  .rev-photo img, .rv-photos img { width: 100%; height: auto; }  /* was .review-media */
  .footer h4, .foot-col h4 { font-size: 13px; }              /* was .f-col */
  .footer a, .foot-col a {
    font-size: 12.5px; padding: 5px 0; min-height: 34px;
    display: inline-flex; align-items: center;
  }
  .finale-hero h1 { font-size: clamp(26px, 8vw, 36px); }     /* was .fin-hero */
  .finale-hero { padding: 40px 0 34px; }
  /* OTP: 6 boxes must stay ≥44px wide and keep a legible digit */
  .otp-boxes { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  .otp-boxes input { font-size: 19px; border-radius: 11px; aspect-ratio: .78; }

  /* ─────────────── §2 · CASCADE-DEFEAT REPAIRS ───────────────
     Proven with qa/css_why.py: styles.css declares
       .page-hero{padding:clamp(52px,7vw,86px) 0 clamp(48px,6vw,74px)!important}
     at source order 2159. v95's `.page-hero{padding:38px 0 34px}` (order 4553)
     has no !important, so it LOST — all 14 page banners were burning ~100px of
     a phone's vertical budget on empty maroon. */
  .page-hero { padding: 34px 0 30px !important; }
  .page-hero::before, .page-hero::after { width: 30px; height: 30px; }

  /* The home hero: styles.css pins .hero-in to min(86svh,700px) with a 34svh
     top pad, then v95 added 40px+34px of section padding on top — ≈1.15 screens
     of hero. Trim the OUTER padding so the photo panel lands flush under the
     sticky header and the next section peeks in to invite the scroll. */
  .hero { padding: 0 0 20px !important; }
  .hero-in { min-height: min(84svh, 660px) !important; }
  @supports not (height: 1svh) { .hero-in { min-height: min(84vh, 660px) !important; } }

  /* v95's admin inline-grid overrides were written WITH a space after the
     colon (`grid-template-columns: 2.2fr`) but admin.js emits them WITHOUT one
     (`grid-template-columns:2.2fr 1fr 1fr .7fr auto`), so 3 of the 6 hostile
     5–8-track grids never collapsed. Match both spellings. */
  .admin-shell [style*="grid-template-columns:1.2fr"],
  .admin-shell [style*="grid-template-columns: 1.2fr"],
  .admin-shell [style*="grid-template-columns:1fr 1.6fr"],
  .admin-shell [style*="grid-template-columns: 1fr 1.6fr"],
  .admin-shell [style*="grid-template-columns:2.2fr"],
  .admin-shell [style*="grid-template-columns: 2.2fr"],
  .admin-shell [style*="grid-template-columns:.8fr"],
  .admin-shell [style*="grid-template-columns: .8fr"],
  .admin-shell [style*="grid-template-columns:1fr 1fr 2fr"],
  .admin-shell [style*="grid-template-columns: 1fr 1fr 2fr"],
  .admin-shell [style*="grid-template-columns"][style*="auto"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px;
  }
  /* a 2-track inline row is still pleasant side-by-side on a phone */
  .admin-shell [style*="grid-template-columns:1fr 1fr;"],
  .admin-shell [style*="grid-template-columns: 1fr 1fr;"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* ─────────────── §3 · LEGIBILITY FLOOR ───────────────
     157 sub-10.5px font-size declarations exist; these are the ones that
     actually WIN at 360px. Floor: 10px for letterspaced micro-labels, 10.5px
     for anything a customer needs to read, 11px for prices and numbers.
     Letter-spacing is trimmed in step so the longer strings still fit. */

  /* home hero — the first thing anyone sees. `.hstat span` was winning at 7.0px
     (styles.css @680) and `.hs-tag` at 7.5px: physically unreadable. */
  .hstat span { font-size: 10px !important; letter-spacing: .05em; line-height: 1.35; }
  .hstat b { font-size: 19px; }
  .hs-tag { font-size: 10px !important; letter-spacing: .06em; }
  .hero-trust { font-size: 10px; letter-spacing: .1em; }
  .hero-kicker { font-size: 10px; letter-spacing: .18em; }

  /* bottom navigation — the most-tapped control on the entire site */
  .mnav a { font-size: 10.5px; letter-spacing: .01em; }
  .mnav a svg { width: 22px; height: 22px; }
  .badge { font-size: 10px; min-width: 17px; height: 17px; padding: 0 4px; }

  /* nav drawer */
  .dw-sec { font-size: 10px; letter-spacing: .18em; }
  .dw-tile span { font-size: 10.5px; }
  .dw-head small { font-size: 10.5px; }

  /* shop rail + product cards */
  .cat-mini-card b { font-size: 10px; line-height: 1.25; }
  .pc-tags .tagx { font-size: 10px; }
  .pc-quick { font-size: 10.5px; }
  .gal-hint { font-size: 10px; }

  /* footer */
  .seal small, .seal-medallion small, .seal-medallion span { font-size: 10px; letter-spacing: .04em; }
  .pay-chip { font-size: 10px; height: 30px; }
  .ub-jwl span { font-size: 10px; }

  /* trust / social proof */
  .rev-ver, .rte-badge, .ugc-badge, .verified-badge, .apg-tag {
    font-size: 10px; letter-spacing: .05em;
  }
  .cmp-tag, .mp-kicker, .pco-kicker, .ds-hero .k, .mp-ring-tx > small { font-size: 10.5px; }

  /* bullion desk — a dense trading board, but 7.5px is not a density excuse */
  .bd-feedtime, .bd-spotsrc { font-size: 10px; }
  .bd-kar small, .bd-stats small, .bd-ba small, .bd-fba small,
  .bd-intl-it em, .bd-intl-it small, .bd-ratio, .bd-futunit, .mm-cat b,
  .mp-chip span { font-size: 10px; }
  .bd-basis, .bd-navcnt, .bd-tickstate, .bd-band, .bd-card-h, .bd-lh,
  .bd-lhline, .bd-pct, .bd-pctchip, .bd-live, .bd-live-tag, .bd-sum-h,
  .bd-sum-b, .bd-track span, .bd-deal-grid small, .bd-desc em, .bd-desc small,
  .bd-gridhead, .bd-kicker, .bd-news small, .bd-hstat small, .bd-pcard-h,
  .bd-pcard-lh, .bd-chart-lims, .bd-feed, .bd-topbar-v79 .bd-feed,
  .bd-topbar-v79 .bd-live.v79, .bd-desc em.bd-time {
    font-size: 10.5px;
  }
  .bd-tabs a, .bd-tabs-v79 a { font-size: 10.5px; letter-spacing: 0; }
  .bd-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .bd-tabs a { min-width: 0; }
  .bd-tabs a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bd-centerbtn { width: 50px; height: 50px; margin-top: -18px; }

  .fin-panel .fin-tag, .fh-badge small, .fb-chips li, .fin-eng small,
  .finale-cd .fc-cell span, .fc-cell span, .finq-pill, .finq-chip,
  .finq-decl-t, .fp-chip, .fin-prize .fp-gold, .fh-badge { font-size: 10.5px; }

  /* hallmark / trust / policies / misc */
  .hm-card .label, .trust-docs-intro .label, .ac-label, .ah-tier, .atl-hint,
  .bbr-label, .bbr-split small, .dsf-label, .dsf-w small, .f-stats span,
  .hero-3d-hint, .hero-cue, .jh-badge, .kyc-badge, .lux-badge, .mc-stamp .mc-ver,
  .mp-num span, .pd-stamp, .ph-trust, .ps-tab small, .rte-tag, .sd-tx em.shv-rec,
  .st-step small, .sum-logo span, .sz-ruler .tick b, .tagx, .ub-live,
  .svb-top small, .mth-cell small, .pf-f > label, .bl-rate small,
  .catlog-cover .feat, .hs-badge small, .offer-seal span, .offer-seal b small,
  .c-body .label, .adm-table th {
    font-size: 10.5px;
  }
  .st-step b { font-size: 11px; }
  .ref-stats small, .svb-top small { font-size: 10.5px; }
  .shv-aud-btn .au-tx small { font-size: 10.5px; }
  .mt-bars i span { font-size: 10.5px; }

  /* ─────────────── §4 · TAP-TARGET FLOOR (44px) ───────────────
     Real controls that were winning below 40px. Decorative pseudo-elements
     (dots, rules, glows) are deliberately left alone. */
  .dw-close, .mc-close, .pdf-close, .modal-close { width: 44px; height: 44px; }
  .cb-arrow { width: 44px; height: 44px; }
  .gal-nav { width: 44px; height: 44px; }
  .hm-text-link { min-height: 44px; display: inline-flex; align-items: center; }
  /* styles.css ships its own `@media (max-width:680px)` block that SHRINKS the
     portal/design filter bar with !important — .pf-chip down to 34px, .ds-qty
     buttons to 40px, .pf-f inputs to 40px @ 11px. Those beat a plain
     declaration here, so this needs !important too. mobile.css is the last
     stylesheet in index.html, so at equal specificity + equal importance the
     later file wins. 44px is the floor for anything a thumb must hit; 16px on
     inputs stops iOS Safari zooming the whole page on focus. */
  .pf-chip {
    min-height: 44px !important; padding: 10px 15px !important;
    font-size: 12.5px !important; letter-spacing: .02em !important;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .ds-qty button { min-width: 44px !important; min-height: 44px !important; }
  .ds-qty { min-height: 44px !important; }
  .pf-f select, .pf-f input, .ds-filters select, .dsf-w input {
    min-height: 44px !important; font-size: 16px !important;
  }
  /* carousel dots: 9px of paint, a real finger target — but the hit area must
     NOT exceed the dot pitch or neighbouring dots overlap and a tap fires the
     wrong slide. v97 used inset:-16px -13px (a 35px box) against a 9px gap =
     an 18px pitch, so hit areas overlapped by ~17px each side and the carousel
     felt broken. v98 widens the gap to 26px so pitch == hit box == 35px: the
     targets tile exactly, with zero overlap. The visible dot stays 9px. */
  .c-dots { gap: 26px; }
  .c-dot { position: relative; }
  .c-dot::after { content: ''; position: absolute; inset: -13px; }
  /* v95 shrank these with transform:scale(), which (a) takes the +/- buttons
     under the 44px floor and (b) renders the glyphs blurry on Android because
     a scaled layer is rasterised once. Real sizes instead of a scale. */
  .qty-row { transform: none !important; gap: 8px; }
  .qty-row button { min-width: 44px; min-height: 44px; font-size: 18px; }
  .qty-row b { min-width: 40px; font-size: 15px; text-align: center; }
  /* motion.css scales the mini-cart's stepper to 84% and app.js inlines
     scale(.86) on the cart's — both take the +/- buttons to ~34px (under the
     44px floor) and rasterise the glyphs at a fractional size, so they render
     soft on Android. The !important above defeats the inline one; this defeats
     the (0,2,0) descendant rule in motion.css. */
  .mc-line-b .qty-row { transform: none !important; }
  .mc-line-b .qty-row button { min-width: 42px; min-height: 42px; font-size: 17px; }
  .mc-line-b .qty-row b { min-width: 34px; font-size: 14.5px; }
  .poster .flash-countdown { transform: none !important; }
  .flash-countdown .fc-cell { padding: 8px 6px; }
  .flash-countdown .fc-cell b { font-size: 15px; }

  /* ─────────────── §5 · RIGID GRIDS → PHONE TRACKS ───────────────
     Each of these was proven (qa/css_why.py) to WIN at 320px with a track
     count that leaves no room for its own content. */

  /* bullion board rows: the ≤560 winner was 1.45fr .82fr .82fr .78fr, i.e. four
     fractional tracks with an `auto` minimum — a long rate string stretches the
     whole board past the screen. Zero-minimum tracks + tighter numerals. */
  .bd-gridhead, .bd-row {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, .85fr) minmax(0, .85fr) minmax(0, .8fr) !important;
    gap: 4px;
  }
  .bd-gridhead { font-size: 10px; }
  .bd-row { font-variant-numeric: tabular-nums; }
  .bd-karstrip, .bd-pgrid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 7px; }
  .bd-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* 3-up stat rows: keep three columns (they are single numbers) but give the
     tracks a zero minimum and let long values shrink instead of overflowing */
  .ref-stats, .svb-top, .b2b-stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 7px; }
  .ref-stats b, .svb-top b, .b2b-stat b { font-size: 16px; overflow-wrap: anywhere; }
  .svb-row { grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; }

  /* certificate locker: minmax(280px,…) leaves 14px of slack on a 320px phone */
  .cert-locker { grid-template-columns: minmax(0, 1fr) !important; }
  .fine-grid { grid-template-columns: minmax(0, 1fr) !important; }

  /* nav drawer category tiles: 4 square tiles is right, they just need a
     zero minimum so a long category name cannot stretch the drawer */
  .dw-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; padding: 4px 16px 2px; }

  .mth-rail { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px; }
  .rate-strip-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mega-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* ─────────────── §6 · FLUID DISPLAY TYPE ───────────────
     Desktop display sizes that resolve far too large on a phone. Each keeps
     its decorative presence but is re-clamped against vw so it scales with the
     device instead of against it. */
  .ms-big { font-size: clamp(38px, 11vw, 52px); }
  .vc-num { font-size: clamp(36px, 10.5vw, 50px); }
  .sn-num, .s-band .sn-num { font-size: clamp(34px, 10vw, 48px) !important; }
  .c-wm { font-size: clamp(40px, 13vw, 64px); }
  .nd-num { font-size: clamp(30px, 9vw, 42px); }
  .bbr-amt, .svr-gold { font-size: clamp(28px, 8.4vw, 40px); }
  .jh-val { font-size: clamp(26px, 8vw, 34px); }
  .finq-big { font-size: clamp(26px, 8vw, 34px); }
  .pco-orn { font-size: 40px; }
  .bg-orn { font-size: 34px; }
  .pd-total b { font-size: clamp(26px, 7.6vw, 32px); }
  .mp-num b { font-size: clamp(30px, 9vw, 44px); }
  .price-lock b { font-size: clamp(30px, 9vw, 44px); }
  .si-n { font-size: 28px; }
  .ugc-score .big, .empty .big { font-size: 32px; }
  .inv-wm { font-size: 26px; }
  .newsletter h3 { font-size: clamp(22px, 6.6vw, 28px); }
  .hm-card h2 { font-size: clamp(23px, 7vw, 30px); }
  .hm-hero h1 { font-size: clamp(26px, 8vw, 36px); }
  .trust-hero h1 { font-size: clamp(27px, 8.2vw, 38px); }
  .trust-next h2 { font-size: clamp(22px, 6.6vw, 28px); }
  .lux-hero h1 { font-size: clamp(26px, 8vw, 36px); }
  .mtl-prime h3 { font-size: clamp(22px, 6.6vw, 28px); }
  .ph-left h2 { font-size: clamp(23px, 7vw, 30px); }
  .pcmp-toolbar h2 { font-size: clamp(22px, 6.6vw, 28px); }
  .bbc-head h2 { font-size: clamp(21px, 6.4vw, 27px); }
  .fb-title { font-size: clamp(22px, 6.6vw, 28px); }
  .fin-eng em { font-size: clamp(23px, 7vw, 30px); }
  .fin-close h3 { font-size: clamp(21px, 6.4vw, 27px); }

  /* ─────────────── §7 · VERTICAL RHYTHM ───────────────
     60–120px desktop gutters, re-scaled. Less dead space = fewer scrolls to
     the thing the customer actually came for. */
  .lux-wrap { padding: 34px 0 56px; }
  .lux-cta { padding: clamp(26px, 7vw, 34px); }
  .pcmp-empty { padding: 56px 20px 64px; }
  .hm-page { padding: 20px 0 44px; }
  .trust-page { padding: 22px 0 44px; }
  .trust-loading { padding: 44px 20px; }
  .cert-page { padding: 20px 0 44px; }
  .mc-empty { padding: 44px 20px; }
  .dw-foot { padding: 18px 18px calc(88px + env(safe-area-inset-bottom, 0px)); }
  .f-cornice { padding: 22px 16px 0; }
  .trust-hero-grid { gap: 26px; }
  .fin-close { padding: clamp(28px, 8vw, 38px) 18px; }
  .fin-tl { padding-left: 40px; }
  .finale-hero .fh-in { gap: clamp(20px, 5.6vw, 30px); }
  .fb-wrap { gap: clamp(18px, 5vw, 26px); }
  .fin-prize .fp-in { gap: clamp(18px, 5vw, 26px); }
  .mtl-stats, .vault-grid { margin-bottom: clamp(32px, 9vw, 48px); }

  /* ─────────────── §8 · OVERFLOW-SAFE FLEX CHILDREN ───────────────
     `white-space:nowrap` on a flex/grid child is only safe when that child can
     shrink. Without `min-width:0` the child refuses to shrink below its
     content and pushes the whole row wider than the screen. These pairs were
     all proven to win at 320px. */
  .ub-rates {
    min-width: 0; overflow: hidden; text-overflow: ellipsis;
    gap: 12px; font-size: 11.5px;
  }
  .utilbar-in { min-width: 0; }
  .ub-left, .ub-right { min-width: 0; flex: 0 1 auto; }
  .pd-stickybar { min-width: 0; }
  .pd-stickybar .ps-name {
    min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; flex: 0 1 auto;
  }
  .ps-wa { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .see-all { min-width: 0; flex: 0 0 auto; }
  .sec-head { min-width: 0; }
  .sec-head > div, .sec-head h2, .sec-head .sub { min-width: 0; }
  .pc-quick { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .mc-line-tx, .mc-line-tx .ci-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .portal-pill { min-width: 0; max-width: 116px; overflow: hidden; }
  .portal-pill span { overflow: hidden; text-overflow: ellipsis; }
  .pf-count, .cc-go, .ph-right .cs-cap, .rev-ver, .rte-badge, .bbc-unit,
  .kyc-status, .kyc-verify-btn, .finq-pill, .prof-meter b, .svl-row b,
  .cb-item b, .dss-row b, .cmp-card li b, .bd-live b {
    min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  }
  .cert-tbl td.num, .q-tbl .num { white-space: nowrap; font-variant-numeric: tabular-nums; }

  /* ─────────────── §9 · TABLES WITH NO SCROLL WRAPPER ───────────────
     `.pcmp-table`, `.adm-table` and `.mc-table` sit inside an `overflow:auto`
     wrapper, so their min-width is a feature. But the privacy page renders
     `<table class="mc-table priv-table">` DIRECTLY inside `.ps-body` — with
     min-width 420–680px and no scroller, that single table was enough to make
     the whole page pan sideways. Give any unwrapped table its own scroller. */
  .ps-body { min-width: 0; }
  /* v98 narrowed: v97 also forced `display:block` on .cert-tbl / .q-tbl /
     .inv-tbl. .inv-tbl already had that from v95, and the other two sit in
     wrappers that scroll, so re-declaring them only risked changing tables
     that already worked. This now targets the ONE table proven to be
     unwrapped: `<table class="mc-table priv-table">` inside `.ps-body`. */
  .ps-body > table, .ps-body table.priv-table {
    display: block; width: 100%; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .ps-body > table::-webkit-scrollbar,
  .ps-body table.priv-table::-webkit-scrollbar { display: none; }
  .priv-table { min-width: 460px; font-size: 12.5px; }
  .priv-table th, .priv-table td { padding: 10px 11px; }

  /* ─────────────── §10 · SCROLL COST ───────────────
     v98 REVERTED — `content-visibility:auto` was removed from `.rev-marquee`
     and `.footer`. It caused the reported gap on the home page: an off-screen
     element is not rendered, so the browser substitutes
     `contain-intrinsic-size` as a placeholder, and I had guessed 620px for
     both. The review marquee is really ~270px tall (so ~350px of empty band
     appeared where it sits on the home page) and the palatial footer is far
     TALLER than 620px (so it reserved too little and jumped the scrollbar).
     `auto 620px` only self-corrects AFTER an element has rendered once, which
     does not help the first paint — exactly when a gap is most visible.
     Guessing an intrinsic size without a browser to measure it is not a trade
     worth making; the animation cost is better addressed once it can be
     measured on a real device. */
  /* `backdrop-filter` is one of the most expensive things a mobile GPU does,
     and it is invisible here: .mcta-bar already paints a .97-opaque backdrop. */
  .mcta-bar { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ─────────────── §11 · SMALL PHONES ≤380 ─────────────── */
@media (max-width: 380px) {
  .page-hero { padding: 28px 0 24px !important; }
  .page-hero h1 { font-size: clamp(22px, 6.8vw, 27px); }
  .hstat span { font-size: 9.5px !important; letter-spacing: .03em; }
  .hstat b { font-size: 17px; }
  .mnav a { font-size: 10px; padding: 6px 4px; }
  .mnav a svg { width: 20px; height: 20px; }
  .bd-gridhead, .bd-row {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, .75fr) !important;
    font-size: 11px;
  }
  .bd-tabs a, .bd-tabs-v79 a { font-size: 10px; }
  .bd-centerbtn { width: 46px; height: 46px; margin-top: -16px; font-size: 19px; }
  .otp-boxes { gap: 4px; }
  .otp-boxes input { font-size: 17px; border-radius: 10px; }
  .ref-stats b, .svb-top b, .b2b-stat b { font-size: 15px; }
  .dw-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 4px 13px 2px; }
  .mth-rail { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .qty-row button { min-width: 42px; min-height: 42px; }
  .cat-mini-card b { font-size: 9.5px; }
}

/* ─────────────── §12 · SHORT / LANDSCAPE PHONES ───────────────
   A 360×640-ish landscape viewport has very little height; the hero's 84svh
   minimum would leave nothing for the content below it. */
@media (max-width: 920px) and (max-height: 480px) and (orientation: landscape) {
  .hero { padding: 0 0 14px !important; }
  .hero-in { min-height: 0 !important; padding-top: 24px !important; }
  .page-hero { padding: 22px 0 20px !important; }
  .fin-timeline { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .bd-tabs a span { font-size: 10px; }
}

/* ─────────────── §13 · SPECIFICITY REPAIRS ───────────────
   The v97 rules above are last in source order, but four of them still lost
   because the desktop rule carries MORE specificity, not merely a later
   position. Re-declared at matching specificity so they actually win.
   Verified with: python3 qa/css_why.py <class> <prop> 320 */
@media (max-width: 768px) {
  /* .bd-tabs.bd-tabs-v79 (0,2,0) beat .bd-tabs (0,1,0) */
  .bd-tabs.bd-tabs-v79 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .bd-tabs.bd-tabs-v79 a { font-size: 10.5px; letter-spacing: 0; }
  /* .bd-topbar-v79 .bd-tickstate (0,2,0) beat .bd-tickstate (0,1,0) */
  .bd-topbar-v79 .bd-tickstate, .bd-topbar-v79 .bd-live.v79 b { font-size: 10.5px; }
  /* .mega-panel .mega-grid (0,2,0) beat .mega-grid (0,1,0). The panel is
     display:none under 680px, so this is correctness rather than appearance. */
  .mega-panel .mega-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* longhand → shorthand, so nothing can re-assert the 66px desktop gutter */
  .fin-tl { padding: 0 0 0 40px; }
  /* the footer wordmark is decorative but must never be the widest thing on
     the page; .footer{overflow:hidden} contains it, this keeps it composed */
  .f-wordmark { font-size: clamp(50px, 15vw, 88px); letter-spacing: .1em; }
}

/* ─────────────── §14 · LAST TWO UNGUARDED nowrap BOXES ───────────────
   The only remaining `white-space:nowrap` winners with no shrink guard. Both
   are bullion-topbar chips, so they get the same clip-and-ellipsize treatment
   §8 gives every other row. */
@media (max-width: 768px) {
  .bd-pctchip, .bd-tickstate {
    min-width: 0; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   §15 · v99 TOUCH & COMPOSITOR PASS
   ────────────────────────────────────────────────────────────────────────
   Scoped to `(pointer: coarse)` — touch devices — and deliberately NOT to a
   width band. v97's mistake was declaring phone rules at ≤900px, which sat on
   top of v95's 601–900px tablet band and silently rewrote it. A pointer query
   cannot collide with any width band at all, so nothing here can reproduce
   that failure.

   Nothing in this section moves a single pixel of layout. It changes three
   things: who owns a gesture, what the compositor pays for the frosted chrome,
   and how a multi-line heading breaks.
   ════════════════════════════════════════════════════════════════════════ */

@media (pointer: coarse) {

  /* ── 15.1 · GESTURE OWNERSHIP ──────────────────────────────────────────
     (a) HORIZONTAL RAILS. Swiping a category rail that starts near the screen
         edge can be hijacked by the browser's back/forward swipe, so the
         shopper leaves the page instead of moving along the rail.
         `overscroll-behavior-x: contain` makes the rail own the gesture.
         The `-x` suffix is the whole point: it cannot influence vertical
         scrolling under any circumstances, so there is no mechanism by which
         this could recreate the v97 "page will not scroll" failure.

     (b) OPEN SHEETS. While a sheet or drawer is open the page behind it is
         already scroll-locked (html.no-scroll / body.drawer-open / _scrollLock
         in app.js), so containing the gesture costs the shopper nothing and
         stops the rubber-band from leaking into the locked page — the sheet
         feels like a surface sitting on top of the app rather than a hole in
         it. */

  /* (a) rails, strips and table scrollers — horizontal axis only */
  .hscroll, .catbar, .catbar2, .tabs, .stages, .acct-nav, .adm-nav,
  .sz-strip-wrap, .tracker-wrap, .compare-tray-thumbs,
  .adm-table-wrap, .mc-table-wrap, .pcmp-table-wrap, .inv-tbl,
  .ps-body > table, .ps-body table.priv-table {
    overscroll-behavior-x: contain;
  }

  /* (b) sheets and drawers — the page behind these is already locked */
  .modal, .filters, .search-drawer, .mega-panel, .auth-panel, .shv-card,
  .mc-body, .qv-tx, .svb-list, .adm-side {
    overscroll-behavior: contain;
  }

  /* ── 15.2 · FROSTED CHROME THAT v80 DID NOT ALREADY COVER ──────────────
     backdrop-filter re-blurs everything behind an element on every frame of a
     scroll, on the GPU. Surfaces pinned to the viewport pay that continuously.

     styles.css already has a `@media (max-width:820px)` "Scroll jank
     prevention" block (v80) that handles the three expensive ones with
     !important — `.header` goes fully solid with no blur at all, `.mnav` is
     cut to blur(8px), `.modal-overlay` to blur(3px) — so v99 deliberately does
     NOT touch those. Overriding a considered !important to save 4px of blur on
     a bar that is already 97% opaque is not a trade worth making.

     Two pinned surfaces were missed by that block and are fixed here:

         .utilbar       rgba(29,5,9,.92)      + blur(8px)   (styles.css:1105)
         .pd-stickybar  rgba(250,246,239,.97) + blur(12px)  (styles.css:703)

     At .92–.97 opacity only 3–8% of the backdrop is visible, so the blur is
     doing almost nothing visually while costing full price — .pd-stickybar
     blurs 12px behind 97% opaque paint, which is indistinguishable from no
     blur. Only the radius is reduced; both background colours are left exactly
     as they are, so there is no visible change to find.

     Overlays that do not move during a scroll (.drawer-scrim, .fsheet-overlay,
     .shv-backdrop) are left alone: their blur is computed once while the page
     is scroll-locked, so it costs nothing. */
  .utilbar {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .pd-stickybar {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  /* ── 15.3 · DISPLAY TYPE ───────────────────────────────────────────────
     `text-wrap: balance` evens out the line lengths of a multi-line heading so
     the last line is not left as a two-word stub — the difference between a
     heading that looks set and one that looks wrapped. Purely progressive:
     a browser that does not support it ignores the declaration and renders
     exactly as it does today, so this cannot break anything. */
  .hero h1, .page-hero h1, .sec-head h2 {
    text-wrap: balance;
  }
}