/* Patel Marketing V4 — the shop.
   ------------------------------------------------------------------
   V3 is a catalogue with an order pad bolted on: one 4,800-line file,
   everything an overlay on top of one long grid. V4 is a shop. Screens
   are screens, the thumb reaches the controls, and the stylesheet is a
   file of its own so a change to a button is a change in one place.

   Read in this order:
     1. tokens        colour, type, spacing, elevation
     2. reset + shell header / view / tab bar, safe areas
     3. primitives    button, field, chip, badge, sheet, toast
     4. product       card, rail, grid, gallery, size rows
     5. screens       what only one screen needs
   ------------------------------------------------------------------ */

/* ============ 1. tokens ============================================ */
/* Four palettes, each in light and dark — eight blocks, one shape.
   Sky is the default because it is the colour the firm has been using;
   Teal is the one V4 was built in; Emerald and Charcoal are the other
   two people asked to keep. Copper is retired: it never got picked and
   Teal covers the same warm-neutral ground better.

   Two attributes on <html> decide everything:
     data-theme   sky | teal | emerald | charcoal
     data-mode    light | dark        (resolved from the setting; "auto"
                                       is never stamped, it is resolved)

   Every block sets the SAME token list. A component may therefore assume
   every token exists in every combination, which is what stops a theme
   from half-applying.

     --brand        the accent: buttons, links, the active tab
     --brand-ink    a step darker, for hover
     --brand-wash   a tint, for chips and quiet notices
     --on-brand     text on a brand-FILLED surface
     --gold         the second colour: offers, ratings, MRP
     --bg --surface --surface-2         page, cards, insets
     --line --line-strong               borders
     --ink --ink-2 --ink-3              body, secondary, tertiary
     --ok --warn --bad  (+ -wash)       states
*/
:root{
  --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:26px; --r-full:999px;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Bars the layout has to reserve room for. Set once, read by everything
     that sits at an edge, so nothing ever lands under the tab bar again. */
  --tabbar:58px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
  --header:56px;
  --dock:0px;           /* raised by the cart bar when one is showing */
  --page:1180px;        /* desktop cap; phones never reach it */

  --shadow-1:0 1px 2px rgba(16,30,40,.06), 0 1px 3px rgba(16,30,40,.05);
  --shadow-2:0 4px 12px rgba(16,30,40,.08), 0 1px 3px rgba(16,30,40,.05);
  --shadow-3:0 12px 32px rgba(16,30,40,.14), 0 2px 8px rgba(16,30,40,.06);
}
[data-mode="dark"]{
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 4px 12px rgba(0,0,0,.45);
  --shadow-3:0 12px 32px rgba(0,0,0,.55);
}

/* ---- sky (default) ---------------------------------------------- */
:root,
[data-theme="sky"]{
  --brand:#2F6FA8; --brand-ink:#245880; --brand-wash:#E3F0FB;
  --on-brand:#fff;  --gold:#0E8C7E; --gold-wash:#D9F2EE;
  --bg:#F2F8FD; --surface:#FFFFFF; --surface-2:#E8F3FC;
  --line:#D6E6F2; --line-strong:#B9D3E8;
  --ink:#0D2137; --ink-2:#556F87; --ink-3:#829BB1;
  --ok:#1B7A4B; --ok-wash:#E1F3E8; --warn:#96600F; --warn-wash:#FBEEDA;
  --bad:#B3261E; --bad-wash:#FBE9E7;
}
[data-theme="sky"][data-mode="dark"]{
  --brand:#6FBAEB; --brand-ink:#9AD1F4; --brand-wash:#12293C;
  --on-brand:#0A1C2A; --gold:#4FC9B7; --gold-wash:#0E2E2A;
  --bg:#0C1319; --surface:#141C24; --surface-2:#1C262F;
  --line:#24313C; --line-strong:#354553;
  --ink:#E6EFF6; --ink-2:#9BB0C1; --ink-3:#75899A;
  --ok:#5BC98B; --ok-wash:#12301F; --warn:#E0B168; --warn-wash:#332612;
  --bad:#F2857C; --bad-wash:#3A1C19;
}

