/* ==========================================================================
   УП «РОДАТ» / gazmaf.by — светлая тема «ЦЕХ»

   Третья редакция. Прошлая (тёмная «ГРАФИТ») отклонена: клиенту нужен
   светлый, плотный, информативный каталог, а не тёмный лендинг.

   Палитра взята пипеткой из логотипа:
     красный колпак и баллон  → #8F010F
     синяя роба сварщика      → #0968EC
   Красный — основной акцент, синий — вспомогательный (ссылки, «новинка»).
   Фон белый, полосы разделов — светло-серые. Никаких тёмных заливок,
   кроме навигации и подвала: там тёмный работает как рамка страницы.

   Движение здесь есть, но оно служебное: подсказывает, что элемент
   кликабельный, и мягко вводит блоки в кадр. Ничего не крутится само
   по себе без причины, ничего не прыгает под курсором.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ТОКЕНЫ
   -------------------------------------------------------------------------- */
:root{
  /* красный — от тёмного «фирменного» до светлых заливок */
  --red-900:#5E0009;
  --red-800:#76040F;
  --red-700:#8F010F;   /* логотип */
  --red-600:#A9121F;
  --red-500:#CE1B28;   /* кнопки, главный акцент */
  --red-400:#E24450;
  --red-200:#F3AEB4;
  --red-100:#FBDFE1;
  --red-50:#FFF2F3;

  /* синий из робы — только точечно */
  --blue:#0B62DA;
  --blue-50:#EAF2FD;

  /* зелёный только под статус «в наличии» */
  --ok:#158A4B;
  --ok-50:#E9F6EF;

  /* нейтрали */
  --ink:#14181F;
  --ink-2:#39424F;
  --mute:#69727F;
  --faint:#98A1AE;
  --line:#E2E7ED;
  --line-2:#EFF2F5;
  --bg:#FFFFFF;
  --bg-2:#F5F7F9;
  --bg-3:#EAEEF2;

  /* градиенты */
  --g-red:linear-gradient(135deg,var(--red-500) 0%,var(--red-700) 100%);
  --g-red-soft:linear-gradient(135deg,var(--red-50) 0%,#FFFFFF 65%);

  /* тени — мягкие, «бумажные», без чёрного тумана */
  --sh-1:0 1px 2px rgba(20,24,31,.05), 0 1px 1px rgba(20,24,31,.04);
  --sh-2:0 4px 12px rgba(20,24,31,.07), 0 1px 3px rgba(20,24,31,.05);
  --sh-3:0 14px 32px rgba(20,24,31,.10), 0 4px 10px rgba(20,24,31,.05);
  --sh-red:0 12px 26px rgba(206,27,40,.22);

  --r-s:6px; --r:10px; --r-l:16px;
  --wrap:1280px;

  --f:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;

  --e:cubic-bezier(.22,1,.36,1);      /* «выкатывание», для появления */
  --e2:cubic-bezier(.4,0,.2,1);       /* ровный, для ховеров */
  --t:.26s;
}

/* --------------------------------------------------------------------------
   2. БАЗА
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--f);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
/* height:auto обязателен: у картинок проставлены width/height в атрибутах
   (это резервирует место и убирает скачок вёрстки), и без него браузер
   держит жёсткую высоту из атрибута. */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
h1,h2,h3,h4{margin:0;font-weight:800;line-height:1.15;letter-spacing:-.02em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
svg{display:block}
::selection{background:var(--red-100);color:var(--red-800)}
:focus-visible{outline:2px solid var(--red-500);outline-offset:2px;border-radius:3px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.only-desktop{display:block}
.only-mobile{display:none}
.nojs{display:block;padding:10px 16px;background:var(--red-50);color:var(--red-800);font-size:13px}

/* --------------------------------------------------------------------------
   3. ПРЕЛОАДЕР — единственный элемент, который клиент одобрил.
   Логика в fx.js не тронута, здесь только перекрашено под светлый фон.
   -------------------------------------------------------------------------- */
.preloader{
  position:fixed;inset:0;z-index:9999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  background:#fff;
  transition:opacity .6s var(--e2),visibility .6s var(--e2);
}
.preloader.is-done{opacity:0;visibility:hidden}
.preloader__logo{width:150px;height:auto}
.preloader__bar{width:210px;height:3px;background:var(--bg-3);overflow:hidden;border-radius:3px}
.preloader__bar i{display:block;height:100%;width:0;background:var(--g-red);border-radius:3px}
.preloader__num{font-size:11px;font-weight:700;letter-spacing:.34em;color:var(--faint)}
html.no-js .preloader{display:none}

/* Полоса прочтения страницы */
.progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:9998;
  background:var(--g-red);transition:width .1s linear}

/* --------------------------------------------------------------------------
   4. ПОЯВЛЕНИЕ ПРИ ПРОКРУТКЕ
   Сознательно скупое: 14 пикселей и прозрачность. Никаких вылетов сбоку.
   -------------------------------------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(14px);
  transition:opacity .62s var(--e),transform .62s var(--e)}
[data-reveal].is-in{opacity:1;transform:none}
html.no-js [data-reveal]{opacity:1;transform:none}

/* --------------------------------------------------------------------------
   5. КНОПКИ
   -------------------------------------------------------------------------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:46px;padding:0 22px;border-radius:var(--r-s);
  font-size:14px;font-weight:700;white-space:nowrap;
  border:1px solid transparent;overflow:hidden;
  transition:background var(--t) var(--e2),color var(--t) var(--e2),
             border-color var(--t) var(--e2),box-shadow var(--t) var(--e2),
             transform var(--t) var(--e2);
}
.btn svg{width:17px;height:17px;fill:currentColor;flex:0 0 auto;position:relative;z-index:1}
.btn span{position:relative;z-index:1}

/* Главная кнопка. «Блик» проходит один раз при наведении — единственная
   декоративная анимация на кнопке, без бесконечного мерцания. */
.btn--hot{background:var(--g-red);color:#fff;box-shadow:0 2px 0 rgba(94,0,9,.2)}
.btn--hot::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.3) 50%,transparent 68%);
  transform:translateX(-120%);
}
.btn--hot:hover{box-shadow:var(--sh-red);transform:translateY(-1px)}
.btn--hot:hover::after{transform:translateX(120%);transition:transform .7s var(--e2)}
.btn--hot:active{transform:translateY(0)}

.btn--ghost{background:#fff;border-color:var(--line);color:var(--ink)}
.btn--ghost:hover{border-color:var(--red-400);color:var(--red-600);
  background:var(--red-50);box-shadow:var(--sh-1)}

.btn--line{background:transparent;border-color:var(--red-500);color:var(--red-600)}
.btn--line:hover{background:var(--red-500);color:#fff}

.btn--sm{height:38px;padding:0 15px;font-size:13px}
.btn--lg{height:52px;padding:0 30px;font-size:15px}
.btn--block{width:100%}

/* --------------------------------------------------------------------------
   6. ВЕРХНЯЯ СЛУЖЕБНАЯ ПОЛОСА
   -------------------------------------------------------------------------- */
.topbar{background:var(--bg-2);border-bottom:1px solid var(--line);font-size:12.5px}
.topbar .wrap{display:flex;align-items:center;gap:20px;min-height:38px;white-space:nowrap}
.topbar__menu{display:flex;gap:18px;color:var(--ink-2)}
.topbar__menu a{position:relative;padding:2px 0;transition:color var(--t) var(--e2)}
.topbar__menu a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--red-500);transition:right .3s var(--e)}
.topbar__menu a:hover{color:var(--red-600)}
.topbar__menu a:hover::after{right:0}
.topbar__right{display:flex;align-items:center;gap:18px;margin-left:auto;color:var(--mute)}
.topbar__right a{transition:color var(--t) var(--e2)}
.topbar__right a:hover{color:var(--red-600)}
.topbar__city{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ink-2)}
.topbar__city svg{width:13px;height:13px;fill:var(--red-500)}

/* Обещания сервиса — то, что у конкурентов стоит первой строкой */
.topbar__promises{display:flex;gap:18px;color:var(--mute)}
.topbar__promises span{display:inline-flex;align-items:center;gap:6px}
.topbar__promises svg{width:13px;height:13px;fill:var(--ok)}

/* --------------------------------------------------------------------------
   7. ШАПКА
   -------------------------------------------------------------------------- */
.header{position:sticky;top:0;z-index:900;background:#fff;
  transition:box-shadow .3s var(--e2)}
.header.is-stuck{box-shadow:var(--sh-2)}
.header .wrap{display:flex;align-items:center;gap:26px;padding-top:16px;padding-bottom:16px;
  transition:padding .3s var(--e2)}
.header.is-stuck .wrap{padding-top:10px;padding-bottom:10px}

.logo{display:flex;align-items:center;gap:13px;flex:0 0 auto}
.logo__plate img{width:104px;height:auto}
.logo__text{display:flex;flex-direction:column;gap:2px;max-width:190px}
.logo__name{font-size:14px;font-weight:800;letter-spacing:.04em}
.logo__slogan{font-size:11.5px;line-height:1.3;color:var(--mute)}

/* Поиск — крупный, как у конкурентов. Это главный инструмент каталога. */
/* min-width:0 обязателен: без него флекс-элемент не сжимается уже
   собственной ширины input, и в варианте B строка поиска выпирала за экран. */
.search{position:relative;flex:1 1 auto;min-width:0;max-width:520px}
.search input{
  width:100%;height:46px;padding:0 108px 0 40px;
  border:1.5px solid var(--line);border-radius:var(--r-s);background:var(--bg-2);
  font-size:14px;transition:border-color var(--t) var(--e2),background var(--t) var(--e2),
    box-shadow var(--t) var(--e2);
}
.search input::placeholder{color:var(--faint)}
.search input:focus{outline:none;background:#fff;border-color:var(--red-400);
  box-shadow:0 0 0 3px var(--red-50)}
.search__ico{position:absolute;left:14px;top:14px;width:17px;height:17px;fill:var(--faint);
  pointer-events:none;transition:fill var(--t) var(--e2)}
.search:focus-within .search__ico{fill:var(--red-500)}
.search__go{position:absolute;right:4px;top:4px;height:38px;padding:0 20px;
  border-radius:var(--r-s);background:var(--g-red);color:#fff;font-size:13px;font-weight:700;
  transition:box-shadow var(--t) var(--e2)}
.search__go:hover{box-shadow:var(--sh-red)}

/* Подсказки. Показываются на :focus-within — работают и без JS. */
.search__hints{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-3);
  padding:6px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s var(--e2),transform .2s var(--e2),visibility .2s;
}
.search:focus-within .search__hints{opacity:1;visibility:visible;transform:none}
.search__hints b{display:block;padding:8px 10px 4px;font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.search__hints a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r-s);
  font-size:13.5px;transition:background var(--t) var(--e2),color var(--t) var(--e2)}
.search__hints a svg{width:13px;height:13px;fill:var(--faint);flex:0 0 auto}
.search__hints a:hover{background:var(--red-50);color:var(--red-700)}
.search__hints a:hover svg{fill:var(--red-500)}
.search__hints i{margin-left:auto;font-style:normal;font-size:11.5px;color:var(--faint)}

/* Телефоны — все три, как на боевом сайте. Клиент жаловался, что их мало. */
.hphones{flex:0 0 auto;display:flex;flex-direction:column;gap:1px;text-align:right}
.hphones a{font-size:15px;font-weight:800;letter-spacing:-.01em;
  transition:color var(--t) var(--e2)}
.hphones a:hover{color:var(--red-600)}
.hphones a + a{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.hphones span{font-size:11.5px;color:var(--mute)}
.hphones i{font-style:normal;color:var(--ok);font-weight:700}

/* Корзина / сравнение / избранное */
.hacts{flex:0 0 auto;display:flex;align-items:center;gap:4px}
.hact{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;
  width:58px;padding:6px 0;border-radius:var(--r-s);font-size:10.5px;color:var(--mute);
  transition:background var(--t) var(--e2),color var(--t) var(--e2)}
.hact svg{width:20px;height:20px;fill:none;stroke:var(--ink-2);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
  transition:stroke var(--t) var(--e2),transform var(--t) var(--e)}
.hact:hover{background:var(--red-50);color:var(--red-700)}
.hact:hover svg{stroke:var(--red-500);transform:translateY(-2px)}
.hact b{position:absolute;top:2px;right:9px;min-width:16px;height:16px;padding:0 4px;
  border-radius:9px;background:var(--red-500);color:#fff;
  font-size:10px;font-weight:700;line-height:16px;text-align:center}

.header__mobile{display:none;align-items:center;gap:8px;margin-left:auto}
.header__call{display:grid;place-items:center;width:42px;height:42px;border-radius:var(--r-s);
  background:var(--red-50)}
.header__call svg{width:19px;height:19px;fill:var(--red-600)}
/* Бургер — пара к кнопке звонка, поэтому фон и цвет те же: два одинаковых
   квадрата рядом читаются как один блок управления, а серый квадрат с
   чёрными палками выбивался из пары. */
/* Раскладка именно flex, а не grid. На grid строки растягивались на всю
   высоту кнопки, палки разъезжались на 15px вместо 3, и gap не помогал:
   place-items центрирует палку внутри строки, но не строки внутри кнопки.
   Из-за этого бургер и выглядел раздвинутым. */
.burger{display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:var(--r-s);
  background:var(--red-50);gap:3px}
/* Палки плотнее, чем были (18×2 через 4px): стопка стала 12px вместо 18 и
   перестала выглядеть раздвинутой. Центры крайних палок теперь на ±5px —
   это же число стоит в повороте на крестик ниже, менять их надо вместе. */
.burger i{display:block;width:18px;height:2px;background:var(--red-600);border-radius:2px;
  transition:transform .3s var(--e)}

/* ВАЖНО: только для мыши. На тач-экране :hover залипает после касания —
   палки так и оставались разъехавшимися, и бургер выглядел сломанным.
   Условие (hover:hover) отсекает телефоны и планшеты. */
@media (hover:hover){
  .burger:hover i:nth-child(1){transform:translateX(2px)}
  .burger:hover i:nth-child(3){transform:translateX(-2px)}
}

/* Бургер превращается в крестик — понятно, что нажатие закроет панель */
body.menu-open .burger i:nth-child(1){transform:translateY(5px) rotate(45deg)}
body.menu-open .burger i:nth-child(2){opacity:0}
body.menu-open .burger i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
body.menu-open .burger i{transition:transform .3s var(--e),opacity .2s var(--e2)}

/* Выдвижная панель для узких экранов */
.mmenu{position:fixed;inset:0;z-index:1000;visibility:hidden;pointer-events:none}
.mmenu::before{content:"";position:absolute;inset:0;background:rgba(20,24,31,.45);
  opacity:0;transition:opacity .32s var(--e2)}
.mmenu__panel{position:absolute;top:0;right:0;bottom:0;width:min(340px,88vw);
  display:flex;flex-direction:column;background:#fff;overflow-y:auto;
  box-shadow:var(--sh-3);transform:translateX(100%);
  transition:transform .34s var(--e)}
body.menu-open{overflow:hidden}
body.menu-open .mmenu{visibility:visible;pointer-events:auto}
body.menu-open .mmenu::before{opacity:1}
body.menu-open .mmenu__panel{transform:none}

.mmenu__head{display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:2}
.mmenu__head b{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint)}
.mmenu__close{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--r-s);
  background:var(--bg-2);transition:background var(--t) var(--e2)}
