/* ===========================================================================
   CART + CHECKOUT — skin over WooCommerce's cart/checkout blocks.

   Layout ported from app/checkout/checkout-v2-client.tsx:
     header  grid  lg:[minmax(0,56fr) minmax(0,44fr)], 64px bar
     main    grid  lg:[minmax(0,56fr) minmax(0,44fr)]
     form    max-w-[42rem], ml-auto, py-8 → lg:py-10, pl-8 pr-12 xl:pr-16
     summary rail bg, border-left, sticky top-0, max-w-[33rem], px-8 py-10
   The FORM ITSELF is Woo's block checkout — its validation/shipping/payment
   machinery is deliberately untouched.

   ⚠️ CONTROL METRICS ARE LITERAL HERE, NOT TOKENS. The theme's radius scale
   (--radius-lg = 6px) and --border-strong (24% ink) are tuned for marketing
   surfaces; on a commerce form they read as stock WordPress. Shopify-grade
   controls need 10–12px radii and a QUIETER ~15% hairline, so this file pins
   its own `--cko-*` scale rather than bending the global tokens.

   ⚠️ THE SCALE IS DECLARED ON BOTH PAGES ON PURPOSE. Cart and checkout are one
   funnel and a buyer sees them back to back; when only one of them carried the
   scale, the two surfaces drifted (4.8px cart controls against 10px checkout
   ones). Add a control to either page and it inherits the same language.
   =========================================================================== */

body.ms-checkout-page,
body.ms-cart-page {
  --cko-radius: 0.625rem;        /* inputs, thumbnails, quantity stepper */
  --cko-radius-lg: 0.75rem;      /* option groups, buttons, cards */
  --cko-white: oklch(1 0 0);
  --cko-field-border: color-mix(in oklab, var(--foreground) 15%, transparent);
  --cko-field-border-hover: color-mix(in oklab, var(--foreground) 30%, transparent);
  --cko-rail-bg: color-mix(in oklab, var(--foreground) 2.5%, var(--background));
  --cko-brand-tint: color-mix(in oklab, var(--brand) 5%, var(--cko-white));
  --cko-focus-ring: 0 0 0 3px color-mix(in oklab, var(--brand) 18%, transparent);
}

/* ---- checkout chrome ------------------------------------------------------ */
.cko-header { border-bottom: 1px solid var(--border); background: var(--background); }
.cko-header__grid, .cko-footer__grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 1024px) {
  .cko-header__grid, .cko-footer__grid { grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); }
}
.cko-header__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  height: 4rem; width: 100%; max-width: 42rem; margin-inline: auto;
  padding-inline: 1.25rem;
}
@media (min-width: 640px) { .cko-header__bar { padding-inline: 2rem; } }
@media (min-width: 1024px) {
  .cko-header__bar { margin-right: 0; margin-left: auto; padding-left: 2rem; padding-right: 3rem; }
}
@media (min-width: 1280px) { .cko-header__bar { padding-right: 4rem; } }
.cko-header__secure {
  display: inline-flex; align-items: center; gap: 0.4375rem; margin: 0;
  font-size: 0.8125rem; color: var(--ink-3);
}
.cko-header__secure svg { color: var(--stock-in); }

.cko-footer { border-top: 1px solid var(--border); margin-top: auto; }
.cko-footer__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem; width: 100%; max-width: 42rem; margin-inline: auto;
  padding: 1.5rem 1.25rem 2.5rem;
}
@media (min-width: 640px) { .cko-footer__bar { padding-inline: 2rem; } }
@media (min-width: 1024px) {
  .cko-footer__bar { margin-right: 0; margin-left: auto; padding-left: 2rem; padding-right: 3rem; }
}
.cko-footer__legal { margin: 0; font-size: 0.75rem; color: var(--ink-4); }
.cko-footer__links { display: flex; flex-wrap: wrap; gap: 1rem; }
.cko-footer__links a {
  font-size: 0.75rem; color: var(--ink-3); text-decoration: none;
  transition: color 150ms var(--ease-out-quart);
}
.cko-footer__links a:hover { color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; }

/* ---- the 56/44 split ------------------------------------------------------ */
/* Gutenberg block-gap AND WC's own 24px block padding put cream between the
   header rule and the split — the rail must MEET the header, like Shopify's */
body.ms-checkout-page .wp-block-woocommerce-checkout { margin-block: 0; padding: 0; }
body.ms-checkout-page .wc-block-components-sidebar-layout {
  display: grid; grid-template-columns: 1fr; gap: 0; align-items: start;
  margin: 0;
}
@media (min-width: 1024px) {
  body.ms-checkout-page .wc-block-components-sidebar-layout {
    grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
  }
}
/* Woo's own float/width rules fight the grid — neutralise them */
body.ms-checkout-page .wc-block-components-main,
body.ms-checkout-page .wc-block-components-sidebar {
  width: auto; max-width: none; float: none; padding: 0; margin: 0;
}

body.ms-checkout-page .wc-block-components-main {
  width: 100%; max-width: 42rem; margin-inline: auto;
  padding: 2rem 1.25rem;
}
@media (min-width: 640px) { body.ms-checkout-page .wc-block-components-main { padding-inline: 2rem; } }
@media (min-width: 1024px) {
  body.ms-checkout-page .wc-block-components-main {
    margin-right: 0; margin-left: auto;
    padding: 2.5rem 3rem 2.5rem 2rem;
  }
}
@media (min-width: 1280px) { body.ms-checkout-page .wc-block-components-main { padding-right: 4rem; } }

