/*
 * The Crypto Secret — the checkout page (Story 3.2).
 *
 * Source of truth: design/canvas/Checkout.dc.html (desktop, 1.3fr/1fr grid,
 * dark order-summary panel) and design/canvas/CheckoutMobile.dc.html (mobile,
 * summary first, sticky bottom pay bar). Where this file departs from a
 * board, the reason is written at the rule.
 *
 * ═══════════════════════════════════════════════════════════════════════════
 * WHAT THIS FILE CONSUMES RATHER THAN RE-DECLARES
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * sections.css owns the cream band ground/type pairing (.tcs-band--cream) and
 * the full-bleed mechanics (.tcs-bands, .tcs-band__inner). motion.css owns
 * .tcs-btn / .tcs-btn--orange / .tcs-btn__shimmer — the pay button reuses
 * them rather than a fourth button skin. tokens.css owns every value: the
 * whole Story 3.2 block was added there first, so a literal here would be a
 * second place for a number to drift.
 *
 * ═══════════════════════════════════════════════════════════════════════════
 * THE TWO THINGS THIS FILE EXISTS TO GET RIGHT
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * 1. THE ORDER SUMMARY MOVES WITHOUT MOVING IN THE DOM. page-checkout.php
 *    writes the summary BEFORE the form in markup, unconditionally — that is
 *    what makes it the mobile "summary above form" layout by default. This
 *    file only REPOSITIONS it for desktop, via CSS grid `order`, in the
 *    direction Checkout.dc.html:76 draws it (right column, beside the form).
 *    A stylesheet that fails to load leaves the harder constraint (mobile)
 *    correct.
 *
 * 2. WOOCOMMERCE'S OWN FORM MARKUP IS RESTYLED, NEVER REPLACED — WITH ONE
 *    DELIBERATE EXCEPTION. The `[woocommerce_checkout]` shortcode renders
 *    `.woocommerce-checkout`, `.woocommerce-billing-fields`,
 *    `.woocommerce-additional-fields`, `.woocommerce-checkout-review-order`
 *    and its own field labels/inputs — WooCommerce core markup this story
 *    does not fork (Boundaries: "no custom fields needed"). Every rule below
 *    targets WooCommerce's classes directly rather than assuming this
 *    theme's own field markup.
 *
 *    THE EXCEPTION: `#order_review` (WooCommerce's own order-review table)
 *    and `#place_order` (WooCommerce's own submit button) are hidden with
 *    `display: none` rather than restyled — see the rule itself, in section
 *    4 below, for why. This theme's own dark summary panel and
 *    `tcs-checkout__pay` button are the ARTBOARD'S UI; WooCommerce's raw
 *    equivalents duplicating them unstyled is a defect "restyled" cannot
 *    reach, since there is nothing in the artboards for a second copy to
 *    match. Hidden, not removed: both stay in the DOM for WooCommerce's own
 *    AJAX total-recalculation and submit handling to keep working against.
 */

/* ===========================================================================
 * 1. THE PAGE SHELL
 * ========================================================================= */

.tcs-checkout {
	padding-top: var(--tcs-checkout-top-pad);
	padding-bottom: var(--tcs-checkout-bottom-pad);
}

.tcs-checkout__inner {
	max-width: 1240px;
}

.tcs-checkout__title {
	margin: 0 0 10px;
	font-size: var(--tcs-fs-checkout-title);
	line-height: var(--tcs-lh-checkout-title);
	letter-spacing: var(--tcs-ls-checkout-title);
	font-weight: var(--tcs-fw-semibold);
}

/* Pages without the lede (declined) keep the title's breathing room. */
.tcs-checkout__title + :not(.tcs-checkout__lede) {
	margin-top: 40px;
}

/* One line under the title: what happens next, and how long it takes. */
.tcs-checkout__lede {
	margin: 0 0 40px;
	font-size: var(--tcs-fs-checkout-lede);
	line-height: var(--tcs-lh-body);
	color: var(--tcs-body);
}

/* ===========================================================================
 * 2. THE TWO-COLUMN LAYOUT  —  Checkout.dc.html:45
 *
 * `order` reverses the SOURCE order for desktop only — the summary is
 * written first in the markup (mobile-first, see the file header) and this
 * is the one place that source order is overridden.
 * ========================================================================= */

.tcs-checkout__layout {
	display: grid;
	grid-template-columns: var(--tcs-checkout-col-form) var(--tcs-checkout-col-summary);
	gap: var(--tcs-checkout-col-gap);
	align-items: start;
}

.tcs-checkout__summary {
	order: 2;
	/* Stays beside the form while the form scrolls (redesign 2026-09-03). */
	position: sticky;
	top: var(--tcs-checkout-summary-top);
	/*
	 * TALL-PANEL GUARD (code-review fix, 2026-09-04): the panel's height is
	 * the sum of its content (product, totals, pay button, trust list) with
	 * no ceiling, so a short desktop window (this rule only applies
	 * >=769px — mobile resets it below) could pin a panel taller than the
	 * viewport with nothing to scroll its clipped bottom into view.
	 * Bounded to the viewport height minus the sticky offset on both edges;
	 * past that the panel scrolls its own content independently of the page.
	 */
	max-height: calc(100vh - (var(--tcs-checkout-summary-top) * 2));
	overflow-y: auto;
}

.tcs-checkout__form {
	order: 1;
	max-width: var(--tcs-checkout-form-max);
}

/* ===========================================================================
 * 3. THE ORDER SUMMARY PANEL  —  Checkout.dc.html:76-98
 * ========================================================================= */

.tcs-checkout__summary {
	display: flex;
	flex-direction: column;
	gap: var(--tcs-checkout-summary-gap);
	padding: var(--tcs-checkout-summary-pad);
	background: var(--tcs-checkout-summary-bg);
	color: var(--tcs-cream);
	border: var(--tcs-border-width) solid var(--tcs-border-dark);
	border-radius: var(--tcs-radius-lg);
	box-shadow: 0 30px 60px -30px rgba(12, 12, 13, .45);
}

.tcs-checkout__summary-label {
	font-size: var(--tcs-fs-eyebrow);
	font-weight: var(--tcs-fw-semibold);
	letter-spacing: var(--tcs-ls-eyebrow);
	text-transform: var(--tcs-tt-eyebrow);
	color: var(--tcs-orange);
}

.tcs-checkout__product {
	display: flex;
	align-items: flex-start;
	gap: var(--tcs-checkout-thumb-gap);
}

.tcs-checkout__product-thumb {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	flex-shrink: 0;
	overflow: hidden;
	width: var(--tcs-checkout-thumb-w);
	height: var(--tcs-checkout-thumb-h);
	padding: var(--tcs-checkout-thumb-pad);
	background: var(--tcs-panel);
	border: var(--tcs-border-width) solid var(--tcs-border-dark);
	border-radius: var(--tcs-checkout-thumb-radius);
	box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .7);
}

