/**
 * Checkout and order received
 *
 * Loads after cart.css, which already defines the order summary card
 * (.ml-summary, its table, notes and the gradient CTA). Only what is specific
 * to checkout lives here: the header band with its step indicator, the form
 * field grid, the payment method cards and the confirmation screen.
 */

/* -------------------------------------------------------------------------
 * Header band + step indicator
 * ---------------------------------------------------------------------- */

.ml-checkout__head {
	background: linear-gradient(180deg, var(--ml-stage) 0%, var(--ml-stage-soft) 100%);
	padding: 22px 24px 26px;
}

.ml-checkout__head-inner {
	max-width: var(--ml-container);
	margin: 0 auto;
}

.ml-checkout__title {
	margin: 0 0 22px;
	font-size: clamp(26px, 3.4vw, 38px);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--ml-navy);
}

.ml-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
}

.ml-steps__item {
	display: flex;
	align-items: center;
}

/* The connector between steps. */
.ml-steps__item + .ml-steps__item::before {
	content: "";
	width: clamp(20px, 5vw, 56px);
	height: 2px;
	margin: 0 12px;
	border-radius: 2px;
	background: #cddce8;
}

.ml-steps__item.is-current::before,
.ml-steps__item.is-done::before {
	background: var(--ml-cyan);
}

.ml-steps__link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--ml-muted);
	text-decoration: none;
	transition: color var(--ml-t-base) var(--ml-e-standard);
}

.ml-steps__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid #cddce8;
	background: var(--ml-white);
	font-size: 13px;
	font-weight: 700;
	color: var(--ml-muted);
	font-variant-numeric: tabular-nums;
	transition: transform var(--ml-t-base) var(--ml-e-standard), background-color var(--ml-t-base) var(--ml-e-standard), border-color var(--ml-t-base) var(--ml-e-standard), color var(--ml-t-base) var(--ml-e-standard), box-shadow var(--ml-t-base) var(--ml-e-standard);
}

.ml-steps__item.is-done .ml-steps__link,
.ml-steps__item.is-current .ml-steps__link {
	color: var(--ml-navy);
	font-weight: 600;
}

.ml-steps__item.is-done .ml-steps__num {
	background: var(--ml-cyan);
	border-color: var(--ml-cyan);
	color: var(--ml-white);
}

.ml-steps__item.is-current .ml-steps__num {
	background: var(--ml-white);
	border-color: var(--ml-cyan);
	color: var(--ml-cyan);
	box-shadow: 0 0 0 4px rgba(0, 175, 240, 0.15);
}

a.ml-steps__link:hover .ml-steps__num,
a.ml-steps__link:focus-visible .ml-steps__num {
	transform: translateY(-2px);
	box-shadow: 0 10px 18px -10px rgba(var(--ml-shadow-tint), 0.9);
}

a.ml-steps__link:hover,
a.ml-steps__link:focus-visible {
	color: var(--ml-cyan);
}

/* -------------------------------------------------------------------------
 * Body layout
 * ---------------------------------------------------------------------- */

.ml-checkout-page .woocommerce {
	background: var(--ml-white);
}

.ml-checkout__body-inner {
	max-width: var(--ml-container);
	margin: 0 auto;
	padding: 28px 24px 56px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 400px;
	gap: 28px;
	align-items: start;
}

.ml-checkout__main {
	min-width: 0;
}

.ml-checkout__aside {
	position: sticky;
	top: 24px;
}

/* -------------------------------------------------------------------------
 * Customer details card
 * ---------------------------------------------------------------------- */

/*
 * (1,2,0), because WooCommerce's `.woocommerce-js #customer_details
 * { border-radius: 0 }` is an ID selector at (1,1,0) and squared this card -
 * measured 2026-09-14. The small-screen padding override moved with it.
 */
.ml-checkout-page #customer_details.ml-checkout__details {
	padding: 24px;
	border-radius: 14px;
}

/* Astra relocates the shipping form into the billing hook, leaving .col-2
   empty. Collapse it rather than leaving a gap. */
.ml-checkout__details .col-2:empty {
	display: none;
}

