/* ==========================================================================
   AMB Responsive & Accessibility
   Breakpoints match Elementor Pro defaults: Mobile ≤767px, Tablet 768–1024px.
   Do not just scale — collapse nav, stack grids, and grow touch targets.
   ========================================================================== */

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); }
  .single-product div.product .amb-buy-box { position: static; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: var(--amb-space-16); }

  /* Header: collapse inline nav into the Elementor mobile menu (hamburger) —
     configure in the Header template's Navigation Menu widget, not here. */
  .amb-header-inline-nav { display: none; }

  /* Product page: stack gallery / info / buy box */
  .single-product div.product { grid-template-columns: 1fr !important; } /* WooCommerce/Elementor set inline grid-template-columns on this element; !important is required here */
  .amb-buy-box { position: static; margin-top: var(--amb-space-24); }

  /* Cart & checkout: stack columns */
  .woocommerce-cart .cart-collaterals,
  .woocommerce-checkout .col2-set,
  #order_review { display: block !important; width: 100% !important; } /* overrides WooCommerce's inline 48%/fit-content column widths */

  /* Touch targets: never below 44px */
  .woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
  .woocommerce .quantity .qty, .woocommerce form .form-row .input-text {
    min-height: 44px;
  }

  .single-product div.product .product_title { font-size: 26px; }
}

/* ---------- Accessibility ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
.woocommerce a.button:focus-visible {
  outline: 2px solid var(--amb-color-primary);
  outline-offset: 2px;
}

.screen-reader-text {
  position: absolute !important; /* standard WP SR-only pattern, requires !important to defeat theme resets */
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px; height: 1px; overflow: hidden;
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}