/* ============================================================
   ИНТЭР — единый кастомный слой (палитра + утилиты + блоки главной)
   Одна точка для общих стилей и анимаций блоков.
   Подключается глобально из local/templates/eshop/header.php.
   Селекторы .ie-* активны только там, где эти классы есть —
   глобальная загрузка ничего не ломает.
   ============================================================ */

:root{
  --ie-navy:#1d2126;
  /* Подложка баннера. Картинка в баннере НАМЕРЕННО сдвинута вправо
     (.heroUnit-item img{float:right;right:-30%}), и слева на 288 px видно
     фон блока — так задумано в оригинальном шаблоне. Пока картинка и фон
     были одинаково синими, стык не читался; после перекраски разница
     в один-два уровня на канал превратилась в видимую полосу.
     Значение снято пипеткой с левого края самого баннера: #17191c
     держится по всей его высоте, поэтому одного цвета достаточно. */
  --ie-graphite-deep:#17191c;
  --ie-orange:#ef8633;
  --ie-orange-light:#f7a259;
  --ie-cyan:#40c9d6;
  --ie-cyan-light:#6fe0ea;
  --ie-orange-rgb:239,134,51;   /* каналы для rgba(...) свечений */
  --ie-cyan-rgb:64,201,214;
  --ie-navy-rgb:29,33,38;
  /* На тон светлее фирменного тёмного. Нужен там, где на тёмной карточке
     лежат поля ввода: полупрозрачный фон пропускает сквозь себя свечение
     подложки, и поля справа красились в бирюзовый угол. */
  --ie-navy-soft:#262b31;
  --ie-bg-soft:#f4f6f5;      /* серая фон-панель секции */
  --ie-border:#d3d3d3;
  --ie-border-soft:#e7e1da;
  --ie-text-muted:#7a7a7a;
}

