/**
 * Bugs plugin - Fix #1: FlexSlider hover glitch op single-product pagina.
 *
 * We targetten alleen de single-product gallery. De niet-actieve slide moet
 * tijdens transities nooit zichtbaar zijn; compositing layers op de <img>
 * worden afgedwongen zonder will-change/transform om Firefox rendering bug
 * te voorkomen.
 */

body.single-product .woocommerce-product-gallery .flex-viewport {
	transition: none !important;
}

body.single-product .woocommerce-product-gallery .flex-viewport .slides > li {
	transition: none !important;
	backface-visibility: hidden;
}

/* FlexSlider stapelt slides met position:absolute + opacity/z-index. Dwing af
   dat alleen de actieve slide daadwerkelijk rendert. */
body.single-product .woocommerce-product-gallery .flex-viewport .slides > li:not(.flex-active-slide) {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

body.single-product .woocommerce-product-gallery .flex-viewport .slides > li.flex-active-slide {
	opacity: 1 !important;
	visibility: visible !important;
}

/* Neutraliseer hover-transforms / will-change die op compositing-laagjes
   Firefox tiling-artefacten veroorzaken. */
body.single-product .woocommerce-product-gallery__image,
body.single-product .woocommerce-product-gallery__image a,
body.single-product .woocommerce-product-gallery__image img {
	will-change: auto !important;
	transform: none !important;
	filter: none !important;
	backdrop-filter: none !important;
}

body.single-product .woocommerce-product-gallery__image a:hover img,
body.single-product .woocommerce-product-gallery__image:hover img {
	transform: none !important;
	filter: none !important;
}

/* Als WC native zoom.js toch door een ander plugin/theme getriggerd wordt:
   verberg het zoom-overlay element. */
body.single-product .woocommerce-product-gallery img.zoomImg {
	display: none !important;
}

/* Isoleer de gallery container zodat repaint/compositing niet de hele
   pagina raakt (helpt tegen Firefox tile-banding). */
body.single-product .woocommerce-product-gallery {
	contain: layout paint;
}