/* ---- teal (what V4 was built in; replaces copper) ---------------- */
[data-theme="teal"]{
  --brand:#0E6E60; --brand-ink:#0A5348; --brand-wash:#E4F2EF;
  --on-brand:#fff;  --gold:#B0842B; --gold-wash:#F7EEDA;
  --bg:#F6F7F6; --surface:#FFFFFF; --surface-2:#EFF2F1;
  --line:#E1E6E4; --line-strong:#CBD3D0;
  --ink:#12211E; --ink-2:#5A6B67; --ink-3:#8B9A96;
  --ok:#1B7A4B; --ok-wash:#E3F3EA; --warn:#9A6212; --warn-wash:#FBEFDC;
  --bad:#B3261E; --bad-wash:#FBE9E7;
}
[data-theme="teal"][data-mode="dark"]{
  --brand:#4FC4B0; --brand-ink:#7ADACA; --brand-wash:#123832;
  --on-brand:#06231E; --gold:#DFB55E; --gold-wash:#33290F;
  --bg:#0F1513; --surface:#171F1D; --surface-2:#1F2A27;
  --line:#26332F; --line-strong:#35443F;
  --ink:#E8EEEC; --ink-2:#9FB0AB; --ink-3:#7A8A85;
  --ok:#5BC98B; --ok-wash:#14301F; --warn:#E0B168; --warn-wash:#332612;
  --bad:#F2857C; --bad-wash:#3A1C19;
}

/* ---- emerald ----------------------------------------------------- */
[data-theme="emerald"]{
  --brand:#157F4B; --brand-ink:#0E6339; --brand-wash:#DEF0E5;
  --on-brand:#fff;  --gold:#A98833; --gold-wash:#F1E7C9;
  --bg:#F3F8F5; --surface:#FFFFFF; --surface-2:#E3EFE8;
  --line:#DBE8E0; --line-strong:#C0D4C8;
  --ink:#11251D; --ink-2:#5A7065; --ink-3:#89A093;
  --ok:#1B7A4B; --ok-wash:#E1F2E8; --warn:#8F5E10; --warn-wash:#F8EDD8;
  --bad:#B3261E; --bad-wash:#FBE9E7;
}
[data-theme="emerald"][data-mode="dark"]{
  --brand:#5FD08A; --brand-ink:#8AE0AB; --brand-wash:#0F3020;
  --on-brand:#05230F; --gold:#D8B45F; --gold-wash:#30280F;
  --bg:#0D1310; --surface:#151D18; --surface-2:#1D2822;
  --line:#253129; --line-strong:#344338;
  --ink:#E7EFE9; --ink-2:#9CB2A5; --ink-3:#78907F;
  --ok:#5BC98B; --ok-wash:#12301F; --warn:#E0B168; --warn-wash:#332612;
  --bad:#F2857C; --bad-wash:#3A1C19;
}

/* ---- charcoal (the quiet one: no colour but the accent) ---------- */
[data-theme="charcoal"]{
  --brand:#3F4C57; --brand-ink:#2B353E; --brand-wash:#E7EBEE;
  --on-brand:#fff;  --gold:#8A6A2C; --gold-wash:#F3EBD9;
  --bg:#F5F6F7; --surface:#FFFFFF; --surface-2:#EDEFF1;
  --line:#E0E4E7; --line-strong:#C7CDD2;
  --ink:#171C21; --ink-2:#57616A; --ink-3:#87919A;
  --ok:#1B7A4B; --ok-wash:#E3F2E9; --warn:#8A5E13; --warn-wash:#F7EEDB;
  --bad:#B3261E; --bad-wash:#FBE9E7;
}
[data-theme="charcoal"][data-mode="dark"]{
  --brand:#9FB4C4; --brand-ink:#C3D3DF; --brand-wash:#232C34;
  --on-brand:#111820; --gold:#D2AE68; --gold-wash:#2E2716;
  --bg:#101418; --surface:#181D22; --surface-2:#20272D;
  --line:#29323A; --line-strong:#3A454E;
  --ink:#E9EDF1; --ink-2:#A2ADB6; --ink-3:#7E8992;
  --ok:#5BC98B; --ok-wash:#12301F; --warn:#E0B168; --warn-wash:#332612;
  --bad:#F2857C; --bad-wash:#3A1C19;
}

/* Reading size. Everything is in rem so one root change scales headings,
   prices and buttons together — the dealers who asked for this are
   reading a phone at arm's length in a shop. */
html{font-size:16px;-webkit-text-size-adjust:100%}
html[data-fs="s"]{font-size:14.5px}
html[data-fs="l"]{font-size:18px}
html[data-fs="xl"]{font-size:20.5px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}
html[data-motion="off"] *{animation:none!important;transition:none!important}

