/* ==========================================================================
   Карточка товара — макет 1:2191 (1920×5608).

   Самый сложный экран макета. Раскладка страницы:
     крошки        1:2235  y=158
     галерея       1:2192 (749×686) + 1:2193 (142×686)  y=196
     инфоблок      1:2199 (910×419)                     y=196
     цена и кнопка 1:2248 (910×207)                     y=677
     ссылки, текст 1:2243 (755×220)                     y=908
     варианты      1:2260 (1838×1575)                   y=1192
     похожие       1:2324                               y=2957

   Цвета берём только из variables.css. В макете на этом экране всплывает
   палитра чужого проекта (#E2E8F0, #314158, #CAD5E2, #F8FAFC, #9E9E9E) —
   переменных под них в теме нет и заводить их не за что: это те же
   «рамка», «текст», «приглушённый текст» и «светлый фон». Сведение
   расписано в отчёте по экрану.

   Теней нет ни одной — в макете DROP_SHADOW не встречается вообще.
   ========================================================================== */

/* --- Крошки ---------------------------------------------------------------
   Макет: крошки на y=158 при шапке высотой 136 — 22 px от её низа,
   отбивка снизу до галереи 19 px задана в .tovar__top. */

.page-head--product { padding-block: 22px 0; }
.page-head--product .breadcrumbs { margin-bottom: 0; }

/* --- Сообщения WooCommerce ------------------------------------------------
   В макете их нет, но кнопка корзины в таблице вариантов работает, и без
   подтверждения «товар добавлен» покупатель жмёт её второй раз. Оформлены
   как плашки макета: заливка, радиус 12, без тени. */

.tovar__notices ul { margin: 0; }

.tovar__notices .woocommerce-message,
.tovar__notices .woocommerce-info,
.tovar__notices .woocommerce-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16);
  margin-bottom: var(--space-16);
  padding: var(--space-16) var(--space-24);
  border-radius: var(--radius-md);
  background: var(--color-bg-soft);
  font-size: var(--fs-20);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-3);
}

.tovar__notices .woocommerce-error { color: var(--color-error); }
.tovar__notices .button { margin-left: auto; color: var(--color-brand); text-decoration: underline; }

/* --- Верхний экран: галерея + инфоблок ------------------------------------
   Макет: галерея 40…943 (903), инфоблок 970…1880 (910), между ними 27. */

.tovar__top {
  display: grid;
  grid-template-columns: minmax(0, 903fr) minmax(0, 910fr);
  gap: 27px;
  align-items: start;
  padding-top: 19px;
}

/* ==========================================================================
   Галерея — 1:2192 (фото) и 1:2193 (лента миниатюр)
   ========================================================================== */

.tovar-gallery {
  display: grid;
  grid-template-columns: minmax(0, 142fr) minmax(0, 749fr);
  gap: 12px;
  /* Фото в макете начинается на 2 px ниже инфоблока (198 против 196). */
  margin-top: 2px;
}

/* Переключатель кадра. Скрипт бы решал то же самое, но main.js — общий
   файл темы, и заводить в нём галерею ради одного экрана нельзя. */
