/*
 * wc-pages.css — WooCommerce page styles
 * ----------------------------------------
 * Styles WC's DEFAULT class names (.woocommerce-cart-form, .shop_table.cart,
 * .form-row.woocommerce-form-row, etc.) so we get the locked-mockup look
 * WITHOUT overriding any WC templates. Form processing stays intact.
 *
 * Source mockups (verbatim design language):
 *   PUBLISHING/.superpowers/brainstorm/67648-1776890577/content/
 *     wc-cart-v1.html, wc-checkout-v1.html, wc-my-account-v1.html,
 *     wc-order-received-v1.html, wc-lost-password-v1.html
 *
 * Mockup → WC class mapping reference is documented in the rebuild handoff.
 *
 * Loaded on every WC-rendered page. Depends on tokens.css + base.css.
 */

/* ============================================================
   STANDARD PAGE HEADING — verbatim from page-about.css / page-reading-room.css.
   Match the .hero + .hero-tagline pattern used across the site (Reading Room,
   About, Contact, ARC, 404, Legal, RR articles, EST detail). Per Mark direction
   2026-04-28: WC pages use the standard interior heading, not the watermark.
   Heading text comes from page.php — Cart / Checkout / My Account / Sign In /
   Order Confirmed / Reset Password.
   ============================================================ */
.hero {
  padding: calc(var(--announce-h) + var(--header-h-default) + var(--space-7)) var(--space-7) var(--space-7);
  text-align: center;
  max-width: var(--max-page);
  margin: 0 auto;
}
.hero-tagline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display-hero);
  line-height: 0.96;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  text-transform: uppercase;
  max-width: 1200px;
  margin: 0 auto;
}

/* ============================================================
   WC BLOCK TYPOGRAPHY — apply site design tokens to WC default
   block class names. Per Mark direction 2026-04-28: cart sidebar
   and product info should use site styles, not WC's default mixed
   sizes. Headings/labels use tracked-label pattern; body uses
   Figtree at site sizes.
   ============================================================ */

/* Section labels: PRODUCT / TOTAL / CART TOTALS — uppercase tracked */
.wp-block-woocommerce-cart-totals-block h2,
.wc-block-cart-items__header,
.wc-block-cart-items__header-product,
.wc-block-cart-items__header-total,
.wc-block-components-totals-wrapper h2 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-ink);
}

/* Cart row totals (Subtotal / Estimated total / Delivery) — body weight,
   not the 20px medium-weight default WC ships. */
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value,
.wc-block-components-totals-item__description {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--color-ink);
  line-height: 1.4;
}

/* Final estimated total / order total row — emphasize but stay body-scale */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-weight: 800;
  font-size: 17px;
}

/* Product name in cart row — body weight, readable size */
.wc-block-components-product-name {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: 700;
  color: var(--color-ink);
}

/* Add coupons toggle — small label-style */
.wc-block-components-panel__button {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-body-sm);
  color: var(--color-ink);
}

/* Cart / checkout primary CTAs (Proceed to Checkout / Place Order) —
   site button pattern: ink bg, accent on hover, full-width. Per Mark 2026-04-28:
   no hover state was a bug; Place Order should match Cart's full-width treatment
   for visual consistency through the cart→checkout flow. */
.wc-block-cart__submit-container .wc-block-components-button,
.wc-block-checkout__actions_row .wc-block-components-button,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button {
  display: block;
  width: 100%;
  text-align: center;
  background-color: var(--color-ink);
  color: var(--color-bg);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: var(--track-cta);
  text-transform: uppercase;
  border: 0;
  padding: 14px 24px;
  transition: background-color var(--dur-short) var(--ease-out);
}
.wc-block-cart__submit-container .wc-block-components-button:hover,
.wc-block-checkout__actions_row .wc-block-components-button:hover,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button:hover {
  background-color: var(--color-accent);
  color: var(--color-bg);
}

/* Free shipping label is already handled by WC default — when free, the
   shipping rate renders as "FREE" in the order summary. Verified live
   2026-04-28 with NY address (Standard Shipping (Free): FREE). No override needed. */

/* ============================================================
   ORDER CONFIRMED — small centered uppercase subhead beneath
   the page hero ('Thank You for Your Purchase'). Per Mark
   direction 2026-04-28: 'leave order confirmed, and centered
   beneath thank you for your purchase'. NO logo / colophon /
   wordmark — those were removed from inc/woocommerce.php.
   ============================================================ */
.order-confirmed-subhead {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-accent);
  text-align: center;
  margin-bottom: var(--space-7);
}

/* Order received billing/shipping address blocks — drop WC's bordered cards
   and use clean site typography. The .woocommerce-customer-details element
   wraps a single .woocommerce-columns child which is the actual 2-col grid;
   do NOT also set display:grid on the outer element (causes uneven cols). */
