/* /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/noscript_order/style.css */
/* LPD-19 (U-02): сообщение о покупке без JavaScript.

   Стиль намеренно спокойный, а не тревожный: посетитель не сделал ничего плохого, ему
   просто объясняют, как купить. Поэтому нейтральная поверхность и hairline вместо
   красной рамки предупреждения.

   Блок виден только внутри <noscript>, то есть при выключенном JS. Проверять его в
   браузере нужно с отключённым JavaScript — иначе разметки не будет в DOM вовсе. */
/* Подложка — --color-surface (белая, штатная поверхность карточек). НЕ
   --color-surface-sunken: у неё в common.css стоит прямая пометка «ТЕКСТ НА НЕЙ
   ЗАПРЕЩЁН» — это фон боксов фото, скелетонов и трека ползунка. Контур берёт на себя
   роль выделения. */
.noscript-order {
  margin-top: 16px;
  padding: 16px 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  background-color: var(--color-surface);
}

.noscript-order__text {
  margin: 0;
  font-size: var(--fs-15);
  line-height: var(--leading-normal, 1.5);
  color: var(--color-text);
}

.noscript-order__phone {
  margin-top: 12px;
  font-size: var(--fs-20);
  font-weight: var(--fw-semibold);
}

/* Тач-цель: номер здесь — основной способ купить, он не должен быть мельче 44px
   (то же правило, что в A-03). */
.noscript-order__phone .phone-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-text);
  text-decoration: none;
}

.noscript-order__phone .phone-link:hover,
.noscript-order__phone .phone-link:focus-visible {
  color: var(--primary-blue);
}

.noscript-order__more {
  margin: 8px 0 0;
  font-size: var(--fs-14);
  color: var(--color-text-secondary);
}

.noscript-order__more a {
  color: var(--primary-blue);
}

/* /catalog/view/theme/LESPROM/template/_blocks/catalog/price_list/style.css */
/* PRICE LIST — прайс-лист по размерам и сортам (LPD-05 R2, новый тип, вариант B).
   Раскладка одна для десктопа и телефона: группы по размеру, внутри строки «сорт — цена».
   Отдельной десктопной таблицы нет намеренно — 16 строк одинаково читаются в обоих случаях,
   а две раскладки означали бы два места для ошибки. */
/* Верхний отступ нужен для случая, когда шкалы сортов на странице нет (у раздела нет
   сортов): тогда прайс-лист идёт сразу за сеткой карточек и без отступа липнет к ней. */
.price-list {
  margin: 32px 0;
}

/* Шкала уже отбила себя от карточек — второй отступ подряд не нужен. */
.grade-scale + .price-list {
  margin-top: 0;
}

.price-list__head {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}

.price-list__title {
  margin: 0;
  font-family: var(--font-2);
  font-size: 1.375rem;
  font-weight: var(--fw-extrabold);
  line-height: 1.25;
  color: var(--color-text);
}

.price-list__note {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
}

.price-list__family {
  margin: 18px 0 10px;
  font-family: var(--font-2);
  font-size: 1rem;
  font-weight: var(--fw-bold);
  line-height: 1.3;
  color: var(--color-text);
}

.price-list__groups {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-surface);
}

.price-list__group + .price-list__group {
  border-top: 1px solid var(--color-hairline);
}

.price-list__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 52px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
  background-color: var(--color-field);
}

.price-list__summary::-webkit-details-marker {
  display: none;
}

.price-list__summary:hover {
  background-color: var(--color-surface-sunken);
}

.price-list__summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.price-list__size {
  font-size: .9375rem;
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  color: var(--color-text);
}

.price-list__from {
  flex: none;
  font-size: .875rem;
  font-weight: var(--fw-medium);
  line-height: 1.35;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.price-list__rows {
  padding: 4px 16px 10px;
}

.price-list__row {
  display: grid;
  /* width:auto гасит глобальное `a { width: max-content }` темы: строка прайса — ссылка, и
     без сброса она растягивалась по самому длинному перечню профилей (564px при контейнере
     334) — на телефоне список профилей и цены обрезался по правому краю. */
  width: auto;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 10px 0;
  border-top: 1px solid var(--color-hairline);
  color: var(--color-text);
  text-decoration: none;
}

.price-list__rows > .price-list__row:first-child {
  border-top: 0;
}

.price-list__row:hover .price-list__grade {
  color: var(--color-accent-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.price-list__row:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.price-list__grade {
  font-size: .9375rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.price-list__stock {
  font-size: .8125rem;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--color-stock-in);
}

.price-list__stock--order {
  color: var(--color-stock-order);
}

.price-list__price {
  font-family: var(--font-2);
  font-size: .9375rem;
  font-weight: var(--fw-bold);
  line-height: 1.3;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.price-list__price s {
  margin-right: 6px;
  font-family: var(--font);
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
}

@media screen and (max-width: 768px) {
  .price-list {
    margin-bottom: 26px;
  }

  .price-list__title {
    font-size: 1.1875rem;
  }

  .price-list__summary {
    padding: 12px 14px;
  }

  .price-list__rows {
    padding: 4px 14px 10px;
  }

  /* Наличие уходит под цену: три колонки на 375px сжимают название сорта до переноса
     по буквам. Цена остаётся в правом столбце — по ней и сравнивают. */
  .price-list__row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 2px;
  }

  .price-list__stock {
    grid-column: 1;
    grid-row: 2;
    font-size: .75rem;
  }

  .price-list__price {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

/* /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/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/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/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;
}
/* /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));
  }
}