:root{--bg:#eff2f5;--surface:#ffffff;--ink:#15202b;--ink2:#45566a;--line:#d3dce4;--accent:#1f5f8b}
@media (prefers-color-scheme: dark){:root{--bg:#0d1319;--surface:#151d25;--ink:#e4ebf1;--ink2:#a3b3c2;--line:#26313c;--accent:#6bb0dc}}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
a{color:var(--accent)}
img{max-width:100%;height:auto}
h1,h2,h3{line-height:1.25;margin:0 0 .5rem}
h1{font-size:1.6rem}
h2{font-size:1.25rem}
h3{font-size:1.05rem}
p{margin:0 0 .75rem}

.wrap{max-width:1040px;margin:0 auto;padding:1rem}

/* ── header ─────────────────────────────────────────── */
.bar{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:.75rem;
     padding:.6rem .9rem;background:var(--surface);border-bottom:1px solid var(--line)}
.brand{font-weight:700;font-size:1.05rem;text-decoration:none;color:var(--ink)}
.bar-right,.barright{display:flex;align-items:center;gap:.6rem}
.cartlink{text-decoration:none;color:var(--ink);font-size:.95rem;padding:.35rem .5rem;border:1px solid var(--line);border-radius:8px}
.badge{display:inline-block;min-width:1.4em;padding:0 .35em;border-radius:999px;background:var(--accent);color:#fff;font-size:.8rem;text-align:center}
.burger{display:flex;flex-direction:column;justify-content:center;gap:4px;width:42px;height:38px;padding:0 9px;
        background:var(--surface);border:1px solid var(--line);border-radius:8px;cursor:pointer}
.burger span{display:block;height:2px;background:var(--ink);border-radius:2px}

.menu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--surface);border-bottom:1px solid var(--line)}
.bar{position:sticky;position:-webkit-sticky}
.bar{position:sticky}
.menu.open{display:block}
.menu ul{list-style:none;margin:0;padding:.4rem 0}
.menu li a{display:block;padding:.85rem 1rem;text-decoration:none;color:var(--ink);font-size:1.05rem}
.menu li a.current{color:var(--accent);font-weight:700}
.menu .sep{height:1px;margin:.4rem 1rem;background:var(--line)}

@media (min-width:760px){
  .burger{display:none}
  .menu{display:block;position:static;border:0;background:none;order:2}
  .menu ul{display:flex;gap:.25rem;padding:0}
  .menu li a{padding:.4rem .7rem;border-radius:8px}
  .menu .sep{width:1px;height:1.4rem;margin:auto .5rem}
  .bar{justify-content:space-between}
}

/* ── blocks ─────────────────────────────────────────── */
.panel,.block,.cart{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1rem;margin:0 0 1rem}
.hero{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1.4rem;margin:0 0 1rem}
.heronum{display:flex;flex-wrap:wrap;gap:1.2rem;margin:.8rem 0 0;padding:0;list-style:none}
.heronum li{font-size:.9rem;color:var(--ink2)}
.heronum strong{display:block;font-size:1.5rem;color:var(--ink)}
.links{display:flex;flex-wrap:wrap;gap:.6rem;margin:.9rem 0 0}
.steps{margin:.5rem 0 0;padding-left:1.2rem;color:var(--ink2)}
.steps li{margin:.3rem 0}
.notice,.err{border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:10px;
             background:var(--surface);padding:.75rem 1rem;margin:0 0 1rem}
.err{border-left-color:#b23c17}
.lead{font-size:1.05rem;color:var(--ink2)}
.muted,.small{color:var(--ink2)}
.small{font-size:.87rem}
.big{font-size:1.4rem;font-weight:700}
.price{font-weight:700;color:var(--ink)}

/* ── grid of products ───────────────────────────────── */
.grid{display:grid;grid-template-columns:1fr;gap:.9rem}
@media (min-width:620px){.grid{grid-template-columns:1fr 1fr}}
@media (min-width:980px){.grid{grid-template-columns:1fr 1fr 1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:.9rem;display:flex;flex-direction:column;gap:.5rem}
.card h3{margin:0}
.card h3 a{text-decoration:none;color:var(--ink)}
.maker{font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink2)}
.specs,.spec{list-style:none;margin:0;padding:0;font-size:.88rem;color:var(--ink2)}
.specs li,.spec li{display:flex;justify-content:space-between;gap:.6rem;padding:.15rem 0;border-bottom:1px dashed var(--line)}
.specs li:last-child,.spec li:last-child{border-bottom:0}
.spectable{width:100%;border-collapse:collapse;font-size:.92rem}
.spectable th,.spectable td{text-align:left;padding:.4rem .5rem;border-bottom:1px solid var(--line);vertical-align:top}
.spectable th{width:45%;font-weight:600;color:var(--ink2)}
.docs{display:flex;flex-wrap:wrap;gap:.6rem;margin:.6rem 0 0}

/* ── forms and buttons ──────────────────────────────── */
.btn,button,input[type=submit]{display:inline-block;padding:.55rem .9rem;border:1px solid var(--accent);border-radius:9px;
  background:var(--accent);color:#fff;font:inherit;font-weight:600;text-decoration:none;cursor:pointer}
.btn.ghost,button.ghost{background:var(--surface);color:var(--accent)}
.btn[disabled],button[disabled]{background:var(--line);border-color:var(--line);color:var(--ink2);cursor:not-allowed}
.add{margin-top:auto}
.add button,.add .btn{width:100%;text-align:center}
.field{display:block;margin:0 0 .75rem}
.field span{display:block;font-size:.88rem;color:var(--ink2);margin-bottom:.2rem}
input[type=text],input[type=email],input[type=number],input[type=password],input[type=search],select,textarea{
  width:100%;padding:.55rem .6rem;background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:9px;font:inherit}
textarea{min-height:5rem}
.filters{display:flex;flex-wrap:wrap;gap:.6rem;align-items:flex-end}
.filters .field{margin:0;flex:1 1 200px}
.filters button{flex:0 0 auto}
.row{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.qtyform{display:flex;gap:.4rem;align-items:center}
.qtyform input[type=number]{width:5.5rem}
.totalrow{display:flex;justify-content:space-between;align-items:center;gap:1rem;
          padding-top:.6rem;margin-top:.6rem;border-top:2px solid var(--line);font-size:1.1rem;font-weight:700}

table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:.45rem .5rem;border-bottom:1px solid var(--line)}
th{color:var(--ink2);font-size:.85rem}

/* ── footer ─────────────────────────────────────────── */
.foot{margin-top:2rem;padding:1.2rem 0;background:var(--surface);border-top:1px solid var(--line);color:var(--ink2);font-size:.92rem}
.foot p{margin:.25rem 0}
.dirs{display:flex;flex-wrap:wrap;gap:.5rem}