/* ==============================================
   Сетка категорий [ddd_categories_grid]
   ============================================== */

.ddd-categories-grid {
    display: grid;
    gap: 20px;
    margin: 30px 0;
}

/* ===== КОЛОНКИ (базовые) ===== */
.ddd-grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.ddd-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.ddd-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.ddd-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.ddd-grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.ddd-grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

/* ==============================================
   АДАПТИВ
   ============================================== */

/* ----- МОБИЛКА (≤ 720px) — 2 колонки (по умолчанию) ----- */
@media (max-width: 720px) {
    .ddd-grid-cols-2,
    .ddd-grid-cols-3,
    .ddd-grid-cols-4,
    .ddd-grid-cols-5,
    .ddd-grid-cols-6 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
}

/* ----- МОБИЛКА — 3 колонки (доп. класс) ----- */
@media (max-width: 720px) {
    .ddd-grid-cols-3-mobile {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
    }
}

/* ----- ПЛАНШЕТ (721px – 1024px) — 3 колонки ----- */
@media (min-width: 721px) and (max-width: 1032px) {
    .ddd-grid-cols-3,
    .ddd-grid-cols-4,
    .ddd-grid-cols-5,
    .ddd-grid-cols-6 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
    /* Если cols=1 или 2 — оставляем как есть */
    .ddd-grid-cols-1 {
        grid-template-columns: repeat(1, 1fr) !important;
    }
    .ddd-grid-cols-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ----- ПК (≥ 1033px) — как в cols ----- */
@media (min-width: 1033px) {
    .ddd-grid-cols-1 {
        grid-template-columns: repeat(1, 1fr) !important;
    }
    .ddd-grid-cols-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .ddd-grid-cols-3 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .ddd-grid-cols-4 {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    .ddd-grid-cols-5 {
        grid-template-columns: repeat(5, 1fr) !important;
    }
    .ddd-grid-cols-6 {
        grid-template-columns: repeat(6, 1fr) !important;
    }
}