/* ============ Design tokens — semantic colour system ============ */
:root{
  color-scheme: light;
  /* ---- Colour system (round 9): white-first, 60-30-10 ----
     60% page ground, 30% white surfaces + neutral ink, 10% ONE accent.
     Depth comes from three surface levels so nothing melts together:
     page #f7f8fa -> surface #ffffff -> sunken #f1f3f5, every edge a
     hairline #e8eaed. Text is never pure black; muted stays AA (4.5:1+).
     The only glass on the site is the sticky header (see .site-header). */
  --bg:#f7f8fa;
  --surface:#ffffff;
  --surface-sunken:#f1f3f5;
  --line:#e8eaed;
  --line2:#eef0f2;
  --line-strong:#c9ced6;
  --ink:#14161a;
  --ink-2:#333a44;
  --muted:#6b7280;
  --accent:#e11d48;
  --accent-deep:#b3123a;
  --accent-soft:#fdf0f3;
  --accent-ink:#9f1239;
  --accent-line:#f0bfd0;
  --accent-grad:#8f1230;
  --shimmer:#f8f9fb;
  --success:#15803d; --success-bg:#e9f7ee;
  --warning:#b45309; --warning-bg:#fdf4e3;
  --danger:#b91c1c;  --danger-bg:#fdecec;
  --info:#1d4ed8;    --info-bg:#e3ecfd;
  --dark:#14161a;
  --dark-2:#23272f;
  --on-dark:#a7adba;
  --on-dark-2:#c6ccd8;
  --star:#e8930c;
  --wa:#128c4b; --wa-deep:#0b6e39; --wa-bright:#25d366;
  --ink-rgb:20,22,26;
  /* aliases: older rules reference these names */
  --card:var(--surface); --brand:var(--accent); --brand-deep:var(--accent-deep);
  --brand-soft:var(--accent-soft); --brand-ink:var(--accent-ink);
  --faint:var(--muted); --gold:var(--star); --green:var(--success); --red:var(--danger);
  --ok:var(--success); --ok-bg:var(--success-bg);
  --warn:var(--warning); --warn-bg:var(--warning-bg);
  --bad:var(--danger); --bad-bg:var(--danger-bg);
  --deal:var(--warning); --deal-bg:var(--warning-bg);
  --r:14px; --r-lg:22px;
  --sh-sm:0 1px 2px rgba(var(--ink-rgb),.06);
  --sh:0 8px 20px -10px rgba(var(--ink-rgb),.14);
  --sh-lg:0 16px 36px -16px rgba(var(--ink-rgb),.2);
  --ease:cubic-bezier(.22,.68,.32,1);
  --fd:"Sora",system-ui,sans-serif; --fb:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --max:78rem;
}
/* ============ Base ============ */
*{box-sizing:border-box}
*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{margin:0;font-family:var(--fb);background:var(--bg);color:var(--ink-2);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;min-width:0}
img{display:block;max-width:100%}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
input,select,textarea{font:inherit;color:var(--ink)}
::selection{background:var(--brand);color:#fff}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
h1,h2,h3,.fd{font-family:var(--fd);letter-spacing:-.015em;line-height:1.2;margin:0;color:var(--ink)}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:.9rem;min-width:0}
@media(min-width:700px){.wrap{padding-inline:1.4rem}}
.muted{color:var(--muted)}
.small{font-size:.8125rem}
.hide{display:none !important}
/* ============ Topbar ============ */
.topbar{background:var(--dark);color:var(--on-dark);font-size:.72rem;font-weight:500}
.topbar-in{display:flex;align-items:center;gap:1.1rem;padding-block:.45rem}
.topbar .tb-msg{flex:1;min-width:0;text-align:center;line-height:1.45}
.topbar a{color:var(--on-dark);white-space:nowrap}
.topbar a:hover{color:#fff;text-decoration:none}
.topbar .hot{color:#fda4af;font-weight:700}
@media(min-width:700px){.topbar .tb-msg{text-align:left}}
@media(max-width:699px){.topbar .tb-link{display:none}}
/* ============ Header ============ */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.88);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--line)}
.hd{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.6rem;padding-block:.55rem}
.logo{font-family:var(--fd);font-weight:800;font-size:1.22rem;letter-spacing:-.03em;color:var(--ink);white-space:nowrap}
.logo:hover{text-decoration:none}
.logo em{font-style:normal;color:var(--brand)}
.hact{display:flex;align-items:center;gap:.15rem}
.icb{position:relative;min-width:2.75rem;height:2.75rem;display:inline-grid;place-items:center;border-radius:999px;color:var(--ink-2);transition:.18s var(--ease)}
.icb:hover{background:var(--brand-soft);color:var(--brand);text-decoration:none}
.icb svg{width:1.3rem;height:1.3rem}
.nbadge{position:absolute;top:1px;right:0;min-width:1.2rem;height:1.2rem;padding:0 .3rem;background:var(--brand);color:#fff;font-size:.64rem;font-weight:800;border-radius:999px;display:grid;place-items:center;border:2px solid #fff}
.account-chip{display:flex;align-items:center;gap:.5rem;border:1px solid var(--line-strong);background:var(--surface);border-radius:999px;padding:.3rem .85rem .3rem .35rem;font-weight:700;font-size:.85rem;color:var(--ink);min-height:2.75rem}
.account-chip:hover{background:var(--brand-soft);text-decoration:none}
.avatar{width:2rem;height:2rem;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:.72rem;font-weight:800;flex:none}
.search{display:flex;align-items:stretch;background:var(--surface-sunken);border:2px solid transparent;border-radius:999px;overflow:hidden;min-width:0;transition:.2s var(--ease)}
.search:focus-within{border-color:var(--brand);background:var(--surface);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 12%,transparent)}
.search input{flex:1;border:0;background:none;outline:0;font-size:.9rem;padding:.68rem 1.1rem;min-width:0;color:var(--ink)}
.search input::placeholder{color:var(--faint)}
.search>button{background:var(--brand);color:#fff;padding:0 1.25rem;display:grid;place-items:center;transition:.18s;min-width:3.2rem}
.search>button:hover{background:var(--brand-deep)}
.search>button svg{width:1.15rem;height:1.15rem}
@media(max-width:899px){
  .hd .search{grid-column:1/-1;grid-row:2}
  .hd{padding-bottom:.65rem}
}
@media(min-width:900px){.hd{gap:1.4rem;padding-block:.65rem}.logo{font-size:1.35rem}}
/* category nav strip */
.catnav{background:var(--surface);border-top:1px solid var(--line2)}
.catnav-in{display:flex;align-items:center;gap:.15rem;overflow-x:auto;scrollbar-width:none;padding-block:.15rem}
.catnav-in::-webkit-scrollbar{display:none}
.catlink{font-size:.84rem;font-weight:600;color:var(--ink-2);padding:.68rem .85rem;white-space:nowrap;border-radius:.6rem;transition:.15s;display:inline-flex;align-items:center;min-height:2.75rem}
.catlink:hover{color:var(--brand);background:var(--brand-soft);text-decoration:none}
.catlink.hot{color:var(--brand);font-weight:700}
/* ============ Layout / sections ============ */
main{padding-bottom:calc(5.4rem + env(safe-area-inset-bottom))}
@media(min-width:900px){main{padding-bottom:2.5rem}}
.block{padding-block:.55rem}
.sec{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);overflow:hidden}
.sec-head{display:flex;align-items:center;gap:.9rem;padding:1rem 1.2rem .9rem;flex-wrap:wrap}
.sec-head .kick{font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);display:block;margin-bottom:.15rem}
.sec-head h2{font-size:1.08rem;font-weight:800;letter-spacing:-.02em}
.sec-head .more{margin-left:auto;font-size:.82rem;font-weight:700;color:var(--brand);display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap}
.sec-head .more:hover{text-decoration:underline}
.sec-body{padding:0 1.2rem 1.2rem}
.crumbs{font-size:.82rem;color:var(--muted);padding:.95rem 0 0;display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;line-height:1.4}
.crumbs a{color:var(--muted);font-weight:500}
.crumbs a:hover{color:var(--brand)}
.crumbs>span:last-child{color:var(--ink);font-weight:600}
/* Back affordance row — one flat, integrated bar: a clearly visible outlined
   back button (white fill + 1px border, dark label) on the same baseline as
   the breadcrumb, separated by a hairline divider — not a floating pill card,
   and not ghost text. Every non-home view gets an obvious way back. */
