/* GENERATED by ux/cart-2026/build_cart_css.py — edit the sources in ux/cart-2026/ or the designbook tokens, then rebuild. */
:root {
  --ms-color-brand: #284915;
  --ms-color-brand-hover: #355612;
  --ms-color-brand-pressed: #1C340F;
  --ms-color-text: #212121;
  --ms-color-muted: #5D645A;
  --ms-color-white: #FFFFFF;
  --ms-color-surface: #F5F5F7;
  --ms-color-sage: #E7ECDF;
  --ms-color-seasonal-burgundy: #74132A;
  --ms-color-border: #D8DED2;
  --ms-color-control-border: #777F71;
  --ms-color-error: #B32632;
  --ms-color-focus: #245CBD;
  --ms-color-disabled-bg: #E6E8E3;
  --ms-color-disabled-text: #5D645A;
  --ms-color-inverse-hover: #FFFFFF24;
  --ms-color-inverse-pressed: #FFFFFF38;
  --ms-font-heading: "Montserrat", Arial, sans-serif;
  --ms-font-body: "Raleway", Arial, sans-serif;
  --ms-space-4: 0.25rem;
  --ms-space-8: 0.5rem;
  --ms-space-12: 0.75rem;
  --ms-space-16: 1rem;
  --ms-space-20: 1.25rem;
  --ms-space-24: 1.5rem;
  --ms-space-32: 2rem;
  --ms-space-40: 2.5rem;
  --ms-space-48: 3rem;
  --ms-space-64: 4rem;
  --ms-space-80: 5rem;
  --ms-space-96: 6rem;
  --ms-radius-button: 6px;
  --ms-radius-card: 12px;
  --ms-radius-media: 12px;
  --ms-radius-field: 8px;
  --ms-radius-badge: 4px;
  --ms-radius-filter: 999px;
  --ms-h1-size: 3.25rem;
  --ms-h1-line: 1.12;
  --ms-h1-weight: 600;
  --ms-h1-tracking: -0.035em;
  --ms-h2-size: 2.25rem;
  --ms-h2-line: 1.2;
  --ms-h2-weight: 600;
  --ms-h2-tracking: -0.025em;
  --ms-h3-size: 1.25rem;
  --ms-h3-line: 1.3;
  --ms-h3-weight: 600;
  --ms-h3-tracking: -0.015em;
  --ms-lead-size: 1.125rem;
  --ms-lead-line: 1.5;
  --ms-lead-weight: 400;
  --ms-lead-tracking: normal;
  --ms-body-size: 1rem;
  --ms-body-line: 1.5;
  --ms-body-weight: 400;
  --ms-body-tracking: normal;
  --ms-small-size: 0.875rem;
  --ms-small-line: 1.5;
  --ms-small-weight: 500;
  --ms-small-tracking: normal;
  --ms-caption-size: 0.75rem;
  --ms-caption-line: 1.5;
  --ms-caption-weight: 500;
  --ms-caption-tracking: normal;
  --ms-button-size: 0.875rem;
  --ms-button-line: 1.4;
  --ms-button-weight: 600;
  --ms-button-tracking: normal;
  --ms-price-size: 1.25rem;
  --ms-price-line: 1.3;
  --ms-price-weight: 600;
  --ms-price-tracking: normal;
  --ms-product-subtitle-size: 0.8125rem;
  --ms-product-subtitle-line: 1.5;
  --ms-product-subtitle-weight: 400;
  --ms-product-subtitle-tracking: normal;
  --ms-product-price-size: 1rem;
  --ms-product-price-line: 1.4;
  --ms-product-price-weight: 600;
  --ms-product-price-tracking: normal;
  --ms-button-small-size: 0.8125rem;
  --ms-button-small-line: 1.4;
  --ms-button-small-weight: 600;
  --ms-button-small-tracking: normal;
  --ms-product-size-label-size: 0.6875rem;
  --ms-product-size-label-line: 1.5;
  --ms-product-size-label-weight: 600;
  --ms-product-size-label-tracking: normal;
  --ms-control-height: 3rem;
  --ms-control-padding-inline: 1.5rem;
  --ms-control-icon: 20px;
  --ms-control-stroke: 2px;
  --ms-control-focus-width: 3px;
  --ms-control-focus-offset: 3px;
  --ms-control-height-small: 40px;
  --ms-control-height-touch: 44px;
  --ms-motion-fast: 160ms;
  --ms-motion-standard: 240ms;
  --ms-motion-entrance: 400ms;
  --ms-motion-stagger: 60ms;
  --ms-hero-light-heading-weight: 500;
  --ms-hero-light-heading-size: 3.75rem;
  --ms-hero-light-lead-size: 1rem;
  --ms-hero-light-secondary-weight: 500;
  --ms-container: 1280px;
  --ms-gutter: 3rem;
  --ms-section-space: 4rem;
}
@media (max-width: 980px) { :root {
  --ms-h1-size: 2.625rem;
  --ms-h2-size: 2rem;
  --ms-h3-size: 1.25rem;
  --ms-lead-size: 1.125rem;
  --ms-body-size: 1rem;
  --ms-small-size: 0.875rem;
  --ms-caption-size: 0.75rem;
  --ms-button-size: 0.875rem;
  --ms-price-size: 1.25rem;
  --ms-product-subtitle-size: 0.8125rem;
  --ms-product-price-size: 1rem;
  --ms-button-small-size: 0.8125rem;
  --ms-product-size-label-size: 0.6875rem;
  --ms-gutter: 2rem;
} }
@media (max-width: 760px) { :root {
  --ms-h1-size: 2rem;
  --ms-h2-size: 1.75rem;
  --ms-h3-size: 1.125rem;
  --ms-lead-size: 1rem;
  --ms-body-size: 1rem;
  --ms-small-size: 0.875rem;
  --ms-caption-size: 0.75rem;
  --ms-button-size: 0.875rem;
  --ms-price-size: 1.125rem;
  --ms-product-subtitle-size: 0.8125rem;
  --ms-product-price-size: 1rem;
  --ms-button-small-size: 0.8125rem;
  --ms-product-size-label-size: 0.6875rem;
  --ms-gutter: 1.25rem;
  --ms-section-space: 2.5rem;
} }
@media (prefers-reduced-motion: reduce) { :root { --ms-motion-fast: 0ms; --ms-motion-standard: 0ms; --ms-motion-entrance: 0ms; --ms-motion-stagger: 0ms; } }

/* ===== shared-blocks.css ===== */
/* Shared by the Cart and Checkout blocks (UX.2), from the cart and checkout concept
   (ux/homepage-2026-prototype/cart.html, checkout.html): step progress, page heading, order totals,
   coupon form, applied-discount tag, saving tag, trust strip and the primary action.
   Tokens only (var(--ms-*)). Selectors start at :is(.wc-block-cart, .wc-block-checkout).wc-block-components-sidebar-layout
   to win over the block styles without !important. */

/* ---------- Step progress: Cart → Details → Complete (woocommerce/checkout/header.php) ---------- */
/* Padding, not margin: a top margin collapsed through #main, so the page ground began mid-stepper, right under the header line */
.ms-checkout-progress { display:flex; align-items:center; justify-content:center; box-sizing:border-box; max-width:calc(520px + 2 * var(--ms-gutter)); margin:0 auto; padding:var(--ms-space-32) var(--ms-gutter) 0; color:var(--ms-color-muted); font:600 var(--ms-caption-size)/1.3 var(--ms-font-heading); }
:is(body.woocommerce-cart, body.woocommerce-checkout) #main > .ms-checkout-progress + .page-wrapper { padding-top:var(--ms-space-40); }
.ms-checkout-progress > :is(span, a) { display:flex; align-items:center; gap:var(--ms-space-8); white-space:nowrap; color:inherit; text-decoration:none; }
.ms-checkout-progress b { display:grid; place-items:center; box-sizing:border-box; width:var(--ms-space-24); height:var(--ms-space-24); border:1px solid var(--ms-color-border); border-radius:var(--ms-radius-filter); font-size:var(--ms-caption-size); font-weight:600; }
.ms-checkout-progress > [aria-current="step"] { color:var(--ms-color-brand); }
.ms-checkout-progress > [aria-current="step"] b { background:var(--ms-color-brand); border-color:var(--ms-color-brand); color:var(--ms-color-white); }
.ms-checkout-progress > .is-done { color:var(--ms-color-brand); }
.ms-checkout-progress > .is-done b { background:var(--ms-color-sage); border-color:var(--ms-color-brand); }
.ms-checkout-progress > a.is-done:hover { text-decoration:underline; text-underline-offset:4px; }
.ms-checkout-progress > a:focus-visible { outline:var(--ms-control-focus-width) solid var(--ms-color-focus); outline-offset:var(--ms-control-focus-offset); border-radius:var(--ms-radius-button); }
.ms-checkout-progress > i { flex:1; min-width:var(--ms-space-24); height:1px; margin-inline:var(--ms-space-12); background:var(--ms-color-border); }
@media (max-width:760px) {
  .ms-checkout-progress { padding-top:var(--ms-space-20); }
  :is(body.woocommerce-cart, body.woocommerce-checkout) #main > .ms-checkout-progress + .page-wrapper { padding-top:var(--ms-space-24); }
  .ms-checkout-progress > :is(span, a) { gap:var(--ms-space-4); }
  .ms-checkout-progress > i { min-width:var(--ms-space-12); margin-inline:var(--ms-space-8); }
}

/* ---------- Page heading (blocks in the page content): eyebrow, H1, lead ---------- */
:is(body.woocommerce-cart, body.woocommerce-checkout) .ms-flow-heading { max-width:760px; margin:0 0 var(--ms-space-40); }
:is(body.woocommerce-cart, body.woocommerce-checkout) .ms-flow-heading > * { margin-block:0; }
:is(body.woocommerce-cart, body.woocommerce-checkout) .ms-flow-heading .ms-flow-eyebrow { margin:0 0 var(--ms-space-8); color:var(--ms-color-brand); font:600 var(--ms-caption-size)/1.4 var(--ms-font-heading); text-transform:uppercase; letter-spacing:.1em; }
:is(body.woocommerce-cart, body.woocommerce-checkout) .ms-flow-heading .ms-flow-title { margin:0; color:var(--ms-color-text); font:var(--ms-h1-weight) var(--ms-h1-size)/var(--ms-h1-line) var(--ms-font-heading); letter-spacing:var(--ms-h1-tracking); text-transform:none; }
:is(body.woocommerce-cart, body.woocommerce-checkout) .ms-flow-heading .ms-flow-lead { margin:var(--ms-space-12) 0 0; color:var(--ms-color-muted); font:var(--ms-lead-weight) var(--ms-lead-size)/var(--ms-lead-line) var(--ms-font-body); }
@media (max-width:760px) {
  :is(body.woocommerce-cart, body.woocommerce-checkout) .ms-flow-heading { margin-bottom:var(--ms-space-24); }
  :is(body.woocommerce-cart, body.woocommerce-checkout) .ms-flow-heading .ms-flow-lead { font-size:var(--ms-body-size); }
}

/* ---------- Saving: quiet caption under the line total, so the price stays the main figure (Gabriela: the red tag pulled attention) ---------- */
:is(.wc-block-cart, .wc-block-checkout).wc-block-components-sidebar-layout .wc-block-components-sale-badge {
  display:inline-block; width:fit-content; margin:0; padding:0; border:0; border-top-left-radius:0; border-top-right-radius:0; border-bottom-left-radius:0; border-bottom-right-radius:0;
  background:transparent; color:var(--ms-color-brand);
  font:var(--ms-caption-weight) var(--ms-caption-size)/var(--ms-caption-line) var(--ms-font-body); text-transform:none; letter-spacing:normal; white-space:nowrap;
}

