/* WooCommerce Cross-Sell — Flatsome-kompatibles Styling
 *
 * Theme-Overrides ohne !important: Unsere Elemente tragen eigene Klassen
 * (.wccs-quantity statt .quantity, input.wccs-qty-* statt .button.minus …),
 * daher greifen die !important-Regeln von Flatsome/WooCommerce nicht auf sie.
 * Die Selektoren .wccs-wrap .wccs-item .X sind hochspezifisch genug (0,3,0+),
 * um Theme-Basisstile regulär zu überschreiben; unser Stylesheet lädt zudem
 * spät (Priorität 999), sodass Gleichstände zu unseren Gunsten aufgelöst werden.
 * Einziges verbleibendes !important: der defensive display:none unten. */

.wccs-wrap {
	margin: 12px 0;
	padding: 10px 0;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	/* Auf die volle (definite) Breite des Anzeige-Containers strecken. Wichtig für
	   das Grid-/Slider-Layout: Mini-Cart-Dropdowns betten unser Widget oft in einen
	   Flex-/schrumpfenden Kontext ein — ohne Streckung bekäme das Grid eine
	   „unbestimmte" Breite und würde auf 1 Spalte kollabieren (auto-fit + 1fr). */
	width: 100%;
	max-width: 100%;
	align-self: stretch;
	box-sizing: border-box;
}

.wccs-section {
	width: 100%;
	box-sizing: border-box;
}

.wccs-section + .wccs-section {
	margin-top: 16px;
}

.wccs-heading {
	font-size: 0.95em;
	font-weight: 700;
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: inherit;
}

/* Abstand zwischen der Überschriftszeile (inkl. optionalem Badge) und den
   Vorschlagskarten. Bewusst großzügig, damit die Überschrift nicht klebt. */
.wccs-heading-row {
	margin-bottom: 20px;
}

.wccs-items {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.wccs-wrap .wccs-item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 10px 50px;
	background: rgba(0, 0, 0, 0.02);
	border-radius: 4px;
	transition: background 0.15s ease;
	min-height: 0;
	height: auto;
	max-height: none;
	margin: 0;
	box-sizing: border-box;
}

.wccs-wrap .wccs-item:hover {
	background: rgba(0, 0, 0, 0.04);
}

.wccs-item-image {
	flex: 0 0 56px;
	width: 56px;
	line-height: 0;
	position: relative;
}

.wccs-item-image img {
	width: 100%;
	height: auto;
	border-radius: 3px;
	display: block;
}

