/**
 * Kasse (klassisch, [woocommerce_checkout]).
 *
 * Desktop: Adressen links, Bestellübersicht + Zahlung rechts (sticky).
 * Mobile: untereinander. Zahlarten als große, klickbare Karten.
 */
.woocommerce-checkout .store-page__content > .woocommerce {
	display: grid;
	gap: var(--space-6);
}

/* Gutschein-/Login-Hinweise oben */
.woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-form-login-toggle .woocommerce-info {
	margin-block-end: var(--space-4);
}

.checkout_coupon,
.woocommerce-form-login {
	background: var(--theme-bg-muted);
	border-radius: var(--radius-lg);
	margin-block-end: var(--space-6);
	padding: var(--space-6);
}

.checkout_coupon {
	align-items: end;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.checkout_coupon > p:first-child {
	flex: 1 0 100%;
}

.checkout_coupon .form-row {
	flex: 1 1 14rem;
	margin: 0;
}

/* Raster */
form.woocommerce-checkout {
	align-items: start;
	column-gap: var(--space-11);
	display: grid;
	grid-template-areas:
		"notices notices"
		"details heading"
		"details review";
	grid-template-columns: minmax(0, 1fr) minmax(20rem, 30rem);
	grid-template-rows: auto auto 1fr;
}

form.woocommerce-checkout > .woocommerce-NoticeGroup {
	grid-area: notices;
	margin-block-end: var(--space-8);
}

/* WooCommerce fokussiert die Fehlerliste per Skript – die Box hat bereits
   einen eigenen Rahmen, ein zusätzlicher Fokusring würde doppeln. */
.woocommerce-NoticeGroup:focus,
.woocommerce-NoticeGroup .woocommerce-error:focus {
	outline: none;
}

#customer_details {
	grid-area: details;
	min-inline-size: 0;
}

#order_review_heading {
	grid-area: heading;
}

#order_review {
	background: var(--theme-bg-muted);
	border-radius: var(--radius-lg);
	grid-area: review;
	padding: var(--space-8);
	position: sticky;
	inset-block-start: calc(var(--header-offset, 5rem) + var(--space-6));
}

#customer_details :is(.col-1, .col-2) + :is(.col-1, .col-2) {
	margin-block-start: var(--space-10);
}

.woocommerce-checkout :is(.woocommerce-billing-fields, .woocommerce-shipping-fields, .woocommerce-additional-fields) > h2,
#order_review_heading {
	font-size: var(--font-size-title-sm);
	line-height: var(--line-height-title-sm);
	margin-block-end: var(--space-6);
}

#ship-to-different-address label {
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-lg);
}

.woocommerce-billing-fields__field-wrapper::after,
.woocommerce-shipping-fields__field-wrapper::after,
.woocommerce-address-fields__field-wrapper::after {
	clear: both;
	content: "";
	display: table;
}

/* Bestellübersicht */
.woocommerce-checkout-review-order-table {
	margin-block-end: var(--space-6);
}

.woocommerce-checkout-review-order-table :is(th, td) {
	vertical-align: top;
}

.woocommerce-checkout-review-order-table td:last-child,
.woocommerce-checkout-review-order-table tfoot th + td {
	text-align: end;
}

.woocommerce-checkout-review-order-table .product-quantity {
	color: var(--theme-text-muted);
	font-weight: var(--font-weight-regular);
}

.woocommerce-checkout-review-order-table .order-total :is(th, td) {
	border-block-end: 0;
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
}

/* Zahlarten */
#payment .wc_payment_methods {
	display: grid;
	gap: var(--space-3);
	list-style: none;
	margin: 0 0 var(--space-6);
	padding: 0;
}

#payment .wc_payment_method {
	background: var(--theme-bg);
	border: var(--border-width-medium) solid var(--theme-border);
	border-radius: var(--radius-lg);
	padding: var(--space-4) var(--space-5);
	transition: border-color var(--duration-fast) var(--ease-standard);
}

#payment .wc_payment_method:has(> input:checked) {
	border-color: var(--theme-text);
}

#payment .wc_payment_method > input {
	margin-inline-end: var(--space-3);
}

#payment .wc_payment_method > label {
	align-items: center;
	cursor: pointer;
	display: inline-flex;
	flex-wrap: wrap;
	font-weight: var(--font-weight-medium);
	gap: var(--space-2);
}

#payment .wc_payment_method > label img {
	block-size: 1.5rem;
	display: inline-block;
	inline-size: auto;
}

#payment .payment_box {
	color: var(--theme-text-muted);
	font-size: var(--font-size-small);
	margin-block-start: var(--space-4);
}

#payment .payment_box fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

/* Rechtstexte + Bestellbutton */
.woocommerce-terms-and-conditions-wrapper {
	display: grid;
	gap: var(--space-4);
	margin-block-end: var(--space-6);
}