/* ---------- Totals ---------- */
:is(.wc-block-cart, .wc-block-checkout).wc-block-components-sidebar-layout .wc-block-components-totals-wrapper { border-color:var(--ms-color-border); }
:is(.wc-block-cart, .wc-block-checkout).wc-block-components-sidebar-layout .wc-block-components-totals-wrapper::after { border-color:var(--ms-color-border); }
/* Plugin slots (e.g. upsell offers) take space only when they render something */
:is(.wc-block-cart, .wc-block-checkout).wc-block-components-sidebar-layout .wc-block-components-totals-wrapper.slot-wrapper:not(:has(:is(a,button,input,select,img,p,span,li,label,h2,h3,h4))) { display:none; }
:is(.wc-block-cart, .wc-block-checkout).wc-block-components-sidebar-layout .wc-block-components-totals-item__label { font:var(--ms-body-weight) var(--ms-body-size)/var(--ms-body-line) var(--ms-font-body); color:var(--ms-color-text); }
:is(.wc-block-cart, .wc-block-checkout).wc-block-components-sidebar-layout .wc-block-components-totals-item__value,
:is(.wc-block-cart, .wc-block-checkout).wc-block-components-sidebar-layout .wc-block-components-totals-item__value strong { font:var(--ms-product-price-weight) var(--ms-product-price-size)/var(--ms-product-price-line) var(--ms-font-heading); color:var(--ms-color-text); }
:is(.wc-block-cart, .wc-block-checkout).wc-block-components-sidebar-layout .wc-block-components-totals-item__description,
:is(.wc-block-cart, .wc-block-checkout).wc-block-components-sidebar-layout .wc-block-components-totals-shipping__via,
:is(.wc-block-cart, .wc-block-checkout).wc-block-components-sidebar-layout .wc-block-components-totals-footer-item-tax { font:var(--ms-caption-weight) var(--ms-caption-size)/var(--ms-caption-line) var(--ms-font-body); color:var(--ms-color-muted); }
:is(.wc-block-cart, .wc-block-checkout).wc-block-components-sidebar-layout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font:var(--ms-h3-weight) var(--ms-h3-size)/var(--ms-h3-line) var(--ms-font-heading); letter-spacing:var(--ms-h3-tracking); }
:is(.wc-block-cart, .wc-block-checkout).wc-block-components-sidebar-layout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
:is(.wc-block-cart, .wc-block-checkout).wc-block-components-sidebar-layout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value .wc-block-components-formatted-money-amount { font:var(--ms-price-weight) var(--ms-price-size)/var(--ms-price-line) var(--ms-font-heading); color:var(--ms-color-text); }

/* Coupon panel toggle: disclosure title role with the shared hover */
:is(.wc-block-cart, .wc-block-checkout).wc-block-components-sidebar-layout .wc-block-components-totals-coupon .wc-block-components-panel__button { font:var(--ms-button-weight) var(--ms-body-size)/var(--ms-body-line) var(--ms-font-heading); color:var(--ms-color-text); transition:color var(--ms-motion-fast); }
:is(.wc-block-cart, .wc-block-checkout).wc-block-components-sidebar-layout .wc-block-components-totals-coupon .wc-block-components-panel__button:hover { color:var(--ms-color-brand-hover); }
:is(.wc-block-cart, .wc-block-checkout).wc-block-components-sidebar-layout .wc-block-components-totals-coupon .wc-block-components-panel__button:focus-visible { outline:var(--ms-control-focus-width) solid var(--ms-color-focus); outline-offset:var(--ms-control-focus-offset); }
:is(.wc-block-cart, .wc-block-checkout).wc-block-components-sidebar-layout .wc-block-components-totals-coupon input { border-color:var(--ms-color-control-border); border-radius:var(--ms-radius-field); font:var(--ms-body-weight) var(--ms-body-size)/var(--ms-body-line) var(--ms-font-body); }

/* Applied coupon / automatic discount: informational tag with its remove control */
:is(.wc-block-cart, .wc-block-checkout).wc-block-components-sidebar-layout .wc-block-components-chip {
  display:inline-flex; align-items:center; gap:var(--ms-space-4); margin:var(--ms-space-8) var(--ms-space-8) 0 0; padding:var(--ms-space-4) var(--ms-space-4) var(--ms-space-4) var(--ms-space-8);
  border:0; border-radius:var(--ms-radius-badge); background:var(--ms-color-sage); color:var(--ms-color-brand);
  font:600 var(--ms-caption-size)/var(--ms-caption-line) var(--ms-font-body);
}
:is(.wc-block-cart, .wc-block-checkout).wc-block-components-sidebar-layout .wc-block-components-chip .wc-block-components-chip__text { font:inherit; color:inherit; }
:is(.wc-block-cart, .wc-block-checkout).wc-block-components-sidebar-layout .wc-block-components-chip .wc-block-components-chip__remove { display:inline-grid; place-items:center; width:var(--ms-space-24); height:var(--ms-space-24); margin:0; border:0; border-radius:var(--ms-radius-badge); background:transparent; color:var(--ms-color-brand); }
:is(.wc-block-cart, .wc-block-checkout).wc-block-components-sidebar-layout .wc-block-components-chip .wc-block-components-chip__remove:hover { background:var(--ms-color-border); }
:is(.wc-block-cart, .wc-block-checkout).wc-block-components-sidebar-layout .wc-block-components-chip .wc-block-components-chip__remove:focus-visible { outline:var(--ms-control-focus-width) solid var(--ms-color-focus); outline-offset:var(--ms-control-focus-offset); }
:is(.wc-block-cart, .wc-block-checkout).wc-block-components-sidebar-layout .wc-block-components-chip .wc-block-components-chip__remove svg { fill:currentColor; }

