body#at-theme {
/*
 * Checkout — multi-step layout.
 *
 * Top : progress bar with 4 dots and fill line.
 * Body : left nav (steps list) + right content (active step's form section).
 */

.at-checkout {
	padding-block: var(--at-space-6) var(--at-space-8);
}

.at-checkout__heading {
	font-family: var(--at-font-display);
	font-size: var(--at-fs-display-l);
	color: var(--at-headline);
	text-transform: uppercase;
	letter-spacing: var(--at-tracking-default);
	margin: 0 0 var(--at-space-4);
	padding-bottom: var(--at-space-3);
	border-bottom: 1px solid var(--at-divider);
}

/* === Progress bar === */
.at-checkout__progress {
	margin-bottom: var(--at-space-7);
}
.at-checkout__progress-track {
	position: relative;
	height: 2px;
	background-color: var(--at-divider);
	margin: 0 0 var(--at-space-4);
}
.at-checkout__progress-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0%;
	background-color: var(--at-highlight);
	transition: width 0.4s ease;
}
.at-checkout__progress-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: space-between;
}
.at-checkout__progress-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--at-space-1);
	flex: 1;
	font-family: var(--at-font-mono);
	font-size: var(--at-fs-eyebrow);
	color: var(--at-muted);
	text-transform: uppercase;
	letter-spacing: var(--at-tracking-eyebrow);
	text-align: center;
	position: relative;
}
.at-checkout__progress-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 1px solid var(--at-divider);
	border-radius: 50%;
	background-color: var(--at-canvas);
	color: var(--at-muted);
	font-family: var(--at-font-body);
	font-size: var(--at-fs-body-sm);
	font-weight: 600;
	margin-top: -14px;
	transition: all var(--at-trans-fast);
}
.at-checkout__progress-step.is-active .at-checkout__progress-num {
	border-color: var(--at-highlight);
	color: var(--at-highlight);
	background-color: var(--at-canvas);
}
.at-checkout__progress-step.is-active .at-checkout__progress-label {
	color: var(--at-highlight);
}

/* === Layout === */
.at-checkout__layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: var(--at-space-6);
	align-items: start;
}

/* === Steps nav === */
.at-checkout__nav {
	background-color: transparent;
	border: 0;
	padding: 0;
	position: sticky;
	top: 110px;
	margin-top: 53px; /* aligns with the [ STEP 01 ] + heading block on the right (desktop only) */
}
.at-checkout__nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--at-space-2);
}
.at-checkout__nav-item {
	display: flex;
	align-items: center;
	gap: var(--at-space-3);
	width: 100%;
	background: transparent;
	border: 0;
	border-left: 2px solid transparent;
	padding: var(--at-space-3) var(--at-space-4);
	font-family: var(--at-font-mono);
	font-size: var(--at-fs-eyebrow);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--at-tracking-eyebrow);
	color: var(--at-muted);
	text-align: left;
	cursor: pointer;
	transition: color var(--at-trans-fast), background-color var(--at-trans-fast), border-color var(--at-trans-fast);
}
.at-checkout__nav-item:hover {
	color: var(--at-body);
	background-color: rgba(255, 255, 255, 0.02);
}
.at-checkout__nav-item.is-active {
	color: var(--at-highlight);
	border-left-color: var(--at-highlight);
	background-color: rgba(255, 255, 255, 0.04);
}

/* === Content === */
.at-checkout__content {
	background-color: var(--at-surface);
	border: 1px solid var(--at-hairline);
	border-radius: var(--at-radius-sm);
	padding: var(--at-space-4) var(--at-space-6) var(--at-space-6);
}

.at-checkout__step {
	display: none;
}
.at-checkout__step.is-active {
	display: block;
}

.at-checkout__step-header {
	margin-bottom: var(--at-space-5);
	padding-bottom: var(--at-space-4);
	border-bottom: 1px solid var(--at-divider);
}
.at-checkout__step-title {
	font-family: var(--at-font-display);
	font-size: var(--at-fs-display-l);
	color: var(--at-headline);
	text-transform: uppercase;
	letter-spacing: var(--at-tracking-default);
	margin: var(--at-space-2) 0 0;
}

