/* Produktgalerie: aktives Bild bleibt sichtbar (Audit 2026-09-24).
 * WooCommerce blendet in .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:not(:first-child)
 * per CSS standardmäßig alle Bilder außer dem ersten aus (No-JS-Fallback), solange der Galerie-Container
 * nicht die Klasse "flexslider" trägt. Diese Klasse wird hier nicht zuverlässig von der FlexSlider-
 * Initialisierung gesetzt, daher blieb beim Wechsel zu einem anderen Bild (Klick auf Thumbnail, Zoom-Hover)
 * die Anzeige leer. Direkte Sichtbarkeits-Regel für das jeweils aktive Bild behebt das unabhängig davon. */
.woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image.flex-active-slide,
.woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image.flex-active-slide a,
.woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image.flex-active-slide img {
	visibility: visible !important;
}

/* Einzelne Galeriebilder bleiben bei manchen Produkten "position: absolute" ohne gesetztes "left"
 * hängen (FlexSlider setzt das nur für Slides, die schon einmal aktiv waren, nicht zuverlässig
 * zurück/synchron). Ohne "left" fällt der Browser auf die statische Position zum Zeitpunkt der
 * Umstellung zurück; bei mehreren Bildern mit unterschiedlichen Seitenverhältnissen kann dabei die
 * Bild-Position vom Positions-"Fahrstuhl" der umgebenden Hülle abweichen (Bild und Hülle driften
 * gegeneinander), sodass das aktive Bild außerhalb des sichtbaren Bereichs landet. "position: static"
 * erzwingt stattdessen die normale float-Reihenfolge, die hier ohnehin für die horizontale Anordnung
 * sorgt. Geprüft an Produkten mit 3, 6 und 10 Galeriebildern (jeweils jedes Bild einzeln
 * durchgeklickt, mit realistischen Wartezeiten statt Schnellklicks) - kein Nebeneffekt gefunden. */
.woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image {
	position: static !important;
	/* "position: static" drops the slide's own height (it used to come from
	   filling the flex-viewport via "position: absolute; inset: 0"), so a
	   percentage height on the slide has no definite parent to resolve
	   against - and depending on image load timing, the slide sometimes
	   collapses to the image's own short/wide aspect ratio instead of the
	   square box, leaving a gap above the thumbnails. "aspect-ratio" sidesteps
	   that: it only needs the slide's OWN width (540px, set inline by
	   FlexSlider), not any ancestor's height, so it can't race. */
	aspect-ratio: 1 / 1;
}

/* Audit 2026-09-25: narrower/shorter photos no longer need to fill the square
   (object-fit: cover, from the theme's CLS-prevention critical CSS) - just
   centered in it, letterboxed, so nothing is cropped. */
.woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image img {
	object-fit: contain !important;
}

/* The <a> between the slide and the img has no height of its own either -
   without it, the img's height:100% (theme's critical CSS) still can't
   resolve, even once the slide above it is a reliable 540px via
   aspect-ratio. */
.woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image > a {
	display: block;
	height: 100%;
}