/* =====================================================================
   Нижняя часть карточки товара — стили редизайна.

   ИСТОЧНИК: docs/mockups/assets/lower/lower.css (прототип, раунд 7).
   Файл СКОПИРОВАН в тему для интеграции и пока НИГДЕ НЕ ПОДКЛЮЧЁН:
   подключение добавляется вместе с новой разметкой product.twig,
   см. docs/PRODUCT-LOWER-INTEGRATION.md.

   Пока идёт доработка — правим прототип и копируем сюда заново,
   иначе файлы разъедутся:
       cp docs/mockups/assets/lower/lower.css \
          webroot/catalog/view/theme/jazzway/stylesheet/jv-product-lower.css
   (шапку этого комментария после копирования вернуть).

   Ступени адаптива взяты у шапки товара (jv-product.css,
   .jv-product__hero): ≥1440 три колонки 1.4/1/0.85, 1200–1439 —
   1.5/1/0.72, ниже 1200 одна колонка. Ломать их врозь нельзя:
   на этом держится совпадение липкой колонки с «Приобрести продукцию».
   ===================================================================== */

/* =====================================================================
   Карточка товара — НИЖНЯЯ часть. Прототип, раунд 4.
   Hero (галерея | ключевые характеристики | приобрести) не трогаем:
   он утверждён. Всё ниже пересобрано.

   Токены — из темы (DESIGN.md): акцент #E94E1B, текст #171717,
   вторичный #303131, приглушённый #999999, плитка #F2F3F6,
   радиус 15, ритм 10/15/20.

   Один приём держит всю композицию: массив данных живёт на БЕЛОМ
   как в даташите (только волосяные разделители), а серая плитка
   остаётся редкой — ею отмечены действия и служебные сведения.
   Поэтому «пустое место» больше не читается как дыра в сером ряду.
   ===================================================================== */

.jw-lower {
  --jw-header-h: 0px;   /* высота липкой шапки сайта; кадры со страницей её задают */
  --jw-bar-h: 44px;     /* высота якорной полосы */
  --ink: #171717;
  --ink-2: #303131;
  --muted: #6b6e75;   /* было #999: на плитке 2,6:1, ниже AA */
  --label: #63666d;   /* подписи параметров: 6,3:1 против прежних 2,8:1 у #999 */
  --accent: #E94E1B;
  --accent-ink: #d1410f;
  --tile: #F2F3F6;
  --hair: #ececf0;
  --hair-strong: #d9d9d9;
  --r: 15px;
  --r-sm: 10px;
  --step-1: 10px;
  --step-2: 15px;
  --step-3: 20px;
  --step-4: 36px;
  --step-5: 56px;
  /* Вертикальные жёлоба. --gutter — сетка страницы, значение диктует
     шапка (jv-product.css), трогать нельзя: на нём держится совпадение
     липкой колонки с «Приобрести продукцию».
     --gutter-col — между двумя колонками данных. Чуть шире сеточного:
     при 20px точечный лидер левой колонки подходил к подписи правой
     вплотную. Делит полосу всё так же пополам, поэтому края колонок
     и всё, что от них считается, остаются на месте. */
  --gutter: 20px;
  --gutter-col: 36px;

  max-width: 1880px;
  margin: 0 auto;
  padding: 0 20px 80px;
  font-family: 'TT Norms Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
}

/* ---- Якорная полоса ------------------------------------------------
   Не табы: секции остаются на странице, полоса только прокручивает.
   Характеристики прятать за клик нельзя — за ними и приходят. */
.jw-anchors {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--step-4);
  margin: var(--step-4) 0 var(--step-4);
  padding: 11px 0;
  background: #fff;
  /* тень вместо сплошной линии: жёсткий бордер весил больше, чем
     разделители таблиц под ним, и полоса читалась как заголовок */
  box-shadow: 0 1px 0 rgba(23, 23, 23, .08);
}
.jw-anchors a {
  font-size: 14px;
  font-weight: 400;
  color: var(--label);
  text-decoration: none;
  padding-bottom: 10px;
  margin-bottom: -11px;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.jw-anchors a:hover { color: var(--accent-ink); }
.jw-anchors a[aria-current="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.jw-anchors .jw-anchors__spacer { flex: 1 1 auto; }
.jw-anchors__action {
  font-size: 14px;
  color: var(--accent-ink);
  text-decoration: none;
  white-space: nowrap;
}

/* ---- Секция --------------------------------------------------------- */
/* Отступ при переходе по якорю: высота липкой полосы плюс воздух.
   На страницах с липкой шапкой сайта значение поднимается до 164px
   (шапка 73 + полоса 51 + 40 воздуха) — см. кадры стенда. */
.jw-sec { margin-bottom: var(--step-5);
  scroll-margin-top: calc(var(--jw-header-h) + var(--jw-bar-h) + 20px); }
/* Тема задаёт `.jv-product__content [id] { scroll-margin-top: … }` — правило
   специфичнее нашего, и якоря уезжали бы под липкую полосу. Повторяем с той
   же специфичностью, наш файл подключён позже. */
.jw-lower .jw-sec {
  scroll-margin-top: calc(var(--jw-header-h) + var(--jw-bar-h) + 20px);
}
/* Низ живёт внутри .container карточки — свои поля и предел ширины снимаем,
   иначе к отступам контейнера добавятся ещё 20px и колонка перестанет
   совпадать с «Приобрести продукцию». */
.jv-product__content .jw-lower { max-width: none; padding-left: 0; padding-right: 0; }
.jw-sec__head {
  display: flex;
  align-items: baseline;
  gap: var(--step-2);
  margin-bottom: var(--step-3);
}
.jw-sec__head h2 { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.15; }
.jw-sec__link { margin-left: auto; font-size: 14px; color: var(--accent-ink); text-decoration: none; }
.jw-sec__link:hover { color: var(--accent-ink); }

/* Описание — одним потоком во всю ширину полосы. Строка получается
   длинной (~150 знаков на 1144px), поэтому чуть увеличен интерлиньяж:
   так глазу легче возвращаться к началу следующей строки. */
.jw-prose {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
}
.jw-prose p { margin: 0; }

/* ---- Бенто характеристик --------------------------------------------
   Плитка группы = раздел смысла (Свет, Электрика, Корпус, Условия).
   Ширина плитки считается от числа параметров в группе, поэтому
   раскладка перестраивается сама, когда 1С прислала больше или меньше. */
/* Раскладка на flex, а не на 12 колонках: базис берётся от числа
   параметров, но flex-grow растягивает группы по остатку ряда — при
   любом наборе разделов правый край ровный. На гриде с фиксированными
   span в последнем ряду оставалась пустая треть (замер на PWP-C3:
   два раздела по 4 колонки из 12, справа 530px пустоты). */
.jw-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 34px var(--gutter-col);
  align-items: flex-start;
}
.jw-specs__group { min-width: 280px; flex: 1 1 calc(50% - var(--gutter-col) / 2); }
/* классы размера остались для очень маленьких и очень больших разделов:
   раздел из трёх строк не растягиваем на половину полосы, а раздел
   на 20+ параметров имеет право занять всю ширину */
.jw-specs__group--s { flex: 1 1 300px; }
.jw-specs__group--xl { flex: 1 1 100%; }
.jw-specs__title {
  margin: 0 0 4px;
  padding-bottom: 10px;
  /* был 15/600 с чёрной чертой — весил почти как h2 и создавал
     четвёртый уровень заголовков. Теперь как th таблиц. */
  border-bottom: 1px solid var(--hair-strong);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--label);
}
/* Второй уровень подстройки: колонки внутри раздела тоже считает браузер.
   Раздел растянулся широко — строки лягут в две колонки, остался узким —
   в одну. Иначе раздел из 8 строк на 760px давал одну колонку с очень
   длинными точечными лидерами, а верхний ряд рядом шёл в две. */
.jw-rows {
  columns: 2 340px;
  column-gap: 48px;
}

.jw-rows > * { break-inside: avoid; -webkit-column-break-inside: avoid; }
.jw-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 0;
  font-size: 14px;
}
.jw-row__label { color: var(--label); }
.jw-row__value {
  color: var(--ink); text-align: right; font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;   /* «196-264» и «−20…+40» не рвём переносом */
}
.jw-row--em .jw-row__value { font-weight: 600; }

/* ---- Вводный ряд: описание и документы рядом -------------------------
   Текст держит читаемую строку (~78 знаков), а освободившаяся правая
   часть занята не воздухом, а плиткой документов — их всё равно ищут
   в первую очередь. */