.mmenu__close:hover{background:var(--red-50)}
.mmenu__close svg{width:16px;height:16px;fill:var(--ink-2)}

.mmenu__cats a{display:flex;align-items:center;padding:13px 18px;font-size:14.5px;font-weight:700;
  color:var(--ink);border-bottom:1px solid var(--line-2);
  transition:background var(--t) var(--e2),color var(--t) var(--e2)}
.mmenu__cats a:hover{background:var(--red-50);color:var(--red-700)}
.mmenu__cats a i{margin-left:auto;font-style:normal;font-size:12px;font-weight:700;
  color:var(--faint)}
.mmenu__sep{padding:16px 18px 8px;font-size:11px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint)}
.mmenu__pages a{display:block;padding:10px 18px;font-size:14px;color:var(--ink-2);
  transition:color var(--t) var(--e2)}
.mmenu__pages a:hover{color:var(--red-600)}
.mmenu__foot{margin-top:auto;display:flex;flex-direction:column;gap:7px;padding:18px;
  border-top:1px solid var(--line);background:var(--bg-2)}
.mmenu__foot a{font-size:14px;font-weight:700;color:var(--ink)}
.mmenu__foot a:last-child{font-weight:500;color:var(--mute)}

/* --------------------------------------------------------------------------
   8. ГЛАВНОЕ МЕНЮ РАЗДЕЛОВ
   -------------------------------------------------------------------------- */
.nav{background:var(--ink);position:relative;z-index:800}
.nav .wrap{display:flex;align-items:stretch;gap:2px}
.nav__item{position:relative;display:flex;flex:0 0 auto}
/* white-space:nowrap — обязательно, а не «на всякий случай». Полоса ровно
   46px высотой; если подпись переносится, она вылезает за неё и наезжает
   на соседние. Именно так строка меню и разъехалась на боевом сайте:
   названия разделов там длинные, а переносить их было нечему запретить. */
.nav a{display:flex;align-items:center;padding:0 13px;height:46px;
  font-size:13.5px;font-weight:600;color:rgba(255,255,255,.82);position:relative;
  white-space:nowrap;flex:0 0 auto;
  transition:color var(--t) var(--e2),background var(--t) var(--e2)}
.nav > .wrap > a::after,.nav__item > a::after{content:"";position:absolute;left:13px;right:13px;
  bottom:0;height:2px;background:var(--red-500);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--e)}
.nav a:hover{color:#fff;background:rgba(255,255,255,.06)}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1)}
.nav a.is-active{color:#fff}

.nav__catalog{background:var(--g-red)!important;color:#fff!important;
  font-weight:800!important;padding:0 20px!important;gap:11px}
.nav__catalog::after{display:none!important}
.nav__catalog > span{display:flex;flex-direction:column;gap:3px}
.nav__catalog i{display:block;width:15px;height:2px;background:#fff;border-radius:2px;
  transition:transform .3s var(--e)}
.nav__item:hover .nav__catalog i:nth-child(1){transform:translateX(3px)}
.nav__item:hover .nav__catalog i:nth-child(3){transform:translateX(-3px)}

/* Выпадающее меню каталога */
.mega{
  position:absolute;left:0;top:100%;z-index:30;min-width:300px;padding:8px;
  background:#fff;border:1px solid var(--line);border-radius:0 0 var(--r) var(--r);
  box-shadow:var(--sh-3);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s var(--e2),transform .22s var(--e2),visibility .22s;
}
.nav__item:hover .mega,.nav__item:focus-within .mega{opacity:1;visibility:visible;transform:none}
.mega a{height:auto;padding:9px 12px;border-radius:var(--r-s);color:var(--ink-2);font-weight:500;
  font-size:13.5px}
.mega a::after{display:none!important}
.mega a:hover{background:var(--red-50);color:var(--red-700)}
.mega a i{margin-left:auto;font-style:normal;font-size:11.5px;color:var(--faint)}

/* --------------------------------------------------------------------------
   9. ПЕРВЫЙ ЭКРАН: промо-слайдер + быстрые ссылки
   Никакого «пустого героя» на весь экран — сразу дело.
   -------------------------------------------------------------------------- */
.hero{padding:22px 0 4px}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) 302px;gap:18px;align-items:stretch}

.promo{position:relative;border-radius:var(--r-l);overflow:hidden;background:var(--bg-2);
  border:1px solid var(--line)}
/* Слайды лежат в одной ячейке грида, а не абсолютом: высота полосы тогда
   равна самому высокому слайду и текст не обрезается на узких экранах. */
.promo__track{display:grid;min-height:344px}
.promo__slide{
  grid-area:1/1;display:grid;grid-template-columns:1fr 38%;align-items:center;
  gap:20px;padding:32px 38px 56px;
  opacity:0;visibility:hidden;transform:scale(1.012);
  transition:opacity .7s var(--e2),transform .9s var(--e2),visibility .7s;
}
.promo__slide.is-active{opacity:1;visibility:visible;transform:none}
.promo__slide--red{background:var(--g-red);color:#fff}
.promo__slide--light{background:var(--g-red-soft)}
.promo__slide--steel{background:linear-gradient(135deg,#EDF1F5 0%,#FFFFFF 72%)}
.promo__tag{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 11px;
  border-radius:40px;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  background:var(--red-500);color:#fff}
.promo__slide--red .promo__tag{background:rgba(255,255,255,.22)}
.promo__tag i{width:6px;height:6px;border-radius:50%;background:currentColor;
  animation:blip 2.4s var(--e2) infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.2}}

.promo h2{margin:14px 0 10px;font-size:clamp(24px,3vw,35px);line-height:1.08}
.promo p{max-width:44ch;font-size:14.5px;color:var(--ink-2)}
.promo__slide--red p{color:rgba(255,255,255,.9)}
.promo__price{margin-top:14px;font-size:13.5px;font-weight:600;color:var(--mute)}
.promo__slide--red .promo__price{color:rgba(255,255,255,.75)}
.promo__price b{display:block;font-size:27px;font-weight:800;letter-spacing:-.02em;
  color:var(--red-600)}
.promo__slide--red .promo__price b{color:#fff}
.promo__cta{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.promo__slide--red .btn--ghost{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);
  color:#fff}
.promo__slide--red .btn--ghost:hover{background:#fff;color:var(--red-700);border-color:#fff}
.promo__slide--red .btn--hot{background:#fff;color:var(--red-700);box-shadow:none}
.promo__slide--red .btn--hot:hover{box-shadow:0 12px 26px rgba(0,0,0,.18)}
.promo__art{display:grid;place-items:center;height:100%}
.promo__art img{max-height:236px;width:auto;object-fit:contain;mix-blend-mode:multiply;
  filter:drop-shadow(0 16px 26px rgba(20,24,31,.14))}
.promo__slide--red .promo__art img{mix-blend-mode:normal;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.25))}

.promo__dots{position:absolute;left:38px;bottom:22px;display:flex;gap:7px;z-index:5}
.promo__dots button{width:22px;height:4px;border-radius:4px;background:var(--bg-3);
  transition:background var(--t) var(--e2),width var(--t) var(--e)}
.promo__dots button.is-active{width:34px;background:var(--red-500)}
.promo__nav{position:absolute;right:24px;bottom:18px;display:flex;gap:8px;z-index:5}
.promo__nav button{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:#fff;box-shadow:var(--sh-2);
  transition:transform var(--t) var(--e),box-shadow var(--t) var(--e2)}
.promo__nav button:hover{transform:scale(1.09);box-shadow:var(--sh-3)}
.promo__nav svg{width:15px;height:15px;fill:var(--ink)}
.promo__nav button:first-child svg{transform:rotate(180deg)}

/* Правая колонка первого экрана */
.qcol{display:flex;flex-direction:column;gap:10px}
.qlinks{display:grid;gap:8px}
.qlink{display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:var(--r);
  background:var(--bg-2);border:1px solid var(--line-2);font-size:13.5px;font-weight:600;
  transition:background var(--t) var(--e2),border-color var(--t) var(--e2),
    transform var(--t) var(--e),box-shadow var(--t) var(--e2)}
.qlink svg{width:17px;height:17px;fill:var(--red-500);flex:0 0 auto}
.qlink i{margin-left:auto;font-style:normal;font-size:11px;font-weight:700;color:#fff;
  background:var(--red-500);border-radius:20px;padding:2px 8px}
.qlink--blue svg{fill:var(--blue)}
.qlink--blue i{background:var(--blue)}
.qlink:hover{background:#fff;border-color:var(--red-200);transform:translateX(3px);
  box-shadow:var(--sh-1)}

/* Скачивание прайса — на боевом сайте это заметный блок, возвращаем */
.pricebox{margin-top:auto;padding:16px;border-radius:var(--r);
  border:1.5px dashed var(--red-200);background:var(--red-50);
  transition:border-color var(--t) var(--e2)}
.pricebox:hover{border-color:var(--red-400)}
.pricebox b{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--red-800)}
.pricebox b svg{width:17px;height:17px;fill:var(--red-600);flex:0 0 auto}
.pricebox p{margin:6px 0 12px;font-size:12.5px;color:var(--ink-2)}
.pricebox em{font-style:normal;color:var(--mute);font-weight:600}
.pricebox .btn{width:100%}

/* --------------------------------------------------------------------------
   10. БЕГУЩАЯ СТРОКА НОМЕНКЛАТУРЫ
   -------------------------------------------------------------------------- */
.ticker{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--bg-2)}
.ticker__row{display:flex;gap:34px;white-space:nowrap;padding:11px 0;width:max-content;
  animation:marquee 46s linear infinite}
.ticker:hover .ticker__row{animation-play-state:paused}
.ticker b{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint)}
.ticker b.hot{color:var(--red-500)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* --------------------------------------------------------------------------
   11. СЕКЦИИ И ЗАГОЛОВКИ
   -------------------------------------------------------------------------- */
.section{padding:44px 0}
.section--tight{padding:28px 0}
.section--band{background:var(--bg-2);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}

.shead{margin-bottom:22px}
.shead__tag{display:inline-flex;align-items:center;gap:7px;margin-bottom:9px;
  font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--red-600)}
.shead__tag::before{content:"";width:16px;height:2px;background:var(--red-500);border-radius:2px}
.shead h2{font-size:clamp(22px,2.5vw,30px)}
.shead p{margin-top:9px;max-width:66ch;font-size:14.5px;color:var(--mute)}
.shead--row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  flex-wrap:wrap}

/* --------------------------------------------------------------------------
   12. ПЛИТКИ КАТЕГОРИЙ (со счётчиком товаров — как у конкурентов)
   -------------------------------------------------------------------------- */
.cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.cat{
  position:relative;display:flex;flex-direction:column;gap:10px;padding:20px;
  border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden;
  transition:border-color var(--t) var(--e2),box-shadow var(--t) var(--e2),
    transform var(--t) var(--e);
}
/* Красная заливка «вырастает» снизу — мягко, без вспышек */
.cat::before{content:"";position:absolute;left:0;right:0;bottom:0;height:100%;
  background:linear-gradient(0deg,var(--red-50),transparent 72%);
  transform:scaleY(0);transform-origin:bottom;transition:transform .42s var(--e)}
.cat > *{position:relative;z-index:1}
.cat:hover{border-color:var(--red-200);box-shadow:var(--sh-2);transform:translateY(-3px)}
.cat:hover::before{transform:scaleY(1)}

.cat__ico{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-s);
  background:var(--red-50);transition:background var(--t) var(--e2),transform .4s var(--e)}
.cat__ico svg{width:22px;height:22px;fill:var(--red-600);transition:fill var(--t) var(--e2)}
.cat:hover .cat__ico{background:var(--g-red);transform:rotate(-6deg)}
.cat:hover .cat__ico svg{fill:#fff}

.cat__name{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;font-size:16px;font-weight:800;
  color:var(--ink)}
.cat__count{font-size:12px;font-weight:700;color:var(--faint)}
/* Подразделы должны оставаться кликабельными поверх растянутой ссылки. */
.cat__list{font-size:12.5px;color:var(--mute);line-height:1.75;z-index:3}
.cat__list a{position:relative;transition:color var(--t) var(--e2)}
.cat__list a:hover{color:var(--red-600)}
.cat__go{margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:700;color:var(--red-600);align-self:flex-start;
  opacity:0;transform:translateX(-6px);
  transition:opacity .3s var(--e2),transform .3s var(--e)}
/* Клик по всей плитке ведёт в раздел; сама ссылка при этом остаётся видимой
   подписью, а не невидимым слоем поверх текста. */
.cat__go::after{content:"";position:absolute;inset:0;z-index:2}
.cat__go svg{width:13px;height:13px;fill:currentColor}
.cat:hover .cat__go{opacity:1;transform:none}
.cat--hot{border-color:var(--red-200);background:var(--g-red-soft)}

/* --------------------------------------------------------------------------
   13. КАРТОЧКА ТОВАРА В СЕТКЕ
   -------------------------------------------------------------------------- */
.products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}

.card{
  position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:border-color var(--t) var(--e2),box-shadow var(--t) var(--e2),
    transform var(--t) var(--e);
}
.card:hover{border-color:var(--red-200);box-shadow:var(--sh-3);transform:translateY(-3px);z-index:2}

.card__badges{position:absolute;top:10px;left:10px;z-index:3;display:flex;flex-direction:column;
  gap:5px;align-items:flex-start}
.badge{display:inline-flex;align-items:center;height:21px;padding:0 8px;border-radius:3px;
  font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#fff}
.badge--action{background:var(--red-500)}
.badge--new{background:var(--blue)}
.badge--hit{background:var(--ink)}

.card__fav{position:absolute;top:8px;right:8px;z-index:3;display:grid;place-items:center;
  width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.92);
  opacity:0;transform:scale(.85);
  transition:opacity .25s var(--e2),transform .25s var(--e),background var(--t) var(--e2)}
.card__fav svg{width:15px;height:15px;fill:none;stroke:var(--mute);stroke-width:1.8}
.card:hover .card__fav{opacity:1;transform:none}
.card__fav:hover{background:var(--red-50)}
.card__fav:hover svg{stroke:var(--red-500);fill:var(--red-100)}