.woocommerce-customer-details {
  margin-top: var(--space-7);
}
.woocommerce-customer-details .woocommerce-customer-details--phone,
.woocommerce-customer-details .woocommerce-customer-details--email {
  display: block;
  margin-top: var(--space-2);
  color: var(--color-muted);
  font-size: var(--fs-body-sm);
}

/* Policy footers — flex layout with proper breathing room between links.
   Per Mark 2026-04-30: gap above/below reduced ~62% (was 64/32, now 24/12). */
.checkout-policy-links,
.order-confirmed-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6);
  padding: 24px 0 12px;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--color-muted);
  text-align: center;
}
.checkout-policy-links a,
.order-confirmed-footer a {
  color: var(--color-muted);
  border-bottom: 1px solid transparent;
  transition: color var(--dur-short), border-color var(--dur-short);
}
.checkout-policy-links a:hover,
.order-confirmed-footer a:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* Empty cart cleanup — per Mark direction 2026-04-28: 'no button that
   says return to store — there is no store'. Hide any WC default
   'Return to shop' button on the empty cart state. (We also removed
   the New in store + product-new blocks from the cart page content.) */
.wc-block-cart__empty-cart .wp-block-button,
.wp-block-woocommerce-empty-cart-block a.wp-block-button__link,
.wc-block-cart__empty-cart .wc-block-components-button.contained {
  display: none !important;
}

/* ============================================================
   EDITORIAL SEPARATOR + NEWSLETTER — verbatim from page-about.css.
   Per Mark direction 2026-04-28: cart + checkout need newsletter
   signup section so the SUBSCRIBE link in the header has somewhere
   to go on those pages.
   ============================================================ */
.editorial-separator {
  width: 100%;
  padding: var(--space-7) 0;
  display: flex; align-items: center; justify-content: center;
  max-width: var(--max-page); margin: 0 auto;
}
.editorial-separator::before,
.editorial-separator::after {
  content: '';
  flex: 1; height: 1px;
  background: var(--color-border);
}
.editorial-separator-mark {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: 0 var(--space-5);
  flex: 0 0 auto;
}
.editorial-separator-mark img {
  height: 33px; width: auto;
  display: block;
  opacity: 0.85;
}

/* Express Checkout buttons — 2-up grid (Amazon+Apple top, Google+Link bottom)
   at the form column width. WC default grid was 3 fixed cols 177px each so
   4 buttons wrapped Link to its own row. 4-up at 150px each was too narrow
   for "Pay with link" text (cropped). 2-up gives ~270px per button so all
   labels fit. Per Mark direction 2026-04-28. */
.wc-block-components-express-payment__event-buttons {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px;
}
.wc-block-components-express-payment__event-buttons > li {
  width: 100%;
  min-width: 0;
}
.wc-block-components-express-payment__event-buttons > li > * {
  width: 100% !important;
  min-width: 0 !important;
}

/* ============================================================
   PAGE WRAPPER — content area for WC pages (cart, checkout, account).
   Mirrors the mockup's .wc-body: centered, max-width 1100px, side padding,
   generous bottom padding so content doesn't crowd the footer.
   ============================================================ */
.page-body {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-7) var(--space-9);
}

.woocommerce {
  max-width: var(--max-page);
  margin: 0 auto;
  padding: var(--space-7);
  font-family: var(--font-body);
  color: var(--color-ink);
}

/* Narrow wrapper variant — applied via body class for lost-password */
.woocommerce-lost-password .woocommerce,
.woocommerce-account.woocommerce-page:not(.logged-in) .woocommerce {
  max-width: 980px;
}

/* Section heading inside .woocommerce */
.woocommerce h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin: 0 0 var(--space-4);
}

.woocommerce h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--color-ink);
  margin: 0 0 var(--space-4);
}

/* ============================================================
   NOTICES — info / message / error
   ============================================================ */
.woocommerce-notices-wrapper { margin-bottom: var(--space-5); }
.woocommerce-NoticeGroup { margin-bottom: var(--space-5); }

.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: 1.5;
  color: var(--color-ink);
  background: #F4F2EC;
  border-left: 3px solid var(--color-accent);
}
.woocommerce-info a,
.woocommerce-message a,
.woocommerce-error a {
  color: var(--color-accent);
  font-weight: 700;
  border-bottom: 1px solid currentColor;
}
.woocommerce-error { background: rgba(179, 69, 37, 0.06); }
.woocommerce-error li { margin-bottom: var(--space-2); }
.woocommerce-error li:last-child { margin-bottom: 0; }

/* ============================================================
   FORM FIELDS — billing, shipping, account, lost-password, login, register
   Stacked label-above-input. Label uppercase tracked.
   ============================================================ */
