/**
 * EMEU Produkt-Karte (Loop) 0.1.0
 *
 * Eine Karte, zwei Orte: waagerechte Reihe auf der Produktseite (Karussell-Form der
 * Vorlage), Raster im Shop. Masse aus der Sichtung: Karte 292, Bild 292 x 421 (2:3),
 * Rinne 12. Farbe und Schrift kommen aus der Kontext-Schicht.
 */

.emeu-produktkarten-reihe,
.woocommerce-shop,
.tax-product_cat {
	--emeu-produktkarte-breite: 292px;
	--emeu-produktkarte-rinne: 12px;
	--emeu-produktkarte-format: 2 / 3;
}

/* --- Die Reihe auf der Produktseite (waagerecht, mit Anschnitt) ---------- */

.emeu-produktkarten-reihe .related > ul.products,
.emeu-produktkarten-reihe .upsells > ul.products,
.emeu-produktkarten-reihe .cross-sells > ul.products {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: var(--emeu-produktkarte-breite);
	gap: var(--emeu-produktkarte-rinne);
	margin: 0;
	padding: 0 0 0.5rem;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
}

.emeu-produktkarten-reihe .related > ul.products > li.product,
.emeu-produktkarten-reihe .upsells > ul.products > li.product,
.emeu-produktkarten-reihe .cross-sells > ul.products > li.product {
	width: auto;
	max-width: none;
	margin: 0;
	float: none;
	clear: none;
	scroll-snap-align: start;
}

/* --- Die Karte selbst ---------------------------------------------------- */

li.product.emeu-produktkarte {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0; /* v0.2.1 (Lumina 2026-09-18 15:5x): kein Zwischenraum in der Spalte, die Abstaende stoerten das Bild */
}

/* v0.2.1 (Lumina 2026-09-18 15:5x): der Preis traegt unten keinen Abstand mehr
   (WooCommerce gibt .price margin-bottom .5em; hier mit hoeherem Gewicht aufgehoben). */
.woocommerce ul.products li.product.emeu-produktkarte .price,
li.product.emeu-produktkarte .emeu-produktkarte__preis {
	margin-bottom: 0;
	padding-bottom: 0;
}

li.product.emeu-produktkarte a.woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
	text-decoration: none;
	color: inherit;
}

li.product.emeu-produktkarte img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--emeu-produktkarte-format, 2 / 3);
	object-fit: cover;
	margin: 0 0 0.6em;
}

li.product.emeu-produktkarte .emeu-produktkarte__marke {
	display: block;
	font-size: 0.82em;
	font-weight: 700;
	line-height: 1.3;
}

