/**
 * WooCommerce cart and checkout in Scribigo CI.
 * Scope: body.scribigo-woo-cart / body.scribigo-woo-checkout.
 */

body.scribigo-woo-cart,
body.scribigo-woo-checkout {
	--sgwc-bg: var(--ast-global-color-5, #f7f3ec);
	--sgwc-card: #fffdf8;
	--sgwc-field: #fff;
	--sgwc-fg: var(--ast-global-color-2, #2b2418);
	/* Not --ast-global-color-3: that slot holds #2b2e3c in this palette, a
	   near-black that reads as loud as the value it is supposed to sit behind,
	   which is what turned placeholders and floating captions black. This is the
	   warm grey the chevron below is already drawn in. */
	--sgwc-muted: #74695c;
	--sgwc-primary: var(--ast-global-color-0, #e06a1a);
	--sgwc-primary-dark: color-mix(in srgb, var(--sgwc-primary) 88%, #000);
	--sgwc-border: color-mix(in srgb, var(--sgwc-fg) 14%, #f3eee6);
	--sgwc-border-strong: color-mix(in srgb, var(--sgwc-fg) 22%, #f3eee6);
	--sgwc-radius: 20px;
	--sgwc-input-radius: 12px;
	--sgwc-field-height: 52px;
	--sgwc-shadow: 0 22px 50px -32px color-mix(in srgb, var(--sgwc-fg) 28%, transparent);
	/* Chevron for Select2 and plain selects. The shared control rule below sets
	   `background` with !important to beat Astra, which drops Astra's own arrow
	   image, so both kinds of select paint this one instead. A data URI cannot
	   read the colour variables, hence the literal --sgwc-muted fallback. */
	--sgwc-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2374695c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");

	background:
		radial-gradient(1200px 480px at 50% -10%, color-mix(in srgb, var(--sgwc-primary) 10%, transparent), transparent 70%),
		linear-gradient(180deg, var(--sgwc-bg) 0%, #f3eee6 48%, #efe8dc 100%);
	color: var(--sgwc-fg);
}

/* Sale badge on cart upsells / cross-sells (PHP unhooks the flash; this is fallback). */
body.scribigo-woo-cart span.onsale,
body.scribigo-woo-cart .onsale.circle,
body.scribigo-woo-cart .ast-onsale-card,
body.scribigo-woo-checkout span.onsale,
body.scribigo-woo-checkout .onsale.circle,
body.scribigo-woo-checkout .ast-onsale-card {
	display: none !important;
}

body.scribigo-woo-cart #content,
body.scribigo-woo-cart .site-content,
body.scribigo-woo-cart .ast-woocommerce-container,
body.scribigo-woo-checkout #content,
body.scribigo-woo-checkout .site-content,
body.scribigo-woo-checkout .ast-woocommerce-container {
	background: transparent;
}

/* Cart and checkout sit in a UAGB root container that flexes with
   `align-items: center`, so the Woo wrapper collapses to its content width and
   the cards come out narrow and off-centre. Stretch it back to the column. */
body.scribigo-woo-cart .wp-block-uagb-container,
body.scribigo-woo-checkout .wp-block-uagb-container {
	align-items: stretch;
}

body.scribigo-woo-cart .wp-block-uagb-container > .woocommerce,
body.scribigo-woo-checkout .wp-block-uagb-container > .woocommerce {
	width: 100%;
	max-width: 100%;
}

body.scribigo-woo-cart .entry-title,
body.scribigo-woo-checkout .entry-title,
body.scribigo-woo-cart .woocommerce h2,
body.scribigo-woo-checkout .woocommerce h3 {
	font-family: Outfit, ui-sans-serif, system-ui, sans-serif;
	color: var(--sgwc-fg);
	letter-spacing: -0.02em;
}

body.scribigo-woo-cart .entry-title,
body.scribigo-woo-checkout .entry-title {
	margin-bottom: clamp(20px, 3vw, 34px);
	font-size: clamp(2rem, 1.4rem + 1.8vw, 2.65rem);
	font-weight: 600;
}

body.scribigo-woo-cart .woocommerce a,
body.scribigo-woo-checkout .woocommerce a {
	color: var(--sgwc-primary);
}

body.scribigo-woo-cart .woocommerce a:hover,
body.scribigo-woo-checkout .woocommerce a:hover {
	color: var(--sgwc-primary-dark);
}

/* Shared controls */
body.scribigo-woo-cart .woocommerce input.input-text,
body.scribigo-woo-checkout .woocommerce input.input-text,
body.scribigo-woo-checkout .woocommerce textarea,
body.scribigo-woo-checkout .select2-container .select2-selection--single,
body.scribigo-woo-checkout .woocommerce form .form-row select:not(.select2-hidden-accessible) {
	min-height: var(--sgwc-field-height);
	box-sizing: border-box;
	border: 1px solid var(--sgwc-border-strong) !important;
	border-radius: var(--sgwc-input-radius) !important;
	background: var(--sgwc-field) !important;
	color: var(--sgwc-fg);
	box-shadow: 0 1px 2px color-mix(in srgb, var(--sgwc-fg) 5%, transparent);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Astra's modern input turns every field label into a caption that floats
   inside the control: the label is parked absolutely at opacity 0 and fades in
   on any row that holds a value (`.form-row.ast-animate-input label`), while
   the control trades its 0.9em block padding for 1.45em top / 0.35em bottom to
   clear the caption (astra-addon/addons/woocommerce/assets/css/unminified/
   woo-modern-input.css; the class is set by .../js/unminified/
   woo-common-input.js). Both paddings add up to the same box, so a row keeps
   its height as it fills.

   Scribigo keeps that idiom and lets Astra own the text inputs outright — the
   rules below only restate its two paddings on the controls Astra cannot reach
   cleanly, so every field floats its caption over the same box. That is also
   why --sgwc-field-height is 52px: it is Astra's 0.9em box at this font size
   (2 × 14.4px padding + 20.8px line + 2px border), not a free choice.

   Which rows count as filled is a separate problem for Select2; see
   assets/js/scribigo-woo-checkout.js. */

/* The caption takes over from the placeholder when a row fills, so it carries
   the same muted tone. Astra paints it --ast-global-color-3, a near-black here.

   !important because Astra reaches the label through seven class-level
   components over three elements (`body:not(.cartflows-canvas):not(
   .cartflows-default) .woocommerce form .form-row label:not(.checkbox)…`), and
   matching that from a body-class scope would mean repeating classes purely to
   win a count. The required asterisk keeps its own colour, which Woo sets on
   the nested `abbr`.

   Checkbox and radio labels are excluded exactly as Astra excludes them: it
   never floats those, and they are the only text their row has (the terms and
   Widerruf lines above the order button). */
body.scribigo-woo-checkout .woocommerce form .form-row label:not(.checkbox):not(.radio):not(.woocommerce-form__label-for-checkbox) {
	color: var(--sgwc-muted) !important;
}

body.scribigo-woo-checkout .woocommerce form .form-row input.input-text {
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.3;
}

body.scribigo-woo-checkout .woocommerce textarea,
body.scribigo-woo-checkout .woocommerce form .form-row textarea {
	min-height: 110px;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
}

/* One muted tone for every hint, and `opacity: 1` because Astra only ever
   normalises the placeholder opacity on :focus. */
body.scribigo-woo-checkout .woocommerce form .form-row input.input-text::placeholder,
body.scribigo-woo-checkout .woocommerce form .form-row textarea::placeholder {
	color: var(--sgwc-muted);
	font-weight: 400;
	opacity: 1;
}

body.scribigo-woo-cart .woocommerce input.input-text:focus,
body.scribigo-woo-checkout .woocommerce input.input-text:focus,
body.scribigo-woo-checkout .woocommerce textarea:focus,
body.scribigo-woo-checkout .select2-container--focus .select2-selection--single,
body.scribigo-woo-checkout .select2-container--open .select2-selection--single,
body.scribigo-woo-checkout .woocommerce form .form-row select:not(.select2-hidden-accessible):focus {
	border-color: var(--sgwc-primary) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sgwc-primary) 16%, transparent) !important;
	outline: none;
}

/* Country and state: Select2 replaces the select with divs of its own, sized by
   a fixed 28px height and a matching 28px line-height on the value. Stacked on
   Astra's padding that is what blew the rows up to 76px, so the height is
   released here and the same two paddings as the text inputs draw the box —
   0.9em all round while the control shows its placeholder, 1.45em / 0.35em once
   a value floats the caption. `display: flex` keeps the value centred in
   whichever of the two boxes is current and leaves room for the chevron.

   !important throughout: Astra reaches this node with six class-level
   components over three elements (`body:not(.cartflows-canvas):not(
   .cartflows-default) .woocommerce form .form-row .select2-container--default
   .select2-selection--single`), and matching that from a body-class scope would
   mean repeating classes purely to win a count. */
body.scribigo-woo-checkout .select2-container .select2-selection--single {
	display: flex;
	height: auto !important;
	min-height: var(--sgwc-field-height);
	margin: 0;
	padding: 0.9em 40px 0.9em 0.8em !important;
	background: var(--sgwc-select-arrow) no-repeat right 14px center / 15px 15px var(--sgwc-field) !important;
	align-items: center;
}

body.scribigo-woo-checkout .woocommerce form .form-row.ast-animate-input .select2-container .select2-selection--single {
	padding: 1.45em 40px 0.35em 0.8em !important;
}

body.scribigo-woo-checkout .select2-container .select2-selection--single .select2-selection__rendered {
	flex: 1 1 auto;
	overflow: hidden;
	padding: 0;
	color: var(--sgwc-fg);
	font-size: 1rem;
	line-height: 1.3;
	white-space: nowrap;
	text-overflow: ellipsis;
}

body.scribigo-woo-checkout .select2-container .select2-selection--single .select2-selection__placeholder {
	color: var(--sgwc-muted);
}

/* Select2's own arrow is a bordered triangle that Astra hides and replaces with
   a background image; the shared control rule above overwrites `background`, so
   the chevron comes from --sgwc-select-arrow and this box is dead weight. */
body.scribigo-woo-checkout .select2-container .select2-selection--single .select2-selection__arrow {
	display: none;
}

/* Without Select2 (Woo setting off, or its script not loading) Woo prints the
   plain select, which Astra floats a caption over as well. Its two paddings are
   repeated with the chevron gutter added on the right; !important because
   `:not(.select2-hidden-accessible)` only brings this selector level with
   Astra's, and a tie would leave the gutter to stylesheet order. */
body.scribigo-woo-checkout .woocommerce form .form-row select:not(.select2-hidden-accessible) {
	width: 100%;
	min-height: var(--sgwc-field-height);
	margin: 0;
	padding: 0.9em 40px 0.9em 0.8em !important;
	background: var(--sgwc-select-arrow) no-repeat right 14px center / 15px 15px var(--sgwc-field) !important;
	font-size: 1rem;
	line-height: 1.3;
	-webkit-appearance: none;
	appearance: none;
}

body.scribigo-woo-checkout .woocommerce form .form-row.ast-animate-input select:not(.select2-hidden-accessible) {
	padding: 1.45em 40px 0.35em 0.8em !important;
}

/* Open dropdown: Select2 squares off the corners facing the control, and Astra
   paints the panel and the search field with the orange --ast-border-color
   through `.woocommerce-page .select2-container .select2-dropdown` — which does
   reach this node, because Select2 appends the panel straight to the body that
   carries `.woocommerce-page`. Hence the extra `.select2-container` here. Keep
   the CI radius on both ends and let the panel read as a popover. */
body.scribigo-woo-checkout .select2-container .select2-dropdown {
	overflow: hidden;
	padding: 5px;
	border: 1px solid var(--sgwc-border-strong);
	border-radius: var(--sgwc-input-radius);
	background: var(--sgwc-card);
	box-shadow: 0 18px 38px -26px color-mix(in srgb, var(--sgwc-fg) 42%, transparent);
	color: var(--sgwc-fg);
}

body.scribigo-woo-checkout .select2-container--open .select2-dropdown--below {
	margin-top: 4px;
}

body.scribigo-woo-checkout .select2-container--open .select2-dropdown--above {
	margin-top: -4px;
}

body.scribigo-woo-checkout .select2-container .select2-search--dropdown {
	padding: 0 0 5px;
}

body.scribigo-woo-checkout .select2-container--default .select2-search--dropdown .select2-search__field {
	min-height: 38px;
	box-sizing: border-box;
	padding: 8px 10px;
	border: 1px solid var(--sgwc-border-strong);
	border-radius: 9px;
	background: var(--sgwc-field);
	color: var(--sgwc-fg);
	font-size: 0.95rem;
}

body.scribigo-woo-checkout .select2-container--default .select2-search--dropdown .select2-search__field:focus {
	border-color: var(--sgwc-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sgwc-primary) 16%, transparent);
	outline: none;
}

body.scribigo-woo-checkout .select2-dropdown .select2-results__option {
	padding: 9px 11px;
	border-radius: 8px;
	color: var(--sgwc-fg);
	font-size: 0.95rem;
	line-height: 1.35;
}

body.scribigo-woo-checkout .select2-container--default .select2-results__option[aria-selected="true"],
body.scribigo-woo-checkout .select2-container--default .select2-results__option[data-selected="true"] {
	background: color-mix(in srgb, var(--sgwc-primary) 14%, var(--sgwc-card));
	font-weight: 550;
}

body.scribigo-woo-checkout .select2-container--default .select2-results__option--highlighted[aria-selected],
body.scribigo-woo-checkout .select2-container--default .select2-results__option--highlighted[data-selected] {
	background: color-mix(in srgb, var(--sgwc-primary) 88%, #fff);
	color: #fffdf8;
}

body.scribigo-woo-cart .woocommerce button.button,
body.scribigo-woo-cart .woocommerce a.button,
body.scribigo-woo-checkout .woocommerce button.button,
body.scribigo-woo-checkout .woocommerce input.button {
	min-height: 46px;
	padding: 12px 20px;
	border: 1px solid var(--sgwc-border-strong);
	border-radius: 12px;
	background: color-mix(in srgb, var(--sgwc-card) 90%, var(--sgwc-primary));
	color: var(--sgwc-fg);
	font-family: Outfit, ui-sans-serif, system-ui, sans-serif;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
}

body.scribigo-woo-cart .woocommerce button.button:hover,
body.scribigo-woo-cart .woocommerce a.button:hover,
body.scribigo-woo-checkout .woocommerce button.button:hover,
body.scribigo-woo-checkout .woocommerce input.button:hover {
	border-color: var(--sgwc-primary);
	background: color-mix(in srgb, var(--sgwc-card) 82%, var(--sgwc-primary));
	color: var(--sgwc-fg);
}

/* Cart */
body.scribigo-woo-cart .woocommerce-cart-form,
body.scribigo-woo-cart .cart_totals {
	overflow: hidden;
	box-sizing: border-box;
	border: 1px solid var(--sgwc-border) !important;
	border-radius: var(--sgwc-radius) !important;
	background: var(--sgwc-card) !important;
	box-shadow: var(--sgwc-shadow);
}

body.scribigo-woo-cart .woocommerce-cart-form {
	margin-bottom: 30px;
}

body.scribigo-woo-cart .woocommerce table.shop_table,
body.scribigo-woo-cart .woocommerce table.shop_table th,
body.scribigo-woo-cart .woocommerce table.shop_table td {
	border-color: var(--sgwc-border) !important;
}

body.scribigo-woo-cart .woocommerce table.shop_table {
	margin: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

body.scribigo-woo-cart .woocommerce table.shop_table thead {
	background: color-mix(in srgb, var(--sgwc-bg) 74%, #fff);
}

body.scribigo-woo-cart .woocommerce table.shop_table thead th {
	padding: 15px 18px;
	border-width: 0 0 1px;
	color: var(--sgwc-muted);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

body.scribigo-woo-cart .woocommerce table.shop_table tbody td {
	padding: 22px 18px;
	border-width: 0 0 1px;
	vertical-align: middle;
}

body.scribigo-woo-cart .woocommerce table.shop_table tr:last-child td {
	border-bottom: 0;
}

body.scribigo-woo-cart .product-name a {
	color: var(--sgwc-fg);
	font-family: Outfit, ui-sans-serif, system-ui, sans-serif;
	font-size: 1.05rem;
	font-weight: 600;
}

body.scribigo-woo-cart .product-price,
body.scribigo-woo-cart .product-subtotal {
	font-variant-numeric: tabular-nums;
}

body.scribigo-woo-cart .product-subtotal {
	color: var(--sgwc-fg);
	font-weight: 600;
}

/* Cart quantity: same connected stepper as the product page. Qty-locked lines
   (subscriptions + Buchsatz) never reach this rule — their quantity cell is
   replaced by a plain "1" plus a hidden input (see includes/scribigo-woo-product-ui.php).
   The shared input.input-text rule above wins on !important, hence the overrides. */
body.scribigo-woo-cart .woocommerce-cart-form .product-quantity .quantity {
	display: inline-flex;
	box-sizing: border-box;
	overflow: hidden;
	min-height: 46px;
	border: 1px solid var(--sgwc-border-strong);
	border-radius: var(--sgwc-input-radius);
	background: var(--sgwc-field);
	box-shadow: 0 1px 2px color-mix(in srgb, var(--sgwc-fg) 5%, transparent);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	align-items: stretch;
}

body.scribigo-woo-cart .woocommerce-cart-form .product-quantity .quantity:focus-within {
	border-color: var(--sgwc-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sgwc-primary) 16%, transparent);
}

body.scribigo-woo-cart .woocommerce-cart-form .product-quantity .quantity input.qty {
	width: 3.25em;
	max-width: none;
	min-height: 0 !important;
	margin: 0;
	padding: 0 4px;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--sgwc-fg);
	font-weight: 600;
	text-align: center;
}

body.scribigo-woo-cart .woocommerce-cart-form .product-quantity .quantity .minus,
body.scribigo-woo-cart .woocommerce-cart-form .product-quantity .quantity .plus {
	display: flex;
	flex: 0 0 auto;
	width: 38px;
	margin: 0;
	padding: 0;
	border: 0 solid var(--sgwc-border-strong);
	border-radius: 0;
	background: transparent;
	color: var(--sgwc-muted);
	font-size: 1.05rem;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
	align-items: center;
	justify-content: center;
}

body.scribigo-woo-cart .woocommerce-cart-form .product-quantity .quantity .minus {
	border-right-width: 1px;
}

body.scribigo-woo-cart .woocommerce-cart-form .product-quantity .quantity .plus {
	border-left-width: 1px;
}

body.scribigo-woo-cart .woocommerce-cart-form .product-quantity .quantity .minus:hover,
body.scribigo-woo-cart .woocommerce-cart-form .product-quantity .quantity .minus:focus,
body.scribigo-woo-cart .woocommerce-cart-form .product-quantity .quantity .plus:hover,
body.scribigo-woo-cart .woocommerce-cart-form .product-quantity .quantity .plus:focus {
	background: color-mix(in srgb, var(--sgwc-primary) 10%, var(--sgwc-field));
	color: var(--sgwc-primary);
}

body.scribigo-woo-cart .woocommerce a.remove {
	display: inline-grid;
	width: 34px;
	height: 34px;
	border: 1px solid var(--sgwc-border);
	border-radius: 50%;
	background: transparent;
	color: var(--sgwc-muted) !important;
	place-items: center;
}

body.scribigo-woo-cart .woocommerce a.remove:hover {
	border-color: color-mix(in srgb, #b42318 25%, var(--sgwc-border));
	background: color-mix(in srgb, #b42318 7%, var(--sgwc-card));
	color: #b42318 !important;
}

body.scribigo-woo-tariff-cart .woocommerce-cart-form .product-thumbnail {
	display: none !important;
}

body.scribigo-woo-cart .woocommerce td.actions {
	padding: 16px !important;
	background: color-mix(in srgb, var(--sgwc-bg) 58%, #fff);
}

body.scribigo-woo-cart .woocommerce td.actions .coupon {
	display: flex;
	gap: 10px;
}

body.scribigo-woo-cart .woocommerce td.actions .coupon .input-text {
	width: min(230px, 48vw);
}

body.scribigo-woo-cart .woocommerce td.actions .coupon button {
	color: var(--sgwc-muted);
}

body.scribigo-woo-cart .cart-collaterals .cart_totals {
	width: min(100%, 31rem);
	padding: clamp(20px, 3vw, 30px);
}

body.scribigo-woo-cart .cart_totals h2 {
	margin: 0 0 12px !important;
	padding: 0 0 16px !important;
	border-bottom: 1px solid var(--sgwc-border);
	background: transparent !important;
	font-size: 1.55rem;
	font-weight: 600;
}

body.scribigo-woo-cart .cart_totals table th,
body.scribigo-woo-cart .cart_totals table td {
	padding: 14px 0 !important;
	border-width: 0 0 1px !important;
}

body.scribigo-woo-cart .cart_totals table th {
	width: 58%;
	font-weight: 500;
	color: var(--sgwc-muted);
}

body.scribigo-woo-cart .cart_totals .order-total th,
body.scribigo-woo-cart .cart_totals .order-total td {
	color: var(--sgwc-fg);
	font-size: 1.08rem;
	font-weight: 600;
}

body.scribigo-woo-cart .wc-proceed-to-checkout {
	padding: 18px 0 0;
}

body.scribigo-woo-cart .woocommerce .wc-proceed-to-checkout a.checkout-button {
	margin: 0;
	padding: 15px 24px;
	border: 0;
	border-radius: 14px;
	background: var(--sgwc-primary);
	color: #fffdf8;
	box-shadow: 0 14px 28px -20px color-mix(in srgb, var(--sgwc-primary) 80%, transparent);
	font-family: Outfit, ui-sans-serif, system-ui, sans-serif;
	font-size: 1rem;
	font-weight: 600;
	text-transform: none;
}

body.scribigo-woo-cart .woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
body.scribigo-woo-cart .woocommerce .wc-proceed-to-checkout a.checkout-button:focus {
	background: var(--sgwc-primary-dark);
	color: #fffdf8;
	transform: translateY(-1px);
}

body.scribigo-woo-cart .woocommerce-info,
body.scribigo-woo-cart .cart-empty {
	border: 1px solid var(--sgwc-border);
	border-radius: var(--sgwc-radius);
	background: var(--sgwc-card);
	box-shadow: var(--sgwc-shadow);
}

body.scribigo-woo-cart .return-to-shop .button {
	border-color: var(--sgwc-primary);
	background: var(--sgwc-primary);
	color: #fffdf8;
}

/* Checkout cards and form */
body.scribigo-woo-checkout form.checkout {
	color: var(--sgwc-fg);
}

body.scribigo-woo-checkout form.checkout > .col2-set,
body.scribigo-woo-checkout form.checkout > h3,
body.scribigo-woo-checkout #order_review,
body.scribigo-woo-checkout .ast-payment-option-heading,
body.scribigo-woo-checkout #payment {
	box-sizing: border-box;
}

body.scribigo-woo-checkout form.checkout > .col2-set {
	padding: clamp(20px, 3vw, 32px);
	border: 1px solid var(--sgwc-border) !important;
	border-radius: var(--sgwc-radius) !important;
	background: var(--sgwc-card) !important;
	box-shadow: var(--sgwc-shadow);
}

/* The order review heading clears the floated customer details, and clearance
   eats its own top margin, so the gap has to come from the card above. */
body.scribigo-woo-checkout form.checkout #customer_details#customer_details {
	margin-bottom: 32px;
}

body.scribigo-woo-checkout form.checkout h3 {
	margin: 0 0 20px;
	font-size: 1.45rem;
	font-weight: 600;
}

body.scribigo-woo-checkout form.checkout .ast-checkout-form-heading {
	align-items: baseline;
	margin-bottom: 20px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--sgwc-border);
}

body.scribigo-woo-checkout form.checkout .ast-checkout-form-heading h3 {
	margin-bottom: 0;
}

body.scribigo-woo-checkout .woocommerce-billing-fields__customer-login-label {
	color: var(--sgwc-muted);
	font-size: 0.9rem;
}

body.scribigo-woo-checkout .woocommerce-billing-fields,
body.scribigo-woo-checkout .woocommerce-additional-fields {
	margin-top: 30px;
	padding-top: 26px;
	border-top: 1px solid var(--sgwc-border);
}

body.scribigo-woo-checkout .woocommerce-additional-fields {
	margin-bottom: 0;
}

body.scribigo-woo-checkout form.checkout .form-row {
	margin-bottom: 17px;
}

body.scribigo-woo-checkout form.checkout .form-row label {
	margin-bottom: 7px;
	color: var(--sgwc-fg);
	font-size: 0.86rem;
	font-weight: 550;
}

body.scribigo-woo-checkout form.checkout .form-row label .optional {
	color: var(--sgwc-muted);
	font-weight: 400;
}

body.scribigo-woo-checkout form.checkout .form-row.woocommerce-invalid input.input-text {
	border-color: #d87a72 !important;
}

body.scribigo-woo-checkout .checkout-inline-error-message {
	margin-top: 5px;
	color: #a43b32;
	font-size: 0.8rem;
	line-height: 1.35;
}

/* Order review: heading and table are one card. Astra addresses both nodes with
   `form #order_review:not(.elementor-… #order_review)` — the `:not()` argument
   lifts that selector to two IDs and strips padding, border and margins, so the
   ID is repeated here to stay above it. The same CSS also floats the review
   column right at 40% for the classic two-column layout, which the Astra
   one-column checkout must undo or the payment card slides under the table. */
body.scribigo-woo-checkout form.checkout > #order_review_heading#order_review_heading {
	clear: both;
	float: none;
	width: 100%;
	margin: 32px 0 0;
	padding: 24px 28px 16px;
	border: 1px solid var(--sgwc-border);
	border-bottom: 0;
	border-radius: var(--sgwc-radius) var(--sgwc-radius) 0 0;
	background: var(--sgwc-card);
}

body.scribigo-woo-checkout #order_review#order_review {
	clear: both;
	float: none;
	overflow: hidden;
	width: 100%;
	margin: 0;
	padding: 24px 28px;
	border: 1px solid var(--sgwc-border);
	border-radius: var(--sgwc-radius);
	background: var(--sgwc-card);
	box-shadow: var(--sgwc-shadow);
}

body.scribigo-woo-checkout #order_review_heading + #order_review#order_review {
	padding-top: 0;
	border-top: 0;
	border-radius: 0 0 var(--sgwc-radius) var(--sgwc-radius);
}

/* Astra draws a second bordered box inside the card (a 1px box-shadow ring plus
   1.2em cell insets on the review table), which reads as a card in a card. */
body.scribigo-woo-checkout .woocommerce #order_review table.shop_table {
	margin: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

body.scribigo-woo-checkout .woocommerce #order_review table.shop_table th,
body.scribigo-woo-checkout .woocommerce #order_review table.shop_table td {
	padding: 14px 0;
	border-color: var(--sgwc-border);
}

body.scribigo-woo-checkout .woocommerce #order_review table.shop_table thead th {
	padding: 12px 0;
	color: var(--sgwc-muted);
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

body.scribigo-woo-checkout .woocommerce #order_review .product-name {
	color: var(--sgwc-fg);
	font-weight: 550;
}

body.scribigo-woo-checkout .woocommerce #order_review .product-total,
body.scribigo-woo-checkout .woocommerce #order_review td {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

body.scribigo-woo-checkout .woocommerce #order_review .product-quantity {
	color: var(--sgwc-muted);
	font-weight: 450;
}

body.scribigo-woo-checkout .woocommerce #order_review .order-total th,
body.scribigo-woo-checkout .woocommerce #order_review .order-total td {
	padding-top: 17px;
	color: var(--sgwc-fg);
	font-size: 1.08rem;
}