/* Customer details — stacked: billing first, then shipping toggle block below. */
.at-checkout__customer {
	display: block;
}
.at-checkout__customer .col-1,
.at-checkout__customer .col-2 {
	min-width: 0;
}
.at-checkout__customer .col-2 {
	margin-top: var(--at-space-5);
}
.at-checkout__customer h3 {
	font-family: var(--at-font-display);
	font-size: var(--at-fs-display-l);
	color: var(--at-headline);
	text-transform: uppercase;
	letter-spacing: var(--at-tracking-default);
	margin: 0 0 var(--at-space-4);
	padding-bottom: var(--at-space-2);
	font-weight: normal;
}

/* Ship to a different address toggle — simple inline checkbox + label, no
 * card chrome. WC also floats the h3 left in its own stylesheet, which
 * shrink-wraps the heading and forces the label text to wrap; we override
 * float to keep the label on a single line. */
.at-checkout__customer h3#ship-to-different-address {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0 0 var(--at-space-4);
	font-family: var(--at-font-body);
	font-size: var(--at-fs-body-sm);
	font-weight: 600;
	color: var(--at-headline);
	text-transform: none;
	letter-spacing: var(--at-tracking-tight);
	float: none;
	clear: both;
	display: block;
	width: 100%;
}
.at-checkout__customer h3#ship-to-different-address label {
	display: inline-flex;
	align-items: center;
	gap: var(--at-space-2);
	cursor: pointer;
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	text-transform: none;
	letter-spacing: inherit;
	white-space: nowrap;
}

/* Custom checkbox skin — applies to every native checkbox in the theme. */
input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	padding: 0;
	margin: 0;
	background-color: var(--at-surface);
	border: 1px solid var(--at-divider);
	border-radius: 0;
	cursor: pointer;
	position: relative;
	flex-shrink: 0;
	transition: border-color var(--at-trans-fast), background-color var(--at-trans-fast);
}
input[type="checkbox"]:hover {
	border-color: var(--at-highlight);
}
input[type="checkbox"]:checked {
	background-color: var(--at-highlight);
	border-color: var(--at-highlight);
}
input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 6px;
	height: 11px;
	border: solid var(--at-canvas);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--at-highlight);
	outline-offset: 2px;
}

/* WC form rows */
.woocommerce-checkout .form-row {
	margin: 0 0 var(--at-space-3);
	display: block;
}
.woocommerce-checkout .form-row label {
	display: block;
	margin-bottom: var(--at-space-1);
	font-family: var(--at-font-mono);
	font-size: var(--at-fs-eyebrow);
	color: var(--at-muted);
	text-transform: uppercase;
	letter-spacing: var(--at-tracking-eyebrow);
}
.woocommerce-checkout .form-row .required {
	color: var(--at-stock-out);
	text-decoration: none;
}
/* Input/select/textarea styling lives in base.css; checkout overrides the
 * background so inputs blend into the content card (grey on grey) instead of
 * standing out as black rectangles against the surface. */
.woocommerce-checkout input:not([type="checkbox"]):not([type="radio"]),
.woocommerce-checkout select,
.woocommerce-checkout textarea {
	width: 100%;
	background-color: var(--at-surface);
}
/* Native <option> popup. Browser support for styling these is uneven, but
 * Chrome/Edge/Firefox honour at least background-color + color here. */
.woocommerce-checkout select option {
	background-color: var(--at-surface);
	color: var(--at-headline);
}

/* Select2 (country/state searchable dropdowns) is skinned globally in base.css
   so it applies on both the checkout and account address forms. */

/* Coupon form (in Discounts step) */
.woocommerce-form-coupon-toggle .woocommerce-info {
	background: transparent;
	border: 1px dashed var(--at-divider);
	color: var(--at-body);
	padding: var(--at-space-3) var(--at-space-4);
	margin-bottom: var(--at-space-3);
}
/* Suppress WC's absolutely-positioned info icon (the blue glyph that was
 * overlapping the "Have a coupon?" text). */
