/*------------------------------------------------------------------------
 Cart and checkout redesign for Eprom PCE Child.

 Loaded by functions.php on is_cart() || is_checkout() only, so it cannot
 collide with the shop styles in style.css or the product page styles in
 single-product.css. Same design language as those: white cards on the
 page ground, 14px radius, hairline #ececec rules, 8px form controls and
 the flat #d03f22 accent that single-product.css settled on for contrast.

 What it replaces (the parent theme is a 2013 dark-skin theme with a
 light skin painted over it, and neither was revisited for WooCommerce
 10):

   - table.shop_table drew 1px #333 and 4px double rules meant for a dark
     background, with uppercase 16px headers.
   - Form fields were 38px #e1e1e1 boxes with square corners, and the
     select2 country field only 28px tall next to them.
   - Every button carried the theme's orange bevel gradient, except
     .button.alt - "Weiter zur Kasse" and "Kostenpflichtig bestellen" -
     which came out flat #999 grey, i.e. the two most important buttons of
     the shop looked disabled.
   - #payment div.payment_box was a dark #666 panel with white text
     dropped into an otherwise light page.
   - The checkout was one 940px column: billing and shipping side by side
     at 48%, order review underneath.

 Deliberately NOT touched: the order of the blocks inside #order_review.
 Germanized arranges payment / summary / legal checkbox / button so that
 the order summary sits immediately above "Kostenpflichtig bestellen",
 which is what Section 312j BGB (Button-Loesung) asks for. Reordering it
 visually with flex order would put that at risk for a cosmetic gain.
 ------------------------------------------------------------------------*/


/* ----------------------------------------------------------------------
	Shared: notices

	The parent's 2013 notice palette (#bde5f8 / #dff2bf fills with a full
	1px border) is replaced by a tinted panel with an accent edge. Scoped
	to the two body classes this file is loaded for; the same treatment
	would suit the notices on the account pages, but that belongs in
	site-chrome.css, not here.
/* ---------------------------------------------------------------------- */

.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-info,
.woocommerce-cart .woocommerce-error,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-error {
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	border: 0;
	border-left: 3px solid;
	border-radius: 8px;
	padding: 15px 18px;
	margin-bottom: 24px;
}

.woocommerce-cart .woocommerce-message,
.woocommerce-checkout .woocommerce-message {
	background-color: #eef6ed;
	border-left-color: #2e7d32;
	color: #1e4620;
}

.woocommerce-cart .woocommerce-info,
.woocommerce-checkout .woocommerce-info {
	background-color: #eef3f9;
	border-left-color: #1565c0;
	color: #14395c;
}

.woocommerce-cart .woocommerce-error,
.woocommerce-checkout .woocommerce-error {
	background-color: #fbeceb;
	border-left-color: #c62828;
	color: #7a1c1c;
}

.woocommerce-cart .woocommerce-message a,
.woocommerce-cart .woocommerce-info a,
.woocommerce-checkout .woocommerce-message a,
.woocommerce-checkout .woocommerce-info a {
	font-weight: 600;
}

/* Error lists ("Bitte fuellen Sie ... aus") keep their bullets off. */
.woocommerce-cart .woocommerce-error li,
.woocommerce-checkout .woocommerce-error li {
	margin: 0;
	padding: 0;
	background: none;
}


/* ----------------------------------------------------------------------
	Shared: buttons

	Two levels only. Primary is the flat accent fill; secondary is a white
	ghost button. Everything the parent paints with its bevel gradient
	(.button, input[type=submit], button) is reset here.

	The colour !important is not decoration: light.css sets
	`input[type="submit"], button, .btn { color: #fff !important }`, so a
	<button> cannot be given dark text without matching it. Anchors
	(a.button) are unaffected and need no !important.
/* ---------------------------------------------------------------------- */

.woocommerce-cart .woocommerce a.button,
.woocommerce-cart .woocommerce button.button,
.woocommerce-cart .woocommerce input.button,
.woocommerce-checkout .woocommerce a.button,
.woocommerce-checkout .woocommerce button.button,
.woocommerce-checkout .woocommerce input.button,
.woocommerce-checkout #place_order {
	display: inline-block;
	height: 46px;
	line-height: 44px;
	padding: 0 22px;
	margin: 0;
	background: #fff;
	border: 1px solid #d5d5d5;
	border-radius: 8px;
	color: #1a1a1a !important;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	text-shadow: none;
	box-shadow: none;
	transition: background .15s ease-in-out, border-color .15s ease-in-out;
}

.woocommerce-cart .woocommerce a.button:hover,
.woocommerce-cart .woocommerce button.button:hover,
.woocommerce-cart .woocommerce input.button:hover,
.woocommerce-checkout .woocommerce a.button:hover,
.woocommerce-checkout .woocommerce button.button:hover,
.woocommerce-checkout .woocommerce input.button:hover {
	background: #f5f5f5;
	border-color: #b5b5b5;
	color: #1a1a1a !important;
}

/* The parent nudges buttons down 1px on :active; with flat buttons that
   reads as a glitch rather than a press. */
