/* Страница КНР — только то, чему нет аналога в Component-Kit.
   Всё остальное собрано штатными блоками кита (__method-list, __summary,
   __two-column, __bento, __plain-list, __faq, __contact, __section--surface).
   Ступени X: контентные секции — 36 (R12), hero и CTA — 48 (R16). */

/* ============================================================
   0.0 ПАЛИТРА СТРАНИЦЫ — красный вместо брендового оранжевого

   ОСОЗНАННОЕ ОТКЛОНЕНИЕ ОТ БРЕНДБУКА (решение заказчика 2026-09-21).
   Брендбук 2025 задаёт оранжевый #FF5A0A и красного не содержит вовсе.
   Заказчик потребовал привести страницу к цвету действующих кнопок сайта.
   brand-check на это правомерно ругается — правка ожидаемая, не дефект.

   Оттенки взяты с работающих кнопок шаблона 2025, а не придуманы:
     #D12E28 — .work-header-button, .form-button, .product-nav
     #FF3028 — их же :hover. Сайт при наведении ОСВЕТЛЯЕТ, а не затемняет,
               поэтому --gigas-red-dark несёт светлый тон: имя токена
               оставлено ради совместимости вёрстки, как и в каноне.
     #E31E24 → #F39513 — штатный градиент сайта (бейджи, логотип).

   Токены канона объявлены на .gigas-info (0,1,0). Наш селектор той же
   специфичности, но идёт позже по каскаду — этого достаточно, !important
   не нужен. В page.css прямых hex-значений оранжевого нет ни одного,
   а все 35 иконок нарисованы currentColor, поэтому одного этого блока
   хватает почти на всю страницу.
   ============================================================ */

.gigas-info--knr {
  --gigas-red: #d12e28;
  --gigas-red-dark: #ff3028;
  --gigas-orange: #d12e28;
  --gigas-orange-soft: #fdf0ef;
  --gigas-grad-1: #e31e24;
  --gigas-grad-2: #f39513;
  --gigas-success: #d12e28;
}

/* Хвост, который токенами не достать: канон держит светло-оранжевый hover
   телефона прямым значением (gigas-info-pages.css:1207). Канон общий для
   других info-страниц, править его нельзя — перекрываем в своём скоупе. */
.gigas-info--knr .gigas-info__contact-phone:hover {
  color: #ff8a86;
}

/* ============================================================
   0. СБРОС ТИРЕ ТЕМЫ ASPRO — обязателен, идёт первым
   bitrix/templates/aspro_max/styles.css:206 вешает content:"—" на каждый li
   любого ul. Специфичность темы (0,1,2) перебивает одноклассовые маркеры канона,
   поэтому сбрасываем селектором (0,2,1) и сразу возвращаем маркер кита.
   Списки-шаги намеренно свёрстаны как <ol> — правило темы их не касается.
   ============================================================ */

.gigas-info ul > li::before {
  content: none;
}

.gigas-info ul.gigas-info__plain-list > .gigas-info__plain-list-item::before {
  content: "";
}

/* ============================================================
   0.1 ШРИФТ NEKST — перекрытие Inter из шаблона 2025
   Шаблон local/templates/2025/template_styles.css задаёт Inter (33 правила,
   включая body). Его каскад идёт после нашего CSS, поэтому body{font-family:'Nekst'}
   из канона проигрывает, и страница рендерится Inter вместо брендового шрифта.
   @font-face объявлен в каноне — здесь только применение, в скоупе своей страницы.
   Иконочные элементы (i, [class*="icon"], span/div) намеренно не трогаем:
   у иконочных шрифтов своё семейство, перекрытие сломало бы пиктограммы темы.
   ============================================================ */

.gigas-info--kotelnye-naruzhnogo-razmeshcheniya,
.gigas-info--kotelnye-naruzhnogo-razmeshcheniya :where(h1, h2, h3, h4, h5, p, a, li, dt, dd,
  button, strong, b, em, label, input, textarea, select, figcaption, small, time, th, td, blockquote) {
  font-family: 'Nekst', Arial, sans-serif !important;
  letter-spacing: 0;        /* бренд: трекинг везде 0 */
}

/* ============================================================
   0.2 ВЕС ПОДЗАГОЛОВКОВ — Medium 500, а не SemiBold
   Брендбук (Design-System, «Типографика»): заголовок SemiBold/100%,
   подзаголовок Medium 500/110%, набор Regular 400/120%.
   Канон рисует H2/H3 весом 800 — известное расхождение, помеченное в вики
   к исправлению «при следующем касании вёрстки». Касание происходит здесь.
   Заголовки страницы (h1 hero, заголовок CTA) остаются SemiBold — это их роль.
   ============================================================ */

.gigas-info--kotelnye-naruzhnogo-razmeshcheniya .gigas-info__heading,
.gigas-info--kotelnye-naruzhnogo-razmeshcheniya .gigas-info__acc-group-title,
.gigas-info--kotelnye-naruzhnogo-razmeshcheniya .gigas-info__acc-title,
.gigas-info--kotelnye-naruzhnogo-razmeshcheniya .gigas-info__method-title,
.gigas-info--kotelnye-naruzhnogo-razmeshcheniya .gigas-info__summary-title,
.gigas-info--kotelnye-naruzhnogo-razmeshcheniya .gigas-info__faq-button,
.gigas-info--kotelnye-naruzhnogo-razmeshcheniya .gigas-info__scheme-title,
.gigas-info--kotelnye-naruzhnogo-razmeshcheniya .gigas-info__model-name {
  font-weight: 500;
  line-height: 1.1;         /* бренд: подзаголовок 110% */
}

/* ============================================================
   1. HERO — единственный крупный собственный блок.
   Обоснование: в Component-Kit нет героя с фотоподложкой.
   Градиент под фото допустим (Design-System, callout «Градиент»).
   ============================================================ */

.gigas-info__hero {
  position: relative;
  margin: 8px 0 52px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--gigas-graphite);
  color: var(--gigas-white);
}

.gigas-info__hero-media {
  position: absolute;
  inset: 0;
}

.gigas-info__hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Кадр hero-sunset (2026-09-23): модуль занимает 43–88 % высоты снимка.
     При cover в полосе ~2.56:1 видно ~69 % высоты; по центру низ модуля
     срезался бы. 70 % по вертикали показывает ~21–91 % кадра — модуль целиком,
     и над лесом остаётся полоса заката. */
  object-position: 50% 70%;
  display: block;
}

/* Точка кадрирования на узких экранах (2026-09-22).
   Модуль стоит в правой части кадра. На широком экране обрезка его не трогает,
   а на 375 пропорция становится почти вертикальной, cover срезает бока —
   и в кадре остаются только стена со светильником, без котельной. Это ровно
   то, на что жаловался заказчик, только в другом месте.
   Смещаем видимую область вправо — но умеренно: развёртка значений
   показала, что при 78% модуль уезжает за правый край и срезается,
   а читается он при 55–72%, лучше всего около 65%. */
@media (max-width: 760px) {
  .gigas-info__hero-media img {
    /* Модуль на 71–87 % ширины кадра: на узком экране сдвигаем видимую
       область к нему, иначе в кадре останется только закат. */
    object-position: 80% 75%;
  }
}

/* Вуаль под текстом: без неё белый заголовок не читается на светлых участках кадра.
   Это служебная подложка, а не бренд-градиент — цвета бренда в ней не участвуют. */
.gigas-info__hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Под тёплый кадр (2026-09-23) вуаль легче: прежняя 78 → 15 % гасила закат,
     ради которого кадр выбран. Под текстом остаётся достаточно для белого
     набора, к модулю и окнам вуаль сходит на нет. */
  background: linear-gradient(90deg, rgba(0, 0, 0, .66) 0%, rgba(0, 0, 0, .42) 42%, rgba(0, 0, 0, .08) 70%, rgba(0, 0, 0, 0) 100%);
}

/* --- Подсветка модуля: вуаль гасится точечно над ним ---
   Идея заказчика 2026-09-23. Замечание звучало «не понятно, что это КНР»,
   и корень не в размере, а в контрасте: модуль тёмный, а над ним лежит
   примерно 46% черноты (градиент 78% → 15%, модуль стоит на 54–65% ширины).

   Расчёт положения окна. Снимок 1672×941 ложится в полосу ~2.87:1 по cover:
   ширина вписывается точно, поэтому по горизонтали координаты кадра равны
   координатам блока (модуль 54–65%); по вертикали видно 19–81% кадра,
   и модуль растягивается примерно на 13–95% высоты блока.
   Центр окна — 60% / 54%.

   Эллипс узкий намеренно: текстовая колонка занимает 720 из 1348 px, то есть
   до 53% ширины. Широкое окно залезло бы под заголовок и съело подложку,
   ради которой вуаль и существует.

   Маска вырезает дыру в самой вуали: прозрачное в центре — вуали нет,
   чёрное по краям — вуаль на месте. Где mask-image не поддерживается,
   вуаль просто остаётся сплошной, как была.

   Только десктоп: ниже 980 вуаль другая (сверху вниз), текст занимает всю
   ширину и ложится поверх модуля — подсвечивать там нечего. */
@media (min-width: 981px) {
  /* Прозрачное ядро расширено 38% → 46%, эллипс чуть крупнее (13/54 → 15/58),
     спад по-прежнему тянется до 100%. Чем длиннее спад, тем меньше шанс
     увидеть границу маски — заказчик просил, чтобы она осталась незаметной. */
  .gigas-info__hero-media::after {
    -webkit-mask-image: radial-gradient(ellipse 11% 44% at 79% 62%, transparent 0 46%, #000 100%);
    mask-image: radial-gradient(ellipse 11% 44% at 79% 62%, transparent 0 46%, #000 100%);
  }

  /* Второй слой — локальная проявка модуля (заказчик 2026-09-23: «сделать
     ярче, но чтобы маска была незаметна»).

     Зачем отдельный слой. Снятие вуали возвращает картинку лишь к исходному
     виду — ярче оригинала оно не делает по определению. Здесь же поднимается
     яркость и контраст того, что лежит под слоем.

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

     Маска ОБРАТНАЯ вуали: непрозрачная в центре, прозрачная по краям — слой
     работает ровно там, где вуали нет, и гаснет тем же мягким спадом.

     Без z-index намеренно: слой красится до вуали, поэтому поднимает яркость
     самого снимка, а не затемнённого результата.
     Где backdrop-filter не поддерживается, слой просто ничего не делает. */
  /* 2026-09-23: координаты пересчитаны под кадр hero-sunset — модуль на
     71–87 % ширины и ~29–94 % высоты блока, центр 79 % / 62 %. */
  .gigas-info__hero-media::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    -webkit-backdrop-filter: brightness(1.18) contrast(1.12) saturate(1.04);
    backdrop-filter: brightness(1.18) contrast(1.12) saturate(1.04);
    -webkit-mask-image: radial-gradient(ellipse 11% 44% at 79% 62%, #000 0 46%, transparent 100%);
    mask-image: radial-gradient(ellipse 11% 44% at 79% 62%, #000 0 46%, transparent 100%);
  }
}

.gigas-info__hero-inner {
  position: relative;
  padding: 48px;
  max-width: 720px;
}

.gigas-info__hero-eyebrow {
  display: inline-block;
  margin: 0 0 18px;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--gigas-yellow);
  color: var(--gigas-ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.1;
}

.gigas-info__hero-title {
  margin: 0 0 18px;
  color: var(--gigas-white);
  font-size: clamp(30px, 3.8vw, 52px);
  font-weight: 800;
  line-height: 1;           /* бренд: заголовок 100% */
  letter-spacing: 0;
}

.gigas-info__hero-lead {
  margin: 0 0 28px;
  max-width: 540px;
  color: rgba(255, 255, 255, .92);
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 400;
  line-height: 1.2;         /* бренд: набор 120% */
}

.gigas-info__hero-actions,
.gigas-info__cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}

.gigas-info__cta-actions {
  margin-bottom: 0;
}

/* Действие в контенте ⇒ скруглённый прямоугольник ступени, не пилюля (Component-Kit) */
.gigas-info__hero .gigas-info__button,
.gigas-info__cta-actions .gigas-info__button {
  border-radius: 16px;
}

/* Вторичная кнопка на фото и на тёмном фоне.
   Канон задаёт ей белый фон и оранжевый текст — переопределяем ВЕСЬ набор,
   иначе получается белый текст на белом фоне. */
.gigas-info__button-secondary--on-photo,
.gigas-info__button-secondary--on-dark {
  background: transparent;
  border-color: var(--gigas-white);
  color: var(--gigas-white);
  border-radius: 16px;
}

.gigas-info__button-secondary--on-photo:hover,
.gigas-info__button-secondary--on-dark:hover {
  background: var(--gigas-white);
  border-color: var(--gigas-white);
  color: var(--gigas-ink);
}

/* Ценовой ориентир первого экрана (S9). Белым по вуали, цифра — SemiBold (как в __price-hint):
   акцент весом, а не цветом, чтобы не спорить с оранжевой primary-кнопкой ниже. */
.gigas-info__hero-price {
  margin: -12px 0 24px;     /* от лида 16px: цена читается продолжением лида, а не отдельным блоком */
  color: rgba(255, 255, 255, .92);
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.2;         /* бренд: набор 120% */
}

.gigas-info__hero-price b {
  color: var(--gigas-white);
  font-weight: 600;
  white-space: nowrap;
}

.gigas-info__hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}

.gigas-info__hero-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .92);
  font-size: 14px;
  line-height: 1.2;
}

.gigas-info__hero-trust-item svg {
  width: 18px;
  height: 18px;
  flex: none;
}

/* ============================================================
   2. МОДЕЛИ — карточка «линейка + характеристики + действие».
   Обоснование: в ките нет блока с парами характеристик и кнопкой.
   ============================================================ */

.gigas-info__models {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;                /* межколонник 1/3X ступени «Секция» */
  margin-top: 28px;
}

.gigas-info__model {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border-radius: 12px;
  background: var(--gigas-surface-grey);
}

.gigas-info__model-name {
  margin: 0 0 2px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}

.gigas-info__model-type {
  display: block;
  margin-bottom: 16px;
  color: var(--gigas-muted);
  font-size: 13px;
  line-height: 1.2;
}

.gigas-info__model-specs {
  margin: 0 0 16px;
  padding: 0 0 16px;
  display: grid;
  gap: 6px;
  border-bottom: 1px solid var(--gigas-line-strong);
}

.gigas-info__model-spec {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  line-height: 1.25;
}

.gigas-info__model-spec dt {
  margin: 0;
  color: var(--gigas-text);
}

.gigas-info__model-spec dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}

.gigas-info__model-text {
  margin: 0 0 18px;
  color: var(--gigas-text);
  font-size: 14px;
  line-height: 1.25;
}

/* Съёмка модуля в карточке линейки. Аспекты у трёх файлов разные
   (640×991, 640×990, 640×640), поэтому высота бокса фиксирована, а картинка
   вписывается по центру: иначе карточки в ряду разъезжаются по высоте.
   Фон у съёмок прозрачный — подложка не нужна, модуль ложится прямо
   на серую плашку карточки, без вложенной белой плашки. */
.gigas-info__model-media {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Три съёмки вертикальные (0.65), четвёртая квадратная. Высота бокса —
     ограничитель для вертикальных: при 170 модуль рисовался всего 110 px
     в ширину и карточка выглядела пустой. 210 даёт ему заметный объём,
     карточки при этом остаются равными по высоте. */
  height: 210px;
  margin: 0 0 16px;
}

.gigas-info__model-media img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.gigas-info__model-action {
  margin-top: auto;
}

.gigas-info__model .gigas-info__button {
  width: 100%;
  justify-content: center;
  border-radius: 12px;
}

/* ============================================================
   3. МЕДИА-ФИГУРЫ — фото и рендеры в плашке.
   Обоснование: в ките нет figure с ограничением высоты и подписью.
   ============================================================ */

.gigas-info__media {
  margin: 0;
  padding: 24px;
  border-radius: 12px;
  background: var(--gigas-surface-grey);
  text-align: center;
}