/* ---------- Trust strip (group block in the page content, next to the primary action) ---------- */
:is(.wc-block-cart, .wc-block-checkout).wc-block-components-sidebar-layout .ms-trust-strip { display:grid; grid-template-columns:1fr 1.25fr; gap:var(--ms-space-8); margin:0 0 var(--ms-space-16); padding:var(--ms-space-12); border-radius:var(--ms-radius-field); background:var(--ms-color-surface); }
:is(.wc-block-cart, .wc-block-checkout).wc-block-components-sidebar-layout .ms-trust-strip > p { display:flex; align-items:center; gap:var(--ms-space-8); margin:0; color:var(--ms-color-text); font:600 var(--ms-caption-size)/1.35 var(--ms-font-body); }
:is(.wc-block-cart, .wc-block-checkout).wc-block-components-sidebar-layout .ms-trust-strip > p::before { content:""; flex:0 0 18px; width:18px; height:18px; background:var(--ms-color-brand); -webkit-mask:var(--ms-trust-icon) center / contain no-repeat; mask:var(--ms-trust-icon) center / contain no-repeat; }
.ms-trust-strip > p.ms-trust-strip__secure { --ms-trust-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6v5c0 4.8 2.8 8 7 10 4.2-2 7-5.2 7-10V6l-7-3Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.ms-trust-strip > p.ms-trust-strip__delivery { --ms-trust-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3v3m10-3v3M4 9h16M5 5h14a1 1 0 0 1 1 1v13H4V6a1 1 0 0 1 1-1Z'/%3E%3Cpath d='m8 14 2 2 5-5'/%3E%3C/svg%3E"); }
@media (max-width:760px) { :is(.wc-block-cart, .wc-block-checkout).wc-block-components-sidebar-layout .ms-trust-strip { grid-template-columns:1fr; } }

/* ---------- Primary action (Continue to checkout, Place order): primary .ms-button ---------- */
:is(.wc-block-cart, .wc-block-checkout).wc-block-components-sidebar-layout :is(.wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button) {
  display:flex; align-items:center; justify-content:center; box-sizing:border-box; width:100%; margin:0; /* the theme gives buttons a right margin, which pushed the centred button off the card edges */
  min-height:var(--ms-control-height); padding:var(--ms-space-12) var(--ms-control-padding-inline);
  border:1px solid var(--ms-color-brand); border-radius:var(--ms-radius-button); background:var(--ms-color-brand); color:var(--ms-color-white);
  font:var(--ms-button-weight) var(--ms-button-size)/var(--ms-button-line) var(--ms-font-heading); letter-spacing:var(--ms-button-tracking); text-transform:none; text-decoration:none; box-shadow:none;
  transition:background-color var(--ms-motion-fast),border-color var(--ms-motion-fast);
}
:is(.wc-block-cart, .wc-block-checkout).wc-block-components-sidebar-layout :is(.wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button) .wc-block-components-button__text { font:inherit; color:inherit; }
:is(.wc-block-cart, .wc-block-checkout).wc-block-components-sidebar-layout :is(.wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button):hover { background:var(--ms-color-brand-hover); border-color:var(--ms-color-brand-hover); color:var(--ms-color-white); }
:is(.wc-block-cart, .wc-block-checkout).wc-block-components-sidebar-layout :is(.wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button):active { background:var(--ms-color-brand-pressed); border-color:var(--ms-color-brand-pressed); }
:is(.wc-block-cart, .wc-block-checkout).wc-block-components-sidebar-layout :is(.wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button):focus-visible { outline:var(--ms-control-focus-width) solid var(--ms-color-focus); outline-offset:var(--ms-control-focus-offset); box-shadow:0 0 0 3px var(--ms-color-white); }
:is(.wc-block-cart, .wc-block-checkout).wc-block-components-sidebar-layout :is(.wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button):disabled { background:var(--ms-color-disabled-bg); border-color:var(--ms-color-disabled-bg); color:var(--ms-color-disabled-text); cursor:not-allowed; }

/* ===== cart-blocks.css ===== */
/* Cart block (UX.2) — Mason designbook on WooCommerce markup, layout from the cart concept
   (ux/homepage-2026-prototype/cart.html): white product cards on a neutral page on phones,
   configuration rows, a labelled quantity field with a text "Remove", the delivery-date note and
   the order card. Tokens only (var(--ms-*)). Step progress, page heading, totals, tags, trust strip
   and the primary action live in shared-blocks.css. Selectors start at
   .wc-block-cart.wc-block-components-sidebar-layout to win over the block and Product Bundles
   styles without !important. */

/* ---------- Page: neutral ground on phones so the cards read as cards ---------- */
@media (max-width:760px) { body.woocommerce-cart #main { background:var(--ms-color-surface); } }

/* ---------- Line items ---------- */
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items { color:var(--ms-color-text); }
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items th { font:var(--ms-caption-weight) var(--ms-caption-size)/var(--ms-caption-line) var(--ms-font-body); color:var(--ms-color-muted); text-transform:none; letter-spacing:normal; border-color:var(--ms-color-border); }
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-items__row td { border-color:var(--ms-color-border); }
/* Narrow layouts: every product is a white card; photo | name (flexible) | line total */
.wc-block-cart.wc-block-components-sidebar-layout:not(.is-large) table.wc-block-cart-items,
.wc-block-cart.wc-block-components-sidebar-layout:not(.is-large) table.wc-block-cart-items tbody { display:block; }
.wc-block-cart.wc-block-components-sidebar-layout:not(.is-large) table.wc-block-cart-items .wc-block-cart-items__row { margin:0 0 var(--ms-space-16); padding:var(--ms-space-16); border:0; border-radius:var(--ms-radius-card); background:var(--ms-color-white); }
.wc-block-cart.wc-block-components-sidebar-layout:not(.is-large) table.wc-block-cart-items .wc-block-cart-items__row:not(.is-bundled) { grid-template-columns:calc(var(--ms-space-64) + var(--ms-space-16)) minmax(0,1fr) auto; }
.wc-block-cart.wc-block-components-sidebar-layout:not(.is-large) table.wc-block-cart-items .wc-block-cart-items__row:not(.is-bundled) .wc-block-cart-item__product { grid-column:2; }
.wc-block-cart.wc-block-components-sidebar-layout:not(.is-large) table.wc-block-cart-items .wc-block-cart-items__row:not(.is-bundled) .wc-block-cart-item__total { grid-column:3; padding-left:var(--ms-space-12); }

/* Photo: designbook media frame (radius 12 on a neutral surface); 120 px on wide layouts, 64 px on narrow */
.wc-block-cart.wc-block-components-sidebar-layout.is-large table.wc-block-cart-items .wc-block-cart-items__header .wc-block-cart-items__header-image { width:calc(var(--ms-space-96) + var(--ms-space-24) + var(--ms-space-16)); }
.wc-block-cart.wc-block-components-sidebar-layout.is-large table.wc-block-cart-items .wc-block-cart-items__row:not(.is-bundled) td.wc-block-cart-item__image { padding-right:var(--ms-space-16); }
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-item__image a { display:block; overflow:hidden; border-radius:var(--ms-radius-media); background:var(--ms-color-surface); }
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-item__image img { display:block; border-radius:inherit; }

/* Name: H3 role (as the concept card) */
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-components-product-name { font:var(--ms-h3-weight) var(--ms-h3-size)/var(--ms-h3-line) var(--ms-font-heading); letter-spacing:var(--ms-h3-tracking); color:var(--ms-color-text); text-decoration:none; }
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items a.wc-block-components-product-name:hover { color:var(--ms-color-brand-hover); text-decoration:underline; text-underline-offset:4px; }

/* Unit price: small role, muted */
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-item__prices { margin-top:var(--ms-space-4); font:var(--ms-small-weight) var(--ms-small-size)/var(--ms-small-line) var(--ms-font-body); color:var(--ms-color-muted); }
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-item__prices del { color:var(--ms-color-muted); }
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-item__prices ins { color:var(--ms-color-text); text-decoration:none; background:none; }
/* One amount per line: with quantity 1 the unit price equals the line total, so only the total is shown (Gabriela) */
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-items__row:not(.is-bundled):has(.wc-block-components-quantity-selector input[value="1"]) .wc-block-cart-item__prices { display:none; }
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-components-product-metadata { margin-top:var(--ms-space-4); font:var(--ms-small-weight) var(--ms-small-size)/var(--ms-small-line) var(--ms-font-body); color:var(--ms-color-muted); }
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-components-product-details { margin:0; }

/* Configuration rows: option name (muted) | chosen value (strong), one per line */
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-items__row:not(.is-bundled) .wc-block-components-product-details { display:grid; gap:var(--ms-space-8); margin:var(--ms-space-16) 0 0; }
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-items__row:not(.is-bundled) .wc-block-components-product-details > span { display:grid; grid-template-columns:minmax(0,110px) minmax(0,1fr); gap:var(--ms-space-16); }
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-items__row:not(.is-bundled) .wc-block-components-product-details > span > span:not([class]) { display:none; }
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-items__row:not(.is-bundled) .wc-block-components-product-details__name { color:var(--ms-color-muted); }
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-items__row:not(.is-bundled) .wc-block-components-product-details__value { color:var(--ms-color-text); font-weight:600; }
/* A kit's "Includes" list (shown when the bundle has no item rows) is a plain list, not option values */
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-details__includes { display:block; }
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-details__includes .wc-block-components-product-details__value { font-weight:var(--ms-body-weight); }
/* Phones: the text column is narrow, so each option wraps as one line ("Tree Height: 6 ft (1.8 metres)") */
.wc-block-cart.wc-block-components-sidebar-layout:not(.is-large) table.wc-block-cart-items .wc-block-cart-items__row:not(.is-bundled) .wc-block-components-product-details { gap:var(--ms-space-4); margin-top:var(--ms-space-12); }
.wc-block-cart.wc-block-components-sidebar-layout:not(.is-large) table.wc-block-cart-items .wc-block-cart-items__row:not(.is-bundled) .wc-block-components-product-details > span { display:flex; flex-wrap:wrap; gap:0 var(--ms-space-4); font-size:var(--ms-caption-size); line-height:var(--ms-caption-line); }

/* Long product descriptions belong on the product page: keep only the bundle "Edit item" link */
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-components-product-metadata__description > :not(.wc-block-cart-item__edit) { display:none; }
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-item__edit { margin:var(--ms-space-4) 0 0; }
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-item__edit a {
  display:inline-flex; align-items:center; min-height:var(--ms-control-height-touch);
  font:var(--ms-button-weight) var(--ms-button-size)/var(--ms-button-line) var(--ms-font-heading); color:var(--ms-color-brand);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px;
  transition:color var(--ms-motion-fast);
}
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-item__edit a:hover { color:var(--ms-color-brand-hover); text-decoration-thickness:2px; }
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-item__edit a:active { color:var(--ms-color-brand-pressed); text-decoration-thickness:2px; }

/* Quantity and Remove: labelled field on the left, text link on the right */
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-items__row:not(.is-bundled) .wc-block-cart-item__quantity { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:end; align-self:stretch; box-sizing:border-box; width:100%; gap:var(--ms-space-8) var(--ms-space-16); margin-top:var(--ms-space-16); }
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-items__row:not(.is-bundled) .wc-block-cart-item__quantity::before { content:"Quantity"; grid-column:1; grid-row:1; color:var(--ms-color-muted); font:600 var(--ms-caption-size)/var(--ms-caption-line) var(--ms-font-body); }
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-items__row:not(.is-bundled) .wc-block-cart-item__quantity .wc-block-components-quantity-selector { grid-column:1; grid-row:2; }
.wc-block-cart.wc-block-components-sidebar-layout .wc-block-components-quantity-selector { min-height:var(--ms-control-height-small); width:calc(3 * var(--ms-control-height-small)); margin:0; overflow:hidden; border:1px solid var(--ms-color-control-border); border-radius:var(--ms-radius-field); }
.wc-block-cart.wc-block-components-sidebar-layout .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input { min-height:var(--ms-control-height-small); border-inline:1px solid var(--ms-color-border); font:600 var(--ms-body-size)/var(--ms-body-line) var(--ms-font-body); color:var(--ms-color-text); }
.wc-block-cart.wc-block-components-sidebar-layout .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button { min-width:var(--ms-control-height-small); color:var(--ms-color-text); opacity:1; background:var(--ms-color-white); transition:background-color var(--ms-motion-fast); }
.wc-block-cart.wc-block-components-sidebar-layout .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover { background:var(--ms-color-sage); color:var(--ms-color-brand); }
.wc-block-cart.wc-block-components-sidebar-layout .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:active { background:var(--ms-color-border); }
.wc-block-cart.wc-block-components-sidebar-layout .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:disabled { color:var(--ms-color-disabled-text); background:var(--ms-color-white); }
.wc-block-cart.wc-block-components-sidebar-layout .wc-block-components-quantity-selector :focus-visible { outline:var(--ms-control-focus-width) solid var(--ms-color-focus); outline-offset:calc(-1 * var(--ms-control-focus-width)); }
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-item__remove-link {
  grid-column:2; grid-row:2; justify-self:end; display:inline-flex; align-items:center; width:auto; height:auto; min-height:var(--ms-control-height-small); margin:0; padding:0 var(--ms-space-8);
  border:0; border-radius:var(--ms-radius-button); background:transparent; color:var(--ms-color-muted); cursor:pointer;
  font:var(--ms-small-weight) var(--ms-small-size)/var(--ms-small-line) var(--ms-font-body); text-decoration:underline; text-underline-offset:4px; transition:color var(--ms-motion-fast);
}
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-item__remove-link svg { display:none; }
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-item__remove-link::after { content:"Remove"; }
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-item__remove-link:hover { color:var(--ms-color-brand); background:transparent; }
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-item__remove-link:focus-visible { outline:var(--ms-control-focus-width) solid var(--ms-color-focus); outline-offset:var(--ms-control-focus-offset); }
@media (max-width:760px), (pointer:coarse) {
  .wc-block-cart.wc-block-components-sidebar-layout .wc-block-components-quantity-selector,
  .wc-block-cart.wc-block-components-sidebar-layout .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input { min-height:var(--ms-control-height-touch); }
  .wc-block-cart.wc-block-components-sidebar-layout .wc-block-components-quantity-selector { width:calc(3 * var(--ms-control-height-touch)); }
  .wc-block-cart.wc-block-components-sidebar-layout .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button { min-width:var(--ms-control-height-touch); }
  .wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-item__remove-link { min-height:var(--ms-control-height-touch); }
}
/* Narrow layouts: the quantity row runs under the line total, so "Remove" ends at the card's right edge like the price (Gabriela).
   The table is the size container: row content = table width - row padding, minus the photo column. WooCommerce's 16 px end
   padding is dropped and the link's own padding hangs into the card padding, so its text lines up with the price text */
.wc-block-cart.wc-block-components-sidebar-layout:not(.is-large) table.wc-block-cart-items { container-type:inline-size; }
.wc-block-cart.wc-block-components-sidebar-layout:not(.is-large) table.wc-block-cart-items .wc-block-cart-items__row:not(.is-bundled) .wc-block-cart-item__quantity { position:relative; width:calc(100cqw - 2 * var(--ms-space-16) - (var(--ms-space-64) + var(--ms-space-16))); padding-right:0; }
.wc-block-cart.wc-block-components-sidebar-layout:not(.is-large) table.wc-block-cart-items .wc-block-cart-items__row:not(.is-bundled) .wc-block-cart-item__remove-link { margin-right:calc(-1 * var(--ms-space-8)); }

/* Line total: price role (product price on phones); the saving tag is in shared-blocks.css */
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-item__total { font:var(--ms-price-weight) var(--ms-price-size)/var(--ms-price-line) var(--ms-font-heading); color:var(--ms-color-text); }
.wc-block-cart.wc-block-components-sidebar-layout:not(.is-large) table.wc-block-cart-items .wc-block-cart-item__total { font-size:var(--ms-product-price-size); }
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-item__total .wc-block-components-product-price { font:inherit; color:inherit; }

/* ---------- Bundles: one group — the kit row carries price, quantity and "Edit item";
   bundled items are listed under it without their own price, quantity or remove ---------- */
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-items__row.is-bundle::after,
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-items__row.is-bundled::after { content:none; display:none; }
/* Narrow layouts (the block turns rows into grids): kit and items share one card, items indented under the kit's text column */
.wc-block-cart.wc-block-components-sidebar-layout:not(.is-large) table.wc-block-cart-items .wc-block-cart-items__row.is-bundle { margin-bottom:0; padding-bottom:var(--ms-space-12); border-bottom-left-radius:0; border-bottom-right-radius:0; }
.wc-block-cart.wc-block-components-sidebar-layout:not(.is-large) table.wc-block-cart-items .wc-block-cart-items__row.is-bundled {
  display:grid; grid-template-columns:var(--ms-space-64) var(--ms-space-40) minmax(0,1fr); column-gap:var(--ms-space-16); align-items:start;
  margin:0; padding:0 var(--ms-space-16) var(--ms-space-12); border-top-left-radius:0; border-top-right-radius:0; border-bottom-left-radius:0; border-bottom-right-radius:0;
}
.wc-block-cart.wc-block-components-sidebar-layout:not(.is-large) table.wc-block-cart-items .wc-block-cart-items__row.is-bundled.is-bundled__last { margin-bottom:var(--ms-space-16); padding-bottom:var(--ms-space-16); border-bottom-left-radius:var(--ms-radius-card); border-bottom-right-radius:var(--ms-radius-card); }
.wc-block-cart.wc-block-components-sidebar-layout:not(.is-large) table.wc-block-cart-items .wc-block-cart-items__row.is-bundled td { border:0; padding:0; }
.wc-block-cart.wc-block-components-sidebar-layout:not(.is-large) table.wc-block-cart-items .wc-block-cart-items__row.is-bundled td.wc-block-cart-item__image { grid-column:2; grid-row:1; width:auto; }
.wc-block-cart.wc-block-components-sidebar-layout:not(.is-large) table.wc-block-cart-items .wc-block-cart-items__row.is-bundled td.wc-block-cart-item__product { grid-column:3; grid-row:1; width:auto; }
/* Wide layout (table): thumbnail at the right edge of the photo column, name in the kit's text column */
.wc-block-cart.wc-block-components-sidebar-layout.is-large table.wc-block-cart-items .wc-block-cart-items__row.is-bundle td { padding-bottom:var(--ms-space-12); }
.wc-block-cart.wc-block-components-sidebar-layout.is-large table.wc-block-cart-items .wc-block-cart-items__row.is-bundled td { border-top:0; padding-top:0; padding-bottom:var(--ms-space-12); }
.wc-block-cart.wc-block-components-sidebar-layout.is-large table.wc-block-cart-items .wc-block-cart-items__row.is-bundled td.wc-block-cart-item__image { padding-right:var(--ms-space-16); text-align:right; }
.wc-block-cart.wc-block-components-sidebar-layout.is-large table.wc-block-cart-items .wc-block-cart-items__row.is-bundled.is-bundled__last td { padding-bottom:var(--ms-space-20); }
/* Both layouts */
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-items__row.is-bundled td.wc-block-cart-item__image::after { content:none; }
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-items__row.is-bundled td.wc-block-cart-item__image a { display:inline-block; width:var(--ms-space-40); height:var(--ms-space-40); vertical-align:top; }
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-items__row.is-bundled td.wc-block-cart-item__image img { position:static; width:100%; height:100%; margin:0; object-fit:cover; }
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-items__row.is-bundled .wc-block-cart-item__wrap { padding:0; font-size:inherit; }
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-items__row.is-bundled td.wc-block-cart-item__total,
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-items__row.is-bundled .wc-block-cart-item__prices,
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-items__row.is-bundled .wc-block-cart-item__remove-link { display:none; }
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-items__row.is-bundled .wc-block-components-product-name { font:var(--ms-small-weight) var(--ms-small-size)/var(--ms-small-line) var(--ms-font-body); letter-spacing:normal; color:var(--ms-color-text); }
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-items__row.is-bundled .wc-block-components-product-metadata { margin-top:0; font:var(--ms-caption-weight) var(--ms-caption-size)/var(--ms-caption-line) var(--ms-font-body); }
/* Item line: name and options on the left, "× n" on the right */
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-items__row.is-bundled .wc-block-cart-item__wrap { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:var(--ms-space-12); align-items:start; }
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-items__row.is-bundled .wc-block-cart-item__wrap > * { grid-column:1; }
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-items__row.is-bundled .wc-block-cart-item__wrap > .wc-block-cart-item__quantity { grid-column:2; grid-row:1; }
/* Items with photos come first; the kit's quantity and Remove sit under them. js/checkout-flow-2026.js measures the rows and
   sets --ms-bundle-qty-h, --ms-bundle-shift and --ms-bundle-reserve; the text "Includes" list would repeat the item rows */
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-items__row.is-bundle[data-ms-bundle-rows] .wc-block-components-product-details > span.wc-block-components-product-details__includes { display:none; }
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-items__row.is-bundle[data-ms-bundle-rows] .wc-block-components-product-details:not(:has(> span:not(.wc-block-components-product-details__includes))),
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-items__row.is-bundle[data-ms-bundle-rows] .wc-block-components-product-metadata:not(:has(.wc-block-cart-item__edit, .wc-block-components-product-details > span:not(.wc-block-components-product-details__includes))) { display:none; }
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-items__row.is-bundle[data-ms-bundle-rows] .wc-block-cart-item__quantity { position:relative; z-index:1; margin-bottom:calc(-1 * var(--ms-bundle-qty-h, 0px)); transform:translateY(var(--ms-bundle-shift, 0px)); }
.wc-block-cart.wc-block-components-sidebar-layout:not(.is-large) table.wc-block-cart-items .wc-block-cart-items__row.is-bundled[data-ms-bundle-reserve] { padding-bottom:calc(var(--ms-bundle-reserve) + var(--ms-space-16)); }
.wc-block-cart.wc-block-components-sidebar-layout.is-large table.wc-block-cart-items .wc-block-cart-items__row.is-bundled[data-ms-bundle-reserve] td { padding-bottom:calc(var(--ms-bundle-reserve) + var(--ms-space-20)); }
/* Bundled quantity is read-only here ("× 2", as in the kit's own item list) and hidden when it is 1; changes go through "Edit item" */
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-items__row.is-bundled .wc-block-cart-item__quantity { margin-top:0; }
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-items__row.is-bundled .wc-block-cart-item__quantity:has(input[value="1"]) { display:none; }
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-items__row.is-bundled .wc-block-components-quantity-selector { display:inline-flex; align-items:center; width:auto; min-height:0; border:0; pointer-events:none; }
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-items__row.is-bundled .wc-block-components-quantity-selector::after,
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-items__row.is-bundled .wc-block-components-quantity-selector__button { display:none; }
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-items__row.is-bundled .wc-block-components-quantity-selector::before { content:"×"; font:var(--ms-caption-weight) var(--ms-caption-size)/var(--ms-caption-line) var(--ms-font-body); color:var(--ms-color-muted); }
.wc-block-cart.wc-block-components-sidebar-layout table.wc-block-cart-items .wc-block-cart-items__row.is-bundled .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input { order:1; width:4ch; min-height:0; padding:0 0 0 var(--ms-space-4); border:0; background:transparent; text-align:left; font:var(--ms-caption-weight) var(--ms-caption-size)/var(--ms-caption-line) var(--ms-font-body); color:var(--ms-color-muted); }

/* ---------- Delivery-date note (group block under the "Your cart" heading, editable in the page) ---------- */
body.woocommerce-cart .ms-flow-heading .ms-season-note { display:grid; grid-template-columns:22px minmax(0,1fr); column-gap:var(--ms-space-12); align-items:start; box-sizing:border-box; width:100%; max-width:none; margin:var(--ms-space-20) 0 0; padding:var(--ms-space-16) var(--ms-space-20); border-radius:var(--ms-radius-card); background:var(--ms-color-surface); }
body.woocommerce-cart .ms-flow-heading:has(.ms-season-note) { max-width:none; }
/* Phones: the cart page ground is grey, so the note is white like the product cards */
@media (max-width:760px) { body.woocommerce-cart .ms-flow-heading .ms-season-note { padding:var(--ms-space-12) var(--ms-space-16); background:var(--ms-color-white); } }
body.woocommerce-cart .ms-flow-heading .ms-season-note::before { content:""; grid-row:1 / span 2; width:22px; height:22px; background:var(--ms-color-brand); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3v3m10-3v3M4 9h16M5 5h14a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E") center / contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3v3m10-3v3M4 9h16M5 5h14a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E") center / contain no-repeat; }
body.woocommerce-cart .ms-flow-heading .ms-season-note > p { grid-column:2; margin:0; }
body.woocommerce-cart .ms-flow-heading .ms-season-note .ms-season-note__title { color:var(--ms-color-text); font:600 var(--ms-small-size)/1.4 var(--ms-font-heading); }
body.woocommerce-cart .ms-flow-heading .ms-season-note .ms-season-note__text { margin-top:2px; color:var(--ms-color-muted); font:var(--ms-caption-weight) var(--ms-caption-size)/var(--ms-caption-line) var(--ms-font-body); }

/* ---------- Order card (the totals sidebar) ---------- */
.wc-block-cart.wc-block-components-sidebar-layout .wc-block-cart__sidebar { box-sizing:border-box; padding:var(--ms-space-32); border:1px solid var(--ms-color-border); border-radius:var(--ms-radius-card); background:var(--ms-color-white); box-shadow:0 14px 40px color-mix(in srgb, var(--ms-color-text) 6%, transparent); }
.wc-block-cart.wc-block-components-sidebar-layout:not(.is-large) .wc-block-cart__sidebar { padding:var(--ms-space-24) var(--ms-space-16); box-shadow:none; }
.wc-block-cart.wc-block-components-sidebar-layout .wc-block-cart__totals-title { font:var(--ms-h3-weight) var(--ms-h3-size)/var(--ms-h3-line) var(--ms-font-heading); letter-spacing:var(--ms-h3-tracking); text-transform:none; color:var(--ms-color-text); }
.wc-block-cart.wc-block-components-sidebar-layout .wc-block-cart__submit-container--sticky { background:var(--ms-color-white); padding:var(--ms-space-12) var(--ms-gutter); }

/* ---------- Upsell offers (UpsellWP / CUW, location "Cart block: order meta") as a designbook card:
   photo, name, offer line as an informational tag, price, quantity field and the subtle small card CTA.
   The plugin prints inline styles, so the properties it sets inline need !important here. ---------- */
.wc-block-cart.wc-block-components-sidebar-layout .cuw-offers .cuw-offer + .cuw-offer { margin-top:var(--ms-space-12); }
.wc-block-cart.wc-block-components-sidebar-layout .cuw-offers .cuw-container { margin:var(--ms-space-16) 0 !important; padding:var(--ms-space-16) !important; border:1px solid var(--ms-color-border) !important; border-radius:var(--ms-radius-card); background:var(--ms-color-white) !important; }
.wc-block-cart.wc-block-components-sidebar-layout .cuw-offers .cuw-product-section { display:grid !important; grid-template-columns:var(--ms-space-64) minmax(0,1fr); gap:var(--ms-space-8) var(--ms-space-12) !important; align-items:start !important; }
.wc-block-cart.wc-block-components-sidebar-layout .cuw-offers .cuw-product-image { grid-column:1; grid-row:1 / span 2; width:var(--ms-space-64) !important; min-width:0 !important; height:var(--ms-space-64) !important; overflow:hidden; border-radius:var(--ms-radius-media); background:var(--ms-color-surface); }
.wc-block-cart.wc-block-components-sidebar-layout .cuw-offers .cuw-product-image img { display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.wc-block-cart.wc-block-components-sidebar-layout .cuw-offers .cuw-product-section > div:not([class]) { grid-column:2; min-width:0 !important; padding:0 !important; }
.wc-block-cart.wc-block-components-sidebar-layout .cuw-offers .cuw-product-title { margin:0 !important; font:var(--ms-h3-weight) var(--ms-body-size)/var(--ms-body-line) var(--ms-font-heading); color:var(--ms-color-text) !important; text-transform:none; letter-spacing:normal; }
.wc-block-cart.wc-block-components-sidebar-layout .cuw-offers .cuw-product-variants:empty { display:none; }
.wc-block-cart.wc-block-components-sidebar-layout .cuw-offers .cuw-offer-title {
  display:inline-block; width:fit-content; max-width:100%; margin:var(--ms-space-4) 0 0 !important; padding:var(--ms-space-4) var(--ms-space-8) !important; border-radius:var(--ms-radius-badge) !important;
  background:var(--ms-color-sage) !important; color:var(--ms-color-brand) !important;
  font:600 var(--ms-caption-size)/var(--ms-caption-line) var(--ms-font-body) !important; text-transform:none; letter-spacing:normal;
}
.wc-block-cart.wc-block-components-sidebar-layout .cuw-offers .cuw-product-price { grid-column:2; margin:0 !important; text-align:left !important; font:var(--ms-product-price-weight) var(--ms-product-price-size)/var(--ms-product-price-line) var(--ms-font-heading); color:var(--ms-color-text); }
.wc-block-cart.wc-block-components-sidebar-layout .cuw-offers .cuw-product-price del { margin-right:var(--ms-space-4); font:var(--ms-small-weight) var(--ms-small-size)/var(--ms-small-line) var(--ms-font-body); color:var(--ms-color-muted); }
.wc-block-cart.wc-block-components-sidebar-layout .cuw-offers .cuw-product-price ins { text-decoration:none; background:none; }
.wc-block-cart.wc-block-components-sidebar-layout .cuw-offers .cuw-product-quantity { grid-column:1; text-align:left !important; }
.wc-block-cart.wc-block-components-sidebar-layout .cuw-offers .cuw-product-quantity .quantity-input { display:flex; align-items:center; }
.wc-block-cart.wc-block-components-sidebar-layout .cuw-offers .cuw-qty { box-sizing:border-box; width:var(--ms-space-64); min-height:var(--ms-control-height-small); margin:0 !important; padding:0 var(--ms-space-8); border:1px solid var(--ms-color-control-border); border-radius:var(--ms-radius-field); background:var(--ms-color-white); text-align:center; font:var(--ms-body-weight) var(--ms-body-size)/var(--ms-body-line) var(--ms-font-body); color:var(--ms-color-text); box-shadow:none; }
.wc-block-cart.wc-block-components-sidebar-layout .cuw-offers .cuw-plus,
.wc-block-cart.wc-block-components-sidebar-layout .cuw-offers .cuw-minus { display:none; }
.wc-block-cart.wc-block-components-sidebar-layout .cuw-offers .cuw-offer-cta-section { grid-column:2; margin:0 !important; border-radius:var(--ms-radius-button) !important; background:transparent !important; color:var(--ms-color-brand) !important; }
.wc-block-cart.wc-block-components-sidebar-layout .cuw-offers .cuw-button {
  display:inline-flex !important; align-items:center; justify-content:center; box-sizing:border-box; width:100% !important; min-height:var(--ms-control-height-small);
  padding:var(--ms-space-8) var(--ms-space-16) !important; border:1px solid var(--ms-color-border) !important; border-radius:var(--ms-radius-button) !important; background:transparent !important; color:var(--ms-color-brand) !important;
  font:var(--ms-button-small-weight) var(--ms-button-small-size)/var(--ms-button-small-line) var(--ms-font-heading); text-transform:none; letter-spacing:normal; box-shadow:none;
  transition:background-color var(--ms-motion-fast),border-color var(--ms-motion-fast);
}
.wc-block-cart.wc-block-components-sidebar-layout .cuw-offers .cuw-button .cuw-offer-cta-text { font-weight:inherit !important; }
.wc-block-cart.wc-block-components-sidebar-layout .cuw-offers .cuw-button:hover { background:var(--ms-color-sage) !important; border-color:var(--ms-color-brand-hover) !important; }
.wc-block-cart.wc-block-components-sidebar-layout .cuw-offers .cuw-button:active { background:var(--ms-color-border) !important; border-color:var(--ms-color-brand-pressed) !important; }
.wc-block-cart.wc-block-components-sidebar-layout .cuw-offers .cuw-button:focus-visible { outline:var(--ms-control-focus-width) solid var(--ms-color-focus); outline-offset:var(--ms-control-focus-offset); }
@media (max-width:760px), (pointer:coarse) {
  .wc-block-cart.wc-block-components-sidebar-layout .cuw-offers .cuw-button,
  .wc-block-cart.wc-block-components-sidebar-layout .cuw-offers .cuw-qty { min-height:var(--ms-control-height-touch); }
}

/* ===== checkout-blocks.css ===== */
/* Checkout block (UX.2) — Mason designbook on WooCommerce markup, layout from the checkout concept
   (ux/homepage-2026-prototype/checkout.html): focused header, numbered steps with a short description,
   labels above fields, full-width delivery and payment rows, the order summary card and the trust strip.
   No new components: step titles = H3, fields = .ms-field geometry and focus, choices = filter-choice
   states, Place order = primary .ms-button (shared-blocks.css). Tokens only (var(--ms-*)). */

/* ---------- Focused header (inc/mason-checkout-flow-2026.php); the store header is hidden on the details step ---------- */
body.ms-checkout-focus #header { display:none; }
.ms-checkout-header { background:var(--ms-color-white); border-bottom:1px solid var(--ms-color-border); }
.ms-checkout-header__utility { padding:var(--ms-space-8) var(--ms-gutter); background:var(--ms-color-brand); color:var(--ms-color-white); text-align:center; font:600 var(--ms-caption-size)/1.4 var(--ms-font-body); letter-spacing:.015em; }
.ms-checkout-header__bar { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--ms-space-24); box-sizing:border-box; width:100%; max-width:var(--ms-container); height:76px; margin-inline:auto; padding-inline:var(--ms-gutter); }
.ms-checkout-header .ms-checkout-header__back { justify-self:start; display:inline-flex; align-items:center; min-height:var(--ms-control-height-touch); color:var(--ms-color-brand); font:var(--ms-button-weight) var(--ms-button-size)/var(--ms-button-line) var(--ms-font-heading); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; transition:color var(--ms-motion-fast); }
.ms-checkout-header .ms-checkout-header__back:hover { color:var(--ms-color-brand-hover); text-decoration-thickness:2px; }
.ms-checkout-header .ms-checkout-header__back:focus-visible,
.ms-checkout-header .ms-checkout-header__brand:focus-visible { outline:var(--ms-control-focus-width) solid var(--ms-color-focus); outline-offset:var(--ms-control-focus-offset); }
.ms-checkout-header__brand { display:block; line-height:0; }
.ms-checkout-header__brand img { display:block; width:auto; max-width:140px; height:auto; max-height:56px; }
.ms-checkout-header__secure { justify-self:end; display:flex; align-items:center; gap:var(--ms-space-8); color:var(--ms-color-muted); font:600 var(--ms-small-size)/1.4 var(--ms-font-body); }
.ms-checkout-header__secure svg { width:20px; height:20px; fill:none; stroke:var(--ms-color-brand); stroke-width:1.8; }
@media (max-width:760px) {
  .ms-checkout-header__bar { height:64px; gap:var(--ms-space-12); }
  .ms-checkout-header .ms-checkout-header__back { font-size:var(--ms-caption-size); }
  .ms-checkout-header__brand img { max-height:48px; }
  .ms-checkout-header__secure > span { display:none; }
}

/* ---------- Steps: a numbered circle, H3 title and a short description; fields full width below ---------- */
.wc-block-checkout.wc-block-components-sidebar-layout { color:var(--ms-color-text); }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number { margin:0 0 var(--ms-space-40); padding:var(--ms-space-32) 0 0; border-top:1px solid var(--ms-color-border); }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__heading-container { position:relative; min-height:var(--ms-space-32); gap:var(--ms-space-4); margin-bottom:var(--ms-space-24); padding-left:calc(var(--ms-space-32) + var(--ms-space-16)); }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__heading,
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__title { position:static; }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__title::before {
  content:counter(checkout-step); content:counter(checkout-step) / ""; position:absolute; left:0; top:0; display:grid; place-items:center; box-sizing:border-box;
  width:var(--ms-space-32); height:var(--ms-space-32); margin:0; border:0; border-radius:var(--ms-radius-filter); background:var(--ms-color-brand); color:var(--ms-color-white);
  font:600 var(--ms-small-size)/1 var(--ms-font-heading); transform:none;
}
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__content::before,
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__description::before { content:none; display:none; }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-checkout-step__title { margin:2px 0 0; font:var(--ms-h3-weight) var(--ms-h3-size)/var(--ms-h3-line) var(--ms-font-heading); letter-spacing:var(--ms-h3-tracking); text-transform:none; color:var(--ms-color-text); }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-checkout-step__description,
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-checkout__guest-checkout-notice { margin:0; font:var(--ms-small-weight) var(--ms-small-size)/var(--ms-small-line) var(--ms-font-body); color:var(--ms-color-muted); }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-checkout__login-prompt,
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-checkout__terms a { color:var(--ms-color-brand); font-weight:var(--ms-button-weight); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; transition:color var(--ms-motion-fast); }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-checkout__login-prompt:hover,
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-checkout__terms a:hover { color:var(--ms-color-brand-hover); text-decoration-thickness:2px; }

/* ---------- Fields: label above, .ms-field geometry (48 px, radius 8, control border, Raleway), designbook focus and error ---------- */
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-text-input { display:flex; flex-direction:column; }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-text-input label,
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-text-input.is-active label {
  position:static; order:-1; max-width:none; margin:0 0 var(--ms-space-8); overflow:visible; transform:none; white-space:normal; text-overflow:clip; cursor:default;
  color:var(--ms-color-text); font:600 var(--ms-small-size)/1.4 var(--ms-font-body); letter-spacing:normal;
}
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-text-input input[type],
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-text-input.is-active input[type],
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-textarea {
  box-sizing:border-box; min-height:var(--ms-control-height); height:auto; padding:var(--ms-space-8) var(--ms-space-16);
  border:1px solid var(--ms-color-control-border); border-radius:var(--ms-radius-field); background:var(--ms-color-white); color:var(--ms-color-text);
  font:var(--ms-body-weight) var(--ms-body-size)/var(--ms-body-line) var(--ms-font-body); box-shadow:none;
}
.wc-block-checkout.wc-block-components-sidebar-layout .wc-blocks-components-select .wc-blocks-components-select__container { border:1px solid var(--ms-color-control-border); border-radius:var(--ms-radius-field); background:var(--ms-color-white); box-shadow:none; }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-blocks-components-select .wc-blocks-components-select__select { border:0; background:transparent; font-family:var(--ms-font-body); color:var(--ms-color-text); box-shadow:none; }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-blocks-components-select .wc-blocks-components-select__label { font-family:var(--ms-font-body); color:var(--ms-color-muted); }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-combobox .components-base-control__label { display:block; margin:0 0 var(--ms-space-8); color:var(--ms-color-text); font:600 var(--ms-small-size)/1.4 var(--ms-font-body); text-transform:none; letter-spacing:normal; }
/* Order Delivery Date comboboxes (Pickup Location, Time Slot): one 48 px field; the theme's input height and margin made the input overflow a 30 px box */
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-combobox .components-combobox-control__suggestions-container { box-sizing:border-box; height:auto; min-height:var(--ms-control-height); padding:0; overflow:hidden; border:1px solid var(--ms-color-control-border); border-radius:var(--ms-radius-field); background:var(--ms-color-white); box-shadow:none; }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-combobox .components-combobox-control__suggestions-container > .components-flex { height:auto; min-height:calc(var(--ms-control-height) - 2px); }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-combobox input.components-combobox-control__input { box-sizing:border-box; width:100%; height:auto; min-height:calc(var(--ms-control-height) - 2px); margin:0; padding:0 var(--ms-space-16); border:0; background:transparent; box-shadow:none; color:var(--ms-color-text); font:var(--ms-body-weight) var(--ms-body-size)/var(--ms-body-line) var(--ms-font-body); }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-combobox ul.components-form-token-field__suggestions-list { margin:0 !important; padding:var(--ms-space-4) 0; border-top:1px solid var(--ms-color-border); background:var(--ms-color-white) !important; list-style:none; }
.wc-block-checkout.wc-block-components-sidebar-layout div.wc-block-components-combobox ul li.components-form-token-field__suggestion { min-height:var(--ms-control-height-touch); margin:0; padding:var(--ms-space-12) var(--ms-space-16) !important; background:transparent; color:var(--ms-color-text); font:var(--ms-body-weight) var(--ms-body-size)/var(--ms-body-line) var(--ms-font-body); cursor:pointer; }
.wc-block-checkout.wc-block-components-sidebar-layout div.wc-block-components-combobox ul li.components-form-token-field__suggestion:hover { background:var(--ms-color-surface); }
.wc-block-checkout.wc-block-components-sidebar-layout div.wc-block-components-combobox ul li.components-form-token-field__suggestion.is-selected { background:var(--ms-color-sage); color:var(--ms-color-brand); }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-text-input input:focus-visible,
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-textarea:focus-visible,
.wc-block-checkout.wc-block-components-sidebar-layout .wc-blocks-components-select .wc-blocks-components-select__container:focus-within,
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-combobox .components-combobox-control__suggestions-container:focus-within { outline:var(--ms-control-focus-width) solid var(--ms-color-focus); outline-offset:var(--ms-control-focus-offset); box-shadow:none; }
.wc-block-checkout.wc-block-components-sidebar-layout .has-error input,
.wc-block-checkout.wc-block-components-sidebar-layout .has-error .wc-blocks-components-select__container,
.wc-block-checkout.wc-block-components-sidebar-layout .has-error .components-combobox-control__suggestions-container { border:2px solid var(--ms-color-error); }
.wc-block-checkout.wc-block-components-sidebar-layout .has-error label { color:var(--ms-color-error); }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-validation-error,
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-validation-error p { font:var(--ms-small-weight) var(--ms-small-size)/var(--ms-small-line) var(--ms-font-body); color:var(--ms-color-error); }

/* No login or account creation at checkout: the guest notice is hidden (body class from inc/mason-checkout-flow-2026.php) */
body.ms-checkout-guest-only .wc-block-checkout .wc-block-checkout__guest-checkout-notice { display:none; }

/* Singapore-only store: a helper under the address field says the country is set (text from Customizer → WooCommerce → Mason checkout) */
body.ms-single-country .wc-block-checkout .wc-block-components-address-form__address_1::after { content:var(--ms-address-helper, none); order:1; margin-top:var(--ms-space-4); color:var(--ms-color-muted); font:var(--ms-caption-weight) var(--ms-caption-size)/var(--ms-caption-line) var(--ms-font-body); }
body.ms-single-country .wc-block-checkout .wc-block-components-address-form__address_1 .wc-block-components-validation-error { order:2; }

/* "I'm buying for a company" (Gabriela, step 2): the checkbox (WooCommerce additional field mason/buying-for-company) sits right
   under first and last name, and the optional company field appears under it only when ticked. Both address forms work the same.
   If the checkbox is not registered, nothing is hidden. */
/* WooCommerce wraps the form in a row from 400 px (name fields side by side) and stacks plain blocks below 400 px:
   a column there keeps every field full width and lets the order apply */
@media (max-width:399px) { .wc-block-checkout .wc-block-components-address-form { display:flex; flex-direction:column; } }
.wc-block-checkout .wc-block-components-address-form > * { order:4; }
.wc-block-checkout .wc-block-components-address-form > :is(.wc-block-components-address-form__first_name, .wc-block-components-address-form__last_name) { order:1; }
.wc-block-checkout .wc-block-components-address-form > :has(input[id$="buying-for-company"]) { order:2; margin-top:var(--ms-space-16); }
.wc-block-checkout .wc-block-components-address-form > .wc-block-components-address-form__company { order:3; }
@media (min-width:400px) { .wc-block-checkout .wc-block-components-address-form > :is(:has(input[id$="buying-for-company"]), .wc-block-components-address-form__company) { flex:0 0 100%; } }
/* Smooth opening (Gabriela): the company field unfolds (height, opacity, top gap) instead of popping in. clip-path hides it while
   folded but, unlike overflow:hidden, lets the input's focus ring show once open. Motion tokens drop to 0 ms with reduced motion. */
.wc-block-checkout .wc-block-components-address-form:has(input[id$="buying-for-company"]) > .wc-block-components-address-form__company {
  max-height:10rem; opacity:1; visibility:visible; clip-path:inset(-0.5rem);
  transition:max-height var(--ms-motion-standard) ease, clip-path var(--ms-motion-standard) ease, opacity var(--ms-motion-standard) ease, margin-top var(--ms-motion-standard) ease, visibility 0s linear 0s;
}
.wc-block-checkout .wc-block-components-address-form:has(input[id$="buying-for-company"]):not(:has(input[id$="buying-for-company"]:checked)) > .wc-block-components-address-form__company {
  max-height:0; margin-top:0; opacity:0; visibility:hidden; clip-path:inset(0 0 100% 0);
  transition:max-height var(--ms-motion-standard) ease, clip-path var(--ms-motion-standard) ease, opacity var(--ms-motion-fast) ease, margin-top var(--ms-motion-standard) ease, visibility 0s linear var(--ms-motion-standard);
}
/* Step 2 "Delivery address", step 3 "Delivery options" with the date and time slot box right under the options (Gabriela, 15 Sep:
   Order Delivery Date's dates and slots depend on the delivery option). ODD can only live inside the address block, so the address
   step is unwrapped (display:contents) and the form becomes a flex column: options, then the date box, then payment and the rest.
   The billing address step stays under "Use same address for billing". The step's top rule and spacing move to its heading. */
.wc-block-checkout .wc-block-checkout__form:has(> .wc-block-checkout__shipping-option) { display:flex; flex-direction:column; }
.wc-block-checkout .wc-block-checkout__form:has(> .wc-block-checkout__shipping-option) > .wc-block-checkout__shipping-fields,
.wc-block-checkout .wc-block-checkout__form:has(> .wc-block-checkout__shipping-option) > .wc-block-checkout__shipping-fields > .wc-block-components-checkout-step__content { display:contents; }
.wc-block-checkout .wc-block-checkout__form > .wc-block-checkout__shipping-option { order:1; }
.wc-block-checkout .wc-block-checkout__form > .wc-block-checkout__shipping-fields > .wc-block-components-checkout-step__content > div:has(.orddd-datepicker-fields) { order:2; }
.wc-block-checkout .wc-block-checkout__form > .wc-block-checkout__shipping-option ~ * { order:3; }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-checkout__form--with-step-numbers:has(> .wc-block-checkout__shipping-option) .wc-block-checkout__shipping-fields.wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__heading-container {
  padding-top:var(--ms-space-32); border-top:1px solid var(--ms-color-border);
}
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-checkout__form--with-step-numbers:has(> .wc-block-checkout__shipping-option) .wc-block-checkout__shipping-fields.wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__title::before { top:var(--ms-space-32); }
.wc-block-checkout .wc-block-checkout__shipping-fields > .wc-block-components-checkout-step__content > .wc-block-checkout__use-address-for-billing { margin-top:var(--ms-space-16); }
.wc-block-checkout .wc-block-checkout__form > .wc-block-checkout__shipping-fields + .wc-block-checkout__shipping-option { margin-top:var(--ms-space-40); }
/* Date and time slot in their own titled box (Justin, 14 Sep). The title is CSS text from Customizer → WooCommerce → Mason checkout;
   the date and slot fields keep their own labels for screen readers. No title text = no box. */
body.ms-checkout-focus .wc-block-checkout .wc-block-checkout__shipping-fields > .wc-block-components-checkout-step__content > div:has(.orddd-datepicker-fields) {
  margin:calc(-1 * var(--ms-space-16)) 0 var(--ms-space-40); padding:var(--ms-space-16); border:1px solid var(--ms-color-border); border-radius:var(--ms-radius-card); background:var(--ms-color-surface);
}
body.ms-checkout-focus .wc-block-checkout .wc-block-checkout__shipping-fields > .wc-block-components-checkout-step__content > div:has(.orddd-datepicker-fields)::before {
  content:var(--ms-date-box-title, none); display:block; margin:0 0 var(--ms-space-4); color:var(--ms-color-text); font:var(--ms-h3-weight) var(--ms-h3-size)/var(--ms-h3-line) var(--ms-font-heading);
}
/* Company name collapsed (Justin's variant B): while body.ms-company-collapsed is set, the optional field shows only a text link
   (text from Customizer → WooCommerce → Mason checkout). js/checkout-company-2026.js opens it on click; keyboard focus opens it without JS. */
body.ms-company-collapsed .wc-block-checkout .wc-block-components-address-form__company:not(:focus-within) { cursor:pointer; }
body.ms-company-collapsed .wc-block-checkout .wc-block-components-address-form__company:not(:focus-within) > :is(input, label) {
  position:absolute !important; width:1px !important; height:1px !important; min-height:0 !important; margin:0 !important; padding:0 !important;
  overflow:hidden; border:0 !important; clip-path:inset(50%); white-space:nowrap;
}
body.ms-company-collapsed .wc-block-checkout .wc-block-components-address-form__company:not(:focus-within)::before {
  content:var(--ms-company-toggle, none); color:var(--ms-color-brand);
  font:var(--ms-button-weight) var(--ms-small-size)/var(--ms-control-height-small) var(--ms-font-heading); text-decoration:underline; text-underline-offset:4px;
}

/* Singapore-only store: the country is fixed, so the select is not shown (body class from inc/mason-checkout-flow-2026.php) */
body.ms-single-country .wc-block-checkout .wc-block-components-address-form__country { display:none; }

/* Order Delivery Date: raw slot counters are internal data, not customer copy (UX.2 audit) */
.wc-block-checkout #orddd-availability { display:none; }
.wc-block-checkout .orddd-datepicker-fields .orddd_field_note { display:block; margin-top:var(--ms-space-4); font:var(--ms-caption-weight) var(--ms-caption-size)/var(--ms-caption-line) var(--ms-font-body); color:var(--ms-color-muted); }

/* Order Delivery Date calendar: the jQuery UI datepicker is appended to <body> and themed by ODD and Checkout Field Editor Pro.
   Designbook card, month title, chevron buttons, available and partly booked days in sage instead of ODD's green/red triangles,
   a legend, selected day brand-filled, closed days muted. ODD prints its colours with !important, so the day backgrounds need it too. */
body.ms-checkout-focus #ui-datepicker-div.ui-datepicker {
  box-sizing:border-box; width:min(22.5rem, calc(100vw - 2 * var(--ms-gutter))) !important; z-index:30 !important; margin-top:var(--ms-space-4); padding:var(--ms-space-12);
  border:1px solid var(--ms-color-border); border-radius:var(--ms-radius-card); background:var(--ms-color-white);
  box-shadow:0 var(--ms-space-8) var(--ms-space-24) color-mix(in srgb, var(--ms-color-text) 14%, transparent);
  font:var(--ms-body-weight) var(--ms-small-size)/var(--ms-small-line) var(--ms-font-body); color:var(--ms-color-text);
}
/* Header as one flex row (prev | month | next): the jQuery UI and ODD themes position these parts absolutely, which misaligned them */
body.ms-checkout-focus #ui-datepicker-div .ui-datepicker-header { position:relative; display:flex; align-items:center; min-height:var(--ms-control-height-small); margin:0 0 var(--ms-space-8); padding:0; border:0; background:transparent; color:var(--ms-color-text); }
body.ms-checkout-focus #ui-datepicker-div .ui-datepicker-header::before,
body.ms-checkout-focus #ui-datepicker-div .ui-datepicker-header::after { display:none; }
body.ms-checkout-focus #ui-datepicker-div .ui-datepicker-title { position:static; flex:1 1 auto; order:1; margin:0; padding:0; font:600 var(--ms-body-size)/var(--ms-control-height-small) var(--ms-font-heading); text-align:center; }
body.ms-checkout-focus #ui-datepicker-div :is(.ui-datepicker-prev, .ui-datepicker-next) {
  position:static; flex:0 0 auto; top:auto; left:auto; right:auto; display:grid; place-items:center; width:var(--ms-control-height-small); height:var(--ms-control-height-small);
  border:0; border-radius:var(--ms-radius-button); background:transparent; color:var(--ms-color-brand); cursor:pointer;
}
body.ms-checkout-focus #ui-datepicker-div .ui-datepicker-prev { order:0; }
body.ms-checkout-focus #ui-datepicker-div .ui-datepicker-next { order:2; }
body.ms-checkout-focus #ui-datepicker-div :is(.ui-datepicker-prev, .ui-datepicker-next):not(.ui-state-disabled):hover { background:var(--ms-color-sage); }
body.ms-checkout-focus #ui-datepicker-div :is(.ui-datepicker-prev, .ui-datepicker-next).ui-state-disabled { color:var(--ms-color-disabled-text); cursor:default; opacity:1; }
body.ms-checkout-focus #ui-datepicker-div :is(.ui-datepicker-prev, .ui-datepicker-next) .ui-icon { display:none; }
/* ODD's datepicker.css draws its own chevrons with other borders and margins on the same pseudo-element: reset them first */
body.ms-checkout-focus #ui-datepicker-div :is(.ui-datepicker-prev, .ui-datepicker-next)::before { content:""; display:block; width:var(--ms-space-8); height:var(--ms-space-8); margin:0; border:0; border-left:2px solid currentColor; border-bottom:2px solid currentColor; opacity:1; }
body.ms-checkout-focus #ui-datepicker-div .ui-datepicker-prev::before { transform:translateX(2px) rotate(45deg); }
body.ms-checkout-focus #ui-datepicker-div .ui-datepicker-next::before { transform:translateX(-2px) rotate(-135deg); }
body.ms-checkout-focus #ui-datepicker-div table.ui-datepicker-calendar { width:100%; margin:0; border-collapse:separate; border-spacing:var(--ms-space-4); font-size:inherit; }
body.ms-checkout-focus #ui-datepicker-div table.ui-datepicker-calendar th { padding:0 0 var(--ms-space-4); border:0; color:var(--ms-color-muted); font:600 var(--ms-caption-size)/var(--ms-caption-line) var(--ms-font-body); text-transform:none; letter-spacing:normal; text-align:center; }
body.ms-checkout-focus #ui-datepicker-div table.ui-datepicker-calendar td { padding:0; border:0; background:transparent !important; opacity:1 !important; }
body.ms-checkout-focus #ui-datepicker-div table.ui-datepicker-calendar td :is(a, span).ui-state-default {
  display:grid; place-items:center; box-sizing:border-box; height:var(--ms-control-height-small); margin:0; padding:0;
  border:1px solid var(--ms-color-border); border-radius:var(--ms-radius-field); background:var(--ms-color-white) !important;
  color:var(--ms-color-text); font:600 var(--ms-small-size)/1 var(--ms-font-body); text-align:center; text-decoration:none;
  transition:background-color var(--ms-motion-fast),border-color var(--ms-motion-fast),color var(--ms-motion-fast);
}
/* Availability from ODD's day classes (Gabriela: mark available and partly booked days): available = sage, partly booked = half sage.
   ODD marks a day "partially booked" as soon as one order takes a slot, so it does not mean that few slots are left. */