body.ms-checkout-page .wc-block-components-sidebar {
  background: var(--cko-rail-bg);
  border-top: 1px solid var(--border);
}
@media (min-width: 1024px) {
  body.ms-checkout-page .wc-block-components-sidebar {
    position: sticky; top: 0; align-self: start;
    border-top: none; border-left: 1px solid var(--border);
    min-height: 100vh;
  }
}

/* ⚠️ The rail's inner width/padding lives on the ORDER-SUMMARY BLOCK, never on
   a blanket `sidebar > *`. Woo mounts two NOTICE containers before the summary
   — both usually empty — and a blanket child padding turns each into an 80px
   blank band above the card. */
body.ms-checkout-page .wc-block-components-sidebar > * { padding: 0; }

body.ms-checkout-page .wp-block-woocommerce-checkout-order-summary-block {
  width: 100%; max-width: 33rem; margin-right: auto;
  /* 1.5rem, not the form's 2.5rem — the two title BASELINES align across the
     split (the headings differ in size), measured live at 1440 */
  padding: 1.5rem 2rem 3rem;
  /* WC 11 draws its own bordered, rounded card here — a box inside the rail's
     box. The rail IS the surface; the card dies. */
  border: none; border-radius: 0; background: transparent;
}
@media (min-width: 1280px) {
  body.ms-checkout-page .wp-block-woocommerce-checkout-order-summary-block { padding-inline: 2.75rem; }
}
/* a REAL notice (payment error etc.) still gets room when one exists */
body.ms-checkout-page .wc-block-components-sidebar .wc-block-components-notices:has(*) {
  padding: 1.5rem 2rem 0; max-width: 33rem;
}

/* ---- checkout steps ------------------------------------------------------- */
body.ms-checkout-page .wc-block-components-checkout-step {
  border: none; padding: 0; margin-bottom: 2.5rem;
}
body.ms-checkout-page .wc-block-components-checkout-step__title {
  font-family: inherit; font-size: 1.125rem; line-height: 1.35;
  font-weight: 600; letter-spacing: -0.01em; color: var(--foreground);
}
body.ms-checkout-page .wc-block-components-checkout-step__heading { margin: 0 0 0.875rem; }
body.ms-checkout-page .wc-block-components-checkout-step__description {
  color: var(--ink-3); font-size: 0.8125rem; line-height: 1.5; margin: 0.375rem 0 0.75rem;
}
body.ms-checkout-page .wc-block-components-checkout-step__heading-content { color: var(--ink-3); font-size: 0.8125rem; }
/* an empty express-payment mount must not leave a gap */
body.ms-checkout-page .wp-block-woocommerce-checkout-express-payment-block:empty { display: none; }

/* ---- fields --------------------------------------------------------------- */
/* ⚠️ THE `input[type=…]` VARIANTS ARE LOAD-BEARING, NOT VERBOSITY. WC core
   styles text inputs as `.wc-block-components-text-input input[type="text"]`
   (etc.) — an attribute selector that outguns a bare `… input` on specificity.
   The SELECTS have no such variant, which is exactly why they took the restyle
   while text inputs silently kept WC's dark 4px look. Every state below must
   carry the typed variants or inputs and selects drift apart again. */