.woocommerce-form-coupon-toggle .woocommerce-info::before {
	display: none;
	content: none;
}
.woocommerce-form-coupon-toggle .woocommerce-info a {
	color: var(--at-highlight);
}
form.woocommerce-form-coupon {
	display: flex;
	gap: var(--at-space-2);
	align-items: flex-end;
	margin-bottom: var(--at-space-4);
}
form.woocommerce-form-coupon .form-row {
	margin: 0;
	flex: 1;
}
button[name="apply_coupon"] {
	height: 44px !important;
	background-color: var(--at-surface) !important;
	background-image: none !important;
	color: var(--at-body) !important;
	border: 1px solid var(--at-body) !important;
	border-radius: var(--at-radius-xs) !important;
	padding: 0 var(--at-space-4) !important;
	font-family: var(--at-font-body) !important;
	font-weight: 700 !important;
	font-size: var(--at-fs-body-sm) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	cursor: pointer !important;
	transition: background-color var(--at-trans-fast), color var(--at-trans-fast), border-color var(--at-trans-fast) !important;
}
button[name="apply_coupon"]:hover {
	background-color: var(--at-highlight) !important;
	border-color: var(--at-highlight) !important;
	color: var(--at-canvas) !important;
}

/* Step buttons (Prev/Next) — override the global .at-btn/.at-btn--solid so
 * they match the proceed-to-checkout pattern: grey-on-surface default, white
 * fill on hover. */
.at-checkout__nav-buttons .at-btn,
.at-checkout__nav-buttons .at-btn--ghost,
.at-checkout__nav-buttons .at-btn--solid {
	background-color: var(--at-surface);
	color: var(--at-body);
	border: 1px solid var(--at-body);
	border-radius: var(--at-radius-xs);
	transition: background-color var(--at-trans-fast), color var(--at-trans-fast), border-color var(--at-trans-fast);
}
.at-checkout__nav-buttons .at-btn:hover,
.at-checkout__nav-buttons .at-btn--ghost:hover,
.at-checkout__nav-buttons .at-btn--solid:hover {
	background-color: var(--at-highlight);
	border-color: var(--at-highlight);
	color: var(--at-canvas);
}

/* Order review table */
#order_review_heading {
	font-family: var(--at-font-mono);
	font-size: var(--at-fs-eyebrow);
	color: var(--at-muted);
	text-transform: uppercase;
	letter-spacing: var(--at-tracking-eyebrow);
	margin: 0 0 var(--at-space-3);
	font-weight: normal;
}
#order_review table.shop_table {
	width: 100%;
	border-collapse: collapse;
	background: transparent;
	border: 1px solid var(--at-hairline);
	border-radius: var(--at-radius-sm);
	overflow: hidden;
}
#order_review table.shop_table th,
#order_review table.shop_table td {
	padding: var(--at-space-3);
	border-bottom: 1px solid var(--at-hairline);
	background-color: transparent;
	color: var(--at-body);
	text-align: left;
}
#order_review table.shop_table .product-quantity,
#order_review table.shop_table .product-total {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Partner code (alien-tools affiliates) — match the rest of the checkout
 * inputs so the field blends into the surface card. The plugin's own CSS
 * doesn't set a background, so the global base.css `--at-canvas` was
 * leaking through. */
.alien-tools-checkout-affiliate input[type="text"] {
	background-color: var(--at-surface);
}
#order_review table.shop_table thead th {
	font-family: var(--at-font-mono);
	font-size: var(--at-fs-eyebrow);
	color: var(--at-muted);
	text-transform: uppercase;
	letter-spacing: var(--at-tracking-eyebrow);
	font-weight: normal;
	border-bottom: 1px solid var(--at-divider);
}
#order_review table.shop_table tfoot th {
	color: var(--at-muted);
	font-family: var(--at-font-mono);
	font-size: var(--at-fs-eyebrow);
	text-transform: uppercase;
	letter-spacing: var(--at-tracking-eyebrow);
	font-weight: normal;
}
#order_review table.shop_table tfoot td {
	color: var(--at-headline);
	font-variant-numeric: tabular-nums;
	text-align: right;
}
#order_review table.shop_table tfoot tr.order-total td {
	font-family: var(--at-font-body);
	font-weight: 600;
	font-size: var(--at-fs-subhead);
	color: var(--at-highlight);
}