.woocommerce form .form-row,
.woocommerce-form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 var(--space-3);
  padding: 0;
}
.woocommerce form .form-row-first,
.woocommerce form .form-row-last,
.woocommerce-form-row--first,
.woocommerce-form-row--last {
  width: calc(50% - var(--space-2));
  display: inline-flex;
  flex-direction: column;
  vertical-align: top;
}
.woocommerce form .form-row-first,
.woocommerce-form-row--first { margin-right: var(--space-3); }
.woocommerce form .form-row-wide,
.woocommerce-form-row--wide { width: 100%; }

.woocommerce-form__label,
.woocommerce form .form-row label,
.woocommerce label.woocommerce-form__label-for-checkbox {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--fs-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-ink);
  margin: 0;
  display: block;
}
.woocommerce form .form-row .required,
.woocommerce abbr.required {
  color: var(--color-accent);
  text-decoration: none;
  border: 0;
}
.woocommerce form .form-row .optional { color: var(--color-muted); }

.woocommerce-Input,
.woocommerce input.input-text,
.woocommerce-input,
.woocommerce select,
.woocommerce textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  font: inherit;
  color: var(--color-ink);
  padding: 12px 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  transition: border-color var(--dur-short);
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}
.woocommerce-Input:focus,
.woocommerce input.input-text:focus,
.woocommerce select:focus,
.woocommerce textarea:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  border-color: var(--color-accent);
}
.woocommerce textarea { min-height: 88px; resize: vertical; }

/* Select2 (WC's country/state dropdown) — match plain select look */
.woocommerce .select2-container .select2-selection--single {
  height: auto;
  padding: 9px 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
  font: inherit;
  color: var(--color-ink);
  padding: 0;
  line-height: 1.4;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  top: 0;
  right: 8px;
}

/* Checkboxes / radios */
.woocommerce-form__input-checkbox,
.woocommerce input[type="checkbox"],
.woocommerce input[type="radio"] {
  accent-color: var(--color-accent);
  width: auto;
  margin-right: 8px;
  vertical-align: middle;
}
.woocommerce-form__label-for-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-muted);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  margin: var(--space-3) 0;
}

/* ============================================================
   BUTTONS — primary (.button.alt, .checkout-button, .place-order .button)
              ghost (.button, .button.wc-backward)
   ============================================================ */
.woocommerce .button,
.woocommerce input[type="submit"].button,
.woocommerce a.button,
.woocommerce button.button {
  display: inline-block;
  padding: 12px 24px;
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-border-strong);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: var(--track-cta);
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  text-decoration: none;
  transition: background var(--dur-short), color var(--dur-short), border-color var(--dur-short);
  line-height: 1.4;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background: var(--color-ink);
  color: var(--color-bg);
  border-color: var(--color-ink);
}

/* Primary action — accent fill */
.woocommerce .button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input[type="submit"].button.alt,
.woocommerce .checkout-button,
.woocommerce #place_order,
.woocommerce .place-order .button {
  background: var(--color-ink);
  color: var(--color-bg);
  border-color: var(--color-ink);
  padding: 14px 28px;
  font-size: 13px;
}
.woocommerce .button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce .checkout-button:hover,
.woocommerce #place_order:hover,
.woocommerce .place-order .button:hover {
  background: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-accent);
}

/* Full-width primary in summary contexts */
.woocommerce .wc-proceed-to-checkout .checkout-button,
.woocommerce #place_order {
  display: block;
  width: 100%;
}

/* ============================================================
   CART PAGE — .woocommerce-cart-form + .cart_totals 2-col grid
   ============================================================ */
.woocommerce-cart .woocommerce {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-7);
  align-items: start;
  max-width: 1100px;
}
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper {
  grid-column: 1 / -1;
}
.woocommerce-cart-form { min-width: 0; }

/* Cart table (.shop_table.cart) */
.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 15px;
  border: 0;
  margin: 0;
}
.woocommerce table.shop_table th {
  text-align: left;
  font-weight: 800;
  font-size: var(--fs-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-muted);
  padding: 0 0 var(--space-3);
  border-bottom: 1px solid var(--color-border);
  background: transparent;
}
.woocommerce table.shop_table td {
  padding: var(--space-4) var(--space-3) var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  color: var(--color-ink);
  background: transparent;
}
.woocommerce table.shop_table .product-subtotal,
.woocommerce table.shop_table th.product-subtotal,
.woocommerce table.shop_table th.product-price,
.woocommerce table.shop_table .product-price { text-align: right; }

