/* Страница категории ППЗТИ: герой с дорожной картой, карточки, карусели.
 *
 * ⭐ Цвета берём из переменных темы, а не выдумываем свои: они объявлены на
 * body самим сайтом (--primary #FEA828, --secondary #3A2613, --text #555555,
 * --accent #000000, --border #E2DCD3, --background_light #FAF6F0).
 * Так страница не разойдётся с сайтом, если владелец поменяет тему.
 *
 * ⚠ Префикс kt- (категория), чтобы не смешивать с tp- нашего товарного
 * шаблона и tpk- страниц комплектующих на Elementor.
 */

:root {
  --kt-akcent: #CA761A;          /* оранжевый граней, снят замером сайта */
  --kt-fon: #F7F4F0;
  --kt-ramka: rgba(40, 28, 16, .09);
  --kt-ten: 0 1px 2px rgba(40, 28, 16, .06);
  --kt-radius: 10px;
  --kt-shapka: 96px;             /* высота липкой шапки сайта */

  /* ── Тёплая шкала от фирменного оранжевого ────────────────────────────
   * ⭐ Правило владельца 25.08.2026: «всё сливается, разделить цветом,
   * у нас жёлтый, можно бледными».
   *
   * Тона получены смешиванием #FEA828 с белым (расчёт Кодекса, контраст
   * проверен: текст #555 даёт от 6.3 до 7.1, чёрный от 17.7 до 19.9).
   *
   * ⚠ Цвет обозначает РОЛЬ блока, а не тему:
   *   тёплый-50   поддерживающее: подписи, документы, шапка таблицы
   *   тёплый-100  шапки карточек: отделяют заголовок от тела
   *   тёплый-200  действие: врезки и форма заявки
   * Справочное (фотографии, таблица, вопросы, карточки ошибок) остаётся
   * белым. У ошибок своя красно-зелёная семантика, поверх неё жёлтый
   * ставить нельзя: два сигнала на одном блоке спорят.
   *
   * ⛔ Сплошную заливку всех карточек не делаем. Проверено рассуждением:
   * если залить объекты, параметры, чек-лист и шаги, страница снова станет
   * однородной, только бежевой вместо белой. */
  --kt-teplyj-50: #FFF8EE;
  --kt-teplyj-100: #FFF5E5;
  --kt-teplyj-200: #FFEFD8;
  --kt-teplaya-ramka: rgba(202, 118, 26, .22);
  --kt-teplaya-ramka-silnaya: rgba(202, 118, 26, .34);
  --kt-sineva: #3A2613;          /* тёмный фирменный, для второй метки */
}

/* ══ ГЕРОЙ ══════════════════════════════════════════════════════════════ */

.kt-geroj {
  padding-top: 28px;
}

/* ── Баннер с фотографией объекта ──────────────────────────────────────
 * ⭐ Решение владельца 25.08.2026: под меню идёт кадр с трассы, а не
 * каталожный рендер. Текст лежит поверх фотографии, поэтому читаемость
 * обеспечивает СВОЙ затемняющий слой, а не удача со снимком: любую
 * картинку можно заменить, и текст останется читаемым.
 * ⚠ Порядок слоёв: фото 0, завеса 1, содержимое 2. Без явного z-index у
 * обёртки текст уходит под завесу и гаснет. */
.kt-geroj-banner {
  position: relative;
  padding: 26px 0 40px;
  isolation: isolate;
}

.kt-geroj-fon {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 62%;   /* поворот трассы держим в правой половине */
}

.kt-geroj-zaves {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(96deg,
      rgba(26, 17, 9, .95) 0%,
      rgba(26, 17, 9, .90) 34%,
      rgba(26, 17, 9, .62) 58%,
      rgba(26, 17, 9, .34) 100%),
    linear-gradient(to bottom, rgba(26, 17, 9, .55) 0%, rgba(26, 17, 9, 0) 22%);
}

.kt-geroj-banner .tp-obertka {
  position: relative;
  z-index: 2;
}

.kt-geroj-banner .kt-geroj-tekst {
  max-width: 660px;
}

/* Плитки и пункты карты на фотографии: тёмное стекло вместо белых
 * карточек, иначе первый экран превращается в белую стену поверх кадра. */
.kt-geroj-banner .kt-fakt,
.kt-geroj-banner .kt-punkt {
  background: rgba(30, 20, 11, .58);
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.kt-geroj-banner .kt-fakt b {
  color: rgba(255, 255, 255, .64);
}

.kt-geroj-banner .kt-fakt span,
.kt-geroj-banner .kt-imya {
  color: #FFF;
}

.kt-geroj-banner .kt-podpis {
  color: rgba(255, 255, 255, .64);
}

.kt-geroj-banner .kt-karta {
  border-top-color: rgba(255, 255, 255, .18);
}

.kt-geroj-banner .kt-karta-imya {
  color: rgba(255, 255, 255, .62);
}

.kt-geroj-banner .kt-punkt:hover,
.kt-geroj-banner .kt-punkt:focus-visible {
  background: rgba(30, 20, 11, .78);
  box-shadow: 0 0 0 1px var(--kt-akcent);
}

.kt-geroj-setka {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 44px;
  align-items: center;
}

.kt-geroj-tekst h1 {
  margin: 6px 0 14px;
}

.kt-geroj .tp-lid {
  max-width: 34em;
}

/* Картинка героя: не растягиваем на всю колонку, держим меру и тень. */
.kt-geroj-foto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.kt-geroj-foto img {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  border-radius: var(--kt-radius);
}

.kt-podpis-foto {
  color: #948C82;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}

/* Четыре факта под лидом.
 * ⚠ Верхний отступ обязателен: у .tp-lid из товарного шаблона margin-bottom
 * равен нулю, и без этих 26px текст лида упирается в первую плитку.
 * Поймано на кадре 25.08.2026, замером не ловилось. */
.kt-fakty {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 26px 0 22px;
}

.kt-fakt {
  position: relative;
  padding: 12px 14px 12px 16px;
  border-radius: var(--kt-radius);
  background: #FFF;
  box-shadow: var(--kt-ten), 0 0 0 1px var(--kt-ramka);
}

.kt-fakt::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--kt-akcent);
  border-radius: var(--kt-radius) 0 0 var(--kt-radius);
}

.kt-fakt b {
  display: block;
  margin-bottom: 2px;
  color: #7A7166;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.kt-fakt span {
  display: block;
  color: #000;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

/* ══ ДОРОЖНАЯ КАРТА ═════════════════════════════════════════════════════ */

/* ⭐ Полоса якорей прямо в герое, по решению владельца. Не боковая колонка:
 * она съела бы ширину таблицы типоразмеров, а таблица здесь главный блок. */
.kt-karta {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--kt-ramka);
}

.kt-karta-imya {
  display: block;
  margin-bottom: 12px;
  color: #7A7166;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
}

.kt-karta-punkty {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.kt-punkt {
  display: block;
  padding: 12px 14px;
  border-radius: var(--kt-radius);
  background: #FFF;
  box-shadow: var(--kt-ten), 0 0 0 1px var(--kt-ramka);
  color: inherit;
  text-decoration: none;
  transition: box-shadow .18s ease, transform .18s ease;
}

.kt-punkt:hover,
.kt-punkt:focus-visible {
  box-shadow: 0 4px 14px rgba(40, 28, 16, .1), 0 0 0 1px var(--kt-akcent);
  transform: translateY(-1px);
}

.kt-punkt:focus-visible {
  outline: 2px solid var(--kt-akcent);
  outline-offset: 2px;
}

.kt-nomer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-bottom: 7px;
  border-radius: 50%;
  background: var(--kt-akcent);
  color: #FFF;
  font-size: 12px;
  font-weight: 700;
}

.kt-imya {
  display: block;
  color: #000;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
}

.kt-podpis {
  display: block;
  margin-top: 2px;
  color: #948C82;
  font-size: 12px;
  line-height: 1.3;
}

/* ══ ОБЩЕЕ ДЛЯ РАЗДЕЛОВ ═════════════════════════════════════════════════ */

/* ⚠ Якорь не должен уезжать под липкую шапку сайта.
 * ⭐ Правило общее, а не список идентификаторов: список пришлось бы править
 * на каждой из восьми категорий, и один забытый якорь уехал бы под меню. */