.wccs-badge {
	position: absolute;
	top: -6px;
	right: -6px;
	background: #e2401c;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: 10px;
	line-height: 1.2;
	white-space: nowrap;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.wccs-badge--floating {
	top: 6px;
	right: 6px;
}

.wccs-item-body {
	flex: 1;
	min-width: 0;
	padding-right: 4px;
}

.wccs-item-title {
	display: block;
	font-size: 0.9em;
	font-weight: 600;
	line-height: 1.2;
	margin-bottom: 4px;
	color: inherit;
	text-decoration: none;
}

a.wccs-item-title:hover {
	text-decoration: underline;
}

.wccs-item-desc {
	font-size: 0.78em;
	line-height: 1.3;
	opacity: 0.75;
	margin-bottom: 6px;
}

.wccs-item-price {
	font-size: 0.85em;
	margin-bottom: 6px;
}

.wccs-item-price del {
	opacity: 0.6;
	margin-right: 4px;
}

.wccs-item-price ins {
	text-decoration: none;
	font-weight: 700;
	color: #e2401c;
}

/* Falls WooCommerce/Flatsome trotz allem den nativen „Warenkorb anzeigen"-Link
   in unsere Vorschlagskarte einfügt, unsichtbar machen. Hier bleibt !important
   bewusst: der Link kann per Inline-/JS-Stil kommen, den nur !important sicher
   überschreibt. */
.wccs-wrap .added_to_cart:not(.wccs-add-to-cart),
.wccs-wrap .wccs-item .wc-forward:not(.wccs-add-to-cart) {
	display: none !important;
}

/* Action-Bar unten rechts im Item: Menge + Add-to-Cart */
.wccs-wrap .wccs-item .wccs-actions {
	position: absolute;
	right: 10px;
	bottom: 10px;
	top: auto;
	left: auto;
	display: flex;
	align-items: center;
	gap: 8px;
	z-index: 0;
	margin: 0;
}

/* Menge-Selector im Flatsome-Stil */
.wccs-wrap .wccs-item .wccs-quantity {
	display: inline-flex;
	align-items: stretch;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.wccs-wrap .wccs-item .wccs-quantity .wccs-qty-minus,
.wccs-wrap .wccs-item .wccs-quantity .wccs-qty-plus,
.wccs-wrap .wccs-item .wccs-quantity .wccs-qty-input {
	height: 30px;
	min-height: 30px;
	padding: 0;
	margin: 0;
	border: 1px solid rgba(0, 0, 0, 0.15);
	background: #fff;
	color: inherit;
	font-size: 0.85em;
	line-height: 1;
	box-shadow: none;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: textfield;
	border-radius: 0;
}

.wccs-wrap .wccs-item .wccs-quantity .wccs-qty-minus,
.wccs-wrap .wccs-item .wccs-quantity .wccs-qty-plus {
	width: 26px;
	cursor: pointer;
	user-select: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.wccs-wrap .wccs-item .wccs-quantity .wccs-qty-minus {
	border-radius: 3px 0 0 3px;
}

.wccs-wrap .wccs-item .wccs-quantity .wccs-qty-plus {
	border-radius: 0 3px 3px 0;
}

.wccs-wrap .wccs-item .wccs-quantity .wccs-qty-input {
	width: 34px;
	text-align: center;
	border-left: 0;
	border-right: 0;
}

.wccs-wrap .wccs-item .wccs-quantity .wccs-qty-input::-webkit-outer-spin-button,
.wccs-wrap .wccs-item .wccs-quantity .wccs-qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.wccs-wrap .wccs-item .wccs-quantity .wccs-qty-minus:hover,
.wccs-wrap .wccs-item .wccs-quantity .wccs-qty-plus:hover {
	background: #f4f4f4;
}

/* Add-to-cart Button */
.wccs-wrap .wccs-item .wccs-add-to-cart {
	position: static;
	font-size: 0.75em;
	padding: 6px 12px;
	line-height: 1.2;
	min-height: 30px;
	height: 30px;
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: auto;
	max-width: none;
}

.wccs-btn-icon {
	display: inline-block;
	width: auto;
	height: 18px;
	object-fit: contain;
	vertical-align: middle;
}

.wccs-add-to-cart--icon-only {
	padding: 6px 8px;
}

.wccs-add-to-cart--icon-only .wccs-btn-icon {
	width: auto;
	height: 18px;
}

.wccs-add-to-cart.loading {
	opacity: 0.6;
	pointer-events: none;
}

/* Das originale Theme-/WooCommerce-Rädchen behalten, nur mittig zentrieren.
   position:relative gibt dem absoluten ::after einen Bezugspunkt am Button;
   inset:0 + margin:auto zentriert es in beide Richtungen, ohne die Dreh-
   Animation zu stören. Der 4-Klassen-Selektor ist spezifischer als Flatsomes
   .button.loading:after, daher kein !important nötig. */
.wccs-wrap .wccs-item .wccs-add-to-cart.loading {
	position: relative;
}

.wccs-wrap .wccs-item .wccs-add-to-cart.loading::after {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}

/* Item ohne Bild — Badge floaten */
.wccs-item--no-image {
	padding-left: 12px;
}

/* Warenkorb-Zeile — durchgestrichener Preis wenn Rabatt aktiv */
.wccs-price del,
.wccs-subtotal del {
	opacity: 0.6;
	margin-right: 4px;
}

.wccs-price ins,
.wccs-subtotal ins {
	text-decoration: none;
	font-weight: 700;
}

.wccs-price .wccs-badge {
	position: static;
	display: inline-block;
	margin-left: 6px;
	font-size: 10px;
	padding: 1px 5px;
}

/* Checkout- und Warenkorb-Seiten-Kontext (breitere Bereiche → Grid statt Liste) */
.wccs-context-checkout,
.wccs-context-cart {
	margin: 20px 0;
	padding: 16px 0 0;
	background: transparent;
	border-radius: 0;
}

.wccs-context-checkout .wccs-heading,
.wccs-context-cart .wccs-heading {
	font-size: 1.05em;
}

.wccs-context-checkout .wccs-items,
.wccs-context-cart .wccs-items {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 12px;
}

.wccs-context-checkout .wccs-item,
.wccs-context-cart .wccs-item {
	flex: 1 1 220px;
	max-width: 100%;
}

/* ===========================================================================
   Slider-Layout (card_layout = slider)
   Horizontale, wischbare/ziehbare Karten-Reihe mit optionalen Pfeilen (seitliche
   Outline-Kreise) und/oder Bullets (Punkte darunter). Die Slider-Selektoren
   stehen bewusst am Dateiende: bei Spezifitäts-Gleichstand mit den Kontext-
   Regeln (checkout/cart) gewinnt so die spätere Slider-Regel.
   =========================================================================== */
.wccs-layout-slider .wccs-slider {
	position: relative;
}

/* Scroll-Track: Reihe statt Spalte, horizontal scrollbar, Snap pro Karte,
   Scrollbalken versteckt (Steuerung erfolgt per Wisch/Drag/Pfeile/Bullets). */
.wccs-layout-slider .wccs-items {
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 10px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	cursor: grab;
	scroll-padding-left: 0;
}

.wccs-layout-slider .wccs-items::-webkit-scrollbar {
	width: 0;
	height: 0;
	display: none;
}

.wccs-layout-slider .wccs-items.wccs-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	user-select: none;
}

/* Karten: feste, nicht schrumpfende Breite; nächste Karte „lugt" hervor. In
   schmalen Bereichen (Mini-Cart) ~1 Karte, in breiten (Checkout) mehrere. */
.wccs-layout-slider .wccs-item {
	flex: 0 0 clamp(220px, 82%, 300px);
	max-width: 300px;
	scroll-snap-align: start;
	/* flex-grow-Übergang: die letzte verbleibende Karte wächst dezent auf volle
	   Breite (siehe .wccs-single, per JS nach dem ersten Layout gesetzt). */
	transition: flex-grow 0.3s ease, max-width 0.3s ease;
}

/* Bleibt nur noch eine Karte übrig (z. B. nachdem die andere in den Warenkorb
   wanderte), füllt sie den Slider voll aus statt bei ~82 % zu enden. */
.wccs-layout-slider .wccs-items.wccs-single .wccs-item {
	flex-grow: 1;
	max-width: 100%;
}

/* Während des Ziehens keine versehentlichen Klicks auf Links/Buttons. */
.wccs-layout-slider .wccs-items.wccs-dragging a,
.wccs-layout-slider .wccs-items.wccs-dragging .wccs-add-to-cart {
	pointer-events: none;
}

/* Pfeile: Outline-Kreise, vertikal mittig, an den Slider-Rändern überlappend.
   Zwei-Klassen-Selektor (0,2,0): schlägt das inline button:not(.icon){border-radius
   :6px !important} (0,1,1) mancher Themes — nötig für den runden Kreis. */
.wccs-layout-slider .wccs-slider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 32px;
	height: 32px;
	/* min-Werte und line-height neutralisieren: Themes (z. B. Flatsome) geben
	   nackten button-Elementen min-height:2.5em, min-width und line-height:2.4em,
	   was den Kreis sonst zu einem 38px-Oval aufbläht. Wir setzen nur height/width. */
	min-width: 0;
	min-height: 0;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid currentColor;
	/* !important: manche Themes erzwingen border-radius per inline-!important auf
	   button:not(.icon) — nur !important stellt den Kreis wieder her. */
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.92);
	color: inherit;
	font-size: 20px;
	line-height: 0;
	text-transform: none;
	box-sizing: border-box;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
	opacity: 0.9;
	transition: opacity 0.15s ease, background 0.15s ease;
}

