/* ==========================================================================
   WOLTERS Partnerportal – WooCommerce-Feinschliff
   Überschreibt WooCommerce-Standardoptik im Sinne des B2B-Designs.
   ========================================================================== */

/* WooCommerce-Buttons an das Designsystem angleichen */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background-color: var(--color-primary);
	color: var(--color-white);
	border-radius: var(--radius-button);
	font-weight: 600;
	padding: 0.75rem 1.4rem;
	transition: background-color var(--transition);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background-color: var(--color-primary-dark);
	color: var(--color-white);
}

/* Warenkorb- und Kasse-Block: Hauptbuttons („Zur Kasse", „Bestellung
   aufgeben", „Anwenden") im Markenrot wie die übrigen Buttons. Ohne
   Theme-Farben in theme.json bringen die Blöcke sonst Schwarz mit.
   Umriss- und Text-Buttons der Blöcke bleiben unberührt. */
.wc-block-components-button:not(.is-link):not(.is-style-outline):not(.outlined):not(.text) {
	background-color: var(--color-accent);
	border: 1px solid var(--color-accent);
	border-radius: var(--radius-button);
	color: var(--color-white);
}
.wc-block-components-button:not(.is-link):not(.is-style-outline):not(.outlined):not(.text):hover,
.wc-block-components-button:not(.is-link):not(.is-style-outline):not(.outlined):not(.text):focus-visible {
	background-color: var(--color-accent-dark);
	border-color: var(--color-accent-dark);
	color: var(--color-white);
}

/* Produktraster der Blöcke („Neu im Shop" im leeren Warenkorb, Produkt-
   kollektionen): Kacheln und „In den Warenkorb"-Buttons wie im übrigen
   Portal – Fläche statt Rahmen, Button in Markenrot, eckig, Versalien.
   Ohne theme.json bringen die Blöcke sonst schwarze, abgerundete
   Standardbuttons mit. */
.wc-block-grid__product,
.wc-block-product {
	padding: 1rem;
	background-color: var(--color-surface-card);
	border: 0 !important;
}
.wc-block-grid__product-title,
.wc-block-components-product-name {
	font-family: var(--font-strong);
	font-size: var(--fs-base);
	color: var(--color-text);
}
.wc-block-grid__product .wp-block-button__link,
.wc-block-components-product-button .wp-block-button__link,
.wp-block-woocommerce-empty-cart-block .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.7rem 1.2rem;
	border: 1px solid var(--color-accent);
	border-radius: var(--radius-button);
	background-color: var(--color-accent);
	color: var(--color-white);
	font-family: var(--font-subline);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
	white-space: normal;
	transition: background-color var(--transition), border-color var(--transition);
}
.wc-block-grid__product .wp-block-button__link:hover,
.wc-block-grid__product .wp-block-button__link:focus-visible,
.wc-block-components-product-button .wp-block-button__link:hover,
.wc-block-components-product-button .wp-block-button__link:focus-visible,
.wp-block-woocommerce-empty-cart-block .wp-block-button__link:hover,
.wp-block-woocommerce-empty-cart-block .wp-block-button__link:focus-visible {
	border-color: var(--color-accent-dark);
	background-color: var(--color-accent-dark);
	color: var(--color-white);
}
.wc-block-grid__product .wp-block-button__link.loading { opacity: 0.6; }
/* Nach dem Hinzufügen: „Warenkorb anzeigen" als schlichter Textlink. */
.wc-block-grid__product .added_to_cart {
	display: block;
	margin-top: 0.5rem;
	font-family: var(--font-strong);
	font-size: var(--fs-sm);
	color: var(--color-accent);
}

/* Abschnittstitel im Kasse-/Warenkorb-Block („Kontaktinformation",
   „Versandoptionen", „Zahlungsoptionen" …): Die Blöcke setzen 20 px
   (--wp--preset--font-size--medium). In Oh Livey wirkt das winzig, daher
   die Größe der übrigen H2 im Portal. */
body .wc-block-components-title.wc-block-components-title {
	font-size: var(--fs-h2);
	line-height: var(--lh-tight);
}

.woocommerce .price,
.woocommerce-Price-amount { color: var(--color-text); font-weight: 700; }

/* Katalog-Sortierung an das Portal-Select angleichen (Preview-Optik) */
.woocommerce .woocommerce-ordering { margin: 0; }
.woocommerce .woocommerce-ordering select,
select.orderby {
	font-family: inherit;
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--color-text);
	background-color: var(--color-bg);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-input);
	padding: 0.5rem 0.75rem;
}

/* WooCommerce Messages im Portal-Look */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top: 0;
	border-radius: var(--radius-input);
	padding: 0.9rem 1.1rem 0.9rem 2.6rem;
	font-size: var(--fs-sm);
}
.woocommerce-message { background-color: var(--color-success-soft); color: var(--color-success); }
.woocommerce-message::before { color: var(--color-success); }
.woocommerce-info { background-color: var(--color-primary-soft); color: var(--color-primary-dark); }
.woocommerce-info::before { color: var(--color-primary); }
.woocommerce-error { background-color: #f6e7e7; color: var(--color-danger); }

/* ==========================================================================
   Mein Konto (WooCommerce-Templates myaccount/*, Seitenkopf in page.php)
   Aufbau wie die Rechtstexte: Navigation links, Inhalt als weiße Fläche mit
   roter Oberkante. Die WC-Default-Styles sind aus, daher vollständig hier.
   ========================================================================== */
.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
	gap: 1.5rem 3rem;
	align-items: start;
}
.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}
.woocommerce-account .woocommerce-notices-wrapper:empty { display: none; }

/* -- Navigation ------------------------------------------------------------ */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 3px solid var(--color-accent);
	background-color: var(--color-bg);
}
.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.8rem 1rem;
	border-bottom: 1px solid var(--color-line);
	font-family: var(--font-subline);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-soft);
	text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li a:focus-visible { color: var(--color-accent); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background-color: var(--color-primary-soft);
	color: var(--color-primary-dark);
	box-shadow: inset 3px 0 0 var(--color-accent);
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--color-muted); }

/* -- Inhaltsfläche --------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-content {
	min-width: 0;
	padding: clamp(1.25rem, 3vw, 2.5rem);
	background-color: var(--color-bg);
	border-top: 3px solid var(--color-accent);
	line-height: var(--lh-normal);
}
.woocommerce-account .woocommerce-MyAccount-content > :first-child { margin-top: 0; }
.woocommerce-account .woocommerce-MyAccount-content > :last-child { margin-bottom: 0; }
.woocommerce-account .woocommerce-MyAccount-content p { margin: 0 0 1rem; }
.woocommerce-account .woocommerce-MyAccount-content a:not(.button) {
	color: var(--color-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.woocommerce-account .woocommerce-MyAccount-content a:not(.button):hover { color: var(--color-accent-dark); }
.woocommerce-account .woocommerce-MyAccount-content strong { color: var(--color-primary-dark); }

/* Überschriften im Konto ruhig (Oh Livey bleibt dem Seitentitel vorbehalten). */
.woocommerce-account .woocommerce-MyAccount-content :is(h2, h3, legend) {
	margin: 2rem 0 1rem;
	padding: 0;
	font-family: var(--font-subline);
	font-size: var(--fs-md);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-primary-dark);
}
.woocommerce-account .woocommerce-MyAccount-content > :is(h2, h3):first-child { margin-top: 0; }

