/**
 * Warenkorb und Kasse — Feinschliff (Arthur 2026-09-14: Warenkorb „sieht komisch aus",
 * Kasse „unübersichtlich und vollgestopft").
 *
 * Eigene Datei, geladen nur auf Warenkorb und Kasse (inc/enqueue.php), NACH woocommerce.css.
 * Die Regeln hier verfeinern die dortigen. Struktur und Ablauf bleiben WooCommerce und
 * Germanized (CLAUDE.md): Nichts wird ausgeblendet, was Pflichtangabe ist, und die
 * Reihenfolge in der Kasse bleibt — die Bestellübersicht muss direkt über dem Bestellknopf
 * stehen (Button-Lösung, Audit R13).
 */

/* ---------- Gemeinsam ---------- */

/*
 * Knöpfe sind Knöpfe: kein Unterstrich (der kam von der Link-Regel des Seiteninhalts), und
 * dieselbe Höhe wie Eingabefelder — sonst stehen Feld und Knopf nebeneinander verschieden hoch.
 */
.woocommerce-cart .button,
.woocommerce-checkout .button {
	text-decoration: none;
	min-height: var(--control-h);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Leere Meldungsbereiche nehmen keinen Platz (sonst eine Rasterzeile plus Abstand). */
.woocommerce-notices-wrapper:empty { display: none; }

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

/*
 * Links die Auflistung, gut 70 %, rechts die Summe als eigener Block (Arthur). Die Summe
 * bleibt beim Scrollen stehen, falls die Liste länger ist. Auf dem Handy darunter.
 */
@media (min-width: 981px) {
	.woocommerce-cart .entry-content > .woocommerce {
		display: grid;
		grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
		gap: var(--space-5);
		align-items: start;
	}
	.woocommerce-cart .entry-content > .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
	.woocommerce-cart .cart-collaterals {
		max-width: none;
		margin: 0;
		position: sticky;
		top: calc(var(--kopf-hoehe) + var(--space-3));
	}
}

/* Eine Schriftgröße für die ganze Tabelle; nur der Produktname hebt sich ab — wie im Shop. */
.woocommerce-cart table.shop_table { margin-bottom: 0; }
.woocommerce-cart table.shop_table td { font-size: var(--fs-body); vertical-align: middle; }
.woocommerce-cart table.shop_table th.product-subtotal,
.woocommerce-cart table.shop_table td.product-subtotal { text-align: right; padding-right: 0; }
.woocommerce-cart table.shop_table td.product-name a {
	font-family: var(--serif);
	font-weight: 600;
	font-size: var(--fs-lead);
	border-bottom: 0;
}
/* Lieferzeit von Germanized: Zusatzangabe, deshalb kleiner und leiser als der Name. */
.woocommerce-cart table.shop_table td.product-name .wc-gzd-cart-info {
	display: block;
	font-size: var(--fs-small);
	color: var(--muted);
	margin: var(--space-micro) 0 0;
}
.woocommerce-cart table.shop_table td.product-thumbnail { width: 96px; }
.woocommerce-cart table.shop_table td.product-thumbnail img {
	width: 80px;
	border: 1px solid var(--line-photo);
}
.woocommerce-cart .quantity input.qty { height: var(--control-h); }

/*
 * Zeile unter der Tabelle: Gutschein links (Feld und Knopf gleich hoch), „Warenkorb
 * aktualisieren" rechts. Der ist grau, solange sich nichts geändert hat — WooCommerce
 * schaltet ihn erst frei, wenn eine Menge geändert wird. Deshalb leise statt wie defekt.
 */
.woocommerce-cart table.shop_table td.actions { padding: var(--space-3) 0; border-bottom: 0; }
.woocommerce-cart td.actions .coupon { display: inline-flex; gap: var(--space-1); align-items: stretch; }
.woocommerce-cart td.actions #coupon_code {
	font-family: inherit;
	font-size: var(--fs-body);
	height: var(--control-h);
	width: 14rem;
	padding: 0 var(--space-2);
	background: var(--surface);
	border: 1px solid var(--line-control);
	border-radius: 0;
	color: var(--primary);
}
.woocommerce-cart td.actions button[name="update_cart"] { float: right; }
.woocommerce-cart td.actions button[name="update_cart"]:disabled {
	background: transparent;
	border-color: var(--line-control);
	color: var(--muted);
	opacity: .55;
	cursor: not-allowed;
}