.gigas-info__media img {
  max-width: 100%;
  max-height: 460px;       /* без ограничения рендер 1200×1200 распирал секцию */
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.gigas-info__media-caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
}

.gigas-info__media-caption span {
  padding: 8px 14px;
  border: 1px dashed var(--gigas-line-strong);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.2;
}

.gigas-info__media-caption strong {
  font-weight: 600;
}

/* Карточка «фото + подпись» для вариантов установки */
.gigas-info__media--card {
  padding: 0;
  overflow: hidden;
  text-align: left;
}

.gigas-info__media--card img {
  width: 100%;
  /* 300 → 420 → 560. Модуль вертикальный (1200×1500), при 420 в кадр
     не помещался целиком даже со смещением точки кадрирования
     (замечание заказчика 2026-09-21: «увеличим высоту кадра»). */
  max-height: 560px;
  object-fit: cover;
  /* Кадрируем ниже центра: информативная часть обоих снимков внизу — опорная
     рама с ножками и обвязка с подводкой. Область кадра та же, меняется только
     видимый фрагмент. Не до упора (100%): при полном прижатии к низу корпус
     модуля срезался, а половину кадра занимали бетон и цоколь стены. */
  object-position: 50% 80%;
  border-radius: 0;
}

/* Снимок «на фасаде»: главное на нём — шкаф с котлом, а не низ стены.
   При общем смещении вниз у него срезался верх с дымоходом, поэтому точка
   кадрирования ближе к середине и модуль попадает в кадр целиком. */
.gigas-info__media--focus-mid img {
  /* 80% → 42% оказалось перебором (подняли на 38 пунктов); опускаем ровно
     на половину поднятого: 42 + 19 = 61. */
  object-position: 50% 61%;
}

.gigas-info__media--card figcaption {
  display: block;
  padding: 20px 24px 24px;
  color: var(--gigas-text);
  font-size: 14px;
  line-height: 1.25;
}

.gigas-info__media--card figcaption strong {
  display: block;
  margin-bottom: 6px;
  color: var(--gigas-ink);
  font-size: 18px;
  font-weight: 500;   /* бренд: подзаголовок Medium */
  line-height: 1.1;
}

/* Медиа-колонка в двухколоннике выравнивается по центру строки */
.gigas-info__two-column--media {
  align-items: center;
}

/* --- «Как устроена»: схема по слайду презентации «Комплектация» ---

   Первая версия вела от подписей короткие прямые чёрточки: я сознательно
   отказался от ломаных в конкретные узлы, чтобы не привязываться к пикселям
   снимка. Заказчик указал (2026-09-22), что попадание линий в узлы —
   принципиально, и это была неверная экономия.

   Как сделано теперь. Сцена имеет фиксированное соотношение сторон, снимок
   внутри неё занимает 41.8% ширины и 80% высоты, прижатый к верху (4%).
   Благодаря этому координаты узлов, снятые по сетке, наложенной на кадр,
   пересчитываются в систему сцены одной формулой
   (X = 29.1 + ix*0.418, Y = 4 + iy*0.80)
   и остаются верными на любой ширине — линии никуда не разъезжаются.
   ВАЖНО: меняя полосу снимка, пересчитывать все ломаные — они завязаны
   на эту формулу.
   Сами ломаные лежат в разметке: и подписи, и точки заданы в процентах.

   Ниже 980 сцена распадается в обычный список, линии скрываются: вести
   их некуда, когда кадр и подписи идут друг за другом. */
.gigas-info__scheme-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1100 / 620;
}

/* Полоса снимка поднята: сверху было 13% пустоты — 99 px провала между
   подзаголовком и кадром (замечание заказчика 2026-09-22). Теперь 4%,
   а высота 74% → 80%. Соотношение сторон сцены не менялось, поэтому секция
   не растёт: пустота превращается в картинку, а не в лишнюю высоту.
   Координаты всех девяти выносок пересчитаны под новую полосу. */
.gigas-info__scheme-img {
  position: absolute;
  left: 29.1%;
  top: 4%;
  width: 41.8%;
  height: 80%;
  object-fit: contain;
  max-height: none;
}

/* preserveAspectRatio="none" в разметке: система координат сцены растягивается
   вместе с ней, поэтому проценты совпадают с процентами CSS. Толщину штриха
   от этого растяжения защищает vector-effect в разметке. */
.gigas-info__scheme-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.gigas-info__scheme-lines polyline {
  fill: none;
  stroke: var(--gigas-red);
  stroke-width: 1;
}

.gigas-info__scheme-lines circle {
  fill: var(--gigas-red);
}

.gigas-info__scheme-label {
  position: absolute;
  top: var(--top);
  width: 24%;
}

/* right: 73% ставит правый край подписи на 27% сцены — ровно туда, откуда
   в разметке начинается её ломаная. */
.gigas-info__scheme-label--left {
  right: 73%;
  text-align: right;
}

.gigas-info__scheme-label--right {
  left: 73%;
  text-align: left;
}

.gigas-info__scheme-label--bottom {
  width: 30%;
  text-align: center;
}

.gigas-info__scheme-label--bottom-left {
  left: 18%;
}

.gigas-info__scheme-label--bottom-right {
  left: 55%;
}

.gigas-info__scheme-title {
  display: block;
  margin-bottom: 4px;
  color: var(--gigas-ink);
  font-size: 15px;
  font-weight: 500;        /* бренд: подзаголовок Medium */
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: .01em;
}

.gigas-info__scheme-text {
  margin: 0;
  color: var(--gigas-ink-soft);
  font-size: 14px;
  line-height: 1.35;
}

@media (max-width: 980px) {
  .gigas-info__scheme-stage {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .gigas-info__scheme-img {
    position: static;
    width: 100%;
    height: auto;
  }

  .gigas-info__scheme-lines {
    display: none;
  }

  .gigas-info__scheme-label {
    position: static;
    width: auto;
    text-align: left;
  }
}

/* Секция «Не замёрзнет»: ряды чередуются — два пункта и кадр, затем кадр
   и два пункта (решение заказчика 2026-09-22).

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

   Правила --media-even и __winter-media удалены вместе со старой разметкой:
   этих классов в шаблоне больше нет. */
.gigas-info__zigzag {
  display: grid;
  gap: 12px;
}

.gigas-info__zigzag-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  /* Было center: кадр висел по центру ряда и совпадал с парой пунктов только
     на той ширине, под которую подбирался его потолок высоты. Растяжение
     привязывает высоту кадра к паре на ЛЮБОЙ ширине (замечание заказчика
     2026-09-22, снимок снят около 1300 px). */
  align-items: stretch;
}

/* min-width у грид-элемента по умолчанию auto: без сброса длинный текст
   распирает колонку за пределы сетки (та же грабля, что в __split-layout). */
.gigas-info__zigzag-row > * {
  min-width: 0;
}

/* Пол высоты ряда (2026-09-23). Тексты пунктов сокращены до одной фразы,
   и без пола ряд — а с ним и снимок котла — сжимался вслед за текстом.
   260 держит котёл почти прежнего размера (было 289 по старой паре),
   при этом блок становится ниже за счёт лида и текстов. Только десктоп:
   ниже 981 ряд складывается в колонку и высоту задаёт сам снимок. */
@media (min-width: 981px) {
  .gigas-info__zigzag-row {
    min-height: 260px;
  }
}

/* Список обязан заполнить ряд целиком. Без height: 100% он сидел по
   содержимому (257) при ряде в 289, и кадр оказывался на 32 px выше пары —
   ровно на этих 32 px заказчик и указал (2026-09-22). Тот же признак, что
   в блоке «Зачем выносить»: элемент внутри растянутой области не обязан её
   заполнять, помогает только явная высота.

   Высоту блока это НЕ увеличивает: ряд и так был 289, менялось лишь то,
   заполнял его список или нет. Проверено замером на 1440 и 1300 — секция
   в обоих случаях остаётся 824 и 844. Лишние 32 px уходят внутрь пары,
   по 16 на карточку. */
.gigas-info__zigzag .gigas-info__method-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}

.gigas-info__zigzag .gigas-info__method-list > * {
  flex: 1 1 auto;
}

/* Тексты пунктов — одна фраза (2026-09-23), а ряд держит пол 260 под снимок.
   Прижатое к верху содержимое оставляло пустоту внизу карточки; по центру
   карточка читается собранной, без провала. */
.gigas-info__zigzag .gigas-info__method {
  align-items: center;
}

/* Фигура — СТРОКА: подпись слева, снимок справа (решение заказчика 2026-09-22).

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

   История потолка высоты у картинки: сперва 260 (фигура 360 против пары 257,
   ряд вставал по кадру и блок вырос до 964), затем 160 — совпало, но только
   на 1440. Любое фиксированное число привязано к одной ширине: на 1300 тексты
   переносятся иначе, пара становится ниже, и кадр снова не совпадает.
   Поэтому потолка нет вовсе — снимок занимает остаток по факту.

   Собственных требований к высоте у фигуры нет, поэтому блок вырасти
   не может ни при каком размере снимка. */
.gigas-info__zigzag .gigas-info__media {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  /* Поля 24 → 16 → 12 → 8: обрамление стоило 100 px (поля 48, подпись 34,
     отступ 18) при картинке 190. Сбоку подпись высоты не занимает, осталось
     только поле — срезаем и его, всё уходит снимку. Ниже 8 не опускаюсь:
     подпись стоит внутри плашки и упёрлась бы в её край. */
  padding: 8px;
}

/* Минимальная высота ряда СНЯТА (2026-09-22). Я добавил её, чтобы увеличить
   снимки, и тем самым увеличил блок — чего заказчик не просил: просьба была
   про котлы, а не про секцию. Высоту ряда снова задаёт текстовая пара.

   Настоящий резерв для размера котла оказался не в раскладке, а в файле:
   исходники квадратные, и при вписывании видимый кадр ограничен ВЫСОТОЙ
   (элемент 458 px шириной, картинка 316×316 — лишняя ширина пропадала).
   Снимки обрезаны по контуру модуля, поэтому при той же высоте котёл стал
   крупнее, а блок не изменился. */

/* Подпись — узкая колонка слева от снимка.

   Сдвигаем порядком вывода, а не перестановкой в разметке: в исходнике
   <img> идёт первым, и подпись должна оставаться после него — так её читают
   программы чтения с экрана и так она связана с изображением по смыслу.

   Плашки ставим друг под другом: в строку они заняли бы ширину, которая
   нужна фотографии. Канон центрирует их по горизонтали — в колонке это
   выглядело бы рвано, поэтому прижимаем к левому краю. */
.gigas-info__zigzag .gigas-info__media-caption {
  order: -1;
  flex: 0 0 auto;
  width: 168px;
  flex-direction: column;
  /* Плашки тянутся на всю ширину колонки, а не по содержимому: «−45 °C
     снаружи корпуса» и «+20 °C в зоне котла» разной длины, и по содержимому
     их пунктирные рамки выходили разной ширины (замечание заказчика
     2026-09-22). Растяжка уравнивает их без подгонки числами. */
  align-items: stretch;
  justify-content: center;
  margin-top: 0;
}

/* Плашка CTA отбивается от рядов тем же зазором, что и пункты между собой:
   12 px вместо канонических 28 (решение заказчика 2026-09-22). Ритм блока
   становится единым — между карточками в паре, между рядами и до плашки
   одно и то же расстояние.

   Правило привязано к соседству с чередующимися рядами намеренно. Вторая
   такая плашка на странице — в «Дополнительной комплектации», и там отбивка
   в 28 px остаётся (проверено замером: marginTop 12 в «Не замёрзнет»,
   28 в «Комплектации»). Специфичность (0,2,0) против (0,1,0) у исходного
   правила, поэтому порядок в файле значения не имеет. */
.gigas-info__zigzag + .gigas-info__section-action--panel {
  margin-top: 12px;
}

/* Картинка должна ЗАПОЛНЯТЬ высоту фигуры, а не ЗАДАВАТЬ её.

   В колонке это получалось само: flex-basis 0 работал по высоте и обнулял
   вклад снимка. В строке та же запись работает по ШИРИНЕ, а вклад в высоту
   становится натуральным — при первой попытке картинка выросла до 630×630
   и потянула за собой ряд, секция раздулась с 808 до 1553 px.

   Поэтому вклад в высоту обнуляем явно (height: 0), а заполнение задаём
   минимальной высотой: фигура получает высоту от ряда, ряд — от текстовой
   пары, и снимок занимает её целиком. Проверено подстановкой в стенде:
   секция 808, кадр = пара = 289, картинка 257×450 против прежних 212. */
.gigas-info__zigzag .gigas-info__media img {
  flex: 1 1 0;
  height: 0;
  min-height: 100%;
  max-height: none;
  width: 100%;
  object-fit: contain;
}

/* Адаптив держим рядом с самим блоком, а не в общем разделе 6: правило
   существует только ради этой раскладки и читается вместе с ней. */
@media (max-width: 980px) {
  .gigas-info__zigzag-row {
    grid-template-columns: minmax(0, 1fr);
  }

  /* В одну колонку фигуру растягивать некому: соседа по ряду больше нет.
     Правило «занять остаток высоты» тогда даёт остаток в ноль, и картинка
     схлопывается — замер на узкой ширине показал высоту 0, то есть оба
     снимка исчезали бы с экрана. Заполнение остатка — приём строго для
     десктопа; здесь возвращаем снимку естественный размер. */
  .gigas-info__zigzag .gigas-info__media img {
    flex: 0 0 auto;
    height: auto;
    /* min-height обязателен к сбросу: унаследованные 100 % от фигуры,
       которая здесь сама сидит по содержимому, снова дали бы схлопывание
       или распирание — эту регрессию в блоке уже ловили. */
    min-height: 0;
    max-height: 380px;
  }

  .gigas-info__zigzag .gigas-info__method-list {
    height: auto;
  }

  /* Подпись возвращается под снимок. Сбоку она хороша, пока фигура широкая:
     на 375 колонка в 168 px отняла бы у фотографии почти половину ширины,
     и снимок стал бы меньше, а не больше. */
  .gigas-info__zigzag .gigas-info__media {
    flex-direction: column;
  }

  .gigas-info__zigzag .gigas-info__media-caption {
    order: 0;
    width: auto;
    flex-direction: row;
    align-items: center;
    margin-top: 12px;
  }

  /* Равная ширина плашек нужна и здесь: в строке растяжка по колонке не
     работает, и «−45 °C снаружи корпуса» выходило 191 px против 157
     у «+20 °C в зоне котла». Делим строку поровну. */
  .gigas-info__zigzag .gigas-info__media-caption > span {
    flex: 1 1 0;
  }
}

/* ============================================================
   4. ТОЧЕЧНЫЕ ДОПОЛНЕНИЯ К БЛОКАМ КИТА
   ============================================================ */

/* --- Сравнение по макету дизайнера ---
   Было: две плашки-бенто со списками внутри. Стало: заголовок колонки вынесен
   НАД плашками, каждый пункт — отдельная плашка (решение заказчика 2026-09-18).
   Перекрытия __bento и __plain-list удалены вместе со старой разметкой —
   в шаблоне этих классов больше нет.

   Отступление от макета: там плашки слева белые на сером фоне страницы,
   а наша секция стоит на белом — белое на белом не прочитается. Оставляем
   белые плашки с рамкой --gigas-line, как у соседних карточек страницы:
   замысел макета (нейтральное против оранжевого) сохраняется. */

/* --- «Дополнительная комплектация» карточками товаров ---
   Пересобрано по слайду презентации (решение заказчика 2026-09-22).
   Было: три подзаголовка и списки с иконками-контурами. Стало: три смысловые
   группы в ряд, в каждой по две карточки — снимок товара, название, польза
   и переход в раздел каталога.

   Снимки взяты со слайда заказчика и положены на белый фон: карточки белые,
   фон сливается. Марки производителей на изделиях (BRAVI, TDM, ZONT) остаются —
   это заводская маркировка товара, которым торгует GiGas, а не чужой водяной
   знак фотостока. */