.woocommerce-cart .woocommerce .button:active,
.woocommerce-checkout .woocommerce .button:active {
	top: 0;
}

.woocommerce-cart .woocommerce .button:focus-visible,
.woocommerce-checkout .woocommerce .button:focus-visible,
.woocommerce-checkout #place_order:focus-visible {
	outline: 2px solid #1a1a1a;
	outline-offset: 2px;
}

/* Primary: the one action that carries the page forward. */
.woocommerce-cart .woocommerce a.checkout-button,
.woocommerce-checkout #place_order {
	background: #d03f22;
	border-color: #d03f22;
	color: #fff !important;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .2px;
}

.woocommerce-cart .woocommerce a.checkout-button:hover,
.woocommerce-checkout #place_order:hover {
	background: #b3351b;
	border-color: #b3351b;
	color: #fff !important;
}

.woocommerce-cart .woocommerce button.button:disabled,
.woocommerce-cart .woocommerce button.button:disabled:hover {
	background: #fff;
	border-color: #e5e5e5;
	color: #a5a5a5 !important;
	cursor: default;
}

/* "Warenkorb anzeigen" inside the added-to-cart message. The extra class
   in the selector is to outrank the shared button rule above, which is
   itself three classes deep. */
.woocommerce-cart .woocommerce .woocommerce-message a.button {
	float: right;
	margin-left: 16px;
	height: 36px;
	line-height: 34px;
	padding: 0 16px;
	font-size: 13px;
}


/* ----------------------------------------------------------------------
	Shared: form controls

	light.css styles every input/select/textarea globally as a 38px
	#e1e1e1 box with square corners. Cart and checkout are the only pages
	of the shop that are mostly form, so they get the 46px control the
	product page already uses for the quantity field.
/* ---------------------------------------------------------------------- */

.woocommerce-cart .woocommerce input.input-text,
.woocommerce-checkout .woocommerce input.input-text,
.woocommerce-checkout .woocommerce select,
.woocommerce-checkout .woocommerce textarea {
	box-sizing: border-box;
	width: 100%;
	height: 46px;
	padding: 0 14px;
	background-color: #fff;
	border: 1px solid #d5d5d5;
	border-radius: 8px;
	color: #1a1a1a;
	font-family: inherit;
	font-size: 15px;
	line-height: 44px;
}

.woocommerce-checkout .woocommerce textarea {
	height: auto;
	min-height: 96px;
	padding: 12px 14px;
	line-height: 1.6;
	resize: vertical;
}

.woocommerce-cart .woocommerce input.input-text:focus,
.woocommerce-checkout .woocommerce input.input-text:focus,
.woocommerce-checkout .woocommerce select:focus,
.woocommerce-checkout .woocommerce textarea:focus {
	border-color: #fa4c29;
	outline: none;
	box-shadow: 0 0 0 3px rgba(250, 76, 41, .15);
}

.woocommerce-checkout .woocommerce ::placeholder {
	color: #9a9a9a;
	opacity: 1;
}


/* ======================================================================
	CART
   ====================================================================== */

/* ----------------------------------------------------------------------
	Items card

	The table keeps its markup and its semantics; only the 2013 rules and
	uppercase headers go. Full container width, because six columns and a
	product title like "A Tribute to NDW - Neue Deutsche Welle (Vol. 1 -
	Hubert Kah)" do not fit a narrow column at 940px.
/* ---------------------------------------------------------------------- */

.woocommerce-cart .woocommerce-cart-form {
	background: #fff;
	border-radius: 14px;
	padding: 6px 26px 20px;
	margin-bottom: 26px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 10px 30px rgba(0, 0, 0, .07);
}

.woocommerce-cart table.cart {
	border-collapse: collapse;
	margin: 0;
}

.woocommerce-cart table.cart th,
.woocommerce-cart table.cart td {
	background: transparent;
	border: 0;
	border-bottom: 1px solid #f0f0f0;
	vertical-align: middle;
}

.woocommerce-cart table.cart thead th {
	padding: 16px 12px;
	border-bottom: 1px solid #ececec;
	color: #6f6f6f;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.woocommerce-cart table.cart td {
	padding: 18px 12px;
}

.woocommerce-cart table.cart tbody tr:last-child td {
	border-bottom: 0;
}

/* --- columns --- */

.woocommerce-cart table.cart .product-remove {
	width: 40px;
	padding-left: 0;
	padding-right: 0;
	text-align: center;
}

.woocommerce-cart table.cart a.remove {
	display: inline-block;
	width: 26px;
	height: 26px;
	line-height: 24px;
	font-size: 20px;
	font-weight: 400;
	color: #9a9a9a;
	border: 1px solid transparent;
	border-radius: 50%;
	text-align: center;
	transition: background .15s ease-in-out, color .15s ease-in-out;
}

.woocommerce-cart table.cart a.remove:hover {
	background: #d03f22;
	border-color: #d03f22;
	color: #fff;
}

.woocommerce-cart table.cart .product-thumbnail {
	width: 92px;
	padding-left: 4px;
}