/* -- Tabellen (Bestellungen, Bestelldetails, Downloads) --------------------- */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
	width: 100%;
	margin: 0 0 1.5rem;
	border: 0;
	border-collapse: collapse;
	font-size: var(--fs-sm);
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table :is(th, td) {
	padding: 0.8rem 0.75rem;
	border: 0;
	border-bottom: 1px solid var(--color-line);
	text-align: left;
	vertical-align: middle;
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead th {
	background-color: var(--color-primary-soft);
	font-family: var(--font-subline);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-primary-dark);
	white-space: nowrap;
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:hover :is(th, td) { background-color: #faf9f8; }
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tfoot :is(th, td) {
	font-weight: 700;
	color: var(--color-primary-dark);
}
.woocommerce-account .woocommerce-orders-table__cell-order-number a {
	font-family: var(--font-strong);
	font-weight: 700;
	text-decoration: none !important;
}
.woocommerce-account .woocommerce-orders-table__cell-order-actions {
	text-align: right !important;
	white-space: nowrap;
}

/* Bestellstatus als ruhiges Label */
.woocommerce-account .woocommerce-orders-table__cell-order-status {
	font-family: var(--font-strong);
	font-weight: 700;
	color: var(--color-primary-dark);
}
.woocommerce-account .woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status,
.woocommerce-account .woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status { color: #a8650b; }
.woocommerce-account .woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status { color: var(--color-success); }
.woocommerce-account .woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status,
.woocommerce-account .woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status { color: var(--color-danger); }

/* -- Buttons im Konto ------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-content .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--color-primary);
	border-radius: var(--radius-button);
	background-color: var(--color-primary);
	font-family: var(--font-subline);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-white);
	text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-content .button:hover,
.woocommerce-account .woocommerce-MyAccount-content .button:focus-visible {
	border-color: var(--color-primary-dark);
	background-color: var(--color-primary-dark);
	color: var(--color-white);
}
.woocommerce-account .woocommerce-MyAccount-content .button + .button { margin-left: 0.4rem; }
/* Hauptaktion eines Formulars („Änderungen speichern", „Adresse speichern") */
.woocommerce-account .woocommerce-MyAccount-content form button[type="submit"].button {
	min-height: 44px;
	padding: 0.75rem 1.4rem;
	border-color: var(--color-accent);
	background-color: var(--color-accent);
	font-size: var(--fs-sm);
}
.woocommerce-account .woocommerce-MyAccount-content form button[type="submit"].button:hover,
.woocommerce-account .woocommerce-MyAccount-content form button[type="submit"].button:focus-visible {
	border-color: var(--color-accent-dark);
	background-color: var(--color-accent-dark);
}

/* Blättern in den Bestellungen */
.woocommerce-account .woocommerce-pagination {
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
}

/* -- Adressen --------------------------------------------------------------- */
.woocommerce-account .woocommerce-Addresses,
.woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin-top: 1.25rem;
}
.woocommerce-account .woocommerce-Address,
.woocommerce-account .woocommerce-customer-details .woocommerce-column {
	padding: 1.25rem 1.4rem;
	border: 1px solid var(--color-line);
	background-color: var(--color-bg);
}
.woocommerce-account .woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.75rem;
}
.woocommerce-account .woocommerce-Address-title :is(h2, h3),
.woocommerce-account .woocommerce-customer-details .woocommerce-column__title { margin: 0 0 0.75rem; }
.woocommerce-account .woocommerce-Address-title :is(h2, h3) { margin: 0; }
.woocommerce-account .woocommerce-Address-title .edit {
	flex-shrink: 0;
	font-size: var(--fs-sm);
}
.woocommerce-account .woocommerce-MyAccount-content address {
	font-style: normal;
	line-height: 1.6;
}
.woocommerce-account .woocommerce-customer-details--phone,
.woocommerce-account .woocommerce-customer-details--email { margin: 0.35rem 0 0; }

/* -- Formulare (Adresse bearbeiten, Kontodetails) ---------------------------- */
.woocommerce-account .woocommerce-MyAccount-content form :is(.woocommerce-address-fields__field-wrapper, .woocommerce-EditAccountForm) {
	display: block;
}
.woocommerce-account .woocommerce-address-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 1rem;
}
.woocommerce-account .woocommerce-address-fields__field-wrapper .form-row-wide,
.woocommerce-account .woocommerce-address-fields__field-wrapper .form-row:not(.form-row-first):not(.form-row-last) { grid-column: 1 / -1; }
.woocommerce-account .woocommerce-EditAccountForm {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 1rem;
}
.woocommerce-account .woocommerce-EditAccountForm > :not(.form-row-first):not(.form-row-last) { grid-column: 1 / -1; }
.woocommerce-account .woocommerce-MyAccount-content .clear { display: none; }
.woocommerce-account .woocommerce-MyAccount-content .form-row {
	margin: 0 0 1rem;
	padding: 0;
}
.woocommerce-account .woocommerce-MyAccount-content .form-row label {
	display: block;
	margin-bottom: 0.35rem;
	font-family: var(--font-strong);
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--color-primary-dark);
}
.woocommerce-account .woocommerce-MyAccount-content .form-row label.checkbox,
.woocommerce-account .woocommerce-MyAccount-content .form-row .woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: inherit;
	font-weight: 400;
}
.woocommerce-account .woocommerce-MyAccount-content .required {
	color: var(--color-accent);
	text-decoration: none;
	border: 0;
}
.woocommerce-account .woocommerce-MyAccount-content .optional { font-weight: 400; color: var(--color-muted); }
.woocommerce-account .woocommerce-MyAccount-content .form-row em,
.woocommerce-account .woocommerce-MyAccount-content .form-row .description {
	display: block;
	margin-top: 0.3rem;
	font-size: var(--fs-xs);
	font-style: normal;
	color: var(--color-muted);
}
.woocommerce-account .woocommerce-MyAccount-content fieldset {
	margin: 1rem 0 1.5rem;
	padding: 1.25rem 1.4rem 0.25rem;
	border: 1px solid var(--color-line);
}
.woocommerce-account .woocommerce-MyAccount-content fieldset legend {
	margin: 0;
	padding: 0 0.5rem;
	font-size: var(--fs-sm);
}
.woocommerce-account .woocommerce-MyAccount-content .password-input {
	position: relative;
	display: block;
}
.woocommerce-account .woocommerce-MyAccount-content .show-password-input {
	position: absolute;
	top: 50%;
	right: 0.5rem;
	width: auto;
	min-height: 0;
	padding: 0.25rem 0.4rem;
	border: 0;
	background: transparent;
	color: var(--color-muted);
	transform: translateY(-50%);
}
.woocommerce-account .woocommerce-MyAccount-content .show-password-input::after {
	content: "";
	display: block;
	width: 1.1rem;
	height: 1.1rem;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.woocommerce-account .woocommerce-MyAccount-content .show-password-input:hover { color: var(--color-accent); background: transparent; }

/* -- Bestelldetails --------------------------------------------------------- */
.woocommerce-account .woocommerce-order-details,
.woocommerce-account .woocommerce-customer-details { margin-top: 2rem; }
.woocommerce-account mark {
	padding: 0 0.2em;
	background-color: var(--color-primary-soft);
	color: var(--color-primary-dark);
	font-weight: 700;
}
.woocommerce-account .woocommerce-OrderUpdates {
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}
.woocommerce-account .woocommerce-OrderUpdate {
	padding: 0.75rem 1rem;
	border-left: 3px solid var(--color-accent);
	background-color: var(--color-primary-soft);
}

/* -- Mobil ------------------------------------------------------------------ */
@media (max-width: 960px) {
	.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) { grid-template-columns: minmax(0, 1fr); }
	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: flex;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation li { flex: 0 0 auto; }
	.woocommerce-account .woocommerce-MyAccount-navigation li a {
		border-bottom: 0;
		border-right: 1px solid var(--color-line);
		white-space: nowrap;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { box-shadow: inset 0 -3px 0 var(--color-accent); }
}
@media (max-width: 640px) {
	.woocommerce-account .woocommerce-Addresses,
	.woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses,
	.woocommerce-account .woocommerce-address-fields__field-wrapper,
	.woocommerce-account .woocommerce-EditAccountForm { grid-template-columns: minmax(0, 1fr); }

	/* Bestelltabelle als Karten: Spaltenname aus data-title */
	.woocommerce-account table.shop_table_responsive thead { display: none; }
	.woocommerce-account table.shop_table_responsive tr {
		display: block;
		padding: 0.5rem 0;
		border-bottom: 1px solid var(--color-line);
	}
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive :is(th, td) {
		display: flex;
		justify-content: space-between;
		gap: 1rem;
		padding: 0.35rem 0;
		border: 0;
		text-align: right !important;
	}
	.woocommerce-account table.shop_table_responsive :is(th, td)[data-title]::before {
		content: attr(data-title);
		font-family: var(--font-strong);
		font-weight: 700;
		color: var(--color-primary-dark);
		text-align: left;
	}
	.woocommerce-account table.shop_table_responsive tbody tr:hover :is(th, td) { background-color: transparent; }
}

/* Warenkorb & Checkout-Tabellen ruhiger */
.woocommerce table.shop_table {
	border-radius: var(--radius-card);
	border-color: var(--color-line);
}
.woocommerce table.shop_table th { background-color: var(--color-bg-soft); color: var(--color-muted); }

/* Preise für Nicht-Händler verbergen – siehe functions.php Fallback */
.wo-price-locked { color: var(--color-muted); font-style: italic; font-size: var(--fs-sm); }

/* ==========================================================================
   Produktdetailseite – WooCommerce-Bausteine im Portal-Look
   (WC-Default-Styles sind bewusst deaktiviert, siehe inc/woocommerce.php,
   daher stylen wir Galerie, Warenkorb-Formular, Varianten, Tabs und
   „Ähnliche Produkte“ hier vollständig selbst.)
   ========================================================================== */

/* -- Produktgalerie (custom: quadratisch + Thumbnail-Slider + Lupe) -------- */
.woocommerce-product-gallery { position: relative; margin: 0; }
.woocommerce-product-gallery__wrapper { margin: 0; padding: 0; list-style: none; }
/* ==========================================================================
   Einheitliche Produktbildflaechen
   --------------------------------------------------------------------------
   Alle Produktbilder der Produktseite -- Galerie-Buehne, Galerie-Thumbnails,
   Varianten-Swatches und die Kacheln unter "Aehnliche Produkte" -- liegen in
   einer quadratischen Flaeche. Galerie-Buehne und -Thumbnails fuellen sie
   vollstaendig (object-fit: cover, Ueberstand wird mittig abgeschnitten),
   damit das Bild immer als Quadrat erscheint -- wie die Kacheln der
   Kategorieseiten. Mit contain stand das Motiv auf dem weissen Grund in
   seinem eigenen Format, das Quadrat war nicht zu sehen.

   Frueher standen hier drei verschiedene Regeln nebeneinander: die Buehne
   auf contain, Swatches und "Aehnliche Produkte" auf cover. Ein Freisteller
   wurde damit je nach Flaeche unterschiedlich stark angeschnitten und wirkte
   unterschiedlich gross. Neue Bildflaechen deshalb bitte ueber die Tokens
   --product-media-ratio / --product-media-pad / --product-media-bg aus
   design-system.css aufbauen und nicht wieder einzeln auf cover setzen.

   Die passenden quadratischen Dateien liefert inc/woocommerce.php.
   ========================================================================== */

/* Fallback vor dem JS-Aufbau: bereits quadratisch, damit die Seite beim
   Aufbau der Galerie nicht springt. */
.woocommerce-product-gallery__image,
.woocommerce-product-gallery__image a { display: block; }
.woocommerce-product-gallery__image img {
	width: 100%;
	aspect-ratio: var(--product-media-ratio);
	height: auto;
	object-fit: cover;
	padding: 0;
	border-radius: var(--radius-card);
	background-color: var(--product-media-bg);
}

/* Hauptbild – immer quadratisch, fuellt die Buehne vollstaendig. */
.wo-gallery__stage {
	position: relative;
	aspect-ratio: var(--product-media-ratio);
	border-radius: var(--radius-card);
	overflow: hidden;
	background-color: var(--product-media-bg);
	cursor: zoom-in;
}
.wo-gallery__main {
	width: 100%;
	height: 100%;
	/* cover: Die Buehne ist fix quadratisch und immer ganz gefuellt,
	   unabhaengig vom Seitenverhaeltnis der hochgeladenen Datei. Die Lupe in
	   product-gallery.js rechnet mit demselben Zuschnitt. */
	object-fit: cover;
	object-position: center;
	padding: 0;
	display: block;
	user-select: none;
}

/* Lupe – folgt dem Cursor beim Überfahren des Hauptbildes. */
.wo-gallery__lens {
	position: absolute;
	left: 0;
	top: 0;
	pointer-events: none;
	border-radius: 50%;
	border: 3px solid var(--color-bg);
	box-shadow: 0 0 0 1px var(--color-line), var(--shadow-soft);
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity var(--transition);
	z-index: 3;
}
.wo-gallery__stage.is-zooming .wo-gallery__lens { opacity: 1; }

/* Thumbnails – quadratisch, 2 sichtbar, horizontaler Slider bei mehr Bildern. */
.wo-gallery__thumbs {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: clamp(60px, 7vw, 85px);
	justify-content: start;
	gap: 0.5rem;
	margin-top: 0.75rem;
	padding-bottom: 0.35rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	scrollbar-color: var(--color-line) transparent;
}

.wo-gallery__thumb {
	width: 100%;
	aspect-ratio: var(--product-media-ratio);
	padding: 0;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-card);
	background-color: var(--product-media-bg);
	overflow: hidden;
	cursor: pointer;
	scroll-snap-align: start;
}

