/* Off-white page, white cards. The cream this started in tinted every product
   photograph warm; pure white went the other way and glared, which on a phone
   held at arm's length in daylight is worse. A page a couple of points off
   white carries the cards without competing with them, and all the colour
   still lands on the goods. */
:root{
  --cream:#f2f2f1; --paper:#fff; --ink:#14171a; --muted:#66625c;
  --line:rgba(20,23,26,.10); --soft:rgba(20,23,26,.04);
  --go:#1d6b3f; --wait:#8a6a1f; --hot:#9c3326;
  --accent:#14171a; --ground:#eeeeec; --softer:#fafafa;
  --shade:0 1px 2px rgba(20,23,26,.055), 0 12px 30px -10px rgba(20,23,26,.20),
          0 2px 8px -3px rgba(20,23,26,.07);
  /* the price has its own colour, because on this grid it is the headline */
  --price:#c2410c;
  --r:14px; --tab:60px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{background:var(--ground);color:var(--ink);
  font:15px/1.5 ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;transition:background .25s}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.015em}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.wrap{max-width:560px;margin:0 auto;
  padding:0 16px calc(var(--tab) + 40px + env(safe-area-inset-bottom))}
.wide{max-width:1060px}
.mut{color:var(--muted)} .sm{font-size:13px} .sp{margin-left:auto}
.xs{font-size:11.5px;letter-spacing:.045em;text-transform:uppercase;color:var(--muted)}
.hr{height:1px;background:var(--line);margin:14px 0}
.row{display:flex;align-items:center;gap:12px}

/* top bar --------------------------------------------------------------- */
.top{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--ground) 92%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top .in{max-width:560px;margin:0 auto;padding:9px 12px;display:flex;
  align-items:center;gap:8px;min-height:50px}
.wide-top .in{max-width:1060px}
.logo{font-weight:600;letter-spacing:-.02em;font-size:16px;padding-left:4px}
.logo span{color:var(--muted);font-weight:400}
.ic{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;position:relative;flex:0 0 auto;border:0;background:transparent;cursor:pointer}
.ic svg{width:21px;height:21px}
.ic:active{background:var(--soft)}
.bdg{position:absolute;top:3px;right:2px;min-width:16px;height:16px;padding:0 4px;
  border-radius:9px;background:var(--hot);color:#fff;font-size:10px;font-style:normal;
  font-weight:600;display:flex;align-items:center;justify-content:center}

/* tab bar --------------------------------------------------------------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;
  background:color-mix(in srgb,var(--ground) 94%,transparent);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tabbar a{flex:1;height:var(--tab);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;color:var(--muted);position:relative}
.tabbar a svg{width:22px;height:22px}
.tabface{width:23px;height:23px;border-radius:50%;object-fit:cover;display:block;
  box-shadow:0 0 0 1.5px var(--ground)}
.tabbar a.on .tabface{box-shadow:0 0 0 2px var(--ink)}
.tabbar a span{font-size:10.5px;letter-spacing:.01em}
.tabbar a.on{color:var(--ink)}
.tabbar a.on svg{stroke-width:2.1}
.pip{position:absolute;top:11px;left:calc(50% + 7px);width:7px;height:7px;
  border-radius:50%;background:var(--hot)}
/* A count, not a dot: "there is one thing waiting" is more use than "there is
   something". Sits on the icon the way a notification badge does. */
.pip.count{top:6px;left:calc(50% + 4px);width:auto;height:16px;min-width:16px;
  padding:0 4px;border-radius:999px;color:#fff;
  font-weight:700;font-size:10.5px;line-height:16px;
  text-align:center;box-shadow:0 0 0 2px var(--ground)}

/* generic --------------------------------------------------------------- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shade)}
.pad{padding:16px}
.btn{display:block;width:100%;border:0;border-radius:12px;padding:14px;
  background:var(--accent);color:#fff;font-weight:600;cursor:pointer;text-align:center}
a.btn{text-align:center;text-decoration:none;box-sizing:border-box}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);font-weight:500}
.btn.sm2{padding:9px 14px;width:auto;display:inline-flex;align-items:center;
  justify-content:center;min-height:38px;font-size:13px}
.btn[disabled]{opacity:.38;pointer-events:none}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;padding:4px 9px;
  border-radius:999px;background:var(--soft);color:var(--muted);white-space:nowrap}
.pill.go{background:rgba(29,107,63,.1);color:var(--go)}
.pill.wait{background:rgba(138,106,31,.12);color:var(--wait)}
.pill.hot{background:rgba(156,51,38,.1);color:var(--hot)}
.dot{width:5px;height:5px;border-radius:50%;background:currentColor}
input,select,textarea{width:100%;font:inherit;padding:13px 14px;border-radius:11px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}
label.f{display:block;margin:0 0 14px}
label.f .xs{display:block;margin-bottom:6px}
.seg{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.seg::-webkit-scrollbar{display:none}
.seg button{padding:8px 14px;border-radius:999px;border:1px solid var(--line);
  background:transparent;font-size:13px;cursor:pointer;color:var(--muted);white-space:nowrap}
.seg button.on{background:var(--ink);color:var(--ground);border-color:var(--ink);font-weight:500}
.empty{padding:40px 18px;text-align:center;color:var(--muted);font-size:13.5px}

/* shop cards ------------------------------------------------------------ */
.shops{display:grid;gap:13px}
.shopcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:block;box-shadow:var(--shade)}
.bn{height:84px;position:relative}
.bn .av{position:absolute;left:16px;bottom:-21px;width:54px;height:54px;border-radius:50%;
  border:3px solid var(--paper);display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:600;font-size:17px;letter-spacing:-.02em}
.bn .tag{position:absolute;right:12px;top:12px;background:rgba(255,255,255,.92);
  color:var(--ink);font-size:11px;padding:4px 9px;border-radius:999px;font-weight:500}
.shopcard .bd{padding:28px 16px 14px}
.shopcard .nm{font-size:16.5px;font-weight:600;letter-spacing:-.015em}
.shopcard .tl{font-size:13px;color:var(--muted);margin-top:2px}
.strip{display:flex;gap:7px;margin:12px 0 0;overflow:hidden}
.strip .mini{width:54px;height:54px;border-radius:10px;background:var(--softer);
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;overflow:hidden}
.strip .mini img{width:84%;height:84%;object-fit:contain}
.strip .mini svg{width:64%;height:64%;color:var(--accent);opacity:.75}
.strip .more{width:54px;height:54px;border-radius:10px;border:1px dashed var(--line);
  display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--muted);flex:0 0 auto}

/* product grid ---------------------------------------------------------- */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pc{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shade);
  overflow:hidden;cursor:pointer;text-align:left;padding:0;width:100%;display:block}
/* THE PHOTO TILE IS WHITE. Always, in every shop.
   It used to take the seller's theme colour, so a shop on the warm theme sat
   every product on cream - and a cut-out photographed on white, placed on
   cream, loses its edges and its contrast at the same time. Every marketplace
   worth copying puts the goods on white and spends the brand colour on the
   buttons and the badges instead. */
/* A PORTRAIT TILE, not a square one.
   Our cut-outs are trimmed to the product, so the photo's shape IS the
   product's shape - and object-fit:contain into a square means a tall thin
   thing covers a fraction of the tile it was given. Measured: a tee covers
   84% of a square, a phone 50%, a standing fan 37%, a lipstick 27%. That is
   why the clothes looked right and the gadgets looked like toys. A 3:4 tile
   is the shape most things in a shop actually are. */
.ph{aspect-ratio:3/4;background:#fff;display:flex;align-items:center;
  justify-content:center;overflow:hidden}
/* and it fills the tile. 86% in a padded box left the product floating in a
   third of a card the shopper paid attention to */
.ph img{width:96%;height:96%;object-fit:contain}
.ph.ill svg{width:52%;height:52%;color:var(--accent);opacity:.8}
.pc .bd{padding:9px 10px 11px}
.pc .nm{font-size:13px;font-weight:500;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc .pr{font-size:16px;font-weight:700;margin-top:4px;letter-spacing:-.02em}
.list .pc{display:flex;align-items:center;gap:12px;padding:10px}
.list .ph{width:68px;height:68px;aspect-ratio:auto;border-radius:10px;flex:0 0 auto}
.list .bd{padding:0}

/* sheet ----------------------------------------------------------------- */
.scrim{position:fixed;inset:0;background:rgba(20,23,26,.44);z-index:60;opacity:0;
  pointer-events:none;transition:opacity .2s}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:61;background:var(--paper);
  border-radius:20px 20px 0 0;max-height:90vh;overflow-y:auto;
  padding:8px 18px calc(20px + env(safe-area-inset-bottom));
  transform:translateY(102%);
  /* Parked off the bottom is not the same as gone. A closed sheet stayed in
     the tab order and kept its handlers live, so a screen-reader user kept
     swiping into an off-screen Send button, and a second tap inside the
     260ms slide-out fired it again - double top-up, double send, double
     shop-create, all one fast tap away. */
  visibility:hidden;pointer-events:none;
  transition:transform .26s cubic-bezier(.22,.8,.3,1),visibility 0s linear .26s}