.woocommerce-cart table.cart .product-thumbnail img {
	display: block;
	width: 76px;
	height: auto;
	border-radius: 8px;
	background: #f4f4f4;
}

.woocommerce-cart table.cart td.product-name a {
	color: #1a1a1a;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
}

.woocommerce-cart table.cart td.product-name a:hover {
	color: #d03f22;
}

/* Germanized delivery time under the title. */
.woocommerce-cart table.cart td.product-name .wc-gzd-cart-info {
	margin: 5px 0 0;
	color: #6f6f6f;
	font-size: 12px;
	line-height: 1.4;
}

.woocommerce-cart table.cart .product-price,
.woocommerce-cart table.cart .product-subtotal {
	width: 110px;
	text-align: right;
	font-size: 15px;
	color: #4a4a4a;
	white-space: nowrap;
}

.woocommerce-cart table.cart .product-subtotal {
	color: #1a1a1a;
	font-weight: 700;
}

.woocommerce-cart table.cart .product-quantity {
	width: 104px;
	text-align: center;
}

/* .quantity carries top:5px and a 20px right padding reserved for the
   plus/minus buttons the theme's JS no longer renders. */
.woocommerce-cart table.cart td.product-quantity .quantity {
	float: none;
	display: inline-block;
	top: 0;
	margin: 0;
	padding: 0;
	overflow: visible;
}

.woocommerce-cart table.cart .quantity input.qty {
	box-sizing: border-box;
	float: none;
	width: 68px;
	height: 44px;
	padding: 0;
	background: #fff;
	border: 1px solid #d5d5d5;
	border-radius: 8px;
	color: #1a1a1a;
	font-size: 15px;
	font-weight: 400;
	text-align: center;
}

.woocommerce-cart table.cart .quantity input.qty:focus {
	border-color: #fa4c29;
	outline: none;
	box-shadow: 0 0 0 3px rgba(250, 76, 41, .15);
}

/* --- coupon / update row --- */

.woocommerce-cart table.cart td.actions {
	padding: 20px 12px 8px;
	border-bottom: 0;
	text-align: left;
}

.woocommerce-cart table.cart td.actions:after {
	content: "";
	display: block;
	clear: both;
}

.woocommerce-cart table.cart td.actions .coupon {
	float: left;
	display: flex;
	gap: 10px;
}

.woocommerce-cart table.cart td.actions .coupon .input-text {
	box-sizing: border-box;
	float: none;
	width: 190px;
	margin: 0;
}

.woocommerce-cart table.cart td.actions button[name="update_cart"] {
	float: right;
}


/* ----------------------------------------------------------------------
	Totals card

	Right-hand column under the items. Cross-sells, when a product has
	any, take the space beside it rather than being pushed below.
/* ---------------------------------------------------------------------- */

.woocommerce-cart .cart-collaterals {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
	gap: 30px;
	align-items: start;
	padding-top: 0;
}

.woocommerce-cart .cart-collaterals .cross-sells {
	grid-column: 1;
	grid-row: 1;
	float: none;
	width: auto;
}

.woocommerce-cart .cart-collaterals .cart_totals {
	grid-column: 2;
	grid-row: 1;
	float: none;
	width: auto;
	background: #fff;
	border-radius: 14px;
	padding: 22px 24px 24px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 10px 30px rgba(0, 0, 0, .07);
}

.woocommerce-cart .cart_totals > h2 {
	margin: 0 0 14px;
	padding: 0;
	color: #1a1a1a;
	font-size: 18px;
	font-weight: 700;
	text-transform: none;
}

.woocommerce-cart .cart_totals table {
	border-collapse: collapse;
	width: 100%;
	margin: 0 0 18px;
}

.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
	width: auto;
	padding: 11px 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid #f0f0f0;
	font-size: 14px;
	line-height: 1.5;
	vertical-align: top;
}

.woocommerce-cart .cart_totals table th {
	color: #6f6f6f;
	font-weight: 400;
	text-align: left;
	text-transform: none;
	white-space: nowrap;
	padding-right: 16px;
}

.woocommerce-cart .cart_totals table td {
	color: #1a1a1a;
	text-align: right;
}

.woocommerce-cart .cart_totals table tr.order-total th,
.woocommerce-cart .cart_totals table tr.order-total td {
	padding-top: 14px;
	border-bottom: 0;
	color: #1a1a1a;
	font-size: 20px;
	font-weight: 700;
}

.woocommerce-cart .cart_totals table tr.order-total th {
	font-size: 15px;
	font-weight: 700;
}

/* "(inkl. 1,60 EUR Mehrwertsteuer)" - its own line, not a tail on the sum. */
.woocommerce-cart .cart_totals table tr.order-total .includes_tax {
	display: block;
	margin-top: 3px;
	color: #6f6f6f;
	font-size: 12px;
	font-weight: 400;
}

/* The separate Germanized VAT row repeats what the line above already
   says, so it is the quiet one of the two. */
.woocommerce-cart .cart_totals table tr.order-tax th,
.woocommerce-cart .cart_totals table tr.order-tax td {
	padding-top: 4px;
	border-bottom: 0;
	color: #6f6f6f;
	font-size: 12px;
	font-weight: 400;
}