/* Product remove (X) */
.woocommerce table.shop_table .product-remove {
  width: 32px;
  padding-left: 0;
}
.woocommerce table.shop_table .product-remove a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 18px;
  line-height: 1;
  font-weight: 400;
  color: var(--color-muted);
  background: transparent !important;
  border-radius: 0;
  text-decoration: none;
  transition: color var(--dur-short);
}
.woocommerce table.shop_table .product-remove a.remove:hover {
  color: var(--color-accent);
}

/* Product thumbnail */
.woocommerce table.shop_table .product-thumbnail {
  width: 80px;
  padding-right: var(--space-3);
}
.woocommerce table.shop_table .product-thumbnail img {
  width: 56px;
  height: 84px;
  object-fit: cover;
  background: #F4F1EA;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Product name (title link) */
.woocommerce table.shop_table .product-name a {
  font-weight: 700;
  font-size: 15px;
  color: var(--color-ink);
  text-decoration: none;
  transition: color var(--dur-short);
}
.woocommerce table.shop_table .product-name a:hover { color: var(--color-accent); }
.woocommerce table.shop_table .product-name .variation,
.woocommerce table.shop_table .product-name dl {
  font-size: 12px;
  color: var(--color-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 4px 0 0;
}

/* Quantity input */
.woocommerce table.shop_table .product-quantity {
  width: 100px;
}
.woocommerce .quantity input.qty,
.woocommerce table.shop_table .product-quantity input.qty {
  width: 64px;
  height: 36px;
  padding: 0 8px;
  text-align: center;
  font: inherit;
  color: var(--color-ink);
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  -moz-appearance: textfield;
  border-radius: 0;
}
.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Coupon row */
.woocommerce .coupon {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
  padding-top: var(--space-3);
}
.woocommerce .coupon label { display: none; }
.woocommerce .coupon input.input-text {
  flex: 1;
  min-width: 180px;
  width: auto;
}
.woocommerce .coupon .button { flex: 0 0 auto; }

/* Cart actions row (update cart button) */
.woocommerce .actions {
  text-align: right;
  padding-top: var(--space-4);
}

/* Cart totals (.cart_totals) — sticky summary card */
.woocommerce .cart-collaterals { width: 100%; }
.woocommerce .cart_totals {
  background: #F4F2EC;
  padding: var(--space-5);
  position: sticky;
  top: calc(var(--announce-h, 36px) + var(--header-h-default, 84px) + var(--space-3));
}
.woocommerce .cart_totals h2 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-ink);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-3);
}
.woocommerce .cart_totals table {
  width: 100%;
  border-collapse: collapse;
}
.woocommerce .cart_totals table th,
.woocommerce .cart_totals table td {
  padding: var(--space-2) 0;
  font-size: 15px;
  border: 0;
  background: transparent;
  color: var(--color-ink);
  vertical-align: baseline;
}
.woocommerce .cart_totals table th {
  text-align: left;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-muted);
}
.woocommerce .cart_totals table td { text-align: right; }
.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
  font-weight: 800;
  font-size: 18px;
  color: var(--color-ink);
}
.woocommerce .cart_totals .wc-proceed-to-checkout {
  padding: var(--space-4) 0 0;
}

/* Empty cart */
.woocommerce .cart-empty,
.woocommerce .wc-empty-cart-message {
  font-family: var(--font-body);
  font-size: var(--fs-body-large);
  line-height: 1.6;
  color: var(--color-ink);
  background: transparent;
  border-left: 0;
  padding: var(--space-5) 0;
}
.woocommerce .return-to-shop {
  margin-top: var(--space-4);
}

/* ============================================================
   CHECKOUT — .woocommerce-checkout 2-col grid
   ============================================================ */
.woocommerce-checkout .woocommerce {
  max-width: 1100px;
}
.woocommerce form.checkout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-7);
  align-items: start;
}
.woocommerce form.checkout > .woocommerce-notices-wrapper,
.woocommerce form.checkout #customer_details {
  min-width: 0;
}
.woocommerce form.checkout #order_review_heading,
.woocommerce form.checkout #order_review {
  grid-column: 2;
}
.woocommerce form.checkout #order_review_heading {
  margin-top: 0;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-ink);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0;
}
.woocommerce form.checkout #customer_details {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.woocommerce-billing-fields,
.woocommerce-shipping-fields,
.woocommerce-additional-fields {
  margin-bottom: var(--space-7);
}
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 {
  margin-bottom: var(--space-4);
}

/* Shipping toggle */
.woocommerce-shipping-fields #ship-to-different-address {
  margin-bottom: var(--space-4);
}
.woocommerce-shipping-fields #ship-to-different-address label {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--color-ink);
  cursor: pointer;
}