/* `display: flow-root`: the heading has no bottom padding, so without a block
   formatting context the h3 margin escapes the card and tears a gap between the
   heading and the payment card below it. */
body.scribigo-woo-checkout .ast-payment-option-heading {
	display: flow-root;
	clear: both;
	float: none;
	width: 100%;
	margin-top: 24px;
	padding: 22px 28px 0;
	border: 1px solid var(--sgwc-border);
	border-bottom: 0;
	border-radius: var(--sgwc-radius) var(--sgwc-radius) 0 0;
	background: var(--sgwc-card);
}

body.scribigo-woo-checkout .woocommerce .ast-payment-option-heading h3 {
	margin: 0 0 16px;
}

/* Astra's modern checkout styles the payment list with four class selectors
   (`.ast-modern-checkout .woocommerce #payment ul.payment_methods …`): a grey
   bordered box around the list, `display: inline-table` plus a 2.7em min-height
   on every child that is not `.woocommerce-info`, and a payment box pulled out
   with negative margins. Every rule below therefore repeats `.woocommerce` and
   both list classes so it outranks Astra instead of fighting it with
   !important. */
body.scribigo-woo-checkout .woocommerce #payment {
	clear: both;
	float: none;
	width: 100%;
	padding: 26px 28px 28px;
	border: 1px solid var(--sgwc-border);
	border-radius: var(--sgwc-radius);
	background: var(--sgwc-card);
	box-shadow: var(--sgwc-shadow);
}

