/* ===========================================================================
 * cart.css -- die Vorschlagskacheln im Block-Warenkorb.
 *
 * WARUM ES DIESE DATEI GIBT
 *
 * Der Warenkorb ist eine BLOCK-Seite. Seine Cross-Sells rendert WooCommerce
 * clientseitig mit eigenem Markup -- `.cross-sells-product` statt Flatsomes
 * `.row > .product-small`. Damit greift product-card.css dort nicht, und die
 * Kacheln standen eckig und klein neben einer Seite, die sonst ueberall rund
 * und ruhig ist. Nachgebaut wird deshalb mit denselben Variablen aus
 * tokens.css -- keine zweite Wahrheit.
 *
 * DAS MARKUP, GEGEN DAS HIER GESTYLT WIRD
 *
 *   .wp-block-woocommerce-cart-cross-sells-block
 *     h2.wp-block-heading                       <- "Werden oft zusammen ..."
 *     .wp-block-woocommerce-cart-cross-sells-products-block
 *       div                                     <- der Wrapper, OHNE Klasse
 *         .cross-sells-product                  <- je Vorschlag
 *           div                                 <- Bild, Name, Preis
 *           .wc-block-components-product-button <- Schaltflaeche, GESCHWISTER
 *
 * ZWEI STELLEN, AN DENEN EINE FRUEHERE FASSUNG GESCHEITERT IST (01.09.2026):
 *
 * 1. Das Raster hing an `...cross-sells-block > div`. Das traf den
 *    PRODUKTBLOCK, nicht dessen Wrapper -- die Kacheln wurden auf
 *    Spaltenbreite gequetscht und die Titel brachen buchstabenweise um.
 * 2. Die Kartenoptik hing an `.cross-sells-product > div`. Weil die
 *    Schaltflaeche ein GESCHWISTER jenes divs ist, bekam auch sie einen
 *    eigenen Rahmen und stand als leerer Kasten daneben.
 *
 * ZUR SPEZIFITAET: WooCommerce stellt jeder eigenen Regel
 * `.wp-block-woocommerce-cart` voran. Ohne dieses Praefix verlieren die Regeln
 * hier bei Gleichstand -- und zwar lautlos.
 * ======================================================================== */

/* -- Abstand zum Warenkorb und Ueberschrift ------------------------------ */

/* KEINE eigene Trennlinie: Der Warenkorb schliesst seine Positionsliste
   bereits mit einer ab. Eine zweite darueber ergab einen doppelten Strich. */
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block {
	margin-top: var(--shop-space-4);

	/*
	 * DIE KNOPFFARBE KOMMT UEBER ZWEI VARIABLEN, NICHT UEBER EINE REGEL.
	 *
	 * WooCommerce faerbt diese Schaltflaechen selbst:
	 *
	 *   .wc-block-components-product-button .wp-block-button__link {
	 *     background-color: var(--button--color-background);
	 *     border-color:     var(--button--color-background);
	 *     color:            var(--button--color-text) }
	 *
	 * Die beiden Variablen stammen aus den Global Styles der Blockthemes.
	 * Flatsome ist ein klassisches Theme und setzt sie nicht -- uebrig blieb
	 * die Blockvorgabe in Dunkelgrau, die neben Flatsomes Gruen fremd wirkte.
	 *
	 * Sie hier zu belegen ist besser als eine eigene Farbregel: Es bleibt bei
	 * EINER Stelle, an der die Farbe steht, und die ist Flatsomes Primaerfarbe
	 * aus dem Customizer.
	 */
	--button--color-background: var(--fs-color-primary, #325645);
	--button--color-text: #fff;
}

/* Nur der Abstand. Farbe, Groesse und Schreibweise stehen in layout.css --
   dieselbe Ueberschrift gibt es auf der Produktseite noch einmal. */
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .wp-block-heading {
	margin: 0 0 var(--shop-space-3);
}

/* -- Das Raster ---------------------------------------------------------- */

/*
 * DER WRAPPER WIRD NICHT BENANNT, SONDERN GESUCHT.
 *
 * Er traegt keine Klasse, und wo genau er im Baum haengt, entscheidet
 * WooCommerces JavaScript beim Einhaengen -- ein Pfad wie
 * `...products-block > div` ist eine Annahme ueber fremdes Markup und ging am
 * 01.09.2026 daneben: Die Kacheln standen einzeln untereinander, weil der
 * Selektor nichts traf.
 *
 * `:has(> .cross-sells-product)` fragt stattdessen nach der EIGENSCHAFT, die
 * den Wrapper ausmacht: Er ist das Element, dessen direkte Kinder die
 * Vorschlaege sind. Das haelt auch, wenn WooCommerce eine Ebene einzieht.
 */
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block :has(> .cross-sells-product) {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--shop-space-3);
}

