/*
 * STABAmix – Gestaltung der Plugins (Teil Shop, plugins-shop.css)
 * Abschnitte 2, 3 und 5 aus plugins.css. Lädt nur auf WooCommerce-Seiten (Shop, Produkt,
 * Warenkorb, Kasse, Mein Konto), nach plugins.css (Werte --stxp-… aus Abschnitt 0).
 * Grundsätze siehe Kopf von plugins.css.
 */

/* ==========================================================================
   2. WooCommerce – gemeinsame Werte
   ========================================================================== */

body {
	--wc-form-border-color: var(--stxp-feldrand);
	--wc-form-border-radius: 8px;
	--wc-form-border-width: 1px;
	--wc-form-color-background: #FFFFFF;
	--wc-form-color-text: var(--stxp-ink);
	--wc-primary: var(--stxp-blau);
	--wc-primary-text: #FFFFFF;
	--wc-secondary: var(--stxp-surface);
	--wc-secondary-text: var(--stxp-ink);
	--wc-highlight: var(--stxp-ink);
	--wc-highligh-text: #FFFFFF;
	--wc-subtext: var(--stxp-muted);
	--wc-red: var(--stxp-fehler);
	--wc-green: var(--stxp-gruen);
	--wc-blue: var(--stxp-blau);
	--wc-card-border-radius: 12px;
	--wc-separator-color: var(--stxp-line);
}

body .woocommerce,
body .woocommerce-page .woocommerce {
	font-size: 16px;
	line-height: 1.6;
	color: var(--stxp-text);
}

/* Lange Wörter und Mailadressen umbrechen, statt die Seite zu verbreitern */
:is(body.woocommerce, body .woocommerce) address,
:is(body.woocommerce, body .woocommerce) .product-name,
:is(body.woocommerce, body .woocommerce) .woocommerce-customer-details--email,
:is(body.woocommerce, body .woocommerce) .woocommerce-MyAccount-content {
	overflow-wrap: break-word;
}

:is(body.woocommerce, body .woocommerce) address {
	font-style: normal;
}


/* ---------- 2.1 Knöpfe (blau, Radius 8) ---------- */

:is(body.woocommerce, body .woocommerce) a.button,
:is(body.woocommerce, body .woocommerce) button.button,
:is(body.woocommerce, body .woocommerce) input.button,
:is(body.woocommerce, body .woocommerce) #respond input#submit,
body .woocommerce-page .woocommerce a.button,
body .woocommerce-page .woocommerce button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	height: auto;
	min-height: 44px;
	max-width: 100%;
	padding: 8px 20px;
	border: 0;
	border-radius: 8px;
	background: var(--stxp-blau);
	color: #FFFFFF;
	font-family: var(--stxp-sans);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	text-shadow: none;
	box-shadow: none;
	white-space: normal;
	cursor: pointer;
	opacity: 1;
}

:is(body.woocommerce, body .woocommerce) a.button:hover,
:is(body.woocommerce, body .woocommerce) a.button:focus-visible,
:is(body.woocommerce, body .woocommerce) button.button:hover,
:is(body.woocommerce, body .woocommerce) button.button:focus-visible,
:is(body.woocommerce, body .woocommerce) input.button:hover,
:is(body.woocommerce, body .woocommerce) input.button:focus-visible,
:is(body.woocommerce, body .woocommerce) #respond input#submit:hover {
	background: var(--stxp-blau-dunkel);
	color: #FFFFFF;
	opacity: 1;
}

:is(body.woocommerce, body .woocommerce) a.button:focus-visible,
:is(body.woocommerce, body .woocommerce) button.button:focus-visible,
:is(body.woocommerce, body .woocommerce) input.button:focus-visible {
	outline: 2px solid var(--stxp-blau);
	outline-offset: 2px;
}

/* Hauptknöpfe (Zur Kasse, Bestellen, In den Warenkorb): Höhe 52 */
:is(body.woocommerce, body .woocommerce) a.button.alt,
:is(body.woocommerce, body .woocommerce) button.button.alt,
:is(body.woocommerce, body .woocommerce) input.button.alt,
:is(body.woocommerce, body .woocommerce) .wc-proceed-to-checkout a.checkout-button,
:is(body.woocommerce, body .woocommerce) #place_order {
	min-height: 52px;
	padding: 10px 24px;
	font-size: 16px;
}

:is(body.woocommerce, body .woocommerce) .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	width: 100%;
	margin-bottom: 0;
}

/* Nebenknöpfe (Warenkorb aktualisieren, Gutschein): weiss mit Rand */
:is(body.woocommerce, body .woocommerce) button.button[name="update_cart"],
:is(body.woocommerce, body .woocommerce) button.button[name="apply_coupon"] {
	background: var(--stxp-weiss);
	color: var(--stxp-ink);
	box-shadow: inset 0 0 0 1.5px var(--stxp-ink);
}

:is(body.woocommerce, body .woocommerce) button.button[name="update_cart"]:hover,
:is(body.woocommerce, body .woocommerce) button.button[name="apply_coupon"]:hover {
	background: var(--stxp-surface);
	color: var(--stxp-ink);
}