/* The real cover (redesign 2026-09-03) — the "101" mark was a placeholder. */
.tcs-checkout__product-cover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tcs-checkout__product-mark {
	font-size: 17px;
	font-weight: var(--tcs-fw-bold);
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--tcs-orange);
}

.tcs-checkout__product-info {
	display: flex;
	flex-direction: column;
	gap: var(--tcs-checkout-product-gap);
	padding-top: 3px;
}

.tcs-checkout__product-name {
	font-size: 17px;
	font-weight: var(--tcs-fw-semibold);
	letter-spacing: -0.02em;
	line-height: 1.25;
}

.tcs-checkout__product-format {
	font-size: var(--tcs-fs-body-sm);
	color: var(--tcs-muted);
}

.tcs-checkout__rule {
	height: var(--tcs-border-width);
	background: var(--tcs-checkout-summary-rule);
}

.tcs-checkout__totals {
	display: flex;
	flex-direction: column;
	gap: var(--tcs-checkout-totals-gap);
}

.tcs-checkout__total-row {
	display: flex;
	justify-content: space-between;
}

.tcs-checkout__total-label {
	font-size: 14.5px;
	color: var(--tcs-body-dark);
}

.tcs-checkout__total-value {
	font-size: 14.5px;
	color: var(--tcs-body-dark);
}

.tcs-checkout__total-value--was {
	color: var(--tcs-dim);
	text-decoration: line-through;
}

.tcs-checkout__total-label--discount,
.tcs-checkout__total-value--discount {
	color: var(--tcs-orange);
}

.tcs-checkout__total-row--grand {
	align-items: baseline;
}

.tcs-checkout__total-label--grand {
	font-size: 16px;
	font-weight: var(--tcs-fw-semibold);
	color: var(--tcs-cream);
}

.tcs-checkout__total-value--grand {
	font-size: var(--tcs-fs-checkout-total);
	font-weight: var(--tcs-fw-semibold);
	letter-spacing: var(--tcs-ls-checkout-total);
	color: var(--tcs-cream);
}

/* ---------------------------------------------------------------------------
 * The pay button. .tcs-btn / .tcs-btn--orange / .tcs-btn__shimmer already
 * supply the 44px tap floor, the shimmer host and the hover transition; this
 * makes it a full-width block inside the panel, which .tcs-btn's own
 * `inline-flex` does not do on its own.
 * ------------------------------------------------------------------------- */

.tcs-checkout__pay-bar {
	display: flex;
}

.tcs-checkout__pay {
	width: 100%;
	padding-top: 18px;
	padding-bottom: 18px;
	font-size: 16px;
}

/*
 * THE ZERO-GATEWAY DEAD-END NOTICE (code-review fix, 2026-09-04).
 * js/checkout.js's showPaymentsUnavailableNotice() inserts this node right
 * after the pay bar only when a click found no #place_order to forward to
 * — a rare state (no live gateway credentials connected) this rule styles
 * but does not gate; the element simply does not exist otherwise.
 */
.tcs-checkout__pay-unavailable {
	margin: var(--tcs-checkout-field-gap) 0 0;
	font-size: var(--tcs-fs-checkout-hint);
	color: var(--tcs-error);
}

.tcs-checkout__trust {
	display: flex;
	flex-direction: column;
	gap: var(--tcs-checkout-trust-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tcs-checkout__trust-item {
	display: flex;
	align-items: center;
	gap: var(--tcs-checkout-trust-icon-gap);
}

.tcs-checkout__trust-icon {
	flex-shrink: 0;
	width: var(--tcs-checkout-trust-icon);
	height: var(--tcs-checkout-trust-icon);
	color: var(--tcs-orange);
}

.tcs-checkout__trust-text {
	font-size: var(--tcs-fs-checkout-trust);
	color: var(--tcs-body-dark);
}

/*
 * THE 44px FLOOR IS SCOPED TO THE LINK, NOT THE WHOLE TRUST ROW — the same
 * decision hero.css and pricing.css make for their own refund links: giving
 * the surrounding text a 44px box would only add whitespace, since it is not
 * interactive.
 */
.tcs-checkout__refund-link {
	display: inline-flex;
	align-items: center;
	min-height: var(--tcs-tap-min);
	margin-block: calc((var(--tcs-tap-min) - 1em * var(--tcs-lh-body)) / -2);
	color: var(--tcs-orange);
	text-decoration: underline;
}

.tcs-checkout__secure-note {
	font-size: var(--tcs-fs-checkout-secure);
	line-height: 1.5;
	text-align: center;
	color: var(--tcs-dim);
}

/* ===========================================================================
 * 4. THE FORM COLUMN  —  WooCommerce's own markup, restyled
 *
 * `.tcs-checkout__form` is the wrapper this theme writes; everything inside
 * it, from `.woocommerce-checkout` down, is WooCommerce core output.
 * ========================================================================= */

.tcs-checkout__form .woocommerce-checkout {
	display: flex;
	flex-direction: column;
	gap: var(--tcs-checkout-form-gap);
}

.tcs-checkout__form .col2-set,
.tcs-checkout__form .woocommerce-billing-fields,
.tcs-checkout__form .woocommerce-additional-fields {
	display: flex;
	flex-direction: column;
	gap: var(--tcs-checkout-field-group-gap);
}

.tcs-checkout__form .col2-set {
	gap: var(--tcs-checkout-form-gap);
}

/*
 * THE 48% COLUMNS. WooCommerce's own stylesheet floats `.col2-set .col-1`
 * (billing) and `.col-2` (additional info) side by side at 48% each. Inside
 * this theme's single-column form that halved EVERY field — a 313px email
 * input on a 1440 screen (2026-09-03). The columns stack at full width;
 * the wrapper-led selector out-ranks Woo's `.woocommerce-page .col2-set
 * .col-1` by carrying the same page class.
 */
.tcs-checkout__form .col2-set .col-1,
.tcs-checkout__form .col2-set .col-2,
.woocommerce-page .tcs-checkout__form .col2-set .col-1,
.woocommerce-page .tcs-checkout__form .col2-set .col-2 {
	float: none;
	width: 100%;
	max-width: none;
}

/*
 * Each section is a white card on the cream ground (redesign 2026-09-03):
 * the fields stop floating on the page and read as one form.
 */
.tcs-checkout__form .woocommerce-billing-fields,
.tcs-checkout__form .woocommerce-additional-fields,
.tcs-checkout__form .woocommerce-shipping-fields {
	padding: var(--tcs-checkout-card-pad);
	background: var(--tcs-white);
	border: var(--tcs-border-width) solid var(--tcs-checkout-card-border);
	border-radius: var(--tcs-checkout-card-radius);
}

/*
 * A digital product ships nothing, but Woo still prints an empty
 * `.woocommerce-shipping-fields` div between billing and the notes — as a
 * card, that was a blank white box. No children, no card.
 */
.tcs-checkout__form .woocommerce-shipping-fields:not(:has(*)) {
	display: none;
}

.tcs-checkout__form .woocommerce-billing-fields h3,
.tcs-checkout__form .woocommerce-additional-fields h3,
.tcs-checkout__form .woocommerce-shipping-fields h3,
.tcs-checkout__form #order_review_heading {
	margin: 0;
	font-size: var(--tcs-fs-checkout-step);
	font-weight: var(--tcs-fw-semibold);
	letter-spacing: var(--tcs-ls-checkout-step);
	text-transform: uppercase;
	color: var(--tcs-orange);
	padding-bottom: 14px;
	border-bottom: var(--tcs-border-width) solid var(--tcs-border);
}

.tcs-checkout__form .form-row {
	display: flex;
	flex-direction: column;
	gap: var(--tcs-checkout-field-gap);
	margin: 0;
	padding: 0;
}

/*
 * The two-up rows (first/last name, in WooCommerce's default field set).
 * `.form-row-first` / `.form-row-last` are WooCommerce's own halving classes;
 * this pairs them into a grid rather than trusting WooCommerce's float-based
 * default, which this theme's global box-sizing reset does not otherwise
 * assume.
 */
.tcs-checkout__form .woocommerce-billing-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--tcs-checkout-field-row-gap);
}