/* Именно flex, а не grid: в grid-области Chrome не разрешает max-height в
   процентах, и картинка вылезает на всю свою натуральную высоту. */
.card__media{display:flex;align-items:center;justify-content:center;height:190px;padding:16px;
  background:#fff;overflow:hidden}
.card__media img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;
  mix-blend-mode:multiply;transition:transform .55s var(--e)}
.card:hover .card__media img{transform:scale(1.06)}

.card__body{display:flex;flex-direction:column;gap:6px;padding:0 14px 14px;flex:1}
.card__cat{font-size:10.5px;font-weight:600;letter-spacing:.04em;color:var(--faint);
  text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card__title{font-size:13.5px;font-weight:700;line-height:1.35;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  transition:color var(--t) var(--e2)}
.card:hover .card__title{color:var(--red-700)}
.card__spacer{flex:1;min-height:6px}

.card__price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-height:26px}
.cena-1{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.cena-1--action{color:var(--red-600)}
.cena-2{font-size:13px;color:var(--faint)}
.cena-2 s{text-decoration-color:var(--red-400)}
.card__ask{font-size:14px;font-weight:700;color:var(--mute)}

.card__stock{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  color:var(--ok)}
.card__stock::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok)}
.card__stock--no{color:var(--faint)}
.card__stock--no::before{background:var(--faint)}

.card__actions{display:flex;gap:7px;margin-top:8px}
.card__actions .btn{flex:1;min-width:0}
.card__cmp{display:grid;place-items:center;width:38px;height:38px;flex:0 0 auto;
  border:1px solid var(--line);border-radius:var(--r-s);
  transition:border-color var(--t) var(--e2),background var(--t) var(--e2)}
.card__cmp svg{width:15px;height:15px;fill:none;stroke:var(--mute);stroke-width:1.8;
  transition:stroke var(--t) var(--e2)}
.card__cmp:hover{border-color:var(--red-200);background:var(--red-50)}
.card__cmp:hover svg{stroke:var(--red-500)}

/* --------------------------------------------------------------------------
   14. ВКЛАДКИ
   -------------------------------------------------------------------------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:22px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{position:relative;padding:12px 16px;font-size:14px;font-weight:700;
  color:var(--mute);white-space:nowrap;transition:color var(--t) var(--e2)}
.tabs button::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;
  background:var(--red-500);transform:scaleX(0);transition:transform .32s var(--e)}
.tabs button:hover{color:var(--ink)}
.tabs button.is-active{color:var(--red-700)}
.tabs button.is-active::after{transform:scaleX(1)}
.tabpanel{display:none;animation:fadeUp .42s var(--e) both}
.tabpanel.is-active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* --------------------------------------------------------------------------
   15. ИНФОРМАЦИОННЫЕ БЛОКИ (реальные с боевого сайта)
   -------------------------------------------------------------------------- */
.info{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.info__item{
  position:relative;display:flex;flex-direction:column;gap:9px;padding:20px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:border-color var(--t) var(--e2),box-shadow var(--t) var(--e2),
    transform var(--t) var(--e);
}
.info__item::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--g-red);transform:scaleY(0);transform-origin:top;
  transition:transform .38s var(--e)}
.info__item:hover{border-color:var(--red-200);box-shadow:var(--sh-2);transform:translateY(-3px)}
.info__item:hover::after{transform:scaleY(1)}
.info__ico{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--red-50);transition:transform .4s var(--e)}
.info__ico svg{width:19px;height:19px;fill:var(--red-600)}
.info__item:hover .info__ico{transform:scale(1.08)}
.info__item h3{font-size:15px;line-height:1.25}
.info__item p{font-size:13px;color:var(--mute);line-height:1.5}
.info__more{margin-top:auto;padding-top:6px;font-size:12.5px;font-weight:700;color:var(--red-600);
  display:inline-flex;align-items:center;gap:7px;
  transition:gap var(--t) var(--e)}
.info__more svg{width:12px;height:12px;fill:currentColor}
.info__item:hover .info__more{gap:12px}

/* --------------------------------------------------------------------------
   16. ПРЕИМУЩЕСТВА И ЦИФРЫ
   -------------------------------------------------------------------------- */
.adv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.adv__item{display:flex;gap:14px;padding:22px;border-right:1px solid var(--line);
  transition:background var(--t) var(--e2)}
.adv__item:last-child{border-right:0}
.adv__item:hover{background:var(--red-50)}
.adv__item svg{width:26px;height:26px;fill:var(--red-500);flex:0 0 auto;
  transition:transform .4s var(--e)}
.adv__item:hover svg{transform:scale(1.12) rotate(-5deg)}
.adv__item b{display:block;font-size:14.5px;margin-bottom:4px}
.adv__item span{font-size:12.5px;color:var(--mute);line-height:1.5}

.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.fact{padding:20px;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  text-align:center;transition:border-color var(--t) var(--e2),box-shadow var(--t) var(--e2)}
.fact:hover{border-color:var(--red-200);box-shadow:var(--sh-2)}
.fact b{display:block;font-size:34px;font-weight:800;letter-spacing:-.03em;color:var(--red-600);
  line-height:1.1}
.fact span{font-size:12.5px;color:var(--mute)}

/* --------------------------------------------------------------------------
   17. СИСТЕМА МАППбел — схема «всё растёт из ядра»

   Главный смысловой блок сайта: заказчик прямым текстом сказал, что его
   уникальный продукт на сайте не присутствует, а «всё с него начинается
   и дальше развивается». Поэтому схема стоит сразу за первым экраном.

   Геометрия узлов приходит из build.py готовыми процентами — CSS только
   центрирует узел относительно его точки (translate(-50%,-50%)). Так
   орбита не пересчитывается скриптом и правильно выглядит даже без JS.
   -------------------------------------------------------------------------- */
.section--sys{padding:52px 0;background:
  radial-gradient(120% 90% at 50% 0%,var(--red-50) 0%,rgba(255,255,255,0) 62%),var(--bg);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.sys{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:34px;
  align-items:center}

/* ---- орбита ---- */
.sys__orbit{position:relative;width:100%;max-width:620px;margin:0 auto;aspect-ratio:1/1}
.sys__lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sys__ring{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:3 7}
.sys__line{stroke:var(--line);stroke-width:1.5;transition:stroke var(--t) var(--e2)}
.sys__line.is-lit{stroke:var(--red-400)}

/* Ядро. Оно же кнопка возврата к описанию самого газа. */
.sys__core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:37%;aspect-ratio:1/1;border-radius:50%;border:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:10px;text-align:center;color:#fff;background:var(--g-red);
  box-shadow:var(--sh-red);transition:transform var(--t) var(--e2)}
.sys__core:hover{transform:translate(-50%,-50%) scale(1.035)}
.sys__core b{font-size:clamp(17px,2.4vw,25px);font-weight:800;letter-spacing:-.02em}
.sys__core i{font-size:11px;font-style:normal;opacity:.82}
.sys__core em{margin-top:5px;padding:3px 9px;border-radius:20px;font-style:normal;
  font-size:10px;font-weight:700;letter-spacing:.04em;background:rgba(255,255,255,.18)}

/* Пульс ядра. Один медленный ореол — единственная анимация, которая идёт
   сама по себе, и она отмечает главный объект страницы. */
.sys__coreGlow{position:absolute;inset:-6px;border-radius:50%;pointer-events:none;
  border:2px solid var(--red-400);opacity:0;animation:sysPulse 3.4s var(--e2) infinite}
@keyframes sysPulse{
  0%{transform:scale(.94);opacity:.55}
  70%{transform:scale(1.16);opacity:0}
  100%{transform:scale(1.16);opacity:0}
}
@media (prefers-reduced-motion:reduce){.sys__coreGlow{animation:none}}

/* ---- узлы-ветви ---- */
.sys__node{position:absolute;transform:translate(-50%,-50%);width:23%;min-width:96px;
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;
  border-radius:var(--r);border:1px solid var(--line);background:#fff;cursor:pointer;
  box-shadow:var(--sh-1);
  transition:border-color var(--t) var(--e2),box-shadow var(--t) var(--e2),
             transform var(--t) var(--e2)}
.sys__node:hover{border-color:var(--red-200);box-shadow:var(--sh-2);
  transform:translate(-50%,-50%) translateY(-3px)}
.sys__node[aria-selected="true"]{border-color:var(--red-500);box-shadow:var(--sh-2);
  background:var(--red-50)}
.sys__nodeIco{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:var(--bg-2);color:var(--red-600)}
.sys__nodeIco svg{width:17px;height:17px;fill:currentColor}
.sys__node[aria-selected="true"] .sys__nodeIco{background:var(--red-500);color:#fff}
.sys__nodeName{font-size:11.5px;font-weight:700;line-height:1.25;text-align:center;
  color:var(--ink-2)}

/* ---- боковая панель ---- */
.sys__side{position:relative}
.sys__panel{padding:26px;border:1px solid var(--line);border-radius:var(--r-l);
  background:#fff;box-shadow:var(--sh-2)}
.sys__panel[hidden]{display:none}
.sys__panel.is-active{animation:sysIn .34s var(--e) both}
@keyframes sysIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sys__panelTag{display:inline-flex;align-items:center;gap:7px;margin-bottom:11px;
  padding:4px 11px;border-radius:20px;font-size:10.5px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;background:var(--red-50);
  color:var(--red-700)}
.sys__panelTag svg{width:14px;height:14px;fill:currentColor}
.sys__panel h3{font-size:20px;margin-bottom:9px}
.sys__panel p{font-size:14px;color:var(--mute);line-height:1.6}
.sys__items{margin:16px 0 18px;border-top:1px solid var(--line-2)}
.sys__items li{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:9px 0;border-bottom:1px solid var(--line-2)}
.sys__items b{font-size:13.5px;font-weight:600;color:var(--ink-2)}
.sys__items i{font-style:normal;font-size:13px;font-weight:700;color:var(--red-600);
  white-space:nowrap;text-align:right}

/* --------------------------------------------------------------------------
   17a. КАЛЬКУЛЯТОР ПЕРЕХОДА С АЦЕТИЛЕНА
   -------------------------------------------------------------------------- */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.calc__in,.calc__out{padding:26px;border-radius:var(--r-l);border:1px solid var(--line)}
.calc__in{background:#fff}
.calc__out{display:flex;flex-direction:column;background:var(--g-red-soft);
  border-color:var(--red-200)}

.calc__field{display:block}
.calc__label{display:block;margin-bottom:12px;font-size:13px;font-weight:700;
  color:var(--ink-2)}
.calc__row{display:flex;align-items:center;gap:14px}
.calc__num{width:92px;padding:11px 12px;font:700 17px/1 var(--f);color:var(--ink);
  text-align:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-s)}
.calc__num:focus-visible{outline:2px solid var(--red-500);outline-offset:1px}

/* Ползунок рисуем сами: системный на разных ОС выглядит по-разному,
   а это главный орган управления блока. Заливку слева от бегунка красит
   переменная --fill, её проставляет скрипт. */
.calc__range{flex:1;-webkit-appearance:none;appearance:none;height:6px;border-radius:6px;
  background:linear-gradient(90deg,var(--red-500) var(--fill,14%),var(--bg-3) var(--fill,14%));
  cursor:pointer}
.calc__range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--red-500);
  box-shadow:var(--sh-2);cursor:pointer;transition:transform var(--t) var(--e2)}
.calc__range::-webkit-slider-thumb:hover{transform:scale(1.12)}
.calc__range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;
  border:3px solid var(--red-500);box-shadow:var(--sh-2);cursor:pointer}
.calc__range:focus-visible{outline:2px solid var(--red-500);outline-offset:4px}

.calc__note{display:flex;gap:10px;margin-top:20px;padding:14px;border-radius:var(--r);
  background:var(--bg-2);font-size:12.5px;line-height:1.6;color:var(--mute)}
.calc__note svg{flex:none;width:17px;height:17px;fill:var(--faint);margin-top:1px}

.calc__swap{margin-top:16px;padding:16px 18px;border:1px dashed var(--line);
  border-radius:var(--r)}
.calc__swap>b{display:block;margin-bottom:9px;font-size:13px}
.calc__swap ul{margin-bottom:9px}
.calc__swap li{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:13px;
  color:var(--ink-2)}
.calc__swap li svg{flex:none;width:15px;height:15px;fill:var(--ok)}
.calc__swap>span{font-size:12px;color:var(--mute)}

.calc__big{padding-bottom:18px;border-bottom:1px solid var(--red-200)}
.calc__big>span{display:block;margin-bottom:5px;font-size:12.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--red-700)}
.calc__big b{display:block;font-size:clamp(26px,3.6vw,40px);font-weight:800;
  letter-spacing:-.03em;line-height:1.05;color:var(--red-700)}
.calc__big i{font-size:.5em;font-style:normal;font-weight:700;color:var(--mute)}
/* Цифры пересчитываются на каждый шаг ползунка — табличные знаки не дают
   строке дёргаться по ширине. */
.calc__big em,.calc__cell em{font-style:normal;font-variant-numeric:tabular-nums}

.calc__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}
.calc__cell{padding:13px 15px;border-radius:var(--r);background:rgba(255,255,255,.8);
  border:1px solid var(--red-100)}
.calc__cell span{display:block;margin-bottom:3px;font-size:11.5px;color:var(--mute)}
.calc__cell b{font-size:17px;font-weight:800;color:var(--ink)}
.calc__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}

/* --------------------------------------------------------------------------
   17b. ТАБЛИЦА СРАВНЕНИЯ ГАЗОВ
   -------------------------------------------------------------------------- */