/* Selectable days carry a green outline so they read as green, not grey (Gabriela: green available, white unavailable, no red) */
body.ms-checkout-focus #ui-datepicker-div table.ui-datepicker-calendar td.available-deliveries a.ui-state-default { border-color:color-mix(in srgb, var(--ms-color-brand) 40%, var(--ms-color-white)); background:var(--ms-color-sage) !important; color:var(--ms-color-brand); }
body.ms-checkout-focus #ui-datepicker-div table.ui-datepicker-calendar td.partially-booked a.ui-state-default { border-color:color-mix(in srgb, var(--ms-color-brand) 40%, var(--ms-color-white)); background:linear-gradient(to top left, var(--ms-color-sage) 50%, var(--ms-color-white) 50%) !important; color:var(--ms-color-brand); }
body.ms-checkout-focus #ui-datepicker-div table.ui-datepicker-calendar td a.ui-state-default:hover { border-color:var(--ms-color-brand); background:var(--ms-color-sage) !important; color:var(--ms-color-brand); }
body.ms-checkout-focus #ui-datepicker-div table.ui-datepicker-calendar td a.ui-state-default:focus-visible { outline:var(--ms-control-focus-width) solid var(--ms-color-focus); outline-offset:var(--ms-control-focus-offset); }
body.ms-checkout-focus #ui-datepicker-div table.ui-datepicker-calendar td a.ui-state-default.ui-state-active,
body.ms-checkout-focus #ui-datepicker-div table.ui-datepicker-calendar td a.ui-state-default.ui-state-active:hover { border-color:var(--ms-color-brand); background:var(--ms-color-brand) !important; color:var(--ms-color-white); }
body.ms-checkout-focus #ui-datepicker-div table.ui-datepicker-calendar td.ui-state-disabled span.ui-state-default { border-color:transparent; background:transparent !important; color:var(--ms-color-disabled-text); font-weight:var(--ms-body-weight); }
body.ms-checkout-focus #ui-datepicker-div .ui-datepicker-buttonpane { display:flex; flex-wrap:wrap; align-items:center; gap:var(--ms-space-4) var(--ms-space-12); margin:var(--ms-space-8) 0 0; padding:var(--ms-space-8) 0 0; border:0; border-top:1px solid var(--ms-color-border); background:transparent; }
/* Legend: swatch and text; texts come from Customizer → WooCommerce → Mason checkout as inline CSS variables, no variable = no item */
body.ms-checkout-focus #ui-datepicker-div .ui-datepicker-buttonpane::before,
body.ms-checkout-focus #ui-datepicker-div .ui-datepicker-buttonpane::after {
  display:block; padding-left:calc(var(--ms-space-16) + var(--ms-space-8)); background-repeat:no-repeat;
  background-size:calc(var(--ms-space-16) - 2px) calc(var(--ms-space-16) - 2px), var(--ms-space-16) var(--ms-space-16); background-position:1px 50%, 0 50%;
  color:var(--ms-color-muted); font:var(--ms-caption-weight) var(--ms-caption-size)/var(--ms-caption-line) var(--ms-font-body);
}
body.ms-checkout-focus #ui-datepicker-div .ui-datepicker-buttonpane::before { content:var(--ms-cal-available, none); order:0; background-image:linear-gradient(var(--ms-color-sage), var(--ms-color-sage)), linear-gradient(color-mix(in srgb, var(--ms-color-brand) 40%, var(--ms-color-white)), color-mix(in srgb, var(--ms-color-brand) 40%, var(--ms-color-white))); }
body.ms-checkout-focus #ui-datepicker-div .ui-datepicker-buttonpane::after { content:var(--ms-cal-partly, none); order:1; background-image:linear-gradient(to top left, var(--ms-color-sage) 50%, var(--ms-color-white) 50%), linear-gradient(color-mix(in srgb, var(--ms-color-brand) 40%, var(--ms-color-white)), color-mix(in srgb, var(--ms-color-brand) 40%, var(--ms-color-white))); }
body.ms-checkout-focus #ui-datepicker-div .ui-datepicker-buttonpane button.ui-datepicker-close {
  order:2; float:none; min-height:var(--ms-control-height-small); margin:0 0 0 auto; padding:0 var(--ms-space-12); border:0; border-radius:var(--ms-radius-button);
  background:transparent; box-shadow:none; opacity:1; color:var(--ms-color-brand); cursor:pointer;
  font:var(--ms-button-weight) var(--ms-button-size)/var(--ms-button-line) var(--ms-font-heading); text-transform:none; letter-spacing:normal; text-decoration:underline; text-underline-offset:4px;
}
body.ms-checkout-focus #ui-datepicker-div .ui-datepicker-buttonpane button.ui-datepicker-close:hover { background:var(--ms-color-sage); }
body.ms-checkout-focus #ui-datepicker-div .ui-datepicker-buttonpane button.ui-datepicker-close:focus-visible { outline:var(--ms-control-focus-width) solid var(--ms-color-focus); outline-offset:var(--ms-control-focus-offset); }

