.delivery {
    font-family: var(--font-family);
    color: var(--chernyy);
}

.delivery__subtitle {
    font-weight: 700;
    font-size: clamp(16px, 12.8px + 1vw, 30px);
    line-height: 150%;
}

.delivery__herosection {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
}

.delivery__bilboard img {
    min-height: 242px;
    object-fit: cover;
}

.delivery__methods {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.delivery__methods-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.delivery__methods-item {
    font-weight: 500;
    font-size: clamp(15px, 13.286px + 0.536vw, 18px);
    line-height: 140%;
}

.delivery__ways {
    box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.07);
    background: var(--belyy);
    padding: 15px;
}

.delivery__ways-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.delivery__ways-title {
    margin-bottom: 15px;
}

.delivery__ways-block {
    background: var(--svetlo-seryy);
    padding: 20px;
}

.delivery__block-title {
    font-weight: 700;
    font-size: clamp(15px, 13.214px + 0.558vw, 20px);
    line-height: 140%;
    margin-bottom: 5px;
}

.delivery__block-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.delivery__block-item {
    font-weight: 500;
    font-size: clamp(15px, 13.286px + 0.536vw, 18px);
    line-height: 140%;
}

@media (min-width: 768px) {
    .delivery__subtitle {
        font-weight: 500;
        line-height: 117%;
    }

    .delivery__herosection {
        gap: 20px;
        box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.1);
        background: var(--belyy);
        padding: 20px;
        margin-bottom: 60px;
    }

    .delivery__bilboard {
        flex: 1;
    }

    .delivery__methods {
        max-width: 702px;
    }

    .delivery__methods-title {
        margin-bottom: 5px;
    }

    .delivery__ways {
        padding: 20px;
    }

    .delivery__ways-wrapper {
        flex-direction: row;
        gap: 20px;
    }

    .delivery__block-title {
        line-height: 125%;
        margin-bottom: 15px;
    }
}
/* Figma "Доставка и оплата" (1920): "ДОСТАВКА" is a section title above the white card,
   three equal grey cards inside, bullets written inline ("• "), no list indent */
@media (min-width: 768px) {
    .delivery__methods-list {
        gap: 10px;
    }

    .delivery__ways {
        background: none;
        box-shadow: none;
        padding: 0;
    }

    .delivery__ways-title {
        font-weight: 600;
        line-height: 120%;
        text-transform: uppercase;
        margin-bottom: 20px;
    }

    .delivery__ways-wrapper {
        background: var(--belyy);
        box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.1);
        padding: 20px;
    }

    .delivery__ways-block {
        flex: 1 1 0;
        min-width: 0;
    }

    .delivery__block-list {
        gap: 0;
        padding: 0;
        list-style: none;
    }

    .delivery__block-item::before {
        content: "• ";
    }
}

@media (min-width: 1200px) {
    .delivery__herosection {
        flex-direction: row;
        flex-flow: row-reverse;
        max-height: 370px;
        margin-bottom: 70px; /* Figma: 70px to the "ДОСТАВКА" section */
    }
}

/* Mobile (Figma "М. Доставка и оплата", 393px) */
@media (max-width: 767px) {
    .delivery__methods {
        gap: 15px;
    }
    .delivery__methods-title {
        font-weight: 600;
        font-size: 20px;
        line-height: 120%;
        text-transform: uppercase;
    }
    .delivery__ways-title {
        font-weight: 700;
        font-size: 16px;
        line-height: 150%;
    }
    .delivery__methods-list {
        gap: 8px;
    }
    .delivery__block-list {
        gap: 0;
        padding: 0;
        list-style: none;
    }
    .delivery__block-item::before {
        content: "• ";
    }
    .delivery__methods-item,
    .delivery__block-item {
        font-size: 15px;
    }
    .delivery__ways-block {
        padding: 15px;
    }
    .delivery__block-title {
        display: block;
        font-size: 15px;
        margin-bottom: 5px;
    }
}

/* Tablet: three narrow columns are unreadable below 1024px */
@media (min-width: 768px) and (max-width: 1023px) {
    .delivery__ways-wrapper {
        flex-direction: column;
        gap: 15px;
    }
}