/**
 * Checkout layout — mediaMEANS-V5 / Brauerei Wittmann
 *
 * Row 1: billing and shipping on the left, totals box on the right.
 * Row 2: payment and order review across the full width.
 * Colours are declared as variables so they can be matched to the theme tokens.
 */

.woocommerce-checkout {
	/* Taken from m2_text_und_bild, variant data-sectionBackgroundColor="white". */
	--mM_co_bg: #faf7f1;
	--mM_co_surface: #ffffff;
	--mM_co_heading: #014f28;
	--mM_co_text: #5a615b;
	--mM_co_body: #012d15;
	--mM_co_accent: #ffef00;
	--mM_co_border: #e2ded4;
	--mM_co_gap: 32px;
	--mM_co_radius: 4px;
	--mM_co_aside_width: 380px;
}

/* ---------------------------------------------------------- layout */

/*
 * Named areas, because the markup order is not the visual order: payment and
 * order review are placed before the summary box in the DOM so focus reaches
 * the payment method before the button that places the order.
 */
.mM_checkout_layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--mM_co_aside_width);
	grid-template-areas:
		"main aside"
		"bottom bottom";
	gap: var(--mM_co_gap);
	align-items: start;
}

.mM_checkout_main {
	grid-area: main;
}

.mM_checkout_aside {
	grid-area: aside;
}

.mM_checkout_bottom {
	grid-area: bottom;
}

.mM_checkout_main,
.mM_checkout_aside,
.mM_checkout_bottom {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--mM_co_gap);
}

@media (max-width: 991px) {
	.mM_checkout_layout {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"main"
			"bottom"
			"aside";
	}
	
	body.woocommerce-checkout > .container:has(> .woocommerce),
	body.woocommerce-cart > .container:has(> .woocommerce) {
		padding-top: 60px;
		padding-bottom: 60px;
	}
}

/* ------------------------------------------------------- accordion */

.mM_woocommerce_akkordeon_container {
	background: var(--mM_co_surface);
	border: 1px solid var(--mM_co_border);
	border-radius: var(--mM_co_radius);
	overflow: hidden;
}

.mM_woocomerce_activator {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 18px 24px;
	cursor: pointer;
	color: var(--mM_co_body);
	background: none;
	border: 0;
	text-align: left;
	font: inherit;
}

.mM_woocomerce_activator:focus-visible {
	outline: 2px solid var(--mM_co_heading);
	outline-offset: -2px;
}

.mM_woocommerce_activator_label {
	font-weight: 700;
	font-size: 1.125rem;
}

.mM_woocommerce_activator_icon {
	flex: 0 0 auto;
	width: 12px;
	display: inline-flex;
	transition: transform 0.2s ease;
}

.mM_woocommerce_activator_icon svg {
	width: 100%;
	height: auto;
	fill: currentColor;
}

.mM_woocomerce_activator[data-active="true"] .mM_woocommerce_activator_icon {
	transform: rotate(90deg);
}

.mM_woocommerce_akkordeon_content[data-active="false"] {
	display: none;
}

.mM_woocommerce_akkordeon_content_inner {
	padding: 0 24px 24px;
}

/* ------------------------------------------------------ form fields */

.mM_field_wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.mM_field_wrapper .form-row {
	margin: 0;
	padding: 0;
}

/* Fields that should span the full width of the column. */
.mM_field_wrapper .form-row-wide,
.mM_field_wrapper #billing_address_1_field,
.mM_field_wrapper #billing_address_2_field,
.mM_field_wrapper #shipping_address_1_field,
.mM_field_wrapper #shipping_address_2_field,
.mM_field_wrapper #order_comments_field {
	grid-column: 1 / -1;
}

@media (max-width: 575px) {
	.mM_field_wrapper {
		grid-template-columns: minmax(0, 1fr);
	}
}

.woocommerce-checkout .mM_field_wrapper label {
	display: block;
	margin-bottom: 6px;
	color: var(--mM_co_body);
	font-size: 0.875rem;
}

/*
 * Field style taken from m21_kontaktformular: underline only, no box, no radius,
 * no horizontal padding. The theme uses #81ad97 on its green ground; on the
 * light checkout that line is too pale, so the muted text colour is used.
 * Floating labels are deliberately not carried over — they rely on a JS driven
 * .active class for filled fields, and without it a filled value would sit
 * underneath its own label.
 */
.woocommerce-checkout .mM_field_wrapper input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.woocommerce-checkout .mM_field_wrapper select,
.woocommerce-checkout .mM_field_wrapper textarea {
	width: 100%;
	padding: 5px 0;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--mM_co_text);
	border-radius: 0;
	color: var(--mM_co_body);
}

.woocommerce-checkout .mM_field_wrapper input:focus,
.woocommerce-checkout .mM_field_wrapper select:focus,
.woocommerce-checkout .mM_field_wrapper textarea:focus {
	outline: none;
	border-bottom-color: var(--mM_co_heading);
}

.woocommerce-checkout .mM_field_wrapper select {
	cursor: pointer;
}