/* Order review table */
.woocommerce-checkout-review-order {
  background: #F4F2EC;
  padding: var(--space-5);
  position: sticky;
  top: calc(var(--announce-h, 36px) + var(--header-h-default, 84px) + var(--space-3));
}
.woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  padding: var(--space-2) 0;
  border: 0;
  background: transparent;
  color: var(--color-ink);
  vertical-align: baseline;
}
.woocommerce-checkout-review-order-table thead th {
  font-size: var(--fs-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: 800;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-3);
}
.woocommerce-checkout-review-order-table .product-name {
  text-align: left;
  font-weight: 700;
}
.woocommerce-checkout-review-order-table .product-total {
  text-align: right;
  white-space: nowrap;
}
.woocommerce-checkout-review-order-table tbody tr td {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) 0;
}
.woocommerce-checkout-review-order-table tfoot th {
  text-align: left;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-muted);
}
.woocommerce-checkout-review-order-table tfoot td { text-align: right; }
.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
  font-weight: 800;
  font-size: 18px;
  color: var(--color-ink);
}

/* Payment methods */
.woocommerce-checkout-payment {
  background: transparent;
  margin-top: var(--space-4);
}
.woocommerce-checkout-payment ul.payment_methods {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.woocommerce-checkout-payment ul.payment_methods li {
  padding: var(--space-3);
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg);
  margin: 0;
  list-style: none;
  cursor: pointer;
  transition: border-color var(--dur-short), background var(--dur-short);
}
.woocommerce-checkout-payment ul.payment_methods li:has(input:checked) {
  border-color: var(--color-accent);
  background: rgba(179, 69, 37, 0.04);
}
.woocommerce-checkout-payment ul.payment_methods li label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-ink);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}
.woocommerce-checkout-payment .payment_box {
  background: transparent !important;
  margin: var(--space-3) 0 0 !important;
  padding: var(--space-3) 0 0 !important;
  border-top: 1px solid var(--color-border);
  font-size: 13px;
  color: var(--color-muted);
}
.woocommerce-checkout-payment .payment_box::before { display: none; }

/* Terms & conditions */
.woocommerce-terms-and-conditions-wrapper {
  margin: var(--space-4) 0;
  font-size: 13px;
  color: var(--color-muted);
}
.woocommerce-terms-and-conditions-wrapper .form-row {
  margin: var(--space-3) 0;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.woocommerce-terms-and-conditions-wrapper label {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  color: var(--color-muted);
}

.woocommerce form.checkout .place-order {
  padding: var(--space-4) 0 0;
  margin-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* ============================================================
   ORDER RECEIVED / THANK YOU
   ============================================================ */
.woocommerce-order {
  max-width: 760px;
  margin: 0 auto;
}
.woocommerce-order p,
.woocommerce-thankyou-order-received {
  font-family: var(--font-body);
  font-size: var(--fs-body-large);
  line-height: 1.7;
  color: var(--color-ink);
  margin-bottom: var(--space-7);
}
p.woocommerce-thankyou-order-received,
.order-confirmed-details .woocommerce-thankyou-order-received {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
  margin-bottom: var(--space-7);
}

/* Order overview (numbered details strip — order #, date, email, total, payment) */
.woocommerce-order-overview,
ul.woocommerce-order-overview.woocommerce-thankyou-order-details.order_details {
  list-style: none;
  margin: 0 0 var(--space-7);
  padding: var(--space-5) var(--space-6);
  background: #F4F2EC;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-4);
  border: 0;
}
/* WC core (woocommerce.css) puts a clearfix on ul.order_details
   (::before/::after { content: " "; display: table; }). Inside our grid
   container those pseudo-elements become anonymous grid items — the ::before
   fills the first cell and shifts every real field over by one column.
   Remove them. Specificity 0-3-2 beats core's 0-2-2. */
.woocommerce ul.order_details.woocommerce-order-overview::before,
.woocommerce ul.order_details.woocommerce-order-overview::after {
  content: none;
}
.woocommerce-order-overview li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-ink);
  border: 0;
  padding: 0;
  margin: 0;
}
.woocommerce-order-overview li strong {
  font-weight: 700;
  font-size: 15px;
  color: var(--color-ink);
}
/* WC core's checkout/thankyou.php prints a literal label ("Order number:",
   "Date:", "Email:", "Total:", "Payment method:") as a bare text node inside
   each li, ahead of the <strong> value; the ::before rules below add our
   styled label, so both were rendering. A bare text node can't be selected,
   so collapse it with font-size: 0 on the li and restore an explicit size on
   the value. Core's `.woocommerce ul.order_details li` (0-2-2) beats the
   plain li rule above, so these selectors match-and-beat core at 0-3-2 /
   0-3-3. Also zero core's px dashed border-right and em margin/padding here —
   a 1px border survives font-size: 0. The collapsed text node still counts as
   a flex item in the column-flex li, so halve the gap: 2px + 2px = the
   intended 4px between label and value. */
