/* =========================================================
   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 */
}

/* Die Kuerzung sitzt an der h3, die Auslassungspunkte nehmen
   deshalb deren Farbe an - nicht die des Links. Ohne diese
   Regel stand "..." im Braun der Ueberschriften. */
:is(.popluar-products, .popular-products) .product-title {
	color: #fff;
}

: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;
}

/* Icon vor dem Text wie im Shop-Listing: in derselben Zeile,
   buendig mit Titel und Preis, 0.7em Abstand zum Text.
   Avada setzt das Icon absolut mit margin-left:-14px und
   rechnet mit einem Innenabstand links am Link. Den gibt es
   hier nicht (padding:0 oben), das Icon rutschte deshalb an
   die Kartenkante und unter den Text. */
:is(.popluar-products, .popular-products) .product-buttons-container .button,
:is(.popluar-products, .popular-products) .product-buttons-container .show_details_button {
	display: inline-flex;
	align-items: center;
}

:is(.popluar-products, .popular-products) .product-buttons-container .button::before,
:is(.popluar-products, .popular-products) .product-buttons-container .show_details_button::before {
	position: static;
	flex: 0 0 1.05em; /* gleiche Breite fuer beide Icons, Texte stehen buendig */
	width: 1.05em;
	margin: 0 0.7em 0 0;
	line-height: 1;
	text-align: center;
}

: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;
}


/* ---------------------------------------------------------
   4. Seitennavigation unter dem Produktlisting

   Markup von Avada (gemessen):
   .fusion-post-cards > .pagination
     > a.pagination-prev > span.page-prev + span.page-text
     > a.inactive | span.current
     > a.pagination-next > span.page-text + span.page-next

   Runde Schaltflaechen, mittig unter dem Raster, die aktuelle
   Seite im dunklen Olivgruen. Vor und Zurueck als Pfeil im
   hellen Kreis, der Text bleibt fuer Screenreader erhalten.

   Rechts daneben die Produktanzahl. Den Text schreibt
   inc/woocommerce/shop.php als Variable --hof-produktanzahl,
   ohne Variable erscheint nichts.

   Spezifitaet: Avada setzt Groesse und Zeilenhoehe ueber
   body:not(.avada-has-pagination-padding) .pagination .current
   mit (0,3,1). Die eigenen Regeln stehen deshalb auf
   .fusion-body .fusion-post-cards .pagination.pagination -
   der doppelte Klassenname hebt sie auf (0,4,1) und mehr.
   --------------------------------------------------------- */

.fusion-body .fusion-post-cards .pagination.pagination {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 40px;
	margin-top: 40px;
}

