/* =====================================================================
   shop.livesoko.com — consumer storefront
   Mobile-first. Written for cheap Android phones on patchy connections:
   no webfont blocking, no layout that needs JS, generous tap targets.
   ===================================================================== */

:root{
  --ink:#0B0B0C; --ink-2:#3F4348; --ink-3:#7A8089;
  --brand:#FF5F35; --brand-2:#E8481F; --brand-050:#FFF1EC;
  --teal:#159A8C; --teal-bg:#E8F6F4;
  --ok:#12805C; --ok-bg:#E6F5EF;
  --warn:#B26A00; --warn-bg:#FDF3E3;
  --danger:#C42B1C; --danger-bg:#FDECEA;
  --live:#E0245E; --live-bg:#FDE9EF;
  --page:#FFFFFF; --panel:#FFFFFF; --panel-2:#F7F8F9; --muted:#F1F2F4;
  --line:#E3E5E9; --line-2:#EFF0F3;
  --r:14px; --r-sm:10px; --r-xs:7px; --r-pill:999px;
  --sh-sm:0 1px 2px rgba(11,11,12,.06);
  --sh:0 4px 14px rgba(11,11,12,.08);
  --sh-lg:0 14px 40px rgba(11,11,12,.14);
  --ff:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ff-d:'Outfit','Inter',system-ui,sans-serif;
  --wrap:none;   /* full width; the side gutter scales with the screen */
  --gutter:clamp(16px, 3.2vw, 56px);
}
[data-theme=dark]{
  --ink:#F2F3F5; --ink-2:#B9BEC6; --ink-3:#868D97;
  --page:#0E1013; --panel:#16191D; --panel-2:#1C2025; --muted:#22262C;
  --line:#2A2F36; --line-2:#23282E; --brand-050:#2A1811;
  --ok-bg:#12241C; --warn-bg:#2A2115; --danger-bg:#2A1614; --live-bg:#2A141C; --teal-bg:#0F2523;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--ff); font-size:15px; line-height:1.55; color:var(--ink);
  background:var(--page); -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--ff-d); line-height:1.2; letter-spacing:-.02em; font-weight:600}
h1{font-size:1.7rem} h2{font-size:1.25rem} h3{font-size:1rem}
a{color:inherit; text-decoration:none}
img,svg{display:block; max-width:100%}
button,input,select,textarea{font:inherit; color:inherit}
button{background:none; border:0; cursor:pointer}
/* Every sprite icon gets a sane size by default. A component rule sizes it
   more specifically; without one it used to render as wide as its box. */
svg[viewBox="0 0 24 24"]{width:18px; height:18px; flex:none}
s{color:var(--ink-3); text-decoration-thickness:1px}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter)}
.wrap.narrow{max-width:calc(820px + 2 * var(--gutter))}
.skip{position:absolute; left:-999px; top:0; background:var(--ink); color:#fff; padding:10px 14px; z-index:999}
.skip:focus{left:8px; top:8px}
.tiny{font-size:.78rem} .dim{color:var(--ink-3)} .center{text-align:center}
.link{color:var(--brand); font-weight:600}
.link:hover{text-decoration:underline}
.dot-sep{color:var(--ink-3); margin:0 6px}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:4px}

/* ------------------------------------------------------------ buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:38px; padding:0 16px; border-radius:var(--r-pill); font-size:.88rem; font-weight:600;
  border:1px solid transparent; cursor:pointer; transition:.15s; white-space:nowrap;
}
.btn svg{width:16px; height:16px; flex:none}
.btn-tall{height:46px; padding:0 22px; font-size:.94rem}
.btn-block{width:100%}
.btn-primary{background:var(--brand); color:#fff}
.btn-primary:hover{background:var(--brand-2)}
.btn-dark{background:var(--ink); color:var(--page)}
.btn-default{background:var(--panel); border-color:var(--line); color:var(--ink)}
.btn-default:hover{border-color:var(--ink-3)}
.btn-ghost{color:var(--ink-2)}
.btn-ghost:hover{background:var(--muted)}
.btn-replay{background:var(--panel); color:var(--live); border-color:rgba(224,36,94,.35);
  box-shadow:var(--sh-sm)}
.btn-replay:hover{background:var(--live-bg); border-color:var(--live)}
.btn-n{min-width:20px; height:20px; padding:0 6px; margin-right:-6px; border-radius:var(--r-pill);
  background:var(--live); color:#fff; font-size:.72rem; font-weight:700; display:grid; place-items:center}
.btn-add{height:34px; padding:0 12px; font-size:.82rem; background:var(--ink); color:var(--page)}
.btn-add:hover{background:var(--brand)}
.icon-btn{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:var(--ink-2);
}
.icon-btn:hover{background:var(--muted)}
.icon-btn svg{width:19px; height:19px}
.lnk-btn{display:inline-flex; align-items:center; gap:5px; font-size:.8rem; color:var(--ink-3); font-weight:500}
.lnk-btn:hover{color:var(--brand)}
.lnk-btn svg{width:14px; height:14px}

/* ------------------------------------------------------------ header */
.promo-strip{background:var(--ink); color:#fff; font-size:.78rem}
.promo-strip .wrap{display:flex; align-items:center; justify-content:center; gap:7px; height:34px}
.promo-strip svg{width:14px; height:14px; color:var(--brand)}
.promo-strip a{text-decoration:underline; opacity:.85}

.site-head{position:sticky; top:0; z-index:60; background:var(--panel); border-bottom:1px solid var(--line)}
.head-main{display:flex; align-items:center; gap:14px; height:68px}
.logo{color:var(--ink); flex:none}
.logo img{display:block; height:30px; width:auto}
/* ls_logo() carries both versions: ink "Live" on light pages, white on dark. */
.logo .logo-d{display:none}
[data-theme=dark] .logo .logo-l{display:none}
[data-theme=dark] .logo .logo-d{display:block}

.searchbar{
  flex:1; display:flex; align-items:center; height:44px; background:var(--panel);
  border:2px solid var(--ink); border-radius:var(--r-pill); overflow:hidden; position:relative; min-width:0;
}
.sb-cat{
  display:flex; align-items:center; gap:5px; height:100%; padding:0 12px 0 16px;
  font-size:.84rem; font-weight:600; color:var(--ink-2); border-right:1px solid var(--line); flex:none;
}
.sb-cat svg{width:13px; height:13px}
.searchbar input{flex:1; border:0; outline:none; background:none; padding:0 14px; min-width:0}
.sb-go{width:52px; height:100%; background:var(--brand); color:#fff; display:grid; place-items:center; flex:none}
.sb-go svg{width:19px; height:19px}
.suggest{
  position:absolute; top:calc(100% + 8px); left:0; right:0; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-lg); padding:8px; z-index:70;
}
.sg-h{font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3);
  font-weight:700; padding:8px 10px 4px}
.sg{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--r-sm); font-size:.88rem}
.sg:hover,.sg.on{background:var(--muted)}
.sg svg{width:15px; height:15px; color:var(--ink-3)}
.sg img{width:34px; height:34px; border-radius:var(--r-xs); object-fit:cover}
.sg b{font-weight:500}
.sg .sg-cat{margin-left:auto; font-size:.75rem; color:var(--ink-3)}

.head-act{display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:var(--r-sm); position:relative}
.head-act:hover{background:var(--muted)}
.head-act > svg{width:21px; height:21px}
.ha-t{display:flex; flex-direction:column; line-height:1.25}
.ha-t b{font-size:.82rem; font-weight:600}
.ha-t{font-size:.74rem; color:var(--ink-3)}
/* Signed out, the account slot is an action, not a label: outlined so it reads as one. */
.head-signin{border:1px solid var(--line); padding:5px 12px 5px 9px; border-radius:var(--r-pill)}
.head-signin:hover{border-color:var(--ink-3); background:var(--panel)}
.head-signin > svg{color:var(--brand)}
.cart-act .badge,.saved-act .badge{
  position:absolute; top:2px; left:22px; min-width:17px; height:17px; padding:0 4px;
  background:var(--brand); color:#fff; border-radius:var(--r-pill); font-size:.66rem;
  font-weight:700; display:grid; place-items:center;
}

.head-nav{border-top:1px solid var(--line-2); background:var(--panel)}
.head-nav .wrap{display:flex; align-items:center; gap:4px; height:46px; overflow-x:auto; scrollbar-width:none}
.head-nav .wrap::-webkit-scrollbar{display:none}
.hn{
  display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 12px;
  border-radius:var(--r-pill); font-size:.86rem; font-weight:500; color:var(--ink-2); white-space:nowrap;
}
.hn:hover{background:var(--muted)}
.hn.on{background:var(--brand-050); color:var(--brand); font-weight:600}
.hn svg{width:16px; height:16px}
/* The department browser: an outlined pill at the far end, so it reads as a
   control without out-shouting the links. Desktop only — see mega-menu.php. */
.hn-cats{border:1px solid var(--line); color:var(--ink); font-weight:600; display:none}
.hn-cats:hover,.hn-cats[aria-expanded=true]{border-color:var(--ink-3); background:var(--muted)}
.hn-cats .hn-caret{width:14px; height:14px; margin-left:-2px; transition:transform .15s}
.hn-cats[aria-expanded=true] .hn-caret{transform:rotate(180deg)}
.hn-right{margin-left:auto; color:var(--ok)}
@media (min-width:900px){ .hn-cats{display:inline-flex} }
/* Below 1280px there is not room for every link plus both right-hand items
   without the row scrolling, and the trust badge is repeated in the hero
   and footer — the category button is the one to keep. Narrower still, the
   link icons go (Live keeps its, as the one to spot) and the pills tighten. */
@media (min-width:900px) and (max-width:1279px){
  .hn-right{display:none}
  .hn-cats{margin-left:auto}
}
@media (min-width:900px) and (max-width:1099px){
  .head-nav .hn{padding:0 10px}
  .head-nav a.hn:not(.hn-live) svg{display:none}
}
/* Live now: the one link in the live colour, so the eye finds it without it
   shouting. The dot only appears while someone is actually on air. */
.hn-live{color:var(--live); font-weight:600}
.hn-live:hover{background:var(--live-bg)}
.hn-live.on{background:var(--live-bg); color:var(--live)}
.hn-dot{width:7px; height:7px; border-radius:50%; background:var(--live); margin-left:1px;
  animation:liveDot 1.8s ease-out infinite}
@keyframes liveDot{
  0%{box-shadow:0 0 0 0 rgba(224,36,94,.55)}
  70%,100%{box-shadow:0 0 0 6px rgba(224,36,94,0)}
}

/* mega menu */
/* A dropdown under its button at the right-hand end of the nav: departments
   down the left, the hovered one's sections beside them. Sized to its
   content rather than the page, so a department with four sections is not
   four small lists adrift in a screen-wide panel.
   It never runs past the bottom of the window: shop.js sets max-height to
   the room left below the header (the promo strip above it scrolls away, so
   that changes), and each column scrolls on its own inside it. */
.mega{
  display:none; position:absolute; z-index:65; background:var(--panel); overflow:hidden;
  border:1px solid var(--line); border-top:0; border-radius:0 0 var(--r) var(--r); box-shadow:var(--sh-lg);
  max-height:calc(100vh - 170px);
}
@media (min-width:900px){
  .mega{right:var(--gutter); width:min(880px, calc(100vw - 2 * var(--gutter)));
        grid-template-columns:240px 1fr}
  .mega.on{display:grid}
}
.mm-tabs,.mm-panels{max-height:inherit; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin}
.mm-tabs{display:flex; flex-direction:column; border-right:1px solid var(--line); padding:10px 0 0;
  background:var(--panel-2)}
.mm-panels{padding:20px 24px; min-width:0}
/* Pinned to the foot of the department list, so it stays in reach however
   far down the list has scrolled. */
.mm-every{
  display:flex; align-items:center; gap:10px; margin:auto 0 0; padding:12px 18px;
  position:sticky; bottom:0; background:var(--panel-2);
  border-top:1px solid var(--line); font-size:.86rem; font-weight:600; color:var(--brand);
}
.mm-every svg{width:16px; height:16px}
.mm-every svg:last-child{margin-left:auto; width:13px; height:13px; transition:transform .15s}
.mm-every:hover span{text-decoration:underline}
.mm-every:hover svg:last-child{transform:translateX(3px)}
.mm-tab{
  display:flex; align-items:center; gap:10px; width:100%; padding:11px 18px;
  font-size:.88rem; font-weight:500; color:var(--ink-2); text-align:left;
}
.mm-tab svg{width:17px; height:17px; color:var(--ink-3)}
.mm-tab .mm-arr{margin-left:auto; width:13px; height:13px; opacity:0}
.mm-tab:hover,.mm-tab.on{background:var(--panel); color:var(--brand); font-weight:600}
.mm-tab.on svg{color:var(--brand)}
.mm-tab.on .mm-arr{opacity:1}
.mm-panel{display:none}
.mm-panel.on{display:block}
.mm-cols{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:18px 22px}
.mm-col a{display:block; padding:4px 0; font-size:.86rem; color:var(--ink-2)}
.mm-col a:hover{color:var(--brand)}
.mm-h{font-weight:700 !important; color:var(--ink) !important; margin-bottom:5px; font-size:.9rem !important}
.mm-all{display:inline-flex; align-items:center; gap:6px; margin-top:18px; color:var(--brand);
  font-weight:600; font-size:.86rem}
.mm-all svg{width:15px; height:15px}

/* ------------------------------------------------------------ hero */
.hero{background:linear-gradient(160deg,var(--panel-2),var(--brand-050)); padding:36px 0 40px}
.hero-in{display:grid; gap:28px; align-items:center}
@media (min-width:900px){ .hero-in{grid-template-columns:1fr 1fr; gap:44px} }
.eyebrow{
  display:inline-flex; align-items:center; gap:7px; font-size:.78rem; font-weight:700;
  color:var(--live); background:var(--live-bg); padding:5px 12px; border-radius:var(--r-pill);
}
.eyebrow svg{width:14px; height:14px}
.hero h1{font-size:clamp(1.9rem,5vw,3rem); margin:14px 0 12px}
.hero-copy p{color:var(--ink-2); font-size:1.02rem; max-width:46ch}
.hero-cta{display:flex; gap:10px; flex-wrap:wrap; margin:22px 0 16px}
.hero-trust{display:flex; gap:14px; flex-wrap:wrap; font-size:.8rem; color:var(--ink-2); align-items:center}
.hero-trust svg{width:15px; height:15px; color:var(--ok); vertical-align:-3px}
.hero-lv{position:relative; display:block; border-radius:var(--r); overflow:hidden; box-shadow:var(--sh-lg)}
.hero-lv img{width:100%; height:auto; object-fit:cover; aspect-ratio:16/10}
.hlv-tag{
  position:absolute; top:12px; left:12px; display:inline-flex; align-items:center; gap:6px;
  background:var(--live); color:#fff; font-size:.75rem; font-weight:700; padding:5px 11px;
  border-radius:var(--r-pill);
}
.hlv-tag svg{width:13px; height:13px}
.hlv-body{
  position:absolute; left:0; right:0; bottom:0; padding:34px 16px 14px; color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.82));
}
.hlv-body b{display:block; font-size:1rem}
.hlv-body span{font-size:.8rem; opacity:.85}

/* ------------------------------------------------------------ sections */
.sec{margin:38px 0}
.sec-head{display:flex; align-items:flex-end; gap:14px; margin-bottom:16px; flex-wrap:wrap}
.sec-head h2{font-size:1.3rem}
.sec-head p{font-size:.86rem; color:var(--ink-3); flex-basis:100%; order:3}
.sec-sub{font-size:.86rem; color:var(--ink-3); margin-bottom:12px}
.sec-all{margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  color:var(--brand); font-weight:600; font-size:.86rem}
.sec-all svg{width:15px; height:15px}
.page-head{display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin:24px 0 18px}
.page-head p{color:var(--ink-3); font-size:.9rem; margin-top:4px}
.page-head > :last-child{margin-left:auto}
.page-head > :only-child{margin-left:0}

.crumbs{border-bottom:1px solid var(--line-2); background:var(--panel)}
.crumbs .wrap{display:flex; align-items:center; gap:6px; height:42px; font-size:.8rem;
  color:var(--ink-3); overflow-x:auto; scrollbar-width:none; white-space:nowrap}
.crumbs .wrap::-webkit-scrollbar{display:none}
.crumbs a:hover{color:var(--brand)}
.crumbs svg{width:13px; height:13px; opacity:.6; flex:none}
.crumbs span{color:var(--ink); font-weight:500}

/* ------------------------------------------------------------ cards */
.pgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:12px}
@media (min-width:700px){ .pgrid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px} }

.pcard{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column; transition:.15s; position:relative;
}
.pcard:hover{box-shadow:var(--sh); border-color:var(--ink-3); transform:translateY(-2px)}
/* Contained, not cropped: a product photo shows the whole product, whatever
   shape the seller shot it in. */