.ml-checkout__details .col-1,
.ml-checkout__details .col-2 {
	width: 100%;
	float: none;
}

.ml-checkout__details h3 {
	margin: 0 0 22px;
	font-size: 18px;
	font-weight: 700;
	color: var(--ml-navy);
}

/*
 * margin-bottom only, (1,2,1). Astra's inline `#customer_details h3:not(.elementor-
 * widget-woocommerce-checkout-page h3) { margin: 0 0 20px }` is (1,1,2) and beat the
 * rule above. Only the bottom is named so `h3#ship-to-different-address`'s 26px
 * top margin still applies. 22px: heading -> content on the spacing scale.
 */
.ml-checkout-page #customer_details.ml-checkout__details h3 {
	margin-bottom: 22px;
}

/*
 * The order summary title. Astra's inline `form #order_review_heading:not(.elementor-
 * widget-woocommerce-checkout-page #order_review_heading) { margin: 0 }` is (2,1,1),
 * which left 0px between "Your order" and its table. The doubled id makes this
 * (2,2,1). 22px: heading -> content on the spacing scale.
 */
.ml-checkout-page form #order_review_heading#order_review_heading.ml-summary__title {
	margin: 0 0 22px;
}

/*
 * THE ORDER-REVIEW BOX RULES, UNDONE INSIDE THE SUMMARY CARD (2026-09-15).
 *
 * WooCommerce's inline CSS (Astra-generated) still styles checkout as its own
 * two-column layout, and two of those rules landed inside .ml-summary:
 *
 *   @media (min-width: 922px)
 *   .woocommerce.woocommerce-checkout form #order_review(_heading)  (1,2,1)
 *       { width: 40%; float: right; clear: right }
 *   form #order_review(_heading):not(.elementor-... #order_review)   (2,1,1)
 *       { padding: 0 2em / 1.5em 1.5em 1em; border: 2px solid; ... }
 *
 * At >= 922px the heading and the review became 40% of the 400px card (142px,
 * 74px of content) floated right, the notes list wrapped beside them, and the
 * 166px table overflowed into the card's `overflow: hidden` - the price column
 * was cut at 1024 and 1440. At every width the 2px grey frame and its 2em
 * padding drew a box inside the card. Measured with orderframe.js.
 *
 * Doubled id, (2,2,1), beats both. Width/float/clear/side margins/padding/border
 * only - the heading's 22px bottom margin stays with the rule above, and the
 * heading -> table gap is still 22px (it was measured box to table). The AJAX
 * refresh replaces #order_review's CONTENTS, not the element, so this holds.
 */
.ml-checkout-page form #order_review_heading#order_review_heading.ml-summary__title,
.ml-checkout-page form #order_review#order_review.woocommerce-checkout-review-order {
	width: auto;
	float: none;
	clear: none;
	margin-left: 0;
	margin-right: 0;
	padding: 0;
	border: 0;
}

/*
 * "Ship to a different address" - margin-top only, (2,2,1). The rule that asks for
 * 26px, `.ml-checkout__details h3#ship-to-different-address`, is (1,1,1) and has
 * never rendered: Astra's inline `#customer_details h3:not(...) { margin: 0 0 20px }`
 * at (1,1,2) zeroed it, so the heading's 22px padding and top border sat directly
 * on the billing fields. Found by the 2026-09-15 spacing side-effect check, which
 * read 0px at 1440 and 360.
 */
.ml-checkout-page #customer_details.ml-checkout__details h3#ship-to-different-address {
	margin-top: 26px;
}

.ml-checkout__details h3#ship-to-different-address {
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var(--ml-line);
	font-size: 16px;
}

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

/* ---------- Fields ---------- */

.ml-checkout-page .form-row {
	display: flex;
	flex-direction: column;
	margin: 0 0 16px;
	padding: 0;
}

.ml-checkout-page .form-row-wide,
.ml-checkout-page .form-row.notes,
.ml-checkout-page #billing_address_1_field,
.ml-checkout-page #billing_address_2_field,
.ml-checkout-page #shipping_address_1_field,
.ml-checkout-page #shipping_address_2_field {
	grid-column: 1 / -1;
}