body.ms-checkout-page .wc-block-components-text-input input,
body.ms-checkout-page .wc-block-components-text-input input[type="text"],
body.ms-checkout-page .wc-block-components-text-input input[type="email"],
body.ms-checkout-page .wc-block-components-text-input input[type="tel"],
body.ms-checkout-page .wc-block-components-text-input input[type="number"],
body.ms-checkout-page .wc-block-components-text-input input[type="url"],
body.ms-checkout-page .wc-block-components-text-input input[type="password"],
body.ms-checkout-page .wc-block-components-textarea,
body.ms-checkout-page .wc-blocks-components-select__select,
body.ms-cart-page .wc-block-components-text-input input,
body.ms-cart-page .wc-block-components-text-input input[type="text"] {
  height: 3.25rem; border-radius: var(--cko-radius);
  border: 1px solid var(--cko-field-border);
  background: var(--cko-white);
  color: var(--foreground); font-family: inherit; font-size: 0.9375rem;
  box-shadow: 0 1px 2px color-mix(in oklab, var(--foreground) 3%, transparent);
  transition: border-color 150ms var(--ease-out-quart), box-shadow 150ms var(--ease-out-quart);
}
body.ms-checkout-page .wc-block-components-text-input input:hover,
body.ms-checkout-page .wc-block-components-text-input input[type="text"]:hover,
body.ms-checkout-page .wc-block-components-text-input input[type="email"]:hover,
body.ms-checkout-page .wc-block-components-text-input input[type="tel"]:hover,
body.ms-checkout-page .wc-block-components-text-input input[type="number"]:hover,
body.ms-checkout-page .wc-block-components-text-input input[type="url"]:hover,
body.ms-checkout-page .wc-block-components-text-input input[type="password"]:hover,
body.ms-checkout-page .wc-blocks-components-select__select:hover,
body.ms-checkout-page .wc-block-components-textarea:hover,
body.ms-cart-page .wc-block-components-text-input input:hover {
  border-color: var(--cko-field-border-hover);
}
body.ms-checkout-page .wc-block-components-text-input input:focus,
body.ms-checkout-page .wc-block-components-text-input input[type="text"]:focus,
body.ms-checkout-page .wc-block-components-text-input input[type="email"]:focus,
body.ms-checkout-page .wc-block-components-text-input input[type="tel"]:focus,
body.ms-checkout-page .wc-block-components-text-input input[type="number"]:focus,
body.ms-checkout-page .wc-block-components-text-input input[type="url"]:focus,
body.ms-checkout-page .wc-block-components-text-input input[type="password"]:focus,
body.ms-checkout-page .wc-block-components-textarea:focus,
body.ms-checkout-page .wc-blocks-components-select__select:focus,
body.ms-cart-page .wc-block-components-text-input input:focus {
  border-color: var(--brand);
  box-shadow: var(--cko-focus-ring);
  outline: none;
}
body.ms-checkout-page .wc-block-components-text-input label,
body.ms-checkout-page .wc-blocks-components-select__label {
  color: var(--ink-3); font-family: inherit; font-size: 0.9375rem;
}
body.ms-checkout-page .wc-block-components-text-input.is-active label,
body.ms-checkout-page .wc-blocks-components-select.is-active .wc-blocks-components-select__label {
  color: var(--ink-3); font-size: 0.75rem;
}
/* tight Shopify field rhythm — Woo's default gaps read airy and unrelated */
body.ms-checkout-page .wc-block-components-text-input,
body.ms-checkout-page .wc-blocks-components-select,
body.ms-checkout-page .wc-block-components-country-input,
body.ms-checkout-page .wc-block-components-state-input {
  margin-top: 0.75rem;
}
/* ⚠️ The select's CONTAINER paints its own WHITE box at WC's 4px radius,
   BEHIND the 10px-rounded select — square white corners bleed out past every
   rounded corner. Transparent, not re-rounded: the select itself is the only
   layer that may paint, and nothing here may clip (overflow would amputate the
   focus ring). */
body.ms-checkout-page .wc-blocks-components-select__container {
  background: transparent; border: none; border-radius: var(--cko-radius);
}
body.ms-checkout-page .wc-blocks-components-select__expander { color: var(--ink-3); }

/* ---- address form — an OWNED grid, not stacked margins ---------------------
   Woo lays address fields out with per-field margins that resolve differently
   for text-input and select wrappers, so paired rows (City/State) drift out of
   alignment. A real grid makes every row share one top edge and one gap. */
body.ms-checkout-page .wc-block-components-address-form {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem; align-items: start;
}
body.ms-checkout-page .wc-block-components-address-form > * {
  grid-column: 1 / -1; margin: 0; min-width: 0;
}
/* the select COMPONENT nests one level below the grid child, so the global
   field-rhythm margin survives the `> *` reset and makes select rows 12px
   taller than input rows — inside the grid, the gap is the only spacing */
body.ms-checkout-page .wc-block-components-address-form .wc-blocks-components-select,
body.ms-checkout-page .wc-block-components-address-form .wc-block-components-text-input,
body.ms-checkout-page .wc-block-components-address-form .wc-block-components-country-input,
body.ms-checkout-page .wc-block-components-address-form .wc-block-components-state-input {
  margin: 0;
}
body.ms-checkout-page .wc-block-components-address-form__first_name,
body.ms-checkout-page .wc-block-components-address-form__last_name,
body.ms-checkout-page .wc-block-components-address-form__city,
body.ms-checkout-page .wc-block-components-address-form__state,
body.ms-checkout-page .wc-block-components-address-form__postcode,
body.ms-checkout-page .wc-block-components-address-form__phone {
  grid-column: span 1;
}
body.ms-checkout-page .wc-block-components-address-form__address_2-toggle {
  font-size: 0.8125rem; color: var(--ink-3); text-decoration: none;
  transition: color 150ms var(--ease-out-quart);
}
body.ms-checkout-page .wc-block-components-address-form__address_2-toggle:hover {
  color: var(--brand); text-decoration: underline; text-underline-offset: 3px;
}
/* validation — quiet, adjacent, red only where it is wrong */
body.ms-checkout-page .wc-block-components-text-input.has-error input,
body.ms-checkout-page .wc-block-components-text-input.has-error input[type="text"],
body.ms-checkout-page .wc-block-components-text-input.has-error input[type="email"],
body.ms-checkout-page .wc-block-components-text-input.has-error input[type="tel"],
body.ms-checkout-page .wc-block-components-text-input.has-error input[type="number"],
body.ms-checkout-page .wc-blocks-components-select.has-error .wc-blocks-components-select__select {
  border-color: var(--destructive);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 14%, transparent);
}
body.ms-checkout-page .wc-block-components-text-input.has-error label { color: var(--destructive); }
body.ms-checkout-page .wc-block-components-validation-error p {
  font-size: 0.8125rem; color: var(--destructive); margin: 0.375rem 0 0;
}
body.ms-checkout-page .wc-block-components-notice-banner,
body.ms-cart-page .wc-block-components-notice-banner {
  border-radius: var(--cko-radius-lg); font-size: 0.875rem;
}