.wccs-slider-arrow:hover,
.wccs-slider-arrow:focus {
	opacity: 1;
	background: #fff;
	outline: none;
}

.wccs-slider-arrow span {
	display: block;
	margin-top: -2px;
}

.wccs-slider-prev {
	left: -4px;
}

.wccs-slider-next {
	right: -4px;
}

/* An den Enden ausgeblendet (JS setzt is-disabled). */
.wccs-slider-arrow.is-disabled {
	opacity: 0;
	pointer-events: none;
}

/* Bullets darunter — Basis (gemeinsam für alle drei Stile). */
.wccs-slider-bullets {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	color: inherit;
}

.wccs-slider-bullets:empty {
	display: none;
}

.wccs-bullet {
	appearance: none;
	-webkit-appearance: none;
	padding: 0;
	margin: 0;
	border: 0;
	/* min-Werte und line-height neutralisieren — sonst geben Themes (Flatsome:
	   min-height:2.5em, min-width:24px, line-height:2.4em) dem nackten button
	   eine feste Mindestgröße, die unsere width/height überstimmt. */
	min-width: 0;
	min-height: 0;
	line-height: 0;
	text-transform: none;
	box-sizing: border-box;
	background: currentColor;
	color: inherit;
	cursor: pointer;
	opacity: 0.3;
	transition: opacity 0.2s ease, width 0.2s ease, background 0.2s ease;
}

