/* /catalog/view/theme/LESPROM/template/_blocks/breadcrumbs/style.css */
.breadcrumbs {
  display: flex;
  column-gap: 12px;
  align-items: center;
  /* LPD-17: вместо обрезки хвоста (см. комментарий внизу файла) — длинная цепочка
     не переносится и скроллится по горизонтали. На десктопе самая глубокая цепочка
     (карточка товара, 6 пунктов) умещается целиком; скролл работает на мобильном. */
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.breadcrumbs::-webkit-scrollbar {
  display: none;
}
.breadcrumbs__item {
  white-space: nowrap;
}
.breadcrumbs__separator {
  width: 1px;
  min-width: 1px;
  height: 8px;
  transform: translateY(2px);
  background-color: var(--primary-grey2);
}
.breadcrumbs__link {
  --link-color: var(--primary-grey2);

  font-size: 0.75rem;
  font-weight: var(--fw-regular);
  font-family: var(--font);
}
.breadcrumbs__link:hover {
  --link-hover-color: var(--primary-blue);
}
/* LPD-17: здесь стояло .breadcrumbs li:nth-child(1n + 6) { display:none } —
   обрезка «хвоста» длинных цепочек. Разделители — тоже <li>, поэтому с 6-го li
   скрывался сам текущий пункт: на «Вагонке» посетитель видел только
   «Главная · Каталог · Пиломатериалы», на карточке товара скрывалась половина пути.
   Заменено на overflow-x: auto у .breadcrumbs (см. выше). */
/* /catalog/view/theme/LESPROM/template/_blocks/banner/style.css */
.block-banner__items {
  display: flex;
  column-gap: 24px;
  align-items: stretch;

  @media screen and (max-width: 768px) {
    row-gap: 24px;
    flex-direction: column;
  }
}

.block-banner__item {
  width: 100%;
}

.banner-item {
  position: relative;
  /* LPD-17 Э7: база на случай, когда заливка не передана (главная её больше
     не передаёт — синим остаётся только кнопка, ТЗ §6.3). */
  background-color: var(--color-ink);
}

/* ═══ LPD-17 Э7: анатомия «фото во всю плитку + скрим» (ТЗ §6.3) ═══════════
   Было два разных жанра: слева фото менеджера с формой, справа «20%» гигантом
   на сплошном синем. Стало одно: фото занимает плитку целиком, поверх — скрим,
   на нём надзаголовок → заголовок → текст → одна кнопка.
   Модификатор, а не переопределение базового блока: тот же компонент стоит
   шапкой на шести инфостраницах (production, about, painting, review, special,
   blog/article) — они переезжают отдельными заходами по §13. */
.block-banner__items[data-count] .banner-item--cover {
  display: flex;
  overflow: hidden;
  border-radius: var(--radius-lg);
  min-height: 300px;
}
.block-banner__items[data-count] .banner-item--cover .banner-item__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.block-banner__items[data-count] .banner-item--cover .banner-item__image :is(img, picture) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Скрим считается по худшему случаю — светлому кадру: при .72 в зоне текста
   белый заголовок держит AA с запасом, справа кадр остаётся открытым. */
.block-banner__items[data-count] .banner-item--cover::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(16, 22, 32, .86) 0%,
    rgba(16, 22, 32, .72) 46%,
    rgba(16, 22, 32, .34) 74%,
    rgba(16, 22, 32, .08) 100%);
}
.block-banner__items[data-count] .banner-item--cover .banner-item__container {
  z-index: 1;
  /* width обязателен: контейнер — flex-элемент плитки, и без него он сжимается
     по самой длинной строке, а кнопка внутри наследует эту случайную ширину. */
  width: 100%;
  max-width: 520px;
  row-gap: 0;
  padding: 40px;
  box-sizing: border-box;
}
.block-banner__items[data-count] .banner-item--cover .banner-item__eyebrow {
  margin-bottom: 12px;
  font-size: var(--fs-13);
  font-weight: var(--fw-bold);
  line-height: var(--leading-tight);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-on-dark-muted);
}
.block-banner__items[data-count] .banner-item--cover .banner-item__title {
  font-size: var(--fs-32);
  font-weight: var(--fw-extrabold);
  line-height: var(--leading-display-2);
}
/* LPD-05 R5 (правка по замечанию владельца 2026-08-07): заголовок, вынесенный в
   тег через title_tag. <h1> несёт собственный --h1-size из normalize — 55px на
   десктопе и 34px на мобильном, — и правило кегля плитки (--fs-32 / --fs-24) до
   него просто не доходило. H1 страницы производства из 68 знаков от этого не
   помещался в колонку: слово «пиломатериалов» уходило за её край и срезалось
   overflow: hidden самой плитки.
   Главную это не задевает: её cover-баннеры выводят заголовок без тега. */
.block-banner__items[data-count] .banner-item--cover .banner-item__title :is(h1, h2, h3) {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  font-family: inherit;
  color: inherit;
}
/* Страховка на случай слова длиннее колонки: рвать по буквам плохо, но лучше,
   чем срезать край без следа. */
.block-banner__items[data-count] .banner-item--cover .banner-item__title {
  overflow-wrap: break-word;
}
.block-banner__items[data-count] .banner-item--cover .banner-item__text {
  margin-top: 12px;
  max-width: 42ch;
  font-size: var(--fs-16);
  line-height: var(--leading-relaxed);
  color: var(--color-text-on-dark-muted);
}
.block-banner__items[data-count] .banner-item--cover .banner-item__caption {
  margin-top: 8px;
  font-size: var(--fs-15);
  color: var(--color-text-on-dark-muted);
}
.block-banner__items[data-count] .banner-item--cover .banner-item__action {
  margin-top: 24px;
  /* Кнопка по контенту, а не во всю колонку: контейнер — flex, и без этого
     действие растягивается на все 440px и читается как плашка. */
  align-self: flex-start;
}
.block-banner__items[data-count] .banner-item--cover .banner-item__action .button {
  width: auto;
  min-width: 200px;
  padding-inline: 24px;
}
.block-banner__items[data-count] .banner-item--cover .banner-item__html {
  margin-top: 24px;
}
/* Кнопка обратной связи внутри cover-баннера — того же размера, что CTA соседа */
.block-banner__items[data-count] .banner-item--cover .chunk-callback .button {
  width: auto;
  max-width: none;
  min-width: 200px;
  padding-inline: 24px;
  white-space: nowrap;
}
/* Скидка — читаемая плашка в углу кадра. Раньше это был chunk/percent: цифра
   6rem с background-clip:text и затуханием до 21% белого — поверх произвольного
   фото она не читалась (тот же приём, что раскритикован в §2 п. 6 ТЗ). */
.banner-item__badge {
  position: absolute;
  z-index: 1;
  right: 24px;
  top: 24px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--radius-md);
  backdrop-filter: blur(6px);
  background-color: rgba(24, 36, 51, .58);
  font-size: var(--fs-20);
  font-weight: var(--fw-extrabold);
  font-family: var(--font-2);
  line-height: var(--leading-none);
  color: var(--primary-white);
}

