/*
Theme Name: astra child
Template: astra
*/
@import url("../astra/style.css");

/* 1. КАТАЛОГ ТОВАРОВ: Возвращаем старый надежный метод квадрата */
.astra-shop-thumbnail-wrap .woocommerce-product-gallery__image {
    position: relative !important;
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 100% !important; /* Это создает идеальный квадрат */
    overflow: hidden !important;
    background: #000 !important;
    display: block !important;
}

/* 2. ВИДЕО В КАТАЛОГЕ: Растягиваем внутри этого квадрата */
.astra-shop-thumbnail-wrap .rsfv-video, 
.astra-shop-thumbnail-wrap video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; /* Показать видео целиком без обрезки */
    display: block !important;
}

/* Перебиваем инлайновые стили плагина */
.rsfv-video[style], .rsfv-video-wrapper[style] {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
}

/* 3. СТРАНИЦА ТОВАРА: Отменяем квадрат, чтобы видео было в полный рост */
.single-product .astra-shop-thumbnail-wrap .woocommerce-product-gallery__image {
    height: auto !important;
    padding-bottom: 0 !important;
    aspect-ratio: auto !important;
}

.single-product .rsfv-video, 
.single-product video {
    position: relative !important;
    height: auto !important;
    max-height: 80vh !important;
}

/* 4. МОБИЛЬНЫЙ ФИКС: Убираем "левый кусок" и сдвиги Astra */
@media (max-width: 768px) {
    /* Сбрасываем все расчеты ширины, которые Astra делает через JS */
    .flex-viewport, 
    .woocommerce-product-gallery__wrapper, 
    .woocommerce-product-gallery__image {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        transform: none !important; /* Убирает улет видео влево */
    }

    /* Убираем фиксированную ширину 300px, если она осталась в кэше */
    .astra-shop-thumbnail-wrap .woocommerce-product-gallery__image {
        max-width: 100% !important;
    }
}