.tovar-gallery__switch {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.tovar-gallery__thumbs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tovar-gallery__thumb {
  position: relative;
  display: block;
  aspect-ratio: 142 / 130.8;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.tovar-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tovar-gallery__thumb:hover { border-color: var(--color-brand); }

.tovar-gallery__stage {
  position: relative;
  aspect-ratio: 749 / 686;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  overflow: hidden;
}

.tovar-gallery__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

/* object-fit: contain, а не cover как в макете: фото товара обрезать
   нельзя — у арматуры важен весь силуэт, а не заполнение рамки. */
.tovar-gallery__slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tovar-gallery__switch:nth-of-type(1):checked ~ .tovar-gallery__stage .tovar-gallery__slide:nth-child(1),
.tovar-gallery__switch:nth-of-type(2):checked ~ .tovar-gallery__stage .tovar-gallery__slide:nth-child(2),
.tovar-gallery__switch:nth-of-type(3):checked ~ .tovar-gallery__stage .tovar-gallery__slide:nth-child(3),
.tovar-gallery__switch:nth-of-type(4):checked ~ .tovar-gallery__stage .tovar-gallery__slide:nth-child(4),
.tovar-gallery__switch:nth-of-type(5):checked ~ .tovar-gallery__stage .tovar-gallery__slide:nth-child(5) { opacity: 1; }

.tovar-gallery__switch:nth-of-type(1):checked ~ .tovar-gallery__thumbs .tovar-gallery__thumb:nth-child(1),
.tovar-gallery__switch:nth-of-type(2):checked ~ .tovar-gallery__thumbs .tovar-gallery__thumb:nth-child(2),
.tovar-gallery__switch:nth-of-type(3):checked ~ .tovar-gallery__thumbs .tovar-gallery__thumb:nth-child(3),
.tovar-gallery__switch:nth-of-type(4):checked ~ .tovar-gallery__thumbs .tovar-gallery__thumb:nth-child(4),
.tovar-gallery__switch:nth-of-type(5):checked ~ .tovar-gallery__thumbs .tovar-gallery__thumb:nth-child(5) { border-color: var(--color-brand); }

.tovar-gallery__switch:focus-visible ~ .tovar-gallery__thumbs .tovar-gallery__thumb { outline: 2px solid var(--color-brand); outline-offset: 2px; }

/* Один кадр — лента не нужна, фото занимает всю ширину галереи. */
.tovar-gallery--single { grid-template-columns: minmax(0, 1fr); }
.tovar-gallery--single .tovar-gallery__thumbs { display: none; }

/* ==========================================================================
   Метка наличия — 1:2204. Точка 8 px и подпись 14 Medium.
   ========================================================================== */

.tovar-stock {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  line-height: 20px;
  color: var(--color-success);
}

.tovar-stock__dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-success-dot);
}

.tovar-stock.is-out { color: var(--color-text-muted); }
.tovar-stock.is-out .tovar-stock__dot { background: var(--color-border); }

/* ==========================================================================
   Строки с точечным лидером — 1:2213 (инфоблок) и 1:4332 (в «Деталях»)
   ========================================================================== */

.spec-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  /* В макете весь блок характеристик залит с прозрачностью 78 %. */
  opacity: .78;
}

.spec-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.spec-row dt {
  flex-shrink: 0;
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-6);
  color: var(--color-text-muted);
}

/* Лидер: в макете отдельная нода-линия между подписью и значением. */
.spec-row::before {
  content: '';
  order: 1;
  flex: 1 1 auto;
  min-width: 16px;
  height: 1px;
  border-bottom: 1px dotted var(--color-border);
}

.spec-row dd {
  order: 2;
  flex-shrink: 0;
  max-width: 70%;
  margin: 0;
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-3);
  color: var(--color-text);
  text-align: right;
}

/* Внутри «Деталей» значения мельче: 16 Regular вместо 20. */
.spec-list--sm dd {
  font-size: var(--fs-16);
  letter-spacing: var(--ls-3);
}

/* ==========================================================================
   Инфоблок — 1:2199
   ========================================================================== */

.tovar-summary { display: flex; flex-direction: column; }

.tovar-summary__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 665px;
}

.tovar-summary__meta {
  display: flex;
  align-items: flex-start;
  gap: 17px;
}

.tovar-summary__sku {
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-3);
  color: var(--color-text-muted);
}

.tovar-summary__title {
  font-size: var(--fs-40);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-6);
}

/* Плашка «N вариантов товара» — 1:2208. От заголовка 24 px:
   6 px общего зазора колонки + 18 px здесь. */
.tovar-summary__variants {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-3);
}

.tovar-summary__count {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--color-border-soft);
}

