/* ============================================================================
   PRODUCT PAGE (product.html)
   Header, footer, .cta and .reviews reuse the rules above unchanged.
   ============================================================================ */
.product-top{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  width:100%;
  margin-block-start:16px;
  padding-inline: var(--gutter);
}
/* ---------- meta row: back-to-shop + breadcrumb ---------- */
.product-meta{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  width:100%;
}
.back-to-shop{
  display:none;
  align-items:center;
  gap:16px;
  font-size:18px;
  color:#151724;
}
.back-to-shop:hover{ opacity:.75; }
.back-to-shop__icon{
  width:32px; height:32px;
  border-radius:50%;
  background: var(--color-brown);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
/* Mirrored arrow: the base icon points to the LEFT, and "back" must point
   toward the reading start — right under RTL, left under LTR. */
.back-to-shop__icon img{ width:9px; height:auto; transform: scaleX(-1); }
[dir="ltr"] .back-to-shop__icon img{ transform:none; }
/* ---------- PRODUCT: media + info ---------- */
.product-detail{
  display:flex;
  flex-direction:column;
  gap:24px;
  width:100%;
  max-width:100%;
  overflow:hidden;
  padding-block-start:16px;
}
/*
 * ⚠ min-width:0 обязателен, иначе галерея распирает карточку изнутри.
 *
 * У флекс-элемента min-width по умолчанию auto, то есть не меньше своего
 * min-content. Внутри .product-slider лежит .swiper-wrapper — флекс-строка из
 * слайдов с flex-shrink:0, и её min-content равен сумме натуральных ширин всех
 * кадров (три фото по 900px — 2700px). Поэтому базис 615px не держался: медиа
 * занимала всю строку, а .product__info выдавливалась в нулевую ширину и
 * срезалась `overflow:hidden` у .product-detail — со стороны выглядело так,
 * будто у товара нет ни заголовка, ни цены, ни кнопки.
 *
 * overflow:hidden на самом .product-slider эту роль не выполняет: правило
 * автоминимума смотрит на overflow ЭЛЕМЕНТА-флекс-item, а не его потомка.
 */
.product__media{
  background: var(--color-white);
  border-radius:8px;
  box-shadow: var(--shadow-card-sm);
  padding:16px;
  max-width:100%;
  min-width:0;
}
/*
 * ⚠ Только фото товара, а не любая картинка внутри .product__media.
 *
 * Раньше селектор был `.product__media img` и в режиме галереи доставал иконки
 * стрелок внутри .product-slider__arrows: они получали width:100% и
 * aspect-ratio фотографии, то есть раздувались на всю карточку и разносили
 * вёрстку товара. У базового `.arrow-btn img` та же специфичность (класс +
 * тег), а woo-product.css подключается после base.css — значит побеждало это
 * правило.
 */
.product__media > img,
.product-slider .swiper-slide img{
  width:100%;
  aspect-ratio: 311 / 244;
  object-fit:cover;
  border-radius:4px;
}
/* ---------- PRODUCT GALLERY ----------
   Второй режим .product__media: если у товара заполнена галерея, на том же
   месте и в тех же границах карточки появляется слайдер. Дизайна у галереи в
   макете нет — собрана из существующих компонентов: .arrow-btn (те же круглые
   стрелки, что у отзывов) и точки Swiper тех же размеров, что у
   .cart-products-pagination.

   Стрелки — ПАРА, поэтому обязательны переопределения [dir="ltr"] (§8.1):
   базовая иконка смотрит влево, «предыдущая» должна указывать в сторону
   начала строки. */
.product-slider{ position:relative; width:100%; overflow:hidden; border-radius:4px; }
.product-slider .swiper-slide{ height:auto; }
.product-slider__arrows{
  position:absolute;
  inset-block-start:50%;
  inset-inline:8px;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  transform: translateY(-50%);
  pointer-events:none;
}
.product-slider__arrows .arrow-btn{ pointer-events:auto; }
.product-slider-prev img{ transform: scaleX(-1); }
.product-slider-next img{ transform:none; }
[dir="ltr"] .product-slider-prev img{ transform:none; }
[dir="ltr"] .product-slider-next img{ transform: scaleX(-1); }
.product-slider-pagination.swiper-pagination{
  position:absolute;
  inset-block-end:8px;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.product-slider-pagination .swiper-pagination-bullet{
  width:8px; height:8px;
  border-radius:50%;
  background: var(--color-white);
  opacity:.6;
  margin:0;
}
.product-slider-pagination .swiper-pagination-bullet-active{
  background: var(--color-brown);
  opacity:1;
}
.product__info{
  display:flex;
  flex-direction:column;
  gap:24px;
  align-items:start;
  text-align:start;
  width:100%;
  min-width:0;
}
.product__heading{
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:start;
  width:100%;
}
.product__stock{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  font-size: var(--fs-tag-sm);
  font-weight:600;
  color:#4caf50;
}
.product__stock-dot{ width:5px; height:5px; border-radius:50%; background:#4caf50; flex-shrink:0; }
/* Only the in-stock state is drawn in Figma. The other two are the same row in
   a different colour, reusing values already present elsewhere in the sheet
   (#db2323 = the error red, --color-gold = the accent). */
.product__stock--out{ color:#db2323; }
.product__stock--out .product__stock-dot{ background:#db2323; }
.product__stock--backorder{ color: var(--color-gold); }
.product__stock--backorder .product__stock-dot{ background: var(--color-gold); }
.product__heading h1{
  font-size: var(--fs-h2);
  font-weight:600;
  line-height:1.2;
  color: var(--color-dark);
}
.product__price{
  display:flex;
  align-items:flex-end;
  gap:14px;
}
.product__price-tag{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size: var(--fs-name);
  font-weight:600;
  color: var(--color-dark);
  white-space:nowrap;
}
.product__shipping-note{
  font-size: var(--fs-quote);
  color: var(--color-gold);
  white-space:nowrap;
}
.product__desc{
  font-size: var(--fs-quote);
  line-height:1.2;
  color: var(--color-brown);
  width:100%;
}
.product__desc p + p{ margin-block-start:8px; }
.product__perks{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:29px;
  width:100%;
}
.product__perks li{
  display:flex;
  align-items:center;
  gap:16px;
}
.product__perks li:not(.product__perks-sep) img{ width:24px; height:24px; }
.product__perks li span{ font-size: var(--fs-btn); font-weight:700; color: var(--color-brown); white-space:nowrap; }
.product__perks-sep{ width:1px; align-self:stretch; background:#9a958a; }
/* ---------- add-to-cart form ----------
   In the prototype .product__variants and .product__actions are direct
   children of .product__info. WooCommerce requires them inside <form
   class="cart">, so the form repeats the parent's layout and the geometry is
   unchanged.

   .single_variation_wrap is required by WooCommerce's variation script (it
   writes the selected variation's price and availability into it and slides it
   open). There is no design for that slot, so it stays hidden — the script
   sets an inline display, hence !important. See
   woocommerce/single-product/add-to-cart/variable.php. */
.product__info form.cart{
  display:flex;
  flex-direction:column;
  gap:24px;
  align-items:start;
  width:100%;
  min-width:0;
}
.product__info .single_variation_wrap{ display:none !important; }
/* ---------- variant selectors: quantity + color ---------- */
.product__variants{
  display:flex;
  align-items:flex-start;
  gap:16px;
  width:100%;
}
.qty-stepper{
  flex:1 1 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  background: var(--color-border);
  border-radius:8px;
  padding:16px;
  height:54px;
}
.qty-stepper__btn{ width:24px; height:24px; flex-shrink:0; }
.qty-stepper__btn img{ width:100%; height:100%; }
.qty-stepper__input{
  width:35px;
  border:none;
  background:none;
  text-align:center;
  font-family:inherit;
  font-size: var(--fs-quote);
  color: var(--color-brown);
  appearance:textfield;
  -moz-appearance:textfield;
}
.qty-stepper__input::-webkit-outer-spin-button,
.qty-stepper__input::-webkit-inner-spin-button{ appearance:none; margin:0; }
.color-select{
  flex:1 1 0;
  position:relative;
  background: var(--color-border);
  border:1px solid var(--color-border);
  border-radius:8px;
  height:54px;
  display:flex;
  align-items:center;
}
.color-select select{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  height:100%;
  background:transparent;
  border:none;
  padding:16px 40px 16px 16px;
  font-family:inherit;
  font-size: var(--fs-quote);
  color: var(--color-brown);
  text-align:center;
  cursor:pointer;
}
.color-select__chevron{
  position:absolute;
  inset-inline-start:16px;
  inset-block-start:50%;
  transform: translateY(-50%) rotate(90deg);
  width:18px; height:18px;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
}
.color-select__chevron img{ max-width:60%; max-height:100%; width:auto; height:auto; }
/* ---------- actions ---------- */
.product__actions{
  display:flex;
  flex-direction:column;
  gap:16px;
  width:100%;
}
.product__add-to-cart{ min-height:54px; padding:15px 32px; }
/* ============================================================
   PRODUCT — ≥ 600px
   ============================================================ */
@media (min-width: 600px){
.product__actions{ flex-direction:row; }
.product__actions > *{
    flex:1 1 0;
    min-width:0;
    white-space:normal;
    text-align:center;
  }
}
/* ============================================================
   PRODUCT — ≥ 992px
   ============================================================ */
@media (min-width: 992px){
.product-top{ gap:24px; }
.product-meta{ position:relative; flex-direction:row; align-items:center; justify-content:flex-start; padding-block-start:8px; }
.back-to-shop{ display:flex; }
.qty-stepper,
.color-select{ flex:0 0 289px; }
.product__actions{ flex-direction:row; gap:24px; }
.product__add-to-cart{ min-height:64px; }
}
/* ============================================================
   PRODUCT — ≥ 1200px : image + info become a row.
   Kept at 1200 (not 992, like about.html's .intro and business.html's
   .split-hero) because .product__media is a fixed 615px column — at 992px
   the remaining space for .product__info drops to ~280px, too tight for
   its nowrap price tag / perk labels and prone to forcing the row wider
   than its container.
   ============================================================ */
@media (min-width: 1200px){
.product-detail{
    flex-direction:row;
    align-items:center;
    gap:48px;
    padding-block-start:0;
  }
.product__media{ flex:0 0 615px; }
.product__media > img,
.product-slider .swiper-slide img{ aspect-ratio: 583 / 462; }
.product__info{ flex:1 1 auto; min-width:0; gap:32px; }
.product__desc{ max-width:601px; }
.product__perks{ gap:32px; }
.product__variants{ gap:24px; }
}