/* Astra prints its own "Zahlung" heading right before #payment; the two then
   form one card. Without that heading (e.g. Germanized) the rule above keeps
   #payment a complete card on its own. */
body.scribigo-woo-checkout .woocommerce .ast-payment-option-heading + #payment {
	padding-top: 0;
	border-top: 0;
	border-radius: 0 0 var(--sgwc-radius) var(--sgwc-radius);
}

/* Without Astra's modern checkout (and on the order-pay page) Woo renders
   #payment inside #order_review, where the surrounding card is enough. */
body.scribigo-woo-checkout #order_review #payment {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

body.scribigo-woo-checkout .woocommerce #payment ul.wc_payment_methods.payment_methods {
	display: grid;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	list-style: none;
	gap: 10px;
}

/* Only real gateways get a radio row card. The no-methods message is a bare
   `<li>` without `.wc_payment_method`, so it stays chrome-free (see below). */
body.scribigo-woo-checkout .woocommerce #payment ul.wc_payment_methods.payment_methods > li {
	display: block;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	line-height: inherit;
}

body.scribigo-woo-checkout .woocommerce #payment ul.wc_payment_methods.payment_methods > li.wc_payment_method {
	display: flex;
	padding: 14px 16px;
	border: 1px solid var(--sgwc-border);
	border-radius: 13px;
	background: color-mix(in srgb, var(--sgwc-bg) 48%, #fff);
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

body.scribigo-woo-checkout .woocommerce #payment ul.wc_payment_methods.payment_methods > li.wc_payment_method:has(> input:checked) {
	border-color: color-mix(in srgb, var(--sgwc-primary) 58%, var(--sgwc-border));
	background: color-mix(in srgb, var(--sgwc-primary) 6%, #fff);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--sgwc-primary) 9%, transparent);
}

body.scribigo-woo-checkout .woocommerce #payment ul.wc_payment_methods.payment_methods > li.wc_payment_method > input.input-radio {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--sgwc-primary);
}