.wo-gallery__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	padding: 0;
}
/* Hintergrund halten, sonst greift der rote Hover des globalen button-Stils. */
.wo-gallery__thumb:hover,
.wo-gallery__thumb:focus-visible { border-color: var(--color-primary); background-color: var(--product-media-bg); }
.wo-gallery__thumb.is-active { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }

/* Nach dem JS-Aufbau die rohe WooCommerce-Bildliste ausblenden. */
.wo-gallery--ready .woocommerce-product-gallery__wrapper { display: none; }

/* -- Sale-Flash ------------------------------------------------------------ */
.woocommerce span.onsale,
.wo-pdp .onsale {
	position: absolute;
	top: 1.5rem;
	left: 1.5rem;
	z-index: 2;
	display: inline-block;
	padding: 0.35em 0.7em;
	font-size: var(--fs-xs);
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-white);
	background-color: var(--color-accent);
	border-radius: var(--radius-badge);
}

/* -- Warenkorb-/Mengen-Formular ------------------------------------------- */
.wo-pdp form.cart {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-top: 1.25rem;
}
.wo-pdp form.cart .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-input);
	background-color: var(--color-bg);
	overflow: hidden;
}
.wo-pdp form.cart .quantity input.qty {
	width: 4.5rem;
	height: 3rem;
	border: 0;
	text-align: center;
	font-size: var(--fs-base);
	font-weight: 600;
	color: var(--color-text);
	-moz-appearance: textfield;
}
.wo-pdp form.cart .quantity input.qty::-webkit-outer-spin-button,
.wo-pdp form.cart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wo-pdp form.cart .single_add_to_cart_button {
	background-color: var(--color-accent);
	min-height: 3rem;
	border: none;
}
.wo-pdp form.cart .single_add_to_cart_button:hover { background-color: var(--color-accent-dark); }

/* Varianten-Auswahl (variable Produkte) */
.wo-pdp table.variations { width: 100%; border-collapse: collapse; margin: 0 0 1rem; }
.wo-pdp table.variations th,
.wo-pdp table.variations td { text-align: left; padding: 0.5rem 0; vertical-align: middle; }
.wo-pdp table.variations th { width: 30%; font-size: var(--fs-sm); font-weight: 600; color: var(--color-text-soft); }
.wo-pdp table.variations select {
	width: 100%;
	font-family: inherit;
	font-size: var(--fs-base);
	color: var(--color-text);
	background-color: var(--color-bg);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-input);
	padding: 0.6rem 0.75rem;
}
.wo-pdp .woocommerce-variation-price { margin-bottom: 0.75rem; }
.wo-pdp .reset_variations { font-size: var(--fs-sm); margin-left: 0.5rem; }

/* Hinweis bei nicht vorhandener Kombination („Es entsprechen leider keine
   Produkte deiner Auswahl …“, von wc-add-to-cart-variation.js eingefuegt)
   bzw. nicht verfuegbarer Variante (role="alert" in .single_variation).
   Als .woocommerce-info hatte er denselben Grund wie der Preiskasten
   (--color-primary-soft) und war darin praktisch unsichtbar. Deshalb hier
   weiss mit rotem Rand und Warnsymbol. */
.wc-no-matching-variations.woocommerce-info,
.single_variation p[role="alert"] {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1rem;
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--color-accent);
	border-left-width: 0.3rem;
	border-radius: var(--radius-input);
	background-color: var(--color-white);
	color: var(--color-accent);
	font-size: var(--fs-base);
	font-weight: 700;
	line-height: 1.4;
}
.wc-no-matching-variations.woocommerce-info::before,
.single_variation p[role="alert"]::before {
	content: "!";
	position: static;
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background-color: var(--color-accent);
	color: var(--color-white);
	font-family: var(--font-strong);
	font-size: var(--fs-md);
	font-weight: 700;
	line-height: 1;
}

/* Varianten als „Pills“ (JS-Aufwertung des <select>, siehe variation-pills.js).
   Das Original-<select> wird versteckt, sobald die Pills aktiv sind. */
.wo-variation-pills__select { display: none; }
.wo-variation-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.wo-variation-pills__pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.5rem;
	padding: 0.45rem 1rem;
	font-family: var(--font-strong);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.2;
	color: var(--color-text);
	background-color: var(--color-bg);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-button);
	cursor: pointer;
	transition: color var(--transition), background-color var(--transition), border-color var(--transition);
}
/* Vorher stand hier color:white auf weissem Grund -- die Beschriftung
   verschwand beim Ueberfahren. Den Hintergrund explizit halten, sonst
   greift der rote Hover des globalen button-Stils (design-system.css). */