.tcs-checkout__form .woocommerce-billing-fields__field-wrapper .form-row-wide {
	grid-column: 1 / -1;
}

/*
 * City / State and Postcode / Phone pair up. Woo marks all four `-wide`;
 * two short fields stacked full-width each is a form twice as tall as it
 * needs to be. Ids out-rank the class rule above without !important.
 */
.tcs-checkout__form #billing_city_field,
.tcs-checkout__form #billing_state_field,
.tcs-checkout__form #billing_postcode_field,
.tcs-checkout__form #billing_phone_field {
	grid-column: auto;
}

/*
 * WooCommerce's own stylesheet (kept on checkout) floats .form-row-first /
 * .form-row-last at width: 47%. Inside the grid above that 47% is of a
 * grid cell, so First name / Last name rendered ~72px wide. Grid places
 * them; the float halving must not.
 */
.tcs-checkout__form .woocommerce-billing-fields__field-wrapper .form-row-first,
.tcs-checkout__form .woocommerce-billing-fields__field-wrapper .form-row-last,
.woocommerce-page .tcs-checkout__form form .form-row-first,
.woocommerce-page .tcs-checkout__form form .form-row-last {
	float: none;
	width: auto;
	max-width: none;
}

.tcs-checkout__form label {
	font-size: var(--tcs-fs-checkout-label);
	font-weight: var(--tcs-fw-semibold);
	color: var(--tcs-black);
}

/* Woo appends "(optional)" inside the label; quieter than the label. */
.tcs-checkout__form label .optional {
	font-weight: var(--tcs-fw-regular, 400);
	color: var(--tcs-muted);
}

.tcs-checkout__form .required {
	color: var(--tcs-error);
	text-decoration: none;
}

.tcs-checkout__form input.input-text,
.tcs-checkout__form select,
.tcs-checkout__form textarea {
	width: 100%;
	min-height: var(--tcs-checkout-input-h);
	padding: var(--tcs-checkout-input-pad);
	background: var(--tcs-white);
	border: var(--tcs-border-width) solid var(--tcs-checkout-input-border);
	border-radius: var(--tcs-checkout-input-radius);
	font-family: var(--tcs-font);
	font-size: var(--tcs-fs-checkout-input);
	line-height: 1.3;
	color: var(--tcs-black);
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.tcs-checkout__form input.input-text::placeholder,
.tcs-checkout__form textarea::placeholder {
	color: var(--tcs-muted);
}

.tcs-checkout__form textarea {
	min-height: 112px;
	padding: var(--tcs-checkout-textarea-pad);
	resize: vertical;
}

/* Native selects: no browser chrome, the house chevron. */
.tcs-checkout__form select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 44px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230C0C0D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
	background-repeat: no-repeat;
	background-position: right 16px center;
	cursor: pointer;
}

/*
 * Woo's own `.woocommerce form .form-row .input-text` (0,3,1) and its
 * :focus twin (0,4,1, border-color: currentColor — a near-invisible
 * black-on-black) OUTRANK the bare two-class theme selectors above, and
 * have since Story 3.2 shipped: Story 4.5's keyboard sweep caught the
 * result — every checkout field had NO visible focus indicator and not
 * the designed resting border either. Same class of bug, same fix, as
 * account.css's own submit-button note: out-rank Woo by shape.
 *
 * THE WRAPPER LEADS, NOT `.woocommerce`: the billing fields live at
 * div.tcs-checkout__form > div.woocommerce > form.checkout > … >
 * p.form-row > input — the theme wrapper sits ABOVE Woo's own .woocommerce
 * div, and the body carries no .woocommerce class, so a selector that
 * starts `.woocommerce form .tcs-checkout__form …` can never match. The
 * theme's own wrapper is the stable anchor; (0,3,2) beats Woo's base and
 * (0,4,2) beats its :focus.
 *
 * EVERY SELECTOR CARRIES .input-text, including the textarea's: Woo gives
 * the order-notes textarea the same .input-text class it gives the
 * inputs, and a bare `textarea` in this list is (0,2,2) — two classes
 * short of Woo's (0,3,1), which is exactly how the notes field kept its
 * broken border after the inputs were fixed.
 *
 * THE SELECT LINE IS THE ONE EXCEPTION (code-review fix, 2026-09-04):
 * woocommerce_form_field() never puts .input-text on a <select> — the
 * served markup carries country_select/state_select/country_to_state
 * instead — so `select.input-text` matched nothing and Woo's own
 * `.woocommerce form .form-row select:focus{border-color:currentColor}`
 * (0,3,2) was the only rule a no-JS country/state select ever saw.
 * Select2 hides this from the JS-enabled keyboard sweep (it sets
 * tabindex="-1" on the native select once it initializes and the sweep
 * moves on to the select2 widget's own, already-fixed, focus ring above),
 * so the gap only bites a no-JS visitor tabbing to the real element.
 * Fixed by dropping the never-matching .input-text requirement and
 * doubling the wrapper class instead: repeating a selector counts twice
 * toward specificity even though it is the same class, so
 * `.tcs-checkout__form.tcs-checkout__form form .form-row select` reaches
 * (0,4,2) — same as the input/textarea rules — and beats Woo's (0,3,2)
 * outright rather than depending on stylesheet load order for a tie.
 */
