/* ══════════════════════════════════════════════════════════════════════════
   product.css — карточка товара: галерея, цена, характеристики, блок быстрой
   заявки. Поля формы приходят из forms.css, каркас и словарь кнопок — из
   components.css.

   Композиция взята из фирменного каталога заказчика (CONTEXT §specifics):
   фото на светлом фоне слева, компактный блок цены и характеристик справа.

   Ни одного литерала цвета, размера шрифта, отступа и радиуса — только
   токены tokens.css. Новых пользовательских свойств план не вводит.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══ КОМПОЗИЦИЯ ═══════════════════════════════════════════════════════════ */

.product{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-6);
  align-items:start;
}
@media (min-width:992px){
  .product{ grid-template-columns:1.1fr .9fr; gap:var(--space-7); }
}

.product-below{ margin-top:var(--space-7); }
.product-request{
  margin-top:var(--space-7);
  padding-top:var(--space-7);
  border-top:1px solid var(--color-hairline);
}
.product-request h2{ margin-bottom:var(--space-5); }
.product-below h2{ margin-bottom:var(--space-4); }


/* ══ ГАЛЕРЕЯ ══════════════════════════════════════════════════════════════
   Пропорция главного кадра фиксирована 16/10 — та же, что у фото-слота
   карточки новости, поэтому страницы не разъезжаются по высоте. Настоящее
   фото кадрируется заполнением; товар без фото занимает то же место
   брендированным плейсхолдером, отдельного состояния не проектируется. */

.gallery{ display:grid; gap:var(--space-3); }

.gallery__main{
  overflow:hidden;
  border-radius:var(--radius-card);
  background:var(--color-surface-alt);
}
.gallery__img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
}

/* Полоса миниатюр не выводится вовсе при единственном фото — пустой полосы
   в разметке не возникает (контракт zero-one-many, элемент E3). */
.gallery__thumbs{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--space-3);
}
.gallery__thumbs .thumb{ aspect-ratio:16/10; width:100%; }
.gallery__thumbs .thumb[aria-current]{ outline:2px solid var(--color-accent); outline-offset:2px; }


/* ══ ПРАВАЯ КОЛОНКА: ЦЕНА, ДЕЙСТВИЕ, ХАРАКТЕРИСТИКИ ═══════════════════════ */

.product-aside{ display:grid; gap:var(--space-5); align-content:start; }

.price{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:var(--space-3);
}
/* Цена набрана начертанием заголовка. Формат «1 250,00 Б» — пробел как
   разделитель тысяч, запятая как десятичный (CAT-02), знак белорусского
   рубля ПОСЛЕ суммы через обычный пробел (выбор заказчика, строки 1 и 9
   журнала ревью); неразрывность держит white-space, а не символ, чтобы
   строка оставалась обычным текстом. Сам знак собирает правило .byn в
   components.css — здесь только кегль и начертание. */
.price__value{
  font-size:var(--text-heading);
  font-weight:var(--weight-bold);
  white-space:nowrap;
}
.price__note{ font-size:var(--text-label); color:var(--color-text-muted); }

/* Цены нет — на её месте фраза «Цена по запросу» (D-07), а не «0,00 Б»,
   не прочерк и не пустой элемент. КЕГЕЛЬ НЕ МЕНЯЕТСЯ: слот сохраняет своё
   место, и раскладка не прыгает между товаром с ценой и товаром без неё.
   Начертание падает до обычного — это фраза, а не сумма. Неразрывность
   снимается: с nowrap фраза вылезла бы за край колонки. Цвет остаётся
   обычным текстовым — --color-danger прочитался бы как ошибка,
   --color-text-muted как сноска, акцент как ссылка. */
.price__value--on-request{
  font-weight:var(--weight-regular);
  white-space:normal;
  color:var(--color-text);
}

.product-actions{ display:flex; flex-wrap:wrap; gap:var(--space-4); }

/* Характеристики — список определений, а не таблица. Перестраивать табличные
   элементы сменой типа отображения нельзя: это вычищает табличные роли из
   дерева доступности, и восстанавливать их пришлось бы вручную на каждом
   элементе. Слово «таблица» в дизайн-контракте описывает вид, а не элемент.
   Каждая пара обёрнута в свой <div> внутри <dl> — это валидная разметка и
   стандартный способ сделать пары адресуемыми сеткой. */
.specs-block h2{ margin-bottom:var(--space-3); }
.specs{ display:grid; grid-template-columns:1fr; }
.specs__row{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-1);
  padding:var(--space-3) 0;
  border-bottom:1px solid var(--color-hairline);
}
/* ОДНА СЕТКА НА ВСЮ ТАБЛИЦУ, А НЕ СВОЯ НА КАЖДУЮ СТРОКУ. Пока сеткой была
   строка, `max-content` считался для неё отдельно, и колонка подписей
   получалась своей ширины в каждой строке: значения вставали рваным краем.
   Замер до правки на карточке ХОРС ALPHA — значения начинались с 867, 895,
   915, 928, 939 и 1047, разброс 180 пикселей.

   Строка отдаёт свой бокс (`display:contents`), и обе её ячейки становятся
   прямыми потомками сетки таблицы — колонка подписей у них общая. Обёртка
   <div> собственной роли в дереве доступности не несёт, поэтому её боксу
   нечего терять; на элементе с ролью (списке, таблице) так делать нельзя.

   ЛИНЕЙКА И ОТСТУПЫ ПЕРЕЕЗЖАЮТ НА ЯЧЕЙКИ: вместе с боксом строки исчезает и
   её граница. Обе ячейки несут одинаковый вертикальный отступ и одну и ту же
   линейку, поэтому она остаётся сплошной на всю ширину таблицы. */
@media (min-width:576px){
  .specs{
    grid-template-columns:max-content 1fr;
    column-gap:var(--space-5);
    align-items:baseline;
  }
  .specs__row{
    display:contents;
  }
  .specs__row > dt,
  .specs__row > dd{
    padding:var(--space-3) 0;
    border-bottom:1px solid var(--color-hairline);
  }
  .specs__row:last-of-type > dt,
  .specs__row:last-of-type > dd{ border-bottom:0; }
}
.specs__row:last-of-type{ border-bottom:0; }
.specs dt{ font-size:var(--text-label); color:var(--color-text-muted); }
/* Длинное значение переносится ВНУТРИ своей ячейки: горизонтальной прокрутки
   страницы не возникает ни на одном брейкпоинте. */
.specs dd{ overflow-wrap:anywhere; }