body.scribigo-woo-checkout .woocommerce #payment ul.wc_payment_methods.payment_methods > li.wc_payment_method > label {
	display: flex;
	flex: 1 1 auto;
	width: auto;
	margin: 0;
	color: var(--sgwc-fg);
	font-size: 0.95rem;
	font-weight: 550;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

body.scribigo-woo-checkout .woocommerce #payment ul.wc_payment_methods.payment_methods > li.wc_payment_method > label img {
	max-height: 26px;
	margin: 0;
	width: auto;
}

body.scribigo-woo-checkout .woocommerce #payment ul.wc_payment_methods.payment_methods div.payment_box {
	flex: 0 0 100%;
	width: auto;
	margin: 2px 0 0;
	padding: 13px 14px;
	border: 1px solid var(--sgwc-border);
	border-radius: 10px;
	background: var(--sgwc-card);
	color: var(--sgwc-muted);
	font-size: 0.86rem;
	line-height: 1.5;
}

body.scribigo-woo-checkout .woocommerce #payment ul.wc_payment_methods.payment_methods div.payment_box p:last-child {
	margin-bottom: 0;
}

body.scribigo-woo-checkout .woocommerce #payment div.payment_box::before {
	display: none;
}

/* "No payment methods available": Woo wraps a notice div in an otherwise empty
   list item. Read it as a notice card, not as a broken radio row. */