/* Payment methods */
#payment {
	background-color: var(--at-surface);
	border: 1px solid var(--at-hairline);
	border-radius: var(--at-radius-sm);
	padding: var(--at-space-5);
	margin-top: var(--at-space-4);
}
#payment ul.payment_methods {
	list-style: none;
	margin: 0 0 var(--at-space-4);
	padding: 0;
	border: 0;
}
#payment ul.payment_methods li {
	background: transparent;
	padding: var(--at-space-3) 0;
	border-bottom: 1px solid var(--at-hairline);
}
#payment ul.payment_methods li:last-child {
	border-bottom: 0;
}
#payment ul.payment_methods li label {
	display: inline-block;
	font-family: var(--at-font-body);
	color: var(--at-headline);
	margin-left: var(--at-space-2);
}
#payment .payment_box {
	background-color: var(--at-surface);
	border-radius: var(--at-radius-xs);
	padding: var(--at-space-4);
	margin-top: var(--at-space-3);
	color: var(--at-body);
}
#payment .payment_box::before {
	border-bottom-color: var(--at-surface) !important;
}
#payment .terms {
	margin-top: var(--at-space-4);
}
#payment button#place_order {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: var(--at-space-4);
	min-height: 52px;
	background-color: var(--at-highlight);
	color: var(--at-canvas);
	border: 2px solid var(--at-highlight);
	border-radius: var(--at-radius-xs);
	font-family: var(--at-font-body);
	font-weight: 700;
	font-size: var(--at-fs-body);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	cursor: pointer;
	transition: all var(--at-trans-fast);
}
#payment button#place_order:hover {
	background-color: transparent;
	color: var(--at-highlight);
}

/* Step buttons (Prev/Next) — .at-btn / .at-btn--solid live in base.css */
.at-checkout__nav-buttons {
	display: flex;
	justify-content: space-between;
	gap: var(--at-space-3);
	margin-top: var(--at-space-5);
	padding-top: var(--at-space-5);
	border-top: 1px solid var(--at-divider);
}

/* Notices */
.woocommerce-NoticeGroup {
	margin: 0 0 var(--at-space-4);
}
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
	background-color: var(--at-canvas);
	border-left: 2px solid var(--at-highlight);
	border-radius: var(--at-radius-xs);
	padding: var(--at-space-3) var(--at-space-4);
	/* Clear the absolute ::before status glyph (left:24px, width:16px) so it
	   never overlaps the text — same fix as the global notice in base.css,
	   re-applied here because this block's padding shorthand resets it. */
	padding-left: 3em;
	color: var(--at-body);
	list-style: none;
	margin: 0 0 var(--at-space-3);
}
.woocommerce-error {
	border-left-color: var(--at-stock-out);
}

@media (max-width: 980px) {
	.at-checkout__layout {
		grid-template-columns: 1fr;
	}
	.at-checkout__nav {
		position: relative;
		top: auto;
		margin-top: 0;
	}
	.at-checkout__customer {
		grid-template-columns: 1fr;
	}
	.at-checkout__progress-label { display: none; }
}
}

/* ── VAT / tax-rate row legibility (L5a) ─────────────────────────────────
   No tax-rate rule existed; the VAT label inherited a faint colour and sat
   far from its amount. Brighten the label, tighten tracking, pull it toward
   the amount. (The "(19%)" value comes from the EU VAT module — Yves.) */
.woocommerce-checkout-review-order-table tr.tax-rate th,
.cart_totals tr.tax-rate th {
	color: var(--at-body);
	letter-spacing: var(--at-tracking-tight);
	text-align: right;
	font-weight: 500;
}
.woocommerce-checkout-review-order-table tr.tax-rate td,
.cart_totals tr.tax-rate td {
	color: var(--at-headline);
	white-space: nowrap;
}

/* ── Single place-order CTA (L6 follow-up) ──────────────────────────────
   The custom "Review & place order" nav button submits the order (forwards
   to #place_order in checkout.js), so the native WooCommerce button is
   redundant. Hide it WITHIN the custom checkout only (.at-checkout) — never
   globally, or the standalone order-pay page would lose its button. The
   forward still triggers the hidden button; all enabled gateways (Stripe
   family + BACS) submit via #place_order. */
.at-checkout #place_order {
	display: none !important;
}

/* ── Section labels on the review/payment step ──────────────────────────
   "Products" (a <caption> in review-order.php), "Partner code" and "Payment
   method" (injected via woocommerce_review_order_before_payment in
   inc/woocommerce.php). Muted/caps eyebrow style, matching the step headers. */
.at-checkout__section-label {
	display: block;
	margin: 0 0 var(--at-space-3);
}
.at-checkout caption.at-checkout__section-label {
	caption-side: top;
	text-align: left;
}
.at-checkout p.at-checkout__section-label {
	margin-top: var(--at-space-6);
}


