:root{
  --graphite:#1C2229; --calque:#F4F3EF; --white:#fff;
  --amber:#E8920A; --green:#1F9D6B; --red:#E5533D;
  --steel:#5A6573; --line:#E4E2DA;
  --display:'Space Grotesk',sans-serif;
  --body:'Inter',sans-serif;
  --mono:'IBM Plex Mono',monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--body);background:var(--calque);color:var(--graphite);-webkit-font-smoothing:antialiased}
a{color:#9a5d00;text-decoration:none}
a:hover{color:var(--amber)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

.env-ribbon{background:var(--red);color:#fff;font-family:var(--mono);font-size:11px;
  letter-spacing:.16em;text-align:center;padding:3px}

.topbar{background:var(--graphite);display:flex;align-items:center;justify-content:space-between;
  padding:0 22px;height:58px}
.brand{font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:.06em;color:#fff}
.brand-dot{color:var(--amber)}
.topnav a{color:rgba(255,255,255,.7);margin-left:18px;font-size:14px}
.topnav a:hover{color:#fff}

.page{max-width:1100px;margin:0 auto;padding:22px 16px 40px}

.hero h1{font-family:var(--display);font-size:26px;margin:0 0 6px}
.hero .meta{color:var(--steel);font-size:13px}
.counters{display:flex;gap:22px;margin:16px 0}
.counters b{font-family:var(--display);font-size:24px}

.chips{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.chip{cursor:pointer;font-size:12.5px;font-weight:600;padding:7px 14px;border-radius:999px;
  border:1px solid var(--line);background:var(--white);color:var(--steel)}
.chip.active{background:var(--graphite);color:#fff;border-color:var(--graphite)}

.search{width:100%;max-width:340px;padding:9px 12px;border:1px solid var(--line);
  border-radius:7px;font-size:14px;background:var(--white)}

.badge{display:inline-flex;align-items:center;font-size:11px;font-weight:700;
  padding:3px 9px;border-radius:4px;white-space:nowrap;border:1px solid}
.badge.in{background:rgba(31,157,107,.1);color:#157a52;border-color:rgba(31,157,107,.3)}
.badge.low{background:rgba(232,146,10,.12);color:#9a5d00;border-color:rgba(232,146,10,.35)}
.badge.order{background:rgba(90,101,115,.1);color:var(--steel);border-color:rgba(90,101,115,.3)}
.badge.steel{background:rgba(90,101,115,.1);color:var(--steel);border-color:rgba(90,101,115,.3)}
.badge.awaiting{background:rgba(90,101,115,.1);color:var(--steel);border-color:rgba(90,101,115,.3)}

.table{width:100%;border-collapse:collapse;background:var(--white);
  border:1px solid var(--line);border-radius:8px;overflow:hidden}
.table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--steel);padding:10px 14px;border-bottom:1px solid var(--line);font-weight:600}
.table td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.table tr:last-child td{border-bottom:none}
.sku-name{font-weight:600}
.sku-spec{font-family:var(--mono);font-size:11.5px;color:var(--steel);margin-top:3px}
.price{font-family:var(--mono);font-weight:600;font-size:15px;white-space:nowrap}
.price-unit{font-size:11px;color:var(--steel)}

.btn{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 16px;
  border-radius:7px;font-family:var(--display);font-weight:600;font-size:13.5px;
  border:1px solid transparent;cursor:pointer}
.btn-primary{background:var(--amber);color:#1a1204;border-color:#c87d08}
.btn-ghost{background:var(--white);color:var(--graphite);border-color:var(--line)}

.cards{display:none}
/* Карточка целиком — ссылка, но текст внутри не должен краснеть цветом ссылки:
   на десктопе те же названия лежат в ячейках таблицы и выглядят тёмными. */
.card{background:var(--white);border:1px solid var(--line);border-radius:8px;
  padding:13px 14px;margin-bottom:9px;display:flex;justify-content:space-between;gap:12px;
  color:var(--graphite)}
.card:hover{border-color:var(--amber);color:var(--graphite)}

.sku-detail{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.panel{background:var(--white);border:1px solid var(--line);border-radius:8px;padding:18px}
.attrs .kv{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line)}
.attrs .kv:last-child{border-bottom:none}

.cat-group{margin:26px 0 0}
.cat-head{font-family:var(--display);font-size:15px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--steel);margin:0 0 10px;display:flex;
  align-items:center;gap:10px}
.cat-count{font-size:12px;color:var(--steel);background:var(--white);
  border:1px solid var(--line);border-radius:999px;padding:1px 9px;letter-spacing:0}

.footer{border-top:1px solid var(--line);margin-top:32px;background:var(--white)}
.footer-inner{max-width:1100px;margin:0 auto;padding:18px 16px;display:flex;
  justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.footer-brand{font-size:13px;color:var(--steel)}
.footer-links{display:flex;gap:18px;font-size:13px;align-items:center}
.footer h4{font-family:var(--display);font-size:13px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--steel);margin:0 0 10px}
.kv{display:flex;justify-content:space-between;gap:14px;font-size:13px;padding:4px 0}
.kv span{color:var(--steel)}
.draft{max-width:1100px;margin:0 auto;padding:0 16px 20px;color:var(--red);
  font-size:12.5px;font-weight:600}

@media (max-width:820px){
  .table{display:none}
  .cards{display:block}
  .sku-detail{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr}
}