.wccs-bullet.is-active {
	opacity: 1;
}

/* border-radius mit !important: Themes können border-radius per inline-!important
   auf button:not(.icon) erzwingen (z. B. 6px) — nur !important stellt Punkt/Pill her. */

/* (a) Klassische Punkte */
.wccs-bullets-dots .wccs-bullet {
	width: 8px;
	height: 8px;
	border-radius: 50% !important;
}

/* (b) Kurze Striche/Linien */
.wccs-bullets-lines .wccs-bullet {
	width: 18px;
	height: 3px;
	border-radius: 2px !important;
}

/* (c) Pill — aktiver Indikator dehnt sich */
.wccs-bullets-pill .wccs-bullet {
	width: 8px;
	height: 8px;
	border-radius: 5px !important;
}

.wccs-bullets-pill .wccs-bullet.is-active {
	width: 22px;
}

/* ===========================================================================
   Grid-Layout (card_layout = grid) — ZWEI ZUSTÄNDE, per JS umgeschaltet
   (wccsInitGrids in cross-sell.js). Grund: In manchen Theme-Mini-Carts hat der
   Anzeige-Container eine „unbestimmte" Breite; ein reines CSS-auto-fit-Grid würde
   dort auf 1 Spalte kollabieren und sich am Bild aufblähen. Deshalb misst JS die
   verfügbare Breite und setzt Klassen:
   - Genug Breite für >= 2 Spalten: .wccs-grid-on + .wccs-grid-cols-N
       -> echtes N-Spalten-Raster mit quadratischen Kachel-Karten.
   - Nur 1 Spalte (schmal ODER Breite nicht ermittelbar): KEINE Klasse
       -> Karten bleiben im horizontalen „stacked"-Layout (Bild links, kompakt,
          Höhe < Breite) — sieht bei jedem Theme/jeder Breite sauber aus.
   Selektoren am Dateiende → gewinnen bei Spezifitäts-Gleichstand gegen die
   Kontext-Regeln (checkout/cart).
   =========================================================================== */

/* Spalten-Raster (nur wenn JS genügend Breite ermittelt hat). */
.wccs-layout-grid.wccs-grid-cols-2 .wccs-items,
.wccs-layout-grid.wccs-grid-cols-3 .wccs-items,
.wccs-layout-grid.wccs-grid-cols-4 .wccs-items {
	display: grid;
	gap: 10px;
}