.tovar-summary__specs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-top: 32px;
}

.tovar-summary__specs .spec-list { width: 100%; }

/* Ссылка «Все характеристики» — компонент `Product Link Container`.
   Правила те же, что в front-products.css, но тот файл грузится только
   на главной, а дублировать enqueue нельзя — он общий. */
.tovar .link-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  color: var(--color-brand);
  font-size: var(--fs-24);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-24);
  transition: opacity var(--dur-fast) var(--ease-out);
}

.tovar .link-more:hover { opacity: .7; }
.tovar .link-more__icon { display: flex; width: 24px; height: 24px; }
.tovar .link-more__icon svg { width: 24px; height: 24px; }

/* ==========================================================================
   Панель цены и кнопки — 1:2248 (910×207)
   ========================================================================== */

.tovar-buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* Макет: низ инфоблока 615, верх панели 677. */
  margin-top: 62px;
  min-height: 207px;
  padding: 24px;
  border-radius: var(--radius-md);
  background: var(--color-bg-soft);
}

.tovar-buy__left {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 275px;
}

.tovar-buy__price-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tovar-buy__label {
  font-size: var(--fs-20);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-3);
  color: var(--color-text-muted);
  opacity: .8;
}

.tovar-buy__price {
  font-size: var(--fs-32);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-6);
  color: var(--color-text);
}

.tovar-buy__price del { opacity: .45; font-size: var(--fs-20); }
.tovar-buy__price ins { text-decoration: none; }

.tovar-compare {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  line-height: 20px;
  color: var(--color-text-muted);
  text-decoration: underline;
  transition: color var(--dur-fast) var(--ease-out);
}

.tovar-compare:hover { color: var(--color-brand); }
.tovar-compare__icon { display: flex; width: 24px; height: 24px; }
.tovar-compare__icon svg { width: 24px; height: 24px; }

.tovar-buy__return {
  font-size: var(--fs-20);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-3);
  color: var(--color-brand);
  text-decoration: underline;
  opacity: .8;
}

/* Кнопка `Submit button container` 376×80 — геометрия из base.css.
   Ширину не фиксируем: у товаров без цены надпись длиннее («Запросить
   оптовый прайс») и в 376px обрезалась многоточием (правка 2026-09-02). */
.tovar-buy__action .cta-btn {
  width: auto;
  /* На узком экране 376px распирали бы страницу — отсюда min(). */
  min-width: min(376px, 100%);
  max-width: 100%;
}

/* Длинная надпись («Запросить оптовый прайс») целиком, без многоточия.
   Кегль на шаг меньше макетного — иначе кнопка не встаёт в один ряд
   с ценой и панель ломается в колонку. */
.tovar-buy__action .cta-btn {
  gap: var(--space-16);
  padding-left: var(--space-24);
  font-size: var(--fs-20);
  letter-spacing: var(--ls-20);
}

.tovar-buy__action .cta-btn__text {
  overflow: visible;
  text-overflow: clip;
}

/* --- Ссылки в каталог и дисклеймер — 1:2243 -------------------------------- */

.tovar-summary__links {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  /* Макет: низ панели цены 884, верх ссылок 908. */
  margin-top: 24px;
  max-width: 755px;
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  line-height: 20px;
  color: var(--color-text-muted);
}

.tovar-summary__links a { text-decoration: underline; transition: color var(--dur-fast) var(--ease-out); }
.tovar-summary__links a:hover { color: var(--color-brand); }

.tovar-summary__disclaimer {
  margin-top: 32px;
  max-width: 755px;
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-3);
  opacity: .8;
}

/* ==========================================================================
   Пилюли — «Детали», табы и фильтры (1:4276, 1:4388, 1:4398)
   ========================================================================== */

.tovar-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: var(--color-bg-soft);
  color: var(--color-brand);
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-3);
  text-align: center;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}

.tovar-pill--solid,
.tovar-pill.is-active {
  background: var(--color-brand);
  color: var(--color-text-invert);
}

