/*
 * V887 — adaptive checkout choices and floating-navigation clearance.
 * DEV-only overlay for V886.2; does not alter markup or MiniShop3 actions.
 * Scoped to cart/checkout on mobile/tablet (< 992 px).
 */
@media (max-width: 991.98px) {
  /*
   * Shared floating back/up controls previously sat over V886's fixed
   * bottom payment bar. Lift the entire stacked navigation above the bar.
   * On unrelated pages and desktop the original navigation stays intact.
   */
  body.page-cart-full .ag-page-navigation,
  body.page-checkout .ag-page-navigation {
    bottom: calc(var(--ag-v886-dock-height, 79px) + env(safe-area-inset-bottom, 0px) + 18px) !important;
  }

  /*
   * Auto-fit follows the actual inner card width, not a guessed device type.
   * With enough space 2+ methods can share a row; when there isn't enough,
   * each choice expands to the full available width automatically.
   */
  body.page-checkout .am-choice-grid.checkout-delivery-methods {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 345px), 1fr)) !important;
    gap: 10px 12px !important;
    align-items: stretch;
  }

  /* Payment has no special class: identify its original payment labels. */
  body.page-checkout .am-choice-grid:has(> .am-choice[data-albero-payment-id]) {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 345px), 1fr)) !important;
    gap: 10px 12px !important;
    align-items: stretch;
  }

  body.page-checkout .checkout-delivery-methods > .am-choice,
  body.page-checkout .am-choice-grid:has(> .am-choice[data-albero-payment-id]) > .am-choice {
    width: 100%;
    min-width: 0;
    height: 100%;
    margin: 0 !important;
    align-items: flex-start;
  }

  body.page-checkout .checkout-delivery-methods .checkout-choice-copy-v467,
  body.page-checkout .am-choice-grid:has(> .am-choice[data-albero-payment-id]) .am-choice > span {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}