.woocommerce-cart .cart_totals table small {
	display: block;
	color: #6f6f6f;
}

.woocommerce-cart .cart_totals .discount td,
.woocommerce-cart .cart_totals .discount th {
	color: #1e7e34;
}

/* --- shipping choices --- */

.woocommerce-cart .cart_totals ul#shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: right;
}

.woocommerce-cart .cart_totals ul#shipping_method li {
	margin: 0 0 4px;
	padding: 0;
	background: none;
	list-style: none;
	line-height: 1.5;
}

.woocommerce-cart .cart_totals ul#shipping_method li:last-child {
	margin-bottom: 0;
}

.woocommerce-cart .cart_totals ul#shipping_method label {
	display: inline;
	color: #1a1a1a;
	font-size: 14px;
	font-weight: 400;
}

.woocommerce-cart .cart_totals ul#shipping_method .amount {
	font-weight: 400;
}

.woocommerce-cart .cart_totals .woocommerce-shipping-destination {
	margin: 6px 0 0;
	color: #6f6f6f;
	font-size: 12px;
	line-height: 1.45;
}

.woocommerce-cart .cart_totals .shipping-calculator-button {
	color: #6f6f6f;
	font-size: 12px;
	text-decoration: underline;
}

/* --- the button --- */

.woocommerce-cart .wc-proceed-to-checkout {
	margin: 0;
	padding: 0;
}

.woocommerce-cart .cart-collaterals .cart_totals a.checkout-button {
	display: block;
	width: 100%;
	box-sizing: border-box;
	height: 52px;
	line-height: 50px;
	padding: 0;
	font-size: 16px;
	text-align: center;
}


/* ----------------------------------------------------------------------
	Empty cart

	The message and the "Zurück zum Shop" button are siblings, so the card
	is drawn across the two of them: this half rounds its top corners, the
	button half below rounds its bottom ones.

	.cart-empty is matched on the class alone rather than as p.cart-empty:
	current WooCommerce renders it as a div (and gives it .woocommerce-info,
	which would otherwise paint a blue notice panel inside the white card),
	while older versions used a paragraph.
/* ---------------------------------------------------------------------- */

.woocommerce-cart .wc-empty-cart-message,
.woocommerce-cart .cart-empty {
	margin: 0;
	background: #fff;
	border: 0;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 10px 30px rgba(0, 0, 0, .07);
}

.woocommerce-cart .wc-empty-cart-message {
	padding: 44px 26px 10px;
	border-radius: 14px 14px 0 0;
	text-align: center;
}

.woocommerce-cart .wc-empty-cart-message .cart-empty {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: #1a1a1a;
	font-size: 17px;
	font-weight: 600;
}

/* Standalone (older WooCommerce), with no wrapper to draw the card. */
.woocommerce-cart > .woocommerce > .cart-empty,
.woocommerce-cart .woocommerce > .cart-empty {
	padding: 44px 26px 10px;
	border: 0;
	border-radius: 14px 14px 0 0;
	color: #1a1a1a;
	font-size: 17px;
	font-weight: 600;
	text-align: center;
}

.woocommerce-cart p.return-to-shop {
	margin: 0 0 40px;
	padding: 22px 26px 44px;
	background: #fff;
	border-radius: 0 0 14px 14px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .07);
	text-align: center;
}

.woocommerce-cart p.return-to-shop a.button {
	background: #d03f22;
	border-color: #d03f22;
	color: #fff !important;
	font-size: 15px;
	font-weight: 700;
}

.woocommerce-cart p.return-to-shop a.button:hover {
	background: #b3351b;
	border-color: #b3351b;
	color: #fff !important;
}


/* ======================================================================
	CHECKOUT
   ====================================================================== */

/* ----------------------------------------------------------------------
	Layout

	form.checkout has exactly two children on this install - the address
	block and #order_review (Germanized moves the "Deine Bestellung"
	heading inside the latter). Two columns instead of one, so the summary
	stays visible next to the fields rather than a screen below them.
/* ---------------------------------------------------------------------- */

.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
	gap: 30px;
	align-items: start;
}

.woocommerce-checkout form.checkout > #customer_details {
	grid-column: 1;
	margin-bottom: 0;
}

.woocommerce-checkout form.checkout > #order_review,
.woocommerce-checkout form.checkout > #order_review_heading {
	grid-column: 2;
}

/* Billing and shipping stack in the left column instead of sitting side
   by side at 48% each, which would leave ~250px per address field. */
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
	float: none;
	width: 100%;
}

.woocommerce-checkout #customer_details .col-2 {
	margin-top: 22px;
}

.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields {
	background: #fff;
	border-radius: 14px;
	padding: 24px 26px 12px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 10px 30px rgba(0, 0, 0, .07);
}

.woocommerce-checkout .woocommerce-additional-fields {
	margin-top: 22px;
	padding-bottom: 20px;
}

