/* ============================================================
   Bebé Crece — Pulido responsive móvil (20260711)
   Correcciones puntuales detectadas en auditoría. No cambia la
   identidad visual: solo tamaños táctiles, bloqueos de scroll,
   apilado del cupón, encabezado en pantallas de 320–380 px,
   áreas seguras de iPhone y modales en orientación horizontal.
   Cargar DESPUÉS de los demás CSS.
   ============================================================ */

/* ---------- 1. Fondo bloqueado con carrito o menú abiertos ----------
   bc-mobile-cart-fix.css ya define body.cart-open{overflow:hidden} pero
   nada agregaba la clase (el JS ahora la sincroniza). Este :has() cubre
   además el menú móvil en navegadores modernos. */
@media (max-width: 1100px){
  body:has(#cartDrawer.open),
  body:has(.cart-drawer.open),
  body:has(.menu.open){ overflow: hidden !important; }

  /* Menú abierto: nunca más alto que la pantalla (clave en horizontal) */
  .nav .menu.open{
    max-height: calc(100dvh - 76px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

/* ---------- 2. Controles táctiles del carrito (antes 28×28 px) ---------- */
@media (max-width: 860px){
  #cartDrawer .cart-qty button,
  .cart-drawer .cart-qty button,
  #cartDrawer .qty-controls button,
  .cart-drawer .qty-controls button,
  #cartDrawer .quantity-controls button,
  .cart-drawer .quantity-controls button,
  .cart-drawer .qty-btn{
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    font-size: 18px !important;
    border-radius: 12px !important;
  }
  #cartDrawer .cart-qty input,
  .cart-drawer .cart-qty input,
  #cartDrawer .qty-controls input,
  .cart-drawer .qty-controls input,
  #cartDrawer .quantity-controls input,
  .cart-drawer .quantity-controls input{
    width: 52px !important;
    height: 40px !important;
    font-size: 16px !important;
  }
  .cart-line-controls button,
  .cart-line-controls input{ height: 44px !important; }
  .cart-line-controls .cart-remove-fixed{ min-width: 44px !important; }
  .remove-cart-line,
  .cart-remove{
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  /* separación mínima entre táctiles vecinos */
  .cart-qty, .qty-controls, .quantity-controls{ gap: 8px !important; }
}

/* ---------- 3. Cupón: campo y botón apilados cuando no hay espacio ---------- */
@media (max-width: 430px){
  #checkoutSummary .gift-credit-row input,
  #bcCheckoutSummary .gift-credit-row input{ flex: 1 1 100% !important; }
  #checkoutSummary .gift-credit-row button,
  #bcCheckoutSummary .gift-credit-row button{ width: 100% !important; }
}

/* ---------- 4. Encabezado compacto en 320–380 px ----------
   (logo + hamburguesa + carrito + cuenta ya no caben con los tamaños base) */
@media (max-width: 380px){
  .nav{ padding: 8px 10px !important; gap: 6px !important; }
  .brand img{ height: 40px !important; max-width: 96px !important; }
  .nav-actions{ gap: 6px !important; }
  .nav-cart{ padding: 8px 10px !important; font-size: 13px !important; }
  .nav-cart span{ min-width: 19px !important; height: 19px !important; font-size: 11px !important; }
  .hamb{ padding: 8px 11px !important; }
  .bc-account-btn{ max-width: 40px !important; padding: 8px !important; }
}

/* ---------- 5. Botones flotantes: área segura de iPhone ----------
   (env() vale 0 donde no aplique; no cambia nada en Android/desktop) */
.float-wa{ bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important; }
.float-cart{ bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
.float-up{ bottom: calc(168px + env(safe-area-inset-bottom, 0px)) !important; }
@media (max-width: 640px){
  .float-up, .float-wa, .float-cart{ right: 14px !important; }
}

/* ---------- 6. Resumen del pedido: valores nunca fuera del contenedor ---------- */
#checkoutSummary .summary-row,
#checkoutSummary .summary-total,
#bcCheckoutSummary .summary-row,
#bcCheckoutSummary .summary-total{ flex-wrap: wrap !important; }
#checkoutSummary .summary-row span,
#bcCheckoutSummary .summary-row span{ min-width: 0; overflow-wrap: anywhere; }
#checkoutSummary .summary-row b,
#checkoutSummary .summary-total b,
#bcCheckoutSummary .summary-row b,
#bcCheckoutSummary .summary-total b{ white-space: nowrap; margin-left: auto; }

/* ---------- 7. Teléfono en horizontal: modales y popups con alto seguro ---------- */
@media (max-height: 500px){
  .product-detail-modal,
  .checkout-modal{
    max-height: 96dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .bc-login-gate-card,
  .bc-welcome-coupon-card,
  .bc-auth-modal > div,
  #bcAuthModal > div{
    max-height: 92dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .nav .menu.open{ max-height: calc(100dvh - 60px) !important; overflow-y: auto !important; }
}

/* ---------- 8. Redes de seguridad generales (sin cambiar diseño) ---------- */
@media (max-width: 860px){
  table{ display: block; max-width: 100%; overflow-x: auto; }
  .wrap, .section, .footer-grid{ min-width: 0; }
  .footer{ padding-left: max(5vw, env(safe-area-inset-left, 0px)) !important;
           padding-right: max(5vw, env(safe-area-inset-right, 0px)) !important; }
}