/* NO WEBFONT, DELIBERATELY.
   This sheet used to open with an @import of Playfair Display + Manrope from Google Fonts. Measured on the home
   page that cost 157.6 KB of woff2 across six files, behind two extra cross-origin connections (fonts.googleapis
   then fonts.gstatic) that the browser cannot even discover until style.css has already arrived. On a mid-range
   Android phone on mobile data in Mogadishu that is ~40% of the page's wire cost and a second or more of unstyled
   text, paid again by every customer who has cleared their cache. The stacks below are already on the device:
   Android has Roboto and Noto Serif, iOS has SF and Georgia. Zero bytes, first paint in the real face.
   The serif/sans pairing that carries the brand survives; only the specific cut changed. */
/* Garsoore — cream / beige primary, dark-brown ink, gold accent, silver neutrals.
   --pri is a FILL (buttons, hero panels) so text on it uses --pri-ink; --link is the readable text colour for links/prices on cream. */
:root{
  /* Light beige. The ground lifted (#F6EEDC -> #FBF7EE) and cards went to pure white, so a card now reads as a
     card rather than as a slightly different beige. Ink, gold and link are untouched: the brand did not change,
     the room did. */
  --bg:#FBF7EE; --fg:#3A2E26; --muted:#7F7060; --faint:#B09F8C;
  --line:#E5D9BF; --line-2:#EFE6D2; --surface:#F2E9D8; --chip:#F4EDDD;
  --card:#FFFFFF; --inverse-fg:#3A2E26; --btn:#DCC79B;
  --pri:#DCC79B; --pri-2:#D0B985; --pri-soft:#F0E4C8; --pri-ink:#3A2E26; --pri-line:#B39558; --link:#7E5F27;
  --gold:#B8912F; --gold-soft:#F1E3B9; --gold-ink:#2A2016; --silver:#CBCDD1; --silver-soft:#ECEEF1;
  --up:#3E7D52; --down:#B0413A;
  --r:12px;
  --fd:Georgia,"Noto Serif","Times New Roman",serif;
  --fb:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
/* ================= HARD BOUNDARY: two sites, two identities =================
   garsoore (consumer): warm cream, gold accent.   ganacsi (business): cool stone-silver, blue accent.
   Every business page carries the blue top bar, blue active switch and a cooler page tone, so you always know which side you are on. */
:root[data-surface="business"]{
  --bg:#F4F2EC; --card:#FFFFFF; --surface:#E8E5DA; --chip:#EDEBE2; --line:#D5D2C5; --line-2:#E4E1D6; --muted:#6C6A60; --faint:#A7A598;
  --pri:#D6D3C4; --pri-2:#C9C5B2; --pri-soft:#E2E7EE; --pri-line:#8E98A5; --btn:#D6D3C4;
  --gold:#2F5D8A; --gold-soft:#DBE5F0; --gold-ink:#FFFFFF; --link:#244C73;
}
:root[data-surface="business"][data-theme="dark"]{ --gold:#6C9BC9; --gold-soft:#22303F; --gold-ink:#10151B; --link:#9DC1E6; }
.surfbar{height:6px;background:var(--gold)}
.surfsw{display:inline-flex;gap:2px;padding:3px;border:1.5px solid var(--pri-line);border-radius:999px;background:var(--card);flex:none}
.surfsw a{padding:6px 15px;border-radius:999px;font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap;letter-spacing:.01em}
.surfsw a:not(.on):hover{background:var(--surface);color:var(--fg)}
.surfsw a.on{background:var(--gold);color:var(--gold-ink)}
.surfsw a:focus-visible{outline:2px solid var(--link);outline-offset:2px}

/* Light (cream / beige) is ALWAYS the default — the site does not follow the device's dark mode.
   Dark stays available on demand: <html data-theme="dark"> (or ?theme=dark, see app.js). */
:root[data-theme="dark"]{
    --bg:#1E1915; --fg:#F0E7DA; --muted:#B0A291; --faint:#7C6F61;
    --line:#3A3129; --line-2:#2A231D; --surface:#2A231D; --chip:#332A22;
    --card:#26201B; --inverse-fg:#1E1915; --btn:#D6C08F;
    --pri:#D6C08F; --pri-2:#C9B27A; --pri-soft:#3A3323; --pri-ink:#1E1915; --pri-line:#A48A55; --link:#E4C98F;
    --gold:#D4AE4A; --gold-soft:#3A3120; --silver:#6E7178; --silver-soft:#34302C;
    --up:#6DB585; --down:#D8695F;
}
:root{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased}
body{background:var(--bg);color:var(--fg);
  font-family:var(--fb);
  font-size:15px;line-height:1.55}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:11px;letter-spacing:.07em;text-transform:uppercase}
.type{color:var(--faint);letter-spacing:.1em}

.checkstrip{height:6px;width:100%;
  background-image:
    linear-gradient(45deg,var(--faint) 25%,transparent 25%,transparent 75%,var(--faint) 75%),
    linear-gradient(45deg,var(--faint) 25%,transparent 25%,transparent 75%,var(--faint) 75%);
  background-size:12px 12px;background-position:0 0,6px 6px}

header.site{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:26px;height:62px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--fd);font-weight:700;font-size:23px;letter-spacing:-.01em}
h1,h2,.hero h1{font-family:var(--fd);font-weight:700}
.nav{display:flex;gap:2px;margin-left:6px}
.nav a{padding:7px 12px;border-radius:var(--r);font-size:14px;font-weight:500;color:var(--muted)}
.nav a:hover{color:var(--fg);background:var(--surface)}
.nav a.on{color:var(--fg);font-weight:600;background:var(--surface)}
.spacer{margin-left:auto}
.btn{border:1px solid var(--btn);background:var(--btn);color:var(--inverse-fg);
  padding:8px 15px;border-radius:var(--r);font-size:14px;font-weight:600;cursor:pointer}
.btn:hover{opacity:.88}
.btn.ghost{background:transparent;color:var(--fg);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--faint);opacity:1}

.hero{padding:70px 0 40px;border-bottom:1px solid var(--line)}
.hero.sm{padding:44px 0 32px}
.hero h1{font-size:clamp(30px,4.6vw,52px);line-height:1.06;letter-spacing:-.015em;max-width:17ch}
.hero .sub{margin-top:16px;font-size:18px;color:var(--muted);max-width:56ch}
.hero .eyebrow{margin-bottom:14px}

.searchrow{display:flex;margin-top:28px;border:1px solid var(--line);border-radius:var(--r);max-width:780px;background:var(--bg)}
.searchrow:focus-within{border-color:var(--faint)}
.searchrow input{flex:1;border:0;background:transparent;padding:14px 16px;outline:none;font-size:15px}
.searchrow input::placeholder{color:var(--faint)}
.searchrow select{border:0;border-left:1px solid var(--line);background:transparent;padding:0 12px;outline:none;font-size:14px;cursor:pointer}
.searchrow button{border:0;background:var(--btn);color:var(--inverse-fg);padding:0 24px;font-weight:600;cursor:pointer;border-radius:0 var(--r) var(--r) 0}

.boards{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:52px;border-radius:var(--r);overflow:hidden}
.board-card{background:var(--bg);padding:26px 24px;display:block}
.board-card:hover{background:var(--surface)}
.board-card .k{color:var(--faint);margin-bottom:10px}
.board-card .v{font-size:17px;font-weight:600;letter-spacing:-.015em}
.board-card .v s{color:var(--faint);font-weight:400;text-decoration-thickness:1px}
.board-card .d{font-size:13.5px;color:var(--muted);margin-top:6px;max-width:40ch}
.board-card .go{margin-top:14px;font-size:13px;font-weight:600;color:var(--fg)}

.shell{display:grid;grid-template-columns:206px 1fr;gap:42px;padding:32px 0 90px;align-items:start}
aside.facets{position:sticky;top:84px}
.facet{border-bottom:1px solid var(--line-2);padding-bottom:15px;margin-bottom:15px}
.facet:last-child{border:0}
.facet .k{color:var(--faint);margin-bottom:10px}
.facet label{display:flex;align-items:center;gap:9px;padding:4px 0;font-size:14px;color:var(--muted);cursor:pointer}
.facet label:hover{color:var(--fg)}
.facet input{accent-color:var(--link);width:14px;height:14px;cursor:pointer}
.chiplist{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);background:transparent;padding:5px 11px;border-radius:999px;font-size:13px;color:var(--muted);cursor:pointer}
.chip:hover{border-color:var(--faint);color:var(--fg)}
.chip.on{background:var(--chip);color:var(--fg);border-color:var(--faint)}

.resbar{display:flex;align-items:baseline;gap:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.resbar .n{font-weight:600}
.resbar .sort{margin-left:auto}
.resbar select{border:0;background:transparent;cursor:pointer;font-size:13px;color:var(--muted)}

.row{display:grid;grid-template-columns:1fr auto;gap:30px;padding:20px 0;border-bottom:1px solid var(--line-2);cursor:pointer}
.row:hover{background:var(--surface)}
.head{display:flex;align-items:center;gap:8px;margin-bottom:5px;flex-wrap:wrap}
.row h3{font-size:16.5px;font-weight:600;letter-spacing:-.012em}
.row .org{font-size:13.5px;color:var(--muted);margin:3px 0 8px}
.row .desc{font-size:13.5px;color:var(--muted);max-width:74ch}
.facts{display:flex;gap:6px 14px;margin-top:10px;flex-wrap:wrap;color:var(--faint)}
.rail{text-align:right;white-space:nowrap}
.rail .amt{font-size:16px;font-weight:600;letter-spacing:-.02em}
.rail .amt-k{color:var(--faint);margin-top:2px}
.rail .due{margin-top:10px;font-size:13px;color:var(--muted)}
.rail .due b{font-weight:600;color:var(--fg)}

.badge{border:1px solid var(--line);padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--muted);display:inline-flex;align-items:center;gap:4px}
.badge.solid{background:var(--chip);color:var(--fg);border-color:var(--chip)}
.badge svg{display:block}
.tick{flex:none}

.empty{padding:70px 0;text-align:center;color:var(--muted)}
.empty .checkstrip{max-width:110px;margin:0 auto 18px;opacity:.6}

footer.site{border-top:1px solid var(--line);padding:36px 0 56px;color:var(--muted);font-size:13px}
.fgrid{display:flex;justify-content:space-between;gap:36px;flex-wrap:wrap}
footer.site b{color:var(--fg);font-weight:600}

.scrim{position:fixed;inset:0;background:rgba(20,19,17,.38);opacity:0;pointer-events:none;transition:opacity .18s;z-index:90}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(540px,100%);background:var(--bg);border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform .22s cubic-bezier(.4,0,.2,1);z-index:95;overflow-y:auto}
.drawer.on{transform:none}
.drawer .dhead{padding:24px 30px 20px;border-bottom:1px solid var(--line)}
.drawer .dbody{padding:24px 30px 40px}
.drawer h2{font-size:22px;font-weight:700;letter-spacing:-.025em;margin:10px 0 6px}
.close{position:absolute;top:18px;right:22px;background:none;border:0;font-size:22px;cursor:pointer;color:var(--muted);line-height:1}
.kv{display:grid;grid-template-columns:132px 1fr;gap:10px 20px;font-size:14px;padding:18px 0;border-bottom:1px solid var(--line-2)}
.kv dt{color:var(--faint)}
.kv dd{font-weight:550}
.trust{padding:18px 0;border-bottom:1px solid var(--line-2)}
.trust .k{color:var(--faint);margin-bottom:12px}
.trust li{list-style:none;display:flex;gap:10px;align-items:flex-start;font-size:14px;padding:5px 0;color:var(--muted)}
.trust li b{color:var(--fg);font-weight:600}
.trust .tick{margin-top:3px}
.dactions{display:flex;gap:10px;margin-top:22px}
.dactions .btn{flex:1;text-align:center;padding:12px}