:is(body.woocommerce, body .woocommerce) button.button:disabled,
:is(body.woocommerce, body .woocommerce) button.button.disabled,
:is(body.woocommerce, body .woocommerce) a.button.disabled,
:is(body.woocommerce, body .woocommerce) button.button:disabled[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Entfernen-Kreuz im Warenkorb */
:is(body.woocommerce, body .woocommerce) a.remove {
	width: 28px;
	height: 28px;
	line-height: 26px;
	font-size: 20px;
	font-weight: 400;
}


/* ---------- 2.2 Hinweise (woocommerce-message / -info / -error) ---------- */

body .woocommerce-message,
body .woocommerce-info,
body .woocommerce-error,
:is(body.woocommerce, body .woocommerce) .woocommerce-message,
:is(body.woocommerce, body .woocommerce) .woocommerce-info,
:is(body.woocommerce, body .woocommerce) .woocommerce-error {
	position: relative;
	margin: 0 0 24px;
	padding: 14px 20px 14px 52px;
	background: var(--stxp-surface);
	color: var(--stxp-text);
	border: 1px solid var(--stxp-line);
	border-left: 4px solid var(--stxp-blau);
	border-radius: 12px;
	font-size: 16px;
	line-height: 1.5;
	list-style: none;
	overflow-wrap: break-word;
}

body .woocommerce-message,
:is(body.woocommerce, body .woocommerce) .woocommerce-message {
	border-left-color: var(--stxp-gruen);
}

body .woocommerce-error,
:is(body.woocommerce, body .woocommerce) .woocommerce-error {
	border-left-color: var(--stxp-fehler);
	background: var(--stxp-fehler-flaeche);
}

body .woocommerce-message::before,
body .woocommerce-info::before,
body .woocommerce-error::before {
	top: 16px;
	left: 20px;
	font-size: 20px;
	line-height: 1;
}

body .woocommerce-message::before {
	color: var(--stxp-gruen);
}

body .woocommerce-info::before {
	color: var(--stxp-blau);
}

body .woocommerce-error::before {
	color: var(--stxp-fehler);
}

body .woocommerce-error li,
body .woocommerce-message li,
body .woocommerce-info li {
	margin: 0;
	padding: 0;
}

body .woocommerce-error li + li,
body .woocommerce-message li + li,
body .woocommerce-info li + li {
	margin-top: 4px;
}

body .woocommerce-message a:not(.button),
body .woocommerce-info a:not(.button),
body .woocommerce-error a:not(.button) {
	color: var(--stxp-blau-dunkel);
}

body .woocommerce-message .button,
body .woocommerce-info .button,
body .woocommerce-error .button,
:is(body.woocommerce, body .woocommerce) .woocommerce-message .button,
:is(body.woocommerce, body .woocommerce) .woocommerce-info .button,
:is(body.woocommerce, body .woocommerce) .woocommerce-error .button {
	float: right;
	min-height: 36px;
	margin: -4px 0 0 16px;
	padding: 6px 14px;
	font-size: 15px;
}

/* Handy: Knopf im Hinweis über dem Text statt daneben */
@media (max-width: 600px) {
	body .woocommerce-message .button,
	body .woocommerce-info .button,
	body .woocommerce-error .button,
	:is(body.woocommerce, body .woocommerce) .woocommerce-message .button,
	:is(body.woocommerce, body .woocommerce) .woocommerce-info .button,
	:is(body.woocommerce, body .woocommerce) .woocommerce-error .button {
		float: none;
		display: flex;
		width: fit-content;
		margin: 0 0 10px;
	}
}

/* Hinweise der Block-Templates (Produkt, Katalog) */
body .wc-block-components-notice-banner {
	border: 1px solid var(--stxp-line);
	border-left: 4px solid var(--stxp-blau);
	border-radius: 12px;
	background: var(--stxp-surface);
	color: var(--stxp-text);
	font-size: 16px;
	line-height: 1.5;
}

body .wc-block-components-notice-banner > svg {
	background-color: var(--stxp-blau);
}

body .wc-block-components-notice-banner.is-success {
	border-left-color: var(--stxp-gruen);
	background: var(--stxp-surface);
}

body .wc-block-components-notice-banner.is-success > svg {
	background-color: var(--stxp-gruen);
}

body .wc-block-components-notice-banner.is-error {
	border-left-color: var(--stxp-fehler);
	background: var(--stxp-fehler-flaeche);
}

body .wc-block-components-notice-banner.is-error > svg {
	background-color: var(--stxp-fehler);
}

body .wc-block-components-notice-banner.is-info {
	border-left-color: var(--stxp-blau);
	background: var(--stxp-surface);
}

body .wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward {
	color: var(--stxp-blau-dunkel) !important;
	opacity: 1;
}


/* ---------- 2.3 Tabellen ---------- */

:is(body.woocommerce, body .woocommerce) table.shop_table:not(.stabamix-rechner),
body.woocommerce-page table.shop_table:not(.stabamix-rechner) {
	width: 100%;
	margin: 0 0 24px;
	border: 1px solid var(--stxp-line);
	border-radius: 12px;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 16px;
	background: var(--stxp-weiss);
}

:is(body.woocommerce, body .woocommerce) table.shop_table th,
:is(body.woocommerce, body .woocommerce) table.shop_table td {
	padding: 12px 16px;
	line-height: 1.5;
	vertical-align: middle;
}

:is(body.woocommerce, body .woocommerce) table.shop_table td,
:is(body.woocommerce, body .woocommerce) table.shop_table tbody th,
:is(body.woocommerce, body .woocommerce) table.shop_table tfoot th,
:is(body.woocommerce, body .woocommerce) table.shop_table tfoot td {
	border-top: 1px solid var(--stxp-line);
}

:is(body.woocommerce, body .woocommerce) table.shop_table thead th {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--stxp-muted);
	white-space: nowrap;
}

:is(body.woocommerce, body .woocommerce) table.shop_table tbody th,
:is(body.woocommerce, body .woocommerce) table.shop_table tfoot th {
	font-weight: 600;
	color: var(--stxp-ink);
}

:is(body.woocommerce, body .woocommerce) table.shop_table .product-name a {
	color: var(--stxp-ink);
	font-weight: 600;
	text-decoration: none;
}

:is(body.woocommerce, body .woocommerce) table.shop_table .product-name a:hover {
	color: var(--stxp-blau-dunkel);
	text-decoration: underline;
}

:is(body.woocommerce, body .woocommerce) table.shop_table .product-thumbnail img {
	width: 64px;
	height: auto;
	border: 1px solid var(--stxp-line);
	border-radius: 8px;
}

:is(body.woocommerce, body .woocommerce) table.shop_table .order-total .woocommerce-Price-amount,
:is(body.woocommerce, body .woocommerce) table.shop_table tfoot .order-total td {
	color: var(--stxp-ink);
	font-weight: 700;
}

/* Handy: WooCommerce stellt «shop_table_responsive» untereinander (bis 768 px) */
@media (max-width: 768px) {
	:is(body.woocommerce, body .woocommerce) table.shop_table_responsive tr td::before,
	body.woocommerce-page table.shop_table_responsive tr td::before {
		font-weight: 600;
		color: var(--stxp-ink);
	}

	:is(body.woocommerce, body .woocommerce) table.shop_table_responsive tbody tr:nth-child(2n) td {
		background-color: transparent;
	}

	:is(body.woocommerce, body .woocommerce) table.shop_table th,
	:is(body.woocommerce, body .woocommerce) table.shop_table td {
		padding: 10px 14px;
	}

	/* Übrige (zweispaltige) Tabellen: Text darf umbrechen */
	:is(body.woocommerce, body .woocommerce) table.shop_table:not(.shop_table_responsive) td {
		overflow-wrap: anywhere;
	}
}