.wo-variation-pills__pill:hover,
.wo-variation-pills__pill:focus-visible {
	border-color: var(--color-primary);
	background-color: var(--color-bg);
	color: var(--color-text);
}
.wo-variation-pills__pill.is-active {
	color: var(--color-white);
	background-color: var(--color-primary);
	border-color: var(--color-primary);
}
/* Nicht verfuegbar: im Wolters-Rot durchgestrichen. Statt opacity auf der
   ganzen Pill wird nur der Inhalt abgeschwaecht, damit der Strich kraeftig
   rot bleibt. */
.wo-variation-pills__pill[disabled] {
	color: var(--color-muted);
	cursor: not-allowed;
	text-decoration: line-through;
	text-decoration-color: var(--color-accent);
	text-decoration-thickness: 2px;
}
.wo-variation-pills__pill[disabled]:hover {
	color: var(--color-muted);
	background-color: var(--color-bg);
	border-color: var(--color-line);
}

/* Farb-/Musterbilder (siehe inc/attribute-swatches.php).
   Kleine Kreise mit einem Ausschnitt des Bildes. Der Name steht im
   title-Tooltip und bleibt fuer Screenreader im (versteckten) Label. */
.wo-variation-pills--swatches {
	gap: 0.65rem;
}
/* Bild-Pills: 4rem Kantenlaenge. */
.wo-variation-pills__pill--swatch {
	position: relative;
	width: 4rem;
	height: 4rem;
	min-height: 0;
	padding: 4px;
	border-radius: 50%;
}
.wo-variation-pills__figure {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
	background-color: var(--color-primary-soft);
}
/* cover statt contain: Der Kreis soll vollstaendig mit Material gefuellt
   sein, der Rand des Bildes darf wegfallen. */
.wo-variation-pills__figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.wo-variation-pills__pill--swatch .wo-variation-pills__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
/* Aktiv: kraeftigerer Ring statt Vollflaeche, das Muster bleibt sichtbar. */
.wo-variation-pills__pill--swatch.is-active {
	background-color: var(--color-bg);
	border-color: var(--color-primary);
	box-shadow: 0 0 0 1px var(--color-primary);
}
/* Nicht verfuegbar: Bild abgeschwaecht, diagonal im Wolters-Rot durchgestrichen. */
.wo-variation-pills__pill--swatch[disabled] {
	text-decoration: none;
}
.wo-variation-pills__pill--swatch[disabled] .wo-variation-pills__figure {
	opacity: 0.45;
}
.wo-variation-pills__pill--swatch[disabled]::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 2px;
	right: 2px;
	height: 2px;
	margin-top: -1px;
	border-radius: 1px;
	background-color: var(--color-accent);
	transform: rotate(-45deg);
}

/* -- Produkt-Tabs (Beschreibung, Zusatzinfos, Bewertungen) ----------------- */
.woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--color-line);
}
.woocommerce-tabs ul.tabs li { margin: 0; }
.woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0.7rem 1rem;
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--color-muted);
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}
.woocommerce-tabs ul.tabs li a:hover { color: var(--color-text); }
.woocommerce-tabs ul.tabs li.active a { color: var(--color-text); border-bottom-color: var(--color-accent); }
.woocommerce-tabs .panel { margin: 0; }
.woocommerce-tabs .panel h2:first-child { margin-top: 0; }

/* -- Produktkacheln (ul.products-Raster) -----------------------------------
   Gilt fuer Kategorieseiten, aehnliche Produkte, Up-/Cross-Sells und das
   Produkt-Widget von Elementor -- alle rendern dieselbe WooCommerce-Struktur:

     li.product > a.woocommerce-loop-product__link > img + h2 + .price
     li.product > a.button

   Ohne feste Hoehen richtet sich alles unterhalb des Bildes nach der
   Zeilenzahl des Titels und nach dem Seitenverhaeltnis des Fotos. In einer
   Reihe sitzen Preis und Button dann auf unterschiedlicher Hoehe.

   Dieselbe Technik wie bei .wo-product-card in layout.css: Zeilenhoehe des
   Rasters angleichen, Bild auf festes Format, Titelzeilen reservieren, Button
   per margin-top:auto an den unteren Rand. Reicht der Platz fuer lange
   Produktnamen nicht, --card-title-lines hier auf 3 erhoehen -- der Rest
   rechnet mit.
   -------------------------------------------------------------------------- */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--gutter);
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;

	/* Jede Zeile gleich hoch, damit die Kacheln sich strecken koennen. */
	grid-auto-rows: 1fr;

	--card-title-lines: 2;
	--card-line-height: 1.25;
}

/* Shop-, Kategorie- und Schlagwortseiten: hoechstens 4 Kacheln pro Zeile
   (Tablet 3). Auf dem Handy greift weiter das auto-fill-Raster oben.
   Aehnliche Produkte und Elementor-Widgets bleiben davon unberuehrt. */
@media (min-width: 48rem) {
	.post-type-archive-product.woocommerce ul.products,
	.tax-product_cat.woocommerce ul.products,
	.tax-product_tag.woocommerce ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (min-width: 62rem) {
	.post-type-archive-product.woocommerce ul.products,
	.tax-product_cat.woocommerce ul.products,
	.tax-product_tag.woocommerce ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
	text-align: center;

	/* Weiche Flaeche wie bei .wo-product-card in layout.css -- auf dem weissen
	   Seitengrund war die Kachelgrenze sonst nur am Bild ablesbar. Das
	   Innenpolster setzt den Inhalt von der Kante ab. */
	background-color: var(--color-surface-card);
	padding: 0.9rem;

	/* Bezugsrahmen fuer den Stretched-Link weiter unten. */
	position: relative;
}

/* WooCommerce klammert Bild, Titel und Preis in einen Link. Der muss die
   Resthoehe der Kachel aufnehmen, sonst hat der Button nichts, wogegen er
   sich nach unten schieben kann. */
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link,
.woocommerce ul.products li.product > a.woocommerce-loop-product__link {
	display: flex;
	flex: 1;
	flex-direction: column;
}

/* Hoch- und querformatige Produktfotos verschieben sonst alles darunter.
   Feste quadratische Flaeche + cover: Das Bild fuellt die Flaeche immer ganz,
   Ueberstand wird mittig abgeschnitten -- wie .wo-product-card in layout.css.
   height: auto ist Pflicht: WordPress schreibt width/height-Attribute ans
   <img>, und das height-Attribut hebelt aspect-ratio sonst aus -- jedes Bild
   bekaeme die Hoehe seiner Datei und die Kacheln waeren unterschiedlich gross. */
.woocommerce ul.products li.product img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--product-media-ratio);
	object-fit: cover;
	object-position: center;
	padding: 0;
	background-color: transparent;
	border-radius: var(--radius-card);
	margin-bottom: 0.75rem;
	flex: 0 0 auto;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	/* WooCommerce rendert den Titel als <h2>, damit greift sonst die globale
	   h1-h6-Regel mit --font-display (Oh Livey). Produkttitel laufen im Portal
	   aber immer in der Textschrift -- wie .wo-product-card__title. */
	--loop-title-size: calc(var(--fs-lg) * 0.85); /* 15 % kleiner als --fs-lg */
	font-family: var(--font-strong);
	font-size: var(--loop-title-size);
	font-weight: 600;
	line-height: var(--card-line-height, 1.25);
	letter-spacing: 0.01em;
	text-transform: none;
	color: var(--color-text);
	padding: 0;

	/* Feste Zeilenzahl: kuerzere Namen reservieren den Platz, laengere werden
	   mit Auslassungspunkten gekuerzt. */
	min-height: calc(
		var(--loop-title-size) * var(--card-line-height, 1.25) * var(--card-title-lines, 2)
	);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--card-title-lines, 2);
	line-clamp: var(--card-title-lines, 2);
	overflow: hidden;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title { margin-bottom: 0.75rem; }

/* Farbhinweis unter dem Titel (wolters_swatch_loop_colors): kleine Kreise mit
   dem Materialausschnitt der Varianten-Pills, dahinter "+3" fuer den Rest.
   Ohne gepflegte Pill-Bilder steht dort nur "8 Farben". Reine Anzeige -- die
   Auswahl passiert auf der Produktseite. */
.wo-loop-colors {
	/* Ueber den Stretched-Link heben, sonst zeigt der Tooltip den Farbnamen nicht. */
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
	margin: 0 0 0.75rem;
	color: var(--color-muted);
	font-size: var(--fs-xs);
	font-weight: 600;
	line-height: 1;
}
.wo-loop-colors__swatch {
	flex: 0 0 auto;
	width: 1.5rem;
	height: 1.5rem;
	border: 1px solid var(--color-line);
	border-radius: 50%;
	overflow: hidden;
	background-color: var(--color-primary-soft);
}
/* Die Bildregel der Kachel oben (Quadrat, volle Breite, Abstand nach unten)
   gilt sonst auch fuer die Farbkreise. */
