/*
 * Mini Cart (Modern Cart) + Checkout (CartFlows step / WooCommerce) visual layer.
 * CSS ONLY. No markup, hook, template, JS or plugin-file changes.
 *
 * Loaded after Modern Cart, WooCommerce and CartFlows styles (see inc/cart-checkout.php).
 *
 * Specificity strategy
 *   1. Plugin CSS variables first (--moderncart-*, --wcf-*), set on a plugin-owned scope element.
 *   2. Scoped selectors that out-rank the plugin's own: Modern Cart rules start at
 *      `#moderncart-slide-out` (1 id), ours at `#moderncart-slide-out-modal #moderncart-slide-out` (2 ids);
 *      CartFlows rules start at `.wcf-embed-checkout-form`, ours repeat it (see --cf below).
 *   3. Load order (we print last).
 *   4. `!important` only where a plugin rule itself uses it (documented inline).
 * Everything keys off class names that survive the plugins' AJAX re-rendering; nothing is set inline.
 */

/* ======================================================================
 * A. MINI CART (Modern Cart slide-out)
 * ====================================================================== */

/* A1. Plugin variables, scoped to the plugin's own root element (overrides the :root values it prints). */
#moderncart-slide-out-modal {
	--moderncart-primary-color: var(--color-action);
	--moderncart-heading-color: var(--color-text-heading);
	--moderncart-body-color: var(--color-text-body);
	--moderncart-button-font-color: var(--color-on-action);
	--moderncart-header-font-color: var(--color-text-heading);
	--moderncart-header-background-color: var(--color-bg);
	--moderncart-quantity-background-color: var(--color-surface-3);
	--moderncart-quantity-font-color: var(--color-text-brand);
	--moderncart-highlight-color: var(--color-action);
	--moderncart-cart-header-font-size: 22px;
	--moderncart-cart-header-text-alignment: left;
	--moderncart-slide-out-mobile-width: min(92%, 450px);
	--moderncart-cart-item-padding: 24px;
}

/* Overlay: the brand deep blue instead of the plugin's grey. */
.moderncart-modal-backdrop[role="dialog"] {
	background-color: rgb(19 38 107 / 45%);
}

#moderncart-slide-out-modal #moderncart-slide-out {
	font-family: var(--font-sans);
	letter-spacing: -0.02em;
	color: var(--color-text-body);
}

/* The plugin reaches 768px with its mobile width; the theme's desktop starts at 768px. Keep desktop width from 768. */
@media (min-width: 768px) {
	#moderncart-slide-out-modal.moderncart-cart-style-slideout #moderncart-slide-out.moderncart-default-slide-out {
		max-width: var(--moderncart-slide-out-desktop-width, 450px);
	}
}