.modal{position:fixed;inset:0;background:rgba(20,19,17,.4);display:none;align-items:center;justify-content:center;z-index:100;padding:24px}
.modal.on{display:flex}
.modal .box{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);width:100%;max-width:520px;max-height:88vh;overflow-y:auto}
.modal .mh{padding:22px 26px;border-bottom:1px solid var(--line)}
.modal .mb{padding:22px 26px 26px}
.modal h2{font-size:19px;font-weight:700;letter-spacing:-.02em}
.f{margin-bottom:15px}
.f label{display:block;color:var(--faint);margin-bottom:6px}
.f input,.f select,.f textarea{width:100%;border:1px solid var(--line);background:transparent;padding:10px 12px;border-radius:var(--r);outline:none;font-size:14px;font-family:inherit}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--faint)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.note{font-size:13px;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin-bottom:18px}

.modal .box .mh{position:relative}
.modal .box .close{position:absolute;top:16px;right:18px}
.modal .mb .note.err{color:var(--fg);border-color:var(--faint);background:var(--surface)}

/* ── Referee Score badge ── */
.badge.rs{font-variant-numeric:tabular-nums}
.badge.rs-A{border-color:var(--faint);color:var(--fg)}
.badge.rs-C{color:var(--faint)}

/* ── score bars (drawer) ── */
.scorebars{display:flex;flex-direction:column;gap:7px;margin-top:4px}
.sb{display:grid;grid-template-columns:96px 1fr 44px;align-items:center;gap:10px;font-size:11px;color:var(--muted)}
.sb .track{height:5px;background:var(--line-2);border-radius:999px;overflow:hidden}
.sb .track i{display:block;height:100%;background:var(--faint)}
.sb .mono:last-child{text-align:right}

/* ── wizard ── */
.wsub{font-size:13.5px;color:var(--muted);margin-bottom:16px}
.wgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wpick{border:1px solid var(--line);background:transparent;border-radius:var(--r);padding:16px 14px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:4px}
.wpick:hover{border-color:var(--faint);background:var(--surface)}
.wpick b{font-size:15px}
.wpick span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.wprog,.wprog i,.wprog+*{}
.wprog{height:4px;background:var(--line-2);border-radius:999px;overflow:hidden;margin-bottom:20px}
.wprog i{display:block;height:100%;background:var(--fg);transition:width .2s}
.wq label{display:block;font-size:15px;font-weight:600;margin-bottom:6px}
.wq label .req{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);border:1px solid var(--line);border-radius:999px;padding:1px 6px;vertical-align:middle;margin-left:6px}
.whelp{font-size:13px;color:var(--muted);margin-bottom:12px}
.wq #wCtl,.wq input,.wq select,.wq textarea,#wPaste{width:100%;border:1px solid var(--line);background:transparent;padding:11px 12px;border-radius:var(--r);outline:none;font-size:14px;font-family:inherit}
.wq #wCtl:focus,#wPaste:focus{border-color:var(--faint)}
#wCtl.err{border-color:#c0392b}
.wbool{display:flex;gap:20px}
.wbool label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:400;color:var(--muted);cursor:pointer}
.wbool input{width:15px;height:15px;accent-color:var(--link)}
.wrow{display:flex;gap:10px;margin-top:22px}
.wrow .btn{flex:1;text-align:center;padding:11px}
.wrow .btn.ghost{flex:0 0 auto;padding:11px 16px}
.wreview dd{position:relative;display:flex;justify-content:space-between;gap:12px}
.wedit{background:none;border:0;color:var(--faint);font-size:12px;text-decoration:underline;cursor:pointer;padding:0}
.wedit:hover{color:var(--fg)}
.wdone{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;padding:6px 0 14px}
.wdone .tick{margin-top:3px;flex:none}

/* ── activity page ── */
.idbar{display:flex;align-items:center;gap:10px;margin-top:20px;flex-wrap:wrap}
.idbar label{color:var(--faint)}
.idbar input{border:1px solid var(--line);background:transparent;padding:9px 12px;border-radius:var(--r);outline:none;font-size:14px;min-width:220px}
.idbar input:focus{border-color:var(--faint)}
.mrow{display:grid;grid-template-columns:1fr auto;gap:26px;padding:18px 0;border-bottom:1px solid var(--line-2)}
.mrow h3{font-size:16px;font-weight:600;margin:5px 0 2px}
.mrow .org{font-size:13.5px;color:var(--muted)}
.mrow .rail{display:flex;flex-direction:column;align-items:flex-end}
.stepper{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin-top:12px}
.stepper .step{font-size:11px;font-family:ui-monospace,Menlo,Consolas,monospace;padding:3px 8px;border-radius:999px;background:var(--line-2);color:var(--faint)}
.stepper .step.done{background:var(--chip);color:var(--muted)}
.stepper .step.now{background:var(--btn);color:var(--inverse-fg)}
.stepper .sep{color:var(--faint);font-size:11px}

/* ── toast ── */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);background:var(--btn);color:var(--inverse-fg);
  padding:12px 18px;border-radius:var(--r);font-size:13.5px;font-weight:500;z-index:120;opacity:0;transition:all .22s;max-width:90vw;text-align:center}
.toast.in{transform:translate(-50%,0);opacity:1}

/* ── exchange ── */
.px-up{color:var(--up)}
.px-down{color:var(--down)}
.xstrip{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:14px;border:1px solid var(--line);border-radius:var(--r);padding:22px 24px}
.xstrip:hover{background:var(--surface)}
.xstrip .k{color:var(--faint);margin-bottom:8px}
.xstrip .v{font-size:16px;font-weight:600}
.xstrip .d{font-size:13px;color:var(--muted);margin-top:5px;max-width:70ch}
.xstrip .go{font-size:13px;font-weight:600;white-space:nowrap}

.xwrap{display:grid;grid-template-columns:230px 1fr;gap:32px;padding:26px 0 90px;align-items:start}
.xmarkets{position:sticky;top:84px;display:flex;flex-direction:column;gap:2px}
.xmarkets .k{color:var(--faint);margin-bottom:8px}
.xrow{text-align:left;background:transparent;border:1px solid transparent;border-radius:var(--r);padding:11px 12px;cursor:pointer}
.xrow:hover{background:var(--surface)}
.xrow.on{background:var(--surface);border-color:var(--line)}
.xr-name{font-size:14px;font-weight:600}
.xr-px{font-size:14px;margin-top:2px}
.xr-sub{color:var(--faint);margin-top:3px;font-size:10px}

.xhead{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:16px}
.xhead h2{font-size:20px;font-weight:700;letter-spacing:-.02em}
.xstat{text-align:right}
.xstat .big{font-size:26px;font-weight:700;letter-spacing:-.03em}
.xstat .big .mono{font-size:12px;font-weight:400;color:var(--faint)}
.xstat .mono{font-size:11px;margin-top:3px}

.xgrid{display:grid;grid-template-columns:1fr 340px;gap:24px;margin-top:20px}
.xgrid2{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}

