/* ================================
   PRODUCT PAGE STYLES
   ================================ */

/* Фиксируем соотношение сторон галереи (4:3) */
.single-product .woocommerce-product-gallery__image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

/* Картинка заполняет блок без искажений */
.single-product .woocommerce-product-gallery__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ================================
   PRODUCT: миниатюры по центру под превью и без отступа снизу
   ================================ */

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li {
    float: none !important;
    width: calc(20% - 10px)!important;
    margin: 0 !important;
}

/* Равномерное распределение миниатюр */
.woocommerce div.product div.woocommerce-product-gallery ol.flex-control-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* расстояние между миниатюрами */
}

.woocommerce div.product div.woocommerce-product-gallery ol.flex-control-thumbs img {
    width: 100%;
    height: auto;
    display: block;
}

/* ================================
   PRODUCT: уменьшаем лишний отступ под блоком изображений
   ================================ */

.single-product div.product .woocommerce-product-gallery {
  margin-bottom: 1em !important;
}

/* ================================
   PRODUCT: Заголовок
   ================================ */

h1.entry-title {
    color: #d5a300;
    font-size: clamp(24px, 3vw, 32px);
}

/* если вокруг появляется квадрат/рамка при клике на пункт меню в описании товара, то можно смягчить */
.wc-tabs li{
  outline: none;
}

/* ================================
   Убираем фиолетовую рамку (focus outline) на заголовках вкладок
   ================================ */

  .woocommerce-tabs ul.wc-tabs li a:focus,
  .woocommerce-tabs ul.wc-tabs li a:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }

/* ================================
   PRODUCT: показываем все секции вместо вкладок
   ================================ */

/* Прячем меню вкладок */
  .single-product .woocommerce-tabs ul.tabs,
  .single-product .woocommerce-tabs ul.wc-tabs{
    display: none !important;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

/* Панели делаем блочными, без смещений "под правую колонку"  */
  .single-product .woocommerce-tabs .wc-tab{
    display: block !important;
    float: none !important;
    width: 100% !important;
    clear: both !important;
    margin: 0 !important;
    padding: 0 !important;
  }

/* Небольшой вертикальный ритм между секциями */
  .single-product .woocommerce-tabs .wc-tab + .wc-tab{
    margin-top: 28px !important;
  }

/* Reviews: скрыть только уведомление "нет отзывов", форму оставить */
  .single-product #reviews .woocommerce-noreviews{
    display: none !important;
  }

/* =========================
   PRODUCT: Верхний и нижний отступы у цены
   ========================= */
  .single-product div.product div.entry-summary p.price {
    margin: 0.2em 0;
    color: #172B00;
}

/* =========================
   PRODUCT: Quantity + Add to cart styling
   ========================= */

/* Обертка формы покупки */
.single-product form.cart{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Поле количества */
.single-product form.cart .quantity input.qty{
  width: 84px;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
}

/* Чтобы на мобилке не ломалось */
@media (max-width: 767px){
  .single-product form.cart{
    gap: 10px;
  }
  .single-product form.cart .single_add_to_cart_button{
    flex: 1 1 auto;
  }
}

/* =========================
   PRODUCT: Отступы раздела описания товара
   ========================= */

  .product .woocommerce-tabs {
     padding-top: 0;
     padding-bottom: 0;
  }
  section.related {
    padding-top: 50px;
}

@media (min-width: 768px){

h2.wp-block-heading:nth-child(n+2) {
  margin-top: 1em;
}

}