/* pages/product — страница товара /p/:slug (Product.dc.html): галерея
   (миниатюры-колонка + главное фото на десктопе, лента scroll-snap на
   мобильном), buy-box, аккордеон характеристик, похожие товары. Только
   var(--*) для цвета/шрифта/радиуса, как в layout.css/components.css.
   Брейкпоинт 1024px — как везде в сайте (site-header/catalog/product-card). */

.product { display: flex; flex-direction: column; gap: 24px; padding-block: 16px 48px; }
.product-head { max-width: 960px; }

.product-layout { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 1024px) {
  .product-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: start; }
}
.product-layout__info { display: flex; flex-direction: column; gap: 20px; }

/* — info block — */
.product-info__badges { display: flex; gap: 8px; }
.product-info__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.product-info__heading h1 {
  margin: 0; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 28px; line-height: 1.15;
}
/* .favorite-heart — «Save» (components/favorite-heart.gohtml, план DEV0305
   задача 1): статичная бордерная кнопка рядом с заголовком, не floating
   вариант карточки (components.css). */
.product-info__heading .favorite-heart { flex: none; border: 1px solid var(--color-divider); }
.product-info__heading .favorite-heart:hover { background: var(--color-neutral-100); }

/* — product-maker-link (ссылка под <h1> на мастера, план DEV0328, задача 2,
   спека §4; Product.dc.html:37, мобайл :147). — */
.product-maker-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-size: 14px; color: var(--color-accent-2-700); text-decoration: none;
}
.product-maker-link:hover { color: var(--color-accent-2-800); }
.product-maker-link svg { flex: none; }

/* — buy-box — */
.buybox-form { display: flex; flex-direction: column; gap: 16px; }
.buybox__price { display: flex; align-items: baseline; gap: 8px; }
.buybox__price .price { font-size: 24px; }
.buybox__vat { font-size: 12px; color: var(--color-neutral-700); }
/* — «save {amount}» под ценой набора (план DEV0313, спека §1). — */
.buybox__save { margin: 0; font-size: 13px; color: var(--color-accent-700); }
.buybox__axis { display: flex; flex-direction: column; gap: 8px; }
.buybox__axis-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-neutral-700);
}
.buybox__availability { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; }
.buybox__availability-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--color-accent-2-700); flex: none; }
.buybox__availability--out .buybox__availability-dot { background: var(--color-neutral-600); }
.buybox__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.buybox__submit { flex: 1; min-width: 200px; }
.buybox__error { margin: 0; font-size: 13px; color: var(--color-accent-700); }
/* — «упаковку можно включить в корзине» (план DEV0318, задача 3): товар уже
   добавлен, это не ошибка — обычный текст, не .buybox__error. — */
.buybox__giftwrap-notice { margin: 0; font-size: 13px; color: var(--color-neutral-700); }

/* — buybox__notice: блок «размер под предзаказ» и баннер «партия
   заполнена» (Purchase Scenarios.dc.html, Product.dc.html:163) — тот же
   вид у обоих (спека DEV0291 §6). — */
.buybox__notice {
  display: flex; gap: 12px; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg); background: var(--color-accent-100); align-items: flex-start;
}
.buybox__notice-icon { flex: none; margin-top: 1px; color: var(--color-accent-700); }
.buybox__notice-text { display: flex; flex-direction: column; gap: 4px; }
.buybox__notice-title { font-size: 14px; font-weight: 700; color: var(--color-accent-800); }
.buybox__notice-body { font-size: 13px; color: var(--color-neutral-800); }

/* color-mix 70%, не --color-neutral-600: тот же сдвиг, что уже держит
   контраст у .field-hint (components.css) — neutral-600 плашмя на 13px даёт
   3.97:1 на --color-bg (фон страницы товара), ниже порога axe color-contrast
   (AA 4.5:1); найдено make axe после включения storeapi.NotifySupported
   (план DEV0305 задача 3) — divider впервые стал достижим на реальной
   странице (раньше форма notify не рендерилась вовсе). */