.gigas-info__acc {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.gigas-info__acc > * {
  min-width: 0;
}

.gigas-info__acc-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gigas-info__acc-group-title {
  margin: 0;
  color: var(--gigas-red);
  font-size: 15px;
  font-weight: 500;        /* бренд: подзаголовок Medium */
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: .01em;
}

/* Карточка растёт наравне с соседкой: в группе их две, и при разной длине
   текста низы обязаны сойтись. */
.gigas-info__acc-card {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  flex: 1 1 auto;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--gigas-line);
  border-radius: var(--gigas-radius-large);
  background: var(--gigas-white);
}

.gigas-info__acc-img {
  width: 100%;
  height: 96px;
  object-fit: contain;
  display: block;
}

.gigas-info__acc-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.gigas-info__acc-title {
  margin: 0;
  color: var(--gigas-ink);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.15;
}

.gigas-info__acc-text {
  margin: 0;
  color: var(--gigas-ink-soft);
  font-size: 14px;
  line-height: 1.35;
}

/* Ссылка прижата к низу карточки, поэтому у карточек разной высоты
   переходы стоят на одной линии. */
.gigas-info__acc-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 6px;
  color: var(--gigas-red);
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
}

.gigas-info__acc-link svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

/* Тема Aspro красит ссылки в hover в #333 — возвращаем брендовый оттенок. */
.gigas-info .gigas-info__acc-link:hover {
  color: var(--gigas-red-dark);
  text-decoration: underline;
}

@media (max-width: 980px) {
  /* Три группы в ряд не помещаются: колонка ужимается до ~300 px,
     и снимок с текстом перестают читаться рядом. */
  .gigas-info__acc {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}

@media (max-width: 520px) {
  .gigas-info__acc-card {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
  }

  .gigas-info__acc-img {
    height: 72px;
  }
}

/* --- Ответ FAQ в одну строку ---
   Канон держит панель ответа в max-width: 900px с правым полем 44 (строка 1158
   gigas-info-pages.css) — тексту достаётся около 856 px, и ответ про рабочий
   диапазон в сто знаков туда не влезал: сперва рвался внутри пары «+40 °C»,
   а после неразрывного пробела пара уходила на вторую строку целиком
   (замечание заказчика 2026-09-21). Лечим причину — ширину, а не пробел.
   На узких экранах перенос неизбежен: сто знаков в 345 px не помещаются. */
.gigas-info--knr .gigas-info__faq-panel {
  max-width: none;
}

/* --- Блок доверия: критерии слева, форма звонка справа ---
   Заказчик 2026-09-21: «CTA сделать справа и вертикальной, слева критерии». */

/* Общая раскладка «содержание слева — форма справа». Используется дважды:
   в «Зачем выносить» и в блоке доверия, поэтому имя нейтральное. */
.gigas-info__split-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
  gap: 24px;
  align-items: start;
}

/* Форма внутри двухколонника не должна распирать свою колонку:
   min-width у грид-элемента по умолчанию auto, и длинный дисклеймер
   в ней растягивал колонку за пределы сетки. */
.gigas-info__split-layout > * {
  min-width: 0;
}

/* Левая колонка тянется на высоту строки, которую задаёт форма справа.
   Без этого она заканчивалась там, где кончается текст, и рядом с высокой
   формой выглядела оборванной (замечание заказчика 2026-09-21). */
.gigas-info__split-layout > :first-child {
  align-self: stretch;
}

/* Содержание левой колонки — вертикальный список на всю высоту.
   Элементы растягиваются поровну, поэтому обе колонки кончаются на одной
   линии, а не расходятся. Общее правило для аргументов и для критериев. */
.gigas-info__split-layout .gigas-info__method-list--four,
.gigas-info__split-layout .gigas-info__summary--stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}

.gigas-info__split-layout .gigas-info__method-list--four > *,
.gigas-info__split-layout .gigas-info__summary--stack > * {
  flex: 1 1 auto;
  align-content: center;
}

/* В двухколоннике форма — колонка, а не блок под сеткой */
.gigas-info__split-layout .gigas-info__form-tile {
  margin-top: 0;
}

/* --- Вариант раскладки с заголовком внутри левой колонки ---
   Замечание заказчика 2026-09-22 («растянуто, много пустых мест»). Замер
   показал две пустоты, у которых одна причина. Заголовок и лид лежали НАД
   раскладкой, поэтому форма начиналась на 113 px ниже верха секции — справа
   от заголовка зияла дыра. А короткий список слева принудительно тянулся до
   высоты формы, и карточки раздувались с 96 до 113 px: заказчик принял этот
   провис за увеличенные зазоры между ними.

   Лечим причину: заголовок и лид переезжают в левую колонку, форма встаёт
   во всю высоту секции от самого верха, а карточкам растяжка больше не нужна.
   Модификатор обязателен — те же правила обслуживают блок доверия, который
   этой правкой не затрагивается. */
/* Низ списка обязан совпасть с низом формы, а не проскакивать ниже
   (замечание заказчика 2026-09-22). Механизм тот же, что в «Не замёрзнет»:
   лишнюю высоту добирают сами карточки, зазор между ними остаётся 12 px.
   Ключевое отличие от прошлой итерации — снят канонический min-height: 96px
   при содержимом в 68 px. Именно он был «лишним воздухом»: карточка росла
   не под текст, а под чужой минимум. Теперь базовая высота мала, и карточке
   достаётся ровно та добавка, которой не хватает до высоты формы (~85 px
   против прежних 96). */
.gigas-info__split-layout--with-head > :first-child {
  align-self: stretch;
}

/* Форма тоже обязана дотянуться до низа блока (замечание заказчика
   2026-09-22). Базовое правило раскладки ставит align-items: start, а растяжку
   я переопределял только первому ребёнку — форма оставалась по содержимому.
   Пока плитка была высокой, это не бросалось в глаза; после уплотнения форм
   (пустые спаны ошибок схлопнуты, зазоры срезаны) она стала на 59 px короче
   колонки критериев, и разрыв снизу стал виден.

   Правило на последнего ребёнка, а не на конкретный класс формы: в «Зачем
   выносить» это __form-tile, в блоке доверия — __callback--vertical. Там
   высоты сейчас совпадают сами, и правило лишь страхует от расхождения. */
.gigas-info__split-layout--with-head > :last-child {
  align-self: stretch;
}

/* Сетка, а не колоночный flex. На flex список с flex-grow: 1 отказывался
   занимать свободные 32 px: колонка растягивалась до 493, содержимое
   занимало 461, потолка высоты у списка не было — и роста всё равно
   не происходило. Причину я объяснить не смог, поэтому заменил механизм
   на однозначный: последний ряд 1fr обязан занять остаток. */
.gigas-info__split-main {
  display: grid;
  grid-template-rows: auto auto 1fr;
}

/* Высота в 100 % области, а не auto. Сетка отводит списку ряд в 380 px,
   но сам список рисовался на 348 и не заполнял его — карточки оставались
   по 78 вместо 86, и низ списка не доходил до низа формы 27 px. При height
   в процентах результат не зависит от того, как разрешится выравнивание. */
.gigas-info__split-main .gigas-info__method-list--four {
  height: 100%;
}

/* В «Зачем выносить» левая колонка из трёх элементов (заголовок, лид, список),
   в блоке доверия — из двух (заголовок и критерии). С правилом на три строки
   последняя 1fr осталась бы пустой, и критерии не растянулись бы. */
.gigas-info__split-main--two-rows {
  grid-template-rows: auto 1fr;
}

/* Зеркало правила для списка аргументов: колонка критериев обязана заполнить
   отведённый ей ряд, иначе её низ не дойдёт до низа формы. */
.gigas-info__split-main .gigas-info__summary--stack {
  height: 100%;
}

.gigas-info__split-layout--with-head .gigas-info__method-list--four > * {
  flex: 1 1 auto;
  align-content: center;
  min-height: 0;
  padding: 12px;
}

/* Заголовок и лид внутри колонки: поля прежние, но лид больше не обязан
   держать канонический предел ширины — колонка и так уже 924 px. */
.gigas-info__split-main .gigas-info__section-copy {
  max-width: none;
}

/* Критерии в одну колонку. Канон задаёт три колонки и разделители слева
   (__summary-item + __summary-item { border-left }) — в вертикальном списке
   их надо перевести наверх, иначе полосы повиснут сбоку. */
/* Критерии — карточками, как остальные блоки страницы, а не тонкими строками
   с линейками между ними (замечание заказчика 2026-09-21: «переработать
   внешний вид»). Канон держит их сеткой в рамке сверху и снизу с разделителями
   слева — снимаем и рамку, и разделители. */
.gigas-info__summary--stack {
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  border-block: 0;
}

.gigas-info__summary--stack .gigas-info__summary-item {
  border: 1px solid var(--gigas-line);
  border-radius: var(--gigas-radius-large);
  background: var(--gigas-white);
}

.gigas-info__summary--stack .gigas-info__summary-item + .gigas-info__summary-item {
  border-left: 1px solid var(--gigas-line);
}

/* Форма звонка вертикально: поля друг под другом, кнопка внизу.

   Отступ сверху снимаем селектором (0,2,0), а не одиночным классом:
   в прежнем виде правило проигрывало, вычисленный margin-top оставался 28 px,
   и комментарий расходился с кодом. Последствие было не косметическим —
   форма вставала на 28 px ниже, строка раскладки выходила 28 + 540 = 568,
   колонка критериев растягивалась до 568, а карточки раздувались
   с естественных 88 до 133. Заказчик назвал это «слишком высоким блоком»
   и попросил уравнять его с формой (2026-09-22). */
.gigas-info__split-layout .gigas-info__callback--vertical {
  margin-top: 0;
}

.gigas-info__callback--vertical .gigas-info__callback-head {
  display: block;
  margin-bottom: 10px;
}

/* --- Форма собрана плотнее (замечание заказчика 2026-09-22) ---
   Замер состава: высота 477 = поля плитки 48 + шапка 94 и её отступ 14
   + ряд полей 321. Каждое поле 92 px: подпись 14, зазор 6, ввод 48, зазор 6
   и ПУСТОЙ спан ошибки 16. Спан зарезервирован под сообщение и занимает
   место всегда — три поля отдавали 48 px ни за что.

   Схлопываем его, пока он пуст. Размен: при ошибке валидации текст появится
   и сдвинет поля ниже. Это происходит только при отправке неверной формы
   и стоит дешевле, чем постоянные 48 px пустоты. */
.gigas-info__callback--vertical .gigas-info__field-error:empty,
.gigas-info__form-tile--vertical .gigas-info__field-error:empty {
  min-height: 0;
  height: 0;
}

.gigas-info__callback--vertical .gigas-info__field-row,
.gigas-info__form-tile--vertical .gigas-info__field-row {
  row-gap: 10px;
}

/* Вертикальная сборка формы — одинаковая для блока звонка и формы-плитки,
   поэтому правила общие. Поля друг под другом, кнопка внизу. */
.gigas-info__callback--vertical .gigas-info__field-row,
.gigas-info__form-tile--vertical .gigas-info__field-row {
  grid-template-columns: minmax(0, 1fr);
}

/* Лейбл-распорка нужна только в ряду, где кнопка равняется по линии полей.
   В столбце она даёт пустую строку над кнопкой. */
.gigas-info__callback--vertical .gigas-info__field--action .gigas-info__label,
.gigas-info__form-tile--vertical .gigas-info__field--action .gigas-info__label {
  display: none;
}

.gigas-info__callback--vertical .gigas-info__legal--under-action,
.gigas-info__form-tile--vertical .gigas-info__legal--under-action {
  grid-column: auto;
  margin-top: 0;
}

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

.gigas-info__section--photo {
  position: relative;
  overflow: hidden;
  padding: 36px;                       /* ступень «Секция» */
  border-radius: var(--gigas-radius-large);
}

.gigas-info__section-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.gigas-info__section-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gigas-info__section-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .58) 100%);
}

/* Содержимое поверх кадра */
.gigas-info__section--photo > *:not(.gigas-info__section-photo) {
  position: relative;
  z-index: 1;
}

.gigas-info__section--photo .gigas-info__heading,
.gigas-info__section--photo .gigas-info__section-copy,
.gigas-info__section--photo .gigas-info__vs-title {
  color: var(--gigas-white);
}

.gigas-info__vs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
  margin-top: 28px;
}

.gigas-info__vs-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gigas-info__vs-title {
  margin: 0 0 4px;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0;
}

/* Тема Aspro вешает на любой li маркер-тире (styles.css:206) селектором (0,1,2),
   поэтому сбрасываем связкой скоуп + тег: (0,2,2). */
.gigas-info--knr ul.gigas-info__vs-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gigas-info--knr ul.gigas-info__vs-list > li {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  margin: 0;
  padding: 16px 20px;
  border: 1px solid var(--gigas-line);
  border-radius: var(--gigas-radius-large);
  background: var(--gigas-white);
  color: var(--gigas-ink);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
}

.gigas-info--knr ul.gigas-info__vs-list > li::before {
  content: none;
}

/* Акцент на выигрыше (2026-09-23): проигрышная колонка уходит в полупрозрачный
   фон, выигрышная — яркие белые плашки с красной галочкой. Взгляд идёт туда,
   где светлее; красная заливка раньше читалась как предупреждение. */
.gigas-info--knr ul.gigas-info__vs-list:not(.gigas-info__vs-list--win) > li {
  border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .7);
  font-weight: 400;
}

.gigas-info--knr ul.gigas-info__vs-list--win > li {
  border-color: var(--gigas-white);
  background: var(--gigas-white);
  color: var(--gigas-ink);
  font-weight: 600;
}

.gigas-info__vs-icon {
  flex: none;
  width: 26px;
  height: 26px;
  color: var(--gigas-muted);
}

.gigas-info__vs-list:not(.gigas-info__vs-list--win) .gigas-info__vs-icon {
  color: rgba(255, 255, 255, .45);
}

.gigas-info__vs-list--win .gigas-info__vs-icon {
  color: var(--gigas-orange);
}

.gigas-info__vs-column:first-child .gigas-info__vs-title {
  color: rgba(255, 255, 255, .7);
}

/* Четыре аргумента в один ряд. Форма больше не ячейка этой сетки — она вынесена
   под неё во всю ширину, поэтому ряд ровный и align-items не нужен. */
.gigas-info__method-list--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ============================================================
   5. БЛОК КАТАЛОГА — приведение штатных карточек к бренду.
   Шаблон catalog.section/slider общий (используется на главной и ещё ~10 страницах),
   поэтому правим только в скоупе своей страницы, сам шаблон не трогаем.
   Селекторы проверены на задаче главной (home-rebrand.css).
   ============================================================ */

/* Перекрытие бейджа скидки и стрелок больше НЕ НУЖНО и снято 2026-09-21.
   Оно существовало ради одного: погасить штатный красный градиент темы
   и заменить его брендовым оранжевым. После перехода страницы на красный
   гасить нечего — штатный вид карточек совпадает с палитрой страницы,
   а оставленный override сделал бы блок каталога единственным островом
   другого оттенка. */

.gigas-info__catalog .product-name,
.gigas-info__catalog .product-price,
.gigas-info__catalog .product-old-price,
.gigas-info__catalog .product-basket-text,
.gigas-info__catalog .product-quantity-text {
  font-family: 'Nekst', Arial, sans-serif !important;
  letter-spacing: 0 !important;
}

.gigas-info__catalog-all {
  margin-top: 24px;
  text-align: center;
}

/* ============================================================
   5.1 ФИНАЛЬНАЯ CTA-ПЛАШКА — скоуп страницы.
   Канон __contact общий для других страниц, поэтому правим только у себя.
   Ступень X = 48 (Hero) ⇒ поле 48, радиус 16, межколонник 16.
   Типографика по бренду: заголовок SemiBold/100%, набор Regular/120%, трекинг 0.
   ============================================================ */