/* ---------- 2.4 Formulare (Kasse, Konto, Adressen) ---------- */

:is(body.woocommerce, body .woocommerce) form .form-row {
	margin: 0 0 16px;
	padding: 0;
}

:is(body.woocommerce, body .woocommerce) form .form-row label,
body .woocommerce-page form .form-row label {
	display: block;
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--stxp-ink);
}

:is(body.woocommerce, body .woocommerce) form .form-row label.checkbox,
:is(body.woocommerce, body .woocommerce) form .form-row label.woocommerce-form__label-for-checkbox,
:is(body.woocommerce, body .woocommerce) form label.woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 400;
	color: var(--stxp-text);
}

:is(body.woocommerce, body .woocommerce) form .form-row .optional {
	color: var(--stxp-muted);
	font-weight: 400;
}

/* Feldhinweise («Ihre Referenz», «E-Mail-Adresse für Rechnungen») immer
   sichtbar unter dem Feld statt als blaue Blase: WooCommerce klappt sie per
   Skript auf und zu (woocommerce.js) - der Hinweis ist ein <span>, nach dem
   Aufklappen standen die Zeilen übereinander und flackerten (Raphael
   11.10.2026). !important gegen die Werte, die das Skript direkt ans Element
   schreibt (display, height, margin, padding). «form .form-row»: WooCommerce
   setzt die Blase mit diesem Selektor (woocommerce.css). */
:is(body.woocommerce, body .woocommerce) form .form-row .woocommerce-input-wrapper .description {
	display: block !important;
	height: auto !important;
	margin: 6px 0 0 !important;
	padding: 0 !important;
	overflow: visible !important;
	opacity: 1 !important;
	background: none;
	border-radius: 0;
	color: var(--stxp-muted);
	font-size: 14px;
	line-height: 1.45;
}

:is(body.woocommerce, body .woocommerce) form .form-row .woocommerce-input-wrapper .description::before {
	display: none;
}

:is(body.woocommerce, body .woocommerce) form .form-row input.input-text,
:is(body.woocommerce, body .woocommerce) form .form-row textarea.input-text,
:is(body.woocommerce, body .woocommerce) form .form-row select,
body .woocommerce-page form .form-row input.input-text,
body .woocommerce-page form .form-row textarea.input-text,
body .woocommerce-page form .form-row select,
:is(body.woocommerce, body .woocommerce) form input#coupon_code,
body .woocommerce-page .woocommerce-cart-form input#coupon_code {
	box-sizing: border-box;
	width: 100%;
	height: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--stxp-feldrand);
	border-radius: 8px;
	background-color: #FFFFFF;
	color: var(--stxp-ink);
	font-family: var(--stxp-sans);
	font-size: 16px;
	line-height: normal;
	box-shadow: none;
}

:is(body.woocommerce, body .woocommerce) form .form-row select,
body .woocommerce-page form .form-row select {
	padding-right: 36px;
	background-position: calc(100% - 12px) 50%;
}

:is(body.woocommerce, body .woocommerce) form .form-row textarea.input-text,
body .woocommerce-page form .form-row textarea.input-text {
	height: auto;
	min-height: 110px;
	padding: 10px 12px;
	line-height: 1.5;
}

:is(body.woocommerce, body .woocommerce) form .form-row input.input-text:focus,
:is(body.woocommerce, body .woocommerce) form .form-row textarea.input-text:focus,
:is(body.woocommerce, body .woocommerce) form .form-row select:focus,
:is(body.woocommerce, body .woocommerce) form input#coupon_code:focus {
	border-color: var(--stxp-blau);
	box-shadow: var(--stxp-fokus-ring);
	outline: none;
}

:is(body.woocommerce, body .woocommerce) form .form-row.woocommerce-invalid input.input-text,
:is(body.woocommerce, body .woocommerce) form .form-row.woocommerce-invalid select {
	border-color: var(--stxp-fehler);
}

:is(body.woocommerce, body .woocommerce) form .form-row.woocommerce-invalid label {
	color: var(--stxp-fehler);
}

:is(body.woocommerce, body .woocommerce) form .show-password-input {
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
}

:is(body.woocommerce, body .woocommerce) input[type="checkbox"],
:is(body.woocommerce, body .woocommerce) input[type="radio"] {
	accent-color: var(--stxp-blau);
	width: 18px;
	height: 18px;
	flex: none;
}

/* Länder-/Kantonsauswahl (selectWoo) */
body .select2-container--default .select2-selection--single {
	height: 44px;
	border: 1px solid var(--stxp-feldrand);
	border-radius: 8px;
	background-color: #FFFFFF;
}

/* Zweiter Wähler: woocommerce-blocktheme.css setzt in Formularen «padding: .9rem 1.1rem» mit
   höherer Spezifität – der Text rutschte unter die Mitte (Kundenkonto, Kasse). */
body .select2-container--default .select2-selection--single .select2-selection__rendered,
body.woocommerce-page form .form-row .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0 36px 0 12px;
	line-height: 42px;
	color: var(--stxp-ink);
	font-size: 16px;
}

body .select2-container--default .select2-selection--single .select2-selection__arrow,
body.woocommerce-page form .form-row .select2-container .select2-selection--single .select2-selection__arrow {
	height: 42px;
	right: 8px;
}

body .select2-container--default.select2-container--focus .select2-selection--single,
body .select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--stxp-blau);
	box-shadow: var(--stxp-fokus-ring);
}

body .select2-dropdown {
	border-color: var(--stxp-feldrand);
	border-radius: 8px;
	overflow: hidden;
	font-size: 16px;
}

body .select2-container--default .select2-results__option--highlighted[aria-selected],
body .select2-container--default .select2-results__option--highlighted[data-selected] {
	background-color: var(--stxp-blau);
	color: #FFFFFF;
}

body .select2-container--default .select2-search--dropdown .select2-search__field {
	height: 40px;
	padding: 0 10px;
	border: 1px solid var(--stxp-feldrand);
	border-radius: 8px;
	font-size: 16px;
}

/* Anmelden (Mein Konto ohne Anmeldung), Gutschein-Formular der Kasse */
:is(body.woocommerce, body .woocommerce) form.login,
:is(body.woocommerce, body .woocommerce) form.register,
:is(body.woocommerce, body .woocommerce) form.lost_reset_password,
:is(body.woocommerce, body .woocommerce) form.checkout_coupon {
	margin: 0 0 24px;
	padding: clamp(20px, 4vw, 28px);
	border: 1px solid var(--stxp-line);
	border-radius: 12px;
	background: var(--stxp-weiss);
}