.wccs-layout-grid.wccs-grid-cols-2 .wccs-items {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wccs-layout-grid.wccs-grid-cols-3 .wccs-items {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wccs-layout-grid.wccs-grid-cols-4 .wccs-items {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* --- Kachel-Karte (nur im aktiven Raster, >= 2 Spalten) --- */
.wccs-layout-grid.wccs-grid-on .wccs-item {
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
	padding: 0;          /* randlos: Bild bündig an Ober-/Seitenkanten */
	text-align: center;
	overflow: hidden;    /* Bild an die abgerundeten Kartenecken beschneiden */
}

/* Bild randlos über die volle Kartenbreite; Seitenverhältnis kommt aus der
   Format-Klasse (.wccs-gridimg-43 / -11 / -34). object-fit:cover füllt die Fläche
   randlos (beschneidet bei Bedarf). */
.wccs-layout-grid.wccs-grid-on .wccs-item-image {
	flex: none;
	width: 100%;
	position: relative;   /* Anker; Höhe kommt aus aspect-ratio der Format-Klasse */
	margin: 0;
	overflow: hidden;
}

/* Bild absolut füllend → das <img> bestimmt NICHT die Box-Höhe, sonst würde in der
   Flex-Spalte das natürliche Bildverhältnis das aspect-ratio überstimmen. */
.wccs-layout-grid.wccs-grid-on .wccs-item-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
	border-radius: 0;
	display: block;
}

/* Rabatt-Badge oben LINKS, INNERHALB des Bildes (Karte clippt Überstände; Info-
   Badge sitzt oben rechts → keine Überlappung). */
.wccs-layout-grid.wccs-grid-on .wccs-badge {
	top: 6px;
	left: 6px;
	right: auto;
}

.wccs-layout-grid.wccs-grid-on .wccs-item-body {
	flex: none;
	min-width: 0;
	padding: 0 10px;
}

/* Titel auf 2 Zeilen begrenzen; Kurzbeschreibung im Kachel-Grid ausblenden. */
.wccs-layout-grid.wccs-grid-on .wccs-item-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wccs-layout-grid.wccs-grid-on .wccs-item-desc {
	display: none;
}

/* Aktionszeile unten bündig, INLINE: Menge +/- und Button in EINER Reihe. Der
   kompakte Icon-Button (nur-Icon) passt neben +/-; ein Text-Button bricht sauber
   in die nächste Zeile um (kein Überlauf). */
.wccs-layout-grid.wccs-grid-on .wccs-item .wccs-actions {
	position: static;
	right: auto;
	bottom: auto;
	top: auto;
	left: auto;
	margin-top: auto;
	padding: 0 10px 10px;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.wccs-layout-grid.wccs-grid-on .wccs-item .wccs-add-to-cart {
	width: auto;
	justify-content: center;
}

/* Menge im Kachel-Grid kompakter, damit Menge + Icon-Button in schmalen Karten
   zuverlässig nebeneinander passen. */
.wccs-layout-grid.wccs-grid-on .wccs-item .wccs-quantity .wccs-qty-minus,
.wccs-layout-grid.wccs-grid-on .wccs-item .wccs-quantity .wccs-qty-plus {
	width: 22px;
}

.wccs-layout-grid.wccs-grid-on .wccs-item .wccs-quantity .wccs-qty-input {
	width: 26px;
}

/* --- Bildformat der Kachel (nur aktives Grid) --- */
.wccs-layout-grid.wccs-grid-on.wccs-gridimg-43 .wccs-item-image {
	aspect-ratio: 4 / 3;
}

.wccs-layout-grid.wccs-grid-on.wccs-gridimg-11 .wccs-item-image {
	aspect-ratio: 1 / 1;
}

/* --- 3:4 „kartenfüllend": Bild füllt die ganze Karte, Titel/Preis/Menge/Button
   liegen unten ÜBER dem Bild, mit Kontrast-Verlauf für Lesbarkeit. --- */
.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34 .wccs-item {
	position: relative;
	aspect-ratio: 3 / 4;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 2px;
	padding: 0;
}

/* Bild als Hintergrund (füllt die Karte). */
.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34 .wccs-item-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
}

.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34 .wccs-item-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Kontrast-Layer unten (Aussehen kommt aus der Stil-Klasse .wccs-ov-*). */
.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34 .wccs-item::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	pointer-events: none;
}

/* a) Soft-Verlauf — hoch & sehr weich (klar als „Verlauf" erkennbar). */
.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34.wccs-ov-gradient .wccs-item::after {
	height: 72%;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.08) 72%, rgba(0, 0, 0, 0));
}

