/* /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/pagination/style.css */
.pagination-wrap {
  display: flex;
  row-gap: 40px;
  flex-direction: column;

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

.pagination {
  display: flex;
  column-gap: 0;
  align-items: center;
  justify-content: start;
}
.pagination--center .pagination {
  justify-content: center;
}
.pagination li {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--pagination-border-color, transparent);

  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.pagination li.active {
  --pagination-border-color: var(--primary-color);
}
.pagination li a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.pagination-arrow svg {
  width: 14px;
  height: 14px;
}
.pagination-arrow svg path {
  fill: var(--pagination-arrow-fill, var(--primary-grey5));
}
.pagination li:hover svg path {
  --pagination-arrow-fill: var(--primary-blue);
}
.pagination li:not(.pagination-arrow) {
  background-color: var(--primary-white-grey);
}
/* /catalog/view/theme/LESPROM/template/_blocks/seo/category_text/style.css */
/* SEO-ТЕКСТ СТРАНИЦЫ КАТАЛОГА (обёртка seo/category_text).
   LPD-26 (10.09.2026): вид задаёт общий блок text в раскладке split — раздел «Split-раскладка»
   в assets/css/theme.css, тот же, что у SEO-блока главной и описания товара. Прежние правила
   этой секции (метка «О разделе» с полоской, рубрика 24px, колонка 68ch, затухание поверх
   текста) удалены вместе с разметкой. Здесь — только то, что нужно страницам каталога сверх
   общего вида. */

/* Длинная группа в названии раздела. Заголовок собран из названия, а в нём бывают неразрывные
   группы по 16–19 знаков: «антисептированная», «из термолиственницы» (предлог приклеен
   неразрывным пробелом, чтобы не висел в конце строки). Жирным RF Dewi Expanded это до 15,2
   кегля — больше, чем max-width заголовка (15em), и больше колонки заголовка на 992–1279px
   (340–470px). Переносов в заголовках split нет (theme.css), поэтому такая группа рвалась
   без дефиса. Пробовали иначе: переносы — Safari делил и «дос-ка»; обёртка группы в строчный
   блок — висячее «из» и отступ перед тире.
   Теперь секция с длинной группой (модификатор и --seo-title-word ставит index.twig) держит
   её в строке: max-width растёт до ширины группы, а на двухколоночной раскладке кегль
   уменьшается ровно настолько, чтобы группа вошла в колонку (колонка — контейнер, 100cqi —
   её ширина). 0,87 кегля на знак — с запасом: замер жирного набора 0,79–0,86. Где группа и так
   входит, max() и min() оставляют обычные значения; страницы без длинных групп — как главная.
   Браузер без cqi отбросит правило кегля и покажет обычный. */
.seo-text--long-word .block-text--split .block-text__title :is(h1, h2, h3, h4) {
  max-width: max(15em, calc(var(--seo-title-word) * .87em));
}
@media screen and (min-width: 992px) {
  .seo-text--long-word .block-text--split .block-text__title {
    container-type: inline-size;
  }
  .seo-text--long-word .block-text--split .block-text__title :is(h1, h2, h3, h4) {
    font-size: min(var(--fs-32), calc(100cqi / var(--seo-title-word) / .87));
  }
}
/* На 992–1199px обычный кегль этих заголовков — 28px (theme.css), а не 32px. */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .seo-text--long-word .block-text--split .block-text__title :is(h1, h2, h3, h4) {
    font-size: min(var(--fs-28), calc(100cqi / var(--seo-title-word) / .87));
  }
}