/* ---------- Google address suggestions under the Address field (inc/mason-checkout-flow-2026.php, js/checkout-address-2026.js) ---------- */
/* A field-style card; the active row is sage like a chosen delivery. "Google Maps" is Google's required attribution and keeps
   Google's own text style, set in PHP */
/* WooCommerce wraps the Address input and its label in __wrapper: the label stays above there too, the gap matches the other fields
   and the search icon sits on the input, not on input + label */
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-address-autocomplete-container { margin-top:var(--ms-space-12); }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-address-autocomplete-container .wc-block-components-text-input__wrapper { display:flex; flex-direction:column; position:relative; }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-address-autocomplete-container .wc-block-components-text-input input[type] { padding-right:var(--ms-space-48); }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-address-autocomplete-icon { top:auto; bottom:calc(var(--ms-control-height) / 2); transform:translateY(50%); background-color:var(--ms-color-muted); }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-address-autocomplete-suggestions { box-sizing:border-box; margin-top:var(--ms-space-4); overflow:hidden; border:1px solid var(--ms-color-border); border-radius:var(--ms-radius-field); background:var(--ms-color-white); box-shadow:0 var(--ms-space-8) var(--ms-space-24) color-mix(in srgb, var(--ms-color-text) 12%, transparent); }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-address-autocomplete-suggestions .suggestions-list { max-height:none; }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-address-autocomplete-suggestions .suggestions-list li { box-sizing:border-box; min-height:var(--ms-control-height-touch); margin:0; padding:var(--ms-space-12) var(--ms-space-16); border-bottom:1px solid var(--ms-color-border); color:var(--ms-color-text); font:var(--ms-body-weight) var(--ms-small-size)/var(--ms-small-line) var(--ms-font-body); white-space:normal; }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-address-autocomplete-suggestions .suggestions-list li:last-child { border-bottom:0; }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-address-autocomplete-suggestions .suggestions-list li strong { font-weight:600; }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-address-autocomplete-suggestions .suggestions-list li:hover,
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-address-autocomplete-suggestions .suggestions-list li:focus,
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-address-autocomplete-suggestions .suggestions-list li.active { background:var(--ms-color-sage); color:var(--ms-color-text); outline:none; }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-address-autocomplete-suggestions .woocommerce-address-autocomplete-branding { justify-content:flex-end; padding:var(--ms-space-8) var(--ms-space-16); border-top:1px solid var(--ms-color-border); background:var(--ms-color-white); }