.ml-checkout-page .form-row label {
	margin-bottom: 6px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ml-navy);
}

.ml-checkout-page .form-row .required {
	color: #d33a3a;
	text-decoration: none;
}

.ml-checkout-page .form-row .optional {
	font-weight: 500;
	color: var(--ml-muted);
}

.ml-checkout-page .form-row input.input-text,
.ml-checkout-page #customer_details .form-row textarea,
.ml-checkout-page .form-row select,
.ml-checkout-page .select2-container .select2-selection--single {
	width: 100%;
	height: 48px;
	padding: 0 14px;
	border: 1px solid var(--ml-line);
	border-radius: 9px;
	background: var(--ml-white);
	font-family: var(--ml-font);
	font-size: 15px;
	color: var(--ml-navy);
	transition: border-color var(--ml-t-base) var(--ml-e-standard), box-shadow var(--ml-t-base) var(--ml-e-standard);
}

.ml-checkout-page #customer_details .form-row textarea {
	height: auto;
	min-height: 104px;
	padding: 12px 14px;
	line-height: 1.55;
	resize: vertical;
}

/*
 * THE ID-SCOPED LINES ARE LOAD-BEARING - 2026-09-14. Astra's inline
 * `.woocommerce .woocommerce-billing-fields .woocommerce-billing-fields__field-wrapper
 * .woocommerce-input-wrapper > .input-text:focus { border-color: inherit }` is
 * (0,6,0) and `.woocommerce #order_comments:focus` is (1,2,0): every text field
 * took a NAVY focus border (the inherited ink) while the selects stayed cyan, and
 * WooCommerce's (0,3,1) textarea rule left the order notes square and grey.
 */
.ml-checkout-page .form-row input.input-text:focus,
.ml-checkout-page #customer_details .form-row input.input-text:focus,
.ml-checkout-page #customer_details .form-row textarea:focus,
.ml-checkout-page .form-row select:focus,
.ml-checkout-page .select2-container--focus .select2-selection--single,
.ml-checkout-page .select2-container--open .select2-selection--single {
	outline: none;
	border-color: var(--ml-cyan);
	box-shadow: 0 0 0 3px rgba(0, 175, 240, 0.16);
}

/* Select2 renders the country and state pickers; align it with the inputs. */
.ml-checkout-page .select2-container .select2-selection--single {
	display: flex;
	align-items: center;
}

.ml-checkout-page .select2-container .select2-selection__rendered {
	padding: 0;
	line-height: 1.4;
	color: var(--ml-navy);
}

.ml-checkout-page .select2-container .select2-selection__arrow {
	height: 46px;
	right: 8px;
}

/* WooCommerce's inline validation states. */
.ml-checkout-page .woocommerce-invalid input.input-text,
.ml-checkout-page .woocommerce-invalid select,
.ml-checkout-page .woocommerce-invalid .select2-selection--single {
	border-color: #e08a8a;
	box-shadow: 0 0 0 3px rgba(211, 58, 58, 0.12);
}

.ml-checkout-page .woocommerce-validated input.input-text {
	border-color: #9fd9b4;
}

/* Ship to a different address - the checkbox in the h3. */
.ml-checkout-page #ship-to-different-address label {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--ml-navy);
	cursor: pointer;
}

.ml-checkout-page #ship-to-different-address input[type="checkbox"] {
	width: 17px;
	height: 17px;
	accent-color: var(--ml-cyan);
}

/* -------------------------------------------------------------------------
 * Back to cart
 * ---------------------------------------------------------------------- */

.ml-checkout__back {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 20px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ml-body);
	text-decoration: none;
	transition: color var(--ml-t-base) var(--ml-e-standard), transform var(--ml-t-base) var(--ml-e-standard);
}

.ml-checkout__back:hover,
.ml-checkout__back:focus-visible {
	color: var(--ml-cyan);
	transform: translateX(-2px);
}

/* -------------------------------------------------------------------------
 * Order review table (inside the summary card)
 * ---------------------------------------------------------------------- */