body.scribigo-woo-checkout .woocommerce #payment ul.wc_payment_methods.payment_methods > li:not(.wc_payment_method) .woocommerce-info,
body.scribigo-woo-checkout .woocommerce #payment ul.wc_payment_methods.payment_methods > li:not(.wc_payment_method).woocommerce-info {
	--sgwc-notice: #b06b12;

	margin: 0;
	padding: 17px 20px 17px 50px;
	border: 1px solid color-mix(in srgb, var(--sgwc-notice) 30%, var(--sgwc-border));
	border-radius: 14px;
	background: color-mix(in srgb, var(--sgwc-notice) 8%, var(--sgwc-card));
	color: var(--sgwc-fg);
	font-size: 0.9rem;
	line-height: 1.55;
}

/* Woo paints its icon font glyph here and positions it for its own padding. */
body.scribigo-woo-checkout .woocommerce #payment ul.wc_payment_methods.payment_methods > li:not(.wc_payment_method) .woocommerce-info::before,
body.scribigo-woo-checkout .woocommerce #payment ul.wc_payment_methods.payment_methods > li:not(.wc_payment_method).woocommerce-info::before {
	top: 18px;
	left: 19px;
	width: 20px;
	height: 20px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b06b12' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 10.6v5.4M12 7.7v.01'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
	content: "";
}