.sheet.on{transform:none;visibility:visible;pointer-events:auto;
  transition:transform .26s cubic-bezier(.22,.8,.3,1)}
.sheet .grab{width:40px;height:4px;border-radius:9px;background:var(--line);margin:4px auto 12px}
@media(min-width:620px){
  /* On a phone a closed sheet is parked off the bottom of the screen. On a
     laptop it is centred and merely transparent - which left an invisible
     470px panel sitting over the middle of every page, eating clicks, for
     the rest of the session. Transparent is not gone. */
  .sheet{left:50%;right:auto;bottom:auto;top:50%;width:470px;border-radius:16px;
    transform:translate(-50%,-44%) scale(.97);opacity:0;max-height:86vh;
    pointer-events:none;visibility:hidden}
  .sheet.on{transform:translate(-50%,-50%);opacity:1;
    pointer-events:auto;visibility:visible}
  .sheet .grab{display:none}
}
.toast{position:fixed;left:50%;bottom:calc(var(--tab) + 22px);transform:translate(-50%,20px);
  background:var(--ink);color:var(--cream);padding:11px 18px;border-radius:999px;
  font-size:13.5px;z-index:80;opacity:0;transition:.22s;pointer-events:none;max-width:84vw;
  text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.top{bottom:auto;top:calc(env(safe-area-inset-top) + 14px);transform:translate(-50%,-20px)}
.toast.top.on{transform:translate(-50%,0)}

.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:11px;
  overflow:hidden;width:128px}
.qty button{width:42px;height:42px;border:0;background:transparent;font-size:18px;cursor:pointer}
.qty b{flex:1;text-align:center;font-weight:600}
.big{width:100%;aspect-ratio:1;max-height:34vh;background:#fff;border-radius:12px;
  display:flex;align-items:center;justify-content:center;margin:0 0 14px;overflow:hidden}
.big img{width:84%;height:84%;object-fit:contain}
.big svg{width:46%;height:46%;color:var(--accent);opacity:.8}
.ok{text-align:center;padding:10px 0 4px}
.ok .tick{width:46px;height:46px;border-radius:50%;background:rgba(29,107,63,.12);
  color:var(--go);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:22px}