.pc-img{display:block; position:relative; aspect-ratio:1; background:#fff; border-bottom:1px solid var(--line-2)}
.pc-img img{width:100%; height:100%; object-fit:contain}
/* A photo's placeholder (media_img): its own colours, contained exactly as
   the photo will be, until shop.js clears it on load. The <picture> that
   offers an AVIF copy must not become a box of its own. */
img[data-ph]{background-size:contain; background-position:center; background-repeat:no-repeat}
.ph-pic{display:contents}
.pc-badges{position:absolute; top:8px; left:8px; display:flex; flex-direction:column; gap:4px; align-items:flex-start}
.pb{
  display:inline-flex; align-items:center; gap:4px; font-size:.68rem; font-weight:700;
  padding:3px 8px; border-radius:var(--r-pill); background:var(--panel); color:var(--ink);
  box-shadow:var(--sh-sm);
}
.pb svg{width:11px; height:11px}
.pb-clip{background:var(--ink); color:#fff}
.pb-live{background:var(--live); color:#fff}
.pb-warn{background:var(--warn-bg); color:var(--warn)}
.pb-deal{background:var(--brand); color:#fff}
.pb-best{background:var(--teal-bg); color:var(--teal)}
.pc-off{
  position:absolute; right:8px; bottom:8px; background:var(--brand); color:#fff;
  font-size:.74rem; font-weight:700; padding:3px 8px; border-radius:var(--r-pill);
}
/* The heart: a solid disc that reads on any photo, filled brand-orange once saved. */
.pc-save{
  position:absolute; top:8px; right:8px; z-index:2; width:36px; height:36px; border-radius:50%;
  background:var(--panel); border:1px solid var(--line); display:grid; place-items:center; color:var(--ink);
  box-shadow:0 2px 8px rgba(11,11,12,.16); transition:transform .15s, background .15s, color .15s, border-color .15s;
}
.pc-save:hover{color:var(--brand); border-color:var(--brand); transform:scale(1.08)}
.pc-save:active{transform:scale(.92)}
.pc-save svg{width:18px; height:18px; stroke-width:2}
.pc-save.on{background:var(--brand); border-color:var(--brand); color:#fff}
.pc-save.on svg{fill:currentColor}
.pc-save.on:hover{color:#fff; background:var(--brand-2)}
.pc-save.pop{animation:savePop .32s ease}
@keyframes savePop{40%{transform:scale(1.25)}100%{transform:scale(1)}}
/* The product page's "Save for later": tinted, and solid once saved. */
.btn-save{background:var(--brand-050); border-color:transparent; color:var(--brand-2)}
.btn-save:hover{background:var(--brand); color:#fff}
.btn-save svg{stroke-width:2}
.btn-save.on{background:var(--brand); color:#fff}
.btn-save.on svg{fill:currentColor}
[data-theme=dark] .btn-save:not(.on){background:rgba(255,95,53,.14); color:#ff8a66}

/* Hover slideshow (shop.js): the card's photos, stacked over the cover and
   faded through in turn while the pointer rests on it. */
.pc-slides{position:absolute; inset:0; z-index:1; background:#fff; opacity:0; transition:opacity .2s}
.pc-slides.in{opacity:1}
.pc-slides img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity .35s}
.pc-slides img.on{opacity:1}
.pc-dots{position:absolute; left:50%; bottom:8px; transform:translateX(-50%); display:flex; gap:4px; padding:5px 7px;
  border-radius:var(--r-pill); background:rgba(11,11,12,.45); pointer-events:none}
.pc-dots i{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.65); transition:width .2s, background .2s}
.pc-dots i.on{width:16px; border-radius:3px; background:#fff}
.pc-badges,.pc-off{z-index:2}
@media (prefers-reduced-motion:reduce){ .pc-slides,.pc-slides img{transition:none} }
.pc-body{padding:11px; display:flex; flex-direction:column; gap:5px; flex:1}
.why{display:inline-flex; align-items:center; gap:5px; font-size:.7rem; color:var(--teal); font-weight:600}
.why svg{width:12px; height:12px}
.pc-name{
  font-size:.86rem; font-weight:500; line-height:1.35; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.pc-name:hover{color:var(--brand)}
.pc-rate{display:flex; align-items:center; gap:5px; font-size:.74rem; color:var(--ink-3)}
.pc-price{display:flex; align-items:baseline; gap:7px; flex-wrap:wrap}
.pc-price b{font-size:1.02rem; font-family:var(--ff-d)}
.pc-price s{font-size:.78rem}
.pc-seller{font-size:.74rem; color:var(--ink-3)}
.pc-seller:hover{color:var(--brand); text-decoration:underline}
.pc-foot{display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:8px}
.stock-left{font-size:.72rem; color:var(--warn); font-weight:600}
.pc-foot .btn-add{margin-left:auto}

.stars{display:inline-flex; gap:1px; color:var(--brand); font-size:.8rem; line-height:1}
.stars.md{font-size:1rem}
.stars i{font-style:normal}
.stars i:not(.on),.stars .off{color:var(--line)}

/* rails */
.rail{margin:34px 0}
.rail-head{display:flex; align-items:flex-end; gap:14px; margin-bottom:14px; flex-wrap:wrap}
.rail-head h2{font-size:1.25rem}
.rail-head p{font-size:.84rem; color:var(--ink-3); flex-basis:100%; order:3}
.rail-nav{margin-left:auto; display:flex; align-items:center; gap:6px}
.rail-all{color:var(--brand); font-weight:600; font-size:.86rem; margin-left:6px}
.rail-track{
  /* Fixed column widths, never 1fr: a shelf with one or two products shows
     one or two cards at their normal size instead of stretching to the page. */
  display:grid; grid-auto-flow:column; justify-content:start;
  grid-auto-columns:max(150px, calc((100% - 2 * 12px) / 2.4));
  gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding:2px 0 8px;
  scrollbar-width:none; overscroll-behavior-x:contain;
}
.rail-track::-webkit-scrollbar{display:none}
@media (min-width:600px){ .rail-track{grid-auto-columns:max(170px, calc((100% - 3 * 14px) / 3.5)); gap:14px} }
@media (min-width:900px){ .rail-track{grid-auto-columns:max(190px, calc((100% - 4 * 16px) / 5)); gap:16px} }
@media (min-width:1200px){ .rail-track{grid-auto-columns:calc((100% - 5 * 16px) / 6)} }
.rail-track > *{scroll-snap-align:start}

/* ------------------------------------------------------------ categories */
.cat-strip{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px}
.cat-tile{
  display:flex; flex-direction:column; align-items:center; gap:7px; padding:16px 10px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--panel); text-align:center;
  transition:.15s;
}
.cat-tile:hover{border-color:var(--brand); background:var(--brand-050); transform:translateY(-2px)}
.ct-ico{width:44px; height:44px; border-radius:50%; background:var(--brand-050); color:var(--brand);
  display:grid; place-items:center}
.ct-ico svg{width:21px; height:21px}
.cat-tile b{font-size:.82rem; font-weight:600; line-height:1.3}
.ct-n{font-size:.72rem; color:var(--ink-3)}

.cat-jump{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px}
.cat-jump a{display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border:1px solid var(--line);
  border-radius:var(--r-pill); font-size:.85rem; font-weight:500}
.cat-jump a:hover{border-color:var(--brand); color:var(--brand)}
.cat-jump svg{width:15px; height:15px}

.cx{padding:26px 0; border-top:1px solid var(--line-2); scroll-margin-top:120px}
.cx-head{display:flex; align-items:center; gap:14px; margin-bottom:18px; flex-wrap:wrap}
.cx-ico{width:46px; height:46px; border-radius:var(--r-sm); background:var(--brand-050); color:var(--brand);
  display:grid; place-items:center; flex:none}
.cx-ico svg{width:22px; height:22px}
.cx-head span{font-size:.8rem; color:var(--ink-3)}
.cx-head > a{margin-left:auto}
.cx-cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:18px}
.cx-col a{display:block; padding:3px 0; font-size:.85rem; color:var(--ink-2)}
.cx-col a:hover{color:var(--brand)}
.cx-h{font-weight:700 !important; color:var(--ink) !important; margin-bottom:4px}
.cx-pop{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:16px;
  padding-top:14px; border-top:1px dashed var(--line)}
.cx-pop b{font-size:.78rem; color:var(--ink-3)}
.cx-pill{padding:5px 12px; background:var(--muted); border-radius:var(--r-pill); font-size:.79rem; font-weight:500}
.cx-pill:hover{background:var(--brand); color:#fff}

.cat-hero{display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin:22px 0 18px}
.cat-hero p{color:var(--ink-3); font-size:.9rem; margin-top:5px}
.cat-hero-tags{display:flex; gap:8px; flex-wrap:wrap; margin-left:auto}
.cht{font-size:.76rem; padding:5px 11px; background:var(--ok-bg); color:var(--ok);
  border-radius:var(--r-pill); font-weight:600}

.sub-tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:10px; margin-bottom:22px}
.sub-tile{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--panel);
  text-align:center; padding-bottom:10px; transition:.15s}
.sub-tile:hover{border-color:var(--brand); transform:translateY(-2px)}
.sub-tile img{width:100%; aspect-ratio:1; object-fit:cover; background:var(--muted)}
.sub-tile b{display:block; font-size:.82rem; margin:8px 8px 2px}
.sub-tile span{font-size:.72rem; color:var(--ink-3)}

/* ------------------------------------------------------------ browse + facets */
.browse{display:grid; gap:22px; align-items:start}
@media (min-width:900px){ .browse{grid-template-columns:250px 1fr; gap:28px} }
.facets{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:4px 16px 12px;
}
@media (max-width:899px){
  .facets{position:fixed; inset:0 auto 0 0; width:min(88vw,340px); z-index:90; overflow-y:auto;
    transform:translateX(-100%); transition:transform .22s; border-radius:0; border:0; box-shadow:var(--sh-lg)}
  .facets.on{transform:none}
}
.fx-head{display:flex; align-items:center; gap:10px; padding:14px 0 10px; border-bottom:1px solid var(--line)}
.fx-head b{font-size:.95rem}
.fx-head .link{margin-left:auto; font-size:.8rem}
.facet{border-bottom:1px solid var(--line-2); padding:4px 0}
.facet:last-child{border-bottom:0}
.facet summary{display:flex; align-items:center; padding:11px 0; font-size:.88rem; font-weight:600;
  cursor:pointer; list-style:none}
.facet summary::-webkit-details-marker{display:none}
.facet summary svg{width:15px; height:15px; margin-left:auto; transition:transform .18s; color:var(--ink-3)}
.facet[open] summary svg{transform:rotate(180deg)}
.facet-body{padding-bottom:12px; display:grid; gap:2px; max-height:240px; overflow-y:auto}
.fk{display:flex; align-items:center; gap:9px; padding:6px 0; font-size:.84rem; cursor:pointer; color:var(--ink-2)}
.fk:hover{color:var(--ink)}
.fk input{accent-color:var(--brand); width:16px; height:16px}
.fk-n{margin-left:auto; font-size:.74rem; color:var(--ink-3); font-style:normal}
.fk-toggle{display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding:8px 10px;
  background:var(--brand-050); border-radius:var(--r-sm); cursor:pointer; font-size:.84rem; font-weight:600}
.fk-toggle input{accent-color:var(--brand)}
.fk-hint{flex-basis:100%; font-size:.74rem; color:var(--ink-3); font-style:normal; font-weight:400}

.res-bar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px}
.res-count{font-size:.88rem; color:var(--ink-2)}
.applied{display:flex; gap:6px; flex-wrap:wrap}
.apl{display:inline-flex; align-items:center; gap:6px; padding:5px 10px; background:var(--muted);
  border-radius:var(--r-pill); font-size:.78rem; font-weight:500}
.apl svg{width:12px; height:12px; cursor:pointer}
.sortby{margin-left:auto; display:flex; align-items:center; gap:8px; font-size:.83rem; color:var(--ink-3)}
.sortby select{height:36px; padding:0 10px; border-radius:var(--r-sm); border:1px solid var(--line);
  background:var(--panel); font-size:.85rem}
.pager{display:flex; align-items:center; justify-content:center; gap:16px; margin:30px 0; font-size:.88rem}

.search-head{display:flex; align-items:baseline; gap:12px; margin:22px 0 10px; flex-wrap:wrap}
.did-you{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:18px;
  font-size:.84rem; color:var(--ink-3)}
.dy{padding:5px 11px; background:var(--muted); border-radius:var(--r-pill); font-weight:500; color:var(--ink-2)}
.dy:hover{background:var(--brand); color:#fff}
.top-hit{display:flex; align-items:center; gap:10px; padding:11px 14px; background:var(--teal-bg);
  border-radius:var(--r); margin-bottom:16px; font-size:.85rem}
.top-hit svg{width:17px; height:17px; color:var(--teal)}
.top-hit span{color:var(--ink-3); font-size:.8rem}

.seo{margin:40px 0; padding:24px; background:var(--panel-2); border-radius:var(--r)}
.seo h2{font-size:1.05rem; margin-bottom:10px}
.seo p{color:var(--ink-2); font-size:.88rem; margin-bottom:10px; max-width:80ch}

.chips-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px}
.chip{display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border:1px solid var(--line);
  border-radius:var(--r-pill); font-size:.83rem; font-weight:500; background:var(--panel)}
.chip:hover{border-color:var(--ink-3)}
.chip.on{background:var(--ink); color:var(--page); border-color:var(--ink)}
.chip svg{width:12px; height:12px}

/* ------------------------------------------------------------ notes */
.note{display:flex; gap:12px; padding:14px 16px; border-radius:var(--r); margin:16px 0;
  border:1px solid var(--line); background:var(--panel-2)}
.note > svg{width:19px; height:19px; flex:none; margin-top:1px}
.note b{display:block; font-size:.9rem}
.note span{font-size:.84rem; color:var(--ink-2)}
.note a{color:var(--brand); font-weight:600; text-decoration:underline}
.n-info{background:var(--panel-2)} .n-info > svg{color:var(--ink-3)}
.n-brand{background:var(--brand-050); border-color:transparent} .n-brand > svg{color:var(--brand)}
.n-ok{background:var(--ok-bg); border-color:transparent} .n-ok > svg{color:var(--ok)}
.n-warn{background:var(--warn-bg); border-color:transparent} .n-warn > svg{color:var(--warn)}
.n-live{background:var(--live-bg); border-color:transparent} .n-live > svg{color:var(--live)}

/* ------------------------------------------------------------ live */
/* A card is a fifth of the row (never under 210px), however many there are:
   with 1fr a lone stream stretched across the page as a banner. */
.lv-rail{display:grid; grid-auto-flow:column; grid-auto-columns:max(210px, calc((100% - 4 * 14px) / 5)); gap:14px;
  overflow-x:auto; padding-bottom:6px; scroll-snap-type:x mandatory}
.lv-card{scroll-snap-align:start}
.lv-thumb{display:block; position:relative; border-radius:var(--r); overflow:hidden; background:var(--muted)}
.lv-thumb img{width:100%; aspect-ratio:16/10; object-fit:cover}
.lv-tag{position:absolute; top:8px; left:8px; display:inline-flex; align-items:center; gap:5px;
  font-size:.68rem; font-weight:700; padding:4px 9px; border-radius:var(--r-pill); background:var(--panel)}
.lv-tag svg{width:11px; height:11px}
.lv-tag.live{background:var(--live); color:#fff}
.lv-tag.soon{background:var(--warn-bg); color:var(--warn)}
.lv-tag.replay{background:var(--ink); color:#fff}
.lv-dur{position:absolute; right:8px; bottom:8px; background:rgba(0,0,0,.72); color:#fff;
  font-size:.7rem; padding:2px 7px; border-radius:var(--r-xs); font-weight:600}
.lv-card b{display:block; font-size:.87rem; margin-top:9px; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.lv-seller{display:block; font-size:.77rem; color:var(--ink-3); margin-top:2px}
.lv-meta{display:block; font-size:.75rem; color:var(--live); font-weight:600}
.lv-card.soon .lv-meta,.lv-card.replay .lv-meta{color:var(--ink-3); font-weight:400}

.live-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px}
.live-card{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--panel);
  transition:.15s}
.live-card:hover{box-shadow:var(--sh); transform:translateY(-2px)}
.lc-media{position:relative; background:var(--muted)}
.lc-media img{width:100%; aspect-ratio:16/9; object-fit:cover}
.lc-tag{position:absolute; top:10px; left:10px; display:inline-flex; align-items:center; gap:5px;
  background:var(--live); color:#fff; font-size:.7rem; font-weight:700; padding:4px 10px;
  border-radius:var(--r-pill)}
.lc-tag.rp{background:var(--ink)}
.lc-tag svg{width:11px; height:11px}
.lc-watch{position:absolute; top:10px; right:10px; background:rgba(0,0,0,.65); color:#fff;
  font-size:.7rem; padding:3px 9px; border-radius:var(--r-pill); font-weight:600}
.lc-dur{position:absolute; right:10px; bottom:10px; background:rgba(0,0,0,.72); color:#fff;
  font-size:.7rem; padding:2px 7px; border-radius:var(--r-xs); font-weight:600}
.lc-body{padding:13px}
.lc-body > b{font-size:.95rem; line-height:1.35; display:block}
.lc-seller{display:flex; align-items:center; gap:6px; font-size:.8rem; color:var(--ink-3); margin:5px 0 10px}
.lc-seller i{display:inline-flex; align-items:center; gap:3px; color:var(--ok); font-style:normal; font-size:.74rem}
.lc-seller svg{width:12px; height:12px}
.lc-items{display:flex; gap:5px; align-items:center; margin-bottom:10px}
.lc-items img{width:38px; height:38px; border-radius:var(--r-xs); object-fit:cover; background:var(--muted)}
.lc-items span{font-size:.74rem; color:var(--ink-3)}
.lc-cta{display:inline-flex; align-items:center; gap:6px; color:var(--brand); font-weight:600; font-size:.85rem}
.lc-cta svg{width:14px; height:14px}

.sched{display:grid; gap:10px}
.sch-row{display:flex; align-items:center; gap:14px; padding:12px; border:1px solid var(--line);
  border-radius:var(--r); background:var(--panel); flex-wrap:wrap}
.sch-when{display:flex; flex-direction:column; min-width:88px}
.sch-when b{font-size:.87rem} .sch-when span{font-size:.78rem; color:var(--ink-3)}
.sch-row img{width:78px; height:48px; border-radius:var(--r-sm); object-fit:cover; background:var(--muted)}
.sch-body{flex:1; min-width:140px}
.sch-body b{display:block; font-size:.9rem}
.sch-body span{font-size:.78rem; color:var(--ink-3)}

/* Coming up (live.php): a card per stream that has not started. The poster
   with the date pinned to it; when, counting down on the day; the shop; the
   products it will show, with prices; "Notify me" as the one thing to do. */
.up-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap:18px}
.up-card{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r);
  background:var(--panel); overflow:hidden; transition:box-shadow .2s, transform .2s, border-color .2s}
.up-card:hover{box-shadow:var(--sh-lg); transform:translateY(-3px); border-color:transparent}
.up-card.is-next{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-050)}
.up-media{position:relative; display:block; background:var(--muted)}
.up-media .sposter{aspect-ratio:16/9}
.up-media .sp-copy{display:none}
.up-date{position:absolute; left:12px; top:12px; z-index:8; display:flex; flex-direction:column; align-items:center;
  min-width:52px; padding:6px 8px 7px; background:#fff; color:var(--ink); border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.18); line-height:1}
.up-date i{font-style:normal; font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--brand)}
.up-date b{font-family:var(--ff-d); font-size:1.5rem; font-weight:800; margin:2px 0 1px}
.up-date i:last-child{color:var(--ink-3)}
.up-flag,.up-perk{position:absolute; z-index:8; display:inline-flex; align-items:center; gap:5px;
  font-size:.7rem; font-weight:700; padding:5px 10px; border-radius:var(--r-pill)}
.up-flag{right:12px; top:12px; background:var(--live); color:#fff}
.up-perk{left:12px; bottom:12px; background:rgba(11,11,12,.72); color:#fff; backdrop-filter:blur(6px)}
.up-flag svg,.up-perk svg{width:12px; height:12px}
.up-body{display:flex; flex-direction:column; gap:12px; padding:14px 16px 16px; flex:1}
.up-time{display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap}
.up-at{display:inline-flex; align-items:center; gap:6px; font-family:var(--ff-d); font-weight:700; font-size:1rem; color:var(--ink)}
.up-at svg{width:16px; height:16px; color:var(--brand)}
.up-in{font-size:.74rem; font-weight:700; padding:4px 10px; border-radius:var(--r-pill);
  background:var(--brand-050); color:var(--brand-2); font-variant-numeric:tabular-nums; white-space:nowrap}
.up-in.soon{background:var(--live); color:#fff}
.up-title{font-family:var(--ff-d); font-size:1.12rem; line-height:1.3; margin:-4px 0 0}
.up-title a{color:var(--ink)}
.up-title a:hover{color:var(--brand)}
.up-desc{font-size:.84rem; color:var(--ink-2); line-height:1.5; margin:-6px 0 0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.up-shop{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--r-sm);
  background:var(--panel-2); color:var(--ink)}
.up-shop:hover{background:var(--brand-050)}
.up-logo{position:relative; flex:none; width:38px; height:38px; border-radius:50%; overflow:hidden;
  display:grid; place-items:center; background:var(--ink); color:#fff; font-weight:800; font-size:.8rem}
.up-logo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#fff}
.up-shop-t{display:flex; flex-direction:column; min-width:0; line-height:1.3}
.up-shop-t b{display:inline-flex; align-items:center; gap:5px; font-size:.88rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.up-shop-t small{font-size:.74rem; color:var(--ink-3)}
.up-ok{width:14px; height:14px; color:var(--ok); flex:none}
.up-items-h{display:block; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:8px}
.up-items-row{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px}
.up-item{display:flex; flex-direction:column; gap:4px; min-width:0; color:var(--ink)}
.up-item img{width:100%; aspect-ratio:1; object-fit:contain; background:#fff; border:1px solid var(--line-2);
  border-radius:var(--r-sm); padding:4px; transition:border-color .15s}
.up-item:hover img{border-color:var(--brand)}
.up-item b{font-size:.74rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.up-item b.live{color:var(--live)}
.up-item s{font-size:.66rem; color:var(--ink-3); margin-top:-3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.up-more{aspect-ratio:1; align-self:start; width:100%; justify-content:center; align-items:center; gap:0;
  border-radius:var(--r-sm); background:var(--brand-050); color:var(--brand-2)}
.up-more b{font-family:var(--ff-d); font-size:1.05rem}
.up-more span{font-size:.7rem; font-weight:600}
.up-acts{display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:2px}
.up-acts .remind-form{flex:1}
.up-acts .remind-form .btn{width:100%}
.up-proof{display:flex; align-items:center; gap:6px; font-size:.76rem; color:var(--ink-3); margin:-4px 0 0}
.up-proof svg{width:13px; height:13px; color:var(--brand)}
@media (prefers-reduced-motion:reduce){ .up-card,.up-card:hover{transform:none} }

/* watch page */
.watch{display:grid; gap:20px; padding-top:16px}
@media (min-width:1000px){ .watch{grid-template-columns:1fr 340px; align-items:start} }
.player{position:relative; background:#000; border-radius:var(--r); overflow:hidden}
.player > img{width:100%; aspect-ratio:16/9; object-fit:cover; opacity:.9}
.pl-tag{position:absolute; top:12px; left:12px; display:inline-flex; align-items:center; gap:6px;
  background:var(--live); color:#fff; font-size:.76rem; font-weight:700; padding:5px 12px;
  border-radius:var(--r-pill)}
.pl-tag svg{width:13px; height:13px}
.pl-controls{position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; gap:10px;
  padding:14px 14px 12px; background:linear-gradient(transparent,rgba(0,0,0,.75)); color:#fff}
.pl-controls button{color:#fff; display:grid; place-items:center}
.pl-controls svg{width:19px; height:19px}
.pl-bar{flex:1; height:4px; background:rgba(255,255,255,.3); border-radius:2px; overflow:hidden}
.pl-bar i{display:block; height:100%; background:var(--brand)}
.pl-time{font-size:.78rem; font-variant-numeric:tabular-nums}
.pl-q{height:28px; background:rgba(255,255,255,.15); color:#fff; border:0; border-radius:var(--r-xs);
  font-size:.76rem; padding:0 6px}
.pl-q option{color:var(--ink)}
.pinned{position:absolute; left:12px; right:12px; bottom:56px; display:flex; align-items:center; gap:12px;
  padding:10px; background:rgba(255,255,255,.97); border-radius:var(--r); box-shadow:var(--sh-lg)}
.pinned img{width:52px; height:52px; border-radius:var(--r-sm); object-fit:cover; background:var(--muted)}
.pinned > div{flex:1; min-width:0}
.pin-tag{font-size:.66rem; font-weight:700; color:var(--live); text-transform:uppercase; letter-spacing:.06em}
.pinned b{display:block; font-size:.87rem; line-height:1.3}
.pin-price{display:flex; align-items:baseline; gap:7px; font-size:.8rem}
.pin-price b{display:inline; font-size:.95rem}
.pin-price i{color:var(--warn); font-style:normal; font-size:.74rem; font-weight:600}
/* Below the picture on a phone, clear of the controls bar that sits along the
   player's bottom edge. */
@media (max-width:620px){ .pinned{position:static; margin:10px 10px 52px; box-shadow:none; border:1px solid var(--line)} }

/* live player (LiveKit) */
[hidden]{display:none !important}
.player.lk{aspect-ratio:16/9}
.player.lk > .pl-poster{position:absolute; inset:0; height:100%}
.pl-video{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000}
.player.playing .pl-poster{opacity:0}
.player.audio-only.playing .pl-poster{opacity:.35; filter:blur(6px)}
.player.audio-only.playing::after{content:"Audio only — saving data"; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%); color:#fff; font-size:.85rem; font-weight:600;
  background:rgba(0,0,0,.55); padding:8px 14px; border-radius:var(--r-pill)}
.pl-overlay{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:10px; text-align:center; padding:20px; color:#fff;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.35), rgba(0,0,0,.7))}
.pl-overlay .pl-note{font-size:.8rem; opacity:.85; max-width:320px}
.pl-count{font-size:1.5rem; font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.player.buffering::before{content:""; position:absolute; top:50%; left:50%; width:34px; height:34px;
  margin:-17px 0 0 -17px; border:3px solid rgba(255,255,255,.3); border-top-color:#fff;
  border-radius:50%; animation:plspin .8s linear infinite; z-index:3}
@keyframes plspin{to{transform:rotate(360deg)}}
.pl-live-dot{width:8px; height:8px; border-radius:50%; background:var(--live); animation:pldot 1.4s ease-in-out infinite}
@keyframes pldot{50%{opacity:.3}}
.player.lk .pl-controls{justify-content:flex-start}
.player.lk .pl-q{margin-left:auto}
[data-lk-sound].on{color:var(--brand)}

.watch-meta{display:flex; align-items:flex-start; gap:14px; margin:16px 0; flex-wrap:wrap}
.watch-meta h1{font-size:1.2rem}
.wm-seller{display:flex; align-items:center; gap:10px; margin-top:8px}
.wm-seller span span{font-size:.78rem; color:var(--ink-3); display:flex; align-items:center; gap:5px}
.wm-seller svg{width:13px; height:13px; color:var(--ok)}
.wm-acts{margin-left:auto; display:flex; gap:8px}
.ps-av{width:38px; height:38px; border-radius:50%; background:var(--ink); color:var(--page);
  display:grid; place-items:center; font-size:.8rem; font-weight:700; flex:none}

.stream-items{display:grid; gap:8px}
.si{display:flex; align-items:center; gap:12px; padding:10px; border:1px solid var(--line);
  border-radius:var(--r); background:var(--panel)}
.si:hover{border-color:var(--brand)}
.si-t{font-size:.74rem; font-weight:700; color:var(--brand); font-variant-numeric:tabular-nums; min-width:42px}
.si img{width:52px; height:52px; border-radius:var(--r-sm); object-fit:cover; background:var(--muted)}
.si > div{flex:1; min-width:0}
.si b{display:block; font-size:.86rem}
.si-p{font-size:.88rem; font-weight:700}
.si-left{font-size:.74rem; color:var(--warn); margin-left:8px; font-weight:600}
.si-stock{font-size:.74rem; color:var(--ok); margin-left:8px}

.chat{border:1px solid var(--line); border-radius:var(--r); background:var(--panel);
  display:flex; flex-direction:column; height:min(560px,70vh); position:sticky; top:130px}
.chat-head{display:flex; align-items:center; justify-content:space-between; padding:12px 14px;
  border-bottom:1px solid var(--line)}
.chat-head span{font-size:.76rem; color:var(--ink-3)}
.chat-body{flex:1; overflow-y:auto; padding:10px 14px; display:flex; flex-direction:column; gap:9px}
.cm{font-size:.85rem; line-height:1.45}
.cm b{color:var(--ink-3); font-weight:600; margin-right:6px; font-size:.8rem}
.cm.me b{color:var(--brand)}
.chat-send{display:flex; gap:8px; padding:11px 14px; border-top:1px solid var(--line)}
.chat-rule{font-size:.72rem; color:var(--ink-3); padding:0 14px 12px; display:flex; gap:6px}
.chat-rule svg{width:13px; height:13px; flex:none; color:var(--ok)}

/* ------------------------------------------------------------ PDP */
/* PDP gallery + zoom: see the "PDP gallery" block near the end of the file. */
.pdp{display:grid; gap:22px; padding:18px 0 8px}
.pdp > *{min-width:0}
@media (min-width:900px){
  .pdp{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); gap:36px; padding-top:22px}
  .pdp-media{position:sticky; top:128px; align-self:start}
}
@media (min-width:1200px){ .pdp{grid-template-columns:minmax(0,620px) minmax(0,1fr); gap:48px} }
.gt-video{display:grid; place-items:center; background:var(--ink); color:#fff; gap:2px}
.gt-video svg{width:20px; height:20px}
.gt-video span{font-size:.64rem; font-weight:700}

.pdp-seller{display:flex; align-items:center; gap:10px; padding:10px 12px 10px 10px; border:1px solid var(--line);
  border-radius:var(--r); margin-bottom:16px; background:var(--panel-2)}
.pdp-seller:hover{border-color:var(--ink-3)}
.ps-link{display:flex; align-items:center; gap:10px; flex:1; min-width:0}
.ps-link b{font-size:.9rem}
.ps-link:hover b{color:var(--brand)}
.ps-meta{display:flex; align-items:center; gap:5px; font-size:.76rem; color:var(--ink-3)}
.ps-meta svg{width:12px; height:12px; color:var(--ok)}
.ps-follow{flex:none}
.btn-sm{height:32px; padding:0 13px; font-size:.8rem; gap:5px}
.btn-sm svg{width:14px; height:14px}
.pdp-buy h1{font-size:1.45rem; margin-bottom:9px}
.pdp-rate{display:flex; align-items:center; gap:4px; flex-wrap:wrap; font-size:.83rem; color:var(--ink-3);
  margin-bottom:14px}
.pdp-rate a{display:inline-flex; align-items:center; gap:6px}
.pdp-rate a:hover{color:var(--brand)}
.pdp-price{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.pdp-price b{font-size:2rem; font-family:var(--ff-d); letter-spacing:-.03em}
.pdp-price .pc-off{position:static}
.pdp-from{font-size:.86rem; font-weight:600; color:var(--ink-3); margin-right:-4px}
.pdp-left{margin:4px 0 14px}
.pdp-vat{font-size:.78rem; color:var(--ink-3); margin-top:3px}
.pdp-opt{margin-top:18px;margin-bottom:18px;}
.pdp-opt label{display:block; font-size:.82rem; font-weight:600; margin-bottom:8px}
.opt-sel{font-weight:400; color:var(--ink-3)}
.swatches{display:flex; gap:8px; flex-wrap:wrap}
.sw{display:flex; align-items:center; gap:7px; padding:6px 12px 6px 7px; border:1.5px solid var(--line);
  border-radius:var(--r-pill); font-size:.8rem}
.sw i{width:18px; height:18px; border-radius:50%; border:1px solid rgba(0,0,0,.12)}
.sw.on{border-color:var(--ink); font-weight:600}
.sw.out{opacity:.4; text-decoration:line-through}
.pills{display:flex; gap:8px; flex-wrap:wrap}
.pill-opt{padding:8px 16px; border:1.5px solid var(--line); border-radius:var(--r-pill); font-size:.84rem}
.pill-opt.on{border-color:var(--ink); font-weight:600}
.pdp-stock{display:flex; align-items:center; gap:7px; margin:16px 0; font-size:.84rem; color:var(--warn)}
.pdp-stock svg{width:16px; height:16px}
.pdp-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:12px}
.pdp-actions .btn{flex:1; min-width:140px}
.qty{display:flex; align-items:center; border:1px solid var(--line); border-radius:var(--r-pill); height:46px}
.qty button{width:40px; height:100%; display:grid; place-items:center; color:var(--ink-2)}
.qty svg{width:15px; height:15px}
.qty input{width:38px; text-align:center; border:0; outline:none; background:none; font-weight:600}
.pdp-sec{display:flex; gap:16px; padding-bottom:16px; border-bottom:1px solid var(--line)}
.pdp-deliver{margin-top:16px; display:grid; gap:12px}

/* "Also sold by" under the price, and the Other sellers box (ProductIdentity) */
.pdp-also{display:inline-flex; align-items:center; gap:6px; max-width:100%; margin-top:8px; padding:6px 12px; border-radius:var(--r-pill);
  background:var(--teal-bg); color:var(--teal); font-size:.82rem; font-weight:600; line-height:1.3}
.pdp-also svg{width:15px; height:15px; flex:none}
.pdp-also span{min-width:0}
.pdp-also b{font-weight:800; white-space:nowrap}
.pdp-also:hover{filter:brightness(.97)}
.pdp-others{margin:6px 0 16px; border:1.5px solid var(--line); border-radius:var(--r); padding:14px 14px 6px; background:var(--panel)}
.pdp-others header{display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:8px}
.pdp-others h2{font-size:1.02rem; margin:0}
.pdp-others header span{font-size:.78rem; color:var(--ink-3)}
.po-tip{display:flex; gap:8px; align-items:flex-start; margin:0 0 8px; padding:9px 11px; border-radius:var(--r-sm);
  background:var(--ok-bg); color:var(--ok); font-size:.82rem}
.po-tip svg{width:16px; height:16px; flex:none; margin-top:1px}
.po-list{list-style:none; margin:0; padding:0}
.po-row{display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center; padding:10px 0; border-top:1px solid var(--line-2)}
.po-list:first-of-type .po-row:first-child{border-top:0}
.po-who{min-width:0}
.po-who a{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.po-who a:hover b{color:var(--brand)}
.po-who b{font-size:.88rem}
.po-who span{display:block; font-size:.76rem; color:var(--ink-3); margin-top:1px}
.po-price{text-align:right}
.po-price b{display:block; font-size:.95rem; font-family:var(--ff-d)}
.po-price span{font-size:.72rem; font-weight:600}
.po-less{color:var(--ok)}
.po-more-p{color:var(--ink-3)}
.po-add .btn,.btn.po-add{min-width:0}
.po-more summary{cursor:pointer; padding:10px 0; border-top:1px solid var(--line-2); font-size:.82rem; font-weight:600; color:var(--brand)}
.po-more[open] summary{color:var(--ink-3)}
@media (max-width:340px){
  .po-row{grid-template-columns:1fr auto; }
  .po-add{grid-column:1 / -1}
  .po-add .btn,.btn.po-add{width:100%}
}
.dl-row{display:flex; gap:11px; align-items:flex-start; font-size:.84rem}
.dl-row > svg{width:18px; height:18px; color:var(--ink-3); flex:none; margin-top:1px}
.dl-row b{display:block; font-size:.85rem}
.dl-row span{color:var(--ink-3); font-size:.8rem}
.dl-row .link,.dl-row button{margin-left:auto; color:var(--brand); font-weight:600; font-size:.8rem; flex:none}

/* clip section — the differentiator */
.clipsec{background:var(--ink); color:#fff; padding:34px 0; margin:30px 0; border-radius:var(--r)}
.clipsec .eyebrow{background:rgba(255,255,255,.12); color:#fff}
.clipsec h2{color:#fff; font-size:1.5rem; margin:12px 0 8px}
.clip-head p{color:rgba(255,255,255,.7); font-size:.9rem; max-width:60ch}
.clip-wrap{display:grid; gap:20px; margin-top:22px}
@media (min-width:820px){ .clip-wrap{grid-template-columns:1.6fr 1fr; gap:26px} }
.clip-player{position:relative; border-radius:var(--r); overflow:hidden; background:#000}
.clip-player img{width:100%; aspect-ratio:16/9; object-fit:cover; opacity:.82}
.clip-play{position:absolute; inset:0; margin:auto; width:66px; height:66px; border-radius:50%;
  background:rgba(255,255,255,.95); color:var(--ink); display:grid; place-items:center}
.clip-play:hover{transform:scale(1.06)}
.clip-play svg{width:26px; height:26px; margin-left:3px}
.clip-time{position:absolute; right:12px; bottom:20px; background:rgba(0,0,0,.7); color:#fff;
  font-size:.74rem; padding:3px 8px; border-radius:var(--r-xs); font-weight:600}
.clip-bar{position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(255,255,255,.25)}
.clip-bar i{display:block; height:100%; background:var(--brand)}
.clip-moments b{display:block; font-size:.82rem; margin-bottom:9px; color:rgba(255,255,255,.6)}
.mom{display:flex; gap:10px; width:100%; padding:9px 10px; border-radius:var(--r-sm); text-align:left;
  color:rgba(255,255,255,.85); font-size:.83rem}
.mom:hover{background:rgba(255,255,255,.1); color:#fff}
.mt{font-weight:700; color:var(--brand); font-variant-numeric:tabular-nums; flex:none}
.clip-actions{display:grid; gap:8px; margin-top:16px}
.clip-actions .btn-default{background:rgba(255,255,255,.12); border-color:transparent; color:#fff}
.clip-actions .btn-ghost{color:rgba(255,255,255,.75)}
.clipsec .dim{color:rgba(255,255,255,.45)}

.pdp-tabs{display:flex; gap:4px; overflow-x:auto; border-bottom:1px solid var(--line); margin-bottom:26px;
  scrollbar-width:none}
.pdp-tabs::-webkit-scrollbar{display:none}
.pdp-tabs a{padding:12px 14px; font-size:.88rem; font-weight:500; color:var(--ink-3);
  border-bottom:2px solid transparent; white-space:nowrap}
.pdp-tabs a.on,.pdp-tabs a:hover{color:var(--ink); border-color:var(--brand)}
.pdp-sec-b{margin-bottom:38px; scroll-margin-top:130px}
.pdp-sec-b h2{margin-bottom:12px}
.pdp-sec-b p{color:var(--ink-2); margin-bottom:10px; max-width:78ch}
.ticks{list-style:none; display:grid; gap:7px; margin-top:12px}
.ticks li{display:flex; gap:9px; font-size:.87rem; align-items:flex-start}
.ticks svg{width:16px; height:16px; color:var(--ok); flex:none; margin-top:2px}
.ticks.off svg{color:var(--danger)}
.spec{width:100%; border-collapse:collapse; font-size:.87rem}
.spec th,.spec td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line-2); vertical-align:top}
.spec th{width:200px; color:var(--ink-3); font-weight:500}
.spec thead th{color:var(--ink); font-weight:700}
.two-col{display:grid; gap:22px}
@media (min-width:700px){ .two-col{grid-template-columns:1fr 1fr} }
.two-col h3{margin-bottom:8px}

.rv-summary{display:grid; gap:22px; padding:20px; background:var(--panel-2); border-radius:var(--r);
  margin-bottom:20px}
@media (min-width:800px){ .rv-summary{grid-template-columns:auto 1fr 1fr; align-items:center} }
.rv-big{text-align:center}
.rv-big b{display:block; font-size:2.6rem; font-family:var(--ff-d); letter-spacing:-.03em}
.rv-big span{display:block; font-size:.8rem; color:var(--ink-3)}
.rvb{display:flex; align-items:center; gap:9px; font-size:.8rem; margin-bottom:5px}
.rvb .bar{flex:1; height:7px; background:var(--muted); border-radius:4px; overflow:hidden}
.rvb .bar b{display:block; height:100%; background:var(--brand)}
.rvb i{font-style:normal; color:var(--ink-3); min-width:40px; text-align:right}
.rv-aspects{display:flex; gap:7px; flex-wrap:wrap; align-content:flex-start}
.rv-aspects b{flex-basis:100%; font-size:.8rem; color:var(--ink-3); margin-bottom:3px}
.asp{font-size:.78rem; padding:4px 10px; border-radius:var(--r-pill); background:var(--panel)}
.asp i{font-style:normal; font-weight:700; margin-left:4px}
.asp.pos{color:var(--ok)} .asp.mid{color:var(--warn)}
.rv-filter{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:18px}
.rv{padding:16px 0; border-bottom:1px solid var(--line-2)}
.rv header{display:flex; align-items:center; gap:10px; margin-bottom:7px}
.rv-av{width:34px; height:34px; border-radius:50%; overflow:hidden; background:var(--muted); flex:none}
.rv-av img{width:100%; height:100%; object-fit:cover}
.rv header b{font-size:.86rem}
.rv-meta{display:block; font-size:.75rem; color:var(--ink-3)}
.rv-clip{margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-size:.72rem;
  font-weight:600; color:var(--brand); background:var(--brand-050); padding:4px 9px; border-radius:var(--r-pill)}
.rv-clip svg{width:12px; height:12px}
.rv-stars{display:flex; align-items:center; gap:9px; margin-bottom:5px}
.rv-stars b{font-size:.92rem}
.rv p{font-size:.88rem; color:var(--ink-2); margin-bottom:9px}
.rv footer{display:flex; align-items:center; gap:16px}
.rv-verified{display:inline-flex; align-items:center; gap:5px; font-size:.74rem; color:var(--ok); font-weight:600}
.rv-verified svg{width:13px; height:13px}
.rv-help{display:inline-flex; align-items:center; gap:5px; font-size:.76rem; color:var(--ink-3)}
.rv-help svg{width:13px; height:13px}
.rv-photos{display:flex; gap:7px; flex-wrap:wrap; margin:2px 0 10px}
.rv-photos a{display:block; width:72px; height:72px; border-radius:var(--r-xs); overflow:hidden;
  border:1px solid var(--line); background:var(--muted)}
.rv-photos img{width:100%; height:100%; object-fit:cover; display:block}
.rv-photos a:hover{border-color:var(--brand)}

.qa-ask{display:flex; gap:9px; margin-bottom:20px}
.qa{padding:16px 0; border-bottom:1px solid var(--line-2)}
.qa-q,.qa-a{display:flex; gap:11px; align-items:flex-start}
.qa-q > svg,.qa-a > svg{width:17px; height:17px; color:var(--ink-3); flex:none; margin-top:2px}
.qa-q b{font-size:.9rem}
.qa-who{display:block; font-size:.75rem; color:var(--ink-3)}
.qa-help{margin-left:auto; font-size:.74rem; color:var(--ink-3); flex:none}
.qa-a{margin-top:11px; padding:11px; background:var(--panel-2); border-radius:var(--r-sm)}
.qa-a > svg{color:var(--brand)}
.qa-a b{font-size:.85rem}
.qa-a p{font-size:.86rem; color:var(--ink-2); margin-top:4px}

.sticky-buy{position:fixed; left:0; right:0; bottom:56px; z-index:70; display:flex; align-items:center;
  gap:12px; padding:10px 16px; background:var(--panel); border-top:1px solid var(--line); box-shadow:var(--sh-lg)}
.sticky-buy b{font-size:1.05rem; display:block}
.sticky-buy span{font-size:.76rem; color:var(--ink-3)}
.sticky-buy .btn{margin-left:auto}

/* ------------------------------------------------------------ shopfront */
.sf-cover{background:var(--muted)}
.sf-cover img{width:100%; height:200px; object-fit:cover}
.sf-head{display:flex; align-items:flex-end; gap:16px; margin-top:-40px; padding-bottom:18px; flex-wrap:wrap}
.sf-logo{width:88px; height:88px; border-radius:var(--r); background:var(--ink); color:var(--page);
  display:grid; place-items:center; font-size:1.5rem; font-weight:700; border:4px solid var(--page); flex:none}
.sf-id h1{display:flex; align-items:center; gap:8px; font-size:1.5rem}
.sf-id h1 svg{width:19px; height:19px; color:var(--ok)}
.sf-id p{color:var(--ink-3); font-size:.9rem}
.sf-stats{display:flex; gap:16px; margin-top:8px; font-size:.83rem; color:var(--ink-3); flex-wrap:wrap}
.sf-stats b{color:var(--ink)}
.sf-stats span{display:inline-flex; align-items:center; gap:4px}
.sf-stats svg{width:14px; height:14px; flex:none}
.sf-acts{margin-left:auto; display:flex; gap:8px}
/* The logo overlaps the cover; the name and actions sit below it, where
   dark text is readable whatever the cover photo is. */
.sf-head{align-items:flex-start}
.sf-id,.sf-acts{margin-top:50px}
@media (max-width:640px){ .sf-id{margin-top:0; flex-basis:100%} .sf-acts{margin:0} }
.sf-tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin:16px 0 8px; overflow-x:auto}
.sf-tabs a{padding:12px 16px; font-size:.88rem; font-weight:500; color:var(--ink-3);
  border-bottom:2px solid transparent; white-space:nowrap}
.sf-tabs a.on{color:var(--ink); border-color:var(--brand)}

/* ------------------------------------------------------------ cart + checkout */
.steps{display:flex; gap:6px; list-style:none; margin:20px 0; flex-wrap:wrap}
.steps li{display:flex; align-items:center; gap:8px; font-size:.83rem; color:var(--ink-3); flex:1; min-width:110px}
.steps .sn{width:24px; height:24px; border-radius:50%; background:var(--muted); display:grid;
  place-items:center; font-size:.76rem; font-weight:700; flex:none}
.steps .sn svg{width:13px; height:13px}
.steps li.on{color:var(--ink); font-weight:600}
.steps li.on .sn{background:var(--brand); color:#fff}
.steps li.done .sn{background:var(--ok); color:#fff}

.cart-lay,.co-lay{display:grid; gap:24px; align-items:start}
@media (min-width:900px){ .cart-lay,.co-lay{grid-template-columns:minmax(0,1fr) 340px; gap:30px} }
.freebar{display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--ok-bg);
  border-radius:var(--r); margin-bottom:16px; font-size:.84rem; flex-wrap:wrap}
.fb-track{flex:1; min-width:120px; height:7px; background:rgba(0,0,0,.08); border-radius:4px; overflow:hidden}
.fb-track i{display:block; height:100%; background:var(--ok)}
.freebar svg{width:16px; height:16px; color:var(--ok)}
.cart-seller{display:flex; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid var(--line)}
.cs-av{width:32px; height:32px; border-radius:50%; background:var(--ink); color:var(--page);
  display:grid; place-items:center; font-size:.72rem; font-weight:700}
.cs-meta{display:inline-flex; align-items:center; gap:5px; font-size:.78rem; color:var(--ink-3); margin-left:auto}
.cs-meta svg{width:13px; height:13px; color:var(--ok)}
.cart-row{display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line-2)}
.cart-row img{width:90px; height:90px; border-radius:var(--r-sm); object-fit:cover; background:var(--muted); flex:none}
.cr-body{flex:1; min-width:0}
.cr-name{font-size:.92rem; font-weight:500; display:block}
.cr-name:hover{color:var(--brand)}
.cr-var{display:block; font-size:.8rem; color:var(--ink-3)}
.cr-seller{display:block; font-size:.78rem; color:var(--ink-3); margin:3px 0}
.cr-warn{display:inline-flex; align-items:center; gap:5px; font-size:.76rem; color:var(--warn); font-weight:600}
.cr-ok{display:inline-flex; align-items:center; gap:5px; font-size:.76rem; color:var(--ok)}
.cr-warn svg,.cr-ok svg{width:13px; height:13px}
.cr-acts{display:flex; gap:14px; margin-top:8px}
.cr-right{text-align:right; display:flex; flex-direction:column; gap:6px; align-items:flex-end}
.cr-right > b{font-size:1rem}
.cr-right .qty{height:36px}
.cr-right .qty button{width:32px}
.saved-row{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px}
.sv{display:flex; gap:11px; padding:11px; border:1px solid var(--line); border-radius:var(--r)}
.sv img{width:56px; height:56px; border-radius:var(--r-sm); object-fit:cover; background:var(--muted)}
.sv a{font-size:.84rem; display:block}
.sv b{display:block; font-size:.9rem; margin:3px 0}

.summary{position:sticky; top:130px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); padding:18px}
.summary h3{margin-bottom:14px}
.sm-row{display:flex; justify-content:space-between; gap:12px; padding:6px 0; font-size:.88rem}
.sm-row.total{border-top:1px solid var(--line); margin-top:8px; padding-top:12px; font-size:1.05rem}
.sm-row.total b{font-size:1.25rem; font-family:var(--ff-d)}
.sm-vat{font-size:.75rem; color:var(--ink-3); margin-bottom:14px}
.sm-trust{display:grid; gap:7px; margin-top:14px; font-size:.78rem; color:var(--ink-2)}
.sm-trust svg{width:14px; height:14px; color:var(--ok); vertical-align:-3px; margin-right:5px}
.sm-pay{display:flex; gap:6px; flex-wrap:wrap; margin-top:14px; padding-top:14px; border-top:1px solid var(--line-2)}
.sm-pay span{font-size:.68rem; font-weight:700; padding:4px 8px; background:var(--muted);
  border-radius:var(--r-xs); color:var(--ink-3)}

.co-main h1{margin-bottom:6px}
.co-sub{color:var(--ink-3); font-size:.87rem; margin-bottom:18px}
.co-nav{display:flex; gap:10px; justify-content:space-between; margin-top:24px; flex-wrap:wrap}
.addr-list{display:grid; gap:10px; margin-bottom:16px}
.addr{display:flex; align-items:flex-start; gap:12px; padding:14px; border:1.5px solid var(--line);
  border-radius:var(--r); cursor:pointer; background:var(--panel)}
.addr.on{border-color:var(--brand); background:var(--brand-050)}
.addr input{accent-color:var(--brand); margin-top:3px; width:17px; height:17px}
.ad-body{flex:1}
.ad-body b{display:block; font-size:.9rem}
.ad-body span{display:block; font-size:.83rem; color:var(--ink-2)}
.ad-ph{color:var(--ink-3) !important; font-size:.8rem !important}
.ad-def{font-size:.68rem; font-weight:700; color:var(--ok); background:var(--ok-bg);
  padding:2px 8px; border-radius:var(--r-pill); margin-left:7px}
.ad-acts{margin-left:auto; display:flex; gap:8px; flex:none}
.addr-new{justify-content:center; color:var(--brand); font-weight:600; border-style:dashed}
.addr-new svg{width:16px; height:16px}
.newaddr{border:1px solid var(--line); border-radius:var(--r); padding:14px; margin-bottom:16px}
.newaddr summary{font-weight:600; font-size:.88rem; cursor:pointer; display:flex; align-items:center; gap:8px}
.newaddr svg{width:15px; height:15px}
.newaddr .form-grid{margin-top:16px}

.ship-list,.pay-list{display:grid; gap:10px; margin-bottom:18px}
.ship,.pay{display:flex; align-items:center; gap:13px; padding:14px; border:1.5px solid var(--line);
  border-radius:var(--r); cursor:pointer; background:var(--panel)}
.ship.on,.pay.on{border-color:var(--brand); background:var(--brand-050)}
.ship input,.pay input{accent-color:var(--brand); width:17px; height:17px; flex:none}
.sh-ico{width:38px; height:38px; border-radius:var(--r-sm); background:var(--muted); display:grid;
  place-items:center; color:var(--ink-2); flex:none}
.sh-ico svg{width:18px; height:18px}
.sh-body,.py-body{flex:1}
.sh-body b,.py-body b{display:block; font-size:.9rem}
.sh-body span,.py-body span{font-size:.8rem; color:var(--ink-3)}
.sh-tag{display:inline-block; font-size:.68rem; font-weight:700; color:var(--ok); background:var(--ok-bg);
  padding:2px 8px; border-radius:var(--r-pill); margin-top:4px}
.sh-price{font-weight:700; font-size:.95rem; flex:none; text-align:right}
.co-h2{font-size:.95rem; font-weight:700; margin:0 0 10px}
/* A delivery-service order: the station and each shop's parcel. */
.odp h3{display:flex; align-items:center; gap:8px}
.odp h3 svg,.odp p svg{width:16px; height:16px}
.odp-st{display:grid; gap:3px; margin:8px 0 12px; font-size:.86rem}
.odp-st span{display:flex; gap:6px; align-items:flex-start; color:var(--ink-2)}
.odp-st svg{width:14px; height:14px; flex:none; margin-top:3px}
.odp-st a{display:inline-flex; align-items:center; gap:4px}
.odp-st a svg{width:12px; height:12px; margin:0}
.odp p{display:flex; gap:7px; align-items:flex-start; color:var(--ink-2)}
.odp-list{list-style:none; margin:12px 0 0; padding:0; display:grid; gap:10px}
.odp-list li{display:flex; justify-content:space-between; gap:12px; padding-top:10px; border-top:1px solid var(--line)}
.odp-list li > div{display:grid; gap:2px}
.odp-r{text-align:right; justify-items:end}
.odp-r a{display:inline-flex; align-items:center; gap:4px}
.odp-r a svg{width:12px; height:12px}
.odp-s{font-size:.72rem; font-weight:700; padding:2px 9px; border-radius:var(--r-pill);
  background:var(--muted); color:var(--ink-2)}
.odp-s.ok{background:var(--ok-bg); color:var(--ok)}
.odp-s.info{background:var(--brand-050); color:var(--brand)}
.odp-s.warn{color:var(--warn)}
/* Checkout delivery: one card per way of getting it, the chosen one open. */
.dlv-opts{display:grid; gap:10px; margin-bottom:18px}
.dlv-opt{border:1.5px solid var(--line); border-radius:var(--r); background:var(--panel); overflow:hidden}
.dlv-opt.on{border-color:var(--brand)}
.dlv-head{display:flex; align-items:center; gap:13px; padding:14px; cursor:pointer}
.dlv-opt.on .dlv-head{background:var(--brand-050)}
.dlv-head input{accent-color:var(--brand); width:17px; height:17px; flex:none}
.dlv-body{padding:14px; border-top:1px solid var(--line); display:grid; gap:14px}
.sh-price.ok,.dlv-basis .ok{color:var(--ok)}
.stn-open{justify-content:center}
.stn-chosen{display:flex; gap:12px; align-items:flex-start; padding:12px; border-radius:var(--r-sm); background:var(--panel-2)}
.stn-chosen > svg{width:20px; height:20px; color:var(--brand); flex:none; margin-top:2px}
.stn-chosen > div{flex:1; display:grid; gap:2px; font-size:.86rem}
.stn-chosen .btn{flex:none}
.stn-ready{display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--ok); margin-top:4px}
.stn-ready svg{width:14px; height:14px}
.stn-who{border:0; padding:0; margin:0}
.stn-who legend{font-weight:700; font-size:.88rem; margin-bottom:8px}
.dlv-basis{margin:0}

/* The station picker: a wide dialog on a tablet or desktop, a full-height
   sheet on a phone. It is built on the confirm dialog (.cm-wrap/.cmd), whose
   rules come later in this file — hence `.cmd.st-dlg`, so the narrow,
   centred confirm layout does not win and push the cards off the side. */
.cmd.st-dlg{width:min(640px,100%); max-height:min(86vh,780px); display:flex; flex-direction:column;
  text-align:left; padding:0; overflow:hidden; border-radius:18px}
.st-head{display:flex; align-items:center; gap:10px; padding:18px 18px 12px 20px}
.cmd .st-head h2{font-size:1.08rem; margin:0; flex:1; min-width:0; line-height:1.3}
.st-close{width:36px; height:36px; flex:none; display:grid; place-items:center; border-radius:50%;
  color:var(--ink-2); background:var(--muted)}
.st-close:hover{background:var(--line)}
.st-close svg{width:18px; height:18px}
.st-filters{display:grid; grid-template-columns:minmax(150px,1fr) 2fr; gap:10px; padding:0 20px 14px;
  border-bottom:1px solid var(--line)}
.st-f{display:grid; gap:5px; min-width:0; font-size:.74rem; font-weight:600; color:var(--ink-3);
  text-transform:uppercase; letter-spacing:.04em}
.st-f .input{text-transform:none; letter-spacing:0; color:var(--ink); font-weight:500; height:42px}
/* The county list is drawn by shop.js (enhanceSelect), like the form
   dropdowns: a field the height of the search box, a menu that scrolls. */
.st-f .dd{display:block}
.st-f .dd-btn{width:100%; max-width:none; height:42px; justify-content:space-between; padding:0 12px 0 13px;
  font-size:.92rem; text-transform:none; letter-spacing:0}
.st-f .dd-menu{left:0; right:auto; min-width:100%; max-width:min(340px, 92vw); max-height:min(320px, 50vh);
  text-transform:none; letter-spacing:0}
.st-qbox{position:relative; display:block}
.st-qbox svg{position:absolute; left:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--ink-3)}
.st-qbox .input{padding-left:36px; width:100%}
.st-results{overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; padding:4px 20px 20px; flex:1; min-height:0;
  transition:opacity .15s}
.st-results.loading{opacity:.5}
.cmd .st-count{font-size:.78rem; color:var(--ink-3); margin:10px 0 8px; max-width:none}
.cmd .st-none{padding:24px 0; text-align:center; color:var(--ink-3); font-size:.88rem; max-width:none}
.st-list{list-style:none; margin:0; padding:0; display:grid; gap:10px; min-width:0}
.st-item{position:relative; min-width:0}
.st-pick{width:100%; min-width:0; display:flex; gap:12px; align-items:flex-start; text-align:left;
  padding:14px 14px 14px 16px; border:1.5px solid var(--line); border-radius:var(--r); background:var(--panel);
  cursor:pointer; font:inherit; color:inherit; white-space:normal; transition:border-color .15s, background .15s}
.st-pick:hover:not(:disabled),.st-pick:focus-visible{border-color:var(--brand)}
.st-item.on .st-pick{border-color:var(--brand); background:var(--brand-050)}
.st-pick.picking{opacity:.6}
.st-pick:disabled{opacity:.55; cursor:not-allowed}
.st-main{flex:1; display:grid; gap:3px; min-width:0; overflow-wrap:anywhere}
.st-main b{font-size:.92rem; line-height:1.3}
.st-area{font-size:.8rem; font-weight:600; color:var(--ink-2)}
.st-addr,.st-hours{font-size:.76rem; color:var(--ink-3); line-height:1.45}
.st-addr{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.st-hours{display:flex; gap:5px; align-items:flex-start; margin-top:2px}
.st-hours svg{width:12px; height:12px; flex:none; margin-top:3px}
.st-price{flex:none; max-width:38%; display:grid; justify-items:end; gap:2px; text-align:right}
.st-price b{font-size:.94rem; white-space:nowrap; color:var(--ink)}
.st-price span{font-size:.72rem; color:var(--ink-3)}
.st-item.on .st-price b{color:var(--brand)}
.st-map{position:absolute; right:14px; bottom:12px; display:inline-flex; align-items:center; gap:3px;
  font-size:.74rem; color:var(--brand); font-weight:600}
.st-map svg{width:12px; height:12px}
@media (max-width:600px){
  .cm-wrap.st-wrap{padding:0; place-items:stretch}
  .cmd.st-dlg{width:100%; max-height:none; height:100%; border-radius:0}
  .st-head{padding:14px 16px 10px; padding-top:calc(14px + env(safe-area-inset-top, 0px))}
  .st-filters{grid-template-columns:1fr; padding:0 16px 12px}
  .st-results{padding:4px 16px calc(16px + env(safe-area-inset-bottom, 0px))}
  /* Price under the name rather than beside it, so the address has the width. */
  .st-pick{flex-direction:column; gap:6px}
  .st-price{max-width:none; justify-items:start; text-align:left; display:flex; gap:8px; align-items:baseline}
}
.py-logo{min-width:64px; font-size:.72rem; font-weight:800; letter-spacing:.02em; color:var(--ink-2);
  background:var(--muted); padding:7px 9px; border-radius:var(--r-xs); text-align:center; flex:none}
.py-logo svg{width:16px; height:16px; margin:0 auto}
.py-tag{font-size:.68rem; font-weight:700; color:var(--brand); flex:none}
.pay-panel{padding:16px; background:var(--panel-2); border-radius:var(--r); margin-bottom:16px}
.promo{display:flex; gap:9px; margin-bottom:18px}
.agree{display:flex; gap:10px; align-items:flex-start; font-size:.83rem; color:var(--ink-2); margin:16px 0}
.agree input{accent-color:var(--brand); margin-top:3px; width:17px; height:17px; flex:none}
.agree a{color:var(--brand); text-decoration:underline}

.processing,.confirmed,.notfound{text-align:center; padding:46px 0 40px}
.proc-anim{display:flex; gap:8px; justify-content:center; margin-bottom:22px}
.proc-anim span{width:11px; height:11px; border-radius:50%; background:var(--brand); animation:bounce 1.2s infinite}
.proc-anim span:nth-child(2){animation-delay:.15s} .proc-anim span:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-9px);opacity:1}}
.processing h1,.confirmed h1{margin-bottom:10px}
.processing > p,.confirmed > p{color:var(--ink-2); max-width:52ch; margin:0 auto 8px}
.proc-steps{display:grid; gap:9px; max-width:340px; margin:26px auto; text-align:left}
.ps{display:flex; align-items:center; gap:11px; font-size:.87rem; color:var(--ink-3)}
.ps svg{width:17px; height:17px; color:var(--ok)}
.ps.done{color:var(--ink)} .ps.now{color:var(--ink); font-weight:600}
.dotpulse{width:15px; height:15px; border-radius:50%; border:2px solid var(--line); flex:none; display:block}
.ps.now .dotpulse{border-color:var(--brand); animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 var(--brand-050)}50%{box-shadow:0 0 0 6px var(--brand-050)}}
.proc-timer{font-size:.85rem; color:var(--ink-3); margin-bottom:18px}
.proc-acts,.cf-acts,.stack-h{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:20px 0}
.cf-tick{width:76px; height:76px; border-radius:50%; background:var(--ok-bg); color:var(--ok);
  display:grid; place-items:center; margin:0 auto 20px}
.cf-tick svg{width:38px; height:38px; stroke-width:2.4}
.cf-tick.bad{background:var(--danger-bg); color:var(--danger)}
.cf-sms{font-size:.85rem; color:var(--ink-3) !important}
.cf-card{max-width:460px; margin:24px auto; padding:18px; border:1px solid var(--line);
  border-radius:var(--r); text-align:left}
.cf-row{display:flex; justify-content:space-between; gap:12px; padding:7px 0; font-size:.88rem}
.cf-row.total{border-top:1px solid var(--line); margin-top:7px; padding-top:11px; font-size:1rem}
.cf-next{max-width:460px; margin:26px auto 0; text-align:left}
.cf-next > b{display:block; margin-bottom:12px}
.cn{display:flex; gap:12px; margin-bottom:12px}
.cn > span{width:24px; height:24px; border-radius:50%; background:var(--brand-050); color:var(--brand);
  display:grid; place-items:center; font-size:.76rem; font-weight:700; flex:none}
.cn b{display:block; font-size:.87rem}
.cn span span{font-size:.8rem; color:var(--ink-3)}
/* Only the big illustration icon: this used to size every icon in the
   block, buttons included. */
.notfound > svg{width:52px; height:52px; color:var(--ink-3); margin:0 auto 18px}

/* ------------------------------------------------------------ account */
.acc-lay{display:grid; grid-template-columns:minmax(0,1fr); gap:24px; align-items:start;
  padding-top:20px; padding-bottom:20px}
@media (min-width:900px){ .acc-lay{grid-template-columns:250px minmax(0,1fr); gap:30px} }
.acc-nav{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:8px; min-width:0}
.an-me{display:flex; align-items:center; gap:11px; padding:12px; border-bottom:1px solid var(--line-2);
  margin-bottom:8px; border-radius:var(--r-sm) var(--r-sm) 0 0}
.an-me:hover{background:var(--muted)}
.an-av{width:40px; height:40px; border-radius:50%; background:var(--brand); color:#fff; display:grid;
  place-items:center; font-weight:700; font-size:.85rem; flex:none}
.an-me b{display:block; font-size:.88rem}
.an-me span span{font-size:.76rem; color:var(--ink-3)}
.an-list{position:relative}
.an{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--r-sm);
  font-size:.87rem; color:var(--ink-2)}
.an:hover{background:var(--muted)}
.an.on{background:var(--brand-050); color:var(--brand); font-weight:600}
.an svg{width:17px; height:17px}
.an-n{margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:var(--r-pill);
  background:var(--brand); color:#fff; font-size:.7rem; font-weight:700; font-style:normal;
  display:grid; place-items:center}
.an-out{margin-top:8px; border-top:1px solid var(--line-2); padding-top:14px; color:var(--danger)}
.acc-out{display:none}
.an-arr{display:none}
/* Wide screens: the sidebar stays with you down a long page. */
@media (min-width:900px){
  .acc-nav{position:sticky; top:130px; max-height:calc(100vh - 146px); overflow-y:auto}
}
/* Phones: one row of tabs under the breadcrumbs, full width, current tab
   underlined in brand colour and scrolled into view by shop.js. Tabs, not
   pills, so it never reads as another set of filters like the order chips. */
@media (max-width:899px){
  .acc-lay{gap:0; padding-top:0}
  .acc-nav{margin:0 calc(-1 * var(--gutter)); padding:0; border:0; border-bottom:1px solid var(--line);
    border-radius:0; position:relative}
  .an-me,.acc-nav > .an-out{display:none}
  .an-list{display:flex; overflow-x:auto; scrollbar-width:none; padding:0 calc(var(--gutter) - 8px);
    -webkit-overflow-scrolling:touch}
  .an-list::-webkit-scrollbar{display:none}
  .an{flex:none; gap:7px; height:48px; padding:0 12px; border-radius:0; white-space:nowrap; position:relative;
    font-size:.85rem}
  .an:hover{background:none; color:var(--ink)}
  .an.on{background:none; color:var(--brand)}
  .an.on::after{content:""; position:absolute; left:8px; right:8px; bottom:0; height:3px;
    border-radius:3px 3px 0 0; background:var(--brand)}
  .an svg{width:16px; height:16px}
  .an-n{margin-left:0}
  /* "More this way" fades at whichever edge has more tabs. */
  .acc-nav::before,.acc-nav::after{content:""; position:absolute; top:0; bottom:1px; width:28px; z-index:1;
    pointer-events:none; opacity:0; transition:opacity .18s}
  .acc-nav::before{left:0; background:linear-gradient(90deg,var(--page),transparent)}
  .acc-nav::after{right:0; background:linear-gradient(270deg,var(--page),transparent)}
  .acc-nav.can-prev::before,.acc-nav.can-next::after{opacity:1}
  .acc-nav::before,.acc-nav::after{width:56px}
  .an-arr{display:grid; position:absolute; top:50%; z-index:2; width:30px; height:30px; margin-top:-15px; border-radius:50%;
    display:grid; place-items:center; background:var(--panel); color:var(--ink); border:1px solid var(--line);
    box-shadow:var(--sh); opacity:0; pointer-events:none; transition:opacity .18s}
  .an-arr svg{width:16px; height:16px}
  .an-prev{left:6px} .an-next{right:6px}
  .acc-nav.can-prev .an-prev,.acc-nav.can-next .an-next{opacity:1; pointer-events:auto}
  /* A single nudge on arrival, so "there is more this way" is noticed. */
  .acc-nav.can-next.an-hint .an-next{animation:anNudge .9s ease-in-out 2}
  @keyframes anNudge{50%{transform:translateX(4px)}}
  .acc-main .page-head{margin-top:18px}
  .acc-out{display:flex; margin:26px 0 6px; color:var(--danger)}
  /* Order filters scroll sideways rather than stacking three rows deep. */
  .acc-main > .chips-row{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    margin-right:calc(-1 * var(--gutter)); padding-right:var(--gutter)}
  .acc-main > .chips-row::-webkit-scrollbar{display:none}
  .acc-main > .chips-row .chip{flex:none; white-space:nowrap}
}

/* Profile completion */
.pf-meter{border-color:var(--brand); background:linear-gradient(180deg,var(--brand-050),var(--panel) 70%)}
.pm-head{display:flex; align-items:flex-start; gap:12px; margin-bottom:10px}
.pm-head > div{flex:1}
.pm-head b{display:block; font-family:var(--ff-d); font-size:1.02rem}
.pm-head span{font-size:.8rem; color:var(--ink-2)}
.pm-pct{font-family:var(--ff-d); font-size:1.5rem; font-weight:700; color:var(--brand); line-height:1}
.pm-bar{height:8px; border-radius:var(--r-pill); background:var(--line); overflow:hidden}
.pm-bar i{display:block; height:100%; border-radius:inherit; background:var(--brand); transition:width .4s}
.pm-steps{list-style:none; display:grid; gap:4px; margin-top:12px}
@media (min-width:640px){ .pm-steps{grid-template-columns:1fr 1fr; column-gap:14px} }
.pm-steps li{display:flex; align-items:flex-start; gap:10px}
.pm-steps li > svg{width:22px; height:22px; padding:4px; border-radius:50%; flex:none; margin-top:8px;
  background:var(--panel); color:var(--brand); border:1px dashed var(--brand)}
.pm-steps li.done > svg{background:var(--ok); color:#fff; border:0}
.pm-steps li > a,.pm-steps li > span{flex:1; padding:6px 8px; margin-left:-4px; border-radius:var(--r-sm)}
.pm-steps li > a:hover{background:var(--panel)}
.pm-steps b{display:block; font-size:.86rem}
.pm-steps li > a b{color:var(--brand)}
.pm-steps li.done b{color:var(--ink-3); font-weight:500; text-decoration:line-through}
.pm-steps span span{font-size:.78rem; color:var(--ink-3)}
.pf-ro{display:flex; align-items:center; justify-content:space-between; gap:10px; height:44px; padding:0 13px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--panel-2); font-size:.92rem}

/* Notifications: an unread one is marked with a dot, not a text bullet. */
.nt-dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--brand);
  margin-right:7px; vertical-align:2px}
.acc-kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; margin-bottom:18px}
.ak{padding:16px; border:1px solid var(--line); border-radius:var(--r); background:var(--panel)}
.ak:hover{border-color:var(--brand)}
.ak svg{width:19px; height:19px; color:var(--ink-3); margin-bottom:8px}
.ak b{display:block; font-size:1.6rem; font-family:var(--ff-d); line-height:1}
.ak span{font-size:.8rem; color:var(--ink-3)}
.acc-cols{display:grid; gap:14px; margin:20px 0}
@media (min-width:700px){ .acc-cols{grid-template-columns:1fr 1fr} }
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:18px; margin-bottom:14px}
.card h3{display:flex; align-items:center; gap:8px; margin-bottom:10px}
.card h3 svg{width:17px; height:17px; color:var(--brand)}
.card p{font-size:.86rem; color:var(--ink-2); margin-bottom:12px}

.ord-list{display:grid; gap:10px}
.ord{display:flex; align-items:center; gap:14px; padding:14px; border:1px solid var(--line);
  border-radius:var(--r); background:var(--panel); flex-wrap:wrap}
.ord:hover{border-color:var(--brand)}
.ord img{width:58px; height:58px; border-radius:var(--r-sm); object-fit:cover; background:var(--muted); flex:none}
.o-body{flex:1; min-width:150px}
.o-body b{display:block; font-size:.9rem}
.o-body span{font-size:.8rem; color:var(--ink-3)}
.o-code{display:block; font-size:.74rem; color:var(--ink-3); font-variant-numeric:tabular-nums}
.o-right{text-align:right; display:flex; flex-direction:column; gap:4px; align-items:flex-end}
.o-status{font-size:.74rem; font-weight:700; padding:3px 10px; border-radius:var(--r-pill)}
.o-status.go{background:var(--brand-050); color:var(--brand)}
.o-status.ok{background:var(--ok-bg); color:var(--ok)}
.o-status.bad{background:var(--danger-bg); color:var(--danger)}
.o-act{font-size:.78rem; color:var(--brand); font-weight:600}
.o-act.hot{background:var(--brand); color:#fff; padding:4px 11px; border-radius:var(--r-pill)}

/* Saved items (wishlist.php). Wide: picture, details, price and button on
   the right, Remove and the alert switches under both. Narrow: price
   and button share a row, then the actions get a row of their own and wrap
   rather than slide under the button. */
.wl-row{display:grid; grid-template-columns:58px minmax(0,1fr) auto;
  grid-template-areas:"img body right" "img acts acts"; column-gap:14px; row-gap:10px;
  padding:14px; border:1px solid var(--line); border-radius:var(--r); background:var(--panel)}
.wl-row > img{grid-area:img; width:58px; height:58px; border-radius:var(--r-sm); object-fit:cover;
  background:var(--muted)}
.wl-row > .o-body{grid-area:body; min-width:0}
.wl-row > .o-body > span{display:block}
.wl-row > .o-body > .cr-ok,.wl-row > .o-body > .cr-warn{display:flex; margin-top:3px}
.wl-row > .o-right{grid-area:right; align-self:start}
.wl-acts{grid-area:acts; display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px}
.wl-alerts{display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px}
.wl-alerts .tg-sm{white-space:nowrap}
@media (max-width:640px){
  .wl-row{grid-template-columns:58px minmax(0,1fr); grid-template-areas:"img body" "right right" "acts acts"}
  .wl-row > .o-right{flex-direction:row; flex-wrap:wrap; align-items:center; column-gap:10px; align-self:stretch}
  .wl-row > .o-right > form{flex:none; margin-left:auto}
  .wl-acts{padding-top:10px; border-top:1px solid var(--line)}
}

.od-lay{display:grid; gap:20px; align-items:start}
@media (min-width:900px){ .od-lay{grid-template-columns:minmax(0,1fr) 320px} }
.od-item{display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line-2)}
.od-item img{width:52px; height:52px; border-radius:var(--r-sm); object-fit:cover; background:var(--muted)}
.od-item > div{flex:1}
.od-item a{display:block; font-size:.87rem}
.od-item span{display:block; font-size:.78rem; color:var(--ink-3)}
.od-item > b{font-size:.92rem}
.track{display:grid; gap:0}
.tr{display:flex; gap:12px; padding:10px 0; align-items:flex-start; position:relative}
.tr::before{content:""; position:absolute; left:8px; top:26px; bottom:-10px; width:2px; background:var(--line)}
.tr:last-child::before{display:none}
.tr > svg{width:17px; height:17px; color:var(--ok); flex:none; background:var(--panel); z-index:1}
.tr b{display:block; font-size:.87rem}
.tr span{font-size:.79rem; color:var(--ink-3)}
.tr:not(.done):not(.now) b{color:var(--ink-3)}
.addr-p{font-size:.86rem; color:var(--ink-2); line-height:1.7}
.stack{display:grid; gap:8px}
.rider{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.rd-av{width:44px; height:44px; border-radius:50%; background:var(--ink); color:var(--page);
  display:grid; place-items:center; font-weight:700}
.rider b{display:block; font-size:.9rem}
.rider span{font-size:.8rem; color:var(--ink-3)}
.rider .btn{margin-left:auto}
.track-map{position:relative; border-radius:var(--r); overflow:hidden; background:var(--muted); margin-bottom:16px}
.track-map img{width:100%; height:auto; object-fit:cover}
.tm-pin{position:absolute; inset:0; margin:auto; width:40px; height:40px; color:var(--brand);
  display:grid; place-items:center}
.tm-pin svg{width:36px; height:36px; filter:drop-shadow(0 3px 6px rgba(0,0,0,.3))}

.tg{display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--line-2); cursor:pointer}
.tg:last-child{border-bottom:0}
.tg-t{flex:1}
.tg-t b{display:block; font-size:.88rem}
.tg-t span{font-size:.79rem; color:var(--ink-3)}
.switch-in{position:absolute; opacity:0; pointer-events:none}
.switch{width:40px; height:23px; border-radius:var(--r-pill); background:var(--line); position:relative;
  transition:.18s; flex:none; display:block}
.switch::after{content:""; position:absolute; top:2.5px; left:2.5px; width:18px; height:18px;
  border-radius:50%; background:#fff; transition:.18s; box-shadow:var(--sh-sm)}
.switch-in:checked + .switch{background:var(--ok)}
.switch-in:checked + .switch::after{transform:translateX(17px)}
.tg-sm{display:inline-flex; align-items:center; gap:7px; font-size:.78rem; color:var(--ink-3); cursor:pointer}
.tg-sm .switch{width:34px; height:20px}
.tg-sm .switch::after{width:15px; height:15px}
.tg-sm .switch-in:checked + .switch::after{transform:translateX(14px)}
.data-rows{display:grid; gap:2px}
.dr{display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--line-2)}
.dr:last-child{border-bottom:0}
.dr b{display:block; font-size:.88rem}
.dr span{font-size:.79rem; color:var(--ink-3)}
.dr .btn{margin-left:auto; flex:none}

.follow-list{display:grid; gap:10px; margin-bottom:20px}
.fl{display:flex; align-items:center; gap:13px; padding:14px; border:1px solid var(--line);
  border-radius:var(--r); flex-wrap:wrap}
.fl-av{width:44px; height:44px; border-radius:50%; background:var(--ink); color:var(--page);
  display:grid; place-items:center; font-weight:700; font-size:.85rem; flex:none}
.fl-body{flex:1; min-width:160px}
.fl-body b{display:block; font-size:.92rem}
.fl-body > span{font-size:.79rem; color:var(--ink-3); display:flex; align-items:center; gap:5px}
.fl-body svg{width:12px; height:12px; color:var(--ok)}
.fl-live{display:inline-flex; align-items:center; gap:5px; font-size:.76rem; color:var(--live);
  font-weight:700; margin-top:4px}
.fl-live svg{width:12px; height:12px; color:var(--live)}
.fl-next{display:block; font-size:.76rem; color:var(--ink-3); margin-top:4px}
.fl-acts{margin-left:auto; display:flex; align-items:center; gap:12px}

.towrite{display:grid; gap:10px; margin-bottom:22px}
.tw{display:flex; align-items:center; gap:13px; padding:13px; border:1px solid var(--line); border-radius:var(--r)}
.tw img{width:52px; height:52px; border-radius:var(--r-sm); object-fit:cover; background:var(--muted)}
.tw > div{flex:1}
.tw b{display:block; font-size:.88rem}
.tw span{font-size:.79rem; color:var(--ink-3)}
.myrev{display:grid; gap:12px}
.mr{display:flex; gap:13px; padding:13px 0; border-bottom:1px solid var(--line-2)}
.mr img{width:52px; height:52px; border-radius:var(--r-sm); object-fit:cover; background:var(--muted); flex:none}
.mr-b{flex:1}
.mr-b a{font-size:.88rem; font-weight:500; display:block; margin-bottom:3px}
.mr-b p{font-size:.85rem; color:var(--ink-2); margin:5px 0}
.rv-days{margin:22px 0 12px; font-size:.85rem; color:var(--ink-3)}
.pp-list{display:grid; gap:10px}
.pp{display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--line); border-radius:var(--r)}
.pp > svg{width:19px; height:19px; color:var(--ink-3); flex:none}
.pp b{display:block; font-size:.87rem}
.pp span{font-size:.79rem; color:var(--ink-3)}
.pp-fee{margin-left:auto; font-weight:700; font-size:.88rem}
.dev{display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line-2)}
.dev:last-child{border-bottom:0}
.dev > svg{width:18px; height:18px; color:var(--ink-3); flex:none}
.dev b{display:block; font-size:.87rem}
.dev span{font-size:.79rem; color:var(--ink-3)}
.dev .btn,.dev-cur{margin-left:auto; flex:none}
.dev-cur{font-size:.76rem; color:var(--ok); font-weight:600}

/* ------------------------------------------------------------ forms */
.form-grid{display:grid; gap:14px}
@media (min-width:640px){ .form-grid{grid-template-columns:1fr 1fr} .fg:not(.half){grid-column:1/-1} }
.fg label{display:block; font-size:.83rem; font-weight:600; margin-bottom:6px}
.fg label i{color:var(--brand); font-style:normal}
.hint{display:block; font-weight:400; font-size:.76rem; color:var(--ink-3); margin-top:2px}
.input{
  width:100%; height:44px; padding:0 13px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--panel); outline:none; font-size:.92rem;
}
.input:focus{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-050)}
textarea.input{height:auto; padding:11px 13px; resize:vertical}
select.input{cursor:pointer}
.input-grp{display:flex; align-items:center; border:1px solid var(--line); border-radius:var(--r-sm);
  overflow:hidden; background:var(--panel)}
.input-grp span{padding:0 12px; font-size:.88rem; color:var(--ink-3); background:var(--muted);
  height:44px; display:grid; place-items:center; flex:none}
.input-grp .input{border:0; border-radius:0}
.input-grp:focus-within{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-050)}
.otp{display:flex; gap:8px; justify-content:center; margin:18px 0}
.otp input{width:46px; height:56px; text-align:center; font-size:1.3rem; font-weight:700;
  border:1.5px solid var(--line); border-radius:var(--r-sm); background:var(--panel); outline:none}
.otp input:focus{border-color:var(--brand)}

.authbox{max-width:430px; margin:40px auto 20px; text-align:center}
.ab-ico{width:52px; height:52px; border-radius:var(--r); background:var(--brand-050); color:var(--brand);
  display:grid; place-items:center; margin:0 auto 18px}
.ab-ico svg{width:24px; height:24px}
.ab-lead{color:var(--ink-2); font-size:.9rem; margin-bottom:22px}
.authbox .form-grid{text-align:left}
.ab-alt{font-size:.82rem; color:var(--ink-3); margin-top:18px}
.ab-alt a{color:var(--brand); font-weight:600}
.ab-side{max-width:430px; margin:0 auto 46px}

/* ------------------------------------------------------------ misc */
.deal-hero,.coll-hero{margin:22px 0 18px}
.deal-hero{display:flex; align-items:flex-end; gap:18px; flex-wrap:wrap}
.deal-hero p{color:var(--ink-3); font-size:.9rem; margin-top:6px}
.countdown{margin-left:auto; display:flex; gap:4px; font-family:var(--ff-d); font-size:1.6rem; font-weight:700}
.countdown span{background:var(--ink); color:var(--page); padding:5px 10px; border-radius:var(--r-sm);
  font-variant-numeric:tabular-nums}
.coll-hero{position:relative; border-radius:var(--r); overflow:hidden}
.coll-hero img{width:100%; height:220px; object-fit:cover; background:var(--muted)}
.coll-copy{position:absolute; left:0; bottom:0; right:0; padding:36px 22px 20px; color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.75))}
.coll-copy h1{color:#fff}
.tier-table table{width:100%; border-collapse:collapse; font-size:.9rem}
.tier-table th,.tier-table td{padding:11px 14px; text-align:left; border-bottom:1px solid var(--line-2)}
.tier-table thead th{background:var(--panel-2); font-size:.8rem; color:var(--ink-3)}
.how-grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.how-c{padding:18px; border:1px solid var(--line); border-radius:var(--r); position:relative}
.how-n{position:absolute; top:14px; right:16px; font-family:var(--ff-d); font-size:1.6rem;
  color:var(--line); font-weight:700}
.how-c > svg{width:22px; height:22px; color:var(--brand); margin-bottom:10px}
.how-c b{display:block; margin-bottom:5px}
.how-c p{font-size:.84rem; color:var(--ink-2)}
.cmp-wrap{overflow-x:auto}
.cmp{width:100%; border-collapse:collapse; font-size:.87rem; min-width:640px}
.cmp th,.cmp td{padding:12px; border-bottom:1px solid var(--line-2); text-align:left; vertical-align:top}
.cmp thead th{width:230px}
.cmp thead img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--r-sm);
  background:var(--muted); margin-bottom:8px}