/* ============ 2. reset + shell ===================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--sans);background:var(--bg);color:var(--ink);
  font-size:.9375rem;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;              /* no rubber-band under the bars */
}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
/* Nearly everything in this app is a link: a card, a category tile, a
   menu row, a chip. A global accent colour therefore painted every one
   of their headings teal, which read as though the whole screen was
   clickable text. Links inherit; the few that are genuinely inline
   links say so with .link. */
a{color:inherit;text-decoration:none}
.link{color:var(--brand);font-weight:600}
::selection{background:var(--brand-wash);color:var(--brand-ink)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
[hidden]{display:none!important}

/* Everything scrolls in <main>, not in <body>. That is what keeps the
   header and the tab bar genuinely fixed on iOS, where a scrolling body
   drags the browser chrome around with it. */
.app{display:flex;flex-direction:column;min-height:100dvh}

.topbar{
  position:sticky;top:0;z-index:60;background:var(--surface);
  border-bottom:1px solid var(--line);padding-top:var(--safe-t);
}
.topbar-in{
  max-width:var(--page);margin:0 auto;height:var(--header);
  padding:0 12px;display:flex;align-items:center;gap:8px;
}
.topbar.flat{border-bottom-color:transparent}
.brandmark{
  width:34px;height:34px;border-radius:10px;flex:0 0 auto;
  background:linear-gradient(140deg,var(--brand),var(--brand-ink));
  color:var(--on-brand);display:grid;place-items:center;font-weight:800;font-size:.8rem;letter-spacing:-.02em;
}
.brandname{font-weight:750;font-size:1rem;letter-spacing:-.02em;line-height:1.15}
.brandname small{display:block;font-size:.62rem;font-weight:500;color:var(--ink-2);letter-spacing:.01em}
.topbar h1{font-size:1.0625rem;font-weight:700;letter-spacing:-.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.topbar .spacer{flex:1}

/* Round icon buttons in the header and on cards. 40px so a thumb hits it. */
.iconbtn{
  width:40px;height:40px;border-radius:var(--r-full);flex:0 0 auto;
  display:grid;place-items:center;color:var(--ink-2);
  transition:background .15s,color .15s;position:relative;
}
.iconbtn:hover,.iconbtn:focus-visible{background:var(--surface-2);color:var(--ink)}
.iconbtn:active{background:var(--line)}
.iconbtn svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.iconbtn.on{color:var(--brand)}
.iconbtn .dot{
  position:absolute;top:5px;right:5px;min-width:17px;height:17px;padding:0 4px;
  border-radius:var(--r-full);background:var(--brand);color:var(--on-brand);
  font-size:.6rem;font-weight:800;display:grid;place-items:center;
  border:2px solid var(--surface);
}

main{
  flex:1;width:100%;max-width:var(--page);margin:0 auto;
  padding:0 12px calc(var(--tabbar) + var(--safe-b) + var(--dock) + 20px);
}

/* The tab bar. Five destinations, no more — a sixth turns navigation
   into a menu, and a menu on a phone is a screen nobody opens. */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--surface);border-top:1px solid var(--line);
  padding-bottom:var(--safe-b);
  display:grid;grid-template-columns:repeat(5,1fr);
}
.tabbar a{
  height:var(--tabbar);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;color:var(--ink-2);font-size:.62rem;font-weight:600;
  position:relative;transition:color .15s;
}
.tabbar a svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.85;
  stroke-linecap:round;stroke-linejoin:round}
.tabbar a.on{color:var(--brand)}
.tabbar a.on svg{stroke-width:2.15}
.tabbar .dot{
  position:absolute;top:6px;left:calc(50% + 6px);min-width:16px;height:16px;padding:0 4px;
  border-radius:var(--r-full);background:var(--brand);color:var(--on-brand);font-size:.58rem;
  font-weight:800;display:grid;place-items:center;border:2px solid var(--surface);
}