.backrow{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;padding-top:.8rem}
.backrow .crumbs{padding-top:0}
.backbtn{display:inline-flex;align-items:center;gap:.3rem;font-size:.84rem;font-weight:700;color:var(--ink);background:var(--card);border:1px solid var(--line-strong);border-radius:.6rem;padding:.5rem .95rem .5rem .7rem;min-height:2.75rem;cursor:pointer;transition:.15s var(--ease)}
.backbtn:hover{color:var(--brand);border-color:var(--brand);background:var(--brand-soft)}
.backbtn:active{transform:scale(.97)}
.backbtn svg{width:1rem;height:1rem;flex:none}
.backrow .bsep{width:1px;height:1.05rem;background:var(--line-strong);flex:none}
@media(max-width:640px){.backrow .bsep{display:none}}
.page-title{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;margin:.6rem 0 .25rem}
/* ============ Hero carousel ============ */
.hero-zone{padding-block:.9rem .2rem}
.hero{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--dark);box-shadow:var(--sh-sm);touch-action:pan-y}
.hslide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;pointer-events:none}
.hslide.on{opacity:1;z-index:1;pointer-events:auto}
.hslide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hslide::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(var(--ink-rgb),.88) 5%,rgba(var(--ink-rgb),.55) 45%,rgba(var(--ink-rgb),.05) 78%)}
.hcopy{position:relative;z-index:2;padding:2.2rem;max-width:32rem;color:#fff;display:grid;align-content:center;height:100%}
.hkick{display:inline-flex;align-items:center;gap:.45rem;font-size:.66rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;background:var(--accent);padding:.42rem .9rem;border-radius:999px;margin-bottom:.8rem;width:fit-content}
.hcopy h2{font-size:clamp(1.45rem,3.6vw,2.35rem);line-height:1.1;font-weight:800;margin-bottom:.6rem;color:#fff}
.hcopy p{font-size:.9rem;color:var(--on-dark-2);margin:0 0 1.1rem;max-width:25rem}
.hbtn{display:inline-flex;align-items:center;gap:.5rem;background:var(--surface);color:var(--ink);font-weight:800;font-size:.86rem;padding:.78rem 1.7rem;border-radius:999px;transition:.2s var(--ease);width:fit-content;min-height:2.9rem}
.hbtn:hover{background:var(--brand);color:#fff;text-decoration:none}
.hdots{position:absolute;z-index:3;bottom:1rem;left:2.2rem;display:flex;gap:.45rem}
.hdots button{height:.45rem;border-radius:999px;background:rgba(255,255,255,.35);transition:.3s var(--ease);width:1.6rem;padding:0;border:0}
.hdots button.on{width:2.6rem;background:#fff}
.harrow{position:absolute;z-index:3;top:50%;transform:translateY(-50%);width:2.6rem;height:2.6rem;border-radius:999px;background:rgba(var(--ink-rgb),.45);color:#fff;display:none;place-items:center;transition:.2s;border:1px solid rgba(255,255,255,.35)}
.harrow:hover{background:var(--brand);border-color:var(--brand)}
.harrow.prev{left:1rem}.harrow.next{right:1rem}
@media(min-width:900px){.harrow{display:grid}.hero{aspect-ratio:21/8;min-height:19rem}}
@media(max-width:899px){.hero{aspect-ratio:auto}.harrow{display:grid;top:5.75rem;width:2.5rem;height:2.5rem;background:rgba(var(--ink-rgb),.5)}.harrow.prev{left:.6rem}.harrow.next{right:.6rem}}
@media(max-width:640px){
  .hero{min-height:0}
  .hslide{position:relative;display:none;opacity:1}
  .hslide.on{display:block}
  .hslide img{position:relative;height:11.5rem}
  .hslide::after{inset:auto;top:0;left:0;right:0;height:11.5rem;background:linear-gradient(180deg,rgba(var(--ink-rgb),.12) 55%,rgba(var(--ink-rgb),.55))}
  .hcopy{height:auto;max-width:none;background:var(--dark);padding:1.05rem 1.15rem 2.5rem;align-content:start}
  .hcopy h2{font-size:1.32rem}
  .hcopy p{font-size:.82rem;margin-bottom:.95rem}
  .hdots{bottom:.85rem;left:1.15rem}
}
/* mobile category chips */
.mchips{display:flex;gap:.7rem;overflow-x:auto;padding:.85rem .1rem .25rem;scrollbar-width:none}
.mchips::-webkit-scrollbar{display:none}
.mchip{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:.4rem;width:4.7rem}
.mchip:hover{text-decoration:none}
.mchip .mi{width:3.5rem;height:3.5rem;border-radius:1.1rem;overflow:hidden;box-shadow:var(--sh-sm);background:var(--surface-sunken);border:2px solid var(--surface)}
.mchip img{width:100%;height:100%;object-fit:cover}
.mchip span{font-size:.67rem;font-weight:600;color:var(--ink-2);text-align:center;line-height:1.3;min-height:2.05em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(min-width:900px){.mchips{display:none}.hcopy{padding-left:4.6rem}}
/* ============ Trust strip ============ */
.trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.titem{display:flex;align-items:center;gap:.7rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:.7rem .85rem;box-shadow:var(--sh-sm);min-width:0}
.titem .ti{flex:0 0 2.4rem;width:2.4rem;height:2.4rem;border-radius:.9rem;background:var(--brand-soft);display:grid;place-items:center;color:var(--brand)}
.titem .ti svg{width:1.2rem;height:1.2rem}
.titem:nth-child(2) .ti{background:var(--success-bg);color:var(--success)}
.titem:nth-child(3) .ti{background:var(--success-bg);color:var(--wa)}
.titem:nth-child(4) .ti{background:var(--warning-bg);color:var(--warning)}
.titem b{display:block;font-size:.76rem;line-height:1.3;font-family:var(--fb);letter-spacing:0}
.titem span{font-size:.68rem;color:var(--muted)}
@media(min-width:900px){.trust{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* ============ Flash deals ============ */
.flash{border:0;background:linear-gradient(135deg,var(--accent-grad) 0%,var(--accent) 72%);color:#fff;position:relative}
.flash::before{content:"";position:absolute;inset:0;background:radial-gradient(26rem 14rem at 88% -10%,rgba(255,255,255,.18),transparent 60%),radial-gradient(20rem 12rem at 5% 110%,rgba(0,0,0,.25),transparent 60%);pointer-events:none}
.flash .sec-head{position:relative;z-index:1;border-bottom:1px solid rgba(255,255,255,.16)}
.flash .sec-head h2{color:#fff;display:flex;align-items:center;gap:.5rem}
.flash .sec-head h2 svg{width:1.15rem;height:1.15rem}
.flash .sec-head .kick{color:#fecdd3}
.flash .sec-head .more{color:#fff}
.flash .sec-body{position:relative;z-index:1}
.ftimer{display:flex;align-items:center;gap:.35rem}
.ftimer .lbl{font-size:.78rem;font-weight:600;color:#fecdd3;margin-right:.15rem}
.ftimer .t{background:rgba(var(--ink-rgb),.32);border:1px solid rgba(255,255,255,.15);border-radius:.6rem;min-width:2.15rem;text-align:center;font-family:var(--fd);font-weight:800;font-size:.92rem;padding:.34rem .25rem;font-variant-numeric:tabular-nums}
.ftimer .c{font-weight:800;opacity:.8}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
@media(min-width:700px){.fgrid{gap:.85rem}}
@media(min-width:1024px){.fgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.fcard{background:var(--surface);border-radius:var(--r);overflow:hidden;color:var(--ink);transition:transform .22s var(--ease),box-shadow .22s var(--ease);box-shadow:var(--sh-sm);display:flex;flex-direction:column;min-width:0}
.fcard:hover{transform:translateY(-4px);text-decoration:none}
.fcard .fim{position:relative;aspect-ratio:1/.92;background:var(--surface-sunken);overflow:hidden}
.fcard .fim img{width:100%;height:100%;object-fit:cover}
.fdisc{position:absolute;top:.55rem;left:.55rem;background:var(--red);color:#fff;font-size:.68rem;font-weight:800;padding:.3rem .6rem;border-radius:.5rem;z-index:2}
.fcard .fb{padding:.6rem .7rem .75rem;display:flex;flex-direction:column;flex:1}
.fcard .fn{font-size:.76rem;font-weight:600;line-height:1.35;min-height:2.7em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:.35rem;color:var(--ink)}
.fcard .fp{display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap}
.fcard .fp b{color:var(--brand);font-weight:800;font-size:.92rem;font-family:var(--fd)}
.fcard .fp s{font-size:.72rem;color:var(--faint)}
.soldbar{display:block;height:.42rem;background:color-mix(in srgb,var(--accent) 14%,#fff);border-radius:999px;overflow:hidden}
.soldbar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--star));border-radius:999px}
.soldtx{display:block;font-size:.67rem;color:var(--muted);margin-top:.32rem;font-weight:600}
.fcard .soldwrap{display:block;width:100%;margin-top:.55rem}
/* ============ Product grid + cards ============ */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
@media(min-width:700px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.85rem}}
@media(min-width:1200px){.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}}
.grid.five{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:700px){.grid.five{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1024px){.grid.five{grid-template-columns:repeat(5,minmax(0,1fr))}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform .22s var(--ease),box-shadow .22s var(--ease);position:relative;min-width:0}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.pm{position:relative;aspect-ratio:1/.96;background:var(--surface-sunken);overflow:hidden;display:block}
.pm img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.card:hover .pm img{transform:scale(1.06)}
.bdg{position:absolute;top:.6rem;left:.6rem;font-size:.64rem;font-weight:800;letter-spacing:.04em;padding:.32rem .6rem;border-radius:.55rem;color:#fff;box-shadow:var(--sh-sm);z-index:2;background:var(--red)}
.stock{position:absolute;bottom:.6rem;left:.6rem;font-size:.64rem;font-weight:800;background:rgba(var(--ink-rgb),.88);color:#fff;padding:.32rem .65rem;border-radius:999px;z-index:2}
.pb{padding:.7rem .75rem .85rem;display:flex;flex-direction:column;gap:.28rem;flex:1;min-width:0}
.pcat{font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.pname{font-size:.8rem;line-height:1.4;font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.35em;color:var(--ink)}
.pname:hover{color:var(--brand);text-decoration:none}
.prow{display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap;margin-top:.1rem}
.price{font-weight:800;font-size:1rem;color:var(--brand);font-family:var(--fd)}
.price .rs{font-size:.72rem;font-weight:700;color:var(--faint);font-family:var(--fb)}
.old{font-size:.74rem;color:var(--faint);text-decoration:line-through}
.off-pill{background:var(--accent-soft);color:var(--accent-deep);font-size:.68rem;font-weight:800;padding:.18rem .5rem;border-radius:999px}
.pmeta{display:flex;align-items:center;gap:.35rem;font-size:.7rem;color:var(--faint);flex-wrap:wrap}
.stars{display:inline-flex;gap:1px;color:var(--star)}
.stars svg{width:.78rem;height:.78rem}
.card-badges{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:.6rem}
.badge{display:inline-flex;align-items:center;gap:.28rem;font-size:.66rem;font-weight:700;padding:.24rem .55rem;border-radius:999px;background:var(--surface-sunken);color:var(--ink-2)}
.badge svg{width:.72rem;height:.72rem}
.badge.digital{background:var(--surface-sunken);color:var(--ink-2)}
.badge.cod{background:var(--ok-bg);color:var(--ok)}
.qadd{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:.45rem;background:var(--dark);color:#fff;font-weight:700;font-size:.79rem;padding:.68rem .8rem;border-radius:.85rem;transition:.2s var(--ease);min-height:2.75rem;width:100%}
.qadd:hover{background:var(--dark-2);transform:translateY(-1px)}
.qadd:active{transform:scale(.98)}
.qadd svg{width:1.05em;height:1.05em;flex:none}
/* ============ Category cards ============ */
.catgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
@media(min-width:700px){.catgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1100px){.catgrid{grid-template-columns:repeat(6,minmax(0,1fr))}}
.catcard{position:relative;border-radius:var(--r);overflow:hidden;min-height:8.5rem;display:flex;align-items:flex-end;transition:transform .22s var(--ease),box-shadow .22s var(--ease);box-shadow:var(--sh-sm);border:1px solid var(--line);background:var(--surface-sunken)}
.catcard:hover{transform:translateY(-4px);box-shadow:var(--sh);text-decoration:none}
.catcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.catcard:hover img{transform:scale(1.08)}
.catcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 26%,rgba(var(--ink-rgb),.85))}
.catcard .ct{position:relative;z-index:1;padding:.8rem;color:#fff}
.catcard .ct b{display:block;font-size:.86rem;font-family:var(--fd)}
.catcard .ct span{font-size:.7rem;color:var(--on-dark-2)}
.catcard .ct .type-tag{display:inline-block;margin-top:.35rem;font-size:.6rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:.18rem .5rem;border-radius:999px;background:rgba(255,255,255,.18);color:#fff}
.catcard .ct .type-tag.digital{background:var(--brand)}
/* ============ Promo band ============ */
.promos{display:grid;gap:.7rem;grid-template-columns:minmax(0,1fr)}
.promo{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:9.5rem;display:flex;align-items:center;color:#fff;box-shadow:var(--sh-sm);transition:transform .22s var(--ease)}
.promo:hover{transform:translateY(-3px);text-decoration:none}
.promo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.promo::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(var(--ink-rgb),.88) 15%,rgba(var(--ink-rgb),.42) 60%,transparent)}
.promo .pt{position:relative;z-index:1;padding:1.3rem}
.promo .pt small{font-size:.64rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#fda4af}
.promo .pt b{display:block;font-family:var(--fd);font-size:1.12rem;margin:.3rem 0 .7rem;line-height:1.25}
.promo .pt span{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:700;background:var(--surface);color:var(--ink);padding:.55rem 1.2rem;border-radius:999px;transition:.2s}
.promo:hover .pt span{background:var(--brand);color:#fff}
@media(min-width:700px){.promos{grid-template-columns:repeat(2,minmax(0,1fr))}.promo{min-height:10.5rem}}
/* ============ How-to steps ============ */
.steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
.step{background:var(--surface-sunken);border:1px solid var(--line);border-radius:var(--r);padding:.95rem;display:flex;flex-direction:column;gap:.3rem;position:relative;overflow:hidden}
.step .sn{position:absolute;top:.5rem;right:.8rem;font-family:var(--fd);font-weight:800;font-size:1.3rem;color:var(--line-strong);line-height:1}
.step b{font-size:.84rem;position:relative;padding-right:1.6rem;display:flex;align-items:center;gap:.55rem;font-family:var(--fb);letter-spacing:0}
.step .sic{flex:none;width:1.8rem;height:1.8rem;border-radius:.65rem;background:var(--brand-soft);display:grid;place-items:center;color:var(--brand)}
.step .sic svg{width:1rem;height:1rem}
.step span.tx{font-size:.73rem;color:var(--muted);position:relative;line-height:1.5}
@media(min-width:900px){.steps{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* ============ Buttons / forms ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:700;font-size:.88rem;padding:.72rem 1.6rem;border-radius:999px;transition:.2s var(--ease);border:1px solid var(--accent);color:var(--accent);background:var(--surface);min-height:2.9rem}
.btn:hover{background:var(--brand);color:#fff;transform:translateY(-1px);box-shadow:var(--sh-sm)}
.btn:active{transform:scale(.97)}
.btn-brand,.btn-solid{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn-brand:hover,.btn-solid:hover{background:var(--brand-deep);border-color:var(--brand-deep)}
.btn-wa{background:var(--wa);color:#fff;border-color:var(--wa)}
.btn-wa:hover{background:var(--wa-deep);border-color:var(--wa-deep)}
.btn-ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line-strong)}
.btn-ghost:hover{background:var(--surface);color:var(--brand);border-color:var(--brand)}
.btn-dark{background:var(--dark);color:#fff;border-color:var(--dark)}
.btn-dark:hover{background:var(--dark-2);border-color:var(--dark-2);color:#fff}
.btn-deal{background:var(--dark);color:#fff;border-color:var(--dark)}
.btn-deal:hover{background:var(--dark-2);border-color:var(--dark-2)}
.btn-sm{padding:.55rem 1.1rem;min-height:2.6rem;font-size:.83rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}
.field{margin-bottom:.9rem}
.field label{display:block;font-weight:700;font-size:.8rem;margin-bottom:.35rem;color:var(--ink-2)}
.field .hint{font-size:.75rem;color:var(--muted);margin-top:.3rem}
.field .err{font-size:.78rem;color:var(--bad);margin-top:.3rem;font-weight:600}
.input,select.input,textarea.input{width:100%;min-height:2.9rem;border:1px solid var(--line-strong);border-radius:.8rem;padding:.72rem 1rem;background:var(--surface);font-size:.92rem;outline:0;transition:.15s}
.input:focus{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
textarea.input{min-height:6rem;resize:vertical}
.radio-card{display:flex;gap:.75rem;border:1px solid var(--line);border-radius:var(--r);padding:.95rem;cursor:pointer;align-items:flex-start;background:var(--surface);transition:.15s}
.radio-card.sel{border-color:var(--brand);background:var(--brand-soft)}
.radio-card input{width:1.25rem;height:1.25rem;margin-top:.15rem;accent-color:var(--brand);flex:none}
.radio-card h4{margin:0;font-size:.93rem;font-family:var(--fb);letter-spacing:0}
.radio-card p{margin:.2rem 0 0;font-size:.82rem;color:var(--muted)}
.pay-detail{margin-top:.6rem;background:var(--surface-sunken);border:1px solid var(--line);border-radius:.7rem;padding:.7rem .85rem;font-size:.85rem;display:block}
.pay-detail p{margin:.25rem 0;color:var(--ink-2)}
.tabs{display:flex;gap:.25rem;border-bottom:2px solid var(--line);margin-bottom:1.1rem}
.tabs button{border:0;background:none;padding:.7rem 1.1rem;font-weight:700;font-size:.93rem;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-2px;min-height:2.9rem}
.tabs button.on{color:var(--brand);border-bottom-color:var(--brand)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.25rem;box-shadow:var(--sh-sm);min-width:0}
.panel h3{font-size:1.02rem;font-weight:800;margin-bottom:.7rem}
.alert{border-radius:.8rem;padding:.75rem .95rem;font-size:.88rem;font-weight:600;margin-bottom:.9rem}
.alert-err{background:var(--bad-bg);color:var(--bad)}
.alert-ok{background:var(--ok-bg);color:var(--ok)}
.alert-info{background:var(--info-bg);color:var(--info)}
/* ============ Skeletons ============ */
.sk{border-radius:var(--r-lg);background:linear-gradient(100deg,var(--surface-sunken) 40%,var(--shimmer) 50%,var(--surface-sunken) 60%);background-size:200% 100%;animation:shim 1.2s infinite}
@keyframes shim{from{background-position:180% 0}to{background-position:-20% 0}}
.sk-card{aspect-ratio:.74;border:1px solid var(--line)}
.sk-line{height:7.5rem}
/* ============ Product page ============ */
.pd-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:1.2rem;margin-top:1rem}
@media(min-width:900px){.pd-layout{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:2rem}}
.pd-main-img{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface-sunken);aspect-ratio:1/1;box-shadow:var(--sh-sm)}
.pd-main-img img{width:100%;height:100%;object-fit:cover}
.pd-thumbs{display:flex;gap:.6rem;margin-top:.6rem}
.pd-thumbs button{width:4.4rem;height:4.4rem;border-radius:.8rem;overflow:hidden;border:2px solid var(--line);padding:0;background:var(--surface-sunken);flex:none}
.pd-thumbs button.on{border-color:var(--brand)}
.pd-thumbs img{width:100%;height:100%;object-fit:cover}
.pd-price{font-size:1.9rem;font-weight:800;color:var(--brand);font-family:var(--fd)}
.pd-price .rs{font-size:1rem;color:var(--faint);font-weight:700;font-family:var(--fb)}
.pd-old{font-size:1rem;color:var(--faint);text-decoration:line-through}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line-strong);border-radius:999px;overflow:hidden;background:var(--surface)}
.qty button{width:2.8rem;height:2.8rem;border:0;background:none;display:grid;place-items:center;color:var(--ink)}
.qty button:hover{color:var(--brand);background:var(--brand-soft)}
.qty output{min-width:2.4rem;text-align:center;font-weight:800;font-size:1rem}
.seller-card{display:flex;gap:.8rem;align-items:center;border:1px solid var(--line);border-radius:var(--r);padding:.85rem 1rem;background:var(--surface);box-shadow:var(--sh-sm)}
.seller-card .avatar{width:2.75rem;height:2.75rem;font-size:.9rem}
.note-box{display:flex;gap:.7rem;background:var(--surface-sunken);color:var(--ink-2);border-radius:var(--r);padding:.85rem 1rem;font-size:.88rem;align-items:flex-start;line-height:1.55}
.note-box svg{flex:none;color:var(--ink-2);margin-top:.1rem;width:1.25rem;height:1.25rem}
.note-box.cod-note{background:var(--ok-bg)}
.note-box.cod-note svg{color:var(--ok)}
.stock-note{font-size:.76rem;font-weight:700;color:var(--bad)}
.buybar{position:fixed;left:0;right:0;bottom:calc(3.9rem + env(safe-area-inset-bottom));z-index:66;background:var(--surface);border-top:1px solid var(--line);display:flex;align-items:center;gap:.55rem;padding:.55rem .8rem;box-shadow:0 -2px 10px rgba(var(--ink-rgb),.07)}
.buybar .bb-price{display:flex;flex-direction:column;line-height:1.15;margin-right:.15rem;min-width:0}
.buybar .bb-price b{font-family:var(--fd);color:var(--brand);font-size:1rem;white-space:nowrap}
.buybar .bb-price s{font-size:.68rem;color:var(--faint)}
.buybar .btn{flex:1;padding:.6rem .6rem;min-height:2.9rem;font-size:.84rem}
@media(min-width:900px){.buybar{display:none}}
/* ============ Shop layout / filters ============ */
/* No sidebar (round 7): the catalog is one full-width column and the filters
   live in a single compact toolbar above the grid — dropdown buttons on
   desktop, a scrollable chip strip on mobile. The panel holding the filter
   groups is a floating dropdown under its button on desktop and the bottom
   sheet on mobile. Flat and light: small pill buttons, no heavy boxes. */
.catalog-main{min-width:0;margin-top:1rem}
.fbar{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.fbtn{position:relative;display:inline-flex;align-items:center;gap:.4rem;font-size:.83rem;font-weight:600;color:var(--ink-2);background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;padding:.5rem .95rem;min-height:2.6rem;cursor:pointer;transition:border-color .15s,background .15s,color .15s;white-space:nowrap}
.fbtn>svg{width:.85rem;height:.85rem;color:var(--faint);transition:transform .2s var(--ease)}
.fbtn:hover{border-color:var(--line-strong)}
.fbtn.on{border-color:var(--brand);color:var(--brand-ink);background:var(--brand-soft)}
.fbtn.on>svg{color:var(--brand)}
.fbtn[aria-expanded="true"]>svg{transform:rotate(180deg)}
.cnt-n{display:inline-grid;place-items:center;min-width:1.15rem;height:1.15rem;padding:0 .28rem;border-radius:999px;background:var(--brand);color:#fff;font-size:.66rem;font-weight:800}
.cnt-n[hidden]{display:none}
.deal-chip{display:inline-flex;align-items:center;gap:.35rem;font-size:.83rem;font-weight:600;color:var(--ink-2);background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;padding:.5rem .95rem;min-height:2.6rem;cursor:pointer;transition:.15s;white-space:nowrap}
.deal-chip svg{width:.9rem;height:.9rem}
.deal-chip:hover{border-color:var(--line-strong)}
.deal-chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.fpanel{position:absolute;top:calc(100% + .5rem);left:0;width:17rem;max-width:calc(100vw - 2rem);background:var(--surface);border:1px solid var(--line);border-radius:1rem;box-shadow:var(--sh);padding:.95rem 1.05rem;z-index:55;text-align:left}
.fpanel[hidden]{display:none}
@media(min-width:900px){
  .fpanel .fhead{display:none}
  .fpanel .f-group{display:none}
  .fpanel .f-group.show{display:block;border-top:0;margin-top:0;padding-top:.1rem;padding-bottom:.15rem}
}
.fhead{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.35rem}
.fhead>b{font-family:var(--fb);font-size:.95rem;font-weight:600;color:var(--ink)}
.fhead .fclear{font-size:.78rem;font-weight:600;color:var(--brand);padding:.45rem .5rem;border-radius:.4rem;min-height:2.4rem}
.fhead .fclear:hover{background:var(--brand-soft);text-decoration:none}
#filters-close{display:none}
/* Filter groups: plain title-case heading, hairline divider edge to edge */
.f-group{border-top:1px solid var(--line);margin:.55rem -1.05rem 0;padding:.85rem 1.05rem .95rem}
.f-gtitle{display:block;font-family:var(--fb);font-size:.875rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink);margin:0 0 .45rem}
.f-gbody{padding:0}
/* Compact checkbox rows: small square outline boxes, grey labels */
.check{display:flex;align-items:center;gap:.5rem;padding:.24rem 0;font-size:.8rem;font-weight:400;color:var(--ink-2);cursor:pointer;min-height:1.65rem}
.check:hover{color:var(--ink)}
.check input{appearance:none;-webkit-appearance:none;width:1rem;height:1rem;border:1.5px solid var(--line-strong);border-radius:3px;background:#fff;flex:none;margin:0;position:relative;cursor:pointer;transition:background .12s,border-color .12s}
.check input:checked{background:var(--brand);border-color:var(--brand)}
.check input:checked::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/72% no-repeat}
.check input:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.check .cnt{margin-left:auto;font-size:.72rem;color:var(--faint);font-weight:500}
/* Long option lists collapse behind a VIEW MORE / VIEW LESS toggle */
.f-extra{display:none}
.f-group.expanded .f-extra{display:flex}
.f-more{display:inline-flex;align-items:center;font-size:.7rem;font-weight:800;letter-spacing:.06em;color:var(--brand);padding:.35rem 0 0;min-height:2rem}
.f-more:hover{text-decoration:underline}
/* Price: two small Min / Max inputs, dash between, square brand apply button */
.range-row{display:flex;gap:.25rem;align-items:center}
.range-row .rdash{color:var(--faint);flex:none}
.range-row .input{min-height:2.3rem;padding:.4rem .25rem;font-size:.8rem;border-radius:4px;min-width:0;-moz-appearance:textfield;appearance:textfield}
.range-row .input::-webkit-outer-spin-button,.range-row .input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.price-go{width:2.3rem;height:2.3rem;flex:none;background:var(--brand);color:#fff;border-radius:4px;display:grid;place-items:center;transition:background .15s}
.price-go:hover{background:var(--brand-deep)}
.price-go svg{width:1rem;height:1rem}
/* Rating: single-select star rows (5 / 4 / 3 / 2 stars "And Up") */
.rate-row{position:relative;display:flex;align-items:center;gap:.45rem;padding:.26rem .3rem;min-height:1.9rem;border-radius:.4rem;cursor:pointer}
.rate-row input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.rate-row:focus-within{outline:2px solid var(--brand);outline-offset:1px}
.rate-row .stars svg{width:.95rem;height:.95rem}
.rate-row .andup{font-size:.78rem;color:var(--ink-2)}
.rate-row.sel{background:var(--brand-soft)}
.rate-row.sel .andup{color:var(--brand-ink);font-weight:700}
/* Action footer — mobile sheet only; on desktop every control applies live */
.f-actions{position:sticky;bottom:-.95rem;display:flex;gap:.55rem;background:var(--surface);border-top:1px solid var(--line);padding:.75rem 0 .35rem;margin-top:.7rem}
.f-actions .btn{flex:1}
@media(min-width:900px){.f-actions{display:none}}
.ovl{position:fixed;inset:0;background:rgba(var(--ink-rgb),.5);opacity:0;pointer-events:none;transition:.25s;z-index:90}
.ovl.show{opacity:1;pointer-events:auto}
/* Mobile: the filter panel becomes a flat bottom sheet with a grab handle,
   and the toolbar's dropdown buttons give way to a scrollable chip strip */
@media(max-width:899px){
  .fbar{display:none}
  .fpanel{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;height:auto;max-height:88dvh;z-index:95;border:0;border-radius:20px 20px 0 0;transform:translateY(106%);transition:transform .34s var(--ease);overflow-y:auto;overscroll-behavior:contain;box-shadow:var(--sh-lg);padding-top:.55rem}
  .fpanel.open{transform:none}
  .fpanel::before{content:"";display:block;width:2.6rem;height:.3rem;border-radius:999px;background:var(--line-strong);margin:0 auto .55rem}
  #filters-close{display:inline-grid}
  .f-actions{margin-inline:-1.05rem;padding:.75rem 1.05rem calc(.75rem + env(safe-area-inset-bottom))}
}
.toolbar{position:relative;display:flex;gap:.6rem;align-items:center;margin-bottom:.9rem;flex-wrap:wrap}
.toolbar .spacer{flex:1}
.results{font-size:.85rem;color:var(--muted);white-space:nowrap}
.results b{color:var(--ink)}
/* Mobile filter chips: one thumb-scroll row under the toolbar. On desktop
   the wrapper is display:contents so the Sort control inside it still
   takes part in the toolbar row while the chips themselves hide. */
.fchips{display:contents}
.fchip{display:none}
@media(max-width:899px){
  .fchips{display:flex;gap:.45rem;flex:1 1 100%;order:3;overflow-x:auto;scrollbar-width:none;margin-inline:-.9rem;padding:.15rem .9rem .3rem}
  .fchips::-webkit-scrollbar{display:none}
  .fchip{flex:none;display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;font-weight:600;color:var(--ink-2);background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;padding:.45rem .85rem;min-height:2.6rem;cursor:pointer;white-space:nowrap}
  .fchip>svg{width:.8rem;height:.8rem;color:var(--faint)}
  .fchip.on{border-color:var(--brand);color:var(--brand-ink);background:var(--brand-soft)}
  .fchip.on>svg{color:var(--brand)}
  .fchips .sortwrap{margin-left:0;flex:none}
  .fchips .sortwrap select{min-height:2.6rem;padding:.45rem .8rem}
}
/* Active filter pills above the grid */
.fpills{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center;margin:-.25rem 0 .9rem}
.fpills:empty{display:none}
.fpill{display:inline-flex;align-items:center;gap:.35rem;background:var(--brand-soft);color:var(--brand-ink);font-size:.78rem;font-weight:700;padding:.34rem .45rem .34rem .8rem;border-radius:999px;border:1px solid var(--accent-line)}
.fpill button{width:1.4rem;height:1.4rem;border-radius:50%;display:grid;place-items:center;background:var(--surface);color:var(--brand);flex:none}
.fpill button:hover{background:var(--brand);color:#fff}
.fpill button svg{width:.8rem;height:.8rem}
.fpill-clear{font-size:.8rem;font-weight:700;color:var(--brand);padding:.45rem .55rem;border-radius:.6rem;min-height:2.4rem}
.fpill-clear:hover{background:var(--brand-soft);text-decoration:underline}
.sortwrap{display:flex;align-items:center;gap:.5rem;font-size:.84rem;color:var(--muted);margin-left:auto}
.sortwrap select{border:1px solid var(--line-strong);border-radius:999px;padding:.55rem .9rem;background:var(--surface);font-size:.83rem;font-weight:600;outline:0;min-height:2.75rem;max-width:11.5rem;cursor:pointer}
.sortwrap select:focus{border-color:var(--brand)}
.empty-state,.empty{background:var(--surface);border:1px dashed var(--line-strong);border-radius:var(--r-lg);padding:2.6rem 1.2rem;text-align:center}
.empty-state h3{font-size:1.08rem;margin-bottom:.4rem}
.empty-state p{color:var(--muted);margin:0 0 1rem}
/* ============ Cart / checkout ============ */
.two-col{display:grid;grid-template-columns:minmax(0,1fr);gap:1.1rem;margin-top:1rem;align-items:start}
@media(min-width:900px){.two-col{grid-template-columns:minmax(0,1fr) 22rem}}
.cart-line{display:flex;gap:.9rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:.9rem;margin-bottom:.7rem;box-shadow:var(--sh-sm)}
.cart-line img{width:5.5rem;height:5.5rem;border-radius:.8rem;object-fit:cover;flex:none;background:var(--surface-sunken)}
.cart-line .cl-body{flex:1;min-width:0}
.cart-line h4{margin:0 0 .2rem;font-size:.9rem;line-height:1.4;font-family:var(--fb);letter-spacing:0}
.summary{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.2rem;box-shadow:var(--sh-sm)}
@media(min-width:900px){.summary{position:sticky;top:8.5rem}}
.summary h3{font-size:1rem;font-weight:800;margin-bottom:.7rem}
.sum-row{display:flex;justify-content:space-between;gap:1rem;font-size:.9rem;padding:.32rem 0;color:var(--ink-2)}
.sum-row span:first-child{min-width:0}
.sum-row.total{border-top:1px solid var(--line2);margin-top:.55rem;padding-top:.75rem;font-size:1.05rem;font-weight:800;color:var(--ink);font-family:var(--fd)}
.free-tag{color:var(--ok);font-weight:800}
/* ============ Orders / timeline ============ */
.chip{display:inline-flex;align-items:center;gap:.3rem;font-size:.7rem;font-weight:800;padding:.28rem .65rem;border-radius:999px;text-transform:capitalize;white-space:nowrap}
.chip-pending{background:var(--warn-bg);color:var(--warn)}
.chip-confirmed,.chip-preparing{background:var(--info-bg);color:var(--info)}
.chip-shipped{background:var(--surface-sunken);color:var(--ink-2)}
.chip-delivered,.chip-completed{background:var(--ok-bg);color:var(--ok)}
.chip-cancelled,.chip-refunded{background:var(--bad-bg);color:var(--bad)}
.order-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.05rem;margin-bottom:.8rem;box-shadow:var(--sh-sm)}
.order-head{display:flex;justify-content:space-between;gap:.6rem;flex-wrap:wrap;align-items:center;margin-bottom:.6rem}
.order-items{display:flex;gap:.5rem;flex-wrap:wrap}
.order-items img{width:3.3rem;height:3.3rem;border-radius:.6rem;object-fit:cover;border:1px solid var(--line);background:var(--surface-sunken)}
.timeline{list-style:none;margin:1rem 0 .2rem;padding:0}
.timeline li{display:flex;gap:.8rem;position:relative;padding-bottom:1.25rem}
.timeline li:last-child{padding-bottom:.1rem}
.timeline li::before{content:"";position:absolute;left:.72rem;top:1.65rem;bottom:0;width:2px;background:var(--line)}
.timeline li:last-child::before{display:none}
.tl-dot{width:1.5rem;height:1.5rem;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--line);color:var(--muted);z-index:1}
.tl-dot svg{width:.8rem;height:.8rem}
.timeline li.done .tl-dot{background:var(--green);color:#fff}
.timeline li.now .tl-dot{background:var(--brand);color:#fff;box-shadow:0 0 0 5px var(--brand-soft)}
.tl-body strong{display:block;font-size:.9rem}
.tl-body span{font-size:.79rem;color:var(--muted)}
/* ============ Panels (seller/admin) ============ */
.panel-shell{display:grid;grid-template-columns:minmax(0,1fr);gap:1.1rem;margin-top:1rem;align-items:start}
@media(min-width:900px){.panel-shell{grid-template-columns:14.5rem minmax(0,1fr)}}
.side-nav{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:.6rem;box-shadow:var(--sh-sm);display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:none}
.side-nav::-webkit-scrollbar{display:none}
@media(min-width:900px){.side-nav{flex-direction:column;position:sticky;top:8.5rem;overflow:visible}}
.side-nav a{display:flex;align-items:center;gap:.6rem;padding:.68rem .8rem;border-radius:.8rem;color:var(--ink-2);font-weight:600;font-size:.88rem;white-space:nowrap;min-height:2.75rem}
.side-nav a svg{width:1.15rem;height:1.15rem;flex:none}
.side-nav a:hover{background:var(--surface-sunken);text-decoration:none}
.side-nav a.on{background:var(--brand-soft);color:var(--brand-ink)}
.side-nav .btn{margin-top:.35rem}
.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin-bottom:1.1rem}
@media(min-width:1024px){.stat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1rem;box-shadow:var(--sh-sm);min-width:0}
.stat .s-label{font-size:.7rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.stat .s-value{font-size:1.45rem;font-weight:800;margin-top:.2rem;font-family:var(--fd)}
.stat .s-sub{font-size:.78rem;color:var(--muted)}
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh-sm)}
table{width:100%;border-collapse:collapse;font-size:.87rem;min-width:40rem}
th{text-align:left;padding:.75rem .9rem;background:var(--surface-sunken);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:.75rem .9rem;border-bottom:1px solid var(--line2);vertical-align:middle}
tr:last-child td{border-bottom:none}
.t-prod{display:flex;gap:.6rem;align-items:center;min-width:11rem}
.t-prod img{width:2.75rem;height:2.75rem;border-radius:.55rem;object-fit:cover;background:var(--surface-sunken);flex:none}
.bar-chart{display:flex;align-items:flex-end;gap:.6rem;height:9.4rem;padding-top:.6rem}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:.45rem;height:100%;justify-content:flex-end;min-width:0}
.bar{width:100%;max-width:3.2rem;background:var(--brand);border-radius:.45rem .45rem 0 0;min-height:4px}
.bar.alt{background:var(--dark)}
.bar-col span{font-size:.7rem;color:var(--muted);font-weight:600}
.bar-col b{font-size:.68rem;white-space:nowrap}
@media(min-width:900px){.admin-dash-grid{grid-template-columns:1.2fr 1fr !important}}
/* ============ Footer / bottom nav / misc ============ */
.site-footer{background:var(--dark);color:var(--on-dark);margin-top:1.6rem}
.footer-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.8rem;padding:2.3rem 0 1.4rem}
@media(min-width:640px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.footer-grid{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.site-footer .logo{color:#fff}
.site-footer h4{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin:0 0 .9rem;font-family:var(--fb)}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:.35rem}
.site-footer a.flink{display:block;font-size:.85rem;padding:.3rem 0;color:var(--on-dark);transition:.15s}
.site-footer a.flink:hover{color:#fff;transform:translateX(3px);text-decoration:none}
.payrow{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.pay{font-size:.64rem;font-weight:800;letter-spacing:.05em;border:1px solid var(--dark-2);border-radius:.5rem;padding:.4rem .65rem;color:var(--line)}
.footer-bottom{border-top:1px solid var(--dark-2);padding:1.1rem 0 calc(1.1rem + env(safe-area-inset-bottom));font-size:.76rem;color:var(--on-dark);display:flex;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
@media(min-width:900px){.footer-bottom{padding-bottom:1.1rem}}
.mnav{display:none}
@media(max-width:899px){
  .mnav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:70;background:var(--surface);border-top:1px solid var(--line);padding:.4rem .5rem calc(.4rem + env(safe-area-inset-bottom));justify-content:space-between}
  .mnav a{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:.16rem;font-size:.64rem;font-weight:700;color:var(--muted);padding:.35rem .2rem;min-height:3.1rem;justify-content:center;border-radius:.8rem;transition:.15s}
  .mnav a:hover{text-decoration:none}
  .mnav a.on{color:var(--brand)}
  .mnav svg{width:1.3rem;height:1.3rem}
  .mnav .nbadge{top:-2px;right:calc(50% - 1.4rem)}
}
.wa-float{position:fixed;right:1rem;bottom:calc(5.5rem + env(safe-area-inset-bottom));z-index:65;width:3.2rem;height:3.2rem;border-radius:50%;background:var(--wa-bright);color:#fff;display:grid;place-items:center;box-shadow:var(--sh-lg);border:2px solid var(--surface);transition:transform .25s var(--ease);isolation:isolate}
.wa-float svg{width:1.6rem;height:1.6rem}
.wa-float:hover{transform:scale(1.08)}
.wa-float::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--wa-bright);z-index:-1;animation:wapulse 2.2s ease-out infinite}
@keyframes wapulse{0%{transform:scale(1);opacity:.5}80%,100%{transform:scale(1.55);opacity:0}}
@media(min-width:900px){.wa-float{bottom:1.5rem;right:1.5rem}}
#toast-root{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(6.2rem + env(safe-area-inset-bottom));z-index:200;display:flex;flex-direction:column;gap:.5rem;align-items:center;width:min(92vw,26rem);pointer-events:none}
@media(min-width:900px){#toast-root{bottom:1.5rem}}
.toast{background:var(--dark);color:#fff;padding:.8rem 1.3rem;border-radius:999px;font-size:.85rem;font-weight:600;box-shadow:var(--sh-lg);opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease;text-align:center;max-width:100%}
.toast.show{opacity:1;transform:none}
.toast-err{background:var(--red);color:#fff}
.toast-ok{background:var(--green);color:#fff}
.success-hero{text-align:center;padding:2.2rem 1rem .5rem}
.success-badge{width:5.2rem;height:5.2rem;border-radius:50%;background:var(--ok-bg);color:var(--green);display:grid;place-items:center;margin:0 auto 1rem}
.success-badge svg{width:2.6rem;height:2.6rem}
.order-no{font-size:1.9rem;font-weight:800;letter-spacing:.02em;font-family:var(--fd);color:var(--brand)}
.prose{max-width:47rem}
.prose h2{font-size:1.12rem;margin:1.4rem 0 .5rem}
.prose p,.prose li{color:var(--ink-2);font-size:.94rem;line-height:1.65}
.faq-item{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);margin-bottom:.6rem;overflow:hidden;box-shadow:var(--sh-sm)}
.faq-item summary{padding:.95rem 1.05rem;font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:.6rem;min-height:3rem;font-size:.93rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary svg{flex:none;color:var(--faint)}
.faq-item .faq-body{padding:0 1.05rem 1rem;color:var(--ink-2);font-size:.9rem;line-height:1.6}
.demo-box{background:var(--brand-soft);border:1.5px dashed var(--brand);border-radius:var(--r);padding:1rem;margin-top:1.1rem}
.demo-box h4{margin:0 0 .25rem;font-size:.9rem;font-family:var(--fb);letter-spacing:0}
.demo-box p{margin:0 0 .75rem;font-size:.82rem;color:var(--muted)}
.switch{position:relative;width:3rem;height:1.7rem;flex:none;display:inline-block}
.switch input{opacity:0;width:100%;height:100%;position:absolute;cursor:pointer;margin:0;z-index:1}
.switch .track{position:absolute;inset:0;background:var(--line-strong);border-radius:999px;transition:background .15s}
.switch .track::after{content:"";position:absolute;top:3px;left:3px;width:1.3rem;height:1.3rem;border-radius:50%;background:#fff;transition:left .15s;box-shadow:var(--sh-sm)}
.switch input:checked + .track{background:var(--brand)}
.switch input:checked + .track::after{left:1.55rem}
.addr-card{border:1.5px solid var(--line);border-radius:var(--r);padding:.9rem 1rem;margin-bottom:.6rem;cursor:pointer;display:flex;gap:.75rem;align-items:flex-start;background:var(--surface);transition:.15s}
.addr-card.sel{border-color:var(--brand);background:var(--brand-soft)}
.addr-card input{width:1.25rem;height:1.25rem;accent-color:var(--brand);margin-top:.15rem;flex:none}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
  html{scroll-behavior:auto}
  .wa-float::after{display:none}
}
/* ============ QA sweep fixes ============ */
.field{min-width:0}
.catcard .ct .cnt{display:block}
.timeline li.cancelled .tl-dot{background:var(--red);color:#fff}
.buybar-spacer{display:none}
@media(max-width:899px){
  /* header: pin logo left, actions right (grid auto-placement was stranding them mid-row) */
  .hd .logo{grid-column:1;grid-row:1}
  .hd .hact{grid-column:3;grid-row:1;justify-self:end}
  /* 16px inputs stop iOS focus auto-zoom */
  .input,select.input,textarea.input,.search input,.sortwrap select{font-size:16px}
  /* footer must clear the fixed bottom nav */
  .footer-bottom{padding-bottom:calc(5.3rem + env(safe-area-inset-bottom))}
  /* product page: scroll room + float/toast sit above the buy bar */
  .buybar-spacer{display:block;height:4.4rem}
  body.has-buybar .wa-float{bottom:calc(9.7rem + env(safe-area-inset-bottom))}
  body.has-buybar #toast-root{bottom:calc(8.9rem + env(safe-area-inset-bottom))}
}
@media(min-width:641px) and (max-width:899px){
  /* tablet: hero slides are absolutely positioned, so the hero needs a real height */
  .hero{min-height:17.5rem}
  .harrow{top:50%}
}
/* ============ QA sweep round 2 — found by screenshot inspection at 390px + 1440px ============ */
/* Unsized inline SVGs ballooned inside buttons (giant cart glyph on the product
   page, giant WhatsApp glyph on order-success / contact): pin every button icon. */
.btn svg{width:1.05em;height:1.05em;flex:none}
.harrow svg{width:1.25rem;height:1.25rem}
.faq-item summary svg{width:1.05rem;height:1.05rem}
.wa-badge svg{width:2.1rem;height:2.1rem}
/* Money values in summary rows must never wrap mid-figure ("Rs / 8,499"). */
.sum-row>span:last-child{white-space:nowrap;flex:none}
.t-price{white-space:nowrap}
/* Flash-deal sold bars pin to the card bottom so they align across the row. */
.fcard .soldwrap{margin-top:auto;padding-top:.55rem}
/* Order-card action buttons share row width evenly instead of ragged heights. */
.order-card .btn{flex:1 1 9rem}
/* Scrollable strips get a fade edge so off-screen items read as scrollable,
   not clipped; the page body itself never scrolls sideways. */
.catnav-in,.mchips{overscroll-behavior-x:contain}
@media(max-width:1100px){
  .catnav-in{-webkit-mask-image:linear-gradient(90deg,#000 93%,transparent);mask-image:linear-gradient(90deg,#000 93%,transparent)}
}
@media(max-width:899px){
  .mchips{-webkit-mask-image:linear-gradient(90deg,#000 93%,transparent);mask-image:linear-gradient(90deg,#000 93%,transparent);padding-right:4.4rem}
  /* Panel side-nav: wrap into visible rows — links and Log out were stranded
     off-canvas inside a hidden horizontal scroller (unreachable on phones). */
  .side-nav{flex-wrap:wrap;overflow:visible}
  .side-nav a{flex:1 1 42%}
  .side-nav .btn{flex:1 1 100%;margin-top:.4rem}
  /* Shop toolbar: sort control takes its own full-width row instead of
     squeezing the result count and leaving a ragged half-empty row. */
  .toolbar .results{flex:1}
  .sortwrap{flex:1 1 100%;margin-left:0}
  .sortwrap select{flex:1;max-width:none}
}
/* Buy bar buttons never wrap their labels; drop the struck price on tiny screens. */
.buybar .btn{white-space:nowrap}
@media(max-width:380px){.buybar .bb-price s{display:none}}
/* Panel tables become stacked cards on phones — no sideways table scroll,
   no cut-off Price / Stock / Actions columns. */
@media(max-width:700px){
  .table-scroll{overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none}
  .table-scroll table{min-width:0}
  .table-scroll thead{display:none}
  .table-scroll tbody tr{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);margin-bottom:.7rem;padding:.35rem 0}
  .table-scroll tbody td{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem .9rem;border-bottom:1px solid var(--line2);text-align:right}
  .table-scroll tbody tr td:last-child{border-bottom:0}
  .table-scroll tbody td::before{content:attr(data-label);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:left;flex:none}
  .table-scroll tbody td.td-main{justify-content:flex-start;text-align:left}
  .table-scroll tbody td.td-main::before{display:none}
  .t-prod{min-width:0}
}
/* ============ QA polish + hardening round 3 (2026-10-18) ============ */
/* Out-of-stock card button reads as disabled — never invites a dead click. */
.qadd[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
/* Subtle press feedback on image cards. */
.fcard:active,.catcard:active{transform:translateY(-1px)}
/* Designed empty states: soft icon medallion above the copy. */
.empty-state .es-ic{width:4.2rem;height:4.2rem;margin:0 auto 1rem;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center}
.empty-state .es-ic svg{width:2rem;height:2rem}
/* Inline form errors: red ring on the field + message under it. */
.field .input.err-input{border-color:var(--bad);box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 14%,transparent)}
.field-err{font-size:.78rem;color:var(--bad);font-weight:600;margin:.3rem 0 0}
/* Skeleton block sized like a panel stat card while data loads. */
.sk-stat{height:6.6rem}
/* Extra-long words can never push a card, cart line or summary row wide. */
.pname,.fcard .fn,.cart-line h4,.t-prod>span,.sum-row>span:first-child,h1,h2,h3,.page-title,.tb-msg,.toast,.seller-card strong,.catcard .ct b,.addr-card{overflow-wrap:anywhere}
/* ============ QA adversarial round 4 (2026-10-18) ============ */
/* A very long first name must truncate inside the header account chip instead
   of squeezing the search bar / pushing the header actions off-grid. */
.account-chip span:last-child{max-width:8.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Long unbroken strings typed into address / note / settings fields surface in
   panel paragraphs — they wrap instead of stretching the panel. */
.panel p,.success-hero p,.order-card p{overflow-wrap:anywhere}
/* ============ UX round 5 — filters redesign + discovery layout (2026-10-19) ============ */
/* Round 7: with the sidebar gone the catalog grid is full width, so it uses
   the base .grid steps (2 / 3 / 4 columns) with one extra step on very wide
   screens to keep cards from stretching. */
@media(min-width:1500px){.catalog-main .grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
/* ============ UX round 6 — context-aware filters (2026-10-19) ============ */
/* Locked category context: on a category view the category is the page's
   context, not a filter to re-pick — the Category checkbox group is simply
   not offered (see catalogShell). */
/* ============ Polish round 8 — de-duplication + header cleanup (2026-10-19) ============ */
/* The locked category gets exactly ONE indicator site-wide: a standard
   active-filter pill in the pills row (same .fpill styling as every other
   active filter, removable back to All Products). The old second indicator —
   a pink "BROWSING …" chip inside the toolbar — is gone, and so are its
   styles: .f-context / .fpill.ctx no longer exist. */
/* Admin Users: roles are not order statuses — neutral chip, not borrowed
   status colours. */
.chip-role{background:var(--surface-sunken);color:var(--ink-2);text-transform:capitalize}