li.product.emeu-produktkarte .woocommerce-loop-product__title {
	margin: 0;
	font-size: 0.9em;
	font-weight: var(--w-schrift-regulaer, 300);
	line-height: 1.35;
	/* Zwei Zeilen, dann Auslassung — sonst springen die Karten in der Hoehe */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

li.product.emeu-produktkarte .emeu-produktkarte__preis {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35em;
	margin: 0.15em 0 0;
	font-size: 0.9em;
}

li.product.emeu-produktkarte .emeu-produktkarte__jetzt {
	font-weight: 700;
}

li.product.emeu-produktkarte .emeu-produktkarte__anker {
	font-size: 0.88em;
	text-decoration: line-through;
}

li.product.emeu-produktkarte .emeu-produktkarte__sparen {
	font-size: 0.88em;
	font-weight: 700;
}

/* --- Das Herz auf dem Bild ---------------------------------------------- */

li.product.emeu-produktkarte .emeu-produktkarte__merken {
	position: absolute;
	top: 0.6em;
	right: 0.6em;
	z-index: 2;
}

li.product.emeu-produktkarte .emeu-produktkarte__merken .jet-data-store-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 2.4em;
	height: 2.4em;
	border-radius: 999px;
	background-color: var(--color-bg, #fff);
	color: var(--color-headline, currentColor);
	text-decoration: none;
	opacity: 0.92;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

li.product.emeu-produktkarte .emeu-produktkarte__merken .jet-data-store-link:hover,
li.product.emeu-produktkarte .emeu-produktkarte__merken .jet-data-store-link:focus-visible {
	opacity: 1;
}

li.product.emeu-produktkarte .emeu-produktkarte__merken .jet-data-store-link:active {
	transform: scale(0.94);
}

li.product.emeu-produktkarte .emeu-produktkarte__merken .jet-data-store-link__icon svg {
	display: block;
	width: 1.1em;
	height: 1.1em;
}

/* --- Pflichtzeilen auf der Karte ----------------------------------------- */

/* Germanized legt Steuerhinweis, Versandkosten und Lieferzeit unter jede Karte.
   Sie sind Pflicht und bleiben — aber sie duerfen die Karte nicht auseinanderziehen:
   kleiner, enger, gedaempft. */
li.product.emeu-produktkarte .wc-gzd-additional-info,
li.product.emeu-produktkarte .woocommerce-gzd-additional-info,
li.product.emeu-produktkarte p.wc-gzd-additional-info {
	margin: 0;
	font-size: 0.72em;
	line-height: 1.35;
	opacity: 0.8;
}

li.product.emeu-produktkarte .wc-gzd-additional-info + .wc-gzd-additional-info {
	margin-top: 0.1em;
}

/* v0.2.0 (Lumina 2026-09-18 15:3x): Steuerhinweis und Versandkosten stehen
   NEBENEINANDER in einer Zeile — der Baustein gibt beide als EINEN Absatz aus
   (emeu-produktkarte__hinweise), weil die Karte eine Flex-Spalte ist und ein
   "inline" an zwei Absaetzen dort nicht greift (gemessen 15:4x). Der
   Lieferzeit-Hinweis folgt als eigener Absatz darunter. */
li.product.emeu-produktkarte p.emeu-produktkarte__hinweise {
	white-space: normal;
}

/* --- Ueberschrift der Reihe --------------------------------------------- */

.emeu-produktkarten-reihe .related > h2,
.emeu-produktkarten-reihe .upsells > h2,
.emeu-produktkarten-reihe .cross-sells > h2 {
	margin: 0 0 0.9em;
}

/* --- Kleinere Fenster ---------------------------------------------------- */

@media (max-width: 1024px) {
	.emeu-produktkarten-reihe {
		--emeu-produktkarte-breite: 232px;
	}
}

@media (max-width: 600px) {
	.emeu-produktkarten-reihe {
		--emeu-produktkarte-breite: 168px;
	}
}


/* ----------------------------------------------------------------------
   v0.3.0 (Lumina 2026-09-19, Punkt c): Bildwechsel per Mausposition.
   Alle Bilder liegen uebereinander, nur das gewaehlte ist sichtbar; darunter ein
   Strich je Bild, der gewaehlte voll, die anderen gedaempft. Striche erscheinen
   erst beim Zeigen auf die Karte. Blende nach der Haus-Bewegung (kurz).
   ---------------------------------------------------------------------- */
li.product.emeu-produktkarte .emeu-produktkarte__bilder {
	position: relative;
	display: block;
	touch-action: pan-y;
}
li.product.emeu-produktkarte .emeu-produktkarte__bilder img {
	display: block;
	width: 100%;
}
li.product.emeu-produktkarte .emeu-produktkarte__bilder img + img {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--w-bewegung-kurz-dauer, 200ms) var(--w-bewegung-kommt-kurve, ease-out);
}
li.product.emeu-produktkarte .emeu-produktkarte__bilder[data-emeu-aktiv="1"] img[data-emeu-bild="1"],
li.product.emeu-produktkarte .emeu-produktkarte__bilder[data-emeu-aktiv="2"] img[data-emeu-bild="2"],
li.product.emeu-produktkarte .emeu-produktkarte__bilder[data-emeu-aktiv="3"] img[data-emeu-bild="3"],
li.product.emeu-produktkarte .emeu-produktkarte__bilder[data-emeu-aktiv="4"] img[data-emeu-bild="4"] {
	opacity: 1;
}
li.product.emeu-produktkarte .emeu-produktkarte__striche {
	position: absolute;
	left: 0.75rem;
	right: 0.75rem;
	bottom: 0.5rem;
	display: flex;
	gap: 4px;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--w-bewegung-kurz-dauer, 200ms) var(--w-bewegung-kommt-kurve, ease-out);
}
li.product.emeu-produktkarte:hover .emeu-produktkarte__striche,
li.product.emeu-produktkarte:focus-within .emeu-produktkarte__striche,
li.product.emeu-produktkarte .emeu-produktkarte__bilder:not([data-emeu-aktiv="0"]) .emeu-produktkarte__striche {
	opacity: 1;
}
li.product.emeu-produktkarte .emeu-produktkarte__striche i {
	flex: 1 1 0;
	height: 2px;
	background: currentColor;
	opacity: 0.35;
}
li.product.emeu-produktkarte .emeu-produktkarte__bilder[data-emeu-aktiv="0"] .emeu-produktkarte__striche i:nth-child(1),
li.product.emeu-produktkarte .emeu-produktkarte__bilder[data-emeu-aktiv="1"] .emeu-produktkarte__striche i:nth-child(2),
li.product.emeu-produktkarte .emeu-produktkarte__bilder[data-emeu-aktiv="2"] .emeu-produktkarte__striche i:nth-child(3),
li.product.emeu-produktkarte .emeu-produktkarte__bilder[data-emeu-aktiv="3"] .emeu-produktkarte__striche i:nth-child(4),
li.product.emeu-produktkarte .emeu-produktkarte__bilder[data-emeu-aktiv="4"] .emeu-produktkarte__striche i:nth-child(5) {
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	li.product.emeu-produktkarte .emeu-produktkarte__bilder img + img,
	li.product.emeu-produktkarte .emeu-produktkarte__striche {
		transition: none;
	}
}