.woocommerce-checkout .mM_field_wrapper input::placeholder,
.woocommerce-checkout .mM_field_wrapper textarea::placeholder {
	/* color: var(--mM_co_text) !important;
	font-family: 'Catamaran', sans-serif;
	font-weight: 300;
	font-style: normal;
	font-size: 17px;
	line-height: 1.55em; */
}

/* select2 renders its own box and has to be brought in line by hand. */
.woocommerce-checkout .mM_field_wrapper .select2-container .select2-selection--single {
	height: auto;
	padding: 5px 0;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--mM_co_text);
	border-radius: 0;
}

.woocommerce-checkout .mM_field_wrapper .select2-selection__rendered {
	padding: 0;
	line-height: inherit;
	color: var(--mM_co_body);
}

.woocommerce-checkout .mM_field_wrapper .select2-selection__arrow {
	right: 0;
}

/* -------------------------------------------------- order summary */

.mM_order_review .shop_table {
	display: block;
	color: var(--mM_co_body);
}

.mM_shop_table_row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--mM_co_border);
}

.mM_shop_table_header .mM_shop_table_row {
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
}

.mM_shop_table_footer .order-total {
	border-bottom: 0;
	padding-top: 16px;
	font-weight: 700;
	font-size: 1.125rem;
}

/* --------------------------------------------------- totals box */

.mM_checkout_totals_container {
	background: var(--mM_co_surface);
	border-radius: var(--mM_co_radius);
	color: var(--mM_co_body);
}

.mM_custom_checkout_container_inner {
	padding: 24px;
}

.mM_custom_checkout_info_content > div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 8px 0;
}

.mM_custom_checkout_info_content .order-total {
	margin-top: 8px;
	padding-top: 16px;
	border-top: 1px solid var(--mM_co_border);
	font-weight: 700;
	font-size: 1.25rem;
}

.mM_order_custom_submit_container {
	margin-top: 20px;
}

.mM_proxy_submit {
	display: block;
	width: 100%;
	padding: 16px 20px;
	border: 0;
	border-radius: var(--mM_co_radius);
	background: var(--mM_co_accent);
	color: var(--mM_co_body);
	font-weight: 700;
	cursor: pointer;
}

.mM_proxy_submit .verlinkung_beschriftung {
	display: flex;
	justify-content: center;
	gap: 16px;
}

