/* TYUMEN BATTERY — дизайн-система сайта (TR-45).
   Токены и блоки перенесены из макетов «Дизайн tyumenbattery.ru».
   Свод правил лежит рядом: DESIGN-SYSTEM.md в корне проекта (TR-201 — ссылка
   на него стояла здесь и раньше, но самого файла не было ни в дереве, ни в
   истории). Меняешь палитру, ступени заголовков, виды кнопок, минимальные
   размеры нажимаемых мест или правило про телефонные ссылки — правь и его, в
   том же коммите.
   Самое короткое, что должно быть перед глазами всегда:
   1) ряды разнородных блоков — только flex-wrap с flex:X 1 БАЗИС и min-width:0;
   2) transition только по конкретным свойствам, у элементов выбора — вообще нет;
   3) минимальный серый для текста — #5F6B7D, светлее не проходит AA. */

@font-face{font-family:'Manrope';src:url('/assets/fonts/manrope-cyrillic.woff2') format('woff2');font-weight:400 800;font-style:normal;font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';src:url('/assets/fonts/manrope-latin.woff2') format('woff2');font-weight:400 800;font-style:normal;font-display:swap;
  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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ── плавный переход между страницами (TR-126) ──
   Сайт из обычных страниц, поэтому каждый переход раньше выглядел как рывок:
   старая страница исчезала, экран белел, появлялась новая. Браузер умеет
   заменять этот рывок короткой перекрёстной сменой кадра сам — надо только
   разрешить. Кто не умеет, правило просто не заметит.

   Тем, кто в системе попросил меньше движения, ничего не показываем: смена
   кадра — это анимация, и просьба относится к ней тоже. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.16s}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
}

:root{
  --ac:#0052DE; --ac-h:#0041B0; --ac-s:#EDF3FF; --ac-c:#F5F8FF; --ac-b:#C9D9FA; --ac-b2:#DCE6FA; --ac-d:#9DBBFF;
  --ink:#10151F; --ink2:#3D4757; --ink3:#5F6B7D; --ink4:#6B7688;
  --ln:#E6EAF0; --ln2:#F0F3F8; --ln3:#EDF0F5; --ln4:#D7DCE5;
  --bg2:#F7F9FC; --bg3:#F4F6FA; --dark:#0E1626;
  --ok:#0B7A43; --ok-bg:#E9F7F0; --red:#D92D20; --red-t:#B42318; --red-bg:#FDECEA;
  /* Янтарный — «ещё не случилось», а не «сломалось». Им подписана неподтверждённая
     оплата на «Заказ принят»: красный читался бы как отказ, зелёный — лгал бы.
     Тем же цветом (прозрачностью) залита плашка `.done-pay.is-wait`. */
  --amber:#EAB308;
  --sh1:0 4px 20px rgba(16,21,31,.05); --sh2:0 8px 26px rgba(16,21,31,.07);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--ink);background:#fff;
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit;text-align:left}
input,select,textarea{font:inherit}
a{color:var(--ac);text-decoration:none}
a:hover{color:var(--ac-h)}
svg{flex-shrink:0}
s{color:var(--ink4)}
/* [hidden] по умолчанию перебивается любым display:flex/grid из класса — закрываем раз и навсегда */
[hidden]{display:none!important}
@keyframes tin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ── сетка страницы ── */
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.sec{max-width:1240px;margin:0 auto;padding:60px 24px 0}
.sec-s{max-width:1240px;margin:0 auto;padding:52px 24px 0}
.sec-hero{padding-top:44px}
.sec-facts{padding-top:40px}
.sec-cat{padding-top:36px}
.sec-warn{max-width:1240px;margin:0 auto;padding:20px 24px 0}
.page-top{max-width:1240px;margin:0 auto;padding:26px 24px 0}
.cols{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
.cols>.half{flex:1 1 320px;min-width:0}
.mt10{margin-top:10px}.mt12{margin-top:12px}.mt14{margin-top:14px}.mt22{margin-top:22px}
.mb8{margin-bottom:8px}.mb18{margin-bottom:18px}.mb22{margin-bottom:22px}
.num{font-variant-numeric:tabular-nums}
.ac{color:var(--ac)}.ac-d{color:var(--ac-d)}.green{color:var(--ok)}.muted{color:var(--ink3)}
.ac-bg{background:var(--ac)!important}

/* ── типографика ── */
.h1{font-size:clamp(30px,4vw,44px);font-weight:800;line-height:1.12;letter-spacing:-1.4px;text-wrap:pretty}
.h1-hero{font-size:clamp(32px,4.4vw,50px);letter-spacing:-1.6px;line-height:1.1}
.h1-cat{font-size:clamp(28px,3.6vw,40px);letter-spacing:-1.2px;line-height:1.15}
.h1-prod{font-size:clamp(26px,3.2vw,34px);letter-spacing:-.7px;line-height:1.18;margin-bottom:10px}
/* TR-196: заголовки разделов набирались шестью размерами — 18, 22, 23, 24, 25
   и 26 точек. Ступеней осталось три:
     26 — заголовок раздела страницы: .sec-t, .dark h2 / .h2-dark, .ch-h2s,
          заголовок синего блока;
     22 — подзаголовок внутри текста (.prose h2);
     20 — заголовок карточки (.h3).
   Намеренные исключения: .sec-t2 (28/23 точки) — размер макета внутренних
   страниц, его специально не двигали (см. ниже), и страница политики (TR-200).
   Межстрочное у всех ступеней одно, 1.55: в синем блоке оно было 1.2, и два
   соседних блока читались набранными по-разному. */
.sec-t{font-size:26px;font-weight:800;letter-spacing:-.7px;line-height:1.55;text-wrap:pretty}
.sec-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:18px}
/* TR-195: раскладка «по краям» держит ссылку справа, только пока она стоит в
   одной строке с заголовком. Когда строка переносится, ссылка остаётся в своей
   строке одна и уезжает к ЛЕВОМУ краю — три одинаковые по смыслу шапки главной
   читались как три разных элемента. Отступ auto держит её справа в обоих случаях. */
.sec-h .more{font-size:14.5px;font-weight:600;color:var(--ac);white-space:nowrap;margin-left:auto}
.over{font-size:12.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:var(--ac);margin-bottom:7px}
/* TR-154: рубрике на тёмном блоке ставят осветляющий класс .ac-d, но правило
   выше по файлу его перебивало (обе специфичности 0,1,0, побеждает последнее) —
   «ОРИГИНАЛ ИЛИ ПОДДЕЛКА» выходила тёмно-синей по тёмному, контраст 2,81. */
.over.ac-d{color:var(--ac-d)}
.lead{font-size:16px;color:var(--ink3);line-height:1.6;max-width:660px;text-wrap:pretty}
.lead-ink{font-size:17px;color:var(--ink2);margin-top:12px;max-width:720px}
.h3{font-size:20px;font-weight:800;letter-spacing:-.4px;margin-bottom:7px}
.h4{font-size:16px;font-weight:800;margin-bottom:12px}
.h5{font-size:15.5px;font-weight:700;margin-bottom:5px}
.p15{font-size:15px;color:var(--ink3);line-height:1.6;text-wrap:pretty}
.p14{font-size:14px;color:var(--ink3);line-height:1.55;text-wrap:pretty}
.p13{font-size:13.5px;color:var(--ink3);line-height:1.65;text-wrap:pretty}
.lbl{font-size:14px;font-weight:700;color:var(--ink3);margin-bottom:8px}
/* Пунктирное подчёркивание держится за ТЕКСТ ссылки, а не за ширину колонки.
   `.lnk` — это <a> или <button>, они и так шириной по содержимому; но стоит
   такой ссылке оказаться прямым потомком колоночного флекса (`.rev-list`), как
   её растягивает на всю колонку — вместе с подчёркиванием, и получается полоса
   через весь блок. `width:fit-content` отменяет растяжение и при этом ничего не
   меняет там, где ссылка и так по содержимому. */
.lnk{font-size:14.5px;font-weight:600;color:var(--ac);border-bottom:1px dashed currentColor;background:none;padding:0;width:fit-content}
.foot{margin-top:14px;padding-top:14px;border-top:1px solid var(--ln2);font-size:13.5px;color:var(--ink3);line-height:1.6}

/* ── липкая полоса на телефоне (TR-159) ──
   Появляется при движении вверх, прячется при движении вниз. На компьютере её
   нет вовсе: там шапка и так рядом, а страница листается колесом. Значения
   `aria-hidden` и `tabindex=-1` снимает скрипт ровно тогда, когда полоса
   видна: спрятанная за краем экрана, она не должна попадаться ни диктору, ни
   табу — иначе фокус уезжает в невидимое. */