@media screen and (max-width: 768px) {
  .block-banner__items[data-count] .banner-item--cover {
    min-height: 260px;
  }
  .block-banner__items[data-count] .banner-item--cover .banner-item__container {
    max-width: 100%;
    padding: 24px !important;
  }
  .block-banner__items[data-count] .banner-item--cover .banner-item__title {
    font-size: var(--fs-24) !important;
  }
  .block-banner__items[data-count] .banner-item--cover .banner-item__action,
  .block-banner__items[data-count] .banner-item--cover .banner-item__action .button {
    width: 100%;
    min-width: 0;
    align-self: stretch;
  }
  /* На узком экране скрим разворачивается сверху вниз — текст прижат к верху */
  .block-banner__items[data-count] .banner-item--cover::after {
    background: linear-gradient(180deg,
      rgba(16, 22, 32, .88) 0%,
      rgba(16, 22, 32, .78) 58%,
      rgba(16, 22, 32, .58) 100%);
  }
  .banner-item__badge {
    right: 16px;
    top: 16px;
    font-size: var(--fs-18);
  }
}

.banner-item__container {
  display: flex;
  row-gap: 6px;
  flex-direction: column;
  position: relative;
  z-index: 1;
  
  border-radius: var(--radius-sm);
  padding: 32px;
  box-sizing: content-box;

  @media screen and (max-width: 768px) {
    padding: 24px !important;
  }
}
.block-banner__items[data-count="1"] .banner-item__container {
  max-width: 820px;
  row-gap: 12px;
  padding: 85px;
}
.block-banner__items[data-count="2"] .banner-item__container {
  max-width: 345px;
  row-gap: 10px;
  padding: 40px;
}
.block-banner__items[data-count="3"] .banner-item__container {
  max-width: 245px;
  row-gap: 8px;
  padding: 32px;
}

.banner-item__title {
  font-size: 1rem;
  font-weight: var(--fw-bold);
  font-family: var(--font-2);
  color: var(--banner-item-title-color, var(--banner-title-color, var(--primary-white)));

  @media screen and (max-width: 768px) {
    font-size: 1.5rem !important;
  }
}
.block-banner__items[data-count="1"] .banner-item__title {
  font-size: 3.125rem;
  font-weight: var(--fw-semibold);
}
.block-banner__items[data-count="2"] .banner-item__title {
  font-size: 1.875rem;
  font-weight: var(--fw-semibold);
}
.block-banner__items[data-count="3"] .banner-item__title {
  font-size: 1.188rem;
  font-weight: var(--fw-bold);
}

.banner-item__text {
  margin-top: 8px;
  font-size: 0.875rem;
  font-weight: var(--fw-regular);
  font-family: var(--font);
  /* LPD-16 (5/5): было --primary-white-blue2 (#C0DBDE) — на акцентной подложке #1877B8
     давало 3.30:1. Белый даёт 4.81:1 (WCAG AA). */
  color: var(--banner-text-color, var(--primary-white));
}
.block-banner__items[data-count="1"] .banner-item__text {
  font-size: 1.5rem;
  font-weight: var(--fw-light);

  @media screen and (max-width: 768px) {
    font-size: 0.875rem !important;
  }
}

.banner-item__caption {
  font-size: 0.88rem;
  font-weight: var(--fw-light);
  font-family: var(--font);
  color: var(--banner-caption-color, var(--primary-white));
}

.banner-item__html {
  margin-top: 10px;
}

.mobile-fullwidth .banner-item__container {
  @media screen and (max-width: 768px) {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }
}
.banner-item__container ~ .banner-item__image {
  z-index: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: auto;
  height: 100%;
}
.mobile-fullwidth .banner-item__container ~ .banner-item__image {
  @media screen and (max-width: 768px) {
    width: 100%;
    height: auto;
    position: relative;
  }
}
.banner-item__image :is(img, picture) {
  width: 100%;
  display: block;
  object-fit: cover;
}

.banner-item__link {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  font-size: 0;
  width: 100%;
}

/* /catalog/view/theme/LESPROM/template/_blocks/features/style.css */
/* LPD-17 Э7: три преимущества тёмной секции (ТЗ §5.5 стр. 4).
   Разделители — волосяные линии между колонками, а не рамки коробок:
   секция должна читаться одной полосой, а не тремя плитками. */
.block-features__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.block-features__item {
  padding-left: var(--grid-gap);
  border-left: 1px solid var(--primary-white-opacity);
}
.block-features__item:first-child {
  padding-left: 0;
  border-left: 0;
}
.block-features__title {
  margin: 0;
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  font-family: var(--font-2);
  line-height: var(--leading-tight);
  color: var(--primary-white);
}
.block-features__text {
  margin: 12px 0 0;
  max-width: 38ch;
  font-size: var(--fs-15);
  font-weight: var(--fw-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text-on-dark-muted);
}

@media screen and (max-width: 768px) {
  .block-features__list {
    grid-template-columns: 1fr;
    row-gap: 20px;
  }
  /* На одной колонке разделитель переезжает сверху — иначе линия слева
     режет текст по вертикали и читается как обрезанная рамка. */
  .block-features__item {
    padding-left: 0;
    padding-top: 20px;
    border-left: 0;
    border-top: 1px solid var(--primary-white-opacity);
  }
  .block-features__item:first-child {
    padding-top: 0;
    border-top: 0;
  }
}

/* ─── LPD-05 R5: блок `facts` ──────────────────────────────────────────────────
   ⚠️ Этот раздел собран из ДВУХ независимых правок 2026-08-07: заход по странице
   производства и заход по «О компании» пришли к одному компоненту порознь и
   записали почти одинаковые правила дважды. Дубли слиты здесь; при следующей
   правке features сначала прочитать этот блок целиком, а не дописывать в конец.

   Разделение ролей между модификаторами намеренное:
     --facts — РОЛЬ блока (величина + подпись). Задаёт кегль. Ставится всегда;
     --wide  — ЧИСЛО колонок (четыре вместо трёх). Ставится только когда величин
               больше трёх.
   Кегль привязан к роли, а не к числу колонок: три величины — тоже величины, и
   при --wide-only-правиле они молча остались бы кеглем преимущества с главной. */

.block-features--wide .block-features__list {
  grid-template-columns: repeat(4, 1fr);
}
/* Величина — содержание колонки, а не её заголовок: в facts <h3> несёт число
   («С 2023 года», «6 разделов»), и оно должно читаться раньше подписи. Кегль
   берётся из шкалы Э1, а не назначается вручную. */
/* --fs-32, а не 24: в первой редакции величина была набрана кеглем подзаголовка и
   читалась подписью, а не величиной — весь блок выглядел абзацем в четыре колонки.
   Значение должно брать взгляд раньше расшифровки. */
.block-features--facts .block-features__title {
  font-size: var(--fs-32);
  line-height: var(--leading-none);
  letter-spacing: -.02em;
}
.block-features--facts .block-features__text {
  max-width: 32ch;
}

/* Светлая версия. Компонент родился внутри тёмной секции главной и потому жёстко
   белый по тексту и полупрозрачно-белый по разделителям. На «О компании» величины
   стоят на --c-page: тёмная секция там уже занята первым экраном, а две тёмные
   полосы подряд запрещены (§5.4). Перекрашиваются ровно три вещи — величина,
   подпись и разделитель. */
.block-features--light .block-features__title {
  color: var(--color-text);
}
.block-features--light .block-features__text {
  color: var(--color-text-secondary);
}
.block-features--light .block-features__item {
  border-left-color: var(--color-hairline);
}