/* Summenblock: eine Karte, ruhig, die Gesamtsumme als einzige Betonung. */
.woocommerce-cart .cart_totals {
	background: var(--surface);
	border: 1px solid var(--line);
	padding: var(--space-4);
}
.woocommerce-cart .cart_totals h2 { font-size: var(--fs-h3); margin-bottom: var(--space-3); }
.woocommerce-cart .cart_totals table.shop_table { margin: 0 0 var(--space-3); }
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
	font-size: var(--fs-body);
	padding: var(--space-1) 0;
	border-bottom: 0;
	vertical-align: top;
}
.woocommerce-cart .cart_totals table.shop_table td { text-align: right; }
.woocommerce-cart .cart_totals tr.order-total th,
.woocommerce-cart .cart_totals tr.order-total td {
	border-top: 1px solid var(--line);
	padding-top: var(--space-2);
	font-weight: 500;
}
.woocommerce-cart .cart_totals tr.order-total strong { font-size: var(--fs-lead); }

/*
 * Versandzeile (seit 2026-09-14 im Warenkorb sichtbar, `live-umzug.md` Schritt 3): Betrag
 * normal, WooCommerces Hinweis „Versandoptionen werden während des Bezahlvorgangs
 * aktualisiert" klein und leise darunter. Die Liste der Versandarten ohne Aufzählungspunkte.
 */
.woocommerce-cart .cart_totals #shipping_method { list-style: none; margin: 0; padding: 0; }
.woocommerce-cart .cart_totals .woocommerce-shipping-totals td p,
.woocommerce-cart .cart_totals .woocommerce-shipping-destination {
	font-size: var(--fs-small);
	color: var(--muted);
	line-height: 1.5;
	margin: var(--space-micro) 0 0;
}
.woocommerce-cart .cart_totals small.includes_tax,
.woocommerce-cart .cart_totals tr.order-tax th,
.woocommerce-cart .cart_totals tr.order-tax td {
	display: block;
	font-size: var(--fs-small);
	color: var(--muted);
	font-weight: 400;
}
.woocommerce-cart .cart_totals tr.order-tax { display: table-row; }
.woocommerce-cart .cart_totals tr.order-tax th,
.woocommerce-cart .cart_totals tr.order-tax td { display: table-cell; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	width: 100%;
	font-size: var(--fs-small);
}

/*
 * Handy: Die Tabelle wird zu Karten je Artikel. WooCommerce schreibt dafür `data-title`
 * an jede Zelle; das passende Stylesheet (woocommerce-smallscreen) ist abgemeldet
 * (inc/woocommerce-hooks.php) — deshalb stehen die Regeln hier.
 */
/*
 * Die Selektoren beginnen mit `.woocommerce-cart .woocommerce-cart-form table…`, damit sie
 * schwerer wiegen als die Tabellenregeln in woocommerce.css und oben in dieser Datei — mit
 * kürzeren Selektoren blieben Zellbreite und Linien vom Desktop stehen, und das Vorschaubild
 * schrumpfte auf 32 px (gesehen 2026-09-14).
 */
@media (max-width: 980px) {
	.woocommerce-cart .woocommerce-cart-form table.shop_table_responsive thead { display: none; }
	.woocommerce-cart .woocommerce-cart-form table.shop_table_responsive tr { display: block; }
	.woocommerce-cart .woocommerce-cart-form table.shop_table_responsive tr.cart_item {
		position: relative;
		padding: var(--space-3) 0;
		border-bottom: 1px solid var(--line);
	}
	.woocommerce-cart .woocommerce-cart-form table.shop_table_responsive td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: var(--space-2);
		width: auto;
		border: 0;
		padding: var(--space-micro) 0;
		text-align: right;
	}
	.woocommerce-cart .woocommerce-cart-form table.shop_table_responsive td[data-title]::before {
		content: attr(data-title);
		font-size: var(--fs-small);
		color: var(--muted);
		text-align: left;
	}
	.woocommerce-cart .woocommerce-cart-form table.shop_table_responsive td.product-thumbnail,
	.woocommerce-cart .woocommerce-cart-form table.shop_table_responsive td.product-name {
		display: block;
		text-align: left;
		padding-right: var(--space-5);
	}
	.woocommerce-cart .woocommerce-cart-form table.shop_table_responsive td.product-thumbnail { margin-bottom: var(--space-1); }
	.woocommerce-cart .woocommerce-cart-form table.shop_table_responsive td.product-thumbnail::before,
	.woocommerce-cart .woocommerce-cart-form table.shop_table_responsive td.product-name::before,
	.woocommerce-cart .woocommerce-cart-form table.shop_table_responsive td.product-remove::before { content: none; }
	.woocommerce-cart .woocommerce-cart-form table.shop_table_responsive td.product-remove {
		position: absolute;
		top: var(--space-3);
		right: 0;
		padding: 0;
	}
	/* Gutschein: Feld und beide Knöpfe untereinander, je volle Breite. */
	.woocommerce-cart .woocommerce-cart-form table.shop_table_responsive td.actions { display: block; text-align: left; }
	.woocommerce-cart td.actions .coupon { display: flex; flex-direction: column; gap: var(--space-1); width: 100%; }
	.woocommerce-cart td.actions #coupon_code { width: 100%; }
	.woocommerce-cart td.actions button[name="update_cart"] { float: none; width: 100%; margin-top: var(--space-1); }
	.woocommerce-cart .cart-collaterals { margin-top: var(--space-4); }
}

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