/* ============ 3. primitives ======================================== */
/* One button. Four intents, three sizes, and nothing anywhere else in
   the app is allowed to style a <button> that a person presses to do
   something. V3 learned this the hard way: a rename of one selector
   left the whole checkout unstyled. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:0 16px;height:44px;border-radius:var(--r);
  font-size:.875rem;font-weight:650;letter-spacing:-.01em;line-height:1;
  border:1px solid transparent;white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s,transform .06s;
}
.btn:active{transform:scale(.985)}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.btn[disabled]{opacity:.5;pointer-events:none}

.btn-primary{background:var(--brand);color:var(--on-brand)}
.btn-primary:hover{background:var(--brand-ink)}

.btn-secondary{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
.btn-secondary:hover{border-color:var(--brand);color:var(--brand)}

.btn-quiet{background:var(--surface-2);color:var(--ink-2)}
.btn-quiet:hover{background:var(--line);color:var(--ink)}

.btn-danger{background:var(--bad-wash);color:var(--bad)}
.btn-danger:hover{background:var(--bad);color:#fff}

.btn-sm{height:34px;padding:0 12px;font-size:.78rem;border-radius:var(--r-sm)}
.btn-sm svg{width:15px;height:15px}
.btn-lg{height:52px;padding:0 22px;font-size:.95rem;border-radius:var(--r)}
.btn-block{display:flex;width:100%}

.btnrow{display:flex;gap:8px}
.btnrow>.btn{flex:1}

/* Field */
.field{display:block;margin-bottom:12px}
.field>span{display:block;font-size:.72rem;font-weight:650;color:var(--ink-2);margin-bottom:5px}
.input,textarea.input,select.input{
  width:100%;height:46px;padding:0 13px;background:var(--surface);
  border:1.5px solid var(--line);border-radius:var(--r);
  font-size:.9rem;transition:border-color .15s;
}
textarea.input{height:auto;padding:11px 13px;min-height:80px;resize:vertical;line-height:1.5}
.input:focus{outline:0;border-color:var(--brand)}
.input::placeholder{color:var(--ink-3)}
.field .help{font-size:.7rem;color:var(--ink-2);margin-top:5px;line-height:1.45}

/* Search box — the one on Home and the one on the search screen */
.searchbox{
  display:flex;align-items:center;gap:9px;height:46px;padding:0 13px;
  background:var(--surface-2);border:1.5px solid transparent;border-radius:var(--r-full);
  transition:border-color .15s,background .15s;
}
.searchbox:focus-within{background:var(--surface);border-color:var(--brand)}
.searchbox svg{width:19px;height:19px;fill:none;stroke:var(--ink-3);stroke-width:2;
  stroke-linecap:round;flex:0 0 auto}
.searchbox input{flex:1;min-width:0;border:0;background:none;font-size:.9rem}
.searchbox input:focus{outline:0}
.searchbox .clear{width:26px;height:26px;border-radius:var(--r-full);display:grid;
  place-items:center;color:var(--ink-3);flex:0 0 auto}
.searchbox .clear:hover{background:var(--line);color:var(--ink)}

/* Chip — filters, categories, quick picks */
.chip{
  display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;
  border-radius:var(--r-full);background:var(--surface);border:1px solid var(--line);
  font-size:.78rem;font-weight:600;color:var(--ink-2);white-space:nowrap;
  transition:all .15s;
}
.chip:hover{border-color:var(--line-strong);color:var(--ink)}
.chip.on{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.chip .n{font-size:.68rem;opacity:.7;font-variant-numeric:tabular-nums}
.chiprow{display:flex;gap:7px;overflow-x:auto;padding:2px 12px;margin:0 -12px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chiprow::-webkit-scrollbar{display:none}

/* Badge — status, stock, offers. Never interactive. */
.badge{
  display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:var(--r-sm);
  font-size:.65rem;font-weight:700;letter-spacing:.01em;line-height:1.35;
}
.badge-ok{background:var(--ok-wash);color:var(--ok)}
.badge-warn{background:var(--warn-wash);color:var(--warn)}
.badge-bad{background:var(--bad-wash);color:var(--bad)}
.badge-gold{background:var(--gold-wash);color:var(--gold)}
.badge-brand{background:var(--brand-wash);color:var(--brand-ink)}
[data-mode="dark"] .badge-brand{color:var(--brand)}
.badge-quiet{background:var(--surface-2);color:var(--ink-2)}

/* Card and section */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-1)}
.card-pad{padding:14px}

.section{margin-top:22px}
.section-head{display:flex;align-items:baseline;gap:10px;margin-bottom:11px;padding:0 2px}
.section-head h2{font-size:1.0625rem;font-weight:750;letter-spacing:-.022em;flex:1;min-width:0}
.section-head p{font-size:.75rem;color:var(--ink-2);margin-top:2px}
.section-head .more{font-size:.78rem;font-weight:650;color:var(--brand);flex:0 0 auto}

/* Sheet — the bottom sheet used for filters, size pickers, confirmations.
   A screen is a route; a sheet is a decision you make without leaving
   the screen. Anything with its own back-worthy state is a route. */