.mM_proxy_submit[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ------------------------------------------------------- payment */

.woocommerce-checkout-payment .payment_methods {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.woocommerce-checkout-payment .payment_methods > li {
	padding: 14px 16px;
	border: 1px solid var(--mM_co_border);
	border-radius: var(--mM_co_radius);
	color: var(--mM_co_body);
}

.woocommerce-checkout-payment .payment_box {
	margin-top: 10px;
	font-size: 0.875rem;
	opacity: 0.85;
}

.woocommerce-checkout-payment .place-order {
	margin-top: 20px;
}

/*
 * The real submit stays in the DOM for WooCommerce and screen readers, but the
 * visible action is the button in the summary box. Germanized moves the button
 * into .wc-gzd-order-submit at the end of the form, so it is addressed by id
 * rather than by its surroundings. The wrapper itself must stay visible — it
 * carries the checkout nonce.
 */
.woocommerce-checkout #place_order {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------- light scheme tuning */

.mM_woocommerce_activator_label {
	color: var(--mM_co_heading);
}

.woocommerce-checkout .mM_field_wrapper label {
	color: var(--mM_co_text);
}

.mM_shop_table_header .mM_shop_table_row,
.mM_custom_checkout_info_content > div {
	color: var(--mM_co_text);
}

.mM_shop_table_footer .order-total,
.mM_custom_checkout_info_content .order-total {
	color: var(--mM_co_heading);
}

.mM_checkout_totals_container {
	border: 1px solid var(--mM_co_border);
}

.woocommerce-checkout-payment .payment_methods > li {
	background: var(--mM_co_bg);
	color: var(--mM_co_body);
}

.woocommerce-checkout-payment .payment_box {
	color: var(--mM_co_text);
	opacity: 1;
}

.mM_proxy_submit {
	background: var(--mM_co_accent);
	color: var(--mM_co_body);
}

.mM_woocomerce_activator:focus-visible {
	outline: 2px solid var(--mM_co_heading);
}

/*
 * Germanized prints its own "Zahlungsart auswählen" heading above the payment
 * box. The accordion header already carries that label, so the duplicate is
 * hidden rather than removed, which would mean unhooking a Germanized filter.
 */
#order_payment_heading,
#order_review_heading {
	display: none !important;
}

/* ------------------------------------------------- page background */

/*
 * The theme paints the checkout in the dark green. Only the body keeps a global
 * background; everything else is scoped to the container that actually holds
 * the shop markup, so the surrounding theme sections stay untouched.
 * Declared on :root as well, because the variables above live on
 * .woocommerce-checkout and are needed on body level.
 */
:root {
	--mM_co_bg: #faf7f1;
	--mM_co_surface: #ffffff;
	--mM_co_heading: #014f28;
	--mM_co_text: #5a615b;
	--mM_co_body: #012d15;
	--mM_co_accent: #ffef00;
	--mM_co_border: #e2ded4;
}

body.woocommerce-checkout,
body.woocommerce-cart {
	background-color: var(--mM_co_bg);
}

body.woocommerce-checkout > .container:has(> .woocommerce),
body.woocommerce-cart > .container:has(> .woocommerce) {
	background-color: var(--mM_co_bg);
	color: var(--mM_co_body);
	padding-top: 100px;
	padding-bottom: 100px;
}

body.woocommerce-checkout > .container:has(> .woocommerce) h1,
body.woocommerce-checkout > .container:has(> .woocommerce) h2,
body.woocommerce-checkout > .container:has(> .woocommerce) h3,
body.woocommerce-cart > .container:has(> .woocommerce) h1,
body.woocommerce-cart > .container:has(> .woocommerce) h2,
body.woocommerce-cart > .container:has(> .woocommerce) h3 {
	color: var(--mM_co_heading);
}

body.woocommerce-checkout > .container:has(> .woocommerce) p,
body.woocommerce-checkout > .container:has(> .woocommerce) label,
body.woocommerce-cart > .container:has(> .woocommerce) p,
body.woocommerce-cart > .container:has(> .woocommerce) label {
	color: var(--mM_co_text);
}

body.woocommerce-checkout > .container:has(> .woocommerce) a,
body.woocommerce-cart > .container:has(> .woocommerce) a {
	color: var(--mM_co_heading);
}

/* Coupon notice above the form. */
.woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-message {
	background: var(--mM_co_surface);
	border: 1px solid var(--mM_co_border);
	border-left: 3px solid var(--mM_co_accent);
	border-radius: var(--mM_co_radius);
	color: var(--mM_co_body);
	padding: 14px 18px;
}

.woocommerce-checkout .woocommerce-error {
	background: var(--mM_co_surface);
	border: 1px solid #c0392b;
	border-radius: var(--mM_co_radius);
	color: #c0392b;
	padding: 14px 18px;
}


/* ------------------------------------------- WooCommerce base overrides */

/*
 * WooCommerce ships its own field rules under `.woocommerce form .form-row …`,
 * including the red border for invalid fields. The underline style is restated
 * with the same selector shape so it is not a specificity race, and the
 * validation states are expressed as a bottom border instead of a full box.
 */
.woocommerce-checkout .woocommerce form .form-row input.input-text,
.woocommerce-checkout .woocommerce form .form-row select,
.woocommerce-checkout .woocommerce form .form-row textarea,
.woocommerce-checkout form.checkout .form-row input.input-text,
.woocommerce-checkout form.checkout .form-row select,
.woocommerce-checkout form.checkout .form-row textarea {
	padding: 5px 0;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--mM_co_text);
	border-radius: 0;
	color: var(--mM_co_body);
	box-shadow: none;
}

.woocommerce-checkout form.checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout form.checkout .form-row.woocommerce-invalid select,
.woocommerce-checkout form.checkout .form-row.woocommerce-invalid textarea,
.woocommerce-checkout form.checkout .form-row.woocommerce-invalid .select2-selection--single {
	border: none;
	border-bottom: 2px solid var(--wc-red, #e2401c);
}

.woocommerce-checkout form.checkout .form-row.woocommerce-validated input.input-text,
.woocommerce-checkout form.checkout .form-row.woocommerce-validated select,
.woocommerce-checkout form.checkout .form-row.woocommerce-validated textarea,
.woocommerce-checkout form.checkout .form-row.woocommerce-validated .select2-selection--single {
	border: none;
	border-bottom: 1px solid var(--mM_co_heading);
}

.woocommerce-checkout form.checkout .form-row input.input-text:focus,
.woocommerce-checkout form.checkout .form-row select:focus,
.woocommerce-checkout form.checkout .form-row textarea:focus {
	outline: none;
	border-bottom-color: var(--mM_co_heading);
}

/* Woo's inline validation hint sits right under the field. */
.woocommerce-checkout .woocommerce-invalid .woocommerce-error-tip,
.woocommerce-checkout .wc-block-components-validation-error {
	color: var(--wc-red, #e2401c);
	font-size: 0.8125rem;
}


/* --------------------------------------------- payment box colours */

/*
 * WooCommerce ships a grey list and a lilac description box. Both are pulled
 * onto the light palette.
 */
.woocommerce-checkout #payment,
.woocommerce-checkout .woocommerce-checkout-payment {
	background: transparent;
	border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
	border: none;
	padding: 0;
	margin: 0;
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--mM_co_bg);
	color: var(--mM_co_text);
	border-radius: var(--mM_co_radius);
	padding: 12px 16px;
}

/* Removes the little arrow pointing at the payment title. */
.woocommerce-checkout #payment div.payment_box::before {
	display: none;
}

.woocommerce-checkout #payment ul.payment_methods li label {
	color: var(--mM_co_heading);
	font-weight: 700;
}

