/* === Scroll horizontal de categorías === */
.categorias-scroll { width: 100%; overflow-x: auto; scrollbar-width: none; }
.categorias-scroll::-webkit-scrollbar { display: none; }
.categorias { display: inline-flex; flex-wrap: nowrap; gap: 8px; padding-bottom: 6px; }
.chip { white-space: nowrap; }

/* 📱 Teléfonos y pantallas pequeñas (<=768px) */
@media (max-width: 768px) {
  .navbar { flex-direction: column; height: auto; padding: 10px; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .card { height: auto; }
  .sidebar { display: none; }

  /* FAB móvil */
  .cart-fab {
    bottom: 20px; right: 20px; width: 56px; height: 56px; z-index: 1500;
  }
  .cart-icon { width: 26px; height: 26px; }

  /* Modal del carrito móvil */
  .mobile-cart {
    position: fixed; left: 0; right: 0; bottom: -100%;
    background: #fff; border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.25);
    transition: bottom .3s ease; z-index: 2000;
    display: flex; flex-direction: column; padding: 16px; max-height: 80vh;
  }
  .mobile-cart.show { bottom: 0; }
  .mobile-cart-header {
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid #eee; padding-bottom: 10px;
  }
  .mobile-cart-header h3 { margin: 0; font-size: 16px; }
  .close-cart { background: none; border: none; font-size: 22px; color: #444; cursor: pointer; }
  .mobile-cart-body { flex: 1; overflow-y: auto; padding: 10px 0; }
  .mobile-cart .btn-wa { margin-top: 12px; width: 100%; }
  .mobile-cart .legal { font-size: 11px; color: #777; text-align: center; margin-top: 10px; border-top: 1px solid #eee; padding-top: 8px; }
}

/* 💻 Escritorio (>=1025px): ocultar UI móvil */
@media (min-width: 1025px) {
  .cart-fab, .mobile-cart { display: none !important; }
}