.woocommerce-checkout #customer_details h3,
.woocommerce-checkout .woocommerce-additional-fields h3 {
	float: none;
	clear: both;
	margin: 0 0 18px;
	padding: 0;
	color: #1a1a1a;
	font-size: 18px;
	font-weight: 700;
	text-transform: none;
}

/* The shipping heading is the label of a checkbox, so it must not look
   like a heading you cannot click. */
.woocommerce-checkout h3#ship-to-different-address {
	margin-bottom: 0;
	font-size: 15px;
	font-weight: 600;
}

.woocommerce-checkout h3#ship-to-different-address label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	cursor: pointer;
	font-weight: 600;
}

.woocommerce-checkout .shipping_address {
	padding-top: 20px;
}


/* ----------------------------------------------------------------------
	Address fields

	form .form-row-first/-last are 47% floats and .form-row-wide a 100%
	float. Grid instead, so a row that WooCommerce hides (billing_state on
	DE) collapses cleanly and the pairs stay aligned.
/* ---------------------------------------------------------------------- */

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 18px;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row {
	float: none;
	width: auto;
	margin: 0 0 16px;
	padding: 0;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-wide,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-wide {
	grid-column: 1 / -1;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-first,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-first {
	grid-column: 1;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-last,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-last {
	grid-column: 2;
}

.woocommerce-checkout .form-row label {
	display: block;
	margin: 0 0 6px;
	color: #444;
	font-size: 13px;
	font-weight: 600;
}

.woocommerce-checkout .form-row label .optional {
	color: #767676;
	font-weight: 400;
}

.woocommerce-checkout .form-row .required {
	color: #d03f22;
	border: 0;
	text-decoration: none;
}

/* WooCommerce marks validated fields with a background image at 95%
   center, which lands on top of the 14px padding as a stray tick. */
.woocommerce-checkout .form-row.woocommerce-validated input.input-text,
.woocommerce-checkout .form-row.woocommerce-invalid input.input-text {
	background-image: none;
}

.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout .form-row.woocommerce-invalid select,
.woocommerce-checkout .form-row.woocommerce-invalid .select2-selection {
	border-color: #d03f22;
}

.woocommerce-checkout .woocommerce-additional-fields textarea {
	min-height: 88px;
}

/* --- select2 (country) ---

   The plugin's own stylesheet builds a 28px control, which sat half the
   height of the inputs around it. */

.woocommerce-checkout .select2-container .select2-selection--single {
	height: 46px;
	background: #fff;
	border: 1px solid #d5d5d5;
	border-radius: 8px;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	height: 44px;
	padding: 0 14px;
	color: #1a1a1a;
	font-size: 15px;
	line-height: 44px;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 0;
	right: 8px;
	height: 44px;
}

.woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single,
.woocommerce-checkout .select2-container--default.select2-container--focus .select2-selection--single {
	border-color: #fa4c29;
}

/* Rendered in a body-level container, so it cannot be scoped by body
   class the way everything else in this file is. */
.select2-dropdown {
	border-color: #d5d5d5;
	border-radius: 8px;
	overflow: hidden;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: #d03f22;
}


/* ----------------------------------------------------------------------
	Coupon and login forms above the checkout
/* ---------------------------------------------------------------------- */

.woocommerce-checkout form.login,
.woocommerce-checkout form.checkout_coupon,
.woocommerce-checkout form.register {
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 14px;
	padding: 22px 24px;
	margin: 0 0 24px;
}

.woocommerce-checkout form.checkout_coupon .form-row {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

.woocommerce-checkout form.checkout_coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.woocommerce-checkout form.checkout_coupon .form-row-first {
	flex: 1 1 220px;
}

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


/* ----------------------------------------------------------------------
	Order review

	One card holding, in Germanized's order: payment choice, the summary
	heading, the legal checkboxes, the order table and the submit button.
/* ---------------------------------------------------------------------- */

.woocommerce-checkout #order_review_heading {
	margin: 0 0 14px;
	color: #1a1a1a;
	font-size: 18px;
	font-weight: 700;
	text-transform: none;
}

.woocommerce-checkout form.checkout > #order_review {
	background: #fff;
	border: 0;
	border-radius: 14px;
	padding: 22px 24px 24px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 10px 30px rgba(0, 0, 0, .07);
}

.woocommerce-checkout #order_review > h3 {
	margin: 0 0 14px;
	color: #1a1a1a;
	font-size: 18px;
	font-weight: 700;
	text-transform: none;
}

.woocommerce-checkout #order_review > h3#order_review_heading {
	margin-top: 24px;
	padding-top: 22px;
	border-top: 1px solid #ececec;
}

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

.woocommerce-checkout #payment {
	background: transparent;
	border: 0;
}

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

/*
 * The radio is a sibling of its label, not a child, so the row is laid
 * out on the li: radio and label side by side, the description panel
 * wrapping onto its own line underneath.
 */
.woocommerce-checkout #payment ul.payment_methods li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 10px;
	margin: 0 0 8px;
	padding: 13px 16px;
	background: none;
	border: 1px solid #e5e5e5;
	border-radius: 10px;
	line-height: 1.5;
	list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li:last-child {
	margin-bottom: 0;
}

