/*
 * Modern Shop Connector: Produktseiten-Zusatzbausteine (Badges, Grundpreis,
 * Lieferzeit, Paketgroessen, Naehrwerttabelle, Produktart-Zusatzblock).
 *
 * Theme-neutral nach dem Prinzip "Erben statt Erzwingen" - siehe
 * docs/PLUGIN-STYLING-PRINCIPLES.md fuer die vollstaendige Leitlinie. Jede
 * Farb-Variable folgt der Fallback-Kette: theme-spezifisch (Blocksys
 * --theme-*, NUR als optionale erste Stufe) -> generisch WordPress/WooCommerce
 * (--wp--preset--color--*, --wc-primary) -> sicherer neutraler Endwert.
 * Niemals currentColor als Hintergrund-Fallback, kein hartcodiertes Fremd-Blau.
 */

.msc-current-lot {
	--msc-lot-color: var(--msc-lot-color-custom, var(--theme-text-color, var(--wp--preset--color--contrast, #4f565d)));
	--msc-lot-background: var(--msc-lot-background-custom, transparent);
	--msc-lot-border-width: var(--msc-lot-border-width-custom, 0px);
	--msc-lot-border-color: var(--msc-lot-border-color-custom, var(--theme-border-color, color-mix(in srgb, var(--wp--preset--color--contrast, #24364b) 20%, #ffffff)));
	--msc-lot-font-weight: inherit;
	--msc-lot-icon-display: none;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0.75em 0;
	font-size: 0.9em;
	line-height: 1.35;
	font-weight: var(--msc-lot-font-weight);
	color: var(--msc-lot-color);
	background: var(--msc-lot-background);
	border: var(--msc-lot-border-width) solid var(--msc-lot-border-color);
}

.msc-current-lot[hidden] {
	display: none;
}

.msc-current-lot__icon {
	display: var(--msc-lot-icon-display);
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.msc-current-lot__icon .ct-icon {
	display: block;
	width: 0.95rem;
	height: 0.95rem;
}

.msc-current-lot__text {
	display: inline;
}

.gcx-product-section {
	--gcx-text-color: inherit;
	--gcx-muted-border-color: rgba(0, 0, 0, 0.08);
	color: var(--gcx-text-color);
	margin: 0 0 1.25rem;
}

.gcx-product-badges {
	--gcx-badge-border-color: currentColor;
	--gcx-badge-background: transparent;
	--gcx-badge-color: inherit;
	--gcx-badge-radius: 4px;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0.75rem 0 1rem;
}

.gcx-product-badge {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--gcx-badge-border-color);
	border-radius: var(--gcx-badge-radius);
	padding: 0.2rem 0.5rem;
	font-size: 0.875rem;
	line-height: 1.3;
	color: var(--gcx-badge-color);
	background: var(--gcx-badge-background);
}

.gcx-base-price {
	--gcx-base-price-color: inherit;
	margin: 0.12rem 0 1rem;
	font-size: 0.82rem;
	font-style: italic;
	line-height: 1.25;
	color: var(--gcx-base-price-color);
}

.gcx-product-meta-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.28rem;
	margin: 0.75rem 0 0.7rem;
	font-size: 0.82rem;
	line-height: 1.3;
	color: inherit;
	opacity: 0.82;
}

/*
 * `white-space: normal` statt `nowrap` – und das bricht kurze Einträge
 * trotzdem nie: Der Kasten ist `flex-wrap: wrap`, Einträge wandern als
 * Ganzes in die nächste Zeile; innerhalb eines Eintrags wird erst dann
 * umbrochen, wenn er ALLEIN breiter ist als die ganze Zeile. Genau der
 * Fall ist real: Ein Attribut-Eintrag mit elf Steinnamen mass 759px in
 * der 578px-Infospalte des Themes und ragte – zentriert – beidseitig
 * ~91px hinaus, links unsichtbar unter der Galerie (gemessen 2026-08-31).
 */
.gcx-product-meta-summary__item {
	display: inline-flex;
	align-items: center;
	white-space: normal;
	font-size: inherit;
	line-height: inherit;
	font-weight: 500;
	letter-spacing: 0.01em;
}

.gcx-product-meta-summary__item--primary {
	font-weight: 500;
	text-transform: none;
}

.gcx-product-meta-summary__separator {
	flex: 0 0 auto;
	opacity: 0.35;
	font-weight: 400;
}

@media (max-width: 640px) {
	.gcx-product-meta-summary {
		font-size: 0.78rem;
		margin-bottom: 0.6rem;
	}
}

.gcx-base-price .woocommerce-Price-amount,
.gcx-base-price .woocommerce-Price-currencySymbol {
	font-size: inherit;
	line-height: inherit;
}

.gcx-base-price__reference {
	white-space: nowrap;
}

.gcx-delivery-time {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0.3rem 0 1rem;
	font-size: 0.88rem;
	line-height: 1.3;
	color: inherit;
}

.gcx-delivery-time__icon {
	flex: 0 0 auto;
	opacity: 0.75;
}

.gcx-delivery-time__label {
	font-weight: 600;
}

.gcx-delivery-time__text {
	font-weight: 500;
}

.msc-package-size-selector {
	margin: 0.75rem 0 1.15rem;
}

.msc-package-size-selector h3 {
	margin: 0 0 0.55rem;
	font-size: 0.95rem;
	line-height: 1.3;
}

.msc-package-size-selector__options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
	gap: 0.5rem;
}

.msc-package-size-option {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	align-items: start;
	gap: 0.55rem;
	min-height: 68px;
	padding: 0.5rem;
	border: 1px solid rgba(0, 0, 0, 0.16);
	border-radius: 6px;
	background: var(--theme-palette-color-8, var(--wp--preset--color--base, #fff));
	color: inherit;
	text-decoration: none;
}

a.msc-package-size-option:hover,
a.msc-package-size-option:focus-visible {
	/* currentColor hier als reiner Akzent (Rahmen/Fokusring), NICHT als
	 * Hintergrund - unproblematisch und ueblich fuer Fokus-Indikatoren. */
	border-color: var(--theme-palette-color-1, var(--wp--preset--color--primary, var(--wc-primary, currentColor)));
	box-shadow: 0 0 0 1px var(--theme-palette-color-1, var(--wp--preset--color--primary, var(--wc-primary, currentColor)));
	outline: 0;
}

.msc-package-size-option.is-active {
	border-color: var(--theme-palette-color-1, var(--wp--preset--color--primary, var(--wc-primary, currentColor)));
	box-shadow: inset 3px 0 0 var(--theme-palette-color-1, var(--wp--preset--color--primary, var(--wc-primary, currentColor)));
}

.msc-package-size-option__image {
	display: block;
	width: 44px;
	height: 44px;
}

.msc-package-size-option__image img {
	display: block;
	width: 44px;
	height: 44px;
	object-fit: contain;
}

.msc-package-size-option__content,
.msc-package-size-option__content > strong,
.msc-package-size-option__content > span,
.msc-package-size-option__content > small {
	display: block;
}

.msc-package-size-option__content {
	display: flex;
	flex-direction: column;
	row-gap: 0.06rem;
}

.msc-package-size-option__content strong {
	font-size: 0.86rem;
}

.msc-package-size-option__price {
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1.22;
}

.msc-package-size-option__price .woocommerce-Price-amount,
.msc-package-size-option__price .woocommerce-Price-currencySymbol,
.msc-package-size-option__price .woocommerce-Price-currencySymbol + .woocommerce-Price-amount,
.msc-package-size-option__unit-price .woocommerce-Price-amount,
.msc-package-size-option__unit-price .woocommerce-Price-currencySymbol,
.msc-package-size-option__unit-price .woocommerce-Price-currencySymbol + .woocommerce-Price-amount {
	display: inline;
}

.msc-package-size-option__price .woocommerce-Price-currencySymbol,
.msc-package-size-option__unit-price .woocommerce-Price-currencySymbol {
	margin-right: 0.2em;
}

.msc-package-size-option__content small {
	margin-top: 0.1rem;
	font-size: 0.72rem;
	line-height: 1.25;
	opacity: 0.72;
}

.msc-package-size-option__label {
	margin-top: 0.08rem;
}

.msc-package-size-option__unit-price {
	margin-top: 0.02rem;
	white-space: nowrap;
}

.gcx-nutrition-table-wrap {
	--gcx-nutrition-border-color: rgba(0, 0, 0, 0.08);
	/* Problem 5 (2. Anlauf): Die zuvor genutzte generische Zwischenstufe
	 * --wp--preset--color--contrast/--base ist NICHT wirklich generisch - diese
	 * Slug-NAMEN sind eine Konvention der "Twenty Twenty-*"-Themes, aber von
	 * WordPress selbst nicht garantiert und von JEDEM theme.json-Theme frei
	 * wählbar (ein anderes Theme könnte "contrast" als HELLEN Ton definieren).
	 * Für ein Kontrast-PAAR (Hintergrund UND Schrift muessen zueinander passen)
	 * ist eine ungeprüfte generische Zwischenstufe deshalb riskanter als gar
	 * keine - lieber direkt auf den sicher geprüften, garantiert zueinander
	 * passenden Festwert zurückfallen. Bewusst dunkler Grund + helle Schrift,
	 * niemals currentColor als Hintergrund-Fallback. */
	--gcx-nutrition-header-background: var(--theme-palette-color-1, #1f2937);
	--gcx-nutrition-header-color: var(--theme-palette-color-8, #ffffff);
	--gcx-nutrition-row-background: var(--theme-palette-color-8, var(--wp--preset--color--base, #fff));
	--gcx-nutrition-row-alt-background: rgba(0, 0, 0, 0.035);
	--gcx-nutrition-cell-border-color: rgba(0, 0, 0, 0.07);
	--gcx-nutrition-text-color: inherit;
	--gcx-nutrition-footnote-color: inherit;
	width: 100%;
	margin: 1rem 0 1.5rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--gcx-nutrition-border-color);
	border-radius: 6px;
	background: var(--gcx-nutrition-row-background);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.gcx-nutrition-footnote {
	margin: 0.75rem 0 1.5rem;
	color: var(--gcx-nutrition-footnote-color, inherit);
	font-size: 0.9rem;
	line-height: 1.45;
}

.gcx-origin-hint {
	--gcx-origin-color: var(--gcx-origin-color-custom, inherit);
	--gcx-origin-font-style: italic;
	--gcx-origin-font-weight: inherit;
	--gcx-origin-background: var(--gcx-origin-background-custom, transparent);
	--gcx-origin-icon-display: none;
	/* display:block-level (flex statt inline-flex): ein inline-level Element bekommt
	 * vom Theme/WordPress keinen automatischen Lese-Einzug (margin:auto greift nur bei
	 * block-level Boxen) - mit inline-flex stand der Hinweis deshalb buendig am
	 * linken Seitenrand statt im Textbereich (live bestaetigt 2026-08-02). */
	display: flex;
	align-items: flex-start;
	gap: 0.35rem;
	margin: -0.5rem 0 1.5rem;
	font-size: 0.9rem;
	font-style: var(--gcx-origin-font-style);
	font-weight: var(--gcx-origin-font-weight);
	color: var(--gcx-origin-color);
	background: var(--gcx-origin-background);
	opacity: 0.85;
}

.gcx-origin-hint__icon {
	display: var(--gcx-origin-icon-display);
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.gcx-origin-hint__icon .ct-icon {
	display: block;
	width: 0.95rem;
	height: 0.95rem;
}

.gcx-origin-hint__text {
	display: inline;
}

.gcx-product-kind-extra-block {
	/* Zentrale Variablen-Ebene fuer diesen Block - Stellschrauben an einer Stelle. */
	--gcx-extra-block-align: stretch;
	--gcx-extra-block-max-width: 100%;
	--gcx-extra-block-margin-block: 2rem 0;
	/* Problem 4 (2. Anlauf): Der Block wird jetzt primaer direkt an das Ende des
	 * Beschreibung-Tab-Callbacks angehaengt (siehe FrontendDisplay::
	 * append_extra_block_to_description_tab()) - er ist dadurch ein direktes
	 * Geschwister-Element des Beschreibungstextes und teilt sich automatisch
	 * dessen Breite/Innenabstand, in JEDEM Theme. Ein eigenmaechtiges
	 * "width:100%;max-width:100%" HIER wuerde genau das Gegenteil bewirken,
	 * sobald ein Theme NUR <p>-Elemente auf eine Lesebreite begrenzt (z. B.
	 * `.entry-content p{max-width:700px}`) - unser <div> waere dann BREITER als
	 * der Text statt gleich breit. Deshalb bewusst KEINE eigene Breite hier;
	 * align-self/margin-block bleiben als Stellschrauben fuer Sonderfaelle
	 * nutzbar (z. B. falls der Block je in einen Flex-/Grid-Elternkontext
	 * gerendert wird). */
	align-self: var(--gcx-extra-block-align);
	margin-block: var(--gcx-extra-block-margin-block);
}

/* Sicherheitsnetz NUR fuer den Fallback-Pfad (kein description-Tab vorhanden,
 * FrontendDisplay::render_product_kind_extra_block_fallback()): dort haengt
 * der Block direkt an `woocommerce_after_single_product_summary` und kann in
 * Blockthemes direktes Kind eines is-layout-constrained-Containers werden, der
 * ihn sonst auf --wp--style--global--content-size verengt und zentriert
 * (dieselbe Selektor-Form wie WordPress selbst, deshalb reicht hier normale
 * Spezifitaet). margin-left/-right muessen mit !important ueberschrieben
 * werden, weil WordPress sie selbst mit !important setzt - unvermeidbares
 * !important, siehe docs/PLUGIN-STYLING-PRINCIPLES.md.
 *
 * :not(.woocommerce-Tabs-panel) ist zwingend (live bestaetigt 2026-08-02): JEDES
 * WooCommerce-Tab-Panel traegt selbst ebenfalls die Klasse is-layout-constrained,
 * nicht nur echte Block-Editor-Container. Ohne diesen Ausschluss feuerte die
 * Regel faelschlich auch im Primaerpfad (Block als Geschwister im Beschreibung-
 * Tab) und zwang ihn auf volle Breite/0-Einzug, waehrend der Beschreibungstext
 * daneben den korrekten Theme-Einzug behielt - dadurch brach der Block optisch
 * aus dem Layout aus. */
.is-layout-constrained:not(.woocommerce-Tabs-panel) > .gcx-product-kind-extra-block {
	max-width: var(--gcx-extra-block-max-width);
	width: 100%;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Als eigener Abschnitt (Schalter «Als eigener Abschnitt anzeigen», 0.92.0):
 * Der 2rem-Aussenabstand oben stammt aus der Rolle als Anhang an den
 * Beschreibungstext - dort schafft er den Abstand zum Text darueber. Als
 * eigener Abschnitt liefert das Theme den Abstand zur Titelzeile bereits
 * selbst; der 2rem-Zuschlag addierte sich dazu und liess den Text tiefer
 * beginnen als in allen anderen Abschnitten (Haendlerbefund 2026-08-13). */
.gcx-product-kind-extra-block--tab {
	--gcx-extra-block-margin-block: 0 0;
}

.gcx-product-kind-extra-block img {
	max-width: 100%;
	height: auto;
}


.gcx-nutrition-footnote p {
	margin: 0 0 0.25rem;
}

.gcx-nutrition-image {
	margin: 1rem 0 1.5rem;
}

.gcx-nutrition-image img {
	display: block;
	max-width: 100%;
	height: auto;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 6px;
	background: var(--theme-palette-color-8, var(--wp--preset--color--base, #fff));
}

.woocommerce-product-gallery .gcx-nutrition-gallery-image img {
	display: block;
	width: 100%;
	height: auto;
	background: var(--theme-palette-color-8, var(--wp--preset--color--base, #fff));
}

.gcx-nutrition-table {
	display: table !important;
	width: 100%;
	min-width: 620px;
	margin: 0 !important;
	border-collapse: collapse;
	border-spacing: 0;
	font-size: 0.95rem;
	line-height: 1.45;
	color: var(--gcx-nutrition-text-color);
}

.gcx-nutrition-table thead {
	display: table-header-group !important;
}

.gcx-nutrition-table tbody {
	display: table-row-group !important;
}

.gcx-nutrition-table tr {
	display: table-row !important;
}

.gcx-nutrition-table th,
.gcx-nutrition-table td {
	display: table-cell !important;
	padding: 0.85rem 1rem;
	border: 0;
	border-bottom: 1px solid var(--gcx-nutrition-cell-border-color);
	vertical-align: middle;
	text-align: left;
	word-break: normal;
}

.gcx-nutrition-table thead th {
	font-weight: 700;
	color: var(--gcx-nutrition-header-color);
	background: var(--gcx-nutrition-header-background);
}

.gcx-nutrition-table tbody th {
	font-weight: 700;
	color: inherit;
	background: transparent;
}

.gcx-nutrition-table tbody tr:nth-child(even) {
	background: var(--gcx-nutrition-row-alt-background);
}

.gcx-nutrition-table tbody tr:last-child th,
.gcx-nutrition-table tbody tr:last-child td {
	border-bottom: 0;
}

@media (max-width: 640px) {
	.gcx-nutrition-table-wrap {
		margin-left: -0.25rem;
		margin-right: -0.25rem;
	}

	.gcx-nutrition-table {
		min-width: 560px;
		font-size: 0.88rem;
	}

	.gcx-nutrition-table th,
	.gcx-nutrition-table td {
		padding: 0.7rem 0.8rem;
	}
}

/* Only enhanced lists have a wrapper. Without JavaScript all badges stay visible. */
.msc-badges-disclosure {
	--msc-badges-toggle-gap: 0.25rem;
	width: 100%;
}

.msc-badges-disclosure:has(.msc-badges-toggle:not([hidden])) .gcx-product-badges {
	margin-bottom: 0;
}

.msc-badges-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin-block: 0 var(--msc-badges-toggle-gap);
	cursor: pointer;
}

:where(.msc-badges-toggle) {
	font: inherit;
	color: inherit;
	background: transparent;
	border: 0;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.gcx-product-badge[hidden],
.msc-badges-toggle[hidden] { display: none; }

@media print {
	.gcx-product-badge[hidden] { display: inline-flex; }
	.msc-badges-toggle { display: none; }
}