/* The asterisk keeps its own colour instead of inheriting the muted text. */
.woocommerce-checkout .required {
	color: var(--wc-red, #e2401c);
}

/* ------------------------------------------------ flex instead of float */

/*
 * WooCommerce lays its form rows out with floats and percentage widths
 * (.form-row-first floats left, .form-row-last floats right, .form-row-wide
 * clears). That is replaced by flex here, with the same selector shape Woo
 * uses so the rules win without !important.
 */
.woocommerce-checkout .mM_field_wrapper,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 24px 32px;
}

.woocommerce-checkout .woocommerce form .form-row,
.woocommerce-checkout .woocommerce-page form .form-row,
.woocommerce-checkout form.checkout .form-row {
	float: none;
	clear: none;
	width: auto;
	margin: 0;
	padding: 0;
	flex: 1 1 100%;
}

.woocommerce-checkout .woocommerce form .form-row-first,
.woocommerce-checkout .woocommerce form .form-row-last,
.woocommerce-checkout .woocommerce-page form .form-row-first,
.woocommerce-checkout .woocommerce-page form .form-row-last,
.woocommerce-checkout form.checkout .form-row-first,
.woocommerce-checkout form.checkout .form-row-last {
	float: none;
	width: auto;
	flex: 1 1 calc(50% - 16px);
}

.woocommerce-checkout .woocommerce form .form-row-wide,
.woocommerce-checkout .woocommerce-page form .form-row-wide,
.woocommerce-checkout form.checkout .form-row-wide {
	float: none;
	clear: none;
	width: auto;
	flex: 1 1 100%;
}

/* Postcode and city read better side by side than stacked full width. */
.woocommerce-checkout form.checkout #billing_postcode_field,
.woocommerce-checkout form.checkout #shipping_postcode_field {
	flex: 0 1 160px;
}

.woocommerce-checkout form.checkout #billing_city_field,
.woocommerce-checkout form.checkout #shipping_city_field {
	flex: 1 1 calc(50% - 16px);
}

/* Woo floats the two halves of .col2-set; the layout grid handles that now. */
.woocommerce-checkout .woocommerce .col2-set,
.woocommerce-checkout .woocommerce-page .col2-set {
	display: flex;
	flex-direction: column;
	gap: var(--mM_co_gap);
	width: auto;
}

.woocommerce-checkout .woocommerce .col2-set .col-1,
.woocommerce-checkout .woocommerce .col2-set .col-2,
.woocommerce-checkout .woocommerce-page .col2-set .col-1,
.woocommerce-checkout .woocommerce-page .col2-set .col-2 {
	float: none;
	width: auto;
}

/* The cleared floats leave Woo's clearfix pseudo elements behind. */
.woocommerce-checkout form.checkout .form-row::after,
.woocommerce-checkout form.checkout .form-row::before,
.woocommerce-checkout .col2-set::after,
.woocommerce-checkout .col2-set::before {
	content: none;
}

@media (max-width: 575px) {
	.woocommerce-checkout .woocommerce form .form-row-first,
	.woocommerce-checkout .woocommerce form .form-row-last,
	.woocommerce-checkout form.checkout .form-row-first,
	.woocommerce-checkout form.checkout .form-row-last,
	.woocommerce-checkout form.checkout #billing_postcode_field,
	.woocommerce-checkout form.checkout #shipping_postcode_field,
	.woocommerce-checkout form.checkout #billing_city_field,
	.woocommerce-checkout form.checkout #shipping_city_field {
		flex: 1 1 100%;
	}
}

/* ============================================================ checkboxes */

/*
 * The native input is clipped rather than removed, so it keeps its label link
 * and its keyboard behaviour, and the box is drawn on the label.
 */
.woocommerce-checkout .woocommerce-form__label-for-checkbox {
	display: block;
	position: relative;
	margin: 0;
	padding-left: 40px;
	cursor: pointer;
}

.woocommerce-checkout .woocommerce-form__label-for-checkbox input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.woocommerce-checkout .woocommerce-form__label-for-checkbox::before,
.woocommerce-checkout .woocommerce-form__label-for-checkbox::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	display: inline-block;
	width: 25px;
	height: 25px;
	background: transparent;
	border: 2px solid var(--mM_co_heading);
	border-radius: 6px;
}

.woocommerce-checkout .woocommerce-form__label-for-checkbox::after {
	top: 6px;
	left: 6px;
	width: 13px;
	height: 13px;
	border: none;
	border-radius: 3px;
	background: var(--mM_co_heading);
	opacity: 0;
	transition: opacity 0.15s;
}

.woocommerce-checkout .woocommerce-form__label-for-checkbox:has(input:checked)::after {
	opacity: 1;
}

.woocommerce-checkout .woocommerce-form__label-for-checkbox:has(input:focus-visible)::before {
	outline: 2px solid var(--mM_co_heading);
	outline-offset: 2px;
}

/* Keeps the asterisk on the same line as the text it belongs to. */
.woocommerce-checkout .checkbox-legal .woocommerce-gzd-legal-checkbox-text {
	display: inline;
}

.woocommerce-checkout .checkbox-legal .required {
	display: inline;
	margin-left: 2px;
}

