/* Галерея фотографий товара для мобильной версии.
   На десктопе (>= 960px) не применяется ничего: там продолжает работать
   hover-переключение фотографий из global.min.css (строки 1381-1391),
   а .ssk-gallery остаётся обычным прозрачным контейнером — hover-правила
   написаны через селектор потомка и лишний уровень вложенности переживают. */

.ssk-dots {
    display: none;
}

@media screen and (max-width: 959px) {
    .ssk-gallery {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        /* Иначе свайп на краю галереи уводит браузер на предыдущую страницу. */
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        /* Скругление переезжает сюда со слайдов, чтобы не мелькать между ними. */
        border-radius: 40px;
        /* Полоса прокрутки под фотографией товара не нужна. */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .ssk-gallery::-webkit-scrollbar {
        display: none;
    }

    /* Обе фотографии из наложенных друг на друга становятся слайдами в ряд. */
    .ssk-gallery .t754__bgimg {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        flex: 0 0 100%;
        width: 100%;
        border-radius: 0;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    /* В global.min.css вторая фотография скрыта через opacity: 0 — она была
       нужна только под hover. Здесь это полноценный второй слайд. */
    .ssk-gallery .t754__bgimg_second {
        opacity: 1;
    }

    /* Точки-индикаторы лежат в .t754__imgwrapper, а не внутри галереи,
       иначе они уезжали бы вместе со слайдами. */
    .ssk-dots {
        position: absolute;
        right: 0;
        bottom: 10px;
        left: 0;
        z-index: 4;
        display: flex;
        justify-content: center;
        /* Тап по точке должен долетать до карточки и класть товар в корзину. */
        pointer-events: none;
    }

    .ssk-dots__dot {
        width: 6px;
        height: 6px;
        margin: 0 3px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.55);
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.35);
        -webkit-transition: background-color 0.15s linear;
        transition: background-color 0.15s linear;
    }

    .ssk-dots__dot_active {
        background-color: #ffffff;
    }
}