/*
 * Gutschein und Anmelden stehen **nebeneinander** (Arthur 2026-09-17: „das Gutschein-Angeben
 * sollte links sein … rechts daneben ‚Hier klicken zum Anmelden‘ … sodass es nicht so viel
 * Zeit oder Platz kostet").
 *
 * Vorher zwei dünne Zeilen untereinander, deren Formulare sich über die **volle Breite**
 * aufklappten: Wer sich anmelden wollte, schob die Rechnungsdaten um mehr als 500 px nach
 * unten; beim Gutschein dasselbe noch einmal.
 *
 * WooCommerce hängt alle vier Teile als direkte Kinder von `div.woocommerce` ein, in der
 * Reihenfolge Anmelde-Umschalter → Anmeldeformular → Gutschein-Umschalter → Gutscheinformular
 * (`woocommerce_before_checkout_form`). Ein Raster auf dem Elternteil dreht die Reihenfolge um
 * und hält jedes Formular in **seiner** Spalte — ohne Template-Override, ohne Eingriff ins
 * Markup: CSS vor Hook vor Override (CLAUDE.md).
 */
@media (min-width: 981px) {
	.woocommerce-checkout .entry-content > .woocommerce {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--space-4);
		align-items: start;
	}
	/* Gutschein links, Anmelden rechts — Formular jeweils direkt darunter. */
	.woocommerce-checkout .woocommerce-form-coupon-toggle { grid-column: 1; grid-row: 2; }
	.woocommerce-checkout form.checkout_coupon               { grid-column: 1; grid-row: 3; }
	.woocommerce-checkout .woocommerce-form-login-toggle     { grid-column: 2; grid-row: 2; }
	.woocommerce-checkout form.login                         { grid-column: 2; grid-row: 3; }
	/* Meldungen und die Kasse selbst laufen über beide Spalten. */
	.woocommerce-checkout .entry-content > .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; grid-row: 1; }
	.woocommerce-checkout form.checkout { grid-column: 1 / -1; grid-row: 4; }
}

/*
 * Die Umschalter sind Knöpfe, keine Textzeilen: gleiche Größe, gleiches Gewicht, als Paar
 * lesbar. Der einleitende Satz („Besitzen Sie bereits ein Kundenkonto?") steht als eigene
 * Zeile darüber — WooCommerce liefert ihn im selben Absatz, deshalb der Blocksatz-Umbruch.
 */
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--space-1);
	font-size: var(--fs-small);
	color: var(--muted);
}
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--control-h);
	padding: var(--space-1) var(--space-3);
	border: 1px solid var(--line-control);
	background: var(--surface);
	color: var(--primary);
	font-family: var(--sans);
	font-size: var(--fs-body);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
}
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a:hover,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a:hover {
	border-color: var(--accent-ink);
	color: var(--accent-ink);
}

/* Die aufgeklappten Formulare: eigener Rahmen, damit sie zu ihrem Knopf gehören. */
.woocommerce-checkout form.checkout_coupon,
.woocommerce-checkout form.login {
	margin: var(--space-2) 0 0;
	padding: var(--space-3);
	border: 1px solid var(--line);
	background: var(--surface);
}
.woocommerce-checkout .woocommerce-form-coupon-toggle { margin-bottom: var(--space-4); }

/* Überschriften der Kasse eine Stufe kleiner: Sie gliedern ein Formular, keine Seite. */
.woocommerce-checkout h3 { font-size: var(--fs-h3); margin-bottom: var(--space-3); }

/* „Lieferung an eine andere Adresse?" ist ein Kästchen, keine Überschrift. */
.woocommerce-checkout #ship-to-different-address {
	font-family: var(--sans);
	font-size: var(--fs-body);
	font-weight: 400;
	letter-spacing: 0;
	margin: var(--space-3) 0 var(--space-2);
}
.woocommerce-checkout #ship-to-different-address label {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	cursor: pointer;
}

