/* =========================================================
   Слайдер зображень товару в каталозі (архів)
   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;
    background: #f4f4f4;
}

/* Посилання-обгортка на всю площу слайда (клік → сторінка товару) */
.pgal__link {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 0;
    cursor: pointer;
}

/* =========================================================
   СТРІЛКИ
   Мобілка (< 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 .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__variations .product__header--add-to-cart .add_to_cart_button {
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
    text-align: center;
    white-space: nowrap;
}

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