/* =====================================================================
   48-checkout-chrome.css — the commerce routes, once they are inside the site.

   templates/page-checkout.html and templates/order-confirmation.html put the
   Riverhouse header and footer around WooCommerce's own checkout, order-pay
   and order-received content. WooCommerce's stripped "checkout header" used to
   supply the page's only breathing room, so with the real shell in place the
   content needed a gutter of its own: a constrained block layout gives a
   max-width but no side padding, which reads as edge-to-edge text on a phone.

   Tokens are read from phase1.css :root, never written. Nothing here touches
   the payment form, the terms checkbox or the Stripe element — only the space
   around them.
   ===================================================================== */

main.rhc-commerce-page {
  padding: var(--sp-7) var(--sp-4) var(--sp-9);
  background: var(--paper);
  overflow-x: clip;
}

@media (min-width: 900px) {
  main.rhc-commerce-page {
    padding-left: var(--sp-6);
    padding-right: var(--sp-6);
  }
}

/* A wide-aligned child inside a padded main must not out-grow its parent:
   `alignwide` resolves to the 1200px wide size, which is wider than the
   viewport on a phone and would push a horizontal scrollbar onto the page. */
main.rhc-commerce-page > .alignwide,
main.rhc-commerce-page .wp-block-woocommerce-checkout,
main.rhc-commerce-page .woocommerce {
  max-width: min(var(--max), 100%);
  margin-left: auto;
  margin-right: auto;
}

main.rhc-commerce-page img,
main.rhc-commerce-page table {
  max-width: 100%;
}

/* The order-pay and order-received endpoints render through the classic
   [woocommerce_checkout] path, which prints WooCommerce's own headings at
   whatever size its stylesheet last set. Put them back on the site's
   display face so the card step reads as the same website. */
main.rhc-commerce-page h1,
main.rhc-commerce-page h2,
main.rhc-commerce-page h3 {
  font-family: var(--d);
  color: var(--ink);
}