.tcs-checkout__form form .form-row input.input-text,
.tcs-checkout__form.tcs-checkout__form form .form-row select,
.tcs-checkout__form form .form-row textarea.input-text {
	border: var(--tcs-border-width) solid var(--tcs-checkout-input-border);
}

.tcs-checkout__form form .form-row input.input-text:hover,
.tcs-checkout__form.tcs-checkout__form form .form-row select:hover,
.tcs-checkout__form form .form-row textarea.input-text:hover {
	border-color: var(--tcs-checkout-input-border-hover);
}

.tcs-checkout__form form .form-row input.input-text:focus,
.tcs-checkout__form.tcs-checkout__form form .form-row select:focus,
.tcs-checkout__form form .form-row textarea.input-text:focus {
	outline: none;
	border: var(--tcs-checkout-input-border-focus);
	box-shadow: var(--tcs-checkout-input-ring);
}

/* Woo's invalid state: the field says so, the label does not shout. */
.tcs-checkout__form form .form-row.woocommerce-invalid input.input-text,
.tcs-checkout__form form .form-row.woocommerce-invalid select.input-text {
	border-color: var(--tcs-error);
}

/*
 * Select2 — the widget WooCommerce puts over the country/state selects
 * (Story 4.5's sweep). Two fixes in one place:
 *
 *   1. The focus ring: the widget's own focus styling does not survive the
 *      floor's computed-style check, and a keyboard user tabbing through
 *      the form must see where they are. The house ring, on the selection
 *      box (the focusable part — tabindex 0, unlike the 1px native select
 *      it hides).
 *   2. The tap floor at mobile width: the selection box measured 39px
 *      tall against the 44px floor, under every text input beside it.
 */
.tcs-checkout__form .select2-selection:focus-visible {
	outline: 2px solid var(--tcs-orange);
	outline-offset: 2px;
}

/*
 * Select2's box, dressed as one of the inputs beside it (redesign
 * 2026-09-03): same height, border, radius and type, its arrow replaced by
 * the house chevron so the country and state fields stop looking like a
 * different form. Woo's own select2 sheet writes these at (0,3,0)-(0,4,0);
 * the wrapper plus Woo's own class names ties or beats every one.
 */
.tcs-checkout__form .select2-container .select2-selection--single {
	height: var(--tcs-checkout-input-h);
	background: var(--tcs-white);
	border: var(--tcs-border-width) solid var(--tcs-checkout-input-border);
	border-radius: var(--tcs-checkout-input-radius);
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.tcs-checkout__form .select2-container .select2-selection--single:hover {
	border-color: var(--tcs-checkout-input-border-hover);
}

.tcs-checkout__form .select2-container--open .select2-selection--single,
.tcs-checkout__form .select2-container--focus .select2-selection--single {
	border: var(--tcs-checkout-input-border-focus);
	box-shadow: var(--tcs-checkout-input-ring);
}

.tcs-checkout__form .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0 44px 0 16px;
	line-height: calc(var(--tcs-checkout-input-h) - 2px);
	font-family: var(--tcs-font);
	font-size: var(--tcs-fs-checkout-input);
	color: var(--tcs-black);
}

.tcs-checkout__form .select2-container .select2-selection--single .select2-selection__arrow {
	top: 0;
	right: 0;
	width: 44px;
	height: 100%;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230C0C0D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
}

.tcs-checkout__form .select2-container .select2-selection--single .select2-selection__arrow b {
	display: none;
}

/*
 * DROPDOWN OPTION ROWS, NOT JUST THE CLOSED SELECTOR (code-review fix,
 * 2026-09-04). Select2 renders its open dropdown (.select2-results, real
 * clickable role="option" rows) appended to <body>, not inside
 * .tcs-checkout__form — so it needs its own selector, unscoped to the form
 * wrapper the rest of this file uses. Neither WooCommerce's own Select2
 * bundle nor this file previously set an explicit row height; the default
 * ~26-30px padding fell under this project's 44px tap-target floor on the
 * country/state picker, a primary buy-path control.
 */
.select2-container--open .select2-results__option {
	min-height: var(--tcs-tap-min);
	display: flex;
	align-items: center;
	box-sizing: border-box;
}

/* The email hint, "Double-check this — the download link is sent to it." */
.tcs-checkout__form .woocommerce-checkout .form-row .description,
.tcs-checkout__form span.email-hint {
	font-size: var(--tcs-fs-checkout-hint);
	color: var(--tcs-muted);
}

/* ---------------------------------------------------------------------------
 * The payment-method list (rewritten 2026-09-05 after the first staging
 * deploy). WooCommerce renders each gateway as `li.wc_payment_method` with a
 * radio input, a label and a `.payment_box` holding the gateway's own form —
 * for Stripe that is the UPE iframe with its card fields, currency selector
 * and test-mode banner; for PayPal it is the buttons container.
 *
 * WHAT WENT WRONG BEFORE: the list was a `repeat(auto-fit, minmax(160px, 1fr))`
 * grid meant to sit two small tiles (Card / PayPal) side by side. With one
 * live gateway the browser still resolved three 194px tracks, so the Stripe
 * form — labels, card number, expiry, Link — was squeezed into 163px and
 * wrapped word by word. Nobody saw it locally because no gateway runs here.
 *
 * NOW: ONE COLUMN, FULL WIDTH, FOR ANY GATEWAY. Each gateway is a full-width
 * row (radio, icon, title); its payment box opens beneath it at the full
 * column width and every embedded form, iframe or button container is told
 * to fill that width. Selectors carry `.woocommerce-checkout` where they
 * must out-rank woocommerce.css's own `#payment` rules (the purple bubble,
 * the speech-tail `::before`, the 1em paddings).
 * ------------------------------------------------------------------------- */

.tcs-checkout__form ul.wc_payment_methods,
.woocommerce-checkout .tcs-checkout__form #payment ul.payment_methods {
	display: flex;
	flex-direction: column;
	gap: var(--tcs-checkout-field-row-gap);
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.tcs-checkout__form li.wc_payment_method,
.woocommerce-checkout .tcs-checkout__form #payment ul.payment_methods li.wc_payment_method {
	display: block;
	width: 100%;
	margin: 0;
	line-height: var(--tcs-lh-body);
}

.tcs-checkout__form li.wc_payment_method > label,
.woocommerce-checkout .tcs-checkout__form #payment ul.payment_methods li.wc_payment_method > label {
	display: flex;
	align-items: center;
	gap: var(--tcs-checkout-tile-gap);
	width: 100%;
	min-height: var(--tcs-checkout-tile-min-h);
	margin: 0;
	padding: var(--tcs-checkout-tile-pad) 18px;
	background: var(--tcs-white);
	border: var(--tcs-border-width) solid var(--tcs-checkout-input-border);
	border-radius: var(--tcs-checkout-tile-radius);
	font-size: 16px;
	font-weight: var(--tcs-fw-semibold);
	color: var(--tcs-black);
	cursor: pointer;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.tcs-checkout__form li.wc_payment_method > label:hover {
	border-color: var(--tcs-checkout-input-border-hover, var(--tcs-border-dark));
}