.woocommerce-checkout .checkbox-legal a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ============================================================ buttons */

/*
 * Woo's button rules are wrapped in :where(), which contributes no specificity,
 * so the effective selector is `.woocommerce button.button` (0,2,1). The theme
 * button style is restated at or above that weight instead of using !important.
 * Values come from theme.css .wb_button.
 */
 
.woocommerce-checkout .woocommerce a.showcoupon, 
.woocommerce-checkout a.showcoupon {
	font-weight: 600;
}

.woocommerce-checkout .woocommerce button.mM_proxy_submit,
.woocommerce-checkout button.mM_proxy_submit.button {
	display: block;
	width: 100%;
	margin-top: 0;
	padding: 15px 50px 13px;
	border: 2px solid var(--mM_co_accent);
	border-radius: 50px;
	background: var(--mM_co_accent);
	color: #373737;
	font-weight: 400;
	line-height: 1.2;
	cursor: pointer;
	transition: color 0.4s, background 0.4s, border 0.4s;
}

.woocommerce-checkout .woocommerce button.mM_proxy_submit:hover,
.woocommerce-checkout button.mM_proxy_submit.button:hover {
	border-color: #014f28;
	color: var(--mM_co_heading);
	background: #efe001;
}

/* Coupon button — .wb_button.third from theme.css. */
.woocommerce-checkout .woocommerce button.button[name="apply_coupon"],
.woocommerce-checkout button.button[name="apply_coupon"] {
	display: inline-block;
	margin-top: 0;
	padding: 15px 50px 13px;
	border: 2px solid #b9bbb6;
	border-radius: 50px;
	background: transparent;
	color: #002b13;
	font-weight: 400;
	line-height: 1.2;
	cursor: pointer;
	transition: color 0.4s, background 0.4s;
}

.woocommerce-checkout .woocommerce button.button[name="apply_coupon"]:hover,
.woocommerce-checkout button.button[name="apply_coupon"]:hover {
	background: #b9bbb6;
	color: #002b13;
}

/* ==================================================== floating labels */

/*
 * Label behaviour from m21_kontaktformular: the label sits on the field and
 * moves up on focus or once the field holds a value. WooCommerce mixes labels
 * and placeholders, so placeholders are only revealed while the field has
 * focus — otherwise both would be readable at once and contradict each other.
 * .mM_filled is set by btw_shop.js; selects count as filled permanently.
 */
.woocommerce-checkout form.checkout .form-row:not(.checkbox-legal):not(.create-account):not(.place-order) {
	position: relative;
	padding-top: 22px;
}

.woocommerce-checkout form.checkout .form-row:not(.checkbox-legal):not(.create-account):not(.place-order) > label {
	position: absolute;
	top: 22px;
	left: 0;
	margin: 0;
	transform-origin: left;
	transition: transform 0.25s;
	color: var(--mM_co_text);
	white-space: nowrap;
}

.woocommerce-checkout form.checkout .form-row:focus-within > label,
.woocommerce-checkout form.checkout .form-row.mM_filled > label,
.woocommerce-checkout form.checkout .form-row:has(select) > label,
.woocommerce-checkout form.checkout .form-row:has(.select2) > label {
	transform: translate(0, -24px) scale(0.8);
}

.woocommerce-checkout form.checkout .form-row input::placeholder,
.woocommerce-checkout form.checkout .form-row textarea::placeholder {
	color: transparent !important;
	font-family: 'Catamaran', sans-serif;
	font-weight: 300;
	font-style: normal;
	font-size: 17px;
	line-height: 1.55em;
	transition: color 0.25s;
}

.woocommerce-checkout form.checkout .form-row:focus-within input::placeholder,
.woocommerce-checkout form.checkout .form-row:focus-within textarea::placeholder {
	/* color: var(--mM_co_text) !important; */
}

@media (max-width: 767px) {
	.woocommerce-checkout form.checkout .form-row:focus-within > label,
	.woocommerce-checkout form.checkout .form-row.mM_filled > label {
		transform: translate(0, -20px) scale(0.8);
	}
}

/* ==================================================== select2 dropdown */

/*
 * The dropdown is rendered at body level, outside the checkout container, so
 * these selectors cannot be scoped to it.
 */