:is(body.woocommerce, body .woocommerce) form.login,
:is(body.woocommerce, body .woocommerce) form.lost_reset_password {
	max-width: 480px;
}

:is(body.woocommerce, body .woocommerce) form.login .form-row:last-of-type,
:is(body.woocommerce, body .woocommerce) form.lost_reset_password .form-row:last-of-type {
	margin-bottom: 0;
}

/* «Angemeldet bleiben» auf eigener Zeile über dem Knopf «Anmelden»
   (WooCommerce lässt den Knopf sonst links daneben fliessen) */
:is(body.woocommerce, body .woocommerce) form .woocommerce-form-login__rememberme,
:is(body.woocommerce, body .woocommerce) form.login .form-row label.woocommerce-form-login__rememberme {
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	font-size: 15px;
	font-weight: 400;
}

:is(body.woocommerce, body .woocommerce) form.login .woocommerce-form-login__submit {
	float: none;
	margin: 0;
}

:is(body.woocommerce, body .woocommerce) form.login .form-row label.woocommerce-form-login__rememberme input {
	margin: 0;
}

:is(body.woocommerce, body .woocommerce) .lost_password {
	margin: 12px 0 0;
	font-size: 15px;
}

/* Überschriften im Inhalt von Warenkorb, Kasse und Konto */
:is(body.woocommerce, body .woocommerce) h2,
:is(body.woocommerce, body .woocommerce) .cart_totals h2,
body .woocommerce-page .cart-collaterals h2,
:is(body.woocommerce, body .woocommerce) .woocommerce-column__title,
:is(body.woocommerce, body .woocommerce) .woocommerce-order-details__title,
body .woocommerce-page .woocommerce-customer-details h2 {
	margin: 0 0 16px;
	font-family: var(--stxp-titel);
	font-size: clamp(18px, 4.5vw, 28px);
	font-weight: 800;
	line-height: 1.25;
	color: var(--stxp-ink);
}

:is(body.woocommerce, body .woocommerce) h3 {
	margin: 0 0 12px;
	font-family: var(--stxp-sans);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--stxp-ink);
}


/* ---------- 2.5 Warenkorb ---------- */

:is(body.woocommerce, body .woocommerce) .woocommerce-cart-form {
	margin: 0 0 32px;
}

:is(body.woocommerce, body .woocommerce) table.cart td.actions {
	padding: 16px;
}

:is(body.woocommerce, body .woocommerce) table.cart td.actions .coupon {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

:is(body.woocommerce, body .woocommerce) table.cart td.actions .coupon input#coupon_code {
	flex: 1 1 180px;
	width: auto;
	max-width: 260px;
	margin: 0;
}

:is(body.woocommerce, body .woocommerce) .cart-collaterals .cart_totals {
	box-sizing: border-box;
	padding: clamp(20px, 4vw, 28px);
	border: 1px solid var(--stxp-line);
	border-radius: 12px;
	background: var(--stxp-surface);
}

:is(body.woocommerce, body .woocommerce) .cart-collaterals .cart_totals table.shop_table {
	margin: 0 0 16px;
	border: 0;
	border-radius: 0;
	background: transparent;
}

:is(body.woocommerce, body .woocommerce) .cart-collaterals .cart_totals table.shop_table th,
:is(body.woocommerce, body .woocommerce) .cart-collaterals .cart_totals table.shop_table td {
	padding-left: 0;
	padding-right: 0;
}

:is(body.woocommerce, body .woocommerce) .cart-collaterals .cart_totals table.shop_table tr:first-child th,
:is(body.woocommerce, body .woocommerce) .cart-collaterals .cart_totals table.shop_table tr:first-child td {
	border-top: 0;
}

:is(body.woocommerce, body .woocommerce) .cart-empty,
:is(body.woocommerce, body .woocommerce) .return-to-shop {
	margin-bottom: 16px;
}

@media (max-width: 768px) {
	:is(body.woocommerce, body .woocommerce) table.cart td.actions .coupon input#coupon_code {
		max-width: none;
	}

	:is(body.woocommerce, body .woocommerce) table.cart td.actions .coupon .button,
	:is(body.woocommerce, body .woocommerce) table.cart td.actions > .button {
		width: 100%;
	}
}


/* ---------- 2.6 Kasse ---------- */

:is(body.woocommerce, body .woocommerce) form.checkout .col2-set {
	margin-bottom: 24px;
}

body .woocommerce-checkout #payment,
:is(body.woocommerce, body .woocommerce) #payment {
	border: 1px solid var(--stxp-line);
	border-radius: 12px;
	background: var(--stxp-surface);
}

body .woocommerce-checkout #payment ul.payment_methods {
	padding: 16px 20px;
	border-bottom: 1px solid var(--stxp-line);
}

body .woocommerce-checkout #payment ul.payment_methods li {
	line-height: 1.5;
}

body .woocommerce-checkout #payment ul.payment_methods li label {
	font-weight: 600;
	color: var(--stxp-ink);
}

body .woocommerce-checkout #payment div.payment_box {
	margin: 12px 0 4px;
	padding: 12px 16px;
	border: 1px solid var(--stxp-line);
	border-radius: 8px;
	background: var(--stxp-weiss);
	color: var(--stxp-text);
	font-size: 15px;
}

body .woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--stxp-weiss);
}

body .woocommerce-checkout #payment div.form-row {
	padding: 16px 20px;
	margin: 0;
}

body .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
	font-size: 15px;
	line-height: 1.5;
}

body .woocommerce-checkout .woocommerce-privacy-policy-text p {
	margin: 0 0 12px;
	font-size: 14px;
	color: var(--stxp-muted);
}

@media (max-width: 768px) {
	body .woocommerce-checkout #payment #place_order {
		width: 100%;
	}
}

/* Bestellung erhalten (Danke-Seite) */
:is(body.woocommerce, body .woocommerce) ul.woocommerce-order-overview {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
	margin: 0 0 24px;
	padding: 16px 20px;
	border: 1px solid var(--stxp-line);
	border-radius: 12px;
	background: var(--stxp-surface);
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--stxp-muted);
}

:is(body.woocommerce, body .woocommerce) ul.woocommerce-order-overview li {
	margin: 0;
	padding: 0;
	border: 0;
}