@media screen and (max-width: 768px) {
  .block-features--light .block-features__item {
    border-top-color: var(--color-hairline);
  }
}

@media screen and (max-width: 1024px) {
  /* Четыре колонки на планшете дают ~170px на величину — подпись из двух слов
     разваливается на четыре строки. Два на два читаются. */
  .block-features--wide .block-features__list {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 24px;
  }
  /* nth-child(odd), а не (3): на двух колонках левый край — каждый нечётный,
     сколько бы величин ни завёл владелец. */
  .block-features--wide .block-features__item:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
}

@media screen and (max-width: 768px) {
  .block-features--wide .block-features__list {
    grid-template-columns: 1fr;
  }
  /* На узкой колонке крупная величина съедает две строки и спорит с H2 секции. */
  .block-features--facts .block-features__title {
    font-size: var(--fs-20);
  }
  .block-features--facts .block-features__text {
    max-width: none;
  }
  /* Разделитель возвращается всем, кроме первого: на одной колонке он сверху
     (правило базового блока), а сброшенный выше nth-child(odd) его снял бы. */
  .block-features--wide .block-features__item {
    padding-top: 20px;
    border-top: 1px solid var(--primary-white-opacity);
  }
  .block-features--wide .block-features__item:first-child {
    padding-top: 0;
    border-top: 0;
  }
}

/* /catalog/view/theme/LESPROM/template/_blocks/steps/style.css */
.steps-wrap {
  padding: 60px 0 80px;
  background-color: var(--primary-white-grey);
}
.steps {
  display: flex;
  column-gap: 30px;
  align-items: start;
  justify-content: space-between;
  /* LPD-05 R5 (2026-08-07): перенос разрешён на ВСЕХ ширинах, а не только ниже
     768px. Шаг несжимаем (min-width: 200px), и пять шагов с промежутками просят
     1120px, шесть — 1350px; между 768 и 1140px лента вылезала за контейнер и
     давала странице горизонтальный скролл. Дефект был и до этой ревизии — на
     этих же ширинах его показывали этапы покраски (6 шагов). На широком экране
     правило ничего не меняет: строка и так помещается. */
  flex-wrap: wrap;
  row-gap: 28px;

  @media screen and (max-width: 768px) {
    row-gap: 28px;
    flex-wrap: wrap;
    column-gap: 16px;
  }
}
.steps__item {
  /* Шаги делят строку поровну и растут вместе с ней. Было: несжимаемые 200px и
     раздача остатка через justify-content: space-between — при переносе (см.
     правило выше) последняя строка растаскивалась по краям, и между шагом 04 и
     шагом 05 зияла дыра во всю колонку. Теперь ряд просто заполняется слева. */
  flex: 1 1 200px;

  @media screen and (max-width: 768px) {
    flex: 0 1 auto;
    width: calc(50% - 8px);
  }
}
.steps__item .step {
  width: 100%;
}

.step {
  display: flex;
  row-gap: 30px;
  flex-direction: column;
  width: min-content;
  min-width: 200px;

  @media screen and (max-width: 768px) {
    row-gap: 20px;
    width: 100%;
    min-width: auto;
  }
}
.step__top {
  width: 100%;
  display: flex;
  column-gap: 12px;
  align-items: end;

  @media screen and (max-width: 768px) {
    column-gap: 6px;
  }
}
.step__icon {
  --icon-size: 60px;
  --icon-fill: none;
}
.step__line {
  width: 100%;
  height: 1px;
  border-radius: var(--radius-sm);
  background-color: var(--primary-light-grey);
}
.step__num {
  font-size: 1rem;
  font-weight: var(--fw-bold);
  font-family: var(--font-2);
  color: var(--primary-light-grey);
  transform: translateY(calc(50% - 1px));
}
/* LPD-05 R5: шаг с отдельным описанием (тип блока process). У этапов покраски
   весь текст лежит одной строкой в step.title, здесь заголовок и описание
   приходят из админки раздельно — им нужна своя пара размеров и свой ритм,
   более плотный, чем row-gap: 30px у самого шага. */