.vs2{border:1px solid var(--line);border-radius:var(--r-l);background:#fff;overflow:hidden}
.vs2__tabs{display:flex;flex-wrap:wrap;gap:8px;padding:16px 18px;
  border-bottom:1px solid var(--line);background:var(--bg-2)}
.vs2__tab{padding:8px 15px;border-radius:20px;border:1px solid var(--line);
  background:#fff;font:700 12.5px/1 var(--f);color:var(--ink-2);cursor:pointer;
  transition:border-color var(--t) var(--e2),background var(--t) var(--e2),
             color var(--t) var(--e2)}
.vs2__tab:hover{border-color:var(--red-200)}
.vs2__tab.is-active{background:var(--red-500);border-color:var(--red-500);color:#fff}

/* Таблица на четыре колонки в телефон не помещается, и ужимать её нельзя:
   цифры в две строки читаются хуже, чем прокрутка. Поэтому оставляем
   горизонтальный скролл, но обязательно показываем, что он есть, —
   иначе половина посетителей просто не узнает про две правые колонки.
   Тень справа гасится сама, когда прокрутили до конца (animation-timeline
   там, где он есть; где нет — тень просто висит, и это не мешает). */
.vs2__scroll{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch}
.vs2__table{width:100%;min-width:680px;border-collapse:collapse}
.vs2__hint{display:none;gap:7px;align-items:center;padding:9px 18px;
  border-bottom:1px solid var(--line-2);font-size:12px;color:var(--mute);
  background:var(--bg-2)}
.vs2__hint svg{width:14px;height:14px;fill:var(--faint);
  animation:vsHint 1.9s var(--e2) infinite}
@keyframes vsHint{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){.vs2__hint svg{animation:none}}
.vs2__table thead th{padding:14px 16px;font-size:12px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--mute);text-align:center;
  border-bottom:1px solid var(--line);background:#fff}
.vs2__table thead th:first-child{text-align:left}
.vs2__hmapp{color:var(--red-700);background:var(--red-50)}

.vs2__table tbody tr{border-bottom:1px solid var(--line-2)}
.vs2__table tbody tr:last-child{border-bottom:0}
.vs2__table tbody tr:hover{background:var(--bg-2)}
/* При смене фильтра строки въезжают лесенкой: видно, что таблица
   пересобралась, а не просто мигнула. */
.vs2__table tbody tr{animation:vsRow .3s var(--e) both;animation-delay:calc(var(--i) * 22ms)}
@keyframes vsRow{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.vs2__table tbody tr[hidden]{display:none}

.vs2__table th[scope="row"]{padding:13px 16px;text-align:left;font-weight:600}
.vs2__table th[scope="row"] b{display:block;font-size:13.5px;color:var(--ink)}
.vs2__table th[scope="row"] span{display:block;margin-top:3px;font-size:11.5px;
  font-weight:400;color:var(--mute);line-height:1.5;max-width:44ch}
.vs2__table td{padding:13px 16px;text-align:center;font-size:13px;color:var(--ink-2)}
.vs2__mapp{background:var(--red-50);font-weight:700;color:var(--red-700)}
/* Галочку ставим только там, где преимущество действительно есть. В строках
   с паритетом её нет: подтасовка в техтаблице стоит доверия инженера. */
.vs2__mapp.is-win::after{content:"✓";display:inline-block;margin-left:7px;
  font-size:11px;color:var(--ok)}
.vs2__foot{display:flex;gap:10px;padding:16px 18px;border-top:1px solid var(--line);
  background:var(--bg-2);font-size:12.5px;color:var(--mute);line-height:1.6}
.vs2__foot svg{flex:none;width:16px;height:16px;fill:var(--faint);margin-top:1px}

/* --------------------------------------------------------------------------
   17c. ПОДБОРЩИК ЭЛЕКТРОДА ЭП-ТБ
   -------------------------------------------------------------------------- */
.ep{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:18px;
  align-items:start}
.ep__tabs{display:flex;flex-direction:column;gap:8px}
.ep__tab{padding:14px 16px;text-align:left;border-radius:var(--r);
  border:1px solid var(--line);background:#fff;cursor:pointer;
  transition:border-color var(--t) var(--e2),box-shadow var(--t) var(--e2),
             background var(--t) var(--e2)}
.ep__tab:hover{border-color:var(--red-200)}
.ep__tab b{display:block;font-size:13.5px;color:var(--ink)}
.ep__tab span{display:block;margin-top:3px;font-size:11.5px;color:var(--mute)}
.ep__tab.is-active{border-color:var(--red-500);background:var(--red-50)}
.ep__tab.is-active b{color:var(--red-700)}

.ep__card{display:none;padding:26px;border:1px solid var(--line);border-radius:var(--r-l);
  background:#fff;box-shadow:var(--sh-2)}
.ep__card.is-active{display:block;animation:sysIn .34s var(--e) both}
.ep__head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line-2)}
.ep__tag{display:inline-block;margin-bottom:7px;padding:3px 10px;border-radius:20px;
  font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  background:var(--bg-3);color:var(--mute)}
.ep__head h3{font-size:24px;letter-spacing:-.02em}
.ep__hrc{flex:none;text-align:right}
.ep__hrc b{display:block;font-size:20px;font-weight:800;color:var(--red-600);
  white-space:nowrap}
.ep__hrc span{font-size:11.5px;color:var(--mute)}
.ep__card>p{font-size:14px;color:var(--mute);line-height:1.65}
.ep__warn{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:9px 13px;
  border-radius:var(--r-s);background:var(--red-50);border:1px solid var(--red-100);
  font-size:12.5px;color:var(--red-800)}
.ep__warn svg{flex:none;width:15px;height:15px;fill:currentColor}
.ep__specs:not(:empty){margin-top:16px}
.ep__spec{display:flex;justify-content:space-between;gap:14px;padding:9px 0;
  border-top:1px solid var(--line-2);font-size:13px}
.ep__spec span{color:var(--mute)}
.ep__parts{margin-top:16px;padding:16px 18px;border-radius:var(--r);background:var(--bg-2)}
.ep__parts b{display:block;margin-bottom:9px;font-size:12.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--mute)}
.ep__parts ul{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}
.ep__parts li{position:relative;padding-left:16px;font-size:13px;color:var(--ink-2)}
.ep__parts li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;
  border-radius:50%;background:var(--red-400)}
.ep__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}

/* --------------------------------------------------------------------------
   17d. ВОССТАНОВЛЕНИЕ И ЗАЩИТА ДЕТАЛЕЙ
   -------------------------------------------------------------------------- */
.rst{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:18px;
  align-items:start}
.rst__main,.rst__side{display:flex;flex-direction:column;gap:14px}

.rst__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.rst__fact{padding:18px;border-radius:var(--r);border:1px solid var(--line);background:#fff;
  text-align:center}
.rst__fact b{display:block;font-size:26px;font-weight:800;letter-spacing:-.02em;
  color:var(--red-600)}
.rst__fact span{font-size:12px;color:var(--mute)}