/* ---- checkboxes & radios -------------------------------------------------- */
body.ms-checkout-page .wc-block-components-checkbox__input[type="checkbox"] {
  width: 1.25rem; height: 1.25rem; border-radius: 0.375rem;
  border: 1.5px solid color-mix(in oklab, var(--foreground) 35%, transparent);
  background: var(--cko-white);
  transition: border-color 150ms var(--ease-out-quart), background-color 150ms var(--ease-out-quart);
}
body.ms-checkout-page .wc-block-components-checkbox__input[type="checkbox"]:hover { border-color: var(--brand); }
body.ms-checkout-page .wc-block-components-checkbox__input[type="checkbox"]:checked {
  background: var(--brand); border-color: var(--brand);
}
body.ms-checkout-page .wc-block-components-checkbox__mark { color: var(--brand-foreground); fill: currentColor; }
body.ms-checkout-page .wc-block-components-checkbox__label { font-size: 0.875rem; color: var(--ink-2); }

body.ms-checkout-page .wc-block-components-radio-control__input {
  width: 1.25rem; height: 1.25rem;
  border: 1.5px solid color-mix(in oklab, var(--foreground) 35%, transparent);
  background: var(--cko-white);
  transition: border-color 150ms var(--ease-out-quart);
}
body.ms-checkout-page .wc-block-components-radio-control__input:hover { border-color: var(--brand); }
body.ms-checkout-page .wc-block-components-radio-control__input:checked { border-color: var(--brand); }
body.ms-checkout-page .wc-block-components-radio-control__input:checked::before,
body.ms-checkout-page .wc-block-components-radio-control__input:checked::after {
  background: var(--brand);
}
/* focus: one halo, in the brand, on the control. whop-bridge/assets/checkout.css
   !importants `outline: none` on this input and then paints its own
   `currentColor 35%` ring on :focus-visible — which resolves to near-black
   here and disappears entirely against the checked row's tint. On 2026-08-18
   the keyboard path had, in practice, no visible focus at all. */
body.ms-checkout-page .wc-block-components-radio-control__input:focus-visible {
  outline: none !important;                      /* beats whop-bridge `outline: 2px solid … !important` */
  box-shadow: var(--cko-focus-ring) !important;  /*   〃 `box-shadow: none !important` */
  border-color: var(--brand);
}

/* ---- option groups (payment + shipping) — the Shopify option group --------- */
/* ⚠️ THE FOUR-RING DEFECT, measured live 2026-08-18. WooCommerce 11 paints its
   own `--highlight-checked` chrome on top of ours, at ITS radius, and we were
   painting a fourth ring on top of that:

     .…--highlight-checked::after           1px border, radius 4px, inset 0 —
                                            a SECOND group border over our 12px
                                            one. Only its top/bottom edge is
                                            dropped (first/last-selected), so
                                            the SIDES double all the way down
                                            and the corners cut across at 4px.
     .…--checked-option-highlighted         box-shadow inset 0 0 0 1.5px
                                            currentColor at radius 4px — a
                                            near-BLACK ring on the checked row.
     .…-accordion-option::after, .…__option::after
                                            a currentColor@20% hairline inset
                                            1px from each side, drawn on BOTH
                                            the wrapper and the label, which in
                                            the payment group land on the same
                                            pixel row and read twice as dark.
     ours                                   inset brand ring at radius 11 inside
                                            a radius-12 container.

   Four rings, three radii. At every corner they diverge; down the sides they
   stack. That is the doubled hairline and the "checked row breaking out of its
   box" in the 2026-08-18 report — not a colour problem, a geometry one.

   ONE RING PER SURFACE from here:
     · the GROUP owns the only border and the only radius, and CLIPS, so
       nothing inside it can round differently or spill past it;
     · a ROW is a flush rectangle — no radius, no border, no shadow. Selection
       is the brand tint + the accent radio + weight, which is what the
       shipping group already looked like and the payment group did not;
     · exactly one hairline between adjacent rows, full-bleed, ours;
     · focus is a soft brand halo, never an inset ring landing on the same
       pixels as a border.

   `!important` appears ONLY where whop-bridge/assets/checkout.css already used
   it — that plugin ships its own radius-11 override and wins on load order
   otherwise. Each one is marked with the rule it is beating. */

/* the group: the single bordered, rounded, clipping surface */
body.ms-checkout-page .wc-block-checkout__payment-method .wc-block-components-radio-control,
body.ms-checkout-page .wc-block-checkout__shipping-option .wc-block-components-radio-control {
  border: 1px solid var(--cko-field-border); border-radius: var(--cko-radius-lg);
  background: var(--cko-white); overflow: hidden;
}
/* Woo's second group border. Nothing to salvage — it duplicates the rule above
   at a radius that cannot agree with it. */
body.ms-checkout-page .wc-block-components-radio-control--highlight-checked::after { content: none; }
/* …and the group must not grow a border twice when that class is present */
body.ms-checkout-page .wc-block-components-radio-control--highlight-checked {
  border: 1px solid var(--cko-field-border); border-radius: var(--cko-radius-lg);
}

/* rows: flush rectangles inside the clip. The container's overflow gives them
   its corners for free, which is why they must not carry a radius of their own. */
