/* ============================================================
 * mobile-fixes.css — глобальные правки мобильной вёрстки
 * Подключается в BaseLayout ПОСЛЕ инлайновых стилей страницы,
 * поэтому переопределяет их (одинаковый/выше приоритет + позже в каскаде).
 * Чинит проблемы, общие для всех 433 страниц, без правки каждого meta.json.
 * ============================================================ */

/* ------------------------------------------------------------
 * 1. Боковые отступы hero / cat-hero.
 *    .hero__content и .cat-hero__content задают
 *    `padding: <верт> 0 <верт>` (shorthand) → обнуляют боковой
 *    padding у .container. На десктопе это маскируется
 *    `margin:0 auto`, а на мобильном поля схлопываются и текст
 *    прилипает к краю экрана. Возвращаем боковой padding и
 *    выравниваем hero по той же сетке, что и остальные секции.
 * ------------------------------------------------------------ */
.hero .hero__content,
.cat-hero .cat-hero__content {
  padding-left: var(--sp-8);
  padding-right: var(--sp-8);
}

@media (max-width: 768px) {
  .hero .hero__content,
  .cat-hero .cat-hero__content {
    padding-left: var(--sp-5);
    padding-right: var(--sp-5);
  }
}

/* Подстраховка: любой .container внутри секций-героев точно
   с боковым padding на мобильном (если встретится иной враппер). */
@media (max-width: 768px) {
  .hero .container,
  .cat-hero .container,
  .phero .container {
    padding-left: var(--sp-5);
    padding-right: var(--sp-5);
  }
}

/* ------------------------------------------------------------
 * 2. Верхняя строка контактов (.header-top).
 *    На десктопе: телефон · email · мессенджеры, выровнены вправо
 *    (justify-content: flex-end). На узком экране строка не
 *    помещается и из-за flex-end переполнение уходит ВЛЕВО —
 *    телефон обрезается («…1-65-97»).
 *    Фикс: телефон слева (виден полностью), мессенджеры справа,
 *    email и разделители прячем — email есть в подвале и по
 *    кнопке «почта» в других местах.
 * ------------------------------------------------------------ */
@media (max-width: 640px) {
  .header-top__inner {
    justify-content: space-between;
    gap: var(--sp-3);
  }
  .header-top__inner .contact-link:not(.contact-link--phone),
  .header-top__inner .contact-hours,
  .header-top__inner .contact-sep {
    display: none;
  }
  /* Два номера в ряд не влезают (вылет 45px на 390px). Оставляем
     бесплатный 8 800: он работает из любого региона. Челябинский
     номер остаётся в меню, подвале и на странице контактов. */
  .header-top__inner .contact-link--phone-local {
    display: none;
  }
  .contact-link--phone {
    font-size: var(--fs-small);
  }
}

/* Очень узкие экраны (≤380px): на всякий случай не даём телефону
   переполнять — допускаем перенос мессенджеров под телефон не нужен,
   просто слегка ужимаем шрифт телефона. */
@media (max-width: 360px) {
  .contact-link--phone {
    font-size: var(--fs-micro, 12px);
  }
}

/* ------------------------------------------------------------
 * 3. Блок «Полный цикл» (.full-cycle / .cycle-step) на мобильном.
 *    На десктопе — горизонтальный таймлайн (сетка 4–7 колонок).
 *    На телефоне сетка смотрелась неорганично. Упрощаем до чистого
 *    вертикального списка: только ИКОНКА + ЗАГОЛОВОК этапа.
 *    Номера (01–07) и подписи-пояснения на мобильном скрываем —
 *    меньше визуального шума, ряды ровные, нечётный «07» больше
 *    не висит в пустой ячейке.
 *    Селекторы-потомки (0,2,0) перекрывают инлайновые nth-child
 *    без !important за счёт более позднего подключения файла.
 * ------------------------------------------------------------ */
