/* 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);
}

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