/* Gateway logos WooCommerce or a gateway plugin prints inside the label. */
.tcs-checkout__form li.wc_payment_method > label img {
	height: 22px;
	width: auto;
	margin-left: auto;
}

.tcs-checkout__form li.wc_payment_method input.input-radio {
	width: var(--tcs-checkout-tile-radio);
	height: var(--tcs-checkout-tile-radio);
	flex-shrink: 0;
	margin: 0;
	accent-color: var(--tcs-black);
}

/*
 * FOCUS-VISIBLE RING FOR THE RADIO ITSELF (code-review fix, 2026-09-04).
 * The tile's own :has(:checked) border communicates SELECTED; this ring
 * communicates FOCUS — the two are independent.
 */
.tcs-checkout__form li.wc_payment_method input.input-radio:focus-visible {
	outline: 2px solid var(--tcs-orange);
	outline-offset: 2px;
}

.tcs-checkout__form li.wc_payment_method:has(input.input-radio:checked) > label {
	border: var(--tcs-checkout-tile-border-selected);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--tcs-orange) 14%, transparent);
}

/* The Card/PayPal glyphs Story 3.3's tcs_checkout_gateway_icon() injects. */
.tcs-checkout__tile-icon {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
}

/*
 * THE PAYMENT BOX: the gateway's own form, full width beneath its row.
 * woocommerce.css paints it a purple bubble (#dcd7e2) with a speech-tail
 * ::before and .92em type; all of that is undone here.
 */
.tcs-checkout__form .payment_box,
.woocommerce-checkout .tcs-checkout__form #payment div.payment_box {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	margin: var(--tcs-checkout-field-gap) 0 0;
	padding: 20px;
	background: var(--tcs-cream);
	border: var(--tcs-border-width) solid var(--tcs-border);
	border-radius: var(--tcs-checkout-tile-radius);
	font-size: var(--tcs-fs-body-sm);
	line-height: var(--tcs-lh-body);
	color: var(--tcs-body);
}

.tcs-checkout__form .payment_box::before,
.woocommerce-checkout .tcs-checkout__form #payment div.payment_box::before {
	content: none;
	display: none;
}

.tcs-checkout__form .payment_box p {
	margin: 0 0 12px;
}

.tcs-checkout__form .payment_box p:last-child {
	margin-bottom: 0;
}

.tcs-checkout__form .payment_box a {
	color: var(--tcs-amber);
	font-weight: var(--tcs-fw-semibold);
}

/*
 * EVERYTHING A GATEWAY EMBEDS FILLS THE BOX. Stripe's UPE fieldset, its
 * currency selector and Link element, PayPal's button containers, and any
 * iframe or `.StripeElement` a future gateway drops in.
 */
.tcs-checkout__form .payment_box fieldset,
.tcs-checkout__form .payment_box .wc-stripe-upe-form,
.tcs-checkout__form .payment_box .wc-payment-form,
.tcs-checkout__form .payment_box .StripeElement,
.tcs-checkout__form .payment_box .wc-stripe-currency-selector,
.tcs-checkout__form .payment_box .wc-stripe-payment-method-instruction,
.tcs-checkout__form .payment_box iframe,
.tcs-checkout__form .payment_box [id^="ppc-button"],
.tcs-checkout__form .payment_box .ppcp-button-container,
.tcs-checkout__form .payment_box .wc-saved-payment-methods,
.tcs-checkout__form .payment_box .wc-payment-form > * {
	display: block;
	width: 100% !important;
	max-width: none !important;
	min-width: 0;
	margin-left: 0;
	margin-right: 0;
	float: none;
}

.tcs-checkout__form .payment_box fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

/* Stripe's "Test mode: use card 4242…" banner reads as a quiet info line. */
.tcs-checkout__form .payment_box .wc-stripe-payment-method-instruction {
	margin: 0 0 14px;
	padding: 10px 14px;
	background: var(--tcs-white);
	border: var(--tcs-border-width) solid var(--tcs-border);
	border-left: 3px solid var(--tcs-orange);
	border-radius: 8px;
	font-size: 14px;
	color: var(--tcs-body);
}

.tcs-checkout__form .payment_box .wc-stripe-payment-method-instruction strong {
	color: var(--tcs-black);
}

.tcs-checkout__form .payment_box .wc-stripe-copy-test-number {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 0 4px;
	background: none;
	border: 0;
	font: inherit;
	font-weight: var(--tcs-fw-semibold);
	color: var(--tcs-black);
	white-space: nowrap;
	cursor: pointer;
}

.tcs-checkout__form .payment_box .wc-stripe-currency-selector {
	margin: 0 0 14px !important;
}

/* Saved-card and "save my info" rows some gateways print under the form. */
.tcs-checkout__form .payment_box .woocommerce-SavedPaymentMethods-saveNew,
.tcs-checkout__form .payment_box .wc-stripe-save-source {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	font-size: 14px;
}

/* WooCommerce's own "place order" row inside #payment: no purple padding. */
.woocommerce-checkout .tcs-checkout__form #payment div.form-row.place-order {
	padding: 0;
	margin: var(--tcs-checkout-field-gap) 0 0;
}

/*
 * THE #PAYMENT BLOCK IS A CARD LIKE EVERY OTHER SECTION (fix, 2026-09-05).
 * WooCommerce's core stylesheet paints `#payment` a flat grey (#ebe9eb) and
 * gives `.payment_methods` its own padding and a dashed rule — inside this
 * theme's white-card form column that read as a grey slab dropped between
 * the notes card and the privacy line. It takes the same white card,
 * border and padding as .woocommerce-billing-fields above; the privacy
 * text and the (hidden) place-order button keep their own spacing.
 */
.tcs-checkout__form #payment,
.woocommerce-checkout .tcs-checkout__form #payment {
	padding: var(--tcs-checkout-card-pad);
	background: var(--tcs-white);
	border: var(--tcs-border-width) solid var(--tcs-checkout-card-border);
	border-radius: var(--tcs-checkout-card-radius);
}

.tcs-checkout__form #payment ul.payment_methods,
.woocommerce-checkout .tcs-checkout__form #payment ul.payment_methods {
	padding: 0;
	border-bottom: 0;
}

.tcs-checkout__form #payment div.form-row,
.woocommerce-checkout .tcs-checkout__form #payment div.form-row {
	padding: 0;
	margin: var(--tcs-checkout-field-gap) 0 0;
}