/* b) Frosted — ROLL-OVER: Bild bleibt clean im Ruhezustand; beim Hover/Fokus legt
   sich ein Frosted-Layer über das GANZE Bild und Titel/Preis/Menge erscheinen.
   Badges + „In den Warenkorb"-Button sind IMMER sichtbar. */
.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34.wccs-ov-blur .wccs-item::after {
	height: 100%;
	background: rgba(0, 0, 0, 0.38);
	-webkit-backdrop-filter: blur(0);
	backdrop-filter: blur(0);
	opacity: 0;
	transition: opacity 0.4s ease, -webkit-backdrop-filter 0.55s ease, backdrop-filter 0.55s ease;
}

/* Leichter, organischer Bild-Zoom beim Hover (Ken-Burns-Effekt); die Karte clippt
   (overflow:hidden), sodass das vergrößerte Bild nicht übersteht. */
.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34.wccs-ov-blur .wccs-item-image img {
	transition: transform 0.6s ease;
}
.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34.wccs-ov-blur .wccs-item:hover .wccs-item-image img,
.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34.wccs-ov-blur .wccs-item:focus-within .wccs-item-image img {
	transform: scale(1.06);
}

/* Menge/Button vertikal (Menge über dem zentrierten Button). */
.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34.wccs-ov-blur .wccs-item .wccs-actions {
	flex-direction: column;
	align-items: center;
}

/* Ruhezustand: Titel/Preis/Menge ausgeblendet + leicht nach unten versetzt; sie
   steigen beim Hover sanft auf (organischer). Platz bleibt reserviert (kein Springen
   des Buttons), transparent über dem Bild → keine sichtbare Lücke. */
.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34.wccs-ov-blur .wccs-item-title,
.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34.wccs-ov-blur .wccs-item-price,
.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34.wccs-ov-blur .wccs-quantity {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.38s ease 0.08s, transform 0.38s ease 0.08s;
}

/* Hover/Fokus → Frosted progressiv einblenden (Blur 0 → 7px). */
.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34.wccs-ov-blur .wccs-item:hover::after,
.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34.wccs-ov-blur .wccs-item:focus-within::after {
	opacity: 1;
	-webkit-backdrop-filter: blur(7px);
	backdrop-filter: blur(7px);
}

/* Inhalt aufsteigend einblenden. */
.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34.wccs-ov-blur .wccs-item:hover .wccs-item-title,
.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34.wccs-ov-blur .wccs-item:hover .wccs-item-price,
.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34.wccs-ov-blur .wccs-item:hover .wccs-quantity,
.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34.wccs-ov-blur .wccs-item:focus-within .wccs-item-title,
.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34.wccs-ov-blur .wccs-item:focus-within .wccs-item-price,
.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34.wccs-ov-blur .wccs-item:focus-within .wccs-quantity {
	opacity: 1;
	transform: translateY(0);
}

/* Touch / keine Hover-Fähigkeit: kein Roll-over → alles dauerhaft sichtbar, Frosted
   nur als unterer Balken (das Produktbild bleibt sichtbar). Transforms zurücksetzen. */