.woocommerce ul.products li.product .wo-loop-colors__swatch img {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	margin: 0;
	border-radius: 0;
}
.wo-loop-colors__more { margin-left: 0.15rem; }

/* Preis als Leiste am unteren Kachelrand, buendig mit den Kanten. Bewusst
   ruhig gehalten: Rot bleibt den Badges ("Neu", "Bestseller", Aktion)
   vorbehalten. margin-top: auto schiebt die Leiste an den Kachelboden, damit
   sie in einer Reihe auf gleicher Hoehe sitzt -- egal ob ein Farbhinweis da
   ist. Die negativen Raender heben das Innenpolster der Kachel (0.9rem) auf. */
.woocommerce ul.products li.product .price {
	display: block;
	margin: auto -0.9rem -0.9rem;
	padding: 0.6rem 0.9rem;
	background-color: rgb(216, 211, 205);
	color: var(--color-primary-dark);
	font-family: var(--font-strong);
	font-size: var(--fs-md);
	line-height: 1.2;
}
.woocommerce ul.products li.product .price .woocommerce-Price-amount,
.woocommerce ul.products li.product .price .wo-price-locked { color: inherit; }

/* "ab" (wolters_b2b_variable_price_from), Streichpreis und Preis-Suffix
   treten hinter den Betrag zurueck. */
.woocommerce ul.products li.product .price .wo-price-from,
.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price .woocommerce-price-suffix {
	font-size: var(--fs-sm);
	font-weight: 400;
}
.woocommerce ul.products li.product .price ins { text-decoration: none; }

/* Ganze Kachel klickbar.

   Der Button unter der Kachel ist entfernt (remove_action in
   inc/woocommerce.php) -- er war nur ein zweiter Link auf dieselbe
   Produktseite. WooCommerce verlinkt von sich aus nur Bild, Titel und Preis;
   die weiche Flaeche und das Innenpolster blieben tot. Das ::after zieht den
   vorhandenen Link ueber die gesamte Kachel, ohne ein zweites Linkziel in den
   Tab-Fokus zu legen: der Linktext bleibt der Produktname.

   Kein Ersatz-Button noetig -- bestellt wird in der Tabellenansicht mit
   Mengenfeld und VE, die Kachelansicht dient dem Sortiment. */
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link::after,
.woocommerce ul.products li.product > a.woocommerce-loop-product__link::after {
	content: "";
	position: absolute;
	inset: 0;
}
.woocommerce .related > h2,
.woocommerce .upsells > h2 { margin-top: 2.5rem; }


/* ==========================================================================
   Tab „Zusätzliche Informationen" – Attributtabelle im Portal-Look
   (WC-Default-Styles sind deaktiviert, daher hier vollständig gestylt)
   ========================================================================== */
.woocommerce-product-attributes {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-sm);
	margin: 0;
}
.woocommerce-product-attributes th,
.woocommerce-product-attributes td {
	text-align: left;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--color-line);
	vertical-align: top;
}
.woocommerce-product-attributes tr:last-child th,
.woocommerce-product-attributes tr:last-child td { border-bottom: 0; }
.woocommerce-product-attributes th {
	width: 22%;
	white-space: nowrap;
	color: var(--color-muted);
	font-weight: 600;
}
.woocommerce-product-attributes td p { margin: 0; }

/* Ein Wert pro Zeile (Größen-/Farbwerte etc.) */
.wo-attr-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}
.wo-attr-list li { padding: 0; }


/* ==========================================================================
   Produktdetailseite – Rahmen, Preisblock, Specs, Tabs
   (Layout aus woocommerce/content-single-product.php)

   Diese Regeln lagen frueher als <style>-Block im Template und brachten eine
   eigene Palette mit (#c00d0d, #f0eeed, eigene Font-Stacks, acht verschiedene
   Radien). Damit liefen zwei Designsysteme auf einer Seite: die per JS
   erzeugte Galerie und die Varianten-Pills werden aus den Tokens gestylt,
   der Rest der Seite lag hart kodiert daneben.

   Jetzt alles ueber die Tokens aus design-system.css:
   - Radius und Schatten kommen aus --radius-* / --shadow-* (aktuell 0/none),
     gegliedert wird ueber Linie und Weissraum.
   - Rot (--color-accent) bleibt dem Haendlerpreis, dem Bestellbutton, dem
     aktiven Tab und dem Sale-Flash vorbehalten.
   - Produkttitel laeuft in --font-strong, wie alle Produkttitel im Portal.
     Oh Livey steht genau einmal auf der Seite, ueber "Aehnliche Produkte".
   - Lesetexte in --color-text; --color-muted nur noch dekorativ, weil
     #92857c auf Weiss nur 3,6:1 erreicht (WCAG-Minimum 4,5:1).
   ========================================================================== */

.wolters-product {
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-sans);
}

.wolters-product *,
.wolters-product *::before,
.wolters-product *::after { box-sizing: border-box; }

/* Deckungsgleich mit .wo-container, damit die Inhaltskanten der Seite mit
   Header und Footer fluchten (vorher: eigene 76rem-Breite). */
