/*
 * SG Basis – Seiten-Typografie und Layout (vorher „Typo-Ebene“ in SG Shop bis 1.4.5).
 * Gibt Salient und WooCommerce die SG-Schrift, die Skala B, Buttons, Felder, Preise und die Inhaltsbreite.
 * Bewusst global (Body-Klasse sgb-seite), alle Werte aus sg-tokens.css. Schalter: Einstellungen › SG Basis › Seiten-Typografie.
 * Produktraster und Produktkarten bleiben in SG Shop (sg-shop-karten.css), weil SG Shop deren Markup erzeugt.
 * Bewusste Änderungen gegenüber SG Shop 1.4.5: H1/H2-Zeilenhöhe 1,08/1,12 statt 1,05/1,10 und Angebots-Badge 15 statt 14 px (Styleguide, freigegeben 16.10.2026).
 */

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

/* Überschriften: H1–H3 kursiv als Markenzeichen, H4–H6 aufrecht für Ruhe */
body.sgb-seite h1,
body.sgb-seite h2,
body.sgb-seite h3,
body.sgb-seite h4,
body.sgb-seite h5,
body.sgb-seite h6 {
	font-family: var(--sg-font-sans);
	text-wrap: balance;
	letter-spacing: 0;
	color: var(--sg-paper-950);
}
body.sgb-seite h1 { font-size: var(--sg-text-h1-size) !important; line-height: var(--sg-text-h1-leading) !important; font-weight: var(--sg-font-weight-semibold) !important; }
body.sgb-seite h2 { font-size: var(--sg-text-h2-size) !important; line-height: var(--sg-text-h2-leading) !important; font-weight: var(--sg-font-weight-semibold) !important; }
body.sgb-seite h3 { font-size: var(--sg-text-h3-size) !important; line-height: var(--sg-text-h3-leading) !important; font-weight: var(--sg-font-weight-semibold) !important; }
body.sgb-seite h4 { font-size: var(--sg-text-h4-size) !important; line-height: var(--sg-text-h4-leading) !important; font-weight: var(--sg-font-weight-semibold) !important; font-style: normal !important; }
body.sgb-seite h5,
body.sgb-seite h6 { font-size: var(--sg-text-h5-size) !important; line-height: var(--sg-text-h5-leading) !important; font-weight: var(--sg-font-weight-semibold) !important; font-style: normal !important; }


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

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

/* Tabellen: eine Schrift statt Open Sans + Garamond */
body.sgb-seite .shop_table th,
body.sgb-seite .shop_table td {
	font-family: var(--sg-font-sans) !important;
	font-size: var(--sg-text-body-size) !important;
	line-height: 1.4 !important;
}
body.sgb-seite .shop_table th {
	font-weight: var(--sg-font-weight-semibold) !important;
}
body.sgb-seite .shop_table .order-total th,
body.sgb-seite .shop_table .order-total td {
	font-size: var(--sg-text-total-size) !important;
	font-weight: var(--sg-font-weight-bold) !important;
}

/* ------------------------------------------------------------------ */
/* Buttons: eine Größe, zwei Gewichtungen, keine Großschreibung         */
/* ------------------------------------------------------------------ */
body.sgb-seite .button,
body.sgb-seite button.button,
body.sgb-seite a.button,
body.sgb-seite input.button,
body.sgb-seite input[type="submit"],
body.sgb-seite #place_order,
body.sgb-seite .checkout-button,
body.sgb-seite .single_add_to_cart_button,
body.sgb-seite .nectar-button,
body.sgb-seite .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-sans) !important;
	font-size: var(--sg-text-ui-size) !important;
	line-height: var(--sg-text-ui-leading) !important;
	font-weight: var(--sg-font-weight-medium) !important;
	letter-spacing: 0.01em !important;
	text-transform: none !important;
	white-space: normal;
	text-align: center;
	border-radius: var(--sg-radius-md) !important;
}

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

/* Sekundär: Umriss (Warenkorb aktualisieren, Gutschein, Warenkorb anzeigen) */
body.sgb-seite button[name="update_cart"],
body.sgb-seite button[name="apply_coupon"],
body.sgb-seite .woocommerce-mini-cart__buttons .button.wc-forward:not(.checkout) {
	background: transparent !important;
	border: 1.5px solid var(--sg-primary) !important;
	color: var(--sg-primary) !important;
	box-shadow: none !important;
}
body.sgb-seite button[name="update_cart"]:not(:disabled):hover,
body.sgb-seite button[name="update_cart"]:not(:disabled):focus-visible,
body.sgb-seite button[name="apply_coupon"]:hover,
body.sgb-seite button[name="apply_coupon"]:focus-visible,
body.sgb-seite .woocommerce-mini-cart__buttons .button.wc-forward:not(.checkout):hover,
body.sgb-seite .woocommerce-mini-cart__buttons .button.wc-forward:not(.checkout):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.sgb-seite button[name="update_cart"]:disabled {
	opacity: 0.4 !important;
}


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

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

/* 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.sgb-seite button[name="update_cart"]::before,
body.sgb-seite button[name="update_cart"]::after,
body.sgb-seite button[name="apply_coupon"]::before,
body.sgb-seite button[name="apply_coupon"]::after {
	display: none !important;
}

/* ------------------------------------------------------------------ */
/* Preise: eine Textfarbe, Streichpreis lesbar                          */
/* ------------------------------------------------------------------ */
body.sgb-seite .price,
body.sgb-seite .price .amount,
body.sgb-seite .price ins {
	color: var(--sg-foreground) !important;
	text-decoration: none;
}
body.sgb-seite .price del,
body.sgb-seite .price del .amount {
	color: var(--sg-muted-foreground) !important;
	opacity: 1 !important;
	font-weight: var(--sg-font-weight-normal) !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.sgb-seite .container {
		max-width: calc(var(--sg-content-max) + 180px);
	}
}

/* ------------------------------------------------------------------ */
/* Text und Angebots-Badge (Styleguide 06.10.)                          */
/* ------------------------------------------------------------------ */
body.sgb-seite,
body.sgb-seite p,
body.sgb-seite li {
	color: var(--sg-foreground);
}
body.sgb-seite .woocommerce-loop-product__title,
body.sgb-seite ul.products li.product .woocommerce-loop-product__title {
	color: var(--sg-paper-950) !important;
}
/* Salient-Rundsiegel „Angebot!“ → schlichtes Badge in Rote Bete, oben links im Bild */
body.sgb-seite .onsale,
body.sgb-seite span.onsale,
body.sgb-seite ul.products li.product > .onsale {
	position: absolute !important;
	top: calc(var(--sg-spacing) * 2) !important;
	left: calc(var(--sg-spacing) * 2) !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: calc(var(--sg-spacing) * 0.5) calc(var(--sg-spacing) * 2) !important;
	border-radius: var(--sg-radius-md) !important;
	background: var(--sg-sale) !important;
	color: var(--sg-sale-foreground) !important;
	font: var(--sg-font-weight-semibold) var(--sg-text-badge-size)/1.3 var(--sg-font-sans) !important; /* Styleguide: Badges 15 px (16.10.2026), vorher 14 px */
	letter-spacing: 0 !important;
	text-transform: none !important;
	box-shadow: none !important;
}
body.sgb-seite .onsale::before,
body.sgb-seite .onsale::after {
	display: none !important;
}