/*
 * SG Shop – Typografie-Vorschau (nur aktiv mit Body-Klasse .sg-typo, also nur solange SG Shop aktiv ist).
 * Ziel: eine ruhige, klare Hierarchie. Eine Schrift (EB Garamond), eine Skala, eine Button-Größe.
 * Nach Freigabe gehören diese Werte in Salient → Typography; diese Datei ist die Vorschau.
 *
 * Skala B (Desktop → Mobil, fließend), gewählt von Georg am 05.10.2026:
 *   H1 52 → 36 · H2 38 → 28 · H3 26 → 22 · H4 21 · H5/H6 18
 *   Fließtext 20 → 18 · Klein 16 · Buttons/Formulare 17
 * Produktkarten (Variante 2) und Raster (4 Spalten, 1200 px) stehen unten.
 */
body.sg-typo {
	--sg-font: "EB Garamond", Garamond, "Times New Roman", serif;
	--sg-fs-h1: clamp(2.25rem, 1.6rem + 2.2vw, 3.25rem);
	--sg-fs-h2: clamp(1.75rem, 1.4rem + 1.3vw, 2.375rem);
	--sg-fs-h3: clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem);
	--sg-fs-h4: 1.3125rem;
	--sg-fs-h5: 1.125rem;
	--sg-fs-body: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
	--sg-fs-small: 1rem;
	--sg-fs-ui: 1.0625rem;
	--sg-content-max: 1200px;
	/* Farben laut Styleguide (06.10.): Tanne + Papier-Skala + Rote Bete */
	--sg-btn-primary: #265c40;       /* tanne, 7,1 : 1 mit Papier */
	--sg-btn-primary-hover: #174b31; /* tanne-hover */
	--sg-btn-text: #faf4e4;          /* paper-50 */
	--sg-btn-secondary-border: #265c40;
	--sg-btn-secondary-text: #265c40;
	--sg-btn-soft: #eae9d7;          /* tanne-softer: Hover hinter Umriss-Buttons */
	--sg-input-border: #898065;      /* paper-500, 3,6 : 1 */
	--sg-ink: #2b2619;               /* paper-900 */
	--sg-ink-strong: #1a160b;        /* paper-950: Überschriften */
	--sg-muted: #6b634c;             /* paper-600, 5,4 : 1 */
	--sg-sale: #9b2d52;              /* bete: nur Angebote */
	--sg-radius: 6px;                /* radius-md: Buttons, Felder, Badges */
}

/* Fließtext */
body.sg-typo,
body.sg-typo p,
body.sg-typo li,
body.sg-typo .woocommerce-info,
body.sg-typo .woocommerce-message,
body.sg-typo .woocommerce-error,
body.sg-typo blockquote {
	font-size: var(--sg-fs-body);
	line-height: 1.5;
}
body.sg-typo blockquote,
body.sg-typo blockquote p {
	line-height: 1.5 !important;
}

/* Überschriften: H1–H3 kursiv als Markenzeichen, H4–H6 aufrecht für Ruhe */
body.sg-typo h1,
body.sg-typo h2,
body.sg-typo h3,
body.sg-typo h4,
body.sg-typo h5,
body.sg-typo h6 {
	font-family: var(--sg-font);
	text-wrap: balance;
	letter-spacing: 0;
	color: var(--sg-ink-strong);
}
body.sg-typo h1 { font-size: var(--sg-fs-h1) !important; line-height: 1.05 !important; font-weight: 600 !important; }
body.sg-typo h2 { font-size: var(--sg-fs-h2) !important; line-height: 1.1 !important; font-weight: 600 !important; }
body.sg-typo h3 { font-size: var(--sg-fs-h3) !important; line-height: 1.2 !important; font-weight: 600 !important; }
body.sg-typo h4 { font-size: var(--sg-fs-h4) !important; line-height: 1.3 !important; font-weight: 600 !important; font-style: normal !important; }
body.sg-typo h5,
body.sg-typo h6 { font-size: var(--sg-fs-h5) !important; line-height: 1.35 !important; font-weight: 600 !important; font-style: normal !important; }


/* Kleingedrucktes: Grundpreis, MwSt.-Hinweis, Lieferzeit */
body.sg-typo .price-unit,
body.sg-typo .price-unit .amount,
body.sg-typo .wc-gzd-additional-info,
body.sg-typo .wc-gzd-additional-info-loop,
body.sg-typo .product-units,
body.sg-typo .delivery-time-info,
body.sg-typo .shipping-costs-info {
	font-size: var(--sg-fs-small) !important;
	line-height: 1.4 !important;
	font-weight: 400 !important;
	color: var(--sg-muted);
}

