/**
 * Verbeterde en effectieve Sticky Product Gallery CSS
 * met stabiele breedtebehandeling
 */

/* Basisstijlen voor de productgalerij */
.woocommerce-product-gallery {
    transition: none; /* Geen transities, voorkomt flikkeringen */
    will-change: position; /* Optimaliseert voor vloeiende animaties */
    backface-visibility: hidden; /* Voorkomt flikkering in sommige browsers */
    transform: translateZ(0); /* Force hardware acceleration */
    box-sizing: border-box !important; /* Consistent box model */
}

/* Zorg dat de parent container de juiste reference is voor breedte */
.woocommerce-product-gallery-wrapper,
.woocommerce-product-gallery {
    width: 100% !important; /* Altijd de volledige breedte van de parent nemen */
    box-sizing: border-box !important;
}

/* Sticky galerij stijlen */
.woocommerce-product-gallery.is-sticky {
    z-index: 99; /* Boven andere elementen */
}

.summary.entry-summary {
    float: right !important;
    position: relative !important;
    margin-left: auto !important;
}


/* Mobielen reset - overschrijf alle sticky stijlen */
@media (max-width: 768px) {
    .woocommerce-product-gallery,
    .woocommerce-product-gallery.is-sticky {
        position: static !important;
        top: auto !important;
        width: auto !important;
        transform: none !important;
        will-change: auto !important;
    }
}