/* ---- общие утилиты секций ---- */
.ie-section{padding:60px 0}
.ie-bg-soft{background:var(--ie-bg-soft)}
.ie-bg-white{background:#fff}

/* ---- главное меню: 6 пунктов (добавлен раздел «Разработки») в одну строку ----
   Меню живёт в <nav class="pageHeader-menu d-none d-lg-block"> (header.php:82),
   т.е. реально видно только с 992px. При штатных margin:0 10px шестой пункт переносился.
   Скоупим на .pageHeader-menu — специфичность (0,2,1) перебивает
   preload_styles.css `.mainMenu>li` (0,1,1) независимо от порядка загрузки файлов. */
@media (min-width:992px){
  .pageHeader-menu .mainMenu>li{margin:0 6px;white-space:nowrap}
}
@media (min-width:992px) and (max-width:1199.98px){
  .pageHeader-menu .mainMenu>li{margin:0 4px}
  .pageHeader-menu .mainMenu>li>a{font-size:14px}
}

/* ---- оплата по СБП: кнопка + содержимое окна ---- */
.sbp-pay{margin:24px 0}
.btn-sbp{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border:0;border-radius:10px;background:var(--ie-orange,#ef8633);color:#fff;font-weight:700;font-size:16px;cursor:pointer;text-decoration:none;transition:background .2s ease}
.btn-sbp:hover{background:var(--ie-orange-light,#f7a259);color:#fff}
.btn-sbp .sbp-ic{font-size:20px;line-height:1}
.sbp-modal{text-align:center;max-width:520px;margin:0 auto}
.sbp-modal-qr{display:block;width:260px;max-width:80%;height:auto;margin:6px auto 16px;border:1px solid var(--ie-border-soft,#e7e1da);border-radius:12px;padding:10px;background:#fff}
.sbp-modal-qr-ph{width:260px;max-width:80%;aspect-ratio:1/1;margin:6px auto 16px;border:2px dashed var(--ie-border,#d3d3d3);border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--ie-text-muted,#7a7a7a);font-size:14px;text-align:center;padding:16px}
.sbp-req{margin:0 0 4px;font-size:16px}
.sbp-req b{color:var(--ie-navy,#1d2126)}
.sbp-modal-note{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--ie-border-soft,#e7e1da);color:var(--ie-text-muted,#7a7a7a);font-size:14px;line-height:1.55;text-align:left}
.sbp-modal-note b{color:var(--ie-orange,#ef8633)}

/* ---- модалка правовых документов (footer -> Политика) ---- */
.ie-modal-lock{overflow:hidden}
.ie-modal-overlay{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(var(--ie-navy-rgb,29,33,38),.55)}
.ie-modal-overlay.is-open{display:flex}
.ie-modal{position:relative;width:100%;max-width:820px;max-height:86vh;display:flex;flex-direction:column;background:#fff;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.ie-modal-title{font-weight:700;font-size:20px;line-height:1.3;color:var(--ie-navy,#1d2126);padding:22px 56px 14px 28px;border-bottom:1px solid var(--ie-border-soft,#e7e1da)}
.ie-modal-body{overflow-y:auto;padding:20px 28px 28px;line-height:1.6}
.ie-modal-body h2{font-size:18px;margin:22px 0 10px;color:var(--ie-navy,#1d2126)}
.ie-modal-body p{margin:0 0 12px}
.ie-modal-body ul{padding-left:22px;margin:0 0 14px;list-style:disc}
.ie-modal-loading{color:var(--ie-text-muted,#7a7a7a)}
.ie-modal-close{position:absolute;top:12px;right:14px;width:36px;height:36px;border:0;background:transparent;font-size:30px;line-height:1;color:var(--ie-text-muted,#7a7a7a);cursor:pointer}
.ie-modal-close:hover{color:var(--ie-orange,#ef8633)}
@media (max-width:767.98px){.ie-modal-title{font-size:17px;padding:18px 48px 12px 18px}.ie-modal-body{padding:16px 18px 22px}}

/* ---- /about/ hero: лого «Сколково — Участник» в один ряд с МАИ/МИФИ ----
   Баннер широкий; фиксируем высоту и центрируем ряд, чтобы не съезжал вниз. */
.heroUnit-item-logos{align-items:center}
.heroUnit-item-logos img[src*="sk-uchastnik"]{height:54px;width:auto;flex:0 0 auto}

/* ---- футер: нижняя строка выровнена по нижнему краю ----
   © слева и нижняя строка ссылок (Согласие на рассылку / Карта сайта)
   идут по одной нижней линии; верхняя строка ссылок — над ней. */
.pageFooter-legalrow{align-items:flex-end}
/* правовые ссылки сеткой 2×2 (две строки по две ссылки), выровнены вправо:
   [Политика] [Согласие на обработку]
   [Согласие на рассылку] [Карта сайта] */
.pageFooter-copy.rightText{display:grid;grid-template-columns:auto auto;justify-content:end;align-content:center;gap:8px 24px}
.pageFooter-copy.rightText a{display:inline-block;white-space:nowrap}
@media (max-width:991.98px){
  .pageFooter-copy.rightText{grid-template-columns:1fr;justify-content:start;margin-top:10px}
  .pageFooter-copy.rightText a{white-space:normal}
}

/* ---- строка «ознакомлен с политикой» на регистрации (вместо галочки) ---- */
.reg-policy-note{color:var(--ie-text-muted,#7a7a7a);font-size:14px;line-height:1.5}
.reg-policy-note a{color:var(--ie-cyan,#40c9d6);text-decoration:underline}
.reg-policy-note a:hover{color:var(--ie-orange,#ef8633)}

/* ---- правовые страницы (политика/согласия): читаемая колонка ---- */
.ie-doc .blockText{max-width:900px}
.ie-doc .blockTitle{margin-bottom:8px}
.ie-doc-sub{color:var(--ie-text-muted,#7a7a7a);font-size:16px;margin:0 0 18px}
.ie-doc-meta{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--ie-text-muted,#7a7a7a);font-size:14px;border-bottom:1px solid var(--ie-border-soft,#e7e1da);padding-bottom:14px;margin:0 0 24px}
.ie-doc-h2{font-size:20px;line-height:1.35;margin:28px 0 12px;color:var(--ie-navy,#1d2126)}
.ie-doc p{margin:0 0 12px;line-height:1.6}
.ie-doc-list{margin:0 0 16px;padding-left:22px;list-style:disc}
.ie-doc-list li{margin:0 0 6px;line-height:1.55}
@media (max-width:767.98px){.ie-doc-h2{font-size:18px}}

/* ---- каталог: адаптивная сетка карточек, до 5 в ряд на десктопе (PDF4 п.9) ----
   Скоупим на контейнер листинга [data-entity="items-row"], карточки всегда несут .col-6.
   Специфичность (0,2,0) перебивает bootstrap col-* без !important. */
@media (min-width:768px){[data-entity="items-row"]>.col-6{flex:0 0 33.3333%;max-width:33.3333%}}   /* md: 3 */
@media (min-width:992px){[data-entity="items-row"]>.col-6{flex:0 0 25%;max-width:25%}}              /* lg: 4 */
@media (min-width:1200px){[data-entity="items-row"]>.col-6{flex:0 0 20%;max-width:20%}}             /* xl: 5 */

/* ---- общий reveal: fade+rise один раз при входе в вьюпорт ---- */
/* data-ie-reveal -> .ie-reveal (движком), затем .is-in на пересечении */
.js-ie .ie-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease,box-shadow .7s ease;will-change:opacity,transform}
.js-ie .ie-reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js-ie .ie-reveal{opacity:1;transform:none;transition:none}}

/* ============ блок: «Полный цикл» (pipeline) ============ */
.ie-flow{position:relative;margin:54px 0 34px}
.ie-flow-rail{position:absolute;top:42px;left:12.5%;right:12.5%;height:4px;border-radius:4px;background:var(--ie-border-soft);z-index:0}
.ie-rail-fill{position:absolute;top:42px;left:12.5%;right:12.5%;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--ie-orange),var(--ie-orange-light));z-index:1}
.ie-spark-track{position:absolute;top:38px;left:12.5%;right:12.5%;height:12px;z-index:2;pointer-events:none}
.ie-spark{position:absolute;top:0;left:0;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#fff;box-shadow:0 0 12px 4px rgba(239,134,51,.9),0 0 5px 2px var(--ie-orange)}
.ie-cols{display:flex;position:relative;z-index:3}
.ie-col{flex:1 1 0;padding:0 12px;text-align:center}
.ie-node{position:relative;width:88px;height:88px;margin:0 auto 22px;border-radius:50%;background:#fff;border:2px solid var(--ie-border-soft);display:flex;align-items:center;justify-content:center;transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.ie-node>img{width:46px;height:46px;object-fit:contain}
.ie-badge{position:absolute;top:-6px;right:-6px;width:28px;height:28px;border-radius:50%;background:var(--ie-orange);color:#fff;font-size:.85rem;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(239,134,51,.45);border:2px solid #fff}
.ie-txt-title{font-weight:600;font-size:1.05rem;line-height:1.3}
.ie-txt-desc{margin-top:8px;font-size:.9rem;color:var(--ie-text-muted);line-height:1.4}
.ie-col:hover .ie-node{transform:translateY(-5px);box-shadow:0 16px 34px rgba(239,134,51,.22);border-color:var(--ie-orange)}

/* --- движение трубы: играет один раз; hidden-initial под .js-flow,
       поэтому без JS блок виден целиком --- */
@keyframes ie-node-in{0%{opacity:0;transform:translateY(22px) scale(.82)}60%{transform:translateY(0) scale(1.06)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes ie-badge-pop{0%{transform:scale(0)}70%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes ie-rail-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ie-spark{0%{left:0%;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:100%;opacity:0}}
@keyframes ie-txt-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.js-flow .ie-flow .ie-rail-fill{transform:scaleX(0);transform-origin:left center}
.js-flow .ie-flow .ie-spark{opacity:0}
.js-flow .ie-flow .ie-node{opacity:0}
.js-flow .ie-flow .ie-badge{transform:scale(0)}
.js-flow .ie-flow .ie-txt{opacity:0}
.ie-flow.in .ie-rail-fill{animation:ie-rail-grow 3s cubic-bezier(.65,0,.35,1) .3s forwards}
.ie-flow.in .ie-spark{animation:ie-spark 3.2s linear 3s 4}
.ie-flow .ie-spark:nth-of-type(2),.ie-flow .ie-spark:nth-of-type(3){display:none}
.ie-flow.in .ie-node{will-change:transform;animation:ie-node-in 1s cubic-bezier(.34,1.56,.64,1) forwards}
.ie-flow.in .ie-col:nth-child(1) .ie-node{animation-delay:.4s}
.ie-flow.in .ie-col:nth-child(2) .ie-node{animation-delay:1.2s}
.ie-flow.in .ie-col:nth-child(3) .ie-node{animation-delay:2s}
.ie-flow.in .ie-col:nth-child(4) .ie-node{animation-delay:2.8s}
.ie-flow.in .ie-badge{animation:ie-badge-pop .55s cubic-bezier(.34,1.56,.64,1) forwards}
.ie-flow.in .ie-col:nth-child(1) .ie-badge{animation-delay:.75s}
.ie-flow.in .ie-col:nth-child(2) .ie-badge{animation-delay:1.55s}
.ie-flow.in .ie-col:nth-child(3) .ie-badge{animation-delay:2.35s}
.ie-flow.in .ie-col:nth-child(4) .ie-badge{animation-delay:3.15s}
.ie-flow.in .ie-txt{animation:ie-txt-in .7s ease forwards}
.ie-flow.in .ie-col:nth-child(1) .ie-txt{animation-delay:.7s}
.ie-flow.in .ie-col:nth-child(2) .ie-txt{animation-delay:1.5s}
.ie-flow.in .ie-col:nth-child(3) .ie-txt{animation-delay:2.3s}
.ie-flow.in .ie-col:nth-child(4) .ie-txt{animation-delay:3.1s}
@media (max-width:767px){
  .ie-flow .ie-flow-rail,.ie-flow .ie-rail-fill,.ie-flow .ie-spark-track{display:none}
  .ie-cols{flex-wrap:wrap}
  .ie-col{flex:0 0 50%;max-width:50%;margin-bottom:24px}
  .ie-node{width:72px;height:72px}
  .ie-node>img{width:38px;height:38px}
}

/* ============================================================
   Страницы-хабы каталога (/catalog/lifepo4|tyagovye|sne|bms|komplektuyushchie/)
   Разметку отдаёт local/php_interface/hub_render.php.
   Префикс .ie-hub-* — чтобы не пересечься с классами шаблона и Битрикса.
   ============================================================ */

.ie-hub{padding:32px 0 64px}
.ie-hub section{margin-bottom:52px}
.ie-hub h2{font-size:1.6rem;font-weight:600;margin:0 0 18px;color:var(--ie-navy)}
.ie-hub p{line-height:1.65;margin:0 0 14px}
.ie-hub a{color:var(--ie-navy);text-decoration:underline;text-decoration-color:rgba(var(--ie-orange-rgb),.5)}
.ie-hub a:hover{color:var(--ie-orange)}

/* --- шапка --- */
.ie-hub-h1{font-size:2.1rem;line-height:1.2;font-weight:700;color:var(--ie-navy);margin:0 0 18px}
.ie-hub-lead{font-size:1.08rem;max-width:60em;color:#333}
.ie-hub-facts{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:22px 0 0}
.ie-hub-facts li{flex:1 1 210px;background:var(--ie-bg-soft);border-left:3px solid var(--ie-orange);
  border-radius:0 6px 6px 0;padding:12px 16px;font-size:.94rem;line-height:1.45}
.ie-hub-facts b{color:var(--ie-navy)}

/* --- подбор чипами: главный элемент, повторяет поведение топовых конкурентов --- */
.ie-hub-pick-group{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px}
.ie-hub-pick-label{flex:0 0 auto;min-width:132px;font-size:.86rem;text-transform:uppercase;
  letter-spacing:.04em;color:var(--ie-text-muted)}
.ie-hub-chip{display:inline-block;padding:7px 15px;border:1px solid var(--ie-border);border-radius:20px;
  background:#fff;font-size:.93rem;text-decoration:none;white-space:nowrap;
  transition:border-color .2s ease,color .2s ease,box-shadow .2s ease}
/* Кнопка фильтра: то же оформление, что у прежних ссылок-«таблеток»,
   но это <button> — нажатие фильтрует витрину, а не уводит со страницы. */
.ie-hub-chip{font-family:inherit;cursor:pointer;background:#fff}
.ie-hub-chip.is-active{border-color:var(--ie-orange);background:var(--ie-orange);
  color:#fff}
.ie-hub-chip.is-active .ie-hub-chip-n{background:rgba(255,255,255,.25);color:#fff}
.ie-hub-chip-n{display:inline-block;margin-left:7px;padding:1px 7px;border-radius:10px;
  background:var(--ie-bg-soft);font-size:.8rem;color:var(--ie-text-muted);
  font-variant-numeric:tabular-nums}
.ie-hub-pick-state{display:flex;align-items:center;gap:14px;margin:14px 0 0;
  font-size:.94rem;color:var(--ie-text-muted)}
.ie-hub-pick-reset{border:0;background:none;padding:0;cursor:pointer;font-family:inherit;
  font-size:.94rem;color:var(--ie-orange);text-decoration:underline}
.ie-hub-card[hidden]{display:none}

/* Смежные разделы — переходы, вынесенные из фильтра: они ведут на другие
   страницы, и держать их вперемешку с кнопками фильтра нельзя. */
.ie-hub-related-links{display:flex;flex-wrap:wrap;gap:10px}
.ie-hub-related-links a{display:inline-block;padding:7px 15px;border:1px solid var(--ie-border);
  border-radius:20px;font-size:.94rem;text-decoration:none;
  transition:border-color .2s ease,color .2s ease,background .2s ease}
.ie-hub-related-links a:hover{border-color:var(--ie-orange);color:var(--ie-orange);
  background:var(--ie-bg-soft)}

.ie-hub-chip:hover{border-color:var(--ie-orange);color:var(--ie-orange);
  box-shadow:0 4px 12px rgba(var(--ie-orange-rgb),.18);text-decoration:none}

/* --- сетка товаров --- */
.ie-hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.ie-hub-card{display:flex;flex-direction:column;gap:6px;padding:14px;border:1px solid var(--ie-border-soft);
  border-radius:14px;background:#fff;text-decoration:none;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.ie-hub-card:hover{border-color:var(--ie-orange);transform:translateY(-4px);
  box-shadow:0 16px 32px rgba(var(--ie-navy-rgb),.12);text-decoration:none}
/* Подъём разрешаем только после появления: анимация выхода и наведение
   трогают один и тот же transform. */
.js-ie .ie-hub-grid .ie-hub-card.ie-reveal:hover{transform:translateY(22px)}
.js-ie .ie-hub-grid .ie-hub-card.ie-reveal.is-in:hover{transform:translateY(-4px)}
.ie-hub-card-img{width:100%;height:150px;object-fit:contain;margin-bottom:4px}
/* Заглушка вместо фото: ряд держит высоту, карточка не выглядит пустой */
.ie-hub-card-img-empty{display:block;border-radius:8px;background:repeating-linear-gradient(135deg,var(--ie-bg-soft,#f5f6f8) 0 10px,rgba(0,0,0,.02) 10px 20px)}
.ie-hub-card-name{font-size:.95rem;line-height:1.35;color:var(--ie-navy)}
.ie-hub-card-spec{font-size:.86rem;color:var(--ie-text-muted)}
.ie-hub-card-art{font-size:.78rem;color:var(--ie-text-muted);font-variant-numeric:tabular-nums}
/* Имя, характеристика и артикул — каждый со своей строки. Иначе в карточке
   с фото артикул прилипал к концу названия, а в карточке без фото уходил
   вниз: один ряд, два разных вида. Пустая характеристика строку не занимает. */
.ie-hub-card-name,.ie-hub-card-spec,.ie-hub-card-art{display:block}
.ie-hub-card-spec:empty{display:none}
.ie-hub-more{margin-top:18px}

/* Плитка перехода в полный список — последняя в ряду витрины.
   Тот же приём, что в блоке кейсов: строчная ссылка под сеткой терялась,
   а плитка читается как продолжение ряда. Подложка графитовая, чтобы
   отличаться от товарных карточек и не спорить с фирменным синим. */
.ie-hub-card-all{background:linear-gradient(150deg,#41464d 0%,#23272c 55%,#111417 100%);
  border-color:transparent;justify-content:center;gap:0;padding:22px 22px 20px}
.ie-hub-card-all:hover{border-color:var(--ie-orange)}
.ie-hub-card-all-title{font-size:1.16rem;line-height:1.25;font-weight:700;color:#fff}
.ie-hub-card-all-text{margin-top:10px;font-size:.88rem;line-height:1.5;
  color:rgba(255,255,255,.62)}
.ie-hub-card-all-link{display:inline-flex;align-items:center;gap:8px;margin-top:auto;
  padding-top:16px;font-size:.95rem;font-weight:600;color:var(--ie-orange)}
.ie-hub-card-all-link svg{transition:transform .25s ease}
.ie-hub-card-all:hover .ie-hub-card-all-link svg{transform:translateX(5px)}

/* Картинка товара чуть наезжает при наведении — тот же жест, что у кейсов,
   чтобы витрина и портфолио ощущались одной системой. */
.ie-hub-card{overflow:hidden}
.ie-hub-card-img{transition:transform .45s ease}
.ie-hub-card:hover .ie-hub-card-img{transform:scale(1.06)}
/* Появление и наведение трогают один transform, поэтому подъём карточки
   разрешаем только после того, как она проявилась. */
.js-ie .ie-hub-grid .ie-hub-card.ie-reveal:nth-child(3n+2){transition-delay:.07s}
.js-ie .ie-hub-grid .ie-hub-card.ie-reveal:nth-child(3n){transition-delay:.14s}
.ie-hub-empty{background:var(--ie-bg-soft);border-radius:8px;padding:18px 20px;max-width:60em}

/* --- таблицы выбора: на узком экране скроллятся внутри себя, страница не едет --- */
.ie-hub-tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ie-hub-tbl{width:100%;border-collapse:collapse;font-size:.94rem;min-width:520px}
.ie-hub-tbl th{background:var(--ie-navy);color:#fff;font-weight:600;text-align:left;padding:11px 14px}
.ie-hub-tbl td{padding:11px 14px;border-bottom:1px solid var(--ie-border-soft);vertical-align:top}
.ie-hub-tbl tbody tr:nth-child(even){background:var(--ie-bg-soft)}
.ie-hub-tbl a{white-space:nowrap}

/* --- развёрнутый разбор темы ----------------------------------------------
   Длинный текст читают с экрана, поэтому кегль крупнее обычного (1,06rem),
   строка 1,75 и колонка ограничена 64em: строка длиннее ~90 знаков теряется
   при переносе взгляда на следующую. */
.ie-hub-text p,.ie-hub-text li{font-size:1.06rem;line-height:1.75;max-width:64em}
.ie-hub-text h3{font-size:1.24rem;font-weight:600;color:var(--ie-navy);margin:30px 0 12px}
.ie-hub-text ul,.ie-hub-text ol{margin:0 0 16px;padding-left:22px}
.ie-hub-text li{margin-bottom:9px}
.ie-hub-text li>b{color:var(--ie-navy)}
.ie-hub-text .ie-hub-tbl-wrap{margin:0 0 18px}

/* Шаги расчёта: нумерация рисуется счётчиком, а не цифрой в тексте —
   вставили шаг в середину, и перенумеровывать ничего не нужно. */
.ie-hub-steps{counter-reset:ie-step;list-style:none;padding:0;margin:0 0 18px;
  display:grid;gap:14px}
.ie-hub-steps>li{counter-increment:ie-step;position:relative;
  padding:18px 20px 18px 62px;background:var(--ie-bg-soft);border-radius:10px;max-width:none}
.ie-hub-steps>li::before{content:counter(ie-step);position:absolute;left:18px;top:16px;
  width:30px;height:30px;border-radius:50%;background:var(--ie-navy);color:#fff;
  font-size:.95rem;font-weight:600;display:flex;align-items:center;justify-content:center}
.ie-hub-steps b{display:block;color:var(--ie-navy);margin-bottom:5px;font-size:1.08rem}
.ie-hub-steps p{margin:0;max-width:none}

/* Разобранный пример: выделен рамкой слева, чтобы его было видно
   при беглом просмотре — обычно ищут именно его. */
.ie-hub-example{border-left:3px solid var(--ie-orange);background:var(--ie-bg-soft);
  border-radius:0 10px 10px 0;padding:18px 22px;margin:0 0 18px}
.ie-hub-example>b{display:block;color:var(--ie-navy);margin-bottom:8px}
.ie-hub-example p{margin:0 0 8px}
.ie-hub-example p:last-child{margin-bottom:0}
.ie-hub-example .ie-hub-total{font-weight:600;color:var(--ie-navy)}

/* Формула отдельной строкой: моноширинный, чтобы индексы и знаки
   не разъезжались, и с горизонтальным скроллом на узком экране. */
.ie-hub-formula{font-family:Consolas,"SF Mono",Menlo,monospace;font-size:1rem;
  background:#fff;border:1px solid var(--ie-border-soft);border-radius:8px;
  padding:12px 16px;margin:0 0 14px;overflow-x:auto;white-space:nowrap;
  color:var(--ie-navy)}

/* Словарь терминов */
.ie-hub-def{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:14px;margin:0}
.ie-hub-def>div{padding:16px 18px;background:var(--ie-bg-soft);border-radius:10px}
.ie-hub-def dt{color:var(--ie-navy);font-weight:600;margin-bottom:5px}
.ie-hub-def dd{margin:0;font-size:.99rem;line-height:1.65;color:#3f3f3f}

/* --- страница разработки ----------------------------------------------
   Страница про МЭМС-сенсор была сплошным текстом без единого снимка,
   хотя материал есть: собственные публикации и фотографии изделия.
   Оформление собрано из тех же приёмов, что на кейсах и хабах, чтобы
   раздел «Разработки» читался как часть сайта, а не как вставка. */
.ie-dev{max-width:64em}
/* Readable partner letters: native scrolling works even without JavaScript. */
.ie-partner-letters{margin-top:64px;margin-bottom:56px}
.ie-partner-letters__heading{text-align:center;max-width:740px;margin:0 auto 24px}
.ie-partner-letters__eyebrow{display:block;color:#a95415;font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;margin-bottom:12px}
.ie-partner-letters__heading h2{font-size:clamp(28px,3vw,36px);line-height:1.2;letter-spacing:-.035em;margin:0 0 16px;color:var(--ie-navy)}
.ie-partner-letters__heading p{color:#60666b;line-height:1.6;margin:0}
.ie-partner-letters__toolbar{display:flex;justify-content:space-between;align-items:center;margin:0 0 18px}
.ie-partner-letters__toolbar[hidden]{display:none}
.ie-partner-letters__position{font-size:14px;color:#60666b;font-variant-numeric:tabular-nums}
.ie-partner-letters__buttons{display:flex;gap:10px}
.ie-partner-letters__buttons button{width:44px;height:44px;border:1px solid var(--ie-border-soft);border-radius:50%;background:#fff;color:var(--ie-navy);font:inherit;font-size:23px;cursor:pointer;display:grid;place-items:center}
.ie-partner-letters__buttons button:hover:not(:disabled){background:var(--ie-navy);color:#fff}
.ie-partner-letters__buttons button:disabled{opacity:.35;cursor:default}
.ie-partner-letters__track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;padding:4px 1px 18px;position:relative;overscroll-behavior-x:contain}
.ie-partner-letters__track::-webkit-scrollbar{display:none;width:0;height:0}
.ie-partner-letters__card{flex:0 0 calc((100% - 48px)/3);min-width:0;scroll-snap-align:start;border:1px solid var(--ie-border-soft);border-radius:18px;overflow:hidden;background:#f5f6f5}
.ie-partner-letters__document{display:flex;flex-direction:column;height:100%;padding:22px;text-decoration:none!important;text-align:center;color:var(--ie-navy)!important}
.ie-partner-letters__paper{display:block;aspect-ratio:1/1.414;background:#fff;border:1px solid #e5e5e3;box-shadow:0 5px 18px #20252a0c;overflow:hidden}
.ie-partner-letters__paper img{display:block;width:100%;height:100%;object-fit:contain}
.ie-partner-letters__name{display:block;font-size:19px;line-height:1.4;font-weight:600;margin:22px 0 10px}
.ie-partner-letters__open{display:flex;gap:8px;justify-content:center;align-items:center;font-size:14px;color:#a95415;margin-top:auto}
.ie-partner-letters__document:hover .ie-partner-letters__open{text-decoration:underline}
.ie-partner-letters a:focus-visible,.ie-partner-letters button:focus-visible,.ie-partner-letters__track:focus-visible{outline:3px solid var(--ie-orange);outline-offset:-3px}
@media(max-width:991px){.ie-partner-letters__card{flex-basis:calc((100% - 24px)/2)}}
@media(max-width:575px){
  .ie-partner-letters{margin-top:44px;margin-bottom:40px}
  .ie-partner-letters__track{gap:14px}
  .ie-partner-letters__card{flex-basis:86%}
  .ie-partner-letters__document{padding:18px}
}
.ie-dev.ie-about-centered{margin-inline:auto;text-align:center}
.ie-about-centered .ie-dev-list{padding-left:0;list-style:none}
.ie-about-centered .ie-requisites>div{align-items:center}
.ie-about-centered .ie-dev-shot img{display:block;aspect-ratio:810/541;object-fit:cover;object-position:center}
.ie-about-centered .ie-about-ecology-shot{max-width:none;margin:24px auto 40px}
.ie-about-centered .ie-requisites{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:767px){
  .ie-about-centered .ie-requisites{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:479px){
  .ie-about-centered .ie-requisites{grid-template-columns:minmax(0,1fr)}
}
.ie-dev.ie-about-centered{max-width:1120px}
.ie-about-centered .ie-about-intro{max-width:850px;margin:8px auto 36px}
.ie-about-centered .ie-about-intro .ie-dev-lead{font-size:clamp(20px,2.15vw,28px);line-height:1.55;font-weight:500;color:var(--ie-navy);text-wrap:pretty}
.ie-about-centered .ie-about-facts{grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--ie-border-soft);border-radius:20px;overflow:hidden;margin:0 0 64px;background:#fff}
.ie-about-centered .ie-about-facts li{border:0;border-radius:0;background:transparent;padding:28px 16px;gap:12px;justify-content:center;position:relative}
.ie-about-centered .ie-about-facts li+li:before{content:"";position:absolute;left:0;top:25%;bottom:25%;width:1px;background:var(--ie-border-soft)}
.ie-about-centered .ie-about-facts b{font-size:clamp(21px,2.4vw,30px);letter-spacing:-.035em}
.ie-about-centered .ie-about-facts span{font-size:14px;line-height:1.5}
.ie-about-centered .ie-about-section{margin:0 0 64px}
.ie-about-centered .ie-about-section h2{font-size:clamp(26px,3vw,36px);line-height:1.2;letter-spacing:-.035em;margin:0 auto 26px;max-width:800px;text-wrap:balance}
.ie-about-centered .ie-about-section h2:before{content:"";display:block;width:40px;height:3px;border-radius:3px;background:var(--ie-orange);margin:0 auto 18px}
.ie-about-centered .ie-about-section>p{max-width:760px;margin:0 auto 28px;color:#555d63;font-size:17px;line-height:1.75;text-wrap:pretty}
.ie-about-centered .ie-about-cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;margin:0;padding:0;list-style:none}
.ie-about-centered .ie-about-cards li{grid-column:span 2;margin:0;padding:30px 24px;border:1px solid var(--ie-border-soft);border-radius:18px;background:#f8f9f8;font-size:15px;line-height:1.75;color:#555d63;text-wrap:pretty}
.ie-about-centered .ie-about-cards li:nth-child(4):nth-last-child(2){grid-column:2/span 2}
.ie-about-centered .ie-about-cards b{display:block;margin:0 auto 12px;color:var(--ie-navy);font-size:19px;line-height:1.35;font-weight:600;text-wrap:balance}
.ie-about-centered .ie-about-cards b a{color:inherit;text-decoration:none}
.ie-about-centered .ie-about-cards b a:hover{color:var(--ie-orange);text-decoration:underline}
.ie-about-centered .ie-about-cards a:focus-visible{outline:2px solid var(--ie-orange);outline-offset:4px;border-radius:3px}
.ie-about-centered .ie-about-section--research{padding:44px 34px;background:var(--ie-navy);border-radius:24px;color:#fff}
.ie-about-centered .ie-about-section--research h2{color:#fff}
.ie-about-centered .ie-about-section--research>p{color:#d0d5d8}
.ie-about-centered .ie-about-cards--research{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
.ie-about-centered .ie-about-cards--research li{grid-column:auto;background:transparent;border:0;border-radius:0;color:#d0d5d8;padding:26px 24px}
.ie-about-centered .ie-about-cards--research li:nth-child(-n+2){border-bottom:1px solid #41474d}
.ie-about-centered .ie-about-cards--research li:nth-child(odd){border-right:1px solid #41474d}
.ie-about-centered .ie-about-cards--research b{color:#fff}
.ie-about-centered .ie-about-cards--lab{margin-bottom:28px}
.ie-about-centered .ie-about-cards--lab li{background:#fff;border-top:3px solid var(--ie-orange)}
.ie-about-centered .ie-about-section--lab .ie-dev-shot{max-width:none;margin:30px auto 0}
@media(max-width:767px){
  .ie-about-centered .ie-about-intro{margin:0 auto 26px}
  .ie-about-centered .ie-about-facts{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:44px}
  .ie-about-centered .ie-about-facts li{padding:22px 12px}
  .ie-about-centered .ie-about-facts li:nth-child(3):before{display:none}
  .ie-about-centered .ie-about-facts li:nth-child(-n+2){border-bottom:1px solid var(--ie-border-soft)}
  .ie-about-centered .ie-about-section{margin-bottom:44px}
  .ie-about-centered .ie-about-section--research{padding:30px 18px}
  .ie-about-centered .ie-about-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .ie-about-centered .ie-about-cards li,.ie-about-centered .ie-about-cards li:nth-child(4):nth-last-child(2){grid-column:auto;padding:24px 18px}
  .ie-about-centered .ie-about-cards li:last-child:nth-child(odd){grid-column:1/-1}
  .ie-about-centered .ie-about-cards--research{gap:0}
}
@media(max-width:479px){
  .ie-about-centered .ie-about-cards{grid-template-columns:minmax(0,1fr)}
  .ie-about-centered .ie-about-cards--research li:nth-child(odd){border-right:0}
  .ie-about-centered .ie-about-cards--research li:not(:last-child){border-bottom:1px solid #41474d}
}
.ie-dev-lead{font-size:1.14rem;line-height:1.6;color:#333;margin:0 0 26px}
.ie-dev h2{font-size:1.5rem;font-weight:600;color:var(--ie-navy);margin:38px 0 16px}
.ie-dev p{line-height:1.7;margin:0 0 14px}

/* Числа вперёд текста: разработку оценивают по характеристикам,
   а не по эпитетам. */
.ie-dev-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px;list-style:none;padding:0;margin:0 0 30px}
.ie-dev-facts li{display:flex;flex-direction:column;gap:4px;padding:18px 20px;
  background:var(--ie-bg-soft);border-left:3px solid var(--ie-orange);border-radius:0 10px 10px 0}
.ie-dev-facts b{font-size:1.5rem;line-height:1.1;color:var(--ie-navy)}
.ie-dev-facts span{font-size:.93rem;line-height:1.45;color:var(--ie-text-muted)}

.ie-dev-shot{margin:0 0 22px}
.ie-dev-shot img{width:100%;height:auto;border-radius:14px;
  border:1px solid var(--ie-border-soft);background:#fff}
.ie-dev-shot figcaption{margin-top:10px;font-size:.92rem;line-height:1.5;
  color:var(--ie-text-muted)}
.ie-dev-shot-wide img{border:0;background:transparent}

/* Текст и снимок рядом: на узком экране снимок уходит вниз. */
.ie-dev-split{display:grid;grid-template-columns:1.35fr 1fr;gap:26px;align-items:start;
  margin-bottom:20px}
.ie-dev-split .ie-dev-shot{margin:0}

.ie-dev-list{margin:0 0 16px;padding-left:20px;line-height:1.7}
.ie-dev-list li{margin-bottom:10px}
.ie-dev-list b{color:var(--ie-navy)}

/* Вехи проекта — списком с отметками, без бюрократической таблицы этапов. */
.ie-dev-steps{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:10px}
.ie-dev-steps li{position:relative;padding:14px 18px 14px 44px;background:var(--ie-bg-soft);
  border-radius:10px;line-height:1.6}
.ie-dev-steps li::before{content:"";position:absolute;left:18px;top:21px;width:10px;height:10px;
  border-radius:50%;background:var(--ie-orange)}
.ie-dev-steps b{color:var(--ie-navy)}

/* Полоса фактов под первым экраном — только телефон. Правило-умолчание
   стоит до блока с её стилями по той же причине, что и у панели ниже. */
/* Запасные пути под формой заявки — только на телефоне. */
.ie-form-fallback{display:none}

/* Правовая строка существует только на телефоне и только на экранах-
   действиях: на широком экране те же ссылки лежат в подвале. */
.ie-legal-strip{display:none}

.ie-hero-facts{display:none}
/* Ссылка «Все разделы» — только на телефоне: на широком экране под плитками
   и так разворачиваются все оси подбора. */
.ie-catmap-all{display:none}
/* Картинка в плитке каталога — только на телефоне: на широком экране плитка
   работает переключателем осей и остаётся текстовой. Разметка общая. */
.ie-catmap-card-photo{display:none}
/* «Все кейсы» — только на телефоне: на широком экране показаны все шесть. */
.ie-cases-more{display:none}

/* Нижняя навигация существует только на телефоне. Правило-умолчание стоит
   ДО блока с её стилями: при равной силе побеждает последнее правило, и
   поставленное ниже оно гасит панель и на телефоне — 25.08.2026 я на это
   наступил второй раз (первый был с полосой связи 23.08.2026).
   Без умолчания панель рисуется и на широком экране: слепок поймал +18 px
   к высоте каждой страницы. */
.ie-tabbar{display:none}

@media (max-width:767px){
  .ie-dev-split{grid-template-columns:1fr}
  .ie-dev-facts b{font-size:1.32rem}
  .ie-dev h2{font-size:1.28rem}
}

/* --- каталог: карточки разделов и оси подбора ---------------------------
   Устройство взято у Нэтер (тип продукта -> оси подбора -> товар), но у них
   это узкое выпадающее меню мелким шрифтом. Страница каталога и так
   открывается ради выбора, поэтому здесь карточки во всю ширину.
   Переключение на флажках, без скриптов. */
/* Каталог — главный блок страницы, поэтому он выделен полосой светлого
   фона: на белом полотне карточки терялись среди остальных секций. */
.ie-catmap{padding:78px 0 82px;margin:60px 0 0;background:var(--ie-bg-soft)}
.ie-catmap-title{margin:0 0 30px;font-size:2.7rem;font-weight:700;color:var(--ie-navy);
  line-height:1.1}
.ie-catmap-radio{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap}
/* Ровно три карточки в ряд: при auto-fit шесть разделов ложились
   пятёркой и одиночкой, и ряд выглядел обрубленным. */
.ie-catmap-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ie-catmap-card{display:flex;flex-direction:column;gap:9px;margin:0;padding:30px 32px;
  border:1px solid var(--ie-border);border-radius:18px;background:#fff;cursor:pointer;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.ie-catmap-card:hover{border-color:var(--ie-orange);transform:translateY(-2px)}
.ie-catmap-card-name{font-size:1.38rem;font-weight:600;line-height:1.22;color:var(--ie-navy)}
.ie-catmap-card-note{font-size:.98rem;color:var(--ie-text-muted)}
.ie-catmap-radio:focus-visible+.ie-catmap-card,
.ie-catmap-radio:focus-visible~.ie-catmap-box .ie-catmap-card{outline:none}
.ie-catmap-panes{margin-top:22px}
.ie-catmap-pane{display:none}
/* Осей у разделов разное число: у ячеек одна, у батарей пять. Сетка,
   жёстко заданная в три колонки, оставляла одинокую карточку шириной в
   треть — раскладываем по числу осей, а списки внутри делим на столбцы,
   чтобы карточка заполнялась, а не тянулась вниз. */
.ie-catmap-axes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;align-items:stretch}
.ie-catmap-axes[data-axes="1"]{grid-template-columns:minmax(0,1fr)}
.ie-catmap-axes[data-axes="1"] ul{columns:4;column-gap:24px}
.ie-catmap-axes[data-axes="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.ie-catmap-axes[data-axes="2"] ul{columns:2;column-gap:22px}
/* Хвост последнего ряда растягиваем на свободные колонки, иначе справа
   висит пустая треть — тот самый перекос. Список внутри делится на
   столбцы, чтобы карточка заполнялась, а не тянулась вниз. */
.ie-catmap-axes[data-axes="3"]>.ie-catmap-axis:last-child:nth-child(3n+1){grid-column:span 3}
.ie-catmap-axes[data-axes="3"]>.ie-catmap-axis:last-child:nth-child(3n+1) ul{columns:3;column-gap:24px}
.ie-catmap-axes[data-axes="3"]>.ie-catmap-axis:last-child:nth-child(3n+2){grid-column:span 2}
.ie-catmap-axes[data-axes="3"]>.ie-catmap-axis:last-child:nth-child(3n+2) ul{columns:2;column-gap:22px}
.ie-catmap-axis{padding:26px 28px;border:1px solid var(--ie-border-soft);border-radius:18px;
  background:#fff;height:100%}
/* Ось длиннее девяти пунктов делится на два столбца внутри своей
   карточки: одним столбцом она вытягивалась на два экрана. */
.ie-catmap-axis.is-long ul{columns:2;column-gap:20px}
.ie-catmap-axis-name{display:block;font-size:1.16rem;font-weight:600;color:var(--ie-navy);
  padding-bottom:14px;margin-bottom:12px;border-bottom:1px solid var(--ie-border-soft)}
.ie-catmap-axis ul{list-style:none;margin:0;padding:0}
.ie-catmap-axis li{break-inside:avoid}
.ie-catmap .ie-catmap-axis a{display:block;padding:7px 0;font-size:1.06rem;line-height:1.4;
  color:#3a3a3a;text-decoration:none!important;transition:color .16s ease}
.ie-catmap .ie-catmap-axis a:hover,.ie-catmap .ie-catmap-axis a.is-current{color:var(--ie-orange)}

@media (max-width:991px){
  .ie-catmap-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ie-catmap-axes,.ie-catmap-axes[data-axes="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ie-catmap-axes[data-axes="1"] ul{columns:2}
  .ie-catmap-title{font-size:2.05rem}
}

@media (max-width:767px){
  .ie-catmap{padding:44px 0 46px}
  .ie-catmap-title{font-size:1.6rem;margin-bottom:18px}
  .ie-catmap-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ie-catmap-card{padding:18px 20px}
  .ie-catmap-card-name{font-size:1.05rem}
  .ie-catmap-axes,.ie-catmap-axes[data-axes="1"],
  .ie-catmap-axes[data-axes="2"]{grid-template-columns:minmax(0,1fr)}
  .ie-catmap-axis{padding:16px 18px}
  /* На узком экране колонки внутри карточки нечитаемы. */
  .ie-catmap-axes ul,.ie-catmap-axis.is-long ul{columns:1}

  /* Растяжка хвостовой оси на свободные колонки рассчитана на сетку из
     трёх колонок. В одной колонке `span 2` создаёт неявную вторую: она
     тянется по содержимому, а объявленной 1fr достаётся остаток. Замер
     24.08.2026 на /catalog/akkumulyatory/, 390 px: сетка выходила
     «53px 287px», карточка «По химии» шириной 53 px с обрезанным
     текстом. Снимаем растяжку — селекторы повторены один в один,
     иначе они весомее и правило не сработает. */
  .ie-catmap-axes[data-axes="3"]>.ie-catmap-axis:last-child:nth-child(3n+1),
  .ie-catmap-axes[data-axes="3"]>.ie-catmap-axis:last-child:nth-child(3n+2){grid-column:auto}
  .ie-catmap-axes[data-axes="3"]>.ie-catmap-axis:last-child:nth-child(3n+1) ul,
  .ie-catmap-axes[data-axes="3"]>.ie-catmap-axis:last-child:nth-child(3n+2) ul{columns:1}
  .ie-catmap-axes[data-axes="3"]{grid-template-columns:minmax(0,1fr)}

  /* Пункты осей: 38 px по высоте при норме 44. В списке из полусотни
     строк подряд промах пальцем стоит дороже, чем лишние 6 px на строку. */
  .ie-catmap .ie-catmap-axis a{padding:10px 0}

  /* ─── Мобильное меню ──────────────────────────────────────────────────
     Замер 24.08.2026 на 390 px: пункты меню были целями 19 px по высоте —
     это половина нормы и меньше, чем расстояние между соседними строками,
     то есть палец попадал в соседний пункт. Под списком оставалось 340 px
     пустоты, знак «Сколково» шириной 238 px перебивал всё остальное, а
     кнопка «наверх» висела поверх открытого меню. */
  .mobileMenu-menu li a{
    display:flex;align-items:center;min-height:52px;padding:0;
    font-size:1.06rem;line-height:1.3;
    border-bottom:1px solid rgba(29,33,38,.09);
  }
  .mobileMenu-menu li:last-child a{border-bottom:0}

  /* Связаться из меню: телефон, почта, заявка. Занимает ту самую пустоту. */
  .mobileMenu-contact{display:grid;gap:10px;padding:16px 17px 4px}
  .mobileMenu-contact a{
    display:flex;flex-direction:column;justify-content:center;gap:2px;
    min-height:56px;padding:8px 16px;border-radius:14px;text-decoration:none;
  }
  /* Цвет задаём длинным селектором: тема красит все ссылки внутри меню
     оранжевым, и кнопка выходила оранжевым по оранжевому — текст
     «Оставить заявку» пропадал совсем. */
  .mobileMenu .mobileMenu-contact a.mobileMenu-call,
  .mobileMenu .mobileMenu-contact a.mobileMenu-mail{
    background:rgba(29,33,38,.055);color:var(--ie-navy);
  }
  .mobileMenu .mobileMenu-contact .mobileMenu-contact-label{
    font-size:.78rem;font-weight:400;color:var(--ie-text-muted);
  }
  .mobileMenu .mobileMenu-contact .mobileMenu-contact-value{
    font-size:1.02rem;font-weight:600;color:inherit;
  }
  .mobileMenu .mobileMenu-contact a.mobileMenu-cta{
    align-items:center;background:var(--ie-orange);color:#fff;
    font-weight:600;font-size:1.02rem;min-height:52px;
  }

  /* Знак «Сколково» в меню был 238x54 — крупнее логотипа компании. */
  .mobileMenu .socialMenu{display:flex;align-items:center;gap:14px;padding:18px 17px 0}
  .mobileMenu .socialMenu .skolkovo{margin-left:auto}
  .mobileMenu .socialMenu .skolkovo img{height:34px!important;width:auto!important}

  /* Кнопка «наверх» поверх открытого меню никуда не ведёт и мешает. */
  body.has-mobileMenu .upButton{display:none}

  /* ─── Каркас телефона: шапка и нижняя навигация (ход 1, 25.08.2026) ───
     Требования M-1.1 … M-1.5 из docs/contract/mobile/contract.md. */

  /* Шапка. Была прозрачной поверх hero и получала полупрозрачный фон только
     после прокрутки — на светлых кадрах логотип и иконки пропадали. Делаем
     фон сплошным сразу и ужимаем высоту с 88 до 56 px: 6 px отступа сверху
     и снизу плюс кнопка 44 px. */
  /* Селекторы длиннее обычного: у темы правила той же силы подключаются
     позже (.pageHeader{padding-top:100px}, .has-heroUnit .pageHeader-wrap),
     и при равном весе побеждают они. */
  body .pageHeader{padding-top:56px}
  .pageHeader .pageHeader-bulk,
  .pageHeader.sticky .pageHeader-bulk,
  .has-heroUnit .pageHeader.sticky .pageHeader-bulk,
  .has-mobileMenu .pageHeader .pageHeader-bulk,
  .pageHeader .pageHeader-bulk.sticky{
    height:56px;background:#1d2126;border-bottom:0;
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
  .pageHeader .pageHeader-wrap,
  .has-heroUnit .pageHeader-wrap{padding:6px 0;border-bottom:0}
  .pageHeader .pageHeader-logo img,
  .pageHeader .pageHeader-logo svg{height:28px;width:auto}
  /* Логотип — ссылка на главную, и по нему целятся пальцем: тянем область
     нажатия до 44 px отступами, не увеличивая сам знак. */
  .pageHeader .pageHeader-logo a{display:inline-flex;align-items:center;min-height:44px}
  .pageHeader .pageHeader-button .btn.btn-blur,
  .pageHeader .pageHeader-button .basketLineBlock-head{height:44px}
  /* Кнопки шапки по макету: скруглённые квадраты, а не круги с обводкой. */
  .pageHeader .pageHeader-button .btn.btn-blur,
  .pageHeader .pageHeader-button .basketLineBlock-head{
    width:44px;border-radius:12px;border:0;background:rgba(255,255,255,.10);
    display:inline-flex;align-items:center;justify-content:center;
  }
  /* Кабинет ушёл в нижнюю панель — в шапке он дублировался. Остаются
     поиск, корзина и меню, как в макете. */
  .pageHeader .pageHeader-button .btn.icon-user{display:none}

  /* Нижняя навигация. Пять путей на расстоянии одного касания; отметка
     показывает, где человек сейчас. Место под панель отдаётся страницей
     (M-1.5), иначе она закроет последнюю строку — так уже было с полосой
     связи 24.08.2026. */
  /* Вид панели — из прототипа: высота 66, белая, сверху тонкая линия, без
     тени. Текущий пункт показывает цвет — иконка и подпись оранжевые;
     чёрточки-индикатора в макете нет. */
  .ie-tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:900;
    padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background:#fff;border-top:1px solid var(--ie-border-soft,#e7e1da);
  }
  /* Цвет и подчёркивание задаём длинным селектором: тема красит все ссылки
     оранжевым с подчёркиванием, и пункты панели выглядели как ссылки. */
  .ie-tabbar a.ie-tabbar-item{
    flex:1 1 20%;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:4px;min-height:65px;padding:4px 2px;
    position:relative;text-decoration:none!important;color:#7a7a7a;
  }
  .ie-tabbar a.ie-tabbar-item:hover{color:var(--ie-orange);text-decoration:none!important}
  /* Размер задаём здесь, а не атрибутами картинки: тема растягивает svg
     на всю ширину родителя (в панели это давало иконки 82×150 и высоту
     панели 173 вместо 66). У профиля в макете рисунок шире и ниже
     прочих — ему свой размер. */
  .ie-tabbar-icon{display:block;width:21px;height:21px;flex:none}
  .ie-tabbar-icon.is-wide{width:22px;height:19px}
  .ie-tabbar-label{font-size:10px;font-weight:700;line-height:1}
  .ie-tabbar a.ie-tabbar-item.is-current{color:var(--ie-orange)}
  .ie-tabbar-count{
    position:absolute;top:17px;left:calc(50% + 4px);min-width:17px;height:17px;
    display:flex;align-items:center;justify-content:center;padding:0 4px;
    border-radius:9px;background:var(--ie-orange);color:#fff;
    font-size:10px;font-weight:800;line-height:1;
  }
  /* Пустая корзина: атрибут hidden сам по себе не спасает — display:flex
     сильнее браузерного правила для [hidden], и оставался оранжевый кружок
     без числа. */
  .ie-tabbar-count[hidden]{display:none}
  /* Запас под панель плюс «безопасная зона»: на свежих айфонах внизу
     висит панель адреса браузера, и без запаса последняя строка страницы
     пряталась под ней. */
  body{padding-bottom:calc(68px + env(safe-area-inset-bottom))}
  /* В альбомной ориентации вырез съедает край экрана: без отступа текст
     уходит под него. Здесь, а не в основном правиле, потому что в книжной
     ориентации эти значения нули и отступ был бы лишним. */
  @media (orientation:landscape){
    body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  }
  /* Полоса cookie и панель — обе прижаты к низу, и полоса (z-index 9000)
     накрывала панель (900) целиком: пока человек не ответил про cookie,
     навигации не было вообще. На телефоне полоса встаёт НАД панелью —
     видны и вопрос, и навигация, и можно уйти со страницы, не ответив.
     body в селекторе обязателен: базовое bottom:0 объявлено ниже по файлу
     и при равной специфичности победило бы. */
  body .ie-cookie-bar{bottom:calc(67px + env(safe-area-inset-bottom))}

  /* ─── Главная: полоса фактов и плитки каталога (ход 2) ─────────────── */
  .ie-hero-facts{
    display:flex;gap:8px;padding:14px 20px 6px;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    /* Снап здесь не нужен и мешает: он возвращал полосу к первой плашке
       и гасил подсказку-движение (замер — scrollLeft держался на 20). */
    scroll-behavior:smooth;
    /* Правый край тает: так видно, что полоса продолжается за экраном.
       Обрезанная плашка сама по себе подсказка слабая. */
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);
  }
  .ie-hero-facts::-webkit-scrollbar{display:none}
  .ie-hero-fact{
    flex:0 0 auto;padding:9px 13px;border-radius:999px;background:#f4f6f5;
    font-size:.81rem;font-weight:700;color:var(--ie-navy);white-space:nowrap;
  }

  /* Полоса едет сама, медленно — решение владельца 31.08.2026. Плашек
     шесть, на экран влезают две с половиной, и без движения человек не
     догадывался, что справа есть ещё: подсказкой была только обрезанная
     плашка у тающего края.

     Как это устроено. Скрипт (ie-custom.js) дублирует набор плашек и
     ставит классы: движется дорожка, а не сама полоса, и сдвиг ровно на
     половину её ширины — в этот момент второй набор стоит там же, где
     стоял первый, поэтому шов не виден и лента идёт по кругу.
     Скорость задаётся переменной от длины набора: одинаковый темп
     независимо от того, сколько плашек и какой длины у них подписи.

     Палец важнее: касание останавливает ленту (класс is-held ставит
     скрипт), и полосу можно листать руками. Прокрутку при этом
     возвращаем — на движущейся дорожке она не мешает. */
  .ie-hero-facts.is-marquee{
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);
  }
  .ie-hero-facts-track{
    display:flex;gap:8px;flex:0 0 auto;width:max-content;
    animation:ie-facts-run var(--ie-facts-time,42s) linear infinite;
  }
  .ie-hero-facts.is-held .ie-hero-facts-track{animation-play-state:paused}
  @keyframes ie-facts-run{
    from{transform:translate3d(0,0,0)}
    to{transform:translate3d(calc(-50% - 4px),0,0)}
  }
  /* Правила «остановить при системной настройке уменьшить движение»
     здесь намеренно нет — решение владельца 31.08.2026: на его машине
     настройка включена, и полоса стояла мёртво. Остановка пальцем
     (класс is-held выше) остаётся у всех и закрывает требование WCAG
     2.2.2 о способе остановить движущееся содержимое. */

  /* Плитки каталога по макету: рамка, скруглание, имя и число позиций. */
  .ie-catmap{padding:18px 0 28px;margin:0}
  .ie-catmap-title{font-size:1.25rem;margin:0 0 2px}
  .ie-catmap-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
  .ie-catmap-all{
    flex:0 0 auto;font-size:.86rem;font-weight:700;color:var(--ie-orange);
    text-decoration:none;display:inline-flex;align-items:center;min-height:44px;
  }
  .ie-catmap-cards{gap:10px}
  .ie-catmap-card{
    padding:12px;border-radius:15px;border:1px solid #e7e1da;gap:8px;
    justify-content:flex-start;min-height:0;
  }
  /* Плитка по макету: картинка сверху, под ней имя и число позиций. */
  /* Фото раздела — целиком, без обрезки. Иллюстрации у нас квадратные
     (1200×1200), а плашка была 149×74 с object-fit:cover: рисунку срезало
     верх и низ, у батареи оставался кусок корпуса, у мотора — половина
     крыльчатки. Плашку делаем 4:3 и вписываем рисунок внутрь (contain):
     он виден весь и крупнее прежнего — 112 px против 74.
     Фон белый, а не серый: иллюстрации нарисованы на белом, и на сером
     вокруг них появлялся бы белый квадрат. Плашку при этом не убираем —
     на ней держится ровная высота ряда, когда у раздела фото нет. */
  .ie-catmap-card-photo{
    display:flex;align-items:center;justify-content:center;overflow:hidden;
    aspect-ratio:4/3;height:auto;border-radius:10px;background:#fff;
  }
  .ie-catmap-card-photo img{
    width:100%;height:100%;object-fit:contain;object-position:center;
  }
  /* Имя в две строки: иначе плитки в ряду разной высоты (147 против 165). */
  .ie-catmap-card-name{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    font-size:.88rem;font-weight:700;line-height:1.25;min-height:2.5em;
  }
  .ie-catmap-card-note{font-size:.75rem;font-weight:600;color:#7a7a7a;margin-top:auto}

  /* Порядок блоков главной по макету «заявка-first»: первый экран, факты,
     КАТАЛОГ, потом рассказ о полном цикле. Сейчас каталог стоял третьим —
     посетитель с телефона доходил до товара только после длинного блока
     про цикл производства. Разметку не трогаем: порядок задаётся раскладкой
     и только на телефоне. */
  body.has-heroUnit main{display:flex;flex-direction:column}
  /* Всем остальным блокам — общий номер побольше, иначе они с order:0
     уезжают вперёд героя: так и вышло с первого раза (герой оказался
     на 3 621 px). */
  body.has-heroUnit main > *{order:10}
  body.has-heroUnit main > .heroUnit{order:1}
  body.has-heroUnit main > .ie-hero-facts{order:2}
  body.has-heroUnit main > .ie-catmap{order:3}
  body.has-heroUnit main > .cycleFlow{order:4}
  body.has-heroUnit main > .ie-cases{order:5}
  body.has-heroUnit main > .ie-prod{order:6}

  /* Длинные блоки главной на телефоне показываем частично.

     ЗАЧЕМ. Главная на 390 px была 11 193 px — тринадцать экранов прокрутки,
     из которых кейсы занимали 3 690, а новости 1 732. В макете «заявка-first»
     на главной их нет вовсе; мы не прячем содержимое целиком, а показываем
     первые две карточки и ссылку на полный список — путь сохраняется, длина
     сокращается. Разметка та же, на широком экране всё как было. */
  /* Кейсы — ряд, который листают пальцем (M-3.5). Шесть карточек столбиком
     давали 3 690 px; тем же шестью в ряд со «щелчком» по карточке они
     занимают один экран, и ни один кейс не теряется. Стрелок нет намеренно:
     на телефоне их некому нажимать. */
  .ie-cases .ie-cases-grid{
    display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding-bottom:4px;margin-right:-15px;
  }
  .ie-cases .ie-cases-grid::-webkit-scrollbar{display:none}
  .ie-cases .ie-case{
    flex:0 0 82%;scroll-snap-align:start;
  }
  .ie-cases .ie-cases-more{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:48px;margin:16px auto 0;padding:0 22px;border-radius:13px;
    border:1px solid var(--ie-border-soft);background:#fff;
    font-weight:700;color:var(--ie-navy);text-decoration:none;
  }
  .ie-cases .container{display:flex;flex-direction:column}
  .container.margin3 .news-item:nth-of-type(n+3){display:none}

  /* ─── Витрина каталога (ход 3, M-4.1 … M-4.5) ──────────────────────
     Замер 25.08.2026 на 390 px: карточка товара 360x824, одна в ряд,
     одиннадцать строк характеристик простынёй, а до первого товара —
     1 892 px, потому что выше стоит развёрнутая панель подбора. */

  /* Две колонки. Ряд витрины узнаётся по своему классу row-xl-5. */
  .row-xl-5{margin-left:-5px;margin-right:-5px}
  .row-xl-5 > [class*="col-"]{
    flex:0 0 50%;max-width:50%;padding:0 5px;margin-bottom:10px;
  }
  .catalogItem{height:100%;display:flex;flex-direction:column}
  .catalogItem-description{flex:1 1 auto}

  /* Картинка квадратная и не тянет карточку вниз. */
  .catalogItem-slider,
  .catalogItem-slider-block-wrap,
  .catalogItem-slider-block-image{height:auto}
  .catalogItem-slider-block-image img{aspect-ratio:1/1;object-fit:contain;width:100%;height:auto}

  /* Название в две строки, дальше многоточие: иначе плитки в ряду разной
     высоты, и сетка рвётся. */
  .catalogItem-description-name{margin:8px 0 6px}
  /* Селектор длинный намеренно: выше в этом же файле название тянется до
     44 px как цель нажатия (display:inline-flex), а тут нужен обрез в две
     строки. Высоту цели сохраняем. */
  .catalogItem .catalogItem-description-name a.catalogItem-description-link{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;font-size:.88rem;line-height:1.3;min-height:44px;
  }

  /* Характеристики: три чипа вместо одиннадцати строк (M-4.2). Порядок
     свойств задаётся содержимым, поэтому берём первые три — они и есть
     главные: ёмкость, напряжения. */
  .catalogItem-propslist{display:flex;flex-wrap:wrap;gap:5px;margin:0;padding:0;list-style:none}
  .catalogItem-propslist li{
    max-width:100%;padding:4px 7px;border-radius:8px;background:#f4f6f5;
    font-size:.68rem;line-height:1.25;color:var(--ie-navy);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .catalogItem-propslist li:nth-child(n+4){display:none}

  /* Цена. Блок с ценой скрыт на всём сайте (решение владельца от 20.08.2026),
     но на плитке остаётся пустое место, и человек не понимает, платная это
     позиция или под заказ. На телефоне показываем ту строку, которую отдаёт
     сам сайт, — своего текста здесь не сочиняем. */
  .catalogItem-offers-price-wrap{display:block}
  .catalogItem-offers-price{font-size:.78rem;font-weight:600;color:var(--ie-text-muted);margin:0 0 8px}

  /* Цена и действие. Поле количества в плитку шириной 170 px не влезает
     и там не нужно: количество набирают в карточке товара. */
  .catalogItem-offers-quantity{display:none}
  .catalogItem-offers-buy{display:block}
  .catalogItem-offers-buttons{width:100%}
  .catalogItem-offers-buttons .btn{width:100%;min-height:44px;font-size:.86rem;padding:0 10px}

  /* Карта каталога на странице раздела — это навигация, а не товар. На
     широком экране она стоит сбоку от смысла, на телефоне вставала между
     посетителем и витриной (604 px). В разделе прячем: все шесть корней
     теперь раскрыты в меню и есть пункт «Каталог» в нижней панели.
     На самой странице /catalog/ карта остаётся — там она и есть содержимое. */
  body:has(.catalogSection-wrap) .ie-catmap{display:none}

  /* Описание раздела — три строки и «Подробнее». Полный текст на 360 px
     занимал 184 px и вместе с заголовком отодвигал витрину за сгиб.
     Текст остаётся на странице целиком: он и для человека, и для поиска,
     просто раскрывается по нажатию. */
  .ie-clamp{
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
    overflow:hidden;
  }
  .ie-clamp.is-open{display:block;-webkit-line-clamp:unset;overflow:visible}
  .ie-clamp-more{
    display:inline-flex;align-items:center;min-height:44px;padding:0;
    border:0;background:none;font:inherit;font-weight:600;
    color:var(--ie-orange);cursor:pointer;
  }

  /* Баннер раздела на телефоне не показываем: он декоративный, а место
     занимает первое. В макете страница раздела начинается с названия и
     подбора, а не с картинки. Заголовок и описание остаются. */
  /* Баннер внутренних страниц на телефоне не показываем.

     ЗАЧЕМ. Картинка декоративная, а место занимает первое: на странице
     раздела она отодвигала витрину на 545 px, а на /catalog/ и /about/
     заголовок ложился прямо на строку «Назад» (замер 25.08.2026: «Назад»
     занимает полосу 56-100 px, заголовок начинался с 79 и 97).

     Правило общее для всех внутренних страниц с этим баннером. Главной
     оно не касается: там свой первый экран (.heroM) с постером. */
  /* Селекторы с .heroUnit-item намеренно: у темы правила той же силы
     подключаются позже, и одиночный класс их не перебивает — заголовок
     уезжал под шапку (замер: верх заголовка 26 px при шапке 56). */
  .heroUnit-item > picture{display:none}
  .heroUnit .heroUnit-item-text{margin-top:0;padding:0}
  /* 56 px шапки + 44 px строки «Назад» + воздух. */
  .heroUnit-item .heroUnit-item-text .container,
  .heroUnit .heroUnit-item-text .container{padding-top:116px}
  .heroUnit .heroUnit-item-text .row{margin-top:0;margin-bottom:0}
  .heroUnit .heroUnit-item-text-title{margin:0 0 8px;font-size:1.5rem;line-height:1.2}
  .heroUnit .heroUnit-item-text-description{margin:0}

  /* Панель подбора сворачивается в строку (M-4.3). Развёрнутая она занимала
     416 px, и до первого товара было 1 892 px — два экрана прокрутки мимо
     витрины. Раскрывается нажатием на свой же заголовок. */
  .smart-filter{
    border:1px solid var(--ie-border-soft);border-radius:14px;
    padding:0;margin:0 0 14px;background:#fff;
  }
  /* У темы заголовок панели тёмный, и на белой панели текст пропадал:
     тёмное на тёмном. Цвет и фон задаём длинным селектором. */
  .catalogSection-wrap .smart-filter .smart-filter-title,
  .smart-filter .smart-filter-title{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    min-height:52px;padding:0 16px;margin:0;cursor:pointer;background:transparent;
    font-size:1rem;font-weight:700;color:var(--ie-navy);text-align:left;
  }
  /* Заголовок панели у темы прижат вправо — на телефоне читается как чужая
     кнопка. Ставим текст слева, стрелку справа. */
  .catalogSection-wrap .smart-filter .smart-filter-title{justify-content:flex-start}
  .catalogSection-wrap .smart-filter .smart-filter-title::after{margin-left:auto}
  .smart-filter .smart-filter-title::after{
    content:"";flex:0 0 auto;width:8px;height:8px;margin-right:4px;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s ease;
  }
  .smart-filter .smart-filter-form{display:none;padding:0 16px 14px}
  /* height:auto с !important намеренно: скрипт темы держит у формы
     собственную высоту (замер — 14 px при содержимом 263), и содержимое
     вылезало за панель поверх витрины. */
  .smart-filter.is-open .smart-filter-form{
    display:block;height:auto!important;overflow:visible;
  }
  .smart-filter.is-open .smart-filter-title::after{transform:rotate(-135deg) translate(-3px,-3px)}

  /* ─── Телефон без подвала ──────────────────────────────────────────
     В прототипе подвала нет ни на одном экране: это приложение, а не
     страница сайта. У нас он занимал 1 602 px в конце каждой страницы —
     двадцать семь ссылок, которые на телефоне дублируют меню по бургеру
     (разделы, услуги, компания, контакты) и нижнюю панель (каталог,
     корзина). Решение владельца от 30.08.2026: убрать целиком.

     Правовые ссылки при этом остаются доступными с любой страницы — это
     требование контракта ПДн, а не украшение: вместо подвала одна строка
     под содержимым. Телефон и почта не теряются: они в меню по бургеру и
     на экране контактов. На широком экране подвал на месте. */
  .pageFooter{display:none}
  /* Правовая строка под содержимым тоже убрана (решение владельца
     31.08.2026): в макете её нет ни на одном экране, а на экране заявки она
     не давала ему поместиться целиком. Ссылки не потеряны — они переехали в
     меню (.mobileMenu-legal), которое открывается одним касанием с любой
     страницы, и остаются в строке согласия под каждой формой. */
  .ie-legal-strip{display:none}

  /* ─── Экран заявки: светлая форма, как в макете ────────────────────
     В макете форма — белая карточка со светлыми полями и тёмным текстом;
     у нас это была тёмная плашка formBlackBG, где поля читались хуже
     (белый текст на прозрачном тёмном) и терялись плейсхолдеры.
     Меняем только на телефоне: на широком экране тёмная карточка
     остаётся частью оформления страницы. */
  /* Селекторы с body намеренно: тема красит карточку правилом той же
     силы и подключается позже — без этого форма оставалась тёмной
     (замер: фон rgb(29,33,38) и после правки). */
  body .form.callbackForm.formBlackBG{
    background:#fff;color:var(--ie-navy);
    border:1px solid var(--ie-border-soft);border-radius:18px;
    box-shadow:0 18px 44px rgba(29,33,38,.08);
  }
  body .form.callbackForm.formBlackBG .form-header,
  body .form.callbackForm.formBlackBG .blockTitle,
  body .form.callbackForm.formBlackBG h2,
  body .form.callbackForm.formBlackBG .callbackForm-title,
  body .form.callbackForm.formBlackBG .form-description{color:var(--ie-navy)}
  /* Подпись под заголовком была белой по белому — на тёмной карточке она
     читалась, на светлой пропала совсем. */
  body .form.callbackForm.formBlackBG .callbackForm-description{color:#5a6672}
  /* Бирюзовое свечение нарисовано псевдоэлементом для тёмной карточки; на
     белой оно выглядит грязным пятном. */
  body .form.callbackForm.formBlackBG::before,
  body .form.callbackForm.formBlackBG::after{display:none}
  body .form.callbackForm.formBlackBG input[type=text],
  body .form.callbackForm.formBlackBG input[type=email],
  body .form.callbackForm.formBlackBG input[type=tel],
  body .form.callbackForm.formBlackBG textarea,
  body .form.callbackForm.formBlackBG select{
    background:#fff;color:var(--ie-navy);
    border:1px solid var(--ie-border-soft);border-radius:12px;
  }
  body .form.callbackForm.formBlackBG input::placeholder,
  body .form.callbackForm.formBlackBG textarea::placeholder{color:#98a2ad}
  body .form.callbackForm.formBlackBG .ie-form-consent,
  body .form.callbackForm.formBlackBG .ie-form-consent-text{color:#7a7a7a}
  body .form.callbackForm.formBlackBG .ie-form-consent input{
    background:#fff;border:1.5px solid var(--ie-border-soft);
  }
  body .form.callbackForm.formBlackBG .ie-form-consent input:checked{
    background:var(--ie-orange);border-color:var(--ie-orange);
  }
  /* Запасные пути на светлой карточке — тёмные по рамке, а не белые. */
  body .form.callbackForm.formBlackBG .ie-form-fallback a.ie-form-fallback-item{
    border-color:var(--ie-border-soft);color:var(--ie-navy);
  }

  /* ─── Экран заявки по макету ──────────────────────────────────────
     Замер 25.08.2026: подписи над полями повторяли placeholder и съедали
     по 30 px на поле, галочки согласия были 18 px, кнопка 50. */

  /* Подпись поля прячем от глаза, но оставляем программе чтения с экрана:
     placeholder ей не заменяет — он пропадает, как только начали писать. */
  /* Только подписи-заголовки (у них есть for). Метка файла .input-emulate
     сама является полем — её прятать нельзя: с первого раза я на этом
     сложил поле «Прикрепить ТЗ» с 95 до 44 px, тест поймал. */
  .callbackForm .form-group > label[for]:not(.ie-form-consent):not(.showField-checkbox){
    position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
    white-space:nowrap;
  }
  /* Экран заявки должен помещаться в один экран, как в макете. Замер до
     правки: форма 720 px при окне 844 — с шапкой, строкой «Назад» и
     нижней панелью она не помещалась, и человек скроллил ради кнопки.

     Считаем по частям: поля шли через 40 px (правило темы), согласия
     занимали 147, отступ карточки 30, подпись под заголовком 37. */
  body .form.callbackForm{padding:18px 16px}
  body .form.callbackForm .form-group,
  body .form.callbackForm fieldset > .row > [class*="col-"]{margin-bottom:10px}
  body .form.callbackForm .row{row-gap:0}
  body .form.callbackForm .callbackForm-title{font-size:1.35rem;margin:0 0 4px}
  body .form.callbackForm .callbackForm-description{font-size:.86rem;line-height:1.35;margin:0 0 12px}
  body .form.callbackForm .form-button{margin-top:4px}
  body .form.callbackForm .form-info{margin-top:6px}
  body .form.callbackForm .ie-form-consent{margin:0 0 6px;gap:10px}
  body .form.callbackForm .ie-form-consent-text{font-size:.76rem;line-height:1.35}
  /* Опросный лист — путь для тех, у кого длинное ТЗ; на телефоне это
     ссылка под формой, а не кнопка во всю ширину. */
  body .form.callbackForm .questionnaire-block{margin-top:8px}
  body .form.callbackForm .questionnaire-block a.btn{
    min-height:44px;background:none;border:0;padding:0;
    font-size:.86rem;font-weight:600;color:var(--ie-orange);text-decoration:underline;
  }
  /* Порядок как в макете: поля, согласие, кнопка, запасные пути.
     В разметке согласие лежит НИЖЕ кнопки, а переносить его в другое место
     нельзя — на широком экране от этого разъедется колонка с кнопкой.
     Поэтому на телефоне ряд раскрывается (display:contents), и порядок
     задаётся номерами. */
  body .form.callbackForm fieldset{display:flex;flex-direction:column}
  body .form.callbackForm fieldset > .row{display:contents}
  body .form.callbackForm fieldset > .row > *{order:1}
  /* Согласие на обработку — над кнопкой (без него не отправить).
     Согласие на рассылку — необязательное, оно уходит под кнопку: иначе
     два длинных абзаца отодвигают действие за пределы экрана. Раскрываем
     блок согласий, чтобы обе галочки стали отдельными позициями. */
  body .form.callbackForm .form-info{display:contents}
  body .form.callbackForm .form-info .ie-form-consent{order:2;margin-bottom:12px}
  body .form.callbackForm .form-info .ie-form-consent.ie-consent-optional{
    order:4;margin:12px 0 0;
  }
  body .form.callbackForm fieldset > .row > .form-button{order:3}
  body .form.callbackForm .ie-form-fallback{order:5}
  body .form.callbackForm .questionnaire-block{order:6}

  /* Кнопка ждёт согласия: в макете она гасится, пока форма не готова. */
  body .form.callbackForm input[type=submit].is-waiting{
    background:#e6e0d9;color:#fff;cursor:not-allowed;
  }
  .callbackForm input[type=submit].btn,
  .callbackForm button[type=submit]{min-height:52px;border-radius:13px;font-weight:700}
  /* Галочку тема держит на 18 px правилом той же силы, поэтому селектор
     длиннее: попасть в неё пальцем важнее, чем сэкономить два пикселя. */
  .callbackForm .form-info .ie-form-consent input,
  .callbackForm label.ie-form-consent input{width:22px;height:22px}
  .callbackForm .ie-form-consent-text{font-size:.81rem;line-height:1.45}

  .ie-form-fallback{
    display:flex;gap:9px;margin:14px 0 0;
  }
  /* Цвет и подчёркивание — длинным селектором: тема красит ссылки внутри
     формы оранжевым с подчёркиванием, и запасные пути выглядели ссылками
     в тексте, а не кнопками. */
  .callbackForm .ie-form-fallback a.ie-form-fallback-item,
  .ie-form-fallback a.ie-form-fallback-item{
    flex:1 1 50%;display:inline-flex;align-items:center;justify-content:center;
    min-height:48px;border-radius:12px;border:1.5px solid rgba(255,255,255,.28);
    color:#fff;font-weight:700;font-size:.88rem;text-align:center;
    text-decoration:none!important;
  }

  /* ─── Меню: каталог раскрыт, поиск внутри (M-2.1, M-2.2) ───────────── */
  /* Ярлык-аккордеон прячем, а на его место ставим подпись: без неё два
     списка подряд читаются как один. Подпись — из макета. */
  .mobileMenu-catalog label[for="showCatalogMenu"]{display:none}
  .mobileMenu-catalog::before{
    content:"Каталог";display:block;padding:4px 17px 6px;
    font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ie-text-muted);
  }
  .mobileMenu-menu::before{
    content:"Разделы сайта";display:block;padding:14px 17px 6px;
    font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ie-text-muted);
  }
  .mobileMenu-catalog #showCatalogMenu~.sectionMenu,
  .mobileMenu-catalog .sectionMenu{display:block}
  /* Разделы каталога в меню: раскрытый список — это цели нажатия, а были
     они 18 px, потому что до хода 1 список лежал свёрнутым. */
  .mobileMenu-catalog .sectionMenu a,
  .mobileMenu-catalog ul a{
    display:flex;align-items:center;min-height:48px;
    border-bottom:1px solid rgba(29,33,38,.09);
  }
  .mobileMenu-catalog ul li:last-child a{border-bottom:0}

  .mobileMenu-search{display:block;padding:0 17px 4px}
  .mobileMenu-search input{
    width:100%;min-height:48px;padding:0 16px;border-radius:12px;
    border:1px solid rgba(29,33,38,.16);background:#fff;font-size:16px;
  }
}

/* --- навигация по подразделам каталога --------------------------------
   Витрина разбита по химии, и переключение между разделами должно быть
   первым, что видно под баннером: это главный маршрут выбора. */
.ie-subsections{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0}
.ie-subsection{display:inline-flex;align-items:center;gap:10px;padding:11px 18px;
  border:1px solid var(--ie-border);border-radius:24px;background:#fff;
  text-decoration:none!important;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.ie-subsection:hover{border-color:var(--ie-orange);transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(var(--ie-navy-rgb),.10)}
.ie-subsection-name{font-size:1rem;font-weight:600;color:var(--ie-navy)}
.ie-subsection:hover .ie-subsection-name{color:var(--ie-orange)}
.ie-subsection-count{min-width:26px;padding:2px 9px;border-radius:12px;
  background:var(--ie-bg-soft);font-size:.85rem;color:var(--ie-text-muted);
  font-variant-numeric:tabular-nums;text-align:center}
/* Название оси над рядом кнопок: у батарей подразделов больше сорока,
   и без группировки ряд превращается в стену. */
.ie-subsections-axis{margin:22px 0 0;font-size:.78rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ie-text-muted)}
.ie-subsections-axis+.ie-subsections{margin-top:10px}
/* Раздел без товара: полка есть, готовой позиции нет — не прячем, но и
   не выдаём за наличие. */
.ie-subsection-empty{border-style:dashed}
.ie-subsection-empty .ie-subsection-count{background:transparent;
  color:var(--ie-orange);font-size:.8rem}

/* --- раздел без товара --------------------------------------------------
   Пустая витрина с фильтром — тупик: человек пришёл по запросу «батарея
   для ричтрака» и уткнулся в «ничего не найдено». Батарею под технику мы
   и так собираем под задачу, поэтому говорим это прямо и просим данные. */
.ie-section-empty{max-width:56em;padding:28px 30px;border:1px solid var(--ie-border-soft);
  border-radius:16px;background:var(--ie-bg-soft)}
.ie-section-empty-lead{font-size:1.1rem;font-weight:600;color:var(--ie-navy);margin:0 0 10px}
.ie-section-empty p{line-height:1.65;margin:0 0 12px}
.ie-section-empty-actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-top:18px}
.ie-section-empty-link{color:var(--ie-navy);text-decoration:underline}
.ie-section-empty-link:hover{color:var(--ie-orange)}

/* --- витрина раздела каталога -----------------------------------------
   Карточки в разделе рисует шаблон темы (.catalogItem), и рядом с нашими
   блоками они выглядели как чужой остров: прямые углы, отсутствие отклика
   на наведение. Меняем только оформление — раскладку, слайдер картинок
   и разметку темы не трогаем, иначе поедет вся секция. */
.catalogSection-wrap .catalogItem{border:1px solid var(--ie-border-soft);
  border-radius:14px;background:#fff;overflow:hidden;height:100%;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
/* Подсветка плитки — ТОЛЬКО там, где есть настоящий курсор.
   На сенсорном экране :hover залипает после касания: палец убран, а плитка
   остаётся обведённой, будто её «выбрали» и что-то происходит. Человек ждёт,
   а ждать нечего. Ровно на это пожаловались 04.09.2026 словами «зависает в
   селекции». Сенсорным ноутбукам и планшетам это касается тоже, поэтому
   условие по указателю, а не по ширине экрана. */
@media (hover: hover) and (pointer: fine) {
  .catalogSection-wrap .catalogItem:hover{border-color:var(--ie-orange);
    transform:translateY(-4px);box-shadow:0 16px 32px rgba(var(--ie-navy-rgb),.12)}
  .catalogSection-wrap .catalogItem:hover picture img{transform:scale(1.05)}
}
/* Картинка чуть наезжает — тот же жест, что у карточек хабов и кейсов. */
.catalogSection-wrap .catalogItem picture img{transition:transform .45s ease}
.catalogSection-wrap .catalogItem-description{padding:4px 16px 18px}
.catalogSection-wrap .catalogItem-description-name,
.catalogSection-wrap .catalogItem-description-link{font-size:.98rem;line-height:1.35;
  color:var(--ie-navy)}
@media (hover: hover) and (pointer: fine) {
  .catalogSection-wrap .catalogItem:hover .catalogItem-description-link{color:var(--ie-orange)}
}
/* Характеристики под названием — то, по чему выбирают: держим их
   читаемыми и с моноширинными цифрами, чтобы столбцы не плясали. */
.catalogSection-wrap .catalogItem-propslist{font-size:.88rem;line-height:1.5;
  color:var(--ie-text-muted);font-variant-numeric:tabular-nums}
.catalogSection-wrap .catalogItem-label-icon{border-radius:20px}

/* --- раскрывающиеся разделы разбора -----------------------------------
   Двадцать тысяч знаков подряд читать невозможно, поэтому разбор свёрнут
   в блоки: заголовки видны все сразу, содержимое открывается по клику.
   Для поиска ничего не теряется — текст остаётся в разметке. */
.ie-acc{border:1px solid var(--ie-border-soft);border-radius:12px;
  margin-bottom:14px;background:#fff;overflow:hidden}
.ie-acc>summary{cursor:pointer;list-style:none;padding:20px 52px 20px 22px;
  position:relative;transition:background .2s ease}
.ie-acc>summary::-webkit-details-marker{display:none}
.ie-acc>summary:hover{background:var(--ie-bg-soft)}
.ie-acc>summary h2{font-size:1.24rem;margin:0;color:var(--ie-navy);
  transition:color .2s ease}
.ie-acc>summary:hover h2{color:var(--ie-orange)}
.ie-acc>summary::after{content:"+";position:absolute;right:22px;top:50%;
  transform:translateY(-50%);font-size:1.7rem;font-weight:400;line-height:1;
  color:var(--ie-orange);transition:transform .25s ease}
.ie-acc[open]>summary{border-bottom:1px solid var(--ie-border-soft)}
.ie-acc[open]>summary h2{color:var(--ie-orange)}
.ie-acc[open]>summary::after{transform:translateY(-50%) rotate(45deg)}
.ie-acc-body{padding:22px}
.ie-acc[open]>.ie-acc-body{animation:ie-faq-open .32s cubic-bezier(.22,1,.3,1)}
.ie-acc-body>*:first-child{margin-top:0}
.ie-acc-body>*:last-child{margin-bottom:0}
.ie-acc-body h3:first-of-type{margin-top:0}

/* --- документы и условия --- */
.ie-hub-doclist{margin:0 0 14px;padding-left:20px;line-height:1.8}
/* Предложение выслать документы до заказа — коммерческий шаг, а не сноска:
   отдельная панель с кнопкой вместо серой строки мелким шрифтом. */
.ie-hub-docnote{display:flex;flex-wrap:wrap;align-items:center;gap:18px;
  justify-content:space-between;padding:20px 24px;border-radius:12px;
  background:var(--ie-bg-soft);border-left:3px solid var(--ie-orange)}
.ie-hub-docnote b{display:block;color:var(--ie-navy);font-size:1.08rem;
  margin-bottom:4px}
.ie-hub-docnote span{display:block;max-width:52em;color:#4a4a4a;
  font-size:.98rem;line-height:1.6}
.ie-hub-docnote .ie-hub-cta{margin-top:0;flex:0 0 auto}
.ie-hub-note{font-size:.94rem;color:var(--ie-text-muted)}
.ie-hub-terms-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.ie-hub-terms-grid>div{display:flex;flex-direction:column;gap:5px;padding:16px;
  background:var(--ie-bg-soft);border-radius:8px}
.ie-hub-terms-grid b{color:var(--ie-navy)}
.ie-hub-terms-grid span{font-size:.92rem;line-height:1.5;color:#4a4a4a}

/* --- FAQ на <details>: раскрывается без JS, содержимое всегда в DOM для индексации --- */
.ie-hub-faq details{border-bottom:1px solid var(--ie-border-soft)}
/* Вопрос — это заголовок, а не строчка списка: 1,22rem, воздух по 20 px
   и подсветка строки при наведении, чтобы было видно, что она кликается. */
.ie-hub-faq summary{cursor:pointer;padding:20px 46px 20px 16px;font-weight:600;
  font-size:1.22rem;line-height:1.35;color:var(--ie-navy);
  list-style:none;position:relative;border-radius:10px;
  transition:background .2s ease,color .2s ease}
.ie-hub-faq summary:hover{background:var(--ie-bg-soft);color:var(--ie-orange)}
.ie-hub-faq summary::-webkit-details-marker{display:none}
.ie-hub-faq summary::after{content:"+";position:absolute;right:16px;top:16px;font-size:1.7rem;
  font-weight:400;color:var(--ie-orange);transition:transform .25s ease}
.ie-hub-faq details[open] summary{color:var(--ie-orange)}
.ie-hub-faq details[open] summary::after{transform:rotate(45deg)}
/* Ответ выезжает, а не появляется рывком: анимируем сам блок ответа,
   потому что высоту <details> браузер не анимирует. */
.ie-hub-faq details>p{padding:0 16px 20px;max-width:64em;color:#3a3a3a;
  font-size:1.08rem;line-height:1.7}
.ie-hub-faq details[open]>p{animation:ie-faq-open .32s cubic-bezier(.22,1,.3,1)}
@keyframes ie-faq-open{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

.ie-hub-cta{display:inline-block;margin-top:8px;padding:13px 26px;border-radius:6px;
  background:var(--ie-orange);color:#fff!important;font-weight:600;text-decoration:none!important;
  transition:background .2s ease,box-shadow .2s ease}
.ie-hub-cta:hover{background:var(--ie-orange-light);box-shadow:0 10px 24px rgba(var(--ie-orange-rgb),.35)}

@media (max-width:767px){
  .ie-hub-h1{font-size:1.55rem}
  .ie-hub h2{font-size:1.32rem}
  .ie-hub section{margin-bottom:40px}
  .ie-hub-text p,.ie-hub-text li{font-size:1.02rem}
  .ie-hub-steps>li{padding:16px 16px 16px 54px}
  .ie-hub-steps>li::before{left:14px}
  .ie-hub-example{padding:16px 18px}
  .ie-hub-pick-label{flex:1 1 100%;min-width:0;margin-bottom:2px}
  .ie-hub-grid{grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:12px}
  .ie-hub-card-img{height:110px}
}
@media (prefers-reduced-motion:reduce){
  .ie-hub-chip,.ie-hub-card,.ie-hub-cta,.ie-hub-faq summary::after{transition:none}
  .ie-hub-faq details[open]>p{animation:none}
}

/* Понижённый заголовок из описания инфоблока (см. news.php) — держим прежний вид баннера */
.heroUnit-item-text-lead{display:block;font-size:inherit;font-weight:inherit}


/* Цена по запросу (см. ie_show_price() в local/php_interface/init.php).
   Занимает место цены, поэтому набрана тем же кеглем, но без жирности —
   это не число, а приглашение к разговору, и выглядеть как цена не должно. */
.ie-price-request{color:var(--ie-navy);font-size:.95rem;line-height:1.35;font-weight:500}
.catalogItem-offers-price.ie-price-request{white-space:normal}
.productDetail-sale-price-current.ie-price-request{font-size:1.05rem}

/* ============================================================
   Каталог: разделы-хабы сеткой вместо карусели.
   Карусель прячет часть разделов за краем экрана и требует действия,
   чтобы их увидеть. На странице каталога это главная навигация —
   она должна читаться целиком сразу.
   Разметку даёт catalog.section.list/slider в режиме IE_HUB_MODE,
   там же картинка выводится раньше подписи.
   ============================================================ */
.ie-cat-grid-inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.ie-cat-cell{display:flex}
.ie-cat-cell .categories-item{display:flex;flex-direction:column;width:100%;height:100%;
  padding:18px 18px 22px;border-radius:14px;background:#fff;border:1px solid var(--ie-border-soft);
  text-decoration:none;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.ie-cat-cell .categories-item:hover{border-color:var(--ie-orange);transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(var(--ie-navy-rgb),.13);text-decoration:none}
/* картинка — главный опознавательный знак карточки, ей отдана большая часть высоты */
.ie-cat-cell .categories-item-image{display:flex;align-items:center;justify-content:center;
  height:210px;margin-bottom:6px}
.ie-cat-cell .categories-item-image img,
.ie-cat-cell .categories-item-image picture{max-width:100%;max-height:210px;object-fit:contain}
/* подпись прижата к низу: у карточек разной длины названий низ выравнивается */
.ie-cat-cell .categories-item-title{margin-top:auto;padding-top:12px;font-size:1.05rem;
  line-height:1.32;font-weight:600;color:var(--ie-navy);text-align:left}
.ie-cat-cell .categories-item-title-counter{display:block;margin-top:4px;font-size:.85rem;
  font-weight:400;color:var(--ie-text-muted)}
@media (max-width:767px){
  .ie-cat-grid-inner{grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:12px}
  .ie-cat-cell .categories-item{padding:12px 12px 16px}
  .ie-cat-cell .categories-item-image{height:130px}
  .ie-cat-cell .categories-item-image img{max-height:130px}
  .ie-cat-cell .categories-item-title{font-size:.94rem}
}
/* Направление движения при наведении.
   В шаблоне (template_styles.css) картинка на hover меняет геометрию:
   bottom 5%->0 и left 5%->0, то есть уезжает ВНИЗ и влево. Карточка при
   этом приподнимается — два движения в разные стороны, и глаз читает это
   как «картинка проваливается». Подъём привычнее: он повторяет жест
   карточки и совпадает с ожиданием пользователя.
   Специфичность (0,3,0) перебивает правило шаблона (0,2,0) независимо
   от порядка подключения файлов. */
.ie-cat-cell .categories-item-image{transition:transform .3s ease}
.ie-cat-cell .categories-item:hover .categories-item-image{
  /* Повторяем значения покоя: этим гасим сползание из шаблона.
     Обнулять их в auto нельзя — картинка спозиционирована абсолютно,
     и без привязок она прыгала на полсотни пикселей вместо восьми. */
  width:90%;left:5%;bottom:5%;
  transform:translateY(-8px) scale(1.04)}

@media (prefers-reduced-motion:reduce){
  /* Подъём карточки ОСТАЁТСЯ, убирается только его плавность. Это отклик
     на наведение: без него курсор ходит по плитке, и ничего не происходит —
     человек не понимает, что она кликабельна. Настройка просит убавить
     движение, а не отменить обратную связь. */
  .ie-cat-cell .categories-item{transition:none}
  .ie-cat-cell .categories-item-image{transition:none}
}

/* ============================================================
   Белый фон вместо серо-бирюзового #f4f6f5.
   Решение оператора: фон сайта белый везде. Серые панели секций
   (.ie-bg-soft) остаются — они разделяют блоки на длинных страницах,
   и без них всё сливается в одно полотно.
   ============================================================ */
body.page-style{background:#fff}

/* ============================================================
   Текстовый блок раздела каталога: «Почему клиенты выбирают…»
   и сравнение химий. Разметка приходит из описания инфоблока
   (редактируется в админке), поэтому стилизуем по тегам, а не
   по классам — на них влиять из админки нельзя.
   ============================================================ */
.ie-cat-about{padding:56px 0 8px}
.ie-cat-about-body{max-width:none}
.ie-cat-about-body h2{font-size:2.1rem;line-height:1.2;font-weight:700;color:var(--ie-navy);
  margin:44px 0 20px;max-width:22em}
.ie-cat-about-body>h2:first-child{margin-top:0}
.ie-cat-about-body h3{font-size:1.3rem;font-weight:600;color:var(--ie-navy);margin:36px 0 14px}
/* текст держим в читаемой колонке: длинная строка на всю ширину экрана
   теряется глазом при переходе на следующую */
/* Набор крупнее: 1,03rem — это 16,5 px, на широком экране такой текст
   читается мелко. У конкурентов на этих же страницах 17 px. */
.ie-cat-about-body p{max-width:64em;font-size:1.13rem;line-height:1.72;color:#3a3a3a;margin:0 0 18px}

/* Таблица сравнения химий: тот же вид, что у таблиц на хабах —
   тёмная шапка, зебра, горизонтальный скролл внутри себя на узком экране,
   чтобы страница не ехала вбок. */
.ie-cat-about-body table{width:100%;border-collapse:collapse;font-size:.94rem;
  margin:8px 0 12px;min-width:660px}
.ie-cat-about-body .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin:0 0 8px;border-radius:10px;border:1px solid var(--ie-border-soft)}
.ie-cat-about-body table td,
.ie-cat-about-body table th{padding:11px 14px;border-bottom:1px solid var(--ie-border-soft);
  vertical-align:middle;text-align:center}
/* Шапка. Правится в админке, а визуальный редактор Битрикса тегом thead
   пользуется не всегда — поэтому держим оба варианта: настоящий <th>
   и первую строку из <td>, как было в исходном тексте. */
.ie-cat-about-body table th,
.ie-cat-about-body table thead td,
.ie-cat-about-body table tbody tr:first-child th{background:var(--ie-navy);color:#fff;
  font-weight:600;border-bottom:0}
.ie-cat-about-body table:not(:has(thead)) tr:first-child td{background:var(--ie-navy);
  color:#fff;font-weight:600;border-bottom:0}
/* первый столбец — названия параметров, читаются слева */
.ie-cat-about-body table td:first-child,
.ie-cat-about-body table th:first-child{text-align:left;font-weight:500;color:var(--ie-navy);
  background:var(--ie-bg-soft)}
.ie-cat-about-body table th:first-child{background:var(--ie-navy);color:#fff}
.ie-cat-about-body table:not(:has(thead)) tr:first-child td:first-child{background:var(--ie-navy)}
.ie-cat-about-body table tbody tr:nth-child(even) td:not(:first-child){background:#fafbfb}
.ie-cat-about-body table p{margin:0;max-width:none;font-size:inherit;line-height:1.4;color:inherit}
.ie-cat-about-body table tr:last-child td{border-bottom:0}
/* Таблицы «вопрос — ответ»: в ячейках фразы, а не цифры. По центру такой
   текст читается рвано, поэтому выравниваем по левому краю и даём первому
   столбцу фиксированную долю ширины, чтобы вопросы не растягивались. */
.ie-cat-about-body table.ie-qa td{text-align:left}
.ie-cat-about-body table.ie-qa th{text-align:left}
.ie-cat-about-body table.ie-qa td:first-child,
.ie-cat-about-body table.ie-qa th:first-child{width:32%}
.ie-cat-about-body table a{color:var(--ie-navy);text-decoration:underline;
  text-decoration-color:rgba(var(--ie-orange-rgb),.5)}
.ie-cat-about-body table a:hover{color:var(--ie-orange)}

/* Списки. Текст стал длиннее, и сплошные абзацы в нём читаются тяжело —
   перечисления разбивают его на шаги, за которые цепляется глаз. */
.ie-cat-about-body ul,
.ie-cat-about-body ol{max-width:62em;margin:0 0 18px;padding-left:0;list-style:none;
  counter-reset:ie-step}
.ie-cat-about-body li{position:relative;padding-left:34px;margin-bottom:12px;
  font-size:1.03rem;line-height:1.62;color:#3a3a3a}
.ie-cat-about-body ul li::before{content:"";position:absolute;left:8px;top:.62em;
  width:7px;height:7px;border-radius:50%;background:var(--ie-orange)}
.ie-cat-about-body ol li{counter-increment:ie-step}
.ie-cat-about-body ol li::before{content:counter(ie-step);position:absolute;left:0;top:.08em;
  width:23px;height:23px;border-radius:50%;background:var(--ie-orange);color:#fff;
  font-size:.82rem;font-weight:700;line-height:23px;text-align:center}
.ie-cat-about-body li b{color:var(--ie-navy);font-weight:600}
.ie-cat-about-body a{color:var(--ie-navy);text-decoration:underline;
  text-decoration-color:rgba(var(--ie-orange-rgb),.5)}
.ie-cat-about-body a:hover{color:var(--ie-orange)}
/* Предупреждение о несовместимости 3,6 В и 1,5 В — должно останавливать
   взгляд, а не тонуть в тексте. Выделяем по классу, а не по «абзац начинается
   с жирного»: текстовые узлы не считаются за :first-child, и под такое правило
   попадал любой абзац, где жирное слово стоит первым словом. */
.ie-cat-about-body p.ie-note{border-left:3px solid var(--ie-orange);
  padding:12px 18px;margin:0 0 18px;max-width:62em;
  background:var(--ie-bg-soft);border-radius:0 8px 8px 0}

@media (max-width:767px){
  .ie-cat-about{padding:36px 0 4px}
  .ie-cat-about-body h2{font-size:1.5rem}
  .ie-cat-about-body h3{font-size:1.15rem;margin-top:28px}
  .ie-cat-about-body p,.ie-cat-about-body li{font-size:.98rem}
}

/* ============================================================
   Кейсы, которыми мы гордимся (include/cases.php).
   Заменили слайдер отраслей: разбор 71 сайта конкурентов показал,
   что кейсы держат восемь из них — самый частый блок, которого
   у нас не было. Для промышленной закупки проект с цифрами
   убеждает сильнее перечисления отраслей.
   ============================================================ */
.ie-cases{padding:70px 0 60px;background:#fff}
.ie-cases-head{max-width:820px;margin:0 auto 44px;text-align:center}
.ie-cases-title{font-weight:700;font-size:2.4rem;line-height:1.15;margin:0 0 16px;color:var(--ie-navy)}
.ie-cases-lead{font-size:1.15rem;line-height:1.5;color:var(--ie-text-muted);margin:0}
.ie-cases-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:26px}

.ie-case{display:flex;flex-direction:column;border:1px solid var(--ie-border-soft);
  border-radius:22px;background:#fff;overflow:hidden;text-decoration:none!important;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.ie-case:hover{border-color:var(--ie-orange);transform:translateY(-4px);
  box-shadow:0 18px 38px rgba(var(--ie-navy-rgb),.13)}

/* Фотографий кейсов пока нет. Вместо пустой рамки — плашка с названием
   отрасли: читается как заглушка по смыслу, а не как недогруженная картинка.
   Подложка графитовая, а не синяя: синий на странице уже занят под фирменный
   акцент, и второй синий блок спорит с ним вместо того, чтобы оттенять. */
.ie-case-photo{position:relative;display:flex;align-items:center;justify-content:center;
  aspect-ratio:4/3;overflow:hidden;
  background:linear-gradient(150deg,#41464d 0%,#23272c 55%,#111417 100%)}
.ie-case-photo-label{padding:0 24px;font-size:1.15rem;font-weight:600;color:#fff;
  opacity:.5;text-align:center;line-height:1.3}
/* Наезд картинки при наведении — тот же жест, что у карточек новостей,
   чтобы блоки ощущались одной системой. Чистый CSS, без скриптов. */
/* Пропорцию задаём САМОЙ картинке, а не только рамке. Высота рамки
   получена из aspect-ratio, и для картинки такая высота неопределённая:
   ни height:100%, ни растяжка абсолютом между top:0 и bottom:0 её
   не наследуют — заменяемый элемент всё равно берёт свои пропорции.
   Фото 3:2 в рамке 4:3 не добирало 34 px, и снизу оставалась тёмная
   полоса подложки. Со своим aspect-ratio картинка считает высоту сама
   и совпадает с рамкой при любой ширине колонки. */
.ie-case-photo img{width:100%;height:auto;aspect-ratio:4/3;
  object-fit:cover;transition:transform .5s ease}
.ie-case:hover .ie-case-photo img{transform:scale(1.05)}

.ie-case-body{display:flex;flex-direction:column;flex:1;padding:22px 24px 24px}
.ie-case-sphere{font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ie-orange);font-weight:600;margin-bottom:10px}
.ie-case-name{font-size:1.18rem;line-height:1.32;font-weight:600;color:var(--ie-navy);
  margin-bottom:10px}
.ie-case-text{font-size:.97rem;line-height:1.55;color:#4a4a4a;margin-bottom:18px}
/* цифры прижаты к низу: у карточек разной длины текста ряды выравниваются */
.ie-case-stats{display:flex;gap:26px;margin-top:auto;padding-top:16px;
  border-top:1px solid var(--ie-border-soft)}
.ie-case-stat{display:flex;flex-direction:column}
.ie-case-stat b{font-size:1.22rem;font-weight:700;color:var(--ie-navy);
  font-variant-numeric:tabular-nums;line-height:1.2}
.ie-case-stat i{font-style:normal;font-size:.85rem;color:var(--ie-text-muted);margin-top:2px}

.ie-cases-cta{text-align:center;margin:40px 0 0}

/* Последняя плитка — вход в раздел. Раньше это была кнопка под сеткой, но
   взгляд идёт по карточкам и до неё не доходил; плитка стоит на маршруте. */
.ie-case-all{background:linear-gradient(150deg,#41464d 0%,#23272c 55%,#111417 100%);
  border-color:transparent;justify-content:center}
.ie-case-all:hover{border-color:var(--ie-orange)}
.ie-case-all .ie-case-body{padding:34px 30px;justify-content:center}
/* Без цифры: заголовок сам несёт смысл «список на этом не кончается».
   Размер держим крупным — плитка должна читаться как продолжение ряда,
   а не как подпись под ним. */
.ie-case-all-title{font-size:1.75rem;line-height:1.2;font-weight:700;color:#fff}
.ie-case-all-text{margin-top:16px;font-size:.95rem;line-height:1.55;color:rgba(255,255,255,.62)}
.ie-case-all-link{display:inline-flex;align-items:center;gap:10px;margin-top:auto;padding-top:22px;
  font-size:1rem;font-weight:600;color:var(--ie-orange)}
.ie-case-all-link svg{transition:transform .25s ease}
.ie-case-all:hover .ie-case-all-link svg{transform:translateX(5px)}

/* Появление при прокрутке — на общем движке сайта (data-ie-reveal
   в ie-custom.js). Отдельный скрипт ради этого не нужен: движок уже
   загружен на каждой странице, а лесенка по карточкам делается чистым CSS,
   без работы в кадре отрисовки. */
.js-ie .ie-cases-grid .ie-case.ie-reveal:nth-child(2){transition-delay:.08s}
.js-ie .ie-cases-grid .ie-case.ie-reveal:nth-child(3){transition-delay:.16s}
.js-ie .ie-cases-grid .ie-case.ie-reveal:nth-child(4){transition-delay:.06s}
.js-ie .ie-cases-grid .ie-case.ie-reveal:nth-child(5){transition-delay:.14s}
.js-ie .ie-cases-grid .ie-case.ie-reveal:nth-child(6){transition-delay:.22s}
/* Наведение и появление трогают один и тот же transform, поэтому подъём
   карточки разрешаем только после того, как она проявилась. */
.js-ie .ie-cases-grid .ie-case.ie-reveal.is-in:hover{transform:translateY(-4px)}

@media (max-width:767px){
  .ie-cases{padding:44px 0 36px}
  .ie-cases-title{font-size:1.65rem}
  .ie-cases-lead{font-size:1rem}
  .ie-cases-grid{grid-template-columns:1fr;gap:18px}
  .ie-case-body{padding:18px 18px 20px}
  .ie-case-all .ie-case-body{padding:26px 22px}
  .ie-case-all-title{font-size:1.4rem}
}
@media (prefers-reduced-motion:reduce){
  /* Как и в каталоге: подъём карточки при наведении остаётся, гасится
     только плавность перехода. */
  .ie-case,.ie-case-photo img,.ie-case-all-link svg{transition:none}
}

/* Страница отдельного кейса (/cases/<код>/) */
.ie-case-page{padding:38px 0 64px}

/* ---- шапка кейса: текст слева, фотография справа ----
   Одной колонкой фотография во всю ширину занимала почти весь первый экран,
   и до сути кейса приходилось листать. */
.ie-case-hero{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
  margin-bottom:40px}
.ie-case-hero-photo{margin:0;border-radius:16px;overflow:hidden;
  box-shadow:0 18px 44px rgba(var(--ie-navy-rgb),.16)}
.ie-case-hero-photo img{width:100%;height:auto;aspect-ratio:3/2;
  object-fit:cover;display:block}

.ie-case-page-sphere{font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ie-orange);font-weight:600;margin-bottom:12px}
.ie-case-page-title{font-size:2.2rem;line-height:1.18;font-weight:700;color:var(--ie-navy);
  margin:0 0 18px;max-width:18em}
.ie-case-page-lead{font-size:1.12rem;line-height:1.6;color:#3a3a3a;margin:0 0 26px}
.ie-case-page-stats{display:flex;flex-wrap:wrap;gap:34px;padding:20px 24px;margin:0;
  background:var(--ie-bg-soft);border-radius:12px;border-left:3px solid var(--ie-orange)}
.ie-case-page-stat{display:flex;flex-direction:column}
.ie-case-page-stat b{font-size:1.7rem;font-weight:700;color:var(--ie-navy);
  font-variant-numeric:tabular-nums;line-height:1.15}
.ie-case-page-stat i{font-style:normal;font-size:.92rem;color:var(--ie-text-muted);margin-top:4px}

/* ---- текст кейса ---- */
.ie-case-page-body{max-width:68em;font-size:1.06rem;line-height:1.75;color:#3a3a3a}
.ie-case-page-body h2{font-size:1.6rem;font-weight:600;color:var(--ie-navy);margin:40px 0 16px}
.ie-case-page-body h2:first-child{margin-top:0}
.ie-case-page-body p{margin:0 0 14px}
.ie-case-page-body strong{color:var(--ie-navy)}

/* Таблица характеристик. Не «дизайн ради дизайна»: параметры ячейки —
   это то, что специалист ищет глазами, и списком в тексте они теряются. */
.ie-spec{width:100%;border-collapse:collapse;margin:20px 0 28px;font-size:1.02rem}
.ie-spec th,.ie-spec td{text-align:left;vertical-align:top;padding:14px 18px;
  border-bottom:1px solid var(--ie-border-soft)}
.ie-spec th{width:38%;font-weight:600;color:var(--ie-navy);background:var(--ie-bg-soft)}
.ie-spec tr:last-child th,.ie-spec tr:last-child td{border-bottom:0}

/* ---- следующий шаг со страницы кейса ---- */
.ie-case-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:24px;margin:44px 0 0;padding:30px 34px;border-radius:18px;
  background:var(--ie-navy);color:#fff}
.ie-case-cta-title{font-size:1.35rem;font-weight:700;margin-bottom:8px}
.ie-case-cta-text{max-width:34em}
.ie-case-cta-text p{margin:0;color:rgba(255,255,255,.68);line-height:1.55}
.ie-case-cta-actions{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
/* Через .ie-case-cta: тема красит ссылки оранжевым, и телефон сливался
   с кнопкой рядом вместо того, чтобы читаться как второй вариант связи. */
.ie-case-cta a.ie-case-cta-phone{color:var(--ie-cyan);font-weight:600;
  text-decoration:none;white-space:nowrap}
.ie-case-cta a.ie-case-cta-phone:hover{color:var(--ie-cyan-light)}

.ie-case-page-actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:26px;
  padding-top:22px;border-top:1px solid var(--ie-border-soft)}
.ie-case-page-link{color:var(--ie-navy);text-decoration:underline;
  text-decoration-color:rgba(var(--ie-orange-rgb),.5)}
.ie-case-page-link:hover{color:var(--ie-orange)}

@media (max-width:991px){
  .ie-case-hero{grid-template-columns:1fr;gap:26px}
  .ie-case-page-title{font-size:1.8rem;max-width:none}
}
@media (max-width:767px){
  .ie-case-page-title{font-size:1.55rem}
  .ie-case-page-stats{gap:24px;padding:18px 20px}
  .ie-case-page-stat b{font-size:1.4rem}
  .ie-case-cta{padding:24px 20px}
  .ie-spec th{width:auto}
  .ie-spec th,.ie-spec td{display:block;padding:8px 0}
  .ie-spec th{background:none;padding-bottom:2px}
  .ie-spec tr{display:block;border-bottom:1px solid var(--ie-border-soft);padding:8px 0}
}

/* Раздел /cases/ — витрина всех проектов */
.ie-cases-page{padding:38px 0 64px}
.ie-cases-page-lead{font-size:1.08rem;line-height:1.6;color:var(--ie-text-muted);
  max-width:56em;margin:0 0 30px}

/* Плитка направления, под которое товаров ещё нет. Штатная заглушка «нет фото»
   читается как поломка витрины; графитовая плашка выглядит осознанной. */
.ie-cat-grid .categories-item-image:has(.ie-cat-grid-soon){display:flex;
  align-items:center;justify-content:center;
  background:linear-gradient(150deg,#41464d 0%,#23272c 55%,#111417 100%);
  border-radius:12px}
.ie-cat-grid-soon{font-size:.9rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.55)}

/* ============================================================
   «Наше производство» — карусель фотографий цеха
   ------------------------------------------------------------
   Раскладка «веером»: активный снимок по центру, соседние ужаты
   и притемнены. Смещение задано В ПРОЦЕНТАХ ОТ ШИРИНЫ КАРТОЧКИ,
   а не в пикселях, как в макете: тогда одна и та же формула
   работает и на мониторе, и на телефоне, и JS не приходится
   пересчитывать раскладку при каждом изменении размера окна.
   JS выставляет только два числа — --rel (позиция относительно
   активного, со знаком) и --abs (та же величина по модулю).
   ============================================================ */
.ie-prod{padding:70px 0 60px;background:var(--ie-navy);overflow:hidden}
.ie-prod-head{text-align:center;margin-bottom:26px}
.ie-prod-title{font-weight:700;font-size:2.4rem;line-height:1.15;color:#fff;margin:0}
.ie-prod-lead{font-size:1.08rem;line-height:1.55;color:rgba(255,255,255,.62);
  max-width:44em;margin:14px auto 0}

/* Карусель осталась в одной статье-кейсе (/cases/emkost-yacheyki-v-rezhime-zakazchika/):
   там она — часть текста, а не блок главной. Поэтому правила ниже не удалены,
   хотя на главной карусели больше нет. */
.ie-prod-gallery{position:relative}
.ie-prod-stage{position:relative;height:clamp(220px,29vw,420px)}

.ie-prod-slide{--rel:0;--abs:0;
  position:absolute;left:50%;top:50%;margin:0;
  width:min(620px,72vw);aspect-ratio:16/9;
  border-radius:22px;overflow:hidden;background:#0f1114;
  border:1px solid rgba(255,255,255,.14);
  transform:translate(-50%,-50%) translateX(calc(var(--rel) * 52%))
            scale(calc(1 - var(--abs) * .15));
  opacity:calc(1 - var(--abs) * .34);
  /* Дальние кадры не только притемнены, но и слегка расфокусированы —
     глаз читает глубину, а не плоскую стопку картинок. Больше 3 px
     не берём: размытие считает видеокарта, и на слабой машине широкий
     радиус стоит дороже самой анимации. */
  filter:brightness(calc(1 - var(--abs) * .26)) blur(calc(var(--abs) * 1.5px));
  z-index:calc(10 - var(--abs));
  box-shadow:0 16px 40px rgba(0,0,0,.35);
  /* Медленно и с оттяжкой: 1,15 с вместо 0,65 и кривая с длинным
     выбегом — карточка выезжает мягко и «дорого», а не щёлкает. */
  /* Прозрачность и размытие догоняют быстрее движения (0,5 с против 1,15 с).
     Иначе полтора шага пути два кадра едут полупрозрачными друг сквозь друга
     и картинка мутнеет; так свет и резкость встают почти сразу, а плавно
     скользит только положение. */
  transition:transform 1.15s cubic-bezier(.16,1,.3,1),opacity .5s ease,
             filter .5s ease,box-shadow 1.15s ease}
.ie-prod-slide img{width:100%;height:100%;object-fit:cover;display:block}
.ie-prod-slide.is-active{cursor:default;box-shadow:0 34px 80px rgba(0,0,0,.55)}
.ie-prod-slide:not(.is-active){cursor:pointer}
/* Дальние карточки не должны перехватывать клик: они лежат под соседями
   и визуально почти не видны, но кликабельная зона у них полноразмерная. */
.ie-prod-slide.is-far{pointer-events:none}

/* Подпись показываем только у активного снимка: на ужатых соседях
   текст всё равно нечитаем, а шум создаёт. */
/* Подпись догоняет карточку: появляется, когда та уже встала на место,
   и чуть поднимается. Без задержки она проявлялась на летящем кадре. */
.ie-prod-cap{position:absolute;left:0;right:0;bottom:0;padding:44px 22px 16px;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.72));
  opacity:0;transform:translateY(10px);
  transition:opacity .5s ease,transform .5s ease}
.ie-prod-slide.is-active .ie-prod-cap{opacity:1;transform:none;
  transition-delay:.45s}
.ie-prod-cap b{display:block;color:#fff;font-weight:600;font-size:1.05rem;line-height:1.25}
.ie-prod-cap i{display:block;font-style:normal;color:rgba(255,255,255,.62);
  font-size:.9rem;line-height:1.35;margin-top:3px}

.ie-prod-nav{position:absolute;top:50%;transform:translateY(-50%);
  width:48px;height:48px;border-radius:50%;z-index:20;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.35);background:rgba(var(--ie-navy-rgb),.55);
  color:#fff;cursor:pointer;padding:0;
  transition:border-color .25s,background .25s}
.ie-prod-nav:hover{border-color:var(--ie-orange);background:var(--ie-orange)}
.ie-prod-prev{left:0}
.ie-prod-next{right:0}

.ie-prod-dots{display:flex;justify-content:center;gap:10px;margin-top:16px}
.ie-prod-dot{display:block;width:9px;height:9px;padding:0;border:0;border-radius:5px;
  background:rgba(255,255,255,.3);cursor:pointer;transition:width .3s ease,background .3s ease}
.ie-prod-dot.is-active{width:26px;background:var(--ie-orange)}

/* Без JS карусели нет: показываем ленту с горизонтальной прокруткой.
   Пять снимков в стопке друг на друге без скрипта — это пять снимков,
   из которых виден один и добраться до остальных нельзя. */
.ie-prod-nav,.ie-prod-dots{display:none}
.js-ie .ie-prod-nav{display:flex}
.js-ie .ie-prod-dots{display:flex}
html:not(.js-ie) .ie-prod-stage{height:auto;display:flex;gap:16px;overflow-x:auto;
  padding-bottom:10px;scroll-snap-type:x mandatory}
html:not(.js-ie) .ie-prod-slide{position:relative;left:auto;top:auto;flex:0 0 min(620px,84vw);
  transform:none;opacity:1;filter:none;scroll-snap-align:center}
html:not(.js-ie) .ie-prod-cap{opacity:1}

/* Компетенции, перенесённые из блока «Уникальный подход». */

/* Снимки производства — сетка вместо карусели (решение владельца 25.08.2026).
   Раньше здесь была «веерная» карусель со стрелками и точками-указателями:
   на телефоне точки были 9x9 px, а половина кадров всегда лежала
   притемнённой и размытой. Сетка показывает всё сразу и одинаково резко. */
.ie-prod-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.ie-prod-shot{position:relative;margin:0;border-radius:22px;overflow:hidden;
  background:#0f1114;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 16px 40px rgba(0,0,0,.35)}
.ie-prod-shot img{display:block;width:100%;height:100%;aspect-ratio:16/9;object-fit:cover}
.ie-prod-cap{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;
  background:linear-gradient(180deg,rgba(15,17,20,0),rgba(15,17,20,.86) 55%);
  color:#fff}
/* Подпись видна всегда. В карусели она проявлялась только у активного
   кадра (opacity:0 у остальных), и в сетке все подписи оказались невидимы. */
.ie-prod-shot .ie-prod-cap{opacity:1;transform:none;transition:none}
.ie-prod-cap b{display:block;font-size:1rem;line-height:1.25}
.ie-prod-cap i{display:block;margin-top:4px;font-style:normal;
  font-size:.86rem;line-height:1.4;color:rgba(255,255,255,.72)}

.ie-prod-skills{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
.ie-prod-skill{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:16px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  transition:border-color .25s,background .25s}
.ie-prod-skill:hover{border-color:rgba(var(--ie-orange-rgb),.55);background:rgba(255,255,255,.08)}
.ie-prod-skill-icon{flex:0 0 auto;width:48px;height:48px;display:flex;
  align-items:center;justify-content:center}
.ie-prod-skill-icon img{max-width:100%;height:auto;display:block}
.ie-prod-skill-title{color:rgba(255,255,255,.86);font-size:.95rem;line-height:1.3;font-weight:600}

@media (max-width:991px){
  .ie-prod-title{font-size:1.9rem}
  .ie-prod-skills{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:575px){
  .ie-prod{padding:48px 0 44px}
  .ie-prod-title{font-size:1.5rem}
  .ie-prod-lead{font-size:1rem}
  /* На узком экране соседи съедают активный снимок — оставляем только
     подсказку по краям, поэтому смещение больше, а масштаб мягче. */
  .ie-prod-slide{width:82vw;transform:translate(-50%,-50%) translateX(calc(var(--rel) * 62%))
                 scale(calc(1 - var(--abs) * .1))}
  /* Стрелки убираем: снаружи карточки на 390 px места нет, а поверх неё
     они наезжают на подпись. Листание пальцем и точки остаются. */
  .js-ie .ie-prod-nav{display:none}
  .ie-prod-cap{padding:32px 16px 12px}
  .ie-prod-skills{grid-template-columns:1fr;gap:12px;margin-top:32px}
}
/* При выключенных системных анимациях карточки НЕ замирают, а едут короче
   и мягче: 0,6 с вместо 1,15 и без размытия. Решение владельца — то же,
   что для блока «полный цикл»: это подача содержимого, и без движения
   витрина превращается в одну картинку. Полностью гасить движение
   у тех, кто просил его убавить, всё же неправильно, поэтому ход
   укорочен вдвое, а не оставлен как есть. */
@media (prefers-reduced-motion:reduce){
  .ie-prod-slide{
    filter:brightness(calc(1 - var(--abs) * .26));
    transition:transform .6s cubic-bezier(.22,1,.3,1),opacity .35s ease,
               filter .35s ease,box-shadow .6s ease}
  .ie-prod-cap{transition:opacity .3s ease;transform:none}
  .ie-prod-slide.is-active .ie-prod-cap{transition-delay:.25s}
}

/* Слайдер внутри статьи (кейс лаборатории). Никаких «облегчённых»
   вариантов: тот же тёмный блок и те же размеры кадров, что в «Нашем
   производстве» на главной. Полоса выходит за колонку текста — на светлой
   странице она должна читаться как отдельный экран, а не как картинка
   в абзаце. */
.ie-prod-band{background:var(--ie-navy);border-radius:20px;
  padding:38px 30px 30px;margin:30px 0 34px;
  /* Дальние кадры уезжают за края полосы — без обрезки они выходили
     на белую страницу и висели в воздухе. На главной ту же роль
     играет overflow у секции. */
  overflow:hidden}
.ie-prod-band .ie-prod-gallery{position:relative}
}

/* ---- таблица сравнения химий на /catalog/ как навигатор ----
   Строка ведёт в свой хаб, и это должно быть видно: без подсветки
   ссылка в первой ячейке читается как обычный жирный текст, и человек
   не понимает, что таблица кликабельна. */
.ie-chem-table tbody tr{transition:background .2s ease}
.ie-chem-table tbody tr:hover{background:var(--ie-bg-soft)}
.ie-chem-table tbody td:first-child a{color:var(--ie-navy);text-decoration:none;
  border-bottom:1px solid rgba(var(--ie-orange-rgb),.55);padding-bottom:1px}
.ie-chem-table tbody tr:hover td:first-child a{color:var(--ie-orange);
  border-bottom-color:var(--ie-orange)}
/* Стрелка появляется при наведении — подсказка «отсюда есть переход». */
.ie-chem-table tbody td:first-child a::after{content:" →";opacity:0;
  transition:opacity .2s ease}
.ie-chem-table tbody tr:hover td:first-child a::after{opacity:1}
@media (prefers-reduced-motion:reduce){
  .ie-chem-table tbody tr,
  .ie-chem-table tbody td:first-child a::after{transition:none}
}
/* Нижний блок текста отделяем от витрины — иначе он читается как её продолжение. */
.ie-cat-about-below{padding-top:10px;margin-top:34px;border-top:1px solid var(--ie-border-soft)}

/* ---- призыв в конце текста раздела ----
   Обычный абзац в конце простыни не читается как приглашение: глаз к концу
   страницы уже листает. Панель на графите останавливает прокрутку и даёт
   три способа связаться — кнопка к форме на этой же странице, телефон
   и почта. Кнопка ведёт якорем, а не на отдельную страницу: человек уже
   дочитал, уводить его лишним переходом незачем. */
.ie-cta-panel{display:flex;flex-wrap:wrap;gap:34px;justify-content:space-between;
  align-items:flex-start;margin:42px 0 8px;padding:34px 36px;border-radius:20px;
  background:var(--ie-navy);color:#fff}
.ie-cta-panel-text{flex:1 1 30em;max-width:44em}
.ie-cat-about-body .ie-cta-panel h2{color:#fff;margin:0 0 12px;font-size:1.75rem}
.ie-cat-about-body .ie-cta-panel p{color:rgba(255,255,255,.72);margin:0 0 16px;
  font-size:1.08rem}
.ie-cta-list{list-style:none;padding:0;margin:0}
.ie-cta-list li{position:relative;padding-left:26px;margin:0 0 9px;
  color:rgba(255,255,255,.82);font-size:1.02rem;line-height:1.45}
.ie-cta-list li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;
  border-radius:50%;background:var(--ie-orange)}
.ie-cta-panel-actions{flex:0 0 auto;display:flex;flex-direction:column;
  align-items:flex-start;gap:12px;min-width:260px}
.ie-cat-about-body .ie-cta-btn{display:inline-block;padding:17px 34px;border-radius:14px;
  background:var(--ie-orange);color:#fff;font-weight:600;font-size:1.08rem;
  text-decoration:none;transition:transform .25s,box-shadow .25s,background .25s}
.ie-cat-about-body .ie-cta-btn:hover{transform:translateY(-2px);background:var(--ie-orange-light);
  box-shadow:0 14px 34px rgba(var(--ie-orange-rgb),.42)}
.ie-cat-about-body .ie-cta-phone{color:#fff;font-weight:700;font-size:1.32rem;
  text-decoration:none;letter-spacing:.01em}
.ie-cat-about-body .ie-cta-phone:hover{color:var(--ie-orange-light)}
.ie-cat-about-body .ie-cta-mail{color:var(--ie-cyan);text-decoration:none;font-size:1.02rem}
.ie-cat-about-body .ie-cta-mail:hover{color:var(--ie-cyan-light)}
.ie-cta-note{color:rgba(255,255,255,.5);font-size:.9rem;line-height:1.4;max-width:16em}
@media (max-width:767px){
  .ie-cta-panel{padding:26px 20px;gap:22px}
  .ie-cat-about-body .ie-cta-panel h2{font-size:1.4rem}
  .ie-cta-panel-actions{min-width:0;width:100%}
  .ie-cat-about-body .ie-cta-btn{width:100%;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .ie-cat-about-body .ie-cta-btn{transition:none}
}

/* --- текст услуги и новости --------------------------------------------
   Тексты услуг переписаны в наш стандарт: этапы работы, что прислать, что
   получаете, разбор частых ошибок. Шаблон темы такой текст не оформлял —
   ни отбивок у заголовков, ни таблиц, ни ширины строки. Читать полотно на
   всю ширину экрана невозможно, поэтому даём тот же ритм, что в каталоге. */
.singleNews-text{font-size:1.08rem;line-height:1.7;color:#3a3a3a}
.singleNews-text > p,
.singleNews-text > ul,
.singleNews-text > ol{max-width:64em}
.singleNews-text h2{font-size:1.65rem;font-weight:700;color:var(--ie-navy);
  margin:34px 0 14px;line-height:1.2}
.singleNews-text h3{font-size:1.16rem;font-weight:600;color:var(--ie-navy);
  margin:22px 0 8px}
.singleNews-text p{margin:0 0 16px}
.singleNews-text ul,.singleNews-text ol{margin:0 0 18px;padding-left:22px}
.singleNews-text li{margin-bottom:9px}
.singleNews-text li b{color:var(--ie-navy)}
.singleNews-text a{color:var(--ie-orange);text-decoration:underline}
.singleNews-text a:hover{text-decoration:none}

/* Таблица в тексте: тот же вид, что в каталоге — тёмная шапка, зебра,
   собственный горизонтальный скролл, чтобы страница не ехала вбок. */
.singleNews-text table{width:100%;max-width:64em;border-collapse:collapse;
  font-size:.98rem;margin:6px 0 22px;border:1px solid var(--ie-border-soft)}
.singleNews-text table td,
.singleNews-text table th{padding:12px 16px;border-bottom:1px solid var(--ie-border-soft);
  text-align:left;vertical-align:top}
.singleNews-text table th{background:var(--ie-navy);color:#fff;font-weight:600;border-bottom:0}
.singleNews-text table td:first-child{color:var(--ie-navy);font-weight:500;
  background:var(--ie-bg-soft)}
.singleNews-text table tr:last-child td{border-bottom:0}

@media (max-width:767px){
  .singleNews-text{font-size:1rem}
  /* На телефоне таблица шире экрана — даём ей собственную прокрутку,
     иначе вбок уезжает вся страница. */
  .singleNews-text table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .singleNews-text h2{font-size:1.32rem;margin-top:26px}
  .singleNews-text h3{font-size:1.06rem}
}

/* --- заглавный снимок услуги -------------------------------------------
   Без оправы: подложка с рамкой и уголками отвлекали от самой фотографии.
   Остаётся только скругление — общее для карточек и блоков сайта. */
.singleNews-image img,.singleNews-image picture{display:block;width:100%;height:auto;
  border-radius:18px}

/* --- галерея услуги ------------------------------------------------------
   Слайдер листается сам (см. js/gallery.min.js), поэтому снимку нужна та
   же оправа, что и заглавному, и заметная пагинация. */
.gallery-slider__title{font-size:1.65rem;font-weight:700;color:var(--ie-navy);
  text-align:left;margin:40px 0 18px}
.gallery-slider .swiper{width:100%;max-width:1000px;border-radius:22px;
  background:var(--ie-bg-soft);border:1px solid var(--ie-border-soft);padding:12px}
.gallery-slider .swiper-slide img,.gallery-slider .swiper-slide picture{border-radius:14px}
.gallery-slider .swiper-button-next,.gallery-slider .swiper-button-prev{
  border-color:var(--ie-border);box-shadow:0 8px 18px rgba(var(--ie-navy-rgb),.12)}
.gallery-slider .swiper-pagination-bullet-active{background:var(--ie-orange)}

/* --- вопросы и ответы на странице услуги --------------------------------
   Тот же приём, что в разборе каталога: список вопросов виден целиком,
   ответ раскрывается по клику, текст остаётся в разметке для поиска. */
.singleNews-text .ie-faq-item{max-width:64em;border:1px solid var(--ie-border-soft);
  border-radius:12px;background:#fff;margin-bottom:10px;overflow:hidden}
.singleNews-text .ie-faq-item>summary{cursor:pointer;list-style:none;
  padding:16px 48px 16px 20px;position:relative;font-size:1.06rem;font-weight:600;
  color:var(--ie-navy);transition:background .18s ease,color .18s ease}
.singleNews-text .ie-faq-item>summary::-webkit-details-marker{display:none}
.singleNews-text .ie-faq-item>summary:hover{background:var(--ie-bg-soft);color:var(--ie-orange)}
.singleNews-text .ie-faq-item>summary::after{content:"+";position:absolute;right:20px;
  top:50%;transform:translateY(-50%);font-size:1.5rem;font-weight:400;line-height:1;
  color:var(--ie-orange);transition:transform .2s ease}
.singleNews-text .ie-faq-item[open]>summary{color:var(--ie-orange);
  border-bottom:1px solid var(--ie-border-soft)}
.singleNews-text .ie-faq-item[open]>summary::after{transform:translateY(-50%) rotate(45deg)}
.singleNews-text .ie-faq-item>p{margin:0;padding:16px 20px 18px}

@media (max-width:767px){
  .singleNews-image img{border-radius:12px}
  .gallery-slider__title{font-size:1.32rem;margin-top:28px}
  .singleNews-text .ie-faq-item>summary{font-size:1rem;padding:14px 42px 14px 16px}
}

/* --- СМИ о нас -----------------------------------------------------------
   Внешние публикации для промышленной закупки весят больше любого текста
   на витрине: заказчик проверяет поставщика за пределами его сайта.
   Поэтому карточки крупные и ведут в источник, а не на пересказ. */
.ie-smi-lead{max-width:60em;font-size:1.06rem;line-height:1.65;color:var(--ie-text-muted);
  margin:0 0 26px}
.ie-smi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px}
.ie-smi-card{display:flex;flex-direction:column;gap:10px;padding:0 0 26px;background:#fff;
  border:1px solid var(--ie-border);border-radius:18px;overflow:hidden;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
/* Снимок из публикации: одна пропорция у всех карточек, иначе сетка
   съезжает от разной высоты. */
.ie-smi-shot{display:block;margin-bottom:6px}
.ie-smi-shot img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.ie-smi-card>.ie-smi-meta,.ie-smi-card>.ie-smi-title,
.ie-smi-card>.ie-smi-text,.ie-smi-card>.ie-smi-link{margin-left:28px;margin-right:28px}
.ie-smi-card-noshot{padding-top:26px}
.ie-smi-card:hover{border-color:var(--ie-orange);transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(var(--ie-navy-rgb),.10)}
.ie-smi-meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:.88rem;color:var(--ie-text-muted)}
.ie-smi-source{font-weight:600;color:var(--ie-navy)}
.ie-smi-title{font-size:1.14rem;font-weight:600;line-height:1.35;color:var(--ie-navy);margin:0}
.ie-smi-text{margin:0;font-size:.99rem;line-height:1.6;color:#3a3a3a}
.ie-smi-link{margin-top:auto;align-self:flex-start;font-weight:600;color:var(--ie-orange);
  text-decoration:none!important;border-bottom:1px solid rgba(239,134,51,.4)}
.ie-smi-link:hover{border-bottom-color:var(--ie-orange)}
.ie-smi-link::after{content:" ↗"}

.ie-smi-subtitle{margin:48px 0 14px;font-size:1.65rem;font-weight:700;color:var(--ie-navy)}
.ie-smi-papers{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.ie-smi-paper{display:flex;flex-direction:column;gap:6px;padding:22px 24px;
  background:var(--ie-bg-soft);border:1px solid var(--ie-border-soft);border-radius:16px;
  text-decoration:none!important;transition:border-color .18s ease,transform .18s ease}
.ie-smi-paper:hover{border-color:var(--ie-orange);transform:translateY(-2px)}
.ie-smi-paper-where{font-size:.86rem;font-weight:600;color:var(--ie-orange)}
.ie-smi-paper-title{font-size:1.04rem;font-weight:600;line-height:1.35;color:var(--ie-navy)}
.ie-smi-paper-note{font-size:.86rem;color:var(--ie-text-muted)}
.ie-smi-cta{margin:34px 0 0;font-size:1.02rem;color:#3a3a3a}

@media (max-width:767px){
  .ie-smi-card{padding:20px 22px}
  .ie-smi-subtitle{font-size:1.32rem;margin-top:36px}
}

/* --- кнопка «наверх» рядом с чатом --------------------------------------
   Виджет чата садится в правый нижний угол ровно туда же, где кнопка
   прокрутки наверх, и они перекрывали друг друга. Кнопку поднимаем над
   кружком: чат — действие для клиента, он остаётся на привычном месте. */
#pageUpBtn.upButton{bottom:104px}
/* На телефоне кнопки «наверх» нет — решение владельца 31.08.2026.
   Прокрутка наверх на телефоне делается коротким жестом (двойное касание
   строки состояния на айфоне, свайп у андроида), а кнопка при этом висит
   поверх содержимого рядом с чатом и нижней панелью: три плавающих
   элемента в одном углу мешают друг другу. На широком экране она
   остаётся: там страницы длиннее, а такого жеста нет. */
@media (max-width:767px){
  #pageUpBtn.upButton{display:none}
}

/* Плашка про cookies фиксирована внизу и перекрывает кружок чата на
   первом визите — ровно тогда, когда человек и хочет спросить. Пока
   плашка на экране, поднимаем и чат, и кнопку прокрутки над ней. */
body:has(.cc-window:not(.cc-invisible)) .woot-widget-bubble,
body:has(.cc-window:not(.cc-invisible)) .woot--bubble-holder{bottom:96px}
body:has(.cc-window:not(.cc-invisible)) #pageUpBtn.upButton{bottom:172px}
@media (max-width:767px){
  body:has(.cc-window:not(.cc-invisible)) .woot-widget-bubble,
  body:has(.cc-window:not(.cc-invisible)) .woot--bubble-holder{bottom:150px}
}

/* Ссылка под блоком СМИ на странице новостей. */
.ie-smi-more{margin:22px 0 0}
.ie-smi-more a{font-weight:600;color:var(--ie-navy);
  border-bottom:1px solid rgba(var(--ie-navy-rgb),.25);text-decoration:none!important}
.ie-smi-more a:hover{color:var(--ie-orange);border-bottom-color:var(--ie-orange)}

/* --- кнопка чата --------------------------------------------------------
   Своя кнопка рисуется сразу на каждой странице, настоящий виджет
   подтягивается по клику: так кружок виден с первой секунды, а куки чата
   пишутся только после действия человека. Размер и место — как у виджета
   Chatwoot, чтобы подмена была незаметной. */
.ie-chat-launcher{position:fixed;right:20px;bottom:20px;z-index:2147483000;
  width:64px;height:64px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--ie-orange);box-shadow:0 6px 18px rgba(var(--ie-navy-rgb),.28);
  display:flex;align-items:center;justify-content:center;
  transition:transform .18s ease,box-shadow .18s ease}
.ie-chat-launcher:hover{transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(var(--ie-navy-rgb),.34)}
.ie-chat-launcher:focus-visible{outline:3px solid var(--ie-navy);outline-offset:3px}
.ie-chat-launcher svg{width:30px;height:30px;fill:#fff}

/* Пока висит плашка про cookies, кнопка поднимается над ней — как и
   виджет, который её потом заменит. */
body:has(.cc-window:not(.cc-invisible)) .ie-chat-launcher{bottom:96px}
@media (max-width:767px){
  .ie-chat-launcher{right:16px;bottom:16px;width:56px;height:56px}
  .ie-chat-launcher svg{width:26px;height:26px}
  body:has(.cc-window:not(.cc-invisible)) .ie-chat-launcher{bottom:150px}
}

/* --- контакты -----------------------------------------------------------
   Была страница-визитка: имена абзацами, карта сбоку, форма с капчей.
   Человек с задачей не понимал, кому писать — по подбору или по
   разработке. Теперь способы связи карточками, а реквизиты и часы работы
   на видном месте: в промышленной закупке их спрашивают первыми. */
.ie-contacts-lead{max-width:64em;font-size:1.08rem;line-height:1.7;color:#3a3a3a;margin:0 0 30px}
.ie-contacts-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ie-contact-card{display:flex;flex-direction:column;gap:10px;padding:26px 28px;background:#fff;
  border:1px solid var(--ie-border);border-radius:18px}
.ie-contact-kind{font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ie-orange)}
.ie-contact-note{margin:0;font-size:.95rem;line-height:1.55;color:var(--ie-text-muted)}
.ie-contact-person{margin:0;font-size:1.02rem;line-height:1.6;color:var(--ie-navy)}
.ie-contact-person a{color:var(--ie-navy);border-bottom:1px solid rgba(var(--ie-navy-rgb),.25);
  text-decoration:none!important}
.ie-contact-person a:hover{color:var(--ie-orange);border-bottom-color:var(--ie-orange)}

.ie-contacts-subtitle{margin:52px 0 18px;font-size:1.7rem;font-weight:700;color:var(--ie-navy)}
.ie-contacts-place{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:22px;
  align-items:start}
.ie-contacts-address p{margin:0 0 12px;line-height:1.65;color:#3a3a3a}
.ie-contacts-address a{color:var(--ie-orange)}
.ie-contacts-map iframe{display:block;border-radius:18px;border:1px solid var(--ie-border-soft)}

/* Кнопка разблокировки карты и ссылка на маршрут — только для телефона.
   На широком экране карта и так под курсором, а маршрут строят с карты.
   Правила показа лежат в блоке max-width:767px ниже. */
.ie-map-unlock,
.ie-map-route{display:none}

.ie-requisites{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2px;
  border:1px solid var(--ie-border-soft);border-radius:18px;overflow:hidden;
  background:var(--ie-border-soft)}
.ie-requisites>div{display:flex;flex-direction:column;gap:6px;padding:20px 22px;background:#fff}
.ie-requisites span{font-size:.84rem;color:var(--ie-text-muted)}
.ie-requisites b{font-size:1rem;font-weight:600;color:var(--ie-navy);overflow-wrap:anywhere}
.ie-requisites a{color:var(--ie-navy)}

.ie-contacts-form{max-width:64em;padding-bottom:60px}
@media (max-width:767px){
  .ie-contacts-form{padding-bottom:40px}
}
.ie-contacts-consent{margin:14px 0 0;font-size:.86rem;line-height:1.55;color:var(--ie-text-muted)}
.ie-contacts-consent a{color:var(--ie-orange)}

@media (max-width:991px){
  .ie-contacts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ie-contacts-place{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:767px){
  .ie-contacts-grid{grid-template-columns:minmax(0,1fr)}
  .ie-contacts-subtitle{font-size:1.35rem;margin-top:38px}
}

/* Иконка на карточке способа связи: сразу видно, о чём карточка,
   до чтения подписи. */
.ie-contact-icon{display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:14px;background:var(--ie-bg-soft)}
.ie-contact-icon svg{width:26px;height:26px;fill:var(--ie-orange);display:block}

/* --- форма обратной связи ------------------------------------------------
   Согласие теперь галочка внутри формы, а не абзац под ней: раньше он
   слипался с полями и читался как подпись к последнему из них. Кнопка
   отделена воздухом и подписью про время ответа. */
.ie-form{max-width:64em}
.ie-form-ok{padding:16px 20px;margin-bottom:18px;border-radius:12px;
  background:rgba(46,160,67,.08);border:1px solid rgba(46,160,67,.35);color:#1f7a33}
.ie-form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.ie-form-field{margin-bottom:18px}
.ie-form-field label{display:block;margin-bottom:8px;font-size:.95rem;color:var(--ie-navy)}
.ie-form-req{color:var(--ie-orange);margin-left:2px}
.ie-form .form-control,.ie-auth .form-control{width:100%;padding:13px 16px;font-size:1rem;line-height:1.4;
  border:1px solid var(--ie-border);border-radius:12px;background:#fff;color:#222;
  transition:border-color .18s ease,box-shadow .18s ease}
.ie-form .form-control:focus,.ie-auth .form-control:focus{outline:none;border-color:var(--ie-orange);
  box-shadow:0 0 0 3px rgba(239,134,51,.18)}
.ie-form textarea.form-control{resize:vertical;min-height:150px}
.ie-auth .ie-form-field{margin-bottom:16px}
.ie-auth .ie-form-hint{display:block;margin-top:6px;color:var(--ie-text-muted)}
.ie-auth-policy{margin:10px 0 0;font-size:.9rem;line-height:1.55;color:var(--ie-text-muted)}
.ie-auth-policy a{color:var(--ie-orange)}
/* Поле-ловушка для ботов: человеку его быть не должно ни видно, ни слышно. */
.ie-form-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.ie-form-consent{display:flex;align-items:flex-start;gap:12px;margin:6px 0 0;
  font-size:.94rem;line-height:1.55;color:var(--ie-text-muted);cursor:pointer}
.ie-form-consent input{flex:0 0 auto;width:22px;height:22px;margin:1px 0 0;cursor:pointer;
  appearance:none;-webkit-appearance:none;background:#fff;border:1px solid var(--ie-border);
  border-radius:6px;position:relative;transition:border-color .16s ease,background .16s ease}
.ie-form-consent input:hover{border-color:var(--ie-orange)}
.ie-form-consent input:focus-visible{outline:2px solid var(--ie-orange);outline-offset:2px}
.ie-form-consent input:checked{background:var(--ie-orange);border-color:var(--ie-orange)}
/* Галочку рисуем сами: тема сбрасывает встроенный вид флажков, и
   стандартная отметка не появляется. */
.ie-form-consent input:checked::after{content:"";position:absolute;left:7px;top:3px;
  width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ie-form-consent a{color:var(--ie-orange)}
/* Необязательная галочка (рекламные сообщения) — тише обязательной: она
   про желание, а не про условие отправки. */
.ie-consent-optional{margin-top:10px;font-size:.88rem;opacity:.85}

/* Отказ сервера на форме: человек должен прочитать причину, а не гадать. */
.ie-form-error{margin:0 0 18px;padding:14px 16px;border-radius:10px;
  background:rgba(214,69,42,.08);border:1px solid rgba(214,69,42,.35);
  color:var(--ie-text);font-size:.95rem;line-height:1.5}
.ie-form-error p{margin:0}

/* Тёмная форма заявки: приглушённый серый на ней почти не читается,
   а согласие человек должен прочитать — в этом весь его смысл. */
.callbackForm .ie-form-consent,
.callbackForm .ie-form-consent-text{color:rgba(255,255,255,.86)}
.callbackForm .ie-consent-optional{opacity:1;color:rgba(255,255,255,.66)}
/* Сам квадратик на тёмной форме тоже должен быть тёмным: белый 22 px
   ярче полей ввода и выше строки текста — он выпирал из строки согласия.
   Делаем в тон полю, на пиксель меньше и вровень с текстом. */
.callbackForm .ie-form-consent{align-items:center}
.callbackForm .ie-form-consent input{width:18px;height:18px;margin:0;border-radius:5px;
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.30)}
.callbackForm .ie-form-consent input:hover{border-color:var(--ie-orange);
  background:rgba(255,255,255,.10)}
.callbackForm .ie-form-consent input:checked{background:var(--ie-orange);
  border-color:var(--ie-orange)}
.callbackForm .ie-form-consent input:checked::after{left:5px;top:2px;width:5px;height:9px}

.ie-form-actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-top:26px}
.ie-form-actions .btn{display:inline-flex;align-items:center;justify-content:center;
  height:auto;min-height:50px;padding:12px 36px;font-size:1rem;line-height:1.2;
  text-align:center}
.ie-form-hint{font-size:.9rem;color:var(--ie-text-muted)}

@media (max-width:767px){
  .ie-form-row{grid-template-columns:minmax(0,1fr);gap:0}
  .ie-form-actions{gap:12px}
}

/* --- поиск --------------------------------------------------------------
   Стандартная страница поиска — голое поле, список ссылок и подсказка про
   операторы and/or/not. Здесь: крупное поле с примером запроса, частые
   запросы под ним, товары сеткой, остальное списком с пометкой типа. */
.ie-search{padding-bottom:60px}
.ie-search-form{display:flex;gap:12px;margin:8px 0 14px;max-width:64em}
.ie-search-input{flex:1 1 auto;min-width:0;padding:15px 18px;font-size:1.05rem;
  border:1px solid var(--ie-border);border-radius:14px;background:#fff;color:#222;
  transition:border-color .18s ease,box-shadow .18s ease}
.ie-search-input:focus{outline:none;border-color:var(--ie-orange);
  box-shadow:0 0 0 3px rgba(239,134,51,.18)}
.ie-search-form .btn{display:inline-flex;align-items:center;justify-content:center;
  height:auto;min-height:54px;padding:12px 34px;font-size:1rem;line-height:1.2}

.ie-search-hints{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  font-size:.94rem;color:var(--ie-text-muted);margin-bottom:26px}
.ie-search-hints a{padding:6px 14px;border:1px solid var(--ie-border);border-radius:20px;
  color:var(--ie-navy);text-decoration:none!important;background:#fff;
  transition:border-color .16s ease,color .16s ease}
.ie-search-hints a:hover{border-color:var(--ie-orange);color:var(--ie-orange)}

.ie-search-idle{max-width:60em;font-size:1.05rem;line-height:1.7;color:#3a3a3a}
.ie-search-idle a{color:var(--ie-orange)}

.ie-search-summary{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:12px;padding-bottom:14px;margin-bottom:24px;border-bottom:1px solid var(--ie-border-soft);
  font-size:1.02rem;color:#3a3a3a}
.ie-search-sort{font-size:.95rem;color:var(--ie-text-muted)}
.ie-search-sort b{color:var(--ie-navy);margin-right:12px}
.ie-search-sort a{color:var(--ie-orange);margin-right:12px}

.ie-search-subtitle{margin:34px 0 16px;font-size:1.5rem;font-weight:700;color:var(--ie-navy)}
.ie-search-goods{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.ie-search-good{display:flex;flex-direction:column;gap:12px;padding:18px;background:#fff;
  border:1px solid var(--ie-border);border-radius:16px;text-decoration:none!important;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.ie-search-good:hover{border-color:var(--ie-orange);transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(var(--ie-navy-rgb),.10)}
.ie-search-good-pic{display:block;background:var(--ie-bg-soft);border-radius:12px;overflow:hidden}
.ie-search-good-pic img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain}
.ie-search-good-name{font-size:1rem;font-weight:600;line-height:1.35;color:var(--ie-navy)}
.ie-search-good:hover .ie-search-good-name{color:var(--ie-orange)}

.ie-search-list{display:grid;gap:14px}
.ie-search-item{padding:20px 22px;background:#fff;border:1px solid var(--ie-border-soft);
  border-radius:16px}
.ie-search-kind{display:inline-block;margin-bottom:8px;padding:3px 10px;border-radius:12px;
  background:var(--ie-bg-soft);font-size:.78rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ie-orange)}
.ie-search-item h3{margin:0 0 8px;font-size:1.12rem;font-weight:600;line-height:1.35}
.ie-search-item h3 a{color:var(--ie-navy);text-decoration:none!important}
.ie-search-item h3 a:hover{color:var(--ie-orange)}
.ie-search-snippet{margin:0;font-size:.97rem;line-height:1.6;color:#3a3a3a}
.ie-search-snippet b{background:rgba(239,134,51,.18);font-weight:600;padding:0 2px;border-radius:3px}

.ie-search-empty{max-width:60em;padding:26px 28px;border:1px solid var(--ie-border-soft);
  border-radius:16px;background:var(--ie-bg-soft)}
.ie-search-empty-lead{margin:0 0 12px;font-size:1.1rem;font-weight:600;color:var(--ie-navy)}
.ie-search-empty ul{margin:0 0 14px;padding-left:20px;line-height:1.7;color:#3a3a3a}
.ie-search-empty a{color:var(--ie-orange)}
/* --- постраничник --------------------------------------------------------
   Стандартный печатал подсказки про клавиши и слово «Страницы»; здесь
   только то, что нужно: назад, номера, вперёд. */
.ie-pager{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:32px}
.ie-pager-num,.ie-pager-step{display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;height:44px;padding:0 14px;border:1px solid var(--ie-border);border-radius:12px;
  background:#fff;color:var(--ie-navy);font-size:1rem;text-decoration:none!important;
  transition:border-color .16s ease,color .16s ease}
.ie-pager-num:hover,.ie-pager-step:hover{border-color:var(--ie-orange);color:var(--ie-orange)}
.ie-pager-num.is-current{background:var(--ie-orange);border-color:var(--ie-orange);color:#fff;
  font-weight:600}
.ie-pager-step.is-off{color:var(--ie-text-muted);border-color:var(--ie-border-soft);
  cursor:default;pointer-events:none}
.ie-pager-gap{padding:0 2px;color:var(--ie-text-muted)}
@media (max-width:767px){
  .ie-pager-num,.ie-pager-step{min-width:40px;height:40px;padding:0 10px;font-size:.95rem}
}

@media (max-width:767px){
  .ie-search-form{flex-direction:column}
  .ie-search-form .btn{width:100%}
  .ie-search-subtitle{font-size:1.28rem}
}

/* --- вход и регистрация -------------------------------------------------
   Стандартные формы Битрикса — таблицы без оформления и заголовок
   «Пожалуйста, авторизуйтесь». Здесь карточка с объяснением, зачем нужен
   аккаунт: на промышленном сайте это не праздный вопрос. */
.ie-auth{display:flex;justify-content:center;padding:10px 0 60px}
.ie-auth-box{width:100%;max-width:560px;padding:34px 36px;background:#fff;
  border:1px solid var(--ie-border);border-radius:20px;
  box-shadow:0 16px 36px rgba(var(--ie-navy-rgb),.07)}
.ie-auth-title{margin:0 0 10px;font-size:1.7rem;font-weight:700;color:var(--ie-navy)}
.ie-auth-note{margin:0 0 24px;font-size:.98rem;line-height:1.6;color:var(--ie-text-muted)}
.ie-auth-error{margin-bottom:18px}
.ie-auth-remember{display:flex;align-items:center;gap:10px;margin:4px 0 0;
  font-size:.95rem;color:var(--ie-text-muted);cursor:pointer}
.ie-auth-remember input{width:20px;height:20px;appearance:none;-webkit-appearance:none;
  background:#fff;border:1px solid var(--ie-border);border-radius:6px;position:relative;cursor:pointer}
.ie-auth-remember input:checked{background:var(--ie-orange);border-color:var(--ie-orange)}
.ie-auth-remember input:checked::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ie-auth-link{color:var(--ie-orange);font-size:.95rem}
.ie-auth-switch{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--ie-border-soft);
  font-size:.98rem;color:var(--ie-text-muted)}
.ie-auth-switch a{color:var(--ie-orange);font-weight:600}
.ie-auth-social{margin-top:22px;padding-top:20px;border-top:1px solid var(--ie-border-soft)}
.ie-auth-social-title{display:block;margin-bottom:12px;font-size:.9rem;color:var(--ie-text-muted)}
/* Кнопка провайдера. Ростом и радиусом совпадает с полями формы: вход
   паролем и вход по учётной записи — равные способы, а не главный и
   запасной. */
/* Селектор с .ie-auth — в теме ссылки внутри карточки оранжевые и с
   подчёркиванием, а кнопка провайдера ссылкой выглядеть не должна. */
a.ie-auth-social-btn,
a.ie-auth-social-btn:hover,
a.ie-auth-social-btn:focus,
a.ie-auth-social-btn span{color:var(--ie-navy);text-decoration:none}
a.ie-auth-social-btn{display:flex;align-items:center;justify-content:center;gap:12px;
  width:100%;min-height:50px;padding:12px 18px;background:#fff;border:1px solid var(--ie-border);
  border-radius:12px;font-size:1rem;font-weight:600;
  transition:border-color .15s,box-shadow .15s}
a.ie-auth-social-btn:hover{border-color:var(--ie-navy);
  box-shadow:0 6px 16px rgba(var(--ie-navy-rgb),.08)}
.ie-auth-social-mark{display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;font-size:1rem;font-weight:700;line-height:1;color:#fff}
.ie-auth-social-ya .ie-auth-social-mark{background:#fc3f1d;color:#fff}
.ie-auth-social-note{margin:10px 0 0;font-size:.86rem;line-height:1.5;color:var(--ie-text-muted)}
.ie-auth .ie-form-actions{margin-top:22px}
.ie-auth .ie-form-hint{font-size:.86rem}

@media (max-width:767px){
  .ie-auth-box{padding:24px 20px;border-radius:16px}
  .ie-auth-title{font-size:1.4rem}
}

/* Стрелки карусели разделов на телефоне.
   Замер 16.08.2026: на ширине 390 правая стрелка вылезала за край экрана на
   4 пикселя и давала горизонтальную прокрутку всей страницы. Причина — в
   стилях компонента у стрелок отрицательные внешние отступы, рассчитанные
   на широкий экран, а задуманное для телефона положение (обе стрелки внизу
   по центру, под витриной) до них не доезжало. Возвращаем задуманное. */
@media (max-width:575.98px){
  .categories-slider-button-prev.swiper-button-prev,
  .categories-slider-button-next.swiper-button-next{
    top:auto!important;bottom:0!important;left:50%!important;right:auto!important;
    margin-top:0!important;margin-right:0!important}
  .categories-slider-button-prev.swiper-button-prev{margin-left:-60px!important}
  .categories-slider-button-next.swiper-button-next{margin-left:15px!important}
}

/* ============================ ЛИЧНЫЙ КАБИНЕТ ============================
   Две колонки: слева кто вошёл и разделы, справа содержимое. Раньше меню
   было списком ссылок в рамке, а содержимое — второй рамкой рядом; на
   широком экране это выглядело как две пустые коробки. */
.ie-cab{display:grid;grid-template-columns:280px minmax(0,1fr);gap:28px;
  max-width:1180px;margin:0 auto;padding:8px 0 60px}
.ie-cab-side{display:flex;flex-direction:column;gap:16px}
.ie-cab-who{display:flex;flex-direction:column;gap:4px;padding:18px 20px;background:#fff;
  border:1px solid var(--ie-border);border-radius:16px}
.ie-cab-who-name{font-size:1.05rem;font-weight:700;color:var(--ie-navy)}
.ie-cab-who-company{font-size:.95rem;color:var(--ie-navy)}
.ie-cab-who-mail{font-size:.88rem;color:var(--ie-text-muted);word-break:break-all}
.ie-cab-nav{display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--ie-border);border-radius:16px;overflow:hidden}
.ie-cab-nav-item{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 20px;font-size:.98rem;color:var(--ie-navy);text-decoration:none;
  border-bottom:1px solid var(--ie-border-soft)}
.ie-cab-nav-item:last-child{border-bottom:none}
.ie-cab-nav-item:hover{background:var(--ie-bg-soft,#f7f8fa);color:var(--ie-navy);text-decoration:none}
.ie-cab-nav-item.is-current{background:var(--ie-bg-soft,#f7f8fa);font-weight:600;
  box-shadow:inset 3px 0 0 var(--ie-orange)}
.ie-cab-nav-note{min-width:24px;padding:1px 8px;border-radius:999px;text-align:center;
  font-size:.82rem;background:var(--ie-border-soft);color:var(--ie-text-muted)}
.ie-cab-nav-note.is-warn{background:var(--ie-orange);color:#fff}
.ie-cab-nav-exit{color:var(--ie-text-muted)}

.ie-cab-main{min-width:0}
.ie-cab-title{margin:0 0 8px;font-size:1.9rem;font-weight:700;color:var(--ie-navy)}
.ie-cab-lead{margin:0 0 24px;font-size:1rem;line-height:1.6;color:var(--ie-text-muted)}

/* Плитки обзора: число крупно, под ним — что оно значит и что дальше. */
.ie-cab-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:24px}
.ie-cab-tile{display:flex;flex-direction:column;gap:4px;padding:20px;background:#fff;
  border:1px solid var(--ie-border);border-radius:16px}
.ie-cab-tile.is-warn{border-color:var(--ie-orange)}
.ie-cab-tile-num{font-size:1.9rem;font-weight:700;line-height:1.1;color:var(--ie-navy)}
.ie-cab-tile-name{font-size:.95rem;color:var(--ie-navy)}
.ie-cab-tile-note{font-size:.85rem;line-height:1.45;color:var(--ie-text-muted)}
.ie-cab-tile-link{margin-top:auto;padding-top:12px;font-size:.92rem;color:var(--ie-orange)}

.ie-cab-card{padding:24px;margin-bottom:20px;background:#fff;
  border:1px solid var(--ie-border);border-radius:16px}
.ie-cab-card-warn{border-color:var(--ie-orange)}
.ie-cab-card-title{margin:0 0 12px;font-size:1.2rem;font-weight:700;color:var(--ie-navy)}
.ie-cab-card-text{margin:0 0 14px;font-size:.98rem;line-height:1.6;color:var(--ie-text-muted)}
.ie-cab-card-text a{color:var(--ie-orange)}

.ie-cab-order-line{display:flex;flex-wrap:wrap;gap:14px;align-items:baseline;margin:0 0 10px}
.ie-cab-order-num{font-weight:700;color:var(--ie-navy)}
.ie-cab-order-date,.ie-cab-order-state{font-size:.95rem;color:var(--ie-text-muted)}

.ie-cab-empty{padding:22px;background:var(--ie-bg-soft,#f7f8fa);border-radius:14px}
.ie-cab-empty-what{margin:0 0 8px;font-size:1.05rem;font-weight:600;color:var(--ie-navy)}
.ie-cab-empty-why{margin:0 0 16px;font-size:.96rem;line-height:1.6;color:var(--ie-text-muted)}
.ie-cab-empty-actions{display:flex;flex-wrap:wrap;gap:12px}

.ie-cab-tabs{display:flex;gap:8px;margin-bottom:20px}
.ie-cab-tab{padding:9px 18px;border:1px solid var(--ie-border);border-radius:999px;
  font-size:.95rem;color:var(--ie-navy);text-decoration:none;background:#fff}
.ie-cab-tab:hover{border-color:var(--ie-navy);color:var(--ie-navy);text-decoration:none}
.ie-cab-tab.is-current{background:var(--ie-navy);border-color:var(--ie-navy);color:#fff}

.ie-cab-logins{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:10px}
.ie-cab-login{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;padding-bottom:10px;
  border-bottom:1px solid var(--ie-border-soft)}
.ie-cab-login:last-child{border-bottom:none;padding-bottom:0}
.ie-cab-login-name{min-width:120px;font-weight:600;color:var(--ie-navy)}
.ie-cab-login-state{font-size:.93rem;color:var(--ie-text-muted)}
.ie-cab-login-action{margin-left:auto;font-size:.93rem;color:var(--ie-orange)}

.ie-cab-form-part{margin:22px 0 12px;font-size:.95rem;font-weight:700;color:var(--ie-navy);
  text-transform:uppercase;letter-spacing:.04em}
.ie-cab-pass{margin-top:18px}
.ie-cab-pass summary{cursor:pointer;font-size:.98rem;color:var(--ie-orange);margin-bottom:12px}
.ie-cab-form .ie-form-field input[type="text"],
.ie-cab-form .ie-form-field input[type="email"],
.ie-cab-form .ie-form-field input[type="tel"],
.ie-cab-form .ie-form-field input[type="password"]{width:100%}

/* Пункты меню — не ссылки в тексте: тема красит все ссылки оранжевым и
   подчёркивает, а меню от этого выглядит как список сносок. */
a.ie-cab-nav-item,a.ie-cab-nav-item:hover,a.ie-cab-nav-item:focus{
  color:var(--ie-navy);text-decoration:none}
a.ie-cab-nav-exit,a.ie-cab-nav-exit:hover{color:var(--ie-text-muted);text-decoration:none}
a.ie-cab-tile-link,a.ie-cab-tile-link:hover{color:var(--ie-orange);text-decoration:none}
a.ie-cab-tile-link:hover{text-decoration:underline}

/* Поля реквизитов рисует компонент Битрикса, класса нашей формы у них нет —
   поэтому равняем по типу поля, иначе они выглядят чужими рядом с нашими. */
.ie-cab-form input[type="text"],
.ie-cab-form input[type="email"],
.ie-cab-form input[type="tel"],
.ie-cab-form input[type="password"],
.ie-cab-form textarea{width:100%;padding:13px 16px;font-size:1rem;line-height:1.4;
  color:var(--ie-navy);background:#fff;border:1px solid var(--ie-border);border-radius:12px}
.ie-cab-form input[type="text"]:focus,
.ie-cab-form input[type="email"]:focus,
.ie-cab-form input[type="tel"]:focus,
.ie-cab-form input[type="password"]:focus{outline:none;border-color:var(--ie-orange)}

/* Переключатель «физлицо / организация». Не галочка: выбор из двух равных
   вариантов, и человек должен видеть оба сразу, а не догадываться, что
   означает снятая галочка. */
.ie-switch{display:inline-flex;padding:4px;background:var(--ie-bg-soft,#f7f8fa);
  border:1px solid var(--ie-border);border-radius:999px}
.ie-switch-opt{position:relative;margin:0;padding:9px 20px;border-radius:999px;cursor:pointer;
  font-size:.95rem;color:var(--ie-text-muted);transition:background .15s,color .15s}
.ie-switch-opt input{position:absolute;opacity:0;width:0;height:0}
.ie-switch-opt.is-on{background:#fff;color:var(--ie-navy);font-weight:600;
  box-shadow:0 2px 8px rgba(var(--ie-navy-rgb),.08)}
.ie-switch-opt:focus-within{outline:2px solid var(--ie-orange);outline-offset:2px}
.ie-switch-hint{display:block;margin:10px 0 0}
.ie-cab-company.is-hidden{display:none}

@media (max-width:991.98px){
  .ie-cab{grid-template-columns:1fr;gap:20px;padding:8px 16px 48px}
  .ie-switch{width:100%}
  .ie-switch-opt{flex:1;text-align:center;padding:9px 12px}
  .ie-cab-tiles{grid-template-columns:1fr}
  .ie-cab-title{font-size:1.5rem}
}

/* ======================== СОГЛАСИЕ НА COOKIES ==========================
   Три кнопки вместо одной: принять, отклонить необязательные, настроить.
   Отказ должен быть таким же заметным, как согласие, — поэтому «Отклонить»
   стоит рядом и той же величины, а не спрятан в настройках. */
.ie-cookie-bar{position:fixed;left:0;right:0;bottom:0;z-index:9000;
  display:flex;flex-wrap:wrap;align-items:center;gap:18px;
  padding:18px 28px;background:var(--ie-navy);color:#fff;
  box-shadow:0 -6px 24px rgba(0,0,0,.18)}
.ie-cookie-text{flex:1 1 420px;margin:0;font-size:.95rem;line-height:1.55;color:#fff}
.ie-cookie-text a{color:#fff;text-decoration:underline}
.ie-cookie-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.ie-cookie-actions .btn{min-height:42px;padding:10px 20px;font-size:.95rem}
.btn.ie-cookie-btn-plain,.btn.ie-cookie-btn-plain:hover{background:transparent;color:#fff;
  border:1px solid rgba(255,255,255,.55)}
.ie-cookie-link{background:none;border:none;padding:10px 6px;font-size:.95rem;
  color:#fff;text-decoration:underline;cursor:pointer}

/* Окно настроек. Категории — с объяснением своими словами: человек должен
   понимать, от чего отказывается, а не выбирать вслепую. */
.ie-cookie-panel{position:fixed;inset:0;z-index:9100;display:flex;align-items:center;
  justify-content:center;padding:20px;background:rgba(var(--ie-navy-rgb),.55)}
/* Правило display у класса сильнее браузерного [hidden]{display:none}: без
   этих строк спрятанное окно настроек продолжает перехватывать нажатия и
   полоса под ним не кликается. */
.ie-cookie[hidden],.ie-cookie-panel[hidden]{display:none}
.ie-chat-launcher[hidden]{display:none}
.ie-cookie-panel-box{width:100%;max-width:560px;max-height:88vh;overflow:auto;
  padding:28px;background:#fff;border-radius:20px}
.ie-cookie-panel-title{margin:0 0 18px;font-size:1.3rem;font-weight:700;color:var(--ie-navy)}
.ie-cookie-cat{display:flex;gap:14px;align-items:flex-start;padding:14px 0;
  border-bottom:1px solid var(--ie-border-soft);cursor:pointer}
.ie-cookie-cat.is-locked{cursor:default}
.ie-cookie-cat input{margin-top:3px;width:20px;height:20px;flex:0 0 auto;
  appearance:none;-webkit-appearance:none;background:#fff;border:1px solid var(--ie-border);
  border-radius:6px;position:relative;cursor:pointer}
.ie-cookie-cat input:checked{background:var(--ie-orange);border-color:var(--ie-orange)}
.ie-cookie-cat input:checked::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ie-cookie-cat input:disabled{opacity:.6;cursor:default}
.ie-cookie-cat-body{display:flex;flex-direction:column;gap:4px}
.ie-cookie-cat-name{font-weight:600;color:var(--ie-navy)}
.ie-cookie-cat-text{font-size:.92rem;line-height:1.5;color:var(--ie-text-muted)}
.ie-cookie-panel-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.ie-cookie-panel-actions .ie-cookie-link{color:var(--ie-orange)}
.ie-cookie-panel-actions .btn.ie-cookie-btn-plain,
.ie-cookie-panel-actions .btn.ie-cookie-btn-plain:hover{color:var(--ie-navy);
  border-color:var(--ie-border)}

@media (max-width:767px){
  .ie-cookie-bar{padding:16px 18px;gap:12px}
  .ie-cookie-actions{width:100%}
  .ie-cookie-actions .btn,.ie-cookie-actions .ie-cookie-link{flex:1 1 auto;text-align:center}
  .ie-cookie-panel-box{padding:20px;border-radius:16px}
}

/* ─── Телефон: попасть пальцем и прочитать ────────────────────────────────
   Замер 23.08.2026 (tests/audit/mobile_audit.py): на пятнадцати страницах
   ссылки высотой 17-21 px — телефон в подвале, «Назад», ссылки карточек.
   Рекомендация Apple и Google — 44 px, и это не придирка: по цели в 19 px
   палец промахивается, человек попадает в соседнюю ссылку и уходит не туда.

   Всё внутри max-width:767px и трогает только собственные классы. Широкий
   экран не задет — проверяется слепком (tests/audit/desktop_baseline.py).   */
@media (max-width:767px){
  /* Ссылка-телефон, «Назад», ссылки СМИ и кабинета: тянем по высоте
     отступами, размер шрифта не меняем — иначе поедет вёрстка подвала. */
  a.phone,
  a.goBack,
  a.ie-smi-link,
  a.ie-auth-link,
  a.catalogItem-description-link,
  a.ie-calc-quest{
    display:inline-flex;
    align-items:center;
    min-height:44px;
    padding-top:6px;
    padding-bottom:6px;
  }

  /* ─── Подвал на телефоне ───────────────────────────────────────────────
     Замер 23.08.2026: подвал на телефоне выше десктопного — 1359 px против
     1036, при том что ссылок в нём было меньше. Всё сложено в колонку с
     десктопными отступами. Здесь только раскладка: содержимое одинаковое. */

  /* Контакты занимали 867 px из 1858: у каждой строки общий отступ абзаца
     в 15 px сверху и снизу. На телефоне это лишняя треть подвала. */
  .pageFooter .contacts-info{margin:1px 0;line-height:1.45}
  .pageFooter .contacts-title{margin:14px 0 4px}
  .pageFooter .contacts-info-tel a,
  .pageFooter .contacts-info-mail a{min-height:44px}
  /* Между блоками контактов на десктопе по 30 px пустоты сверху и снизу.
     На телефоне блоки идут друг под другом, и эти отступы складываются. */
  .pageFooter .contacts-block{margin:16px 0}
  .pageFooter-contact{margin:8px 0}
  .pageFooter .socialMenu{margin-top:16px}

  /* Навигация: две колонки вместо простыни, вложенные списки без отступа. */
  .ie-footer-nav .footerMenu{
    display:grid;grid-template-columns:1fr 1fr;gap:4px 18px;
    padding:0;margin:18px 0 0;list-style:none;
  }
  /* У пункта меню снизу 30 px внутреннего отступа — на десктопе это воздух
     между колонками, на телефоне четыре пустые полосы поперёк экрана. */
  .ie-footer-nav .footerMenu > li{margin:0 0 10px;padding-bottom:0}
  .ie-footer-nav .footerMenu ul{padding:0;margin:2px 0 0;list-style:none}
  .ie-footer-nav .footerMenu ul li{margin:0}
  .ie-footer-nav .footerMenu a{
    display:flex;align-items:center;min-height:44px;font-size:.94rem;
  }
  .ie-footer-nav .footerMenu > li > a{font-weight:600}


  /* ─── Карта на телефоне ───────────────────────────────────────────────
     Замер 23.08.2026 на 390 px: карточка с адресом 279 px шириной лежала
     поверх карты 358 px — от карты оставались поля по краям, а метка
     компании пряталась под карточкой. Смысл блока пропадал.

     Слои на узком экране разбираем в стопку: карта сверху, адрес под ней.
     Встроенные стили в разметке рассчитаны на широкий экран, поэтому здесь
     без !important не обойтись — это единственная причина.

     Карта до первого нажатия не ловит палец: она занимает половину экрана,
     и прокрутка страницы вставала, как только палец попадал в неё. */
  .ie-map-frame{--ie-map-h:clamp(220px,34svh,320px);position:relative}
  .ie-map-frame iframe{height:var(--ie-map-h) !important;pointer-events:none}
  .ie-map-frame.ie-map-on iframe{pointer-events:auto}

  .ie-map-unlock{
    display:flex;position:absolute;left:0;right:0;top:0;height:var(--ie-map-h);
    align-items:flex-end;justify-content:center;padding:0 0 30px;
    border:0;background:transparent;font:inherit;cursor:pointer;
  }
  .ie-map-frame.ie-map-on .ie-map-unlock{display:none}
  .ie-map-unlock span{
    display:flex;align-items:center;min-height:44px;padding:0 16px;
    border-radius:999px;background:rgba(29,33,38,.72);color:#fff;font-size:.86rem;
  }

  /* Карточка с адресом уходит из-под наложения вниз, под карту. */
  .ie-map-card{
    position:static !important;width:auto !important;max-width:none !important;
    padding:16px 18px !important;border-radius:0 !important;
    background:#fff !important;box-shadow:none !important;border:0 !important;
    -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  }

  .ie-map-route{display:block;margin:12px 0 0}
  .ie-map-route a{
    display:inline-flex;align-items:center;min-height:44px;
    font-weight:600;color:var(--ie-accent,#ef8633);text-decoration:none;
  }

  /* Ссылка «Условия доставки и оплаты» в блоке адреса стоит отдельной
     строкой — это не ссылка внутри предложения, её тянем до 44 px. */
  .ie-contacts-address a{display:inline-flex;align-items:center;min-height:44px}

  /* ─── Оставшиеся цели нажатия (M-9.3) ────────────────────────────────
     Замер 25.08.2026 по четырём страницам. Всё это самостоятельные цели,
     а не ссылки внутри предложения: их норма не исключает. */

  /* Точки-переключатели слайдера были 9x9 — попасть невозможно. Сам
     кружок оставляем прежним, растим только область нажатия. */
  .ie-prod-dots{gap:0}
  .ie-prod-dots .ie-prod-dot{
    min-width:44px;min-height:44px;padding:17px 17px;
    background-clip:content-box;border:0;
  }

  /* Заголовки-ссылки блоков и названия новостей. */
  .newsBlock h3 a,.news-item-name a,.newsList-item a.news-item-name,
  h2 > a,h3 > a{display:inline-flex;align-items:center;min-height:44px}

  /* Ссылки в таблице химий и в списках отраслей: строка списка целиком
     ведёт в раздел, значит это цель, а не текст со ссылкой. */
  .ie-chem-table td a,
  .industriesList li > a,.industries-list li > a{
    display:inline-flex;align-items:center;min-height:44px;
  }

  /* Кнопки не добирали двух-семи пикселей: «Заполнить опросный лист»,
     «Заказать» в плитках, «Перейти в каталог», кнопки полосы cookie. */
  .ie-cookie-actions .btn,.ie-cookie-actions button,.ie-cookie-text a,
  .pageContent a.btn,.pageContent button.btn,
  .col-12 > a.btn,.center-text > a.btn,
  .catalogItem a.btn,.catalogItem button.btn,
  a.btn.btn-info,a.btn.btn-default,
  .ie-section-empty a.btn{
    min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  }

  /* Поле количества в плитке товара. */
  .catalogItem-offers-quantity-field-wrap,
  .catalogItem-offers-quantity-field-wrap input{min-height:44px}

  /* Правовые ссылки идут по одной в строке — их можно тянуть до 44 px, не
     трогая типографику: это не ссылки внутри предложения. */
  .pageFooter-legalrow .pageFooter-copy a{
    display:flex;align-items:center;min-height:44px;margin:0;
  }
  .pageFooter-legalrow .pageFooter-copy{margin:0}
  .pageFooter-legalrow .rightText{text-align:left}

  /* Кнопка «Сделать заказ» в подвале: 42 px по высоте против нормы 44.
     Поймано мобильным слоем тестов после того, как кнопку вернули на
     телефон (она пряталась ради снятой полосы связи). */
  .pageFooter .ie-footer-cta .btn{min-height:44px;display:inline-flex;
    align-items:center;justify-content:center}

  /* Знак «Сколково» задан жёсткой высотой 54 px и на узком экране крупнее
     иконок соцсетей. Приводим к их размеру. */
  .pageFooter img[src*="sk-uchastnik"]{height:36px!important}

  /* Герой внутренних страниц. Устроен так: картинка 847 px лежит в потоке,
     а текстовый блок поднят на -370 px и ложится поверх её низа. Из-за этого
     на телефоне герой занимал 874 px при экране 844 — заголовок, описание и
     кнопка уходили под сгиб, а разделы каталога начинались со второго экрана.
     Режем картинку и пересчитываем подъём: ограничивать max-height нельзя —
     картинка пропадает совсем, а текст уезжает под шапку (проверено). */
  .heroUnit{min-height:0}
  /* Ход 3: на странице раздела баннер отодвигал витрину — 545 px из 940 до
     первого товара. Картинку ужимаем ещё, текст оставляем как есть. */
  .heroUnit-item > picture,
  .heroUnit-item > picture img{
    height:clamp(150px,20svh,200px);
    width:100%;
    object-fit:cover;
    object-position:center 40%;
  }
  .heroUnit-item-text{margin-top:-90px}

  /* Телефон и почта попадаются в тексте страниц без своего класса —
     на восьми страницах это ссылки высотой 19-21 px. По ним звонят и пишут
     с телефона чаще всего, поэтому тянем их отдельно, по адресу ссылки. */
  a[href^="tel:"],
  a[href^="mailto:"]{
    display:inline-flex;
    align-items:center;
    min-height:44px;
    padding-top:4px;
    padding-bottom:4px;
  }

  /* Мелкий текст: 12,5-12,8 px на подписи в шапке контактов и в карточке
     руководителя. С телефона это читается плохо, поднимаем до 14. */
  .ie-contact-kind{font-size:14px}
}

/* ═══════════════════════════════════════════════════════════════════════
   Подбор параметров и полоса над витриной
   ═══════════════════════════════════════════════════════════════════════
   Штатный подбор рисовал колонку галочек: 28 значений ёмкости, 21 форм
   фактор, «Тип химии» с единственным вариантом. Здесь списки стали чипами,
   числа — ползунками, а на телефоне подбор уехал в панель снизу, чтобы не
   отодвигать витрину за сгиб.
   Селекторы длиннее необходимого там, где спорят с темой: её таблицы
   стилей подключаются после нашей и при равной силе выигрывают. */

.ie-facets{
  background:#fff;
  border:1px solid var(--ie-border);
  border-radius:14px;
  padding:16px 16px 8px;
}
.ie-facets-engine-title{display:none}
.ie-facets-open{display:none}
.ie-facets-head{display:none}

.ie-facets-group{padding:0 0 14px}
.ie-facets-group + .ie-facets-group{
  border-top:1px solid #ededed;
  padding-top:14px;
}
.ie-facets-group-title{
  font-size:13px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--ie-navy);
  margin-bottom:10px;
}
.ie-facets-unit{font-weight:400;color:#8a8f94}

.ie-facets-chips,
.ie-facets-bands{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* Чип: сама метка и есть кнопка, галочка внутри не видна. */
.ie-facets .ie-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0;
  padding:0 12px;
  min-height:36px;
  border:1px solid #dfe1e4;
  border-radius:999px;
  background:#fff;
  font-size:14px;
  line-height:1.2;
  color:var(--ie-navy);
  cursor:pointer;
  transition:border-color .15s ease, background-color .15s ease;
}
.ie-facets .ie-chip:hover{border-color:var(--ie-orange-light)}
.ie-facets .ie-chip-input{
  position:absolute;
  width:1px;height:1px;
  opacity:0;
  pointer-events:none;
}
.ie-facets .ie-chip-count{
  font-size:12px;
  color:#9aa0a6;
}
.ie-facets .ie-chip:has(.ie-chip-input:checked),
.ie-facets .ie-chip.is-on{
  border-color:var(--ie-orange);
  background:rgba(var(--ie-orange-rgb),.10);
  font-weight:600;
}
.ie-facets .ie-chip:has(.ie-chip-input:checked) .ie-chip-count,
.ie-facets .ie-chip.is-on .ie-chip-count{color:var(--ie-orange)}
/* Вариант, которого нет в текущей выборке, гасим, но не прячем: исчезающие
   на глазах кнопки читаются как поломка. */
.ie-facets .ie-chip.disabled{
  opacity:.4;
  cursor:default;
  pointer-events:none;
}

/* ─── ползунок с двумя ручками ─── */

.ie-facets-range-fields{
  display:flex;
  gap:10px;
  margin-bottom:14px;
}
.ie-facets-field{
  display:flex;
  align-items:center;
  gap:6px;
  flex:1 1 0;
  margin:0;
  padding:0 10px;
  min-height:40px;
  border:1px solid #dfe1e4;
  border-radius:10px;
  background:#fff;
}
.ie-facets-field:focus-within{border-color:var(--ie-orange)}
.ie-facets-field-label{font-size:13px;color:#9aa0a6}
.ie-facets-field input{
  width:100%;
  min-width:0;
  border:0;
  padding:0;
  background:transparent;
  font-size:15px;
  color:var(--ie-navy);
}
.ie-facets-field input:focus{outline:none}

.ie-facets-slider{
  position:relative;
  height:24px;
  margin:0 10px 4px;
}
.ie-facets-slider-rail,
.ie-facets-slider-fill{
  position:absolute;
  top:50%;
  height:4px;
  margin-top:-2px;
  border-radius:2px;
}
.ie-facets-slider-rail{left:-10px;right:-10px;background:#e6e8ea}
.ie-facets-slider-fill{background:var(--ie-orange)}

/* Две ручки лежат на одной шкале: дорожки прозрачные и не ловят нажатия,
   ловят только сами ручки — иначе верхний ползунок перекрыл бы нижний. */
.ie-facets .ie-facets-slider-handle{
  position:absolute;
  left:-10px;
  width:calc(100% + 20px);
  top:0;
  height:24px;
  margin:0;
  padding:0;
  background:transparent;
  border:0;
  appearance:none;
  -webkit-appearance:none;
  pointer-events:none;
}
.ie-facets .ie-facets-slider-handle:focus{outline:none}
.ie-facets .ie-facets-slider-handle::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:20px;height:20px;
  border-radius:50%;
  background:#fff;
  border:2px solid var(--ie-orange);
  box-shadow:0 1px 4px rgba(0,0,0,.18);
  cursor:grab;
  pointer-events:auto;
}
.ie-facets .ie-facets-slider-handle::-moz-range-thumb{
  width:20px;height:20px;
  border-radius:50%;
  background:#fff;
  border:2px solid var(--ie-orange);
  box-shadow:0 1px 4px rgba(0,0,0,.18);
  cursor:grab;
  pointer-events:auto;
}
.ie-facets .ie-facets-slider-handle::-webkit-slider-runnable-track{background:transparent}
.ie-facets .ie-facets-slider-handle::-moz-range-track{background:transparent}
.ie-facets [data-role="facets-handle-min"]{z-index:3}
.ie-facets [data-role="facets-handle-max"]{z-index:2}

/* ─── подвал панели ─── */

.ie-facets-foot{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 0 8px;
  border-top:1px solid #ededed;
}
.ie-facets .ie-facets-apply{
  flex:1 1 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 18px;
  border-radius:10px;
  background:var(--ie-orange);
  color:#fff;
  font-size:15px;
  font-weight:600;
  text-decoration:none;
}
.ie-facets .ie-facets-apply:hover{background:var(--ie-orange-light);color:#fff}
.ie-facets .ie-facets-reset{
  order:2;
  min-height:44px;
  padding:0 6px;
  border:0;
  background:transparent;
  color:#8a8f94;
  font-size:14px;
  cursor:pointer;
}
.ie-facets .ie-facets-reset:hover{color:var(--ie-navy)}
.ie-facets-submit-hidden{
  position:absolute;
  width:1px;height:1px;
  opacity:0;
  pointer-events:none;
}

/* ─── полоса над витриной ─── */

.ie-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 18px;
  margin:0 0 18px;
  padding:10px 14px;
  background:#fff;
  border:1px solid var(--ie-border);
  border-radius:12px;
}
.ie-toolbar-sort,
.ie-toolbar-count{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
}
.ie-toolbar-count{margin-left:auto}
.ie-toolbar-caption{
  font-size:13px;
  color:#8a8f94;
  margin-right:2px;
}
.ie-toolbar a{
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-height:32px;
  padding:0 10px;
  border-radius:8px;
  font-size:14px;
  color:var(--ie-navy);
  text-decoration:none;
}
.ie-toolbar a:hover{background:#f2f3f4;color:var(--ie-navy)}
.ie-toolbar a.is-on{
  background:rgba(var(--ie-orange-rgb),.12);
  color:var(--ie-orange);
  font-weight:600;
}
.ie-toolbar-arrow{font-size:12px}

/* ─── телефон и планшет: подбор в панели снизу ─── */

@media (max-width:991.98px){
  .catalogSectionAside{margin-bottom:16px}
  .ie-facets{
    border:0;
    padding:0;
    background:transparent;
  }
  .ie-facets-open{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    min-height:48px;
    padding:0 16px;
    border:1px solid var(--ie-border);
    border-radius:12px;
    background:#fff;
    font-size:15px;
    font-weight:600;
    color:var(--ie-navy);
  }
  .ie-facets-open-icon{
    width:16px;height:12px;
    background:
      linear-gradient(var(--ie-navy),var(--ie-navy)) left 0 top 0/16px 2px no-repeat,
      linear-gradient(var(--ie-navy),var(--ie-navy)) left 0 top 5px/11px 2px no-repeat,
      linear-gradient(var(--ie-navy),var(--ie-navy)) left 0 top 10px/6px 2px no-repeat;
  }
  .ie-facets-open-count{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:22px;height:22px;
    padding:0 6px;
    border-radius:11px;
    background:var(--ie-orange);
    color:#fff;
    font-size:13px;
  }

  /* Сама панель. Пока закрыта — за нижним краем и не ловит нажатия. */
  .ie-facets .ie-facets-form{
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:1200;
    display:flex;
    flex-direction:column;
    max-height:86vh;
    padding:0;
    border-radius:18px 18px 0 0;
    background:#fff;
    box-shadow:0 -8px 30px rgba(0,0,0,.18);
    transform:translateY(101%);
    transition:transform .25s ease;
    visibility:hidden;
  }
  .ie-facets.is-open .ie-facets-form{
    transform:translateY(0);
    visibility:visible;
  }
  .ie-facets.is-open::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:1199;
    background:rgba(0,0,0,.45);
  }
  .ie-facets-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 18px 10px;
    border-bottom:1px solid #ededed;
  }
  .ie-facets-head-title{font-size:17px;font-weight:700;color:var(--ie-navy)}
  .ie-facets .ie-facets-close{
    width:44px;height:44px;
    margin-right:-10px;
    border:0;
    background:transparent;
    font-size:28px;
    line-height:1;
    color:#8a8f94;
  }
  .ie-facets-body{
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:14px 18px 0;
  }
  .ie-facets-foot{
    padding:12px 18px calc(12px + env(safe-area-inset-bottom));
    background:#fff;
  }
  /* Пока панель открыта, страница под ней не скроллится: иначе список
     уезжает под пальцем вместо самой панели. */
  body.ie-facets-lock{overflow:hidden}

  .ie-toolbar{
    margin-bottom:14px;
    padding:8px 10px;
    gap:6px 10px;
  }
  .ie-toolbar-count{margin-left:0;width:100%}
  .ie-toolbar-sort{width:100%;overflow-x:auto;flex-wrap:nowrap}
  .ie-toolbar-sort::-webkit-scrollbar{display:none}
  .ie-toolbar a{min-height:36px;white-space:nowrap}
}

/* Число и слово рядом с «Показать»: пока движок не пересчитал выборку,
   оба пустые, и кнопка читается просто «Показать». */
.ie-facets .ie-facets-apply-count:not(:empty){margin-left:5px}
.ie-facets .ie-facets-apply-count span + span{margin-left:4px}

/* На телефоне подразделы стояли столбиком: четыре кнопки по 43 px плюс
   отступы — 208 px до подбора, и первый товар начинался на 890 px при
   экране 844. Кладём их в одну прокручиваемую строку: витрина
   поднимается на экран, а все подразделы остаются доступны. */
@media (max-width:767.98px){
  .ie-subsections{
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:8px;
    margin-top:18px;
    padding-bottom:4px;
    scrollbar-width:none;
  }
  .ie-subsections::-webkit-scrollbar{display:none}
  .ie-subsection{
    flex:0 0 auto;
    /* 44 px по высоте — наш порог цели нажатия (M-9.3). При 9 px по
       вертикали чип выходил 40 px, и лента подразделов промахивалась. */
    min-height:44px;
    padding:0 14px;
    white-space:nowrap;
  }
  /* «Показывать по» на телефоне убираем: страницы листают пальцем, а
     полоса из-за него занимала две строки вместо одной. */
  .ie-toolbar-count{display:none}
}

/* Подпись только для программ чтения с экрана: стрелка «вниз» сама по себе
   ничего не сообщает голосом. Класса с таким именем в теме нет — 29.08.2026
   «по убыванию» вылезло в полосу сортировки обычным текстом. */
.ie-toolbar .visually-hidden{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}


/* ═══════════════════════════════════════════════════════════════════════
   Плитка товара на широком экране
   ═══════════════════════════════════════════════════════════════════════
   Замер 30.08.2026 на 1440 px: плитка 169×767 — пять колонок, в каждой
   девять строк характеристик простынёй, подписи переносятся в две строки,
   «Заказать» обрезано краем кнопки, а цены нет вовсе: блок с ценой тема
   прячет, и открыт он был только на телефоне — то есть двадцать шесть
   позиций с ценой из реестра на десктопе молчали.

   Правила ниже — только для широкого экрана: телефон разобран выше в
   своём медиа-блоке, и трогать его отсюда нельзя. */

@media (min-width:768px){

  /* Две колонки на планшете, четыре на широком экране. Пять колонок
     давали плитку в 169 px — колбу, в которую не влезает ни название, ни
     кнопка. */
  .catalogSection-wrap .row-xl-5 > [class*="col-"]{
    flex:0 0 50%;max-width:50%;
  }

  /* Плитка — колонка: описание тянется, действия прижаты к низу. У темы
     низ прибит абсолютно с запасом в 90 px, отчего пустое место внизу
     плитки жило своей жизнью. */
  .catalogSection-wrap .catalogItem{
    display:flex;flex-direction:column;padding-bottom:0;
  }
  .catalogSection-wrap .catalogItem-description{flex:1 1 auto;padding:14px 16px 10px}
  .catalogSection-wrap .catalogItem-offers{
    position:static;width:auto;margin-top:auto;padding:0 16px 16px;
  }

  /* Картинка квадратная и целиком в кадре. */
  .catalogSection-wrap .catalogItem-slider,
  .catalogSection-wrap .catalogItem-slider-block-wrap,
  .catalogSection-wrap .catalogItem-slider-block-image{height:auto}
  .catalogSection-wrap .catalogItem-slider-block-image img{
    aspect-ratio:1/1;object-fit:contain;width:100%;height:auto;
  }
  .catalogSection-wrap .catalogItem-slider{border-bottom:0;background:var(--ie-bg-soft)}

  /* Название в две строки: иначе плитки в ряду разной высоты и сетка
     рвётся на каждой строке товаров. */
  .catalogSection-wrap .catalogItem-description-name{margin:0 0 10px}
  .catalogSection-wrap .catalogItem .catalogItem-description-name a.catalogItem-description-link{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;font-size:.95rem;line-height:1.32;min-height:2.64em;
  }

  /* Характеристики чипами. Их теперь три и они выбраны по смыслу
     (см. simple.php): сколько держит, какой размер, какой ток. */
  .catalogSection-wrap .catalogItem-propslist{
    display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;
  }
  .catalogSection-wrap .catalogItem-propslist li{
    max-width:100%;margin:0;padding:5px 9px;border-radius:9px;
    background:var(--ie-bg-soft);
    font-size:.78rem;line-height:1.25;color:var(--ie-navy);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    font-variant-numeric:tabular-nums;
  }
  .catalogSection-wrap .catalogItem-propslist li strong{
    font-weight:500;color:var(--ie-text-muted);
  }

  /* Цена. Блок скрыт темой; открываем и здесь — иначе сумма из реестра
     видна только с телефона. */
  .catalogSection-wrap .catalogItem-offers-price-wrap{
    display:block;margin:0 0 12px;
  }
  .catalogSection-wrap .catalogItem-offers-price{
    font-size:1.05rem;line-height:1.2;font-weight:700;color:var(--ie-navy);
  }
  .catalogSection-wrap .catalogItem-offers-price span{
    display:none;   /* «(1 шт.)» рядом с ценой ничего не добавляет */
  }
  /* «По согласованию» — не сумма, и весом отличается от суммы. */
  .catalogSection-wrap .catalogItem-offers-price.ie-price-request{
    font-size:.86rem;font-weight:600;color:var(--ie-text-muted);
  }

  /* Действие одно и во всю ширину. Количество набирают в карточке товара:
     в плитке поле съедало половину строки, и кнопка обрезалась.

     Прячем счётчик темы ВЕЗДЕ, а не только внутри .catalogSection-wrap.
     Обёртка есть у страницы раздела, но не у витрины новинок на /catalog/
     (она лежит в .ie-cat-new-inner), и там счётчик темы оставался видимым
     рядом с нашим собственным: два одинаковых «минус-число-плюс» подряд,
     причём с разными числами — счётчик темы статичен и всегда показывает
     минимальную партию, а наш меняется от нажатий. Владелец прислал это
     07.09.2026 как «что за двойные счётчики». Мобильное правило (строка
     826) уже было глобальным — здесь приводим десктопное к тому же виду. */
  .catalogItem-offers-quantity{display:none}
  .catalogSection-wrap .catalogItem-offers-buy{display:block;margin:0}
  .catalogSection-wrap .catalogItem-offers-buy > *{
    flex:1 1 100%;max-width:100%;
  }
  .catalogSection-wrap .catalogItem-offers-buttons{width:100%}
  .catalogSection-wrap .catalogItem-offers-buttons .btn,
  .catalogSection-wrap .catalogItem-offers-buttons-wrap .btn{
    width:100%;min-height:44px;margin:0;padding:0 12px;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:.92rem;line-height:1.2;white-space:nowrap;
  }
  .catalogSection-wrap .catalogItem-offers-buy .bx-catalog-subscribe-button{
    width:100%;min-height:44px;
    display:inline-flex;align-items:center;justify-content:center;
  }

  /* «Под заказ» — метка, а не траурная лента поперёк фотографии. */
  .catalogSection-wrap .catalogItem-not-available{
    left:12px;bottom:auto;top:12px;width:auto;
    padding:5px 10px;border-radius:9px;
    background:rgba(var(--ie-navy-rgb),.82);
    font-size:.72rem;line-height:1.2;
  }
}

@media (min-width:1200px){
  .catalogSection-wrap .row-xl-5 > [class*="col-"]{
    flex:0 0 25%;max-width:25%;
  }
}

/* Телефон: та же метка «Под заказ», что и на широком экране. */
@media (max-width:767.98px){
  .catalogSection-wrap .catalogItem-not-available{
    left:8px;bottom:auto;top:8px;width:auto;
    padding:4px 8px;border-radius:8px;
    background:rgba(var(--ie-navy-rgb),.82);
    font-size:.66rem;line-height:1.2;
  }
  .catalogSection-wrap .catalogItem-propslist li strong{
    font-weight:500;color:var(--ie-text-muted);
  }
  .catalogSection-wrap .catalogItem-offers-price span{display:none}
}


/* ─── номера страниц под витриной ───────────────────────────────────────
   Тема нумерацию не выводила вовсе — только кнопку «Показать ещё», — а
   шаблон нумерации в проекте лежал неиспользованным, без единого правила
   оформления: голый список, цели нажатия 30×30 (проверка M-9.3 поймала это
   30.08.2026 на /catalog/). */

.pagination{
  margin:26px 0 0;
  padding-top:18px;
  border-top:1px solid #ededed;
}
.pagination .title{
  font-size:.82rem;
  color:#8a8f94;
  margin-bottom:10px;
}
.pagination ul{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin:0;
  padding:0;
  list-style:none;
}
/* Шаблон печатает пустые пункты-разделители — они ловят нажатия впустую. */
.pagination ul li:empty{display:none}
.pagination ul li{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
  min-height:40px;
  padding:0 10px;
  border-radius:10px;
  font-size:.95rem;
  color:#8a8f94;          /* неактивные «Начало» и «Назад» — не ссылки */
}
.pagination ul li.active{
  background:var(--ie-orange);
  color:#fff;
  font-weight:600;
}
.pagination ul li a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-width:40px;
  min-height:40px;
  margin:0 -10px;          /* ссылка занимает весь пункт, включая его поля */
  padding:0 10px;
  border-radius:10px;
  color:var(--ie-navy);
  text-decoration:none;
}
.pagination ul li a:hover{
  background:var(--ie-bg-soft);
  color:var(--ie-orange);
}

@media (max-width:767.98px){
  .pagination ul li,
  .pagination ul li a{min-width:44px;min-height:44px}
  .pagination ul{gap:4px}

  /* Чипы характеристик: у пустого по содержанию чипа строка получалась
     выше соседей (28 px против 22), и плитки в ряду расходились. Inline-flex
     убирает эффект строчной опоры — все чипы одной высоты. */
  .catalogSection-wrap .catalogItem-propslist li{
    display:inline-flex;
    align-items:center;
    line-height:14px;
  }
}

/* Чипы одной высоты. Тема ставит каждому li вертикальные поля в 6 px, у
   первого их нет, и в flex-строке он растягивался на высоту соседа: 28 px
   против 22, плитки в ряду расходились. Отступы задаёт gap, поля не нужны. */
.catalogSection-wrap .catalogItem-propslist{align-items:flex-start}
.catalogSection-wrap .catalogItem-propslist li{margin:0}

/* Заглушка «нет фотографии». Из сорока четырёх позиций раздела снимок есть
   у семи: остальные пришли из реестра без изображений. Огромный серый
   фотоаппарат в каждой второй плитке читается как поломка вёрстки, поэтому
   уменьшаем и приглушаем — до тех пор, пока не появятся настоящие снимки. */
.catalogSection-wrap .catalogItem-slider-block-image img[src$="no_photo.svg"]{
  width:42%;
  margin:0 auto;
  opacity:.3;
}

/* Пока витрина обновляется, она гаснет — иначе непонятно, нажалось ли. */
#ie-catalog-live{transition:opacity .15s ease}
#ie-catalog-live.is-loading{opacity:.45;pointer-events:none}

/* Подбор применяется сразу по выбору, поэтому на широком экране кнопка
   «Показать» не нужна: она предлагала сделать то, что уже сделано. Подвал
   панели остаётся ради «Сбросить» и появляется, только когда есть что
   сбрасывать. На узком экране кнопка нужна — ею закрывают панель, под
   которой уже лежит новый список. */
@media (min-width:992px){
  .ie-facets .ie-facets-apply{display:none}
  .ie-facets:not(.has-selected) .ie-facets-foot{display:none}
  .ie-facets .ie-facets-reset{order:0;margin-left:auto;padding:0 2px}
}


/* ─── номера страниц: вид ───────────────────────────────────────────────
   Первая версия была служебной: серая полоса во всю ширину, «Товары 1 - 20
   из 44» в одном углу, «Назад» и «Вперед» в другом, номера жались слева.
   Читать это приходилось по трём точкам сразу.

   Здесь номера собраны в центр — туда, где их ищут, — стрелки стали
   кнопками по краям, а «сколько всего» ушло под номера отдельной строкой:
   это справка, а не орган управления. «Начало» и «Конец» убраны: при трёх
   страницах они дублируют номера, а при двадцати их роль выполняют
   стрелки. */

.pagination{
  margin:30px 0 0;
  padding:20px 0 0;
  border-top:1px solid #ededed;
  background:none;
  display:flex;
  flex-direction:column-reverse;   /* подпись под номерами */
  align-items:center;
  gap:10px;
}
.pagination .title{
  margin:0;
  font-size:.82rem;
  color:#8a8f94;
}
.pagination ul{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin:0;
  padding:0;
  list-style:none;
}
.pagination ul li:empty,
.pagination ul li.nav-start,
.pagination ul li.nav-end{display:none}

.pagination ul li{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
  min-height:40px;
  padding:0;
  border-radius:10px;
  font-size:.95rem;
  color:#c2c6ca;      /* «Назад» на первой странице — не ссылка */
}
.pagination ul li a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-width:40px;
  min-height:40px;
  border-radius:10px;
  color:var(--ie-navy);
  text-decoration:none;
  transition:background-color .15s ease, color .15s ease;
}
.pagination ul li a:hover{
  background:var(--ie-bg-soft);
  color:var(--ie-orange);
}
.pagination ul li.active{
  background:var(--ie-orange);
  color:#fff;
  font-weight:600;
}

/* Стрелки вместо слов: «Назад» и «Вперед» занимали больше места, чем весь
   ряд номеров, и растаскивали блок по краям экрана. */
.pagination ul li.nav-prev,
.pagination ul li.nav-next{
  font-size:0;                       /* прячем слово, оставляем его в разметке
                                        для программ чтения с экрана */
  border:1px solid #e3e5e7;
}
.pagination ul li.nav-prev{margin-right:6px}
.pagination ul li.nav-next{margin-left:6px}
.pagination ul li.nav-prev::before,
.pagination ul li.nav-next::before{
  content:"";
  width:8px;height:8px;
  border-top:2px solid currentColor;
  border-right:2px solid currentColor;
  position:absolute;
}
.pagination ul li.nav-prev::before{transform:rotate(-135deg) translate(-1px,-1px)}
.pagination ul li.nav-next::before{transform:rotate(45deg) translate(-1px,-1px)}
.pagination ul li.nav-prev,
.pagination ul li.nav-next{position:relative}
.pagination ul li.nav-prev a,
.pagination ul li.nav-next a{
  position:absolute;
  inset:0;
  border-radius:9px;
}

@media (max-width:767.98px){
  .pagination{margin-top:22px;padding-top:16px;gap:8px}
  .pagination ul{gap:4px}
  .pagination ul li,
  .pagination ul li a{min-width:44px;min-height:44px}
}

/* Стрелка — блочный псевдоэлемент: строчному ширина и высота не
   применяются, и уголок не рисовался вовсе. */
.pagination ul li.nav-prev::before,
.pagination ul li.nav-next::before{
  display:block;
  top:50%;
  left:50%;
  margin:-4px 0 0 -4px;
}

/* ─── окно «Сообщить о поступлении» ─────────────────────────────────────
   Штатное окно — заголовок, подпись «Укажите Ваш Email:» и поле, и ни
   слова о том, про какой товар речь. Шапку с товаром достраивает
   ie_subscribe.js, здесь только вид. */

.popup-window .ie-subscribe-head{
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 0 16px;
  margin:0 0 16px;
  border-bottom:1px solid #ededed;
}
.popup-window .ie-subscribe-photo{
  flex:0 0 72px;
  width:72px;height:72px;
  display:flex;align-items:center;justify-content:center;
  border-radius:12px;
  background:var(--ie-bg-soft);
  overflow:hidden;
}
.popup-window .ie-subscribe-photo img{
  max-width:100%;max-height:100%;
  object-fit:contain;
}
.popup-window .ie-subscribe-name{
  font-size:1rem;
  line-height:1.3;
  font-weight:600;
  color:var(--ie-navy);
}
.popup-window .ie-subscribe-props{
  display:flex;flex-wrap:wrap;gap:6px;
  margin-top:8px;
}
.popup-window .ie-subscribe-prop{
  padding:4px 8px;
  border-radius:8px;
  background:var(--ie-bg-soft);
  font-size:.75rem;
  line-height:1.2;
  color:var(--ie-text-muted);
  white-space:nowrap;
}
.popup-window .ie-subscribe-note{
  margin:12px 0 0;
  font-size:.82rem;
  line-height:1.4;
  color:#8a8f94;
}

/* Поле ввода: штатное было в полтора раза уже кнопки и без отступа сверху. */
.popup-window .bx-catalog-subscribe-form-container input[type="text"],
.popup-window .bx-catalog-subscribe-form-container input[type="email"],
.popup-window input.bx-catalog-subscribe-input{
  width:100%;
  min-height:44px;
  padding:0 12px;
  border:1px solid #dfe1e4;
  border-radius:10px;
  font-size:15px;
}
.popup-window .bx-catalog-subscribe-form-container input:focus{
  border-color:var(--ie-orange);
  outline:none;
}

/* «Закрыть» — не то же самое, что «Подписаться». Обе кнопки были залиты
   оранжевым, и выбор читался как два равных действия. */
.popup-window .popup-window-buttons .btn:not(.btn-primary){
  background:transparent;
  border:1px solid #dfe1e4;
  color:var(--ie-text-muted);
}
.popup-window .popup-window-buttons .btn:not(.btn-primary):hover{
  border-color:#c2c6ca;
  color:var(--ie-navy);
}


/* ═══════════════════════════════════════════════════════════════════════
   Промышленный туризм — /services/promyshlennyy-turizm/
   ═══════════════════════════════════════════════════════════════════════
   Раскладка по макету «ИНТЭР — Промышленный туризм». Всё под .ie-tour:
   страница одна, и её правила не должны доставать до остального сайта.

   Движение (сетка, световые пятна, появление блоков) выключается при
   системной настройке «уменьшить анимацию» — это не украшение ради
   украшения, а фон, который кому-то мешает читать. */

.ie-tour{background:#fff}
.ie-tour h2{font-weight:700;line-height:1.15;margin:0}
.ie-tour h2 span{color:var(--ie-orange)}

.ie-tour-section{padding:76px 0 0}
.ie-tour-section--last{padding-bottom:84px}

/* ─── общий фон: сетка и световые пятна ─── */

.ie-tour-grid,
.ie-tour-orb{position:absolute;pointer-events:none}
.ie-tour-grid{
  inset:-64px;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse at 30% 20%,#000,transparent 72%);
  mask-image:radial-gradient(ellipse at 30% 20%,#000,transparent 72%);
  animation:ie-tour-grid 26s linear infinite;
}
.ie-tour-orb{border-radius:50%;filter:blur(44px)}
.ie-tour-orb--cyan{
  left:-180px;top:-160px;width:560px;height:560px;
  background:radial-gradient(circle,rgba(var(--ie-cyan-rgb),.16),transparent 72%);
  animation:ie-tour-orb-a 34s ease-in-out infinite;
}
.ie-tour-orb--orange{
  right:-140px;bottom:-220px;width:520px;height:520px;
  background:radial-gradient(circle,rgba(var(--ie-orange-rgb),.15),transparent 72%);
  animation:ie-tour-orb-b 42s ease-in-out infinite;
}
@keyframes ie-tour-grid{from{background-position:0 0}to{background-position:64px 64px}}
@keyframes ie-tour-orb-a{
  0%{transform:translate(0,0) scale(1)}
  33%{transform:translate(-60px,44px) scale(1.14)}
  66%{transform:translate(40px,72px) scale(.92)}
  100%{transform:translate(0,0) scale(1)}
}
@keyframes ie-tour-orb-b{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(72px,-52px) scale(1.18)}
  100%{transform:translate(0,0) scale(1)}
}

/* ─── первый экран ─── */

.ie-tour-hero{position:relative;overflow:hidden;background:var(--ie-navy)}
.ie-tour-hero-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.ie-tour-hero-inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;
  padding-top:26px;padding-bottom:78px;
}
.ie-tour-badge{
  display:inline-block;
  padding:7px 14px;
  border-radius:999px;
  border:1px solid rgba(var(--ie-cyan-rgb),.4);
  background:rgba(var(--ie-cyan-rgb),.1);
  color:var(--ie-cyan);
  font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
}
.ie-tour-h1{
  font-size:3.05rem;line-height:1.08;font-weight:700;color:#fff;
  margin:20px 0 18px;
}
.ie-tour-h1 span{color:var(--ie-orange)}
.ie-tour-lead{
  font-size:1.13rem;line-height:1.55;color:rgba(255,255,255,.68);
  margin:0 0 26px;max-width:580px;
}
.ie-tour-quote{
  max-width:580px;margin:0 0 34px;
  padding:20px 24px;
  border:0;border-left:2px solid var(--ie-orange);
  background:rgba(255,255,255,.04);
  border-radius:0 14px 14px 0;
  font-size:1.05rem;line-height:1.55;color:rgba(255,255,255,.85);
}
.ie-tour-actions{display:flex;flex-wrap:wrap;gap:14px}
.ie-tour .ie-tour-btn{
  display:inline-flex;align-items:center;gap:10px;
  min-height:56px;padding:0 34px;
  border-radius:999px;
  background:var(--ie-orange);color:#fff;
  font-weight:600;font-size:1.05rem;text-decoration:none;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
}
.ie-tour .ie-tour-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(var(--ie-orange-rgb),.4);
  color:#fff;
}
.ie-tour .ie-tour-btn--ghost{
  background:transparent;
  border:1px solid rgba(255,255,255,.22);
}
.ie-tour .ie-tour-btn--ghost:hover{
  background:rgba(255,255,255,.06);
  border-color:var(--ie-cyan);
  box-shadow:none;
}

.ie-tour-hero-shot{position:relative}
.ie-tour-hero-shot img{
  display:block;width:100%;height:auto;
  aspect-ratio:4/5;object-fit:cover;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.1);
}
.ie-tour-hero-card{
  position:absolute;left:-26px;bottom:34px;
  display:flex;align-items:center;gap:14px;
  padding:16px 22px 16px 18px;
  border-radius:18px;background:#fff;
  box-shadow:0 22px 50px rgba(var(--ie-navy-rgb),.28);
}
.ie-tour-hero-card-icon{
  flex:0 0 auto;width:44px;height:44px;border-radius:50%;
  background:rgba(var(--ie-orange-rgb),.14);
  /* Земной шар одной линией: своя иконка вместо подключения шрифта. */
  background-image:
    radial-gradient(circle at 50% 50%,transparent 9px,var(--ie-orange) 9px,var(--ie-orange) 10.5px,transparent 10.5px),
    linear-gradient(var(--ie-orange),var(--ie-orange)),
    radial-gradient(ellipse 5px 10px at 50% 50%,transparent 4px,var(--ie-orange) 4px,var(--ie-orange) 5.2px,transparent 5.2px);
  background-repeat:no-repeat;
  background-position:center,center,center;
  background-size:44px 44px,21px 1.5px,44px 44px;
}
.ie-tour-hero-card b{display:block;font-weight:700;font-size:1rem;color:var(--ie-navy)}
.ie-tour-hero-card i{display:block;font-style:normal;font-size:.85rem;color:var(--ie-text-muted);margin-top:2px}

/* ─── «Что входит» ─── */

.ie-tour-split{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.ie-tour-split-head h2{font-size:2.4rem;margin-bottom:16px}
.ie-tour-split-head p{font-size:1.08rem;line-height:1.55;color:var(--ie-text-muted);margin:0}
.ie-tour-steps{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.ie-tour-steps li{
  display:flex;gap:18px;align-items:flex-start;
  padding:22px 26px;
  border:1px solid #e2e5e8;border-radius:18px;background:#fff;
  font-size:1.05rem;line-height:1.5;
  transition:background .3s ease,border-color .3s ease;
}
.ie-tour-steps li:hover{background:#fafbfc;border-color:var(--ie-orange)}
.ie-tour-step-n{
  flex:0 0 auto;padding-top:3px;
  font-size:.85rem;font-weight:700;color:var(--ie-orange);
  font-variant-numeric:tabular-nums;
}

/* ─── «Подбор оборудования» ─── */

.ie-tour-equip{
  display:grid;grid-template-columns:1.15fr .85fr;gap:0;
  border:1px solid #e2e5e8;border-radius:26px;overflow:hidden;
}
.ie-tour-equip-text{padding:46px}
.ie-tour-equip-text h2{font-size:2.1rem;margin-bottom:16px}
.ie-tour-equip-text p{font-size:1.05rem;line-height:1.6;color:var(--ie-text-muted);margin:0}
.ie-tour-note{
  display:flex;gap:14px;align-items:flex-start;
  padding:46px;background:#fafbfc;border-left:1px solid #eef0f2;
}
.ie-tour-note p{margin:0;font-size:.98rem;line-height:1.55}
.ie-tour-note-icon{
  flex:0 0 auto;width:20px;height:20px;margin-top:2px;border-radius:50%;
  border:2px solid var(--ie-orange);
  position:relative;
}
.ie-tour-note-icon::before,
.ie-tour-note-icon::after{
  content:"";position:absolute;left:50%;background:var(--ie-orange);
}
.ie-tour-note-icon::before{top:3px;width:2px;height:2px;margin-left:-1px;border-radius:50%}
.ie-tour-note-icon::after{top:7px;width:2px;height:6px;margin-left:-1px}

/* ─── «Что смотреть» ─── */

.ie-tour-center{max-width:760px;margin:0 auto 44px;text-align:center}
.ie-tour-center h2{font-size:2.4rem;margin-bottom:14px}
.ie-tour-center p{font-size:1.12rem;line-height:1.5;color:var(--ie-text-muted);margin:0}
.ie-tour-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.ie-tour-card{
  display:flex;flex-direction:column;
  padding:30px 28px;
  border:1px solid #e2e5e8;border-radius:22px;background:#fff;
  transition:transform .4s cubic-bezier(.22,1,.3,1),box-shadow .4s ease,border-color .4s ease;
}
.ie-tour-card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 50px rgba(var(--ie-navy-rgb),.13);
  border-color:var(--ie-orange);
}
.ie-tour-card-n{
  width:48px;height:48px;border-radius:14px;
  background:rgba(var(--ie-orange-rgb),.12);
  display:flex;align-items:center;justify-content:center;
  color:var(--ie-orange);font-weight:700;
  font-variant-numeric:tabular-nums;
}
.ie-tour-card h3{margin:20px 0 8px;font-size:1.2rem;font-weight:700;line-height:1.3}
.ie-tour-card p{margin:0;font-size:.98rem;line-height:1.55;color:var(--ie-text-muted)}

/* ─── тёмные карточки: ловушки и заявка ─── */

.ie-tour-dark{
  position:relative;overflow:hidden;
  border-radius:26px;background:var(--ie-navy);
  padding:50px 46px;
}
.ie-tour-dark-inner{position:relative;z-index:2}
.ie-tour-dark h2{font-size:2.1rem;color:#fff;margin-bottom:12px}
.ie-tour-dark-lead{
  font-size:1.05rem;line-height:1.55;color:rgba(255,255,255,.6);
  margin:0 0 34px;max-width:720px;
}
.ie-tour-traps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.ie-tour-trap{padding-top:22px;border-top:1px solid rgba(255,255,255,.14)}
.ie-tour-trap-tag{
  color:var(--ie-cyan);
  font-size:.8rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  margin-bottom:10px;
}
.ie-tour-trap p{margin:0;color:rgba(255,255,255,.82);font-size:1.02rem;line-height:1.55}

/* ─── «Что прислать» и вопросы ─── */

.ie-tour-two{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start}
.ie-tour-two h2{font-size:1.95rem;margin-bottom:14px}
.ie-tour-sub{font-size:1.02rem;line-height:1.55;color:var(--ie-text-muted);margin:0 0 26px}
.ie-tour-checks{display:flex;flex-direction:column;gap:14px;margin:0;padding:0;list-style:none}
.ie-tour-checks li{
  position:relative;padding-left:31px;
  font-size:1rem;line-height:1.5;
}
/* Галочка рисуется двумя линиями: иконочный шрифт ради четырёх пунктов
   грузить незачем. */
.ie-tour-checks li::before{
  content:"";position:absolute;left:1px;top:5px;
  width:14px;height:8px;
  border-left:2.4px solid var(--ie-orange);
  border-bottom:2.4px solid var(--ie-orange);
  transform:rotate(-45deg);
}
.ie-tour-two h2 + .ie-tour-faq{margin-top:24px}

.ie-tour-faq{display:flex;flex-direction:column;gap:10px}
.ie-tour-faq-item{
  border:1px solid #e2e5e8;border-radius:16px;background:#fff;overflow:hidden;
}
.ie-tour-faq-item > summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:20px 22px;
  font-size:1.02rem;font-weight:600;line-height:1.4;
  cursor:pointer;list-style:none;
}
.ie-tour-faq-item > summary::-webkit-details-marker{display:none}
.ie-tour-faq-item > summary::after{
  content:"+";
  flex:0 0 auto;
  width:26px;height:26px;border-radius:50%;
  background:#f1f3f5;color:var(--ie-navy);
  display:flex;align-items:center;justify-content:center;
  font-size:1.15rem;line-height:1;
  transition:transform .3s ease,background .3s ease,color .3s ease;
}
.ie-tour-faq-item[open] > summary::after{
  transform:rotate(45deg);
  background:var(--ie-orange);color:#fff;
}
.ie-tour-faq-item > p{
  margin:0;padding:0 22px 22px;
  color:var(--ie-text-muted);font-size:.98rem;line-height:1.6;
}

/* ─── галерея ─── */

.ie-tour-gal-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  margin-bottom:26px;
}
.ie-tour-gal-head h2{font-size:2.4rem}
.ie-tour-gal-head p{font-size:1rem;color:var(--ie-text-muted);margin:0;max-width:420px;text-align:right}
.ie-tour-gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:16px}
.ie-tour-gal-item{
  position:relative;margin:0;
  border-radius:22px;overflow:hidden;background:var(--ie-bg-soft);
}
.ie-tour-gal-item--wide{grid-column:span 2;grid-row:span 2}
.ie-tour-gal-item img{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.22,1,.3,1);
}
.ie-tour-gal-item:hover img{transform:scale(1.07)}
.ie-tour-gal-item figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:26px 18px 14px;
  background:linear-gradient(transparent,rgba(var(--ie-navy-rgb),.78));
  color:#fff;font-size:.86rem;line-height:1.35;
}

/* ─── форма заявки ─── */

.ie-tour-form{padding:0}
.ie-tour-form-inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:.85fr 1.15fr;
}
.ie-tour-form-side{padding:50px 42px 50px 46px;border-right:1px solid rgba(255,255,255,.09)}
.ie-tour-form-side h2{font-size:2.1rem;color:#fff}
.ie-tour-form-facts{display:flex;flex-direction:column;gap:16px;margin:0;padding:0;list-style:none}
.ie-tour-form-facts li{
  display:flex;align-items:center;gap:13px;
  color:rgba(255,255,255,.8);font-size:.98rem;
}
.ie-tour-form-facts li::before{
  content:"";flex:0 0 auto;
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.07);
}
.ie-tour-form-facts a{color:var(--ie-cyan);font-weight:600}
.ie-tour-form-body{padding:50px 46px 50px 42px}

/* Форма заявки на сайте одна и приходит со своим оформлением. Здесь она
   стоит на тёмном, поэтому перекрашиваем поля, а разметку не трогаем. */
.ie-tour-form-body .form{background:none;padding:0;margin:0;border:0}
.ie-tour-form-body .form h2,
.ie-tour-form-body .form .h2,
.ie-tour-form-body .form-title{display:none}
.ie-tour-form-body input[type="text"],
.ie-tour-form-body input[type="email"],
.ie-tour-form-body input[type="tel"],
.ie-tour-form-body textarea{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:#fff;
  padding:16px 20px;
  font-size:1rem;font-family:inherit;
  transition:border-color .25s ease,background .25s ease;
}
.ie-tour-form-body input[type="text"]:focus,
.ie-tour-form-body input[type="email"]:focus,
.ie-tour-form-body input[type="tel"]:focus,
.ie-tour-form-body textarea:focus{
  border-color:var(--ie-cyan);
  background:rgba(255,255,255,.1);
  outline:none;
}
.ie-tour-form-body input::placeholder,
.ie-tour-form-body textarea::placeholder{color:rgba(255,255,255,.45)}
.ie-tour-form-body label,
.ie-tour-form-body .form-label{color:rgba(255,255,255,.7)}
.ie-tour-form-body a{color:var(--ie-cyan)}
.ie-tour-form-body .btn{
  min-height:60px;border-radius:14px;
  background:var(--ie-orange);border:0;color:#fff;
  font-weight:600;font-size:1.05rem;
}
.ie-tour-form-body .btn:hover{background:var(--ie-orange-light)}

/* ─── появление блоков при прокрутке ─── */

.ie-tour-section{opacity:1}
.ie-tour [data-appear]{opacity:0;transform:translateY(24px)}
.ie-tour [data-appear].is-shown{
  opacity:1;transform:none;
  transition:opacity .7s cubic-bezier(.22,1,.3,1),transform .7s cubic-bezier(.22,1,.3,1);
}

@media (prefers-reduced-motion:reduce){
  .ie-tour-grid,.ie-tour-orb{animation:none}
  .ie-tour [data-appear]{opacity:1;transform:none;transition:none}
  .ie-tour-card,.ie-tour-gal-item img{transition:none}
  /* Кадры продолжают листаться, но меняются мгновенно: движение убрано,
     а содержимое человек всё равно видит. Полное выключение листания
     оставляло снимок стоять, чего никто не ждёт. */
  .ie-tour-slide{transition:none}
  .ie-tour-dot{transition:none}
}

/* ─── планшет ─── */

@media (max-width:1199.98px){
  .ie-tour-hero-inner{grid-template-columns:1fr;gap:38px}
  .ie-tour-hero-shot{max-width:520px}
  .ie-tour-h1{font-size:2.5rem}
  .ie-tour-split,
  .ie-tour-two{grid-template-columns:1fr;gap:32px}
  .ie-tour-equip{grid-template-columns:1fr}
  .ie-tour-note{border-left:0;border-top:1px solid #eef0f2}
  .ie-tour-form-inner{grid-template-columns:1fr}
  .ie-tour-form-side{border-right:0;border-bottom:1px solid rgba(255,255,255,.09);padding:42px 32px}
  .ie-tour-form-body{padding:36px 32px 42px}
}

/* ─── телефон ─── */

@media (max-width:767.98px){
  .ie-tour-section{padding-top:52px}
  .ie-tour-section--last{padding-bottom:56px}
  .ie-tour-hero-inner{padding-bottom:52px;gap:30px}
  .ie-tour-h1{font-size:2rem;margin:16px 0 14px}
  .ie-tour-lead{font-size:1rem;margin-bottom:20px}
  .ie-tour-quote{padding:16px 18px;font-size:.98rem;margin-bottom:26px}
  .ie-tour-actions{flex-direction:column;align-items:stretch}
  .ie-tour .ie-tour-btn{justify-content:center;padding:0 20px;font-size:1rem}
  .ie-tour-hero-shot{max-width:none}
  .ie-tour-hero-shot img{aspect-ratio:4/3}
  /* Карточка «серийный цех» на узком экране уезжала за край: ставим её в
     поток под снимком. */
  .ie-tour-hero-card{position:static;margin-top:-28px;margin-left:12px;margin-right:12px}

  .ie-tour-split-head h2,
  .ie-tour-center h2,
  .ie-tour-gal-head h2{font-size:1.7rem}
  .ie-tour-equip-text,
  .ie-tour-note{padding:28px 22px}
  .ie-tour-equip-text h2,
  .ie-tour-dark h2,
  .ie-tour-form-side h2{font-size:1.6rem}
  .ie-tour-two h2{font-size:1.5rem}
  .ie-tour-steps li{padding:16px 18px;font-size:1rem}
  .ie-tour-card{padding:22px 20px}
  .ie-tour-dark{padding:32px 22px}
  .ie-tour-gal-head{flex-direction:column;align-items:flex-start;gap:8px}
  .ie-tour-gal-head p{text-align:left}
  .ie-tour-gal{grid-template-columns:1fr 1fr;grid-auto-rows:150px;gap:10px}
  .ie-tour-gal-item--wide{grid-column:span 2;grid-row:span 1}
  .ie-tour-form-side{padding:30px 22px}
  .ie-tour-form-body{padding:26px 22px 32px}
}

/* ─── крошки на странице услуги ─────────────────────────────────────────
   Тема ставит их белой полосой над содержимым. На тёмном первом экране это
   читалось как чужая вставка: белый прямоугольник, пустое место под ним и
   только потом сам экран. Полосу прячем, а те же крошки печатаем внутри
   тёмного блока — так их видно на своём месте и первый экран начинается
   сразу под шапкой. Мобильная строка «Назад» остаётся: там своя логика. */
body.ie-tour-page header .container > .container.margin.d-none.d-md-block{display:none}

.ie-tour-crumbs{position:relative;z-index:2;padding-top:22px}
.ie-tour-crumbs .breadcrumbs{margin:0}
.ie-tour-crumbs .breadcrumbs-item,
.ie-tour-crumbs .breadcrumbs-item span{color:rgba(255,255,255,.45);font-size:.85rem}
.ie-tour-crumbs .breadcrumbs-item a,
.ie-tour-crumbs .breadcrumbs-item a span{color:rgba(255,255,255,.6)}
.ie-tour-crumbs .breadcrumbs-item a:hover span{color:var(--ie-orange)}
.ie-tour-crumbs .breadcrumbs-item:last-child span{color:rgba(255,255,255,.8)}
/* Первый экран начинается сразу под крошками. */
.ie-tour-hero-inner{padding-top:34px}

@media (max-width:767.98px){
  .ie-tour-crumbs{display:none}   /* на телефоне у темы своя строка «Назад» */
  .ie-tour-hero-inner{padding-top:26px}
}


/* ─── первый экран: листание снимков ────────────────────────────────────
   Фотографий у услуги четыре, и все они собраны здесь: раскладывать одни и
   те же кадры ещё раз в галерее снизу было бы повтором. */

.ie-tour-slides{
  position:relative;
  aspect-ratio:4/5;
  border-radius:26px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
}
.ie-tour-slide{
  position:absolute;inset:0;margin:0;
  opacity:0;transform:scale(1.03);
  transition:opacity .6s ease,transform .8s cubic-bezier(.22,1,.3,1);
  pointer-events:none;
}
.ie-tour-slide.is-on{opacity:1;transform:none;pointer-events:auto}
.ie-tour-slide img{display:block;width:100%;height:100%;object-fit:cover}
.ie-tour-slide figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:38px 20px 16px;
  background:linear-gradient(transparent,rgba(var(--ie-navy-rgb),.85));
  color:#fff;font-size:.88rem;line-height:1.35;
}

.ie-tour-slider-nav{position:absolute;right:16px;top:16px;z-index:4;display:flex;gap:8px}
.ie-tour-slider-btn{
  width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(var(--ie-navy-rgb),.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  cursor:pointer;position:relative;
  transition:background .25s ease,border-color .25s ease;
}
.ie-tour-slider-btn:hover{background:var(--ie-orange);border-color:var(--ie-orange)}
.ie-tour-slider-btn::before{
  content:"";position:absolute;top:50%;left:50%;
  width:8px;height:8px;margin:-4px 0 0 -3px;
  border-top:2px solid #fff;border-right:2px solid #fff;
  transform:rotate(-135deg);
}
.ie-tour-slider-btn--next::before{margin-left:-5px;transform:rotate(45deg)}

.ie-tour-dots{
  position:absolute;left:0;right:0;bottom:16px;z-index:4;
  display:flex;justify-content:center;gap:8px;
}
.ie-tour-dot{
  width:8px;height:8px;padding:0;border:0;border-radius:999px;
  background:rgba(255,255,255,.35);cursor:pointer;position:relative;
  transition:width .3s cubic-bezier(.22,1,.3,1),background .3s ease;
}
/* Точка рисуется восьмипиксельной — так в макете, и крупнее она выглядела бы
   грубо. Но нажимают пальцем, а не курсором: невидимая площадка доводит цель
   до 44 px по высоте. По ширине площадка равна шагу между точками (8 + 16):
   если сделать её квадратом 44×44, соседние площадки наложатся друг на друга
   и нажатие между двумя точками уйдёт к той, что выше по слою. */
.ie-tour-dots{gap:16px}
.ie-tour-dot::after{
  content:"";position:absolute;left:50%;top:50%;
  width:24px;height:44px;transform:translate(-50%,-50%);
}
.ie-tour-dot.is-on{width:22px;background:var(--ie-orange)}

/* ─── форма заявки внутри тёмной карточки ───────────────────────────────
   Форма приходит со своей обёрткой: секцией с отступами, контейнером и
   тёмной карточкой. Внутри нашей тёмной карточки это давало рамку в рамке
   и второй заголовок «Сделать заказ» рядом с нашим. Разметку компонента не
   трогаем — гасим только его собственное оформление. */

.ie-tour-form-body section,
.ie-tour-form-body .margin3,
.ie-tour-form-body .margin1{margin:0}
.ie-tour-form-body .container{width:auto;max-width:none;padding:0;margin:0}
.ie-tour-form-body .form{
  background:none;border:0;border-radius:0;box-shadow:none;padding:0;margin:0;
}
/* Свой заголовок у формы не нужен: он уже написан в левой половине карточки. */
.ie-tour-form-body legend,
.ie-tour-form-body .callbackForm-description{display:none}

.ie-tour-form-body .row{margin:0;display:block}
.ie-tour-form-body [class*="col-"]{width:auto;max-width:none;flex:none;padding:0}
.ie-tour-form-body .form-group-row{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
}
.ie-tour-form-body .form-group{margin:0}
/* Телефон занимает вторую строку целиком: три поля в ряд на этой ширине
   дают колонки по 150 px, куда не помещается ни подпись, ни номер. */
.ie-tour-form-body .form-group:nth-child(3){grid-column:1 / -1}
.ie-tour-form-body .form-group.hidden{display:none}
.ie-tour-form-body label{
  display:block;margin-bottom:6px;
  color:rgba(255,255,255,.6);font-size:.85rem;
}
.ie-tour-form-body label span{color:var(--ie-orange)}

.ie-tour-form-body .btn{
  width:100%;margin-top:18px;
  display:inline-flex;align-items:center;justify-content:center;
}
/* «Заполнить опросный лист» — второе, необязательное действие. */
.ie-tour-form-body .questionnaire-block{margin-top:14px;text-align:left}
.ie-tour-form-body .questionnaire-block .btn{
  width:auto;margin-top:0;
  background:transparent;border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.75);font-weight:500;font-size:.95rem;min-height:48px;
}
.ie-tour-form-body .questionnaire-block .btn:hover{
  border-color:var(--ie-cyan);color:#fff;background:transparent;
}

.ie-tour-form-body .ie-form-consent{
  display:flex;gap:10px;align-items:flex-start;
  margin-top:14px;color:rgba(255,255,255,.6);font-size:.86rem;line-height:1.45;
}
.ie-tour-form-body .ie-form-consent-text a{color:var(--ie-cyan)}
.ie-tour-form-body .ie-form-consent input[type="checkbox"]{
  flex:0 0 auto;width:18px;height:18px;margin-top:2px;accent-color:var(--ie-orange);
}
.ie-tour-form-body .form-info,
.ie-tour-form-body .ie-form-fallback{color:rgba(255,255,255,.5);font-size:.85rem}
.ie-tour-form-body .contacts-block,
.ie-tour-form-body .logoBlock{display:none}

@media (max-width:767.98px){
  .ie-tour-form-body .form-group-row{grid-template-columns:1fr}
  .ie-tour-form-body .form-group:nth-child(3){grid-column:auto}
  .ie-tour-slides{aspect-ratio:4/3}
  .ie-tour-slide figcaption{font-size:.8rem;padding:28px 14px 12px}
}

/* У Bootstrap-утилит display стоит с !important, поэтому обычное правило
   белую полосу не гасило. Здесь !important уместен: мы отменяем чужую
   утилиту, а не спорим с содержательным стилем. */
body.ie-tour-page header .container > .container.margin.d-none.d-md-block{display:none!important}

/* Подпись кадра — сверху: внизу сидит карточка «Серийный цех», и подпись
   уходила под неё. Справа оставляем место под стрелки. */
.ie-tour-slide figcaption{
  top:0;bottom:auto;
  padding:16px 104px 34px 20px;
  background:linear-gradient(rgba(var(--ie-navy-rgb),.8),transparent);
}

/* Поля формы во всю ширину ячейки. Селектор длиннее необходимого намеренно:
   таблицы стилей темы подключаются после нашей, и при равной силе ширину
   поля задавала она — поля выходили по 81 px. */
.ie-tour .ie-tour-form-body .form-group input[type="text"],
.ie-tour .ie-tour-form-body .form-group input[type="email"],
.ie-tour .ie-tour-form-body .form-group input[type="tel"],
.ie-tour .ie-tour-form-body .form-group textarea{
  width:100%;
  min-height:56px;
  box-sizing:border-box;
}
/* Подписи в две строки не должны разъезжать поля: выравниваем по низу. */
.ie-tour .ie-tour-form-body .form-group-row{align-items:end}
.ie-tour .ie-tour-form-body .form-group label{min-height:2.6em;display:flex;align-items:flex-end}

/* Сами группы полей тема считает долями строки из трёх колонок (33 %), и в
   нашей сетке они сжимались до 111 px при ячейке в 334. Возвращаем им всю
   ширину ячейки — раскладку теперь задаёт сетка. */
.ie-tour .ie-tour-form-body .form-group{width:100%;max-width:none;flex:none}

/* Пустые кружки рядом с фактами читались как незагрузившиеся иконки.
   Ставим ту же галочку, что и в списке «Что прислать»: один знак на
   странице вместо двух разных. */
.ie-tour-form-facts li::before{
  width:22px;height:22px;background:none;border-radius:0;
  border-left:2.4px solid var(--ie-cyan);
  border-bottom:2.4px solid var(--ie-cyan);
  height:8px;width:14px;
  transform:rotate(-45deg);
  margin:0 8px 4px 2px;
}


/* Галерея под число снимков. Прежняя сетка была рассчитана на четыре кадра
   с первым во всю высоту; при трёх снимках оставалась дыра в пол-экрана —
   это и было видно на странице. Теперь колонки раздаются поровну. */
.ie-tour-gal{grid-template-columns:repeat(3,1fr);grid-auto-rows:280px}
.ie-tour-gal--2{grid-template-columns:repeat(2,1fr)}
.ie-tour-gal--1{grid-template-columns:1fr;grid-auto-rows:420px}
.ie-tour-gal--4{grid-template-columns:repeat(4,1fr);grid-auto-rows:240px}

@media (max-width:991.98px){
  .ie-tour-gal,
  .ie-tour-gal--4{grid-template-columns:repeat(2,1fr);grid-auto-rows:220px}
}
@media (max-width:575.98px){
  .ie-tour-gal,
  .ie-tour-gal--2,
  .ie-tour-gal--4{grid-template-columns:1fr;grid-auto-rows:210px}
}

/* ─── шапка на странице с тёмным первым экраном ─────────────────────────
   Только на этой странице, остальной сайт не трогаем.

   Тема даёт шапке прозрачный фон до прокрутки и rgba(29,33,38,.8) после.
   На тёмном экране это дало два дефекта сразу: крошки, уезжая вверх,
   просвечивали сквозь шапку прямо над логотипом, а сама шапка на первом
   же движении колеса меняла фон — то самое «дёргается на секунду».

   Держим фон сплошным и одинаковым в обоих состояниях: просвечивать
   нечему и переключаться не на что. Размытие при сплошном фоне ничего не
   делает и стоит кадров. */
body.ie-tour-page .pageHeader .pageHeader-bulk,
body.ie-tour-page .pageHeader.sticky .pageHeader-bulk{
  background:#1d2126;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-bottom:1px solid rgba(255,255,255,.07);
}

/* Тёмный экран начинается от самой верхней точки страницы, а шапка стоит
   поверх него и в потоке места не занимает. Из-за этого крошки оказывались
   ровно под шапкой и были не видны. Отодвигаем содержимое первого экрана
   на высоту шапки: 98 px на широком экране, 56 на телефоне, плюс воздух. */
.ie-tour-crumbs{padding-top:114px}
@media (max-width:767.98px){
  .ie-tour-hero-inner{padding-top:74px}
}

/* Раньше здесь стоял отступ в 118 px: шапка с логотипом и строка «Назад»
   висели поверх экрана и места в потоке не занимали. Теперь на внутренней
   странице телефона шапка одна, белая и в потоке (см. ie-topbar), поэтому
   тёмный экран начинается сразу под ней. */
@media (max-width:767.98px){
  .ie-tour-hero-inner{padding-top:26px}
}


/* ═══════════════════════════════════════════════════════════════════════
   Промышленный туризм: телефон
   ═══════════════════════════════════════════════════════════════════════
   Мобильный макет отличается не размерами, а устройством: карточки «Что
   смотреть» и снимки лежат лентой вбок, цитата стоит под фотографией, у
   слайдера только точки. Сетка из пяти плиток на 390 px превращается в
   пять экранов вниз — лента читается одним движением. */

/* Полоса под лентой. На широком экране лент нет, и скрипт её прячет. */
.ie-tour-rail-bar{
  display:none;
  height:3px;
  margin:14px 0 0;
  border-radius:999px;
  background:#eef0f2;
  overflow:hidden;
}
.ie-tour-rail-bar span{
  display:block;height:100%;width:18%;
  border-radius:999px;background:var(--ie-orange);
  transition:width .18s linear;
}

@media (max-width:767.98px){

  /* Ленту показываем во всю ширину экрана, отступы отдаём самим карточкам,
     иначе последняя упирается в край. */
  .ie-tour-rail-bar{display:block}

  /* ─── первый экран ─── */

  /* Порядок по макету: метка, заголовок, вводка, снимок, цитата, кнопки.
     Снимок лежит соседним блоком, поэтому текст раскрываем в поток
     (display:contents) и раскладываем всё одной колонкой. */
  .ie-tour-hero-inner{display:flex;flex-direction:column;gap:0}
  .ie-tour-hero-text{display:contents}
  .ie-tour-badge{order:1;font-size:.68rem;padding:6px 12px}
  .ie-tour-h1{order:2;font-size:1.95rem;line-height:1.14;margin:14px 0 12px}
  .ie-tour-lead{order:3;font-size:1rem;line-height:1.5;margin:0 0 20px}
  .ie-tour-hero-shot{order:4;margin-bottom:18px}
  .ie-tour-quote{order:5;padding:16px 18px;font-size:.96rem;margin:0 0 22px}
  .ie-tour-actions{order:6}

  /* Снимок ниже и шире: 3:2 против 4:5 — на телефоне вертикальный кадр
     съедал бы весь экран. */
  .ie-tour-slides{aspect-ratio:3/2;border-radius:20px}
  /* Стрелки убираем: листают пальцем, а точки показывают, где ты. */
  .ie-tour-slider-nav{display:none}
  .ie-tour-dots{bottom:12px}
  .ie-tour-slide figcaption{padding:14px 16px 30px;font-size:.8rem}
  /* Карточка «Серийный цех» на телефоне не помещается рядом со снимком и
     дублирует смысл цитаты — на узком экране её нет. */
  .ie-tour-hero-card{display:none}

  /* ─── заголовки и отступы разделов ─── */

  .ie-tour-section{padding-top:34px}
  .ie-tour-split-head h2,
  .ie-tour-center h2,
  .ie-tour-gal-head h2,
  .ie-tour-equip-text h2,
  .ie-tour-two h2{font-size:1.45rem;line-height:1.2}
  .ie-tour-dark h2,
  .ie-tour-form-side h2{font-size:1.35rem;line-height:1.22}
  .ie-tour-split-head p,
  .ie-tour-center p,
  .ie-tour-sub{font-size:.94rem;line-height:1.5;margin-bottom:16px}
  .ie-tour-center{text-align:left;margin-bottom:16px}

  .ie-tour-steps{gap:8px}
  .ie-tour-steps li{padding:14px 16px;font-size:.96rem;line-height:1.45;gap:12px}
  .ie-tour-step-n{font-size:.78rem}

  .ie-tour-equip{border-radius:20px}
  .ie-tour-equip-text{padding:22px 18px 16px}
  .ie-tour-note{padding:16px 18px 22px;border-top:1px solid #eef0f2}
  .ie-tour-note p{font-size:.92rem}

  /* ─── «Что смотреть» лентой ─── */

  .ie-tour-cards{
    display:flex;
    gap:12px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    -ms-overflow-style:none;
    /* Лента живёт внутри отступов контейнера. Вытягивать её на всю ширину
       экрана отрицательными полями нельзя: 390 px экрана превращались в 396
       и появлялась горизонтальная прокрутка всей страницы. */
    padding:0 0 4px;
    margin:0;
  }
  .ie-tour-cards::-webkit-scrollbar{display:none}
  /* Хвостик в конце ленты: без него последняя карточка упирается в край. */
  .ie-tour-cards::after{content:"";flex:0 0 2px}
  .ie-tour-card{
    flex:0 0 250px;
    scroll-snap-align:start;
    padding:20px 18px;
    border-radius:18px;
  }
  .ie-tour-card-n{width:38px;height:38px;border-radius:12px;font-size:.9rem}
  .ie-tour-card h3{margin:14px 0 6px;font-size:1.02rem}
  .ie-tour-card p{font-size:.9rem;line-height:1.5}

  /* ─── тёмные карточки ─── */

  .ie-tour-dark{border-radius:20px;padding:26px 20px}
  .ie-tour-dark-lead{font-size:.94rem;margin-bottom:20px}
  .ie-tour-traps{gap:16px}
  .ie-tour-trap{padding-top:14px}
  .ie-tour-trap-tag{font-size:.72rem;margin-bottom:6px}
  .ie-tour-trap p{font-size:.94rem}

  /* ─── что прислать и вопросы ─── */

  .ie-tour-two{gap:34px}
  .ie-tour-checks li{font-size:.95rem;line-height:1.45}
  .ie-tour-faq-item > summary{font-size:.96rem;padding:15px 16px;min-height:48px}
  .ie-tour-faq-item > p{padding:0 16px 16px;font-size:.92rem}

  /* ─── галерея лентой ─── */

  .ie-tour-gal,
  .ie-tour-gal--1,
  .ie-tour-gal--2,
  .ie-tour-gal--3,
  .ie-tour-gal--4{
    display:flex;
    grid-template-columns:none;
    gap:10px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    -ms-overflow-style:none;
    padding:0 0 4px;
    margin:0;
  }
  .ie-tour-gal::-webkit-scrollbar{display:none}
  .ie-tour-gal::after{content:"";flex:0 0 2px}
  .ie-tour-gal-item{
    flex:0 0 260px;
    height:180px;
    scroll-snap-align:start;
    border-radius:16px;
  }
  .ie-tour-gal-item figcaption{padding:22px 14px 12px;font-size:.8rem}
  .ie-tour-gal-head{margin-bottom:14px}
  .ie-tour-gal-head p{font-size:.92rem}

  /* ─── форма ─── */

  .ie-tour-form-side{padding:26px 20px 22px}
  .ie-tour-form-body{padding:22px 20px 26px}
  .ie-tour-form-facts li{font-size:.94rem}
}

/* Совсем узкие экраны: карточки ленты чуть уже, чтобы за краем было видно
   начало следующей — это и есть подсказка, что лента листается. */
@media (max-width:389.98px){
  .ie-tour-card{flex-basis:230px}
  .ie-tour-gal-item{flex-basis:240px;height:165px}
}

/* Слайдер в колонке первого экрана. Ширину надо задать явно: слайды лежат
   абсолютно, своей ширины у блока нет, и браузер брал её из соотношения
   сторон — получалось 3×2 пикселя вместо снимка. */
@media (max-width:767.98px){
  .ie-tour-hero-shot,
  .ie-tour-slides{width:100%;max-width:none;align-self:stretch}
}

/* Свет внутри карточки рисовала сама форма: у .form.formBlackBG есть
   ::before и ::after с бирюзовыми радиальными градиентами 360×360 и
   340×340. В своей тёмной секции они читаются как подсветка, а внутри
   нашей карточки обрезались её краем и давали прямые границы поверх полей.
   Класса formBlackBG у этой формы больше нет (см. ie-form-dark ниже), так
   что градиенты и не появляются; правило оставлено на случай, если форму
   поставят сюда с другим оформлением. */
.ie-tour-form-body .form::before,
.ie-tour-form-body .form::after{content:none}

/* Мгновенная смена кадра при системной настройке «уменьшить анимацию».
   Правило стоит в конце файла намеренно: описание перехода у слайда идёт
   ниже первого медиа-блока, и при равной силе побеждало оно. */
@media (prefers-reduced-motion:reduce){
  .ie-tour-slide,
  .ie-tour-dot,
  .ie-tour-slider-btn{transition:none}
}

/* ─── пузырь чата на телефоне ───────────────────────────────────────────
   Виджет ставит себя на 20 px от низа экрана, а с 25.08.2026 там стоит наша
   панель навигации высотой 57 px — пузырь ложился прямо на «Профиль».
   Сначала я поднял его над панелью, но на узком экране круг 56 px всё равно
   съедает угол витрины и спорит с панелью за то же движение большого пальца.
   Решение владельца: на телефоне чата нет совсем — связаться можно кнопкой
   в панели и формой на странице. На широком экране пузырь остаётся.

   !important здесь неизбежен: виджет задаёт положение и видимость своими
   стилями, до которых нам не дотянуться иначе. */
@media (max-width:767.98px){
  /* Своя кнопка чата: она печатается в разметке всегда, потому что ширину
     экрана на сервере не знают. Прячем её стилем — до первой отрисовки, а
     не скриптом, иначе круг успевает мигнуть при обновлении страницы. */
  .ie-chat-launcher{display:none!important}
  /* И сам виджет — на случай, если он всё же поднялся: например, окно
     сузили уже после загрузки. */
  .woot-widget-bubble,
  .woot--bubble-holder,
  .woot--bubble-holder .woot-widget-bubble,
  .woot-widget-holder,
  .woot-widget-bubble.woot-elements--right,
  .woot-widget-bubble.woot--close{display:none!important}
}


/* ═══════════════════════════════════════════════════════════════════════
   Тёмная форма заявки — ie-form-dark
   ═══════════════════════════════════════════════════════════════════════
   Форма заявки на сайте одна (веб-форма №2) и приходит одним шаблоном.
   Оформлений у неё два, и раньше оба звались formBlackBG: экран /callback/,
   где она стоит одна на белом фоне светлой карточкой, и эта страница, где
   она лежит внутри тёмной карточки. Один класс на два вида — это и есть
   причина, по которой каждая правка светлого экрана ломала тёмный и
   наоборот; чинилось это селекторами подлиннее, то есть не чинилось.

   Теперь оформления разведены: /callback/ отдаёт formBlackBG, эта страница
   — ie-form-dark. Разметка, проверки и согласие у формы общие: разошлась
   только шкура.

   Корень селектора здесь — body .form.callbackForm.ie-form-dark, буква в
   букву как у светлого набора выше. Это не перестраховка: собственные
   правила темы вида body .form.callbackForm input[type=text] весят столько
   же, что и правило с одним нашим классом, а грузятся позже — при равном
   весе побеждает поздний. Две ветки одинакового веса не спорят друг с
   другом: у формы всегда ровно одна из них. */

body .form.callbackForm.ie-form-dark{
  background:none;border:0;border-radius:0;box-shadow:none;padding:0;
}

body .form.callbackForm.ie-form-dark input[type="text"],
body .form.callbackForm.ie-form-dark input[type="email"],
body .form.callbackForm.ie-form-dark input[type="tel"],
body .form.callbackForm.ie-form-dark textarea,
body .form.callbackForm.ie-form-dark select{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  border-radius:13px;
}
body .form.callbackForm.ie-form-dark input::placeholder,
body .form.callbackForm.ie-form-dark textarea::placeholder{color:rgba(255,255,255,.45)}
body .form.callbackForm.ie-form-dark input[type="text"]:focus,
body .form.callbackForm.ie-form-dark input[type="email"]:focus,
body .form.callbackForm.ie-form-dark input[type="tel"]:focus,
body .form.callbackForm.ie-form-dark textarea:focus{
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.4);
  outline:none;
}
body .form.callbackForm.ie-form-dark label,
body .form.callbackForm.ie-form-dark .form-group-placeholder{color:rgba(255,255,255,.6)}
body .form.callbackForm.ie-form-dark label span{color:var(--ie-orange)}
body .form.callbackForm.ie-form-dark .ie-form-consent,
body .form.callbackForm.ie-form-dark .ie-form-consent-text{color:rgba(255,255,255,.6)}
body .form.callbackForm.ie-form-dark .ie-form-consent-text a{color:var(--ie-cyan)}
body .form.callbackForm.ie-form-dark .form-info{color:rgba(255,255,255,.5)}

/* Кнопка отправки. Оранжевая — как везде на сайте. */
body .form.callbackForm.ie-form-dark input[type="submit"],
body .form.callbackForm.ie-form-dark .btn{
  background:var(--ie-orange);color:#fff;border:0;
}
/* Ожидание согласия. На светлом экране кнопка бежевая с белой надписью —
   там она читается. Внутри тёмной карточки это была светлая плашка с белым
   текстом поверх: надпись пропадала совсем. Здесь ожидание показываем
   приглушённой кнопкой в тон карточки. */
body .form.callbackForm.ie-form-dark input[type="submit"].is-waiting,
body .form.callbackForm.ie-form-dark .btn.is-waiting{
  background:rgba(255,255,255,.10);
  color:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.16);
  cursor:not-allowed;
}

/* Колонки формы. Ширину я им когда-то сбросил в auto — на широком экране
   раскладку задаёт своя сетка, и это было незаметно. Но кнопка отправки
   лежит в колонке col-12 col-md-4, и на телефоне съёживалась до 91 px. */
.ie-tour .ie-tour-form-body [class*="col-"]{width:100%}

@media (max-width:767.98px){
  /* Кнопка отправки во всю ширину: на светлой карточке она стоит справа
     отдельным блоком, здесь строкой снизу. */
  body .form.callbackForm.ie-form-dark input[type="submit"],
  body .form.callbackForm.ie-form-dark .btn{
    width:100%;min-height:56px;margin-top:14px;
  }
  body .form.callbackForm.ie-form-dark .questionnaire-block .btn{
    background:transparent;border:1px solid rgba(255,255,255,.2);
    color:rgba(255,255,255,.75);min-height:48px;margin-top:0;
  }
  /* «Позвонить» и «Написать на почту» — запасной путь для экрана заявки.
     Здесь телефон уже стоит рядом с формой, и две кнопки повторяют его. */
  body .form.callbackForm.ie-form-dark .ie-form-fallback{display:none}
}


/* ═══════════════════════════════════════════════════════════════════════
   Внутренняя шапка телефона — ie-topbar
   ═══════════════════════════════════════════════════════════════════════
   На главной шапка тёмная: логотип, поиск, корзина, меню. На внутренней
   странице всё это повторяться не должно — человек уже пришёл, ему нужно
   знать, где он, и уметь вернуться. Раньше внутри лежали обе полосы разом:
   тёмная с логотипом плюс строка с одним словом «Назад», вместе 100 px
   первого экрана. Теперь одна белая полоса 56 px: назад, название страницы,
   корзина и меню.

   Кнопки здесь 44 px, а не 40 как в макете: 44 — наш собственный порог
   цели нажатия (оговорка M-9 мобильного контракта, проверка
   test_цели_нажатия_по_сайту). Четыре недостающих пикселя не видны, а
   промах пальцем — виден.

   Название приходит из ShowTitle — того же заголовка, что стоит в <title>.
   Длинное имя раздела обрезается многоточием: перенос сделал бы полосу
   двухэтажной и прыгающей от страницы к странице. */

.ie-topbar{
  display:flex;align-items:center;gap:8px;
  height:56px;padding:0 8px 0 4px;
  background:#fff;
}
.ie-topbar-back{
  width:44px;height:44px;flex:none;
  border:0;background:transparent;padding:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--ie-navy);font-size:1.25rem;cursor:pointer;
}
.ie-topbar-title{
  flex:1;min-width:0;
  font-weight:800;font-size:1rem;line-height:1.2;color:var(--ie-navy);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ie-topbar-cart,
.ie-topbar-menu{
  width:44px;height:44px;flex:none;
  border:0;border-radius:11px;background:#f4f6f5;padding:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--ie-navy);font-size:1.05rem;cursor:pointer;position:relative;
}
.ie-topbar-cart:hover,
.ie-topbar-menu:hover{color:var(--ie-navy)}
.ie-topbar-count{
  position:absolute;top:-4px;right:-4px;
  min-width:18px;height:18px;padding:0 4px;border-radius:9px;
  background:var(--ie-orange);color:#fff;
  font-weight:800;font-size:.69rem;line-height:18px;text-align:center;
}

@media (max-width:767.98px){
  /* Тёмная полоса с логотипом остаётся только на главной. */
  body.ie-inner .pageHeader-bulk{display:none}
  /* Шапка внутренней страницы стоит в потоке и прилипает к верху: содержимое
     начинается под ней, а не за ней. На страницах с тёмным первым экраном
     она раньше висела поверх — отсюда и брались отступы в 100+ px. */
  body.ie-inner .pageHeader{
    position:sticky;top:0;
    background:#fff;
    border-bottom:1px solid #e7e1da;
    box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
    /* Тема держит верхний отступ в высоту тёмной полосы, чтобы содержимое не
       уходило под неё. Полосы здесь нет — отступ дал бы пустые 56 px. */
    padding-top:0;
  }
  body.ie-inner .pageHeader > .container{
    width:auto;max-width:none;padding:0;margin:0;
  }

}

@media (max-width:767.98px){
  /* Открытое меню занимает весь экран, и своя строка с логотипом и крестиком
     у него есть. Шапка сайта поверх него давала вторую такую же строку: на
     главной — логотип с крестиком дважды подряд, на внутренней — белый шов
     над тёмным экраном. Пока меню открыто, шапки нет.

     Крестик меню нажимает кнопку в шапке (там живёт переключатель темы) —
     скрытый элемент по-прежнему принимает программное нажатие, поэтому
     закрытие работает. */
  body.has-mobileMenu .pageHeader{display:none}
}


/* ═══════════════════════════════════════════════════════════════════════
   Раздел каталога на телефоне: сначала товар
   ═══════════════════════════════════════════════════════════════════════
   На широком экране баннер раздела работает: картинка слева, заголовок и
   описание справа, витрина сразу под ними. На телефоне он превращался в
   346 px тёмного экрана, за которым шли лента подразделов, кнопка подбора
   и строка сортировки — до первой карточки 733 px, два с половиной экрана
   на странице, куда человек пришёл именно за карточками.

   Текст при этом нужен: он объясняет раздел и его читает поиск. Поэтому
   баннер не прячем, а переставляем под витрину — порядком во флексе, а не
   вторым куском разметки: две копии одного текста на странице поисковику
   не нужны. Картинку баннера на телефоне убираем: она декоративная, а
   место занимает экранное.

   Заголовок раздела при этом не пропадает из первого экрана — он стоит в
   белой полосе сверху (ie-topbar). */

@media (max-width:767.98px){
  body.ie-catalog-section main{display:flex;flex-direction:column}
  body.ie-catalog-section main > *{order:2}
  body.ie-catalog-section main > .heroUnit{order:9}

  body.ie-catalog-section .heroUnit picture{display:none}
  body.ie-catalog-section .heroUnit-item{background:#fff}
  body.ie-catalog-section .heroUnit-item-text{
    position:static;background:none;padding:26px 0 8px;min-height:0;
  }
  body.ie-catalog-section .heroUnit-item-text-title{
    font-size:1.45rem;line-height:1.2;color:var(--ie-navy);margin-bottom:10px;
  }
  body.ie-catalog-section .heroUnit-item-text-description{
    color:#5a6672;font-size:.94rem;line-height:1.5;
  }
  body.ie-catalog-section .heroUnit-item-text-description p{margin-bottom:10px}
  body.ie-catalog-section .heroUnit-item-text-button{margin-top:14px}
  body.ie-catalog-section .heroUnit-item-text-button .btn{width:100%;min-height:52px}
}


/* ─── строка подбора и порядка на телефоне ───────────────────────────────
   Одна липкая строка чипов вместо двух полос: «Подбор» переезжает сюда
   скриптом (facets.js), дальше идут ключи сортировки. Прилипает под белой
   шапкой, поэтому и после прокрутки видно, чем отобрана витрина. */

@media (max-width:767.98px){
  .ie-toolbar{
    position:sticky;top:56px;z-index:6;
    display:block;
    margin:0 -16px 12px;padding:8px 16px;
    background:#fff;border-bottom:1px solid #e7e1da;
  }
  .ie-toolbar-sort{
    display:flex;align-items:center;gap:8px;
    overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
    /* Отступы внутри ленты, иначе первый чип липнет к краю экрана. */
    margin:0 -16px;padding:0 16px;
  }
  .ie-toolbar-sort::-webkit-scrollbar{display:none}
  .ie-toolbar-caption{display:none}
  /* «Показывать по» на телефоне не нужен: страницы листаются нумерацией
     внизу, а в узкой строке это ещё четыре цели подряд. */
  .ie-toolbar-count{display:none}

  .ie-toolbar-sort-item{
    flex:none;height:44px;padding:0 15px;
    display:inline-flex;align-items:center;gap:5px;
    border:1px solid #e7e1da;border-radius:999px;background:#fff;
    font-size:.83rem;font-weight:700;color:var(--ie-navy);white-space:nowrap;
  }
  .ie-toolbar-sort-item.is-on{
    background:var(--ie-navy);border-color:var(--ie-navy);color:#fff;
  }

  /* «Подбор» — тот же чип, только с меткой числа выбранных осей. */
  .ie-toolbar-sort .ie-facets-open{
    flex:none;width:auto;min-height:44px;height:44px;
    padding:0 14px;gap:7px;
    border-radius:999px;font-size:.83rem;font-weight:700;
  }
  .ie-toolbar-sort .ie-facets-open-count{
    min-width:18px;height:18px;font-size:.69rem;
  }

  /* Пустая колонка подбора после переезда кнопки: панель открывается поверх
     страницы, в потоке ей места не нужно. */
  .catalogSectionAside{margin-bottom:0}
  .ie-facets:not(.is-open){min-height:0}

  /* Витрина начинается сразу под лентой подразделов. Отступ в 60 px от
     класса margin2 рассчитан на широкий экран, где он отделяет баннер от
     товара; на телефоне баннера здесь уже нет, и это была пустая треть
     экрана между лентой и строкой подбора. */
  body.ie-catalog-section .catalogSection-wrap{margin-top:16px;margin-bottom:24px}

  /* Подпись кнопки в карточке бывает длинной («Сообщить о поступлении») и
     не влезала в одну строку: высота была задана жёстко, и вторая строка
     обрезалась ровно посередине букв. */
  .catalogItem .btn{height:auto;min-height:44px;padding:9px 12px;line-height:1.25}
}


/* ═══════════════════════════════════════════════════════════════════════
   Главная на телефоне: карточка заявки вместо формы во весь экран
   ═══════════════════════════════════════════════════════════════════════
   Тёмная карточка из прототипа: заголовок, строка, кнопка и телефон.
   Форма расчёта лежит следом и по умолчанию свёрнута — раскрывается по
   кнопке. На широком экране всё наоборот: карточки нет, форма на месте. */

.ie-home-cta{
  margin:22px 16px;padding:20px 18px 18px;
  border-radius:16px;background:var(--ie-navy);
  display:flex;flex-direction:column;gap:12px;
}
.ie-home-cta-title{
  font-weight:800;font-size:1.22rem;line-height:1.22;color:#fff;
}
.ie-home-cta-text{
  margin:0;font-size:.92rem;line-height:1.5;color:rgba(255,255,255,.7);
}
.ie-home-cta-btn{
  min-height:52px;border:0;border-radius:12px;
  background:var(--ie-orange);color:#fff;
  font-weight:800;font-size:.98rem;cursor:pointer;
}
.ie-home-cta-call{
  min-height:48px;border:1px solid rgba(255,255,255,.28);border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:.92rem;
}
.ie-home-cta-call:hover{color:#fff}

@media (max-width:767.98px){
  .ie-home-calc{display:none}
  .ie-home-calc.is-open{display:block}
}


/* ═══════════════════════════════════════════════════════════════════════
   Главная на телефоне: короче на четыре экрана
   ═══════════════════════════════════════════════════════════════════════
   На телефон была выложена десктопная страница: девять блоков подряд,
   каждый со своим крупным заголовком, вводкой и большими карточками —
   9 487 px прокрутки. В прототипе главная умещается примерно в 2 800: у
   каждого блока один заголовок, карточки мельче, длинные списки лежат
   лентой вбок. Здесь то же самое, но на нашем содержимом: ничего не
   выкидываем — уменьшаем шаг, кегль и высоту карточек.

   Все правила только для телефона: на широком экране страница прежняя. */

@media (max-width:767.98px){

  /* ─── общий шаг между блоками ─── */
  .ie-catmap,
  .cycleFlow,
  .ie-cases,
  .ie-prod{padding-top:26px;padding-bottom:26px}
  .ie-catmap-title,
  .cycleFlow .blockTitle,
  .ie-cases-title,
  .ie-prod-title{font-size:1.35rem;line-height:1.2;margin-bottom:8px}
  .cycleFlow .font20,
  .ie-cases-lead,
  .ie-prod-lead{font-size:.94rem;line-height:1.5;margin-bottom:14px}

  /* ─── каталог: плитка, как в прототипе ─── */
  /* Раскрытая колонка подразделов на телефоне занимала 241 px под плиткой
     и повторяла то, что открывается нажатием на саму плитку. */
  .ie-catmap-panes{display:none}
  .ie-catmap-card{min-height:0}
  .ie-catmap-card-shot,
  .ie-catmap-card-image{height:84px}

  /* ─── полный цикл: четыре строки вместо четырёх столбцов ─── */
  .cycleFlow .ie-cols{display:flex;flex-direction:column;gap:10px}
  .cycleFlow .ie-col{
    display:flex;align-items:flex-start;gap:12px;
    /* Столбец занимал ровно половину ширины (flex:0 0 50%) — на телефоне
       это 180 px на строку, где текст ложился по одному слову. */
    flex:0 0 auto;width:100%;max-width:none;
    min-height:0;padding:0;text-align:left;
  }
  .cycleFlow .ie-node{flex:none;width:38px;height:38px;margin:0}
  .cycleFlow .ie-node img{width:20px;height:20px}
  /* Текст шага занимает всю оставшуюся ширину: без flex:1 он сжимался до
     130 px и «Исследования и конструкторская проработка» ложилось в
     четыре строки по одному слову. */
  .cycleFlow .ie-txt{flex:1;min-width:0;text-align:left}
  .cycleFlow .ie-txt-title{font-size:.98rem;line-height:1.25;margin-bottom:2px}
  .cycleFlow .ie-txt-desc{font-size:.86rem;line-height:1.4}
  /* Полоса с искрами рисует связь между столбцами — в колонку её не
     переносим: связи по вертикали она не показывает, а место занимает. */
  .cycleFlow .ie-flow-rail,
  .cycleFlow .ie-rail-fill,
  .cycleFlow .ie-spark-track{display:none}

  /* ─── кейсы и производство: карточки ниже ─── */
  .ie-case-photo{height:150px}
  .ie-case-body{padding:14px 16px 16px}
  .ie-case-title{font-size:1.02rem;line-height:1.25}
  .ie-case-text,
  .ie-case-result{font-size:.88rem;line-height:1.45}
  .ie-prod-shot img{height:112px;object-fit:cover}
  .ie-prod-cap{font-size:.86rem;line-height:1.4}

  /* ─── карта и контакты одной карточкой ─── */
  .ie-map-frame iframe,
  .ie-map-unlock{height:170px;min-height:0}
  .ie-map-card{padding:16px}
  .ie-map-card h3{font-size:1.1rem}
  .ie-map-card p{font-size:.9rem;line-height:1.45;margin-bottom:6px}
}


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

@media (max-width:767.98px){
  /* Цепочка полного цикла: своя внутренняя рамка на телефоне не нужна,
     строки и так читаются сверху вниз. */
  .cycleFlow .ie-flow{padding:0;margin:0 0 14px}
  .cycleFlow .ie-cols{padding:0}
  .cycleFlow .row:last-child p{font-size:.88rem;line-height:1.45}

  /* Новости: 90 px воздуха сверху и снизу — это половина экрана телефона
     только на отступы. Сами карточки лежат лентой вбок, как услуги и
     кейсы: четыре новости в столбик — это 800 px, которые почти никто не
     доскроллит. */
  .container.margin3{margin-top:26px;margin-bottom:26px}
  .container.margin3 > .news{
    display:flex;gap:12px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;-ms-overflow-style:none;
    margin:0 -16px;padding:0 16px 4px;
  }
  .container.margin3 > .news::-webkit-scrollbar{display:none}
  .container.margin3 > .news > *{
    flex:0 0 260px;scroll-snap-align:start;
  }

  /* Карта: 287 px превью плюс карточка адреса — почти экран. Превью
     достаточно на 180: это ориентир «где мы», а не рабочая карта.
     Высота задана переменной --ie-map-h (см. выше, там !important) —
     меняем переменную, а не спорим с правилом. */
  .ie-map-frame{--ie-map-h:180px}
  .ie-map-reveal{padding-bottom:26px}
  .ie-map-card{padding:14px 16px}
}

/* ── Раздел без товаров ──────────────────────────────────────────────────
   96 активных разделов из 98 не содержат позиций: дерево строилось на
   вырост. Без явного блока человек читал описание и упирался в список
   соседних разделов — страница выглядела не пустой, а сломанной.
   Оформляем как предложение, а не как извинение: сборка под заказ у нас
   не запасной вариант, а основная услуга. */
.ie-section-empty{
  margin:26px 0 0;padding:26px 28px;
  border:1px solid var(--ie-border);border-left:3px solid var(--ie-orange);
  border-radius:10px;background:var(--ie-bg-soft)}
.ie-section-empty-title{
  font-size:1.15rem;font-weight:700;color:var(--ie-navy);margin:0 0 8px}
.ie-section-empty-text{
  margin:0 0 18px;max-width:62ch;color:var(--ie-text-muted);line-height:1.55}
.ie-section-empty-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.ie-section-empty-link{
  font-weight:600;color:var(--ie-navy);text-decoration:underline;
  text-underline-offset:3px}
.ie-section-empty-link:hover{color:var(--ie-orange)}
@media (max-width:767.98px){
  /* На телефоне блок идёт сразу под описанием и часто является первым
     содержательным экраном — поля меньше, кнопка на всю ширину. */
  .ie-section-empty{padding:20px 18px;margin:20px 0 0}
  .ie-section-empty-title{font-size:1.05rem}
  .ie-section-empty-actions{gap:12px}
  .ie-section-empty-actions .btn{width:100%;text-align:center}
}

/* ── Счётчик в плитке товара ─────────────────────────────────────────────
   После «Заказать» кнопка уступает место счётчику «− N +». Размер и радиус
   держим как у самой кнопки: счётчик встаёт на её место, и плитка не
   дёргается по высоте при переключении — иначе ряд карточек прыгает. */
.ie-tile-count{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;height:42px;padding:0 6px;
  border:1px solid var(--ie-orange);border-radius:8px;background:#fff}
.ie-tile-count-btn{
  flex:none;width:34px;height:34px;border:0;border-radius:6px;
  background:var(--ie-bg-soft);color:var(--ie-navy);
  font-size:20px;line-height:1;cursor:pointer;
  display:grid;place-items:center;
  transition:background .15s ease,color .15s ease}
.ie-tile-count-btn:hover{background:var(--ie-orange);color:#fff}
.ie-tile-count-value{
  flex:1;text-align:center;font-weight:700;font-size:1rem;color:var(--ie-navy);
  font-variant-numeric:tabular-nums}
/* Здесь было .ie-tile-busy{pointer-events:none} на время запроса. Убрано:
   счётчик теперь рисует намерение человека сразу, а сеть догоняет следом, —
   гасить нажатия не нужно и вредно. Правило делало ровно то, на что пожаловались:
   пока летел запрос, по «+» было не попасть. */
.ie-tile-count-btn{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
/* Кнопка «Запросить цену» на месте «Заказать» у товара без опубликованной цены.
   Это ссылка, а не кнопка, поэтому нужны выравнивание и высота — иначе плитка
   в ряду прыгает. Вид спокойнее обычной кнопки заказа: действие другое, и
   выдавать его за покупку не надо. */
.ie-price-request-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:100%;min-height:42px;padding:0 14px;
  border:1px solid var(--ie-orange);border-radius:8px;
  background:#fff;color:var(--ie-orange);
  font-weight:600;text-align:center;text-decoration:none;
  transition:background .15s ease,color .15s ease}
.ie-price-request-btn:hover,
.ie-price-request-btn:focus{background:var(--ie-orange);color:#fff;text-decoration:none}

/* Панель заявки «Запросить цену» — открывается на самом товаре, не уводя с
   витрины: параллельно у человека живёт корзина, и выбрасывать его с каталога
   ради вопроса о цене неправильно. */
.ie-request{position:fixed;inset:0;z-index:10100;display:none}
.ie-request--open{display:block}
.ie-request-backdrop{position:absolute;inset:0;background:rgba(var(--ie-navy-rgb),.55)}
.ie-request-box{
  position:relative;margin:6vh auto;max-width:min(520px,94vw);
  max-height:88vh;overflow:auto;
  padding:24px 24px 22px;border-radius:16px;background:#fff;
  box-shadow:0 24px 64px rgba(0,0,0,.3);
  display:flex;flex-direction:column;gap:14px}
.ie-request-close{
  position:absolute;top:10px;right:12px;width:34px;height:34px;
  border:0;border-radius:8px;background:transparent;
  font-size:26px;line-height:1;color:var(--ie-text-muted);cursor:pointer}
.ie-request-close:hover{background:var(--ie-bg-soft);color:var(--ie-navy)}
.ie-request-title{font-size:1.25rem;font-weight:700;color:var(--ie-navy);padding-right:36px}
.ie-request-item{
  padding:10px 12px;border-radius:10px;background:var(--ie-bg-soft);
  font-weight:600;color:var(--ie-navy);line-height:1.35}
.ie-request-row{display:flex;flex-direction:column;gap:6px;font-size:.9rem;color:var(--ie-text-muted)}
.ie-request-row i{color:var(--ie-orange);font-style:normal}
.ie-request-row input[type=text],
.ie-request-row textarea{
  width:100%;padding:11px 12px;border:1px solid var(--ie-border-soft);
  border-radius:10px;font:inherit;color:var(--ie-navy);background:#fff}
.ie-request-row input:focus,
.ie-request-row textarea:focus{outline:none;border-color:var(--ie-orange)}
.ie-request-qty{display:inline-flex;align-items:center;gap:8px}
.ie-request-qty button{
  width:38px;height:42px;border:1px solid var(--ie-border-soft);border-radius:10px;
  background:var(--ie-bg-soft);color:var(--ie-navy);font-size:20px;cursor:pointer}
.ie-request-qty button:hover{background:var(--ie-orange);color:#fff;border-color:var(--ie-orange)}
/* Ширину поля количества задаём с той же силой, что общее правило полей выше
   (оно ставит width:100%), иначе строка растягивается на всю панель и «5»
   висит посреди пустоты. */
.ie-request-row .ie-request-qty input[type=text]{
  width:96px;text-align:center;font-variant-numeric:tabular-nums}
.ie-request-agree{display:flex;gap:10px;align-items:flex-start;font-size:.82rem;
  line-height:1.4;color:var(--ie-text-muted)}
/* Тема снимает у флажков системный вид (appearance:none), и наш флажок
   оказывался невидимым квадратом 18x18: человек читал текст про согласие и не
   понимал, где отмечать. Рисуем его сами — это требование закона, а не
   украшение: без отметки заявку не принимает сервер. */
.ie-request-agree input[type=checkbox]{
  appearance:none;-webkit-appearance:none;
  margin:2px 0 0;width:18px;height:18px;flex:none;cursor:pointer;
  border:1.5px solid var(--ie-border-soft);border-radius:5px;background:#fff;
  display:grid;place-content:center;transition:background .15s ease,border-color .15s ease}
.ie-request-agree input[type=checkbox]::before{
  content:'';width:10px;height:10px;transform:scale(0);
  background:#fff;clip-path:polygon(14% 44%,0 60%,39% 100%,100% 18%,84% 0,39% 68%);
  transition:transform .12s ease}
.ie-request-agree input[type=checkbox]:checked{
  background:var(--ie-orange);border-color:var(--ie-orange)}
.ie-request-agree input[type=checkbox]:checked::before{transform:scale(1)}
.ie-request-agree input[type=checkbox]:focus-visible{outline:2px solid var(--ie-orange);outline-offset:2px}
.ie-request-error{
  padding:10px 12px;border-radius:10px;
  background:rgba(220,53,69,.08);color:#b02a37;font-size:.88rem;line-height:1.4}
.ie-request-send{width:100%;min-height:48px}
.ie-request-done{
  padding:12px;border-radius:10px;background:rgba(40,167,69,.1);
  color:#1e7e34;font-size:.92rem;line-height:1.4;text-align:center}
/* После отправки поля убираем — остаётся подтверждение и крестик. */
.ie-request-box--sent .ie-request-row,
.ie-request-box--sent .ie-request-agree,
.ie-request-box--sent .ie-request-send,
.ie-request-box--sent .ie-request-item{display:none}
@media (max-width:767px){
  .ie-request-box{margin:0;max-width:100%;min-height:100%;border-radius:0;padding:20px 16px 28px}
}
/* Сообщение о неудаче с корзиной. Всплывает снизу, само уходит через 6 с.
   Нужно потому, что раньше отказ выглядел как «кнопка не работает»: счётчик
   прятался, кнопка возвращалась, и человек не знал, что делать. */
.ie-cart-error{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);
  z-index:10050;max-width:min(92vw,420px);
  padding:12px 16px;border-radius:10px;
  background:var(--ie-navy,#2f3640);color:#fff;
  font-size:.9rem;line-height:1.35;text-align:center;
  box-shadow:0 8px 28px rgba(0,0,0,.28);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease,visibility .2s}
.ie-cart-error--show{opacity:1;visibility:visible;transform:translate(-50%,0)}
/* Нижняя панель на телефоне перекрыла бы сообщение. */
@media (max-width:767px){ .ie-cart-error{bottom:84px} }
.ie-tile-count-btn:active{background:var(--ie-orange);color:#fff}

/* Реквизиты продавца в подвале: наименование, ИНН, ОГРН, адрес, телефон,
   почта. Набор мельче копирайта и приглушён — это обязательная справка, а
   не то, за чем человек пришёл; читаемость сохраняем (12 px, межстрочный
   1.5, контраст выше минимума). На телефоне подвала нет, поэтому отдельного
   мобильного правила не требуется — сведения там доступны через меню и на
   странице контактов. */
/* Селектор с родителем обязателен: у темы кегль подвала задан правилом
   той же силы и объявлен позже — без уточнения строка реквизитов
   отрисовывалась в 14,4 px вместо 12 (замер 08.09.2026). */
.pageFooter-legalrow .pageFooter-requisites{
  margin-top:8px;font-size:12px;line-height:1.5;opacity:.72;
}
.pageFooter-requisites a{color:inherit;text-decoration:underline}

/* Итог корзины на компьютере: «Товары ()₁» и вечная крутилка (15.09.2026).
   1) Правило Битрикса `.basket-checkout-container-total-price > div span`
      (float, отступ, серая подложка, top:5px) и `span:last-child{float:right}`
      цепляют и вложенный счётчик в «Товары (<span>N</span>)» — цифра
      выпадала из скобок вправо и вниз. На телефоне это перебито в
      mobile/cart.css, на компьютере не было.
   2) Крутилка «пересчитываю» должна быть видна только с классом .active
      (его ставит js/component.js на время запроса). Правило об этом есть в
      style.css компонента, но Битрикс подключает style.min.css, а в нём
      его нет с самого импорта сайта — крутилка висела всегда. */
.basket-checkout-container-wrap .basket-checkout-container-total-price > div span[data-entity="basket-total-count"]{
  float:none;padding:0;background:none;position:static;top:auto;
}
.basket-checkout-container-title .block-load.icon-spin4::before{display:none}
.basket-checkout-container-title .block-load.icon-spin4.active::before{
  display:inline-block;animation:ie-basket-spin 2s linear infinite;
}
@keyframes ie-basket-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .basket-checkout-container-title .block-load.icon-spin4.active::before{animation:none}
}

/* ---------------------------------------------------------------
   Витрина раздела (section_showcase.php): три фото и три колонки
   «лаборатория, разработка, плюсы» над каталогом. 23.09.2026.
   На телефоне фото листаются вбок: три кадра в столбик съедали
   весь первый экран, и до товаров надо было долго прокручивать.
   --------------------------------------------------------------- */
.ie-showcase{margin:34px 0 8px}
.ie-showcase-title{font-size:1.6rem;line-height:1.25;font-weight:600;color:var(--ie-navy);margin:0 0 18px}
.ie-showcase-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ie-showcase-photo{margin:0;border-radius:12px;overflow:hidden;background:var(--ie-bg-soft);position:relative}
.ie-showcase-photo img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.ie-showcase-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 10px;font-size:.84rem;
  color:#fff;background:linear-gradient(180deg,rgba(var(--ie-navy-rgb),0) 0%,rgba(var(--ie-navy-rgb),.78) 100%)}
.ie-showcase-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.ie-showcase-col{padding:18px 20px;border:1px solid var(--ie-border-soft);border-radius:12px;background:#fff}
.ie-showcase-col h3{font-size:1.05rem;font-weight:600;color:var(--ie-navy);margin:0 0 8px;padding-left:12px;
  border-left:3px solid var(--ie-orange)}
.ie-showcase-col p{margin:0;font-size:.92rem;line-height:1.55;color:var(--ie-navy)}
.ie-showcase-col ul{margin:0;padding:0;list-style:none}
.ie-showcase-col li{position:relative;padding-left:16px;font-size:.92rem;line-height:1.55;color:var(--ie-navy)}
.ie-showcase-col li+li{margin-top:4px}
.ie-showcase-col li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;
  background:var(--ie-orange)}
@media (max-width:991.98px){
  .ie-showcase-cols{grid-template-columns:1fr}
}
@media (max-width:767.98px){
  .ie-showcase{margin-top:24px}
  .ie-showcase-title{font-size:1.32rem}
  .ie-showcase-photos{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;
    margin:0 -16px;padding:0 16px;scroll-padding-inline:16px;scrollbar-width:none}
  .ie-showcase-photos::-webkit-scrollbar{display:none}
  .ie-showcase-photo{flex:0 0 82%;scroll-snap-align:start}
}

/* ---------------------------------------------------------------
   Шапка раздела с листалкой снимков (heroUnit--slides), 24.09.2026.
   Раскладка первого экрана промышленного туризма (.ie-tour-hero-inner):
   сетка 1.05fr / .95fr, зазор 56 px, текст слева, справа вертикальный
   кадр 4:5 (588x736 на экране 1440), плашка заходит на левый край кадра.
   Картинки с батарейкой нет, тёмный фон задан явно (раньше его давала она).
   Снимки и стрелки берут стили листалки туризма (.ie-tour-*): один вид.
   --------------------------------------------------------------- */
.heroUnit.heroUnit--slides{height:auto;min-height:0}
.heroUnit--slides .heroUnit-item{background:#17191c;height:auto}
.heroUnit--slides .heroUnit-item-text{position:relative;height:auto;padding:196px 0 78px}
.heroUnit--slides .heroUnit-item-text .container{height:auto}
.ie-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:stretch}
/* Левая колонка ровно по карточке справа: заголовок у её верхнего края,
   последний блок у нижнего; лишняя высота уходит в зазор над блоками. */
.ie-hero-grid-text{display:flex;flex-direction:column}
/* Карточка со снимком растягивается на высоту левой колонки: верх и низ
   совпадают на любой ширине экрана (при фиксированных 4:5 на 1280-1440
   текст переносился сильнее и низы расходились). Снимок обрезается cover. */
.ie-hero-grid-shot{display:flex}
.ie-hero-grid-shot .ie-showcase-slider{display:flex;flex-direction:column}
.ie-hero-grid-shot .ie-showcase-slides{aspect-ratio:auto;flex:1 1 auto;min-height:520px}
.ie-hero-grid-text .ie-showcase-cols--hero{margin-top:auto;padding-top:22px}
/* Левая колонка не должна перерастать карточку справа (736 px на экране 1440):
   иначе она тянет строку сетки вниз, и низы расходятся. Отсюда плотный текст. */
.heroUnit--slides .heroUnit-item-text-title{font-size:3.4rem}
.heroUnit--slides .ie-hero-subtitle{font-size:1.45rem;margin-top:16px}
.heroUnit--slides .heroUnit-item-text-description{margin-top:16px;margin-bottom:0;font-size:1.02rem;line-height:1.5}
.heroUnit--slides .heroUnit-item-text-button{margin-top:22px}
.heroUnit--slides .heroUnit-item-text-button .btn{height:56px;padding:13px 38px;font-size:1.2rem;border-radius:16px}
.ie-showcase-cols--hero{gap:10px}
.ie-showcase-cols--hero .ie-showcase-col{padding:12px 16px}
.ie-showcase-cols--hero .ie-showcase-col p,.ie-showcase-cols--hero .ie-showcase-col li{font-size:.86rem;line-height:1.45}
/* заголовок стоит вровень с верхним краем снимка: у темы у заголовка свой
   отступ сверху и крупная строка, их прижимаем */
.heroUnit--slides .heroUnit-item-text-title{margin-top:-4px;line-height:1}
/* Три блока в шапке: тёмные, в тон шапке, компактнее, чем на белом */
.ie-showcase-cols--hero{display:grid;grid-template-columns:1fr;gap:12px}
.ie-showcase-cols--hero .ie-showcase-col{padding:14px 18px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);border-radius:14px}
.ie-showcase-cols--hero .ie-showcase-col h3{color:#fff;font-size:1rem;margin-bottom:6px}
.ie-showcase-cols--hero .ie-showcase-col p,
.ie-showcase-cols--hero .ie-showcase-col li{color:rgba(255,255,255,.78);font-size:.9rem;line-height:1.5}
.ie-showcase-cols--hero ul{display:grid;grid-template-columns:1fr 1fr;column-gap:18px}
/* блок под шапкой при листалке нужен только телефону */
@media (min-width:768px){ .ie-showcase--mobile-only{display:none} }
.heroUnit--slides .heroUnit-item-text-button{margin-bottom:0}
.ie-hero-subtitle{margin:14px 0 0;font-size:1.75rem;line-height:1.2;font-weight:600;color:var(--ie-orange-light)}
.heroUnit--slides .heroUnit-item-text-description{margin-top:22px}
.ie-showcase-title--mobile{display:none}

.ie-showcase-slider{position:relative;width:100%}
.ie-showcase-slides{aspect-ratio:4/5;border-radius:26px}
/* Тема растягивает любую картинку в шапке по высоте и сдвигает вправо
   (.heroUnit-item img: float:right, right:-30%, height:100%): снимки листалки
   из-за этого съезжали. Возвращаем им своё поведение. */
.heroUnit--slides .ie-showcase-slider img,
.ie-showcase-slider img{float:none;position:static;right:auto;width:100%;height:100%;max-width:none;margin:0;object-fit:cover}
.ie-showcase-badge{position:absolute;left:-26px;bottom:34px;z-index:4;display:flex;flex-direction:column;
  padding:16px 22px 16px 18px;border-radius:18px;background:#fff;box-shadow:0 22px 50px rgba(var(--ie-navy-rgb),.28)}
.ie-showcase-badge b{font-size:.98rem;font-weight:600;color:var(--ie-navy)}
.ie-showcase-badge span{font-size:.82rem;color:var(--ie-text-muted)}
.ie-showcase-mobile-slider{display:none}
/* колонки под шапкой: без ряда снимков встают сразу под заголовком */
.ie-showcase-cols--solo{margin-top:0}
@media (max-width:991.98px){
  .ie-hero-grid{grid-template-columns:1fr;gap:38px}
  .ie-showcase-cols--hero ul{grid-template-columns:1fr}
  .ie-hero-grid-shot{max-width:520px}
  .ie-hero-grid-shot .ie-showcase-slides{aspect-ratio:4/5;min-height:0}
  .heroUnit--slides .heroUnit-item-text{padding-top:150px}
  .ie-hero-subtitle{font-size:1.4rem}
  .ie-showcase-badge{left:16px}
}
@media (max-width:767.98px){
  /* шапка раздела на телефоне уезжает под товары: листалка там стоит
     под заголовком витрины, копия в шапке не нужна */
  .ie-hero-grid-shot{display:none}
  .ie-showcase-cols--hero{display:none}
  .ie-showcase-title--mobile{display:block}
  .ie-showcase-mobile-slider{display:block;margin-bottom:16px}
  .ie-showcase-slides{aspect-ratio:4/5;border-radius:16px}
  .ie-showcase-badge{left:12px;bottom:12px;padding:8px 12px}
  .ie-showcase-dots{bottom:64px}   /* над плашкой, иначе ложатся на неё */
}

/* ---------------------------------------------------------------
   Страница «Экстремальные температуры» (/catalog/ekstremalnye-usloviya/),
   29.09.2026. Шапка пополам: слева жара (оранжевый сайта), справа мороз
   (бирюзовый сайта). Шкала диапазонов: полоса идёт от холодного цвета к
   тёплому, ноль отмечен линией. Движение фона выключается при системной
   настройке «уменьшить анимацию».
   --------------------------------------------------------------- */
.ie-ext-hero{position:relative;overflow:hidden;background:#17191c;color:#fff;padding:56px 0 64px}
.ie-ext-half{position:absolute;top:0;bottom:0;width:50%}
.ie-ext-half--hot{left:0;background:
  radial-gradient(120% 90% at 0% 100%, rgba(var(--ie-orange-rgb),.55) 0%, rgba(214,72,32,.35) 35%, transparent 70%),
  linear-gradient(90deg, #2a1712 0%, #17191c 100%)}
.ie-ext-half--cold{right:0;background:
  radial-gradient(120% 90% at 100% 0%, rgba(var(--ie-cyan-rgb),.5) 0%, rgba(40,90,170,.35) 35%, transparent 70%),
  linear-gradient(270deg, #111c26 0%, #17191c 100%)}
/* марево над горячей половиной и иней на холодной */
.ie-ext-half--hot::after{content:"";position:absolute;inset:0;opacity:.35;
  background:repeating-linear-gradient(0deg, transparent 0 14px, rgba(255,170,90,.12) 14px 16px);
  animation:ie-ext-haze 6s ease-in-out infinite alternate}
.ie-ext-half--cold::after{content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.55) 1px, transparent 1.5px),
                   radial-gradient(rgba(255,255,255,.3) 1px, transparent 1.5px);
  background-size:38px 38px, 23px 23px;background-position:0 0, 11px 17px;
  animation:ie-ext-snow 14s linear infinite}
@keyframes ie-ext-haze{from{transform:translateY(0)}to{transform:translateY(-10px)}}
@keyframes ie-ext-snow{from{background-position:0 0, 11px 17px}to{background-position:0 380px, 11px 247px}}
@media (prefers-reduced-motion:reduce){.ie-ext-half::after{animation:none}}
.ie-ext-hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:32px;align-items:center;min-height:420px}
.ie-ext-hero-side{display:flex;flex-direction:column;gap:6px}
.ie-ext-hero-side--cold{text-align:right;align-items:flex-end}
.ie-ext-label{font-size:.82rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.ie-ext-temp{font-size:4.2rem;line-height:1;font-weight:700;letter-spacing:-.02em}
.ie-ext-hero-side--hot .ie-ext-temp{color:var(--ie-orange-light);text-shadow:0 0 38px rgba(var(--ie-orange-rgb),.55)}
.ie-ext-hero-side--cold .ie-ext-temp{color:var(--ie-cyan-light);text-shadow:0 0 38px rgba(var(--ie-cyan-rgb),.55)}
.ie-ext-note{font-size:.86rem;opacity:.75;max-width:200px}
.ie-ext-hero-center{text-align:center}
.ie-ext-h1{font-size:2.6rem;line-height:1.12;font-weight:700;color:#fff;margin:0 0 16px}
.ie-ext-lead{font-size:1.05rem;line-height:1.55;color:rgba(255,255,255,.82);margin:0 auto 26px;max-width:560px}
.ie-ext-btn{display:inline-block;padding:14px 32px;border-radius:14px;background:var(--ie-orange);color:#fff;font-weight:600;
  text-decoration:none;transition:background .2s ease}
.ie-ext-btn:hover{background:var(--ie-orange-light);color:#fff}
/* тема красит ссылки в оранжевый и подчёркивает их: у кнопки и карточек свой цвет */
a.ie-ext-btn,a.ie-ext-btn:hover,a.ie-ext-btn:focus{color:#fff !important;text-decoration:none !important}
a.ie-ext-card,a.ie-ext-card *{text-decoration:none !important}
a.ie-ext-card .ie-ext-card-name{color:var(--ie-navy)}
a.ie-ext-card .ie-ext-card-note{color:var(--ie-text-muted)}
.ie-ext-lists-grid{align-items:start}

.ie-ext-scale,.ie-ext-lists,.ie-ext-choose{padding:48px 0 8px}
.ie-ext-scale h2,.ie-ext-lists h2,.ie-ext-choose h2{font-size:1.6rem;font-weight:600;color:var(--ie-navy);margin:0 0 8px}
.ie-ext-sub{color:var(--ie-text-muted);font-size:.92rem;margin:0 0 20px}
.ie-ext-chart{position:relative;padding-top:30px}
.ie-ext-axis{position:absolute;top:0;left:300px;right:0;height:100%;pointer-events:none}
.ie-ext-axis span{position:absolute;top:0;transform:translateX(-50%);font-size:.78rem;color:var(--ie-text-muted);white-space:nowrap}
.ie-ext-zero{top:24px !important;bottom:0;width:0;border-left:1px dashed rgba(var(--ie-navy-rgb),.25);transform:none !important}
.ie-ext-row{display:grid;grid-template-columns:300px 1fr;align-items:center;min-height:46px;border-bottom:1px solid var(--ie-border-soft)}
.ie-ext-row-name{font-size:.92rem;padding-right:16px;color:var(--ie-navy)}
.ie-ext-row-name a{color:var(--ie-navy);text-decoration:none;border-bottom:1px solid rgba(var(--ie-orange-rgb),.4)}
.ie-ext-row-name a:hover{color:var(--ie-orange)}
.ie-ext-row-name em{font-style:normal;color:var(--ie-text-muted);font-size:.82rem}
.ie-ext-row-track{position:relative;height:26px}
.ie-ext-bar{position:absolute;top:0;height:26px;border-radius:13px;display:flex;justify-content:space-between;align-items:center;
  padding:0 10px;background:linear-gradient(90deg, var(--ie-cyan) 0%, #8fb7c9 50%, var(--ie-orange) 100%);color:#fff;font-size:.78rem}
.ie-ext-bar b{font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.ie-ext-row--base .ie-ext-bar{background:#c9ced3}
.ie-ext-row--base .ie-ext-row-name{color:var(--ie-text-muted)}

.ie-ext-lists-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ie-ext-list{padding:22px 24px;border-radius:18px;border:1px solid var(--ie-border-soft)}
.ie-ext-list--hot{background:linear-gradient(160deg, rgba(var(--ie-orange-rgb),.1), #fff 60%)}
.ie-ext-list--cold{background:linear-gradient(200deg, rgba(var(--ie-cyan-rgb),.14), #fff 60%)}
.ie-ext-card{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:12px 0;border-top:1px solid var(--ie-border-soft);
  color:var(--ie-navy);text-decoration:none}
.ie-ext-card:hover .ie-ext-card-name{color:var(--ie-orange)}
.ie-ext-card-name{font-size:.95rem;font-weight:500}
.ie-ext-card-range{font-size:.92rem;font-weight:600;white-space:nowrap}
.ie-ext-list--hot .ie-ext-card-range{color:#c75a1c}
.ie-ext-list--cold .ie-ext-card-range{color:#1f7f8a}
.ie-ext-card-note{grid-column:1/-1;font-size:.8rem;color:var(--ie-text-muted)}
.ie-ext-table{width:100%;border-collapse:collapse;font-size:.94rem}
.ie-ext-table th{background:var(--ie-navy);color:#fff;text-align:left;padding:12px 14px;font-weight:600}
.ie-ext-table td{padding:12px 14px;border-bottom:1px solid var(--ie-border-soft);vertical-align:top;color:var(--ie-navy)}
.ie-ext-table a{color:var(--ie-orange)}
.ie-ext-choose{padding-bottom:56px}

@media (max-width:991.98px){
  .ie-ext-hero-inner{grid-template-columns:1fr 1fr;min-height:0}
  .ie-ext-hero-center{grid-column:1/-1;order:-1}
  .ie-ext-temp{font-size:3rem}
  .ie-ext-h1{font-size:2rem}
  .ie-ext-lists-grid{grid-template-columns:1fr}
  .ie-ext-row{grid-template-columns:200px 1fr}
  .ie-ext-axis{left:200px}
}
@media (max-width:767.98px){
  .ie-ext-hero{padding:32px 0 36px}
  .ie-ext-h1{font-size:1.55rem}
  .ie-ext-lead{font-size:.95rem}
  .ie-ext-temp{font-size:2.3rem}
  .ie-ext-note{font-size:.76rem}
  /* шкала на телефоне: название над полосой, ось во всю ширину */
  .ie-ext-row{grid-template-columns:1fr;padding:8px 0}
  .ie-ext-row-name{padding:0 0 6px}
  .ie-ext-axis{left:0}
  .ie-ext-bar{font-size:.7rem;padding:0 7px}
}

/* Экстремальные температуры: уровни и факты из даташитов под позициями */
.ie-ext-tier{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin:22px 0 6px}
.ie-ext-list--hot .ie-ext-tier{color:#c75a1c}
.ie-ext-list--cold .ie-ext-tier{color:#1f7f8a}
.ie-ext-list .ie-ext-sub{margin-bottom:6px}
.ie-ext-facts{margin:2px 0 10px;padding:0 0 0 2px;list-style:none}
.ie-ext-facts li{position:relative;padding-left:16px;font-size:.88rem;line-height:1.5;color:var(--ie-navy);margin-top:4px}
.ie-ext-facts li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%}
.ie-ext-list--hot .ie-ext-facts li::before{background:var(--ie-orange)}
.ie-ext-list--cold .ie-ext-facts li::before{background:var(--ie-cyan)}

/* ---------------------------------------------------------------
   «Антикор» внутри сайта (antikor_promo.php), 29.09.2026. Без градиентов
   и свечений: белые плашки в тон каталогу, оранжевый только у метки и
   кнопки, фото банки как у товара.
   --------------------------------------------------------------- */
.ie-antikor-kicker{display:inline-block;font-size:.78rem;font-weight:600;color:var(--ie-orange);margin-bottom:4px}
.ie-antikor-kicker--announcement{font-size:clamp(1.25rem,2.5vw,2.25rem);font-weight:800;line-height:1.15;letter-spacing:.02em;text-transform:uppercase;margin-bottom:12px}
.ie-antikor-card{display:flex;gap:20px;align-items:center;margin:32px 0 8px;padding:18px 22px;
  border:1px solid var(--ie-border-soft);border-radius:16px;background:#fff}
.ie-antikor-card img{flex:0 0 120px;width:120px;height:120px;object-fit:contain}
.ie-antikor-card-text{display:flex;flex-direction:column;gap:4px}
.ie-antikor-card-text b{font-size:1.05rem;color:var(--ie-navy)}
.ie-antikor-card-text p{margin:0;font-size:.92rem;line-height:1.5;color:#4a545e}
.ie-antikor-card-text a{align-self:flex-start;margin-top:4px;color:var(--ie-orange)}

.ie-antikor-strip{margin:40px 0}
.ie-antikor-strip-box{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:center;
  padding:32px 36px;border:1px solid var(--ie-border-soft);border-radius:22px;background:var(--ie-bg-soft)}
.ie-antikor-strip h2{font-size:2rem;font-weight:700;color:var(--ie-navy);margin:0 0 14px}
.ie-antikor-strip ul{margin:0 0 22px;padding:0;list-style:none}
.ie-antikor-strip li{font-size:.98rem;line-height:1.5;color:#4a545e;padding:6px 0;border-top:1px solid var(--ie-border-soft)}
.ie-antikor-strip li b{color:var(--ie-navy);font-weight:600}
a.ie-antikor-btn{display:inline-block;padding:13px 28px;border-radius:14px;background:var(--ie-orange);color:#fff !important;
  text-decoration:none !important;font-weight:600}
a.ie-antikor-btn:hover{background:var(--ie-orange-light)}
.ie-antikor-strip-pics{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ie-antikor-strip-pics a{display:block;aspect-ratio:3/4;border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--ie-border-soft)}
.ie-antikor-strip-pics img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .35s ease}
.ie-antikor-strip-pics a:hover img{transform:scale(1.04)}

.ie-catmap-cards a.ie-catmap-card--promo{display:flex !important;flex-direction:column;text-decoration:none !important}  /* тема задаёт flex только label-плиткам */
.ie-antikor-new{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;font-size:.7rem;font-weight:600;
  vertical-align:middle;background:var(--ie-orange);color:#fff}

.ie-antikor-line{padding:0 0 56px}
.ie-antikor-line p{margin:0;padding:16px 20px;border-left:3px solid var(--ie-orange);background:var(--ie-bg-soft);
  border-radius:0 12px 12px 0;color:var(--ie-navy)}
.ie-antikor-line a{color:var(--ie-orange)}

@media (max-width:991.98px){
  .ie-antikor-strip-box{grid-template-columns:1fr;padding:24px}
}
@media (max-width:767.98px){
  .ie-antikor-card{flex-direction:column;align-items:flex-start}
  .ie-antikor-strip h2{font-size:1.5rem}
}

/* «Антикор»: две банки крупно, мастика слева, сало справа (ie_antikor_duo). */
.ie-antikor-duo{margin:40px 0 56px}
.ie-antikor-duo-item{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center;margin-bottom:56px}
.ie-antikor-duo-item--flip .ie-antikor-duo-pic{order:2}
.ie-antikor-duo-pic{display:block;border-radius:24px;overflow:hidden;background:#f4f4f5;border:1px solid var(--ie-border-soft)}
.ie-antikor-duo-pic img{display:block;width:100%;height:auto;float:none;margin:0;transition:transform .5s ease}
.ie-antikor-duo-pic:hover img{transform:scale(1.03)}
.ie-antikor-duo-text h2{font-size:2.4rem;font-weight:700;line-height:1.15;color:var(--ie-navy);margin:6px 0 18px}
.ie-antikor-duo-text p{font-size:1.08rem;line-height:1.65;color:#3f4953;margin:0 0 14px}
.ie-antikor-duo-text .ie-antikor-kicker{font-size:.9rem}
.ie-antikor-duo-text a.ie-antikor-btn{margin-top:10px}
@media (max-width:991.98px){
  .ie-antikor-duo-item{grid-template-columns:1fr;gap:24px;margin-bottom:40px}
  .ie-antikor-duo-item--flip .ie-antikor-duo-pic{order:0}
  .ie-antikor-duo-pic{max-width:460px}
  .ie-antikor-duo-text h2{font-size:1.8rem}
}

/* «Антикор»: «Как использовать» под шапкой (ie_antikor_howto), 29.09.2026. */
.ie-antikor-howto{margin:48px 0 16px}
.ie-antikor-howto h2{margin:0 0 20px}
.ie-antikor-howto-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ie-antikor-howto-card{padding:24px 28px;border:1px solid var(--ie-border-soft);border-radius:18px;background:#fff}
.ie-antikor-howto-card h3{font-size:1.2rem;font-weight:600;color:var(--ie-navy);margin:0 0 12px}
.ie-antikor-howto-card ol{margin:0 0 14px;padding-left:20px}
.ie-antikor-howto-card li{font-size:.98rem;line-height:1.55;color:#3f4953;padding:3px 0}
.ie-antikor-howto-card a{color:var(--ie-orange)}
@media (max-width:767.98px){.ie-antikor-howto-grid{grid-template-columns:1fr}}
/* Шапка «Антикора» стоит под хлебными крошками, а не под прозрачным меню,
   как у раздела каталога: верхний отступ меньше. Банки на снимках вписаны
   целиком: это плакаты с надписями, обрезка съедает заголовок. */
.ie-antikor-hero .heroUnit-item-text{padding:64px 0 64px}
.ie-antikor-hero .ie-tour-slide img{object-fit:contain;background:#eef0f2}
.ie-antikor-hero .ie-showcase-slider{
  width:min(100%,360px);height:auto;align-self:center;margin-inline:auto;display:block
}
.ie-antikor-hero .ie-hero-grid-shot .ie-showcase-slides{
  aspect-ratio:3/4;height:auto;min-height:0;flex:none;background:#fff
}
.ie-antikor-hero .ie-showcase-dots{bottom:-24px}
.ie-antikor-hero .ie-tour-slider-nav{top:auto;right:0;bottom:-40px}
.ie-antikor-hero .ie-tour-slide figcaption,
.ie-antikor-showcase .ie-tour-slide figcaption{display:none}
.ie-antikor-showcase .ie-showcase-slides{aspect-ratio:3/4;background:#fff}
.ie-antikor-showcase .ie-showcase-slider img{object-fit:contain;background:#fff}
.ie-antikor-showcase .ie-showcase-dots{bottom:-24px}
.ie-antikor-showcase .ie-showcase-mobile-slider{margin-bottom:40px}
@media (min-width:768px) and (max-width:991.98px){
  .ie-antikor-hero .ie-showcase-slider{width:min(100%,480px)}
}

/* Шапка раздела с листалкой компактнее на компьютере (правка владельца
   29.09.2026: «на большом экране слишком объёмно»). На 1920x1080 занимала
   959 px из 1080. Мельче заголовок и текст, кадр уже и ниже, блоки плотнее. */
@media (min-width:992px){
  .heroUnit--slides .heroUnit-item-text{padding:190px 0 52px}
  .heroUnit--slides .heroUnit-item-text-title{margin-bottom:0}
  .ie-antikor-hero .heroUnit-item-text{padding:44px 0 48px}
  .ie-hero-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:44px}
  .heroUnit--slides .heroUnit-item-text-title{font-size:2.6rem}
  .heroUnit--slides .ie-hero-subtitle{font-size:1.2rem;margin-top:10px}
  .heroUnit--slides .heroUnit-item-text-description{margin-top:14px;font-size:.95rem;line-height:1.5;max-width:640px}
  .heroUnit--slides .heroUnit-item-text-button{margin-top:18px}
  .heroUnit--slides .heroUnit-item-text-button .btn{height:46px;padding:10px 28px;font-size:1rem;border-radius:12px}
  .ie-hero-grid-text .ie-showcase-cols--hero{padding-top:18px}
  .ie-showcase-cols--hero{gap:8px}
  .ie-showcase-cols--hero .ie-showcase-col{padding:10px 14px;border-radius:12px}
  .ie-showcase-cols--hero .ie-showcase-col h3{font-size:.92rem;margin-bottom:4px}
  .ie-showcase-cols--hero .ie-showcase-col p,
  .ie-showcase-cols--hero .ie-showcase-col li{font-size:.82rem;line-height:1.45}
  .ie-hero-grid-shot .ie-showcase-slides{min-height:400px;border-radius:20px}
  .ie-showcase-badge{left:-18px;bottom:24px;padding:10px 16px 10px 14px;border-radius:14px}
  .ie-showcase-badge b{font-size:.88rem}
  .ie-showcase-badge span{font-size:.76rem}
}

/* Карточка хаба целиком ссылка, и тема подчёркивала её оранжевой линией:
   линия шла под каждой строкой названия и артикула (замечание владельца
   30.09.2026, «текст поплыл»). */
a.ie-hub-card,a.ie-hub-card:hover{text-decoration:none !important}
/* Пункты списка в тёмных блоках шапки стоят вровень: тема даёт второму
   пункту отступ сверху, и он съезжал вниз. */
.ie-showcase-cols--hero ul li{margin:0}

/* Вертикальные этикетки мастики и сала в карточке товара: квадратная
   галерея остаётся прежнего размера, а изображение видно целиком. До
   правки общий ресайз отрезал надпись сверху и значки снизу. */
@media (min-width:481px){
  picture.productDetail-slider-block-image.ie-antikor-product-image{
    aspect-ratio:1;height:auto!important;display:flex;align-items:center;
    justify-content:center;background:#fff;
  }
  picture.productDetail-slider-block-image.ie-antikor-product-image img{
    display:block;width:auto;height:100%;max-width:100%;object-fit:contain;
  }
}

/* В шапке Антикора два длинных тезиса: в двух колонках последний
   переносился на отдельную строку как «2–3 лет». На компьютере даём
   каждому пункту всю ширину карточки. Мобильную раскладку не трогаем. */
@media (min-width:992px){
  .ie-antikor-hero .ie-showcase-cols--hero ul{grid-template-columns:1fr;row-gap:4px}
}

/* Артикул у низа карточки: названия переносятся на разное число строк, и
   артикулы в ряду стояли на разной высоте (замечание владельца 30.09.2026). */
.ie-hub-card-art{margin-top:auto}
/* «Антикор»: позиций две, карточки шире, чтобы название шло в две строки. */
.ie-hub--antikor .ie-hub-grid{grid-template-columns:repeat(2,minmax(0,300px))}
.ie-hub--antikor .ie-hub-card-name{font-size:1.02rem;line-height:1.35}
/* мобильный слой делает карточку блоком, и артикул не прижимается вниз */
.ie-hub--antikor a.ie-hub-card{display:flex !important;flex-direction:column}
@media (max-width:575.98px){.ie-hub--antikor .ie-hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Keep the top of the shipment portrait visible in the news photo frame. */
img[src*="iqu3whvggc45snnw5709hflbrsqryrli"]{object-position:center 20%!important}

/* Pavel review, 2026-10-13: show catalog prices in the new-products block. */
.ie-cat-new-inner .catalogItem-offers-price-wrap { display: block; }
.ie-cat-new-inner .catalogItem { padding-bottom: 145px; }