.ml-review {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

.ml-review thead {
	display: none;
}

.ml-review tbody tr.cart_item td {
	padding: 12px 0;
	border: 0;
	border-bottom: 1px solid var(--ml-line);
	background: none;
	vertical-align: middle;
}

.ml-review td.product-name {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14.5px;
	line-height: 1.4;
	color: var(--ml-navy);
}

/*
 * THE TILE IS ON THE WRAPPER AND THE IMAGE MULTIPLIES (2026-09-15) - the same
 * treatment as the cart thumbnail, see cart.css.
 *
 * `background` on the <img> itself cannot be blended into (it belongs to the
 * element doing the blending), so white-ground packshots painted a white square
 * over their own tile. The colour now sits on this span, directly behind the
 * image; `border-radius` matches the image's 9px so the tile does not show
 * square corners past the image's rounded border. The template always renders
 * the span, so unlike the cart there is no unwrapped case.
 */
.ml-review__thumb {
	position: relative;
	flex: 0 0 auto;
	width: 54px;
	height: 54px;
	border-radius: 9px;
	background: var(--ml-stage-soft);
}

.ml-review__thumb img {
	width: 54px;
	height: 54px;
	border-radius: 9px;
	object-fit: cover;
	border: 1px solid var(--ml-line);
	mix-blend-mode: multiply;
}

/* Quantity badge on the thumbnail corner. */
.ml-review__thumb .product-quantity {
	position: absolute;
	top: -7px;
	right: -7px;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 11px;
	background: var(--ml-navy);
	color: var(--ml-white);
	font-size: 11.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.ml-review__name {
	min-width: 0;
	font-weight: 500;
}

.ml-review td.product-total {
	text-align: right;
	white-space: nowrap;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ml-navy);
	font-variant-numeric: tabular-nums;
}

/* Totals foot - matches the cart summary table. */
.ml-review tfoot th,
.ml-review tfoot td {
	padding: 11px 0;
	border: 0;
	border-bottom: 1px solid var(--ml-line);
	background: none;
	font-size: 14.5px;
}

.ml-review tfoot th {
	font-weight: 500;
	color: var(--ml-body);
	text-align: left;
}

.ml-review tfoot td {
	text-align: right;
	font-weight: 600;
	color: var(--ml-navy);
	font-variant-numeric: tabular-nums;
}

.ml-review tfoot tr.cart-discount td {
	color: #23a455;
}

.ml-review tfoot tr.order-total th,
.ml-review tfoot tr.order-total td {
	padding-top: 15px;
	border-bottom: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--ml-navy);
}

.ml-review ul#shipping_method {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: right;
}

.ml-review ul#shipping_method li {
	margin: 0 0 6px;
	font-weight: 500;
}

.ml-review .woocommerce-shipping-destination {
	margin: 8px 0 0;
	font-size: 12.5px;
	font-weight: 400;
	color: var(--ml-muted);
	text-align: right;
}

/* -------------------------------------------------------------------------
 * Payment methods
 * ---------------------------------------------------------------------- */

.ml-payment {
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid var(--ml-line);
}

.ml-payment__title {
	margin: 0 0 12px;
	font-size: 15.5px;
	font-weight: 700;
	color: var(--ml-navy);
}

.ml-payment .payment_methods {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ml-payment__method {
	position: relative;
	border: 1px solid var(--ml-line);
	border-radius: 11px;
	background: var(--ml-white);
	overflow: hidden;
	transition: border-color var(--ml-t-base) var(--ml-e-standard), box-shadow var(--ml-t-base) var(--ml-e-standard), transform var(--ml-t-base) var(--ml-e-standard);
}

.ml-payment__method:hover {
	transform: translateY(-2px);
	border-color: #bfe3f7;
	box-shadow: 0 14px 26px -20px rgba(10, 37, 64, 0.7);
}

/* The real radio is hidden but focusable; .ml-payment__radio is the visual. */
.ml-payment__method > input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}

.ml-payment__method > label {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 0;
	padding: 15px 16px;
	font-size: 15px;
	font-weight: 600;
	color: var(--ml-navy);
	cursor: pointer;
}