.wolters-product__container {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* -- Breadcrumb ------------------------------------------------------------ */
.wolters-product__breadcrumb {
	padding: 0.9rem 0;
	background-color: var(--color-header-bg);
}
.wolters-product__breadcrumb .woocommerce-breadcrumb {
	margin: 0;
	color: var(--color-text);
	font-family: var(--font-subline);
	font-size: var(--fs-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.wolters-product__breadcrumb a { color: var(--color-text); text-decoration: none; }
.wolters-product__breadcrumb a:hover,
.wolters-product__breadcrumb a:focus-visible { color: var(--color-accent); }

/* -- Hauptbereich ---------------------------------------------------------- */
.wolters-product__main { padding: clamp(2rem, 5vw, 4rem) 0; }

.wolters-product__layout {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

.wolters-product__summary { min-width: 0; }
/* position: relative ist Pflicht: der Sale-Flash wird von WooCommerce als
   Geschwister der Galerie ausgegeben und absolut positioniert. */
.wolters-product__gallery { position: relative; min-width: 0; }

/* -- Kopf der Zusammenfassung ---------------------------------------------- */
.wolters-product__series {
	display: block;
	margin-bottom: 0.7rem;
	color: var(--color-accent);
	font-family: var(--font-subline);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Produkttitel in der Textschrift, nicht in Oh Livey: Artikelnamen sind lang
   und enthalten Groessen- und Farbangaben. Vgl. .wo-product-card__title. */
.wolters-product__title {
	max-width: 26ch;
	margin: 0;
	color: var(--color-text);
	font-family: var(--font-strong);
	font-size: clamp(1.9rem, 3.4vw, 2.6rem);
	font-weight: 700;
	letter-spacing: 0.015em;
	line-height: 1.1;
	text-transform: none;
	text-wrap: balance;
}

.wolters-product__meta {
	display: flex;
	margin: 1.2rem 0 0;
	padding: 0 0 1.2rem;
	border-bottom: 1px solid var(--color-line);
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.2rem;
	color: var(--color-text);
	font-size: var(--fs-sm);
}
.wolters-product__meta strong {
	color: var(--color-text);
	font-family: var(--font-subline);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.wolters-product__size-matrix { margin-top: 1.5rem; }

/* -- Preis- und Bestellblock ----------------------------------------------- */
/* Einzige getoente Flaeche der Seite: hier wird bestellt.
   position: relative als Bezugsrahmen fuer den UVP-Kreis an der Ecke. */
.wolters-product__pricebox {
	position: relative;
	margin-top: 1.5rem;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	border-radius: var(--radius-card);
	background-color: var(--color-primary-soft);
}

/* Rechts Platz lassen: dort ragt der UVP-Kreis in die Flaeche hinein. */
.wolters-product__pricegrid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding-right: 3.5rem;
	gap: 1rem 1.5rem;
}
.wolters-product__pricegrid > div { min-width: 0; }

.wolters-product__pricegrid dt,
.wolters-product__tier-caption {
	margin: 0 0 0.2rem;
	color: var(--color-text);
	font-family: var(--font-subline);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.wolters-product__pricegrid dd {
	margin: 0;
	color: var(--color-accent);
	font-family: var(--font-strong);
	font-size: clamp(1.75rem, 3.4vw, 2.35rem);
	font-weight: 700;
	line-height: 1.1;
}
/* UVP im roten Kreis, wie ein Aufkleber halb ueber der rechten oberen Ecke
   des Preis-/Variantenkastens: Der Mittelpunkt liegt genau auf der Ecke.
   Der Haendler sieht auf einen Blick, zu welchem Preis er verkaufen kann.
   Bei Varianten setzt variation-details.js den Inhalt. */
.wolters-product__rrp-badge {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	transform: translate(50%, -50%);
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 6.5rem;
	height: 6.5rem;
	padding: 0.5rem;
	border-radius: 50%;
	background-color: var(--color-accent);
	color: var(--color-white);
	text-align: center;
}
.wolters-product__rrp-badge[hidden] { display: none; }
.wolters-product__pricegrid .wolters-product__rrp-badge dt {
	margin: 0 0 0.15rem;
	color: var(--color-white);
}
.wolters-product__pricegrid dd.wolters-product__rrp {
	color: var(--color-white);
	font-size: var(--fs-lg);
	font-weight: 700;
	line-height: 1.1;
	white-space: nowrap;
}
.wolters-product__rrp .woocommerce-Price-amount { color: inherit; }

.wolters-product__tiers {
	width: 100%;
	margin: 1.25rem 0 0;
	border-collapse: collapse;
	border-top: 1px solid var(--color-line-strong);
}
.wolters-product__tiers caption { padding: 1rem 0 0.3rem; text-align: left; }
.wolters-product__tiers th,
.wolters-product__tiers td {
	padding: 0.4rem 0;
	border: 0;
	background: transparent;
	font-size: var(--fs-sm);
	text-align: left;
}
.wolters-product__tiers th { color: var(--color-text); font-weight: 400; }
.wolters-product__tiers td {
	color: var(--color-text);
	font-family: var(--font-strong);
	font-weight: 700;
	text-align: right;
}

.wolters-product__pricebox form.cart {
	display: flex;
	margin: 1.25rem 0 0 !important;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.75rem;
}
.wolters-product__pricebox form.variations_form { display: block; }

.wolters-product__pricebox .variations {
	width: 100%;
	margin: 0 0 1rem;
	border: 0;
}
.wolters-product__pricebox .variations th,
.wolters-product__pricebox .variations td {
	display: block;
	padding: 0 0 0.5rem;
	border: 0;
	background: transparent;
	text-align: left;
}
.wolters-product__pricebox .variations label {
	color: var(--color-text);
	font-family: var(--font-subline);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.wolters-product__pricebox .reset_variations {
	display: inline-block;
	margin-top: 0.4rem;
	color: var(--color-accent);
	font-size: var(--fs-sm);
}

.wolters-product__pricebox .quantity .qty {
	width: 5rem;
	min-height: 3rem;
	padding: 0.6rem;
	border: 1px solid var(--color-line-strong);
	border-radius: var(--radius-input);
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-strong);
	text-align: center;
}

.wolters-product__pricebox .single_add_to_cart_button.button,
.wolters-product__login-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0.8rem 1.5rem;
	border: 1px solid var(--color-accent) !important;
	border-radius: var(--radius-button) !important;
	background-color: var(--color-accent) !important;
	color: var(--color-white) !important;
	font-family: var(--font-subline);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color var(--transition), border-color var(--transition);
}
.wolters-product__pricebox .single_add_to_cart_button.button:hover,
.wolters-product__pricebox .single_add_to_cart_button.button:focus-visible,
.wolters-product__login-button:hover,
.wolters-product__login-button:focus-visible {
	border-color: var(--color-accent-dark) !important;
	background-color: var(--color-accent-dark) !important;
}
.wolters-product__login-button { margin-top: 1rem; }

/* -- Logistikdaten --------------------------------------------------------- */
.wolters-product__specs {
	width: 100%;
	margin: 1.5rem 0 0;
	border-collapse: collapse;
}
.wolters-product__specs tr { border-bottom: 1px solid var(--color-line); }
.wolters-product__specs th,
.wolters-product__specs td {
	padding: 0.75rem 0;
	border: 0;
	background: transparent;
	font-size: var(--fs-sm);
	text-align: left;
	vertical-align: top;
}
.wolters-product__specs th {
	width: 50%;
	color: var(--color-text);
	font-weight: 400;
}
.wolters-product__specs td {
	color: var(--color-text);
	font-family: var(--font-strong);
	font-weight: 700;
	text-align: right;
}

/* -- Fliesstext, Verkaufsargumente, Downloads ------------------------------ */
/* Steht im Template direkt unter dem <h1> und traegt den Titel weiter, deshalb
   ein knapper Abstand nach oben und etwas mehr Groesse als der uebrige
   Fliesstext. Die Zeilenlaenge ist begrenzt, damit der Absatz nicht bis an die
   Preisbox laeuft. */
.wolters-product__short-description {
	max-width: 46ch;
	margin-top: 1rem;
	color: var(--color-muted);
	font-size: var(--fs-md);
	line-height: var(--lh-normal);
}
.wolters-product__short-description > :first-child { margin-top: 0; }
.wolters-product__short-description > :last-child { margin-bottom: 0; }

/* Eine Groesse fuer alle Zwischentitel der Seite. Vorher lagen hier vier
   verschiedene Oh-Livey-Groessen, "Downloads" stand groesser da als der
   Produktname. */
.wolters-product__subheading {
	margin: 2rem 0 0.9rem;
	color: var(--color-text);
	font-family: var(--font-subline);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-transform: uppercase;
}

.wolters-product__selling-points {
	display: grid;
	margin: 0;
	padding: 0;
	gap: 0.6rem;
	list-style: none;
}
.wolters-product__selling-points li {
	position: relative;
	padding-left: 1.3rem;
	color: var(--color-text);
	line-height: var(--lh-normal);
}
.wolters-product__selling-points li::before {
	position: absolute;
	top: 0.62em;
	left: 0;
	width: 0.4rem;
	height: 0.4rem;
	background-color: var(--color-line-strong);
	content: "";
}

.wolters-product__downloads {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.6rem;
}
/* Bewusst leise: der Bestellbutton bleibt der einzige laute Punkt. */
.wolters-product__download {
	display: flex;
	align-items: center;
	min-height: 2.9rem;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-button);
	color: var(--color-text);
	font-family: var(--font-strong);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: 0.01em;
	text-decoration: none;
	text-transform: none;
	gap: 0.55rem;
	transition: border-color var(--transition), color var(--transition), background-color var(--transition);
}
.wolters-product__download:hover,
.wolters-product__download:focus-visible {
	border-color: var(--color-line-strong);
	background-color: var(--color-primary-soft);
	color: var(--color-text);
}

/* -- Detailbereich (Tabs) -------------------------------------------------- */
/* Vorher: beiger Vollflaechenstreifen mit weisser, abgerundeter Karte darin.
   Jetzt durch eine Linie abgesetzt, wie der Rest des Portals. */
.wolters-product__details {
	padding: clamp(2.5rem, 5vw, 4rem) 0;
	border-top: 1px solid var(--color-line);
	background-color: var(--color-bg);
}
.wolters-product__details-inner { padding: 0; background: none; }

.wolters-product__details .woocommerce-tabs { padding: 0; }
.wolters-product__details .woocommerce-tabs ul.tabs {
	display: flex;
	margin: 0 0 2rem !important;
	padding: 0 0 0.75rem !important;
	border: 0 !important;
	border-bottom: 1px solid var(--color-line) !important;
	flex-wrap: wrap;
	gap: 0.6rem 1.5rem;
}
.wolters-product__details .woocommerce-tabs ul.tabs::before,
.wolters-product__details .woocommerce-tabs ul.tabs li::before,
.wolters-product__details .woocommerce-tabs ul.tabs li::after { display: none !important; }
.wolters-product__details .woocommerce-tabs ul.tabs li {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
}
.wolters-product__details .woocommerce-tabs ul.tabs li a {
	padding: 0.5rem 0 !important;
	color: var(--color-text) !important;
	font-family: var(--font-subline);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.wolters-product__details .woocommerce-tabs ul.tabs li.active a,
.wolters-product__details .woocommerce-tabs ul.tabs li a:hover,
.wolters-product__details .woocommerce-tabs ul.tabs li a:focus-visible {
	color: var(--color-accent) !important;
}

.wolters-product__details .woocommerce-Tabs-panel {
	color: var(--color-text);
	line-height: var(--lh-normal);
}
.wolters-product__details .woocommerce-Tabs-panel > h2:first-child {
	margin: 0 0 1.25rem;
	color: var(--color-text);
	font-family: var(--font-strong);
	font-size: var(--fs-lg);
	font-weight: 700;
	letter-spacing: 0.015em;
	line-height: 1.2;
	text-transform: none;
}

/* Beschreibung-Tab: Nur die Tab-Ueberschrift „Beschreibung“ laeuft in
   Oh Livey. Ueberschriften aus dem Beschreibungstext selbst folgen der
   normalen UI-Typografie -- sonst greift die globale h1-h6-Regel mit
   --font-display. */
.wolters-product__details #tab-description :is(h1, h2, h3, h4, h5, h6) {
	margin: 1.5em 0 0.5em;
	color: var(--color-text);
	font-family: var(--font-strong);
	font-size: var(--fs-md);
	font-weight: 700;
	letter-spacing: 0.015em;
	line-height: 1.2;
	text-transform: none;
}
.wolters-product__details #tab-description :is(h1, h2) { font-size: var(--fs-lg); }
/* Gleiches gilt fuer die Ueberschrift „Pflege- & Sicherheitshinweise“ im
   ACF-Tab. Je nach Ausgabe steht sie direkt im Panel oder als Titel des
   ersten Abschnitts -- beide Faelle abgedeckt. Weitere Abschnitte (z. B.
   FAQ) bleiben in der normalen Schrift, siehe unten. */
.wolters-product__details #tab-wolters_zusatzinformationen > h2:first-child,
.wolters-product__details #tab-wolters_zusatzinformationen .wolters-product-tab__section:first-of-type > h2,
.wolters-product__details #tab-description > h2:first-child {
	margin: 0 0 1.25rem;
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	font-weight: 400;
	letter-spacing: 0.035em;
	line-height: var(--lh-tight);
}

/* -- ACF-Tab: Pflege, Sicherheit und FAQ ------------------------------- */
/* Die Textbreite bleibt bewusst begrenzt. Das verbessert die Lesbarkeit
   langer Hinweise und verhindert breite Textzeilen auf grossen Monitoren.
   Linksbuendig statt zentriert (margin: 0 auto), damit der Text an derselben
   Kante beginnt wie die Beschreibung in den anderen Tabs. */
.wolters-product__details #tab-wolters_zusatzinformationen .wolters-product-tab--additional {
	max-width: 56rem;
	margin: 0;
}

.wolters-product__details #tab-wolters_zusatzinformationen .wolters-product-tab__section {
	padding: 0 0 2.5rem;
}
.wolters-product__details #tab-wolters_zusatzinformationen .wolters-product-tab__section + .wolters-product-tab__section {
	padding-top: 2.5rem;
	border-top: 1px solid var(--color-line);
}

