/* =====================================================================
   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-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 svg{height:26px; width:auto}

.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)}
.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}
.hn-cats{background:var(--ink); color:#fff; font-weight:600}
.hn-cats:hover{background:var(--ink-2)}
.hn-right{margin-left:auto; color:var(--ok)}

/* mega menu */
.mega{
  display:none; position:absolute; left:0; right:0; background:var(--panel);
  border-bottom:1px solid var(--line); box-shadow:var(--sh-lg); z-index:65;
}
.mega.on{display:block}
.mega{padding:0}
.mega > *{max-width:var(--wrap); margin:0 auto}
.mm-tabs{display:none}
@media (min-width:900px){
  .mega{display:none; grid-template-columns:250px 1fr; max-width:var(--wrap); margin:0 auto;
        border:1px solid var(--line); border-top:0; border-radius:0 0 var(--r) var(--r)}
  .mega.on{display:grid}
  .mm-tabs{display:block; border-right:1px solid var(--line); padding:12px 0; background:var(--panel-2)}
  .mm-panels{padding:20px 24px}
}
.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-fit,minmax(170px,1fr)); gap: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}
.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);
}
.pc-save{
  position:absolute; top:8px; right:8px; width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.94); display:grid; place-items:center; color:var(--ink-2); box-shadow:var(--sh-sm);
}
.pc-save:hover{color:var(--brand)}
.pc-save svg{width:16px; height:16px}
.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 */
.lv-rail{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(210px,1fr); 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)}

/* 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; border:1px solid var(--line);
  border-radius:var(--r); margin-bottom:16px}
.pdp-seller:hover{border-color:var(--brand)}
.pdp-seller b{font-size:.9rem}
.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{margin-left:auto; font-size:.82rem; font-weight:600; color:var(--brand)}
.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-vat{font-size:.78rem; color:var(--ink-3); margin-top:3px}
.pdp-opt{margin-top: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}
.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}

.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}
.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)}

.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 svg{height:22px}
  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}
.tb-dot{position:absolute; top:6px; right:calc(50% - 16px); width:7px; height:7px; border-radius:50%;
  background:var(--live)}
.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}

.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:900px){ .mega{left:var(--gutter); right:var(--gutter)} }
@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}
@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}
@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}

/* =====================================================================
   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}
@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)}}