/**
 * Produkt-Archiv-Grid (Shop, Kategorien, Tags, Attribute)
 *
 * Ziel:
 * - Mobile: 1-spaltiges Grid statt 2 gequetschte Spalten
 * - Desktop: jedes Foto vollständig in demselben Querformat, nichts wird abgeschnitten
 *
 * Betrifft: archive-product.php (WooCommerce-Standard-Loop),
 * genutzt für taxonomy-product-cat.php, taxonomy-product-tag.php,
 * taxonomy-product-attribute.php und die normale Shop-Seite.
 */

/* Gleich großes Feld. Das ganze Foto bleibt sichtbar, auch bei anderem Maß. */
.woocommerce ul.products li.product a img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	object-position: center;
	background: #f7f4f2;
}

/* Mobile: 1 Spalte statt 2 */
@media (max-width: 600px) {
	.woocommerce ul.products {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}

	.woocommerce ul.products li.product {
		width: 100% !important;
		margin: 0 !important;
	}
}

/**
 * Bilder innerhalb der Tag-/Kategorie-Beschreibung (.term-description)
 *
 * Zweck: Einzelblumen-Fotos, die manuell in die Beschreibung eingefügt werden,
 * wirken sonst roh/unstyled im Textfluss ("reingeklatscht"). Diese Regeln geben
 * ihnen einen dezenten Rahmen und richten Text/Bild als 30/70-Layout aus.
 *
 * Hinweis: Wir nutzen Flexbox statt float, weil WordPress eingefügten Bildern
 * oft automatisch die Klasse "aligncenter" (margin: 0 auto) mitgibt, die
 * einfaches float überschreibt. Die :has()-Selektoren erkennen automatisch,
 * welcher Absatz das Bild enthält – unabhängig von WP-eigenen Klassen.
 */
@media (min-width: 769px) {
	.woocommerce .term-description,
	.woocommerce-page .term-description {
		display: flex;
		flex-wrap: nowrap;
		align-items: flex-start;
		gap: 2rem;
		margin-bottom: 4.5rem;
	}

	/* Absatz/Element MIT Bild: 30% Breite */
	.woocommerce .term-description > *:has(img),
	.woocommerce-page .term-description > *:has(img) {
		flex: 0 0 30%;
		max-width: 30%;
		margin: 0 !important;
		order: 2;
	}

	/* Alle anderen Absätze (Text): 70% Breite */
	.woocommerce .term-description > *:not(:has(img)),
	.woocommerce-page .term-description > *:not(:has(img)) {
		flex: 1 1 65%;
		margin: 0 !important;
		order: 1;
	}
}

.woocommerce .term-description img,
.woocommerce-page .term-description img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	margin: 0 !important;
	float: none !important;
}

/* Bildunterschrift (falls über WP-Caption/figcaption eingebunden) */
.woocommerce .term-description .wp-caption-text,
.woocommerce .term-description figcaption {
	font-size: 0.875rem;
	color: #666;
	margin-top: 0.5rem !important;
	font-style: italic;
	text-align: center;
}

/* Mobile: Bild volle Breite, Text darüber (normale Reihenfolge) */
@media (max-width: 768px) {
	.woocommerce .term-description,
	.woocommerce-page .term-description {
		margin-bottom: 1rem;
	}

	.woocommerce .term-description img,
	.woocommerce-page .term-description img {
		margin: 1.5rem 0 !important;
	}
}