:is(body.woocommerce, body .woocommerce) ul.woocommerce-order-overview li strong {
	display: block;
	font-size: 16px;
	letter-spacing: normal;
	text-transform: none;
	color: var(--stxp-ink);
}

:is(body.woocommerce, body .woocommerce) .woocommerce-customer-details address,
body.woocommerce-page .woocommerce-customer-details address {
	box-sizing: border-box;
	width: 100%;
	padding: 16px 20px;
	border: 1px solid var(--stxp-line);
	border-radius: 12px;
}


/* ---------- 2.7 Mein Konto: ruhige Seitenleiste, auf dem Handy oben ---------- */

/* Konto, Warenkorb und Kasse so breit wie der Inhalt der übrigen Seiten (1200, mittig).
   woocommerce-blocktheme.css begrenzt «main .woocommerce» dort auf 1000 Pixel, ohne es zu
   zentrieren – links war weniger Rand als rechts (Raphael 08.10.2026). */
body:is(.woocommerce-account, .woocommerce-cart, .woocommerce-checkout) main .woocommerce {
	max-width: none;
}

/* «Adresse»: der Einleitungssatz ist weg (functions.php), den leeren Absatz nicht zeigen */
body.woocommerce-account .woocommerce-MyAccount-content > p:has(+ :is(.woocommerce-Address, .woocommerce-Addresses)) {
	display: none;
}

body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

body.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

body.woocommerce-account .woocommerce-MyAccount-content {
	min-width: 0;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0;
	padding: 6px;
	list-style: none;
	border: 1px solid var(--stxp-line);
	border-radius: 12px;
	background: var(--stxp-surface);
}

body.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 8px 12px;
	border-radius: 8px;
	color: var(--stxp-text);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--stxp-weiss);
	color: var(--stxp-blau-dunkel);
	text-decoration: none;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--stxp-weiss);
	color: var(--stxp-blau-dunkel);
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(18, 22, 28, 0.08);
}

@media (min-width: 1100px) {
	body.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
		flex-direction: row;
		align-items: flex-start;
		gap: 48px;
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation {
		flex: 0 0 240px;
		position: sticky;
		top: 96px;
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation ul {
		flex-direction: column;
		gap: 2px;
		padding: 8px;
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation li a {
		padding: 10px 14px;
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
		box-shadow: inset 3px 0 0 var(--stxp-blau), 0 1px 2px rgba(18, 22, 28, 0.08);
	}

	body.woocommerce-account .woocommerce-MyAccount-content {
		flex: 1 1 0;
	}
}

body.woocommerce-account .woocommerce-MyAccount-content > p:first-child,
body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-notices-wrapper + p {
	margin-top: 0;
}

body.woocommerce-account .woocommerce-MyAccount-content mark {
	background: transparent;
	color: var(--stxp-ink);
	font-weight: 600;
}

body.woocommerce-account .woocommerce-Addresses .woocommerce-Address {
	box-sizing: border-box;
	padding: clamp(20px, 4vw, 28px);
	border: 1px solid var(--stxp-line);
	border-radius: 12px;
}

body.woocommerce-account .woocommerce-Address-title h2,
body.woocommerce-account .woocommerce-Address-title h3 {
	font-family: var(--stxp-sans);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4;
}

@media (max-width: 768px) {
	body.woocommerce-account .woocommerce-Addresses .woocommerce-Address + .woocommerce-Address {
		margin-top: 16px;
	}
}

/* Knöpfe in der Bestellliste */
body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button {
	min-height: 36px;
	padding: 6px 14px;
	font-size: 15px;
}

/* WooCommerce (woocommerce-blocktheme.css) macht sie zum Block - mit der
   Mindesthöhe sass der Text oben (Raphael 10.10.2026). Als Flex-Block bleibt die
   Breite, der Text steht mittig. */
body.woocommerce-account .woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-actions .button {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Ohne den Abstand unten (1em aus woocommerce-blocktheme.css): der Knopf sass
   höher als die übrigen Zellen der Zeile - Bestellungen, Rechnungen, Verträge
   (Raphael 11.10.2026). Mehrere Knöpfe: Abstand dazwischen weiter unten. */
body.woocommerce-account .woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-actions a.button {
	margin-bottom: 0;
}

/* Handy: WooCommerce setzt die Bestellnummer als <th> und blendet «tbody th» aus
   (woocommerce-smallscreen.css) - die Nummer fehlte. Zeigen wie die übrigen Zeilen. */
@media (max-width: 768px) {
	body.woocommerce-account table.shop_table_responsive tbody th.woocommerce-orders-table__cell-order-number {
		display: block;
		text-align: right;
	}

	body.woocommerce-account table.shop_table_responsive tbody th.woocommerce-orders-table__cell-order-number::before {
		content: attr(data-title) ": ";
		float: left;
		font-weight: 600;
		color: var(--stxp-ink);
	}
}

body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button + .button {
	margin-top: 6px;
}


/* ---------- 2.8 Produktseite und Katalog (Block-Templates) ---------- */

body .woocommerce-breadcrumb,
body .wc-block-breadcrumbs {
	font-size: 14px;
	color: var(--stxp-muted);
}

body .woocommerce-breadcrumb a {
	color: var(--stxp-blau-dunkel);
	text-decoration: none;
}

body .woocommerce-breadcrumb a:hover {
	text-decoration: underline;
}

/* Preise */
:is(body.woocommerce, body .woocommerce) .price,
body .wc-block-components-product-price {
	color: var(--stxp-ink);
	font-weight: 600;
}

:is(body.woocommerce, body .woocommerce) .price del,
body .wc-block-components-product-price del {
	color: var(--stxp-muted);
	font-weight: 400;
	opacity: 1;
}

:is(body.woocommerce, body .woocommerce) .price ins,
body .wc-block-components-product-price ins {
	text-decoration: none;
	font-weight: inherit;
}

/* Preis auf der Produktseite: Manrope 800 wie Untertitel */
body.single-product .wp-block-column > .wp-block-woocommerce-product-price .wc-block-components-product-price,
body.single-product div.product .summary p.price,
body.single-product div.product .summary span.price {
	font-family: var(--stxp-titel);
	font-size: clamp(18px, 4.5vw, 28px);
	font-weight: 800;
	line-height: 1.25;
	color: var(--stxp-ink);
}

/* Mengenfeld */
:is(body.woocommerce, body .woocommerce) .quantity .qty,
body .woocommerce-page .quantity .qty,
body .wp-block-woocommerce-add-to-cart-form .quantity .qty {
	box-sizing: border-box;
	width: 4.5em;
	height: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0 6px;
	border: 1px solid var(--stxp-feldrand);
	border-radius: 8px;
	background: #FFFFFF;
	color: var(--stxp-ink);
	font-family: var(--stxp-sans);
	font-size: 16px;
	text-align: center;
}

:is(body.woocommerce, body .woocommerce) .quantity .qty:focus,
body .wp-block-woocommerce-add-to-cart-form .quantity .qty:focus {
	border-color: var(--stxp-blau);
	box-shadow: var(--stxp-fokus-ring);
	outline: none;
}

/* «In den Warenkorb» auf der Produktseite: Menge und Knopf gleich hoch */
body .wp-block-woocommerce-add-to-cart-form form.cart,
:is(body.woocommerce, body .woocommerce) div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0 0 24px;
}

body .wp-block-woocommerce-add-to-cart-form form.cart .quantity .qty,
:is(body.woocommerce, body .woocommerce) div.product form.cart .quantity .qty {
	height: 52px;
	min-height: 52px;
	margin: 0;
}

body .wp-block-woocommerce-add-to-cart-form form.cart div.quantity,
:is(body.woocommerce, body .woocommerce) div.product form.cart div.quantity {
	float: none;
	margin: 0;
}

body .wp-block-woocommerce-add-to-cart-form form.cart .single_add_to_cart_button,
:is(body.woocommerce, body .woocommerce) div.product form.cart .single_add_to_cart_button {
	min-height: 52px;
	margin: 0;
}

body .wp-block-woocommerce-add-to-cart-form form.cart table.variations,
:is(body.woocommerce, body .woocommerce) div.product form.cart table.variations {
	flex: 1 1 100%;
}

/* Produktbilder */
body .woocommerce-product-gallery .woocommerce-product-gallery__image img,
body .wc-block-components-product-image img,
body .wp-block-woocommerce-product-image img {
	border: 1px solid var(--stxp-line);
	border-radius: 12px;
	box-sizing: border-box;
	max-width: 100%;
	height: auto;
}

/* Katalog (Product Collection) */
body .wc-block-product-template .wc-block-product .wp-block-post-title,
body .wc-block-product-template .wc-block-product .wp-block-post-title a {
	font-family: var(--stxp-sans);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--stxp-ink);
	text-decoration: none;
}

body .wc-block-product-template .wc-block-product .wp-block-post-title a:hover {
	color: var(--stxp-blau-dunkel);
}

body .wc-block-product-template .wc-block-product .wc-block-components-product-price {
	font-size: 16px;
}

/* Beschreibung / Zusätzliche Informationen (Reiter) */
body .wp-block-woocommerce-product-details {
	font-size: 16px;
	line-height: 1.6;
	color: var(--stxp-text);
}

body .wp-block-woocommerce-product-details .woocommerce-Tabs-panel {
	padding-top: 16px;
}

:is(body.woocommerce, body .woocommerce) table.woocommerce-product-attributes {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--stxp-line);
}

