/* ==========================================================================
   ROBOTO FLEX — IOS SAFARI FIX
   ========================================================================== */

@font-face {
    font-family:"Roboto Flex Custom";

    src:
        url("/local/fonts/RobotoFlex-CompressedItalic-VF.ttf") format("truetype-variations"),
        url("/local/fonts/RobotoFlex-CompressedItalic-VF.ttf") format("truetype");

    font-weight:100 1000;
    font-style:italic;
    font-display:swap;
}


/* ==========================================================================
   DELIVERY & PAYMENT
   ========================================================================== */

.delivery-payment,
.delivery-payment *, 
.delivery-payment *::before,
.delivery-payment *::after{
    box-sizing:border-box;
}


/* ==========================================================================
   PAGE
   ========================================================================== */

.delivery-payment{
    width:100%;

    padding:72px 90px;

    background:#FFFFFF;
}


/* ==========================================================================
   INNER

   1920 - 90 - 90 = 1740
   ========================================================================== */

.delivery-payment__inner{
    width:100%;
    max-width:1740px;

    margin:0 auto;

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    gap:48px;
}


/* ==========================================================================
   PAGE TITLE
   ========================================================================== */

.delivery-payment__title{
    width:100%;
    height:50px;

    margin:0;
    padding:0;

    font-family:"Roboto Flex Custom",sans-serif;
    font-style:italic;
    font-weight:700;

    font-size:56px;
    line-height:50px;
    letter-spacing:-.6px;

    color:#171717;
    font-variation-settings:"wght" 700;
    -webkit-font-smoothing:antialiased;
    text-rendering:geometricPrecision;

}


/* ==========================================================================
   SECTION
   ========================================================================== */

.delivery-payment__section{
    width:100%;

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    gap:32px;
}


/* ==========================================================================
   SECTION TITLE
   ========================================================================== */

.delivery-payment__section-title{
    width:100%;

    margin:0;
    padding:0;

    font-family:Inter,sans-serif;
    font-style:normal;
    font-weight:700;

    font-size:32px;
    line-height:38px;
    letter-spacing:-1px;

    color:#171717;
}


/* ==========================================================================
   DELIVERY CARDS
   ========================================================================== */

.delivery-payment__cards{
    width:100%;
    height:262px;

    display:grid;

    grid-template-columns:repeat(3, minmax(0, 1fr));

    gap:8px;
}


/* ==========================================================================
   DELIVERY CARD
   ========================================================================== */

.delivery-payment__card{
    min-width:0;
    height:262px;

    display:flex;
    flex-direction:column;

    align-items:center;

    padding:24px;

    gap:16px;

    border:1px solid rgba(82,82,82,.16);

    background:#FFFFFF;
}


/* ==========================================================================
   CARD ICON
   ========================================================================== */

.delivery-payment__card-icon{
    width:48px;
    height:48px;

    flex:0 0 48px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:12px;

    background:#F5F5F5;

    border-radius:999px;
}


.delivery-payment__card-icon svg{
    display:block;

    width:24px;
    height:24px;
}


/* ==========================================================================
   CDEK
   ========================================================================== */

.delivery-payment__card-icon--cdek{
    padding:0;
}



/* ==========================================================================
   CARD CONTENT
   ========================================================================== */

.delivery-payment__card-content{
    width:100%;

    min-width:0;

    display:flex;
    flex-direction:column;

    align-items:center;

    gap:16px;
}


/* ==========================================================================
   CARD TITLE
   ========================================================================== */

.delivery-payment__card-title{
    width:100%;

    margin:0;
    padding:0;

    font-family:Inter,sans-serif;
    font-style:normal;
    font-weight:600;

    font-size:18px;
    line-height:24px;
    letter-spacing:-.4px;

    text-align:center;

    color:#171717;
}


/* ==========================================================================
   CARD TEXT
   ========================================================================== */

.delivery-payment__card-text{
    width:100%;

    margin:0;
    padding:0;

    font-family:Inter,sans-serif;
    font-style:normal;
    font-weight:400;

    font-size:16px;
    line-height:22px;
    letter-spacing:-.4px;

    color:#737373;
}


/* ==========================================================================
   PAYMENT

   Figma:
   title = 38
   gap = 32
   content = 128

   total = 198
   ========================================================================== */

.delivery-payment__payment{
    min-height:198px;
}


/* ==========================================================================
   PAYMENT CONTENT
   ========================================================================== */

.delivery-payment__payment-content{
    width:100%;

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    gap:16px;
}


/* ==========================================================================
   PAYMENT LEAD
   ========================================================================== */

.delivery-payment__payment-lead{
    width:100%;

    margin:0;
    padding:0;

    font-family:Inter,sans-serif;
    font-style:normal;
    font-weight:600;

    font-size:18px;
    line-height:24px;
    letter-spacing:-.4px;

    color:#171717;
}