.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
	flex: 0 0 auto;
	float: none;
	width: 18px;
	height: 18px;
	min-width: 0;
	margin: 0;
	padding: 0;
	background: #fff;
	border: 0;
	accent-color: #d03f22;
	cursor: pointer;
}

.woocommerce-checkout #payment ul.payment_methods li > label {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	color: #1a1a1a;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.woocommerce-checkout #payment ul.payment_methods li > label img {
	max-height: 22px;
	width: auto;
	margin: 0;
	vertical-align: middle;
}

/* Enhancement only - the checked radio already carries the state, this
   just makes the whole row read as selected. */
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) {
	border-color: #1a1a1a;
	background: #fafafa;
}

.woocommerce-checkout #payment div.payment_box {
	position: static;
	flex: 0 0 100%;
	box-sizing: border-box;
	width: auto;
	margin: 8px 0 0;
	padding: 0 0 0 28px;
	background: transparent;
	border-radius: 0;
	color: #4a4a4a;
	font-size: 13px;
	line-height: 1.55;
}

.woocommerce-checkout #payment div.payment_box p {
	margin: 0;
}

/* The parent draws a pointer above the dark panel; there is no panel to
   point at any more. */
.woocommerce-checkout #payment div.payment_box:after {
	display: none;
}

/* --- legal checkboxes (Germanized) --- */

.woocommerce-checkout .wc-gzd-checkbox-placeholder .form-row,
.woocommerce-checkout p.checkout-legal,
.woocommerce-checkout p.legal {
	margin: 0 0 12px;
	padding: 0;
}

/*
 * Indent rather than flex: the label wraps the checkbox, the consent
 * sentence, a required asterisk and a screen-reader span, and as flex
 * items the last two would be flung to the end of the first line.
 */
/*
 * #order_review is in the selector because Germanized's layout-styles.css
 * carries `#order_review .wc-gzd-checkbox-placeholder p.form-row label
 * { display: inline }`, and an id in the selector outranks any number of
 * classes however late this file prints. Left inline, the padding-left
 * below would indent the first line only and the checkbox would sit on
 * top of the second.
 */
.woocommerce-checkout #order_review .wc-gzd-checkbox-placeholder label.checkbox,
.woocommerce-checkout .wc-gzd-checkbox-placeholder label.checkbox,
.woocommerce-checkout p.legal label {
	display: block;
	position: relative;
	margin: 0;
	padding-left: 27px;
	color: #4a4a4a;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.55;
	cursor: pointer;
}

.woocommerce-checkout .wc-gzd-checkbox-placeholder input.input-checkbox,
.woocommerce-checkout p.legal input.input-checkbox {
	position: absolute;
	top: 2px;
	left: 0;
	width: 17px;
	height: 17px;
	min-width: 0;
	margin: 0;
	padding: 0;
	background: #fff;
	border: 0;
	accent-color: #d03f22;
	cursor: pointer;
}

.woocommerce-checkout .woocommerce-gzd-legal-checkbox-text a {
	color: #4a4a4a;
	text-decoration: underline;
}

.woocommerce-checkout .woocommerce-gzd-legal-checkbox-text a:hover {
	color: #d03f22;
}

/* --- order table --- */

