/* Alle Breiten: Der Galerie-Block darf nie breiter werden als seine Spalte.
   WooCommerce setzt max-width:512px, die Desktop-Spalte ist 410px mit align-items:center.
   Wenn Flexslider nach einem Fenster-Resize (mobil -> Desktop) die Slide-Breiten noch auf
   dem Mobilwert hat, wuchs der Block auf 511px und klebte am Text. */
.single-product .wp-block-woocommerce-product-image-gallery { max-width: 100% !important; }
.single-product .woocommerce-product-gallery .flex-viewport { max-width: 100%; }

/* Mobile Produktgalerie in voller Breite (Vorbild brack.ch).
   Lädt NACH tbt-mobile-produktseite (Prio 99 + Abhängigkeit) und überschreibt dort:
   Bildhöhe min(250px,30vh) -> min(360px,46vh), Daumennägel 44px -> 64px.
   Global Styles: .wp-block-woocommerce-product-image-gallery max-width:275px -> 100%. */
@media (max-width: 782px) {
	.single-product .wp-block-woocommerce-product-image-gallery {
		max-width: 100% !important;
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	.single-product .woocommerce-product-gallery {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 0 10px !important;
	}
	.single-product .wp-block-woocommerce-product-image-gallery .flex-viewport,
	.single-product .wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery__wrapper {
		max-height: min(360px, 46vh) !important;
	}
	.single-product .wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery__image {
		text-align: center;
	}
	.single-product .wp-block-woocommerce-product-image-gallery img.wp-post-image,
	.single-product .wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery__image img {
		max-height: min(360px, 46vh) !important;
		width: auto !important;
		max-width: 100% !important;
		margin: 0 auto !important;
		display: block !important;
		object-fit: contain;
	}
	.single-product .flex-control-thumbs {
		gap: 8px !important;
		margin-top: 8px !important;
		padding-bottom: 4px !important;
		scrollbar-width: thin;
	}
	.single-product .flex-control-thumbs li {
		width: 64px !important;
	}
	.single-product .flex-control-thumbs img {
		width: 64px !important;
		height: 64px !important;
		object-fit: contain;
		border: 1px solid #e3e3e3;
		border-radius: 6px;
		background: #fff;
		opacity: 1 !important;
	}
	.single-product .flex-control-thumbs img.flex-active {
		border: 2px solid #c8102e;
	}
}