/* ==========================================================================
   PAYMENT LIST
   ========================================================================== */

.delivery-payment__payment-list{
    width:100%;

    margin:0;

    padding-left:21px;

    font-family:Inter,sans-serif;
    font-style:normal;
    font-weight:400;

    font-size:16px;
    line-height:22px;
    letter-spacing:-.4px;

    color:#737373;
}


.delivery-payment__payment-list li{
    margin:0;
    padding:0;
}


/* ==========================================================================
   CONTACT MAP

   Сам contact-map уже имеет собственный desktop CSS.

   На этой странице он является частью общего контейнера 1740px,
   поэтому убираем только ЕГО внешние page-padding.
   ========================================================================== */

.delivery-payment__contact-map{
    width:100%;
}


/*
 * В contact-map.css у компонента есть:
 *
 * padding:72px 90px;
 *
 * Здесь он нам не нужен, потому что 90px уже заданы
 * самой страницей delivery-payment.
 */

.delivery-payment__contact-map .contact-map{
    width:100%;
    height:auto;

    padding:0;

    background:#FFFFFF;
}

/*
 * Родитель уже ограничен 1740px.
 */

.delivery-payment__contact-map .contact-map__inner{
    width:100%;
    max-width:none;

    margin:0;
}
.delivery-payment__card-icon--cdek{
    padding:0;
    overflow:visible;
}

.delivery-payment__cdek-logo{
    width:43px;
    height:24px;

    display:flex;
    align-items:center;
    justify-content:center;
}

.delivery-payment__cdek-logo svg{
    display:block;

    width:43px;
    height:24px;


    transform-origin:center;
}
/* ==========================================================================
   DELIVERY & PAYMENT — 1440
   ========================================================================== */

@media (min-width:992px) and (max-width:1599px){

    /* ======================================================================
       PAGE
       ====================================================================== */

    .delivery-payment{
        width:100%;

        padding:72px 90px;
    }


    .delivery-payment__inner{
        width:100%;
        max-width:none;

        margin:0;

        gap:48px;
    }


    /* ======================================================================
       PAGE TITLE
       ====================================================================== */

    .delivery-payment__title{
        width:100%;
        height:50px;

        font-size:56px;
        line-height:50px;
        letter-spacing:-.6px;
    }


    /* ======================================================================
       SECTION
       ====================================================================== */

    .delivery-payment__section{
        width:100%;

        gap:32px;
    }


    .delivery-payment__section-title{
        width:100%;

        font-size:32px;
        line-height:38px;
        letter-spacing:-1px;
    }


    /* ======================================================================
       DELIVERY CARDS
       ====================================================================== */

    .delivery-payment__cards{
        width:100%;
        height:328px;

        grid-template-columns:repeat(3,minmax(0,1fr));

        gap:8px;
    }


    .delivery-payment__card{
        width:100%;
        height:328px;

        padding:24px;

        gap:16px;
    }


    /* ======================================================================
       ICON
       ====================================================================== */

    .delivery-payment__card-icon{
        width:48px;
        height:48px;

        flex:0 0 48px;
    }


    /* ======================================================================
       CONTENT
       ====================================================================== */

    .delivery-payment__card-content{
        width:100%;

        gap:16px;
    }


    .delivery-payment__card-title{
        font-size:18px;
        line-height:24px;
        letter-spacing:-.4px;
    }


    .delivery-payment__card-text{
        font-size:16px;
        line-height:22px;
        letter-spacing:-.4px;
    }


    /* ======================================================================
       PAYMENT
       ====================================================================== */

    .delivery-payment__payment{
        min-height:198px;
    }


    .delivery-payment__payment-content{
        width:100%;

        gap:16px;
    }


    .delivery-payment__payment-lead{
        font-size:18px;
        line-height:24px;
        letter-spacing:-.4px;
    }


    .delivery-payment__payment-list{
        font-size:16px;
        line-height:22px;
        letter-spacing:-.4px;
    }

}


/* ==========================================================================
   DELIVERY & PAYMENT — TABLET 768
   ========================================================================== */

