/* Layout: sticky top bar, single content column (max 1240px), card grids that collapse to 1–2 columns on phones */
:root{
  --bg:#f4f5f8; --surface:#ffffff; --surface-2:#eef0f4; --ink:#17202f; --muted:#5c6677; --line:#dfe3ea;
  --accent:#7a2e5c; --accent-ink:#ffffff; --accent-soft:#f3e6ee;
  --g-uz:#2f7d4f; --g-ru:#b8323b; --g-xk:#b7791f; --g-kb:#7b4a2e; --g-uy:#5b6b1f;
  --ok:#2f7d4f; --warn:#a86a00;
  --f-display:"Unbounded","Golos Text",system-ui,sans-serif;
  --f-body:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --r:12px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#111319; --surface:#1a1d25; --surface-2:#232733; --ink:#e8ebf1; --muted:#9aa3b3; --line:#2c313d;
  --accent:#e58cbc; --accent-ink:#1a1d25; --accent-soft:#3a2432;
  --g-uz:#5cc488; --g-ru:#f0727a; --g-xk:#e7b04f; --g-kb:#d39a72; --g-uy:#b4c75a; --ok:#5cc488; --warn:#e7b04f;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#111319; --surface:#1a1d25; --surface-2:#232733; --ink:#e8ebf1; --muted:#9aa3b3; --line:#2c313d;
  --accent:#e58cbc; --accent-ink:#1a1d25; --accent-soft:#3a2432;
  --g-uz:#5cc488; --g-ru:#f0727a; --g-xk:#e7b04f; --g-kb:#d39a72; --g-uy:#b4c75a; --ok:#5cc488; --warn:#e7b04f;
  color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.5 var(--f-body);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wrap{max-width:1240px;margin:0 auto;padding-inline:16px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* top bar */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top-in{max-width:1240px;margin:0 auto;padding:10px 16px;display:flex;gap:12px 20px;align-items:center;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink)}
.logo:hover{text-decoration:none}
.logo-mark{width:34px;height:34px;border-radius:9px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font:700 16px var(--f-display)}
.logo-txt{font:500 15px var(--f-display);letter-spacing:-.01em}
.logo-txt b{font-weight:700}
.nav{display:flex;gap:4px;flex-wrap:wrap}
.nav a{padding:7px 12px;border-radius:999px;color:var(--muted);font-weight:500}
.nav a:hover{background:var(--surface-2);text-decoration:none;color:var(--ink)}
.nav a.on{background:var(--ink);color:var(--surface)}
.gsearch{flex:1 1 260px;min-width:0}
.gsearch input{width:100%}
input[type=search],input[type=number],select{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:9px 12px}
input[type=search]:focus,select:focus,input[type=number]:focus{border-color:var(--accent);outline:none}

main{padding-block:22px 40px;min-height:60vh}
h1,h2,h3{text-wrap:balance;margin:0}
h1{font:700 clamp(22px,3.2vw,32px)/1.15 var(--f-display);letter-spacing:-.02em}
h2{font:600 20px/1.3 var(--f-body)}
.lead{color:var(--muted);max-width:68ch;margin:8px 0 0}
.eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.stack{display:flex;flex-direction:column;gap:18px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.muted{color:var(--muted)}
.small{font-size:13px}

/* group pills */
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none}
.g-uz{--gc:var(--g-uz)}.g-ru{--gc:var(--g-ru)}.g-xk{--gc:var(--g-xk)}.g-kb{--gc:var(--g-kb)}.g-uy{--gc:var(--g-uy)}
[class*="g-"] .dot,.dot[class*="g-"]{background:var(--gc)}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{font:inherit;font-weight:500;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:7px 12px;border-radius:999px;cursor:pointer;display:inline-flex;gap:7px;align-items:center}
.seg button .n{color:var(--muted);font-variant-numeric:tabular-nums;font-size:13px}
.seg button.on{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.seg button.on .n{color:inherit;opacity:.7}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.filters > *{min-width:0}
.filters input[type=search]{flex:1 1 220px}
.chk{display:inline-flex;gap:8px;align-items:center;cursor:pointer;color:var(--muted)}
.count{color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums}

/* home */
.hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px;align-items:end;padding-block:8px 6px}
@media (max-width:820px){.hero{grid-template-columns:1fr}}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:flex;flex-direction:column;gap:2px;color:var(--ink)}
a.tile:hover{text-decoration:none;border-color:var(--accent)}
.tile .v{font:700 26px/1.1 var(--f-display);font-variant-numeric:tabular-nums}
.tile .l{color:var(--muted);font-size:13px;display:flex;gap:7px;align-items:center}
.howto{background:var(--accent-soft);border-radius:var(--r);padding:14px 16px;font-size:14px}
.howto b{color:var(--accent)}

/* factory cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.fcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;color:var(--ink);transition:border-color .15s, transform .15s}
.fcard:hover{text-decoration:none;border-color:var(--accent);transform:translateY(-1px)}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);aspect-ratio:4/1.15}
.thumbs .ph,.thumbs img{width:100%;height:100%;object-fit:contain;background:#fff;display:block}
.thumbs.empty{display:flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--muted);font:700 22px var(--f-display);letter-spacing:.02em}
.fbody{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.fname{font-weight:700;font-size:16px;line-height:1.25}
.fmeta{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:13px;flex-wrap:wrap}
.fcats{color:var(--muted);font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 8px;border-radius:999px;background:var(--surface-2);color:var(--ink);white-space:nowrap}
.badge.acc{background:var(--accent-soft);color:var(--accent)}
.fcard .foot-row{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:8px;padding-top:4px}

/* factory page */
.back{display:inline-flex;gap:6px;align-items:center;color:var(--muted);font-weight:500}
.fhead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:18px}
@media (max-width:900px){.fhead{grid-template-columns:1fr}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.kv{display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px 12px;font-size:14px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;overflow-wrap:anywhere}
.copy{font:inherit;font-size:12px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);border-radius:6px;padding:1px 7px;margin-left:6px;cursor:pointer}
.notes{font-size:14px;color:var(--ink);white-space:pre-line;overflow-wrap:anywhere}
.disc{display:flex;gap:8px;align-items:center;font-size:14px}
.disc input{width:80px}

