/* ===== RESPONSIVE CSS ===== */

@media (max-width: 1200px) {
  .nav-menu > li > a { padding: 0.75rem 0.45rem; font-size: 0.8rem; }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 992px) {
  .main-navigation { display: none; }
  .mobile-menu-toggle { display: block; }
  .mobile-nav { display: block; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .mega-menu { min-width: 400px; }
}

@media (max-width: 768px) {
  .top-bar .flex-between { flex-direction: column; text-align: center; gap: 0.3rem; }
  .top-bar-right { display: flex; gap: 0.75rem; }
  .top-bar-right a { margin-left: 0; }
  .footer-grid { grid-template-columns: 1fr; }
  .newsletter-form { flex-direction: column; border-radius: 0; }
  .newsletter-form input { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
  .newsletter-form .btn { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
  .footer-legal { flex-direction: column; gap: 0.5rem; }
  .page-hero { padding: 2.5rem 0; }
  .page-hero h1 { font-size: 1.8rem; }
  .section { padding: 3rem 0; }
  .grid-2 { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-number { font-size: 2rem; }
}

@media (max-width: 480px) {
  .container { padding: 0 1rem; }
  .logo-main { font-size: 1.4rem; }
  .btn { padding: 0.7rem 1.5rem; font-size: 0.85rem; }
  .btn-lg { padding: 0.85rem 2rem; }
  .card-body { padding: 1rem; }
  .product-card .product-img { height: 180px; }
  .stats-grid { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.3rem; }
}