@media (min-width:480px) and (max-width:991px){

    /* ======================================================================
       PAGE

       Figma:
       768px
       padding 32 / 16
       content 736px
       gap 32px
       ====================================================================== */

    .delivery-payment{
        width:100%;

        padding:32px 16px;
    }


    .delivery-payment__inner{
        width:100%;
        max-width:none;

        margin:0;

        gap:32px;
    }


    /* ======================================================================
       PAGE TITLE
       ====================================================================== */

    .delivery-payment__title{
        width:100%;
        height:48px;

        display:flex;
        align-items:center;

        font-size:40px;
        line-height:38px;
        letter-spacing:-1.2px;
    }


    /* ======================================================================
       SECTION
       ====================================================================== */

    .delivery-payment__section{
        width:100%;

        gap:32px;
    }


    .delivery-payment__section-title{
        width:100%;

        font-size:28px;
        line-height:34px;
        letter-spacing:-.8px;
    }


    /* ======================================================================
       DELIVERY CARDS

       На 768 уже идут вертикально.
       ====================================================================== */

    .delivery-payment__cards{
        width:100%;
        height:auto;

        display:flex;
        flex-direction:column;
        align-items:stretch;

        gap:8px;
    }


    /* ======================================================================
       CARD
       ====================================================================== */

    .delivery-payment__card{
        width:100%;

        flex:none;

        padding:24px;

        gap:16px;
    }


    /*
     * Самовывоз
     */

    .delivery-payment__card:nth-child(1){
        height:236px;
    }


    /*
     * Москва и МО
     */

    .delivery-payment__card:nth-child(2){
        height:170px;
    }


    /*
     * CDEK
     */

    .delivery-payment__card:nth-child(3){
        height:236px;
    }


    /* ======================================================================
       ICON
       ====================================================================== */

    .delivery-payment__card-icon{
        width:48px;
        height:48px;

        flex:0 0 48px;
    }


    /* ======================================================================
       CARD CONTENT
       ====================================================================== */

    .delivery-payment__card-content{
        width:100%;

        gap:16px;
    }


    .delivery-payment__card-title{
        width:100%;

        font-size:16px;
        line-height:20px;
        letter-spacing:-.4px;
    }


    .delivery-payment__card-text{
        width:100%;

        font-size:16px;
        line-height:22px;
        letter-spacing:-.4px;
    }


    /* ======================================================================
       PAYMENT
       ====================================================================== */

.delivery-payment__payment{
    width:100%;
    min-height:0;
    height:auto;
}

    .delivery-payment__payment-content{
        width:100%;

        gap:16px;
    }


    .delivery-payment__payment-lead{
        width:100%;

        font-size:16px;
        line-height:20px;
        letter-spacing:-.4px;
    }


    .delivery-payment__payment-list{
        width:100%;

        margin:0;

        padding-left:20px;

        font-size:16px;
        line-height:22px;
        letter-spacing:-.4px;
    }

}


/* ==========================================================================
   DELIVERY & PAYMENT — MOBILE 393
   ========================================================================== */

@media (max-width:479px){

    /* ======================================================================
       PAGE

       Figma:
       393px
       padding 32px 16px
       content 361px
       ====================================================================== */

    .delivery-payment{
        width:100%;

        padding:32px 16px;
    }


    .delivery-payment__inner{
        width:100%;
        max-width:none;

        margin:0;

        gap:32px;
    }


    /* ======================================================================
       PAGE TITLE
       ====================================================================== */

    .delivery-payment__title{
        width:100%;
        height:38px;

        display:block;

        font-size:40px;
        line-height:38px;
        letter-spacing:-1.2px;

        white-space:nowrap;
    }


    /* ======================================================================
       SECTION
       ====================================================================== */

    .delivery-payment__section{
        width:100%;

        gap:32px;
    }


    .delivery-payment__section-title{
        width:100%;

        font-size:28px;
        line-height:34px;
        letter-spacing:-.8px;
    }


    /* ======================================================================
       DELIVERY CARDS
       ====================================================================== */

    .delivery-payment__cards{
        width:100%;
        height:auto;

        display:flex;
        flex-direction:column;
        align-items:stretch;

        gap:8px;
    }


    /* ======================================================================
       CARD
       ====================================================================== */

.delivery-payment__card{
    width:100%;
    height:auto;
    min-height:0;

    flex:none;

    padding:24px;

    gap:16px;
}

    /*
     * Самовывоз
     */


    /* ======================================================================
       ICON
       ====================================================================== */

    .delivery-payment__card-icon{
        width:48px;
        height:48px;

        flex:0 0 48px;
    }


    /* ======================================================================
       CARD CONTENT
       ====================================================================== */

    .delivery-payment__card-content{
        width:100%;

        gap:16px;
    }


    .delivery-payment__card-title{
        width:100%;

        font-size:16px;
        line-height:20px;
        letter-spacing:-.4px;

        text-align:center;
    }


    .delivery-payment__card-text{
        width:100%;

        font-size:16px;
        line-height:22px;
        letter-spacing:-.4px;
    }


    /* ======================================================================
       PAYMENT
       ====================================================================== */

    .delivery-payment__payment{
.delivery-payment__payment{
    width:100%;
    min-height:0;
    height:auto;
}

    .delivery-payment__payment-content{
        width:100%;

        gap:16px;
    }


    .delivery-payment__payment-lead{
        width:100%;

        font-size:16px;
        line-height:20px;
        letter-spacing:-.4px;
    }


    .delivery-payment__payment-list{
        width:100%;

        margin:0;

        padding-left:20px;

        font-size:16px;
        line-height:22px;
        letter-spacing:-.4px;
    }

}