/*!
 * SK24 Produkt-Card – Feinjustierung Loop-Karten (alle Grogin-Layouts).
 *
 * Greift in alle Grogin-Loop-Layouts (product-type-1, product-type-2,
 * product-custom-type1/2/3/4) und bringt die Karten optisch auf die
 * SK24-Vorgabe (Mockup):
 *
 *   1) Bild
 *   2) Titel              (zuerst)
 *   3) Sterne + Anzahl    (darunter)
 *   4) ─── Trennlinie
 *   5) ⬇ Digitales Produkt   |   🛡 Originalprodukt
 *   6) Preis (groß, bold)
 *   7) inkl. MwSt. (klein)
 *   8) Voll-Breite-Button „In den Warenkorb"  +
 *
 * Stock-Label im Loop wird ausgeblendet (im Mockup nicht vorgesehen).
 */

/* =====================================================
   1. Sicherstellen, dass die Related-Section in der
   Single-Product-Page (Flex-Layout) volle Breite belegt
   – sonst kollabiert sie als Flex-Item neben den 2
   Produkt-Spalten zur intrinsischen Inhaltsbreite.
   ===================================================== */
.single-product-wrapper > section.site-module,
.single-product-wrapper > .site-module {
	width: 100%;
	flex: 0 0 100%;
	min-width: 0;
}

/* =====================================================
   2. Content-Wrapper als Flex-Spalte mit Reordering.
   – BEWUSST kein `container-type: inline-size`, weil das
     in Flex-Containern (Single-Product-Page Sidebar) das
     Layout der Eltern kaputt macht. Stattdessen reine
     Media Queries für das Stack-Verhalten der Pills.
   ===================================================== */
.products .product .product-wrapper .content-wrapper {
	display: flex !important;
	flex-direction: column !important;
	gap: 4px;
}

.products .product .product-wrapper .content-wrapper .product-heading        { order: 1; }
.products .product .product-wrapper .content-wrapper .sk24-pf-row-4731       { order: 2; }
.products .product .product-wrapper .content-wrapper .product-price-wrapper  { order: 3; }
.products .product .product-wrapper .content-wrapper .wc-gzd-additional-info { order: 4; }
.products .product .product-wrapper .content-wrapper .product-cart-button,
.products .product .product-wrapper .content-wrapper .product-cart           { order: 5; }

/* "In stock"-Label im Loop verbergen (Vorgabe / Mockup) */
.products .product .product-wrapper .product-stock {
	display: none !important;
}

/* =====================================================
   3. Heading: Titel oben, Sterne darunter (Mockup-Reihenfolge).
   ===================================================== */
.products .product .product-wrapper .content-wrapper .product-heading {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.products .product .product-wrapper .content-wrapper .product-heading .product-title {
	order: 1;
	margin: 0;
	font-size: 14px;
	line-height: 1.3;
	font-weight: 500;
}

.products .product .product-wrapper .content-wrapper .product-heading .product-rating {
	order: 2;
	display: flex;
	align-items: center;
	gap: 6px;
}

.products .product .product-wrapper .content-wrapper .product-heading .product-rating .rating-count {
	font-size: 12px;
	color: #6b7280;
}

/* =====================================================
   4. Feature-Pills (Digitales Produkt | Originalprodukt).
   ===================================================== */
.sk24-pf-row-4731 {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 10px;
	padding: 6px 0 2px;
	margin: 2px 0 0;
	border-top: 1px solid #e5e7eb;
	font-size: 12px;
	font-weight: 400;
	color: #4b5563;
	line-height: 1.2;
}

.sk24-pf-item-4731 {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
}

.sk24-pf-item-4731 > span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sk24-pf-icon-4731 {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	color: #4b5563;
}

.sk24-pf-sep-4731 {
	width: 1px;
	height: 14px;
	background: #d1d5db;
	flex-shrink: 0;
}

/* Pills stapeln bei schmalen Viewports (Shop md-column-6 / sm-column-3).
   Auf Desktop ≥ 992px haben die Shop-Karten ca. 16.66%-Breite und die
   Pills passen nicht nebeneinander – Stack-Variante.  Auf Mobil-Breakpoints
   wo die Karten 2-spaltig (~260px+) sind, bleiben sie nebeneinander.
*/
@media screen and (min-width: 992px) {
	.products:not(.slick-slider).md-column-5 .sk24-pf-row-4731,
	.products:not(.slick-slider).md-column-6 .sk24-pf-row-4731 {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}

	.products:not(.slick-slider).md-column-5 .sk24-pf-row-4731 .sk24-pf-sep-4731,
	.products:not(.slick-slider).md-column-6 .sk24-pf-row-4731 .sk24-pf-sep-4731 {
		display: none;
	}
}

/* =====================================================
   5. Preis & Steuer-Info.
   ===================================================== */
.products .product .product-wrapper .content-wrapper .product-price-wrapper {
	margin: 4px 0 0;
}

.products .product .product-wrapper .content-wrapper .product-price-wrapper .price,
.products .product .product-wrapper .content-wrapper .product-price-wrapper .woocommerce-Price-amount {
	font-size: 18px;
	font-weight: 700;
	color: #111827;
	line-height: 1.2;
}

.products .product .product-wrapper .content-wrapper .wc-gzd-additional-info-loop.tax-info {
	margin: 0 0 2px;
	font-size: 11px;
	color: #6b7280;
	line-height: 1.2;
}

/* Fallback: Steuerinfo außerhalb der Karte (vor JS-Move) – kompakt halten */
.products .product > .wc-gzd-additional-info-loop.tax-info {
	margin: 2px 5px 0;
	font-size: 11px;
	color: #6b7280;
	line-height: 1.2;
}

/* =====================================================
   6. Add-to-Cart – volle Breite + Plus rechts.
   ===================================================== */
.products .product .product-wrapper .content-wrapper .product-cart-button,
.products .product .product-wrapper .content-wrapper .product-cart {
	display: flex !important;
	width: 100%;
	margin-top: 6px;
	gap: 6px;
	align-items: center;
}

/* Quickview (falls vorhanden) auf kompakte Breite */
.products .product .product-wrapper .content-wrapper .product-cart-button .quickview-button {
	flex: 0 0 auto !important;
	width: 36px;
}

.products .product .product-wrapper .content-wrapper .product-cart-button a.button,
.products .product .product-wrapper .content-wrapper .product-cart a.button {
	width: 100% !important;
	height: 38px !important;
	min-height: 38px !important;
	padding: 0 14px !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-weight: 500 !important;
	font-size: 13px !important;
	line-height: 1.2 !important;
	flex: 1 1 auto !important;
}

/* Plus-Icon im Button wieder sichtbar machen + nach rechts ausrichten */
.products .product .product-wrapper .content-wrapper .product-cart-button a.button i.klb-icon-plus,
.products .product .product-wrapper .content-wrapper .product-cart a.button i.klb-icon-plus {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	font-size: 16px;
	line-height: 1;
	font-weight: 600;
}

/* "added_to_cart"-Folgelink (Häkchen) ebenfalls voll breit ausrichten */
.products .product .product-wrapper .content-wrapper .product-cart-button a.added_to_cart,
.products .product .product-wrapper .content-wrapper .product-cart a.added_to_cart {
	width: 100% !important;
	height: 38px !important;
	flex: 1 1 auto !important;
	margin-left: 0 !important;
}