.fusion-body .fusion-post-cards .pagination.pagination > a,
.fusion-body .fusion-post-cards .pagination.pagination > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(145, 112, 90, 0.12);
	color: var(--awb-color3, #51453e);
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.fusion-body .fusion-post-cards .pagination.pagination > a:hover {
	background: rgba(145, 112, 90, 0.24);
	color: var(--awb-color3, #51453e);
}

.fusion-body .fusion-post-cards .pagination.pagination > a:focus-visible {
	outline: 2px solid var(--awb-color5, #74763b);
	outline-offset: 2px;
}

/* Aktuelle Seite */
.fusion-body .fusion-post-cards .pagination.pagination > .current {
	background: var(--awb-custom_color_5, #5e602f);
	color: #fff;
}

/* Auslassungspunkte, falls Avada sie ausgibt */
.fusion-body .fusion-post-cards .pagination.pagination > .pagination-dots {
	width: auto;
	min-width: 16px;
	background: transparent;
}

/* Vor und Zurueck: heller Kreis mit feinem Rand */
.fusion-body .fusion-post-cards .pagination.pagination > .pagination-next,
.fusion-body .fusion-post-cards .pagination.pagination > .pagination-prev {
	background: #fff;
	border: 1px solid rgba(81, 69, 62, 0.3);
}

.fusion-body .fusion-post-cards .pagination.pagination > .pagination-next:hover,
.fusion-body .fusion-post-cards .pagination.pagination > .pagination-prev:hover {
	background: rgba(145, 112, 90, 0.12);
}

/* "Vor" und "Zurueck" nur fuer Screenreader */
.fusion-body .fusion-post-cards .pagination.pagination .page-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Pfeil aus zwei Raendern, unabhaengig von einer Icon-Schrift */
.fusion-body .fusion-post-cards .pagination.pagination .page-next,
.fusion-body .fusion-post-cards .pagination.pagination .page-prev {
	display: block;
	width: 8px;
	height: 8px;
	margin: 0;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
}

.fusion-body .fusion-post-cards .pagination.pagination .page-next {
	transform: translateX(-2px) rotate(-45deg);
}

.fusion-body .fusion-post-cards .pagination.pagination .page-prev {
	transform: translateX(2px) rotate(135deg);
}

/* Avada setzt zusaetzlich einen Pfeil aus seiner Icon-Schrift
   (awb-icons) ausserhalb des Kreises: an .pagination-prev
   ::before und .pagination-next::after (gemessen). Der eigene
   Pfeil im Kreis ersetzt ihn. */
.fusion-body .fusion-post-cards .pagination.pagination > .pagination-prev::before,
.fusion-body .fusion-post-cards .pagination.pagination > .pagination-next::after,
.fusion-body .fusion-post-cards .pagination.pagination .page-next::before,
.fusion-body .fusion-post-cards .pagination.pagination .page-prev::before {
	content: none;
}

/* Produktanzahl rechts auf gleicher Hoehe */
.fusion-body .fusion-post-cards .pagination.pagination::after {
	content: var(--hof-produktanzahl);
	position: absolute;
	top: 50%;
	right: 0;
	display: block;
	transform: translateY(-50%);
	color: var(--awb-color3, #51453e);
	font-size: 14px;
	line-height: 1.4;
	opacity: 0.85;
	white-space: nowrap;
}

/* Smartphone: Anzahl unter die Schaltflaechen, damit sie sich
   nicht ueberlagern */
@media only screen and (max-width: 640px) {

	.fusion-body .fusion-post-cards .pagination.pagination {
		gap: 8px;
		margin-top: 30px;
	}

	.fusion-body .fusion-post-cards .pagination.pagination::after {
		position: static;
		flex: 0 0 100%;
		margin-top: 4px;
		transform: none;
		text-align: center;
	}
}


/* ---------------------------------------------------------
   5. Kategorie-Filter auf dem Smartphone

   Avada-Element "Produktfilter", Typ Kategorien, im Builder
   nur fuer Smartphone sichtbar und zugeklappt geladen
   (.awb-load-collapsed). Bisher wirkte es wie eine
   Zwischenueberschrift: 93px hoch (Titel mit je 32px Abstand
   oben und unten), ohne Flaeche und Rahmen, antippbar war nur
   der 18px kleine Pfeil.

   Jetzt eine kompakte Schaltflaeche: beige Flaeche mit Rahmen
   und 10px Radius, Pfeil im dunkelgruenen Kreis, 54px hoch.
   Der Knopf bekommt eine unsichtbare Tippflaeche ueber die
   ganze Leiste (::before, inset 0), ein Tipp auf den Titel
   klappt also ebenfalls auf. Geoeffnet bleibt Avadas Bild-
   Raster (3 Spalten) unveraendert, nur mit weissem Grund.

   !important nur bei der Schriftgroesse: Avadas responsive
   Typografie setzt sie selbst mit !important.
   --------------------------------------------------------- */

@media only screen and (max-width: 640px) {

	.awb-woo-filters-categories.awb-load-collapsed {
		margin-bottom: 24px;
	}

	.awb-woo-filters-categories.awb-load-collapsed .widget_product_categories {
		overflow: hidden;
		border: 1px solid rgba(67, 44, 35, 0.18);
		border-radius: 10px;
		background: #f2e8da;
	}

	.awb-woo-filters-categories.awb-load-collapsed .widget_product_categories > .heading {
		position: relative; /* Bezug fuer die Tippflaeche */
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		min-height: 54px;
		margin: 0;
		padding: 8px 10px 8px 18px;
	}

	.awb-woo-filters-categories.awb-load-collapsed .widget_product_categories > .heading .widget-title.widget-title {
		margin: 0;
		color: var(--awb-color3, #51453e);
		font-size: 17px !important;
		line-height: 1.3;
		letter-spacing: 0;
	}

	.awb-woo-filters-categories.awb-load-collapsed .awb-toggle-filter {
		display: inline-flex;
		flex: 0 0 36px;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: var(--awb-custom_color_5, #5e602f);
		color: #fff;
		font-size: 16px;
		cursor: pointer;
	}

	/* ganze Leiste antippbar */
	.awb-woo-filters-categories.awb-load-collapsed .awb-toggle-filter::before {
		content: "";
		position: absolute;
		inset: 0;
	}

	.awb-woo-filters-categories.awb-load-collapsed .awb-toggle-filter i {
		color: #fff;
	}

	.awb-woo-filters-categories.awb-load-collapsed .awb-toggle-filter:focus-visible {
		outline: 2px solid var(--awb-color5, #74763b);
		outline-offset: 3px;
	}

	.awb-woo-filters-categories.awb-load-collapsed ul.product-categories {
		margin: 0;
		padding: 6px 16px 18px;
		background: #fff;
	}
}


/* ---------------------------------------------------------
   6. Lagerhinweis "Nicht vorraetig"

   Avada stellt den Hinweis neben den Preis, in gleicher Groesse
   und Farbe wie der Preis. Dort ging er zwischen Preis,
   Grundpreis und Pflichtangaben unter.

   Jetzt steht er an der Stelle, an der sonst "In den Warenkorb"
   steht, als weisses Feld. "Details" rutscht darunter, die
   Karte bleibt also gleich aufgebaut.

   Zwei Raster, zwei Wege:

   A) Shop-Listing (Post Cards). Die Karte kennt den Lagerstand
      nicht als Klasse, der Hinweis steckt im Preis-Element.
      Ueber :has() wird er dort ausgeblendet und im Button-
      Bereich (.fusion-post-card-cart) wieder ausgegeben.

   B) Produktseite, "Was andere Geniesser besonders lieben".
      Dort traegt li.product die WooCommerce-Klasse outofstock.

   Der Text steht im CSS, weil ein Pseudo-Element keinen fremden
   Text uebernehmen kann. Wird die Formulierung in WooCommerce
   geaendert, muss sie hier mitgeaendert werden.

   Farben, gemessen gegen die orange Karte (#c06c4e):
   weisses Feld 3,82 : 1, dunkelbraunes 3,39 : 1, dieses
   Braunschwarz (#2b1c16) 4,29 : 1 - es hebt sich am staerksten
   ab. Weisse Schrift darauf: 16,4 : 1.
   --------------------------------------------------------- */

.fusion-body .fusion-post-cards-grid-column.product .fusion-woo-price-tb .stock.out-of-stock,
:is(.popluar-products, .popular-products) li.product .stock.out-of-stock {
	display: none;
}

.fusion-post-cards-grid-column.product:has(.stock.out-of-stock) .fusion-post-card-cart::before,
:is(.popluar-products, .popular-products) li.product.outofstock .product-buttons-container::before {
	content: "Nicht vorrätig";
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	margin: 0 0 10px;
	padding: 6px 14px;
	border-radius: 999px;
	background: #2b1c16; /* dunkles Braunschwarz, siehe Kommentar */
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.2;
}

/* Im klassischen Raster schiebt margin-top:auto den ersten
   Button nach unten; das Feld gehoert mit nach unten. */
:is(.popluar-products, .popular-products) li.product.outofstock .product-buttons-container::before {
	margin-top: auto;
}


/* ---------------------------------------------------------
   7. Sterne und Bewertungshinweis in den Produktkarten

   In .fusion-price-rating liegen drei Dinge: die Sterne, der
   Pflichthinweis von Germanized ("Ungeprüfte Gesamtbewertungen",
   verlinkt auf die Seite zur Echtheit) und der Preis.

   Avada schiebt die Sterne mit order:2 ans Ende und laesst sie
   nach rechts schwimmen. Sie standen dadurch neben dem Preis,
   der Hinweis darueber in voller Textgroesse - unruhig und
   schwer zuzuordnen.

   Jetzt eine ruhige Spalte: Sterne, darunter der Hinweis
   kleiner und leicht zurueckgenommen, darunter der Preis.
   Der Hinweis bleibt sichtbar und verlinkt, er ist Pflicht,
   sobald Bewertungen gezeigt werden.
   --------------------------------------------------------- */

/* Eine Klasse mehr als Avada: dort steht
   .product-details-container .fusion-price-rating mit
   justify-content:space-between und align-items:center (0,2,0).
   shop-listing.css laedt vor dem Avada-Stylesheet, bei
   Gleichstand gewaenne sonst Avada - der Block war dadurch
   mittig statt linksbuendig. */
:is(.popluar-products, .popular-products) .product-details-container .fusion-price-rating {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 4px;
	text-align: left;
}

/* Avada: .product-details-container .fusion-price-rating
   .star-rating { order: 2 } und .product-details .star-rating
   { float: right } - beides wird hier zurueckgenommen.

   Die Sterne selbst sind Zeichen in Pseudo-Elementen und
   holen ihre Farbe aus
   .fusion-body .fusion-wrapper .star-rating::before bzw.
   span::before. Dort stand das Oliv (#74763b) der Palette, das
   auf der orangen Karte fremd wirkte. Jetzt weiss wie der
   uebrige Kartentext, leere Sterne blasser. */
:is(.popluar-products, .popular-products) .product-details-container .fusion-price-rating .star-rating {
	order: 0;
	float: none;
	margin: 0;
	color: #fff;
	font-size: 13px;
}

:is(.popluar-products, .popular-products) .product-details-container .fusion-price-rating .wc-gzd-rating-authenticity-status {
	order: 0;
	margin: 0;
	font-size: 12px;
	line-height: 1.3;
	opacity: 0.8;
}

:is(.popluar-products, .popular-products) .product-details-container .fusion-price-rating .wc-gzd-rating-authenticity-status a {
	color: #fff;
	text-decoration: underline;
}

:is(.popluar-products, .popular-products) .product-details-container .fusion-price-rating .price {
	order: 0;
	margin-top: 4px;
}

.fusion-body .fusion-wrapper :is(.popluar-products, .popular-products) .star-rating::before {
	color: rgba(255, 255, 255, 0.45); /* leere Sterne */
}

.fusion-body .fusion-wrapper :is(.popluar-products, .popular-products) .star-rating span::before {
	color: #fff; /* gefuellte Sterne */
}