.sheet-scrim{
  position:fixed;inset:0;z-index:100;background:rgba(10,22,20,.45);
  opacity:0;pointer-events:none;transition:opacity .22s;
  backdrop-filter:blur(2px);
}
.sheet-scrim.open{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:101;
  background:var(--surface);border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:var(--shadow-3);
  transform:translateY(101%);transition:transform .26s cubic-bezier(.32,.72,0,1);
  max-height:88dvh;display:flex;flex-direction:column;
  padding-bottom:var(--safe-b);
}
.sheet.open{transform:translateY(0)}
.sheet-head{
  padding:14px 16px 10px;display:flex;align-items:center;gap:10px;
  border-bottom:1px solid var(--line);flex:0 0 auto;
}
.sheet-head h2{font-size:1rem;font-weight:720;letter-spacing:-.02em;flex:1}
.sheet-body{padding:14px 16px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.sheet-foot{padding:12px 16px;border-top:1px solid var(--line);flex:0 0 auto;
  background:var(--surface)}
.grabber{width:38px;height:4px;border-radius:var(--r-full);background:var(--line-strong);
  margin:8px auto 0}
@media (min-width:720px){
  .sheet{left:50%;right:auto;transform:translate(-50%,101%);width:min(520px,94vw);
    bottom:0;border-radius:var(--r-xl) var(--r-xl) 0 0}
  .sheet.open{transform:translate(-50%,0)}
}

/* Toast */
.toast{
  position:fixed;left:50%;transform:translateX(-50%) translateY(14px);
  bottom:calc(var(--tabbar) + var(--safe-b) + var(--dock) + 14px);z-index:120;
  background:var(--ink);color:var(--bg);padding:11px 17px;border-radius:var(--r-full);
  font-size:.8rem;font-weight:600;box-shadow:var(--shadow-3);
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
  max-width:88vw;text-align:center;
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* Empty and loading */
.empty{text-align:center;padding:46px 20px;color:var(--ink-2)}
.empty svg{width:44px;height:44px;stroke:var(--ink-3);fill:none;stroke-width:1.5;
  margin:0 auto 12px}
.empty strong{display:block;font-size:1rem;color:var(--ink);font-weight:700;margin-bottom:5px}
.empty p{font-size:.82rem;line-height:1.55;max-width:34ch;margin:0 auto 16px}

.skeleton{background:linear-gradient(90deg,var(--surface-2) 25%,var(--line) 37%,var(--surface-2) 63%);
  background-size:400% 100%;animation:shimmer 1.4s ease infinite;border-radius:var(--r)}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

/* Small helpers, used everywhere */
.muted{color:var(--ink-2)}
.tiny{font-size:.72rem}
.num{font-variant-numeric:tabular-nums}
.stack>*+*{margin-top:10px}
.row{display:flex;align-items:center;gap:8px}
.wrap{flex-wrap:wrap}
.grow{flex:1;min-width:0}
.trunc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ============ 4. product =========================================== */
/* The card. Fixed proportions so a row of them never staggers: a square
   image well, then a fixed-height text block, then the action row
   pinned to the bottom. V3's cards ran to different lengths because the
   name wrapped to two lines on some and one on others. */
.pgrid{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
@media (min-width:560px){.pgrid{grid-template-columns:repeat(3,1fr);gap:12px}}
@media (min-width:860px){.pgrid{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1080px){.pgrid{grid-template-columns:repeat(5,1fr)}}

.pcard{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;position:relative;
  transition:border-color .15s,box-shadow .15s,transform .1s;
}
.pcard:hover{border-color:var(--line-strong);box-shadow:var(--shadow-2)}
.pcard:active{transform:scale(.99)}

/* The whole tile opens the product. The save button and the stepper sit
   above it with their own z-index, so a tap on either does not also
   open the sheet — the exact collision reported on V3. */
.pcard-open{position:absolute;inset:0;z-index:1;border-radius:inherit}
.pcard-open span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

.pcard-img{
  position:relative;aspect-ratio:1;background:var(--surface-2);
  display:grid;place-items:center;overflow:hidden;
}
.pcard-img img{width:100%;height:100%;object-fit:contain;padding:7%;
  opacity:0;transition:opacity .3s}
.pcard-img img.ready{opacity:1}
.pcard-noimg{color:var(--ink-3);font-size:.65rem;font-weight:600;text-align:center;padding:10px}

/* Save. Top right, above the tile link, big enough to hit. */
.psave{
  position:absolute;top:6px;right:6px;z-index:2;width:34px;height:34px;
  border-radius:var(--r-full);background:rgba(255,255,255,.9);
  backdrop-filter:blur(6px);display:grid;place-items:center;color:var(--ink-2);
  box-shadow:var(--shadow-1);transition:color .15s,transform .12s;
}
[data-mode="dark"] .psave{background:rgba(23,31,29,.86)}
.psave svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}
.psave:active{transform:scale(.88)}
.psave.on{color:var(--bad)}
.psave.on svg{fill:currentColor}

.pcard-flags{position:absolute;top:6px;left:6px;z-index:2;display:flex;flex-direction:column;
  align-items:flex-start;gap:4px}

.pcard-body{padding:9px 10px 0;flex:1;display:flex;flex-direction:column;min-height:0}
.pcard-brand{font-size:.62rem;font-weight:700;letter-spacing:.045em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:2px}
.pcard-name{font-size:.8rem;font-weight:620;line-height:1.32;letter-spacing:-.01em;
  height:2.64em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pcard-price{margin-top:6px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;min-height:1.4em}
.price{font-size:.95rem;font-weight:800;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.price-was{font-size:.72rem;color:var(--ink-3);text-decoration:line-through;font-variant-numeric:tabular-nums}
.price-ask{font-size:.75rem;font-weight:650;color:var(--ink-2)}
.pcard-meta{font-size:.66rem;color:var(--ink-2);margin-top:2px}
.pcard-act{padding:8px 10px 10px;position:relative;z-index:2}

/* Quantity stepper. One component, used on the card, in the size rows,
   in the cart and in the repeat sheet. */
.stepper{display:inline-flex;align-items:center;background:var(--surface-2);
  border-radius:var(--r-full);padding:2px;height:34px}
.stepper button{width:30px;height:30px;border-radius:var(--r-full);display:grid;
  place-items:center;color:var(--ink);font-size:1.05rem;font-weight:600;line-height:1;
  transition:background .12s}
.stepper button:hover{background:var(--surface)}
.stepper button[disabled]{opacity:.35;pointer-events:none}
.stepper .n{min-width:28px;text-align:center;font-size:.82rem;font-weight:750;
  font-variant-numeric:tabular-nums}
.stepper.block{display:flex;width:100%;justify-content:space-between}
.stepper.block .n{flex:1}

/* A horizontal rail of cards — "buy again", "featured", "recently seen" */
.rail{display:flex;gap:10px;overflow-x:auto;padding:2px 12px 4px;margin:0 -12px;
  scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}
.rail>*{flex:0 0 148px;scroll-snap-align:start}
@media (min-width:560px){.rail>*{flex-basis:170px}}

/* Category tile */
.cattiles{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
@media (min-width:560px){.cattiles{grid-template-columns:repeat(4,1fr)}}
@media (min-width:860px){.cattiles{grid-template-columns:repeat(6,1fr)}}
.cattile{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:10px 8px 11px;display:flex;flex-direction:column;align-items:center;gap:7px;
  text-align:center;transition:border-color .15s,transform .1s;
}
.cattile:hover{border-color:var(--brand)}
.cattile:active{transform:scale(.97)}
.cattile-img{width:52px;height:52px;border-radius:var(--r);background:var(--surface-2);
  overflow:hidden;display:grid;place-items:center}
.cattile-img img{width:100%;height:100%;object-fit:contain;padding:5px}
.cattile b{font-size:.7rem;font-weight:650;line-height:1.28;letter-spacing:-.01em;
  color:var(--ink);height:2.56em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cattile span{font-size:.62rem;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* List row — used by search results in list mode, saved, order lines */
.lrow{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--line);position:relative}
.lrow:last-child{border-bottom:0}
.lrow-img{width:62px;height:62px;flex:0 0 auto;border-radius:var(--r);background:var(--surface-2);
  overflow:hidden;display:grid;place-items:center}
.lrow-img img{width:100%;height:100%;object-fit:contain;padding:5px}
.lrow-main{flex:1;min-width:0}
.lrow-main b{display:block;font-size:.84rem;font-weight:650;line-height:1.35;letter-spacing:-.01em}
.lrow-main .sub{font-size:.7rem;color:var(--ink-2);margin-top:2px}
.lrow-side{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:6px;
  justify-content:center}

/* ============ 5. screens =========================================== */
/* Home hero */
.hero{
  margin:12px 0 4px;padding:16px;border-radius:var(--r-lg);
  background:linear-gradient(135deg,var(--brand),var(--brand-ink));color:var(--on-brand);
  position:relative;overflow:hidden;
}
.hero::after{content:'';position:absolute;right:-40px;top:-40px;width:170px;height:170px;
  border-radius:50%;background:rgba(255,255,255,.07)}
.hero .eyebrow{font-family:var(--mono);font-size:.6rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;opacity:.8}
.hero h2{font-size:1.3rem;font-weight:780;letter-spacing:-.03em;margin:5px 0 4px;line-height:1.15}
.hero p{font-size:.8rem;opacity:.88;line-height:1.5;max-width:38ch}
.hero .btn{margin-top:12px;background:var(--on-brand);color:var(--brand);font-weight:700}
.hero .btn:hover{opacity:.9}

/* Promo strip (config.js promos) */
.promo{padding:12px 14px;border-radius:var(--r-lg);border:1px solid var(--line);
  background:var(--surface);display:flex;align-items:center;gap:11px}
.promo-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:var(--gold)}
.promo b{font-size:.84rem;font-weight:700;display:block}
.promo span{font-size:.72rem;color:var(--ink-2);display:block;line-height:1.4}

/* Notice from the office */
.notice{padding:11px 13px;border-radius:var(--r);background:var(--brand-wash);
  color:var(--brand-ink);font-size:.78rem;line-height:1.5}
[data-mode="dark"] .notice{color:var(--ink)}

/* Product screen */
.pdp-gallery{position:relative;background:var(--surface-2);border-radius:var(--r-lg);
  overflow:hidden;margin-top:10px}
.pdp-frames{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pdp-frames::-webkit-scrollbar{display:none}
.pdp-frames>div{flex:0 0 100%;aspect-ratio:1;scroll-snap-align:center;display:grid;place-items:center}
.pdp-frames img{width:100%;height:100%;object-fit:contain;padding:6%}
.pdp-dots{position:absolute;left:0;right:0;bottom:9px;display:flex;justify-content:center;gap:5px}
.pdp-dots i{width:6px;height:6px;border-radius:50%;background:var(--line-strong);transition:all .2s}
.pdp-dots i.on{background:var(--brand);width:16px;border-radius:var(--r-full)}
.pdp-fav{position:absolute;top:10px;right:10px;z-index:2}

.pdp-head{margin-top:14px}
.pdp-brand{font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--brand)}
.pdp-head h2{font-size:1.25rem;font-weight:770;letter-spacing:-.028em;line-height:1.22;margin:3px 0}
.pdp-desc{font-size:.83rem;color:var(--ink-2);line-height:1.55;margin-top:5px}
.pdp-priceblock{margin-top:12px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.pdp-priceblock .price{font-size:1.4rem}

.sizerow{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}
.sizerow:last-child{border-bottom:0}
.sizerow-main{flex:1;min-width:0}
.sizerow-main b{display:block;font-size:.84rem;font-weight:620}
.sizerow-main .sub{font-size:.7rem;color:var(--ink-2);margin-top:1px}

.spec{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:.78rem}
.spec dt{color:var(--ink-2);font-weight:600}
.spec dd{font-weight:600;text-align:right}

/* Stars */
.stars{display:inline-flex;gap:1px;color:var(--gold)}
.stars svg{width:14px;height:14px;fill:currentColor;stroke:none}
.stars .off{color:var(--line-strong)}

/* The cart bar. Sits above the tab bar and raises --dock so nothing on
   any screen can hide underneath it — the collision V3 kept producing. */
.cartbar{
  position:fixed;left:0;right:0;bottom:calc(var(--tabbar) + var(--safe-b));z-index:80;
  background:var(--brand);color:var(--on-brand);
  display:flex;align-items:center;gap:12px;padding:10px 14px;
  /* It sits a tab bar's height up from the bottom, so hiding it needs to
     clear its own height AND that offset — translateY(110%) alone left a
     teal sliver painted over the tab bar icons. visibility keeps it out
     of hit-testing while it is away. */
  transform:translateY(calc(100% + var(--tabbar) + var(--safe-b)));
  visibility:hidden;
  transition:transform .24s cubic-bezier(.32,.72,0,1),visibility 0s linear .24s;
  box-shadow:0 -4px 18px rgba(16,36,32,.14);
}
.cartbar.on{transform:translateY(0);visibility:visible;transition-delay:0s,0s}
.cartbar .grow b{display:block;font-size:.88rem;font-weight:750;letter-spacing:-.01em}
.cartbar .grow span{display:block;font-size:.7rem;opacity:.85}
.cartbar .btn{background:var(--on-brand);color:var(--brand);height:38px;font-size:.82rem;font-weight:700}
body.has-cartbar{--dock:58px}

/* Checkout summary */
.sumline{display:flex;justify-content:space-between;gap:12px;font-size:.83rem;padding:5px 0}
.sumline.total{font-size:1rem;font-weight:800;letter-spacing:-.02em;padding-top:10px;
  margin-top:6px;border-top:1px solid var(--line)}
.sumline .num{font-variant-numeric:tabular-nums}

/* Order history */
.ordercard{padding:13px 14px;border-radius:var(--r-lg);border:1px solid var(--line);
  background:var(--surface);margin-bottom:9px}
.ordercard .top{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.ordercard .ref{font-family:var(--mono);font-size:.74rem;font-weight:600;letter-spacing:-.02em}
.ordercard .when{font-size:.7rem;color:var(--ink-2)}

/* Account rows */
.menulist{border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);
  overflow:hidden}
.menurow{display:flex;align-items:center;gap:12px;width:100%;padding:13px 14px;
  border-bottom:1px solid var(--line);text-align:left;transition:background .12s}
.menurow:last-child{border-bottom:0}
.menurow:hover{background:var(--surface-2)}
.menurow svg{width:19px;height:19px;fill:none;stroke:var(--ink-2);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.menurow b{font-size:.86rem;font-weight:620;display:block;color:var(--ink)}
.menurow small{font-size:.7rem;color:var(--ink-2);display:block;margin-top:1px}
.menurow .chev{margin-left:auto;color:var(--ink-3);flex:0 0 auto}

.avatar{width:52px;height:52px;border-radius:var(--r-full);background:var(--brand);
  color:var(--on-brand);display:grid;place-items:center;font-weight:800;font-size:1.15rem;
  flex:0 0 auto;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}

/* Sign-in */
.otpbox{display:flex;gap:8px;justify-content:center;margin:14px 0}
.otpbox input{width:44px;height:52px;text-align:center;font-size:1.15rem;font-weight:750;
  border:1.5px solid var(--line);border-radius:var(--r);background:var(--surface)}
.otpbox input:focus{outline:0;border-color:var(--brand)}

/* Settings */
.setrow{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.setrow:last-child{border-bottom:0}
.setrow .grow b{display:block;font-size:.84rem;font-weight:620}
.setrow .grow small{display:block;font-size:.7rem;color:var(--ink-2);margin-top:1px;line-height:1.4}
.segmented{display:inline-flex;background:var(--surface-2);border-radius:var(--r-full);padding:3px;gap:2px}
.segmented button{padding:6px 12px;border-radius:var(--r-full);font-size:.74rem;font-weight:650;
  color:var(--ink-2);transition:all .15s}
.segmented button.on{background:var(--surface);color:var(--brand);box-shadow:var(--shadow-1)}
.switch{width:44px;height:26px;border-radius:var(--r-full);background:var(--line-strong);
  position:relative;transition:background .18s;flex:0 0 auto}
.switch::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;
  border-radius:50%;background:#fff;transition:transform .18s;box-shadow:var(--shadow-1)}
.switch.on{background:var(--brand)}
.switch.on::after{transform:translateX(18px)}

/* Install prompt / update strip */
.strip{
  display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:var(--r);
  background:var(--brand-wash);color:var(--brand-ink);font-size:.78rem;font-weight:600;
  margin-top:12px;
}
[data-mode="dark"] .strip{color:var(--ink)}
.strip .btn{margin-left:auto;flex:0 0 auto}

/* Theme swatches. Each button carries its own data-theme/data-mode, so it
   paints itself in the palette it selects — the choice is the colour, not
   a word for it. */
.swatchrow{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%}
.swatch{
  background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);
  padding:9px 4px 7px;display:flex;flex-direction:column;align-items:center;gap:6px;
  transition:border-color .15s,transform .1s;
}
.swatch:active{transform:scale(.96)}
.swatch.on{border-color:var(--brand);border-width:2px;padding:8px 3px 6px}
.swatch-dot{
  width:26px;height:26px;border-radius:var(--r-full);
  background:linear-gradient(135deg,var(--brand),var(--brand-ink));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}
.swatch-name{font-size:.62rem;font-weight:650;color:var(--ink-2)}
.swatch.on .swatch-name{color:var(--brand)}