/*
 * Classic WooCommerce checkout, order received, empty cart and account forms
 * (structure only; children skin it). Scoped by the body classes set in
 * inc/woo-pages.php. Plain unlayered CSS so it outranks WooCommerce's own
 * unlayered float/width rules.
 *
 * Custom properties (set on body.o-woo-pages or any ancestor):
 *   --o-woo-pages-max-width     content width                  (80rem)
 *   --o-woo-pages-gutter        inline padding                 (1rem)
 *   --o-woo-pages-block-padding block padding                  (2rem)
 *   --o-woo-pages-gap           column / section gap           (2rem)
 *   --o-woo-pages-summary-width summary column from 64rem      (26rem)
 *   --o-woo-pages-sticky-top    summary sticky offset          (1.5rem)
 *   --o-woo-pages-border        card and rule border           (1px solid rgb(0 0 0 / 0.12))
 *   --o-woo-pages-surface       card background                (#fff)
 *   --o-woo-pages-radius        card radius                    (0.5rem)
 *   --o-woo-pages-muted         secondary text colour          (currentColor at 65%)
 */

/* Shared header: H1 + back link -------------------------------------------- */
.o-woo-checkout__header,
.o-woo-order__header,
.o-woo-account__header,
.o-woo-pages__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin-bottom: var(--o-woo-pages-gap, 2rem);
}

.o-woo-checkout__title,
.o-woo-order__title,
.o-woo-account__title,
.o-woo-pages__title { margin: 0; }

/* The account header spans the navigation and content columns. */
body.o-woo-pages .woocommerce > .o-woo-account__header { grid-column: 1 / -1; margin-bottom: 0; }

.o-woo-checkout__back { margin-left: auto; }

/* Checkout ------------------------------------------------------------------ */
body.o-woo-checkout .woocommerce:has(> form.checkout) {
  max-width: var(--o-woo-pages-max-width, 80rem);
  margin-inline: auto;
  padding: var(--o-woo-pages-block-padding, 2rem) var(--o-woo-pages-gutter, 1rem);
}

/* Login and coupon reminders: two compact lines side by side, not full-width bars. */
body.o-woo-checkout :is(.woocommerce-form-login-toggle, .woocommerce-form-coupon-toggle) {
  display: inline-block;
  max-width: 100%;
  margin: 0 0.75rem 0.75rem 0;
  vertical-align: top;
}

body.o-woo-checkout :is(.woocommerce-form-login-toggle, .woocommerce-form-coupon-toggle) .woocommerce-info {
  margin: 0;
  padding: 0.625rem 1rem;
  border: var(--o-woo-pages-border, 1px solid rgb(0 0 0 / 0.12));
  border-radius: var(--o-woo-pages-radius, 0.5rem);
  background: var(--o-woo-pages-surface, #fff);
  color: inherit;
  font-size: 0.875em;
}

body.o-woo-checkout :is(.woocommerce-form-login-toggle, .woocommerce-form-coupon-toggle) .woocommerce-info::before { content: none; display: none; }

body.o-woo-checkout .woocommerce > :is(form.woocommerce-form-login, form.checkout_coupon) {
  max-width: 40rem;
  margin: 0 0 var(--o-woo-pages-gap, 2rem);
  padding: 1.25rem;
  border: var(--o-woo-pages-border, 1px solid rgb(0 0 0 / 0.12));
  border-radius: var(--o-woo-pages-radius, 0.5rem);
}

body.o-woo-checkout .woocommerce > form.checkout_coupon { display: flex; flex-wrap: wrap; gap: 0.5rem; }
body.o-woo-checkout .woocommerce > form.checkout_coupon[style*="none"] { display: none; }
body.o-woo-checkout .woocommerce > form.checkout_coupon :is(.form-row-first, .form-row-last) { float: none; width: auto; margin: 0; padding: 0; }
body.o-woo-checkout .woocommerce > form.checkout_coupon .form-row-first { flex: 1 1 12rem; }
body.o-woo-checkout .woocommerce > form.checkout_coupon .clear { display: none; }

body.o-woo-checkout form.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--o-woo-pages-gap, 2rem);
  align-items: start;
  margin-top: calc(var(--o-woo-pages-gap, 2rem) / 2);
}

