/* Листалка фотографий товара в списке каталога (см. product-gallery.js). */

/* Слайдер занимает весь квадрат .ratio-1x1 (Bootstrap .ratio > * уже абсолютит,
   inset:0 — страховка). */
.product-gallery.swiper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.product-gallery .swiper-wrapper,
.product-gallery .swiper-slide,
.product-gallery .swiper-slide > a {
    height: 100%;
}

.product-gallery .swiper-slide > a {
    display: block;
    width: 100%;
}

/* Фото заполняет слайд (класс .object-fit-cover уже на img, дублируем на всякий). */
.product-gallery .swiper-slide .img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Десктоп: курсор-указатель подсказывает про скраб фото. */
@media (hover: hover) and (pointer: fine) {
    .product-gallery {
        cursor: ew-resize;
    }
}

/* Родитель — база для абсолютного позиционирования точек. */
.product-gallery-block {
    position: relative;
}

/* Точки пагинации — абсолютно, сразу под изображением (как и раньше, не поверх
   фото), но БЕЗ участия в потоке: галерея остаётся ровным квадратом, точки не
   влияют на высоту блока. Монохром темы ($primary = $black = #000). */
.product-gallery-pagination.swiper-pagination {
    position: absolute;
    /* !important — перебить позиционирование swiper-bundle (его CSS грузится
       позже и с той же специфичностью выигрывает по порядку). */
    top: 100% !important;    /* сразу под квадратом изображения */
    bottom: auto !important; /* убрать дефолтный bottom swiper */
    left: 0;
    display: flex;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 10px;        /* тот же отступ 10px, что и в потоке */
}

/* Мобильные (брейкпоинт lg — как у .d-lg-none на заголовке/цене карточки):
   точки уходят поверх фото и прижимаются к его низу тем же отступом 10px. */
@media (max-width: 991.98px) {
    .product-gallery-pagination.swiper-pagination {
        top: auto !important;
        bottom: 10px !important;
        margin-top: 0;
    }
}

.product-gallery-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0 !important; /* перебить дефолтные отступы swiper-bundle */
    background: rgba(0, 0, 0, 0.2);
    opacity: 1;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.product-gallery-pagination .swiper-pagination-bullet-active {
    background: #000;
}