/*
 * СТРАНИЦА ТОВАРА.
 *
 * Слева галерея, справа блок покупки — как на маркетплейсах, к которым
 * покупатель привык. На телефоне всё в одну колонку плюс липкая панель
 * с ценой и кнопкой внизу.
 */

/* Три колонки по макету: галерея, описание с характеристиками и карточка
   покупки. Всё, что нужно для решения «беру», собрано справа и не
   перемешано с описанием. */
.woocommerce div.product {
  display: grid;
  /* Галерея уже описания: в макете она занимает примерно две пятых
     ширины, а не половину. При равных колонках название товара рвалось
     на четыре строки. */
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
  gap: 24px;
  align-items: start;
}

.woocommerce div.product > .summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: 20px;
  align-items: start;
}

/* Плашка скидки — поверх фото. Без этого она становится обычной ячейкой
   сетки и растягивается красной полосой во всю ширину колонки. */
.woocommerce div.product > .onsale {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  margin: 0;
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--st-color-sale);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  min-width: 0;
  min-height: 0;
}

.woocommerce div.product { position: relative; }

.woocommerce div.product > .woocommerce-product-gallery { grid-column: 1; margin: 0; width: auto !important; }
.woocommerce div.product > .summary { grid-column: 2; margin: 0; width: auto !important; }

/* Всё, что ниже покупки — описание, характеристики, отзывы, рекомендации —
   занимает страницу целиком. */
.woocommerce div.product > .woocommerce-tabs,
.woocommerce div.product > .related,
.woocommerce div.product > .upsells,
.woocommerce div.product > .up-sells { grid-column: 1 / -1; }

/* ─── Галерея ────────────────────────────────────────────────────────────── */

.woocommerce div.product div.images img {
  border-radius: var(--st-radius-section);
  background: var(--st-color-surface-soft);
  /* Упаковку не обрезаем и не растягиваем. */
  object-fit: contain;
  aspect-ratio: 1 / 1;
}

.woocommerce div.product div.images .flex-control-thumbs { margin-top: 10px; gap: 8px; display: flex; flex-wrap: wrap; }
.woocommerce div.product div.images .flex-control-thumbs li { width: 72px; margin: 0; }
.woocommerce div.product div.images .flex-control-thumbs img { border: 1px solid var(--st-color-border); border-radius: var(--st-radius-control); }

/* ─── Правая колонка ─────────────────────────────────────────────────────── */

.woocommerce div.product .product_title {
  font-size: 26px;
  font-weight: var(--st-weight-heading);
  line-height: 1.25;
  margin: 0 0 8px;
}

.st-product__idline {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--st-color-text-muted);
}

.st-product__sku b { color: var(--st-color-text); font-weight: 500; }
.st-product__reviews-link { color: var(--st-color-primary); }

.woocommerce div.product .woocommerce-product-rating { margin-bottom: 10px; }
.woocommerce div.product .star-rating { color: var(--st-color-rating); }

.woocommerce div.product p.price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 16px;
  font-size: 30px;
  font-weight: 600;
  color: var(--st-color-sale);
}

.woocommerce div.product p.price del {
  font-size: 18px;
  font-weight: 400;
  color: var(--st-color-text-muted);
  opacity: 1;
}

.woocommerce div.product p.price ins { text-decoration: none; color: var(--st-color-sale); }

/* Товар без скидки: цена обычным цветом, а не «распродажным». */
.woocommerce div.product p.price:not(:has(del)) { color: var(--st-color-text); }

.woocommerce div.product .stock { font-weight: 500; }
.woocommerce div.product .stock.in-stock { color: var(--st-color-success); }
.woocommerce div.product .stock.out-of-stock { color: var(--st-color-sale); }

/* ─── Краткие характеристики ─────────────────────────────────────────────── */

.st-specs {
  margin: 0 0 8px;
  border: 1px solid var(--st-color-border);
  border-radius: var(--st-radius-section);
  overflow: hidden;
}

.st-specs__row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 12px;
  padding: 9px 14px;
  font-size: 14px;
}