body.ms-checkout-page .wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option,
body.ms-checkout-page .wc-block-checkout__shipping-option .wc-block-components-radio-control-accordion-option {
  border-radius: 0 !important;  /* beats whop-bridge checkout.css `border-radius: 11px !important` */
  box-shadow: none !important;  /*   〃 `box-shadow: none !important` — restated so ours is the last word */
  outline: none !important;     /*   〃 `outline: none !important` */
}
body.ms-checkout-page .wc-block-checkout__payment-method .wc-block-components-radio-control__option,
body.ms-checkout-page .wc-block-checkout__shipping-option .wc-block-components-radio-control__option {
  padding: 1.0625rem 1rem 1.0625rem 3rem; margin: 0;
  font-size: 0.9375rem; font-weight: 500; color: var(--foreground);
  background: transparent; border-radius: 0; box-shadow: none;
  transition: background-color 150ms var(--ease-out-quart);
}
/* one hairline between adjacent rows, ours, full-bleed. Woo draws its own on
   both the accordion wrapper and the label — killed here, or the payment group
   gets two on the same pixel row. */
body.ms-checkout-page .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option::after,
body.ms-checkout-page .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option::after { content: none; }
body.ms-checkout-page .wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option + .wc-block-components-radio-control-accordion-option,
body.ms-checkout-page .wc-block-checkout__shipping-option .wc-block-components-radio-control-accordion-option + .wc-block-components-radio-control-accordion-option,
body.ms-checkout-page .wc-block-checkout__payment-method .wc-block-components-radio-control__option + .wc-block-components-radio-control__option,
body.ms-checkout-page .wc-block-checkout__shipping-option .wc-block-components-radio-control__option + .wc-block-components-radio-control__option {
  border-top: 1px solid var(--border);
}
/* hover on the rows that are not already the answer */
body.ms-checkout-page .wc-block-checkout__payment-method .wc-block-components-radio-control__option:not(.wc-block-components-radio-control__option-checked):hover,
body.ms-checkout-page .wc-block-checkout__shipping-option .wc-block-components-radio-control__option:not(.wc-block-components-radio-control__option-checked):hover {
  background: color-mix(in oklab, var(--foreground) 2.5%, var(--cko-white));
}
/* the checked row: tint + weight, no ring. The group's clip hands it the
   container's own corners, so there is nothing left to disagree about. */
body.ms-checkout-page .wc-block-checkout__payment-method .wc-block-components-radio-control__option-checked,
body.ms-checkout-page .wc-block-checkout__shipping-option .wc-block-components-radio-control__option-checked,
body.ms-checkout-page .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option-checked {
  background: var(--cko-brand-tint);
  box-shadow: none; outline: none; border-radius: 0;
  font-weight: 600;
}
/* the open pane belongs to the group's surface, not to a third one — a tinted
   row over a grey pane over the processor's own white card was three tones
   deep before anyone had typed a digit */
body.ms-checkout-page .wc-block-components-radio-control-accordion-content {
  padding: 0.875rem 1rem 1rem; border-top: 1px solid var(--border);
  background: var(--cko-white);
  font-size: 0.875rem; color: var(--ink-3);
}
/* the whole row lifts with the control — a 20px halo is a small target to
   find on a 54px row. AFTER the checked rule on purpose: same specificity, and
   focus has to be able to show through a selected row. */
body.ms-checkout-page .wc-block-checkout__payment-method .wc-block-components-radio-control__option:has(.wc-block-components-radio-control__input:focus-visible),
body.ms-checkout-page .wc-block-checkout__shipping-option .wc-block-components-radio-control__option:has(.wc-block-components-radio-control__input:focus-visible) {
  background: color-mix(in oklab, var(--brand) 8%, var(--cko-white));
}

/* ---- order summary — content ON the rail, no card ------------------------- */
body.ms-checkout-page .wc-block-components-order-summary { padding: 0; }
body.ms-checkout-page .wc-block-components-checkout-order-summary__title {
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em;
  color: var(--foreground); padding: 0 0 0.5rem;
}
body.ms-checkout-page .wc-block-components-order-summary-item {
  padding: 0.875rem 0; font-size: 0.875rem;
}
body.ms-checkout-page .wc-block-components-order-summary-item__image {
  width: 4rem; min-width: 4rem;
}
body.ms-checkout-page .wc-block-components-order-summary-item__image img,
body.ms-cart-page .wc-block-cart-item__image img {
  width: 4rem; height: 4rem; object-fit: cover;
  border-radius: var(--cko-radius); background: var(--p-stage-light-2);
  border: 1px solid var(--border);
}
/* the qty badge that rides the thumbnail — a reference detail */
body.ms-checkout-page .wc-block-components-order-summary-item__quantity {
  background: var(--ink-3); color: var(--p-neutral-0);
  border: 2px solid var(--cko-rail-bg); border-radius: 999px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
  min-width: 1.375rem; height: 1.375rem;
  box-shadow: none; opacity: 1;
}
body.ms-checkout-page .wc-block-components-product-name,
body.ms-cart-page .wc-block-components-product-name {
  color: var(--foreground); font-weight: 600; font-size: 0.875rem; line-height: 1.4;
  text-decoration: none;
}
/* Shopify shows the variant, not a paragraph — the catalogue blurb gets two
   lines, then it yields */