:is(body.woocommerce, body .woocommerce) table.woocommerce-product-attributes th,
:is(body.woocommerce, body .woocommerce) table.woocommerce-product-attributes td {
	padding: 10px 14px;
	border-top: 1px solid var(--stxp-line);
	font-style: normal;
	text-align: left;
}

:is(body.woocommerce, body .woocommerce) span.onsale,
body .wc-block-components-product-sale-badge {
	background: var(--stxp-blau);
	color: #FFFFFF;
	border: 0;
	border-radius: 8px;
}

/* Produktseite (klassische Ausgabe über «legacy-template»): Auswahl der Variante
   (z. B. «Anzahl Benutzer») als Beschriftung über einem Feld wie im Formular */
:is(body.woocommerce, body .woocommerce) div.product form.cart table.variations {
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

:is(body.woocommerce, body .woocommerce) div.product form.cart table.variations tbody,
:is(body.woocommerce, body .woocommerce) div.product form.cart table.variations tr,
:is(body.woocommerce, body .woocommerce) div.product form.cart table.variations th,
:is(body.woocommerce, body .woocommerce) div.product form.cart table.variations td {
	display: block;
	padding: 0;
	border: 0;
	background: transparent;
	text-align: left;
	line-height: 1.6;
}

:is(body.woocommerce, body .woocommerce) div.product form.cart table.variations tr + tr {
	margin-top: 16px;
}

:is(body.woocommerce, body .woocommerce) div.product form.cart table.variations th.label {
	padding: 0 0 6px;
}

:is(body.woocommerce, body .woocommerce) div.product form.cart table.variations label {
	font-size: 15px;
	font-weight: 500;
	color: var(--stxp-ink);
}

/* Feld und «Zurücksetzen» in einer Zeile: Der Link ist bis zur Auswahl unsichtbar,
   soll aber auf dem Handy keine leere Zeile unter dem Feld belegen */
:is(body.woocommerce, body .woocommerce) div.product form.cart table.variations td.value {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 16px;
}

:is(body.woocommerce, body .woocommerce) div.product form.cart table.variations td.value select {
	flex: 1 1 auto;
}

:is(body.woocommerce, body .woocommerce) div.product form.cart table.variations td.value .reset_variations {
	flex: none;
}

/* «Zurücksetzen» ist unsichtbar, bis eine Auswahl getroffen ist (WooCommerce setzt dann style="visibility: visible") – bis dahin ganz weg,
   damit das Feld die volle Breite bekommt */
:is(body.woocommerce, body .woocommerce) div.product form.cart table.variations td.value .reset_variations:not([style*="visible"]) {
	display: none;
}

:is(body.woocommerce, body .woocommerce) div.product form.cart table.variations select {
	box-sizing: border-box;
	width: 100%;
	max-width: 360px;
	min-width: 0;
	height: 44px;
	margin: 0;
	padding: 0 40px 0 12px;
	border: 1px solid var(--stxp-feldrand);
	border-radius: 8px;
	background-color: #FFFFFF;
	color: var(--stxp-ink);
	font-family: var(--stxp-sans);
	font-size: 16px;
	line-height: 1.2;
}

:is(body.woocommerce, body .woocommerce) div.product form.cart table.variations select:focus {
	border-color: var(--stxp-blau);
	box-shadow: var(--stxp-fokus-ring);
	outline: none;
}

:is(body.woocommerce, body .woocommerce) div.product form.cart .reset_variations {
	margin: 0;
	font-size: 14px;
}

:is(body.woocommerce, body .woocommerce) div.product form.cart .single_variation_wrap {
	flex: 1 1 100%;
}

/* Produkt «einzeln verkauft»: Das Mengenfeld ist nur ein verstecktes Feld – sein leerer
   Rahmen soll den Knopf nicht einrücken */
:is(body.woocommerce, body .woocommerce) div.product form.cart div.quantity:has(> input.qty[type="hidden"]) {
	display: none;
}

:is(body.woocommerce, body .woocommerce) div.product form.cart .woocommerce-variation-price .price {
	display: block;
	margin: 0 0 16px;
	font-size: 16px;
}

/* Artikelnummer / Kategorie: klein und gedämpft, je Angabe eine Zeile */
:is(body.woocommerce, body .woocommerce) div.product .product_meta {
	font-size: 14px;
	color: var(--stxp-muted);
}

:is(body.woocommerce, body .woocommerce) div.product .product_meta > span {
	display: block;
}

/* Reiter «Beschreibung / Zusätzliche Informationen» schlicht: Linie mit blauer Markierung */
:is(body.woocommerce, body .woocommerce) div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0 24px;
	margin: 0 0 24px;
	padding: 0;
	overflow: visible;
	border-bottom: 1px solid var(--stxp-line);
}