.step__body {
  display: flex;
  row-gap: 10px;
  flex-direction: column;
}
.step__text--lead {
  font-size: var(--fs-18);
  font-weight: var(--fw-bold);
  font-family: var(--font-2);
  line-height: var(--leading-tight);
}
.step__note {
  margin: 0;
  font-size: var(--fs-15);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

@media screen and (max-width: 768px) {
  /* На мобильном шаги стоят по два в ряд, и колонка сужается до ~50%: описание
     в такой ширине разваливается на 12-14 строк. Шаги с описанием переводятся
     в одну колонку — читаемость важнее компактности (мобильный гейт: текст
     ≥ 15px, без наложений). */
  .steps__item:has(.step__note) {
    width: 100%;
  }
  .step__text--lead {
    font-size: var(--fs-16);
  }
}

/* LPD-05 R5: вводный абзац ленты шагов. Мера строки — общая для прозы темы
   (LPD-16 п. 2/5), центрирование — за заголовком секции. */
.steps-intro {
  max-width: 68ch;
  margin: -20px auto 40px;
  text-align: center;
  font-size: var(--fs-16);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}
.steps-intro p {
  margin: 0;
}

@media screen and (max-width: 768px) {
  .steps-intro {
    margin: -8px 0 28px;
    text-align: left;
    font-size: var(--fs-15);
  }
}

/* LPD-05 R5: шаг без иконки. Номер вырастает с 1rem до размера подзаголовка и
   переезжает влево — он становится якорем, которым была иконка. Линия уходит
   вправо, поэтому порядок в .step__top меняется на обратный. */
.step--numbered .step__top {
  flex-direction: row-reverse;
  align-items: center;
}
.step--numbered .step__num {
  font-size: var(--fs-32);
  line-height: var(--leading-none);
  color: var(--color-accent-strong);
  transform: none;
}
.step--numbered .step__line {
  /* Волосяная линия справа от номера дочерчивает ленту до следующего шага —
     ту же роль она играла в раскладке с иконкой. */
  background-color: var(--color-hairline, var(--primary-light-grey));
}

@media screen and (max-width: 768px) {
  .step--numbered .step__num {
    font-size: var(--fs-24);
  }
}

/* /catalog/view/theme/LESPROM/template/_blocks/slider/style.css */
.block-slider {
  --slider-pagination-bottom: 40px;

  height: var(--slider-height, auto);

  @media screen and (max-width: 768px) {
    --slider-body-left-padding: 24px;
    --slider-body-top-padding: 42px;

    overflow: hidden;
  }
}
.block-slider > .container {
  display: flex;
  row-gap: 30px;
  flex-direction: column;

  @media screen and (max-width: 768px) {
    row-gap: 6px;
  }
}
.block-slider .block-slider__swiper {
  height: var(--slider-height, auto);
}

.block-slider__title {
  margin-bottom: 14px;
}

.block-slider__wrap {
  align-items: stretch;
}

.block-slider__item {
  height: auto;
}

.block-slider__html, .block-slider__html > *  {
  height: 100%;
}

.block-slider__image {
  height: 100%;
  z-index: 0;
  position: relative;
}
.block-slider__image :is(img, picture) {
  display: block;

  @media screen and (max-width: 768px) {
    object-fit: cover;
  }
}

.block-slider__body {
  z-index: 1;
  position: absolute;
  left: var(--slider-body-left-padding, 100px);
  top: var(--slider-body-top-padding, 64px);
  /* top: 50%; */
  /* transform: translateY(-50%); */
  min-height: 300px;

  display: flex;
  row-gap: 12px;
  /* justify-content: center; */
  flex-direction: column;

  @media screen and (max-width: 768px) {
    height: calc(100% - var(--slider-body-top-padding) * 2 - 50px - var(--slider-pagination-bottom));
    right: var(--slider-body-left-padding, 100px);
  }
}

.block-slider__title {
  font-size: 6.875rem;
  font-weight: var(--fw-bold);
  font-family: var(--font-2);

  background: linear-gradient(180deg, var(--slider-title-color, var(--primary-white)) 0%, rgba(255, 255, 255, 0.21) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  
  @media screen and (max-width: 768px) {
    font-size: 2.875rem;
    height: auto;
    max-height: 70px;
  }
}
.block-slider__title img {
  width: max-content;
}

.block-slider__subtitle {
  font-size: 2.125rem;
  font-weight: var(--fw-light);
  font-family: var(--font-2);
  color: var(--slider-subtitle-color, var(--primary-white));

  @media screen and (max-width: 768px) {
    font-size: 1.25rem;
  }
}

.block-slider__buttons:not(:first-child) {
  margin-top: 42px;

  @media screen and (max-width: 768px) {
    margin-top: auto;
  }
}
.block-slider__button {
  --button-font-size: 1.125rem;
  --button-width: max-content;
  --button-padding: 0 52px;
  --button-height: 56px;
}

.block-slider--carousel .block-slider__swiper {
  padding-bottom: 41px;

  @media screen and (max-width: 768px) {
    overflow: initial;
  }
}

.block-slider--default .block-slider__thumbs {
  z-index: 1;
  position: absolute;
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;

  display: flex;
  column-gap: 0;
  align-items: center;

  backdrop-filter: blur(4px);
  background-color: var(--primary-white-opacity);
}
.block-slider--default .block-slider__thumb {
  width: 100%;
  min-width: 350px;
  height: 70px;
  padding: 0 30px;
  cursor: pointer;
  z-index: 0;
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 0.88rem;
  font-weight: var(--fw-medium);
  font-family: var(--font);
  text-transform: uppercase;
  color: var(--slider-thumbs-text-color, var(--primary-white-blue2));
  transition: .3s;
}
.block-slider--default .block-slider__thumb--active {
  color: var(--slider-thumbs-text-active-color, var(--primary-white));
}
.block-slider--default .block-slider__thumb:hover {
  color: var(--slider-thumbs-text-hover-color, var(--primary-white));
}
.block-slider--default .block-slider__thumb a {
  border-bottom: 1px solid transparent;
}
.block-slider--default .block-slider__thumb a:hover {
  color: currentColor;
  border-color: currentColor;
}
.block-slider--default .block-slider__thumb a::before {
  content: '';
  display: block;
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.block-slider--default .block-slider__pagination {
  width: max-content;
  left: var(--slider-body-left-padding, 100px);
  bottom: var(--slider-pagination-bottom, 40px);

  display: flex;
  column-gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.block-slider--default .block-slider__thumbs ~ .block-slider__pagination {
  --slider-pagination-bottom: 144px;
  /* bottom: var(--slider-pagination-bottom, 100px); */
}
.block-slider--default .swiper-pagination-bullet {
  --swiper-pagination-bullet-width: 12px;
  --swiper-pagination-bullet-height: 12px;
  --swiper-pagination-bullet-border-radius: var(--radius-sm);
  --swiper-pagination-bullet-horizontal-gap: 0px;
  --swiper-pagination-color: var(--primary-white);
  --swiper-pagination-bullet-inactive-color: var(--primary-white);
  
  opacity: 1;
  position: relative;
  font-size: 0 !important;
}
.block-slider--default .swiper-pagination-bullet-active::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  background-color: var(--primary-grey2);
  transform: translateX(-50%) translateY(-50%);
}

.block-slider__scrollbar {
  --swiper-scrollbar-top: 40px;
  --swiper-scrollbar-bottom: 0;
  --swiper-scrollbar-size: 1px;
  --swiper-scrollbar-sides-offset: 0;

  width: 100% !important;
}
.block-slider--default .block-slider__scrollbar {
  --swiper-scrollbar-top: auto;
  --swiper-scrollbar-bottom: 8px;
  --swiper-scrollbar-border-radius: var(--radius-sm);
  --swiper-scrollbar-bg-color: var(--primary-white-blue2);
  --swiper-scrollbar-drag-bg-color: var(--primary-white-blue2);
}
.block-slider--default .block-slider__thumbs ~ .block-slider__scrollbar {
  --swiper-scrollbar-top: auto;
  --swiper-scrollbar-bottom: 70px;
}
.block-slider--default .block-slider__scrollbar .swiper-scrollbar-drag {
  height: 2px;
}
.block-slider--carousel .block-slider__scrollbar {
  /* margin-top: 60px; */
  position: relative !important;
}

.block-slider__pagination {
  --swiper-pagination-bottom: 0;
  --swiper-pagination-bullet-size: 38px;
  --swiper-pagination-bullet-border-radius: var(--radius-sm);
  --swiper-pagination-bullet-inactive-color: transparent;
  --swiper-pagination-bullet-inactive-opacity: 1;

  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-top: 40px;
  user-select: none;
}
.block-slider__pagination .swiper-pagination-bullet {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: var(--fw-regular);
  color: var(--primary-grey5);
}
.block-slider__pagination .swiper-pagination-bullet-active {
  --swiper-pagination-color: transparent;

  border: 1px solid var(--primary-color);
  color: var(--primary-color);
}

/* Если внутри другого блока */
[class^="block-"] .block-slider, [class^="block-"] .block-slider :is(.block-slider__container, .block-slider__swiper) {
  height: 100%;
}
[class^="block-"] .block-slider .block-slider__swiper {
  /* padding-bottom: 61px; */
}

/*  */
.works-carousel :is(picture, img) {
  object-fit: cover;
}
/* /catalog/view/theme/LESPROM/template/_blocks/seo/landing_blocks/style.css */
.seo-landing-blocks {
  margin: 44px 0 0;
}

/* Навигация по разделам стоит внутри контентной колонки, сразу под выбором материала:
   её собственный контейнер здесь лишний, отступ снизу отбивает её от следующей секции. */
.seo-landing-blocks--nav {
  margin: 28px 0 0;
}

/* 2026-08-29. Снятие ограничений — ТОЛЬКО внутри #page-body, и это не перестраховка.
   Правило выше написано для случая «блок уже лежит в контентной колонке»: там свой
   контейнер действительно лишний, ширину задаёт родитель. Но секции кладут в страницу
   двумя способами: CONTENT_CENTER — внутрь #page-body.container (термообработка, сорта,
   обычные инфостраницы), CONTENT_TOP — СНАРУЖИ него, чтобы секция могла нести подложку
   во всю ширину экрана (цех окраски, шесть посадочных покраски, производство).
   Во втором случае max-width: none снимал единственное ограничение, и на мониторе 1920
   чипы навигации разъезжались от края до края при норме 1416. */
#page-body .seo-landing-blocks--nav .container {
  padding-left: 0;
  padding-right: 0;
  width: 100%;
  max-width: none;
}

.seo-landing-blocks *,
.seo-landing-blocks *::before,
.seo-landing-blocks *::after {
  box-sizing: border-box;
}

.seo-landing-blocks .container {
  display: grid;
  gap: 28px;
}

.seo-landing-block {
  min-width: 0;
}

.seo-landing-block__eyebrow {
  position: relative;
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  min-height: 24px;
  padding-left: 14px;
  align-items: center;
  font-size: .9375rem;
  font-weight: var(--fw-bold);
  line-height: 1.25;
  font-family: var(--font-2);
  letter-spacing: 0;
  color: var(--primary-blue);
}

.seo-landing-block__eyebrow::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 16px;
  background-color: var(--primary-blue);
  transform: translateY(-50%);
}

.seo-landing-block__title {
  margin: 0;
  font-family: var(--font-2);
  font-size: 1.5rem;
  font-weight: var(--fw-extrabold);
  line-height: 1.25;
  color: var(--primary-color);
  overflow-wrap: anywhere;
}

.seo-landing-block__content {
  max-width: 68ch;                 /* 1.2: длина строки 60–80 знаков (было 920px ≈ 100+ рус-символов) */
  font-size: 1rem;
  line-height: 1.65;
  color: var(--primary-color);
  overflow-wrap: anywhere;
}

.seo-landing-block__content :is(p, ul, ol) {
  margin-top: 0;
}

.seo-landing-block__content :is(p, ul, ol):last-child {
  margin-bottom: 0;
}

.seo-landing-block__content :is(ul, ol) {
  display: grid;
  gap: 8px;
  padding-left: 22px;
}

.seo-landing-block__content a {
  color: var(--primary-blue);
  text-decoration: none;
}

.seo-landing-block__content a:hover,
.seo-landing-block__content a:focus-visible {
  text-decoration: underline;
}

/* Delivery: dark service panel */
.seo-delivery {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
  gap: 34px;
  padding: 38px 42px;
  border-radius: var(--radius-sm);
  align-items: stretch;
  color: var(--primary-white);
  background-color: var(--primary-grey);
}

.seo-delivery__content {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 16px;
}

.seo-delivery__eyebrow {
  color: var(--primary-white-blue2);
}

.seo-delivery__title {
  max-width: 700px;
  color: var(--primary-white);
}

.seo-delivery__text {
  max-width: 760px;
  color: var(--primary-white-blue2);
}

/* Related: navigation board */
.seo-related {
  display: grid;
  gap: 22px;
  padding: 32px 0 38px;
  border-top: 1px solid var(--primary-grey-opacity6);
  border-bottom: 1px solid var(--primary-grey-opacity6);
}

/* Навигация вплотную к ЧаВо (seo/information_sections ставит --before-faq, когда между
   ними нет ни ленты, ни CTA). Иначе нижняя линия навигации и верхняя линия ЧаВо шли
   параллельно через 104px пустоты (74px на телефоне) — «пустой блок между блоками».
   Разделителем остаётся линия ЧаВо; нижнее поле навигации держало отступ до её же линии
   и без неё не нужно. Специфичность выше мобильного `.seo-related { padding }` — порядок
   правил не важен. */
.seo-landing-blocks--before-faq .seo-related {
  padding-bottom: 0;
  border-bottom: 0;
}

.seo-related__head {
  display: flex;
  gap: 20px;
  align-items: end;
  justify-content: space-between;
}

.seo-related__title {
  max-width: 620px;
}

/* Guide: развилка по задаче (LPD-05 R2, вариант B).
   Синяя боковая полоса слева снята: она держалась на декоративном акценте, а роль блока
   читается заголовком и подложкой. Раскладка вертикальная — текст, под ним сценарии:
   правая колонка исчезла вместе с захардкоженными критериями. */
.seo-guide {
  display: grid;
  gap: 24px;
  padding: 34px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sm);
  background-color: var(--primary-white-grey);
}