.cmp thead a{display:block; font-size:.86rem; font-weight:500; margin-bottom:6px}
.cmp tbody th{width:150px; color:var(--ink-3); font-weight:500}
.cmp tr.diff td{background:var(--brand-050)}
.cmp svg{width:15px; height:15px; vertical-align:-3px}
.info{margin-bottom:30px}
.info h2{margin-bottom:10px; font-size:1.15rem}
.info p{color:var(--ink-2); font-size:.9rem; margin-bottom:10px}
.faq details{border-bottom:1px solid var(--line-2); padding:12px 0}
.faq summary{font-weight:600; font-size:.9rem; cursor:pointer; list-style:none; display:flex; gap:9px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+"; color:var(--brand); font-weight:700; width:14px}
.faq details[open] summary::before{content:"\2212"}
.faq p{margin-top:8px; padding-left:23px; font-size:.87rem}
.help-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px}
.hc{padding:16px; border:1px solid var(--line); border-radius:var(--r); display:block}
.hc:hover{border-color:var(--brand)}
.hc svg{width:20px; height:20px; color:var(--brand); margin-bottom:9px}
.hc b{display:block; font-size:.88rem; margin-bottom:3px}
.contact-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px}
.ctc{display:flex; align-items:center; gap:11px; padding:14px; border:1px solid var(--line); border-radius:var(--r)}
.ctc svg{width:19px; height:19px; color:var(--brand); flex:none}
.ctc b{display:block; font-size:.87rem}
.ctc span{font-size:.79rem; color:var(--ink-3)}