.jw-intro { display: flex; flex-wrap: wrap; gap: var(--step-4); align-items: flex-start; }
.jw-intro__text { flex: 2 1 560px; min-width: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.jw-intro__text p { margin: 0; max-width: 78ch; }
.jw-intro .jw-card { flex: 1 1 360px; }

/* ---- Служебный ряд: документы, логистика, действие ------------------ */
.jw-utility {
  display: flex;
  flex-wrap: wrap;
  gap: var(--step-3);
  align-items: stretch;
}
.jw-card {
  background: var(--tile);
  border-radius: var(--r);
  padding: var(--step-3) 22px;
  min-width: 0;
}
.jw-card--wide { flex: 2 1 420px; }
.jw-card--mid { flex: 1.6 1 340px; }
.jw-card--narrow { flex: 1 1 280px; }
.jw-card__title { margin: 0 0 var(--step-2); font-size: 16px; font-weight: 700; }
.jw-card .jw-row { border-bottom-color: #e2e4ea; }

/* Документы — файлы строками, тип и вес видно сразу */
.jw-files { display: flex; flex-direction: column; gap: 8px; }
.jw-file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: #fff;
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--ink);
  transition: color .2s ease;
}
.jw-file:hover { color: var(--accent-ink); }
.jw-file svg { flex: none; }
.jw-file__name { font-size: 14px; }
.jw-file__meta { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
.jw-certs { margin-top: var(--step-2); display: flex; flex-direction: column; gap: 7px; }

/* Действие — единственное тёмное пятно на странице, поэтому его видно */
.jw-cta {
  background: var(--ink);
  border-radius: var(--r);
  padding: var(--step-3) 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  min-height: 100%;
  box-sizing: border-box;
}
.jw-cta strong { font-size: 18px; font-weight: 700; }
.jw-cta span { font-size: 13px; color: #b9bcc4; }
.jw-cta__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 14px; color: var(--accent); }

/* Горизонтальный скроллер таблиц — приём прода (.jv-logtable-scroll,
   .jv-product__models-scroll): на узких экранах таблица остаётся
   таблицей и едет вбок. Превращать её в карточки нельзя — рядом на
   сайте живут такие же таблицы, и две разные механики читались бы
   как две разные страницы. */
/* На широких экранах прокрутки быть не должно: таблица и так помещается,
   а полоса появлялась из-за вылета зебры (таблица шире своей обёртки на
   16px). Скроллер включается только там, где он нужен — на мобиле. */
.jw-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.jw-scroll::-webkit-scrollbar { height: 6px; }
.jw-scroll::-webkit-scrollbar-thumb { background: #d4d7dd; border-radius: 99px; }

/* ---- Таблица моделей серии ------------------------------------------ */
/* table-layout:auto, а не fixed: колонки таблицы моделей — это оси
   различий, их бывает до девяти, и при фиксированной раскладке заголовки
   наезжали друг на друга. Ширину задаёт содержимое, лишнее уезжает в
   горизонтальную прокрутку. */
.jw-models { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: auto; }
.jw-models th, .jw-models td { white-space: nowrap; }
.jw-models td:first-child, .jw-models th:first-child { min-width: 250px; white-space: normal; }
/* Имя модели забирает половину строки, параметры идут узкими колонками:
   иначе артикул и «Вт» разъезжаются по всей ширине 1560px и строку
   приходится читать глазами через полэкрана. */

.jw-models th {
  text-align: left;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 14px 10px 0;
  border-bottom: 1px solid var(--hair-strong);
  white-space: nowrap;
}
.jw-models td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--hair); }
/* Вт / Лм / К / IP выравниваем по правому краю: иначе 2320, 4200 и 7000
   не сравниваются по разрядам — а вся таблица ради сравнения и стоит. */
.jw-models th:nth-child(n+3), .jw-models td:nth-child(n+3) {
  text-align: right; font-variant-numeric: tabular-nums;
}
.jw-models td:last-child, .jw-models th:last-child { text-align: right; padding-right: 0; }

/* Колонка «Действия» (#499, возвращена по #725). Три значка в ряд у правого
   края: избранное, сравнение, PDF-карточка модели. Прежняя подача (.jv-mrow-*)
   уехала вместе со старой таблицей — здесь она пересобрана под jw-models:
   без заливки и рамок, как остальная таблица, цвет несут сами значки.
   Ширину колонке не задаём: table-layout здесь auto, и три значка по 30px
   меряются сами. */
/* Колонка прижата к правому краю: в таблице моделей осей бывает по восемь,
   она уезжает в прокрутку целиком (у PFL-RGB ширина 1370px при блоке 985),
   и кнопки в самом конце строки просто не показались бы. sticky держит их
   на виду, фон обязателен — иначе сквозь ячейку едут соседние колонки.
   Фон повторяет зебру низа карточки (см. .jw-lower .jw-models ниже). */
.jw-models__act-th, .jw-models__act {
  position: sticky; right: 0; z-index: 1;
  text-align: right; background: #fff;
  /* 🔴 Колонка накрывает уезжающую под неё соседнюю — так и задумано, но без
     границы это читается как сломанный заголовок: у PTR-1835 в шапке вместо
     «Цветовая температура, К» оставалась одна буква «Ц» (проверено 03.09 на
     всех ширинах). Тень слева показывает, что колонка лежит ПОВЕРХ прокрутки,
     а отступ не даёт соседнему тексту вплотную подползать под значки. */
  padding-left: 12px;
  box-shadow: -8px 0 8px -6px rgba(0,0,0,.13);
}
/* Правый край прокручиваемой таблицы гасим в прозрачность: у «Моделей серии»
   колонок бывает тринадцать, и обрезанный на краю заголовок («Ц» вместо
   «Цветовая температура, К») читался как сломанная вёрстка. Растворённый край
   говорит то же, что полоса прокрутки, но виден сразу. Тот же приём уже
   работает у мобильной полосы якорей (.jw-anchors выше). */