.select2-container--default .select2-dropdown {
	background: var(--mM_co_surface, #fff);
	border: 1px solid var(--mM_co_border, #e2ded4);
	border-radius: 4px;
	overflow: hidden;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	padding: 8px 10px;
	border: 1px solid var(--mM_co_border, #e2ded4);
	border-radius: 4px;
	color: var(--mM_co_body, #012d15);
}

.select2-container--default .select2-results__option {
	padding: 10px 14px;
	color: var(--mM_co_body, #012d15);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
	background: var(--mM_co_heading, #014f28);
	color: #fff;
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
	background: var(--mM_co_bg, #faf7f1);
	color: var(--mM_co_body, #012d15);
}

/* ================================================ payment method state */

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
	border: 1px solid var(--mM_co_border);
	border-radius: var(--mM_co_radius);
	padding: 14px 16px;
	transition: border-color 0.2s, background 0.2s;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:has(input:checked) {
	border-color: var(--mM_co_heading);
	background: var(--mM_co_bg);
}

/* Radio rendered as a ring with a filled centre, same idea as the checkboxes. */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label {
	position: relative;
	display: block;
	/* padding-left: 40px; */
	padding-left: 16px;
	cursor: pointer;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
}

/* ========================================================= coupon area */

/*
 * The notice and the coupon form are two separate blocks in the markup. They
 * are given the same surface so they read as one unit, and Woo's icon, which
 * is positioned into the middle of the sentence, is dropped.
 */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-checkout form.checkout_coupon {
	background: var(--mM_co_surface);
	border: 1px solid var(--mM_co_border);
	border-radius: var(--mM_co_radius);
	margin: 0 0 16px;
	padding: 18px 24px;
}

.woocommerce-checkout .woocommerce-info::before,
.woocommerce-checkout .woocommerce-message::before,
.woocommerce-checkout .woocommerce-error::before {
	content: none;
}

.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-message {
	padding-left: 24px;
}

.woocommerce-checkout form.checkout_coupon {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px 24px;
}

.woocommerce-checkout form.checkout_coupon .form-row {
	flex: 1 1 240px;
	margin: 0;
	padding: 0;
	width: auto;
}

.woocommerce-checkout form.checkout_coupon .form-row-last {
	flex: 0 0 auto;
}

.woocommerce-checkout form.checkout_coupon .clear {
	display: none;
}

/* ==================================================== coupon in summary */

.mM_custom_checkout_info_content > .mM_coupon_container,
.mM_coupon_container {
	display: block;
	margin: 48px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--mM_co_border);
}

.mM_coupon_label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.8125rem;
	color: var(--mM_co_text);
}

.mM_coupon_row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.woocommerce-checkout .mM_coupon_input {
	flex: 1 1 140px;
	min-width: 0;
	padding: 5px 0;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--mM_co_text);
	border-radius: 0;
	color: var(--mM_co_body);
}

.woocommerce-checkout .mM_coupon_input:focus {
	outline: none;
	border-bottom-color: var(--mM_co_heading);
}

/* .wb_button.third from theme.css, scaled down to fit the summary box. */
.woocommerce-checkout .woocommerce button.mM_coupon_apply,
.woocommerce-checkout button.button.mM_coupon_apply {
	flex: 0 0 auto;
	margin-top: 0;
	padding: 10px 24px 8px;
	border: 2px solid #b9bbb6;
	border-radius: 50px;
	background: transparent;
	color: #002b13;
	font-weight: 400;
	line-height: 1.2;
	cursor: pointer;
	transition: color 0.4s, background 0.4s;
}

.woocommerce-checkout .woocommerce button.mM_coupon_apply:hover,
.woocommerce-checkout button.button.mM_coupon_apply:hover {
	background: #b9bbb6;
}

.woocommerce-checkout button.mM_coupon_apply[disabled] {
	opacity: 0.5;
	cursor: wait;
}

.mM_coupon_feedback:empty {
	display: none;
}

.mM_coupon_feedback {
	margin: 10px 0 0;
	font-size: 0.8125rem;
	color: var(--mM_co_heading);
}

.mM_coupon_error .mM_coupon_feedback {
	color: var(--wc-red, #e2401c);
}

/* ============================== order review — raised specificity */

/*
 * The rules above are repeated through #order_review. WooCommerce and
 * Germanized both style the cart lines, and an id outweighs anything they
 * declare with classes, so the list keeps its layout regardless of load order.
 */
.woocommerce-checkout #order_review .mM_shop_table_body .mM_shop_table_row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 0;
	border-bottom: 1px solid var(--mM_co_border);
}

.woocommerce-checkout #order_review .product-name {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	align-items: flex-start;
	flex: 1 1 auto;
	min-width: 0;
}

.woocommerce-checkout #order_review .wc-gzd-cart-item-name-wrapper {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 1 1 100%;
	font-weight: 700;
	color: var(--mM_co_heading);
}

.woocommerce-checkout #order_review .wc-gzd-cart-item-thumbnail {
	flex: 0 0 64px;
	width: 64px;
}

.woocommerce-checkout #order_review .wc-gzd-cart-item-thumbnail img {
	display: block;
	width: 64px;
	height: 64px;
	max-width: 64px;
	object-fit: contain;
	background: var(--mM_co_bg);
	border-radius: var(--mM_co_radius);
}

.woocommerce-checkout #order_review .wc-gzd-item-desc,
.woocommerce-checkout #order_review .delivery-time-info,
.woocommerce-checkout #order_review dl.variation {
	flex: 1 1 100%;
	margin: 4px 0 0 80px;
	font-size: 0.8125rem;
	color: var(--mM_co_text);
}

.woocommerce-checkout #order_review .wc-gzd-item-desc p,
.woocommerce-checkout #order_review dl.variation dd p {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--mM_co_text);
}

.woocommerce-checkout #order_review dl.variation {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 2px 8px;
}

