/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* ============ TABLET (1024px) ============ */
@media (max-width: 1024px) {
  .container { padding: 0 20px; }
  .category-grid { grid-template-columns: repeat(4, 1fr); }
  .product-grid, .product-grid.cols-4, .product-grid.cols-5 { grid-template-columns: repeat(3, 1fr); }
  .collection-grid { grid-template-columns: repeat(2, 1fr); }
  .brand-grid { grid-template-columns: repeat(4, 1fr); }
  .benefits-strip { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .shop-layout { grid-template-columns: 220px 1fr; gap: 20px; }
  .hero-content h1 { font-size: 36px; }
  .deal-block { padding: 28px; gap: 24px; }
}

/* ============ MOBILE (768px and below) ============ */
@media (max-width: 768px) {
  .utility-bar { display: none; }
  .main-header { display: none; }
  .mobile-header { display: flex; }

  .category-nav-inner { overflow-x: auto; }
  .main-nav { overflow-x: auto; }

  .hero-inner { grid-template-columns: 1fr; min-height: auto; }
  .hero-media { min-height: 260px; order: -1; }
  .hero-content h1 { font-size: 28px; }
  .hero-actions { flex-wrap: wrap; }

  .category-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }

  .product-grid, .product-grid.cols-3, .product-grid.cols-4, .product-grid.cols-5 {
    grid-template-columns: repeat(2, 1fr); gap: 12px;
  }

  .editorial-banner-content { padding: 28px 24px; }
  .editorial-banner-content h2 { font-size: 24px; }

  .collection-grid { grid-template-columns: 1fr 1fr; }
  .brand-grid { grid-template-columns: repeat(2, 1fr); }
  .benefits-strip { grid-template-columns: repeat(2, 1fr); }

  .deal-block { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom-inner { flex-direction: column; gap: 6px; text-align: center; }

  .newsletter-form { flex-direction: column; }

  .shop-layout { grid-template-columns: 1fr; }
  .filter-sidebar {
    position: fixed; top: 0; left: -320px; width: 300px; height: 100%; z-index: 500;
    overflow-y: auto; transition: left 0.25s ease; border-radius: 0;
  }
  .filter-sidebar.active { left: 0; }
  .mobile-filter-btn {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid var(--border); border-radius: 4px; padding: 9px 16px; font-size: 12px; font-weight: 700;
  }
  .grid-switch { display: none; }

  section.home-section { padding: 36px 0; }

  .mobile-bottom-nav { display: flex; }
  body { padding-bottom: 56px; }
  .cart-drawer-footer { padding-bottom: 24px; }
}

@media (max-width: 480px) {
  .category-grid { grid-template-columns: repeat(3, 1fr); }
  .collection-grid { grid-template-columns: 1fr; }
  .brand-grid { grid-template-columns: repeat(2, 1fr); }
  .benefits-strip { grid-template-columns: 1fr 1fr; }
}