.jw-scroll { mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
/* Пока прокрутки нет, маска не мешает: она гасит пустое место справа. */

/* Тень оставлена безусловной. Отличить «таблица влезла» от «таблица уехала»
   в одном CSS нельзя, а заводить ради этого класс на .jw-scroll и слушать
   resize — лишний скрипт: когда прокрутки нет, колонка и так стоит у правого
   края, и тень читается просто как разделитель. */
.jw-models__act-th { text-align: right; }
.jw-models__act { white-space: nowrap; }
.jw-models__act > * {
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle; width: 30px; height: 30px; padding: 0;
  border: none; background: none; border-radius: 8px;
  color: var(--muted); cursor: pointer; transition: color .15s ease, background .15s ease;
}
.jw-models__act > * + * { margin-left: 4px; }
/* Иконки колонки приезжают из разных мест разметки и нарисованы в разных
   сетках (сердце — 22, сравнение — 41, скачивание — 24), поэтому при
   одинаковом width расходились и штрих, и размер глифа. Хуже того, сердце —
   само себе кнопка: правило выше растягивало его svg до 30×30 (штрих 2.2px
   против 1.1px у сравнения), тогда как у соседей внутри 30px-кнопки лежит
   svg 20px. В разметке выровнены viewBox и stroke-width (глиф ~15px, штрих
   1.5px), здесь сердцу возвращаем те же 20px поля внутри его 30px-бокса —
   бокс общий, чтобы ховер и площадь клика у всех трёх совпадали. */
.jw-models__act .jv-product-card__like { padding: 5px; box-sizing: border-box; }
.jw-models__act > *:hover { color: var(--accent); background: var(--tile); }
.jw-models__act > *:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* лайк в каталоге позиционируется абсолютом внутри карточки — в ячейке он в потоке */
.jw-models__act .jv-product-card__like { position: static; }
/* Активные состояния вешает jv-scripts.js сам: сердечку — .is-active, кнопке
   сравнения — .is-added (её он находит по inline-вызову compare.add и метит
   .jv-comp-adopt). Закраску сердца уже даёт глобальное правило в custom.css
   (.jv-product-card__like.is-active path), здесь остаётся сравнение. */
.jw-models__act .jw-models__act-btn.is-added { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .jw-models__act > * { transition: none; } }

.jw-models__name { color: var(--ink); text-decoration: none; }
.jw-models__name:hover { color: var(--accent-ink); }
.jw-models .is-current .jw-models__name { font-weight: 600; }
.jw-models__badge { font-size: 12px; color: var(--accent-ink); margin-left: 8px; }

/* ---- Лента карточек -------------------------------------------------- */
.jw-rail { display: flex; gap: var(--step-2); overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.jw-rail::-webkit-scrollbar { display: none; }
.jw-rail > * { flex: 0 0 auto; }
.jw-mini {
  width: 190px;
  background: var(--tile);
  border-radius: 12px;
  padding: 12px;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background .2s ease;
}
.jw-mini:hover { background: #e9ebf0; }
.jw-mini__img { height: 120px; border-radius: 8px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.jw-mini__img img { max-width: 86%; max-height: 86%; object-fit: contain; }
.jw-mini__name { font-size: 13px; line-height: 1.35; }
.jw-mini__meta { font-size: 12px; color: var(--muted); }

/* ---- Проекты --------------------------------------------------------- */
/* Проекты — лентой в одну линию, как сопутствующие в липкой колонке.
   Сеткой они делились плохо: число карточек в ряду менялось от ширины
   полосы, и хвост срывался на вторую строку и висел там один. */
.jw-projects {
  display: flex; gap: var(--step-3);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity; padding-bottom: 6px;
}
.jw-projects::-webkit-scrollbar { height: 6px; }
.jw-projects::-webkit-scrollbar-thumb { background: #d4d7dd; border-radius: 99px; }
.jw-projects .jw-project { flex: 0 0 250px; scroll-snap-align: start; }
.jw-projects .jw-project__cap { padding: 14px 14px 12px; }
.jw-projects .jw-project__cap b { font-size: 14px; }
.jw-project {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #dfe2e9;
  text-decoration: none;
  display: block;
}
.jw-project img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jw-project__cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 18px 18px 16px;
  background: linear-gradient(to top, rgba(23,23,23,.82), rgba(23,23,23,0));
  color: #fff;
}
.jw-project__cap b { display: block; font-size: 15px; font-weight: 600; line-height: 1.25; }
.jw-project__cap span { font-size: 12.5px; color: #d5d7db; }

/* =====================================================================
   ВАРИАНТ B — липкая колонка действий.
   Массив данных слева одним потоком, справа узкая колонка,
   которая едет за глазом: документы, логистика, калькулятор.
   ===================================================================== */
/* Сетка низа = сетка шапки. В шапке три колонки `1.4fr 1fr 0.85fr`
   с зазором 20 (jv-product.css, .jv-product__hero), и липкая колонка
   низа обязана лечь ровно на «Приобрести продукцию» — иначе страница
   читается как две разные сетки, поставленные друг под друга.
   Держим тот же шаблон и просто растягиваем основную колонку на две
   первые: тогда совпадение не «подогнано числом», а следует из одного
   источника — поменяются пропорции шапки, низ поедет за ними. */
.jw-lower--b .jw-split {
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.85fr;
  gap: var(--gutter);
  align-items: start;
}
.jw-lower--b .jw-main { grid-column: 1 / 3; min-width: 0; }
/* min-width:0 обязателен: без него grid-элемент растёт под собственный
   контент, и карусель сопутствующих (overflow-x:auto, 14 карточек)
   распирала колонку через всю страницу вместо того, чтобы прокручиваться. */
.jw-lower--b .jw-aside { grid-column: 3; min-width: 0; }
.jw-aside .jv-product__related-slider { min-width: 0; }
/* Липкая колонка встаёт ПОД якорной полосой, а не под верхом окна:
   иначе её заголовок («Документация») уезжает под полосу. */
/* Есть цена — подзаголовок «Купить у партнеров:» убираем: заголовок
   блока и так говорит «Приобрести», а два заголовка подряд над плитками
   логотипов дробят и без того короткий блок. Правило работает только
   там, где цена реально выведена: сосед выбирается через ~. */
.jv-product__price-block ~ .jv-product__buy-subtitle { display: none; }

/* Ужатый список партнёров: четыре плитки вместо шести. Класс вешает
   jv-scripts.js, когда содержимое колонки не помещается в высоту шапки.
   Полный список остаётся за кнопкой «Показать всех партнёров» — после
   неё скрипт ужатие снимает и больше не возвращает. */
.jw-aside.is-compact .jv-product__partners .jv-product__partner-item:nth-child(n+5) {
  display: none;
}

/* Блок покупки, переехавший в колонку, обязан занять её целиком.
   В теме у него width:50% и max-width:455px — в шапке это снимало
   правило .jv-product__hero .jv-product__buy, а вне шапки оно снова
   вступало в силу, и на широких экранах карточка сжималась вдвое
   (235px внутри колонки 471). */
.jw-aside > .jv-product__buy { width: 100%; max-width: none; }

.jw-lower--b .jw-aside {
  position: sticky;
  /* Отступ только от шапки сайта: якорная полоса живёт внутри основной
     колонки и над правой не проходит. Раньше её высота входила сюда, и
     прилипшая колонка висела на 64px ниже шапки — с виду беспричинно. */
  top: calc(var(--jw-header-h) + 20px);
  display: flex;
  flex-direction: column;
  gap: var(--step-3);
  /* Подъём в пустоту шапки: когда справа под «Приобрести» остаётся дыра
     (нет цены, мало партнёров), колонка встаёт туда и уже оттуда
     прилипает. Величину считает jv-scripts.js — она зависит от высоты
     галереи и содержимого колонки, на CSS её не выразить. */
  margin-top: var(--jw-aside-lift, 0px);
}

/* Кнопки действий, переехавшие в пустоту шапки (перенос делает
   jv-scripts.js, когда под «Приобрести продукцию» есть место).
   В шапке они становятся содержимым правой колонки и потому берут
   её ширину; свой отступ сверху задаём здесь, а не отступом соседа —
   в колонке низа расстояния держит gap. */

.jw-lower--b .jw-card { grid-column: auto; }
/* В варианте B основная колонка уже, поэтому разделы держим по два в ряд
   и в один столбец строк внутри: два столбца на 600px давали слишком
   узкие подписи с переносами. */
.jw-lower--b .jw-specs__group { flex: 1 1 calc(50% - var(--gutter-col) / 2); }
.jw-lower--b .jw-specs__group--xl { flex: 1 1 100%; }
.jw-lower--b .jw-rows { columns: auto; }
.jw-lower--b .jw-specs__group--xl .jw-rows { columns: 2 340px; }

/* ---- Адаптив ---------------------------------------------------------
   Ступени взяты у шапки товара (jv-product.css, .jv-product__hero):
   ≥1440 — три колонки 1.4/1/0.85, 1200–1439 — 1.5/1/0.72, ниже 1200 —
   шапка складывается в две колонки. Низ обязан ломаться там же, иначе
   на 1200–1439 липкая колонка перестаёт совпадать с «Приобрести
   продукцию», а ниже 1200 остаётся втрое у́же соседей. */
@media (min-width: 1200px) and (max-width: 1439px) {
  .jw-lower--b .jw-split { grid-template-columns: 1.5fr 1fr 0.72fr; }
}
@media (max-width: 1439px) {
  .jw-specs__group--l { flex: 1 1 100%; }
}
/* Ниже ~900 полоса перестаёт делиться пополам: колонка становится
   у́же 350px, и подписи вроде «Диапазон номинального рабочего
   напряжения, В» ломаются на три строки. Селектор с .jw-lower--b —
   иначе базовое правило колонок перебивает по специфичности. */
@media (max-width: 899px) {
  .jw-lower--b .jw-specs__group,
  .jw-lower--b .jw-specs__group--s,
  .jw-lower--b .jw-specs__group--m,
  .jw-lower--b .jw-specs__group--l,
  .jw-lower .jw-duo > .jw-sec { flex: 1 1 100%; max-width: none; }
  /* в одну колонку вылет полос ни к чему — прижимаем к тексту */
  .jw-lower .jw-row,
  .jw-lower .jw-specs__title,
  .jw-lower .jw-logtable,
  .jw-lower .jw-models { margin-left: 0; margin-right: 0; width: 100%; }
}
@media (max-width: 1199px) {
  .jw-lower { --step-5: 40px; --step-4: 26px; }
  .jw-specs__group--s,
  .jw-specs__group--m,
  .jw-specs__group--l { flex: 1 1 100%; }
  .jw-card--wide, .jw-card--mid, .jw-card--narrow { flex: 1 1 100%; }
  .jw-lower--b .jw-split { grid-template-columns: minmax(0, 1fr); }
  .jw-lower--b .jw-main, .jw-lower--b .jw-aside { grid-column: 1 / -1; }
  .jw-lower--b .jw-aside { position: static; margin-top: 0; }
  .jw-anchors { gap: var(--step-3); overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .jw-file, .jw-mini, .jw-anchors a { transition: none; }
}

/* =====================================================================
   Доработка варианта B (раунд 5)
   1. Сопутствующие и проекты уезжают из hero вниз — иначе правая
      колонка hero длиннее галереи и под фото остаётся 342px пустоты
      (замер на PWP-C3, 1600px: hero 923 против галереи 582).
      Без этих двух блоков hero = 599, дыра 18px.
   2. Логистика переезжает из липкой колонки в основную: у неё
      переменное число строк И переменное число уровней упаковки
      (у PWP-C3 два уровня по 8 строк, у PGX53 один по 3). В узкой
      колонке это не масштабируется, а таблицей во всю ширину — да.
      В сайдбаре остаётся только то, у чего высота ограничена:
      документы и действия.
   ===================================================================== */

.jw-logtable { width: 100%; border-collapse: collapse; font-size: 14px; }
.jw-logtable th {
  font-weight: 500; font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); text-align: right; padding: 0 0 10px 24px;
  border-bottom: 1px solid var(--hair-strong); white-space: nowrap;
}
.jw-logtable th:first-child { text-align: left; padding-left: 0; width: 44%; }
.jw-logtable td { padding: 10px 0 10px 24px; border-bottom: 1px solid var(--hair); text-align: right; }
.jw-logtable td:first-child { text-align: left; padding-left: 0; color: var(--label); }
.jw-logtable td { font-variant-numeric: tabular-nums; }
.jw-logtable tr:last-child td { border-bottom: none; }
/* 12 знаков значения на 984px ширины не нужны: строка с лидером
   длиной в пол-экрана — самая шумная на странице */
.jw-logtable { max-width: 760px; }

/* Сайдбар: высота ограничена по построению, иначе липкость ломается */
.jw-aside__more { display: block; margin-top: 10px; font-size: 13px; color: var(--accent-ink); text-decoration: none; }
.jw-ask {
  background: var(--tile); border-radius: var(--r); padding: var(--step-3) 22px;
  display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink);
}
.jw-ask strong { font-size: 16px; font-weight: 700; }
.jw-ask span { font-size: 13px; color: var(--muted); }

/* Ленты перелинковки идут в основной колонке — во всю её ширину */
.jw-lower--b .jw-rail .jw-mini { width: 200px; }

/* =====================================================================
   Раунд 6
   ===================================================================== */

/* Преимущества из 1С — чипами под описанием. Есть только у 5% товаров,
   поэтому блок обязан исчезать бесследно, а не оставлять пустой ряд. */
.jw-advs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--step-3); }
.jw-adv {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px 9px 13px; border-radius: 99px;
  background: var(--tile); font-size: 13.5px; line-height: 1.25; color: var(--ink-2);
}
.jw-adv::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); flex: none;
}

