/**
 * Stage 13 remediation — Cart + Checkout layout correction and polish.
 *
 * Presentation only. This layer corrects the page-template width constraint,
 * hardens WooCommerce Blocks responsive behavior, and refines the approved
 * visual treatment without changing cart/checkout business logic.
 */

/* Cart and Checkout are normal WordPress pages, so page.php's .content-narrow
 * would otherwise cap the whole transactional surface at 800px. Restore the
 * storefront container width only on these two WooCommerce pages. */
body.woocommerce-cart .site-main > .container.content-narrow,
body.woocommerce-checkout .site-main > .container.content-narrow {
  width: min(calc(100% - 2rem), var(--ecms-container, 1200px));
  max-width: var(--ecms-container, 1200px);
}

body.woocommerce-cart .entry,
body.woocommerce-cart .entry-content,
body.woocommerce-cart .wp-block-woocommerce-cart,
body.woocommerce-checkout .entry,
body.woocommerce-checkout .entry-content,
body.woocommerce-checkout .wp-block-woocommerce-checkout {
  width: 100%;
  max-width: none;
  min-width: 0;
}

/* ================================================================
   CART — width, readability and control alignment
   ================================================================ */

@media (min-width: 961px) {
  body.woocommerce-cart .wc-block-components-sidebar-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(350px, 380px) !important;
    gap: clamp(2rem, 3.5vw, 3.25rem) !important;
    align-items: start !important;
    width: 100% !important;
    max-width: none !important;
  }

  /* WooCommerce Blocks uses .wc-block-components-main/sidebar for the two
   * tracks. The older __main/__sidebar selectors do not control their native
   * percentage widths, which is what caused the post-redesign compression. */
  body.woocommerce-cart .wc-block-components-main,
  body.woocommerce-cart .wc-block-components-sidebar {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: none !important;
  }
}

body.woocommerce-cart .wc-block-cart-items {
  width: 100%;
  max-width: none;
}

body.woocommerce-cart .wc-block-cart-items td {
  padding-block: clamp(1.35rem, 2.4vw, 1.8rem);
}

body.woocommerce-cart .wc-block-cart-item__product {
  padding-left: clamp(.9rem, 1.6vw, 1.25rem);
}

body.woocommerce-cart .wc-block-components-product-metadata {
  color: #5a6268;
  font-size: .94rem;
  line-height: 1.6;
}

body.woocommerce-cart .wc-block-cart-item__quantity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: .95rem;
}

body.woocommerce-cart .wc-block-cart-item__quantity .wc-block-components-quantity-selector {
  min-height: 46px;
  margin-top: 0;
}

body.woocommerce-cart .wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 42px;
  margin: 0;
}

body.woocommerce-cart .wc-block-cart__sidebar,
body.woocommerce-cart .wc-block-components-sidebar {
  align-self: start !important;
}

body.woocommerce-cart .wc-block-cart__payment-options,
body.woocommerce-cart .wc-block-components-express-payment,
body.woocommerce-cart .wc-block-components-express-payment__event-buttons,
body.woocommerce-cart .wc-block-components-express-payment__event-buttons > * {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

/* Keep the native checkout CTA visible if WooCommerce renders it. We do not
 * manufacture or reorder the CTA; this only prevents presentation rules from
 * collapsing an existing control. */
body.woocommerce-cart .wc-block-cart__submit,
body.woocommerce-cart .wc-block-cart__submit-container,
body.woocommerce-cart .wc-block-cart__submit-button {
  width: 100% !important;
  max-width: none !important;
}

/* ================================================================
   CHECKOUT — correct desktop geometry and stop vertical stretching
   ================================================================ */

@media (min-width: 961px) {
  body.woocommerce-checkout .wc-block-components-sidebar-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(390px, 420px) !important;
    gap: clamp(2rem, 3.5vw, 3.25rem) !important;
    align-items: start !important;
    width: 100% !important;
    max-width: none !important;
  }

  body.woocommerce-checkout .wc-block-components-main,
  body.woocommerce-checkout .wc-block-components-sidebar,
  body.woocommerce-checkout .wc-block-checkout__main,
  body.woocommerce-checkout .wc-block-checkout__sidebar {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-inline: 0 !important;
    flex: none !important;
  }
}

