/* =========================================================
   Produktlistings
   Stand: 2026-09-10 (Abschnitt 3 fuer .popluar-products)

   Die Datei wird auf zwei Seitentypen geladen und deckt zwei
   voellig verschiedene Markup-Varianten von Avada ab:

   A) Shop, Produktkategorien, Produkt-Schlagworte
      Post-Cards-Grid: li.post-card.product
      > .fusion_builder_column_inner > .fusion-column-wrapper
      Abschnitte 1, 1a und 2.

   B) Produktdetailseite, Sektion "Was andere Geniesser
      besonders lieben" (.popluar-products)
      Klassisches WooCommerce-Grid: ul.products > li.product
      > .fusion-product-wrapper > .fusion-product-content
      Abschnitt 3.

   Beide Varianten bekommen dieselbe Kartenoptik: orange
   Flaeche, weisser Text, zweizeilig gekuerzter Titel.

   Das Avada-Stylesheet (uploads/fusion-styles/*.min.css) wird
   nach dieser Datei geladen. Alle Regeln hier bekommen deshalb
   bewusst eine Stufe mehr Spezifitaet als die Avada-Regel, die
   sie ersetzen, statt mit !important zu arbeiten.
   ========================================================= */


/* ---------------------------------------------------------
   1. Kartentext in Weiss

   Ersetzte Avada-Regeln:
   .fusion-body .fusion-title a                          (0,2,1)
   .fusion-post-card-cart.awb-add-to-cart-style-link
       .fusion-post-card-cart-add-to-cart                (0,3,0)
   .price > .amount                                      (0,2,0)
   body a                                                (0,1,1)

   Hinweis zum Kontrast: Auf der orangen Kartenflaeche
   (#c06c4e, siehe Abschnitt 1a) erreicht weisser Text 3,6:1.
   WCAG 2.1 AA verlangt 4,5:1 fuer Fliesstext und 3:1 fuer
   grosse Schrift ab 24px. Der Wert ist deutlich besser als
   auf dem vorherigen Beige (1,7:1), erfuellt AA aber noch
   nicht. Ein etwas dunkleres Orange (#a85636 ergibt 4,6:1)
   wuerde reichen; an den Farbregeln hier muss sich dafuer
   nichts aendern.
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   1a. Kartenflaeche im Hofmanufaktur-Orange

   Die Flaeche haengt am Wrapper der inneren Spalte, nicht an
   der Spalte selbst. Avada faerbt sie ueber
   .fusion-layout-column .fusion-column-wrapper (0,2,0) mit
   --awb-bg-color, das als Inline-Custom-Property auf der
   Spalte steht (var(--awb-color8), Beige).

   Statt die Custom-Property zu ueberschreiben - was gegen den
   Inline-Wert nur mit !important ginge - wird hier direkt
   background-color mit vier Klassen gesetzt (0,4,0). Das
   schlaegt zugleich die Breakpoint-Regeln von Avada fuer
   --awb-bg-color-medium und --awb-bg-color-small, weil
   Media Queries die Spezifitaet nicht erhoehen.

   Der Hover-Zustand wird mitgenommen: Avada setzt dort
   --awb-bg-color-hover ueber einen Selektor mit (0,3,0).

   Das Produktbild liegt in einer eigenen Spalte darueber und
   bleibt unberuehrt. Die runden Ecken kommen vom aeusseren
   Listenelement (--awb-border-radius:15px, overflow:hidden).
   --------------------------------------------------------- */