/* Сопутствующие в правой колонке — прод-блок .jv-product__related--mini.
   Он уже свёрстан под ширину «Приобрести продукцию» (356px), поэтому в
   липкой колонке живёт без правок. Здесь только снимаем внешний отступ,
   чтобы карточка встала в ритм колонки. */
/* Сопутствующие в колонке — такая же карточка, как цена и действия.
   Без контейнера блок висел в воздухе: соседи в рамках, а он голым
   заголовком с каруселью посередине колонки. */
.jw-aside .jv-product__related {
  margin: 0;
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  /* Поля ровно как у плашки цены (20px внутри такой же рамки): тогда
     правая стрелка карусели встаёт по краю кнопки «Купить онлайн», а
     заголовок — по кромке подписи «Купить у производителя». Тема ставит
     карусели padding-right:0, и стрелки липли к краю карточки. */
  padding: 16px 20px;
}
.jw-aside .jv-product__related-header { margin-bottom: 12px; }
.jw-aside .jv-product__related-header h3 { font-size: 16px; font-weight: 700; }
/* стрелки белые на белом — очерчиваем, иначе их не видно */
.jw-aside .jv-product__related-prev,
.jw-aside .jv-product__related-next {
  border: 1px solid var(--hair); border-radius: 8px;
}
.jw-aside .jv-product__related-item { padding: 0; }
/* Ширину карточки считаем от колонки, а не берём фиксированные 132px:
   иначе последняя карточка обрезается посередине и правый край фото не
   сходится с краем стрелки над ним (JW-FEEDBACK 26.08). Три штуки в ряд
   помещаются только на широкой колонке — ниже 1600 их две, иначе
   карточка ужимается до 105px и подпись рассыпается. */
/* Считаем от колонки только пока колонка узкая. Ниже 1200 сетка низа
   становится одноколоночной (.jw-lower--b .jw-split → 1fr), .jw-aside
   растягивается на всю страницу, и «две штуки в ряд» превращались в две
   карточки по 500px с фотографией 400×400: на 1088 замерено 498px при
   блоке 1048. Там карточкам нужна не доля колонки, а обычная мини-лента
   (132px, ниже по файлу), которая и так листается стрелками. */
@media (min-width: 1200px) {
  .jw-aside .jv-product__related-item {
    flex: 0 0 calc((100% - 20px) / 3);
    width: auto;
    /* max-width от темы (145px) урезал вычисленную ширину, и на 1440 пара
       карточек не добирала до края 34px — снимаем, ширину задаёт flex. */
    max-width: none;
  }
}
@media (min-width: 1200px) and (max-width: 1599px) {
  .jw-aside .jv-product__related-item { flex-basis: calc((100% - 10px) / 2); }
}
.jw-aside .jv-product__related-title { font-size: 13px; }

/* Плашка с ценой: копия из шапки, появляется, когда оригинал уехал.
   Место в потоке держим всегда (иначе колонка дёргается при появлении),
   поэтому не display:none, а прозрачность с нулевой высотой. */
.jw-buy {
  overflow: hidden;
  max-height: 0; opacity: 0;
  transition: max-height .25s ease, opacity .2s ease;
}
.jw-buy.is-on { max-height: 200px; opacity: 1; }
/* партнёров больше по высоте: шесть логотипов в два столбца */
.jw-buy--partners.is-on { max-height: 420px; }
.jw-buy--partners {
  background: var(--tile); border-radius: var(--r); padding: 16px 18px;
}
.jw-buy__title { margin: 0 0 12px; font-size: 16px; font-weight: 700; }
.jw-buy--partners .jv-product__partners { margin: 0; }
.jw-buy--partners .jv-product__partners-toggle { margin-bottom: 0; }
.jw-buy .jv-product__price-block {
  margin: 0;
  /* в шапке плашка белая на сером, здесь страница белая — без контура
     карточка растворяется и остаётся висеть одна кнопка */
  border: 1px solid var(--hair);
}
.jw-buy .jv-product__price-current { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .jw-buy { transition: none; } }

/* На мобиле копию плашки не показываем вовсе: цена и «Купить онлайн»
   и так стоят в шапке товара, а вторая плашка в потоке дала бы две
   одинаковых цены на одном экране. */
@media (max-width: 767px) {
  .jw-buy { display: none; }
}

/* Действия колонки — две кнопки в ряд, без обёртки: заголовка над ними
   нет, и карточка вокруг стала бы пустой рамкой. Контур несут сами
   кнопки — тогда они держат ряд наравне с карточками выше. */