body.o-woo-checkout form.checkout > * { min-width: 0; }
body.o-woo-checkout form.checkout::before,
body.o-woo-checkout form.checkout::after { content: none; display: none; }

/* Billing, shipping and notes stack in one column. */
body.o-woo-checkout #customer_details { display: flex; flex-direction: column; gap: var(--o-woo-pages-gap, 2rem); }
body.o-woo-checkout #customer_details::before,
body.o-woo-checkout #customer_details::after { content: none; display: none; }
body.o-woo-checkout #customer_details > :is(.col-1, .col-2) { float: none; width: 100%; }

body.o-woo-checkout :is(.woocommerce-billing-fields__field-wrapper, .shipping_address .woocommerce-shipping-fields__field-wrapper) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 1rem;
}

body.o-woo-checkout form.checkout .form-row { float: none; width: auto; margin: 0 0 1rem; }
body.o-woo-checkout form.checkout .form-row :is(input.input-text, select, textarea) { width: 100%; }
body.o-woo-checkout form.checkout .form-row .woocommerce-input-wrapper { display: block; }

@media (min-width: 40rem) {
  body.o-woo-checkout :is(.woocommerce-billing-fields__field-wrapper, .shipping_address .woocommerce-shipping-fields__field-wrapper) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.o-woo-checkout :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper) > .form-row:not(.form-row-first, .form-row-last) {
    grid-column: 1 / -1;
  }
}

/* "Ship to a different address?" is a checkbox line, not a section heading. */
body.o-woo-checkout #ship-to-different-address { margin: 0 0 1rem; font-size: 1em; }
body.o-woo-checkout #ship-to-different-address label { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; }

/* Summary card. */
body.o-woo-checkout .o-woo-checkout__summary {
  padding: 1.25rem;
  border: var(--o-woo-pages-border, 1px solid rgb(0 0 0 / 0.12));
  border-radius: var(--o-woo-pages-radius, 0.5rem);
  background: var(--o-woo-pages-surface, #fff);
}

body.o-woo-checkout .o-woo-checkout__summary #order_review_heading { margin: 0 0 0.75rem; }
body.o-woo-checkout .o-woo-checkout__summary #order_review { margin: 0; padding: 0; border: 0; background: none; }

body.o-woo-checkout table.woocommerce-checkout-review-order-table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  border-radius: 0;
}

body.o-woo-checkout table.woocommerce-checkout-review-order-table :is(th, td) {
  padding: 0.75rem 0;
  border: 0;
  border-top: var(--o-woo-pages-border, 1px solid rgb(0 0 0 / 0.12));
  background: none;
  vertical-align: top;
}

body.o-woo-checkout table.woocommerce-checkout-review-order-table thead :is(th, td) { border-top: 0; }
body.o-woo-checkout table.woocommerce-checkout-review-order-table :is(th, td):last-child { text-align: right; }
body.o-woo-checkout table.woocommerce-checkout-review-order-table #shipping_method { margin: 0; padding: 0; list-style: none; }
body.o-woo-checkout table.woocommerce-checkout-review-order-table #shipping_method li { margin: 0; text-indent: 0; }
body.o-woo-checkout table.woocommerce-checkout-review-order-table tr.order-total td small { display: block; font-size: 0.75em; }

