/* lwds-checkout.css — built 2026-09-25T08:39Z by bin/build-css.sh from assets/css/src/40-templates/checkout.css. */
/* Checkout template — page-level composition only. Regions: details / payment / summary. */
@layer lwds.templates {
  .lws-checkout .lws-main, .lws-checkout.lws-main { padding-block-start: var(--lws-space-6); }
  .lws-checkout__header { gap: var(--lws-space-4); margin-block-end: var(--lws-space-6); }
  .lws-checkout__prelude { display: flex; flex-direction: column; gap: var(--lws-space-4); margin-block-end: var(--lws-space-6); }
  .lws-checkout__prelude:empty { display: none; }
  @media (min-width: 992px) { .lws-checkout__prelude { max-width: calc((100% - var(--lws-space-10)) * 7 / 12); } }
  /* The parent makes form.woocommerce-checkout a row-flex container; the LWDS form stacks notices above the grid. */
  .lws-checkout .lws-checkout__form { display: flex; flex-direction: column; gap: 0; align-items: stretch; width: 100%; }
  .lws-checkout .lws-checkout__form > .woocommerce-NoticeGroup { width: 100%; }
  .lws-checkout__grid { display: grid; gap: var(--lws-space-8); grid-template-columns: minmax(0, 1fr); grid-template-areas: "details" "summary" "payment"; align-items: start; }
  .lws-checkout__details { grid-area: details; display: flex; flex-direction: column; gap: var(--lws-space-6); min-width: 0; }
  .lws-checkout__pay { grid-area: payment; display: flex; flex-direction: column; gap: var(--lws-space-4); min-width: 0; }
  .lws-checkout__summary { grid-area: summary; align-self: start; display: flex; flex-direction: column; gap: var(--lws-space-4); min-width: 0; }
  .lws-checkout__summary > * { flex: none; } /* parent rules gated on body.woocommerce give the review wrapper flex-grow */
  .lws-checkout__payment { display: flex; flex-direction: column; gap: var(--lws-space-4); padding-block-start: var(--lws-space-4); border-top: 1px solid var(--lws-color-border); }
  .lws-checkout__payment-title { margin: 0; font-size: var(--lws-text-heading); line-height: 1.3; }
  .lws-checkout__after-pay { display: flex; flex-direction: column; gap: var(--lws-space-4); } /* order-pay: same block under the button as the checkout */
  .lws-checkout__payment .woocommerce-checkout-payment { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } /* no card inside the card */
  .lws-checkout__section > h2 { font-size: var(--lws-text-title); }
  /* Owner, 2026-09-25: "What happens after you pay" one step down (title 28–36 → heading 20–26 px). */
  .lws-checkout__pay > h2 { font-size: var(--lws-text-heading); line-height: 1.3; }
  /* Owner, 2026-09-25: the page title one step down (display 36–52 → title 28–36 px). */
  .lws-checkout__header .lws-page-header__title { font-size: var(--lws-text-title); line-height: 1.2; }
  .lws-checkout .woocommerce-notices-wrapper:empty { display: none; }
  .lws-checkout .woocommerce-notices-wrapper { margin-block-end: var(--lws-space-4); }
  @media (min-width: 992px) {
    /* Owner, 2026-09-25: "What happens after you pay" runs full width under both columns. */
    .lws-checkout__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "details summary" "payment payment"; gap: var(--lws-space-10); }
    /* Owner, 2026-09-25: both columns share a top and a bottom edge. The details column and the summary card stretch
       to the row; the order-notes block takes the remaining height and its textarea grows, so the textarea ends where
       the card ends without a blank band above the notes. Each wrapper WooCommerce puts around the textarea passes
       the height down. */
    .lws-checkout__details, .lws-checkout__summary { align-self: stretch; }
    .lws-checkout__details > .lws-checkout__additional,
    .lws-checkout__additional .woocommerce-additional-fields,
    .lws-checkout__additional .woocommerce-additional-fields__field-wrapper,
    .lws-checkout__additional .woocommerce-additional-fields__field-wrapper > .form-row,
    .lws-checkout__additional .woocommerce-additional-fields__field-wrapper > .form-row .woocommerce-input-wrapper { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
    /* Capped at 320 px (owner, 2026-09-25): if the summary grows (more payment methods), the columns stop aligning at
       the bottom rather than stretching an optional notes field into a very tall empty box. */
    .lws-checkout__additional .woocommerce-additional-fields__field-wrapper textarea { flex: 1 1 auto; min-height: 6rem; max-height: 20rem; resize: none; }
    /* Not sticky any more: the card now holds the payment fields and the Place order button (owner, Polish Round 1). */
  }
  /* The parent header is transparent because every parent template puts a hero behind it. */
}

/* Order-received and order-pay (same checkout page, endpoints) */
@layer lwds.templates {
  .lws-order-pay__grid { grid-template-areas: "summary" "payment"; }
  /* Owner, Polish Round 1: Your order on the left (60 %), Payment on the right (40 %); both headings at the card-title size. */
  @media (min-width: 992px) { .lws-order-pay__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-areas: "summary payment"; } }
  .lws-order-pay__grid .lws-checkout__section > h2 { font-size: var(--lws-text-heading); line-height: 1.3; }
  .lws-order--pay .lws-checkout__form { width: 100%; }
  /* Owner, 2026-09-25: on order-pay "Your order" keeps its own height — nothing follows it but the footer, so the
     checkout's equal-bottom stretch would only add an empty band. */
  .lws-order-pay__grid .lws-checkout__summary { align-self: start; }
}

/* Cart (same page family: purchase) */
@layer lwds.templates {
  .lws-cart .lws-main, .lws-cart.lws-main { padding-block-start: var(--lws-space-4); }
  .lws-cart .woocommerce { display: flex; flex-direction: column; gap: var(--lws-space-6); }
  .lws-cart__header { padding-block: 0; }
  /* Owner, 2026-09-25: "Your cart" matches "Checkout" (title role, 28–36 px). */
  .lws-cart__header h1 { font-size: var(--lws-text-title); line-height: 1.2; }
  /* .cart-collaterals picks up a 32 px top margin from the parent/WooCommerce CSS; the summary card starts level
     with the cart table (owner, 2026-09-25). */
  .lws-cart__grid > .lws-cart__aside { margin-block-start: 0; }
  .lws-cart__grid { display: grid; gap: var(--lws-space-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
  .lws-cart__main { display: flex; flex-direction: column; gap: var(--lws-space-4); min-width: 0; }
  .lws-cart__aside { min-width: 0; width: auto; float: none; }
  @media (min-width: 992px) {
    .lws-cart.lws-main { padding-block-start: var(--lws-space-6); }
    .lws-cart__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--lws-space-10); }
    .lws-cart__aside { position: sticky; top: calc(var(--lws-header-height) + var(--lws-admin-bar, 0px) + var(--lws-space-4)); }
  }
}