/* ── Buy Now pre-submit validation feedback ─────────────────────────────
   Set by checkout.js BEFORE handing off to WooCommerce, so WC's generic top
   banner never appears. The message sits directly above the Buy Now button;
   the offending field/row is outlined red (T&C box + its label go red too). */
.at-checkout__buynow-error {
	margin: 0 0 var(--at-space-3);
	padding: var(--at-space-2) var(--at-space-3);
	font-family: var(--at-font-mono);
	font-size: var(--at-fs-eyebrow);
	letter-spacing: var(--at-tracking-default);
	color: var(--at-stock-out);
	border: 1px solid var(--at-stock-out);
	border-radius: var(--at-radius-xs);
}
.at-checkout__buynow-error[hidden] {
	display: none;
}

.at-checkout__field-error input:not([type="checkbox"]):not([type="radio"]),
.at-checkout__field-error select,
.at-checkout__field-error textarea {
	border-color: var(--at-stock-out) !important;
	outline: 1px solid var(--at-stock-out);
}

/* T&C consent row: the generic .form-row label treatment (uppercase IBM Plex
   Mono) and the error restyle must NOT land on the consent checkbox label —
   keep the sentence normal case/font (red only when invalid), and keep #terms a
   real 18×18 square with a clean red outline, never a collapsed sliver. */
body#at-theme .woocommerce-checkout .form-row label.woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: flex-start;
	gap: var(--at-space-2);
	margin-bottom: 0;
	font-family: var(--at-font-body);
	font-size: var(--at-fs-body-sm);
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	line-height: 1.4;
	color: var(--at-body);
}
body#at-theme .form-row input#terms,
body#at-theme .at-checkout__terms-error input[type="checkbox"] {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	box-sizing: border-box;
	margin-top: 2px;
	appearance: none;
	-webkit-appearance: none;
}
body#at-theme .at-checkout__terms-error label.woocommerce-form__label-for-checkbox,
body#at-theme .at-checkout__terms-error .woocommerce-terms-and-conditions-checkbox-text {
	color: var(--at-stock-out);
}
body#at-theme .at-checkout__terms-error input[type="checkbox"] {
	outline: 2px solid var(--at-stock-out);
	outline-offset: 2px;
	border-color: var(--at-stock-out);
}

/* ── Coupon field in the discounts step ─────────────────────────────────
   Plain field (not WooCommerce's nested <form class="checkout_coupon">, which
   would close the checkout form early and drop the payment nonce). Applied via
   WC's apply_coupon AJAX in checkout.js. */
.at-checkout__coupon {
	margin: 0 0 var(--at-space-5);
}
.at-checkout__coupon-row {
	display: flex;
	gap: var(--at-space-3);
	align-items: stretch;
}
.at-checkout__coupon-input {
	flex: 1;
	min-width: 0;
}
.at-checkout__coupon-apply {
	flex-shrink: 0;
}
.at-checkout__coupon-feedback:not(:empty) {
	margin-top: var(--at-space-2);
}

/* ── Partner-code field — mirror the coupon section exactly ──────────────
   The affiliates module ships neutral styling + a WC .button; restyle its BEM
   hooks here (high specificity to beat the module's checkout.css and WC's
   .button) so the field is visually identical to the coupon: dark input + black
   ghost uppercase Apply, aligned heights. */
body#at-theme .gp-affiliates-partner-code__row {
	display: flex;
	gap: var(--at-space-3);
	align-items: stretch;
}
body#at-theme .gp-affiliates-partner-code__input {
	flex: 1;
	min-width: 0;
}
body#at-theme .gp-affiliates-partner-code__apply {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--at-space-3) var(--at-space-6);
	font-family: var(--at-font-body);
	font-weight: 700;
	font-size: var(--at-fs-body-sm);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-radius: 0;
	border: 2px solid var(--at-highlight);
	background-color: var(--at-canvas);
	color: var(--at-highlight);
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--at-trans-fast), color var(--at-trans-fast);
}
body#at-theme .gp-affiliates-partner-code__apply:hover {
	background-color: var(--at-highlight);
	color: var(--at-canvas);
}

/* ── Label-row + info tooltips (coupon + partner code) ───────────────────
   One shared style so both tooltips are identical: dark bubble, sharp corners,
   shown on hover AND focus (keyboard + touch). */
