/* ==========================================================================
   HARDTRAC Shop — app.css  (v3 — light, mobile-first, corrected)

   One stylesheet for the storefront, plus the shared primitives the Seller
   Admin and Administrator Console build on.

   What v3 fixes on top of v2
   --------------------------
   · LAYERING. One z-index scale. The phone tab bar no longer floats over an
     open cart drawer; every sheet, drawer and modal sits above the scrim and
     below the toasts. (v2 had the tab bar at z:900 — above everything.)
   · STICKY SPLIT. Only the top header row (logo · search · cart) is sticky.
     The category chips scroll away with the page, which returns ~44px of
     phone viewport and makes the desktop --stick offset actually correct
     (v2's sticky rail tucked 29px under the header).
   · REAL VIEWPORT UNITS. Drawers, sheets and modals use dvh where supported,
     so nothing hides behind the iOS/Android URL bar.
   · SCROLL LOCK IN CSS. While any overlay, sheet, drawer or modal is open the
     page behind it cannot scroll — no JS required (:has()).
   · MODALS GET A WAY OUT. A close button slot (.modal-close, injected by
     boost.js), plus swipe-down-to-dismiss on phones.
   · TAP FEEL. touch-action:manipulation kills the double-tap-zoom delay on
     every control; the tap highlight is replaced with real :active states.
   · Light form controls forced via color-scheme, so Android dark mode can't
     render dark inputs inside the light UI.

   Every class name the old stack used is preserved, so store.js, admin.js,
   console.js and common.js keep working untouched.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root{
  color-scheme:light;

  /* brand — pressable things only */
  --brand:#5b4bf5;
  --brand-ink:#4a3ae8;
  --brand-2:#8478f8;
  --brand-soft:#f3f1ff;
  --brand-line:#e2ddfd;

  /* neutrals — deliberately light */
  --ink:#141628;
  --ink-2:#5a6079;
  --ink-3:#9298ae;
  --bg:#fff;
  --bg-2:#f6f7fb;
  --bg-3:#edeff5;
  --canvas:#f8f9fc;   /* a touch more presence, so white cards read as cards */
  --line:#e9ebf2;      /* hairline — the only divider the UI needs */
  --line-2:#dcdfe9;    /* control borders */

  /* semantic */
  --green:#0a8055;
  --green-bg:#e9f6f0;
  --star:#f0a413;
  --warn:#a8560a;
  --warn-bg:#fdf4e6;
  --danger:#c81e3a;
  --danger-bg:#fdedf0;
  --deal:#5b4bf5;
  --link:#4a3ae8;
  --link-hover:#3826cf;

  /* geometry */
  --radius-xs:6px;
  --radius-sm:8px;
  --radius:9px;
  --radius-lg:12px;
  --radius-xl:16px;

  /* elevation — one soft level plus a focus ring is all a light UI needs */
  --shadow-sm:0 1px 2px rgba(20,22,40,.04);
  --shadow:0 1px 2px rgba(20,22,40,.05), 0 4px 12px rgba(20,22,40,.05);
  --shadow-lg:0 2px 6px rgba(20,22,40,.06), 0 14px 34px rgba(20,22,40,.09);
  --shadow-glow:0 2px 8px rgba(91,75,245,.22);
  --ring:0 0 0 3px rgba(91,75,245,.16);

  /* layout */
  --maxw:1320px;
  --hdr-h:52px;      /* logo · search · cart row */
  --nav-h:38px;      /* category chip row */
  /* The whole header is frozen, so anything that pins below it clears both
     rows. One value, derived — it can never drift out of sync again. */
  --stick:calc(var(--hdr-h) + var(--nav-h));

  /* one z-index scale for the whole product
     content(1) < sticky header(100) < buy bar(180) < tab bar(300)
     < back-office scrim(920)/sidebar(930) < overlay(940) < drawers(950)
     < filter sheet(952/953) < modals(960) < toasts(990) */
  --z-hdr:100;
  --z-buybar:180;
  --z-mbar:300;
  --z-overlay:940;
  --z-drawer:950;
  --z-sheet:952;
  --z-modal:960;
  --z-toast:990;

  /* type */
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:"Plus Jakarta Sans",var(--font);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  /* motion — one curve, three speeds */
  --ease:cubic-bezier(.2,.7,.3,1);
  --t-fast:110ms;
  --t:170ms;
  --t-slow:260ms;

  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}

/* ==========================================================================
   2. BASE  (phone first)
   ========================================================================== */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

body{
  font-family:var(--font);
  font-size:13.5px;         /* phones read at 13.5; desktop steps down to 13 */
  line-height:1.45;
  color:var(--ink);
  /* Two very wide, very faint brand washes fixed behind the page. They give
     the canvas depth at the top of a scroll without ever competing with a
     product photo, and cost one paint — no elements, no scroll work. */
  background:
    radial-gradient(1100px 480px at 12% -8%, rgba(91,75,245,.055), transparent 60%),
    radial-gradient(900px 420px at 92% 0%, rgba(132,120,248,.045), transparent 62%),
    var(--canvas);
  background-attachment:fixed;
  min-height:100vh;
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.012em}
::selection{background:var(--brand-soft);color:var(--brand-ink)}

/* Removes the ~350ms double-tap-zoom wait on every control — the single
   cheapest "feels faster" change on a touch screen. */
a,button,input,select,textarea,label{touch-action:manipulation}

:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--radius-xs)}

/* While any layer is open, the page behind it stays put. */
body:has(.overlay.open),
body:has(.drawer.open),
body:has(.modal.open),
body:has(.filters.show),
body:has(.side-scrim.show){overflow:hidden}

/* Figures are tabular everywhere, so prices and totals line up column to
   column and never jitter as digits change. */
.price-now,.price-was,.pdp-price,.bb-price,.kpi .val,.summary-total,
.acct-stat-val,.rating-num,.hero-badge .n,.bar-val,.buybar-price,table.tbl td{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

*{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px;border:2px solid transparent;background-clip:content-box}

/* ==========================================================================
   3. UTILITIES
   ========================================================================== */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 12px}
.link{color:var(--link);font-weight:600}
.link:hover{color:var(--link-hover);text-decoration:underline}
.muted{color:var(--ink-2)}
.faint{color:var(--ink-3)}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.w40{width:40%}
.w60{width:60%}
.hide-sm{display:none}