.fusion-post-cards-grid-column.product .fusion_builder_column_inner > .fusion-column-wrapper,
.fusion-post-cards-grid-column.product .fusion_builder_column_inner > .fusion-column-wrapper:hover {
	background-color: var(--awb-custom_color_2, #c06c4e);
}


/* Produkttitel */
.fusion-post-cards-grid-column.product .fusion-title-heading a,
.fusion-post-cards-grid-column.product .fusion-title-heading a:visited,
.products .product .product-title a {
	color: #fff;
}

.fusion-post-cards-grid-column.product .fusion-title-heading a:hover,
.fusion-post-cards-grid-column.product .fusion-title-heading a:focus {
	color: #fff;
	text-decoration: underline;
}

/* Preis, Grundpreis, Streichpreis und Lagerhinweis

   Hier ist eine Klasse mehr noetig: Avada faerbt den Betrag ueber
   .fusion-body .fusion-woo-price-tb .price > .amount (0,4,0).
   Der Waehrungsschriftzug liegt in .amount und erbt die Farbe.
   .price .amount als Nachfahre statt als Kind, damit auch der
   Betrag in del/ins bei Aktionspreisen erfasst wird. */
.fusion-body .fusion-post-cards-grid-column.product .fusion-woo-price-tb .price,
.fusion-body .fusion-post-cards-grid-column.product .fusion-woo-price-tb .price .amount,
.fusion-body .fusion-post-cards-grid-column.product .fusion-woo-price-tb .price del,
.fusion-body .fusion-post-cards-grid-column.product .fusion-woo-price-tb .price ins,
.fusion-body .fusion-post-cards-grid-column.product .fusion-woo-price-tb .hpt-unitprice,
.fusion-body .fusion-post-cards-grid-column.product .fusion-woo-price-tb .stock {
	color: #fff;
}

/* Pflichtangaben von WooCommerce Germanized
   (MwSt.-Hinweis und Versandkosten) */
.fusion-post-cards-grid-column.product .legal-price-info,
.fusion-post-cards-grid-column.product .wc-gzd-additional-info {
	color: #fff;
}

/* Der Versandkosten-Link darf sich nicht mehr ueber die Farbe
   vom uebrigen Text abheben, deshalb bleibt er unterstrichen. */
.fusion-post-cards-grid-column.product .wc-gzd-additional-info a {
	color: #fff;
	text-decoration: underline;
}

/* Warenkorb- und Detail-Link inklusive der Icons davor
   (die Icons erben die Farbe vom Link) */
.fusion-post-cards-grid-column.product .fusion-post-card-cart .fusion-post-card-cart-add-to-cart,
.fusion-post-cards-grid-column.product .fusion-post-card-cart .fusion-post-card-cart-product-link,
.fusion-post-cards-grid-column.product .fusion-post-card-cart .added_to_cart {
	color: #fff;
}

.fusion-post-cards-grid-column.product .fusion-post-card-cart .fusion-post-card-cart-add-to-cart:hover,
.fusion-post-cards-grid-column.product .fusion-post-card-cart .fusion-post-card-cart-add-to-cart:focus,
.fusion-post-cards-grid-column.product .fusion-post-card-cart .fusion-post-card-cart-product-link:hover,
.fusion-post-cards-grid-column.product .fusion-post-card-cart .fusion-post-card-cart-product-link:focus,
.fusion-post-cards-grid-column.product .fusion-post-card-cart .added_to_cart:hover,
.fusion-post-cards-grid-column.product .fusion-post-card-cart .added_to_cart:focus {
	color: #fff;
	text-decoration: underline;
}


/* ---------------------------------------------------------
   2. Produkttitel auf zwei Zeilen begrenzen

   Alle Karten einer Reihe sollen unter dem Bild gleich
   aufbauen. Der Titel bekommt dafuer die Hoehe von genau zwei
   Zeilen; laengere Titel werden per line-clamp mit
   Auslassungspunkten gekuerzt.

   min-height statt height, damit der Block bei vergroesserter
   Schrift oder Browser-Zoom mitwaechst und nichts abgeschnitten
   wird, was line-clamp nicht selbst kuerzt. Der vollstaendige
   Titel bleibt im Markup und damit fuer Screenreader und
   Suchmaschinen lesbar.

   Doppelter Klassenname, weil Avada die Ueberschrift ueber
   .fusion-body .fusion-title .title-heading-left ansteuert.
   --------------------------------------------------------- */

.fusion-post-cards-grid-column.product .fusion-title-heading.fusion-title-heading {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	line-height: 1.2;
	min-height: 2.4em; /* 2 Zeilen x 1.2 Zeilenhoehe */
}


/* ---------------------------------------------------------
   3. Produktdetailseite: "Was andere Geniesser besonders
      lieben" (.popluar-products)

   Achtung, die Klasse ist im Avada-Builder mit Schreibfehler
   angelegt: "popluar" statt "popular". Damit ein spaeteres
   Korrigieren nichts zerschiesst, sprechen die Regeln ueber
   :is() beide Schreibweisen an. :is() nimmt die Spezifitaet
   des staerksten Arguments, hier also genau eine Klasse - die
   Werte in den Kommentaren stimmen deshalb weiter.

   Hier steht das klassische WooCommerce-Grid, nicht das
   Post-Cards-Grid des Shops. Verschachtelung:

   ul.products > li.product > .fusion-product-wrapper
     > a.product-images > .featured-image > img
     > .fusion-product-content
         > .product-details > .product-details-container
             > h3.product-title, .fusion-price-rating
         > .product-buttons
             > .fusion-content-sep
             > .product-buttons-container
                 > p.wc-gzd-additional-info (x2 bis x3)
                 > a.button, a.show_details_button

   .product-buttons liegt also INNERHALB von
   .fusion-product-content, nicht daneben. Deshalb genuegt es,
   .fusion-product-content einzufaerben; die Buttons liegen
   automatisch mit auf der orangen Flaeche.

   Der bisherige Fallback-Block fuer das klassische Layout ist
   hier aufgegangen. Er stand mit ungebundenen Selektoren
   (.product-title, .fusion-product-content) in dieser Datei
   und war wirkungslos, solange sie nur auf Archivseiten lief.
   Auf der Produktseite haette er die Sektion zerlegt:
   height:50px und line-height:0.7 auf .product-title waren die
   Ursache der ueberlappenden Titel im alten Zustand.
   --------------------------------------------------------- */

/* Raster: gleich hohe Karten in einer Zeile */
:is(.popluar-products, .popular-products) ul.products {
	align-items: stretch;
}

:is(.popluar-products, .popular-products) ul.products > li.product {
	display: flex;
}

/* Die Karte selbst: runde Ecken wie im Shop-Listing, ohne
   Rahmen. overflow:hidden beschneidet das Produktbild oben
   mit, deshalb braucht die Bildflaeche keinen eigenen Radius. */
:is(.popluar-products, .popular-products) .fusion-product-wrapper {
	display: flex;
	flex-direction: column;
	width: 100%;
	border: none;
	border-radius: 15px;
	overflow: hidden;
}

/* Orange Textflaeche. flex:1 sorgt zusammen mit
   align-items:stretch dafuer, dass alle Karten einer Zeile
   gleich hoch werden. */
:is(.popluar-products, .popular-products) .fusion-product-content {
	border: none;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 20px 15px;
	background-color: var(--awb-custom_color_2, #c06c4e);
	color: #fff;
}

/* Das Produktbild fuellt die Kartenbreite randlos aus und
   stoesst direkt an die orange Flaeche - im Shop-Listing ist
   der Abstand zwischen Bildunterkante und Farbflaeche
   gemessene 0px. Der scheinbare Abstand im Layout kommt vom
   weissen Rand in den Produktfotos selbst. */
:is(.popluar-products, .popular-products) .product-images,
:is(.popluar-products, .popular-products) .featured-image {
	display: block;
	border-radius: 0;
}

:is(.popluar-products, .popular-products) .featured-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* Titel: 22px und zwei Zeilen wie im Shop-Listing.
   overflow-wrap verhindert, dass lange Produktnamen wie
   "Belugalinsennudeln" in schmalen Spalten aus der Karte
   herauslaufen - genau das passierte vorher bei 36px. */
:is(.popluar-products, .popular-products) .product-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	overflow-wrap: break-word;
	margin: 10px 0 15px;
	font-size: 22px;
	line-height: 1.2;
	min-height: 2.4em; /* 2 Zeilen x 1.2 Zeilenhoehe */
}

:is(.popluar-products, .popular-products) .product-title a,
:is(.popluar-products, .popular-products) .product-title a:visited {
	color: #fff;
}

:is(.popluar-products, .popular-products) .product-title a:hover,
:is(.popluar-products, .popular-products) .product-title a:focus {
	color: #fff;
	text-decoration: underline;
}

/* Preis und Grundpreis. Der zweite, kleinere Grundpreis von
   Germanized (p.price.price-unit) wird ueber .price mit
   erfasst.

   Die 8px entsprechen dem gemessenen Abstand im Shop-Listing
   zwischen Preiszeile und MwSt.-Hinweis. */
:is(.popluar-products, .popular-products) .fusion-price-rating {
	margin: 0 0 8px;
	line-height: 1.4;
}

:is(.popluar-products, .popular-products) .price {
	font-size: 16px;
}

:is(.popluar-products, .popular-products) .price,
:is(.popluar-products, .popular-products) .price .amount,
:is(.popluar-products, .popular-products) .hpt-unitprice {
	color: #fff;
}

:is(.popluar-products, .popular-products) .price.price-unit {
	margin: 4px 0 0;
	font-size: 0.9em;
}

/* Die doppelte Trennlinie entfaellt, das Shop-Listing hat
   keine. Zum Zurueckholen diese Regel loeschen. */
:is(.popluar-products, .popular-products) .fusion-content-sep {
	display: none;
}

/* Pflichtangaben und Buttons untereinander und linksbuendig,
   wie im Shop-Listing.

   Die Flex-Kette von .fusion-product-content bis
   .product-buttons-container gibt die Kartenhoehe nach unten
   durch. Erst der Warenkorb-Link bekommt weiter unten
   margin-top:auto. Dadurch bleiben Titel, Preis und
   Pflichtangaben oben so eng beieinander wie im Shop-Listing,
   und die freie Restflaeche sammelt sich an genau der Stelle,
   an der ohnehin ein Abstand steht - vor den Buttons. Die
   Buttons aller Karten einer Zeile liegen so auf einer Linie,
   auch wenn "Produkt enthaelt: ..." oder ein zweiter
   Grundpreis nur bei einem Teil der Produkte ausgegeben wird.

   Ein margin-top:auto auf dem gesamten Block haette das Loch
   stattdessen zwischen Preis und MwSt.-Hinweis geoeffnet. */
/* Eine Klasse mehr: Avada setzt .product .product-buttons
   { padding-top: 15px } mit (0,2,0). */
:is(.popluar-products, .popular-products) .fusion-product-content .product-buttons {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 0;
}

:is(.popluar-products, .popular-products) .product-buttons-container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1 1 auto;
}