/* product cards */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
@media (max-width:460px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;cursor:pointer;text-align:left;font:inherit;color:inherit;padding:0}
.pcard:hover{border-color:var(--accent)}
.pimg{aspect-ratio:1/1;background:#fff;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line);position:relative}
.pimg img{width:100%;height:100%;object-fit:contain;padding:8px}
.ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:var(--surface-2);color:var(--muted);font:700 20px var(--f-display);text-align:center;padding:8px}
.pimg .tag{position:absolute;left:8px;top:8px;font-size:11px;font-weight:600;padding:2px 7px;border-radius:999px;background:var(--surface);color:var(--muted);border:1px solid var(--line)}
.pbody{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.pname{font-weight:600;font-size:14px;line-height:1.3;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pmeta{color:var(--muted);font-size:12.5px;overflow-wrap:anywhere}
.price{margin-top:auto;padding-top:6px;display:flex;justify-content:space-between;gap:6px;align-items:baseline;font-variant-numeric:tabular-nums;flex-wrap:wrap}
.price .p{font-weight:700;font-size:15px}
.price .b{font-size:12.5px;color:var(--ok);font-weight:600}
.price .np{font-size:12.5px;color:var(--warn);font-weight:600}
.more{display:flex;justify-content:center;padding-top:16px}
.btn{font:inherit;font-weight:600;border:1px solid var(--ink);background:var(--ink);color:var(--surface);border-radius:10px;padding:9px 16px;cursor:pointer}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.empty-state{padding:40px 16px;text-align:center;color:var(--muted);background:var(--surface);border:1px dashed var(--line);border-radius:var(--r)}

/* modal */
.modal{position:fixed;inset:0;background:rgba(10,12,18,.55);z-index:50;display:flex;align-items:center;justify-content:center;padding:16px}
.modal-box{background:var(--surface);color:var(--ink);border-radius:16px;max-width:760px;width:100%;max-height:calc(100vh - 32px);overflow:auto;position:relative;padding:18px}
.modal-x{position:absolute;right:10px;top:8px;font-size:26px;border:0;background:none;color:var(--muted);cursor:pointer;line-height:1}
.mgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
@media (max-width:640px){.mgrid{grid-template-columns:1fr}}
.mimg{background:#fff;border-radius:12px;border:1px solid var(--line);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.mimg img{width:100%;height:100%;object-fit:contain;padding:12px}
table.t{border-collapse:collapse;width:100%;font-size:14px}
table.t td{padding:6px 0;border-bottom:1px solid var(--line);vertical-align:top}
table.t td:first-child{color:var(--muted);width:42%;padding-right:10px}
.tbl-wrap{overflow-x:auto}
.foot{color:var(--muted);font-size:12.5px;padding-block:20px 30px;border-top:1px solid var(--line)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

@media (max-width:640px){
  .top{position:static}
  .top-in{gap:8px}
  .nav{flex-wrap:nowrap;overflow-x:auto;width:100%;scrollbar-width:none}
  .nav a{white-space:nowrap;padding:6px 10px}
  .kv{grid-template-columns:96px minmax(0,1fr)}
}
/* public additions */
.lang{display:flex;gap:2px;border:1px solid var(--line);border-radius:999px;padding:2px;background:var(--surface)}
.lang button{font:inherit;font-size:12.5px;font-weight:600;border:0;background:none;color:var(--muted);padding:5px 9px;border-radius:999px;cursor:pointer}
.lang button.on{background:var(--accent);color:var(--accent-ink)}
.secs{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.sec{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:8px;color:var(--ink);min-height:122px}
a.sec:hover{text-decoration:none;border-color:var(--accent)}
.sec .v{font:700 28px/1 var(--f-display);font-variant-numeric:tabular-nums}
.sec .t{font-weight:600}
.sec .s{color:var(--muted);font-size:12.5px;margin-top:auto}
.sec.soon{background:transparent;border-style:dashed;color:var(--muted)}
.sec.soon .v{font-size:13px;font-family:var(--f-body);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.regs{display:flex;flex-wrap:wrap;gap:8px}
.regs a{display:inline-flex;gap:8px;align-items:center;padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:14px}
.regs a:hover{text-decoration:none;border-color:var(--accent)}
.regs a .n{color:var(--muted);font-variant-numeric:tabular-nums}
.regs a.hl{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:600}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips button{font:inherit;font-size:13px;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:5px 10px;border-radius:999px;cursor:pointer}
.chips button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.chips button .n{opacity:.6;margin-left:4px;font-variant-numeric:tabular-nums}
.sec-dot{--gc:var(--accent)}
.s-qandolat{--gc:#a8326b}.s-gosht{--gc:#b23a2e}.s-sut{--gc:#3a7bd5}.s-ichimlik{--gc:#1f9a9a}.s-bakaleya{--gc:#b7791f}.s-konserva{--gc:#5b8a2a}
[class*="s-"] .dot{background:var(--gc)}
.thumbs.empty{aspect-ratio:auto;height:64px;font-size:18px}
@media (max-width:640px){.logo{order:0}.lang{order:1;margin-left:auto}.nav{order:2}.gsearch{order:3}}