.woocommerce ul.order_details.woocommerce-order-overview li {
  font-size: 0;
  gap: 2px;
  border: 0;
  margin: 0;
  padding: 0;
}
.woocommerce ul.order_details.woocommerce-order-overview li strong {
  font-size: 15px;
}
.woocommerce-order-overview li::before {
  content: attr(class);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--fs-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-muted);
}
/* Replace ugly class-name labels with friendly ones */
.woocommerce-order-overview li.order { }
.woocommerce-order-overview li.order::before { content: "Order Number"; }
.woocommerce-order-overview li.date::before { content: "Date"; }
.woocommerce-order-overview li.email::before { content: "Email"; }
.woocommerce-order-overview li.total::before { content: "Total"; }
.woocommerce-order-overview li.method::before { content: "Payment"; }

/* Order details + customer details — shared receipt-card look */
.woocommerce-order-details,
.woocommerce-customer-details {
  background: #F4F2EC;
  padding: var(--space-6);
  margin-bottom: var(--space-3);
}

/* Tighten the editorial-separator on WC pages — base.css sets var(--space-7)
   for breathing room on home/page contexts; on order-received the customer-
   details + policy links + separator stack feels cramped without reduction. */
body.woocommerce-order-received .editorial-separator,
body.woocommerce-checkout .editorial-separator,
body.woocommerce-cart .editorial-separator {
  padding: var(--space-3) 0;
}
.woocommerce-order-details h2,
.woocommerce-customer-details h2,
.woocommerce-column__title {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-ink);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  margin: 0 0 var(--space-3);
}
.woocommerce-order-details .order_details,
.woocommerce-order-details table.shop_table {
  border: 0;
  margin: 0;
}
.woocommerce-customer-details address {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-ink);
  font-style: normal;
  border: 0;
  padding: 0;
  background: transparent;
}
.woocommerce-customer-details .woocommerce-columns {
  display: flex !important;
  flex-direction: row !important;
  gap: var(--space-5);
  align-items: flex-start;
}
.woocommerce-customer-details .woocommerce-column {
  /* Kill WC's default float/width — flex now controls layout */
  float: none !important;
  width: auto !important;
  flex: 1 1 0 !important;
  padding: 0;
  min-width: 0;
}
.woocommerce-customer-details .woocommerce-column address {
  font-size: var(--fs-body);
  line-height: 1.55;
  padding: 0;
  border: 0;
  background: transparent;
  word-wrap: break-word;
}

/* ============================================================
   MY ACCOUNT — logged out (login + register cards)
   ============================================================ */
.woocommerce-account:not(.logged-in) .u-columns,
.woocommerce-account:not(.logged-in) .woocommerce > .u-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
}
.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  padding: var(--space-6) var(--space-5);
  margin: 0;
}
.woocommerce-form-login .lost_password,
.woocommerce-form-login p:last-child {
  text-align: center;
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--fs-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.woocommerce-form-login .lost_password a,
.woocommerce-LostPassword a {
  color: var(--color-accent);
}

/* ============================================================
   MY ACCOUNT — logged in (sidebar nav + content)
   ============================================================ */
.woocommerce-account.logged-in .woocommerce {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-7);
  align-items: start;
}

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}
.woocommerce-MyAccount-navigation li {
  margin: 0;
  border-bottom: 1px solid var(--color-border);
}
.woocommerce-MyAccount-navigation-link a,
.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: var(--space-3) 0;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--fs-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-ink);
  text-decoration: none;
  transition: color var(--dur-short);
}
.woocommerce-MyAccount-navigation li a:hover,
.woocommerce-MyAccount-navigation li.is-active a {
  color: var(--color-accent);
}

.woocommerce-MyAccount-content { min-width: 0; }
.woocommerce-MyAccount-content > p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-ink);
  margin-bottom: var(--space-4);
}
.woocommerce-MyAccount-content mark {
  background: transparent;
  color: var(--color-accent);
  font-weight: 700;
}

/* Orders table on My Account */
.woocommerce-orders-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.woocommerce-orders-table th {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--fs-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-muted);
  text-align: left;
  padding: 0 var(--space-3) var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.woocommerce-orders-table td {
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-ink);
  vertical-align: middle;
}
.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions {
  text-align: right;
}