/* Auch hier eine Klasse mehr: Avada setzt
   .fusion-body .product-buttons .wc-gzd-additional-info
   { margin: 0.5em 0 } mit (0,3,0), Germanized zusaetzlich
   .products .wc-gzd-additional-info { margin: 0.7rem 0 }.
   line-height 1.4 statt der geerbten 1.72, damit die beiden
   Zeilen so eng stehen wie im Shop-Listing. */
:is(.popluar-products, .popular-products) .product-buttons .product-buttons-container .wc-gzd-additional-info {
	margin: 0;
	color: #fff;
	font-size: 14.4px;
	line-height: 1.4;
}

/* 20px Abstand zwischen dem letzten Pflichthinweis und dem
   ersten Button - derselbe Wert wie im Shop-Listing. Ueber
   :last-of-type, weil "Produkt enthaelt: ..." nur bei einem
   Teil der Produkte ausgegeben wird. */
:is(.popluar-products, .popular-products) .product-buttons .product-buttons-container .wc-gzd-additional-info:last-of-type {
	margin-bottom: 20px;
}

/* Der Versandkosten-Link hebt sich farblich nicht mehr ab und
   bleibt deshalb unterstrichen. */
:is(.popluar-products, .popular-products) .product-buttons .product-buttons-container .wc-gzd-additional-info a {
	color: #fff;
	text-decoration: underline;
}

