/* =============================================================
   PAGE / CHECKOUT
   
   Оформление заказа: выбор доставки, оплаты, получателя.
   ============================================================= */

.checkout-page {
    position: relative;
    z-index: 0;
}

.checkout-page h2 {
    font-size: 1.25em;
}

/* ---------------------------------------------------------
   ИНФО-БЛОК
   Раскладка из нескольких секций: доставка, оплата, получатель.
   --------------------------------------------------------- */

div.checkout-info-wrapper {
    display: grid;
}

div.checkout-info-wrapper>div {
    padding: var(--space-5);
}

div.checkout-info-wrapper fieldset.payment-method-list label {
    display: block;
    line-height: 2;
}

/* Планшет — одна колонка */
@media (min-width: 768px) and (max-width: 1023px) {
    div.checkout-info-wrapper {
        grid-template-columns: minmax(280px, 1fr);
        grid-gap: var(--space-5);
    }
}

/* Десктоп — две колонки */
@media (min-width: 1024px) {
    div.checkout-info-wrapper {
        grid-template-columns: repeat(2, minmax(280px, 1fr));
        grid-gap: var(--space-5);
    }
}

/* ---------------------------------------------------------
   FIELD SET С КОЛОНКАМИ
   Адрес доставки: 4 виртуальные колонки внутри fieldset
   --------------------------------------------------------- */

fieldset.columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: var(--space-5);
}

label.street {
    grid-column: 1 / 4;
}

label.buyer-note {
    grid-column: 1 / 5;
}