/* Блоки для страниц комплектующих ППУ (отводы, тройники, переходы, опоры,
 * компенсаторы, КЗС, СОДК, комплектующие).
 *
 * ⭐ Значения не подобраны на глаз, а сняты замером живого сайта
 * (scripts/palitra.js на /otvody-ppu/, 25.08.2026):
 *   основной текст  #555555   заголовки       #000000
 *   светлый фон     #F7F4F0   оранжевый       #CA761A
 *   скругление      10px      шрифт           Inter 400/500/600
 *
 * ⚠ Префикс tpk-, а не tp-: tp-* принадлежит нашему собственному шаблону
 * товарных страниц, и смешивать их нельзя.
 */

/* ── Верх страницы: лид, факты, хвост ─────────────────────────────────── */

/* Дескриптор под заголовком: строка, которая договаривает H1.
 *
 * ⚠ Цвет задан здесь, а не настройкой виджета: виджет собран копией H1, а у
 * заголовка цвет приходит из глобальной палитры темы (accent), и настройка
 * title_color её не перебивает. Поймано кадром 25.08.2026: дескриптор вышел
 * оранжевым. Класс надёжнее глобали.
 */
.ppzti-tovarnaya .tpk-deskriptor,
.tpk-deskriptor,
.tpk-deskriptor .elementor-heading-title {
  color: #555 !important;
}

/* ⚠ Заголовок в этой колонке выровнен по её центру, и его ширина зависит от
 * длины слова. Дескриптор шире, поэтому при выравнивании по левому краю края
 * двух блоков не совпадали и композиция выглядела небрежно. Центрируем оба:
 * работает при любой длине заголовка, а значит и на остальных семи страницах.
 */
.tpk-deskriptor {
  max-width: 30em;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ⚠ На узких экранах колонки складываются в одну, и дескриптор оказывается
 * вплотную к лиду соседнего блока: на 390 между ними оставалось 4 пикселя.
 * Селектор с .elementor-widget нужен, чтобы перебить отступ самого виджета.
 */
@media (max-width: 1024px) {
  .tpk-deskriptor {
    text-align: left;
    margin-left: 0;
  }
  /* ⚠ !important здесь не лень, а необходимость: Elementor печатает отступ
   * виджета селектором вида `.elementor-8279 .elementor-element-opisotv`,
   * и он выигрывает по специфичности у любого разумного правила отсюда.
   * Замер показал margin-bottom 0px и зазор 1 пиксель. */
  .elementor-element.tpk-deskriptor {
    margin-bottom: 26px !important;
  }
}

/* Лид: первая мысль крупнее остального текста, чтобы взгляд знал, с чего
 * начать. Не заголовок, поэтому вес умеренный. */
.tpk-lid {
  margin: 0 auto 22px;
  max-width: 44em;
  color: #000;
  font-size: 22px;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: -.2px;
  text-align: center;
}

/* Верх в один поток: содержимое занимает всю ширину контейнера, а внутренние
 * блоки сами держат свою меру.
 *
 * ⚠ Ширину контейнера Elementor держит в собственной переменной --width и
 * печатает её селектором со своей высокой специфичностью. Настройка `width`
 * в дереве не помогла: контейнер остался в 50% ширины. Переопределяем саму
 * переменную. Поймано кадром 25.08.2026, дважды.
 */
/* ⚠ Замер показал: контейнеры уже во всю ширину (1380 из 1380), а режет сам
 * виджет. От прежней двухколоночной раскладки у него в css остались
 * `width: 690px`, `max-width: 690px` и переменная `--container-widget-width`.
 * Перебиваем все три, иначе текст остаётся в половине экрана.
 */
.elementor-element.tpk-shirokij {
  width: 100% !important;
  max-width: 100% !important;
  --container-widget-width: 100% !important;
}

.elementor-element.tpk-shirokij > .elementor-widget-container {
  width: 100%;
}

/* ⚠ Оранжевая грань слева осталась от узкой колонки: у блока во всю ширину
 * она висит одна и спорит с центрированным лидом. Акцент теперь несут
 * плитки фактов, каждая со своей гранью. */
.elementor-element.tpk-shirokij {
  border-left-width: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (max-width: 1024px) {
  .tpk-lid {
    text-align: left;
    font-size: 19px;
  }
}

/* Факты плиткой вместо второго абзаца сплошняком. Читается сканированием,
 * а не чтением: посетителю нужны стандарт, размеры, углы и оболочка.
 *
 * ⭐ Четыре в ряд, а не 2x2: верх страницы собран в один поток во всю ширину
 * (решение владельца 25.08.2026 «симметрично, минимум пустого места»), и ряд
 * из четырёх ровно закрывает строку. */
.tpk-fakty {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 22px;
}

/* Два блока в ряд: слева выгода от завода, справа порядок расчёта.
 * Строка нужной длины и без пустого поля справа, которое появилось бы у
 * текста во всю ширину экрана. */
.tpk-2kol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px;
}

/* ⭐ Первый экран коммерческий, а не справочный: определение изделия стоит
 * ниже по странице, а здесь предложение, выгода и порядок расчёта.
 * Решение владельца 25.08.2026: «описание информационное всё равно». */
.tpk-blok {
  padding: 20px 22px;
  border-radius: 10px;
  background: #FFF;
  box-shadow: 0 1px 2px rgba(40, 28, 16, .06), 0 0 0 1px rgba(40, 28, 16, .05);
}

.tpk-blok h3 {
  margin: 0 0 12px;
  color: #000;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.2px;
}

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

.tpk-spisok li {
  position: relative;
  margin: 0 0 9px;
  padding-left: 20px;
  color: #555;
  font-size: 16px;
  line-height: 1.55;
}

.tpk-spisok li:last-child {
  margin-bottom: 0;
}

/* Маркер оранжевой точкой: тот же акцент, что у граней плиток. */
.tpk-spisok li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #CA761A;
}

