/* ============================================
   AI Digital Market - Responsive Additions
   These override / add to the main style.css breakpoints
   ============================================ */

@media (max-width: 1200px) {
  .category-grid { grid-template-columns: repeat(3, 1fr); }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
  .hero h1 { font-size: 40px; }
  .hero p { font-size: 16px; }
  .cart-layout { grid-template-columns: 1fr; }
  .dashboard-layout { grid-template-columns: 1fr; }
  .product-detail-layout { grid-template-columns: 1fr; }
  .product-gallery { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .dash-stats { grid-template-columns: repeat(2, 1fr); }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .container { padding: 0 16px; }
  .main-header .container { height: 60px; gap: 12px; }
  .main-nav { display: none; }
  .mobile-toggle { display: block; }
  .search-bar { max-width: none; flex: 1; }
  .logo-text { font-size: 18px; }
  .hero { padding: 60px 0 60px; }
  .hero h1 { font-size: 32px; }
  .hero p { font-size: 15px; }
  .hero-stats { gap: 24px; }
  .stat-number { font-size: 24px; }
  .section { padding: 48px 0; }
  .section-header h2 { font-size: 26px; }
  .section-header p { font-size: 14px; }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .features-grid { grid-template-columns: 1fr; }
  .filter-bar { gap: 8px; }
  .filter-bar select { width: 100%; }
  .auth-card { padding: 24px; margin: 0 16px; }
  .page-header { padding: 32px 0; }
  .page-header h1 { font-size: 26px; }
  .product-detail-info h1 { font-size: 24px; }
  .detail-price { font-size: 28px; }
  .dash-stats { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .dash-tabs { overflow-x: auto; }
  .dash-tab { white-space: nowrap; }
  .dash-table { font-size: 12px; }
  .dash-table th, .dash-table td { padding: 10px 8px; }
  .cart-item { flex-wrap: wrap; }
  .cart-item-img { width: 80px; height: 56px; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 26px; }
  .hero p { font-size: 14px; }
  .hero-actions { flex-direction: column; }
  .hero-actions a, .hero-actions button { width: 100%; text-align: center; justify-content: center; }
  .category-grid { grid-template-columns: 1fr 1fr; }
  .product-grid { grid-template-columns: 1fr; }
  .btn-hero-primary, .btn-hero-secondary { padding: 12px 24px; font-size: 14px; }
  .hero-stats { gap: 16px; }
  .stat-number { font-size: 20px; }
  .stat-label { font-size: 12px; }
  .top-bar { font-size: 11px; }
  .top-bar .container { justify-content: center; }
  .top-bar span:last-child { display: none; }
  .detail-actions { flex-direction: column; }
  .cta-content h2 { font-size: 24px; }
  .cta-content p { font-size: 14px; }
}