@media (hover: none) {
	.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34.wccs-ov-blur .wccs-item::after {
		height: 46%;
		opacity: 1;
		-webkit-backdrop-filter: blur(7px);
		backdrop-filter: blur(7px);
	}
	.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34.wccs-ov-blur .wccs-item-title,
	.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34.wccs-ov-blur .wccs-item-price,
	.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34.wccs-ov-blur .wccs-quantity {
		opacity: 1;
		transform: none;
	}
	.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34.wccs-ov-blur .wccs-item-image img {
		transform: none;
	}
	.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34.wccs-ov-blur .wccs-item .wccs-actions {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

/* c) Solid — GLEICHMÄSSIGE, deckende Fläche EXAKT hinter dem Inhalt (Titel/Preis/
   Menge/Button). Kein Verlauf, kein weicher Rand; der Titel liegt immer INNERHALB
   der Fläche. Statt eines ::after-Balkens bekommt der Inhaltsblock selbst die Fläche
   (Body + Actions bündig, gleiche Farbe). */
.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34.wccs-ov-panel .wccs-item::after {
	display: none;
}

.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34.wccs-ov-panel .wccs-item {
	gap: 0;
}

.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34.wccs-ov-panel .wccs-item-body {
	background: var( --wccs-panel-bg, rgba( 0, 0, 0, 0.85 ) );
	padding: 10px 10px 6px;
}

.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34.wccs-ov-panel .wccs-item-price {
	margin-bottom: 0;
}

.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34.wccs-ov-panel .wccs-item .wccs-actions {
	background: var( --wccs-panel-bg, rgba( 0, 0, 0, 0.85 ) );
	padding-top: 6px;
}

/* Textfarbe der Solid-Fläche automatisch (hell/dunkel je nach Flächenfarbe). */
.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34.wccs-ov-panel .wccs-item-title,
.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34.wccs-ov-panel .wccs-item-price,
.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34.wccs-ov-panel .wccs-item-price ins,
.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34.wccs-ov-panel .wccs-item-price .woocommerce-Price-amount,
.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34.wccs-ov-panel .wccs-item-price bdi {
	color: var( --wccs-panel-text, #fff ) !important;
}

.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34.wccs-ov-panel .wccs-item-price del,
.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34.wccs-ov-panel .wccs-item-price del .woocommerce-Price-amount,
.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34.wccs-ov-panel .wccs-item-price del bdi {
	color: var( --wccs-panel-text, #fff ) !important;
	opacity: 0.7;
}

/* Inhalt über Bild + Verlauf. */
.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34 .wccs-item-body,
.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34 .wccs-item .wccs-actions {
	position: relative;
	z-index: 2;
}

.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34 .wccs-item-body {
	padding: 0 10px;
}

.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34 .wccs-item .wccs-actions {
	margin-top: 0;
	padding: 4px 10px 10px;
}

/* Weiße, lesbare Schrift über dem Bild. wc_price() rendert verschachtelte
   .woocommerce-Price-amount/bdi-Spans mit eigener Theme-Farbe → gezielt weiß setzen
   (!important, da Themes die Preisfarbe teils mit !important erzwingen). */
.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34 .wccs-item-title,
.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34 .wccs-item-price,
.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34 .wccs-item-price ins,
.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34 .wccs-item-price .woocommerce-Price-amount,
.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34 .wccs-item-price bdi {
	color: #fff !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Durchgestrichener Preis auf Verlauf/Frosted: heller + kräftiger Schatten, damit er
   auch auf hellem, weichgezeichnetem Bild lesbar bleibt. Bleibt durch den Durchstrich
   klar als „alter Preis" erkennbar; der Aktionspreis (ins, fett) dominiert weiter. */
.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34 .wccs-item-price del,
.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34 .wccs-item-price del .woocommerce-Price-amount,
.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34 .wccs-item-price del bdi {
	color: rgba(255, 255, 255, 0.92) !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.wccs-layout-grid.wccs-grid-on.wccs-gridimg-34 .wccs-badge {
	z-index: 3;
}

/* Universelle Stacking-Absicherung (theme-neutral): Unsere Karten sind
   position:relative; nach den CSS-Malregeln malen positionierte Elemente ÜBER
   nicht-positionierten (statischen) — auch wenn diese im DOM später kommen. In
   Off-Canvas-Mini-Carts (z. B. Flatsome) würden die Karten dadurch über einen
   statischen Footer (Zwischensumme/Buttons) malen. `isolation:isolate` macht den
   gesamten Cross-Sell-Block zu EINEM atomaren Stacking-Kontext, der in normaler
   Dokumentreihenfolge malt — die z-indexe der Karten bleiben eingeschlossen und
   überlagern keine nachfolgenden Theme-Elemente. Kein Theme-Code nötig. */
.wccs-wrap {
	isolation: isolate;
}