/*
 * SG Shop – Produktraster und Produktkarten (Variante 2) in Listen.
 * Aktiv mit der Einstellung „Produktkarten“ (Body-Klasse sg-typo) und nur zusammen mit SG Basis ab 1.1.0;
 * ohne SG Basis lädt SG Shop weiterhin die vollständige alte assets/sg-typo.css.
 * Werte aus den Tokens von SG Basis; --sg-card-*, --sg-cols, --sg-gap-* sind Bestand und werden mit der Shop-Umstellung umbenannt.
 */
body.sg-typo {
	--sg-fs-h3: var(--sg-text-h3-size); /* für sg-shop.css (Drawer-Überschriften), bis zur Shop-Umstellung */
}

/* Kisten-Knopf „auffüllen“: Umriss wie die übrigen Sekundär-Buttons (aus der früheren Typo-Ebene) */
body.sg-typo .sg-crates__fill {
	background: transparent !important;
	border: 1.5px solid var(--sg-primary) !important;
	color: var(--sg-primary) !important;
	box-shadow: none !important;
}
body.sg-typo .sg-crates__fill:hover,
body.sg-typo .sg-crates__fill:focus-visible {
	background: var(--sg-accent) !important;
	border-color: var(--sg-primary-hover) !important;
	color: var(--sg-primary-hover) !important;
	opacity: 1 !important;
	transform: none !important;
	box-shadow: none !important;
}
body.sg-typo .sg-crates__fill::before,
body.sg-typo .sg-crates__fill::after {
	display: none !important;
}

/* ------------------------------------------------------------------ */
/* Produktlisten: Raster                                                */
/* Mobil 2 · Tablet 3 · ab 1000 px: Gläser und Flaschen 4, Kisten 3.     */
/* Flex statt Grid, damit die letzte Reihe zentriert steht.              */
/* Karussells (Salient Flickity) behalten ihr eigenes Layout.           */
/* ------------------------------------------------------------------ */
body.sg-typo :not(.nectar-woo-flickity) > ul.products {
	--sg-cols: 2;
	--sg-gap-x: 12px;
	--sg-gap-y: 32px;
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sg-gap-y) var(--sg-gap-x);
	max-width: var(--sg-content-max);
	margin: 0 auto !important;
	padding: 0 !important;
}
body.sg-typo :not(.nectar-woo-flickity) > ul.products::before,
body.sg-typo :not(.nectar-woo-flickity) > ul.products::after {
	display: none !important;
}
body.sg-typo :not(.nectar-woo-flickity) > ul.products li.product {
	width: calc((100% - (var(--sg-cols) - 1) * var(--sg-gap-x)) / var(--sg-cols)) !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
	position: relative;
}
@media (max-width: 689px) {
	body.sg-typo :not(.nectar-woo-flickity) > ul.products:has(> li.product_cat-bundle) {
		--sg-cols: 1;
	}
	body.sg-typo :not(.nectar-woo-flickity) > ul.products:has(> li.product_cat-bundle) li.product {
		max-width: 360px;
	}
}
@media (min-width: 690px) {
	body.sg-typo :not(.nectar-woo-flickity) > ul.products {
		--sg-cols: 3;
		--sg-gap-x: 20px;
		--sg-gap-y: 40px;
	}
}
@media (min-width: 1000px) {
	body.sg-typo :not(.nectar-woo-flickity) > ul.products.columns-4,
	body.sg-typo .wpb_wrapper :not(.nectar-woo-flickity) > ul.products.columns-3:not(:has(> li.product_cat-bundle)) {
		--sg-cols: 4;
	}
	body.sg-typo :not(.nectar-woo-flickity) > ul.products {
		--sg-gap-x: 24px;
		--sg-gap-y: 48px;
	}
}