.ml-payment__radio {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid #cddce8;
	background: var(--ml-white);
	transition: border-color var(--ml-t-base) var(--ml-e-standard), box-shadow var(--ml-t-base) var(--ml-e-standard);
}

.ml-payment__label {
	flex: 1 1 auto;
	min-width: 0;
}

.ml-payment__icon img {
	max-height: 24px;
	width: auto;
}

.ml-payment__method > input[type="radio"]:checked ~ label .ml-payment__radio {
	border-color: var(--ml-cyan);
	box-shadow: inset 0 0 0 4px var(--ml-cyan);
}

.ml-payment__method:has(> input[type="radio"]:checked) {
	border-color: var(--ml-cyan);
	box-shadow: 0 0 0 3px rgba(0, 175, 240, 0.14);
}

.ml-payment__method > input[type="radio"]:focus-visible ~ label {
	outline: 3px solid var(--ml-cyan);
	outline-offset: -3px;
}

.ml-payment .payment_box {
	margin: 0;
	padding: 0 16px 15px 47px;
	background: none;
	border: 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--ml-body);
}

.ml-payment .payment_box::before {
	display: none;
}

.ml-payment .payment_box p:last-child {
	margin-bottom: 0;
}

/* ---------- Place order ---------- */

.ml-payment .place-order {
	margin: 0;
	padding: 0;
}

.ml-payment #place_order.ml-summary__cta {
	width: 100%;
	cursor: pointer;
}

.ml-payment .woocommerce-terms-and-conditions-wrapper {
	margin-bottom: 14px;
	font-size: 13.5px;
	color: var(--ml-body);
}

.ml-payment .woocommerce-terms-and-conditions-wrapper .form-row {
	margin-bottom: 10px;
}

/*
 * (0,4,1) / (0,4,2): WooCommerce's `.woocommerce-js form .form-row label` is
 * (0,3,2) and set both checkbox labels to 14.4px / 700 at line-height 2 -
 * measured 2026-09-14. It reaches the CusRev review-consent label too, whose
 * <p> is not a .form-row: the whole wrapper sits inside `.form-row.place-order`.
 */
.ml-payment .woocommerce-terms-and-conditions-wrapper .form-row label.woocommerce-form__label,
.ml-payment .woocommerce-terms-and-conditions-wrapper p.cr-customer-consent label.woocommerce-form__label {
	flex-direction: row;
	align-items: flex-start;
	gap: 9px;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.5;
}

/* The summary notes sit below the button on checkout. */
.ml-checkout__aside .ml-summary__notes {
	margin-top: 16px;
	padding-top: 14px;
}

/* -------------------------------------------------------------------------
 * Coupon toggle (only rendered when a real coupon exists)
 * ---------------------------------------------------------------------- */

.ml-checkout-page .woocommerce-form-coupon-toggle {
	max-width: var(--ml-container);
	margin: 24px auto 0;
	padding: 0 24px;
}

.ml-checkout-page .checkout_coupon {
	max-width: var(--ml-container);
	margin: 14px auto 0;
	padding: 18px 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	border: 1px solid var(--ml-line);
	border-radius: 12px;
	background: var(--ml-stage-soft);
}

.ml-checkout-page .checkout_coupon .form-row {
	margin: 0;
}

.ml-checkout-page .checkout_coupon input.input-text {
	width: 220px;
	height: 46px;
}

.ml-checkout-page .checkout_coupon button.button {
	height: 46px;
	padding: 0 22px;
	border: 1px solid var(--ml-cyan);
	border-radius: 9px;
	background: var(--ml-white);
	color: var(--ml-cyan);
	font-family: var(--ml-font);
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
	transition: transform var(--ml-t-base) var(--ml-e-standard), background-color var(--ml-t-base) var(--ml-e-standard);
}

.ml-checkout-page .checkout_coupon button.button:hover {
	transform: translateY(-2px);
	background: #f1fbff;
}

/* -------------------------------------------------------------------------
 * Notices
 * ---------------------------------------------------------------------- */

.ml-checkout-page .woocommerce-error,
.ml-checkout-page .woocommerce-message,
.ml-checkout-page .woocommerce-info {
	max-width: var(--ml-container);
	margin: 24px auto 0;
	border-radius: 10px;
	font-size: 14.5px;
}