.tovar-pill--sm { font-size: var(--fs-14); }

.tovar-pill:not(.is-active):hover { background: var(--color-blue-50); }
.tovar-pill--solid:hover,
.tovar-pill.is-active:hover { background: var(--color-brand-hover); }

/* ==========================================================================
   «Варианты товара» — 1:2260
   ========================================================================== */

.tovar-variants {
  /* Макет: низ дисклеймера 1128, верх блока 1192. */
  padding-top: 64px;
}

.tovar-variants__title {
  margin-bottom: 48px;
  font-size: var(--fs-40);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-6);
}

/* --- Подбор по параметрам — 1:2263 ---------------------------------------- */

.tovar-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 32px;
}

.tovar-picker__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.tovar-picker__label {
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  line-height: 24px;
  color: var(--color-text);
}

.tovar-picker__options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tovar-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  height: 56px;
  padding-inline: 24px;
  border: 1px solid var(--color-border-soft);
  border-radius: 10px;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  line-height: 24px;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.tovar-opt:hover { border-color: var(--color-brand); }

.tovar-opt.is-active {
  border-color: transparent;
  background: var(--color-brand);
  color: var(--color-text-invert);
}

/* Значение, по которому нет товаров, — в макете кнопки «46» и «60». */
.tovar-opt.is-disabled {
  background: var(--color-bg-soft);
  color: var(--color-border);
  cursor: default;
}

/* --- Таблица вариантов ----------------------------------------------------
   Сетка колонок одна на шапку и на строки: в макете центры подписей и
   значений совпадают (508 / 775 / 1051 / 1304 при контенте 1790), и две
   независимые раскладки разъедутся при первой правке. */

.tovar-row__grid {
  display: grid;
  grid-template-columns:
    minmax(0, 380fr) minmax(0, 256fr) minmax(0, 278fr)
    minmax(0, 274fr) minmax(0, 233fr) minmax(0, 369fr);
  align-items: center;
  gap: 0;
}

.tovar-table__head {
  padding: 16px 24px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--color-bg-soft);
  color: var(--color-text-muted);
  font-size: var(--fs-18);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-3);
}

.tovar-table__head .tovar-row__value,
.tovar-table__head .tovar-row__price,
.tovar-table__head .tovar-row__actions { display: block; text-align: center; }

.tovar-table__head .tovar-row__ident { display: block; }

.tovar-row { border-bottom: 1px solid var(--color-border-soft); }
.tovar-row:last-child { border-bottom: 0; }

/* Макет: контент строки 160, отбивки по 24 сверху и снизу. */
.tovar-row > .tovar-row__grid {
  min-height: 208px;
  padding: 24px;
  margin: 0;
}

.tovar-row__ident {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  min-width: 0;
}

.tovar-row__title-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
}

.tovar-row__name,
.tovar-row__sku {
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-4);
}

/* Название варианта показываем целиком: обрезка многоточием прятала половину
   («Задвижка сталь 30с64нж клиновая фл …»), правка 2026-08-18. */
.tovar-row__name {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.tovar-row__name a { transition: color var(--dur-fast) var(--ease-out); }
.tovar-row__name a:hover { color: var(--color-brand); }
.tovar-row__sku { color: var(--color-brand); }

.tovar-row__value,
.tovar-row__price {
  font-size: var(--fs-20);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-4);
  text-align: center;
}

.tovar-row__price { font-weight: var(--fw-medium); }
.tovar-row__price del { opacity: .45; font-size: var(--fs-16); }
.tovar-row__price ins { text-decoration: none; }

.tovar-row__actions {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 25px;
}

.tovar-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 222px;
}

.tovar-actions__icons { display: flex; gap: 12px; }

.tovar-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 37px;
  height: 37px;
  color: var(--color-brand);
  transition: opacity var(--dur-fast) var(--ease-out);
}