/* Строка про срок: единственное место, где число говорит само за себя. */
.tpk-srok {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid #F3F0EC;
  color: #000;
  font-size: 16px;
  font-weight: 600;
}

@media (max-width: 1024px) {
  .tpk-fakty {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tpk-2kol {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ⚠ Фон белый, а не #F7F4F0, хотя серый и есть родной цвет карточек сайта:
 * секция верха сама залита светло-серым, и серая плитка на сером сливалась.
 * Поймано кадром 25.08.2026: видна была только оранжевая грань. */
.tpk-fakt {
  position: relative;
  padding: 14px 16px 14px 18px;
  border-radius: 10px;
  background: #FFF;
  box-shadow: 0 1px 2px rgba(40, 28, 16, .06), 0 0 0 1px rgba(40, 28, 16, .05);
  overflow: hidden;
}

/* Оранжевая грань слева: единственный акцент в блоке, остальное спокойное. */
.tpk-fakt::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: #CA761A;
}

.tpk-fakt b {
  display: block;
  margin: 0 0 3px;
  color: #7A7166;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.tpk-fakt span {
  display: block;
  color: #000;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.2px;
}

/* Хвост: то, что дочитывают, а не сканируют. */
.tpk-hvost {
  margin: 0;
  color: #555;
  font-size: 16px;
  line-height: 1.6;
}

.tpk-hvost + .tpk-hvost {
  margin-top: 12px;
}

/* ── Узкие экраны ─────────────────────────────────────────────────────── */

/* На планшете правая колонка сужается примерно до 490px: две плитки по 235
 * ещё держат строку, ниже 700px уже нет. */
@media (max-width: 700px) {
  .tpk-fakty {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .tpk-lid {
    font-size: 19px;
  }
}

/* ── Печать ───────────────────────────────────────────────────────────── */

@media print {
  .tpk-fakt {
    background: transparent;
    border: 1px solid #E2DCD3;
  }
}