/* Layout: a wholesale line sheet. One dense product list under a sticky header, built like a spec plate on a safe door. */
:root{
  --bg:#EDF0F1;--panel:#FFFFFF;--ink:#172227;--muted:#55636A;--line:#CBD3D6;--band:#1F2E35;--band-ink:#F1F4F4;--band-muted:#AEBDC3;
  --brass:#8A5D0B;--brass-ink:#FFFFFF;--brass-soft:#F4E9D2;--ok:#1C6B47;--ok-soft:#DDF0E6;--warn:#8A5206;--warn-soft:#FBEBCD;--bad:#9B2C2C;--bad-soft:#F8E1E0;
  --display:'Barlow Condensed','Arial Narrow',Arial,sans-serif;--body:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;--mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#12191D;--panel:#1A2429;--ink:#E8EDEE;--muted:#9EADB3;--line:#33424A;--band:#0C1215;--band-ink:#F1F4F4;--band-muted:#9EADB3;
  --brass:#E0B04E;--brass-ink:#1B1403;--brass-soft:#3A2F16;--ok:#74D3A3;--ok-soft:#173A2B;--warn:#EDBB63;--warn-soft:#3F3013;--bad:#F19C99;--bad-soft:#442222;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#12191D;--panel:#1A2429;--ink:#E8EDEE;--muted:#9EADB3;--line:#33424A;--band:#0C1215;--band-ink:#F1F4F4;--band-muted:#9EADB3;
  --brass:#E0B04E;--brass-ink:#1B1403;--brass-soft:#3A2F16;--ok:#74D3A3;--ok-soft:#173A2B;--warn:#EDBB63;--warn-soft:#3F3013;--bad:#F19C99;--bad-soft:#442222;color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:400 15px/1.45 var(--body);min-height:100vh}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--band)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.notice{background:var(--brass-soft);color:var(--ink);font-size:13px}
.notice .wrap{padding-block:6px}
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--band);color:var(--band-ink)}
.top .wrap{display:flex;align-items:center;gap:12px 20px;padding-block:10px;flex-wrap:wrap}
.brand{background:none;border:0;padding:0;color:inherit;text-align:left;font:700 22px/1 var(--display);letter-spacing:.03em;text-transform:uppercase}
.brand small{display:block;font:500 12px/1.3 var(--body);letter-spacing:.02em;text-transform:none;color:var(--band-muted)}
.search{flex:1 1 220px;min-width:0}
.search input{width:100%;padding:9px 12px;border-radius:3px;border:1px solid transparent;background:#fff;color:#172227}
.search input::placeholder{color:#5B686E}
.nav{display:flex;gap:8px;align-items:center;margin-left:auto}
.nav button{background:none;border:1px solid var(--band-muted);border-radius:3px;color:var(--band-ink);padding:8px 12px;font-weight:600;font-size:14px}
.nav button.cartbtn{background:#E0B04E;border-color:#E0B04E;color:#1B1403}
main{padding-block:20px 56px}
h1,h2{font-family:var(--display);font-weight:700;line-height:1.1;letter-spacing:.01em;text-wrap:balance;margin:0}
h1{font-size:34px}h2{font-size:23px}
.sub{color:var(--muted);margin:4px 0 0;max-width:68ch}
.filters{display:grid;gap:12px;margin-block:16px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);background:var(--panel);border-radius:3px;padding:6px 10px;font-size:14px;font-weight:500}
.chip span{color:var(--muted);font-family:var(--mono);font-size:12px;margin-left:4px}
.chip[aria-pressed="true"]{background:var(--band);border-color:var(--band);color:var(--band-ink)}
.chip[aria-pressed="true"] span{color:var(--band-muted)}
:root[data-theme="dark"] .chip[aria-pressed="true"]{background:var(--brass);border-color:var(--brass);color:var(--brass-ink)}
:root[data-theme="dark"] .chip[aria-pressed="true"] span{color:var(--brass-ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .chip[aria-pressed="true"]{background:var(--brass);border-color:var(--brass);color:var(--brass-ink)}:root:not([data-theme="light"]) .chip[aria-pressed="true"] span{color:var(--brass-ink)}}
.controls{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;font-size:14px}
.controls label{display:flex;gap:6px;align-items:center}
select,input[type=text],input[type=tel],textarea{background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:8px 10px;max-width:100%}
.count{color:var(--muted);margin-left:auto}
.sheet{background:var(--panel);border:1px solid var(--line);border-radius:3px}
.row{display:grid;grid-template-columns:minmax(0,1fr) 112px 84px 84px 96px 150px;gap:12px;align-items:center;padding:10px 14px;border-top:1px solid var(--line)}
.row.head{border-top:0;font:600 12px/1.2 var(--body);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding-block:9px}
.num{text-align:right;font-variant-numeric:tabular-nums}
.pname{font-weight:600;overflow-wrap:anywhere}
.pmeta{font:400 12px/1.4 var(--mono);color:var(--muted);overflow-wrap:anywhere}
.lab{display:none}
.land{font-weight:700}
.pill{display:inline-block;font-size:12px;font-weight:600;padding:2px 7px;border-radius:2px;white-space:nowrap}
.pill.ok{background:var(--ok-soft);color:var(--ok)}.pill.low{background:var(--warn-soft);color:var(--warn)}.pill.out{background:var(--bad-soft);color:var(--bad)}
.buy{display:flex;gap:6px;justify-content:flex-end}
.buy input{width:54px;text-align:center;padding:7px 2px;background:var(--panel);border:1px solid var(--line);border-radius:3px}
.btn{background:var(--brass);color:var(--brass-ink);border:1px solid var(--brass);border-radius:3px;padding:8px 14px;font-weight:600}
.btn:disabled{background:none;border-color:var(--line);color:var(--muted);cursor:not-allowed}
.btn.ghost{background:none;color:var(--ink);border-color:var(--line)}
.btn.big{padding:12px 20px;font-size:16px}
.link{background:none;border:0;padding:0;color:var(--brass);font-weight:600;text-decoration:underline}
.empty{padding:32px 14px;text-align:center;color:var(--muted)}
.signin{max-width:440px;margin:48px auto;background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:28px;display:grid;gap:14px}
.plate{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;background:var(--bg);border-radius:2px;font-size:14px}
.two{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start;margin-top:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:16px;display:grid;gap:12px}
.cline{display:grid;grid-template-columns:minmax(0,1fr) 62px 96px 28px;gap:10px;align-items:center;padding-block:10px;border-top:1px solid var(--line)}
.cline:first-child{border-top:0}
.cline input{width:100%;text-align:center;padding:6px 2px;background:var(--panel);border:1px solid var(--line);border-radius:3px}
.x{background:none;border:0;color:var(--muted);font-size:18px;line-height:1;padding:4px}
.opt{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:3px;padding:10px;cursor:pointer}
.opt:has(input:checked){border-color:var(--brass);background:var(--brass-soft)}
.opt small{display:block;color:var(--muted)}
.fields{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.f{display:grid;gap:3px;font-size:13px;font-weight:600;grid-column:span 6;min-width:0}
.f.s2{grid-column:span 2}.f.s3{grid-column:span 3}
.f input,.f select,.f textarea{width:100%;font-weight:400;font-size:15px}
.err{color:var(--bad);font-size:13px;font-weight:500;min-height:0}
.total{display:flex;justify-content:space-between;gap:12px;font-variant-numeric:tabular-nums}
.total.grand{font:700 24px/1.2 var(--display);border-top:1px solid var(--line);padding-top:10px}
.fine{color:var(--muted);font-size:13px;margin:0}
pre.mail{background:var(--bg);border-radius:2px;padding:12px;font:400 12.5px/1.5 var(--mono);overflow-x:auto;margin:0;white-space:pre}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));background:var(--band);color:var(--band-ink);padding:9px 14px;border-radius:3px;font-size:14px;z-index:9;max-width:calc(100vw - 32px)}
@media (max-width:900px){
  .two{grid-template-columns:minmax(0,1fr)}
  .row.head{display:none}
  .row{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 12px}
  .row .info{grid-column:1/-1}
  .row .avail{grid-column:1/-1}
  .row .buy{grid-column:1/-1}
  .lab{display:block;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
  .row .num{text-align:left}
  .row .buy .btn{flex:1}
  .count{margin-left:0;width:100%}
}
@media (max-width:480px){.cline{grid-template-columns:minmax(0,1fr) 54px 28px}.cline .ext{grid-column:1/2;grid-row:2;text-align:left}.f.s3,.f.s2{grid-column:span 6}h1{font-size:30px}}
@media (prefers-reduced-motion:no-preference){.toast{animation:rise .16s ease-out}@keyframes rise{from{transform:translate(-50%,6px)}}}

.adminbar{display:flex;gap:6px;flex-wrap:wrap;margin-block:12px}
.msg{font-size:14px}.msg.good{color:var(--ok)}.msg.bad{color:var(--bad)}
.tbl{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px}th,td{text-align:left;padding:8px 10px;border-top:1px solid var(--line);vertical-align:top}th{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);border-top:0}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums}
input[type=email],input[type=password]{background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:8px 10px;width:100%}
.signin form{display:grid;gap:12px}
.gap{display:grid;gap:12px}
.mt{margin-top:16px}
.spaced{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.nogap{gap:0}
.f.s1{grid-column:span 1}
@media (max-width:480px){.f.s1{grid-column:span 6}}