@media (max-width: 849px) {
	.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block :has(> .cross-sells-product) {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 549px) {
	.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block :has(> .cross-sells-product) {
		grid-template-columns: 1fr;
	}
}

/* -- Die Kachel ---------------------------------------------------------- */

/*
 * WooCommerce rechnet in Prozentbreiten mit content-box und schiebt die
 * Kacheln ueber padding-left auseinander; im Raster stoert beides. Die
 * nth-child-Regel muss mit zurueckgesetzt werden, sonst bleibt jede dritte
 * Kachel anders als ihre Nachbarn.
 *
 * Die Anmutung ist dieselbe wie im Katalog: farbloser Rahmen im Ruhezustand,
 * der beim Ueberfahren nur die Farbe wechselt. Der Platz ist von Anfang an
 * reserviert, damit nichts springt -- ausfuehrlich begruendet in
 * product-card.css.
 */
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product,
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product:nth-child(3n+3) {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	width: auto;
	margin-bottom: 0;
	padding: var(--shop-space-2);
	text-align: left;
	vertical-align: top;
	background: var(--shop-surface);
	border: 1px solid transparent;
	border-radius: var(--shop-radius-card);
	transition: border-color var(--shop-transition-sanft), box-shadow var(--shop-transition-sanft);
}

.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product:hover {
	border-color: var(--shop-border-hover);
	box-shadow: var(--shop-shadow-hover);
}

/* Der Textblock waechst, damit die Schaltflaechen aller Kacheln auf gleicher
   Hoehe stehen -- unabhaengig davon, wie lang die Produktnamen sind. */
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product > div:first-child {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

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

.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .wc-block-components-product-image {
	margin: 0 0 var(--shop-space-2);
}

.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .wc-block-components-product-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--shop-radius-image);
}

/* -- Schrift ------------------------------------------------------------- */

/*
 * Der Block erbt seine Schriftgroesse nicht von Flatsome, sondern faellt auf
 * die Vorgabe des Blockeditors zurueck -- im Warenkorb landete das bei einer
 * Groesse, die kaum lesbar war. 1rem ist der Fliesstext der Seite.
 */
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .wc-block-components-product-name {
	display: block;
	margin: 0 0 var(--shop-space-1);
	color: var(--shop-text);
	font-size: 1rem;
	line-height: 1.4;
}

/* Preis nach unten: In jeder Kachel steht er damit auf gleicher Hoehe. */
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .wc-block-components-product-price {
	display: block;
	margin-top: auto;
	padding-top: var(--shop-space-1);
	color: var(--shop-text);
	font-size: 1rem;
	font-weight: 600;
}

/* -- Schaltflaeche ------------------------------------------------------- */

/* Ohne diesen Abstand klebte "In den Warenkorb" am Preis. WooCommerce setzt
   selbst nur 1em an den Knopf; hier steht er am Container, damit er auch
   traegt, wenn dort einmal ein anderes Element ausgegeben wird. */
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .wc-block-components-product-button {
	margin-top: var(--shop-space-2);
}

.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .wc-block-components-product-button .wp-block-button__link,
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .wc-block-components-product-button > a {
	display: block;
	width: 100%;
	padding: var(--shop-space-1) var(--shop-space-2);
	border-radius: var(--shop-radius-pill);
	font-size: .9rem;
	text-align: center;
}

/*
 * BEIM UEBERFAHREN WAR DIE SCHRIFT NICHT MEHR ZU LESEN.
 *
 * Flatsomes `.button:hover` und die Blockvorgabe griffen beide zu und tauschten
 * Flaeche oder Schrift einzeln aus -- heraus kam heller Text auf hellem Grund.
 *
 * Hier wird stattdessen der GANZE Knopf abgedunkelt: `brightness` wirkt auf
 * Flaeche und Schrift zugleich, das Verhaeltnis zwischen beiden bleibt also
 * erhalten. Weiss auf #325645 liegt bei 8,23 : 1 (nachgerechnet in
 * tokens.css) und faellt beim Abdunkeln nicht darunter, weil der Untergrund
 * mit dunkler wird.
 *
 * Farbe und Schriftfarbe werden trotzdem noch einmal gesetzt: sonst gewaenne
 * bei einem Theme-Update wieder eine fremde Hover-Regel, und die Aufhellung
 * traefe dann eine Farbe, die wir nicht kennen.
 */
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .wc-block-components-product-button .wp-block-button__link:hover,
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .wc-block-components-product-button .wp-block-button__link:focus-visible,
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .wc-block-components-product-button > a:hover,
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .wc-block-components-product-button > a:focus-visible {
	background-color: var(--fs-color-primary, #325645);
	border-color: var(--fs-color-primary, #325645);
	color: #fff;
	filter: brightness(.88);
}