/*
 * Commerce CSS ported verbatim from the three signed-off mockups in
 * projects/column-radiator-company/secondary-pages/ :
 *   cart-v3.html            <style> lines 342-562  (shared commerce + PAGE : cart)
 *   checkout.html           <style> lines 342-521  (shared commerce + PAGE : checkout)
 *   order-confirmation.html <style> lines 342-544  (shared commerce + PAGE : order-confirmation)
 *
 * Shared chrome, category components and the :root tokens are NOT repeated here : they
 * live in design.css, which must load first. This file carries the commerce layer only.
 *
 * De-duplicated across the three files. Where they diverged, the signed-off version is
 * kept and the divergence is recorded in the porting notes ; the one rule that genuinely
 * conflicts is scoped to its page (see .ogrid .sum .lock at the foot of this file).
 * None of the three mockups contained a media query, so there are no responsive rules
 * for these selectors to port.
 *
 * ⚠ REQUIRES `<main class="cl commerce">` ON EVERY PAGE THAT LOADS THIS FILE.
 * The mockups scope their page CSS off a bare `.cl`, which the CATEGORY page also uses. Three
 * selector families collided with design.css and would have broken the category page :
 *   .cl .sh   : added 44px of top margin to the filter sidebar header
 *   .cl .line : turned the colours band strapline into a 140px grid with a border
 *   .cl .box  : latent, padded the filter checkbox
 * All three are re-scoped here to `.cl.commerce`. Two defences, both required :
 *   1. this file is enqueued ONLY on the basket, checkout and order-received pages ;
 *   2. the `commerce` class, so it still fails closed if it is ever loaded somewhere else.
 * Also note `.cl .hero .lede { margin-top: 2px }` is a deliberate 2px override of design.css,
 * so this file must load AFTER design.css.
 *
 * Responsive : the mockups have none, so these pages are NOT yet proven at 1024 or 390.
 * That is an open QA item, not a finished state.
 */

  /* ===== SHARED COMMERCE PAGE COMPONENTS ===== */
  .cl .hero .lede { margin-top: 2px; }
  .cl .two { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; align-items: start; padding: 36px 0 64px; }
  .cl .sticky { position: sticky; top: 112px; }

  /* GRID BLOWOUT GUARD, and the reason it is needed rather than obvious.
     `.cl .two` is `minmax(0, 1fr) 400px`, which caps the TRACK but NOT the grid item : an item's
     default `min-width` is `auto`, so its min-content contribution can still exceed the track and
     push the whole grid past its container. Measured on the populated basket : `.container.two`
     reported scrollWidth 1454 against clientWidth 1320, i.e. 134px past its own box, which
     propagated up to a page scrollWidth of 1507 against a 1425 client width.
     The nowrap descendants inside the flexible column are what supply that min-content width, e.g.
     `.line .orow .op` (nowrap, min-width 72px) and the large `.line .lp` figure.
     design.css already uses this same guard on `.mega-inner > *`, so it is house style. */
  .cl .two > * { min-width: 0; }
  .cl.commerce .sh { display: flex; justify-content: space-between; align-items: baseline; margin: 44px 0 16px; }
  .cl.commerce .sh .h2 { font-size: 28px; }
  .cl .h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.2; color: var(--ink); }

  /* order summary card */
  .cl .sum { background: var(--ivory); border: 1px solid var(--line-gold-strong); padding: 26px 28px 28px; }
  .cl .sum .h3 { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
  .cl .sum .row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 14px; color: var(--grey); padding: 10px 0; border-bottom: 1px solid var(--line-gold); }
  .cl .sum .row b { font-weight: 600; color: var(--ink); white-space: nowrap; }
  .cl .sum .row .free { color: #1f6b3a; font-weight: 600; }
  .cl .sum .row s { color: var(--grey-soft); margin-right: 8px; font-weight: 400; }
  .cl .sum .row small { display: block; font-size: 12px; color: var(--grey); margin-top: 2px; }
  .cl .sum .row.total { border-bottom: 0; padding: 16px 0 6px; font-size: 15px; color: var(--ink); font-weight: 500; }
  .cl .sum .row.total b { font-family: var(--sans); font-weight: 700; font-size: 28px; letter-spacing: -0.02em; line-height: 1; display: inline-flex; align-items: baseline; }
  /* WooCommerce's own inclusive-tax suffix must be allowed to WRAP inside the 400px summary rail.
     `wc_cart_totals_order_total_html()` emits `<small class="includes_tax">(includes £x VAT)</small>`
     as a nowrap block, and `.cl .sum .row b` is nowrap too, so a long figure pushes the page wider
     than the viewport. That is what put a populated basket 121px past 1440 once a second suffix was
     stacked beside it. The redundant suffix is gone from cart-totals.php ; this stops WooCommerce's
     own one doing the same thing on a larger cart, where nothing of ours would be involved. */
  /* `white-space: normal` ALONE DOES NOT WORK HERE, and it is worth saying why.
     `.cl .sum .row.total b` is `display: inline-flex`. Flex items do not wrap without `flex-wrap`,
     so the amount and WooCommerce's `small.includes_tax` stayed on one unbreakable flex line no
     matter what white-space said. Measured on one page load : the `b` reached right=1463 against a
     container whose own right edge is 1380 at a 1440 viewport, i.e. 83px OUTSIDE its parent, and the
     page captured 1507 (+67). Removing my duplicate label took it from +121 to +67 ; this takes the
     rest, by letting the flex line break. */
  .cl.commerce .sum .row.total b { flex-wrap: wrap; max-width: 100%; white-space: normal; }
  .cl.commerce .sum small.includes_tax { display: block; width: 100%; white-space: normal; }

  .cl .sum .row.total b small { display: inline; font-size: 11px; font-weight: 500; color: var(--grey); letter-spacing: 0.04em; margin: 0 0 0 8px; }
  .cl .sum .btn { width: 100%; height: 52px; margin-top: 16px; }

  /* THE ORIGIN OF THE 1440 OVERFLOW, found by bisection rather than by theory.
     `.cl .btn` (design.css) is `display: inline-flex` with `padding: 0 24px` and a nowrap label, so
     "Checkout Securely" has a MIN-CONTENT width of 297px. `width: 100%` above sets the used width
     but NOT the min-content contribution, so the element still demanded 297px inside a 190px `.sum`.
     Measured chain, each line a consequence of the one below it :
       a.btn.btn-gold.checkout-button   scrollW 297  clientW 134  overhang 163   <- origin
       div.wc-proceed-to-checkout       297 / 134                                <- core wrapper
       div.sum.cart_totals              325 / 190
       aside.sticky.cart-collaterals    534 / 400
       div.container.two               1454 / 1320
       body                            1507 / 1425
     Fixing `.two` and the total row moved nothing because they were symptoms, not causes.
     Scoped to the summary CTA only : `.cl .btn` is shared with the category, product and secondary
     pages, which all measure 1425 clean and must not be changed. */
  /* `height` becomes `min-height` HERE, because the line above lets the label wrap.
     Measured after the wrap fix : at 1440 the CTA sat in the 400px rail as a 134px box with
     scrollHeight 62 against clientHeight 52, i.e. a two-line "Checkout Securely" CLIPPED by the
     fixed 52px height. 1024 and 390 were unaffected (426px and 337px wide, one line), because
     `.two` collapses below 1024 and the button gets the full container.
     A WIDTH-ONLY CHECK PASSES THIS : all three widths measured clean at 1425/1009/375. It took
     comparing scrollHeight against clientHeight to see it. */
  .cl.commerce .sum .btn { min-width: 0; white-space: normal; padding-left: 12px; padding-right: 12px; text-align: center; height: auto; min-height: 52px; line-height: 1.25; }
  .cl .sum .btn + .btn { margin-top: 10px; }
  .cl .sum .pay { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
  .cl .sum .pay svg { width: 38px; height: 24px; display: block; border-radius: 3px; box-shadow: 0 0 0 1px rgba(13,27,42,0.12); flex-shrink: 0; }
  .cl .sum .lock { display: flex; gap: 7px; align-items: center; justify-content: center; font-size: 11.5px; color: var(--grey); margin-top: 12px; letter-spacing: 0.04em; }
  .cl .sum .lock svg { width: 13px; height: 13px; }
  .cl .sum .assure { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-gold); }
  .cl .sum .assure .a { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; }
  .cl .sum .assure .a svg { width: 20px; height: 20px; color: var(--gold-muted); stroke-width: 1.6; }
  .cl .sum .assure .a span { font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); line-height: 1.2; }

  /* summary items : the basket drawer's item layout at summary width (344px inner) */
  /* summary items : the signed-off checkout layout */
  /* (checkout and order-confirmation defined this block identically : ported once) */
  .cl .sum .sitems { margin-bottom: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--line-gold); }
  .cl .sum .smi { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: start; padding: 0 0 16px; border-bottom: 1px solid var(--line-gold); }
  .cl .sum .smi + .smi { padding-top: 16px; }
  .cl .sum .smi:last-child { border-bottom: 0; padding-bottom: 0; }
  .cl .sum .smi .th { width: 72px; height: 72px; background: #fff; border: 1px solid var(--line-gold); overflow: hidden; }
  .cl .sum .smi .th img { width: 100%; height: 100%; object-fit: cover; }
  .cl .sum .smi .dn { font-family: var(--serif); font-weight: 400; font-size: 17px; color: var(--ink); line-height: 1.2; }
  .cl .sum .smi .specline { font-size: 9px; letter-spacing: 0.06em; gap: 6px 8px; flex-wrap: wrap; justify-content: center; white-space: normal; overflow: visible; line-height: 1; padding: 7px 0; margin-top: 8px; }
  .cl .sum .smi .specline .dv { height: 10px; }
  .cl .sum .smi .specline .dv.eol { display: none; }
  .cl .sum .smi .full { grid-column: 1 / -1; }
  .cl .sum .smi .dopts { display: grid; gap: 0; margin-top: 4px; }
  .cl .sum .smi .opt { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line-gold); line-height: 1.3; }
  .cl .sum .smi .opt:last-child { border-bottom: 0; }
  .cl .sum .smi .opt .ol { font-size: 9px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey); line-height: 1; flex-shrink: 0; }
  .cl .sum .smi .opt .ov { font-size: 12.5px; color: var(--ink); line-height: 1.3; text-align: right; }
  .cl .sum .smi .opt .op { font-size: 11.5px; color: var(--grey); margin-left: 5px; white-space: nowrap; }
  .cl .sum .smi .dfoot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; }
  .cl .sum .smi .dfoot .dq { font-size: 12.5px; color: var(--grey); }
  .cl .sum .smi .dfoot .dq b { font-weight: 600; color: var(--ink); }
  .cl .sum .smi .dp { font-family: var(--sans); font-weight: 700; font-size: 16px; color: var(--ink); white-space: nowrap; letter-spacing: -0.01em; }

  /* compact items inside a summary or the drawer */
  .cl .mini { display: grid; gap: 14px; padding-bottom: 6px; }
  .cl .mini .mi { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
  .cl .mini .mi .th { width: 56px; height: 56px; background: #fff; border: 1px solid var(--line-gold); overflow: hidden; position: relative; }
  .cl .mini .mi .th img { width: 100%; height: 100%; object-fit: cover; }
  .cl .mini .mi .th .q { position: absolute; top: -1px; right: -1px; min-width: 18px; height: 18px; padding: 0 5px; background: var(--ink); color: var(--gold); font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
  .cl .mini .mi .n { font-size: 13.5px; font-weight: 500; color: var(--ink); line-height: 1.3; }
  .cl .mini .mi .s { font-size: 12px; color: var(--grey); margin-top: 2px; line-height: 1.4; }
  .cl .mini .mi .p { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; }

/* line items : v2 / v3 basket line */
  .cl.commerce .lines { border-top: 1px solid var(--ink); }
  .cl.commerce .line { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 28px; padding: 28px 0; border-bottom: 1px solid var(--line-gold); }
  .cl.commerce .line .th { width: 140px; height: 140px; background: #fff; border: 1px solid var(--line-gold); overflow: hidden; }
  .cl.commerce .line .th img { width: 100%; height: 100%; object-fit: cover; }
  .cl.commerce .line .body { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
  .cl.commerce .line .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
  .cl.commerce .line h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; color: var(--ink); line-height: 1.2; }
  .cl.commerce .line .acts { display: flex; align-items: center; gap: 18px; flex-shrink: 0; padding-top: 5px; }
  .cl.commerce .line .edit { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-muted); border-bottom: 1px solid var(--line-gold-strong); padding-bottom: 2px; white-space: nowrap; }
  .cl.commerce .line .edit:hover { color: var(--ink); border-color: var(--ink); }
  .cl.commerce .line .bin { background: none; border: 0; color: var(--grey-soft); display: inline-flex; padding: 2px; cursor: pointer; }
  .cl.commerce .line .bin:hover { color: var(--ink); }
  .cl.commerce .line .bin svg { width: 16px; height: 16px; stroke-width: 1.8; }
  .cl.commerce .line .specline { font-size: 10.5px; gap: 0 12px; letter-spacing: 0.10em; padding: 9px 0; overflow: visible; }
  .cl.commerce .line .specline .dv { height: 13px; }
  .cl.commerce .line .foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-top: 2px; padding-top: 16px; border-top: 1px solid var(--line-gold); }
  .cl.commerce .line .ctl { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .cl.commerce .line .save { display: inline-block; font-size: 12px; font-weight: 600; color: #1f6b3a; background: #eaf5ee; border: 1px solid #cfe7d6; padding: 5px 10px; border-radius: 2px; white-space: nowrap; }
  .cl.commerce .line .addl { display: flex; gap: 18px; margin-top: 10px; }
  .cl.commerce .line .addl a { font-size: 12px; color: var(--grey); }
  .cl.commerce .line .addl a:hover { color: var(--ink); }
  .cl.commerce .line .pricebox { text-align: right; flex-shrink: 0; }
  .cl.commerce .line .rrp { display: block; font-size: 12.5px; color: var(--grey-soft); margin-bottom: 4px; }
  .cl.commerce .line .rrp s { text-decoration: line-through; }
  .cl.commerce .line .lp { font-family: var(--sans); font-weight: 700; font-size: 22px; color: var(--ink); letter-spacing: -0.01em; line-height: 1; white-space: nowrap; }
  .cl.commerce .line .lp small { font-family: var(--sans); font-size: 11px; font-weight: 500; color: var(--grey); letter-spacing: 0.04em; margin-left: 6px; }
  .cl.commerce .line .lp.noRrp { margin-top: 18px; }
  .cl.commerce .line .each { font-size: 12.5px; color: var(--grey); }
  .cl.commerce .line .stock { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-deep); }
  .cl.commerce .line .stock::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #2f8f4a; box-shadow: 0 0 0 3px rgba(47,143,74,0.16); }
  .cl .qty { display: inline-flex; align-items: stretch; border: 1px solid rgba(13,27,42,0.22); border-radius: 2px; height: 42px; background: #fff; }
  .cl .qty button { width: 38px; background: transparent; border: 0; color: var(--ink); font-size: 18px; }
  .cl .qty button:hover { background: var(--ivory); }
  .cl .qty output { width: 42px; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; border-left: 1px solid rgba(13,27,42,0.12); border-right: 1px solid rgba(13,27,42,0.12); }
  .cl .rm { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); background: none; border: 0; }
  .cl .rm:hover { color: var(--ink); }
  .cl .rm svg { width: 13px; height: 13px; }
  .cl .cont { margin-top: 24px; display: flex; justify-content: space-between; align-items: center; }
  .cl .cont .quiet { font-size: 13px; color: var(--grey); }

  /* v3 : option rows, one per line */
  .cl.commerce .line .orows { display: grid; }
  .cl.commerce .line .orow { display: grid; grid-template-columns: 124px minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .cl.commerce .line .orow .ol { font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey); line-height: 1; }
  .cl.commerce .line .orow .ov { font-size: 13.5px; color: var(--ink); line-height: 1.3; min-width: 0; }
  .cl.commerce .line .orow .ov.none { color: var(--grey-soft); }
  .cl.commerce .line .orow .op { font-size: 13px; color: var(--grey); text-align: right; white-space: nowrap; min-width: 72px; }
  .cl.commerce .line .orow .chg { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-muted); border-bottom: 1px solid var(--line-gold-strong); padding-bottom: 1px; }
  .cl.commerce .line .orow .chg:hover { color: var(--ink); border-color: var(--ink); }
  .cl.commerce .line .tags { display: flex; gap: 8px; }
  .cl.commerce .line .tag { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: var(--ink); background: var(--ivory); border: 1px solid var(--line-gold-strong); padding: 5px 10px 5px 12px; border-radius: 2px; }
  .cl.commerce .line .tag .tl { font-size: 9px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-muted); }
  .cl.commerce .line .tag svg { width: 12px; height: 12px; color: var(--grey); stroke-width: 2; }
  .cl.commerce .line .tag:hover svg { color: var(--ink); }

  /* progress steps */
  .cl .steps { display: flex; align-items: center; justify-content: center; }
  .cl .step { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey-soft); white-space: nowrap; }
  .cl .step .n { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-gold-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; letter-spacing: 0; }
  .cl .step .n svg { width: 12px; height: 12px; stroke-width: 3; }
  .cl .step.done { color: var(--ink); }
  .cl .step.done .n { background: var(--ink); color: var(--gold); border-color: var(--ink); }
  .cl .step.on { color: var(--ink); }
  .cl .step.on .n { background: var(--gold); color: var(--ink); border-color: var(--gold); }
  .cl .step + .step::before { content: ''; width: 64px; height: 1px; background: var(--line-gold-strong); margin: 0 16px; }

  /* form sections */
  .cl .fs { border: 1px solid var(--line-gold-strong); background: var(--warm-white); padding: 26px 28px 28px; }
  .cl .fs + .fs { margin-top: 18px; }
  .cl .fs .fh { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line-gold); }
  .cl .fs .fh .h3 .num { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; color: var(--gold-muted); margin-right: 12px; vertical-align: middle; }
  .cl .fs .fh a, .cl .fs .fh .quiet { font-size: 12.5px; color: var(--grey); }
  .cl .fs .fh a { color: var(--gold-muted); text-decoration: underline; text-underline-offset: 3px; }
  .cl .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .cl .frow.three { grid-template-columns: 2fr 1fr 1fr; }
  .cl .frow + .frow, .cl .fld + .frow, .cl .frow + .fld, .cl .fld + .fld { margin-top: 14px; }
  .cl .frow > .fld + .fld { margin-top: 0; }
  .cl .fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .cl .fld label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); }
  .cl .fld input, .cl .fld textarea { font-family: inherit; height: 46px; border: 1px solid rgba(13,27,42,0.22); background: #fff; padding: 0 14px; font-size: 14px; color: var(--ink); border-radius: 2px; outline: none; width: 100%; transition: border-color 0.2s, box-shadow 0.2s; }
  .cl .fld input::placeholder, .cl .fld textarea::placeholder { color: var(--grey-soft); }
  .cl .fld input:focus, .cl .fld textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,169,110,0.18); }
  .cl .fld textarea { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
  .cl .fld .sel select { background: #fff; height: 46px; }
  .cl .fld .hint { font-size: 12px; color: var(--grey); }
  .cl .fs .cb { margin-top: 12px; }

  /* radio cards */
  .cl .rc { display: grid; gap: 10px; }
  .cl .rcard { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 18px; border: 1px solid rgba(13,27,42,0.18); background: #fff; border-radius: 2px; cursor: pointer; }
  .cl .rcard.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; background: #fdf9f0; }
  .cl .rcard .rd { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(13,27,42,0.35); position: relative; background: #fff; }
  .cl .rcard.on .rd { border-color: var(--ink); background: var(--ink); }
  .cl .rcard.on .rd::after { content: ''; position: absolute; left: 5px; top: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
  .cl .rcard .t { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
  .cl .rcard .s { display: block; font-size: 12.5px; color: var(--grey); margin-top: 2px; line-height: 1.45; }
  .cl .rcard .v { font-size: 15px; font-weight: 600; color: var(--ink); white-space: nowrap; text-align: right; }
  .cl .rcard .v small { display: block; font-size: 11px; font-weight: 400; color: var(--grey); margin-top: 2px; }
  .cl .rcard .v .free { color: #1f6b3a; }
  .cl .rcard .v s { color: var(--grey-soft); font-weight: 400; margin-right: 8px; }
  .cl .rcard .logos { display: flex; gap: 6px; }
  .cl .rcard .logos .payment-tile { border: 1px solid var(--line-gold-strong); background: #fff; }
  .cl .rcard .marks { display: flex; gap: 6px; }
  .cl .rcard .marks svg { width: 34px; height: 22px; display: block; border-radius: 3px; box-shadow: 0 0 0 1px rgba(13,27,42,0.12); flex-shrink: 0; }
  .cl .note { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-deep); background: var(--ivory); border: 1px solid var(--line-gold); padding: 12px 14px; margin-top: 12px; line-height: 1.5; }
  .cl .note svg { width: 16px; height: 16px; color: var(--gold-muted); flex-shrink: 0; margin-top: 2px; }
  .cl .note b { font-weight: 600; color: var(--ink); }
  .cl .cardform { margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--line-gold); }

  /* status pills */
  .cl .pill { display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; }
  .cl .pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
  .cl .pill.made { background: #fdf3e0; color: #8a5a1f; border-color: #e8c88f; }
  .cl .pill.ok { background: #eaf5ee; color: #1f6b3a; border-color: #cfe7d6; }
  .cl .pill.ship { background: #e9eef7; color: #2c4a7f; border-color: #c3d1ea; }
  .cl .pill.quiet { background: var(--ivory); color: var(--grey); border-color: var(--line-gold-strong); }

  /* empty state */
  .cl .empty { text-align: center; padding: 60px 40px 56px; border: 1px dashed var(--line-gold-strong); background: var(--ivory); }
  .cl .empty svg { width: 44px; height: 44px; color: var(--gold-muted); stroke-width: 1.2; margin: 0 auto 16px; }
  .cl .empty h3 { font-family: var(--serif); font-weight: 400; font-size: 27px; color: var(--ink); margin-bottom: 8px; }
  .cl .empty p { font-size: 14.5px; color: var(--grey); max-width: 460px; margin: 0 auto 22px; line-height: 1.6; }
  .cl .demo-cap { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-soft); margin: 0 0 12px; }

  /* The REAL quantity input, hidden by CSS rather than by the `hidden` attribute.
   * commerce.js adds `is-enhanced` to the wrapper in the same block that builds the stepper, so
   * this can only apply when a working stepper exists. With JavaScript off the class is never
   * added, the field stays visible, and WooCommerce's own "Update cart" button still works.
   *
   * WHY NOT `[hidden]`. The JS sets it, and it was ignored : `[hidden]` only wins when nothing
   * sets an explicit display, and WooCommerce's `.quantity{float:left}` did. Measured as a stray
   * 48px box beside the stepper. After WooCommerce's stylesheets were dequeued it did not vanish,
   * it grew to 183px, because the rule that had been CONSTRAINING it was the same one overriding
   * the attribute. The dequeue did not cause this defect, it revealed how weak the hiding was.
   */
  .cl.commerce .line .quantity.is-enhanced input.qty { display: none; }

  /* ---------- NOTICES ----------
   * REQUIRED BY THE DEQUEUE, not a nicety. inc/setup.php now drops WooCommerce's stylesheets on the
   * basket, and they were the only thing styling `.woocommerce-error`, `-message` and `-info`.
   * The basket genuinely shows these : "Choose your options before adding this radiator." appears
   * whenever a configured product is added without options, and the empty-basket panel nests
   * WooCommerce's own "Your cart is currently empty" inside it.
   * Removing the stylesheet without this would have traded three defects for a fourth.
   */
  .cl.commerce .woocommerce-error,
  .cl.commerce .woocommerce-message,
  .cl.commerce .woocommerce-info,
  .cl.commerce .wc-empty-cart-message .cart-empty {
    list-style: none;
    margin: 0 0 20px;
    padding: 14px 18px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink-deep);
    background: var(--ivory);
    border: 1px solid var(--line-gold-strong);
    border-left: 3px solid var(--gold);
    border-radius: 2px;
  }
  .cl.commerce .woocommerce-error { border-left-color: #a8322f; }
  .cl.commerce .woocommerce-error li { margin: 0; }
  .cl.commerce .woocommerce-message a,
  .cl.commerce .woocommerce-info a { color: var(--gold-muted); border-bottom: 1px solid var(--line-gold-strong); }
  .cl.commerce .woocommerce-notices-wrapper:empty { display: none; }

  /* ===== PAGE : cart ===== */

  /* basket drawer mockup : a dimmed page replica with the slide-in panel over it */
  .cl .drawer-sec { background: var(--ivory); border-top: 1px solid var(--line-gold); padding: 48px 0 64px; }
  .cl .demo { position: relative; height: 1090px; overflow: hidden; border: 1px solid var(--line-gold-strong); background: var(--warm-white); }
  .cl .demo .fake { position: absolute; inset: 0; }
  .cl .demo .fake .fbar { height: 64px; background: var(--ink); border-bottom: 1px solid var(--gold); }
  .cl .demo .fake .fhero { height: 120px; background: var(--ivory); border-bottom: 1px solid var(--line-gold); }
  .cl .demo .fake .fgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; padding: 32px 48px; }
  .cl .demo .fake .fgrid div { aspect-ratio: 1 / 1.3; background: #fff; border: 1px solid var(--line-gold); }
  .cl .demo .dim { position: absolute; inset: 0; background: rgba(13,27,42,0.55); }
  .cl .drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 440px; background: var(--warm-white); box-shadow: -24px 0 48px -24px rgba(13,27,42,0.45); display: flex; flex-direction: column; }
  .cl .drawer .dh { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--ink); }
  .cl .drawer .dh .h3 { font-size: 21px; }
  .cl .drawer .dh .h3 span { color: var(--gold-muted); font-family: var(--sans); font-size: 13px; font-weight: 600; margin-left: 8px; letter-spacing: 0.08em; }
  .cl .drawer .dh button { background: none; border: 0; color: var(--ink); }
  .cl .drawer .db { padding: 20px 24px; flex: 1; overflow: auto; }
  /* drawer items : image left, configured detail right */
  .cl .drawer .dmi { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; align-items: start; padding: 0 0 18px; border-bottom: 1px solid var(--line-gold); }
  .cl .drawer .dmi + .dmi { padding-top: 18px; }
  .cl .drawer .dmi .th { width: 110px; height: 110px; background: #fff; border: 1px solid var(--line-gold); overflow: hidden; }
  .cl .drawer .dmi .th img { width: 100%; height: 100%; object-fit: cover; }
  .cl .drawer .dmi .dn { font-family: var(--serif); font-weight: 400; font-size: 17px; color: var(--ink); line-height: 1.2; }
  .cl .drawer .dmi .specline { font-size: 9px; letter-spacing: 0.06em; gap: 6px 8px; flex-wrap: wrap; justify-content: center; white-space: normal; overflow: visible; line-height: 1; padding: 7px 0; margin-top: 8px; }
  .cl .drawer .dmi .specline .dv.eol { display: none; }
  .cl .drawer .dmi .specline .dv { height: 10px; }
  .cl .drawer .dmi .full { grid-column: 1 / -1; }
  .cl .drawer .dmi .dopts { display: grid; gap: 0; margin-top: 4px; }
  .cl .drawer .dmi .opt { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line-gold); line-height: 1.3; }
  .cl .drawer .dmi .opt:last-child { border-bottom: 0; }
  .cl .drawer .dmi .opt .ol { font-size: 9px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey); line-height: 1; flex-shrink: 0; }
  .cl .drawer .dmi .opt .ov { font-size: 12.5px; color: var(--ink); line-height: 1.3; text-align: right; }
  .cl .drawer .dmi .opt .op { font-size: 11.5px; color: var(--grey); margin-left: 5px; white-space: nowrap; }
  .cl .drawer .dmi .edit { display: inline-block; justify-self: start; margin-top: 8px; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-muted); border-bottom: 1px solid var(--line-gold-strong); padding-bottom: 2px; }
  .cl .drawer .dmi .edit:hover { color: var(--ink); border-color: var(--ink); }
  .cl .drawer .dmi .dn { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
  .cl .drawer .dmi .dbin { background: none; border: 0; color: var(--grey); padding: 2px; margin: -2px -2px 0 0; cursor: pointer; }
  .cl .drawer .dmi .dbin svg { width: 16px; height: 16px; }
  .cl .drawer .dmi .dbin:hover { color: var(--ink); }
  .cl .drawer .dmi .dlinks { display: flex; gap: 8px; align-items: center; margin-top: 8px; font-size: 11px; color: var(--grey); }
  .cl .drawer .dmi .dlinks a { color: var(--gold-muted); font-weight: 500; text-decoration: none; }
  .cl .drawer .dmi .dlinks a:hover { color: var(--ink); }
  .cl .drawer .dmi .dfoot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; }
  .cl .drawer .dmi .qty { height: 32px; }
  .cl .drawer .dmi .qty button { width: 28px; font-size: 15px; }
  .cl .drawer .dmi .qty output { width: 32px; font-size: 12.5px; }
  .cl .drawer .dmi .dp { font-family: var(--sans); font-weight: 700; font-size: 16px; color: var(--ink); white-space: nowrap; letter-spacing: -0.01em; }
  .cl .drawer .dmi .s { font-size: 12px; color: var(--grey); margin-top: 4px; line-height: 1.4; }
  .cl .drawer .dmi:last-child { border-bottom: 0; padding-bottom: 0; }
  .cl .drawer .df { padding: 16px 24px 22px; border-top: 1px solid var(--line-gold-strong); background: var(--ivory); }
  .cl .drawer .df .ship { display: flex; gap: 8px; align-items: center; font-size: 11.5px; color: var(--grey); line-height: 1.4; margin-bottom: 10px; }
  .cl .drawer .df .ship svg { width: 14px; height: 14px; color: var(--gold-muted); flex-shrink: 0; stroke-width: 1.8; }
  .cl .drawer .df .row { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--grey); }
  .cl .drawer .df .row b { font-family: var(--sans); font-weight: 700; font-size: 22px; color: var(--ink); letter-spacing: -0.01em; }
  .cl .drawer .df .vat { font-size: 11.5px; color: var(--grey); margin-top: 2px; }
  .cl .drawer .df .btn { width: 100%; height: 48px; margin-top: 14px; }
  .cl .drawer .df .cs { text-align: center; margin-top: 14px; }
  .cl .drawer .df .cs a { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); border-bottom: 1px solid var(--line-gold-strong); padding-bottom: 3px; }

  /* ===== PAGE : checkout ===== */

  .cl .hero.co { padding: 22px 0 26px; }
  .cl .hero.co .steps { margin-top: 22px; }
  .cl .hero.co .title { margin-bottom: 0; }
  .cl .two.co { padding-top: 32px; }
  .cl .fs .signin { font-size: 12.5px; color: var(--grey); }
  .cl .fs .signin a { color: var(--gold-muted); text-decoration: underline; text-underline-offset: 3px; }

  /* postcode lookup at the top of the address block */
  .cl .lookup { display: flex; gap: 10px; align-items: flex-end; }
  .cl .lookup .fld { flex: 1; }
  .cl .lookup .btn { height: 46px; flex-shrink: 0; }
  .cl .manual { font-size: 12px; color: var(--grey); margin: 12px 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line-gold); }

  /* delivery : one fixed line, not a choice */
  .cl .dline { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid rgba(13,27,42,0.18); background: #fff; border-radius: 2px; }
  .cl .dline svg { width: 22px; height: 22px; color: var(--gold-muted); stroke-width: 1.8; flex-shrink: 0; }
  .cl .dline .t { flex: 1; font-size: 14px; font-weight: 600; color: var(--ink); }
  .cl .dline .v { font-size: 15px; font-weight: 600; color: var(--ink); white-space: nowrap; }
  .cl .dline .v s { color: var(--grey-soft); font-weight: 400; margin-right: 8px; }
  .cl .dline .v .free { color: #1f6b3a; }
  .cl .promo { display: flex; gap: 0; margin: 12px 0 2px; border: 1px solid rgba(13,27,42,0.22); background: #fff; }
  .cl .promo input { flex: 1; min-width: 0; height: 40px; border: 0; padding: 0 12px; font-size: 13px; outline: none; background: transparent; color: var(--ink); }
  .cl .promo button { height: 40px; padding: 0 14px; border: 0; border-left: 1px solid rgba(13,27,42,0.22); background: var(--ivory); font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }

  /* ===== PAGE : order-confirmation ===== */

  .cl .thanks { text-align: center; padding: 56px 0 40px; background: var(--ivory); border-bottom: 1px solid var(--line-gold); }
  .cl .thanks .tick { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--gold); color: var(--gold); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px; }
  .cl .thanks .tick svg { width: 28px; height: 28px; }
  .cl .thanks h1 { font-family: var(--serif); font-weight: 400; font-size: 44px; line-height: 1.1; color: var(--ink); margin: 8px 0 14px; letter-spacing: -0.005em; }
  .cl .thanks p { font-size: 15.5px; color: var(--grey); max-width: 620px; margin: 0 auto; line-height: 1.7; }
  .cl .thanks .on { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-top: 26px; border: 1px solid var(--line-gold-strong); background: var(--warm-white); }
  .cl .thanks .on > span { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 16px 36px 17px; border-left: 1px solid var(--line-gold); white-space: nowrap; }
  .cl .thanks .on > span:first-child { border-left: 0; }
  .cl .thanks .on .ml { font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-muted); line-height: 1; }
  .cl .thanks .on b { font-family: var(--sans); font-weight: 600; font-size: 15px; color: var(--ink); line-height: 1.2; }
  .cl .ogrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; padding: 44px 0 56px; }
  .cl.commerce .box { border: 1px solid var(--line-gold-strong); background: var(--warm-white); padding: 22px 26px 24px; }
  .cl.commerce .box + .box { margin-top: 18px; }
  .cl.commerce .box .bh { font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-muted); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line-gold); display: flex; justify-content: space-between; }
  .cl.commerce .box .bh a { font-size: 11px; color: var(--grey); letter-spacing: 0.04em; text-transform: none; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
  .cl.commerce .box p { font-size: 14px; color: var(--ink-deep); line-height: 1.7; }
  .cl.commerce .box p b { font-weight: 600; color: var(--ink); }
  .cl.commerce .box .mini .mi { align-items: start; }
  .cl.commerce .box .mini .mi .th { width: 64px; height: 64px; }
  .cl.commerce .box .rows { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--line-gold); }
  .cl.commerce .box .rows .row { display: flex; justify-content: space-between; font-size: 14px; color: var(--grey); padding: 7px 0; }
  .cl.commerce .box .rows .row b { color: var(--ink); font-weight: 600; }
  .cl.commerce .box .rows .row .free { color: #1f6b3a; font-weight: 600; }
  .cl.commerce .box .rows .row.total { border-top: 1px solid var(--line-gold); margin-top: 6px; padding-top: 14px; color: var(--ink); font-weight: 500; }
  .cl.commerce .box .rows .row.total b { font-family: var(--sans); font-weight: 700; font-size: 24px; letter-spacing: -0.02em; }
  .cl.commerce .box .rows .vat { font-size: 12px; color: var(--grey); }
  .cl .apair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
  .cl .apair .box { padding: 22px 24px 24px; }
  .cl .apair .box + .box { margin-top: 0; }
  .cl .apair + .box { margin-top: 18px; }
  .cl.commerce .box .kv { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 14px; padding: 6px 0; }
  .cl.commerce .box .kv .kl { color: var(--grey); flex-shrink: 0; }
  .cl.commerce .box .kv .kvv { color: var(--ink); font-weight: 500; text-align: right; overflow-wrap: anywhere; }
  .cl .ctas2 { display: grid; gap: 10px; margin-top: 20px; }
  .cl .ctas2 .btn { width: 100%; height: 50px; }
  .cl .helpbox { font-size: 13.5px; color: var(--grey); line-height: 1.6; }
  .cl .helpbox b { color: var(--ink); font-weight: 600; }
  .cl .helpbox a { color: var(--gold-muted); border-bottom: 1px solid var(--line-gold-strong); }
  .cl .invite { background: var(--ivory); border-top: 1px solid var(--line-gold); padding: 44px 0; text-align: center; }
  .cl .invite svg { width: 30px; height: 30px; color: var(--gold-muted); stroke-width: 1.4; margin: 0 auto 10px; }
  .cl .invite .h2 { font-size: 28px; margin: 4px 0 10px; }
  .cl .invite p { font-size: 14.5px; color: var(--grey); max-width: 640px; margin: 0 auto 18px; line-height: 1.6; }

  /* order summary card : order-confirmation-only additions (its .sum sits inside .ogrid) */
  .cl .sum .h3.sh2 { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
  .cl .sum .h3.sh2 a { font-family: var(--sans); font-size: 11px; color: var(--grey); letter-spacing: 0.04em; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
  .cl .sum .vatline { font-size: 12px; color: var(--grey); padding-bottom: 14px; border-bottom: 1px solid var(--line-gold); }
  .cl .sum .paylogos { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
  .cl .sum .paylogos .payment-tile { background: #fff; border: 1px solid var(--line-gold-strong); }
  .cl .sum .tlist { list-style: none; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-gold); display: grid; gap: 9px; }
  .cl .sum .tlist li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-deep); }
  .cl .sum .tlist li svg { width: 16px; height: 16px; color: var(--gold-muted); flex-shrink: 0; stroke-width: 2; }
  /* DIVERGENCE : order-confirmation ran .lock at gap 8px / margin-top 14px, cart and
     checkout at 7px / 12px. The 7/12 version is the shared base above ; the 8/14 version
     is scoped to this page here rather than silently overriding the other two. */
  .cl .ogrid .sum .lock { gap: 8px; margin-top: 14px; }

  /* ---------- RESPONSIVE : built, not ported ----------
   * The three commerce mockups contain NO media query at all (see this file's header), so 1024 and
   * 390 are unproven by construction. That is exactly how four mobile overflow faults appeared on
   * the secondary pages, so these are designed deliberately rather than discovered afterwards.
   * Verified by measuring the captured PNG width against the requested viewport, because the DOM
   * check (scrollWidth - innerWidth) returned 0 for pages that genuinely overflowed.
   */

  /* The summary rail stops being a rail. On the basket it follows the lines ; ordering is left
     alone so the reading order matches the DOM order. */
  /* ---------- CONFIRMATION : responsive, BUILT not ported ----------
   * order-confirmation.html carries no media query at all, so 1024 and 390 are unproven by
   * construction on this page exactly as they were on the basket. Designed deliberately here
   * rather than discovered in a capture afterwards.
   *
   * `.thanks .on` is the real risk : it is `grid-auto-flow: column` with FIVE meta cells
   * (order number, date, payment method, total, status), which cannot fit 390 as one row.
   */
  @media (max-width: 1024px) {
    .cl .ogrid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .cl .thanks .on { grid-auto-flow: row; grid-auto-columns: auto; }
    .cl .thanks .on > span { border-left: 0; border-top: 1px solid var(--line-gold); padding: 14px 24px; }
    .cl .thanks .on > span:first-child { border-top: 0; }
  }
  @media (max-width: 640px) {
    .cl .thanks { padding: 40px 0 30px; }
    .cl .thanks h1 { font-size: 32px; }
    .cl .thanks .on { display: grid; width: 100%; }
    .cl .apair { grid-template-columns: minmax(0, 1fr); }
    .cl .ctas2 .btn { width: 100%; }
  }

  @media (max-width: 1024px) {
    .cl.commerce .two { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .cl.commerce .sticky { position: static; }
  }

  /* The line stacks : the 140px thumbnail becomes a band above the body rather than a column. */
  @media (max-width: 640px) {
    .cl.commerce .line { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 22px 0; }
    .cl.commerce .line .th { width: 120px; height: 120px; }
    .cl.commerce .line .top { flex-direction: column; gap: 10px; }
    .cl.commerce .line .acts { padding-top: 0; }
    /* 124px label + value + price + Change cannot fit 390. Label above, value and price below. */
    .cl.commerce .line .orow { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
    .cl.commerce .line .orow .ol { grid-column: 1 / -1; }
    .cl.commerce .line .foot { flex-direction: column; align-items: stretch; gap: 14px; }
    .cl.commerce .line .pricebox { text-align: left; }
    .cl.commerce .line .lp.noRrp { margin-top: 0; }
    .cl.commerce .actions { flex-direction: column; align-items: stretch; gap: 12px; }
    .cl.commerce .actions .upd { width: 100%; }
  }

  /* The summary card's own padding is generous for a 390 viewport. */
  @media (max-width: 400px) {
    .cl.commerce .sum { padding: 20px 18px 22px; }
    .cl.commerce .sum .row.total b { font-size: 24px; }
  }

  /* ------------------------------------------------------------------ checkout
   * The signed-off checkout.html carries NO media query, exactly like the basket and the
   * confirmation, so 1024 and 390 are unproven by construction and are designed here rather than
   * discovered in a capture.
   *
   * `.cl.commerce .two` already collapses at <=1024 and `.two.co` inherits it, because `.co` is an
   * additional class rather than a replacement. What does NOT exist anywhere in this stylesheet is
   * any `order:` rule : on a phone the customer meets a long address form before ever seeing what
   * they are paying, so the summary is moved above it.
   */
  @media (max-width: 1024px) {
    .cl.commerce .two.co > aside { order: -1; }
    .cl.commerce .two.co { display: flex; flex-direction: column; }
  }

  /* The review table is a real <table> because wc_cart_totals_shipping_html() emits <tr><th><td>
     and a <tr> inside a <div> is reparented by the parser, which would move the shipping radios and
     the hidden single-rate input out of the summary. It is dressed to read as the design's card
     list instead of being rebuilt as divs. */
  .cl .sum table.woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; }
  .cl .sum .woocommerce-checkout-review-order-table .sitems td.product-name { padding: 0; border: 0; }
  .cl .sum .woocommerce-checkout-review-order-table tfoot th { text-align: left; font-weight: 400; font-size: 14px; color: var(--grey); padding: 10px 0; border-bottom: 1px solid var(--line-gold); }
  .cl .sum .woocommerce-checkout-review-order-table tfoot td { text-align: right; padding: 10px 0; border-bottom: 1px solid var(--line-gold); }
  .cl .sum .woocommerce-checkout-review-order-table tfoot tr.total th,
  .cl .sum .woocommerce-checkout-review-order-table tfoot tr.total td { border-bottom: 0; padding-top: 16px; color: var(--ink); }
  .cl .sum .woocommerce-checkout-review-order-table tfoot tr.total td b { font-family: var(--sans); font-weight: 700; font-size: 28px; letter-spacing: -0.02em; line-height: 1; display: inline-flex; align-items: baseline; flex-wrap: wrap; max-width: 100%; white-space: normal; }
  /* Core's shipping row carries a <ul> of rates. Strip the list furniture, keep the controls. */
  .cl .sum .woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; }
  .cl .sum .woocommerce-shipping-methods li { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
  .cl .sum .woocommerce-shipping-methods label { font-size: 14px; color: var(--ink); }

  /* The payment fieldset is core's markup inside the design's .fs shell. */
  .cl.commerce .co-payment .woocommerce-checkout-payment ul.payment_methods { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
  .cl.commerce .co-payment .woocommerce-checkout-payment .payment_box { font-size: 13px; color: var(--grey); background: var(--ivory); border: 1px solid var(--line-gold); padding: 12px 14px; margin: 8px 0 0; }
  .cl.commerce .co-payment .place-order { margin-top: 18px; }
  /* Same min-content trap as the basket CTA : inline-flex + nowrap made a 297px button demand more
     room than its 190px box and pushed the page 121px past 1440. Scoped to the checkout button. */
  .cl.commerce .co-payment #place_order { min-width: 0; white-space: normal; text-align: center; height: auto; min-height: 52px; line-height: 1.25; width: 100%; }