/* ===========================================================================
 * product-card.css -- die Produktkachel im Katalog.
 *
 * Verwendet ausschliesslich die Variablen aus tokens.css und Flatsomes eigene
 * --fs-color-*. Keine hartkodierten Werte.
 *
 * GEGEN WELCHES MARKUP HIER GESTYLT WIRD
 *
 *   div.product-small.col          <- aussen, das Rasterelement
 *     div.col-inner                <- die Karte selbst
 *       div.badge-container
 *       div.product-small.box
 *         div.box-image            <- Bild, zweites Bild als Hover
 *         div.box-text
 *           div.title-wrapper      <- p.category + p.name
 *           div.price-wrapper      <- p.price + Steuer- und Versandhinweis
 *
 * "product-small" steht sowohl aussen als auch innen. Deshalb arbeitet jeder
 * Selektor hier mit dem Kindzeichen ".row > .product-small", sonst greift er
 * zweimal.
 *
 * WARUM .row UND NICHT .products
 *
 * Die Klasse "products" setzt nur WooCommerce auf der Shop- und der
 * Kategorieseite. Der Shortcode [ux_products] -- auf der Startseite unter
 * "Zuletzt hinzugekommen" -- erzeugt die Reihe OHNE sie:
 *   <div class="row large-columns-4 medium-columns-3 small-columns-2 row-small">
 * Dadurch griff hier frueher keine einzige Regel: Die Kacheln standen ohne
 * Innenabstand aneinander und die Bilder blieben eckig. ".row" ist in beiden
 * Faellen da und damit die tragfaehige Bindung. (18.08.2026)
 * ======================================================================== */

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

.row > .product-small > .col-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--shop-space-2);
	background: var(--shop-surface);
	/*
	 * DIE UMRANDUNG IST DA, ABER FARBLOS.
	 *
	 * Seit dem 14.08.2026 (Kunde) zeigt die Karte im Ruhezustand keinen Rahmen
	 * mehr -- er erscheint erst beim Ueberfahren. Naheliegend waere
	 * border: 0 gewesen und beim Hover wieder 1px. Genau das darf man nicht:
	 * Die Umrandung zaehlt zur Groesse des Kastens, die Karte spraenge beim
	 * Ueberfahren um zwei Pixel und schoebe ihre Nachbarn mit.
	 *
	 * Deshalb bleibt sie stehen und wechselt nur die Farbe. Der Platz ist von
	 * Anfang an reserviert, es bewegt sich nichts.
	 */
	border: 1px solid transparent;
	border-radius: var(--shop-radius-card);
	transition: border-color var(--shop-transition-sanft), box-shadow var(--shop-transition-sanft);
}

/* Ruhezustand ohne alles -- die Flaeche bleibt still, und was beim Ueberfahren
   erscheint, bedeutet dadurch etwas. Rahmen und Schatten kommen gemeinsam. */
.row > .product-small > .col-inner:hover {
	border-color: var(--shop-border-hover);
	box-shadow: var(--shop-shadow-hover);
}

/* -- Gleiche Hoehe ------------------------------------------------------- */

/* Die Karten einer Reihe sind unterschiedlich lang, weil Produktnamen
   unterschiedlich lang sind. Ohne das hier stuenden die Preise auf
   verschiedenen Hoehen. */
.row > .product-small > .col-inner > .product-small.box {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.row > .product-small .box-text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: var(--shop-space-2) 0 0;
}

/* Preis nach unten schieben -- er sitzt damit in jeder Karte auf gleicher
   Hoehe, egal wie lang der Name darueber ist. */
.row > .product-small .price-wrapper {
	order: 2;
	margin-top: auto;
	padding-top: var(--shop-space-1);
}

/* -- Kurzbeschreibung ---------------------------------------------------- */

/*
 * Flatsome haengt den Auszug ans ENDE des Textblocks, also unter den Preis.
 * Das Briefing will ihn zwischen Name und Preis. Statt das Markup ueber einen
 * PHP-Hook umzubauen -- der gehoerte ins Plugin und ueberlebte den
 * Theme-Wechsel sinnlos -- wird hier nur die Reihenfolge im Flexcontainer
 * gedreht. Die Lesereihenfolge im Quelltext bleibt dabei erhalten.
 */
.row > .product-small .box-excerpt {
	order: 1;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	margin: 0 0 var(--shop-space-1);
	color: var(--shop-text-muted);
	line-height: 1.5;
}

/* -- Bild ---------------------------------------------------------------- */

.row > .product-small .box-image {
	overflow: hidden;
	background: var(--shop-surface);
	border-radius: var(--shop-radius-image);
}

/* -- Schrift in der Karte ------------------------------------------------ */

/* Flatsome setzt auf die Kategoriezeile die Klasse op-8, also 80 Prozent
   Deckkraft auf einem ohnehin grauen Ton. Auf Weiss reisst das den
   Mindestkontrast. Volle Deckkraft, dafuer der gepruefte Grauwert aus den
   Tokens: 8,1 : 1. */
.row > .product-small .box-text .category {
	color: var(--shop-text-muted);
	opacity: 1;
}

.row > .product-small .box-text .name a {
	color: var(--shop-text);
}

.row > .product-small .box-text .price {
	color: var(--shop-text);
}

/* Steuer- und Versandhinweis von German Market: notwendig, aber nicht die
   Hauptaussage der Kachel. */
.row > .product-small .box-text .wgm-info {
	color: var(--shop-text-muted);
	font-size: .85em;
	line-height: 1.5;
}

/* -- Die ganze Karte ist klickbar ---------------------------------------- */

/*
 * Ueber den Produktnamen gelegt, nicht ueber ein eigenes Element: So bleibt
 * genau EIN Ziel im Tabulator-Ablauf, und Vorlesegeraete kuendigen den
 * Produktnamen an statt eines leeren Verweises.
 *
 * Die Flaeche liegt ueber dem Bild -- beide fuehren ohnehin zum selben
 * Produkt.
 */
.row > .product-small .box-text .name a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Der Versandkosten-Verweis von German Market fuehrt woanders hin und muss
   deshalb ueber der Flaeche liegen. Ohne das waere er nicht mehr anklickbar --
   und er ist eine Pflichtangabe. */
.row > .product-small .price-wrapper a {
	position: relative;
	z-index: 2;
}

/* Der Fokusring soll die Karte umfassen, nicht nur den Textausschnitt --
   sonst sieht man bei Tastaturbedienung kaum, wo man steht. */
.row > .product-small .box-text .name a:focus-visible::after {
	outline: 2px solid var(--fs-color-primary, #325645);
	outline-offset: -2px;
	border-radius: var(--shop-radius-card);
}