.seo-guide__copy {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 16px;
}

.seo-guide__text {
  max-width: 780px;
}

/* Application: material use-case matrix */
.seo-application {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 26px;
  padding: 30px;
  border: 1px solid var(--primary-grey-opacity6);
  border-radius: var(--radius-md);
  background-color: var(--primary-white);
  box-shadow: 0 10px 28px rgba(24, 42, 60, .04);
}

.seo-application__head {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 14px;
}

.seo-application__text > :is(h3, h4) {
  display: none;
}

/* FAQ: clean accordion
   2026-09-11: колонка заголовка — до 360px, а не до 300px. Заголовок набран 24px жирным
   RF Dewi Expanded (~21px на букву), и в 300px входило около 14 букв: «Вопросы по
   термолиственнице» рвался как «термолиственниц|е» без дефиса (overflow-wrap: anywhere) на
   любой ширине от 769 до 1920, как и «перфорированным». В 360px входят слова до 17 букв;
   из 74 заголовков вопросов длиннее 16 нет ни одного. */
.seo-faq {
  display: grid;
  grid-template-columns: minmax(220px, 360px) minmax(0, 1fr);
  gap: 44px;
  padding: 34px 0 10px;
  border-top: 1px solid var(--primary-grey-opacity6);
}

.seo-faq__head {
  min-width: 0;
}

.seo-faq__eyebrow {
  margin-bottom: 12px;
}

/* Proof: quality and service evidence board */
.seo-proof {
  display: grid;
  grid-template-columns: minmax(220px, 340px) minmax(0, 1fr);
  gap: 32px;
  padding: 32px;
  border-radius: var(--radius-md);
  color: var(--primary-white);
  background: linear-gradient(135deg, var(--primary-grey) 0%, #20384a 100%);
}

.seo-proof__head {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 14px;
}

.seo-proof__text > :is(h3, h4) {
  display: none;
}

.seo-proof__eyebrow {
  color: var(--primary-white-blue2);
}

.seo-proof__title {
  color: var(--primary-white);
}

.seo-proof__text {
  color: var(--primary-white-blue);
}

/* ═══ LPD-05 R2 (2026-08-01): раскладки варианта B ═══
   Решение владельца по демонстрации plans/media-review/lpd-05-seo-blocks-demo-2026-08-01.html.
   ТЗ — plans/lpd-05-seo-block-design-spec.md, раздел «Ревизия 2026-08-01». */

/* Доставка: порядок отгрузки. Нумерация — счётчиком, а не картинкой: список остаётся
   списком для скринридера, а номер не попадает в текст при копировании. */
.seo-delivery__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: seo-step;
  display: grid;
  align-content: center;
}

.seo-delivery__steps li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 4px 12px;
  padding: 14px 0;
  border-top: 1px solid var(--primary-white-opacity);
}

.seo-delivery__steps li:first-child {
  border-top: 0;
  padding-top: 0;
}

/* Позиции заданы ЯВНО. Автоплейсмент здесь ошибался: номер объявлен на две строки, но
   строка в шаге одна, и `strong` уезжал в колонку номера — название шага и описание
   наезжали друг на друга. Сетка из трёх ячеек не должна зависеть от порядка обхода. */
