/* ******************************************** 2000 ********************************************* */
@media screen and (min-width: 2000px) {
    .div1400 {width: min(1600px, 100% - 80px);}
    .div1320 {width: min(1520px, 100% - 80px);}
    .div960 {width: min(1160px, 100% - 80px);}


    /* ******* BANNER ******* */
    .fixed_bottom_btns {width: min(1520px, 100% - 120px);}

    /* ******* BANNER ******* */
    section.banners .banner .overlay {
        height: calc(100% - 200px);
        padding: 40px 40px 160px;
    }


    /* ******* ADVANTAGES ******* */
    section.advantages .item .image {width: 50%;}
    section.advantages .item .text {width: 50%;}

    /* ******* CALL_US ******* */
    section.call_us::after {background-position: 110% 10%;}
    section.call_us .left {align-items: center;}
    section.call_us .left > *:not(.arrow_text)  {margin-right: 15%;}
    section.call_us .phone span.recall {text-align: center;}

    /* ******* FOOTER ******* */
    section.bottom .bottom_inner {background-size: 1600px auto;}
    section.bottom .grid.col4 {
        grid-template-columns: 300px 230px 160px auto;        
        grid-gap: 40px 100px;
    }


    /* ******* LOGIN_PAGE ******* */
    body.login section.grid .login_block {padding: 100px 60px;}


}


/* ******************************************** 1360 ********************************************* */
@media screen and (max-width: 1360px) {    

    .div1400 {width: min(1400px, 100% - 40px);}

    .block_heading {font-size: 38px;}


    /* ******* HEADER ******* */
    header .div1400 {gap: 0 10px;}

    /* ******* HEADER TOP_MENU ******* */
    header .top_menu,
    header .top_menu .mobile_menu {gap: 0 5px;}

    a.delivery {padding: 11px 0 11px 15px;}
    a.delivery span.icon {width: 44px;}

    .dropdown_btn .title {padding: 11px 15px;}
    .dropdown_list .inner {padding: 10px 5px 15px;}

    /* ******* HEADER ICONS_BLOCK ******* */    
    header .icons_block>* {margin-right: 0px;}


    /* ******* BANNER ******* */
    section.banners .banner .title {font-size: 38px;}
    section.banners .banner .description {font-size: 28px;}
    section.banners .banner .btn {
        padding: 10px 30px;
        margin-bottom: 0;
    }

    /* ******* DELIVERY_BLOCK ******* */
    .cat_items .item .qtty_input .add_to_cart {--atc_padding: 7px 18px;}
    .cat_items .item .qtty_input input {
        width: 45px;
        padding: 9px 41px;
    }



    
    /* ******* ADVANTAGES ******* */
    section.advantages .left .item:nth-child(1) .image,
    section.advantages .right .item:nth-child(1) .image {border-bottom-left-radius: 120px;}
    section.advantages .left .item:nth-child(2) .image,
    section.advantages .right .item:nth-child(2) .image {border-top-right-radius: 120px;}

    section.advantages .item .title {font-size: 25px;}
    section.advantages .item .text p {font-size: 15px;}



    /* ******* CALL_US ******* */
    section.call_us .arrow_text p {font-size: 32px;}
    section.call_us .arrow_text svg {margin-bottom: 0px;}
    section.call_us .phone a,
    section.call_us .social a,
    section.call_us .btn.red_btn {font-size: 26px;}

    section.call_us::after {
        background-size: 90% auto;
        background-position: 160% 0%;
    }

    /* ******* FOOTER ******* */
    section.bottom .grid.col4 {
        grid-template-columns: 285px 190px 120px auto;        
        grid-gap: 40px;
    }


    /* ******* PRIDUCT_CARD ******* */
    section.product_card .grid {grid-gap: 30px;}


    /* ******* LOGIN_PAGE ******* */
    body.login section.grid .login_block {padding: 100px 30px;}








        
}





