/*
 * THE "NO AVAILABLE PAYMENT METHODS" NOTICE (fix, 2026-09-05). When no
 * gateway is enabled, WooCommerce prints its notice as
 * `li > div.woocommerce-info` INSIDE `ul.wc_payment_methods` — the same
 * list the auto-fit tile grid above lays out in 160px columns. A 20-word
 * sentence in one 160px cell wrapped one word per line. The list drops the
 * grid when its only child is that notice, and the notice is restyled as a
 * full-width info box in the language account.css uses for .woocommerce-info.
 */
.tcs-checkout__form ul.wc_payment_methods:has(> li > .woocommerce-info),
.tcs-checkout__form ul.wc_payment_methods:has(> li.woocommerce-info) {
	display: block;
}

.tcs-checkout__form ul.wc_payment_methods > li:has(> .woocommerce-info) {
	display: block;
	width: 100%;
}

.tcs-checkout__form ul.wc_payment_methods .woocommerce-info,
.woocommerce-page .tcs-checkout__form ul.wc_payment_methods .woocommerce-info,
.woocommerce-checkout .tcs-checkout__form #payment ul.payment_methods li .woocommerce-info {
	display: block;
	width: 100%;
	margin: 0;
	padding: var(--tcs-checkout-tile-pad);
	background: var(--tcs-cream-2);
	border: var(--tcs-border-width) solid var(--tcs-checkout-input-border);
	border-left: 4px solid var(--tcs-orange);
	border-radius: var(--tcs-checkout-tile-radius);
	font-size: var(--tcs-fs-body-sm);
	font-weight: var(--tcs-fw-regular);
	line-height: var(--tcs-lh-body);
	color: var(--tcs-body);
	text-align: left;
}

/* Core's ::before glyph on .woocommerce-info is an icon-font "i" — this
 * theme ships no WooCommerce icon font, so it rendered as a stray square. */
.tcs-checkout__form ul.wc_payment_methods .woocommerce-info::before,
.woocommerce-page .tcs-checkout__form ul.wc_payment_methods .woocommerce-info::before {
	content: none;
	display: none;
}

/*
 * The Card/PayPal glyphs Story 3.3's tcs_checkout_gateway_icon() filter
 * injects (Checkout.dc.html:65-66) — sized and coloured to sit inline with
 * the tile label, inheriting `currentColor` so the muted (unselected) tile's
 * label colour and the selected tile's full-ink colour both carry through
 * to the icon without a second rule.
 */
.tcs-checkout__tile-icon {
	flex-shrink: 0;
	width: 21px;
	height: 21px;
}

.tcs-checkout__form .payment_box {
	margin-top: var(--tcs-checkout-field-gap);
	padding: var(--tcs-checkout-tile-pad);
	background: var(--tcs-cream-2);
	border-radius: var(--tcs-checkout-tile-radius);
	font-size: var(--tcs-fs-body-sm);
	color: var(--tcs-body);
}

/*
 * WOOCOMMERCE'S OWN ORDER-REVIEW TABLE AND "PLACE ORDER" BUTTON ARE HIDDEN,
 * NOT REMOVED. Code review (patch-level finding #1) confirmed live: without
 * this rule, `#order_review_heading` (the `<h3>Your order</h3>` heading) and
 * the `.woocommerce-checkout-review-order-table` (WooCommerce's own line
 * items/totals) both render in full, unstyled, in the form column — a
 * SECOND order summary beside this theme's own dark panel. Neither the
 * artboards nor the Design Notes describe two of either.
 *
 * SELECTOR FIX (code-review fix, 2026-09-04): this rule used to target
 * `.woocommerce-checkout-review-order`, the class WooCommerce's
 * `checkout/form-checkout.php` puts on `#order_review` ITSELF — the wrapper
 * `woocommerce_checkout_order_review` renders `#payment` (the gateway tiles,
 * terms checkbox and `#place_order`) inside. Hiding the wrapper hid the
 * payment method selector along with the redundant table, leaving a buyer
 * with no visible way to choose or confirm a gateway once one was wired
 * (Story 3.3). `.woocommerce-checkout-review-order-table` is the actual
 * `<table>` class from `checkout/review-order.php` — narrow enough to hide
 * only the redundant summary, leaving `#payment` visible.
 *
 * `display: none`, never removed from the markup and never `visibility:
 * hidden` or `opacity: 0`. wc-checkout.js's AJAX total-recalculation
 * (`update_order_review`) reads and rewrites `#order_review`'s contents on
 * every field change and coupon apply regardless of whether the table is
 * visible, and `#place_order` is the actual `type="submit"` control
 * wc-checkout.js binds its submit handler to — this theme's own
 * `tcs-checkout__pay` button is `type="button"` and inert by design (Design
 * Notes: Story 3.3 wires it). Removing either from the DOM, rather than
 * hiding it, would break the checkout's own submission and recalculation
 * mechanics, which the spec requires to keep working unmodified.
 */
.tcs-checkout__form .woocommerce-checkout-review-order-table,
.tcs-checkout__form #order_review_heading,
.tcs-checkout__form #place_order {
	display: none;
}

.tcs-checkout__form .woocommerce-terms-and-conditions-wrapper {
	font-size: var(--tcs-fs-checkout-hint);
	color: var(--tcs-muted);
}

/*
 * TAP FLOOR (code-review fix, 2026-09-04): these two WooCommerce-rendered
 * inline links live inside #payment, which only became visible once the
 * order-review hide-selector fix above stopped hiding #payment along with
 * the redundant summary table — so they were never actually on screen (and
 * never swept) before today. Same scoped-to-the-link technique
 * .tcs-checkout__refund-link already uses above: the 44px box belongs to
 * the link, not the surrounding non-interactive sentence.
 */
.tcs-checkout__form .woocommerce-privacy-policy-link,
.tcs-checkout__form .woocommerce-terms-and-conditions-link {
	display: inline-flex;
	align-items: center;
	min-height: var(--tcs-tap-min);
	margin-block: calc((var(--tcs-tap-min) - 1em * var(--tcs-lh-body)) / -2);
}

/* ===========================================================================
 * 5. MOBILE  —  CheckoutMobile.dc.html
 *
 * THE SUMMARY-ABOVE-FORM ORDER NEEDS NO RULE HERE. It is the unmodified
 * SOURCE order page-checkout.php already writes; only the desktop `order`
 * above ever moves it, and that rule is itself inside no media query, so it
 * simply never applies below the breakpoint gate mirrors the rest of the
 * system with (768px, sections.css's own mobile cutover).
 * ========================================================================= */