/* A2. Header + counter */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-header-heading {
	padding: 22px 24px;
	border-bottom: 1px solid var(--color-border-soft);
	background: var(--color-bg);
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-header-title span {
	font-size: var(--moderncart-cart-header-font-size);
	font-weight: var(--fw-medium);
	line-height: 1.2;
	letter-spacing: var(--ls-tight);
	color: var(--color-text-heading);
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-header-title {
	text-align: left;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-header-quantity {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
	padding: 0 10px;
	border-radius: var(--radius-pill);
	background: var(--color-surface-3);
	color: var(--color-text-brand);
	font-size: 14px;
	font-weight: var(--fw-medium);
	line-height: 1;
}

/* The close control is an arrow button: keep it, give it the brand colour and a visible focus ring. */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-header-close {
	color: var(--color-text-brand);
	border-radius: var(--radius-sm);
	transition: color var(--transition), background-color var(--transition);
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-header-close svg {
	color: currentcolor;
	fill: currentcolor;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-header-close:hover {
	color: var(--color-action);
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-header-close:focus-visible {
	/* plugin sets `outline: 0 !important` on this button, so the ring is drawn with box-shadow. */
	box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-action);
}

/* A3. Product rows */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-cart .moderncart-cart-item:not(:last-child) {
	border-bottom: 1px solid var(--color-border-soft);
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-image {
	border-radius: var(--radius-sm);
	overflow: hidden;
}

/* The tint sits on the <img> itself so a product without an image shows no empty block. */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-image img {
	border-radius: var(--radius-sm);
	background: var(--color-surface-2);
	padding: 6px;
	box-sizing: border-box;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-product-name {
	font-size: 16px;
	font-weight: var(--fw-medium);
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--color-text-heading);
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-product-link a {
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	color: var(--color-text-heading);
	text-decoration: none;
	transition: color var(--transition);
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-product-link a:hover {
	color: var(--color-action);
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-product-link a:focus-visible,
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-image a:focus-visible {
	outline: 2px solid var(--color-action);
	outline-offset: 2px;
	border-radius: 4px;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-product-price,
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-product .woocommerce-Price-amount {
	font-size: 16px;
	color: var(--color-text-brand);
}

/* "Remove": a real <button>. The plugin forces transparent/borderless with !important; only colour, size and focus are set. */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-actions-remove {
	min-height: 32px;
	font-family: inherit;
	font-size: 14px;
	letter-spacing: -0.01em;
	color: var(--color-text-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--transition);
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-actions-remove:hover {
	color: var(--color-text-brand);
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-actions-remove:focus-visible {
	box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-action); /* plugin: outline 0 !important */
	border-radius: 4px;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-collapse-btn-link {
	color: var(--color-text-accent);
	font-size: 14px;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-product-data {
	font-size: 14px;
	color: var(--color-text-body);
}

/* A4. Quantity control (layout and order kept: + / value / -) */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-quantity {
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--color-bg);
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-quantity button {
	background: transparent;
	color: var(--color-text-brand);
	transition: background-color var(--transition), color var(--transition);
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-quantity button:hover {
	background: var(--color-surface-3);
	color: var(--color-action);
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-quantity button:focus-visible {
	/* plugin: outline none */
	outline: 2px solid var(--color-action);
	outline-offset: -2px;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-quantity input[type="number"] {
	border-color: transparent;
	font-family: inherit;
	font-weight: var(--fw-medium);
	color: var(--color-text-heading);
	font-variant-numeric: tabular-nums;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-quantity input[type="number"]:focus-visible {
	outline: 2px solid var(--color-action);
	outline-offset: -2px;
}

/* A5. Coupon */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-have-coupon-code-area {
	color: var(--color-text-brand);
	font-weight: var(--fw-medium);
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-have-coupon-code-area:focus-visible {
	outline: 2px solid var(--color-action);
	outline-offset: -2px;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-have-coupon-code-area svg path {
	fill: var(--color-text-brand);
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-coupon-input {
	height: 48px;
	gap: 10px;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-coupon-input input {
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	background: var(--color-bg);
	color: var(--color-text-body);
	font-family: inherit;
	font-size: 16px; /* >= 16px: no iOS zoom on focus */
	padding: 0 14px;
	letter-spacing: -0.01em;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-coupon-input input::placeholder {
	color: var(--color-placeholder);
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-coupon-input input:focus,
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-coupon-input input:focus-visible {
	border-color: var(--color-action) !important; /* plugin sets this with !important */
	box-shadow: 0 0 0 3px rgb(20 55 185 / 18%);
	outline: 0;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-coupon-input button {
	border-radius: var(--radius-pill);
	font-family: inherit;
	font-size: 16px;
	font-weight: var(--fw-medium);
	letter-spacing: -0.01em;
	padding: 0 24px;
	transition: background-color var(--transition), border-color var(--transition);
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-coupon-input button:hover {
	background: var(--color-action-hover);
	border-color: var(--color-action-hover);
	opacity: 1;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-coupon-input button:focus-visible {
	outline: 2px solid var(--color-action);
	outline-offset: 2px;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-coupons-tag {
	border-radius: var(--radius-pill);
	background: var(--color-surface-3);
	color: var(--color-text-brand);
}

#moderncart-slide-out-modal .moderncart-notification {
	border-radius: var(--radius-sm);
	font-family: inherit;
}

/* A6. Totals */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-footer {
	box-shadow: 0 -6px 24px rgb(19 38 107 / 10%);
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-footer .moderncart-cart-total {
	border-color: var(--color-border-soft);
	color: var(--color-text-body);
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-footer .moderncart-cart-total .moderncart-cart-line-items-item {
	padding: 12px 24px;
	font-size: 16px;
	line-height: 1.3;
	border-bottom-color: var(--color-border-soft);
	color: var(--color-text-body);
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-footer .moderncart-cart-total .moderncart-cart-line-items-item span {
	font-weight: var(--fw-medium);
	color: var(--color-text-heading);
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-footer .moderncart-cart-total .moderncart-cart-line-items-label {
	font-weight: var(--fw-regular);
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-footer .moderncart-cart-total .moderncart-cart-line-items-item:last-child {
	font-size: 20px;
	font-weight: var(--fw-medium);
	color: var(--color-text-heading);
}

/* A7. Checkout button (an <a class="checkout-button">, kept as is) */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-footer .moderncart-cart-total .wc-proceed-to-checkout {
	padding: 20px 24px 10px;
	border-radius: 0;
	overflow: visible; /* plugin clips to 6px radius; the focus ring needs room */
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-footer .moderncart-cart-total a.checkout-button {
	min-height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	box-sizing: border-box;
	padding: 16px 24px;
	border: 1px solid var(--color-action);
	border-radius: var(--radius-pill);
	background: var(--color-action);
	color: var(--color-on-action);
	font-size: 18px;
	font-weight: var(--fw-regular);
	letter-spacing: -0.02em;
	line-height: 1.3;
	transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-footer .moderncart-cart-total a.checkout-button:hover {
	background: var(--color-action-hover);
	border-color: var(--color-action-hover);
	color: var(--color-on-action);
	opacity: 1;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-footer .moderncart-cart-total a.checkout-button:focus-visible {
	outline: 2px solid var(--color-action);
	outline-offset: 3px;
}

/* A8. Empty state */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-empty-cart {
	color: var(--color-text-body);
	font-family: inherit;
}

/* A9. Narrow screens: the panel is wider (92%), long names wrap, nothing overflows. */
@media (max-width: 767px) {
	#moderncart-slide-out-modal {
		--moderncart-cart-item-padding: 16px;
	}

	#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-header-heading {
		padding: 18px 16px;
	}

	#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-footer .moderncart-cart-total .moderncart-cart-line-items-item {
		padding-inline: 16px;
	}

	#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-footer .moderncart-cart-total .wc-proceed-to-checkout {
		padding-inline: 16px;
	}

	#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-product-name,
	#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-product-link a {
		overflow-wrap: anywhere;
	}
}

@media (prefers-reduced-motion: reduce) {
	#moderncart-slide-out-modal #moderncart-slide-out * {
		transition-duration: 0.01ms !important; /* honours the user preference over the plugin animation values */
	}
}

/* ======================================================================
 * B. CHECKOUT (CartFlows checkout step: `.wcf-embed-checkout-form`)
 * `--cf` = the plugin wrapper repeated, which out-ranks CartFlows' own
 * `.wcf-embed-checkout-form ...` selectors without any id or !important.
 * ====================================================================== */

/* B0. CartFlows' two-column field wrapper uses -7px side margins that normally sit inside padding;
 * clip them so they can never create a horizontal page scroll (clip, not hidden: no scroll container). */
.wcf-embed-checkout-form.wcf-embed-checkout-form {
	overflow-x: clip;
}

/* B1. CartFlows variables (documented CartFlows mechanism) on its own wrapper. Triple class beats
 * the plugin's `:root > .wcf-field-modern-label` variable override. */
.wcf-embed-checkout-form.wcf-embed-checkout-form.wcf-embed-checkout-form {
	--wcf-primary-color: var(--color-action);
	--wcf-heading-color: var(--color-text-heading);
	--wcf-text-color: var(--color-text-body);
	--wcf-link-color: var(--color-text-accent);
	--wcf-btn-bg-color: var(--color-action);
	--wcf-btn-bg-hover-color: var(--color-action-hover);
	--wcf-btn-text-color: var(--color-on-action);
	--wcf-btn-hover-text-color: var(--color-on-action);
	--wcf-field-label-color: var(--color-text-brand);
	--wcf-field-bg-color: var(--color-bg);
	--wcf-field-border-color: var(--color-border-strong);
	--wcf-field-text-color: var(--color-text-body);
	--wcf-field-error-label-color: #b3261e;
	--wcf-field-error-border-color: #b3261e;
	--wcf-field-error-color: #b3261e;
	--wcf-payment-section-bg-color: var(--color-surface-1);
	--wcf-payment-section-desc-bg-color: var(--color-surface-2);
	--wcf-payment-section-desc-text-color: var(--color-text-body);
	--wcf-payment-section-label-color: var(--color-text-brand);
	--wcf-heading-font-weight: 500;

	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.4;
	color: var(--color-text-body);
	letter-spacing: -0.01em;
}

/* B2. Section headings */
.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce-billing-fields > h3,
.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce-shipping-fields > h3,
.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce-additional-fields > h3,
.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce-billing-fields-custom > h3,
.wcf-embed-checkout-form.wcf-embed-checkout-form #order_review_heading,
.wcf-embed-checkout-form.wcf-embed-checkout-form #ship-to-different-address {
	font-family: inherit;
	font-size: 24px;
	font-weight: var(--fw-medium);
	line-height: 1.2;
	letter-spacing: var(--ls-tight);
	color: var(--color-text-heading);
}

/* B3. Form fields (text, tel, email, textarea, select) */
.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce form .form-row > label {
	font-size: 14px;
	font-weight: var(--fw-medium);
	letter-spacing: -0.01em;
	color: var(--color-text-brand);
}

.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce form .form-row .required {
	color: var(--color-text-accent);
	text-decoration: none;
}

.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce form .form-row input.input-text,
.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce form .form-row textarea,
.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce form .form-row select,
.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce #order_review .input-text {
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	background-color: var(--color-bg);
	color: var(--color-text-body);
	font-family: inherit;
	font-size: 16px; /* >= 16px: no iOS zoom on focus */
	letter-spacing: -0.01em;
	box-shadow: none;
	transition: border-color var(--transition), box-shadow var(--transition);
}

.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce form .form-row input.input-text::placeholder,
.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce form .form-row textarea::placeholder {
	color: var(--color-placeholder);
	font-size: 16px;
}

/* Heights/paddings only for the plain skin; the floating-label skin (`wcf-field-modern-label`) keeps CartFlows' own
 * padding because its label animation depends on it. */
.wcf-embed-checkout-form.wcf-embed-checkout-form:not(.wcf-field-modern-label) .woocommerce form .form-row input.input-text,
.wcf-embed-checkout-form.wcf-embed-checkout-form:not(.wcf-field-modern-label) .woocommerce form .form-row select {
	min-height: 52px;
	padding: 12px 16px;
}

.wcf-embed-checkout-form.wcf-embed-checkout-form:not(.wcf-field-modern-label) .woocommerce form .form-row textarea {
	padding: 14px 16px;
}

.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce form .form-row input.input-text:focus,
.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce form .form-row textarea:focus,
.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce form .form-row select:focus {
	border-color: var(--color-action);
	box-shadow: none;
	outline: 1px solid var(--color-action); /* crisp 2px total with the border, no glow */
	outline-offset: -1px;
}

/* Select2 (country / state), rendered by WooCommerce inside the form */
.wcf-embed-checkout-form.wcf-embed-checkout-form .select2-container--default .select2-selection--single {
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	font-family: inherit;
	font-size: 16px;
	color: var(--color-text-body);
	transition: border-color var(--transition), box-shadow var(--transition);
}

.wcf-embed-checkout-form.wcf-embed-checkout-form:not(.wcf-field-modern-label) .select2-container--default .select2-selection--single {
	min-height: 52px;
	padding: 14px 16px;
}

.wcf-embed-checkout-form.wcf-embed-checkout-form .select2-container--default.select2-container--focus .select2-selection--single,
.wcf-embed-checkout-form.wcf-embed-checkout-form .select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--color-action);
	box-shadow: none;
	outline: 1px solid var(--color-action);
	outline-offset: -1px;
}

/* The Select2 dropdown is appended to <body>, outside the wrapper: scoped by the Woo checkout body class instead. */
body.woocommerce-checkout .select2-dropdown {
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	font-family: var(--font-sans);
	font-size: 16px;
	overflow: hidden;
}

body.woocommerce-checkout .select2-container--default .select2-results__option--highlighted[aria-selected],
body.woocommerce-checkout .select2-container--default .select2-results__option--highlighted[data-selected] {
	background-color: var(--color-action);
	color: var(--color-on-action);
}

/* Validation states (WooCommerce adds .woocommerce-invalid / -validated to .form-row) */
.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce form .form-row.woocommerce-invalid input.input-text,
.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce form .form-row.woocommerce-invalid select,
.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce form .form-row.woocommerce-invalid .select2-selection--single {
	border-color: #b3261e;
}

.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce form .form-row.woocommerce-invalid input.input-text:focus,
.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce form .form-row.woocommerce-invalid select:focus {
	border-color: #b3261e;
	box-shadow: none;
	outline: 1px solid #b3261e;
	outline-offset: -1px;
}

/* Inline field messages (CartFlows validation text) */
.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce form .form-row .wcf-field-error,
.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce form .form-row .woocommerce-error {
	color: #b3261e;
	font-size: 14px;
}

/* B4. Notices (login prompt, errors, messages) */
.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce .woocommerce-error,
.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce .woocommerce-NoticeGroup .woocommerce-error,
.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce .woocommerce-notices-wrapper .woocommerce-error {
	border: 1px solid #e6b3af;
	border-radius: var(--radius-sm);
	background-color: #fff5f4;
	color: #8c1d18;
	font-family: inherit;
	font-size: 15px;
	list-style: none;
	padding: 16px 20px;
}

.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce .woocommerce-error li {
	/* targeted !important: CartFlows sets `list-style: inside disc !important` on this exact selector */
	list-style: none !important;
}

.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce .woocommerce-info,
.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce .woocommerce-message {
	border-radius: var(--radius-sm);
	color: var(--color-text-body);
	font-weight: var(--fw-regular);
}

.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce a:not(.button) {
	color: var(--color-text-accent);
}

.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce a:not(.button):hover {
	color: var(--color-text-brand);
}

/* B5. Checkbox / radio: CartFlows draws its own (appearance: none) controls from --wcf-primary-color;
 * only the idle border, focus ring and label colour are set here. Real inputs, no replacement controls. */
.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce .woocommerce-checkout input[type="checkbox"],
.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce .woocommerce-billing-fields [type="checkbox"],
.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce #payment input[type="checkbox"],
.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce #payment input[type="radio"],
.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce #order_review input[type="radio"] {
	border-color: var(--color-border-strong);
}

.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce input[type="checkbox"]:focus-visible,
.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce input[type="radio"]:focus-visible {
	border-color: var(--color-action);
	box-shadow: none;
	outline: 2px solid var(--color-action); /* crisp keyboard ring, no glow */
	outline-offset: 2px;
}

.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce label.checkbox,
.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce .woocommerce-form__label-for-checkbox {
	font-size: 16px;
	color: var(--color-text-body);
}

/* B6. Shipping methods. List markers are removed on the method lists (they are radio lists, not bulleted lists). */
.wcf-embed-checkout-form.wcf-embed-checkout-form ul.payment_methods,
.wcf-embed-checkout-form.wcf-embed-checkout-form ul#shipping_method {
	list-style: none;
}

.wcf-embed-checkout-form.wcf-embed-checkout-form ul#shipping_method li,
.wcf-embed-checkout-form.wcf-embed-checkout-form .wcf-shipping-method-options ul#shipping_method li {
	font-size: 16px;
}

.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce form .wcf-shipping-method-options ul#shipping_method li label {
	color: var(--color-text-body) !important; /* CartFlows forces this colour with !important */
}

/* B7. Order review */
.wcf-embed-checkout-form.wcf-embed-checkout-form table.shop_table {
	font-size: 16px;
	letter-spacing: -0.01em;
}

.wcf-embed-checkout-form.wcf-embed-checkout-form table.shop_table th {
	color: var(--color-text-brand);
	font-weight: var(--fw-medium);
}

.wcf-embed-checkout-form.wcf-embed-checkout-form table.shop_table tbody {
	border-top: 1px solid var(--color-border-soft);
	border-bottom: 1px solid var(--color-border-soft);
}

.wcf-embed-checkout-form.wcf-embed-checkout-form table.shop_table td {
	color: var(--color-text-body);
}

.wcf-embed-checkout-form.wcf-embed-checkout-form table.shop_table tbody tr.cart_item td.product-name {
	color: var(--color-text-heading);
	overflow-wrap: anywhere;
}

.wcf-embed-checkout-form.wcf-embed-checkout-form table.shop_table tfoot tr.order-total:not(.recurring-total) th,
.wcf-embed-checkout-form.wcf-embed-checkout-form table.shop_table tfoot tr.order-total:not(.recurring-total) td {
	border-top: 1px solid var(--color-border-soft);
	font-size: 20px;
	font-weight: var(--fw-medium);
	color: var(--color-text-heading);
}

.wcf-embed-checkout-form.wcf-embed-checkout-form table.shop_table .wcf-product-image img,
.wcf-embed-checkout-form.wcf-embed-checkout-form table.shop_table .product-thumbnail img {
	border-radius: var(--radius-sm);
	background: var(--color-surface-2);
}

/* B8. Coupon field (+ Apply button; the real <button name="apply_coupon"> is kept) */
.wcf-embed-checkout-form.wcf-embed-checkout-form .wcf-custom-coupon-field {
	border-top-color: var(--color-border-soft);
	border-bottom-color: var(--color-border-soft);
}

.wcf-embed-checkout-form.wcf-embed-checkout-form .wcf-custom-coupon-field .wcf-coupon-col-1 {
	flex: 1 1 0;
	width: auto;
}

.wcf-embed-checkout-form.wcf-embed-checkout-form .wcf-custom-coupon-field .wcf-coupon-col-2 {
	width: auto;
	min-width: 112px;
}

.wcf-embed-checkout-form.wcf-embed-checkout-form .wcf-custom-coupon-field input.input-text {
	min-height: 52px;
	padding: 12px 16px;
}

/* B9. Buttons: Apply, Place order (and any other CartFlows/Woo button inside the review/payment area) */
.wcf-embed-checkout-form.wcf-embed-checkout-form .wcf-custom-coupon-field button.wcf-submit-coupon,
.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce #order_review button:not(.js-woopayments-copy-test-number),
.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce #payment button:not(.js-woopayments-copy-test-number) {
	min-height: 56px;
	padding: 16px 24px;
	border: 1px solid var(--color-action);
	border-radius: var(--radius-pill);
	background-color: var(--color-action);
	color: var(--color-on-action);
	font-family: inherit;
	font-size: 18px;
	font-weight: var(--fw-regular);
	letter-spacing: -0.02em;
	line-height: 1.3;
	transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.wcf-embed-checkout-form.wcf-embed-checkout-form .wcf-custom-coupon-field button.wcf-submit-coupon:hover,
.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce #order_review button:not(.js-woopayments-copy-test-number):hover,
.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce #payment button:not(.js-woopayments-copy-test-number):hover {
	border-color: var(--color-action-hover);
	background-color: var(--color-action-hover);
	color: var(--color-on-action);
	opacity: 1; /* CartFlows dims hovered buttons to 0.9 */
}

.wcf-embed-checkout-form.wcf-embed-checkout-form .wcf-custom-coupon-field button.wcf-submit-coupon:focus-visible,
.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce #payment button:focus-visible {
	outline: 2px solid var(--color-action);
	outline-offset: 3px;
}

.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce #payment button:disabled,
.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce #payment button.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* B10. Payment methods */
.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce-checkout #payment ul.payment_methods {
	padding: 8px 20px;
	border: 1px solid var(--color-border-soft);
	border-radius: var(--radius-md);
	background-color: var(--color-surface-1);
}

.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce-checkout #payment ul.payment_methods > li {
	padding: 12px 0;
	font-size: 16px;
}

.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce-checkout #payment ul.payment_methods > li + li {
	border-top: 1px solid var(--color-border-soft);
}

.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce #payment [type="radio"]:checked + label,
.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce #payment [type="radio"]:not(:checked) + label {
	font-weight: var(--fw-medium);
	color: var(--color-text-brand);
}

.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce-checkout #payment div.payment_box {
	margin-top: 10px;
	border-radius: var(--radius-sm);
	background-color: var(--color-surface-2);
	color: var(--color-text-body);
	font-size: 15px;
}

.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce #payment .payment_method_totalpay label img,
.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce #payment .wc_payment_method label img {
	max-height: 24px;
	width: auto;
}

.wcf-embed-checkout-form.wcf-embed-checkout-form #payment .woocommerce-privacy-policy-text p {
	font-size: 13px;
	text-align: left;
	color: var(--color-text-body);
	opacity: var(--opacity-secondary);
}

.wcf-embed-checkout-form.wcf-embed-checkout-form #payment .woocommerce-privacy-policy-text a {
	color: var(--color-text-accent);
}

/* B11. Coupon fields: no focus glow (the main fields are handled in B3). `#order_review` is part of the selector because the
 * idle coupon-input rule in B3 uses it. */
.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce #order_review .wcf-custom-coupon-field input.input-text:focus,
.wcf-embed-checkout-form.wcf-embed-checkout-form .wcf-custom-coupon-field input.input-text:focus,
.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce-checkout form.checkout_coupon input.input-text:focus,
.wcf-embed-checkout-form.wcf-embed-checkout-form .select2-search__field:focus {
	border-color: var(--color-action);
	box-shadow: none;
	outline: 1px solid var(--color-action);
	outline-offset: -1px;
}

/* B12. Space above Place Order: the privacy/terms wrapper is the last block above the button and the theme resets `p:last-child`
 * margins to 0. The gap lives on that wrapper (not on the button or a per-gateway box), so it is the same for every payment
 * method and survives the `update_order_review` fragment refresh, which re-renders #payment with the same classes.
 * Confirmed to match the live staging DOM. */
.wcf-embed-checkout-form.wcf-embed-checkout-form #payment .place-order .woocommerce-terms-and-conditions-wrapper {
	margin-bottom: var(--space-4);
}

/* B13. Narrow screens */
@media (max-width: 767px) {
	.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce-billing-fields > h3,
	.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce-shipping-fields > h3,
	.wcf-embed-checkout-form.wcf-embed-checkout-form .woocommerce-additional-fields > h3,
	.wcf-embed-checkout-form.wcf-embed-checkout-form #order_review_heading,
		.wcf-embed-checkout-form.wcf-embed-checkout-form #ship-to-different-address {
		font-size: 22px;
	}

	.wcf-embed-checkout-form.wcf-embed-checkout-form .wcf-custom-coupon-field .wcf-coupon-col-1 {
		padding-right: 10px;
	}

	.wcf-embed-checkout-form.wcf-embed-checkout-form .wcf-custom-coupon-field button.wcf-submit-coupon {
		padding-inline: 16px;
	}
}

/* ======================================================================
 * C. CHECKOUT PAGE (verified on the real staging DOM)
 *
 * Scope: `body.woocommerce-checkout` (WooCommerce adds it on the checkout page; the staging <body> has no
 * `single-cartflows_step`). The Elementor-built chrome around the form is addressed by widget class/ID.
 *
 * !important: Elementor prints per-element CSS as `.elementor-NNN .elementor-element.elementor-element-ID ...` and the
 * checkout widget paints its buttons through `#order_review button`; both out-rank any short theme selector. Every
 * !important below overrides one of those generated rules and was checked in DevTools on staging.
 *
 * ELEMENTOR IDs (taken from the staging page; production must be re-checked, they are content ids):
 *   47758d2  breadcrumb widget (also reachable by its stable class .elementor-widget-eael-breadcrumbs, used below)
 *   aa3678d  title container       6e35821  title heading widget
 *   50aa2ba  banner text column    ea1d60f  banner heading widget
 * ====================================================================== */

/* C1. Breadcrumbs hidden (semantic widget class, no ID needed). */
body.woocommerce-checkout .elementor-widget-eael-breadcrumbs {
	display: none !important;
}

/* C2. Title "Checkout": Inter, centred (theme H1 scale: --fs-display-md = 60px). */
body.woocommerce-checkout .elementor-element-aa3678d {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
}

body.woocommerce-checkout .elementor-element-6e35821 {
	width: 100% !important;
	max-width: 100% !important;
	margin-inline: auto !important;
	align-self: center !important;
	text-align: center !important;
}

body.woocommerce-checkout .elementor-element-6e35821 .elementor-heading-title {
	display: block !important;
	width: 100% !important;
	text-align: center !important;
	font-family: var(--font-sans) !important;
	font-size: var(--fs-display-md) !important;
	font-weight: var(--fw-medium) !important;
	line-height: 1.1 !important;
}

/* C3. Shipping heading spacing (CartFlows' own class; the theme's global `h3 { margin: 0 }` had removed the gap). */
body.woocommerce-checkout .wcf-shipping-methods-title {
	margin-bottom: 25px !important;
}

/* C4. Primary buttons: the checkout widget's "Primary Color" (#1A1E23) is applied with `#order_review button`. */
body.woocommerce-checkout #place_order {
	background-color: var(--color-action) !important;
	border-color: var(--color-action) !important;
	color: var(--color-on-action) !important;
}

body.woocommerce-checkout #place_order:hover {
	background-color: var(--color-action-hover) !important;
	border-color: var(--color-action-hover) !important;
}

body.woocommerce-checkout .wcf-custom-coupon-field button {
	background: var(--color-action) !important;
	border-color: var(--color-action) !important;
	color: var(--color-on-action) !important;
}

body.woocommerce-checkout .wcf-custom-coupon-field button:hover {
	background: var(--color-action-hover) !important;
	border-color: var(--color-action-hover) !important;
	color: var(--color-on-action) !important;
}

/* C5. Banner "Join the Research Community" (kept; background image, wording, link and layout untouched). */
body.woocommerce-checkout .elementor-element-50aa2ba {
	text-align: center !important;
}

body.woocommerce-checkout .elementor-element-50aa2ba .elementor-element-ea1d60f {
	margin-bottom: 16px !important;
}

body.woocommerce-checkout .elementor-element-50aa2ba .elementor-widget-heading:not(.elementor-element-ea1d60f) {
	margin-bottom: 24px !important;
}

body.woocommerce-checkout .elementor-element-ea1d60f .elementor-heading-title {
	font-family: var(--font-sans) !important;
	font-size: var(--fs-display-sm) !important;
	font-weight: var(--fw-medium) !important;
	line-height: 1.15 !important;
	letter-spacing: -0.035em !important;
	text-align: center !important;
}

body.woocommerce-checkout .elementor-element-50aa2ba .elementor-widget-heading:not(.elementor-element-ea1d60f) .elementor-heading-title {
	font-family: var(--font-sans) !important;
	font-size: 16px !important;
	font-weight: var(--fw-regular) !important;
	line-height: 1.5 !important;
	letter-spacing: -0.01em !important;
	text-align: center !important;
}

/* Contact button: white outlined pill, auto width (not stretched to the column). */
body.woocommerce-checkout .elementor-element-50aa2ba .elementor-widget-button {
	width: auto !important;
	max-width: 100% !important;
	align-self: center !important;
	margin-inline: auto !important;
}

body.woocommerce-checkout .elementor-element-50aa2ba .elementor-button-wrapper {
	width: auto !important;
	display: flex !important;
	justify-content: center !important;
}

body.woocommerce-checkout .elementor-element-50aa2ba .elementor-widget-button .elementor-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 auto !important;
	width: auto !important;
	min-width: 160px !important;
	min-height: 52px !important;
	padding: 14px 40px !important;
	border: 1px solid var(--color-on-action) !important;
	border-radius: var(--radius-pill) !important;
	background: transparent !important;
	color: var(--color-on-action) !important;
	font-family: var(--font-sans) !important;
	font-size: 16px !important;
	font-weight: var(--fw-medium) !important;
	transition: background-color 0.2s, color 0.2s !important;
}

body.woocommerce-checkout .elementor-element-50aa2ba .elementor-widget-button .elementor-button:hover {
	background: var(--color-on-action) !important;
	color: var(--color-action) !important;
}

body.woocommerce-checkout .elementor-element-50aa2ba .elementor-widget-button .elementor-button:focus-visible {
	outline: 2px solid var(--color-on-action);
	outline-offset: 3px;
}

/* C6. Banner -> footer: the gap is the theme's global `.site-footer { margin-top: var(--section-gap) }` (120px).
 * Overridden on the checkout page only; no !important needed (it out-ranks that rule by specificity). */
body.woocommerce-checkout .site-footer {
	margin-top: 0;
}

/* C7. Narrow screens */
@media (max-width: 767px) {
	body.woocommerce-checkout .elementor-element-6e35821 .elementor-heading-title {
		font-size: 40px !important;
	}

	body.woocommerce-checkout .elementor-element-ea1d60f .elementor-heading-title {
		font-size: 28px !important;
	}

	body.woocommerce-checkout .elementor-element-50aa2ba .elementor-widget-heading:not(.elementor-element-ea1d60f) .elementor-heading-title {
		font-size: 14px !important;
	}
}