/* ---------- Delivery and payment choices: full-width rows, price right-aligned (audit A-16) ---------- */
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-radio-control { display:flex; flex-direction:column; gap:var(--ms-space-8); border:0; box-shadow:none; }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-radio-control::after,
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-radio-control .wc-block-components-radio-control__option::after,
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-radio-control .wc-block-components-radio-control-accordion-option::after { content:none; display:none; }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-radio-control > .wc-block-components-radio-control__option,
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-radio-control > .wc-block-components-radio-control-accordion-option {
  box-sizing:border-box; margin:0; border:1px solid var(--ms-color-border); border-radius:var(--ms-radius-field); background:var(--ms-color-white); box-shadow:none;
  transition:background-color var(--ms-motion-fast),border-color var(--ms-motion-fast);
}
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-radio-control > .wc-block-components-radio-control__option { min-height:var(--ms-space-64); }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-radio-control > .wc-block-components-radio-control__option:hover,
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-radio-control > .wc-block-components-radio-control-accordion-option:hover { border-color:var(--ms-color-control-border); background:var(--ms-color-surface); }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-radio-control > .wc-block-components-radio-control__option-checked,
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-radio-control > .wc-block-components-radio-control-accordion-option--checked-option-highlighted { border-color:var(--ms-color-brand); background:var(--ms-color-sage); box-shadow:none; }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option { border:0; background:transparent; box-shadow:none; }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-radio-control__input { border:1px solid var(--ms-color-control-border); background:var(--ms-color-white); box-shadow:none; }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-radio-control__input:checked { border-color:var(--ms-color-brand); }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-radio-control__input:checked::before { background:var(--ms-color-brand); }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-radio-control__input:focus-visible { outline:var(--ms-control-focus-width) solid var(--ms-color-focus); outline-offset:var(--ms-control-focus-offset); }
/* The option name uses the whole row and the price keeps its own width (WooCommerce splits the row 50/50) */
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-radio-control__label-group { gap:var(--ms-space-16); }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-radio-control__label { flex:1 1 auto; min-width:0; color:var(--ms-color-text); font:600 var(--ms-small-size)/1.4 var(--ms-font-heading); }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-radio-control__secondary-label { flex:0 0 auto; color:var(--ms-color-text); font:600 var(--ms-small-size)/1.3 var(--ms-font-heading); text-align:right; white-space:nowrap; }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-radio-control__description,
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-radio-control__secondary-description,
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-radio-control-accordion-content { font:var(--ms-caption-weight) var(--ms-caption-size)/var(--ms-caption-line) var(--ms-font-body); color:var(--ms-color-muted); }
/* A note under an option that is not a delivery (Christmas Tree Storage): inc/mason-checkout-flow-2026.php maps the rate to
   --ms-rate-note; the text comes from Customizer → WooCommerce → Mason checkout */
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-radio-control__option-layout::after { content:var(--ms-rate-note, none); display:block; margin-top:var(--ms-space-4); font:var(--ms-caption-weight) var(--ms-caption-size)/var(--ms-caption-line) var(--ms-font-body); color:var(--ms-color-muted); }

