/* ===== RESPONSIVE - letgo style ===== */

@media (max-width: 1200px) {
    .listings-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
    .listings-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}

@media (max-width: 768px) {
    .header-top { flex-wrap: wrap; gap: 10px; padding: 10px 16px; }
    .header-search { order: 5; max-width: 100%; flex-basis: 100%; }
    .location-selector { display: none; }
    .mobile-toggle { display: flex; }
    
    .category-bar { display: none; }
    .category-bar.active { display: block; }
    
    .main-nav { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #fff; z-index: 9999; padding: 60px 20px 20px; }
    .main-nav.active { display: block; }
    .main-nav ul { flex-direction: column; }
    .main-nav a { display: block; padding: 14px 16px; font-size: 16px; border-bottom: 1px solid var(--color-gray-100); }
    
    .mobile-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); }
    .mobile-toggle.active span:nth-child(2) { opacity: 0; }
    .mobile-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); }
    
    .banner-slides { aspect-ratio: 2/1; }
    .banner-slide-content h2 { font-size: 20px; }
    .banner-slide-content { padding: 24px; }
    
    .trend-cat-card { width: 110px; }
    .trend-cat-img { width: 110px; height: 80px; }
    
    .listings-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    
    .activation-inner { flex-direction: column; text-align: center; padding: 20px; }
    .activation-inner h3 { font-size: 18px; }
    
    .footer-grid { grid-template-columns: 1fr; text-align: center; }
    .footer-social { justify-content: center; }
    
    .auth-modal, .location-modal { margin: 16px; }
    
    .btn-login { padding: 8px 16px; font-size: 13px; }
    .btn-sell { padding: 8px 16px; font-size: 13px; }
    .btn-sell span { display: none; }
    
    .lang-switcher-btn > span:not(.flag) { display: none; }
    .lang-switcher-btn svg:last-child { display: none; }
}

@media (max-width: 480px) {
    .header-top { padding: 8px 12px; }
    .site-logo img { height: 28px; }
    .site-logo .logo-fallback { font-size: 22px; }
    .listings-grid { grid-template-columns: 1fr; }
    .ilan-card-price { font-size: 16px; }
    .trend-categories h2, .popular-listings h2 { font-size: 16px; }
    .banner-slides { aspect-ratio: 16/9; }
}