:root{--ink:#1b1a18;--ink-2:#2f2d29;--muted:#4d4943;--line:#dcd8d1;--field:#8c867c;--surface:#f5f3ef;--bg:#ffffff;--accent:#f95201;--accent-2:#ff7a33;
  --font:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --r:2px;--wrap:1200px;--gut:20px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--font);
  font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased;overflow-x:clip}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}

/* типографика: крупно и плотно, один шрифт */
h1,.h1{font-weight:800;font-size:clamp(34px,5.2vw,60px);line-height:1.02;letter-spacing:-.035em;margin:0 0 .35em;
  overflow-wrap:break-word;hyphens:auto}
@media(max-width:360px){h1,.h1{font-size:30px}}  /* «общестроительный» не помещался в 305 px */
h2,.h2{font-weight:800;font-size:clamp(25px,3.2vw,36px);line-height:1.08;letter-spacing:-.03em;margin:0 0 .5em}
h3,.h3{font-weight:800;font-size:clamp(19px,2vw,22px);line-height:1.2;letter-spacing:-.015em;margin:0 0 .4em}
p{margin:0 0 1em;max-width:68ch}
.lead{font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:var(--ink-2)}
.small{font-size:15px;line-height:1.5;color:var(--muted)}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.num{font-variant-numeric:tabular-nums}

/* ключевые цифры — один из немногих мест оранжевого */
.price{font-weight:800;font-size:clamp(34px,4vw,46px);line-height:1;letter-spacing:-.03em;color:var(--accent)}
.price small{font-size:.5em;font-weight:400;color:var(--ink-2);letter-spacing:0}
.fact{font-weight:800;font-size:clamp(48px,7vw,84px);line-height:.95;letter-spacing:-.045em;color:var(--accent)}

/* кнопки: строгие, без теней; главная — графит на оранжевом (5,2:1) */
.b,.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;
  border:1px solid var(--ink);border-radius:var(--r);background:var(--bg);color:var(--ink);
  font:600 16px/1.2 var(--font);letter-spacing:-.005em;text-decoration:none;cursor:pointer;
  transition:background-color .15s,border-color .15s,color .15s}
.b:hover,.btn.btn2:hover{background:var(--surface)}
.b-main,.btn:not(.btn2){background:var(--accent);border-color:var(--accent);color:var(--ink)}
.b-main:hover,.btn:not(.btn2):not(.off):hover{background:var(--accent-2);border-color:var(--accent-2)}
.b-white{background:var(--accent);border-color:var(--accent);color:#fff}
.b[aria-disabled=true],.btn.off,.btn.off:hover{border-color:var(--line);color:var(--muted);background:var(--bg);cursor:default}

/* разделы страницы-образца */
.sec{padding:56px 0;border-top:1px solid var(--line)}
.sec:first-of-type{border-top:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:860px){.grid2,.grid3{grid-template-columns:1fr}.sec{padding:40px 0}}
@media(max-width:560px){:root{--gut:16px}body{font-size:16px}}

.sw{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--bg)}
.sw-c{height:88px;display:flex;align-items:flex-end;padding:10px 12px;font-weight:800;font-size:15px}
.sw-b{padding:12px;font-size:14px;line-height:1.45}
.sw-b b{display:block;font-size:15px}
.sw-b code{font-size:13px;color:var(--ink-2)}
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:860px){.swatches{grid-template-columns:repeat(2,1fr)}}