/* Die Handschrift bleibt den bewusst gesetzten Display-Ueberschriften
   vorbehalten. Abschnittstitel im Tab folgen der normalen UI-Typografie. */
.wolters-product__details #tab-wolters_zusatzinformationen .wolters-product-tab__section > h2 {
	margin: 0 0 1.25rem;
	color: var(--color-text);
	font-family: var(--font-strong);
	font-size: var(--fs-lg);
	font-weight: 700;
	letter-spacing: 0.015em;
	line-height: 1.2;
	text-transform: none;
}

/* Inline-Styles aus bestehenden Produktimporten werden hier zentral auf das
   Designsystem zurueckgefuehrt. Neue Inhalte sollten nur Klassen enthalten. */
.wolters-product__details #tab-wolters_zusatzinformationen .wolters-product-care,
.wolters-product__details #tab-wolters_zusatzinformationen .wolters-product-faq {
	max-width: none !important;
	color: var(--color-text) !important;
	line-height: var(--lh-normal) !important;
}

.wolters-product__details #tab-wolters_zusatzinformationen .wolters-product-care {
	padding: clamp(1.15rem, 3vw, 1.6rem);
	border: 1px solid var(--color-line);
	border-left: 0.25rem solid var(--color-accent);
	border-radius: var(--radius-card);
	background-color: var(--color-bg-soft);
}

.wolters-product__details #tab-wolters_zusatzinformationen .wolters-product-care p,
.wolters-product__details #tab-wolters_zusatzinformationen .wolters-product-faq p {
	margin: 0 0 1rem !important;
	color: var(--color-text);
	font-size: var(--fs-md);
	line-height: var(--lh-relaxed, 1.7) !important;
}
.wolters-product__details #tab-wolters_zusatzinformationen .wolters-product-care p:last-child,
.wolters-product__details #tab-wolters_zusatzinformationen .wolters-product-faq p:last-child {
	margin-bottom: 0 !important;
}

/* Frage und nachfolgende Antwort bilden optisch jeweils eine gemeinsame
   Karte. Die Struktur bleibt dabei semantisches HTML ohne JavaScript. */
.wolters-product__details #tab-wolters_zusatzinformationen .wolters-product-faq__question {
	margin: 1rem 0 0 !important;
	padding: 1rem 1.15rem 0.4rem;
	border: 1px solid var(--color-line);
	border-bottom: 0;
	border-radius: var(--radius-card) var(--radius-card) 0 0;
	background-color: var(--color-bg-soft);
	color: var(--color-text) !important;
	font-family: var(--font-strong) !important;
	font-size: var(--fs-md) !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	line-height: 1.4 !important;
	text-transform: none !important;
}
.wolters-product__details #tab-wolters_zusatzinformationen .wolters-product-faq__question:first-child {
	margin-top: 0 !important;
}
.wolters-product__details #tab-wolters_zusatzinformationen .wolters-product-faq__question + p {
	margin: 0 0 1rem !important;
	padding: 0 1.15rem 1rem;
	border: 1px solid var(--color-line);
	border-top: 0;
	border-radius: 0 0 var(--radius-card) var(--radius-card);
	background-color: var(--color-bg-soft);
}

.wolters-product__sustainability {
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--color-line);
}
.wolters-product__sustainability h3 {
	margin: 0 0 0.9rem;
	color: var(--color-text);
	font-family: var(--font-subline);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-transform: uppercase;
}
.wolters-product__sustainability-copy {
	color: var(--color-text);
	line-height: var(--lh-normal);
}

/* -- Aehnliche Produkte ---------------------------------------------------- */
.wolters-product__related {
	padding: clamp(2.5rem, 5vw, 4rem) 0;
	border-top: 1px solid var(--color-line);
	background-color: var(--color-bg);
}
.wolters-product__related .related.products { margin: 0; }
/* Der einzige Oh-Livey-Auftritt der Seite. */
.wolters-product__related .related.products > h2 {
	margin: 0 0 2rem;
	color: var(--color-text);
	font-family: var(--font-display);
	font-size: clamp(2.25rem, 4vw, 3.25rem);
	font-weight: 400;
	letter-spacing: 0.035em;
	line-height: 1.05;
	text-align: center;
	text-transform: none;
}

/* -- Breakpoints ----------------------------------------------------------- */
@media (min-width: 62rem) {
	.wolters-product__layout {
		grid-template-columns: minmax(0, 1.08fr) minmax(22rem, 0.92fr);
	}
}

/* Bis etwa 1376px Fensterbreite reicht der Raum rechts neben dem Container
   (nur --gutter, 24px) nicht fuer den halben Kreis (52px) -- es entstuende
   seitliches Scrollen. Dort ragt der Kreis nur ein Fuenftel nach rechts. */
@media (min-width: 62rem) and (max-width: 85.99rem) {
	.wolters-product__rrp-badge { transform: translate(20%, -50%); }
}

/* Unterhalb 62rem steht die Zusammenfassung ueber die volle Breite, rechts
   bleibt nur der Seitenrand (--gutter). Der Kreis ragt dann nur nach oben
   heraus, nicht nach rechts -- sonst entstuende seitliches Scrollen. */
@media (max-width: 61.99rem) {
	.wolters-product__rrp-badge {
		right: 0.75rem;
		transform: translateY(-50%);
	}
	.wolters-product__pricegrid { padding-right: 0; }
	.wolters-product__pricebox { padding-top: calc(clamp(1.25rem, 3vw, 1.75rem) + 1.5rem); }
}

@media (max-width: 35rem) {
	.wolters-product__downloads { grid-template-columns: 1fr; }
	.wolters-product__pricebox form.cart {
		align-items: stretch;
		flex-direction: column;
	}
	.wolters-product__pricebox .quantity .qty,
	.wolters-product__pricebox .single_add_to_cart_button.button { width: 100%; }

	.wolters-product__details #tab-wolters_zusatzinformationen .wolters-product-tab__section + .wolters-product-tab__section {
		padding-top: 2rem;
	}
	.wolters-product__details #tab-wolters_zusatzinformationen .wolters-product-care {
		padding: 1rem;
	}
	.wolters-product__details #tab-wolters_zusatzinformationen .wolters-product-care p,
	.wolters-product__details #tab-wolters_zusatzinformationen .wolters-product-faq p {
		font-size: var(--fs-sm);
	}
	.wolters-product__details #tab-wolters_zusatzinformationen .wolters-product-faq__question {
		padding: 0.9rem 1rem 0.35rem;
	}
	.wolters-product__details #tab-wolters_zusatzinformationen .wolters-product-faq__question + p {
		padding: 0 1rem 0.9rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wolters-product a,
	.wolters-product button { transition: none !important; }
}