.gigas-info__contact--knr {
  /* Канон растягивает блок на 100vw без скругления — получается полоса, а не плашка.
     Возвращаем в поток контейнера и делаем бенто-плашкой ступени Hero. */
  /* Фон-изображение класса G (GiGasWiki/12-Design/Imagery.md): стеклянные плитки
     со свечением #FF5A0A → #D12E28. В кадре есть 3D, поэтому градиентное свечение
     правилу градиента (Design-System) не противоречит. Графит под картинкой —
     страховка на случай, если webp не загрузился. */
  background: var(--gigas-graphite) url("images/knr-cta-bg.webp") center right / cover no-repeat;
  position: relative;
  isolation: isolate;
  width: auto;
  margin: 68px 0 0;
  padding: 48px;
  border-radius: 16px;
  /* Эталонная композиция формы (Composition): слева «зачем это», справа «что сделать».
     Съёмка модуля убрана 2026-09-22 (решение заказчика): её место занял фон-изображение,
     вдвоём они перегружали плашку. */
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  gap: 28px 40px;
  align-items: start;
}

/* Скрим: графитовая вуаль, плотная слева (под заголовком и текстом) и почти
   прозрачная справа. Правило класса G: зона текста остаётся спокойной, а фон
   не становится ярче целевого действия. Лежит под контентом (z-index -1
   в изолированном контексте плашки), поэтому кликам не мешает. */
.gigas-info__contact--knr::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg,
    rgba(26, 26, 26, .88) 0%,
    rgba(26, 26, 26, .74) 34%,
    rgba(26, 26, 26, .36) 68%,
    rgba(26, 26, 26, .28) 100%);
}

/* Форма лежит на фактурном фоне, а не на ровной заливке: прежние 6% белого
   на нём не читались. Плотная тёмная подложка с размытием — то же «стекло»,
   но как свойство UI-плашки, а не декора. */
.gigas-info__cta-form {
  padding: 24px;
  border-radius: 12px;
  background: rgba(20, 20, 20, .62);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, .14);
}

/* Колонка тянется на высоту строки, чтобы телефон с подписью встали ВНИЗ
   (замечание заказчика 2026-09-18): смысл сверху, контакт снизу.
   z-index поднимает текст над съёмкой модуля — она заведена под колонку
   для лёгкого эффекта объёма, и текст должен идти поверх, а не под ней. */
.gigas-info__contact--knr .gigas-info__cta-meaning {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

/* Телефон и подпись под ним — к нижнему краю колонки */
.gigas-info__contact--knr .gigas-info__phone-link--on-dark {
  margin-top: auto;
}

/* Тема Aspro вешает на любой li маркер-тире (styles.css:206) селектором
   специфичности (0,1,2). Поэтому маркер перебиваем связкой скоуп + тег: (0,2,2). */
.gigas-info--knr ul.gigas-info__cta-trust {
  display: flex;
  flex-wrap: wrap;
  /* Без выравнивания по центру пункты растягивались на высоту строки, и первый
     («Гарантия 24 месяца») вставал выше соседей. */
  align-items: center;
  gap: 8px 20px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.gigas-info--knr ul.gigas-info__cta-trust > li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .8);
  font-size: 14px;
  line-height: 1.2;
}

.gigas-info--knr ul.gigas-info__cta-trust > li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gigas-orange);
}

/* Плашка двухколонная на всех десктопных ширинах: смысл и форма.
   Раньше с 1378 добавлялась третья колонка под съёмку модуля — съёмка убрана
   2026-09-22, поэтому порог 1378 больше ничего не разделяет и правила ниже
   отличаются только шириной колонки формы. */
@media (min-width: 981px) and (max-width: 1377px) {
  .gigas-info__contact--knr {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
    grid-template-rows: 1fr auto;
  }

  .gigas-info__contact--knr .gigas-info__cta-meaning { grid-column: 1; grid-row: 1; }
  .gigas-info__cta-contact { grid-column: 1; grid-row: 2; }
  .gigas-info__cta-form    { grid-column: 2; grid-row: 1 / -1; }

  /* Пробовали выравнивать колонку по верху, чтобы убрать пустоту под строкой
     доверия, — стало хуже: пустота не исчезла, а переехала под подпись, и текст
     сбился в верх («контент кончился»). Телефон, прижатый к низу, держит колонку
     с двух сторон, и промежуток читается как воздух. Оставляем как было. */
}

@media (min-width: 1378px) {
  /* Три блока (смысл, контакт, форма) расставляем явно, иначе автоматическое
     размещение сломает колонки. Первая строка 1fr: она забирает свободную
     высоту, и контакт садится в низ левой колонки. */
  .gigas-info__contact--knr {
    grid-template-rows: 1fr auto;
  }

  .gigas-info__contact--knr .gigas-info__cta-meaning { grid-column: 1; grid-row: 1; }
  .gigas-info__cta-contact { grid-column: 1; grid-row: 2; }
  .gigas-info__cta-form    { grid-column: 2; grid-row: 1 / -1; }

  /* Картинка шире своей колонки и свободно выходит за неё: так модуль крупный,
     а смысловая колонка сохраняет ширину. Левым краем он заходит под текст,
     который идёт поверх (z-index у смысловой колонки) — это и даёт объём. */
}

.gigas-info__cta-eyebrow {
  display: block;
  margin-bottom: 12px;
  color: var(--gigas-orange);
  font-size: 13px;
  font-weight: 500;        /* бренд: подзаголовок Medium */
  line-height: 1.1;
  letter-spacing: 0;
}

.gigas-info__contact--knr .gigas-info__contact-title {
  margin-bottom: 12px;
  line-height: 1;          /* бренд: заголовок 100% */
}

.gigas-info__contact--knr .gigas-info__contact-text {
  max-width: 560px;
  margin-bottom: 28px;     /* действие дальше от пояснения, чем пояснение от заголовка */
  color: rgba(255, 255, 255, .78);
  font-size: 16px;
  font-weight: 400;        /* бренд: набор Regular */
  line-height: 1.2;        /* бренд: набор 120% */
}

.gigas-info__contact--knr .gigas-info__cta-actions {
  margin-bottom: 0;
}

.gigas-info__contact--knr .gigas-info__contact-phone {
  margin-bottom: 8px;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.gigas-info__contact--knr .gigas-info__contact-phone svg {
  width: 22px;
  height: 22px;
  color: var(--gigas-orange);
}

.gigas-info__contact--knr .gigas-info__schedule {
  color: rgba(255, 255, 255, .62);
  font-size: 13px;
  line-height: 1.2;
}

/* ============================================================
   7. ВСТРОЕННЫЕ ФОРМЫ — вместо попапа
   Решение заказчика 2026-09-18: явные формы в блоках работают лучше модалок.
   Композиция — эталон формы из Composition: видимый лейбл над полем,
   поля-пилюли, кнопка-действие прямоугольником ступени, лигл мелким.
   ============================================================ */

.gigas-info__form {
  display: grid;
  gap: 12px;
}

.gigas-info__field {
  display: grid;
  gap: 6px;
}

.gigas-info__label {
  color: var(--gigas-text);
  font-size: 13px;
  font-weight: 500;        /* бренд: подзаголовок Medium */
  line-height: 1.1;
}

.gigas-info__input,
.gigas-info__select {
  width: 100%;
  min-height: 48px;        /* область касания с запасом к норме 44 */
  padding: 12px 20px;
  border: 1px solid var(--gigas-line);
  border-radius: 999px;    /* поле ввода — белая пилюля (Composition) */
  background: var(--gigas-white);
  color: var(--gigas-ink);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.2;
}

.gigas-info__select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f4f4f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 18px;
  padding-right: 46px;
}

.gigas-info__input:focus-visible,
.gigas-info__select:focus-visible {
  outline: 3px solid var(--gigas-red-dark);
  outline-offset: 1px;
}

/* Место под сообщение зарезервировано заранее — появление ошибки не сдвигает форму */
.gigas-info__field-error {
  min-height: 16px;
  color: var(--gigas-graphite);
  font-size: 12px;
  line-height: 1.25;
}

/* Ошибка различается рамкой и текстом, без цвета: красного в бренде нет,
   зелёного тоже (Design-System, «Состояния») */
.gigas-info__field.is-invalid .gigas-info__input,
.gigas-info__field.is-invalid .gigas-info__select {
  border-color: var(--gigas-graphite);
  border-width: 2px;
}

.gigas-info__form .gigas-info__button {
  width: 100%;
  justify-content: center;
  border-radius: 12px;     /* действие в контенте — прямоугольник ступени «Секция» */
  min-height: 48px;
}

.gigas-info__legal {
  margin: 0;
  color: var(--gigas-muted);
  font-size: 12px;
  line-height: 1.25;
}

.gigas-info__legal a {
  color: inherit;
  text-decoration: underline;
}

/* Обещание срока ответа (S12) — первая строка абзаца согласия.
   Цветом и размером выше юридического текста: это аргумент, а не оговорка. */
.gigas-info__form-promise {
  display: block;
  margin-bottom: 6px;
  color: var(--gigas-ink);
  font-size: 13px;
  line-height: 1.25;
}

/* Правила чекбокса согласия (__agree, __agree a, __agree input) удалены
   2026-09-21 вместе с самим чекбоксом: согласие даётся действием, текстом
   под кнопкой. Его оформление берёт на себя __legal выше — приглушённый
   мелкий текст с подчёркнутыми ссылками. */

.gigas-info__form-error {
  margin: 0;
  color: var(--gigas-graphite);
  font-size: 13px;
  line-height: 1.25;
}

.gigas-info__form-success {
  display: grid;
  gap: 8px;
  padding: 24px;
  border-radius: 12px;
  background: var(--gigas-orange-soft);
}

/* Плашка успеха обязана быть скрыта до отправки. Собственный display: grid
   перебивает браузерное [hidden] { display: none } — спецификность класса
   (0,1,0) против правила user-agent, — поэтому «Заявка принята» висела под
   всеми тремя формами постоянно. Найдено замером на стенде 2026-09-23
   (видимых блоков успеха 3 при норме 0).
   JS показывает блок снятием атрибута (page.js, showSuccess), поэтому
   правило с ним согласовано: убрали hidden — блок появился. */
.gigas-info__form-success[hidden] {
  display: none;
}

.gigas-info__form-success strong {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.1;
}

.gigas-info__form-success span {
  color: var(--gigas-text);
  font-size: 14px;
  line-height: 1.25;
}

/* --- Форма-плитка в сетке «Зачем выносить»: занимает первую ячейку --- */

.gigas-info__form-tile {
  /* Форма идёт ПОД сеткой во всю её ширину (решение заказчика 2026-09-18):
     ячейкой сетки она никогда не садилась в неё ровно.
     Поле 24 → 20 и зазор 12 → 10 (2026-09-21, «CTA сделать меньше»):
     под кадром форма не должна спорить с ним по весу. */
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border-radius: var(--gigas-radius-large);
  /* Графит спорил с белыми карточками рядом и перетягивал внимание
     (замечание заказчика 2026-09-18). Светло-серая плашка бренда с оранжевым
     контуром выделяет форму, не перекрикивая секцию.
     Инверсные правила цветов удалены вместе с тёмным фоном — иначе получили бы
     белый текст на светлом, ровно тот дефект, что чинили в прошлой итерации. */
  border: 2px solid var(--gigas-orange);
  background: var(--gigas-surface-grey);
  color: var(--gigas-ink);
}

.gigas-info__form-tile-title {
  margin: 0;
  color: var(--gigas-ink);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.1;
}

.gigas-info__form-tile-text {
  margin: 0 0 4px;
  color: var(--gigas-text);
  font-size: 14px;
  line-height: 1.25;
}

/* --- Мини-форма звонка в блоке доверия --- */

.gigas-info__callback {
  /* Было: две колонки и поле 36 — блок весил как вторая большая форма страницы.
     Стало: слоган строкой сверху, поля в ряд под ним, ступень «Секция». */
  margin-top: 28px;
  padding: 24px;
  border-radius: var(--gigas-radius-large);
  background: var(--gigas-surface-grey);
}

.gigas-info__callback-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 20px;
  margin-bottom: 16px;
}

.gigas-info__callback-head .gigas-info__callback-text {
  flex: 1 1 260px;
  margin: 0;
}

/* Поля в одну строку — осознанное отклонение от Composition («два коротких поля
   в ряд не ставим»). Требование заказчика 2026-09-18 выше внутреннего правила
   по иерархии Design-Constitution, но действует только на десктопе:
   на ≤760 возвращаем канон в одну колонку — там трение от узких полей реально. */
.gigas-info__field-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

/* Ячейка кнопки повторяет структуру поля, поэтому кнопка встаёт ровно
   по линии инпутов. Лейбл-распорка скрыта, но место занимает. */
.gigas-info__field--action .gigas-info__label {
  visibility: hidden;
}

/* Дисклеймер согласия стоит в колонке кнопки, прямо под ней: отдельной строкой
   под формой он уезжал к краю блока и не читался как часть действия.
   Чекбокса здесь больше нет — согласие даётся действием (2026-09-21),
   поэтому это <p class="__legal">, а не <label class="__agree">. */
.gigas-info__legal--under-action {
  grid-column: 3;
  align-self: start;
  /* Отрицательный отступ съедает резерв под сообщение об ошибке в ячейке
     кнопки: без него текст отходил от неё на 42 px. Резерв остаётся —
     он просто перекрыт. */
  margin-top: -10px;
}

.gigas-info__callback-title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.1;
}

.gigas-info__callback-text {
  margin: 0 0 12px;
  color: var(--gigas-text);
  font-size: 15px;
  line-height: 1.2;
}

/* Телефон — действие, а не подпись: область касания не меньше 44 px */
.gigas-info__phone-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 4px;
  color: var(--gigas-ink);
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
}

.gigas-info__phone-link svg {
  width: 22px;
  height: 22px;
  color: var(--gigas-orange);
}

/* --- Полная форма в финальной плашке --- */

.gigas-info__contact--knr .gigas-info__form {
  gap: 10px;
}

.gigas-info__contact--knr .gigas-info__label {
  color: rgba(255, 255, 255, .72);
}

/* __legal здесь обязателен: на графите дисклеймер согласия должен быть светлым.
   Четвёртой строкой в списке стоял __agree — снят вместе с чекбоксом. */
.gigas-info__contact--knr .gigas-info__field-error,
.gigas-info__contact--knr .gigas-info__form-error,
.gigas-info__contact--knr .gigas-info__legal {
  color: rgba(255, 255, 255, .78);
}

.gigas-info__contact--knr .gigas-info__form-promise {
  color: var(--gigas-white);
}

.gigas-info__contact--knr .gigas-info__field.is-invalid .gigas-info__input,
.gigas-info__contact--knr .gigas-info__field.is-invalid .gigas-info__select {
  border-color: var(--gigas-white);
}

.gigas-info__contact--knr .gigas-info__form-success {
  background: rgba(255, 255, 255, .12);
  color: var(--gigas-white);
}

.gigas-info__contact--knr .gigas-info__form-success span {
  color: rgba(255, 255, 255, .8);
}

/* Телефон на графите: та же область касания, белый текст */
.gigas-info__phone-link--on-dark {
  margin-bottom: 6px;
  color: var(--gigas-white);
}

/* Уточнение в лейбле («— если знаете») не должно спорить с названием поля */
.gigas-info__label span {
  color: var(--gigas-muted);
  font-weight: 400;
}

.gigas-info__contact--knr .gigas-info__label span {
  color: rgba(255, 255, 255, .55);
}

/* --- Ценовой ориентир --- */

.gigas-info__price-hint {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
  color: var(--gigas-ink);
  font-size: 15px;
  line-height: 1.2;
}

.gigas-info__price-hint b {
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
}

/* --- Действия в секциях --- */

.gigas-info__section-action {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.gigas-info__section-action .gigas-info__button,
.gigas-info__section-action .gigas-info__button-secondary {
  border-radius: 12px;
}

/* Кнопка после длинного списка висела в воздухе и не читалась как действие
   (замечание заказчика 2026-09-18). Плашка ступени «Секция»: слева — зачем
   нажимать, справа — что произойдёт. */
.gigas-info__section-action--panel {
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: 28px;
  padding: 24px;
  border-radius: var(--gigas-radius-large);
  background: var(--gigas-surface-grey);
}

.gigas-info__section-action-note {
  flex: 1 1 280px;
  margin: 0;
  color: var(--gigas-ink);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.1;
}

.gigas-info__inline-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--gigas-orange);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
}

.gigas-info__inline-link:hover {
  color: var(--gigas-red-dark);
  text-decoration: underline;
}

