/* ========================================
   RESPONSIVE - Mobile-First Breakpoints
   ======================================== */

/* ---- Mobile Base (< 480px) ---- */
.container { padding: 0 var(--space-md); }

.nav-links { display: none; }
.mobile-menu-btn { display: flex; }

/* Mobile Nav Menu */
.mobile-nav {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  width: 100%;
  background: var(--bg-card);
  padding: var(--space-xl);
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: all var(--duration-normal) var(--ease-smooth);
  box-shadow: var(--shadow-lg);
  z-index: 999;
  border-bottom: var(--border-light);
}
.mobile-nav.active {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}
.mobile-nav-link {
  display: block;
  padding: var(--space-md) 0;
  font-size: 1.1rem;
  font-weight: var(--fw-medium);
  color: var(--clr-text);
  border-bottom: var(--border-light);
  transition: color var(--duration-fast);
}
.mobile-nav-link:hover { color: var(--clr-primary); }
.mobile-nav-link:last-child { border-bottom: none; }

/* Mobile Hero */
.hero-content {
  grid-template-columns: 1fr;
  text-align: center;
  gap: var(--space-2xl);
  padding: var(--space-xl) 0;
}
.hero-text { max-width: 100%; }
.hero-description { margin-left: auto; margin-right: auto; }
.hero-ctas { justify-content: center; }
.hero-stats { justify-content: center; gap: var(--space-xl); }
.hero-visual { order: -1; }
.hero-image-wrapper { max-width: 320px; margin: 0 auto; }
.hero-float-card { display: none; }

/* Mobile Product Grid */
.products-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-md); }

/* Mobile Modal */
.modal-body { grid-template-columns: 1fr; }
.modal-image { max-height: 300px; }

/* Mobile Contact */
.contact-grid { grid-template-columns: 1fr; }

/* Mobile Footer */
.footer-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
.footer-bottom { flex-direction: column; gap: var(--space-sm); text-align: center; }

/* Mobile Cart Page */
.cart-page-grid { grid-template-columns: 1fr; }
.cart-page-item { flex-wrap: wrap; }
.cart-page-item-img { width: 70px; height: 70px; }

/* Mobile Admin */
.admin-grid { grid-template-columns: 1fr; }
.admin-sidebar { position: static; }

/* Mobile Filter */
.filter-bar { flex-direction: column; align-items: stretch; }
.search-box { min-width: 100%; }

/* Cart Drawer Mobile */
.cart-drawer { width: 100%; }

/* Floating buttons */
.floating-call a, .floating-whatsapp a { width: 48px; height: 48px; font-size: 1.2rem; }
.floating-call { bottom: 20px; left: 20px; }
.floating-whatsapp { bottom: 20px; right: 20px; }

/* ---- Small tablets (>= 480px) ---- */
@media (min-width: 480px) {
  .container { padding: 0 var(--space-lg); }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-image-wrapper { max-width: 380px; }
}

/* ---- Tablets (>= 768px) ---- */
@media (min-width: 768px) {
  .container { padding: 0 var(--space-xl); }

  .products-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); }
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .cart-page-grid { grid-template-columns: 1fr; }
  .cart-page-item { flex-wrap: nowrap; }
  .cart-page-item-img { width: 90px; height: 90px; }

  .hero-float-card { display: flex; }
  .hero-image-wrapper { max-width: 420px; }

  .modal-body { grid-template-columns: 1fr 1fr; }
  .modal-image { max-height: none; }

  .cart-drawer { width: var(--sidebar-width); }
  .admin-product-grid { grid-template-columns: repeat(2, 1fr); }
  .filter-bar { flex-direction: row; align-items: center; }
}

/* ---- Laptops (>= 1024px) ---- */
@media (min-width: 1024px) {
  .nav-links { display: flex; }
  .mobile-menu-btn { display: none; }

  .hero-content {
    grid-template-columns: 1fr 1fr;
    text-align: left;
    gap: var(--space-4xl);
    padding: var(--space-3xl) 0;
  }
  .hero-visual { order: 0; }
  .hero-ctas { justify-content: flex-start; }
  .hero-stats { justify-content: flex-start; }
  .hero-description { margin-left: 0; }
  .hero-image-wrapper { max-width: 500px; }

  .products-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .cart-page-grid { grid-template-columns: 1fr 380px; }
  .admin-grid { grid-template-columns: 280px 1fr; }
  .admin-sidebar { position: sticky; }
  .admin-product-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Large screens (>= 1200px) ---- */
@media (min-width: 1200px) {
  .products-grid { grid-template-columns: repeat(4, 1fr); }
  .features-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Print ---- */
@media print {
  .navbar, .floating-call, .floating-whatsapp, .cart-drawer, .cart-drawer-overlay, .toast-container { display: none !important; }
  .hero { min-height: auto; padding: var(--space-xl) 0; }
  body { background: white; color: black; }
}