.seo-delivery__steps li::before {
  /* ⚠️ position/right/margin сбрасываются ЯВНО. В теме есть глобальная стилизация
     нумерованных списков прозы: `ol > li { position: relative }` +
     `ol > li::before { position: absolute; right: 100%; margin-right: 6px }`
     (common.css) — маркер там вешается СНАРУЖИ пункта, слева от текста.
     Она перебивала раскладку этого блока: у абсолютно спозиционированного
     элемента grid-column/grid-row не работают, и номер шага уезжал за левый
     край тёмной карточки на светлый фон страницы. Видно было на всех страницах
     с блоком, а не только на «Доставке и оплате» (LPD-17 §13.6, 2026-08-07). */
  position: static;
  right: auto;
  margin-right: 0;
  counter-increment: seo-step;
  content: counter(seo-step, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1 / span 2;
  font-family: var(--font-2);
  font-size: .9375rem;
  font-weight: var(--fw-bold);
  line-height: 1.5;
  color: var(--color-accent-on-dark);
}

.seo-delivery__steps strong {
  grid-column: 2;
  grid-row: 1;
  font-size: 1rem;
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  color: var(--primary-white);
}

.seo-delivery__steps span {
  grid-column: 2;
  grid-row: 2;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--primary-white-blue2);
}

/* Гайд: сценарии. auto-fit, чтобы два и три сценария выглядели одинаково правильно. */
.seo-guide__fork {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.seo-guide__case {
  padding: 18px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sm);
  background-color: var(--primary-white);
}

.seo-guide__case h3 {
  margin: 0 0 8px;
  font-family: var(--font-2);
  font-size: 1rem;
  font-weight: var(--fw-bold);
  line-height: 1.3;
  color: var(--primary-color);
}

.seo-guide__case p {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* Связанные разделы: строка ссылок. 44px высоты держится паддингом — mobile gate. */
.seo-related__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.seo-related__chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-field);
  font-size: .9375rem;
  font-weight: var(--fw-medium);
  line-height: 1.35;
  color: var(--color-accent-strong);
  text-decoration: none;
  transition: border-color .18s ease, background-color .18s ease;
  /* LPD-22 (05.10.2026): normalize.css даёт ссылкам width: max-content — чип
     «Пиломатериалы для несущего каркаса» на 320px не переносился и распирал весь блок
     вместе с заголовком за край экрана: сетка .seo-related брала ширину колонки по
     полной длине чипа. max-width этого не лечит — нужен width: auto. */
  width: auto;
  max-width: 100%;
}

.seo-related__chip:hover {
  border-color: var(--color-border-strong);
  background-color: var(--primary-white);
}

.seo-related__chip:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

/* FAQ: ответы открыты. Колонки, а не grid: пара «вопрос-ответ» не должна разрываться,
   а высоты у них разные — column-count раскладывает плотнее любой сетки.
   2026-09-11: две колонки — только когда каждой хватает 260px (columns: 2 260px), иначе одна.
   Было column-count: 2 при любой ширине, и на 769–820px колонке ответов (правее заголовка
   блока) доставалось по 176–200px: слово «термолиственнице» из вопроса — 202px жирным RF Dewi
   Expanded — вылезало за колонку, на 769–780px за край окна, и документ становился шире
   экрана на 6px (замер tools/check-page-overflow.mjs). Строки в 20 знаков к тому же плохо
   читались. Теперь на 769–~990px ответы идут одной колонкой, с ~990px — двумя. */
.seo-faq__grid {
  columns: 2 260px;
  column-gap: 34px;
}

.seo-faq__item {
  break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 22px;
  padding-bottom: 4px;
  /* Страховка на слово длиннее самой колонки: переносится только оно, обычный текст — нет. */
  overflow-wrap: break-word;
}

.seo-faq__q {
  margin: 0 0 6px;
  font-family: var(--font-2);
  font-size: 1rem;
  font-weight: var(--fw-bold);
  line-height: 1.35;
  color: var(--primary-color);
}

.seo-faq__a {
  margin: 0;
  max-width: 68ch;
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
}

/* Применение: таблица. Скролл живёт на обёртке, страница вбок не едет. */
.seo-application__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.seo-application__table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
  line-height: 1.55;
}

.seo-application__table th,
.seo-application__table td {
  padding: 14px 16px 14px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-hairline);
}

.seo-application__table thead th {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-2);
  font-size: .8125rem;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.seo-application__table tbody th {
  width: 30%;
  min-width: 160px;
  font-weight: var(--fw-semibold);
  color: var(--primary-color);
}

.seo-application__table tbody td {
  color: var(--color-text-secondary);
}

/* Контроль качества: чеклист. Маркер — маска, а не файл: цвет берётся из токена
   и не требует второй иконки для тёмной подложки. */
.seo-proof__checklist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.seo-proof__checklist li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 4px 12px;
  padding: 14px 0;
  border-top: 1px solid var(--primary-white-opacity);
}

.seo-proof__checklist li:first-child {
  border-top: 0;
  padding-top: 0;
}

/* Те же явные позиции, что у шагов доставки: сетка «маркер | название / описание». */
.seo-proof__checklist li::before {
  content: '';
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 16px;
  height: 16px;
  margin-top: 5px;
  background-color: var(--primary-green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 12.5 2 8.3l1.4-1.4 2.8 2.8 6.4-6.4L14 4.7z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 12.5 2 8.3l1.4-1.4 2.8 2.8 6.4-6.4L14 4.7z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.seo-proof__checklist strong {
  grid-column: 2;
  grid-row: 1;
  font-size: 1rem;
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  color: var(--primary-white);
}

.seo-proof__checklist span {
  grid-column: 2;
  grid-row: 2;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--primary-white-blue);
}

/* Производство: кадр и текст на той же тёмной базе, что шапка и подвал (LPD-17 §3.4). */
.seo-production {
  display: grid;
  grid-template-columns: minmax(200px, 320px) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  padding: 34px 38px;
  border-radius: var(--radius-sm);
  color: var(--primary-white);
  background-color: var(--color-ink);
}

.seo-production__shot {
  overflow: hidden;
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-sunken);
  aspect-ratio: 4 / 3;
}

.seo-production__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.seo-production__copy {
  min-width: 0;
  display: grid;
  gap: 14px;
  justify-items: start;
}

.seo-production__eyebrow {
  color: var(--primary-white-blue2);
}

.seo-production__title {
  color: var(--primary-white);
}

.seo-production__text {
  color: var(--color-text-on-dark-muted);
}

.seo-production__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-accent-on-dark);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.seo-production__link:hover {
  text-decoration: none;
}

.seo-production__link:focus-visible {
  outline: 2px solid var(--color-accent-on-dark);
  outline-offset: 3px;
}

/* LPD-14 Э4: однострочник вместо полного блока proof_quality (правило §5.1) */
.seo-proof-link {
  margin: 0;
  font-size: 1rem;
  line-height: var(--leading-relaxed);
}