/* ------------------------------------------------------------ footer */
.site-foot{background:var(--panel-2); border-top:1px solid var(--line); margin-top:50px; padding-top:36px}
.foot-top{display:grid; gap:26px; padding-bottom:28px}
@media (min-width:800px){ .foot-top{grid-template-columns:1.6fr repeat(4,1fr); gap:30px} }
.fbrand .logo{color:var(--ink); margin-bottom:12px}
.fbrand p{font-size:.84rem; color:var(--ink-3); max-width:38ch; margin-bottom:16px}
.app-cta{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.app-cta .tiny{color:var(--ink-3); flex-basis:100%}
.store-badge{display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border:1px solid var(--line);
  border-radius:var(--r-sm); font-size:.8rem; font-weight:600; background:var(--panel)}
.store-badge svg{width:15px; height:15px}
.fcol h4{font-size:.85rem; margin-bottom:11px}
.fcol a{display:block; padding:4px 0; font-size:.83rem; color:var(--ink-3)}
.fcol a:hover{color:var(--brand)}
.foot-mid{display:flex; gap:18px; padding-top:18px; padding-bottom:18px; border-top:1px solid var(--line); flex-wrap:wrap;
  align-items:center}
.trust{display:flex; gap:18px; flex-wrap:wrap; font-size:.8rem; color:var(--ink-2)}
.trust svg{width:15px; height:15px; color:var(--ok); vertical-align:-3px; margin-right:5px}
.pays{margin-left:auto; display:flex; gap:6px; flex-wrap:wrap}
.pay{font-size:.68rem; font-weight:700; padding:5px 9px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-xs); color:var(--ink-3)}
.foot-bot{display:flex; justify-content:space-between; gap:14px; padding-top:16px; padding-bottom:24px;
  border-top:1px solid var(--line); font-size:.78rem; color:var(--ink-3); flex-wrap:wrap}

/* ------------------------------------------------------------ mobile */
.only-mobile{display:none}
@media (max-width:899px){
  .only-mobile{display:inherit}
  .only-desk{display:none !important}
  .head-main{height:auto; min-height:60px; gap:9px; flex-wrap:wrap; padding-top:9px; padding-bottom:10px}
  .searchbar{order:5; flex-basis:100%; height:42px}
  .logo img{height:24px}
  body{padding-bottom:58px}
  .site-foot{margin-bottom:0}
  h1{font-size:1.4rem}
}
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:80; display:flex; background:var(--panel);
  border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom);
}
.tabbar a{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 0 7px;
  font-size:.66rem; color:var(--ink-3); position:relative}
.tabbar a:hover,.tabbar a:focus{color:var(--brand)}
.tabbar svg{width:21px; height:21px}
/* Live sits in the middle of the bar on a soft live-coloured pill — the
   negative margin keeps it the same height as the plain icons beside it. */
.tabbar a.tb-live,.tabbar a.tb-live.on{color:var(--live)}
.tb-pill{display:grid; place-items:center; padding:3px 12px; margin:-3px 0; border-radius:var(--r-pill);
  background:var(--live-bg); transition:background .15s, color .15s}
.tabbar .tb-live.on .tb-pill{background:var(--live); color:#fff}
.tb-dot{position:absolute; top:3px; right:calc(50% - 25px); width:9px; height:9px; border-radius:50%;
  background:var(--live); border:2px solid var(--panel); animation:liveDot 1.8s ease-out infinite}
.tb-badge{position:absolute; top:3px; right:calc(50% - 20px); min-width:16px; height:16px; padding:0 4px;
  background:var(--brand); color:#fff; border-radius:var(--r-pill); font-size:.62rem; font-weight:700;
  display:grid; place-items:center}

.scrim{position:fixed; inset:0; background:rgba(11,11,12,.5); opacity:0; pointer-events:none;
  transition:opacity .2s; z-index:85}
.scrim.on{opacity:1; pointer-events:auto}
.drawer{position:fixed; inset:0 auto 0 0; width:min(86vw,340px); background:var(--panel); z-index:90;
  transform:translateX(-100%); transition:transform .22s; overflow-y:auto; box-shadow:var(--sh-lg)}
.drawer.on{transform:none}
.dr-head{display:flex; align-items:center; justify-content:space-between; padding:14px 16px;
  border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--panel)}
.dr-body{padding:8px}
.dr-l1{display:flex; align-items:center; gap:11px; padding:13px 12px; border-radius:var(--r-sm);
  font-size:.9rem; font-weight:500}
.dr-l1:hover{background:var(--muted)}
.dr-l1 svg{width:18px; height:18px; color:var(--ink-3)}
.dr-l1 .dr-arr{margin-left:auto; width:15px; height:15px}
.dr-sub{padding:0 12px 10px 44px; display:none}
.dr-sub.on{display:block}
.dr-sub a{display:block; padding:7px 0; font-size:.85rem; color:var(--ink-2)}

/* ---- Toasts ------------------------------------------------------------
   Top of the screen, colour-coded by type, gone on their own after --t
   (hover pauses the clock, the cross ends it early). All CSS, so a flash
   message still appears and still leaves with JavaScript switched off. */
.toast-wrap{position:fixed; top:calc(14px + env(safe-area-inset-top, 0px)); left:50%;
  transform:translateX(-50%); z-index:220; width:min(460px, calc(100vw - 24px));
  display:flex; flex-direction:column; gap:10px; pointer-events:none}
.toast{--c:var(--ink); --t:4.5s; position:relative; overflow:hidden; pointer-events:auto;
  display:flex; align-items:flex-start; gap:11px; padding:11px 10px 13px 12px;
  background:var(--panel); color:var(--ink); border:1px solid var(--line); border-left:4px solid var(--c);
  border-radius:14px; box-shadow:0 14px 36px rgba(11,11,12,.18), 0 2px 6px rgba(11,11,12,.06);
  font-size:.88rem; line-height:1.45;
  animation:toastIn .34s cubic-bezier(.2,.9,.25,1), toastOut .32s ease-in var(--t) forwards}
.toast:hover,.toast:hover .t-bar,.toast:focus-within,.toast:focus-within .t-bar{animation-play-state:paused}
.toast.t-leaving{animation:toastOut .24s ease-in forwards !important; animation-play-state:running !important}
.t-ok{--c:var(--ok)}
.t-warn{--c:var(--warn); --t:6s}
.t-err{--c:var(--danger); --t:7.5s}
.t-info{--c:var(--ink-2)}
.t-ico{width:28px; height:28px; border-radius:50%; background:var(--c); color:#fff; display:grid;
  place-items:center; flex:none}
.t-ico svg{width:15px; height:15px}
.t-msg{flex:1; min-width:0; padding-top:4px; color:var(--ink)}
.t-msg a{color:var(--c); font-weight:700; text-decoration:underline; text-underline-offset:2px; white-space:nowrap}
.t-ok .t-msg a{color:var(--ok)}
.t-x{width:28px; height:28px; border-radius:50%; display:grid; place-items:center; color:var(--ink-3); flex:none}
.t-x:hover{background:var(--muted); color:var(--ink)}
.t-x svg{width:14px; height:14px}
.t-bar{position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--c); opacity:.35;
  transform-origin:left; animation:toastBar var(--t) linear forwards}
@keyframes toastIn{from{opacity:0; transform:translateY(-16px) scale(.97)}to{opacity:1; transform:none}}
@keyframes toastOut{to{opacity:0; transform:translateY(-12px) scale(.98); visibility:hidden}}
@keyframes toastBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes tin{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
@keyframes tin{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}

/* The tab bar is a phone affordance. It is declared after .only-mobile, so
   without this it would win the cascade and float over desktop pages. */
@media (min-width:900px){ .tabbar,.sticky-buy{display:none !important} }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
}

/* Demo-only affordance on the payment waiting screen: real builds reach
   these two pages from the Daraja callback, not from a link. Delete this
   rule and the .demo-jump markup when wiring the real STK push. */
.demo-jump{display:flex; gap:12px; justify-content:center; align-items:center; flex-wrap:wrap;
  margin-top:18px; font-size:.76rem; color:var(--ink-3)}
.demo-jump a{color:var(--brand); font-weight:600; text-decoration:underline}

/* ---- Sign-in pages --------------------------------------------------- */
.auth-page main{background:var(--bg)}
.auth-wrap{display:grid;grid-template-columns:minmax(0,26rem) minmax(0,20rem);
  gap:24px;justify-content:center;align-items:start;padding:36px 0 56px}
.auth-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px}
.auth-card h1{font-size:1.35rem;margin:0 0 6px}
.auth-icon{width:44px;height:44px;border-radius:var(--r);display:flex;align-items:center;
  justify-content:center;background:var(--brand-050);color:var(--brand);margin-bottom:14px}
.auth-icon svg{width:20px;height:20px}
.auth-aside{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px}
.auth-aside b{display:block;margin-bottom:10px}
.auth-alt{display:flex;gap:8px;flex-wrap:wrap;justify-content:space-between;margin-top:14px;
  padding-top:14px;border-top:1px solid var(--line-2)}

/* Six-box code entry. Without a width these collapse to nothing on mobile. */
.otp{display:flex;gap:8px;justify-content:space-between;margin:6px 0 16px}
.otp input{flex:1;min-width:0;height:54px;text-align:center;font-size:1.35rem;font-weight:600;
  font-family:var(--mono,ui-monospace,monospace);border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--panel);color:var(--text)}
.otp input:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}