.tovar-icon-btn svg { width: 37px; height: 37px; }
.tovar-icon-btn:hover { opacity: .7; }

/* Счётчик — 1:4290. Раскладка кнопка / поле / кнопка внутри рамки 48. */
.tovar-qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 48px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.tovar-qty__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 52px;
  height: 48px;
  border: 1px solid var(--color-border-soft);
  color: var(--color-text);
  transition: background var(--dur-fast) var(--ease-out);
}

.tovar-qty__btn:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.tovar-qty__btn:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.tovar-qty__btn:hover { background: var(--color-bg-soft); }
.tovar-qty__btn svg { width: 24px; height: 24px; }

.tovar-qty__input {
  width: 100%;
  min-width: 0;
  height: 48px;
  border: 0;
  background: none;
  text-align: center;
  font-size: var(--fs-28);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-4);
  -moz-appearance: textfield;
  appearance: textfield;
}

.tovar-qty__input::-webkit-outer-spin-button,
.tovar-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.tovar-cart-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  color: var(--color-text-invert);
  transition: background var(--dur-fast) var(--ease-out);
}

.tovar-cart-btn:hover { background: var(--color-brand-hover); }
.tovar-cart-btn svg { width: 32px; height: 32px; }

/* ==========================================================================
   Раскрытая строка «Детали» — Component 17 (1:4330)
   ========================================================================== */

.tovar-details {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 0 24px 24px;
}

/* [hidden] обязателен явно: display:flex выше перебивает атрибут. */
.tovar-details[hidden] { display: none; }

.tovar-details__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
}

.tovar-details__specs { flex: 0 1 830px; min-width: 0; }

.tovar-details__aside {
  display: flex;
  flex-direction: column;
  gap: 32px;
  flex: 0 0 705px;
  min-width: 0;
}

.tovar-stocks {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.tovar-stocks__title {
  font-size: var(--fs-20);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-4);
}

.tovar-stocks__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tovar-stocks__item {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.tovar-stocks__name {
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-4);
}

/* --- Табы внутри «Деталей» ------------------------------------------------ */

.tovar-details__tabs {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 1184px;
}

.tovar-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tovar-tabs__panel {
  display: flex;
  flex-direction: column;
  gap: 27px;
}

.tovar-tabs__panel[hidden] { display: none; }

.tovar-tabs__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tovar-empty {
  font-size: var(--fs-20);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-3);
  color: var(--color-text-muted);
}

/* --- Карточки документов — 1:4405 ----------------------------------------- */

.tovar-docs {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.tovar-doc {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 426px;
  max-width: 100%;
  padding: 17px;
  border: 1px solid var(--color-border-soft);
  border-radius: 14px;
  background: var(--color-bg-soft);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.tovar-doc:hover { border-color: var(--color-brand); }

.tovar-doc__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--color-border-soft);
  color: var(--color-text-muted);
}

.tovar-doc__icon svg { width: 20px; height: 20px; }

.tovar-doc__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}

.tovar-doc__title {
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-3);
}

.tovar-doc__meta {
  font-size: 12px;
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-3);
  color: var(--color-text-muted);
}

.tovar-doc__action {
  display: flex;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-text-muted);
}

.tovar-doc__action svg { width: 20px; height: 20px; }

/* ==========================================================================
   Мини-карточка товара — компонент `image 162` (220.8×345.8)

   Не `.product-card` каталога: в макете у карточки нет серой подложки
   и внутреннего отступа — серым залита только плитка фото.
   ========================================================================== */

.tovar-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

.tovar-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.tovar-card__media {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  background: var(--color-bg-soft);
  overflow: hidden;
}

.tovar-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--dur-card) var(--ease-out);
}

.tovar-card:hover .tovar-card__media img { transform: scale(1.04); }

.tovar-card__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-left: 4px;
  min-width: 0;
}

.tovar-card__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.tovar-card__title {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: var(--fs-20);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-3);
}