/* Payment methods: a quiet list of options inside the card. */
body.o-woo-checkout #payment { margin-top: 1rem; border-radius: 0; background: none; }
body.o-woo-checkout #payment ul.payment_methods { margin: 0; padding: 0; border: 0; list-style: none; }
body.o-woo-checkout #payment ul.payment_methods > li {
  margin: 0 0 0.5rem;
  padding: 0.75rem 1rem;
  border: var(--o-woo-pages-border, 1px solid rgb(0 0 0 / 0.12));
  border-radius: var(--o-woo-pages-radius, 0.5rem);
  line-height: 1.4;
}

body.o-woo-checkout #payment ul.payment_methods > li > label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; cursor: pointer; }
body.o-woo-checkout #payment ul.payment_methods > li > label img { max-height: 1.5rem; margin: 0; }
body.o-woo-checkout #payment div.payment_box { margin: 0.5rem 0 0; padding: 0; border-radius: 0; background: none; color: inherit; font-size: 0.875em; }
body.o-woo-checkout #payment div.payment_box::before { content: none; display: none; }
body.o-woo-checkout #payment div.payment_box p:last-child { margin-bottom: 0; }
body.o-woo-checkout #payment div.form-row.place-order { margin: 0; padding: 1rem 0 0; }
body.o-woo-checkout .woocommerce-terms-and-conditions-wrapper { margin: 0 0 1rem; font-size: 0.8125em; color: var(--o-woo-pages-muted, color-mix(in srgb, currentColor 65%, transparent)); }
body.o-woo-checkout #place_order { float: none; display: block; width: 100%; margin: 0; }
body.o-woo-checkout .o-woo-checkout__summary .ppc-button-wrapper { margin-top: 1rem; }

@media (min-width: 64rem) {
  body.o-woo-checkout form.checkout {
    grid-template-columns: minmax(0, 1fr) var(--o-woo-pages-summary-width, 26rem);
    gap: 0 calc(var(--o-woo-pages-gap, 2rem) * 1.5);
  }

  body.o-woo-checkout form.checkout > * { grid-column: 1; }

  body.o-woo-checkout form.checkout > .o-woo-checkout__summary {
    grid-column: 2;
    /* Spans the (empty, zero-gap) rows of any extra column-1 hook output. */
    grid-row: 1 / span 20;
    position: sticky;
    top: var(--o-woo-pages-sticky-top, 1.5rem);
  }
}

/* Order received --------------------------------------------------------------- */
body.o-woo-order .woocommerce {
  display: grid;
  gap: var(--o-woo-pages-gap, 2rem);
  max-width: var(--o-woo-pages-max-width, 80rem);
  margin-inline: auto;
  padding: var(--o-woo-pages-block-padding, 2rem) var(--o-woo-pages-gutter, 1rem);
}

body.o-woo-order .woocommerce-order {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--o-woo-pages-gap, 2rem);
  align-items: start;
}

body.o-woo-order .woocommerce-order > * { min-width: 0; margin: 0; }
body.o-woo-order .woocommerce-order > .o-woo-order__header { margin: 0; }

body.o-woo-order ul.woocommerce-order-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  margin: 0;
  padding: 0;
  border: var(--o-woo-pages-border, 1px solid rgb(0 0 0 / 0.12));
  border-radius: var(--o-woo-pages-radius, 0.5rem);
  list-style: none;
}

body.o-woo-order ul.woocommerce-order-overview::before,
body.o-woo-order ul.woocommerce-order-overview::after { content: none; display: none; }

body.o-woo-order ul.woocommerce-order-overview li {
  float: none;
  margin: 0;
  padding: 1rem 1.25rem;
  border: 0;
  font-size: 0.8125em;
  line-height: 1.4;
}

body.o-woo-order ul.woocommerce-order-overview li strong { display: block; margin-top: 0.25rem; font-size: 1.125rem; }