/* --- Липкая CTA на мобиле: единственный sticky, разрешённый системой --- */

/* ============================================================
   8. ПЕРЕКРЫТИЕ ТЕМЫ ASPRO — не косметика, а восстановление брендовых правил
   Тема бьёт по нашим классам более высокой специфичностью, поэтому одних
   классовых правил выше по файлу недостаточно. Лечим префиксом скоупа (0,2,0).
   !important не нужен нигде.
   ============================================================ */

/* --- Поля ввода ---
   aspro_max/template_styles.css:1270 задаёт
   input[type="text"|"tel"|…], select, textarea { background:#fafafa; border:1px solid #ececec;
   border-radius:3px; font-size:14px } со специфичностью (0,1,1).
   Наш .gigas-info__input — (0,1,0), поэтому поля рендерились серыми прямоугольниками.
   Голый select в том же правиле — (0,0,1), он нашему классу проигрывал, отсюда
   расхождение: селекты круглые, текстовые поля прямые.
   background-color, а не background: иначе сотрётся фоновая стрелка у select. */
.gigas-info--knr .gigas-info__input {
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid var(--gigas-line);
  border-radius: 999px;             /* поле ввода — белая пилюля (Composition) */
  background-color: var(--gigas-white);
  color: var(--gigas-ink);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.2;
}

.gigas-info--knr .gigas-info__select {
  min-height: 48px;
  padding: 12px 46px 12px 20px;     /* место под стрелку сохраняем */
  border: 1px solid var(--gigas-line);
  border-radius: 999px;
  background-color: var(--gigas-white);
  color: var(--gigas-ink);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.2;
}

.gigas-info--knr .gigas-info__field.is-invalid .gigas-info__input,
.gigas-info--knr .gigas-info__field.is-invalid .gigas-info__select {
  border-color: var(--gigas-graphite);
  border-width: 2px;
}

/* --- Цвет текста кнопок во всех состояниях ---
   aspro_max/template_styles.css:48 и :2213 — a:hover, a:focus { color:#333 } со
   специфичностью (0,1,1). После клика ссылка сохраняет фокус, и белый текст кнопки
   становился тёмно-серым. Перекрываем только color: фон тема не трогает. */
.gigas-info--knr .gigas-info__button,
.gigas-info--knr .gigas-info__button:link,
.gigas-info--knr .gigas-info__button:visited,
.gigas-info--knr .gigas-info__button:hover,
.gigas-info--knr .gigas-info__button:focus,
.gigas-info--knr .gigas-info__button:focus-visible,
.gigas-info--knr .gigas-info__button:active {
  color: var(--gigas-white);
}

.gigas-info--knr .gigas-info__button-secondary,
.gigas-info--knr .gigas-info__button-secondary:link,
.gigas-info--knr .gigas-info__button-secondary:visited,
.gigas-info--knr .gigas-info__button-secondary:focus,
.gigas-info--knr .gigas-info__button-secondary:active {
  color: var(--gigas-orange);
}

.gigas-info--knr .gigas-info__button-secondary:hover {
  color: var(--gigas-white);
}

.gigas-info--knr .gigas-info__button-secondary--on-photo,
.gigas-info--knr .gigas-info__button-secondary--on-photo:link,
.gigas-info--knr .gigas-info__button-secondary--on-photo:visited,
.gigas-info--knr .gigas-info__button-secondary--on-photo:focus,
.gigas-info--knr .gigas-info__button-secondary--on-photo:active,
.gigas-info--knr .gigas-info__button-secondary--on-dark,
.gigas-info--knr .gigas-info__button-secondary--on-dark:link,
.gigas-info--knr .gigas-info__button-secondary--on-dark:visited,
.gigas-info--knr .gigas-info__button-secondary--on-dark:focus,
.gigas-info--knr .gigas-info__button-secondary--on-dark:active {
  color: var(--gigas-white);
}

.gigas-info--knr .gigas-info__button-secondary--on-photo:hover,
.gigas-info--knr .gigas-info__button-secondary--on-dark:hover {
  color: var(--gigas-ink);
}

.gigas-info--knr .gigas-info__inline-link,
.gigas-info--knr .gigas-info__inline-link:link,
.gigas-info--knr .gigas-info__inline-link:visited,
.gigas-info--knr .gigas-info__inline-link:focus,
.gigas-info--knr .gigas-info__inline-link:active {
  color: var(--gigas-orange);
}

.gigas-info--knr .gigas-info__inline-link:hover {
  color: var(--gigas-red-dark);
}

.gigas-info--knr .gigas-info__phone-link,
.gigas-info--knr .gigas-info__phone-link:link,
.gigas-info--knr .gigas-info__phone-link:visited,
.gigas-info--knr .gigas-info__phone-link:hover,
.gigas-info--knr .gigas-info__phone-link:focus,
.gigas-info--knr .gigas-info__phone-link:active {
  color: var(--gigas-ink);
}

.gigas-info--knr .gigas-info__phone-link--on-dark,
.gigas-info--knr .gigas-info__phone-link--on-dark:link,
.gigas-info--knr .gigas-info__phone-link--on-dark:visited,
.gigas-info--knr .gigas-info__phone-link--on-dark:hover,
.gigas-info--knr .gigas-info__phone-link--on-dark:focus,
.gigas-info--knr .gigas-info__phone-link--on-dark:active {
  color: var(--gigas-white);
}

/* --- Секция каталога: плашка вместо полосы во всю ширину ---
   Канон делает __section--surface full-bleed через width:100vw + margin-inline.
   Просто снять 100vw нельзя — секция расплывётся без центрирования, поэтому
   возвращаем ей ширину контейнера. Сброс ширины у __section-inner обязателен:
   иначе он сузит содержимое ещё на 10% внутри уже суженной секции. */
.gigas-info--knr .gigas-info__section--surface {
  width: min(100%, var(--gigas-container));
  margin-inline: auto;
  padding: 36px;
  border-radius: 12px;
}

.gigas-info--knr .gigas-info__section--surface .gigas-info__section-inner {
  width: auto;
  max-width: none;
  margin-inline: 0;
}

/* ============================================================
   6. АДАПТИВ (брейкпоинты системы: 980 / 760 / 520)
   ============================================================ */

@media (max-width: 980px) {
  /* Двухколонник возвращается в одну колонку: без этого форма наезжала
     на содержание слева и вылезала за правый край. */
  .gigas-info__split-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Одна колонка: явную расстановку снимаем, порядок задаём следованием —
     смысл, форма, телефон с подписью. Телефон уходит ПОД форму
     (решение заказчика 2026-09-21). */
  .gigas-info__contact--knr {
    grid-template-rows: none;
  }

  .gigas-info__contact--knr .gigas-info__cta-meaning,
  .gigas-info__cta-contact,
  .gigas-info__cta-form {
    grid-column: auto;
    grid-row: auto;
  }

  .gigas-info__contact--knr .gigas-info__cta-meaning { order: 1; }
  .gigas-info__cta-form    { order: 2; }
  .gigas-info__cta-contact { order: 3; }

  /* Строка про гарантию — ближе к тексту над ней */
  .gigas-info--knr ul.gigas-info__cta-trust {
    margin-top: 8px;
  }

  .gigas-info__models {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Карточка стала вдвое шире — картинке можно дать больше высоты */
  .gigas-info__model-media {
    height: 210px;
  }

  .gigas-info__method-list--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gigas-info__callback {
    padding: 20px;
  }

  /* Фон: в центре кадра стоит модуль КНР — на узкой плашке он попадает под форму
     и читается обрезанными кусками. Смещаем кадр влево, на зону со знаком-«окном».
     Плюс ровный скрим: горизонтальный градиент на узкой плашке сжимается. */
  .gigas-info__contact--knr {
    background-position: 28% center;
  }

  .gigas-info__contact--knr::before {
    background: linear-gradient(180deg,
      rgba(26, 26, 26, .78) 0%,
      rgba(26, 26, 26, .66) 55%,
      rgba(26, 26, 26, .58) 100%);
  }

  /* CTA: смысл и контакт в одну колонку, разделитель — сверху, а не сбоку */
  .gigas-info__contact--knr {
    grid-template-columns: minmax(0, 1fr);
    padding: 36px;
    gap: 28px;
  }

  .gigas-info__cta-form {
    padding: 20px;
  }

  /* Двухколонник «плитки + фото»: на планшете плитки становятся слишком узкими
     и текст рвётся по одному-двум словам — раскладываем в одну колонку. */
  .gigas-info__two-column--media {
    grid-template-columns: minmax(0, 1fr);
  }

  .gigas-info__two-column--media .gigas-info__method-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gigas-info__hero-inner {
    padding: 36px;
    max-width: none;
  }

  .gigas-info__media img {
    max-height: 380px;
  }
}

@media (max-width: 760px) {
  .gigas-info__hero {
    margin-bottom: 36px;
  }

  .gigas-info__hero-inner {
    padding: 28px 20px;
  }

  /* На узком экране текст занимает всю ширину — вуаль разворачиваем сверху вниз */
  .gigas-info__hero-media::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .8) 100%);
  }

  .gigas-info__model,
  .gigas-info__media {
    padding: 20px;
  }

  /* Сравнение: на узком экране колонки одна под другой, заголовок остаётся
     над своей группой плашек */
  .gigas-info__vs {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .gigas-info__media--card img {
    max-height: 400px;
  }

  .gigas-info__media--card figcaption {
    padding: 16px 20px 20px;
  }

  /* Липкая повторная CTA удалена по решению заказчика 2026-09-21: внизу страницы
     она вставала вплотную под финальной формой и дублировала её кнопку —
     «Подобрать котельную» лишь прокручивало к форме, которая уже была на экране. */

  .gigas-info__callback {
    padding: 20px;
  }

  /* Возврат к канону Composition: на узком экране поля — в одну колонку.
     Лейбл-распорку убираем совсем, иначе над кнопкой повиснет пустая строка. */
  .gigas-info__field-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .gigas-info__field--action .gigas-info__label {
    display: none;
  }

  /* Сетка полей здесь одноколоночная: grid-column: 3 создал бы две неявные
     колонки и вынес дисклеймер за край — та же ловушка, что была со span 2. */
  .gigas-info__legal--under-action {
    grid-column: auto;
  }

  /* Текст в панели действия растягивался по вертикали: flex: 1 1 280px в
     колоночной раскладке даёт рост по высоте, отсюда провал между текстом
     и кнопкой на мобиле (баг из замечания заказчика 2026-09-21). */
  .gigas-info__section-action-note {
    flex: 0 0 auto;
  }

  .gigas-info__section-action--panel {
    flex-direction: column;
    align-items: stretch;
  }

  .gigas-info__phone-link {
    font-size: 20px;
  }

  .gigas-info__contact--knr {
    padding: 28px 20px;
    border-radius: 12px;   /* на узком экране ступень опускается до «Секции» */
  }

  /* На узком экране две колонки плиток дают по 2-3 слова в строке — одна колонка */
  .gigas-info__two-column--media .gigas-info__method-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 520px) {
  .gigas-info__models {
    grid-template-columns: minmax(0, 1fr);
  }

  .gigas-info__model-media {
    height: 190px;
  }

  .gigas-info__method-list--four {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Действия в секциях были прижаты к левому краю: __section-action
     не переопределялся ни в одном медиазапросе. Разворачиваем в колонку
     и растягиваем по ширине блока — правило закрывает все шесть блоков. */
  .gigas-info__section-action {
    flex-direction: column;
    align-items: stretch;
  }

  .gigas-info__section-action .gigas-info__button,
  .gigas-info__section-action .gigas-info__button-secondary {
    width: 100%;
    justify-content: center;
  }

  .gigas-info__section-action .gigas-info__inline-link {
    justify-content: center;
    text-align: center;
  }

  .gigas-info--knr .gigas-info__section--surface {
    padding: 20px;
    border-radius: 12px;
  }

  .gigas-info__hero-actions .gigas-info__button,
  .gigas-info__hero-actions .gigas-info__button-secondary,
  .gigas-info__cta-actions .gigas-info__button,
  .gigas-info__cta-actions .gigas-info__button-secondary {
    width: 100%;
    justify-content: center;
  }

  .gigas-info__media img {
    max-height: 300px;
  }
}

@media print {
  .gigas-info__hero-actions,
  .gigas-info__cta-actions,
  .gigas-info__catalog,
  .gigas-info__model-action {
    display: none;
  }
}


/* «Кому подходит» в две колонки (2026-09-23): короткие ситуации читаются
   сканированием, а блок становится вдвое ниже. Ниже 761 — одна колонка. */
.gigas-info__plain-list--two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
}

@media (max-width: 760px) {
  .gigas-info__plain-list--two-col {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================
   ПЕРЕСБОРКА ПО ЛОГИКЕ ПРОДУКТОВЫХ СТРАНИЦ (2026-09-23)
   Путь «выбрал → купил» наверху, объяснения ниже и короче.
   ============================================================ */

/* Полоса крупных цифр под hero: выгода считывается без чтения. */
.gigas-info__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  /* Отбивка сверху и снизу одинаковая — 24 (заказчик 2026-09-23): полоса
     стоит между первым экраном и сравнением ровно посередине. */
  margin: 0 0 24px;
}

/* Полоса — продолжение первого экрана, а не отдельная секция:
   отбивка от hero равна межколоннику плиток. */
.gigas-info__hero + .gigas-info__stats {
  margin-top: -28px;        /* 52 у hero − 28 = 24 */
}

.gigas-info__stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 24px;
  border-radius: var(--gigas-radius-large);
  background: var(--gigas-surface-grey);
}

.gigas-info__stat-value {
  color: var(--gigas-ink);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.gigas-info__stat-label {
  color: var(--gigas-text);
  font-size: 14px;
  line-height: 1.2;
}

/* Линейки: кнопка на каждой карточке, обводкой, во всю ширину карточки. */
.gigas-info__model .gigas-info__button-secondary {
  width: 100%;
  justify-content: center;
  border-radius: 12px;
}

/* «Как купить» — шаги в ряд: номер сверху, текст под ним. */
.gigas-info__steps--row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 28px;
}

.gigas-info__steps--row .gigas-info__step,
.gigas-info__steps--row .gigas-info__step + .gigas-info__step {
  min-height: 0;
  margin: 0;
  padding: 50px 0 0;
  border-top: 0;
}

.gigas-info__steps--row .gigas-info__step::before,
.gigas-info__steps--row .gigas-info__step + .gigas-info__step::before {
  top: 0;
}

/* «Почему наружная» — шесть плиток сеткой 2×3 в левой колонке рядом с формой.
   Ряды 1fr: плитки добирают высоту формы поровну, без провалов снизу. */
.gigas-info__split-main .gigas-info__method-list--tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 12px;
  height: 100%;
}

.gigas-info__method-list--tiles .gigas-info__method {
  align-items: center;
  min-height: 0;
  padding: 14px;
}