/* Warenkorb- und Detail-Link untereinander, 10px Abstand,
   16px Schrift - wie im Shop-Listing. Der letzte Link bekommt
   keinen Abstand nach unten, den liefert das Polster der
   Kartenflaeche. */
:is(.popluar-products, .popular-products) .product-buttons-container .button {
	margin-top: auto;
}

:is(.popluar-products, .popular-products) .product-buttons-container .button,
:is(.popluar-products, .popular-products) .product-buttons-container .show_details_button,
:is(.popluar-products, .popular-products) .product-buttons-container .added_to_cart {
	margin-bottom: 10px;
	padding: 0;
	color: #fff;
	font-size: 16px;
	white-space: nowrap;
}

:is(.popluar-products, .popular-products) .product-buttons-container > a:last-child {
	margin-bottom: 0;
}

:is(.popluar-products, .popular-products) .product-buttons-container .button:hover,
:is(.popluar-products, .popular-products) .product-buttons-container .button:focus,
:is(.popluar-products, .popular-products) .product-buttons-container .show_details_button:hover,
:is(.popluar-products, .popular-products) .product-buttons-container .show_details_button:focus,
:is(.popluar-products, .popular-products) .product-buttons-container .added_to_cart:hover,
:is(.popluar-products, .popular-products) .product-buttons-container .added_to_cart:focus {
	color: #fff;
	text-decoration: underline;
}