/* ******************************************** 768 ********************************************* */
@media screen and (max-width: 768px) {
    
    
    body {min-width: 375px;} 
    .ms {display: flex !important;}   




    

    .block_heading {
        font-size: 18px;
        margin-bottom: 20px;
    }
    .subheading, h1 {font-size: 16px;}


    .div1400,
    .div1320,
    .div960 {width: calc(100% - 20px);}
    






    section.advantages.div1400,
    section.call_us.div1400,
    section.four_steps.div1400,
    section.bottom.div1400,
    section.bonuses.div1400,
    section.text_content.div1400 {width: 100%;}

    section.advantages .grid.col2,
    section.call_us .grid.col2,
    section.four_steps .grid.col2,
    section.bottom .grid.col4 {grid-template-columns: 100%;}

    section.div1400 {margin-bottom: 30px;}


    .arrows {
        margin-left: 10px;
        gap: 0 5px;
    }
    .arrow {
        width: 32px;
        height: 32px;
    }
    .arrow::after {        
        left: 50%; top: 50%;
        width: 40px; height: 40px;
        transform: translate(-50%, -50%) scale(0.75);
    }

    .lines_pagination span {height: 30px;}



    

    /* ******* HEADER ******* */
    header {
        padding: 10px 0;
        margin-bottom: 0;
    }
    header.fixed {margin-bottom: 0;}


    header .div1400 {
        display: grid;
        grid-template-columns: 173px auto;
        grid-gap: 4px 10px;
    }
    header a.logo {
        width: 173px;
        height: 56px;        
        background-image: url(../img/logo2.svg);       
        grid-row: span 2;
    }
    
    a.delivery {
        padding: 9px 10px 9px;
        border-radius: 0;
        font-size: 10px;
    }
    a.delivery span.icon {
        width: 16px;
        height: 8px;
        margin: 2px 0 0 4px;
        background-image: url(../img/sprite.svg);
        background-repeat: no-repeat;
        background-position: -66px -696px;     
        filter: none;   
    }

    

    header .top_menu .mobile_menu {
        position: fixed;
        right: -100%;
        top: 77px;
        width: auto;
        border-radius: 10px 0 0 0;
        height: calc(100dvh - 126px);
        padding: 10px 0 40px;
        flex-flow: column;
        background-color: var(--bgcolor2);
        box-shadow: -2px 0px 4px rgba(0,0,0,0.2);
        z-index: -1;
        overflow-y: scroll;
        transition: 230ms ease-out;
    }
    header .top_menu.openned .mobile_menu {right: 0;}

    header .dropdown_btn .title.cc {
        padding: 10px;
        font-weight: 700;
        border-radius: 0;
        justify-content: flex-start;
        box-shadow: none !important;
    }
    header .dropdown_btn .title.cc span.icon {display: none;}
    header .dropdown_btn:first-child {
        order: 2;
        margin: 20px 0 40px;
    }
  

    header .dropdown_btn:not(.select, .akkordeon) .dropdown_list {
        position: relative;
        top: auto;        
        overflow: auto;
        max-height: unset;      
        border-radius: 0;
        box-shadow: none !important;
    }
    header .dropdown_btn:not(.select, .akkordeon) .dropdown_list .inner {
        padding: 0 10px;
        display: flex;
        flex-flow: column;
        justify-content: flex-start;
    }
    header .dropdown_btn:not(.select, .akkordeon) .dropdown_list .inner a {
        width: 220px;
        font-size: 14px;
        font-weight: 500;
        text-underline-offset: 2px;
        padding: 4px 0;
    }

    .hamburger_block p {
        font-size: 10px;
        line-height: 0.9;        
        text-align: right;
        margin-right: 6px;
    }

    .hamburger_block .hamburger {
        position: relative;
        height: 28px;
        width: 28px;
        flex-shrink: 0;
        background-color: var(--maincolor);
    }
    .hamburger_block .hamburger::before,
    .hamburger_block .hamburger::after {
        position: absolute;        
        top: 7px;
        height: 14px;
        content: ' ';
        background-image: url(../img/sprite.svg);
        transition: 230ms ease-out;
    }
    .hamburger_block .hamburger::before {
        left: 5px;
        width: 18px;
        background-position: -64px -727px;
    }
    .hamburger_block .hamburger::after {
        left: 7px;
        width: 14px;
        background-position: -66px -758px;
        opacity: 0;
        transform: scale(0);
        filter: saturate(0%) invert(100%) brightness(200%);
    }
    header .top_menu.openned .hamburger::before {opacity: 0; transform: scale(0);}
    header .top_menu.openned .hamburger::after {opacity: 1; transform: scale(1);}










    header .icons_block {justify-content: space-between;}
    header .icons_block>*,
    header .icons_block .search span.icon {
        width: 26px;
        height: 26px;
        border-radius: 0;
    }
    header .icons_block>*:not(.search, .tel)::before {border-radius: 0;}
    
    header .icons_block>* span.text {display: none;}
    header .icons_block .search {order: 5;}
    header .icons_block .lk {background-position: 0px -52px;}
    header .icons_block .favorites {background-position: 0px -106px;}
    header .icons_block .basket {background-position: 0px -161px;}
    header .icons_block .tel {background-position: 0px -214px;}

    header .icons_block .lk::before {background-position: -56px -52px;}
    header .icons_block .favorites::before {background-position: -56px -106px;}
    

    header .icons_block .search span.icon {background-position: 0px 1px;}

    header .icons_block .search .inner {
        margin: 0 -2px 0 0;
        padding: 2px;
    }
    header .icons_block .search.openned .inner {
        width: auto;
        max-width: unset;   
        box-shadow: 0 0 0 1px var(--maincolor) inset;
        transition: 320ms ease-out;
    }
    header .icons_block .search span.icon {margin: 2px;}
    header .icons_block .search.openned span.icon {transform: scale(0.8);}

    header .icons_block .search.openned input {
        width: 160px;
        font-size: 12px;
        line-height: 14px;
        padding: 4px 32px 4px 8px;
        margin: 2px;
    }






    /* ******* FIXED_BOTTOM_BTNS ******* */
    .fixed_bottom_btns {
        left: 0;    
        bottom: 0;
        transform: none;
        width: calc(100% - 20px);
        padding: 7px 10px 8px;
        border-radius: 20px 20px 0 0;
        justify-content: space-between;        
        background-color: var(--bgcolor3);
        box-shadow: 0px -2px 4px rgba(0,0,0,0.12);
    }
    

    .fixed_bottom_btns .social {
        flex-shrink: 0;
        margin-right: 10px;
    }
    .fixed_bottom_btns .social a:not(:last-child) {margin-right: 10px;}
    .fixed_bottom_btns .social a span.icon {
        width: 30px;
        height: 30px;
        margin: 0 5px 0 0;
    }
    .fixed_bottom_btns .social a span.icon.wa {background-position: -52px -580px;}
    .fixed_bottom_btns .social a span.icon.tg {background-position: -52px -634px;}
    
    .fixed_bottom_btns .social a span:not(.icon) {
        font-size: 10px;
        line-height: 1.15;
        font-weight: 400;
        margin-top: -2px;
        text-decoration: underline 1px solid var(--maincolor);
    }


    .fixed_bottom_btns .basket_up_block {width: 100%;}
    .fixed_bottom_btns .up_btn {
        background: none;
        width: 0;
        height: 30px;
        flex-shrink: 0;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        padding: 0;        
        overflow: hidden;
        transition: 230ms ease-in;   
        opacity: 0;
    }

    .fixed_bottom_btns.up .up_btn {
        width: 30px;
        margin: 0 3px 0 7px;
        overflow: visible;
        animation: show_in_bottom 230ms ease-in 230ms both;
    }


    .fixed_bottom_btns .up_btn span.icon {
        width: 20px;
        height: 20px;
        order: 1;
        background-color: var(--maincolor);
        border-radius: 10px;        
    }
    .fixed_bottom_btns .up_btn span.icon::after {
        top: 4px;
        left: 5px;
        width: 10px;
        height: 12px;
        background-position: -72px -792px;
    }

    .fixed_bottom_btns .up_btn span.text {
        position: absolute;
        top: -3px; 
        max-width: unset;
        text-align: center;
        color: var(--maincolor);
        font-size: 8px;
        line-height: 1;
        font-weight: 400;
        opacity: 1;
        order: 2;
    }

    .fixed_bottom_btns .msMiniCart {width: 100%;}
    .fixed_bottom_btns .basket {
        width: 100%;
        background-color: var(--maincolor);
        padding: 2px 5px 3px;
        border-radius: 15px;
    }

    .fixed_bottom_btns .basket span.text {
        font-size: 10px;
        line-height: 1.15;
        font-weight: 700;
        color: #fff;
        text-align: right;
        margin-top: 1px;
    }
    .fixed_bottom_btns .basket span.text span.total_summ,
    .fixed_bottom_btns .basket span.text span.total_summ * {
        font-size: 9px;
        font-weight: 400;
        color: #fff;
    }
    .fixed_bottom_btns .basket.empty span.text span.total_summ {display: none;}
    

    .fixed_bottom_btns .basket span.icon {
        position: relative;
        width: 26px;
        height: 25px;
        margin-left: 2px;       
    }
    .fixed_bottom_btns .basket span.icon::before,
    .fixed_bottom_btns .basket span.icon::after {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        content: '';                
        background-image: url(../img/sprite.svg);
        filter: saturate(0%) invert(100%) brightness(200%);
    }

    .fixed_bottom_btns .basket span.icon::before {
        background-position: 0px -162px;
        opacity: 0;
    }
    .fixed_bottom_btns .basket span.icon::after {background-position: -56px -162px;}

    .fixed_bottom_btns .basket.empty span.icon::before {opacity: 1;}
    .fixed_bottom_btns .basket.empty span.icon::after {opacity: 0;}

    .fixed_bottom_btns .basket span.icon span.count {
        position: absolute;
        top: 7px;
        left: 3px;
        width: 23px;
        z-index: 2;
        font-size: 8px;
        line-height: 1;
        font-weight: 600;
        text-align: center;
        color: var(--maincolor);
    }
    .fixed_bottom_btns .basket.empty span.icon span.count {display: none;}

                
    
    
    /* ******* BANNERS ******* */
    section.banners {border-radius: 0 0 20px 20px;}
    section.banners .banner {
        height: 320px;
        padding-top: 0;
    }
    section.banners .banner .overlay {
        height: calc(70% - 40px);
        padding: 10px 10px 30px;
        border-bottom-right-radius: 350px;
    }
    section.banners .banner .title {font-size: 23px;}
    section.banners .banner .description {font-size: 18px;}
    section.banners .banner .btn {
        font-size: 14px;
        margin-bottom: 0;
        padding: 7px 23px;
        border-radius: 14px;        
    }
    section.banners .swiper_navigation {
        left: 50%;
        bottom: 5px;
        transform: translateX(-50%);
    }





    /* ******* CATALOG_BLOCK ******* */
    section.catalog_block .subheading {width: 100%;}
    .catalog_swiper .cat_items.swiper-wrapper {margin-top: 10px;}
    .cat_items .item {border-radius: 20px;}    
    .cat_items .item .add_to_favorite {right: 10px; top: 10px;}
    .cat_items .item .image .name {
        bottom: -1px;
        width: calc(100% - 20px);
        padding: 40px 10px 0;
    }
    .cat_items .item .info {padding: 10px; gap: 10px;}
    .cat_items .item .image .name a {font-size: 14px; display: inline-block;}
    .cat_items .item .price {font-size: 14px;}
    .cat_items .item .qtty_weight {font-size: 12px;}

    .cat_items .item .btns a {
        font-size: 10px;
        padding-bottom: 2px;
    }

    .cat_items .item .qtty_input .add_to_cart {
        --atc_padding: 5px 10px;
        --anim_width: 40px;
        overflow: hidden;
        background-color: var(--maincolor);
        border-radius: 12px;
        font-size: 10px;
        line-height: 12px;
    }
    .cat_items .item .qtty_input input {
        width: 21px;
        padding: 6px 28px;
        border-radius: 12px;
        font-size: 10px;
        line-height: 12px;
    }
    /* plus_minus */
    .cat_items .item .qtty_input .btn:not(.add_to_cart) {
        top: 2px;
        width: 21px;
        height: 21px;
        border-radius: 12px;
    }
    .cat_items .item .qtty_input .btn:not(.add_to_cart)::after {
        left: 50%; top: 50%;
        width: 32px; height: 32px;
        transform: translate(-50%, -50%) scale(0.75);
    }

    .bottom_btn a {
        width: 230px;
        font-size: 12px;
        line-height: 14px;
    }
            


    /* ******* SERVICES_BLOCK ******* */
    section.services_block .div1320.fnw.fs {justify-content: space-between;}

    .services_swiper.swiper  {
        margin-top: 10px;
        padding: 0 10px;
    }
    .services_items .swiper-slide {
        display: flex;
        flex-flow: column;
        justify-content: flex-start;     
        gap: 20px;
    }
    .services_items .item {width: 100%;}

    .services_items .item .image {
        width: 100;
        padding-top: 35%;
        border-bottom: 2px solid var(--maincolor);
        border-top-right-radius: 90px;
    }
    .services_items .item .text {
        padding-top: 5px;
        gap: 5px 0;
    }
    .services_items .item .title {
        font-size: 16px;
        line-height: 18px;
    }
    .services_items .item .text p {
        font-size: 14px;
        line-height: 12px;
    }

    .services_items .item .read_more {
        padding: 5px 8px 6px 12px;
        font-size: 14px;
    }

    /* ******* PORTFOLIO_BLOCK ******* */
    section.port_block {
        position: relative;
        margin-top: 60px;
    }

    section.port_block .years {
        position: absolute;
        left: 0; top: -2.5%;
        height: 102.5%;  
        margin: 0;   
    }
    .years::before {
        position: absolute;
        left: auto; 
        top: -2.5%;
        right: 4px;
        width: 1px;
        height: 105%;
    }
    section.port_block .years.fnw.sb,
    section.port_block .years .div960.fnw.sb {
        flex-flow: column;
        align-items: flex-end;
    }
    section.port_block .years .div960 {
        width: auto;
        height: 73%;
    }
    .years .div960::before {
        position: absolute;
        left: auto;
        right: 3px;
        top: 4px;
        width: 3px;
        height: calc(100% - 10px);
    }


    section.port_block .years .year {
        width: auto;
        padding: 0 15px 0 0;
        font-size: 8px;
        text-align: right;
    }
    section.port_block .years .year::before {
        left: auto;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 9px; height: 9px;
    }
    section.port_block .years .div960 .year::before {outline: 1px solid var(--maincolor);}
    section.port_block .years .div960 .year::after {
        left: auto;
        right: 2px;
        top: 50%;        
        transform: translateY(-50%);
        width: 5px; height: 5px;
    }

    section.port_block .subheading.div960,
    section.port_block .desc.div960,
    section.port_block .port_slider_block {
        width: calc(100% - 50px);
        padding-left: 50px;
    }
    
    section.port_block .subheading.div960 {margin-bottom: 10px;}
    section.port_block .desc p {
        font-size: 14px;
        line-height: 1.2;
    }
    
    .port_slider_block {margin-top: 20px;}
    .port_slider_block .port_slider {
        height: 260px;
        padding: 0 20px 10px 0;
        flex-shrink: 0;
    }
    .port_slider_block .swiper-wrapper {margin: 0;}

    .port_items .item {
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: center;
        gap: 10px;
    }
    .port_items .item .image {
        width: 120px;
        height: 100%;
        padding-top: 0;
        background-size: cover;      
        border-radius: 10px;
    }
    .port_items .item .text p {margin-top: 4px;}

    .port_slider_navigation.div960.fnw.sb {
        position: unset;
        justify-content: flex-end;
        margin-top: 10px;
    }
    .port_slider_navigation .scrollbar_wrapper {
        position: absolute;
        right: 0;
        top: 0;
        left: auto;
        height: 100%;
    }


    /* ******* ADVANTAGES ******* */
    section.advantages {margin-top: 60px;}
    section.advantages .block_heading {
        width: calc(57% - 20px);
        padding: 0 20px 10px 0;
        margin: 0;
    }    
    section.advantages .grid > * .inner {
        width: calc(100% - 20px);        
        padding: 10px;
        border-radius: 20px;
    }
    section.advantages .grid .left .inner {border-radius: 20px 0 0 0;}
    section.advantages .grid .right .inner {border-radius: 0 0 20px 20px;}
    section.advantages .grid .left .inner::after,
    section.advantages .grid .right .inner::after {display: none;}
    
    
    
    section.advantages .item {
        gap: 0 10px;
        margin-bottom: 20px;
    }

    section.advantages .item .image {padding-top: 70%;}
    
    section.advantages .item .title {
        font-size: 16px;
        margin-bottom: 6px;
    }
    section.advantages .item .text p {
        font-size: 12px;
        line-height: 1.4;
    }

    section.advantages .left .item:nth-child(1) .image {
        border: 10px solid var(--bgcolor2);
        margin: -60px -10px -10px;
        padding-top: 80%;
    }


    section.advantages .left .item:nth-child(1) .image,
    section.advantages .right .item:nth-child(1) .image {
        border-bottom-left-radius: 90px;
        order: 2;
    }
    section.advantages .left .item:nth-child(1) .text,
    section.advantages .right .item:nth-child(1) .text {
        text-align: right;
    }
    section.advantages .left .item:nth-child(2) .image,
    section.advantages .right .item:nth-child(2) .image {
        border-top-right-radius: 90px;
        order: 1;
    }
    section.advantages .left .item:nth-child(2) .text,
    section.advantages .right .item:nth-child(2) .text {
        order: 2;
        text-align: left;
    }

    section.advantages .left .item:nth-child(1) .text::after {
        position: absolute;
        top: -60px;
        right: 0;
        width: 20px;
        height: 20px;
        content: '';
        background-image: url(../img/sprite.svg);
        background-position: -62px -510px;
    }

    

    
    
    
    /* ******* CALL_US ******* */
    section.call_us {
        margin: -50px auto -20px;
        padding-top: 60px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        background-size: 23%;
    }
    section.call_us .right {
        grid-row: 1/2;
        padding: 0 10px;
    }

    section.call_us .left {
        position: unset;
        padding: 0 10px 20px;
        margin-top: 250px;
        align-items: center;      
    }

    section.call_us::after {
        background-size: 120% auto;
        background-position: 40% -3%;
    }
    
    section.call_us .arrow_text p {
        position: unset;
        font-size: 18px;
    }
    section.call_us .arrow_text svg {
        position: absolute;
        left: 40px;
        top: 80px;
        transform-origin: left top;
        transform: rotate(90deg);
    }


    section.call_us .social a,
    section.call_us .btn.red_btn {font-size: 16px;}
    
    section.call_us .phone {margin: 30px 0 20px;}
    section.call_us .phone a {font-size: 23px;}
    section.call_us .phone span.recall {font-size: 16px; text-align: center;}

    section.call_us .social a span:first-child {width: 85px;}
    section.call_us .social a span.icon {
        width: 30px;
        height: 30px;
    }
    section.call_us .social a span.icon.wa {background-position: -52px -580px;}
    section.call_us .social a span.icon.tg {background-position: -52px -634px;}

    section.call_us .btn.red_btn {
        width: fit-content;
        margin-top: 20px;
        padding: 12px 30px;
        border-radius: 20px;
        font-weight: 600;
    }






    /* ******* FOUR_STEPS ******* */
    section.four_steps {
        padding-top: 60px;
        border-bottom-left-radius: 160px;
    }
    section.four_steps .left {padding: 0 10px 60px;}


    section.four_steps .step {padding-bottom: 10px;}

    section.four_steps .step::before {
        left: 16px; top: 32px;
        height: calc(100% - 32px);
    }
    
    section.four_steps .step .digit {
        width: 30px;
        height: 30px;
        border: 2px solid var(--maincolor);
        margin-right: 10px;
        font-size: 16px;
    }

    section.four_steps .step .title {font-size: 16px;} 

    section.four_steps .step .first_step_icons {
        width: 146px;
        height: 20px;
        margin-left: 20px;
        margin-top: 7px;
    }    
    section.four_steps .step .text,
    section.four_steps .step .image {
        padding-left: 44px;
        margin: 5px 0 10px;
    }
    section.four_steps .step .text p {font-size: 12px;}

    section.four_steps .step1 .chat {
        padding: 10px;
        background-size: 25%;
        border-radius: 0 60px 0 60px;
    }
    section.four_steps .step1 .chat .message {width: calc(80% - 20px);}
    section.four_steps .step1 .chat .message:first-child {    
        padding: 10px;
        border-radius: 0 20px 20px 20px;
        margin-bottom: 10px;
    }
    section.four_steps .step1 .chat .message:last-child {
        margin-left: 20%;
        padding: 10px;
        border-radius: 20px 20px 0 20px;
    }
    section.four_steps .step1 .chat .message p {font-size: 12px;}
    section.four_steps .step1 .chat .message .time {font-size: 10px;}

    section.four_steps .step3 .fnw.fe {gap: 0 10px;}
    section.four_steps .step3 .text p {text-align: right;}
    section.four_steps .step3 a.pdf_kp {
        width: 100px;
        height: 270px;
    }

    section.four_steps .step4 .text {text-align: right;}

    section.four_steps .step4::before {height: calc(100% - 150px);}
    section.four_steps .step4::after {
        left: 16px;
        bottom: 31px;
    }
    
    section.four_steps .step4 .bottom_btn_block span.dots {    
        left: 106px;
        width: calc(100% - 180px);
    }
          
    section.four_steps .step4 .btn {
        font-size: 14px;
        padding: 10px 30px;
        border-radius: 17px;        
    }

    /*  ****** right ***** */
    section.four_steps .right {
        margin: -20px 0;
        padding: 80px 30px 40px;
        border-radius: 20px;
    }
    section.four_steps .right .heart {
        width: 147px;
        height: 130px;
        margin: -170px auto 80px;
    }
    section.four_steps .partners {padding-bottom: 210px;}

    section.four_steps .right .bonuses {
        position: sticky;
        top: 360px;
        left: 0;
        width: 100%;
        padding: 30px;
    }
    .bonuses .top_corners::before,
    .bonuses .bottom_corners::before,
    .bonuses .top_corners::after,
    .bonuses .bottom_corners::after {
        width: 20px;
        height: 20px;
        background-image: url(../img/sprite.svg);
        background-position: -62px -510px;
    }

    .bonuses .btn {
        padding: 10px 20px;
        border-radius: 19px;
        font-size: 14px;
    }
    .bonuses .btn span.icon {margin: -1px 0 0 5px;}







    /* ******* BOTTOM ******* */
    section.bottom.div1400 {margin-bottom: 47px;}
    section.bottom .grid.col4 {grid-gap: 20px;}
    section.bottom .logo.h_span2 {grid-column: 1/2;}
    section.bottom .bottom_inner {
        padding: 460px 0 60px;
        background-size: auto 100lvh;
        background-position: center bottom;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
    }
    section.bottom .bottom_inner::before {background: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.9) 70%);}

    section.bottom a.logo {width: 100%;}
    section.bottom .contacts_col p {font-size: 14px;}


    footer {padding: 10px 20px;}

    footer p {font-size: 10px;}
    footer a.f23 p {
        font-size: 8px;
        margin-right: 4px;
    }
    footer a.f23 svg {
        width: 27px;
        height: 14px;
    }




    /* ******* PRIDUCT_CARD ******* */
    section.product_card {padding-top: 0;}
    section.product_card>.grid.col2 {
        grid-template-columns: 100%;
        grid-gap: 10px 0;
    }    
    section.product_card .product_images {
        grid-area: 2/1/3/2;
        border-radius: 0 0 20px 20px;
    }
    section.product_card .product_name {grid-area: 1/1/2/2;}
    section.product_card .product_name {padding: 0px;}
    section.product_card .product_info .short_description {padding: 0 10px;}
    section.product_card .product_info {grid-area: 3/1/4/2;}    



    /* ---------- priduct_gallery  ---------- */
    .swiper.big_img,
    .swiper.only_big_img {border-radius: 0 0 20px 20px;}

    .swiper.big_img .swiper-slide,
    .swiper.only_big_img .swiper-slide {padding-top: 100%;}


    .swiper.thumbs {
        width: calc(100% - 20px);
        margin: 10px auto;
    }
    .swiper.thumbs .swiper-slide,
    .swiper.thumbs .swiper-slide::after {border-radius: 10px;}
    .swiper.thumbs .swiper-slide.swiper-slide-thumb-active::after {box-shadow: 0 0 0 2px var(--maincolor) inset;}





    /* ---------- product_info_block  ---------- */    
    section.product_card .product_info .sticky {
        position: relative;
        top: auto;
    }

    section.product_card .short_description {
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 10px;
    }

    section.product_card .product_parameters {
        padding: 10px 10px;
        border-radius: 20px;
    }

    section.product_card .product_parameters .grid {grid-gap: 10px 20px;}

    section.product_card .product_parameters span.caption,
    section.product_card .product_parameters span.value {font-size: 14px;}
    section.product_card .product_parameters .bju span.caption,
    section.product_card .product_parameters .bju span.value {font-size: 12px;}

    section.product_card .product_parameters .weight_price {margin: 0 auto 20px;}
    section.product_card .product_parameters .bju {
        width: calc(100% - 40px);    
        height: 46px;
        padding: 0 20px;
        border-radius: 23px;
        margin: 0 auto 20px;    
    }
    section.product_card .product_parameters .ingredients {margin: 0 auto 20px;}
    

    section.product_card .minicalc_block.grid {
        grid-template-columns: 40px 60px auto;
        grid-gap: 20px;        
    }
    section.product_card .minicalc_block .qtty_input {
        grid-area: 1/1/2/3;
        padding-top: 11px;
    }
    section.product_card .minicalc_block .summ {grid-area: 1/3/2/4;}
    section.product_card .minicalc_block .add_to_favorite {grid-area: 2/1/3/2;}
    section.product_card .minicalc_block button {grid-area: 2/2/3/4;}

    section.product_card .minicalc_block .qtty_input input {
        width: calc(100% - 80px);
        padding: 7px 40px;
        border-radius: 16px;
        font-size: 16px;
        line-height: 18px;
    }
    section.product_card .minicalc_block .qtty_input .btn {
        top: 11px;
        width: 32px;
        height: 32px;    
        border-radius: 16px;    
    }

    section.product_card .minicalc_block .qtty_input .btn::after {left: 9px; top: 9px;}

    section.product_card .minicalc_block .summ span.caption {font-size: 14px;}
    section.product_card .minicalc_block .summ span.value {font-size: 23px;}

    section.product_card .minicalc_block .add_to_favorite .btn {
        width: 40px;
        height: 40px;
        border-radius: 20px;
    }

    section.product_card .minicalc_block button {
        padding: 7px 12px 8px;
        border-radius: 20px;
        font-size: 16px;
        line-height: 18px;
    }


    /* ---------- text_content  ---------- */
    .text_content .text_block {margin-bottom: 20px;}
    .text_content .text_block .subheading {margin-bottom: 10px;}
    .text_content .text_block p {
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 10px;
    }
    .text_content .image_text {
        grid-template-columns: 100%;
        grid-gap: 20px;
    }

    .text_content .image_text .image {
        border-radius: 20px;
        padding-top: 100%;
    }


    .text_content.bottom_text {
        padding-bottom: 80px;
        border-radius: 0 0 20px 20px;
    }

    /* ---------- bonuses ---------- */
    section.bonuses.div1400 {
        margin: 40px auto;
        border-radius: 0;
    }
        



    /* *****************************************************
    ********************** CATALOG_PAGE **********************
    ***************************************************** */
    section.catalog .big_heading_line.fnw.sb {
        margin-bottom: 10px;
        flex-flow: column;
    }

    .side_menu_grid {
        grid-template-columns: 100%;
        grid-gap: 0;
    }
    .side_menu_grid .content_col {grid-column: 1/2;}

    .catalog_items_grid {
        margin-top: 10px;        
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-gap: 10px;
    }

    section.catalog .heading_red_line.fnw.sb {
        justify-content: flex-start;
        flex-shrink: unset;
        width: 100%;
        padding: 16px 10px 14px;
        margin: 10px -10px;
        background-size: 10%;    
        border-radius: 0 30px 30px 0;
        gap: 0 10px;
    }
    section.catalog .heading_red_line span.icon.deli_car {
        width: 35px;
        height: 18px;
        background-position: 0px -928px;
        margin: 0;
    }
    section.catalog .heading_red_line span.icon.clock {
        width: 32px;
        height: 22px;
        background-position: -50px -926px;
        margin: 0;
    }

    section.catalog .heading_red_line span.text {
        font-size: 12px;
        line-height: 11px;
        margin-left: 6px;
    }




    section.catalog .heading_line.fnw.sb {align-items: center;}

    section.catalog .sorter>.text,
    section.catalog .cat_filter_btn>.text {
        font-size: 10px;
        font-weight: 300;
        padding: 8px 6px;
    }    
    section.catalog .sorter .dropdown_btn.select,
    section.catalog .cat_filter_btn span.icon {
        position: relative;
        width: 26px;
        height: 26px;
        background-color: var(--bgcolor2);
        background-image: none;
        margin: 0;
        border-radius: 6px;
    }
    section.catalog .sorter .dropdown_btn.select::after,
    section.catalog .cat_filter_btn span.icon::before,
    section.catalog .cat_filter_btn span.icon::after {
        position: absolute;
        top: 6px;
        left: 5px;
        width: 16px;
        height: 14px;
        content: '';
        background-image: url(../img/sprite.svg);
        transition: 230ms ease-out;    
    }
    section.catalog .sorter .dropdown_btn.select::after {background-position: -34px -1032px;}
    section.catalog .cat_filter_btn span.icon::before {background-position: -66px -1032px;}
    section.catalog .cat_filter_btn span.icon::after {
        background-position: -66px -758px;
        opacity: 0;
        transform: scale(0);
    }
    section.catalog .cat_filter_btn.openned span.icon::before {
        opacity: 0;
        transform: scale(0);
    }
    section.catalog .cat_filter_btn.openned span.icon::after {
        opacity: 1;
        transform: scale(0.75);
    }

    section.catalog .sorter .dropdown_btn.select .dropdown_list {
        width: 170px;
        top: 32px;
        right: 0;
        left: auto;
        border-radius: 10px;
    }
    section.catalog .sorter .dropdown_btn.select .dropdown_list .inner > * {font-size: 12px;}

    section.catalog .sorter .dropdown_btn.select.openned .dropdown_list {
        max-height: 120px;        
        box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
    }


    .side_menu_grid .side_menu_col {
        position: fixed;
        left: -100%;
        top: 90px;
        width: auto;
        height: auto;
        max-height: calc(100dvh - 160px);
        padding: 0 0 10px;
        background-color: var(--bgcolor2);
        box-shadow: 2px 0px 4px rgba(0,0,0,0.2);
        border-radius: 10px;
        z-index: 10;
        overflow-y: scroll;
        transition: 320ms ease-out;
    }
    .side_menu_grid .side_menu_col.openned {left: 10px;}

    .side_menu_grid .side_menu_col .side_menu {
        position: relative;
        top: 0;
        background: none;
        padding: 0 10px;
        border-radius: 0;
    }

    .side_menu_grid .filter_group {margin: 0;}    
    .side_menu_grid .filter_group .akkordeon .title {padding: 8px 0;}
    .side_menu_grid .filter_group .akkordeon .title span.text {font-size: 16px;}
    .side_menu_grid .filter_group .dropdown_btn.akkordeon .title span.icon {
        margin: 0px 6px -3px 10px; transform: scale(1.4);
    }
    .side_menu_grid .filter_group .dropdown_btn.akkordeon.openned .title span.icon {
        transform: scale(1.4) rotate(180deg);
    }

    .side_menu_grid .dropdown_btn:not(.select) .dropdown_list {border-bottom: 0;}
    .side_menu_grid .dropdown_btn:not(.select) .dropdown_list .inner {padding: 0;}
    .side_menu_grid .dropdown_btn:not(.select) .dropdown_list .inner > * {
        width: 100%;
        padding: 4px 0;
    }
    .side_menu_grid .dropdown_btn:not(.select) .dropdown_list .inner .filter_reset {
        width: fit-content;
        font-size: 12px;
        padding: 4px;
    }
    .side_menu_grid .filter_group .filter_item .caption {font-size: 14px;}
















    #mse2_mfilter button.btn_more {
        padding: 8px 40px;
        font-size: 16px;
        line-height: 18px;
        border-radius: 17px;
    }












    /* *****************************************************
    ********************** CART_PAGE **********************
    ***************************************************** */
    body.cart_page .fixed_bottom_btns,
    body.ordering .fixed_bottom_btns {display: none;}
    section.div1400.cart_section {margin-bottom: 60px;}
    section.div1400.pagetitle {margin-bottom: 20px;}

    .cart_list_grid,
    .ordering_grid,
    .order_list  {
        width: calc(100% - 20px);
        padding: 0 10px;
        grid-template-columns: 100%;
        grid-gap: 0;
        margin: 10px 0;
        z-index: 3;
        background: var(--bgcolor);
    }
    .ordering_grid {margin: 0 0 -1px;}
    .order_list  {margin: 0 0 -12px;}


    .cart_list_grid .left .item {
        margin-bottom: 10px;
        border-radius: 10px;
    }

    .cart_list_grid .left .item .image {
        width: 110px;        
        border-radius: 10px;
    }


    .cart_list_grid .left .item .text {padding: 10px;}
    .cart_list_grid .left .item .title {
        font-size: 13px;
        line-height: 1.1;
    }

    .cart_list_grid .left .item .options {margin: 10px 0;}
    .cart_list_grid .left .item .caption,
    .cart_list_grid .left .item .value,
    .cart_list_grid .left .item .unit {font-size: 11px;}

    .cart_list_grid .left .options *:not(.price) .caption {display: none;}

    .order_list .options.fnw.fe {
        display: flex;
        flex-flow: column;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .order_list .options.fnw.fe>*{margin-left: 0 !important;}


    .cart_list_grid .left .item .cost {
        display: flex;
        flex-flow: column;
        justify-content: flex-end;
        align-items: flex-end;
    }
    .cart_list_grid .left .item .cost .value,
    .cart_list_grid .left .item .cost .unit {font-size: 18px;}

    .cart_list_grid .item .item_qtty {margin-left: 10px;}
    .cart_list_grid .item .qtty_input input {
        width: 25px;
        padding: 4px 25px;    
        border-radius: 16px;
        font-size: 12px;
        line-height: 14px;    
    }
    .cart_list_grid .item .qtty_input .btn {             
        width: 22px;
        height: 22px;    
        border-radius: 11px;    
    }
    .cart_list_grid .item .qtty_input .btn::after {
        left: 4px;
        top: 4px;
        transform: scale(0.75);
    }

    .btn_remove_all {
        width: 110px;
        padding: 5px;
    }
    .btn_remove_item {padding: 5px 5px 4px 4px;}
    .btn_remove_item span {margin: 0;}
    



    .cart_list_grid .right,
    .ordering_grid>.right {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        z-index: 11;
    }
    .cart_list_grid .right .inner,
    .ordering_grid>.right .inner {
        position: relative;
        top: 0;
        padding: 10px 0;
        width: 100%;
        box-shadow: 0 -2px 4px rgba(0,0,0,0.2);
        border-radius:  10px 10px 0 0;
    }

    .cart_list_grid .right .total_cost,
    .ordering_grid .right .total_cost {
        font-size: 18px;
        line-height: 1.2;
        margin-bottom: 5px;
        flex-flow: row;
        justify-content: center;
        padding: 0 10px;
    }

    .tot_c_w {
        flex-flow: row;
        margin-bottom: 5px;
        padding: 0 10px;
    }
    .cart_list_grid .right .total_count,
    .cart_list_grid .right .total_weight {
        display: inline-block;
        font-size: 14px;     
        margin-bottom: 0;   
    }
    .cart_list_grid .right .total_count {margin-right: 10px;}

    .cart_list_grid .right .order_btn,
    .ordering_grid .right .red_btn {
        padding: 7px 30px;
        border-radius: 16px;
        margin-top: 10px;
        font-size: 16px;
        line-height: 18px;
    }

    .person_calc {
        margin: 0;
        padding: 0;
        background-size: 17%;
        max-height: 23px;
    }
    .person_calc.openned {
        padding: 5px 0;
        max-height: 150px;
    }

    .person_calc .heading_line {margin-bottom: 5px;}
    .person_calc .heading_line p {font-size: 14px;}

    .print_links a {
        font-size: 16px;        
        margin: 5px auto;        
    }




    .person_calc .close {
        width: 22px;
        height: 22px;
    } 
    .person_calc .close span {
        width: 10px;
        height: 10px;
        margin: 6px;
        background-position: -28px -1011px;
    }


    .pers_qtty, 
    .pers_weight, 
    .pers_price {margin-bottom: 5px;}

    .pers_qtty .caption, 
    .pers_weight .caption, 
    .pers_price .caption {font-size: 12px;}

    .pers_weight .value, 
    .pers_price .value {
        font-size: 12px;
        text-indent: 12px;
    }

    .pers_qtty .qtty_input {width: 75px;} 



    /* --- ordering --- */
    section.ordering_grid .left.grid.col2 {
        grid-template-columns: 100%;
        grid-gap: 20px;
    }

    section.ordering_grid .left.grid.col2 .h_span2 {grid-column: 1/2;}
    body.ordering #msOrder {margin-top: 0;}

    .field_frame {
        padding: 10px;
        border-radius: 10px;
        margin-bottom: 10px;
    }
    .field_frame:last-child {margin-bottom: 0;}

    .field_frame h4,
    .field_frame.addresses .user_adress>p strong, 
    .field_frame.addresses .user_adress_add_form>p strong, 
    .field_frame.other_receiver .dropdown_btn.akkordeon .title {
        font-size: 16px;
        margin: 0 0 10px;
    }

    .field_frame.dely_date_time .form_fields_wrapper {gap: 5px 10px;}

    .field_frame.other_receiver {padding: 0 10px;}
    .field_frame.other_receiver .dropdown_btn.akkordeon .title {
        padding: 10px 0;
        margin: 0;
    }

    .ordering_grid .form_field {
        grid-template-columns: 70px auto;
        grid-gap: 2px 10px;
    }
    .ordering_grid .form_field p {text-indent: 0;}
    .ordering_grid .form_field p.caption {
        font-size: 14px;
        margin-bottom: 3px;
    }
    .ordering_grid .form_field p.desc {grid-column: 1/3;}

    .ordering_grid .field_frame.comment textarea {height: 80px;}









    /* *****************************************************
    ********************** LOGIN_PAGE **********************
    ***************************************************** */
    body.login section.grid {grid-template-columns: 100%;}
    body.login section.grid .login_block {padding: 40px 10px;}
    body.login .login_block .close {top: 0; right: 0;}

    body.login .login_block a.logo {
        width: 252px;
        height: 82px;
    }

    body.login .login_forms .dropdown_btn.akkordeon h4.title {
        font-size: 20px;
        margin-bottom: 10px;
        padding: 6px 0;
    }
    body.login .dropdown_btn.akkordeon h4.title::after {height: 1px;}

    body.login .office-auth-login-wrapper,
    body.login .office-auth-register-wrapper {margin: 30px 0 0;}

    body.login .form_field {
        grid-gap: 5px;
        margin-bottom: 10px;
    }
    body.login .form_field p {font-size: 14px;}
    body.login .form_field p.desc {
        font-size: 11px;
        padding: 0;
    }

    body.login .form_field button {
        grid-area: 1/1/2/3;        
        font-size: 14px;
        line-height: 16px;
        padding: 7px 50px;
    }
    body.login .office-auth-register-wrapper .inner>p {font-size: 14px;}


    /* *****************************************************
    ********************** USER_PAGES **********************
    ***************************************************** */
    section.div1400.user_pages_grid {
        width: calc(100% - 20px);
        padding: 0 10px;
        grid-template-columns: 100%;
        grid-gap: 20px;  
        margin-bottom: -1px;      
    }


    section.user_pages_grid .left {grid-row: 2/3;}
    section.user_pages_grid .left .inner {
        position: relative;
        top: 0;        
        padding: 10px 10px 20px;
        align-items: center;
    }

    section.user_pages_grid .left .inner a {
        font-size: 16px;
        margin-bottom: 20px;
    }
    section.user_pages_grid .left .inner a:last-child {margin-bottom: 0;}

    section.user_pages_grid .left .inner button {
        width: fit-content;    
        margin-bottom: 20px;
        font-size: 14px;
    }

    .user_profile_grid {
        grid-template-columns: 91px auto;
        grid-gap: 20px 10px;    
    }

    .user_profile_grid .heart {
        width: 91px;
        height: 80px;
    }

    .user_profile_grid .user_info {margin-left: -75px;}
    .user_profile_grid p {
        font-size: 14px;
        margin-bottom: 15px;
    }
    .user_profile_grid .user_info p strong {
        width: 123px;
        margin-right: 5px;
    }

    .user_adress>p {margin: 0 0 10px;}
    .user_adress_add_form>p {margin: 10px 0;}

    .user_adress_item .left span.text {font-size: 14px;}

    body.edit_profile .user_adress_item,
    body.ordering .user_adress_item {
        width: calc(100% - 20px);
        padding: 5px 10px;
    }



    /* --- edit_profile --- */
    .edit_user_grid {
        grid-template-columns: 100%;
        grid-gap: 20px;
    }
  
    .edit_user_grid .form_field {
        display: flex;
        flex-flow: column;
        justify-content: flex-start;
        align-items: flex-start;
        margin-bottom: 10px;
        gap: 0;
    }

    .edit_user_grid .form_field p.caption {
        font-size: 14px;
        padding-left: 10px;
        margin-bottom: 3px;
    }

    .edit_user_grid .form_field p.desc,
    .ordering_grid .form_field p.desc,
    .edit_user_grid .form_field p.help-block {
        font-size: 10px; 
        width: calc(100% - 20px);
        padding: 0 10px;        
        text-align: right;
        margin-top: 1px;
    }


    .edit_user_grid .user_adress {margin: 30px 0 40px;}

    .user_adress .add_adress {
        font-size: 14px;
        line-height: 16px;
        padding: 6px 20px;
        border-radius: 14px;        
    }
    .user_adress .add_adress span.icon {
        transform: rotate(45deg) scale(0.75);
        margin-right: 5px;        
    }

    .user_adress_add_form .form_buttons {margin: 10px 0 20px;}
    .user_adress_add_form .form_buttons button {
        font-size: 14px;
        line-height: 16px;
        padding: 6px 20px;
        border-radius: 14px;
    }































    .mh {display: none !important;}
}