.ctab{width:100%;border-collapse:collapse;font-size:15px}
.ctab th,.ctab td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.ctab th{font-weight:800;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.ok{font-weight:800}
.bad{font-weight:800;color:#b42318}
.chip{display:inline-block;padding:4px 10px;border-radius:var(--r);font-weight:800}
.tblwrap{overflow-x:auto}

.specimen{font-size:clamp(28px,5vw,56px);line-height:1.1;letter-spacing:-.03em;margin:0 0 8px}
.ds-top{border-bottom:1px solid var(--line);padding:14px 0}
.ds-top .wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ds-top img{height:38px;width:auto}
.ds-note{background:var(--surface);border-left:3px solid var(--ink);padding:14px 16px;font-size:15px;max-width:none}
.btnrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 10px}

/* ── элементы (этап 2): оформляются классы, которые уже выдаёт сборка ── */
.cta{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0}
.badge{display:inline-block;border:1px solid var(--ink);border-radius:var(--r);padding:3px 8px;
  font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}

/* теги совместимости — ссылки на тип техники. Ровная сетка плиток одной ширины (просьба владельца 12.10:
   «эстетичнее»): галочка — «подходит», стрелка — ссылка на технику этого типа */
.compatibility-tags{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:8px;margin:0 0 16px}
.compatibility-tag{display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 14px;background:var(--surface);
  border:1px solid transparent;border-radius:var(--r);color:var(--ink);font-size:15px;font-weight:600;line-height:1.25;
  text-decoration:none;transition:border-color .15s;overflow-wrap:anywhere}
.compatibility-tag:before{content:"";flex:none;width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1a18' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/18px no-repeat}
.compatibility-tag:after{content:"";flex:none;margin-left:auto;width:8px;height:8px;border-top:2px solid var(--muted);
  border-right:2px solid var(--muted);transform:rotate(45deg)}
.compatibility-tag:hover{border-color:var(--ink)}
.compatibility-tag:hover:after{border-color:var(--ink)}
@media(max-width:560px){.compatibility-tags{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.compatibility-tags{grid-template-columns:minmax(0,1fr)}}
.tags-label{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}

/* «На странице» — ссылки на разделы этой же карточки. Решение владельца проекта 12.10.2026: не вкладки
   (вкладка обещает переключить содержимое на месте, а здесь страница прокручивается), а честные ссылки со
   стрелкой вниз. Не липнут, активный раздел не подсвечивается. На телефоне — столбиком, без обрезания. */
.cnav{display:flex;flex-wrap:wrap;align-items:center;gap:4px 28px;margin:0 0 32px;padding:16px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cnav:before{content:"На странице";flex-basis:100%;font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.cnav a{display:inline-flex;align-items:center;gap:8px;min-height:40px;font-size:16px;font-weight:600;color:var(--ink);
  text-decoration:none}
.cnav a:after{content:"↓";font-weight:400;color:var(--muted);transition:transform .15s}
.cnav a:hover{text-decoration:underline}
.cnav a:hover:after{transform:translateY(2px);color:var(--ink)}
@media(max-width:560px){.cnav{flex-direction:column;align-items:stretch;gap:0;padding:12px 0 0}
  .cnav a{justify-content:space-between;min-height:48px;border-top:1px solid var(--line)}
  .cnav:before{margin-bottom:8px}}

/* таблицы: тонкие линии, заголовки мелкими прописными, цифры ровными столбиками */
table{border-collapse:collapse;width:100%;font-size:15px;font-variant-numeric:tabular-nums}
th,td{border:0;border-bottom:1px solid var(--line);padding:12px 14px;text-align:left;vertical-align:top}
th{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  border-bottom-color:var(--ink);vertical-align:top}  /* заголовки сверху, как и значения: тексты начинаются на одной линии */
tr:hover td{background:var(--surface)}
.tcap{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:24px 0 8px}
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0 16px}
.tw.dense th:first-child,.tw.dense td:first-child{position:sticky;left:0;background:var(--bg);font-weight:800}
.tscroll-hint{display:none;font-size:13px;color:var(--muted);text-align:right;margin:-8px 0 16px}
.mod-cards{display:none;margin:8px 0 16px}
.mod-card{border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:0 0 12px}
.mod-title{font-weight:800;font-size:17px;margin-bottom:8px}
.mod-row{display:flex;justify-content:space-between;gap:12px;font-size:15px;padding:7px 0;border-top:1px solid var(--line)}
.mod-label{color:var(--muted)}
.mod-value{text-align:right;font-variant-numeric:tabular-nums}
.mod-price{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:10px;
  padding-top:12px;border-top:1px solid var(--ink)}
.mod-price-label{font-size:13px;color:var(--muted)}
.mod-price-value{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--accent);font-variant-numeric:tabular-nums}
/* планшет и шире: прокрутки вбок нет. Таблица не влезает (класс .scrolls ставит скрипт) — вместо неё
   те же карточки модификаций, что на телефоне, но в несколько колонок */
.tscroll-hint{display:none!important}
@media(min-width:561px){.tw.dense.scrolls{display:none}
  .tw.dense.scrolls ~ .mod-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
  .tw.dense.scrolls ~ .mod-cards .mod-card{margin:0}}
@media(max-width:560px){.tw.dense{display:none}.tw.dense + .tscroll-hint{display:none}.mod-cards{display:block}}

/* формы: поле видно (рамка 3,6:1), подпись над полем, без лишнего */
form{border:1px solid var(--line);border-radius:var(--r);padding:24px;background:var(--bg)}
.f{margin:0 0 18px}
.f label{display:block;font-size:15px;font-weight:600;margin-bottom:6px}
.f .req,.f .opt{font-weight:500;font-size:13px;color:var(--muted)}
.f .req{font-size:17px;font-weight:800;color:var(--ink);line-height:1}
.f input,.f textarea,.f select{width:100%;min-height:48px;padding:11px 12px;border:1px solid var(--field);
  border-radius:var(--r);font:400 16px/1.4 var(--font);color:var(--ink);background:var(--bg)}
.f input:focus,.f textarea:focus{outline:2px solid var(--ink);outline-offset:0;border-color:var(--ink)}
.f input[type=file]{padding:7px;background:var(--surface);border-style:dashed;color:var(--ink-2);cursor:pointer}
.f input[type=file]::file-selector-button{min-height:40px;margin-right:14px;padding:8px 18px;border:1px solid var(--ink);
  border-radius:var(--r);background:var(--bg);color:var(--ink);font:600 15px/1.2 var(--font);cursor:pointer;
  transition:background-color .15s}
.f input[type=file]:hover::file-selector-button{background:var(--surface)}
.f input[type=file]:focus-visible{border-style:solid}
@media(max-width:400px){.f input[type=file]{font-size:13px;padding:5px}.f input[type=file]::file-selector-button{margin-right:8px;padding:8px 10px;font-size:13px}}
.hint{font-size:15px;color:var(--muted);margin-top:6px}
@media(max-width:560px){form{padding:16px}}

/* служебные пометки прототипа — спокойно: подложка, тонкая линия, без «тревожных» цветов */
.wait{background:var(--surface);border-left:3px solid var(--field);padding:12px 16px;margin:12px 0;
  font-size:15px;color:var(--ink-2)}
.wait b{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-bottom:2px}
.ask{border:1px dashed var(--field);padding:12px 16px;margin:12px 0;font-size:15px;color:var(--ink-2)}
.nosend{font-size:14px;color:var(--muted);margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}

/* рамка-заглушка под фото, видео, 3D, чертежи */
.ph{display:flex;align-items:center;justify-content:center;text-align:center;min-height:120px;padding:16px;
  background:var(--surface);border:1px dashed var(--field);border-radius:var(--r);color:var(--muted);font-size:15px;margin:8px 0}
.ph.gal{min-height:260px}
.ph.sm{min-height:72px;font-size:14px}


/* ── шапка, меню, подвал, нижняя панель (этап 3): оформляется разметка прототипа (templates.head/foot/bar) ── */
.contacts-row{background:var(--surface)}
.contacts{display:flex;gap:22px;flex-wrap:wrap;align-items:center;padding:7px 0;font-size:13px;color:var(--ink-2)}
.contacts a{color:var(--ink-2);text-decoration:none}
.contacts a:hover{color:var(--ink);text-decoration:underline}
.contacts .sp{margin-left:auto}
/* «Telegram ▾» в верхней полосе: раскрывает оба канала (владелец 02.11.2026: «два канала» было текстом без ссылки).
   Выглядит как соседние ссылки полосы, открывается тем же скриптом, что «Ещё ▾» */
.dd-tg .dd-t{min-height:0;padding:0;border:0;background:none;font:inherit;color:var(--ink-2)}
.dd-tg .dd-t:hover{background:none;color:var(--ink);text-decoration:underline}
.dd-tg .dd-panel{min-width:200px;z-index:80}
.top{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:20px;padding:14px 0;position:relative}
.logo{flex:none}
.logo img{display:block;height:40px;width:auto}
.linkset a{font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap}
.linkset a:hover{text-decoration:underline}
.dd{position:relative;flex:none}
.dd-t{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--field);
  border-radius:var(--r);background:var(--bg);font:600 15px/1 var(--font);color:var(--ink);cursor:pointer}
.dd-t:hover{background:var(--surface)}
.dd-more .dd-t{border-color:transparent;padding:0 6px}
.dd-panel{display:none;position:absolute;top:calc(100% + 8px);left:0;min-width:260px;background:var(--bg);
  border:1px solid var(--line);border-radius:var(--r);padding:6px 0;z-index:60}
.dd-more .dd-panel{left:auto;right:0}
.dd.open .dd-panel{display:block}
.dd-panel a{display:block;padding:11px 18px;font-size:15px;color:var(--ink);text-decoration:none}
.dd-panel a:hover{background:var(--surface)}
.q{display:flex;align-items:center;min-height:44px;padding:0 14px 0 42px;border:1px solid var(--field);
  border-radius:var(--r);color:var(--muted);font-size:15px;background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%236b665e' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 14px 50%/18px no-repeat}
.nav > .q{flex:1;min-width:180px}
.nav .pick{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;background:var(--accent);
  border-radius:var(--r);color:var(--ink);font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap}
.nav .pick:hover{background:var(--accent-2)}
.burger,.ico-search{display:none;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;
  padding:0 12px;border:1px solid var(--field);border-radius:var(--r);background:var(--bg);
  font:600 15px/1 var(--font);color:var(--ink);cursor:pointer}
.burger svg,.ico-search svg{width:20px;height:20px;flex:none}
.burger[aria-expanded=true],.ico-search[aria-expanded=true]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.mpanel{display:none}

/* до 1100 px шапка компактная: логотип · поиск · Меню (полная строка уже 1024 px не помещается — проверено) */
@media(max-width:1100px){
  .nav .linkset,.nav .dd,.nav .pick,.nav > .q{display:none}
  .ico-search{display:inline-flex;margin-left:auto}
  .burger{display:inline-flex}
  .nav{gap:10px;padding:12px 0;position:static}
  .logo img{height:36px}
  .mpanel.open{display:block;position:absolute;left:0;right:0;top:100%;background:var(--bg);
    border-bottom:1px solid var(--line);z-index:60;max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);
    overflow-y:auto;overscroll-behavior:contain}
  .mmenu-panel a,.acc-t{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:54px;
    padding:0 var(--gut);border:0;border-top:1px solid var(--line);background:var(--bg);
    font:600 16px/1.2 var(--font);color:var(--ink);text-decoration:none;text-align:left;cursor:pointer}
  .mmenu-panel > a:first-child{border-top:0;background:var(--accent)}
  .acc-t:after{content:"";width:9px;height:9px;border-right:2px solid;border-bottom:2px solid;transform:rotate(45deg);margin:-5px 4px 0 0}
  .acc-t[aria-expanded=true]:after{transform:rotate(-135deg);margin-top:5px}
  .acc-b{display:none}
  .acc.open .acc-b{display:block}
  .acc-b a{font-weight:400;background:var(--surface);padding-left:calc(var(--gut) + 16px)}
  .msearch-panel{padding:12px var(--gut)}
  .msearch-panel .q{min-height:48px}
  .msearch-panel.open{overflow:visible}
}

/* подвал — графитовый, логотип одноцветный; одна схема для всех колонок: заголовок + список */
footer{background:var(--ink);color:#e8e4dd;margin-top:80px;padding:48px 0 40px;font-size:15px}
.flogo-row{padding-bottom:28px;margin-bottom:32px;border-bottom:1px solid #3a3833}
.flogo{display:block;height:38px;width:auto}
.cols{display:grid;gap:32px;grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,1fr))}
.fcol b{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#a9a39a;margin:0 0 16px}
.flinks{list-style:none;margin:0;padding:0}
.flinks li{margin:0 0 10px;line-height:1.45;color:#e8e4dd}
.flinks li:last-child{margin-bottom:0}
.flinks strong{color:#fff;font-weight:800}
/* три факта о компании выделены (просьба владельца 13.10) только цветом: размер и цвет текста как у остальных
   пунктов подвала (крупнее «выбивалось», 13.10), цифры и значок места — оранжевым
   (ключевые цифры — разрешённое место для акцента; на графите контраст 5,2:1) */
@media(min-width:1240px){.ffacts li{white-space:nowrap}}
/* на сенсорных экранах пункты подвала выравниваются flex-ом, а он съедает пробелы вокруг <strong> — здесь блок */
@media(max-width:1100px){.flinks.ffacts li{display:block;min-height:44px;padding:11px 0}}
.ffacts strong{color:var(--accent)}
.ffacts .pin{display:inline-block;flex:none;width:14px;height:14px;margin-right:8px;vertical-align:-1px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f95201'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/14px no-repeat}
footer a{color:#e8e4dd;text-decoration:none}
footer a:hover{color:#fff;text-decoration:underline}
footer .nosend{color:#a9a39a;border-top:1px solid #3a3833;margin-top:40px;padding-top:18px;font-size:14px;max-width:none}
/* сенсорные экраны до 1023 px: каждый пункт подвала (и ссылка, и текст) — строка 44 px, шаг одинаковый;
   ссылки контактов в шапке и логотип — тоже не меньше 44 px */
@media(max-width:1100px){.flinks li{display:flex;align-items:center;min-height:44px;margin:0}
  .flinks a{display:flex;align-items:center;min-height:44px}
  .contacts a,.dd-tg .dd-t{display:inline-flex;align-items:center;min-height:44px}.contacts{padding:0}
  .logo{display:flex;align-items:center;min-height:44px}}

/* нижняя панель телефона: подписи под иконками, одна строка, не перекрывает текст */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;background:var(--bg);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom)}
.bar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:58px;
  font-size:12px;font-weight:600;color:var(--ink-2);text-decoration:none}
.bar a:active{background:var(--surface)}
.bar .i{display:flex}
.bar svg{width:22px;height:22px}

@media(max-width:1239px){.cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){
  .contacts-row{display:none}
  .cols{grid-template-columns:1fr;gap:28px}
  footer{padding:40px 0 104px}
  .bar{display:flex}
}

/* полоса этапа на странице-образце */
.ds-strip{background:var(--surface);border-bottom:1px solid var(--line);font-size:13px;color:var(--ink-2);padding:8px 0}

/* ── карточка товара (этап 4): оформляется та же разметка, что строит build.page_product ── */
.crumbs{font-size:15px;color:var(--muted);padding:20px 0 0}
.crumbs a{color:var(--ink-2)}
.card h1{margin:16px 0 12px}
.muted{color:var(--muted);font-size:15px}
.card section{margin:0;padding:56px 0;border-top:1px solid var(--line)}
.card section.hero2{border-top:0;padding:20px 0 40px}
.card main section[id],.card section[id]{scroll-margin-top:calc(var(--hh,72px) + 16px)}
.hero2{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:start}
.buy .price{margin:4px 0 0}
.buy .muted{margin:8px 0 20px}
.buy > p{color:var(--ink-2)}
.buy .cta{margin:24px 0 0}
.buy .cta .btn{min-height:52px;font-size:17px;padding:14px 24px}
.compat-mini{display:none}

/* карусель (этап 6, 13.10: «найди хорошие примеры… чтобы не выбивалась»). Опора — исследования Baymard:
   миниатюры лучше точек (и на телефоне), свайп, полноэкранный просмотр с увеличением.
   Компьютер: колонка миниатюр слева, у выбранной — оранжевая полоска (активный пункт — разрешённый акцент),
   стрелки появляются при наведении, «Увеличить» → полный экран. Телефон: край следующего фото выглядывает,
   миниатюры под фото, касание → полный экран (там свайп и щипок). Класс dcar — чтобы не пересекаться со
   скриптом вайрфрейма (.car). */
.dcar{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;align-items:start}
.dcar .cview{grid-column:2;grid-row:1;position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.dcar .cslides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;position:relative}
.dcar .cslides::-webkit-scrollbar{display:none}
.dcar .cs{flex:0 0 100%;margin:0;scroll-snap-align:start;aspect-ratio:4/3;background:#fff}
.dcar .cs img{width:100%;height:100%;object-fit:cover}
.dcar .cprev,.dcar .cnext,.czoom{position:absolute;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:var(--r);background:#fff center/20px no-repeat;color:transparent;font-size:0;cursor:pointer;transition:background-color .15s,border-color .15s;z-index:2}
/* стрелки — вариант 3, выбран владельцем 13.10 из трёх: графитовые квадраты вплотную к краю фото, белая стрелка;
   при наведении — оранжевые с графитовой стрелкой (графит на оранжевом 5,2:1). Видны на тёмных и светлых фото */
.dcar .cprev,.dcar .cnext{top:50%;transform:translateY(-50%);width:48px;height:48px;border:0;border-radius:0;background-color:var(--ink);background-size:22px}
.dcar .cprev{left:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E")}
.dcar .cnext{right:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E")}
.dcar .cprev:hover{background-color:var(--accent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1a18' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E")}
.dcar .cnext:hover{background-color:var(--accent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1a18' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E")}
.dcar .cprev:focus-visible,.dcar .cnext:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* на тёмных фото графит сливался с фоном (владелец 13.10) — тонкая светлая обводка внутри квадрата */
.dcar .cprev,.dcar .cnext,.czoom{box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.dcar .cprev:hover,.dcar .cnext:hover,.czoom:hover{box-shadow:none}
.dcar .cslides{cursor:grab;user-select:none;-webkit-user-select:none}
.dcar .cslides.drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.dcar .cslides img{-webkit-user-drag:none;pointer-events:none}
.czoom{top:0;right:0;width:48px;height:48px;border:0;border-radius:0;background-color:var(--ink);background-size:18px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M10 20H4v-6M20 4l-7 7M4 20l7-7'/%3E%3C/svg%3E")}
.czoom:hover{background-color:var(--accent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1a18' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M10 20H4v-6M20 4l-7 7M4 20l7-7'/%3E%3C/svg%3E")}
.dcar .ccount{position:absolute;left:14px;bottom:14px;background:rgba(27,26,24,.72);color:#fff;font-size:12px;font-weight:600;
  letter-spacing:.04em;padding:4px 9px;border-radius:var(--r);font-variant-numeric:tabular-nums}
.dcar .gths{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:10px;margin:0;
  height:0;min-height:100%;overflow-y:auto;scrollbar-width:thin;padding-right:2px}  /* колонка миниатюр не выше фото, лишние — прокруткой */
.dcar .gth{flex:none}
.dcar .gth{position:relative;width:100%;padding:0;border:1px solid var(--line);border-radius:var(--r);background:#fff;cursor:pointer;
  aspect-ratio:4/3;overflow:hidden;opacity:.72;transition:opacity .15s,border-color .15s}
.dcar .gth img{width:100%;height:100%;object-fit:cover}
.dcar .gth:hover{opacity:1}
.dcar .gth.on{opacity:1;border-color:var(--ink)}
.dcar .gth.on:after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}

/* полноэкранный просмотр */
.lb{position:fixed;inset:0;z-index:100;display:none;flex-direction:column;background:#11100f;color:#e8e4dd}
.lb.open{display:flex}
.lb-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 16px;font-size:14px;font-variant-numeric:tabular-nums}
.lb-x{width:44px;height:44px;border:1px solid #3a3833;border-radius:var(--r);background:transparent;color:#fff;font-size:26px;line-height:1;cursor:pointer}
.lb-x:hover{border-color:#fff}
.lb-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 72px}
.lb-stage img{max-width:100%;max-height:100%;object-fit:contain;background:#fff;touch-action:pinch-zoom}
.lb-p,.lb-n{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border:1px solid #3a3833;border-radius:var(--r);
  background:transparent;color:#fff;font-size:28px;cursor:pointer}
.lb-p{left:12px}.lb-n{right:12px}
.lb-p:hover,.lb-n:hover{border-color:#fff}
.lb-cap{padding:12px 16px 18px;text-align:center;font-size:15px;color:#d9d4cc}
@media(max-width:860px){.dcar{grid-template-columns:72px minmax(0,1fr)}}
@media(max-width:560px){
  .dcar{display:block}
  /* фото на всю ширину: выглядывающий край следующего фото смотрелся как обрезанная картинка (владелец 13.10) */
  .dcar .cprev,.dcar .cnext{display:none}
  .czoom{display:none}
  .dcar .ccount{left:10px;bottom:10px}
  .dcar .gths{flex-direction:row;margin-top:10px;gap:8px;height:auto;min-height:0;overflow-x:auto;overflow-y:hidden}
  .dcar .gth{width:calc((100% - 24px) / 4)}
  .dcar .gth.on:after{left:0;right:0;top:auto;bottom:0;width:auto;height:3px}
  .lb-stage{padding:0}.lb-p,.lb-n{display:none}}

/* видео, 3D, чертежи: две рамки рядом; 3D — в рамке с подписью */
.media-extra{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch;margin:8px 0}
.media-extra > :only-child{grid-column:1 / -1;justify-self:center;width:calc((100% - 16px) / 2)}
#video-3d:has(> .media-extra > :only-child) > h2{text-align:center}
.media-extra .ph{margin:0}
.media-extra .ph.dwgv{min-height:320px}
.v3d{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--bg)}
.v3d model-viewer{display:block;width:100%;height:440px;background:linear-gradient(#fff,var(--surface))}
.v3d .cap{font-size:14px;color:var(--muted);padding:10px 14px;border-top:1px solid var(--line)}

/* таблица «параметр — значение» */
.ltab th,.ltab td{padding-left:6px;padding-right:6px}
.ltab th:first-child,.ltab td:first-child{padding-left:0}
.ltab small{display:block;font-size:13px;color:var(--ink-2)}
@media(max-width:400px){.ltab th{font-size:11px;letter-spacing:0}}
.kv th{width:42%;font-size:15px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink-2);border-bottom-color:var(--line)}
.kv td{font-weight:800}
/* простая таблица «параметр — значение» не шире экрана: длинные слова и обозначения переносятся (этап 10) */
table.kv{width:100%;max-width:100%}.kv th,.kv td{overflow-wrap:anywhere}

/* другие изделия категории */
.grid{display:grid;gap:16px}
.gauto{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.pc{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  color:var(--ink);text-decoration:none;transition:border-color .15s}
.pc:hover{border-color:var(--ink)}
.pc .ph{margin:0;border:0;border-bottom:1px dashed var(--field);border-radius:0;min-height:170px}
.pc .body{padding:16px;display:flex;flex-direction:column;flex:1}
/* метка «Производим» — внизу карточки, во всех карточках на одном уровне (просьба владельца 12.10) */
.pc .body .mt:last-child{margin-top:auto;padding-top:14px}
.pc .n{font-weight:800;font-size:17px;line-height:1.25}
.pc .p{margin-top:8px;font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--accent);font-variant-numeric:tabular-nums}
.nw{white-space:nowrap}
.pc .mt{font-size:16px;line-height:1.45;color:var(--ink);margin-top:8px}
.card form{max-width:720px}
.request-layout{max-width:720px}
.request-layout .f input[aria-invalid="true"],.request-layout .f textarea[aria-invalid="true"]{border-color:#b42318;outline:2px solid #b42318}
.request-error{margin-top:6px;color:#b42318;font-size:14px;font-weight:600}
/* заявка, этап 8: флажок согласия, ловушка для ботов, состояния «отправлена» и «не удалось» */
.request-layout .f input[type=checkbox][aria-invalid="true"]{outline:2px solid #b42318;outline-offset:2px}
.f-check{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:start}
.f-check input[type=checkbox]{width:22px;height:22px;min-height:0;margin:1px 0 0;padding:0;accent-color:var(--ink)}
.f-check label{margin:0;font-weight:500;line-height:1.45}
.f-check .request-error{grid-column:2}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.request-summary{align-self:center;color:#b42318;font-size:15px;font-weight:600}
.request-failed{border-left:3px solid #b42318;background:var(--surface);padding:14px 16px;margin-top:8px}
.request-failed p{margin:0 0 8px}
.request-failed .cta{margin:8px 0 0}
.request-failed .btn{overflow-wrap:anywhere}
.request-sent{max-width:720px;border:1px solid var(--line);border-left:3px solid var(--ink);border-radius:var(--r);
  padding:24px;background:var(--bg)}
.request-sent{scroll-margin-top:calc(var(--hh,64px) + 16px)}
.request-sent:focus{outline:2px solid var(--ink);outline-offset:2px}
.request-sent h2{margin-top:0}
.request-layout button[disabled]{opacity:.7;cursor:progress}

@media(max-width:860px){.hero2{grid-template-columns:minmax(0,1fr);gap:24px}.media-extra{grid-template-columns:1fr}
  .media-extra > :only-child{width:100%}
  .v3d model-viewer{height:340px}}
@media(max-width:560px){.card section{padding:40px 0}
  .compat-desktop{display:none}.compat-mini{display:block;margin-top:20px;font-size:15px;color:var(--ink-2)}
  .buy .cta .btn{flex:1 1 100%}
}

/* вариант A — воздушный: крупнее заголовок и цена, больше воздуха между разделами */
.v-a h1{font-size:clamp(36px,5.6vw,66px)}
.v-a .hero2{gap:64px}
.v-a .buy .price{font-size:clamp(40px,4.6vw,56px)}
.v-a section{padding:80px 0}
.v-a section.hero2{padding:24px 0 56px}
@media(max-width:560px){.v-a section{padding:48px 0}.v-a .hero2{gap:28px}}

/* 3D — по кнопке: библиотека и модель (~1,2 МБ) не грузятся, пока человек сам не попросит
   (вес страницы, связь на объекте; design.md «Вес страницы») */
.v3d{position:relative}
.media-model-start[hidden]{display:none}
.media-model-stage model-viewer{height:440px;width:100%}
.media-model-stage,.media-video-stage{height:440px;min-height:0;position:relative;flex-shrink:0}
.media-extra > .media-video{margin:0}
.media-video{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.media-video-stage > .vid-play,.media-video .media-video-stage > video{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border:0;border-radius:0;background:var(--surface)}
.media-video-stage > .vid-play img{object-fit:cover}
.media-video > .cap{padding:10px 14px;font-size:14px;color:var(--muted);border-top:1px solid var(--line)}
.media-moments{display:flex;flex-wrap:wrap;gap:8px;padding:12px 14px;border-top:1px solid var(--line)}
.media-moment{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg);color:var(--ink);font:600 14px/1.3 var(--font);cursor:pointer;text-align:left}
.media-moment:hover{background:var(--surface);border-color:var(--ink)}
.media-moment:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.media-moment time{font-variant-numeric:tabular-nums}
@media(max-width:860px){.media-model-stage,.media-video-stage{height:340px}}
@media(max-width:860px){.media-model-stage model-viewer{height:340px}}
.v3d-load{position:absolute;left:50%;top:calc(50% - 22px);transform:translate(-50%,-50%);display:flex;flex-direction:column;
  align-items:center;gap:4px;min-height:52px;padding:12px 22px;border:1px solid var(--ink);border-radius:var(--r);
  background:var(--bg);color:var(--ink);font:600 16px/1.2 var(--font);cursor:pointer;z-index:2}
.v3d-load:hover{background:var(--surface)}
.v3d-load span{font-size:13px;font-weight:400;color:var(--muted)}
@media(max-width:1100px){.cnav a{min-height:44px}}

/* вариант B — плотный (порядок блоков тот же, что у A): меньше воздуха, компактная панель покупки в рамке,
   плотнее таблицы и карточки модификаций, больше данных на первом экране — как каталог для закупщика */
.v-b h1{font-size:clamp(28px,3.4vw,42px);margin:10px 0 8px}
.v-b h2{font-size:clamp(22px,2.2vw,28px)}
.v-b section{padding:40px 0}
.v-b section.hero2{padding:12px 0 32px}
.v-b .hero2{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:28px}
.v-b .buy{border:1px solid var(--line);border-radius:var(--r);padding:22px 24px}
.v-b .buy .price{font-size:clamp(32px,3vw,40px)}
.v-b .buy .muted{margin:6px 0 12px}
.v-b .buy > p{font-size:16px;margin-bottom:14px}
.v-b .buy .tags-label{margin-bottom:6px}
.v-b .buy .compatibility-tags{gap:6px;margin-bottom:0}
.v-b .buy .compatibility-tag{min-height:44px;padding:8px 12px;font-size:14px}
.v-b .buy .cta{margin-top:18px}
.v-b .buy .cta .btn{min-height:48px;font-size:16px;padding:12px 20px}
.v-b .dcar{grid-template-columns:72px minmax(0,1fr)}
.v-b .cnav{padding:10px 0;margin-bottom:8px}
.v-b th,.v-b td{padding:8px 12px}
.v-b table{font-size:14px}
.v-b .tcap{margin:16px 0 6px}
.v-b .mod-card{padding:12px 14px;margin-bottom:8px}
.v-b .mod-title{font-size:16px;margin-bottom:4px}
.v-b .mod-row{padding:4px 0;font-size:14px}
.v-b .mod-price{margin-top:6px;padding-top:8px}
.v-b .mod-price-value{font-size:20px}
.v-b .media-extra .ph.dwgv{min-height:240px}
.v-b .v3d model-viewer{height:360px}
.v-b .pc .ph{min-height:120px}
@media(max-width:860px){.v-b .hero2{grid-template-columns:minmax(0,1fr);gap:16px}}
@media(max-width:560px){.v-b section{padding:28px 0}.v-b .buy{padding:16px}
  .v-b .buy .compatibility-tags{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v-b .buy .compatibility-tag{font-size:13px;gap:6px;padding:8px 10px}
  .v-b .buy .compatibility-tag:after{display:none}}

/* видео: кадр-превью и кнопка, файл грузится по нажатию */
.vid{margin:0 0 12px}
.vid-play{position:relative;display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);overflow:hidden;cursor:pointer;aspect-ratio:848/464}
.vid-play img{display:block;width:100%;height:100%;object-fit:cover}
.vid-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;flex-direction:column;
  align-items:center;gap:2px;min-height:48px;padding:12px 22px;border:1px solid var(--ink);border-radius:var(--r);
  background:var(--bg);color:var(--ink);font:600 16px/1.2 var(--font)}
.vid-btn small{font-weight:400;font-size:13px;color:var(--ink-2)}
.vid-play:hover .vid-btn{background:var(--surface)}
.vid video{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r);background:#000}
/* 3D: переключатель исполнений (несколько моделей одного изделия) */
.v3d-tabs{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--line)}
.v3d-tab{flex:1 1 auto;min-height:48px;padding:10px 16px;border:0;border-right:1px solid var(--line);background:var(--bg);
  font:600 15px/1.2 var(--font);color:var(--ink-2);cursor:pointer;box-shadow:inset 0 -3px 0 transparent}
.v3d-tab:last-child{border-right:0}
.v3d-tab:hover{color:var(--ink);background:var(--surface)}
.v3d-tab.on{color:var(--ink);box-shadow:inset 0 -3px 0 var(--accent)}

/* чертежи КБ: листы А3 в рамке, подпись, «Открыть крупно» и «Скачать PDF» */
.dwgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:20px;align-items:stretch;margin:8px 0 12px}
.dwg{display:flex;flex-direction:column;margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.dwg-img{display:block;position:relative;aspect-ratio:4/3;flex-shrink:0;background:#fff;cursor:zoom-in}
/* листы разного формата (А4 вертикальный и А3 горизонтальный) — в одинаковых рамках, обе карточки одной высоты */
.dwg-img img{position:absolute;left:12px;top:12px;display:block;width:calc(100% - 24px);height:calc(100% - 24px);object-fit:contain}
.dwg figcaption{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  flex:1;padding:12px 16px;border-top:1px solid var(--line);font-size:15px}
.dwg-act{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:auto}
.dwg-act a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}

/* ── главная: первый экран (этап 8). Титульное фото клиента (13.10.2026) во всю ширину почти целиком — в узкой колонке
   терялись щётка и отвал; текст поверх фото закрыл бы логотип на здании, поэтому текст под фото ── */
.hero{border-bottom:1px solid var(--line)}
/* Первый экран (владелец 21.10.2026: «весь текст поверх фото»). Фото на всю ширину и в пределах первого экрана
   (снизу срезается только асфальт). Текст — слева, вертикально по центру, на затемнении слева направо: под текстом
   пустая стена и край щётки, фреза, погрузчики и отвал справа открыты. На телефоне — фото, под ним тот же текст. */
.hero-stage{position:relative;background:var(--ink)}
.hero-img{margin:0}
.hero-img img{display:block;width:100%;height:min(calc(100vw * 714 / 1280),calc(100svh - 145px));min-height:520px;
  object-fit:cover;object-position:60% 0}
/* текст внизу (просьба владельца 21.10: не закрывать вывеску завода); затемнение только снизу — верх кадра с вывеской открыт */
.hero-over{position:absolute;inset:0;display:flex;align-items:flex-end;padding-bottom:clamp(24px,4.5vh,52px);color:var(--surface);
  background:linear-gradient(0deg,rgba(27,26,24,.9) 0%,rgba(27,26,24,.72) 30%,rgba(27,26,24,.25) 52%,rgba(27,26,24,0) 64%),
    linear-gradient(90deg,rgba(27,26,24,.45) 0%,rgba(27,26,24,0) 55%);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.hero-over .wrap{width:100%}
.hero-pin{max-width:640px}
.hero-over h1{font-size:clamp(32px,min(3.4vw,5.6vh),54px);line-height:1.03;margin:0 0 12px;color:var(--surface)}
.hero-over .lead{margin:0 0 20px;font-size:18px;line-height:1.5;color:#e6e2da}
.hero-over .cta{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.hero-over .cta .btn{min-height:52px;font-size:17px;padding:14px 24px}
.hero-facts{display:flex;flex-wrap:wrap;gap:10px 28px;margin:22px 0 0;padding:18px 0 0;list-style:none;width:max-content;max-width:100%;
  border-top:1px solid rgba(245,243,239,.25)}
.hero-facts li{display:flex;align-items:baseline;gap:8px;font-size:15px;color:#d9d5cd}
.hero-facts b{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--accent-2);line-height:1.1}
@media(max-width:1180px){.hero-pin{max-width:560px}.hero-over h1{font-size:clamp(30px,3.8vw,42px)}
  .hero-over .lead{font-size:16px;margin-bottom:20px}.hero-facts{margin-top:22px;padding-top:16px}.hero-facts b{font-size:24px}
}
/* телефон и планшет: фото целиком сверху, текст под ним на графите (как продолжение фото) */
@media(max-width:960px){.hero-img img{height:auto;min-height:0;aspect-ratio:1280/714;object-position:50% 0}
  .hero-over{position:static;display:block;background:var(--ink);padding:28px 0 32px}.hero-facts li{flex-direction:column;gap:2px}.hero-pin{max-width:none}
  .hero-over h1{font-size:clamp(30px,7vw,42px)}}
@media(max-width:560px){.hero-over .cta .btn{flex:1 1 100%}
  /* три цифры в один ряд — без одинокой «12 мес.» на второй строке */
  .hero-facts{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:12px 20px;width:auto}.hero-facts li{font-size:14px}.hero-facts b{font-size:22px}}
.home main > section{margin:0;padding:64px 0;border-top:1px solid var(--line)}
.home main > section:first-child{border-top:0}
/* телефон и узкий планшет: фото целиком сверху, текст и кнопки под ним на светлом фоне */

/* ── доводка карточки (этап 6, 13.10) ── */
/* вкладки таблиц модификаций по типам техники */
.ttabs{display:flex;flex-wrap:wrap;gap:0;margin:0 0 4px;border-bottom:1px solid var(--line)}
.ttab{min-height:48px;padding:10px 18px;border:0;background:none;font:600 15px/1.2 var(--font);color:var(--ink-2);
  cursor:pointer;box-shadow:inset 0 -3px 0 transparent}
.ttab:hover{color:var(--ink);background:var(--surface)}
.ttab.on{color:var(--ink);box-shadow:inset 0 -3px 0 var(--accent)}
.tpanel .tcap{display:none}
.tpanel[hidden]{display:none}
td:last-child,.mod-price-value{font-weight:800}
@media(max-width:560px){.ttabs{display:grid;grid-template-columns:1fr 1fr}.ttab{padding:10px 8px;font-size:14px;text-align:center;
  border-bottom:1px solid var(--line)}}
/* фото в карточках товаров списка */
/* главная: сезонный блок (этап 8) — текст и две карточки в той же сетке 4 колонки, что и категории */
.season-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
/* Сезонный баннер: фото слева (кадр из видео клиента, марка на машине за краем), справа текст на ровном тёмном поле;
   цены отвалов и снегомётов — прямо в баннере, отдельных карточек нет (дублировали плитку категории) */
.season-txt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:var(--r);overflow:hidden;
  background:var(--ink);color:var(--surface);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.season-txt--contain{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
.season-ph{min-height:320px;background-color:#2b2a27;background-position:center;background-size:cover;background-repeat:no-repeat}
.season-ph--contain{min-height:0;display:flex;align-items:center}
.season-ph--contain img{display:block;width:100%;height:auto}
.season[data-season="winter"] .season-ph:not(.season-ph--contain){background-position:30% 62%;background-size:auto 118%}
.season-body{display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:36px 40px 40px}
.season-txt h2{margin:0 0 20px;color:var(--surface);font-weight:800;letter-spacing:-.025em}
.season-prices{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 22px}
.season-prices a{flex:1 1 180px;display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid rgba(245,243,239,.22);
  border-radius:var(--r);color:var(--surface);text-decoration:none;transition:border-color .15s,background-color .15s}
.season-prices a:hover{border-color:var(--surface);background:rgba(245,243,239,.06)}
.season-prices span{flex:1 0 auto;font-size:16px;font-weight:600;line-height:1.3}  /* название растягивается — цены всегда на одной линии внизу */
.season-prices b{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--accent-2)}
.season-facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.season-facts li{position:relative;padding-left:22px;font-size:16px;line-height:1.5;color:#eeebe5}
.season-facts li::before{content:"";position:absolute;left:0;top:.66em;width:10px;height:2px;background:var(--accent)}
.season-txt .cta{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.btn.btn-on-dark{background:var(--surface);border-color:var(--surface);color:var(--ink)}
.season-txt .btn.btn-on-dark:not(.off):hover{background:#fff;border-color:#fff}
.btn.btn-ghost{background:transparent;border-color:rgba(245,243,239,.5);color:var(--surface)}
.season-txt .btn.btn-ghost:not(.off):hover{background:rgba(245,243,239,.08);border-color:var(--surface)}
@media(max-width:860px){.season-txt{grid-template-columns:minmax(0,1fr)}
  .season-ph{min-height:0;height:clamp(170px,40vw,260px)}
  .season-ph--contain{height:auto}
  .season[data-season="winter"] .season-ph:not(.season-ph--contain){background-size:150% auto;background-position:12% 55%}
  .season-body{padding:24px}}
@media(max-width:560px){.season-txt .cta .btn{flex:1 1 100%}}
/* главная, этап 9 (21.10.2026): нижние блоки */
.h-sub{margin:-8px 0 24px;color:var(--ink-2);max-width:44em}
.mt-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;gap:12px}
.mt-tile{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:12px 18px;
  border:1px solid var(--line);border-radius:var(--r);color:var(--ink);font-weight:600;font-size:16px;text-decoration:none;
  transition:border-color .15s,background-color .15s}
.mt-tile:hover{border-color:var(--ink);background:var(--surface)}
.mt-tile .arr{color:var(--accent);font-weight:800}
.mt-ask{background:var(--surface);border-color:var(--surface)}
.mt-ask small{display:block;margin-top:2px;font-size:14px;font-weight:400;color:var(--ink-2)}
.prod-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px 64px;align-items:stretch}
.prod-txt h2{margin:-6px 0 24px}  /* верх букв заголовка — на уровне верха фото */
.prod-list{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:18px}
.prod-list li{position:relative;padding-left:22px;color:var(--ink-2);line-height:1.5}
.prod-list li::before{content:"";position:absolute;left:0;top:.7em;width:10px;height:2px;background:var(--accent)}
.prod-list b{display:block;color:var(--ink);font-weight:800;font-size:18px;margin-bottom:2px}
.more{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;color:var(--ink)}
.more span{color:var(--accent);font-weight:800}
.prod-pic{position:relative;margin:0}
/* фото цеха (21.10.2026): раскройный стол — ровно в высоту текста (без пустоты под текстом), под ними во всю
   ширину полоса из четырёх кадров: пресс, токарный станок, плазменная резка, сварка */
.prod-pic{min-height:300px}
.prod-main{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;border-radius:var(--r);background:#1b1a18}
.prod-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:12px}
.prod-row img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r);background:#1b1a18}
.prod-links{display:flex;flex-wrap:wrap;gap:4px 32px}
.prod-pic figcaption{margin-top:12px;font-size:15px;color:var(--ink-2)}
.b2b-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
/* дилерам и закупщикам (21.10.2026): по три подтверждённых факта, действие — заявка (страниц дилерам/закупщикам нет) */
.b2b{display:flex;flex-direction:column;padding:32px 36px 24px;background:var(--surface);border-radius:var(--r);color:var(--ink)}
.b2b h3{font-size:26px;margin:0 0 20px}
.b2b .prod-list{flex:1;margin-bottom:16px}
.dlv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.dlv{display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-height:150px;padding:22px 22px 24px;
  border:1px solid var(--line);border-radius:var(--r)}
.dlv-l{font-size:15px;color:var(--ink-2);line-height:1.4}
.dlv b{font-size:28px;font-weight:800;letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
.dlv:has(.dlv-v){justify-content:flex-start;min-height:0;gap:18px}  /* значения — на одной высоте, пояснения под ними */
@media(min-width:861px){.dlv:has(.dlv-v) .dlv-l{min-height:2.8em}}  /* подпись первой карточки может занять две строки — значения не съезжают */
.dlv-cont .dlv:has(.dlv-v) .dlv-l{min-height:0}   /* подписи контактов — в одну строку */
.dlv-v small{text-wrap:balance;display:block;margin-top:6px;font-size:14px;line-height:1.4;color:var(--ink-2)}  /* пояснение под значением */
.dlv b.dlv-free{color:var(--accent)}  /* самое выгодное условие — единственный акцент блока (крупный жирный текст, 3:1) */
.dlv-more{margin-top:16px}
@media(max-width:1100px){.mt-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:860px){.dlv-grid{grid-template-columns:minmax(0,1fr)}.dlv{min-height:0}.prod-grid{grid-template-columns:minmax(0,1fr)}.prod-pic{min-height:0}.prod-main{position:static;height:auto;aspect-ratio:16/9}.mt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .b2b-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:560px){.mt-grid{grid-template-columns:minmax(0,1fr);gap:8px}.mt-tile{min-height:56px}
  .dlv-grid{grid-template-columns:minmax(0,1fr)}.dlv{min-height:0}.b2b{padding:24px}.prod-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}}
/* ── каталог: поиск и фильтры (этап 9а, 21.10.2026). Корень .catx (.cat занят кнопкой «Каталог» в шапке) ── */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* заголовок каталога скромнее, чем у карточек: товары должны быть видны в первом экране (21.10.2026) */
.catx h1{margin:4px 0 10px;font-size:clamp(30px,3.4vw,42px)}
.ctrust{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0 0 22px;padding:0;list-style:none;font-size:15px;color:var(--ink-2)}
.ctrust li{position:relative;padding-left:16px}
.ctrust li::before{content:"";position:absolute;left:0;top:.68em;width:8px;height:2px;background:var(--accent)}
/* на странице каталога поиск в шапке скрыт — на странице свой, с подсказками; два поля сразу выглядели ошибкой */
.catpage .nav > .q,.catpage .ico-search,.catpage #msearch{display:none}
/* без поля поиска пункты шапки идут сразу за «Каталогом»: прижатые вправо, они оставляли пустую дыру (владелец 02.11.2026) */
@media(max-width:1100px){.catpage .burger{margin-left:auto}}  /* с этой ширины шапка компактная */
/* в списке метка только у чужого («Поставляем»): «Производим» стояло на всех 15 позициях и ничего не различало
   (владелец 02.11.2026). Пустая строка метки не добавляет отступа */
.catx .pc .badge{border-color:var(--line);color:var(--muted);font-weight:500}
.cgrid .pc .mt:last-child:empty{padding-top:0}
/* «Нужны свои размеры?» — полоса во всю ширину под товарами (одна плитка в ряду выглядела забытой), в счёт не входит */
.cown{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:16px 32px;padding:24px 28px;
  background:var(--surface);border:1px solid var(--surface);border-radius:var(--r);color:var(--ink);text-decoration:none;
  transition:border-color .15s}
.cown-txt{display:flex;flex-direction:column;gap:6px}
.cown:hover{border-color:var(--ink)}
.cown[hidden]{display:none}
.cown-t{font-size:20px;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.cown-n{color:var(--ink-2);line-height:1.5}
.cown .ctile-cta{flex:none;margin:0;min-height:48px;padding:0 22px;font-size:16px}
.cown:hover .ctile-cta{background:var(--accent-2)}
.csearch{position:relative;max-width:680px;margin:0 0 28px}
.csearch input{width:100%;min-height:54px;padding:12px 16px 12px 48px;border:1px solid var(--field);border-radius:var(--r);
  font:inherit;font-size:17px;color:var(--ink);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%231b1a18' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 16px 50%/20px no-repeat}
.csearch input:focus{outline:2px solid var(--ink);outline-offset:1px}
.csugg{position:absolute;left:0;right:0;top:100%;z-index:20;margin:4px 0 0;padding:6px 0;list-style:none;background:#fff;
  border:1px solid var(--ink);border-radius:var(--r)}
.csugg a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;min-height:44px;padding:10px 16px;
  color:var(--ink);text-decoration:none}
.csugg a:hover,.csugg a:focus{background:var(--surface);outline:0}
form.q{position:relative}
form.q .csugg a{font-size:14px;white-space:normal}
form.q .csugg b{white-space:nowrap}
@media(max-width:600px){.csugg a{gap:8px;font-size:14px}.csugg b{font-size:13px}}
.csugg b{flex:none;color:var(--accent);font-weight:800}
.cat-l{display:grid;gap:32px}
.cfil fieldset{border:0;margin:0;padding:0;min-width:0}
.cfil legend{padding:0;margin:0 0 10px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cfil .opt{display:flex;align-items:center;gap:10px;min-height:40px;font-size:16px;cursor:pointer}
.cfil .opt input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--ink)}
.cfil .opt i{margin-left:auto;font-style:normal;font-size:14px;color:var(--muted)}
.cfil .opt.off{color:#a39d93;cursor:default}  /* под выбранное ничего нет — пункт гаснет, но остаётся на месте */
.cprice{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cprice input{width:100%;min-height:44px;padding:8px 12px;border:1px solid var(--field);border-radius:var(--r);font:inherit;font-size:16px;color:var(--ink)}
.cprice input:focus{outline:2px solid var(--ink);outline-offset:1px}
.creset{justify-self:start;min-height:44px;padding:0;border:0;background:none;font:inherit;font-weight:600;color:var(--ink);
  text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.cempty .btn.creset{min-height:48px;padding:12px 22px;border:1px solid var(--ink);background:var(--bg);text-decoration:none}  /* в пустой выдаче сброс — обычная вторая кнопка, а не ссылка */
.cempty .btn.creset:hover{background:var(--surface)}
/* крестик очистки поиска — в цвет текста, а не стандартный синий Chrome */
.csearch input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:18px;height:18px;cursor:pointer;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1a18' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center/18px no-repeat}
.cbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin:0 0 16px}
.ccount{font-weight:600}
.csort{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:15px;color:var(--muted)}
.csort select{min-height:44px;padding:8px 12px;border:1px solid var(--field);border-radius:var(--r);font:inherit;font-size:16px;
  color:var(--ink);background:#fff}
.cgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
/* ярлыки выбранных фильтров: снять один фильтр, не открывая панель */
.cchips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.cchips[hidden]{display:none}
.cchip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 10px 6px 14px;border:1px solid var(--ink);
  border-radius:var(--r);background:var(--bg);font:inherit;font-size:15px;font-weight:500;color:var(--ink);cursor:pointer}
.cchip:hover{background:var(--surface)}
.cchip span{font-size:20px;line-height:1;color:var(--muted)}
/* карточки в ряду делят общие строки (subgrid): фото · название · цена · «подходит для» · метка. Название в одну или две
   строки больше не сдвигает цену (владелец 22.10.2026: «цены разъехались») */
.cgrid .pc{--pad:16px;display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0}
.cgrid .pc .body{display:contents}
.cgrid .pc .n{margin:var(--pad) var(--pad) 0}
.cgrid .pc .p,.cgrid .pc .mt{margin-left:var(--pad);margin-right:var(--pad)}
.cgrid .pc .mt:last-child{margin-top:auto;padding:14px 0 var(--pad)}
.cgrid .pc[hidden]{display:none}
.cempty{padding:32px;background:var(--surface);border-radius:var(--r)}
.cempty b{font-size:22px;font-weight:800}
.cempty p{margin:8px 0 0}
.cfil-head,.cfil-foot,.cfil-open{display:none}
/* фильтры колонкой слева, как в интернет-магазине (вариант A — выбор владельца 21.10.2026) */
.lay-a .cat-l{grid-template-columns:250px minmax(0,1fr);align-items:start}
.lay-a .cfil{display:grid;gap:28px;padding:0 6px 8px 0}
/* Общая сетка: счётчик и ярлыки выше, фильтры и карточки начинаются на одной линии. */
@media(min-width:861px){
  .lay-a .cat-l{row-gap:0}
  .lay-a .cres{display:contents}
  .lay-a .cbar{grid-column:2;grid-row:1}
  .lay-a .cchips{grid-column:2;grid-row:2}
  .lay-a .cfil{grid-column:1;grid-row:3}
  .lay-a .cgrid,.lay-a .cempty{grid-column:2;grid-row:3}
}
@media(max-width:1100px){.lay-a .cgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* телефон и планшет: фильтры — в выезжающей панели по кнопке «Фильтры» (оба варианта) */
@media(max-width:860px){
  .lay-a .cat-l{grid-template-columns:minmax(0,1fr)}
  .catx .cfil{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;align-items:stretch;gap:24px;padding:0 var(--gut) 96px;
    overflow:auto;background:var(--bg);border-radius:0;transform:translateX(100%);visibility:hidden;transition:transform .2s,visibility .2s}
  .catx .cfil.open{transform:none;visibility:visible}
  .cfil-head{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:center;min-height:60px;
    margin:0 calc(-1 * var(--gut));padding:0 var(--gut);background:var(--bg);border-bottom:1px solid var(--line);font-size:19px}
  .catx .cfil .creset{align-self:center}
  .cfil-x{width:44px;height:44px;border:0;background:none;font-size:30px;line-height:1;color:var(--ink);cursor:pointer}
  .cfil-foot{position:fixed;left:0;right:0;bottom:0;display:block;padding:12px var(--gut);background:var(--bg);border-top:1px solid var(--line)}
  .cfil-foot .btn{width:100%;min-height:52px}
  .cfil-open{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--ink);
    border-radius:var(--r);background:var(--bg);font:inherit;font-weight:600;color:var(--ink);cursor:pointer}
  .cfil-n{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--ink);
    color:var(--surface);font-size:13px}
  .cfil-n[hidden]{display:none}
  .catx .cgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ccount{flex:1 0 100%;order:-1}
  .csort{margin-left:auto}
  body.cfil-on{overflow:hidden}}
/* планшет без колонки фильтров: три карточки в ряд — по две выходили огромными, на экран помещалось два товара */
@media(min-width:700px) and (max-width:860px){.catx .cgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* телефон: 14 px — «общестроительный» целиком помещается в карточку на 375–390 px. Уже — перенос по словарю с дефисом;
   overflow-wrap:anywhere резал слова в любом месте («общестроительн / ый», владелец 02.11.2026) */
@media(max-width:560px){.catx .cgrid{gap:10px}.cgrid .pc{--pad:12px}.catx .pc .n{font-size:14px;letter-spacing:-.01em;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}.catx .pc .p{font-size:18px}
  .catx .pc .mt{font-size:14px}.csort span{display:none}.csearch{margin-bottom:24px}
  .csort{flex:1 1 0;min-width:0;justify-content:flex-end}.csort select{min-width:0;max-width:100%}  /* на 320 px сортировка в одной строке с «Фильтрами» */
  /* элемент сетки не уже своего самого длинного слова — без min-width:0 слово вылезало за край карточки */
  .cgrid .pc > *,.cgrid .pc .body > *{min-width:0}.catx .pc .p{white-space:nowrap}
  .ctrust{gap:2px 16px;font-size:14px;margin-bottom:18px}
  .cown{flex-direction:column;align-items:stretch;padding:20px}.cown .ctile-cta{align-self:stretch;justify-content:center}}
@media(max-width:359px){.catx .pc .p{font-size:16px}}  /* «от 195 000 ₽» в одну строку на 320 px */
/* «Запросить» в строке таблицы модификаций и в её карточке на телефоне (21.10.2026): заполняет поле
   «Желаемое оборудование» в форме этой же страницы — товар, тип техники и модель строки */
.mod-ask{min-height:36px;padding:4px 12px;border:1px solid var(--ink);border-radius:var(--r);background:var(--bg);
  font:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;white-space:nowrap}
.mod-ask:hover{background:var(--ink);color:var(--surface)}
td.ask-td{width:1%;text-align:right;padding-top:6px;padding-bottom:6px}  /* текст кнопки — на одной линии с цифрами строки */
.mod-card .mod-ask{width:100%;min-height:44px;margin-top:12px;font-size:15px}
.f input.asked{outline:2px solid var(--accent);outline-offset:1px;transition:outline-color 1.5s}
.card main section:has(.form-contacts){scroll-margin-top:calc(var(--hh,64px) + 16px)}  /* раздел заявки доезжает под шапку, а не за неё */
/* поиск в шапке — настоящее поле: Enter открывает каталог с результатами */
form.q input{flex:1;min-width:0;height:100%;padding:0;border:0;background:none;font:inherit;color:var(--ink);outline:0}
form.q input::placeholder{color:var(--muted)}
form.q:focus-within{border-color:var(--ink);outline:2px solid var(--ink);outline-offset:1px}
/* ── текстовая страница (этап 9б, 22.10.2026): образец для «Производство», «О компании», «Дилерам», «Закупщикам» и др. ──
   шапка с цифрами · шаги с фото · медиа + текст · галерея с подписями · тёмная полоса с призывом */
.tpg > section{padding:56px 0;border-top:1px solid var(--line)}
.tpg > .request-form-section,.tpg > .request-form-section + section{border-top:0}
.tpg.request-page .tp-head{padding-bottom:16px}
.tpg.request-page > section{padding-block:32px}
/* три способа связи — одной ширины (по самой длинной подписи): «Email» был заметно у́же соседей (владелец 02.11.2026) */
.request-page .ccta{display:inline-grid;grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:560px){.request-page .ccta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .request-page .ccta .btn{min-width:0;padding-inline:4px;font-size:14px;text-align:center}}
.tpg > section.closing{padding:56px 0 72px}
.tpg h2{margin:0 0 24px}
.tp-head{padding:4px 0 44px}
.tp-head h1{margin:4px 0 14px}
.tp-head .lead{max-width:40em;margin:0 0 28px;font-size:19px;line-height:1.55;color:var(--ink-2)}
.tp-facts{display:flex;flex-wrap:wrap;gap:16px 48px;margin:0;padding:22px 0 0;border-top:1px solid var(--line);list-style:none}
.tp-facts li{display:flex;flex-direction:column;gap:2px;font-size:15px;color:var(--ink-2)}
.tp-facts b{font-size:28px;font-weight:800;letter-spacing:-.02em;line-height:1.1;color:var(--accent)}
.tp-sub{margin:-12px 0 24px;color:var(--ink-2)}
/* шапка с фото справа: страница о производстве начинается с цеха, а не с голого текста */
/* фото ровно в высоту текста (как блок производства на главной): верх фото — на уровне заголовка, низ — на уровне цифр;
   по центру края колонок расходились «ступеньками» (владелец 22.10.2026) */
.tp-head-pic{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:32px 56px;align-items:stretch}
.tp-head-pic h1{margin-top:-6px}
.tp-head-fig{position:relative;min-height:320px}
.tp-fig.tp-head-fig img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}  /* сильнее общего .tp-fig img (4:3) ниже в CSS */
.tp-head-pic .lead{margin-bottom:20px}
.tp-head-pic .cta{margin:0 0 24px}
.tp-head-pic .tp-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 32px}  /* 2 × 2, а не «3 + 1» */
/* выгоды покупателя: три пункта в ряд, как пункты блока производства на главной */
.gains{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
/* строки карточек общие (subgrid): если заголовок одной карточки переносится, тексты всех трёх всё равно начинаются на одной линии */
.gains li{display:grid;grid-row:span 2;grid-template-rows:subgrid;align-content:start;gap:8px;padding:24px;background:var(--surface);
  border-radius:var(--r);color:var(--ink-2);line-height:1.55}
.gains b{position:relative;padding-left:20px;font-size:19px;font-weight:800;line-height:1.25;color:var(--ink)}
.gains b::before{content:"";position:absolute;left:0;top:.6em;width:10px;height:2px;background:var(--accent)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 20px;margin:0;padding:0;list-style:none;counter-reset:st}
/* шаги в ряду делят общие строки (фото · заголовок · текст): заголовок в одну или две строки не сдвигает текст */
.steps li{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:6px;align-content:start;counter-increment:st}
.steps img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;margin:0 0 10px;border-radius:var(--r);background:#1b1a18}
.steps b{font-size:18px;font-weight:800;line-height:1.25}
.steps b::before{content:counter(st,decimal-leading-zero);margin-right:8px;color:var(--accent)}
.steps span{color:var(--ink-2);line-height:1.5}
.tp-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:32px 64px;align-items:center}
.tp-split.tp-rev{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.tp-txt p{margin:0 0 20px;max-width:34em;color:var(--ink-2);line-height:1.6}
.tp-links{display:flex;flex-wrap:wrap;gap:4px 32px}
/* блок КБ: чёрная панель ровно в высоту текста, рендер вписан целиком (его фон того же чёрного — границ не видно);
   по центру край текста и картинки расходились, подпись висела отдельно (владелец 22.10.2026) */
.tp-split.tp-kb{align-items:stretch}
.tp-kb h2{margin-top:-6px}
.tp-kb .prod-list{margin-bottom:20px}
.tp-fig.tp-kb-fig{position:relative;min-height:300px;border-radius:var(--r);background:rgb(9,11,6);overflow:hidden}
.tp-fig.tp-kb-fig img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:contain;background:none}
.tp-fig{margin:0}
.tp-fig img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);background:#0b0c0a}
.tp-fig figcaption,.pgal figcaption{margin-top:10px;font-size:15px;color:var(--ink-2)}
/* вертикальный ролик: узкая колонка, превью во весь блок, загрузка по нажатию */
.vidv{justify-self:center;width:100%;max-width:290px}
/* вертикальный ролик — узкой колонкой у левого края, текст сразу рядом (без пустого поля вокруг видео) */
.tp-split.tp-vid{grid-template-columns:290px minmax(0,1fr);gap:32px 64px;align-items:start}  /* уже — меньше пустоты под текстом */.tp-vid .vidv{justify-self:start}
/* media-video нужен проигрывателю этапа 5; рамка его карточки здесь лишняя. */
.tpg > section.tp-vid{padding-block:24px;border-inline:0;border-bottom:0;border-radius:0;overflow:visible}
/* видео втрое выше текста: текст по верху (по центру висел в пустоте), под ним — что в ролике, с переходом к моменту */
.vchap{display:grid;gap:4px;margin:0 0 24px;padding:0;list-style:none;border-top:1px solid var(--line)}
.vchap li{border-bottom:1px solid var(--line)}
.vchap button{display:flex;align-items:baseline;gap:16px;width:100%;min-height:52px;padding:12px 4px;border:0;background:none;
  font:inherit;font-size:16px;text-align:left;color:var(--ink);cursor:pointer}
.vchap button:hover{background:var(--surface)}
.vchap time{flex:none;min-width:40px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}  /* мелкий текст — не оранжевым (контраст) */
.vidv .vid-play{border:0;background:#1b1a18;aspect-ratio:9/16}  /* общий стиль задаёт 848:464 (ролик снегомёта) */
.vidv .vid-play img{height:100%}
.vidv .vid-btn{top:auto;bottom:22px;transform:translateX(-50%);white-space:nowrap}  /* под изделием, а не поверх */
.vidv video{display:block;width:100%;aspect-ratio:9/16;border-radius:var(--r);background:#000}
.pgal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 16px}
.pgal figure{margin:0}
.pgal img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);background:#1b1a18}
@media(max-width:860px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}.gains{grid-template-columns:minmax(0,1fr)}}  /* на планшете 1024 — ещё по 4 и по 3 в ряд */
@media(max-width:860px){.tp-split,.tp-split.tp-rev,.tp-split.tp-vid,.tp-head-pic{grid-template-columns:minmax(0,1fr)}
  .tp-head-fig{min-height:0}.tp-fig.tp-head-fig img{position:static;height:auto;aspect-ratio:4/3}
  .tp-fig.tp-kb-fig{min-height:0}.tp-fig.tp-kb-fig img{position:static;height:auto;aspect-ratio:4/3}.tp-kb h2{margin-top:0}.tp-head-pic h1{margin-top:4px}.tp-vid .vidv{justify-self:center}.tp-rev .tp-fig{order:-1}
  .tpg > section{padding:44px 0}}  /* галерея из трёх фото остаётся в три колонки — без «2 + 1» */
@media(max-width:560px){.tp-head .lead{font-size:17px}.tp-facts,.tp-head-pic .tp-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}.tp-facts b{font-size:21px}
  .tp-head-txt .cta .btn{flex:1 1 100%}
  .vidv{max-width:270px}
  /* галерея на телефоне: первое фото во всю ширину, два под ним в ряд — без длинного столбика */
  .pgal{grid-template-columns:repeat(2,minmax(0,1fr))}.pgal figure:first-child{grid-column:1 / -1}.steps{gap:20px 12px}.steps b{font-size:16px}.steps span{font-size:15px}.pgal{gap:16px 10px}.pgal figcaption{font-size:14px}}
/* ── «Контакты» и «Доставка и оплата» (этап 10б): карточки контактов и доставки, как «Доставка» на главной ── */
.tp-cont .dlv-grid{margin:0 0 16px}
a.dlv{color:var(--ink);text-decoration:none;transition:border-color .15s}
a.dlv:hover{border-color:var(--ink)}
/* «Контакты» (вариант 2, выбор владельца 22.10.2026): все плитки светлые; номер телефона — оранжевым (крупный жирный, 3:1),
   «Оставить заявку» — с оранжевой рамкой, как вторая кнопка */
.dlv-cont .dlv:first-child b{color:var(--accent)}
.dlv-cont .dlv:first-child:hover{border-color:var(--ink)}
.dlv-cta{background:var(--bg);border:2px solid var(--accent)}
.dlv-cta b span{color:var(--accent)}
a.dlv-cta:hover{background:var(--surface);border-color:var(--accent)}
.tp-note{margin:0 0 16px;max-width:42em;color:var(--ink-2);line-height:1.55}
.tp-lead2{margin:0 0 12px;max-width:42em;font-size:18px;line-height:1.55;color:var(--ink-2)}
.tpg .dlv-grid .dlv b{overflow-wrap:anywhere}
/* меню «Каталог»: два столбца прямых ссылок на фильтры (этап 10) */
.dd-mega{min-width:560px;padding:6px 0 10px}
.dd-all{font-weight:600;border-bottom:1px solid var(--line);margin-bottom:4px}
.dd-cols{display:grid;grid-template-columns:1fr 1fr}
.dd-h{margin:10px 18px 4px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.acc-b .dd-h{margin:0;padding:14px 16px 6px;background:var(--surface)}
.acc-b .dd-all{border-bottom:0}
/* главная: завершающий блок перед подвалом */
.home main > section.closing{padding:56px 0 72px}
/* тёмная полоса (выбор владельца 20.10.2026): сетка 2 × 2 — заголовок строго напротив кнопки, текст строго напротив
   телефона и Telegram; каждая строка выравнивается по своему центру, поэтому разная высота колонок не сбивает линии */
.closing-in{display:grid;grid-template-columns:minmax(0,1fr) 300px;align-items:center;gap:10px 64px;padding:40px 48px;
  background:var(--ink);color:var(--surface);border-radius:var(--r);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.closing-in h2{margin:0;color:var(--surface);line-height:1.1}
.closing-in .btn{min-height:54px;font-size:17px;padding:14px 28px}
.closing-in > p{margin:0;font-size:18px;line-height:1.5;color:#d9d5cd}
.closing-c{display:flex;justify-content:space-between;align-items:center;gap:16px}
.closing-c a{display:inline-flex;align-items:center;min-height:28px;color:var(--surface);font-weight:600;
  text-decoration:underline;text-decoration-color:rgba(245,243,239,.4);text-underline-offset:4px}
.closing-c a:hover{text-decoration-color:var(--surface)}
.closing-c .closing-tel{font-size:18px;font-weight:800;letter-spacing:-.01em}
@media(pointer:coarse){.closing-c a{min-height:44px}}  /* под палец — только на сенсорных экранах */
/* узкий экран: столбиком — заголовок, текст, кнопка, контакты */
@media(max-width:760px){.closing-in{grid-template-columns:minmax(0,1fr);gap:12px;padding:32px 24px}
  .closing-in h2{order:1}.closing-in > p{order:2;margin-bottom:12px}.closing-in .btn{order:3}.closing-c{order:4}}
/* главная: в вайрфрейме на телефоне вместо формы была кнопка-ссылка — в дизайне форма на всех экранах, кнопка не нужна */
.home .mob-link{display:none}
.home .desk-form{display:block}
/* главная: плитки категорий (этап 8). Компьютер — 4 × 2, восьмая плитка «Весь каталог»;
   телефон — список: фото слева, название справа (длинные названия не ломаются в узкой колонке) */
.ctile-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;gap:16px}  /* все ряды одной высоты */
.ctile{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  color:var(--ink);text-decoration:none;background:var(--bg);transition:border-color .15s}
.ctile:hover{border-color:var(--ink)}
.ctile-img{display:block;aspect-ratio:4/3;background:var(--surface);overflow:hidden;border-bottom:1px solid var(--line)}
.ctile-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s}
.ctile:hover .ctile-img img{transform:scale(1.03)}
.ctile-txt{display:flex;flex-direction:column;gap:4px;padding:14px 16px 16px}
.ctile-t{font-size:18px;font-weight:800;line-height:1.2;letter-spacing:-.01em}
.ctile-n{font-size:16px;color:var(--ink)}
.ctile-all{justify-content:space-between;background:var(--surface);border-color:var(--surface)}
.ctile-all:hover{border-color:var(--ink)}
.ctile-all .ctile-txt{padding:20px 16px 0}
.ctile-all .ctile-n{margin-top:6px;line-height:1.45}
.ctile-cta{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin:0 16px 16px;min-height:44px;padding:0 16px;
  background:var(--accent);border-radius:var(--r);color:var(--ink);font-weight:600;font-size:15px}
.ctile-all:hover .ctile-cta{background:var(--accent-2)}
@media(max-width:860px){.ctile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.ctile-grid{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;gap:10px}
  .ctile{flex-direction:row;align-items:center;min-height:84px}
  .ctile-img{flex:0 0 112px;aspect-ratio:4/3;border-bottom:0;border-right:1px solid var(--line)}
  .ctile-txt{padding:10px 14px}.ctile-t{font-size:17px}
  .ctile-all{flex-direction:column;align-items:stretch}.ctile-all .ctile-txt{padding:14px 16px 4px}.ctile-cta{margin:8px 16px 16px}}
.pc-img{aspect-ratio:4/3;background:#fff;border-bottom:1px solid var(--line);overflow:hidden}
.pc-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.pc:hover .pc-img img{transform:scale(1.03)}
/* полоса фактов */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:8px 0 20px;padding:0;list-style:none;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts li{display:flex;flex-direction:column;gap:6px;padding:24px 20px 24px 0}
.facts li + li{padding-left:20px;border-left:1px solid var(--line)}
.facts b{font-size:clamp(28px,3vw,40px);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--accent)}
.facts span{font-size:15px;color:var(--ink-2)}
@media(max-width:860px){.facts{grid-template-columns:1fr 1fr}.facts li:nth-child(3){padding-left:0;border-left:0}
  .facts li:nth-child(n+3){border-top:1px solid var(--line)}}
/* форма + контакты */
.form-contacts{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;align-items:start}
.form-contacts form{max-width:none}
.contacts-card{background:var(--surface);border-radius:var(--r);padding:24px}
.contacts-card h3{margin:0 0 12px}
.cc-row{display:flex;flex-direction:column;gap:2px;min-height:56px;justify-content:center;padding:8px 0;
  border-top:1px solid var(--line);color:var(--ink);text-decoration:none}
.cc-row span{font-size:13px;color:var(--muted)}
.cc-row b{font-size:17px}
.cc-row:hover b{text-decoration:underline}
.contacts-card .muted{margin:12px 0 0}
@media(max-width:860px){.form-contacts{grid-template-columns:minmax(0,1fr)}}

/* подписи из данных старого сайта — со строчной («ширина», «объем»): в дизайне с заглавной (владелец 13.10) */
.mod-title::first-letter,.mod-label::first-letter{text-transform:uppercase}
.mod-label{display:inline-block}
/* вкладки таблиц прилипают под шапкой, пока листается таблица (владелец 13.10), и отпускаются после неё */
.ttabs{position:sticky;top:var(--hh,64px);z-index:30;background:var(--bg)}

/* ── боевой сайт (site/), дополнения к дизайн-системе прототипа ── */
/* страница 404: поле поиска в стиле поиска шапки */
.nf-q{margin:24px 0}
/* главная до этапа 6: у неё нет крошек, отступ сверху как у текстовой страницы */
.home-stub{padding-top:32px}
/* Fixed pages: preserve readable content when an optional photo is removed. */
.hero-no-photo .hero-over{position:static;padding:40px 0;background:var(--ink)}
.season-no-photo{grid-template-columns:minmax(0,1fr)}
.season .cta:empty{display:none}
.tp-vid .vidv video{display:block;width:100%;height:auto;max-height:620px;object-fit:contain;background:var(--ink)}
.vchap button{min-height:44px}
/* Stage 7: native keyboard-accessible disclosure, same typography as production. */
.info-section > p,.faq-answer{max-width:48em}
.info-section .more{display:inline-block;margin-top:12px}
/* короткие разделы — карточками, как «Что это даёт вам» на «Производстве»: полоса на одну строку текста
   выглядела пустой (владелец 02.11.2026). Сетка из 6 долей: 3 в ряд, 2 и 4 — по 2, 5 — «2 + 3», без «3 + 1» */
.info-page .tp-head .cta{margin:0 0 28px}
.info-page .tp-head .cta:last-child{margin-bottom:0}  /* без цифр под кнопкой не остаётся пустого поля */
.info-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.info-grid > .info-section{grid-column:span 2;display:flex;flex-direction:column;align-items:flex-start;padding:28px;
  background:var(--surface);border-radius:var(--r);color:var(--ink-2);line-height:1.55}
.info-grid.n1 > .info-section{grid-column:1 / -1}
.info-grid.n2 > .info-section,.info-grid.n4 > .info-section,.info-grid.n5 > .info-section:nth-child(-n+2){grid-column:span 3}
.info-grid h2{position:relative;margin:0 0 12px;padding-left:20px;font-size:20px;line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
.info-grid h2::before{content:"";position:absolute;left:0;top:.6em;width:10px;height:2px;background:var(--accent)}
.info-grid p{margin:0 0 12px}
.info-grid .info-section > :last-child{margin-bottom:0}
.info-grid .more{display:inline-flex;margin-top:auto;padding-top:8px}
.info-grid .tp-note{margin:0 0 12px}
.info-grid .tp-note p{margin:0 0 8px}
.info-grid .cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:auto;padding-top:8px}
/* срок гарантии крупно — уже в цифрах шапки; в карточке обычной жирной строкой, без второй большой «12» */
.info-num{color:var(--ink);font-weight:700}
.info-num b{margin-right:.3em}
.info-city{color:var(--ink);font-weight:700}
/* раздел из одной ссылки («Посмотреть подробнее» в вопросах) — строкой, а не пустой серой плашкой */
.info-grid > .info-section.info-links{padding:0;background:none}
.info-links h2{margin-bottom:4px}
@media(max-width:860px){.info-grid > .info-section,.info-grid.n2 > .info-section,.info-grid.n4 > .info-section,
  .info-grid.n5 > .info-section:nth-child(-n+2){grid-column:1 / -1}}
@media(max-width:560px){.info-grid > .info-section{padding:22px 20px}.info-grid h2{font-size:18px}.info-page .tp-head .cta .btn{flex:1 1 100%}}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{padding:22px 0;min-height:44px;font-size:20px;font-weight:600;cursor:pointer}
.faq-list summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.faq-answer{padding:0 0 20px 24px;color:var(--ink-2);line-height:1.65}
.faq-answer p{margin:0}
@media(max-width:560px){.faq-list summary{font-size:18px}.faq-answer{padding-left:0}}