.jw-aside__actions { display: flex; gap: 10px; }
.jw-aside__actions .jw-btn {
  flex: 1 1 0; min-width: 0; gap: 7px;
  padding: 6px 10px; font-size: 13.5px;
  /* заливка — полоса зебры, скругление — как у «Купить онлайн» (10px):
     кнопки колонки держат одну геометрию с главным действием */
  background: #f6f7f9;
  border-color: transparent;
  border-radius: 10px;
}
.jw-aside__actions .jw-btn:hover { background: #eef0f4; color: var(--accent-ink); }
/* на узкой колонке два ярлыка в строку не влезают — складываем */
@media (max-width: 1199px) {
  .jw-aside__actions { flex-wrap: wrap; }
  .jw-aside__actions .jw-btn { flex: 1 1 140px; }
}

/* Калькулятор больше не чёрный: на белой странице тёмная плитка кричала
   громче цены и кнопки покупки. Обычная плитка, акцент — только в ссылке. */
.jw-card--action .jw-card__text {
  margin: 0 0 var(--step-2); font-size: 13.5px; line-height: 1.45; color: var(--muted);
}
.jw-card__link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--accent-ink); text-decoration: none;
}
.jw-card__link:hover { color: var(--accent); }
.jw-card__link--muted { display: flex; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid #e2e4ea; color: var(--ink-2); }
.jw-card__link--muted:hover { color: var(--accent-ink); }

/* Якорная полоса встаёт под липкой шапкой сайта, а не под верхом окна */
.jw-lower .jw-anchors { top: var(--jw-header-h, 96px); }

/* =====================================================================
   Мобильная ширина (прогон на 390px)
   Таблицы — единственное, что не переживает 350px: у моделей шесть
   колонок, у логистики три. Горизонтальный скролл внутри страницы —
   плохой ответ, поэтому строка таблицы превращается в карточку,
   а подписи колонок переезжают в ячейки (data-label).
   ===================================================================== */
@media (max-width: 767px) {
  /* Поля низа карточки даёт .product (16px, как у шапки товара), поэтому
     здесь их нет: до 27.08 тут стояли свои 16px, но правило
     `.jv-product__content .jw-lower{padding-left:0}` выше по файлу их
     съедало (специфичность 0,2,0 против 0,1,0), и низ уезжал в 6px от
     края экрана — на 10px левее шапки. Хвост снизу ужат с 56 до 24px:
     под низом сразу «Популярные товары» со своими отступами, вдвоём они
     давали пустой экран. */
  .jw-lower { padding: 0 0 24px; --step-4: 22px; --step-5: 34px; }

  /* Тема на мобиле растягивает .product на 20px и сдвигает влево на 10
     (`width:calc(100% + 20px); margin-left:-10px` в jv-product.css) —
     хак под старую вёрстку низа, где у каждого блока были свои поля 10px.
     У новой разметки полей нет, и весь низ съезжал к краю экрана.
     Отменяем: страница товара — единственное место с .jw-lower. */
  #product-product .product { width: 100%; margin-left: 0; }

  /* Якорная полоса липнет обычным sticky. Раньше это было невозможно:
     custom.css ставил body{overflow-x:hidden}, body становился
     скролл-контейнером и убивал sticky у всего внутри (NOTES §132), —
     поэтому полосу фиксировал скрипт, подставляя распорку. На быстрой
     прокрутке она успевала уехать за экран и возвращалась скачком.
     27.08 правило с body снято: горизонт обрезает html{overflow-x:clip}
     из того же файла, оно для этого и заводилось. JS больше не нужен.
     Поля вынесены в margin наружу, чтобы фон шёл во всю ширину экрана,
     а ссылки стояли на тех же 16px, что и текст под полосой. */
  .jw-anchors {
    /* Смещение — высота того, что уже висит сверху. Сейчас это временная
       лента JW-FEEDBACK (публикует свою высоту в --jw-sticky-offset, 67px);
       когда ленту снимут перед запуском, переменной не будет и полоса
       встанет вплотную к верху. Шапка сайта на мобиле не липкая, её
       учитывать не нужно — на десктопе это делает отдельное правило
       выше (--jw-header-h). */
    position: sticky; z-index: 55;
    gap: 20px; margin: 20px -16px 22px; padding: 12px 16px;
    background: #fff;
    overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to right, #000 88%, transparent);
  }
  .jw-anchors::-webkit-scrollbar { display: none; }
  .jw-anchors__spacer, .jw-anchors__action { display: none; }
  .jw-anchors a { white-space: nowrap; }

  .jw-sec__head { flex-wrap: wrap; }
  /* легенда таблицы моделей на мобиле не нужна: подсветку видно и так,
     а строка съедает половину экрана над таблицей */
  .jw-sec__legend { display: none; }

  /* Смещение — селектором .jw-lower .jw-anchors, иначе его перебивает
     десктопное правило той же пары (top: var(--jw-header-h)) выше по файлу:
     специфичность 0,2,0 против 0,1,0. На мобиле --jw-header-h равен нулю
     (шапка сайта здесь не липкая), и полоса вставала вплотную к верху,
     уезжая под ленту JW-FEEDBACK. */
  .jw-lower .jw-anchors { top: var(--jw-sticky-offset, 0px); }

  /* Тень появляется только когда полоса реально прилипла — её вешает
     наблюдатель в jv-scripts.js (IntersectionObserver, без замеров на
     скролле). Без тени приклеенная полоса сливается с текстом под ней. */
  .jw-lower .jw-anchors.is-stuck { box-shadow: 0 2px 12px rgba(23, 23, 23, .10); }
  .jw-sec__head h2 { font-size: 20px; }
  .jw-sec__link { margin-left: 0; }

  /* Характеристики: один столбец, разделы друг под другом */
  .jw-specs { gap: 22px; }
  .jw-rows { columns: auto; }
  .jw-row { font-size: 13.5px; }

  /* Таблицы на мобиле — как на проде: остаются таблицами внутри
     скроллера. Первая колонка не переносится, чтобы строки не разъезжались
     по высоте (та же логика, что в #349 у логистики прода). */
  .jw-models, .jw-logtable { table-layout: auto; min-width: 520px; }
  .jw-models td, .jw-models th,
  .jw-logtable td, .jw-logtable th { font-size: 13.5px; }
  .jw-models td:first-child, .jw-logtable td:first-child,
  .jw-models th:first-child, .jw-logtable th:first-child { white-space: nowrap; }
  .jw-logtable td { white-space: nowrap; overflow: visible; text-overflow: clip; max-width: none; }
  .jw-scroll { margin: 0 -16px; padding: 0 16px; }

  /* Правая колонка идёт после контента обычным потоком */
  .jw-aside { gap: var(--step-3); }
  .jw-card { padding: 16px 18px; }
  .jw-relrow__name { font-size: 13.5px; }
  .jw-projects .jw-project { flex-basis: 210px; }
  .jw-prose { columns: auto; font-size: 14.5px; }
  .jw-advs { gap: 8px; }
  .jw-adv { font-size: 13px; padding: 8px 13px 8px 11px; }
}

/* =====================================================================
   Печать: карточку подшивают к проекту, поэтому на бумагу уходят только
   данные. Шапка сайта, подвал, якорная полоса и кнопки-действия убираются,
   фон снимается, колонки складываются в одну.
   ===================================================================== */
@media print {
  .top-header, footer, .jw-anchors,
  .jw-card--action, .jw-cta, .jw-ask, .jw-aside__actions,
  .jv-product__partner-list, .jv-product__related--mini { display: none !important; }

  .site-main.sticky { padding-top: 0 !important; }
  .jw-lower { padding: 0; max-width: none; }
  .jw-lower--b .jw-split { display: block; }
  .jw-aside, .jw-lower--b .jw-aside { position: static; margin-top: 12mm; }
  .jw-card { background: transparent; padding: 0; }

  .jw-sec { margin-bottom: 10mm; break-inside: avoid; }
  .jw-sec__head h2 { font-size: 13pt; }
  .jw-specs__group { break-inside: avoid; }
  .jw-row, .jw-logtable td, .jw-models td { font-size: 9.5pt; }
  .jw-row__label, .jw-logtable td:first-child { color: #333; }
  .jw-models tr:hover td { background: transparent; }
  .jw-models .is-current td { background: transparent; box-shadow: inset 0 0 0 1px #999; }

  a[href]::after { content: none; }   /* адреса ссылок в тексте не печатаем */
  @page { margin: 14mm 12mm; }
}

/* Отличия внутри серии оранжевым больше не помечаем и легенду не
   показываем (решение 26.08). Разметку считает контроллер, вернуть
   подсветку можно правилом на td.is-diff. */

/* Отступ от шапки до якорной полосы уменьшен втрое (было 36px) */
.jw-lower .jw-anchors { margin-top: 12px; }

/* =====================================================================
   Раунд 7 — по итогам совета (UX / визуал / данные)

   1. Документы и сертификаты вернулись в основную колонку секцией
      с якорем: разметка прода идёт как есть, поэтому «Реестр» (#695),
      срок действия каждого документа и скачивание скана на месте.
      В липкой колонке остались только действие и сопутствующие —
      теперь она короче экрана при любых данных.
   2. Три уровня заголовков разведены, строка «параметр — значение»
      читается одинаково во всей карточке, цифры табличные.
   3. У «бедного» товара правой колонки нет вовсе — вместо метра
      пустоты низ идёт одной полосой.
   ===================================================================== */

/* ---- Секция документов ----------------------------------------------
   Прод-блок приходит со своей серой подложкой и внутренними белыми
   карточками — это узнаваемо и трогать нечего. Снимаем только внешние
   поля, чтобы секция встала в общий ритм, и подтягиваем типографику
   к новой шкале. */
.jw-docs .jv-product__documentation { margin: 0; padding: 0; }
.jw-docs .jv-product__documentation-title { display: none; }   /* заголовок даёт секция */
.jw-docs .jv-product__documentation-content { margin: 0; }
.jw-docs .jv-product__certificate-date { font-variant-numeric: tabular-nums; color: var(--label); }
/* Название документа приезжает с прода серым #999 (2,6:1 на белом —
   ниже AA) и в 16px спорит с заголовками секций. Приводим к той же
   трактовке строки, что и во всей карточке: смысл тёмный, служебное
   светлое. Правка нужна и в теме — там этот цвет живёт в jv-product.css. */
.jw-docs .jv-product__certificate-main > p,
.jw-docs .jv-cert-doc p,
.jw-docs .jv-product__documentation-right-left p {
  color: var(--ink); font-size: 15px; font-weight: 500;
}
.jw-docs .jv-product__documentation-right-right p { color: var(--label); font-size: 14px; }

/* Легенда в шапке секции — до таблицы, а не после неё */
.jw-sec__legend { margin-left: auto; font-size: 13px; color: var(--label); }
.jw-sec__legend b { color: var(--accent-ink); font-weight: 600; }
.jw-sec__legend + .jw-sec__link { margin-left: var(--step-3); }

/* Липкая колонка: один серый акцент вместо трёх одинаковых плиток —
   иначе «Рассчитать освещение» и «Сопутствующие» читаются как один
   блок из трёх равных и приоритета в колонке нет. */
.jw-card--plain { background: transparent; padding: var(--step-1) 0 0; }
.jw-card--plain .jw-card__title { margin-bottom: var(--step-1); }
.jw-lower--b .jw-card--action { background: #fff; border: 1px solid var(--hair); }

/* Ширину групп НЕ ограничиваем: колонка обязана доходить до правого края
   основной полосы. С пределом 620px правая колонка не дотягивалась, и всё,
   что считает ширину от секции — «Выгрузить в XLSX», легенда моделей,
   таблица моделей — оказывалось правее данных. Длинные точечные лидеры
   в обмен на общую вертикаль — цена приемлемая. */

/* ---- Деградация: товара без сопутствующих ---------------------------
   Замер на PGX53: колонка 316px против основной 1303px — справа
   оставалось ~990px пустого столбца, почти половина высоты низа. */
.jw-lower--solo .jw-split { grid-template-columns: minmax(0, 1fr); }
.jw-lower--solo .jw-main { grid-column: 1 / -1; }
.jw-lower--solo .jw-intro .jw-card--action { align-self: flex-start; }
/* Без правой колонки полоса становится 1400px, и строка «название …
   дата … Реестр … скачать» растягивается через весь экран: связь между
   концами строки теряется. Ширину данных держим читаемой. */
.jw-lower--solo .jw-models { max-width: 1180px; }
.jw-lower--solo .jw-projects { max-width: 1180px; }

/* ---- Ряд «Логистика + документы» -------------------------------------
   У логистики значение — это число и одно слово, поэтому справа от неё
   оставалось полполосы пустоты, а документы ровно этой ширины и есть.
   Ставим рядом: строка страницы становится короче на целый экран. */
/* Геометрия — та же, что у характеристик: ряд обязан ломаться ровно
   там же, где раздел «Электрика» отделяется от «Свет», иначе колонки
   низа идут в двух разных ритмах. Отсюда и одинаковые gap/базис. */
.jw-duo {
  display: flex;
  flex-wrap: wrap;
  gap: 34px var(--gutter-col);
  align-items: flex-start;
  margin-bottom: var(--step-5);
}
/* Базис тот же, что у разделов характеристик, — ряд ломается ровно там же */
.jw-duo > .jw-sec { margin-bottom: 0; min-width: 280px; flex: 1 1 calc(50% - var(--gutter-col) / 2); }
.jw-duo .jw-logtable { max-width: none; }

/* ---- Документы: приводим прод-блок к языку низа --------------------
   На проде это белые карточки в серой плитке — приём шапки товара.
   Низ построен наоборот: данные лежат на белом, разделители волосяные,
   серым отмечены только действия. Прод-разметку оставляем ту же (при
   внедрении переезжает копипастом), меняем подачу.

   Разметка остаётся прод-овская: .documentation-left = сертификаты,
   .documentation-right = файлы. Подписи групп рисуем псевдоэлементами;
   в теме они станут обычными заголовками. */
.jw-docs .jv-product__documentation {
  padding: 0; margin: 0; background: transparent; border-radius: 0;
}
.jw-docs .jv-product__documentation-content {
  display: block;
}
.jw-docs .jv-product__documentation-left {
  padding: 0; background: transparent; border-radius: 0;
}

/* Подписи групп — той же гарнитурой, что разделы характеристик */
.jw-docs .jv-product__documentation-left-title {
  align-items: center; gap: 8px; margin: 0;
  padding-bottom: 10px; border-bottom: 1px solid var(--hair-strong);
}
/* Иконка уехала из подписи группы в начало каждой строки — как у файлов:
   значок опознаёт документ, а не заголовок, под которым и так написано
   «Сертификаты». В теме это станет обычным <svg> в строке, здесь фоном,
   чтобы не трогать прод-разметку. */
.jw-docs .jv-product__documentation-left-title svg { display: none; }
.jw-docs .jv-product__certificate-link::before {
  content: ''; flex: none; width: 18px; height: 18px; margin-right: 12px; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='%23171717' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 1.83 1.83 6.42 11 11l9.17-4.58L11 1.83Z'/%3E%3Cpath d='M1.83 15.58 11 20.17l9.17-4.59'/%3E%3Cpath d='M1.83 11 11 15.58 20.17 11'/%3E%3C/svg%3E") center / contain no-repeat;
}
.jw-docs .jv-product__documentation-left-title p {
  font-size: 12px; font-weight: 500; letter-spacing: .04em;
  text-transform: uppercase; color: var(--label);
}
.jw-docs .jv-product__documentation-right { gap: 0; margin-top: var(--step-4); }
.jw-docs .jv-product__documentation-right::before {
  content: 'Файлы';
  display: block; padding-bottom: 10px; margin-bottom: 2px;
  border-bottom: 1px solid var(--hair-strong);
  font-size: 12px; font-weight: 500; letter-spacing: .04em;
  text-transform: uppercase; color: var(--label);
}

/* Строки — одной высоты, на белом, с волосяным разделителем */
.jw-docs .jv-product__documentation-left-items { gap: 0; margin-top: 2px; }
.jw-docs .jv-product__certificate-item { border-bottom: 1px solid var(--hair); }
.jw-docs .jv-product__certificate-item:last-child { border-bottom: none; }
.jw-docs .jv-product__certificate-link { padding: 12px 0; color: var(--ink); }
.jw-docs .jv-product__documentation-right-item {
  padding: 12px 0; background: transparent; border-radius: 0;
  border-bottom: 1px solid var(--hair);
}
.jw-docs .jv-product__documentation-right-item:last-child { border-bottom: none; }

/* Имя документа: прод режет его line-clamp'ом по 353px и печатает
   20/700 — в общем ряду это весило как заголовок секции. */
.jw-docs .jv-product__certificate-link p {
  display: block; overflow: visible; max-height: none; max-width: none;
  -webkit-line-clamp: unset; line-clamp: unset;
  font-size: 15px; font-weight: 500; color: var(--ink);
}
.jw-docs .jv-product__documentation-right-left p {
  font-size: 15px; font-weight: 500; color: var(--ink);
}
.jw-docs .jv-product__documentation-right-left > svg,
.jw-docs .jv-product__documentation-right-left > .jv-product__document-icon {
  width: 18px; height: 18px; opacity: .55;
}
.jw-docs .jv-product__documentation-right-right p { font-size: 14px; font-weight: 500; color: var(--label); }
.jw-docs .jv-product__certificate-date { font-variant-numeric: tabular-nums; opacity: 1; color: var(--label); }
/* Пилюля реестра: у темы поля 7/9 при зазоре 5 — значок прижат к
   левому краю, а до текста дырка. Уравниваем поля и делаем зазор
   меньше них, тогда значок и подпись читаются как одно целое. */
.jw-docs .jv-cert-chip { color: var(--label); padding: 4px 10px; gap: 6px; }
/* min-width темы (.jv-product__certificate-link svg { min-width: 22px })
   держит коробку значка вдвое шире рисунка — оттуда и лишний воздух
   между щитом и подписью. Ширину задаём вместе со снятием min-width. */
.jw-docs .jv-cert-chip svg { width: 13px; height: 13px; min-width: 0; }
.jw-docs .jv-cert-dl svg, .jw-docs .jv-product__documentation-right-right svg { width: 18px; height: 18px; }

/* Заглушка «сертификатов нет» — тем же ритмом, без плитки внутри плитки */
.jw-docs .jv-product__documentation-empty {
  background: transparent; padding: 12px 0; gap: 10px;
}

/* Сноска о маркировке (26.08.2026). Плашка, а не мелкий шрифт: текст
   про регистрацию продавца в ГИС МТ ни к одной строке списка не привязан,
   сноска со звёздочкой висела бы без якоря. Тон — тот же --tile, что у
   остальных подложек низа карточки, чтобы блок не спорил с документами. */
/* JW-FEEDBACK #723 (27.08.2026): плашка встала не по сетке блока.
   Строки документов тема уводит на 10px левее колонки (-left-items
   margin-left:-10px) и возвращает контент внутрь своим padding — их
   подложка шире, а иконка стоит ровно по краю блока. Плашка же жила
   в своих границах с полем 18px: её фон был у́же линеек списка, а
   иконка и текст стояли на 18 и 24px правее иконок и названий
   документов. Повторяем ту же сетку: фон уходит влево на те же 10px,
   поле возвращает содержимое на край блока. Значок ужат 22 → 18px,
   зазор 14 → 12px — размеры иконок строк документа выше. */
.jw-docs__marking {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: var(--step-3); margin-left: -10px;
  padding: 16px 10px;
  background: var(--tile); border-radius: var(--r-sm);
}
.jw-docs__marking-ico { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--label); }
.jw-docs__marking-text { min-width: 0; }
.jw-docs__marking-text p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.jw-docs__marking-text p + p { margin-top: 4px; }
/* Заголовок плашки снят (JW-FEEDBACK #716): текст и так начинается со
   слова «Товар подлежит маркировке», отдельная строка над ним только
   повторяла его же. Оформление заголовка убрано вместе с ним. */

@media (max-width: 560px) {
  .jw-docs__marking { gap: 10px; padding: 14px 10px; }
}

/* Строка сертификата: пока ширины хватает — одной строкой, название
   слева, срок с «Реестром» и скачиванием справа. Меряем КОЛОНКУ, а не
   окно: в ряду с логистикой она вдвое уже вьюпорта, и порог по медиа-
   запросу врал бы в обе стороны (тот же приём прод применяет к именам
   файлов — jv-product.css, @container). */
.jw-docs { container-type: inline-size; }
.jw-docs .jv-product__certificate-main {
  display: flex; flex-direction: row; align-items: center;
  justify-content: space-between; gap: 16px;
}
.jw-docs .jv-cert-doc { min-width: 0; }
.jw-docs .jv-product__certificate-link p { white-space: normal; }
.jw-docs .jv-cert-tail { flex: none; }

/* И только когда колонка действительно узкая — хвост уходит под
   название. Обрезать имя документа нельзя: по нему его и опознают. */
@container (max-width: 430px) {
  .jw-docs .jv-product__certificate-main {
    flex-direction: column; align-items: flex-start; gap: 6px;
  }
  .jw-docs .jv-cert-doc { max-width: 100%; }
  .jw-docs .jv-cert-tail { margin-left: 0; }
}

.jw-duo > .jw-sec:last-child .jw-sec__head { flex-wrap: wrap; }

/* Логистика: длинные значения не распирают колонку.
   max-width:0 при table-layout:fixed — единственный способ удержать ячейку
   таблицы в заданной доле ширины.

   🔴 03.09.2026 многоточие заменено переносом по словам. Прежде значения
   резались в середине слова («ГОФРОКАР…», «4895205048…»), и на карточке это
   читалось как обрыв данных, а не как «здесь ещё есть текст»; полное значение
   оставалось только в title, до которого на показе никто не наведётся.
   Перенос растит строку в ВЫСОТУ, а не в ширину, — то, ради чего ставили
   max-width, сохраняется. break-word (не anywhere) рвёт внутри слова только
   когда слово не влезает целиком: «ГОФРОКАРТОН ТРЕХСЛОЙНЫЙ» встаёт в две
   строки по пробелу, штрих-код из 13 цифр помещается в одну. */
.jw-logtable { table-layout: fixed; }
.jw-logtable td:not(.jw-logtable__param) {
  max-width: 0; white-space: normal; overflow-wrap: break-word;
}
/* Колонка подписей забирает больше половины: значения упаковки короткие
   (число и слово), а «ГОФРОКАРТОН ТРЕХСЛОЙНЫЙ» всё равно уходит под
   многоточие — пусть уходит раньше и не растягивает строку. */
.jw-logtable th:first-child, .jw-logtable td:first-child { width: 56%; }

/* #722 (27.08.2026): доля подписей падает с числом колонок упаковки.
   Прежние 56% назначались «на две колонки», а колонок бывает больше: после
   отсева уровней «шт/слой/пал» (см. #648, #697) на витрине остаётся три
   колонки у 499 товаров и четыре у двух. Остаток делился поровну, и каждой
   колонке значений доставалось 14,7% при трёх и 11% при четырёх — на карточке
   это 86 и 65px. Замер на PLED-DL7 (четыре колонки): значения 65 → 97px,
   ячеек под многоточием 16 → 8; на PLED-ECO (три) — 86 → 109px. Подписи при
   этом не режутся ни на десктопе, ни на 390px.
   Класс cols-N ставит шаблон по packaging|length; всё, что больше четырёх, —
   тоже cols-4: дальше сжимать подписи некуда, дальше работает прокрутка
   .jw-scroll. Одна колонка (397 товаров) остаётся на базовых 56% — там
   ужимать подписи не за чем. Выбран заказчиком со стенда
   docs/mockups/logistics-columns.html как вариант B: сетка предсказуема от
   товара к товару, в отличие от подписей по содержимому. */
/* 🔴 04.09.2026: было 56%. После замены многоточия на перенос по словам
   значениям осталось ~107px, и «ГОФРОКАРТОН ТРЕХСЛОЙНЫЙ» рвался на четыре
   огрызка («ГОФРОКАРТ/ОН/ТРЕХСЛОЙН/ЫЙ»), а штрих-код — на две строки: вышло
   хуже многоточия. При 44% колонке значений достаётся ~137px — слово встаёт
   целиком, штрих-код в одну строку. Подписи не страдают: самая длинная
   («Вес содержимого, кг») просит 136px, а получает ~215. */
.jw-logtable.cols-2 th:first-child, .jw-logtable.cols-2 td:first-child { width: 44%; }
.jw-logtable.cols-3 th:first-child, .jw-logtable.cols-3 td:first-child { width: 44%; }
.jw-logtable.cols-4 th:first-child, .jw-logtable.cols-4 td:first-child { width: 34%; }

/* #733 «нужно расширить колонки с данными»: доля хороша на узком блоке, но
   на широком подписи забирают лишнее. Самая длинная из них — «Вес
   содержимого, кг» — просит 136px, а при 34% на блоке 657px ей достаётся
   223: 60px простаивают, пока значения режутся многоточием. От порога, где
   доля начинает переливаться через край, подписям даём потолок, остаток
   уходит значениям. Замер на PLED-DL7 (четыре колонки, блок 657px):
   значения 108 → 119px, ячеек под многоточием 8 → 4, подписи не режутся.

   Считаем по ширине САМОЙ СЕКЦИИ, а не окна: на 1920 логистика делит ряд с
   документами и получает 657px, а на 1088 разворачивается во всю ширину и
   всё равно остаётся 506 — по медиазапросу порог пришлось бы угадывать.
   Тот же приём уже работает у документов (.jw-docs ниже по файлу). */
#jv-block-logical { container-type: inline-size; }
@container (min-width: 560px) {
  .jw-logtable.cols-2 th:first-child, .jw-logtable.cols-2 td:first-child { width: 240px; }
  .jw-logtable.cols-3 th:first-child, .jw-logtable.cols-3 td:first-child { width: 200px; }
  .jw-logtable.cols-4 th:first-child, .jw-logtable.cols-4 td:first-child { width: 180px; }
}

@media print {
  /* документы уходят на бумагу вместе с данными — их и подшивают */
  .jw-docs { break-inside: avoid; }
  .jw-docs .jv-product__documentation-content { background: transparent; }
  .jw-sec__legend { color: #333; }
}


/* =====================================================================
   ПОЛОСАТЫЕ СТРОКИ — единый приём для характеристик, логистики и
   моделей серии. Выбран из четырёх опробованных подач (точечный лидер,
   линии, подложки, факты): полоса ведёт глаз надёжнее пунктира и не
   добавляет на страницу лишних контейнеров.
   ===================================================================== */

/* ---------------------------------------------------------------------
   ПОЛОСЫ — основной приём низа: строку ведёт заливка через одну.
   Скруглений нет: полоса идёт от края до края, как строка таблицы.

   Приём один на все блоки: заливка выходит на 8px за колонку, а текст
   остаётся на месте. Иначе полосы сдвигали данные вправо и они переставали
   попадать под заголовок своей секции.

   Вылет ровно 8, а не больше: жёлоб между колонками 36px, и заливка
   съедает его с обеих сторон. При вылете 12 на глаз между колонками
   оставалось 12px вместо 20 — колонки читались слипшимися.
   --------------------------------------------------------------------- */
.jw-lower .jw-row {
  gap: 16px; margin: 0 -8px; padding: 9px 8px;
}
.jw-lower .jw-row:nth-child(odd) { background: #f6f7f9; }
/* Вылет — только внутрь, к соседней колонке. По внешним краям полосы
   встают вровень с текстом: слева это край полосы страницы, справа —
   жёлоб до липкой колонки, и заливка съедала там те же 8px, из-за чего
   справа снова становилось тесно. Разделы ложатся по два в ряд, поэтому
   нечётные — левая колонка, чётные — правая. */
.jw-lower .jw-specs__group:nth-child(odd) .jw-row,
.jw-lower .jw-specs__group:nth-child(odd) .jw-specs__title,
.jw-lower .jw-duo > .jw-sec:first-child .jw-logtable,
.jw-lower .jw-duo > .jw-sec:first-child .jw-models { margin-left: 0; }
.jw-lower .jw-specs__group:nth-child(even) .jw-row,
.jw-lower .jw-specs__group:nth-child(even) .jw-specs__title,
.jw-lower .jw-duo > .jw-sec:last-child .jw-logtable,
.jw-lower .jw-duo > .jw-sec:last-child .jw-models { margin-right: 0; }
.jw-lower .jw-duo > .jw-sec:first-child .jw-logtable,
.jw-lower .jw-duo > .jw-sec:first-child .jw-models,
.jw-lower .jw-duo > .jw-sec:last-child .jw-logtable,
.jw-lower .jw-duo > .jw-sec:last-child .jw-models { width: calc(100% + 8px); }
/* Таблица моделей идёт во всю полосу — ей вылет не нужен вовсе */
.jw-lower .jw-sec#models .jw-models { margin: 0; width: 100%; }
/* На одной колонке полосы прижимаются к тексту с обеих сторон */
@media (max-width: 1199px) {
  .jw-lower .jw-row,
  .jw-lower .jw-specs__title,
  .jw-lower .jw-logtable,
  .jw-lower .jw-models { margin-left: 0; margin-right: 0; width: 100%; }
}

/* Черта под подписью раздела тянется на ту же ширину, что и полосы:
   иначе линия заканчивается на 12px раньше заливки и край раздела
   выглядит рваным. В логистике это уже так — там расширена вся таблица. */
.jw-lower .jw-specs__title {
  margin-left: -8px; margin-right: -8px; padding-left: 8px; padding-right: 8px;
}
.jw-lower .jw-row__value { margin-left: auto; }

/* Логистика и модели серии: таблицу расширяем на те же 12px в обе
   стороны, ячейки добирают их отступом — колонки не двигаются. */
/* Скроллер без вылета: отрицательные поля с внутренним отступом делали
   его на 8px шире содержимого, и под таблицей появлялась полоса
   прокрутки там, где всё помещается. Полосы зебры у таблиц и так идут
   во всю ширину строки — вылет им не нужен. */
.jw-lower .jw-scroll { margin: 0; padding: 0; }
.jw-lower .jw-logtable,
.jw-lower .jw-models { margin: 0; width: 100%; }
/* max-width обязателен: при table-layout:fixed ширины колонок заданы
   процентами, и таблица насчитывала себе на 8px больше обёртки — под
   логистикой появлялась полоса прокрутки там, где всё помещается.
   У моделей раскладка auto, там ограничение не мешает: колонок много,
   лишнее по-прежнему уезжает в прокрутку. */
.jw-lower .jw-logtable { max-width: 100%; }
.jw-lower .jw-logtable th,
.jw-lower .jw-models th { padding-left: 8px; padding-right: 8px; }
.jw-lower .jw-logtable td { border-bottom: none; padding: 10px 8px; }
.jw-lower .jw-models td { border-bottom: none; padding: 12px 8px; }
.jw-lower .jw-logtable tbody tr:nth-child(odd) td,
.jw-lower .jw-models tbody tr:nth-child(odd) td { background: #f6f7f9; }
/* липкая колонка действий держит фон своей строки: на прозрачной сквозь
   неё едут колонки осей (#725) */
.jw-lower .jw-models tbody tr:nth-child(even) .jw-models__act { background: #fff; }
.jw-lower .jw-models thead .jw-models__act-th { background: #fff; }
/* Ховера у строк нет: они ничего не открывают, а на зебре подсветка
   читалась как выделение. В таблице моделей ссылка живёт в названии,
   у неё свой ховер. */
/* Текущую модель цветом не выделяем (решение 26.08): оранжевая подложка
   спорила с акцентом кнопки покупки. Строка узнаётся по жирному имени —
   см. .jw-models .is-current .jw-models__name. */

/* Сертификаты — полосами, как остальные перечни низа: строк немного,
   но глазу нужна та же опора, что в характеристиках и логистике.
   Файлы под ними остаются на волосяных разделителях: там строка короче
   и полоса на три пункта выглядит тяжелее самого списка. */
.jw-lower .jw-docs .jv-product__certificate-item:nth-child(odd) { background: #f6f7f9; }
.jw-lower .jw-docs .jv-product__certificate-item { border-bottom: none; }
.jw-lower .jw-docs .jv-product__certificate-link { padding-left: 10px; padding-right: 10px; }
/* Полосы сертификатов выходят за колонку на 10px, значит и черта под
   подписью группы обязана выйти на столько же — иначе она заметно
   короче полос под ней. */
.jw-lower .jw-docs .jv-product__documentation-left-items,
.jw-lower .jw-docs .jv-product__documentation-left-title {
  margin-left: -10px; margin-right: -10px;
}
.jw-lower .jw-docs .jv-product__documentation-left-title { padding-left: 10px; padding-right: 10px; }
/* Вылет — только внутрь ряда, к соседней колонке. По внешнему краю
   полосы встают вровень с текстом: справа за колонкой идёт жёлоб до
   липкой колонки, и заливка вылезала туда на 10px — из-за неё полосы
   документов «выглядывали» за край основной колонки. Тот же приём уже
   работает у таблиц логистики и моделей. */
.jw-lower .jw-duo > .jw-sec:first-child .jw-docs .jv-product__documentation-left-items,
.jw-lower .jw-duo > .jw-sec:first-child .jw-docs .jv-product__documentation-left-title { margin-left: 0; }
.jw-lower .jw-duo > .jw-sec:last-child .jw-docs .jv-product__documentation-left-items,
.jw-lower .jw-duo > .jw-sec:last-child .jw-docs .jv-product__documentation-left-title { margin-right: 0; }

/* Файлы зебру НЕ получают. Там строка и так расчерчена: значок,
   название, срок, пилюля реестра, скачивание — полоса под всем этим
   добавляет шум, а не порядок. Остаются волосяные разделители. */


/* =====================================================================
   Выравнивание перечней между собой (правки по смоуку 25.08)

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

/* Подпись группы — один кегль, один вес, одна высота до черты */
.jw-lower .jw-specs__title,
.jw-lower .jw-logtable thead th,
.jw-lower .jw-models thead th,
.jw-lower .jw-docs .jv-product__documentation-left-title p,
.jw-lower .jw-docs .jv-product__documentation-right::before {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--label);
  line-height: 1.25;
}
.jw-lower .jw-specs__title,
.jw-lower .jw-logtable thead th,
.jw-lower .jw-models thead th,
.jw-lower .jw-docs .jv-product__documentation-left-title,
.jw-lower .jw-docs .jv-product__documentation-right::before {
  padding-bottom: 12px;
}
/* значок группы не должен растягивать строку подписи выше остальных */
.jw-lower .jw-docs .jv-product__documentation-left-title { align-items: center; }
.jw-lower .jw-docs .jv-product__documentation-left-title svg { width: 15px; height: 15px; }

/* Зазора между чертой и первой полосой у таблиц нет намеренно: пустая
   строка-распорка выглядела разрывом таблицы. Ту же щель у документов
   тоже убрали — перечни начинаются сразу под чертой. */
.jw-lower .jw-docs .jv-product__documentation-left-items { margin-top: 0; }

/* Названия документов — обычным весом: строка и так опознаётся значком,
   а полужирный спорил с подписью группы над ней. */
.jw-lower .jw-docs .jv-product__certificate-main > p,
.jw-lower .jw-docs .jv-cert-doc p,
.jw-lower .jw-docs .jv-product__documentation-right-left p {
  font-weight: 400;
}


/* =====================================================================
   Плашка покупки: цена сверху, кнопка во всю ширину под ней.

   Подпись кнопки «Купить у производителя» вдвое длиннее прежней
   «Купить онлайн», и в колонку 356px строка «цена + кнопка» не влезает
   ни при каких полях: 150 подписи с ценой + 230 текста кнопки + поля
   против 316 доступных. Раз перенос неизбежен — делаем его осознанным:
   кнопка занимает всю ширину, а не болтается остатком строки.

   Правило общее для обеих плашек — в шапке товара и в копии в липкой
   колонке: они должны выглядеть одинаково.
   ===================================================================== */
.jv-product__buy .jv-product__price-block,
.jw-buy .jv-product__price-block {
  flex-wrap: wrap;
  gap: 14px;
}
.jv-product__buy .jv-product__price-left,
.jw-buy .jv-product__price-left { flex: 0 1 auto; }
.jv-product__buy .jv-product__price-buy,
.jw-buy .jv-product__price-buy { flex: 1 1 120px; min-width: 0; }
/* Кегль чуть меньше, а перенос — внутрь кнопки: в одну строку подпись
   не влезает никакими полями (150 подписи с ценой + 12 зазора + 201
   кнопки при 316 доступных), зато в две строки внутри кнопки помещается
   ровно. Так ряд остаётся одной строкой, как было с «Купить онлайн». */
.jv-product__buy .jv-vendor-price__btn,
.jw-buy .jv-vendor-price__btn {
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.25;
  white-space: normal;
}


/* ---------------------------------------------------------------------
   Подсказка у обрезанного значения логистики

   «ГОФРОКАРТОН ТРЕХСЛОЙНЫЙ» не влезает в колонку и уходит под
   многоточие, полное значение лежит в title (проставляется только
   длинным значениям, см. product.twig).

   Своя подсказка на ::after не годится: таблица лежит в скроллере с
   overflow-x, и он срезал всплывающий блок — получалась чёрная полоса
   поверх соседней строки. Оставляем родную браузерную: она рисуется
   поверх страницы и ничем не обрезается.
   --------------------------------------------------------------------- */
.jw-lower .jw-logtable td[title] { cursor: help; }


/* ---------------------------------------------------------------------
   Строки документов: одинаковый отклик на наведение

   Сертификаты и файлы — один перечень, и вести себя должны одинаково:
   строка чуть уезжает вправо, подпись, «Скачать» и значок уходят в
   акцент. Значки приезжают из 1С-разметки с зашитым stroke="#999999",
   поэтому перекрашиваем через currentColor.
   --------------------------------------------------------------------- */
.jw-lower .jw-docs .jv-product__certificate-item,
.jw-lower .jw-docs .jv-product__documentation-right-item {
  transition: transform .18s ease, background-color .18s ease;
}
.jw-lower .jw-docs .jv-product__certificate-item:hover,
.jw-lower .jw-docs .jv-product__documentation-right-item:hover {
  transform: translateX(4px);
}
.jw-lower .jw-docs .jv-product__certificate-item:hover .jv-cert-doc p,
.jw-lower .jw-docs .jv-product__documentation-right-item:hover .jv-product__documentation-right-left p,
.jw-lower .jw-docs .jv-product__documentation-right-item:hover .jv-product__documentation-right-right p {
  color: var(--accent-ink);
}
.jw-lower .jw-docs .jv-product__certificate-item:hover svg path,
.jw-lower .jw-docs .jv-product__documentation-right-item:hover svg path {
  stroke: var(--accent-ink);
}
.jw-lower .jw-docs .jv-cert-dl svg path,
.jw-lower .jw-docs .jv-product__documentation-right-right svg path,
.jw-lower .jw-docs .jv-product__documentation-right-left svg path,
.jw-lower .jw-docs .jv-product__certificate-item .jv-cert-doc svg path {
  transition: stroke .18s ease;
}
.jw-lower .jw-docs .jv-product__certificate-item p,
.jw-lower .jw-docs .jv-product__documentation-right-item p {
  transition: color .18s ease;
}
/* пилюля реестра живёт своей жизнью: у неё свой ховер и своя ссылка */
.jw-lower .jw-docs .jv-cert-chip:hover { color: var(--accent-ink); border-color: var(--accent); }
.jw-lower .jw-docs .jv-product__certificate-item:hover .jv-cert-chip svg path { stroke: currentColor; }

/* =====================================================================
   Одна колонка: вылеты полос обнуляются (смоук мобилки 26.08)

   Полосы и черта под подписью выходят за колонку на 8–10px, чтобы на
   двухколоночной раскладке заливка перекрывала жёлоб. На одной колонке
   этот вылет уезжает за край экрана: на 390px контент начинается в 6px
   от кромки, и полоса сертификатов вставала в −4 — её срезал
   body{overflow-x:hidden}, слева и справа полосы были «обрублены».

   Правило про это уже есть выше (@media max-width:1199px), но его
   перебивают более поздние блоки того же файла — поэтому обнуление
   стоит В КОНЦЕ: только так оно переживает каскад.
   ===================================================================== */
@media (max-width: 1199px) {
  .jw-lower .jw-specs__title {
    margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0;
  }
  .jw-lower .jw-docs .jv-product__documentation-left-items,
  .jw-lower .jw-docs .jv-product__documentation-left-title {
    margin-left: 0; margin-right: 0;
  }
  .jw-lower .jw-docs .jv-product__documentation-left-title {
    padding-left: 0; padding-right: 0;
  }
}