/* ==================== Responsive Styles ==================== */

@media (max-width: 1024px) {
  .categories-grid, .featured-grid { grid-template-columns: repeat(3, 1fr); }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .brand-content { gap: 40px; }
  .brand-text h2 { font-size: 1.6rem; }
  .contact-layout { gap: 32px; }
  .contact-info-panel { width: 280px; }
}

@media (max-width: 768px) {
  .container { padding: 0 16px; }

  .nav {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    gap: 0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  }
  .nav.open { display: flex; }
  .nav a { padding: 14px 20px; border-bottom: 1px solid #f0f0f0; }

  .menu-toggle { display: flex; }

  .banner { height: 360px; }
  .banner-slide .slide-content h2 { font-size: 1.6rem; }
  .banner-slide .slide-content p { font-size: 0.85rem; }

  .section { padding: 40px 0; }
  .section-title { margin-bottom: 2rem; }
  .section-title h2 { font-size: 1.4rem; }

  .categories-grid, .featured-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .category-card img { height: 200px; }
  .news-grid { grid-template-columns: 1fr; }

  .brand-content { flex-direction: column-reverse; }
  .brand-image img { height: 280px; }

  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }

  .products-layout { flex-direction: column; }
  .filter-sidebar { width: 100%; }

  .product-detail { flex-direction: column; gap: 24px; padding: 30px 0; }

  .cart-table { display: block; overflow-x: auto; }

  .user-layout { flex-direction: column; }
  .user-sidebar { width: 100%; }
  .user-sidebar ul { display: flex; gap: 8px; flex-wrap: wrap; }

  .contact-layout { flex-direction: column; gap: 32px; }
  .contact-info-panel { width: 100%; flex-direction: row; flex-wrap: wrap; }
  .contact-info-panel .contact-info-card { flex: 1; min-width: 200px; }
}

@media (max-width: 480px) {
  .categories-grid, .featured-grid { grid-template-columns: 1fr; }
  .products-grid { grid-template-columns: 1fr; }

  .banner { height: 280px; }
  .banner-slide .slide-content h2 { font-size: 1.2rem; letter-spacing: 2px; }

  .header-inner { height: 56px; }
  .logo { font-size: 1.2rem; }
  .header-actions { gap: 0.6rem; }
  .header-actions a { font-size: 0.8rem; }

  .pagination { flex-wrap: wrap; }

  .page-banner { height: 200px; }
  .page-banner h1 { font-size: 1.4rem; letter-spacing: 4px; }
  .policy-section { padding: 32px 0; }
  .policy-block { padding: 20px; }
  .policy-block h3 { font-size: 1rem; }
  .policy-contact-card { padding: 20px; }
  .back-to-top { bottom: 20px; right: 20px; width: 40px; height: 40px; }

  .contact-layout { flex-direction: column; }
  .contact-info-panel { width: 100%; }
  .contact-form .form-row { flex-direction: column; gap: 0; }
  .contact-form-wrap { padding: 24px; }
}