.st-specs__row:nth-child(odd) { background: var(--st-color-surface-soft); }
.st-specs__row dt { margin: 0; color: var(--st-color-text-muted); font-weight: 400; }
.st-specs__row dd { margin: 0; }

.st-specs__more { display: inline-block; margin-bottom: 18px; font-size: 14px; color: var(--st-color-primary); }

/* ─── Покупка ────────────────────────────────────────────────────────────── */

.woocommerce div.product form.cart {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  /* Перенос обязателен: «Купить сейчас» третьим элементом в одну строку с
     количеством ужала бы «В корзину» до нечитаемой ширины. */
  flex-wrap: wrap;
}

/* Таблица вариаций — блок во всю ширину формы, а не сосед поля количества.
   Без этого выбор размера встаёт в одну строку с кнопкой и разъезжается. */
.woocommerce div.product form.cart table.variations,
.woocommerce div.product form.cart .woocommerce-variation,
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart { flex: 1 1 100%; }

.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.woocommerce div.product form.cart .quantity input.qty {
  width: 72px;
  height: 46px;
  padding: 0 8px;
  border: 1px solid var(--st-color-border);
  border-radius: var(--st-radius-control);
  text-align: center;
}

.woocommerce div.product form.cart .button { flex: 1 1 auto; min-height: 46px; }

/* Занимает всю строку под «В корзину»: действие равное по важности, но
   выбирают его реже — поэтому вторичным стилем и ниже. */
.woocommerce div.product form.cart .st-buy__now {
  flex: 1 1 100%;
  min-height: 42px;
}

/* ─── Доставка и оплата ──────────────────────────────────────────────────── */

.st-delivery,
.st-payment {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: var(--st-radius-section);
  background: var(--st-color-surface-soft);
  font-size: 14px;
}

.st-delivery__title,
.st-payment__title { font-weight: 500; }

.st-delivery__text,
.st-payment__text { color: var(--st-color-text-muted); line-height: 1.5; }

/* ─── Избранное ──────────────────────────────────────────────────────────── */

.st-product__fav { position: relative; min-height: 40px; }

.st-product__fav .st-fav {
  position: static;
  width: auto;
  height: 40px;
  padding: 0 16px;
  gap: 8px;
  border-radius: var(--st-radius-control);
  display: inline-flex;
  align-items: center;
}

.st-fav__label { font-size: 14px; white-space: nowrap; }

/* ─── Вкладки и рекомендации ─────────────────────────────────────────────── */

/* Storefront разносит вкладки и содержимое в две колонки обтеканием:
   лента слева на 29%, панель справа на 65%. В макете лента горизонтальная
   во всю ширину, а панель под ней — отменяем обтекание у обеих. */
.woocommerce div.product .woocommerce-tabs ul.tabs,
.woocommerce div.product .woocommerce-tabs .panel {
  float: none;
  width: auto;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  padding: 0;
  margin: 0 0 24px;
  border-bottom: 1px solid var(--st-color-border);
  /* На телефоне вкладки не влезают в строку — уводим в прокрутку, а не в
     перенос: перенесённая строка выглядит как второй ряд меню. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none; }

/* Storefront собирает объёмные «язычки» из псевдоэлементов: скруглённые
   уголки, тени, рамки. В макете вкладки плоские, поэтому убираем их
   целиком — иначе поверх нашего оформления останутся чужие хвосты. */
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 10px 16px;
  /* Подчёркивание активной вкладки должно лечь поверх линии под лентой,
     а не под ней — иначе получается двойная черта. */
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--st-color-text-muted);
  font-weight: 500;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--st-color-text); }

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--st-color-primary);
  border-bottom-color: var(--st-color-primary);
}

.woocommerce div.product .woocommerce-tabs .panel {
  margin-bottom: 32px;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.woocommerce div.product .woocommerce-tabs .panel > h2 {
  font-size: 22px;
  font-weight: var(--st-weight-heading);
}

.st-tab__link { color: var(--st-color-primary); }

.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2 {
  font-size: 22px;
  font-weight: var(--st-weight-heading);
}

/* ─── Липкая панель покупки ──────────────────────────────────────────────── */

.st-sticky-buy {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--st-color-surface);
  border-top: 1px solid var(--st-color-border);
  box-shadow: 0 -6px 20px rgba(16, 24, 40, .10);
}