.hdr-mini{display:none}
@media (max-width:760px){
  .hdr-mini{position:fixed;top:0;left:0;right:0;z-index:140;display:flex;align-items:center;gap:10px;
    background:#fff;border-bottom:1px solid var(--ln);padding:7px 14px;
    box-shadow:0 4px 18px rgba(16,21,31,.07);
    transform:translateY(-101%);transition:transform .2s ease}
  .hdr-mini.is-on{transform:none}
  /* TR-367: вместо значка-логотипа — три полоски, как в шапке. */
  .hm-burger{display:flex;align-items:center;justify-content:center;width:40px;height:40px;
    border:1.5px solid var(--ln);border-radius:11px;background:#fff;color:var(--ink);cursor:pointer}
  .hm-burger svg{width:20px;height:20px}
  .hm-search{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin-left:auto;
    border:1.5px solid var(--ln);border-radius:11px;background:#fff;color:var(--ink2);cursor:pointer}
  .hm-tel{display:flex;align-items:center;gap:7px;height:40px;padding:0 15px;border-radius:11px;
    background:var(--ac);color:#fff;font-size:14.5px;font-weight:700}
  .hm-tel:hover{color:#fff}
}
@media (prefers-reduced-motion:reduce){.hdr-mini{transition:none}}

/* TR-374: двойное касание не увеличивает страницу (жест щипка гасит tb-site.js). */
html{touch-action:manipulation}

/* ── шапка ── */
.hdr{background:#fff;border-bottom:1px solid var(--ln);position:relative;z-index:120}
.hdr-in{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;padding:16px 0}
.logo{display:flex;align-items:center;gap:11px;flex-shrink:0;color:var(--ink)}
.logo:hover{color:var(--ink)}
.logo-i{width:38px;height:38px;border-radius:9px;background:var(--ac);color:#fff;display:flex;align-items:center;
  justify-content:center;font-weight:800;font-size:15px;letter-spacing:-.4px}
.logo-t{display:flex;flex-direction:column;line-height:1.1}
.logo-t b{font-weight:800;font-size:16px;letter-spacing:-.2px}
.logo-t span{font-size:11px;font-weight:600;color:var(--ink3);letter-spacing:.4px}
.search{flex:1 1 240px;position:relative;min-width:0}
.search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--ink4);pointer-events:none}
.search input{width:100%;padding:11px 16px 11px 43px;border:1.5px solid var(--ln);border-radius:11px;font-size:15px;
  outline:none;background:#F6F8FB;color:var(--ink);transition:border-color .16s,background-color .16s}
.search input:focus{border-color:var(--ac);background:#fff}
.hdr-ph{display:flex;flex-direction:column;align-items:flex-end;flex:0 0 auto;margin-left:auto;line-height:1.25}
.hdr-ph a{font-weight:800;font-size:18px;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.hdr-ph span{font-size:12px;color:var(--ink3)}
/* Три полоски в шапке и поиск внутри меню — только на телефоне (TR-366, TR-367),
   см. блок «Телефон: шапка» ниже. */
.hdr-burger,.nav-search{display:none}
.nav{background:var(--ac);position:relative}
/* TR-148: полоса разделов шире экрана телефона (948 точек против 390), и о том,
   что её можно двигать пальцем, не сообщало ничто — ни полоска прокрутки (её
   прячет система), ни край. Ставим у правого края мягкое затемнение цветом
   самой полосы: видно, что дальше что-то есть. Гаснет, когда полоса домотана
   до конца, — класс снимает tb-site.js. Затемнение не ловит нажатия, иначе
   съедало бы крайний пункт. */
.nav-in{max-width:1240px;margin:0 auto;padding:0 24px;display:flex;gap:2px;overflow-x:auto;
  scrollbar-width:none;scroll-behavior:smooth}
.nav-in::-webkit-scrollbar{display:none}
.nav::after{content:'';position:absolute;right:0;top:0;bottom:0;width:56px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,rgba(0,58,158,0),rgba(0,58,158,.96));transition:opacity .18s}
.nav.has-more::after{opacity:1}
.nav-in a{padding:12px 16px;color:rgba(255,255,255,.88);font-size:14.5px;font-weight:600;white-space:nowrap;
  border-bottom:3px solid transparent;transition:background-color .15s,color .15s}
.nav-in a:hover{color:#fff;background:rgba(255,255,255,.11)}
.nav-in a.on{color:#fff;font-weight:700;border-bottom-color:#fff}
@media (prefers-reduced-motion:reduce){.nav-in{scroll-behavior:auto}}

/* ── меню с разделами (TR-118; TR-211 — на всех страницах) ──
   Прокрутки у полосы здесь нет намеренно: `overflow-x:auto` из обычной .nav-in
   обрезал бы выпадающую панель по нижнему краю синей полосы. Не помещается —
   переносим на вторую строку. Панель открывается наведением и с клавиатуры
   средствами CSS, чтобы меню работало и без скриптов; нажатие пальцем
   переключает класс .is-open из tb-site.js. */
.nav-mega{position:relative;z-index:130}
.nav-mega .nav-in{overflow:visible;flex-wrap:wrap;gap:0}
.nav-mega .nav-items{display:flex;flex-wrap:wrap;min-width:0}
.nav-mega .mega-i{position:relative}
.nav-mega .mega-b,.nav-mega .mega-l{display:flex;align-items:center;gap:6px;padding:12px 16px;
  color:rgba(255,255,255,.88);font-size:14.5px;font-weight:600;white-space:nowrap;
  border-bottom:3px solid transparent;transition:background-color .15s,color .15s;cursor:pointer}
.nav-mega .mega-b:hover,.nav-mega .mega-l:hover,
.nav-mega .mega-i:hover .mega-b,.nav-mega .mega-i.is-open .mega-b{color:#fff;background:rgba(255,255,255,.11)}
/* TR-211: «вы здесь» — тем же приёмом, что у плоской полосы .nav-in a.on:
   белым текстом и белой чертой снизу. Разворачивая меню на весь сайт, пометку
   терять нельзя — она единственное, что полоса говорит до открытия панели. */
.nav-mega .mega-b.is-on,.nav-mega .mega-l.is-on{color:#fff;font-weight:700;border-bottom-color:#fff}
.nav-mega .mega-ch{flex:none;opacity:.75}
.nav-mega .mega-i.is-open .mega-ch{transform:rotate(180deg)}
/* TR-125: панели было тесно — владелец так и сказал, «будто нужно больше
   пространства». Раздвинуто ровно то, что создаёт ощущение плотности: поля
   панели, зазор между колонками и высота строки-ссылки (у неё был нулевой
   просвет, ссылки шли впритык). Ширину подняли следом за полями, иначе
   длинные пункты («Обработка персональных данных») переносились бы на две
   строки. */
.mega-p{display:none;position:absolute;top:100%;left:0;z-index:5;
  background:#fff;border:1px solid var(--ln);border-radius:0 0 18px 18px;border-top:0;
  box-shadow:var(--sh2);padding:24px 28px 26px;min-width:340px;max-width:min(94vw,620px)}
.mega-p.to-right{left:auto;right:0}
/* Без скриптов панель открывают наведение и фокус с клавиатуры. Когда скрипт
   есть (`.nav-mega.js`), фокус из этого правила ВЫХОДИТ: нажатая кнопка
   остаётся в фокусе, и панель, закрытая повторным нажатием, тут же открывалась
   бы обратно — то есть кнопка выглядела бы сломанной. С JS фокус ведёт класс
   .is-open, его же ставит нажатие пальцем. */
.mega-i.is-open>.mega-p{display:block}
.nav-mega:not(.js) .mega-i:focus-within>.mega-p{display:block}
/* Наведение — только там, где мышь есть на самом деле. У пальца `:hover`
   ЗАЛИПАЕТ после касания: панель, закрытая повторным касанием, оставалась
   открытой, и кнопка выглядела сломанной. */
@media (hover:hover){.mega-i:hover>.mega-p{display:block}}
.mega-cols{display:flex;gap:40px}
.mega-col{flex:1 1 auto;min-width:0}
.mega-h{display:flex;align-items:center;gap:7px;
  font-size:11.5px;font-weight:700;color:var(--ink3);letter-spacing:.5px;text-transform:uppercase;
  margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--ln);white-space:nowrap}
/* Значок тем же цветом, что заголовок, и без своей высоты строки: иначе он
   тянет строку вверх и подпись перестаёт стоять на общей линии. */
.mega-h .mega-ic{flex:none;opacity:.85}
.mega-col a{display:block;padding:8px 10px;margin:0 -10px;border-radius:9px;
  font-size:14.5px;font-weight:600;color:var(--ink2);line-height:1.4}
.mega-col a:hover{background:var(--ac-c);color:var(--ac)}
/* На узком экране полоса меню переносится на вторую строку, и панель, привязанная
   к своему пункту, накрывала кнопки нижнего ряда — до «Покупателям» было не
   дотянуться ни мышью, ни пальцем. Поэтому здесь панель отвязана от пункта и
   раскрывается под ВСЕЙ полосой во всю её ширину: ничего не перекрывает, никуда
   не вылезает, и подгонять её положение скриптом больше не нужно. */
/* TR-170. Разделы уходят под кнопку, а раскрытая панель раздела встаёт прямо
   в потоке (position:static) — накрывать ей нечего, и подгонять её положение
   скриптом больше не нужно. Раньше здесь панель растягивалась во всю полосу
   абсолютом: это лечило перекрытие нижнего ряда, но сам ряд оставался.
   TR-367: кнопки «Разделы» на синей полосе больше нет — меню раскрывают три
   полоски в шапке (.hdr-burger) и в липкой полосе (.hm-burger), а закрытая
   синяя полоса на телефоне не занимает места вовсе. TR-366: первой строкой
   раскрытого меню стоит поиск. */
@media (max-width:620px){
  .nav-mega .nav-in{position:relative;flex-direction:column;padding:10px 10px 0}
  .nav-mega .nav-in:not(.is-nav-open){display:none}
  .nav-search{display:block;flex:none;margin:0 0 6px}
  .nav-search input{background:#fff;border-color:#fff}
  .nav-mega .nav-items{display:none;flex-direction:column;padding:0 0 8px}
  .nav-mega .nav-in.is-nav-open .nav-items{display:flex}
  .nav-mega .mega-i{position:static}
  .nav-mega .mega-b,.nav-mega .mega-l{width:100%;justify-content:space-between;
    border-bottom:0;border-radius:10px;padding:11px 12px}
  .nav-mega .mega-i.is-open .mega-b{background:rgba(255,255,255,.13)}
  .mega-p,.mega-p.to-right{position:static;width:auto;min-width:0;max-width:none;
    border:0;border-radius:12px;box-shadow:none;padding:14px 16px 16px;margin:2px 0 6px}
  .mega-cols{flex-direction:column;gap:18px}
}
.crumbs{max-width:1240px;margin:0 auto;padding:16px 24px 0;font-size:13px;color:var(--ink3);
  display:flex;flex-wrap:wrap;align-items:center;gap:7px}
/* TR-332, TR-333: на телефоне крошки — одна строка, которая листается пальцем
   вбок. Переносом они шли «лесенкой»: у ссылок отступ под палец (TR-64), у
   текущей страницы и черт — нет, строка съезжала по высоте, а черта уезжала в
   начало следующей строки. По второй оси не ездит (пункт 6 «Раскладки»). */
@media (max-width:620px){
  .crumbs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding-left:16px;padding-right:16px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .crumbs::-webkit-scrollbar{display:none}
  .crumbs>*{flex:none}
}
/* TR-183: ссылки и название текущей страницы были одного серого цвета, и строка
   читалась как подпись — понять, что по «Каталог» можно вернуться назад, было
   нельзя. Ссылки красим цветом ссылок сайта, текущая страница остаётся серой. */
.crumbs a{color:var(--ac)}
.crumbs a:hover{color:var(--ac-d)}
.crumbs i{color:#C6CEDB;font-style:normal}

/* Подпись под тем, чем человек управляет на самом деле (TR-191). На странице
   зарядки под моделью было написано «Тяните мышью… колесо — приблизить», а у
   пришедшего с телефона нет ни мыши, ни колеса — и приближения в модели тоже
   нет: щипок двумя пальцами она не понимает, приближение сделано только на
   колесо. Поэтому на телефоне мы не переводим фразу на «пальцевый» язык, а
   убираем из неё обещание приближения. */
.only-touch{display:none}
@media (hover:none),(pointer:coarse){
  .only-mouse{display:none}
  .only-touch{display:inline}
}

/* ── кнопки ── */
/* TR-199: две ступени, и только две.
     ГЛАВНАЯ  — 53 точки, кегль 16, скругление 12: .btn, .btn-white
     ВТОРАЯ   — 49 точек, кегль 15, скругление 12: .btn-soft, .btn-line,
                .btn-onDark, .ask
   Было иначе: одна и та же кнопка «Оставить заявку» на тёмном фоне рисовалась
   182×57 со скруглением 12 и 248×49 со скруглением 11, а светло-синие
   разъезжались на 47, 49 и 61 точку со скруглениями 11, 12 и 18.
   Единственное намеренное исключение — кнопка в карточке списка
   (`.pcard .btn-soft`, 44 точки): каталог на телефоне идёт в две колонки, и
   там кнопка уже 139 точек шириной (см. TR-147). */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--ac);color:#fff;
  font-weight:800;font-size:16px;padding:14px 26px;border-radius:12px;transition:filter .15s;text-align:center}
.btn:hover{filter:brightness(1.12);color:#fff}
.btn-soft{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--ac-s);color:var(--ac);
  font-weight:700;font-size:15px;padding:13px 20px;border-radius:12px;transition:background-color .15s,color .15s;text-align:center}
.btn-soft:hover{background:var(--ac);color:#fff}
.btn-line{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#fff;border:1.5px solid var(--ln);
  color:var(--ink2);font-weight:700;font-size:15px;padding:12px 20px;border-radius:12px;transition:border-color .15s,color .15s}
.btn-line:hover{border-color:var(--ac);color:var(--ac)}
.btn-white{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#fff;color:var(--ac);
  font-weight:800;font-size:16px;padding:14px 26px;border-radius:12px;transition:background-color .15s}
.btn-white:hover{background:#EAF0FF;color:var(--ac)}
.dark .btn-white,.cta-band .btn-white{color:var(--dark)}
.btn-onDark{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;background:transparent;
  border:1.5px solid rgba(255,255,255,.28);color:#fff;font-weight:700;font-size:15px;padding:12px 20px;border-radius:12px;
  transition:background-color .15s,border-color .15s}
.btn-onDark:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5);color:#fff}
/* `.auto` меняет только ширину — размер у кнопки на тёмном фоне один. */
.btn-onDark.auto{width:auto}
.btn-wide{width:100%}
/* TR-53: заблокированная кнопка заявки. Не прячем и не осветляем до невидимости —
   человек должен видеть, что она есть, и понимать, что ей чего-то не хватает. */
.btn[disabled],.btn-line[disabled]{background:var(--ln3);color:var(--ink3);border-color:var(--ln);
  cursor:not-allowed;filter:none}
.btn[disabled]:hover,.btn-line[disabled]:hover{background:var(--ln3);color:var(--ink3);border-color:var(--ln);filter:none}

/* ── согласие на обработку персональных данных (TR-53) ── */
/* TR-151: квадратик был 19x19 при принятом в проекте пороге 24, а вся строка —
   41 точка в высоту. Без галочки заказ не отправить, поэтому промахиваться по ней
   нельзя. Квадратик 24, строка не ниже 44, ссылка на политику вынесена под строку
   (см. agreeRow в blocks.js). */
.agree-w{margin-bottom:14px}
.agree{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;
  font-size:13.5px;color:var(--ink3);line-height:1.5}
/* TR-375: ссылка на политику стоит по левому краю ТЕКСТА согласия (24 квадратик
   + 10 зазор), а не под квадратиком — иначе два куска одной строки начинались с
   разных вертикалей, и блок выглядел «не по сетке». */
.agree-doc{display:inline-block;font-size:13px;color:var(--ac);text-decoration:underline;
  text-underline-offset:2px;padding:5px 0;min-height:24px;margin-left:34px}
/* TR-370: галочка с политикой появляется, когда в форме начали что-то вписывать.
   Прячет её tb-site.js (класс .is-off), без скриптов строка видна как раньше.
   Спрятанная не ловит ни Tab, ни нажатия (visibility с задержкой).
   Ребёнок у сетки ОДИН — обёртка .agree-in (agreeRow в blocks.js): `0fr` описывает
   одну строку, и второй ребёнок (ссылка) держал бы 30 точек пустоты (TR-383). */
.agree-w{display:grid;grid-template-rows:1fr;opacity:1;
  transition:grid-template-rows .2s ease,opacity .2s ease,margin .2s ease,visibility 0s}
.agree-w>*{min-height:0;overflow:hidden}
.agree-w.is-off{grid-template-rows:0fr;opacity:0;visibility:hidden;margin-top:0!important;margin-bottom:0!important;
  transition:grid-template-rows .2s ease,opacity .2s ease,margin .2s ease,visibility 0s .2s}
@media (prefers-reduced-motion:reduce){.agree-w,.agree-w.is-off{transition:none}}
/* TR-255: строка про оферту под кнопкой оплаты. Набрана мельче согласия и
   серым: это не действие и не второе согласие, а сноска — ссылка внутри неё
   синяя, чтобы её было видно как ссылку. Высота 24 — минимум для нажатия
   пальцем по тем же правилам, что у .agree-doc. */
.co-offer{display:block;font-size:12.5px;line-height:1.5;color:var(--ink3);
  text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--ln4);
  padding:6px 0;min-height:24px;margin-top:-6px;margin-bottom:12px}
.co-offer:hover{color:var(--ac)}
.agree input{appearance:none;-webkit-appearance:none;flex:none;width:24px;height:24px;
  border:1.5px solid var(--ln4);border-radius:7px;background:#fff;cursor:pointer;position:relative;
  transition:border-color .15s,background-color .15s}
.agree input:hover{border-color:var(--ac)}
.agree input:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.agree input:checked{background:var(--ac);border-color:var(--ac)}
.agree input:checked::after{content:'';position:absolute;left:8px;top:4px;width:6px;height:11px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(43deg)}
.agree a{color:var(--ac);text-decoration:underline;text-underline-offset:2px}
.box .agree-w,.modal-box .agree-w{margin-top:14px}

/* ── свой выпадающий список вместо системного ── */
.dd{position:relative;display:block;min-width:0}
.dd .dd-native{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
.dd select{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
/* TR-383 (приёмка TR-311): у отключённого списка на главной своё правило
   `.hm-sel:disabled{opacity:1}` сильнее строки выше, и системный список «Модель»,
   «Год», «Двигатель» рисовался поверх нашего, пока не выбрана марка. */
.dd select:disabled{opacity:0}
/* Пиксель Метрики для посетителей без скриптов (YM_BODY в blocks.js) — за краем
   экрана. Классом, а не атрибутом style: встроенный стиль запрещает политика сайта. */
.ym-px{position:absolute;left:-9999px}
.dd-btn{display:flex;align-items:center;gap:10px;width:100%;border:1.5px solid var(--ln);border-radius:11px;
  background:#fff;color:var(--ink);font-size:15px;padding:12px 38px 12px 13px;text-align:left;
  transition:border-color .15s;position:relative;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6B7D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:16px}
.dd-btn:hover{border-color:var(--ln4)}
.dd.open .dd-btn{border-color:var(--ac)}
.dd-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-sm .dd-btn{font-size:14.5px;font-weight:600;padding:9px 32px 9px 12px;border-radius:10px;
  background-position:right 11px center;background-size:15px}
.dd-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:200;background:#fff;border:1px solid var(--ln);
  border-radius:14px;box-shadow:0 12px 32px rgba(16,21,31,.14);padding:6px;max-height:280px;overflow-y:auto;
  animation:tin .14s ease;min-width:100%;width:max-content;max-width:min(320px,90vw)}
.dd-list[hidden]{display:none!important}
.dd-opt{display:block;width:100%;padding:10px 12px;border-radius:9px;font-size:15px;color:var(--ink2);white-space:nowrap}
.dd-opt:hover{background:var(--bg2);color:var(--ink)}
.dd-opt.on{background:var(--ac-c);color:var(--ac);font-weight:700}
.finder .grid .dd{width:100%}
.cat-bar .dd{flex-shrink:0}
.finder-dark .dd-btn{background-color:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#fff;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  padding:13px 38px 13px 14px}
.finder-dark .dd.open .dd-btn{border-color:rgba(255,255,255,.5)}
/* TR-311: живой список — поиск у длинного, подписи групп, запертое поле. */
.dd-btn:disabled{background-color:var(--bg2);color:var(--ink4);cursor:default}
.dd-btn:disabled:hover{border-color:var(--ln)}
.dd-q{position:sticky;top:-6px;z-index:1;display:block;width:calc(100% + 12px);margin:-6px -6px 6px;padding:12px 14px;
  border:0;border-bottom:1px solid var(--ln);border-radius:14px 14px 0 0;background:#fff;font-size:16px;color:var(--ink);outline:none}
.dd-q[hidden],.dd-none[hidden]{display:none}
.dd-grp{padding:10px 12px 4px;font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--ink3)}
.dd-none{padding:10px 12px;font-size:14.5px;color:var(--ink3)}
.dd-opt{overflow:hidden;text-overflow:ellipsis;text-align:left}
.dd-opt:focus-visible{outline:none;background:var(--bg2);color:var(--ink)}
.dd-opt:disabled{color:var(--ink4);cursor:default;background:none}

/* ── поля ── */
.fld{border:1.5px solid var(--ln);border-radius:12px;padding:13px 16px;font-size:15.5px;outline:none;background:#fff;
  color:var(--ink);width:100%;transition:border-color .15s}
.fld:focus{border-color:var(--ac)}
.fld-bad{border-color:var(--red)}
/* Кнопка заказа, пока форма не заполнена (TR-83): выглядит неготовой, но
   нажимается — по нажатию подсвечивает недостающие поля. Запертая кнопка на
   нажатие не отвечала ничем, и человек оставался наедине с догадкой. */
.btn.is-wait{background:var(--ln2);color:var(--ink3);box-shadow:none}
.btn.is-wait:hover{background:var(--ln3);color:var(--ink2)}
select.fld,.cat-bar select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6B7D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:16px}
select.fld{border-radius:11px;padding:12px 38px 12px 13px;font-size:15px}
.cat-bar select{padding-right:34px;background-position:right 11px center;background-size:15px}
select.fld::-ms-expand{display:none}
textarea.fld{resize:vertical}
/* TR-150: Safari на айфоне сам увеличивает страницу, когда курсор ставят в поле
   со шрифтом мельче 16 — при вводе она прыгает и уезжает вбок, и так на каждом
   поле. Мельче было у всех полей до единого: 15,5 у города, улицы, квартиры,
   имени, телефона, ИНН, почты и комментария, 15 у списка «Город получения».
   Высоту и отступы не трогаем — поля остаются прежними, 52-54 точки. */
@media (max-width:620px){
  .fld,select.fld,textarea.fld,.dd-btn{font-size:16px}
}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}

/* ── подложки ── */
.pane{background:var(--bg2);border-radius:20px;padding:26px 30px}
.pane.sm{padding:20px 22px}
.box{border:1.5px solid var(--ln);border-radius:20px;padding:24px}
.box-s{background:var(--ac-c);border:1px solid var(--ac-b2);border-radius:18px;padding:22px}
.badge{font-size:11.5px;font-weight:800;padding:4px 10px;border-radius:7px;white-space:nowrap}
.badge-green{background:var(--ok-bg);color:var(--ok)}
.badge-blue{background:var(--ac-s);color:var(--ac)}
.badge-grey{background:var(--ln3);color:var(--ink2)}
.tag{display:inline-block;align-self:flex-start;font-size:11.5px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;
  color:var(--ac);background:var(--ac-s);padding:4px 10px;border-radius:6px;margin-bottom:13px}
.badge-ac{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;
  color:var(--ac);background:var(--ac-s);padding:5px 11px;border-radius:7px;margin-bottom:16px}

/* строки «ключ … значение» */
/* TR-166: длинное значение не влезало в колонку и переносилось, оставаясь
   прижатым вправо, — получалась лесенка с рваным левым краем, а точечная линия
   ужималась в огрызок 14 точек. Теперь значение — блок по своему содержимому,
   прижатый вправо целиком: одна строка выглядит как раньше, а несколько строк
   встают ровным левым краем. Не помещается рядом с названием — уходит на свою
   строку, точечная линия сжимается в ноль и не рисуется вовсе — раньше на её
   месте оставался огрызок в 14 точек. Ряд НЕ переносим: перенесённое значение
   оставило бы на строке названия висящую в пустоте точечную линию. */
/* TR-174/196: строка характеристики переносится, когда подпись и значение не
   помещаются рядом — значение уходит на свою строку целиком. Сжимать их было
   нельзя: подпись «Пусковой ток по европейской мерке (EN)» рвала строку на 320
   точках, а значение «европейский корпус, клеммы европейские» при сжатии
   наезжало поверх подписи. Точечная линия остаётся на первой строке. */
.kv{display:flex;flex-wrap:wrap;align-items:baseline;gap:9px;padding:9px 0;border-bottom:1px solid var(--ln2)}
/* TR-174/196: подпись не сжималась вовсе, и длинная — «Пусковой ток по
   европейской мерке (EN)» — растягивала строку шире экрана: на 320 точках
   страница товара уезжала вбок на 43 точки. Теперь подпись переносится, а
   строка растёт в высоту. */
/* TR-166: подписи оставляем 10 точек — ровно на зазор перед точечной линией.
   Без них длинная подпись занимала строку ровно по краю, линии не хватало места
   даже нулевой ширины, и она переносилась вниз ВМЕСТЕ со значением: значение
   оказывалось прижатым вправо, а у соседних рядов начиналось слева. */
.kv .k{font-size:15px;color:var(--ink3);flex-shrink:0;max-width:calc(100% - 10px)}
/* TR-166: базис линии — 0, а не 18 точек. При базисе 18 длинная подпись
   («Пусковой ток по европейской мерке (EN)») занимала строку целиком, и линия
   переносилась на следующую ВМЕСТЕ со значением: там она растягивалась и
   уводила значение вправо, тогда как у соседних рядов значение начиналось
   слева. С нулевым базисом линия всегда остаётся на строке подписи — как и
   задумано, — а на свою строку уходит одно значение и встаёт слева. */
.kv .dots{flex:1 1 0;border-bottom:1px dotted var(--ln4);min-width:0;transform:translateY(-3px)}
/* TR-166: значение прижимает вправо ТОЧЕЧНАЯ ЛИНИЯ (`.dots` растёт), а не
   `margin-left:auto` у самого значения. Разница видна, когда значение не влезло
   рядом с подписью и ушло на свою строку: с `margin-left:auto` короткое
   значение оставалось прижатым вправо («Ресурс» → «до 1500 циклов
   заряд-разряд»), а длинное вставало слева — в одной табличке получались оба
   выравнивания, и левый край снова выглядел рваным. Без него перенесённое
   значение всегда начинается слева, а на общей строке его по-прежнему уводит
   вправо линия. */
.kv .v{font-size:15px;font-weight:700;text-align:left;font-variant-numeric:tabular-nums;
  flex-shrink:0;width:fit-content;max-width:100%}
.row2{display:flex;justify-content:space-between;gap:12px;font-size:14.5px}
.row2>span:first-child{color:var(--ink3)}
/* TR-198: значение больше не запрещено переносить. «На терминале КИТ в вашем
   городе» не помещалось справа от подписи и падало целиком строкой ниже — ряд
   вырастал с 22 точек до 57, а на 320 туда же ломался соседний ряд. Числа с
   единицей держит неразрывный пробел в самих данных, а не запрет переноса. */
.row2 b{text-align:right;min-width:0}
.row2 b.ok,.row2 b.green{color:var(--ok)}
.ticklist{display:flex;flex-direction:column;gap:10px}
.ticklist>div{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink2);line-height:1.55}
/* Пояснение под пунктом — своей строкой (TR-91). Без этого <b> и <small> склеиваются
   в одну строку без пробела: «Дата выбита на корпусеЧетыре цифры…». */
.ticklist small{display:block;font-size:13px;color:var(--ink3);line-height:1.5;margin-top:2px}
/* Цена на карточке товара не-автомобильного раздела (TR-93/94): подпись слева,
   число справа — как в остальных строках этого блока. */
/* Цена у товара без трейд-ина (автохимия, мото): одна крупная цифра вместо
   пары «цена / при сдаче старого». */
.price-big{font-size:34px;font-weight:800;letter-spacing:-1px;font-variant-numeric:tabular-nums;
  color:var(--ink);margin:2px 0 4px}
.prod-price{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin:16px 0 12px;font-size:14px;color:var(--ink3)}
.prod-price b{font-size:26px;font-weight:800;letter-spacing:-.7px;color:var(--ink);
  font-variant-numeric:tabular-nums}
.ticklist b{color:var(--ink)}
.list-tx{display:flex;flex-direction:column;gap:9px;font-size:14.5px;color:var(--ink2)}

/* ── факты ── */
.facts{background:var(--bg2);border-radius:20px;padding:26px 30px;display:flex;flex-wrap:wrap;gap:24px 40px}
.facts>div{flex:1 1 170px;min-width:0}
.facts .n{font-size:22px;font-weight:800;letter-spacing:-.6px;margin-bottom:3px;font-variant-numeric:tabular-nums}
.facts .d{font-size:14px;color:var(--ink3);line-height:1.5}

/* ── герой ── */
.hero{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start}
.hero-l{flex:1.1 1 400px;min-width:0}
.hero-r{flex:1 1 340px;min-width:0}
.hero p.sub{font-size:18px;color:var(--ink2);line-height:1.6;max-width:520px;margin:16px 0 20px;text-wrap:pretty}
/* TR-169: вход в каталог и трубка — на первом экране, до формы подбора. */
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.hero-cta .btn,.hero-cta .btn-line{flex:0 1 auto}
.hero-pic{border:1px solid var(--ln);border-radius:20px;overflow:hidden;aspect-ratio:4/5;background:#fff;
  display:flex;align-items:center;justify-content:center;padding:24px}
.hero-pic img{width:100%;height:100%;object-fit:contain}
/* TR-194: карточке задана вытянутая пропорция 4:5, а снимок почти квадратный —
   на телефоне сверху и снизу оставалось 116 точек белого поля, четверть карточки.
   На узких экранах пропорцию снимаем: карточка становится по снимку. */
@media (max-width:620px){.hero-pic{aspect-ratio:auto}.hero-pic img{height:auto}}
.finder{border:1.5px solid var(--ln);border-radius:20px;padding:24px;box-shadow:0 6px 28px rgba(16,21,31,.06);max-width:560px}
.finder .t{font-size:17px;font-weight:800;margin-bottom:4px}
.finder .s{font-size:14.5px;color:var(--ink3);margin-bottom:16px}
.finder .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.finder .note{font-size:13.5px;color:var(--ink3);margin-top:12px;line-height:1.5}
.finder .note a{font-weight:700}
.finder-dark .finder-grid{flex:1.15 1 300px;min-width:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:11px}
.finder-dark select{background-color:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.16);color:#fff;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
.finder-dark select option{color:var(--ink);background:#fff}
.finder-dark .note{grid-column:1/-1;font-size:13.5px;color:rgba(255,255,255,.5)}
.finder-dark .note a{color:#fff;font-weight:700}
/* TR-334: ответ проверки «подойдёт ли к машине» на странице товара — во всю
   ширину сетки, под кнопкой. `[hidden]` повторён явно: display:flex класса
   перебивает правило браузера. */
.finder-dark .pk-v{grid-column:1/-1;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:6px;color:#fff;animation:tb-drop .2s ease}
.finder-dark .pk-v[hidden]{display:none}
.finder-dark .pk-v.ok{border-color:rgba(134,239,172,.5)}
.finder-dark .pk-v-h{font-size:17px;font-weight:800}
.finder-dark .pk-v.ok .pk-v-h{color:#86EFAC}
.finder-dark .pk-v.no .pk-v-h{color:#FCA5A5}
.finder-dark .pk-v-t{font-size:14.5px;color:rgba(255,255,255,.82);line-height:1.55}
.finder-dark .pk-v-t a{color:#fff;font-weight:700;text-decoration:underline}
.finder-dark .pk-v-bt{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.finder-dark .pk-v-bt>*{flex:1 1 180px}
@media (prefers-reduced-motion:reduce){.finder-dark .pk-v{animation:none}}

/* ── линейки ── */
.lines{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.line-card{border:1.5px solid var(--ln);border-radius:20px;padding:24px;display:flex;flex-direction:column;
  transition:border-color .16s,box-shadow .16s}
.line-card:hover{border-color:#C9D6F2;box-shadow:0 8px 28px rgba(16,21,31,.07)}
.line-card .nm{display:block;font-size:20px;font-weight:800;letter-spacing:-.4px;margin-bottom:7px;color:var(--ink);
  transition:color .15s}
.line-card .nm:hover{color:var(--ac)}
.line-card p{font-size:15px;color:var(--ink3);line-height:1.6;margin-bottom:18px;text-wrap:pretty}
.line-card .rows{display:flex;flex-direction:column;margin-bottom:18px}
.line-card .rows .kv{padding:8px 0;border-bottom-color:var(--bg3)}
.line-card .rows .kv .k,.line-card .rows .kv .v{font-size:14.5px}
.line-card .from{margin-top:auto;display:flex;align-items:baseline;gap:8px;margin-bottom:14px}
/* Карточка статьи (TR-92): у неё нет блока с ценой, который в карточке линейки
   прижимает кнопку к низу, — поэтому «Читать» вставало по высоте текста и в ряду
   из трёх карточек кнопки шли лесенкой. */
.lines-art .line-card>.btn-wide{margin-top:auto}
/* Карточка статьи (правка по замечанию): картинка и заголовок, без текста.
   Вся карточка — одна ссылка, поэтому отдельной кнопки «Читать» здесь нет. */
.arts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.art-card{display:flex;flex-direction:column;border:1.5px solid var(--ln);border-radius:20px;
  overflow:hidden;color:var(--ink);transition:border-color .16s,box-shadow .16s}
.art-card:hover{border-color:#C9D6F2;box-shadow:0 8px 28px rgba(16,21,31,.07)}
.art-card .ph{display:block;aspect-ratio:3/2;background:var(--bg3);overflow:hidden}
.art-card .ph img{width:100%;height:100%;object-fit:contain;padding:14px}
.art-card .tag{align-self:flex-start;margin:16px 20px 0}
.art-card .nm{display:block;font-size:19px;font-weight:800;letter-spacing:-.4px;line-height:1.3;
  padding:10px 20px 20px;text-wrap:pretty}
.art-card:hover .nm{color:var(--ac)}
.art-hero{width:100%;height:auto;max-height:420px;object-fit:contain;background:var(--bg3);border-radius:20px}
.line-card .from span{font-size:14px;color:var(--ink3)}
.line-card .from b{font-size:24px;font-weight:800;letter-spacing:-.7px;font-variant-numeric:tabular-nums}

/* ── карточки товара ── */
.prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}

.pcard{border:1.5px solid var(--ln);border-radius:18px;padding:16px;display:flex;flex-direction:column;
  color:var(--ink);transition:border-color .16s,box-shadow .16s}
.pcard:hover{border-color:#C9D6F2;box-shadow:var(--sh2)}
.pcard .ph{display:block;aspect-ratio:1;border-radius:12px;overflow:hidden;margin-bottom:14px;position:relative;background:#fff}
.pcard .ph img{width:100%;height:100%;object-fit:contain;padding:10px}
/* TR-307: фото проявляется за четверть секунды, а не выскакивает рывком. Класс
   ставит tb-site.js и только картинке, которая ещё не начала рисоваться, —
   загруженные из кэша остаются как есть, а без скрипта класса нет вовсе. */
.img-fade{opacity:0;transition:opacity .25s ease}
.img-fade.is-in{opacity:1}
@media (prefers-reduced-motion:reduce){.img-fade{transition:none}}
.pcard .stock{position:absolute;left:10px;top:10px;background:var(--ok);color:#fff;font-size:11.5px;font-weight:700;
  padding:4px 9px;border-radius:7px}
/* «Под заказ» (CT-130) — не зелёная плашка: зелёный на карточке товара означает
   «есть сейчас», и красить им ожидание значит обманывать взглядом. Серый фон,
   тёмный текст: заметно, но не обещает. Класс один на обе плашки — карточку в
   сетке и большое фото на странице товара. */
.stock.on-order{background:var(--ink3);color:#fff}
.pcard .nm{font-size:15.5px;font-weight:700;line-height:1.4;margin-bottom:7px;color:var(--ink);text-wrap:pretty}
.pcard .nm:hover{color:var(--ac)}
/* TR-197: в подборке на главной под название резервируем две строки — иначе в
   ряду из двух карточек плашки с током и габаритами расходятся по высоте на 21
   точку. content-box: на телефоне у ссылки появляется отступ под палец, и он не
   должен съедать зарезервированную строку. */
.prods-pick .pcard .nm{min-height:2.8em;box-sizing:content-box}
.pcard .chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px}
/* TR-210: в плитке осталось одно значение с единицей — «560 А»,
   «242×175×190 мм». Подпись сверху (TR-174) занимала в карточке шириной 165
   точек вторую строку у каждой плитки, а сама подпись у всех карточек одна и
   та же; она осталась в `title`. */
.pcard .chips span{background:var(--bg3);border-radius:6px;padding:5px 9px 6px;font-size:13px;color:var(--ink2);
  font-variant-numeric:tabular-nums;line-height:1.3}
.pcard .pr{margin-top:auto;display:flex;align-items:baseline;gap:8px;margin-bottom:5px;flex-wrap:wrap}
.pcard .pr b{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
.pcard .pr s{font-size:13.5px;color:var(--ink4);font-variant-numeric:tabular-nums}
/* TR-220: подпись под ценой называется так же, как на странице завода, —
   разметку обеим карточкам печатает одна функция priceBlock. */
.pcard .pr-d{font-size:12.5px;color:var(--ink3);margin-bottom:12px;line-height:1.45}
.pcard .btn-soft{font-size:14.5px;padding:11px;border-radius:11px}

/* ── чипы, плитки ── */
.chiprow{display:flex;flex-wrap:wrap;gap:8px}
.chiprow a{border:1.5px solid var(--ln);border-radius:9px;padding:9px 14px;font-size:14.5px;font-weight:600;
  color:var(--ink2);transition:border-color .15s,color .15s}
.chiprow a:hover{border-color:var(--ac);color:var(--ac)}
/* Ряд разделов каталога (TR-149). Прокрутка вбок, а не перенос: на 320 точках
   шесть подписей встали бы в три ряда — ровно та беда, что и у синей полосы. */
.secrow{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.secrow::-webkit-scrollbar{display:none}
.secrow a{flex:none;border:1.5px solid var(--ln);border-radius:9px;padding:9px 14px;font-size:14.5px;
  font-weight:600;color:var(--ink2);white-space:nowrap;transition:border-color .15s,color .15s,background-color .15s}
.secrow a:hover{border-color:var(--ac);color:var(--ac)}
.secrow a.on{background:var(--ac-s);border-color:var(--ac-b);color:var(--ac)}
.twocol{border:1.5px solid var(--ln);border-radius:22px;padding:28px 30px;display:flex;flex-wrap:wrap;gap:32px}
.twocol>div{flex:1 1 300px;min-width:0}
.twocol .t{font-size:17px;font-weight:800;margin-bottom:14px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.tiles a,.tile-static{border:1.5px solid var(--ln);border-radius:14px;padding:16px 18px;color:var(--ink);
  transition:border-color .16s,box-shadow .16s;display:block}
.tiles a:hover{border-color:#C9D6F2;box-shadow:0 6px 20px rgba(16,21,31,.06);color:var(--ink)}
.tiles .t{font-size:15px;font-weight:700;margin-bottom:3px}
.tiles .d{font-size:13.5px;color:var(--ink3)}

/* ── синий блок трейд-ина ── */
.trade{background:var(--ac);border-radius:22px;padding:34px;display:flex;flex-wrap:wrap;gap:36px;align-items:center}
.trade-l{flex:1.2 1 340px;min-width:0}
/* TR-335: заголовок — balance, а не pretty: строки выходят близкой длины, и
   на телефоне не остаётся одинокого «аккумулятор» на последней строке. */
.trade h2{font-size:30px;font-weight:800;letter-spacing:-1px;color:#fff;line-height:1.2;margin-bottom:10px;text-wrap:balance}
.trade p{font-size:16.5px;color:rgba(255,255,255,.8);line-height:1.6;margin-bottom:22px;text-wrap:pretty}
.trade .cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.trade .cta span{font-size:14px;color:rgba(255,255,255,.68);line-height:1.5}
.steps{flex:1 1 300px;min-width:0;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  border-radius:16px;padding:22px 24px;display:flex;flex-direction:column;gap:16px}
.steps .st{display:flex;gap:13px;align-items:flex-start}
.steps .n{width:26px;height:26px;border-radius:50%;background:#fff;color:var(--ac);font-size:13px;font-weight:800;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.steps .tx{flex:1;min-width:0;font-size:15.5px;color:#fff;line-height:1.5}
/* TR-154: пояснения под шагами в синем блоке про скидку читались с контрастом
   3,39, а там написано главное — «от 400 до 2 500 ₽ в зависимости от ёмкости и
   состояния». Блок стоит на 37 страницах. */
.steps .tx small{display:block;font-size:14px;color:rgba(255,255,255,.95);line-height:1.5}
.steps-num{display:flex;flex-direction:column;gap:13px}
.steps-num>div{display:flex;gap:12px;align-items:flex-start}
.steps-num .n{width:24px;height:24px;border-radius:50%;background:var(--ac-s);color:var(--ac);font-size:12.5px;
  font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.steps-num b{font-size:15.5px}
.steps-num small{display:block;font-size:14.5px;color:var(--ink3);line-height:1.55}

/* ── «как получить»: компактный и развёрнутый ── */
.ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.way{border:1.5px solid var(--ln);border-radius:18px;padding:22px;display:flex;flex-direction:column}
.way-ac{border-color:var(--ac-b);background:var(--ac-c)}
.way .hd{display:flex;align-items:center;gap:10px;margin-bottom:14px;color:var(--ac)}
.way .hd b{font-size:16.5px;color:var(--ink)}
.way .free{margin-left:auto;font-size:13px;font-weight:700;color:var(--ok)}
.way .list{display:flex;flex-direction:column;gap:9px}
.way .adr{font-size:14.5px;color:var(--ink2);line-height:1.6}
.way .adr small{display:block;font-size:13.5px;color:var(--ink3)}
.way-tick{margin-top:14px;padding-top:14px;border-top:1px solid var(--ac-b2);display:flex;gap:9px;align-items:flex-start;
  font-size:14.5px;color:var(--ink2);line-height:1.55}
.way-tick small{display:block;font-size:13.5px;color:var(--ink3);line-height:1.5;margin-top:2px}
.way .btm{margin-top:auto;padding-top:16px}
.way .foot{margin-top:auto}

.ways3{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px}
.way3{border:1.5px solid var(--ln);border-radius:20px;padding:24px;display:flex;flex-direction:column}
.way3 .hd{display:flex;align-items:center;gap:10px;margin-bottom:6px;color:var(--ac)}
.way3 .hd b{font-size:18px;color:var(--ink)}
.way3 .big{font-size:26px;font-weight:800;letter-spacing:-.6px;margin-bottom:14px}
.way3 .list{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.way3-t{display:flex;flex-direction:column;gap:9px;padding-top:16px;border-top:1px solid var(--ln2)}
.way3-t>div{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;color:var(--ink2);line-height:1.5}
.way-ac .way3-t{border-top-color:var(--ac-b2)}
.way3 .btm{margin-top:auto;padding-top:16px}
.way3 .btm.foot{border-top:none;padding-top:16px;margin-top:auto}

/* ── калькулятор доставки ── */
.calc-l{flex:1.25 1 340px;min-width:0}
.calc-row{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 12px}
.calc-row .fld{flex:1 1 220px;width:auto}
/* TR-83: поле города теперь с подсказкой из справочника, то есть внутри обёртки
   .sug — флекс-элементом строки стала она, и размер надо задавать ей, иначе поле
   схлопывается по содержимому. Рядом на «Доставке» стоит выбор аккумулятора:
   без товара тариф не посчитать, он зависит от веса и габаритов. */
.calc-row .sug{flex:1 1 220px}
.calc-row .sug .fld{width:100%;flex:none}
/* TR-372: кнопка расчёта — значок справа внутри поля города. */
.calc-row .sug{position:relative}
.calc-row .sug .fld{padding-right:60px}
.calc-go{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;border:0;border-radius:9px;
  background:var(--ac);color:#fff;cursor:pointer;transition:filter .15s,opacity .15s}
.calc-go:hover{filter:brightness(1.12)}
.calc-go.is-busy{opacity:.55;cursor:progress}
.calc-row select.fld{flex:1 1 240px;max-width:100%}
.calc-wait{color:var(--ink3)}
.calc-out{background:#F1F5FF;border:1px solid var(--ac-b2);border-radius:12px;padding:14px 18px;font-size:15.5px;
  color:var(--ink);line-height:1.5;margin-bottom:14px}
.quick{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.quick>span{font-size:13.5px;color:var(--ink3)}
.quick button{border:1px solid var(--ln);background:#fff;border-radius:8px;padding:6px 12px;font-size:13.5px;
  color:var(--ink2);transition:border-color .15s,color .15s}
.quick button:hover{border-color:var(--ac);color:var(--ac)}
.calc-facts{display:flex;flex-wrap:wrap;gap:18px 32px;margin-top:20px;padding-top:18px;border-top:1px solid var(--ln2)}
.calc-facts .n{font-size:20px;font-weight:800;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.calc-facts .d{font-size:13.5px;color:var(--ink3)}
.perks{flex:1 1 290px;min-width:0;background:#fff;border:1px solid var(--ln);border-radius:16px;padding:8px 22px}
.perks>div{padding:15px 0;border-bottom:1px solid var(--ln2);display:flex;gap:11px;align-items:flex-start}
.perks>div:last-child{border-bottom:none}
.perks b{font-size:15px;display:block;margin-bottom:2px}
.perks span small,.perks small{display:block;font-size:13.5px;color:var(--ink3);line-height:1.5}
.perks>div>span{font-size:13.5px;color:var(--ink3);line-height:1.5}
.perks>div>span b{font-size:15px;color:var(--ink)}

/* ── тёмные блоки ── */
.dark{background:var(--dark);border-radius:22px;padding:34px}
.dark-full{background:var(--dark);padding:52px 0;margin-top:0}
.dark-in{display:flex;flex-wrap:wrap;gap:36px;align-items:flex-start}
.dark h2,.h2-dark{font-size:26px;font-weight:800;letter-spacing:-.7px;line-height:1.55;color:#fff;margin-bottom:9px;text-wrap:pretty}
.dark p{font-size:16px;color:rgba(255,255,255,.62);line-height:1.6;text-wrap:pretty;max-width:640px}
.dark-l{flex:1.1 1 320px;min-width:0}
.dark-head{display:flex;flex-wrap:wrap;gap:36px;align-items:flex-start;margin-bottom:28px}
.dark-card{flex:1 1 300px;min-width:0;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);
  border-radius:16px;padding:24px}
.dark-card.sm{flex:1 1 240px;padding:20px 22px}
.dark-card .t{font-size:16px;font-weight:800;color:#fff;margin-bottom:10px}
.dark-card .a{font-size:15px;color:#fff;line-height:1.5;margin-bottom:4px}
.dark-card .s{font-size:14px;color:rgba(255,255,255,.6);line-height:1.5;margin-bottom:16px}
.dark-card .big-w{font-size:22px;font-weight:800;color:#fff;letter-spacing:-.6px;line-height:1.25}
.dark-card .tel{display:flex;align-items:center;gap:9px;font-size:21px;font-weight:800;color:#fff;
  font-variant-numeric:tabular-nums;margin-bottom:14px}
.dark-card .note{font-size:13px;color:rgba(255,255,255,.5);margin-top:11px;line-height:1.5}
.ticks{display:flex;flex-direction:column;gap:12px;margin-top:24px}
.ticks div{display:flex;gap:11px;align-items:flex-start}
.ticks span{font-size:15px;color:rgba(255,255,255,.78);line-height:1.55}
.dark-num{display:flex;flex-wrap:wrap;gap:20px 44px;margin-top:28px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12)}
.dark-num>div{flex:1 1 200px;min-width:0}
.dark-num .n{font-size:26px;font-weight:800;color:#fff;letter-spacing:-.8px;font-variant-numeric:tabular-nums;margin-bottom:4px}
.dark-num .d{font-size:14px;color:rgba(255,255,255,.58);line-height:1.5}
.dark-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.dark-cards>div{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11);border-radius:16px;padding:20px 22px}
.dark-cards .n{font-size:13px;font-weight:800;color:var(--ac-d);letter-spacing:.5px;margin-bottom:11px;font-variant-numeric:tabular-nums}
.dark-cards .t{font-size:15.5px;font-weight:700;color:#fff;margin-bottom:5px;text-wrap:pretty}
.dark-cards .d{font-size:14px;color:rgba(255,255,255,.6);line-height:1.55;text-wrap:pretty}
.cta-band{background:var(--dark);border-radius:22px;padding:34px;display:flex;flex-wrap:wrap;gap:32px;align-items:center}
.cta-band .cta-l{flex:1.2 1 320px;min-width:0}
.cta-band h2{font-size:26px;font-weight:800;letter-spacing:-.7px;line-height:1.55;color:#fff;margin-bottom:9px;text-wrap:pretty}
.cta-band p{font-size:16px;color:rgba(255,255,255,.62);line-height:1.6;text-wrap:pretty}
.cta-band .cta-b{display:flex;flex-wrap:wrap;gap:10px}

/* ── строка «цена по запросу» над карточками (TR-189) ──
   В промышленном разделе семь карточек без фото, без цены и без плашки
   наличия, а объяснение, почему так, лежало ПОСЛЕ всех семи — на 2685-й точке,
   больше трёх экранов вниз. Человек успевал решить, что раздел недоделан,
   раньше, чем доходил до объяснения. Строка стоит сразу под заголовком, до
   карточек, и несёт то же действие, что и блок ниже. Оформление — как у
   `.box-s`: это подсказка, а не ещё один тёмный призыв. */
.ask-row{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;justify-content:space-between;
  background:var(--ac-c);border:1px solid var(--ac-b2);border-radius:16px;padding:16px 20px;margin-top:20px}
.ask-row .t{flex:1 1 300px;min-width:0}
.ask-row .t b{display:block;font-size:16px;font-weight:800;letter-spacing:-.3px;margin-bottom:3px}
.ask-row .t span{font-size:14px;color:var(--ink3);line-height:1.5;text-wrap:pretty}
.ask-row .btn{flex:0 0 auto}
@media (max-width:620px){
  .ask-row{padding:14px 16px}
  .ask-row .btn{width:100%}
}

/* ── каталог: фильтры ── */
.cat{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start}
.cat-side{flex:1 1 258px;max-width:326px;min-width:240px;position:sticky;top:24px}
.cat-main{flex:1 1 520px;min-width:0}
.cat-head{display:flex;flex-wrap:wrap;gap:36px;align-items:flex-start}
.cat-head>.t{flex:1.4 1 400px;min-width:0}
.cat-facts{flex:1 1 300px;min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;background:var(--bg2);
  border-radius:18px;padding:22px 24px}
.cat-facts .n{font-size:19px;font-weight:800;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.cat-facts .d{font-size:13.5px;color:var(--ink3);line-height:1.45}
.fbox{border:1.5px solid var(--ln);border-radius:18px;padding:22px}
.fbox .hd{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:18px}
.fbox .hd b{font-size:17px;font-weight:800}
.fbox .rst{font-size:13.5px;font-weight:600;color:var(--ac)}
.fgrp{font-size:12px;font-weight:700;color:var(--ink3);letter-spacing:.5px;text-transform:uppercase;margin-bottom:8px}
.fcol{display:flex;flex-direction:column;gap:2px;margin-bottom:18px}
.fchk{display:flex;align-items:center;gap:10px;width:100%;font-size:14.5px;color:var(--ink2);
  padding:6px 8px;border-radius:9px;border:1px solid transparent;min-height:34px}
.fchk:hover{background:var(--bg2)}
.fchk .bx{width:17px;height:17px;border-radius:5px;border:1.5px solid var(--ln4);background:#fff;flex-shrink:0;
  display:flex;align-items:center;justify-content:center}
.fchk .bx svg{opacity:0}
.fchk.on{background:var(--ac-c);border-color:var(--ac-b);color:var(--ink)}
.fchk.on .fchk-l{font-weight:700}
.fchk.on .bx{background:var(--ac);border-color:var(--ac)}
.fchk.on .bx svg{opacity:1}
.fchk .fchk-l{flex:1;font-weight:500;font-size:14.5px;line-height:1.35}
.fchk .cnt{font-size:13px;color:var(--ink4);font-variant-numeric:tabular-nums;flex-shrink:0;line-height:1.35}
/* TR-127: вариант, под который не осталось ни одной модели, скрывается — но
   `display:flex`/`display:none` из правил выше сильнее браузерного `[hidden]`,
   поэтому прячем явно, иначе атрибут стоит, а элемент на экране. */
.fchk[hidden],.fcol[hidden],.fgrp[hidden],.fseg[hidden],.frange[hidden]{display:none}
/* TR-117: ползунок ёмкости. Два обычных `input[type=range]` лежат друг на
   друге: сам ползунок прозрачный (`pointer-events:none`), кликается только
   бегунок — иначе верхний вход перехватывал бы нажатия по всей дорожке и
   нижний бегунок было бы не взять. Дорожка и заливка нарисованы отдельными
   элементами, чтобы цвет не зависел от браузерных псевдоэлементов.
   Переходов нет намеренно: правило 2 дизайн-системы — у элементов выбора их
   не бывает, бегунок обязан идти за пальцем без задержки. */
.frange{margin-bottom:18px}
.frange-hd{display:flex;align-items:baseline;gap:5px;margin-bottom:12px}
.frange-hd b{font-size:15.5px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.frange-hd span{font-size:13px;color:var(--ink3)}
.frange-tr{position:relative;height:22px}
.frange-tr::before{content:'';position:absolute;left:0;right:0;top:9px;height:4px;border-radius:2px;background:var(--ln)}
.frange-fill{position:absolute;top:9px;height:4px;border-radius:2px;background:var(--ac)}
.frange-tr input[type=range]{position:absolute;left:0;top:0;width:100%;height:22px;margin:0;padding:0;
  background:none;border:0;pointer-events:none;-webkit-appearance:none;appearance:none}
.frange-tr input[type=range]::-webkit-slider-runnable-track{height:22px;background:none}
.frange-tr input[type=range]::-moz-range-track{height:22px;background:none}
.frange-tr input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;cursor:pointer;
  width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--ac);box-shadow:var(--sh1)}
.frange-tr input[type=range]::-moz-range-thumb{pointer-events:auto;cursor:pointer;
  width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--ac);box-shadow:var(--sh1)}
.frange-tr input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--ac-b2)}
.frange-tr input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px var(--ac-b2)}
.frange-ends{display:flex;justify-content:space-between;margin-top:7px;
  font-size:12.5px;color:var(--ink4);font-variant-numeric:tabular-nums}
.fseg{display:flex;gap:2px;background:var(--bg3);border-radius:9px;padding:3px;margin-bottom:18px}
.fseg button{flex:1;text-align:center;font-size:13.5px;font-weight:600;color:var(--ink3);padding:8px 6px;border-radius:7px}
.fseg button.on{background:#fff;color:var(--ink);font-weight:700;box-shadow:0 1px 3px rgba(16,21,31,.1)}
/* Деление переключателя, под которое нет моделей: гасим, а не выбрасываем —
   дырка в полосе из трёх делений читается хуже погашенного (TR-127). */
.fseg button.is-off{opacity:.38;cursor:default}
.cat-bar{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:18px}
.cat-bar .cnt{font-size:15px;color:var(--ink3)}
.cat-bar .srt{display:flex;align-items:center;gap:9px;margin-left:auto}
.cat-bar .srt span{font-size:14.5px;color:var(--ink3)}
.cat-bar select{border:1.5px solid var(--ln);border-radius:10px;padding:9px 12px;font-size:14.5px;outline:none;
  background:#fff;color:var(--ink);font-weight:600}
.js-query{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:var(--ac-c);border:1px solid var(--ac-b2);
  border-radius:12px;padding:11px 16px;font-size:14.5px;color:var(--ink2);margin-bottom:16px}
.js-query b{color:var(--ink)}
/* TR-143: плашка живёт под заголовком страницы — там отступ нужен сверху, а не снизу. */
.page-top .js-query{margin:16px 0 0}

/* ── фильтры шторкой на телефоне (TR-142) ──
   Панель фильтров была разложена во всю ширину и всегда открыта: до первой
   карточки человек листал почти два экрана (1662 точки на /product/, 1764 на
   узком 320), а поставив галочку, не видел результата вовсе — счётчик
   оказывался на 235 точек ниже края экрана, первая карточка на 295. Ниже 900
   точек панель уезжает в шторку снизу, а её место в потоке занимает кнопка
   «Фильтры» в липкой строке над сеткой. На десктопе всё это скрыто, панель
   остаётся обычной колонкой сбоку. */
.fbtn,.fsheet-hd,.fsheet-ft,.fsheet-bg{display:none}
.empty{border:1.5px dashed var(--ln4);border-radius:18px;padding:44px 24px;text-align:center}
.empty .t{font-size:18px;font-weight:800;margin-bottom:7px}
.empty .d{font-size:15px;color:var(--ink3);line-height:1.6;max-width:380px;margin:0 auto 18px}

/* таблица сравнения */
.cmp{border:1.5px solid var(--ln);border-radius:20px;overflow-x:auto}
.cmp-row{display:flex;flex-wrap:nowrap;min-width:640px;gap:16px;padding:13px 22px;border-bottom:1px solid var(--ln2)}
.cmp-row:last-child{border-bottom:none}
.cmp-row.hd{background:var(--bg2);font-weight:800}
.cmp-row.alt{background:#FBFCFE}
.cmp-row>span{font-size:15px;min-width:0}
.cmp-row>span:first-child{flex:1.2 1 190px;color:var(--ink3)}
.cmp-row.hd>span:first-child{color:var(--ink)}
.cmp-row>span+span{flex:1 1 130px}
.cmp-row .hi{color:var(--ac);font-weight:800}
.cmp-note{flex:1.3 1 340px;min-width:0;font-size:15.5px;color:var(--ink3);line-height:1.7;text-wrap:pretty}
.advice{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:14px;padding:22px 24px}
.advice a{display:flex;gap:12px;align-items:flex-start;color:var(--ink)}
.advice a:hover b{color:var(--ac)}
.advice b{font-size:14.5px;display:block}
.advice small{font-size:14px;color:var(--ink3);line-height:1.5;display:block}
.dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;margin-top:6px;background:var(--ac)}
.dot-standard{background:var(--ok)}
.dot-asia{background:#C08414}

/* ── карточка товара ── */
.prod{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start}
.prod-gal{flex:1.15 1 300px;min-width:0;display:flex;flex-direction:column;gap:12px}
.prod-mid{flex:1 1 300px;min-width:0}
.prod-buy{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:14px}
.prod-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:14px;color:var(--ink3);margin-bottom:28px}
.prod-meta i{color:#C6CEDB;font-style:normal}
.gal-big{position:relative;width:100%;aspect-ratio:1;border:1px solid var(--ln);border-radius:18px;overflow:hidden;
  background:#fff;display:flex;align-items:center;justify-content:center;padding:22px}
.gal-big img{width:100%;height:100%;object-fit:contain}
/* Миниатюры галереи (CT-129). Появляются, только когда фотографий больше одной:
   ряд из одной миниатюры — это шум, листать нечего. Ряд прокручивается вбок сам,
   а не растягивает страницу: восемь снимков на телефоне иначе уезжают за край. */
.gal-thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:2px;
  scrollbar-width:none}
.gal-thumbs::-webkit-scrollbar{display:none}
.gal-th{flex:none;width:72px;height:72px;border:1px solid var(--ln);border-radius:12px;
  overflow:hidden;background:#fff;padding:6px;transition:border-color .15s}
.gal-th img{width:100%;height:100%;object-fit:contain}
.gal-th.on{border-color:var(--ac)}
.gal-th:hover{border-color:var(--ink4)}
.gal-big .stock{position:absolute;left:14px;top:14px;background:var(--ok);color:#fff;font-size:12px;font-weight:700;
  padding:5px 11px;border-radius:7px}
/* TR-270: «Под заказ» и «Нет в наличии» — серым, а не зелёным. Правило
   .stock.on-order (в карточках каталога, выше) той же силы, что и .gal-big
   .stock, и стоит ВЫШЕ — значит на большом фото товара побеждало зелёное, и
   отсутствие товара было подписано цветом «получилось». */
.gal-big .stock.on-order{background:var(--ink3)}
.gal-big .zoom{position:absolute;right:14px;bottom:14px;width:34px;height:34px;border-radius:10px;background:#fff;
  border:1px solid var(--ln);display:flex;align-items:center;justify-content:center;color:var(--ink3)}
.gal-note{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink3);padding-top:2px}
.seg-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:9px}
/* TR-378: «Модель серии» у тяговых — список на всю оставшуюся ширину ряда. */
.seg-row-sel .dd,.seg-row-sel select.fld{flex:1 1 240px;min-width:0}
/* TR-379: под кнопкой запроса у модели «под заказ» — что есть в наличии из
   близкого по размеру и ёмкости. Компактным списком: карточка каталога здесь
   втрое шире колонки. */
.sim{margin-top:18px;padding-top:14px;border-top:1px solid var(--ln)}
.sim-t{font-size:13.5px;font-weight:700;color:var(--ink2);margin-bottom:4px}
.sim-i{display:flex;align-items:center;gap:12px;padding:9px 0;color:var(--ink);border-top:1px solid var(--ln2);min-height:44px}
.sim-t+.sim-i{border-top:0}
.sim-ph{flex:none;width:56px;height:56px;display:flex;align-items:center;justify-content:center}
.sim-ph img{width:56px;height:56px;object-fit:contain}
.sim-tx{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.sim-tx b{font-size:14.5px;font-weight:700;transition:color .15s}
.sim-tx small{font-size:12.5px;color:var(--ink3)}
.sim-pr{flex:none;font-weight:800;font-size:15px;white-space:nowrap;font-variant-numeric:tabular-nums}
.sim-i:hover{color:var(--ink)}
.sim-i:hover b{color:var(--ac)}
.seg-row>span{font-size:14px;color:#546072;flex-shrink:0}
.seg-row .hint{font-size:13px;color:var(--ink3)}
.seg{display:inline-flex;gap:2px;background:var(--bg3);border-radius:9px;padding:3px;flex-wrap:wrap}
.seg a,.seg button,.seg span.on{font-size:14px;font-weight:600;color:var(--ink3);padding:7px 13px;border-radius:7px;text-align:center;
  font-variant-numeric:tabular-nums}
.seg a:hover,.seg button:hover{color:var(--ink)}
.seg .on{background:#fff;color:var(--ink);font-weight:800;box-shadow:0 1px 3px rgba(16,21,31,.1)}
/* TR-173: единственное исполнение — это не выбор, а факт. Плитка снимается, и
   строка читается как «Полярность  прямая», а не как кнопка, от которой ничего
   не происходит. */
.seg-row.is-one .seg{background:none;padding:0;border-radius:0}
.seg-one{font-size:14.5px;font-weight:700;color:var(--ink)}
/* TR-182: ряд ёмкостей выглядит переключателем, но каждая плитка — ссылка на
   ДРУГОЙ аккумулятор с другой ценой. При зазоре 2 точки промах пальцем открывал
   соседний товар и уводил страницу в начало. Разводим только этот ряд: у
   полярности и количества переключение происходит на месте, там промах дешёвый. */
.seg-caps{gap:7px}
/* количество в заказе (TR-81) — та же плитка, что и .seg, чтобы строки
   «Полярность» и «Количество» под товаром читались как одна пара */
.qty{display:inline-flex;align-items:center;gap:2px;background:var(--bg3);border-radius:9px;padding:3px}
.qty button{width:34px;height:30px;font-size:17px;font-weight:700;color:var(--ink3);border-radius:7px;text-align:center;line-height:1}
.qty button:hover:not(:disabled){color:var(--ink);background:#fff}
.qty button:disabled{opacity:.35;cursor:default}
.qty b{min-width:34px;text-align:center;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.seg2{display:flex;gap:4px;background:#F1F3F8;border-radius:11px;padding:4px}
.seg2 button{padding:8px 16px;border-radius:8px;font-size:14.5px;white-space:nowrap;color:#546072;font-weight:700}
.seg2 button.on{background:#fff;color:var(--ink);font-weight:800;box-shadow:0 1px 4px rgba(16,21,31,.12)}
.prod-sub{font-size:18px;font-weight:800;letter-spacing:-.3px;margin:22px 0 12px}
.prod-trust{display:flex;flex-direction:column;gap:11px;margin-top:16px;padding-top:16px;border-top:1px solid var(--ln)}
.prod-trust div{display:flex;align-items:center;gap:11px;font-size:14.5px;color:var(--ink2)}
.price-box{background:var(--bg2);border-radius:20px;padding:24px}
.price-tr-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.price-chip{background:#0B8A48;color:#fff;font-size:24px;font-weight:800;letter-spacing:-.8px;
  font-variant-numeric:tabular-nums;padding:9px 16px;border-radius:12px;line-height:1.1}
.price-lbl{font-size:15.5px;color:var(--ink2);font-weight:600}
.price-plain{font-size:15px;color:var(--ink3);margin-top:11px;font-variant-numeric:tabular-nums}
.price-tr{display:flex;align-items:center;gap:12px;margin-top:20px;padding-top:18px;border-top:1px solid var(--ln)}
.price-tr>span{flex:1;min-width:0;font-size:15px;color:var(--ink);line-height:1.35}
.price-tr small{display:block;font-size:13.5px;color:var(--ink3)}
.price-tr b{font-size:18px;color:var(--ok);font-variant-numeric:tabular-nums;white-space:nowrap}
.ask{width:100%;background:var(--ac-s);color:var(--ac);font-weight:700;font-size:15px;padding:13px 20px;border-radius:12px;
  text-align:center;transition:background-color .15s}
.ask:hover{background:#DFE9FF}
.dlv-box{border:1.5px solid var(--ln);border-radius:18px;padding:20px;box-shadow:0 2px 14px rgba(16,21,31,.04)}
.dlv-box .t{font-size:16px;font-weight:800;margin-bottom:13px}
.dlv-box .list{display:flex;flex-direction:column;gap:10px}
.dlv-box .foot{display:flex;gap:9px;align-items:flex-start;font-size:14px;color:var(--ink2);line-height:1.5}

/* табы */
/* TR-213: `overflow-x:auto` по спецификации делает `auto` и вторую ось, а
   подчёркивание активной вкладки (3 точки) вылезает за нижний край строки —
   полоса получала собственную вертикальную прокрутку на несколько точек и
   ездила вверх-вниз под пальцем и колесом мыши. Вбок она прокручиваться должна
   (вкладок четыре), вверх-вниз — нет. */
.tabs{display:flex;gap:26px;border-bottom:1.5px solid var(--ln);overflow-x:auto;overflow-y:hidden}
.tabs button{font-size:15.5px;font-weight:700;color:var(--ink3);padding:0 0 13px;border-bottom:3px solid transparent;
  white-space:nowrap;margin-bottom:-1.5px}
.tabs button.on{color:var(--ink);border-bottom-color:var(--ac)}
.tabpane{padding-top:28px}
.tabpane[hidden]{display:none}
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:26px}
.feat .t{font-weight:700;font-size:15.5px;margin-bottom:5px}
.feat .d{font-size:14.5px;color:var(--ink3);line-height:1.6}
.desc-2col{display:flex;flex-wrap:wrap;gap:44px;align-items:flex-start}
.desc-2col>.tx{flex:1.35 1 320px;min-width:0}
.desc-2col>.pic{flex:1 1 280px;min-width:0;border:1px solid var(--ln);border-radius:18px;overflow:hidden}
.desc-2col .pic img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff;padding:18px}
.desc-2col .pic figcaption{padding:18px 20px;font-size:14px;color:var(--ink3);line-height:1.6;text-wrap:pretty}
.desc-2col .pic figcaption b{display:block;font-size:15.5px;color:var(--ink);margin-bottom:5px}
/* TR-172: карточка про завод вместо повтора фотографии товара — см. комментарий
   в разметке. Оформление тише, чем у соседних блоков: это справка, а не действие. */
.desc-2col>.pic-fact{padding:20px 22px;background:var(--bg2);border-color:transparent}
.pic-fact b{display:block;font-size:15.5px;margin-bottom:6px}
.pic-fact p{font-size:14px;color:var(--ink3);line-height:1.6;text-wrap:pretty}
.spec-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.spec-groups .box{padding:22px}
.grp-t{font-size:12px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--ac);margin-bottom:14px}
.spec-groups .kv{padding:8px 0;border-bottom-color:var(--bg3)}
.spec-groups .kv .k,.spec-groups .kv .v{font-size:14.5px}
.doclinks{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.doclink{display:flex;align-items:center;gap:8px;border:1.5px solid var(--ln);border-radius:11px;padding:11px 16px;
  font-size:14.5px;font-weight:600;color:var(--ink);transition:border-color .15s,color .15s}
.doclink:hover{border-color:var(--ac);color:var(--ac)}

/* отзывы и вопросы */
/* TR-77: верх этой колонки называется flex-END, и это не опечатка. `wrap-reverse`
   стоит ради узкого экрана — чтобы блок «Отзывы покупателей» с кнопкой встал НАД
   списком, а не под ним. Заодно он переворачивает поперечную ось: `flex-start`
   в нём означает НИЗ. Пока здесь стоял flex-start, короткий список прижимался к
   низу строки, и над текстом зияла пустота в полтораста пикселей — ровно то, что
   видно на карточке без отзывов. Меняешь выравнивание — помни, что ось перевёрнута. */
.rev-2col{display:flex;flex-wrap:wrap-reverse;gap:44px;align-items:flex-end}
.rev-list{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:20px}
.rev-list.wide{max-width:820px}
.rev{border-bottom:1px solid var(--ln2);padding-bottom:20px}
.rev-hd{display:flex;flex-wrap:wrap;align-items:center;gap:11px;margin-bottom:8px}
.rev-hd b{font-size:15.5px}
.rev-hd .src{font-size:12px;font-weight:700;color:var(--ok);background:var(--ok-bg);border-radius:6px;padding:3px 9px}
.rev-hd .city{font-size:13px;color:var(--ink4)}
.rev-car{font-size:13.5px;color:var(--ink3);margin-bottom:8px}
.rev p{font-size:15.5px;line-height:1.65;color:var(--ink2);text-wrap:pretty}
.rev-side{flex:1 1 280px;max-width:340px;min-width:250px}
.qa{max-width:820px;display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.qa-item{border:1px solid var(--ln);border-radius:16px;padding:20px 22px;width:100%}
.qa .q,.qa .a{display:flex;gap:11px}
.qa .q{margin-bottom:12px}
.qa .q>span:last-child{font-size:15.5px;font-weight:700;line-height:1.5;text-wrap:pretty}
.qa .a>span:last-child{font-size:15.5px;line-height:1.65;color:var(--ink2);text-wrap:pretty}
.qa .mark{width:23px;height:23px;border-radius:7px;background:var(--ink2);color:#fff;font-size:12px;font-weight:800;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* «почему выгоднее» — шесть пунктов */
.why6{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px 40px}
.why6>div{display:flex;gap:14px;align-items:flex-start}
.why6 .n{width:34px;height:34px;border-radius:10px;background:#EAF0FF;color:var(--ac);font-size:14px;font-weight:800;
  font-variant-numeric:tabular-nums;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.why6 b{font-size:16px;display:block;margin-bottom:4px}
.why6 small{font-size:15px;color:var(--ink3);line-height:1.6;display:block}

/* гео-переключатель */
.geo-head{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-bottom:20px}
.geo-sw{display:flex;align-items:center;gap:10px;margin-left:auto}
.geo-sw>span{font-size:14px;color:var(--ink3)}

/* оплата */
.pay-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 20px;margin-bottom:20px}
.pay-head .seg2{margin-left:auto}
/* TR-162: прижатие вправо рассчитано на широкий экран, где заголовок и
   переключатель стоят в одну строку. На телефоне строка переносится, прижатие
   остаётся — и переключатель уезжает к правому краю, оставляя слева до 123 точек
   пустоты. Читается как сбитая вёрстка. */
@media (max-width:620px){.pay-head .seg2{margin-left:0}}
.pay-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.pay-grid .box{padding:22px;border-radius:18px}
.pay-t{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:7px}
.pay-t b{font-size:16.5px}
.b2b{flex:1.3 1 340px;min-width:0}
.b2b-side{flex:1 1 280px;min-width:0}

/* возвраты */
.ret{flex:1.5 1 420px;min-width:0;border:1.5px solid var(--ln);border-radius:20px;overflow:hidden}
.ret-row{padding:22px 24px;border-bottom:1px solid var(--ln2)}
.ret-row:last-child{border-bottom:none}
.ret-hd{display:flex;flex-wrap:wrap;gap:16px;align-items:baseline;margin-bottom:8px}
.ret-hd b{font-size:17px;letter-spacing:-.2px}
.ret-d{font-size:15px;color:var(--ink3);line-height:1.6;margin-bottom:10px;text-wrap:pretty}
.ret-a{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;color:var(--ink);line-height:1.5}
.ret-side{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:14px}

/* предупреждение */
.warn{display:flex;flex-wrap:wrap;gap:12px;align-items:center;background:#FEF7F6;border:1.5px solid #F3C6C0;
  border-radius:14px;padding:14px 18px}
.warn>div{flex:1 1 340px;min-width:0;font-size:15px;line-height:1.5;color:var(--ink2)}
.warn b{color:var(--ink)}
.warn svg{color:var(--red-t)}
.warn-a{font-size:14.5px;font-weight:700;color:var(--red-t);white-space:nowrap;border-bottom:1px dashed currentColor}

/* аккордеон */
.faq{display:flex;flex-direction:column;gap:10px}
.faq details{border:1.5px solid var(--ln);border-radius:16px;padding:0 22px;background:#fff}
.faq details[open]{border-color:var(--ac-b);background:var(--ac-c)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:17px 0;
  font-size:16px;font-weight:700;text-wrap:pretty}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";margin-left:auto;width:26px;height:26px;border-radius:8px;background:var(--bg3);flex-shrink:0;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6B7D' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-size:15px;background-position:center;background-repeat:no-repeat}
.faq details[open] summary::after{background-color:var(--ac);
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E")}
.faq .ans{font-size:15.5px;color:var(--ink2);line-height:1.7;padding:0 0 18px;max-width:820px;text-wrap:pretty}

/* контакты */
.ct-l{flex:1.2 1 320px;min-width:0}
.ct-l .btns,.places .btns{display:flex;flex-wrap:wrap;gap:10px}
.tel-big{display:inline-flex;align-items:center;gap:11px;font-size:clamp(24px,3vw,32px);font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.8px;margin:18px 0 16px}
.tel-big:hover{color:var(--ink)}
.hours{flex:1 1 280px;min-width:0;background:#fff;border:1px solid var(--ln);border-radius:16px;padding:8px 22px}
.hours div{display:flex;justify-content:space-between;gap:14px;padding:14px 0;border-bottom:1px solid var(--ln2);font-size:14.5px}
.hours div:last-child{border-bottom:none}
.hours span{color:var(--ink3)}
.hours b.ok{color:var(--ok)}
.places{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:12px}
.place{border-radius:18px;padding:22px 24px;background:var(--ac-c);border:1.5px solid var(--ac-b)}
.place .nm{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:8px}
.place .nm b{font-size:17px;letter-spacing:-.2px}
.place .a{font-size:15px;color:var(--ink);margin-bottom:4px}
.place .h{font-size:14px;color:var(--ink3);line-height:1.5;margin-bottom:12px}
.place .perks{display:flex;flex-direction:column;gap:7px;background:none;border:none;padding:0}
.place .perks div{display:flex;gap:9px;align-items:flex-start;font-size:14px;color:var(--ink2);line-height:1.5;
  padding:0;border:none}
.map{flex:1.3 1 380px;min-width:0;border:1.5px solid var(--ln);border-radius:20px;overflow:hidden;position:relative;
  min-height:420px;display:block;background:#EDF0F5}
.map .grid{position:absolute;inset:0;background-image:linear-gradient(#E1E6EF 3px,transparent 3px),
  linear-gradient(90deg,#E1E6EF 3px,transparent 3px);background-size:70px 70px}
.map .pin{position:absolute;left:44%;top:48%;transform:translate(-50%,-100%) rotate(-45deg);width:36px;height:36px;
  border-radius:50% 50% 50% 4px;background:var(--ac);display:flex;align-items:center;justify-content:center;
  box-shadow:0 5px 16px rgba(0,82,222,.4)}
.map .pin.ok{background:var(--ok);box-shadow:0 4px 14px rgba(11,122,67,.4)}
.map .pin b{transform:rotate(45deg);color:#fff;font-weight:800;font-size:14px;display:flex}
.map .cap{position:absolute;left:16px;bottom:16px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  letter-spacing:.6px;color:var(--ink3);background:#fff;border:1px solid #E1E6EF;border-radius:8px;padding:8px 12px}
.legal div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 14px;padding:11px 0;
  border-bottom:1px solid var(--ln);font-size:14.5px}
.legal div:last-of-type{border-bottom:none}
.legal span{color:var(--ink3)}
.legal b{text-align:right;font-variant-numeric:tabular-nums}
.legal .foot{display:block;border-bottom:none}

/* ── оформление заказа ── */
.bare-top{border-bottom:1px solid var(--ln);background:#fff}
.bare-top .wrap{display:flex;align-items:center;min-height:64px}
.bare-top a{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:700;color:var(--ink2);
  transition:color .15s}
.bare-top a:hover{color:var(--ac)}
.bare-top a svg{color:var(--ink3)}
.bare-top a:hover svg{color:var(--ac)}
.checkout{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.co-main{flex:1.6 1 420px;min-width:0;display:flex;flex-direction:column;gap:16px}
.co-side{flex:1 1 320px;min-width:0;position:sticky;top:24px}
.co-box{background:var(--bg2);border-radius:20px;padding:26px}
.co-t{font-size:19px;font-weight:800;letter-spacing:-.3px;margin-bottom:16px}
/* Карточка выбранного аккумулятора: сам товар и его свойства — полярность и
   количество — одним белым блоком (TR-83). Раньше свойства лежали строками на
   сером фоне под карточкой и читались как настройки всего заказа. */
.co-card{background:#fff;border-radius:16px}
.co-card .co-item{border-radius:0}
.co-rows{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;
  margin:0 16px;padding:14px 0;border-top:1px solid var(--ln2)}
.co-rows .seg-row{margin-bottom:0}
.co-item{display:flex;flex-wrap:wrap;gap:16px;align-items:center;background:#fff;border-radius:16px;padding:16px}
.co-item .ph{width:90px;height:90px;object-fit:contain;background:#fff;border-radius:12px;flex-shrink:0}
.co-item .tx{flex:1 1 200px;min-width:0}
.co-item .nm{font-size:16.5px;display:block;margin-bottom:4px}
.co-item .meta{font-size:13.5px;color:var(--ink3)}
.co-item .pr{text-align:right;flex-shrink:0}
.co-item .pr s{font-size:14px;font-variant-numeric:tabular-nums;display:block}
.co-item .pr .now{font-size:21px;font-weight:800;font-variant-numeric:tabular-nums}
/* TR-81: пустое состояние занимает место карточки товара. Схлопываясь, оно
   двигало вверх весь заказ на голом /order/ — сдвиг вёрстки 0,108 при пороге 0,1. */
.co-empty{background:#fff;border-radius:16px;padding:22px;font-size:15px;color:var(--ink3);line-height:1.6;
  min-height:122px;display:flex;flex-direction:column;justify-content:center}
.co-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.pick{background:#fff;border:1.5px solid var(--ln);border-radius:14px;padding:14px 16px;display:block}
/* TR-305: выбранная плитка — одна рамка в цвет акцента и светлая заливка. Была
   ещё внутренняя обводка в точку поверх рамки 1,5: вместе выходила синяя линия
   в 2,5 точки, и выбор читался тяжелее самой карточки. В макетах второй версии
   двойная обводка осталась — при переносе не возвращать. */
.pick.on{border-color:var(--ac);background:var(--ac-c)}
/* TR-68. Оплата вперёд при сдаче старого аккумулятора: плитка остаётся на
   месте и гаснет, но нажатие принимает — им она и объясняет, почему сейчас
   не годится. Гасим цветом, а не прозрачностью: под opacity подпись плитки
   выцветает до нечитаемого, и «выключено» становится неотличимо от «пропало». */
.pick.is-off{background:var(--ln2);cursor:not-allowed}
.pick.is-off .hd b{color:var(--ink3)}
.pick.is-off .note{color:var(--ink4)}
.pick.is-off .badge-green{background:var(--ln3);color:var(--ink4)}
.pick .hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:5px}
.pick .hd b{font-size:15.5px}
.pick .hd .pr{font-size:15px;margin-left:auto;font-variant-numeric:tabular-nums}
.pick .note{font-size:13.5px;color:var(--ink3);line-height:1.5;display:block}
.co-fields+.co-note{margin-top:12px}
[data-mpane]>.co-fields{margin-top:20px}
.co-shop{margin-top:20px;border:1.5px solid var(--ln);border-radius:16px;overflow:hidden;display:flex;flex-wrap:wrap;background:#fff}
.co-shop .l{flex:1 1 260px;min-width:0;padding:22px}
.co-shop .a{font-size:15px;margin-bottom:6px}
.co-shop .b{font-size:14.5px;font-weight:600;margin-bottom:4px}
.co-shop .h{font-size:14px;color:var(--ink3);margin-bottom:16px}
.co-shop .r{flex:1 1 240px;min-width:0;min-height:190px;border-radius:0}
.co-shop .map{border:none;min-height:190px}
/* Терминалы перевозчика (TR-83): куда ехать за аккумулятором. Списком или на
   карте — переключателем; вид тот же, что у остальных выборов на странице. */
.co-terms{margin-top:12px}
.co-terms .t-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.co-terms .t-head{font-size:14px;color:#546072}
.co-terms .t-sw{margin-left:auto}
/* TR-136: список терминалов — строки в одной рамке, как в макете. Сеткой
   карточек он занимал пол-экрана и хоронил под собой выбор «когда платить». */
.co-terms{border:1.5px solid var(--ln);border-radius:14px;background:#fff;overflow:hidden;padding:14px}
.co-terms .t-list{display:block;border:1px solid var(--ln3);border-radius:12px;overflow:hidden}
/* TR-99: пункт выдачи — это <div role="button">, а не <button>, и общее правило
   button{cursor:pointer} его не накрывает. Курсор оставался стрелкой, то есть
   плитка не выглядела нажимаемой вовсе. Наведение подсвечивает рамку — тем же
   приёмом, что и остальные выборы на странице (.dd-btn:hover). */
.co-terms .t-one{display:flex;align-items:center;gap:12px;width:100%;padding:13px 16px;
  border:none;border-top:1px solid var(--ln3);border-radius:0;background:#fff;text-align:left;
  font-size:14.5px;line-height:1.45}
.co-terms .t-list .t-one:first-child{border-top:none}
.co-terms .t-one:nth-child(even){background:#FBFCFE}
.co-terms .t-one .a{flex:1 1 auto;min-width:0;text-wrap:pretty}
.co-terms .t-one .mk{width:22px;height:22px;border-radius:7px;flex-shrink:0;display:flex;
  align-items:center;justify-content:center;background:var(--ln3);opacity:0}
.co-terms .t-one:hover{background:var(--ac-c)}
.co-terms .t-one.on{background:var(--ac-c)}
.co-terms .t-one.on .mk{background:var(--ac);opacity:1}

.co-terms .t-solo{background:#fff;border:1.5px solid var(--ln);border-radius:12px;padding:11px 14px;font-size:14.5px;line-height:1.45}
/* TR-102: карта живёт в СВОЁМ слое, иначе она накрывает подсказку города.
   Leaflet раскладывает свои панели по z-index 400 и выше, а выпадающий список
   стоит на 200 — пока у карты нет своего слоя, эти числа сравниваются напрямую,
   и карта побеждает: список городов уходил ПОД неё нижним краем. `z-index:0` на
   позиционированном блоке запирает панели внутри него, и порядок решается уже
   между картой и списком, а не между их потрохами. */
.co-terms .t-map-box .js-map{position:relative;z-index:0;
  height:280px;border-radius:14px;border:1.5px solid var(--ln);overflow:hidden;background:var(--bg3)}
/* TR-100: адрес выбранного терминала — единственная строка, которая говорит,
   КУДА человек поедет, а стояла она серым текстом под картой и терялась.
   Плашка тем же языком, что и выбранная плитка списка (.t-one.on): подложка
   ac-c, рамка ac, — новый приём тут не нужен, нужен уже знакомый. */
.co-terms .t-picked{display:inline-block;margin-top:10px;font-size:14px;color:var(--ink2);
  background:var(--ac-c);border:1px solid var(--ac);border-radius:11px;padding:8px 13px;line-height:1.4}
.co-terms .t-picked b{color:var(--ac);font-weight:700}
/* Точка терминала на карте — простой кружок, а не картинка Leaflet: капля с
   острием на 18 пикселях читалась как клякса.

   TR-100: выбранную от невыбранной отделяет РАЗМЕР, а не оттенок. Раньше разница
   была в четырёх пикселях и в том, что залито: обе читались на карте как «синяя
   точка», и понять, какая выбрана, было нельзя — особенно когда точки стоят
   рядом. Теперь невыбранная это маленький кружок 16 пикселей, выбранная —
   крупная заливка на все 26 с белым кольцом, видная и на тёмном участке карты. */
.tb-pin span{display:block;width:10px;height:10px;margin:5px;border-radius:50%;
  background:#fff;border:3px solid var(--ac);box-shadow:0 1px 3px rgba(16,21,31,.35)}
.tb-pin.on span{width:18px;height:18px;margin:0;background:var(--ac);border:4px solid #fff;
  box-shadow:0 0 0 2px var(--ac),0 3px 10px rgba(16,21,31,.45)}
.tb-pin:hover span{border-color:var(--ac-h)}
/* У выбранной метки белое кольцо — часть её опознавания, наведение его не съедает. */
.tb-pin.on:hover span{border-color:#fff}
.leaflet-container{font:inherit}
/* Подпись об авторстве карты — тихая: она обязательна по лицензии данных
   OpenStreetMap, но кричать ей незачем. Своя реклама Leaflet вместе с флагом
   выключена в коде (prefix: false). */
.leaflet-control-attribution{background:rgba(255,255,255,.75);font-size:10.5px;color:var(--ink4);
  padding:1px 6px;border-radius:6px 0 0 0}
.leaflet-control-attribution a{color:var(--ink4)}
.co-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.co-note{margin-top:12px;font-size:14px;color:var(--ink3);line-height:1.55}
/* остаток символов в комментарии (TR-81) — появляется только под конец */
.fld-left{margin-top:6px;font-size:12.5px;color:var(--ink3);text-align:right}
.co-dates{margin-top:22px}
.co-dates .h5{margin-bottom:11px}
.sw-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;background:#fff;border-radius:14px;padding:16px 18px;margin-top:16px}
.sw-row.ac{background:var(--ac-c);border:1px solid var(--ac-b2)}
/* TR-140: базис 220 не оставлял тумблеру места на телефоне — он оставался один
   на первой строке, а надпись уезжала под него, и строка читалась как сломанная. */
.sw-row .tx{flex:1 1 150px;min-width:0}
.sw-row .tx b{font-size:15.5px}
.sw-row .tx small{display:block;font-size:14px;color:var(--ink3);line-height:1.5}
/* Сумма держится правого края и когда переносится на свою строку — иначе она
   встаёт под тумблером и читается как отдельная подпись, а не как размер скидки. */
.sw-row .sum{font-size:15px;white-space:nowrap;color:var(--ok);margin-left:auto}
.sw{width:46px;height:27px;border-radius:14px;background:var(--ln4);padding:3px;flex-shrink:0;display:block}
.sw .knob{width:21px;height:21px;border-radius:50%;background:#fff;display:block;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.sw.on{background:var(--ac)}
.sw.on .knob{margin-left:19px}
.co-sum{background:var(--bg2);border-radius:20px;padding:26px}
/* Значение в итогах бывает не числом, а целой фразой: «Срок и стоимость доставки
   уточнит менеджер при подтверждении заказа» вместо даты, когда перевозчик цену
   не назвал. Общее правило .row2 b запрещает перенос (чтобы не рвалась цена), и
   такая фраза уезжала за правый край карточки. Здесь перенос разрешаем, а цену
   от разрыва бережёт неразрывный пробел перед знаком рубля (money в
   tb-checkout.js) — он и раньше был неразрывным внутри числа, но не перед «₽».
   min-width:0 обязателен: без него флекс-элемент не сжимается ниже содержимого,
   и перенос не спасёт. */
.co-sum .row2{align-items:baseline}
.co-sum .row2 b{white-space:normal;overflow-wrap:break-word;min-width:0}
.co-sum .rows{display:flex;flex-direction:column;gap:11px;padding-bottom:18px;border-bottom:1px solid var(--ln2)}
.co-sum .rows+.rows{padding-top:18px}
.co-sum .total{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:18px 0 4px}
.co-sum .total>span:first-child{font-size:16px;font-weight:700}
.co-sum .total>span:last-child{font-size:30px;font-weight:800;letter-spacing:-1px}
.co-sum .total-n{font-size:13.5px;color:var(--ink3);margin-bottom:18px}
.co-sum .note{font-size:13px;color:var(--ink3);margin-top:12px;line-height:1.5}
/* TR-73: чего не хватает для заказа. Не красная тревога — человек ещё ничего не
   сделал неправильно, он просто не дозаполнил форму; красным подсвечивается уже
   ошибка в поле (.fld-bad). */
.co-need{margin-top:10px;font-size:13.5px;color:var(--ink2);line-height:1.5}
/* TR-75: подсказка города при доставке по России. Сам список — общие .dd-list и
   .dd-opt: это тот же по смыслу выбор из готового набора, что и остальные меню
   сайта, и рисовать ему второй вид значило бы завести второй язык интерфейса.
   Своего здесь только строка региона (без неё 23 одноимённых города в справочнике
   неразличимы) и перенос строки — названия вроде «Петропавловск-Камчатский» в
   одну строку не влезают. */
.sug{position:relative;min-width:0}
.sug .dd-list{width:auto;max-width:none}
.sug .dd-opt{white-space:normal;line-height:1.3;color:var(--ink)}
.sug .dd-opt .r{display:block;font-size:12.5px;font-weight:400;color:var(--ink4);margin-top:2px}
.sug-none{padding:10px 12px;font-size:13.5px;color:var(--ink3);line-height:1.45}
.co-guard{margin-top:18px;padding-top:16px;border-top:1px solid var(--ln2);display:flex;gap:9px;align-items:flex-start;
  font-size:13.5px;color:var(--ink2);line-height:1.5}
.co-guard svg{color:var(--ac)}
.done{max-width:720px}
.done-i{width:64px;height:64px;border-radius:20px;background:var(--ok);display:flex;align-items:center;
  justify-content:center;margin-bottom:20px;color:#fff}
/* Значок спорить с заголовком не должен: зелёная галочка над «Заказ ждёт оплаты»
   говорит громче текста, и верят ей (TR-70). Оба значка лежат в разметке, скрипт
   переключает их классом — SVG живёт у генератора, а не строкой в скрипте. */
.done-i i{display:none;align-items:center;justify-content:center}
.done-i .di-ok{display:flex}
.done-i.is-wait{background:var(--amber)}
.done-i.is-wait .di-ok{display:none}
.done-i.is-wait .di-wait{display:flex}
.done-i i svg{width:34px;height:34px}
.done-rows{background:var(--bg2);border-radius:18px;padding:20px 24px;display:flex;flex-direction:column;gap:12px;margin:24px 0}
/* TR-217: «этот заказ ваш?» — четыре цифры телефона. Форма стоит НА МЕСТЕ строк
   заказа: пока не проверили, показывать нечего. Оформлена как поле поиска на
   «Где мой заказ» (.tk-form) — проверка там и тут одна и та же, и выглядеть она
   должна одинаково, а не двумя разными формами про одно. */
.done-ask{background:var(--bg2);border:1px solid var(--ln3);border-radius:18px;padding:20px 24px;margin:24px 0}
.done-ask label{display:block;font-size:13.5px;font-weight:700;color:var(--ink3);margin-bottom:9px}
.done-ask .row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.done-ask .fld{flex:0 1 150px;width:auto;min-width:0;font-variant-numeric:tabular-nums;
  letter-spacing:4px;text-align:center;height:54px}
.done-ask .btn{flex:0 0 auto;height:54px;padding:0 24px}
.done-ask .btn:disabled{opacity:.55;cursor:default}
.done-ask .err{margin-top:12px;font-size:14px;color:var(--red-t);line-height:1.5;text-wrap:pretty}
.done-btns{display:flex;flex-wrap:wrap;gap:10px}
.done-note{margin-top:18px;font-size:14px;color:var(--ink3);line-height:1.6}
/* Состояние оплаты на странице «Заказ принят». Цвет ставит скрипт классом
   is-paid / is-wait: до ответа CRM утверждать «оплачено» нельзя. */
.done-pay{border-radius:14px;padding:14px 18px;margin:-6px 0 24px;display:flex;flex-direction:column;
  gap:4px;background:var(--bg2);font-size:15px;line-height:1.55}
.done-pay span{font-size:14px;color:var(--ink3)}
.done-pay.is-paid{background:rgba(22,163,74,.10);color:var(--ok)}
.done-pay.is-paid span{color:var(--ink2)}
.done-pay.is-wait{background:rgba(234,179,8,.12)}   /* тот же --amber, прозрачностью */

/* ── проза ── */
.prose{font-size:16.5px;line-height:1.75;color:var(--ink2);max-width:760px;overflow-wrap:break-word}
.prose.wide{max-width:none}
.prose h2{font-size:22px;font-weight:800;letter-spacing:-.5px;color:var(--ink);margin:30px 0 12px;text-wrap:pretty}
.prose h2:first-child{margin-top:0}
.prose p{margin-bottom:14px;text-wrap:pretty}
.prose a{font-weight:600}
/* TR-53: списки в прозе. Глобальный сброс снимает отступ у ul, и маркеры уезжали за край */
.prose ul{margin:0 0 14px;padding-left:22px;list-style:disc}
.prose li{margin-bottom:8px;text-wrap:pretty}
.prose li::marker{color:var(--ln4)}

/* ── документ с боковой врезкой: политика и всё, что придёт после неё (TR-53) ── */
/* TR-200: страница политики была помечена тем же классом, что и всплывающее
   окно с документом, и унаследовала типографику окна: кегль 15,5 против 16,5 у
   соседних текстовых страниц, заголовки разделов 18 точек — всего на 2,5 точки
   крупнее текста. Восемь экранов подряд, глазу не за что зацепиться. Колонка
   страницы теперь своя (`.doc-col`), окно осталось со своим `.doc-body`. */
.doc-col,.doc-body{flex:2.2 1 400px;min-width:0}
.doc-side{flex:1 1 260px;min-width:0}
/* Метка «сюда вписать реквизиты». Видна намеренно: незаполненный документ должен
   бросаться в глаза, а не тихо уехать на прод под видом готового. */

/* ── футер ── */
.footer{background:var(--dark);color:rgba(255,255,255,.62);margin-top:70px;padding:48px 0 26px}
.footer-grid{display:flex;flex-wrap:wrap;gap:36px;margin-bottom:36px}
.footer-me{flex:2 1 280px;min-width:0}
/* Логотип-плашка общий у обоих футеров — полного и минимального (TR-76). */
.footer-me .lg,.fb-me .lg{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.footer-me .lg i,.fb-me .lg i{width:36px;height:36px;border-radius:9px;background:var(--ac);color:#fff;display:flex;align-items:center;
  justify-content:center;font-weight:800;font-size:14px;font-style:normal}
.footer-me .lg b,.fb-me .lg b{font-weight:800;font-size:16px;color:#fff}
.footer-me p{font-size:14.5px;line-height:1.65;max-width:340px;text-wrap:pretty}
.footer-me .tel{display:inline-block;margin-top:16px;font-size:20px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.footer-me .adr{font-size:14px;margin-top:4px}
.footer-col{flex:1 1 160px;min-width:0}
/* TR-154: заголовки колонок подвала читались с контрастом 3,81, нижняя строка про
   оферту и копирайт — 4,07. Подвал стоит на всех 82 страницах. */
.footer-col .h{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:rgba(255,255,255,.62);margin-bottom:13px}
.footer-col nav{display:flex;flex-direction:column;gap:9px;font-size:14.5px}
.footer-col a{color:rgba(255,255,255,.72)}
.footer-col a:hover{color:#fff}
/* TR-184: колонки подвала — <details>. На компьютере они всегда раскрыты и
   выглядят ровно как раньше: маркер убран, шеврон спрятан, курсор обычный.
   Свораниваются они только на телефоне, в медиа-запросе ниже. */
.footer-col>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px}
.footer-col>summary::-webkit-details-marker{display:none}
.footer-col .f-ch{display:none;flex:none;transition:transform .18s}
@media (min-width:761px){.footer-col{display:block}}
@media (max-width:760px){
  .footer-col{flex:1 1 100%;border-top:1px solid rgba(255,255,255,.12)}
  .footer-col>summary{cursor:pointer;padding:14px 0;margin:0;font-size:13px;color:rgba(255,255,255,.82)}
  .footer-col .f-ch{display:block}
  .footer-col[open] .f-ch{transform:rotate(180deg)}
  .footer-col>nav{padding:2px 0 16px}
  .footer-grid{gap:0;margin-bottom:26px}
  .footer-me{margin-bottom:28px}
}
@media (prefers-reduced-motion:reduce){.footer-col .f-ch{transition:none}}
.footer-bot{border-top:1px solid rgba(255,255,255,.1);padding-top:20px;display:flex;flex-wrap:wrap;gap:16px;
  justify-content:space-between;font-size:13px;color:rgba(255,255,255,.6)}

/* TR-76: футер оформления заказа. Ни одной ссылки в разделы — на этой странице
   человек уже выбрал товар, а уйдя по любой из них, вернётся к пустой форме:
   корзины на сайте нет, товар живёт в адресе страницы. Остались телефон, адрес
   и часы — то, ради чего в футер и смотрят посреди оформления. */
.footer-bare{margin-top:56px;padding:34px 0 22px}
.fb-grid{display:flex;flex-wrap:wrap;gap:28px 44px;justify-content:space-between;margin-bottom:24px}
.fb-me{flex:1 1 360px;min-width:0}
.fb-me p{font-size:14px;line-height:1.6;max-width:430px;text-wrap:pretty}
.fb-c{flex:0 1 260px;min-width:0}
.fb-c .tel{font-size:20px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.fb-c .adr{font-size:14px;margin-top:4px}
.fb-c .h{font-size:13.5px;color:rgba(255,255,255,.42);margin-top:6px}
.fb-bot{border-top:1px solid rgba(255,255,255,.1);padding-top:18px;display:flex;flex-wrap:wrap;gap:8px 16px;
  justify-content:space-between;font-size:13px;color:rgba(255,255,255,.42)}

/* ── тост, модалка, лайтбокс ── */
/* TR-152: ширина окошку не задана, а при left:50% место под него начинается от
   середины экрана — на телефоне это ровно половина ширины, и max-width ниже не
   срабатывал никогда: текст рассыпался на 4-8 строк и накрывал то, что человек
   читает. Держим оба края: содержимое по-прежнему сжимается по себе и стоит по
   центру, но расти может до всей ширины. Заодно уходит translateX(-50%), который
   гасила анимация tin (её конечный кадр — transform:none), и после появления
   окошко сдвигалось вправо. */
.toast{position:fixed;left:16px;right:16px;bottom:28px;margin-inline:auto;width:fit-content;
  background:var(--dark);color:#fff;padding:14px 22px;
  border-radius:13px;font-size:15px;font-weight:600;z-index:1300;box-shadow:0 12px 40px rgba(14,22,38,.3);
  animation:tin .2s ease;display:none;align-items:center;gap:11px;max-width:calc(100vw - 32px)}
.toast.on{display:flex}
.toast i{width:22px;height:22px;border-radius:7px;background:var(--ok);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.toast.bad i{background:var(--red)}
/* TR-108: пока открыт поп-ап, страница под ним стоит. `position:fixed` на body,
   а не `overflow:hidden`: последнее на iOS свайп пальцем не останавливает.
   Сдвиг `top` и отступ под исчезнувшую полосу прокрутки ставит tb-site.js. */
body.is-locked{position:fixed;left:0;right:0;width:100%;overflow:hidden}
.modal{position:fixed;inset:0;background:rgba(14,22,38,.55);z-index:1200;display:none;align-items:center;
  justify-content:center;padding:20px}
.modal.on{display:flex}
/* TR-153: раньше прокручивалась сама коробка, и крестик, прибитый к её верху,
   уезжал вместе с текстом: в политике после 900 точек он оказывался на 827 точек
   выше края экрана, а в форме на невысоком экране (390x460, как с открытой
   клавиатурой) — на 99. Теперь коробка держит высоту, а прокручивается только
   внутренность: заголовок и крестик всегда на месте, текст под них не подлезает. */
.modal-box{background:#fff;border-radius:20px;padding:28px;width:100%;max-width:440px;position:relative;
  animation:tin .2s ease;max-height:90vh;display:flex;flex-direction:column;overflow:hidden}
.modal-scroll,.doc-box .doc-body{overflow-y:auto;min-height:0;overscroll-behavior:contain}
.modal-box>h3{flex:none}
.modal-box h3{font-size:21px;font-weight:800;letter-spacing:-.5px;margin-bottom:6px;padding-right:28px}
.modal-box .s{font-size:14.5px;color:var(--ink3);line-height:1.55;margin-bottom:18px}
.modal-x{position:absolute;right:16px;top:14px;z-index:2;font-size:22px;line-height:1;color:var(--ink3);padding:4px 8px}
.modal-f{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;position:relative}
.modal-box .note{font-size:13px;color:var(--ink3);line-height:1.5;margin-top:12px}
/* TR-330: на айфоне окно «Купить в 1 клик» не помещалось — кнопка «Отправить»
   обрезалась нижним краем. 90vh у Safari считается от экрана БЕЗ панелей
   браузера, то есть больше видимого; dvh — ровно видимое. Плюс на телефоне
   заголовок с названием товара занимал три строки кеглем 21 — ужат до двух. */
.modal-box{max-height:90dvh}
@media (max-width:620px){
  .modal{padding:12px}
  .modal-box{max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px)}
  .modal-box h3{font-size:18px;line-height:1.3;letter-spacing:-.3px}
  .modal-box .s{font-size:14px;line-height:1.5;margin-bottom:12px}
  .modal-f{gap:8px;margin-bottom:10px}
  .modal-box .note{margin-top:8px}
}
/* TR-106: поп-ап документа — та же модалка, только шире и с текстом внутри.
   Отдельная ширина нужна: политика это страница текста, и в колонке под форму
   заявки она читается как лента из двух слов в строке. */
.doc-box{max-width:720px;max-height:86vh;padding-top:24px}
.doc-box>h3{padding-bottom:10px;border-bottom:1px solid var(--ln2);margin-bottom:14px}
/* Мельче обычного — намеренно и ТОЛЬКО в окне: документ должен поместиться в
   рамку поверх страницы. На самой странице политики действует .prose. */
.doc-box .doc-body{font-size:15.5px;line-height:1.7;max-width:none}
.doc-box .doc-body h2{font-size:18px;margin:22px 0 8px}
.doc-box .doc-body p{margin-bottom:12px}

/* Оглавление документа (TR-200): десять разделов подряд без единой зацепки —
   человек листал восемь экранов, не понимая, далеко ли конец. */
.doc-toc{border:1.5px solid var(--ln);border-radius:16px;padding:18px 20px;margin-bottom:26px}
.doc-toc .h{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
  color:var(--ink3);margin-bottom:12px}
.doc-toc ol{list-style:none;counter-reset:toc;display:flex;flex-direction:column;gap:9px;margin:0;padding:0}
.doc-toc li{counter-increment:toc;display:flex;gap:10px;font-size:15px;line-height:1.4;margin:0}
.doc-toc li::before{content:counter(toc) '.';flex:none;color:var(--ink4);font-variant-numeric:tabular-nums}
.doc-toc a{color:var(--ink2);font-weight:600}
.doc-toc a:hover{color:var(--ac)}
/* Якорь не должен уезжать под липкую полосу на телефоне. */
.prose h2[id]{scroll-margin-top:72px}
.lb{position:fixed;inset:0;background:rgba(14,22,38,.88);z-index:1250;display:none;align-items:center;
  justify-content:center;padding:32px}
.lb.on{display:flex}
.lb img{max-width:100%;max-height:100%;object-fit:contain;background:#fff;border-radius:16px;padding:20px}
/* TR-163: на телефоне «увеличить фото» показывало снимок МЕНЬШЕ, чем он был в
   карточке: 32 точки отступа у тёмного окна плюс 20 точек белого поля внутри
   картинки съедали больше, чем давал полный экран. Снимок и так на белом фоне —
   поле внутри не нужно, а окну хватает узкой рамки. */
@media (max-width:620px){.lb{padding:12px}.lb img{padding:0}}
.lb-x{position:absolute;right:24px;top:20px;font-size:26px;color:#fff;padding:6px 12px}

/* ── полоса заказа внизу экрана (TR-129) ──
   На телефоне карточка товара длиной в четырнадцать экранов, и кнопка заказа
   остаётся где-то в самом верху: чтобы заказать, надо было пролистать обратно.
   Полоса держит цену и кнопку под рукой на всей длине страницы. На десктопе её
   нет — там панель покупки и так стоит рядом с товаром и не уезжает.

   Отступ внизу страницы резервируется СРАЗУ, а не когда полоса появится:
   иначе последняя строка подвала пряталась бы под ней ровно в тот момент,
   когда человек до неё долистал. safe-area — под скруглённый низ телефона.

   TR-365: вместо белой полосы с ценой — одна кнопка, почти касающаяся краёв
   экрана (поле 10), чуть ниже главной ступени (48 против 53) и в две строки:
   «Оформить заказ» и мельче «Безопасная и быстрая доставка». Подложки нет,
   поэтому сама обёртка нажатия не ловит — иначе полосой в 10 точек по бокам
   она съедала бы нажатия по странице под собой. */
.buybar{display:none}
@media (max-width:900px),(hover:none) and (pointer:coarse){
  body.has-buybar{padding-bottom:calc(68px + env(safe-area-inset-bottom))}
  .buybar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:200;pointer-events:none;
    padding:0 10px calc(10px + env(safe-area-inset-bottom))}
  .buybar[hidden],body.is-menu-open .buybar{display:none}
  .buybar .buybar-btn{pointer-events:auto;display:flex;flex-direction:column;gap:1px;width:100%;
    min-height:48px;padding:7px 16px;line-height:1.2;box-shadow:0 8px 24px rgba(0,82,222,.30)}
  .buybar-btn b{font-size:15.5px;font-weight:800}
  /* Подпись на синем — сплошной #D7E4FF, как на главной: контраст не ниже 4,5. */
  .buybar-btn span{font-size:12px;font-weight:600;color:#D7E4FF}
}

/* ── адаптив ── */
@media (max-width:900px){
  .co-side{position:static}
  .why6{gap:20px}

  /* ── шторка фильтров (TR-142) ── */
  .fbtn{display:inline-flex;align-items:center;flex:none;gap:6px;border:1.5px solid var(--ln4);border-radius:10px;
    background:#fff;padding:8px 12px;font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap}
  .fbtn-n{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 5px;
    border-radius:6px;background:var(--ac);color:#fff;font-size:12px;font-weight:800}
  .fbtn-n[hidden]{display:none}
  /* Строка над сеткой прилипает к верху: в ней и число найденного, и вход в
     фильтры — после прокрутки не надо возвращаться наверх страницы. */
  .cat-bar{position:sticky;top:0;z-index:120;background:#fff;margin:0 -24px 14px;padding:8px 24px;
    border-bottom:1px solid var(--ln2);gap:8px;flex-wrap:nowrap}
  /* В строке остаются только кнопка «Фильтры» и число найденного — сортировку
     tb-site.js переносит в шторку. */
  .cat-bar .cnt{font-size:14.5px;white-space:nowrap;margin-left:2px}
  /* Сортировка внутри шторки — такой же группой, как «Линейка» и «Корпус». */
  .fbox .srt{display:block;margin-top:18px}
  .fbox .srt>span{display:block;font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
    color:var(--ink3);margin-bottom:9px}
  /* Прячем только подпись «Сортировка» — это ПРЯМОЙ потомок .srt. Без `>`
     правило гасило и `.dd-val` внутри выпадающего списка, и на месте выбранного
     значения оставалась пустая кнопка с галочкой. */
  .cat-bar .srt>span{display:none}

  /* В потоке от колонки остаётся только блок подбора, и он встаёт ПОД сеткой. */
  .cat-side{position:static;max-width:none;min-width:0;flex:1 1 100%;order:3}
  .cat-main{order:2}

  .fsheet-bg{display:block;position:fixed;inset:0;background:rgba(14,22,38,.5);z-index:1220}
  .fsheet-bg[hidden]{display:none}
  .fsheet{position:fixed;left:0;right:0;bottom:0;z-index:1230;max-height:86vh;
    display:flex;flex-direction:column;background:#fff;border-radius:20px 20px 0 0;
    box-shadow:0 -10px 40px rgba(14,22,38,.22);transform:translateY(101%);transition:transform .22s ease;
    padding:0 20px calc(14px + env(safe-area-inset-bottom))}
  .fsheet.on{transform:none}
  .fsheet-hd{display:flex;align-items:center;justify-content:space-between;padding:16px 0 12px;
    border-bottom:1px solid var(--ln2);flex:none}
  .fsheet-hd b{font-size:18px;font-weight:800;letter-spacing:-.4px;margin-right:auto}
  /* «Сбросить» переезжает сюда из шапки панели: она на телефоне скрыта, а без
     сброса из шторки снять фильтры было бы нечем. */
  .fsheet-hd .rst{margin-right:14px}
  .fsheet-x{font-size:26px;line-height:1;color:var(--ink3);padding:2px 8px}
  /* Прокручивается только середина шторки: шапка с крестиком и кнопка «Показать»
     остаются на месте, как в поп-апах сайта (TR-153). */
  .fsheet .fbox{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
    border:0;padding:16px 0;border-radius:0}
  .fsheet .fbox .hd{display:none}
  .fsheet-ft{display:block;flex:none;padding-top:12px;border-top:1px solid var(--ln2)}
}

/* ── шапка на телефоне (TR-129) ──
   Было три ряда: логотип, поле поиска во всю ширину, и телефон с режимом
   работы, прижатые ВПРАВО — при том что всё остальное на странице выровнено по
   левому краю. Владелец так и сказал: «шапка какая-то странная, всё в разных
   местах, не по сетке». Плюс на экране в 844 точки эти три ряда съедали 370.

   Стало два ряда по сетке: логотип и телефон в одной строке (телефон —
   действие, ему правый край как раз к месту, но теперь он стоит на одной линии
   с логотипом, а не сам по себе), поиск во всю ширину под ними. Режим работы
   уходит: он есть в подвале и на «Контактах», а в шапке телефона занимал целую
   строку ради справки, за которой сюда не приходят. */
/* TR-129: значение в строке «ключ — значение» на телефоне переносится.
   `white-space:nowrap` правильна для цены («от 300 ₽» не должна разрываться),
   но в тех же строках стоят фразы вроде «на терминале КИТ в вашем городе» —
   на экране 360 точек такая фраза не помещалась и вылезала за карточку на 12
   точек. Ниже 620 разрешаем перенос: короткую цену браузер и так не разорвёт,
   для этого ей хватает места. На широком экране всё как было. */
@media (max-width:620px){
  .row2{flex-wrap:wrap}
  .row2 b{white-space:normal}
}

/* Строка под заголовком товара — «Линейка · Артикул · отзывы · вопросы».
   На широком экране она умещается в одну строку и точки-разделители на месте.
   На телефоне она переносится, и точки оставались болтаться в начале и в конце
   строк — ровно то «не по сетке», на которое жаловался владелец (TR-129).
   Точки убираем, элементы разносим зазором. */
@media (max-width:620px){
  .prod-meta{gap:6px 16px;margin-bottom:22px}
  .prod-meta i{display:none}
}

/* ── Телефон: шапка (TR-366, TR-367) ──
   Одна строка: слева три полоски, справа номер. Логотипа на телефоне нет —
   вместо него кнопка меню (просьба владельца); поле поиска уехало в раскрытое
   меню. Прежние ужимки логотипа под 360 и 320 точек (TR-131) вместе с ним и
   ушли: номеру теперь хватает места на любой ширине. */
@media (max-width:620px){
  .hdr-in{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 14px;padding:10px 0;align-items:center}
  .hdr-in .logo,.hdr-in .search{display:none}
  .hdr-burger{display:flex;align-items:center;justify-content:center;grid-column:1;grid-row:1;
    width:44px;height:44px;border:1.5px solid var(--ln);border-radius:11px;background:#fff;color:var(--ink);
    cursor:pointer;transition:background-color .18s,border-color .18s,color .18s}
  .hdr-burger svg{width:22px;height:22px}
  .hdr-burger[aria-expanded="true"]{background:var(--ac-s);border-color:var(--ac-b);color:var(--ac)}
  .hdr-ph{grid-column:2;grid-row:1;margin-left:0}
  .hdr-ph span{display:none}
}
@media (max-width:620px) and (prefers-reduced-motion:reduce){.hdr-burger{transition:none}}

@media (max-width:620px){
  .sec,.sec-s{padding-top:44px}
  .pane,.facts,.co-box,.co-sum{padding:22px 20px}
  .trade,.dark,.cta-band{padding:26px 22px}
  .trade h2{font-size:26px;letter-spacing:-.7px;line-height:1.55}
  .box,.finder{padding:20px}
  .hdr-ph a{font-size:16px}
  .cat-facts{grid-template-columns:1fr}
  /* TR-146: на телефоне ровно две колонки, а не «сколько влезет по 155 точек».
     Порог 155 требовал экрана не уже 370 точек, и самый ходовой Android (360)
     не дотягивал 10 точек: каталог схлопывался в одну колонку, фото раздувалось
     со 139 точек до 286, а страница вырастала вдвое — «Продукция завода» с
     14 375 точек до 27 551 (больше 32 экранов вместо 17). Жёсткие две колонки
     держат одинаковую сетку на всех телефонах, от 320 до 620. */
  .prods{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .pcard{padding:12px}
  .pcard .pr b{font-size:18px}
  .modal-box{padding:22px 20px}
  .desc-2col,.rev-2col{gap:26px}
  /* TR-172: на телефоне у главного снимка поле в 22 точки съедало 44 из 342 —
     фотография выходила 296 точек, мельче, чем повтор ниже по странице. */
  .gal-big{padding:10px}
  .tabs{gap:18px}
  .dark-full{padding:36px 0}
  .co-item .pr{text-align:left}
}

/* ── Пальцем, а не мышью (TR-64) ──
   На телефоне 27 ссылок и кнопок из 81 на главной были ниже 24 пикселей —
   рекомендованного минимума: телефон в шапке 138×20, названия в карточках
   139×22, ссылки в подвале 342×22. Промахнуться по такому легко, а телефон
   в шапке — вообще главное действие мобильного сайта.

   Условие двойное: узкий экран ИЛИ устройство без мыши. Только по ширине —
   мимо планшетов в альбомной, только по pointer — мимо узкого окна на
   десктопе, где страница уже свёрстана по-мобильному.

   Растим ТОЛЬКО самостоятельные ссылки и кнопки. Ссылки внутри абзацев
   (.prose a, .note a, .foot a) не трогаем: подчёркнутое слово в предложении
   поисковики из этого правила исключают, а лишний отступ разорвал бы строку. */
@media (max-width:900px), (hover:none) and (pointer:coarse){
  /* телефон в шапке — главная кнопка, ей отдельная высота */
  .hdr-ph a{display:inline-block;padding:7px 0}
  .pcard .nm{display:inline-block;padding:3px 0;margin-bottom:4px}
  /* «Стеклоомывающая» длиннее, чем карточка на телефоне (149 против 139
     точек), и слово торчало наружу. Переносим — но только такое, которое
     иначе не помещается (TR-129). */
  .pcard .nm{overflow-wrap:break-word}
  /* Ссылка на линейку под заголовком товара — переход, а не слово в тексте:
     ей тоже нужна высота под палец. */
  .prod-meta a{display:inline-block;padding:4px 0}
  .sec-h .more{display:inline-block;padding:5px 0}
  .crumbs a{display:inline-block;padding:4px 0}
  footer nav a{display:inline-block;padding:5px 0}
  .prod-meta .lnk,.prod-mid .lnk,.fbox .rst{display:inline-block;padding:4px 0}
  /* TR-129: ссылка на товар в карточке отзыва и предупреждение о подделках —
     тоже переходы, а не слова в предложении. */
  .rev-car a,.warn-a{display:inline-block;padding:4px 0}
  /* Номер телефона — действие в любом месте страницы, а не просто текст.
     TR-129: display здесь inline-FLEX, а не inline-block. Правило сильнее
     одиночного класса (`.tel-big` — 0,1,0 против 0,1,1 у селектора по
     атрибуту), и inline-block сносил у таких ссылок раскладку flex вместе с
     её зазором: на «Контактах» значок трубки прилипал к номеру вплотную.
     Ссылке из одного текста inline-flex ничем не отличается от inline-block —
     она и раньше не переносилась по словам.

     TR-161: правило лечит «голый» номер в тексте, но било и по кнопкам — у него
     специфичность выше одиночного класса, поэтому padding:4px 0 перебивал
     собственные отступы .btn-white, и на 21 странице белая плашка «позвонить»
     обтягивала номер вплотную (152,8x32,8 против 181,5x56,8 у соседней кнопки).
     Кнопки исключаем: у них свои отступы и своя раскладка. */
  a[href^="tel:"]:not(.btn):not(.btn-white):not(.btn-line):not(.btn-soft):not(.btn-onDark):not(.hm-call-tel){
    display:inline-flex;align-items:center;padding:4px 0}
  /* бегунок ёмкости берут пальцем, а не мышью — растим до рекомендованных 26px */
  .frange-tr{height:28px}
  .frange-tr::before,.frange-fill{top:12px}
  .frange-tr input[type=range]{height:28px}
  .frange-tr input[type=range]::-webkit-slider-runnable-track{height:28px}
  .frange-tr input[type=range]::-moz-range-track{height:28px}
  .frange-tr input[type=range]::-webkit-slider-thumb{width:26px;height:26px}
  .frange-tr input[type=range]::-moz-range-thumb{width:26px;height:26px}
}

/* ═══════════ TR-136: внутренние страницы по макету design_handoff_internal_pages ═══════════
   Токены менять не пришлось — сайт и макет собраны на одной палитре (--ac #0052DE,
   --ink #10151F, --dark #0E1626 и далее). Ниже только новые раскладки.
   Заголовок секции в макете 28px/-.8px, у сайта `.sec-t` — 26px/-.7px; чтобы не
   двигать старые страницы, размер макета живёт отдельным классом `.sec-t2`. */
.sec-t2{font-size:28px;font-weight:800;letter-spacing:-.8px;line-height:1.2;text-wrap:pretty}
.p16{font-size:16px;color:var(--ink2);line-height:1.65;text-wrap:pretty}
.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}

/* ── Контакты ── */
.ct-top{padding-bottom:0}
.ct-hero{display:flex;flex-wrap:wrap;gap:24px 44px;align-items:center}
.ct-hero-l{flex:1.15 1 420px;min-width:0;max-width:620px}
.ct-hero-r{flex:1 1 320px;min-width:280px;max-width:460px}
.ct-status{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
  border:1.5px solid var(--ln);border-radius:14px;padding:8px 16px 8px 13px}
.ct-status .dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;background:var(--ok);
  animation:tbpulse 2.4s ease-out infinite}
.ct-status.is-off .dot{background:#98A2B3;animation:none}
.ct-status b{font-size:14.5px;white-space:nowrap}
.ct-status .sub{font-size:14px;color:var(--ink3)}
@keyframes tbpulse{0%{box-shadow:0 0 0 0 rgba(11,122,67,.45)}70%{box-shadow:0 0 0 9px rgba(11,122,67,0)}100%{box-shadow:0 0 0 0 rgba(11,122,67,0)}}
.ct-h1{font-size:clamp(28px,3.4vw,40px);line-height:1.14;letter-spacing:-1.2px;margin:14px 0 12px}
.ct-lead{font-size:17px;color:var(--ink2);line-height:1.6;max-width:540px;text-wrap:pretty}
.ct-tel{margin:20px 0 6px;letter-spacing:-1px}
.ct-tel-sub{font-size:14px;color:var(--ink3);font-variant-numeric:tabular-nums}
.ct-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.ct-mail{margin-top:14px;font-size:14px;color:var(--ink3)}
.ct-mail a{font-weight:600}
/* Заглушка под фото входа: снимка ещё нет, а дыру в раскладке оставлять нельзя.
   Диагональная штриховка — тот же приём, что в макете (pattern tbstripe). */
/* TR-190: заглушка в косую полоску вместо снимка крыльца снята — теперь на её
   месте живой блок «Как найти вход». Правила .ct-photo оставлены: как только
   фотография появится, вернуть её сюда будет одной строкой разметки. */
.ct-photo{aspect-ratio:4/3;border-radius:18px;border:1.5px solid var(--ln);position:relative;
  display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--bg3)}
.ct-photo img{width:100%;height:100%;object-fit:cover}
.ct-photo-cap{font-size:13.5px;color:var(--ink3);margin-top:9px;line-height:1.5}
.ct-howto{border:1.5px solid var(--ln);border-radius:18px;padding:20px 22px}
.ct-facts{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.ct-facts>div{flex:1 1 180px;min-width:0;border:1.5px solid var(--ln);border-radius:16px;padding:16px 18px}
.ct-facts span{display:block;font-size:14px;color:var(--ink3);margin-bottom:4px}
.ct-facts b{font-size:15.5px;line-height:1.45;display:block}
.ct-people{display:flex;flex-wrap:wrap;gap:16px}
.ct-person{flex:1 1 280px;min-width:0;border:1.5px solid var(--ln);border-radius:18px;padding:22px;
  display:flex;flex-direction:column;transition:border-color .16s,box-shadow .16s}
.ct-person:hover{border-color:#C9D6F2;box-shadow:var(--sh2)}
.ct-person .hd{display:flex;gap:14px;align-items:center;margin-bottom:14px}
/* Инициалы, а не полоски (TR-190): полосатый кружок читался как картинка,
   которая не загрузилась. */
.ct-person .ph{width:56px;height:56px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--ac-s);color:var(--ac);font-size:17px;font-weight:800;letter-spacing:.5px}
.ct-person .tx{flex:1;min-width:0}
.ct-person .tx b{font-size:16.5px;display:block;letter-spacing:-.2px}
.ct-person .role{font-size:14px;color:var(--ac);font-weight:700}
.ct-person .ab{font-size:14.5px;color:var(--ink2);line-height:1.55;margin-bottom:14px;text-wrap:pretty}
.ct-person .dec{margin-top:auto;background:var(--bg2);border-radius:12px;padding:12px 14px;margin-bottom:14px}
.ct-person .dec .k{font-size:12.5px;font-weight:800;color:var(--ink3);letter-spacing:.5px;
  text-transform:uppercase;margin-bottom:5px}
.ct-person .dec .v{font-size:14px;color:var(--ink);line-height:1.5}
.ct-person .ml{font-size:14.5px;font-weight:600;word-break:break-all}
.ct-dark{display:flex;flex-wrap:wrap;gap:28px 44px;align-items:flex-start}
.ct-dark-l{flex:1 1 300px;min-width:0;max-width:400px}
.ct-dark-l .sec-t2{color:#fff;margin-bottom:12px}
.ct-dark-l .p16{color:rgba(255,255,255,.66)}
.ct-dark-l .btn-white{margin-top:20px}
.ct-dark-r{flex:1.25 1 380px;min-width:0;display:flex;flex-wrap:wrap;gap:12px}
.ct-dark-r .pr{flex:1 1 220px;min-width:0;background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:20px}
.ct-dark-r .n{font-size:22px;font-weight:800;color:var(--ac-d);letter-spacing:-.6px;
  font-variant-numeric:tabular-nums;margin-bottom:6px}
.ct-dark-r .t{font-size:15.5px;font-weight:700;color:#fff;margin-bottom:5px}
.ct-dark-r .d{font-size:14px;color:rgba(255,255,255,.62);line-height:1.55;text-wrap:pretty}
.ct-bottom{align-items:stretch}
.ct-form{flex:1.2 1 340px;min-width:0}
.ct-legal{flex:1 1 300px;min-width:0}
.ct-steps{margin-top:20px;padding-top:18px;border-top:1px solid var(--ln2);display:flex;flex-direction:column;gap:12px}
.ct-steps .k{font-size:12.5px;font-weight:800;color:var(--ink3);letter-spacing:.5px;text-transform:uppercase}
.ct-steps .st{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--ink2);line-height:1.5}
.ct-steps .i{flex-shrink:0;width:24px;height:24px;border-radius:8px;background:var(--ac-s);color:var(--ac);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
@media (max-width:620px){
  .sec-t2{font-size:23px;letter-spacing:-.6px}
  .ct-hero-r{min-width:0}
  .ct-photo .cap{font-size:12.5px;max-width:88%}
}

/* ── Завод ── */
.zv-top{padding-bottom:0}
.zv-hero{display:flex;flex-wrap:wrap;gap:20px 44px;align-items:center}
.zv-hero-l{flex:1.2 1 430px;min-width:0;max-width:640px}
.zv-hero-r{flex:1 1 300px;min-width:260px;max-width:440px}
.zv-badge{display:inline-flex;align-items:center;gap:8px;background:var(--ac-s);color:var(--ac);
  font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:1.1px;padding:6px 12px;border-radius:8px}
/* TR-171: кегль заголовка ниже 27 точек не опускается ни при какой ширине,
   поэтому длинное слово обязано уметь переноситься — иначе строка уезжает за край. */
.zv-h1{font-size:clamp(27px,3.1vw,37px);line-height:1.14;letter-spacing:-1.1px;margin:14px 0 12px;
  overflow-wrap:break-word}
.zv-lead{font-size:17px;color:var(--ink2);line-height:1.6;max-width:520px;text-wrap:pretty}
.zv-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px 28px;margin-top:22px;max-width:460px}
.zv-facts .n{font-size:19px;font-weight:800;letter-spacing:-.5px;font-variant-numeric:tabular-nums;line-height:1.2}
.zv-facts .d{font-size:13.5px;color:var(--ink3);line-height:1.4}
.zv-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
/* Пока движок не загрузился, тут ровный фон, а не мигающая пустота.
   Не загрузился совсем (нет WebGL, оборвалась сеть) — data-3d="fail",
   и вместо сцены остаётся подпись: пустой прямоугольник читается как поломка. */
.zv-3d{aspect-ratio:4/3;border-radius:18px;overflow:hidden;position:relative;
  border:1.5px solid var(--ln);background:#C3CFDC;cursor:grab;touch-action:none}
.zv-3d canvas{display:block;width:100%;height:100%}
.zv-3d .cap{position:absolute;left:12px;bottom:12px;background:rgba(14,22,38,.82);color:#fff;
  font-size:12.5px;font-weight:600;padding:6px 11px;border-radius:8px;pointer-events:none;z-index:2}
.zv-3d[data-3d="fail"] .cap{left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);text-align:center;max-width:80%}
.zv-3d[data-3d="fail"] .cap::after{content:" — не поддерживается этим браузером"}
.zv-3d-cap{font-size:13.5px;color:var(--ink3);margin-top:9px;line-height:1.5}
.zv-cat-h{align-items:baseline}
.zv-tabs .tabs{margin-bottom:20px}
.zv-tabs .tab .cnt{margin-left:7px;font-size:12.5px;font-weight:700;opacity:.7;font-variant-numeric:tabular-nums}
.zv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:16px}
.zv-card{border:1.5px solid var(--ln);border-radius:18px;padding:16px;display:flex;flex-direction:column;
  transition:border-color .16s,box-shadow .16s}
.zv-card:hover{border-color:#C9D6F2;box-shadow:var(--sh2)}
/* TR-219: подложка под фотографией белая, как в карточке каталога. Была
   `--bg3` — светло-голубая плашка, и у снимков с прозрачным фоном она вылезала
   полосами сверху и снизу батареи: на странице завода это читалось как «что-то
   синее под фото», а рядом, в каталоге, те же снимки лежали на белом. Отступ
   у снимка тоже как в каталоге — иначе батарея упирается в края рамки. */
.zv-card .ph{display:block;aspect-ratio:1;border-radius:12px;overflow:hidden;margin-bottom:14px;background:#fff}
.zv-card .ph img{width:100%;height:100%;object-fit:contain;padding:10px}
.zv-card .nm{font-size:15.5px;font-weight:700;line-height:1.4;margin-bottom:7px;color:var(--ink);text-wrap:pretty}
.zv-card .nm:hover{color:var(--ac)}
.zv-card .chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px}
.zv-card .chips span{background:var(--bg3);border-radius:6px;padding:5px 9px 6px;font-size:13px;line-height:1.3;
  color:var(--ink2);font-variant-numeric:tabular-nums}
.zv-card .pr{margin-top:auto;display:flex;align-items:baseline;gap:8px;margin-bottom:5px}
.zv-card .pr b{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
.zv-card .pr s{font-size:13.5px;color:var(--ink4);font-variant-numeric:tabular-nums}
.zv-card .pr-d{font-size:12.5px;color:var(--ink3);margin-bottom:12px;line-height:1.45}
.zv-all{grid-column:1/-1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1.5px dashed var(--ln4);border-radius:14px;padding:14px;font-weight:700;font-size:15px;color:var(--ac);
  transition:border-color .15s,background-color .15s}
.zv-all:hover{border-color:var(--ac);background:var(--ac-c)}
.zv-prod,.zv-lines,.zv-serv{display:flex;flex-wrap:wrap;gap:16px}
.zv-p{flex:1 1 280px;min-width:0;border:1.5px solid var(--ln);border-radius:18px;padding:24px}
.zv-p .st{font-size:12.5px;font-weight:800;color:var(--ac);letter-spacing:1.1px;text-transform:uppercase;margin-bottom:11px}
.zv-p .t{font-size:19px;font-weight:800;letter-spacing:-.4px;margin-bottom:8px}
.zv-p .d{font-size:15px;color:var(--ink2);line-height:1.6;text-wrap:pretty}
.zv-line{flex:1 1 290px;min-width:0;border:1.5px solid var(--ln);border-radius:18px;padding:24px;
  display:flex;flex-direction:column;color:var(--ink);transition:border-color .16s,box-shadow .16s}
.zv-line:hover{border-color:#C9D6F2;box-shadow:var(--sh2);color:var(--ink)}
.zv-line .nm{font-size:20px;font-weight:800;letter-spacing:-.5px;margin-bottom:7px}
.zv-line p{font-size:15px;color:var(--ink2);line-height:1.6;margin-bottom:16px;text-wrap:pretty}
.zv-line .rows{margin-top:auto;display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--ln2);padding-top:14px}
.zv-line .rows>div{display:flex;justify-content:space-between;gap:12px;font-size:14.5px}
.zv-line .rows span{color:var(--ink3)}
.zv-line .rows b{font-weight:700;font-variant-numeric:tabular-nums}
.zv-line .rows b.ac{font-weight:800;color:var(--ac)}
.zv-dark{display:flex;flex-wrap:wrap;gap:24px 44px;align-items:flex-start}
.zv-dark-l{flex:1 1 300px;min-width:0;max-width:420px}
.zv-dark-l .sec-t2{color:#fff;margin-bottom:12px}
.zv-dark-l .p16{color:rgba(255,255,255,.66)}
.zv-dark-l .btn-white{margin-top:20px}
.zv-dark-r{flex:1.2 1 380px;min-width:0;display:flex;flex-direction:column;gap:12px}
.zv-dark-r .ck{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);border-radius:16px;
  padding:18px 20px;display:flex;gap:14px;align-items:flex-start}
.zv-dark-r .i{flex-shrink:0;width:28px;height:28px;border-radius:9px;background:rgba(157,187,255,.16);
  color:var(--ac-d);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;
  font-variant-numeric:tabular-nums}
.zv-dark-r .t{font-size:16px;font-weight:700;color:#fff;margin-bottom:5px}
.zv-dark-r .d{font-size:14.5px;color:rgba(255,255,255,.64);line-height:1.6;text-wrap:pretty}
.zv-s{flex:1 1 250px;min-width:0;background:var(--bg2);border-radius:18px;padding:22px 24px}
.zv-s .t{font-size:17px;font-weight:800;letter-spacing:-.3px;margin-bottom:7px}
.zv-s .d{font-size:14.5px;color:var(--ink3);line-height:1.6;text-wrap:pretty}
/* FAQ макета — одна рамка со строками-разделителями, а не отдельные карточки. */
.zv-faq{max-width:820px}
.zv-faq .faq{gap:0;border:1.5px solid var(--ln);border-radius:20px;overflow:hidden}
.zv-faq .faq details{border:none;border-radius:0;border-top:1px solid var(--ln3);background:#fff}
.zv-faq .faq details:first-child{border-top:none}
.zv-faq .faq details[open]{background:#fff;border-color:var(--ln3)}
@media (max-width:620px){
  .zv-3d{aspect-ratio:1}
  .zv-facts{grid-template-columns:1fr 1fr;gap:14px 18px}
}

/* ── Зарядка и обслуживание ── */
.ch-top{padding-bottom:0}
.ch-hero{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start;margin-bottom:26px}
.ch-hero-l{flex:1.3 1 380px;min-width:0}
.ch-h1{font-size:clamp(30px,4vw,44px);line-height:1.12;letter-spacing:-1.4px;margin-bottom:16px}
.ch-lead{font-size:17.5px;line-height:1.6;color:var(--ink2);text-wrap:pretty;max-width:640px}
.ch-lead b{color:var(--ink)}
.ch-p16{font-size:16.5px;color:var(--ink2);line-height:1.6;max-width:700px;text-wrap:pretty}
.ch-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.ch-tldr{flex:1 1 300px;min-width:0;background:var(--ac-c);border:1.5px solid var(--ac-b);border-radius:20px;padding:24px}
.ch-tldr .r{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.5;color:var(--ink2);margin-top:12px}
.ch-tldr .n{width:22px;height:22px;border-radius:7px;background:var(--ac);color:#fff;font-size:12px;font-weight:800;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;font-variant-numeric:tabular-nums}
.ch-safety{display:flex;flex-wrap:wrap;gap:12px}
.ch-safety .s{flex:1 1 210px;min-width:0;border:1px solid var(--ln);border-radius:16px;padding:18px 20px;
  display:flex;flex-direction:column;gap:9px}
.ch-safety .i{width:34px;height:34px;border-radius:10px;background:var(--red-bg);display:flex;align-items:center;justify-content:center}
.ch-safety b{font-size:15.5px;letter-spacing:-.2px}
.ch-safety .d{font-size:13.5px;color:var(--ink3);line-height:1.5}
.ch-safety .p{font-size:12px;font-weight:800;color:var(--ink4);font-variant-numeric:tabular-nums;margin-top:auto}
/* Полоса тренажёра во всю ширину — как в макете. Секции сайта живут в контейнере,
   поэтому фон растягиваем отрицательными полями, а содержимое возвращаем внутрь. */
.ch-band{background:var(--bg2);border-top:1px solid var(--ln);border-bottom:1px solid var(--ln);
  padding:52px 0;margin:64px calc(50% - 50vw) 0;scroll-margin-top:16px}
.ch-band-in{max-width:1240px;margin:0 auto;padding:0 24px}
.ch-band-h{margin-bottom:22px}
.ch-steps-static{display:flex;flex-wrap:wrap;gap:12px;list-style:none;counter-reset:s}
.ch-steps-static li{flex:1 1 220px;min-width:0;background:#fff;border:1px solid var(--ln);border-radius:16px;padding:18px 20px}
.ch-steps-static b{display:block;font-size:15.5px;margin-bottom:5px}
.ch-steps-static span{font-size:14px;color:var(--ink3);line-height:1.5}
.ch-nojs{margin-top:14px;font-size:14px;color:var(--ink3)}
/* Со скриптом список шагов заменяется тренажёром — вместе с этой подписью. */
.ch-tr-steps{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.ch-st{flex:1 1 190px;min-width:0;display:flex;align-items:center;gap:11px;padding:13px 16px;border-radius:14px;
  border:1.5px solid var(--ln);background:#fff;text-align:left}
.ch-st.on{border-color:var(--ac);background:var(--ac-c)}
.ch-st.past{border-color:#A9DCC2}
.ch-st .n{width:26px;height:26px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;background:var(--ln3);color:var(--ink3);font-variant-numeric:tabular-nums}
.ch-st.on .n{background:var(--ac);color:#fff}
.ch-st.past .n{background:var(--ok-bg);color:var(--ok)}
.ch-st .t{font-size:14.5px;font-weight:700;line-height:1.25;color:var(--ink3)}
.ch-st.on .t{color:var(--ink)}
.ch-st.past .t{color:var(--ink2)}
.ch-tr-body{display:flex;flex-wrap:wrap;gap:16px;align-items:stretch}
.ch-tr-l{flex:1.5 1 460px;min-width:0;display:flex;flex-direction:column;gap:12px}
.ch-tr-r{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:12px}
.ch-3dbox{background:#fff;border:1px solid var(--ln);border-radius:20px;padding:14px}
.ch-3d{height:540px;border-radius:16px;overflow:hidden;background:#EFF2F7;position:relative;cursor:grab;touch-action:none}
.ch-3d canvas{display:block;width:100%;height:100%}
.ch-3d-fail{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;
  text-align:center;font-size:14.5px;color:var(--ink3);line-height:1.5}
.ch-3d-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:12px 8px 2px;
  font-size:13.5px;font-weight:600;color:var(--ink3)}
.ch-3d-bar .chips{display:flex;flex-wrap:wrap;gap:8px}
.ch-3d-bar .chip{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--ink3);
  background:var(--bg3);border:1px solid var(--ln);border-radius:8px;padding:5px 11px;font-variant-numeric:tabular-nums}
.ch-3d-bar .chip.ok{color:var(--ok);background:var(--ok-bg);border-color:#A9DCC2}
.ch-3d-bar .chip.warn{color:#C08414}
.ch-3d-note{font-size:12.5px;color:var(--ink4);line-height:1.5;padding:0 8px 8px}
.ch-stats{display:flex;flex-wrap:wrap;gap:10px}
.ch-stats .st{flex:1 1 130px;min-width:0;background:#fff;border:1px solid var(--ln);border-radius:14px;padding:13px 15px}
.ch-stats .t{font-size:12px;font-weight:700;color:var(--ink3);margin-bottom:3px}
.ch-stats .v{font-size:22px;font-weight:800;letter-spacing:-.8px;font-variant-numeric:tabular-nums}
.ch-stats .v.ok{color:var(--ok)}.ch-stats .v.bad{color:var(--red-t)}
.ch-stats .v.warn{color:#C08414}.ch-stats .v.off{color:#8A939F}
.ch-stats .d{font-size:12px;color:var(--ink4)}
.ch-soc{background:#fff;border:1px solid var(--ln);border-radius:14px;padding:14px 16px}
.ch-soc .hd{display:flex;justify-content:space-between;gap:12px;font-size:13px;font-weight:700;color:var(--ink3);margin-bottom:8px}
.ch-soc .hd span:last-child{font-variant-numeric:tabular-nums;color:var(--ink);text-align:right}
.ch-soc .tr{height:10px;border-radius:6px;background:var(--ln3);overflow:hidden}
.ch-soc .tr>span{display:block;height:100%;border-radius:6px;background:var(--ac)}
.ch-soc .tr>span.ok{background:var(--ok)}.ch-soc .tr>span.warn{background:#C08414}
.ch-soc .note{font-size:12.5px;color:var(--ink4);line-height:1.5;margin-top:10px}
.ch-err{border:1.5px solid #F3C6C0;background:#FEF7F6;border-radius:16px;padding:15px 17px;font-size:14.5px;
  line-height:1.5;color:var(--ink2)}
.ch-err b{color:var(--red-t);display:block;margin-bottom:2px}
.ch-hot{border:1.5px solid #F3C6C0;background:#fff;border-radius:16px;padding:16px 18px}
.ch-hot b{font-size:16px;display:block;margin-bottom:6px}
.ch-hot p{font-size:14px;color:var(--ink2);line-height:1.55;margin-bottom:12px}
.ch-hot .b{display:flex;flex-wrap:wrap;gap:8px}
.ch-panel{background:#fff;border:1px solid var(--ln);border-radius:20px;padding:22px}
.ch-panel .hd{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.ch-panel .hd .n{width:26px;height:26px;border-radius:9px;background:var(--ac);color:#fff;font-size:13px;font-weight:800;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;font-variant-numeric:tabular-nums}
.ch-panel .hd b{font-size:19px;letter-spacing:-.4px}
.ch-panel>p{font-size:15px;color:var(--ink2);line-height:1.55;margin:8px 0 16px;text-wrap:pretty}
.ch-panel .col{display:flex;flex-direction:column;gap:10px}
.ch-panel .row2{display:flex;flex-wrap:wrap;gap:8px}
/* Класс подписи поля — `ch-lb`/`co-flb`, а НЕ `lb`: `.lb` у сайта уже занят —
   это полноэкранный просмотр фотографии (position:fixed, display:none). Подпись
   с таким классом становилась невидимой растяжкой на весь экран и перехватывала
   нажатия по соседним полям. */
.ch-panel .ch-lb{font-size:13px;font-weight:700;color:var(--ink3)}
.ch-panel .hint{font-size:13.5px;color:var(--ink3);line-height:1.5}
.ch-panel .hint2{font-size:14.5px;color:var(--ink2);line-height:1.55}
/* TR-165: было flex:1 1 150px. На телефоне родитель выстраивается в колонку, и
   150 из ширины превращались в ВЫСОТУ — кнопка становилась 296x150 и выглядела
   как незагрузившаяся картинка. Базис по содержимому, а 150 держим шириной. */
.ch-b{flex:1 1 auto;min-width:150px;border:1.5px solid var(--ln);border-radius:12px;padding:12px 14px;font-size:14.5px;
  font-weight:700;background:#fff;text-align:center;transition:border-color .15s,color .15s}
.ch-b:hover{border-color:var(--ac)}
.ch-b.ac{border-color:var(--ac-b);background:var(--ac-c);color:var(--ac)}
.ch-b.dash{border-style:dashed;border-color:var(--ln4);color:var(--ink3);font-weight:600}
.ch-b.dash:hover{border-color:var(--red-t);color:var(--red-t)}
.ch-b.red{color:var(--red-t);border-color:#F3C6C0}
.ch-b.red.on{background:var(--red-bg);border-color:var(--red)}
.ch-b.black{color:var(--ink);border-color:var(--ln4)}
.ch-b.black.on{background:var(--ln3);border-color:var(--dark)}
.ch-b.done{border-color:#A9DCC2}
.ch-cap{border:1.5px solid var(--ln);background:#fff;border-radius:9px;padding:8px 12px;font-size:14px;
  font-weight:700;color:var(--ink2);font-variant-numeric:tabular-nums}
.ch-cap.on{border-color:var(--ac);background:var(--ac-c);color:var(--ac)}
.ch-panel .caps{display:flex;flex-wrap:wrap;gap:6px}
.ch-pre{display:flex;align-items:center;gap:12px;border:1.5px solid var(--ln);background:#fff;border-radius:12px;padding:11px 14px;text-align:left}
.ch-pre.good{border-color:#A9DCC2;background:var(--ok-bg)}
.ch-pre.bad{border-color:#F3C6C0;background:#FEF7F6}
.ch-pre .a{font-size:17px;font-weight:800;letter-spacing:-.5px;font-variant-numeric:tabular-nums;min-width:62px}
.ch-pre .a.good{color:var(--ok)}.ch-pre .a.bad{color:var(--red-t)}
.ch-pre .tx{flex:1;min-width:0}
.ch-pre .tx b{font-size:14.5px;display:block}
.ch-pre .tx span{font-size:12.5px;color:var(--ink3);line-height:1.4}
.ch-main{background:var(--ac);color:#fff;border:1.5px solid var(--ac);font-weight:800;font-size:16px;padding:14px 18px;
  border-radius:12px;text-align:center;transition:filter .15s}
.ch-main:hover{filter:brightness(1.08)}
.ch-main.stop{background:#fff;color:var(--ink2);border-color:var(--ln)}
.ch-main.done{background:var(--ok-bg);color:var(--ok);border-color:#A9DCC2}
.ch-fin{display:flex;gap:11px;align-items:flex-start;border:1.5px solid var(--ln);background:#fff;border-radius:12px;padding:12px 14px;text-align:left}
.ch-fin.on{border-color:var(--ac);background:var(--ac-c)}
.ch-fin.past{border-color:#A9DCC2}
.ch-fin .n{width:22px;height:22px;border-radius:7px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;background:var(--ln3);color:var(--ink3);margin-top:1px}
.ch-fin.on .n{background:var(--ac);color:#fff}
.ch-fin.past .n{background:var(--ok-bg);color:var(--ok)}
.ch-fin .tx{flex:1;min-width:0}
.ch-fin .tx b{font-size:14.5px;display:block}
.ch-fin .tx span{font-size:12.5px;color:var(--ink3);line-height:1.45}
.ch-done{margin-top:14px;border:1.5px solid #A9DCC2;background:var(--ok-bg);border-radius:14px;padding:16px 18px}
.ch-done b{font-size:16px;color:var(--ok);display:block;margin-bottom:6px}
.ch-done p{font-size:14px;color:var(--ink2);line-height:1.55}
.ch-check{background:#fff;border:1px solid var(--ln);border-radius:20px;padding:20px 22px}
.ch-check .k,.ch-log .k{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--ink3);margin-bottom:12px}
.ch-check .c{display:flex;gap:10px;align-items:center;margin-top:9px}
.ch-check .i{width:20px;height:20px;border-radius:6px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--ln3);color:#C6CEDB}
.ch-check .c.ok .i{background:var(--ok-bg);color:var(--ok)}
.ch-check .t{flex:1;min-width:0;font-size:14.5px;color:var(--ink3)}
.ch-check .c.ok .t{color:var(--ink)}
.ch-check .p{font-size:12.5px;color:var(--ink4);font-variant-numeric:tabular-nums}
.ch-log{background:var(--dark);border-radius:20px;padding:20px 22px}
.ch-log.is-empty{display:none}
.ch-log .k{color:rgba(255,255,255,.4)}
.ch-log .r{display:flex;gap:10px;font-size:14px;color:rgba(255,255,255,.75);line-height:1.45;margin-top:9px}
.ch-log .m{flex-shrink:0;font-weight:800}
.ch-log .m.ok{color:#7FD3A8}.ch-log .m.no{color:#FF8A7A}
.ch-reset{margin-top:16px}
.ch-when{display:flex;flex-wrap:wrap;gap:16px}
.ch-w{flex:1 1 300px;min-width:0;border:1px solid var(--ln);border-radius:20px;padding:24px}
.ch-w-tab{padding:24px 0 8px}
.ch-w-tab .hd,.ch-w-tab .note{padding:0 24px}
.ch-w .pt{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.9px;color:var(--ink4);margin-bottom:4px}
.ch-w .wt{font-size:18px;letter-spacing:-.3px;display:block;margin-bottom:16px}
.ch-w .picks{display:flex;gap:14px;margin-bottom:16px}
.ch-w .pk{flex:1 1 0;min-width:0;border:1.5px solid var(--ln);background:#fff;border-radius:14px;padding:12px 6px;
  display:flex;flex-direction:column;align-items:center;gap:7px}
.ch-w .pk.on{border-color:var(--ac);background:var(--ac-c)}
.ch-w .pk span{font-size:12.5px;font-weight:700;color:var(--ink3);font-variant-numeric:tabular-nums}
.ch-w .pk.on span{color:var(--ac)}
.ch-w .leds{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.ch-w .led{display:flex;align-items:center;gap:12px;border:1.5px solid var(--ln);background:#fff;border-radius:14px;padding:10px 14px;text-align:left}
.ch-w .led.on{border-color:var(--ac);background:var(--ac-c)}
.ch-w .led span{font-size:14px;font-weight:700;color:var(--ink2);line-height:1.3}
.ch-w .out{background:var(--bg2);border-radius:12px;padding:14px 16px}
.ch-w .out b{font-size:15px;display:block;margin-bottom:4px}
.ch-w .out span{font-size:14px;color:var(--ink2);line-height:1.5}
.ch-w .note{font-size:13.5px;color:var(--ink3);line-height:1.5;margin-top:12px}
.ch-w-tab .row{display:flex;gap:12px;align-items:center;padding:13px 24px;border-top:1px solid var(--ln3)}
.ch-w-tab .row:nth-child(even){background:#FBFCFE}
.ch-w-tab .v{flex:0 0 82px;font-size:15.5px;font-weight:800;font-variant-numeric:tabular-nums}
/* TR-164: модификатор назывался `warn` и совпадал с именем сайтовой плашки-
   предупреждения — ячейка получала чужое оформление (розовый фон, рамку и отступы
   14 на 18 точек), «12,4 В» рвалось на две строки, а ячейка вырастала до 78 точек
   при 24 у соседей. Имя своё, жёлтый притемнён с #C08414 до контраста выше нормы. */
.ch-w-tab .v.ok{color:var(--ok)}.ch-w-tab .v.v-warn{color:#8A5D00}.ch-w-tab .v.bad{color:var(--red-t)}
.ch-w-tab .row-h{padding-top:10px;padding-bottom:10px;border-top:none;background:none}
.ch-w-tab .row-h span{font-size:12px;font-weight:700;color:var(--ink3);line-height:1.3}
.ch-w-tab .d{flex:0 0 62px;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink2)}
.ch-w-tab .t{flex:1;min-width:0;font-size:13.5px;color:var(--ink3);line-height:1.4}
.ch-modes{display:flex;flex-wrap:wrap;gap:16px}
.ch-modes .m{flex:1 1 320px;min-width:0;border:1px solid var(--ln);border-radius:20px;padding:26px}
.ch-modes .m-ac{border:1.5px solid var(--ac-b);background:var(--ac-c)}
.ch-modes .pt{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.9px;color:var(--ink4);margin-bottom:6px}
.ch-modes .pt.ac{color:var(--ac)}
.ch-modes .big{font-size:34px;font-weight:800;letter-spacing:-1.2px;font-variant-numeric:tabular-nums;margin-bottom:4px}
.ch-modes .sub{font-size:14.5px;color:var(--ink2);margin-bottom:16px}
.ch-modes .li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink2);line-height:1.5;margin-top:11px}
.ch-modes .li svg{flex-shrink:0;margin-top:3px}
.ch-calc{display:flex;flex-wrap:wrap;gap:16px;align-items:stretch}
.ch-calc-l{flex:1.1 1 360px;min-width:0;border:1px solid var(--ln);border-radius:20px;padding:24px}
.ch-calc-r{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:12px}
.ch-calc .ch-lb{font-size:13px;font-weight:700;color:var(--ink3);margin-bottom:9px}
.ch-calc .caps{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px}
.ch-calc .cap{border:1.5px solid var(--ln);background:#fff;border-radius:11px;padding:10px 13px;
  display:flex;flex-direction:column;gap:1px;min-width:0;text-align:left}
.ch-calc .cap.on{border-color:var(--ac);background:var(--ac-c)}
.ch-calc .cap b{font-size:14.5px;font-variant-numeric:tabular-nums}
.ch-calc .cap.on b{color:var(--ac)}
.ch-calc .cap span{font-size:11.5px;font-weight:600;color:var(--ink4);white-space:nowrap}
.ch-calc .dens{display:flex;flex-direction:column;gap:7px}
.ch-calc .den{display:flex;align-items:center;gap:12px;border:1.5px solid var(--ln);background:#fff;border-radius:12px;padding:11px 14px;text-align:left}
.ch-calc .den.on{border-color:var(--ac);background:var(--ac-c)}
.ch-calc .den .v{font-size:16.5px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.4px;min-width:52px}
.ch-calc .den.on .v{color:var(--ac)}
.ch-calc .den .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ch-calc .den .tx b{font-size:14px}
.ch-calc .den .tx span{font-size:12.5px;color:var(--ink3);line-height:1.4}
.ch-calc .amp{border:1.5px solid var(--ac-b);background:var(--ac-c);border-radius:20px;padding:26px}
.ch-calc .amp .pt{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.9px;color:var(--ac);margin-bottom:6px}
.ch-calc .amp .big{font-size:44px;font-weight:800;letter-spacing:-1.8px;font-variant-numeric:tabular-nums;line-height:1;margin-bottom:8px}
.ch-calc .amp .note{font-size:15px;color:var(--ink2);line-height:1.5}
.ch-calc .outs{display:flex;flex-wrap:wrap;gap:10px}
.ch-calc .o{flex:1 1 140px;min-width:0;border:1px solid var(--ln);border-radius:16px;padding:16px 18px}
.ch-calc .o .t{font-size:12.5px;font-weight:700;color:var(--ink3);margin-bottom:3px}
.ch-calc .o .v{font-size:22px;font-weight:800;letter-spacing:-.7px;font-variant-numeric:tabular-nums}
.ch-calc .o .v.ac{color:var(--ac)}
.ch-calc .o .d{font-size:12.5px;color:var(--ink4);line-height:1.4}
.ch-calc .warn{border:1.5px solid var(--ln);background:#fff;border-radius:16px;padding:16px 18px;font-size:14.5px;
  line-height:1.5;color:var(--ink2)}
.ch-calc .warn b{display:block;margin-bottom:2px;color:var(--ink3)}
.ch-calc .warn.ok{border-color:#A9DCC2;background:var(--ok-bg)}
.ch-calc .warn.ok b{color:var(--ok)}
.ch-calc .warn.bad{border-color:#F3C6C0;background:#FEF7F6}
.ch-calc .warn.bad b{color:var(--red-t)}
.ch-serv{display:flex;flex-wrap:wrap;gap:16px}
.ch-serv .sv{flex:1 1 250px;min-width:0;border:1px solid var(--ln);border-radius:20px;padding:24px;display:flex;flex-direction:column}
.ch-serv .w{font-size:15px;font-weight:800;color:var(--ac);margin-bottom:3px}
.ch-serv .t{font-size:17.5px;letter-spacing:-.3px;margin-bottom:14px}
.ch-serv .li>div{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;color:var(--ink2);line-height:1.5;margin-bottom:10px}
.ch-serv .dot{width:5px;height:5px;border-radius:50%;background:#C6CEDB;flex-shrink:0;margin-top:8px}
.ch-serv .p{font-size:12px;font-weight:800;color:var(--ink4);font-variant-numeric:tabular-nums;margin-top:auto}
.ch-two{display:flex;flex-wrap:wrap;gap:16px;align-items:stretch}
.ch-h2s{font-size:26px;font-weight:800;letter-spacing:-.7px;line-height:1.55;margin-bottom:8px;text-wrap:pretty}
.ch-store{flex:1.2 1 340px;min-width:0;background:var(--bg2);border-radius:20px;padding:28px 30px;scroll-margin-top:16px}
.ch-store .cards{display:flex;flex-wrap:wrap;gap:10px}
.ch-store .cards>div{flex:1 1 150px;min-width:0;background:#fff;border:1px solid var(--ln);border-radius:14px;padding:15px 17px}
.ch-store .n{font-size:20px;font-weight:800;letter-spacing:-.7px;font-variant-numeric:tabular-nums;margin-bottom:3px}
.ch-store .d{font-size:13.5px;color:var(--ink3);line-height:1.45}
.ch-store .note{font-size:13.5px;color:var(--ink3);line-height:1.55;margin-top:16px}
.ch-start{flex:1 1 300px;min-width:0;border:1px solid var(--ln);border-radius:20px;padding:28px 30px}
.ch-start .r{display:flex;gap:13px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--ln2)}
.ch-start .n{font-size:16px;font-weight:800;color:var(--ac);font-variant-numeric:tabular-nums;flex:0 0 76px}
.ch-start .d{flex:1;min-width:0;font-size:14.5px;color:var(--ink2);line-height:1.5}
.ch-traps{display:flex;flex-wrap:wrap;gap:12px}
.ch-traps .tr{flex:1 1 300px;min-width:0;border:1.5px solid var(--ln);background:#fff;border-radius:18px;padding:20px 22px}
.ch-traps .tr[open]{border-color:#F3C6C0;background:#FEF7F6}
.ch-traps summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;width:100%}
.ch-traps summary::-webkit-details-marker{display:none}
.ch-traps .i{width:28px;height:28px;border-radius:9px;background:var(--bg3);color:var(--ink3);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ch-traps .tr[open] .i{background:var(--red-bg);color:var(--red-t)}
.ch-traps summary b{flex:1;min-width:0;font-size:16px;letter-spacing:-.3px}
.ch-traps .p{font-size:12.5px;font-weight:800;color:var(--ink4);font-variant-numeric:tabular-nums}
.ch-traps .a{font-size:14.5px;line-height:1.55;color:var(--ink2);margin-top:8px}
.ch-void{border:1.5px solid #F3C6C0;background:#FEF7F6;border-radius:20px;padding:28px 30px;display:flex;flex-wrap:wrap;gap:28px}
.ch-void .l{flex:1.1 1 320px;min-width:0}
.ch-void .r{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:10px}
.ch-void .r>div{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink2);line-height:1.5}
.ch-void .r svg{flex-shrink:0;margin-top:3px}
.ch-cta{display:flex;flex-wrap:wrap;gap:32px;align-items:center}
.ch-cta .l{flex:1.3 1 340px;min-width:0}
.ch-cta .l .sec-t2{color:#fff;margin-bottom:10px}
.ch-cta .l .p16{color:rgba(255,255,255,.72);max-width:520px}
.ch-cta .r{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:10px}
.ch-cta .h{font-size:13px;color:rgba(255,255,255,.5);text-align:center}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:transparent;
  border:1.5px solid rgba(255,255,255,.28);color:#fff;font-weight:700;font-size:16px;padding:15px 24px;border-radius:12px;
  transition:background-color .15s,border-color .15s}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5);color:#fff}
@media (max-width:620px){
  .ch-3d{height:380px}
  .ch-band{padding:36px 0;margin-top:44px}
  .ch-w-tab .row{flex-wrap:wrap;gap:4px 12px}
  .ch-w-tab .t{flex:1 1 100%}
}

/* ── Оформление заказа: раскладка по макету (TR-136) ── */
.co-top{padding-bottom:0}
.co-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 22px;margin-bottom:22px}
.co-h1{font-size:clamp(26px,3.2vw,34px);letter-spacing:-1px;line-height:1.1}
.co-back-l{font-size:15px;color:var(--ink3);margin-left:auto;white-space:nowrap}
.co-back-l:hover{color:var(--ac)}
.checkout{gap:20px}
.co-main{flex:2 1 540px;gap:16px}
.co-side{flex:1 1 320px;display:flex;flex-direction:column;gap:12px;top:20px}
/* Шаг — белая карточка с тенью, а не серая плашка: по макету открытые шаги
   поднимаются над фоном страницы, закрытые лежат пунктирной заглушкой. */
.co-step{background:#fff;border-radius:20px;padding:26px;box-shadow:var(--sh1)}
.co-step.is-new{animation:co-in .22s ease}
@keyframes co-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.co-sh{display:flex;align-items:center;gap:14px;margin-bottom:18px;scroll-margin-top:90px}
.co-sh .dot{width:40px;height:40px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:800;background:var(--ac-s);color:var(--ac);font-variant-numeric:tabular-nums}
.co-sh .tx{flex:1 1 auto;min-width:0}
.co-sh .tx>b{font-size:20px;font-weight:800;letter-spacing:-.4px;display:block}
.co-sh .hint{font-size:14px;color:var(--ink3);line-height:1.45;display:block;margin-top:2px}
.co-sh .hint.is-wait{color:var(--ac);font-weight:600}
.co-stub{background:#fff;border:1.5px dashed #E1E6EF;border-radius:20px;padding:20px 24px;
  display:flex;align-items:center;gap:14px}
/* TR-154: карточка закрытого шага нарочно бледная, но именно её строки объясняют,
   почему форма «не работает» («Откроется, когда выберете полярность»), — а читались
   они с контрастом 2,04-3,06 при норме 4,5. Притемняем до читаемого, серую подачу
   сохраняем: она по-прежнему заметно бледнее открытых шагов. */
.co-stub .dot{width:36px;height:36px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:800;background:var(--bg3);color:#6B7688;font-variant-numeric:tabular-nums}
.co-stub .tx b{font-size:17px;font-weight:800;color:#5F6B7D;display:block}
.co-stub .tx span{font-size:14px;color:#6B7688;line-height:1.45}
.co-item .ph{width:96px;height:96px;border:1px solid var(--ln);border-radius:14px}
.co-item .nm{font-size:18px;font-weight:800;line-height:1.35;letter-spacing:-.3px;margin-bottom:5px}
.co-item .meta{font-size:14px;color:var(--ink3);margin-bottom:9px;font-variant-numeric:tabular-nums}
.chip-fresh{display:inline-flex;align-items:center;gap:6px;background:var(--ok-bg);color:var(--ok);
  font-size:13px;font-weight:700;padding:5px 10px;border-radius:7px}
.co-item .pr s{font-size:14px;color:var(--ink4)}
.co-item .pr .now{font-size:26px;letter-spacing:-.8px}
/* TR-304: скелет вместо пустоты. Пока скрипт оформления не прочитал товар из
   адреса, на месте названия, цены, фото и полярности стоят серые полосы того же
   размера, что и настоящие строки, — заполняясь, страница не прыгает. Высота
   полосы в долях кегля своей строки, поэтому межстрочный интервал не меняется. */
.skel{display:inline-block;vertical-align:middle;height:.8em;border-radius:6px;background:var(--ln);
  animation:skel 1.1s ease-in-out infinite alternate}
@keyframes skel{from{opacity:1}to{opacity:.5}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}}
.skel-nm{width:min(300px,85%)}
/* Название на телефоне идёт в две строки — скелет тоже в две, иначе +26 точек. */
.skel-br,.skel-nm2{display:none}
@media (max-width:620px){.skel-br{display:inline}.skel-nm2{display:inline-block;width:45%}}
.skel-note{width:110px}
.skel-total{width:120px}
.skel-meta{width:150px}
.skel-pr{width:110px}
.skel-sum{width:56px}
.seg .skel-seg{width:84px;height:34px;border-radius:7px;margin:0}
.co-item .ph:not([src]){background:var(--bg3)}
.co-help{width:100%;margin-top:16px;background:var(--ac-c);border:1px solid var(--ac-b2);border-radius:15px;
  padding:16px 18px;display:flex;align-items:center;gap:14px;transition:background-color .15s}
.co-help:hover{background:#EAF1FE}
.co-help .i{width:40px;height:40px;border-radius:12px;background:#fff;border:1px solid var(--ac-b2);color:var(--ac);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.co-help .tx{flex:1 1 auto;min-width:0}
.co-help .tx b{font-size:16px;display:block;letter-spacing:-.2px}
.co-help .tx span{font-size:14px;color:var(--ink3);line-height:1.5;display:block;text-wrap:pretty}
.co-help .ch{color:#A6AFBE;flex-shrink:0;display:flex}
.co-pay{font-size:17px;font-weight:800;padding:18px;border-radius:14px}
.co-sum-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 12px;
  margin-top:20px;padding-top:18px;border-top:1px solid var(--ln2)}
.co-sum-h b{font-size:20px;font-weight:800;letter-spacing:-.4px}
.co-sum-h span{font-size:13.5px;color:var(--ink3)}
.co-sum .total-old{font-size:13.5px;color:var(--ink3);margin-top:4px;text-align:right}
.co-sum .total-old s{font-variant-numeric:tabular-nums}
.co-invoice{background:#fff;border:1.5px solid var(--ln);border-radius:18px;padding:18px 20px;
  display:flex;align-items:center;gap:14px;transition:border-color .15s,box-shadow .15s}
.co-invoice:hover{border-color:var(--ac-b);box-shadow:var(--sh1)}
.co-invoice .i{width:38px;height:38px;border-radius:11px;background:var(--ac-s);color:var(--ac);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.co-invoice .tx{flex:1;min-width:0}
.co-invoice .tx b{font-size:15.5px;display:block}
.co-invoice .tx span{font-size:13.5px;color:var(--ink3)}
.co-invoice .ch{color:#A6AFBE;flex-shrink:0;display:flex}
/* TR-141: полоса с итогом и главной кнопкой внизу экрана — та же, что на карточке
   товара (.buybar). Нужна там, где правая колонка перестаёт прилипать. */
.co-bar{display:none}
@media (max-width:900px),(hover:none) and (pointer:coarse){
  body.has-co-bar{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .co-bar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:200;
    background:#fff;border-top:1px solid var(--ln);box-shadow:0 -6px 24px rgba(16,21,31,.10);
    padding:10px 0 calc(10px + env(safe-area-inset-bottom))}
  .co-bar[hidden]{display:none}
  .co-bar-in{display:flex;align-items:center;gap:14px}
  .co-bar-pr{display:flex;flex-direction:column;line-height:1.2;min-width:0}
  .co-bar-pr span{font-size:11.5px;color:var(--ink3)}
  .co-bar-pr b{font-size:19px;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
  .co-bar .btn{flex:1 1 auto;min-width:0;padding:13px 14px;font-size:15px;text-align:center}
}
/* Модальные окна страницы заказа. Общая модалка сайта (#tb-modal) занята формой
   заявки, поэтому у памятки и счёта свои — разметка у них разная. */
/* TR-153: прокручивалась подложка целиком, и крестик уезжал вверх вместе с
   памяткой — после 187 точек он оказывался за верхним краем экрана. Теперь
   подложка не прокручивается, коробка держит высоту экрана, а прокручивается
   только её внутренность: заголовок и крестик всегда на месте. */
.co-modal{position:fixed;inset:0;z-index:1200;background:rgba(14,22,38,.5);
  display:flex;align-items:center;justify-content:center;padding:24px;overflow:hidden}
.co-modal[hidden]{display:none}
.co-modal-box{background:#fff;border-radius:22px;padding:28px;max-width:560px;width:100%;margin:auto;
  position:relative;box-shadow:0 24px 70px rgba(14,22,38,.3);animation:co-in .2s ease;
  max-height:100%;display:flex;flex-direction:column}
/* Заголовок не залезает под крестик и отделён от прокручиваемой части. */
.co-modal-box>h3{flex:none;padding-right:44px;padding-bottom:12px;border-bottom:1px solid var(--ln2);margin-bottom:14px}
.co-modal-scroll{overflow-y:auto;min-height:0;overscroll-behavior:contain}
.co-modal-box h3{font-size:22px;font-weight:800;letter-spacing:-.6px;margin-bottom:8px}
.co-modal-x{position:absolute;right:18px;top:18px;width:34px;height:34px;border-radius:10px;background:var(--bg3);
  color:var(--ink3);display:flex;align-items:center;justify-content:center;font-size:15px;z-index:2}
.co-modal-x:hover{background:var(--ln3)}
html.co-lock{overflow:hidden}
/* Ссылка на памятку по полярности (TR-156). Стоит в карточке товара, в панели
   фильтров, на главной и на оформлении заказа — там, где полярность спрашивают.
   TR-207: раскрывала памятку на месте, теперь открывает общее окно (#tb-pol),
   поэтому это кнопка, а не <summary>. Пунктирное подчёркивание оставлено: по
   нему её и узнают как «нажми и объяснят». Высота строки с отступами — 44
   точки, минимум для пальца. */
.pol-help{display:inline-flex;align-items:center;gap:7px;cursor:pointer;margin-top:10px;
  font-size:14px;font-weight:600;color:var(--ac);padding:11px 0;background:none;border:0;text-align:left}
.pol-help span{border-bottom:1px dashed currentColor}
.pol-help:hover{color:var(--ac-h)}
.pol-help-f{margin:2px 0 0}

.co-pol-schemes{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 14px}
.co-pol-schemes .sc{flex:1 1 200px;min-width:0;border:1.5px solid var(--ln);border-radius:16px;padding:14px;text-align:center}
.co-pol-schemes svg{width:100%;height:auto;display:block;margin-bottom:8px}
.co-pol-schemes b{font-size:15.5px;display:block}
.co-pol-schemes span{font-size:13.5px;color:var(--ink3)}
.co-pol-note{font-size:14px;color:var(--ink2);line-height:1.55;background:var(--bg2);border-radius:12px;padding:14px 16px}
.co-pol-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.co-pol-acts .btn{flex:1 1 150px}
/* Телефон рядом с двумя кнопками не помещается в одну строку и ломает их высоту —
   отправляем его своей строкой. */
.co-pol-acts .btn-line{flex:1 1 100%}
.co-lb{display:block;font-size:13px;font-weight:700;color:var(--ink3);margin:14px 0 6px}
.co-modal .fld{width:100%}
.co-modal .fld.is-bad{border-color:var(--red)}
.fld-err{font-size:13px;color:var(--red-t);margin-top:6px;line-height:1.45}
/* TR-303: город в окне счёта — поле с подсказкой. Обёртка .sug по умолчанию
   строчная, а поле в окне идёт на всю ширину; пояснение под полем — тем же
   кеглем, что и строка ошибки, только нейтральным цветом. */
.co-modal .sug{display:block}
.fld-hint{font-size:13px;color:var(--ink3);margin-top:6px;line-height:1.45}
.co-inv-sum{margin-top:16px;background:var(--bg2);border-radius:12px;padding:14px 16px}
.co-inv-sum b{font-size:15px;display:block;margin-bottom:2px}
.co-inv-sum span{font-size:13.5px;color:var(--ink3)}
.co-inv-ok{border:1.5px solid #A9DCC2;background:var(--ok-bg);border-radius:14px;padding:18px 20px;margin-top:8px}
.co-inv-ok b{font-size:16px;color:var(--ok);display:block;margin-bottom:5px}
.co-inv-ok span{font-size:14.5px;color:var(--ink2);line-height:1.55}
@media (max-width:900px){
  .co-side{position:static}
}
/* TR-369: на телефоне карточка товара в оформлении шире — поля шага 16, у
   самой строки товара своих полей нет, — а маленькое фото без рамки стоит
   слева от названия, а не отдельной строкой над ним. Цена — строкой ниже. */
@media (max-width:620px){
  .co-step,.co-stub{padding:20px 16px}
  .co-card .co-item{display:grid;grid-template-columns:56px minmax(0,1fr);gap:4px 12px;align-items:start;padding:0}
  .co-item .ph{width:56px;height:56px;border:0;border-radius:8px}
  .co-item .pr{grid-column:1/-1;margin-top:8px}
  .co-modal{padding:12px}
  .co-modal-box{padding:22px 20px}
}

/* ── Отслеживание заказа ── */
.tk-top{padding-bottom:0}
.tk-h1{font-size:clamp(30px,4vw,44px);line-height:1.12;letter-spacing:-1.4px;margin-bottom:12px}
.tk-lead{font-size:18px;color:var(--ink2);line-height:1.6;max-width:620px;text-wrap:pretty;margin-bottom:18px}
.tk-form{background:var(--bg2);border:1px solid var(--ln3);border-radius:22px;padding:26px 28px}
.tk-form .row{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.tk-form .f{flex:1.3 1 220px;min-width:0}
.tk-form .f-s{flex:1 1 200px}
.tk-form label{display:block;font-size:13.5px;font-weight:700;color:var(--ink3);margin-bottom:7px}
.tk-form .fld{width:100%;font-variant-numeric:tabular-nums}
.tk-form .btn{flex:0 0 auto;height:54px;padding:0 26px}
/* Пока идёт запрос в CRM, кнопка гаснет и говорит «Ищем…» (TR-137): без этого
   человек жмёт второй раз, а каждое нажатие тратит попытку из защиты от перебора. */
.tk-form .btn:disabled{opacity:.55;cursor:default}
.tk-meta{margin-top:18px}
.tk-meta .lock{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink3)}
.tk-meta .lock svg{flex-shrink:0;color:var(--ok)}
.tk-nf{background:#FEF7F6;border:1px solid #F3C6C0;border-radius:20px;padding:24px 26px;display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start}
.tk-nf .i{width:42px;height:42px;border-radius:12px;background:var(--red-bg);color:var(--red-t);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tk-nf .tx{flex:1 1 280px;min-width:0}
.tk-nf b{font-size:18px;font-weight:800;color:var(--red-t);display:block;margin-bottom:6px;letter-spacing:-.3px}
.tk-nf p{font-size:15px;color:var(--ink2);line-height:1.6;margin-bottom:14px;text-wrap:pretty}
.tk-nf .b{display:flex;flex-wrap:wrap;gap:10px}
.tk-card{border:1px solid var(--ln);border-radius:22px;overflow:hidden;box-shadow:var(--sh1)}
.tk-head{background:var(--dark);padding:26px 28px}
.tk-head>.l,.tk-head>.r{display:inline-block;vertical-align:top}
.tk-head{display:flex;flex-wrap:wrap;gap:18px 26px;align-items:flex-start}
.tk-head .l{flex:1 1 300px;min-width:0}
.tk-head .r{flex:0 1 220px;min-width:0}
.tk-head .pills{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:9px}
.tk-head .pill{background:rgba(157,187,255,.16);color:var(--ac-d);font-size:12.5px;font-weight:800;
  padding:5px 11px;border-radius:8px}
.tk-head .no{font-size:13.5px;color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums;white-space:nowrap}
.tk-head .t{font-size:clamp(23px,2.8vw,30px);font-weight:800;color:#fff;letter-spacing:-.9px;line-height:1.2;text-wrap:pretty}
.tk-head .n{font-size:15.5px;color:rgba(255,255,255,.72);margin-top:8px;line-height:1.55;max-width:460px;text-wrap:pretty}
.tk-head .r .k{font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:6px}
.tk-head .r .v{font-size:19px;font-weight:800;color:#fff;letter-spacing:-.3px;line-height:1.35}
.tk-head .upd{font-size:13.5px;color:rgba(255,255,255,.6);margin-top:12px}
.tk-rail{display:flex;gap:5px;margin-top:24px;flex:1 1 100%}
.tk-rail .r{flex:1;min-width:0}
.tk-rail .bar{display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.14)}
.tk-rail .r.done .bar{background:var(--ok)}
.tk-rail .r.now .bar{background:var(--ac-d)}
.tk-rail .l{display:block;font-size:12px;color:rgba(255,255,255,.5);margin-top:7px;line-height:1.3}
.tk-rail .r.done .l,.tk-rail .r.now .l{color:rgba(255,255,255,.85)}
.tk-body{display:flex;flex-wrap:wrap;background:#fff}
.tk-hist{flex:1.5 1 340px;min-width:0;padding:26px 28px;border-right:1px solid var(--ln2)}
.tk-side{flex:1 1 280px;min-width:0;padding:26px 28px;background:#FBFCFE}
.tk-hist .k,.tk-side .k{font-size:12.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--ink3);margin-bottom:18px}
.tk-hist .s{display:flex;gap:15px}
.tk-hist .ax{display:flex;flex-direction:column;align-items:center;flex-shrink:0}
.tk-hist .dot{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--bg3);color:#A6AFBE;flex-shrink:0}
.tk-hist .s.done .dot{background:var(--ok-bg);color:var(--ok)}
.tk-hist .s.now .dot{background:var(--ac-s);color:var(--ac)}
.tk-hist .ln{flex:1;width:2px;background:var(--ln);margin:4px 0}
.tk-hist .s.done .ln{background:#A9DCC2}
.tk-hist .tx{flex:1;min-width:0;padding-bottom:22px}
.tk-hist .tx b{font-size:15.5px;display:block;letter-spacing:-.2px;color:var(--ink3)}
.tk-hist .s.done .tx b,.tk-hist .s.now .tx b{color:var(--ink)}
.tk-hist .t{display:block;font-size:13.5px;color:var(--ink4);font-variant-numeric:tabular-nums;margin:2px 0 5px}
.tk-hist .n{display:block;font-size:14px;color:var(--ink3);line-height:1.55;text-wrap:pretty}
.tk-item{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--ln);border-radius:14px;
  padding:14px;margin-bottom:12px}
.tk-item .ph{width:56px;height:56px;border-radius:10px;flex-shrink:0;
  background:repeating-linear-gradient(45deg,var(--bg3) 0 5px,#E3E8F0 5px 8px)}
.tk-item b{font-size:15.5px;font-weight:700;letter-spacing:-.2px;line-height:1.35;display:block;text-wrap:pretty}
.tk-item span{font-size:13.5px;color:var(--ink3);margin-top:3px;font-variant-numeric:tabular-nums;display:block}
.tk-facts{background:#fff;border:1px solid var(--ln);border-radius:14px;padding:4px 16px;margin-bottom:14px}
.tk-facts .f{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--ln2);font-size:14px}
.tk-facts .f:last-child{border-bottom:none}
.tk-facts span{color:var(--ink3);flex-shrink:0}
.tk-facts b{text-align:right}
.tk-box{background:var(--ac-c);border:1px solid var(--ac-b);border-radius:14px;padding:16px;margin-bottom:14px}
.tk-box .k{font-size:13px;color:var(--ink3);font-weight:600;margin-bottom:5px;text-transform:none;letter-spacing:0}
.tk-box .v{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.tk-box .v b{font-size:19px;letter-spacing:-.3px;font-variant-numeric:tabular-nums}
.tk-box .cp{font-size:13.5px;font-weight:700;color:var(--ac)}
.tk-box .addr{font-size:16px;letter-spacing:-.2px;display:block;line-height:1.4}
.tk-box .h{font-size:13.5px;color:var(--ink3);margin-top:5px}
.tk-acts{display:flex;flex-wrap:wrap;gap:9px}
.tk-acts .btn-line{flex:1 1 130px}
.tk-note{font-size:12.5px;color:var(--ink3);line-height:1.5;margin-top:12px;text-wrap:pretty}
.tk-faq{display:flex;flex-wrap:wrap;gap:16px}
.tk-faq .q{flex:1 1 300px;min-width:0;background:var(--bg2);border-radius:18px;padding:24px 26px}
.tk-faq .q b{font-size:17px;font-weight:800;letter-spacing:-.3px;margin-bottom:9px;display:block;text-wrap:pretty}
.tk-faq .q p{font-size:15px;color:var(--ink2);line-height:1.6;text-wrap:pretty}
@media (max-width:620px){
  .tk-form{padding:20px}
  .tk-form .btn{flex:1 1 100%}
  .tk-hist,.tk-side{padding:20px}
  .tk-hist{border-right:none;border-bottom:1px solid var(--ln2)}
  .tk-rail .l{font-size:11px}
}

/* ── Оформление заказа: доставка по России по макету (TR-136) ── */
.co-ru-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;align-items:start;margin-top:18px}
/* TR-181: подпись поля — общий класс, а не только для блока «по России». Раньше
   у «Улицы и дома», «Квартиры», «Имени», телефона и трёх полей окна «Задать
   вопрос» подписи не было вовсе: только серый текст внутри поля, который исчезает,
   как только начинаешь печатать, — потом не понять, где что вписано. */
.co-ru-grid .f,.co-fields .f,.modal-f .f{min-width:0;display:block}
.co-flb{display:block;font-size:13px;font-weight:700;color:var(--ink3);margin-bottom:7px}
.co-ru-grid .sug{display:block;position:relative}
.co-ru-grid .fld{width:100%;height:54px}
/* Кнопка-раскрывашка терминала: то же поле по высоте и рамке, что и город
   рядом, — иначе два соседних поля выглядят разными по природе. */
.co-term-btn{width:100%;height:54px;display:flex;align-items:center;gap:10px;padding:0 16px;
  border:1.5px solid var(--ln);border-radius:12px;background:#fff;transition:border-color .15s}
.co-term-btn:hover:not(:disabled){border-color:var(--ac)}
.co-term-btn:disabled{background:var(--bg3);cursor:default}
.co-term-btn .nm{flex:1 1 auto;min-width:0;font-size:15px;font-weight:700;line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.co-term-btn .ch{flex-shrink:0;display:flex;color:var(--ink3);transition:transform .15s}
.co-term-btn.is-open .ch{transform:rotate(180deg)}
/* TR-155: адрес терминала оставался только в этой свёрнутой кнопке, и на телефоне
   ему давали одну строку в жёстких 54 точках высоты — срезался всегда хвост, то
   есть номер дома и корпус, ровно то, ради чего адрес и читают (на 320 срезались
   все 18 проверенных адресов). На узких экранах разрешаем перенос и высоту по
   содержимому. */
@media (max-width:620px){
  .co-term-btn{height:auto;min-height:54px;padding:13px 16px;align-items:flex-start}
  .co-term-btn .nm{white-space:normal;overflow:visible;text-overflow:clip}
  .co-term-btn .ch{margin-top:3px}
}
.co-ship-when{margin-top:14px;display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;
  background:var(--ac-c);border:1px solid var(--ac-b2);border-radius:14px;padding:16px 18px}
.co-ship-when .l{flex:1 1 220px;min-width:0}
.co-ship-when .l b{font-size:15.5px;font-variant-numeric:tabular-nums;display:block}
.co-ship-when .l .d{font-size:14px;color:var(--ink3);line-height:1.5;text-wrap:pretty;margin-top:2px}
.co-ship-when .r{flex:1 1 260px;min-width:0}
.co-ship-when .co-flb{display:block;font-size:13px;font-weight:700;color:var(--ink3);margin-bottom:7px}
/* «Когда платить» — две карточки-выбора, как в макете, а не переключатель:
   это такой же выбор, как способ получения, и выглядеть должен так же. */
.co-ship-when .cards{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.co-ship-when .cards button{background:#fff;border:1.5px solid var(--ln);border-radius:12px;
  padding:12px 14px;font-size:14.5px;font-weight:700;text-align:center;color:var(--ink2);
  transition:border-color .15s,color .15s}
.co-ship-when .cards button:hover{border-color:var(--ac)}
.co-ship-when .cards button.on{border-color:var(--ac);color:var(--ac);background:var(--ac-c)}
/* Итог по макету: крупная зелёная сумма. */
.co-sum .total .num{font-size:30px;letter-spacing:-1.1px;color:var(--ok)}
@media (max-width:620px){
  .co-ship-when .cards{grid-template-columns:1fr}
}

/* ══════════════ Подбор по авто (TR-310) ══════════════
   По макету handoff-picker: серая подложка, белые карточки с тенью, каскад из
   четырёх списков и карточка результата справа. Списки — СИСТЕМНЫЕ
   (data-dd="native", свой выпадающий список сайта их не подменяет): марок 436,
   искать среди них по первым буквам умеет только системный список, а на
   телефоне системный выбор и так удобнее. Цвета текста — не светлее --ink4:
   бледно-серые подписи макета (#A6AFBE) не проходят по контрасту. */
.pk{background:var(--bg3);padding-bottom:4px}
.pk-top{padding-top:34px}
.pk-h1{font-size:clamp(28px,3.4vw,38px);letter-spacing:-1.2px;max-width:780px}
.pk-lead{font-size:17px;color:var(--ink2);line-height:1.6;max-width:640px;margin-top:10px;text-wrap:pretty}
.pk-sec-k{padding-top:22px}
.pk-sec-g{padding-top:16px}
.pk-sec{padding-top:34px}
.pk-sec-l{padding-top:56px}
.pk-sec-s{padding-top:16px}
.pk-h2{font-size:24px;font-weight:800;letter-spacing:-.7px;line-height:1.3;margin-bottom:16px}
.pk-h3{font-size:20px;font-weight:800;letter-spacing:-.5px;line-height:1.3;margin-bottom:12px}
.pk-hd{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px;margin-bottom:16px}
.pk-hd .pk-h2{margin-bottom:0}
.pk-hd a{font-size:14.5px;font-weight:600;white-space:nowrap}
.pk-kinds{display:flex;flex-wrap:wrap;gap:8px}
.pk-kind{padding:10px 17px;border-radius:11px;font-size:14.5px;font-weight:700;white-space:nowrap;background:#fff;
  color:var(--ink2);box-shadow:0 1px 3px rgba(16,21,31,.07);transition:background-color .15s,color .15s}
.pk-kind:hover{color:var(--ac)}
.pk-kind.on{background:var(--ac);color:#fff}
/* TR-327: колонка не шире самого экрана. Порог 320 без min() на телефоне 320
   (поле страницы 16 — места 288) вытягивал карточку со списками за край, и
   страница ездила вбок. */
.pk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:16px;align-items:stretch}
.pk-card{min-width:0;background:#fff;border-radius:20px;padding:26px;box-shadow:0 4px 20px rgba(16,21,31,.05);
  display:flex;flex-direction:column}
.pk-seg{display:inline-flex;flex-wrap:wrap;gap:2px;background:var(--bg3);border-radius:12px;padding:3px;
  margin-bottom:20px;align-self:flex-start;max-width:100%}
.pk-seg button{padding:9px 16px;border-radius:9px;font-size:14.5px;font-weight:600;color:var(--ink3);white-space:nowrap}
.pk-seg button:hover{color:var(--ink)}
.pk-seg button.on{background:#fff;color:var(--ink);font-weight:700;box-shadow:0 1px 3px rgba(16,21,31,.13)}
.pk-sels{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.pk-f{display:block;min-width:0}
.pk-lb{display:block;font-size:13px;font-weight:700;color:var(--ink3);margin-bottom:7px}
.pk-sel,.pk-in{width:100%;height:54px;border:1.5px solid var(--ln);border-radius:12px;padding:0 16px;font-size:15.5px;
  font-weight:600;background-color:#fff;color:var(--ink);outline:none;transition:border-color .15s}
.pk-sel{appearance:none;-webkit-appearance:none;padding-right:42px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6B7D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:16px}
.pk-sel:focus,.pk-in:focus{border-color:var(--ac)}
.pk-sel:disabled{background-color:var(--bg2);color:var(--ink4);cursor:default}
/* TR-311: списки подбора — общий выпадающий сайта (.dd) в размере поля подбора.
   Сам <select> под ним спрятан; правила .pk-sel выше — для работы без скрипта. */
.pk-f .dd-btn{height:54px;border-radius:12px;padding:0 42px 0 16px;font-size:15.5px;font-weight:600;
  background-position:right 15px center;background-size:16px}
.pk-f .dd-list{max-height:340px;max-width:min(360px,90vw)}
.pk-in{text-transform:uppercase;letter-spacing:.5px}
.pk-in::placeholder{text-transform:none;letter-spacing:0;font-weight:500;color:var(--ink4)}
.pk-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.pk-tile{display:flex;align-items:center;gap:11px;border-radius:14px;padding:12px 13px;background:#fff;
  border:1.5px solid var(--ln);color:var(--ink);transition:border-color .15s}
.pk-tile:hover{border-color:var(--ac)}
.pk-tile .i{width:38px;height:38px;border-radius:10px;background:var(--bg3);border:1px solid var(--ln);display:flex;
  align-items:center;justify-content:center;font-size:14px;font-weight:800;color:var(--ink4);flex-shrink:0}
.pk-tile .n{font-size:14.5px;font-weight:700;letter-spacing:-.2px;min-width:0;overflow-wrap:anywhere}
.pk-more{display:inline-block;margin-top:14px;font-size:14.5px;font-weight:700}
.pk-plate{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.pk-plate .pk-f{flex:1 1 260px}
.pk-go{flex:0 0 auto;height:54px;background:var(--ac);color:#fff;font-weight:800;font-size:16px;padding:0 26px;
  border-radius:12px;transition:filter .15s}
.pk-go:hover{filter:brightness(1.14)}
.pk-note{margin-top:11px;font-size:14px;color:var(--ink3);line-height:1.55}
.pk-side{min-width:0;display:flex;flex-direction:column;gap:12px}
.pk-empty{flex:1;background:#fff;border:1.5px dashed #E1E6EF;border-radius:20px;padding:26px;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center}
.pk-empty .i{width:48px;height:48px;border-radius:14px;background:var(--bg3);display:flex;align-items:center;
  justify-content:center;margin:0 auto 14px;color:var(--ink4)}
.pk-empty b{font-size:17px;font-weight:800;letter-spacing:-.3px;margin-bottom:6px}
.pk-empty span:last-child{font-size:14.5px;color:var(--ink3);line-height:1.55;max-width:320px}
.pk-res{flex:1;background:#fff;border-radius:20px;padding:22px;box-shadow:0 4px 20px rgba(16,21,31,.05);animation:tin .22s ease}
.pk-res-h{display:flex;align-items:center;gap:9px;margin-bottom:14px;font-size:12.5px;font-weight:800;
  letter-spacing:.9px;text-transform:uppercase;color:var(--ok)}
.pk-res-h .ok{width:22px;height:22px;border-radius:7px;background:var(--ok-bg);display:flex;align-items:center;justify-content:center}
.pk-res-h-no{color:var(--ink3)}
.pk-car{font-size:14.5px;color:var(--ink3);margin-bottom:14px;font-variant-numeric:tabular-nums}
.pk-res-row{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}
.pk-res-row .ph{flex:0 0 76px;height:76px;border-radius:14px;overflow:hidden;border:1px solid var(--ln);background:#fff}
.pk-res-row .ph img{width:100%;height:100%;object-fit:contain;padding:4px}
.pk-res-row .tx{flex:1 1 auto;min-width:0}
.pk-res-row .ln{display:block;font-size:11.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--ac);margin-bottom:3px}
.pk-res-row .nm{display:block;font-size:18px;font-weight:800;letter-spacing:-.4px;line-height:1.25;color:var(--ink);margin-bottom:6px}
.pk-res-row .nm:hover{color:var(--ac)}
.pk-res-row .chips{display:flex;flex-wrap:wrap;gap:6px}
.pk-res-row .chips span{background:var(--bg3);border-radius:8px;padding:4px 9px;font-size:13px;font-weight:700;
  color:var(--ink2);font-variant-numeric:tabular-nums;white-space:nowrap}
.pk-pr{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:12px}
.pk-pr b{font-size:28px;font-weight:800;letter-spacing:-1.1px;font-variant-numeric:tabular-nums}
.pk-pr span{font-size:13.5px;color:var(--ink3)}
.pk-need{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13.5px;color:var(--ink3);margin-bottom:14px;line-height:1.45}
.pk-need b{color:var(--ink);font-weight:700}
.pk-res-p{font-size:14.5px;color:var(--ink2);line-height:1.55;margin-bottom:14px}
.pk-buy{display:block;width:100%;text-align:center;background:var(--ac);color:#fff;font-weight:800;font-size:16.5px;
  padding:16px;border-radius:13px;transition:filter .15s}
.pk-buy:hover{filter:brightness(1.14);color:#fff}
.pk-buy2{width:100%;margin-top:10px;background:var(--ac-s);color:var(--ac);font-weight:700;font-size:15.5px;padding:14px;
  border-radius:13px;text-align:center;transition:background-color .15s}
.pk-buy2:hover{background:#DFE9FF}
.pk-alt-l{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding-top:16px;
  border-top:1px solid var(--ln2);font-size:15px;font-weight:700}
.pk-alt{position:relative;display:flex;min-width:0}
.pk-alt>.pcard{flex:1;min-width:0;background:#fff;border-color:transparent;box-shadow:0 4px 20px rgba(16,21,31,.05)}
/* TR-328: метка «Рекомендуем / Дешевле / Мощнее» — под подписью наличия, в
   одной стопке с ней (.pk-badges на месте .stock). В правом углу она на
   телефоне наезжала на «В наличии». */
.pk-badges{position:absolute;left:10px;top:10px;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.pk-badges .stock{position:static}
.pk-tag{font-size:11.5px;font-weight:800;padding:4px 9px;border-radius:7px;
  background:#fff;color:var(--ink2);box-shadow:0 1px 3px rgba(16,21,31,.12)}
.pk-tag.rec{background:var(--ok);color:#fff;box-shadow:none}
.pk-tbl-w{overflow-x:auto;overflow-y:hidden;background:#fff;border-radius:20px;box-shadow:0 4px 20px rgba(16,21,31,.05)}
.pk-tbl{width:100%;border-collapse:collapse;font-size:14.5px;font-variant-numeric:tabular-nums}
.pk-tbl th{text-align:left;font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--ink3);
  padding:14px 16px;border-bottom:1px solid var(--ln);white-space:nowrap}
.pk-tbl td{padding:12px 16px;border-bottom:1px solid var(--ln2);vertical-align:top}
.pk-tbl tr:last-child td{border-bottom:none}
.pk-tbl td:first-child{white-space:nowrap}
.pk-ben{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.pk-b{border-radius:18px;padding:20px 22px;display:flex;flex-direction:column}
.pk-b .i{display:flex;margin-bottom:12px}
.pk-b b{font-size:18px;letter-spacing:-.3px;margin-bottom:6px}
.pk-b p{font-size:14px;font-weight:600;line-height:1.5}
.pk-b .bt{margin-top:auto;align-self:flex-start;display:inline-flex;color:#fff;font-weight:700;font-size:13.5px;
  padding:9px 15px;border-radius:10px;transition:filter .15s}
.pk-b p+.bt{margin-top:14px}
.pk-b .bt:hover{filter:brightness(1.12);color:#fff}
.pk-b-g{background:linear-gradient(160deg,#EFF9F2,#D6EDDF)}
.pk-b-g .i{color:#0B6B3C}
.pk-b-g p{color:#2C4A38}
.pk-b-g .bt{background:#0B6B3C}
.pk-b-s{background:linear-gradient(160deg,#F2F4F9,#DCE1EB)}
.pk-b-s .i{color:var(--ink)}
.pk-b-s p{color:#3C4759}
.pk-b-s .bt{background:var(--ink)}
.pk-b-b{background:linear-gradient(160deg,#F4F8FF,#E1EBFA)}
.pk-b-b .i{color:var(--ac)}
.pk-b-b p{color:#334159}
.pk-b-b .bt{background:var(--ac)}
.pk-faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;align-items:start}
.pk-faq{max-width:none}
.pk-faq .faq{background:#fff;border:none;box-shadow:0 4px 20px rgba(16,21,31,.05)}
.pk-how{background:#fff;border-radius:20px;padding:24px;box-shadow:0 4px 20px rgba(16,21,31,.05);display:flex;flex-direction:column;gap:14px}
.pk-how .t{font-size:20px;font-weight:800;letter-spacing:-.5px}
.pk-how .st{display:flex;gap:13px;align-items:flex-start}
.pk-how .n{width:30px;height:30px;border-radius:10px;background:var(--ac-s);color:var(--ac);font-size:14px;font-weight:800;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pk-how .st b{display:block;font-size:15.5px;margin-bottom:2px}
.pk-how .st span span{font-size:14.5px;color:var(--ink3);line-height:1.55}
.pk-man{background:#fff;border-radius:20px;padding:28px;box-shadow:0 4px 20px rgba(16,21,31,.05);display:flex;flex-wrap:wrap;
  align-items:center;gap:22px 32px}
.pk-man .av{flex:0 0 60px;height:60px;border-radius:50%;background:var(--ac-s);color:var(--ac);display:flex;align-items:center;justify-content:center}
.pk-man .t{flex:1 1 260px;min-width:0}
.pk-man .t b{display:block;font-size:18px;letter-spacing:-.3px}
.pk-man .t span{display:block;font-size:14.5px;color:var(--ink3)}
/* TR-353: номер — отдельной кнопкой рядом с «Перезвоните мне», часов работы
   в карточке нет. Кнопки одной высоты с «Перезвоните мне» (54, как поля
   подбора), на телефоне — во всю ширину, одна под другой. Раньше (TR-331)
   номер и часы стояли столбиком текстом. */
.pk-man-b{display:flex;flex-wrap:wrap;gap:10px}
.pk-tel{height:54px;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:0 22px;font-size:17px;
  font-weight:800;letter-spacing:-.2px;font-variant-numeric:tabular-nums}
.pk-tel svg{flex-shrink:0}
@media (max-width:620px){
  .pk-man{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:center}
  .pk-man .av{width:44px;height:44px}
  .pk-man .av svg{width:20px;height:20px}
  .pk-man .t b{font-size:17px}
  .pk-man-b{grid-column:1/-1;display:grid;gap:10px}
  .pk-man .pk-go,.pk-tel{width:100%;text-align:center}
}
.pk-models{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.pk-models a{display:flex;justify-content:space-between;align-items:baseline;gap:10px;background:#fff;border-radius:12px;
  padding:12px 14px;color:var(--ink);box-shadow:0 1px 3px rgba(16,21,31,.06)}
.pk-models a:hover b{color:var(--ac)}
.pk-models b{font-size:15px;min-width:0;overflow-wrap:anywhere}
.pk-models span{font-size:13px;color:var(--ink3);white-space:nowrap;font-variant-numeric:tabular-nums}
/* TR-351: все марки — сеткой плиток со значком-буквой (та же .pk-tile, что в
   «Плитках марок»), только плотнее: марок 436. Буква в значке — алфавитный
   указатель, строк-заголовков «А», «Б» нет. */
.pk-az{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.pk-az .pk-tile{padding:9px 11px;gap:10px;border-radius:12px}
.pk-az .pk-tile .i{width:32px;height:32px;border-radius:9px;font-size:13px}
.pk-az .pk-tile .n{font-size:14.5px;font-weight:600}
/* На телефоне значок и поля мельче: плитка 175 точек, и «Брянксельмаш»
   кеглем 14,5 рвалось посреди слова. С 360 точек длинные имена помещаются
   целиком; на 320 самые длинные ещё переносятся — одна колонка удвоила бы
   и без того длинный список. */
@media (max-width:620px){
  .pk-az{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pk-az .pk-tile{padding:9px 10px;gap:8px}
  .pk-az .pk-tile .i{width:28px;height:28px;border-radius:8px;font-size:12px}
  .pk-az .pk-tile .n{font-size:13.5px}
}
.pk-seo{display:flex;flex-wrap:wrap;gap:32px}
.pk-seo .l{flex:1.3 1 420px;min-width:0}
.pk-seo .l p{font-size:15.5px;color:var(--ink2);line-height:1.65;margin-bottom:12px}
.pk-seo .r{flex:1 1 260px;min-width:0}
.pk-seo .h{font-size:13px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--ink3);margin-bottom:14px}
.pk-seo .links{display:flex;flex-direction:column;gap:9px}
.pk-seo .links a{font-size:15px;font-weight:600}
/* TR-314: страницы подбора сменяются без перезагрузки. Пока идёт запрос, всё,
   кроме карточки со списками, чуть гаснет, новое проявляется. Карточку со
   списками не трогаем: человек только что в ней выбирал. Метка новой разметки —
   .pk-fresh, не .pk-in: .pk-in — поле госномера. */
.pk-busy{cursor:progress}
.pk-busy .pk-top,.pk-busy .pk-side,.pk-busy>.pk-sec{opacity:.45;transition:opacity .2s}
.pk-fresh .pk-top,.pk-fresh .pk-side,.pk-fresh>.pk-sec{animation:pkin .28s ease}
@keyframes pkin{from{opacity:.35}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.pk-fresh .pk-top,.pk-fresh .pk-side,.pk-fresh>.pk-sec{animation:none}}
/* TR-315: годы и двигатели в таблице — ссылки на свои страницы, строка этой
   страницы подсвечена. */
.pk-tbl td a{font-weight:600}
.pk-tbl tr.on td{background:var(--ac-c)}
.pk-tbl tr.on td:first-child{box-shadow:inset 3px 0 0 var(--ac)}
/* Крошки на страницах подбора — ВНИЗУ (по задаче TR-310), над подвалом. */
.crumbs-bottom{padding-top:28px;padding-bottom:4px}
.crumbs-bottom .crumbs{padding:0}
@media (max-width:620px){
  .pk-card,.pk-res,.pk-empty,.pk-how,.pk-man{padding:20px}
  .pk-sec-l{padding-top:40px}
  .pk-seo .l{flex-basis:100%}
}

/* ── Оформление заказа, вторая версия макета (TR-308, handoff-checkout) ──
   Слева шаги на серой подложке, справа сводка на цветной полосе #E4E9F1 — во
   всю высоту ряда и до правого края окна. Полоса не карточка: радиуса у неё
   нет, а за контейнер она выходит псевдоэлементом шириной 100vw. Излишек режет
   обёртка .co-v2, и режет через overflow-x:clip, а не hidden: hidden сделал бы
   её прокручиваемым контейнером, и сводка перестала бы прилипать (sticky
   держится ближайшего прокручиваемого предка). hidden впереди — для браузеров
   без clip (Safari до 16): сводка там не прилипнет, но и вбок страница не
   поедет. Базы колонок 520 + 330 сходятся в ряд уже от 900 точек — ниже
   раскладка складывается сама (медиазапрос ниже), без полосы «на полпути». */
.co-v2{background:var(--bg3);overflow-x:hidden;overflow-x:clip}
.co-v2 .co-top{padding-top:0}
.co-v2 .checkout{gap:0;align-items:stretch}
.co-v2 .co-main{flex:2 1 520px;padding:30px 24px 60px 0}
.co-v2 .co-head{margin-bottom:6px}
.co-v2 .co-side{position:relative;top:auto;display:block;flex:1 1 330px;background:#E4E9F1;padding:30px 0 60px 24px}
.co-v2 .co-side::before{content:'';position:absolute;top:0;bottom:0;left:100%;width:100vw;background:#E4E9F1;pointer-events:none}
.co-side-in{position:sticky;top:20px;display:flex;flex-direction:column;gap:12px}
/* Полоса и подложка доходят до подвала: отступ над ним на этих страницах снят. */
main:has(> .co-v2) + .footer-bare{margin-top:0}
/* Сводка — белая карточка на полосе, кнопка под итогом. */
.co-v2 .co-sum{background:#fff;border-radius:18px;padding:22px;box-shadow:var(--sh1)}
.co-v2 .co-sum-h{margin:0 0 14px;padding:0;border:0;gap:6px 12px}
.co-v2 .co-sum-h b{letter-spacing:-.5px}
.co-v2 .co-sum-h span{font-size:14.5px;font-variant-numeric:tabular-nums}
.co-v2 .co-sum .rows{gap:10px}
.co-v2 .co-sum .row2{font-size:15.5px}
.co-v2 .co-sum .row2>span:first-child{color:var(--ink2)}
.co-v2 .co-sum .total{flex-wrap:wrap;gap:6px 12px;padding:16px 0 0}
.co-v2 .co-sum .total>span:first-child{font-size:22px;font-weight:800;letter-spacing:-.5px}
.co-v2 .co-sum .total-old{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;
  font-size:14.5px;color:var(--ink4);text-align:left}
.co-v2 .co-pay{margin-top:20px}
.co-v2 .co-need{margin-top:12px;font-size:14px;color:var(--ink3)}
.co-v2 .co-sum .agree-w{margin:12px 0 0}
.co-v2 .co-offer{margin-top:6px;font-size:14px}
.co-v2 .co-invoice{width:100%;text-align:left;border:0;box-shadow:var(--sh1)}
.co-v2 .co-invoice:hover{box-shadow:0 6px 24px rgba(16,21,31,.1)}
.co-v2 .co-invoice .i{width:44px;height:44px;border-radius:13px}
.co-v2 .co-invoice .tx b{font-size:16px;font-weight:800;letter-spacing:-.2px}
.co-v2 .co-invoice .tx span{display:block;font-size:14px;line-height:1.5}
/* «Самовывоз»: установка и «Сдать старый» — два синих блока-тумблера подряд. */
.co-v2 [data-mpane="pickup"] .sw-row{margin-top:10px}
.co-v2 .co-shop + .sw-row{margin-top:14px}
/* Строка скидки на плитке «Самовывоз»: пока способ не выбран, о скидке за
   старый говорит только она (TR-140). */
.pick .co-tip{display:block;margin-top:6px;font-size:13.5px;font-weight:700;color:var(--ok);line-height:1.45}
.pick.is-off .co-tip{color:var(--ink4)}
/* Строка под названием — «ток · масса · артикул». На телефоне она идёт в две
   строки, и скелет тоже в две (TR-304), иначе заполнение сдвинет шаг. */
.co-v2 .skel-meta{width:min(320px,85%)}
.skel-meta2{display:none}
@media (max-width:900px){
  .co-v2 .co-main{flex-basis:100%;padding:24px 0 28px}
  .co-v2 .co-side{flex-basis:100%;margin:0 -24px;padding:24px 24px 36px}
  .co-v2 .co-side::before{display:none}
  .co-side-in{position:static}
}
@media (max-width:620px){
  .co-v2 .skel-meta{width:90%}
  .skel-meta2{display:inline-block;width:55%}
}

/* «Заказ принят» по тому же макету: карточка на серой подложке, сводка
   таблицей с колонкой подписей в 150 точек, под карточкой три шага. */
.done-v2{background:var(--bg3)}
/* Серая вся страница под шапкой, вместе со строкой крошек: иначе между синей
   полосой разделов и подложкой оставалась белая полоска. У шапки фон свой. */
body:has(main > .done-v2){background:var(--bg3)}
main:has(> .done-v2) + .footer{margin-top:0}
.done-w{max-width:820px;margin:0 auto;padding:40px 24px 60px}
.done-v2 .done{max-width:none;background:#fff;border-radius:22px;padding:34px;box-shadow:var(--sh1)}
.done-v2 .done-i{width:56px;height:56px;border-radius:17px;background:var(--ok-bg);color:var(--ok);margin-bottom:20px}
.done-v2 .done-i i svg{width:28px;height:28px}
/* Ожидание оплаты — светлая янтарная плашка и тёмно-янтарный значок: на
   светлом фоне сам --amber почти не виден. */
.done-v2 .done-i.is-wait{background:#FDF3D7;color:#A16207}
.done-h{font-size:clamp(26px,3.2vw,34px);letter-spacing:-1px;line-height:1.12;margin-bottom:10px}
.done-v2 .lead-ink{margin:0 0 26px;max-width:none;line-height:1.6}
.done-v2 .done-ask{margin:0}
.done-v2 .done-rows{gap:0;margin:0;padding:0;background:#fff;border:1.5px solid var(--ln);border-radius:16px;overflow:hidden}
.done-v2 .done-rows .row2{flex-wrap:wrap;justify-content:flex-start;gap:6px 16px;padding:14px 18px;font-size:15.5px}
.done-v2 .done-rows .row2+.row2{border-top:1px solid var(--ln3)}
.done-v2 .done-rows .row2:nth-child(even){background:#FBFCFE}
.done-v2 .done-rows .row2>span{flex:0 0 150px;font-size:14.5px;color:var(--ink3)}
.done-v2 .done-rows .row2 b{flex:1 1 200px;text-align:left;white-space:normal;text-wrap:pretty;font-variant-numeric:tabular-nums}
.done-v2 .done-pay{margin:16px 0 0}
.done-v2 .done-btns{gap:12px;margin-top:24px}
.done-v2 .done-btns>a{flex:1 1 200px;padding:16px;font-size:16px;border-radius:13px}
.done-next{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.done-next .n{flex:1 1 220px;min-width:0;background:#fff;border-radius:18px;padding:22px;box-shadow:var(--sh1)}
.done-next i{width:34px;height:34px;border-radius:11px;background:var(--ac-s);color:var(--ac);font-style:normal;
  font-size:15px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.done-next b{display:block;font-size:16px;font-weight:800;margin-bottom:5px}
.done-next p{font-size:14px;color:var(--ink3);line-height:1.55;text-wrap:pretty}
.done-v2 .done-note{margin-top:16px;font-size:15px;color:var(--ink3);line-height:1.6;text-wrap:pretty}
.done-v2 .done-note a{color:var(--ac);font-weight:700}
@media (max-width:620px){
  .done-w{padding-top:24px;padding-bottom:40px}
  .done-v2 .done{padding:24px 20px;border-radius:20px}
}

/* ── Главная, вторая версия макета (TR-309, handoff-main-page) ──
   Блоки в порядке макета: полоса-герой, «По технике», четыре карточки
   (доставка, установка, трейд-ин, самовывоз), «Выбрать аккумулятор», «Чаще
   всего берут», обратный звонок, марки, факты, «Как купить», категории. Шапка
   и подвал — общие для сайта, их макет не трогает. Цифры и тексты — с сайта. */
/* TR-356, TR-358: переносов по слогам на главной больше нет — «аккумуля-тор»,
   «подбе-рём», «Тю-мени» владелец забраковал. Строки выравнивает text-wrap. */
.hm p,.hm h1,.hm h2{text-wrap:pretty}
.hm-sec{padding-top:56px}
.hm-sec-top,.hm-sec-s{padding-top:16px}
.hm-sec-m{padding-top:34px}
.hm-over{font-size:12.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--ink3);margin-bottom:10px}
.hm-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px}
.hm-t{font-size:24px;font-weight:800;letter-spacing:-.7px;line-height:1.25;text-wrap:pretty}
.hm-t26{font-size:26px}
.hm-t20{font-size:20px;letter-spacing:-.5px;margin-bottom:16px}
.hm-more{font-size:14.5px;font-weight:600;white-space:nowrap;color:var(--ac)}
.hm-more-d{border-bottom:1px dashed #A9C2F2}
.hm-more-d:hover{border-color:var(--ac)}
/* Герой — полоса, а не экран: заголовок, три факта и фото в одну строку. */
.hm-hero{background:var(--bg2);border-radius:18px;padding:20px 24px;display:flex;flex-wrap:wrap;gap:16px 26px;align-items:center}
.hm-hero-t{flex:1.6 1 360px;min-width:0}
.hm-h1{font-size:clamp(23px,2.4vw,30px);line-height:1.16;letter-spacing:-.9px;margin-bottom:7px}
.hm-sub{font-size:15.5px;color:var(--ink2);line-height:1.5;max-width:520px;text-wrap:pretty}
.hm-chips{list-style:none;flex:0 1 220px;min-width:0;display:flex;flex-direction:column;gap:7px}
.hm-chips li{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink2)}
.hm-chips svg{flex-shrink:0}
.hm-hero-ph{flex:0 0 196px;height:100px;border:1px solid var(--ln);border-radius:14px;overflow:clip;background:#fff}
.hm-hero-ph img{width:100%;height:100%;object-fit:contain}
/* «По технике»: шесть одинаковых синих плиток, сами перестраиваются 6 → 4 → 2. */
.hm-tech{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px}
.hm-tile{min-width:0;background:var(--ac);border-radius:14px;padding:13px 14px;color:#fff;display:flex;align-items:center;gap:11px;transition:filter .16s}
.hm-tile:hover{filter:brightness(1.12);color:#fff}
.hm-tile svg{flex-shrink:0}
.hm-tile>span{min-width:0;display:flex;flex-direction:column;gap:1px}
.hm-tile b{font-size:14.5px;font-weight:800;letter-spacing:-.2px}
.hm-tile>span>span{font-size:13.5px;font-weight:700;color:#D7E4FF}
/* Четыре карточки: только градиент, без обводки. Самовывоз обрезает карту
   через overflow:clip — у ячейки сетки hidden обнулил бы её минимальную высоту. */
.hm-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:14px}
.hm-card{min-width:0;border-radius:15px;padding:15px 17px;color:var(--ink);display:flex;flex-direction:column;transition:box-shadow .16s}
a.hm-card:hover{box-shadow:0 6px 20px rgba(16,21,31,.09);color:var(--ink)}
.hm-c-ship{background:linear-gradient(160deg,#FDF7EB,#F2E3C6)}
.hm-c-inst{background:linear-gradient(160deg,#EFF9F2,#D6EDDF)}
.hm-c-trade{background:linear-gradient(160deg,#F2F4F9,#DCE1EB);padding:16px 17px}
.hm-c-pick{background:linear-gradient(160deg,#F4F8FF,#E1EBFA);padding:0;overflow:clip}
.hm-card-h{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.hm-card-h svg{flex-shrink:0}
.hm-card-h b{font-size:18px;letter-spacing:-.3px}
.hm-card-h .fr{margin-left:auto;font-size:12px;font-weight:800;color:#fff;background:var(--ok);border-radius:6px;padding:3px 8px;white-space:nowrap}
.hm-rows{display:flex;flex-direction:column;gap:5px;font-size:14px;font-weight:600}
.hm-rows>div{display:flex;justify-content:space-between;gap:10px}
.hm-rows span{color:#5E4E2A}
.hm-rows b{white-space:nowrap;font-weight:800}
.hm-card-p{font-size:14px;font-weight:600;line-height:1.5}
.hm-c-inst .hm-card-p{color:#2C4A38}
.hm-c-trade .hm-card-p{color:#3C4759;margin-bottom:12px}
.hm-c-trade .k{font-size:11.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#43506B;margin-bottom:7px}
.hm-c-trade .t{font-size:18px;font-weight:800;letter-spacing:-.3px;line-height:1.25;margin-bottom:6px;text-wrap:pretty}
.hm-card-b{margin-top:auto;padding-top:12px}
.hm-btn{display:inline-flex;align-items:center;gap:7px;color:#fff;font-weight:700;font-size:13.5px;padding:9px 15px;border-radius:10px;border:0;cursor:pointer;transition:filter .15s}
.hm-c-ship .hm-btn{background:#6F5417}
.hm-c-inst .hm-btn{background:#0B6B3C}
.hm-c-trade .hm-btn{background:var(--ink);align-self:flex-start;margin-top:auto}
.hm-c-trade .hm-btn:hover{filter:brightness(1.6)}
.hm-c-pick .hm-btn{background:var(--ac);align-self:flex-start}
.hm-c-pick:hover .hm-btn{filter:brightness(1.12)}
.hm-map{flex:1 1 auto;min-height:66px;position:relative;overflow:clip}
.hm-map svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.hm-map .pin{position:absolute;left:62%;top:calc(60% - 18px);width:18px;height:18px;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);background:var(--ac);border:2.5px solid #fff;box-shadow:0 3px 8px rgba(16,21,31,.25)}
.hm-pick-b{flex:0 0 auto;padding:14px 16px;display:flex;flex-direction:column}
.hm-pick-b .h{display:flex;align-items:center;gap:8px;margin-bottom:4px;color:var(--ac)}
.hm-pick-b .h b{font-size:15px;letter-spacing:-.2px;color:var(--ink)}
.hm-pick-b .d{font-size:13px;font-weight:600;color:#3C4759;line-height:1.45;margin-bottom:12px}
/* «Выбрать аккумулятор»: подбор (синий) и ёмкость (тёмный). Третьей колонки
   «Заодно пригодится» нет по решению владельца (TR-312). */
.hm-choose{display:flex;flex-wrap:wrap;gap:16px;align-items:stretch}
.hm-pick{flex:1.35 1 340px;min-width:0;background:var(--ac);border-radius:20px;padding:22px;display:flex;flex-direction:column}
.hm-pick-t{font-size:19px;font-weight:800;color:#fff;letter-spacing:-.4px;margin-bottom:3px}
.hm-pick-s{font-size:13.5px;color:#D7E4FF;line-height:1.45;margin-bottom:14px}
.hm-sels{display:flex;flex-wrap:wrap;gap:9px}
/* Списки — общий выпадающий сайта (.dd, TR-311): белые плашки на синем, как на
   /podbor/. Правила .hm-sel ниже — для самого <select>, он виден только без скрипта. */
.hm-sels .dd{flex:1 1 42%;min-width:132px}
.hm-sels .dd-btn{border:0;border-radius:10px;padding:12px 34px 12px 13px;font-size:15px;font-weight:600;
  background-position:right 13px center;background-size:14px}
.hm-sels .dd-btn:disabled{background-color:#E6EDFB;color:var(--ink3);cursor:not-allowed}
.hm-sels .dd.open .dd-btn,.hm-sels .dd-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hm-sel{flex:1 1 42%;min-width:132px;border:0;border-radius:10px;padding:12px 34px 12px 13px;font-size:15px;font-weight:600;color:var(--ink);
  -webkit-appearance:none;appearance:none;text-overflow:ellipsis;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%235F6B7D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 13px center}
.hm-sel:disabled{background-color:#E6EDFB;color:var(--ink3);cursor:not-allowed;opacity:1}
.hm-sel:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hm-pick-go{margin-top:12px;width:100%;background:#fff;color:var(--ac);font-weight:800;font-size:16px;padding:13px;border-radius:11px;border:0;cursor:pointer;transition:background-color .15s}
.hm-pick-go:hover{background:#EAF0FF}
.hm-pick-n{margin-top:auto;padding-top:14px;font-size:13px;color:#D7E4FF;line-height:1.45}
.hm-pick-n button{font:inherit;font-weight:700;color:#fff;background:none;border:0;border-bottom:1px solid #9DBBFF;padding:0;cursor:pointer}
.hm-caps{flex:.85 1 220px;min-width:0;background:var(--dark);border-radius:20px;padding:22px}
.hm-caps .hm-over{font-size:13px;color:var(--ac-d);margin-bottom:14px}
.hm-chiprow{display:flex;flex-wrap:wrap;gap:8px}
.hm-chiprow a{border:1px solid rgba(255,255,255,.2);border-radius:9px;padding:8px 12px;font-size:14px;font-weight:600;color:#fff;
  font-variant-numeric:tabular-nums;transition:background-color .15s,border-color .15s}
.hm-chiprow a:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.45);color:#fff}
/* Обратный звонок — та же форма заявки, что на «Контактах» (.js-form), с галочкой согласия. */
.hm-call{background:var(--ac-c);border:1.5px solid var(--ac-b);border-radius:22px;padding:28px;display:flex;flex-wrap:wrap;gap:26px;align-items:flex-start}
.hm-call-ic{flex:0 0 104px;height:104px;border-radius:50%;background:#fff;border:1px solid var(--ac-b2);color:var(--ac);display:flex;align-items:center;justify-content:center}
.hm-call-m{flex:1 1 380px;min-width:0}
.hm-call-m .hm-t{margin-bottom:8px}
.hm-call-m p{font-size:16px;color:var(--ink2);line-height:1.6;margin-bottom:16px;max-width:560px;text-wrap:pretty}
.hm-call-f{display:flex;flex-wrap:wrap;gap:10px;max-width:520px}
.hm-call-f .fld{flex:1 1 200px;width:auto;min-width:0;font-size:16px;font-weight:600;border-color:var(--ac-b);background:#fff}
.hm-call-f .btn{flex:0 0 auto;padding:14px 26px}
.hm-call .agree-w{margin:12px 0 0;max-width:560px}
.hm-call-r{flex:0 1 210px;min-width:0;background:#fff;border:1px solid var(--ac-b2);border-radius:16px;padding:18px}
.hm-call-r .hm-over{font-size:13px;margin-bottom:12px}
.hm-call-tel{display:block;font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.4px;font-variant-numeric:tabular-nums;margin-bottom:4px}
.hm-call-tel:hover{color:var(--ac)}
.hm-call-h{font-size:13px;color:var(--ink3);line-height:1.45;margin-bottom:12px}
.hm-call-w{width:100%;border:1.5px solid var(--ac-b);background:#fff;color:var(--ac);font-weight:700;font-size:14.5px;padding:11px;border-radius:11px;
  cursor:pointer;transition:background-color .15s,color .15s}
.hm-call-w:hover{background:var(--ac);color:#fff}
/* Марки: вкладки — элемент выбора, перехода у них нет. */
.hm-brands{border:1.5px solid var(--ln);border-radius:20px;padding:20px 22px 22px}
.hm-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.hm-tabs button{border:0;border-radius:11px;padding:10px 18px;font-size:15px;font-weight:700;background:var(--bg3);color:var(--ink2);cursor:pointer}
.hm-tabs button.on{background:var(--ac);color:#fff}
.hm-bl{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:2px 16px}
.hm-bl a{min-width:0;display:flex;align-items:center;gap:11px;padding:9px 8px;border-radius:10px;color:var(--ink2);font-size:15px;font-weight:600;
  transition:background-color .15s,color .15s}
.hm-bl a:hover{background:var(--ac-c);color:var(--ac)}
.hm-bl i{width:28px;height:28px;border-radius:50%;background:var(--bg3);border:1px solid var(--ln);flex-shrink:0;display:flex;align-items:center;
  justify-content:center;font-size:11px;font-weight:800;font-style:normal;color:var(--ink4)}
.hm-bn{margin-top:16px;padding-top:16px;border-top:1px solid var(--ln2);font-size:14px;color:var(--ink3);line-height:1.55;text-wrap:pretty}
.hm-facts{background:var(--bg2);border-radius:22px;padding:30px;display:flex;flex-wrap:wrap;gap:24px 40px}
.hm-facts>div{flex:1 1 200px;min-width:0}
.hm-facts b{display:block;font-size:23px;font-weight:800;letter-spacing:-.7px;margin-bottom:3px;font-variant-numeric:tabular-nums}
.hm-facts span{font-size:14px;color:var(--ink3);line-height:1.5}
.hm-how{display:flex;flex-wrap:wrap;gap:32px}
.hm-how-l{flex:1.4 1 420px;min-width:0}
.hm-how-l .hm-t{margin-bottom:18px}
.hm-steps{list-style:none;display:flex;flex-direction:column;gap:16px}
.hm-steps li{display:flex;gap:14px;align-items:flex-start}
.hm-steps li>div{min-width:0}
.hm-steps i{width:34px;height:34px;border-radius:10px;background:var(--ac-s);color:var(--ac);font-size:15px;font-weight:800;font-style:normal;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;font-variant-numeric:tabular-nums}
.hm-steps b{display:block;font-size:16.5px;font-weight:700;margin-bottom:3px}
.hm-steps p{font-size:15.5px;color:var(--ink2);line-height:1.6;text-wrap:pretty}
.hm-how-p{font-size:15.5px;color:var(--ink3);line-height:1.6;margin-top:18px;text-wrap:pretty}
.hm-how-r{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:12px}
.hm-promo{border:1.5px solid var(--ln);border-radius:18px;padding:20px 22px;color:var(--ink);display:flex;gap:16px;align-items:center;
  transition:border-color .16s,box-shadow .16s}
.hm-promo:hover{border-color:#C9D6F2;box-shadow:0 6px 20px rgba(16,21,31,.06);color:var(--ink)}
.hm-promo>span{flex:1;min-width:0}
.hm-promo b{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.2px;margin-bottom:4px}
.hm-promo>span>span{display:block;font-size:14px;color:var(--ink3);line-height:1.5}
.hm-promo i{flex:0 0 68px;height:56px;border-radius:11px;background:var(--ac-s);color:var(--ac);display:flex;align-items:center;justify-content:center}
.hm-seo{display:flex;flex-wrap:wrap;gap:20px 32px}
.hm-seo>div{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:9px}
.hm-seo a{font-size:15px;font-weight:600;color:var(--ac)}
/* Шесть плиток не влезают в ряд уже с 1115 точек — дальше 3 + 3, а не 5 + 1. */
@media (max-width:1115px){.hm-tech{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1024px){.hm-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){
  .hm-cards{grid-template-columns:minmax(0,1fr)}
  .hm-hero{padding:18px}
  .hm-t26{font-size:23px}
  .hm-call{padding:22px 18px;gap:18px}
  .hm-call-ic{display:none}
  .hm-brands{padding:18px 16px 18px}
  .hm-facts{padding:22px}
  /* «По технике» и марки на телефоне — по две в ряд: при базе 168/180 точек
     auto-fit оставлял одну колонку, и шесть плиток занимали полэкрана. */
  .hm-tech{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .hm-tile{padding:12px;gap:9px}
  .hm-tile svg{width:22px;height:22px}
  .hm-bl{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 10px}
  .hm-tabs button{padding:8px 12px;font-size:14px}
  .hm-call-f .btn,.hm-call-r{flex:1 1 100%}
}
@media (max-width:360px){.hm-tech,.hm-bl{grid-template-columns:minmax(0,1fr)}}

/* ── Телефон: поля страницы и вложенные карточки (TR-317) ──
   Гарантия на телефоне читалась узкой колонкой: поле страницы 24, тёмный блок
   22, карточка внутри него ещё 22 — на экране 390 текст получал 250 точек из
   390. Поля складываются при каждой вложенности, поэтому ужимаем все три
   ступени, а не одну: поле страницы 16 (для всего сайта — так же узко было и
   в каталоге, TR-318), тёмный блок и карточки в нём 16. */
@media (max-width:620px){
  .wrap,.sec{padding-left:16px;padding-right:16px}
  .trade,.dark,.cta-band{padding:24px 16px}
  /* TR-335: кнопка трейд-ина и подпись под ней — во всю ширину блока. */
  .trade .cta{gap:12px}
  .trade .cta .btn-white,.trade .cta span{flex:1 1 100%}
  .dark-card,.dark-card.sm{padding:18px 16px}
  .dark-cards{gap:10px}
  .dark-cards>div{padding:16px}
  .ret-row{padding:18px 16px}
  .pane.sm,.box-s{padding:18px 16px}
  /* Блоки «во всю ширину» вытягивались на поле страницы отрицательным отступом
     −24 — с полем 16 они вылезали за экран на 8 точек. */
  .cat-bar{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
  .co-v2 .co-side{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
}

/* ── Телефон: карточки каталога шире (TR-318) ──
   Две колонки остаются (TR-146), но зазор 12 и поле карточки 12 съедали у
   каждой карточки 18 точек. Зазор 8 и поле 10 вместе с полем страницы 16
   дают карточку 175 точек вместо 165 на экране 390. */
@media (max-width:620px){
  .prods{gap:8px}
  .pcard{padding:10px}
}

/* ── Телефон: цифры каталога в две строки (TR-321) ──
   Четыре цифры шли столбиком и занимали пол-экрана до первого товара. На
   телефоне — сетка два на два, кегль мельче. */
@media (max-width:620px){
  .cat-facts{grid-template-columns:1fr 1fr;gap:12px 14px;padding:14px 16px;border-radius:14px}
  .cat-facts .n{font-size:16.5px;letter-spacing:-.3px;line-height:1.3}
  .cat-facts .d{font-size:12.5px;line-height:1.35}
}
/* На 320–360 колонка ~120 точек, и «Свежая партия» кеглем 16,5 рвалась на две
   строки — ряд вырастал вдвое. */
@media (max-width:360px){
  .cat-facts .n{font-size:15px}
}

/* ── Плавный выбор (TR-322) ──
   Выбор и раскрытие срабатывали мгновенно: список терминалов выскакивал
   рывком, галочка и подсветка строки появлялись щелчком. Владелец попросил,
   чтобы всё, что появляется и выбирается по нажатию, делало это плавно.
   Раскрытие — короткий въезд с проявлением: анимация на блоке заново
   играет каждый раз, когда он выходит из display:none, то есть ровно при
   открытии, а не при каждой перерисовке. Выбор — переход по цвету рамки и
   заливки и галочка, которая «вырастает». Всё не дольше 0,2 с, чтобы выбор
   не казался запоздавшим. */
@keyframes tb-drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.co-terms,.co-terms .t-list,.co-terms .t-map-box,[data-mpane]{animation:tb-drop .2s ease}
.pick{transition:border-color .18s ease,background-color .18s ease}
.seg a,.seg button,.seg2 button{transition:background-color .18s ease,color .18s ease,box-shadow .18s ease}
.co-terms .t-one{transition:background-color .18s ease}
.co-terms .t-one .mk{transform:scale(.6);transition:opacity .18s ease,transform .18s ease,background-color .18s ease}
.co-terms .t-one.on .mk{transform:none}
.dd-opt{transition:background-color .15s ease,color .15s ease}
@media (prefers-reduced-motion:reduce){
  .co-terms,.co-terms .t-list,.co-terms .t-map-box,[data-mpane]{animation:none}
  .pick,.seg a,.seg button,.seg2 button,.co-terms .t-one,.co-terms .t-one .mk,.dd-opt{transition:none}
}

/* ── Телефон: плашки карточки товара (TR-355) ──
   Подпись «В наличии» на снимке была того же кегля, что и на большом фото
   товара, и в карточке шириной 175 точек закрывала угол батареи. На телефоне
   она мельче. Пусковой ток там же стоит маленькой плашкой прямо в названии
   (.nm-cur в productCard), а в ряду под названием остаются одни габариты:
   карточка короче на строку. На широком экране плашки в названии нет, ток
   стоит в ряду, как раньше. */
.pcard .nm-cur{display:none}
.pcard .nm .nw{white-space:nowrap}
@media (max-width:620px){
  .pcard .stock{left:8px;top:8px;font-size:10.5px;padding:3px 7px;border-radius:6px}
  .pcard .nm-cur{display:inline-block;vertical-align:1px;padding:0 6px;border-radius:5px;background:var(--bg3);
    color:var(--ink2);font-size:11.5px;font-weight:700;line-height:1.6;white-space:nowrap;font-variant-numeric:tabular-nums}
  .pcard .chips span[title="Пусковой ток"]{display:none}
}

/* ── Телефон: шапка раздела каталога (TR-360) ──
   В каталоге, линейках, «Грузовых» и «Мото» заголовок в две строки, лид в три
   и цифры под ними занимали на экране 390 около 400 точек — первая карточка
   начиналась со второго экрана. Заголовок мельче, лид короче по кеглю, цифры
   плотнее, зазоры до ряда разделов и до сетки ужаты. На широком экране шапка
   прежняя. */
@media (max-width:620px){
  .pt-cat{padding-top:16px}
  .cat-head{gap:14px}
  .h1-cat{font-size:25px;letter-spacing:-.7px;line-height:1.16}
  .cat-head .lead-ink{font-size:14.5px;line-height:1.5;margin-top:6px}
  .cat-facts{padding:12px 14px;gap:9px 14px}
  .cat-facts .n{font-size:15px}
  .cat-facts .d{font-size:12px}
  .secrow-w{padding-top:14px}
  .sec-cat{padding-top:14px}
}

/* ── Телефон: герой главной — полоса, а не экран (TR-349) ──
   На экране 390 заголовок в три строки, подпись в четыре, три строки фактов и
   фото батареи занимали 425 точек — весь первый экран. На телефоне заголовок
   мельче и без принудительного переноса, от подписи остаётся первая фраза
   (вторую — про самовывоз — повторяют карточки ниже). Три факта-галочки на
   телефоне не показываем: партию и гарантию уже называет подпись, трейд-ин —
   карточка сразу под героем, а плашками они в строку не влезали и шли
   столбиком ещё на 110 точек. Фото убрано: те же батареи стоят в «Чаще всего
   берут». */
@media (max-width:620px){
  .hm-hero{padding:15px 16px}
  .hm-h1{font-size:21px;letter-spacing:-.5px;line-height:1.2;margin-bottom:5px}
  .hm-h1 br{display:none}
  .hm-sub{font-size:14.5px;line-height:1.45}
  .hm-sub2,.hm-chips,.hm-hero-ph{display:none}
}

/* ── «Знаете ёмкость» во всю ширину (TR-354) ──
   Тёмный блок на телефоне был уже синего над ним на 50 точек: у него стоял
   flex-grow .85, а когда блок один в строке, меньше единицы означает «займи
   только такую долю свободного места». Доли те же (1,6 к 1, как 1,35 к .85),
   но от единицы — в одну строку блоки делятся как раньше, а оставшись один,
   блок растягивается на всю ширину. Кнопки ёмкостей на телефоне — сетка в две
   колонки во всю ширину блока; «корпус» — строкой целиком. */
.hm-pick{flex-grow:1.6}
.hm-caps{flex-grow:1}
@media (max-width:620px){
  .hm-chiprow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .hm-chiprow a{text-align:center;padding:10px 8px}
  .hm-chiprow a.w{grid-column:1/-1}
}

/* ── Обратный звонок на главной (TR-346, TR-356, TR-357) ──
   Компьютер (TR-346): колонка «Или сразу» была 210 точек, и часы работы и
   «Написать в поддержку» переносились на две строки. Теперь 272.
   Телефон (TR-356, TR-357): блок занимал 641 точку — текст короче, заголовок
   мельче, а вложенную карточку «Или сразу» разбираем: телефон и «Написать в
   поддержку» стоят кнопками той же ширины, что поле и «Перезвоните мне», по
   одной линии с ними, а не со своим отступом внутри второй рамки. Часы на
   телефоне не показываем — они в подвале и на «Контактах». */
.hm-call-r{flex:0 1 272px}
.hm-call-tel svg{display:none}
@media (max-width:620px){
  .hm-call{padding:20px 16px;gap:14px}
  .hm-call-m .hm-t{font-size:21px;letter-spacing:-.5px;margin-bottom:6px}
  .hm-call-m p{font-size:15px;line-height:1.5;margin-bottom:14px}
  .hm-call .agree-w{margin-top:8px}
  .hm-call-r{flex:1 1 100%;background:none;border:0;border-radius:0;padding:0;display:grid;gap:10px}
  .hm-call-r .hm-over{margin-bottom:0}
  .hm-call-h{display:none}
  .hm-call-tel{display:flex;align-items:center;justify-content:center;gap:9px;min-height:49px;margin:0;
    border:1.5px solid var(--ac-b);border-radius:12px;background:#fff;font-size:17px}
  .hm-call-tel svg{display:block;color:var(--ac)}
  .hm-call-w{min-height:49px;border-radius:12px;font-size:15px}
}
/* Марки (TR-357): у ссылки отступ под подсветку при наведении — 8 точек, и
   кружки с буквами стояли правее вкладок над ними. Сетку вытягиваем на эти
   8 точек в обе стороны: кружки встают на край блока, по линии вкладок. */
.hm-bl{margin:0 -8px}

/* ── Заявка отправлена (TR-347) ──
   Классы ставит showSent в tb-site.js: .is-out — форма гаснет, .is-sent —
   на её месте ответ. Высоту блока скрипт ведёт сам, от старой к новой. */
.js-form.is-out>:not(.form-sent){opacity:0;transition:opacity .34s ease}
.js-form.is-sent{overflow:hidden}
.js-form.is-sent>:not(.form-sent){display:none}
.form-sent{flex:1 1 100%;display:flex;align-items:center;gap:16px;animation:tb-sent .5s ease both}
.form-sent .i{flex:none;width:48px;height:48px;border-radius:50%;background:var(--ok);display:flex;align-items:center;justify-content:center}
.form-sent .i svg{width:22px;height:22px}
.form-sent .tx{min-width:0}
.form-sent b{display:block;font-size:20px;font-weight:800;letter-spacing:-.4px;line-height:1.3;margin-bottom:3px}
.form-sent .tx>span{display:block;font-size:15px;color:var(--ink2);line-height:1.5}
.form-sent .nw{white-space:nowrap}
@keyframes tb-sent{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .js-form.is-out>:not(.form-sent){transition:none}
  .form-sent{animation:none}
}

/* ── Телефон: «Как купить аккумулятор в Тюмени» (TR-358) ──
   Три шага занимали на экране 390 почти тысячу точек текста. Описания
   сокращены до строки на шаг (build.js, HOWTO), здесь — кегль и зазоры. */
@media (max-width:620px){
  .hm-how{gap:22px}
  .hm-how-l .hm-t{font-size:22px;letter-spacing:-.6px;margin-bottom:14px}
  .hm-steps{gap:12px}
  .hm-steps li{gap:12px}
  .hm-steps i{width:30px;height:30px;font-size:14px}
  .hm-steps b{font-size:16px;margin-bottom:2px}
  .hm-steps p{font-size:14.5px;line-height:1.5}
  .hm-how-p{font-size:14.5px;line-height:1.5;margin-top:14px}
}

/* ── Телефон: четыре факта на главной — сетка два на два (TR-359) ──
   Столбиком «Свежая партия / 15 минут / до 2 500 ₽ / 12 лет» занимали 395
   точек. Как цифры над каталогом (TR-321): два на два, кегль мельче, поля уже. */
@media (max-width:620px){
  .hm-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;padding:16px;border-radius:16px}
  .hm-facts b{font-size:17px;letter-spacing:-.4px;margin-bottom:2px}
  .hm-facts span{display:block;font-size:12.5px;line-height:1.4}
}
@media (max-width:360px){.hm-facts b{font-size:15.5px}}

/* ── Телефон: кнопки в карточках подбора во всю ширину (TR-352) ──
   «Как это проходит», «Узнать свою скидку», «О заводе» стояли короткими
   плашками у левого края, и под каждой оставалась пустая полоса справа. На
   телефоне кнопка — во всю ширину карточки, как «Перезвоните мне» ниже. */
@media (max-width:620px){
  .pk-b .bt{align-self:stretch;justify-content:center;padding:13px 15px;font-size:14.5px}
}

/* ── Калькулятор зарядного тока — своя страница (TR-344) ──
   На «Зарядке и обслуживании» вместо калькулятора — карточка-ссылка на
   /charging/kalkulyator/. Подсказка «нет плотномера — смотрите напряжение»
   стоит под списком плотностей в самом калькуляторе (.ch-volt). */
.ch-calc-link{display:flex;align-items:center;gap:18px;border:1.5px solid var(--ac-b);background:var(--ac-c);border-radius:20px;
  padding:22px 24px;color:var(--ink);transition:border-color .16s,box-shadow .16s}
.ch-calc-link:hover{border-color:var(--ac);box-shadow:0 6px 20px rgba(16,21,31,.07);color:var(--ink)}
.ch-calc-link .i{flex:none;width:56px;height:56px;border-radius:14px;background:#fff;color:var(--ac);display:flex;align-items:center;justify-content:center}
.ch-calc-link .tx{flex:1;min-width:0}
.ch-calc-link b{display:block;font-size:20px;font-weight:800;letter-spacing:-.4px;margin-bottom:3px}
.ch-calc-link .tx>span{display:block;font-size:15px;color:var(--ink2);line-height:1.5}
.ch-calc-link .go{flex:none;display:inline-flex;align-items:center;gap:7px;background:var(--ac);color:#fff;font-weight:700;
  font-size:15px;padding:12px 18px;border-radius:12px}
.ch-volt{margin-top:14px;font-size:13.5px;color:var(--ink3);line-height:1.5}
@media (max-width:620px){
  .ch-calc-link{flex-wrap:wrap;padding:18px 16px;gap:14px}
  .ch-calc-link .i{width:48px;height:48px}
  .ch-calc-link .go{flex:1 1 100%;justify-content:center}
}

/* ── Статьи: фото без пустых серых полей (TR-345) ──
   Снимки батарей сняты на белом фоне, а подложка под ними была серой (--bg3):
   в карточке статьи по бокам от фото стояли пустые серые поля, а в шапке
   статьи — серая полоса во всю ширину страницы с батареей посередине. Подложка
   теперь белая (фото сливается с ней), карточку отделяет от текста линия, а
   картинка в шапке статьи — обычного размера, по левому краю, в рамке. */
.art-card .ph{background:#fff;border-bottom:1px solid var(--ln2)}
.art-card .ph img{padding:10px}
.art-hero{display:block;width:auto;max-width:100%;height:auto;max-height:300px;object-fit:contain;background:#fff;
  border:1px solid var(--ln);border-radius:20px;padding:12px}