.tp-soderzhimoe [id],
.tp-soderzhimoe aside[id] {
  scroll-margin-top: calc(var(--kt-shapka, 96px) + 12px);
}

/* Метка шага. ⚠ Отступ до заголовка 16px, а не 8: на кадре 25.08.2026 овал
 * читался как прилипший к заголовку. */
.kt-shag {
  display: inline-block;
  margin-bottom: 16px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--kt-akcent);
  color: #FFF;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .3px;
}

.kt-vvod {
  max-width: 52em;
  margin: 0 0 24px;
  color: var(--text, #555);
  font-size: 17px;
  line-height: 1.6;
}

/* Врезка с кнопкой: короткая точка входа в заявку посреди страницы.
 * ⭐ Единственный тёплый фон в разделе: он помечает действие, а не текст. */
.kt-vrezka {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 26px;
  padding: 20px 24px;
  border-radius: var(--kt-radius);
  background: var(--kt-teplyj-200);
  box-shadow: none;
  border: 1px solid var(--kt-teplaya-ramka);
}

.kt-vrezka p {
  margin: 0;
  color: #000;
  font-size: 16px;
  font-weight: 500;
}

/* ══ КАРУСЕЛЬ ═══════════════════════════════════════════════════════════ */

/* ⭐ Чистый CSS scroll-snap, без единой библиотеки. Все карточки лежат в
 * HTML, поисковик видит весь текст, страница работает без JavaScript.
 * На десктопе это обычная сетка, лента включается только на узких экранах. */
.kt-lenta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

/* Счётчик карусели виден только на узких экранах.
 * ⚠ Нижний отступ обязателен: без него счётчик упирается в следующий
 * заголовок (замер 25.08.2026 на 390 показал зазор 1px). */
.kt-schet {
  display: none;
  margin: 10px 0 18px;
  color: #948C82;
  font-size: 13px;
  text-align: center;
}

/* ══ КАРТОЧКИ ═══════════════════════════════════════════════════════════ */

.kt-karta-obekt,
.kt-karta-oshibka {
  display: flex;
  flex-direction: column;
  padding: 20px 22px;
  border-radius: var(--kt-radius);
  background: #FFF;
  box-shadow: var(--kt-ten), 0 0 0 1px var(--kt-ramka);
}

.kt-karta-obekt h3,
.kt-karta-oshibka h3 {
  margin: 0 0 10px;
  color: #000;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

/* ⭐ Карточка объекта получает тёплую шапку: заголовок отделён от тела и
 * читается как ярлык случая, а не как первая строка текста. Раньше четыре
 * белые карточки на светлом фоне сливались в одно полотно. */
.kt-karta-obekt {
  padding: 0;
  overflow: hidden;
  background: #FFF;
  box-shadow: var(--kt-ten), 0 0 0 1px var(--kt-teplaya-ramka);
}

.kt-karta-obekt h3 {
  margin: 0 0 14px;
  padding: 15px 20px;
  background: var(--kt-teplyj-100);
  border-bottom: 1px solid var(--kt-teplaya-ramka);
  font-size: 17px;
}

.kt-karta-obekt .kt-zadacha,
.kt-karta-obekt .kt-ssylka {
  padding-left: 20px;
  padding-right: 20px;
}

.kt-karta-obekt .kt-ssylka {
  padding-bottom: 18px;
}

/* ⭐ Приём взят у карточек ошибок, где он уже работает: два ключевых абзаца
 * становятся врезками с цветной чертой. Владелец 25.08.2026 показал именно
 * их как образец и сказал, что одной жёлтой шапки сверху не хватило.
 * Оранжевая врезка это риск, тёмно-синяя это готовое решение. */
.kt-karta-obekt .kt-vazhno,
.kt-karta-obekt .kt-sostav {
  margin: 0 20px 10px;
  padding: 10px 12px;
  border-radius: 0 6px 6px 0;
}

.kt-karta-obekt .kt-vazhno {
  border-left: 3px solid var(--kt-akcent);
  background: var(--kt-teplyj-100);
}

.kt-karta-obekt .kt-sostav {
  border-left: 3px solid var(--kt-sineva);
  background: #F7F3EE;
}

/* Метки различаем цветом, а не только жирностью. */
.kt-vazhno b {
  color: var(--kt-akcent);
}

.kt-sostav b {
  color: var(--kt-sineva);
}

.kt-karta-obekt p,
.kt-karta-oshibka p {
  margin: 0 0 10px;
  color: var(--text, #555);
  font-size: 15px;
  line-height: 1.55;
}

.kt-karta-obekt b,
.kt-karta-oshibka b {
  color: #000;
  font-weight: 600;
}

.kt-zadacha {
  color: #000 !important;
  font-weight: 500;
}

/* ⚠ 44px это минимальная цель нажатия пальцем. Ссылка-строка без высоты
 * попадает только с третьего раза. */
.kt-ssylka {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: auto;
  padding-top: 12px;
  color: var(--kt-akcent);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.kt-ssylka:hover {
  text-decoration: underline;
}

/* ⭐ Цветом отмечаем только последствие, а не всю карточку: красная карточка
 * целиком читается как «у них всё плохо», а нам нужно показать риск и выход. */
.kt-posledstvie {
  padding: 10px 12px;
  border-left: 3px solid #C0392B;
  border-radius: 0 6px 6px 0;
  background: #FDF3F2;
}

.kt-kak-nado {
  padding: 10px 12px;
  border-left: 3px solid #1F7A4D;
  border-radius: 0 6px 6px 0;
  background: #F1F8F4;
}

/* ══ ФОТОГРАФИИ ═════════════════════════════════════════════════════════ */

/* Примечание под подзаголовком: короче обычного ввода и тише по тону. */
.kt-primechanie {
  margin-bottom: 18px;
  font-size: 15.5px;
}

/* ⛔⛔ Селектор НАМЕРЕННО с .tp-blok: в товарном шаблоне есть правило
 * `.tp-blok h3 { margin: 0 0 6px }` со специфичностью выше одиночного
 * класса, и оно молча обнуляло здесь margin-top. Замер 25.08.2026 показал
 * `margin-top: 0px` и зазор 0px от карусели, хотя в css стояло 42px.
 * ⚠ Урок: если отступ «не применился», сначала смотреть computed-значение,
 * а не увеличивать число в своём правиле. */
.tp-blok .kt-podzag-foto,
.kt-podzag-foto {
  margin: 48px 0 12px;
  color: #000;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
}

/* Кадр с объекта: картинка и две строки подписи под ней. Подпись это часть
 * содержания, а не украшение, поэтому она в figcaption, а не в alt. */
.kt-foto {
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  border-radius: var(--kt-radius);
  background: #FFF;
  box-shadow: var(--kt-ten), 0 0 0 1px var(--kt-ramka);
}

.kt-foto img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.kt-foto figcaption {
  padding: 14px 16px 16px;
}

.kt-foto figcaption b {
  display: block;
  margin-bottom: 4px;
  color: var(--kt-akcent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
}

.kt-foto figcaption span {
  display: block;
  color: var(--text, #555);
  font-size: 14.5px;
  line-height: 1.5;
}

/* Снимки цеха: формат кадров с телефона разный, поэтому режем их к одному
 * отношению сторон, иначе лента прыгает по высоте. */
.kt-foto-ceh img {
  aspect-ratio: 4 / 3;
}

.kt-foto-kontrol {
  margin: 0 0 18px;
}

.kt-foto-kontrol img {
  aspect-ratio: 3 / 2;
}

/* Широкий кадр внутри раздела */
.kt-foto-shirokoe {
  margin: 0 0 24px;
  overflow: hidden;
  border-radius: var(--kt-radius);
  background: #FFF;
  box-shadow: var(--kt-ten), 0 0 0 1px var(--kt-ramka);
}

.kt-foto-shirokoe img {
  display: block;
  width: 100%;
  max-height: 340px;
  object-fit: cover;
}

.kt-foto-shirokoe figcaption {
  padding: 12px 18px 14px;
  color: var(--text, #555);
  font-size: 14.5px;
  line-height: 1.5;
}

/* ══ ИСПОЛНЕНИЯ ═════════════════════════════════════════════════════════ */

.kt-ispolneniya {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
  margin-top: 18px;
}

/* ⛔ min-width: 0 обязателен. У элемента сетки min-width по умолчанию auto,
 * поэтому группа растягивалась под ширину своей ленты: замер 25.08.2026 на
 * экране 390 показал ленту 536px и карточку, уезжающую за правый край.
 * Страница при этом вбок не тянула, и мерило молчало. */
.kt-ispolneniya > * {
  min-width: 0;
}

/* Заголовок группы с тёплой чертой слева: две группы исполнений видно как
 * две группы, а не как восемь карточек подряд. */
.kt-ispolnenie-gruppa h3 {
  margin: 0 0 8px;
  padding-left: 12px;
  border-left: 3px solid var(--kt-akcent);
  color: #000;
  font-size: 18px;
  font-weight: 600;
}

.kt-gruppa-podpis {
  margin: 0 0 14px;
  padding-left: 15px;
  color: #948C82;
  font-size: 14.5px;
  line-height: 1.5;
}

/* ⚠ Рендеры лежат на белом фоне, поэтому карточке нужен светло-серый низ:
 * на чисто белой карточке изделие «висит» без опоры и край не читается. */
.kt-ispolnenie {
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  border-radius: var(--kt-radius);
  background: #FFF;
  box-shadow: var(--kt-ten), 0 0 0 1px var(--kt-ramka);
}

.kt-ispolnenie img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: linear-gradient(180deg, #FFF 62%, var(--kt-fon) 100%);
}

.kt-ispolnenie figcaption {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--kt-ramka);
}

.kt-ispolnenie figcaption b {
  display: block;
  color: #000;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.kt-ispolnenie figcaption span {
  display: block;
  margin-top: 3px;
  color: #948C82;
  font-size: 13px;
  line-height: 1.4;
}

.kt-lenta-ispolneniya {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* ⭐ Кадры с объектов держим крупными: мелкая фотография не доказывает
 * ничего, её просто не рассматривают. Ровно две в ряд.
 * ⚠ Здесь нельзя auto-fit: при четырёх карточках любая ширина, дающая три
 * колонки, оставляет четвёртую одну в ряду. Замерено на 1024, где auto-fit
 * с порогом 560 давал одну колонку и кадры высотой в пол-экрана. */
.kt-lenta-foto {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kt-lenta-foto .kt-foto img {
  aspect-ratio: 16 / 10;
}

/* ══ ПАРАМЕТРЫ ВЫБОРА ═══════════════════════════════════════════════════ */

.kt-parametry {
  display: grid;
  gap: 12px;
}

.kt-parametr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
  gap: 18px;
  align-items: start;
  padding: 16px 20px;
  border-radius: var(--kt-radius);
  background: #FFF;
  box-shadow: var(--kt-ten), 0 0 0 1px var(--kt-ramka);
}

.kt-parametr-imya {
  color: #000;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}

.kt-parametr-znach {
  color: var(--kt-akcent);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}

.kt-parametr-pochemu {
  color: var(--text, #555);
  font-size: 15px;
  line-height: 1.55;
}

/* ══ ЧЕК-ЛИСТ СПЕЦИФИКАЦИИ ══════════════════════════════════════════════ */

/* ⛔ Префикс .tp-blok обязателен обоим спискам. Тема пишет
 * `.tp-blok ul { padding-left: 20px }` (класс плюс тег), а одиночный класс
 * ниже по специфичности и проигрывает молча: в css стоит ноль, а замер
 * показывает левый край карточек на 50px при тексте на 30px. Поймано
 * 25.08.2026 по кадру владельца, до этого дефект жил на всех ширинах. */
.tp-blok .kt-cheklist,
.tp-blok .kt-spisok {
  padding: 0;
}

.kt-cheklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kt-cheklist li {
  position: relative;
  padding: 12px 14px 12px 42px;
  border-radius: var(--kt-radius);
  background: #FFF;
  box-shadow: var(--kt-ten), 0 0 0 1px var(--kt-ramka);
}

/* Галочка рисуется двумя линиями, без картинок и шрифтов со значками. */
.kt-cheklist li::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 17px;
  width: 6px;
  height: 11px;
  border: solid var(--kt-akcent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.kt-cheklist b {
  display: block;
  color: #000;
  font-size: 15px;
  font-weight: 600;
}

.kt-cheklist span {
  display: block;
  margin-top: 2px;
  color: #948C82;
  font-size: 14px;
  line-height: 1.45;
}

/* ══ ТАБЛИЦА ТИПОРАЗМЕРОВ ═══════════════════════════════════════════════ */

/* ⚠ Таблицу нельзя превращать в карусель: у неё своя прокрутка внутри
 * контейнера, иначе широкая таблица потянет вбок всю страницу. */
.kt-tablica {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--kt-radius);
  background: #FFF;
  box-shadow: var(--kt-ten), 0 0 0 1px var(--kt-ramka);
}

.kt-tablica table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.kt-tablica th,
.kt-tablica td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--kt-ramka);
  text-align: center;
  white-space: nowrap;
}

.kt-tablica tr:first-child td,
.kt-tablica th {
  color: #000;
  font-weight: 600;
  background: var(--kt-fon);
}

/* ══ ШАГИ ЗАКАЗА ════════════════════════════════════════════════════════ */

/* ⚠ Свой верхний отступ: у h2 снизу всего 8px, и сетка липла к заголовку. */
.tp-blok .kt-shagi {
  margin-top: 20px;
}

.kt-shagi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.kt-shag-karta {
  padding: 18px 20px;
  border-radius: var(--kt-radius);
  background: #FFF;
  box-shadow: var(--kt-ten), 0 0 0 1px var(--kt-ramka);
}

.kt-shag-nomer {
  display: block;
  margin-bottom: 8px;
  color: var(--kt-akcent);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.kt-shag-karta h3 {
  margin: 0 0 8px;
  color: #000;
  font-size: 17px;
  font-weight: 600;
}

.kt-shag-chto,
.kt-shag-vy {
  margin: 0 0 6px;
  color: var(--text, #555);
  font-size: 15px;
  line-height: 1.5;
}

.kt-shag-vy {
  color: #948C82;
}

/* ══ ДОКУМЕНТЫ ══════════════════════════════════════════════════════════ */

/* ⭐ Реестр, а не галерея обложек: заказчику нужно знать, что подтверждает
 * документ и до какого срока, а не рассматривать печать. */
.kt-dokument {
  padding: 18px 20px;
  border-radius: var(--kt-radius);
  background: #FFF;
  box-shadow: var(--kt-ten), 0 0 0 1px var(--kt-ramka);
}

.kt-dokument-imya {
  color: #000;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}

.kt-dokument-chto {
  margin-top: 8px;
  color: var(--text, #555);
  font-size: 15px;
  line-height: 1.5;
}

.kt-dokument-norma {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--kt-ramka);
  color: var(--kt-akcent);
  font-size: 14px;
  font-weight: 600;
}

.kt-dokument-pripiska {
  margin: 14px 0 0;
  color: var(--text, #555);
  font-size: 15px;
  line-height: 1.55;
}

/* ── Карточки документов с обложками ──────────────────────────────────
 * ⭐ Владелец 25.08.2026: «сертификатов нет, вставляй». Реестра текстом
 * оказалось мало: документ убеждает, когда его видно.
 * ⚠ Обложка обрезается по верхней части: там шапка, номер и срок, то есть
 * ровно то, что заказчик ищет глазами. Полный документ открывается по
 * ссылке в новой вкладке. */
.kt-dokumenty {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
  align-items: start;
}

.kt-dokument-karta {
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  border-radius: var(--kt-radius);
  background: #FFF;
  box-shadow: var(--kt-ten), 0 0 0 1px var(--kt-ramka);
}

/* ⚠ Лист показываем ЦЕЛИКОМ (contain), а не обрезаем по верху: обрезанный
 * документ выглядит как случайный кусок бумаги. Проверено на кадре
 * 25.08.2026, владелец назвал прежний вариант кривым. */
.kt-dokument-obl {
  display: block;
  padding: 14px 14px 0;
  overflow: hidden;
  border-bottom: 1px solid var(--kt-ramka);
  background: linear-gradient(180deg, var(--kt-fon) 0%, #FFF 100%);
}

.kt-dokument-obl img {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: contain;
  object-position: top center;
  border: 1px solid var(--kt-ramka);
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  background: #FFF;
  transition: transform .25s ease;
}

.kt-dokument-obl:hover img,
.kt-dokument-obl:focus-visible img {
  transform: scale(1.02);
}

.kt-dokument-karta figcaption {
  padding: 16px 18px 18px;
}

.kt-dokument-karta figcaption b {
  display: block;
  margin: 8px 0 6px;
  color: #000;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

.kt-dokument-opis {
  display: block;
  color: var(--text, #555);
  font-size: 14.5px;
  line-height: 1.5;
}

.kt-dokument-smotret {
  display: block;
  margin-top: 10px;
  color: var(--kt-akcent);
  font-size: 14.5px;
  font-weight: 600;
}

/* Статус документа: зелёный, если действует, серый, если срок закрыт.
 * ⛔ Истёкший срок не прячем и не красим в тревожный красный: это документ
 * на партию сырья, а не брак. */
.kt-dokument-status {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2px;
}

.kt-dokument-status.deystvuet {
  background: #EAF6EF;
  color: #1F7A4D;
}

.kt-dokument-status.istyok {
  background: #F2EEE9;
  color: #7A7166;
}

/* Третья карточка ряда: что физически приезжает с партией. Стоит рядом с
 * документами, потому что вопрос всегда идёт следом за сертификатом. */
.kt-dokument-spisok {
  padding: 20px 22px;
  border-radius: var(--kt-radius);
  background: #FFF;
  box-shadow: var(--kt-ten), 0 0 0 1px var(--kt-ramka);
}

.kt-dokument-spisok-imya {
  margin-bottom: 12px;
  color: #000;
  font-size: 16px;
  font-weight: 600;
}

.tp-blok .kt-dokument-spisok .kt-dokument-pripiska {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--kt-ramka);
  font-size: 14.5px;
}

.kt-spisok {
  margin: 0;
  padding: 0;
  list-style: none;
}

.kt-spisok li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 20px;
  color: var(--text, #555);
  font-size: 15px;
  line-height: 1.55;
}

.kt-spisok li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--kt-akcent);
}

.tp-2kol-shirokie {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px;
}

/* ⚠ Отступ от ленты снимков цеха: без него заголовки колонок садились на
 * нижний край карточек ленты, замер показывал наезд в 2 пикселя. */
.kt-kontrol-setka {
  margin-top: 34px;
  align-items: start;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
}

/* Якорь нового раздела не должен уезжать под липкую шапку. */
[id="dokumenty"] {
  scroll-margin-top: var(--kt-shapka);
}

.tp-2kol-shirokie h3 {
  margin: 0 0 14px;
  color: #000;
  font-size: 19px;
  font-weight: 600;
}

/* ══ ВОПРОСЫ И ЗАЯВКА ═══════════════════════════════════════════════════ */

.kt-forma {
  margin-top: 22px;
}

/* ⛔ Липкости здесь НЕТ и быть не должно. Правило владельца 25.08.2026:
 * «форма не должна гулять». Пробовали sticky, чтобы короткая колонка не
 * оставляла пустоту, но едущая при прокрутке форма мешает читать. Пустоту
 * заполняем содержанием (перечень документов партии), а не движением. */
.kt-voprosy-setka > .kt-zayavka,
.kt-kontrol-setka > div:last-child {
  position: static;
  align-self: start;
}

/* Форма заявки: белая карточка, как в блоке коммерческого предложения на
 * главной. Владелец показал его как образец.
 * ⚠ Селектор с .tp-blok.seryj намеренно: товарный шаблон объявляет
 * `.tp-blok.seryj .tp-forma { background: none }`, и меньшая специфичность
 * здесь просто не сработает. */
.tp-blok.seryj .kt-zayavka {
  padding: 30px 32px 34px;
  border-radius: 14px;
  background: #FFF;
  box-shadow: 0 6px 26px rgba(40, 28, 16, .08), 0 0 0 1px var(--kt-ramka);
}

/* ⛔ Тема раскладывает .row сеткой, из-за чего имя и телефон вставали в
 * узкие ячейки по 309px, а почта занимала всю ширину. Замер 25.08.2026.
 * Возвращаем поля в одну колонку, как в форме на главной. */
.kt-zayavka .wpcf7 .row {
  display: block;
}

.kt-zayavka .wpcf7 .column-100 {
  width: 100%;
}

.kt-zayavka .wpcf7 p {
  margin: 0 0 6px;
}

.kt-zayavka .wpcf7 input[type="text"],
.kt-zayavka .wpcf7 input[type="email"],
.kt-zayavka .wpcf7 input[type="tel"],
.kt-zayavka .wpcf7 textarea {
  padding: 16px 0;
}

.tp-blok .kt-zayavka .tp-forma-zag {
  margin-bottom: 10px;
  font-size: 22px;
}

.tp-blok .kt-zayavka .tp-forma-tekst {
  margin-bottom: 18px;
  font-size: 15px;
}

.kt-voprosy .tp-faq {
  background: #FFF;
}

/* ══ РОЛИ ЦВЕТА ═════════════════════════════════════════════════════════
 * Разбор Кодекса 25.08.2026 плюс правка по замечанию владельца «всё
 * сливается». Идея разбора взята, сплошная заливка отклонена: залить
 * объекты, параметры, чек-лист и шаги значит вернуть однородность.
 * Здесь цвет расставлен точечно, по одному признаку на роль. */

/* Действие: врезка и форма заявки. Самый плотный тон и грань слева. */
.kt-forma {
  padding: 24px;
  border-left: 4px solid var(--kt-akcent);
  border-radius: var(--kt-radius);
  background: var(--kt-teplyj-200);
  box-shadow: var(--kt-ten), 0 0 0 1px var(--kt-teplaya-ramka-silnaya);
}

/* Строки выбора: грань слева вместо заливки. Пять одинаковых строк без неё
 * читаются как один длинный список без начала и конца. */
.kt-parametr {
  border-left: 4px solid var(--kt-akcent);
}

/* Шаги заказа: та же грань, она связывает их в одну последовательность. */
.kt-shag-karta {
  border-left: 4px solid var(--kt-teplaya-ramka-silnaya);
}

/* Поддерживающее: подпись под каталожным рендером и реестр документов. */
.kt-ispolnenie figcaption {
  background: var(--kt-teplyj-50);
  border-top-color: var(--kt-teplaya-ramka);
}

.kt-dokument {
  background: var(--kt-teplyj-50);
  box-shadow: var(--kt-ten), 0 0 0 1px var(--kt-teplaya-ramka);
}

.kt-dokument-norma {
  border-top-color: var(--kt-teplaya-ramka);
}

/* Шапка таблицы: единственное цветное место справочного блока. */
.kt-tablica tr:first-child td,
.kt-tablica th {
  background: var(--kt-teplyj-50);
  border-bottom-color: var(--kt-teplaya-ramka);
}

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

/* ══ ПОПРАВКА СПЕЦИФИЧНОСТИ ═════════════════════════════════════════════
 * ⛔⛔ Товарный шаблон объявляет `.tp-blok p { margin: 0 0 14px }` и
 * `.tp-blok h3 { margin: 0 0 6px }`. Это класс плюс тег, то есть
 * специфичность выше нашего одиночного класса, и наши отступы там молча
 * обнулялись: в css стояло одно, computed показывал другое.
 *
 * ⚠ Правило на будущее: любое правило отступа для p, h2, h3 и li внутри
 * .tp-blok писать сразу с префиксом .tp-blok, иначе оно не сработает.
 * Проверять не глазами по css, а computed-значением в браузере. */
.tp-blok .kt-vvod {
  margin: 0 0 24px;
}

.tp-blok .kt-primechanie {
  margin: 0 0 18px;
}

.tp-blok .kt-dokument-pripiska {
  margin: 18px 0 0;
}

.tp-blok .kt-gruppa-podpis {
  margin: 0 0 14px;
}

.tp-blok .kt-shag-chto {
  margin: 0 0 6px;
}

.tp-blok .kt-shag-vy {
  margin: 0;
}

/* ══ ПОЛОСКА ПРОКРУТКИ ПОД КАРУСЕЛЬЮ ═══════════════════════════════════
 * ⭐ Просьба владельца 25.08.2026: «полоска в стиле apple». Дорожка с
 * бегунком заменяет собой полосу прокрутки браузера: та на телефоне либо
 * невидима, либо выглядит как системный элемент чужого приложения.
 * Показывается только там, где лента реально прокручивается. */
.kt-poloska {
  display: none;
  position: relative;
  width: 132px;
  height: 4px;
  margin: 14px auto 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(40, 28, 16, .12);
}

.kt-poloska-begunok {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 999px;
  background: rgba(40, 28, 16, .45);
  transition: transform .18s ease-out, width .18s ease-out;
}

.kt-poloska-skryta {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .kt-poloska-begunok {
    transition: none;
  }
}

/* ══ УЗКИЕ ЭКРАНЫ ═══════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .kt-karta-punkty {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .kt-parametr {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  }
  .kt-parametr-pochemu {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .kt-geroj-setka {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .kt-geroj-foto {
    order: -1;
  }

  /* ⭐ На узком экране фотография перестаёт быть фоном и становится кадром
   * под меню: она видна целиком, а текст уходит под неё на тёмный фон
   * секции. Причина: завеса, достаточная для читаемости текста во всю
   * ширину, гасит снимок до неразличимого пятна, и картинки как бы нет. */
  .kt-geroj-banner {
    padding-top: 0;
  }
  .kt-geroj-fon {
    position: relative;
    inset: auto;
    height: 210px;
    object-position: 62% 58%;
  }
  .kt-geroj-zaves {
    display: none;
  }
  .kt-geroj-banner .tp-obertka {
    padding-top: 24px;
  }
  .kt-geroj-banner .kt-geroj-tekst {
    max-width: none;
  }
  /* Фон секции тёмный сам по себе, поэтому стекло плиткам больше не нужно. */
  .kt-geroj-banner .kt-fakt,
  .kt-geroj-banner .kt-punkt {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(255, 255, 255, .06);
  }
  .tp-2kol-shirokie {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  /* ⚠ Здесь стояло `grid-template-columns: 1fr`, и на планшете чек-лист
   * разъезжался в один столбик шириной 641px, а на десктопе снова вставал
   * в два. Разрыв ритма на соседнем брейкпоинте: правило владельца
   * «менял один брейкпоинт, проверь соседние». Две колонки держатся
   * до самого телефона, там они тоже две, только плитками. */
}

@media (max-width: 700px) {
  .kt-fakty {
    grid-template-columns: 1fr;
  }

  /* ⭐ Здесь блоки становятся каруселью: лента с прилипанием, край следующей
   * карточки виден, поэтому понятно, что есть продолжение. Автопрокрутки нет,
   * вертикальный свайп не перехватывается. */
  .kt-lenta {
    display: flex;
    gap: 12px;
    margin: 0 -8px;
    padding: 2px 8px 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  /* ⭐ Правило владельца 25.08.2026: во ВСЕХ каруселях одна карточка видна
   * целиком, а от следующей виден край. Раньше у исполнений стояло 62%, и
   * там помещалось полторы карточки: правило нарушалось. */
  .kt-lenta > *,
  .kt-lenta-ispolneniya > * {
    flex: 0 0 86%;
    scroll-snap-align: start;
  }

  /* Полоску показываем только там, где карусель реально включена. */
  .kt-poloska {
    display: block;
  }

  /* Счётчик и полоска дублируют друг друга: глазами оставляем полоску,
   * но счётчик держим в потоке для читалок, у него aria-live.
   * ⛔ display: none здесь нельзя: он выключил бы и объявление позиции. */
  .kt-schet {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* ⭐ Боковые поля. Сначала взяли 16px по образцу 4bike (у них замер дал
   * 13px до букв, у нас было 30px). Владелец 25.08.2026 попросил вдвое
   * меньше: 8px. На 390 это возвращает содержимому 16px ширины, и в две
   * колонки встают плитки, которые при 16px полях уже не помещались. */
  .tp-soderzhimoe .tp-obertka {
    padding-left: 8px;
    padding-right: 8px;
  }

  .kt-podzag-foto {
    margin-top: 30px;
    font-size: 19px;
  }

  .kt-foto-shirokoe img {
    max-height: 210px;
  }

  .kt-schet {
    display: block;
  }

  /* ⭐ Карта на телефоне это сетка два на три, а не ещё одна лента.
   * Причина: карта показывает ВЕСЬ маршрут страницы, а лента прячет
   * половину пунктов за краем экрана и путается с настоящими каруселями.
   * Замечание Кодекса 25.08.2026. */
  .kt-karta-punkty {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .kt-punkt {
    min-width: 0;
    min-height: 76px;
  }

  .kt-parametr {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .kt-vrezka {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ══ ДВИЖЕНИЕ ═══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .kt-punkt {
    transition: none;
  }
  .kt-punkt:hover {
    transform: none;
  }
}

/* ══ ПЕЧАТЬ ═════════════════════════════════════════════════════════════ */

@media print {
  .kt-karta,
  .kt-vrezka,
  .kt-forma {
    display: none;
  }
  .kt-lenta {
    display: block;
  }
}


/* ══ ПРАВКИ ПОСЛЕ ПОЛНОГО ПРОХОДА КОДЕКСА (25.08.2026) ══════════════════ */

/* Хлебные крошки стали настоящим списком ol ради семантики.
 * ⚠ Значит им нужен свой горизонтальный вид и разделители: иначе список
 * встаёт в столбик, что мерило отступов и показало сразу после правки. */
.tp-hlebnye ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tp-hlebnye li {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.tp-hlebnye li + li::before {
  content: "·";
  opacity: .6;
}

/* Подсказка к таблице: на телефоне иначе непонятно, что она продолжается. */
.tp-blok .kt-tablica-podskazka {
  margin: 0 0 10px;
  color: var(--text, #555);
  font-size: 14px;
}

/* Область с собственной прокруткой доступна с клавиатуры, значит её фокус
 * должен быть виден. */
.kt-tablica:focus-visible,
.kt-lenta:focus-visible {
  outline: 2px solid var(--kt-akcent);
  outline-offset: 3px;
}

/* Поля формы: свой видимый фокус вместо снятого темой outline.
 *
 * ⛔ Здесь стояла рамка `outline: 2px solid` с отступом 3px. Владелец
 * 25.08.2026: «ужасное обрамление коричневым». Он прав: поле нарисовано
 * одной линией снизу, и прямоугольная рамка вокруг него ломает весь приём,
 * поле начинает выглядеть как ошибка ввода.
 *
 * ⭐ Фокус остаётся видимым, но в логике самого поля: подчёркивание
 * становится толще и фирменного цвета. Сделано через inset box-shadow, а не
 * через border-width: рамка в 2px вместо 1px сдвинула бы поле на пиксель, и
 * при переходе по табу форма дёргалась бы. */
.kt-zayavka .wpcf7 input:focus,
.kt-zayavka .wpcf7 input:focus-visible,
.kt-zayavka .wpcf7 textarea:focus,
.kt-zayavka .wpcf7 textarea:focus-visible {
  outline: none;
  box-shadow: inset 0 -2px 0 0 var(--kt-akcent);
}

/* Чекбокс согласия: 16px мимо пальца. */
.kt-zayavka .wpcf7 input[type="checkbox"] {
  width: 20px;
  height: 20px;
}

/* ⭐ Промежуточная ступень для кадров с объектов. Раньше две колонки жили
 * до 700px, и на планшете выходили две узкие карточки с длинными
 * подписями, а потом сетка резко становилась каруселью. */
@media (max-width: 900px) and (min-width: 701px) {
  .kt-lenta-foto {
    grid-template-columns: 1fr;
  }

  .kt-lenta-foto .kt-foto {
    display: grid;
    grid-template-columns: minmax(240px, .95fr) minmax(0, 1.05fr);
    align-items: stretch;
  }

  .kt-lenta-foto .kt-foto img {
    height: 100%;
    aspect-ratio: auto;
  }

  .kt-lenta-foto .kt-foto figcaption {
    align-self: center;
  }
}

@media (max-width: 700px) {
  /* Лента не должна утаскивать соседние прокрутки. */
  .kt-lenta {
    scroll-padding-inline: 8px;
    overscroll-behavior-inline: contain;
  }

  /* ⛔ Здесь стояло `.kt-dokument-obl img { height: 240px }`. Правило было
   * МЁРТВЫМ: ночное `height: 430px` идёт ниже по файлу с той же
   * специфичностью и молча его отменяло, на 390 замер давал 430. Нашёл
   * Кодекс.
   * ⭐ Убираем само правило, а не возвращаем его силой: 430px на телефоне
   * проверены кадром и выглядят верно, лист занимает ширину карточки,
   * а при 240px он ужимался до полоски с пустыми полями по бокам. Мёртвая
   * строка опаснее отсутствующей: она обещает поведение, которого нет. */
}


/* ══ ПРАВКИ ПО КАДРАМ ВЛАДЕЛЬЦА 25.08.2026, НОЧЬ ════════════════════════ */

/* ══ ПРАВКИ ПО КАДРАМ ВЛАДЕЛЬЦА, ЗАХОД ТРЕТИЙ ═══════════════════════════ */

/* ── A. Чёрные буквы на оранжевой кнопке ──────────────────────────────
 * Владелец: «в кнопке чёрные буквы и так везде сделай, где такой цвет».
 * Тема красит любую ссылку в синий `rgb(154,85,18)`, включая текст внутри
 * кнопки. На оранжевом фоне синий читается хуже чёрного и выглядит как
 * недокрашенная ссылка.
 * ⚠ Селектор с родителем обязателен: тема объявляет `.tp-soderzhimoe a`,
 * это класс плюс тег, одиночный `.tp-cta` проигрывает. */
.tp-soderzhimoe .tp-cta,
.tp-soderzhimoe .tp-cta:hover,
.tp-soderzhimoe .tp-cta:focus,
.tp-blok .tp-cta,
.kt-vrezka .tp-cta,
.kt-zayavka .wpcf7 input[type="submit"],
.kt-zayavka .wpcf7 button {
  color: #17120D;
}

/* ⛔ Вторая кнопка героя (`.tp-cta.vtor`) НЕ оранжевая: у неё прозрачный фон
 * на тёмном снимке и белый текст. Правило выше выкрасило её в чёрный, и
 * надпись «Таблица типоразмеров» пропала с кадра целиком. Поймано кадром
 * сразу после правки, замер молчал: текст на месте, просто цвет в цвет фона.
 * ⭐ Урок: правка цвета «везде» обязана проверяться на КАЖДОМ месте, где
 * этот класс живёт, а не только там, откуда пришла просьба. */
.tp-soderzhimoe .tp-cta.vtor,
.tp-soderzhimoe .tp-cta.vtor:hover,
.tp-soderzhimoe .tp-cta.vtor:focus {
  color: #FFF;
}

/* Тот же синий стоял на ссылке «Перейти к выбору параметров». Владелец
 * попросил тёмный оранжево-коричневый: он держит фирменную линию и не
 * спорит с оранжевыми кнопками рядом. Контраст к белому 5.3 при норме 4.5. */
.tp-soderzhimoe .kt-ssylka,
.tp-soderzhimoe .kt-karta-obekt .kt-ssylka {
  color: #9A4F0C;
}

.tp-soderzhimoe .kt-ssylka:hover {
  color: #7C3F08;
}

/* Пункты карты в герое: сами ссылки унаследовали синий темы. Глазами это не
 * видно, потому что у каждой строчки внутри свой цвет, но стоит добавить
 * пункт без обёртки, и он выйдет синим на тёмном фоне. Закрываем заранее. */
.tp-soderzhimoe .kt-punkt {
  color: #FFF;
}

/* ── B. Врезки ошибок в цветах страницы ───────────────────────────────
 * Владелец: «цвета выделенных блоков сделать как выше, оранжевый и серый».
 * Красный и зелёный жили здесь как светофор, но выше по странице у карточек
 * объектов уже работает пара «тёплый плюс серо-синий», и две разные пары на
 * одной странице читаются как два разных языка. */
.kt-posledstvie {
  border-left-color: var(--kt-akcent);
  background: var(--kt-teplyj-100);
}

.kt-posledstvie b {
  color: var(--kt-akcent);
}

.kt-kak-nado {
  border-left-color: var(--kt-sineva);
  background: #F7F3EE;
}

.kt-kak-nado b {
  color: var(--kt-sineva);
}

/* ── C. Одна полоска прокрутки вместо двух ────────────────────────────
 * Владелец: «2 полоски прокрутки карусели, верхний убрать». Верхняя это
 * НАТИВНАЯ полоса браузера: `scrollbar-width: thin` её сужает, но не прячет,
 * и на телефоне она рисуется поверх нижнего края ленты. Своя полоска у нас
 * уже есть, она показывает и позицию, и долю видимого. */
.kt-lenta {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.kt-lenta::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* ── D. Документы: карусель на телефоне, ровный низ на десктопе ────────
 * Владелец: «сертификаты сделай каруселью» и «блоки внизу сделать по
 * уровню, сейчас центральный выше правого». */
.kt-dokumenty {
  grid-template-columns: minmax(0, 2fr) minmax(0, .78fr);
  align-items: stretch;
}

.kt-karusel-dokumenty {
  min-width: 0;
}

.kt-lenta-dokumenty {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  height: 100%;
}

/* Карточка тянется на всю высоту своей ячейки, поэтому нижние края
 * документов и списка партии стоят на одной линии. */
.kt-lenta-dokumenty .kt-dokument-karta {
  height: 100%;
}

/* Подпись занимает остаток карточки: без этого текст разной длины
 * оставлял снизу разные пустоты. */
.kt-dokument-karta figcaption {
  flex: 1;
}

/* ── 0. Обёртка picture не должна занимать место в потоке ─────────────
 * Фон героя теперь <picture> с отдельным вертикальным кадром для телефона.
 * ⚠ display: contents убирает саму обёртку из раскладки, и абсолютное
 * позиционирование картинки продолжает считаться от секции, а не от неё. */
.kt-geroj-picture {
  display: contents;
}

/* ── 1. Подписи под кадрами крупнее и заметнее ────────────────────────
 * Владелец: «текст в этих блоках сделать чуть больше и жирней заметней».
 * Подпись к кадру это содержание, а не служебная строка: она объясняет,
 * что именно на снимке. 14.5px светло-серым читались как сноска. */
.kt-foto figcaption span,
.kt-foto-shirokoe figcaption {
  color: #332A21;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.kt-ispolnenie figcaption span {
  color: #332A21;
  font-size: 15px;
  font-weight: 500;
}

/* Метка кадра остаётся акцентной, но тоже подрастает на полшага. */
.kt-foto figcaption b {
  font-size: 12.5px;
}

/* ── 2. Четыре снимка цеха в один ряд ─────────────────────────────────
 * Владелец: «эти 4 картинки сделать в ряд». Четвёртый кадр вертикальный,
 * остальные горизонтальные, поэтому режем все к одному отношению: иначе
 * ряд получается со ступенькой.
 * ⚠ Здесь нельзя auto-fit: при пороге 240px он на 1440 даёт пять колонок,
 * а на 1100 три, и четвёртая карточка остаётся одна в ряду. */
.kt-lenta-ceh {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kt-lenta-ceh .kt-foto img {
  aspect-ratio: 4 / 3;
}

/* ── 3. «Как контролируем» карточками вместо списка ───────────────────
 * Четыре разных приёма контроля маркированным списком читались как один
 * поток текста. Карточками видно, что приёмов ровно четыре, и каждый
 * назван. Оформление то же, что у карточек ошибок: белая карточка с
 * акцентной гранью слева. */
.kt-kontrol-karty {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.kt-kontrol-karta {
  padding: 16px 18px 18px;
  border-left: 4px solid var(--kt-akcent);
  border-radius: var(--kt-radius);
  background: #FFF;
  box-shadow: var(--kt-ten), 0 0 0 1px var(--kt-ramka);
}

.kt-kontrol-karta b {
  display: block;
  margin-bottom: 6px;
  color: #000;
  font-size: 16px;
  font-weight: 600;
}

.kt-kontrol-karta span {
  display: block;
  color: var(--text, #555);
  font-size: 15px;
  line-height: 1.5;
}

/* ── 4. Документы крупнее, метка срока снята ──────────────────────────
 * Владелец: «посмотри как некрасиво смотрятся сертификаты, их еле видно,
 * нужно увеличить». Лист А4 при высоте 300px превращался в серое пятно.
 * Даём документам две широкие колонки, списку третью поуже. */
/* ⚠ Здесь стояли ТРИ колонки, по одной на каждый документ и одна под список.
 * После того как документы уехали в карусель, детей у сетки стало двое, и
 * третья колонка осталась пустой: карточки сжались до 240px, а справа
 * зияла дыра в 400px. Теперь колонки две: лента документов и список. */
.kt-dokumenty {
  grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr);
}

.kt-dokument-obl img {
  height: 430px;
}

/* ⭐ Список партии опускается вместе с прокруткой: он вдвое короче
 * карточек документов, и внизу правой колонки оставалась пустота.
 * ⚠ Это НЕ форма: запрет владельца «форма не должна гулять» касался
 * формы заявки, здесь он сам попросил опускающийся текст.
 *
 * ⛔⛔⛔ `align-self: start` тут ОБЯЗАТЕЛЕН, а не украшение. У сетки
 * документов стоит `align-items: stretch`, чтобы карточки документов были
 * одной высоты. Растянутый элемент занимает всю высоту строки, и
 * `position: sticky` молча перестаёт работать: прилипать некуда, элемент
 * едет вместе со страницей. Замер 26.08.2026 на боевой странице тройников:
 * высота списка 601 при высоте сетки 601, сдвиг 400 из 400 прокрученных.
 * В стилях при этом честно стояло `position: sticky`, и по коду дефект
 * был не виден. Проверять движением: `scripts\proba-lipkosti-spiska.js`. */
.kt-dokument-spisok {
  position: sticky;
  top: calc(var(--kt-shapka, 96px) + 16px);
  align-self: start;
}

/* ── 5. Вопросы во всю высоту, форма компактнее ───────────────────────
 * Владелец: «FAQ растяни по высоте, а форму укороти по высоте».
 * Колонки сходятся навстречу друг другу: вопросы распределяются по всей
 * высоте ряда, форма ужимается за счёт полей и высоты поля сообщения. */
/* ⛔ Три класса в селекторе не для красоты: шаблон объявляет
 * `.tp-2kol.s-formoj { align-items: start }` (два класса), и одиночный
 * `.kt-voprosy-setka` проигрывал молча. Замер показывал align-items: start
 * там, где в стилях стоит stretch. Четвёртый случай специфичности за сутки. */
.tp-2kol.s-formoj.kt-voprosy-setka {
  align-items: stretch;
}

.kt-voprosy {
  display: flex;
}

/* ⚠ Верхний отступ в 24px тема даёт всем .tp-faq. Здесь он сдвигал вопросы
 * ниже формы, и колонки начинались на разной высоте. */
.kt-voprosy-setka .tp-faq {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin-top: 0;
}

/* Каждый вопрос забирает равную долю высоты, надпись стоит по центру своей
 * доли. Так колонка догоняет форму, а разделители остаются вплотную друг к
 * другу.
 *
 * ⚠ Ложная тревога, разобранная и записанная, чтобы не чинить дважды.
 * Замер показывал, что у ЗАКРЫТОГО вопроса ответ имеет прямоугольник
 * 660 на 68. Выглядело как поломка скрытия из-за display: flex. На деле
 * это штатное поведение Chrome: закрытый `<details>` гасит содержимое через
 * content-visibility, а getBoundingClientRect отдаёт последние известные
 * размеры. Проверено обоими способами: без display: flex прямоугольник
 * тот же. Клики он не перехватывает (elementFromPoint отдаёт summary),
 * раскрытие работает мышью и клавишей Enter.
 *
 * ⛔ Альтернатива space-between отвергнута по кадру: она разводит
 * разделители, и вопрос прижимается к нижней линии своей полосы. */
.kt-voprosy-setka .tp-faq > details {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
}

/* Свой видимый фокус у вопросов: у таблицы, лент и полей формы он уже есть,
 * а вопросы полагались на контур браузера, который тема может снять.
 * Замечание Кодекса 25.08.2026. */
.kt-voprosy-setka summary:focus-visible {
  outline: 2px solid var(--kt-akcent);
  outline-offset: -3px;
  border-radius: 6px;
}

.tp-blok.seryj .kt-zayavka {
  padding: 24px 26px 26px;
}

.tp-blok .kt-zayavka .tp-forma-tekst {
  margin-bottom: 14px;
  font-size: 14.5px;
}

.kt-zayavka .wpcf7 input[type="text"],
.kt-zayavka .wpcf7 input[type="email"],
.kt-zayavka .wpcf7 input[type="tel"] {
  padding: 12px 0;
}

.kt-zayavka .wpcf7 textarea {
  height: 84px;
  min-height: 84px;
  padding: 12px 0;
}

/* ── 6. Шапка таблицы белая ───────────────────────────────────────────
 * Владелец: «верхнюю серую часть таблицы сделать белой».
 * ⛔ Заодно снята подсветка ПЕРВОЙ СТРОКИ ДАННЫХ. Правило
 * `.kt-tablica tr:first-child td` осталось со времён, когда у таблицы не
 * было `<thead>`: тогда первой строкой шла шапка. После починки `<thead>`
 * оно красило строку «33,5» бежевым без всякой причины. */
/* ⛔ Селектор длинный не от лени. Разметка таблицы приехала из старой
 * страницы вместе с обёрткой `.table-custom`, и её стиль объявляет
 * `.table-custom thead th { background: #F7F4F0 }`: класс плюс два тега,
 * это сильнее нашего `.kt-tablica th`.
 * ⭐ Отдельно любопытное: пока `<thead>` был сломан регуляркой, правило не
 * срабатывало вовсе. Починив шапку, мы одновременно оживили чужой стиль,
 * и серый вернулся. Спросили у браузера через CSS.getMatchedStylesForNode,
 * а не гадали по специфичности. */
.kt-tablica .table-custom thead th,
.kt-tablica thead th {
  background: #FFF;
}

.kt-tablica tr:first-child td {
  color: var(--text, #555);
  font-weight: 400;
  background: transparent;
}

/* Шапку от чисел отделяет линия, а не заливка. */
.kt-tablica thead {
  border-bottom: 2px solid var(--kt-ramka);
}

/* ── 7. Адаптив блоков, перестроенных выше ────────────────────────────
 * ⛔ Обязательная часть правок, а не довесок. Жёсткие три колонки у
 * документов и четыре у снимков цеха на телефоне никуда не деваются сами:
 * `minmax(0, 1fr)` разрешает колонке сжаться до нуля, и на 390 документы
 * встали тремя полосками по 45px с текстом по букве в строке. Поймано
 * кадром сразу после правки. */
@media (max-width: 1100px) {
  /* Список партии уезжает под документы: рядом с двумя листами А4 он
   * сжимался до колонки, в которой каждая строка ломалась пополам. */
  .kt-dokumenty {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Список партии на всю ширину под документами, и уже не липкий:
   * прилипать ему не к чему, соседей по высоте больше нет. */
  .kt-dokument-spisok {
    position: static;
    grid-column: 1 / -1;
  }

  /* Четыре снимка цеха на планшете идут по два: при четырёх в ряд ширина
   * кадра падает до 170px, и подпись под ним рвётся на пять строк. */
  .kt-lenta-ceh {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* ⚠ И карточки контроля тоже по два. auto-fit с порогом 250px давал на
   * 1024 три в ряд и одну во втором ряду: четыре равноправных приёма
   * контроля выглядели как три главных и один довесок. */
  .kt-kontrol-karty {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .kt-dokumenty {
    grid-template-columns: minmax(0, 1fr);
  }

  /* ⭐ Владелец: «контролируем сделай в 4 ряда, один столбик». Две колонки
   * на 390 давали карточки по 180px, и «Неразрушающий контроль» ломался
   * посреди слова. */
  .kt-kontrol-karty {
    grid-template-columns: minmax(0, 1fr);
  }

}


/* ══ ТЕЛЕФОН: ПЛИТКИ СПЕЦИФИКАЦИИ И ТАБЛИЦА ОТ КРАЯ ДО КРАЯ ═════════════ */
/* Правки по кадрам владельца 25.08.2026, вечер. */

@media (max-width: 700px) {
  /* ⭐ Восемь строк спецификации встают плитками два на четыре. В столбик
   * они занимали 730px высоты: человек прокручивал список дольше, чем читал
   * его. Плитками это 4 ряда, и весь чек-лист виден почти целиком.
   *
   * ⛔ Префикс .tp-blok обязателен. Тема пишет `.tp-blok ul { padding-left:
   * 20px }` (класс плюс тег), наш `.kt-cheklist { padding: 0 }` проигрывал
   * по специфичности, и замер показывал левый край карточек на 36px вместо
   * 16. На кадре это читалось как «у чек-листа поле вдвое больше соседей».
   * Третий случай той же грабли за сутки. */
  .tp-blok .kt-cheklist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 0;
  }

  /* ⚠ min-width: 0 у элемента сетки: без него длинное слово в подписи
   * растягивает колонку и ломает пару. Мы это уже ловили на ленте
   * исполнений, где карточка вышла 536px при экране 390. */
  .kt-cheklist li {
    min-width: 0;
    padding: 11px 10px 12px 33px;
    overflow-wrap: break-word;
  }

  /* Галочка ложится в тёплый кружок: на плитке она читается как отметка
   * «эту строку проверил», а голая галочка на узкой карточке терялась. */
  .kt-cheklist li::after {
    content: "";
    position: absolute;
    left: 9px;
    top: 11px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--kt-teplyj-100);
  }

  /* z-index: галочка рисуется раньше кружка, без него кружок её закрывает. */
  .kt-cheklist li::before {
    left: 15px;
    top: 14px;
    z-index: 1;
    width: 5px;
    height: 9px;
  }

  .kt-cheklist b {
    font-size: 14px;
    line-height: 1.3;
  }

  .kt-cheklist span {
    margin-top: 3px;
    font-size: 12.5px;
    line-height: 1.4;
  }

  /* ⭐ Таблица идёт от края до края, полей у неё нет вовсе (правило
   * владельца). Прокрутка у таблицы своя, внутри контейнера, поэтому
   * страницу вбок она не тянет, а восемь пикселей по бокам съедали
   * половину колонки чисел.
   * ⚠ Скругление и рамку-тень снимаем: у блока, доходящего до края экрана,
   * закруглённый угол выглядит обрезанным. Оставляем линии сверху и снизу. */
  .kt-tablica {
    margin-left: -8px;
    margin-right: -8px;
    border-radius: 0;
    box-shadow: none;
    border-top: 1px solid var(--kt-ramka);
    border-bottom: 1px solid var(--kt-ramka);
  }
}


/* ══ ЗАХОД ЧЕТВЁРТЫЙ: ЕДИНЫЙ КОРИЧНЕВЫЙ И ПУТЕВОДИТЕЛЬ ══════════════════ */

/* ── Один коричневый на всю страницу ──────────────────────────────────
 * Владелец: «весь коричневый текст, который есть на странице, сделай
 * такого цвета», показав на ссылку «Перейти к выбору параметров».
 *
 * ⚠ Менять сам `--kt-akcent` нельзя: он же красит кнопки, метки шагов,
 * галочки и грани врезок, а там нужен яркий фирменный оранжевый. Поэтому
 * заведена отдельная переменная РОЛИ: цвет оранжевого ТЕКСТА на светлом.
 * Контраст к белому 5.3 при норме 4.5, прежние 202,118,26 давали 3.2. */
:root {
  --kt-tekst-akcent: #9A4F0C;
}

.tp-soderzhimoe .kt-parametr-znach,
.tp-soderzhimoe .kt-shag-nomer,
.tp-soderzhimoe .kt-foto figcaption b,
.tp-soderzhimoe .kt-ispolnenie figcaption b,
.tp-soderzhimoe .kt-vazhno b,
.tp-soderzhimoe .kt-posledstvie b,
.tp-soderzhimoe .kt-dokument-smotret,
.tp-soderzhimoe .wpcf7 a,
.tp-soderzhimoe .kt-zayavka a,
.tp-blok .kt-zayavka a {
  color: var(--kt-tekst-akcent);
}

/* ⛔ Единственный `!important` на странице, и он обоснован. Ссылка на
 * политику внутри формы приходит из настроек Contact Form 7 с ИНЛАЙН-стилем
 * `style="color:#c96b1a"`. Инлайн бьёт любой селектор, сколько классов в
 * него ни добавляй: точностью его не перебить в принципе, только важностью.
 * ⚠ Альтернатива была править саму форму в админке, но форма общая для
 * всего сайта, и правка задела бы каждую страницу с заявкой. */
.tp-soderzhimoe .kt-zayavka .wpcf7-acceptance a {
  color: var(--kt-tekst-akcent) !important;
}

/* ── Путеводитель по странице ─────────────────────────────────────────
 * Было «Как пользоваться страницей» серым мелким шрифтом: подпись читалась
 * как служебная сноска и терялась на снимке. Владелец попросил название
 * покороче и золотой цвет. */
.kt-geroj-banner .kt-karta-imya {
  color: #FEA828;
  font-size: 13.5px;
  letter-spacing: .6px;
}

/* Подписи пунктов: раньше «по объекту» и «таблица» не говорили ничего.
 * Теперь это две строки о том, что человек найдёт в разделе, и цвет
 * фирменный яркий: на тёмном снимке он читается, а серый тонул. */
.kt-geroj-banner .kt-podpis {
  color: #FEA828;
  font-size: 12.5px;
  line-height: 1.35;
}

/* Плитки выравниваются по высоте самой длинной подписи, иначе ряд
 * получается ступенькой. */
.kt-geroj-banner .kt-karta-punkty {
  align-items: stretch;
}


/* ══ ТЕЛЕФОН, ВТОРОЙ ЗАХОД: ГЕРОЙ КАРТИНКОЙ И ПОЛЕ У ТАБЛИЦЫ ═══════════ */

@media (max-width: 900px) {
  /* ⭐ Владелец 25.08.2026: «пусть она будет так же как и на десктоп,
   * занимать всё пространство героя». Возвращаем фон и завесу, но уже с
   * отдельным вертикальным кадром: горизонтальный на экране 390 на 1590
   * обрезался до полосы. Прежнее решение (кадр высотой 210px под меню)
   * отменено этим правилом. */
  .kt-geroj-banner {
    padding-top: 26px;
  }

  .kt-geroj-fon {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 26%;   /* поворот трассы держим в верхней трети */
  }

  /* ⚠ Завеса неоднородная. Сверху она слабее, чтобы кадр был виден и понятен,
   * ниже плотнее, потому что там лежат заголовок, лид и плитки. Ровная
   * завеса, достаточная для текста, гасит снимок до серого пятна: на этом
   * мы уже обожглись, отсюда и брался прежний вариант с кадром под меню. */
  .kt-geroj-zaves {
    display: block;
    background: linear-gradient(
      to bottom,
      rgba(26, 17, 9, .52) 0%,
      rgba(26, 17, 9, .58) 12%,
      rgba(26, 17, 9, .80) 30%,
      rgba(26, 17, 9, .90) 52%,
      rgba(26, 17, 9, .94) 100%);
  }
}

@media (max-width: 700px) {
  /* Владелец: «отступ слева в мобиле у таблицы оставить». Слева поле как у
   * текста, справа таблица уходит за край: так видно, что она продолжается,
   * и первая колонка не липнет к рамке экрана. */
  .kt-tablica {
    margin-left: 0;
    border-left: 1px solid var(--kt-ramka);
    border-radius: var(--kt-radius) 0 0 var(--kt-radius);
  }
}