/* ── RESPONSIVE ── */
@media (max-width: 1200px) {
  .products-grid { grid-template-columns: repeat(3, 1fr); }
  .categories-grid { grid-template-columns: repeat(4, 1fr); }
  .brands-grid { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; gap: 40px; }
  .hero-image { display: none; }
  .hero-cta { justify-content: center; }
  .hero-stats { justify-content: center; }
  .catalog-layout { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .product-detail { grid-template-columns: 1fr; }
  .product-gallery { position: static; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .about-stats { grid-template-columns: repeat(2, 1fr); }
  .checkout-layout { grid-template-columns: 1fr; }
  .cart-layout { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .topbar-left { display: none; }
  .header-search { max-width: 300px; }
  .header-btn span { display: none; }
  .main-nav { display: none; }
  .mobile-menu-btn { display: flex; align-items: center; margin-left: auto; }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .categories-grid { grid-template-columns: repeat(3, 1fr); }
  .brands-grid { grid-template-columns: repeat(3, 1fr); }
  .features-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .comparison-table { font-size: 12px; }
  .newsletter-form { flex-direction: column; }
  .form-grid { grid-template-columns: 1fr; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .section { padding: 40px 0; }
  .section-lg { padding: 56px 0; }
  .sort-bar { flex-direction: column; align-items: flex-start; }
  .hero { padding: 50px 0 44px; }
}
@media (max-width: 480px) {
  .products-grid { grid-template-columns: 1fr; }
  .categories-grid { grid-template-columns: repeat(2, 1fr); }
  .brands-grid { grid-template-columns: repeat(2, 1fr); }
  .header-inner { padding: 0 16px; }
  .container { padding: 0 16px; }
  .hero h1 { font-size: 26px; }
  .product-detail-name { font-size: 20px; }
  .about-stats { grid-template-columns: 1fr 1fr; }
}