/* =============================================================
   LAYOUT / COLUMNS
   
   Двухколоночные раскладки для страниц с сайдбаром:
   - .product-columns  → товар + сайдбар
   - .cart-container   → корзина + сайдбар
   - .checkout-columns → чекаут + сайдбар
   
   Одна и та же логика адаптива — три имени для читаемости в HTML.
   ============================================================= */

div.product-columns,
div.cart-container,
div.checkout-columns {
    display: grid;
}

/* Планшет — две колонки, правая уже */
@media (min-width: 768px) and (max-width: 1023px) {

    div.product-columns,
    div.cart-container,
    div.checkout-columns {
        grid-template-columns: minmax(280px, 2fr) minmax(280px, 1fr);
        grid-gap: var(--space-5);
    }
}

/* Мобилка — одна колонка */
@media (max-width: 767px) {

    div.product-columns,
    div.cart-container,
    div.checkout-columns {
        grid-template-columns: minmax(280px, 1fr);
        grid-gap: var(--space-5);
    }
}

/* Десктоп — одна колонка для checkout, две для остальных */
@media (min-width: 1024px) {

    div.product-columns,
    div.cart-container {
        grid-template-columns: 3fr minmax(280px, 1fr);
        grid-gap: 30px;
    }

    div.checkout-columns {
        grid-template-columns: 1fr;
    }
}