/* Product Gallery - Стили для галереи изображений */

/* Убираем padding-top: 100% для контейнера изображений в карточках товаров */
.catalog_item .image_wrapper_block:not(.image-wrapper) {
    padding-top: 0 !important;
}

.product-gallery-thumb {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
    /* Предотвращаем растяжение */
    height: auto !important;
    max-height: none !important;
    /* Убираем лишние отступы */
    margin: 0 !important;
    padding: 0 !important;
}

.product-gallery-wrapper {
    position: relative !important;
    width: 100% !important;
    display: block !important;
    /* Важно: контейнер должен иметь высоту от первого изображения */
    min-height: 1px;
    /* Предотвращаем растяжение - высота будет зафиксирована JavaScript */
    height: auto;
    overflow: hidden !important;
    /* Убираем лишние отступы */
    margin: 0 !important;
    padding: 0 !important;
}

/* Все изображения по умолчанию скрыты */
.product-gallery-image {
    width: 100% !important;
    height: auto !important;
    display: none !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1 !important;
    visibility: hidden !important;
}

/* Первое изображение задает высоту контейнера и видно по умолчанию */
.product-gallery-image:first-child {
    position: relative !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
}

/* Активное изображение всегда видно */
.product-gallery-image.active {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 10 !important;
}

/* Когда первое изображение активно - оно задает высоту */
.product-gallery-image:first-child.active {
    position: relative !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 10 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
}

/* Когда активное изображение не первое - оно абсолютно позиционировано */
.product-gallery-image.active:not(:first-child) {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 10 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Когда первое изображение не активно - оно может быть скрыто, но если другое активно, оно остается для высоты */
.product-gallery-image:first-child:not(.active) {
    /* JavaScript управляет этим, но на всякий случай */
    position: relative !important;
    display: block !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: 1 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
}