body.ms-checkout-page .wc-block-components-product-metadata,
body.ms-cart-page .wc-block-components-product-metadata { margin-top: 0.25rem; }
body.ms-checkout-page .wc-block-components-product-metadata__description,
body.ms-checkout-page .wc-block-components-product-metadata__description p,
body.ms-cart-page .wc-block-components-product-metadata__description,
body.ms-cart-page .wc-block-components-product-metadata__description p {
  color: var(--ink-4); font-size: 0.78125rem; line-height: 1.45; margin: 0;
}
body.ms-checkout-page .wc-block-components-product-metadata__description,
body.ms-cart-page .wc-block-components-product-metadata__description {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* the per-unit price echo under the name duplicates the line total — drop it */
body.ms-checkout-page .wc-block-components-order-summary-item__individual-prices { display: none; }
body.ms-checkout-page .wc-block-components-order-summary-item__total-price {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums; font-weight: 500; font-size: 0.875rem;
  color: var(--foreground);
}

/* ---- shared: money, badges, totals ---------------------------------------- */
/* mono = data, on BOTH surfaces. The cart's per-unit prices were the one money
   figure still set in DM Sans, which showed as soon as a sale struck through
   the old price next to a mono line total. */
body.ms-cart-page .wc-block-cart-item__prices,
body.ms-cart-page .wc-block-cart-item__prices .wc-block-components-product-price,
body.ms-cart-page .wc-block-cart-item__total-price-and-sale-badge-wrapper .wc-block-components-product-price {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums; color: var(--foreground);
}
body.ms-cart-page .wc-block-cart-item__prices { font-size: 0.8125rem; color: var(--ink-3); }
body.ms-cart-page .wc-block-cart-item__prices del,
body.ms-cart-page .wc-block-components-product-price__regular { color: var(--ink-4); }
body.ms-cart-page .wc-block-cart-item__total-price-and-sale-badge-wrapper .wc-block-components-product-price {
  font-weight: 600;
}
body.ms-checkout-page .wc-block-components-sale-badge,
body.ms-cart-page .wc-block-components-sale-badge {
  border: none; border-radius: 0.375rem;
  background: color-mix(in oklab, var(--foreground) 6%, transparent);
  color: var(--ink-2);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6875rem; font-weight: 500; font-variant-numeric: tabular-nums;
  padding: 0.1875rem 0.4375rem;
}

/* zone separators — hairlines between items / coupon / totals / footer */
body.ms-checkout-page .wc-block-components-totals-wrapper,
body.ms-cart-page .wc-block-components-totals-wrapper {
  padding: 1rem 0; border-top: 1px solid var(--border);
}
/* Woo mounts DISCOUNT and FEE wrappers even when the order has neither —
   childless, but the rule above would still give each a padded hairline band
   between Subtotal and Total */
body.ms-checkout-page .wc-block-components-totals-wrapper:not(:has(*)),
body.ms-cart-page .wc-block-components-totals-wrapper:not(:has(*)) { display: none; }
/* the TOTAL wrapper draws the rule itself (on the footer item) — the generic
   wrapper hairline above it would stack a second, fainter line */
body.ms-checkout-page .wc-block-components-totals-wrapper:has(.wc-block-components-totals-footer-item),
body.ms-cart-page .wc-block-components-totals-wrapper:has(.wc-block-components-totals-footer-item) {
  border-top: none; padding: 0;
}
/* ⚠️ ONE DIVIDER WEIGHT PER SUMMARY, AND IT IS `--border`. Left alone, the
   summary draws three DIFFERENT rules: WC's own 0.2 hairline on the totals
   block lands 1px above our 0.08 one on the subtotal block — two lines a pixel
   apart that read as a drop shadow, not a divider — and the footer item drew a
   heavier 0.24. All normalised to the hairline the coupon row uses, so the
   separators are indistinguishable. The cart repeats the defect with its own
   0.2 rule under the summary block, so both are named here. */
body.ms-checkout-page .wp-block-woocommerce-checkout-order-summary-totals-block,
body.ms-cart-page .wp-block-woocommerce-cart-order-summary-totals-block {
  border-top: none;
}
body.ms-cart-page .wp-block-woocommerce-cart-order-summary-block {
  border-bottom: none;
}
body.ms-checkout-page .wc-block-components-totals-item,
body.ms-cart-page .wc-block-components-totals-item {
  font-size: 0.875rem; color: var(--ink-2);
}
body.ms-checkout-page .wc-block-components-totals-item__value,
body.ms-cart-page .wc-block-components-totals-item__value {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums; color: var(--foreground);
}
body.ms-checkout-page .wc-block-components-totals-item__description,
body.ms-cart-page .wc-block-components-totals-item__description { font-size: 0.78125rem; color: var(--ink-4); }
/* `--border`, matching the coupon and subtotal rules above. The Total earns its
   emphasis from type weight and size, not from a heavier rule. */
body.ms-checkout-page .wc-block-components-totals-footer-item,
body.ms-cart-page .wc-block-components-totals-footer-item {
  border-top: 1px solid var(--border); padding: 1.125rem 0 0; margin-top: 0.25rem;
}
body.ms-checkout-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
body.ms-cart-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-weight: 600; color: var(--foreground); font-size: 1rem;
}
body.ms-checkout-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
body.ms-cart-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-size: 1.375rem; font-weight: 600; letter-spacing: -0.01em;
}