:is(body.woocommerce, body .woocommerce) div.product .woocommerce-tabs ul.tabs::before,
:is(body.woocommerce, body .woocommerce) div.product .woocommerce-tabs ul.tabs li::before,
:is(body.woocommerce, body .woocommerce) div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

:is(body.woocommerce, body .woocommerce) div.product .woocommerce-tabs ul.tabs li {
	margin: 0 0 -1px;
	padding: 0;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	background: transparent;
}

:is(body.woocommerce, body .woocommerce) div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 10px 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--stxp-muted);
	text-decoration: none;
}

:is(body.woocommerce, body .woocommerce) div.product .woocommerce-tabs ul.tabs li.active {
	border-bottom-color: var(--stxp-blau);
	background: transparent;
}

:is(body.woocommerce, body .woocommerce) div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--stxp-ink);
}

/* Werte der Eigenschaften (z. B. «01, 02 …») nicht kursiv */
:is(body.woocommerce, body .woocommerce) table.woocommerce-product-attributes td p {
	margin: 0;
	font-style: normal;
}

/* Katalog (klassische Ausgabe): Sortierung wie ein Eingabefeld, Preis ruhig */
:is(body.woocommerce, body .woocommerce) .woocommerce-result-count {
	margin: 0 0 24px;
	font-size: 15px;
	color: var(--stxp-muted);
	line-height: 44px;
}

:is(body.woocommerce, body .woocommerce) .woocommerce-ordering {
	margin: 0 0 24px;
}

:is(body.woocommerce, body .woocommerce) .woocommerce-ordering select {
	box-sizing: border-box;
	height: 44px;
	max-width: 100%;
	padding: 0 36px 0 12px;
	border: 1px solid var(--stxp-feldrand);
	border-radius: 8px;
	background-color: #FFFFFF;
	color: var(--stxp-ink);
	font-family: var(--stxp-sans);
	font-size: 15px;
}

:is(body.woocommerce, body .woocommerce) ul.products li.product .woocommerce-loop-product__title {
	padding: 0;
	margin: 16px 0 4px;
	font-family: var(--stxp-sans);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--stxp-ink);
}

:is(body.woocommerce, body .woocommerce) ul.products li.product .price {
	margin: 0 0 16px;
	font-size: 16px;
	font-weight: 600;
	color: var(--stxp-ink);
}

/* Handy: Produkte untereinander statt zu zweit (Knopftexte bleiben einzeilig),
   Sortierung volle Breite */
@media (max-width: 600px) {
	:is(body.woocommerce, body .woocommerce) .woocommerce-ordering {
		float: none;
	}

	:is(body.woocommerce, body .woocommerce) .woocommerce-ordering select {
		width: 100%;
	}

	:is(body.woocommerce, body .woocommerce) ul.products[class*="columns-"] li.product,
	:is(body.woocommerce, body .woocommerce) ul.products[class*="columns-"] li.product:nth-child(2n) {
		float: none;
		clear: both;
		width: 100%;
		margin: 0 0 40px;
	}
}

/* Knopf unter dem Produkt: Text senkrecht mittig (WooCommerce setzt inline-block) */
:is(body.woocommerce, body .woocommerce) ul.products li.product .button {
	display: inline-flex;
	align-items: center;
	margin-top: 0;
}

:is(body.woocommerce, body .woocommerce) ul.products li.product a img {
	margin: 0;
	border: 1px solid var(--stxp-line);
	border-radius: 12px;
	box-sizing: border-box;
}


/* ==========================================================================
   3. stabamix-lizenz 1.13.0 – «Mein Konto → Lizenzen / Installation»
   Das Plugin bringt eigene Regeln als <style> mit (Farben der Knöpfe und
   Status mit !important bzw. als style-Attribut). Hier nur Form und Schrift.
   ========================================================================== */

body .stabamix-konto {
	font-size: 16px;
	line-height: 1.6;
	color: var(--stxp-text);
}

body .stabamix-konto > p {
	margin: 0 0 16px;
}

/* Ein Kasten je Lizenz = Karte (Radius 12, Linie). Wird die Rechner-Tabelle
   einmal breiter als der Kasten, scrollt sie im Kasten statt die Seite. */
body .stabamix-konto .stabamix-lizenz {
	margin: 0 0 20px;
	padding: clamp(16px, 3.5vw, 24px);
	border: 1px solid var(--stxp-line);
	border-radius: 12px;
	background: var(--stxp-weiss);
	overflow-x: auto;
}

body .stabamix-konto .stabamix-kopf {
	gap: 12px 16px;
	margin: 0 0 12px;
}

body .stabamix-konto .stabamix-etikett {
	color: var(--stxp-muted);
}

/* Lizenzschlüssel schwarz und fett in der Schrift des übrigen Textes (Wunsch Raphael 08.10.2026).
   Vorher IBM Plex Mono aus der Regel für <code>: davon sind nur 400 und 500 geladen, das Fett
   rechnete der Browser selbst dazu – der Schlüssel wirkte verschwommen. Plex Sans ist bis 600 geladen. */
body .stabamix-konto code.stabamix-schluessel {
	font-family: inherit;
	font-size: inherit;
	font-weight: 600;
	letter-spacing: normal;
	background: none;
	padding: 0;
	border: 0;
}