.woocommerce-checkout #order_review dl.variation dt {
	margin: 0;
	font-weight: 400;
	font-size: 0.8125rem;
	color: var(--mM_co_text);
}

.woocommerce-checkout #order_review dl.variation dd {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--mM_co_body);
}

.woocommerce-checkout #order_review .product-total {
	flex: 0 0 auto;
	white-space: nowrap;
	font-weight: 700;
	color: var(--mM_co_heading);
}

.woocommerce-checkout #order_review .mM_shop_table_header .mM_shop_table_row {
	display: flex;
	justify-content: space-between;
	padding: 0 0 12px;
	border-bottom: 1px solid var(--mM_co_border);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--mM_co_text);
}

.woocommerce-checkout #order_review .mM_shop_table_footer .mM_shop_table_row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 6px 0;
	border-bottom: none;
}

.woocommerce-checkout #order_review .mM_shop_table_footer .order-total {
	padding-top: 14px;
	margin-top: 8px;
	border-top: 1px solid var(--mM_co_border);
	font-weight: 700;
	color: var(--mM_co_heading);
}

@media (max-width: 575px) {
	.woocommerce-checkout #order_review .wc-gzd-item-desc,
	.woocommerce-checkout #order_review .delivery-time-info,
	.woocommerce-checkout #order_review dl.variation {
		margin-left: 0;
	}
}

/* ==================================== shipping toggle + review polish */

/*
 * The shipping header carries its text inside a label, and the generic label
 * colour further up was winning over the activator colour.
 */
.woocommerce-checkout .mM_shipping_activator .mM_woocommerce_activator_label,
.woocommerce-checkout .mM_shipping_activator label,
.woocommerce-checkout .mM_shipping_activator label > span {
	color: var(--mM_co_heading);
	font-weight: 700;
	font-size: 1.125rem;
}

/* WooCommerce gives cart rows and the table head their own grey. */
.woocommerce-checkout #order_review .shop_table,
.woocommerce-checkout #order_review .mM_shop_table_header,
.woocommerce-checkout #order_review .mM_shop_table_header .mM_shop_table_row,
.woocommerce-checkout #order_review .mM_shop_table_body,
.woocommerce-checkout #order_review .mM_shop_table_body .mM_shop_table_row,
.woocommerce-checkout #order_review .mM_shop_table_footer,
.woocommerce-checkout #order_review .mM_shop_table_footer .mM_shop_table_row,
.woocommerce-checkout #order_review .cart_item {
	background: transparent;
}

.woocommerce-checkout #order_review .mM_shop_table_body .mM_shop_table_row:last-child {
	border-bottom: none;
}

/*
 * Attribute names can be long ("Individualprodukt – Vom Umtausch
 * ausgeschlossen"), which would otherwise push the value column off screen.
 */
.woocommerce-checkout #order_review dl.variation {
	grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
	column-gap: 16px;
}

.woocommerce-checkout #order_review dl.variation dt {
	max-width: 22ch;
	overflow-wrap: break-word;
}

.woocommerce-checkout #order_review .delivery-time-info {
	margin-top: 8px;
}

/* ============================================ totals, labels, select2 */

/*
 * Some themes hide .screen-reader-text with display:none, which no amount of
 * un-clipping brings back. Only the checkout labels are forced visible.
 */
.woocommerce-checkout form.checkout .form-row > label.screen-reader-text {
	font-family: 'Catamaran', sans-serif;
	font-weight: 300;
	font-style: normal;
	font-size: 0.875rem;
	color: var(--mM_co_text);
	line-height: 2;
	width: auto;
	height: auto;
	clip: unset;
	clip-path: unset;
}

/*
 * The totals live in the summary box on the right. The review table repeats
 * subtotal, shipping and total at the bottom of the page, so that footer is
 * dropped rather than showing every amount twice.
 */
.woocommerce-checkout #order_review .mM_shop_table_footer {
	display: none;
}

/* The coupon block already closes with a line; the total must not add a second. */
.mM_custom_checkout_info_content .mM_coupon_container + .order-total {
	margin: 48px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--mM_co_border);
}

