/* ===========================================================================
 * product-card.css -- die Produktkachel im Katalog (Eugen, Phase 3, 14.09.2026).
 *
 * Werte nur aus tokens.css. Gestaltung wie die Sortiment-Kacheln der
 * Startseite (home.css): weiss, Bild 4:3 abgerundet, Hover als Rahmen in
 * Kartenrundung, keine Farbflaeche.
 *
 * MARKUP (Flatsome 3.20, WooCommerce-Schleife):
 *
 *   div.products.row.large-columns-3 > div.product-small.col
 *     div.col-inner                        <- die Karte
 *       div.badge-container
 *       div.product-small.box
 *         div.box-image > div.image-fade_in_back > a > img
 *         div.box-text.box-text-products
 *           div.title-wrapper > p.category + p.name > a
 *           div.price-wrapper > p.price + div.wgm-info (German Market)
 *
 * "product-small" steht aussen UND innen -- deshalb ueberall das
 * Kindzeichen ".row > .product-small", sonst greift eine Regel zweimal.
 * ".row" statt ".products", weil [ux_products] auf anderen Seiten die
 * Reihe ohne .products erzeugt (Kurschat24, 18.08.2026).
 * ":is(.row, .row .flickity-slider)": "Aehnliche Produkte" ist ein Flatsome-
 * Schlitten -- sobald Flickity startet, liegen die Kacheln in
 * .flickity-viewport > .flickity-slider und ".row >" griff nicht mehr; der
 * Bereich stand im rohen Flatsome-Stil (Eugen, 30.09.2026; Loesung wie Kurschat24).
 *
 * Mit dem Varianten-Raster (Schritt 5b, Plugin ams-shop) rendert das
 * Child-Theme jede Variante mit derselben Vorlage -- die Regeln hier
 * bleiben dann gueltig.
 * ======================================================================== */

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

:is(.row, .row .flickity-slider) > .product-small > .col-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--ams-s-3);
	/* Rahmen immer da, nur transparent -- beim Hover springt nichts. */
	border: 1px solid transparent;
	border-radius: var(--ams-r-card);
	background: var(--ams-white);
	transition: border-color var(--ams-t-base) var(--ams-ease-out);
}

:is(.row, .row .flickity-slider) > .product-small:hover > .col-inner {
	border-color: var(--ams-line);
}

/* -- Bild 4:3, abgerundet --------------------------------------------------------
 * Das Seitenverhaeltnis kommt aus WooCommerce (Thumbnail-Zuschnitt 4:3,
 * 14.09.2026); hier nur Rundung und Sicherheitsnetz fuer alte Bilder.
 */
:is(.row, .row .flickity-slider) > .product-small .box-image {
	border-radius: var(--ams-r-image);
	overflow: hidden;
}

:is(.row, .row .flickity-slider) > .product-small .box-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform var(--ams-t-slow) var(--ams-ease-out);
}

:is(.row, .row .flickity-slider) > .product-small:hover .box-image img {
	transform: scale(1.03);
}

/* -- Text --------------------------------------------------------------------- */

:is(.row, .row .flickity-slider) > .product-small .box-text {
	padding: var(--ams-s-4) var(--ams-s-1) var(--ams-s-2);
	text-align: center;
}

/* Die Rubrikzeile ("Karten") wiederholt nur die Seite -- weg. */
:is(.row, .row .flickity-slider) > .product-small .box-text .category {
	display: none;
}

:is(.row, .row .flickity-slider) > .product-small .box-text .name {
	margin-bottom: var(--ams-s-1);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
}

:is(.row, .row .flickity-slider) > .product-small .box-text .name a {
	color: var(--ams-ink);
}

:is(.row, .row .flickity-slider) > .product-small:hover .box-text .name a {
	color: var(--ams-primary);
}

:is(.row, .row .flickity-slider) > .product-small .price-wrapper .price {
	font-size: 15px;
	font-weight: 500;
	color: var(--ams-ink);
}

/* Steuer- und Versandhinweis von German Market: klein und gedaempft, aber
   sichtbar -- Pflichtangabe. */
:is(.row, .row .flickity-slider) > .product-small .wgm-info {
	font-size: 12px;
	line-height: 1.4;
	color: var(--ams-ink-3);
}

:is(.row, .row .flickity-slider) > .product-small .wgm-info a {
	color: var(--ams-ink-3);
	text-decoration: underline;
}

/* Flatsomes Hover-Werkzeuge (Wunschliste, Schnellansicht) auf der Kachel:
   Schnellansicht schaltet Andres functions.php fuer w2p-Artikel ab; der
   Rest wuerde nur ablenken. */
:is(.row, .row .flickity-slider) > .product-small .image-tools {
	display: none;
}

/* -- Badge "Individuell gestalten" (Plugin ams-shop, includes/individuell.php, 08.10.2026): Flatsomes
   Badge-Ecke, als Pille in CI-Rot auf der Oberkante des Bildes (halb im Rand ueber dem Bild, damit
   sie das Motiv kaum verdeckt). Flatsome setzt den Behaelter 30 px tief und Kreis/Quadrat-Masse,
   beides gilt hier nicht. Wirkt auch im Galeriebild der Produktseite. */
/* Behaelter: Flatsome setzt ihn 30 px tief an die Spaltenkante; hier auf die Bildkante (col-inner hat
   12 px Rand): oben -1 px = halb ueber dem Bild, links 24 px = 12 px vom Bildrand. */
.badge-container:has(.ams-badge-individuell) { margin-top: 0; top: -1px; left: 24px; }
/* Galeriebild der Produktseite: kein Rand darueber, also innen in der Ecke. */
.woocommerce-product-gallery .badge-container:has(.ams-badge-individuell),
.product-gallery .badge-container:has(.ams-badge-individuell) { top: 12px; left: 12px; }
.badge-container .ams-badge-individuell { position: static; width: auto; height: auto; margin: 0; }
.badge-container .ams-badge-individuell .badge-inner {
	position: static;
	transform: none;
	display: inline-block;
	padding: 4px 12px;
	border-radius: var(--ams-r-pill);
	background: var(--ams-primary);
	color: var(--ams-white);
	font: 600 12px/1.4 var(--ams-font);
	letter-spacing: .02em;
	text-transform: none;
}

/* -- Anlass-Seite: "9 Motive fuer Weihnachten" unter dem Titel (Plugin
   ams-shop, includes/anlass-seiten.php, 16.09.2026). */
:is(.row, .row .flickity-slider) > .product-small .ams-anlass-motive {
	margin: 0 0 var(--ams-s-2);
	font-size: 13px;
	line-height: 1.4;
	color: var(--ams-ink-3);
}