/*
 * Felder in zwei Spalten, wo sie zusammengehören: Vor- und Nachname, PLZ und Ort. Alles
 * andere über die volle Breite. Spart gut ein Drittel der Formularhöhe.
 */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: var(--space-3);
}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row { grid-column: 1 / -1; }
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-first,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-first,
.woocommerce-checkout #billing_postcode_field,
.woocommerce-checkout #shipping_postcode_field { grid-column: 1; }
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-last,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-last,
.woocommerce-checkout #billing_city_field,
.woocommerce-checkout #shipping_city_field { grid-column: 2; }

/*
 * Rechte Spalte als EIN Block: Zahlart, Zustimmung, Übersicht, Knopf. Die Zahlart hatte
 * vorher einen eigenen Kasten — ein Kasten im Kasten wird es hier nicht.
 */
@media (min-width: 981px) {
	.woocommerce-checkout #order_review {
		background: var(--surface);
		border: 1px solid var(--line);
		padding: var(--space-4);
	}
}
.woocommerce-checkout #order_review #payment {
	background: none;
	border: 0;
	padding: 0;
	margin-bottom: var(--space-3);
}

/*
 * Germanizeds Zustimmungs-Platzhalter für Downloads, Dienstleistungen, Altersprüfung … sind
 * bei diesem Sortiment leer und rissen mit ihrem Abstand eine Lücke vor der Übersicht auf.
 */
.woocommerce-checkout .wc-gzd-checkbox-placeholder:not(:has(*)) { display: none; }

/*
 * EU-Gewährleistungsmitteilung (R8, G6) zwischen den Kästchen und dem Bestellknopf.
 *
 * **Klein, aber über dem Bestellknopf** (Arthur 2026-09-17: „sehr viel kleiner … und auf Klick
 * vergrößern"). Vorher füllte die Abbildung die ganze Spalte: **550 × 809 px**, gemessen auf
 * dem Desktop — ein Klotz, der die Summe von PayPal- und SEPA-Knopf trennte, sodass der
 * Bestellvorgang optisch abriss.
 *
 * **Warum sie nicht unter den Knopf wandert**, obwohl gewünscht: G6 des Arbeitspakets
 * verlangt sie „oberhalb des abschließenden Bestellbuttons, **nicht darunter**" — sie muss
 * vor Abgabe der Vertragserklärung wahrnehmbar sein. 200 px direkt über dem Knopf ist die
 * unterste zulässige Stelle.
 *
 * G10 bleibt gewahrt: nur proportional skaliert, kein Zuschnitt, kein Filter, keine
 * Deckkraft. Das Bild bleibt anklickbar (volle Auflösung), und der Vergrößern-Link steht
 * sichtbar daneben statt darunter.
 */
/*
 * **Unter die Zahlknöpfe** (Arthur 2026-09-17: „ich will das Label unten drunter — egal was
 * irgendwo steht! Die Buttons kommen drüber.").
 *
 * **Bewusste Abweichung von G6.** Das Arbeitspaket verlangt die Mitteilung „oberhalb des
 * abschließenden Bestellbuttons, nicht darunter". Arthur wurde darauf hingewiesen und hat
 * ausdrücklich anders entschieden. Steht so in `TODO.md` unter der R8-Frist — wer das hier
 * zurückdreht, muss vorher mit ihm sprechen, es ist kein Versehen.
 *
 * Technisch: `#order_review` wird zum Flex-Container. Das Label sitzt in
 * `div.form-row.place-order` (zusammen mit dem Bestellknopf), die PayPal- und SEPA-Knöpfe in
 * `div.ppc-button-wrapper` — einem Geschwister davon. Über `order` wandert die Mitteilung
 * ans Ende, ohne dass am Markup von WooCommerce, Germanized oder PayPal etwas geändert wird.
 */
.woocommerce-checkout .gewaehr-mitteilung-kasse {
	margin: var(--space-3) 0 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-1);
}
.woocommerce-checkout .gewaehr-mitteilung-kasse .gewaehr-bild {
	flex: 0 0 auto;
	width: 200px;
	max-width: 100%;
}
/*
 * Die zwei Links stehen UNTER der Abbildung, nicht daneben (Arthur 2026-09-17: „mach die
 * Links unter das Label"). Nebeneinander hingen sie in der Luft, weil die Abbildung nur
 * 200 px breit ist und daneben eine halbe Spalte leer blieb.
 */