/* Addresses (My Account → Addresses) */
.woocommerce-Addresses,
.woocommerce-Addresses.u-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-top: var(--space-4);
}
.woocommerce-Address {
  background: #F4F2EC;
  padding: var(--space-5);
}
.woocommerce-Address-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-ink);
  margin: 0;
}
.woocommerce-Address-title .edit {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--fs-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-accent);
}
.woocommerce-Address address {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-ink);
  font-style: normal;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .woocommerce {
    padding: var(--space-5);
  }
  .woocommerce-cart .woocommerce,
  .woocommerce form.checkout {
    grid-template-columns: 1fr;
  }
  .woocommerce form.checkout #order_review_heading,
  .woocommerce form.checkout #order_review,
  .woocommerce form.checkout #customer_details {
    grid-column: 1;
    grid-row: auto;
  }
  .woocommerce .cart_totals,
  .woocommerce-checkout-review-order { position: static; }
  .woocommerce-account:not(.logged-in) .u-columns,
  .woocommerce-account:not(.logged-in) .woocommerce > .u-columns,
  .woocommerce-account.logged-in .woocommerce,
  .woocommerce-Addresses,
  .woocommerce-customer-details .woocommerce-columns {
    grid-template-columns: 1fr;
  }
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last,
  .woocommerce-form-row--first,
  .woocommerce-form-row--last {
    width: 100%;
    margin-right: 0;
  }
}

@media (max-width: 768px) {
  /* Cart table → stacked rows */
  .woocommerce table.shop_table thead { display: none; }
  .woocommerce table.shop_table,
  .woocommerce table.shop_table tbody,
  .woocommerce table.shop_table tr,
  .woocommerce table.shop_table td { display: block; width: 100%; }
  .woocommerce table.shop_table tr {
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-4) 0;
  }
  .woocommerce table.shop_table td {
    border: 0;
    padding: var(--space-2) 0;
    text-align: left;
  }
  .woocommerce table.shop_table .product-thumbnail { width: auto; }
  .woocommerce table.shop_table .product-subtotal,
  .woocommerce table.shop_table .product-price { text-align: left; }

  /* Order overview → single col */
  .woocommerce-order-overview,
  ul.woocommerce-order-overview.woocommerce-thankyou-order-details.order_details {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   SHOP ARCHIVE (/shop/) — everything scoped under .woocommerce-shop
   (WC body class on the shop page only) so nothing leaks into
   cart/checkout/account, which share this file. Currently a single
   product ("Every Silent Thing", $35.00) but the grid holds 1-3
   columns gracefully for future titles. Cover treatment mirrors
   .book-cover-tile (page-books.css); primary button mirrors
   .woocommerce .button.alt above.
   ============================================================ */

/* Header toolbar — result count + ordering select as a single row,
   underlined like the cart_totals / order-details label rule. WC
   renders these as sibling elements (p.woocommerce-result-count,
   form.woocommerce-ordering) directly inside .woocommerce, so the
   parent becomes the flex row; ul.products gets flex-basis: 100% to
   drop to its own line below without needing negative margins. */
.woocommerce-shop .woocommerce {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
}
.woocommerce-shop .woocommerce-result-count,
.woocommerce-shop .woocommerce-ordering {
  margin: 0 0 var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.woocommerce-shop .woocommerce-result-count {
  flex: 1 1 auto;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--color-muted);
}
.woocommerce-shop .woocommerce-ordering select {
  min-width: 200px;
  padding: 9px 14px;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: 600;
}
.woocommerce-shop ul.products { flex-basis: 100%; }

/* Product grid — 1-up today, holds up to 3 gracefully as the
   catalog grows. Matches the ~280px minimum used by the books grid. */
.woocommerce-shop ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-7) var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 1100px;
}

/* Product card */
.woocommerce-shop ul.products li.product {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.woocommerce-shop ul.products li.product a {
  text-decoration: none;
  color: inherit;
}
.woocommerce-shop ul.products li.product img {
  aspect-ratio: 2/3;
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  background: #F4F2EC;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transition: transform var(--dur-long) var(--ease-out);
}
.woocommerce-shop ul.products li.product:hover img,
.woocommerce-shop ul.products li.product:focus-within img {
  transform: scale(1.03);
}
.woocommerce-shop ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin: var(--space-2) 0 0;
  transition: color var(--dur-short);
}
.woocommerce-shop ul.products li.product a:hover .woocommerce-loop-product__title,
.woocommerce-shop ul.products li.product a:focus-visible .woocommerce-loop-product__title {
  color: var(--color-accent);
}
.woocommerce-shop ul.products li.product .price {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17px;
  color: var(--color-accent);
  margin: 0;
}
.woocommerce-shop ul.products li.product .price del {
  color: var(--color-muted);
  font-weight: 500;
  opacity: 0.7;
  margin-right: var(--space-2);
}
.woocommerce-shop ul.products li.product .price ins {
  text-decoration: none;
}

/* Add-to-cart / pre-order button — same primary pattern as
   .woocommerce .button.alt (ink fill, accent on hover). */