body.o-woo-order :is(.woocommerce-order-details, .woocommerce-customer-details) {
  padding: 1.25rem;
  border: var(--o-woo-pages-border, 1px solid rgb(0 0 0 / 0.12));
  border-radius: var(--o-woo-pages-radius, 0.5rem);
  background: var(--o-woo-pages-surface, #fff);
}

body.o-woo-order .woocommerce-customer-details .col2-set { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
body.o-woo-order .woocommerce-customer-details .col2-set::before,
body.o-woo-order .woocommerce-customer-details .col2-set::after { content: none; display: none; }
body.o-woo-order .woocommerce-customer-details .col2-set > * { float: none; width: auto; grid-column: auto; }
body.o-woo-order .woocommerce-customer-details address { margin: 0; padding: 0; border: 0; font-style: normal; }
body.o-woo-order .woocommerce-customer-details address p { margin: 0.25rem 0 0; }

body.o-woo-order table.order_details { width: 100%; margin: 0; border: 0; border-collapse: collapse; border-radius: 0; }
body.o-woo-order table.order_details :is(th, td) { padding: 0.75rem 0; border: 0; border-top: var(--o-woo-pages-border, 1px solid rgb(0 0 0 / 0.12)); background: none; vertical-align: top; }
body.o-woo-order table.order_details thead :is(th, td) { border-top: 0; }
body.o-woo-order table.order_details :is(th, td):last-child { text-align: right; }
body.o-woo-order table.order_details tfoot td small { font-size: 0.75em; }

@media (min-width: 40rem) {
  body.o-woo-order ul.woocommerce-order-overview { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; }
  /* .order_details matches WooCommerce's own `.woocommerce ul.order_details li:last-of-type { border: none }`. */
  body.o-woo-order ul.woocommerce-order-overview.order_details li + li { border-left: var(--o-woo-pages-border, 1px solid rgb(0 0 0 / 0.12)); }
  body.o-woo-order .woocommerce-customer-details .col2-set { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  body.o-woo-order .woocommerce-order { grid-template-columns: minmax(0, 1fr) var(--o-woo-pages-summary-width, 26rem); }
  body.o-woo-order .woocommerce-order > * { grid-column: 1 / -1; }
  body.o-woo-order .woocommerce-order > .woocommerce-order-details { grid-column: 1; }
  body.o-woo-order .woocommerce-order > .woocommerce-customer-details { grid-column: 2; }
  body.o-woo-order .woocommerce-customer-details .col2-set { grid-template-columns: minmax(0, 1fr); }
}

/* Guest "verify your email" gate on order received. */
body.o-woo-order .woocommerce > * { min-width: 0; margin: 0; }
body.o-woo-order form.woocommerce-verify-email { max-width: 32rem; }

/* Empty cart ------------------------------------------------------------------- */
body.o-woo-pages .woocommerce:has(> .wc-empty-cart-message),
body.o-woo-pages .woocommerce:has(> .o-commerce-zone--cart-empty) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  width: min(40rem, 100% - 2 * var(--o-woo-pages-gutter, 1rem));
  margin: var(--o-woo-pages-block-padding, 2rem) auto;
  padding: calc(var(--o-woo-pages-block-padding, 2rem) * 1.5) 1.5rem;
  text-align: center;
}

body.o-woo-pages .woocommerce > .wc-empty-cart-message,
body.o-woo-pages .woocommerce > .o-commerce-zone--cart-empty { width: 100%; }

body.o-woo-pages .woocommerce > .wc-empty-cart-message .cart-empty {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: 1.25em;
}

body.o-woo-pages .woocommerce > .wc-empty-cart-message .cart-empty::before { content: none; display: none; }
body.o-woo-pages .woocommerce > .return-to-shop { margin: 0; }

/* Lost / reset password --------------------------------------------------------- */
body.o-woo-pages .o-woo-pages__header + form { margin-top: 0; }

/* The order-received hero zone carries the thank-you message: hide WooCommerce's line (its <p> keeps whitespace, so :empty never matches). */
body.o-woo-order:has(.o-commerce-zone--order-received-hero) .woocommerce-thankyou-order-received { display: none; }