/* ------------------------------------------------------------------ */
/* Produktkarte (Variante 2): zentriert, drei Gruppen                    */
/* Name + Füllmenge · Preis + Grundpreis + Pflichtangaben · Button       */
/* Reihenfolge per order, weil Salient/Germanized die Teile verteilt.    */
/* ------------------------------------------------------------------ */
body.sg-typo ul.products li.product {
	--sg-card-name: 1.125rem;
	--sg-card-price: 1.125rem;
	--sg-card-small: 0.9375rem;
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	align-content: flex-start;
	column-gap: 0.3em;
	text-align: center !important;
	color: var(--sg-foreground);
}
@media (min-width: 690px) {
	body.sg-typo ul.products li.product {
		--sg-card-name: 1.25rem;
		--sg-card-price: 1.1875rem;
		--sg-card-small: 1rem;
	}
}
@media (min-width: 1000px) {
	body.sg-typo ul.products li.product {
		--sg-card-name: 1.375rem;
		--sg-card-price: 1.25rem;
	}
}
body.sg-typo ul.products li.product > * {
	flex: 0 0 100%;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important; /* Salient gibt jedem p 24 px Abstand nach unten */
	text-align: center !important;
}
body.sg-typo ul.products li.product > .product-wrap {
	display: contents;
}
/* Bild */
body.sg-typo ul.products li.product .product-wrap > a {
	order: 1;
	flex: 0 0 100%;
	display: block;
}
/* ganze Karte klickbar (Titel ist bei Salient kein Link) */
body.sg-typo :not(.nectar-woo-flickity) > ul.products li.product .product-wrap > a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
/* Name */
body.sg-typo ul.products li.product .woocommerce-loop-product__title {
	order: 2;
	margin-top: 14px !important;
	padding: 0 !important;
	font-size: var(--sg-card-name) !important;
	line-height: 1.15 !important;
	font-weight: var(--sg-font-weight-semibold) !important;
	font-style: italic !important;
	color: var(--sg-paper-950) !important; /* wie bisher: Überschriftenfarbe (in 1.4.5 setzte der spätere Block in sg-typo.css paper-950) */
	text-wrap: balance;
}
/* Füllmenge */
body.sg-typo ul.products li.product .sg-card-size {
	order: 3;
	margin-top: 2px !important;
	font-size: var(--sg-card-small) !important;
	line-height: 1.3 !important;
	color: var(--sg-muted-foreground);
}
/* Preis + Grundpreis in einer Zeile (Germanized gibt dem Grundpreis ebenfalls die Klasse .price) */
body.sg-typo ul.products li.product > .price:not(.price-unit) {
	order: 4;
	flex: 0 0 auto;
	margin-top: 8px !important;
	font-size: var(--sg-card-price) !important;
	line-height: 1.25 !important;
	font-weight: var(--sg-font-weight-semibold) !important;
}
body.sg-typo ul.products li.product > .price:not(.price-unit) .amount {
	font-size: inherit !important;
	font-weight: inherit !important;
}
/* Grundpreis: „Grundpreis: 2,00 € / 100 g" → „2,00 €/100 g"; Beschriftung bleibt für Screenreader im Text */
body.sg-typo ul.products li.product > .price-unit {
	order: 5;
	flex: 0 0 auto;
	font-size: 0 !important;
	line-height: 1.25 !important;
	color: var(--sg-muted-foreground) !important;
}
body.sg-typo ul.products li.product > .price-unit > *,
body.sg-typo ul.products li.product > .price-unit::before {
	font-size: var(--sg-card-small) !important;
	font-weight: var(--sg-font-weight-normal) !important;
	color: var(--sg-muted-foreground) !important;
}
body.sg-typo ul.products li.product > .price-unit .unit-base::before {
	content: "/";
}
body.sg-typo ul.products li.product > .price-unit .unit::before {
	content: "\202F";
}
@media (min-width: 690px) {
	body.sg-typo ul.products li.product > .price-unit::before {
		content: "· ";
	}
}
@media (max-width: 689px) {
	body.sg-typo ul.products li.product > .price-unit {
		flex-basis: 100%;
	}
}
/* Pflichtangaben */
body.sg-typo ul.products li.product .sg-deposit-badge,
body.sg-typo ul.products li.product .wc-gzd-additional-info.tax-info,
body.sg-typo ul.products li.product .sg-card-shipping {
	margin-top: 2px !important;
	font-size: var(--sg-card-small) !important;
	line-height: 1.35 !important;
	font-weight: var(--sg-font-weight-normal) !important;
	color: var(--sg-muted-foreground) !important;
}
body.sg-typo ul.products li.product .sg-deposit-badge { order: 6; }
body.sg-typo ul.products li.product .wc-gzd-additional-info.tax-info { order: 7; flex: 0 0 auto; }
body.sg-typo ul.products li.product .wc-gzd-additional-info.tax-info::after { content: ","; }
body.sg-typo ul.products li.product .sg-card-shipping { order: 8; flex: 0 0 auto; }
body.sg-typo ul.products li.product .sg-card-shipping a {
	position: relative;
	z-index: 2;
	color: inherit !important;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
/* Button: immer sichtbar, Umriss, volle Breite */
body.sg-typo ul.products li.product .product-add-to-cart {
	order: 9;
	flex: 0 0 100%;
	position: relative !important;
	z-index: 2;
	margin-top: 14px !important;
	display: flex !important;
	flex-direction: column;
	gap: 6px;
}
body.sg-typo ul.products li.product a.button.add_to_cart_button,
body.sg-typo ul.products li.product a.button.product_type_variable,
body.sg-typo ul.products li.product a.button.product_type_simple {
	position: static !important;
	transform: none !important;
	opacity: 1 !important;
	width: 100% !important;
	height: auto !important;
	min-height: 44px;
	padding: 0.45em 1em !important;
	background: transparent !important;
	border: 1.5px solid var(--sg-primary) !important;
	border-radius: var(--sg-radius-md) !important;
	color: var(--sg-primary) !important;
	font-size: var(--sg-text-ui-size) !important;
	box-shadow: none !important;
}
body.sg-typo ul.products li.product a.button.add_to_cart_button:hover,
body.sg-typo ul.products li.product a.button.add_to_cart_button:focus-visible {
	background: var(--sg-accent) !important;
	border-color: var(--sg-primary-hover) !important;
	color: var(--sg-primary-hover) !important;
}
body.sg-typo ul.products li.product a.button i,
body.sg-typo ul.products li.product a.button::before {
	display: none !important;
}
body.sg-typo ul.products li.product .product-add-to-cart a.added_to_cart {
	font-size: var(--sg-card-small);
	color: var(--sg-primary);
	text-decoration: underline;
}
@media (max-width: 689px) {
	body.sg-typo ul.products li.product a.button.add_to_cart_button {
		font-size: 1rem !important;
		padding: 0.4em 0.5em !important;
	}
}