.woocommerce-checkout table.woocommerce-checkout-review-order-table {
	border-collapse: collapse;
	width: 100%;
	margin: 0 0 18px;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table td {
	padding: 11px 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid #f0f0f0;
	color: #1a1a1a;
	font-size: 14px;
	line-height: 1.5;
	vertical-align: top;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th {
	padding-bottom: 8px;
	border-bottom: 1px solid #ececec;
	color: #6f6f6f;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-total,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot td {
	text-align: right;
	white-space: nowrap;
}

/* Right-aligned but free to wrap: held on one line, the uppercase
   "Zwischensumme" header alone claimed 144px and set the table's minimum
   width above what the card gives it on a phone. */
.woocommerce-checkout table.woocommerce-checkout-review-order-table th.product-total {
	text-align: right;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name {
	padding-right: 14px;
	font-weight: 600;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-quantity {
	color: #6f6f6f;
	font-weight: 400;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table .wc-gzd-cart-info {
	margin: 5px 0 0;
	color: #6f6f6f;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
}

/* table.shop_table sets every tfoot cell bold, which would leave the
   subtotal and shipping lines competing with the total. */
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot td {
	font-weight: 400;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot th {
	color: #6f6f6f;
	text-align: left;
	text-transform: none;
	white-space: nowrap;
	padding-right: 16px;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total td {
	padding-top: 14px;
	border-bottom: 0;
	color: #1a1a1a;
	font-size: 20px;
	font-weight: 700;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total th {
	font-size: 15px;
}

/* Its own line under the sum, and allowed to wrap - inheriting nowrap
   from the tfoot cell, "(inkl. 1,60 EUR Mehrwertsteuer)" alone set the
   table's minimum width and pushed it out of the card on a phone. */
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total .includes_tax {
	display: block;
	margin-top: 3px;
	color: #6f6f6f;
	font-size: 12px;
	font-weight: 400;
	white-space: normal;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-tax th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-tax td {
	padding-top: 4px;
	border-bottom: 0;
	color: #6f6f6f;
	font-size: 12px;
	font-weight: 400;
}

/* The shipping row is the one whose value is a sentence rather than an
   amount ("Versandkostenpauschale: 2,50 EUR"), so it is the one row that
   must be allowed to wrap - held to one line it made the table 310px wide
   inside a 264px card on a phone. */
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.shipping th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.shipping td {
	white-space: normal;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table ul#shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: right;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table ul#shipping_method li {
	margin: 0;
	padding: 0;
	background: none;
	list-style: none;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table ul#shipping_method label {
	display: inline;
	font-size: 14px;
	font-weight: 400;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table ul#shipping_method .amount {
	font-weight: 400;
}

/* --- submit --- */

.woocommerce-checkout .wc-gzd-order-submit,
.woocommerce-checkout .form-row.place-order {
	margin: 0;
	padding: 0;
	text-align: left;
}

.woocommerce-checkout #payment #place_order,
.woocommerce-checkout #place_order {
	box-sizing: border-box;
	float: none;
	display: block;
	width: 100%;
	height: 54px;
	line-height: 52px;
	padding: 0;
	margin: 0;
	font-size: 16px;
	text-align: center;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper,
.woocommerce-checkout #payment .terms {
	padding: 0;
	text-align: left;
}

/* Blocking overlay WooCommerce puts over the review while it refreshes. */
.woocommerce-checkout .blockUI.blockOverlay {
	border-radius: 14px;
}


/* ======================================================================
	SMALL SCREENS
   ====================================================================== */

@media only screen and (max-width: 768px) {

	/* --- cart --- */

	.woocommerce-cart .woocommerce-cart-form {
		padding: 4px 16px 16px;
		border-radius: 10px;
	}

	.woocommerce-cart table.cart,
	.woocommerce-cart table.cart tbody,
	.woocommerce-cart table.cart tr,
	.woocommerce-cart table.cart td {
		display: block;
		width: auto;
	}

	.woocommerce-cart table.cart thead {
		display: none;
	}

	/*
	 * media-queries.css parks the remove, thumbnail and price cells at
	 * left:-999em to squeeze the table onto a phone. The row is rebuilt as
	 * a card here, so they come back.
	 */
	.woocommerce-cart table.cart .product-remove,
	.woocommerce-cart table.cart .product-thumbnail,
	.woocommerce-cart table.cart .product-price {
		position: static;
		left: auto;
	}

	.woocommerce-cart table.cart tr.cart_item {
		position: relative;
		display: grid;
		grid-template-columns: 76px minmax(0, 1fr) auto;
		column-gap: 14px;
		row-gap: 8px;
		align-items: center;
		padding: 18px 0;
		border-bottom: 1px solid #f0f0f0;
	}

	.woocommerce-cart table.cart tr.cart_item:last-child {
		border-bottom: 0;
	}

	.woocommerce-cart table.cart tr.cart_item td {
		padding: 0;
		border-bottom: 0;
	}

	.woocommerce-cart table.cart .product-thumbnail {
		grid-column: 1;
		grid-row: 1 / span 3;
		align-self: start;
		width: auto;
	}

	.woocommerce-cart table.cart .product-thumbnail img {
		width: 76px;
	}

	/*
	 * The title runs to five or six lines inside the ~300px container this
	 * theme leaves on a phone, so it takes the full width beside the
	 * cover and the remove control comes out of the grid into the corner
	 * - as a third column it would have narrowed the title further.
	 */
	.woocommerce-cart table.cart td.product-name {
		grid-column: 2 / -1;
		grid-row: 1;
		align-self: start;
		padding-right: 32px;
	}

	.woocommerce-cart table.cart .product-remove {
		position: absolute;
		top: 16px;
		right: 0;
		width: auto;
	}

	.woocommerce-cart table.cart .product-price {
		grid-column: 2 / -1;
		grid-row: 2;
		width: auto;
		text-align: left;
		font-size: 13px;
		color: #6f6f6f;
	}

	.woocommerce-cart table.cart .product-quantity {
		grid-column: 2;
		grid-row: 3;
		width: auto;
		text-align: left;
	}

	.woocommerce-cart table.cart .product-subtotal {
		grid-column: 3;
		grid-row: 3;
		width: auto;
		text-align: right;
	}

	/* The stacked layout drops the column headers, so the unit price says
	   what it is. WooCommerce writes the label into data-title. */
	.woocommerce-cart table.cart .product-price[data-title]:before {
		content: attr(data-title) ": ";
	}

	.woocommerce-cart table.cart td.actions {
		display: block;
		padding: 18px 0 0;
	}

	/*
	 * Stacked, not side by side: "Gutschein anwenden" needs 159px and the
	 * theme leaves ~268px of row, so a two-up split clipped the label
	 * (.button is white-space:nowrap).
	 */
	.woocommerce-cart table.cart td.actions .coupon {
		float: none;
		display: block;
		margin-bottom: 10px;
	}

	.woocommerce-cart table.cart td.actions .coupon .input-text {
		width: 100%;
		margin: 0 0 10px;
	}

	.woocommerce-cart table.cart td.actions .coupon .button {
		width: 100%;
	}

	.woocommerce-cart table.cart td.actions button[name="update_cart"] {
		float: none;
		width: 100%;
	}

	.woocommerce-cart .cart-collaterals {
		display: block;
	}

	.woocommerce-cart .cart-collaterals .cart_totals {
		padding: 18px 18px 20px;
		border-radius: 10px;
	}

	.woocommerce-cart .cart-collaterals .cross-sells {
		margin-bottom: 26px;
	}

	.woocommerce-cart .woocommerce .woocommerce-message a.button {
		float: none;
		display: block;
		margin: 12px 0 0;
	}

	/* --- checkout --- */

	.woocommerce-checkout form.checkout {
		display: block;
	}

	.woocommerce-checkout .woocommerce-billing-fields,
	.woocommerce-checkout .woocommerce-shipping-fields,
	.woocommerce-checkout .woocommerce-additional-fields,
	.woocommerce-checkout form.checkout > #order_review {
		padding: 18px 18px 8px;
		border-radius: 10px;
	}

	.woocommerce-checkout .woocommerce-additional-fields {
		padding-bottom: 16px;
	}

	.woocommerce-checkout form.checkout > #order_review {
		margin-top: 22px;
		padding-bottom: 20px;
	}

	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
	.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
		display: block;
	}

	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
	.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row {
		width: auto;
		float: none;
	}

	/*
	 * Nothing in the summary is wide enough to be worth a horizontal
	 * overflow at this width. Wrapping alone is not enough: the shipping
	 * label is "Versandkostenpauschale:", one 150px token, which on its
	 * own set the column width and pushed the table out of the card.
	 *
	 * On the values it has to be `anywhere` rather than `break-word`: a
	 * table sizes its columns from their min-content width, and only
	 * `anywhere` counts toward that figure - `break-word` breaks the line
	 * when it is already too late, leaving the column just as wide as
	 * before. `hyphens` puts a hyphen at the break wherever the German
	 * dictionary allows one.
	 */
	.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot th,
	.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot td,
	.woocommerce-cart .cart_totals table th,
	.woocommerce-cart .cart_totals table td {
		white-space: normal;
	}

	.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot td,
	.woocommerce-cart .cart_totals table td {
		overflow-wrap: anywhere;
		hyphens: auto;
	}

	/*
	 * Two things balance the columns, and both are needed.
	 *
	 * `anywhere` stays off the labels: it would drop their min-content to
	 * a couple of characters and let "Zwischensumme" break mid-word. Left
	 * alone their min-content holds the label column at its natural width.
	 *
	 * The 38% is a claim on the rest. Sized purely by content, this column
	 * is shared with the product title in the row above - a 400px string -
	 * so the labels were handed 196 of 264px and the values 68, where the
	 * shipping line came apart across seven fragments. The percentage is a
	 * preference rather than a rule: min-content still wins where it is
	 * larger, which is exactly what should happen here (~126px).
	 *
	 * "Versandkostenpauschale:" measures 167px against a 110px label, so
	 * no split fits it on one line - it has to break, and this leaves
	 * ~138px, enough for the German dictionary to break it at
	 * "Versandkosten-" instead of mid-syllable. The document carries
	 * lang="de", which is what makes hyphens: auto work at all.
	 */
	.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot th,
	.woocommerce-cart .cart_totals table th {
		width: 38%;
	}

	/*
	 * The shipping method is an inline <label>, and an inline box does not
	 * take the cell width as its wrapping constraint - measured live, it
	 * laid out 155px wide inside a 138px cell and spilled left over the
	 * label column, with overflow-wrap and word-break on it, its list and
	 * its cell all having no effect. As a block it wraps inside the cell.
	 *
	 * hyphens: auto above is kept for the browsers that ship a German
	 * dictionary; where one is missing the break falls back to
	 * overflow-wrap, which breaks mid-word but stays inside the card.
	 */
	.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot ul#shipping_method label,
	.woocommerce-cart .cart_totals ul#shipping_method label {
		display: block;
	}

	/*
	 * "ZWISCHENSUMME" is one word, so wrapping cannot help it: at 11px
	 * with letter-spacing it claimed 144px of a 264px card and set the
	 * table's minimum width, pushing the whole summary past the card edge.
	 * Two columns of product and price need no titles on a phone - the
	 * rows say what they are - so the header row goes.
	 */
	.woocommerce-checkout table.woocommerce-checkout-review-order-table thead {
		display: none;
	}

	/* German compounds in a product title are single words too, and a long
	   enough one would do the same thing. */
	.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name {
		overflow-wrap: anywhere;
		hyphens: auto;
	}

	.woocommerce-checkout form.checkout_coupon {
		display: block;
	}

	.woocommerce-checkout form.checkout_coupon .form-row-first {
		margin-bottom: 10px;
	}

	.woocommerce-checkout form.checkout_coupon .button {
		width: 100%;
	}
}