/* ==========================================================================
   Rezensionen (woocommerce/single-product-reviews.php)
   Die WC-Default-Styles sind aus, damit fehlt auch die Stern-Schrift von
   WooCommerce: Sterne erschienen als Text („Bewertet mit 5 von 5") bzw. als
   Linkliste „1 von 5 Sternen …". Sterne hier als SVG-Maske, unabhängig von
   der Schrift.
   ========================================================================== */
:root {
	--wo-star-empty: #dcd6d1;
	--wo-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.5L12 17.3l-5.9 3.2 1.3-6.5L2.5 9.4l6.6-.8z'/%3E%3C/svg%3E");
}

/* -- Sternanzeige (Liste, Übersicht, Produktinfo) ---------------------------- */
.star-rating {
	--star-size: 1rem;
	position: relative;
	display: inline-block;
	width: calc(var(--star-size) * 5);
	height: var(--star-size);
	overflow: hidden;
	vertical-align: middle;
	background-color: var(--wo-star-empty);
	-webkit-mask: var(--wo-star) left center / var(--star-size) var(--star-size) repeat-x;
	mask: var(--wo-star) left center / var(--star-size) var(--star-size) repeat-x;
}
.star-rating::before { content: none; }
.star-rating > span {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	overflow: hidden;
	background-color: var(--color-accent);
	font-size: 0;
	color: transparent;
}
.star-rating > span::before { content: none; }
.woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: var(--fs-sm);
}

/* -- Sterneingabe im Formular (von WC-JS aus dem Select erzeugt) ------------- */
.wo-reviews p.stars { margin: 0.25rem 0 0; }
.wo-reviews p.stars > span {
	display: inline-flex;
	gap: 0.3rem;
}
.wo-reviews p.stars a {
	display: block;
	width: 1.9rem;
	height: 1.9rem;
	font-size: 0;
	color: transparent;
	text-decoration: none;
	background-color: var(--wo-star-empty);
	-webkit-mask: var(--wo-star) center / contain no-repeat;
	mask: var(--wo-star) center / contain no-repeat;
	transition: background-color var(--transition);
}
.wo-reviews p.stars a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.wo-reviews p.stars.selected a { background-color: var(--color-accent); }
.wo-reviews p.stars.selected a.active ~ a { background-color: var(--wo-star-empty); }
/* Vorschau beim Überfahren: bis zum Stern unter der Maus gefüllt. */
.wo-reviews p.stars span[role]:hover a { background-color: var(--color-accent); }
.wo-reviews p.stars span[role]:hover a:hover ~ a { background-color: var(--wo-star-empty); }

/* -- Aufbau: Übersicht + Formular links, Liste rechts ------------------------ */
.wo-reviews {
	display: grid;
	grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
	grid-template-areas:
		"summary list"
		"form    list";
	gap: 2rem 3.5rem;
	align-items: start;
}
.wo-reviews > .clear { display: none; }
.wo-reviews__summary { grid-area: summary; }
.wo-reviews__list { grid-area: list; min-width: 0; }
.wo-reviews__form,
.wo-reviews > .woocommerce-verification-required { grid-area: form; }
.wo-reviews:not(:has(> .wo-reviews__summary)) { grid-template-areas: "form list"; }

/* -- Übersicht --------------------------------------------------------------- */
.wo-reviews__summary {
	padding: 1.5rem;
	border-top: 3px solid var(--color-accent);
	background-color: var(--color-primary-soft);
}
.wo-reviews__score {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.25rem;
}
.wo-reviews__average {
	font-family: var(--font-subline);
	font-size: 3rem;
	font-weight: 700;
	line-height: 1;
	color: var(--color-primary-dark);
}
.wo-reviews__score .star-rating { --star-size: 1.15rem; display: block; margin-bottom: 0.35rem; }
.wo-reviews__count { font-size: var(--fs-sm); color: var(--color-muted); }
.wo-reviews__bars {
	display: grid;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.wo-reviews__bars li {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr) 2rem;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	font-size: var(--fs-xs);
	color: var(--color-text-soft);
}
.wo-reviews__bar {
	height: 6px;
	overflow: hidden;
	background-color: var(--color-bg);
}
.wo-reviews__bar > span {
	display: block;
	height: 100%;
	background-color: var(--color-accent);
}
.wo-reviews__bar-count { text-align: right; color: var(--color-muted); }
.wo-reviews__empty-title {
	margin: 0 0 0.35rem;
	font-family: var(--font-subline);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-primary-dark);
}

/* -- Liste ------------------------------------------------------------------- */
.wo-reviews .woocommerce-Reviews-title,
.wo-reviews #reply-title {
	display: block;
	margin: 0 0 1.25rem;
	font-family: var(--font-subline);
	font-size: var(--fs-md);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-primary-dark);
}
.wo-reviews .woocommerce-Reviews-title span { text-transform: none; letter-spacing: 0; }
.wo-reviews .commentlist {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--color-line);
}
.wo-reviews .commentlist li.review {
	margin: 0;
	padding: 1.4rem 0;
	border-bottom: 1px solid var(--color-line);
}
.wo-reviews .comment_container {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}
.wo-reviews .comment_container img.avatar {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: var(--color-primary-soft);
}
.wo-reviews .comment-text { flex: 1; min-width: 0; }
.wo-reviews .comment-text .star-rating { float: right; margin: 0.15rem 0 0 1rem; }
.wo-reviews .comment-text p.meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.6rem;
	margin: 0 0 0.6rem;
	font-size: var(--fs-sm);
}
.wo-reviews .woocommerce-review__author {
	font-family: var(--font-strong);
	font-size: var(--fs-base);
	color: var(--color-primary-dark);
}
.wo-reviews .woocommerce-review__verified {
	padding: 0.1rem 0.45rem;
	background-color: var(--color-success-soft);
	font-size: var(--fs-xs);
	font-style: normal;
	color: var(--color-success);
}
.wo-reviews .woocommerce-review__dash { display: none; }
.wo-reviews .woocommerce-review__published-date { font-size: var(--fs-xs); color: var(--color-muted); }
.wo-reviews .woocommerce-review__awaiting-approval { font-size: var(--fs-sm); color: var(--color-muted); }
.wo-reviews .comment-text .description { clear: both; line-height: var(--lh-normal); }
.wo-reviews .comment-text .description p { margin: 0 0 0.6rem; }
.wo-reviews .comment-text .description p:last-child { margin-bottom: 0; }
.wo-reviews .woocommerce-noreviews {
	margin: 0;
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--color-line);
	color: var(--color-muted);
}
.wo-reviews .woocommerce-pagination ul {
	display: flex;
	gap: 0.35rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

/* -- Formular ---------------------------------------------------------------- */
.wo-reviews__form #respond { margin: 0; }
.wo-reviews__form .comment-form > p,
.wo-reviews__form .comment-form-rating { margin: 0 0 1rem; }
.wo-reviews__form label {
	display: block;
	margin-bottom: 0.35rem;
	font-family: var(--font-strong);
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--color-primary-dark);
}
.wo-reviews__form .required { color: var(--color-accent); text-decoration: none; border: 0; }
.wo-reviews__form textarea { min-height: 140px; }
.wo-reviews__form .comment-notes,
.wo-reviews__form .logged-in-as {
	font-size: var(--fs-xs);
	color: var(--color-muted);
}
.wo-reviews__form .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}
.wo-reviews__form .comment-form-cookies-consent label {
	margin: 0;
	font-family: inherit;
	font-weight: 400;
	font-size: var(--fs-xs);
	color: var(--color-text-soft);
}
.wo-reviews__form .form-submit { margin: 0; }
.wo-reviews__form .form-submit input[type="submit"] { width: 100%; }
.wo-reviews > .woocommerce-verification-required,
.wo-reviews__form .must-log-in {
	margin: 0;
	padding: 1rem 1.1rem;
	border-left: 3px solid var(--color-accent);
	background-color: var(--color-primary-soft);
	font-size: var(--fs-sm);
	color: var(--color-primary-dark);
}

@media (max-width: 900px) {
	.wo-reviews {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "summary" "list" "form";
	}
	.wo-reviews:not(:has(> .wo-reviews__summary)) { grid-template-areas: "list" "form"; }
}