.st-sticky-buy__price { font-size: 18px; font-weight: 600; white-space: nowrap; }
.st-sticky-buy__price del { font-size: 13px; font-weight: 400; color: var(--st-color-text-muted); }
.st-sticky-buy__button { flex: 1 1 auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   ПЛАНШЕТЫ И ТЕЛЕФОНЫ
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .woocommerce div.product { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .woocommerce div.product > .woocommerce-product-gallery,
  .woocommerce div.product > .summary { grid-column: 1; }
}

@media (max-width: 768px) {
  .woocommerce div.product .product_title { font-size: 21px; }
  .woocommerce div.product p.price { font-size: 24px; }

  /* Панель показывается только на телефоне: на десктопе кнопка и так
     видна рядом с ценой. */
  .st-sticky-buy[data-visible="true"] { display: flex; }

  /* Место под панель, иначе она закрывает последний блок страницы. */
  body.single-product { padding-bottom: 72px; }

  /* Нижняя панель Storefront с корзиной и поиском конфликтует с нашей —
     двух липких панелей на экране быть не должно. */
  body.single-product .storefront-handheld-footer-bar { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   БЕЗ БОКОВОЙ КОЛОНКИ

   На странице товара колонка с поиском и категориями отбирает треть ширины
   у галереи и блока покупки. Ни в концепции, ни на маркетплейсах её там нет:
   человек уже выбрал товар, ему нужны фото, цена и кнопка.
   ═══════════════════════════════════════════════════════════════════════════ */

.single-product .content-area {
  width: 100%;
  float: none;
  margin-right: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   КАРТОЧКА ПОКУПКИ
   ═══════════════════════════════════════════════════════════════════════════ */

.st-product__info { min-width: 0; }

.st-buy {
  padding: 18px;
  border: 1px solid var(--st-color-border);
  border-radius: var(--st-radius-section);
  background: var(--st-color-surface);
  box-shadow: var(--st-shadow-card);
  /* Липнет при прокрутке: страница товара длинная, а кнопка покупки
     должна оставаться в поле зрения. */
  position: sticky;
  top: 170px;
}

.st-buy__stock {
  display: inline-block;
  padding: 7px 12px;
  margin-bottom: 12px;
  border-radius: var(--st-radius-control);
  background: color-mix(in srgb, var(--st-color-success) 12%, transparent);
  color: var(--st-color-success);
  font-size: 13px;
  font-weight: 500;
}

.st-buy__stock--out {
  background: color-mix(in srgb, var(--st-color-sale) 12%, transparent);
  color: var(--st-color-sale);
}

.st-buy__saving {
  margin: -8px 0 14px;
  color: var(--st-color-sale);
  font-size: 14px;
  font-weight: 500;
}

.st-buy__saving .amount { color: inherit; }

/* Цена внутри карточки: крупнее обычного, потому что это главный довод. */
.woocommerce div.product .st-buy p.price {
  margin-bottom: 10px;
  font-size: 28px;
}

/* Внутри карточки покупки блоки идут строками без собственной подложки:
   карточка и так на белом, вложенные плашки дробили бы её на лоскуты. */
.st-buy .st-delivery,
.st-buy .st-payment {
  margin: 14px 0 0;
  background: transparent;
  padding: 14px 0 0;
  border-top: 1px solid var(--st-color-border);
  border-radius: 0;
}

/* Между доставкой и оплатой линия не нужна — они читаются как один блок. */
.st-buy .st-payment { margin-top: 10px; padding-top: 0; border-top: 0; }

.st-buy .st-product__fav { margin-top: 12px; }

@media (max-width: 1100px) {
  /* Карточка покупки уезжает под описание: в трёх колонках на узком экране
     ей остаётся 200 px, и кнопка становится уже поля количества. */
  .woocommerce div.product > .summary { grid-template-columns: minmax(0, 1fr); }
  .st-buy { position: static; }
}