@media (max-width: 768px) {

	/*
	 * The Select2 selection box's tap floor (Story 4.5's sweep: 39px tall
	 * at mobile width, under the 44px floor and under every text input
	 * beside it). The focus ring lives with the base rule above; this is
	 * the mobile-band size only — the floor binds touch widths.
	 */
	.tcs-checkout__form .select2-selection {
		min-height: var(--tcs-tap-min);
	}

	/*
	 * A design-QA finding: CheckoutMobile.dc.html has NO "Checkout" headline
	 * at all — the layout goes straight from the header into the full-bleed
	 * order summary. The desktop H1 was left visible here with only a
	 * margin-bottom adjustment, which the negative top margin on
	 * .tcs-checkout__summary below (pulling the dark card up by
	 * --tcs-section-y-mobile, 56px, to go full-bleed) outran, so the summary
	 * card visibly overlapped and clipped the H1's own letterforms.
	 *
	 * Visually hidden rather than removed: an `<h1>` still gives every page
	 * exactly one accessible heading (this site's own accessibility floor),
	 * and GeneratePress's own `.screen-reader-text` utility is the house
	 * convention for exactly this — present in the DOM/accessibility tree,
	 * invisible on screen, matching the artboard pixel-for-pixel.
	 */
	.tcs-checkout__title {
		position: absolute !important;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.tcs-checkout__layout {
		display: block;
	}

	/*
	 * The summary sheds its panel treatment and becomes a full-bleed dark
	 * block (CheckoutMobile.dc.html:46) — negative margins pull it out to
	 * the band's own edges, since .tcs-band still carries the page's side
	 * padding at this width.
	 */
	.tcs-checkout__summary {
		margin: calc(-1 * var(--tcs-section-y-mobile)) calc(-1 * var(--tcs-section-x-mobile)) 0;
		padding: var(--tcs-checkout-mobile-summary-pad);
		border-radius: 0;
	}

	.tcs-checkout__product-thumb {
		width: var(--tcs-checkout-thumb-w-mobile);
		height: var(--tcs-checkout-thumb-h-mobile);
		padding: var(--tcs-checkout-thumb-pad-mobile);
	}

	.tcs-checkout__product {
		gap: var(--tcs-checkout-thumb-gap-mobile);
	}

	.tcs-checkout__total-value--grand {
		font-size: var(--tcs-fs-checkout-total-mobile);
	}

	/*
	 * THE PAY BUTTON MOVES INTO THE STICKY BAR ON MOBILE
	 * (CheckoutMobile.dc.html:90-92) — ONE button, repositioned, never a
	 * second control (see page-checkout.php's own note on this). The bar
	 * pins to the viewport bottom so it never overlaps the trust-signal
	 * text above it, which stays in normal flow in `.tcs-checkout__summary`.
	 */
	.tcs-checkout__pay-bar {
		position: sticky;
		bottom: 0;
		z-index: 2;
		margin: 0 calc(-1 * var(--tcs-section-x-mobile));
		padding: var(--tcs-checkout-paybar-pad);
		background: var(--tcs-checkout-paybar-bg);
		border-top: var(--tcs-border-width) solid var(--tcs-border-dark);
	}

	.tcs-checkout__form {
		padding: var(--tcs-checkout-mobile-content-pad);
	}

	.tcs-checkout__form .woocommerce-checkout {
		gap: var(--tcs-checkout-mobile-stack-gap);
	}

	.tcs-checkout__form .woocommerce-billing-fields__field-wrapper {
		grid-template-columns: 1fr;
	}

	.tcs-checkout__form input.input-text,
	.tcs-checkout__form select,
	.tcs-checkout__form textarea {
		min-height: var(--tcs-checkout-input-h-mobile);
		padding: var(--tcs-checkout-input-pad-mobile);
	}

	.tcs-checkout__form textarea {
		padding: var(--tcs-checkout-textarea-pad);
	}

	.tcs-checkout__form .select2-container .select2-selection--single {
		height: var(--tcs-checkout-input-h-mobile);
	}

	.tcs-checkout__form .select2-container .select2-selection--single .select2-selection__rendered {
		line-height: calc(var(--tcs-checkout-input-h-mobile) - 2px);
	}

	/* The cards keep their edges but give back padding at 390. */
	.tcs-checkout__form .woocommerce-billing-fields,
	.tcs-checkout__form .woocommerce-additional-fields,
	.tcs-checkout__form .woocommerce-shipping-fields {
		padding: var(--tcs-checkout-card-pad-mobile);
	}

	/* One column at 390: the paired City/State and Postcode/Phone rows
	 * go back to full width. */
	.tcs-checkout__form #billing_city_field,
	.tcs-checkout__form #billing_state_field,
	.tcs-checkout__form #billing_postcode_field,
	.tcs-checkout__form #billing_phone_field {
		grid-column: 1 / -1;
	}

	.tcs-checkout__summary {
		position: static;
		border: 0;
		box-shadow: none;
		/*
		 * code-review fix, 2026-09-04: neutralises the desktop tall-panel
		 * guard above (section 2) — mobile is static-positioned and
		 * full-bleed (CheckoutMobile.dc.html:46) and must never scroll
		 * internally, only the sticky >=769px panel needs a ceiling.
		 */
		max-height: none;
		overflow-y: visible;
	}

	.tcs-checkout__form {
		max-width: none;
	}

	.tcs-checkout__lede {
		display: none;
	}
}

/* ===========================================================================
 * 6. THE DECLINED PAGE  —  Story 3.3, CheckoutDeclined.dc.html
 *
 * page-declined.php reuses EVERY class above unchanged (the two-column
 * layout, the summary panel, the pay button, the form column, the mobile
 * stack) — this section adds only what is genuinely new on that page: the
 * decline banner, the failed-tile marking, the alternate-gateway link, and
 * the manual-fallback block. Nothing here re-declares a rule sections 1-5
 * already write.
 * ========================================================================= */

.tcs-checkout__declined-banner {
	display: flex;
	align-items: flex-start;
	gap: var(--tcs-declined-banner-gap);
	padding: var(--tcs-declined-banner-pad);
	margin-bottom: var(--tcs-checkout-form-gap);
	background: var(--tcs-declined-banner-bg);
	border: var(--tcs-border-width) solid var(--tcs-declined-banner-border);
	border-radius: var(--tcs-declined-banner-radius);
}

.tcs-checkout__declined-icon {
	flex-shrink: 0;
	width: var(--tcs-declined-banner-icon);
	height: var(--tcs-declined-banner-icon);
	margin-top: 2px;
	color: var(--tcs-error);
}

.tcs-checkout__declined-copy {
	display: flex;
	flex-direction: column;
	gap: var(--tcs-declined-banner-copy-gap);
}

.tcs-checkout__declined-title {
	font-size: 17px;
	font-weight: var(--tcs-fw-semibold);
	letter-spacing: -0.022em;
}

.tcs-checkout__declined-text {
	margin: 0;
	font-size: var(--tcs-fs-checkout-input);
	line-height: 1.66;
	color: var(--tcs-body);
}