@media (max-width: 980px) {
  .gigas-info__stats,
  .gigas-info__steps--row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .gigas-info__stat {
    padding: 16px;
  }

  .gigas-info__steps--row,
  .gigas-info__split-main .gigas-info__method-list--tiles {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* На мобиле у hero отбивка 36, а не 52 — компенсация меньше. */
@media (max-width: 760px) {
  .gigas-info__hero + .gigas-info__stats {
    margin-top: -12px;      /* 36 у hero − 12 = 24 */
  }
}

/* Линейки на мобиле — две колонки, а не столбик из четырёх карточек
   (2026-09-23): столбик занимал ~2000 px и отодвигал товары на треть длины.
   Карточка компактнее: меньше поле, снимок и шрифт; суть — название,
   площадь и кнопка — сохраняется. Правило стоит последним в файле,
   поэтому перекрывает прежнюю одноколоночную раскладку этой ширины. */
@media (max-width: 520px) {
  .gigas-info__models {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .gigas-info__model {
    padding: 14px;
  }

  .gigas-info__model-media {
    height: 130px;
    margin-bottom: 10px;
  }

  .gigas-info__model-name {
    font-size: 18px;
  }

  .gigas-info__model-type {
    margin-bottom: 10px;
    font-size: 12px;
  }

  .gigas-info__model-specs {
    margin-bottom: 10px;
    padding-bottom: 10px;
  }

  .gigas-info__model-spec {
    flex-direction: column;
    gap: 0;
    font-size: 12px;
  }

  .gigas-info__model-spec dd {
    text-align: left;
  }

  .gigas-info__model-text {
    margin-bottom: 12px;
    font-size: 12px;
  }

  .gigas-info__model .gigas-info__button-secondary {
    min-height: 40px;
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.1;
    text-align: center;
  }
}

/* Линейки: площадь — главный признак выбора для покупателя, её крупно.
   Мощность и исполнение — второй строкой мелко (2026-09-23). */
.gigas-info__model-area {
  margin: 10px 0 4px;
  color: var(--gigas-ink);
  font-size: 26px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.gigas-info__model-area span {
  margin-right: 4px;
  color: var(--gigas-muted);
  font-size: 14px;
  font-weight: 400;
}

@media (max-width: 520px) {
  .gigas-info__model-area {
    margin-top: 6px;
    font-size: 19px;
    white-space: normal;
  }

  .gigas-info__model-area span {
    display: block;
    font-size: 12px;
  }
}

/* «Почему не замёрзнет»: снимок разреза слева на всю высоту, четыре плитки
   справа столбиком (2026-09-23). Сетка вместо 2×2: короткие плитки
   больше не растягиваются с пустотой, колонка по-прежнему равна форме. */
.gigas-info__split-main .gigas-info__method-list--tiles {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  grid-template-rows: repeat(4, minmax(0, 1fr));
}

.gigas-info__tiles-media {
  grid-column: 1;
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 12px;
  border-radius: var(--gigas-radius);
  background: var(--gigas-surface-grey);
  min-height: 0;
}

/* Снимок вне потока: иначе его собственная высота (1088 px) распирает
   ряды сетки. Высоту колонки задают плитки и форма, снимок вписывается. */
.gigas-info__tiles-media {
  position: relative;
  justify-content: flex-end;
}

.gigas-info__tiles-media img {
  position: absolute;
  top: 12px;
  left: 12px;
  width: calc(100% - 24px);
  height: calc(100% - 48px);
  object-fit: contain;
}

.gigas-info__tiles-media figcaption {
  color: var(--gigas-text);
  font-size: 13px;
  line-height: 1.2;
  text-align: center;
}

.gigas-info__method-list--tiles .gigas-info__method {
  grid-column: 2;
}

/* Мобильный hero: фото — отдельной полосой сверху, текст под ним на графите.
   Поверх фото текст закрывал модуль целиком, и было не понять, что продаём. */
@media (max-width: 760px) {
  .gigas-info__hero-media {
    position: relative;
    height: 240px;
  }

  .gigas-info__hero-media::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, var(--gigas-graphite) 100%);
  }

  .gigas-info__hero-media img {
    object-position: 84% 72%;
  }
}

@media (max-width: 520px) {
  .gigas-info__split-main .gigas-info__method-list--tiles {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  .gigas-info__tiles-media {
    grid-row: auto;
    height: 260px;
  }

  .gigas-info__method-list--tiles .gigas-info__method {
    grid-column: auto;
  }
}

/* Ниже 981 форма уходит под колонку и больше не задаёт ей высоту:
   плитки — по содержимому, снимку — своя высота. Без этого ряды 1fr
   равнялись самому высокому элементу, и каждая плитка раздувалась. */
@media (max-width: 980px) {
  .gigas-info__split-main .gigas-info__method-list--tiles {
    height: auto;
    grid-template-rows: repeat(4, auto);
    grid-auto-rows: auto;
  }

  .gigas-info__tiles-media {
    min-height: 320px;
  }
}

@media (max-width: 520px) {
  .gigas-info__split-main .gigas-info__method-list--tiles {
    grid-template-rows: none;
  }

  .gigas-info__tiles-media {
    min-height: 0;
  }
}

/* Пометка к цене первого экрана: монтаж в «от» не входит (заказчик 2026-09-23). */
.gigas-info__hero-price-note {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, .75);
  font-size: 14px;
}

.gigas-info__price-hint span {
  color: var(--gigas-muted);
  font-size: 14px;
}

/* Строка сравнения в деньгах — последней, с разделительной чертой сверху. */
.gigas-info--knr ul.gigas-info__vs-list > li.gigas-info__vs-item--money {
  margin-top: 8px;
}

.gigas-info__vs-note {
  position: relative;
  z-index: 1;
  margin: 16px 0 0;
  color: rgba(255, 255, 255, .6);
  font-size: 12px;
  line-height: 1.25;
}

.gigas-info__vs-note--light {
  color: var(--gigas-muted);
}

/* «Когда котёл на кухню не поставить» — три нормы крупными значениями. */
.gigas-info__need {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}

.gigas-info__need-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--gigas-line);
  border-radius: var(--gigas-radius-large);
  background: var(--gigas-white);
}

.gigas-info__need-value {
  color: var(--gigas-orange);
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.gigas-info__need-text {
  color: var(--gigas-text);
  font-size: 15px;
  line-height: 1.25;
}

@media (max-width: 760px) {
  .gigas-info__need {
    grid-template-columns: minmax(0, 1fr);
  }

  .gigas-info__need-item {
    padding: 18px;
  }
}

/* «Как устроена» — схема под раскрытием (аудит 2026-09-23). */
.gigas-info__more {
  margin-top: 24px;
}

.gigas-info__more > summary {
  list-style: none;
  cursor: pointer;
}

.gigas-info__more > summary::-webkit-details-marker {
  display: none;
}

.gigas-info__more > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: 4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s;
}

.gigas-info__more[open] > summary {
  margin-bottom: 28px;
}

.gigas-info__more[open] > summary::after {
  transform: translateY(2px) rotate(-135deg);
}

/* Варианты установки ниже (аудит 2026-09-23): 560 → 440. Модуль на обоих
   кадрах остаётся в кадре — проверено на стенде. */
.gigas-info__two-column--install .gigas-info__media--card img {
  max-height: 440px;
}

/* Доверие — полоса из трёх фактов (аудит 2026-09-23). Канонический __summary
   уже даёт ряд с разделителями; убираем только его нижнюю отбивку —
   её задаёт секция. */
.gigas-info__summary--row {
  margin: 28px 0 0;
}

/* Звонок в «Вариантах установки» — горизонтальная плашка под фото. */
.gigas-info__callback--install .gigas-info__callback-title {
  margin-bottom: 0;
}

/* Ссылка внутри текста — строчная: у __inline-link высота тап-таргета,
   и в абзаце она раздвигала строки вдвое. */
.gigas-info__callback--install .gigas-info__callback-text .gigas-info__inline-link {
  display: inline;
  min-height: 0;
  margin-left: 4px;
}

/* Сравнение на мобиле: пары вперемешку «минус → плюс», а не экран минусов
   подряд (аудит 2026-09-23). Колонки и списки растворяются в общую сетку,
   порядок задаёт номер пункта. Заголовки колонок скрыты: сторону сообщают
   крестик и галочка. */
