/* ============================================
   RESPONSIVE.CSS — Адаптив для всех экранов
   ============================================ */

/* Большие экраны */
@media (min-width: 1600px) {
    .container {
        max-width: 1480px;
    }
    .catalog-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .popular-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .catalog-grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1920px) {
    .container {
        max-width: 1680px;
        padding: 0 40px;
    }
    .catalog-grid {
        grid-template-columns: repeat(5, 1fr);
    }
    .directions-grid-new {
        grid-template-columns: repeat(4, 1fr);
    }
    .hero-content {
        max-width: 900px;
    }
    .hero-title {
        font-size: 4rem;
    }
    .hero-description {
        font-size: 1.15rem;
    }
    .advantages-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .about-premium {
        gap: 80px;
    }
}

@media (min-width: 2200px) {
    .container {
        max-width: 1800px;
        padding: 0 48px;
    }
    .catalog-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (min-width: 2560px) {
    .container {
        max-width: 2000px;
        padding: 0 60px;
    }
    .catalog-grid {
        grid-template-columns: repeat(6, 1fr);
    }
    .hero-content {
        max-width: 1000px;
    }
    .hero-title {
        font-size: 4.5rem;
    }
}

/* Планшеты */
@media (max-width: 1200px) {
    .catalog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .catalog-grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }
    .popular-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .container {
        padding: 0 20px;
    }
    .catalog-layout {
        grid-template-columns: 1fr;
    }
    .catalog-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .sidebar-banner {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 16px;
    }
    .catalog-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    .popular-grid {
        grid-template-columns: 1fr 1fr;
    }
    .catalog-sidebar {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 12px;
    }
    .catalog-grid {
        grid-template-columns: 1fr;
    }
    .popular-grid {
        grid-template-columns: 1fr;
    }
    .catalog-grid-4 {
        grid-template-columns: 1fr;
    }
}