.tovar-card__supplier {
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-3);
  color: var(--color-text-muted);
}

.tovar-card__price {
  font-size: var(--fs-20);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-3);
  color: var(--color-brand);
}

/* Надпись вместо цены длиннее суммы — в узкой мини-карточке ставим мельче. */
.tovar-card__price--request {
  font-size: var(--fs-16);
  letter-spacing: var(--ls-16);
}

.tovar-card__price del { opacity: .45; font-size: var(--fs-14); }
.tovar-card__price ins { text-decoration: none; }

/* ==========================================================================
   Описание товара (в макете отдельной секции нет — блок редактора WP)
   ========================================================================== */

.tovar-description { padding-top: 64px; }

.tovar-description__body {
  max-width: 1240px;
  font-size: var(--fs-20);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-3);
}

.tovar-description__body p + p { margin-top: var(--space-16); }

/* ==========================================================================
   Лента «Похожие товары» — 1:2324
   ========================================================================== */

.tovar-similar {
  /* Макет: низ блока вариантов 2767, заголовок ленты 2957. */
  padding-top: var(--section-gap);
}

.tovar-similar__title {
  margin-bottom: 64px;
  font-size: var(--fs-48);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-6);
  text-align: center;
}

.tovar-similar__carousel { position: relative; }

.tovar-similar__switch {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.tovar-similar__viewport { overflow: hidden; }

.tovar-similar__track {
  display: flex;
  transition: transform var(--dur-base) var(--ease-out);
}

.tovar-similar__page {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

.tovar-similar__switch:nth-of-type(2):checked ~ .tovar-similar__viewport .tovar-similar__track { transform: translateX(-100%); }
.tovar-similar__switch:nth-of-type(3):checked ~ .tovar-similar__viewport .tovar-similar__track { transform: translateX(-200%); }
.tovar-similar__switch:nth-of-type(4):checked ~ .tovar-similar__viewport .tovar-similar__track { transform: translateX(-300%); }

.tovar-similar__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 48px;
}

/* Из стопки стрелок показана та, что относится к текущей странице:
   так «назад» и «вперёд» остаются относительными без единой строки JS. */
.tovar-similar__arrows > * { display: none; }

.tovar-similar__switch:nth-of-type(1):checked ~ .tovar-similar__controls .tovar-similar__arrows > *:nth-child(1),
.tovar-similar__switch:nth-of-type(2):checked ~ .tovar-similar__controls .tovar-similar__arrows > *:nth-child(2),
.tovar-similar__switch:nth-of-type(3):checked ~ .tovar-similar__controls .tovar-similar__arrows > *:nth-child(3),
.tovar-similar__switch:nth-of-type(4):checked ~ .tovar-similar__controls .tovar-similar__arrows > *:nth-child(4) { display: flex; }

.tovar-similar__arrow {
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  color: var(--color-text-invert);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}

.tovar-similar__arrow:hover { background: var(--color-brand-hover); }
.tovar-similar__arrow svg { width: 34px; height: 34px; }

.tovar-similar__arrows--prev .tovar-similar__arrow svg { transform: rotate(180deg); }

.tovar-similar__arrow.is-disabled {
  background: var(--color-border-soft);
  color: var(--color-text-muted);
  cursor: default;
}

.tovar-similar__dots {
  display: flex;
  align-items: center;
  gap: 14.33px;
  padding: 14.33px 21.5px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-soft);
}

.tovar-similar__dot {
  width: 14.33px;
  height: 14.33px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}

.tovar-similar__switch:nth-of-type(1):checked ~ .tovar-similar__controls .tovar-similar__dot:nth-child(1),
.tovar-similar__switch:nth-of-type(2):checked ~ .tovar-similar__controls .tovar-similar__dot:nth-child(2),
.tovar-similar__switch:nth-of-type(3):checked ~ .tovar-similar__controls .tovar-similar__dot:nth-child(3),
.tovar-similar__switch:nth-of-type(4):checked ~ .tovar-similar__controls .tovar-similar__dot:nth-child(4) { background: var(--color-brand); }

