/* ============================================================================
   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;
}
.product__media{
  background: var(--color-white);
  border-radius:8px;
  box-shadow: var(--shadow-card-sm);
  padding:16px;
  max-width:100%;
}
.product__media 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{ aspect-ratio: 583 / 462; }
.product__info{ flex:1 1 auto; gap:32px; }
.product__desc{ max-width:601px; }
.product__perks{ gap:32px; }
.product__variants{ gap:24px; }
}