/* Preise: Versalziffern, Tabellenziffern */
body.sg-typo .price,
body.sg-typo .amount,
body.sg-typo .shop_table td,
body.sg-typo .woocommerce-mini-cart {
	font-variant-numeric: lining-nums tabular-nums;
}

/* Tabellen: eine Schrift statt Open Sans + Garamond */
body.sg-typo .shop_table th,
body.sg-typo .shop_table td {
	font-family: var(--sg-font) !important;
	font-size: var(--sg-fs-body) !important;
	line-height: 1.4 !important;
}
body.sg-typo .shop_table th {
	font-weight: 600 !important;
}
body.sg-typo .shop_table .order-total th,
body.sg-typo .shop_table .order-total td {
	font-size: 1.375rem !important;
	font-weight: 700 !important;
}

/* ------------------------------------------------------------------ */
/* Buttons: eine Größe, zwei Gewichtungen, keine Großschreibung         */
/* ------------------------------------------------------------------ */
body.sg-typo .button,
body.sg-typo button.button,
body.sg-typo a.button,
body.sg-typo input.button,
body.sg-typo input[type="submit"],
body.sg-typo #place_order,
body.sg-typo .checkout-button,
body.sg-typo .single_add_to_cart_button,
body.sg-typo .nectar-button,
body.sg-typo .woocommerce-mini-cart__buttons .button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	min-height: 48px;
	padding: 0.6em 1.4em !important;
	font-family: var(--sg-font) !important;
	font-size: var(--sg-fs-ui) !important;
	line-height: 1.2 !important;
	font-weight: 500 !important;
	letter-spacing: 0.01em !important;
	text-transform: none !important;
	white-space: normal;
	text-align: center;
	border-radius: var(--sg-radius) !important;
}

/* Primär: gefüllt, dunkleres Grün */
body.sg-typo .button.alt,
body.sg-typo #place_order,
body.sg-typo .checkout-button,
body.sg-typo .single_add_to_cart_button,
body.sg-typo .woocommerce-mini-cart__buttons .button.checkout,
body.sg-typo .add_to_cart_button {
	background: var(--sg-btn-primary) !important;
	border-color: var(--sg-btn-primary) !important;
	color: var(--sg-btn-text) !important;
}
body.sg-typo .button.alt:hover,
body.sg-typo #place_order:hover,
body.sg-typo .checkout-button:hover,
body.sg-typo .single_add_to_cart_button:hover,
body.sg-typo .woocommerce-mini-cart__buttons .button.checkout:hover,
body.sg-typo .add_to_cart_button:hover {
	background: var(--sg-btn-primary-hover) !important;
	border-color: var(--sg-btn-primary-hover) !important;
}

/* Sekundär: Umriss (Warenkorb aktualisieren, Gutschein, Warenkorb anzeigen) */
body.sg-typo button[name="update_cart"],
body.sg-typo button[name="apply_coupon"],
body.sg-typo .sg-crates__fill,
body.sg-typo .woocommerce-mini-cart__buttons .button.wc-forward:not(.checkout) {
	background: transparent !important;
	border: 1.5px solid var(--sg-btn-secondary-border) !important;
	color: var(--sg-btn-secondary-text) !important;
	box-shadow: none !important;
}
body.sg-typo button[name="update_cart"]:not(:disabled):hover,
body.sg-typo button[name="update_cart"]:not(:disabled):focus-visible,
body.sg-typo button[name="apply_coupon"]:hover,
body.sg-typo button[name="apply_coupon"]:focus-visible,
body.sg-typo .sg-crates__fill:hover,
body.sg-typo .sg-crates__fill:focus-visible,
body.sg-typo .woocommerce-mini-cart__buttons .button.wc-forward:not(.checkout):hover,
body.sg-typo .woocommerce-mini-cart__buttons .button.wc-forward:not(.checkout):focus-visible {
	background: var(--sg-btn-soft) !important;
	border-color: var(--sg-btn-primary-hover) !important;
	color: var(--sg-btn-primary-hover) !important;
	opacity: 1 !important;
	transform: none !important;
	box-shadow: none !important;
}
body.sg-typo button[name="update_cart"]:disabled {
	opacity: 0.4 !important;
}


body.sg-typo .button:focus-visible,
body.sg-typo button:focus-visible,
body.sg-typo a:focus-visible,
body.sg-typo input:focus-visible,
body.sg-typo select:focus-visible,
body.sg-typo textarea:focus-visible {
	outline: 2px solid var(--sg-btn-primary) !important;
	outline-offset: 2px !important;
}