body.woocommerce-checkout .wc-block-components-sidebar,
body.woocommerce-checkout .wc-block-checkout__sidebar,
body.woocommerce-checkout .wc-block-components-order-summary,
body.woocommerce-checkout .wc-block-components-order-summary__content {
  align-self: start !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

body.woocommerce-checkout .wc-block-checkout__main > .wc-block-components-express-payment,
body.woocommerce-checkout .wc-block-components-express-payment,
body.woocommerce-checkout .wc-block-components-express-payment__event-buttons,
body.woocommerce-checkout .wc-block-components-express-payment__event-buttons > * {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

body.woocommerce-checkout .wc-block-components-checkout-step,
body.woocommerce-checkout .wc-block-checkout__add-note,
body.woocommerce-checkout .wc-block-checkout__terms,
body.woocommerce-checkout .wc-block-components-checkout-place-order-button {
  width: 100%;
  max-width: none;
}

body.woocommerce-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-metadata {
  font-size: .84rem;
  line-height: 1.55;
}

/* ================================================================
   TABLET — explicitly switch both transactional layouts to one column
   ================================================================ */

@media (max-width: 960px) {
  body.woocommerce-cart .site-main > .container.content-narrow,
  body.woocommerce-checkout .site-main > .container.content-narrow {
    width: min(calc(100% - 2rem), var(--ecms-container, 1200px));
    max-width: var(--ecms-container, 1200px);
  }

  body.woocommerce-cart .wc-block-components-sidebar-layout,
  body.woocommerce-checkout .wc-block-components-sidebar-layout {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
  }

  body.woocommerce-cart .wc-block-components-main,
  body.woocommerce-cart .wc-block-components-sidebar,
  body.woocommerce-checkout .wc-block-components-main,
  body.woocommerce-checkout .wc-block-components-sidebar,
  body.woocommerce-checkout .wc-block-checkout__main,
  body.woocommerce-checkout .wc-block-checkout__sidebar {
    display: block;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
  }

  body.woocommerce-cart .wc-block-cart__sidebar,
  body.woocommerce-checkout .wc-block-checkout__sidebar {
    margin-top: 1.5rem !important;
  }

  body.woocommerce-checkout .wc-block-checkout__sidebar,
  body.woocommerce-checkout .wc-block-components-sidebar {
    position: static !important;
    inset: auto !important;
  }

  body.woocommerce-checkout .wc-block-components-order-summary-item {
    grid-template-columns: 78px minmax(0, 1fr) auto;
  }
}

/* ================================================================
   MOBILE — retain readable spacing without reintroducing narrow columns
   ================================================================ */

@media (max-width: 767px) {
  body.woocommerce-cart .site-main > .container.content-narrow,
  body.woocommerce-checkout .site-main > .container.content-narrow {
    width: min(calc(100% - 1.25rem), var(--ecms-container, 1200px));
  }

  body.woocommerce-cart .wc-block-components-product-metadata {
    font-size: .9rem;
    line-height: 1.55;
  }

  body.woocommerce-cart .wc-block-cart-item__quantity {
    gap: .35rem;
  }

  body.woocommerce-checkout .wc-block-components-order-summary-item {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: .7rem;
  }

  body.woocommerce-checkout .wc-block-components-order-summary-item__image,
  body.woocommerce-checkout .wc-block-components-order-summary-item__image img {
    width: 60px;
  }

  body.woocommerce-checkout .wc-block-components-order-summary-item__image img {
    height: 60px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.woocommerce-cart .wc-block-cart__submit-button,
  body.woocommerce-checkout .wc-block-components-checkout-place-order-button {
    transform: none !important;
  }
}