/* chat ------------------------------------------------------------------ */
.thr{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--soft)}
.thr:last-child{border-bottom:0}
.av{width:46px;height:46px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;color:#fff;font-weight:600;font-size:15px}
.av img,.bn .av img,.prev .av img,.hdr .av img{width:100%;height:100%;border-radius:50%;
  object-fit:cover;display:block}
.facepick{display:flex;align-items:center;gap:13px;background:var(--paper);
  border:1px solid var(--line);border-radius:12px;padding:12px 13px}
.facepick .pvf{width:58px;height:58px;border-radius:50%;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:17px;
  overflow:hidden}
.facepick .pvf img{width:100%;height:100%;object-fit:cover;display:block}
.facepick input[type=file]{display:none}
/* ---- the conversation --------------------------------------------------
   Built to the conventions every Nigerian buyer already knows from WhatsApp,
   because that is where this trade happens today: bubbles with tails,
   grouped runs, the time and the ticks inside the bubble, a date divider,
   and a typing indicator. The conventions are borrowed; the colours are
   OnePoint's own - a green that is not ours on a page that is would read as
   a different app wearing our header.                                     */
.msgs{padding:10px 14px calc(var(--tab) + 86px);
  /* a quiet weave, so bubbles sit ON something rather than floating */
  background-color:var(--ground);
  background-image:
    radial-gradient(circle at 12px 12px, rgba(20,23,26,.030) 1.1px, transparent 1.2px),
    radial-gradient(circle at 36px 36px, rgba(20,23,26,.022) 1.1px, transparent 1.2px);
  background-size:48px 48px;
  /* a handful of messages sits just above the composer, the way a phone
     chat does, rather than clinging to the top of an empty screen */
  min-height:calc(100vh - 230px);
  display:flex;flex-direction:column;justify-content:flex-end}

/* scoped to the thread: `.day` as a bare class also matched the map's
   daytime sky, and every span inside it went uppercase */
.msgs .day{display:flex;justify-content:center;margin:12px 0 14px}
.msgs .day span{background:rgba(255,255,255,.92);border:1px solid var(--line);
  color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.03em;
  padding:4px 11px;border-radius:999px;text-transform:uppercase}

.b{position:relative;max-width:80%;width:fit-content;padding:7px 10px 6px;
  border-radius:12px;margin:0 0 2px;font-size:14.5px;line-height:1.42;
  box-shadow:0 1px 1px rgba(20,23,26,.07);word-break:break-word}
/* a run of messages from one person closes up; only the last one gets a tail */
.b + .b{margin-top:2px}
.b.gap{margin-top:9px}
.b.me{margin-left:auto;background:var(--accent);color:#fff}
.b.them{background:var(--paper);color:var(--ink)}
.b.tail{margin-bottom:9px}
.b.me.tail{border-bottom-right-radius:3px}
.b.them.tail{border-bottom-left-radius:3px}
/* The tail is the classic two-piece flick: a rounded lobe in the bubble's
   own colour, then a smaller lobe in the page colour cutting the concave
   edge back out of it. A single radial-gradient square reads as a notch. */
.b.tail::before,.b.tail::after{content:'';position:absolute;bottom:0;height:13px}
.b.me.tail::before{right:-7px;width:15px;background:var(--accent);
  border-bottom-left-radius:15px 13px}
.b.me.tail::after{right:-7px;width:7px;background:var(--ground);
  border-bottom-left-radius:9px 13px}
.b.them.tail::before{left:-7px;width:15px;background:var(--paper);
  border-bottom-right-radius:15px 13px}
.b.them.tail::after{left:-7px;width:7px;background:var(--ground);
  border-bottom-right-radius:9px 13px}

/* the time and the ticks ride along the last line, as they do everywhere */
.b .meta{float:right;display:inline-flex;align-items:center;gap:3px;
  margin:6px 0 -2px 8px;font-size:10.5px;line-height:1;opacity:.62;white-space:nowrap}
.b.me .meta{color:#fff}
.b.them .meta{color:var(--muted)}
.b .meta svg{width:15px;height:11px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.b.me .meta.read{opacity:1;color:#8fd0ff}

.b.sys{max-width:84%;margin:10px auto;text-align:center;background:rgba(255,255,255,.88);
  border:1px solid var(--line);color:var(--muted);font-size:12px;box-shadow:none;
  padding:7px 12px;border-radius:9px}

/* money, as its own card inside the bubble */
.b .mm{display:flex;align-items:center;gap:9px;margin:-1px 0 5px;padding:9px 10px;
  border-radius:9px;background:rgba(255,255,255,.17)}
.b.them .mm{background:var(--soft)}
.b .mm i{width:28px;height:28px;border-radius:50%;flex:0 0 auto;display:grid;
  place-items:center;background:rgba(255,255,255,.2);font-style:normal;font-size:13px}
.b.them .mm i{background:var(--go);color:#fff}
.b .mm b{display:block;font-size:17px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.b .mm span{display:block;font-size:11px;opacity:.75;margin-top:1px}

/* somebody is writing */
.typing{display:flex;align-items:center;gap:4px;width:fit-content;margin:0 0 9px;
  padding:11px 13px;border-radius:12px;border-bottom-left-radius:3px;
  background:var(--paper);box-shadow:0 1px 1px rgba(20,23,26,.07)}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);opacity:.5;
  animation:owtype 1.25s infinite}
.typing i:nth-child(2){animation-delay:.18s}
.typing i:nth-child(3){animation-delay:.36s}
@keyframes owtype{0%,60%,100%{transform:translateY(0);opacity:.4}
                  30%{transform:translateY(-4px);opacity:.9}}
@media(prefers-reduced-motion:reduce){ .typing i{animation:none} }

.composer{position:fixed;left:0;right:0;bottom:var(--tab);z-index:44;display:flex;gap:8px;
  align-items:flex-end;padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--ground) 94%,transparent);
  backdrop-filter:saturate(1.3) blur(8px);border-top:1px solid var(--line)}
.composer .pill{flex:1;display:flex;align-items:center;gap:6px;min-width:0;
  background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:2px 4px 2px 6px}
.composer input{border:0;background:none;padding:10px 6px;flex:1;min-width:0;
  font-size:15px;border-radius:0}
.composer input:focus{outline:none}
.composer .ic{background:var(--accent);color:#fff;flex:0 0 auto}
.composer .ic.alt{background:transparent;color:var(--muted);width:34px;height:34px}
.composer .ic.alt svg{width:19px;height:19px}
.composer .ic.alt{background:var(--paper);color:var(--ink);border:1px solid var(--line)}

/* wallet ---------------------------------------------------------------- */
.bal{border-radius:18px;padding:20px;color:#fff;background:var(--accent);position:relative;
  overflow:hidden}
.bal:after{content:'';position:absolute;right:-40px;top:-50px;width:170px;height:170px;
  border-radius:50%;background:rgba(255,255,255,.07)}
.bal .n{font-size:33px;font-weight:600;letter-spacing:-.03em;margin:5px 0 0}
.bal .sub{font-size:12.5px;opacity:.72}
.acts{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:14px 0 0}
.acts button{background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:13px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;
  font-size:12px}
.acts svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.tx{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--soft)}
.tx:last-child{border-bottom:0}
.tx .ti{width:34px;height:34px;border-radius:50%;background:var(--softer);display:flex;
  align-items:center;justify-content:center;flex:0 0 auto;font-size:14px}
.amt{font-weight:600;white-space:nowrap}
.amt.in{color:var(--go)}

/* seller designer ------------------------------------------------------- */
.steps{display:flex;gap:5px;margin:16px 0 18px}
.steps i{flex:1;height:3px;border-radius:3px;background:var(--line)}
.steps i.on{background:var(--accent)}
.swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sw2{border:1px solid var(--line);border-radius:12px;padding:10px;cursor:pointer;
  background:var(--paper);text-align:left}
.sw2.on{outline:2px solid var(--ink);outline-offset:-1px}
.sw2 .chip{height:34px;border-radius:8px;margin-bottom:7px}
.sw2 span{font-size:12px}
.pk{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--soft)}
.pk:last-child{border-bottom:0}
.pk .th{width:52px;height:52px;border-radius:9px;background:var(--softer);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.pk .th img{width:82%;height:82%;object-fit:contain}
.pk .th svg{width:56%;height:56%;color:var(--accent);opacity:.8}
.sw{width:48px;height:28px;border-radius:999px;background:var(--line);position:relative;
  border:0;cursor:pointer;flex:0 0 auto;transition:.16s}
.sw:after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
  background:#fff;transition:.16s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.sw.on{background:var(--go)}
.sw.on:after{left:23px}

/* tables ---------------------------------------------------------------- */
.tw{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.tw .inner{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
th{text-align:left;font-weight:500;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);padding:12px 10px 8px;border-bottom:1px solid var(--line)}
td{padding:11px 10px;border-bottom:1px solid var(--soft);vertical-align:middle}
tr:last-child td{border-bottom:0}
th:first-child,td:first-child{padding-left:16px}
th:last-child,td:last-child{padding-right:16px}
.act{border:1px solid var(--line);background:transparent;border-radius:8px;padding:6px 11px;
  font-size:12.5px;cursor:pointer}
.bar{height:6px;border-radius:9px;background:var(--soft);overflow:hidden;width:86px}
.bar i{display:block;height:100%;background:var(--go)}
.bar i.low{background:var(--hot)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0}
@media(max-width:620px){.kpis{grid-template-columns:1fr 1fr}}
.k{background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:13px 14px}
.k b{display:block;font-size:20px;font-weight:600;letter-spacing:-.02em;margin-top:4px}

/* creator ladder */
.rungs{display:flex;gap:5px;margin:13px 0 0}
.rungs i{flex:1;height:4px;border-radius:3px;background:var(--line)}
.rungs i.on{background:var(--go)}
.chk{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--soft)}
.chk:last-of-type{border-bottom:0}
.chk i{width:19px;height:19px;border-radius:50%;border:1.5px solid var(--line);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;font-style:normal}
.chk i.on{background:var(--go);border-color:var(--go)}

/* ---- 3D store preview ---------------------------------------------------
   One room, four fixtures. Things sit where they would sit in a shop:
   garments on the rail, caps and bags on pegs beside it, small goods on a
   shelf, and anything tall or heavy standing on the floor.               */
.prev3d{display:block;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  background:var(--paper);margin:0 0 16px}
.prev3d .room{position:relative;height:214px;overflow:hidden;
  background:linear-gradient(#efeeec 0%,#e6e5e3 58%,#e0dfdd 58%,#d6d5d2 100%)}
.prev3d .wall{position:absolute;inset:0 0 42% 0;
  background:linear-gradient(120deg,color-mix(in srgb,var(--ac) 7%,#f4f2ed),#f6f4ef 42%,
                             color-mix(in srgb,var(--ac) 5%,#f1efe9));
  box-shadow:inset 0 -1px 0 rgba(20,23,26,.07)}
/* the grid is drawn wider than the room on purpose so the perspective reaches
   the corners; the room clips it and no page scrolls sideways */
.prev3d .floorgrid{position:absolute;left:-30%;right:-30%;bottom:0;height:42%;
  background-image:
    repeating-linear-gradient(90deg,rgba(20,23,26,.10) 0 1px,transparent 1px 44px),
    repeating-linear-gradient(0deg,rgba(20,23,26,.09) 0 1px,transparent 1px 26px);
  transform:perspective(210px) rotateX(58deg);transform-origin:50% 0;opacity:.8}

/* rail — garments hang from it */
.prev3d .rail{position:absolute;left:5%;width:44%;top:11%;height:4px;border-radius:3px;
  background:linear-gradient(#fff,#b9b7b1 42%,#8e8c87);
  box-shadow:0 2px 5px rgba(20,23,26,.14)}
.prev3d .hangers{position:absolute;left:5%;width:44%;top:11%;display:flex;
  justify-content:center;align-items:flex-start;gap:10px}
.prev3d .hg{position:relative;display:flex;align-items:flex-start;justify-content:center;
  padding-top:5px}
.prev3d .hg i{position:absolute;top:-5px;left:50%;width:9px;height:9px;margin-left:-4.5px;
  border:1.5px solid #9b9892;border-bottom:0;border-radius:50% 50% 0 0}

/* pegs — caps and bags, beside the rail, not on it */
.prev3d .pegs{position:absolute;right:5%;width:30%;top:13%;display:flex;
  justify-content:center;align-items:flex-start;gap:14px}
.prev3d .pg{position:relative;display:flex;align-items:flex-start;justify-content:center;
  padding-top:7px}
.prev3d .pg i{position:absolute;top:0;left:50%;width:12px;height:3px;margin-left:-6px;
  border-radius:2px;background:#a7a49e}

/* shelf — small goods at eye level */
/* a shelving unit: uprights either side, tiers stacked from the ground up */
/* Everything that stands shares one bottom-anchored column, so a shelving
   unit and a standing lamp queue up instead of overlapping. */
.prev3d .stand{position:absolute;left:5%;right:5%;bottom:6%;display:flex;
  align-items:flex-end;justify-content:center;gap:12px}
/* A shelving unit sharing the room with something standing on the floor
   still has to be a shelf. min-width:0 alone lets it collapse to a pair of
   uprights with nothing between them when the floor pieces are wide. */
.prev3d .shelf{flex:1 1 auto;min-width:0}
.prev3d .unit{position:relative;display:flex;flex-direction:column;justify-content:flex-end}
.prev3d .unit.tall .up{position:absolute;top:-2px;bottom:0;width:5px;border-radius:2px;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--ac) 30%,#fff),
    color-mix(in srgb,var(--ac) 46%,#c9c3b6));
  box-shadow:0 2px 6px rgba(20,23,26,.12)}
.prev3d .unit.tall .up.l{left:-5px} .prev3d .unit.tall .up.r{right:-5px}
.prev3d .tier{height:var(--th);display:flex;flex-direction:column;justify-content:flex-end}
.prev3d .goods{display:flex;justify-content:space-evenly;align-items:flex-end;flex:1;gap:4px}
.prev3d .gd{flex:1 1 0;min-width:0;display:flex;align-items:flex-end;justify-content:center}
.prev3d .gd img{max-width:100%;object-fit:contain}
.prev3d .plank{height:6px;border-radius:2px;flex:0 0 auto;
  background:linear-gradient(color-mix(in srgb,var(--ac) 20%,#fff),
                             color-mix(in srgb,var(--ac) 38%,#cfc9bd));
  box-shadow:0 4px 7px rgba(20,23,26,.11)}

/* floor — tall and heavy things stand on the ground */
/* The floor row has to be able to give way. A 20 kg dumbbell photographed
   wide will happily be 190px across and shove the shelving unit out of the
   room if nothing tells it to shrink. */
.prev3d .floorline{display:flex;align-items:flex-end;justify-content:center;gap:12px;
  flex:0 0 auto}
.prev3d .fl{flex:0 0 auto;display:flex;align-items:flex-end;justify-content:center}
.prev3d .fl img{max-width:100%;object-fit:contain}

.prev3d img{object-fit:contain;filter:drop-shadow(0 4px 7px rgba(20,23,26,.26))}
.prev3d .ic3{display:block;color:var(--ac);opacity:.82}
.prev3d .ic3 svg{width:100%;height:100%}
.prev3d .mark{position:absolute;left:0;right:0;top:7px;text-align:center;
  font-size:10px;font-weight:700;letter-spacing:3px;
  color:color-mix(in srgb,var(--ac) 32%,transparent)}
/* A shop with nothing tall in it does not need a tall room. Cropping to the
   contents beats a shelving unit marooned under an empty wall. */
.prev3d .room.low{height:158px}
.prev3d .room.low .wall{inset:0 0 34% 0}
.prev3d .room.low .floorgrid{height:34%}
.prev3d .room.low .mark{top:10px}

.prev3d .cap{display:flex;align-items:center;gap:12px;padding:12px 15px;
  background:var(--ink);color:#fff}
.prev3d .cap .t{font-weight:600;font-size:14px}
.prev3d .cap .sb{font-size:12.5px;opacity:.6;margin-top:1px}
.prev3d .cap .ar{margin-left:auto;font-size:18px;opacity:.6}
/* Whichever kind a shop has alone gets the whole room. */
.prev3d .room:not(.twocol) .rail,
.prev3d .room:not(.twocol) .hangers{left:5%;width:90%}
.prev3d .room:not(.twocol) .pegs{left:5%;right:5%;width:auto}

/* A shop with both kinds splits: hanging on the left, standing on the right,
   so a jacket never hangs through a kettle. */
.prev3d .room.twocol .stand{left:auto;right:4%;width:46%}
.prev3d .room.twocol .rail,
.prev3d .room.twocol .hangers{left:4%;width:46%}
.prev3d .room.twocol .pegs{left:auto;right:4%;width:46%;top:10%}



/* Shelf AND floor in the same room. A 160 cm lamp standing on the ground
   rises past any shelf, so they cannot share a column: the shelf takes the
   left, the floor pieces stand on the right. */


/* already split left/right - just lift the shelf clear of what stands below */

@media(max-width:380px){ .prev3d .hangers{gap:7px} .prev3d .floorline{gap:12px} }

/* creator ladder */
.rungs{display:flex;gap:5px;margin:13px 0 0}
.rungs i{flex:1;height:4px;border-radius:3px;background:var(--line)}
.rungs i.on{background:var(--go)}
.chk{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--soft)}
.chk:last-of-type{border-bottom:0}
.chk i{width:19px;height:19px;border-radius:50%;border:1.5px solid var(--line);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;font-style:normal}
.chk i.on{background:var(--go);border-color:var(--go)}




/* The floor is deliberately drawn wider than the room (left/right -30%) so the
   perspective grid reaches the corners instead of stopping short. The room
   hides the overflow, and no page scrolls sideways - an audit that measures
   element width alone will flag this, and it is not a bug. */

/* tap targets: a 16px link is a miss on a phone. Give the inline text links
   and the ops row buttons a real hit area without changing how they look. */
/* A bare inline link is 16px tall. On a phone that is a miss, so every link
   that lives inside running text gets padded up to a thumb. */
.sm a,.mut a,.empty a,.hint a,p a,.note a{display:inline-block;padding:13px 3px;
  margin:-13px -3px;line-height:1}
.act{min-height:36px}


/* ---- the live store, sitting at the top of a seller's page ---------------
   The flat shelf drawing stays underneath as the fallback: the frame covers
   it once it loads, so a browser that never runs the room still shows a shop
   rather than a grey box. */
.hero3d{position:relative;border-radius:16px;overflow:hidden;margin:14px 0 4px;
  background:#e8e7e4;box-shadow:0 1px 0 var(--line),0 10px 26px rgba(20,23,26,.07)}
.hero3d .hfall{position:absolute;inset:0;z-index:0;isolation:isolate}
.hero3d .hfall .prev3d{display:block;margin:0;border:0;border-radius:0;box-shadow:none}
.hero3d .hfall .cap{display:none}
.hero3d .hframe{position:relative;z-index:1;display:block;width:100%;height:52vh;
  min-height:310px;max-height:470px;border:0;background:transparent}
/* The caption sits at the TOP. At the bottom it lands under the app's tab
   bar at rest, and it crowds the room's own section chips, which live down
   there and have to stay tappable. */
.hero3d .hcap{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;align-items:center;
  gap:12px;padding:10px 14px;font-size:12.5px;color:var(--muted);
  background:linear-gradient(rgba(255,255,255,.92),transparent);pointer-events:none}
.hero3d .hcap a{pointer-events:auto}
@media(max-width:520px){
  .hero3d .hframe{height:50vh;min-height:300px}
}


/* ---- a shop card's window into the room --------------------------------
   The flat drawing sits underneath and shows immediately; the live room
   covers it when it has loaded. The frame takes no clicks - the whole card
   is a link into the shop. */
.shopcard .cardroom{position:relative;height:178px;margin:11px 0 1px;
  border-radius:12px;overflow:hidden;background:#e8e7e4}
/* The room is lit from the front, so its corners should fall away. Without
   this the card is a flat rectangle of near-white with some clothes on it;
   with it the goods sit in a box and come forward. */
.cardroom::after,.hero3d::after{content:'';position:absolute;inset:0;z-index:2;
  pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 52px 14px rgba(20,23,26,.11),
             inset 0 -22px 34px -26px rgba(20,23,26,.16),
             inset 0 1px 0 rgba(255,255,255,.5)}
/* The shop, at the size of a shop. 4:3 gives the fixtures room to read on a
   phone without pushing the next card off the bottom of the screen.
   Named `asroom`, not `big` - `.big` already means a flex row elsewhere, and
   the card silently collapsed to nothing when it picked that up. */
.shopcard.asroom{padding:0;overflow:hidden;display:block}
.shopcard.asroom .cardroom{height:auto;aspect-ratio:4/3;margin:0;border-radius:0}
.shopcard.asroom .bd{padding:12px 14px 14px}
.shopcard.asroom .nm{font-size:16.5px}
.shopcard.asroom .tl{margin-bottom:10px}
.shopcard.asroom .meta{margin:0}
.cardroom .rtop{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;
  align-items:flex-start;justify-content:space-between;gap:10px;padding:11px 12px;
  background:linear-gradient(rgba(255,255,255,.80),transparent)}
.cardroom .rtop .av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-weight:700;font-size:13px;line-height:1;
  overflow:hidden;flex:0 0 auto;
  box-shadow:0 2px 8px rgba(20,23,26,.2)}
.cardroom .rtop .av img{width:100%;height:100%;object-fit:cover}
.cardroom .rtop .tag{background:rgba(255,255,255,.92);border-radius:999px;padding:5px 10px;
  font-weight:600;font-size:11.5px;line-height:1;color:var(--ink);white-space:nowrap;
  box-shadow:0 2px 8px rgba(20,23,26,.12)}
/* The name used to sit ON the picture behind a white gradient, which cropped
   the hem off every garment on the rail. Nothing is worth cutting the goods
   in half - it reads under the picture now, where it costs nothing. */
.cardroom .rfoot{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:26px 13px 11px;
  background:linear-gradient(transparent,rgba(248,246,241,.93) 46%)}
.cardroom .rnm{font-weight:650;font-size:17px;line-height:1.2;
  letter-spacing:-.018em;color:var(--ink)}
.cardroom .rtl{font-size:12.5px;color:var(--muted);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shopcard .cardroom .rfall{position:absolute;inset:0;z-index:0;isolation:isolate}
.shopcard .cardroom .rfall .prev3d{display:block;margin:0;border:0;border-radius:0;
  box-shadow:none;height:100%}
/* The card prints the shop's name under the picture, and the live room no
   longer paints it on the wall - so the flat drawing underneath should not
   either, or the cards still waiting their turn to load look like a
   different design. */
.shopcard .cardroom .rfall .cap,
.shopcard .cardroom .rfall .mark{display:none}
.shopcard .cardroom .rfall .room{height:100%}
/* The frame does its work unseen: it draws the room, hands back the picture
   and is removed. What the card shows is the picture. */
.shopcard .cardroom .rframe{position:absolute;inset:0;width:100%;height:100%;border:0;
  z-index:1;pointer-events:none;background:transparent;opacity:0}
.shopcard .cardroom .shot{position:absolute;inset:0;z-index:1;width:100%;height:100%;
  object-fit:cover;opacity:0;transition:opacity .35s ease}
.shopcard .cardroom.shot-in .shot{opacity:1}
/* The flat drawing underneath is the safety net, not the first thing you see:
   uncovered only if the room never manages to draw itself. A card that shows
   a drawing, then swaps it for a differently framed photograph, reads as a
   page correcting itself. */
.shopcard .cardroom .rfall{visibility:hidden}
.shopcard .cardroom.fell .rfall{visibility:visible}
@media(prefers-reduced-motion:reduce){
  .shopcard .cardroom .shot{transition:none}
}
.shopcard .cardroom.tall .rwalk{top:auto;bottom:10px;right:11px;height:fit-content}
.shopcard .cardroom .rwalk{position:absolute;right:10px;bottom:9px;z-index:3;
  padding:6px 11px;border-radius:999px;font-size:11.5px;font-weight:600;
  color:var(--ink);background:rgba(255,255,255,.88);backdrop-filter:blur(7px);
  box-shadow:0 2px 10px rgba(20,23,26,.13)}


/* a button that destroys something should not look like a button that saves */
.act.danger,.btn.danger{background:#9c2b2b;border-color:#9c2b2b;color:#fff}
.act.danger:active,.btn.danger:active{background:#7f2222}


/* size picker on a product sheet */
.szrow{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px}
.szrow button{min-width:52px;min-height:40px;padding:0 12px;border-radius:9px;
  border:1px solid var(--line);background:transparent;color:var(--ink);
  font-weight:600;font-size:13.5px;cursor:pointer}
.szrow button.on{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.szrow.shake{animation:shk .34s}
@keyframes shk{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}
  75%{transform:translateX(5px)}}


/* ---- the grid, the way the market stalls do it ------------------------
   Dense, two to a row, almost no gutter, the photograph running to the edge
   of its tile and the PRICE as the loudest thing on the card. One line of
   name under it, one badge, nothing else competing.
   What is deliberately NOT copied: the crossed-out "was" price. We have no
   former price to cross out, and printing an invented one on every tile is
   a lie that happens to be the house style elsewhere. The urgency here is
   the real stock count off the shelf. */
.pc{transition:transform .12s ease, box-shadow .12s ease;border:0;
  border-radius:12px;box-shadow:0 1px 2px rgba(20,23,26,.05),0 4px 14px -8px rgba(20,23,26,.18)}
.pc:active{transform:scale(.985)}
.ph{position:relative;aspect-ratio:4/5}   /* the tile overrides this per product */
.ph img{width:100%;height:100%;object-fit:contain}
.pc .bd{padding:7px 9px 10px}
.pc .pr{font-size:17.5px;font-weight:800;letter-spacing:-.03em;color:var(--price);
  margin:0;line-height:1.1}
/* No reserved second line. That existed to keep rows level in a fixed grid;
   in a staggered one it is just a hole under every short name, and ragged is
   now the point. */
.pc .nm{font-size:12.5px;font-weight:400;color:var(--ink);line-height:1.35;margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc .by{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);
  margin-top:5px;min-width:0}
.pc .by b{color:var(--ink);font-weight:600;flex:0 0 auto}
.pc .by span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the badge rides on the photograph, out of the price's way */
.tag{position:absolute;left:6px;top:6px;z-index:2;font-size:10px;font-weight:700;
  letter-spacing:.01em;padding:3px 7px;border-radius:6px;line-height:1.35}
.tag.hot{background:var(--price);color:#fff}
.tag.buy{background:rgba(20,23,26,.82);color:#fff}

.feed{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}
@media(min-width:560px){ .feed{grid-template-columns:repeat(3,1fr);gap:10px} }
@media(min-width:860px){ .feed{grid-template-columns:repeat(4,1fr)} }
.grid{gap:8px}
/* staggered: columns side by side, each stacking its own tiles */
.feed.mas,.grid.mas{display:flex;align-items:flex-start;gap:8px}
.mcol{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:8px}
@media(min-width:560px){ .feed.mas,.grid.mas{gap:10px} .mcol{gap:10px} }

/* ---- the sellers, above the feed --------------------------------------
   Stores did not need a fifth tab; it needed to be where people already
   are. A row of faces reads as "these are real people" far faster than a
   directory does. */
.strip2{display:flex;gap:13px;overflow-x:auto;padding:14px 16px 2px;margin:4px -16px 0;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.strip2::-webkit-scrollbar{display:none}
.shopchip{flex:0 0 auto;width:62px;text-align:center}
.shopchip .av{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-weight:600;font-size:17px;letter-spacing:-.02em;overflow:hidden;
  margin:0 auto;box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--line)}
.shopchip .av img{width:100%;height:100%;object-fit:cover}
.shopchip .nm{display:block;font-size:11px;color:var(--muted);margin-top:6px;
  line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical}
.shopchip.all .av{background:var(--ink)}

/* the seller's line inside a product sheet */
.seller{display:flex;align-items:center;gap:9px;margin:13px 0 0;padding:9px 11px;
  border:1px solid var(--line);border-radius:12px;background:var(--softer);
  font-size:13.5px;font-weight:500}
.seller .av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--ink);color:#fff;font-size:11px;font-weight:600;overflow:hidden;
  flex:0 0 auto}
.seller .av img{width:100%;height:100%;object-fit:cover}

/* ---- walk the store ----------------------------------------------------
   The 3D room is the seller's shopfront, not the way you browse. It sits
   behind one unmistakable button. */
.walkin{display:flex;align-items:center;gap:12px;width:100%;margin:14px 0 2px;
  padding:13px 15px;border:0;border-radius:var(--r);cursor:pointer;text-align:left;
  background:var(--ink);color:var(--cream);box-shadow:var(--shade)}
.walkin .ic3{width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;
  border-radius:9px;background:rgba(255,255,255,.14)}
.walkin b{display:block;font-size:14.5px;font-weight:600}
.walkin span{display:block;font-size:12px;opacity:.72;margin-top:2px}
.walkin .ar{margin-left:auto;font-size:19px;opacity:.7}

/* search field and the house-store banner: used by the feed, the store
   directory and the shop pages, so they belong here and not in one page. */
.srch{position:relative;margin:12px 0 10px}
.srch input{padding-left:40px;border-radius:999px}
.srch svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:17px;
  height:17px;stroke:var(--muted);fill:none;stroke-width:2}
.meta{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 0}
.banner3d{display:flex;align-items:center;gap:12px;background:var(--ink);color:var(--cream);
  border-radius:var(--r);padding:14px 16px;margin:16px 0 4px}
.banner3d .ar{margin-left:auto;font-size:18px;opacity:.6}


/* ---- the homepage hero: one room, live --------------------------------
   The 3D store IS the reason to be here, so it is the first thing on the
   page rather than a button three taps in. ONE room, not six: a phone keeps
   only a handful of WebGL contexts and reclaims the oldest, which is what
   used to blank the shop cards. */
.hero3d.bleed{margin:0 -16px;border-radius:0;box-shadow:0 1px 0 var(--line)}
.hero3d.bleed .hframe{height:46vh;min-height:306px;max-height:430px}
@media(min-width:620px){
  .hero3d.bleed{margin:0;border-radius:16px}
}
/* The identity bar sits at the TOP. The room's own section chips live along
   the bottom and have to stay tappable. */
.hmeta{position:absolute;left:0;right:0;top:0;z-index:4;display:flex;align-items:center;
  gap:10px;padding:11px 14px 26px;pointer-events:none;
  background:linear-gradient(rgba(242,242,241,.96) 24%,rgba(242,242,241,0))}
.hmeta .who{display:flex;align-items:center;gap:9px;min-width:0;pointer-events:auto;
  text-decoration:none;color:var(--ink)}
.hmeta .av{width:34px;height:34px;flex:0 0 auto;border-radius:50%;display:grid;
  place-items:center;color:#fff;font-weight:600;font-size:13px;overflow:hidden}
.hmeta .av img{width:100%;height:100%;object-fit:cover}
.hmeta b{display:block;font-size:14px;font-weight:600;letter-spacing:-.015em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hmeta .sub{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
.hmeta .walkbtn{margin-left:auto;flex:0 0 auto;pointer-events:auto;text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;background:var(--ink);color:var(--cream);
  font-size:12.5px;font-weight:600;padding:9px 13px;border-radius:999px}
/* one tap to see that it is not just this seller who has a store */
/* Switching store sits in the identity bar, not over the room's own section
   chips - two rows of controls fighting for the same corner is how you end
   up tapping Caps when you meant Next store. */
.hcycle{margin-left:auto;width:34px;height:34px;flex:0 0 auto;pointer-events:auto;
  display:grid;place-items:center;border-radius:50%;cursor:pointer;
  border:1px solid var(--line);background:rgba(255,255,255,.93);color:var(--ink)}
.hcycle+.walkbtn{margin-left:8px}
.hcycle svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round}
/* the promise, in one line, where the sliding banner used to be */
.trustline{display:flex;align-items:center;gap:8px;width:100%;margin:11px 0 0;padding:10px 13px;
  border:1px solid var(--line);border-radius:12px;background:var(--paper);
  font-size:12.5px;color:var(--ink);text-align:left;cursor:pointer}
.trustline .dot{width:6px;height:6px;border-radius:50%;background:var(--go);flex:0 0 auto}
.trustline .ar{margin-left:auto;color:var(--muted)}
.sellcta{display:flex;align-items:center;gap:12px;border:1px dashed var(--line);
  border-radius:var(--r);padding:14px 16px;margin:11px 0 4px;text-decoration:none;color:var(--ink)}
.sellcta .ar{margin-left:auto;font-size:18px;color:var(--muted)}


/* ---- the face in the header -------------------------------------------
   A profile is somewhere you go on purpose, now and then. It does not earn
   a quarter of the bar your thumb lives on, so it sits up here beside the
   bag - which is where everyone already looks for it. */
.ic.face{width:36px;height:36px;margin-left:4px;overflow:visible;
  background:var(--ink);color:var(--cream);font-size:12.5px;font-weight:700;
  letter-spacing:.02em}
.ic.face img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.ic.face .bdg.todo{top:-3px;right:-3px;background:var(--price)}
/* The ring is a shadow, not a pseudo-element sticking out past the edge:
   anything that overflows the box counts as overflow, and a scanner cannot
   tell a deliberate ring from a clipped label. */
.ic.face{box-shadow:0 0 0 2.5px var(--ground),0 0 0 4px var(--line)}

/* ---- quick access: the stores, as squares -----------------------------
   A row of real rooms you can flick through. Each one renders once, hands
   the page a still and gives its 3D context straight back - which is why
   five of them can sit here at all. */
.qrow{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;
  padding:2px 16px 4px;margin:12px -16px 0;scrollbar-width:none;
  -webkit-overflow-scrolling:touch}
.qrow::-webkit-scrollbar{display:none}
.qcard{position:relative;flex:0 0 auto;width:148px;scroll-snap-align:start;
  border-radius:14px;overflow:hidden;background:#eceae6;text-decoration:none;
  color:var(--ink);box-shadow:0 1px 2px rgba(20,23,26,.05),0 6px 18px -10px rgba(20,23,26,.22)}
.qcard .sq{position:relative;width:148px;height:148px;overflow:hidden}
/* Each room renders in turn, so on a first visit the last card can wait
   several seconds for its picture. A flat grey square reads as broken; a
   slow sweep reads as working. It stops the moment the still lands. */
.qcard .sq::before{content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(100deg,#eceae6 38%,#f6f5f3 50%,#eceae6 62%);
  background-size:260% 100%;animation:owshim 1.5s ease-in-out infinite}
.qcard .sq.shot-in::before,.qcard .sq.fell::before{display:none}
@keyframes owshim{0%{background-position:160% 0}100%{background-position:-60% 0}}
@media(prefers-reduced-motion:reduce){
  .qcard .sq::before{animation:none;background:#eceae6}
}
.qcard .sq img,.qcard .sq iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.qcard .sq .fall{position:absolute;inset:0;z-index:0;isolation:isolate;visibility:hidden}
.qcard .sq.fell .fall{visibility:visible}
.qcard .sq .fall .prev3d{display:block;margin:0;border:0;border-radius:0;box-shadow:none;height:100%}
.qcard .sq .fall .cap,.qcard .sq .fall .mark{display:none}
.qcard .sq .fall .room{height:100%}
/* the frame works unseen: it draws the room, hands back a picture and goes */
.qcard .sq .rframe{z-index:1;pointer-events:none;background:transparent;opacity:0}
.qcard .sq .shot{z-index:1;object-fit:cover;opacity:0;transition:opacity .35s ease}
.qcard .sq.shot-in .shot{opacity:1}
@media(prefers-reduced-motion:reduce){ .qcard .sq .shot{transition:none} }
.qcard .sq::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  box-shadow:inset 0 0 34px 9px rgba(20,23,26,.10),inset 0 1px 0 rgba(255,255,255,.45)}
.qcard .lb{display:flex;align-items:center;gap:7px;padding:8px 9px 9px}
.qcard .lb .av{width:22px;height:22px;flex:0 0 auto;border-radius:50%;display:grid;
  place-items:center;color:#fff;font-size:9px;font-weight:700;overflow:hidden}
.qcard .lb .av img{width:100%;height:100%;object-fit:cover}
.qcard .lb b{font-size:12px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.qcard .pill3d{position:absolute;left:7px;top:7px;z-index:3;display:inline-flex;
  align-items:center;gap:4px;background:rgba(20,23,26,.74);color:#fff;font-size:9.5px;
  font-weight:700;letter-spacing:.06em;padding:3px 7px;border-radius:999px}
.qcard.all{display:grid;place-items:center;width:112px;background:var(--paper)}
.qcard.all .in2{display:grid;place-items:center;gap:7px;padding:22px 10px;text-align:center}
.qcard.all .rc{width:38px;height:38px;border-radius:50%;background:var(--ink);color:var(--cream);
  display:grid;place-items:center;font-size:17px}
.qcard.all span{font-size:12px;font-weight:600}
.qhead{display:flex;align-items:baseline;gap:9px;margin:16px 2px 0}
.qhead h2{font-size:16px;letter-spacing:-.02em;margin:0}
/* a link in a heading is still a thing a thumb has to hit */
.qhead a{margin-left:auto;padding:12px 0 12px 12px;font-size:12.5px;color:var(--muted);text-decoration:none;
  display:inline-flex;align-items:center;min-height:34px;padding:0 2px}


/* ---- open your own shop ----------------------------------------------- */
.ownshop{position:relative;display:flex;align-items:center;gap:12px;overflow:hidden;
  margin:14px 0 2px;padding:16px 17px;border-radius:var(--r);text-decoration:none;
  background:linear-gradient(135deg,#14171a,#2b3138 58%,#14171a);color:var(--cream);
  box-shadow:var(--shade)}
.ownshop .os-t{min-width:0;flex:1}
.ownshop b{display:block;font-size:16px;font-weight:650;letter-spacing:-.022em}
.ownshop .os-t>span:not(.os-go){display:block;font-size:12.5px;line-height:1.5;opacity:.74;margin-top:5px}
.ownshop .os-go{display:inline-flex;align-items:center;min-height:34px;margin-top:11px;
  padding:0 14px;border-radius:999px;background:var(--cream);color:#14171a;
  font-weight:600;font-size:12.5px;opacity:1}
.ownshop .os-art{flex:0 0 auto;width:62px;opacity:.16}
.ownshop .os-art svg{width:62px;height:62px}
@media(max-width:360px){ .ownshop .os-art{display:none} }


/* ---- keyboard focus ----------------------------------------------------
   The app had no focus styling of its own, so a keyboard user got whatever
   the browser draws - which on a dark button on a dark card is close to
   invisible. One ring, defined once, visible on both. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline:2px solid var(--ink);
  outline-offset:2px;
  border-radius:8px;
}
.btn:focus-visible, .walkin:focus-visible, .ownshop:focus-visible,
.tabbar a:focus-visible, .qcard:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
  box-shadow:0 0 0 5px var(--ground);
}
/* on the ink-coloured surfaces the ring has to be the light one instead */
.ownshop:focus-visible, .walkin:focus-visible, .banner3d:focus-visible{
  outline-color:var(--cream);
  outline-offset:-4px;
  box-shadow:none;
}

/* ---- motion ------------------------------------------------------------
   Respected for the banner already; this covers everything else that slides
   or scales, including the sheet the whole app routes through. */
@media(prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .sheet{transition:none}
}


/* ---- where a shop is ---------------------------------------------------
   The area reads first and the distance second, because "Yaba" means
   something to a Lagos buyer that "4.2 km" never will. */
.where{display:flex;align-items:center;gap:5px;margin-top:5px}
.where svg{width:13px;height:13px;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linejoin:round}
.where b{color:var(--ink);font-weight:600}
.where span{color:var(--muted)}
.qcard .lb{align-items:flex-start}
.qcard .qn{min-width:0;display:block}
.qcard .qn>span{display:block;font-size:10.5px;color:var(--muted);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* the bar that asks where you are, and then says it */
.areabar{display:flex;align-items:center;gap:8px;width:100%;margin:12px 0 0;
  padding:10px 13px;border:1px solid var(--line);border-radius:12px;
  background:var(--paper);font-size:13px;color:var(--ink);text-align:left;cursor:pointer}
.areabar svg{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linejoin:round}
.areabar b{font-weight:600}
.areabar .ch{margin-left:auto;color:var(--muted);font-size:12px}
.arealist{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:4px}
.arealist button{padding:11px 10px;border-radius:10px;border:1px solid var(--line);
  background:var(--paper);font-size:13px;text-align:left;cursor:pointer;color:var(--ink)}
.arealist button.on{background:var(--ink);color:var(--cream);border-color:var(--ink);font-weight:600}
.areahd{font-size:11.5px;letter-spacing:.045em;text-transform:uppercase;
  color:var(--muted);margin:14px 2px 6px}


/* ---- the thread list ---------------------------------------------------
   Name, then the last line of the conversation with your own tick on it, the
   time where a thumb expects it, and the unread count in the same place
   every chat app puts it. */
.thr{align-items:center}
.thr .row{min-width:0}
/* the ellipsis has to live on the text, not on the flex row that holds it */
.thr .pv{display:flex;align-items:center;gap:5px;min-width:0;font-size:13.5px;
  color:var(--muted);overflow:hidden}
.thr .pv>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thr .pvt{width:16px;height:11px;flex:0 0 auto;fill:none;stroke:var(--muted);
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.thr .pvt.read{stroke:#2f9bdd}
.thr .xs2{font-size:11.5px;color:var(--muted);flex:0 0 auto}
.thr .xs2.new{color:var(--go);font-weight:600}
.thr .un{min-width:19px;height:19px;border-radius:10px;background:var(--go);color:#fff;
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;
  padding:0 6px;flex:0 0 auto}


/* ---- the way to the map ------------------------------------------------ */
.tomap{display:flex;align-items:center;gap:11px;margin:12px 0 0;padding:13px 14px;
  border-radius:var(--r);text-decoration:none;color:var(--cream);
  background:linear-gradient(135deg,#0e1526,#243457 58%,#3a2c4e);box-shadow:var(--shade)}
.tomap .mi{width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;
  border-radius:9px;background:rgba(255,255,255,.14)}
.tomap .mi svg{width:19px;height:19px}
.tomap b{display:block;font-size:14.5px;font-weight:600}
.tomap span>span{display:block;font-size:12px;opacity:.72;margin-top:2px;line-height:1.45}
.tomap .ar{margin-left:auto;font-size:19px;opacity:.7}

/* ---- the shop cards (shared by the Shops page's Cards view) ---- */
.hl2{padding:4px 2px 0}
.hl2 h1{font-size:23px;letter-spacing:-.028em;line-height:1.14}
.hl2 p{color:var(--muted);font-size:13.5px;margin:5px 0 0;line-height:1.5}
.shops{display:grid;gap:14px;margin:16px 0 0}

/* Each card wears the shop's own header - the same banner, the same
   overlapping face, the same line of credentials you get when you walk into
   the shop itself. A directory of shops should look like a shelf of shops,
   not a list of links. */
.sc{background:var(--paper);border-radius:16px;overflow:hidden;
  box-shadow:0 1px 2px rgba(20,23,26,.05),0 10px 26px -14px rgba(20,23,26,.26)}
.sc .bn{height:104px;position:relative}
/* the header is the room: a still of the 3D shop, as on the home page */
.sc .bnw{position:relative}
.sc .sroom{position:relative;display:block;height:186px;overflow:hidden;background:#eceae6}
.sc .sroom::before{content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(100deg,#eceae6 38%,#f6f5f3 50%,#eceae6 62%);
  background-size:260% 100%;animation:owshim 1.5s ease-in-out infinite}
.sc .sroom.shot-in::before,.sc .sroom.fell::before{display:none}
.sc .sroom > img,.sc .sroom > iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.sc .sroom .fall{position:absolute;inset:0;z-index:0;isolation:isolate;visibility:hidden}
.sc .sroom.fell .fall{visibility:visible}
.sc .sroom .fall .prev3d{display:block;margin:0;border:0;border-radius:0;box-shadow:none;height:100%}
.sc .sroom .fall .cap,.sc .sroom .fall .mark{display:none}
.sc .sroom .fall .room{height:100%}
.sc .sroom .rframe{z-index:1;pointer-events:none;background:transparent;opacity:0}
.sc .sroom .shot{z-index:1;object-fit:cover;opacity:0;transition:opacity .35s ease}
.sc .sroom.shot-in .shot{opacity:1}
.sc .sroom::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,23,26,0) 55%,rgba(20,23,26,.28));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.sc .sroom .pill3d{position:absolute;left:12px;top:12px;z-index:3;display:inline-flex;
  align-items:center;gap:4px;background:rgba(20,23,26,.74);color:#fff;font-size:10px;
  font-weight:700;letter-spacing:.06em;padding:4px 8px;border-radius:999px}
.sc .bnw .av{z-index:4}
.sc .bnw .vt,.sc .bnw .loc{z-index:4}
@media(prefers-reduced-motion:reduce){
  .sc .sroom::before{animation:none;background:#eceae6}
  .sc .sroom .shot{transition:none}
}
.sc .av{position:absolute;left:16px;bottom:-24px;width:62px;height:62px;border-radius:50%;
  border:3px solid var(--paper);display:grid;place-items:center;color:#fff;
  font-weight:600;font-size:19px;overflow:hidden}
.sc .av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.sc .vt{position:absolute;right:12px;bottom:11px;display:inline-flex;align-items:center;gap:5px;
  background:rgba(255,255,255,.93);border-radius:999px;padding:5px 10px;
  font-size:11px;font-weight:600;color:var(--ink)}
.sc .bd{padding:32px 16px 16px}
.sc h3{font-size:19px;letter-spacing:-.022em;margin:0}
.sc .tl{color:var(--muted);font-size:13px;margin-top:3px;line-height:1.45}
.sc .tl b{color:var(--go)}
/* the credential line is green; a place name is not a credential */
.sc .tl.where b{color:var(--ink)}
.sc .thumbs{display:flex;gap:7px;margin:14px 0 0;overflow:hidden}
.sc .thumbs div{flex:0 0 auto;width:58px;height:58px;border-radius:10px;background:#fff;
  border:1px solid var(--line);display:grid;place-items:center;overflow:hidden}
.sc .thumbs img{width:90%;height:90%;object-fit:contain}
.sc .more{color:var(--muted);font-size:12px;font-weight:700;background:var(--soft)!important;
  border-color:transparent!important}
.sc .acts{display:flex;gap:8px;margin:14px 0 0}
.sc .acts .btn{flex:1;margin:0}
.btn.sm3{padding:11px 12px;font-size:13.5px;border-radius:11px}

/* the pin on a card: take me to this shop on the map */
.sc .loc{position:absolute;right:12px;top:11px;display:inline-flex;align-items:center;gap:5px;
  min-height:34px;padding:0 12px 0 10px;border:0;border-radius:999px;cursor:pointer;
  font:inherit;font-size:12px;font-weight:600;color:var(--ink);
  background:rgba(255,255,255,.93);box-shadow:0 1px 6px rgba(0,0,0,.14)}
.sc .loc svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

/* ---- tablet and laptop ------------------------------------------------------
   The pages are a 560px column, but the tab bar ran edge to edge, so on a
   laptop Home and Wallet sat 1,200px apart under a narrow page. It now
   gathers into the same column as everything above it. */
@media (min-width:720px){
  .tabbar{justify-content:center}
  .tabbar a{flex:0 1 140px}
}

/* ======================================================================
   DESKTOP (1024 px and wider): a marketplace layout, the way 1688 lays out
   a desk - utility strip, logo + one big search, the sections in a row,
   wide grids. Phones and tablets never see any of this: below 1024 px the
   rules stop and the app keeps its own top bar and tab bar.
   ====================================================================== */
.dk,.dk-only{display:none}
@media(min-width:1024px){
  :root{--tab:0px}
  .top,.tabbar{display:none!important}
  .dk{display:block;position:sticky;top:0;z-index:50;background:var(--paper);
    box-shadow:0 1px 0 var(--line),0 6px 18px -14px rgba(0,0,0,.25)}
  .dk-only{display:block}
  .dk-in{max-width:1240px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:18px}
  .dk-util{background:var(--ground);border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}
  .dk-util .dk-in{height:32px;gap:16px}
  .dk-util a:hover{color:var(--ink);text-decoration:underline}
  .dk-main .dk-in{height:78px;gap:28px}
  .dk-logo{display:flex;align-items:center;gap:10px;font-weight:750;font-size:24px;letter-spacing:-.03em;flex:0 0 auto}
  .dk-logo img{width:36px;height:36px}
  .dk-search{flex:1;display:flex;max-width:720px;height:44px;border:2px solid #1daa61;border-radius:12px;overflow:hidden;background:var(--paper)}
  .dk-search input{flex:1;border:0;outline:0;padding:0 16px;font:inherit;font-size:15px;background:transparent;color:var(--ink);border-radius:0;min-height:0}
  .dk-search button{border:0;background:#128045;color:#fff;font-weight:650;font-size:15px;padding:0 28px;cursor:pointer}
  .dk-search button:hover{background:#17914f}
  .dk-icons{display:flex;gap:6px;margin-left:auto}
  .dk-ic{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 10px;border-radius:10px;font-size:11.5px;color:var(--muted);min-width:58px}
  .dk-ic:hover{background:var(--soft);color:var(--ink)}
  .dk-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--ink)}
  .dk-ic img,.dk-ic .tabface{width:26px;height:26px;border-radius:50%;object-fit:cover}
  .dk-ic .bdg{top:0;right:6px}
  .dk-ic .pip{position:absolute;top:5px;right:16px;width:8px;height:8px;border-radius:50%;background:var(--hot)}
  .dk-nav{border-top:1px solid var(--line)}
  .dk-nav .dk-in{height:44px;gap:4px}
  .dk-nav a{padding:0 14px;height:44px;display:flex;align-items:center;font-weight:550;font-size:14px;border-bottom:2px solid transparent}
  .dk-nav a:hover{color:#128045}
  .dk-nav a.on{border-bottom-color:#1daa61;color:#128045}
  .dk-promise{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#14794c;font-weight:600}
  .dk-promise svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

  /* every page: room below the content now there is no tab bar */
  .wrap{padding-bottom:56px}
  /* sheets become centred dialogs instead of rising from the bottom edge */
  .sheet{left:50%;right:auto;bottom:auto;top:50%;width:min(640px,92vw);max-height:86vh;
    border-radius:20px;transform:translate(-50%,-46%) scale(.98);opacity:0}
  .sheet.on{transform:translate(-50%,-50%);opacity:1}
  .sheet .grab{display:none}
  .toast{bottom:28px}
  .composer{bottom:0}

  /* ---- Home as a marketplace front page ---- */
  body.home .wrap{max-width:1240px;padding:0 24px 56px}
  .hero3{display:grid;grid-template-columns:230px minmax(0,1fr) 270px;gap:16px;margin-top:16px;align-items:stretch}
  .hero3 .promo{margin:0}
  .hero3 .pb{min-height:336px;padding:34px 40px}
  .hero3 .pb h2{font-size:36px}
  .hero3 .pb p{font-size:15px;-webkit-line-clamp:3}
  .hero3 .pb .kick{font-size:11px}
  .hero3 .pb .cta{min-height:40px;font-size:14px;padding:0 18px;margin-top:16px}
  .dk-cats{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:10px 0;overflow:hidden}
  .dk-cats h3{font-size:13px;color:var(--muted);font-weight:600;padding:4px 16px 8px;text-transform:uppercase;letter-spacing:.06em}
  .dk-cats button{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;padding:11px 16px;font-size:14.5px;cursor:pointer;text-align:left}
  .dk-cats button:hover,.dk-cats button.on{background:var(--soft);color:#14794c;font-weight:600}
  .dk-cats button i{font-style:normal;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--soft);font-size:15px}
  .dk-cats button .ar{margin-left:auto;color:var(--muted)}
  .dk-me{display:flex!important;flex-direction:column;gap:12px}
  .dk-card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:18px}
  .dk-card .hi{display:flex;align-items:center;gap:12px;margin-bottom:14px}
  .dk-card .hi .face{width:44px;height:44px;border-radius:50%;background:var(--soft);display:grid;place-items:center;overflow:hidden;font-weight:700}
  .dk-card .hi .face img{width:44px;height:44px;object-fit:cover}
  .dk-card .btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .dk-card .btns a{height:38px;border-radius:10px;display:grid;place-items:center;font-weight:600;font-size:13.5px;border:1px solid var(--line)}
  .dk-card .btns a.go{background:#128045;color:#fff;border-color:#128045}
  .dk-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
  .dk-quick a{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);padding:6px 0;border-radius:10px}
  .dk-quick a:hover{background:var(--soft);color:var(--ink)}
  .dk-quick a b{font-size:18px;color:var(--ink)}
  .dk-trust{background:linear-gradient(135deg,#0f5134,#14794c);color:#eef7f1;border-radius:16px;padding:16px 18px;font-size:13px;line-height:1.5}
  .dk-trust b{display:block;font-size:15px;margin-bottom:4px}
  body.home .srch,body.home #own,body.home .seg#cats{display:none}
  body.home .qhead{margin-top:28px}
  body.home .qhead h2{font-size:22px}
  body.home .qrow{display:grid;grid-template-columns:repeat(6,1fr);overflow:visible;gap:14px}
  body.home .qcard{width:auto}
  body.home .qcard .sq{width:100%;height:auto;aspect-ratio:1}
  .dk-feedhead{display:flex!important;align-items:center;gap:10px;margin:32px 0 4px}
  .dk-feedhead h2{font-size:22px;margin-right:12px}
  .dk-feedhead button{padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:var(--paper);cursor:pointer;font-size:14px}
  .dk-feedhead button.on{background:var(--ink);color:var(--ground);border-color:var(--ink)}
  body.home .feed{gap:14px;margin-top:14px}
  body.home .feed.mas{gap:14px}
  body.home .banner3d{margin-top:28px;padding:22px 26px;border-radius:16px}
  .dk-foot{display:block!important;background:var(--paper);border-top:1px solid var(--line);margin-top:48px}
  .dk-foot .dk-in{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:32px;padding:40px 24px 28px;align-items:start}
  .dk-foot h4{margin:0 0 12px;font-size:14px}
  .dk-foot a{display:block;font-size:13.5px;color:var(--muted);padding:4px 0}
  .dk-foot a:hover{color:var(--ink)}
  .dk-foot .copy{grid-column:1/-1;border-top:1px solid var(--line);padding-top:18px;font-size:12.5px;color:var(--muted);display:flex;gap:12px}
}
@media(min-width:1280px){ body.home .feed .mcol{min-width:0} }

@media(min-width:1024px){
  .dk-face{width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--ground);display:grid;place-items:center;font-size:11px;font-weight:700;overflow:hidden}
  .dk-face img{width:26px;height:26px;object-fit:cover}
}
@media(min-width:1024px){
  /* the chat's own header sticks under the computer header, not under it */
  body .chead{top:var(--dkh)}
  /* the shops map is laid out in fixed layers under the phone's 50 px bar:
     move them down under the computer header instead */
  :root{--dkh:156px}
  body .vbar{top:var(--dkh)}
  body .sky{top:calc(var(--dkh) + 54px)}
  body .cardsv{top:calc(var(--dkh) + 54px)}
  body.flat .sky{top:var(--dkh)}
}

@media(min-width:1024px){
  /* the product grid on a computer: same-size picture boxes, cards that line up */
  .feed.dk-grid{display:grid;grid-template-columns:repeat(var(--cols,5),minmax(0,1fr));gap:10px;align-items:stretch}
  .feed.dk-grid .pc{border-radius:8px;border:1px solid transparent;box-shadow:none}
  .feed.dk-grid .pc:hover{border-color:#1daa61}
  .feed.dk-grid .pc{display:flex;flex-direction:column;height:100%;transition:transform .15s ease,box-shadow .15s ease}
  .feed.dk-grid .pc:hover{transform:translateY(-2px);box-shadow:0 10px 24px -16px rgba(0,0,0,.3)}
  .feed.dk-grid .ph{aspect-ratio:1/1!important;position:relative;padding:4px;border-radius:8px 8px 0 0}
  .feed.dk-grid .ph img{width:100%;height:100%;object-fit:contain}
  .feed.dk-grid .ph .tag{position:absolute;top:10px;left:10px}
  .feed.dk-grid .bd{flex:1;display:flex;flex-direction:column;padding:8px 10px 10px}
  .feed.dk-grid .nm{order:-1;margin:0 0 4px;font-size:13px;line-height:1.35}
  .feed.dk-grid .pr{font-size:19px}
  .feed.dk-grid .nm{min-height:2.7em}
  .feed.dk-grid .by{margin-top:auto;padding-top:6px}
}

@media(min-width:1024px){
  .dk-cats button i{width:32px;height:32px;border-radius:10px}
  .dk-cats button i svg{width:19px;height:19px}
  .dk-feedhead button{display:inline-flex;align-items:center;gap:7px}
  .dk-feedhead button svg{width:16px;height:16px}
  .dk-feedhead button.on svg{stroke:currentColor}
}

/* a heading only screen readers meet, on pages whose title is in the bar */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0}
@media(min-width:1024px){ .dk-search:focus-within{box-shadow:0 0 0 3px rgba(29,170,97,.28)} }