.book{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.bookhead,.lvl{display:grid;grid-template-columns:1fr 56px 56px;gap:6px;padding:5px 12px;font-size:12px;align-items:center}
.bookhead{background:var(--surface);color:var(--faint);border-bottom:1px solid var(--line)}
.lvl{position:relative}
.lvl .bar{position:absolute;top:0;bottom:0;right:0;opacity:.14}
.lvl.asks .bar{background:var(--down)}
.lvl.bids .bar{background:var(--up)}
.lvl .px,.lvl .sz,.lvl .cum{position:relative;z-index:1;text-align:right}
.lvl .px{text-align:left;font-weight:600}
.lvl.asks .px{color:var(--down)}
.lvl.bids .px{color:var(--up)}
.lvl.empty{color:var(--faint);justify-items:center;display:block;text-align:center}
.midrow{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:6px 12px;font-size:11px;color:var(--muted);text-align:center}

.xside{display:flex;flex-direction:column;gap:20px}
.ticket{border:1px solid var(--line);border-radius:var(--r);padding:16px}
.ticket label{display:block;color:var(--faint);margin:10px 0 4px}
.ticket select,.ticket input{width:100%;border:1px solid var(--line);background:transparent;padding:9px 10px;border-radius:var(--r);outline:none;font-size:13px;font-family:inherit}
.ticket select:focus,.ticket input:focus{border-color:var(--faint)}
.sidetoggle{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.sidetoggle button{background:transparent;border:0;padding:9px;font-size:13px;font-weight:600;cursor:pointer;color:var(--muted)}
.sidetoggle button.on:first-child{background:var(--up);color:#fff}
.sidetoggle button.on:last-child{background:var(--down);color:#fff}
/* neutral variant for non-trading toggles (Goods/Services, mode pickers) */
.b2btoggle button.on:first-child,.b2btoggle button.on:last-child,.b2btoggle button.on{background:var(--btn);color:var(--inverse-fg)}
.trow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.xbtn-sm{width:100%;padding:7px;margin-top:10px;font-size:12px}
.tcalc{margin:12px 0;font-size:11px;color:var(--muted);line-height:1.7}
.ticket .btn{width:100%;margin-top:4px;padding:11px;text-transform:capitalize}
.tnote{font-size:10px;color:var(--faint);margin-top:10px;line-height:1.5}

.tape table{width:100%;border-collapse:collapse;font-size:12px}
.tape .k{margin-bottom:8px;color:var(--faint)}
.tape th{text-align:left;color:var(--faint);font-weight:500;font-size:10px;text-transform:uppercase;letter-spacing:.06em;padding:4px 8px;border-bottom:1px solid var(--line)}
.tape td{padding:4px 8px;border-bottom:1px solid var(--line-2)}

.gtable .k,.myorders .k{color:var(--faint);margin-bottom:12px}
.grow{display:grid;grid-template-columns:70px 1fr;gap:12px;padding:8px 0;border-bottom:1px solid var(--line-2);font-size:13px}
.grow .mono{font-weight:600}
.gspec{font-size:12px;color:var(--muted)}
.oorow{display:grid;grid-template-columns:44px 1fr auto auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line-2);font-size:12.5px}
.oorow .mono:first-child{font-weight:700;font-size:11px}

/* ── B2B ── */
.b2bstrip{border-color:var(--faint)}
.b2bwrap{padding:24px 0 90px}
.b2btabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:22px}
.b2btabs button{background:transparent;border:0;border-bottom:2px solid transparent;padding:10px 14px;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;margin-bottom:-1px}
.b2btabs button:hover{color:var(--fg)}
.b2btabs button.on{color:var(--fg);border-bottom-color:var(--fg)}
.b2bctrl{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.b2btoggle{max-width:200px}
.b2bsearch{flex:1;min-width:200px;border:1px solid var(--line);background:transparent;padding:10px 12px;border-radius:var(--r);outline:none;font-size:14px}
.b2bsearch:focus{border-color:var(--faint)}
.b2bchips{margin-bottom:18px}
.b2bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.ocard{border:1px solid var(--line);border-radius:var(--r);padding:16px;cursor:pointer;display:flex;flex-direction:column;gap:6px}
.ocard:hover{border-color:var(--faint);background:var(--surface)}
.ocard h3{font-size:15.5px;font-weight:600;margin:2px 0}
.ocard .org{font-size:12.5px;color:var(--muted)}
.ocard .desc{font-size:13px;color:var(--muted)}
.ocard .facts{margin-top:6px}

.quotes{margin-top:12px;border-top:1px solid var(--line-2);padding-top:8px;display:flex;flex-direction:column;gap:6px}
.qrow{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;font-size:13px}
.qrow .btn{padding:5px 12px;font-size:12px}

.pxtable{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.pxhead,.pxrow{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 0.6fr 1.2fr;gap:10px;padding:9px 14px;align-items:center;font-size:13px}
.pxhead{background:var(--surface);color:var(--faint);border-bottom:1px solid var(--line)}
.pxrow{border-bottom:1px solid var(--line-2)}
.pxrow:last-child{border-bottom:0}

.walletcard{border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-bottom:34px}
.wc-bal{display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.wc-bal .k{display:block;color:var(--faint);margin-bottom:2px}
.wc-bal b{font-size:20px;font-weight:700;letter-spacing:-.02em}
.wc-bal .btn{margin-left:auto}
.wc-ledger{margin-top:14px;border-top:1px solid var(--line-2);padding-top:10px;display:flex;flex-direction:column;gap:5px}
.wl{display:grid;grid-template-columns:90px 1fr auto;gap:12px;font-size:12.5px;color:var(--muted)}

/* ── Logistics ── */
.jmi{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;align-items:center}
.jmi-btn{font-size:16px;font-weight:700;padding:13px 22px;letter-spacing:.01em}
.lane{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-bottom:10px}
.lane-h{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:baseline}
.lane-h b{font-size:14.5px;font-weight:600}
.lane-caps{margin-top:10px;border-top:1px solid var(--line-2);padding-top:8px;display:flex;flex-direction:column;gap:6px}
.capr{display:grid;grid-template-columns:1.2fr 1.4fr 1.1fr 1.1fr 0.9fr;gap:12px;font-size:12.5px;align-items:center}
.capr span:first-child{font-weight:600}
.matchlist{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.matchr{display:flex;justify-content:space-between;gap:16px;align-items:center;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.matchr b{font-size:14px}
.matchr-r{text-align:right;white-space:nowrap;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.matchr-r .amt{font-size:16px;font-weight:700;letter-spacing:-.02em}
.matchr-r .btn{padding:6px 16px;font-size:13px}

@media(max-width:900px){
  .shell{grid-template-columns:1fr;gap:22px}
  aside.facets{position:static}
  .boards{grid-template-columns:1fr}
  .row,.mrow{grid-template-columns:1fr;gap:10px}
  .rail{text-align:left}
  .mrow .rail{align-items:flex-start}
  .nav{display:none}
  .wgrid{grid-template-columns:1fr}
  .xwrap{grid-template-columns:1fr}
  .xmarkets{position:static;flex-direction:row;overflow-x:auto}
  .xgrid,.xgrid2{grid-template-columns:1fr}
  .xstrip{flex-direction:column;align-items:flex-start;gap:10px}
  .b2bgrid{grid-template-columns:1fr}
  .pxhead,.pxrow{grid-template-columns:1.6fr 1fr 1fr 0.8fr;font-size:12px}
  .pxhead span:nth-child(5),.pxrow span:nth-child(5),.pxhead span:nth-child(6),.pxrow span:nth-child(6){display:none}
  .wc-bal{gap:18px}
  .capr{grid-template-columns:1fr;gap:3px;padding:6px 0;border-bottom:1px solid var(--line-2)}
  .matchr{flex-direction:column;align-items:flex-start;gap:10px}
  .matchr-r{align-items:flex-start;text-align:left}
}

/* ================================================================ Garsoore shop (consumer) */
.btn{border-radius:10px;white-space:nowrap}
.btn.gold{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}
.btn.ghost{color:var(--fg)}
.lang{font-size:12px;font-weight:700;background:var(--surface);border-radius:999px;padding:3px;display:inline-flex}
.lang span{padding:3px 9px;border-radius:999px;cursor:pointer}.lang .on{background:var(--gold);color:var(--gold-ink)}
.nav a{white-space:nowrap}
.nav a.cnlink{color:var(--link);font-weight:700}
.bizmark{font:700 11px var(--fb);letter-spacing:.08em;text-transform:uppercase;background:var(--gold-soft);color:var(--link);border-radius:999px;padding:3px 8px}
.g-split{display:grid;grid-template-columns:1.2fr 1fr;gap:18px;margin-top:26px}
.g-local{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:36px}
.g-local h1{font-size:clamp(34px,4.4vw,52px);line-height:1.04;margin:16px 0 10px}
.g-local p,.g-chero p{color:var(--muted);max-width:46ch}
.g-pill{display:inline-block;background:var(--pri-soft);color:var(--link);border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:700}
.g-pill.gold{background:var(--gold-soft);color:var(--link)}
.g-search{display:flex;border:2px solid var(--line);border-radius:16px;background:var(--bg);padding:5px;margin:20px 0 14px}
.g-search:focus-within{border-color:var(--link)}
.g-search input{flex:1;border:0;background:transparent;padding:11px 12px;outline:none;min-width:0}
.g-search.sm{margin:0;max-width:360px;flex:1}
.g-quick{display:flex;gap:6px;flex-wrap:wrap}
.g-china{background:var(--pri);color:var(--pri-ink);border-radius:24px;padding:36px;position:relative;overflow:hidden}
.g-china::after{content:"";position:absolute;right:-70px;bottom:-70px;width:240px;height:240px;border-radius:50%;border:34px solid rgba(58,46,38,.07);pointer-events:none}
.g-china h2{font-size:34px;line-height:1.08;margin:14px 0 8px}.g-china p{opacity:.88;margin-bottom:18px}
.g-tagw{display:inline-block;background:rgba(58,46,38,.09);border-radius:999px;padding:5px 11px;font-size:12px;font-weight:700;letter-spacing:.06em;color:#574016}
.g-paste{display:flex;background:#fff;border-radius:14px;padding:5px;position:relative;z-index:1}
.g-paste input{flex:1;border:0;padding:10px 12px;outline:none;color:#3A2E26;background:transparent;min-width:0}
.g-src{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;font-size:12px;position:relative;z-index:1}
.g-src span,.g-src a{background:rgba(58,46,38,.08);padding:4px 10px;border-radius:8px}
.g-sec{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:38px 0 14px;flex-wrap:wrap}
.g-sec h2{font-size:26px}
.g-seg{display:flex;background:var(--surface);border-radius:12px;padding:4px}
.g-seg span{padding:6px 14px;border-radius:9px;font-size:13px;font-weight:700;cursor:pointer;color:var(--muted)}
.g-seg .on{background:var(--card);color:var(--link)}
.g-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:12px}
.g-tile{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px 6px;text-align:center;font-size:13px;font-weight:600}
.g-tile div{width:50px;height:50px;border-radius:14px;background:var(--surface);display:grid;place-items:center;font-size:24px;margin:0 auto 8px}
.g-tile:hover,.g-tile.on{border-color:var(--link)}
.g-tile.cn{border-color:var(--gold)}.g-tile.cn div{background:var(--gold-soft)}
.g-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.g-pc{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:transform .15s,box-shadow .15s;display:block}
.g-pc:hover{transform:translateY(-3px);box-shadow:0 14px 28px -18px rgba(58,46,38,.45)}
.g-pimg{aspect-ratio:1;background:linear-gradient(155deg,var(--silver-soft),var(--surface));display:grid;place-items:center;font-size:54px;position:relative}
.g-bd{position:absolute;top:10px;left:10px;font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:999px;letter-spacing:.04em}
.g-bd.cn{background:var(--gold);color:var(--gold-ink)}.g-bd.lo{background:var(--card);color:var(--link);border:1px solid var(--line)}
.g-pb{padding:12px 14px 14px}.g-pn{font-size:14px;font-weight:600;min-height:42px;line-height:1.45}
.g-pr{font-size:21px;font-weight:700;margin-top:4px;letter-spacing:-.01em}
.g-eta{font-size:12.5px;color:var(--muted)}.g-v{color:var(--link);font-weight:700}
.g-empty{grid-column:1/-1;padding:50px 0;text-align:center;color:var(--muted)}.g-empty a{color:var(--link);font-weight:700}
.g-bizband{margin:44px 0 10px;background:var(--pri);color:var(--pri-ink);border-radius:24px;padding:28px 32px;display:flex;align-items:center;gap:24px}
.g-bizband h3{font:700 24px var(--fd);margin-bottom:2px}.g-bizband h3 span{color:#574016}.g-bizband p{opacity:.75;font-size:14px}
.g-req{flex:1;display:flex;background:rgba(255,255,255,.45);border:1px solid rgba(58,46,38,.22);border-radius:14px;padding:5px}
.g-req input{flex:1;background:transparent;border:0;color:inherit;padding:10px 12px;outline:none;min-width:0}
/* product */
.g-crumb{margin:22px 0 14px;font-size:13px;color:var(--muted)}.g-crumb a{color:var(--link);font-weight:600}
.g-phero{border-radius:28px;background:linear-gradient(155deg,var(--silver-soft),var(--surface));display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:40px;gap:30px}
.g-pic{font-size:clamp(110px,16vw,190px);text-align:center}
.g-phero h1{font-size:clamp(32px,4vw,50px);line-height:1.02;margin:8px 0 10px}
.g-sku{font:12px ui-monospace,Consolas,monospace;color:var(--muted);margin-top:12px}
.g-blurb{color:var(--muted);max-width:44ch}
.g-lbl{font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin:18px 0 8px}
.g-o{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:12px;padding:9px 14px;font-size:14px;font-weight:600;margin:0 6px 6px 0;background:var(--card);cursor:pointer}
.g-o i{width:16px;height:16px;border-radius:50%;box-shadow:0 0 0 1px var(--line)}
.g-o.on{border-color:var(--link);background:var(--pri-soft);color:var(--link)}
.g-specs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
.g-specs div{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.g-specs span{font-size:12px;color:var(--muted)}.g-specs b{display:block;font-size:17px}
.g-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.g-trust div{background:var(--gold-soft);border-radius:14px;padding:12px 14px;font-size:12.5px;color:var(--muted)}.g-trust b{display:block;color:var(--fg);font-size:13.5px}
.g-buybar{position:sticky;bottom:14px;z-index:30;margin-top:18px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:12px 14px 12px 18px;display:flex;align-items:center;gap:16px;box-shadow:0 18px 40px -22px rgba(58,46,38,.55)}
.g-bi{font-size:34px}.g-bt{flex:1;min-width:0}.g-bt b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-price{font-size:32px;font-weight:700;letter-spacing:-.02em}.g-price.sm{font-size:22px}
.g-buy{padding:14px 26px;font-size:15.5px;border-radius:14px}.g-buy.full{width:100%;margin-top:14px}
/* checkout */
.g-co{padding:26px}.g-co h2{font:700 26px var(--fd)}
.g-line{display:flex;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);margin-top:10px}
.g-th{width:52px;height:52px;border-radius:12px;background:var(--surface);display:grid;place-items:center;font-size:18px;font-weight:700;color:var(--muted,#888);flex:none}   /* holds a category monogram, never an emoji */
.g-rad{display:flex;gap:10px;align-items:center;border:1.5px solid var(--line);border-radius:12px;padding:11px 13px;margin-bottom:8px;background:var(--card);font-size:14px;cursor:pointer}
.g-rad i{width:16px;height:16px;border-radius:50%;border:2px solid var(--silver);flex:none}
.g-rad.on{border-color:var(--link);background:var(--pri-soft)}.g-rad.on i{border:5px solid var(--link)}
.g-rad span{margin-left:auto;font-size:12px;color:var(--muted)}
.g-pay{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.g-pay div{border:1.5px solid var(--line);border-radius:12px;padding:10px 4px;text-align:center;font-size:12px;font-weight:700;background:var(--card);cursor:pointer}
.g-pay .on{border-color:var(--link);background:var(--pri-soft);color:var(--link)}
.g-tot{display:flex;justify-content:space-between;align-items:end;margin-top:18px;padding-top:14px;border-top:2px solid var(--fg)}.g-tot b{font-size:30px}
.g-escrow{margin-top:12px;background:var(--gold-soft);color:var(--fg);border-radius:12px;padding:10px 12px;font-size:12.5px}
/* china */
.g-chero{background:var(--pri);color:var(--pri-ink);border-radius:28px;padding:44px;margin-top:26px;position:relative;overflow:hidden}
.g-chero h1{font-size:clamp(30px,4vw,48px);margin:14px 0 8px}.g-chero p{color:inherit;opacity:.85}
.g-paste.big{max-width:720px;margin-top:22px}
.g-how{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:26px;counter-reset:s}
.g-how li{background:rgba(58,46,38,.07);border-radius:14px;padding:12px 14px;font-size:13px;counter-increment:s}
.g-how li::before{content:counter(s);display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--gold);color:#fff;font-weight:700;font-size:12px;margin-bottom:6px}
.g-how b{display:block}
.g-found{margin:22px 0 12px;background:var(--pri-soft);color:var(--link);border-radius:12px;padding:12px 16px;font-weight:700}
.g-err{margin:22px 0;background:var(--gold-soft);border-radius:12px;padding:12px 16px}
/* orders */
.g-order{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px 20px;margin-bottom:14px}
.g-order.new{border-color:var(--link)}
.g-ohead{display:flex;gap:14px;align-items:center}
.g-track{display:flex;margin:18px 0 6px}
.g-track div{flex:1;text-align:center;font-size:11.5px;color:var(--muted);position:relative}
.g-track div::before{content:"";position:absolute;top:9px;left:-50%;right:50%;height:3px;background:var(--line)}
.g-track div:first-child::before{display:none}
.g-track i{display:block;width:20px;height:20px;border-radius:50%;background:var(--line);margin:0 auto 6px;position:relative;border:3px solid var(--card)}
.g-track .d i,.g-track .d::before,.g-track .n::before{background:var(--pri-line)}
.g-track .n i{background:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}.g-track .n{color:var(--fg);font-weight:700}
.g-orow{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.g-ops{margin-top:12px;background:var(--surface);border-radius:12px;padding:12px;font-size:11.5px;overflow:auto;max-height:260px}
@media(max-width:900px){
  .g-split,.g-phero{grid-template-columns:1fr}.g-phero{padding:26px}
  .g-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.g-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .g-specs,.g-how{grid-template-columns:1fr 1fr}.g-trust{grid-template-columns:1fr}
  .g-bizband{flex-direction:column;align-items:stretch}.g-local,.g-china,.g-chero{padding:24px}
  .g-bi{display:none}.g-price{font-size:24px}.g-buy{padding:12px 16px}
  .nav{overflow-x:auto;white-space:nowrap;scrollbar-width:none}.lang{display:none}
}
/* business China procurement */
.g-otable{display:flex;flex-direction:column;gap:10px}
.g-orow2{display:grid;grid-template-columns:52px 1fr 110px 190px auto;gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.g-oinfo a{color:var(--link);font-weight:700}
.g-oqty input{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:8px;background:var(--bg)}
.g-oprice{text-align:right}
.g-vendors{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.g-vendor{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.g-vtags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.g-src small{opacity:.7}
@media(max-width:900px){.g-orow2{grid-template-columns:44px 1fr}.g-oqty,.g-oprice{grid-column:2}.g-oprice{text-align:left}}
.g-more{grid-column:1/-1;text-align:center;padding:14px 0}
.g-pic img{max-width:100%;max-height:300px;object-fit:contain;border-radius:18px}

/* cream/beige primary — buttons get a defined edge; ghost / gold variants above override this */
.btn{border-color:var(--pri-line)}
.btn:hover{background:var(--pri-2);opacity:1}
.g-china .g-paste .btn.gold{color:var(--gold-ink)}

/* header: the switch is never squeezed out — the nav takes the slack and scrolls if needed */
.bar{gap:16px}
.nav{flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.spacer{display:none}
/* header on phones: brand + switch + post on row 1, scrollable nav on row 2 — the switch never disappears */
@media(max-width:900px){
  .bar{flex-wrap:wrap;height:auto;padding-top:10px;padding-bottom:8px;gap:8px 10px}
  .brand{order:1}
  .surfsw{order:2;margin-left:auto}
  #postBtn{order:3}
  .nav{display:flex;order:9;flex:0 0 100%;margin-left:0;padding-bottom:2px}
  .surfsw a{padding:6px 12px}
}
@media(max-width:480px){
  .wrap{padding-left:16px;padding-right:16px}
  .brand{font-size:19px;gap:7px}
  .brand svg{width:22px;height:22px}
  .bizmark{display:none}                       /* the blue bar + switch already say "Ganacsi" */
  .surfsw a{padding:5px 10px;font-size:12px}
  .btn#postBtn{padding:7px 12px}
  .bar{gap:8px}
}
@media(max-width:600px){
  .searchrow{max-width:100%}
  .searchrow input{min-width:0;width:100%}
  .searchrow select{max-width:36%;min-width:0}
  .searchrow button{padding:0 16px}
}

/* ---------------------------------------------------------------- cart, saved, filters, reviews, order actions */
.cartbtn{position:relative;padding-left:12px;padding-right:12px}
.cartbtn.on{border-color:var(--link)}
.cartbtn .n{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--link);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}
.g-pimg{position:relative}
.g-heart{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--muted);font-size:16px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
.g-heart:hover,.g-heart.on{color:#C0392B;border-color:#e3b3ab}
.g-stars{color:var(--gold,#B8912F);letter-spacing:1px}.g-stars i{font-style:normal;opacity:.25}
.g-filters{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin:-4px 0 16px;font-size:13px;color:var(--muted)}
.g-filters label{display:flex;align-items:center;gap:6px;font-weight:700}
.g-filters select,.g-filters input[type=number]{border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:10px;padding:6px 8px;font:inherit;font-weight:600}
.g-filters input[type=number]{width:90px}
.g-filters #fCount{margin-left:auto}
.g-row{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.g-qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card)}
.g-qty button{border:0;background:none;width:34px;height:36px;font-size:18px;cursor:pointer;color:var(--fg)}
.g-qty button:hover{background:var(--surface)}
.g-qty span{min-width:26px;text-align:center;font-weight:700}
.g-pact{display:flex;gap:8px;margin-top:12px}
.g-pact .chip{cursor:pointer;border:1px solid var(--line);background:var(--card);font:inherit;font-size:13px;font-weight:700}
.g-pact .chip.on{color:#C0392B}
.g-revsum{font-size:15px;margin-bottom:10px}
.g-rev{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:8px}
.g-rev p{margin:6px 0 0}
.g-empty.sm{padding:18px;font-size:14px}
.g-in{display:block;width:100%;box-sizing:border-box;border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:12px;padding:11px 12px;font:inherit;margin-top:8px}
.g-promo{display:flex;gap:8px;align-items:stretch}.g-promo .g-in{flex:1}.g-promo .btn{margin-top:8px}
.g-sum{margin-top:14px;font-size:14px}
.g-sum div{display:flex;justify-content:space-between;padding:3px 0;color:var(--muted)}
.g-sum div b{color:var(--fg)}.g-sum .ok b,.g-sum .ok{color:#2E7D4F}
.g-err.sm{padding:10px 12px;font-size:13px}
.g-cart{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start}
.g-cside{position:sticky;top:90px}
.g-cl .g-ohead{align-items:center;gap:12px}
.g-x{border:0;background:none;font-size:22px;color:var(--muted);cursor:pointer;padding:0 4px}
.g-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 16px}
.g-stats div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-size:12px;color:var(--muted)}
.g-stats b{display:block;font-size:20px;color:var(--fg)}
.g-track small{display:block;font-size:10px;opacity:.7;font-weight:600;margin-top:2px}
.g-code{display:flex;gap:16px;align-items:center;margin-top:14px;padding:14px 16px;border-radius:14px;background:var(--surface);border:1px dashed var(--link)}
.g-code b{font-size:28px;letter-spacing:4px;font-variant-numeric:tabular-nums;color:var(--link)}
.g-oacts{display:flex;flex-wrap:wrap;gap:8px}
.g-order.cx{opacity:.72}
.g-rvform{margin-top:12px;display:grid;gap:8px}
.g-pick button{border:0;background:none;font-size:26px;cursor:pointer;color:var(--line);padding:0 2px}
.g-pick button.on{color:var(--gold,#B8912F)}
@media (max-width:760px){
  .g-cart{grid-template-columns:1fr}.g-cside{position:static}
  .g-stats{grid-template-columns:repeat(2,1fr)}
  .g-buybar{flex-wrap:wrap}
  .g-cl .g-ohead{flex-wrap:wrap}
  .g-filters #fCount{margin-left:0}
}

/* ---------------------------------------------------------------- launch: honest pricing, account-in-checkout, payment step, referrals, ops console */
.g-incl{margin-top:12px;padding:11px 14px;border-radius:14px;background:var(--pri-soft);font-size:13.5px;line-height:1.5}
.g-soc{font-size:13px;font-weight:700;color:var(--link);margin:-4px 0 8px}
.g-soc:empty{display:none}
.g-goal{font-size:12.5px;color:var(--muted);margin-top:10px}
.g-goal div{height:6px;border-radius:3px;background:var(--line-2);overflow:hidden;margin-bottom:5px}
.g-goal i{display:block;height:100%;background:var(--gold)}
.g-goal.ok{color:#2E7D4F;font-weight:700}
.g-acct{margin-top:12px;padding:12px 14px;border:1px dashed var(--pri-line);border-radius:14px;font-size:13.5px}
.g-acct a{color:var(--link);font-weight:700;margin-left:4px}
.g-steps{list-style:none;padding:0;margin:12px 0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;counter-reset:s}
.g-steps li{counter-increment:s;font-size:11.5px;line-height:1.35;background:var(--surface);border-radius:10px;padding:8px 8px 8px 30px;position:relative;color:var(--muted)}
.g-steps li::before{content:counter(s);position:absolute;left:8px;top:8px;width:16px;height:16px;border-radius:50%;background:var(--gold);color:var(--gold-ink);font-size:10px;font-weight:700;display:grid;place-items:center}
.g-steps li b{color:var(--fg)}
.g-steps.v{grid-template-columns:1fr}.g-steps.v li{font-size:13.5px}
.g-paybox{margin:14px 0;padding:16px;border-radius:16px;background:var(--pri-soft);border:1px solid var(--pri-line);display:grid;gap:4px;text-align:center}
.g-amt{font-family:var(--fd);font-size:40px;line-height:1.1}
.g-mno{font-size:20px;letter-spacing:1px;color:var(--link)}
.g-paynote{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:14px 16px;border-radius:16px;background:var(--gold-soft);border:1px solid var(--gold);margin-bottom:14px;font-size:14px}
.g-paynote .btn{margin-left:auto}
.g-refer{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:14px 16px;border-radius:16px;background:var(--card);border:1px solid var(--line);margin-bottom:14px}
.g-refer>div{flex:1;min-width:220px}
.g-refer code{font-size:18px;font-weight:700;letter-spacing:2px;padding:6px 12px;border-radius:10px;background:var(--surface)}
.g-auth .g-lbl{display:block;margin-top:12px}
.g-order.late{border-color:var(--down);box-shadow:inset 3px 0 0 var(--down)}
.ops-tabs{display:inline-flex;flex-wrap:wrap}
.ops-tabs em{font-style:normal;margin-left:6px;background:var(--down);color:#fff;border-radius:9px;padding:0 6px;font-size:11px}
.ops-tabs em:empty{display:none}
.ops-kpi{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.ops-kpi div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.ops-kpi span{display:block;font-size:12px;color:var(--muted);font-weight:700}
.ops-kpi b{display:block;font-size:24px;margin:2px 0}
.ops-kpi em{font-style:normal;font-size:12px;color:var(--muted)}
.ops-kpi .good b{color:var(--up)}.ops-kpi .bad b{color:var(--down)}
.ops-funnel{display:grid;gap:6px;max-width:720px}
.ops-funnel div{display:grid;grid-template-columns:120px 1fr 50px 44px;align-items:center;gap:10px;font-size:13px}
.ops-funnel i{height:14px;border-radius:7px;background:var(--gold);display:block}
.ops-funnel em{font-style:normal;color:var(--muted);font-size:12px}
.ops-code{font-size:34px;text-align:center;letter-spacing:8px;font-variant-numeric:tabular-nums}
@media (max-width:760px){
  .g-steps{grid-template-columns:1fr 1fr}
  .ops-funnel div{grid-template-columns:90px 1fr 40px 36px}
  .g-paynote .btn{margin-left:0}
}
/* phones: the account button is primary (orders, pickup codes); "sell" moves out of the way */
@media (max-width:560px){
  /* row 1: logo · switch · cart · account (icon-sized)   row 2: nav */
  #postBtn{display:none}
  .cartbtn{order:3;padding:7px 9px}
  .langbtn{order:5;padding:7px 8px}
  #whoBtn{order:4;padding:7px 9px;max-width:40px;overflow:hidden;white-space:nowrap;font-size:14px}
  #whoBtn:not(.in){font-size:12.5px;max-width:none}
}
@media (max-width:420px){
  .brand .bname,.brand .bizmark{display:none}   /* the switch already says "Garsoore | Ganacsi" */
}
/* real product photos on cards (supplier images; white backgrounds sit on a white tile) */
.g-pimg:has(.g-pimgi){background:#fff}
.g-pimgi{width:100%;height:100%;object-fit:contain;padding:10px;box-sizing:border-box}
/* supplier titles are long: two lines on cards, full title on the product page */
.g-pn{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------------------------------------------------------------- agents (wakiillo) */
.ag-modes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.ag-modes div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.ag-modes b{display:block;font-size:15px;margin-bottom:4px}
.ag-modes span{font-size:12.5px;color:var(--muted);line-height:1.5}
.ag-badge{font-size:10px;font-weight:700;letter-spacing:.08em;padding:6px 8px;border-radius:9px;align-self:flex-start}
.ag-badge.liq{background:var(--gold-soft);color:var(--gold-ink)}
.ag-badge.mar{background:var(--pri-soft);color:var(--link)}
.ag-nums,.ag-split{display:flex;flex-wrap:wrap;gap:8px 18px}
.ag-nums div span,.ag-split div span{display:block;font-size:11px;color:var(--muted);font-weight:700}
.ag-nums div b,.ag-split div b{font-size:16px}
.ag-split{margin-top:12px;padding:12px 14px;border-radius:14px;background:var(--surface)}
.ag-fore{margin-top:10px}
.ag-log{margin-top:10px;border-left:2px solid var(--line);padding-left:12px;font-size:12.5px;display:grid;gap:5px}
.ag-log i{font-style:normal;color:var(--muted)}
.ag-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ag-pick{margin-top:12px}
.g-rad>div{flex:1}
.ag-tbl{width:100%;border-collapse:collapse;margin:10px 0 18px;font-size:13.5px}
.ag-tbl th,.ag-tbl td{border-bottom:1px solid var(--line);padding:9px 10px;text-align:left;vertical-align:top}
.ag-tbl th{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.ag-tbl td:first-child{color:var(--muted);font-weight:700;width:150px}
.ag-how h3{font-family:var(--fd);margin:18px 0 6px}
.ag-how ul{margin:6px 0 0 18px;line-height:1.7}
@media (max-width:760px){ .ag-modes,.ag-row{grid-template-columns:1fr} }

/* ---------------------------------------------------------------- admin panel */
.ad-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.ad-bar .g-in{margin-top:0;width:auto;flex:1;min-width:180px}
.ad-bar select.g-in{flex:0 0 190px}
.ad-tag{display:inline-block;font-size:11px;font-weight:700;padding:3px 8px;border-radius:8px;background:var(--surface);color:var(--muted);margin-left:4px;vertical-align:middle}
.ad-tag.ok{background:#DCEFE2;color:#2E7D4F}
.ad-tag.sus{background:#F6DDDA;color:#B0413A}
.ad-tag.r-admin{background:var(--gold);color:var(--gold-ink)}
.ad-tag.r-staff{background:var(--pri);color:var(--pri-ink)}
.ad-tag.r-agent{background:#E2E7F2;color:#3A5580}
.ad-tag.r-business{background:var(--pri-soft);color:var(--link)}
.ad-sel{margin-top:0;width:auto;flex:0 0 150px;padding:7px 8px;font-size:13px}
.ad-row .g-ohead{align-items:center;flex-wrap:wrap;gap:8px}
.ad-roles div{flex:1;text-align:center}
.ad-tbl{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:12.5px}
.ad-tbl>div{display:grid;grid-template-columns:130px 1.6fr .7fr .7fr .9fr 1fr;gap:10px;background:var(--card);padding:9px 12px}
.ad-tbl.log>div{grid-template-columns:150px 130px 130px 130px 1fr}
.ad-tbl span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:760px){ .ad-tbl>div,.ad-tbl.log>div{grid-template-columns:1fr 1fr} .ad-sel{flex:1} }

/* ---------------------------------------------------------------- FBG */
.fb-addr{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0}
.fb-addr>div{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.fb-addrtxt{font-size:13px;line-height:1.5;margin:4px 0 8px}
.fb-addr .g-amt{font-size:26px}.fb-addr .g-amt.neg{color:var(--down)}
.fb-photos{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.fb-photos img{width:56px;height:56px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.fb-led>div{grid-template-columns:90px 150px 90px 110px 1fr}
.fb-led .neg{color:var(--down);font-weight:700}.fb-led .pos{color:var(--up);font-weight:700}
@media (max-width:760px){ .fb-addr{grid-template-columns:1fr} }

/* language switch — Somali is the default, English is one tap away */
.langbtn{padding:7px 10px;font-size:12px;font-weight:700;letter-spacing:.04em}
@media (max-width:560px){ .langbtn{padding:7px 8px} }

/* ---------------------------------------------------------------- Fudud (simple) business mode */
.modebtn{padding:7px 11px;font-size:12.5px;font-weight:700}
.sm-wrap{max-width:900px}
.sm-hero{padding:34px 0 8px}
.sm-hero h1{font-family:var(--fd);font-size:clamp(28px,4vw,40px);margin:10px 0 6px;line-height:1.15}
.sm-hero p{color:var(--muted);font-size:15px;max-width:60ch}
.sm-jobs{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin:18px 0}
.sm-job{text-align:left;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;cursor:pointer;display:grid;gap:6px;font:inherit;transition:transform .12s,box-shadow .12s}
.sm-job:hover{transform:translateY(-2px);box-shadow:0 14px 28px -20px rgba(58,46,38,.5)}
.sm-job.on{border-color:var(--link);box-shadow:inset 0 0 0 1px var(--link)}
.sm-ic{font-size:30px;line-height:1}
.sm-job b{font-size:17px;line-height:1.3}
.sm-job em{font-style:normal;font-size:13px;color:var(--muted);line-height:1.55}
.sm-job i{font-style:normal;font-size:13px;font-weight:700;color:var(--link);margin-top:2px}
.sm-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:22px;margin:6px 0 18px}
.sm-card h2{font-family:var(--fd);font-size:22px;margin:0 0 14px}
.sm-card.ok{text-align:center}
.sm-tick{width:54px;height:54px;border-radius:50%;background:var(--up);color:#fff;font-size:28px;display:grid;place-items:center;margin:0 auto 12px}
.sm-card.ok p{color:var(--muted);line-height:1.6;max-width:52ch;margin:0 auto 16px}
.sm-h{font-family:var(--fd);font-size:16px;margin:18px 0 8px}
.sm-row{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:11px 0;border-top:1px solid var(--line-2);flex-wrap:wrap}
.sm-row:first-of-type{border-top:0}
.sm-price{display:flex;gap:8px;align-items:center}
.sm-price .g-in{margin-top:0;width:110px}
.sm-fees{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:14px 0}
.sm-fees div{background:var(--surface);border-radius:12px;padding:10px 12px}
.sm-fees b{display:block;font-size:18px}
.sm-fees span{font-size:11.5px;color:var(--muted)}
.sm-addr{display:grid;gap:10px;margin-bottom:12px}
.sm-addr>div{background:var(--surface);border-radius:12px;padding:12px 14px}
.sm-addr span{display:block;font-size:11.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.sm-addr b{font-size:24px;letter-spacing:2px;color:var(--link)}
.sm-addr p{margin:4px 0 0;font-size:13.5px;line-height:1.5}
.sm-foot{border-top:1px solid var(--line);padding:18px 0 40px;color:var(--muted);font-size:13.5px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
@media (max-width:560px){ .modebtn{order:2;padding:7px 8px;font-size:11.5px} .sm-jobs{grid-template-columns:1fr} .sm-hero{padding:22px 0 4px} }

/* ---------------------------------------------------------------- account / sign-up */
.ac-wrap{max-width:900px}
.ac-hero{padding:32px 0 6px}
.ac-hero h1{font-family:var(--fd);font-size:clamp(26px,4vw,36px);margin:0 0 6px}
.ac-hero p{color:var(--muted);font-size:14.5px}
.ac-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;align-items:start;margin:14px 0 40px}
.ac-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px}
.ac-card h3{font-family:var(--fd);font-size:17px;margin:0 0 10px}
.ac-card .btn.full{margin-top:14px}
.ac-side{display:grid;gap:16px}
.ac-big{font-family:var(--fd);font-size:34px;color:var(--link)}
.ac-code{font-size:22px;font-weight:700;letter-spacing:3px;background:var(--surface);border-radius:12px;padding:10px 14px;text-align:center}
.ac-link{display:block;padding:9px 0;border-top:1px solid var(--line-2);font-weight:700;color:var(--link);text-decoration:none}
.ac-link:first-of-type{border-top:0}
.ac-why{background:var(--pri-soft);border-radius:18px;padding:20px}
.ac-why h3{font-family:var(--fd);font-size:17px;margin:0 0 10px}
.ac-why ul{margin:0;padding-left:18px;line-height:1.75;font-size:14px}
@media (max-width:760px){ .ac-grid{grid-template-columns:1fr} }

/* ---------------------------------------------------------------- content pages */
.doc{max-width:760px;padding-bottom:60px}
.doc h1{font-family:var(--fd);font-size:clamp(28px,4vw,38px);margin:34px 0 10px}
.doc h2{font-family:var(--fd);font-size:20px;margin:26px 0 8px}
.doc p,.doc li{line-height:1.75;font-size:15px}
.doc ul,.doc ol{padding-left:20px}
.doc a{color:var(--link);font-weight:700}
.doc-note{background:var(--gold-soft);border-radius:12px;padding:10px 14px;font-size:13.5px}
.doc-wa{white-space:nowrap}
.fnav{display:flex;gap:14px;flex-wrap:wrap}
.fnav a{color:var(--muted);font-weight:600}

/* ---------------------------------------------------------------- notifications */
.bellbtn{position:relative;padding:7px 10px}
.bellbtn .n{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--down);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}
.bell-panel{position:absolute;top:58px;right:16px;width:min(360px,calc(100vw - 32px));max-height:70vh;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 50px -24px rgba(58,46,38,.55);z-index:60}
.bell-row{display:grid;gap:2px;padding:12px 14px;border-bottom:1px solid var(--line-2);text-decoration:none;color:var(--fg)}
.bell-row:hover{background:var(--surface)}
.bell-row.new{border-left:3px solid var(--gold)}
.bell-row b{font-size:14px}
.bell-row span{font-size:12.5px;color:var(--muted);line-height:1.5}
.bell-row i{font-style:normal;font-size:11px;color:var(--faint)}
.bell-empty{padding:22px;text-align:center;color:var(--muted);font-size:13.5px}
@media (max-width:560px){ .bellbtn{order:4;padding:7px 8px} .bell-panel{top:52px;right:8px} }

/* ---------------------------------------------------------------- buy-for-me service menu (business China) */
.g-svc{margin:18px 0 6px;padding:16px 18px;background:var(--card);border:1px solid var(--line);border-radius:18px}
.g-svch b{display:block;font-size:15.5px;margin-bottom:2px}
.g-svch .g-eta{display:block;max-width:74ch}
.g-svcgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:8px;margin:14px 0 10px}
.g-svcit{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;cursor:pointer;background:var(--surface);font-size:13.5px}
.g-svcit:hover{border-color:var(--gold)}
.g-svcit.on{border-color:var(--gold);background:var(--card);box-shadow:inset 0 0 0 1px var(--gold)}
.g-svcit span{flex:1}
.g-svcit b{font-weight:700;font-size:13px;color:var(--muted)}
.g-svcit.on b{color:var(--fg)}
.g-svcit input{accent-color:var(--gold);width:16px;height:16px;flex:none}
.g-svcf{font-size:13px;color:var(--muted);border-top:1px solid var(--line-2);padding-top:10px}
.g-svcf b{color:var(--fg);font-size:15px}
@media (max-width:560px){ .g-svcgrid{grid-template-columns:1fr} }

/* ---------------------------------------------------------------- air / sea choice
   Everything behind these two buttons - rate cards, volumetric weight, chargeable CBM, consolidation, the carrier -
   is backend machinery. The customer gets a speed, a window and a price. */
.g-ship{margin:16px 0 4px}
.g-shopts{display:flex;gap:10px;flex-wrap:wrap}
.g-shopt{flex:1 1 180px;display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--card);cursor:pointer;text-align:left;font:inherit}
.g-shopt:hover{border-color:var(--gold)}
.g-shopt.on{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.g-shopt b{font-size:14.5px}
.g-shopt span{font-size:12.5px;color:var(--muted)}
.g-shopt i{font-style:normal;font-weight:700;font-size:17px;margin-top:2px}
@media (max-width:560px){ .g-shopt{flex:1 1 100%} }

/* ---------------------------------------------------------------- console: shipping contracts */
.cs-warn{padding:14px 16px;border:1px solid var(--gold);border-radius:14px;background:var(--card);margin-bottom:16px}
.cs-warn b{display:block;margin-bottom:4px}
.cs-warn div{font-size:13px;color:var(--muted);line-height:1.6}
.cs-ok{padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:var(--card);margin-bottom:16px}
.cs-card{padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:var(--card);margin-bottom:14px}
.cs-cardh{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.cs-cardh b{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px}
.cs-kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:9px}
.cs-kv>div{display:flex;flex-direction:column;gap:1px}
.cs-kv span{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint)}
.cs-kv b{font-size:13px;font-weight:600;line-height:1.5}
.cs-note2{font-size:12.5px;color:var(--muted);line-height:1.6;margin-top:10px}
.cs-note2 code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}

/* lane chips on a cart line */
.g-clane{display:flex;gap:7px;flex-wrap:wrap;padding:0 0 2px 52px}
.g-clane .chip{cursor:pointer;font-size:12px}
@media (max-width:560px){ .g-clane{padding-left:0} }

/* consolidation saving in the cart summary */
.g-sum .save span,.g-sum .save b{color:var(--up)}
.g-sum .save b{font-weight:700}

/* "cheaper if you buy more" - stated once, where the single-shipment minimum bites */
.g-bulk{margin:14px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);font-size:13.5px;color:var(--muted);line-height:1.65}
.g-bulkrow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:10px}
.g-bulkrow span{font-size:14px;color:var(--fg)}
.g-bulk small{display:block;margin-top:8px;font-size:11.5px;opacity:.75}
.g-ladder{width:100%;border-collapse:collapse;margin-top:10px;font-size:13px}
.g-ladder th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;opacity:.7;padding:4px 8px 4px 0;font-weight:700}
.g-ladder td{padding:6px 8px 6px 0;border-top:1px solid var(--line);color:var(--fg)}
.g-ladder tr.on td{background:var(--surface2,rgba(127,127,127,.08));font-weight:700}
.g-ladder .ok{color:var(--ok,#1a8f4c);font-weight:700}

/* the supplier's minimum, shown on the card next to the price */
.g-moq{font-size:12px;font-weight:600;color:var(--muted)}

/* item price first, shipping immediately beside it — partitioned, never hidden */
.g-ship-sm{font-size:12.5px;color:var(--muted);margin-top:-2px}
.g-ship-in{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-top:2px}

/* ---------------------------------------------------------------- membership tiers */
.pr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin:18px 0}
.pr-card{padding:20px 22px;border:1px solid var(--line);border-radius:18px;background:var(--card)}
.pr-card.on{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.pr-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:14px}
.pr-head b{font-size:17px}
.pr-price{font-size:24px;font-weight:700}
.pr-price small{font-size:13px;font-weight:600;color:var(--muted)}
.pr-list{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.pr-list li{font-size:13.5px;line-height:1.6}
.pr-list li.off{color:var(--faint)}
.pr-fees{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2);font-size:12.5px;color:var(--muted);line-height:1.65}
.pr-status{padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--card);margin-bottom:4px}
.pr-status.off{color:var(--muted);font-size:13.5px}

/* ---- bulk economics infographic (bulk.html / business/bulk.html) */
.bulkwrap{max-width:820px;margin:0 auto;padding:26px 16px 60px}
.bulkwrap h1{font-size:clamp(25px,4.6vw,38px);line-height:1.18;margin:0 0 12px;letter-spacing:-.02em}
.bulkwrap h1 em{font-style:normal;color:var(--link)}
.bulkwrap .lede{font-size:16px;line-height:1.7;color:var(--muted);margin:0 0 24px}
.bignum{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding:18px 20px;margin:0 0 22px;
  border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.bignum b{font-size:clamp(30px,6vw,46px);line-height:1;letter-spacing:-.03em;color:var(--ok,#1a8f4c)}
.bignum span{font-size:13.5px;color:var(--muted);flex:1;min-width:200px;line-height:1.5}
.chartcard{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:16px 12px 8px;margin:0 0 22px}
.chead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;padding:0 8px 6px}
.chead b{font-size:14px}
.chead span{font-size:12px;color:var(--muted)}
.bulkchart{width:100%;height:auto;display:block;--gs-bar:var(--line);--gs-good:var(--link)}
.bulkchart .ax{stroke:var(--line);stroke-width:1}
.bulkchart .bv{font:700 12px system-ui,sans-serif;fill:var(--fg)}
.bulkchart .bl{font:500 11.5px system-ui,sans-serif;fill:var(--muted)}
.bulktbl{width:100%;border-collapse:collapse;font-size:13.5px;margin:0 0 20px}
.bulktbl th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:6px 10px 6px 0;font-weight:700}
.bulktbl td{padding:9px 10px 9px 0;border-top:1px solid var(--line)}
.bulktbl tr.on td{background:var(--surface);font-weight:600}
.bulknote{padding:14px 16px;margin:0 0 16px;border:1px solid var(--line);border-left:3px solid var(--link);
  border-radius:12px;background:var(--surface);font-size:13.5px;line-height:1.65;color:var(--muted)}
.bulknote.warn{border-left-color:var(--warn,#c98a12)}
.bulkcta{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 14px}
.bulkwrap .fine{font-size:11.5px;color:var(--muted);opacity:.85;line-height:1.6;margin:0}
:root[data-theme="dark"] .bulkchart{--gs-bar:#3a3a3a}

.g-ship-sm.free{color:var(--ok,#1a8f4c);font-weight:700}

/* ---- Gacan ka Gacan (hand to hand) */
.h2h-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:22px 0 6px}
.h2h-head h1{font-family:var(--fd);font-size:clamp(26px,4.4vw,36px);margin:0;letter-spacing:-.02em}
.h2h-lede{margin:8px 0 0;max-width:680px;font-size:14.5px;line-height:1.65;color:var(--muted)}
.h2h-noimg{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font:700 34px/1 var(--fb);color:var(--faint);background:var(--surface)}
.h2h-noimg.big{font-size:72px;border-radius:var(--r)}
.h2h-neg{font-size:15px;font-weight:600;color:var(--muted)}
.h2h-price{font-size:clamp(24px,4vw,34px);font-weight:700;letter-spacing:-.02em;margin:10px 0 4px}
.h2h-row{display:flex;gap:10px}
.h2h-row>*{flex:1;min-width:0}
/* The warning is not decoration. Everything else on this site is escrowed and this is not, so it is stated in a
   box people cannot mistake for a footer. */
.h2h-warn{margin:22px 0;padding:14px 16px;border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:12px;background:var(--surface);font-size:13.5px;line-height:1.65;color:var(--muted)}
.h2h-warn b{color:var(--fg)}
.h2h-own{margin:16px 0;padding:12px 14px;border:1px dashed var(--line);border-radius:12px;font-size:13.5px;color:var(--muted)}
.linkbtn{font:inherit;color:var(--link);background:none;border:none;padding:0;text-decoration:underline;cursor:pointer}

/* ---- Garsoore Ganacsi front door */
.bh-hero{display:flex;gap:40px;align-items:flex-start;flex-wrap:wrap;margin:26px 0 22px}
.bh-heroL{flex:1 1 440px;min-width:0}
.bh-kicker{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.bh-hero h1{font-family:var(--fd);font-size:clamp(30px,5vw,46px);line-height:1.13;margin:10px 0 0;letter-spacing:-.02em}
.bh-lede{margin:16px 0 0;max-width:560px;font-size:15.5px;line-height:1.65;color:var(--muted)}
.bh-cta{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.bh-calc{flex:0 0 340px;max-width:100%;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px}
.bh-calcT{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.bh-out{margin:14px 0 6px;padding-top:12px;border-top:1px solid var(--line-2)}
.bh-outRow{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.bh-outRow span{font-size:13px;color:var(--muted)}
.bh-outRow b{font-size:26px;font-weight:700;letter-spacing:-.02em}
.bh-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin:0 0 20px}
.bh-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;color:var(--gold);text-decoration:none}
.bh-card:hover{border-color:var(--pri-line)}
.bh-card b{display:block;margin-top:12px;font-size:15px;color:var(--fg)}
.bh-card span{display:block;margin-top:6px;font-size:13px;line-height:1.6;color:var(--muted)}
.bh-pro{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin:0 0 26px;padding:20px 24px;
  background:var(--gold-soft);border:1px solid var(--pri-line);border-radius:16px}
.bh-pro>div:first-child{flex:1 1 320px}
.bh-pro b{font-size:17px}
.bh-pro div div{font-size:13.5px;line-height:1.6;color:var(--link);margin-top:4px}
.bh-feelH{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.bh-feelH h2{font-family:var(--fd);font-size:clamp(20px,3vw,25px);margin:0}
.bh-feel{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.bh-fc{display:flex;flex-direction:column;gap:8px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:18px;color:var(--gold);text-decoration:none}
.bh-fc.on{border-color:var(--pri-line)}
.bh-fc:hover{border-color:var(--pri-line)}
.bh-fc b{font-size:15.5px;color:var(--fg)}
.bh-fc span{font-size:12.5px;line-height:1.55;color:var(--muted)}
.bh-fc em{margin-top:auto;padding-top:8px;font-style:normal;font-size:12px;font-weight:700;color:var(--link)}
.bh-fc.on em{color:var(--up)}
.bh-ask{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:16px 0 30px;padding:14px 18px;
  border:1px dashed var(--pri-line);border-radius:12px;background:var(--card)}
.bh-ask span{flex:1 1 320px;font-size:13px;line-height:1.55;color:var(--muted)}
.bh-ask b{color:var(--fg)}

/* ================================================================================================
   MOBILE, TOUCH, FOCUS, AND THE STATES BEFORE THE DATA ARRIVES
   ------------------------------------------------------------------------------------------------
   Everything above this line was written desktop-first and then narrowed with max-width queries.
   This block goes the other way: it assumes a mid-range Android phone on metered mobile data and
   fixes what only hurts there. Appended rather than interleaved so it is one reviewable unit and
   the cascade order is predictable.
   ================================================================================================ */

/* ---- 1. Focus. This sheet had exactly one :focus-visible rule (.surfsw a). Every other button,
         link, chip, input and card was keyboard-invisible. The outline uses --link, the readable
         ink on cream, which is redefined for dark and for the business surface — so one rule stays
         legible in all four combinations. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible,
:where(.chip,.g-o,.g-rad,.g-tile,.g-pc,.g-seg span,.lang span,.g-pick button,.g-qty button):focus-visible{
  outline:2px solid var(--link);outline-offset:2px;border-radius:6px}
/* Cards and pills already have a radius; do not square it off with the generic rule above. */
.g-pc:focus-visible,.g-tile:focus-visible{outline-offset:3px;border-radius:18px}
.chip:focus-visible,.lang span:focus-visible,.g-seg span:focus-visible{border-radius:999px}
/* The grey flash Android paints over a tapped element; :active states below replace it. */
*{-webkit-tap-highlight-color:transparent}

/* ---- 2. Touch targets. Scoped to pointer:coarse, so the desktop layout keeps its tighter rhythm
         and the phone gets thumb-sized controls. 44px is the floor; these were 26-32px. Padding
         grows rather than the box being hard-set, so labels still centre and nothing clips. */
/* Gated on EITHER a coarse pointer OR a narrow screen. Relying on pointer:coarse alone is how touch
   sizing silently fails: some Android browsers and most emulators report a fine pointer, and the
   phone-width layout is the one that needs thumb targets regardless of what the pointer claims. */
@media (pointer:coarse),(max-width:600px){
  .btn,.nav a,.chip,.surfsw a,.g-seg span,.lang span,.g-o,.linkbtn,
  .g-qty button,.g-x,.g-pick button,.g-pact .chip{
    min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .g-rad,.facet label{min-height:44px;display:flex;align-items:center}
  .chip,.g-seg span,.lang span{padding-left:14px;padding-right:14px}
  .nav a{padding:11px 14px}
  .surfsw a{padding:11px 16px}
  .g-qty button{width:44px;height:44px}
  .g-heart{width:44px;height:44px;font-size:19px;top:6px;right:6px}
  .g-x{min-width:44px}
  /* measured at 375px: these were the last controls under the floor */
  .fnav a,.foot a,.brand,.close,.g-chk,.g-chk a{min-height:44px;display:inline-flex;align-items:center}
  .close{min-width:44px;justify-content:center;font-size:26px}
  .g-filters select,.g-filters input,.resbar select{min-height:44px;padding-top:0;padding-bottom:0}
  .g-chk input[type=checkbox]{width:20px;height:20px}
  /* Facet checkboxes were 14px — not hittable with a thumb. */
  .facet input,.g-filters input[type=checkbox]{width:20px;height:20px}
  /* iOS zooms the page whenever a focused input is under 16px. Names and phone numbers are typed
     into these on every order, so that zoom was firing constantly. */
  input,select,textarea{font-size:16px}
}

/* ---- 3. Motion. The card lift is a transform plus a 28px shadow on a grid that can hold hundreds
         of cards. On a weak GPU that is jank; for anyone with a vestibular condition it is worse.
         Honour the setting, and drop the lift entirely on touch where there is no hover anyway. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .g-pc:hover{transform:none}
}
@media (hover:none){
  .g-pc{transition:none}
  .g-pc:hover{transform:none;box-shadow:none}
  .g-pc:active,.g-tile:active,.chip:active{background:var(--surface)}
}

/* ---- 4. Loading. Nothing in this sheet described the state before the catalogue renders, so the
         page was blank and then abruptly full — the violent reflow the brief warns about. These
         skeletons are deliberately THE SAME BOX as the real thing: .g-skelcard has the aspect-1
         image well and the two-line title block of .g-pc, so when real cards replace it nothing
         moves. The shimmer is one background animation, no JS, and it stops dead under
         prefers-reduced-motion via the rule above. */
.g-skel{background:var(--surface);border-radius:8px;position:relative;overflow:hidden;color:transparent}
.g-skel::after,.g-skelcard .im::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--card) 70%,transparent),transparent);
  animation:g-shim 1.4s infinite}
@keyframes g-shim{100%{transform:translateX(100%)}}
.g-skelcard{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.g-skelcard .im{aspect-ratio:1;background:var(--surface);position:relative;overflow:hidden}
.g-skelcard .tx{padding:12px 14px 14px;display:grid;gap:7px}
.g-skelcard .tx i{display:block;height:11px;border-radius:6px;background:var(--surface)}
.g-skelcard .tx i:nth-child(1){width:92%}
.g-skelcard .tx i:nth-child(2){width:64%}
.g-skelcard .tx i:nth-child(3){width:40%;height:17px;margin-top:3px}
/* An inline "still working" line for places where a skeleton card is the wrong shape. */
.g-wait{display:flex;align-items:center;gap:10px;padding:16px 0;color:var(--muted);font-size:13.5px}
.g-wait::before{content:"";width:15px;height:15px;border-radius:50%;flex:none;
  border:2px solid var(--line);border-top-color:var(--link);animation:g-spin .7s linear infinite}
@keyframes g-spin{100%{transform:rotate(360deg)}}

/* ---- 5. Unavailable, and empty. All 587 products are battery:"unknown", which by design blocks
         the shipping quote — so "no quote" is the ordinary case here, not an error, and it must
         not be dressed as one. No red, no warning triangle: a quiet neutral panel that states the
         fact. Same treatment for Gacan ka Gacan, which has no image upload yet, so a listing with
         no picture is also the ordinary case rather than a failure. */
.g-na{border:1px solid var(--line);border-radius:14px;background:var(--surface);
  padding:12px 14px;font-size:13.5px;line-height:1.6;color:var(--muted)}
.g-na b{display:block;color:var(--fg);font-weight:600;margin-bottom:2px}
.g-na.inline{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;font-size:12.5px}
.g-na.inline b{display:inline;margin:0}
/* A price slot with no price. Keeps the vertical rhythm of .g-pr so the card does not shrink. */
.g-pr.na{font-size:14px;font-weight:600;color:var(--muted);letter-spacing:0}
.g-empty{display:grid;gap:8px;place-items:center}
.g-empty b{font:600 17px/1.3 var(--fd);color:var(--fg)}

/* ---- 6. The missing-image fallback. It was a grey letter on a grey tile, which reads as a broken
         image rather than a considered placeholder. Photos are missing often enough that this is a
         component, not a patch: tinted ground and the letter in the brand ink. Two gradients, no
         extra bytes. Nothing is added at small sizes — detail that dies when shrunk is exactly the
         mistake the 8x8 favicon made. */
.h2h-noimg{background:linear-gradient(135deg,var(--pri-soft),var(--surface));
  color:var(--link);font:700 34px/1 var(--fb);letter-spacing:-.02em}
.h2h-noimg.big{font-size:64px}
.g-pimg:not(:has(.g-pimgi)){background:linear-gradient(155deg,var(--silver-soft),var(--surface))}

/* ---- 7. No reflow as images land. .g-pimg already reserves a square; the product page did not —
         .g-pic img was max-height:300px inside no box at all, so the hero jumped when the photo
         arrived. content-visibility lets the phone skip laying out cards below the fold, which on
         a long grid is the difference between a scroll that tracks the thumb and one that does
         not; contain-intrinsic-size keeps the scrollbar from lurching while it does. */
.g-pic{aspect-ratio:1;display:grid;place-items:center;max-height:340px}
.g-pic img{width:100%;height:100%;object-fit:contain}
.g-pc{content-visibility:auto;contain-intrinsic-size:auto 300px}
/* Supplier images arrive from a CDN at unknown sizes; never let one push a column wide. */
.g-pimgi,.fb-photos img{max-width:100%}

/* ---- 8. Phone layout. The gutter only dropped to 16px below 480px, so a phone in the 481-600
         band still paid 28px a side. Two product columns is the right density at 375px: one is a
         scroll marathon through 587 items, three is unreadable. */
@media (max-width:600px){
  .wrap{padding-left:16px;padding-right:16px}
  .g-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .g-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .g-tile{padding:12px 4px;font-size:12px;border-radius:14px}
  .g-tile div{width:42px;height:42px;font-size:20px;border-radius:12px}
  .g-pb{padding:10px 11px 12px}
  .g-pn{font-size:13px;min-height:38px}
  .g-pr{font-size:18px}
  .g-local,.g-china,.g-chero{padding:20px;border-radius:18px}
  .g-specs,.g-how,.g-pay,.g-steps,.g-stats{grid-template-columns:1fr 1fr}
  .g-how li,.g-steps li{font-size:12px}
  /* One-handed: the sticky buy bar is the one control that must stay under the thumb, and it has
     to clear the Android gesture bar rather than sit behind it. */
  .g-buybar{bottom:max(10px,env(safe-area-inset-bottom));padding:10px 12px;gap:10px;border-radius:16px}
  .g-buybar .g-buy{flex:1;justify-content:center}
  .g-price{font-size:22px}
  /* Long supplier titles were ellipsing away to nothing in the buy bar on a narrow screen. */
  .g-bt b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .g-cart,.g-split{gap:12px}
}
@media (max-width:380px){
  .g-grid{gap:8px}
  .g-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---- 9. Contrast, measured rather than eyeballed. Every ratio below was computed against the real
         composited ground in the browser; the ones that failed WCAG AA for their text size are
         retuned here, at the end, so the original palette block stays readable as the brand's
         statement of intent and this is the correction on top of it.

           token      was       on --surface #F2E9D8   now       now
           --faint    #B09F8C   2.2 : 1   FAIL         #8A7461   4.6 : 1
           --muted    #7F7060   4.0 : 1   FAIL         #746656   4.6 : 1
           --up       #3E7D52   4.1 : 1   FAIL         #357049   4.9 : 1
           --ok       #1a8f4c   3.4 : 1   FAIL         #17793F   4.5 : 1
           --down     #B0413A   4.8 : 1   pass         unchanged
           --link     #7E5F27   4.9 : 1   pass         unchanged

         --ok and --warn were never declared at all: the sheet used var(--ok,#1a8f4c) in four places,
         so the fallback was always what rendered and neither could be themed. They are real tokens
         now, with dark-mode values. --warn is only ever a border colour, which is held to 3:1 rather
         than 4.5:1, so it keeps its current hue.

         These shift the quiet end of the ramp a step darker. That is the point: the quiet end is
         where eyebrows, facet labels, delivery estimates and .type microcopy live, and they were
         being read on a phone at arm's length in Mogadishu daylight, not on a studio monitor. */
:root{--faint:#8A7461; --muted:#746656; --up:#357049; --ok:#17793F; --warn:#9C6A0B}
:root[data-theme="dark"]{--faint:#9C8D7C; --ok:#63C98C; --warn:#D9A441}
:root[data-surface="business"]{--faint:#78766B}

/* ---- 10. Screen-reader plumbing. There was no visually-hidden utility in this sheet, so
          icon-only controls had nowhere to put a name but aria-label. aria-label stays the primary
          route; this is for the cases where a visible-on-focus label is the better answer. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.vh.focusable:focus{position:static;width:auto;height:auto;margin:0;clip:auto;
  padding:8px 12px;background:var(--card);border:1px solid var(--link);border-radius:8px}

/* ---- 11. Forced colours. Cheap to support and currently broken: the shimmer blocks out content. */
@media (forced-colors:active){
  .g-pc,.g-tile,.chip,.btn{border:1px solid ButtonBorder}
  .g-skel::after,.g-skelcard .im::after{display:none}
}

/* ================================================================================================
   12. THE SOMALI NOUN AND THE SUPPLIER'S WORDS
   ------------------------------------------------------------------------------------------------
   market-fit added four class names and no CSS. Styling them is this sheet's job, so they live here.

   The premise, because it decides the type sizes below: every catalogue title is a Chinese
   supplier's English SEO string -- "Mini Power Bank 20000mAh Large Capacity Digital Display Power
   Bank". A shopper in Mogadishu cannot read it and should not have to. The card now leads with the
   Somali noun for what the object IS and keeps the supplier's cleaned words underneath as
   reference. So the noun is the thing the eye lands on and .g-psub must get out of its way --
   if they look like siblings the grid is a wall of text and the noun has bought nothing.
   ================================================================================================ */

/* ---- .g-psub: the supplier's words under the Somali noun, on every card in the shop.
       Two steps down from the noun -- smaller, lighter, --muted -- and clamped to two lines so one
       absurd 90-character SEO title cannot set the height of every card in its row. */
.g-psub{font-size:11.5px;line-height:1.4;font-weight:400;color:var(--muted);margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* When the noun IS present, .g-pn stops being the long title it was built for: it is now one short
   word, so it drops the two-line reservation and gains the weight and size that make it scannable.
   The sheet already relies on :has() (.g-pimg:has(.g-pimgi)), so this is consistent with the stack. */
.g-pn:has(+ .g-psub){font-size:15.5px;font-weight:600;line-height:1.3;min-height:0;
  -webkit-line-clamp:1;letter-spacing:-.01em;color:var(--fg)}
/* Cards sit in a grid, so the two layouts have to occupy the same height or the rows go ragged.
   c.name is null whenever no Somali label is confident, and on a real page both kinds appear in the
   same row: noun(1 line ~20px) + sub(2 lines ~32px) = 52px, and detail-only keeps its 2-line 42px
   clamp plus the 10px it does not spend on a sub. */
.g-pn:has(+ .g-psub){height:20px}
.g-psub{min-height:32px}
/* ...and the detail-only card has to reserve the SAME block, or its price floats 11px above the
   price of the card beside it and the row looks broken. 20 (noun) + 3 (gap) + 32 (sub) = 55. It
   spends the extra room on a third line of title, which is a long SEO string and can use it. */
.g-pn:not(:has(+ .g-psub)){min-height:55px;-webkit-line-clamp:3}

/* ---- .g-ptitle: the full, uncleaned supplier title on the product page, between h1 and the blurb.
       This is the one page where the exact words matter -- a buyer checking a model number against
       a listing -- so it stays legible rather than being shrunk to nothing. Supporting, not small
       print: --muted at 4.6:1, full text, no clamp. */
.g-ptitle{margin:6px 0 2px;font-size:13.5px;line-height:1.5;color:var(--muted);max-width:52ch}

/* ---- .g-tilen: the stock count on a category tile. It was rendering glued to the label
       ("Taleefanno16"). <small> inside a centred block, so it needs to become its own line and read
       as a quantity rather than part of the name. A pill in the surface tone does both: separated,
       clearly secondary, and it survives the tile shrinking to 2-up at 380px. */
.g-tilen{display:block;width:fit-content;margin:5px auto 0;padding:1px 8px;border-radius:999px;
  background:var(--surface);color:var(--muted);font-size:11px;font-weight:600;
  font-variant-numeric:tabular-nums;line-height:1.6}
.g-tile.on .g-tilen{background:var(--pri-soft);color:var(--link)}

/* ---- .g-bulkband: the consolidation offer on the consumer home page, sitting directly above
       .g-bizband. These two must not read as a pair, and the difference is not decorative:
       .g-bizband is a DOOR to another site (business.garsoore.com), so it is a solid --pri slab that
       behaves like a destination. .g-bulkband is an OFFER on the page you are already on, so it is
       the opposite construction -- no fill, card ground, and a gold rule down the leading edge, the
       same device .h2h-warn and .bulknote use for "read this, you are still here". Same content
       shape, deliberately opposite weight. */
.g-bulkband{display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  margin:34px 0 12px;padding:20px 24px;
  background:var(--card);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:16px}
.g-bulkband>div{flex:1 1 320px;min-width:0}
.g-bulkband h3{font:700 19px/1.25 var(--fd);color:var(--fg);letter-spacing:-.01em}
.g-bulkband p{margin-top:6px;font-size:13.5px;line-height:1.6;color:var(--muted);max-width:62ch}
.g-bulkband .btn{flex:none}
/* .g-bizband immediately after it would otherwise double the top margin into a 78px gulf. */
.g-bulkband + .g-bizband{margin-top:16px}

@media (max-width:600px){
  .g-bulkband{flex-direction:column;align-items:stretch;gap:14px;padding:16px 18px;margin:24px 0 12px}
  /* flex-basis is the MAIN axis: once this stacks, the 320px basis above becomes a 320px HEIGHT and
     opens a dead white gap between the paragraph and the button. */
  .g-bulkband>div{flex:0 1 auto}
  .g-bulkband h3{font-size:17px}
  .g-bulkband .btn{width:100%;justify-content:center}
  /* Two cards across at 375px leaves ~168px of column, so the noun gets one line and the supplier
     detail two before either would start eating the price. */
  .g-pn:has(+ .g-psub){font-size:14.5px;height:19px}
  .g-psub{font-size:11px;min-height:30px}
  .g-pn:not(:has(+ .g-psub)){min-height:52px}
  .g-tilen{font-size:10.5px;padding:1px 7px}
}

/* ── Polish pass (2026-10): the phone header was three loose rows (177px of an 812px screen) and the category
   tiles one fat card per row. Phones now get: row 1 = logo + actions, row 2 = the full-width surface switch,
   row 3 = section tabs. Rows 2–3 tuck away while scrolling down and return on the way up (app.js adds .tuck). */
@media (max-width:560px){
  header.site{transition:transform .22s ease}
  .bar{padding-top:8px;padding-bottom:6px;gap:6px}
  .brand{order:1;margin-right:auto}
  .cartbtn,#whoBtn,.bellbtn,.langbtn{min-height:34px;padding:5px 10px;font-size:13px;border-radius:12px}
  .cartbtn{order:2}.bellbtn{order:3}#whoBtn{order:4}.langbtn{order:5}
  .surfsw{order:8;flex:0 0 100%;margin-left:0;display:grid;grid-template-columns:repeat(3,1fr)}
  .surfsw a{text-align:center;padding:5px 4px;font-size:12.5px}
  .nav{order:9;gap:4px;margin-top:2px}
  .nav a{padding:4px 10px;font-size:14px;white-space:nowrap}
  header.site.tuck{transform:translateY(calc(-100% + 52px))}
  .surfbar{height:3px}
  /* categories: one swipeable row of compact chips instead of a wall of cards */
  .g-tiles{display:flex;overflow-x:auto;gap:8px;scroll-snap-type:x proximity;scrollbar-width:none;padding-bottom:4px;margin-right:-16px;padding-right:16px}
  .g-tiles::-webkit-scrollbar{display:none}
  .g-tile{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:8px 12px 8px 8px;border-radius:999px;scroll-snap-align:start;white-space:nowrap}
  .g-tile div{width:30px;height:30px;margin:0;border-radius:999px;font-size:13px;font-weight:700}
  .g-tile .g-tilen{margin-left:2px}
}
/* monogram tiles read as type, not as a missing picture */
.g-tile div,.g-th{font-family:inherit;font-weight:700;color:var(--link);letter-spacing:.02em}

/* ── Product page, phones: the buy bar had grown to 187px (a 102px-wide title column wrapping beside everything else)
   and the title was a 32px serif printed twice. Now: a two-row bar — name and price, then quantity and the two
   buttons — and a tighter hero. */
@media (max-width:600px){
  .g-buybar{display:grid;grid-template-columns:auto 1fr 1.4fr;grid-template-areas:"bt bt price" "qty add buy";gap:8px 8px;padding:10px 12px}
  .g-buybar .g-bi{display:none}
  .g-buybar .g-bt{grid-area:bt;min-width:0}
  .g-buybar .g-bt b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13.5px;-webkit-line-clamp:unset}
  .g-buybar .g-bt .g-eta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11.5px}
  .g-buybar .g-price{grid-area:price;align-self:center;text-align:right;font-size:20px}
  .g-buybar .g-qty{grid-area:qty}
  .g-buybar .g-add{grid-area:add;padding-left:8px;padding-right:8px}
  .g-buybar .g-buy{grid-area:buy}
  .g-phero{gap:14px}
  .g-pic{max-height:260px;aspect-ratio:auto;height:260px}
  .g-pic img{object-fit:contain;max-height:100%}
  .g-phero h1{font-size:22px;line-height:1.2;margin:6px 0 4px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .g-ptitle{font-size:12.5px;color:var(--muted)}
  .g-specs{gap:8px}
  .g-specs>*{padding:10px 12px}
}

/* ── Landing: products have to show up early. The two hero cards were 724px tall on a phone, so nothing for sale
   appeared until 1,246px down. The search card is now tight, and the China card becomes a slim paste strip. */
.g-local{padding:30px 32px}
.g-local h1{font-size:clamp(32px,3.6vw,46px);margin:12px 0 8px}
.g-china{padding:30px 32px}
.g-china h2{font-size:28px}
@media (max-width:600px){
  .g-split{margin-top:14px;gap:10px;grid-template-columns:minmax(0,1fr)}
  .g-local,.g-china{min-width:0}
  .g-local{padding:18px 16px 16px}
  .g-local .g-pill{display:none}
  .g-local h1{font-size:28px;margin:0 0 4px}
  .g-local p{font-size:13.5px;line-height:1.45}
  .g-search{margin:12px 0 10px}
  .g-quick{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-16px;padding-right:16px}
  .g-quick::-webkit-scrollbar{display:none}
  .g-quick .chip{flex:0 0 auto}
  .g-china{padding:14px 16px}
  .g-china::after{display:none}
  .g-china .g-tagw,.g-china p,.g-china .g-src{display:none}
  .g-china h2{font-size:17px;margin:0 0 8px}
  .g-china .g-paste{margin:0}
  .g-search,.g-paste{display:flex;min-width:0}
  .g-search input,.g-paste input{flex:1 1 auto;min-width:0;width:auto}
  .g-search .btn,.g-paste .btn{flex:none}
  .g-china h2{font-size:16px;line-height:1.25}
  .g-phero .g-pic{height:240px}
}

/* ── Landing overhaul (2026-10) ─────────────────────────────────────────────────────────────────────────────
   .lh        warm hero band: copy + search on the left, a collage of four real catalogue photos on the right
   .lh-trust  three promises, each one something checkout already enforces
   .lh-china  the paste-a-link door, as a slim band between categories and the feed */
.lh{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:36px;align-items:center;margin-top:22px;
  padding:44px 44px 40px;border-radius:28px;background:linear-gradient(135deg,var(--card) 0%,var(--gold-soft,#f3e7c9) 100%);
  border:1px solid var(--line);position:relative;overflow:hidden}
.lh h1{font-size:clamp(34px,4.2vw,58px);line-height:1.02;letter-spacing:-.015em;margin:0 0 14px}
.lh-copy p{color:var(--muted);font-size:16.5px;line-height:1.55;max-width:44ch;margin:0}
.lh-search{margin:22px 0 12px;background:var(--card);border-color:var(--pri-line,var(--line));box-shadow:0 10px 30px -18px rgba(58,46,38,.45)}
.lh-search input{font-size:16px}
.lh-search .btn{padding-left:22px;padding-right:22px}
.lh-mini{margin:18px 0 0}
.lh-art{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:12px;aspect-ratio:1/1;max-height:420px;justify-self:end;width:100%}
.lh-pic{position:relative;display:block;border-radius:20px;background:#fff;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 18px 36px -24px rgba(58,46,38,.55);transition:transform .25s ease}
.lh-pic img{width:100%;height:100%;object-fit:contain;padding:14px;box-sizing:border-box}
.lh-pic span{position:absolute;left:10px;bottom:10px;background:var(--fg);color:var(--bg);font-weight:700;font-size:12.5px;padding:3px 9px;border-radius:999px}
.lh-pic.p0{transform:rotate(-2deg)}.lh-pic.p3{transform:rotate(2deg)}
.lh-pic:hover{transform:translateY(-3px) rotate(0)}
.lh-trust{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0 0;padding:0}
.lh-trust li{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px 18px;display:flex;flex-direction:column;gap:3px}
.lh-trust b{font-size:15px}
.lh-trust b::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--gold);margin-right:8px;transform:skewX(-10deg);vertical-align:1px}
.lh-trust span{color:var(--muted);font-size:13px;line-height:1.45}
.lh-china{display:flex;align-items:center;gap:28px;margin-top:30px;padding:24px 28px;border-radius:22px;background:var(--pri);color:var(--pri-ink)}
.lh-china>div{flex:1 1 auto;min-width:0}
.lh-china h2{font-size:24px;line-height:1.15;margin:8px 0 4px}
.lh-china p{opacity:.85;margin:0;font-size:14px}
.lh-china .g-paste{flex:0 1 440px;margin:0;min-width:0}
@media (max-width:900px){
  .lh{grid-template-columns:minmax(0,1fr);padding:30px 26px;gap:22px}
  .lh-art{grid-template-columns:repeat(4,1fr);grid-template-rows:none;aspect-ratio:auto;max-height:none;justify-self:stretch}
  .lh-pic{aspect-ratio:1/1}
  .lh-china{flex-direction:column;align-items:stretch;gap:14px}
  .lh-china .g-paste{flex:none}
}
@media (max-width:600px){
  .lh{margin-top:12px;padding:22px 16px 16px;border-radius:22px;gap:16px}
  .lh h1{font-size:30px;margin-bottom:8px}
  .lh-copy p{font-size:14px}
  .lh-search{margin:14px 0 10px}
  .lh-art{gap:8px}
  .lh-pic{border-radius:14px}
  .lh-pic img{padding:6px}
  .lh-pic span{left:5px;bottom:5px;font-size:10.5px;padding:2px 6px}
  .lh-pic.p0,.lh-pic.p3{transform:none}
  .lh-trust{grid-template-columns:minmax(0,1fr);gap:0;background:var(--card);border:1px solid var(--line);border-radius:18px;margin-top:10px}
  .lh-trust li{border:0;border-radius:0;padding:11px 14px;background:none}
  .lh-trust li+li{border-top:1px solid var(--line-2,var(--line))}
  .lh-trust span{font-size:12.5px}
  .lh-china{margin-top:22px;padding:18px 16px;border-radius:18px}
  .lh-china h2{font-size:19px}
  .lh-china p{font-size:13px}
}
@media (prefers-reduced-motion:reduce){ .lh-pic{transition:none} }
@media (max-width:600px){
  /* phones: the three promises as one swipeable line of labels — the detail lives on the checkout page */
  .lh-trust{display:flex;overflow-x:auto;scrollbar-width:none;background:none;border:0;border-radius:0;gap:6px;margin-right:-16px;padding-right:16px}
  .lh-trust::-webkit-scrollbar{display:none}
  .lh-trust li{flex:0 0 auto;padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--card)}
  .lh-trust li+li{border-top:1px solid var(--line)}
  .lh-trust b{font-size:13px;white-space:nowrap}
  .lh-trust span{display:none}
}