/* ==========================================================================
   Ниже 1920 px

   Мобильной и планшетной версий в макете нет (все 42 ноды нарисованы
   под 1920) — брейкпоинты приняты вёрсткой и ждут согласования.
   ========================================================================== */

@media (max-width: 1700px) {
  /* Таблица не сжимается бесконечно: шесть колонок с кнопками требуют
     минимум ~1200, ниже — горизонтальная прокрутка внутри блока.
     overflow-x: clip на секции обязателен: без него ширина таблицы
     всё равно протекает в корневой скроллер и страница едет вбок. */
  .tovar-variants { overflow-x: clip; }
  .tovar-table { overflow-x: auto; }
  .tovar-table__head,
  .tovar-table__body { min-width: 1200px; }

  .tovar-similar__page { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 1500px) {
  .tovar-buy { flex-wrap: wrap; }
  .tovar-buy__left { width: auto; }
  .tovar-details__specs,
  .tovar-details__aside { flex: 1 1 380px; }
  .tovar-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1200px) {
  .tovar__top { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .tovar-gallery { margin-top: 0; }
  .tovar-summary__head { max-width: none; }
  .tovar-similar__page { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tovar-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tovar-details__top { flex-direction: column; }
  .tovar-details__specs,
  .tovar-details__aside { flex: 1 1 auto; width: 100%; }
}

@media (max-width: 900px) {
  .tovar-summary__title { font-size: var(--fs-28); }
  .tovar-variants__title,
  .tovar-similar__title { font-size: var(--fs-32); }
  .tovar-buy__price { font-size: var(--fs-24); }
  .tovar-similar__page { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tovar-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tovar-similar { padding-top: var(--space-64); }

  /* Таблица шириной 1200 на телефоне бессмысленна: строка разворачивается
     в карточку, шапка убирается, подписи колонок переезжают к значениям —
     они уже лежат в разметке как .screen-reader-text. */
  .tovar-variants { overflow-x: visible; }
  .tovar-table { overflow-x: visible; }
  .tovar-table__head { display: none; }
  .tovar-table__body { min-width: 0; }

  .tovar-row > .tovar-row__grid {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    gap: var(--space-16);
    padding: var(--space-24) 0;
  }

  .tovar-row__value,
  .tovar-row__price { text-align: left; }

  .tovar-row__value .screen-reader-text {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    color: var(--color-text-muted);
  }

  .tovar-row__actions { justify-content: flex-start; }
  .tovar-details { padding: 0 0 var(--space-24); }
}

@media (max-width: 640px) {
  .tovar-gallery { grid-template-columns: minmax(0, 1fr); }
  .tovar-gallery__thumbs { flex-direction: row; }
  .tovar-gallery__thumb { flex: 1 1 0; }
  .tovar-buy { min-height: 0; }
  .tovar-buy__action,
  .tovar-buy__action .cta-btn { width: 100%; }
  /* Узкий экран: надпись переносится на две строки — оставляем читаемый
     кегль и выравниваем текст по левому краю кнопки. */
  .tovar-buy__action .cta-btn { padding-left: var(--space-24); }
  .tovar-buy__action .cta-btn__text { white-space: normal; }
  .tovar-similar__page { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tovar-cards { grid-template-columns: minmax(0, 1fr); }
  .tovar-summary__title { font-size: var(--fs-24); }
  .spec-row dd { max-width: 60%; }
}

/* --- Телефон: размеры, не попавшие в блоки выше ---------------------------- */
@media (max-width: 700px) {
  .tovar-qty__input { font-size: var(--fs-20); }
  .tovar .link-more { font-size: var(--fs-18); }
  .tovar-details { gap: var(--space-24); }
  .tovar-variants,
  .tovar-description { padding-top: var(--space-32); }
}