@media (max-width: 1024px) {
    .hero h1 { font-size: 36px; }
    .hero p { font-size: 18px; }
    .categories, .products { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

@media (max-width: 768px) {
    .top-header { flex-wrap: wrap; }
    .logo { margin-bottom: 10px; }
    .search-bar { order: 3; margin: 10px 0; width: 100%; }
    .header-actions { margin-left: auto; }
    .hero { padding: 50px 0; }
    .hero h1 { font-size: 32px; }
    .hero p { font-size: 16px; }
    .categories, .products { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; }
    .footer-content { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .nav-links { overflow-x: auto; white-space: nowrap; padding-bottom: 5px; }
    .nav-links li { margin-right: 15px; }
    .hero { padding: 40px 0; }
    .hero h1 { font-size: 28px; }
    .categories, .products { grid-template-columns: repeat(2, 1fr); }
    .products-filter { justify-content: center; }
    .filter-btn { padding: 6px 12px; font-size: 14px; }
    .footer-content { grid-template-columns: 1fr; text-align: center; }
    .modal-content { width: 95%; padding: 15px; }
    .cart-item { flex-direction: column; text-align: center; }
    .cart-item-image { margin-right: 0; margin-bottom: 10px; }
}

@media (max-width: 360px) {
    .categories, .products { grid-template-columns: 1fr; }
    .header-action { margin-left: 10px; }
    .header-action span { font-size: 10px; }
}