.rst__bars{padding:24px;border-radius:var(--r-l);border:1px solid var(--line);background:#fff}
.rst__barsTitle{display:block;margin-bottom:16px;font-size:15px}
.rst__bar{display:grid;grid-template-columns:190px minmax(0,1fr) 108px;align-items:center;
  gap:14px;padding:7px 0}
.rst__barName{font-size:12.5px;color:var(--mute)}
.rst__barTrack{height:12px;border-radius:12px;background:var(--bg-3);overflow:hidden}
/* Ширину полосы считает Python по реальным срокам, здесь только отрисовка. */
.rst__barTrack i{display:block;height:100%;width:var(--w);border-radius:12px;
  background:var(--faint);transform-origin:left center;
  animation:rstBar .8s var(--e) both}
@keyframes rstBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.rst__bar.is-us .rst__barName{color:var(--ink);font-weight:700}
.rst__bar.is-us .rst__barTrack i{background:var(--g-red)}
.rst__barVal{font-size:12.5px;font-weight:700;text-align:right;color:var(--ink-2)}
.rst__bar.is-us .rst__barVal{color:var(--red-700)}
.rst__barsNote{display:block;margin-top:14px;font-size:12px;color:var(--mute)}

.rst__what,.rst__form{padding:24px;border-radius:var(--r-l);border:1px solid var(--line);
  background:#fff}
.rst__what>b{display:block;margin-bottom:12px;font-size:15px}
.rst__what li{display:flex;gap:10px;padding:7px 0;font-size:13.5px;color:var(--ink-2);
  line-height:1.5}
.rst__what li svg{flex:none;width:16px;height:16px;fill:var(--ok);margin-top:2px}
.rst__form{background:var(--g-red-soft);border-color:var(--red-200)}
.rst__form>b{display:flex;align-items:center;gap:9px;margin-bottom:9px;font-size:15px}
.rst__form>b svg{width:19px;height:19px;fill:var(--red-600)}
.rst__form p{font-size:13px;color:var(--mute);line-height:1.6}
.rst__contacts{display:flex;flex-direction:column;gap:8px;margin:16px 0 12px}
.rst__contacts a{display:flex;align-items:center;gap:10px;padding:11px 14px;
  border-radius:var(--r);background:#fff;border:1px solid var(--red-100);
  font-size:14px;font-weight:700;color:var(--ink);
  transition:border-color var(--t) var(--e2),transform var(--t) var(--e2)}
.rst__contacts a:hover{border-color:var(--red-400);transform:translateX(3px)}
.rst__contacts a svg{flex:none;width:16px;height:16px;fill:var(--red-600)}
.rst__who{display:block;font-size:12px;color:var(--mute);line-height:1.5}

/* --------------------------------------------------------------------------
   18. НОВОСТИ
   -------------------------------------------------------------------------- */
.news{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.nws{display:flex;flex-direction:column;gap:8px;padding:22px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);
  transition:border-color var(--t) var(--e2),box-shadow var(--t) var(--e2),
    transform var(--t) var(--e)}
.nws:hover{border-color:var(--red-200);box-shadow:var(--sh-2);transform:translateY(-3px)}
.nws__date{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--red-600)}
.nws h3{font-size:16px;line-height:1.25}
.nws p{font-size:13px;color:var(--mute);line-height:1.55}
.nws__more{margin-top:auto;padding-top:8px;font-size:12.5px;font-weight:700;color:var(--ink-2);
  display:inline-flex;align-items:center;gap:7px;
  transition:gap var(--t) var(--e),color var(--t) var(--e2)}
.nws__more svg{width:12px;height:12px;fill:currentColor}
.nws:hover .nws__more{gap:12px;color:var(--red-600)}

/* --------------------------------------------------------------------------
   19. О КОМПАНИИ + КАРТА
   -------------------------------------------------------------------------- */
.about{display:grid;grid-template-columns:1fr 440px;gap:26px;align-items:start}
.about__text p{margin-bottom:12px;font-size:14.5px;color:var(--ink-2);line-height:1.65}
.about__text p:last-child{margin-bottom:0}
.map{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  background:var(--bg-3);min-height:292px;display:grid;place-items:center}
.map__stub{text-align:center;padding:24px;color:var(--mute);font-size:13px}
.map__stub svg{width:28px;height:28px;fill:var(--red-500);margin:0 auto 10px}
.map__card{position:absolute;left:16px;right:16px;bottom:16px;padding:14px 16px;background:#fff;
  border-radius:var(--r-s);box-shadow:var(--sh-2);font-size:13px}
.map__card b{display:block;margin-bottom:3px}
.map__card span{color:var(--mute)}

/* --------------------------------------------------------------------------
   20. ПОЛОСА ПРИЗЫВА
   -------------------------------------------------------------------------- */
.cta{position:relative;overflow:hidden;border-radius:var(--r-l);background:var(--g-red);
  color:#fff;padding:34px 38px}
.cta::before{content:"";position:absolute;right:-80px;top:-90px;width:300px;height:300px;
  border-radius:50%;background:rgba(255,255,255,.08)}
.cta::after{content:"";position:absolute;right:60px;bottom:-130px;width:230px;height:230px;
  border-radius:50%;background:rgba(255,255,255,.06)}
.cta__in{position:relative;z-index:1;display:flex;align-items:center;
  justify-content:space-between;gap:26px;flex-wrap:wrap}
.cta h2{font-size:clamp(21px,2.4vw,28px)}
.cta p{margin-top:8px;max-width:56ch;font-size:14px;color:rgba(255,255,255,.88)}
.cta__actions{display:flex;gap:10px;flex-wrap:wrap}
.cta .btn--hot{background:#fff;color:var(--red-700);box-shadow:none}
.cta .btn--hot:hover{box-shadow:0 12px 26px rgba(0,0,0,.2)}
.cta .btn--ghost{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.45);color:#fff}
.cta .btn--ghost:hover{background:#fff;color:var(--red-700);border-color:#fff}

/* --------------------------------------------------------------------------
   21. ПОДВАЛ
   -------------------------------------------------------------------------- */
.footer{background:var(--ink);color:rgba(255,255,255,.72);margin-top:44px;font-size:13px}
.footer__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr;gap:28px;
  padding:40px 0 30px}
.footer h4{margin-bottom:14px;font-size:12.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:#fff}
.footer__plate{display:inline-block;padding:8px 12px;background:#fff;border-radius:var(--r-s)}
.footer__plate img{width:120px;height:auto}
.footer__about{margin:14px 0;line-height:1.6;color:rgba(255,255,255,.6)}
.footer__links li{margin-bottom:8px}
.footer__links a{color:rgba(255,255,255,.72);
  transition:color var(--t) var(--e2),padding-left var(--t) var(--e)}
.footer__links a:hover{color:#fff;padding-left:4px}
.footer__contact li{margin-bottom:12px;line-height:1.45}
.footer__contact b{display:block;font-size:15px;color:#fff}
.footer__contact a{color:#fff;transition:color var(--t) var(--e2)}
.footer__contact a:hover{color:var(--red-400)}
.footer__contact span{display:block;font-size:11.5px;color:rgba(255,255,255,.45);margin-top:2px}
.footer .btn--ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}
.footer .btn--ghost:hover{background:#fff;color:var(--ink);border-color:#fff}

.pay{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.pay span{display:grid;place-items:center;height:25px;padding:0 9px;border-radius:4px;
  background:rgba(255,255,255,.9);color:var(--ink);font-size:10px;font-weight:800;
  letter-spacing:.03em}

.footer__bottom{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:16px 0;border-top:1px solid rgba(255,255,255,.1);font-size:12px;
  color:rgba(255,255,255,.5)}
.footer__bottom a{color:rgba(255,255,255,.65);transition:color var(--t) var(--e2)}
.footer__bottom a:hover{color:#fff}

.footer__made{display:flex;align-items:center;gap:9px;padding:14px 0 26px;font-size:12px;
  color:rgba(255,255,255,.4);border-top:1px solid rgba(255,255,255,.06)}
.diva{display:inline-flex;align-items:baseline;gap:6px;transition:opacity var(--t) var(--e2)}
.diva b{color:#fff;font-weight:800;letter-spacing:.08em}
.diva i{font-style:normal;color:rgba(255,255,255,.5)}
.diva:hover{opacity:.75}

/* --------------------------------------------------------------------------
   22. СТРАНИЦА КАТАЛОГА
   -------------------------------------------------------------------------- */
.phead{background:var(--bg-2);border-bottom:1px solid var(--line);padding:16px 0 24px}
.phead--slim{padding:12px 0}
.crumbs ol{display:flex;flex-wrap:wrap;gap:7px;font-size:12.5px;color:var(--faint)}
.crumbs li+li::before{content:"/";margin-right:7px;color:var(--line)}
.crumbs a{transition:color var(--t) var(--e2)}
.crumbs a:hover{color:var(--red-600)}
.crumbs [aria-current]{color:var(--ink-2)}
.phead__row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  margin-top:12px;flex-wrap:wrap}
.phead h1{font-size:clamp(23px,3vw,32px)}
.phead p{margin-top:9px;max-width:70ch;font-size:14px;color:var(--mute)}
.phead__count{display:flex;align-items:center;gap:10px;padding:10px 16px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r)}
.phead__count b{font-size:26px;font-weight:800;color:var(--red-600)}
.phead__count span{font-size:11.5px;color:var(--mute);line-height:1.3}

.layout{display:grid;grid-template-columns:268px minmax(0,1fr);gap:26px;padding:26px 0 10px;
  align-items:start}
.side{position:sticky;top:96px;display:flex;flex-direction:column;gap:14px}
.side__box{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:16px}
.side__title{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);margin-bottom:12px}
.side__menu li{margin-bottom:1px}
.side__menu a{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--r-s);
  font-size:13.5px;color:var(--ink-2);
  transition:background var(--t) var(--e2),color var(--t) var(--e2)}
.side__menu a i{margin-left:auto;font-style:normal;font-size:11.5px;color:var(--faint)}
.side__menu a:hover{background:var(--bg-2);color:var(--red-700)}
.side__menu a.is-active{background:var(--red-50);color:var(--red-700);font-weight:700}
.side__menu a.is-active i{color:var(--red-500)}

.side__filter{padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line-2)}
.side__filter:last-child{padding-bottom:0;margin-bottom:0;border-bottom:0}
.side__filter b{display:block;margin-bottom:9px;font-size:13px}
.range{display:flex;gap:8px}
.range input{width:100%;height:36px;padding:0 10px;border:1px solid var(--line);
  border-radius:var(--r-s);background:var(--bg-2);font-size:13px;
  transition:border-color var(--t) var(--e2),background var(--t) var(--e2)}
.range input:focus{outline:none;background:#fff;border-color:var(--red-400)}
.check{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:13.5px;cursor:pointer;
  color:var(--ink-2);transition:color var(--t) var(--e2)}
.check:hover{color:var(--red-700)}
.check input{width:16px;height:16px;accent-color:var(--red-500);margin:0}
.check i{margin-left:auto;font-style:normal;font-size:11.5px;color:var(--faint)}

.side__promo{padding:18px;border-radius:var(--r);background:var(--g-red);color:#fff}
.side__promo b{display:block;font-size:15px;margin-bottom:6px}
.side__promo p{font-size:12.5px;color:rgba(255,255,255,.85);margin-bottom:12px;line-height:1.5}
.side__promo .btn--ghost{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);
  color:#fff}
.side__promo .btn--ghost:hover{background:#fff;color:var(--red-700);border-color:#fff}

.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{height:34px;padding:0 14px;border:1px solid var(--line);border-radius:20px;
  font-size:12.5px;font-weight:600;color:var(--ink-2);background:#fff;
  transition:border-color var(--t) var(--e2),background var(--t) var(--e2),
    color var(--t) var(--e2)}
.chip:hover{border-color:var(--red-200);color:var(--red-700);background:var(--red-50)}
.chip.is-active{background:var(--ink);border-color:var(--ink);color:#fff}
.toolbar__sort{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:12.5px;
  color:var(--mute);white-space:nowrap}
.toolbar__sort select{height:36px;padding:0 10px;border:1px solid var(--line);
  border-radius:var(--r-s);background:#fff;font-size:13px}
.toolbar__filter{display:none;margin-left:auto;align-items:center;height:36px;padding:0 16px;
  border:1px solid var(--line);border-radius:var(--r-s);font-size:13px;font-weight:600}

.pager{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:24px 0}
.pager__count{font-size:13px;color:var(--mute)}
.pager__count b{color:var(--ink)}
.pager__nav{display:flex;gap:6px}
.pager__nav a,.pager__nav span{display:grid;place-items:center;min-width:36px;height:36px;
  padding:0 12px;border:1px solid var(--line);border-radius:var(--r-s);font-size:13px;
  font-weight:600;background:#fff;
  transition:border-color var(--t) var(--e2),background var(--t) var(--e2),
    color var(--t) var(--e2)}
.pager__nav a:hover{border-color:var(--red-400);color:var(--red-600)}
.pager__nav .is-active{background:var(--g-red);border-color:transparent;color:#fff}

/* --------------------------------------------------------------------------
   23. КАРТОЧКА ТОВАРА (страница)
   -------------------------------------------------------------------------- */
.product{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:34px;padding:26px 0}
.gallery__main{display:flex;align-items:center;justify-content:center;position:relative;
  height:420px;padding:26px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r)}
.gallery__main img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;
  mix-blend-mode:multiply}
.gallery__badges{position:absolute;top:14px;left:14px;display:flex;gap:6px}
.gallery__note{margin-top:12px;font-size:12px;color:var(--faint);line-height:1.5}
.gallery__note code{background:var(--bg-2);padding:1px 5px;border-radius:3px;font-size:11.5px}

.product__cat{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--red-600);margin-bottom:8px}
.product__info h1{font-size:clamp(22px,2.6vw,29px)}
.product__meta{display:flex;gap:16px;margin-top:12px;font-size:12.5px;color:var(--mute);
  flex-wrap:wrap;align-items:center}
.product__meta b{color:var(--ink-2)}
.stock{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:20px;
  background:var(--ok-50);color:var(--ok);font-weight:700}
.stock::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok)}

.buybox{margin-top:20px;padding:20px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--bg-2)}
.buybox__price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.buybox__price .cena-1{font-size:33px}
.buybox__price .cena-2{font-size:16px}
.buybox__save{display:inline-block;margin-top:8px;padding:3px 10px;border-radius:4px;
  background:var(--red-100);color:var(--red-800);font-size:12.5px;font-weight:700}
.buybox__actions{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;margin-top:16px}
.buybox__actions .btn{width:100%}
.buybox__actions .btn--ghost{grid-column:1/-1}
.qty{display:flex;align-items:center;height:46px;border:1px solid var(--line);
  border-radius:var(--r-s);background:#fff;overflow:hidden}
.qty button{width:38px;height:100%;font-size:17px;color:var(--mute);
  transition:background var(--t) var(--e2),color var(--t) var(--e2)}
.qty button:hover{background:var(--red-50);color:var(--red-600)}
.qty input{width:40px;height:100%;border:0;text-align:center;font-weight:700;background:none}
.qty input:focus{outline:none}
.buybox__note{margin-top:12px;font-size:12.5px;color:var(--mute)}
.buybox__note a{color:var(--red-600);font-weight:600;border-bottom:1px solid var(--red-200)}

.trust{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:18px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.trust__item{display:flex;gap:11px;padding:14px;background:#fff;
  transition:background var(--t) var(--e2)}
.trust__item:hover{background:var(--red-50)}
.trust__item svg{width:20px;height:20px;fill:var(--red-500);flex:0 0 auto;margin-top:1px}
.trust__item b{display:block;font-size:13px}
.trust__item span{font-size:11.5px;color:var(--mute);line-height:1.4}

.specs tr{border-bottom:1px solid var(--line-2)}
.specs th{text-align:left;padding:11px 0;font-weight:600;color:var(--mute);font-size:13.5px;
  width:44%}
.specs td{padding:11px 0;font-size:13.5px;font-weight:600}
.tabpanel p{margin-bottom:11px;font-size:14.5px;color:var(--ink-2);line-height:1.65;max-width:82ch}
.tabpanel p:last-child{margin-bottom:0}

/* --------------------------------------------------------------------------
   24. СТРАНИЦА ВЫБОРА ВАРИАНТОВ (для согласования, на боевой сайт не идёт)
   -------------------------------------------------------------------------- */
.vsel{padding:44px 0}
.vsel__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:24px}
.vsel__card{display:flex;flex-direction:column;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;background:#fff;
  transition:border-color var(--t) var(--e2),box-shadow var(--t) var(--e2),
    transform var(--t) var(--e)}
.vsel__card:hover{border-color:var(--red-200);box-shadow:var(--sh-3);transform:translateY(-4px)}
.vsel__shot{height:186px;background:var(--bg-2);border-bottom:1px solid var(--line);
  display:grid;place-items:center;padding:18px}
.vsel__body{padding:20px;display:flex;flex-direction:column;gap:9px;flex:1}
.vsel__body h3{font-size:17px}
.vsel__body p{font-size:13px;color:var(--mute);line-height:1.55}
.vsel__body ul{font-size:12.5px;color:var(--ink-2);line-height:1.8}
.vsel__body ul li::before{content:"— ";color:var(--red-400)}
.vsel__body .btn{margin-top:auto}

/* Схематичный «скриншот» варианта — рисуется прямо в CSS, без картинок.
   Задача не в красоте, а в том, чтобы с одного взгляда было видно
   разницу компоновок: где стоит поиск, где меню, какого цвета полосы. */
.mk{width:100%;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line);border-radius:5px;overflow:hidden;
  box-shadow:var(--sh-1)}
.mk i,.mk b,.mk u{display:block;height:5px;border-radius:2px;background:var(--line);
  flex:0 0 auto}

.mk__strip{display:flex;align-items:center;gap:5px;padding:6px 8px;background:var(--bg-2);
  border-bottom:1px solid var(--line-2)}
.mk__strip--red{background:var(--g-red);border-bottom:0}
.mk__strip--red i{background:rgba(255,255,255,.75)}
.mk__sp{flex:1 1 auto}

.mk__row{display:flex;align-items:center;gap:7px;padding:10px 8px}
.mk__row--tight{padding:8px}
.mk__logo{width:34px;height:16px;border-radius:3px;background:var(--red-500);flex:0 0 auto}
.mk__logo--sm{width:26px;height:13px}
.mk__search{flex:1 1 auto;height:15px;border-radius:3px;background:var(--bg-3)}
.mk__phones{display:flex;flex-direction:column;gap:3px;flex:0 0 auto}
.mk__phones i{width:30px;background:var(--ink-2)}
.mk__menu{display:flex;align-items:center;gap:6px;flex:1 1 auto}
.mk__price{width:34px;height:16px;border-radius:3px;background:var(--red-100);
  border:1px dashed var(--red-200);flex:0 0 auto}
.mk__acts{display:flex;gap:4px;flex:0 0 auto}
.mk__acts b{width:9px;height:9px;border-radius:50%;background:var(--bg-3)}

.mk__band{display:flex;align-items:center;gap:6px;padding:7px 8px;background:var(--bg-2);
  border-top:1px solid var(--line-2)}
.mk__band--menu{justify-content:flex-start}
.mk__chip{width:26px;height:11px;border-radius:3px;background:var(--red-500);flex:0 0 auto}
.mk__tags{display:flex;gap:4px;flex:0 0 auto}
.mk__tags u{width:12px;height:7px;border-radius:20px;background:var(--bg-3)}

.mk__bar{display:flex;align-items:center;gap:6px;padding:8px;background:var(--ink)}
.mk__bar i{background:rgba(255,255,255,.4)}
.mk__bar--light{background:#fff;border-top:1px solid var(--line-2)}
.mk__bar--light i{background:var(--line)}

/* --------------------------------------------------------------------------
   25. ВАРИАНТЫ ШАПКИ B И C
   Содержимое то же самое — меняется только компоновка. Всё, что ниже,
   работает поверх базовой шапки из раздела 7 и ничего в ней не ломает:
   вариант A этих классов просто не выводит.
   -------------------------------------------------------------------------- */

/* ---- B: компактная деловая ------------------------------------------------
   Разделы подняты в саму шапку, поиск вынесен отдельной светлой полосой.
   Экономит около 60px вертикали на первом экране. */
.header--compact .wrap{gap:20px;padding-top:12px;padding-bottom:12px}
.header--compact.is-stuck .wrap{padding-top:8px;padding-bottom:8px}

.hmenu{display:flex;align-items:center;gap:20px;flex:1 1 auto;font-size:13px;font-weight:600}
.hmenu a{position:relative;padding:4px 0;color:var(--ink-2);white-space:nowrap;
  transition:color var(--t) var(--e2)}
.hmenu a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--red-500);border-radius:2px;
  transform:scaleX(0);transform-origin:left;transition:transform var(--t) var(--e)}
.hmenu a:hover{color:var(--red-700)}
.hmenu a:hover::after{transform:scaleX(1)}

.searchbar{background:var(--bg-2);border-bottom:1px solid var(--line)}
.searchbar .wrap{display:flex;align-items:center;gap:16px;padding-top:12px;padding-bottom:12px}
.searchbar .search{max-width:none}
.searchbar .search input{background:#fff}

/* Выпадающий каталог живёт здесь, а не в меню разделов — иначе кнопка
   «Весь каталог» дублировалась бы двумя строками подряд. */
.searchbar__catwrap{position:relative;flex:0 0 auto}
.searchbar__catwrap .mega{top:calc(100% + 8px);border-radius:var(--r)}
.searchbar__catwrap:hover .mega,
.searchbar__catwrap:focus-within .mega{opacity:1;visibility:visible;transform:none}
.searchbar__catwrap .mega a{display:flex;align-items:center}
.searchbar__cat{display:inline-flex;align-items:center;gap:11px;height:46px;padding:0 20px;
  border-radius:var(--r-s);background:var(--g-red);color:#fff;font-weight:700;font-size:13.5px;
  white-space:nowrap;flex:0 0 auto;
  transition:box-shadow var(--t) var(--e2),transform var(--t) var(--e)}
.searchbar__cat:hover{box-shadow:var(--sh-red);transform:translateY(-1px)}
.searchbar__cat > span{display:flex;flex-direction:column;gap:3px}
.searchbar__cat i{display:block;width:15px;height:2px;background:#fff;border-radius:2px;
  transition:transform var(--t) var(--e)}
.searchbar__cat:hover i:nth-child(1){transform:translateX(3px)}
.searchbar__cat:hover i:nth-child(3){transform:translateX(-3px)}

.searchbar__tags{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.searchbar__tags a{padding:6px 12px;border-radius:20px;background:#fff;
  border:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--mute);
  white-space:nowrap;
  transition:color var(--t) var(--e2),border-color var(--t) var(--e2),
    background var(--t) var(--e2)}
.searchbar__tags a:hover{color:var(--red-700);border-color:var(--red-200);background:var(--red-50)}

/* Светлое меню разделов — в варианте B тёмная полоса шла бы третьей подряд. */
.nav--light{background:#fff;border-bottom:1px solid var(--line)}
.nav--light a{color:var(--ink-2);height:44px}
.nav--light a:hover{color:var(--red-700);background:var(--red-50)}
.nav--light a.is-active{color:var(--red-700)}
.nav--light .nav__catalog{color:#fff!important}

/* ---- C: промышленная ------------------------------------------------------
   Контакты на красной полосе: фирменный цвет читается сразу, ещё до логотипа. */
.topbar--red{background:var(--g-red);border-bottom:0;color:#fff}
.topbar--red .wrap{gap:22px}
.topbar--red .topbar__city,
.topbar--red .topbar__hours{color:#fff;font-weight:600}
.topbar--red .topbar__city svg,
.topbar--red .topbar__hours svg{fill:#fff;opacity:.8}
.topbar--red .topbar__right{color:rgba(255,255,255,.85)}
.topbar--red .topbar__right a{color:#fff;opacity:.9;transition:opacity var(--t) var(--e2)}
.topbar--red .topbar__right a:hover{opacity:1;text-decoration:underline}
.topbar__hours{display:inline-flex;align-items:center;gap:6px}
.topbar__hours svg{width:13px;height:13px;fill:var(--red-500)}

/* Прайс-лист прямо в шапке — на боевом сайте это самая частая цель. */
.hprice{display:flex;align-items:center;gap:11px;flex:0 0 auto;padding:9px 15px;
  border:1px dashed var(--red-200);border-radius:var(--r);background:var(--red-50);
  transition:background var(--t) var(--e2),border-color var(--t) var(--e2)}
.hprice:hover{background:#fff;border-color:var(--red-400)}
.hprice svg{width:20px;height:20px;fill:var(--red-500);flex:0 0 auto}
.hprice span{display:flex;flex-direction:column;font-size:11px;color:var(--mute);line-height:1.35}
.hprice b{font-size:13px;font-weight:700;color:var(--ink)}

/* Второй ряд шапки в варианте C */
.hmenu--wide{border-top:1px solid var(--line-2);background:var(--bg-2);
  padding:0;flex:none;display:block}
.hmenu--wide .wrap{display:flex;align-items:center;gap:24px;min-height:40px}

/* ---- Общее для вариантов --------------------------------------------------- */
/* Слайд без картинки/цифр справа — текст занимает всю ширину. */
.promo__slide--solo{grid-template-columns:1fr}
.promo__slide--solo .promo__text{max-width:62ch}
.promo__text{min-width:0}

.promo__stats{display:grid;gap:12px;align-content:center}
.promo__stats div{display:flex;flex-direction:column;padding:12px 16px;border-radius:var(--r);
  background:rgba(255,255,255,.6);border:1px solid var(--line-2)}
.promo__slide--red .promo__stats div{background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.22)}
.promo__stats b{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--red-600)}
.promo__slide--red .promo__stats b{color:#fff}
.promo__stats span{font-size:12px;color:var(--mute)}
.promo__slide--red .promo__stats span{color:rgba(255,255,255,.8)}

/* Сетка товаров внутри каталога — на одну колонку меньше, рядом фильтры. */
.products--catalog{grid-template-columns:repeat(3,minmax(0,1fr))}

@media (max-width:1180px){
  .hmenu a:nth-last-child(-n+2){display:none}
  .searchbar__tags a:nth-child(n+3){display:none}
}
@media (max-width:1080px){
  .hprice span{display:none}
  .hprice{padding:9px 11px}
  .products--catalog{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .hmenu,.hmenu--wide,.searchbar__tags,.topbar__hours{display:none}
  .searchbar .wrap{padding-top:10px;padding-bottom:10px}
  .promo__stats{display:none}
  .promo__slide--solo .promo__text{max-width:none}
}
@media (max-width:430px){
  .searchbar__cat{display:none}
  .products--catalog{grid-template-columns:1fr}
}

/* --------------------------------------------------------------------------
   25a. АДАПТИВ
   -------------------------------------------------------------------------- */
/* Строка разделов не резиновая: подписи приходят из админки, их длину мы
   не выбираем. При сужении окна убираем разделы с конца. Ничего не
   теряется: полный список всегда под красной кнопкой «Весь каталог», в
   мобильном меню и в подвале.

   Пороги не на глаз, а по замеру в браузере на живых названиях. Вся
   строка занимает 1103px (кнопка 158 + девять разделов), полоса даёт
   ширину окна минус 40px полей и минус ~15px полосы прокрутки.
     до 1180 — прячем один  («Инструмент») -> нужно 992;
     до 1080 — прячем три   (+ Спецодежда, Электросварка) -> нужно 744,
               с запасом перекрывает порог 860, ниже которого строка и
               так становится прокручиваемой пальцем.
   Первый замер я поставил на 1140 и 1030 — и промахнулся ровно на
   полосу прокрутки: на 1145px строка уже вылезала на 13px. */
@media (max-width:1180px){
  .nav > .wrap > a:nth-last-child(-n+1){display:none}
}
@media (max-width:1080px){
  .nav > .wrap > a:nth-last-child(-n+3){display:none}
}

@media (max-width:1180px){
  .hero__grid{grid-template-columns:minmax(0,1fr) 268px}
  .products{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer__top{grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:24px}
  .footer__col--hide{display:none}
  .about{grid-template-columns:1fr 380px}
}

@media (max-width:1080px){
  .cats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .info{grid-template-columns:repeat(2,minmax(0,1fr))}
  .adv{grid-template-columns:repeat(2,minmax(0,1fr))}
  .adv__item:nth-child(2){border-right:0}
  .adv__item:nth-child(1),.adv__item:nth-child(2){border-bottom:1px solid var(--line)}
  .hphones a + a,.hphones span{display:none}
  .header .wrap{gap:18px}
  .logo__text{display:none}
  .product{grid-template-columns:minmax(0,1fr) 340px;gap:26px}
}

@media (max-width:980px){
  .topbar__menu,.topbar__promises{display:none}
  .hero__grid{grid-template-columns:1fr}
  .qcol{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
  .pricebox{margin-top:0}
  .promo__slide{grid-template-columns:1fr;padding:26px 26px 54px}
  .promo__art{display:none}
  .promo__track{min-height:270px}
  .promo__dots{left:26px}
  .layout{display:flex;flex-direction:column;gap:24px}
  .layout main{order:1}
  .layout .side{order:2;position:static}
  .side__box--catalog{display:none}
  .toolbar__filter{display:inline-flex}
  .toolbar__sort{margin-left:0}
  .about{grid-template-columns:1fr}
  .product{grid-template-columns:1fr}
  .gallery__main{height:340px}
  .vsel__grid{grid-template-columns:1fr 1fr}
}

@media (max-width:860px){
  /* Здесь строка становится прокручиваемой пальцем, поэтому спрятанные
     выше разделы возвращаем: места им уже не надо, их просто листают.
     Правило идёт ниже тех трёх по файлу и потому перебивает их. */
  .nav .wrap{overflow-x:auto;scrollbar-width:none}
  .nav .wrap::-webkit-scrollbar{display:none}
  .nav > .wrap > a{display:flex}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__top{grid-template-columns:1fr 1fr;gap:26px}
  .footer__col--hide{display:block}
  .news{grid-template-columns:1fr}
}

@media (max-width:768px){
  .header .wrap{flex-wrap:wrap;gap:12px}
  /* Только в шапке: там .wrap переносится, и поиск встаёт отдельной строкой.
     В варианте B поиск живёт в .searchbar с nowrap — базис 100 % там
     выталкивал строку за экран, поэтому правило именно на .header. */
  .header .search{order:3;flex:1 0 100%;max-width:none}
  .hphones,.hacts{display:none}
  .header__mobile{display:flex}
  .only-desktop{display:none}
  .only-mobile{display:block}
  .section{padding:32px 0}
  .products{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cta{padding:26px 22px}
  .vsel__grid{grid-template-columns:1fr}
}

@media (max-width:720px){
  .tabs{flex-wrap:wrap;gap:7px;border-bottom:0;overflow:visible;margin-bottom:20px}
  .tabs button{padding:10px 13px;font-size:12.5px;border:1px solid var(--line);
    border-radius:var(--r-s)}
  .tabs button::after{display:none}
  .tabs button.is-active{background:var(--red-50);border-color:var(--red-200)}
  .trust{grid-template-columns:1fr}
  .card__media{height:158px;padding:12px}
}

@media (max-width:520px){
  .promo h2{font-size:23px}
  .qcol{grid-template-columns:1fr}
  .info{grid-template-columns:1fr}
  .cats{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr 1fr}
  .promo__nav{display:none}
}

@media (max-width:430px){
  .products{grid-template-columns:1fr}
  .promo__cta,.cta__actions{display:grid;grid-template-columns:1fr;gap:9px}
  .promo__cta .btn,.cta__actions .btn{width:100%}
  .buybox__actions{grid-template-columns:1fr}
  .qty{width:132px}
  .adv{grid-template-columns:1fr}
  .adv__item{border-right:0;border-bottom:1px solid var(--line)}
  .adv__item:last-child{border-bottom:0}
}

/* --------------------------------------------------------------------------
   25b. АДАПТИВ НОВЫХ БЛОКОВ

   Орбита живёт только на широком экране. Ужимать круг с семью подписями
   до ширины телефона бессмысленно — подписи налезают друг на друга, а
   попасть пальцем в узел становится нельзя. Поэтому ниже 1080px схема
   честно разбирается: ядро становится баннером, ветви — плиткой, линии
   и кольцо убираются. Логика переключения при этом не меняется, и тот же
   скрипт продолжает работать.
   -------------------------------------------------------------------------- */
@media (max-width:1180px){
  .sys{grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:24px}
  .rst{grid-template-columns:minmax(0,1fr) minmax(0,330px)}
}

@media (max-width:1080px){
  .sys{grid-template-columns:1fr;gap:20px}
  .sys__orbit{max-width:none;aspect-ratio:auto}
  .sys__lines{display:none}

  .sys__core{position:static;transform:none;width:100%;aspect-ratio:auto;
    flex-direction:row;flex-wrap:wrap;justify-content:center;gap:4px 12px;
    padding:18px;border-radius:var(--r-l)}
  .sys__core:hover{transform:none}
  .sys__core b{font-size:22px}
  .sys__coreGlow{display:none}

  /* Сетка ветвей. auto-fit держит ряды ровными и на 7 элементах,
     и если ветвей когда-нибудь станет больше или меньше. */
  .sys__orbit{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    gap:10px}
  .sys__core{grid-column:1/-1;margin-bottom:4px}
  .sys__node{position:static;transform:none;width:auto;min-width:0;
    flex-direction:row;justify-content:flex-start;text-align:left;padding:12px 14px}
  .sys__node:hover{transform:translateY(-3px)}
  .sys__nodeName{text-align:left}

  .ep{grid-template-columns:1fr}
  .ep__tabs{flex-direction:row;flex-wrap:wrap}
  .ep__tab{flex:1 1 170px}
}

@media (max-width:980px){
  .calc{grid-template-columns:1fr}
  .rst{grid-template-columns:1fr}
}

@media (max-width:720px){
  .vs2__hint{display:flex}
  .sys__panel,.calc__in,.calc__out,.ep__card,.rst__bars,.rst__what,.rst__form{padding:20px}
  .ep__parts ul{grid-template-columns:1fr}
  .rst__facts{grid-template-columns:1fr}
  /* Три колонки полосы не помещаются: подпись уходит над полосой,
     значение остаётся справа от неё. */
  .rst__bar{grid-template-columns:minmax(0,1fr) 92px;gap:6px 12px}
  .rst__barName{grid-column:1/-1}
}

@media (max-width:520px){
  .ep__head{flex-direction:column;gap:10px}
  .ep__hrc{text-align:left}
  .calc__grid{grid-template-columns:1fr}
  .calc__cta .btn,.ep__cta .btn{width:100%;justify-content:center}
}

/* --------------------------------------------------------------------------
   25в. ЛЕНТА ТОВАРОВ С ПРОКРУТКОЙ ПАЛЬЦЕМ (телефон и малый планшет)

   Блок идёт ПОСЛЕ всех правил .products: специфичность у .products--rail
   такая же, поэтому побеждает то, что ниже. Если перенести выше — сетка
   перебьёт ленту, и правка тихо перестанет работать.
   -------------------------------------------------------------------------- */
@media (max-width:720px){
  .products--rail{
    display:flex;
    gap:12px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    /* Лента идёт от края до края экрана: выходим за поля .wrap на их
       величину и возвращаем внутренним отступом. Иначе первая карточка
       упирается в край, а последняя обрезается без запаса. Значения
       повторяют padding у .wrap (20px) — при его правке поправить и здесь. */
    margin-left:-20px;margin-right:-20px;
    padding:2px 20px 10px;
    scroll-padding-left:20px;
    /* Полосу прокрутки прячем: на телефоне её и так нет, а на гибридных
       экранах она занимает место и режет нижний край карточек. */
    scrollbar-width:none;
  }
  .products--rail::-webkit-scrollbar{display:none}

  .products--rail>.card{
    /* Заметно уже экрана — край следующей карточки выглядывает и подсказывает,
       что ленту можно листать. Без такого «намёка» горизонтальную прокрутку
       просто не замечают. */
    flex:0 0 68%;
    min-width:0;
    max-width:290px;
    scroll-snap-align:start;
  }

  /* На тач-экране :hover залипает после касания: карточка остаётся
     приподнятой и дёргается при прокрутке. Внутри ленты гасим. */
  .products--rail>.card:hover{transform:none;box-shadow:none;z-index:auto}

  /* Появление по одной карточке здесь вредит: те, что уехали за правый край,
     стартуют невидимыми, и лента выглядит полупустой, пока её не пролистают.
     Показываем сразу — надёжность важнее эффекта. !important нужен из-за
     transition-delay, который скрипт проставляет в атрибут style. */
  .products--rail>[data-reveal]{
    opacity:1;transform:none;transition-delay:0ms!important;
  }
}

@media (max-width:430px){
  /* Экран уже — карточку расширяем, иначе название не помещается в две
     строки и цена наезжает на кнопку. */
  .products--rail>.card{flex-basis:78%}
}

/* --------------------------------------------------------------------------
   26. ПЕЧАТЬ
   -------------------------------------------------------------------------- */
@media print{
  .preloader,.progress,.topbar,.nav,.promo__nav,.promo__dots,.card__fav,
  .card__actions,.footer__made{display:none!important}
  body{font-size:12px}
  .card,.cat,.info__item{break-inside:avoid;border-color:#ccc}
}


/* ==========================================================================
   27. БОЕВОЙ САЙТ

   Всё, что ниже, добавляется скриптом port.py и в прототипе не
   используется. Правится здесь — в _prototype/tpl_css.py.
   ========================================================================== */

/* --------------------------------------------------------------------------
   27.1. КАРКАС СТРАНИЦЫ

   На боевом сайте между шапкой и подвалом стоит <main class="page">.
   В прототипе такой обёртки нет: там каждая страница — отдельный файл.
   min-height нужен, чтобы на короткой странице (например, «Вакансии» из
   трёх строк) подвал не подскакивал к середине экрана.
   -------------------------------------------------------------------------- */
.page{display:block;min-height:46vh}

/* Класс варианта оформления. Вариант «А» клиент выбрал как основной, и он
   же — состояние по умолчанию, поэтому правил у него нет. Класс оставлен
   на <body> намеренно: если понадобится вторая тема, её можно будет
   включить одной строкой в шаблоне, не трогая разметку. */
.v-a{}

/* --------------------------------------------------------------------------
   27.2. ДВЕ КОЛОНКИ: КАТАЛОГ СЛЕВА, СОДЕРЖИМОЕ СПРАВА

   В прототипе колонки назывались .side и main. На сайте их печатают разные
   шаблоны, поэтому имена явные — .layout__side и .layout__main. Правила
   идут после прототипных и перебивают их.
   -------------------------------------------------------------------------- */
.layout__side{display:flex;flex-direction:column;gap:14px;
  position:sticky;top:96px;align-self:start}
.layout__main{min-width:0}

/* Страница без каталога (текст, новости, контакты) — одна колонка во всю
   ширину. Сетку с фиксированными 268px здесь надо снять целиком, иначе
   текст останется прижатым вправо. */
.layout--solo{grid-template-columns:minmax(0,1fr)}

@media (max-width:1024px){
  /* Каталог уезжает вниз: на планшете 268px забирают треть ширины у
     товаров, а листают всё равно сверху вниз. position:static обязателен —
     без него «прилипшая» колонка перекрывает содержимое при прокрутке. */
  .layout{display:flex;flex-direction:column;gap:24px}
  .layout__main{order:1}
  .layout__side{order:2;position:static;top:auto}
}

/* --------------------------------------------------------------------------
   27.3. ЛЕВАЯ КОЛОНКА: ДЕРЕВО КАТАЛОГА, ПРАЙС, ССЫЛКИ
   -------------------------------------------------------------------------- */
.side__list li{margin-bottom:1px}
.side__list a{display:block;padding:8px 10px;border-radius:var(--r-s);
  font-size:13.5px;color:var(--ink-2);
  transition:background var(--t) var(--e2),color var(--t) var(--e2)}
.side__list a.is-active{background:var(--red-50);color:var(--red-700);font-weight:700}

/* Вложенные уровни. Полоска слева заменяет отступ маркерами: она сразу
   показывает глубину, а при трёх уровнях подряд не съедает ширину так,
   как съедали бы отступы по 16 px. */
.side__sub{margin:2px 0 6px 10px;padding-left:10px;border-left:1px solid var(--line)}
.side__sub a{padding:6px 8px;font-size:13px;color:var(--mute)}
.side__sub .side__sub{margin-left:8px}

@media (hover:hover){
  /* Только там, где есть настоящий курсор: на тач-экране :hover залипает
     после касания, и пункт остаётся подсвеченным до перехода. */
  .side__list a:hover{background:var(--bg-2);color:var(--red-700)}
  .side__sub a:hover{color:var(--red-700)}
}

/* Кнопка прайс-листа. Размер файла показываем не для красоты: человек на
   мобильном интернете имеет право знать, что качает, до нажатия. */
.side__price{display:flex;align-items:center;gap:10px;padding:14px 16px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);
  transition:border-color var(--t) var(--e2),background var(--t) var(--e2)}
.side__price svg{flex:0 0 auto;width:22px;height:22px;fill:var(--red-500)}
.side__price b{display:block;font-size:13px;font-weight:700;color:var(--ink)}
.side__price span{display:block;font-size:11.5px;color:var(--mute)}
@media (hover:hover){
  .side__price:hover{border-color:var(--red-200);background:var(--red-50)}
}

.side__box--links li{margin-bottom:1px}
.side__box--links a{display:block;padding:7px 10px;border-radius:var(--r-s);
  font-size:13px;color:var(--ink-2);transition:color var(--t) var(--e2)}
@media (hover:hover){
  .side__box--links a:hover{color:var(--red-700)}
}

/* --------------------------------------------------------------------------
   27.4. БЫСТРЫЕ ССЫЛКИ НА ЧЕТЫРЕ ГЛАВНЫХ РАЗДЕЛА

   Стоят над текстовыми страницами вместо каталога. На узком экране
   листаются вбок, чтобы не переноситься в две строки и не ломать отбивку.
   -------------------------------------------------------------------------- */
.quicknav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.quicknav a{height:34px;display:inline-flex;align-items:center;padding:0 14px;
  border:1px solid var(--line);border-radius:20px;background:#fff;
  font-size:13px;font-weight:600;color:var(--ink-2);white-space:nowrap;
  transition:border-color var(--t) var(--e2),color var(--t) var(--e2),
             background var(--t) var(--e2)}
@media (hover:hover){
  .quicknav a:hover{border-color:var(--red-200);color:var(--red-700);
    background:var(--red-50)}
}
@media (max-width:560px){
  .quicknav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin-left:-20px;margin-right:-20px;padding:0 20px 6px}
  .quicknav::-webkit-scrollbar{display:none}
}

/* --------------------------------------------------------------------------
   27.5. СОРТИРОВКА НАД СПИСКОМ ТОВАРОВ

   Ссылки, а не выпадающий список: сортировка на этом сайте живёт в адресе
   (?sortby=priceasc), её можно дать ссылкой и добавить в закладки. Меняем
   вид, поведение остаётся прежним.
   -------------------------------------------------------------------------- */
.sortbar{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;
  margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line-2);
  font-size:12.5px}
.sortbar span{color:var(--faint);font-weight:600;letter-spacing:.03em}
.sortbar a{padding:4px 9px;border-radius:20px;background:var(--bg-2);
  color:var(--ink-2);font-weight:600;
  transition:background var(--t) var(--e2),color var(--t) var(--e2)}
@media (hover:hover){
  .sortbar a:hover{background:var(--red-50);color:var(--red-700)}
}

/* Плашка «Акция»/«Новинка» на карточке из макроса. В прототипе такие
   плашки лежали в контейнере .card__badges; здесь макрос печатает их по
   одной, поэтому позиционируем сам элемент. */
.card__badge{position:absolute;top:10px;left:10px;z-index:3;
  display:inline-flex;align-items:center;height:21px;padding:0 8px;
  border-radius:3px;background:var(--red-500);color:#fff;
  font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.card__badge--new{background:var(--blue)}

/* Тот же ярлык, но в строке с ценой на карточке товара: там он не плавает
   над фотографией, а стоит рядом с цифрами. */
.card__badge--inline{position:static;height:20px;background:var(--red-500)}

/* --------------------------------------------------------------------------
   27.6. КАРТОЧКА ТОВАРА

   Галереи здесь намеренно нет. В базе у товара ровно одно поле картинки
   (productImage) — рисовать под ним ленту миниатюр значило бы показывать
   одно и то же фото несколько раз.
   -------------------------------------------------------------------------- */
.pcard{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);
  gap:34px;align-items:start;margin-bottom:32px}

.pcard__media{position:relative;display:flex;align-items:center;
  justify-content:center;padding:26px;min-height:340px;
  border:1px solid var(--line);border-radius:var(--r-l);background:#fff}
.pcard__zoom{display:block;max-width:100%}
.pcard__zoom img{max-width:100%;max-height:300px;object-fit:contain;
  transition:transform .5s var(--e)}
@media (hover:hover){
  .pcard__zoom:hover img{transform:scale(1.05)}
}

/* Правая колонка. min-width:0 обязателен: без него длинное название товара
   без пробелов (а такие в базе есть, вроде «БАМЗ-БКО-50-2») распирает
   колонку сетки и выдавливает фотографию за экран. */
.pcard__info{min-width:0}

.pcard__title{font-size:clamp(22px,2.6vw,32px);margin-bottom:12px}
.pcard__short{font-size:14.5px;color:var(--ink-2);line-height:1.65;
  margin-bottom:18px}
.pcard__short p{margin:0 0 8px}
.pcard__short p:last-child{margin-bottom:0}

/* Цена. Классы .cena-1 и .cena-2 достались от старого сайта: их печатает
   макрос расчёта, который мы принципиально не переписывали, чтобы цифры
   после заливки остались теми же до копейки. Меняем только их вид. */
.pcard__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;
  margin-bottom:18px;padding:14px 18px;border-radius:var(--r);
  background:var(--bg-2)}
.pcard__price .cena-1{font-size:26px;font-weight:800;letter-spacing:-.02em;
  color:var(--red-600)}
.pcard__price .cena-2{font-size:15px;color:var(--faint)}
.pcard__price .cena-2 s{text-decoration:line-through}

.pcard__buy{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.pcard__buy .btn{flex:1 1 190px}

/* Условия отгрузки. Не «преимущества» с иконками, а сухой список: это
   справка, за которой человек приходит сразу после цены. */
.pcard__notes{display:flex;flex-direction:column;gap:8px;
  padding-top:16px;border-top:1px solid var(--line-2)}
.pcard__notes li{position:relative;padding-left:20px;font-size:12.5px;
  color:var(--mute);line-height:1.5}
.pcard__notes li::before{content:"";position:absolute;left:2px;top:7px;
  width:7px;height:7px;border-radius:50%;border:2px solid var(--red-400)}

/* Описание из админки */
.pcard__full{margin-bottom:26px}
.pcard__big{margin-bottom:32px;padding-top:26px;border-top:1px solid var(--line)}

@media (max-width:840px){
  .pcard{grid-template-columns:1fr;gap:22px}
  .pcard__media{min-height:0;padding:18px}
  .pcard__zoom img{max-height:240px}
}

/* Блоки под карточкой */
.prelated,.pviewed{margin-top:36px;padding-top:28px;border-top:1px solid var(--line)}

/* --------------------------------------------------------------------------
   27.7. ФОРМА «НЕ НАШЛИ НУЖНУЮ ПОЗИЦИЮ»

   Отправка писем в этой форме перенесена со старого сайта дословно, вплоть
   до адресов получателей. Здесь только внешний вид.

   Раньше форму разворачивала кнопка «Сообщить». Скрипт, который это делал,
   оформлял старую вёрстку и потому убран, — форма теперь открыта сразу.
   Это единственное изменение в её поведении, и оно записано в README.
   -------------------------------------------------------------------------- */
.reqform{margin-top:36px;padding:26px;border-radius:var(--r-l);
  background:var(--bg-2);border:1px solid var(--line)}
.reqform__hint{max-width:70ch;margin-bottom:18px;font-size:13.5px;
  color:var(--mute);line-height:1.6}
.reqform form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.reqform input,.reqform textarea{width:100%;padding:11px 14px;
  border:1px solid var(--line);border-radius:var(--r-s);background:#fff;
  font-family:var(--f);font-size:14px;color:var(--ink);
  transition:border-color var(--t) var(--e2),box-shadow var(--t) var(--e2)}
.reqform textarea{grid-column:1/-1;resize:vertical;min-height:96px}
.reqform .btn{grid-column:1/-1;justify-self:start}
.reqform input:focus,.reqform textarea:focus{outline:none;
  border-color:var(--red-400);box-shadow:0 0 0 3px var(--red-50)}
.reqform input::placeholder,.reqform textarea::placeholder{color:var(--faint)}
@media (max-width:720px){
  .reqform{padding:20px}
  .reqform form{grid-template-columns:1fr}
}

/* --------------------------------------------------------------------------
   27.8. РАЗДЕЛЫ-ВИТРИНЫ: ПЛИТКИ ПОДРАЗДЕЛОВ

   Показываются там, где у раздела нет своих товаров, а есть подразделы.
   -------------------------------------------------------------------------- */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.tile{display:flex;flex-direction:column;border:1px solid var(--line);
  border-radius:var(--r);background:#fff;overflow:hidden;
  transition:border-color var(--t) var(--e2),box-shadow var(--t) var(--e2),
             transform var(--t) var(--e2)}
.tile__img{display:flex;align-items:center;justify-content:center;
  height:150px;padding:16px;background:var(--bg-2)}
.tile__img img{max-width:100%;max-height:100%;object-fit:contain;
  transition:transform .5s var(--e)}
.tile__name{padding:12px 14px 14px;font-size:13.5px;font-weight:700;
  line-height:1.35;color:var(--ink);transition:color var(--t) var(--e2)}
@media (hover:hover){
  .tile:hover{border-color:var(--red-200);box-shadow:var(--sh-2);
    transform:translateY(-3px)}
  .tile:hover .tile__img img{transform:scale(1.06)}
  .tile:hover .tile__name{color:var(--red-700)}
}
@media (max-width:1024px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:430px){
  /* На телефоне плитка разворачивается в строку: так на экран помещается
     шесть разделов вместо двух, и до нужного не надо листать. */
  .tiles{grid-template-columns:1fr}
  .tile{flex-direction:row;align-items:center}
  .tile__img{flex:0 0 96px;height:88px;padding:10px}
  .tile__name{padding:12px 14px}
}

/* --------------------------------------------------------------------------
   27.9. НОВОСТИ

   Дата отдельной колонкой слева: в списке из двадцати записей взгляд ищет
   именно её, а не заголовок.
   -------------------------------------------------------------------------- */
.newslist{display:flex;flex-direction:column;gap:2px}
.newsitem{display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px;
  padding:20px 0;border-bottom:1px solid var(--line-2)}
.newsitem:last-child{border-bottom:0}
/* В левой колонке — ТОЛЬКО дата. Всё остальное лежит в newsitem__body и
   потому попадает в правую колонку целиком, одним столбиком: заголовок,
   под ним анонс, под ним ссылка. Раньше здесь было четыре прямых потомка
   на две колонки, и сетка раскладывала их по кругу — анонс уезжал под
   дату в узкую колонку и вытягивался в лапшу по одному слову в строке. */
.newsitem__body{min-width:0}
.newsitem__date{padding-top:3px;font-size:12.5px;font-weight:700;
  color:var(--red-600);letter-spacing:.02em;white-space:nowrap}
.newsitem__title{font-size:17px;line-height:1.3;margin-bottom:7px}
.newsitem__title a{transition:color var(--t) var(--e2)}
.newsitem__text{font-size:13.5px;color:var(--mute);line-height:1.6;
  margin-bottom:10px}
.newsitem__more{display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:700;color:var(--red-600)}
.newsitem__more::after{content:"→";transition:transform var(--t) var(--e2)}
@media (hover:hover){
  .newsitem__title a:hover{color:var(--red-700)}
  .newsitem__more:hover::after{transform:translateX(3px)}
}
@media (max-width:560px){
  .newsitem{grid-template-columns:1fr;gap:6px}
}

/* --------------------------------------------------------------------------
   27.10. ИНФОРМАЦИОННЫЕ БЛОКИ ПОД СОДЕРЖИМЫМ

   Собираются из узла 1973. Их набор ведёт клиент в админке, поэтому
   раскладка обязана выдерживать любое количество: auto-fit ровно
   выкладывает и три блока, и семь, не оставляя дыру в ряду.
   -------------------------------------------------------------------------- */
.infoblocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px}
.infoblock{display:flex;flex-direction:column;gap:10px;padding:20px;
  border:1px solid var(--line);border-radius:var(--r);background:#fff;
  transition:border-color var(--t) var(--e2),box-shadow var(--t) var(--e2),
             transform var(--t) var(--e2)}
.infoblock__img{display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:var(--r-s);background:var(--red-50)}
.infoblock__img img{max-width:34px;max-height:34px;object-fit:contain}
.infoblock__head{font-size:14.5px;font-weight:800;line-height:1.3;
  color:var(--ink);transition:color var(--t) var(--e2)}
.infoblock__text{font-size:13px;color:var(--mute);line-height:1.6}
@media (hover:hover){
  .infoblock:hover{border-color:var(--red-200);box-shadow:var(--sh-2);
    transform:translateY(-2px)}
  .infoblock:hover .infoblock__head{color:var(--red-700)}
}

/* --------------------------------------------------------------------------
   27.11. КАРТА ПРОЕЗДА

   Показывается только там, где редактор поставил галочку showMap — это
   поведение старого сайта, оно сохранено. Высоту задаём здесь: у iframe в
   разметке height:100%, а процент от родителя нулевой высоты даёт ноль.
   -------------------------------------------------------------------------- */
.gmap{height:380px;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);background:var(--bg-2)}
.gmap iframe{display:block;width:100%;height:100%;border:0}
@media (max-width:720px){.gmap{height:280px}}

/* --------------------------------------------------------------------------
   27.12. ТЕКСТ ИЗ АДМИНКИ

   Самый важный блок во всём файле. За годы работы в базу набрано около
   шестидесяти страниц текста: таблицы характеристик, списки, вставленные
   картинки, кое-где ширина в пикселях прямо в атрибуте. Переписывать этот
   текст мы не имеем права — это содержимое клиента. Значит, приводим его
   к новому виду отсюда.

   Правила намеренно узкие (.cms table, .cms ul), чтобы не задеть разметку
   макросов, которая живёт рядом на той же странице.
   -------------------------------------------------------------------------- */
.cms{font-size:14.5px;line-height:1.7;color:var(--ink-2);max-width:88ch}
.cms > *:first-child{margin-top:0}
.cms > *:last-child{margin-bottom:0}

.cms h1,.cms h2,.cms h3,.cms h4{color:var(--ink);margin:26px 0 12px}
.cms h1{font-size:clamp(22px,2.6vw,30px)}
.cms h2{font-size:clamp(19px,2.2vw,25px)}
.cms h3{font-size:17px}
.cms h4{font-size:15px}
.cms p{margin:0 0 12px}
.cms b,.cms strong{font-weight:700;color:var(--ink)}

.cms a{color:var(--blue);text-decoration:underline;
  text-underline-offset:2px;text-decoration-thickness:1px}
@media (hover:hover){
  .cms a:hover{color:var(--red-600)}
}

.cms ul,.cms ol{margin:0 0 14px;padding-left:0}
.cms ol{padding-left:22px;list-style:decimal}
.cms ol li{margin-bottom:6px}
.cms ul li{position:relative;padding-left:20px;margin-bottom:6px;list-style:none}
.cms ul li::before{content:"";position:absolute;left:3px;top:9px;
  width:6px;height:6px;border-radius:50%;background:var(--red-400)}

/* Картинки из редактора. Почти у всех в базе проставлен width атрибутом —
   на телефоне такая картинка вылезает за экран и заставляет страницу
   ездить вбок. height:auto рядом с max-width обязателен, иначе поедут
   пропорции. */
.cms img{max-width:100%;height:auto;border-radius:var(--r-s)}

/* Таблицы характеристик. Обернуть их контейнером со скроллом нельзя:
   редактор пишет голый <table>, оборачивать нечем. Поэтому прокрутку
   даём самой таблице через display:block на узком экране. */
.cms table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:13.5px}
.cms th,.cms td{padding:9px 12px;border:1px solid var(--line);
  text-align:left;vertical-align:top}
.cms th{background:var(--bg-2);font-weight:700;color:var(--ink)}
.cms tr:nth-child(even) td{background:var(--bg-3)}
/* На узком экране таблице даём прокрутку, но перенос строк НЕ запрещаем.
   Сначала здесь стоял white-space:nowrap — правильно для таблицы
   характеристик и очень плохо для «Контактов»: там таблицей набрана не
   таблица, а раскладка страницы (адрес слева, телефоны справа). С запретом
   переноса эта раскладка уезжала за экран одной длинной строкой. Перенос
   разрешён — характеристики станут чуть выше, зато читаются везде. */
@media (max-width:720px){
  .cms table{display:block;overflow-x:auto;
    -webkit-overflow-scrolling:touch}
}

/* Картинка страницы «фото + описание». Раньше ширина и обтекание стояли
   в атрибуте style прямо в разметке, и на телефоне картинка занимала
   300 px из 360, а тексту оставалась колонка в одно слово. Теперь этим
   распоряжается таблица стилей — и на узком экране обтекание снимается. */
.cmsfig{float:left;width:300px;max-width:42%;margin:4px 20px 12px 0;
  display:block;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.cmsfig img{display:block;width:100%;height:auto;
  transition:transform .5s var(--e)}
@media (hover:hover){
  .cmsfig:hover img{transform:scale(1.04)}
}
@media (max-width:640px){
  .cmsfig{float:none;width:100%;max-width:100%;margin:0 0 16px}
}

.cms blockquote{margin:0 0 16px;padding:14px 18px;
  border-left:3px solid var(--red-400);background:var(--bg-2);
  border-radius:0 var(--r-s) var(--r-s) 0;color:var(--ink-2)}
.cms hr{height:1px;border:0;background:var(--line);margin:24px 0}

/* --------------------------------------------------------------------------
   27.13. ПРОПУЩЕННАЯ ОБЁРТКА .ep__cards

   Дыра в стилях самого прототипа: карточки .ep__card оформлены, а
   контейнер вокруг них — нет. Пока карточка одна, это незаметно, но при
   переключении вкладок высота блока прыгает, и страница дёргается под
   курсором. Минимальная высота убирает прыжок.
   -------------------------------------------------------------------------- */
.ep__cards{min-width:0}
@media (min-width:861px){.ep__cards{min-height:340px}}

/* --------------------------------------------------------------------------
   27.14. ТОВАРЫ НА ГЛАВНОЙ — ЛИСТАЮТСЯ ПАЛЬЦЕМ

   Клиент просил, чтобы на главной товары листались вбок, а не тянулись
   вниз. В прототипе для этого есть класс .products--rail, но на боевом
   сайте список печатает макрос, общий с каталогом: добавить туда класс
   нельзя, не сломав каталог, где нужна именно сетка.

   Поэтому отличаем по месту: вкладки .tabpanel есть только на главной.
   Правила ниже повторяют .products--rail — держать их синхронно.
   -------------------------------------------------------------------------- */
@media (max-width:720px){
  .tabpanel > .products{
    display:flex;
    gap:12px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    /* от края до края экрана: выходим за поля .wrap и возвращаем padding */
    margin-left:-20px;margin-right:-20px;
    padding:2px 20px 10px;
    scroll-padding-left:20px;
    scrollbar-width:none;
  }
  .tabpanel > .products::-webkit-scrollbar{display:none}

  .tabpanel > .products > .card{
    /* заметно уже экрана: край следующей карточки выглядывает и
       подсказывает, что ленту можно листать */
    flex:0 0 68%;
    min-width:0;
    max-width:290px;
    scroll-snap-align:start;
  }
  .tabpanel > .products > .card:hover{transform:none;box-shadow:none;z-index:auto}
  .tabpanel > .products > [data-reveal]{
    opacity:1;transform:none;transition-delay:0ms!important;
  }
}
@media (max-width:430px){
  .tabpanel > .products > .card{flex-basis:78%}
}

/* --------------------------------------------------------------------------
   27.15. ОФОРМЛЕНИЕ, НАБРАННОЕ В РЕДАКТОРЕ

   Из-за этого блока клиент и написал «многие страницы не заработаны по
   дизайну». Страницы-то переписаны — «О компании», «Контакты», «Услуги»,
   «Полезная информация», все новости идут уже через новые шаблоны. Но
   САМ ТЕКСТ на них приходит из базы вместе со своим оформлением, а его
   набирали в визуальном редакторе с 2013 года.

   Сколько там этого добра, посчитано по App_Data/umbraco.config:
   763 куска текста, 2,4 млн знаков, 35 075 тегов <span>, из них
   2 691 со своим font-size и 1 881 со своим color (обычно #333333 или
   #888888), 114 таблиц с шириной в пикселях, 236 картинок.

   Правило каскада: объявление в атрибуте style сильнее любого правила из
   таблицы стилей. Поэтому весь раздел 27.12 выше по этим страницам просто
   не работал — его перебивал inline. Единственный законный способ
   переспорить inline — !important в авторской таблице стилей. Ровно это
   и делает блок ниже: не переписывая ни одной буквы клиентского текста,
   он снимает С НЕГО чужое оформление и возвращает страницу в наш вид.

   Снимаем только оформление шрифта и размеры. Выравнивание, отступы и
   обтекание оставляем: это осмысленное решение редактора, а не мусор.
   -------------------------------------------------------------------------- */
.cms [style]{
  font-size:inherit!important;
  font-family:inherit!important;
  line-height:inherit!important;
  color:inherit!important;
  background-color:transparent!important;
  vertical-align:baseline!important;
}
/* Исключения: у верхних и нижних индексов (Ø 5 мм, м³) сдвиг по вертикали —
   не мусор, а смысл. В базе их 153 штуки. */
.cms sup,.cms sup[style]{vertical-align:super!important;font-size:.75em!important}
.cms sub,.cms sub[style]{vertical-align:sub!important;font-size:.75em!important}

/* Размеры в пикселях прямо в разметке. Самый заметный случай —
   «Контакты»: там <table style="width: 706px; height: 564px">, и на
   телефоне страница уезжала вбок. Ширину и высоту отдаём таблице стилей. */
.cms table[style]{width:100%!important;height:auto!important}
.cms td[style],.cms th[style],.cms tr[style]{
  width:auto!important;height:auto!important}
.cms img[style]{max-width:100%!important;height:auto!important}
.cms div[style],.cms p[style],.cms span[style]{max-width:100%}

/* Пустые абзацы. Редактор оставляет их пачками после каждой правки, и на
   странице получаются провалы в полэкрана без всякой причины. */
.cms p:empty,.cms div:empty{display:none}

/* Картинки, вставленные ссылкой на чужой сайт по http (иконка Viber на
   «Контактах» — с irecommend.ru, значок абразивов — с sgabrasives.ru, и
   ещё четыре). Сайт отдаётся по https, браузер такую картинку блокирует
   как смешанное содержимое и рисует на её месте битый лист. Мы не можем
   ни починить чужой сервер, ни отредактировать текст без админки —
   значит, убираем с глаз. Всего таких шесть на весь сайт. */
.cms img[src^="http://"]{display:none}

/* Вставки с YouTube и Instagram — в базе их четыре, все с жёсткой
   шириной в атрибутах. */
.cms iframe{max-width:100%;border:0;border-radius:var(--r-s)}

/* --------------------------------------------------------------------------
   27.16. РЕЗУЛЬТАТЫ ПОИСКА ПО САЙТУ

   Поиск живёт на /catalog?q=…: своей страницы завести нельзя, поэтому
   раздел «Каталог» при наличии q печатает результаты вместо плиток. Товары
   при этом рисуются обычными карточками .card — своих стилей им не надо.
   Здесь оформлена только вторая половина выдачи: страницы, статьи, новости.

   Строкой, а не плиткой, — намеренно. У статьи нет картинки, плитка без
   картинки выглядит поломанной, а список читается быстрее, когда в нём
   заголовок и первая строка текста.
   -------------------------------------------------------------------------- */
.srch__sum{font-size:13px;color:var(--mute);margin:0 0 16px}
/* Подзаголовок перед второй половиной выдачи. Товары печатаются первыми —
   человек, набравший «резак», ищет резак, а не статью про него, — и без
   такой подписи следом идущие ссылки на страницы выглядят как продолжение
   каталога. Отступ сверху больше нижнего: подпись должна прилипать к
   своему списку, а не висеть между двумя. */
.srch__sum--sub{margin:34px 0 12px;font-size:12px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);
  padding-top:20px;border-top:1px solid var(--line)}
.srch__pages{display:grid;gap:10px;margin:0 0 30px}
.srch__hit{display:block;padding:14px 16px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--bg);text-decoration:none;
  transition:border-color var(--t) var(--e2),
             box-shadow var(--t) var(--e2),
             transform var(--t) var(--e2)}
.srch__hit b{display:block;color:var(--ink);font-size:15.5px;
  font-weight:700;line-height:1.35;margin:0 0 5px}
.srch__where{display:inline-block;font-size:11px;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;color:var(--red-600);
  background:var(--red-50);padding:3px 9px;border-radius:999px;
  margin:0 0 7px}
.srch__snip{display:block;font-size:13px;line-height:1.6;color:var(--ink-2)}
@media (hover:hover){
  .srch__hit:hover{border-color:var(--red-200);box-shadow:var(--sh-2);
    transform:translateY(-1px)}
  .srch__hit:hover b{color:var(--red-600)}
}

/* Пустая выдача. Это не ошибка, а развилка: человек уже здесь, и наша
   задача — не извиниться, а дать следующий шаг. Поэтому телефон и ссылка
   на каталог, а не одинокая строчка «ничего не найдено». */
.srch__empty{max-width:640px;padding:26px 24px;border:1px solid var(--line);
  border-radius:var(--r-l);background:var(--g-red-soft)}
.srch__empty b{display:block;font-size:18px;color:var(--ink);margin:0 0 8px}
.srch__empty p{font-size:14px;line-height:1.65;color:var(--ink-2);
  margin:0 0 16px}
.srch__empty a[href^="tel:"]{color:var(--red-600);font-weight:700;
  white-space:nowrap}

/* --------------------------------------------------------------------------
   27.17. ПЕЧАТЬ

   Дополнение к разделу 26: на боевом сайте есть блоки, которых в прототипе
   нет, и на бумаге они бесполезны — карта, форма заявки, левое меню.
   -------------------------------------------------------------------------- */
@media print{
  .gmap,.reqform,.layout__side,.quicknav,.sortbar,.pviewed{display:none!important}
  .layout{display:block}
  .pcard{display:block}
  .cms{max-width:none}
}