.seo-proof-link__anchor {
  display: inline-block;
  width: auto;
  min-height: 44px;
  padding: 10px 0;
  color: var(--primary-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.seo-proof-link__anchor:hover {
  text-decoration: none;
}

.seo-proof-link__anchor:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

/* 2026-09-11: доставка — в одну колонку уже до 991px, а не только на телефоне. Колонка шагов
   minmax(320px, 430px) растёт до своих 430px раньше гибкой колонки текста, и на 769–920px
   заголовку оставалось 181–330px: «Доставка скошенного планкена из термолиственницы» резался
   как «термолиственниц|ы» без дефиса (overflow-wrap: anywhere у заголовков блоков). С 992px
   заголовку остаётся от 404px — в это входит самое длинное слово всех 75 заголовков доставки
   (16 букв жирным 24px ≈ 330px). */
@media screen and (max-width: 991px) {
  .seo-delivery {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media screen and (max-width: 768px) {
  .seo-landing-blocks {
    margin: 40px 0 0;
  }

  .seo-landing-blocks .container {
    gap: 24px;
  }

  .seo-landing-block__title {
    font-size: 1.1875rem;
  }

  .seo-landing-block__content,
  .seo-faq__a {
    font-size: .9375rem;
    line-height: var(--leading-loose);
  }

  .seo-delivery {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 26px 20px;
  }

  /* LPD-05 R2: мобильные раскладки варианта B */
  .seo-faq__grid {
    column-count: 1;
  }

  .seo-guide__fork {
    grid-template-columns: 1fr;
  }

  .seo-production {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px 18px;
  }

  .seo-production__shot {
    max-width: 320px;
  }

  .seo-application__table th,
  .seo-application__table td {
    padding: 12px 14px 12px 0;
  }

  .seo-application__table tbody th {
    min-width: 130px;
  }

  .seo-related {
    gap: 18px;
    padding: 26px 0 30px;
  }

  .seo-related__head {
    display: grid;
    gap: 8px;
  }

  .seo-guide {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 24px 18px;
  }

  .seo-application {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px 18px;
  }

  .seo-faq {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-top: 28px;
  }

  .seo-faq__eyebrow {
    margin-bottom: 8px;
  }

  .seo-proof {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px 18px;
  }}

/* /catalog/view/theme/LESPROM/template/_blocks/chunk/callback/style.css */
.chunk-callback {
  display: flex;
  row-gap: 30px;
  flex-direction: column;
}
.chunk-callback__buttons {
  display: flex;
  column-gap: 10px;
  align-items: center;

  @media screen and (max-width: 768px) {
    row-gap: 22px;
    flex-direction: column;
    align-items: start;
  }
}
.chunk-callback span {
  text-align: center;
  font-size: 0.625rem;
  font-weight: var(--fw-regular);
  font-family: var(--font);
  color: var(--primary-white-blue2);

  @media screen and (max-width: 768px) {
    text-align: left;
  }
}
.chunk-callback span br {
  @media screen and (max-width: 768px) {
    display: none;
  }
}
.chunk-callback .button {
  max-width: 290px;

  @media screen and (max-width: 768px) {
    max-width: 160px;
  }
}
.chunk-callback .button__text {
  font-size: 0.875rem;
  color: var(--primary-white);
}
.chunk-callback .socials .icon {
  --icon-size: 46px;
  --icon-fill: var(--primary-light-grey2);
}

.chunk-callback__contacts {
  display: flex;
  row-gap: 2px;
  flex-direction: column;
}

.chunk-callback__telephone a {
  --link-color: var(--primary-white);

  font-size: 2rem;
  font-weight: lighter;
}

.chunk-callback__schedule {
  display: flex;
  column-gap: 10px;
  align-items: center;
}
.chunk-callback__schedule-check {
  z-index: 0;
  position: relative;
  width: 15px;
  height: 15px;
  background-color: var(--primary-green-opacity3);
}
.chunk-callback__schedule-check::before {
  content: '';
  width: 9px;
  height: 9px;
  z-index: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--primary-green5);
}
.chunk-callback__schedule-text {
  font-size: 0.813rem;
  font-weight: lighter;
  color: var(--primary-light-grey);
}

.chunk-callback .socials__link:nth-child(3) .icon svg path:last-child {
  fill: #252e3b;
}
/* /catalog/view/theme/LESPROM/template/_blocks/seo/cta/style.css */
/* LPD-05 R5, тип `cta`. Подложку, вертикальные поля и цвет текста несёт сам
   паттерн секции (.section--ink в common.css) — здесь только раскладка двух колонок.

   Пропорция 1fr / auto, а не 1fr / 1fr: правая колонка — блок связи фиксированного
   состава (кнопка ≤290px, мессенджеры, телефон, график), и растягивать её до
   половины экрана нечем. Текст слева забирает остаток и упирается в 56ch от
   .section__subline. */
.seo-cta__grid {
  display: flex;
  column-gap: 64px;
  align-items: center;
  justify-content: space-between;
}
.seo-cta__copy {
  min-width: 0;
}
/* Подпись под заголовком в этой секции короче общей: справа стоит блок связи,
   и 56ch увели бы текст под него. */
.seo-cta__text {
  max-width: 46ch;
}
.seo-cta__contact {
  flex-shrink: 0;
}

@media screen and (max-width: 1100px) {
  .seo-cta__grid {
    column-gap: 32px;
  }
}

@media screen and (max-width: 768px) {
  /* Мобайл: колонка. Блок связи идёт ПОД текстом, а не над ним — сначала повод
     звонить, потом способ. row-gap равен --section-gap, чтобы расстояние внутри
     секции совпадало с расстоянием между её слотами. */
  .seo-cta__grid {
    row-gap: var(--section-gap);
    flex-direction: column;
    align-items: stretch;
  }
  .seo-cta__text {
    max-width: none;
  }
}

/* LPD-05 R5 (правка по замечанию владельца 2026-08-07): блок связи в две строки.
   Одной строкой кнопка, подпись и три мессенджера занимали все 349px колонки и
   упирались в правую границу контейнера — на экранах около 1440px справа от
   последней иконки оставалось 20px тёмного поля, и круглая иконка читалась как
   срезанная краем.

   Перенос задан здесь, а не в самом chunk/callback: тот же блок стоит на главной
   и на странице покраски, где места хватает, а общий flex-wrap уводил на вторую
   строку ТОЛЬКО мессенджеры — подпись «или пишите» оставалась у кнопки и теряла
   то, к чему относилась. Кнопка на всю ширину строки разрывает ряд там, где надо:
   подпись уезжает вместе с мессенджерами. */
.seo-cta__contact .chunk-callback__buttons {
  flex-wrap: wrap;
  row-gap: 14px;
}
.seo-cta__contact .chunk-callback__buttons > .button {
  flex: 1 0 100%;
  /* max-width: 290px из самого chunk/callback резал кнопку до 290px из 349
     доступных, и в оставшиеся 59px помещалась подпись «или пишите» — разрыв
     строки происходил ПОСЛЕ неё, а не перед. */
  max-width: none;
}

@media screen and (max-width: 768px) {
  /* На мобильном компонент уже ставит всё колонкой — разрыв не нужен. */
  .seo-cta__contact .chunk-callback__buttons > .button {
    flex: 0 1 auto;
  }
}

/* /catalog/view/theme/LESPROM/template/_blocks/rating/stars/style.css */
.rating-stars {
  display: flex;
  column-gap: 13px;
  align-items: center;
}
.rating-star {
  --icon-size: 16px;
  --icon-fill: transparent;
}
.rating-star .icon svg {
  stroke-width: 1px;
  stroke: var(--rating-star-icon-fill, var(--primary-orange));
}
.rating-star--active .icon {
  --icon-fill: var(--rating-star-icon-fill, var(--primary-orange));
}
/* /catalog/view/theme/LESPROM/template/_blocks/rating/sidebar/style.css */
.rating-sidebar {
  display: flex;
  row-gap: 60px;
  flex-direction: column;

  @media screen and (max-width: 768px) {
    row-gap: 16px;
  }
}

.rating-sidebar__headline {
  display: flex;
  column-gap: 18px;
  align-items: start;

  @media screen and (max-width: 768px) {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--primary-grey-opacity6);
  }
}

/* LPD-17 Э7: оценка — первое, что читается в блоке. Была строкой «Рейтинг 5.0»
   в 20px рядом с декоративной картинкой-кавычкой (test/rating-quote.png, 82px);
   картинка снята вместе с разметкой — место отдано самой оценке. */
.rating-sidebar__score {
  font-size: var(--fs-40);
  font-weight: var(--fw-extrabold);
  font-family: var(--font-2);
  line-height: var(--leading-none);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.rating-sidebar__info {
  display: flex;
  row-gap: 4px;
  flex-direction: column;
}

.rating-sidebar__text {
  font-weight: var(--fw-regular);
  font-size: var(--fs-13);
  font-family: var(--font);
  color: var(--color-text-muted);
}

.rating-sidebar__providers {
  display: flex;
  row-gap: 24px;
  flex-direction: column;

  @media screen and (max-width: 768px) {
    column-gap: 60px;
    flex-direction: row;
  }
}

.rating-sidebar__provider {
  display: flex;
  column-gap: 12px;
  align-items: end;

  @media screen and (max-width: 768px) {
    row-gap: 5px;
    align-items: start;
    flex-direction: column;
  }
}

.rating-sidebar__provider-logo {
  min-width: 100px;
}
.rating-sidebar__provider-logo img {
  width: initial;
}

.rating-sidebar__provider-link {
  transform: translateY(-6px);

  @media screen and (max-width: 768px) {
    transform: none;
  }
}

/* LPD-19 (A-03): ссылка на отзывы провайдера была 22px в высоту. */
.rating-sidebar__provider-link .link {
  @media screen and (max-width: 768px) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

.rating-sidebar__list {
  position: relative;
  display: flex;
  row-gap: 4px;
  flex-direction: column;
}
.rating-sidebar__list::before {
  content: '';
  display: block;
  position: absolute;
  top: -30px;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--primary-grey-opacity6);

  @media screen and (max-width: 768px) {
    display: none;
  }
}
.rating-sidebar__item {
  display: flex;
  column-gap: 8px;
  align-items: center;
}
.rating-sidebar__total {
  min-width: 50px;
  font-weight: var(--fw-regular);
  font-size: 0.688rem;
  font-family: var(--font);
  color: var(--primary-grey5);
}
.rating-sidebar__progress {
  width: 100%;
  height: 4px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background-color: var(--primary-grey-opacity6);
}
.rating-sidebar__progress-bar {
  width: 0;
  height: 100%;
  background-color: var(--primary-blue);
}
.rating-sidebar__count {
  min-width: 30px;
  font-weight: var(--fw-regular);
  font-size: 0.688rem;
  font-family: var(--font);
  color: var(--primary-grey5);
}
/* /catalog/view/theme/LESPROM/template/_blocks/reviews/item/detail/style.css */
/* LPD-17 Э7 (ТЗ §6.4): карточка отзыва — поверхность, звёзды, текст, подвал с
   купленным товаром. Обложка-градиент с одной буквой во всю ширину снята вместе
   с разметкой: буква была первой буквой НАЗВАНИЯ ТОВАРА, то есть заполнителем
   пустоты поверх неверных данных (§2 п. 10). */
.reviews-item-detail {
  /* Карточки одной высоты: ширину задаёт слайд, высоту тянет строка слайдера,
     подвал прижат книзу — «Читать полностью» больше не болтается на трёх уровнях. */
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
}

.reviews-item-detail__rating {
  margin-bottom: 12px;
}
.reviews-item-detail__rating .rating-stars {
  display: flex;
  column-gap: 2px;
}
.reviews-item-detail__rating .rating-star .icon {
  --icon-size: 16px;
}

.reviews-item-detail__text {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;

  font-size: var(--fs-15);
  font-weight: var(--fw-regular);
  font-family: var(--font);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}

.reviews-item-detail__open {
  margin-top: 8px;
  width: max-content;
}
.reviews-item-detail__open .link {
  --link-font-size: var(--fs-14);

  /* LPD-19 (A-03): «Читать полностью» было 123×19 — тач-цель вдвое ниже нормы.
     Высота настоящая, не псевдоэлемент: ссылка одна в своём контейнере, накладываться
     не на что, а невидимая зона в списке отзывов сбивала бы попадание по соседней
     карточке. Только мобильная ширина — на десктопе указатель точный. */
  @media screen and (max-width: 768px) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* Подвал: миниатюра купленного товара + его название + автор и дата отзыва */
.reviews-item-detail__foot {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  column-gap: 12px;
  align-items: center;
  border-top: 1px solid var(--color-hairline);
}
.reviews-item-detail__product-image {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--color-surface-sunken);
}
.reviews-item-detail__product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reviews-item-detail__product {
  min-width: 0;
}
.reviews-item-detail__product-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;

  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-normal);
  color: var(--color-text);
}
.reviews-item-detail__meta {
  margin-top: 2px;
  display: flex;
  column-gap: 8px;
  flex-wrap: wrap;
  font-size: var(--fs-13);
  color: var(--color-text-muted);
}
.reviews-item-detail__date {
  font-variant-numeric: tabular-nums;
}

/* Раскрытие в попапе: карточка показывается целиком, без рамки и клэмпа */
#reviews_item_detail {
  --popup-container-padding: 46px;
}
#reviews_item_detail .reviews-item-detail {
  height: auto;
  border: 0;
  padding: 0;
}
#reviews_item_detail .reviews-item-detail__text {
  display: block;
}
#reviews_item_detail .reviews-item-detail__open {
  display: none;
}

/* /catalog/view/theme/LESPROM/template/_blocks/reviews/carousel/style.css */
.reviews-carousel {
  padding: 60px 0;
  background-color: var(--primary-white-grey);

  @media screen and (max-width: 768px) {
    padding: 30px 0;
  }
}
/* .reviews-carousel::before {
  content: '';
  z-index: -1;
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  width: 2000vw;
  transform: translateX(-50%);
  background-color: var(--primary-white-grey);
} */
.reviews-carousel > .container {
  display: flex;
  row-gap: 24px;
  flex-direction: column;
}

.reviews-carousel__container {
  display: flex;
  column-gap: 24px;
  align-items: stretch;

  @media screen and (max-width: 768px) {
    row-gap: 40px;
    flex-direction: column;
    position: relative;
    padding-bottom: 100px;
  }
}

.reviews-carousel__sidebar {
  display: flex;
  row-gap: 60px;
  flex-direction: column;

  width: var(--reviews-carousel-sidebar-size, var(--column-size));
}
.reviews-carousel__page-all {
  margin-top: auto;

  @media screen and (max-width: 768px) {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
  }
}

.reviews-carousel__slider {
  width: 100%;
  overflow: hidden;
}