@media (max-width: 760px) {
  .gigas-info__vs {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .gigas-info__vs-column,
  .gigas-info--knr ul.gigas-info__vs-list {
    display: contents;
  }

  .gigas-info__vs-title {
    display: none;
  }

  .gigas-info--knr ul.gigas-info__vs-list > li:nth-child(1) { order: 1; }
  .gigas-info--knr ul.gigas-info__vs-list--win > li:nth-child(1) { order: 2; }
  .gigas-info--knr ul.gigas-info__vs-list > li:nth-child(2) { order: 3; }
  .gigas-info--knr ul.gigas-info__vs-list--win > li:nth-child(2) { order: 4; }
  .gigas-info--knr ul.gigas-info__vs-list > li:nth-child(3) { order: 5; }
  .gigas-info--knr ul.gigas-info__vs-list--win > li:nth-child(3) { order: 6; }
  .gigas-info--knr ul.gigas-info__vs-list > li:nth-child(4) { order: 7; }
  .gigas-info--knr ul.gigas-info__vs-list--win > li:nth-child(4) { order: 8; }

  /* Отбивка перед каждой новой парой — пары читаются группами. */
  .gigas-info--knr ul.gigas-info__vs-list:not(.gigas-info__vs-list--win) > li:not(:first-child) {
    margin-top: 12px;
  }

  .gigas-info--knr ul.gigas-info__vs-list > li {
    min-height: 0;
    padding: 12px 16px;
  }

  .gigas-info--knr ul.gigas-info__vs-list--win > li.gigas-info__vs-item--money {
    margin-top: 0;
  }
}

/* «Как купить» — маршрут (заказчик 2026-09-23): пунктир со стрелкой от кружка
   к кружку, в конце — финиш с флажком. Десктоп — пять колонок в ряд;
   ниже 981 — вертикальный маршрут, линия идёт вниз от кружка к кружку. */
.gigas-info__steps--route {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.gigas-info__steps--route .gigas-info__step {
  position: relative;
}

.gigas-info__steps--route .gigas-info__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 16px;
  left: 44px;
  right: -14px;
  height: 10px;
  margin-top: -4px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath d='M1 1l5 4-5 4' fill='none' stroke='%23D12E28' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right center / 8px 10px no-repeat,
    repeating-linear-gradient(90deg, #D12E28 0 7px, transparent 7px 13px) left center / calc(100% - 12px) 2px no-repeat;
  opacity: .75;
}

/* Финиш: не нумеруется, вместо цифры — флажок на графите. */
.gigas-info__steps--route .gigas-info__step--finish {
  counter-increment: none;
}

.gigas-info__steps--route .gigas-info__step--finish::before,
.gigas-info__steps--route .gigas-info__step + .gigas-info__step--finish::before {
  content: "";
  background: var(--gigas-graphite) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 21V4'/%3E%3Cpath d='M6 4h11l-2.5 4L17 12H6'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}

.gigas-info__steps--route .gigas-info__step--finish strong {
  color: var(--gigas-ink);
}

@media (max-width: 980px) {
  .gigas-info__steps--route {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .gigas-info__steps--route .gigas-info__step,
  .gigas-info__steps--route .gigas-info__step + .gigas-info__step {
    padding: 0 0 22px 52px;
    min-height: 56px;
  }

  .gigas-info__steps--route .gigas-info__step:not(:last-child)::after {
    top: 42px;
    bottom: 6px;
    left: 16px;
    right: auto;
    width: 10px;
    height: auto;
    margin: 0 0 0 -4px;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 1l4 5 4-5' fill='none' stroke='%23D12E28' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center bottom / 10px 8px no-repeat,
      repeating-linear-gradient(180deg, #D12E28 0 7px, transparent 7px 13px) center top / 2px calc(100% - 10px) no-repeat;
  }
}

/* ============================================================
   ФОНЫ БЛОКОВ (заказчик 2026-09-23: «не просто серый»).
   Собраны кодом на языке героя: GiGasWiki/12-Design/imagery/knr-blocks.py,
   паспорт — imagery/knr-blocks.md. Файлы @2x.
   ============================================================ */

/* Плашки-CTA — графит, как принятая «Спросите инженера» на главной. */
.gigas-info__section-action--panel {
  background: var(--gigas-graphite) center / cover no-repeat;
}

#knr-buy .gigas-info__section-action--panel { background-image: url("images/bg/knr-panel-buy-2696x184.webp"); }
#knr-options .gigas-info__section-action--panel { background-image: url("images/bg/knr-panel-options-2696x184.webp"); }

.gigas-info__section-action--panel .gigas-info__section-action-note {
  color: var(--gigas-white);
}

/* Полоса цифр — у каждой плитки свой мотив, «0 м²» — насыщенная. */
.gigas-info__stat {
  background: #F1F1F1 right center / cover no-repeat;
}

.gigas-info__stat--area { background-image: url("images/bg/knr-stat-area-656x240.webp"); }
.gigas-info__stat--frost { background-image: url("images/bg/knr-stat-frost-656x240.webp"); }
.gigas-info__stat--insulation { background-image: url("images/bg/knr-stat-insulation-656x240.webp"); }
.gigas-info__stat--warranty { background-image: url("images/bg/knr-stat-warranty-656x240.webp"); }

.gigas-info__stat--area .gigas-info__stat-value,
.gigas-info__stat--area .gigas-info__stat-label {
  color: var(--gigas-white);
}

/* Карточки линеек — свет за модулем, контуры знака; все четыре в одной палитре. */
.gigas-info__model {
  background: var(--gigas-surface-grey) center top / cover no-repeat;
}

.gigas-info__model--s { background-image: url("images/bg/knr-model-s-656x918.webp"); }
.gigas-info__model--m { background-image: url("images/bg/knr-model-m-656x918.webp"); }
.gigas-info__model--2m { background-image: url("images/bg/knr-model-2m-656x918.webp"); }
.gigas-info__model--xl { background-image: url("images/bg/knr-model-xl-656x918.webp"); }

/* Промежуток кнопка → схема (заказчик 2026-09-23: «большое расстояние»).
   Было ~104 px: отступ кнопки 28 + поле сцены 4 % + центрирование квадратного
   снимка в полосе 80 % + собственное поле файла. Сцену подтягиваем вверх
   в процентах ширины — пропорция сохраняется на любой ширине, подписи
   и линии едут вместе со сценой. Итог ~36 px на 1440. Только десктоп:
   ниже 981 сцена — обычный список. */
.gigas-info__more[open] > summary {
  margin-bottom: 16px;
}

@media (min-width: 981px) {
  .gigas-info__more .gigas-info__scheme-stage {
    margin-top: -4.2%;
  }
}

/* «Не знаете, какой способ подойдёт?» — две колонки (заказчик 2026-09-23):
   слева заголовок, текст и телефон, справа форма столбиком — поля, кнопка,
   согласие. Столбец формы собирают общие правила __callback--vertical. */
.gigas-info__callback--install {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: 24px 64px;
  align-items: center;
  padding: 36px;
  background: #F1F1F1 center / cover no-repeat;
  background-image: url("images/bg/knr-form-install-2696x844.webp");
}

.gigas-info__callback--install .gigas-info__callback-head {
  grid-column: 1;
  max-width: 520px;
  margin: 0;
}

.gigas-info__callback--install .gigas-info__callback-title {
  margin-bottom: 12px;
  font-size: 28px;
}

.gigas-info__callback--install .gigas-info__callback-text {
  margin-bottom: 20px;
}

.gigas-info__callback--install .gigas-info__form,
.gigas-info__callback--install .gigas-info__form-success {
  grid-column: 2;
}

@media (max-width: 760px) {
  /* Фон собран под две колонки: плашка с модулем стоит в промежутке текст ↔ форма.
     В одной колонке она ложилась под поля и текст — на мобиле фон ровный. */
  .gigas-info__callback--install {
    grid-template-columns: minmax(0, 1fr);
    padding: 24px 20px;
    background-image: none;
  }

  .gigas-info__callback--install .gigas-info__form,
  .gigas-info__callback--install .gigas-info__form-success {
    grid-column: 1;
  }

  .gigas-info__callback--install .gigas-info__callback-title {
    font-size: 22px;
  }
}

/* Доверие — четыре факта (добавлена «Гарантия лучшей цены», 2026-09-24). */
.gigas-info__summary--row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 980px) {
  .gigas-info__summary--row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .gigas-info__summary--row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================
   ПОПАП «ЗАКАЗАТЬ ЗВОНОК» (заказчик 2026-09-24)
   ============================================================ */
html.knr-modal-open {
  overflow: hidden;
}

.gigas-info__modal {
  position: fixed;
  inset: 0;
  z-index: 10050;                 /* выше липкой шапки и попапов темы */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.gigas-info__modal[hidden] {
  display: none;
}

.gigas-info__modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 20, .6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: knr-fade .2s ease;
}

.gigas-info__modal-card {
  position: relative;
  width: min(100%, 460px);
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 40px 32px 28px;
  border-radius: 24px;
  background: #F6F6F6 url("images/bg/knr-popup-920x1120.webp") right top / 100% auto no-repeat;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
  animation: knr-pop .22s ease;
}

.gigas-info__modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--gigas-white);
  color: var(--gigas-ink);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

.gigas-info__modal-close svg {
  width: 18px;
  height: 18px;
}

.gigas-info__modal-title {
  max-width: 300px;
  margin: 0 0 10px;
  color: var(--gigas-ink);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.05;
}

.gigas-info__modal-text {
  max-width: 300px;
  margin: 0 0 24px;
  color: var(--gigas-text);
  font-size: 15px;
  line-height: 1.25;
}

.gigas-info__modal-form {
  display: grid;
  gap: 12px;
}

.gigas-info__modal-form .gigas-info__field-error:empty {
  min-height: 0;
  height: 0;
}

.gigas-info__modal-form .gigas-info__button {
  width: 100%;
  margin-top: 4px;
  border-radius: 12px;
}

.gigas-info__modal-form .gigas-info__form-promise {
  font-size: 14px;
  font-weight: 500;
}

@keyframes knr-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes knr-pop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .gigas-info__modal-overlay,
  .gigas-info__modal-card {
    animation: none;
  }
}

@media (max-width: 520px) {
  .gigas-info__modal-card {
    padding: 36px 20px 22px;
  }

  .gigas-info__modal-title {
    font-size: 26px;
  }
}

/* Форма после сравнения (заменила блок норм, 2026-09-24): графит в серии
   с плашками-CTA, текст и подписи белые, поля и кнопка — как везде. */
.gigas-info__callback--lead {
  margin-top: 0;
  padding: 32px 36px;
  background: var(--gigas-graphite) center / cover no-repeat;
  background-image: url("images/bg/knr-lead-2696x828.webp");
  color: var(--gigas-white);
}

.gigas-info__callback--lead .gigas-info__callback-title {
  color: var(--gigas-white);
  font-size: 26px;
}

.gigas-info__callback--lead .gigas-info__callback-text,
.gigas-info__callback--lead .gigas-info__label {
  color: rgba(255, 255, 255, .8);
}

.gigas-info__callback--lead .gigas-info__legal {
  color: rgba(255, 255, 255, .6);
}

.gigas-info__callback--lead .gigas-info__form-promise {
  color: var(--gigas-white);
}

.gigas-info__callback--lead .gigas-info__form-success strong,
.gigas-info__callback--lead .gigas-info__form-success span {
  color: var(--gigas-white);
}

/* «Как купить» → «Ведём от интереса до тепла в доме» (2026-09-24).
   Шаг 2 — карточка-акцент: мягкая заливка, бейдж «Ваш инженер»; кружок и линия
   маршрута смещены внутрь карточки. Под маршрутом — полоса сопровождения
   от шага 2 до финиша (десктоп). */
.gigas-info__steps--route .gigas-info__step--accent,
.gigas-info__steps--route .gigas-info__step + .gigas-info__step--accent {
  margin: -16px 0 0;
  padding: 66px 16px 16px;
  border-radius: 16px;
  background: var(--gigas-orange-soft);
  box-shadow: inset 0 0 0 1px rgba(209, 46, 40, .25);
}

.gigas-info__steps--route .gigas-info__step--accent::before,
.gigas-info__steps--route .gigas-info__step + .gigas-info__step--accent::before {
  top: 16px;
  left: 16px;
}

.gigas-info__steps--route .gigas-info__step--accent:not(:last-child)::after {
  top: 32px;
  left: 60px;
}

.gigas-info__steps--route .gigas-info__step--accent strong {
  color: var(--gigas-orange);
  font-size: 17px;
}

/* Бейдж — на верхней кромке карточки, над пунктиром, а не поверх него. */
.gigas-info__step-badge {
  position: absolute;
  top: -11px;
  right: 16px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--gigas-orange);
  color: var(--gigas-white);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
}

.gigas-info__route-escort {
  position: relative;
  margin: 18px 0 0 calc((100% - 96px) / 5 + 24px);
  padding: 10px 0 0;
  border-top: 2px solid var(--gigas-orange);
  color: var(--gigas-orange);
  font-size: 15px;
  font-weight: 500;
  text-align: center;
}

.gigas-info__route-escort::before,
.gigas-info__route-escort::after {
  content: "";
  position: absolute;
  top: -8px;
  width: 2px;
  height: 14px;
  background: var(--gigas-orange);
}

.gigas-info__route-escort::before { left: 0; }
.gigas-info__route-escort::after { right: 0; }

@media (max-width: 980px) {
  .gigas-info__steps--route .gigas-info__step--accent,
  .gigas-info__steps--route .gigas-info__step + .gigas-info__step--accent {
    margin: 0 0 22px;
    padding: 16px 16px 16px 60px;
  }

  .gigas-info__steps--route .gigas-info__step--accent::before,
  .gigas-info__steps--route .gigas-info__step + .gigas-info__step--accent::before {
    top: 16px;
    left: 12px;
  }

  .gigas-info__steps--route .gigas-info__step--accent:not(:last-child)::after {
    top: 58px;
    left: 28px;
    bottom: -18px;
  }

  .gigas-info__step-badge {
    position: static;
    display: inline-block;
    margin-bottom: 6px;
  }

  .gigas-info__route-escort {
    margin-left: 0;
    border-top: 0;
    padding: 0;
    text-align: left;
  }

  .gigas-info__route-escort::before,
  .gigas-info__route-escort::after {
    content: none;
  }
}

/* «Почему не замёрзнет» — зигзаг из двух пар «фото + два довода» (2026-09-24).
   Ряд 1–2: разрез слева, доводы справа; ряд 3–4: доводы слева, модуль справа. */
.gigas-info__split-main .gigas-info__method-list--tiles {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
}

.gigas-info__tiles-media--a { grid-column: 1; grid-row: 1 / 3; }
.gigas-info__method-list--tiles .gigas-info__method--t1 { grid-column: 2; grid-row: 1; }
.gigas-info__method-list--tiles .gigas-info__method--t2 { grid-column: 2; grid-row: 2; }
.gigas-info__tiles-media--b { grid-column: 2; grid-row: 3 / 5; }
.gigas-info__method-list--tiles .gigas-info__method--t3 { grid-column: 1; grid-row: 3; }
.gigas-info__method-list--tiles .gigas-info__method--t4 { grid-column: 1; grid-row: 4; }

@media (max-width: 980px) {
  .gigas-info__tiles-media--a,
  .gigas-info__tiles-media--b {
    min-height: 280px;
  }
}

@media (max-width: 520px) {
  .gigas-info__tiles-media--a,
  .gigas-info__tiles-media--b,
  .gigas-info__method-list--tiles .gigas-info__method--t1,
  .gigas-info__method-list--tiles .gigas-info__method--t2,
  .gigas-info__method-list--tiles .gigas-info__method--t3,
  .gigas-info__method-list--tiles .gigas-info__method--t4 {
    grid-column: auto;
    grid-row: auto;
  }
}

/* Мобильные правила зигзага — после десктопного, иначе оно их перебивает. */
@media (max-width: 980px) {
  .gigas-info__split-main .gigas-info__method-list--tiles {
    height: auto;
    grid-template-rows: none;
    grid-auto-rows: auto;
  }
}

@media (max-width: 520px) {
  .gigas-info__split-main .gigas-info__method-list--tiles {
    grid-template-columns: minmax(0, 1fr);
  }

  .gigas-info__tiles-media--a,
  .gigas-info__tiles-media--b {
    min-height: 260px;
  }
}

/* «На опорной раме» — кадр целиком (заказчик 2026-09-24: «правая фото должна
   полностью влезать»). Исходник вертикальный 4:5 — в полосе 440 px cover резал
   раму или дымоходы. Собран широкий вариант knr-roof-open-wide.webp: кадр целиком
   по центру, по бокам — его же размытая копия (без «заплаток» цветом).
   cover по центру теперь срезает только размытые поля. */
.gigas-info__two-column--install .gigas-info__media--whole img {
  height: 440px;
  object-position: 50% 50%;
}

@media (max-width: 760px) {
  /* Широкий кадр в своей пропорции: снимок целиком по центру, края размыты. */
  .gigas-info__two-column--install .gigas-info__media--whole img {
    height: auto;
    max-height: none;
    aspect-ratio: 20 / 11;
    object-fit: cover;
  }
}

/* «Варианты установки» + форма третьей колонкой (2026-09-24). Форма —
   вертикальная карточка: заголовок, текст, телефон, поля, кнопка, согласие.
   Фон — вертикальный фон попапа. Прежняя горизонтальная раскладка
   __callback--install (две колонки) этими правилами перекрыта. */
.gigas-info__install-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 340px;
  gap: 24px;
  align-items: stretch;
}

.gigas-info__install-layout > .gigas-info__two-column--install {
  display: contents;
}

.gigas-info__install-layout .gigas-info__callback--install {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 28px 24px 24px;
  border-radius: var(--gigas-radius-large);
  background: #F6F6F6 url("images/bg/knr-popup-920x1120.webp") right top / 100% auto no-repeat;
}

.gigas-info__install-layout .gigas-info__callback--install .gigas-info__callback-head {
  max-width: none;
  margin-bottom: 14px;
}

.gigas-info__install-layout .gigas-info__callback--install .gigas-info__callback-title {
  max-width: 250px;
  margin-bottom: 8px;
  font-size: 22px;
}

.gigas-info__install-layout .gigas-info__callback--install .gigas-info__callback-text {
  margin-bottom: 10px;
  font-size: 14px;
}

.gigas-info__install-layout .gigas-info__callback--install .gigas-info__phone-link {
  font-size: 20px;
}

.gigas-info__install-layout .gigas-info__media--card img,
.gigas-info__two-column--install .gigas-info__media--whole img {
  height: 380px;
  max-height: 380px;
}

@media (max-width: 1200px) {
  .gigas-info__install-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gigas-info__install-layout .gigas-info__callback--install {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .gigas-info__install-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .gigas-info__install-layout .gigas-info__media--card img {
    height: auto;
    max-height: 400px;
  }
}

/* Карточка фото равна высоте формы: снимок забирает всё, что не занимает
   подпись, — без пустого поля под текстом. */
@media (min-width: 1201px) {
  .gigas-info__install-layout .gigas-info__media--card {
    display: flex;
    flex-direction: column;
  }

  /* basis 0 и height 0: собственная высота снимка не распирает ряд —
     высоту ряда задаёт форма, снимок занимает остаток карточки. */
  .gigas-info__install-layout .gigas-info__media--card img,
  .gigas-info__install-layout .gigas-info__media--whole img {
    flex: 1 1 0;
    height: 0;
    min-height: 0;
    max-height: none;
  }
}

@media (max-width: 760px) {
  .gigas-info__install-layout .gigas-info__media--whole img {
    height: auto;
    max-height: none;
    aspect-ratio: 20 / 11;
  }
}

/* «Как устроена» (2026-09-24). Точки узлов — настоящие круги. */
.gigas-info__scheme-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gigas-red);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .85);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Подписи схемы — классический гротеск, без капса (заказчик 2026-09-24:
   «шрифт какой-то не такой, нужен классический»). Отступление от Nekst —
   только в выносках схемы; перебиваем !important общего правила шрифта. */
.gigas-info--kotelnye-naruzhnogo-razmeshcheniya .gigas-info__scheme-title,
.gigas-info--kotelnye-naruzhnogo-razmeshcheniya .gigas-info__scheme-text {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}

.gigas-info__scheme-title {
  font-size: 15px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}

.gigas-info__scheme-text {
  font-size: 13px;
  line-height: 1.4;
}

/* Кнопка раскрытия — над сценой схемы (заказчик 2026-09-24: «не сворачивает»).
   Сцена подтянута вверх отрицательным отступом и перекрывала кнопку: клик
   попадал в сцену. Нижняя «Свернуть схему» убрана — работает верхняя. */
.gigas-info__more > summary {
  position: relative;
  z-index: 3;
}

@media (max-width: 980px) {
  .gigas-info__scheme-dot {
    display: none;
  }
}

.gigas-info--kotelnye-naruzhnogo-razmeshcheniya .gigas-info__scheme-title {
  font-weight: 700;
}

/* Пункты доверия финального баннера (заказчик 2026-09-24: «мелковаты и стоят
   неровно»). Неровность — от темы: у li свои отступы и line-height, из-за них
   первый пункт вставал выше соседей. Сбрасываем их и собираем плашки-чипы
   одной высоты, крупнее, с галочкой. */
.gigas-info--knr ul.gigas-info__cta-trust {
  align-items: stretch;
  gap: 10px;
  margin-top: 24px;
}

.gigas-info--knr ul.gigas-info__cta-trust > li {
  margin: 0 !important;
  padding: 10px 16px 10px 12px !important;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(40, 40, 40, .55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--gigas-white);
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
}

