/* ЖБИ-Снаб «Бетон» — эталон: design/mockups/B-beton/index.html (утверждён 03.10.2026).
   Блоки макета перенесены 1:1, новые — раздел, сетка каталога, главная, страницы, 404, меню, пагинация.
   Правила: один акцент (синий — цена и покупка), без фейкового 3D, overflow-x: clip (не hidden — ломает sticky),
   пробелы вокруг + и - в calc/min/clamp. */

/* ---------- шрифты (локально, из макета) ---------- */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/plex400-cyr.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/plex400-latext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/plex400-lat.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/plex500-cyr.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/plex500-latext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/plex500-lat.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/onest-cyr.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/onest-latext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/onest-lat.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Sofia Sans Extra Condensed';font-style:normal;font-weight:600 900;font-display:swap;src:url(../fonts/sofia-cyr.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Sofia Sans Extra Condensed';font-style:normal;font-weight:600 900;font-display:swap;src:url(../fonts/sofia-latext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Sofia Sans Extra Condensed';font-style:normal;font-weight:600 900;font-display:swap;src:url(../fonts/sofia-lat.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#C9C6BF;          /* сырой бетон */
  --bg-hi:#D7D4CE;
  --bg-lo:#B7B4AD;
  --ink:#121211;
  --ink-2:#2A2926;
  --mute:#4E4C48;
  --line:rgba(18,18,17,.22);
  --line-2:rgba(18,18,17,.55);
  --acc:#1E40AF;          /* единственный акцент: цена и покупка */
  --acc-2:#17338C;
  --on-acc:#F3F2EE;
  --disp:'Sofia Sans Extra Condensed','Arial Narrow',sans-serif;
  --text:'Onest','Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --pad:16px;
  --hdr:52px;
  --ease:cubic-bezier(.2,.7,.1,1);
  --stencil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.1' numOctaves='2' seed='23' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 44 0 0 0 -8.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  /* фактура бетона: зерно, пятна, поры — чистый SVG feTurbulence */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .06 0 0 0 0 .06 0 0 0 0 .05 0.8 0 0 0 -.33'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --grain-lt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 .98 -.9 0 0 0 .52'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --mottle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0045' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .08 0 0 0 0 .07 .42 0 0 0 -.16'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --pores:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.11' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .19 0 0 0 0 .18 -30 0 0 0 6.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}
@media (min-width:900px){ :root{ --pad:32px; --hdr:56px; } }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;color:var(--ink);font:400 15px/1.45 var(--text);
  background-color:var(--bg);
  background-image:var(--grain),var(--grain-lt),var(--pores),var(--mottle);
  background-size:220px 220px,260px 260px,520px 520px,900px 900px;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
img,svg{max-width:100%}
.mono{font-family:var(--mono)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;padding:10px 14px;background:var(--ink);color:var(--bg-hi);font:500 12px/1 var(--mono)}
.skip:focus{left:8px}