/* The search field inside the country dropdown ships without a placeholder. */
.select2-container--default .select2-search--dropdown .select2-search__field {
	background: var(--mM_co_surface, #fff);
}

.select2-container--default .select2-search--dropdown .select2-search__field::placeholder {
	font-family: 'Catamaran', sans-serif;
	font-weight: 300;
	font-style: normal;
	font-size: 17px;
	color: var(--mM_co_text);
	line-height: 1.55em;
}

/*
 * Germanized appends its checkbox placeholders as siblings of the accordion
 * content, so they miss its inner padding and sat flush against the card edge.
 */
.mM_woocommerce_payment_container > .wc-gzd-checkbox-placeholder {
	padding: 0 24px;
}

.mM_woocommerce_payment_container > .wc-gzd-checkbox-placeholder:not(:empty):last-child {
	padding-bottom: 24px;
}

.mM_woocommerce_payment_container > .wc-gzd-checkbox-placeholder .form-row {
	margin: 0 0 12px;
	padding: 0;
}

/* ==================================================== accessibility */

/*
 * Every interactive element needs a focus indicator that is visible on the
 * light ground. Woo and the theme both strip outlines in places.
 */
.woocommerce-checkout a:focus-visible,
.woocommerce-checkout button:focus-visible,
.woocommerce-checkout input:focus-visible,
.woocommerce-checkout select:focus-visible,
.woocommerce-checkout textarea:focus-visible,
.woocommerce-checkout .select2-selection:focus-visible {
	outline: 2px solid var(--mM_co_heading);
	outline-offset: 2px;
}

/* Fields are underlined only, so the ring needs room below the baseline. */
.woocommerce-checkout form.checkout .form-row input:focus-visible,
.woocommerce-checkout form.checkout .form-row textarea:focus-visible,
.woocommerce-checkout form.checkout .form-row select:focus-visible {
	outline-offset: 4px;
}

/*
 * The required marker is decorative (aria-hidden) and is accompanied by a
 * screen reader text, but it still has to be legible.
 */
.woocommerce-checkout .required {
	color: #b3301f;
}

/* Hit area around the 25px box. */
.woocommerce-checkout .woocommerce-form__label-for-checkbox,
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label {
	min-height: 32px;
	padding-top: 3px;
	padding-bottom: 3px;
}

/* The shipping toggle gets the same box as every other checkbox. */
.woocommerce-checkout .mM_shipping_activator .woocommerce-form__label-for-checkbox {
	display: block;
	position: relative;
	padding-left: 40px;
	margin: 0;
	cursor: pointer;
}

/*
 * The visible action is the proxy button; the real submit is clipped. It stays
 * in the DOM but is taken out of the tab order in btw_shop.js, so keyboard
 * users do not land on an invisible control.
 */
.woocommerce-checkout #place_order:focus-visible {
	position: static;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	margin: 12px 0 0;
	padding: 12px 24px;
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce-checkout *,
	.woocommerce-checkout *::before,
	.woocommerce-checkout *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* ==================================== payment method: radio and tile */

/*
 * WooCommerce sets display:none inline on the radio as soon as only one
 * gateway is available, which takes it out of the tab order entirely. It is
 * forced back into the document and clipped instead, so it stays focusable
 * and operable while the ring on the label carries the visual state.
 */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > input[type="radio"] {
	display: block !important;
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* The whole tile reacts to a click, not just the payment method name. */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
	position: relative;
	cursor: pointer;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label {
	cursor: pointer;
}

/* Links and fields inside the description stay usable. */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method a,
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method input,
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method select,
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method textarea {
	position: relative;
	z-index: 1;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:hover {
	border-color: var(--mM_co_heading);
	background: var(--mM_co_bg);
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:has(input:focus-visible) {
	outline: 2px solid var(--mM_co_heading);
	outline-offset: 2px;
	border-color: var(--mM_co_heading);
}


/* ======================================== radio: hide the native control */

/*
 * Woo sets display:none inline on the radio whenever a single gateway is
 * available. Restating display and clipping it keeps the control focusable
 * and operable while the ring on the label shows the state.
 */
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"],
.woocommerce-checkout #payment ul.payment_methods li input.input-radio,
.woocommerce-checkout .wc_payment_method > input[type="radio"] {
	display: block !important;
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
	opacity: 1 !important;
}

/* ==================================================== validation summary */

/*
 * The list WooCommerce prints above the form after a failed submit. Each entry
 * links to the field it refers to, so it is styled as a list of links rather
 * than as a block of red text.
 */
.woocommerce-checkout .woocommerce-NoticeGroup-checkout {
	margin-bottom: var(--mM_co_gap);
}

.woocommerce-checkout ul.woocommerce-error {
	margin: 0;
	padding: 20px 24px;
	list-style: none;
	background: var(--mM_co_surface);
	border: 1px solid #b3301f;
	border-left: 4px solid #b3301f;
	border-radius: var(--mM_co_radius);
	color: var(--mM_co_body);
}

.woocommerce-checkout ul.woocommerce-error:focus-visible {
	outline: 2px solid #b3301f;
	outline-offset: 2px;
}

/* Heading for the group, so the list is not just a pile of red sentences. */
.woocommerce-checkout ul.woocommerce-error::before {
	content: 'Bitte prüfen Sie folgende Angaben:';
	display: block;
	margin-bottom: 12px;
	font-weight: 700;
	color: #b3301f;
}

.woocommerce-checkout ul.woocommerce-error li {
	margin: 0;
	padding: 6px 0;
	border-bottom: 1px solid var(--mM_co_border);
}

.woocommerce-checkout ul.woocommerce-error li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.woocommerce-checkout ul.woocommerce-error li > a {
	display: inline-block;
	color: var(--mM_co_body);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.woocommerce-checkout ul.woocommerce-error li > a:hover {
	color: #b3301f;
}

.woocommerce-checkout ul.woocommerce-error strong {
	color: var(--mM_co_heading);
}

/* The field marked invalid, once the user follows one of those links. */
.woocommerce-checkout form.checkout .form-row.woocommerce-invalid > label {
	color: #b3301f;
}