/* ---------- Checkboxes (create account, billing address, order note) ---------- */
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-checkbox label { font:var(--ms-small-weight) var(--ms-small-size)/var(--ms-small-line) var(--ms-font-body); color:var(--ms-color-text); }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-checkbox .wc-block-components-checkbox__label { font:inherit; color:inherit; }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] { border:1px solid var(--ms-color-control-border); border-radius:var(--ms-radius-badge); background:var(--ms-color-white); box-shadow:none; }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked { border-color:var(--ms-color-brand); background:var(--ms-color-brand); }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-checkbox .wc-block-components-checkbox__mark { fill:var(--ms-color-white); }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:focus-visible { outline:var(--ms-control-focus-width) solid var(--ms-color-focus); outline-offset:var(--ms-control-focus-offset); }

/* ---------- Order summary: a neutral card on wide screens; collapsible title and the summary above Place order on phones ---------- */
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-checkout-order-summary__title-text { margin:0; font:var(--ms-h3-weight) var(--ms-h3-size)/var(--ms-h3-line) var(--ms-font-heading); letter-spacing:var(--ms-h3-tracking); color:var(--ms-color-text); }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-checkout-order-summary__title-price { font:var(--ms-product-price-weight) var(--ms-product-price-size)/var(--ms-product-price-line) var(--ms-font-heading); color:var(--ms-color-text); }
.wc-block-checkout.wc-block-components-sidebar-layout.is-large .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block { border:1px solid var(--ms-color-border); border-radius:var(--ms-radius-card); background:var(--ms-color-surface); }
/* Phones and tablets: WooCommerce shows the summary twice (collapsed at the top and in full above Place order). Keep the one next to
   Place order, where the order is checked before paying (UX.2 spec); the wide layout has only the sidebar and is unaffected */