@media (max-width:820px){
  .auth-wrap{grid-template-columns:minmax(0,1fr);padding:20px 0 40px}
  .auth-aside{order:2}
  .otp input{height:48px;font-size:1.15rem}
}
.fg-err{display:block;margin-top:4px;font-size:.78rem;color:var(--danger,#DC2626)}
.fg.has-err .input,.fg.has-err .input-group{border-color:var(--danger,#DC2626)}

/* =====================================================================
   Search box: scope picker, clear button, suggestion panel
   ===================================================================== */
.searchbar{overflow:visible}
.searchbar:focus-within{box-shadow:0 0 0 4px var(--brand-050)}
.searchbar > .sb-cat{border-radius:var(--r-pill) 0 0 var(--r-pill)}
.searchbar > .sb-go{border-radius:0 var(--r-pill) var(--r-pill) 0}
.sb-cat{position:relative; cursor:pointer; max-width:160px}
.sb-cat-t{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sb-cat select{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer;
  font-size:16px; border:0; appearance:none}
.sb-cat:focus-within{background:var(--muted)}
.sb-clear{width:34px; height:100%; display:grid; place-items:center; color:var(--ink-3); flex:none}
.sb-clear:hover{color:var(--ink)}
.sb-clear svg{width:16px; height:16px}
.sb-clear[hidden]{display:none}
.searchbar input::-webkit-search-cancel-button{display:none}

.suggest{padding:6px; max-height:min(72vh,620px); overflow-y:auto; overscroll-behavior:contain}
.suggest.loading{opacity:.7}
.sg-cols{display:grid; gap:4px}
@media (min-width:900px){
  .suggest{left:-2px; right:-2px}
  .sg-cols{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
  .sg-cols.sg-one{grid-template-columns:1fr}
  .sg-prods{border-left:1px solid var(--line-2); padding-left:6px}
}
.sg-col{min-width:0}
.sg{min-width:0}
.sg b{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink)}
.sg b small{display:block; font-size:.72rem; color:var(--ink-3); font-weight:400}
.sg mark{background:none; color:inherit; font-weight:700}
.sg em{font-style:normal; color:var(--brand); font-weight:600}
.sg .sg-q{font-weight:600}
.sg-cat{flex:none}
.sg-ico{width:30px; height:30px; border-radius:var(--r-xs); background:var(--brand-050);
  display:grid; place-items:center; flex:none}
.sg-ico svg{color:var(--brand) !important}
.sg .sg-av{width:30px; height:30px; border-radius:50%; background:var(--ink);
  color:var(--page); display:grid; place-items:center; font-size:.68rem; font-weight:700; flex:none; object-fit:cover}
.sg svg.sg-ok{display:inline; width:13px; height:13px; color:var(--ok); vertical-align:-2px}
.sg-p{align-items:center}
.sg.sg-p img{width:46px; height:46px; object-fit:contain; background:#fff; border:1px solid var(--line-2); flex:none}
.sg-pb{display:flex; flex-direction:column; min-width:0; flex:1}
.sg-pb b{white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  line-height:1.3; font-size:.86rem}
.sg-pm{display:flex; align-items:baseline; gap:8px; font-size:.78rem; margin-top:2px; flex-wrap:wrap}
.sg-pm i{font-style:normal}
.sg-price{font-weight:700; color:var(--ink)}
.sg-pm s{font-size:.74rem}
.sg-rate{color:var(--ink-3)}
.sg-out{color:var(--warn); font-weight:600}
.sg-chips{display:flex; flex-wrap:wrap; gap:6px; padding:4px 6px 8px}
.sg.sg-chip{border:1px solid var(--line); border-radius:var(--r-pill); padding:7px 12px; gap:7px}
.sg-chip b{font-size:.82rem}
.sg-chip svg{color:var(--brand) !important}
.sg.sg-all{margin-top:4px; border-top:1px solid var(--line-2); border-radius:0 0 var(--r-sm) var(--r-sm)}
.sg-all b{color:var(--brand); font-weight:600}
.sg-all svg{color:var(--brand) !important}
.sg-all svg:last-child{margin-left:auto}
.sg-none{display:flex; gap:12px; padding:14px 12px 8px; align-items:flex-start}
.sg-none > svg{width:20px; height:20px; color:var(--ink-3); flex:none}
.sg-none b{display:block; font-size:.9rem}
.sg-none span{font-size:.8rem; color:var(--ink-3)}
.sg-tip{font-size:.8rem; color:var(--ink-3); padding:0 10px 10px}
@media (max-width:899px){
  .sb-cat{max-width:92px; padding:0 8px 0 12px}
}

/* =====================================================================
   Horizontal shelves: arrows on the shelf itself
   ===================================================================== */
.rail-all{display:inline-flex; align-items:center; gap:4px}
.rail-all svg{width:15px; height:15px}
.rail-body{position:relative}
.rail-arrow{
  position:absolute; top:calc(50% - 26px); width:44px; height:44px; border-radius:50%;
  background:var(--panel); color:var(--ink); border:1px solid var(--line); box-shadow:var(--sh-lg);
  display:grid; place-items:center; z-index:3; opacity:0; pointer-events:none;
  transition:opacity .18s, transform .18s, background .15s;
}
.rail-arrow svg{width:20px; height:20px}
.rail-arrow:hover{background:var(--ink); color:var(--page); border-color:var(--ink)}
.rl-prev{left:-12px; transform:translateX(8px)}
.rl-next{right:-12px; transform:translateX(-8px)}
/* Mouse: the arrows appear while the shelf is hovered, and only toward the
   side that has more to show. */
@media (hover:hover) and (pointer:fine){
  .rail-body:hover.can-prev .rl-prev,
  .rail-body:hover.can-next .rl-next,
  .rail-body:focus-within.can-prev .rl-prev,
  .rail-body:focus-within.can-next .rl-next{opacity:1; pointer-events:auto; transform:none}
}
/* Touch: no hover, so the "more this way" cue is always on while there is
   more — a soft edge fade, a smaller tappable arrow and a progress track. */
@media (hover:none), (pointer:coarse){
  .rail-arrow{width:34px; height:34px; top:calc(50% - 20px)}
  .rail-arrow svg{width:17px; height:17px}
  .rl-prev{left:4px} .rl-next{right:4px}
  .rail-body.can-prev .rl-prev,.rail-body.can-next .rl-next{opacity:.96; pointer-events:auto; transform:none}
}
.rail-body::before,.rail-body::after{
  content:""; position:absolute; top:0; bottom:8px; width:32px; z-index:2; pointer-events:none;
  opacity:0; transition:opacity .18s;
}
.rail-body::before{left:0; background:linear-gradient(90deg,var(--page),transparent)}
.rail-body::after{right:0; background:linear-gradient(270deg,var(--page),transparent)}
.rail-body.can-prev::before,.rail-body.can-next::after{opacity:1}
.rail-prog{display:none}
@media (hover:none), (pointer:coarse){
  .rail-body.scrolls + .rail-prog{display:block; height:3px; margin:4px auto 0; width:72px; border-radius:2px;
    background:var(--line); overflow:hidden}
  .rail-prog i{display:block; height:100%; background:var(--ink-2); border-radius:2px;
    transition:transform .08s linear; transform-origin:left}
}
.lv-rail{scrollbar-width:none}
.lv-rail::-webkit-scrollbar{display:none}

/* Sponsored and featured shelves */
.spon{display:inline-flex; align-items:center; gap:5px; font-size:.66rem; font-weight:700;
  color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em}
.spon svg{width:12px; height:12px}
.rail-spon{background:var(--panel-2); border-radius:var(--r); padding:16px 14px 12px}
.rail-spon .rail-head h2::after{content:"Ad"; margin-left:8px; font:700 .62rem/1 var(--ff);
  letter-spacing:.06em; padding:3px 6px; border-radius:4px; background:var(--line); color:var(--ink-2);
  vertical-align:4px}
.rail-spon .rail-body::before{background:linear-gradient(90deg,var(--panel-2),transparent)}
.rail-spon .rail-body::after{background:linear-gradient(270deg,var(--panel-2),transparent)}
.rail-spon .rl-prev{left:-6px} .rail-spon .rl-next{right:-6px}
.rail-feat{border-bottom:1px solid var(--line-2); padding-bottom:22px}

/* =====================================================================
   PDP gallery
   ===================================================================== */
.gal{display:grid; gap:10px}
@media (min-width:1000px){
  /* Thumbnails down the side on a wide screen: the main image stays large
     without making the page taller. */
  .gal.gal-many{grid-template-columns:68px minmax(0,1fr); align-items:start}
  .gal.gal-many .gal-thumbs{order:-1; flex-direction:column; max-height:min(620px,calc(100vh - 170px));
    overflow-y:auto; overflow-x:hidden; margin:0; padding:0 2px 0 0; scrollbar-width:none}
  .gal.gal-many .gt{width:64px; height:64px}
}
.gal-main{position:relative; border-radius:var(--r); overflow:hidden; background:#fff;
  border:1px solid var(--line-2)}
.gal-track{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  overscroll-behavior-x:contain; outline:none}
.gal-track::-webkit-scrollbar{display:none}
.gal-slide{flex:0 0 100%; scroll-snap-align:center; scroll-snap-stop:always; aspect-ratio:1;
  display:grid; place-items:center; overflow:hidden; position:relative; background:#fff; margin:0}
.gal-slide img{width:100%; height:100%; object-fit:contain; transition:transform .12s ease-out;
  user-select:none; -webkit-user-drag:none}
@media (hover:hover) and (pointer:fine){
  .gal-slide{cursor:zoom-in}
  .gal-slide.lens img{transform:scale(2.2); transition:none}
}
.gal-badges{position:absolute; top:12px; left:12px; display:flex; gap:6px; flex-wrap:wrap; z-index:2;
  pointer-events:none}
.gal-arrow{position:absolute; top:calc(50% - 22px); width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.96); color:#0B0B0C; box-shadow:var(--sh); display:grid; place-items:center;
  z-index:2; opacity:0; transition:opacity .18s}
.gal-arrow svg{width:20px; height:20px}
.gal-prev{left:12px} .gal-next{right:12px}
.gal-main:hover .gal-arrow,.gal-arrow:focus-visible{opacity:1}
.gal-arrow[disabled]{opacity:0 !important; pointer-events:none}
@media (hover:none), (pointer:coarse){ .gal-arrow{display:none} }
.gal-count{position:absolute; top:12px; right:12px; z-index:2; font-size:.74rem; font-weight:600;
  color:#fff; background:rgba(11,11,12,.62); padding:3px 9px; border-radius:var(--r-pill);
  font-variant-numeric:tabular-nums}
.gal-dots{position:absolute; left:0; right:0; bottom:14px; display:flex; justify-content:center; gap:6px;
  z-index:2; pointer-events:none}
.gal-dots i{width:7px; height:7px; border-radius:var(--r-pill); background:rgba(11,11,12,.22);
  transition:width .2s, background .2s}
.gal-dots i.on{width:22px; background:var(--brand)}
.gal-zoom{position:absolute; right:12px; bottom:12px; width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.96); color:#0B0B0C; display:grid; place-items:center; box-shadow:var(--sh);
  z-index:3}
.gal-zoom:hover{background:#0B0B0C; color:#fff}
.gal-zoom svg{width:18px; height:18px}
.gal-zoom[hidden]{display:none}
.gal-thumbs{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none}
.gal-thumbs::-webkit-scrollbar{display:none}
.gt{width:68px; height:68px; border-radius:var(--r-sm); overflow:hidden; border:2px solid var(--line-2);
  background:#fff; flex:none; transition:border-color .15s, opacity .15s; opacity:.7}
.gt:hover{opacity:1}
.gt img{width:100%; height:100%; object-fit:contain}
.gt.on{border-color:var(--brand); opacity:1}
.gt-video{opacity:1; border-color:var(--ink)}

/* Full-screen zoom viewer, built by shop.js from the slides. */
.zv{position:fixed; inset:0; z-index:200; background:#0B0B0C; display:flex; flex-direction:column;
  color:#fff; animation:tin .18s ease}
.zv[hidden]{display:none}
.zv-top{display:flex; align-items:center; gap:10px; padding:10px 12px; flex:none}
.zv-n{font-size:.85rem; font-variant-numeric:tabular-nums; opacity:.85}
.zv-hint{font-size:.78rem; opacity:.6; margin-right:auto; margin-left:6px}
.zv-btn{width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:rgba(255,255,255,.1)}
.zv-btn:hover{background:rgba(255,255,255,.22)}
.zv-btn svg{width:20px; height:20px}
.zv-body{position:relative; flex:1; min-height:0; display:flex}
.zv-track{flex:1; display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none}
.zv-track::-webkit-scrollbar{display:none}
.zv-slide{flex:0 0 100%; scroll-snap-align:center; overflow:hidden; display:grid; place-items:center;
  cursor:zoom-in; overscroll-behavior:contain; scrollbar-width:none; touch-action:pan-x pan-y}
.zv-slide::-webkit-scrollbar{display:none}
.zv-slide img{max-width:100%; max-height:100%; object-fit:contain; user-select:none; -webkit-user-drag:none}
.zv-slide.zoomed{display:block; overflow:auto; cursor:zoom-out}
.zv-slide.zoomed img{max-width:none; max-height:none; height:auto}
.zv-nav{position:absolute; top:50%; margin-top:-24px; width:48px; height:48px; z-index:2}
.zv-prev{left:14px} .zv-next{right:14px}
@media (hover:none), (pointer:coarse){ .zv-nav{display:none} .zv-hint{display:none} }
.zv-thumbs{display:flex; gap:8px; justify-content:center; padding:10px 12px 16px; overflow-x:auto; flex:none}
.zv-thumbs button{width:52px; height:52px; border-radius:8px; overflow:hidden; border:2px solid transparent;
  opacity:.5; flex:none; background:#fff}
.zv-thumbs button.on{border-color:var(--brand); opacity:1}
.zv-thumbs img{width:100%; height:100%; object-fit:contain}
body.zv-open{overflow:hidden}

/* =====================================================================
   PDP: offers, description, bundle, lower shelves
   ===================================================================== */
.offers{display:grid; gap:8px; margin:14px 0 4px}
.offer{display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:var(--r-sm);
  background:var(--ok-bg); border:1px dashed var(--ok)}
.offer > svg{width:19px; height:19px; color:var(--ok); flex:none}
.offer > div{flex:1; min-width:0}
.offer b{display:block; font-size:.86rem; color:var(--ok)}
.offer span{font-size:.76rem; color:var(--ink-2)}
.offer-code{display:inline-flex; align-items:center; gap:6px; font:700 .8rem/1 ui-monospace,monospace;
  letter-spacing:.04em; padding:8px 10px; border-radius:var(--r-xs); background:var(--panel);
  border:1px solid var(--line); flex:none; color:var(--ink)}
.offer-code:hover{border-color:var(--ok)}
.offer-code svg{width:13px; height:13px}
.pdp-buy h1{overflow-wrap:anywhere}
.pdp-desc{color:var(--ink-2); max-width:78ch; font-size:.93rem}
.pdp-desc p{margin-bottom:10px}
.pdp-desc ul,.pdp-desc ol{margin:6px 0 12px 20px; display:grid; gap:4px}
.pdp-desc h3,.pdp-desc h4{color:var(--ink); margin:14px 0 6px}
.pdp-more{margin-top:6px}

.fbt{margin:26px 0 34px; padding:18px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--panel)}
.fbt .rail-head{margin-bottom:14px}
.fbt-form{display:grid; gap:18px}
@media (min-width:1000px){ .fbt-form{grid-template-columns:minmax(0,auto) 270px; justify-content:start; column-gap:36px; align-items:center} }
.fbt-items{display:flex; align-items:stretch; gap:10px; overflow-x:auto; padding:2px 2px 6px;
  scrollbar-width:thin}
.fbt-item{position:relative; display:flex; flex-direction:column; gap:8px; flex:0 0 170px;
  padding:10px; border:1.5px solid var(--line); border-radius:var(--r); background:var(--panel);
  cursor:pointer; transition:border-color .15s, opacity .15s}
.fbt-item.is-this{cursor:default; border-color:var(--ink)}
.fbt-item input{position:absolute; opacity:0; pointer-events:none}
.fbt-check{position:absolute; top:8px; right:8px; width:24px; height:24px; border-radius:7px;
  background:var(--brand); color:#fff; display:grid; place-items:center; z-index:1; transition:.15s;
  border:1.5px solid var(--brand)}
.fbt-check svg{width:14px; height:14px; stroke-width:2.6}
.fbt-item input:focus-visible ~ .fbt-check{outline:2px solid var(--brand); outline-offset:2px}
.fbt-item:has(input:checked){border-color:var(--brand)}
.fbt-item:has(input:not(:checked)){opacity:.55}
.fbt-item:has(input:not(:checked)) .fbt-check{background:var(--panel); color:transparent; border-color:var(--ink-3)}
.fbt-img{display:block; aspect-ratio:1; border-radius:var(--r-sm); overflow:hidden; background:#fff}
.fbt-img img{width:100%; height:100%; object-fit:contain}
.fbt-b{display:flex; flex-direction:column; gap:3px; min-width:0}
.fbt-b b,.fbt-b a{font-size:.82rem; font-weight:500; line-height:1.35; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.fbt-b a:hover{color:var(--brand)}
.fbt-tag{font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3)}
.fbt-p{font-weight:700; font-family:var(--ff-d); font-size:.95rem}
.fbt-plus{align-self:center; flex:none; width:28px; height:28px; border-radius:50%; background:var(--muted);
  display:grid; place-items:center; color:var(--ink-2)}
.fbt-plus svg{width:15px; height:15px; stroke-width:2.4}
.fbt-sum{display:grid; gap:8px; padding:14px; background:var(--panel-2); border-radius:var(--r)}
.fbt-lbl{font-size:.84rem; color:var(--ink-2)}
.fbt-total{font-family:var(--ff-d); font-size:1.5rem; letter-spacing:-.02em}
.fbt-sum .btn{width:100%}
@media (max-width:640px){
  .fbt{padding:14px}
  .fbt-items{flex-direction:column; overflow:visible}
  .fbt-item{flex:none; flex-direction:row; align-items:center; padding:8px 40px 8px 8px}
  .fbt-item.is-this{padding-right:8px}
  .fbt-img{width:64px; flex:none}
  .fbt-plus{width:24px; height:24px; margin:-4px 0}
}

/* =====================================================================
   Category tiles (browse page) and the drawer's department list
   ===================================================================== */
.ctiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:10px}
@media (min-width:700px){ .ctiles{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px} }
.ctiles-top{margin-bottom:14px}
.ctile{display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px;
  padding:10px 8px 12px; border:1px solid var(--line); border-radius:var(--r); background:var(--panel);
  transition:border-color .15s, transform .15s, box-shadow .15s; min-width:0}
.ctile:hover{border-color:var(--brand); transform:translateY(-2px); box-shadow:var(--sh)}
.ctile-img{position:relative; width:100%; aspect-ratio:1; border-radius:var(--r-sm); overflow:hidden;
  background:var(--brand-050); display:grid; place-items:center}
.ctile-img svg{width:34%; height:34%; color:var(--brand)}
.ctile-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#fff;
  padding:6%}
.ctile b{font-size:.84rem; font-weight:600; line-height:1.3; overflow-wrap:anywhere}
.ctile-n{font-size:.72rem; color:var(--ink-3)}
.ctile-l1 b{font-size:.9rem}
/* The count sits on the tile's bottom edge, so a name that wraps to two
   lines does not knock it out of line with its neighbours. */
.ctile-n{margin-top:auto}

/* Home page: up to eight departments, never a ragged last row or a row of
   empty slots. index.php sets --cols (how many), --half (two rows) and
   --narrow (--half, at most four).
   Phones get four small tiles a row; tablets two even rows; wide screens
   one row across the full width, with the pictures kept from growing tall. */
.ctiles-home{grid-template-columns:repeat(var(--narrow), minmax(0, 1fr)); gap:8px}
.ctiles-home .ctile{padding:8px 5px 10px; gap:5px}
.ctiles-home .ctile b{font-size:.74rem; hyphens:auto; overflow-wrap:normal; word-break:normal}
.ctiles-home .ctile-n{font-size:.66rem}
@media (min-width:560px){
  .ctiles-home{grid-template-columns:repeat(var(--half), minmax(0, 1fr)); gap:14px}
  .ctiles-home .ctile{padding:10px 8px 12px; gap:6px}
  .ctiles-home .ctile b{font-size:.9rem}
  .ctiles-home .ctile-n{font-size:.72rem}
}
@media (min-width:1100px){
  .ctiles-home{grid-template-columns:repeat(var(--cols), minmax(0, 1fr))}
  .ctiles-home .ctile-img{aspect-ratio:4 / 3; max-height:190px}
}

.dr-l1.dr-cat{padding:8px 10px}
.dr-thumb{position:relative; width:40px; height:40px; border-radius:var(--r-sm); overflow:hidden;
  background:var(--brand-050); display:grid; place-items:center; flex:none}
.dr-l1 .dr-thumb svg{width:19px; height:19px; color:var(--brand)}
.dr-thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#fff; padding:3px}
.dr-name{flex:1; min-width:0}
.dr-l1 .dr-go{margin-left:auto; width:15px; height:15px}
.dr-all{color:var(--brand); font-weight:600}
.dr-l1.dr-all svg{color:var(--brand)}

/* Shopfront logo image */
.sf-logo-img{background:var(--panel); overflow:hidden; padding:0}
.sf-logo-img img{width:100%; height:100%; object-fit:cover}

@media (max-width:899px){
  .promo-strip .wrap{height:auto; min-height:32px; padding-top:6px; padding-bottom:6px; text-align:center;
    flex-wrap:wrap; line-height:1.35; column-gap:5px; row-gap:0}
  .pdp-media{margin:0 -16px}
  .gal-main{border-radius:0; border-left:0; border-right:0}
  .gal-thumbs{padding:0 16px 4px}
}

/* =====================================================================
   Compare
   ===================================================================== */
.cmp-how{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); margin-bottom:26px}
/* Fixed-width columns: one or two products stay card-sized instead of
   stretching across the page, and the table scrolls sideways on a phone. */
.cmp{table-layout:fixed; width:auto; min-width:0}
.cmp thead th{vertical-align:top; width:230px}
.cmp thead th:first-child,.cmp tbody th{width:150px}
.cmp thead th:first-child,.cmp tbody th{position:sticky; left:0; z-index:2; background:var(--page)}
@media (max-width:640px){
  .cmp thead th{width:170px}
  .cmp thead th:first-child,.cmp tbody th{width:96px; font-size:.8rem}
  .cmp th,.cmp td{padding:10px 8px}
}
.cmp thead img{object-fit:contain; background:#fff; border:1px solid var(--line-2)}
.cmp-card{position:relative; display:flex; flex-direction:column; gap:6px}
.cmp-card form{margin-top:auto}
.cmp-card .btn-add{width:100%}
.cmp-x{position:absolute; top:6px; right:6px; width:30px; height:30px; border-radius:50%;
  background:var(--panel); border:1px solid var(--line); display:grid !important; place-items:center;
  color:var(--ink-2); z-index:1; box-shadow:var(--sh-sm); margin:0 !important}
.cmp-x:hover{background:var(--danger); border-color:var(--danger); color:#fff}
.cmp-x svg{width:14px; height:14px}
.cmp td.cmp-slot,.cmp th.cmp-slot{background:var(--panel-2)}
.cmp tr.diff td.cmp-slot{background:var(--panel-2)}
.cmp-add{display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  aspect-ratio:1; border:2px dashed var(--line); border-radius:var(--r-sm); color:var(--ink-2);
  text-align:center; padding:12px; transition:border-color .15s, color .15s}
.cmp-add:hover{border-color:var(--brand); color:var(--brand)}
.cmp-add span{width:44px; height:44px; border-radius:50%; background:var(--brand-050); color:var(--brand);
  display:grid; place-items:center}
.cmp-add span svg{width:20px; height:20px; stroke-width:2.2}
.cmp-add b{font-size:.88rem}
.cmp-add small{font-size:.74rem; color:var(--ink-3); font-weight:400}
.cmp-wrap + .note{align-items:center}
.cmp-share{margin-left:auto; flex:none}

.cmp-pick{margin:30px 0 10px; padding:18px; border:1px solid var(--line); border-radius:var(--r);
  scroll-margin-top:130px}
.cmp-find{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px}
.cmp-find .input-grp{flex:1; min-width:220px}
.cmp-find .input-grp span svg{width:16px; height:16px}
.cmp-cands{display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr))}
.cmp-cand{display:flex; align-items:center; gap:12px; padding:10px; border:1px solid var(--line);
  border-radius:var(--r); background:var(--panel)}
.cmp-cand:hover{border-color:var(--ink-3)}
.cmp-cand-img{width:64px; height:64px; flex:none; border-radius:var(--r-sm); overflow:hidden; background:#fff;
  border:1px solid var(--line-2)}
.cmp-cand-img img{width:100%; height:100%; object-fit:contain}
.cmp-cand-b{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.cmp-cand-b a{font-size:.85rem; font-weight:500; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden}
.cmp-cand-b a:hover{color:var(--brand)}
.cmp-cand-b b{font-size:.9rem; white-space:nowrap}
.cmp-cand-add{flex:none; height:34px; padding:0 12px; font-size:.8rem}
.btn.is-on{color:var(--ok)}

/* =====================================================================
   Category page: subcategory row
   One swipeable row of compact chips, so products start above the fold.
   Arrows, edge fades and the progress track come from the shelf rules
   (.rail-body / .rail-arrow / .rail-prog).
   ===================================================================== */
.sub-row{margin:4px 0 18px}
.hscroll{display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none;
  overscroll-behavior-x:contain; padding:2px 2px 6px}
.hscroll::-webkit-scrollbar{display:none}
.sub-chip{flex:0 0 auto; width:104px; scroll-snap-align:start; display:flex; flex-direction:column;
  align-items:center; gap:4px; text-align:center; padding:8px 6px 10px; border:1px solid var(--line);
  border-radius:var(--r); background:var(--panel); transition:border-color .15s, transform .15s}
.sub-chip:hover{border-color:var(--brand); transform:translateY(-2px)}
.sub-chip-img{position:relative; width:64px; height:64px; border-radius:50%; overflow:hidden;
  background:var(--brand-050); display:grid; place-items:center; flex:none; margin-bottom:2px}
.sub-chip-img svg{width:26px; height:26px; color:var(--brand)}
.sub-chip-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#fff;
  padding:4px}
.sub-chip b{font-size:.8rem; font-weight:600; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere}
.sub-chip span{font-size:.7rem; color:var(--ink-3)}
.sub-row .rail-arrow{top:calc(50% - 22px)}
.sub-row .rl-prev{left:-10px} .sub-row .rl-next{right:-10px}
@media (min-width:900px){
  .sub-chip{width:132px; padding:10px 8px 12px}
  .sub-chip-img{width:80px; height:80px}
}
@media (hover:none), (pointer:coarse){
  .sub-row .rl-prev{left:2px} .sub-row .rl-next{right:2px}
  .sub-row .rail-arrow{width:30px; height:30px; top:calc(50% - 17px)}
}

/* Category header: compact on a phone so the first products are in view. */
@media (max-width:899px){
  .cat-hero{margin:14px 0 10px; gap:6px}
  .cat-hero h1{font-size:1.3rem}
  .cat-hero p{font-size:.82rem; margin-top:2px}
  .cat-hero-tags{display:none}
  .only-desk-flex{display:none !important}
  .browse{gap:12px}
  /* Filter, count and sort on one line rather than two. */
  .res-bar{gap:8px; margin-bottom:12px}
  .res-bar #openF{padding:0 10px; flex:none}
  .res-count{white-space:nowrap}
  .sortby label{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .sortby select{max-width:156px; height:34px; font-size:.8rem}
  .res-bar .applied{order:5; flex-basis:100%; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none}
  .res-bar .apl{flex:none}
}

/* =====================================================================
   Full width: wide screens get more columns, not bigger cards
   ===================================================================== */
@media (min-width:1500px){
  .rail-track{grid-auto-columns:calc((100% - 6 * 16px) / 7)}
  .pgrid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
}
@media (min-width:1850px){ .rail-track{grid-auto-columns:calc((100% - 7 * 16px) / 8)} }
@media (min-width:1600px){ .pdp{grid-template-columns:minmax(0,720px) minmax(0,1fr); gap:56px} }
.pdp-lower .pdp-sec-b p,.pdp-desc{max-width:90ch}

/* Headings with a small leading icon */
.h-ico{width:20px !important; height:20px !important; color:var(--brand); display:inline-block !important;
  vertical-align:-3px; margin-right:6px}
.eyebrow.eb-brand{color:var(--brand); background:var(--brand-050)}

/* =====================================================================
   Search: the scope picker on the left of the bar
   ===================================================================== */
.searchbar > .sb-cat{
  margin:4px; height:calc(100% - 8px); padding:0 12px 0 12px; gap:6px;
  background:var(--muted); border:0; border-radius:var(--r-pill);
  font-size:.82rem; font-weight:600; color:var(--ink); transition:background .15s;
}
.searchbar > .sb-cat:hover,.searchbar > .sb-cat:focus-within{background:var(--line)}
.searchbar > .sb-cat::before{
  content:""; width:15px; height:15px; flex:none; opacity:.75;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.searchbar > .sb-cat > svg{width:12px; height:12px; opacity:.6}
.searchbar input{padding:0 12px}
@media (max-width:899px){
  .searchbar > .sb-cat{padding:0 9px; max-width:104px}
  .searchbar > .sb-cat::before{display:none}
}

/* =====================================================================
   One-line value props: hero, footer, summaries
   ===================================================================== */
.trust span,.sm-trust span,.hero-trust li,.pdp-deliver .dl-row b{white-space:nowrap}
.trust span,.sm-trust span{display:inline-flex; align-items:center; gap:6px}
.trust svg,.sm-trust svg{margin-right:0 !important; vertical-align:0 !important; width:15px; height:15px}
.hero-trust{list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin-top:4px}
.hero-trust li{display:inline-flex; align-items:center; gap:7px; padding:5px 12px 5px 5px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-pill);
  font-size:.8rem; font-weight:500; color:var(--ink-2)}
.ht-ico{width:24px; height:24px; border-radius:50%; background:var(--ok-bg); color:var(--ok);
  display:grid; place-items:center; flex:none}
.ht-ico svg{width:14px !important; height:14px !important; color:var(--ok) !important; vertical-align:0 !important}

/* Compact hero, so "Recommended for you" is above the fold */
.hero{padding:22px 0 24px}
.hero-in{gap:22px}
.hero h1{font-size:clamp(1.55rem,3.1vw,2.45rem); margin:10px 0 8px}
.hero-copy p{font-size:.95rem}
.hero-cta{margin:16px 0 14px}
.hero-lv img{aspect-ratio:16/8; max-height:300px}
/* Banner + collection tiles: one, two or three side by side as the column
   widens, all the same height, so none is stretched into a letterbox. */
.hero-tiles{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:14px}
.hero-tiles .hero-lv img{aspect-ratio:auto; height:clamp(240px,20vw,300px); max-height:none}
.hero-tiles .hero-lv:nth-child(n+2){display:none}
@media (min-width:1280px){ .hero-tiles .hero-lv:nth-child(2){display:block} }
@media (min-width:1680px){ .hero-tiles .hero-lv:nth-child(3){display:block} }
.hero-tiles .hlv-body b{overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.hero-tiles .hlv-body span{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
@media (min-width:900px){ .hero-in{grid-template-columns:1.1fr .9fr} }
@media (max-width:899px){
  .hero{padding:14px 0 10px}
  .hero-in > div:last-child{display:none}
  .hero-copy p{display:none}
  .hero h1{font-size:1.35rem; margin:8px 0 4px}
  .hero-cta{margin:10px 0 10px}
  .hero-cta .btn-tall{height:40px; padding:0 16px; font-size:.86rem}
  .hero-trust{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 calc(-1 * var(--gutter));
    padding:0 var(--gutter)}
  .hero-trust::-webkit-scrollbar{display:none}
}
.rail-fy{margin-top:22px}
.rail-fy .rail-head h2::before{content:""; display:inline-block; width:10px; height:10px; border-radius:50%;
  background:var(--brand); margin-right:9px; vertical-align:2px; box-shadow:0 0 0 4px var(--brand-050)}

/* Notifications and other data rows: the leading icon was unsized */
.dr > svg{width:18px; height:18px; color:var(--ink-3)}
.dr > div{flex:1; min-width:0}
.dr > div > span{display:block}

/* =====================================================================
   Product cards: video badge
   ===================================================================== */
.pb-video{background:var(--live); color:#fff}
.pb-video svg{width:10px; height:10px; fill:currentColor}

/* PDP: video slides and thumbs */
/* The video is pinned to the slide rather than sized by it: left to its
   intrinsic size, a 2160x4096 upload rendered at full size and the slide
   showed only a crop of it, controls and all. */
.gal-vslide{display:block; background:#000; cursor:default}
.gal-vslide video{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000}
.gal-vfeed{position:absolute; left:12px; top:12px; z-index:3; display:inline-flex; align-items:center; gap:6px;
  font-size:.76rem; font-weight:600; color:#fff; background:rgba(11,11,12,.6); padding:6px 11px;
  border-radius:var(--r-pill)}
.gal-vfeed svg{width:15px; height:15px}
.gal-vfeed:hover{background:var(--brand)}
.gt-vid{position:relative}
.gt-play{position:absolute; inset:0; display:grid; place-items:center; background:rgba(11,11,12,.35); color:#fff}
.gt-play svg{width:18px; height:18px; fill:#fff}
.zv-slide.zv-vslide{display:flex; align-items:center; justify-content:center; cursor:default}
.zv-vslide video{width:100%; height:100%; object-fit:contain}

/* =====================================================================
   Video cards (home shelf)
   ===================================================================== */
.vtrack{gap:14px}
.vcard{position:relative; flex:0 0 auto; width:clamp(180px, 42vw, 230px); scroll-snap-align:start;
  border-radius:var(--r); overflow:hidden; background:#111; box-shadow:var(--sh-sm); isolation:isolate}
@media (min-width:1500px){ .vcard{width:250px} }
.vc-media{position:relative; display:block; aspect-ratio:9/16; overflow:hidden; color:#fff}
.vc-bg{position:absolute; inset:-20px; background-size:cover; background-position:center;
  filter:blur(22px) saturate(1.1); transform:scale(1.1); opacity:.9}
.vc-still{position:absolute; left:8%; right:8%; top:18%; width:84%; aspect-ratio:1; height:auto;
  object-fit:contain; border-radius:12px; background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.35);
  transition:opacity .3s}
.vc-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0;
  transition:opacity .35s}
.vcard.is-playing .vc-video{opacity:1}
.vcard.is-playing .vc-still{opacity:0}
.vc-shade{position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.45) 0,transparent 24%,
  transparent 55%,rgba(0,0,0,.55) 100%); pointer-events:none}
.vc-top{position:absolute; left:10px; right:10px; top:10px; display:flex; align-items:center; gap:7px; z-index:2}
.vc-av{position:relative; width:28px; height:28px; border-radius:50%; background:var(--brand); flex:none;
  display:grid; place-items:center; overflow:hidden; border:2px solid #fff}
.vc-av img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.vc-av i{font-style:normal; font-size:.6rem; font-weight:700; color:#fff}
.vc-seller{font-size:.76rem; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; text-shadow:0 1px 3px rgba(0,0,0,.5); display:flex; align-items:center; gap:3px}
.vc-seller svg{width:12px; height:12px; color:#4ADE80}
.vc-plays{margin-left:auto; display:inline-flex; align-items:center; gap:3px; font-size:.7rem; font-weight:600;
  background:rgba(0,0,0,.45); padding:2px 7px; border-radius:var(--r-pill); flex:none}
.vc-plays svg{width:9px; height:9px; fill:#fff}
.vc-play{position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); width:52px; height:52px;
  border-radius:50%; background:rgba(255,255,255,.92); color:var(--ink); display:grid; place-items:center;
  box-shadow:var(--sh-lg); transition:opacity .25s, transform .25s; z-index:2}
.vc-play svg{width:22px; height:22px; margin-left:3px; fill:currentColor}
.vcard.is-playing .vc-play{opacity:0; transform:translate(-50%,-50%) scale(.8)}
.vc-media:hover .vc-play{transform:translate(-50%,-50%) scale(1.06)}
/* The floating product: always on the video, one tap to the basket. */
.vc-prod{position:absolute; left:8px; right:8px; bottom:8px; z-index:3; display:flex; align-items:center; gap:8px;
  padding:6px; background:rgba(255,255,255,.96); border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,.25);
  color:#0B0B0C; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.vc-thumb{width:40px; height:40px; border-radius:8px; flex:none; background:#fff;
  border:1px solid #EFF0F3}
.vc-thumb img{border-radius:7px}
.vc-thumb img{width:100%; height:100%; object-fit:contain}
.vc-info{flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25}
.vc-info b{font-size:.74rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.vc-price{font-size:.8rem; font-weight:700; font-family:var(--ff-d); white-space:nowrap}
.vc-thumb{position:relative}
.vc-off{position:absolute; left:-4px; top:-6px; font-style:normal; font-size:.58rem; font-weight:700; color:#fff;
  background:var(--brand); padding:1px 4px; border-radius:var(--r-pill); font-family:var(--ff)}
.vc-price i{font-style:normal; font-size:.64rem; font-weight:700; color:#fff; background:var(--brand);
  padding:1px 5px; border-radius:var(--r-pill); font-family:var(--ff)}
.vc-add{width:34px; height:34px; border-radius:50%; background:var(--brand); color:#fff; display:grid;
  place-items:center; flex:none; transition:transform .15s, background .15s}
.vc-add:hover{background:var(--brand-2); transform:scale(1.07)}
.vc-add svg{width:16px; height:16px}
.vc-add[disabled]{background:#C9CDD3}
[data-theme=dark] .vc-prod{background:rgba(22,25,29,.94); color:var(--ink)}

/* =====================================================================
   The video feed page
   ===================================================================== */
.vfeed-page .promo-strip,.vfeed-page .site-foot{display:none}
.vfeed-page main{background:#0B0B0C}
.vfeed-page body,.vfeed-page{overscroll-behavior:none}
.vfeed-bar{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:10px var(--gutter);
  background:var(--panel); border-bottom:1px solid var(--line)}
.vfeed-bar h1{display:flex; align-items:center; gap:8px; font-size:1.05rem}
.vfeed-bar h1 svg{color:var(--brand)}
.vf-sorts{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; margin-left:auto}
.vf-sorts::-webkit-scrollbar{display:none}
.vf-sort{display:inline-flex; align-items:center; gap:5px; padding:6px 13px; border-radius:var(--r-pill);
  font-size:.82rem; font-weight:600; color:var(--ink-2); background:var(--muted); white-space:nowrap}
.vf-sort svg{width:13px; height:13px}
.vf-sort.on{background:var(--ink); color:var(--page)}
@media (max-width:640px){ .vf-sorts{margin-left:0; width:100%} .vfeed-bar h1{display:none} }
.vfeed-wrap{position:relative}
.vfeed{height:var(--vf-h, calc(100vh - 200px)); overflow-y:auto; scroll-snap-type:y mandatory;
  scrollbar-width:none; overscroll-behavior:contain; outline:none}
.vfeed::-webkit-scrollbar{display:none}
.vf-item{height:var(--vf-h, calc(100vh - 200px)); scroll-snap-align:start; scroll-snap-stop:always;
  display:grid; place-items:center; padding:12px 0}
.vf-stage{position:relative; height:100%; aspect-ratio:9/16; max-width:100vw; border-radius:16px; overflow:hidden;
  background:#111; color:#fff; isolation:isolate}
@media (max-width:640px){ .vf-item{padding:0} .vf-stage{width:100%; aspect-ratio:auto; border-radius:0} }
.vf-still{position:absolute; left:10%; top:22%; width:80%; aspect-ratio:1; height:auto; object-fit:contain;
  border-radius:14px; background:#fff; box-shadow:0 14px 40px rgba(0,0,0,.4); transition:opacity .3s}
.vf-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .35s}
.vf-item.is-playing .vf-video{opacity:1}
.vf-item.is-playing .vf-still{opacity:0}
.vf-shade{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.5) 0,transparent 20%,transparent 50%,rgba(0,0,0,.72) 100%)}
.vf-top{position:absolute; left:14px; right:14px; top:14px; display:flex; align-items:center; gap:10px; z-index:3}
.vf-seller{display:flex; align-items:center; gap:9px; min-width:0}
.vf-seller .vc-av{width:36px; height:36px}
.vf-seller b{display:block; font-size:.88rem; text-shadow:0 1px 3px rgba(0,0,0,.5)}
.vf-seller small{display:block; font-size:.72rem; opacity:.85}
.vf-sound{margin-left:auto; width:40px; height:40px; border-radius:50%; background:rgba(0,0,0,.45); color:#fff;
  display:grid; place-items:center; flex:none}
.vf-sound svg{width:19px; height:19px}
.vf-toggle{position:absolute; inset:70px 70px 90px 0; z-index:2; display:grid; place-items:center; color:#fff}
.vf-toggle span{width:66px; height:66px; border-radius:50%; background:rgba(0,0,0,.45); display:grid;
  place-items:center; opacity:0; transition:opacity .2s}
.vf-toggle svg{width:28px; height:28px; margin-left:4px; fill:#fff}
.vf-item:not(.is-playing) .vf-toggle span{opacity:1}
.vf-rail{position:absolute; right:10px; bottom:84px; z-index:3; display:flex; flex-direction:column; gap:14px}
.vf-act{display:flex; flex-direction:column; align-items:center; gap:4px; color:#fff; font-size:.68rem;
  font-weight:600; text-shadow:0 1px 2px rgba(0,0,0,.6)}
.vf-act span{width:44px; height:44px; border-radius:50%; background:rgba(0,0,0,.4); display:grid; place-items:center;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background .15s}
.vf-act:hover span{background:rgba(0,0,0,.65)}
.vf-act span.on{background:var(--brand)}
.vf-act svg{width:20px; height:20px}
.vf-act i{font-style:normal}
.vf-buy{position:absolute; left:10px; right:10px; bottom:14px; z-index:3; display:flex; align-items:center;
  gap:10px; padding:7px 7px 7px 7px; background:rgba(255,255,255,.93); color:#0B0B0C; border-radius:12px;
  box-shadow:0 6px 20px rgba(0,0,0,.28); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.vf-prod{display:flex; gap:9px; align-items:center; min-width:0; flex:1}
.vf-prod img{width:42px; height:42px; border-radius:8px; object-fit:contain; background:#fff;
  border:1px solid #EFF0F3; flex:none}
.vf-prod .pc-rate{display:none}
.vf-prod > span{min-width:0; display:flex; flex-direction:column; gap:1px}
.vf-prod b{font-size:.8rem; font-weight:600; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.vf-price{font-family:var(--ff-d); font-weight:700; font-size:.88rem; display:flex; align-items:baseline; gap:6px;
  white-space:nowrap; overflow:hidden}
.vf-price s{font-size:.76rem; font-weight:400; font-family:var(--ff)}
.vf-price i{font-style:normal; font-size:.68rem; font-weight:700; color:#fff; background:var(--brand);
  padding:1px 6px; border-radius:var(--r-pill); font-family:var(--ff)}
.vf-add-f{flex:none}
.vf-add{height:36px; padding:0 14px; font-size:.82rem}
.vf-progress{position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.2); z-index:4}
.vf-progress i{display:block; height:100%; width:0; background:var(--brand)}
[data-theme=dark] .vf-buy{background:rgba(22,25,29,.96); color:var(--ink)}
.vf-nav{position:absolute; right:calc(var(--gutter) + 8px); top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:10px; z-index:5}
.vf-nav button{width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.12); color:#fff;
  display:grid; place-items:center}
.vf-nav button:hover{background:rgba(255,255,255,.25)}
.vf-up svg{transform:rotate(180deg)}
@media (hover:none), (pointer:coarse){ .vf-nav{display:none} }
@media (max-width:640px){ .vf-rail{bottom:84px} }

/* =====================================================================
   Soko Street and shop cards
   ===================================================================== */
.street-hero{background:radial-gradient(1200px 300px at 85% -10%, var(--brand-050), transparent),
  linear-gradient(160deg,var(--panel-2),var(--panel)); padding:26px 0 22px; border-bottom:1px solid var(--line-2)}
.street-hero .wrap{display:grid; gap:18px; align-items:end}
@media (min-width:900px){ .street-hero .wrap{grid-template-columns:1.2fr .8fr} }
.street-hero .eyebrow{color:var(--brand); background:var(--brand-050)}
.street-hero h1{font-size:clamp(1.5rem,3vw,2.3rem); margin:10px 0 6px}
.street-hero p{color:var(--ink-2); max-width:56ch}
.sh-stats{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.sh-stats > *{display:inline-flex; align-items:center; gap:6px; padding:6px 13px; border-radius:var(--r-pill);
  background:var(--panel); border:1px solid var(--line); font-size:.84rem; color:var(--ink-2)}
.sh-stats b{color:var(--ink)}
.sh-live{border-color:transparent !important; background:var(--live-bg) !important; color:var(--live) !important}
.sh-live b{color:var(--live) !important}
.sh-live svg{width:15px; height:15px}
.sh-search{display:flex; gap:8px}
.sh-search .input-grp{flex:1; background:var(--panel)}
.sh-search .input-grp span svg{width:16px; height:16px}
.street-tools{display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap; margin-bottom:16px}
.street-depts{flex:1; margin:0; min-width:0}
.street-depts .chip svg{width:14px; height:14px}
.chip-live{color:var(--live)}
.chip-live.on{background:var(--live); border-color:var(--live); color:#fff}
@media (max-width:899px){
  .street-depts{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; flex-basis:100%}
  .street-depts::-webkit-scrollbar{display:none}
  .street-depts .chip{flex:none}
}

.scards{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.scards-4{grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.scards-spot{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.scard{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  display:flex; flex-direction:column; transition:box-shadow .15s, transform .15s, border-color .15s}
.scard:hover{box-shadow:var(--sh); transform:translateY(-2px); border-color:var(--ink-3)}
.sc-cover{position:relative; display:block; height:84px; overflow:hidden;
  background:linear-gradient(135deg, hsl(var(--h) 55% 62%), hsl(calc(var(--h) + 35) 55% 42%))}
.scard-big .sc-cover{height:120px}
.sc-cover img{width:100%; height:100%; object-fit:cover}
.sc-live{position:absolute; top:10px; right:10px; display:inline-flex; align-items:center; gap:5px;
  background:var(--live); color:#fff; font-size:.7rem; font-weight:700; padding:4px 10px; border-radius:var(--r-pill)}
.sc-live svg{width:12px; height:12px}
.sc-body{padding:0 14px 14px; display:flex; flex-direction:column; gap:10px; flex:1}
.sc-head{display:flex; align-items:flex-end; gap:10px}
.sc-head .sc-logo{margin-top:-28px}
.sc-logo{position:relative; width:56px; height:56px; border-radius:14px; border:3px solid var(--panel); flex:none;
  overflow:hidden; display:grid; place-items:center; box-shadow:var(--sh-sm);
  background:linear-gradient(135deg, hsl(var(--h) 45% 22%), hsl(var(--h) 35% 12%))}
.scard-big .sc-logo{width:68px; height:68px}
.sc-logo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:var(--panel)}
.sc-logo i{font-style:normal; color:#fff; font-weight:700; font-size:.95rem}
.sc-id{min-width:0; padding-bottom:2px}
.sc-id a{display:flex; align-items:center; gap:5px}
.sc-id b{font-size:.98rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sc-id a:hover b{color:var(--brand)}
.sc-ok{width:15px !important; height:15px !important; color:var(--ok)}
.sc-id span{display:block; font-size:.78rem; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap}
.sc-stats{display:flex; flex-wrap:wrap; gap:4px 12px; font-size:.78rem; color:var(--ink-3)}
.sc-stats b{color:var(--ink)}
.sc-new{color:var(--teal); font-weight:600}
.sc-loc{display:inline-flex; align-items:center; gap:3px}
.sc-loc svg{width:12px; height:12px}
.sc-peek{display:grid; grid-template-columns:repeat(4,1fr); gap:6px}
.sc-peek a{aspect-ratio:1; border-radius:var(--r-xs); overflow:hidden; background:#fff; border:1px solid var(--line-2)}
.sc-peek a:hover{border-color:var(--brand)}
.sc-peek img{width:100%; height:100%; object-fit:contain}
.sc-acts{display:grid; grid-template-columns:1fr auto; gap:8px; margin-top:auto}
.sc-acts .btn{height:36px}

/* =====================================================================
   Collections landing
   ===================================================================== */
.colls{display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}
.coll-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  display:flex; flex-direction:column; transition:box-shadow .2s, transform .2s}
.coll-card:hover{box-shadow:var(--sh-lg); transform:translateY(-3px)}
.cc-media{position:relative; display:block; aspect-ratio:16/8; overflow:hidden; background:var(--muted)}
.cc-media img{width:100%; height:100%; object-fit:cover; transition:transform .4s}
.coll-card:hover .cc-media img{transform:scale(1.04)}
.cc-media::after{content:""; position:absolute; inset:0; background:linear-gradient(transparent 55%, rgba(0,0,0,.35))}
.cc-badge,.cc-ends{position:absolute; top:12px; z-index:1; display:inline-flex; align-items:center; gap:5px;
  font-size:.72rem; font-weight:700; padding:5px 11px; border-radius:var(--r-pill)}
.cc-badge{left:12px; background:rgba(255,255,255,.95); color:var(--ink)}
.cc-badge svg{width:13px; height:13px; color:var(--brand)}
.cc-ends{right:12px; background:var(--live); color:#fff}
.cc-ends svg{width:12px; height:12px}
.cc-body{padding:16px 18px 18px; display:flex; flex-direction:column; gap:10px; flex:1}
.cc-body h2{font-size:1.2rem}
.cc-body h2 a:hover{color:var(--brand)}
.cc-body p{font-size:.87rem; color:var(--ink-2); margin-top:-4px}
/* The sneak peek: best sellers as overlapping circles */
.cc-peek{display:flex; align-items:center; padding-left:8px}
.cc-peek > span{width:46px; height:46px; border-radius:50%; overflow:hidden; background:#fff;
  border:3px solid var(--panel); margin-left:-10px; box-shadow:0 2px 6px rgba(11,11,12,.12);
  display:grid; place-items:center; transition:transform .2s}
.cc-peek > span img{width:100%; height:100%; object-fit:contain; padding:3px}
.cc-peek:hover > span{transform:translateX(3px)}
.cc-peek:hover > span:first-child{transform:none}
.cc-more{background:var(--ink) !important; color:var(--page); font-size:.74rem; font-weight:700}
.cc-foot{display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:4px}
.cc-count{font-size:.82rem; color:var(--ink-3)}
.cc-count b{color:var(--ink)}
.cc-shop{margin-left:auto; display:inline-flex; align-items:center; gap:10px; height:42px; padding:0 6px 0 20px;
  border-radius:var(--r-pill); background:var(--ink); color:var(--page); font-weight:600; font-size:.88rem;
  transition:background .15s, gap .15s}
.cc-shop span{width:30px; height:30px; border-radius:50%; background:var(--brand); color:#fff; display:grid;
  place-items:center; transition:transform .2s}
.cc-shop span svg{width:16px; height:16px}
.cc-shop:hover{background:var(--brand)}
.cc-shop:hover span{background:#fff; color:var(--brand); transform:translateX(3px)}

/* =====================================================================
   Recommended for you page
   ===================================================================== */
.fy-head{display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin:22px 0 14px}
.fy-head h1{margin:8px 0 4px}
.fy-head p{color:var(--ink-3); font-size:.9rem; max-width:64ch}
.fy-acts{margin-left:auto; display:flex; gap:8px; align-items:center}
.fy-why{position:relative}
.fy-why summary{list-style:none}
.fy-why summary::-webkit-details-marker{display:none}
.fy-why-pop{position:absolute; right:0; top:calc(100% + 8px); width:min(340px,88vw); z-index:20; padding:14px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-lg)}
.fy-why-pop b{display:block; margin-bottom:6px}
.fy-why-pop p{font-size:.84rem; color:var(--ink-2); margin-bottom:8px}
.fy-chips .chip svg{width:14px; height:14px}
@media (max-width:899px){
  .fy-chips{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-right:calc(-1 * var(--gutter));
    padding-right:var(--gutter)}
  .fy-chips::-webkit-scrollbar{display:none}
  .fy-chips .chip{flex:none}
  .fy-head{margin:14px 0 10px}
}
.feed-more{display:flex; justify-content:center; padding:26px 0 10px; min-height:90px}
.feed-loading{display:flex; gap:8px; align-items:center}
.feed-loading span{width:10px; height:10px; border-radius:50%; background:var(--brand); animation:bounce 1.2s infinite}
.feed-loading span:nth-child(2){animation-delay:.15s} .feed-loading span:nth-child(3){animation-delay:.3s}
.feed-loading[hidden]{display:none}

/* =====================================================================
   Shop the video: the list, and the player with cards beside it
   ===================================================================== */
.vlist-head{display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin:22px 0 16px}
.vlist-head p{color:var(--ink-3); font-size:.9rem; margin-top:4px; max-width:60ch}
.vlist-head .vf-sorts{margin-left:auto}
/* Category, then order: pinned under the site header (its height is set by
   shop.js as --site-head-h) while the grid scrolls beneath. */
.vfilter{position:sticky; top:var(--site-head-h, 0px); z-index:30; background:var(--page);
  padding:8px 0 10px; margin:0 0 14px; border-bottom:1px solid var(--line)}
/* The order, docked at the bottom centre — above the phone tab bar
   (--tabbar-h, from shop.js) — so the categories keep the top to one row.
   A real <select> inside: the phone's own picker opens. */
.vsort-dock{position:fixed; left:50%; transform:translateX(-50%); z-index:70;
  bottom:calc(var(--tabbar-h, 0px) + 16px + env(safe-area-inset-bottom))}
.vsort-dock > summary{list-style:none; display:flex; align-items:center; gap:8px; height:44px;
  padding:0 14px 0 16px; background:var(--panel); color:var(--ink); border:1px solid var(--line);
  border-radius:var(--r-pill); box-shadow:0 6px 20px rgba(0,0,0,.18); cursor:pointer;
  font-size:.88rem; font-weight:700; white-space:nowrap; user-select:none}
.vsort-dock > summary::-webkit-details-marker{display:none}
.vsort-dock > summary svg{width:16px; height:16px; color:var(--ink-3); flex:none}
.vsort-dock > summary:hover{border-color:var(--ink-3)}
.vsort-dock > summary:focus-visible{outline:2px solid var(--brand); outline-offset:3px}
/* The menu opens upwards from the pill, so its caret points up until open. */
.vsort-dock .vsort-caret{transform:rotate(180deg); transition:transform .15s}
.vsort-dock[open] .vsort-caret{transform:none}
.vsort-menu{position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%);
  width:min(320px, calc(100vw - 32px)); padding:8px; background:var(--panel); color:var(--ink);
  border:1px solid var(--line); border-radius:16px; box-shadow:0 18px 48px rgba(0,0,0,.22);
  animation:vsort-in .14s ease-out}
@keyframes vsort-in{from{opacity:0; transform:translate(-50%, 6px)} to{opacity:1; transform:translate(-50%, 0)}}
.vsort-title{margin:0; padding:6px 10px 8px; font-size:.72rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3)}
.vsort-opt{display:flex; align-items:center; gap:12px; padding:10px; border-radius:12px; color:var(--ink)}
.vsort-opt:hover{background:var(--panel-2)}
.vsort-opt:focus-visible{outline:2px solid var(--brand); outline-offset:-2px}
.vsort-opt.on{background:var(--brand-050)}
.vsort-ico{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:var(--muted); color:var(--ink-2)}
.vsort-ico svg{width:16px; height:16px}
.vsort-opt.on .vsort-ico{background:var(--brand); color:#fff}
.vsort-txt{display:flex; flex-direction:column; flex:1; min-width:0}
.vsort-txt b{font-size:.88rem; font-weight:700}
.vsort-txt small{margin-top:1px; font-size:.76rem; color:var(--ink-3)}
.vsort-tick{width:18px; height:18px; flex:none; color:var(--brand)}
/* Room under the last row of videos so the dock never hides one. */
.vfilter ~ .feed-more{padding-bottom:72px}
.vcats{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.vcats::-webkit-scrollbar{display:none}
/* The category pill geometry (the app's too): a 26px picture in a 36px pill,
   inset as far from the left edge as from the top and bottom — 4px inside the
   1px border. An icon or a first letter sits in the same circle. */
.vcat{display:inline-flex; align-items:center; gap:7px; flex:none; height:36px; padding:0 13px 0 4px;
  border:1px solid var(--line); border-radius:var(--r-pill); background:var(--panel);
  font-size:.82rem; font-weight:600; color:var(--ink-2); white-space:nowrap}
.vcat:hover{border-color:var(--ink-3); color:var(--ink)}
.vcat img,.vcat .vcat-ico{width:26px; height:26px; border-radius:50%; flex:none}
.vcat img{object-fit:cover; background:#fff}
.vcat .vcat-ico{display:grid; place-items:center; background:var(--muted); color:var(--ink-2);
  font-size:.72rem; font-weight:700; text-transform:uppercase}
.vcat .vcat-ico svg{width:14px; height:14px}
.vcat i{font-style:normal; font-size:.72rem; font-weight:600; color:var(--ink-3)}
.vcat.on{background:var(--ink); color:var(--page); border-color:var(--ink)}
.vcat.on .vcat-ico{background:rgba(255,255,255,.16); color:inherit}
.vcat.on i{color:inherit; opacity:.7}
@media (max-width:640px){ .vlist-head{margin:14px 0 12px} .vlist-head .vf-sorts{margin-left:0; width:100%} }
.vgrid{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
@media (min-width:700px){ .vgrid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:18px} }
.vgrid .vcard{width:auto}

.vf-back{display:inline-flex; align-items:center; gap:4px; height:34px; padding:0 13px 0 8px; flex:none;
  border-radius:var(--r-pill); background:var(--muted); font-size:.84rem; font-weight:600; color:var(--ink)}
.vf-back:hover{background:var(--line)}
.vf-back svg{width:16px; height:16px}
.vview-player{position:relative; background:#0B0B0C}
.vview .vf-nav{right:16px}
.vview-side{display:none}
@media (min-width:1000px){
  /* The player takes most of the page; the rest of the list stays beside
     it, so the next video is a click away as well as a scroll. */
  .vview-body{display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,34%)}
  .vview-side{display:block; height:var(--vf-h); overflow-y:auto; padding:16px 18px 24px;
    background:var(--panel-2); border-left:1px solid var(--line); overscroll-behavior:contain}
  .vview .vf-sorts{margin-left:auto}
}
@media (min-width:1500px){ .vview-body{grid-template-columns:minmax(0,1fr) minmax(420px,36%)} }
.vview-side h2{font-size:1rem; margin-bottom:12px}
.vgrid-mini{grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px}
.vcard-mini{border-radius:12px}
.vcard-mini .vc-prod{left:5px; right:5px; bottom:5px; padding:4px 5px; gap:6px; border-radius:9px}
.vcard-mini .vc-thumb{width:30px; height:30px}
.vcard-mini .vc-info b{font-size:.68rem}
.vcard-mini .vc-price{font-size:.72rem}
.vcard-mini .vc-add{width:28px; height:28px}
.vcard-mini .vc-add svg{width:13px; height:13px}
.vcard-mini .vc-play{width:40px; height:40px}
.vcard-mini .vc-play svg{width:17px; height:17px}
.vcard-mini .vc-top{left:7px; right:7px; top:7px}
.vcard-mini .vc-seller{font-size:.68rem}
.vcard.is-current{box-shadow:0 0 0 3px var(--brand)}
.vcard.is-current .vc-media::after{content:"Now playing"; position:absolute; left:50%; top:46%;
  transform:translate(-50%,-50%); z-index:3; background:var(--brand); color:#fff; font-size:.7rem;
  font-weight:700; padding:4px 10px; border-radius:var(--r-pill); white-space:nowrap}
.vcard.is-current .vc-play{opacity:0}

/* Grid items refuse to shrink below their content by default; the hero's
   one-line value props (a sideways scroller on phones) were stretching the
   whole copy column wider than the screen. */
.hero-in > *{min-width:0}

/* ---- Footer on a phone: two columns, less air ------------------------- */
@media (max-width:799px){
  .site-foot{margin-top:28px; padding-top:22px}
  .foot-top{grid-template-columns:1fr 1fr; gap:18px 16px; padding-bottom:18px}
  .fbrand{grid-column:1 / -1}
  .fbrand .logo{margin-bottom:8px}
  .fbrand p{margin-bottom:10px; font-size:.8rem; max-width:none}
  .app-cta .tiny{flex-basis:auto}
  .store-badge{padding:6px 10px; font-size:.76rem}
  .fcol h4{margin-bottom:6px; font-size:.82rem}
  .fcol a{padding:3px 0; font-size:.8rem}
  .foot-mid{gap:10px; padding-top:12px; padding-bottom:12px}
  .trust{gap:6px 14px; font-size:.76rem}
  .pays{margin-left:0}
  .foot-bot{padding-top:10px; padding-bottom:14px; gap:4px; font-size:.72rem; flex-direction:column}
}

/* =====================================================================
   Shopfront: one swipeable row of departments
   ===================================================================== */
.sf-cats{margin:4px 0 16px}
.sf-cat-row{gap:8px; padding:2px 2px 6px}
.sf-cat-row .chip{flex:none; white-space:nowrap}
.chip-n{font-size:.72rem; color:var(--ink-3); font-weight:500}
.chip.on .chip-n{color:inherit; opacity:.7}

/* =====================================================================
   PDP mobile buy bar: one row — photo, name and price, then the button.
   `.only-mobile` sets display:inherit (block), which had overridden the
   bar's flex and dropped the button onto its own line.
   ===================================================================== */
@media (max-width:899px){
  .sticky-buy.only-mobile{display:flex}
}
.sticky-buy{gap:10px; padding:8px 12px; padding-bottom:calc(8px + env(safe-area-inset-bottom, 0px))}
.sb-thumb{width:42px; height:42px; border-radius:8px; object-fit:contain; background:#fff;
  border:1px solid var(--line-2); flex:none}
.sb-info{flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25}
.sb-name{font-size:.78rem; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sticky-buy .sb-info b{font-size:1rem; font-family:var(--ff-d); display:flex; align-items:baseline; gap:7px;
  white-space:nowrap}
.sb-info b i{font-style:normal; font-size:.7rem; font-weight:600; color:var(--warn); font-family:var(--ff)}
.sticky-buy .btn{margin-left:0; flex:none; height:42px; padding:0 18px}

/* =====================================================================
   PDP desktop buy card: slides up at the bottom right once the Add to
   basket button has scrolled out of sight (shop.js). Phones have the
   bar above instead. Hidden it is invisible and inert, not just faded.
   ===================================================================== */
.buy-dock{display:none}
@media (min-width:900px){
  .buy-dock{position:fixed; right:24px; bottom:24px; z-index:75; width:360px; display:grid;
    grid-template-columns:56px minmax(0,1fr) auto; column-gap:12px; align-items:center; padding:12px;
    background:var(--panel); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-lg);
    opacity:0; visibility:hidden; transform:translateY(24px) scale(.97); transform-origin:bottom right;
    transition:opacity .2s ease, transform .32s cubic-bezier(.2,.8,.2,1), visibility 0s linear .32s}
  .buy-dock.on{opacity:1; visibility:visible; transform:none;
    transition:opacity .2s ease, transform .32s cubic-bezier(.2,.8,.2,1), visibility 0s}
}
.bd-thumb{width:56px; height:56px; border-radius:var(--r-sm); object-fit:contain; background:#fff;
  border:1px solid var(--line-2)}
.bd-info{min-width:0; display:flex; flex-direction:column; gap:2px; line-height:1.25}
.bd-name{font-size:.84rem; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bd-opts{font-size:.74rem; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bd-opts.need{color:var(--warn); font-weight:600}
.bd-price{display:flex; align-items:baseline; gap:7px; font-family:var(--ff-d); font-size:1.05rem; white-space:nowrap}
.bd-price s{font-family:var(--ff); font-size:.74rem; font-weight:400; color:var(--ink-3)}
.bd-close{align-self:start; width:28px; height:28px; margin:-4px -4px 0 0; border-radius:50%;
  display:grid; place-items:center; color:var(--ink-3)}
.bd-close:hover{background:var(--muted); color:var(--ink)}
.bd-close svg{width:15px; height:15px}
.buy-dock > .btn{grid-column:1 / -1; width:100%; margin-top:12px;
  /* Not `all`: the button would fade its inherited visibility in after the card. */
  transition-property:background-color, color, border-color, box-shadow, transform}
@media (prefers-reduced-motion:reduce){ .buy-dock,.buy-dock.on{transform:none} }

/* =====================================================================
   Dropdown menus (search scope, sort)
   ===================================================================== */
 /* Hidden but still in the form — and still focusable enough for the
    browser's "please choose" bubble on a required field. */
.dd-native{position:absolute !important; left:0; bottom:0; width:1px !important; height:1px !important;
  opacity:0; pointer-events:none; border:0 !important; padding:0 !important}
.dd{position:relative; display:inline-block}
.dd-btn{display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 10px 0 13px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--panel); font-size:.85rem;
  font-weight:500; color:var(--ink); max-width:220px; transition:border-color .15s, box-shadow .15s}
.dd-btn:hover{border-color:var(--ink-3)}
.dd-btn[aria-expanded="true"]{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-050)}
.dd-label{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dd-btn svg{width:14px; height:14px; color:var(--ink-3); transition:transform .15s}
.dd-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.dd-menu{position:absolute; top:calc(100% + 6px); right:0; z-index:95; min-width:100%; width:max-content;
  max-width:min(300px, 92vw); max-height:min(360px, 60vh); overflow-y:auto; padding:6px;
  background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:var(--sh-lg);
  animation:ddIn .14s ease}
.dd-menu[hidden]{display:none}
@keyframes ddIn{from{opacity:0; transform:translateY(-4px)}to{opacity:1; transform:none}}
.dd-opt{display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border-radius:9px;
  font-size:.86rem; color:var(--ink-2); text-align:left; white-space:nowrap}
.dd-opt:hover,.dd-opt:focus-visible{background:var(--muted); color:var(--ink); outline:none}
.dd-opt.on{color:var(--brand); font-weight:600; background:var(--brand-050)}
.dd-ico{width:28px; height:28px; border-radius:8px; background:var(--muted); display:grid; place-items:center;
  flex:none; color:var(--ink-2)}
.dd-ico svg{width:15px; height:15px}
.dd-opt.on .dd-ico{background:var(--brand); color:#fff}
.dd-t{flex:1; overflow:hidden; text-overflow:ellipsis}
.dd-tick{width:16px; flex:none; opacity:0; color:var(--brand)}
.dd-tick svg{width:15px; height:15px}
.dd-opt.on .dd-tick{opacity:1}
/* The search scope opens under the pill, left-aligned with the bar. */
.dd-menu.dd-scope{left:0; right:auto; top:calc(100% + 8px); min-width:250px}
.sb-cat[aria-expanded="true"]{background:var(--line)}
.sb-cat[aria-expanded="true"] > svg{transform:rotate(180deg)}
.sb-cat > svg{transition:transform .15s}
.sortby{position:relative}

/* =====================================================================
   Video player on a phone: the whole screen, with a way out
   ===================================================================== */
.vf-close{display:none}
@media (max-width:899px){
  .vview-player{position:fixed; inset:0; z-index:150; background:#000}
  .vfeed-page.vview-open{overflow:hidden}
  .vview .vfeed,.vview .vf-item{height:var(--vf-h, 100dvh)}
  .vview .vf-item{padding:0}
  .vview .vf-stage{width:100%; height:100%; aspect-ratio:auto; border-radius:0}
  .vf-close{display:grid; place-items:center; position:absolute; z-index:160; left:12px;
    top:calc(12px + env(safe-area-inset-top, 0px)); width:40px; height:40px; border-radius:50%;
    background:rgba(0,0,0,.5); color:#fff; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
  .vf-close svg{width:20px; height:20px}
  .vview .vf-top{left:62px; top:calc(12px + env(safe-area-inset-top, 0px))}
  .vview .vf-buy{bottom:calc(14px + env(safe-area-inset-bottom, 0px))}
  .vview .vf-rail{bottom:calc(84px + env(safe-area-inset-bottom, 0px))}
}

/* Bottom bar: the page you are on is marked */
.tabbar a.on{color:var(--brand)}
.tabbar a.on span{font-weight:700}
@media (max-width:899px){ .saved-act{padding:6px} }

/* "Why these?" on Recommended: a sheet above the bottom bar on a phone, so
   it can never hang off the edge of the screen. */
.fy-why[open] summary{background:var(--muted)}
@media (max-width:899px){
  .fy-why-pop{position:fixed; left:12px; right:12px; top:auto; width:auto;
    bottom:calc(68px + env(safe-area-inset-bottom, 0px)); z-index:95; padding:16px 16px 14px;
    border-radius:16px; animation:ddIn .16s ease}
}
@media (min-width:900px){
  .fy-why-pop{right:0; left:auto; z-index:65}
}

/* ---- Checkout details ----------------------------------------------- */
.newaddr{margin-top:22px}
.newaddr summary{padding:4px 2px}
/* Text areas share the input look (they had a class with no rules). */
textarea.input,.textarea{height:auto; min-height:84px; padding:11px 13px; line-height:1.5; resize:vertical;
  font-size:.92rem; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--panel); width:100%}
textarea.input:focus,.textarea:focus{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-050); outline:none}
textarea.input::placeholder,.input::placeholder{color:var(--ink-3)}
.pay-panel .fg + .fg{margin-top:2px}

/* ---- Basket buttons ------------------------------------------------- */
.visually-hidden{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}
.btn.is-busy{opacity:.7; cursor:progress}
.btn.is-added{background:var(--ok) !important; border-color:var(--ok) !important; color:#fff !important}
.badge.bump,.tb-badge.bump{animation:bump .4s ease}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.btn-danger{background:var(--danger); color:#fff; border-color:var(--danger)}
.btn-danger:hover{filter:brightness(.92)}

/* ---- Confirm dialog ------------------------------------------------- */
/* `.cmd`, not `.cm`: that one is a chat message. */
.cm-wrap{position:fixed; inset:0; z-index:230; display:grid; place-items:center; padding:16px;
  background:rgba(11,11,12,.5); opacity:0; transition:opacity .16s ease}
.cm-wrap[hidden]{display:none}
.cm-wrap.on{opacity:1}
body.cm-open{overflow:hidden}
.cmd{width:min(400px,100%); background:var(--panel); border-radius:18px; padding:24px 22px 18px; text-align:center;
  box-shadow:0 24px 60px rgba(11,11,12,.3); transform:translateY(8px) scale(.97); transition:transform .18s ease}
.cm-wrap.on .cmd{transform:none}
.cm-ico{width:52px; height:52px; border-radius:50%; margin:0 auto 14px; display:grid; place-items:center;
  background:var(--danger-bg); color:var(--danger)}
.cm-ico svg{width:24px; height:24px}
.cmd-ok .cm-ico{background:var(--ok-bg); color:var(--ok)}
.cmd h2{font-size:1.15rem; margin-bottom:6px}
.cmd p{font-size:.88rem; color:var(--ink-2); max-width:34ch; margin:0 auto}
.cm-acts{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px}
.cm-acts .btn{height:44px; white-space:normal; line-height:1.2}
.cm-acts.cm-one{grid-template-columns:1fr}
.cm-acts [hidden]{display:none}
.cmd-info .cm-ico{background:var(--brand-050); color:var(--brand)}
.cm-copy{width:100%; margin-top:14px; text-align:left; font:500 .86rem ui-monospace, monospace}
@media (max-width:480px){
  .cm-wrap{place-items:end center; padding:0}
  .cmd{width:100%; border-radius:20px 20px 0 0; padding-bottom:calc(18px + env(safe-area-inset-bottom, 0px))}
  .cm-acts{grid-template-columns:1fr; gap:8px}
  .cm-acts .cm-yes{order:-1}
}

/* Dropdowns inside forms fill the field like an input does. */
.fg .dd{display:block}
.fg .dd-btn{width:100%; max-width:none; height:44px; justify-content:space-between; font-size:.92rem;
  padding:0 12px 0 13px}
.fg .dd-menu{left:0; right:auto; min-width:100%}
.fg.has-err .dd-btn{border-color:var(--danger)}
select.input{appearance:none; -webkit-appearance:none; padding-right:36px;
  background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A8089' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center/16px no-repeat}
/* The "Default" tag on a saved address is a tag, not a full-width row. */
.ad-body .ad-def{display:inline-block; vertical-align:2px}

/* keep watching: the site opens in a frame, the stream docks in a corner */
.kw-frame{position:fixed; inset:0; z-index:140; background:var(--page)}
.kw-frame iframe{display:block; width:100%; height:100%; border:0}
body.kw-on{overflow:hidden}
.player.kw-mini{position:fixed; right:16px; bottom:16px; z-index:160; width:340px; border-radius:var(--r);
  box-shadow:0 12px 40px rgba(0,0,0,.35); cursor:pointer; animation:kwin .22s ease-out}
@keyframes kwin{from{transform:translateY(16px) scale(.96); opacity:0}}
.player.kw-mini video{pointer-events:none}
.player.kw-mini .pinned,.player.kw-mini .pl-controls,.player.kw-mini .pl-overlay,
.player.kw-mini .pl-tag,.player.kw-mini .lc-tag,.player.kw-mini .kw-pip{display:none !important}
.kw-bar{display:none}
.player.kw-mini .kw-bar{display:flex; align-items:center; gap:6px; position:absolute; left:0; right:0; top:0;
  z-index:4; padding:8px 8px 18px 10px; color:#fff; background:linear-gradient(rgba(0,0,0,.7),transparent)}
.kw-live{flex:none; font-size:.62rem; font-weight:800; letter-spacing:.06em; padding:2px 6px;
  border-radius:var(--r-xs); background:var(--live)}
.kw-title{flex:1; min-width:0; font-size:.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kw-btn{flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  color:#fff; background:rgba(0,0,0,.45)}
.kw-btn:hover{background:rgba(0,0,0,.75)}
.kw-btn svg{width:15px; height:15px}
.kw-pip{position:absolute; top:12px; right:12px; z-index:4; width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; color:#fff; background:rgba(0,0,0,.5)}
.kw-pip:hover{background:rgba(0,0,0,.75)}
.kw-pip svg{width:18px; height:18px}
@media (max-width:760px){
  /* Above the tab bar and the sticky buy bar. */
  .player.kw-mini{width:min(58vw,260px); right:10px; bottom:128px}
}

/* address cards: the label is the title, who/phone underneath */
.ad-body .ad-title{display:flex; align-items:center; gap:8px; font-size:.95rem; margin-bottom:2px}
.ad-body .ad-title .ad-def{vertical-align:0}
.ad-body .ad-ph{display:flex; align-items:center; gap:5px}
.ad-body .ad-ph svg{width:13px; height:13px; flex:none}
.addr .ad-acts .lnk-btn{white-space:nowrap}
/* checkout: agreement is said, not ticked */
.agree-note{font-size:.8rem; color:var(--ink-3); margin:16px 0 4px; line-height:1.5}
.agree-note a{color:var(--ink-2); text-decoration:underline}

/* stream poster: made from the stream's products when the seller has no cover */
.sposter{position:relative; display:block; width:100%; aspect-ratio:16/10; overflow:hidden; isolation:isolate;
  container-type:inline-size; color:#fff; background:linear-gradient(135deg,var(--sp1),var(--sp2))}
.sp-c0{--sp1:#FF6A3D; --sp2:#B5173A}
.sp-c1{--sp1:#2E1A6B; --sp2:#8B5CF6}
.sp-c2{--sp1:#0B4B50; --sp2:#10B3A0}
.sp-c3{--sp1:#1C1917; --sp2:#5B524C}
.sp-c4{--sp1:#8A1245; --sp2:#F0609E}
.sposter::after{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(circle at 12% 18%, rgba(255,255,255,.22), transparent 42%),
             repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px)}
.sp-bg{position:absolute; inset:-24px; z-index:0; background-size:cover; background-position:center;
  filter:blur(22px) saturate(1.3); opacity:.35}
.sp-tiles{position:absolute; top:9%; bottom:9%; right:5%; width:56%; z-index:2}
.sposter .sp-t{position:absolute; width:47%; height:auto; aspect-ratio:1; object-fit:cover; background:#fff;
  border:max(2px, .7cqw) solid #fff; border-radius:max(4px, 1.6cqw); box-shadow:0 1cqw 3cqw rgba(0,0,0,.35)}
.sposter .sp-t0{left:2%; top:14%; transform:rotate(-7deg); z-index:3}
.sposter .sp-t1{left:40%; top:0; transform:rotate(5deg); z-index:2}
.sposter .sp-t2{left:50%; top:42%; transform:rotate(-3deg); z-index:4}
.sposter .sp-t3{left:16%; top:50%; width:40%; transform:rotate(8deg); z-index:1}
.sposter[data-n="1"] .sp-t0{left:22%; top:4%; width:62%; transform:rotate(-4deg)}
.sposter[data-n="2"] .sp-t0{left:2%; top:18%; width:56%}
.sposter[data-n="2"] .sp-t1{left:40%; top:2%; width:56%}
.sp-empty{position:absolute; inset:0; display:grid; place-items:center; opacity:.5}
.sp-empty svg{width:22cqw; height:22cqw}
.sp-copy{position:absolute; left:5%; bottom:8%; max-width:42%; z-index:5; display:flex; flex-direction:column;
  align-items:flex-start; gap:1cqw}
.sp-when{background:#fff; color:#1C1917; font-weight:800; letter-spacing:.01em; line-height:1.2;
  font-size:clamp(.6rem, 3.1cqw, 1.05rem); padding:.5cqw 1.6cqw; border-radius:99px; white-space:nowrap;
  box-shadow:0 .6cqw 2cqw rgba(0,0,0,.2)}
.sp-title{font-size:clamp(.95rem, 4.6cqw, 2.1rem); font-weight:800; line-height:1.08; letter-spacing:-.01em;
  text-shadow:0 2px 12px rgba(0,0,0,.35); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden}
.sp-shop{font-size:clamp(.58rem, 2.5cqw, .95rem); font-weight:600; opacity:.92; text-shadow:0 1px 6px rgba(0,0,0,.35);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.sp-full .sp-copy{max-width:44%; top:17%; bottom:auto}
.sp-mini .sp-tiles{left:10%; right:10%; width:auto}
/* the spots a stream picture sits in */
.lv-thumb .sposter{aspect-ratio:16/10}
.lc-media .sposter{aspect-ratio:16/9}
.hero-lv .sposter{aspect-ratio:16/8; max-height:300px}
.player > .sposter{aspect-ratio:16/9}
.sch-row .sposter{width:78px; height:48px; aspect-ratio:auto; flex:none; border-radius:var(--r-sm)}
.sch-row .sp-t{border-width:1.5px; border-radius:3px; box-shadow:none}
.sposter .sp-cover{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:6}

/* sign-in prompt (the confirm sheet, in brand colours) */
.cmd-brand .cm-ico{background:var(--brand-050); color:var(--brand)}
.cmd .si-note{margin-top:12px; font-size:.76rem; color:var(--ink-3)}
.cm-acts a.btn{display:inline-flex; align-items:center; justify-content:center}

/* "Finish your profile", now and then on the home page */
.pn{position:relative}
.pn-x{position:absolute; top:10px; right:10px}
.pn .pm-bar{max-width:240px; margin:12px auto 0}
.pn-perks{list-style:none; text-align:left; display:grid; gap:9px; margin:16px auto 0; max-width:320px}
.pn-perks li{display:flex; gap:10px; align-items:flex-start; font-size:.87rem; color:var(--ink-2)}
.pn-perks svg{width:18px; height:18px; flex:none; color:var(--brand); margin-top:1px}
.pn-never{margin-top:12px; font-size:.78rem; color:var(--ink-3); text-decoration:underline;
  text-underline-offset:2px}
.pn-never:hover{color:var(--ink)}

/* ---- Streams: share, "Notify me", teasers ------------------------- */
.remind-form{display:inline-flex; margin:0}
.btn-icon{width:38px; padding:0}
.sch-acts{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.lc-foot{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.lc-foot .lc-cta{margin-right:auto}
.lc-foot .btn{height:34px; font-size:.82rem; padding:0 12px}
.lc-foot .btn-icon{width:34px; padding:0}
.wm-acts{flex-wrap:wrap}
.pl-acts{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:4px}
.pl-acts:empty{display:none}
.tz-len{font-weight:500; opacity:.7; font-variant-numeric:tabular-nums}
.lv-teaser{position:absolute; left:8px; bottom:8px; display:inline-flex; align-items:center; gap:4px;
  background:rgba(0,0,0,.72); color:#fff; font-size:.7rem; font-weight:700; padding:3px 8px;
  border-radius:var(--r-pill)}
.lv-teaser svg{width:12px; height:12px}
.next-stream{align-items:center; flex-wrap:wrap}
.next-stream > div:first-of-type{flex:1; min-width:200px}
.ns-acts{display:flex; gap:8px; align-items:center; flex-wrap:wrap}

/* the share menu (desktop; phones use the system sheet) */
.share-menu{position:absolute; z-index:220; min-width:190px; padding:6px; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--r-sm); box-shadow:var(--sh-lg); display:grid}
.share-menu a,.share-menu button{display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px;
  border-radius:var(--r-xs); font-size:.86rem; color:var(--ink); text-align:left; background:none; border:0;
  cursor:pointer; text-decoration:none}
.share-menu a:hover,.share-menu button:hover,.share-menu a:focus-visible{background:var(--muted)}
.share-menu svg{width:16px; height:16px; color:var(--ink-2)}
.sm-dot{width:16px; height:16px; border-radius:50%; flex:none; background:var(--ink-3)}
.sm-wa{background:#25D366} .sm-fb{background:#1877F2} .sm-x{background:var(--ink)} .sm-sms{background:var(--brand)}

/* the teaser dialog — shares the confirm sheet's backdrop */
.tz-wrap{background:rgba(11,11,12,.8)}
.tz{position:relative; width:min(720px,100%); background:#000; border-radius:18px; overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.45); transform:translateY(8px) scale(.97); transition:transform .18s ease}
.tz-wrap.on .tz{transform:none}
.tz-video{display:block; width:100%; max-height:70vh; background:#000}
.tz-body{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 16px; background:var(--panel)}
.tz-copy{flex:1; min-width:180px}
.tz-copy b{display:block; font-size:.95rem; line-height:1.3}
.tz-sub{font-size:.8rem; color:var(--ink-3)}
.tz-acts{display:flex; gap:8px; flex-wrap:wrap}
.tz-x{position:absolute; top:10px; right:10px; z-index:2; width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; background:rgba(0,0,0,.55); color:#fff; border:0; cursor:pointer}
.tz-x svg{width:18px; height:18px}
.tz-done .tz-acts .btn-primary{animation:bump .5s ease 2}
@media (max-width:480px){
  .tz-wrap{place-items:center; padding:0}
  .tz{border-radius:0}
  .tz-video{max-height:62vh}
}

/* =====================================================================
   Shopping while watching: products never more than a tap from the video
   ===================================================================== */
/* The product list. Wide screens: a tab beside the player. Phones: a bottom
   sheet opened from the shelf. Same markup (watch_shop() in layout.php). */
.wshop{display:flex; flex-direction:column; min-height:0; background:var(--panel)}
.ws-head{display:flex; align-items:center; gap:12px; padding:14px 16px 10px}
.ws-head > div{flex:1; min-width:0}
.ws-head b{display:block; font-family:var(--ff-d); font-size:1.02rem}
.ws-head span{font-size:.78rem; color:var(--ink-3)}
.ws-close{width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--muted); flex:none}
.ws-close svg{width:17px; height:17px}
.ws-list{flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:6px 10px 12px;
  display:grid; gap:6px; align-content:start}
.ws-empty{padding:18px 6px; color:var(--ink-3); font-size:.86rem}
.ws-item{display:grid; grid-template-columns:56px minmax(0,1fr) auto; align-items:center; gap:11px;
  padding:9px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--panel);
  scroll-margin:8px; transition:border-color .2s, background .2s, box-shadow .2s}
.ws-img img{width:56px; height:56px; border-radius:var(--r-xs); object-fit:cover; background:var(--muted)}
.ws-body{min-width:0; display:flex; flex-direction:column; gap:2px}
.ws-name{font-size:.84rem; font-weight:600; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden}
.ws-name:hover{color:var(--brand)}
.ws-price{font-size:.84rem}
.ws-price s{font-size:.74rem; margin-left:4px}
.ws-price i{font-style:normal; font-size:.72rem; font-weight:600; color:var(--warn); margin-left:6px}
.ws-price i.out{color:var(--danger)}
.ws-seek{display:inline-flex; align-items:center; gap:4px; font-size:.74rem; font-weight:600; color:var(--brand);
  font-variant-numeric:tabular-nums; margin-top:1px; width:max-content}
.ws-seek svg{width:12px; height:12px}
.ws-seek:hover{text-decoration:underline}
.ws-now{display:none; align-items:center; gap:4px; font-size:.64rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--live)}
.ws-now svg{width:11px; height:11px}
.ws-item.now{border-color:var(--live); background:var(--live-bg); box-shadow:0 0 0 1px var(--live)}
.ws-item.now .ws-now{display:inline-flex}
.ws-item.flash{animation:wsFlash 1.2s ease}
@keyframes wsFlash{0%,40%{box-shadow:0 0 0 3px var(--brand)}}
.ws-item .btn-add{height:34px}

/* Wide screens: products and chat share the column beside the player, as
   tabs, and the column stays on screen however far the page scrolls. */
.ws-tabs{display:none}
.wbar{display:none}
@media (min-width:1000px){
  .watch{grid-template-columns:minmax(0,1fr) 360px}
  .wside{position:sticky; top:130px; height:min(calc(100vh - 150px), 780px); min-height:420px;
    display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r);
    background:var(--panel); overflow:hidden}
  .ws-tabs{display:flex; border-bottom:1px solid var(--line); flex:none}
  .ws-tabs button{flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px;
    height:46px; font-size:.86rem; font-weight:600; color:var(--ink-3); position:relative}
  .ws-tabs button svg{width:16px; height:16px}
  .ws-tabs button > span{font-size:.72rem; font-weight:700; color:var(--ink-3); background:var(--muted);
    border-radius:var(--r-pill); padding:1px 7px}
  .ws-tabs button[aria-selected="true"]{color:var(--ink)}
  .ws-tabs button[aria-selected="true"]::after{content:""; position:absolute; left:16px; right:16px; bottom:-1px;
    height:3px; border-radius:3px 3px 0 0; background:var(--brand)}
  .ws-tabs .ws-unread{background:var(--brand); color:#fff}
  .wside > .wshop,.wside > .chat{flex:1; min-height:0}
  .wside .ws-head,.ws-close{display:none}
  .wside .ws-list{padding-top:10px}
  .wside .chat{border:0; border-radius:0; height:auto; position:static}
}

/* Phones and tablets: the product list is a bottom sheet; a shelf of the
   products sits fixed just above the bottom bar, the one on screen first. */
@media (max-width:999px){
  .wside .chat{position:static; height:min(460px,60vh)}
  .wshop{position:fixed; left:0; right:0; bottom:0; z-index:96; max-height:min(82vh, 640px);
    border-radius:20px 20px 0 0; box-shadow:0 -12px 40px rgba(11,11,12,.22);
    transform:translateY(105%); transition:transform .24s cubic-bezier(.2,.9,.25,1); visibility:hidden;
    padding-bottom:env(safe-area-inset-bottom)}
  .wshop::before{content:""; width:40px; height:4px; border-radius:2px; background:var(--line);
    margin:8px auto 0; flex:none}
  .wshop.open,.wshop:target,.wshop:has(.ws-item:target){transform:none; visibility:visible}
  body.ws-open{overflow:hidden}

  .wbar{display:flex; align-items:center; gap:8px; position:fixed; left:0; right:0; z-index:79;
    bottom:calc(58px + env(safe-area-inset-bottom)); padding:8px 0 8px 10px;
    background:var(--panel); border-top:1px solid var(--line); box-shadow:0 -6px 18px rgba(11,11,12,.08)}
  .wb-track{flex:1; min-width:0; display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
    scroll-snap-type:x proximity; overscroll-behavior-x:contain}
  .wb-track::-webkit-scrollbar{display:none}
  .wb-chip{flex:none; display:flex; align-items:center; gap:8px; padding:4px 10px 4px 4px; height:52px;
    border:1px solid var(--line); border-radius:var(--r-sm); background:var(--panel); scroll-snap-align:start}
  .wb-chip img{width:42px; height:42px; border-radius:6px; object-fit:cover; background:var(--muted)}
  .wb-chip span{display:flex; flex-direction:column; font-size:.8rem; font-weight:700; white-space:nowrap;
    font-variant-numeric:tabular-nums}
  .wb-chip i{display:none; align-items:center; gap:3px; font-style:normal; font-size:.6rem; font-weight:800;
    letter-spacing:.06em; text-transform:uppercase; color:var(--live)}
  .wb-chip i svg{width:10px; height:10px}
  .wb-chip.now{border-color:var(--live); background:var(--live-bg); box-shadow:0 0 0 1px var(--live)}
  .wb-chip.now i{display:inline-flex}
  .wb-all{flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    height:52px; min-width:58px; padding:0 10px; margin-right:10px; border-radius:var(--r-sm);
    background:var(--ink); color:var(--page); font-size:.7rem; font-weight:600}
  .wb-all svg{width:17px; height:17px}
  .wb-all b{font-weight:800}
  /* Room for the shelf above the bottom bar. */
  body.watch-page{padding-bottom:calc(58px + 70px + env(safe-area-inset-bottom))}
  body.ws-open .wbar{visibility:hidden}
}

/* =====================================================================
   Reporting (report.php, report_button())
   ===================================================================== */
/* Deliberately quiet: there when needed, never competing with Buy. */
.rp-link{display:inline-flex; align-items:center; gap:5px; font-size:.78rem; color:var(--ink-3); font-weight:500}
.rp-link svg{width:13px; height:13px}
.rp-link:hover{color:var(--danger); text-decoration:underline}
.rp-line{margin-top:14px; font-size:.78rem; color:var(--ink-3); display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.rp-dialog{width:min(440px,100%)}
.rp-dialog form,.report-form{text-align:left}
.rp-reasons{border:0; padding:0; margin:14px 0 0; display:grid; gap:2px}
.rp-reasons legend{font-weight:600; font-size:.86rem; margin-bottom:6px}
.rp-reasons label{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--r-sm);
  font-size:.88rem; cursor:pointer}
.rp-reasons label:hover{background:var(--muted)}
.rp-reasons input{accent-color:var(--danger); width:17px; height:17px; flex:none}
.rp-reasons label:has(input:checked){background:var(--danger-bg)}
.rp-more{display:block; margin-top:12px; font-size:.84rem; font-weight:600}
.rp-more span{font-weight:400; color:var(--ink-3)}
.rp-more .textarea{margin-top:6px; min-height:64px}
.rp-note{font-size:.76rem !important; color:var(--ink-3) !important; margin:8px 0 0 !important; max-width:none !important}
.report-form{padding:20px}
.report-form .fg{margin-top:14px}

/* Live sound: the mute button, and the prompt when a browser holds audio back */
.pl-sound svg{width:20px; height:20px}
.pl-sound:not(.on){color:var(--warn)}
.pl-unmute{position:absolute; top:14px; left:50%; transform:translateX(-50%); z-index:4;
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:var(--r-pill);
  background:#fff; color:var(--ink); font-weight:700; font-size:.88rem; box-shadow:var(--sh-lg);
  animation:plUnmute 1.6s ease-in-out infinite}
.pl-unmute svg{width:18px; height:18px; color:var(--live)}
@keyframes plUnmute{50%{box-shadow:0 0 0 6px rgba(255,255,255,.35), var(--sh-lg)}}

/* =====================================================================
   Live commerce: product sheet, stock bars, live deals, free delivery,
   reactions, flash drops, and full screen on a phone
   ===================================================================== */

/* The product sheet (product-sheet.php, opened by shop.js). A bottom sheet
   on a phone, a panel on the right on a wide screen; the page under it — a
   live stream, usually — carries on. */
.ps-wrap{position:fixed; inset:0; z-index:210; background:rgba(11,11,12,.45); opacity:0; visibility:hidden;
  transition:opacity .2s, visibility .2s; display:flex; align-items:flex-end; justify-content:center}
.ps-wrap.on{opacity:1; visibility:visible}
.ps-card{position:relative; width:100%; max-height:92vh; max-height:92dvh; overflow-y:auto; overscroll-behavior:contain;
  background:var(--panel); border-radius:20px 20px 0 0; box-shadow:0 -12px 40px rgba(11,11,12,.25);
  transform:translateY(40px); transition:transform .24s cubic-bezier(.2,.9,.25,1);
  padding-bottom:env(safe-area-inset-bottom)}
.ps-wrap.on .ps-card{transform:none}
@media (min-width:900px){
  .ps-wrap{align-items:stretch; justify-content:flex-end}
  .ps-card{width:min(480px,100%); max-height:none; height:100%; border-radius:20px 0 0 20px; transform:translateX(40px)}
}
/* The option chooser (pick=1): still a bottom sheet on a phone, but a
   centred modal on a wide screen — it is a question, not a side browse. */
@media (min-width:900px){
  .ps-wrap.ps-modal{align-items:center; justify-content:center; padding:24px}
  .ps-modal .ps-card{width:min(520px,100%); height:auto; max-height:min(86vh,720px); border-radius:20px;
    box-shadow:var(--sh-lg); transform:translateY(12px) scale(.98)}
  .ps-wrap.ps-modal.on .ps-card{transform:none}
}
.ps-pick-head{display:flex; align-items:center; gap:14px; padding:20px 60px 4px 20px}
.ps-pick-head img{width:64px; height:64px; flex:none; object-fit:cover; border-radius:var(--r-sm);
  background:var(--muted)}
.ps-pick-t{display:block; font-size:.74rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--brand)}
.ps-pick-head .ps-name{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-size:1rem; line-height:1.3; margin:2px 0 0}
.ps-pick .ps-body{padding-top:8px}
.ps-pick .ps-full{margin-top:14px}
body.ps-open{overflow:hidden}
.ps-grab{display:block; width:40px; height:4px; border-radius:2px; background:var(--line); margin:8px auto 0}
@media (min-width:900px){ .ps-grab{display:none} }
.ps-x{position:absolute; top:12px; right:12px; z-index:2; width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; background:rgba(255,255,255,.92); color:#111; box-shadow:var(--sh)}
.ps-x svg{width:17px; height:17px}
.ps-loading{height:260px; display:grid; place-items:center}
.ps-loading i{width:30px; height:30px; border:3px solid var(--line); border-top-color:var(--brand);
  border-radius:50%; animation:plspin .8s linear infinite}
.ps-gallery{display:flex; gap:6px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  padding:10px 12px 0}
.ps-gallery::-webkit-scrollbar{display:none}
.ps-gallery img,.ps-gallery video{flex:none; width:78%; max-width:340px; aspect-ratio:1; object-fit:cover;
  border-radius:var(--r); background:var(--muted); scroll-snap-align:center}
.ps-gallery > :only-child{width:100%; max-width:none; aspect-ratio:4/3}
.ps-body{padding:14px 18px 22px}
.ps-offers{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px}
.ps-name{font-size:1.18rem; line-height:1.3}
.ps-meta{display:flex; align-items:center; flex-wrap:wrap; gap:4px; font-size:.82rem; color:var(--ink-2); margin-top:4px}
.ps-meta a{font-weight:600}
.ps-price{display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; margin:10px 0 6px}
.ps-price b{font-family:var(--ff-d); font-size:1.5rem; letter-spacing:-.02em}
.ps-live{display:inline-flex; align-items:center; gap:4px; font-size:.72rem; font-weight:700; color:var(--live)}
.ps-live svg{width:13px; height:13px}
.ps-buy .pdp-opt{margin-top:14px}
.pill-opt small{font-size:.7rem; color:var(--warn); margin-left:5px; font-weight:600}
.pill-opt.out,.sw.out{opacity:.45; text-decoration:line-through; cursor:not-allowed}
button.pill-opt,button.sw{background:var(--panel); cursor:pointer}
.ps-hint{display:flex; align-items:center; gap:7px; margin-top:12px; font-size:.84rem; font-weight:600; color:var(--warn)}
.ps-hint svg{width:15px; height:15px}
.ps-hint.shake{animation:psShake .4s ease; color:var(--danger)}
@keyframes psShake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.ps-left{margin-top:10px; font-size:.82rem; color:var(--ok); font-weight:600}
.ps-left.low{color:var(--warn)}
.ps-acts{display:flex; gap:8px; margin-top:14px; align-items:center}
.ps-acts .btn{flex:1; padding:0 12px}
.ps-acts .qty{flex:none}
.btn.is-waiting{opacity:.55}
.ps-sec{margin-top:20px; padding-top:16px; border-top:1px solid var(--line-2)}
.ps-sec h3{font-size:.95rem; margin-bottom:8px}
.ps-sec p{font-size:.88rem; color:var(--ink-2)}
.ps-desc{font-size:.88rem; color:var(--ink-2); max-height:none}
.ps-specs{display:grid; grid-template-columns:auto 1fr; gap:6px 16px; font-size:.86rem}
.ps-specs dt{color:var(--ink-3)}
.ps-promise{display:grid; gap:8px; font-size:.84rem}
.ps-promise div{display:flex; align-items:center; gap:9px}
.ps-promise svg{width:17px; height:17px; color:var(--ok)}
.ps-full{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:18px; padding:12px 14px;
  border:1px solid var(--line); border-radius:var(--r-sm); font-size:.86rem; font-weight:600}
.ps-full:hover{border-color:var(--brand); color:var(--brand)}

/* Stock left in a stream: a bar that empties as it sells. */
.stockbar{display:grid; gap:4px; margin:6px 0 2px}
.stockbar span{font-size:.78rem; font-weight:700; color:var(--ok)}
.stockbar i{display:block; height:7px; border-radius:99px; background:var(--muted); overflow:hidden}
.stockbar b{display:block; height:100%; border-radius:inherit; background:var(--ok); transition:width .6s cubic-bezier(.2,.9,.25,1)}
.stockbar.low span{color:var(--live)}
.stockbar.low b{background:linear-gradient(90deg,var(--live),var(--brand))}
.stockbar.out span{color:var(--ink-3)}
.stockbar.out b{background:var(--ink-3)}
.stockbar.sm{gap:3px; margin:4px 0 0}
.stockbar.sm span{font-size:.72rem}
.stockbar.sm i{height:5px}
.stockbar.pulse i{animation:sbPulse .8s ease}
@keyframes sbPulse{30%{box-shadow:0 0 0 3px rgba(224,36,94,.35)}}

/* A live deal: what it takes off, and the clock running down. */
.deal-tag{display:inline-flex; align-items:center; gap:5px; width:max-content; padding:4px 10px; border-radius:var(--r-pill);
  background:var(--live); color:#fff; font-size:.78rem; font-weight:700; font-variant-numeric:tabular-nums}
.deal-tag svg{width:13px; height:13px}
.deal-tag.sm{padding:2px 8px; font-size:.7rem}
.deal-tag.ending{animation:dealPulse 1s ease-in-out infinite}
.deal-tag.over{background:var(--ink-3); animation:none}
@keyframes dealPulse{50%{box-shadow:0 0 0 4px rgba(224,36,94,.3)}}
.fd-chip{display:inline-flex; align-items:center; gap:5px; width:max-content; padding:4px 10px; border-radius:var(--r-pill);
  background:var(--ok-bg); color:var(--ok); font-size:.76rem; font-weight:700}
.fd-chip svg{width:14px; height:14px}

.ws-info{display:inline-flex; align-items:center; gap:4px; width:max-content; margin-top:2px; font-size:.74rem;
  font-weight:600; color:var(--ink-3)}
.ws-info svg{width:13px; height:13px}
.ws-info:hover{color:var(--brand)}
.pin-acts{display:flex; align-items:center; gap:4px; flex:none}
.pin-info{width:38px; height:38px; padding:0; border-radius:50%}
.pinned .deal-tag{margin:2px 0}

/* Over the picture: free delivery and the likes, top right. */
.pl-offers{position:absolute; top:12px; right:12px; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; z-index:2;
  max-width:60%}
.pl-offers .fd-chip{background:rgba(18,128,92,.92); color:#fff}
.pl-likes{display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:var(--r-pill);
  background:rgba(0,0,0,.55); color:#fff; font-size:.76rem; font-weight:700}
.pl-likes svg{width:13px; height:13px; color:#FF5C7A; fill:#FF5C7A}

/* Reactions: a column of buttons on the right; taps float up from it. */
.pl-react{position:absolute; right:10px; bottom:64px; z-index:3; display:flex; flex-direction:column; gap:6px}
.pl-react button{width:40px; height:40px; border-radius:50%; background:rgba(0,0,0,.4); font-size:1.2rem;
  display:grid; place-items:center; transition:transform .12s}
.pl-react button:active{transform:scale(.86)}
.pl-rail-btn{color:#fff; position:relative; display:none !important}
.pl-rail-btn svg{width:19px; height:19px}
.pl-rail-btn span{position:absolute; top:-3px; right:-3px; min-width:17px; height:17px; border-radius:9px; padding:0 4px;
  background:var(--brand); font-size:.64rem; font-weight:800; line-height:17px}
.pl-bursts{position:absolute; right:10px; bottom:110px; width:60px; height:60%; pointer-events:none; z-index:3; overflow:visible}
.bst{position:absolute; bottom:0; left:50%; font-size:1.6rem; animation:bstUp var(--d,2s) ease-out forwards;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}
.bst.mine{font-size:1.9rem}
@keyframes bstUp{
  0%{transform:translate(-50%,0) scale(.6); opacity:0}
  12%{opacity:1; transform:translate(-50%,-20px) scale(1.1)}
  100%{transform:translate(calc(-50% + var(--x,0px)), -320px) rotate(var(--r,0deg)) scale(.9); opacity:0}}
@media (prefers-reduced-motion:reduce){ .bst{animation-duration:.6s} .deal-tag.ending{animation:none} }

/* A flash drop takes over the picture. */
.drop{position:absolute; inset:0; z-index:5; display:grid; place-items:center; padding:14px;
  background:radial-gradient(ellipse at center, rgba(224,36,94,.35), rgba(0,0,0,.72)); animation:dropIn .35s ease}
@keyframes dropIn{from{opacity:0; transform:scale(1.04)}}
.drop-card{position:relative; width:min(340px,100%); max-height:100%; overflow-y:auto; display:grid; gap:7px; justify-items:center;
  text-align:center; padding:16px 16px 14px; background:var(--panel); color:var(--ink); border-radius:18px;
  box-shadow:0 18px 50px rgba(0,0,0,.45)}
.drop-kicker{display:inline-flex; align-items:center; gap:5px; padding:4px 12px; border-radius:var(--r-pill);
  background:var(--live); color:#fff; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  animation:dealPulse 1.2s ease-in-out infinite}
.drop-kicker svg{width:13px; height:13px}
.drop-card img{width:96px; height:96px; border-radius:var(--r); object-fit:cover; background:var(--muted)}
.drop-name{font-size:.95rem; line-height:1.3}
.drop-price b{font-family:var(--ff-d); font-size:1.5rem; color:var(--live)}
.drop-left{font-size:.8rem; font-weight:700; color:var(--live)}
.drop-meter{width:100%; height:8px; border-radius:99px; background:var(--muted); overflow:hidden}
.drop-meter i{display:block; height:100%; background:linear-gradient(90deg,var(--live),var(--brand)); transition:width .4s}
.drop-opts{display:flex; flex-wrap:wrap; justify-content:center; gap:6px}
.drop-opts button{padding:6px 12px; border:1.5px solid var(--line); border-radius:var(--r-pill); font-size:.8rem; font-weight:600}
.drop-opts button.on{border-color:var(--ink)}
.drop-opts button:disabled{opacity:.4; text-decoration:line-through}
.drop-go{width:100%; background:var(--live)}
.drop-go:hover{background:var(--brand-2)}
.drop-go:disabled{opacity:.7}
.drop-clock{font-size:.76rem; color:var(--ink-3); font-variant-numeric:tabular-nums}
.drop-hide{position:absolute; top:8px; right:8px; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  color:var(--ink-3)}
.drop-hide svg{width:15px; height:15px}
.chat-locked{display:flex; align-items:center; gap:6px; padding:8px 14px; font-size:.78rem; font-weight:600;
  color:var(--warn); background:var(--warn-bg)}
.chat-locked svg{width:14px; height:14px}

.pl-fs{margin-left:4px}
.pl-full-top,.pl-chat{display:none}

/* ---- Full screen on a phone (body.live-full, set by live.js) --------
   The video fills the screen, the site's chrome steps aside, and the
   pinned product, the chat and the reactions float over the picture. */
body.live-full{overflow:hidden; padding-bottom:0 !important}
body.live-full .site-head,body.live-full .tabbar,body.live-full .crumbs,body.live-full .wbar,
body.live-full .site-foot,body.live-full footer{display:none !important}
body.live-full .player{position:fixed; inset:0; z-index:90; border-radius:0; aspect-ratio:auto;
  width:100vw; height:100vh; height:100dvh}
body.live-full .player .pl-video{object-fit:cover}
body.live-full .player.audio-only .pl-video{object-fit:contain}
body.live-full .player > .pl-poster{object-fit:cover}
body.live-full .pl-full-top{display:flex; align-items:center; gap:10px; position:absolute; left:0; right:0; top:0; z-index:4;
  padding:calc(8px + env(safe-area-inset-top)) 12px 10px; background:linear-gradient(rgba(0,0,0,.55),transparent); color:#fff}
.pl-exit{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:rgba(0,0,0,.35); color:#fff; flex:none}
.pl-exit svg{width:18px; height:18px}
.pl-full-seller{display:flex; flex-direction:column; min-width:0; line-height:1.25}
.pl-full-seller b{font-size:.9rem}
.pl-full-seller span{font-size:.74rem; opacity:.8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
body.live-full .pl-controls{top:calc(8px + env(safe-area-inset-top)); bottom:auto; left:auto; right:8px; width:auto;
  padding:0; background:none; z-index:5}
body.live-full .pl-controls .pl-time,body.live-full .pl-controls .pl-live-dot{display:none}
body.live-full .pl-fs{display:none}
body.live-full .pl-react{bottom:calc(150px + env(safe-area-inset-bottom))}
body.live-full .pl-rail-btn{display:grid !important}
body.live-full .pl-bursts{bottom:calc(330px + env(safe-area-inset-bottom)); height:40%}
body.live-full .pinned{position:absolute; left:10px; right:62px; bottom:calc(12px + env(safe-area-inset-bottom)); margin:0;
  background:rgba(255,255,255,.96); color:#0B0B0C; border:0; box-shadow:0 10px 30px rgba(0,0,0,.35); z-index:4}
body.live-full .pinned .btn-ghost{color:#3F4348}
body.live-full .pl-chat{display:flex; flex-direction:column; justify-content:flex-end; gap:4px; position:absolute; z-index:3;
  left:10px; right:70px; bottom:calc(128px + env(safe-area-inset-bottom)); max-height:28vh; overflow:hidden; pointer-events:none;
  -webkit-mask-image:linear-gradient(transparent,#000 35%); mask-image:linear-gradient(transparent,#000 35%)}
body.live-full .pl-chat .cm{width:max-content; max-width:100%; padding:5px 10px; border-radius:14px; background:rgba(0,0,0,.4);
  color:#fff; font-size:.82rem; text-shadow:0 1px 2px rgba(0,0,0,.4)}
body.live-full .pl-chat .cm b{color:#FFD27A}
body.live-full .pl-chat .cm.me{background:rgba(255,95,53,.85)}
body.live-full .pl-chat .cm.me b{color:#fff}
body.live-full .drop{z-index:6}
body.live-full .wshop{z-index:120}
body.live-full .pl-overlay{z-index:3}
/* Chat, typed over the video (phones). */
body.live-full.chat-open .wside .chat{position:fixed; left:0; right:0; bottom:0; z-index:120; height:min(60vh,480px);
  border-radius:20px 20px 0 0; box-shadow:0 -12px 40px rgba(0,0,0,.35); padding-bottom:env(safe-area-inset-bottom)}
/* Wide screens in full screen: products and chat slide in from the right. */
@media (min-width:1000px){
  body.live-full .pinned{right:auto; width:380px; bottom:24px}
  body.live-full .pl-react{bottom:100px}
  body.live-full .wside{position:fixed; top:0; right:0; bottom:0; height:auto; width:380px; z-index:110; border-radius:0;
    transform:translateX(105%); transition:transform .24s cubic-bezier(.2,.9,.25,1)}
  body.live-full.side-open .wside{transform:none}
}

/* Conversion: "just bought", sold counts, the basket shortcut */
.stockbar > span{display:flex; align-items:baseline; gap:8px}
.stockbar em{font-style:normal; font-size:.72rem; font-weight:700; color:var(--ink-3)}
.stockbar em::before{content:"🔥 "}
.pl-proof{position:absolute; left:12px; top:52px; z-index:4; display:grid; gap:6px; pointer-events:none; max-width:70%}
.pf{padding:6px 12px; border-radius:var(--r-pill); background:rgba(255,255,255,.95); color:#0B0B0C; font-size:.8rem;
  box-shadow:0 6px 18px rgba(0,0,0,.25); animation:pfIn .35s cubic-bezier(.2,.9,.25,1); transition:opacity .4s, transform .4s}
.pf b{font-weight:800}
.pf{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pf.out{opacity:0; transform:translateY(-6px)}
@keyframes pfIn{from{opacity:0; transform:translateX(-16px)}}
.pl-basket{position:absolute; right:10px; top:52px; z-index:4; display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px 6px 10px; border-radius:var(--r-pill); background:var(--brand); color:#fff; font-size:.8rem; font-weight:700;
  box-shadow:0 6px 18px rgba(0,0,0,.3)}
.pl-basket svg{width:16px; height:16px}
.pl-basket b{background:#fff; color:var(--brand); border-radius:10px; padding:0 6px; font-size:.72rem}
.pl-basket.bump{animation:plBump .5s ease}
@keyframes plBump{40%{transform:scale(1.12)}}
.pinned.pin-new{animation:pinNew 1.1s ease}
@keyframes pinNew{0%{transform:translateY(8px); opacity:.4} 30%{transform:none; opacity:1; box-shadow:0 0 0 3px var(--live), var(--sh-lg)}}
body:not(.live-full) .pl-basket{display:none}

/* ---- A phone, not full screen: a small player in the page ---------- */
@media (max-width:820px){
  /* One heart, once the stream is playing; the rest are for full screen. */
  body:not(.live-full) .pl-react{top:auto; bottom:52px; right:8px}
  body:not(.live-full) .pl-react button:not(:first-child){display:none}
  body:not(.live-full) .player:not(.playing) .pl-react{display:none}
  body:not(.live-full) .pl-offers{top:10px; right:10px}
  /* The pinned product over the bottom of the picture while it plays — it
     used to sit inside the 16:9 box and be cut off. Before playing, the
     product bar along the bottom of the screen carries it. */
  body:not(.live-full) .player.lk .pinned{position:absolute; left:8px; right:56px; bottom:44px; margin:0; padding:6px 8px;
    gap:8px; border:0; box-shadow:0 6px 20px rgba(0,0,0,.35)}
  body:not(.live-full) .player.lk:not(.playing) .pinned{display:none !important}
  body:not(.live-full) .player.lk .pinned img{width:40px; height:40px}
  body:not(.live-full) .player.lk .pinned .pin-tag,
  body:not(.live-full) .player.lk .pinned [data-pin-stock],
  body:not(.live-full) .player.lk .pinned .pin-info{display:none}
  body:not(.live-full) .player.lk .pinned b[data-pin-name]{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.8rem}
  body:not(.live-full) .player.lk .pinned .btn{height:34px; padding:0 12px}
}

/* ---- Full screen: top rows, a compact pinned card, chat above it ---- */
body.live-full .pl-tag{top:calc(62px + env(safe-area-inset-top)); left:12px}
body.live-full .pl-offers{top:calc(62px + env(safe-area-inset-top)); right:12px; left:auto; justify-content:flex-end; max-width:62%}
body.live-full .pl-proof{top:calc(104px + env(safe-area-inset-top)); left:12px; max-width:calc(100% - 150px)}
body.live-full .pl-basket{top:calc(104px + env(safe-area-inset-top)); right:12px}
body.live-full .pinned{align-items:flex-start; padding:10px; gap:10px}
body.live-full .pinned img{width:56px; height:56px}
body.live-full .pinned .pin-tag{font-size:.6rem}
body.live-full .pinned b[data-pin-name]{font-size:.84rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden}
body.live-full .pinned .pin-price{flex-wrap:wrap; row-gap:0}
body.live-full .pinned .pin-price b{font-size:1rem}
body.live-full .pin-acts{flex-direction:column-reverse; align-items:flex-end; gap:2px; align-self:center}
body.live-full .pin-acts .btn-primary{height:38px; padding:0 14px}
body.live-full .pin-info{width:32px; height:32px}
/* The chat sits on top of the pinned card, however tall it is (--pin-h,
   measured by live.js). */
body.live-full .pl-chat{bottom:calc(var(--pin-h, 110px) + 22px + env(safe-area-inset-bottom))}
@media (prefers-reduced-motion:reduce){ .pf,.pinned.pin-new,.pl-basket.bump{animation:none} }

@media (max-width:820px){
  body:not(.live-full) .player.lk .pinned [data-pin-was]{display:none}
  body:not(.live-full) .player.lk .pinned .pin-price b{white-space:nowrap}
}
.wb-chip span b{font-weight:700}

/* A flash drop's options, asked for in a sheet when "Grab it" is tapped first. */
.drop-ask .drop-ask-opts{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; margin:16px 0 10px}
.drop-ask .drop-ask-opts .btn{height:44px}
.drop-ask .drop-ask-opts small{font-size:.68rem; color:var(--ink-3); margin-left:4px}
.drop-ask .btn-ghost{width:100%}

/* Buyer Protection badge (buyer_protection_badge()) */
.bp-badge{display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px;
  background:var(--ok-bg); color:var(--ok); border:1px solid color-mix(in srgb, var(--ok) 40%, transparent);
  font-size:.76rem; font-weight:800; line-height:1.2; text-decoration:none; white-space:nowrap}
.bp-badge svg{width:15px; height:15px; flex:none}
a.bp-badge:hover{background:color-mix(in srgb, var(--ok) 16%, var(--ok-bg))}
.bp-badge.bp-lg{padding:7px 14px; font-size:.86rem; gap:7px}
.bp-badge.bp-lg svg{width:18px; height:18px}
[data-theme=dark] .bp-badge{color:#3DDC8A; border-color:rgba(61,220,138,.4)}

/* ---------------- Search tabs, brands (search.php, brands.php, brand.php) ---------------- */
.s-tabs{display:flex; gap:4px; margin:0 0 18px; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none}
.s-tabs::-webkit-scrollbar{display:none}
.s-tab{display:inline-flex; align-items:center; gap:6px; padding:10px 14px; color:var(--ink-2); font-weight:600;
  border-bottom:2.5px solid transparent; margin-bottom:-1px; white-space:nowrap; text-decoration:none}
.s-tab svg{width:16px; height:16px}
.s-tab span{font-size:.75rem; font-weight:700; padding:1px 7px; border-radius:var(--r-pill); background:var(--muted); color:var(--ink-3)}
.s-tab:hover{color:var(--ink)}
.s-tab.on{color:var(--ink); border-bottom-color:var(--brand)}
.s-tab.on span{background:var(--brand-050); color:var(--brand)}
.s-more{text-align:center; margin:18px 0 6px}

.bc-logo{position:relative; display:grid; place-items:center; flex:none; width:56px; height:56px; border-radius:14px;
  background:#fff; border:1px solid var(--line); overflow:hidden}
.bc-logo img{position:absolute; inset:12%; width:76%; height:76%; object-fit:contain}
.bc-big{width:84px; height:84px; border-radius:20px}

.bcards{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr))}
.bcard{display:flex; flex-direction:column; align-items:center; gap:6px; padding:16px 10px; text-align:center;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r); color:inherit; text-decoration:none;
  transition:border-color .15s, box-shadow .15s}
.bcard:hover{border-color:var(--ink-3); box-shadow:var(--sh-sm)}
.bcard .bc-logo{width:72px; height:72px; border-radius:18px}
.bcard b{font-size:.92rem; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bcard > span:last-child{font-size:.78rem; color:var(--ink-3)}

.brand-find{display:flex; align-items:center; gap:8px; max-width:520px; margin:0 0 22px; padding:0 12px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-pill)}
.brand-find:focus-within{border-color:var(--ink-3)}
.brand-find svg{width:18px; height:18px; color:var(--ink-3)}
.brand-find input{flex:1; min-width:0; border:0; outline:0; background:transparent; padding:11px 0; font:inherit; color:var(--ink)}

.brand-az{margin-top:8px}
.az-l{font-size:1.05rem; margin:22px 0 6px; color:var(--brand); font-weight:800}
.az-list{display:grid; gap:2px 18px; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.az-row{display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:var(--r-sm); color:inherit; text-decoration:none}
.az-row:hover{background:var(--muted)}
.az-row .bc-logo{width:44px; height:44px; border-radius:11px}
.az-row b{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.az-row > span:last-of-type{font-size:.8rem; color:var(--ink-3)}
.az-row > svg{width:16px; height:16px; color:var(--ink-3)}

.brand-hero{display:flex; align-items:center; gap:18px; margin:22px 0 20px}
.brand-hero h1{margin-bottom:2px}
.brand-hero p{color:var(--ink-2); max-width:62ch}

.sg-live{font-style:normal; font-size:.62rem; font-weight:800; letter-spacing:.04em; color:#fff; background:var(--live);
  padding:1px 5px; border-radius:4px; vertical-align:1px}
.sg-av.sg-brand{border-radius:8px; background:#fff; object-fit:contain; border:1px solid var(--line); color:var(--brand)}
.pdp-brand{display:inline-flex; align-items:center; gap:5px; margin-bottom:4px; font-size:.8rem; font-weight:700;
  color:var(--brand); text-decoration:none; text-transform:uppercase; letter-spacing:.04em}
.pdp-brand svg{width:14px; height:14px}
.pdp-brand:hover{text-decoration:underline}

/* Analytics consent (inc/analytics.php) --------------------------------- */
/* A card at the foot of the screen, above the phone tab bar: it asks, it
   does not block the page — shopping works the same whatever the answer. */
.consent{position:fixed; z-index:90; left:12px; right:12px; bottom:12px; max-width:560px; margin:0 auto;
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; padding:14px 16px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-lg)}
.consent[hidden]{display:none}
.consent-body{flex:1 1 260px; min-width:0}
.consent-body b{display:block; font-size:.9rem; margin-bottom:3px}
.consent-body p{font-size:.8rem; color:var(--ink-2); line-height:1.45}
.consent-acts{display:flex; gap:8px; margin-left:auto}
@media (max-width:899px){ .consent{bottom:calc(68px + env(safe-area-inset-bottom))} }
.foot-lnk{display:block; padding:4px 0; font-size:.83rem; color:var(--ink-3); text-align:left}

/* ------------------------------------------------------- digital products
   Downloads, licence keys, gift cards (inc/digital.php): the badge, the
   checkout consent, Downloads & codes (account-library.php), download.php. */
.dg-badge{display:inline-flex; align-items:center; gap:5px; padding:2px 9px 2px 7px; border-radius:var(--r-pill);
  background:var(--brand-050); color:var(--brand-2); font-size:.74rem; font-weight:700; line-height:1.6; white-space:nowrap}
.dg-badge svg{width:13px; height:13px}
.consent-box{display:flex; gap:10px; align-items:flex-start; margin:16px 0 4px; padding:12px 14px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--panel-2); font-size:.84rem; line-height:1.5; cursor:pointer}
.consent-box input{margin-top:3px; width:18px; height:18px; flex:none; accent-color:var(--brand)}
.consent-box:has(input:checked){border-color:var(--brand)}
.lib-list{display:grid; gap:14px}
.lib-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:18px; scroll-margin-top:90px}
.lib-card:target{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-050)}
.lib-head{display:flex; gap:14px; align-items:flex-start}
.lib-img{width:64px; height:64px; flex:none; border-radius:var(--r-sm); overflow:hidden; background:var(--muted);
  display:grid; place-items:center; color:var(--ink-3)}
.lib-img img{width:100%; height:100%; object-fit:cover}
.lib-img svg{width:26px; height:26px}
.lib-title{min-width:0}
.lib-title h2{font-size:1.02rem; margin:6px 0 2px; line-height:1.35}
.lib-facts{display:flex; flex-wrap:wrap; gap:6px 18px; margin:14px 0 0; font-size:.84rem}
.lib-facts dt{color:var(--ink-3); font-size:.74rem}
.lib-facts dd{margin:0; font-weight:600}
.lib-codes{margin-top:14px}
.lib-codes form{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.code-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 12px; margin-bottom:8px;
  border:1px dashed var(--brand); border-radius:var(--r-sm); background:var(--brand-050)}
.code-row code{font:700 1.02rem ui-monospace, Menlo, monospace; letter-spacing:.04em; word-break:break-all; flex:1; min-width:0}
.code-row .tiny code{font-size:.86rem; font-weight:700}
.lib-files{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:8px}
.lib-files li{display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--line-2); border-radius:var(--r-sm)}
.lf-ico{width:36px; height:36px; flex:none; border-radius:var(--r-xs); background:var(--muted); display:grid; place-items:center; color:var(--ink-2)}
.lf-ico svg{width:18px; height:18px}
.lf-name{flex:1; min-width:0; display:flex; flex-direction:column}
.lf-name b{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lib-how{margin-top:14px; padding:12px 14px; background:var(--panel-2); border-radius:var(--r-sm); font-size:.86rem}
.lib-how h3{font-size:.86rem; margin:0 0 4px}
.lib-how p{margin:0 0 8px; line-height:1.55}
.lib-foot{margin-top:14px; padding-top:12px; border-top:1px solid var(--line-2)}
.dl-gone{text-align:center}
.dl-ico{width:64px; height:64px; margin:0 auto 14px; border-radius:50%; display:grid; place-items:center;
  background:var(--brand-050); color:var(--brand)}
.dl-ico svg{width:28px; height:28px}
.dl-gone h1{font-size:1.4rem; margin-bottom:8px}
.dl-gone p{color:var(--ink-2); margin:0 auto 20px; max-width:42ch}
.dl-acts{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.pdp-digital .dl-fact{display:flex; justify-content:space-between; gap:12px; font-size:.86rem; padding:6px 0}
.pdp-digital .df-l{color:var(--ink-3)}
@media (max-width:560px){
  .lib-files li{flex-wrap:wrap}
  .lib-files form{width:100%}
  .lib-files form .btn{width:100%}
}

.lib-note{display:flex; gap:8px; align-items:flex-start; margin-top:16px}
.lib-note svg{width:16px; height:16px; flex:none; margin-top:1px}