/**
 * WooCommerce templates — Cart, Checkout, My Account.
 *
 * Serves the three commerce surfaces: `/cart/` (page 8) and `/checkout/`
 * (page 9), which render the WooCommerce **Cart and Checkout BLOCKS**, and
 * `/my-account/` (page 10), which still renders CLASSIC PHP templates behind
 * `[woocommerce_my_account]`. Measured 2026-08-31 on WooCommerce 11.0.1.
 *
 * ⚠ THE FIRST PARAGRAPH OF THIS FILE USED TO SAY THE OPPOSITE AND THE WHOLE
 * FILE WAS BUILT ON IT. PR #193 opened with "THERE IS NO CART BLOCK AND NO
 * CHECKOUT BLOCK ON THIS SITE", which was true of THIS Codespace and had never
 * been true of dev: the lead developer had already converted both pages to the
 * blocks there. #193 therefore styled `form.woocommerce-cart-form`,
 * `table.shop_table`, `#customer_details` and `#payment div.payment_box` —
 * markup dev does not render. `tools/create-cart-checkout-pages.php` seeds dev's
 * block content so this environment matches, and sections 8 and 9 below replace
 * #193's cart and checkout entirely. The DECISIONS are #193's and are reused;
 * the selectors are all new. Full account: docs/reports/woo-blocks-styling.md.
 *
 * ⚠ MY ACCOUNT IS UNCHANGED AND IS STILL CLASSIC. Sections 10 and 11 are #193's
 * work, untouched, and the shared layer in sections 1–7 serves both stacks. Any
 * rule below that names `.woocommerce-account` is doing classic work; a rule
 * that names `.wp-block-woocommerce-cart` or `.wp-block-woocommerce-checkout` is
 * doing block work. Nothing is left pointing at classic cart or checkout markup.
 *
 * ⚠ THERE ARE NO MOCKUPS FOR ANY OF THE THREE. Every value below is DERIVED
 * from a shipped, frame-verified surface and the source is named at the rule.
 * The contract, with the measurement for each value, is
 * docs/reports/woo-templates-styling.md §1 — it is markup-independent and is
 * reused rather than re-derived. Nothing here is a new brand decision that was
 * not already made somewhere else on this site.
 *
 * ── WHY assets/css/ AND NOT patterns/{name}/{name}.css ──────────────────────
 *
 * Same reason `assets/css/shop-archive.css` is here: there is no pattern to
 * co-locate with. These surfaces are a plugin's blocks and a shortcode's output;
 * nothing in `patterns/` renders them, so `ftm_enqueue_pattern_styles()` has no
 * folder to find. See includes/enqueue.php.
 *
 * ⚠ AND `theme.json` `styles.blocks` IS NOT AN ALTERNATIVE, WHICH WAS MEASURED.
 * `woocommerce/cart` declares `supports: { align, html, multiple }`;
 * `woocommerce/checkout` the same. Enumerated against the live
 * `WP_Block_Type_Registry` on 2026-08-31, of the ninety-odd registered
 * `woocommerce/*` blocks that declare `color`, `typography`, `spacing` or
 * `border` support, NOT ONE belongs to the cart or the checkout tree. A
 * `styles.blocks["woocommerce/cart"]` entry emits zero bytes. The one part of
 * these pages `theme.json` does reach is the empty cart, whose heading and
 * button are ordinary core blocks — see 8.8.
 *
 * ⚠ AND THE ENQUEUE IS GATED, WHICH shop-archive.css DELIBERATELY IS NOT.
 * That file loads unconditionally because `enqueue_block_assets` fires in the
 * Site Editor and `templates/archive-product.html` is a THEME template that has
 * to look like itself while it is being edited. The gate here is
 * `is_admin() || is_cart() || is_checkout() || is_account_page()` — admin first,
 * so the canvas gets the file either way.
 *
 * ── THE CASCADE BUDGET, MEASURED — AND IT IS NOT #193's ─────────────────────
 *
 * #193's governing fact was `woocommerce-diagnosis.md` §4b: `woocommerce.css`
 * prints AFTER every theme stylesheet, so a theme rule that merely TIES Woo
 * loses. **That is still true and it has stopped mattering on two of the three
 * surfaces**, because `woocommerce.css` is classic and matches almost nothing in
 * block markup. The sheets that style the cart and checkout blocks print EARLY.
 * Measured on `/cart/` with `document.styleSheets`, 2026-08-31:
 *
 *     12  wc-blocks.css
 *     18  cart.css                      (checkout.css on /checkout/)
 *     19  packages-style.css
 *     28  woocommerce-blocktheme.css
 *     36  ftm-blocks/design-system/build/woocommerce.css   (the bridge)
 *     69  THIS FILE
 *     70  global-styles (inline)
 *     76  woocommerce.css               (classic; My Account's opponent)
 *
 * So on the block cart and checkout A TIE GOES TO THE THEME. Sections 8 and 9
 * carry NO `!important` and reach for NO ID, and the two things that do print
 * later are named where they matter: `global-styles`' `:root :where(.wp-element-button,
 * .wp-block-button__link)` at (0,1,0), which has to be beaten on specificity,
 * and `woocommerce.css`, which only reaches My Account.
 *
 * ⚠ MY ACCOUNT STILL PAYS #193's PRICE and sections 5–7 and 10 still carry the
 * ID-bearing selectors that buys. Those are not defensive padding:
 *
 *   (2,2,2)  #add_payment_method #payment div.payment_box input.input-text
 *
 * is `woocommerce.css`'s, and an ID cannot be outweighed by any number of
 * classes.
 *
 * ── BREAKPOINTS ─────────────────────────────────────────────────────────────
 *
 * Literal rem values with the token named in a comment, because custom
 * properties cannot be used inside an `@media` condition
 * (design-system/tokens/primitive.json:765). Scale: sm 30 / md 48 / lg 64 /
 * xl 80 rem. Prefix notation, per the theme stylelint config.
 *
 * ⚠ SECTIONS 8 AND 9 USE `@container`, NOT `@media`, AND THAT IS FORCED.
 * `cart.css` declares `.wp-block-woocommerce-cart { container-type: inline-size }`
 * (and the same for the checkout) and stacks its two columns at
 * `@container (max-width: 699px)`. A `@media` width would flip at a different
 * moment from the block it is describing, by the width of whatever padding sits
 * outside the block. The theme rules match Woo's own condition instead.
 *
 * @package WordPress
 * @subpackage FTM_Theme
 */

/* ─────────────────────────────────────────────────────────────────────────
 * 1. Local token layer
 *
 * Declared on the three body classes rather than at `:root`, so nothing here
 * leaks onto a page that is not one of these three surfaces. Every value is a
 * design-system or theme token; the two literals are the ones the contract
 * proves have no token (the 2px button radius, which four shipped stylesheets
 * already restate, and the 268/64 rail geometry, which is shop-archive.css's).
 *
 * NO `--tc-icon-*` IS DECLARED HERE. F22 — the theme has no global icon layer
 * and seven stylesheets have each defined their own; these three surfaces need
 * no iconography that is not already text (`×` for remove, a text link for the
 * shipping calculator), so this build adds an eighth to nothing.
 * ───────────────────────────────────────────────────────────────────────── */