@media (max-width: 640px) {
  .full-cycle .full-cycle__timeline {
    display: flex;
    flex-direction: column;
  }
  .full-cycle .full-cycle__timeline::before {
    display: none;
  }

  .full-cycle__timeline .cycle-step {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--sp-5);
    padding: var(--sp-5) 0;
    border: 0;
    border-bottom: 1px solid var(--border-subtle);
  }
  .full-cycle__timeline .cycle-step:last-child {
    border-bottom: 0;
  }

  /* Номер и пояснение убираем — оставляем иконку и заголовок */
  .full-cycle__timeline .cycle-step__num,
  .full-cycle__timeline .cycle-step__meta {
    display: none;
  }

  /* Иконка — в аккуратном квадрате с лёгкой подложкой, слева */
  .full-cycle__timeline .cycle-step__icon {
    flex: 0 0 auto;
    width: 3.25rem;
    height: 3.25rem;
    margin: 0;
    background: var(--surface-muted, #f3f5f6);
    color: var(--teal-600);
  }
  .full-cycle__timeline .cycle-step__icon svg {
    width: 1.625rem;
    height: 1.625rem;
  }

  /* Заголовок — основной читаемый текст этапа */
  .full-cycle__timeline .cycle-step__title {
    margin: 0;
    font-size: var(--fs-body, 16px);
    line-height: 1.35;
  }
}

/* ------------------------------------------------------------
 * 4. Защита от горизонтального переполнения (белое поле справа/снизу).
 *    overflow-x: clip — клипает лишнее по горизонтали, но (в отличие от
 *    hidden) НЕ создаёт scroll-контейнер и НЕ ломает position: sticky
 *    (липкую шапку и sticky-оглавление товара).
 * ------------------------------------------------------------ */
html { overflow-x: clip; }

/* Текстовое значение в stat-плашке («Полный цикл» вместо числа) —
   крупный номер 44px великоват для фразы, делаем компактнее. */
.stat__num--text {
  font-size: clamp(22px, 3.2vw, 30px);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

/* ------------------------------------------------------------
 * 5. Мобильное меню (drawer): раскрываемые группы «Каталог» и «Услуги».
 *    Кнопка-аккордеон + панель подпунктов (скрыта, открывается по .is-open).
 * ------------------------------------------------------------ */
.nav-drawer__acc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3, 12px);
  width: 100%;
  background: none;
  border: 0;
  padding: var(--sp-4, 16px) 0;
  font-family: var(--font-display, inherit);
  font-size: var(--fs-lead, 18px);
  font-weight: var(--fw-semibold, 600);
  /* drawer тёмный → текст светлый, иначе сливается с фоном */
  color: var(--text-inverse, #ffffff);
  text-align: left;
  cursor: pointer;
}
.nav-drawer__acc-chev {
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--duration-fast, .15s) ease;
  flex: 0 0 auto;
  margin-right: 2px;
  opacity: .55;
}
.nav-drawer__item--acc.is-open .nav-drawer__acc-chev {
  transform: rotate(-135deg);
}