.woocommerce-shop ul.products li.product .button {
  display: block;
  width: 100%;
  margin-top: var(--space-2);
  padding: 14px 28px;
  background: var(--color-ink);
  color: var(--color-bg);
  border: 1px solid var(--color-ink);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: var(--track-cta);
  text-transform: uppercase;
  text-align: center;
  border-radius: 0;
  cursor: pointer;
  transition: background var(--dur-short), color var(--dur-short), border-color var(--dur-short);
}
.woocommerce-shop ul.products li.product .button:hover,
.woocommerce-shop ul.products li.product .button:focus-visible {
  background: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-accent);
}
.woocommerce-shop ul.products li.product .button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .woocommerce-shop .woocommerce {
    flex-direction: column;
    align-items: stretch;
  }
  .woocommerce-shop .woocommerce-ordering select {
    width: 100%;
  }
  .woocommerce-shop ul.products {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
}

/* --- Shop archive corrections after live render review (2026-07-02) ---
   WC core's `ul.products[class*="columns-"] li.product { width: 22.05%; float: left }`
   (0,2,3) was surviving inside our grid track, crushing the card to ~74px.
   Match-and-beat at (0,3,3) with body scoping. Also: the archive template has no
   theme hero, so the products-header needs the fixed-header clearance formula used
   by interior pages, and WC's breadcrumb is hidden to match designed pages. */
body.woocommerce-shop ul.products[class*="columns-"] li.product,
body.woocommerce-shop ul.products li.product {
  float: none;
  width: 100%;
  margin: 0;
}
body.woocommerce-shop ul.products li.product img {
  width: 100%;
  height: auto;
}
body.woocommerce-shop .woocommerce-breadcrumb {
  display: none;
}
body.woocommerce-shop .woocommerce-products-header {
  padding: calc(var(--announce-h) + var(--header-h-default) + var(--space-7)) var(--space-7) var(--space-4);
  max-width: var(--max-page);
  margin: 0 auto;
  text-align: center;
}

/* --- Checkout corrections from site-audit-2026-07-02 (visual-css.md #1-2,
   ux-conversion.md #1/#3/#5) --- */

/* #1: watermark heading clips — "CHECKOUT" (8 chars) lands in hero-about.php's
   `medium` tier (<= 8 chars, same as "Contact" at 7 chars), but the extra
   letter pushes past .about-hero-watermark's overflow:hidden box at common
   viewport widths (base.css line 647/669). Can't touch hero-about.php's
   tiering logic or base.css's shared --medium rule (would also resize
   "Contact"), so re-point the --medium size variable down to the already-
   proven --long tier values, scoped to this page only, at all three
   breakpoints base.css defines (default/tablet/mobile). */
body.woocommerce-checkout .about-hero-watermark--medium {
  --csb-page-hero-watermark-size: clamp(82px, 12vw, 176px);
}
@media (max-width: 1024px) and (min-width: 701px) {
  body.woocommerce-checkout .about-hero-watermark--medium {
    --csb-page-hero-watermark-size: clamp(60px, 9.5vw, 104px);
  }
}
@media (max-width: 700px) {
  body.woocommerce-checkout .about-hero-watermark--medium {
    --csb-page-hero-watermark-size: clamp(34px, 10vw, 52px);
  }
}

/* #2: shipping postcode/phone fields overlap — .wc-block-components-address-form
   (confirmed via evidence/html/csb-checkout-with-item.html) is an unstyled WC
   Blocks flex container with 8 flat sibling .wc-block-components-text-input
   children (country, first_name, last_name, address_1, city, state, postcode,
   phone); nothing in this file previously targeted it (grep confirmed zero
   hits), so city/state's 2-up look was an unpinned default, not a rule, and
   postcode/phone collapsed onto each other. Give the form an explicit 2-col
   grid so every paired row (city+state, postcode+phone) lays out predictably;
   country and address_1 are full-width via grid-column: 1 / -1. */
body.woocommerce-checkout .wc-block-components-address-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-3);
}
body.woocommerce-checkout .wc-block-components-address-form__country,
body.woocommerce-checkout .wc-block-components-address-form__address_1,
body.woocommerce-checkout .wc-block-components-address-form__address_2-toggle {
  grid-column: 1 / -1;
}
@media (max-width: 900px) {
  body.woocommerce-checkout .wc-block-components-address-form {
    grid-template-columns: 1fr;
  }
}

/* #3: mobile express-payment 2-up grid crops "Google Pay" text — the 2-up
   grid at lines ~236-247 above was calibrated for desktop only (comment says
   "~270px per button"); at ~390px mobile, container padding (var(--space-5)
   under the 900px breakpoint) plus the 8px gap leaves ~155px/column, at or
   below the width the same original fix already identified as too narrow.
   Stack to one column below 500px so each wallet button gets full width. */
@media (max-width: 500px) {
  body.woocommerce-checkout .wc-block-components-express-payment__event-buttons {
    grid-template-columns: 1fr !important;
  }
}