/* Запасные шрифты подогнаны по ширине к основным: пока Onest и Roboto
   Condensed грузятся, текст набран системным шрифтом того же размера,
   поэтому при подмене строки не «прыгают». */
@font-face{font-family:"Onest Fallback";src:local("Arial"),local("Helvetica");
size-adjust:97%;ascent-override:100%;descent-override:25%;line-gap-override:0%}
@font-face{font-family:"Cond Fallback";src:local("Arial Narrow"),local("Arial");
size-adjust:82%;ascent-override:105%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:"Mono Fallback";src:local("Consolas"),local("Menlo"),
local("DejaVu Sans Mono");size-adjust:96%}

*,*::before,*::after{box-sizing:border-box}
:root{
--paper:#EEEEEA;
--sheet:#FFFFFF;
--sheet2:#F6F6F3;
--ink:#14161A;
--ink2:#565B62;
--ink3:#868C93;
--line:#D5D6D1;
--line2:#B4B6B0;
--steel:#1B1E22;
--steel2:#2A2E34;
--mark:#F2C200;
--mark2:#D9AE00;
--deep:#8A6100;
--ok:#1B6A43;
--fs:15.5px}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
font:var(--fs)/1.55 "Onest","Onest Fallback","Segoe UI",Arial,sans-serif}
img{max-width:100%;display:block}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--deep)}
h1,h2,h3,h4,.cond{font-family:"Roboto Condensed","Cond Fallback","Arial Narrow",Arial,sans-serif}
.mono,.mn{font-family:"JetBrains Mono",Consolas,monospace}
.wrap{max-width:1300px;margin:0 auto;padding:0 18px}