.woocommerce-checkout .gewaehr-mitteilung-kasse figcaption {
	margin: 0;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-micro);
	font-size: var(--fs-micro);
}

/*
 * Apple Pay und Google Pay gehören nach rechts, über die Zahlungsart (Arthur 2026-09-17:
 * „das soll aber rechts drüber bei dem Checkout sein").
 *
 * WooPayments hängt den Block an `woocommerce_checkout_before_customer_details` — er steht im
 * Markup also ganz vorn im Formular und landete dadurch links oben über den Rechnungsdaten,
 * quer über die volle Breite. Statt den Haken des Plugins umzubiegen (Hook-Eingriff) wird das
 * Formular hier zum Raster: CSS vor Hook vor Template-Override, so steht es in CLAUDE.md.
 *
 * Zwei Spalten, drei Flächen: Der Express-Block bekommt die rechte obere Fläche, die
 * Rechnungsdaten die linke über beide Zeilen, die Bestellübersicht die rechte untere.
 */
@media (min-width: 981px) {
	.woocommerce-checkout form.checkout {
		display: grid;
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		/*
		 * Die Mitteilung steht **links unten**, unter den Rechnungsdaten (Arthur 2026-09-17:
		 * „wenn das aus ist, hat man links mehr Platz … da kann das Label ein bisschen Platz
		 * gespart"). Seit `woocommerce_ship_to_destination = billing` bleibt der zweite
		 * Adressblock eingeklappt — die linke Spalte endet dadurch deutlich früher als die
		 * rechte, und der freie Platz trägt die Mitteilung, ohne die Seite zu verlängern.
		 */
		grid-template-areas:
			"daten      express"
			"daten      uebersicht"
			"mitteilung uebersicht";
		align-items: start;
		column-gap: var(--space-5);
	}
	.woocommerce-checkout form.checkout > #customer_details { grid-area: daten; }
	.woocommerce-checkout form.checkout > .wcpay-express-checkout-wrapper {
		grid-area: express;
		margin-bottom: var(--space-3);
	}
	/*
	 * Nur `#order_review` — die Überschrift „Ihre Bestellung" ist KEIN Kind des Formulars:
	 * Germanized verschiebt sie mit `wc-gzd-heading-moved` nach innen, in den Block selbst.
	 * Ein Selektor darauf wäre verwaist (G12).
	 */
	.woocommerce-checkout form.checkout > #order_review { grid-area: uebersicht; }

	/*
	 * Die Mitteilung hängt seit 2026-09-17 an `woocommerce_checkout_after_order_review` und
	 * ist damit ein direktes Kind des Formulars — sie braucht eine eigene Rasterfläche,
	 * sonst landet sie irgendwo in der Selbstplatzierung.
	 */
	.woocommerce-checkout form.checkout > .gewaehr-mitteilung-kasse { grid-area: mitteilung; }

	/*
	 * Der „— ODER —"-Trenner gehörte zur alten Stelle über dem Formular. WooPayments setzt ihn
	 * per `style`-Attribut, deshalb reicht `display: none` allein nicht — `!important` ist hier
	 * die Ausnahme, nicht die Regel.
	 */
	.woocommerce-checkout #wcpay-express-checkout-button-separator { display: none !important; }
}

/* Bestellübersicht: dieselbe Ruhe wie im Warenkorb. */
.woocommerce-checkout .woocommerce-checkout-review-order-table { margin: var(--space-3) 0; }
.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td {
	font-size: var(--fs-body);
	padding: var(--space-1) 0;
	vertical-align: top;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table thead th { font-size: var(--fs-micro); }
.woocommerce-checkout .woocommerce-checkout-review-order-table th:last-child,
.woocommerce-checkout .woocommerce-checkout-review-order-table td:last-child { text-align: right; }
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total strong { font-size: var(--fs-lead); }
.woocommerce-checkout .woocommerce-checkout-review-order-table small.includes_tax {
	display: block;
	font-size: var(--fs-small);
	color: var(--muted);
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .wc-gzd-cart-info {
	display: block;
	font-size: var(--fs-small);
	color: var(--muted);
}
.woocommerce-checkout #place_order { width: 100%; }

@media (max-width: 560px) {
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
	.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr; }
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
	.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row,
	.woocommerce-checkout #billing_postcode_field,
	.woocommerce-checkout #shipping_postcode_field,
	.woocommerce-checkout #billing_city_field,
	.woocommerce-checkout #shipping_city_field { grid-column: 1; }
}