/* Title line and admin hint from the German message (see
   includes/scribigo-woo-checkout-ui.php); harmless when the message is plain. */
body.scribigo-woo-checkout .woocommerce #payment .scribigo-payment-empty__title {
	display: block;
	margin-bottom: 3px;
	font-family: Outfit, ui-sans-serif, system-ui, sans-serif;
	font-size: 0.98rem;
	font-weight: 600;
}

body.scribigo-woo-checkout .woocommerce #payment .scribigo-payment-empty__admin {
	display: block;
	margin-top: 11px;
	padding-top: 11px;
	border-top: 1px dashed color-mix(in srgb, var(--sgwc-fg) 18%, transparent);
	color: var(--sgwc-muted);
	font-size: 0.82rem;
}

body.scribigo-woo-checkout #payment .form-row.place-order {
	margin: 0;
	padding: 20px 0 0;
}

body.scribigo-woo-checkout .woocommerce-privacy-policy-text,
body.scribigo-woo-checkout .woocommerce-terms-and-conditions-wrapper {
	color: var(--sgwc-muted);
	font-size: 0.82rem;
	line-height: 1.5;
}

body.scribigo-woo-checkout .woocommerce-terms-and-conditions-wrapper label {
	color: var(--sgwc-fg);
	font-size: 0.86rem;
	line-height: 1.45;
}

