/* =========================================================
   Слайдер зображень товару в каталозі (архів)
   Swiper: стрілки + пагінація.
   Висота задається КОНТЕЙНЕРУ .products-item__img, а не <img>,
   інакше слайдер розтягує картинку до натурального розміру.
   ========================================================= */

:root {
    /* Висота картки-зображення. Змініть тут — зміниться всюди. */
    --pgal-height: 350px;
}

/* --- КРИТИЧНО для Swiper у CSS Grid ---
   Грид-елементи мають min-width: auto → трек розтягується під вміст
   flex-обгортки Swiper (петля по ширині). min-width: 0 по ланцюгу це прибирає. */
.products__grid > *,
.products__item--wrapper,
.products__item,
.products-item,
.products-item__content,
.products-item__img,
.pgal,
.pgal__swiper,
.pgal .swiper {
    min-width: 0;
}

/* Контейнер зображення = позиційний контекст + ФІКСОВАНА висота */
.products-item__img {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    height: var(--pgal-height);
    background: #f4f4f4;
}

/* Ярлики (знижка/лейбл) завжди над слайдером */
.products-item__img .product__label {
    z-index: 6;
}

/* --- Галерея заповнює контейнер по висоті --- */
.pgal,
.pgal .swiper,
.pgal .swiper-wrapper,
.pgal .swiper-slide,
.pgal__swiper {
    width: 100%;
    height: 100%;
}

.pgal,
.pgal__swiper,
.pgal .swiper {
    max-width: 100%;
}

.pgal__swiper {
    overflow: hidden;
}

/* Зображення в межах контейнера (перебиваємо тему вищою специфічністю) */
.products-item__img .pgal img,
.pgal img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pgal--empty img {
    object-fit: contain;
}

.pgal--swiper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f4f4;
}

/* Курсор-лупа на фото (клік → повноекранний перегляд) */
.pgal--swiper .swiper-slide img {
    cursor: zoom-in;
}

/* =========================================================
   СТРІЛКИ
   Мобілка (< 1024px) — завжди видимі.
   ПК (>= 1024px) — приховані, з'являються при наведенні на картку.
   ========================================================= */
.pgal__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--black, #1d1d1b);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    opacity: 1;
    transition: background 0.2s ease, opacity 0.2s ease;
}

.pgal__arrow--prev {
    left: 8px;
}

.pgal__arrow--next {
    right: 8px;
}

.pgal__arrow:hover {
    background: #fff;
}

/* На краях слайдера (перший/останній кадр) — приглушуємо, а не ховаємо */
.pgal__arrow.swiper-button-disabled {
    opacity: 0.35;
    cursor: default;
}

/* Один слайд — стрілки не потрібні */
.pgal__arrow.swiper-button-lock {
    display: none;
}

/* ПК: стрілки приховані, з'являються при наведенні на зображення */
@media screen and (min-width: 1024px) {
    .products-item__img .pgal__arrow,
    .products-item__img .pgal__arrow.swiper-button-disabled {
        opacity: 0;
    }

    .products-item__img:hover .pgal__arrow {
        opacity: 1;
    }

    .products-item__img:hover .pgal__arrow.swiper-button-disabled {
        opacity: 0.35;
    }
}

/* =========================================================
   ПАГІНАЦІЯ — брендові крапки
   ========================================================= */
.pgal__pagination {
    position: absolute;
    z-index: 5;
    bottom: 10px;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 0;
}

.pgal__pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0 !important;
    border-radius: 50%;
    background: rgba(29, 29, 27, 0.35);
    opacity: 1;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
    transition: width 0.25s ease, background 0.25s ease;
}

.pgal__pagination .swiper-pagination-bullet-active {
    width: 20px;
    border-radius: 5px;
    background: var(--yellow, #fc0);
}

/* Один слайд — контролів немає */
.pgal--single .pgal__pagination,
.pgal--single .pgal__arrow {
    display: none;
}

/* =========================================================
   Контент картки: Ціна → Кількість → [Замовити | Детальніше]
   (варіативний: Ціна → Варіації → Кількість → [У кошик | Детальніше])
   ========================================================= */

/* Кількість окремим рядком, на всю ширину */
.products-item__qty .quantity-container,
.products-item__variations .quantity-container {
    width: 100%;
}

/* Варіативний блок форми: колонка (варіації → кількість → кнопки) */
.products-item__variations .product__header--block-quantity {
    display: flex;
    flex-direction: column;
    gap: 10px;
    grid-template-columns: none;   /* прибираємо грид від теми */
    margin: 0;
}

.products-item__variations .variations {
    margin: 0 0 10px;
}

.products-item__variations .variation-add-to-cart {
    margin: 0;
}

/* Дві кнопки в один рядок (обидва типи товарів) */
.products-item__buttons,
.products-item__variations .product__header--add-to-cart {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.products-item__buttons .product__header--add-to-cart {
    flex: 1 1 0;
    display: flex;
    gap: 0;
}

.products-item__buttons .add_to_cart_button,
.products-item__buttons .products-item__more,
.products-item__variations .product__header--add-to-cart .add_to_cart_button,
.products-item__variations .product__header--add-to-cart .products-item__more {
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
    text-align: center;
    white-space: nowrap;
}

/* Нижній блок притискаємо донизу → кнопки різних карток вирівнюються */
.products-item__qty,
.products-item__variations {
    margin-top: auto;
}

/* Кнопка "Детальніше" (outline). Приберіть, якщо у теми вже є свій клас */
.main__button--outline {
    background: transparent;
    border: 1px solid var(--black, #1d1d1b);
    color: var(--black, #1d1d1b);
}

.main__button--outline:hover {
    background: var(--yellow, #fc0);
    color: var(--black, #1d1d1b);
    border-color: var(--yellow, #fc0);
}