.woocommerce-privacy-policy-text {
	color: var(--theme-text-muted);
	font-size: var(--font-size-small);
	line-height: var(--line-height-small);
}

.woocommerce-terms-and-conditions-wrapper a,
.woocommerce-privacy-policy-text a {
	color: var(--theme-text);
	text-decoration: underline;
	text-decoration-color: var(--theme-link-decoration);
	text-underline-offset: 0.18em;
}

.woocommerce-terms-and-conditions-wrapper .form-row {
	margin: 0;
}

#place_order {
	inline-size: 100%;
	min-block-size: 3.75rem;
}

/* Express-Checkout-Bereich (Stripe) */
#wc-stripe-express-checkout-element {
	margin-block-end: var(--space-4);
}

.wc-stripe-express-checkout-separator,
#wc-stripe-express-checkout-button-separator {
	color: var(--theme-text-muted);
	font-size: var(--font-size-small);
	text-align: center;
}

/* Blockierte Zustände während AJAX-Updates */
.blockUI.blockOverlay {
	background: rgb(255 255 255 / 0.6) !important; /* überschreibt Inline-Style von blockUI */
}

@media (max-width: 64em) {
	form.woocommerce-checkout {
		grid-template-areas:
			"notices"
			"details"
			"heading"
			"review";
		grid-template-columns: 1fr;
	}

	#order_review_heading {
		margin-block-start: var(--space-10);
	}

	#order_review {
		position: static;
	}
}

@media (max-width: 48.75em) {
	.woocommerce form .form-row.form-row-first,
	.woocommerce form .form-row.form-row-last {
		float: none;
		inline-size: 100%;
	}

	#order_review {
		margin-inline: calc(-1 * var(--gutter));
		padding: var(--space-6) var(--gutter);
		border-radius: 0;
	}
}

/* Bestellbestätigung */
.woocommerce-order {
	display: grid;
	gap: var(--space-8);
}

.woocommerce-thankyou-order-received {
	font-family: var(--font-family-display);
	font-size: var(--font-size-title-sm);
	line-height: var(--line-height-title-sm);
}

.woocommerce-order-overview {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-order-overview li {
	background: var(--theme-bg-muted);
	border-radius: var(--radius-lg);
	color: var(--theme-text-muted);
	font-size: var(--font-size-small);
	padding: var(--space-4) var(--space-5);
}

.woocommerce-order-overview li strong {
	color: var(--theme-text);
	display: block;
	font-size: var(--font-size-body);
	margin-block-start: var(--space-1);
}

.woocommerce-order-details__title,
.woocommerce-column__title {
	font-size: var(--font-size-title-sm);
	margin-block-end: var(--space-5);
}

.woocommerce-customer-details address {
	font-style: normal;
	line-height: var(--line-height-body);
}

/* Germanized: EU-Hinweis „Gesetzliche Gewährleistung“ (Link-Variante) vor den Rechtstexten */
.wc-gzd-legal-guarantee-checkout {
	font-size: var(--font-size-small);
	line-height: var(--line-height-small);
	margin-block-end: var(--space-4);
}

/*
 * Germanized: Produktzeile in der Bestellübersicht (Vorschaubild + Name +
 * Menge, darunter Lieferzeit). Bild und Name immer nebeneinander – sonst
 * rutscht der Name auf schmalen Bildschirmen unter das Bild und der Preis
 * steht allein daneben.
 */
.wc-gzd-cart-item-name-wrapper {
	align-items: start;
	display: grid;
	gap: 0 var(--space-3);
	grid-template-columns: 3rem minmax(0, 1fr);
}

.wc-gzd-cart-item-name-wrapper .wc-gzd-cart-item-thumbnail {
	grid-row: span 2;
}

.wc-gzd-cart-item-name-wrapper .wc-gzd-cart-item-thumbnail img {
	border-radius: var(--radius-md);
	inline-size: 3rem;
}

.woocommerce-checkout-review-order-table .product-name .wc-gzd-cart-info {
	color: var(--theme-text-muted);
	font-size: var(--font-size-small);
	line-height: var(--line-height-small);
	margin: var(--space-1) 0 0 calc(3rem + var(--space-3));
}

/*
 * Germanized-Rechtscheckbox: Pflichtstern untrennbar am Textende (Germanized
 * setzt ein normales Leerzeichen davor – der Stern brach allein in die
 * nächste Zeile). Screenreader-Text „Erforderlich“ bleibt erhalten.
 */
.checkbox-legal .required {
	display: none;
}

.checkbox-legal .woocommerce-gzd-legal-checkbox-text::after {
	color: var(--theme-input-error);
	content: "\00a0*";
	font-weight: var(--font-weight-medium);
}