/* Rechner-Tabelle im Kasten: ohne eigenen Rahmen, Kopf wie stx-klein */
body .stabamix-konto table.stabamix-rechner {
	border: 0;
	border-radius: 0;
	background: transparent;
	font-size: 15px;
}

body .stabamix-konto table.stabamix-rechner thead th {
	padding-top: 8px;
	padding-bottom: 8px;
	border-top: 0;
}

body .stabamix-konto table.stabamix-rechner td {
	vertical-align: top;
}

body .stabamix-konto td small {
	font-size: 14px;
	color: var(--stxp-muted);
}

body .stabamix-konto .stabamix-leer {
	color: var(--stxp-muted);
}

/* Knöpfe: Form wie die übrigen (Radius 8, 16/600, Höhe 44); Farbe kommt vom Plugin */
body .stabamix-konto button.button.stabamix-knopf {
	min-height: 44px;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
}

body .stabamix-konto button.button.stabamix-knopf:focus-visible {
	outline: 2px solid var(--stxp-ink);
	outline-offset: 2px;
}

/* Knopf ohne Farbklasse (z. B. «Abbrechen» im Dialog) = Nebenknopf */
body .stabamix-konto button.button.stabamix-knopf:not(.stabamix-rot):not(.stabamix-blau):not(.stabamix-hellgruen):not(:disabled) {
	background: var(--stxp-weiss);
	color: var(--stxp-ink);
	box-shadow: inset 0 0 0 1.5px var(--stxp-ink);
}

body .stabamix-konto button.button.stabamix-knopf:not(.stabamix-rot):not(.stabamix-blau):not(.stabamix-hellgruen):not(:disabled):hover {
	background: var(--stxp-surface);
	color: var(--stxp-ink);
}

/* Erklärung unter den Kästen */
body .stabamix-konto h3 {
	margin: 24px 0 8px;
	font-family: var(--stxp-sans);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--stxp-ink);
}

/* Dialog «Lizenz kündigen» (Masse setzt das Plugin als style-Attribut) */
body .stabamix-konto dialog.stabamix-dialog {
	box-sizing: border-box;
	inset-inline: 16px;
	color: var(--stxp-text);
	font-family: var(--stxp-sans);
	font-size: 16px;
	line-height: 1.6;
	background: var(--stxp-weiss);
	box-shadow: 0 24px 64px -16px rgba(18, 22, 28, 0.35);
}

body .stabamix-konto dialog.stabamix-dialog::backdrop {
	background: rgba(18, 22, 28, 0.45);
}

body .stabamix-konto dialog.stabamix-dialog h3 {
	margin: 0 0 12px;
}

body .stabamix-konto dialog.stabamix-dialog input[type="radio"] {
	accent-color: var(--stxp-blau);
	width: 18px;
	height: 18px;
	margin: 0 8px 0 0;
	vertical-align: -3px;
}

body .stabamix-konto dialog.stabamix-dialog p:last-child {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 0;
}

/* «Installation»: Adressfeld wie die übrigen Eingabefelder */
body .stabamix-konto .stabamix-installation label {
	font-size: 15px;
	font-weight: 500;
	color: var(--stxp-ink);
}

body .stabamix-konto .stabamix-installation textarea {
	margin-top: 4px;
	min-height: 120px;
	padding: 10px 12px;
	border: 1px solid var(--stxp-feldrand);
	border-radius: 8px;
	background: #FFFFFF;
	color: var(--stxp-ink);
	font-size: 16px;
	line-height: 1.5;
}

body .stabamix-konto .stabamix-installation textarea:focus {
	border-color: var(--stxp-blau);
	box-shadow: var(--stxp-fokus-ring);
	outline: none;
}


/* ==========================================================================
   5. Download Monitor 5.3.1 – dezent
   ========================================================================== */

body .dlm-cart,
body .dlm-checkout {
	font-family: var(--stxp-sans);
	font-size: 16px;
	line-height: 1.6;
	color: var(--stxp-text);
}

body .dlm-cart .dlm-cart-table-items table tr th,
body .dlm-checkout .dlm-checkout-order-review table th {
	border-bottom: 1px solid var(--stxp-line);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--stxp-muted);
}

body .dlm-cart .dlm-cart-table-items table tr td {
	border-bottom: 1px solid var(--stxp-line);
}

body .dlm-cart .dlm-cart-bottom {
	border: 1px solid var(--stxp-line);
	border-radius: 12px;
	background: var(--stxp-surface);
}

body .dlm-cart .dlm-cart-bottom .dlm-cart-bottom-right .dlm-cart-totals table tr th,
body .dlm-cart .dlm-cart-bottom .dlm-cart-bottom-right .dlm-cart-totals table tr td {
	background: transparent;
}

body .dlm-cart .dlm-cart-bottom .dlm-cart-bottom-right .dlm-proceed-to-checkout a.dlm-button-checkout,
body .dlm-checkout #dlm_checkout_submit,
body a.dlm-download-button,
body .dlm-checkout-complete .dlm-checkout-download-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 44px;
	padding: 8px 20px;
	border: 0;
	border-radius: 8px;
	background: var(--stxp-blau);
	color: #FFFFFF;
	font-family: var(--stxp-sans);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

body .dlm-cart .dlm-cart-bottom .dlm-cart-bottom-right .dlm-proceed-to-checkout a.dlm-button-checkout:hover,
body .dlm-checkout #dlm_checkout_submit:hover,
body a.dlm-download-button:hover {
	background: var(--stxp-blau-dunkel);
	color: #FFFFFF;
}

body .dlm-checkout .dlm-checkout-row label {
	font-size: 15px;
	font-weight: 500;
	color: var(--stxp-ink);
}

body .dlm-checkout .dlm-checkout-row input[type="text"],
body .dlm-checkout .dlm-checkout-row input[type="email"],
body .dlm-checkout .dlm-checkout-row .dlm-checkout-input-wrapper select {
	box-sizing: border-box;
	width: 100%;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--stxp-feldrand);
	border-radius: 8px;
	background: #FFFFFF;
	color: var(--stxp-ink);
	font-size: 16px;
}

@media (max-width: 600px) {
	body .dlm-cart .dlm-cart-bottom .dlm-cart-coupons,
	body .dlm-cart .dlm-cart-bottom .dlm-cart-bottom-right,
	body .dlm-checkout .dlm-checkout-row-half {
		float: none;
		width: 100%;
	}
}