.buybox__divider {
  display: flex; align-items: center; gap: var(--space-2); font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.buybox__divider-line { flex: 1; height: 1px; background: var(--color-divider); }

/* Липкая нижняя панель на мобильном (спека DEV0286 §12): те же элементы
   формы (степпер + кнопка), просто закреплены снизу вьюпорта — без второго
   экземпляра степпера/скрытого поля qty, которые разошлись бы в значении. */
@media (max-width: 1023px) {
  .buybox__actions {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; margin: 0;
    padding: var(--space-3); background: var(--color-surface); box-shadow: var(--shadow-lg);
  }
  .product { padding-bottom: 96px; }

  /* Баннер cookie (components/cookie-banner) — тоже position:fixed снизу
     экрана (z-index 100, components.css) — до согласия на куки заслонял бы
     собой кнопку «в корзину». Поднимаем его над липкой панелью только на
     странице товара (body несёт #buybox только здесь). */
  body:has(#buybox) .cookie-banner { bottom: calc(80px + var(--space-3)); }
}

/* — product-giftwrap: чекбокс «Add gift wrap» ВНЕ #buybox (план DEV0318,
   задача 3) — form="buybox-form" шлёт его тем же submit, что buy-box, узел
   не участвует в hx-swap="outerMorph" фрагмента buybox. min-height 44px —
   зона нажатия всей подписи, не только квадрата чекбокса; .checkbox
   (components.css) уже несёт фокус-стиль input:focus-visible. — */
.product-giftwrap {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding-block: 8px;
}
.product-giftwrap__text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.product-giftwrap__label { font-size: 14px; font-weight: 700; }
.product-giftwrap__sub { font-size: 12px; color: var(--color-neutral-700); }
.product-giftwrap__price { font-size: 14px; font-weight: 700; flex: none; }

.product-shipping {
  margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; color: var(--color-neutral-700);
}

/* — similar — */
.product-similar { display: flex; flex-direction: column; gap: 16px; padding-block: 24px; }
.product-similar__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 1024px) {
  .product-similar__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
}

/* — reviews-anchor (план DEV0307): «★ 4.8 · 37 reviews» под бейджем New на
   десктопе, «★ 4.8 (37)» у цены на мобильном — Product.dc.html:35,148. — */
.product-reviews-anchor {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
  color: var(--color-accent-700); text-decoration: none; width: fit-content;
}
a.product-reviews-anchor:hover { color: var(--color-accent-800); }
.product-reviews-anchor--mobile { margin: 0; color: var(--color-accent); }
.product-reviews-anchor--mobile span { color: var(--color-neutral-700); }
@media (min-width: 1024px) {
  .product-reviews-anchor--mobile { display: none; }
}
@media (max-width: 1023px) {
  .product-reviews-anchor--desktop { display: none; }
}

/* — product-reviews (блок Reviews, Product.dc.html:88-105 десктоп,
   192-204 мобильный): агрегат + сетка карточек, «Show more» под сеткой. — */
.product-reviews { display: flex; flex-direction: column; gap: 20px; padding-block: 24px; }
.product-reviews__title { margin: 0; font-size: 26px; }
.product-reviews__layout { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 1024px) {
  .product-reviews__layout { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: start; }
}

.reviews-aggregate { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.reviews-aggregate__avg { margin: 0; font-family: var(--font-heading); font-size: 40px; line-height: 1; }
.reviews-aggregate__summary { margin: 0; font-size: 14px; color: var(--color-neutral-700); }
.reviews-aggregate__empty { margin: 0; font-size: 14px; color: var(--color-neutral-700); }

.reviews-grid { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 1024px) {
  .reviews-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (max-width: 1023px) {
  .reviews-grid {
    display: flex; flex-direction: row; overflow-x: auto; margin-inline: -16px;
    padding: 0 16px 4px; scrollbar-width: none;
  }
  .reviews-grid::-webkit-scrollbar { display: none; }
  .reviews-grid .reviews-card { flex: 0 0 290px; }
  .reviews-grid .reviews-card__thumb { width: 56px; height: 56px; }
}

.reviews-more:empty { display: none; }

.product-not-found { padding-block: 48px; }

/* .product-origin* («Origin & maker») — components.css: блок рисуют и эта
   страница, и галерея /_dev/components (product/origin), тем же приёмом,
   что product-sets-card/gift-sets-card. */

/* — product-bundle-inside («What's inside», план DEV0313, задача 3):
   строка на компонент — миниатюра + название-ссылка/вариант + «N ×». — */
.product-bundle-inside { display: flex; flex-direction: column; gap: 16px; padding-block: 24px; }
.product-bundle-inside__title { margin: 0; font-size: 26px; }
.product-bundle-inside__list { display: flex; flex-direction: column; gap: var(--space-3); }
.product-bundle-inside__row {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-divider);
}
.product-bundle-inside__media {
  flex: none; width: 64px; height: 64px; border-radius: var(--radius-sm); overflow: hidden; display: block;
}
.product-bundle-inside__media img { width: 100%; height: 100%; object-fit: cover; }
.product-bundle-inside__media-placeholder { display: block; width: 100%; height: 100%; }
.product-bundle-inside__info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.product-bundle-inside__name { color: inherit; font-weight: 600; text-decoration: none; }
.product-bundle-inside__name:hover { color: var(--color-accent-700); }
.product-bundle-inside__variant { font-size: 13px; color: var(--color-neutral-700); }
.product-bundle-inside__qty { flex: none; font-size: 13px; color: var(--color-neutral-700); }

/* — product-sets («Part of these gift sets», план DEV0313, задача 3;
   раскладка docs/design/Product.dc.html:107-115: сетка 3 колонки). Сама
   карточка ("product-sets-card") переехала в components.css (план DEV0317,
   задача 2) — её же показывает collection-3f.gohtml (боксы лендинга),
   странице которого product.css не подключён. — */
.product-sets { display: flex; flex-direction: column; gap: 16px; padding-block: 24px; }
.product-sets__title { margin: 0; font-size: 26px; }
.product-sets__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 1024px) {
  .product-sets__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
}

/* — product-wholesale («Also sold wholesale», план DEV0324, задача 3, спека
   п.4; разметка docs/design/Wholesale.dc.html:57) — рядом рисуется пилюля
   trade-hint (components.css), её разметка независимая. — */
.product-wholesale {
  display: flex; gap: var(--space-3); padding: 14px 16px; border-radius: 16px;
  background: var(--color-surface); align-items: center; font-size: 13px;
}
.product-wholesale__icon {
  width: 36px; height: 36px; border-radius: 999px; background: var(--color-accent-2-200);
  color: var(--color-accent-2-800); display: grid; place-items: center; flex: none;
}
.product-wholesale__text a { margin-left: 4px; }