/* -------------------------------------------------------------------------
 * Order received
 * ---------------------------------------------------------------------- */

.ml-thankyou {
	max-width: var(--ml-container);
	margin: 0 auto;
	padding: 28px 24px 56px;
}

.ml-thankyou__head {
	max-width: 720px;
	margin: 0 auto;
	padding: 42px 32px 36px;
	border-radius: 18px;
	text-align: center;
}

.ml-thankyou__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	margin-bottom: 18px;
	border-radius: 50%;
	background: #e6f7ec;
	color: #23a455;
}

.ml-thankyou__head--failed .ml-thankyou__icon {
	background: #fdecec;
	color: #d33a3a;
}

.ml-thankyou .woocommerce-notice--success,
.ml-thankyou .woocommerce-thankyou-order-received,
.ml-thankyou h2 {
	margin: 0 0 10px;
	font-size: 25px;
	font-weight: 700;
	color: var(--ml-navy);
}

.ml-thankyou__lede {
	margin: 0 auto;
	max-width: 46ch;
	font-size: 15px;
	line-height: 1.65;
	color: var(--ml-body);
}

.ml-thankyou__overview {
	list-style: none;
	margin: 26px 0 0;
	padding: 22px 0 0;
	border-top: 1px solid var(--ml-line);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 18px;
	text-align: left;
}

.ml-thankyou__overview li {
	display: flex;
	flex-direction: column;
	gap: 4px;
	border: 0;
	padding: 0;
	margin: 0;
}

.ml-thankyou__overview li span {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--ml-muted);
}

.ml-thankyou__overview li strong {
	font-size: 15.5px;
	font-weight: 700;
	color: var(--ml-navy);
	font-variant-numeric: tabular-nums;
}

.ml-thankyou__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 28px 0 0;
}

/*
 * (0,3,0), and NOT keyed on `.button` - unlike the cart and orders locks.
 *
 * This class renders on two different markups, and only one of them carries a
 * WooCommerce button class:
 *
 *   normal order   <a class="ml-thankyou__cta">                    no .button
 *   FAILED order   <a class="button pay ml-thankyou__cta">         has .button
 *
 * Verified by rendering a real order: the success CTAs are reached by NO Astra
 * rule at all, so `.woocommerce-js a.button` never touched them. **The entry in
 * the audit list was right about the class and wrong about the condition** - the
 * exposure is real but only on the payment-failed branch.
 *
 * Scoping on the two wrappers instead of on `.button` therefore covers both
 * branches with one rule, rather than leaving a second copy of these
 * declarations to drift.
 */
.ml-thankyou .ml-thankyou__actions .ml-thankyou__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	padding: 0 28px;
	border: 0;
	border-radius: 10px;
	background: var(--ml-cyan);
	color: var(--ml-white);
	font-size: 15px;
	line-height: 1;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 14px 26px -16px rgba(var(--ml-shadow-tint), 0.95);
	transition: transform var(--ml-t-base) var(--ml-e-standard), box-shadow var(--ml-t-base) var(--ml-e-standard);
}

/* (0,4,0) - clears `.woocommerce-js a.button:hover` (0,3,1) on the failed
   branch. Geometry is not restated; the rest rule still matches while hovered. */
.ml-thankyou .ml-thankyou__actions .ml-thankyou__cta:hover,
.ml-thankyou .ml-thankyou__actions .ml-thankyou__cta:focus-visible {
	background: var(--ml-cyan-dark);
	transform: translateY(-2px);
	color: var(--ml-white);
	box-shadow: 0 22px 34px -16px rgba(var(--ml-shadow-tint), 1);
}

/*
 * THE MODIFIER HAD TO GO UP WITH THE BASE, or raising the base would have
 * broken it: a (0,1,0) `--ghost` rule cannot override a (0,3,0) base. Written
 * with both classes on the element so it is (0,4,0) outright rather than a
 * same-specificity tie resolved by source order.
 */