/* initials tiles shown when a product image fails to load */
.g0{background:#f0ecff;color:#5738c9}
.g1{background:#e7efff;color:#1a52ad}
.g2{background:#e2f5ec;color:#0a7a45}
.g3{background:#fdf1dc;color:#a86a08}
.g4{background:#f8ebff;color:#883aad}
.g5{background:#e0f2f7;color:#0a6272}

/* ==========================================================================
   4. HEADER
   Only .hdr-stick is sticky: logo · search · cart. The category chips row
   scrolls away with the page — more viewport for products, and the desktop
   --stick offset (70px) now matches what actually stays on screen.
   ========================================================================== */
.hdr{
  position:sticky;top:0;z-index:var(--z-hdr);
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(1.6) blur(12px);
  backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid var(--line);
  padding-top:var(--safe-t);
}
/* Kept as the inner wrapper so nothing that targets it breaks; the pinning
   now lives on .hdr so the category row is frozen with it. */
.hdr-stick{position:relative;background:transparent}
.hdr-main{display:flex;align-items:center;flex-wrap:wrap;gap:7px;padding:7px 0 5px}

.brand-logo{height:24px;flex-shrink:0}
.brand-logo img{height:100%;width:auto}

.search-box{
  order:3;flex:1 1 100%;width:100%;
  display:flex;height:38px;
  border-radius:999px;overflow:hidden;
  background:var(--bg-2);
  border:1px solid var(--line-2);
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.search-box:focus-within{background:#fff;border-color:var(--brand);box-shadow:var(--ring)}
.search-box select{
  border:none;background:transparent;
  padding:0 6px 0 11px;max-width:84px;cursor:pointer;
  font-size:12.5px;font-weight:600;color:var(--ink-2);
  border-right:1px solid var(--line-2);
}
.search-box select:focus{outline:none}
.search-box input{flex:1;border:none;background:transparent;padding:0 11px;font-size:16px;min-width:0}  /* 16px stops iOS zoom */
.search-box input:focus{outline:none}
.search-box input::placeholder{color:var(--ink-3)}
.search-box button{
  width:48px;display:grid;place-items:center;
  background:var(--brand);color:#fff;
  transition:background var(--t-fast) var(--ease);
}
.search-box button:hover{background:var(--brand-ink)}
.search-box button:active{background:var(--brand-ink)}
.search-box button svg{width:17px;height:17px}

.hdr-actions{display:flex;align-items:center;gap:2px;margin-left:auto}
.hdr-btn{
  display:flex;flex-direction:column;justify-content:center;
  min-height:40px;padding:6px 9px;border-radius:var(--radius-sm);
  line-height:1.25;color:var(--ink-2);position:relative;
  transition:background var(--t-fast) var(--ease);
}
.hdr-btn:hover,.hdr-btn:active{background:var(--bg-2)}
.hdr-btn .t1{display:none}
.hdr-btn .t2{font-size:12.5px;font-weight:700;color:var(--ink)}

/* On a phone the tab bar already covers Account and Orders — dropping the
   duplicates leaves a clean logo · cart top row. */
#accountBtn,#ordersBtn{display:none}

.hdr-cart{
  display:flex;align-items:center;gap:7px;
  min-height:40px;padding:8px 13px;margin-left:4px;
  border-radius:999px;background:var(--brand);color:#fff;
  font-weight:700;font-size:13px;
  transition:background var(--t-fast) var(--ease),transform 80ms var(--ease);
}
.hdr-cart:hover{background:var(--brand-ink)}
.hdr-cart:active{transform:scale(.97)}
.hdr-cart svg{width:19px;height:19px}
.cart-count{
  position:absolute;top:-6px;right:-8px;
  min-width:18px;height:18px;padding:0 4px;
  display:grid;place-items:center;border-radius:999px;
  background:var(--ink);color:#fff;
  font-size:10.5px;font-weight:800;
  box-shadow:0 0 0 2px var(--brand);
}

/* Category row. Quiet by default with a brand underline on the active item —
   a row of filled pills competes with the product cards for attention. */
.subnav{background:transparent}
.subnav-inner{
  display:flex;gap:2px;height:var(--nav-h);align-items:stretch;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.subnav-inner::-webkit-scrollbar{display:none}
.subnav-inner a{
  position:relative;flex-shrink:0;
  display:flex;align-items:center;padding:0 12px;
  font-size:12.5px;font-weight:600;color:var(--ink-2);
  white-space:nowrap;border-radius:var(--radius-xs);
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.subnav-inner a::after{
  content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;
  border-radius:2px 2px 0 0;background:transparent;
  transition:background var(--t-fast) var(--ease);
}
.subnav-inner a:hover,.subnav-inner a:active{color:var(--ink);background:var(--bg-2)}
.subnav-inner a.on{color:var(--ink);font-weight:800}
.subnav-inner a.on::after{background:var(--brand)}
.subnav-inner a.deals{color:var(--warn);font-weight:700}
.subnav-inner a.deals:hover{background:var(--warn-bg)}

/* ==========================================================================
   5. HERO + TRUST STRIP   (light: tinted paper, not a coloured slab)
   ========================================================================== */
.hero{padding:10px 0 0}
.hero-card{
  display:grid;grid-template-columns:1fr;gap:14px;
  background:linear-gradient(152deg,#f5f3ff 0%,#f1f4ff 52%,#fcfbff 100%);
  border:1px solid var(--brand-line);
  border-radius:var(--radius-xl);
  padding:16px 15px;
  color:var(--ink);
}
.hero-copy{min-width:0}
.hero-card .chip.on{background:#fff;color:var(--brand-ink);border:1px solid var(--brand-line)}
.hero-card h1{
  font-size:21px;line-height:1.16;font-weight:800;
  letter-spacing:-.028em;margin-bottom:7px;color:var(--ink);
}
.hero-card h1 .accent{color:var(--brand)}
.hero-card p{font-size:13px;line-height:1.55;color:var(--ink-2);max-width:52ch;margin-bottom:12px}
.hero-badges{display:flex;gap:7px;margin-top:12px;flex-wrap:wrap}
.hero-badge{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:7px 11px}
.hero-badge .n{font-family:var(--display);font-size:15px;font-weight:800;letter-spacing:-.015em;color:var(--ink)}
.hero-badge .l{font-size:11px;color:var(--ink-3);margin-top:1px}

.hero-cats{display:grid;grid-template-columns:1fr;gap:8px}
.hero-cat{
  display:flex;align-items:center;gap:11px;
  min-height:50px;
  background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:8px 11px;color:var(--ink);
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.hero-cat:hover{border-color:var(--brand-line);box-shadow:var(--shadow-sm)}
.hero-cat:active{background:var(--bg-2)}
.hero-cat-ico{
  width:34px;height:34px;flex-shrink:0;border-radius:var(--radius);
  display:grid;place-items:center;font-weight:800;font-size:13px;
}
.hero-cat-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.hero-cat-name{font-size:13px;font-weight:700;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-cat-count{font-size:11.5px;color:var(--ink-3);font-weight:600;margin-top:1px}
.hero-cat-arrow{color:var(--brand);font-size:19px;font-weight:700;flex-shrink:0;transition:transform var(--t-fast) var(--ease)}
.hero-cat:hover .hero-cat-arrow{transform:translateX(3px)}

.benefits{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px}
.benefit{
  display:flex;align-items:center;gap:8px;
  background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:8px 10px;
}
.benefit-ico{
  width:32px;height:32px;flex-shrink:0;border-radius:var(--radius-sm);
  background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;
}
.benefit-ico svg{width:17px;height:17px}
.benefit-t{font-size:12.5px;font-weight:700;line-height:1.25}
.benefit-d{display:none}

/* ==========================================================================
   6. SHELL / FILTER SHEET
   ========================================================================== */
.shell{display:grid;grid-template-columns:1fr;gap:10px;padding:10px 10px 36px}
.section-pad{padding:14px 12px 40px}

/* On a phone the rail is a full sheet. boost.js adds a title bar and a
   "Show results" footer so it is obvious how to close it. */
.filters{
  position:fixed;inset:0 0 0 auto;top:0;
  width:min(360px,92%);z-index:var(--z-sheet);
  height:100vh;height:100dvh;
  display:flex;flex-direction:column;
  background:#fff;overflow:auto;overscroll-behavior:contain;
  padding:0 14px calc(76px + var(--safe-b));
  transform:translateX(100%);
  transition:transform var(--t-slow) var(--ease);
  box-shadow:var(--shadow-lg);
  will-change:transform;
}
.filters.show{transform:translateX(0)}

/* injected by boost.js */
.filters-head{
  position:sticky;top:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin:0 -14px 12px;padding:calc(13px + var(--safe-t)) 14px 13px;
  background:#fff;border-bottom:1px solid var(--line);
}
.filters-head h3{font-size:16px;font-weight:800}
.filters-foot{
  position:fixed;right:0;bottom:0;
  width:min(360px,92%);z-index:calc(var(--z-sheet) + 1);
  padding:10px 14px calc(10px + var(--safe-b));
  background:#fff;border-top:1px solid var(--line);
  transform:translateY(110%);
  transition:transform var(--t-slow) var(--ease);
}
.filters-foot.show{transform:translateY(0)}

.filter-group{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:12px 13px;margin-bottom:9px;
}
.filter-group h4{
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--font);
  font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:9px;
}
.filter-list{display:flex;flex-direction:column;gap:1px;max-height:250px;overflow:auto;margin:-2px -4px;padding:2px 4px}
.filter-opt{
  display:flex;align-items:center;gap:9px;
  min-height:44px;padding:7px 8px;border-radius:var(--radius-sm);
  font-size:13.5px;color:var(--ink-2);cursor:pointer;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.filter-opt:hover,.filter-opt:active{background:var(--bg-2);color:var(--ink)}
.filter-opt.on{background:var(--brand-soft);color:var(--brand-ink);font-weight:700}
.filter-opt span:first-of-type{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filter-opt .c{font-size:11.5px;color:var(--ink-3);font-weight:600}
.filter-opt input[type=checkbox]{
  appearance:none;-webkit-appearance:none;
  width:18px;height:18px;flex-shrink:0;
  border:1.5px solid var(--line-2);border-radius:5px;background:#fff;
  position:relative;transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.filter-opt input[type=checkbox]:checked{background:var(--brand);border-color:var(--brand)}
.filter-opt input[type=checkbox]:checked::after{
  content:"";position:absolute;left:5.5px;top:2px;
  width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}

.price-hist{height:38px;width:100%;margin-bottom:9px;color:var(--brand)}
.price-hist svg{width:100%;height:100%;display:block;overflow:visible}
.price-row{display:flex;align-items:center;gap:8px}
.price-row input{
  width:100%;min-height:44px;padding:9px 11px;
  border:1px solid var(--line-2);border-radius:var(--radius-sm);
  background:#fff;font-size:16px;font-weight:600;
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.price-row input:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
.price-row span{color:var(--ink-3)}

.star-row{
  display:flex;align-items:center;gap:9px;
  min-height:44px;padding:7px 8px;border-radius:var(--radius-sm);
  font-size:13.5px;color:var(--ink-2);cursor:pointer;
  transition:background var(--t-fast) var(--ease);
}
.star-row:hover,.star-row:active{background:var(--bg-2)}
.star-row.on{background:var(--brand-soft);color:var(--brand-ink);font-weight:700}
.stars{color:var(--star);letter-spacing:.4px;font-size:13px}

.deliv-seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--bg-2);padding:3px;border-radius:var(--radius)}
.deliv-seg button{
  min-height:40px;padding:8px 6px;border-radius:var(--radius-xs);
  font-size:12.5px;font-weight:700;color:var(--ink-2);
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.deliv-seg button.on{background:#fff;color:var(--brand-ink);box-shadow:var(--shadow-sm)}

/* ==========================================================================
   7. RESULTS BAR + CHIPS
   ========================================================================== */
.results-bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:9px 11px;margin-bottom:9px;
  box-shadow:var(--shadow-sm);
}
.results-bar h2{font-size:15.5px;font-weight:800;line-height:1.2;letter-spacing:-.024em}
.results-bar .sub{font-size:11.5px;color:var(--ink-3);margin-top:1px}
.sort-sel{
  min-height:38px;padding:7px 10px;
  border:1px solid var(--line-2);border-radius:var(--radius-sm);
  background:#fff;font-size:13px;font-weight:600;cursor:pointer;
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.sort-sel:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
.mobile-filter-btn{display:inline-flex}

/* live count of applied filters, kept in sync by boost.js */
.fcount{
  display:inline-grid;place-items:center;
  min-width:18px;height:18px;padding:0 5px;margin-left:2px;
  border-radius:999px;background:var(--brand);color:#fff;
  font-size:10.5px;font-weight:800;line-height:1;
}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;
  font-size:12px;font-weight:600;
  background:#fff;border:1px solid var(--line-2);color:var(--ink-2);
}
.chip.on{
  background:var(--brand-soft);border-color:var(--brand-line);
  color:var(--brand-ink);cursor:pointer;min-height:30px;
  transition:background var(--t-fast) var(--ease);
}
.chip.on:hover,.chip.on:active{background:#e8e4fe}
.chip .x{opacity:.6;font-weight:700}

/* ==========================================================================
   8. PRODUCT GRID + CARD
   ========================================================================== */
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.rel-section .pgrid{margin-top:12px}

/* Offscreen cards skip layout and paint entirely — the single biggest
   scroll win on a long catalogue. */
.pgrid>*{content-visibility:auto;contain-intrinsic-size:180px 320px}

.pcard{
  position:relative;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.pcard:hover{border-color:var(--line-2);box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.pcard:active{border-color:var(--line-2)}
/* A faint tint behind the shot: most catalogue images are cut out on white,
   and on a white tile they float with no edge. */
.pcard-imgwrap{
  aspect-ratio:1.2;background:var(--bg-2);
  display:grid;place-items:center;position:relative;overflow:hidden;
  border-bottom:1px solid var(--line);
}
.pcard-imgwrap img{width:100%;height:100%;object-fit:contain;padding:9px;mix-blend-mode:multiply}
.pcard-glyph{width:100%;height:100%;display:grid;place-items:center;font-weight:800;font-size:22px}
img.pcard-glyph{object-fit:contain;background:#fff;padding:10px}

.pcard-deal{
  position:absolute;top:8px;left:8px;z-index:2;
  padding:3px 8px;border-radius:999px;
  font-size:10px;font-weight:800;letter-spacing:.02em;
  background:var(--ink);color:#fff;
  box-shadow:0 1px 4px rgba(21,23,43,.2);
}
.pcard-fav{
  position:absolute;top:6px;right:6px;z-index:3;
  width:36px;height:36px;border-radius:999px;
  display:grid;place-items:center;
  background:#fff;color:var(--ink-3);border:1px solid var(--line);
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform 80ms var(--ease);
}
.pcard-fav:active{transform:scale(.92)}
.pcard-fav svg{width:16px;height:16px}
.pcard-fav.on{color:var(--brand);background:var(--brand-soft);border-color:var(--brand-line)}

.pcard-body{padding:9px 9px 10px;display:flex;flex-direction:column;gap:2px;flex:1}
.pcard-brand{font-size:10px;font-weight:800;color:var(--ink-3);text-transform:uppercase;letter-spacing:.07em}
.pcard-name{
  font-size:12.5px;font-weight:600;line-height:1.32;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:33px;
}
.pcard-rating{display:flex;align-items:center;gap:5px;font-size:11.5px}
.pcard-rating .rc{color:var(--ink-3);font-weight:600}

/* ---- the price unit: identical on card, PDP, buy box, cart and buy bar ---- */
.pcard-price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin-top:2px}
.price-now{font-family:var(--display);font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-.028em;font-variant-numeric:tabular-nums}
.price-now .cur{font-size:11.5px;font-weight:700;margin-right:1px;letter-spacing:0}
.price-was{font-size:12px;color:var(--ink-3);text-decoration:line-through}
.pcard-save{
  align-self:flex-start;
  font-size:11px;font-weight:700;color:var(--green);
  background:var(--green-bg);border-radius:var(--radius-xs);
  padding:2px 7px;margin-top:2px;
}
.pcard-meta{font-size:11.5px;color:var(--green);font-weight:600;margin-top:2px}
.pcard-eta{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink-2);font-weight:600}
.pcard-eta svg{width:13px;height:13px;color:var(--ink-3);flex-shrink:0}
.pcard-actions{margin-top:auto;padding-top:8px}

/* ==========================================================================
   9. BUTTONS  (44px minimum on touch)
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:42px;padding:10px 15px;border-radius:var(--radius-sm);
  font-weight:700;font-size:13px;line-height:1;white-space:nowrap;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),transform 80ms var(--ease);
}
.btn:active{transform:scale(.98)}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}
.btn svg{width:16px;height:16px;flex-shrink:0}
.btn-sm{min-height:36px;padding:8px 12px;font-size:12.5px;border-radius:var(--radius-xs)}
.btn-sm svg{width:14px;height:14px}
.btn-block{width:100%}

.btn-amber{background:var(--brand);color:#fff;box-shadow:var(--shadow-glow)}
.btn-amber:hover,.btn-amber:active{background:var(--brand-ink)}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover,.btn-primary:active{background:#282c4c}
.btn-outline{background:#fff;color:var(--ink);border:1px solid var(--line-2)}
.btn-outline:hover{border-color:var(--brand);color:var(--brand-ink);background:var(--brand-soft)}
.btn-outline:active{background:var(--brand-soft)}
.btn-ghost{background:transparent;color:var(--ink-2);border:1px solid transparent}
.btn-ghost:hover,.btn-ghost:active{background:var(--bg-2);color:var(--ink)}
.btn-gift{background:linear-gradient(135deg,#f472b6,#7c6bf7 62%,#5b4bf5);color:#fff}
.btn-gift:hover{filter:brightness(1.06)}

.btn.loading{position:relative;color:transparent!important;pointer-events:none}
.btn.loading>*{visibility:hidden}
.btn.loading::after{
  content:"";position:absolute;top:50%;left:50%;
  width:17px;height:17px;margin:-8.5px 0 0 -8.5px;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  border-radius:50%;animation:rot .6s linear infinite;
}
.btn-outline.loading::after,.btn-ghost.loading::after{border-color:var(--line-2);border-top-color:var(--brand)}

/* ==========================================================================
   10. PAGER
   ========================================================================== */
.pager{display:flex;justify-content:center;gap:5px;margin-top:18px;flex-wrap:wrap}
.pager button{
  min-width:40px;height:40px;padding:0 11px;
  border-radius:var(--radius-sm);font-weight:700;font-size:13px;
  background:#fff;border:1px solid var(--line-2);color:var(--ink-2);
  transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.pager button:hover:not(:disabled){border-color:var(--brand);color:var(--brand)}
.pager button.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.pager button:disabled{opacity:.35;cursor:default}

/* ==========================================================================
   11. PRODUCT DETAIL PAGE
   ========================================================================== */
.pdp{padding:12px 0 40px}
.crumbs{font-size:12px;color:var(--ink-3);margin-bottom:11px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.pdp-grid{display:grid;grid-template-columns:1fr;gap:18px;align-items:start}
.pdp-gallery{max-width:none}
.pdp-main-img{
  aspect-ratio:1;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius-lg);
  display:grid;place-items:center;overflow:hidden;
}
.pdp-main-img img,.pdp-real-img{width:100%;height:100%;object-fit:contain;padding:18px}
.pdp-main-img .glyph{width:100%;height:100%;display:grid;place-items:center;font-size:46px;font-weight:800}
.pdp-thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;scrollbar-width:none}
.pdp-thumbs::-webkit-scrollbar{display:none}
.pdp-thumb{
  width:56px;height:56px;flex-shrink:0;border-radius:var(--radius);
  overflow:hidden;border:1px solid var(--line);cursor:pointer;
  display:grid;place-items:center;font-weight:800;background:#fff;
  transition:border-color var(--t-fast) var(--ease);
}
.pdp-thumb.on{border-color:var(--brand);box-shadow:var(--ring)}
.pdp-thumb img{width:100%;height:100%;object-fit:contain;padding:5px}
.pdp-thumb-glyph{font-size:17px;font-weight:800;color:var(--ink-2)}

.pdp-info h1.pdp-title{font-size:19px;font-weight:800;line-height:1.3;letter-spacing:-.02em;margin-bottom:5px}
.pdp-brand-link{color:var(--link);font-weight:600;font-size:13px}
.pdp-rating-row{display:flex;align-items:center;gap:8px;margin:9px 0;font-size:13px}
.pdp-price-block{padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:10px 0}
.pdp-price{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pdp-price .off{background:var(--green-bg);color:var(--green);font-weight:800;font-size:13px;padding:3px 9px;border-radius:var(--radius-xs)}
.pdp-price .now{font-family:var(--display);font-size:26px;font-weight:800;letter-spacing:-.03em}
.pdp-price .now .cur{font-size:14px}
.pdp-price .was{font-size:13px;color:var(--ink-3);text-decoration:line-through}
.pdp-tax{font-size:12px;color:var(--ink-3);margin-top:5px}
.pdp-save{font-size:13px;font-weight:700;color:var(--green);margin-top:6px}
.pdp-section{margin-top:16px}
.pdp-section h3{font-size:15px;font-weight:800;margin-bottom:9px}
.pdp-feats{list-style:none;display:flex;flex-direction:column;gap:7px}
.pdp-feats li{position:relative;padding-left:18px;font-size:13px;color:var(--ink-2);line-height:1.55}
.pdp-feats li::before{content:"";position:absolute;left:2px;top:8px;width:6px;height:6px;border-radius:50%;background:var(--brand)}
.pdp-desc{font-size:13px;color:var(--ink-2);line-height:1.65}

.spec-table{width:100%;border-collapse:collapse;font-size:13px}
.spec-table td{padding:8px 10px;border:1px solid var(--line)}
.spec-table tr td:first-child{background:var(--bg-2);font-weight:700;width:40%;color:var(--ink-2)}

.pdp-offers{display:grid;grid-template-columns:1fr;gap:8px;margin-top:14px}
.offer-card{
  display:flex;gap:10px;align-items:flex-start;
  background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:11px 12px;
}
.offer-card .offer-ico{
  width:30px;height:30px;flex-shrink:0;border-radius:var(--radius-xs);
  background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-weight:800;
}
.offer-card .offer-ico svg{width:16px;height:16px}
.offer-card b{display:block;font-size:12.5px;font-weight:800;margin-bottom:1px}
.offer-card span{font-size:12px;color:var(--ink-2);line-height:1.45}

.pdp-highlights{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.highlight{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:10px 11px}
.highlight .hl-l{display:block;font-size:10.5px;color:var(--ink-3);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.highlight .hl-v{display:block;font-size:13px;font-weight:700;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.rating-sum{
  display:grid;grid-template-columns:1fr;gap:12px;align-items:center;text-align:center;
  background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:14px 16px;
}
.rating-big{display:flex;align-items:center;justify-content:center;gap:12px;min-width:72px}
.rating-num{font-family:var(--display);font-size:30px;font-weight:800;line-height:1;letter-spacing:-.035em}
.rating-bars{display:flex;flex-direction:column;gap:6px}
.rating-bar{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-2)}
.rb-star{width:22px;font-weight:700}
.rb-track{flex:1;height:7px;border-radius:99px;background:var(--bg-3);overflow:hidden}
.rb-fill{display:block;height:100%;border-radius:99px;background:var(--star)}
.rb-pct{width:34px;text-align:right;font-weight:600;color:var(--ink-3)}

.buybox{
  position:static;
  background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:15px;
  display:flex;flex-direction:column;gap:10px;
}
.bb-price{font-family:var(--display);font-size:24px;font-weight:800;letter-spacing:-.03em}
.bb-price .cur{font-size:13px}
.bb-deliver{font-size:13px;color:var(--ink-2);line-height:1.55}
.bb-stock{font-weight:800;font-size:14px;color:var(--green)}
.bb-stock.low{color:var(--warn)}
.bb-stock.out{color:var(--danger)}
.bb-actions{display:flex;flex-direction:column;gap:8px;margin-top:2px}
.bb-trust{
  margin-top:4px;padding-top:12px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:9px;font-size:12.5px;color:var(--ink-2);
}
.bb-trust>div{display:flex;align-items:center;gap:9px}
.bb-trust svg{width:17px;height:17px;color:var(--brand);flex-shrink:0}

.qty-sel{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:var(--radius-sm);overflow:hidden;width:fit-content}
.qty-sel button{width:44px;height:44px;font-size:18px;font-weight:700;color:var(--ink-2);transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.qty-sel button:hover,.qty-sel button:active{background:var(--bg-2);color:var(--brand)}
.qty-sel span{min-width:40px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}

.rel-section{margin-top:28px}
.rel-section h2{font-size:17px;font-weight:800;margin-bottom:2px;letter-spacing:-.02em}

/* ---- mobile sticky buy bar, cloned from the buy box by boost.js ----
   On a phone the buy box scrolls away below the description. This keeps the
   price and the primary action reachable at all times, and boost.js keeps
   the price in sync when the quantity changes. */
.ht-buybar{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-buybar);
  display:flex;align-items:center;gap:12px;
  padding:8px 11px calc(8px + var(--safe-b));
  background:#fff;border-top:1px solid var(--line);
  box-shadow:0 -2px 12px rgba(21,23,43,.07);
  transform:translateY(110%);
  transition:transform var(--t) var(--ease);
}
.ht-buybar.show{transform:translateY(0)}
.buybar-info{min-width:0;flex:1}
.buybar-price{font-family:var(--display);font-size:18px;font-weight:800;letter-spacing:-.025em;line-height:1.1}
.buybar-note{font-size:11px;color:var(--ink-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ht-buybar .btn{flex:0 0 auto;min-width:150px}
/* the buy bar sits below the tab bar, so lift the tab bar out of its way */
body.has-buybar .mbar{bottom:calc(58px + var(--safe-b))}

/* ==========================================================================
   12. OVERLAY / DRAWERS / MODALS / FIELDS
   ========================================================================== */
.overlay{
  position:fixed;inset:0;z-index:var(--z-overlay);
  background:rgba(17,19,42,.4);
  opacity:0;visibility:hidden;
  transition:opacity var(--t-slow) var(--ease),visibility var(--t-slow) var(--ease);
}
.overlay.open{opacity:1;visibility:visible}

.drawer{
  position:fixed;top:0;right:0;
  height:100%;height:100dvh;
  width:100%;z-index:var(--z-drawer);
  background:#fff;display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform var(--t-slow) var(--ease);
  box-shadow:var(--shadow-lg);
  will-change:transform;
}
.drawer.open{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:calc(12px + var(--safe-t)) 14px 12px;border-bottom:1px solid var(--line)}
.drawer-head h3{font-size:15px;font-weight:800;letter-spacing:-.02em}
.drawer-body{flex:1;overflow:auto;padding:10px 14px;overscroll-behavior:contain}
.drawer-foot{padding:11px 14px calc(11px + var(--safe-b));border-top:1px solid var(--line);background:#fff}

.icon-btn{
  width:40px;height:40px;border-radius:var(--radius-sm);
  display:grid;place-items:center;color:var(--ink-2);
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.icon-btn:hover,.icon-btn:active{background:var(--bg-2);color:var(--ink)}
.icon-btn svg{width:19px;height:19px}

/* Bottom sheet on phones — thumb reachable, familiar from native apps.
   boost.js adds a ✕ in the head and swipe-down-to-dismiss. */
.modal{
  position:fixed;left:0;right:0;bottom:0;top:auto;z-index:var(--z-modal);
  width:100%;max-height:92vh;max-height:92dvh;overflow:auto;
  background:#fff;
  border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow:var(--shadow-lg);
  transform:translateY(16px);
  opacity:0;visibility:hidden;
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility var(--t) var(--ease);
  overscroll-behavior:contain;
}
.modal.open{opacity:1;visibility:visible;transform:translateY(0)}
.modal-head{padding:18px 56px 4px 18px;position:relative}
/* grab handle — signals "drag down or tap outside to dismiss" */
.modal-head::before{
  content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);
  width:38px;height:4px;border-radius:99px;background:var(--line-2);
}
.modal-head h3{font-size:18px;font-weight:800;letter-spacing:-.02em}
.modal-head p{font-size:12.5px;color:var(--ink-2);margin-top:4px}
.modal-close{position:absolute;top:12px;right:8px;z-index:2}
.modal-body{padding:14px 18px calc(20px + var(--safe-b))}

/* Sized modals: v2 set these widths inline, which broke the phone bottom
   sheet (a 332px sheet pinned to the left edge). Now they are full-bleed on
   phones and take their width only once the modal floats. */
@media (min-width:560px){
  #checkoutModal{width:min(460px,calc(100% - 28px))}
  #editModal{width:min(560px,calc(100% - 28px))}
}

.field{margin-bottom:10px}
.field label{display:block;font-size:12px;font-weight:700;color:var(--ink-2);margin-bottom:5px}
.field input,.field select,.field textarea{
  width:100%;min-height:46px;padding:11px 12px;
  border:1px solid var(--line-2);border-radius:var(--radius-sm);
  background:#fff;font-size:16px;                /* 16px stops iOS zoom */
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.field textarea{resize:vertical;min-height:88px;line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}

/* show/hide password — injected by the login pages and boost.js */
.field.has-pw{position:relative}
.field.has-pw input{padding-right:50px}
.pw-toggle{
  position:absolute;right:5px;bottom:5px;
  width:36px;height:36px;border-radius:var(--radius-xs);
  display:grid;place-items:center;color:var(--ink-3);
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.pw-toggle:hover,.pw-toggle:active{background:var(--bg-2);color:var(--ink)}
.pw-toggle svg{width:18px;height:18px}

.role-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:var(--bg-2);border-radius:var(--radius);padding:4px;margin-bottom:16px}
.role-seg button{
  min-height:44px;padding:10px 6px;border-radius:var(--radius-xs);
  font-size:12.5px;font-weight:700;color:var(--ink-2);
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.role-seg button.on{background:#fff;color:var(--brand-ink);box-shadow:var(--shadow-sm)}

/* ==========================================================================
   13. CART / SUMMARY / ACCOUNT / GIFT CARDS
   ========================================================================== */
.cart-line{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line)}
.cart-thumb{
  width:56px;height:56px;border-radius:var(--radius-sm);
  background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;overflow:hidden;flex-shrink:0;
  font-weight:800;color:var(--ink-3);
}
.cart-thumb img,.thumb-img{width:100%;height:100%;object-fit:contain;padding:4px}
.thumb-glyph{display:grid;place-items:center;width:100%;height:100%;font-weight:800}

.summary-box{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;margin-bottom:10px}
.summary-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;margin-bottom:7px}
.summary-row:last-child{margin-bottom:0}
.summary-total{
  display:flex;justify-content:space-between;align-items:center;
  font-weight:800;font-size:16px;
  padding-top:10px;margin-top:7px;border-top:1px solid var(--line-2);
}
.summary-total span:last-child{font-family:var(--display);letter-spacing:-.025em}

.acct-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:13px}
.acct-stat{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:11px 8px;text-align:center}
.acct-stat.wallet{background:var(--brand-soft);border-color:var(--brand-line)}
.acct-stat-val{font-family:var(--display);font-size:18px;font-weight:800;margin-top:3px;letter-spacing:-.025em}

.giftcard-panel{
  display:flex;gap:11px;
  background:var(--brand-soft);
  border:1px solid var(--brand-line);border-radius:var(--radius-lg);
  padding:12px;margin-bottom:13px;
}
.giftcard-chip{
  width:40px;height:40px;border-radius:var(--radius);
  background:var(--brand);color:#fff;display:grid;place-items:center;flex-shrink:0;
}
.giftcard-chip svg{width:20px;height:20px}
.wallet-spark-wrap{height:40px;margin:6px 0 10px}
.wallet-opt{transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.wallet-opt.on{background:var(--brand-soft);border-color:var(--brand-line)}
.wallet-opt-ico{width:28px;height:28px;border-radius:var(--radius-xs);background:var(--brand);color:#fff;display:grid;place-items:center;flex-shrink:0}
.wallet-opt-ico svg{width:15px;height:15px}

.gift-buy-hero{
  display:flex;gap:12px;align-items:center;
  background:var(--brand-soft);
  border:1px solid var(--brand-line);border-radius:var(--radius-lg);
  padding:13px;margin-bottom:14px;
}
.gift-buy-chip{
  width:46px;height:46px;border-radius:var(--radius);
  background:linear-gradient(135deg,#f472b6,#5b4bf5);color:#fff;
  display:grid;place-items:center;flex-shrink:0;
}
.gift-buy-chip svg{width:23px;height:23px}
.amt-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}
.amt-opt{
  min-height:46px;padding:12px 4px;border-radius:var(--radius-sm);
  border:1px solid var(--line-2);background:#fff;
  font-weight:700;font-size:13.5px;color:var(--ink-2);
  transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.amt-opt.on{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-ink)}

.gift-success{text-align:center;padding:8px 0}
.gift-success-ico{
  width:54px;height:54px;border-radius:50%;
  background:var(--green);color:#fff;display:grid;place-items:center;
  margin:0 auto 12px;animation:popIn .32s var(--ease);
}
.gift-success-ico svg{width:28px;height:28px}
.gift-success h3{font-size:19px;font-weight:800}
.gift-code{
  font-family:var(--mono);font-size:17px;font-weight:700;letter-spacing:.08em;
  color:var(--brand-ink);background:var(--brand-soft);
  border:1px dashed var(--brand);border-radius:var(--radius);
  padding:14px;margin:14px 0;user-select:all;
}

.gst-msg{font-size:12px;font-weight:700;margin-top:7px;display:flex;align-items:center;gap:5px;min-height:1px}
.gst-msg svg{width:14px;height:14px}
.gst-msg.ok{color:var(--green)}
.gst-msg.err{color:var(--danger)}

/* ==========================================================================
   14. ORDERS / RETURNS / SHIPMENT TRACKING
   ========================================================================== */
.order-card{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);margin-bottom:12px;overflow:hidden;
}
.order-head{
  background:var(--bg-2);padding:12px 14px;
  display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);
}
.order-head .ohl{font-size:10px;color:var(--ink-3);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.order-head b{font-size:13px}
.order-head .ostatus{color:var(--green)}
.order-head .order-inv{margin-left:0;width:100%;order:5}
.order-body{padding:8px 14px 12px}
.order-item{display:flex;gap:11px;align-items:center;padding:8px 0}
.order-item-name{flex:1;font-size:13px;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* A real ordered progression — the filled dots and connecting rule carry
   information, they are not decoration. */
.ship-steps{display:flex;gap:4px}
.ship-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;isolation:isolate}
.ship-step .dot{
  width:12px;height:12px;border-radius:50%;
  background:var(--line-2);box-shadow:0 0 0 3px #fff;
  transition:background var(--t) var(--ease);
}
.ship-step.done .dot{background:var(--green)}
.ship-step .lbl{font-size:9.5px;color:var(--ink-3);text-align:center;line-height:1.3}
.ship-step.done .lbl{color:var(--ink-2);font-weight:600}
.ship-step::before{
  content:"";position:absolute;top:5px;left:-50%;width:100%;height:2px;
  background:var(--line-2);z-index:-1;
}
.ship-step:first-child::before{display:none}
.ship-step.done::before{background:var(--green)}

/* ==========================================================================
   15. SUPPORT THREADS
   ========================================================================== */
.chat-scroll{scrollbar-width:thin;scroll-behavior:smooth}
.chat-scroll::-webkit-scrollbar{width:5px}
.chat-scroll::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}

.msg-row{display:flex;margin-bottom:10px}
.msg-row.from-me{justify-content:flex-end}
.msg-row.from-admin{justify-content:flex-start}
.msg-bubble{max-width:84%;padding:10px 13px;font-size:13px;line-height:1.55;border:1px solid var(--line)}
.from-admin .msg-bubble{background:var(--bg-2);border-radius:4px 14px 14px 14px}
.from-me .msg-bubble{background:var(--brand-soft);border-color:var(--brand-line);border-radius:14px 4px 14px 14px}
.msg-meta{font-size:10.5px;color:var(--ink-3);margin-bottom:4px;font-weight:600}
.msg-body{white-space:pre-wrap;word-break:break-word;color:var(--ink)}

.chat-composer{display:flex;gap:8px;margin-top:10px}
.chat-composer .cmp-reply-in{
  flex:1;min-height:46px;padding:11px 13px;font-size:16px;
  border:1px solid var(--line-2);border-radius:var(--radius-sm);background:#fff;
}
.chat-composer .cmp-reply-in:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
.cw-bot>div:last-child{border-radius:4px 14px 14px 14px}

.unread-pill{
  display:inline-block;margin-left:7px;padding:2px 8px;vertical-align:1px;
  background:var(--danger);color:#fff;
  font-size:10.5px;font-weight:800;border-radius:999px;
}
.nav-dot{
  position:absolute;top:-2px;right:-6px;
  min-width:17px;height:17px;line-height:17px;padding:0 4px;
  border-radius:999px;background:var(--danger);color:#fff;
  font-size:10px;font-weight:800;text-align:center;
  box-shadow:0 0 0 2px #fff;
}

/* ==========================================================================
   16. EMPTY / LOADING / TOAST
   ========================================================================== */
.empty{text-align:center;padding:40px 18px;color:var(--ink-2);font-size:13.5px}
.empty .ico{font-size:34px;margin-bottom:10px}

.spin{width:20px;height:20px;border:2px solid var(--line-2);border-top-color:var(--brand);border-radius:50%;animation:rot .7s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}

.load-block{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;padding:48px 20px;color:var(--ink-3);font-size:13px;font-weight:600}
.loader-ring{
  width:36px;height:36px;border-radius:50%;
  background:conic-gradient(from 0deg,var(--brand) 0deg,var(--brand-2) 140deg,transparent 300deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 0);
  mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 0);
  animation:rot .8s linear infinite;
}

.skel{
  background:linear-gradient(100deg,var(--bg-3) 30%,#f9fafd 50%,var(--bg-3) 70%);
  background-size:220% 100%;
  animation:sh 1.2s ease-in-out infinite;
  border-radius:var(--radius-lg);
}
.skel-card{aspect-ratio:.62}
@keyframes sh{from{background-position:200% 0}to{background-position:-200% 0}}

.toast-wrap{
  position:fixed;left:50%;bottom:calc(78px + var(--safe-b));
  transform:translateX(-50%);z-index:var(--z-toast);
  display:flex;flex-direction:column;gap:8px;align-items:center;
  width:calc(100% - 24px);pointer-events:none;
}
.toast{
  width:100%;text-align:center;
  padding:12px 16px;border-radius:var(--radius);
  background:var(--ink);color:#fff;
  font-size:13px;font-weight:600;
  box-shadow:var(--shadow-lg);
  animation:tin .25s var(--ease);
}
.toast.ok{background:var(--green)}
.toast.err{background:var(--danger)}
@keyframes tin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes popIn{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}

/* ==========================================================================
   17. FOOTER
   ========================================================================== */
.ft{margin-top:20px;border-top:1px solid var(--line);background:#fff;padding-bottom:calc(64px + var(--safe-b))}
.ft-inner{display:flex;align-items:center;gap:11px;padding:15px 12px;flex-wrap:wrap;font-size:11.5px;color:var(--ink-2)}
.ft-inner img{height:20px;opacity:.7}

/* ==========================================================================
   18. MOBILE TAB BAR + BACK-TO-TOP (injected by boost.js)
   ========================================================================== */
.mbar{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-mbar);display:flex;
  background:#fff;border-top:1px solid var(--line);
  padding:3px 2px calc(3px + var(--safe-b));
  transition:bottom var(--t) var(--ease);
}
.mbar button{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  min-height:46px;padding:5px 2px;
  font-size:10px;font-weight:600;color:var(--ink-3);letter-spacing:.005em;
  background:none;border:0;position:relative;
  transition:color var(--t-fast) var(--ease);
}
.mbar button.on{color:var(--brand)}
.mbar button:active{color:var(--brand)}
.mbar svg{width:20px;height:20px}
.mbar .mb-badge{
  position:absolute;top:2px;left:calc(50% + 5px);
  background:var(--danger);color:#fff;
  font-size:9px;font-weight:800;min-width:16px;height:16px;line-height:16px;
  border-radius:999px;text-align:center;padding:0 3px;
}

.to-top{
  position:fixed;right:12px;bottom:calc(66px + var(--safe-b));
  z-index:calc(var(--z-mbar) - 1);
  width:40px;height:40px;border-radius:999px;
  display:grid;place-items:center;
  background:#fff;color:var(--ink-2);
  border:1px solid var(--line-2);box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility var(--t) var(--ease);
}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{color:var(--brand);border-color:var(--brand-line)}
.to-top svg{width:19px;height:19px}
body.has-buybar .to-top{bottom:calc(124px + var(--safe-b))}

/* When the on-screen keyboard is open, floating chrome gets out of the way. */
body.kb-open .mbar,body.kb-open .ht-buybar,body.kb-open .to-top{display:none}

/* ==========================================================================
   19. TABLET AND UP
   Everything above is the phone layout. These blocks add back the density
   and multi-column structure once there is room for them.
   ========================================================================== */
@media (min-width:560px){
  #accountBtn,#ordersBtn{display:flex}
  .pgrid{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px}
  .pgrid>*{contain-intrinsic-size:200px 310px}
  .benefits{grid-template-columns:repeat(4,1fr);gap:10px}
  .benefit-d{display:block;font-size:11.5px;color:var(--ink-2);line-height:1.45;margin-top:2px}
  .hero-cats{grid-template-columns:1fr 1fr}
  .pdp-offers{grid-template-columns:repeat(3,1fr);gap:9px}
  .pdp-highlights{grid-template-columns:repeat(3,1fr)}
  .amt-grid{grid-template-columns:repeat(4,1fr)}
  .order-head .order-inv{margin-left:auto;width:auto;order:0}
  .rating-sum{grid-template-columns:auto 1fr;gap:18px;text-align:left}
  .rating-big{display:block}
  .modal{
    left:50%;right:auto;top:50%;bottom:auto;
    width:min(420px,calc(100% - 28px));max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);
    border-radius:var(--radius-xl);
    transform:translate(-50%,-46%);
  }
  .modal.open{transform:translate(-50%,-50%)}
  .modal-head::before{display:none}
  .modal-close{top:14px;right:12px}
  .drawer{width:min(400px,100%)}
  .toast-wrap{bottom:24px;width:auto;max-width:440px}
  .toast{width:auto}
  .to-top{right:18px;bottom:22px}
  body.has-buybar .to-top{bottom:22px}
}

@media (min-width:900px){
  body{font-size:13px;line-height:1.5}

  .wrap{padding:0 14px}
  .hdr-main{flex-wrap:nowrap;gap:14px;height:var(--hdr-h);padding:0}
  .brand-logo{height:26px}
  .search-box{order:0;flex:1 1 auto;max-width:560px;width:auto;height:36px}
  .search-box input{font-size:13px}
  .search-box select{max-width:112px}
  .search-box button{width:42px}
  .hdr-btn .t1{display:block;font-size:10.5px;color:var(--ink-3)}
  .hdr-btn .t2{font-size:12.5px}
  .hide-sm{display:inline}

  .hero-card{grid-template-columns:1.05fr .95fr;gap:20px;align-items:center;padding:20px 22px}
  .hero-card h1{font-size:27px}
  .hero-card p{font-size:13px;margin-bottom:14px}

  .shell{grid-template-columns:218px 1fr;gap:16px;padding:14px 14px 44px}
  .section-pad{padding:16px 14px 44px}

  /* the rail returns to a sticky column; the sheet chrome is hidden.
     If the rail is taller than the viewport it scrolls within itself, so
     the last filter group is always reachable. */
  .filters{
    position:sticky;inset:auto;top:var(--stick);
    width:auto;height:auto;display:flex;flex-direction:column;
    transform:none;box-shadow:none;background:transparent;
    padding:0 2px 0 0;z-index:1;
    max-height:calc(100vh - var(--stick) - 24px);
    max-height:calc(100dvh - var(--stick) - 24px);
    overflow:auto;overscroll-behavior:auto;
  }
  .filters-head,.filters-foot{display:none!important}
  .mobile-filter-btn{display:none}
  .filter-opt,.star-row{min-height:34px;font-size:12.5px}
  .price-row input{min-height:36px;font-size:12.5px}
  .deliv-seg button{min-height:34px}

  .pdp{padding:16px 0 48px}
  .pdp-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr) 264px;gap:22px}
  .pdp-gallery{position:sticky;top:var(--stick)}
  .pdp-info h1.pdp-title{font-size:21px}
  .buybox{position:sticky;top:var(--stick)}
  .ht-buybar{display:none}

  .btn{min-height:36px;padding:8px 14px;font-size:12.5px}
  .btn-sm{min-height:32px;padding:6px 11px;font-size:12px}
  .field input,.field select,.field textarea{min-height:38px;font-size:13px;padding:9px 11px}
  .field.has-pw input{padding-right:44px}
  .pw-toggle{bottom:3px;width:32px;height:32px}
  .chat-composer .cmp-reply-in{min-height:40px;font-size:13px}
  .icon-btn{width:32px;height:32px}
  .qty-sel button{width:34px;height:34px;font-size:16px}
  .pager button{min-width:36px;height:36px}
  .sort-sel{min-height:36px}
  .mbar{display:none}
  .ft{padding-bottom:0}
  .ft-inner{padding:18px 14px}
}

@media (min-width:1080px){
  .pgrid{grid-template-columns:repeat(auto-fill,minmax(182px,1fr))}
}
@media (min-width:1400px){
  .pgrid{grid-template-columns:repeat(auto-fill,minmax(196px,1fr))}
}

/* ==========================================================================
   20. MOTION BUDGET
   .lite is set before first paint on coarse-pointer, low-memory, low-core,
   save-data or small-viewport devices. It keeps the layout, drops the cost.
   ========================================================================== */
.route-in{animation:routeIn var(--t) var(--ease)}
@keyframes routeIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

.reveal{opacity:0}
.reveal.in{animation:revealUp .36s var(--ease) forwards;animation-delay:var(--d,0ms)}
@keyframes revealUp{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

.lite .reveal,.lite .reveal.in{opacity:1!important;transform:none!important;animation:none!important}
.lite .route-in{animation:none}

/* Hover transforms on a touch screen only ever fire as a stuck post-tap
   state, and cost a repaint each time. */
@media (hover:none){
  .pcard:hover,.hero-cat:hover,.btn:hover{transform:none;box-shadow:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .reveal,.reveal.in{opacity:1!important;transform:none!important}
}

/* ==========================================================================
   21. FROZEN HEADER — phone metrics
   The header is pinned on every size. On a phone the two rows together cost
   about 96px, so the category row is kept tight and the search row loses a
   little height rather than the chips being dropped.
   ========================================================================== */
@media (max-width:899px){
  :root{--hdr-h:46px;--nav-h:34px}
  .subnav-inner a{padding:0 10px;font-size:11.5px}
  .subnav-inner a::after{left:10px;right:10px}
  /* the pinned rail below the header clears both rows */
  .pdp-gallery,.buybox{scroll-margin-top:calc(var(--stick) + 8px)}
}

/* Anything the router scrolls to should stop below the frozen header rather
   than under it. */
#view [id]{scroll-margin-top:calc(var(--stick) + 12px)}

/* With the keyboard up, the category row is the first thing worth giving
   back — the search field stays pinned, the chips step aside. */
body.kb-open .subnav{display:none}