.at-checkout__label-row,
body#at-theme .gp-affiliates-partner-code__label-row {
	display: flex;
	align-items: center;
	gap: var(--at-space-2);
	margin-bottom: var(--at-space-2);
}
body#at-theme .gp-affiliates-partner-code__label-row > label {
	margin: 0;
}

.at-tooltip,
.gp-affiliates-tooltip {
	position: relative;
	display: inline-flex;
	vertical-align: middle;
}
.at-tooltip__trigger,
.gp-affiliates-tooltip__trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--at-muted);
	font-size: 15px;
	line-height: 1;
	cursor: help;
	transition: color var(--at-trans-fast);
}
.at-tooltip__trigger:hover,
.at-tooltip__trigger:focus,
.gp-affiliates-tooltip__trigger:hover,
.gp-affiliates-tooltip__trigger:focus {
	color: var(--at-highlight);
}
.at-tooltip__bubble,
.gp-affiliates-tooltip__bubble {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 30;
	width: max-content;
	max-width: 260px;
	padding: var(--at-space-3);
	background-color: var(--at-canvas);
	color: var(--at-headline);
	border: 1px solid var(--at-divider);
	border-radius: 0;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
	font-family: var(--at-font-body);
	font-size: var(--at-fs-body-sm);
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	line-height: 1.45;
	text-align: left;
	white-space: normal;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--at-trans-fast), visibility var(--at-trans-fast);
}
.at-tooltip__trigger:hover ~ .at-tooltip__bubble,
.at-tooltip__trigger:focus ~ .at-tooltip__bubble,
.gp-affiliates-tooltip__trigger:hover ~ .gp-affiliates-tooltip__bubble,
.gp-affiliates-tooltip__trigger:focus ~ .gp-affiliates-tooltip__bubble {
	opacity: 1;
	visibility: visible;
}

/* === 2026-06-15 (Travis): payment-method selectors use the square checkbox
   skin (empty box until selected) instead of native circle radios, so the
   chosen method is obvious. Mirrors the input[type=checkbox] skin above. */
#payment ul.payment_methods input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	padding: 0;
	margin: 0;
	background-color: var(--at-surface);
	border: 1px solid var(--at-divider);
	border-radius: 0;
	cursor: pointer;
	position: relative;
	flex-shrink: 0;
	vertical-align: middle;
	transition: border-color var(--at-trans-fast), background-color var(--at-trans-fast);
}
#payment ul.payment_methods input[type="radio"]:hover {
	border-color: var(--at-highlight);
}
#payment ul.payment_methods input[type="radio"]:checked {
	background-color: var(--at-highlight);
	border-color: var(--at-highlight);
}
#payment ul.payment_methods input[type="radio"]:checked::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 6px;
	height: 11px;
	border: solid var(--at-canvas);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
#payment ul.payment_methods input[type="radio"]:focus-visible {
	outline: 2px solid var(--at-highlight);
	outline-offset: 2px;
}


/* 2026-06-18 — checkout order review: shipping options + header cleanup */

/* Header: remove the stray "Products" caption + the divider line below it */
.woocommerce-checkout-review-order-table caption.at-checkout__section-label { display: none !important; }
.woocommerce-checkout-review-order-table thead th { border-bottom: 0 !important; }

/* Shipping options right-aligned with the totals. cart-shipping.php gives the
   <td> colspan="2" so the € amounts sit in the same column as Subtotal/VAT/Total. */
.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td { text-align: right; }
#shipping_method { margin: 0; padding: 0; list-style: none; text-align: right; }
#shipping_method li { text-align: right; margin: .15rem 0; }

/* Service-name label: IBM Plex Mono medium (a loaded weight — avoids the faux-bold
   "glow"); unselected = darker gray, selected = white. */
#shipping_method li label {
	font-family: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace !important;
	font-weight: 500 !important;
	font-size: .92em !important;
	color: #6E7378 !important;
	cursor: pointer;
	text-shadow: none !important;
}
#shipping_method li input.shipping_method:checked + label { color: var(--at-headline, #E8E8E8) !important; }

/* € value: identical to the Subtotal / VAT amounts (IBM Plex Sans 16px 700);
   colour follows the selected/unselected state of the label. */
#shipping_method li label .woocommerce-Price-amount {
	font-family: "IBM Plex Sans", system-ui, sans-serif !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	color: inherit !important;
	text-shadow: none !important;
}