/* ---------- метки ---------- */
.lbl{display:flex;align-items:baseline;gap:10px;margin:0 0 12px;padding:0;
  font:500 11px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.lbl i{font-style:normal;color:var(--ink)}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes cast{from{clip-path:inset(0 0 100% 0);transform:translateY(.12em)}to{clip-path:inset(0 0 -10% 0);transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes tick{from{opacity:.25;transform:translateY(.08em)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes pen{to{stroke-dashoffset:0}}

/* ---------- шапка «Навигатор» (14.10.2026) ----------
   Телефон (<900 px): ряд 52 px - логотип с регионом, поиск (открывает меню с курсором в поле марки), звонок, тёмная
   «Меню» (полосы складываются в крест, пока меню открыто). Десктоп: тёмная рейка 36 px - страницы покупателю и условия
   поставки - уезжает при прокрутке (sticky с top = минус рейка), липнет ряд подбора 56 px = --hdr: логотип | «Каталог ЖБИ»
   плитой (открывает #mega и становится его светлой вкладкой) | Справочник, Калькуляторы | поиск марки (гибкий: забирает
   остаток ширины, подсказки - site.js) | ходовые марки с ценой (число - по ширине) | машина (заполняет order.js) |
   телефон и почта | заявка. В разметке ряд идёт раньше рейки (порядок Tab), рейку наверх ставит order:-1.
   #mega позиционирует header.top (top:100%): .top-bar, .nav и .top-rail не позиционировать. */
:root{--rail:0px}
.top{--lp:var(--pad);position:sticky;top:calc(-1 * var(--rail));z-index:30;display:flex;flex-direction:column;
  border-bottom:1px solid var(--ink);background:rgba(201,198,191,.92);
  backdrop-filter:saturate(.6) blur(6px);-webkit-backdrop-filter:saturate(.6) blur(6px)}
.top-bar{display:flex;align-items:stretch;height:calc(var(--hdr) - 1px);overflow-x:clip}
.top-rail{display:none}
.logo{display:flex;align-items:center;gap:10px;flex:0 1 auto;min-width:0;margin-right:auto;overflow:hidden;padding:0 var(--lp);color:var(--ink);
  text-decoration:none;font:900 25px/1 var(--disp);letter-spacing:.01em;text-transform:uppercase;white-space:nowrap}
.logo svg{flex:none;width:30px;height:20px;transition:transform .3s var(--ease)}
.logo:hover svg{transform:translateY(-2px)}
.logo-t{display:flex;flex-direction:column;gap:5px}
.logo-t small{font:500 10.5px/1 var(--mono);letter-spacing:.06em;color:var(--mute)}
.logo:focus-visible{outline-offset:-4px}
.nav,.finder--top,.top-hot,.top-cart,.top-cta,.top-mail{display:none}
.top-call{display:flex;flex:none}
.top-find,.top-tel{display:flex;align-items:center;justify-content:center;gap:10px;flex:none;width:52px;padding:0;border:0;
  border-left:1px solid var(--ink);background:none;color:var(--ink);text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background .2s,color .2s}
.top-find svg{width:20px;height:20px}
.top-tel svg{flex:none;width:18px;height:18px}
.top-tel span{display:none}
.top-find:hover,.top-tel:hover{background:var(--ink);color:var(--bg-hi)}
.top-find:focus-visible,.top-tel:focus-visible{outline:2px solid var(--ink);outline-offset:-5px}
.top-find:hover:focus-visible,.top-tel:hover:focus-visible{outline-color:var(--bg-hi)}
/* «Меню» - тёмная плита в пару к «Каталогу ЖБИ» на десктопе */
.top-menu{display:flex;align-items:center;justify-content:center;gap:8px;flex:none;padding:0 14px 0 12px;border:0;background:var(--ink);
  color:var(--bg-hi);font:800 19px/1 var(--disp);letter-spacing:.02em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s}
.top-menu i{position:relative;flex:none;width:16px;height:12px}
.top-menu i::before,.top-menu i::after{content:"";position:absolute;left:0;right:0;height:2px;background:currentColor;
  transition:transform .25s var(--ease),top .25s var(--ease)}
.top-menu i::before{top:2px}
.top-menu i::after{top:8px}
.top-menu[aria-expanded="true"]{background:var(--bg-hi);color:var(--ink)}
.top-menu[aria-expanded="true"] i::before{top:5px;transform:rotate(45deg)}
.top-menu[aria-expanded="true"] i::after{top:5px;transform:rotate(-45deg)}
.top-menu:focus-visible{outline:2px solid var(--bg-hi);outline-offset:-5px}
.top-menu[aria-expanded="true"]:focus-visible{outline-color:var(--ink)}
@media (min-width:520px) and (max-width:899px){
  .top-tel{width:auto;padding:0 16px}
  .top-tel span{display:inline;font:800 20px/1 var(--disp);letter-spacing:.01em}
}
@media (max-width:389px){
  .top-find,.top-tel{width:46px}
  .top-menu{gap:7px;padding:0 12px 0 10px}
}
@media (max-width:359px){
  .logo{gap:8px;padding:0 12px;font-size:22px}
  .logo svg{width:26px;height:17px}
  .top-find,.top-tel{width:42px}
  .top-menu{font-size:17px}
}

@media (min-width:900px){
  :root{--rail:36px}
  .top{--lp:18px;--ls:24px;--nt:20px;--np:12px;--cs:19px;--cp:14px;--ps:20px}
  /* фокус с клавиатуры в уехавшей рейке: шапка встаёт целиком. Без transition на top - с ним Tab прокручивал страницу на 343 px */
  .top:has(.top-rail :focus-visible),.top.top--rail{top:0}
  .top-find,.top-menu{display:none}

  /* рейка: страницы покупателю - выпуклые вкладки шрифтом заголовков; условия - моно с квадратами, растянуты на всю
     ширину; что не влезло, уходит целиком на скрытую вторую строку */
  .top-rail{order:-1;display:flex;align-items:stretch;flex:none;height:var(--rail);overflow:hidden;padding-left:var(--lp);
    background:var(--ink);color:var(--bg-lo);font:500 10.5px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
  .rail-nav{display:flex;align-items:stretch;flex:none}
  .rail-k{display:flex;align-items:center;padding-right:12px;color:#9d9a93}
  .rail-nav a{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;padding:0 14px;
    border-left:1px solid rgba(215,212,206,.2);background:rgba(215,212,206,.08);color:var(--bg-hi);
    font:800 17px/1 var(--disp);letter-spacing:.01em;text-decoration:none;transition:color .16s .06s}
  .rail-nav a:last-child{border-right:1px solid rgba(215,212,206,.2)}
  .rail-facts{display:flex;flex-wrap:wrap;flex:1 1 0;min-width:0;height:var(--rail);margin:0;padding:0;list-style:none;overflow:hidden}
  .rail-facts li{display:flex;align-items:center;gap:8px;flex:1 0 auto;height:var(--rail);padding:0 16px;
    border-left:1px solid rgba(215,212,206,.2)}
  .rail-facts li:first-child{border-left:0}
  .rail-facts li::before{content:"";flex:none;width:6px;height:6px;background:#9d9a93}
  .rail-facts li.rail-on::before{content:none}
  .rail-facts b{font-weight:500;color:var(--bg-hi)}
  .rail-live{flex:none;width:7px;height:7px;background:var(--bg-hi);animation:pulse 1.6s ease-in-out 3}
  .top-rail a:focus-visible{outline:2px solid var(--bg-hi);outline-offset:-4px}

  /* ряд подбора */
  .logo{flex:0 1 auto;margin-right:0;padding:0 var(--lp);border-right:1px solid var(--ink);font-size:var(--ls)}   /* сжимается последним: только без шрифтов */
  .nav{display:flex;align-items:stretch;flex:none}
  .nav-t{display:flex;flex-direction:column;gap:5px;white-space:nowrap}
  .nav-t b{display:flex;align-items:center;gap:8px;font:800 var(--nt)/1 var(--disp);letter-spacing:.01em;text-transform:uppercase}
  .nav-t small{font:500 10.5px/1 var(--mono);letter-spacing:.03em;color:var(--mute);transition:color .2s}
  /* «Каталог ЖБИ» - тёмная плита, как шапки групп мега-меню; открыт - светлая вкладка мега-меню без шва под ней */
  .nav-cat{position:relative;z-index:32;display:flex;align-items:center;gap:12px;padding:0 var(--np);background-color:var(--ink);
    color:var(--bg-hi);text-decoration:none;transition:background-color .2s,color .2s}
  .nav-cat .nav-t b{font-weight:900}
  .nav-cat .nav-t small{color:#9d9a93}
  .nav-cat small span,.nav-cat-i{display:none}
  .nav-cat-i{flex:none;width:22px;height:16px}
  .nav-cat .chev{flex:none;width:11px;height:8px;transition:transform .3s var(--ease)}
  .nav-cat:hover{background-color:var(--ink-2)}
  .nav-cat[aria-current]{box-shadow:inset 0 -4px 0 var(--bg-hi)}
  .nav-cat[aria-expanded="true"]{background-color:var(--bg-hi);background-image:var(--grain),var(--grain-lt);
    background-size:220px 220px,260px 260px;color:var(--ink);box-shadow:none}
  .nav-cat[aria-expanded="true"] .nav-t small{color:var(--mute)}
  .nav-cat[aria-expanded="true"] .chev{transform:rotate(180deg)}
  .nav-cat[aria-expanded="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--bg-hi)}
  .nav-cat:focus-visible{outline:2px solid var(--bg-hi);outline-offset:-5px}
  .nav-cat[aria-expanded="true"]:focus-visible{outline-color:var(--ink)}
  .nav-tool{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;padding:0 var(--np);
    border-right:1px solid var(--ink);color:var(--ink);text-decoration:none;transition:color .16s .06s}
  .nav-tool[aria-current]{box-shadow:inset 0 -4px 0 var(--ink)}
  .nav-tool + .nav-tool{display:none}

  /* трафарет: перо проводит линию по низу, краска поднимается от неё, слово светлеет; уходя - сначала стекает краска */
  .rail-nav a::before,.nav-tool::before,.top-tel::before,.top-mail::before{content:"";position:absolute;left:0;right:0;bottom:0;
    z-index:1;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;transition:transform .2s var(--ease) .1s;
    pointer-events:none}
  .rail-nav a::after,.nav-tool::after,.top-tel::after,.top-mail::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
    transform:scaleY(0);transform-origin:50% 100%;transition:transform .22s var(--ease);pointer-events:none}
  .rail-nav a::before,.rail-nav a::after{background:var(--bg-hi)}
  .rail-nav a:hover::before,.rail-nav a:focus-visible::before,.nav-tool:hover::before,.nav-tool:focus-visible::before,
  .top-tel:hover::before,.top-tel:focus-visible::before,.top-mail:hover::before,.top-mail:focus-visible::before,
  .top-mail.copied::before{transform:scaleX(1);transition:transform .26s var(--ease)}
  .rail-nav a:hover::after,.rail-nav a:focus-visible::after,.rail-nav a[aria-current]::after,.nav-tool:hover::after,
  .nav-tool:focus-visible::after,.top-tel:hover::after,.top-tel:focus-visible::after,.top-mail:hover::after,
  .top-mail:focus-visible::after,.top-mail.copied::after{transform:scaleY(1);transition:transform .34s var(--ease) .14s}
  .rail-nav a:hover,.rail-nav a:focus-visible,.rail-nav a[aria-current]{color:var(--ink);transition:color .2s .14s}
  .nav-tool:hover,.nav-tool:focus-visible,.top-tel:hover,.top-tel:focus-visible,.top-mail:hover,.top-mail:focus-visible,
  .top-mail.copied{background:none;color:var(--bg-hi);transition:color .2s .14s}
  .nav-tool:hover small,.nav-tool:focus-visible small{color:#9d9a93}
  .rail-nav a:focus-visible{outline-color:var(--ink)}
  .nav-tool:focus-visible,.top-tel:focus-visible,.top-mail:focus-visible{outline:2px solid var(--bg-hi);outline-offset:-5px}

  /* поиск марки: забирает остаток ряда; подсказки (раскладка, транслит) даёт site.js любой form.finder */
  .finder--top{display:block;flex:1 1 0;min-width:0;align-self:center;margin:0 12px}
  .finder--top .finder-field{height:40px;overflow:hidden;background:rgba(233,230,224,.72)}
  .finder--top .ft-i{flex:none;align-self:center;width:16px;height:16px;margin:0 8px 0 10px;color:var(--mute);transition:color .2s}
  .finder--top .finder-field:focus-within .ft-i{color:var(--ink)}
  .finder--top .finder-field input{padding:0 4px 0 0;font-size:20px;text-overflow:ellipsis}
  .finder--top .finder-field input::-webkit-search-cancel-button{display:none;-webkit-appearance:none}
  .finder--top .finder-field input::placeholder{font-size:12px;letter-spacing:0}
  .finder--top .finder-go{display:none;align-items:center;justify-content:center;flex:none;width:40px;padding:0}
  .finder--top .finder-go svg{width:18px;height:18px;transition:transform .3s var(--ease)}
  .finder--top .finder-go:hover svg{transform:translateX(3px)}
  .finder--top .sugg{min-width:300px;max-height:min(420px, 70vh)}
  .finder--top .sugg a{padding:10px 14px;font-size:22px}

  /* ходовые марки ценниками, как карточки мега-меню: число по ширине экрана (ниже) */
  .top-hot{display:none;align-items:center;gap:10px;flex:none;padding-right:12px}
  .hot-k{margin:0;font:500 10.5px/1.25 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
  .top-hot ul{display:flex;gap:6px;margin:0;padding:0;list-style:none}
  .hot{display:flex;flex-direction:column;justify-content:center;gap:5px;height:40px;padding:0 10px;border:1px solid var(--ink);
    background:rgba(233,230,224,.85);color:var(--ink);text-decoration:none;white-space:nowrap;transition:background .2s,box-shadow .2s}
  .hot b{font:800 17px/1 var(--disp);letter-spacing:.01em;text-transform:uppercase}
  .hot small{font:500 11px/1 var(--mono);color:var(--acc)}
  .hot:hover{background:#E5E2DC;box-shadow:inset 0 0 0 2px var(--ink)}
  .hot:focus-visible{outline:none;background:#E5E2DC;box-shadow:inset 0 0 0 3px var(--ink)}

  /* машина: кузов грузится блоками и число синеет, когда в ней есть марки; подпись - на широких экранах */
  .top-cart{position:relative;display:flex;align-items:center;gap:12px;flex:none;padding:0 16px;border:0;border-left:1px solid var(--ink);
    background:none;color:var(--ink);text-align:left;cursor:pointer;transition:background .2s,color .2s}
  .hc-i{position:relative;display:block;flex:none;width:26px;height:20px}
  .hc-i svg{display:block;width:26px;height:20px}
  .hc-load{fill:currentColor;transform:scaleY(0);transform-box:fill-box;transform-origin:50% 100%;transition:transform .4s var(--ease)}
  .top-cart.on .hc-load{transform:none}
  .hc-n{position:absolute;top:-9px;right:-12px;min-width:18px;height:18px;padding:0 4px;border:1px solid var(--ink);background:var(--bg-hi);
    color:var(--ink);font:500 10.5px/16px var(--mono);text-align:center}
  .top-cart.on .hc-n{border-color:var(--acc);background:var(--acc);color:var(--on-acc)}
  .hc-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hc-t b{display:block;overflow:hidden;font:800 18px/1 var(--disp);letter-spacing:.01em;text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis}
  .hc-sum{color:var(--acc)}
  .hc-t small{display:block;margin-top:5px;overflow:hidden;font:500 10.5px/1 var(--mono);letter-spacing:.03em;color:var(--mute);
    white-space:nowrap;text-overflow:ellipsis}
  .hc-go{display:none}
  .top-cart:hover,.top-cart:focus-visible{background:var(--ink);color:var(--bg-hi)}
  .top-cart:hover .hc-n,.top-cart:focus-visible .hc-n{border-color:var(--bg-hi)}
  .top-cart:hover .hc-sum,.top-cart:focus-visible .hc-sum{color:var(--bg-hi)}
  .top-cart:hover .hc-t small,.top-cart:focus-visible .hc-t small{color:#9d9a93}
  .top-cart:hover .hc-st,.top-cart:focus-visible .hc-st{display:none}
  .top-cart:hover .hc-go,.top-cart:focus-visible .hc-go{display:inline}
  .top-cart:focus-visible{outline:2px solid var(--bg-hi);outline-offset:-5px}
  .top-cart.bump .hc-i{animation:hc-bump .5s var(--ease)}

  /* телефон и почта одной ячейкой: номер крупно, адрес под ним (нажатие копирует - site.js, data-copy) */
  .top-call{flex-direction:column;border-left:1px solid var(--ink)}
  .top-tel{position:relative;isolation:isolate;overflow:hidden;flex:1;border-left:0}
  .top-mail{position:relative;isolation:isolate;overflow:hidden;align-items:center;gap:8px;flex:none;height:22px;padding:0 var(--cp);
    border:0;border-top:1px solid var(--line-2);background:none;color:var(--ink);font:500 11.5px/1 var(--mono);letter-spacing:.02em;
    text-transform:none;white-space:nowrap;cursor:pointer;transition:color .16s .06s}
  .top-mail svg{order:-1;flex:none;width:13px;height:13px}
  .top-mail [data-copy-t]{min-width:18ch;text-align:left}

  /* заявка: синяя плита; до 1440 px - в две строки «Заявка / в 1 клик», дальше в строку с обещанием перезвона */
  .top-cta{display:flex;align-items:center;gap:12px;flex:none;padding:0 var(--cp);border:0;background:var(--acc);color:var(--on-acc);
    text-align:left;cursor:pointer;transition:background .2s}
  .cta-t{display:flex;flex-direction:column;gap:5px}
  .cta-t b{display:block;font:800 var(--cs)/.9 var(--disp);letter-spacing:.01em;text-transform:uppercase;white-space:nowrap}
  .cta-t b span{display:block}
  .cta-t small{display:none;font:500 10.5px/1 var(--mono);letter-spacing:.02em;color:rgba(243,242,238,.82);white-space:nowrap}
  .top-cta svg{flex:none;width:18px;height:18px;transition:transform .3s var(--ease)}
  .top-cta:hover{background:var(--acc-2)}
  .top-cta:hover svg{transform:translateX(4px)}
  .top-cta:focus-visible{outline:2px solid var(--on-acc);outline-offset:-5px}

  /* мега-меню не трогаем; у верха страницы шапка выше на рейку - низ меню не уходит за край окна */
  .top .mega{max-height:calc(100vh - 100%);max-height:calc(100dvh - 100%);overflow-y:auto;overscroll-behavior:contain}
}
@media (min-width:1100px){
  .top{--lp:20px;--ls:25px;--nt:21px;--np:14px}
  .nav-cat-i{display:block}
  .nav-tool + .nav-tool{display:flex}
}
@media (min-width:1280px){
  .top{--ls:26px;--nt:22px;--np:16px;--ps:21px}
  .top-tel{width:auto;justify-content:flex-start;padding:0 var(--cp)}
  .top-tel svg{display:none}
  .top-tel span{display:inline;font:800 var(--ps)/1 var(--disp);letter-spacing:.01em}
  .top-mail{display:flex}
}
@media (min-width:1366px){
  .top{--cp:16px}
  .finder--top .finder-go{display:flex}
}
@media (min-width:1440px){
  .top{--cs:21px;--cp:18px}
  .cta-t b span{display:inline}
  .cta-t small{display:block}
}
@media (min-width:1600px){
  .hc-t{position:static;width:150px;height:auto;overflow:visible;clip:auto}
  .hc-n{display:none}
}
/* ходовые: по одной на ступень ширины, поиск забирает остаток (не уже ~270 px) */
@media (min-width:1760px){
  .top-hot{display:flex}
  .top-hot li:nth-child(n+2){display:none}
}
@media (min-width:1920px){
  .top{--lp:var(--pad);--ls:28px;--nt:23px;--np:18px;--cs:22px;--cp:20px;--ps:23px}
  .nav-cat small span{display:inline}
  .top-hot li:nth-child(2){display:block}
}
@media (min-width:2048px){
  .top-hot li:nth-child(3){display:block}
}
@media (min-width:2200px){
  .top-hot li:nth-child(4){display:block}
}
@media (min-width:2400px){
  .top{--ls:30px;--nt:24px;--np:22px;--cs:23px;--cp:24px;--ps:24px}
  .top-hot li:nth-child(5){display:block}
}
@media (min-width:2560px){
  .top-hot li:nth-child(n+6){display:block}
  .top-hot li:nth-child(n+8){display:none}
}
@keyframes hc-bump{30%{transform:translateY(-4px)}65%{transform:translateY(1px)}}
@media (prefers-reduced-motion:reduce){
  .top,.top-rail *,.top-rail *::before,.top-rail *::after,.top-bar > :not(.nav),.top-bar > :not(.nav) *,.top-bar > :not(.nav) *::before,
  .top-bar > :not(.nav) *::after,.nav-cat,.nav-cat *,.nav-tool,.nav-tool::before,.nav-tool::after{animation:none!important;transition:none!important}
}

/* мега-меню каталога (десктоп): поиск; разделы по задачам — карточки с чертежом, числом марок и ценой «от» на общей
   сетке (группы блоками с тёмной шапкой, без пустых ячеек); внизу ходовые марки, условия и «Весь каталог» */
.mega{position:absolute;left:0;right:0;top:100%;z-index:31;border-top:1px solid var(--ink);border-bottom:2px solid var(--ink);
  background-color:var(--bg-hi);background-image:var(--grain),var(--grain-lt);background-size:220px 220px,260px 260px;
  box-shadow:0 30px 60px -28px rgba(18,18,17,.6);animation:mega-in .3s var(--ease)}
.mega[hidden],.mega-scrim[hidden]{display:none}
@keyframes mega-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.mega-scrim{position:fixed;inset:0;z-index:25;background:rgba(18,18,17,.45);animation:rise .25s var(--ease)}
.mega-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:24px;align-items:center;padding:20px var(--pad)}
.mega-t{margin:0;font:900 48px/.84 var(--disp);text-transform:uppercase}
.mega-t small{display:block;margin-top:9px;font:500 11px/1.3 var(--mono);letter-spacing:.06em;color:var(--mute)}
.finder--mega .finder-field{height:56px}
.finder--mega .finder-field input{font-size:26px}
.mega-grid{display:grid;grid-template-columns:repeat(var(--mc, 7), minmax(0, 1fr));margin:0 var(--pad);border-top:1px solid var(--ink);border-left:1px solid var(--ink)}
.mg{grid-column:span var(--span, 1);display:grid;grid-template-columns:subgrid;grid-template-rows:auto 1fr;column-gap:0;
  border-right:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.mg-h{grid-column:1 / -1;display:flex;align-items:baseline;gap:10px;margin:0;padding:9px 12px 8px;background:var(--ink);color:var(--bg-hi);
  white-space:nowrap;overflow:hidden}
.mg-h i{font:500 10.5px/1 var(--mono);font-style:normal;color:#9d9a93}
.mg-h b{font:800 19px/1 var(--disp);letter-spacing:.01em;text-transform:uppercase}
.mg--1 .mg-h span{display:none}
.mg-h span{min-width:0;overflow:hidden;text-overflow:ellipsis;font:500 10.5px/1 var(--mono);letter-spacing:.03em;color:#9d9a93}
.mc{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0;padding:12px;border-left:1px solid var(--line);
  text-decoration:none;transition:background .2s,box-shadow .2s}
.mg-h + .mc{border-left:0}
.mc-d{display:flex;align-items:center;justify-content:center;height:80px;margin-bottom:4px}
.mc-d .drawing{width:auto;max-width:100%;max-height:74px;margin:0;transition:transform .4s var(--ease)}
.mc-n{font:800 21px/.95 var(--disp);text-transform:uppercase}
.mc-m{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 8px;margin-top:auto;
  font:500 10.5px/1.2 var(--mono);letter-spacing:.04em;color:var(--mute)}
.mc-m b{font:600 11.5px/1.2 var(--mono);letter-spacing:0;color:var(--acc);white-space:nowrap}
.mc:hover,.mc:focus-visible{z-index:1;background:#E5E2DC;box-shadow:inset 0 0 0 2px var(--ink)}
.mc:hover .mc-d .drawing,.mc:focus-visible .mc-d .drawing{transform:translateY(-3px) scale(1.04)}
.mega-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:14px var(--pad)}
.mega-fl{font:500 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.mega-foot .popular{margin:0}
.mega-note{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0 0 0 auto;font:500 11px/1.3 var(--mono);letter-spacing:.03em;color:var(--mute)}
.mega-note span{display:inline-flex;align-items:center;gap:7px}
.mega-note span::before{content:"";width:6px;height:6px;background:var(--acc)}
.mega-all{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 16px;border:1px solid var(--ink);
  font:800 22px/1 var(--disp);text-transform:uppercase;text-decoration:none;transition:background .2s,color .2s}
.mega-all svg{width:20px;height:20px;transition:transform .3s var(--ease)}
.mega-all:hover{background:var(--ink);color:var(--bg-hi)}
.mega-all:hover svg{transform:translateX(4px)}
@media (max-width:1199px){
  .mc{padding:10px}
  .mc-d{height:60px}
  .mc-d .drawing{max-height:54px}
  .mc-n{font-size:18px}
  .mg-h span,.mega-note{display:none}
}

/* меню (мобильный): поиск, каталог по задачам, страницы, связь; снизу место под dock */
.menu{position:fixed;inset:var(--hdr) 0 0 0;z-index:29;display:flex;flex-direction:column;padding:14px var(--pad) calc(112px + env(safe-area-inset-bottom));
  background-color:var(--bg);background-image:var(--grain),var(--grain-lt),var(--mottle);background-size:220px 220px,260px 260px,900px 900px;overflow:auto}
.menu[hidden]{display:none!important}
.finder--menu .finder-field{height:56px}
.finder--menu .finder-field input{font-size:24px;padding:0 12px}
.finder--menu .finder-go{padding:0 14px}
.menu-cat{margin-top:6px}
.menu-g{display:flex;gap:8px;margin:20px 0 6px;font:500 10.5px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.menu-g i{font-style:normal;color:var(--ink)}
.menu-cat ul{margin:0;padding:0;list-style:none;border-top:1px solid var(--ink)}
.menu-cat li a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:11px 0 9px;border-bottom:1px solid var(--line);
  font:900 30px/.9 var(--disp);text-transform:uppercase;text-decoration:none}
.menu-cat li a small{font:500 11px/1 var(--mono);color:var(--mute)}
.menu-all{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px;padding:15px 16px 13px;background:var(--ink);color:var(--bg-hi);
  font:800 22px/1 var(--disp);text-transform:uppercase;text-decoration:none}
.menu-all small{font:500 14px/1 var(--mono)}
.menu-nav{margin-top:22px;border-top:1px solid var(--ink)}
.menu-nav a{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0 10px;border-bottom:1px solid var(--line);
  font:900 34px/.88 var(--disp);text-transform:uppercase;text-decoration:none}
.menu-nav a small{font:500 11px/1 var(--mono);letter-spacing:.05em;color:var(--mute)}
.menu-tel{display:block;margin-top:24px;font:900 40px/.9 var(--disp);text-decoration:none}
.menu-meta{margin:10px 0 0;font:500 11px/1.5 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}
.menu-msg{display:flex;gap:20px;margin:14px 0 0;font:500 13px/1 var(--mono)}
.menu-msg a{text-underline-offset:3px}
@media (min-width:900px){.menu{display:none!important}}

/* ---------- первый экран карточки ---------- */
.hero{position:relative;padding:0 var(--pad)}
.hero-top{display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:38px;
  font:400 11px/1.3 var(--mono);letter-spacing:.03em;text-transform:uppercase;color:var(--mute)}
.crumbs{margin:0;padding:6px 0;list-style:none;display:flex;flex-wrap:wrap;gap:0 6px}
.crumbs a{text-decoration:none;color:var(--mute)}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--line-2)}
.crumbs [aria-current]{color:var(--ink)}
.gost{display:none;white-space:nowrap;color:var(--ink)}

/* гигантская марка: кегль по числу знаков (--n1 — в две строки, --n2 — в строку) */
.mark{--n1:6;--n2:10;--m:min(calc((100vw - 2 * var(--pad)) / (var(--n1) * .41)), 210px);
  margin:2px 0 0;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"a sub" "b b";
  font:900 var(--m)/.79 var(--disp);text-transform:uppercase;letter-spacing:-.005em;color:var(--ink);overflow-wrap:anywhere}
.mark-a,.mark-b{-webkit-mask-image:var(--stencil);mask-image:var(--stencil);-webkit-mask-size:360px 360px;mask-size:360px 360px}
.mark-a{grid-area:a;display:block;animation:cast .9s var(--ease) .05s both}
.mark-b{grid-area:b;display:block;animation:cast .9s var(--ease) .18s both;margin-top:.02em}
.mark-sub{grid-area:sub;align-self:end;justify-self:start;display:flex;flex-direction:column;gap:6px;
  padding:0 0 .1em 9px;font:500 14px/1.15 var(--text);letter-spacing:0;text-transform:none;animation:rise .7s var(--ease) .5s both}
.mark-sub small{font:500 10.5px/1.2 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
.mark-sub .em{display:block;font:800 30px/.6 var(--disp);margin-bottom:6px}
.mark--solo{grid-template-areas:"a" "sub";grid-template-columns:1fr}
.mark--solo .mark-sub{padding:12px 0 0}
.dimline{display:none}
.hero-meta{display:none}

/* лента покупки */
.band{display:flex;flex-direction:column;margin:12px calc(-1 * var(--pad)) 0;border-top:1px solid var(--ink)}
.col{display:contents}
.blk{padding:16px var(--pad);border-bottom:1px solid var(--line);animation:rise .7s var(--ease) both}
.blk-p{padding-top:14px;padding-bottom:12px;animation-delay:.35s}
.blk-v{animation-delay:.42s;padding-top:12px;padding-bottom:12px}
.blk-q{animation-delay:.48s;padding-top:12px}
.blk-b{display:none}
@media (max-width:899px){
  .card{display:flex;flex-direction:column}
  .card .hero,.card .band{display:contents}
  /* размеры и масса сразу под маркой (27.10): на телефоне их не было до чертежа внизу */
  .hero-meta{order:2;display:flex;flex-wrap:wrap;gap:2px 14px;padding:8px var(--pad) 0;font:500 12px/1.4 var(--mono);letter-spacing:.02em;color:var(--ink-2)}
  .hero-top{order:1;padding:0 var(--pad)}
  .mark{order:2;padding:0 var(--pad)}
  .blk-p{order:3;margin-top:12px;border-top:1px solid var(--ink)}
  .blk-v{order:4}.blk-q{order:5}.blk-d{order:6}.blk-t{order:7}
  .sec-nb{order:8}
  .card > .mv-sec{order:7}
  .card > .pd,.sec-cw{order:9}
  .blk-a{order:9;border-top:1px solid var(--ink)}
  .sec-pl{order:10}
  .sec.sec-nb,.sec.sec-cw{padding-top:32px}
  .sec-nb .sec-h{margin-bottom:18px}
  .blk-t .trust li{padding:8px 0}
}

/* цена */
.price-row{display:flex;align-items:flex-end;gap:14px}
.price{margin:0;display:flex;align-items:baseline;gap:.12em;font:900 74px/.8 var(--disp);color:var(--acc);
  letter-spacing:-.005em;font-variant-numeric:tabular-nums;white-space:nowrap}
.price .rub{font-size:.62em;font-weight:800}
.price-ask{margin:0;font:900 52px/.86 var(--disp);color:var(--acc);text-transform:uppercase;letter-spacing:-.005em}
.price-unit{margin:0;padding-bottom:3px;font:500 11px/1.35 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.price-unit span{display:block}
.trust-line{margin:10px 0 0;font:400 11px/1.5 var(--mono);letter-spacing:.01em;color:var(--mute)}
/* «КП на эту позицию» (27.10): лист для руководителя, inc/kp.php */
.kp-link{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font:500 12px/1.3 var(--mono);letter-spacing:.01em;color:var(--ink);text-underline-offset:3px}
.kp-link svg{flex:none;width:15px;height:17px}
.kp-link small{font:inherit;color:var(--mute)}
.kp-link:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.kp-link--ved{display:flex;margin-top:6px;color:var(--ink-2)}
.trust-line b{font-weight:500;color:var(--ink)}
.trust-line .lock{width:10px;height:12px;margin-right:8px;vertical-align:-1px;color:var(--ink)}
.lbl-d{display:none}
.p-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.p-head .lbl{margin:0}
.badges{display:flex;gap:6px;margin:0;padding:0;list-style:none}
.badge{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 9px;border:1px solid var(--ink);font:500 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.badge-on{background:var(--ink);color:var(--bg-hi)}
.badge-on .live{width:6px;height:6px;margin:0;background:var(--bg-hi);vertical-align:0}
.live{display:inline-block;width:7px;height:7px;margin-right:7px;background:var(--ink);vertical-align:1px;animation:pulse 2.4s ease-in-out infinite}
.tick{animation:tick .45s var(--ease)}

/* исполнение */
.variants{border:0;margin:0;padding:0;min-width:0}
.var-list{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--ink)}
.var-list--2{grid-template-columns:repeat(2,1fr)}
.var-list--list{grid-template-columns:1fr}
.var{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:6px;min-height:56px;
  padding:8px 10px;cursor:pointer;transition:background .2s,color .2s}
.var+.var{border-left:1px solid var(--ink)}
.var-list--list .var{flex-direction:row;align-items:center;min-height:46px}
.var-list--list .var+.var{border-left:0;border-top:1px solid var(--ink)}
.var input{position:absolute;opacity:0;pointer-events:none}
.var-name{font:600 13px/1.15 var(--text);overflow-wrap:anywhere}
.var-list--list .var-name{flex:1}
.var-price{font:500 12px/1 var(--mono);letter-spacing:.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.var:hover{background:var(--bg-hi)}
.var:has(input:checked){background:var(--ink);color:var(--bg-hi)}
.var:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.var-box{display:none}

/* количество */
.qty-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.stepper{display:flex;border:1px solid var(--ink);height:50px;flex:none}
.stepper button{width:46px;border:0;background:none;font:400 24px/1 var(--mono);transition:background .2s}
.stepper button:hover{background:var(--ink);color:var(--bg-hi)}
.stepper label{display:flex;align-items:center;border-left:1px solid var(--ink);border-right:1px solid var(--ink)}
.stepper input{width:58px;height:100%;border:0;background:none;text-align:right;padding:0 2px 0 0;
  font:800 30px/1 var(--disp);font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.stepper input::-webkit-inner-spin-button,.stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.stepper input:focus{outline:none}
.stepper .unit{padding:0 10px 0 4px;font:500 12px/1 var(--mono);color:var(--mute)}
.total{text-align:right;min-width:0}
.total-sum{display:block;font:800 34px/.9 var(--disp);font-variant-numeric:tabular-nums;white-space:nowrap}
.total-sum.ask{font:500 11px/1.3 var(--mono);letter-spacing:.04em;text-transform:uppercase;white-space:normal;color:var(--ink-2)}
.total-note{display:block;margin-top:4px;font:400 11px/1.2 var(--mono);letter-spacing:.03em;color:var(--mute)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
/* чип — кнопка, а не надпись: заливка, сплошная рамка, высота под палец (было: тонкая рамка на бетоне, сливалось) */
.chip{display:inline-flex;align-items:center;min-height:34px;border:1px solid var(--ink);background:rgba(233,230,224,.85);padding:8px 11px;
  font:500 12px/1 var(--mono);letter-spacing:.02em;text-decoration:none;transition:background .2s,color .2s}
.popular .chip{min-height:38px;padding:9px 12px 8px;font:800 18px/1 var(--disp);letter-spacing:.01em;text-transform:uppercase}
.chip:hover{background:var(--ink);color:var(--bg-hi);border-color:var(--ink)}

/* кнопка покупки — плоская, без фейкового объёма */
.buy{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;height:68px;padding:0 20px;
  border:0;background:var(--acc);color:var(--on-acc);text-align:left;text-decoration:none;transition:background .25s}
a.buy{color:var(--on-acc)}
.buy:hover{background:var(--acc-2)}
.buy-t{font:800 29px/1 var(--disp);letter-spacing:.01em;text-transform:uppercase;white-space:nowrap}
.buy-s{display:flex;align-items:center;gap:12px;font:500 12px/1 var(--mono);letter-spacing:.02em;white-space:nowrap;opacity:.92;font-variant-numeric:tabular-nums}
.buy-s svg{width:22px;height:22px;transition:transform .3s var(--ease)}
.buy:hover .buy-s svg{transform:translateX(4px)}
.buy:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.buy[disabled]{opacity:.7;cursor:progress}
.alt-links{display:flex;flex-wrap:wrap;gap:6px 14px;margin:12px 0 0;font:400 12px/1.3 var(--mono);color:var(--mute)}
.alt-links a{color:var(--ink);text-underline-offset:3px}

/* доставка */
.field{display:flex;border:1px solid var(--ink);height:50px;background:rgba(215,212,206,.55)}
.field select,.field input{flex:1;min-width:0;border:0;background:none;padding:0 14px;font:500 15px/1 var(--text)}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23121211' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center}
.field select:focus,.field input:focus{outline:none}
.field:focus-within{outline:2px solid var(--ink);outline-offset:2px}
.example{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin:10px 0 0;font:400 13px/1.35 var(--text);color:var(--ink-2)}
.example .tag{padding:3px 6px 2px;border:1px dashed var(--line-2);font:500 10px/1.2 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--mute);align-self:start;white-space:nowrap}

/* чертёж и цифры */
.drawing{display:block;width:100%;height:auto;max-height:290px;margin:4px 0 0;overflow:visible}
.drawing .ln{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round}
.drawing ellipse.ln{fill-opacity:.85}
.drawing .dim{fill:none;stroke:var(--ink);stroke-width:.9}
.drawing .ext{fill:none;stroke:var(--ink);stroke-width:.6;stroke-dasharray:3 3;opacity:.7}
.drawing .hid{fill:none;stroke:var(--ink);stroke-width:.8;stroke-dasharray:4 3;opacity:.55}
.drawing text{font:500 17px var(--mono);fill:var(--ink);letter-spacing:.02em}
.drawing .draw-in{stroke-dasharray:1;stroke-dashoffset:1;animation:pen 1.8s var(--ease) .4s forwards}
.no-draw{display:grid;place-items:center;min-height:150px;border:1px dashed var(--line-2);font:500 11px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--mute);text-align:center;padding:16px}
.dl-draw{display:inline-flex;align-items:center;gap:8px;margin:2px 0 12px;font:500 11px/1.3 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--mute);text-decoration:none}
.dl-draw:hover,.dl-draw:focus-visible{color:var(--ink);text-decoration:underline}
.specs{display:grid;grid-template-columns:1fr 1fr;margin:14px 0 0;border-top:1px solid var(--ink)}
.spec{padding:12px 12px 12px 0;border-bottom:1px solid var(--line)}
.spec:nth-child(2n){padding-left:12px;border-left:1px solid var(--line)}
.spec dt{font:500 10.5px/1.25 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}
.spec dd{margin:6px 0 0;font:800 40px/.85 var(--disp);font-variant-numeric:tabular-nums}
.spec dd small{font:600 .5em/1 var(--disp);margin-left:.12em}
.spec-wide{grid-column:1/-1;padding-left:0!important;border-left:0!important}
.load{display:flex;flex-wrap:wrap;gap:2px;margin-top:9px;max-width:140px}
.load i{display:block;width:12px;height:6px;background:var(--ink)}

/* доверие */
.trust{margin:0;padding:0;list-style:none;display:grid;gap:0}
.trust li{display:grid;grid-template-columns:28px 1fr;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line);font:500 14px/1.3 var(--text)}
.trust li:last-child{border-bottom:0}
.trust li span{font:500 10.5px/1 var(--mono);color:var(--mute)}

/* ---------- секции ---------- */
.sec{padding:44px var(--pad) 40px;border-top:1px solid var(--ink)}
.sec-h{margin:0 0 28px;font:900 clamp(46px, 9vw, 120px)/.82 var(--disp);text-transform:uppercase;letter-spacing:-.005em}
.sec-h small{display:block;margin-top:14px;font:500 11px/1.4 var(--mono);letter-spacing:.06em;color:var(--mute);text-transform:uppercase}
.slab{background-color:var(--ink);color:var(--bg-hi);background-image:var(--grain-lt),var(--mottle);background-size:260px 260px,900px 900px}
.slab .sec-h small{color:#8f8c86}
/* три поверхности секций — бетон (по умолчанию), лист в клетку, плита: соседние секции не сливаются в простыню */
.sec--paper{background-color:#E3E0D9;
  background-image:linear-gradient(rgba(18,18,17,.075) 1px, transparent 1px),linear-gradient(90deg, rgba(18,18,17,.075) 1px, transparent 1px),
    linear-gradient(rgba(18,18,17,.035) 1px, transparent 1px),linear-gradient(90deg, rgba(18,18,17,.035) 1px, transparent 1px),var(--grain);
  background-size:100px 100px,100px 100px,20px 20px,20px 20px,220px 220px}
/* шапка секции: заголовок, номер главы контуром, поясняющая фраза обычным текстом */
.sec-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.sec-top .sec-h{margin-bottom:0;min-width:0}
.sec-no{flex:none;font:900 clamp(54px, 8.4vw, 136px)/.8 var(--disp);letter-spacing:-.01em;color:var(--line-2)}
@supports (-webkit-text-stroke:1px black){
  .sec-no{color:transparent;-webkit-text-stroke:1.5px var(--ink)}
  .slab .sec-no{-webkit-text-stroke-color:rgba(215,212,206,.75)}
}
.sec-lead{max-width:700px;margin:16px 0 30px;font:400 17px/1.45 var(--text);color:var(--ink-2)}
.slab .sec-lead{color:#b5b2ab}
.sec--flush > .sec-top{padding:0 var(--pad)}
.sec--flush > .sec-lead{margin-left:var(--pad);margin-right:var(--pad)}
@media (min-width:900px){
  .sec-lead{margin:22px 0 46px;font-size:20px}
}
.nb{margin:0;padding:0;list-style:none;border-top:1px solid rgba(215,212,206,.35)}
.nb li{border-bottom:1px solid rgba(215,212,206,.2)}
.nb a{display:grid;grid-template-columns:1fr auto;grid-template-areas:"m p" "s s";gap:9px 16px;align-items:end;padding:13px 0;text-decoration:none;transition:background .2s,padding .3s var(--ease)}
.nb a:hover{background:rgba(215,212,206,.06);padding-left:10px;padding-right:10px}
.nb-m{grid-area:m;font:900 36px/.85 var(--disp);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nb-p{grid-area:p;font:800 30px/.85 var(--disp);font-variant-numeric:tabular-nums;white-space:nowrap}
.nb-p.ask{font:500 11px/1.2 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:#9d9a93}
.nb-s{grid-area:s;position:relative;height:20px;border-left:1px solid rgba(215,212,206,.35)}
.nb-s i{position:absolute;left:0;top:50%;transform:translateY(-50%);display:block;height:var(--w);width:var(--l);
  border:1px solid var(--bg-hi);background:repeating-linear-gradient(135deg,transparent 0 5px,rgba(215,212,206,.28) 5px 6px)}
.nb .here a{cursor:default}
.nb .here .nb-m::after{content:"эта марка";margin-left:14px;vertical-align:.55em;font:500 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#9d9a93}
.nb .here .nb-s i{background:var(--bg-hi)}
.pledge{display:grid;gap:0;margin:0;padding:0;list-style:none}
.pledge li{display:grid;grid-template-columns:44px 1fr;padding:18px 0;border-top:1px solid var(--line);
  font:800 clamp(30px, 5.2vw, 64px)/.92 var(--disp);text-transform:uppercase}
.pledge li span{font:500 11px/1 var(--mono);color:var(--mute);padding-top:.5em}
.slab .pledge li{border-top-color:rgba(215,212,206,.2)}
.slab .pledge li span{color:#8f8c86}
.cta-row{display:grid;gap:10px;margin-top:28px;max-width:560px}

/* ---------- раздел / посадочная ---------- */
.list-head{padding:0 var(--pad)}
/* .5 — ширина заглавной кириллицы Sofia 900 с запасом (замер 06.10: 0,445-0,491 em на букву; было .43 — «ДОСТАВК/А») */
.title{--tn:8;margin:4px 0 0;font:900 min(calc((100vw - 2 * var(--pad)) / (var(--tn) * .5)), 190px)/.8 var(--disp);
  text-transform:uppercase;letter-spacing:-.005em;overflow-wrap:anywhere;
  -webkit-mask-image:var(--stencil);mask-image:var(--stencil);-webkit-mask-size:360px 360px;mask-size:360px 360px;animation:cast .9s var(--ease) .05s both}
.title-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin:16px 0 0;font:500 12px/1.4 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);animation:rise .7s var(--ease) .35s both}
.title-meta b{font-weight:500;color:var(--ink)}
.subnav{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 0;padding:0;list-style:none;animation:rise .7s var(--ease) .45s both}
.subnav a{display:inline-flex;align-items:baseline;gap:8px;padding:9px 12px;border:1px solid var(--line-2);font:500 12px/1 var(--mono);text-decoration:none;transition:background .2s,color .2s}
.subnav a span{color:var(--mute)}
.subnav a:hover,.subnav a[aria-current]{background:var(--ink);color:var(--bg-hi);border-color:var(--ink)}
.subnav a:hover span,.subnav a[aria-current] span{color:#9d9a93}
.rows-head{display:none}
.rows{margin:24px 0 0;padding:0;list-style:none;border-top:1px solid var(--ink)}
.row{display:grid;grid-template-columns:1fr auto;border-bottom:1px solid var(--line)}
.row-link{display:grid;grid-template-columns:1fr auto;grid-template-areas:"m p" "s s" "d d";gap:8px 14px;align-items:end;
  padding:14px var(--pad);text-decoration:none;min-width:0;transition:background .2s}
.row-link:hover{background:var(--bg-hi)}
.row-m{grid-area:m;font:900 34px/.85 var(--disp);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.row-p{grid-area:p;font:800 26px/.85 var(--disp);color:var(--acc);white-space:nowrap;font-variant-numeric:tabular-nums}
.row-p.ask{font:500 10.5px/1.2 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--acc)}
.row-s{grid-area:s;position:relative;height:18px;border-left:1px solid var(--line-2)}
.row-s i{position:absolute;left:0;top:50%;transform:translateY(-50%);display:block;height:var(--w);width:var(--l);min-height:3px;
  border:1px solid var(--ink);background:repeating-linear-gradient(135deg,transparent 0 5px,rgba(18,18,17,.2) 5px 6px);transition:background .2s}
.row-s i.round{border-radius:50%;width:auto;aspect-ratio:1}
.row-link:hover .row-s i{background:var(--ink)}
.row-d{grid-area:d;font:400 12px/1.3 var(--mono);color:var(--ink-2);letter-spacing:.02em}
.row-buy{border:0;border-left:1px solid var(--line);background:none;padding:0 12px;min-width:72px;
  font:500 11px/1.15 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--acc);transition:background .2s,color .2s}
.row-buy:hover{background:var(--acc);color:var(--on-acc)}
.pager{display:flex;flex-wrap:wrap;gap:6px;margin:28px 0 0;padding:0 var(--pad)}
.pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 12px;border:1px solid var(--line-2);font:500 13px/1 var(--mono);text-decoration:none}
.pager .current{background:var(--ink);color:var(--bg-hi);border-color:var(--ink)}
.pager a.page-numbers:hover{background:var(--ink);color:var(--bg-hi)}
.list-end{padding-bottom:12px}
@media (min-width:900px){
  /* те же колонки, что у строки: ссылка (марка | силуэт | габарит | цена + её правый отступ 24px) и кнопка 130px */
  .rows-head{display:grid;grid-template-columns:minmax(220px, 300px) 1fr 230px 150px 24px 130px;margin:28px 0 0;padding:0 0 8px var(--pad);
    font:500 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
  .rows-head span:nth-child(4){text-align:right}
  .rows-head span:last-child{grid-column:6}
  .rows{margin-top:0}
  .row{grid-template-columns:1fr 130px}
  .row-link{grid-template-columns:minmax(220px, 300px) 1fr 230px 150px;grid-template-areas:"m s d p";align-items:center;padding:14px 24px 14px var(--pad)}
  .row-m{font-size:44px}
  .row-p{text-align:right}
  .row-s{height:28px;margin-right:24px}
  .row-buy{padding:0 18px}
}

/* ---------- раздел каталога (06.10 v2): первый экран с чертежом, вкладки подразделов, строки, панель чертежа ---------- */
.lh{padding:0 var(--pad)}
.lh-grid{display:grid;grid-template-columns:minmax(0, 1fr);gap:18px 40px;align-items:end}
.lh-title{margin:2px 0 0}
.lh-lead{margin:16px 0 0;max-width:620px;font:400 17px/1.45 var(--text);color:var(--ink-2);animation:rise .7s var(--ease) .35s both}
.lh-fig{margin:0;min-width:0;animation:rise .7s var(--ease) .3s both}
.lh-fig .drawing{max-height:220px;margin:0 auto}
.lh-fig figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-top:10px;padding-top:9px;border-top:1px solid var(--line);
  font:500 11px/1.4 var(--mono);letter-spacing:.02em;color:var(--mute)}
.lh-fig figcaption b{font:900 26px/.9 var(--disp);text-transform:uppercase;color:var(--ink)}
.lh .fr-bar{margin-top:22px}
/* телефон: диапазоны «0,09-1,96 т» шире трети экрана — кегль от ширины, перенос по дефису */
@media (max-width:899px){.lh .fr-fact b{font-size:clamp(19px, 5.6vw, 30px);white-space:normal;overflow-wrap:anywhere}}
@media (min-width:900px){
  .lh-grid{grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr);gap:24px 56px}
  .lh-title{font-size:min(calc((100vw - 2 * var(--pad)) * .52 / (var(--tn) * .5)), 168px)}
  .lh-lead{font-size:19px}
  .lh-fig .drawing{max-height:300px}
  .lh-grid--solo{grid-template-columns:minmax(0, 1fr)}
  .lh-grid--solo .lh-title{font-size:min(calc((100vw - 2 * var(--pad)) / (var(--tn) * .5)), 190px)}
}

/* вкладки подразделов: на телефоне листаются вбок, на десктопе переносятся */
.tabs{margin:0 calc(-1 * var(--pad));border-top:1px solid var(--ink);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs ul{display:flex;margin:0;padding:0;list-style:none;min-width:max-content}
.tabs a{display:flex;align-items:baseline;gap:9px;padding:15px 18px 12px;border-right:1px solid var(--line);font:800 20px/1 var(--disp);
  text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
.tabs li:first-child a{padding-left:var(--pad)}
.tabs a span{font:500 11px/1 var(--mono);color:var(--mute)}
.tabs a:hover,.tabs a[aria-current]{background:var(--ink);color:var(--bg-hi)}
.tabs a:hover span,.tabs a[aria-current] span{color:#9d9a93}
@media (min-width:900px){
  .tabs{overflow:visible}
  .tabs ul{flex-wrap:wrap;min-width:0}
  .tabs li{border-bottom:1px solid var(--line);margin-bottom:-1px}
  .tabs a{font-size:22px;padding:16px 22px 13px}
}

/* список марок + липкая панель чертежа */
.lst{display:grid;grid-template-columns:minmax(0, 1fr);border-top:1px solid var(--ink)}
.lst-main{min-width:0}
.it-head{display:none}
.its{margin:0;padding:0;list-style:none}
.it{display:grid;grid-template-columns:minmax(0, 1fr) 52px 84px;border-bottom:1px solid var(--line);transition:background .2s}
.it:hover,.it.pv-on{background:var(--bg-hi)}
.it-a{display:grid;grid-template-columns:minmax(0, 1fr) 92px;grid-template-areas:"m d" "s d" "p d";gap:6px 12px;align-items:center;min-width:0;
  padding:12px 12px 12px var(--pad);text-decoration:none}
.it-m{grid-area:m;min-width:0;font:900 32px/.88 var(--disp);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.it-d{grid-area:d;display:flex;align-items:center;justify-content:center;height:58px;min-width:0}
.it-d .drawing{width:auto;max-width:100%;max-height:58px;margin:0}
.it-d .draw-in{animation:none;stroke-dashoffset:0}
.it-s{grid-area:s;display:flex;flex-wrap:wrap;gap:2px 12px;min-width:0;font:400 12px/1.35 var(--mono);color:var(--ink-2)}
.it-s span:empty{display:none}
.it-p{grid-area:p;font:800 24px/1 var(--disp);color:var(--acc);font-variant-numeric:tabular-nums;white-space:nowrap}
.it-p.ask{font:500 11px/1.2 var(--mono);letter-spacing:.05em;text-transform:uppercase}
.it-buy{display:flex;align-items:center;justify-content:center;border:0;background:var(--acc);color:var(--on-acc);
  box-shadow:inset 0 -1px 0 rgba(243,242,238,.22);font:800 19px/1 var(--disp);letter-spacing:.01em;text-transform:uppercase;transition:background .2s}
.it-buy:hover{background:var(--acc-2)}
.it-buy:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
.lpv[hidden]{display:none!important}
.it--here{background:var(--bg-hi);box-shadow:inset 4px 0 0 var(--ink)}
.it-here{display:table;margin:0 0 6px;padding:3px 6px;background:var(--ink);color:var(--bg-hi);font:500 9.5px/1 var(--mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase}
.sec-nb .lst{margin-top:6px}
/* «С этим берут» на карточке: группы смежных разделов, заголовок группы и ссылка на весь раздел */
.sec-cw .lst{margin-top:6px}
.cw-g{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 18px;padding:22px var(--pad) 10px;border-bottom:1px solid var(--ink)}
.cw-h{margin:0;font:800 22px/1 var(--disp);text-transform:uppercase}
.cw-all{font:500 11px/1.3 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--mute);text-decoration:none}
.cw-all:hover,.cw-all:focus-visible{color:var(--ink);text-decoration:underline}
.pager{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;padding:24px var(--pad) 8px}
.pager-k{margin-right:14px;font:500 11px/1.3 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}
.buyhow .pledge{margin-top:8px}
@media (min-width:900px){
  /* колонки ограничены: на широком экране свободное место уходит перед ценой, цена — вплотную к «1 клик» */
  .it-head{display:grid;grid-template-columns:minmax(150px, 320px) minmax(90px, 200px) minmax(150px, 250px) 70px 96px minmax(0, 1fr) 128px 174px;column-gap:16px;
    align-items:end;padding:12px 0 10px var(--pad);border-bottom:1px solid var(--ink);
    font:500 10.5px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
  .it-head small{display:block;margin-top:3px;letter-spacing:.02em;text-transform:none}
  .it-head span:nth-child(7){text-align:right}
  .it{grid-template-columns:minmax(0, 1fr) 64px 110px}
  .it-a{grid-template-columns:minmax(150px, 320px) minmax(90px, 200px) minmax(150px, 250px) 70px 96px minmax(0, 1fr) 128px;grid-template-areas:"m d x y z . p";
    column-gap:16px;min-height:74px;padding:8px 16px 8px var(--pad)}
  .it-m{font-size:40px}
  .it-d{justify-content:flex-start}
  .it-s{display:contents}
  .it-s span{font:400 13px/1.3 var(--mono);color:var(--ink-2)}
  .it-s span:empty{display:block}
  .it-dims{grid-area:x}
  .it-mass{grid-area:y}
  .it-load{grid-area:z}
  .it-p{text-align:right;font-size:30px}
  .it-buy{font-size:23px}
}
@media (min-width:1360px){
  .lst{grid-template-columns:minmax(0, 1fr) clamp(380px, 28vw, 540px)}
  .lpv{position:sticky;top:var(--hdr);align-self:start;display:flex;flex-direction:column;gap:14px;max-height:calc(100vh - var(--hdr));overflow:auto;
    padding:20px var(--pad) 26px 28px;border-left:1px solid var(--ink);background:rgba(215,212,206,.5)}
}
.lpv .lbl{margin:0}
.lpv .lbl i{font-size:14px}
.lpv-d{display:grid;place-items:center;min-height:210px}
.lpv-d .drawing{max-height:290px;margin:0}
.lpv-d.empty::before{content:"Чертёж появится, когда известны все три размера";font:500 11px/1.4 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--mute);text-align:center}
.lpv-m{display:flex;flex-direction:column;gap:7px;margin:0}
.lpv-m b{font:900 58px/.84 var(--disp);text-transform:uppercase;overflow-wrap:anywhere}
.lpv-m span{font:500 11.5px/1.3 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
.lpv-specs{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));margin:0;border-top:1px solid var(--ink)}
.lpv-specs > div{min-width:0;padding:10px 10px 11px 0;border-bottom:1px solid var(--line)}
.lpv-specs > div:nth-child(2n){padding-left:12px;border-left:1px solid var(--line)}
.lpv-specs dt{font:500 10px/1.2 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}
.lpv-specs dd{margin:6px 0 0;font:800 25px/1 var(--disp);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.lpv-specs dd[data-pv-price]{color:var(--acc)}
.lpv-specs dd.ask{font:500 11px/1.25 var(--mono);letter-spacing:.05em;text-transform:uppercase}
.lpv-specs small{display:block;margin-top:5px;font:400 10.5px/1.2 var(--mono);color:var(--mute)}
.lpv .buy{height:62px}
.lpv-go{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;padding-bottom:3px;border-bottom:1px solid currentColor;
  font:500 12px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;text-decoration:none}
.lpv-go svg{width:18px;height:18px;transition:transform .3s var(--ease)}
.lpv-go:hover svg{transform:translateX(4px)}

/* ---------- корень каталога: сетка разделов ----------
   Плитка — один объект: наведение подсвечивает её целиком (общая область, закон Гештальта), а не только верхнюю ссылку.
   Чертёж в рамке одной высоты и «Смотреть N марок» внизу на одной линии — плитки сравниваются глазом.
   Подразделы — кнопки (заливка, рамка, 13 px, число марок), общее начало названий — подписью один раз. */
.cat-find{min-width:0;animation:rise .7s var(--ease) .4s both}
.cat-find .find-k{margin-top:16px}
.tiles{--cols:1;display:grid;grid-template-columns:repeat(var(--cols), minmax(0, 1fr));margin:0;padding:0;list-style:none;border-top:1px solid var(--ink)}
.tile{position:relative;display:flex;flex-direction:column;container-type:inline-size;border-bottom:1px solid var(--line);transition:background .25s,box-shadow .25s}
.tile:hover,.tile:focus-within{z-index:1;background:var(--bg-hi);box-shadow:inset 0 0 0 2px var(--ink)}
.tile-a{display:flex;flex-direction:column;gap:10px;padding:22px var(--pad) 10px;text-decoration:none}
/* кегль от ширины плитки: самое длинное слово («(безопалубочные)», 16 знаков) влезает в строку при любой сетке */
.tile-n{font:900 clamp(26px, calc((100cqi - 2 * var(--pad)) / 8.2), 52px)/.86 var(--disp);text-transform:uppercase}
.tile-c{font:500 11px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.tile-d{display:flex;align-items:center;justify-content:center;height:150px;margin-top:4px}
.tile-d .drawing{width:auto;max-width:100%;max-height:130px;margin:0;transition:transform .45s var(--ease)}
.tile:hover .tile-d .drawing{transform:translateY(-4px) scale(1.03)}
.tile .drawing .draw-in{animation-delay:.1s}
.tile-subs{padding:6px var(--pad) 18px}
.tile-k{margin:0 0 8px;font:500 10.5px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.tile-sub{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.tile-sub a{display:inline-flex;align-items:baseline;gap:7px;min-height:38px;padding:10px 12px 9px;border:1px solid var(--ink);
  background:#E9E6E0;font:600 13px/1.15 var(--text);text-decoration:none;transition:background .2s,color .2s}
.tile-sub a small{font:500 10.5px/1 var(--mono);color:var(--mute)}
.tile-sub a:hover,.tile-sub a:focus-visible{background:var(--ink);color:var(--bg-hi)}
.tile-sub a:hover small,.tile-sub a:focus-visible small{color:#9d9a93}
.tile-sub .tile-more{background:none;border-style:dashed;font:500 12px/1.15 var(--mono)}
.tile-go{display:flex;align-items:center;gap:14px;margin-top:auto;padding:14px var(--pad);
  border-top:1px solid var(--line);font:500 12px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;text-decoration:none;
  transition:background .25s,color .25s}
.tile-go span{margin-right:auto}
.tile-go b{font:600 13px/1 var(--mono);letter-spacing:0;text-transform:none;color:var(--acc);white-space:nowrap}
.tile-go svg{flex:none;width:20px;height:20px;transition:transform .3s var(--ease)}
.tile:hover .tile-go{background:var(--ink);color:var(--bg-hi)}
.tile:hover .tile-go b{color:#AEBFFF}
.tile:hover .tile-go svg{transform:translateX(5px)}
@media (min-width:600px){
  .tiles{--cols:2}
  .tile:nth-child(2n){border-left:1px solid var(--line)}
}
@media (min-width:1100px){
  .tiles{--cols:3}
  .tile:nth-child(2n){border-left:0}
  .tile:not(:nth-child(3n+1)){border-left:1px solid var(--line)}
}
@media (min-width:1800px){
  .tiles{--cols:4}
  .tile:not(:nth-child(3n+1)){border-left:0}
  .tile:not(:nth-child(4n+1)){border-left:1px solid var(--line)}
}

/* «Не нашли марку?» — последняя плитка: тёмная плита ровно на оставшиеся ячейки строки (14 разделов: 3 колонки —
   1 ячейка, 4 — 2, 2 — вся строка). Без mod() — на всю строку. Внутри лист спецификации на бетоне. */
.tile--nf{grid-column:1 / -1;color:var(--bg-hi);background-color:var(--ink);background-image:var(--grain-lt),var(--mottle);
  background-size:260px 260px,900px 900px;border-bottom:0}
@supports (grid-column:span mod(5, 3)){
  .tile--nf{grid-column:span calc(var(--cols) - mod(var(--n, 0), var(--cols)))}
}
.tile.tile--nf{border-left:0}
.tile.tile--nf:hover,.tile.tile--nf:focus-within{background-color:var(--ink);box-shadow:none}
.nf{display:grid;grid-template-columns:minmax(0, 1fr);grid-template-areas:"l" "s" "c";gap:28px;height:100%;padding:28px var(--pad) 28px}
.nf-l{grid-area:l;min-width:0}
.nf-k{display:flex;align-items:center;gap:10px;margin:0 0 14px;font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#9d9a93}
.nf-k::before{content:"";width:22px;height:1px;background:currentColor}
.nf-h{margin:0;font:900 clamp(44px, calc((100cqi - 2 * var(--pad)) / 5.6), 112px)/.84 var(--disp);text-transform:uppercase}
.nf-s{max-width:520px;margin:16px 0 0;font:400 15px/1.5 var(--text);color:#b5b2ab}
.nf-steps{margin:22px 0 0;padding:0;list-style:none;border-top:1px solid rgba(215,212,206,.22)}
.nf-steps li{display:grid;grid-template-columns:36px minmax(0, 1fr);align-items:baseline;padding:11px 0;border-bottom:1px solid rgba(215,212,206,.22);
  font:500 14.5px/1.35 var(--text)}
.nf-steps i{font:500 10.5px/1 var(--mono);font-style:normal;color:#9d9a93}
.nf-sheet{grid-area:s;display:flex;align-items:center;justify-content:center;min-width:0;padding:4px 6px}
.spec{width:100%;max-width:460px;padding:14px 16px 12px;color:var(--ink);background-color:#E8E5DF;
  background-image:var(--grain),linear-gradient(rgba(18,18,17,.055) 1px, transparent 1px),linear-gradient(90deg, rgba(18,18,17,.055) 1px, transparent 1px);
  background-size:220px 220px,12px 12px,12px 12px;transform:rotate(-1.6deg);transition:transform .5s var(--ease);
  box-shadow:12px 14px 0 -4px rgba(0,0,0,.42),0 26px 44px -20px rgba(0,0,0,.75)}
.tile--nf:hover .spec{transform:rotate(-.5deg) translateY(-3px)}
.spec-t{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 8px;padding-bottom:9px;border-bottom:2px solid var(--ink)}
.spec-t b{font:800 22px/1 var(--disp);letter-spacing:.01em;text-transform:uppercase}
.spec-t span{font:500 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.spec-r{display:grid;grid-template-columns:36px minmax(0, 1fr) 46px 96px;align-items:center;min-height:34px;margin:0;
  border-bottom:1px solid var(--line);font:500 13px/1.2 var(--mono)}
.spec-r > span{min-width:0;padding:5px 6px 4px 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.spec-r > span:nth-child(3){padding-right:10px;text-align:right}
.spec-hd{min-height:24px;border-bottom-color:var(--ink);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.spec-hd > span{overflow:visible}
.spec-st{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase}
.spec-ok .spec-st{color:var(--mute)}
.spec-st svg{flex:none;width:11px;height:9px;color:var(--ink)}
.spec-q{background:rgba(30,64,175,.1);box-shadow:inset 3px 0 0 var(--acc)}
.spec-q > span:first-child{padding-left:8px}
.spec-q > span:nth-child(2){font-style:italic;color:var(--acc)}
.spec-q > .spec-st{align-self:stretch;justify-content:center;margin:4px 0;padding:0 6px;background:var(--acc);color:var(--on-acc)}
.spec-q i{display:inline-block;width:7px;height:13px;margin-left:5px;vertical-align:-2px;background:var(--acc);animation:caret 1.1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.spec-blank{border-bottom-style:dashed}
.nf-cta{grid-area:c;align-self:end;min-width:0}
.nf-alt{display:flex;flex-wrap:wrap;gap:10px 20px;margin:16px 0 0;font:500 12.5px/1.2 var(--mono)}
.nf-alt a{text-decoration:none;border-bottom:1px solid rgba(215,212,206,.45);padding-bottom:3px}
.nf-alt a:hover{border-color:currentColor}
/* одна ячейка (3 колонки на 1440): без шагов и пустой строки листа — плитка не выше соседних */
@container (max-width:559px){
  .nf-steps,.spec-blank{display:none}
  .nf{gap:24px}
}
@container (min-width:760px){
  .nf{grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr);grid-template-areas:"l s" "c s";gap:30px 56px;padding:40px var(--pad) 38px}
  .spec{max-width:540px;padding:20px 22px 14px}
  .spec-t b{font-size:26px}
  .spec-r{grid-template-columns:40px minmax(0, 1fr) 50px 106px;min-height:40px;font-size:14px}
  .nf-cta .buy{max-width:560px}
}
@media (prefers-reduced-motion:reduce){.spec-q i{animation:none}}

/* ---------- главная ---------- */
.front{padding:0 var(--pad)}   /* не .home: WP вешает класс home на body главной */
.home-mark{margin:0;display:grid;grid-template-columns:1fr;grid-template-areas:"a" "sub";align-items:end;gap:10px 22px}
.home-mark .mark-a{grid-area:a;font:900 min(calc((100vw - 2 * var(--pad)) / 1.62), 430px)/.78 var(--disp);letter-spacing:-.01em;text-transform:uppercase}
.home-sub{grid-area:sub;display:flex;flex-direction:column;gap:10px;padding-bottom:.4em;font:600 clamp(22px, 3.2vw, 40px)/1.02 var(--text);letter-spacing:-.01em;animation:rise .7s var(--ease) .45s both}
.home-sub small{font:500 11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
/* полоса фактов первого экрана; на десктопе в ней же заявка (на мобильном заявка — в dock) */
.fr-bar{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));margin:18px calc(-1 * var(--pad)) 0;border-top:1px solid var(--ink);animation:rise .7s var(--ease) .5s both}
.fr-fact{margin:0;min-width:0;padding:12px 10px 14px;border-right:1px solid var(--line)}
.fr-fact:first-child{padding-left:var(--pad)}
.fr-fact:nth-child(3){border-right:0}
.fr-fact b{display:block;font:900 30px/.85 var(--disp);text-transform:uppercase;font-variant-numeric:tabular-nums;white-space:nowrap}
.fr-fact span{display:block;margin-top:7px;font:500 10px/1.25 var(--mono);letter-spacing:.03em;text-transform:uppercase;color:var(--mute)}
.fr-cta{display:none}
.home-band{display:grid;grid-template-columns:minmax(0, 1fr);margin:0 calc(-1 * var(--pad));border-top:1px solid var(--ink)}
.home-find{padding:20px var(--pad) 22px;border-bottom:1px solid var(--line);animation:rise .7s var(--ease) .55s both}
.home-live{padding:16px var(--pad) 18px;border-bottom:1px solid var(--line);animation:rise .7s var(--ease) .65s both}
.find-k{margin:18px 0 8px;font:500 10.5px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.home-find .popular{margin-top:0}
.tasks{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.task{display:inline-flex;align-items:baseline;gap:8px;padding:9px 12px 8px;border:1px solid var(--ink);font:800 19px/1 var(--disp);
  text-transform:uppercase;text-decoration:none;transition:background .2s,color .2s}
.task i{font:500 10px/1 var(--mono);font-style:normal;color:var(--mute)}
.task:hover{background:var(--ink);color:var(--bg-hi)}
.task:hover i{color:#9d9a93}
/* подпись рядом с «ЖБИ» — только когда ей остаётся место (от 1100): на 768 «ЖБИ» занимал 674 px, подписи 40 px */
@media (min-width:1100px){
  .home-mark{grid-template-columns:auto minmax(0, 1fr);grid-template-areas:"a sub"}
}
@media (min-width:900px){
  .fr-bar{grid-template-columns:repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr);margin-top:22px}
  .fr-fact{padding:16px 24px 18px}
  .fr-fact b{font-size:52px}
  .fr-fact:nth-child(3){border-right:1px solid var(--ink)}
  .fr-cta{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:14px var(--pad) 14px 24px}
  .fr-cta .buy{height:62px}
  .fr-tel{font:500 12px/1 var(--mono);letter-spacing:.03em;color:var(--ink-2);text-decoration:none}
  .fr-tel:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
  .home-band{grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr)}
  .home-live{border-left:1px solid var(--ink);padding:18px 24px}
  .home-find{padding:24px 24px 26px var(--pad)}
}

/* поиск марки */
.finder{position:relative}
.finder-field{display:flex;border:1px solid var(--ink);height:66px;background:rgba(228,226,221,.72)}
.finder-field input{flex:1;min-width:0;border:0;background:none;padding:0 16px;font:800 32px/1 var(--disp);text-transform:uppercase;letter-spacing:.01em}
.finder-field input::placeholder{font:400 14px/1 var(--mono);text-transform:none;letter-spacing:.01em;color:#6f6c66}
.finder-field input:focus{outline:none}
.finder-field:focus-within{outline:2px solid var(--ink);outline-offset:2px}
.finder-go{border:0;border-left:1px solid var(--ink);background:var(--ink);color:var(--bg-hi);padding:0 18px;font:500 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.05em}
.finder-go:hover{background:var(--acc)}
.sugg{position:absolute;left:0;right:0;top:100%;z-index:20;margin:0;padding:0;list-style:none;background:var(--bg-hi);border:1px solid var(--ink);border-top:0;max-height:min(380px, 60vh);overflow:auto}
.sugg[hidden]{display:none!important}
.sugg a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:11px 16px;border-bottom:1px solid var(--line);
  font:800 26px/1 var(--disp);text-transform:uppercase;text-decoration:none}
.sugg a small{font:400 11px/1 var(--mono);text-transform:none;color:var(--mute)}
.sugg a:hover,.sugg a[aria-selected="true"]{background:var(--ink);color:var(--bg-hi)}
.sugg a:hover small,.sugg a[aria-selected="true"] small{color:#9d9a93}
.sugg .none{padding:12px 16px;font:400 13px/1.4 var(--mono);color:var(--mute)}
.popular{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;padding:0;list-style:none}

/* живой чертёж */
.livedraw{position:relative;margin:0;min-height:274px}   /* чертёж до 200 + подпись 29 + строка с ценой 20 + два отступа: слайды лежат абсолютом, высоту держит блок */
.ld{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility 0s .6s;text-decoration:none}
.ld.on{opacity:1;visibility:visible;transition:opacity .6s var(--ease)}
.ld .drawing{max-height:200px;margin:0}
.ld-cap{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:auto}
.ld-cap b{font:900 34px/.85 var(--disp);text-transform:uppercase}
.ld-cap span{font:500 11px/1.3 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
.ld-spec{font:400 11.5px/1.3 var(--mono);color:var(--ink-2);letter-spacing:.01em}
.ld-spec{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px}
.ld-price{font:900 22px/.9 var(--disp);letter-spacing:.01em;color:var(--acc);white-space:nowrap}
/* точки - кнопки: полоска 3 px с полем нажатия 19 px по высоте, двенадцать штук входят в экран 360 px */
.ld-dots{display:flex;flex-wrap:wrap;gap:0 5px;margin-top:2px}
.ld-dots button{width:21px;height:19px;padding:8px 0;border:0;background:var(--line-2);background-clip:content-box;cursor:pointer}
.ld-dots button.on{background-color:var(--ink)}
.ld-dots button:hover{background-color:var(--mute)}
.ld-dots button:focus-visible{outline:2px solid var(--ink);outline-offset:1px}

/* секции главной во всю ширину (строки марок, каталог по задачам) */
.sec.sec--flush{padding-left:0;padding-right:0}
@media (max-width:599px){.rows--hot .row:nth-child(n+7),.its--hot .it:nth-child(n+7){display:none}}   /* на телефоне 6 ходовых — дальше «Весь каталог» */
.sec--flush > .sec-h{padding:0 var(--pad)}
.sec--flush .rows-head{margin-top:0}
.sec--flush .lst--hot{margin-top:6px}
.more-row{margin:0;padding:24px var(--pad) 0}
.more{display:inline-flex;align-items:center;gap:12px;padding:14px 18px 12px;border:1px solid var(--ink);font:800 24px/1 var(--disp);
  text-transform:uppercase;text-decoration:none;transition:background .2s,color .2s}
.more svg{width:20px;height:20px;transition:transform .3s var(--ease)}
.more:hover{background:var(--ink);color:var(--bg-hi)}
.more:hover svg{transform:translateX(4px)}

/* «Сколько везёт машина»: кузов в плане, в масштабе (inc/truck.php), рейсы по количеству */
.tk-grid{display:grid;grid-template-columns:minmax(0, 1fr);gap:28px}
.tk-marks{border:0;margin:0;padding:0;min-width:0}
.tk-chips{display:flex;flex-wrap:wrap;gap:6px}
.tk-chip{position:relative;cursor:pointer}
.tk-chip input{position:absolute;opacity:0;pointer-events:none}
.tk-chip span{display:inline-block;padding:10px 12px 9px;border:1px solid var(--ink);font:800 21px/1 var(--disp);text-transform:uppercase;transition:background .2s,color .2s}
.tk-chip:hover span{background:var(--bg-hi)}
.tk-chip input:checked + span{background:var(--ink);color:var(--bg-hi)}
.tk-chip input:focus-visible + span{outline:2px solid var(--ink);outline-offset:2px}
.tk-q,.tk-z{margin-top:20px}
.tk-q .stepper{width:max-content}
.tk-buy{margin-top:22px}
.tk-note{margin:12px 0 0;font:400 12px/1.5 var(--mono);color:var(--mute)}
.tk-out{border-top:1px solid var(--ink)}
.tk-veh{padding:16px 0 18px;border-bottom:1px solid var(--line)}
.tk-veh:last-child{border-bottom:0}
.tk-vh{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.tk-name{margin:0;font:900 30px/.9 var(--disp);text-transform:uppercase}
.tk-name small{display:block;margin-top:7px;font:500 10.5px/1.3 var(--mono);letter-spacing:.03em;text-transform:none;color:var(--mute)}
.tk-trips{margin:0;display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.tk-trips b{font:900 60px/.8 var(--disp);font-variant-numeric:tabular-nums}
.tk-trips span{font:500 11px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.tk-pics{margin-top:14px}
.tk-p[hidden]{display:none}
.tk-pic{display:block;width:100%;height:auto;overflow:visible}
.tk-veh--m .tk-pic{width:var(--r)}
.tk-pic .wh{fill:#2A2926}
.tk-pic .bd{fill:#BDBAB3;stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke}
.tk-pic .fl{fill:#D5D2CB}
.tk-pic .pl{fill:none;stroke:var(--ink);stroke-opacity:.22;stroke-width:1;vector-effect:non-scaling-stroke}
.tk-pic .cg{stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke;animation:load .45s var(--ease) both;animation-delay:var(--d, 0ms);transition:fill-opacity .25s,stroke-opacity .25s}
/* свободные места рейса: пунктир без заливки */
.tk-pic .cg.off{fill-opacity:0;stroke:var(--ink);stroke-opacity:.5;stroke-dasharray:5 4}
/* лента рейсов под машиной: номер, штук, заполнение кузова; клик показывает рейс на рисунке */
.tk-strip{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.tk-tr{display:flex;flex-direction:column;gap:6px;min-width:76px;padding:8px 10px 9px;border:1px solid var(--line-2);background:none;
  font:500 10.5px/1 var(--mono);letter-spacing:.03em;text-align:left;transition:background .2s,color .2s}
.tk-tr b{font:800 18px/1 var(--disp);letter-spacing:0}
.tk-tr i{display:block;height:4px;background:var(--line)}
.tk-tr i s{display:block;height:100%;width:var(--f);background:currentColor;text-decoration:none}
.tk-tr:hover{background:rgba(215,212,206,.12)}
.tk-tr.on{background:var(--ink);color:var(--bg-hi);border-color:var(--ink)}
.tk-more{align-self:center;padding:0 4px;font:500 12px/1 var(--mono);color:var(--mute)}
.tk-sum{margin:10px 0 0;font:500 12px/1.4 var(--mono)}
.slab .tk-tr{border-color:rgba(215,212,206,.4);color:var(--bg-hi)}
.slab .tk-tr i{background:rgba(215,212,206,.2)}
.slab .tk-tr.on{background:var(--bg-hi);color:var(--ink);border-color:var(--bg-hi)}
.slab .tk-tr.on i{background:rgba(18,18,17,.18)}
.slab .tk-more{color:#9d9a93}
.tk-pic .cb{fill:#B4B1AA}
.tk-pic .dt{fill:none;stroke:var(--ink);stroke-opacity:.55;stroke-width:1;vector-effect:non-scaling-stroke}
.tk-pic .cr{fill:#CFCCC5;stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke}
.tk-pic .ln{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linejoin:round}
.tk-pic .draw-in{stroke-dasharray:1;stroke-dashoffset:1;animation:pen 1.4s var(--ease) forwards}
@keyframes load{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
.tk-load{margin:10px 0 0;font:500 12px/1.3 var(--mono)}
.tk-cost{margin:6px 0 0;font:800 28px/1 var(--disp);color:var(--acc)}
.tk-cost:empty{display:none}
.tk-no{display:grid;place-items:center;min-height:96px;margin:0;border:1px dashed var(--line-2);font:500 11px/1.4 var(--mono);
  letter-spacing:.05em;text-transform:uppercase;color:var(--mute);text-align:center;padding:12px}
/* машина на плите: кузова «на асфальте», вид сверху — светлые контуры, видимые колёса, светлые элементы управления */
.slab .lbl{color:#9d9a93}
.slab .lbl i{color:var(--bg-hi)}
.slab .tk-chip span{border-color:rgba(215,212,206,.5)}
.slab .tk-chip:hover span{background:rgba(215,212,206,.1)}
.slab .tk-chip input:checked + span{background:var(--bg-hi);border-color:var(--bg-hi);color:var(--ink)}
.slab .tk-chip input:focus-visible + span{outline-color:var(--bg-hi)}
.slab .stepper,.slab .stepper label{border-color:rgba(215,212,206,.6)}
.slab .stepper button:hover{background:var(--bg-hi);color:var(--ink)}
.slab .stepper .unit,.slab .tk-note,.slab .tk-name small{color:#9d9a93}
.slab .field{border-color:rgba(215,212,206,.6);background:rgba(215,212,206,.08)}
.slab .field select{color:var(--bg-hi);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23D7D4CE' stroke-width='1.6'/%3E%3C/svg%3E")}
.slab .field select option{color:var(--ink)}
.slab .tk-out{border-color:rgba(215,212,206,.35)}
.slab .tk-veh{border-color:rgba(215,212,206,.16)}
.slab .tk-trips span{color:#b5b2ab}
.slab .tk-pic .wh{fill:#57554F}
.slab .tk-pic .ln{stroke:#EDEAE4}
.slab .tk-no{border-color:rgba(215,212,206,.4);color:#9d9a93}
.slab .buy:focus-visible{outline-color:var(--bg-hi)}
@media (min-width:900px){
  .tk-grid{grid-template-columns:minmax(0, 420px) minmax(0, 1fr);gap:0 40px}
  .tk-out{border-top:0;border-left:1px solid var(--ink);padding-left:36px}
  .tk-veh:first-child{padding-top:0}
  .tk-trips b{font-size:80px}
  .tk-name{font-size:36px}
}

/* каталог по задачам: группа слева, разделы строками с мини-чертежами */
.grps{border-top:1px solid var(--ink)}
.grp{display:grid;grid-template-columns:minmax(0, 1fr);border-bottom:1px solid var(--ink);scroll-margin-top:calc(var(--hdr) + 8px)}
.grp:last-child{border-bottom:0}
.grp-h{padding:20px var(--pad) 14px}
.grp-i{display:block;font:500 11px/1 var(--mono);color:var(--mute)}
.grp-n{margin:8px 0 0;font:900 44px/.86 var(--disp);text-transform:uppercase}
.grp-note{margin:9px 0 0;font:400 13px/1.4 var(--text);color:var(--ink-2)}
.sxs{margin:0;padding:0;list-style:none}
.sx{display:grid;grid-template-columns:minmax(0, 1fr) 120px;grid-template-areas:"n d" "c d";align-items:center;gap:5px 14px;padding:12px var(--pad);
  border-top:1px solid var(--line);text-decoration:none;transition:background .2s}
.sx:hover{background:var(--bg-hi)}
.sx-n{grid-area:n;font:900 32px/.9 var(--disp);text-transform:uppercase}
.sx-c{grid-area:c;font:500 10.5px/1.35 var(--mono);letter-spacing:.03em;color:var(--mute)}
.sx-d{grid-area:d;min-width:0}
.sx-d .drawing{max-height:62px;margin:0 0 0 auto;width:auto;max-width:100%}
.sx-go{display:none}
@media (min-width:900px){
  .grp{grid-template-columns:minmax(0, 380px) minmax(0, 1fr)}
  .grp-h{padding:28px 24px 28px var(--pad);border-right:1px solid var(--ink)}
  .grp-n{font-size:58px}
  .sxs li:first-child .sx{border-top:0}
  .sx{grid-template-columns:minmax(0, 1fr) 250px 210px 40px;grid-template-areas:"n c d g";padding:14px 24px}
  .sx-n{font-size:42px}
  .sx-d .drawing{max-height:74px}
  .sx-go{display:block;grid-area:g;justify-self:end}
  .sx-go svg{display:block;width:24px;height:24px;transition:transform .3s var(--ease)}
  .sx:hover .sx-go svg{transform:translateX(4px)}
}

/* заказ за три шага: подписи к шагам, телефон рядом с кнопкой */
.pledge--notes li div{display:flex;flex-direction:column;gap:9px}
.pledge--notes li small{font:400 13px/1.4 var(--mono);letter-spacing:.01em;text-transform:none;color:var(--mute)}
.slab .pledge--notes li small{color:#9d9a93}
.cta-row--tel{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;max-width:none}
.cta-row--tel .buy{flex:0 1 560px}
.cta-tel{font:500 14px/1.2 var(--mono);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}
.slab .cta-tel{color:var(--bg-hi);border-color:rgba(215,212,206,.45)}
/* три шага на десктопе — в ряд на всю ширину, номера контуром (как номера глав): без пустой правой половины на 2560.
   Двойной класс: ниже по файлу .pledge li{80px 1fr} и .slab .pledge li span перебивали модификатор. */
@media (min-width:900px){
  .pledge.pledge--notes{grid-template-columns:repeat(3, minmax(0, 1fr));border-top:1px solid var(--line)}
  .pledge.pledge--notes li{grid-template-columns:minmax(0, 1fr);align-content:start;gap:22px;padding:26px 28px 30px 0;border-top:0;
    font-size:clamp(30px, 2.8vw, 50px)}
  .pledge.pledge--notes li + li{padding-left:28px;border-left:1px solid var(--line)}
  .pledge.pledge--notes li span{padding:0;font:900 clamp(56px, 5vw, 92px)/.8 var(--disp);color:var(--line-2)}
  .pledge.pledge--notes li small{max-width:36ch;font-size:13.5px}
  .slab .pledge.pledge--notes{border-top-color:rgba(215,212,206,.2)}
  .slab .pledge.pledge--notes li + li{border-left-color:rgba(215,212,206,.2)}
}
@supports (-webkit-text-stroke:1px black){
  @media (min-width:900px){
    .pledge.pledge--notes li span,.slab .pledge.pledge--notes li span{color:transparent;-webkit-text-stroke:1.5px var(--ink)}
    .slab .pledge.pledge--notes li span{-webkit-text-stroke-color:rgba(215,212,206,.6)}
  }
}

/* кто продаёт (штамп) и вопросы */
.who{display:grid;grid-template-columns:minmax(0, 1fr);gap:44px}
.stamp{display:grid;grid-template-columns:minmax(0, 118px) minmax(0, 1fr);margin:0;border:1px solid var(--ink);background:rgba(215,212,206,.4)}
.stamp dt,.stamp dd{margin:0;padding:10px 12px;border-bottom:1px solid var(--line)}
.stamp dt{border-right:1px solid var(--line);font:500 10px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}
.stamp dd{font:500 14px/1.35 var(--text);overflow-wrap:anywhere}
.stamp dt:last-of-type,.stamp dd:last-of-type{border-bottom:0}
.who-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin:16px 0 0;font:500 12px/1.2 var(--mono);letter-spacing:.04em;text-transform:uppercase}
.who-links a{text-underline-offset:4px}
.sec-h--s{font-size:clamp(40px, 6vw, 88px)}
.faq{border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:grid;grid-template-columns:minmax(0, 1fr) 28px;gap:16px;align-items:center;padding:16px 0;cursor:pointer;list-style:none;
  font:700 18px/1.3 var(--text)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";justify-self:end;font:400 28px/1 var(--mono);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{text-decoration:underline;text-underline-offset:4px}
.faq summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.faq p{margin:0 0 18px;max-width:660px;font:400 16px/1.55 var(--text);color:var(--ink-2)}
@media (min-width:900px){
  .who{grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);gap:64px}
  .who-l{position:sticky;top:calc(var(--hdr) + 24px);align-self:start}
  .stamp{grid-template-columns:minmax(0, 132px) minmax(0, 1fr)}
  .faq summary{font-size:20px;padding:20px 0}
}

/* ---------- служебные страницы: первый экран (как у главной) ---------- */
.pg{padding:0 var(--pad)}
.pg-mark{display:grid;grid-template-columns:minmax(0, 1fr);gap:14px 32px;align-items:end;margin-top:2px}
.pg-title{margin:0}
.pg-sub{margin:0;max-width:640px;display:flex;flex-direction:column;gap:10px;padding-bottom:.3em;
  font:600 clamp(22px, 2.9vw, 40px)/1.04 var(--text);letter-spacing:-.01em;animation:rise .7s var(--ease) .4s both}
.pg-sub small{font:500 11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.pg-title--doc{font-size:min(calc((100vw - 2 * var(--pad)) / (var(--tn) * .5)), 64px);margin-top:6px}
@media (min-width:900px){
  .pg-mark{grid-template-columns:fit-content(64%) minmax(0, 1fr)}
  .pg-title{font-size:min(calc((100vw - 2 * var(--pad)) * .62 / (var(--tn) * .5)), 220px)}
  .pg-title--doc{font-size:min(calc((100vw - 2 * var(--pad)) / (var(--tn) * .5)), 118px)}
}

/* текстовая страница: оглавление слева, текст колонкой для чтения */
.doc-wrap{display:grid;grid-template-columns:minmax(0, 1fr);margin-top:24px;padding:28px var(--pad) 64px;border-top:1px solid var(--ink)}
.toc{margin:0 0 28px}
.toc ol{margin:0;padding:0;list-style:none;border-top:1px solid var(--ink)}
.toc a{display:grid;grid-template-columns:32px minmax(0, 1fr);gap:8px;padding:11px 0;border-bottom:1px solid var(--line);
  font:600 14px/1.35 var(--text);text-decoration:none;transition:padding .25s var(--ease),background .2s,color .2s}
.toc a span{font:500 11px/1.6 var(--mono);color:var(--mute)}
.toc a:hover{padding-left:10px;background:var(--ink);color:var(--bg-hi)}
.toc a:hover span{color:#9d9a93}
.prose{max-width:760px;font:400 17px/1.65 var(--text)}
.prose > :first-child{margin-top:0}
.prose > p:first-child{font-size:20px;line-height:1.5}
.prose h2{margin:48px 0 14px;font:900 clamp(34px, 4.4vw, 56px)/.9 var(--disp);text-transform:uppercase;scroll-margin-top:calc(var(--hdr) + 16px)}
.prose h3{margin:28px 0 8px;font:800 26px/1 var(--disp);text-transform:uppercase}
.prose p,.prose ul,.prose ol{margin:0 0 14px}
.prose ul{padding:0;list-style:none}
.prose ul li{position:relative;padding-left:22px}
.prose ul li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;background:var(--ink)}
.prose li{margin:0 0 7px}
.prose a{color:var(--ink);text-underline-offset:3px}
.prose table{width:100%;border-collapse:collapse;margin:0 0 14px;font:400 13px/1.45 var(--mono)}
.prose th,.prose td{padding:9px 10px;border:1px solid var(--line-2);text-align:left;vertical-align:top}
.prose th{font-weight:500;background:rgba(215,212,206,.6)}
.req{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0 0 14px;font:400 13px/1.45 var(--mono)}
.req dt{color:var(--mute)}
.req dd{margin:0}
.zones-note{font:400 13px/1.4 var(--mono);color:var(--mute)}
@media (max-width:599px){.prose table{display:block;overflow-x:auto}}
@media (min-width:900px){
  .doc-wrap{grid-template-columns:minmax(0, 4fr) minmax(0, 8fr);gap:64px;padding-top:40px}
  .doc-wrap--solo{grid-template-columns:minmax(0, 1fr)}
  .toc{position:sticky;top:calc(var(--hdr) + 24px);align-self:start;margin:0}
}

/* машины сбоку, в одном масштабе с видом сверху: характеристики, что возит */
.vs{display:grid;grid-template-columns:minmax(0, 1fr);border-top:1px solid var(--ink)}
.vs-col{padding:24px 0 28px;border-bottom:1px solid var(--line);min-width:0}
.vs-pic{display:flex;align-items:flex-end;aspect-ratio:827 / 253}
.side{display:block;width:100%;height:auto;overflow:visible}
.vs-col--manipulator .side{width:var(--r)}
.side .gr{fill:none;stroke:var(--ink);stroke-width:1.4}
.side .fr{fill:#BDBAB3;stroke:var(--ink);stroke-width:.9}
.side .dk{fill:#CFCCC5;stroke:var(--ink);stroke-width:.9}
.side .bd{stroke:var(--ink);stroke-width:.9}
.side .sh{stroke:var(--ink);stroke-opacity:.28;stroke-width:.8}
.side .pl{fill:none;stroke:var(--ink);stroke-opacity:.55;stroke-width:.9}
.side .cr{fill:#CFCCC5;stroke:var(--ink);stroke-width:.9}
.side .cb{fill:#B4B1AA}
.side .wh{fill:#2A2926}
.side .hb{fill:#8f8c86}
.side .ln{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.side .draw-in{stroke-dasharray:1;stroke-dashoffset:1;animation:pen 1.6s var(--ease) .2s forwards}
.side .ex{fill:none;stroke:var(--ink);stroke-width:.7;stroke-dasharray:3 3;opacity:.75}
.side .dm{fill:none;stroke:var(--ink);stroke-width:1.1}
.side .dt{font:500 15px var(--mono);fill:var(--ink)}
.vs-k{display:flex;gap:8px;margin:18px 0 0;font:500 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.vs-k i{font-style:normal;color:var(--ink)}
.vs-n{margin:8px 0 0;font:900 64px/.84 var(--disp);text-transform:uppercase}
.vs-specs{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));margin:18px 0 0;border-top:1px solid var(--ink)}
.vs-specs > div{padding:12px 12px 12px 0;border-bottom:1px solid var(--line);min-width:0}
.vs-specs > div:nth-child(2n){padding-left:14px;border-left:1px solid var(--line)}
.vs-specs dt{font:500 10.5px/1.25 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}
.vs-specs dd{margin:7px 0 0;font:900 56px/.84 var(--disp);font-variant-numeric:tabular-nums;white-space:nowrap}
.vs-specs dd small{font:700 .44em/1 var(--disp);margin-left:.12em}
.vs-specs dd.vs-sm{font:800 24px/1 var(--disp);text-transform:uppercase;white-space:normal}
.vs-note{margin:14px 0 0;max-width:520px;font:400 15px/1.5 var(--text);color:var(--ink-2)}
.vs-what{margin:18px 0 8px;font:500 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.vs-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
@media (min-width:900px){
  .vs{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .vs-col{padding:36px 36px 4px 0;border-bottom:0}
  .vs-col + .vs-col{padding-left:36px;padding-right:0;border-left:1px solid var(--ink)}
  .vs-n{font-size:88px}
  .vs-specs dd{font-size:76px}
  .vs-specs dd.vs-sm{font-size:28px}
}

/* зоны доставки: схема колец + список, строка подсвечивает полосу */
.zones-wrap{display:grid;grid-template-columns:minmax(0, 1fr);gap:28px}
.zmap-fig{margin:0}
.zmap-fig figcaption{margin-top:8px;font:500 10.5px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}
.zmap{display:block;width:100%;height:auto;overflow:visible}
.zmap .zn{fill:var(--ink);transition:fill-opacity .3s var(--ease)}
.zmap .zn--mo30{fill-opacity:.15}
.zmap .zn--mo60{fill-opacity:.085}
.zmap .zn--mo99{fill-opacity:.035}
.zmap .zn--msk{fill-opacity:.55}
.zmap .zn.on{fill-opacity:.26}
.zmap .zn--msk.on{fill-opacity:1}
.zmap .zh{stroke:var(--ink);stroke-width:1.2;stroke-opacity:.6}
.zmap .zr{fill:none;stroke:var(--ink);stroke-width:1.3}
.zmap .zr--out{stroke-dasharray:4 6;stroke-opacity:.45}
.zmap .zx{fill:none;stroke:var(--ink);stroke-opacity:.22;stroke-width:1;stroke-dasharray:2 6}
.zmap .zt{font:500 12.5px var(--mono);fill:var(--ink);paint-order:stroke;stroke:var(--bg);stroke-width:4px;stroke-linejoin:round}
.zmap .zt--ring{font-size:11px;letter-spacing:.04em;fill:var(--ink-2)}
.zmap .zt--msk{font:900 19px var(--disp);letter-spacing:.06em;stroke:none;fill:var(--bg-hi)}
.zmap .zt--n{font-size:12px;fill:var(--mute)}
.zmap .zc{fill:var(--ink);animation:zin .5s var(--ease) both;animation-delay:var(--d, 0ms)}
@keyframes zin{from{opacity:0}to{opacity:1}}
.sec--paper .zmap .zt{stroke:#E3E0D9}
.zmap .zt.zt--msk{stroke:none}
/* телефон: схема ~ вдвое мельче — подписи городов и колец прячем (зоны и города списком под схемой), точки крупнее */
@media (max-width:599px){
  .zmap .zt{display:none}
  .zmap .zt--msk,.zmap .zt--n{display:inline;font-size:22px}
  .zmap .zt--msk{font-size:23px;letter-spacing:.02em}
  .zmap .zc{r:6px}
  .side .dt{font-size:28px}
}
.zl-head{display:none}
.zl-rows{margin:0;padding:0;list-style:none;border-top:1px solid var(--ink)}
.zl-row{display:grid;grid-template-columns:34px minmax(0, 1fr) minmax(0, 1fr);grid-template-areas:"i n n" ". a b";gap:10px 12px;padding:16px 0;
  border-bottom:1px solid var(--line);outline:none;cursor:default;transition:background .2s,color .2s,box-shadow .2s}
.zl-row:hover,.zl-row.on,.zl-row:focus-visible{background:var(--ink);color:var(--bg-hi);box-shadow:-10px 0 0 var(--ink),10px 0 0 var(--ink)}  /* поля тенью: без перекладки строки */
.zl-i{grid-area:i;padding-top:.35em;font:500 11px/1 var(--mono);color:var(--mute)}
.zl-n{grid-area:n;font:900 34px/.88 var(--disp);text-transform:uppercase;min-width:0}
.zl-n small{display:block;margin-top:9px;font:400 12px/1.5 var(--mono);letter-spacing:.01em;text-transform:none;color:var(--mute)}
.zl-row > :nth-child(3){grid-area:a}
.zl-row > :nth-child(4){grid-area:b}
.zl-p{font:800 26px/1 var(--disp);color:var(--acc);font-variant-numeric:tabular-nums;white-space:nowrap}
.zl-p.ask{font:500 11px/1.2 var(--mono);letter-spacing:.05em;text-transform:uppercase}
.zl-p em{display:block;margin-bottom:6px;font:500 10px/1.2 var(--mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.zl-row:hover .zl-p,.zl-row.on .zl-p,.zl-row:focus-visible .zl-p{color:var(--bg-hi)}
.zl-row:hover small,.zl-row.on small,.zl-row:focus-visible small,.zl-row:hover .zl-i,.zl-row.on .zl-i,.zl-row:hover em,.zl-row.on em{color:#9d9a93}
.zl-note{margin:14px 0 0;max-width:560px;font:400 12.5px/1.5 var(--mono);color:var(--mute)}
@media (min-width:900px){
  .zones-wrap{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);gap:56px;align-items:start}
  .zmap-fig{position:sticky;top:calc(var(--hdr) + 16px)}
  .zl-head{display:grid;grid-template-columns:34px minmax(0, 1fr) 132px 112px;padding:0 0 8px;
    font:500 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
  .zl-head span:first-child{grid-column:2}
  .zl-row{grid-template-columns:34px minmax(0, 1fr) 132px 112px;grid-template-areas:"i n a b";align-items:center;padding:20px 0}
  .zl-n{font-size:44px}
  .zl-p em{display:none}
}

/* как проходит доставка: лента шагов, что подготовить на объекте */
.flow{display:grid;grid-template-columns:minmax(0, 1fr);margin:0;padding:0;list-style:none;border-top:1px solid rgba(215,212,206,.35)}
.flow li{display:grid;grid-template-columns:44px minmax(0, 1fr);grid-template-areas:"i b" "i p";gap:8px 0;padding:16px 0;border-bottom:1px solid rgba(215,212,206,.16)}
.flow-i{grid-area:i;padding-top:.45em;font:500 11px/1 var(--mono);color:#9d9a93}
.flow b{grid-area:b;font:900 32px/.9 var(--disp);text-transform:uppercase}
.flow p{grid-area:p;margin:0;max-width:440px;font:400 14px/1.5 var(--text);color:#b5b2ab}
.prep{margin-top:44px;padding-top:26px;border-top:1px solid rgba(215,212,206,.35)}
.prep-h{margin:0 0 16px;font:900 clamp(32px, 3.6vw, 52px)/.88 var(--disp);text-transform:uppercase}
.prep-list{display:grid;grid-template-columns:minmax(0, 1fr);gap:0 40px;margin:0;padding:0;list-style:none;border-top:1px solid rgba(215,212,206,.2)}
.prep-list li{position:relative;padding:13px 0 13px 34px;border-bottom:1px solid rgba(215,212,206,.16);font:400 15px/1.45 var(--text);color:#d7d4ce}
.prep-list li::before{content:"";position:absolute;left:0;top:14px;width:17px;height:17px;border:1px solid rgba(215,212,206,.7)}
.prep-list li::after{content:"";position:absolute;left:4px;top:17px;width:9px;height:5px;border-left:2px solid var(--bg-hi);border-bottom:2px solid var(--bg-hi);transform:rotate(-45deg)}
@media (min-width:900px){
  .flow{grid-template-columns:repeat(5, minmax(0, 1fr));border-top:0}
  .flow li{grid-template-columns:minmax(0, 1fr);grid-template-areas:"i" "b" "p";align-content:start;gap:14px;padding:0 22px 0 0;border-bottom:0}
  .flow li + li{padding-left:22px;border-left:1px solid rgba(215,212,206,.16)}
  .flow-i{display:flex;align-items:center;gap:10px;margin-left:-22px;padding:0 0 14px 22px;border-bottom:1px solid rgba(215,212,206,.55);font-size:12px;color:var(--bg-hi)}
  .flow li:first-child .flow-i{margin-left:0;padding-left:0}
  .flow-i::before{content:"";width:9px;height:9px;background:var(--bg-hi);flex:none}
  .flow b{font-size:36px}
  .prep{display:grid;grid-template-columns:minmax(0, 360px) minmax(0, 1fr);gap:48px;margin-top:64px}
  .prep-list{grid-template-columns:repeat(2, minmax(0, 1fr));border-top:0}
}

/* вопросы страницы и карточка заявки рядом */
.qa{display:grid;grid-template-columns:minmax(0, 1fr);gap:32px}
.qa-card{margin-top:28px;padding:22px var(--pad) 24px;border:1px solid var(--ink);background:rgba(215,212,206,.55)}
.qa-card-h{margin:0;font:900 38px/.88 var(--disp);text-transform:uppercase}
.qa-card-s{margin:10px 0 18px;max-width:440px;font:400 15px/1.45 var(--text);color:var(--ink-2)}
.qa-card .cta-tel{display:inline-block;margin-top:14px}
@media (min-width:900px){
  .qa{grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);gap:64px}
  .qa-l{position:sticky;top:calc(var(--hdr) + 24px);align-self:start}
  .qa-card{padding:26px 28px 28px}
  .qa > .faq{margin-top:12px}
}

/* порядок оплаты: четыре шага, номер контуром, что получаете */
.steps4{display:grid;grid-template-columns:minmax(0, 1fr);margin:0;padding:0;list-style:none;border-top:1px solid var(--ink)}
.steps4 li{display:grid;grid-template-columns:76px minmax(0, 1fr);grid-template-areas:"i t" "i n" "i g";gap:8px 0;padding:20px 0;border-bottom:1px solid var(--line)}
.s4-i{grid-area:i;font:900 58px/.8 var(--disp);color:var(--line-2)}
.s4-t{grid-area:t;font:900 34px/.9 var(--disp);text-transform:uppercase}
.s4-n{grid-area:n;margin:0;font:400 15px/1.45 var(--text);color:var(--ink-2)}
.s4-get{grid-area:g;display:flex;flex-direction:column;gap:5px;margin:6px 0 0;font:600 15px/1.3 var(--text)}
.s4-get span{font:500 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
@supports (-webkit-text-stroke:1px black){ .s4-i{color:transparent;-webkit-text-stroke:1.5px var(--ink)} }
@media (min-width:900px){
  .steps4{grid-template-columns:repeat(4, minmax(0, 1fr));border-top:0}
  .steps4 li{grid-template-columns:minmax(0, 1fr);grid-template-areas:"i" "t" "n" "g";grid-template-rows:auto auto 1fr auto;align-content:stretch;gap:14px;padding:0 26px 0 0;border-bottom:0}
  .steps4 li + li{padding-left:26px;border-left:1px solid var(--line)}
  .s4-i{padding-bottom:18px;border-bottom:1px solid var(--ink);font-size:124px}
  .s4-t{font-size:40px}
  .s4-get{margin-top:10px;padding-top:14px;border-top:1px dashed var(--line-2)}
}

/* документы по сделке: настоящие образцы листами на тёмной плите. Верх листа (шапка — самое узнаваемое) в рамке одной
   пропорции, у договора стопка страниц; наведение — лист приподнимается, «Открыть образец»; клик — просмотр (dialog.lb). */
.docs{display:grid;grid-template-columns:minmax(0, 1fr)}
.docs-br{display:none}
.docs-list{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:30px 16px;margin:0;padding:0;list-style:none}
.doc{display:flex;flex-direction:column;gap:8px;min-width:0}
.doc-sheet{position:relative;display:block;aspect-ratio:4 / 5;min-height:0;background:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.25),0 18px 30px -12px rgba(0,0,0,.7),0 4px 10px rgba(0,0,0,.35);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
/* картинка — абсолютом: у блока с aspect-ratio min-height:auto = высота содержимого, иначе листы разной высоты */
.doc-sheet img{position:absolute;z-index:1;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:top left;background:#fff}
.doc--dogovor .doc-sheet::before,.doc--dogovor .doc-sheet::after{content:"";position:absolute;inset:0;background:#f1efea;
  box-shadow:0 6px 14px -6px rgba(0,0,0,.6);transition:transform .45s var(--ease)}
.doc--dogovor .doc-sheet::before{transform:translate(7px, 7px) rotate(1.2deg)}
.doc--dogovor .doc-sheet::after{transform:translate(13px, 13px) rotate(2.2deg);background:#e4e1db}
.doc-sheet:hover,.doc-sheet:focus-visible{transform:translateY(-8px) rotate(-.6deg);
  box-shadow:0 1px 0 rgba(255,255,255,.25),0 30px 44px -14px rgba(0,0,0,.8),0 6px 14px rgba(0,0,0,.4)}
.doc--dogovor .doc-sheet:hover::after{transform:translate(18px, 16px) rotate(3.4deg)}
.doc-open{position:absolute;z-index:2;left:50%;bottom:16px;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;transform:translate(-50%, 6px);
  background:var(--ink);color:var(--bg-hi);font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  opacity:0;transition:opacity .3s,transform .3s var(--ease)}
.doc-open svg{width:16px;height:16px}
.doc-sheet:hover .doc-open,.doc-sheet:focus-visible .doc-open{opacity:1;transform:translate(-50%, 0)}
@media (hover:none){.doc-open{opacity:1;transform:translate(-50%, 0)}}
.doc-t{margin-top:12px;font:900 26px/.9 var(--disp);text-transform:uppercase}
.doc-w{font:500 10.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#9d9a93}
.doc-n{margin:0;font:400 14px/1.45 var(--text);color:#b5b2ab}
.docs-note{max-width:640px;margin:32px 0 0;padding-left:16px;border-left:2px solid rgba(215,212,206,.5);font:400 15px/1.5 var(--text);color:#d7d4ce}
@media (min-width:900px){
  .docs{grid-template-columns:repeat(4, minmax(0, 1fr));column-gap:36px}
  .docs-br{display:block;position:relative;margin:0 0 26px;padding-top:10px;border-top:1px solid rgba(215,212,206,.55);
    font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--bg-hi)}
  .docs-br::before,.docs-br::after{content:"";position:absolute;top:-6px;width:1px;height:11px;background:rgba(215,212,206,.75)}
  .docs-br::before{left:0}
  .docs-br::after{right:0}
  .docs-br--a{grid-column:1 / 3}
  .docs-br--b{grid-column:3 / 5}
  .docs-list{grid-column:1 / -1;grid-template-columns:repeat(4, minmax(0, 1fr));gap:36px}
  .doc-t{font-size:32px}
}

/* просмотр образца: на весь экран, листается стрелками и клавишами, закрывается Esc и кликом мимо листа */
.lb{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0;border:0;background:rgba(18,18,17,.94);color:var(--bg-hi)}
.lb::backdrop{background:rgba(18,18,17,.6)}
.lb[open]{display:flex;flex-direction:column;animation:rise .3s var(--ease)}
.lb-bar{display:flex;align-items:center;gap:16px;padding:12px var(--pad);border-bottom:1px solid rgba(215,212,206,.2)}
.lb-cap{flex:1;min-width:0;margin:0;font:800 22px/1 var(--disp);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-n{font:500 12px/1 var(--mono);color:#9d9a93}
.lb-x{height:40px;padding:0 14px;border:1px solid rgba(215,212,206,.5);background:none;color:inherit;font:500 11px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase}
.lb-x:hover{background:var(--bg-hi);color:var(--ink)}
.lb-body{flex:1;min-height:0;overflow:auto;padding:24px var(--pad) 40px;text-align:center;cursor:zoom-out}
.lb-body img{display:inline-block;width:auto;max-width:min(100%, 1100px);height:auto;background:#fff;box-shadow:0 24px 60px rgba(0,0,0,.6);cursor:default}
.lb-nav{position:absolute;top:50%;width:52px;height:72px;margin-top:-36px;border:1px solid rgba(215,212,206,.4);background:rgba(18,18,17,.7);
  color:var(--bg-hi);font:400 24px/1 var(--mono)}
.lb-nav:hover{background:var(--bg-hi);color:var(--ink)}
.lb-nav--p{left:12px}
.lb-nav--n{right:12px}
@media (max-width:899px){.lb-nav{top:auto;bottom:12px;margin:0;height:52px}}

/* реквизиты штампом и кнопка «Скопировать» */
.req-sec{display:grid;grid-template-columns:minmax(0, 1fr);gap:28px}
.copy{display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 20px;border:1px solid var(--ink);background:none;
  font:500 12px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;transition:background .2s,color .2s}
.copy svg{width:20px;height:20px}
.copy:hover,.copy.copied{background:var(--ink);color:var(--bg-hi)}
/* почта кнопкой «скопировать»: адрес как есть (без капса), ширина не прыгает на «Скопировано» */
.copy--mail{height:44px;padding:0 14px;gap:10px;border-color:var(--line-2);font:500 13px/1 var(--mono);letter-spacing:.02em;text-transform:none;cursor:pointer}
.copy--mail [data-copy-t]{min-width:19ch;text-align:left}
.copy--mail svg{width:18px;height:18px;flex:none}
.menu-mail{margin-top:14px;flex:none;align-self:flex-start}   /* меню - колонка flex: без этого кнопку сжимает по высоте и тянет на всю ширину */
/* подвал мегаменю с почтой: условия сжимаются и встают в две строки справа, «Весь каталог» остаётся в ряду;
   на узком десктопе, где ряд всё же переносится, кнопка каталога уходит к правому краю, а не висит слева одна */
.mega-foot .mega-note{flex:1 1 280px;min-width:0;justify-content:flex-end}
.mega-foot .mega-all{margin-left:auto}
.req-l .who-links{margin-top:22px}
.stamp--big{grid-template-columns:minmax(0, 96px) minmax(0, 1fr)}
.stamp--big dd{font-size:16px}
.stamp--big dd.num{font:800 30px/1 var(--disp);letter-spacing:.02em;font-variant-numeric:tabular-nums}
@media (min-width:900px){
  .req-sec{grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);gap:64px;align-items:start}
  .stamp--big{grid-template-columns:minmax(0, 150px) minmax(0, 1fr)}
  .stamp--big dt,.stamp--big dd{padding:14px 18px}
  .stamp--big dd.num{font-size:42px}
}

/* контакты: табло связи на первом экране, где работаем */
.ct-bar{display:grid;grid-template-columns:minmax(0, 1fr);margin:18px calc(-1 * var(--pad)) 0;border-top:1px solid var(--ink);animation:rise .7s var(--ease) .5s both}
.ct-cell{display:flex;flex-direction:column;gap:9px;min-width:0;padding:16px var(--pad);border-bottom:1px solid var(--line);text-decoration:none;transition:background .2s,color .2s}
a.ct-cell:hover{background:var(--ink);color:var(--bg-hi)}
.ct-k{font:500 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.ct-cell b{font:900 34px/.88 var(--disp);text-transform:uppercase;white-space:nowrap}
.ct-cell--tel b{font-size:46px;font-variant-numeric:tabular-nums}
.ct-cell small{font:400 12px/1.35 var(--mono);color:var(--mute)}
a.ct-cell:hover .ct-k,a.ct-cell:hover small{color:#9d9a93}
.ct-cell--cta{display:none}
.ct-grid{display:grid;grid-template-columns:minmax(0, 1fr);gap:28px}
.ct-cells{display:grid;grid-template-columns:minmax(0, 1fr);margin:0;border-top:1px solid var(--ink)}
.ct-cells > div{padding:18px 0;border-bottom:1px solid var(--line);min-width:0}
.ct-cells dt{display:flex;gap:8px;font:500 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.ct-cells dt i{font-style:normal;color:var(--ink)}
.ct-cells dd{margin:9px 0 0;font:900 36px/.9 var(--disp);text-transform:uppercase;overflow-wrap:anywhere}
.ct-cells dd small{display:block;margin-top:10px;max-width:440px;font:400 14px/1.45 var(--text);text-transform:none;color:var(--ink-2)}
.ct-cells a{text-underline-offset:3px}
.ct-cells dd.ct-long{font-size:30px;overflow-wrap:normal}
.zmap-fig--s .zmap{max-width:640px;margin:0 auto}
@media (min-width:900px){
  .ct-bar{grid-template-columns:minmax(0, 1.7fr) repeat(var(--ctn, 2), minmax(0, 1fr)) minmax(0, 1.25fr);margin-top:24px}
  .ct-cell--tel b{font-size:clamp(20px, 2vw, 38px)}      /* номер целиком в своей ячейке при пяти ячейках */
  .ct-cell{padding:20px 24px 22px;border-bottom:0;border-right:1px solid var(--line)}
  .ct-cell:first-child{padding-left:var(--pad)}
  .ct-cell--tel b{font-size:clamp(40px, 3.5vw, 58px)}
  .ct-cell--cta{display:flex;justify-content:center;border-right:0;border-left:1px solid var(--ink);padding-right:var(--pad)}
  .ct-cell--cta .buy{height:62px}
  .ct-grid{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);gap:56px;align-items:center}
  .ct-cells{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .ct-cells > div{padding:24px 24px 24px 0}
  .ct-cells > div:nth-child(2n){padding-left:24px;border-left:1px solid var(--line)}
  .ct-cells dd{font-size:44px}
  .ct-cells dd.ct-long{font-size:clamp(22px, 2.2vw, 32px)}
}

/* ---------- 404 ---------- */
.e404{padding:0 var(--pad) 48px}
.e404 .mark-a{display:block;font:900 min(calc((100vw - 2 * var(--pad)) / 1.5), 520px)/.78 var(--disp);text-transform:uppercase}
.e404 p{max-width:560px;margin:18px 0;font:500 18px/1.4 var(--text)}

/* закреплённая кнопка: мобильный — всегда; десктоп — на карточке, когда главная кнопка ушла из вида */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(201,198,191,.94);border-top:1px solid var(--ink);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.dock .buy{height:62px;padding:0 16px}
.dock .buy-t{font-size:27px}
.dock-2{display:grid;grid-template-columns:auto 1fr;gap:8px}
.dock-call{display:flex;align-items:center;justify-content:center;width:62px;height:62px;border:1px solid var(--ink);background:none;text-decoration:none}
.dock-call svg{width:22px;height:22px}
.dock{display:flex;gap:8px}
.dock > .buy,.dock > .dock-2{flex:1;min-width:0}
/* карточка: звонок и MAX рядом с покупкой (27.10). Сумма в кнопке не помещается - она в цене и в шторке; при машине MAX уходит */
.dock > .dock-call{flex:none}
.dock-msg{font:700 13px/1 var(--mono);letter-spacing:.04em;color:var(--ink)}
.dock--card .buy{padding:0 12px}
.dock--card .buy-t{font-size:23px}
.dock--card .buy-s [data-sum]{display:none}
.dock--card:has(.dock-cart:not([hidden])) .dock-msg{display:none}

/* ---------- шторка «в 1 клик» ---------- */
.sheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;visibility:hidden;pointer-events:none}
.sheet-bg{position:absolute;inset:0;background:rgba(18,18,17,.62);opacity:0;transition:opacity .35s}
.sheet-panel{position:relative;width:100%;max-height:calc(100% - 40px);overflow:auto;padding:10px var(--pad) calc(18px + env(safe-area-inset-bottom));
  background-color:var(--bg-hi);background-image:var(--grain),var(--grain-lt);background-size:220px 220px,260px 260px;
  border-top:1px solid var(--ink);transform:translateY(100%);transition:transform .45s var(--ease)}
.sheet.open{visibility:visible;pointer-events:auto}
.sheet.open .sheet-bg{opacity:1}
.sheet.open .sheet-panel{transform:none}
.sheet.instant .sheet-bg,.sheet.instant .sheet-panel{transition:none}
.grip{width:44px;height:4px;margin:0 auto 12px;background:var(--ink);opacity:.35}
.sheet-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--ink)}
.sheet-title{margin:0;font:900 34px/.85 var(--disp);text-transform:uppercase}
.x{display:flex;align-items:center;gap:8px;border:1px solid var(--ink);background:none;height:36px;padding:0 10px;font:500 11px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;flex:none}
.x:hover{background:var(--ink);color:var(--bg-hi)}
.order{display:grid;grid-template-columns:1fr auto;align-items:end;gap:4px 12px;padding:14px 0;border-bottom:1px solid var(--line)}
.order[hidden]{display:none!important}
.order-k{grid-column:1/-1;font:500 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.order-name{font:900 30px/.9 var(--disp);min-width:0;overflow-wrap:anywhere}
.order-name span{font-weight:600;color:var(--mute)}
.order-sum{font:800 30px/.9 var(--disp);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.order-sum.ask{font:500 11px/1.2 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--acc);white-space:normal}
.order-meta{grid-column:1/-1;font:400 11.5px/1.3 var(--mono);color:var(--mute)}
.order-stock{color:var(--ink);font-weight:500}
.sheet form{padding-top:14px}
.tel-lbl{display:block;margin-bottom:8px;font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.tel{display:block;width:100%;height:60px;padding:0 16px;border:1px solid var(--ink);background:#E4E2DD;
  font:700 26px/1 var(--text);letter-spacing:.01em;font-variant-numeric:tabular-nums}
.tel::placeholder{color:#8a8780;font:400 22px/1 var(--mono);letter-spacing:.02em}
.tel:focus{outline:2px solid var(--ink);outline-offset:2px}
.tel-err{min-height:16px;margin:6px 0 0;font:500 12px/1.3 var(--mono);color:#9B1C1C}
.zb-hp{display:none!important}
.send{margin-top:8px}
.send .buy-t{font-size:30px}
.note{margin:12px 0 0;font:400 14px/1.4 var(--text);color:var(--ink-2)}
.note b{font-weight:600;color:var(--ink)}
.consent{margin:10px 0 0;font:400 11px/1.4 var(--mono);color:var(--mute)}
.consent a{color:var(--ink)}
.sheet .alt-links{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.done,.fail{display:none;padding:22px 0 6px}
.done b,.fail b{display:block;font:900 40px/.88 var(--disp);text-transform:uppercase}
.done p,.fail p{margin:10px 0 0;font:400 15px/1.45 var(--text);color:var(--ink-2)}
.fail a{color:var(--acc);font-weight:700}
.sheet.sent form,.sheet.failed form{display:none}
.sheet.sent .done{display:block}
.sheet.failed .fail{display:block}
body.locked{overflow:hidden}

/* ---------- планшет ---------- */
@media (min-width:600px){
  .mark{--m:min(calc((100vw - 2 * var(--pad)) / (var(--n2) * .41)), 360px);grid-template-columns:auto auto 1fr;grid-template-areas:"a b ." "dim dim ." "sub sub sub";column-gap:.127em}
  .mark--solo{grid-template-columns:auto 1fr;grid-template-areas:"a ." "dim ." "sub sub"}
  .mark-sub{flex-direction:row;align-items:baseline;gap:16px;padding:16px 0 0;font-size:22px}
  .mark-sub small{font-size:11px}
  .mark-sub .em{display:inline;font:inherit;margin:0}
}

/* ---------- десктоп ---------- */
@media (min-width:900px){
  body{font-size:16px}
  .hero-top{min-height:44px}
  .gost{display:block}
  .mark{margin-top:4px}
  .mark-sub{font-size:26px;padding-top:8px}
  .mark-sub small{display:none}
  .hero-meta{display:flex;justify-content:flex-end;gap:22px;height:30px;margin-top:-30px;
    font:500 12px/30px var(--mono);letter-spacing:.02em;color:var(--ink-2);animation:rise .7s var(--ease) .55s both}
  .band{display:grid;grid-template-columns:1fr 1fr;margin-top:16px}
  .blk-p,.blk-v,.blk-q,.blk-b,.blk-d,.blk-a,.blk-t{order:0}
  .col{display:flex;flex-direction:column}
  .col-a{grid-column:1/-1;order:2;border-top:1px solid var(--ink)}
  .col-c{border-left:1px solid var(--ink)}
  .blk{padding:18px 24px;border-bottom:1px solid var(--line)}
  .col .blk:last-child{border-bottom:0;flex:1}
  .blk-b{display:block;padding-top:16px}
  .dock{display:none}
  .dock.show{display:block;left:auto;right:24px;bottom:24px;width:420px;padding:0;border:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;animation:rise .35s var(--ease)}
  .dock--card .dock-call{display:none}
  .dock--card .buy{padding:0 16px}
  .dock--card .buy-t{font-size:27px}
  .dock--card .buy-s [data-sum]{display:inline}
  .price{font-size:104px}
  .price-ask{font-size:76px}
  .lbl-d{display:flex}
  .price-row{flex-direction:column;align-items:flex-start;gap:12px}
  .price-unit{padding:0}
  .price-unit span{display:inline}
  .price-unit span+span::before{content:" · "}
  .blk-a .drawing{margin-top:10px}
  .dimline{grid-area:dim;display:flex;align-items:center;gap:14px;height:22px;margin:-4px 0 0;font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:none;color:var(--ink);animation:rise .7s var(--ease) .45s both}
  .dimline i{flex:1;height:1px;background:var(--ink);position:relative}
  .dimline i:first-child::before,.dimline i:last-child::after{content:"";position:absolute;top:-8px;width:1px;height:17px;background:var(--ink)}
  .dimline i:first-child::before{left:0}.dimline i:last-child::after{right:0}
  .var-list,.var-list--2{grid-template-columns:1fr;border:0;border-top:1px solid var(--ink)}
  .var{flex-direction:row;align-items:center;min-height:44px;padding:0 12px;border-bottom:1px solid var(--ink)}
  .var+.var{border-left:0}
  .var-list--list{border:0;border-top:1px solid var(--ink)}
  .var-list--list .var+.var{border-top:0}
  .var-box{display:block;width:12px;height:12px;border:1px solid currentColor;flex:none;margin-right:2px}
  .var:has(input:checked) .var-box{background:var(--bg-hi);box-shadow:inset 0 0 0 2px var(--ink)}
  .var-name{flex:1;font-size:14px}
  .var-price{font-size:13px}
  .sheet{align-items:center}
  .sheet-panel{width:540px;max-height:calc(100% - 64px);padding:22px 28px 26px;border:1px solid var(--ink);transform:translateY(24px);opacity:0;transition:transform .4s var(--ease),opacity .3s}
  .sheet.open .sheet-panel{opacity:1}
  .grip{display:none}
  .sec{padding:88px var(--pad) 72px}
  .nb a{grid-template-columns:300px 1fr 160px;grid-template-areas:"m s p";align-items:center;padding:20px 0}
  .nb-m{font-size:56px}
  .nb-p{font-size:40px;text-align:right}
  .nb-s{height:30px;margin-right:24px}
  .pledge li{grid-template-columns:80px 1fr}
}
@media (min-width:1200px){
  .band{grid-template-columns:1.42fr 1fr 1.08fr}
  .col-a{grid-column:auto;order:0;border-top:0}
  .col-b{border-left:1px solid var(--ink)}
  .blk{padding:16px 24px}
  .blk-a{padding-left:var(--pad)}
  .col-c .blk{padding-right:var(--pad)}
  .specs{grid-template-columns:repeat(4,1fr);margin-top:10px}
  .spec{padding:10px 10px 10px 12px!important;border-left:1px solid var(--line)!important}
  .spec-wide+.spec{padding-left:0!important;border-left:0!important}
  .spec dd{font-size:34px}
  .spec dt{font-size:10px;letter-spacing:.02em}
  .spec-wide{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .drawing .draw-in{stroke-dashoffset:0}
}

/* ---------- машина-корзина: «+ в машину», плашка, уведомление (order.js) ---------- */
.ico-truck{display:block;width:26px;height:20px}
.it-add{position:relative;display:flex;align-items:center;justify-content:center;border:0;border-left:1px solid var(--line);background:none;color:var(--ink);cursor:pointer;transition:background .2s,color .2s}
.it-add .ico-truck{width:25px;height:19px}
.it-add b{position:absolute;top:9px;right:8px;font:800 16px/1 var(--disp)}
.it-add:hover{background:var(--ink);color:var(--bg-hi)}
.it-add:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
.cart-add{display:grid;grid-template-columns:auto minmax(0, 1fr);align-items:center;column-gap:12px;width:100%;min-height:52px;margin-top:8px;padding:8px 14px;
  border:1px solid var(--ink);background:none;color:inherit;font:800 20px/1 var(--disp);text-transform:uppercase;text-align:left;cursor:pointer;transition:background .2s,color .2s}
.cart-add .ico-truck{width:28px;height:22px}
.cart-add small{grid-column:2;margin-top:4px;font:500 10.5px/1.25 var(--mono);letter-spacing:.02em;text-transform:none;color:var(--mute)}
.cart-add:hover{background:var(--ink);color:var(--bg-hi)}
.cart-add:hover small{color:#9d9a93}
.cart-add:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.slab .cart-add{border-color:rgba(215,212,206,.6)}
.slab .cart-add:hover{background:var(--bg-hi);color:var(--ink)}
.lpv .cart-add{margin-top:0}
.dock-cart{position:relative;display:flex;align-items:center;justify-content:center;flex:none;width:62px;height:62px;border:1px solid var(--ink);background:var(--ink);color:var(--bg-hi);cursor:pointer}
.dock-cart[hidden]{display:none}
.dock-cart .ico-truck{width:28px;height:22px}
.dock-cart b{position:absolute;top:-8px;right:-8px;min-width:24px;height:24px;padding:0 6px;border-radius:12px;background:var(--acc);color:var(--on-acc);font:700 12px/24px var(--mono);text-align:center}
.cartpill{position:fixed;right:24px;bottom:24px;z-index:45;display:none;align-items:center;gap:14px;max-width:calc(100vw - 48px);padding:8px 8px 8px 16px;border:1px solid var(--ink);
  background:var(--ink);color:var(--bg-hi);box-shadow:0 18px 40px -16px rgba(0,0,0,.65);cursor:pointer;text-align:left;animation:rise .4s var(--ease)}
.cartpill .ico-truck{flex:none;width:32px;height:25px}
.cartpill > span{min-width:0}
.cartpill small{display:block;font:500 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#9d9a93}
.cartpill b{display:block;margin-top:6px;overflow:hidden;font:800 19px/1 var(--disp);text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis}
.cartpill .cartpill-go{display:flex;align-items:center;gap:8px;flex:none;height:46px;padding:0 14px;background:var(--acc);color:var(--on-acc);font:800 20px/1 var(--disp);text-transform:uppercase}
.cartpill-go svg{width:18px;height:18px;transition:transform .3s var(--ease)}
.cartpill:hover .cartpill-go{background:var(--acc-2)}
.cartpill:hover .cartpill-go svg{transform:translateX(4px)}
.cart-toast{position:fixed;left:50%;bottom:96px;z-index:55;display:flex;align-items:center;gap:12px;width:max-content;max-width:calc(100% - 24px);padding:8px 8px 8px 16px;
  background:var(--ink);color:var(--bg-hi);font:400 13.5px/1.35 var(--text);box-shadow:0 18px 40px -16px rgba(0,0,0,.6);transform:translate(-50%, 12px);opacity:0;transition:opacity .25s,transform .3s var(--ease)}
.cart-toast[hidden]{display:none}
.cart-toast.show{opacity:1;transform:translate(-50%, 0)}
.cart-toast b{font-weight:600}
.cart-toast button{display:inline-flex;align-items:center;gap:6px;flex:none;height:38px;padding:0 12px;border:0;background:var(--acc);color:var(--on-acc);font:800 17px/1 var(--disp);text-transform:uppercase;cursor:pointer}
.cart-toast button svg{width:16px;height:16px}
/* с 900 px машина живёт в шапке (header.php .top-cart, заполняет order.js): плашка #cartpill не показывается (итог в неё
   order.js пишет по-прежнему), плавающая кнопка карточки (dock) не поднимается над плашкой, уведомление «в машине»
   встаёт под шапкой справа, рядом с машиной */
@media (min-width:900px){
  .dock-cart{display:none!important}
  .cart-toast{left:auto;right:24px;top:calc(var(--hdr) + var(--rail) + 12px);bottom:auto;transform:translateY(-12px)}
  .cart-toast.show{transform:none}
}

/* ---------- переключатель (кран на объекте) ---------- */
.tgl{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font:500 13px/1.25 var(--text);user-select:none}
.tgl input{position:absolute;opacity:0;pointer-events:none}
.tgl-b{position:relative;flex:none;width:46px;height:26px;border:1px solid var(--ink);background:rgba(215,212,206,.5);transition:background .2s,border-color .2s}
.tgl-b::after{content:"";position:absolute;top:4px;left:4px;width:16px;height:16px;background:var(--ink);transition:transform .25s var(--ease),background .2s}
.tgl input:checked + .tgl-b{background:var(--acc);border-color:var(--acc)}
.tgl input:checked + .tgl-b::after{transform:translateX(20px);background:var(--on-acc)}
.tgl input:focus-visible + .tgl-b{outline:2px solid var(--ink);outline-offset:2px}
.tgl i{font:500 11px/1 var(--mono);font-style:normal;letter-spacing:.06em;margin-right:6px;color:var(--mute)}
.slab .tgl-b{border-color:rgba(215,212,206,.6);background:rgba(215,212,206,.08)}
.slab .tgl-b::after{background:var(--bg-hi)}
.slab .tgl i{color:#9d9a93}

/* ---------- «как поедет»: вывод, две машины, рисунок рейса, итог, добор ---------- */
.mv{min-width:0}
.mv-empty{margin:0;padding:22px 0;font:500 13px/1.45 var(--mono);color:var(--mute)}
.mv-start{padding:4px 0 8px}
.mv-start-h{margin:0;font:900 clamp(44px, 5vw, 72px)/.84 var(--disp);text-transform:uppercase}
.mv-start-t{max-width:560px;margin:14px 0 20px;font:400 15px/1.5 var(--text);color:var(--ink-2)}
.mv-start-c{display:flex;flex-wrap:wrap;gap:6px}
.mv-start-c .chip{min-height:42px;padding:10px 14px 9px;font:800 20px/1 var(--disp);text-transform:uppercase;cursor:pointer}
.co--empty .co-ctl .tgl{display:none}
.mv-verdict{display:flex;flex-direction:column;gap:7px;padding:14px 16px;border-left:4px solid var(--acc);background:rgba(30,64,175,.08)}
.mv-verdict b{font:900 32px/.88 var(--disp);text-transform:uppercase}
.mv-verdict span{font:400 14px/1.4 var(--text);color:var(--ink-2)}
.mv-vs{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);gap:8px;margin-top:10px}
.mv-v{display:grid;grid-template-columns:minmax(0, 1fr) auto;grid-template-areas:"n t" "c t" "p p" "o o";gap:5px 10px;align-items:end;min-width:0;padding:12px 14px;
  border:1px solid var(--line-2);background:none;color:inherit;text-align:left;cursor:pointer;transition:background .2s,border-color .2s,opacity .2s}
.mv-v:hover{background:rgba(215,212,206,.5)}
.mv-v.on{border:2px solid var(--ink);padding:11px 13px;background:rgba(233,230,224,.8)}
.mv-v.off{opacity:.55}
.mv-v.off:hover{opacity:.8}
.mv-n{grid-area:n;font:800 19px/.95 var(--disp);text-transform:uppercase}
.mv-t{grid-area:t;display:flex;align-items:baseline;gap:6px;font:500 10.5px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.mv-t b{font:900 46px/.78 var(--disp);font-variant-numeric:tabular-nums}
.mv-c{grid-area:c;font:800 22px/1 var(--disp);color:var(--acc);white-space:nowrap}
.mv-p{grid-area:p;font:500 11.5px/1.3 var(--mono);color:var(--mute)}
.mv-p:empty{display:none}
.mv-note{grid-area:o;font:500 10.5px/1.25 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.mv-v.off .mv-note::before{content:"⚠ "}
.mv-pic{margin-top:14px}
.mv-pics{display:grid;grid-template-columns:minmax(0, 1fr);gap:18px;margin-top:16px}
.mv-col{min-width:0}
.mv-cap{margin:0 0 4px;font:500 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.mv-col .mv-pic{margin-top:0}
.mv--both .mv-col--m .tk-pic{width:var(--r, 58%)}
.mv .tk-sum{display:flex;flex-wrap:wrap;gap:4px 12px}
.sw-l{white-space:nowrap}
.sw{display:inline-block;width:11px;height:11px;margin-right:6px;vertical-align:-1px;border:1px solid currentColor;
  background:repeating-linear-gradient(var(--a, 45deg), transparent 0 2.5px, currentColor 2.5px 3.5px)}
.sw-1{--a:-45deg}
.sw-2{--a:90deg}
.sw-3{--a:0deg}
.tk-pic .fr{fill:none;stroke:var(--ink);stroke-opacity:.45;stroke-width:1;stroke-dasharray:6 5;vector-effect:non-scaling-stroke}
.slab .tk-pic .fr{stroke:var(--bg-hi);stroke-opacity:.5}
.mv-total{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 28px;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--ink)}
.mv-total div{display:flex;flex-direction:column;gap:6px}
.mv-total dt{font:500 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.mv-total dd{margin:0;font:800 24px/1 var(--disp);font-variant-numeric:tabular-nums}
.mv-total .mv-sum{margin-left:auto}
.mv-sum dd{font-size:38px;color:var(--acc)}
.mv-hint{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:14px 0 0;padding:10px 12px;border:1px dashed var(--acc);font:400 13.5px/1.4 var(--text)}
.mv-hint button{flex:none;height:38px;padding:0 12px;border:0;background:var(--acc);color:var(--on-acc);font:800 17px/1 var(--disp);text-transform:uppercase;cursor:pointer}
.mv-hint button:hover{background:var(--acc-2)}
.mv-fine{margin:12px 0 0;font:400 11px/1.45 var(--mono);color:var(--mute)}
.slab .mv-verdict{background:rgba(30,64,175,.28)}
.slab .mv-verdict span{color:#c9c6bf}
.slab .mv-v{border-color:rgba(215,212,206,.35)}
.slab .mv-v:hover{background:rgba(215,212,206,.07)}
.slab .mv-v.on{border-color:var(--bg-hi);background:rgba(215,212,206,.1)}
.slab .mv-c,.slab .mv-sum dd{color:#AEBFFF}
.slab .mv-p,.slab .mv-cap,.slab .mv-fine,.slab .mv-total dt,.slab .mv-empty{color:#9d9a93}
.slab .mv-note{color:#c9c6bf}
.slab .mv-total{border-top-color:rgba(215,212,206,.4)}
.slab .mv-hint{border-color:#AEBFFF}
@media (max-width:599px){
  .mv-v{grid-template-areas:"n n" "c t" "p p" "o o";padding:10px 11px}
  .mv-v.on{padding:9px 10px}
  .mv-n{font-size:17px}
  .mv-t b{font-size:36px}
  .mv-c{font-size:19px}
  .mv-verdict b{font-size:28px}
  .mv-total .mv-sum{margin-left:0}
}
@media (min-width:1100px){
  .mv--both .mv-pics{grid-template-columns:var(--gc, minmax(0, 58fr) minmax(0, 100fr));align-items:start;gap:28px}
  .mv--both .mv-col--m .tk-pic{width:100%}
}

/* «Сколько везёт машина»: действия и кран */
.tk-crane{margin-top:20px}
.tk-acts{display:grid;grid-template-columns:minmax(0, 1fr);gap:8px;margin-top:22px}
.tk-acts .tk-buy{margin-top:0}
.tk-acts .cart-add{min-height:56px;margin-top:0}
.mv.calm .tk-pic .cg{animation:none}          /* пересчёт без смены марки/рейса — груз не перегружаем заново */
.tk-out{min-width:0;padding-top:4px}
.tk .mv{min-height:420px}
@media (min-width:1100px){
  .tk-grid{grid-template-columns:minmax(300px, 380px) minmax(0, 1fr);gap:40px}
  .tk-out{border-top:0;border-left:1px solid rgba(215,212,206,.25);padding:0 0 0 40px}
}

/* карточка: «Как поедет» */
.mv-sec-ctl{margin:-8px 0 18px}

/* ---------- оформление заказа (template-parts/checkout.php) ---------- */
.co{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;visibility:hidden;pointer-events:none}
.co-bg{position:absolute;inset:0;background:rgba(18,18,17,.62);opacity:0;transition:opacity .35s}
.co-panel{position:relative;display:flex;flex-direction:column;width:100%;height:100%;
  background-color:var(--bg-hi);background-image:var(--grain),var(--grain-lt);background-size:220px 220px,260px 260px;transform:translateY(100%);transition:transform .45s var(--ease)}
.co.open{visibility:visible;pointer-events:auto}
.co.open .co-bg{opacity:1}
.co.open .co-panel{transform:none}
.co-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex:none;padding:12px var(--pad);border-bottom:1px solid var(--ink)}
.co-title{margin:0;font:900 34px/.85 var(--disp);text-transform:uppercase}
.co-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}
.co-plan{border-bottom:1px solid var(--ink)}
.co-sum{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;padding:12px var(--pad);border:0;background:var(--ink);color:var(--bg-hi);
  font:500 12.5px/1.35 var(--mono);text-align:left;cursor:pointer}
.co-sum::after{content:"показать ▾";flex:none;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#9d9a93}
.co--plan .co-sum::after{content:"скрыть ▴"}
.co-plan-in{display:none;padding:14px var(--pad) 18px}
.co--plan .co-plan-in,.co--empty .co-plan-in{display:block}
.co--empty .co-sum{display:none}
.co-lines{margin:0;padding:0;list-style:none;border-top:1px solid var(--ink)}
.co-lines:empty{border-top:0}
.co-ln{display:grid;grid-template-columns:minmax(0, 1fr) auto 30px;grid-template-areas:"m q x" "p s x";gap:6px 12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.co-lm{grid-area:m;min-width:0;overflow:hidden;font:900 26px/.9 var(--disp);text-transform:uppercase;text-decoration:none;white-space:nowrap;text-overflow:ellipsis}
.co-lm:hover{text-decoration:underline;text-underline-offset:3px}
.co-lp{grid-area:p;font:500 11.5px/1.2 var(--mono);color:var(--mute)}
.co-ln .stepper{grid-area:q}
.co-ls{grid-area:s;justify-self:end;font:800 19px/1 var(--disp);color:var(--acc);font-variant-numeric:tabular-nums}
.co-lx{grid-area:x;align-self:stretch;border:0;background:none;color:var(--mute);font:500 14px/1 var(--mono);cursor:pointer}
.co-lx:hover{color:var(--ink);background:rgba(18,18,17,.06)}
.stepper--s{height:38px}
.stepper--s button{width:34px;font-size:18px}
.stepper--s input{width:54px;font-size:17px}
.stepper--s .unit{padding:0 8px 0 3px}
.co-add{position:relative;margin-top:10px}
.co-add input{width:100%;height:44px;padding:0 14px;border:1px dashed var(--ink);background:rgba(215,212,206,.35);font:500 14px/1 var(--mono);color:var(--ink)}
.co-add input:focus{outline:2px solid var(--ink);outline-offset:2px;border-style:solid}
.co-sugg{position:absolute;left:0;right:0;top:100%;z-index:2;margin:0;padding:0;list-style:none;border:1px solid var(--ink);border-top:0;background:var(--bg-hi);box-shadow:0 16px 30px -18px rgba(0,0,0,.5)}
.co-sugg[hidden]{display:none}
.co-sugg button{display:block;width:100%;padding:10px 14px;border:0;border-top:1px solid var(--line);background:none;font:800 20px/1 var(--disp);text-transform:uppercase;text-align:left;cursor:pointer}
.co-sugg button:hover,.co-sugg button:focus-visible{background:var(--ink);color:var(--bg-hi)}
.co-ctl{display:grid;grid-template-columns:minmax(0, 1fr);gap:12px;margin:14px 0 18px}
.co-form{padding:16px var(--pad) calc(28px + env(safe-area-inset-bottom))}
.co-step{display:flex;align-items:baseline;gap:10px;margin:22px 0 10px;font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.co-form form > .co-step:first-child,.co-done .co-step{margin-top:0}
.co-step i{font-style:normal;color:var(--mute)}
.co-step small{font-size:11px;letter-spacing:.02em;text-transform:none;color:var(--mute)}
.co-err{margin:6px 0 0;font:500 12px/1.3 var(--mono);color:#9B1C1C}
.co-err:empty{display:none}
.co-grid{display:grid;grid-template-columns:minmax(0, 1fr);gap:10px}
.fl{display:flex;flex-direction:column;gap:6px;min-width:0}
.fl > span{font:500 10.5px/1.2 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.fl input,.fl textarea{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--ink);background:#E4E2DD;font:400 16px/1.3 var(--text);color:var(--ink)}
.fl textarea{min-height:88px;resize:vertical}
.fl input:focus,.fl textarea:focus{outline:2px solid var(--ink);outline-offset:2px}
.fl[data-err]:not([data-err=""])::after{content:attr(data-err);font:500 12px/1.3 var(--mono);color:#9B1C1C}
.fl[data-err]:not([data-err=""]) input{border-color:#9B1C1C}
.co-form form > .fl + .fl{margin-top:10px}
.drop{margin-top:12px;border:1px dashed var(--ink);background:rgba(215,212,206,.35);transition:background .2s,border-color .2s}
.drop.over{border-style:solid;border-color:var(--acc);background:rgba(30,64,175,.1)}
.drop-in{display:grid;grid-template-columns:auto minmax(0, 1fr);grid-template-areas:"i b" "i s";gap:4px 14px;align-items:center;padding:14px;cursor:pointer}
.drop-in svg{grid-area:i;width:30px;height:30px}
.drop-in b{grid-area:b;font:800 21px/1 var(--disp);text-transform:uppercase}
.drop-in span{grid-area:s;font:400 12px/1.4 var(--mono);color:var(--mute)}
.drop-in:hover{background:rgba(215,212,206,.5)}
#co-files:focus-visible + .drop-in{outline:2px solid var(--ink);outline-offset:2px}
.drop-list{margin:0;padding:0 14px;list-style:none}
.drop.has .drop-list{padding-bottom:8px}
.drop-list li{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line);font:500 13px/1.3 var(--mono)}
.drop-list span{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.drop-list small{flex:none;color:var(--mute)}
.drop-list button{flex:none;width:30px;height:30px;border:0;background:none;color:var(--mute);font:500 14px/1 var(--mono);cursor:pointer}
.drop-list button:hover{color:var(--ink);background:rgba(18,18,17,.06)}
.co-form .send{margin-top:22px}
.co-form .alt-links{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.co-done b,.co-fail b{display:block;font:900 46px/.88 var(--disp);text-transform:uppercase}
.co-done p,.co-fail p{margin:12px 0 0;font:400 15px/1.5 var(--text);color:var(--ink-2)}
.co-done-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.co-fail{margin-top:18px;padding:14px;border:1px solid #9B1C1C}
.co-fail a{color:var(--acc);font-weight:700}
.co-done[hidden],.co-fail[hidden],.co-form form[hidden]{display:none}
@media (min-width:600px){
  .co-grid{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr)}
  .co-grid .fl--w{grid-column:1 / -1}
  .co-ctl{grid-template-columns:minmax(0, 1fr) auto;align-items:center}
}
@media (min-width:1000px){
  .co{align-items:center;padding:3vh 3vw}
  .co-panel{width:min(1360px, 100%);height:auto;max-height:94vh;border:1px solid var(--ink);box-shadow:0 40px 90px -30px rgba(0,0,0,.75);
    opacity:0;transform:translateY(24px);transition:transform .4s var(--ease),opacity .3s}
  .co.open .co-panel{opacity:1}
  .co-head{padding:14px 28px}
  .co-title{font-size:44px}
  .co-body{display:grid;grid-template-columns:minmax(0, 1.3fr) minmax(380px, .85fr);overflow:hidden}
  .co-plan{border-bottom:0;border-right:1px solid var(--ink);overflow:auto;max-height:calc(94vh - 74px);overscroll-behavior:contain}
  .co-sum{display:none}
  .co-plan-in{display:block;padding:22px 28px 26px}
  .co-form{overflow:auto;max-height:calc(94vh - 74px);padding:22px 28px 28px;overscroll-behavior:contain}
}
@media (prefers-reduced-motion:reduce){.co-panel,.co-bg,.cart-toast{transition:none}}

/* согласие на обработку ПДн — отдельной галочкой, по умолчанию снята (152-ФЗ с 01.09.2025) */
.agree{position:relative;display:grid;grid-template-columns:24px minmax(0, 1fr);gap:12px;align-items:start;margin-top:20px;cursor:pointer;font:400 13.5px/1.45 var(--text);color:var(--ink-2)}
.agree input{position:absolute;opacity:0;pointer-events:none}
.agree-b{position:relative;width:24px;height:24px;border:1.5px solid var(--ink);background:#E4E2DD;transition:background .2s}
.agree-b::after{content:"";position:absolute;left:7px;top:2px;width:7px;height:13px;border:solid var(--on-acc);border-width:0 2.5px 2.5px 0;transform:rotate(45deg);opacity:0}
.agree input:checked + .agree-b{background:var(--acc);border-color:var(--acc)}
.agree input:checked + .agree-b::after{opacity:1}
.agree input:focus-visible + .agree-b{outline:2px solid var(--ink);outline-offset:2px}
.agree a{color:var(--ink);text-underline-offset:3px}
.agree + .co-err{margin-top:8px}

/* уведомление о cookie (только при подключённой Метрике) */
.cookie{position:fixed;left:12px;right:12px;bottom:calc(92px + env(safe-area-inset-bottom));z-index:44;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  padding:12px 14px;border:1px solid var(--ink);background:var(--bg-hi);box-shadow:0 16px 36px -18px rgba(0,0,0,.55);font:400 13px/1.45 var(--text)}
.cookie[hidden]{display:none}
.cookie p{flex:1 1 260px;margin:0}
.cookie a{color:var(--ink)}
.cookie .chip{cursor:pointer}
/* телефон - короткий текст в одну полосу с кнопкой (27.10): полный закрывал пятую часть экрана на выборе исполнения */
.cookie .ck-l{display:none}
@media (max-width:899px){
  .cookie{flex-wrap:nowrap;gap:10px;padding:8px 10px;font-size:12px;line-height:1.35}
  .cookie .ck-s{flex:1 1 0;min-width:0}
  .cookie .chip{flex:none}
}
@media (min-width:900px){.cookie{left:24px;right:auto;bottom:24px;max-width:520px}.cookie .ck-l{display:block}.cookie .ck-s{display:none}}

/* ---------- города: доставка в город, соседние разделы и города (template-parts/geo.php) ---------- */
.geo-grid{display:grid;grid-template-columns:minmax(0, 1fr);gap:30px;margin-top:22px}
.geo-txt p{max-width:680px;margin:0 0 14px;font:400 17px/1.5 var(--text);color:var(--ink-2)}
.geo-txt p:first-child{font-size:19px;color:var(--ink)}
.geo-txt .geo-more{margin:22px 0 0}
.geo-k{margin:0 0 9px;font:500 10.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.geo-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 26px;padding:0;list-style:none}
.geo-chips:last-child{margin-bottom:0}
@media (min-width:900px){
  .geo-grid{grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr);gap:56px;margin-top:30px}
}

/* ---------- калькуляторы: поля, результат, рисунок, список калькуляторов (template-parts/calc.php, order.js) ---------- */
.cl-f{margin:20px 0 0;min-width:0}
.cl-ctl > .cl-f:first-child{margin-top:0}
.cl-ctl .stepper{width:max-content}
.cl-ctl .stepper input{width:78px}
.cl-hint{margin:8px 0 0;font:400 12px/1.45 var(--mono);color:#9d9a93}
.cl-tgls{display:grid;gap:14px}
.cl .tk-chip span{font-size:19px}
.cl .mv{min-height:0}
.cl [hidden]{display:none!important}
.cl .tk-buy{min-width:0}
.cl .tk-buy .buy-t{min-width:0}
.cl .tk-buy .buy-s{flex:none;white-space:nowrap}
.cl-top{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));border:1px solid rgba(215,212,206,.35)}
.cl-n{margin:0;min-width:0;padding:12px 12px 13px;border-right:1px solid rgba(215,212,206,.25)}
.cl-n:last-child{border-right:0}
.cl-n b{display:block;font:900 clamp(24px, 3.2vw, 44px)/.85 var(--disp);text-transform:uppercase;white-space:nowrap;font-variant-numeric:tabular-nums}
.cl-n span{display:block;margin-top:7px;font:500 10px/1.25 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:#9d9a93}
/* телефон: «174,8 тыс. ₽» и «1,17 млн ₽» должны входить в треть ширины экрана 360 px */
@media (max-width:430px){ .cl-n{padding:11px 8px 12px} .cl-n b{font-size:19px} }
@media (max-width:380px){ .cl-n b{font-size:18px} }
/* фокус с клавиатуры на тёмной панели: обводка цвета фона темы, а не чернил */
.slab .stepper:focus-within{outline:2px solid var(--bg-hi);outline-offset:2px}
.slab .cart-add:focus-visible,.slab .tgl input:focus-visible + .tgl-b{outline-color:var(--bg-hi)}
.cl-meta{margin:10px 0 0;font:500 12px/1.45 var(--mono);color:#b5b2ab}
.cl-fig{margin:16px 0 0;padding:14px 12px 10px;background:#E3E0D9;color:var(--ink)}
.cl-svg{display:block;width:100%;height:auto;max-height:440px}
.cl-svg--well{max-width:440px;margin:0 auto}
.cl-w{fill:#b4b1aa}
.cl-b{fill:#f3f1eb;stroke:var(--ink);stroke-width:.8}
.cl-b--s{fill:#8f8c85}
.cl-g{fill:none;stroke:var(--ink);stroke-width:.8;stroke-dasharray:3 2}
.cl-cut,.cl-ground{fill:none;stroke:var(--ink);stroke-width:1;stroke-dasharray:6 3}
.cl-d{fill:none;stroke:var(--ink);stroke-width:.8}
.cl-t{font:500 13px/1 var(--mono);fill:var(--ink)}
.cl-svg--wall .cl-t{font-size:30px}
.cl-r rect{fill:#a9a69f;stroke:var(--ink);stroke-width:.8}
.cl-rb,.cl-rs,.cl-rc{fill:#3a3936;stroke:var(--ink);stroke-width:.8}
.cl-cap{margin:8px 0 0;font:500 10.5px/1.4 var(--mono);letter-spacing:.03em;text-transform:uppercase;color:var(--mute)}
.cl-lines{margin:16px 0 0;padding:0;list-style:none;border-top:1px solid rgba(215,212,206,.35)}
.cl-ln{display:grid;grid-template-columns:minmax(0, 1fr) auto;gap:6px 14px;align-items:baseline;padding:11px 0;border-bottom:1px solid rgba(215,212,206,.2)}
.cl-ln a{font:800 22px/1 var(--disp);text-transform:uppercase;text-decoration:none;color:inherit}
.cl-ln a:hover{text-decoration:underline}
.cl-ln small{margin-left:10px;font:500 10px/1 var(--mono);letter-spacing:.05em;color:#9d9a93}
.cl-ln b{font:800 20px/1 var(--disp);white-space:nowrap;text-align:right}
.cl-lq{grid-column:1 / -1;grid-row:2;font:500 12px/1 var(--mono);color:#b5b2ab}
.cl-notes{margin:14px 0 0;padding:0;list-style:none}
.cl-notes li{margin-top:6px;padding:9px 12px;border-left:3px solid rgba(215,212,206,.6);background:rgba(215,212,206,.08);font:400 13px/1.45 var(--text);color:#d7d4ce}
.cl-err{margin:0;padding:14px 16px;border-left:4px solid var(--bg-hi);background:rgba(215,212,206,.08);font:400 15px/1.45 var(--text)}
.cl-trips-h{margin:26px 0 10px;font:500 11px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#9d9a93}
.cl-nojs{margin:18px 0 0;font:400 15px/1.45 var(--text)}
.cl-how .cl-links{margin:26px 0 0}
.lh-calc{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.cl-cards{display:grid;grid-template-columns:minmax(0, 1fr);gap:10px;margin:0;padding:0;list-style:none}
.cl-card{display:flex;flex-direction:column;gap:10px;height:100%;padding:18px 18px 16px;border:1px solid var(--ink);background:rgba(233,230,224,.6);
  text-decoration:none;transition:background .2s,color .2s}
.cl-card:hover{background:var(--ink);color:var(--bg-hi)}
.cl-card-n{font:500 11px/1 var(--mono);letter-spacing:.06em;color:var(--mute)}
.cl-card-t{font:900 clamp(30px, 3.2vw, 44px)/.9 var(--disp);text-transform:uppercase}
.cl-card-s{font:400 15px/1.45 var(--text);color:var(--ink-2)}
.cl-card:hover .cl-card-n,.cl-card:hover .cl-card-s{color:#b5b2ab}
.cl-card-go{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;padding-top:12px;border-top:1px solid currentColor;
  font:800 20px/1 var(--disp);text-transform:uppercase}
.cl-card-go svg{flex:none;width:22px;height:22px}
@media (min-width:900px){
  .cl-cards{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .cl-ln{grid-template-columns:minmax(0, 1fr) auto auto}
  .cl-lq{grid-column:auto;grid-row:auto}
  .cl-svg--wall .cl-t{font-size:20px}
  .cl-split--well{display:grid;grid-template-columns:minmax(0, 360px) minmax(0, 1fr);gap:0 28px;align-items:start}
  .cl-split--well .cl-ln{grid-template-columns:minmax(0, 1fr) auto;gap:6px 14px}
  .cl-split--well .cl-lq{grid-column:1 / -1;grid-row:2}
}

/* ---------- содержание раздела: назначение, марка по частям, как выбрать, серии, разгрузка (template-parts/section-content.php) ---------- */
.sct-grid{display:grid;grid-template-columns:minmax(0, 1fr);gap:28px;margin-top:22px}
.sct-txt p{max-width:700px;margin:0 0 14px;font:400 17px/1.5 var(--text);color:var(--ink-2)}
.sct-txt p:first-child{font-size:19px;color:var(--ink)}
.sct-txt p:last-child{margin-bottom:0}
.sct-k{margin:0 0 6px;font:500 10.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.sct-use{margin:0 0 26px;padding:0;list-style:none;border-top:1px solid var(--ink)}
.sct-use li{padding:11px 0;border-bottom:1px solid var(--line);font:500 15px/1.35 var(--text)}
.sct-gost{margin:0;padding:0;list-style:none;border-top:1px solid var(--ink)}
.sct-gost li{display:grid;gap:4px;padding:10px 0;border-bottom:1px solid var(--line)}
.sct-gost b{font:500 12px/1.2 var(--mono);letter-spacing:.03em}
.sct-gost span{font:400 14px/1.4 var(--text);color:var(--ink-2)}
.sctm-ex{margin:20px 0 0;font:500 11px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#9d9a93}
.sctm-ex b{font-weight:500;color:var(--bg-hi)}
.sctm-parts{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));margin:14px 0 0;padding:0;list-style:none;
  border-top:1px solid rgba(215,212,206,.35);border-left:1px solid rgba(215,212,206,.35)}
.sctm-parts li{min-width:0;padding:16px 14px 18px;border-right:1px solid rgba(215,212,206,.35);border-bottom:1px solid rgba(215,212,206,.35)}
.sctm-parts b{display:block;font:900 clamp(40px, 6vw, 84px)/.85 var(--disp);text-transform:uppercase;overflow-wrap:anywhere}
.sctm-parts span{display:block;margin-top:10px;font:400 14px/1.4 var(--text);color:#b5b2ab}
.sctm-note{max-width:700px;margin:18px 0 0;font:400 15px/1.5 var(--text);color:#b5b2ab}
.sct-notes{margin-top:22px}
.sct-flow{margin-top:22px}
.sct-tbl{margin:22px calc(-1 * var(--pad)) 0;border-top:1px solid var(--ink)}
.sct-row{display:grid;grid-template-columns:minmax(0, 1fr) auto;gap:5px 14px;align-items:baseline;padding:13px var(--pad);border-bottom:1px solid var(--line);
  color:inherit;text-decoration:none;transition:background .2s}
a.sct-row:hover{background:var(--bg-hi)}
.sct-row b{font:800 21px/1 var(--disp);text-transform:uppercase}
.sct-row span{font:500 12px/1.3 var(--mono);color:var(--mute)}
.sct-row span:nth-child(2)::before{content:"марок: "}
.sct-row .sct-p{font:800 19px/1 var(--disp);color:var(--acc);white-space:nowrap}
.sct-row--h{display:none}
@media (min-width:900px){
  .sct-grid{grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr);gap:56px;margin-top:30px}
  .sctm-parts{grid-template-columns:repeat(var(--n, 4), minmax(0, 1fr))}
  .sct-row{grid-template-columns:minmax(0, 2.4fr) 80px minmax(0, 1fr) minmax(0, 1fr) 150px;gap:14px}
  .sct-row span:nth-child(2)::before{content:none}
  .sct-row .sct-p{text-align:right}
  .sct-row--h{display:grid;padding-top:9px;padding-bottom:8px}
  .sct-row--h span{font:500 10.5px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase}
  .sct-row--h span:last-child{text-align:right}
}

/* ---------- цена с доставкой: карточка (template-parts/offer.php) и городская страница (template-parts/geo.php) ---------- */
.pd-grid{display:grid;grid-template-columns:minmax(0, 1fr);gap:28px;margin-top:22px}
.pd-tbl{min-width:0;border-top:1px solid var(--ink)}
.pd-row{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);gap:10px 14px;padding:14px 0;border-bottom:1px solid var(--line)}
.pd-z{grid-column:1 / -1;font:800 22px/1 var(--disp);text-transform:uppercase}
.pd-c{display:grid;gap:5px;min-width:0}
.pd-c em{font:500 10.5px/1.2 var(--mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.pd-c b{font:800 26px/1 var(--disp);color:var(--acc);white-space:nowrap;font-variant-numeric:tabular-nums}
.pd-c.ask b{font-size:19px;color:var(--mute)}
.pd-c small{font:500 11.5px/1.35 var(--mono);color:var(--mute)}
.pd-note{margin:12px 0 0;font:400 12px/1.5 var(--mono);color:var(--mute)}
.pd-list{margin:0 0 24px;padding:0;list-style:none;border-top:1px solid var(--ink)}
.pd-list:last-child{margin-bottom:0}
.pd-list li{display:grid;grid-template-columns:minmax(72px, auto) minmax(0, 1fr);gap:14px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line)}
.pd-list b{font:800 24px/1 var(--disp);white-space:nowrap}
.pd-list span{font:400 15px/1.35 var(--text);color:var(--ink-2)}
.geo-k--tbl{margin-top:30px}
.pd-tbl--geo{margin:0 calc(-1 * var(--pad))}
.pd-grow{display:grid;grid-template-columns:minmax(0, 1fr) auto;gap:4px 14px;align-items:baseline;padding:12px var(--pad);border-bottom:1px solid var(--line);
  color:inherit;text-decoration:none;transition:background .2s}
a.pd-grow:hover{background:var(--bg-hi)}
.pd-grow b{font:800 21px/1 var(--disp);text-transform:uppercase}
.pd-grow span{font:500 12px/1.3 var(--mono);color:var(--mute)}
.pd-grow span:nth-child(2),.pd-grow span:nth-child(3),.pd-grow span:nth-child(4){display:none}
.pd-grow .pd-gt{font:800 20px/1 var(--disp);color:var(--acc);white-space:nowrap}
.pd-grow--h{display:none}
@media (min-width:900px){
  .pd-grid{grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr);gap:56px;margin-top:30px}
  .pd-row{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);align-items:start}
  .pd-z{grid-column:auto;padding-top:14px}
  .pd-grow{grid-template-columns:minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));gap:14px}
  .pd-grow span:nth-child(2),.pd-grow span:nth-child(3),.pd-grow span:nth-child(4){display:block}
  .pd-grow .pd-gt{text-align:right}
  .pd-grow--h{display:grid;padding-top:9px;padding-bottom:8px;border-top:1px solid var(--ink)}
  .pd-grow--h span{display:block;font:500 10.5px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase}
  .pd-grow--h span:last-child{text-align:right}
}

/* справочник (kb.php): раздел - семейства строками, страница семейства - таблицы по подсериям, ссылки в каталог */
.sec.kb-intro{padding-top:26px;padding-bottom:26px}
.kb-lead{margin:0;max-width:860px;font:400 19px/1.5 var(--text)}
.kb-list{margin:6px 0 0;padding:0;list-style:none;border-top:1px solid var(--ink)}
.kb-list li{border-bottom:1px solid var(--line)}
.kb-list a{display:grid;grid-template-columns:minmax(0, 1fr) 110px 150px 120px;gap:6px 18px;align-items:baseline;padding:16px 0;text-decoration:none}
.kb-n{font:800 24px/1.05 var(--disp);text-transform:uppercase}
.kb-c,.kb-m{font:500 13px/1.3 var(--mono);color:var(--mute);font-variant-numeric:tabular-nums}
.kb-go{display:inline-flex;align-items:center;gap:8px;justify-self:end;font:500 12px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase}
.kb-go svg{width:16px;height:16px}
.kb-list a:hover .kb-n,.kb-list a:focus-visible .kb-n{text-decoration:underline;text-underline-offset:4px}
.kbt-wrap{overflow-x:auto;margin-top:6px;border-top:1px solid var(--ink)}
.kbt{width:100%;border-collapse:collapse;font:500 14px/1.35 var(--mono);font-variant-numeric:tabular-nums}
.kbt th,.kbt td{padding:10px 16px 10px 0;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap;vertical-align:baseline}
.kbt thead th{padding-top:12px;font:500 10.5px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.kbt thead th small{display:block;font-size:9.5px;letter-spacing:.04em}
.kbt tbody th{font:800 19px/1 var(--disp);text-transform:uppercase}
.kbt tbody th a{text-decoration:none}
.kbt tbody th a:hover,.kbt tbody th a:focus-visible{text-decoration:underline;text-underline-offset:3px}
.kbt tbody tr:hover{background:var(--bg-hi)}
.kbt-p{color:var(--acc);font-weight:600}
.kb-links{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.kb-faq .faq{margin-top:18px}                       /* вопросы справочника - на всю ширину, не колонкой .qa */
@media (max-width:899px){
  .kb-list a{grid-template-columns:minmax(0, 1fr) auto}
  .kb-m{display:none}
  .kb-n{font-size:20px}
  .kbt{font-size:13px}
  .kbt tbody th{font-size:17px}
}

/* ---------- страница справочника (template-parts/kb-page.php): ответ рядом с готовым набором, блоки заголовком слева,
   наборы карточками по числу (не auto-fit), вопросы с заявкой, ссылки по теме и нормативы ---------- */
.pg--kb .pg-title{font-size:min(calc((100vw - 2 * var(--pad)) / (var(--tn) * .5)), 60px)}   /* заголовок до 60 знаков */
.pg--kb .fr-fact b{font-size:clamp(19px, 5.6vw, 30px);white-space:normal}
.kbp-ans{display:grid;grid-template-columns:minmax(0, 1fr);gap:28px}
.kbp-answer{margin:0;max-width:860px;font:500 clamp(19px, 1.9vw, 26px)/1.42 var(--text);letter-spacing:-.005em}
.kbp-teaser{padding:22px var(--pad) 24px;border:1px solid var(--ink);background-color:var(--bg-hi)}
.kbp-teaser-h{margin:4px 0 0;font:900 clamp(30px, 3vw, 44px)/.9 var(--disp);text-transform:uppercase}
.kbp-teaser-m{margin:10px 0 0;font:500 12px/1.45 var(--mono);color:var(--mute);font-variant-numeric:tabular-nums}
.kbp-teaser-sum{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:16px 0 14px}
.kbp-teaser-sum b{font:900 44px/.9 var(--disp);color:var(--acc);white-space:nowrap;font-variant-numeric:tabular-nums}
.kbp-teaser-sum span{font:500 10.5px/1.3 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}
.kbp-to{display:inline-block;margin-top:14px;padding-bottom:2px;border-bottom:1px solid currentColor;font:500 12px/1.3 var(--mono);color:var(--ink);text-decoration:none}
.kbp-to:hover{color:var(--acc)}
.kbp-teaser .cta-tel{display:inline-block;margin-top:14px}
.kbp-b{display:grid;grid-template-columns:minmax(0, 1fr);gap:20px}
.kbp-no{display:block;font:500 11px/1 var(--mono);letter-spacing:.06em;color:var(--mute)}
.slab .kbp-no{color:#9d9a93}
.kbp-h{margin:10px 0 0;font:900 clamp(34px, 3.8vw, 58px)/.88 var(--disp);text-transform:uppercase;letter-spacing:-.005em;overflow-wrap:anywhere}
.kbp-b-c{min-width:0}
.kbp-b-c > * + *{margin-top:24px}
.kbp-txt p{margin:0 0 14px;max-width:760px;font:400 17px/1.55 var(--text);color:var(--ink-2)}
.kbp-txt p:last-child{margin-bottom:0}
.slab .kbp-txt p{color:#c9c6bf}
.kbp-flow b{font-size:28px}
.kbp-flow p{max-width:none}
.kbp-check{margin:0;padding:0;list-style:none;border-top:1px solid var(--ink)}
.kbp-check li{position:relative;padding:12px 0 12px 28px;border-bottom:1px solid var(--line);font:500 16px/1.4 var(--text)}
.kbp-check li::before{content:"";position:absolute;left:1px;top:18px;width:11px;height:11px;background:var(--acc)}
.kbp-t th,.kbp-t td{white-space:normal}
.kbp-t tbody th{font-size:17px}
.kbp-kits-g{display:grid;grid-template-columns:minmax(0, 1fr);gap:14px;margin-top:4px}
.kbp-kit{display:flex;flex-direction:column;min-width:0;padding:22px var(--pad) 22px;border:1px solid var(--ink);background-color:var(--bg-hi)}
.kbp-kit--alt{background-color:var(--ink)}
.kbp-kit-h{margin:0;font:900 clamp(28px, 2.4vw, 38px)/.92 var(--disp);text-transform:uppercase}
.kbp-kit-d{margin:10px 0 0;font:400 15px/1.45 var(--text);color:var(--ink-2)}
.kbp-kit--alt .kbp-kit-d{color:#b5b2ab}
.kbp-kit-rows{margin:16px 0 0;padding:0;list-style:none;border-top:1px solid var(--ink)}
.kbp-kit-rows li{display:grid;grid-template-columns:minmax(0, 1fr) auto;grid-template-areas:"m s" "q s";gap:3px 12px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line)}
.kbp-kit-rows a{grid-area:m;font:800 20px/1 var(--disp);text-transform:uppercase;text-decoration:none}
.kbp-kit-rows a:hover,.kbp-kit-rows a:focus-visible{text-decoration:underline;text-underline-offset:3px}
.kbp-kit-rows span{grid-area:q;font:500 11.5px/1.3 var(--mono);color:var(--mute);font-variant-numeric:tabular-nums}
.kbp-kit-rows b{grid-area:s;font:800 19px/1 var(--disp);color:var(--acc);white-space:nowrap;font-variant-numeric:tabular-nums}
.kbp-kit-sum{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 12px;margin:14px 0 16px}
.kbp-kit-sum span{font:500 12px/1.3 var(--mono);color:var(--mute);font-variant-numeric:tabular-nums}
.kbp-kit-sum b{font:900 40px/.9 var(--disp);color:var(--acc);white-space:nowrap;font-variant-numeric:tabular-nums}
.kbp-kit-note{margin:-8px 0 16px;font:500 11px/1.35 var(--mono);color:var(--mute)}
.kbp-kit-btns{margin-top:auto}
.kbp-kit--alt .buy{margin-top:22px}
.kbp-kit--alt .cta-tel{align-self:flex-start;margin-top:14px}
.kbp-more{display:grid;grid-template-columns:minmax(0, 1fr);gap:34px}
.kbp-more-h{margin:0 0 14px;font:900 clamp(34px, 3.8vw, 58px)/.88 var(--disp);text-transform:uppercase}
.kbp-links{margin:0;padding:0;list-style:none;border-top:1px solid var(--ink)}
.kbp-links a{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line);
  font:800 21px/1.05 var(--disp);text-transform:uppercase;text-decoration:none}
.kbp-links svg{flex:none;width:18px;height:18px;transition:transform .3s var(--ease)}
.kbp-links a:hover span,.kbp-links a:focus-visible span{text-decoration:underline;text-underline-offset:4px}
.kbp-links a:hover svg{transform:translateX(4px)}
.kbp-src small{font:500 11px/1.35 var(--mono);color:var(--mute)}
.kb-list--pages a{grid-template-columns:minmax(0, 1fr) auto auto}
@media (max-width:899px){
  .kb-list--pages .kb-c{display:none}
}
@media (min-width:900px){
  .pg--kb .pg-title{font-size:min(calc((100vw - 2 * var(--pad)) * .62 / (var(--tn) * .5)), 112px)}
  .pg--kb .fr-fact b{font-size:clamp(30px, 2.9vw, 46px)}
  .kbp-ans{grid-template-columns:minmax(0, 7fr) minmax(0, 5fr);gap:64px;align-items:start}
  .kbp-teaser{padding:26px 28px 28px}
  .kbp-b{grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);gap:64px}
  .kbp-b-h{position:sticky;top:calc(var(--hdr) + 24px);align-self:start}
  /* шаги в правой колонке - списком, а не 5 колонками, как в полноширинной плите раздела (иначе 103 px на шаг и прокрутка вбок) */
  .kbp-flow{grid-template-columns:minmax(0, 1fr);border-top:1px solid rgba(215,212,206,.35)}
  .kbp-flow li{grid-template-columns:44px minmax(0, 1fr);grid-template-areas:"i b" "i p";gap:8px 0;padding:16px 0;border-bottom:1px solid rgba(215,212,206,.16)}
  .kbp-flow li + li{padding-left:0;border-left:0}
  .kbp-flow .flow-i{display:block;margin-left:0;padding:.45em 0 0;border-bottom:0;font-size:11px;color:#9d9a93}
  .kbp-flow .flow-i::before{content:none}
  .kbp-flow b{font-size:28px;overflow-wrap:anywhere}
  .kbp-kits-g--2{grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr)}
  .kbp-kits-g--3,.kbp-kits-g--4{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .kbp-kits-g--3 .kbp-kit--alt{grid-column:1 / -1}
  .kbp-kit{padding:26px 28px 28px}
  .kbp-kit--alt{position:sticky;top:calc(var(--hdr) + 24px);align-self:start}   /* по содержимому, едет рядом с длинным набором */
  .kbp-more{grid-template-columns:minmax(0, 7fr) minmax(0, 5fr);gap:64px}
}
@media (min-width:1280px){
  .kbp-kits-g--3{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .kbp-kits-g--3 .kbp-kit--alt{grid-column:auto}
  .kbp-flow{grid-template-columns:repeat(2, minmax(0, 1fr));column-gap:32px}
}
@media (min-width:1600px){
  .kbp-kits-g--4{grid-template-columns:repeat(4, minmax(0, 1fr))}
}

/* ---------- раздел справочника (template-parts/kb-hub.php): задачи карточками с чертежом и ценой набора, калькуляторы
   последней карточкой (закрывает строку сетки), таблицы плитками с чертежом, как в меню каталога ---------- */
.kbh-g{display:grid;grid-template-columns:minmax(0, 1fr);gap:14px;margin-top:4px}
.kbh-c{position:relative;display:flex;flex-direction:column;min-width:0;padding:18px var(--pad);border:1px solid var(--ink);
  background-color:var(--bg-hi);color:inherit;text-decoration:none;transition:border-color .2s,box-shadow .2s}
a.kbh-c:hover{border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}
a.kbh-c:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.kbh-c-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:500 10.5px/1.2 var(--mono);
  letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.kbh-c-top i{font-style:normal;color:var(--ink)}
.kbh-c-d{display:flex;align-items:center;justify-content:center;height:150px;margin:14px 0 16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kbh-c-d .drawing{width:auto;max-width:86%;max-height:116px;margin:0;transition:transform .4s var(--ease)}
a.kbh-c:hover .kbh-c-d .drawing{transform:translateY(-4px) scale(1.04)}
.kbh-c-h{font:900 clamp(28px, 2.3vw, 36px)/.92 var(--disp);text-transform:uppercase;overflow-wrap:anywhere}
a.kbh-c:hover .kbh-c-h{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.kbh-c-s{margin-top:10px;font:400 15px/1.45 var(--text);color:var(--ink-2)}
.kbh-c-f{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-top:auto;padding-top:18px}
.kbh-c-p{display:flex;flex-direction:column;gap:5px;font:800 25px/1 var(--disp);color:var(--acc);text-transform:uppercase;white-space:nowrap}
.kbh-c-p small{font:500 10.5px/1.2 var(--mono);letter-spacing:.04em;color:var(--mute);text-transform:none}
.kbh-c-go{display:inline-flex;align-items:center;gap:8px;font:500 12px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase}
.kbh-c-go svg{width:18px;height:18px;transition:transform .3s var(--ease)}
a.kbh-c:hover .kbh-c-go svg{transform:translateX(4px)}
.kbh-c--calc{background-color:var(--ink);color:var(--bg-hi)}
.kbh-c--calc .kbh-c-top,.kbh-c--calc .kbh-c-top i{color:#9d9a93}
.kbh-c--calc .kbh-c-h{margin-top:16px}
.kbh-c--calc .kbh-c-s{color:#b5b2ab}
.kbh-calc{margin:auto 0 0;padding:18px 0 0;list-style:none}
.kbh-calc li{border-top:1px solid rgba(215,212,206,.35)}
.kbh-calc a{display:grid;grid-template-columns:minmax(0, 1fr) auto;grid-template-areas:"b i" "s i";gap:5px 14px;align-items:center;padding:14px 0;
  color:var(--bg-hi);text-decoration:none}
.kbh-calc b{grid-area:b;font:800 22px/1 var(--disp);text-transform:uppercase}
.kbh-calc span{grid-area:s;font:500 11px/1.3 var(--mono);color:#9d9a93}
.kbh-calc svg{grid-area:i;width:20px;height:20px;transition:transform .3s var(--ease)}
.kbh-calc a:hover b,.kbh-calc a:focus-visible b{text-decoration:underline;text-underline-offset:4px}
.kbh-calc a:hover svg{transform:translateX(4px)}
.kbh-fg{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));margin:4px calc(-1 * var(--pad)) 0;border-top:1px solid var(--ink)}
.kbh-f{display:flex;flex-direction:column;gap:6px;min-width:0;padding:14px var(--pad) 16px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  color:inherit;text-decoration:none;transition:background .2s}
.kbh-f:nth-child(2n){border-right:0}
.kbh-f:hover,.kbh-f:focus-visible{background:var(--bg-hi)}
.kbh-f-d{display:flex;align-items:center;justify-content:center;height:96px;margin-bottom:6px}
.kbh-f-d .drawing{width:auto;max-width:100%;max-height:84px;margin:0;transition:transform .4s var(--ease)}
.kbh-f:hover .kbh-f-d .drawing{transform:translateY(-3px) scale(1.04)}
.kbh-f-n{font:800 21px/.95 var(--disp);text-transform:uppercase;overflow-wrap:anywhere}
.kbh-f-m{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:3px 8px;margin-top:auto;padding-top:6px;
  font:500 11px/1.3 var(--mono);color:var(--mute);font-variant-numeric:tabular-nums}
.kbh-f-m b{font:600 11.5px/1.2 var(--mono);color:var(--acc);white-space:nowrap}
@media (max-width:699px){
  .kbh-c-d{height:112px;margin:12px 0}
  .kbh-c-d .drawing{max-height:84px}
  .kbh-c-s{font-size:14px}
}
@media (min-width:700px){
  .kbh-g{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .kbh-s2-2{grid-column:span 2}
  .kbh-fg{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .kbh-f:nth-child(2n){border-right:1px solid var(--line)}
  .kbh-f:nth-child(3n){border-right:0}
}
@media (min-width:900px){
  .kbh-c{padding:22px 24px}
  .kbh-fg{margin-left:0;margin-right:0;border-left:1px solid var(--ink);border-right:1px solid var(--ink)}
}
@media (min-width:1100px){
  .kbh-g{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .kbh-s2-2{grid-column:auto}
  .kbh-s3-2{grid-column:span 2}
  .kbh-s3-3{grid-column:1 / -1}
  .kbh-s3-2 .kbh-calc,.kbh-s3-3 .kbh-calc{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));column-gap:28px}
  .kbh-fg{grid-template-columns:repeat(4, minmax(0, 1fr))}
  .kbh-f:nth-child(3n){border-right:1px solid var(--line)}
  .kbh-f:nth-child(4n){border-right:0}
}
@media (min-width:1440px){
  .kbh-fg{grid-template-columns:repeat(6, minmax(0, 1fr))}
  .kbh-f:nth-child(4n){border-right:1px solid var(--line)}
  .kbh-f:nth-child(6n){border-right:0}
}

/* ---------- подвал ---------- */
/* блок стоит последним: так же, как на стенде research/footer-2026-10-14 (стили варианта после всего main.css) */
/* корень: тёмная плита с фактурой; на телефоне снизу место под нижнюю панель (dock) */
.foot{position:relative;overflow:hidden;color:var(--bg-hi);background-color:var(--ink);background-image:var(--grain-lt),var(--mottle);
  background-size:260px 260px,900px 900px;padding-bottom:calc(98px + env(safe-area-inset-bottom))}
.foot a{color:inherit}
.foot :focus-visible{outline-color:var(--bg-hi)}
/* ---------- подвал «Бетонная плита» (variants/c, 14.10.2026) ----------
   Подвал - тёмная плита, над краем две монтажные петли (знак логотипа в размер подвала). Сверху вниз:
   связь - номер крупно трафаретом по бетону, заявка, MAX, почта копированием; рейка «Покупателю» с условиями
   поставки, как в шапке (на десктопе встаёт наверх, order:-1); каталог - светлая вкладка «Каталог ЖБИ» и под ней
   панель мега-меню: группы блоками на сетке 7×2 без пустых ячеек, число марок, цена «от», ходовые марки;
   справочник (задачи, калькуляторы, таблицы размеров и веса) и доставка (кольца зон, цена рейса, 36 городов по
   зонам); штамп: знак, продавец, ИНН, ОГРН, адрес, договор поставки, оферта, срок цен, персональные данные, ©.
   Телефон: каталог, справочник и доставка свёрнуты в <details>; десктоп: раскрыты стилем (::details-content), без JS.
   Цвета - только переменные темы; линии на плите - они же с прозрачностью (color-mix). */

.foot.ft{display:flex;flex-direction:column;overflow:visible;
  --ft-l1:color-mix(in srgb, var(--bg-hi) 16%, transparent);    /* тонкая линия на плите */
  --ft-l2:color-mix(in srgb, var(--bg-hi) 40%, transparent);    /* линия блока */
  --ft-pl:color-mix(in srgb, var(--ink) 24%, var(--bg-hi));     /* линия внутри светлой панели */
  --ft-tex:var(--grain),var(--grain-lt)}
.ft :focus-visible{outline:2px solid var(--bg-hi);outline-offset:2px}
.ft-cat-in :focus-visible{outline-color:var(--ink)}

/* монтажные петли над краем плиты: блок с петлями из логотипа - вся плита подвала висит на стропах */
.ft-loops{position:absolute;left:0;right:0;top:-26px;height:26px;color:var(--ink);pointer-events:none}
.ft-loop{position:absolute;bottom:-4px;width:36px;height:31px;overflow:visible}
.ft-loop:first-child{left:calc(25% - 18px)}
.ft-loop:last-child{left:calc(75% - 18px)}

.ft-k{margin:0;font:500 11px/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--bg-lo)}

/* трафарет при наведении, как в шапке: перо проводит линию по низу, светлая краска поднимается, слово темнеет */
.ft-st{position:relative;isolation:isolate;overflow:hidden;transition:color .16s .06s}
.ft-st::before,.ft-st::after{content:"";position:absolute;left:0;right:0;pointer-events:none;background:var(--bg-hi)}
.ft-st::before{bottom:0;z-index:1;height:2px;transform:scaleX(0);transform-origin:0 50%;transition:transform .2s var(--ease) .1s}
.ft-st::after{top:0;bottom:0;z-index:-1;transform:scaleY(0);transform-origin:50% 100%;transition:transform .22s var(--ease)}
.ft-st:hover::before,.ft-st:focus-visible::before,.ft-mail.copied::before{transform:scaleX(1);transition:transform .26s var(--ease)}
.ft-st:hover::after,.ft-st:focus-visible::after,.ft-mail.copied::after{transform:scaleY(1);transition:transform .34s var(--ease) .14s}
.ft .ft-st:hover,.ft .ft-st:focus-visible,.ft .ft-mail.copied{color:var(--ink);transition:color .2s .14s}
.ft .ft-st:focus-visible{outline-color:var(--ink);outline-offset:-4px}
.ft-st:hover small,.ft-st:focus-visible small{color:var(--ink-2)}

/* ---------- связь: номер на всю колонку (кегль от ширины колонки, cqi), трафаретом по бетону ---------- */
.ft-call{display:grid;grid-template-columns:minmax(0, 1fr);padding:30px var(--pad) 28px}
.ft-call-k{display:flex;align-items:center;gap:10px}
.ft-clock{flex:none;width:20px;height:20px;border:1.5px solid var(--bg-hi);border-radius:50%;
  background:conic-gradient(var(--acc) 0 25%, transparent 0)}                       /* четверть часа */
.ft-tel-w{container-type:inline-size;min-width:0;margin:10px -4px -4px;padding:4px;overflow:hidden}   /* без шрифтов номер шире: обрезается, а не ломает ряд */
.ft .ft-tel{position:relative;display:inline-block;padding-bottom:.07em;color:var(--bg-hi);text-decoration:none;white-space:nowrap;
  font:900 13vw/.84 var(--disp);font-size:min(15cqi, 176px);letter-spacing:-.005em;
  -webkit-mask-image:var(--stencil);mask-image:var(--stencil);-webkit-mask-size:360px 360px;mask-size:360px 360px}
.ft .ft-tel:focus-visible{outline-offset:-1px}
.ft-tel::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:currentColor;transform:scaleX(0);
  transform-origin:0 50%;transition:transform .3s var(--ease)}
.ft-tel:hover::after,.ft-tel:focus-visible::after{transform:scaleX(1)}
.ft-meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin:14px 0 0;font:500 11px/1.3 var(--mono);letter-spacing:.06em;
  text-transform:uppercase;color:var(--bg-lo)}
.ft-meta span{display:inline-flex;align-items:center;gap:8px}
.ft-meta span::before{content:"";flex:none;width:6px;height:6px;background:var(--bg-lo)}
.ft-lead{max-width:34em;margin:18px 0 0;font:400 15px/1.45 var(--text);color:var(--bg-lo)}
.ft-act{display:grid;grid-template-columns:auto minmax(0, 1fr);gap:8px;margin-top:20px}
.ft-act .buy{grid-column:1 / -1;height:62px}
.ft .ft-cell{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:52px;padding:0 12px;
  border:1px solid var(--ft-l2);background:none;color:var(--bg-hi);font:500 14px/1.2 var(--mono);letter-spacing:.02em;
  text-decoration:none;white-space:nowrap;cursor:pointer}
.ft-cell svg{flex:none;width:19px;height:19px}
.ft-max span{text-transform:uppercase;letter-spacing:.06em}

/* ---------- рейка «Покупателю»: телефон - кнопки 3 + 2; десктоп - тёмная рейка шапки над подвалом ---------- */
.ft-rail{border-top:1px solid var(--ft-l2)}
.ft-rn{display:grid;grid-template-columns:repeat(6, minmax(0, 1fr))}
.ft-rk{grid-column:1 / -1;padding:14px var(--pad) 10px;font:500 11px/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--bg-lo)}
.ft .ft-rn a{grid-column:span 2;display:flex;align-items:center;justify-content:center;min-height:52px;padding:6px 8px;
  border-top:1px solid var(--ft-l1);border-left:1px solid var(--ft-l1);color:var(--bg-hi);text-align:center;text-decoration:none;
  font:800 17px/1.02 var(--disp);letter-spacing:.01em;text-transform:uppercase}
.ft .ft-rn a:nth-of-type(n+4){grid-column:span 3}
.ft .ft-rn a:nth-of-type(1),.ft .ft-rn a:nth-of-type(4){border-left:0}
.ft .ft-rn a[aria-current],.ft .ft-rn a[aria-current]:hover{background:var(--bg-hi);color:var(--ink)}   /* текущая страница - светлая вкладка, как в шапке */
.ft-rf{display:none}

/* ---------- сворачиваемые группы: телефон - строка-заголовок с плюсом; десктоп - раскрыты ---------- */
.ft-fold > summary{list-style:none;cursor:pointer}
.ft-fold > summary::-webkit-details-marker{display:none}
.ft-sum{display:flex;align-items:center;gap:12px;min-height:58px;padding-right:2px}
.ft-sum-n{flex:1 1 auto;min-width:0;font:500 11px/1.3 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--bg-lo)}
.ft-h{font:900 28px/.9 var(--disp);text-transform:uppercase;white-space:nowrap}
.ft-pm{position:relative;flex:none;width:16px;height:16px}
.ft-pm::before,.ft-pm::after{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:var(--bg-hi);transition:transform .25s var(--ease)}
.ft-pm::after{transform:rotate(90deg)}
.ft-fold[open] > summary .ft-pm::after{transform:none}
.ft-fold > summary:focus-visible{outline-offset:-2px}

/* ---------- каталог: светлая вкладка и под ней панель мега-меню ---------- */
.ft-cat{margin:0 var(--pad);border-top:1px solid var(--ft-l2)}
.ft-cat .ft-sum{padding-top:12px;min-height:0}
.ft-tab{display:inline-flex;align-items:center;gap:10px;align-self:stretch;min-height:46px;padding:0 14px;
  background-color:var(--bg-hi);background-image:var(--ft-tex);background-size:220px 220px,260px 260px;color:var(--ink);
  font:900 23px/1 var(--disp);text-transform:uppercase;white-space:nowrap}
.ft-tab-i{flex:none;width:20px;height:15px}
.ft-cat-in{background-color:var(--bg-hi);background-image:var(--ft-tex);background-size:220px 220px,260px 260px;color:var(--ink)}
.ft-grid{display:grid;grid-template-columns:minmax(0, 1fr)}
/* телефон и планшет: тёмная шапка группы во всю ширину, ячейки потоком; строка добивается растяжением - без дыр;
   линии между ячейками - зазор 1px поверх цвета линии */
.ft-g{display:flex;flex-wrap:wrap;gap:1px;background-color:var(--ft-pl)}
.ft-gh{flex:1 1 100%;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;min-width:0;margin:0;padding:10px 12px 9px;
  background:var(--ink);color:var(--bg-hi)}
.ft-gh i{font:500 11px/1 var(--mono);font-style:normal;color:var(--bg-lo)}
.ft-gh b{font:800 19px/1 var(--disp);letter-spacing:.01em;text-transform:uppercase}
.ft-gh span{display:none;font:500 11px/1.2 var(--mono);letter-spacing:.03em;color:var(--bg-lo)}
.ft .ft-c{position:relative;isolation:isolate;overflow:hidden;flex:1 1 40%;display:flex;flex-direction:column;justify-content:space-between;
  gap:8px;min-width:0;min-height:68px;padding:11px 12px 10px;background-color:var(--bg-hi);background-image:var(--ft-tex);
  background-size:220px 220px,260px 260px;color:var(--ink);text-decoration:none;transition:color .16s .06s}
.ft-c b{font:800 20px/.95 var(--disp);letter-spacing:.005em;text-transform:uppercase}
.ft-c-m{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 8px;font:500 11px/1.25 var(--mono);
  letter-spacing:.03em;color:var(--mute)}
.ft-c-m em{font:600 12px/1.25 var(--mono);font-style:normal;letter-spacing:0;color:var(--acc);white-space:nowrap}
/* трафарет на светлом: перо и краска чернилами, слово и цена светлеют */
.ft-c::before,.ft-c::after{content:"";position:absolute;left:0;right:0;background:var(--ink);pointer-events:none}
.ft-c::before{bottom:0;z-index:1;height:3px;transform:scaleX(0);transform-origin:0 50%;transition:transform .2s var(--ease) .1s}
.ft-c::after{top:0;bottom:0;z-index:-1;transform:scaleY(0);transform-origin:50% 100%;transition:transform .22s var(--ease)}
.ft-c:hover::before,.ft-c:focus-visible::before{transform:scaleX(1);transition:transform .26s var(--ease)}
.ft-c:hover::after,.ft-c:focus-visible::after{transform:scaleY(1);transition:transform .34s var(--ease) .14s}
.ft .ft-c:hover,.ft .ft-c:focus-visible{background-image:none;color:var(--bg-hi);transition:color .2s .14s}
.ft-c:hover .ft-c-m,.ft-c:focus-visible .ft-c-m,.ft-c:hover .ft-c-m em,.ft-c:focus-visible .ft-c-m em{color:var(--bg-hi)}
.ft .ft-c:focus-visible{outline:2px solid var(--bg-hi);outline-offset:-5px}

.ft-cat-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:14px 12px 16px;border-top:1px solid var(--ink)}
.ft-cat-foot .ft-k{color:var(--mute)}
.ft-hot{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.ft-hot li:nth-child(n+5){display:none}
.ft .ft-hot a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border:1px solid var(--ink);color:var(--ink);
  text-decoration:none;font:800 18px/1 var(--disp);letter-spacing:.01em;text-transform:uppercase;white-space:nowrap;transition:background .2s,color .2s}
.ft .ft-hot a:hover{background:var(--ink);color:var(--bg-hi)}
.ft-asof{display:none}
.ft .ft-all{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:1 1 100%;min-height:52px;padding:0 16px;
  background:var(--ink);color:var(--bg-hi);text-decoration:none;font:800 22px/1 var(--disp);text-transform:uppercase;transition:background .2s}
.ft-all svg{flex:none;width:20px;height:20px;transition:transform .3s var(--ease)}
.ft .ft-all:hover{background:var(--ink-2)}
.ft-all:hover svg{transform:translateX(4px)}
.ft-cat-in .ft-all:focus-visible{outline:2px solid var(--bg-hi);outline-offset:-5px}

/* ---------- справочник и доставка ---------- */
.ft-mid{display:grid;grid-template-columns:minmax(0, 1fr);margin:0 var(--pad)}
.ft-mid > .ft-fold{border-top:1px solid var(--ft-l2)}
.ft-mid > .ft-fold:last-child{border-bottom:1px solid var(--ft-l2)}
.ft-kb-in,.ft-dl-in{padding:4px 0 24px}
.ft-kb-in .ft-k{margin:18px 0 8px}
.ft-ls{margin:0;padding:0;list-style:none;border-top:1px solid var(--ft-l1)}
.ft .ft-ls a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;padding:8px 10px;
  border-bottom:1px solid var(--ft-l1);color:var(--bg-hi);text-decoration:none;font:400 15px/1.3 var(--text)}
.ft-ls small{flex:none;font:500 11px/1 var(--mono);letter-spacing:.04em;color:var(--bg-lo)}
.ft .ft-ls--calc a{display:grid;grid-template-columns:minmax(0, 1fr) auto;column-gap:12px}
.ft-ls--calc b{font:800 19px/1 var(--disp);letter-spacing:.01em;text-transform:uppercase}
.ft-ls--calc small{grid-column:1;margin-top:5px}
.ft-ls--calc svg{grid-column:2;grid-row:1 / span 2;width:20px;height:20px}

/* доставка: кольца зон (схема, не карта: Москва светлым диском, полосы МО с номерами зон), цена рейса, города */
.ft-dl-lead{margin:6px 0 0;font:400 15px/1.45 var(--text);color:var(--bg-lo)}
.ft-fig{display:flex;justify-content:center;margin:18px 0 0}
.ft-map{display:block;width:200px;height:200px;overflow:visible}
.ft-zn{fill:var(--bg-hi);transition:fill-opacity .3s var(--ease)}
.ft-zn[data-zone="mo30"]{fill-opacity:.2}
.ft-zn[data-zone="mo60"]{fill-opacity:.11}
.ft-zn[data-zone="mo99"]{fill-opacity:.05}
.ft-zn.ft-zn--msk{fill-opacity:1}
.ft-zr{fill:none;stroke:var(--bg-hi);stroke-width:1.2;stroke-opacity:.7}
.ft-zr--out{stroke-dasharray:3 5;stroke-opacity:.45}
/* кегли - в единицах рисунка (200 × 200): схема не мельче 164 px, на экране подписи от 11,5 px */
.ft-zt{font:500 14px var(--mono);letter-spacing:.02em;fill:var(--bg-hi)}
.ft-zt--msk{font:900 17px var(--disp);letter-spacing:.04em;fill:var(--ink)}
.ft-zt--n{fill:var(--bg-lo)}
.ft-zt--r{paint-order:stroke;stroke:var(--ink);stroke-width:6px;stroke-linejoin:round}
.ft-mid:has([data-zone="mo30"]:not(.ft-zn):hover) .ft-zn[data-zone="mo30"],
.ft-mid:has([data-zone="mo60"]:not(.ft-zn):hover) .ft-zn[data-zone="mo60"],
.ft-mid:has([data-zone="mo99"]:not(.ft-zn):hover) .ft-zn[data-zone="mo99"]{fill-opacity:.42}
.ft-zh{display:none}
.ft-zl{margin:16px 0 0;padding:0;list-style:none;border-top:1px solid var(--ft-l1)}
.ft-z{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);gap:8px 12px;padding:12px 0;border-bottom:1px solid var(--ft-l1)}
.ft-zn-t{grid-column:1 / -1;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;min-width:0}
.ft-zn-t i{font:500 11px/1 var(--mono);font-style:normal;color:var(--bg-lo)}
.ft-zn-t b{font:800 20px/1 var(--disp);letter-spacing:.01em;text-transform:uppercase}
.ft-zn-t small{font:500 11px/1.2 var(--mono);letter-spacing:.04em;color:var(--bg-lo)}
.ft-zp{display:flex;flex-direction:column;gap:5px;font:500 15px/1.2 var(--mono);color:var(--bg-hi);font-variant-numeric:tabular-nums;white-space:nowrap}
.ft-zp em{font:500 11px/1 var(--mono);font-style:normal;letter-spacing:.05em;text-transform:uppercase;color:var(--bg-lo)}
.ft-zp--ask{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--bg-lo)}
.ft-towns{padding:0 0 24px}
.ft-tw .ft-k{margin:16px 0 8px}
.ft-tw:first-child .ft-k{margin-top:4px}
.ft-town{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.ft .ft-town a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 11px;border:1px solid var(--ft-l2);
  color:var(--bg-hi);text-decoration:none;font:400 15px/1.2 var(--text);white-space:nowrap;transition:background .2s,color .2s}
.ft-town small{font:500 11px/1 var(--mono);color:var(--bg-lo)}
.ft .ft-town a:hover{background:var(--bg-hi);color:var(--ink)}
.ft-town a:hover small{color:var(--ink-2)}

/* ---------- штамп: знак, продавец и реквизиты, оговорки ---------- */
.ft-stamp{margin:22px var(--pad) 0;border-top:2px solid var(--ft-l2)}
.ft-st1{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr))}
.ft-st1 > *{min-width:0;margin:0;padding:12px 0;border-bottom:1px solid var(--ft-l1)}
.ft-brand{grid-column:1 / -1;display:flex;flex-direction:column;justify-content:center;gap:9px}
.ft .ft-logo{display:inline-flex;align-items:center;align-self:flex-start;gap:12px;color:var(--bg-hi);text-decoration:none;
  font:900 30px/1 var(--disp);letter-spacing:.01em;text-transform:uppercase;white-space:nowrap}
.ft-logo svg{flex:none;width:39px;height:26px;transition:transform .3s var(--ease)}
.ft-logo:hover svg{transform:translateY(-3px)}
.ft-brand small{font:500 11px/1 var(--mono);letter-spacing:.06em;color:var(--bg-lo)}
.ft-sc{display:flex;flex-direction:column;gap:6px}
.ft-sc small{font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--bg-lo)}
.ft-sc span{font:500 14px/1.4 var(--mono);color:var(--bg-hi);overflow-wrap:anywhere}
.ft-sc--seller,.ft-sc--addr{grid-column:1 / -1}
.ft-sc--seller b{font:800 22px/1.02 var(--disp);letter-spacing:.01em;text-transform:uppercase}
.ft-st1 > .ft-sc:nth-child(4){padding-left:14px;border-left:1px solid var(--ft-l1)}
.ft-st2{display:grid;grid-template-columns:minmax(0, 1fr);padding:6px 0 4px}
.ft-sl{margin:0;padding:5px 0;font:400 14px/1.4 var(--text);color:var(--bg-lo)}
.ft-sl--valid{color:var(--bg-hi)}
.ft .ft-sl--a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;margin-top:6px;padding:6px 12px;
  border:1px solid var(--ft-l2);color:var(--bg-hi);text-decoration:none;font:800 17px/1.05 var(--disp);letter-spacing:.01em;text-transform:uppercase}
.ft-sl--a svg{flex:none;width:18px;height:18px}

@media (max-width:359px){
  .ft-act{grid-template-columns:minmax(0, 1fr)}
}

/* ---------- планшет ---------- */
@media (min-width:600px){
  .ft-act{grid-template-columns:minmax(0, 1fr) auto auto}
  .ft-act .buy{grid-column:auto}
  .ft .ft-c{flex-basis:21%}
  .ft-hot li:nth-child(n+5){display:list-item}
  .ft .ft-all{flex:0 0 auto;margin-left:auto}
  .ft-dl-in{display:grid;grid-template-columns:auto minmax(0, 1fr);grid-template-areas:"lead lead" "fig zw";column-gap:28px}
  .ft-dl-lead{grid-area:lead}
  .ft-fig{grid-area:fig;align-self:center}
  .ft-zw{grid-area:zw;align-self:center;margin-top:18px}
  .ft-zh{display:grid;grid-template-columns:minmax(0, 1fr) 88px 88px;gap:12px;padding:0 0 8px;font:500 11px/1 var(--mono);
    letter-spacing:.05em;text-transform:uppercase;color:var(--bg-lo)}
  .ft-zl{margin:0}
  .ft-z{grid-template-columns:minmax(0, 1fr) 88px 88px;gap:12px;align-items:baseline;padding:9px 0 8px}
  .ft-zn-t{grid-column:auto;flex-wrap:nowrap;gap:9px}
  .ft-zn-t b{font-size:17px}
  .ft-zn-t small{display:none}
  .ft-zp{font-size:14px}
  .ft-zp--ask{font-size:11px}
  .ft-zp em{display:none}
  .ft-st1{grid-template-columns:repeat(4, minmax(0, 1fr))}
  .ft-st2{grid-template-columns:repeat(2, minmax(0, 1fr));column-gap:8px}
}
@media (min-width:600px) and (max-width:899px){
  .ft-brand,.ft-sc--seller,.ft-st1 > .ft-sc:nth-child(3),.ft-st1 > .ft-sc:nth-child(4){grid-column:span 2}
  .ft-st1 > .ft-sc:nth-child(4){padding-left:14px;border-left:1px solid var(--ft-l1)}
  .ft-st2 > .ft-sl:not(.ft-sl--a){grid-column:1 / -1}
}

/* ---------- десктоп ---------- */
@media (min-width:900px){
  /* рейка - как у шапки: вкладки страниц шрифтом заголовков, условия моно с квадратами на всю ширину */
  .ft-rail{order:-1;display:flex;align-items:stretch;height:44px;border-top:0;border-bottom:1px solid var(--ft-l2);padding-left:var(--pad);
    overflow:hidden;font:500 11px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
  .ft-rn{display:flex;align-items:stretch;flex:none}
  .ft-rk{display:flex;align-items:center;padding:0 12px 0 0}
  .ft .ft-rn a{min-height:0;padding:0 14px;border-top:0;border-left:1px solid var(--ft-l1);background:color-mix(in srgb, var(--bg-hi) 8%, transparent)}
  .ft .ft-rn a[aria-current]{background:var(--bg-hi)}
  .ft .ft-rn a:nth-of-type(1),.ft .ft-rn a:nth-of-type(4){border-left:1px solid var(--ft-l1)}
  .ft .ft-rn a:last-child{border-right:1px solid var(--ft-l1)}
  .ft-rf{display:flex;flex-wrap:wrap;flex:1 1 0;min-width:0;height:44px;margin:0;padding:0;list-style:none;overflow:hidden;color:var(--bg-lo)}
  .ft-rf li{display:flex;align-items:center;gap:8px;flex:1 0 auto;max-width:100%;height:44px;padding:0 16px;border-left:1px solid var(--ft-l1)}   /* что не влезло - на скрытую вторую строку */
  .ft-rf li:first-child{border-left:0}
  .ft-rf li::before{content:"";flex:none;width:6px;height:6px;background:var(--bg-lo)}

  /* связь: номер слева на всю колонку, справа - зачем звонить, заявка, MAX и почта */
  .ft-call{grid-template-columns:minmax(0, 1fr) minmax(0, 360px);grid-template-areas:"k lead" "tel act" "meta act";
    column-gap:44px;align-items:end;padding:44px var(--pad) 40px}
  .ft-call-k{grid-area:k}
  .ft-tel-w{grid-area:tel;margin-top:14px}
  .ft-meta{grid-area:meta;margin-top:18px}
  .ft-lead{grid-area:lead;margin:0;align-self:start}
  .ft-act{grid-area:act;grid-template-columns:auto minmax(0, 1fr);margin:0}
  .ft .ft-cell{gap:10px;padding:0 16px}
  .ft-act .buy{grid-column:1 / -1;height:68px}

  /* раскрыто всегда: заголовок группы не сворачивает (в браузерах без ::details-content остаётся кнопкой) */
  @supports selector(::details-content){
    .ft-fold::details-content{content-visibility:visible}
    .ft-fold > summary{cursor:default;pointer-events:none}
    .ft-pm{display:none}
  }
  .ft-sum{min-height:0}

  /* каталог 7×2 как в мега-меню: 2 + 5 / 2 + 4 + 1; шапки групп одной полосы одной высоты (subgrid по строкам) */
  .ft-cat{border-top:0}
  .ft--nocall .ft-cat{margin-top:40px}                 /* на «Контактах» связи в подвале нет: каталог сразу под рейкой */
  .ft-cat .ft-sum{gap:16px;padding-top:0}
  .ft-tab{min-height:50px;padding:0 20px;font-size:25px}
  .ft-tab-i{width:22px;height:16px}
  .ft-grid{grid-template-columns:repeat(7, minmax(0, 1fr));border-left:1px solid var(--ink);border-top:1px solid var(--ink)}
  .ft-g{grid-column:span var(--span, 1);grid-row:span 2;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;gap:0;
    background:none;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink)}
  .ft-gh{grid-column:1 / -1;flex-wrap:nowrap}
  .ft-gh b{font-size:18px}
  .ft .ft-c{min-height:74px;padding:11px 12px 10px;background:none;border-left:1px solid var(--ft-pl)}
  .ft .ft-gh + .ft-c{border-left:0}
  .ft-c b{font-size:18px}
  .ft-cat-foot{padding:12px 14px;border-top:0}
  .ft-asof{display:block;margin-left:auto}
  .ft-hot li:nth-child(n+6){display:none}
  .ft .ft-all{flex:0 0 auto;margin-left:0;min-height:44px;padding:0 14px;font-size:20px}

  /* 900-1279: доставка и города в ряд, справочник под ними во всю ширину; с 1280 - справочник слева,
     доставка и города справа (колонки одной высоты) */
  .ft-mid{grid-template-columns:repeat(2, minmax(0, 1fr));grid-template-areas:"dl tw" "kb kb";margin-top:36px;
    border-top:1px solid var(--ft-l2);border-bottom:1px solid var(--ft-l2)}
  .ft-mid > .ft-fold,.ft-mid > .ft-fold:last-child{border:0}
  .ft-fold--kb{grid-area:kb;border-top:1px solid var(--ft-l2)!important}
  .ft-fold--dl{grid-area:dl;padding-right:30px}
  .ft-fold--tw{grid-area:tw;padding-left:30px;border-left:1px solid var(--ft-l2)!important}
  .ft-mid .ft-sum{align-items:baseline;gap:14px;padding:26px 0 0}
  .ft-towns{padding:14px 0 28px}
  .ft-h{font-size:40px}
  .ft-kb-in{display:grid;grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr);column-gap:26px;padding:0 0 28px}
  .ft .ft-ls a{min-height:38px;padding:6px 10px;font-size:14px}
  .ft-ls--calc b{font-size:18px}

  .ft-dl-in{grid-template-columns:minmax(0, 1fr) auto;grid-template-areas:"lead fig" "zw zw";column-gap:20px;padding:0 0 28px}
  .ft-dl-lead{margin-top:10px;align-self:start}
  .ft-fig{margin-top:10px}
  .ft-map{width:164px;height:164px}
  .ft-zw{margin-top:14px}
  .ft-zh{grid-template-columns:minmax(0, 1fr) 84px 84px}
  .ft-z{grid-template-columns:minmax(0, 1fr) 84px 84px}
  .ft-tw{padding:8px 0 7px;border-bottom:1px solid var(--ft-l1);font:400 14px/1.7 var(--text)}
  .ft-tw:first-child{border-top:1px solid var(--ft-l1)}
  .ft-tw .ft-k,.ft-tw:first-child .ft-k{display:inline;margin:0 12px 0 0;color:var(--bg-hi)}
  .ft-town{display:inline}
  .ft-town li{display:inline}
  .ft-town li:not(:last-child)::after{content:"·";margin:0 7px;color:var(--bg-lo)}
  .ft .ft-town a{display:inline;min-height:0;padding:0;border:0;font:inherit;background:none}
  .ft-town small{margin-left:5px}
  .ft .ft-town a:hover{background:none;color:var(--bg-hi);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
  .ft-town a:hover small{color:var(--bg-lo)}

  /* штамп: 4 графы и адрес строкой; оговорки и персональные данные - 3 × 2 */
  .ft-stamp{margin-top:0;border-top:0}
  .ft-st1{grid-template-columns:minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, .7fr) minmax(0, .8fr);border-bottom:1px solid var(--ft-l1)}
  .ft-st1 > *{padding:16px 16px 16px 0;border-bottom:0}
  .ft-st1 > * + *{padding-left:16px;border-left:1px solid var(--ft-l1)}
  .ft-brand,.ft-sc--seller{grid-column:auto}
  .ft-st1 > .ft-sc:nth-child(4){padding-left:16px;border-left:1px solid var(--ft-l1)}
  .ft-st1 > .ft-sc--addr{grid-column:1 / -1;padding-left:0;border-left:0;border-top:1px solid var(--ft-l1)}
  /* оговорки: три графы, под ними две ссылки о персональных данных (сетка 6: 2+2+2 / 3+3) */
  .ft-st2{grid-template-columns:repeat(6, minmax(0, 1fr));column-gap:0;padding:0 0 22px}
  .ft .ft-st2 > *{grid-column:span 2;display:flex;align-items:center;min-height:56px;margin:0;padding:10px 16px;
    border:0;border-bottom:1px solid var(--ft-l1);border-left:1px solid var(--ft-l1)}
  .ft .ft-st2 > .ft-sl--a{grid-column:span 3}
  .ft .ft-st2 > :first-child,.ft .ft-st2 > .ft-sl--a:nth-child(4){padding-left:0;border-left:0}
}

@media (min-width:1280px){
  .ft-call{grid-template-columns:minmax(0, 1fr) minmax(0, 470px);column-gap:56px}
  .ft-mid{grid-template-columns:minmax(0, 25fr) minmax(0, 23fr);grid-template-areas:"kb dl" "kb tw"}
  .ft-fold--kb{padding-right:30px;border-top:0!important}
  .ft-fold--dl,.ft-fold--tw{padding:0 0 0 30px;border-left:1px solid var(--ft-l2)!important}
  .ft-fold--tw > summary{display:none}
  .ft-towns{padding:0 0 28px}
  /* штамп в две строки на всю ширину: знак, продавец, ИНН, ОГРН, адрес / договор, оферта, срок цен, ПД, согласие */
  .ft-st1{grid-template-columns:minmax(0, .85fr) minmax(0, 1.3fr) minmax(0, .6fr) minmax(0, .7fr) minmax(0, 1.85fr)}
  .ft-st1 > .ft-sc--addr{grid-column:auto;padding-left:16px;border-left:1px solid var(--ft-l1);border-top:0}
  .ft-st2{grid-template-columns:minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.5fr)}
  .ft .ft-st2 > *,.ft .ft-st2 > .ft-sl--a{grid-column:auto}
  .ft .ft-st2 > .ft-sl--a:nth-child(4){padding-left:16px;border-left:1px solid var(--ft-l1)}
  .ft-dl-in{grid-template-columns:auto minmax(0, 1fr);grid-template-areas:"lead lead" "fig zw";column-gap:24px;padding-bottom:16px}
  .ft-fig{margin-top:14px}
  .ft-map{width:164px;height:164px}
  .ft-zw{margin-top:14px}
  .ft-gh b{font-size:19px}
  .ft-hot li:nth-child(n+6){display:list-item}
  .ft .ft-c{min-height:76px}
  .ft-c b{font-size:19px}
}

/* широкий десктоп: схема зон рядом с таблицей рейсов, штамп в две строки на всю ширину */
@media (min-width:1440px){
  .ft-mid{grid-template-columns:minmax(0, 7fr) minmax(0, 5fr)}
  .ft-gh span{display:block}
  .ft-g--1 .ft-gh span{display:none}
  .ft .ft-ls a{font-size:15px}
  .ft-dl-in{column-gap:26px}
  .ft-fig{margin-top:16px}
  .ft-map{width:164px;height:164px}
  .ft-zw{margin-top:16px}
  .ft-st1{grid-template-columns:minmax(0, .9fr) minmax(0, 1.15fr) minmax(0, .6fr) minmax(0, .7fr) minmax(0, 2fr)}
}

@media (min-width:1920px){
  .ft-call{grid-template-columns:minmax(0, 1fr) minmax(0, 560px)}
}
@media (min-width:2200px){
  .ft-call{grid-template-columns:minmax(0, 2fr) minmax(0, 1fr) minmax(0, 620px);grid-template-areas:"k lead act" "tel lead act" "meta lead act"}
  .ft-lead{align-self:end;max-width:30em;font-size:17px}
}
@media (min-width:1920px){
  .ft-c b{font-size:21px}
  .ft-map{width:180px;height:180px}
}

@supports not (font-size:1cqi){
  @media (min-width:900px){ .ft .ft-tel{font-size:clamp(60px, 6.6vw, 150px)} }
}

@media (prefers-reduced-motion:reduce){
  .ft *,.ft *::before,.ft *::after{transition:none!important;animation:none!important}
}
@media (min-width:900px){
  .foot{padding-bottom:0}
}

/* ---------- контакты (page-kontakty.php): пришлите задачу - три способа и что дальше; зоны списком на телефоне;
   заметки у реквизитов ---------- */
.cs-ways{display:grid;grid-template-columns:minmax(0, 1fr);margin:6px 0 0;padding:0;list-style:none;border-top:1px solid rgba(215,212,206,.45)}
.cs-way{display:flex;flex-direction:column;min-width:0;padding:22px 0 24px;border-bottom:1px solid rgba(215,212,206,.16)}
.cs-i{font:500 11px/1 var(--mono);letter-spacing:.06em;color:#9d9a93}
.cs-t{margin-top:12px;font:900 clamp(32px, 3vw, 44px)/.9 var(--disp);text-transform:uppercase}
.cs-n{margin:12px 0 20px;max-width:440px;font:400 15px/1.5 var(--text);color:#c9c6bf}
.cs-way .buy,.cs-btn{margin-top:auto}
.cs-btn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;height:68px;padding:0 20px;border:1px solid rgba(215,212,206,.6);
  background:none;color:var(--bg-hi);font:800 25px/1 var(--disp);text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.cs-btn b{font-weight:400}
.cs-btn svg{flex:none;width:20px;height:20px}
.cs-btn[data-copy]{font:500 15px/1 var(--mono);letter-spacing:.01em;text-transform:none}
.cs-btn:hover,.cs-btn:focus-visible,.cs-btn.copied{background:var(--bg-hi);border-color:var(--bg-hi);color:var(--ink)}
.cs-next{margin-top:40px}
.cs-next-h{margin:0 0 12px;font:500 11px/1.2 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:#9d9a93}
.cs-steps{display:grid;grid-template-columns:minmax(0, 1fr);margin:0;padding:0;list-style:none;border-top:1px solid rgba(215,212,206,.45)}
.cs-steps li{display:grid;grid-template-columns:40px minmax(0, 1fr);grid-template-areas:"i b" "i s";gap:6px 0;padding:14px 0;border-bottom:1px solid rgba(215,212,206,.16)}
.cs-steps i{grid-area:i;padding-top:.4em;font:500 11px/1 var(--mono);font-style:normal;color:#9d9a93}
.cs-steps b{grid-area:b;font:900 28px/.9 var(--disp);text-transform:uppercase}
.cs-steps span{grid-area:s;font:500 12px/1.4 var(--mono);color:#b5b2ab}
.cs-steps span::before{content:"вы получаете: ";color:#8f8c86}
.ct-map{min-width:0}
.ct-zl{margin:18px 0 0;padding:0;list-style:none;border-top:1px solid var(--ink)}
.ct-zl li{display:grid;grid-template-columns:minmax(0, 110px) minmax(0, 1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.ct-zl b{font:800 20px/1 var(--disp);text-transform:uppercase}
.ct-zl span{font:400 14px/1.45 var(--text);color:var(--ink-2)}
.req-notes{margin:26px 0 0;padding:0;list-style:none;border-top:1px solid var(--ink)}
.req-notes li{position:relative;padding:12px 0 12px 26px;border-bottom:1px solid var(--line);font:500 15px/1.4 var(--text)}
.req-notes li::before{content:"";position:absolute;left:1px;top:18px;width:10px;height:10px;background:var(--acc)}
@media (min-width:900px){
  .cs-ways{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .cs-way{padding:26px 28px 28px;border-bottom:0;border-left:1px solid rgba(215,212,206,.16)}
  .cs-way:first-child{padding-left:0;border-left:0}
  .cs-way:last-child{padding-right:0}
  .cs-next{display:grid;grid-template-columns:minmax(0, 200px) minmax(0, 1fr);gap:28px;align-items:start;margin-top:48px}
  .cs-next-h{padding-top:16px}
  .cs-steps{grid-template-columns:repeat(4, minmax(0, 1fr))}
  .cs-steps li{grid-template-columns:minmax(0, 1fr);grid-template-areas:"i" "b" "s";gap:10px;padding:16px 20px 18px 0}
  .cs-steps li + li{padding-left:20px;border-left:1px solid rgba(215,212,206,.16)}
  .ct-zl{display:none}         /* на десктопе подписи городов на самой схеме */
}

/* ---------- калькуляторы (template-parts/calc.php, page-kalkulyator.php): короткий первый экран и сразу расчёт,
   типовые объекты кнопками, итог и «Оформить» над раскладкой; раздел - карточками справочника (.kbh-*) ---------- */
.pg--calc .pg-title{font-size:min(calc((100vw - 2 * var(--pad)) / (var(--tn) * .5)), 64px)}
.cl.sec{padding-top:26px}
.cl-head{display:grid;grid-template-columns:minmax(0, 1fr);gap:16px;margin-bottom:26px}
.cl-lead{margin:0;max-width:640px;font:400 17px/1.45 var(--text);color:#c9c6bf}
.cl-pre{display:flex;flex-wrap:wrap;gap:8px}
.cl-pre-k{flex-basis:100%;font:500 11px/1.2 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:#9d9a93}
.cl-p{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:58px;padding:10px 14px 11px;border:1px solid rgba(215,212,206,.45);
  background:none;color:var(--bg-hi);text-align:left;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.cl-p b{font:800 21px/1 var(--disp);text-transform:uppercase}
.cl-p small{font:500 11px/1.2 var(--mono);color:#9d9a93}
.cl-p:hover,.cl-p:focus-visible{border-color:var(--bg-hi)}
.cl-p.on{background:var(--bg-hi);border-color:var(--bg-hi);color:var(--ink)}
.cl-p.on small{color:var(--mute)}
.cl-acts.tk-acts{margin-top:16px}
.cl-acts .tk-note{margin:4px 0 0}
.cl-detail{margin-top:6px}
.cl-svg.cl-svg--well{max-height:300px}
.kbh-c-ex{margin-top:14px;font:500 11.5px/1.45 var(--mono);color:var(--mute)}
.kbh-c-ex b{color:var(--ink);font-weight:600}
@media (max-width:899px){
  .cl-p{flex:1 1 calc(50% - 4px)}
}
@media (min-width:900px){
  .pg--calc .pg-title{font-size:min(calc((100vw - 2 * var(--pad)) * .62 / (var(--tn) * .5)), 104px)}
  .cl-head{grid-template-columns:minmax(0, 4fr) minmax(0, 7fr);gap:40px;align-items:end}
  .cl-pre{justify-content:flex-end}
  .cl-pre-k{flex-basis:auto;align-self:center;margin-right:4px}
  .cl-acts.tk-acts{grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr)}
  .cl-acts .cart-add{height:100%}
  .cl-acts .tk-note{grid-column:1 / -1}
  .cl-svg.cl-svg--well{max-height:440px}
}
.kbh-c-d > svg:not(.drawing){width:auto;max-width:86%;max-height:116px}
@media (min-width:700px) and (max-width:1099px){
  .kbh-g--3 > .kbh-c:last-child{grid-column:span 2}     /* три карточки на две колонки: последняя на всю строку */
}

/* ---------- «КП по ведомости» (page-kp-po-vedomosti.php, 27.10) ---------- */
.ved .sec-h{margin-bottom:22px}
.ved-in{display:flex;flex-direction:column;gap:14px;max-width:980px}
.ved-in textarea{min-height:220px;font:400 16px/1.45 var(--mono)}
.ved-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px}
.ved-row .fl{flex:1 1 260px}
.ved-row .buy{flex:1 1 320px;max-width:520px}
.ved-alt{margin:14px 0 0;font:500 12.5px/1.4 var(--mono);color:var(--ink-2)}
.ved-alt a{color:var(--ink);text-underline-offset:3px}
.ved-how{margin-top:34px;max-width:980px}
.ved-tab{width:100%;max-width:980px;border-collapse:collapse;font-variant-numeric:tabular-nums}
.ved-tab th{padding:8px 10px;border-bottom:1px solid var(--ink);font:500 10.5px/1.2 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--mute);text-align:left}
.ved-tab td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
.ved-tab td a{font:600 16px/1.3 var(--text);color:var(--ink);text-underline-offset:3px}
.ved-tab td small{display:block;margin-top:2px;font:400 11.5px/1.3 var(--mono);color:var(--mute)}
.ved-tab td input{width:96px;height:44px;padding:0 10px;border:1px solid var(--ink);background:#E4E2DD;font:600 16px/1 var(--mono)}
.ved-tab td em{display:block;margin-top:4px;font:500 11px/1.2 var(--mono);font-style:normal;color:#9B1C1C}
.ved-n{width:40px;color:var(--mute);font:500 12px/1 var(--mono)}
.ved-note{margin:10px 0 0;font:500 12.5px/1.4 var(--mono);color:#9B1C1C}
.ved-miss{max-width:980px;margin-top:22px;padding:14px 16px;border:1px dashed var(--line-2)}
.ved-miss ul{margin:0;padding-left:18px;font:400 13px/1.5 var(--mono);color:var(--ink-2)}
.ved-f,.ved-done{display:grid;gap:12px;max-width:560px;margin-top:30px}
.ved-f[hidden],.ved-done[hidden]{display:none}   /* display:grid перебивает hidden (AGENT.md, футган) */
.ved-f .agree{margin-top:4px}
.ved-lock span b{color:var(--acc)}
.ved-file input{min-height:auto;padding:10px;background:none;border-style:dashed;font-size:14px}
.ved-files{margin:0;padding:0;list-style:none;font:400 13px/1.5 var(--mono)}
.ved-files button{margin-left:8px;border:0;background:none;color:var(--ink-2);text-decoration:underline;cursor:pointer;font:inherit}
.ved-done b{font:900 30px/1 var(--disp);text-transform:uppercase}
@media (max-width:640px){
  .ved-tab thead{display:none}
  .ved-tab,.ved-tab tbody,.ved-tab tr{display:block}
  .ved-tab tr{display:grid;grid-template-columns:28px minmax(0, 1fr) auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
  .ved-tab td{padding:0;border:0}
  .ved-tab td input{width:76px}
}