.nav-drawer__panel {
  display: none;
  padding: 0 0 var(--sp-3, 12px) var(--sp-3, 12px);
  border-left: 2px solid var(--border-subtle, #e5e9eb);
  margin: 0 0 var(--sp-2, 8px) var(--sp-1, 4px);
}
.nav-drawer__item--acc.is-open .nav-drawer__panel {
  display: block;
}

.nav-drawer__group-label {
  font-family: var(--font-display, inherit);
  font-size: var(--fs-micro, 12px);
  font-weight: var(--fw-bold, 700);
  letter-spacing: .06em;
  text-transform: uppercase;
  /* приглушённый светлый — на тёмном drawer */
  color: rgba(255, 255, 255, 0.55);
  margin: var(--sp-4, 16px) 0 var(--sp-2, 8px);
}
.nav-drawer__group-label:first-child { margin-top: var(--sp-2, 8px); }

.nav-drawer__sublink {
  display: block;
  padding: var(--sp-2, 8px) 0;
  font-size: var(--fs-body, 16px);
  line-height: 1.35;
  /* читаемый светлый текст на тёмном drawer */
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
}
.nav-drawer__sublink:hover,
.nav-drawer__sublink:active { color: var(--text-inverse, #ffffff); }
.nav-drawer__sublink--all {
  margin-top: var(--sp-3, 12px);
  font-weight: var(--fw-semibold, 600);
  /* акцентная ссылка — светлее tiрkвы для контраста с тёмным */
  color: var(--green-400, #6CBB54);
}

/* ------------------------------------------------------------
 * 8. Белое поле под футером (iOS overscroll bounce показывал
 *    белый body-bg). Делаем body тёмным — секции страницы имеют
 *    свои светлые фоны, а под футером и в зоне bounce будет
 *    тёмный, как футер.
 * ------------------------------------------------------------ */
body { background: var(--neutral-950, #101F26); }

/* ------------------------------------------------------------
 * 9. Бейдж «В наличии» на карточках товара (каталог + /nalichie/).
 *    Ставится JS-скриптом /js/stock-badges.js при совпадении slug
 *    с записью в /data/stock.json. Стиль глобальный — нужен на
 *    всех каталожных страницах.
 * ------------------------------------------------------------ */
.pcard__cover { position: relative; }
.pcard__stock-badge {
  position: absolute;
  bottom: 16px;
  left: 0;
  z-index: 2;
  display: inline-block;
  background: var(--green-600, #3C8E33);
  color: #ffffff;
  font-family: var(--font-display, "Inter", sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  text-decoration: none;
  border: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
a.pcard__stock-badge:hover { background: var(--green-700, #2E6B27); }

/* ------------------------------------------------------------
 * 6. Блок кейсов (.case-feature) — фикс горизонтального переполнения.
 *    .case-feature — CSS grid; колонка 1fr НЕ сжималась (у grid-элементов
 *    min-width:auto = min-content), из-за чего трек становился шире контейнера
 *    (~338px при доступных ~271px) и вся страница уезжала на ~16px вправо —
 *    у всех блоков (включая форму внизу) срезался правый край.
 *    Решение: minmax(0,1fr) + min-width:0 у grid-элементов → колонка сжимается.
 * ------------------------------------------------------------ */
.case-feature { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 961px) {
  /* на десктопе возвращаем двухколоночную раскладку, но со сжимаемыми треками */
  .case-feature { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}
.case-feature__details,
.case-feature__gallery { min-width: 0; }
.case-meta, .case-meta li,
.case-block, .case-block__text,
.case-result, .case-result li { min-width: 0; }
/* Кнопки «Предыдущий/Следующий» — flex-элементы с min-width:auto не сжимались
   и давали +16px. Разрешаем сжатие и перенос. */
.case-feature__nav { flex-wrap: wrap; min-width: 0; }
.case-feature__nav-btn { min-width: 0; }
.case-feature__counter { min-width: 0; }

/* ------------------------------------------------------------
 * 7. Блок «Лучшее предложение» (.best-offer__card) — тот же grid-баг.
 *    Колонка grid не сжималась (min-width:auto у grid-элементов) → контакты
 *    и форма становились шире карточки, текст резался справа на мобильном.
 *    minmax(0,1fr) + min-width:0 у вложенных flex/grid элементов.
 * ------------------------------------------------------------ */
.best-offer__card { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1025px) {
  .best-offer__card { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}
.best-offer__contacts,
.best-offer__form,
.bo-contact,
.bo-contact__body { min-width: 0; }
.bo-contact__value { overflow-wrap: anywhere; }

/* ------------------------------------------------------------
 * 9. Hero scroll-индикатор перекрывает кнопку «Подобрать оборудование»
 *    на мобильной (он лежит абсолютно справа внизу). Скрываем — текст
 *    «SCROLL» с направляющей это декор, не интерактив, на мобильной
 *    избыточен (пользователь и так скроллит свайпом).
 * ------------------------------------------------------------ */
@media (max-width: 768px) {
  .hero__scroll {
    display: none !important;
  }
}

/* ------------------------------------------------------------
 * 10. Квадратные карточки категорий на главной (.catalog .cat-card__cover).
 *     Стандартный 16:10 на главной обрезал оборудование сверху/снизу
 *     (горизонтальные фото в маленькой высоте). Квадрат 1:1 показывает
 *     объект целиком — оборудование в центре, по бокам отрезается фон.
 *     object-fit: cover + object-position: center гарантируют что
 *     композиционный центр (само оборудование) останется в кадре.
 * ------------------------------------------------------------ */
.catalog .cat-card__cover {
  aspect-ratio: 1 / 1 !important;
}
.catalog .cat-card__cover img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* ------------------------------------------------------------
 * 10a. Моб. каталог (≤640): 2 плитки в ряд, компактно — крупное фото
 *      + название. Списки/ссылку скрываем (на узком экране лишнее),
 *      фото за счёт 2 колонок становится заметно меньше.
 * ------------------------------------------------------------ */
@media (max-width: 640px) {
  .catalog .catalog__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--sp-3) !important;
  }
  .catalog .cat-card__body { padding: var(--sp-3) !important; }
  .catalog .cat-card__title {
    font-size: var(--fs-small) !important;
    line-height: 1.25 !important;
    margin: 0 !important;
  }
  .catalog .cat-card__list,
  .catalog .cat-card__link { display: none !important; }
  .catalog .cat-card__num {
    font-size: 10px !important;
    padding: 1px var(--sp-1) !important;
  }
}

/* ------------------------------------------------------------
 * 10b. Блок «География работы»: на планшете/мобильном карта под текстом,
 *      высота компактнее (иначе 3:2 на узком экране слишком высокая).
 * ------------------------------------------------------------ */
/* ------------------------------------------------------------
 * 10c. Каталог /products/ (.cat-index .scard-grid): на мобильном 2 карточки
 *      в ряд (по умолчанию inline-стиль ставит 1). Ужимаем отступы/шрифт,
 *      чтобы плитки читались. `.cat-index` + !important — бьёт инлайн ≤600px.
 * ------------------------------------------------------------ */
@media (max-width: 600px) {
  .cat-index .scard-grid {
    /* minmax(0,1fr) — иначе 1fr=minmax(auto,1fr) не даёт колонке сжаться уже
       min-content карточки, и правый столбец вылезает за экран. */
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .cat-index .scard { min-width: 0 !important; }
  .cat-index .scard__body { padding: 10px 12px 12px !important; min-width: 0 !important; }
  .cat-index .scard__title { font-size: 14px !important; line-height: 1.25 !important; overflow-wrap: anywhere; }
  .cat-index .scard__meta { font-size: 12px !important; }
}

@media (max-width: 900px) {
  .geo__layout {
    grid-template-columns: 1fr !important;
    gap: var(--sp-8) !important;
  }
  .geo__map {
    /* aspect-ratio + min-height раздували ширину (h*16/11) и карта вылезала
       за колонку → горизонтальный разъезд. Фикс: без aspect-ratio, фикс-высота,
       ширина строго по колонке. */
    aspect-ratio: auto !important;
    height: 340px !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Overlay-вариант (О компании): на мобильном не оверлей, а стопка —
     текст обычным блоком, карта под ним. */
  .geo--overlay { display: block !important; min-height: 0 !important; }
  .geo--overlay .geo__map--full {
    position: relative !important;
    height: 320px !important;
    min-height: 320px !important;
    aspect-ratio: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .geo--overlay .geo__overlay-wrap {
    pointer-events: auto !important;
    padding-top: var(--sp-10) !important;
    padding-bottom: var(--sp-8) !important;
  }
  .geo--overlay .geo__panel {
    max-width: none !important;
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
}

/* ------------------------------------------------------------
 * 11. SEO: H4-заголовки в навигации (мегаменю + футер) заменены на
 *     <div class="megamenu__col-title"> / .footer__col-title> для
 *     корректной семантики заголовков (h4 не должен быть до h1).
 *     CSS-alias — копия стилей оригинальных селекторов h4.
 * ------------------------------------------------------------ */
.megamenu__col .megamenu__col-title {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0 0 var(--sp-4);
}
.footer__col .footer__col-title {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--green-400);
  margin: 0 0 var(--sp-4);
}

/* ============================================================
 * 12. В-5: мобильные хвосты (горизонтальный скролл на 375px).
 *     Корень почти всех 63 случаев: grid/flex-элемент с min-width:auto
 *     не сжимается ниже min-content своего содержимого — интринсик-ширина
 *     фото, длинная неразрывная строка или таблица «распирают» колонку
 *     шире экрана. Лечим точечным min-width:0 + переносом текста +
 *     скролл-обёрткой широких таблиц. Файл грузится ПОСЛЕ блобов → правит
 *     каскад без !important. Проверено scripts/oneoff/mobile-recheck.mjs.
 * ============================================================ */

/* 12.1 Карточка товара: hero-фото и лента превью (12 дробемётов).
 *      Колонка `.phero__grid` на мобильном = `1fr` (= minmax(auto,1fr)) →
 *      её auto-минимум держит min-content фото (~480px) и трек распирает
 *      экран. Меняем трек на minmax(0,1fr) — он сжимается до контейнера,
 *      фото кропается object-fit'ом. Доп. min-width:0 на вложенных flex/grid
 *      (лента превью с inline repeat(6,1fr)). */
@media (max-width: 900px) {
  .phero__grid { grid-template-columns: minmax(0, 1fr); }
}
.phero__media, .phero__main,
.phero__thumbs, .phero__thumb { min-width: 0; }
.phero__main img, .phero__thumb img { min-width: 0; }

/* 12.2 Статблок (.stat) — крупное число/текст (44px) и многословные
 *      значения («со склада», «12 мес») не сжимались (~40 страниц:
 *      запчасти, муфельные, ковши, чиллеры, нагреватели). Уменьшаем число
 *      на мобильном и разрешаем перенос. */
@media (max-width: 640px) {
  .stat { min-width: 0; }
  .stat__body { min-width: 0; }
  .stat__num { font-size: clamp(26px, 7vw, 40px); overflow-wrap: anywhere; }
  .stat__num small { white-space: nowrap; }
  .stat__label, .stat__text { overflow-wrap: anywhere; }
}

/* 12.3 Таблицы спецификаций и экономики — суммарный min-content колонок
 *      шире экрана. Спека (param|value) — разрешаем перенос в ячейках
 *      (без скролла, аккуратнее); экономика (3 числовые колонки) —
 *      горизонтальный скролл внутри карточки, числа не ломаем. */
@media (max-width: 640px) {
  .spec__panel, .spec__body { min-width: 0; }
  .spec-table { min-width: 0; }
  .spec-table th { overflow-wrap: anywhere; }
  /* Спека param|value: значение в td имеет white-space:nowrap (tovar-b.css),
     поэтому длинное значение растягивало таблицу, а колонка-параметр (th)
     схлопывалась в текст по одной букве. На мобильном разрешаем перенос
     значения (по словам, break-word) и фиксируем колонки 50/50 — th
     возвращает ширину, длинные значения («алюминиевый / стальной сварной»)
     не ломаются по символам. */
  .spec-table:not(.spec-table--models) td { white-space: normal; overflow-wrap: break-word; }
  .spec-table:not(.spec-table--models) tbody th { width: 50%; }
  /* Многоколоночные таблицы моделей (числовые) — перенос ломал бы числа,
     поэтому панель с такой таблицей получает горизонтальный скролл. */
  .spec__panel:has(.spec-table--models) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .econ__table { min-width: 0; overflow-x: auto; }
}

/* 12.3b Ключевые показатели в шапке товара (.phero__keyspec-num) — крупный
 *       display-шрифт. Когда в значение попадает многословный текст с &nbsp;
 *       («износостойкие пластины», «у места выбивки»), неразрывный токен не
 *       помещался в колонку 1fr и вылезал за край (PGS/ХТС-страницы).
 *       На мобильном уменьшаем кегль и разрешаем перенос/принудительный
 *       разрыв длинного токена. */
@media (max-width: 640px) {
  /* 1fr == minmax(auto,1fr): auto-трек не уже min-content, поэтому неразрывное
     значение распирало колонку за край сетки. minmax(0,1fr) разрешает трекам
     сжиматься, а min-width:0 на info снимает min-content-распор у flex-колонки. */
  .phero__info { min-width: 0; }
  .phero__keyspecs { min-width: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .phero__keyspec { min-width: 0; }
  .phero__keyspec-num {
    font-size: clamp(18px, 5.4vw, 26px);
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  /* Длинный слитный токен в подписи («Охлаждение+обеспыливание+просев») не
     имел точек переноса и распирал ячейку сетки. */
  .phero__keyspec-label { overflow-wrap: anywhere; word-break: break-word; }
}

/* 12.4 Блок «ситуаций» услуги (/uslugi/remont-drobemetov/) — карточка
 *      с длинным списком пунктов не сжималась под 375px. */
@media (max-width: 768px) {
  .situations__grid, .situation-card { min-width: 0; }
  .situation-card__title,
  .situation-card__text,
  .situation-card__list li { overflow-wrap: anywhere; }
}

/* 12.5 Медиа-блок кейса (/o-company/). Две причины переполнения:
 *      (1) трек `.case__layout` 1fr держал min-content картинки →
 *          меняем на minmax(0,1fr);
 *      (2) на ≤1024 блок получает `min-height:320 + aspect-ratio:4/3`,
 *          из-за чего ВЫСОТА (320) задаёт ШИРИНУ (320×4/3=427) мимо трека.
 *          Снимаем aspect-ratio на мобильном → ширина идёт от трека (335),
 *          высоту держит min-height, картинка кропается object-fit'ом. */
@media (max-width: 1024px) {
  .case__layout { grid-template-columns: minmax(0, 1fr); }
  .case__media { aspect-ratio: auto; }
}
.case__media { min-width: 0; }
.case__media img { min-width: 0; }

/* 12.6 Карточка товара в сетках «похожее/каталог» (.pcard-grid) —
 *      cover-картинка и длинные тех.строки распирали колонку на узких
 *      экранах (всплыло на запчастях после починки .stat). */
@media (max-width: 640px) {
  .pcard { min-width: 0; }
  .pcard__cover { min-width: 0; }
  .pcard__cover img { min-width: 0; }
  .pcard__title, .pcard__spec { overflow-wrap: anywhere; }
}

/* 12.7 Длинные заголовки секций с неразрывными фразами (&nbsp;) —
 *      на хабах ЛВМ/ЛГМ/ХТС/ПГС <em>песка и смолы к минимуму</em> и т.п.
 *      склеены &nbsp; в один токен шире 375px и не переносились.
 *      Разрешаем перенос только на мобильном. */
@media (max-width: 640px) {
  .s-title, .leadgen__title, .prod-rf__title,
  .cat-hero__title, .hero__title,
  .phero__title { overflow-wrap: anywhere; }
}

/* ============================================================
 * 13. Мобильная навигация — гамбургер вместо десктопного меню.
 *     Раньше правила «спрятать .nav / показать .nav-toggle» жили
 *     ТОЛЬКО в per-page inline_styles каждой страницы. На страницах,
 *     чей inline-блок их не содержал (напр. /kontakty/), на мобильном
 *     показывалось десктопное .nav без гамбургера. Выносим сюда —
 *     единый источник для всех страниц (Header/Drawer глобальны в BaseLayout).
 * ============================================================ */
@media (max-width: 1024px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
}
@media (max-width: 640px) {
  .header__actions .btn--primary { display: none; }
}

/* ============================================================
 * 14. Футер — схлопывание колонок на мобильном.
 *     .footer__top по умолчанию 5 колонок (1.4fr 1fr×4) и НЕ
 *     сворачивается — правила были только в per-page inline_styles.
 *     На страницах без них (kontakty, nalichie, otzyvy, policy,
 *     soglasie, spasibo, новости) футер оставался в 5 колонок и
 *     распирал страницу до ~820px (горизонтальный overflow, из-за
 *     которого «уезжала» и модалка поиска — position:fixed на mobile).
 * ============================================================ */
@media (max-width: 1024px) {
  .footer__top { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
  .footer__brand-block { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .footer__top { grid-template-columns: 1fr; }
}

/* ============================================================
 * 15. Формы-компоненты на страницах без tpl-CSS.
 *     Схлопывание двухколоночных рядов формы (.leadgen__grid,
 *     .form__row) жило только в /css/tpl/*.css. Страницы, которые
 *     эти шаблоны не подключают (новый раздел «Решения», сервисные
 *     страницы), оставались с 2 колонками и распирали вьюпорт.
 * ============================================================ */
@media (max-width: 1024px) {
  .leadgen__grid { grid-template-columns: minmax(0, 1fr); }
  .form__row { grid-template-columns: minmax(0, 1fr); }
}
.form__row, .form__field { min-width: 0; }
.form__input, .form__textarea { max-width: 100%; box-sizing: border-box; }

/* ============================================================
 * 16. Шапка на «ноутбучных» ширинах 1025-1280px.
 *     Здесь ещё показывается полное меню (гамбургер включается
 *     только с 1024px и ниже), и логотип + 7 пунктов + поиск +
 *     кнопка не умещались: строка распирала страницу и появлялась
 *     горизонтальная прокрутка. Раньше кнопку просто прятали —
 *     но это и есть главный CTA сайта, терять его нельзя.
 *     Теперь она остаётся видимой, а место освобождает компактный
 *     размер: меньше паддинги, кегль и межбуквенное расстояние.
 * ============================================================ */
@media (min-width: 1025px) and (max-width: 1560px) {
  /* Место под микроформу звонка освобождает меню: строка не сжималась
     ниже 1157px, из них 671px занимали 7 пунктов с паддингом 12px и
     кеглем 14px. Кнопки «Запросить КП / ТЗ» в шапке больше нет. */
  .nav { gap: 0; }
  .nav__link { padding-left: var(--sp-2); padding-right: var(--sp-2); font-size: 13px; }
  .header__inner { gap: var(--sp-4); }
  .header .container { padding-left: var(--sp-4); padding-right: var(--sp-4); }
}
@media (min-width: 1025px) and (max-width: 1120px) {
  /* Самая узкая полоса — ещё плотнее, иначе строка всё равно распирает. */
  .nav__link { padding-left: 6px; padding-right: 6px; font-size: 12px; }
  .header__brand img { max-height: 34px; }
}

/* Ячейки основных сеток должны уметь сжиматься. В CSS-гриде `1fr` — это
   minmax(auto, 1fr), то есть колонка не становится уже содержимого. Сетки
   свёрстаны под широкий экран, а схлопываются только на 1024px, поэтому в
   полосе 1025-1200px они распирали страницу. min-width: 0 снимает нижнюю
   границу трека — блоки просто ужимаются, без горизонтальной прокрутки. */
.stats__grid > *,
.partner__pillars > *,
.adv__grid > *,
.catalog__grid > *,
.geo__layout > *,
.modern__grid > *,
.highlights__grid > * { min-width: 0; }
.geo__map { max-width: 100%; }
/* Внутренние обёртки плашек тоже должны сжиматься, иначе минимальную ширину
   задаёт содержимое. Крупные значения вроде «полный цикл» склеены неразрывным
   пробелом — overflow-wrap: anywhere разрешает перенос и уменьшает min-content,
   иначе плашка распирала сетку. */
.stat__body, .stat > * { min-width: 0; }
.stat__num, .stat__label, .stat__text { overflow-wrap: anywhere; }

/* Карточки каталога. У значений характеристик стоял white-space: nowrap —
   он рассчитан на короткие числа, а после синхронизации с ТЗ там появились
   развёрнутые значения («380 В, 3 фазы, N и PE; 50 Гц»). Из-за nowrap карточка
   не могла сузиться, и сетка из трёх колонок распирала страницу. */
.pcard-grid > *, .scard-grid > *, .subcat-grid > *, .teaser-grid > * { min-width: 0; }
.pcard__spec dd { white-space: normal; overflow-wrap: anywhere; }
/* Подписи переносим только по словам: anywhere обнуляет их min-content, и при
   длинном значении рядом («сталь/чугун 1 кг; медь/бронза 2 кг; алюминий 0,5 кг;
   золото 1 кг» у УИ-1П) колонка сжималась до 78px, а «Номинальная» рвалась
   на «Номиналь/ная». break-word от переполнения защищает так же, но держит
   min-content по самому длинному слову. */
.pcard__spec dt { white-space: normal; overflow-wrap: break-word; }
.pcard__title, .pcard__cover img { min-width: 0; max-width: 100%; }