/**
 * FynDesign Variation Gallery - Frontend Styles
 *
 * Smooth transitions when swapping product galleries
 */

/* Gallery transition state */
.woocommerce-product-gallery {
    transition: opacity 0.3s ease;
}

.woocommerce-product-gallery.fvg-swapping {
    opacity: 0.3;
    pointer-events: none;
}

/* Ensure smooth image transitions */
.woocommerce-product-gallery__wrapper {
    transition: min-height 0.3s ease;
}

.woocommerce-product-gallery__image {
    transition: opacity 0.3s ease;
}

/* Prevent layout shift during swap */
.woocommerce-product-gallery.fvg-swapping .woocommerce-product-gallery__wrapper {
    min-height: 300px;
}

/* Fade in effect for new images */
.woocommerce-product-gallery__image img {
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Loading state for images */
.woocommerce-product-gallery.fvg-swapping .woocommerce-product-gallery__image img {
    opacity: 0;
}

/* Fix for single-image galleries without FlexSlider */
/* When FlexSlider doesn't initialize (single image), ensure proper display */
.woocommerce-product-gallery__wrapper {
    overflow: hidden;
}

/* Ensure single image displays correctly when no FlexSlider viewport exists */
.woocommerce-product-gallery:not(:has(.flex-viewport)) .woocommerce-product-gallery__wrapper {
    max-height: none;
    height: auto !important;
}

.woocommerce-product-gallery:not(:has(.flex-viewport)) .woocommerce-product-gallery__image {
    display: block;
    width: 100%;
}

.woocommerce-product-gallery:not(:has(.flex-viewport)) .woocommerce-product-gallery__image:first-child {
    display: block;
}

.woocommerce-product-gallery:not(:has(.flex-viewport)) .woocommerce-product-gallery__image:not(:first-child) {
    display: none;
}

.woocommerce-product-gallery:not(:has(.flex-viewport)) .woocommerce-product-gallery__image img {
    width: 100%;
    height: auto;
}

/* JavaScript-based fallback class for browsers without :has() support */
.woocommerce-product-gallery.fvg-no-slider .woocommerce-product-gallery__wrapper {
    max-height: none;
    height: auto !important;
}

.woocommerce-product-gallery.fvg-no-slider .woocommerce-product-gallery__image {
    display: block;
    width: 100%;
}

.woocommerce-product-gallery.fvg-no-slider .woocommerce-product-gallery__image:first-child {
    display: block;
}

.woocommerce-product-gallery.fvg-no-slider .woocommerce-product-gallery__image:not(:first-child) {
    display: none;
}

.woocommerce-product-gallery.fvg-no-slider .woocommerce-product-gallery__image img {
    width: 100%;
    height: auto;
}