.ml-thankyou .ml-thankyou__actions .ml-thankyou__cta.ml-thankyou__cta--ghost {
	background: var(--ml-white);
	border: 1px solid var(--ml-cyan);
	color: var(--ml-cyan);
	box-shadow: none;
}

.ml-thankyou .ml-thankyou__actions .ml-thankyou__cta.ml-thankyou__cta--ghost:hover,
.ml-thankyou .ml-thankyou__actions .ml-thankyou__cta.ml-thankyou__cta--ghost:focus-visible {
	background: #f1fbff;
	color: var(--ml-cyan);
	box-shadow: 0 12px 22px -14px rgba(var(--ml-shadow-tint), 0.9);
}

/* No author outline existed here either - see the note in cart.css. */
.ml-thankyou .ml-thankyou__actions .ml-thankyou__cta:focus-visible {
	outline: 2px solid var(--ml-navy);
	outline-offset: 2px;
}

/* WooCommerce prints the order detail and address tables after the panel. */
.ml-thankyou .woocommerce-order-details,
.ml-thankyou .woocommerce-customer-details {
	max-width: 720px;
	margin: 26px auto 0;
	padding: 24px;
	border: 1px solid var(--ml-line);
	border-radius: 14px;
	background: var(--ml-white);
	box-shadow: 0 12px 30px -24px rgba(10, 37, 64, 0.7);
}

.ml-thankyou .woocommerce-order-details h2,
.ml-thankyou .woocommerce-customer-details h2,
.ml-thankyou .woocommerce-column__title {
	margin: 0 0 14px;
	font-size: 17px;
	font-weight: 700;
	color: var(--ml-navy);
	text-align: left;
}

.ml-thankyou table.woocommerce-table--order-details {
	width: 100%;
	border-collapse: collapse;
	font-size: 14.5px;
}

.ml-thankyou table.woocommerce-table--order-details th,
.ml-thankyou table.woocommerce-table--order-details td {
	padding: 11px 0;
	border: 0;
	border-bottom: 1px solid var(--ml-line);
	text-align: left;
	color: var(--ml-navy);
}

.ml-thankyou table.woocommerce-table--order-details td:last-child,
.ml-thankyou table.woocommerce-table--order-details th:last-child {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.ml-thankyou address {
	font-style: normal;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--ml-body);
}

/* -------------------------------------------------------------------------
 * Astra reset
 * ---------------------------------------------------------------------- */

.ml-checkout-page .site-content > .ast-container {
	padding-left: 0;
	padding-right: 0;
	max-width: 100%;
}

.ml-checkout-page #primary,
.ml-checkout-page .ast-article-single {
	margin: 0;
	padding: 0;
	border: 0;
}

.ml-checkout-page .entry-content {
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------- */

@media (max-width: 1100px) {
	.ml-checkout__body-inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.ml-checkout__aside {
		position: static;
	}
}

@media (max-width: 640px) {
	.ml-checkout__head,
	.ml-checkout__body-inner,
	.ml-thankyou {
		padding-left: 16px;
		padding-right: 16px;
	}

	.woocommerce-billing-fields__field-wrapper,
	.woocommerce-shipping-fields__field-wrapper,
	.woocommerce-additional-fields__field-wrapper {
		grid-template-columns: minmax(0, 1fr);
	}

	.ml-checkout-page #customer_details.ml-checkout__details {
		padding: 18px;
	}

	.ml-steps__label {
		display: none;
	}

	.ml-steps__item + .ml-steps__item::before {
		margin: 0 8px;
	}

	.ml-thankyou__head {
		padding: 32px 20px 28px;
	}

	.ml-thankyou__actions .ml-thankyou__cta {
		width: 100%;
	}
}