/* ---- shared: the coupon panel --------------------------------------------- */
body.ms-checkout-page .wc-block-components-totals-coupon,
body.ms-cart-page .wc-block-components-totals-coupon { padding: 0; }
body.ms-checkout-page .wc-block-components-panel__button,
body.ms-cart-page .wc-block-components-panel__button {
  font-family: inherit; font-size: 0.875rem; font-weight: 600; color: var(--foreground);
  transition: color 150ms var(--ease-out-quart);
}
body.ms-checkout-page .wc-block-components-panel__button:hover,
body.ms-cart-page .wc-block-components-panel__button:hover { color: var(--brand); }
body.ms-checkout-page .wc-block-components-panel__content,
body.ms-cart-page .wc-block-components-panel__content { padding-top: 0.75rem; }
body.ms-checkout-page .wc-block-components-totals-coupon__form,
body.ms-cart-page .wc-block-components-totals-coupon__form { gap: 0.5rem; }
body.ms-checkout-page .wc-block-components-totals-coupon__input input,
body.ms-cart-page .wc-block-components-totals-coupon__input input { height: 3rem; }
body.ms-checkout-page .wc-block-components-totals-coupon__button,
body.ms-cart-page .wc-block-components-totals-coupon__button {
  height: 3rem; border-radius: var(--cko-radius);
  background: color-mix(in oklab, var(--foreground) 7%, transparent);
  color: var(--foreground); border: none;
  font-family: inherit; font-size: 0.875rem; font-weight: 600;
  transition: background-color 150ms var(--ease-out-quart);
}
body.ms-checkout-page .wc-block-components-totals-coupon__button:hover,
body.ms-cart-page .wc-block-components-totals-coupon__button:hover {
  background: color-mix(in oklab, var(--foreground) 12%, transparent);
}

/* ---- terms + primary action ----------------------------------------------- */
body.ms-checkout-page .wc-block-checkout__terms {
  font-size: 0.8125rem; color: var(--ink-3); line-height: 1.55;
  border-top: 1px solid var(--border); padding-top: 1.25rem; margin-top: 0.5rem;
}
body.ms-checkout-page .wc-block-checkout__terms a { color: var(--foreground); text-underline-offset: 3px; }
body.ms-checkout-page .wc-block-checkout__terms a:hover { color: var(--brand); }

body.ms-checkout-page .wc-block-checkout__actions_row { margin-top: 1.25rem; }
body.ms-checkout-page .wc-block-components-checkout-place-order-button,
body.ms-cart-page .wc-block-cart__submit-button {
  width: 100%; height: 3.5rem; border-radius: var(--cko-radius-lg);
  background: var(--brand); color: var(--brand-foreground);
  font-family: inherit; font-size: 1.0625rem; font-weight: 600; letter-spacing: 0.01em;
  box-shadow: var(--elevation-key);
  transition: background-color 150ms var(--ease-out-quart), box-shadow 200ms var(--ease-out-quart), transform 160ms var(--ease-out-quart);
}
body.ms-checkout-page .wc-block-components-checkout-place-order-button:hover,
body.ms-cart-page .wc-block-cart__submit-button:hover {
  background: var(--brand-hover); box-shadow: var(--shadow-brand);
}
body.ms-checkout-page .wc-block-components-checkout-place-order-button:active,
body.ms-cart-page .wc-block-cart__submit-button:active { transform: scale(0.99); }
body.ms-checkout-page .wc-block-components-checkout-place-order-button:focus-visible,
body.ms-cart-page .wc-block-cart__submit-button:focus-visible {
  outline: none; box-shadow: var(--cko-focus-ring), var(--elevation-key);
}
body.ms-checkout-page .wc-block-components-checkout-return-to-cart-button {
  color: var(--ink-3); font-size: 0.875rem; text-decoration: none;
}
body.ms-checkout-page .wc-block-components-checkout-return-to-cart-button:hover { color: var(--brand); }

/* ---- mobile order summary panel ------------------------------------------- */
@media (max-width: 1023.98px) {
  /* summary FIRST on mobile, exactly like Shopify's collapsed bar */
  body.ms-checkout-page .wc-block-components-sidebar { order: -1; border-top: none; border-bottom: 1px solid var(--border); }
  body.ms-checkout-page .wp-block-woocommerce-checkout-order-summary-block {
    max-width: none; margin: 0; padding: 0; border: none; border-radius: 0;
  }
  /* the collapse bar IS the band — no padding above or below it */
  body.ms-checkout-page .wc-block-components-checkout-order-summary__title {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    width: 100%; max-width: 42rem;
    margin: 0 auto; /* WC gives the bar its own 16px margin-top — must sit flush */
    padding: 1rem 1.25rem; font-size: 0.9375rem;
    -webkit-tap-highlight-color: transparent;
  }
  body.ms-checkout-page .wc-block-components-checkout-order-summary__content {
    width: 100%; max-width: 42rem; margin-inline: auto;
    padding: 0 1.25rem 1.25rem;
  }
  /* ⚠️ Woo ALSO mounts a SECOND full summary inside MAIN on mobile (the
     `-fill` block above the place-order button) — with the top bar expandable
     that duplicate is pure scroll weight, and it resurrects WC's bordered
     card. Shopify's grammar: ONE collapsible bar at the top. */
  body.ms-checkout-page .wc-block-components-main .wp-block-woocommerce-checkout-order-summary-block {
    display: none;
  }
  body.ms-checkout-page .wc-block-components-sidebar .wc-block-components-notices:has(*) {
    max-width: 42rem; margin-inline: auto; padding: 1rem 1.25rem 0;
  }
}
body.ms-checkout-page .wc-block-components-checkout-order-summary__title-price {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* ===========================================================================
   CART PAGE
   =========================================================================== */
.cart-head { padding-top: 1.5rem; }
@media (min-width: 640px) { .cart-head { padding-top: 2rem; } }
.cart-head__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem; margin-top: 1rem; }
.cart-head__count {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.8125rem; font-variant-numeric: tabular-nums; color: var(--ink-3);
}
.cart-head__back { margin-top: 0.75rem; }