/* ------------------------------------------------------------------ */
/* Formulare: lesbar und ≥ 16 px (verhindert Zoom auf dem iPhone)       */
/* ------------------------------------------------------------------ */
body.sg-typo input[type="text"],
body.sg-typo input[type="email"],
body.sg-typo input[type="tel"],
body.sg-typo input[type="number"],
body.sg-typo input[type="password"],
body.sg-typo input[type="search"],
body.sg-typo select,
body.sg-typo textarea,
body.sg-typo .select2-container .select2-selection--single {
	font-family: var(--sg-font) !important;
	font-size: var(--sg-fs-ui) !important;
	line-height: 1.3 !important;
	color: var(--sg-ink);
}
body.sg-typo .woocommerce form .form-row input.input-text,
body.sg-typo .woocommerce form .form-row select,
body.sg-typo .woocommerce form .form-row textarea {
	min-height: 48px;
	padding: 0.55em 0.75em !important;
	border: 1px solid var(--sg-input-border) !important;
	border-radius: var(--sg-radius) !important;
	background-color: #fdfbf4 !important; /* paper-0 */
}
body.sg-typo .woocommerce form .form-row label,
body.sg-typo label {
	font-size: var(--sg-fs-small) !important;
	line-height: 1.4 !important;
}
body.sg-typo .woocommerce form .form-row .optional {
	color: var(--sg-muted);
}

/* Warenkorb-Drawer: Layout und Typografie seit 1.3.4 gesammelt in sg-shop.css (Abschnitt „Warenkorb-Drawer"). */

/* Theme-Hover-Overlays bei Umriss-Buttons abschalten (sonst grüne Fläche mit grüner Schrift) */
body.sg-typo button[name="update_cart"]::before,
body.sg-typo button[name="update_cart"]::after,
body.sg-typo button[name="apply_coupon"]::before,
body.sg-typo button[name="apply_coupon"]::after,
body.sg-typo .sg-crates__fill::before,
body.sg-typo .sg-crates__fill::after {
	display: none !important;
}

/* ------------------------------------------------------------------ */
/* Preise: eine Textfarbe, Streichpreis lesbar                          */
/* ------------------------------------------------------------------ */
body.sg-typo .price,
body.sg-typo .price .amount,
body.sg-typo .price ins {
	color: var(--sg-ink) !important;
	text-decoration: none;
}
body.sg-typo .price del,
body.sg-typo .price del .amount {
	color: var(--sg-muted) !important;
	opacity: 1 !important;
	font-weight: 400 !important;
	font-size: 0.8em;
	text-decoration: line-through;
}

/* ------------------------------------------------------------------ */
/* Seitenbreite: Inhalt höchstens 1200 px (Salient-Container hat 90 px Innenabstand) */
/* ------------------------------------------------------------------ */
@media (min-width: 1000px) {
	body.sg-typo .container {
		max-width: calc(var(--sg-content-max) + 180px);
	}
}

/* ------------------------------------------------------------------ */
/* 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-ink);
}
@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: 600 !important;
	font-style: italic !important;
	color: var(--sg-ink) !important;
	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);
}
/* 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: 600 !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) !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: 400 !important;
	color: var(--sg-muted) !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: 400 !important;
	color: var(--sg-muted) !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-btn-secondary-border) !important;
	border-radius: var(--sg-radius) !important;
	color: var(--sg-btn-secondary-text) !important;
	font-size: var(--sg-fs-ui) !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-btn-soft) !important;
	border-color: var(--sg-btn-primary-hover) !important;
	color: var(--sg-btn-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-btn-secondary-text);
	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;
	}
}

/* ------------------------------------------------------------------ */
/* Text und Angebots-Badge (Styleguide 06.10.)                          */
/* ------------------------------------------------------------------ */
body.sg-typo,
body.sg-typo p,
body.sg-typo li {
	color: var(--sg-ink);
}
body.sg-typo .woocommerce-loop-product__title,
body.sg-typo ul.products li.product .woocommerce-loop-product__title {
	color: var(--sg-ink-strong) !important;
}
/* Salient-Rundsiegel „Angebot!“ → schlichtes Badge in Rote Bete, oben links im Bild */
body.sg-typo .onsale,
body.sg-typo span.onsale,
body.sg-typo ul.products li.product > .onsale {
	position: absolute !important;
	top: 8px !important;
	left: 8px !important;
	right: auto !important;
	z-index: 3;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 2px 8px !important;
	border-radius: var(--sg-radius) !important;
	background: var(--sg-sale) !important;
	color: #faf4e4 !important;
	font: 600 14px/1.3 var(--sg-font) !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	box-shadow: none !important;
}
body.sg-typo .onsale::before,
body.sg-typo .onsale::after {
	display: none !important;
}