/* =====================================================================
 * zzf-core — checkout.css
 * Conversion chrome for the classic checkout and the order-received page.
 * ---------------------------------------------------------------------
 * This file adds only what zzf-core's checkout module renders, plus the
 * sticky order-review behaviour. The heavy lifting on cart and checkout
 * layout already lives in glass.css §16 — do NOT duplicate it here, and
 * check the computed value before adding a rule that looks missing.
 *
 * MESH RULE: everything on this page is a data surface. Flat, hairlines,
 * mono for every figure. No glass anywhere near a total.
 *
 * WOO LOADS AFTER THIS FILE, so anything that ties it on specificity
 * loses on source order. Selectors are scoped under the body class and
 * deliberately deep in places for that reason.
 * ================================================================== */

/* ── Step indicator ────────────────────────────────────────────────── */

.zzf-steps {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 1.4rem;
	margin: 0 0 1.8rem;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.zzf-steps__step {
	display: flex;
	align-items: center;
	gap: .55rem;
	font-size: .78rem;
	color: var(--wp--preset--color--muted, #5A6C89);
}

.zzf-steps__n {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--line, #E3EBF6);
	background: var(--wp--preset--color--base, #FFFFFF);
	font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	font-size: .68rem;
	line-height: 1;
}

.zzf-steps__step.is-current { color: var(--wp--preset--color--contrast, #0B1B36); }

.zzf-steps__step.is-current .zzf-steps__n {
	background: var(--wp--preset--color--accent, #14346E);
	border-color: var(--wp--preset--color--accent, #14346E);
	color: #FFFFFF;
}

.zzf-steps__step.is-done .zzf-steps__n {
	background: var(--wp--preset--color--surface-2, #E9F1FC);
	border-color: var(--wp--preset--color--surface-2, #E9F1FC);
	color: var(--wp--preset--color--accent, #14346E);
}

.zzf-steps__label { letter-spacing: .01em; }

/* ── Checkout: keep the order total in view ────────────────────────── */

/* Sticky, so the total and the submit button stay on screen while a long
   billing form scrolls. `top` clears the sticky header (z 50) and the
   ticker (z 40). Never add transform/filter/backdrop-filter here — any of
   them would create a containing block and break position:fixed children
   elsewhere on the page. */
@media (min-width: 981px) {
	.zzf-checkout-page:not(.zzf-thankyou-page) #order_review,
	.zzf-checkout-page:not(.zzf-thankyou-page) #order_review_heading {
		position: sticky;
		top: 96px;
	}
	.zzf-checkout-page:not(.zzf-thankyou-page) #order_review_heading { top: 60px; }
}


/* ── Reassurance ───────────────────────────────────────────────────── */

.zzf-reassure {
	margin: 1.2rem 0 0;
	padding: 1.05rem 1.1rem;
	list-style: none;
	background: var(--wp--preset--color--surface, #FAFCFF);
	border: 1px solid var(--wp--preset--color--line, #E3EBF6);
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	gap: .6rem;
}

.zzf-reassure__item {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	margin: 0;
	font-size: .82rem;
	font-weight: 300;
	line-height: 1.55;
	color: var(--wp--preset--color--muted, #5A6C89);
}

/* A checkmark, never the proof star — the star means a document backs the
   claim, and these are statements about conduct. */
.zzf-reassure__tick {
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	margin-top: .2rem;
	position: relative;
}

.zzf-reassure__tick::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 2px;
	width: 4px;
	height: 8px;
	border-right: 1.5px solid var(--wp--preset--color--accent, #14346E);
	border-bottom: 1.5px solid var(--wp--preset--color--accent, #14346E);
	transform: rotate(42deg);
}

.zzf-reassure__help {
	margin: .85rem 0 0;
	font-size: .8rem;
	color: var(--wp--preset--color--muted, #5A6C89);
}

.zzf-reassure__help a {
	color: var(--wp--preset--color--accent, #14346E);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.zzf-reassure__help a:hover { border-bottom-color: currentColor; }

/* ── Order received ────────────────────────────────────────────────── */

.zzf-done {
	max-width: 720px;
	margin: 0 0 2rem;
	padding: 1.7rem 1.8rem;
	background: var(--wp--preset--color--base, #FFFFFF);
	border: 1px solid var(--wp--preset--color--line, #E3EBF6);
	border-radius: 14px;
}

.zzf-done__eyebrow {
	margin: 0 0 .45rem;
	font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	font-size: .68rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent, #14346E);
}

.zzf-done__title {
	margin: 0 0 .8rem;
	font-family: var(--wp--preset--font-family--display, Marcellus, serif);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 400;
	line-height: 1.14;
	letter-spacing: -.012em;
	color: var(--wp--preset--color--contrast, #0B1B36);
}

.zzf-done__ref {
	margin: 0 0 1.2rem;
	font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	font-size: .78rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted, #5A6C89);
}

.zzf-done__ref b {
	font-weight: 400;
	color: var(--wp--preset--color--contrast, #0B1B36);
}

/* The unpaid-order callout. This is the one place on the site where the
   accent red earns a block treatment: the customer's money has not moved
   yet and the order will be released if they close the tab. The left rule
   carries it rather than a fill, which would read as an error state. */
.zzf-done__callout {
	margin: 0 0 1.3rem;
	padding: .9rem 1.1rem;
	background: var(--wp--preset--color--surface-2, #E9F1FC);
	border-left: 3px solid var(--wp--preset--color--accent-2, #C8102E);
	border-radius: 0 8px 8px 0;
	font-size: .9rem;
	font-weight: 300;
	line-height: 1.6;
	color: var(--wp--preset--color--contrast, #0B1B36);
}

.zzf-done__steps {
	margin: 0;
	padding: 0 0 0 1.15rem;
	display: flex;
	flex-direction: column;
	gap: .45rem;
	font-size: .88rem;
	font-weight: 300;
	line-height: 1.6;
	color: var(--wp--preset--color--muted, #5A6C89);
}

.zzf-done__steps li::marker {
	font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	font-size: .78rem;
	color: var(--wp--preset--color--accent, #14346E);
}

/* Woo's own order details below ours — keep the seam consistent. */
.zzf-thankyou-page .woocommerce-order-details,
.zzf-thankyou-page .woocommerce-customer-details {
	margin-top: 1.6rem;
}

/* Woo prints its own "Order received / Thank you. Your order has been
   received." Ours says it better, says it first, and says whether money
   still has to move — so the duplicate goes.
   TWO SELECTORS ON PURPOSE: `.woocommerce-thankyou-order-received` is the
   CLASSIC thankyou.php class, and on a block theme this page renders through
   Woo's BLOCK order-confirmation template instead, where the same text is an
   h1 and a p inside .wc-block-order-confirmation-status. Only the second one
   fires today; the first is kept so this still holds if the page is ever
   routed back through the classic template. */
.zzf-thankyou-page .woocommerce-thankyou-order-received { display: none; }

.zzf-thankyou-page .wc-block-order-confirmation-status > h1,
.zzf-thankyou-page .wc-block-order-confirmation-status > p { display: none; }

/* The status block is now just a wrapper for our own two pieces. */
.zzf-thankyou-page .wc-block-order-confirmation-status { margin-bottom: 0; }

@media (max-width: 560px) {
	.zzf-done { padding: 1.3rem 1.2rem; }
	.zzf-steps { gap: .35rem .9rem; }
	.zzf-steps__label { font-size: .74rem; }
}

/* =====================================================================
 * CHECKOUT UNIFORMITY PASS — 2026-08-22
 * ---------------------------------------------------------------------
 * The skeleton (two-column grid, sticky review, #place_order) already lives
 * in glass.css section 16. This is the quality layer on top: cards, payment
 * methods as selectable rows, the free-shipping meter, inline field errors.
 *
 * CLINICAL THROUGHOUT. Checkout is a data surface by the mesh rule, so flat
 * fills and hairlines only — no glass, and specifically no backdrop-filter,
 * transform, filter, perspective or will-change on any CONTAINER here. Each
 * of those makes an element a containing block for fixed descendants, which
 * is what once trapped the mobile nav inside the header. A checkout carrying
 * a modal or a drawer would break the same way.
 *
 * Selectors carry .zzf-checkout-page and a Woo class because Woo's own
 * stylesheets load after this file and win any tie. That is the trap this
 * kit has now hit on the shop pagination, the account nav and the header:
 * assume Woo outranks you and write accordingly.
 * ================================================================== */

.zzf-checkout-page {
	--zzf-co-line:    var(--wp--preset--color--line, #E3EBF6);
	--zzf-co-ink:     var(--wp--preset--color--contrast, #0B1B36);
	--zzf-co-muted:   var(--wp--preset--color--muted, #3E4E70);
	--zzf-co-accent:  var(--wp--preset--color--accent, #14346E);
	--zzf-co-surface: var(--wp--preset--color--surface, #FAFCFF);
	--zzf-co-tint:    var(--wp--preset--color--surface-2, #E9F1FC);
	--zzf-co-ok:      #14603A;
	--zzf-co-bad:     #8C1226;
	--zzf-co-r:       14px;
	--zzf-co-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------- 1. The two panels ---------- */
.zzf-checkout-page #customer_details,
.zzf-checkout-page #order_review {
	background: #fff;
	border: 1px solid var(--zzf-co-line);
	border-radius: var(--zzf-co-r);
	padding: clamp(18px, 2.2vw, 26px);
	box-sizing: border-box;
}
.zzf-checkout-page #order_review { padding-top: 14px; }

/* Woo prints the review heading OUTSIDE #order_review, so the card would
   otherwise start below its own title. Pulled in visually. */
.zzf-checkout-page:not(.zzf-thankyou-page) #order_review_heading {
	margin: 0 0 10px;
	font-family: var(--zzf-co-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--zzf-co-muted);
}
.zzf-checkout-page .woocommerce-billing-fields h3,
.zzf-checkout-page .woocommerce-additional-fields h3,
.zzf-checkout-page #ship-to-different-address span {
	font-family: var(--zzf-co-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--zzf-co-muted);
}

/* ---------- 2. Fields ---------- */
.zzf-checkout-page .woocommerce form .form-row { margin: 0 0 14px; padding: 0; }
/* DIRECT children only. Without the child combinator this rule is (0,3,2)
   and reaches into every nested component that happens to contain a label —
   it was overriding both glass.css and the compliance module on the 21+
   attestation, forcing its flex row back to display:block so the copy wrapped
   around the checkbox. A field label is always a direct child of its row. */
.zzf-checkout-page .woocommerce form .form-row > label {
	display: block;
	margin-bottom: 5px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--zzf-co-muted);
}
.zzf-checkout-page .woocommerce form .form-row .required { color: var(--zzf-co-bad); text-decoration: none; }
.zzf-checkout-page .woocommerce form .form-row input.input-text,
.zzf-checkout-page .woocommerce form .form-row textarea,
.zzf-checkout-page .woocommerce form .form-row .select2-selection--single {
	width: 100%;
	box-sizing: border-box;
	min-height: 46px;
	padding: 11px 13px;
	border: 1px solid var(--zzf-co-line);
	border-radius: 10px;
	background: #fff;
	color: var(--zzf-co-ink);
	font: inherit;
	font-size: 15px;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.zzf-checkout-page .woocommerce form .form-row input.input-text:focus,
.zzf-checkout-page .woocommerce form .form-row textarea:focus {
	outline: none;
	border-color: var(--zzf-co-accent);
	box-shadow: 0 0 0 4px rgba(20, 52, 110, .10);
}

/* Inline validation, using WooCommerce's OWN classes. Woo adds these on blur,
   so no script of ours decides what is valid, only what it looks like. */
.zzf-checkout-page .woocommerce form .form-row.woocommerce-invalid input.input-text,
.zzf-checkout-page .woocommerce form .form-row.woocommerce-invalid .select2-selection--single {
	border-color: var(--zzf-co-bad);
	background: #FDF6F7;
}
.zzf-checkout-page .woocommerce form .form-row.woocommerce-invalid-required-field::after {
	content: "This one is required";
	display: block;
	margin-top: 5px;
	font-size: 12px;
	font-weight: 600;
	color: var(--zzf-co-bad);
}
.zzf-checkout-page .woocommerce form .form-row.woocommerce-validated input.input-text {
	border-color: #BFE3CE;
}

/* ---------- 3. Address line 2 toggle ---------- */
.zzf-checkout-page .form-row.zzf-addr2.is-folded { display: none; }
.zzf-checkout-page .zzf-addr2__toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	width: fit-content;
	clear: both;
	/* It lives INSIDE the address-1 row now, so it sits under that input
	   rather than between two rows. */
	margin: 8px 0 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--zzf-co-accent);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
.zzf-checkout-page .zzf-addr2__toggle::before { content: "+"; font-size: 15px; line-height: 1; }
.zzf-checkout-page .zzf-addr2__toggle:hover,
.zzf-checkout-page .zzf-addr2__toggle:focus-visible { text-decoration: underline; outline: none; }

/* ---------- 4. Free-shipping meter ---------- */
/* No frame of its own. The card is the only box on this column; a bordered
   panel inside a bordered panel inside a bordered row is three frames at the
   same weight, which is what made the summary read as a grid rather than a
   statement. A single hairline separates it from the figures. */
.zzf-checkout-page .zzf-meter {
	margin: 0 0 16px;
	padding: 0 0 15px;
	border: 0;
	border-bottom: 1px solid var(--zzf-co-line);
	border-radius: 0;
	background: none;
}
.zzf-checkout-page .zzf-meter__label {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--zzf-co-ink);
}
.zzf-checkout-page .zzf-meter__label .woocommerce-Price-amount {
	font-family: var(--zzf-co-mono);
	color: var(--zzf-co-accent);
}
.zzf-checkout-page .zzf-meter__track {
	display: block;
	height: 6px;
	border-radius: 999px;
	background: var(--zzf-co-tint);
	overflow: hidden;
}
.zzf-checkout-page .zzf-meter__fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--zzf-co-accent);
	/* width animates, not transform: this sits inside the sticky review card,
	   and a transform here would make that card a containing block. */
	transition: width .45s cubic-bezier(.22, .61, .36, 1);
}
.zzf-checkout-page .zzf-meter.is-met { border-bottom-color: #BFE3CE; }
.zzf-checkout-page .zzf-meter.is-met .zzf-meter__label { color: var(--zzf-co-ok); }
.zzf-checkout-page .zzf-meter.is-met .zzf-meter__fill { background: var(--zzf-co-ok); }

/* ---------- 5. Order table ---------- */
/* Rules only where meaning changes. Every row carrying its own bottom border
   is what produced the ledger-grid look; the figures are already aligned in a
   column and do not need ruling off from each other. Three lines survive: under
   the column header, above the totals, and above the total itself. */
.zzf-checkout-page #order_review table.shop_table { border: 0; margin: 0; font-size: 14px; }
.zzf-checkout-page #order_review table.shop_table th,
.zzf-checkout-page #order_review table.shop_table td {
	padding: 7px 0;
	border: 0;
	vertical-align: baseline;
}
.zzf-checkout-page #order_review table.shop_table thead th {
	padding-bottom: 9px;
	border-bottom: 1px solid var(--zzf-co-line);
	font-family: var(--zzf-co-mono);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--zzf-co-muted);
}
.zzf-checkout-page #order_review table.shop_table tbody tr:first-child th,
.zzf-checkout-page #order_review table.shop_table tbody tr:first-child td { padding-top: 12px; }
.zzf-checkout-page #order_review table.shop_table tfoot tr:first-child th,
.zzf-checkout-page #order_review table.shop_table tfoot tr:first-child td {
	padding-top: 12px;
	border-top: 1px solid var(--zzf-co-line);
}
/* Labels quiet, figures mono and hard right. */
.zzf-checkout-page #order_review table.shop_table tfoot th { font-weight: 500; color: var(--zzf-co-muted); }
.zzf-checkout-page #order_review table.shop_table td { text-align: right; }
.zzf-checkout-page #order_review .woocommerce-Price-amount { font-family: var(--zzf-co-mono); }
.zzf-checkout-page #order_review tfoot .order-total th,
.zzf-checkout-page #order_review tfoot .order-total td {
	padding-top: 14px;
	border-top: 1px solid var(--zzf-co-ink);
	font-size: 17px;
	font-weight: 700;
	color: var(--zzf-co-ink);
}

/* ---------- 6. Payment methods as selectable rows ---------- */
.zzf-checkout-page #payment { background: transparent; border-radius: 0; }
.zzf-checkout-page #payment ul.wc_payment_methods {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	border: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.zzf-checkout-page #payment ul.wc_payment_methods li.wc_payment_method {
	position: relative;   /* anchors the visually-hidden radio */
	margin: 0;
	padding: 0;
	border: 1px solid var(--zzf-co-line);
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
	transition: border-color .18s ease, background .18s ease;
}
.zzf-checkout-page #payment ul.wc_payment_methods li.wc_payment_method:hover { border-color: #C5D8F2; }
/* The whole row is the hit target: Woo puts the radio beside a <label>, so
   letting the label fill the row needs no extra markup and no script. */
/* The native radio is hidden but NOT removed: it keeps the tab order, the
   arrow-key group behaviour and the accessible name, all of which a
   display:none would destroy on the one control that has to work. The row is
   the visible control; selection reads as border, tint and a tick.

   The label was display:flex and therefore block-level, which stacked it under
   the input instead of beside it — that is what made the rows look ragged. */
.zzf-checkout-page #payment ul.wc_payment_methods li.wc_payment_method > input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}
.zzf-checkout-page #payment ul.wc_payment_methods li.wc_payment_method > label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 15px 17px;
	min-height: 54px;   /* one height for every row, whatever the label holds */
	box-sizing: border-box;
	font-size: 15px;
	font-weight: 600;
	color: var(--zzf-co-ink);
	cursor: pointer;
}
/* Gateway icons vary wildly in size; pin them so rows cannot jump. */
.zzf-checkout-page #payment ul.wc_payment_methods li.wc_payment_method > label img {
	max-height: 22px;
	width: auto;
	margin: 0;
	order: -1;
}
/* The tick, on the selected row only, hard right. */
.zzf-checkout-page #payment ul.wc_payment_methods li.wc_payment_method:has(input:checked) > label::after {
	content: "";
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	margin-left: auto;
	border-radius: 50%;
	background: var(--zzf-co-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-9'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}
/* Keyboard users must still see where they are once the radio is invisible. */
.zzf-checkout-page #payment ul.wc_payment_methods li.wc_payment_method:has(input:focus-visible) {
	outline: 2px solid var(--zzf-co-accent);
	outline-offset: 2px;
}
.zzf-checkout-page #payment ul.wc_payment_methods li.wc_payment_method:has(input:checked) {
	border-color: var(--zzf-co-accent);
	background: var(--zzf-co-surface);
}
/* The gateway's own instructions. Woo reveals this only for the selected
   method, so it is already the expanded state of the row above it. It just
   needed to stop looking like a detached tooltip. */
.zzf-checkout-page #payment div.payment_box {
	margin: 0;
	padding: 0 17px 15px 17px;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--zzf-co-muted);
}
.zzf-checkout-page #payment div.payment_box::before { display: none; }

/* ---------- 7. Terms, attestation, submit ---------- */
/* One quiet frame around two separate legal controls. Both still print
   exactly as WooCommerce and the compliance module render them. */
.zzf-checkout-page .woocommerce-terms-and-conditions-wrapper {
	margin: 14px 0 0;
	padding: 13px 15px;
	border: 1px solid var(--zzf-co-line);
	border-radius: 12px;
	background: var(--zzf-co-surface);
	font-size: 13px;
	line-height: 1.6;
}
.zzf-checkout-page .woocommerce-terms-and-conditions-wrapper .form-row { margin: 0; }
.zzf-checkout-page #payment .form-row.place-order { margin: 16px 0 0; padding: 0; }

/* ---------- 8. Coupon ---------- */
.zzf-checkout-page .woocommerce-form-coupon-toggle .woocommerce-info {
	margin: 0 0 16px;
	padding: 12px 15px;
	border: 1px dashed var(--zzf-co-line);
	border-radius: 12px;
	background: var(--zzf-co-surface);
	color: var(--zzf-co-muted);
	font-size: 13.5px;
}
.zzf-checkout-page .woocommerce-form-coupon-toggle .woocommerce-info::before { display: none; }
.zzf-checkout-page .woocommerce-form-coupon-toggle a { color: var(--zzf-co-accent); font-weight: 600; }

/* ---------- 9. Mobile: the summary folds ---------- */
.zzf-checkout-page .zzf-review__toggle { display: none; }
@media (max-width: 899px) {
	.zzf-checkout-page .zzf-review__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		margin: 0 0 12px;
		padding: 14px 16px;
		border: 1px solid var(--zzf-co-line);
		border-radius: 12px;
		background: #fff;
		color: var(--zzf-co-ink);
		font: inherit;
		font-size: 14px;
		font-weight: 600;
		cursor: pointer;
	}
	.zzf-checkout-page .zzf-review__toggle:hover,
	.zzf-checkout-page .zzf-review__toggle:focus-visible { border-color: var(--zzf-co-accent); outline: none; }
	.zzf-checkout-page .zzf-review__toggle-total { font-family: var(--zzf-co-mono); color: var(--zzf-co-accent); }
	.zzf-checkout-page:not(.zzf-thankyou-page) #order_review_heading { display: none; }

	/* Collapsed hides the TABLE and the meter, never the payment block or the
	   submit button. Folding those away would hide the thing the page exists
	   for behind a toggle nobody was asked to press. */
	.zzf-checkout-page #order_review.zzf-review--collapsible > table.shop_table,
	.zzf-checkout-page #order_review.zzf-review--collapsible > .zzf-meter { display: none; }
	.zzf-checkout-page #order_review.zzf-review--collapsible.is-open > table.shop_table,
	.zzf-checkout-page #order_review.zzf-review--collapsible.is-open > .zzf-meter { display: revert; }
}

@media (prefers-reduced-motion: reduce) {
	.zzf-checkout-page .zzf-meter__fill { transition: none; }
}

/* ---------- 10. The order-review heading ----------
   Visually hidden, kept in the accessibility tree.

   It is a SIBLING of #order_review in Woo's markup, so as an in-flow grid
   item it contributed to track sizing and opened a gap above the summary.
   Absolutely positioned grid children make no track contribution at all,
   which is the whole point of doing it this way rather than sizing rows
   around it.

   !important is not decoration here: glass.css carries `width: auto
   !important` on this element from the float-clearing pass, and an earlier
   rule in THIS file makes it sticky alongside #order_review. Without these
   flags the treatment applies only half way — which is exactly what it did
   on the first attempt, leaving a sticky 1px element in its own grid row.
   The <h3> and its text are untouched; only its painting is. */
.zzf-checkout-page #order_review_heading {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- 11. Summary rhythm, and the two consent boxes ----------
   Added 2026-08-22 after looking at the rendered page.

   Three things this fixes, all of them "almost right":
   the item name was right-aligned and floating mid-card; the rules sat hard
   against the text so the card read as squished; and the 21+ attestation was
   a different size and shape from the terms box six pixels above it.
   ------------------------------------------------------------------ */

/* Only FIGURES are right-aligned. The blanket `td { text-align: right }` in
   section 5 caught the product cell too, which pushed "GHK-Cu 100 × 1" into
   the middle of the card instead of leaving it under its own column head. */
.zzf-checkout-page #order_review table.shop_table td.product-name { text-align: left; }
.zzf-checkout-page #order_review table.shop_table .product-quantity {
	margin-left: 5px;
	font-family: var(--zzf-co-mono);
	font-weight: 400;
	color: var(--zzf-co-muted);
}

/* Air around the rules. Rows were 12px/7px — asymmetric, and tight enough that
   every hairline looked welded to the text above it. An even rhythm, with the
   three section rules each given room on both sides. */
.zzf-checkout-page #order_review table.shop_table th,
.zzf-checkout-page #order_review table.shop_table td { padding: 11px 0; }
.zzf-checkout-page #order_review table.shop_table thead th { padding: 0 0 13px; }
.zzf-checkout-page #order_review table.shop_table tbody tr:first-child th,
.zzf-checkout-page #order_review table.shop_table tbody tr:first-child td { padding-top: 16px; }
.zzf-checkout-page #order_review table.shop_table tbody tr:last-child th,
.zzf-checkout-page #order_review table.shop_table tbody tr:last-child td { padding-bottom: 16px; }
.zzf-checkout-page #order_review table.shop_table tfoot tr:first-child th,
.zzf-checkout-page #order_review table.shop_table tfoot tr:first-child td { padding-top: 17px; }
.zzf-checkout-page #order_review tfoot .order-total th,
.zzf-checkout-page #order_review tfoot .order-total td { padding-top: 18px; padding-bottom: 2px; }

/* THE TWO CONSENT BOXES ARE ONE COMPONENT IN TWO PLACES.
   They were not: the attestation carried a 22px checkbox, 16px type and 18px
   padding against the terms box's 13px, 13px and 15px, and its label was
   `display: block` so the checkbox sat INSIDE the text flow and the copy
   wrapped around it. Same frame, same type, same control size, and a flex row
   so the box is a checkbox beside a paragraph rather than text poured around
   a control.

   PRESENTATION ONLY. The attestation's markup, its `required` attribute and
   the compliance module that prints it are untouched — this is the checkbox
   an audit already caught going missing once. */
.zzf-checkout-page .zzf-attestation,
.zzf-checkout-page .woocommerce-terms-and-conditions-wrapper {
	margin: 12px 0 0;
	padding: 14px 16px;
	border: 1px solid var(--zzf-co-line);
	border-radius: 12px;
	background: var(--zzf-co-surface);
	font-size: 13px;
	line-height: 1.6;
}
/* .woocommerce is in the selector purely for weight. The attestation lives
   INSIDE a .form-row, so woocommerce-layout.css reaches it with
   `.woocommerce form .form-row label { display: block }` at (0,2,2) and beats
   a two-class rule. This is (0,3,1). Measured, not assumed — the flex row was
   being reset to block and the copy wrapped around the checkbox. */
.zzf-checkout-page .woocommerce .zzf-attestation > label,
.zzf-checkout-page .woocommerce .woocommerce-terms-and-conditions-wrapper label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	font-weight: 400;
	color: var(--zzf-co-ink);
}
.zzf-checkout-page .zzf-attestation input[type="checkbox"],
.zzf-checkout-page .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
	flex: 0 0 15px;
	width: 15px;
	height: 15px;
	margin: 2px 0 0;
	accent-color: var(--zzf-co-accent);
}
/* The copy takes the remaining width instead of wrapping under the control. */
.zzf-checkout-page .zzf-attestation > label > span,
.zzf-checkout-page .woocommerce-terms-and-conditions-wrapper label > span { flex: 1; min-width: 0; }
.zzf-checkout-page .woocommerce-terms-and-conditions-wrapper .woocommerce-privacy-policy-text p {
	margin: 0 0 10px;
	font-size: 12.5px;
	color: var(--zzf-co-muted);
}

/* ---------- 12. The order table's borders, settled ----------
   Added 2026-08-22 after the row rules kept reappearing on the owner's screen
   while measuring clean on mine.

   THREE separate stylesheets put a border on these cells:

     glass.css                 .woocommerce table.shop_table td   border-top
     woocommerce.css           .woocommerce table.shop_table td   border-top
     woocommerce.css           ...shop_table tfoot th             border-top

   plus woocommerce-blocktheme.css flipping border-collapse under it. Which one
   wins depends on which Woo stylesheets are enqueued on that request and on
   the viewport, and the earlier section-5 rules out-specified them at 1528px
   while something still painted rules at ~700px. Out-specifying a moving
   target is how this stayed broken across three passes.

   So: every border in this table is zeroed, and the three that should exist
   are re-declared. !important is the correct tool here and CLAUDE.md says so —
   "classic Woo markup generally needs either three-class selectors or
   !important". This is not decoration; it is the only way to be sure that
   what renders is what was designed.

   The three rules that survive, and why each one earns its place:
     · under the column header  — separates labels from data
     · above the totals block   — separates items from money
     · above TOTAL              — the one figure that matters
   ------------------------------------------------------------------ */
.zzf-checkout-page #order_review table.shop_table,
.zzf-checkout-page #order_review table.shop_table thead,
.zzf-checkout-page #order_review table.shop_table tbody,
.zzf-checkout-page #order_review table.shop_table tfoot,
.zzf-checkout-page #order_review table.shop_table tr,
.zzf-checkout-page #order_review table.shop_table th,
.zzf-checkout-page #order_review table.shop_table td {
	border: 0 !important;
	box-shadow: none !important;
}

.zzf-checkout-page #order_review table.shop_table thead th {
	border-bottom: 1px solid var(--zzf-co-line) !important;
}
.zzf-checkout-page #order_review table.shop_table tfoot tr:first-child th,
.zzf-checkout-page #order_review table.shop_table tfoot tr:first-child td {
	border-top: 1px solid var(--zzf-co-line) !important;
}
.zzf-checkout-page #order_review table.shop_table tfoot tr.order-total th,
.zzf-checkout-page #order_review table.shop_table tfoot tr.order-total td {
	border-top: 1px solid var(--zzf-co-ink) !important;
}

/* ---------- 13. The header label was being clipped ----------
   Added 2026-08-22.

   "PRODUCT" rendered with the tops of its letters sliced off, while every
   measurement said the box was fine. Both halves of that are true:

     · glass.css puts `overflow: hidden` on .woocommerce table.shop_table so
       rounded corners clip on the cart and order-details tables.
     · section 5 here set the header cell to `padding: 0 0 13px` — no top
       padding — so the label sat flush against the table's top edge.

   Measured: table top 531.0, glyph box top 533.4. 2.4px of clearance, which is
   why the box model reported no overflow. But getBoundingClientRect returns the
   LINE BOX, not the ink. Uppercase mono at 0.14em letter-spacing paints above
   its line box, and overflow:hidden clipped exactly that sliver — 2.4 CSS px is
   3 device px at the owner's 1.25 DPR, with nothing to spare.

   Fixed twice over on purpose. The padding fixes it now; dropping the clip
   means a later change to the font, the size or the tracking cannot bring it
   back silently, which is the failure mode that cost five rounds of measuring
   a box that was never the problem.

   Scoped to the review table. The cart and order-details tables keep their
   overflow:hidden and their rounded corners. */
.zzf-checkout-page #order_review table.shop_table {
	overflow: visible !important;
}
.zzf-checkout-page #order_review table.shop_table thead th {
	padding-top: 6px !important;
}