body.ms-cart-page .wc-block-cart {
  width: 100%; max-width: calc(80rem + 3rem); margin-inline: auto;
  padding: 1.5rem 1rem 4rem;
}
@media (min-width: 640px) { body.ms-cart-page .wc-block-cart { padding-inline: 1.5rem; } }
body.ms-cart-page .wc-block-cart__main,
body.ms-cart-page .wc-block-cart__sidebar { padding: 0; }
@media (min-width: 1024px) {
  body.ms-cart-page .wc-block-components-sidebar-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
  body.ms-cart-page .wc-block-cart__main, body.ms-cart-page .wc-block-cart__sidebar { width: auto; max-width: none; float: none; }
  body.ms-cart-page .wc-block-cart__sidebar { position: sticky; top: calc(var(--site-header-h) + 1.5rem); }
}

/* the summary panel reads as a card, matching the drawer's foot */
body.ms-cart-page .wc-block-cart__sidebar {
  border: 1px solid var(--border); border-radius: var(--cko-radius-lg);
  background: var(--surface); padding: 1.25rem;
}
@media (min-width: 1024px) { body.ms-cart-page .wc-block-cart__sidebar { padding: 1.5rem; } }
/* ⚠️ Only the OUTER card is rounded. A blanket `sidebar > div` radius (what
   this used to do) also rounds the totals rows inside it, which do not paint a
   background — invisible on its own, but it rounds the CORNERS OF THEIR
   HAIRLINES, so the dividers arrive with clipped ends. */
body.ms-cart-page .wc-block-cart__sidebar > div { border-radius: 0; }
body.ms-cart-page .wp-block-woocommerce-cart-order-summary-heading-block {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 500; margin: 0 0 0.25rem; padding: 0;
}

/* line items in the same register as the drawer */
body.ms-cart-page .wc-block-cart-items__header {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid var(--border);
}
body.ms-cart-page .wc-block-cart-items__row { border-bottom: 1px solid var(--border); }
body.ms-cart-page .wc-block-cart-item__wrap { padding: 1.25rem 0; }

/* the quantity stepper — the cart's one interactive control, so it carries the
   same 10px/white/hairline language as every checkout field rather than WC's
   32px cream pill */
body.ms-cart-page .wc-block-components-quantity-selector {
  border: 1px solid var(--cko-field-border); border-radius: var(--cko-radius);
  background: var(--cko-white); height: 2.5rem; min-width: 7rem;
  box-shadow: 0 1px 2px color-mix(in oklab, var(--foreground) 3%, transparent);
  transition: border-color 150ms var(--ease-out-quart), box-shadow 150ms var(--ease-out-quart);
}
body.ms-cart-page .wc-block-components-quantity-selector:hover { border-color: var(--cko-field-border-hover); }
body.ms-cart-page .wc-block-components-quantity-selector:focus-within {
  border-color: var(--brand); box-shadow: var(--cko-focus-ring);
}
body.ms-cart-page .wc-block-components-quantity-selector__input {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums; color: var(--foreground);
  font-size: 0.875rem; font-weight: 500; background: transparent;
}
body.ms-cart-page .wc-block-components-quantity-selector__button {
  color: var(--ink-3); font-size: 1rem; background: transparent; border: none;
  transition: color 150ms var(--ease-out-quart), background-color 150ms var(--ease-out-quart);
}
body.ms-cart-page .wc-block-components-quantity-selector__button:hover:not(:disabled) {
  color: var(--foreground); background: color-mix(in oklab, var(--foreground) 5%, transparent);
}
body.ms-cart-page .wc-block-components-quantity-selector__button:disabled { opacity: 0.4; }
/* WC rounds the stepper's end buttons on its own 4px scale, so their corners
   cut inside the 10px shell — inherit the shell's radius instead */
body.ms-cart-page .wc-block-components-quantity-selector__button--minus {
  border-radius: calc(var(--cko-radius) - 1px) 0 0 calc(var(--cko-radius) - 1px);
}
body.ms-cart-page .wc-block-components-quantity-selector__button--plus {
  border-radius: 0 calc(var(--cko-radius) - 1px) calc(var(--cko-radius) - 1px) 0;
}

/* remove control — WC 11 renders `__remove-link` as an ICON BUTTON (verified in
   the live DOM: a <button aria-label="Remove … from cart">, not the text link
   the old rule assumed), so it needs a hit area and a hover state, not
   link-coloured text */
body.ms-cart-page .wc-block-cart-item__remove-link {
  color: var(--ink-4); text-decoration: none;
  border-radius: 0.375rem;
  transition: color 150ms var(--ease-out-quart), background-color 150ms var(--ease-out-quart);
}
body.ms-cart-page .wc-block-cart-item__remove-link:hover {
  color: var(--destructive); background: color-mix(in oklab, var(--destructive) 8%, transparent);
}
body.ms-cart-page .wc-block-cart-item__remove-link:focus-visible {
  outline: none; box-shadow: var(--cko-focus-ring);
}