.wc-block-checkout.wc-block-components-sidebar-layout:has(.checkout-order-summary-block-fill-wrapper) .wc-block-checkout__sidebar { display:none; }
/* Phones and tablets: the summary above Place order has its heading outside the card — keep a gap and the card radius */
.wc-block-checkout.wc-block-components-sidebar-layout .checkout-order-summary-block-fill-wrapper > .wc-block-components-checkout-step__heading { margin:0 0 var(--ms-space-16); }
.wc-block-checkout.wc-block-components-sidebar-layout .checkout-order-summary-block-fill { border-color:var(--ms-color-border); border-radius:var(--ms-radius-card); }
/* The card has a border, so its title needs the same inset as the items below it */
.wc-block-checkout.wc-block-components-sidebar-layout.is-large .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title { margin:0; padding:var(--ms-space-20) var(--ms-space-16) var(--ms-space-8); }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-order-summary-item__image img { border-radius:var(--ms-radius-media); background:var(--ms-color-surface); }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-order-summary-item__quantity { min-width:var(--ms-space-20); height:var(--ms-space-20); padding:0 var(--ms-space-4); border:0; border-radius:var(--ms-radius-badge); background:var(--ms-color-brand); color:var(--ms-color-white); font:600 var(--ms-caption-size)/var(--ms-space-20) var(--ms-font-body); box-shadow:none; }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-order-summary-item .wc-block-components-product-name { margin:0; font:600 var(--ms-small-size)/1.35 var(--ms-font-heading); color:var(--ms-color-text); }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-order-summary-item .wc-block-cart-item__prices { margin-top:2px; font:var(--ms-caption-weight) var(--ms-caption-size)/var(--ms-caption-line) var(--ms-font-body); color:var(--ms-color-muted); }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-order-summary-item .wc-block-cart-item__prices del { color:var(--ms-color-muted); }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-order-summary-item .wc-block-cart-item__prices ins { color:var(--ms-color-text); text-decoration:none; background:none; }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-order-summary-item .wc-block-components-product-metadata { margin-top:var(--ms-space-8); font:var(--ms-caption-weight) var(--ms-caption-size)/var(--ms-caption-line) var(--ms-font-body); color:var(--ms-color-muted); }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-order-summary-item .wc-block-components-product-metadata__description { display:none; }
/* One amount per line: the line total on the right. The unit price and the saving tag are not repeated in the summary (Gabriela) */
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-order-summary-item .wc-block-cart-item__prices,
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-order-summary-item .wc-block-components-sale-badge { display:none; }
/* Configuration rows: option name (muted) | chosen value (strong) */
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-order-summary-item:not(.is-bundled) .wc-block-components-product-details { display:grid; gap:2px; margin:0; }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-order-summary-item:not(.is-bundled) .wc-block-components-product-details > span { display:flex; flex-wrap:wrap; gap:0 var(--ms-space-4); }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-order-summary-item:not(.is-bundled) .wc-block-components-product-details > span > span:not([class]) { display:none; }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-order-summary-item:not(.is-bundled) .wc-block-components-product-details__value { color:var(--ms-color-text); font-weight:600; }
/* A kit's "Includes" list is a plain list, not option values */
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-order-summary-item .wc-block-components-product-details__includes .wc-block-components-product-details__value { color:var(--ms-color-text); font-weight:var(--ms-body-weight); }
/* The list starts collapsed behind "View 14 included items" (Justin, 14 Sep): js/checkout-summary-2026.js adds the classes and the button */
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-product-details.ms-includes.is-collapsed > .wc-block-components-product-details__includes { display:none; }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-order-summary-item button.ms-includes-toggle {
  display:inline-flex; align-items:center; gap:var(--ms-space-8); min-height:var(--ms-space-32); margin:0; padding:0; border:0; background:none; box-shadow:none;
  color:var(--ms-color-brand); font:600 var(--ms-caption-size)/var(--ms-caption-line) var(--ms-font-body); letter-spacing:normal; text-transform:none;
  text-decoration:underline; text-underline-offset:3px; cursor:pointer;
}
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-order-summary-item button.ms-includes-toggle::after {
  content:""; width:6px; height:6px; border:solid currentColor; border-width:0 1.5px 1.5px 0; transform:translateY(-2px) rotate(45deg);
}
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-order-summary-item button.ms-includes-toggle[aria-expanded="true"]::after { transform:translateY(1px) rotate(-135deg); }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-order-summary-item button.ms-includes-toggle:focus-visible { outline:2px solid var(--ms-color-focus); outline-offset:2px; border-radius:var(--ms-radius-badge); }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-order-summary-item__total-price { font:600 var(--ms-small-size)/1.35 var(--ms-font-heading); color:var(--ms-color-text); }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-order-summary-item__total-price .wc-block-components-product-price { font:inherit; color:inherit; }
/* Bundles: the kit carries the price; bundled items show photo, name and options only */
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-order-summary-item.is-bundled .wc-block-cart-item__prices,
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-order-summary-item.is-bundled .wc-block-components-order-summary-item__total-price { display:none; }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-order-summary-item.is-bundled .wc-block-components-product-name { font:var(--ms-small-weight) var(--ms-small-size)/var(--ms-small-line) var(--ms-font-body); }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-order-summary-item.is-bundled .wc-block-components-product-metadata { margin-top:0; }

/* ---------- Order received (step 3 "Complete", same Checkout page) ---------- */
/* The heading group in the Checkout page content belongs to the details step */
body.woocommerce-order-received .ms-flow-heading { display:none; }
body.woocommerce-order-received .woocommerce-thankyou-order-received { margin:var(--ms-space-8) 0 var(--ms-space-24); text-align:center; color:var(--ms-color-brand); font:var(--ms-h3-weight) var(--ms-h3-size)/var(--ms-h3-line) var(--ms-font-heading); letter-spacing:var(--ms-h3-tracking); }
/* Success mark: brand-green circle with the tick cut out (decorative, the sentence carries the meaning) */
body.woocommerce-order-received .woocommerce-thankyou-order-received::before {
  content:""; display:block; width:var(--ms-space-64); height:var(--ms-space-64); margin:0 auto var(--ms-space-16); background:var(--ms-color-brand);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1a11 11 0 1 0 0 22a11 11 0 1 0 0-22ZM6.5 12.3l1.4-1.4 2.5 2.5 5.7-5.7 1.4 1.4-7.1 7.1Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1a11 11 0 1 0 0 22a11 11 0 1 0 0-22ZM6.5 12.3l1.4-1.4 2.5 2.5 5.7-5.7 1.4 1.4-7.1 7.1Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* One confirmation card (woocommerce/checkout/thankyou.php): tick, thank-you line, order number, email note, payment instructions */
body.woocommerce-order-received .ms-order-complete__card { box-sizing:border-box; max-width:560px; margin:0 auto var(--ms-space-64); padding:var(--ms-space-40) var(--ms-space-24); border:1px solid var(--ms-color-border); border-radius:var(--ms-radius-card); background:var(--ms-color-white); text-align:center; }
body.woocommerce-order-received .ms-order-complete__card .woocommerce-thankyou-order-received { margin:0 0 var(--ms-space-24); }
body.woocommerce-order-received .ms-order-complete__number { margin:0 0 var(--ms-space-16); }
body.woocommerce-order-received .ms-order-complete__number span { display:block; margin-bottom:var(--ms-space-4); color:var(--ms-color-muted); font:600 var(--ms-caption-size)/var(--ms-caption-line) var(--ms-font-heading); text-transform:uppercase; letter-spacing:.1em; }
body.woocommerce-order-received .ms-order-complete__number strong { display:block; color:var(--ms-color-text); font:var(--ms-price-weight) var(--ms-price-size)/var(--ms-price-line) var(--ms-font-heading); }
body.woocommerce-order-received .ms-order-complete__email { max-width:400px; margin:0 auto; color:var(--ms-color-muted); font:var(--ms-body-weight) var(--ms-body-size)/var(--ms-body-line) var(--ms-font-body); overflow-wrap:anywhere; }
body.woocommerce-order-received .ms-order-complete__email strong { color:var(--ms-color-text); font-weight:600; }
body.woocommerce-order-received .ms-order-complete__payment:not(:empty) { margin-top:var(--ms-space-24); padding-top:var(--ms-space-16); border-top:1px solid var(--ms-color-border); }
body.woocommerce-order-received .ms-order-complete__payment p { margin:0; color:var(--ms-color-muted); font:var(--ms-caption-weight) var(--ms-caption-size)/var(--ms-caption-line) var(--ms-font-body); }
@media (max-width:760px) { body.woocommerce-order-received .ms-order-complete__card { margin-bottom:var(--ms-space-40); padding:var(--ms-space-32) var(--ms-space-16); } }
/* Guests opening the confirmation in another browser or device confirm their email first */
body.woocommerce-order-received .woocommerce-verify-email { max-width:520px; }
body.woocommerce-order-received .woocommerce-verify-email label { display:block; margin:0 0 var(--ms-space-8); color:var(--ms-color-text); font:600 var(--ms-small-size)/1.4 var(--ms-font-body); }
body.woocommerce-order-received .woocommerce-verify-email input:not([type="hidden"]) { box-sizing:border-box; width:100%; height:auto; min-height:var(--ms-control-height); margin:0; padding:var(--ms-space-8) var(--ms-space-16); border:1px solid var(--ms-color-control-border); border-radius:var(--ms-radius-field); background:var(--ms-color-white); box-shadow:none; color:var(--ms-color-text); font:var(--ms-body-weight) var(--ms-body-size)/var(--ms-body-line) var(--ms-font-body); }
body.woocommerce-order-received .woocommerce-verify-email input:not([type="hidden"]):focus-visible { outline:var(--ms-control-focus-width) solid var(--ms-color-focus); outline-offset:var(--ms-control-focus-offset); }
body.woocommerce-order-received .woocommerce-verify-email button {
  display:inline-flex; align-items:center; justify-content:center; min-height:var(--ms-control-height); margin:var(--ms-space-16) 0 0; padding:var(--ms-space-12) var(--ms-control-padding-inline);
  border:1px solid var(--ms-color-brand); border-radius:var(--ms-radius-button); background:var(--ms-color-brand); color:var(--ms-color-white);
  font:var(--ms-button-weight) var(--ms-button-size)/var(--ms-button-line) var(--ms-font-heading); letter-spacing:var(--ms-button-tracking); text-transform:none; box-shadow:none;
  transition:background-color var(--ms-motion-fast),border-color var(--ms-motion-fast);
}
body.woocommerce-order-received .woocommerce-verify-email button:hover { background:var(--ms-color-brand-hover); border-color:var(--ms-color-brand-hover); color:var(--ms-color-white); }
body.woocommerce-order-received .woocommerce-verify-email button:active { background:var(--ms-color-brand-pressed); border-color:var(--ms-color-brand-pressed); }
body.woocommerce-order-received .woocommerce-verify-email button:focus-visible { outline:var(--ms-control-focus-width) solid var(--ms-color-focus); outline-offset:var(--ms-control-focus-offset); box-shadow:0 0 0 3px var(--ms-color-white); }

/* ---------- Terms ---------- */
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-checkout__terms,
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-checkout__terms .wc-block-components-checkbox__label { font:var(--ms-caption-weight) var(--ms-caption-size)/var(--ms-caption-line) var(--ms-font-body); color:var(--ms-color-muted); }
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-checkout__terms { text-align:center; }