.woocommerce-cart,
.woocommerce-checkout,
.woocommerce-account {
	--tc-woo-ink: var(--wp--custom--color--base--black, #0a205b);
	--tc-woo-muted: var(--wp--custom--color--neutral--500, #6c757d);
	--tc-woo-line: var(--wp--custom--color--neutral--200, #dee2e6);
	--tc-woo-panel: var(--wp--custom--color--neutral--50, #f8f9fa);
	--tc-woo-cta: var(--wp--custom--color--secondary--600, #057db9);
	--tc-woo-cta-hover: var(--wp--custom--color--secondary--800, #075985);
	--tc-woo-accent: var(--wp--custom--color--secondary--700, #0369a1);
	--tc-woo-link: var(--wp--custom--color--primary--600, #123b9e);

	/* Control radius IS a token (6). Button radius is NOT — the scale is
	   sm 6 / md 16 / pill 1.5em and every button on this site draws a hard 2,
	   restated as a literal in contact-form.css:670, product-detail.css:1541,
	   product-grid.css and shop-archive.css alike. */
	--tc-woo-radius-control: var(--wp--custom--radius--sm, 6px);
	--tc-woo-radius-button: 2px;

	/* Field and container radius, resolved per surface: cart and checkout take
	   the designer's 2026-09-15 ruling (fields 2, containers 4 — block 1a
	   below); My Account was not in the question, so here both fall back to
	   the control radius and the one three-surface rule (the notice banner)
	   keeps its 6 there. */
	--tc-woo-radius-field: var(--tc-woo-radius-control);
	--tc-woo-radius-container: var(--tc-woo-radius-control);
	--tc-woo-control-height: 3rem; /* 48 — contact-form.css:397 */

	/* The 1400 band's own split, lifted verbatim from shop-archive.css:1427:
	   "1400 content band = 268 rail + 64 gutter + 1068 grid". */
	--tc-woo-rail: 268px;
	--tc-woo-gutter: 4rem; /* 64 */

	/*
	 * The header-to-first-content gap, 48 below md and 80 at and above it.
	 *
	 * ⚠ A COPY OF style.css's `--tc-leading-gap`, AND IT HAS TO BE. That property
	 * is declared ON `.wp-site-blocks > main > .entry-content` — the element it
	 * pads. The cart's `<h1>` is that element's SIBLING, not its descendant, so it
	 * inherits nothing and `var(--tc-leading-gap, 3rem)` on the title silently
	 * takes the 3rem fallback at every width. Measured: the title sat 48 below the
	 * header at 1440 where the rest of the site sits 80.
	 *
	 * The two ends are style.css's own and its derivation stands (blog-archive
	 * D1/D4, and docs/design/contact-us/desktop.png independently: nav bottom 205,
	 * first ink 289, box top 285, so 80). If that ramp ever moves, this moves with
	 * it — noted at both ends.
	 */
	--tc-woo-lead: 3rem; /* 48 */

	/* ⚠ `--tc-woo-totals: 372px` WAS HERE AND IS DELETED, NOT MOVED. #193 derived
	   it for the CLASSIC cart's totals panel, whose width this file had to set
	   because a float has none. The block cart's sidebar is a flex item Woo sizes
	   at 35%, so nothing declares a width for it and the token had zero uses. The
	   derivation is preserved in docs/reports/woo-templates-styling.md §1.5 in
	   case a width is ever needed again. */

	/*
	 * The stepper glyphs. F22 — the theme has no global icon layer and each
	 * stylesheet declares its own; product-detail.css does it twice in one file.
	 * These two are product-detail.css:1040-1041 verbatim, because 8.3 draws the
	 * SAME Woo component the PDP draws and the two controls have to be one
	 * control. #193 declared no icons here and said so; the block cart is why
	 * that changed.
	 */
	--tc-woo-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 11h16v2H4z'/%3E%3C/svg%3E");
	--tc-woo-icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 4h2v7h7v2h-7v7h-2v-7H4v-2h7z'/%3E%3C/svg%3E");
}

/*
 * N6 — MUTED TEXT ON A PANEL IS neutral-600 (QA batch A, 2026-09-27).
 *
 * `--tc-woo-muted` (neutral-500 #6C757D) on `--tc-woo-panel` (neutral-50
 * #F8F9FA) measures 4.45:1 and fails WCAG 1.4.3's 4.5 at every size it is used
 * here (12-14px). Rendered, that pair was found in five places — the account
 * register helper and privacy text, the cart summary's "Shipping will be
 * calculated at checkout", and the checkout summary's Subtotal and Delivery
 * labels (browser-tests/qa-batch-a/scan-muted.mjs).
 *
 * The fix is scoped to the PANELS rather than to the five selectors, because
 * the pair is structural: any muted text that ever lands in a panel — a
 * coupon line, a discount, a shipping option's description, the payment
 * accordion — would fail the same way. Every use of `--tc-woo-muted` in this
 * file is a text `color`, so redefining it on the panels changes muted TEXT ON
 * NEUTRAL-50 and nothing else. Muted text on white stays neutral-500 (4.69:1,
 * passing), which is why the token itself is not moved.
 *
 * neutral-600 #495057 is the next step and the only one that passes: 7.76:1 on
 * the panel. It is already the theme's own muted role (`--color-text-muted`,
 * theme-tokens.css), so this introduces no new colour. The list below is every
 * rule in this file that paints `--tc-woo-panel` behind text; the cart
 * thumbnail's panel fill holds no text and is left out.
 */
.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-block,
.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-radio-control__option-checked,
.woocommerce-checkout
	.wp-block-woocommerce-checkout
	.wp-block-woocommerce-checkout-payment-block
	.wc-block-components-radio-control-accordion-option:has(.wc-block-components-radio-control__option-checked),
.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control-accordion-content,
.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-checkout__sidebar,
.woocommerce-checkout .wp-block-woocommerce-checkout .checkout-order-summary-block-fill-wrapper,
.woocommerce-account .woocommerce #customer_login form.woocommerce-form-login,
.woocommerce-account .woocommerce #customer_login form.woocommerce-form-register,
.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li a:hover {
	--tc-woo-muted: var(--wp--custom--color--neutral--600, #495057);
}

/*
 * ── 1a. Cart and checkout radius — fields 2, containers 4 (designer, 2026-09-15)
 *
 * The open question was 2 or 6 (Gary review §1.2). The answer is neither:
 * form fields 2px, containers 4px, on these two surfaces. My Account was not
 * in the question and keeps `--tc-woo-radius-control` (6) on its own rules.
 *
 * WHAT IS A FIELD AND WHAT IS A CONTAINER is the whole decision, and it is
 * written down element by element in DECISIONS 2026-09-17 §2. Fields: the
 * text inputs and textarea, the selects, both coupon inputs (and the checkbox,
 * already a literal 2). Containers: both sidebars, the checkout's mobile
 * summary wrapper, the payment-method list (which carried the button's 2 from
 * 2026-09-09 until now), the accordion body, the generic option row, the
 * notice banner and — a judgment — the cart's 64px thumbnail tile. The cart's
 * remove (×) button is a BUTTON and takes the button radius; that is the other
 * judgment. Buttons themselves are untouched: the ruling is about fields and
 * containers.
 *
 * After this block no cart or checkout rule reads `--tc-woo-radius-control`;
 * `grep` should find it only on `.woocommerce-account` rules and in the
 * fallback declarations above.
 */

.woocommerce-cart,
.woocommerce-checkout {
	--tc-woo-radius-field: 2px;
	--tc-woo-radius-container: 4px;
}

@media (min-width: 48rem) { /* breakpoint/md — style.css's own boundary for this ramp */

	.woocommerce-cart,
	.woocommerce-checkout,
	.woocommerce-account {
		--tc-woo-lead: 5rem; /* 80 */
	}
}

/* ─────────────────────────────────────────────────────────────────────────
 * 2. Containers
 *
 * ⚠ THE 1000px CAP #193 FOUGHT NO LONGER REACHES THE CART OR THE CHECKOUT, AND
 * LEAVING ITS ANSWER IN PLACE WOULD HAVE BROKEN THEM. `woocommerce-blocktheme.css:1`
 * caps `.woocommerce-{cart,checkout,account} main .woocommerce` at 1000px, at
 * (0,2,1), and on the classic pages that class was on the cart itself — hence
 * #193's finding that the `<h1>` rendered 1360 over a 1000-wide cart flush left.
 *
 * On the block pages `.woocommerce` is on ONE element and it is not the cart:
 * `div.wc-block-store-notices.woocommerce.alignwide`, the notices strip above
 * the title. The cart and checkout blocks carry
 * `.wp-block-woocommerce-{cart,checkout}.alignwide` and no `.woocommerce` at
 * all, so they take the band on their own and were measured at 1360 with
 * `max-width: none` before this file did anything.
 *
 * ⚠ SO #193's `.woocommerce-checkout main .woocommerce { max-width: 1000px;
 * margin-inline: auto }` WAS STILL MATCHING — on the store notices, capping a
 * full-band page's notice strip to 1000 and centring it under a 1360 title. A
 * rule written for markup that is gone does not stop applying; it applies to
 * whatever still answers to the selector. All three surfaces now say the same
 * thing and say it once.
 *
 * The measures per surface, and the rule is stated once so it is not read as an
 * inconsistency: A TABLE GETS THE BAND, A FORM GETS A MEASURE.
 *
 *   Cart        the site's alignwide band. Line items beside a totals panel,
 *               and it uses every pixel.
 *   Checkout    the band as well, which is a CHANGE from #193 and is 9's
 *               opening note: the block checkout is a form BESIDE a summary
 *               rail at 65/35, so the band gives a two-up address row 400 a
 *               side — inside the 480 #193 called the top of comfortable, and
 *               better than its 1000 cap would give this layout.
 *   My Account  the alignwide band. The orders table is five columns wide and
 *               the nav rail takes 268 of it; the logged-OUT page is a pair of
 *               forms and is capped at 1000 in section 10.
 * ───────────────────────────────────────────────────────────────────────── */

.woocommerce-cart main .woocommerce,
.woocommerce-checkout main .woocommerce,
.woocommerce-account main .woocommerce {
	max-width: none;
}

/*
 * ⚠ THE CART'S TITLE AND ITS CONTENT ARE SPACED BY TWO DIFFERENT RULES, AND
 * BOTH ARE WRONG BY DEFAULT.
 *
 * `page-cart.html` — and this theme's own `page-checkout.html` and
 * `page-my-account.html` — puts `core/post-title` and `core/post-content` side
 * by side inside `<main>`. `style.css`'s #187 rule pads `.entry-content` 80px
 * from the top — which is the site's header-to-content gap and is correct where
 * `.entry-content` is the FIRST thing in `<main>`. Here it is the second: the
 * `<h1>` is above it, taking WordPress's 24px blockGap. Measured at 1440 before
 * this file: header ends 206, h1 top 230 (24 — three times too tight), h1
 * bottom 298, content top 402 (104 — far too loose).
 *
 * ⚠ MY ACCOUNT JOINED THIS RULE LATE AND ITS NUMBERS WERE WORSE, NOT THE SAME.
 * `page-my-account.html` puts the title FIRST inside `<main>` with no
 * `store-notices` block above it, so the h1 takes no blockGap at all: measured
 * at 1440 with the template in place and before these two rules named the
 * account, header ended 206 and the h1 top was 206 — a zero gap, not the cart's
 * 24 — with content at 378, 104 below the title exactly as on the cart. Both
 * surfaces are corrected by the same two rules; only the starting error differs.
 *
 * The fix moves the 80 up to where it belongs and gives the title-to-content
 * gap the section-adjacent value the rest of the site uses. The h1's margin is
 * `--tc-leading-gap`, style.css's own custom property for exactly this
 * distance, so the two ends of the ramp stay in one place: 48 below md, 80 at
 * and above it. Nothing new is invented.
 *
 * ⚠ SPECIFICITY, AND IT IS ONE HIGHER THAN IT LOOKS. The #187 rule carries TWO
 * `:has()` arguments inside its `:not()`, and the second is one level deeper:
 *
 *   :not( :has(> :first-child:is([class*='ftm-scheme-'], .has-background)),
 *         :has(> :first-child > :first-child:is(…)) )
 *
 * `:is()` is (0,1,0), `:first-child:is(…)` is (0,2,0), and the SECOND `:has()`
 * therefore measures (0,3,0) — so `:not()`, which takes its heaviest argument,
 * is (0,3,0) and the whole rule is (0,5,1), not the (0,4,1) the first argument
 * alone suggests. Measured the hard way: `:root body.woocommerce-cart
 * .wp-site-blocks > main > .entry-content` at (0,4,2) was written first, shipped,
 * and computed 80px anyway. `.wp-block-post-title`'s sibling `.wp-block-post-content`
 * is already on the element, so naming it reaches (0,5,2) and wins on the
 * element count without inventing anything.
 */

:root body.woocommerce-account .wp-site-blocks > main > .entry-content.wp-block-post-content {
	padding-block-start: var(--wp--preset--spacing--xlarge, 2.5rem); /* 40 */
}

/*
 * G39 / G42 (Gary, 2026-09-14): 48 from the title to the first content on the
 * cart and the checkout. The account page is not named and keeps the 40 above.
 *
 * ⚠ THE 48 IS NOT THIS PADDING ALONE. `.entry-content` is the h1's sibling in
 * a flow-layout `<main>`, so WP's `:where(.is-layout-flow) > *` gives it a 24px
 * block-start margin that this file never cleared — measured at 1440: h1 bottom
 * 346, content top 370, cart block 410. So the rendered gap was 24 + 40 = 64 on
 * the cart, and 24 + 40 + 24 = 88 on the checkout, whose block carries Woo's own
 * `padding-top: 24px` (`checkout.css`, `.wp-block-woocommerce-checkout`). The
 * margin is left where it is and the padding is set to `large` so the two sum
 * to 48; the checkout's third 24 is zeroed in 9.1.
 */

:root body.woocommerce-cart .wp-site-blocks > main > .entry-content.wp-block-post-content,
:root body.woocommerce-checkout .wp-site-blocks > main > .entry-content.wp-block-post-content {
	padding-block-start: var(--wp--preset--spacing--large, 1.5rem); /* 24 + WP's 24 margin = 48 */
}

/* ─────────────────────────────────────────────────────────────────────────
 * 3. Type
 *
 * The page title renders `heading-large` at 61px/68 with NO letter-spacing,
 * which is not a role this site ships: /services/ measures 51/60/700 at
 * −1.02px (−2%) and eleven pattern stylesheets restate that −2% because the
 * design system's `heading-strong` typeStyle emits 0 (environment-facts §2).
 * The preset is used for the size so the fluid ramp is the site's own.
 * ───────────────────────────────────────────────────────────────────────── */

.woocommerce-cart .wp-site-blocks > main > .wp-block-post-title,
.woocommerce-checkout .wp-site-blocks > main > .wp-block-post-title,
.woocommerce-account .wp-site-blocks > main > .wp-block-post-title {
	margin-block-start: var(--tc-woo-lead);
	font-size: var(--wp--preset--font-size--heading-large, 3.1875rem);
	font-weight: 700;
	line-height: 1.176; /* theme.json type-styles.heading-strong */
	letter-spacing: -0.02em;
	color: var(--tc-woo-ink);
}

/* Woo's own section headings. They render as bare `h2`/`h3` and inherit the
   global element styles, which give them no tracking and, on `h2`, a size that
   competes with the page title. Pinned to the panel-heading role: `title-large`
   at −2%, which is what the PDP's own `h1` measures (27/32/700/−0.54px).

   ⚠ CLASSIC ONLY. The cart's "Cart totals" and the checkout's "Billing
   details" / "Your order" are gone with the shortcodes; their block
   equivalents — `.wc-block-cart__totals-title`,
   `.wc-block-components-checkout-step__title`,
   `.wc-block-components-checkout-order-summary__title-text` — take THIS SAME
   ROLE in 8.5, 9.2 and 9.6, restated there rather than added to this list,
   because each also has to clear a different Woo rule. */

.woocommerce-account .woocommerce #customer_login h2,
.woocommerce-account .woocommerce .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce .woocommerce-MyAccount-content h3 {
	margin-block: 0 var(--wp--preset--spacing--large, 1.5rem); /* 24 */
	font-size: var(--wp--preset--font-size--title-large, 1.6875rem);
	font-weight: 700;
	line-height: 1.185; /* theme.json type-styles.title */
	letter-spacing: -0.02em;
	color: var(--tc-woo-ink);
}

/* Body copy on these surfaces renders at the global 18/27. The site's own body
   role is `body-large` at 18/24 (measured on /services/), so only the line box
   moves.

   ⚠ THE CART AND CHECKOUT SCOPES MOVED OFF `.woocommerce`. On the block pages
   that class is on the notices strip alone, so the old selector styled an empty
   div and nothing else. The block wrappers are what hold the content now. */

.woocommerce-cart .wp-block-woocommerce-cart,
.woocommerce-checkout .wp-block-woocommerce-checkout,
.woocommerce-account .woocommerce {
	font-size: var(--wp--preset--font-size--body-large, 1.125rem);
	line-height: 1.333; /* theme.json type-styles.body */
	color: var(--tc-woo-ink);
}

/* In-content links. The global rule reaches these already
   (`.entry-content a:where(:not(.wp-element-button))` at (0,1,1)) and paints
   primary-600, which is right; what it does not do is give the underline an
   offset, so a link inside a table row collides with the row below it at 13px.
   Only the offset and the hover are set.

   `.wc-block-components-button` joins the exclusion list: the block cart and
   checkout draw their buttons as anchors carrying that class, and a CTA is not
   an in-content link. */

.woocommerce-cart .wp-block-woocommerce-cart a:not(.wp-element-button, .wc-block-components-button, .wc-forward),
.woocommerce-checkout .wp-block-woocommerce-checkout a:not(.wp-element-button, .wc-block-components-button, .wc-forward),
.woocommerce-account .woocommerce a:not(.button, .wp-element-button, .wc-forward) {
	color: var(--tc-woo-link);
	text-underline-offset: 0.2em;
}

.woocommerce-cart .wp-block-woocommerce-cart a:not(.wp-element-button, .wc-block-components-button, .wc-forward):hover,
.woocommerce-checkout .wp-block-woocommerce-checkout a:not(.wp-element-button, .wc-block-components-button, .wc-forward):hover,
.woocommerce-account .woocommerce a:not(.button, .wp-element-button, .wc-forward):hover {
	color: var(--tc-woo-accent);
}

/* ─────────────────────────────────────────────────────────────────────────
 * 4. Notices
 *
 * ⚠ ALL THREE SURFACES EMIT THE BLOCK BANNER, NOT THE CLASSIC LIST. Triggered
 * live and measured — a failed login, an add-to-cart, an empty cart — every one
 * is `div.wc-block-components-notice-banner.is-{info,error,success}`.
 * `plugins/woocommerce/templates/notices/error.php` still emits
 * `ul.woocommerce-error` and is never reached; wc-blocks filters the notice
 * templates in a block theme. A rule written against `.woocommerce-message`
 * would match nothing, which is what `woocommerce-diagnosis.md` §4c found from
 * the other direction.
 *
 * The three defaults are WordPress-admin colours with no relation to this site:
 * info #007CBA on #F4F8FF, error #CC1818 on #FFF0F0, success #4AB866 on
 * #F4FFF7, all at radius 4 with #2F2F2F text.
 *
 * ⚠ ERROR IS THE ONE ROLE WITH NO THEME TOKEN. `theme.json`'s palette is base /
 * primary / secondary / tertiary / neutral / warning / black-alpha — there is no
 * red family. `--wc-red` (#dc2626) is the design system's own answer, mapped at
 * `html:root` by design-system/build/woocommerce.css, which is the part of that
 * bridge woocommerce-diagnosis.md §4c calls load-bearing. Reusing it introduces
 * no literal this project has not already committed to. Raised for the designer
 * in the report's §7 rather than settled here.
 * ───────────────────────────────────────────────────────────────────────── */

.woocommerce-cart .wc-block-components-notice-banner,
.woocommerce-checkout .wc-block-components-notice-banner,
.woocommerce-account .wc-block-components-notice-banner {
	align-items: center;
	gap: var(--wp--preset--spacing--small, 0.75rem); /* 12 */
	padding: var(--wp--preset--spacing--normal, 1rem); /* 16 */
	border-width: 1px;
	border-style: solid;
	border-radius: var(--tc-woo-radius-container);
	font-size: var(--wp--preset--font-size--label-medium, 0.875rem);
	font-weight: 500;
	line-height: 1.4286; /* 20/14 */
	color: var(--tc-woo-ink);
}

.woocommerce-cart .wc-block-components-notice-banner.is-info,
.woocommerce-checkout .wc-block-components-notice-banner.is-info,
.woocommerce-account .wc-block-components-notice-banner.is-info {
	border-color: var(--tc-woo-accent);
	background-color: var(--wp--custom--color--secondary--50, #f0f9ff);
}

.woocommerce-cart .wc-block-components-notice-banner.is-success,
.woocommerce-checkout .wc-block-components-notice-banner.is-success,
.woocommerce-account .wc-block-components-notice-banner.is-success {
	border-color: var(--wp--custom--color--tertiary--600, #04865d);
	background-color: var(--wp--custom--color--tertiary--50, #ecfdf5);
}

.woocommerce-cart .wc-block-components-notice-banner.is-error,
.woocommerce-checkout .wc-block-components-notice-banner.is-error,
.woocommerce-account .wc-block-components-notice-banner.is-error {
	border-color: var(--wc-red, #dc2626);
	background-color: var(--wp--custom--color--warning--50, #fffbeb);
}

/*
 * ⚠ THE LEADING GLYPH IS A WHITE ICON ON A COLOURED DISC, NOT A COLOURED ICON.
 * `wc-blocks.css` draws it as `> svg { fill: #fff; background-color: #2f2f2f;
 * border-radius: 50%; padding: 2px }` and re-points only the background per
 * status. Setting `fill` here instead — which was the first attempt — paints the
 * glyph the same colour as its own disc and renders a solid dot. Measured, at
 * 1440, on the empty cart. The background is what moves.
 */

.woocommerce-cart .wc-block-components-notice-banner > svg,
.woocommerce-checkout .wc-block-components-notice-banner > svg,
.woocommerce-account .wc-block-components-notice-banner > svg {
	flex: none;
	width: 1.25rem; /* 20 */
	height: 1.25rem;
	margin: 0;
}

.woocommerce-cart .wc-block-components-notice-banner.is-info > svg,
.woocommerce-checkout .wc-block-components-notice-banner.is-info > svg,
.woocommerce-account .wc-block-components-notice-banner.is-info > svg {
	background-color: var(--tc-woo-accent);
}

.woocommerce-cart .wc-block-components-notice-banner.is-success > svg,
.woocommerce-checkout .wc-block-components-notice-banner.is-success > svg,
.woocommerce-account .wc-block-components-notice-banner.is-success > svg {
	background-color: var(--wp--custom--color--tertiary--600, #04865d);
}

.woocommerce-cart .wc-block-components-notice-banner.is-error > svg,
.woocommerce-checkout .wc-block-components-notice-banner.is-error > svg,
.woocommerce-account .wc-block-components-notice-banner.is-error > svg {
	background-color: var(--wc-red, #dc2626);
}

/* A notice can carry a button inside its message — "Browse products" on the
   empty orders list, "Confirm email address" on an unverified account. They are
   `.button.wc-forward`, so §6 already sizes them; only the flow needs help,
   because Woo emits the anchor and the sentence as siblings in one text node. */

.woocommerce-cart .wc-block-components-notice-banner__content,
.woocommerce-checkout .wc-block-components-notice-banner__content,
.woocommerce-account .wc-block-components-notice-banner__content {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--small, 0.75rem);
	align-items: center;
}

/*
 * ⚠ THE ONLY OTHER `!important` IN THIS FILE, AND IT ANSWERS ONE.
 * `wc-blocks.css` forces an action link inside a notice — "Browse products" on
 * the empty orders list, "Confirm email address" on an unverified account — to
 * `color: #2f2f2f !important` with a transparent background. The rest of that
 * rule is right (a notice should not carry a second filled button) and is left
 * alone; only the grey is answered, because #2f2f2f is not a colour this site
 * uses anywhere. An `!important` cannot be beaten by specificity at all —
 * build-knowledge §5a, the preset font-size case.
 */

.woocommerce-cart .wc-block-components-notice-banner__content .wc-forward,
.woocommerce-checkout .wc-block-components-notice-banner__content .wc-forward,
.woocommerce-account .wc-block-components-notice-banner__content .wc-forward {
	color: var(--tc-woo-link) !important;
	opacity: 1;
}

/* ─────────────────────────────────────────────────────────────────────────
 * 5. Form controls — CLASSIC ONLY, WHICH NOW MEANS MY ACCOUNT
 *
 * ⚠ THIS SECTION USED TO CARRY THE CHECKOUT AND IT NO LONGER DOES, BECAUSE
 * `.form-row`, `.input-text` AND `#payment div.payment_box` ARE NOT IN THE
 * BLOCK MARKUP AT ALL. #193 enumerated eight container scopes here —
 * `checkout_coupon`, `woocommerce-billing-fields__field-wrapper`,
 * `woocommerce-shipping-fields__field-wrapper`,
 * `woocommerce-additional-fields__field-wrapper` and the gateway's payment box
 * on two surfaces — and six of the eight matched nothing the moment the pages
 * became blocks. They are removed rather than left as dead weight; the block
 * checkout's field components are 9.3.
 *
 * ⚠ AND THE EXPENSIVE PART OF #193 IS NOT REMOVED, BECAUSE IT WAS NEVER ABOUT
 * THE CHECKOUT ALONE. `/my-account/add-payment-method/` renders the SAME three
 * Authorize.net fields the checkout does, through the CLASSIC form —
 * `<form id="add_payment_method">` → `<div id="payment">` → `div.payment_box` —
 * and `woocommerce.css`'s rule for that surface is
 *
 *   (2,2,2)  #add_payment_method #payment div.payment_box input.input-text
 *
 * An ID cannot be outweighed by any number of classes, and TWO IDs need two
 * back. That selector survives below and is the only place in this file that
 * carries an ID. #193 §11.1's decision — THE CARD FIELDS TAKE THE HOUSE CONTROL
 * — is unchanged and now lands on both surfaces from two different directions:
 * here for the classic form, and 9.5 for the block checkout, where it costs
 * nothing because no ID-bearing rule reaches that markup.
 *
 * The declarations are contact-form.css:396's, unchanged: a 48px box, 16 of
 * inline padding, a 1px `neutral-200` hairline, `radius--sm`, and Label/Medium
 * 14/20/500.
 *
 * What is set inside the payment box is BOX AND TYPOGRAPHY ONLY: height,
 * padding, border, radius, background, colour, size, weight, line-height,
 * width. No `display`, no positioning, no `appearance`, nothing that changes
 * what the element IS. The card-brand artwork the gateway paints as a
 * `background-image` is untouched — only `background-color` is set — and so is
 * its focus box-shadow.
 * ───────────────────────────────────────────────────────────────────────── */

.woocommerce-account .woocommerce .form-row input.input-text,
.woocommerce-account .woocommerce #add_payment_method #payment div.payment_box .form-row input.input-text {
	block-size: var(--tc-woo-control-height);
	padding-block: 0;
	padding-inline: var(--wp--preset--spacing--normal, 1rem); /* 16 */
	border: 1px solid var(--tc-woo-line);
	border-radius: var(--tc-woo-radius-control);
	background-color: var(--wp--custom--color--base--white, #fff);
	color: var(--tc-woo-ink);
	font-size: var(--wp--preset--font-size--label-medium, 0.875rem);
	font-weight: 500;
	line-height: 1.4286; /* 20/14 */
	inline-size: 100%;
}

/* The textarea takes the same box with padding on all four sides and one step
   up in type — contact-form.css:425's reading of the frames, where the
   textarea's placeholder role is deliberately larger than the inputs'. */

.woocommerce-account .woocommerce .form-row textarea.input-text {
	min-block-size: 6rem; /* 96 */
	padding: var(--wp--preset--spacing--normal, 1rem);
	border: 1px solid var(--tc-woo-line);
	border-radius: var(--tc-woo-radius-control);
	background-color: var(--wp--custom--color--base--white, #fff);
	color: var(--tc-woo-ink);
	font-size: var(--wp--preset--font-size--label-x-large, 1rem);
	font-weight: 500;
	line-height: 1.5; /* 24/16 */
	inline-size: 100%;
}

.woocommerce-account .woocommerce .form-row :is(input, textarea)::placeholder {
	color: var(--tc-woo-muted);
	opacity: 1;
}

/* Native selects. Matched to the input box, minus the fixed height, which a
   select must be free to grow past when a long option is selected. */

.woocommerce-account .woocommerce .form-row select {
	block-size: var(--tc-woo-control-height);
	padding-block: 0;
	padding-inline: var(--wp--preset--spacing--normal, 1rem);
	border: 1px solid var(--tc-woo-line);
	border-radius: var(--tc-woo-radius-control);
	background-color: var(--wp--custom--color--base--white, #fff);
	color: var(--tc-woo-ink);
	font-size: var(--wp--preset--font-size--label-medium, 0.875rem);
	font-weight: 500;
	inline-size: 100%;
}

/*
 * select2 replaces the country and state selects with a `<span>` tree, so the
 * rule above cannot reach them — this is the same control, drawn by a different
 * element. The opponent is `.select2-container--default .select2-selection--single`
 * at (0,2,0); three classes clear it.
 *
 * Only the box is matched. The dropdown panel, the search field and the
 * highlight colour are select2's and are left alone: they are rendered into a
 * detached container at the end of `<body>`, outside every scope in this file,
 * and reaching them would mean an unscoped global rule.
 *
 * ⚠ CLASSIC ONLY, AND THAT IS NOW ONE SURFACE. select2 is a jQuery enhancement
 * of a `<select>` in a PHP template; the block checkout renders its own
 * `.wc-blocks-components-select` React component and never loads it. The
 * address form under `/my-account/edit-address/` still does.
 */

.woocommerce-account .woocommerce .select2-container .select2-selection--single {
	display: flex;
	align-items: center;
	block-size: var(--tc-woo-control-height);
	padding-inline: var(--wp--preset--spacing--normal, 1rem);
	border: 1px solid var(--tc-woo-line);
	border-radius: var(--tc-woo-radius-control);
	background-color: var(--wp--custom--color--base--white, #fff);
}

.woocommerce-account .woocommerce .select2-container .select2-selection__rendered {
	padding: 0;
	color: var(--tc-woo-ink);
	font-size: var(--wp--preset--font-size--label-medium, 0.875rem);
	font-weight: 500;
	line-height: 1.4286;
}

.woocommerce-account .woocommerce .select2-container .select2-selection__arrow {
	block-size: 100%;
	inset-inline-end: var(--wp--preset--spacing--xsmall, 0.5rem);
}

/* Labels. Woo renders them at the inherited 18/36; the contract is
   Label/Medium 14/20 at weight 700 with 8 below (contact-form.css:356).

   ⚠ THIS IS THE ONE PLACE THE TWO STACKS GENUINELY DISAGREE. The classic form
   puts the label ABOVE the field, which is what every other form on this site
   does. The block checkout floats it INSIDE the control — see 9.3, where the
   pattern is kept deliberately and the divergence is on the designer list. */

.woocommerce-account .woocommerce .form-row label {
	display: block;
	margin-block-end: var(--wp--preset--spacing--xsmall, 0.5rem); /* 8 */
	font-size: var(--wp--preset--font-size--label-medium, 0.875rem);
	font-weight: 700;
	line-height: 1.4286;
	color: var(--tc-woo-ink);
}

/*
 * ⚠ A SINGLE-COUNTRY STORE RENDERS THE COUNTRY SELECT AS INERT TEXT, AND IT IS
 * STILL A `<select>`. This store ships to one country, so WooCommerce adds
 * `.country_to_state--single` and styles the element into a text node —
 *
 *   .woocommerce form .form-row .country_to_state--single
 *     { background: 0 0; border: 0; padding: 0; appearance: none;
 *       font: inherit; font-weight: 700; width: auto; pointer-events: none }
 *
 * — at (0,4,1), which beats the generic `.form-row select` rule above on every
 * property it names. That is deliberate on Woo's part and is kept: it is a
 * read-only value and drawing a disabled control around it would be worse. What
 * is corrected is the type, which `font: inherit` takes from the surface — 18px
 * bold, a heading under its own label. Five classes wins.
 */

.woocommerce-account .woocommerce form .form-row select.country_to_state--single {
	display: inline-block;
	block-size: auto;
	padding-block: 0.75rem;
	font-size: var(--wp--preset--font-size--label-medium, 0.875rem);
	font-weight: 500;
	line-height: 1.4286;
	color: var(--tc-woo-ink);
}

/* The required marker and the "(optional)" tag are the two annotations Woo puts
   inside the label. `#C02B0A` is Gravity Forms' own required colour and is what
   /contact-us/ renders at every width — it is never overridden anywhere on this
   site, so matching it is consistency, not a new choice. */

.woocommerce-account .woocommerce .form-row label .required {
	color: #c02b0a; /* Gravity Forms' required marker, measured on /contact-us/ */
	text-decoration: none;
}

.woocommerce-account .woocommerce .form-row label .optional {
	font-weight: 500;
	color: var(--tc-woo-muted);
}

/* Checkboxes — "Remember me", "Create an account?". contact-form.css:560's
   control, verbatim, including the 2px radius that is a frame value rather than
   the 6 the radius scale starts at. The block checkout's own checkbox component
   takes the identical box in 9.3, from a different selector. */

.woocommerce-account .woocommerce input[type="checkbox"] {
	appearance: none;
	flex-shrink: 0;
	inline-size: 1.125rem; /* 18 */
	min-inline-size: 1.125rem;
	block-size: 1.125rem;
	margin: 0;
	border: 1px solid var(--wp--custom--color--neutral--300, #ced4da);
	border-radius: 2px;
	background-color: var(--wp--custom--color--base--white, #fff);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 0.75rem 0.75rem;
	cursor: pointer;
}

.woocommerce-account .woocommerce input[type="checkbox"]:checked {
	border-color: var(--tc-woo-accent);
	background-color: var(--tc-woo-accent);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12.5l5.5 5.5L20 6.5'/></svg>");
}

/*
 * A checkbox and its label sit on one line. Woo wraps both in a single `<label>`
 * for "Remember me", which the label rule above would otherwise turn into a
 * block with 8px under it.
 *
 * ⚠ `form .form-row` IS IN THE SELECTOR AND IS LOAD-BEARING.
 * `.woocommerce form .form-row label.checkbox { display: inline }` is (0,3,2);
 * a three-class answer is (0,3,1) and LOSES on the element count. Measured: the
 * label computed `display: inline`, and the box inside it collapsed to 2px
 * wide, because an `appearance: none` checkbox that is `display: inline` is a
 * non-replaced inline element and width does not apply to it. Two things looked
 * wrong and it was one rule.
 */

.woocommerce-account .woocommerce form .form-row label.woocommerce-form__label-for-checkbox {
	display: flex;
	gap: var(--wp--preset--spacing--small, 0.75rem); /* 12 */
	align-items: flex-start;
	margin-block-end: 0;
	font-weight: 500;
	cursor: pointer;
}

/* Same opponent, on the control rather than its label:
   `.woocommerce form .form-row .input-checkbox { display: inline; margin: -2px 8px 0 0 }`
   is (0,3,1) and ties the shared checkbox rule above, which loses on order. */

.woocommerce-account .woocommerce form .form-row input[type="checkbox"] {
	display: inline-block;
	margin: 0;
	vertical-align: middle;
}

/* ─────────────────────────────────────────────────────────────────────────
 * 6. Buttons
 *
 * ⚠ THE `#32373C` DEFECT IS CLOSED AND THIS IS NOT IT. woocommerce-diagnosis.md
 * §9.1 and gravity-forms-diagnosis.md §3b both record every bare Woo button on
 * this site — Return to shop, Log in, Register, Add to Cart — rendering
 * WordPress's stock grey `#32373C` through a (0,1,0) tie lost on load order.
 * Measured 2026-08-31 they render `#123B9E`: `theme.json`'s
 * `styles.elements.button` now sets `background: var(--ftm-scheme-accent,
 * #123b9e)`. That fix is on main and the record has not caught up.
 *
 * What is left is a button that is the wrong one — primary-600 where every CTA
 * on this site is secondary-600, a 16px pill where every CTA is a hard 2px, and
 * 18/27/400 body type where the button role is Label/Large 15/24. The contract
 * is contact-form.css:665 and product-detail.css:1539, which agree.
 *
 * ONE WEIGHT since 2026-09-14, and that weight is 500 since 2026-09-15. This
 * used to be TWO WEIGHTS — the primary action (Proceed to checkout, Place order,
 * Log in) at 700 and secondary actions (Apply coupon, Update cart, Update) at
 * 500, #193 §6. Gary's G01 flattened them: the review note read as 600, and on
 * 2026-09-15 he clarified that every button is 500 (the mockups draw 500).
 * ───────────────────────────────────────────────────────────────────────── */

.woocommerce-account .woocommerce .button,
.woocommerce-account .woocommerce button.woocommerce-Button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: var(--tc-woo-control-height); /* 48 */
	padding-block: 0.75rem; /* 12 */
	padding-inline: var(--wp--preset--spacing--normal, 1rem); /* 16 */
	border: 0;
	border-radius: var(--tc-woo-radius-button);
	background-color: var(--tc-woo-cta);
	color: var(--wp--custom--color--base--white, #fff);
	font-size: var(--wp--preset--font-size--label-large, 0.9375rem);
	font-weight: 500; /* G01, corrected to 500 on 2026-09-15 */
	line-height: 1.6; /* 24/15 */
	letter-spacing: 0.002em;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
}

.woocommerce-account .woocommerce .button:hover,
.woocommerce-account .woocommerce button.woocommerce-Button:hover {
	background-color: var(--tc-woo-cta-hover);
	color: var(--wp--custom--color--base--white, #fff);
	opacity: 1; /* woocommerce-blocktheme.css fades `a.button.alt:hover` to .9 */
}

/* Disabled. Woo ships "Update cart" disabled until a quantity changes, and
   fades it to 50% opacity — which on a filled button reads as a loading state
   rather than an unavailable one. A flat neutral panel with muted ink is
   unambiguous and keeps 4.6:1. */

.woocommerce-account .woocommerce .button:disabled {
	background-color: var(--wp--custom--color--neutral--100, #e9ecef);
	color: var(--tc-woo-muted);
	opacity: 1;
	cursor: not-allowed;
}

/*
 * The page's primary action, full width. (Was also one step heavier at 700 until G01 levelled every button — to 600 on 2026-09-14, corrected to 500 on 2026-09-15.)
 *
 * `.woocommerce-cart .wc-proceed-to-checkout a.checkout-button` is (0,3,1) and
 * sets `display`, `font-size` and `padding` — so it BEATS the (0,3,0) button
 * rule above on exactly those three, and the box has to be restated here at
 * (0,4,1) rather than inherited. Found by measuring, not by reading.
 */

.woocommerce-account .woocommerce .woocommerce-form-login button[name="login"],
.woocommerce-account .woocommerce .woocommerce-form-register button[name="register"] {
	display: flex;
	inline-size: 100%;
	padding-block: 0.75rem;
	padding-inline: var(--wp--preset--spacing--normal, 1rem);
	font-size: var(--wp--preset--font-size--label-large, 0.9375rem);
	font-weight: 500; /* G01, corrected to 500 on 2026-09-15 */
}

/* ─────────────────────────────────────────────────────────────────────────
 * 6a. Focus — ⚠ WHAT IS ALREADY RINGED IS LEFT ALONE, AND THAT IS THE POINT
 *
 * The first version of this section declared a blanket
 * `:is(a, button, input, select, textarea):focus-visible { outline: …;
 * box-shadow: none }` across all three surfaces, on the strength of
 * build-knowledge §25 ("this theme gives `<button>` no focus ring"). **That was
 * wrong here and the suite caught it.**
 *
 * §25 is about the THEME's `theme.json`, which declares no button focus. The
 * ftm-blocks design system does: `elements.css` writes `outline: none` plus
 * `box-shadow: var(--ftm-focus-ring)` on buttons, in-content links and form
 * controls, and `assets/css/theme-tokens.css` re-points that token to a
 * full-opacity two-layer ring. Measured with keyboard-originated focus and the
 * transition settled, **every control on these three surfaces already draws
 * white 2px + `#123B9E` 5px** — the cart's remove, coupon field, both coupon
 * buttons, Proceed, the calculator link, product links, quantity, every checkout
 * field, Place order, the account rail, the orders row action and Log in.
 *
 * ⚠ AND ONE OF THOSE IS A CANARY. `product-detail-buy-box-verify.spec.ts`
 * assertion 27 tabs to **My Account's Log in button** and asserts that ring, and
 * says in its own comment that it is _"the only assertion in the repo standing
 * between that rename and a silent site-wide regression"_ — a design-system
 * rebuild renaming `--ftm-focus-ring` would return every ring on the site to
 * 2.42:1 with no error anywhere. `box-shadow: none` here killed that canary.
 * **Nothing in this file sets `box-shadow` on a focused control.**
 *
 * What is left is the two real gaps, measured the same way.
 * ───────────────────────────────────────────────────────────────────────── */

/*
 * GAP 1 — the checkbox and the password toggle fall to the UA ring. Chromium's
 * is `outline: auto 1px rgb(16,16,16)`: visible on white, undesigned, and §25's
 * point stands for exactly these. contact-form.css:708's form, which is what the
 * consent box on /contact-us/ already draws.
 *
 * ⚠ THE BLOCK CHECKOUT HAS THE SAME GAP FROM A DIFFERENT CLASS. Its checkboxes
 * are `.wc-block-components-checkbox__input`, which 9.3 gives `appearance:
 * none` for the house box — and an `appearance: none` checkbox draws no ring of
 * its own either. Same fix, same two properties, on the component's class.
 *
 * The gateway's own tokenize checkbox is NOT included — the scope stops at
 * Woo's own field wrappers, as everywhere else in this file.
 */

.woocommerce-account .woocommerce form .form-row input[type="checkbox"]:focus-visible,
.woocommerce-account .woocommerce form .show-password-input:focus-visible,
.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-checkbox__input:focus-visible {
	outline: 2px solid var(--tc-woo-accent);
	outline-offset: 2px;
}

/*
 * ⚠ GAP 1a — TWO BLOCK-CART CONTROLS HAVE NO RING AT ALL, AND A KEYBOARD SWEEP
 * IS THE ONLY THING THAT SAYS SO. Both were measured with keyboard-originated
 * focus and the transition settled, the same way #193 measured the classic
 * surfaces:
 *
 *   .wc-block-cart-item__remove-link      box-shadow: none,
 *                                         outline: auto 1px rgb(16,16,16)
 *   .wc-block-components-panel__button    box-shadow: none,
 *      (the coupon disclosure)            outline: auto 1px rgb(16,16,16)
 *
 * Chromium's default in both cases: visible on white, undesigned, and §25's
 * point stands for exactly these. The remove control is the only DESTRUCTIVE
 * action on the page and the coupon toggle is a `div[role="button"]`, which the
 * design system's `elements.css` control rule never had a reason to name.
 *
 * ⚠ `outline`, NEVER `box-shadow`. Nothing in this file sets `box-shadow` on a
 * focused control — see the section header, and the buy-box canary it names.
 *
 * ⚠ AND THIS DOES NOT TOUCH THE TWO CONTROLS WOO RINGS ITSELF. Proceed to
 * Checkout and Place order draw `inset 0 0 0 1px #fff, 0 0 0 2px #0675C4` from
 * `wc-blocks.css` — a real, opaque, two-layer ring in a blue that is NOT this
 * site's `#123B9E`. Re-tinting it would mean setting `box-shadow` on a focused
 * control, which is the one thing this build may not do. It is a designer
 * question and it is on the report's list.
 */

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-item__remove-link:focus-visible,
.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-panel__button:focus-visible,
.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-panel__button:focus-visible {
	outline: 2px solid var(--tc-woo-accent);
	outline-offset: 2px;
}

/*
 * GAP 2 — the order-notes textarea gets NO ring at all. Measured
 * `box-shadow: none`, not the transparent two-layer base every other control
 * shows: the design system's control rule does not reach it. The token is read
 * rather than a value restated, so a retune or a rename moves this with
 * everything else instead of stranding it.
 *
 * ⚠ THE CLASSIC SELECTOR IS GONE AND THE GAP IS NOT. The checkout's order note
 * is now `.wc-block-checkout__order-notes textarea` and the design system's
 * control rule misses it for the same reason it missed the old one.
 */

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-checkout__order-notes textarea:focus-visible {
	box-shadow: var(--ftm-focus-ring);
}

/*
 * ⚠ FORCED COLOURS — a DESIGN-SYSTEM BRIDGE DEFECT, not local politeness.
 *
 * The ring above is a `box-shadow`, and `box-shadow` is not painted in forced-
 * colours mode. The design system pairs it with `outline: none` in six places
 * (`gravity-forms-diagnosis.md`), so with forced colours active every button,
 * link and control on this site computes `outline-style: none` with
 * `box-shadow: none` — **no focus indicator at all.**
 *
 * `contact-form.css:707` is the ONLY `@media (forced-colors: active)` block in
 * the codebase and exists for this exact reason. This is the second, for the
 * three commerce surfaces. `Highlight` is the system keyword, so the platform
 * picks the colour.
 */

@media (forced-colors: active) {
	.woocommerce-cart .wp-block-woocommerce-cart :is(a, button, input, select, textarea):focus-visible,
	.woocommerce-checkout .wp-block-woocommerce-checkout :is(a, button, input, select, textarea):focus-visible,
	.woocommerce-account .woocommerce :is(a, button, input, select, textarea):focus-visible {
		outline: 3px solid Highlight;
		outline-offset: 2px;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
 * 7. Tables
 *
 * ⚠ THREE OF THE FOUR TABLES THIS SECTION WAS WRITTEN FOR NO LONGER EXIST. #193
 * covered the cart's line items, the cart totals, the checkout's order review
 * and My Account's orders list. The first three were `table.shop_table` inside
 * a shortcode; the block cart draws `table.wc-block-cart-items` (8.2) and the
 * block checkout draws no table at all — its order summary is a list of divs
 * (9.6). What is left on `table.shop_table` is My Account's orders, downloads
 * and address tables, which is what this section now says.
 *
 * The treatment is unchanged and 8.2 reuses it on the block class. Woo draws
 * these tables with a
 * 1px `rgba(0,0,0,0.1)` outer border, a 5px radius and no row rules; the
 * reference here is the shop archive card and the PDP details panel — a
 * hairline `neutral-200` between rows, no outer box, and cells on the control
 * padding.
 *
 * `border-collapse: collapse` rather than Woo's `separate` + `border-spacing: 0`
 * so a single `border-block-end` on the row draws one hairline instead of two
 * abutting cell borders.
 * ───────────────────────────────────────────────────────────────────────── */

.woocommerce-account .woocommerce table.shop_table {
	inline-size: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	border-radius: 0;
	font-size: var(--wp--preset--font-size--label-medium, 0.875rem);
	line-height: 1.4286;
	color: var(--tc-woo-ink);
}

.woocommerce-account .woocommerce table.shop_table thead th {
	padding: 0 var(--wp--preset--spacing--normal, 1rem) var(--wp--preset--spacing--small, 0.75rem);

	/* `border: 0` first, then the one edge we want. `.woocommerce table.shop_table
	   td` draws a `border-top` in `color-mix(in srgb, currentColor 20%, transparent)`
	   — navy at 20% — and setting only `border-block-end` leaves it in place to
	   collapse against ours, so the divider colour would be Woo's, not
	   neutral-200. */
	border: 0;
	border-block-end: 1px solid var(--tc-woo-line);
	font-size: var(--wp--preset--font-size--label-small, 0.75rem);
	font-weight: 700;
	line-height: 1.3333;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: start;
	color: var(--tc-woo-muted);
}

.woocommerce-account .woocommerce table.shop_table tbody td,
.woocommerce-account .woocommerce table.shop_table tbody th {
	padding: var(--wp--preset--spacing--normal, 1rem); /* 16 */
	border: 0;
	border-block-end: 1px solid var(--tc-woo-line);
	line-height: 1.4286;
	vertical-align: middle;
	text-align: start;
}

/* The row header column — "Subtotal", "Shipment", "Tax", "Total" in the totals
   tables. Woo sets `font-weight: 700` on `tbody th` at (0,2,3); this ties the
   role to the label rather than shouting it, and the amount beside it is what
   carries weight. */

.woocommerce-account .woocommerce table.shop_table tbody th {
	font-weight: 500;
	color: var(--tc-woo-muted);
}

/* Prices are the one thing in these tables that is not body text. */

.woocommerce-account .woocommerce .woocommerce-Price-amount {
	font-weight: 700;
	white-space: nowrap;
	color: var(--tc-woo-ink);
}

/* ─────────────────────────────────────────────────────────────────────────
 * 7a. Classic form layout — ⚠ RECOVERED FROM THE DELETED CHECKOUT SECTION
 *
 * ⚠ EVERY RULE BELOW WAS WRITTEN FOR THE CLASSIC CHECKOUT, ALSO NAMED MY
 * ACCOUNT, AND DELETING THE CHECKOUT TOOK MY ACCOUNT WITH IT. This build
 * removed #193's sections 10 and 11 wholesale on the correct premise that the
 * classic checkout is gone. Six of their rules carried a `.woocommerce-account`
 * selector in the same list, and going with them broke two My Account tests
 * that had nothing to do with the checkout:
 *
 *   `the account rail is the shop archive's own 268 + 64`  — rail measured
 *       1028 wide instead of 268
 *   `sign in and register sit side by side`                — the two forms
 *       stopped being side by side
 *
 * Both are ONE root cause and it is the last rule in this section. Caught by
 * running the suite, not by reading the diff — the selectors are grouped by
 * WHAT THEY DO, so a section that is "the checkout" by title is not the
 * checkout by contents.
 *
 * ⚠ THE LESSON, BECAUSE IT WILL RECUR: a shared-selector list is not safe to
 * delete by section. #193's own §11 says its clearfix trap "will bite again";
 * it did, from the other direction — not by being forgotten, but by being
 * thrown away with the surface it was named after.
 * ───────────────────────────────────────────────────────────────────────── */

/*
 * ⚠ WOOCOMMERCE'S FLOAT CLEARFIXES BECOME GRID ITEMS, AND THIS IS THE RULE THE
 * ACCOUNT RAIL DEPENDS ON. #193 §11 called it "the single most expensive thing
 * found in this build". Woo puts a `::before` / `::after` clearfix pair on every
 * float container it ships; the moment a rule here makes one of those containers
 * `display: grid`, the two pseudo-elements become GRID ITEMS and take the first
 * two cells. The symptom is not "my grid is broken" — it is a grid off by
 * exactly one cell, which reads as an auto-placement quirk.
 *
 * `.woocommerce-account .entry-content > .woocommerce` is `display: grid` in
 * section 10 (the 268 + 64 rail) and `#customer_login` is `display: grid` there
 * too, so both need it. Measured with this rule absent: the rail rendered in
 * column two with the content below it in column one.
 *
 * Suppressed with `content: none` rather than `display: none`: `content: none`
 * stops the pseudo-element being generated at all, where `display: none` leaves
 * a generated box the spec still has to blockify. One is the absence of a thing;
 * the other is a hidden thing.
 *
 * ⚠ AND THE SUPPRESSION HAS TO OUT-SPECIFY. Woo's own is
 * `.woocommerce-account .woocommerce::before` at (0,2,1); a suppression written
 * at the same shape TIES IT AND LOSES ON ORDER. `.entry-content >` takes it to
 * (0,3,1).
 */

.woocommerce-account .entry-content > .woocommerce::before,
.woocommerce-account .entry-content > .woocommerce::after,
.woocommerce-account .woocommerce .col2-set::before,
.woocommerce-account .woocommerce .col2-set::after,
.woocommerce-account .woocommerce .addresses .title::before,
.woocommerce-account .woocommerce .addresses .title::after {
	content: none;
}

/*
 * `.woocommerce form .form-row { padding: 3px; margin: 0 0 6px }` is (0,2,1) and
 * is the whole of Woo's field rhythm. The contract's field gap is 24 — the
 * contact form's `row-gap` at every width (contact-form.css:87, :304) — and the
 * 3px of padding is a float-era gutter that a grid does not need.
 */

.woocommerce-account .woocommerce form .form-row {
	margin: 0;
	padding: 0;
}

/*
 * ⚠ WOO'S TWO-UP IS FLOATS AT 47%, AND IT IS REPLACED BY A GRID RATHER THAN
 * RETUNED. `.form-row-first` / `.form-row-last` float left and right at 47%,
 * which leaves 6% of dead gutter, drops out of the flow, and needs the clearfix
 * above. A two-track grid on the field WRAPPER puts the same two fields side by
 * side with a real gap and no float to contain, and it is what makes
 * `.form-row-wide` a one-line span instead of a `clear: both`.
 *
 * One column is the base and two are the addition, mobile-first, rather than two
 * with a mobile collapse. contact-form.css's own note on the name field is the
 * precedent: a max-width collapse there tied the two-column rule at (0,6,0) and
 * lost on source order, leaving a pair side by side at 136px each at 320 while
 * every other field was correctly full width. Restating mobile-first removes the
 * conflict instead of winning it.
 */

.woocommerce-account .woocommerce form.woocommerce-EditAccountForm {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--large, 1.5rem); /* 24 */
	align-items: start;
}

.woocommerce-account .woocommerce form.woocommerce-EditAccountForm > .form-row-wide,
.woocommerce-account .woocommerce form.woocommerce-EditAccountForm > fieldset,
.woocommerce-account .woocommerce form.woocommerce-EditAccountForm > p:last-of-type {
	grid-column: 1 / -1;
}

/* Woo's floats have to go, or a grid item still tries to float inside its cell. */

.woocommerce-account .woocommerce form .form-row-first,
.woocommerce-account .woocommerce form .form-row-last,
.woocommerce-account .woocommerce form .form-row-wide {
	float: none;
	inline-size: auto;
}

/* Woo appends a `→` to every `.wc-forward` link. It is a glyph with no icon
   layer behind it and no counterpart anywhere else on this site. */

.woocommerce-account .woocommerce .wc-forward::after {
	content: none;
}

/* The privacy sentence under the login and registration forms. */

.woocommerce-account .woocommerce .woocommerce-privacy-policy-text {
	font-size: var(--wp--preset--font-size--label-medium, 0.875rem);
	line-height: 1.4286;
	color: var(--tc-woo-muted);
}

.woocommerce-account .woocommerce .woocommerce-privacy-policy-text p {
	margin-block: 0;
}

@media (min-width: 48rem) { /* breakpoint/md */

	.woocommerce-account .woocommerce form.woocommerce-EditAccountForm {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ═════════════════════════════════════════════════════════════════════════
 * 8. CART  —  /cart/, page 8, the `woocommerce/cart` BLOCK
 *
 * ⚠ THIS SECTION REPLACES THE CLASSIC CART SECTIONS OF PR #193 AND NOT ONE
 * SELECTOR SURVIVED. `[woocommerce_cart]` rendered `form.woocommerce-cart-form`,
 * `table.shop_table`, `td.product-remove a.remove`, `.cart-collaterals
 * .cart_totals`. The block renders `table.wc-block-cart-items`,
 * `button.wc-block-cart-item__remove-link` and
 * `.wc-block-cart__sidebar`. The DECISIONS are #193's and are reused verbatim —
 * the 44px remove target, the neutral-50 panel at `radius--sm` with 24 of
 * padding, the house CTA, the hairline row rule. Only the selectors moved.
 *
 * ⚠ AND THE CASCADE MOVED WITH THEM, IN THE THEME'S FAVOUR. #193's governing
 * fact was `woocommerce.css` printing at index 79, AFTER every theme sheet, so a
 * theme rule that TIED Woo lost. That is still true of `woocommerce.css` (index
 * 76 here) and it no longer matters, because `woocommerce.css` is classic and
 * matches almost nothing in this markup. The sheets that DO style these
 * elements print EARLY:
 *
 *     12  wc-blocks.css
 *     18  cart.css
 *     19  packages-style.css
 *     28  woocommerce-blocktheme.css
 *     36  ftm-blocks/design-system/build/woocommerce.css   (the bridge)
 *     69  THIS FILE
 *     70  global-styles (inline)
 *
 * Measured on `/cart/` 2026-08-31 with `document.styleSheets`. So on the block
 * cart a TIE GOES TO THE THEME, which is why nothing below reaches for an ID and
 * why this section carries no `!important` at all. The two exceptions are named
 * at the rules that need them: `global-styles` at 70 prints AFTER this file, so
 * its `:root :where(.wp-element-button, .wp-block-button__link)` (0,1,0) has to
 * be beaten on specificity rather than order, and the bridge's `:root .wc-…`
 * rules are (0,2,0), which the standing scope ties and wins on order.
 *
 * ⚠ `theme.json` `styles.blocks` IS NOT A SEAM HERE, AND THAT WAS MEASURED, NOT
 * ASSUMED. `woocommerce/cart` declares `supports: { align, html, multiple }` and
 * every one of its inner blocks — filled-cart, cart-items, cart-line-items,
 * cart-totals, cart-order-summary-*, proceed-to-checkout, empty-cart — declares
 * no `color`, `typography`, `spacing` or `border` support at all. Enumerated
 * against the live `WP_Block_Type_Registry` on 2026-08-31: of 90-odd registered
 * `woocommerce/*` blocks with style supports, NOT ONE belongs to the cart or the
 * checkout tree. A `styles.blocks["woocommerce/cart"]` entry emits zero bytes.
 * CSS is the only seam, which is why this file grew instead of `theme.json`.
 *
 * THE EMPTY STATE IS THE EXCEPTION and it is handled the other way round: its
 * heading and button are ordinary `core/heading` and `core/button` blocks, so
 * `theme.json`'s existing `core/button` entry already reaches the button and
 * only the empty state's own layout is set here. See 8.8.
 *
 * ⚠ THE BLOCK IS A CONTAINER QUERY CONTEXT, SO THE BREAKPOINTS ARE
 * `@container`, NOT `@media`. `cart.css` declares
 * `.wp-block-woocommerce-cart { container-type: inline-size }` and stacks the
 * two columns at `@container (max-width: 699px)`. Matching that condition is the
 * only way a theme rule can flip at the same moment the block does; a `@media`
 * width would disagree with it by the width of whatever padding is outside the
 * block. Every two-column rule below is inside `@container (min-width: 700px)`,
 * which is 699 + 1 in prefix notation.
 * ═════════════════════════════════════════════════════════════════════════ */

/* ── 8.1 The two columns ─────────────────────────────────────────────────── */

/*
 * Woo's own split is kept — `.wc-block-components-main { width: 65% }` and
 * `.wc-block-components-sidebar { width: 35% }`, which at the 1360 band gives
 * 884 and 476. What is replaced is HOW THE GUTTER IS DRAWN. Woo makes it out of
 * `padding-right: 4.5283%` on the main column plus `padding-left: 2.2641%` on
 * the sidebar: 61.6 + 30.8 = 92.4px at 1440, and 30.8 of that falls INSIDE the
 * sidebar. That is fine while the sidebar is transparent and wrong the moment it
 * becomes a panel, because a fill would start 30.8px after the gutter ends and
 * the panel's own padding would then be 30.8 + 24 on one side and 24 on the
 * other.
 *
 * So the whole gutter moves onto the main column at the site's own 64
 * (`--tc-woo-gutter`, shop-archive.css:1427's "1400 content band = 268 rail +
 * 64 gutter + 1068 grid"), and the sidebar starts at its own edge. Main content
 * goes 822 → 820 and the sidebar 445 → 476-48 = 428 of content inside a panel.
 */

@container (min-width: 700px) {
	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-main {
		padding-inline-end: var(--tc-woo-gutter); /* 64 */
	}

	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-sidebar {
		padding-inline-start: 0;
	}
}

/* ── 8.2 Line items ──────────────────────────────────────────────────────── */

/*
 * The table. §7's treatment, on the block's own class: no outer box, a hairline
 * between rows, cells on the control padding. `border-collapse: collapse` for
 * the same reason as §7 — one `border-block-end` on the row draws one hairline
 * instead of two abutting cell borders.
 */

.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items {
	inline-size: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--label-medium, 0.875rem);
	line-height: 1.4286; /* 20/14 */
	color: var(--tc-woo-ink);
}

/*
 * The header row. §7's `thead th` role verbatim — Label/Small, 700, uppercase at
 * 8% tracking, muted, over a hairline. Woo renders it at
 * `var(--wp--preset--font-size--small)` / 500 / no tracking, i.e. body text
 * pretending to be a header.
 */

.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items thead th {
	padding: 0 0 var(--wp--preset--spacing--small, 0.75rem); /* 0 0 12 */
	border: 0;
	border-block-end: 1px solid var(--tc-woo-line);
	font-size: var(--wp--preset--font-size--label-small, 0.75rem);
	font-weight: 700;
	line-height: 1.3333;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: start;
	color: var(--tc-woo-muted);
}

.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items thead th.wc-block-cart-items__header-total {
	text-align: end;
}

/*
 * The rows. Woo draws the rule in `color-mix(in srgb, currentColor 20%,
 * transparent)` — navy at 20%, which is a different grey from every other
 * hairline on the site. Measured 0px at 1440 and present at 375, because Woo
 * moves the border between the row and its cells at the stacking breakpoint;
 * both are set here so the rule does not appear and disappear.
 *
 * ⚠ THE DIVIDER IS ON THE ROW, NOT ON THE CELLS, AND IT USED TO BE ON THE
 * CELLS. Corrected 2026-09-09. `border-block-end` on `> td` draws one border
 * PER CELL, and neither the geometry nor the drawing survives that:
 *
 *   1920  the three cells ended at 589.6 / 589.6 / 494.3 — the line stepped up
 *         by 95px around the price and stepped back down again. Cause below.
 *   768   three separate borders with the stacked grid's 16px `column-gap`
 *   320   between them, so the "rule" rendered as three segments and two holes.
 *
 * One `border-block-end` on the ROW draws one line, the full width of the row,
 * in both layouts — a `table-row` at and above the block's 700px stacking point
 * and a grid below it.
 *
 * ⚠ AND `> td { border: 0 }` IS LOAD-BEARING, NOT TIDYING. Under
 * `border-collapse: collapse` the winner is chosen by weight and then by
 * ORIGIN, and a CELL border beats a ROW border at equal width and style
 * (CSS 2.2 §17.6.2: cell, then row, then row group, then column, then table).
 * Leave a 1px cell border in place and the row's line never appears; zeroing
 * the cells to `border-style: none` — the lowest priority there is — is what
 * lets it through.
 *
 * ⚠ SPECIFICITY: WOO'S OWN ROW BORDER IS (0,5,1) AND HAS TO BE BEATEN, NOT
 * TIED. `cart.css` ships
 *
 *   .wc-block-cart table.wc-block-cart-items:not(.wc-block-mini-cart-items)
 *     :not(:last-child) .wc-block-cart-items__row  { border-bottom: 1px … }
 *
 * — five classes and pseudo-classes plus one element. It does not currently
 * match, because the items table IS the last child (measured
 * `border-bottom-width: 0px` on the row at 1920), but §5a is explicit that a
 * rule which is inert today is not a rule you get to ignore. The selector below
 * mirrors Woo's own shape to reach (0,6,1) and wins outright.
 *
 * ⚠ AND `.wc-block-cart` IS **NOT** ON `.wp-block-woocommerce-cart` — THE FIRST
 * VERSION OF THIS SELECTOR CHAINED THEM AND MATCHED NOTHING. Measured, the cart
 * nests four wrappers deep and the two classes are two levels apart:
 *
 *   DIV.wp-block-woocommerce-cart
 *     DIV.wc-block-components-sidebar-layout.wc-block-cart
 *          .wp-block-woocommerce-filled-cart-block
 *       DIV.wc-block-components-main.wc-block-cart__main
 *         TABLE.wc-block-cart-items
 *
 * `.wp-block-woocommerce-cart.wc-block-cart` therefore selected zero elements
 * and the divider simply did not draw — `querySelectorAll` returned 0 and the
 * row still measured `border-bottom-width: 0px`. §5a's "present, valid and
 * inert", found the way it is always found: by counting matches, not by reading
 * the rule. They are DESCENDANTS, so they need a combinator between them.
 */

.woocommerce-cart
	.wp-block-woocommerce-cart
	.wc-block-cart
	table.wc-block-cart-items:not(.wc-block-mini-cart-items)
	.wc-block-cart-items__row {
	border-block-end: 1px solid var(--tc-woo-line);
}

.woocommerce-cart
	.wp-block-woocommerce-cart
	.wc-block-cart
	table.wc-block-cart-items:not(.wc-block-mini-cart-items)
	.wc-block-cart-items__row:last-child {
	border-block-end: 0;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-items__row > td {
	padding-block: var(--wp--preset--spacing--normal, 1rem); /* 16 */
	border: 0;
	vertical-align: top;
}

/*
 * ⚠ THE LINE TOTAL IS A `<td>` THAT IS NOT A TABLE CELL, AND THAT IS THE WHOLE
 * OF THE 1920 DEFECT. `cart.css` ships
 *
 *   .wc-block-cart-item__total { display: flex; justify-content: flex-end }
 *
 * at (0,1,0). An element whose `display` is not a table type stops being a
 * table cell: the table generates an ANONYMOUS cell around it, and the `<td>`
 * inside sizes to its own content instead of to the row. Measured at 1920 the
 * total box was 55.4 tall in a 150.6 row, which is why its border sat 95px
 * high, and why `vertical-align: top` on it did nothing — an anonymous cell has
 * nothing to align.
 *
 * Restoring `display: table-cell` puts it back in the row proper, so it takes
 * the row's height, the `> td` padding above and `vertical-align: top` all at
 * once. (0,3,1) against Woo's (0,1,0).
 *
 * Scoped to the wide branch deliberately: below 700 the row is a grid, a grid
 * item's `display` is blockified (`table-cell` → `block`), and Woo's flex is
 * doing real work there — `justify-content: flex-end` is what right-aligns the
 * price in the stacked layout.
 */

@container (min-width: 700px) {
	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-item__total {
		display: table-cell;
	}
}

/* The thumbnail cell. #193's 80px column holding a 64px square at `radius--sm`,
   on the panel fill so a missing image is still a box rather than a hole. */

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-item__image {
	inline-size: 5rem; /* 80 */
	padding-inline: 0;
}

/*
 * ⚠ THE IMAGE NEEDS (0,4,2), NOT (0,3,1). `cart.css` sets `width: 100%` from
 * `table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img`
 * = (0,3,2), and a three-class answer loses on the ELEMENT count even though it
 * prints later. Measured 80 in an 80 cell, i.e. the picture filling the column
 * instead of the 64 square inside it.
 */

.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-item__image img {
	display: block;
	inline-size: 4rem; /* 64 */
	block-size: 4rem;
	border-radius: var(--tc-woo-radius-container);
	background-color: var(--tc-woo-panel);
	object-fit: cover;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-item__product {
	padding-inline-start: var(--wp--preset--spacing--normal, 1rem);
}

/*
 * The product name — #193's decision, unchanged: the row's only link and the
 * thing a person scans for, so it takes the small-title role rather than the
 * table's body size, in ink rather than link blue, with the link affordance on
 * hover.
 *
 * ⚠ TWO OPPONENTS, BOTH AT (0,3,1), AND ONE OF THEM IS THIS FILE'S OWN.
 * `cart.css` sets the size and weight from
 * `table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name`
 * — 14/500 and `max-width: max-content`. Section 3's in-content link rule sets
 * the colour, and `:not()` takes its heaviest argument, so
 * `.woocommerce-cart .wp-block-woocommerce-cart a:not(.wp-element-button, …)`
 * is (0,3,1) too and prints EARLIER in this file than section 8.
 *
 * The first version of this rule was (0,3,0) and lost to both: measured 13px,
 * weight 500, `#123B9E`. Matching Woo's own shape reaches (0,5,1) and settles
 * it against both without an ID or an `!important`.
 *
 * `max-width` is restated because Woo's `max-content` makes the link's hit area
 * stop at the text, which is right for the name and wrong for the 44px row a
 * touch user aims at.
 */

.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
	max-inline-size: 100%;
	font-size: var(--wp--preset--font-size--label-x-large, 1rem);
	font-weight: 700;
	line-height: 1.5;
	color: var(--tc-woo-ink);
	text-decoration: none;
}

.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name:hover {
	color: var(--tc-woo-link);
	text-decoration: underline;
}

/* Per-item metadata and the unit price under the name — the row's supporting
   text, at the muted body role. */

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-product-metadata,
.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-item__prices {
	font-size: var(--wp--preset--font-size--label-medium, 0.875rem);
	font-weight: 500;
	line-height: 1.4286;
	color: var(--tc-woo-muted);
}

/* The line total. §7's rule for `.woocommerce-Price-amount`, which the block
   does not emit — this is the same decision on the block's own class. */

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-item__total {
	text-align: end;
}

/*
 * ⚠ `line-height` IS SET HERE SO THE PRICE AND THE PRODUCT TITLE SHARE A
 * BASELINE, and it is not cosmetic rounding. Both are 1rem, but the title takes
 * `line-height: 1.5` from its own rule above and the price inherited the
 * table's 1.4286. Two line boxes of 24 and 22.86 starting at the same y put
 * their baselines 0.57px apart, and the price measured a 20px box at 1440
 * against the title's 24 — visibly high once the cells were made to start
 * together. Matching the title's ratio makes the two line boxes identical, so
 * "same top padding" and "same baseline" become the same statement.
 */

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price__value {
	font-size: var(--wp--preset--font-size--label-x-large, 1rem);
	font-weight: 700;
	line-height: 1.5; /* 24/16 — the product name's, one rule up */
	white-space: nowrap;
	color: var(--tc-woo-ink);
}

/* ── 8.2a The stacked row ────────────────────────────────────────────────── */

/*
 * ⚠ THE STACKED ROW OVERFLOWED AT 320 AND THE BUILD NEVER SAW IT, BECAUSE THE
 * BUILD STOPPED AT 375. Added 2026-09-09. Measured
 * `documentElement.scrollWidth − clientWidth`: 0 at 375, 0 at 768, 0 at 1920,
 * and **34 at 320** — the items table rendering 338 wide in a 288 content band,
 * with the line total hanging off the right edge of the viewport.
 *
 * Woo's stacked template is `grid-template-columns: 80px 132px` with
 * `column-gap: 16px`, `.wc-block-cart-item__product` spanning
 * `grid-column: 2 / 4`, and `.wc-block-cart-item__total` auto-placed into an
 * IMPLICIT FOURTH TRACK. So the row is really five tracks and one of them is
 * empty:
 *
 *   80 (image) + 16 + 132 (track 2) + 16 + 0 (track 3, empty) + 16 + 78 (total)
 *     = 338
 *
 * Restating the template as three explicit tracks with explicit placement
 * deletes the empty track and its 16px gap, and gives the product column a real
 * `1fr` instead of a fixed 132 plus whatever spills into an implicit track.
 * Nothing about 768 changes: the row there is 688 wide and every track is at or
 * above its content width already.
 *
 * ⚠ THIS DOES NOT MAKE 320 FIT, AND NO TEMPLATE CAN. That is arithmetic, not
 * styling. The row's one-line MINIMUM is
 *
 *   80 (image) + 16 + 120 (the house stepper) + 16 + 78 (the price) = 310
 *
 * against 288 available. The 120 is `product-detail.css:1373` — the PDP's
 * stepper, which 8.3 exists to keep identical and which the designer list
 * already carries as a known cost at 375. Narrowing it here to win 22px would
 * take that decision back sideways. So the price wraps instead, which is the
 * remedy the brief asked for and the only one that costs nothing else.
 */

/*
 * ⚠ EVERY SELECTOR IN THE TWO BLOCKS BELOW IS WRITTEN AGAINST WOO'S OWN SHAPE,
 * BECAUSE WOO'S PLACEMENT RULES OUT-SPECIFY THE SCOPE THE REST OF §8.2 USES.
 * The row is `.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row`
 * = (0,3,1) and each cell's placement is (0,4,1). A plain
 * `.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-item__image` is
 * (0,3,1) and loses on the element count — the §5a failure that is invisible
 * because the rule is present, valid and inert. Naming the table takes the row
 * to (0,4,1) and the cells to (0,5,1), both of which beat outright.
 */

@container (max-width: 699px) {
	.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row {
		grid-template-columns: 5rem minmax(0, 1fr) auto; /* 80 / product / total */
	}

	.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
		grid-area: 1 / 1 / 2 / 2;
	}

	.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product {
		grid-area: 1 / 2 / 2 / 3;
	}

	.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
		grid-area: 1 / 3 / 2 / 4;
	}

	/*
	 * ⚠ AND THE CELLS LOSE THEIR OWN BLOCK PADDING HERE, WHICH IS WHAT ALIGNS
	 * THE TITLE AND THE PRICE. Woo's
	 * `.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row
	 * .wc-block-cart-item__product { padding: 0 }` is (0,4,1) and beats §8.2's
	 * `> td { padding-block: 16px }` at (0,3,1), so the PRODUCT cell had no top
	 * padding while the image and total cells had 16. Measured at 768: title at
	 * y 406.8, line total at y 422.8 — 16px apart, on a row whose whole point is
	 * that they are the same line item.
	 *
	 * Rather than out-specifying Woo on one cell, all three drop to zero and the
	 * 16 comes ONCE, from the row's own `padding: 16px 0`. One source for the
	 * gap instead of three that have to agree.
	 */
	.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row > td {
		padding-block: 0;
	}
}

/*
 * The wrap. Below this the price cannot share the line with the thumbnail and
 * the stepper (310 needed, see above), so it takes its own row, still ends-
 * aligned, still the same line item.
 *
 * ⚠ THE 319 IS DERIVED, NOT PICKED, AND THE FIRST DERIVATION OF IT WAS WRONG.
 * It is a CONTAINER width — the block, which is the viewport less the page
 * padding, and that padding is NOT constant: measured 288 at a 320 viewport,
 * 324 at 360, 337 at 375, 688 at 768. The first version of this rule assumed
 * 375 gave 343 and set the threshold at 329, which wrapped the price at **360**
 * — where the block is 324 and the row's 310 minimum fits with 14px to spare.
 * A wrap that is not needed is a worse outcome than the one it prevents.
 *
 * 319 is "the block is under 320". Against the measured widths: 288 wraps, 324
 * does not and clears the minimum by 14, 337 does not and clears it by 27.
 *
 * ⚠ AND THE 310 CARRIES THIS CART'S PRICE IN IT — $5,182.00, 78px. A longer
 * price raises the minimum, and a seven-figure one would raise it past what 375
 * can hold no matter where this threshold sits. So this is the widest useful
 * answer, not a guarantee; if the catalogue ever grows a price that wide, the
 * fix is the price's type size, not this number.
 */

@container (max-width: 319px) {
	.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row {
		grid-template-columns: 5rem minmax(0, 1fr);
	}

	.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
		grid-area: 2 / 1 / 3 / -1;
		justify-self: end;
		padding-block-start: var(--wp--preset--spacing--small, 0.75rem); /* 12 */
	}
}

/* ── 8.3 The quantity stepper ────────────────────────────────────────────── */

/*
 * ⚠ THIS IS THE SAME COMPONENT THE PDP ALREADY SHIPS, SO IT IS THE SAME
 * CONTROL. `.wc-block-components-quantity-selector` is Woo's, and
 * `product-detail.css:1373` draws it as the house stepper: 120 × 48, white, 1px
 * `neutral-300`, the button radius of 2, 12 of inline padding, a 24px numeric
 * cell at Label/Extra Large 16/24/500, and 20 × 20 minus/plus buttons. Every
 * number below is read off that rule rather than derived again — a shopper who
 * has just used the stepper on a product page meets the identical control here.
 *
 * Measured before this rule the cart's stepper was 107 × 31 with a
 * `neutral-500` border at `radius--sm` and a 13px cell: a fourth stepper
 * geometry on a site that had settled one.
 *
 * The opponents are `.wc-block-components-quantity-selector` (0,1,0) in
 * `cart.css` and the bridge's `:root .wc-block-components-quantity-selector`
 * (0,2,0); the standing two-class scope ties the second and wins on order.
 */

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-quantity-selector {
	display: flex;
	column-gap: 1rem;
	align-items: center;
	justify-content: center;
	inline-size: 7.5rem; /* 120 — product-detail.css:1373 */
	block-size: 3rem; /* 48 */
	margin: 0;
	padding-inline: 0.75rem; /* 12 */
	border: 1px solid var(--wp--custom--color--neutral--300, #ced4da);

	/* 2 — the frame value, not radius--sm */
	border-radius: var(--tc-woo-radius-button);
	background-color: var(--wp--custom--color--base--white, #fff);
}

/*
 * The numeric cell. `flex: 0 0 auto` and `min-inline-size: 0` are load-bearing
 * for the same reason product-detail.css:1420 records: Woo ships
 * `flex: 1 1 auto; min-width: 40px` on this input, and without both the cell
 * takes the whole group and the buttons collapse. The seven internal
 * measurements sum to the box exactly: 12 + 20 + 16 + 24 + 16 + 20 + 12 = 120.
 *
 * ⚠ THE PDP's THREE-DIGIT FLAG APPLIES HERE TOO, AND MORE OFTEN. A 24px cell at
 * 16px Inter holds two digits; a third scrolls inside the field. On the PDP that
 * is a designer flag against a drawn frame. On the cart there is no frame, the
 * quantity is more likely to have been typed up, and the stepper sits in a table
 * row that could give it more width for free. Raised in the report's designer
 * list rather than settled here, because widening it would put the cart's
 * stepper and the PDP's out of step, which is the thing this rule exists to fix.
 */

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	flex: 0 0 auto;
	inline-size: 1.5rem; /* 24 */
	min-inline-size: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--tc-woo-ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
}

/*
 * The − and + buttons, as icon masks rather than Woo's `.9em` text glyphs at
 * `opacity: .6`. `font-size: 0` suppresses the character and the ACCESSIBLE NAME
 * is untouched, because it comes from Woo's own translated `aria-label`
 * ("Reduce quantity of …"), not from the visible text — product-detail.css:1455,
 * where the same substitution is made and the reasoning is written out.
 *
 * ⚠ THE MASK GOES ON A PSEUDO-ELEMENT, NOT ON THE BUTTON. Masking clips the
 * element's entire rendering INCLUDING ITS OUTLINE, so a mask on the button
 * itself computes the focus ring exactly as declared and paints it nowhere —
 * and `getComputedStyle` still reports it, so a spec asserting the ring passes
 * while the control is invisible to a keyboard user. That is a real regression
 * this project has already had once (product-detail.css:1478). Same shape here.
 */

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-quantity-selector__button {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	inline-size: 1.25rem; /* 20 */
	min-inline-size: 0;
	block-size: 1.25rem;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--tc-woo-ink);
	font-size: 0;
	opacity: 1;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-quantity-selector__button:disabled {
	color: var(--tc-woo-muted);
	cursor: not-allowed;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-quantity-selector__button::before {
	content: "";
	display: block;
	inline-size: 1.25rem;
	block-size: 1.25rem;
	background-color: currentcolor;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-quantity-selector__button--minus::before {
	-webkit-mask: var(--tc-woo-icon-minus) no-repeat center / contain;
	mask: var(--tc-woo-icon-minus) no-repeat center / contain;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-quantity-selector__button--plus::before {
	-webkit-mask: var(--tc-woo-icon-plus) no-repeat center / contain;
	mask: var(--tc-woo-icon-plus) no-repeat center / contain;
}

/* ── 8.4 The remove control ──────────────────────────────────────────────── */

/*
 * ⚠ THE BLOCK'S REMOVE IS AN ICON BUTTON, NOT THE CLASSIC `×` LINK, AND #193's
 * DECISION SURVIVES THE CHANGE OF GLYPH. The classic cart drew a text `×` in a
 * 1.5em box — a 24px target that #193 grew to 44 "so it clears the touch
 * minimum at every width rather than only on mobile", with the error colour on
 * hover "so the affordance is not carried by position alone". The block draws a
 * 24 × 24 trash-can SVG inside a `<button>` that `cart.css` sets to
 * `display: inline; height: 24px; padding: 0`. Measured 24 × 24 at 1440 and 375.
 * Same 24px target, same fix, same two reasons.
 *
 * `cart.css` reaches it at
 * `table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity
 * .wc-block-cart-item__remove-link` = (0,4,1). The scope below is (0,5,0), which
 * beats it on the class count, and prints later besides.
 */

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem; /* 44 */
	block-size: 2.75rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--tc-woo-radius-button);
	background-color: transparent;
	color: var(--tc-woo-muted);
	text-decoration: none;
	cursor: pointer;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link:hover {
	background-color: var(--wp--custom--color--warning--50, #fffbeb);
	color: var(--wc-red, #dc2626);
}

/*
 * ⚠ AND THE CELL HAS TO BE ALLOWED TO WRAP, OR THE PAGE SCROLLS SIDEWAYS AT
 * 375. This is a real defect this build introduced, measured, and diagnosed
 * twice — the first fix was wrong and is worth recording because the wrong
 * diagnosis is the obvious one.
 *
 * Below `@container (max-width: 699px)` Woo turns the ROW into
 * `display: grid; grid-template-columns: 80px 132px; column-gap: 16px`. The
 * obvious reading is that `.wc-block-cart-item__quantity` is the grid item that
 * overflows track 2, and `cart.css` says exactly that —
 * `.wc-block-cart-items__row .wc-block-cart-item__quantity
 * { grid-column-start: 1; grid-row-start: 2 }`. IT IS NOT A GRID ITEM. In this
 * WooCommerce the row has three `<td>` children — image, product, total — and
 * the quantity lives in a `<div>` INSIDE the product cell, so Woo's own
 * placement rule matches nothing and a `grid-column` answer aimed at it does
 * nothing either. Measured: `grid-column: 1 / -1` changed the overflow by zero.
 *
 * What actually happens is that the product cell spans tracks 2–3 and its
 * MIN-CONTENT is the quantity row, which is a nowrap flex line. Woo's own
 * stepper is 107 and its remove link 24, so that line is 143 and fits the
 * 132 + 16 + 0 the explicit template gives it. The house stepper is 120 and
 * the house remove target is 44, so the line is 176 and the implicit third
 * track grows to 44 to hold it. The row then measures
 * 80 + 16 + 132 + 16 + 44 + 16 + 78 = 382 in a 337 container, and
 * `document.documentElement.scrollWidth` reported **26px of overflow at 375**.
 *
 * Letting the line wrap drops its min-content to the widest single item — the
 * 120px stepper — which fits the track and collapses the implicit one. Nothing
 * about the row at 768 and above changes: measured, the stepper and the remove
 * control stay on one line at 768 (cell 192) and 1440 (cell 176).
 *
 * ⚠ AT 375 IT DOES WRAP, AND AN EARLIER VERSION OF THIS COMMENT SAID IT DOES
 * NOT. That sentence read "the cell is 192 wide so it does not actually wrap";
 * 192 is the PRODUCT cell's width and the quantity cell is **148**, so 120 + 12
 * + 44 = 176 does not fit and the remove control takes its own line under the
 * stepper. The row goes 48 tall to 104. That is the accepted outcome, not an
 * oversight: the alternatives are a 44px DESTRUCTIVE control squeezed against
 * the stepper on a 148px line, or a narrower stepper — and a narrower stepper
 * would break the parity with the PDP that 8.3 exists to create. On the
 * designer list.
 */

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-item__quantity {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--small, 0.75rem); /* 12 */
	align-items: center;
}

/* ── 8.5 The totals panel ────────────────────────────────────────────────── */

/*
 * The sidebar is the one surface on this page that is a PANEL rather than a run
 * of content, and it is drawn the way every other panel on this site is —
 * #193's own words for the classic `.cart_totals`, and the same three values:
 * the `neutral-50` fill and `radius--sm` that `.tc-logo-tile` (style.css) and
 * the category-grid card already use, with the control padding doubled to 24
 * for a container rather than a control.
 *
 * ⚠ THE PANEL IS ONLY A PANEL WHEN IT SITS BESIDE SOMETHING. Below the block's
 * own 699px stacking point the sidebar is full width under the items, and a
 * full-bleed tinted box with 24 of padding at 375 costs 48 of the 337 available
 * and reads as a second page section rather than a summary. Stacked, it keeps
 * the fill and drops to the control padding.
 *
 * ⚠ THE PANEL IS THE ORDER SUMMARY, NOT THE SIDEBAR — designer 2026-09-24.
 * Until then the fill sat on `.wc-block-cart__sidebar`, and the sidebar is a
 * FLEX ITEM: `…sidebar-layout.wc-block-cart` is a wrapping flex row with
 * `align-items: normal`, so the sidebar stretches to the items column. Woo
 * gives the CHECKOUT sidebar `align-self: flex-start` (`checkout.css`) and the
 * cart's nothing. Measured at 1440 with six lines: items 799 tall, sidebar 799
 * tall, its content (padding included) 355 — the grey ran the length of the cart.
 * Latent since Phase 1 (`97d3af88`), visible only once the items outgrow the
 * summary (three lines or more at 1440). The fill, radius and padding move to
 * the summary block, which is not a flex item and sizes to its content; the
 * checkout button sits below the panel, as the checkout's place-order button
 * sits outside its own.
 *
 * `cart.css` gives the summary block its own `border-bottom` (1px, navy 20%).
 * Inside the old panel it read as a divider above the button; on the panel it
 * draws along the panel's bottom edge, so it goes.
 */

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart__sidebar {
	padding: 0;
}

.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-block {
	border-block-end: 0;
	padding: var(--wp--preset--spacing--normal, 1rem); /* 16 */
	border-radius: var(--tc-woo-radius-container);
	background-color: var(--tc-woo-panel);
}

@container (min-width: 700px) {
	.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-block {
		padding: var(--wp--preset--spacing--large, 1.5rem); /* 24 */
	}
}

/*
 * "Cart totals". Woo renders it at `var(--wp--preset--font-size--small)` / 500,
 * and the bridge tints it `--ftm-scheme-muted` — 13px muted, which is a caption,
 * not the heading of the panel it opens.
 *
 * G40 (Gary, 2026-09-14): Title/Small, 20 — was §3's panel-heading role,
 * Title/Large 27. The `title-small` preset is fluid (18 → 20 over 320-1600) and
 * lands 20 from the md breakpoint up; the footer and category-grid record the
 * same preset at the same role. 28 line box (1.4), the Title/Small metric both
 * of those surfaces measured from the frames. The checkout's "Order summary"
 * (9.6) takes the identical change (G43); the step headings stay Title/Large.
 *
 * The bridge's `:root .wc-block-cart__totals-title` is (0,2,0) and prints at 36;
 * `.wc-block-cart .wc-block-cart__totals-title` in `cart.css` is (0,2,0) at 18.
 * The scope below is (0,3,0) and clears both without reaching for `:root`.
 */

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart__totals-title {
	display: block;
	margin-block: 0 var(--wp--preset--spacing--large, 1.5rem); /* 0 0 24 */
	padding: 0;
	font-size: var(--wp--preset--font-size--title-small, 1.25rem); /* 20 — G40 */
	font-weight: 700;
	line-height: 1.4; /* 28/20 — Title/Small */
	letter-spacing: -0.02em;
	text-transform: none;
	color: var(--tc-woo-ink);
}

/*
 * The totals rows. Woo separates each `totals-wrapper` with a 1px rule it takes
 * from the scheme border — measured `neutral-500`, three steps darker than every
 * other hairline on the site. Only the colour and the padding are restated.
 *
 * ⚠ AND WOO'S TWO EXCLUSIONS HAVE TO BE RESTATED WITH THEM, OR THIS RULE DRAWS
 * BANDS THAT SHOULD NOT EXIST. It was written without them, and the checkout's
 * order summary rendered a bare 33px band between Subtotal and Delivery — the
 * empty `fee` and `discount` wrappers, given a border and 32px of padding by a
 * rule that had no business reaching them. Caught in the 1440 screenshot, not
 * in a measurement.
 *
 * `cart.css` handles both cases at (0,2,0) and this file's (0,3,0) overrode
 * them:
 *
 *   .wc-block-components-totals-wrapper:empty,
 *   .wc-block-components-totals-wrapper:has(> :only-child:empty)
 *     { border-width: 0; padding: 0 }
 *
 *   .wp-block-woocommerce-{cart,checkout}-order-summary-totals-block
 *     .wc-block-components-totals-wrapper  { border: 0; padding-bottom: 0 }
 *
 * The second is a deliberate grouping: subtotal, fees, discounts, shipping and
 * taxes are ONE block of figures with a single rule above them, not five rows
 * with four rules between. Both are reinstated at this file's own specificity.
 */

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-wrapper {
	padding-block: var(--wp--preset--spacing--normal, 1rem); /* 16 */
	border-block-start: 1px solid var(--tc-woo-line);
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-wrapper::after {
	display: none; /* cart.css draws the rule as a pseudo-element on some wrappers */
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-wrapper:empty,
.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-wrapper:has(> :only-child:empty) {
	padding: 0;
	border-width: 0;
}

.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-totals-block .wc-block-components-totals-wrapper {
	padding-block-end: 0;
	border-block-start: 0;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-item__label {
	font-size: var(--wp--preset--font-size--label-medium, 0.875rem);
	font-weight: 500;
	line-height: 1.4286;
	color: var(--tc-woo-muted);
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-item__value {
	font-size: var(--wp--preset--font-size--label-medium, 0.875rem);
	font-weight: 700;
	white-space: nowrap;
	color: var(--tc-woo-ink);
}

/* The estimated-total row — #193's `tr.order-total`: one step up in size, over
   its own rule, with the amount carrying the weight. */

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: var(--wp--preset--font-size--label-x-large, 1rem);
	color: var(--tc-woo-ink);
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: var(--wp--preset--font-size--title-small, 1.25rem);
	font-weight: 700;
}

/* The "Shipping will be calculated at checkout" line under the total. */

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-item__description,
.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-footer-item-shipping {
	margin-block-start: var(--wp--preset--spacing--xsmall, 0.5rem);
	font-size: var(--wp--preset--font-size--label-small, 0.75rem);
	font-weight: 500;
	line-height: 1.3333;
	color: var(--tc-woo-muted);
}

/* ── 8.6 The coupon form ─────────────────────────────────────────────────── */

/*
 * ⚠ THE COUPON IS A DISCLOSURE, AND ITS TOGGLE IS AN 18px TARGET.
 * `.wc-block-components-panel__button` is a `div[role="button"][tabindex="0"]`
 * — measured 445 × 18 at 1440. It is full width, so the horizontal reach is
 * fine and only the height misses: 18 against the 44 minimum. The fix is
 * padding, not a fixed height, because the button also carries the chevron and
 * a fixed height would need the chevron re-centred.
 *
 * The bridge already paints it `--ftm-scheme-heading` at (0,2,0); only the box
 * and the type role are added.
 */

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-coupon .wc-block-components-panel__button {
	display: flex;
	gap: var(--wp--preset--spacing--xsmall, 0.5rem);
	align-items: center;
	min-block-size: 2.75rem; /* 44 */
	padding: 0;
	font-size: var(--wp--preset--font-size--label-medium, 0.875rem);
	font-weight: 700;
	line-height: 1.4286;
	color: var(--tc-woo-ink);
}

/* The panel wrapper carries Woo's own rule above it; the section already draws
   one on the `totals-wrapper` that holds it. */

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-coupon.wc-block-components-panel {
	border: 0;
}

/* The form: a field and its Apply button on one line, wrapping at the panel's
   own width rather than at a viewport breakpoint. */

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-coupon__form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--small, 0.75rem); /* 12 */
	align-items: flex-start;
	margin-block-start: var(--wp--preset--spacing--small, 0.75rem);
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-coupon__input {
	flex: 1 1 8rem;
	margin: 0;
}

/*
 * ⚠ THE COUPON FIELD IS THE SAME FLOATING-LABEL COMPONENT AS THE CHECKOUT'S,
 * AND SECTION 9.3 DOES NOT REACH IT. That subsection is scoped to
 * `.woocommerce-checkout .wp-block-woocommerce-checkout`, and this field is on
 * the CART. Measured before this rule: 50 tall against the house 48, in a panel
 * whose Apply button beside it was already 48.
 *
 * The four coordinated numbers are 9.3's and the reasoning is written out there
 * — 14 + 20 + 14 = 48 resting, 22 + 20 + 6 active, label centred at 24 and risen
 * to 5. They are restated rather than shared because the two pages need
 * different specificities: the checkout's form carries
 * `.wc-block-components-form` and Woo's (0,4,1)/(0,5,1) copies match there,
 * while the coupon form does not carry it and Woo only reaches this field at
 * (0,3,1).
 */

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-coupon__input input {
	block-size: var(--tc-woo-control-height); /* 48 */
	padding-block: 0.875rem; /* 14 */
	padding-inline: var(--wp--preset--spacing--normal, 1rem); /* 16 */
	border: 1px solid var(--tc-woo-line);
	border-radius: var(--tc-woo-radius-field);
	background-color: var(--wp--custom--color--base--white, #fff);
	color: var(--tc-woo-ink);
	font-size: var(--wp--preset--font-size--label-medium, 0.875rem);
	font-weight: 500;
	line-height: 1.4286;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-coupon__input label {
	inset-block-start: 1.5rem; /* 24 — half of 48 */
	inset-inline-start: var(--wp--preset--spacing--normal, 1rem);
	font-size: var(--wp--preset--font-size--label-medium, 0.875rem);
	font-weight: 500;
	line-height: 1.4286;
	color: var(--tc-woo-muted);
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-coupon__input.is-active input {
	padding-block: 1.375rem 0.375rem; /* 22 / 6 */
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-coupon__input.is-active label {
	inset-block-start: 0.3125rem; /* 5 */
}

/* Apply is a SECONDARY action. It took the contract's 500 against the primary
   action's 700 (#193 §6's two weights) until G01 flattened every button to one
   weight — 500, corrected from 600 on 2026-09-15. */

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-coupon__button {
	flex: 0 0 auto;
	min-block-size: var(--tc-woo-control-height); /* 48 */
	padding-block: 0;
	padding-inline: var(--wp--preset--spacing--normal, 1rem); /* 16 */
	border: 0;
	border-radius: var(--tc-woo-radius-button);
	background-color: var(--tc-woo-cta);
	color: var(--wp--custom--color--base--white, #fff);
	font-size: var(--wp--preset--font-size--label-large, 0.9375rem);
	font-weight: 500; /* G01, corrected to 500 on 2026-09-15 */
	line-height: 1.6;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-coupon__button:hover {
	background-color: var(--tc-woo-cta-hover);
	opacity: 1;
}

/* #193 §6's disabled treatment: Woo fades a filled button to 50%, which on a
   filled button reads as loading rather than unavailable. Woo ships this one
   disabled until a code is typed, so it is the state the panel opens in. */

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-coupon__button:disabled {
	background-color: var(--wp--custom--color--neutral--100, #e9ecef);
	color: var(--tc-woo-muted);
	opacity: 1;
	cursor: not-allowed;
}

/* ── 8.7 Proceed to checkout ─────────────────────────────────────────────── */

/*
 * The page's primary action. Measured before this rule: `#123B9E` at a 16px
 * radius, 18/27/400, 55 tall — primary-600 where every CTA on this site is
 * secondary-600, a pill where every CTA is a hard 2px, and body type where the
 * button role is Label/Large. #193 §6's contract, at 500 since G01 as corrected 2026-09-15 (was the primary action's 700, then 600 for a day).
 *
 * ⚠ THE OPPONENT PRINTS AFTER THIS FILE, WHICH IS WHY THE SCOPE IS THREE
 * CLASSES AND NOT TWO. `global-styles` is inline at index 70 and carries
 * `:root :where(.wp-element-button, .wp-block-button__link)` at (0,1,0) —
 * `:where()` contributes nothing, so it is one class, but it prints LATER than
 * this file and a tie would lose. (0,3,0) settles it on specificity, which is
 * order-independent.
 */

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart__submit-button {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	min-block-size: var(--tc-woo-control-height); /* 48 */
	padding-block: 0.75rem;
	padding-inline: var(--wp--preset--spacing--normal, 1rem);
	border: 0;
	border-radius: var(--tc-woo-radius-button);
	background-color: var(--tc-woo-cta);
	color: var(--wp--custom--color--base--white, #fff);
	font-size: var(--wp--preset--font-size--label-large, 0.9375rem);
	font-weight: 500; /* G01, corrected to 500 on 2026-09-15 */
	line-height: 1.6; /* 24/15 */
	letter-spacing: 0.002em;
	text-align: center;
	text-decoration: none;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart__submit-button:hover {
	background-color: var(--tc-woo-cta-hover);
	color: var(--wp--custom--color--base--white, #fff);
	opacity: 1;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart__submit {
	padding-block-start: var(--wp--preset--spacing--normal, 1rem);
}

/* ── 8.8 The empty cart ──────────────────────────────────────────────────── */

/*
 * ⚠ THIS STATE IS PAGE CONTENT, NOT BLOCK CHROME, AND THAT IS THE WHOLE REASON
 * IT LOOKS DIFFERENT FROM DEV. `woocommerce/empty-cart-block` holds ordinary
 * editable inner blocks, so the marketing team can change this copy in the page
 * editor. `tools/create-cart-checkout-pages.php` seeds a `core/heading` and a
 * `core/button` — "Your cart is currently empty." and "Return to shop" — in
 * place of Woo's stock heading, bare text link, dotted separator, "New in
 * store" heading and four-up product grid. The reasoning is written out in that
 * script's header; the short version is that a bare 14px link has no 44px
 * target and an error state is not a merchandising surface.
 *
 * Because they are core blocks, `theme.json`'s `styles.elements.button` and
 * `styles.blocks["core/button"]` already reach the button — which is exactly
 * what makes it the WRONG button by default, for the same three reasons as
 * Proceed above (primary-600, 16px radius, body type). The `tc-empty-cart-button`
 * class the seed script writes is what this file hangs the house CTA on, so the
 * override is scoped to this one button rather than to `core/button` globally.
 */

.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--large, 1.5rem); /* 24 */
	align-items: center;
	padding-block: var(--wp--preset--spacing--xlarge, 2.5rem); /* 40 */
	text-align: center;
}

/*
 * Woo's `with-empty-cart-icon` class paints a large cart glyph as a `::before`
 * on the heading and renders the text at `var(--wp--preset--font-size--small)`
 * / 700 — measured 18px in a 147px box at 1440. The glyph is kept; the text
 * takes §3's section-heading role so the empty state reads as a statement
 * rather than a caption under a picture.
 */

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart__empty-cart__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--title-large, 1.6875rem);
	font-weight: 700;
	line-height: 1.185;
	letter-spacing: -0.02em;
	color: var(--tc-woo-ink);
}

.woocommerce-cart .wp-block-woocommerce-cart .tc-empty-cart-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: var(--tc-woo-control-height); /* 48 */
	padding-block: 0.75rem;
	padding-inline: var(--wp--preset--spacing--large, 1.5rem); /* 24 */
	border: 0;
	border-radius: var(--tc-woo-radius-button);
	background-color: var(--tc-woo-cta);
	color: var(--wp--custom--color--base--white, #fff);
	font-size: var(--wp--preset--font-size--label-large, 0.9375rem);
	font-weight: 500; /* G01, corrected to 500 on 2026-09-15 */
	line-height: 1.6;
	letter-spacing: 0.002em;
	text-decoration: none;
}

.woocommerce-cart .wp-block-woocommerce-cart .tc-empty-cart-button .wp-block-button__link:hover {
	background-color: var(--tc-woo-cta-hover);
	color: var(--wp--custom--color--base--white, #fff);
	opacity: 1;
}

/* ── 8.9 Cross-sells ─────────────────────────────────────────────────────── */

/*
 * ⚠ CORRECTED 2026-09-24 — TWO CLAIMS BELOW ARE WRONG, AND THE PARAGRAPH IS
 * KEPT AS THE RECORD. (1) "No product in this catalogue has a cross-sell": 21
 * do, and the section renders with one of them in the cart (68139 → 68371).
 * (2) "Already styled by product-grid.css": it is not. The card kit is keyed on
 * `.tc-product-cards` and the `tc-product-card__*` classes, and this seeded
 * collection carries none of them — so it renders Woo's stock card: 3 across,
 * h2 titles at 20/700 centred, `cover` images, a 13px 4px-radius button, no
 * category or stock line. Matching the shop (designer 2026-09-24, item 2) is a
 * MARKUP change to page 8 and `tools/create-cart-checkout-pages.php`, not CSS
 * here, and was stopped for a decision. DECISIONS 2026-09-25.
 *
 * ⚠ RESOLVED 2026-09-28 (D-CC-1, Gary batch E): THE MARKUP CHANGED, AND THE
 * CARD IS NOW THE SHOP'S. tools/inc/cart-crosssell.php rewrites the collection —
 * seeded by create-cart-checkout-pages.php, patched in place on a live page by
 * patch-cart-crosssells.php — to carry `tc-product-cards tc-cart-crosssell`, the
 * shop's 4 columns / 4 products, and the shop's six card blocks
 * (templates/archive-product.html). So the CARD comes from the kit in
 * patterns/product-grid/product-grid.css and is not styled here, exactly as
 * search-results.css treats its product cards.
 *
 * WHAT THIS FILE OWNS is what the shop scopes to `.tc-shop-archive` and so
 * cannot reach the cart: the GRID and the ARCHIVE'S OWN CARD VARIANTS. Those
 * are copied below from assets/css/shop-archive.css, rule for rule, with the
 * line each came from. If the shop's grid or card variant changes, change it
 * here too — the cart asked for the shop's, not a lookalike.
 *
 * ⚠ `@media`, NOT `@container`, AGAINST THIS SECTION'S OWN CONVENTION, AND
 * DELIBERATELY. The convention exists to flip with Woo's cart block, which
 * splits at 700 of its OWN width. This grid follows the SHOP, which switches
 * on the viewport at 48rem and 64rem — "same column counts as the shop grid"
 * means the same counts at the same widths. A container query here would put
 * the cart on different counts from the shop at the same window.
 *
 * The heading below keeps its section role, set before the cards existed.
 */

.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-product-collection > h2 {
	margin-block: var(--wp--preset--spacing--xlarge, 2.5rem) var(--wp--preset--spacing--large, 1.5rem);
	font-size: var(--wp--preset--font-size--title-large, 1.6875rem);
	font-weight: 700;
	line-height: 1.185;
	letter-spacing: -0.02em;
	color: var(--tc-woo-ink);
}

/*
 * The grid: 1 / 2 / 4 across, the shop's gaps. shop-archive.css:1131, :1678,
 * :1776. Woo's flex track is replaced outright, as it is there.
 */

.woocommerce-cart .tc-cart-crosssell .wc-block-product-template.wc-block-product-template {
	display: grid;
	grid-template-columns: minmax(0, 1fr);

	/* Row gap 0 at base: the phone card separates rows with its own rule. */
	gap: 0 var(--wp--preset--spacing--large, 1.5rem); /* 24 column */
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Woo sizes each li at (0,4,1) inside its own `min-width: 600px` query — a
 * quarter of the ROW, which against a grid resolves to a quarter of the TRACK.
 * shop-archive.css:1172 measured that and fixed it at (0,5,1); this is (0,5,1)
 * as well. `width`, not `inline-size`, to beat Woo in kind.
 */

.tc-cart-crosssell
	.wc-block-product-template.wc-block-product-template.wc-block-product-template
	> li {
	margin-block: 0;
	width: auto;
	max-width: none;
}

/*
 * Below md, the shop's horizontal card: a 118 square left, text at 130, 24
 * above and below, a rule under each row. shop-archive.css:1207-1235.
 *
 * Written as a max-width block rather than the shop's base-plus-md-undo,
 * because the undo has to restate the kit's values at the same specificity and
 * only holds on source order (shop-archive.css:1707). Scoped to phones, nothing
 * needs undoing and the kit's own md inset simply applies — except that the
 * shop keeps its media FLUSH at md and up by decision, so that is copied too.
 */

@media (max-width: 47.9375rem) { /* below breakpoint/md */
	.woocommerce-cart .tc-cart-crosssell .wc-block-product {
		position: relative;
		min-block-size: 10.375rem; /* 166 = 118 media + 24 + 24 */
		border-block-end: 1px solid var(--wp--custom--color--neutral--200, #dee2e6);
		border-radius: 0;
		background-color: transparent;
		padding-block: var(--wp--preset--spacing--large, 1.5rem); /* 24 */
		padding-inline: 8.125rem 0; /* 130 = 118 media + 12 gap */
	}

	.woocommerce-cart .tc-cart-crosssell .wc-block-product > :not(.tc-product-card__media) {
		padding-inline: 0;
	}

	/* Out of flow, so the thumbnail does not size the text rows — the reason
	   is recorded at shop-archive.css:1190 and product-detail.css:1852. */
	.woocommerce-cart .tc-cart-crosssell .tc-product-card__media {
		position: absolute;
		inset-block-start: var(--wp--preset--spacing--large, 1.5rem); /* 24 */
		inset-inline-start: 0;
		inline-size: 7.375rem; /* 118 */
	}

	.woocommerce-cart .tc-cart-crosssell .tc-product-card__media img {
		border-radius: 4px;
	}
}

@media (min-width: 48rem) { /* breakpoint/md */
	.woocommerce-cart .tc-cart-crosssell .wc-block-product-template.wc-block-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--xxlarge, 4rem) var(--wp--preset--spacing--large, 1.5rem); /* 64 / 24 */
	}

	/* The shop's flush media, shop-archive.css:1716-1750. */
	.woocommerce-cart .tc-cart-crosssell .wc-block-product {
		padding: 0 0 var(--wp--preset--spacing--xsmall, 0.5rem);
	}

	.woocommerce-cart .tc-cart-crosssell .wc-block-product > :not(.tc-product-card__media) {
		padding-inline: var(--wp--preset--spacing--xsmall, 0.5rem);
	}

	.woocommerce-cart .tc-cart-crosssell .tc-product-card__media img {
		border-radius: 2px;
	}
}

@media (min-width: 64rem) { /* breakpoint/lg */
	.woocommerce-cart .tc-cart-crosssell .wc-block-product-template.wc-block-product-template {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/*
 * ── The card's colours and image frame (QA batch F, item 8, 2026-09-28) ─────
 *
 * tonerdev showed the cart's cards with a BLUE title and category and a bare
 * image, against the shop's navy and hairline frame. Measured here, both at 390
 * and 1440: shop title and category rgb(10, 32, 91), image 1px solid
 * rgb(222, 226, 230); cart rgb(18, 59, 158) and no border.
 *
 *   - COLOUR. This file's own in-content link rule (§4, "In-content links",
 *     `.woocommerce-cart .wp-block-woocommerce-cart a:not(…)` at (0,3,1))
 *     reaches every anchor in the cart block, the cards' included, and beats
 *     the kit's (0,2,1) primary-800. The rule is right for the cart's text
 *     links, so the cards are restated after it at the same weight rather than
 *     the rule being narrowed. The hover restatement answers the rule's own
 *     hover, which would otherwise turn the card links accent blue.
 *   - FRAME. product-grid.css draws the 1px neutral-200 on
 *     `.tc-shop-archive` and `.tc-pdp__related` only, by name. The cart is the
 *     third listing to ask for the shop's card.
 */

.woocommerce-cart .tc-cart-crosssell .tc-product-card__title a,
.woocommerce-cart .tc-cart-crosssell .tc-product-card__cat a,
.woocommerce-cart .tc-cart-crosssell .tc-product-card__title a:hover,
.woocommerce-cart .tc-cart-crosssell .tc-product-card__cat a:hover {
	color: var(--wp--custom--color--primary--800, #0a205b);
}

.woocommerce-cart .tc-cart-crosssell .tc-product-card__media img {
	box-sizing: border-box;
	border: 1px solid var(--wp--custom--color--neutral--200, #dee2e6);
}

/* ═════════════════════════════════════════════════════════════════════════
 * 9. CHECKOUT  —  /checkout/, page 9, the `woocommerce/checkout` BLOCK
 *
 * ⚠ EVERY CLASSIC CHECKOUT SELECTOR OF PR #193 IS GONE, AND SO IS THE PROBLEM
 * TWO OF ITS SECTIONS EXISTED TO SOLVE. `[woocommerce_checkout]` rendered
 * `#customer_details` as two floated `.col-1` / `.col-2` halves, and #193 spent
 * a whole section (its §11, "WooCommerce's float clearfixes become grid and flex
 * items") on the `::before` / `::after` clearfixes that a `display: grid` on a
 * float container turns into two empty grid cells. The block emits no floats,
 * no `.col2-set` and no clearfix. That section is deleted rather than ported.
 *
 * What arrives instead is a React tree in a `<form class="wc-block-checkout__form">`:
 * `.wc-block-components-checkout-step` fieldsets, each with an `h2` and a
 * content well, holding `.wc-block-components-text-input` and
 * `.wc-blocks-components-select` field components and a
 * `.wc-block-components-radio-control` for shipping and for payment.
 *
 * ⚠ THE FIELDS ARE FLOATING-LABEL CONTROLS AND THIS BUILD DOES NOT UNDO THAT.
 * Every input on this page has its `<label>` INSIDE the box, absolutely
 * positioned, transforming up when the field is focused or filled. The house
 * control on this site — contact-form.css:356, and the classic checkout #193
 * styled — puts the label ABOVE the field at Label/Medium 700. Turning the
 * block's fields into that means taking the label out of the box, which is a
 * behavioural change to a React component's own CSS contract (the transform,
 * the `is-active` state, the placeholder swap), not a restyle. So the PATTERN is
 * kept and the BOX and TYPE are brought to the contract: 48 tall, `radius--sm`,
 * a `neutral-200` hairline, 16 of inline padding, base-black ink at
 * Label/Medium. Measured before: 50 tall, radius 4, `rgba(43,45,47,.8)`, 9 of
 * padding, 16px ink.
 *
 * THE DIVERGENCE IS REAL AND IT IS ON THE DESIGNER LIST, not settled here: the
 * contact form labels above, the checkout labels inside. See the report's
 * designer-review section.
 *
 * ⚠ THE CASCADE IS THE CART'S AND IT IS THE THEME'S TO WIN. `checkout.css` and
 * `wc-blocks.css` print at 12–19 and `woocommerce-blocktheme.css` at 28, all
 * ahead of this file at 69. `global-styles` at 70 is the one thing that prints
 * later, and it only reaches buttons. Nothing here needs an ID and nothing here
 * is `!important` — including the payment section, which on the classic checkout
 * needed a (1,5,2) selector to clear `woocommerce.css` and the gateway's own
 * `#payment div.payment_box input.input-text` rules. The gateway renders through
 * the block API now and those rules do not apply to it.
 *
 * ⚠ THE WIDTH IS THE BAND, NOT #193's 1000, AND THAT APPLIES THE CONTRACT
 * RATHER THAN OVERRIDING IT. #193 capped the classic checkout at 1000 centred on
 * an explicit derivation: "A two-up address form at 480 a side is at the top of
 * a comfortable measure; at the 1360 band it would be 660 a side." That was true
 * of a form that filled the band. The block checkout does not: it is a form
 * BESIDE an order-summary rail, 65/35, so at the 1360 band the fields column is
 * 884 and a two-up row is 400 a side — INSIDE the 480 #193 called the top of
 * comfortable, and better than the 1000 cap would give the same layout. The
 * contract's reasoning is what is being followed; only the number it produced
 * for a different markup has moved. Flagged for the designer with both
 * measurements.
 * ═════════════════════════════════════════════════════════════════════════ */

/* ── 9.1 The two columns ─────────────────────────────────────────────────── */

/*
 * ⚠ THE ORDER SUMMARY IS AUTHORED FIRST AND RENDERS SECOND, AND THE FIRST
 * VERSION OF THIS RULE PUT THE GUTTER ON THE WRONG SIDE BECAUSE OF IT.
 * `checkout.css` ships
 * `.wc-block-components-sidebar-layout:has(> :last-child.wp-block-woocommerce-checkout-fields-block)
 * { flex-direction: row-reverse }`, so the summary comes FIRST in the DOM —
 * which is what puts it above the form when the columns stack on a phone — and
 * SECOND on screen. The fields column therefore sits on the left exactly as it
 * does on the cart.
 *
 * Written as `padding-inline-start` on the fields column, that 64 landed at the
 * page's left margin and the two columns met with no gutter at all. Measured at
 * 1440: fields x=40 w=884 ending at 924, sidebar starting at 924. It is the
 * same `padding-inline-end` the cart uses, for the same reason — the sidebar
 * becomes a panel and a fill cannot start 30.8px inside the gutter.
 */

/* G42: Woo's `checkout.css` pads the block 24 at the top at (0,1,0). It is the
   third term in the title-to-heading gap (see the `.entry-content` rule in 2)
   and the one that made the checkout read 88 where the cart read 64. */
.woocommerce-checkout .wp-block-woocommerce-checkout {
	padding-block-start: 0;
}

@container (min-width: 700px) {
	.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-main {
		padding-inline-end: var(--tc-woo-gutter); /* 64 */
	}

	.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-sidebar {
		padding-inline-start: 0;
	}
}

/*
 * ⚠ ONE COLUMN UNTIL 1200 — designer 2026-09-24: "Order Summary and Payment
 * both full width until 1200px." Woo splits at 700 of BLOCK width (≈780 of
 * viewport), which put the summary in a 330–392 rail and the payment list in a
 * 550–663 column at 1024–1199. 1200 is a viewport number with no theme token
 * (the breakpoints are md 48rem and lg 64rem), so it is written as one.
 *
 * ⚠ THIS IS A CSS STACK OVER A REACT LAYOUT THAT STILL THINKS IT IS WIDE.
 * Woo decides `is-large` from the container, so between 780 and 1199 it keeps
 * rendering the EXPANDED summary in the sidebar and no second copy by Place
 * order — the mobile bar-and-copy arrangement starts only below 780. The
 * expanded summary therefore sits above the form here, full width, which is
 * the stacked order Woo's own DOM gives. `position: static` is not optional:
 * the sidebar is `sticky` in this mode, and stacked above the form it would
 * ride down over the fields. The 24 under it is Woo's own stacked gap.
 */

@media (max-width: 74.9375rem) {
	.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-sidebar-layout .wc-block-components-main {
		inline-size: 100%;
		padding-inline-end: 0; /* Woo's 4.5% and 9.1's 64 gutter */
	}

	/* ⚠ `…components-sidebar` IS `…checkout__sidebar` — one element, so its
	   padding is 9.6's panel inset and is left alone here. Clearing it with the
	   main column's took the panel's 24 a side to 0 at 1024. */
	.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-checkout__sidebar {
		inline-size: 100%;
		position: static;
		margin-block-end: var(--wp--preset--spacing--large, 1.5rem); /* 24 */
	}
}

/* ── 9.2 The step fieldsets ──────────────────────────────────────────────── */

/*
 * Each step is a `<fieldset>` with an `h2`. Woo renders the heading at 20/28/500
 * — a size with no role on this site, sitting between the page title and the
 * body. §3's panel-heading role: Title/Large at −2%, the same one the cart's
 * "Cart totals" takes, so the two pages agree about what a section heading is.
 */

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-checkout-step {
	margin: 0;
	padding-block: var(--wp--preset--spacing--xlarge, 2.5rem); /* 40 */
	border: 0;
	border-block-start: 1px solid var(--tc-woo-line);
}

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-checkout-step:first-of-type {
	padding-block-start: 0;
	border-block-start: 0;
}

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-checkout-step__title {
	margin-block: 0;
	font-size: var(--wp--preset--font-size--title-large, 1.6875rem);
	font-weight: 700;
	line-height: 1.185; /* theme.json type-styles.title */
	letter-spacing: -0.02em;
	color: var(--tc-woo-ink);
}

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-checkout-step__heading {
	margin-block-end: var(--wp--preset--spacing--large, 1.5rem); /* 24 */
}

/* The "Use same address for billing" style note beside a step heading. */

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-checkout-step__heading-content {
	font-size: var(--wp--preset--font-size--label-medium, 0.875rem);
	font-weight: 500;
	line-height: 1.4286;
	color: var(--tc-woo-muted);
}

/* ── 9.3 Field components ────────────────────────────────────────────────── */

/*
 * ⚠ THE FLOATING LABEL IS FOUR RULES, NOT ONE, AND THEY ARE ONE DECISION.
 * The first version of this subsection set the box and moved the label's inline
 * offset and stopped there. Measured, the value sat at 9px and the label at 16
 * — the two out of line inside the same control, which is worse than either
 * number alone.
 *
 * Woo builds the control out of four coordinated numbers, all tuned to a 50px
 * box (`packages-style.css`):
 *
 *   input                 height 50, padding 16px 12px, line-height 25
 *   label, resting        top 25px, transform translateY(-50%)   → centred
 *   .is-active input      padding 24px 9px 8px
 *   .is-active label      top 6px, transform scale(.82)
 *
 * Taking the box to the contract's 48 means restating all four, because the
 * resting label's `top` is half the height and the active padding is what keeps
 * the value clear of the risen label. At 48 with Label/Medium's 20px line box:
 * 14 + 20 + 14 = 48 resting, 22 + 20 + 6 = 48 active, label centred at 24 and
 * risen to 5. Nothing about the transform, the transition or the `is-active`
 * state machine is touched — those are the component's behaviour.
 *
 * ⚠ AND THE SPECIFICITY IS (0,4,1)/(0,5,1), WHICH IS NOT PADDING EITHER.
 * `packages-style.css` ships every one of those rules TWICE, once bare and once
 * prefixed with `.wc-block-components-form` — and the checkout's `<form>`
 * carries that class, so the (0,4,1) copy is the one that matches:
 *
 *   (0,4,1)  .wc-block-components-form .wc-block-components-text-input
 *              input[type=email]
 *   (0,5,1)  .wc-block-components-form .wc-block-components-text-input.is-active
 *              input[type=email]
 *   (0,5,1)  … .is-active input[type=email]:focus   { padding-left: 8.5px }
 *
 * A (0,3,1) answer TIES the first and loses to the other two. Naming the form
 * class costs one class and settles all three on order.
 */

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input,
.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-text-input textarea {
	block-size: var(--tc-woo-control-height); /* 48 */
	padding-block: 0.875rem; /* 14 — 14 + 20 + 14 = 48 */
	padding-inline: var(--wp--preset--spacing--normal, 1rem); /* 16 */
	border: 1px solid var(--tc-woo-line);
	border-radius: var(--tc-woo-radius-field);
	background-color: var(--wp--custom--color--base--white, #fff);
	color: var(--tc-woo-ink);
	font-size: var(--wp--preset--font-size--label-medium, 0.875rem);
	font-weight: 500;
	line-height: 1.4286; /* 20/14 */
}

/*
 * ⚠ THE TEXTAREA IS THE ONE FIELD THAT MUST NOT TAKE THE 48px BOX. The order
 * note is the only multi-line control on the page and a 48px textarea is one
 * line with a scrollbar. #193 §5's textarea: the same box with padding on all
 * four sides and a 96 minimum — "Order notes here are optional and Woo ships
 * `rows=2`; a 216px box for an optional field would dominate the column".
 */

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-text-input textarea {
	block-size: auto;
	min-block-size: 6rem; /* 96 */
	padding-block: var(--wp--preset--spacing--normal, 1rem);
}

/* The label at rest: centred in the 48 box, at the box's own inline padding, in
   the site's field-label role rather than 16px body copy inside a control. */

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-text-input label {
	inset-block-start: 1.5rem; /* 24 — half of 48; Woo's 25 is half of 50 */

	/* 16 — was 9, matching the box's new inline padding */
	inset-inline-start: var(--wp--preset--spacing--normal, 1rem);
	font-size: var(--wp--preset--font-size--label-medium, 0.875rem);
	font-weight: 500;
	line-height: 1.4286;
	color: var(--tc-woo-muted);
}

/* Filled or focused: the label rises and the value takes the bottom of the box.
   22 + 20 + 6 = 48, with the risen label occupying roughly 5–21. */

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-text-input.is-active input {
	padding-block: 1.375rem 0.375rem; /* 22 / 6 */
}

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-text-input.is-active input:focus {
	padding-block: 1.375rem 0.375rem;
	padding-inline: var( --wp--preset--spacing--normal, 1rem ); /* Woo drops to 8.5 on focus */
}

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-text-input.is-active label {
	inset-block-start: 0.3125rem; /* 5 */
}

/*
 * The select. The same 48px box as the input, and it needs the SAME four
 * coordinated numbers for the same reason — except that a select has no resting
 * state: `checkout.css` pins its label at `top: 6px` permanently and gives the
 * control `padding: 16px 9px 0` on a 50px box, so the value always sits under a
 * risen label. At 48 that is the input's active geometry, 22 / 20 / 6, with the
 * label at 5.
 *
 * ⚠ AND `padding-block: 0` HERE PUTS THE VALUE THROUGH THE LABEL. The first
 * version centred the value in the box, which is right for a control with no
 * label inside it and wrong for this one. Measured with the country select at
 * 1440: label top and value top within a pixel of each other.
 *
 * The height is fixed rather than left free — #193 §5 kept its classic selects
 * free to "grow past it when a long option is selected", which was a `.form-row`
 * select with the label above and nothing below it. This one has an absolutely
 * positioned label inside the box, so a box that grows leaves the label behind.
 * Neither of the two selects on this page can outgrow it: the country list is a
 * single-country store's and the state list is the fifty US states.
 */

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-blocks-components-select__select {
	block-size: var(--tc-woo-control-height); /* 48 */
	padding-block: 1.375rem 0.375rem; /* 22 / 6 */
	padding-inline: var(--wp--preset--spacing--normal, 1rem); /* 16 */
	border: 1px solid var(--tc-woo-line);
	border-radius: var(--tc-woo-radius-field);
	background-color: var(--wp--custom--color--base--white, #fff);
	color: var(--tc-woo-ink);
	font-size: var(--wp--preset--font-size--label-medium, 0.875rem);
	font-weight: 500;
	line-height: 1.4286;
}

/* Woo drops the inline padding to 8.5 on focus, which would shift the value
   sideways under the keyboard. */

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-blocks-components-select__select:focus {
	padding-block: 1.375rem 0.375rem;
	padding-inline: var(--wp--preset--spacing--normal, 1rem);
}

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-blocks-components-select__label {
	inset-block-start: 0.3125rem; /* 5 — the input's risen-label position */
	inset-inline-start: var(--wp--preset--spacing--normal, 1rem);
	font-size: var(--wp--preset--font-size--label-medium, 0.875rem);
	font-weight: 500;
	line-height: 1.4286;
	color: var(--tc-woo-muted);
}

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-text-input input::placeholder,
.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-text-input textarea::placeholder {
	color: var(--tc-woo-muted);
	opacity: 1;
}

/*
 * ⚠ THE ERROR RED IS WOO'S `#CC1818` AND THIS SITE'S IS `--wc-red`. Measured on
 * an unfilled country select: the label and the border both render
 * `rgb(204, 24, 24)`. #193 §1.3 settled this — `theme.json` has no red family,
 * and `--wc-red` (#dc2626) is the one red the design system commits to, mapped
 * at `html:root` by the ftm-blocks bridge. The bridge already paints
 * `.wc-block-components-validation-error` with it at (0,2,0); what it does not
 * reach is the CONTROL that failed, which is what a person actually looks at.
 */

.woocommerce-checkout .wp-block-woocommerce-checkout .has-error input,
.woocommerce-checkout .wp-block-woocommerce-checkout .has-error textarea,
.woocommerce-checkout .wp-block-woocommerce-checkout .has-error select {
	border-color: var(--wc-red, #dc2626);
}

.woocommerce-checkout .wp-block-woocommerce-checkout .has-error label,
.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-validation-error {
	color: var(--wc-red, #dc2626);
}

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-validation-error {
	font-size: var(--wp--preset--font-size--label-small, 0.75rem);
	font-weight: 500;
	line-height: 1.3333;
}

/*
 * The checkbox — "Use same address for billing", "Save payment information",
 * the terms box. #193 §5's control verbatim, including the 2px radius that is a
 * frame value rather than the 6 the radius scale starts at, and the
 * `secondary-700` checked fill with a white tick. Woo draws it at 20px with a
 * 4px radius and a black-alpha border.
 *
 * `.wc-block-components-checkbox__mark` is Woo's own tick SVG, drawn over the
 * input; it is hidden here because the background-image tick is the house one
 * and two ticks would overprint.
 */

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-checkbox__input[type="checkbox"] {
	appearance: none;
	flex-shrink: 0;
	inline-size: 1.125rem; /* 18 */
	min-inline-size: 1.125rem;
	block-size: 1.125rem;
	margin: 0;
	border: 1px solid var(--wp--custom--color--neutral--300, #ced4da);
	border-radius: 2px;
	background-color: var(--wp--custom--color--base--white, #fff);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 0.75rem 0.75rem;
	cursor: pointer;
}

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-checkbox__input[type="checkbox"]:checked {
	border-color: var(--tc-woo-accent);
	background-color: var(--tc-woo-accent);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12.5l5.5 5.5L20 6.5'/></svg>");
}

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-checkbox__mark {
	display: none;
}

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-checkbox__label {
	font-size: var(--wp--preset--font-size--label-medium, 0.875rem);
	font-weight: 500;
	line-height: 1.4286;
	color: var(--tc-woo-ink);
}

/* ── 9.4 Shipping options and payment methods ────────────────────────────── */

/*
 * ⚠ BOTH ARE THE SAME COMPONENT AND ARE DRAWN AS ONE. Shipping rates and
 * payment methods are both `.wc-block-components-radio-control`, and Woo
 * renders each option as an unbordered 58px row with the radio absolutely
 * positioned 48px in from the start. Two lists of unseparated rows, both of
 * which are a choice, and neither of which looks like one.
 *
 * The house treatment for a selectable row: a `neutral-200` hairline box at
 * `radius--sm` on white, the selected one carrying the accent border and the
 * panel fill. That is the shop archive's filter row and the PDP's variation
 * swatch, and it does not need a new decision. Woo's own
 * `--highlight-checked--first-selected` / `--last-selected` classes are left
 * alone; the border is what carries the state here.
 *
 * The 48px inline padding stays: it is where Woo positions the radio, and
 * moving it means moving the input, which is layout, not chrome.
 */

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-radio-control {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--small, 0.75rem); /* 12 */
}

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-radio-control__option {
	min-block-size: 2.75rem; /* 44 — the label IS the target */
	padding-block: var(--wp--preset--spacing--normal, 1rem);
	border: 1px solid var(--tc-woo-line);
	border-radius: var(--tc-woo-radius-container);
	background-color: var(--wp--custom--color--base--white, #fff);
	cursor: pointer;
}

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-radio-control__option-checked {
	border-color: var(--tc-woo-accent);
	background-color: var(--tc-woo-panel);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * DESIGN REVIEW, 2026-09-01 — THE TWO LISTS STOP BEING ONE COMPONENT HERE.
 *
 * ⚠ READ THE NOTE ABOVE FIRST. It argues, correctly, that shipping rates and
 * payment methods are the SAME `.wc-block-components-radio-control` and should
 * be drawn as one. The review asked for them to differ: the box removed from
 * the shipping choices, and the payment box "adjusted". So the shared rules
 * above still carry everything both lists agree about — the 44px target, the
 * padding, the label type, the radio's accent — and only the surface is split.
 *
 * SPLITTING IT WAS NOT OPTIONAL. Both lists resolve to the same selector, so
 * before this the two items could not be changed independently at all; the
 * first attempt at "remove the shipping border" silently restyled the payment
 * method too.
 *
 * ⚠ AND THE FIRST MEASUREMENT OF THIS WAS WRONG, WHICH IS WHY THE SCOPES ARE
 * NAMED RATHER THAN INFERRED. Shipping rates do not render until a complete,
 * deliverable address is entered — before that the block prints "Enter a
 * shipping address to view shipping options" and there is NO radio control on
 * the page. A probe that reads "the first `__option`" therefore measures the
 * PAYMENT method and reports it as the shipping one. Verified with a real
 * address (Horsham PA 19044) against the US zone's four enabled methods.
 * ═══════════════════════════════════════════════════════════════════════════ */

/*
 * 9a — SHIPPING CHOICES LOSE THE BOX ENTIRELY, in both states.
 *
 * The review called the border unnecessary and it is: this list is always a
 * single-select of two-to-four short rows, the radio input is the affordance,
 * and the 12px gap from the shared `radio-control` rule keeps them apart. A
 * hairline box around each row was chrome describing something the control
 * already said.
 *
 * The checked state is NOT left invisible — `accent-color` on the input is set
 * by the shared rule above and is untouched. What goes is the box, not the
 * feedback.
 *
 * `border-radius` and the white fill go with the border: a radius on a
 * borderless transparent row is a value that can never be seen, and leaving
 * either behind is how a half-removed treatment comes back later.
 */
.woocommerce-checkout
	.wp-block-woocommerce-checkout
	.wp-block-woocommerce-checkout-shipping-methods-block
	.wc-block-components-radio-control__option,
.woocommerce-checkout
	.wp-block-woocommerce-checkout
	.wp-block-woocommerce-checkout-shipping-methods-block
	.wc-block-components-radio-control__option-checked {
	border: 0;
	border-radius: 0;
	background-color: transparent;
}

/*
 * ⚠ AND WOO'S OWN BOX HAS TO GO WITH IT, OR THE FIX IS HALF-DONE AND LOOKS
 * UNCHANGED. This is the part the first cut missed.
 *
 * The note at the head of 9.4 says Woo's `--highlight-checked` classes are
 * "left alone; the border is what carries the state here". That was true while
 * the theme drew a border. Remove the theme's box and Woo's own comes forward,
 * and it is heavier than what was removed — measured on a rendered checkout:
 *
 *   .wc-block-components-radio-control::after        0/1/1/1px  rgb(10,32,91)
 *     — a container frame around the whole list, open at the top
 *   .__option-checked                                box-shadow inset 1.5px
 *     — a full box around the selected row
 *   .__option::after                                 20% navy background
 *     — the 1px separator between rows
 *
 * The frame and the selected box go; THE SEPARATORS STAY. "Remove the border
 * around the choices" is about the boxes, and a list of six carrier rates with
 * no rules between them runs together — the separator is doing legibility work
 * the boxes were not.
 *
 * Selection is still shown: `.__input` keeps its `accent-color` from the shared
 * rule, and a filled radio beside a bolded label is what every other
 * single-select on this site uses.
 *
 * ⚠ NOT SCOPED TO THE PAYMENT LIST, DELIBERATELY. It carries the same Woo
 * classes, and 9b keeps its box.
 */
.woocommerce-checkout
	.wp-block-woocommerce-checkout
	.wp-block-woocommerce-checkout-shipping-methods-block
	.wc-block-components-radio-control::after {
	border: 0;
}

.woocommerce-checkout
	.wp-block-woocommerce-checkout
	.wp-block-woocommerce-checkout-shipping-methods-block
	.wc-block-components-radio-control__option-checked {
	box-shadow: none;
}

/*
 * 9b — THE PAYMENT LIST IS ONE CONTAINER WITH ONE BORDER.
 *
 * ⚠ REWRITTEN 2026-09-09, AND THE RULES IT REPLACES ARE WORTH KNOWING. 9b used
 * to read "THE PAYMENT BOX IS QUIETENED, NOT REMOVED": the 2026-09-01 review
 * asked for the payment box to be "adjusted", that word was not specific, and
 * the reading taken was to keep a box PER OPTION and drop it from the accent to
 * the hairline. The reading was recorded and flagged at the time precisely
 * because it might be the wrong one. It was.
 *
 * What that produced, measured at 1440 with two gateways enabled:
 *
 *   .wc-block-components-radio-control      flex, gap 12px, ::after 1px navy
 *   .__option (each)                        border 1px neutral-200 ALL ROUND,
 *                                           border-radius 6px
 *   …-accordion-option (selected)           box-shadow inset 0 0 0 1.5px NAVY,
 *                                           border-radius 4px
 *   …-accordion-content (the description)   border 0/1/1/1 neutral-200,
 *                                           border-radius 0 0 6px 6px
 *   .__option::after                        1px separator, navy at 20%
 *
 * — a bordered card for each option, a SECOND bordered card under the selected
 * one holding its description, and 12px of daylight between them. Three
 * unrelated cards where there is one decision to make. And the heaviest line on
 * the page was not the theme's hairline at all: it was Woo's own 1.5px inset
 * navy shadow, which the per-option box was sitting inside.
 *
 * The list is now what it is: ONE container, one hairline, one radius, with the
 * options divided internally and nothing between them. This is the shipping
 * list's logic — 9a's "the radio is the affordance, not a box round every row" —
 * carried to the one list that does need an outer edge, because unlike a
 * shipping rate a payment method OPENS, and the thing it opens has to be
 * visibly inside it.
 *
 * ⚠ THE RADIUS WAS 2 FROM 2026-09-09 TO 2026-09-17, AND IS NOW THE CONTAINER'S
 * 4. The 2026-09-09 rewrite set it to `--tc-woo-radius-button` as "the
 * brief's value" and flagged it as the one new surface decision here — a
 * departure from every other container on these surfaces, which were all 6.
 * The designer's 2026-09-15 ruling (block 1a: fields 2, containers 4) settles
 * it the other way: this list is a container, so it takes
 * `--tc-woo-radius-container`, the same 4 as the two sidebars. Spec B44b
 * moved with it. DECISIONS 2026-09-17 §2.
 */

.woocommerce-checkout
	.wp-block-woocommerce-checkout
	.wp-block-woocommerce-checkout-payment-block
	.wc-block-components-radio-control {
	gap: 0;
	border: 1px solid var(--tc-woo-line);
	border-radius: var(--tc-woo-radius-container); /* 4 — was the button's 2 until 2026-09-17 */
}

/*
 * ⚠ WOO'S OWN FRAME HAS TO GO OR THERE ARE TWO OUTER EDGES. Same lesson 9a
 * learned on the shipping list, on the same pseudo-element:
 * `.wc-block-components-radio-control::after` is absolutely positioned at
 * `inset: 0` and draws `border-bottom: 1px rgb(10, 32, 91)` — a navy rule
 * across the foot of the list, one pixel inside the container's own bottom
 * edge. 9a suppresses it for shipping and says in as many words that it is "not
 * scoped to the payment list, deliberately". That sentence is no longer true of
 * the design, and this is its counterpart.
 */

.woocommerce-checkout
	.wp-block-woocommerce-checkout
	.wp-block-woocommerce-checkout-payment-block
	.wc-block-components-radio-control::after {
	border: 0;
}

/*
 * Each option loses its box, and gains a divider only when it has a sibling
 * above it. The adjacent-sibling combinator is the whole rule: a border on
 * every option would draw a line under the last one, one pixel inside the
 * container's own edge, which is the doubled hairline this section exists to
 * remove.
 *
 * `box-shadow: none` is Woo's 1.5px inset navy on the highlighted option and is
 * not optional — removing the theme's border alone leaves that shadow as the
 * only visible box, which is exactly how 9a's first cut looked unchanged.
 */

.woocommerce-checkout
	.wp-block-woocommerce-checkout
	.wp-block-woocommerce-checkout-payment-block
	.wc-block-components-radio-control-accordion-option {
	border-radius: 0;
	box-shadow: none;
}

.woocommerce-checkout
	.wp-block-woocommerce-checkout
	.wp-block-woocommerce-checkout-payment-block
	.wc-block-components-radio-control-accordion-option
	+ .wc-block-components-radio-control-accordion-option {
	border-block-start: 1px solid var(--tc-woo-line);
}

/*
 * The selected option's fill.
 *
 * `--tc-woo-panel` is `neutral-50` — the fill the order-summary panel already
 * carries on this same page, and the cart's totals panel on the page before it.
 * So the tint that says "this one" is a surface the shopper has already met one
 * column to the right, not a new colour.
 *
 * ⚠ KEYED OFF THE CHECKED INPUT, NOT OFF WOO'S MODIFIER CLASS. Woo marks the
 * selected wrapper `--checked-option-highlighted`, and that class only exists
 * while the control is in `--highlight-checked` mode; the modifier names in
 * this component have already changed once in the life of this file.
 * `:has(.__option-checked)` follows the state itself. Specificity is (0,5,0) —
 * `:has()` takes the weight of its heaviest argument, so the pseudo-class adds
 * the one class inside it.
 *
 * The fill goes on the WRAPPER, not on the label, so it covers the description
 * as well and the two read as one region.
 */

.woocommerce-checkout
	.wp-block-woocommerce-checkout
	.wp-block-woocommerce-checkout-payment-block
	.wc-block-components-radio-control-accordion-option:has(
		.wc-block-components-radio-control__option-checked
	) {
	background-color: var(--tc-woo-panel);
}

/*
 * The option rows themselves keep the 44px target, the 48px inline padding and
 * the label type from the shared rules at the head of 9.4, and lose everything
 * that drew a box. Woo's `.__option::after` goes with them: it is the 20%-navy
 * separator between rows, and the divider is now the wrapper's border in the
 * site's own hairline. `content: none` rather than `display: none` — §33: one
 * is the absence of a box, the other is a hidden box the spec still blockifies.
 */

.woocommerce-checkout
	.wp-block-woocommerce-checkout
	.wp-block-woocommerce-checkout-payment-block
	.wc-block-components-radio-control__option,
.woocommerce-checkout
	.wp-block-woocommerce-checkout
	.wp-block-woocommerce-checkout-payment-block
	.wc-block-components-radio-control__option-checked {
	border: 0;
	border-radius: 0;
	background-color: transparent;
}

/*
 * ⚠ WOO DRAWS THAT SEPARATOR TWICE, ON TWO DIFFERENT ELEMENTS, AND SUPPRESSING
 * ONE LEAVES THE OTHER. Measured after the first cut: `.__option::after` was
 * gone and a navy line still ran across the top of every option, because
 * `.wc-block-components-radio-control-accordion-option::after` carries the same
 * `inset: 0 1px auto 1px` 1px band in the same 20% navy. On the first option
 * that band sits one pixel inside the container's own top border — a doubled
 * edge — and on the second it sits directly on the theme's neutral-200 divider.
 * Both go.
 */

.woocommerce-checkout
	.wp-block-woocommerce-checkout
	.wp-block-woocommerce-checkout-payment-block
	.wc-block-components-radio-control__option::after,
.woocommerce-checkout
	.wp-block-woocommerce-checkout
	.wp-block-woocommerce-checkout-payment-block
	.wc-block-components-radio-control-accordion-option::after {
	content: none;
}

/*
 * The description. It belongs to the option above it, so it has no edge of its
 * own at all — it sits on the selected option's fill and is indented to the
 * label's text, not to the option's box.
 *
 * The 48 start matches the option's own `padding-inline-start`, which is where
 * Woo puts the radio (16 left + 20 wide + 12), so the description's first
 * character lines up under the method name rather than under the radio. The
 * zero at the top is deliberate: the 16px gap above it is the LABEL's
 * `padding-block-end`, so the space between a method and its description comes
 * from one declaration instead of two that have to agree.
 */

.woocommerce-checkout
	.wp-block-woocommerce-checkout
	.wp-block-woocommerce-checkout-payment-block
	.wc-block-components-radio-control-accordion-option
	.wc-block-components-radio-control-accordion-content {
	margin-block-start: 0;
	padding: 0 var(--wp--preset--spacing--normal, 1rem)
		var(--wp--preset--spacing--normal, 1rem) 3rem; /* 0 16 16 48 */

	border: 0;
	border-radius: 0;
	background-color: transparent;
}

/*
 * ⚠ THE TWO OPTIONS WERE DIFFERENT HEIGHTS AND THAT IS WHY THEIR RADIOS DID NOT
 * LINE UP. Measured at 1440: the Cash on delivery row was 54 tall and the
 * Credit Card row 60, because the CC label group holds four 24px card-brand
 * marks and measures 26 against the plain label's 20. Woo centres the radio in
 * each row — `top: 50%` with a `translateY(-9px)` — so the two inputs landed at
 * +18 and +21 from their own row's top, and the labels with them.
 *
 * The fix is to give both label groups the SAME height rather than to fight
 * Woo's centring, which would mean overriding a `top` and a `transform` and
 * would break the moment a third gateway with a taller mark appears. 1.5rem is
 * the icon height §9.5 already sets, so a row with brand marks and a row
 * without are both 24 + 16 + 16 = 56, and Woo's own centring then puts both
 * radios and both labels at the same offset for free. The shared rule's 44px
 * minimum target is unaffected — 56 clears it.
 */

.woocommerce-checkout
	.wp-block-woocommerce-checkout
	.wp-block-woocommerce-checkout-payment-block
	.wc-block-components-radio-control__label-group {
	min-block-size: 1.5rem; /* 24 — the card-brand icon height, §9.5 */
	align-items: center;
}

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-radio-control__label,
.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-payment-method-label {
	font-size: var(--wp--preset--font-size--label-medium, 0.875rem);
	font-weight: 700;
	line-height: 1.4286;
	color: var(--tc-woo-ink);
}

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-radio-control__description,
.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-radio-control__secondary-label,
.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-radio-control__secondary-description {
	font-weight: 500;
	color: var(--tc-woo-muted);
}

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-radio-control__input {
	accent-color: var(--tc-woo-accent);
}

/* The accordion body a selected payment method opens. It belongs to the option
   above it, so it takes the same box with the top edge removed rather than a
   second box under a first. */

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control-accordion-content {
	margin-block-start: 0;
	padding: var(--wp--preset--spacing--normal, 1rem);
	border: 1px solid var(--tc-woo-accent);
	border-block-start: 0;
	border-end-start-radius: var(--tc-woo-radius-container);
	border-end-end-radius: var(--tc-woo-radius-container);
	background-color: var(--tc-woo-panel);
}

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option-checked {
	border-end-start-radius: 0;
	border-end-end-radius: 0;
}

/* ── 9.5 The payment section — CHROME ONLY ───────────────────────────────── */

/*
 * ⚠ READ THIS BEFORE CHANGING ANYTHING BELOW.
 *
 * The Authorize.net CIM gateway renders its Card Number / Expiration / CSC
 * fields INSIDE the Checkout block, through Woo's block payment-method API, into
 * `#wc-blocks-payment-gateways-authorize-net-cim-credit-card-content`. Verified
 * on this environment 2026-08-31 with an item in the cart and an address filled:
 * the three inputs are the gateway's own DOM in this page — not an iframe, not a
 * hosted field — carrying Woo's `.wc-block-components-text-input` wrapper and
 * the gateway's own `tw-*` utility classes.
 *
 * WHAT IS SET HERE IS BOX AND TYPOGRAPHY ONLY: height, padding, border, radius,
 * background-color, colour, size, weight, line-height. No `display`, no
 * positioning, no `appearance`, nothing that changes what the element IS, and
 * nothing that touches the gateway's behaviour. The gateway's JS reads `id`,
 * `name` and `value` and never a computed style. This is the decision #193 §7.2
 * put to the lead developer and §11.1 recorded: THE CARD FIELDS TAKE THE HOUSE
 * CONTROL. It is carried forward to the block markup unchanged.
 *
 * ⚠ AND IT COSTS ONE RULE HERE INSTEAD OF #193's TWO ID-CARRYING SELECTORS.
 * On the classic checkout the opponents were `woocommerce.css`'s
 * `.woocommerce-checkout #payment div.payment_box input.input-text` (1,3,2) and
 * the gateway framework's `sv-wc-payment-gateway-payment-form.min.css` at
 * (1,4,2), which forced a (1,5,2) answer. Neither rule matches this markup:
 * there is no `#payment` and no `div.payment_box` on the block checkout. The
 * fields are reached by 9.3's ordinary `.wc-block-components-text-input input`
 * rule, which is why THE THREE CARD FIELDS ARE ALREADY THE HOUSE CONTROL BEFORE
 * THIS SUBSECTION RUNS. Measured: 48 tall, `radius--sm`, `neutral-200`, 16 of
 * padding, base-black at 14/500 — the same as the address fields beside them.
 *
 * ⚠ ONE THING IS NOT INHERITED AND IS SET EXPLICITLY. The gateway's own
 * stylesheet paints the input `color: rgb(43,45,47)` — a grey that is not on
 * this site's palette — at a specificity 9.3 ties. Measured `rgb(43, 45, 47)`
 * against `rgb(10, 32, 91)` on the address field two rows up. That is a colour
 * and nothing else, and it is corrected.
 *
 * NOTHING BELOW TOUCHES: the card-brand artwork the gateway paints as a
 * `background-image` on the number field (only `background-color` is set), its
 * CSC help icon, its `inputmode`/`autocomplete` attributes, or its own focus
 * treatment. And no spec in this repo submits this form.
 */

.woocommerce-checkout .wp-block-woocommerce-checkout #wc-blocks-payment-gateways-authorize-net-cim-credit-card-content .wc-block-components-text-input input {
	color: var(--tc-woo-ink);
}

.woocommerce-checkout .wp-block-woocommerce-checkout #wc-blocks-payment-gateways-authorize-net-cim-credit-card-content .wc-block-components-text-input label {
	font-size: var(--wp--preset--font-size--label-medium, 0.875rem);
	font-weight: 500;
	line-height: 1.4286;
	color: var(--tc-woo-muted);
}

/*
 * ⚠ THE ONE LAYOUT RULE IN THIS SUBSECTION, AND WHY (QA batch F, item 11).
 *
 * tonerdev: "Expiration (MM/YY)" truncates at 390. Measured here with Credit
 * Card selected: the gateway lays Expiration and CSC out as its own
 * `tw-grid tw-grid-cols-2 tw-gap-24px`, so each field is (row − 24) / 2 — 117 at
 * 360, 130 at 390, about 149 at 430. The label is Woo's floating label,
 * `white-space: nowrap; text-overflow: ellipsis`, and "Expiration (MM/YY)" is
 * 132px of text in a 24px-padded field: it needs a 156px field, and no phone
 * width gives it one ("Expiration (M…"). From 768 the field is 299 and fits.
 *
 * Below md the row stacks, so both fields take the full width, as the card
 * number above them already does. Rejected: wrapping the label (it is absolutely
 * positioned in a 48px field and floats up on focus; two lines would collide
 * with the typed value), and shortening it (the gateway's text, and a content
 * change). The header of this subsection promises box and typography only;
 * this is the exception, it touches only the column template of the gateway's
 * own grid, and the gateway's JS reads no computed style.
 */

@media (max-width: 47.9375rem) {
	.woocommerce-checkout .wp-block-woocommerce-checkout #wc-blocks-payment-gateways-authorize-net-cim-credit-card-content .tw-grid.tw-grid-cols-2 {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0; /* each field carries its own 24 above (`!tw-mt-24px`), as Card Number does */
	}
}

/* The gateway's "Pay securely using your credit card." line, and the saved-card
   note under the fields. */

.woocommerce-checkout .wp-block-woocommerce-checkout #wc-blocks-payment-gateways-authorize-net-cim-credit-card-content p,
.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-payment-methods__save-card-info {
	margin-block: 0;
	font-size: var(--wp--preset--font-size--label-medium, 0.875rem);
	font-weight: 500;
	line-height: 1.4286;
	color: var(--tc-woo-muted);
}

/* The card-brand icons beside the method label. Woo sizes them per brand; the
   only thing set is that the row does not grow past the label's line box. */

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-payment-method-icon {
	block-size: 1.5rem; /* 24 */
	inline-size: auto;
}

/*
 * ⚠ THE HEIGHT WAS ALREADY CONSISTENT. THE POSITION WAS NOT. Added 2026-09-09.
 * The rule above has kept all four marks at 24 since #197 and that part was
 * never wrong. Measured at 1440, what was wrong is where they sat:
 *
 *   vertically   `.wc-block-components-payment-method-icons` inherits
 *                `align-items: normal`, so four 24px images in a 26px label
 *                group sat flush with its TOP and 2px clear of its bottom
 *   horizontally the container is `justify-content: center`, so the marks
 *                floated in the middle of their own 184px box; and the gateway
 *                wraps them in a `.tw-mr-12px` utility, which stopped the run
 *                at x 827 where the label group's content edge is 843
 *
 * So: centred on the cross axis, packed to the end of the main axis, and the
 * gateway's stray 12px removed so the last mark's right edge is the option's
 * own `padding-inline-end` — the same edge the shipping list's prices align to.
 *
 * ⚠ THE MARGIN IS ZEROED THROUGH `> *`, NOT THROUGH `.tw-mr-12px`. That class
 * is Tailwind output from the Authorize.net gateway's own build and is not a
 * contract; naming it would make this rule silently stop applying on a gateway
 * update, with no symptom beyond icons sitting 12px in. The child selector says
 * what is meant — whatever the gateway puts inside the label spans the label —
 * and it reaches the plain `.wc-block-components-payment-method-label` of a
 * gateway with no icons at all, where zeroing a margin of 0 costs nothing.
 */

/*
 * ⚠ AND `align-items: center` ALONE DOES NOT CENTRE THEM, BECAUSE THE 2px IS A
 * MARGIN ON THE IMAGES. Woo ships `margin: 0 4px 2px` on every brand mark, so
 * the icon row measured 26 — a 24px image plus a 2px bottom margin — and the
 * row it sits in measured 26 with it. Centring 24-in-26 moves the picture by
 * one pixel and leaves the row a pixel too tall, which is what made the Credit
 * Card option 58 against Cash on delivery's 56 and the two radios 28 and 29.
 *
 * So the margin goes and the 8px it was drawing between marks (4 + 4) comes
 * back as a `gap`, which spaces the marks WITHOUT hanging 4px off the end of
 * the last one. Both halves are needed: the block margin is what breaks the
 * height, the trailing inline margin is what breaks the right edge.
 */

.woocommerce-checkout
	.wp-block-woocommerce-checkout
	.wp-block-woocommerce-checkout-payment-block
	.wc-block-components-payment-method-icons {
	gap: var(--wp--preset--spacing--xsmall, 0.5rem); /* 8 — Woo's 4 + 4 */
	align-items: center;
	justify-content: flex-end;
}

.woocommerce-checkout
	.wp-block-woocommerce-checkout
	.wp-block-woocommerce-checkout-payment-block
	.wc-block-components-payment-method-icon {
	margin: 0;
}

.woocommerce-checkout
	.wp-block-woocommerce-checkout
	.wp-block-woocommerce-checkout-payment-block
	.wc-block-components-radio-control__label
	> * {
	margin-inline-end: 0;
}

/* ── 9.6 The order-summary panel ─────────────────────────────────────────── */

/*
 * The same panel as the cart's totals, for the same reason and with the same
 * values. The two pages carry the same object and a shopper moves between them
 * in one step; a summary that changed shape at that step would read as a
 * different site.
 *
 * ⚠ THE FILL IS GONE — DESIGN REVIEW, 2026-09-01. It was `--tc-woo-panel`
 * (neutral-50), and the review asked for the grey removed from the order
 * details panel.
 *
 * ⚠ THE PANEL DOES NOT DISSOLVE, AND THAT WAS CHECKED BEFORE REMOVING IT
 * RATHER THAN HOPED FOR AFTERWARDS. What looked like a white card floating on
 * the grey is `wp-block-woocommerce-checkout-order-summary-block`, which draws
 * its OWN 1px border at 20% navy with a 5px radius on a transparent background.
 * Measured 2026-09-01. So the summary keeps a real edge of its own on white,
 * and every totals row keeps its `--tc-woo-line` separator. Nothing was added
 * to compensate, because nothing needed to be.
 *
 * ⚠ THE ARGUMENT FOR THE FILL IS ANSWERED, NOT IGNORED. This note used to end
 * "the panel is `position: sticky` … a background-color is what makes it
 * legible over the content it scrolls past, so the fill is doing more work here
 * than on the cart." Woo does set `sticky` (measured at 1440; `static` at 375).
 * But the sidebar and the form are SIDE BY SIDE in a two-column layout — the
 * form scrolls BESIDE the panel, never underneath it — so there is no content
 * for the fill to keep the panel legible over. The concern was real and the
 * geometry does not support it.
 *
 * ⚠ `padding` AND `border-radius` STAY. The padding is the panel's inset and is
 * still doing its job against the bordered summary inside it. The radius is
 * now unobservable on this element and is kept only so the two copies below
 * remain one declaration set — remove it here and somebody will remove it from
 * one copy and not the other.
 *
 * ⚠ THE FILL IS BACK — G44, GARY 2026-09-14, WHICH SUPERSEDES THE 2026-09-01
 * REMOVAL ABOVE. "Match the checkout order summary box to the cart page order
 * summary box." The cart's box (8.5) is the neutral-50 panel with the control
 * radius and 16/24 of padding and no inner edge; the checkout's had lost the
 * fill and kept Woo's own bordered card inside it. So: the fill returns on
 * both copies, and the inner card's border and radius are zeroed so the two
 * pages carry one object again. The three paragraphs above are left as the
 * record of why the fill went, and DECISIONS 2026-09-01 §8 now points here.
 */

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-checkout__sidebar {
	padding: var(--wp--preset--spacing--normal, 1rem);
	border-radius: var(--tc-woo-radius-container);
	background-color: var(--tc-woo-panel); /* G44 */
}

/*
 * G44: Woo's `…checkout-order-summary-block` draws a 1px 20%-navy border with
 * a 5px radius on transparent — the "white card floating on the grey" the
 * 2026-09-01 note describes. The cart's `…cart-order-summary-block` draws
 * nothing, and it is the cart the checkout is now matched to. Zeroed on both
 * copies; the per-row `--tc-woo-line` rules below are the panel's internal
 * structure on both pages and stay.
 */

.woocommerce-checkout .wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block {
	border: 0;
	border-radius: 0;
}

@container (min-width: 700px) {
	.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-checkout__sidebar {
		padding: var(--wp--preset--spacing--large, 1.5rem); /* 24 */
	}
}

/*
 * ⚠ AND BELOW THE STACKING POINT WOOCOMMERCE RENDERS THE ORDER SUMMARY TWICE.
 * This is Woo's own behaviour, not a defect and not this file's doing, and it is
 * worth writing down because a screenshot of the mobile checkout looks like a
 * duplicate:
 *
 *   .wc-block-checkout__sidebar                     collapses to a 70px title
 *                                                   bar with the total on it
 *   .checkout-order-summary-block-fill-wrapper      a SECOND, expanded copy,
 *                                                   rendered into
 *                                                   .wc-block-checkout__actions
 *                                                   immediately above Place order
 *
 * Measured at 375: one at y=388 h=70 inside the sidebar, one at y=2574 h=607
 * inside the form. At 1440 there is only the sidebar's. The second is the one a
 * person actually reads on a phone — it is where the order is reviewed before
 * paying — and it is NOT inside `.wc-block-checkout__sidebar`, so the panel rule
 * above never reached it. It rendered its figures correctly on bare white beside
 * a tinted title bar at the top of the same page.
 *
 * The same values, so the two copies are one object.
 *
 * ⚠ ITS FILL GOES TOO, AND THAT IS THE WHOLE POINT OF THIS RULE EXISTING.
 * The 2026-09-01 review asked for the grey removed from the order summary; the
 * copy a phone user actually reads is THIS one, not the sidebar. Removing the
 * fill from `.wc-block-checkout__sidebar` alone would have left mobile grey and
 * desktop white — the exact split this rule was written to prevent.
 *
 * G44 (2026-09-14) brings the fill back on the sidebar, so it comes back here
 * for the same reason it left here: the two copies are one object.
 */

.woocommerce-checkout
	.wp-block-woocommerce-checkout
	.checkout-order-summary-block-fill-wrapper {
	margin-block-end: var(--wp--preset--spacing--large, 1.5rem); /* 24 */
	padding: var(--wp--preset--spacing--normal, 1rem);
	border-radius: var(--tc-woo-radius-container);
	background-color: var(--tc-woo-panel); /* G44 */
}

/*
 * The collapsed bar, below Woo's stacking point — designer 2026-09-24.
 *
 * Item 4: Woo draws the bar's title with a 1px 20%-navy rule above and below,
 * 20 of block padding and a 16 top margin, all inside the panel's own 16 inset.
 * On the grey that is two rules framing one line; they go, and the title sits
 * on the panel's inset alone.
 *
 * Item 5: 8 above and below the sidebar, "in addition to what exists". What
 * exists is Woo's 24 below (`checkout.css`, `@container (max-width: 699px)`)
 * and nothing above, so 8 / 32. The 8 above lands UNDER G42's 48: the block's
 * top edge is still 48 from the title, and the bar now starts at 56.
 *
 * Both are Woo's container query, not a viewport one — this bar only exists
 * below 700 of block width (≈780 of viewport). Above it the title has no rules
 * to remove, and 780–1199 is the stacked-but-expanded arrangement in 9.1,
 * which keeps its own 24.
 */

@container (max-width: 699px) {
	.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-checkout__sidebar {
		margin-block: var(--wp--preset--spacing--xsmall, 0.5rem) calc(var(--wp--preset--spacing--large, 1.5rem) + var(--wp--preset--spacing--xsmall, 0.5rem)); /* 8 / 24 + 8 */
	}

	.woocommerce-checkout
		.wp-block-woocommerce-checkout
		.wp-block-woocommerce-checkout-order-summary-block
		.wc-block-components-checkout-order-summary__title {
		margin: 0;
		padding: 0;
		border-block: 0;
	}
}

/*
 * "Order summary". Woo renders it as a `<p role="heading" aria-level="2">` at
 * 20/28/500 — the same non-role as the step headings. Was pinned to Title/Large
 * with them; G43 (Gary, 2026-09-14) takes it to Title/Small 20/28, the same
 * value as the cart's "Cart totals" (8.5, G40). The step headings stay 27.
 */

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title-text {
	margin-inline-start: 0; /* item 6: Woo's 16, which put the title 16 in from every row under it */
	font-size: var(--wp--preset--font-size--title-small, 1.25rem); /* 20 — G43 */
	font-weight: 700;
	line-height: 1.4; /* 28/20 — Title/Small */
	letter-spacing: -0.02em;
	color: var(--tc-woo-ink);
}

/*
 * ── The checkout summary, matched to the cart's (designer 2026-09-24, item 7)
 *
 * "The whole order details section should display more like the cart page's
 * sidebar." Measured side by side at 390 and 1440 — panel fill, radius,
 * padding, row labels and the total already agreed. What did not:
 *
 *   1. The title sat 16 low: Woo's `__title` top margin. The cart's title
 *      starts on the panel's inset.
 *   2. Title to first rule was 8 on the checkout, 24 on the cart. (Both
 *      measured 76 from the panel top, but only because 1 added the 16 back.)
 *   3. Every row sat 16 in from the panel's inset on both sides. Woo pads
 *      `…order-summary`, `…panel`, `…totals-coupon` and `…totals-item` 16 a
 *      side inside the checkout sidebar and inside the mobile card — the
 *      padding of the bordered card G44 took the border off — and zeroes the
 *      same four on the CART (`cart.css`, `.wc-block-cart
 *      .wp-block-woocommerce-cart-order-summary-block …`). The rules ran full
 *      width and the text did not, so each hairline overhung its row.
 *   4. ⚠ ON MOBILE THE BORDERED CARD WAS STILL THERE, AND G44 SAID IT WAS NOT.
 *      G44 zeroed `…checkout-order-summary-block`, and on the mobile copy that
 *      class is on the fill-wrapper itself; Woo's 1px / 5px card is the inner
 *      `.checkout-order-summary-block-fill`, which nothing reached. B34a only
 *      read the sidebar copy at 1440.
 *   5. ⚠ AND THE MOBILE COPY'S "ORDER SUMMARY" MISSED G43. It is not the
 *      sidebar's `__title-text` but a step-title `h2`, so it kept Title/Large
 *      (19.5 at 390, 27 wide) while the cart's "Cart totals" is Title/Small.
 *
 * Left as they are, because they are content rather than chrome: the line
 * items (the checkout lists them, the cart has them in the table beside it),
 * and Woo's own labels — "Delivery"/"Total" here, "Shipping"/"Estimated
 * total" on the cart.
 */

@container (min-width: 700px) {
	.woocommerce-checkout
		.wp-block-woocommerce-checkout
		.wp-block-woocommerce-checkout-order-summary-block
		.wc-block-components-checkout-order-summary__title {
		margin-block-start: 0; /* 1 */
	}

	.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title-text {
		margin-block-end: var(--wp--preset--spacing--large, 1.5rem); /* 2 — the cart title's 24 */
	}
}

.woocommerce-checkout
	.wp-block-woocommerce-checkout
	.wp-block-woocommerce-checkout-order-summary-block
	:is(.wc-block-components-order-summary, .wc-block-components-panel, .wc-block-components-totals-coupon, .wc-block-components-totals-item) {
	padding-inline: 0; /* 3 */
}

.woocommerce-checkout .wp-block-woocommerce-checkout .checkout-order-summary-block-fill {
	border: 0; /* 4 */
	border-radius: 0;
}

/* …and the rule under the heading comes back with it. Woo drops the first
   row's top border inside the card (`:first-of-type { border-top: 0 }`,
   (0,4,0)) because the card's own edge drew that line; with the card gone the
   heading ran straight into the items, where the cart and the wide checkout
   both draw a hairline. (0,5,0), and the CHILD of the card only: Woo's
   `:first-of-type` also matches the first wrapper inside the totals block, and
   the first version of this rule drew a second line under Woo's own there. */
.woocommerce-checkout
	.wp-block-woocommerce-checkout
	.checkout-order-summary-block-fill
	> .wc-block-components-totals-wrapper:first-child {
	border-block-start: 1px solid var(--tc-woo-line);
}

.woocommerce-checkout
	.wp-block-woocommerce-checkout
	.checkout-order-summary-block-fill-wrapper
	.wc-block-components-checkout-step__title {
	font-size: var(--wp--preset--font-size--title-small, 1.25rem); /* 5 */
	line-height: 1.4;
}

/* The total that rides beside the title when the panel is collapsed — below the
   stacking point only, which is where Woo collapses it. */

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title-price {
	font-size: var(--wp--preset--font-size--label-x-large, 1rem);
	font-weight: 700;
	color: var(--tc-woo-ink);
}

/* The line items in the summary. Smaller than the cart's rows on purpose: this
   is a confirmation of a decision already made, not the place it is made. */

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-order-summary-item {
	padding-block: var(--wp--preset--spacing--small, 0.75rem); /* 12 */
}

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-name {
	font-size: var(--wp--preset--font-size--label-medium, 0.875rem);
	font-weight: 700;
	line-height: 1.4286;
	color: var(--tc-woo-ink);
	text-decoration: none;
}

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-order-summary-item__total-price {
	font-size: var(--wp--preset--font-size--label-medium, 0.875rem);
	font-weight: 700;
	white-space: nowrap;
	color: var(--tc-woo-ink);
}

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-order-summary-item__quantity {
	background-color: var(--tc-woo-accent);
	color: var(--wp--custom--color--base--white, #fff);
	font-size: var(--wp--preset--font-size--label-small, 0.75rem);
	font-weight: 700;
}

/* The totals rows inside the panel — the cart's treatment, on the same classes,
   which the two pages genuinely share, including both of Woo's exclusions. The
   empty band this omission produced is written up at the cart's copy of this
   rule. */

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-totals-wrapper {
	padding-block: var(--wp--preset--spacing--normal, 1rem);
	border-block-start: 1px solid var(--tc-woo-line);
}

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-totals-wrapper::after {
	display: none;
}

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-totals-wrapper:empty,
.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-totals-wrapper:has(> :only-child:empty) {
	padding: 0;
	border-width: 0;
}

.woocommerce-checkout .wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-totals-block .wc-block-components-totals-wrapper {
	padding-block-end: 0;
	border-block-start: 0;
}

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-totals-item__label {
	font-size: var(--wp--preset--font-size--label-medium, 0.875rem);
	font-weight: 500;
	line-height: 1.4286;
	color: var(--tc-woo-muted);
}

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-totals-item__value {
	font-size: var(--wp--preset--font-size--label-medium, 0.875rem);
	font-weight: 700;
	white-space: nowrap;
	color: var(--tc-woo-ink);
}

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-size: var(--wp--preset--font-size--label-x-large, 1rem);
	color: var(--tc-woo-ink);
}

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: var(--wp--preset--font-size--title-small, 1.25rem);
	font-weight: 700;
}

/* The summary's own coupon disclosure — the cart's, on the same component. */

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-totals-coupon .wc-block-components-panel__button {
	display: flex;
	gap: var(--wp--preset--spacing--xsmall, 0.5rem);
	align-items: center;
	min-block-size: 2.75rem; /* 44 */
	padding: 0;
	font-size: var(--wp--preset--font-size--label-medium, 0.875rem);
	font-weight: 700;
	line-height: 1.4286;
	color: var(--tc-woo-ink);
}

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-totals-coupon.wc-block-components-panel {
	border: 0;
}

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-totals-coupon__form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--small, 0.75rem);
	align-items: flex-start;
	margin-block-start: var(--wp--preset--spacing--small, 0.75rem);
}

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-totals-coupon__input {
	flex: 1 1 8rem;
	margin: 0;
}

/* The coupon field, same as the cart's and for the same reason: this form sits
   in the sidebar, OUTSIDE `form.wc-block-checkout__form`, so it carries no
   `.wc-block-components-form` class and 9.3's rules do not reach it. See the
   cart's copy for the four numbers and why they are four. */

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-totals-coupon__input input {
	block-size: var(--tc-woo-control-height); /* 48 */
	padding-block: 0.875rem; /* 14 */
	padding-inline: var(--wp--preset--spacing--normal, 1rem); /* 16 */
	border: 1px solid var(--tc-woo-line);
	border-radius: var(--tc-woo-radius-field);
	background-color: var(--wp--custom--color--base--white, #fff);
	color: var(--tc-woo-ink);
	font-size: var(--wp--preset--font-size--label-medium, 0.875rem);
	font-weight: 500;
	line-height: 1.4286;
}

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-totals-coupon__input label {
	inset-block-start: 1.5rem; /* 24 */
	inset-inline-start: var(--wp--preset--spacing--normal, 1rem);
	font-size: var(--wp--preset--font-size--label-medium, 0.875rem);
	font-weight: 500;
	line-height: 1.4286;
	color: var(--tc-woo-muted);
}

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-totals-coupon__input.is-active input {
	padding-block: 1.375rem 0.375rem; /* 22 / 6 */
}

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-totals-coupon__input.is-active label {
	inset-block-start: 0.3125rem; /* 5 */
}

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-totals-coupon__button {
	flex: 0 0 auto;
	min-block-size: var(--tc-woo-control-height);
	padding-block: 0;
	padding-inline: var(--wp--preset--spacing--normal, 1rem);
	border: 0;
	border-radius: var(--tc-woo-radius-button);
	background-color: var(--tc-woo-cta);
	color: var(--wp--custom--color--base--white, #fff);
	font-size: var(--wp--preset--font-size--label-large, 0.9375rem);
	font-weight: 500; /* G01, corrected to 500 on 2026-09-15 */
	line-height: 1.6;
}

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-totals-coupon__button:hover {
	background-color: var(--tc-woo-cta-hover);
	opacity: 1;
}

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-totals-coupon__button:disabled {
	background-color: var(--wp--custom--color--neutral--100, #e9ecef);
	color: var(--tc-woo-muted);
	opacity: 1;
	cursor: not-allowed;
}

/* ── 9.7 Order note, terms and Place order ───────────────────────────────── */

/* The "Add a note to your order" disclosure. A checkbox and its label; §9.3
   draws the box and this puts the pair on one line at the label role. */

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-checkout__add-note {
	font-size: var(--wp--preset--font-size--label-medium, 0.875rem);
	font-weight: 500;
	line-height: 1.4286;
	color: var(--tc-woo-ink);
}

/* The terms sentence. Fine print, and it is the last thing read before the
   money moves, so it takes the muted body role rather than being shrunk. */

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-checkout__terms {
	font-size: var(--wp--preset--font-size--label-medium, 0.875rem);
	font-weight: 500;
	line-height: 1.4286;
	color: var(--tc-woo-muted);
}

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-checkout__terms a {
	color: var(--tc-woo-link);
	text-underline-offset: 0.2em;
}

/*
 * ⚠ PLACE ORDER IS THE PAGE'S PRIMARY ACTION AND IT RENDERED AT 40px, 13/400,
 * IN A 16px PILL. Measured at both widths. #193 §6's contract at 500 — G01, as
 * corrected 2026-09-15 (was the primary action's 700, then 600 for a day) —
 * full width of its column, which is what the brief asks for and
 * what Woo's own `--full-width` modifier already computes, so the width is
 * restated here rather than left to a modifier class that a Woo update controls.
 *
 * `.wc-block-checkout__actions_row` is `justify-content: flex-end` at 1440 and
 * `center` at 375; with the button at 100% neither has anything left to justify,
 * and the difference between the two widths disappears.
 */

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	min-block-size: var(--tc-woo-control-height); /* 48 */
	padding-block: 0.75rem;
	padding-inline: var(--wp--preset--spacing--normal, 1rem);
	border: 0;
	border-radius: var(--tc-woo-radius-button);
	background-color: var(--tc-woo-cta);
	color: var(--wp--custom--color--base--white, #fff);
	font-size: var(--wp--preset--font-size--label-large, 0.9375rem);
	font-weight: 500; /* G01, corrected to 500 on 2026-09-15 */
	line-height: 1.6;
	letter-spacing: 0.002em;
	text-align: center;
	text-decoration: none;
}

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:hover {
	background-color: var(--tc-woo-cta-hover);
	color: var(--wp--custom--color--base--white, #fff);
	opacity: 1;
}

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:disabled {
	background-color: var(--wp--custom--color--neutral--100, #e9ecef);
	color: var(--tc-woo-muted);
	opacity: 1;
	cursor: not-allowed;
}

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-checkout__actions_row {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--normal, 1rem);
	align-items: stretch;
}

/* The "Return to Cart" link Woo puts beside the button. */

.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-checkout-return-to-cart-button {
	align-self: center;
	min-block-size: 2.75rem; /* 44 */
	display: inline-flex;
	align-items: center;
	font-size: var(--wp--preset--font-size--label-medium, 0.875rem);
	font-weight: 500;
	color: var(--tc-woo-link);
}

/* ═════════════════════════════════════════════════════════════════════════
 * 10. MY ACCOUNT  —  /my-account/, page 10, `[woocommerce_my_account]`
 *
 * The one genuinely legacy surface on the site: eighteen templates under
 * `plugins/woocommerce/templates/myaccount/`, seven endpoints, floats and
 * `.col2-set` throughout, and no block anywhere in it. It renders through the
 * THEME's own `templates/page.html`, which is why its `<main>` has no inline
 * padding where the cart's and checkout's do.
 *
 * ⚠ THREE OF THE ftm-blocks BRIDGE'S RULES ARE LIVE HERE AND ONLY HERE.
 * `woocommerce-diagnosis.md` §4c could only record the three
 * `.woocommerce-MyAccount-navigation` rules as "absent because the measurement
 * was logged out — live for a logged-in user". Measured logged in, they are:
 * `:root .woocommerce-MyAccount-navigation li.is-active a` is **(0,3,2)** and is
 * the opponent for the rail's active state. Four classes wins.
 *
 * ⚠ THIS PAGE NOW HAS AN `<h1>`, AND IT IS A TEMPLATE THAT GIVES IT ONE — THE
 * SAME SHAPE AS THE CHECKOUT'S. `page.html` renders no `core/post-title`, so
 * every endpoint under `/my-account/` was untitled while Cart and Checkout both
 * carried one; that was reported as §4.4 / §7 and has been decided.
 * `templates/page-my-account.html` is the site header part, `core/post-title` at
 * `alignwide` and level 1, `core/post-content` at `alignwide`, and the site
 * footer part. Nothing else. It reads "My account" — the page's own title,
 * unchanged — at every endpoint, because Woo swaps the endpoint content inside
 * `post-content` and never touches the title.
 *
 * The frame it produces is the frame the page already had: `header · main ·
 * footer`, the content at the 1360 band, the footer at 96. What changed is the
 * two rules in §2 and §3, which now name `.woocommerce-account` as well —
 * without them the h1 sits flush against the header at a 61px `heading-large`
 * with no tracking. Deleting the one file reverts all of it.
 * ═════════════════════════════════════════════════════════════════════════ */

/* ── Logged out: sign in beside register ─────────────────────────────────── */

/*
 * Two forms of equal weight. Capped at 1000 rather than run to the band: at
 * 1400 the pair would be 660 a side for four fields.
 *
 * FLUSH LEFT, NOT CENTRED, since QA batch D (V-M1 / R4-6, 2026-09-29). The
 * cap used to be centred, so from 1280 the pair sat 100 / 180 / 200 inside
 * the "My account" H1's flush-left edge. The page's own grid is that edge;
 * the cap stays. From md the two cards also stretch to one height (below).
 *
 * ⚠ CENTRED AGAIN SINCE 2026-09-30 (I20), AND IT REVERSES THE PARAGRAPH ABOVE.
 * Gary asked for the title and both forms centred, logged out. A later
 * review instruction on the same surface outranks QA batch D, so this is a
 * supersession, not drift — do not "restore" flush-left from the note above.
 * The H1 centres with it (rule below), so the two edges agree again: that was
 * V-M1's actual complaint. The 1000 cap stays; below it (and at 390) the pair
 * is simply full content width. DECISIONS.md 2026-09-30.
 */

.woocommerce-account .woocommerce #customer_login {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--xlarge, 2.5rem); /* 40 */
	align-items: start;
	max-inline-size: 1000px;
	margin-inline: auto;
	inline-size: auto;
}

/* The H1 over the forms, and only there — `:has(#customer_login)` keeps the
   lost-password page and the logged-in dashboard flush left. */

.woocommerce-account .wp-site-blocks > main:has(#customer_login) > .wp-block-post-title {
	text-align: center;
}

.woocommerce-account .woocommerce #customer_login > .u-column1,
.woocommerce-account .woocommerce #customer_login > .u-column2 {
	float: none;
	inline-size: auto;
}

/* Woo's card: `border: 1px solid #cfc8d8`, `radius: 5px`, 20px of padding — a
   lavender hairline that appears nowhere else on this site. */

.woocommerce-account .woocommerce #customer_login form.woocommerce-form-login,
.woocommerce-account .woocommerce #customer_login form.woocommerce-form-register {
	margin: 0;
	padding: var(--wp--preset--spacing--large, 1.5rem); /* 24 */
	border: 1px solid var(--tc-woo-line);
	border-radius: var(--tc-woo-radius-control);
	background-color: var(--tc-woo-panel);
}

.woocommerce-account .woocommerce #customer_login .form-row {
	margin-block-end: var(--wp--preset--spacing--large, 1.5rem);
}

.woocommerce-account .woocommerce #customer_login .woocommerce-form-login__rememberme {
	margin-block-end: var(--wp--preset--spacing--large, 1.5rem);
}

/* "A link to set a new password will be sent to your email address." is a bare
   `<p>` — Woo renders it when `woocommerce_registration_generate_password` is
   on, which it is here — and it inherits the surface's 18px body role, so it
   reads as a second heading under the field it explains. It is field help. The
   `:not()` names the two classed `<p>`s the same forms carry so this reaches the
   unclassed one without keying off the absence of a class attribute. */

.woocommerce-account .woocommerce #customer_login form > p:not(.form-row, .woocommerce-LostPassword, .lost_password),
.woocommerce-account .woocommerce #customer_login .woocommerce-privacy-policy-text {
	display: block;
	margin-block: var(--wp--preset--spacing--xsmall, 0.5rem) var(--wp--preset--spacing--large, 1.5rem);
	font-size: var(--wp--preset--font-size--label-medium, 0.875rem);
	font-style: normal;
	line-height: 1.4286;
	color: var(--tc-woo-muted);
}

.woocommerce-account .woocommerce .woocommerce-LostPassword {
	margin-block: var(--wp--preset--spacing--normal, 1rem) 0;
	font-size: var(--wp--preset--font-size--label-medium, 0.875rem);
}

/* ── Logged in: the account rail ─────────────────────────────────────────── */

/*
 * ⚠ THE RAIL IS 268 + 64, WHICH IS shop-archive.css:1427's OWN GEOMETRY:
 * "1400 content band = 268 rail + 64 gutter + 1068 grid". The account rail is
 * the only other sidebar on this site and reusing that split is what makes the
 * two read as one system rather than two people's guesses. Woo's own is
 * `float: left; width: 30%` against a 68% content column, which at the 1400 band
 * is a 420px rail of seven short links.
 *
 * Fenced on `:has(> .woocommerce-MyAccount-navigation)` so the logged-OUT page,
 * which renders no rail, is untouched. Same technique and the same reasoning as
 * the empty cart in §8.
 */

.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce .woocommerce-MyAccount-content {
	float: none;
	inline-size: auto;
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xxxsmall, 0.125rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

/*
 * ⚠ (0,4,2), AND THE FOURTH CLASS IS WHAT MAKES IT LAND. The ftm-blocks bridge
 * ships `:root .woocommerce-MyAccount-navigation li.is-active a` at (0,3,2) —
 * one of the three bridge rules woocommerce-diagnosis.md could not verify
 * because it measured logged out. It is live, and a three-class answer here
 * would only tie it.
 */

.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: var(--wp--preset--spacing--small, 0.75rem) var(--wp--preset--spacing--normal, 1rem);
	border-radius: var(--tc-woo-radius-control);
	font-size: var(--wp--preset--font-size--label-medium, 0.875rem);
	font-weight: 500;
	line-height: 1.4286;
	color: var(--tc-woo-ink);
	text-decoration: none;
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li a:hover {
	background-color: var(--tc-woo-panel);
	color: var(--tc-woo-link);
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li.is-active a {
	background-color: var(--wp--custom--color--secondary--50, #f0f9ff);
	color: var(--tc-woo-accent);
	font-weight: 700;
}

/* The rail's last item is Log out, which is not navigation between endpoints. */

.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-block-start: var(--wp--preset--spacing--small, 0.75rem);
	padding-block-start: var(--wp--preset--spacing--small, 0.75rem);
	border-block-start: 1px solid var(--tc-woo-line);
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--tc-woo-muted);
}

/* ── Content ─────────────────────────────────────────────────────────────── */

.woocommerce-account .woocommerce .woocommerce-MyAccount-content > p {
	margin-block: 0 var(--wp--preset--spacing--large, 1.5rem);
	font-size: var(--wp--preset--font-size--label-x-large, 1rem);
	line-height: 1.5;
}

/* Orders. The table rules in §7 already own the box; the endpoint's own row
   actions and the status cell are what is left. */

.woocommerce-account .woocommerce table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions {
	text-align: end;
}

.woocommerce-account .woocommerce table.woocommerce-orders-table a.woocommerce-button {
	min-block-size: 2.5rem; /* 40 — a row action, not a page action */
	padding-block: 0.5rem;
	padding-inline: var(--wp--preset--spacing--small, 0.75rem);
	border: 1px solid var(--tc-woo-cta);
	background-color: transparent;
	color: var(--tc-woo-cta);
	font-size: var(--wp--preset--font-size--label-medium, 0.875rem);
}

.woocommerce-account .woocommerce table.woocommerce-orders-table a.woocommerce-button:hover {
	background-color: var(--tc-woo-cta);
	color: var(--wp--custom--color--base--white, #fff);
}

/*
 * The order status. Woo renders it as bare text in its own column, so
 * "Completed", "Processing" and "Cancelled" read identically. A pill costs one
 * rule and is the difference between scanning the column and reading it.
 * Neutral by default; the two states a customer acts on are named.
 */

.woocommerce-account .woocommerce table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-status {
	font-size: var(--wp--preset--font-size--label-small, 0.75rem);
	font-weight: 700;
	line-height: 1.3333;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tc-woo-muted);
	white-space: nowrap;
}

/* ── Addresses ───────────────────────────────────────────────────────────── */

.woocommerce-account .woocommerce .woocommerce-Addresses {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--large, 1.5rem); /* 24 */
	align-items: start;
	inline-size: auto;
}

.woocommerce-account .woocommerce .woocommerce-Addresses > .woocommerce-Address {
	float: none;
	inline-size: auto;
	padding: var(--wp--preset--spacing--large, 1.5rem);
	border: 1px solid var(--tc-woo-line);
	border-radius: var(--tc-woo-radius-control);
}

.woocommerce-account .woocommerce .woocommerce-Address-title {
	display: flex;
	gap: var(--wp--preset--spacing--normal, 1rem);
	align-items: baseline;
	justify-content: space-between;
	margin-block-end: var(--wp--preset--spacing--small, 0.75rem);
}

.woocommerce-account .woocommerce .woocommerce-Address-title h2 {
	margin: 0;
	font-size: var(--wp--preset--font-size--label-x-large, 1rem);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0;
}

.woocommerce-account .woocommerce .woocommerce-Address-title a.edit {
	flex: none;
	font-size: var(--wp--preset--font-size--label-medium, 0.875rem);
	font-weight: 500;
}

.woocommerce-account .woocommerce .woocommerce-Address address {
	margin: 0;
	font-size: var(--wp--preset--font-size--label-medium, 0.875rem);
	font-style: normal;
	line-height: 1.6;
	color: var(--tc-woo-muted);
}

/* ── Order detail ────────────────────────────────────────────────────────── */

.woocommerce-account .woocommerce .woocommerce-order-details,
.woocommerce-account .woocommerce .woocommerce-customer-details {
	margin-block-end: var(--wp--preset--spacing--xlarge, 2.5rem);
}

.woocommerce-account .woocommerce .woocommerce-customer-details .woocommerce-columns {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--large, 1.5rem);
}

.woocommerce-account .woocommerce .woocommerce-customer-details address {
	padding: var(--wp--preset--spacing--large, 1.5rem);
	border: 1px solid var(--tc-woo-line);
	border-radius: var(--tc-woo-radius-control);
	font-size: var(--wp--preset--font-size--label-medium, 0.875rem);
	font-style: normal;
	line-height: 1.6;
}

.woocommerce-account .woocommerce p.order-again a {
	font-weight: 700;
}

/* ── Account details, lost password, add payment method ──────────────────── */

.woocommerce-account .woocommerce form.woocommerce-EditAccountForm fieldset {
	margin: 0;
	padding: var(--wp--preset--spacing--large, 1.5rem);
	border: 1px solid var(--tc-woo-line);
	border-radius: var(--tc-woo-radius-control);
}

.woocommerce-account .woocommerce form.woocommerce-EditAccountForm legend {
	padding-inline: var(--wp--preset--spacing--xsmall, 0.5rem);
	font-size: var(--wp--preset--font-size--label-x-large, 1rem);
	font-weight: 700;
	line-height: 1.5;
	color: var(--tc-woo-ink);
}

.woocommerce-account .woocommerce form.woocommerce-EditAccountForm fieldset .form-row {
	margin-block-end: var(--wp--preset--spacing--large, 1.5rem);
}

.woocommerce-account .woocommerce form.woocommerce-EditAccountForm fieldset .form-row:last-child {
	margin-block-end: 0;
}

/* Woo's field help on this form is `<span><em>…</em></span>` with no class at
   all — not the `span.description` the checkout uses — so it inherits the
   surface's 18px and renders as a full-width line of italic body copy under the
   field it explains. Both shapes are named. */

.woocommerce-account .woocommerce form.woocommerce-EditAccountForm span.description,
.woocommerce-account .woocommerce form.woocommerce-EditAccountForm .form-row em {
	display: block;
	font-style: normal;
	margin-block-start: var(--wp--preset--spacing--xsmall, 0.5rem);
	font-size: var(--wp--preset--font-size--label-medium, 0.875rem);
	color: var(--tc-woo-muted);
}

.woocommerce-account .woocommerce form.woocommerce-ResetPassword,
.woocommerce-account .woocommerce form.woocommerce-form-login.login {
	max-inline-size: 32rem; /* 512 — one field and one action */
}

.woocommerce-account .woocommerce form.woocommerce-ResetPassword .form-row {
	margin-block-end: var(--wp--preset--spacing--large, 1.5rem);
}

@media (min-width: 48rem) { /* breakpoint/md */

	.woocommerce-account .woocommerce #customer_login,
	.woocommerce-account .woocommerce .woocommerce-Addresses,
	.woocommerce-account .woocommerce .woocommerce-customer-details .woocommerce-columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* One height for the pair (QA batch D, V-M1): Register ran 34.7 shorter
	   than Login from 1280, and Login 25.3 shorter at 768, because each card
	   sized to its own fields. The row stretches, and each form fills its
	   column. */
	.woocommerce-account .woocommerce #customer_login {
		align-items: stretch;
	}

	.woocommerce-account .woocommerce #customer_login > .u-column1,
	.woocommerce-account .woocommerce #customer_login > .u-column2 {
		display: flex;
		flex-direction: column;
	}

	.woocommerce-account .woocommerce #customer_login form.woocommerce-form-login,
	.woocommerce-account .woocommerce #customer_login form.woocommerce-form-register {
		flex-grow: 1;
	}
}

@media (min-width: 64rem) { /* breakpoint/lg */

	.woocommerce-account .entry-content > .woocommerce:has(> .woocommerce-MyAccount-navigation) {
		display: grid;
		grid-template-columns: var(--tc-woo-rail) minmax(0, 1fr);
		column-gap: var(--tc-woo-gutter);
		align-items: start;
	}
}

/* ═════════════════════════════════════════════════════════════════════════
 * 11. The password-reveal toggle's hit area
 *
 * Found by a sweep of every interactive element on all eleven states at 375,
 * 768, 1024, 1440 and 1920, not by looking. `button.show-password-input` is the
 * ONLY standalone control on My Account that misses the 44px
 * minimum: WooCommerce draws it as a 22 × 22 `::before` glyph and gives the
 * button itself no box, so the target IS the glyph.
 *
 * Every other control the sweep flagged is a checkbox or a radio at the
 * contract's own 16–18px (contact-form.css:560), and each of those is either
 * wrapped in a `<label>` or bound to one by `for` — the label is the hit target
 * and it is full width. This one has no label at all.
 *
 * The glyph is left at 22 and only the box around it grows, so nothing about
 * the control's appearance changes. `inset-inline-end` compensates for half the
 * added width so the glyph stays where WooCommerce drew it, and the field gains
 * enough end padding that a long value cannot run under it.
 * ═════════════════════════════════════════════════════════════════════════ */

.woocommerce-account .woocommerce form .show-password-input {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem; /* 44 */
	block-size: 2.75rem;
	inset-inline-end: 0; /* was 0.7em on a 22px box; half the growth cancels it */
}

.woocommerce-account .woocommerce form .password-input .input-text {
	padding-inline-end: 3rem; /* 48 — the toggle, plus its own inset */
}

/* ── My Account "Remember me" tap target (QA batch A, 2026-09-27) ────────────

   The box measured 18×18 on phones against the 44×44 the brief requires. The
   label already WRAPS the box (Woo's form-login.php), so the label is the
   target: 12px of padding above and below brings its full-width row from 20 to
   44, and margins give it all back — -12 above, and 24 − 12 below, because the
   label already carries the 24 above the Log in button. Nothing moves. Same
   selector as that 24 rule so it wins on order, not on specificity. */
@media (max-width: 47.9375rem) {
	.woocommerce-account .woocommerce #customer_login .woocommerce-form-login__rememberme {
		padding-block: 12px;
		margin-block: -12px calc(var(--wp--preset--spacing--large, 1.5rem) - 12px);
	}
}

/* ═════════════════════════════════════════════════════════════════════════
 * 12. Phone tap targets found by QA batch F (2026-09-28)
 *
 * The round-three review (docs/reports/qa-2026-09-28-review.md) and this
 * batch's own sweep hit-tested the cart with an item, the added-to-cart notice,
 * checkout with Credit Card selected and the logged-out account page at 360 and
 * 390. Every control below owned no 44×44 square. Each fix is a transparent
 * pseudo-element or reserved space and draws nothing, except where a comment
 * says otherwise.
 * ───────────────────────────────────────────────────────────────────────── */

/*
 * N1 — THE FIXED "PROCEED TO CHECKOUT" BAR. Woo's cart.css fixes
 * `.wc-block-cart__submit-container--sticky` to the bottom of the viewport
 * below 783px wide unless the viewport is 500 or less tall: 16 + 48 + 16 = 80.
 * Nothing reserved room for it, so at maximum scroll it sat over the whole
 * footer social row (Facebook to LinkedIn, 24×24 each): real tap area 0,
 * measured at 360 and 390.
 *
 * The page's end gets the bar's 80 as padding under the same two conditions
 * Woo shows it under, so what the bar covers at maximum scroll is empty page,
 * not footer. `:has()` so an empty cart, which has no bar, gets none.
 */
@media (max-width: 782px) and (min-height: 501px) {
	body.woocommerce-cart:has(.wc-block-cart__submit-container--sticky) {
		padding-block-end: 5rem; /* 80 — the bar: 16 + 48 + 16 */
	}
}

@media (max-width: 47.9375rem) {
	/* N6, the notice's "View cart", is in style.css: the notice also renders
	   on the PDP, where this file is not enqueued. */

	/*
	 * THE CART'S STEPPER. §8.3 draws the PDP's house stepper here, 120 × 48
	 * with 20 × 20 − / + and a 24px cell, but never took the PDP's phone tap
	 * targets with it (product-detail.css, "TAP TARGETS ON PHONES", QA batch A).
	 * The round-three review measured it before the Cart block had rendered its
	 * row; this batch's sweep waited for the row: − / + 20×20, the cell 24×24.
	 * The PDP's construction, unchanged: a 44×44 ::after on each button from
	 * the group's inner edge (::before is the glyph), and the cell widened to
	 * 32 with −4 margins and made 48 tall, so the digit stays on its pixel.
	 * Nothing drawn moves. The cell is the PDP's 32×48 — D5, the recorded
	 * exception, applied to the same control on its second surface.
	 */
	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-quantity-selector__button {
		position: relative;
	}

	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-quantity-selector__button::after {
		content: "";
		position: absolute;
		inset-block-start: -12px;
		inset-inline-start: -12px;
		inline-size: 44px;
		block-size: 44px;
	}

	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
		inline-size: 2rem; /* 32 */
		block-size: 3rem; /* 48 */
		margin-inline: -0.25rem;
	}

	/*
	 * CHECKOUT. Three controls from the sweep, all Woo's own:
	 *   - the phone "Order summary" toggle, 28 tall with open space round it;
	 *   - "Terms and Conditions" / "Privacy Policy", 17-tall inline links on one
	 *     line, 33 apart, 63 clear above;
	 *   - "+ Add apartment, suite, etc.", 18 tall between the Address and City
	 *     fields with 12 and 13 of clear space: 43 at most. Its box takes 12
	 *     above and 14 below, so the bottom 1px row overlaps the City field, which
	 *     is 48 tall and keeps 47. `z-index` because that field's wrapper is
	 *     positioned and later in the tree, so it would paint over the overlap.
	 */
	.woocommerce-checkout .wc-block-components-checkout-order-summary__title,
	.woocommerce-checkout .wc-block-checkout__terms a,
	.woocommerce-checkout .wc-block-components-address-form__address_2-toggle {
		position: relative;
	}

	.woocommerce-checkout .wc-block-components-checkout-order-summary__title::before,
	.woocommerce-checkout .wc-block-checkout__terms a::before {
		content: "";
		position: absolute;
		inset-block: min(0px, calc(50% - 22px));
		inset-inline: min(0px, calc(50% - 22px));
	}

	.woocommerce-checkout .wc-block-components-address-form__address_2-toggle::before {
		content: "";
		position: absolute;
		z-index: 1;
		inset-block: -12px -14px;
		inset-inline: 0;
	}

	/*
	 * MY ACCOUNT, logged out: "Lost your password?" (24 clear above it, to Log
	 * in) and the privacy-policy link in the sentence under the form (26 clear
	 * below). Both 17-tall inline links, centred 44.
	 */
	.woocommerce-account .woocommerce .woocommerce-LostPassword a,
	.woocommerce-account .woocommerce .woocommerce-privacy-policy-text a {
		position: relative;
	}

	.woocommerce-account .woocommerce .woocommerce-LostPassword a::before,
	.woocommerce-account .woocommerce .woocommerce-privacy-policy-text a::before {
		content: "";
		position: absolute;
		inset-block: min(0px, calc(50% - 22px));
		inset-inline: min(0px, calc(50% - 22px));
	}
}