body.scribigo-woo-checkout .woocommerce-terms-and-conditions {
	margin: 12px 0;
	padding: 16px;
	border: 1px solid var(--sgwc-border);
	border-radius: 12px;
	background: var(--sgwc-bg);
}

body.scribigo-woo-checkout .woocommerce #payment #place_order {
	float: none;
	width: 100%;
	min-height: 52px;
	margin-top: 14px;
	padding: 15px 24px;
	border: 0;
	border-radius: 14px;
	background: var(--sgwc-primary);
	color: #fffdf8;
	box-shadow: 0 14px 28px -18px color-mix(in srgb, var(--sgwc-primary) 80%, transparent);
	font-family: Outfit, ui-sans-serif, system-ui, sans-serif;
	font-size: 1rem;
	font-weight: 600;
	text-transform: none;
}

body.scribigo-woo-checkout .woocommerce #payment #place_order:hover,
body.scribigo-woo-checkout .woocommerce #payment #place_order:focus {
	background: var(--sgwc-primary-dark);
	color: #fffdf8;
	transform: translateY(-1px);
}

body.scribigo-woo-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
body.scribigo-woo-checkout form.checkout_coupon,
body.scribigo-woo-checkout .woocommerce-NoticeGroup .woocommerce-error,
body.scribigo-woo-checkout > .woocommerce-error {
	border: 1px solid var(--sgwc-border);
	border-radius: 14px;
	background: color-mix(in srgb, var(--sgwc-card) 94%, var(--sgwc-primary));
	box-shadow: none;
}

body.scribigo-woo-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
	padding: 13px 16px;
	color: var(--sgwc-muted);
}

body.scribigo-woo-checkout form.checkout_coupon {
	margin-top: 10px;
	padding: 18px;
}