/* ── шапка ───────────────────────────────────────────── */
.util{background:var(--steel);color:#A9AFB6;font-size:12.5px}
.util .wrap{display:flex;justify-content:space-between;gap:18px;
flex-wrap:wrap;padding:6px 18px}
.util a{color:#E7EAEC}
.util b{color:var(--mark);font-weight:500}
header{background:var(--steel2);color:#fff;padding:12px 0}
.hd{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.brand img{height:62px;width:auto}
.brand .slog{font-size:11.5px;line-height:1.35;color:#9CA3AA;
padding-left:14px;border-left:1px solid #454C54}
@media(max-width:1099px){.brand .slog{display:none}}
.hsearch{flex:1 1 280px;display:flex;min-width:210px;position:relative}

/* ── подсказки в строке поиска ───────────────────────── */
.sug{display:none;position:absolute;top:100%;left:0;right:0;z-index:70;
background:var(--sheet);border:1px solid var(--line2);border-top:0;
box-shadow:0 10px 26px rgba(0,0,0,.22);max-height:70vh;overflow:auto}
.sug.on{display:block}
.sug a{display:flex;gap:12px;align-items:baseline;justify-content:space-between;
padding:9px 13px;border-bottom:1px solid var(--line);color:var(--ink);
font-size:14px;line-height:1.35}
.sug a span{min-width:0}
.sug a b{white-space:nowrap;font-family:"Roboto Condensed","Cond Fallback",sans-serif;
font-size:15px}
.sug a:hover,.sug a.on{background:var(--mark);color:var(--steel)}
.sug a.all{justify-content:center;border-bottom:0;background:var(--sheet2);
font-family:"Roboto Condensed","Cond Fallback",sans-serif;font-weight:700;
text-transform:uppercase;letter-spacing:.05em;font-size:12.5px;
color:var(--ink2);padding:11px 13px}
.sug a.all:hover,.sug a.all.on{background:var(--steel);color:#fff}
@media(max-width:699px){.sug{max-height:60vh}.sug a{font-size:13.5px}}
.hsearch input{flex:1;min-width:0;padding:11px 14px;border:0;font-size:14.5px;
font-family:inherit;background:#fff;color:var(--ink)}
.hsearch button{border:0;background:var(--mark);color:var(--steel);
font-family:"Roboto Condensed","Cond Fallback",sans-serif;font-weight:700;font-size:15px;
text-transform:uppercase;letter-spacing:.06em;padding:0 20px;cursor:pointer}
.hsearch button:hover{background:var(--mark2)}
.hph{margin-left:auto;text-align:right;line-height:1.35}
.hph .n{display:block;font-family:"Roboto Condensed","Cond Fallback",sans-serif;font-weight:700;
font-size:21px;color:#fff;white-space:nowrap;line-height:1.15}
.hph .n a{color:#fff}
.hph .s{display:block;font-size:11.5px;color:#9CA3AA;margin-top:1px}
#nowbox2{display:none}
.hph .lk{display:flex;gap:5px;justify-content:flex-end;margin-top:5px}
.hph .lk a{font-size:11.5px;padding:3px 9px;border:1px solid #4A5158;color:#D6DBDF}
.hph .lk a:hover{border-color:var(--mark);color:var(--mark)}

@media(max-width:699px){
  .util{display:none}                    /* адрес и часы есть в подвале */
  header{padding:11px 0}
  .hd{gap:12px}
  .brand img{height:44px}
  .hsearch{order:3;flex-basis:100%}
  .hsearch input{padding:10px 12px;font-size:16px}   /* 16px — iOS не зумит */
  .hsearch button{padding:0 15px;font-size:14px}
  .hph{text-align:right}
  .hph .n{font-size:17px}
  .hph .s{display:none}
  #nowbox2{display:inline-flex;font-size:12px;margin-top:2px}
  .hph .lk{margin-top:3px}
}

/* ── «сейчас открыто» ────────────────────────────────── */
.now{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.now b{font-weight:500}
.now .dot{width:7px;height:7px;border-radius:50%;background:#8B9299;
flex:0 0 auto}
.now.open .dot{background:#42C07A;box-shadow:0 0 0 3px rgba(66,192,122,.22)}
.now.open b{color:#7FE0AC}
.now.shut b{color:#E8B4A2}

/* ── полоса «почему сюда» ────────────────────────────── */
.trust{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
grid-template-columns:1fr;margin:0 0 26px;list-style:none;padding:0}
@media(min-width:620px){.trust{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.trust{grid-template-columns:repeat(4,1fr)}}
.trust li{background:var(--sheet);padding:14px 16px}
.trust b{display:block;font-family:"Roboto Condensed","Cond Fallback",sans-serif;
font-size:15.5px;margin-bottom:3px}
.trust span{font-size:13.5px;color:var(--ink2);line-height:1.45}

/* ── карта и маршруты ───────────────────────────────── */
.mapbox{border:1px solid var(--line);background:var(--sheet);margin:0 0 18px}
.mapbox iframe{display:block;width:100%;height:340px;border:0}
.maploader{display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:9px;width:100%;height:220px;border:0;cursor:pointer;background:var(--steel);
color:#fff;font-family:inherit;padding:16px}
.maploader:hover{background:#242930}
.maploader b{font-family:"Roboto Condensed","Cond Fallback",sans-serif;
font-size:17px;text-transform:uppercase;letter-spacing:.05em;color:var(--mark)}
.maploader .ad{font-size:13.5px;color:#A9AFB6}
.maploader .pin{width:26px;height:26px;border-radius:50% 50% 50% 0;
transform:rotate(-45deg);background:var(--mark);position:relative}
.maploader .pin::after{content:"";position:absolute;inset:8px;border-radius:50%;
background:var(--steel)}
@media(max-width:699px){.mapbox iframe{height:260px}.maploader{height:170px}}
.ways{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}
.ways a{display:inline-flex;align-items:center;gap:7px;
font-family:"Roboto Condensed","Cond Fallback",sans-serif;font-weight:700;
font-size:14px;text-transform:uppercase;letter-spacing:.04em;
border:1px solid var(--line2);padding:9px 15px;background:var(--sheet)}
.ways a:hover{border-color:var(--steel);background:var(--steel);color:#fff;
text-decoration:none}
.ways a.y{border-color:var(--mark2)}
.ways a.y:hover{background:var(--mark);border-color:var(--mark);color:var(--steel)}

/* ── тёплая подсказка в карточке ─────────────────────── */
.hint{background:var(--mark);color:var(--steel);padding:12px 15px;
font-size:14px;line-height:1.45;margin:14px 0 0}
.hint b{font-weight:600}

/* ── каркас ──────────────────────────────────────────── */
.shell{display:grid;gap:26px;grid-template-columns:minmax(0,1fr);
padding:22px 0 60px}
@media(min-width:1000px){.shell{grid-template-columns:250px minmax(0,1fr)}}
aside{font-size:14px}
aside .box{background:var(--sheet);border:1px solid var(--line);position:sticky;top:14px}
aside .cap{font-family:"Roboto Condensed","Cond Fallback",sans-serif;font-weight:700;
text-transform:uppercase;letter-spacing:.07em;font-size:12.5px;
background:var(--steel);color:#fff;padding:9px 13px}
aside .cap i{color:var(--mark);font-style:normal}
aside ul{list-style:none;margin:0;padding:0}
aside .sec{border-top:1px solid var(--line)}
aside .sec:first-child{border-top:0}
aside .sec > a{display:block;padding:10px 13px 6px;
font-family:"Roboto Condensed","Cond Fallback",sans-serif;font-weight:700;font-size:15px;
line-height:1.2}
aside .sec.on > a{color:var(--deep)}
aside .sub{padding:0 13px 10px}
aside .sub li{display:flex;justify-content:space-between;gap:8px;
padding:3px 0;line-height:1.3}
aside .sub a{font-size:13.2px;color:var(--ink2)}
aside .sub a:hover{color:var(--deep)}
aside .sub li.on a{color:var(--ink);font-weight:600;
box-shadow:inset 0 -6px 0 var(--mark)}
aside .sub .n{font-family:"JetBrains Mono","Mono Fallback",monospace;font-size:11px;
color:var(--ink3);flex:0 0 auto}
.navtgl{position:absolute;opacity:0;width:0;height:0}
aside .cap{cursor:pointer;display:flex;justify-content:space-between;
align-items:center;gap:10px;user-select:none}
aside .cap i{transition:transform .15s}
.navtgl:checked ~ .cap i{transform:rotate(180deg)}
.navtgl:not(:checked) ~ .tree{display:none}
.navtgl:focus-visible ~ .cap{outline:2px solid var(--mark);outline-offset:-2px}
@media(min-width:1000px){
  aside .cap{cursor:default}
  aside .cap i{display:none}
  .navtgl:not(:checked) ~ .tree,
  .navtgl:checked ~ .tree{display:block}
}

/* ── типографика ─────────────────────────────────────── */
.crumbs{font-size:12.5px;color:var(--ink3);margin:0 0 12px}
.crumbs a{color:var(--ink2);text-decoration:underline;text-decoration-color:var(--line2)}
.crumbs i{font-style:normal;margin:0 7px;color:var(--line2)}
h1{font-weight:700;font-size:clamp(23px,3.1vw,33px);line-height:1.14;
margin:0 0 10px;letter-spacing:-.005em;text-wrap:balance}
h2{font-weight:700;font-size:20px;margin:32px 0 12px;
text-transform:uppercase;letter-spacing:.03em}
h2:first-child{margin-top:0}
h3{font-weight:700;font-size:16.5px;margin:20px 0 7px}
h4{font-weight:700;font-size:14.5px;margin:15px 0 5px;
font-family:"Roboto Condensed","Cond Fallback",sans-serif;text-transform:uppercase;
letter-spacing:.04em;color:var(--ink2)}
.sum{color:var(--ink2);margin:0 0 18px;max-width:74ch}
.sum b{color:var(--ink);font-weight:600}
.rule{height:3px;background:var(--steel);margin:0 0 18px}
.rule i{display:block;width:64px;height:3px;background:var(--mark)}

/* ── строки товаров ──────────────────────────────────── */
ul.list{list-style:none;margin:0;padding:0;background:var(--sheet);
border:1px solid var(--line)}
ul.list > li{display:grid;gap:14px;align-items:center;padding:12px 14px;
grid-template-columns:64px minmax(0,1fr);border-top:1px solid var(--line)}
ul.list > li:first-child{border-top:0}
ul.list > li:hover{background:var(--sheet2)}
@media(min-width:700px){
ul.list > li{grid-template-columns:72px minmax(0,1fr) 190px}}
.th{width:64px;height:64px;background:#fff;border:1px solid var(--line);
display:flex;align-items:center;justify-content:center;padding:4px}
@media(min-width:700px){.th{width:72px;height:72px}}
.th img{max-height:100%;object-fit:contain}
.th span{font-size:9px;color:var(--line2);text-align:center;line-height:1.2}
.d .br{font-family:"JetBrains Mono","Mono Fallback",monospace;font-size:10.5px;
letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.d .nm{display:block;font-size:15px;line-height:1.35;margin:1px 0 3px;
font-weight:500}
.d .nm:hover{color:var(--deep)}
.d .sp{font-size:12.5px;color:var(--ink2);line-height:1.4}
.pz{display:flex;align-items:center;gap:12px;
grid-column:1/-1;border-top:1px dashed var(--line);padding-top:9px}
@media(min-width:700px){.pz{grid-column:auto;border:0;padding:0;
flex-direction:column;align-items:flex-end;gap:5px;text-align:right}}
.r{font-style:normal;font-weight:500;font-size:.6em;margin-left:.16em;
  vertical-align:.08em;opacity:.55;letter-spacing:0}
.buy .big .r{font-size:.46em;font-weight:500;margin-left:.14em;
  vertical-align:.2em;opacity:.5}
.pz .p{font-family:"Roboto Condensed","Cond Fallback",sans-serif;font-weight:700;font-size:21px;
white-space:nowrap;box-shadow:inset 0 -8px 0 var(--mark)}
.pz .av{font-size:11.5px;color:var(--ok);font-family:"JetBrains Mono","Mono Fallback",monospace}
.flag{display:inline-block;font-family:"Roboto Condensed","Cond Fallback",sans-serif;
font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.06em;
padding:2px 7px;margin:0 0 3px;border-radius:2px;vertical-align:middle}
.flag.dn{background:#B3261E;color:#fff}
.flag.nw{background:var(--mark);color:var(--steel)}
.flag.no{background:#8A9099;color:#fff}
.pz .av.no{color:var(--ink3)}
.pz .ask{font-size:14px;font-weight:500;color:var(--ink2);white-space:nowrap;
box-shadow:none}
li.off .th,li.off .p{opacity:.62}
li.off .nm{color:var(--ink2)}
.wa{display:block;font-size:13px;color:var(--ink3);text-decoration:line-through;
line-height:1.2}
.buy .wa{font-size:16px;margin-bottom:2px}
.buy .big.ask{font-size:24px;line-height:1.15;color:var(--ink2);letter-spacing:0}
.buy .av.no{color:var(--ink3)}
.buy .flag.no{margin-bottom:4px}
.add{font-family:"Roboto Condensed","Cond Fallback",sans-serif;font-weight:700;
  font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;
  padding:8px 12px;border:1px solid var(--line2);background:transparent;
  color:var(--ink2);border-radius:2px;white-space:nowrap}
.add:hover{border-color:var(--mark);background:var(--mark);color:var(--steel)}
.add.on{border-color:var(--ok);color:var(--ok)}
.buy .add{display:block;width:100%;margin:0 0 10px;padding:11px 12px;font-size:13px}
#cartbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  background:var(--steel2);color:#fff;padding:10px 16px;
  box-shadow:0 -2px 14px rgba(0,0,0,.25)}
#cartbar.on{display:block}
#cartbar .in{max-width:1180px;margin:0 auto;display:flex;align-items:center;
  gap:14px;justify-content:space-between;flex-wrap:wrap}
#cartbar b{font-family:"Roboto Condensed","Cond Fallback",sans-serif;font-size:16px}
#cartbar a.go2{background:var(--mark);color:var(--steel);font-weight:700;
  font-family:"Roboto Condensed","Cond Fallback",sans-serif;text-transform:uppercase;
  letter-spacing:.05em;padding:10px 18px;border-radius:2px;text-decoration:none}
#cartbar button.clr{background:none;border:0;color:#9aa2a8;cursor:pointer;
  font-size:13px;text-decoration:underline}

/* ── страница заявки на несколько позиций ────────────── */
.zt{width:100%;border-collapse:collapse;margin:0 0 6px;font-size:14.5px}
.zt td{border-bottom:1px solid var(--line);padding:11px 8px;vertical-align:middle}
.zt td:first-child{padding-left:0}
.zt td:last-child{padding-right:0}
.zt a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line2)}
.zt a:hover{border-color:var(--mark)}
.zt .pr{color:var(--ink2);white-space:nowrap;text-align:right;width:1%}
.zt .q{white-space:nowrap;width:1%;text-align:center}
.zt .q button{width:28px;height:28px;line-height:1;font-size:16px;cursor:pointer;
  border:1px solid var(--line2);background:#fff;color:var(--ink);border-radius:2px}
.zt .q button:hover{border-color:var(--mark);background:var(--mark);color:var(--steel)}
.zt .q b{display:inline-block;min-width:26px;font-family:"Roboto Condensed","Cond Fallback",sans-serif;
  font-size:16px}
.zt .s{text-align:right;white-space:nowrap;width:1%;
  font-family:"Roboto Condensed","Cond Fallback",sans-serif;font-weight:700;font-size:16px}
.zt .x{width:1%}
.zt .x button{background:none;border:0;color:#9aa2a8;cursor:pointer;font-size:19px;
  line-height:1;padding:2px 4px}
.zt .x button:hover{color:var(--bad,#c33)}
.ztot{display:flex;justify-content:space-between;align-items:baseline;
  border-top:2px solid var(--steel);padding:12px 0 18px;
  font-family:"Roboto Condensed","Cond Fallback",sans-serif}
.ztot b{font-size:23px}
.zempty{color:var(--ink2)}

/* ── прайс-лист ──────────────────────────────────────── */
.rate{display:flex;align-items:baseline;gap:9px;margin:0 0 14px;
padding:12px 15px;background:var(--sheet2);border-left:4px solid var(--mark);
font-size:15px;color:var(--ink2)}
.rate b{font-family:"Roboto Condensed","Cond Fallback",sans-serif;
font-size:30px;line-height:1;color:var(--ink)}
.dl{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 16px}
.dl .b{width:auto;padding:11px 18px;cursor:pointer}
h2.pgrp{margin:26px 0 6px;padding-top:14px;border-top:2px solid var(--steel)}
table.prc{width:100%;border-collapse:collapse;font-size:14px}
table.prc td{padding:7px 8px;border-bottom:1px solid var(--line);
vertical-align:top}
table.prc td:first-child{padding-left:0}
table.prc td:last-child{padding-right:0}
table.prc td.nm{width:58%}
table.prc td.nm a{border-bottom:1px solid transparent}
table.prc td.nm a:hover{border-color:var(--mark2)}
table.prc .ar{display:block;font-family:"JetBrains Mono","Mono Fallback",monospace;
font-size:11.5px;color:var(--ink3);margin-top:1px}
table.prc td.ct{color:var(--ink2);font-size:13px}
table.prc td.pp{text-align:right;white-space:nowrap;
font-family:"Roboto Condensed","Cond Fallback",sans-serif;font-weight:700;
font-size:16px;width:1%}
@media(max-width:640px){
  table.prc td.ct{display:none}
  table.prc td.nm{width:auto}
  table.prc{font-size:13.5px}
}
@media print{
  .util,header,aside,footer,.dl,.crumbs,#cartbar,.rule{display:none!important}
  body{background:#fff;font-size:11pt}
  .shell{display:block;padding:0}
  .sheet{border:0;padding:0}
  table.prc{font-size:9.5pt}
  table.prc td.nm a{color:#000}
  h2.pgrp{break-after:avoid;page-break-after:avoid}
  table.prc tr{break-inside:avoid;page-break-inside:avoid}
  a[href]:after{content:""}
}

/* ── калькуляторы раздела «Подбор и расчёт» ──────────── */
.lead{font-size:17px;line-height:1.5;color:var(--ink2);margin:0 0 20px;max-width:64ch}
.pick{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:1px;
background:var(--line);border:1px solid var(--line);grid-template-columns:1fr}
@media(min-width:700px){.pick{grid-template-columns:1fr 1fr}}
.pick a{display:block;background:var(--sheet);padding:15px 17px;height:100%}
.pick a:hover{background:var(--mark);color:var(--steel)}
.pick b{display:block;font-family:"Roboto Condensed","Cond Fallback",sans-serif;
font-size:17px;margin-bottom:3px}
.pick span{display:block;font-size:13.5px;color:var(--ink2);line-height:1.45}
.pick a:hover span{color:var(--steel)}
ul.plain{list-style:none;margin:0;padding:0;columns:2;column-gap:26px}
ul.plain li{padding:3px 0;break-inside:avoid}
@media(max-width:640px){ul.plain{columns:1}}
.calc{background:var(--sheet2);border:1px solid var(--line);padding:16px;
margin:0 0 16px;display:grid;gap:13px;grid-template-columns:1fr}
@media(min-width:620px){.calc{grid-template-columns:1fr 1fr}}
.calc .row{display:flex;flex-direction:column;gap:5px}
.calc .wide{grid-column:1/-1}
.calc label{font-size:13px;color:var(--ink2)}
.calc input,.calc select{width:100%;padding:10px 12px;border:1px solid var(--line2);
background:#fff;color:var(--ink);font:inherit;font-size:16px;border-radius:2px}
.calc input:focus,.calc select:focus{outline:0;border-color:var(--steel)}
.res{border-left:4px solid var(--mark);background:var(--sheet);
padding:15px 17px;margin:0 0 24px}
.res .big{font-family:"Roboto Condensed","Cond Fallback",sans-serif;font-weight:700;
font-size:25px;line-height:1.2;margin-bottom:8px}
.res p{margin:8px 0}
.res p:last-child{margin-bottom:0}
.res .dim{color:var(--ink2);font-size:13.5px}
@media(max-width:640px){.res .big{font-size:21px}}
/* Табличка «термин — объяснение». В каталоге .spec набирает правую
   колонку моноширинным и прижимает вправо — там это характеристики
   в две-три цифры. Здесь справа живой текст, и такой набор его ломает. */
table.spec.txt{table-layout:auto}
table.spec.txt td{padding:9px 0}
table.spec.txt td.k{width:30%;font-weight:600;color:var(--ink);
padding-right:20px;font-family:"Roboto Condensed","Cond Fallback",sans-serif;
font-size:15.5px;line-height:1.4}
table.spec.txt td.v{font-family:inherit;font-size:14.5px;text-align:left;
color:var(--ink2);line-height:1.5;word-break:normal}
@media(max-width:620px){
  table.spec.txt,table.spec.txt tbody,table.spec.txt tr,table.spec.txt td{display:block;width:auto}
  table.spec.txt td.k{padding:0 0 2px;border-bottom:0}
  table.spec.txt td.v{padding:0 0 11px}
}
/* Ссылки в тексте должны быть видны: по всему сайту ссылка набрана
   обычным цветом, и в каталоге это правильно — там ссылка почти
   каждое слово. В статьях наоборот: не видно, куда нажимать. */
.body p a,.res a,.note p a{border-bottom:1px solid var(--mark2)}
.body p a:hover,.res a:hover,.note p a:hover{background:var(--mark);
border-color:var(--mark)}
/* Последняя строка расчёта — переход в каталог, её видно отдельно */
.res p:last-child{margin-top:13px;padding-top:12px;border-top:1px solid var(--line)}
.res p:last-child a{font-family:"Roboto Condensed","Cond Fallback",sans-serif;
font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:13.5px;
border-bottom:2px solid var(--mark)}
.res p.dim:last-child{border-top:0;padding-top:0;margin-top:8px}
body.nobar #cartbar{display:none!important}
.pz .go{font-family:"Roboto Condensed","Cond Fallback",sans-serif;font-weight:700;font-size:12.5px;
text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--line2);
padding:5px 12px;color:var(--ink2)}
.pz .go:hover{border-color:var(--steel);background:var(--steel);color:#fff}

/* ── разделы на главной ──────────────────────────────── */
.tiles{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:1px;
background:var(--line);border:1px solid var(--line);
grid-template-columns:1fr}
@media(min-width:640px){.tiles{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.tiles{grid-template-columns:repeat(3,1fr)}}
.tiles > li{background:var(--sheet);padding:17px 19px 19px}
.tiles .hh{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.tiles .hh a{font-family:"Roboto Condensed","Cond Fallback",sans-serif;font-weight:700;
font-size:18px;line-height:1.15}
.tiles .hh .c{font-family:"JetBrains Mono","Mono Fallback",monospace;font-size:11px;
color:var(--ink3);flex:0 0 auto}
.tiles .bar{height:3px;background:var(--mark);margin:9px 0 11px;width:52px}
.tiles ul{list-style:none;margin:0;padding:0;font-size:13.4px}
.tiles ul li{padding:2px 0;line-height:1.4}
.tiles ul a{color:var(--ink2)}
.tiles ul a:hover{color:var(--deep)}

/* ── фильтры и пагинация ─────────────────────────────── */
.tools{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 14px}
.tools select{font:inherit;font-size:13.5px;padding:7px 11px;
border:1px solid var(--line2);background:var(--sheet)}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px;padding:0}
.chips a{display:block;border:1px solid var(--line2);background:var(--sheet);
padding:5px 12px;font-size:13px}
.chips a:hover{border-color:var(--steel);background:var(--steel);color:#fff}
.chips .n{font-family:"JetBrains Mono","Mono Fallback",monospace;font-size:10.5px;color:var(--ink3)}
.chips a:hover .n{color:var(--mark)}
.pg{display:flex;gap:5px;flex-wrap:wrap;list-style:none;margin:18px 0 0;padding:0}
.pg a,.pg strong{display:block;padding:7px 13px;border:1px solid var(--line2);
background:var(--sheet);font-size:14px;font-family:"JetBrains Mono","Mono Fallback",monospace}
.pg strong{background:var(--steel);border-color:var(--steel);color:var(--mark)}

/* ── карточка товара ─────────────────────────────────── */
.pgrid{display:grid;gap:22px;grid-template-columns:minmax(0,1fr)}
@media(max-width:899px){
  /* на телефоне цена и кнопки — сразу под заголовком, а не в конце */
  .pgrid > div:last-child{order:-1}
  .shot{min-height:0;padding:12px}
  .shot img{max-height:58vh}
  .buy{position:static}
}
@media(min-width:900px){.pgrid{grid-template-columns:minmax(0,1fr) 320px}}
.sheet{background:var(--sheet);border:1px solid var(--line);padding:20px 22px;
min-width:0}
.shot{background:#fff;border:1px solid var(--line);padding:18px;
display:flex;align-items:center;justify-content:center;min-height:230px;
margin:0 0 18px;min-width:0}
.shot img{max-width:100%;height:auto;min-width:0}
table.spec{width:100%;border-collapse:collapse;font-size:14.2px;
table-layout:fixed}
table.spec td{padding:7px 0;border-bottom:1px solid var(--line);
vertical-align:top}
table.spec tr:last-child td{border-bottom:0}
table.spec td.k{color:var(--ink2);width:52%;padding-right:14px}
table.spec td.v{font-family:"JetBrains Mono","Mono Fallback",monospace;font-size:13px;
text-align:right;word-break:break-word}
.body{font-size:15px;line-height:1.62}
.body ul{padding-left:19px;margin:7px 0}
.body p{margin:0 0 10px}

.buy{background:var(--sheet);border:1px solid var(--line);
border-top:4px solid var(--mark);padding:18px 20px;position:sticky;top:14px}
.buy .big{font-family:"Roboto Condensed","Cond Fallback",sans-serif;font-weight:700;
font-size:36px;line-height:1;letter-spacing:-.01em}
.buy .av{font-family:"JetBrains Mono","Mono Fallback",monospace;font-size:11.5px;color:var(--ok);
margin:7px 0 15px;display:block}
.b{display:block;text-align:center;font-family:"Roboto Condensed","Cond Fallback",sans-serif;
font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:15px;
padding:12px 14px;margin:0 0 7px;border:1px solid var(--steel);cursor:pointer;
width:100%;background:var(--steel);color:#fff;line-height:1.25}
.b:hover{background:#000;color:var(--mark)}
.b.y{background:var(--mark);border-color:var(--mark);color:var(--steel)}
.b.y:hover{background:var(--mark2);color:var(--steel)}
.b.o{background:transparent;color:var(--ink);border-color:var(--line2)}
.b.o:hover{background:var(--steel);color:#fff;border-color:var(--steel)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.two .b{margin:0}
.tel{font-family:"JetBrains Mono","Mono Fallback",monospace;font-size:11.5px;color:var(--ink2);
text-align:center;margin:10px 0 0;line-height:1.5}
form.ord{margin:14px 0 0;display:grid;gap:7px}
form.ord input,form.ord textarea{font:inherit;font-size:14px;padding:9px 11px;
border:1px solid var(--line2);background:#fff;width:100%}
.hp{position:absolute;left:-9999px}
.facts{margin:14px 0 0;padding:12px 0 0;border-top:1px solid var(--line);
font-size:13px;color:var(--ink2);line-height:1.85}
.facts b{color:var(--ink);font-family:"JetBrains Mono","Mono Fallback",monospace;font-size:12px}

/* ── текстовый блок ──────────────────────────────────── */
.note{background:var(--sheet);border:1px solid var(--line);
border-left:4px solid var(--mark);padding:18px 22px;margin:26px 0 0;
font-size:14.5px;color:var(--ink2);line-height:1.72}
.note h2{margin:0 0 8px;font-size:16px}
.note p{max-width:80ch;margin:0}

/* ── подвал ──────────────────────────────────────────── */
footer{background:var(--steel);color:#9EA5AC;font-size:13.5px;padding:34px 0 24px}
footer a{color:#DDE2E6}
footer a:hover{color:var(--mark)}
.fg{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
footer h4{color:#fff;font-family:"Roboto Condensed","Cond Fallback",sans-serif;font-size:14px;
text-transform:uppercase;letter-spacing:.07em;margin:0 0 10px;color:var(--mark)}
footer ul{list-style:none;margin:0;padding:0;line-height:2}
.fb{border-top:1px solid #383D44;margin-top:26px;padding-top:15px;
font-size:12px;color:#727981;max-width:86ch}

.sbox{background:var(--sheet);border:1px solid var(--line);padding:20px}
#sres{list-style:none;padding:0;margin:14px 0 0}
#sres li{padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.dim{color:var(--ink3);font-size:13px}
:focus-visible{outline:2px solid var(--deep);outline-offset:2px}

/* На телефоне пальцу нужны зоны от 44px и текст не мельче 12px —
   это отдельно проверяют и Google, и Яндекс. */
@media(max-width:699px){
  .hsearch input{padding:13px 12px}
  .hsearch button{padding:0 18px}
  .hph .lk a{padding:7px 12px;font-size:12.5px}
  .chips a{padding:10px 14px;font-size:14px}
  .ways a{padding:13px 18px}
  .pg a,.pg strong{padding:11px 16px}
  aside .sub li{padding:7px 0}
  aside .sub a{font-size:14px}
  aside .sec > a{padding:13px 13px 8px}
  aside .cap{padding:14px 13px}
  footer ul{line-height:2.4}
  .d .br{font-size:12px}
  .d .sp{font-size:13px}
  .pz .av,.hph .s,.tel{font-size:12px}
  .tools select{padding:11px 12px;font-size:14px}
  .crumbs{font-size:13px;line-height:2}
  .b{padding:14px}
  .pz .add{padding:10px 14px;font-size:13px}
  #cartbar{padding:9px 12px}
  #cartbar b{font-size:14.5px}
  #cartbar a.go2{padding:9px 14px;font-size:13px}
  .pz .go{padding:11px 16px;font-size:13px}
  .d .nm{padding:2px 0}
  .now{font-size:12px}
  .tiles ul{font-size:14px}
  .tiles ul li{padding:0}
  .tiles ul a{display:block;padding:12px 0;line-height:1.5}
  .tiles .hh a{display:inline-block;padding:10px 0}
  .trust li{padding:16px}
}