/* -------------------------------------------------------------------------
 * Reduced motion
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ml-payment__method:hover,
	.ml-thankyou .ml-thankyou__actions .ml-thankyou__cta:hover,
	.ml-thankyou .ml-thankyou__actions .ml-thankyou__cta:focus-visible,
	.ml-checkout__back:hover,
	.ml-checkout__back:focus-visible,
	.ml-checkout-page .checkout_coupon button.button:hover,
	a.ml-steps__link:hover .ml-steps__num,
	a.ml-steps__link:focus-visible .ml-steps__num {
		transform: none;
	}

	.ml-payment__method,
	.ml-thankyou .ml-thankyou__actions .ml-thankyou__cta,
	.ml-checkout__back,
	.ml-steps__num,
	.ml-steps__link,
	.ml-checkout-page .checkout_coupon button.button,
	.ml-checkout-page .form-row input.input-text,
	.ml-checkout-page #customer_details .form-row textarea,
	.ml-checkout-page .form-row select {
		transition: none;
	}
}

/*
 * POINTER FOCUS - ASTRA a:focus { outline: thin dotted } (main.min.css L3).
 * A mouse click leaves :focus set, so every anchor that names no outline of its
 * own kept a thin dotted ring until focus moved. Measured 2026-09-13 by the
 * sitewide anchor sweep (CLAUDE.md, "Anchor pointer-focus sweep").
 *
 * :not(:focus-visible) IS LOAD-BEARING: this only ever applies to pointer focus,
 * so the keyboard ring each family already has is untouched. Outline only -
 * nothing moves, so there is no reduced-motion twin.
 */
.woocommerce-terms-and-conditions a:focus:not(:focus-visible),
a.woocommerce-terms-and-conditions-link:focus:not(:focus-visible),
a.ml-steps__link:focus:not(:focus-visible),
a.ml-checkout__back:focus:not(:focus-visible),
.ml-policy__note a:focus:not(:focus-visible) {
	outline: none;
}

/*
 * KEYBOARD RINGS - 2026-09-14. These families had NO focus ring of their own:
 * keyboard focus showed only Astra's a:focus-visible 1px dotted in the text
 * colour, or nothing at all where a theme rule said outline: none. Measured by
 * the sitewide anchor sweep (CLAUDE.md, "Keyboard ring pass").
 *
 * Light surface: 3px --ml-cyan offset 3px. Navy surface: 2px. border-radius is
 * RESTATED on every ring - a rule wins only the properties it names, and a
 * shared focus rule has squared a round control on this site before. Text links
 * take 4px corners; boxed controls keep their own radius.
 *
 * The pointer pin (:focus:not(:focus-visible)) above is untouched - the two
 * selectors can never match the same state. Contrast: cyan on white 2.50:1 is
 * the owner's recorded decision (CLAUDE.md, "THE FOCUS-RING RULE").
 */
a.ml-steps__link:focus-visible,
a.ml-checkout__back:focus-visible,
a.woocommerce-terms-and-conditions-link:focus-visible,
.ml-policy__note a:focus-visible,
.woocommerce-terms-and-conditions a:focus-visible {
	outline: 3px solid var(--ml-cyan);
	outline-offset: 3px;
	border-radius: 4px;
}

/*
 * RING FADE - ASTRA'S INLINE `a { transition: all .2s linear }`. "all" includes
 * outline, so these families' keyboard rings slid and faded in over 200ms
 * instead of appearing at once. Each family now names exactly what its hover /
 * focus-visible state really changes, measured 2026-09-14 (CLAUDE.md, "Ring fade
 * pass"): colour where Astra's a:hover repaints the ink, nothing at all where
 * only the (discrete) underline changes or nothing visible changes.
 * Outline is never in the list. Colour-only fades need no reduced-motion twin.
 */
.ml-policy__note a,
a.woocommerce-terms-and-conditions-link,
.woocommerce-terms-and-conditions a {
	transition: color var(--ml-t-base) var(--ml-e-standard);
}

/* <= 768px tap targets: the step links measured 28 x 28 and "Back to cart"
   111 x 23.9. Padding rather than height, so the row's rhythm is unchanged. */
@media (max-width: 768px) {
	.ml-checkout-page .ml-steps__link,
	.ml-checkout-page .ml-checkout__back {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
}

/* The step chip is a 28px circle - height alone left it 28 WIDE, measured
   28 x 44 after the first attempt. Both axes, or 2.5.8 is still missed. */
@media (max-width: 768px) {
	.ml-checkout-page .ml-steps__link {
		min-width: 44px;
		justify-content: center;
	}
}