body.scribigo-woo-checkout .woocommerce-NoticeGroup .woocommerce-error {
	margin-bottom: 24px;
	padding: 16px 20px 16px 44px;
	border-color: color-mix(in srgb, #b42318 24%, var(--sgwc-border));
	color: var(--sgwc-fg);
}

body.scribigo-woo-checkout .woocommerce-NoticeGroup .woocommerce-error::before {
	top: 17px;
	left: 18px;
	color: #b42318;
}

/* Busy state: Astra Modern Checkout paints `#payment` / review-order BlockUI as a
   full-bleed skeleton (`width/height: 100%`, `background-size: cover`,
   `astra-payment-section-loader.svg`, `transform: scale(0.92)`). Those rules use
   the `#payment` ID, so they beat a body-class spinner. The orange ring we put on
   `::before` then stretched into a card-sized oval. `#payment` / `#order_review`
   are in the selectors so we outrank Astra; !important is for jQuery.blockUI's
   inline overlay colours and Astra's own `background` / `opacity` / `border`
   !important on `.blockOverlay`. */
body.scribigo-woo-cart .blockUI.blockOverlay,
body.scribigo-woo-checkout .blockUI.blockOverlay,
body.scribigo-woo-checkout .woocommerce #payment .blockUI.blockOverlay,
body.scribigo-woo-checkout .woocommerce #order_review .blockUI.blockOverlay,
body.scribigo-woo-checkout .woocommerce .woocommerce-checkout-review-order-table .blockUI.blockOverlay,
body.scribigo-woo-cart .woocommerce .woocommerce-cart-form .blockOverlay,
body.scribigo-woo-cart .woocommerce .cart_totals .blockOverlay {
	border: 0 !important;
	border-radius: inherit;
	background: color-mix(in srgb, var(--sgwc-card) 74%, transparent) !important;
	opacity: 1 !important;
	cursor: progress !important;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

/* Woo's loader.svg and Astra's skeleton both paint on this `::before`. */
body.scribigo-woo-cart .woocommerce .blockUI.blockOverlay::before,
body.scribigo-woo-checkout .woocommerce .blockUI.blockOverlay::before,
body.scribigo-woo-cart .woocommerce .loader::before,
body.scribigo-woo-checkout .woocommerce .loader::before,
body.scribigo-woo-checkout .woocommerce #payment .blockUI.blockOverlay::before,
body.scribigo-woo-checkout .woocommerce #order_review .blockUI.blockOverlay::before,
body.scribigo-woo-checkout .woocommerce #ast-order-review-content .blockUI.blockOverlay::before,
body.scribigo-woo-checkout .woocommerce .woocommerce-checkout-review-order-table .blockUI.blockOverlay::before,
body.scribigo-woo-cart .woocommerce .woocommerce-cart-form .blockOverlay::before,
body.scribigo-woo-cart .woocommerce .cart_totals .blockOverlay::before {
	content: "" !important;
	display: block !important;
	box-sizing: border-box !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	width: 30px !important;
	height: 30px !important;
	max-width: 32px !important;
	max-height: 32px !important;
	margin: -15px 0 0 -15px !important;
	border: 2px solid color-mix(in srgb, var(--sgwc-primary) 28%, var(--sgwc-card)) !important;
	border-top-color: var(--sgwc-primary) !important;
	border-radius: 50% !important;
	background: none !important;
	background-image: none !important;
	background-size: auto !important;
	/* Kill Astra's `scale(0.92)` without touching `rotate`. Keyframes that
	   animate `transform` lose to this `!important`; the independent `rotate`
	   property is what actually spins the ring. */
	transform: none !important;
	animation: scribigo-woo-spin 0.7s linear infinite !important;
}

/* Gateways and extensions that block with a message box instead of a bare overlay. */
body.scribigo-woo-cart .blockUI.blockMsg,
body.scribigo-woo-checkout .blockUI.blockMsg {
	padding: 22px 26px !important;
	border: 1px solid var(--sgwc-border) !important;
	border-radius: 16px !important;
	background-color: var(--sgwc-card) !important;
	background-image: none !important;
	box-shadow: var(--sgwc-shadow);
	color: var(--sgwc-fg) !important;
	font-family: Outfit, ui-sans-serif, system-ui, sans-serif;
}

@keyframes scribigo-woo-spin {
	to {
		rotate: 360deg;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.scribigo-woo-cart .woocommerce .blockUI.blockOverlay::before,
	body.scribigo-woo-checkout .woocommerce .blockUI.blockOverlay::before,
	body.scribigo-woo-cart .woocommerce .loader::before,
	body.scribigo-woo-checkout .woocommerce .loader::before,
	body.scribigo-woo-checkout .woocommerce #payment .blockUI.blockOverlay::before,
	body.scribigo-woo-checkout .woocommerce #order_review .blockUI.blockOverlay::before,
	body.scribigo-woo-checkout .woocommerce #ast-order-review-content .blockUI.blockOverlay::before,
	body.scribigo-woo-checkout .woocommerce .woocommerce-checkout-review-order-table .blockUI.blockOverlay::before,
	body.scribigo-woo-cart .woocommerce .woocommerce-cart-form .blockOverlay::before,
	body.scribigo-woo-cart .woocommerce .cart_totals .blockOverlay::before {
		animation: none !important;
	}
}

@media (max-width: 768px) {
	body.scribigo-woo-cart .woocommerce table.shop_table_responsive tr {
		margin: 0;
		padding: 10px 16px;
		border-bottom: 1px solid var(--sgwc-border);
	}

	body.scribigo-woo-cart .woocommerce table.shop_table_responsive tr:last-child {
		border-bottom: 0;
	}

	body.scribigo-woo-cart .woocommerce table.shop_table_responsive tr td {
		padding: 10px 0;
		border: 0 !important;
	}

	body.scribigo-woo-cart .woocommerce td.actions .coupon {
		width: 100%;
	}

	body.scribigo-woo-cart .woocommerce td.actions .coupon .input-text {
		flex: 1;
		width: auto;
	}

	body.scribigo-woo-checkout form.checkout > .col2-set,
	body.scribigo-woo-checkout form.checkout > #order_review_heading#order_review_heading,
	body.scribigo-woo-checkout #order_review#order_review,
	body.scribigo-woo-checkout .ast-payment-option-heading,
	body.scribigo-woo-checkout .woocommerce #payment {
		padding-right: 20px;
		padding-left: 20px;
	}
}

@media (max-width: 480px) {
	body.scribigo-woo-cart .woocommerce td.actions .coupon {
		flex-direction: column;
	}

	body.scribigo-woo-cart .woocommerce td.actions .coupon button {
		width: 100%;
	}

	/* Astra's modern checkout lays the address out as columns on a flex wrapper:
	   50% for the name pair and the street pair, 33.33% for postcode / city /
	   state. Three of those inside a phone-width card leave about 100px per
	   control, enough to cut "Postleitzahl *" down to "Postleitz." and the
	   Bundesland value to "Wä…". Stack every column instead.

	   Astra sets those widths through five class-level components (`.ast-modern-
	   checkout .woocommerce form.woocommerce-checkout .form-row.ast-column-33`
	   and its siblings), which a body-class scope alone does not reach. Naming
	   `.woocommerce` and the form's own `.woocommerce-checkout` class mirrors
	   that structure and takes it on the element count, so no !important is
	   needed. The column classes are addressed rather than the field IDs so the
	   rule still holds for whichever rows the selected country produces.

	   `float: none` covers the name pair, which Woo floats on its own whenever
	   Astra's modern input layout is off. The rows already share one margin, so
	   stacking them needs no spacing of its own. */
	body.scribigo-woo-checkout .woocommerce form.woocommerce-checkout .form-row.form-row-first,
	body.scribigo-woo-checkout .woocommerce form.woocommerce-checkout .form-row.form-row-last,
	body.scribigo-woo-checkout .woocommerce form.woocommerce-checkout .form-row.ast-column-50,
	body.scribigo-woo-checkout .woocommerce form.woocommerce-checkout .form-row.ast-column-33 {
		float: none;
		width: 100%;
	}
}