/*
 * Sticky productgalerij: laat het blok met de hoofdfoto (en de kleur-
 * foto-wisseling uit frontend.js) blijven "meescrollen" terwijl de klant
 * door een lange lijst met opties naar beneden scrollt, i.p.v. dat de foto
 * bovenaan uit beeld verdwijnt. Alleen geladen bij producten met kleur-
 * foto's ingesteld (zie VIT_Frontend::enqueue()), dus alleen bij
 * configurator-producten -- niet site-breed.
 *
 * position:sticky werkt alleen binnen een container die zelf hoger is dan
 * de galerij (hier: de opties-kolom ernaast, die door alle add-ons-
 * groepen vanzelf veel hoger wordt) -- dat is bij een standaard
 * WooCommerce-product-layout (galerij + samenvatting naast elkaar) het
 * geval. Kom je op een pagina waar dit niet werkt, dan verschilt de
 * layout van de standaard WooCommerce-opmaak -- laat het weten, dan
 * stemmen we de selector/structuur daarop af.
 */

.woocommerce div.product div.images.woocommerce-product-gallery,
.woocommerce div.product .woocommerce-product-gallery {
	position: -webkit-sticky;
	position: sticky;
	top: 32px; /* ruimte voor een eventuele vaste header; pas aan indien nodig */
	align-self: flex-start;
	z-index: 2;
}

/* Voorkomt dat de sticky-foto op smalle/mobiele schermen boven de opties
   blijft "plakken" en zo kostbare scrollruimte inneemt -- daar is de
   normale (niet-sticky) volgorde prettiger. */
@media ( max-width: 768px ) {
	.woocommerce div.product div.images.woocommerce-product-gallery,
	.woocommerce div.product .woocommerce-product-gallery {
		position: static;
		top: auto;
	}
}