.gigas-info--knr ul.gigas-info__cta-trust > li::before {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  background: var(--gigas-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 10.5l2.6 2.6L14 7.6'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}

@media (max-width: 520px) {
  .gigas-info--knr ul.gigas-info__cta-trust > li {
    font-size: 15px;
  }
}

/* ============================================================
   «Почему не замёрзнет зимой» — расширенный разбор (2026-09-24).
   Два ряда «фото + доводы» зигзагом, затем «Что будет, если…»,
   затем форма полосой.
   ============================================================ */
.gigas-info__winter {
  display: grid;
  gap: 24px;
  margin-top: 28px;
}

.gigas-info__winter-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 32px;
  align-items: stretch;
}

.gigas-info__winter-row--reverse {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.gigas-info__winter-row--reverse .gigas-info__winter-media {
  order: 2;
}

.gigas-info__winter-media {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 24px;
  border-radius: var(--gigas-radius-large);
  background: var(--gigas-surface-grey);
}

.gigas-info__winter-media img {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: contain;
}

.gigas-info__winter-media figcaption {
  color: var(--gigas-text);
  font-size: 14px;
  line-height: 1.25;
  text-align: center;
}

.gigas-info__winter-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.gigas-info__winter-title {
  margin: 0 0 16px;
  color: var(--gigas-ink);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.1;
}

.gigas-info__winter-list {
  display: grid;
  gap: 12px;
}

.gigas-info__winter-list .gigas-info__method {
  min-height: 0;
  padding: 18px 20px;
  align-items: start;
}

.gigas-info__winter-list .gigas-info__method-title {
  margin: 0 0 6px;
  font-size: 18px;
}

.gigas-info__winter-list .gigas-info__method-text {
  font-size: 15px;
  line-height: 1.4;
}

.gigas-info__winter-title--cases {
  margin-top: 40px;
}

.gigas-info__winter-cases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.gigas-info__winter-case {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 24px;
  border-radius: var(--gigas-radius-large);
  background: var(--gigas-orange-soft);
}

.gigas-info__winter-case b {
  color: var(--gigas-ink);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.15;
}

.gigas-info__winter-case span {
  color: var(--gigas-text);
  font-size: 15px;
  line-height: 1.4;
}

/* Форма — горизонтальная полоса: поля и кнопка в ряд (каноническая сетка
   __field-row), согласие под кнопкой. */
.gigas-info__form-tile--wide {
  margin-top: 32px;
}

@media (max-width: 980px) {
  .gigas-info__winter-row,
  .gigas-info__winter-row--reverse {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .gigas-info__winter-row--reverse .gigas-info__winter-media {
    order: 0;
  }

  .gigas-info__winter-media img {
    max-height: 300px;
  }

  .gigas-info__winter-cases {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* «На опорной раме» — кадр, расширенный нейросетью (2026-09-24). <picture>
   не должен ломать flex-карточку: он растягивается как прежний img. */
.gigas-info__media--whole picture {
  display: contents;
}

@media (max-width: 760px) {
  .gigas-info__install-layout .gigas-info__media--whole img,
  .gigas-info__two-column--install .gigas-info__media--whole img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
}

/* Финальный баннер: «Гарантия лучшей цены» — второй строкой (заказчик 2026-09-24:
   третья плашка перекрывала фото котла). Ширина строки — под две плашки. */
@media (min-width: 761px) {
  .gigas-info--knr ul.gigas-info__cta-trust {
    max-width: 490px;
  }
}

/* «Что будет, если…» + форма справа (заказчик 2026-09-24). */
.gigas-info__winter-faq {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 32px;
  align-items: stretch;
  margin-top: 48px;
}

.gigas-info__winter-faq-main {
  display: flex;
  flex-direction: column;
}

.gigas-info__winter-faq .gigas-info__winter-cases {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 12px;
}

.gigas-info__winter-faq .gigas-info__winter-case {
  display: grid;
  flex: 1 1 0;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 22px 24px;
  border: 1px solid var(--gigas-line);
  border-left: 4px solid var(--gigas-orange);
  border-radius: var(--gigas-radius-large);
  background: var(--gigas-white);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .05);
}

.gigas-info__winter-case-icon {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border-radius: 50%;
  background: var(--gigas-orange-soft);
  color: var(--gigas-orange);
}

.gigas-info__winter-case-icon svg {
  width: 28px;
  height: 28px;
}

.gigas-info__winter-faq .gigas-info__winter-case b {
  display: block;
  margin-bottom: 6px;
  font-size: 19px;
}

.gigas-info__winter-faq .gigas-info__winter-case span:not(.gigas-info__winter-case-icon) {
  display: block;
}

/* Форма — карточка на фоне попапа, без красной рамки. */
.gigas-info__form-tile--pretty {
  margin: 0;
  padding: 32px 28px 26px;
  border: 0;
  border-radius: 24px;
  background: #F6F6F6 url("images/bg/knr-popup-920x1120.webp") right top / 100% auto no-repeat;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .08);
}

.gigas-info__form-tile--pretty .gigas-info__form-tile-title {
  max-width: 280px;
  font-size: 26px;
  line-height: 1.05;
}

.gigas-info__form-tile--pretty .gigas-info__form-tile-text {
  max-width: 290px;
  margin-bottom: 10px;
  font-size: 15px;
}

.gigas-info__form-tile--pretty .gigas-info__button {
  width: 100%;
  border-radius: 12px;
}

@media (max-width: 980px) {
  .gigas-info__winter-faq {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 520px) {
  .gigas-info__winter-faq .gigas-info__winter-case {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    padding: 18px;
  }

  .gigas-info__winter-case-icon {
    width: 44px;
    height: 44px;
  }

  .gigas-info__form-tile--pretty {
    padding: 26px 20px 22px;
  }
}

/* ── Первый экран на кадре hero-krats (2026-09-24) ──
   Модуль на 69–86 % ширины и 29–91 % высоты кадра 16:9. Полоса hero ~2.9:1
   показывает ~58 % высоты кадра; модуль (колпак 30 %, основание 84 %) занимает
   ~54 % — точка 50% 68% ставит его целиком. Подсветка: центр 78 % / 52 %.
   Попытка дорисовать кадр до 21:9 (outpaint 6751f179) отклонена — модель
   заменила сцену другим домом. */
.gigas-info__hero-media img {
  object-position: 50% 68%;   /* видимые ~28–86 % высоты: колпак и основание модуля в кадре */
}

@media (min-width: 981px) {
  .gigas-info__hero-media::after {
    -webkit-mask-image: radial-gradient(ellipse 11% 56% at 78% 52%, transparent 0 46%, #000 100%);
    mask-image: radial-gradient(ellipse 11% 56% at 78% 52%, transparent 0 46%, #000 100%);
  }

  .gigas-info__hero-media::before {
    -webkit-mask-image: radial-gradient(ellipse 11% 56% at 78% 52%, #000 0 46%, transparent 100%);
    mask-image: radial-gradient(ellipse 11% 56% at 78% 52%, #000 0 46%, transparent 100%);
  }
}

@media (max-width: 760px) {
  .gigas-info__hero-media img {
    object-position: 80% 72%;
  }
}

/* Форма после сравнения — две колонки (заказчик 2026-09-24): слева заголовок,
   текст и три пункта, справа поля столбиком, кнопка и согласие. Столбец полей
   собирают общие правила __callback--vertical. */
.gigas-info__callback--lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: 24px 64px;
  align-items: center;
  padding: 40px 44px;
}

.gigas-info__callback--lead .gigas-info__callback-head {
  margin: 0;
}

.gigas-info__callback--lead .gigas-info__callback-title {
  max-width: 520px;
  margin-bottom: 14px;
  font-size: 34px;
  line-height: 1.05;
}

.gigas-info__callback--lead .gigas-info__callback-text {
  max-width: 480px;
  margin-bottom: 24px;
  font-size: 17px;
}

.gigas-info--knr ul.gigas-info__lead-points {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gigas-info--knr ul.gigas-info__lead-points > li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  color: var(--gigas-white);
  font-size: 16px;
  line-height: 1.25;
}

.gigas-info--knr ul.gigas-info__lead-points > li::before {
  content: "";
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  border-radius: 50%;
  background: var(--gigas-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 10.5l2.6 2.6L14 7.6'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
}

.gigas-info__callback--lead .gigas-info__form {
  grid-column: 2;
}

.gigas-info__callback--lead .gigas-info__button {
  width: 100%;
  border-radius: 12px;
}

@media (max-width: 760px) {
  .gigas-info__callback--lead {
    grid-template-columns: minmax(0, 1fr);
    padding: 28px 20px;
  }

  .gigas-info__callback--lead .gigas-info__form {
    grid-column: 1;
  }

  .gigas-info__callback--lead .gigas-info__callback-title {
    font-size: 26px;
  }
}

/* «Ведём вас…» на мобиле (заказчик 2026-09-24: шаг 2 стоял криво).
   Вся линия маршрута сдвинута на 12 px вправо (ось кружков 29 px, текст с 64 px),
   чтобы кружок карточки-акцента стоял на той же оси, а сама карточка — внутри
   контейнера (с отрицательным отступом её левый край срезался). */
@media (max-width: 980px) {
  .gigas-info__steps--route .gigas-info__step,
  .gigas-info__steps--route .gigas-info__step + .gigas-info__step {
    padding-left: 64px;
  }

  .gigas-info__steps--route .gigas-info__step::before,
  .gigas-info__steps--route .gigas-info__step + .gigas-info__step::before {
    left: 12px;
  }

  .gigas-info__steps--route .gigas-info__step:not(:last-child)::after {
    left: 28px;
  }

  .gigas-info__steps--route .gigas-info__step--accent,
  .gigas-info__steps--route .gigas-info__step + .gigas-info__step--accent {
    margin: 0 0 22px;
    padding: 14px 12px 16px 64px;
  }

  .gigas-info__steps--route .gigas-info__step--accent::before,
  .gigas-info__steps--route .gigas-info__step + .gigas-info__step--accent::before {
    top: 14px;
  }

  .gigas-info__steps--route .gigas-info__step--accent:not(:last-child)::after {
    top: 54px;
    bottom: -18px;
  }

  .gigas-info__route-escort {
    padding-left: 12px;
  }
}

/* ── Первый экран, итерация 2 (2026-09-24): модуль вписан в сцену ──
   Заказчик: «КНР выбивается из общей картины». Подсветка модуля поверх кадра
   (вырез в вуали + backdrop-filter) снята — на новом кадре модуль освещён
   самой сценой, и локальная проявка делала его «наклейкой». Вуаль — ровная,
   только под текст. Модуль на ~72–84 % ширины и ~45–92 % высоты кадра:
   точка 50% 88% показывает нижние ~58 % — модуль с основанием целиком. */
.gigas-info__hero-media img {
  object-position: 50% 88%;
}

@media (min-width: 981px) {
  .gigas-info__hero-media::after {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .gigas-info__hero-media::before {
    content: none;
  }
}

@media (max-width: 760px) {
  .gigas-info__hero-media img {
    object-position: 82% 85%;
  }
}

/* FAQ — кнопка «Открыть все вопросы» (2026-09-25). */
.gigas-info__faq-more[hidden] {
  display: none;
}

.gigas-info__faq-toggle {
  border: 0;
  border-radius: 12px;
  cursor: pointer;
}

/* ── «Сравнение» + форма в один экран (заказчик 2026-09-25) ──
   Было 970 px (504 + 414 + отступ) — на 1440×900 форма уходила под сгиб.
   Сравнение: плашки 64 → 48, поля секции плотнее. Форма: одной полосой —
   заголовок слева, имя / телефон / кнопка в ряд справа, согласие мелко
   под ними; пункты-галочки сняты ради высоты. */
@media (min-width: 761px) {
  #knr-compare.gigas-info__section--photo {
    padding: 28px 36px 30px;
  }

  #knr-compare .gigas-info__section-copy {
    margin-bottom: 0;
  }

  #knr-compare .gigas-info__vs {
    margin-top: 16px;
    gap: 8px 24px;
  }

  #knr-compare .gigas-info__vs-column,
  .gigas-info--knr #knr-compare ul.gigas-info__vs-list {
    gap: 8px;
  }

  .gigas-info--knr #knr-compare ul.gigas-info__vs-list > li {
    min-height: 48px;
    padding: 10px 18px;
    font-size: 15px;
  }

  #knr-compare .gigas-info__vs-title {
    font-size: 19px;
  }

  #knr-compare {
    margin-bottom: 16px;
  }

  #knr-lead {
    margin-bottom: 52px;
  }

  .gigas-info__callback--lead {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
    gap: 16px 40px;
    padding: 26px 32px;
  }

  .gigas-info__callback--lead .gigas-info__callback-title {
    margin-bottom: 8px;
    font-size: 24px;
  }

  .gigas-info__callback--lead .gigas-info__callback-text {
    margin: 0;
    font-size: 15px;
  }

  .gigas-info__callback--lead .gigas-info__field-error:empty {
    min-height: 0;
    height: 0;
  }

  .gigas-info__callback--lead .gigas-info__legal--under-action {
    grid-column: 1 / -1;
    margin-top: 2px;
    font-size: 11px;
  }

  .gigas-info__callback--lead .gigas-info__form-promise {
    display: inline;
    margin: 0 4px 0 0;
    font-size: 12px;
  }
}

@media (min-width: 761px) {
  .gigas-info__callback--lead {
    background-image: url("images/bg/knr-lead-2696x370.webp");
  }
}

/* «На опорной раме» — кадр по реальным фото (2026-09-27): вертикальный,
   модуль с рамой крупно. Кадрирование держит низ рамы (ноги на плитке). */
/* Селектор с блоком раскладки: иначе старое правило
   .gigas-info__two-column--install .gigas-info__media--whole img (0,2,1)
   держит object-position 50% 50% и режет ноги рамы. */
.gigas-info__two-column--install .gigas-info__media--frame img,
.gigas-info__media--frame img {
  object-fit: cover;
  object-position: 46% 50%;   /* кадр квадратный (outpaint по бокам): высота видна целиком при любой ширине карточки, режутся только края стены */
}

@media (max-width: 760px) {
  .gigas-info__install-layout .gigas-info__media--frame img,
  .gigas-info__two-column--install .gigas-info__media--frame img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
  }
}

/* Сравнение — читаемость (заказчик 2026-09-27: «красиво, но плохо читается»).
   Фото под плашками было видно насквозь (фон 8 %, текст 70 %). Плашки минусов —
   плотный тёмный графит с размытием фона, текст почти белый; вуаль секции
   чуть плотнее. Акцент остаётся на плюсах: они белые, минусы — тёмные. */
#knr-compare .gigas-info__section-photo::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .66) 100%);
}

.gigas-info--knr #knr-compare ul.gigas-info__vs-list:not(.gigas-info__vs-list--win) > li {
  border-color: rgba(255, 255, 255, .14);
  background: rgba(28, 28, 28, .72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, .88);
}

#knr-compare .gigas-info__vs-list:not(.gigas-info__vs-list--win) .gigas-info__vs-icon {
  color: rgba(255, 255, 255, .55);
}

#knr-compare .gigas-info__vs-column:first-child .gigas-info__vs-title {
  color: rgba(255, 255, 255, .85);
}

#knr-compare .gigas-info__section-copy {
  color: rgba(255, 255, 255, .9);
}

/* Первый экран, итерация 3 (2026-09-28): настенный KRATS M в реальном масштабе —
   модуль на ~35–67 % высоты кадра, точка 50% 55% держит его с запасом. */
.gigas-info__hero-media img {
  object-position: 50% 55%;
}

@media (max-width: 760px) {
  .gigas-info__hero-media img {
    object-position: 80% 55%;
  }
}

/* Карточки линеек — структура (Игорь 2026-09-28: «площадь понятно, остальное
   не ясно»). Было: «дом до 400 м²» строкой и «настенный / напольный · котёл
   до 40 кВт» через точку. Стало: подпись над площадью, ниже два параметра
   «название — значение» с разделителем, затем для кого. */
.gigas-info__model-area span {
  display: block;
  margin: 0 0 4px;
  font-size: 13px;
}

.gigas-info__model .gigas-info__model-area {
  margin: 14px 0 14px;
}

.gigas-info__model-specs {
  padding-top: 12px;
  border-top: 1px solid var(--gigas-line-strong);
}

.gigas-info__model-spec dt {
  color: var(--gigas-muted);
}

@media (max-width: 520px) {
  .gigas-info__model .gigas-info__model-area {
    margin: 10px 0 10px;
  }

  .gigas-info__model-area span {
    font-size: 12px;
  }

  .gigas-info__model-specs {
    gap: 8px;
    padding-top: 10px;
  }
}

/* «Заявка принята» на тёмной плашке формы (баг 2026-09-28: после отправки
   «Узнайте, подойдёт ли КНР» блок становился белым — белый текст оставался
   на светло-розовой подложке общего правила). Подложка — стекло по фону плашки. */
.gigas-info__callback--lead .gigas-info__form-success {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.gigas-info__callback--lead .gigas-info__form-success span {
  color: rgba(255, 255, 255, .82);
}

/* Сравнение на мобиле — пара одной карточкой (баг 2026-09-28: «не понятно,
   в каком случае плюс или минус»). Минус сверху, плюс снизу, вплотную;
   у каждой строки подпись стороны. На десктопе подписи не нужны — есть
   заголовки колонок. */
.gigas-info__vs-side {
  display: none;
}

@media (max-width: 760px) {
  .gigas-info__vs-side {
    display: block;
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .gigas-info--knr #knr-compare ul.gigas-info__vs-list:not(.gigas-info__vs-list--win) .gigas-info__vs-side {
    color: rgba(255, 255, 255, .55);
  }

  .gigas-info--knr #knr-compare ul.gigas-info__vs-list--win .gigas-info__vs-side {
    color: var(--gigas-red, #D12E28);
  }

  #knr-compare .gigas-info__vs {
    gap: 0;
  }

  .gigas-info--knr #knr-compare ul.gigas-info__vs-list:not(.gigas-info__vs-list--win) > li {
    margin-top: 14px;
    border-radius: 14px 14px 0 0;
    border-bottom: 0;
  }

  .gigas-info--knr #knr-compare ul.gigas-info__vs-list:not(.gigas-info__vs-list--win) > li:first-child {
    margin-top: 0;
  }

  .gigas-info--knr #knr-compare ul.gigas-info__vs-list--win > li {
    margin-top: 0;
    border-radius: 0 0 14px 14px;
  }
}

/* Маршрут на мобиле (баг 2026-09-28): на десктопе скобка «Инженер рядом»
   накрывает шаги 2–5, в столбик её нет — связь инженера с шагами терялась.
   Шаги 3–5 получают метку «Инженер на связи» (шаг 2 — уже карточка «Ваш инженер»). */
.gigas-info__step-with {
  display: none;
}

@media (max-width: 980px) {
  .gigas-info__step-with {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 3px 10px 3px 8px;
    border-radius: 999px;
    background: var(--gigas-orange-soft);
    color: var(--gigas-orange);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
  }

  .gigas-info__step-with::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
  }

  .gigas-info__route-escort {
    display: none;
  }
}

/* Полоса цифр на мобиле (баг 2026-09-28: «5 в 1» не читается — бенто-квадраты
   мотива под текстом). Плитка узкая, мотив фона садится прямо под подпись,
   поэтому на мобиле светлые плитки без мотива; насыщенная «0 м²» остаётся. */
@media (max-width: 760px) {
  .gigas-info__stat--frost,
  .gigas-info__stat--insulation,
  .gigas-info__stat--warranty {
    background-image: linear-gradient(135deg, #F4F4F4 0%, #ECECEC 100%);
  }
}