/*
 * THE FAILED TILE, MARKED RED — CheckoutDeclined.dc.html:118-122. Driven by
 * js/checkout.js's data-tcs-declined-gateway attribute on <body> (set only
 * once the retained-values stash from a real decline is restored), never by
 * a guess: a buyer who lands here with no stash (a bookmarked link, a manual
 * visit) sees the plain, unmarked selector — there is no failed method to
 * mark, and marking one anyway would be inventing a decline that never
 * happened.
 *
 * :has() is already load-bearing elsewhere in this file (the selected-tile
 * border, above) for the same class of browser-support reasoning; this rule
 * matches that precedent rather than introducing a new technique.
 */
body[data-tcs-declined-gateway="stripe"] .tcs-checkout__form li.wc_payment_method.payment_method_stripe > label,
body[data-tcs-declined-gateway="ppcp-gateway"] .tcs-checkout__form li.wc_payment_method.payment_method_ppcp-gateway > label {
	border: var(--tcs-declined-tile-border);
}

body[data-tcs-declined-gateway="stripe"] .tcs-checkout__form li.wc_payment_method.payment_method_stripe .payment_box,
body[data-tcs-declined-gateway="ppcp-gateway"] .tcs-checkout__form li.wc_payment_method.payment_method_ppcp-gateway .payment_box {
	border: var(--tcs-declined-tile-border);
}

/*
 * The "Declined" badge itself. WAS a CSS ::after pseudo-element on the
 * label — pushed to the tile's trailing edge the same way the artboard's
 * own inline badge sits (Checkout.dc.html:120: "margin-left: auto") — but
 * ::after generated content is not reliably exposed to assistive tech and
 * cannot be aria-describedby'd, which fails the a11y floor (code review:
 * colour/generated-content-only marking, no association or announcement).
 *
 * NOW a real DOM node: js/checkout.js's markDeclinedGatewayAccessibly()
 * (code-review fix, 2026-09-04) appends a `role="status"` span carrying
 * this class into the SAME label, referenced by the radio's own
 * aria-describedby — this rule only supplies its visual position/type, the
 * "Declined" text itself lives in the DOM rather than in CSS content. Still
 * no WooCommerce template is forked (Boundaries: markup restyled, never
 * forked): the badge is inserted at runtime into markup WooCommerce already
 * rendered, the same technique this file's other JS-driven state (the
 * declined-banner variant swap, the pay-unavailable notice) already uses.
 *
 * No new `display: flex` rule needed here: `li.wc_payment_method > label`
 * is already a flex row unconditionally (the base tile rule above), which
 * is what lets `margin-left: auto` below push the badge to the trailing
 * edge exactly as it did as a ::after.
 */
.tcs-checkout__declined-badge {
	margin-left: auto;
	font-size: var(--tcs-declined-badge-fs);
	font-weight: var(--tcs-fw-semibold);
	color: var(--tcs-error);
}

/*
 * THE ALTERNATE-GATEWAY LINK. page-declined.php renders BOTH links in
 * markup (data-tcs-checkout-alternate-gateway="ppcp-gateway"/"stripe") so
 * the page still has a real, working retry action with no script running at
 * all — the no-JS fallback discipline js/nav.js documents for the mobile
 * overlay applies here too. Once js/checkout.js sets
 * data-tcs-declined-gateway, exactly one of the two becomes visible: the
 * one that does NOT match the gateway that just failed.
 */
.tcs-checkout__alt-gateway {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.tcs-checkout__alt-gateway-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--tcs-declined-alt-gap);
	min-height: var(--tcs-tap-min);
	font-size: var(--tcs-declined-alt-fs);
	font-weight: var(--tcs-fw-semibold);
	color: var(--tcs-orange);
	text-align: center;
}

/*
 * The house focus ring for the declined page's alternate-gateway links and
 * the checkout trust row's refund link (Story 4.5's keyboard sweep: both
 * carried no focus indicator of their own). Plain :focus + :focus-visible
 * with the :not() fallback, the chrome.css pattern.
 */
.tcs-checkout__alt-gateway-link:focus,
.tcs-checkout__refund-link:focus {
	outline: 2px solid var(--tcs-orange);
	outline-offset: 3px;
}

.tcs-checkout__alt-gateway-link:focus:not(:focus-visible),
.tcs-checkout__refund-link:focus:not(:focus-visible) {
	outline: none;
}

/*
 * Before JS runs (or with JS disabled) BOTH links show — a working retry
 * choice either way, never a dead end. Once data-tcs-declined-gateway is
 * set, the link whose OWN data-tcs-checkout-alternate-gateway matches that
 * SAME id would only resubmit with the method that just failed, so it is
 * hidden; the genuinely alternate link — the other one — stays. One
 * attribute drives both the JS click target and this visibility rule (see
 * page-declined.php's own comment on why there is no second attribute).
 */
body[data-tcs-declined-gateway="stripe"] .tcs-checkout__alt-gateway-link[data-tcs-checkout-alternate-gateway="stripe"],
body[data-tcs-declined-gateway="ppcp-gateway"] .tcs-checkout__alt-gateway-link[data-tcs-checkout-alternate-gateway="ppcp-gateway"] {
	display: none;
}

.tcs-checkout__fallback {
	display: flex;
	flex-direction: column;
	gap: var(--tcs-declined-fallback-gap);
}

.tcs-checkout__fallback-title {
	font-size: var(--tcs-declined-fallback-title-fs);
	font-weight: var(--tcs-fw-semibold);
	color: var(--tcs-cream);
}

.tcs-checkout__fallback-text {
	font-size: var(--tcs-declined-fallback-text-fs);
	line-height: 1.6;
	color: var(--tcs-body-dark);
}

/*
 * UNLIKE .tcs-checkout__refund-link (a supplementary trust line), this link
 * IS one of the spec's three required declined-page CTAs — "one manual
 * fallback (email support to place the order by hand)" — so the 44px floor
 * applies to it directly rather than being exempted the way a purely
 * informational inline link is. Same inline-flex + negative-margin
 * technique .tcs-checkout__refund-link already uses immediately above in
 * this file: it grows the LINK's own tap target to 44px while leaving the
 * surrounding sentence's line-height untouched, so the artboard's inline
 * phrasing (CheckoutDeclined.dc.html:144: "Email [link] and we will...")
 * survives unchanged.
 */
.tcs-checkout__fallback-link {
	display: inline-flex;
	align-items: center;
	min-height: var(--tcs-tap-min);
	margin-block: calc((var(--tcs-tap-min) - 1em * 1.6) / -2);
	color: var(--tcs-orange);
	text-decoration: underline;
}

@media (max-width: 768px) {

	.tcs-checkout__declined-banner {
		margin-bottom: var(--tcs-checkout-mobile-stack-gap);
	}
}