/* shop/static/shop/css/mobile_carousel.css */

/* Стилі для каруселі, яка ВИДИМА ТІЛЬКИ НА МОБІЛЬНИХ */
@media (max-width: 991px) {
    .mobile-only-carousel-container {
        display: block;
        width: 100%;
        margin-top: 15px;
        position: relative;
        overflow: hidden;
        height: auto; /* Змінюємо з 350px */
        aspect-ratio: 16 / 9;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        touch-action: pan-y; /* АБО touch-action: none;, якщо немає вертикальної прокрутки */
    }

    .mobile-carousel-slides {
        top: 45px;
        width: 100%;
        height: 100%;
        position: relative;
    }

    .mobile-carousel-slide {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        text-align: center;
        opacity: 0; /* За замовчуванням слайд прихований (прозорість 0) */
        transition: opacity 0.6s ease-in-out; /* Плавний перехід для opacity за 0.6 секунди */
        /* pointer-events: none; /* Запобігає клікам на неактивних слайдах */
    }

    /* НОВИЙ КЛАС: Коли слайд активний, він стає видимим */
    .mobile-carousel-slide.active {
        opacity: 1; /* Повністю видимий */
        /* pointer-events: auto; /* Дозволяє кліки на активному слайді */
    }

    .mobile-carousel-slide img {
        max-width: 100%;
        max-height: 100%;
        height: auto;
        width: auto;
        object-fit: contain;
        display: block;
        margin: 0 auto;
    }

}


/* Приховуємо мобільну карусель на десктопі */
@media (min-width: 992px) {
    .mobile-only-carousel-container {
        display: none !important;
    }
}