@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --bgcolor: #FFFAED;
    --bgcolor2: #F6EEE3;
    --bgcolor3: #ECDFCE;
    --maincolor: #981E32;
    --seccolor: #A9616D;
    --textcolor: #2C2927;
}

* {
	margin: 0px;
	padding: 0px;
	font-family: "Montserrat", sans-serif;
    color: var(--textcolor);
}

img {border: none;}
a {
	outline: none;
	text-decoration: none;
}

input, btn, textarea {
    border: none;
    outline: none;
}
/* скрыть стрелочки в input */
input[type="number"] {-moz-appearance: textfield;}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}


body {
    width: 100%;
    min-width: 1200px;
    height: 100%;
    background-color: var(--bgcolor);
}



.div1400,
.div1320,
.div960 {
    position: relative;
    margin: auto;
}
.div1400 {width: min(1400px, 100% - 80px);}
.div1320 {width: min(1320px, 100% - 80px);}
.div960 {width: min(960px, 100% - 80px);}


.nobr {white-space: nowrap;}

/* ---------- FONT-WEIGHT ---------- */
.fw1 {font-weight: 100;}
.fw2 {font-weight: 200;}
.fw3 {font-weight: 300;}
.fw4 {font-weight: 400;}
.fw5 {font-weight: 500;}
.fw6 {font-weight: 600;}
.fw7 {font-weight: 700;}
.fw8 {font-weight: 800;}
.fw9 {font-weight: 900;}
.it {font-style: italic;}
.tdu {text-decoration: underline;}

/* ---------- FLEX ---------- */
.fnw, .fw {
    display: flex;
    align-items: center;
}

.fnw {flex-flow: row nowrap;}
.fw {flex-flow: row wrap;}

.fs {justify-content: flex-start;}
.fe {justify-content: flex-end;}
.sb {justify-content: space-between;}
.cc {justify-content: center;}

/* ---------- GRID ---------- */
.grid {display: grid;}
.grid.col2 {grid-template-columns: repeat(2, minmax(0, 1fr));}
.grid.col3 {grid-template-columns: repeat(3, minmax(0, 1fr));}
.grid.col4 {grid-template-columns: repeat(4, minmax(0, 1fr));}

.grid>.h_span2 {grid-column: span 2;}
.grid>.h_span3 {grid-column: span 3;}
.grid>.h_span4 {grid-column: span 4;}
.grid>.v_span2 {grid-row: span 2;}
.grid>.v_span3 {grid-row: span 3;}
.grid>.v_span4 {grid-row: span 4;}





.block_heading {
    font-size: 42px;
    line-height: 1;
    font-weight: 900;
    color: var(--textcolor);
    margin-bottom: 40px;
}

.block_heading a {
    text-decoration: underline 4px solid var(--maincolor);
    text-underline-offset: 3px;
    transition: 230ms ease-in;
}
@media screen and (min-width: 768px) {
    .block_heading a:hover {color: var(--maincolor);}
}

.subheading {
    font-size: 32px;
    line-height: 1;
    font-weight: 700;
    color: var(--maincolor);
}



h1 {
    font-size: 32px;
    line-height: 1;
    font-weight: 700;
    color: var(--maincolor);    
}





/* ---------- LIST ---------- */
li {
    position: relative;
    line-height: 1.35;
    display: block;
    margin-bottom: 15px;
}
li:last-child {margin-bottom: 0;}

ul.xlist li,
ul.vlist li,
ul.olist li {padding-left: 23px;}
ul.llist li {padding-left: 12px;}
ul.xlist li::before,
ul.vlist li::before,
ul.olist li::before {
    position: absolute;
    left: 0;
    top: 4px;
    width: 17px;
    height: 17px;
    content: '';
    background-image: url(../img/sprite.svg);
    background-repeat: no-repeat;
}
ul.llist li::before {
    position: absolute;
    left: 0;
    top: 0px;
    width: 3px;
    height: 100%;
    border-radius: 2px;
    content: '';
    background-color: var(--darkblue);
}
ul.llist li:nth-child(even)::before {background-color: var(--lightblue);}

ul.xlist li::before {background-position: 5px 1px;}
ul.vlist li::before {background-position: 2px -54px;}
ul.olist li::before {background-position: 4px -106px;}
ul.dlist li span:first-child {
    color: #668FB0;
    margin-right: 10px;
    font-weight: 800;
}







/* ---------- btnS ---------- */
.btn {
    position: relative;
    display: flex;
    box-shadow: 0 0 0 2px transparent inset;
    overflow: hidden;
    font-size: 18px;
    line-height: 1;
    font-weight: 500;
    cursor: pointer;
    transition: 320ms ease;
    user-select: none;
}

.btn.red_btn {
    background-color: var(--maincolor);
    color: #fff;
}
.btn.white_btn {
    background-color: #fff;
    color: var(--maincolor);
}

.btn.shine::before {
    position: absolute;
    top: 0;
    left: -100%;
    height: 100%;
    width: 60px;
    background-color: rgba(255,255,255,0.5);
    content: '';
    transform: skew(-45deg);
    filter: blur(7px);
    animation: shine 4000ms ease-out infinite;
}

@media screen and (min-width: 768px) {
    .btn.shine:hover::before {animation: none;}

    .btn.red_btn:hover,
    form button:hover,
    #mse2_mfilter button.btn_more:hover {
        background-color: #fff;
        color: var(--maincolor);
        box-shadow: 0 0 0 2px var(--maincolor) inset;
    }
    .btn.red_btn:active:hover {background-color: rgba(152, 30, 50, 0.7);}
    .btn.white_btn:hover {
        background-color: transparent;
        color: #fff;
        box-shadow: 0 0 0 2px #fff inset;
    }
    .btn.white_btn:active:hover {background-color: rgba(255, 255, 255, 0.7);}
}


/* ---------- ICONS ---------- */
span.icon {
    display: inline-block;
    flex-shrink: 0;
    background-image: url(../img/sprite.svg);
    background-repeat: no-repeat;
    margin-left: 5px;
    transition: 320ms ease-out;
}
.red_btn span.icon {filter: saturate(0%) invert(100%) brightness(200%);}

span.icon.open {
    width: 13px;
    height: 13px;
    background-position: 0px -313px;
}
span.icon.arrl,
span.icon.arrr {
    width: 12px;
    height: 20px;
    background-position: -70px -359px;
}
span.icon.arrr {transform: rotate(180deg);}

span.icon.cam {
    width: 18px;
    height: 14px;
    background-position: -64px -312px;
}

span.icon.gift {
    width: 16px;
    height: 16px;
    background-position: -33px -464px;
}


span.icon.wa {
    width: 44px;
    height: 44px;
    background-position: 0px -580px;
}
span.icon.tg {
    width: 44px;
    height: 44px;
    background-position: 0px -634px;
}

span.icon.crumb {
    width: 16px;
    height: 16px;
    background-position: -37px -792px;
    margin: 0 6px -3px 0;
}


span.icon.add_to_cart {
    width: 26px;
    height: 25px;
    background-position: 0px -831px;
    margin-left: 10px;
}

span.icon.heart {
    width: 26px;
    height: 24px;
    background-position: 0px -412px; 
    margin: 0;   
}

span.icon.checkbox {
    width: 19px;
    height: 19px;
    background-position: 0px -1027px; 
    margin: 0;   
}
.checked span.icon.checkbox {background-position: 0px -1002px; }



span.icon.remove_item {
    width: 14px;
    height: 13px;
    background-position: -68px -838px;     
}

span.icon.remove_all {
    width: 15px;
    height: 13px;
    background-position: -44px -838px;     
}

span.icon.remove_all {
    width: 15px;
    height: 13px;
    background-position: -44px -838px;     
}

span.icon.cross {
    width: 14px;
    height: 14px;
    background-position: -66px -758px;    
    margin: 0 5px 0 0; 
}





@media screen and (min-width: 768px) {
    .red_btn:hover span.icon {filter: saturate(100%) invert(0%) brightness(100%);}
    .white_btn:hover span.icon {filter: saturate(0%) invert(100%) brightness(200%);}
}












/* ---------- FORMS ---------- */
a span.alert {
    position: absolute;
    right: -60px;
    top: 150%;
    width: 230px;
    padding: 6px 10px 8px;
    font-size: 14px;
    line-height: 1.1;
    font-weight: 400;
    color: #fff;
    text-align: center;
    background-color: var(--maincolor);
    border-radius: 25px;    
    box-shadow: 0px 4px 23px rgba(0,0,0,0.12);
    z-index: 10;
    animation: opacity_in 300ms both;
}
@keyframes opacity_in {
    0% {opacity: 0;}
    100% {opacity: 1;}
}


header.fixed .basket[data-tooltip]:hover::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 10px;
    background: var(--maincolor);
    color: #fff;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    z-index: 1000;    
    animation: opacity_in 460ms both 600ms;
}

header.fixed .basket[data-tooltip]:hover::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%) scaleY(-1);
    border: 6px solid transparent;
    border-top-color: var(--maincolor);
    animation: opacity_in 460ms both 600ms;
}



















form {
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 6px;
}
form input,
form textarea {
    width: calc(100% - 36px);
    padding: 9px 18px;
    background-color: var(--bgcolor3);
    border-radius: 18px;
    border: none;
    font-size: 16px;
    line-height: 18px;
    color: var(--textcolor);
}
form input:-webkit-autofill,
form textarea:-webkit-autofill,
form input:-webkit-autofill:focus,
form textarea:-webkit-autofill:focus {transition: background-color 0s 600000s, color 0s 600000s !important;}



form input[name="company"] {display: none;}
form textarea {
    height: 90px;
    resize: none;
}

form button {
    width: 100%;
    padding: 10px 0;
    background-color: var(--maincolor);
    box-shadow: 0 0 0 2px transparent inset;
    border-radius: 18px;
    border: none;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    color: #fff;
    transition: 230ms ease-out;
    cursor: pointer;
    margin-top: 10px;
}

p.politika {
    font-size: 12px;
    line-height: 1.1;
    font-weight: 300;
    color: var(--textcolor);
    text-align: center;
    margin-top: 10px;
}
p.politika a {
    color: var(--textcolor);
    text-decoration: underline;    
}


.form_fields_wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 20px;
}
.form_field p {
    text-indent: 15px;
    font-weight: 500;
}
.form_field p span {color: var(--maincolor);}




@media screen and (min-width: 768px) {
    p.politika a:hover {color: var(--maincolor);}
}




/* ---------- SWIPER_NAVIGATION  ---------- */
.arrows {
    margin-left: 30px;
    gap: 0 10px;
    flex-shrink: 0;
}
.arrow {
    position: relative;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    cursor: pointer;
    outline: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.arrow::after {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    content: '';
    background-image: url(../img/sprite.svg);
    background-repeat: no-repeat;
    background-position: -58px -349px;
    filter: saturate(0%) invert(100%) brightness(200%);
    transition: 320ms ease-out;
}

.arrow.arr_next {transform: rotate(180deg);}

@media screen and (min-width: 768px) {
    .arrow:hover::after {filter: saturate(100%) invert(0%) brightness(100%);}
}



.pagination.dots_pagination {
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
}
.pagination.dots_pagination span {
    background-color: rgba(255,255,255,0.5);
    outline: 0px solid transparent;
    transition: 230ms ease-out;
    opacity: 1;
}
.pagination.dots_pagination span.active {
    background-color: rgba(255,255,255,1);
    outline: 2px solid #fff;
}


.lines_pagination {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    gap: 0 20px;
}
.lines_pagination span {
    position: relative;
    width: 50px;
    height: 50px;
    cursor: pointer;
    outline: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.lines_pagination span::after {
    position: absolute;
    bottom: 20%; left: 0;
    transform: translateY(50%);
    width: 100%;
    height: 1px;
    border-radius: 3px;
    content: '';
    background-color: var(--textcolor);
    transition: 120ms ease-out;
    outline: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.lines_pagination span.active::after {
    height: 5px;    
    background-color: var(--maincolor);
}




.scrollbar {
    position: absolute;
    background-color: var(--maincolor);  
}
.scrollbar.swiper-scrollbar-vertical {
    right: 0;
    top: 0;
    width: 1px;
    height: 100%;      
}
.scrollbar.swiper-scrollbar-horizontal {    
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
}
.scrollbar .swiper-scrollbar-drag {
    position: absolute;
    background-color: var(--maincolor);
    border-radius: 0;
}
.scrollbar.swiper-scrollbar-vertical .swiper-scrollbar-drag {
    right: 0;
    left: auto;
    width: 5px;
}
.scrollbar.swiper-scrollbar-horizontal .swiper-scrollbar-drag {
    top: auto;
    bottom: 0;
    height: 5px;    
}



@media screen and (min-width: 768px) {
    .lines_pagination span:not(.active):hover::after {background-color: var(--maincolor); height: 3px;}
    .pagination.dots_pagination span:hover {background-color: rgba(255,255,255,1);}
}





/* ---------- BREADCRUMBS ---------- */
ul.breadcrumbs {margin-bottom: 10px;}
ul.breadcrumbs li {
    margin: 0 15px 0 0;
    display: inline-block;
}
ul.breadcrumbs li a {
    position: relative;
    font-size: 14px;
    line-height: 1;
    font-weight: 300;
    text-decoration: underline 0.5px solid;    
    text-underline-offset: 1px;
}

ul.breadcrumbs li a::after {
    position: absolute;
    right: -14px;
    top: 7px;
    width: 9px;
    height: 5px;
    content: '';    
    background-image: url(../img/sprite.svg);
    background-position: -64px 0px;
    transform: rotate(-90deg) scale(0.9);
}


@media screen and (min-width: 768px) {
    ul.breadcrumbs li a:hover {color: var(--maincolor);}
}









/* *****************************************************
********************** PRELOADER ***********************
***************************************************** */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bgcolor);
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
.preloader .logo {
    grid-gap: 6px;
    animation: logoRotate 6s infinite ease-in-out;
}  
.preloader .logo .perv {animation: pervRotate 6s infinite ease-in-out;}  
.preloader .logo .cait {animation: caitRotate 6s infinite ease-in-out;}
.preloader .logo .comp {animation: compRotate 6s infinite ease-in-out;}
.preloader .logo .mosc {animation: moscRotate 6s infinite ease-in-out;}



/* *****************************************************
************************ HEADER ************************
***************************************************** */
header {
    position: sticky;
    top: 0;
    background-color: var(--bgcolor);
    padding: 40px 0 30px;
    z-index: 10;
    transition: 320ms ease-out 120ms;
    box-shadow: 0px 2px 4px rgba(0,0,0,0);
}
header.fixed {
    padding: 10px 0;
    box-shadow: 0px 2px 4px rgba(0,0,0,0.12);
    margin-bottom: 50px;
}

header .div1400 {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    gap: 0 30px;
    align-items: center;
}
a.logo,
header .top_menu,
header .contacts {flex-shrink: 0;}

a.logo {
    width: 420px;
    height: 38px;
    display: block;
    background-image: url(../img/logo.svg);
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
}


/* ******* HEADER TOP_MENU ******* */
header .top_menu,
header .top_menu .mobile_menu {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 0 10px;
}

a.delivery {
    padding: 11px 0 11px 20px;
    border-radius: 19px;
    font-size: 16px;
}
a.delivery span.icon {
    width: 49px;
    height: 15px;
    margin: 1px 0 0 6px;
    background: url(../img/sprite.svg) no-repeat 0px -268px;
}

.dropdown_btn {position: relative;}
.dropdown_list {
    position: absolute;
    top: 100%; left: 0;
    overflow: hidden;
    max-height: 0;
    transition: 120ms ease-out;
    z-index: 20;
}

.dropdown_btn.select .dropdown_list {
    width: 100%;
    border-radius: 0 0 10px 10px;
    z-index: 5;
}

.dropdown_btn.akkordeon .dropdown_list {
    position: relative;
    width: 100%;
    top: unset;
    left: unset;
    border-bottom: 1px solid var(--textcolor);
    z-index: 2;
}
.dropdown_btn.akkordeon.openned .dropdown_list {border-bottom: 2px solid var(--maincolor);}



.dropdown_btn .title {
    position: relative;
    font-size: 16px;
    line-height: 1;
    font-weight: 500;
    padding: 11px 20px;
    border-radius: 19px 19px 0 0;
    cursor: default;
    transition: 120ms ease-out 60ms;
    box-shadow: 0 0 0 0 rgba(0,0,0,0);    
}
.dropdown_btn.select .title,
.dropdown_btn.akkordeon .title {
    padding: 10px;
    border-radius: 0;
    border-bottom: 2px solid var(--maincolor);
    cursor: pointer;
}
.dropdown_btn.akkordeon .title {
    padding: 13px 0;
    border: none;
}
.dropdown_btn.select .title span.text,
.dropdown_btn.akkordeon .title span.text {
    font-size: 16px;
    line-height: 1;
    font-weight: 500;
}

.dropdown_btn.akkordeon:not(.openned) .title::after {
    position: absolute;
    left: 0; bottom: -1px;
    width: 0;
    height: 2px;
    content: '';
    background-color: var(--maincolor);
    transition: 320ms ease-out 60ms;    
    z-index: 3;
}



.dropdown_btn.select .dropdown_list .inner,
.dropdown_btn.akkordeon .dropdown_list .inner {
    width: 100%;
    padding: 15px 0;
    border-radius: 0 0 10px 10px;
    background-color: var(--bgcolor2);
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
}
.dropdown_btn.akkordeon .dropdown_list .inner {
    border-radius: 0;
    padding: 10px 0;
    background: none;
}




.dropdown_list .inner a,
.dropdown_btn.select .dropdown_list .inner > * {
    width: 300px;
    padding: 4px 10px;
    margin-bottom: 4px;
    font-size: 16px;
    line-height: 1.15;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--maincolor);
    text-decoration-thickness: 4%;
    text-underline-offset: 3px;
    transition: 230ms ease-out;
}

.dropdown_btn.select .dropdown_list .inner > *,
.dropdown_btn.akkordeon .dropdown_list .inner > * {
    width: calc(100% - 20px);
    cursor: pointer;
}
body.login .dropdown_btn.akkordeon .dropdown_list .inner > * {cursor:unset;}

.dropdown_btn.select .dropdown_list .inner > .hidden {display: none;}


.dropdown_btn.akkordeon .dropdown_list .inner > * {
    position: relative;
    padding: 6px 10px;
    border-bottom: 1px dashed rgba(44,41,39,0.23);
    transition: 320ms ease-out 60ms;
}
.dropdown_btn.akkordeon .dropdown_list .inner > *:last-child {border: none;}









.dropdown_btn .title span.icon {
    width: 9px;
    height: 5px;
    background: url(../img/sprite.svg) no-repeat -64px 0px;
    margin: 3px 0 0 5px;
}
.dropdown_btn.select .title span.icon,
.dropdown_btn.akkordeon .title span.icon {
    margin: 2px 4px 0 10px;
    transform: scale(1.5);
}
.dropdown_btn.select.openned .title span.icon,
.dropdown_btn.akkordeon.openned .title span.icon {        
    transform: scale(1.5) rotate(180deg);
}


.dropdown_btn:not(.select, .akkordeon) .title::after {
    position: absolute;
    right: -19px; bottom: 0;
    width: 19px;
    height: 19px;
    content: '';
    background-image: url(../img/sprite.svg);
    background-position: -63px -216px;
    opacity: 0;
    transition: 120ms ease-out 120ms;
}

.dropdown_btn:not(.select, .akkordeon) .dropdown_list {border-radius: 0 19px 19px 19px;}
.dropdown_btn:not(.select, .akkordeon) .dropdown_list .inner {
    padding: 15px 10px;
    background-color: var(--bgcolor2);
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    border-radius: 0 19px 19px 19px;
}



.dropdown_btn.select.openned .title {
    background-color: var(--bgcolor2);
    box-shadow: 0 2px 3px 0 rgba(0,0,0,0.12);
    transition: 320ms ease-out 60ms;
}


.dropdown_btn.select.openned .dropdown_list,
.dropdown_btn.akkordeon.openned .dropdown_list {
    max-height: 600px;        
    box-shadow: 0 3px 3px 0 rgba(0,0,0,0.12);
    transition: max-height 460ms ease-out 120ms;
}
.dropdown_btn.akkordeon.openned .dropdown_list {box-shadow: none;}



@media screen and (min-width: 768px) {
    a.delivery.btn.red_btn:hover {transition: 320ms ease 230ms;}
    a.delivery:hover span.icon {animation: deli_car 960ms ease both;}

    .dropdown_btn:not(.select, .akkordeon):hover .title {
        background-color: var(--bgcolor2);
        box-shadow: 0 2px 3px 0 rgba(0,0,0,0.12);
        transition: 320ms ease-out 60ms;
    }
    .dropdown_btn.select:hover .title {
        background-color: var(--bgcolor2);
        transition: 320ms ease-out 60ms;
    }
    .dropdown_btn.akkordeon:not(.openned) .title:hover::after {width: 100%;}

    .dropdown_btn:not(.select, .akkordeon):hover .title::after {opacity: 1;transition: 230ms ease-out 60ms;}
    .dropdown_btn:not(.select, .akkordeon):hover .dropdown_list {
        max-height: 600px;        
        box-shadow: 0 3px 3px 0 rgba(0,0,0,0.12);
        transition: max-height 460ms ease-out 120ms;
    }

    .dropdown_list .inner a:hover,
    .dropdown_btn.select .dropdown_list .inner > *:hover {
        color: var(--maincolor);
        text-decoration-thickness: 7%;
    }

    .dropdown_btn.akkordeon .dropdown_list .inner > *:not(.disabled):hover {background-color: var(--bgcolor3);}


}



/* ******* HEADER ICONS_BLOCK ******* */
header .icons_block {width: 100%;}
header .icons_block>* {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    margin-right: 6px;
    background-image: url(../img/sprite.svg);
    background-repeat: no-repeat;
    transition: 230ms ease-out;
}
header .icons_block>*:last-child {margin-right: 0;}

header .icons_block .lk {background-position: 6px -47px;}
header .icons_block .favorites {background-position: 6px -101px;}
header .icons_block .tel {background-position: 6px -207px;}

header .icons_block .lk::before,
header .icons_block .favorites::before {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    border-radius: 50%;
    content: '';
    background-image: url(../img/sprite.svg);
    background-repeat: no-repeat;
    opacity: 0;
    transition: 320ms ease-out 120ms;
}
header .icons_block .lk.loggedin::before {opacity: 1;}

header .icons_block .lk::before {background-position: -50px -47px;}
header .icons_block .favorites::before {background-position: -50px -101px;}

header .icons_block>* span.text,
header .icons_block>* span.total_summ {
    position: absolute;
    bottom: -17px;
    left: 50%;
    font-size: 10px;
    line-height: 10px;
    font-weight: 500;
    white-space: nowrap;
    transform: translateX(-50%);
    opacity: 0;
    transition: 320ms ease-out 120ms;
}





header .icons_block .basket {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    margin: 0;
    background-image: url(../img/sprite.svg);
    background-position: -51px -155px;
    background-repeat: no-repeat;
    transition: 320ms ease-out 120ms;    
}
header .icons_block .basket.empty {background-position: 5px -155px;}

.msMiniCart {background-image: none !important;}
.msMiniCart .basket.empty {display: flex;}
.msMiniCart .basket:not(.empty) {display: none;}
.msMiniCart.full .basket.empty {display: none;}
.msMiniCart.full .basket:not(.empty) {display: flex;}


header .icons_block .basket span.total_summ {
    top: -7px;
    opacity: 1;
}
header .icons_block .basket span.total_summ,
header .icons_block .basket span.total_summ * {    
    color: var(--maincolor);
    font-weight: 600;
}
header.fixed .icons_block .basket span.total_summ {top: -32px; opacity: 0;}


header .icons_block .basket span.count {
    position: absolute;
    top: 14px;
    left: 8px;
    width: 23px;
    z-index: 2;
    font-size: 9px;
    line-height: 1;
    font-weight: 600;
    text-align: center;
    color: #fff;
}










header .icons_block .search {
    box-shadow: 0 0 0 2px transparent inset;    
    border-radius: 19px;
    cursor: pointer;
    background: none;
    transition: 320ms ease-out 120ms;
}
header .icons_block .search .inner {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    max-width: 38px;
    border-radius: 19px;
}
header .icons_block .search span.icon {
    position: absolute;
    top: 0; right: 0;
    width: 38px;
    height: 38px;
    display: block;
    border-radius: 19px;
    background-image: url(../img/sprite.svg);
    background-position: 4px 7px;
    background-repeat: no-repeat;
}

header .icons_block .search input,
header .icons_block .search button {
    width: 0;
    padding: 10px 0;
    border: none;
    border-radius: 18px;
} 
header .icons_block .search input::placeholder {color: #fff; transition: 230ms ease-out 230ms;}


header .icons_block .search.openned {transition: 0ms !important;}
header .icons_block .search.openned span.icon {transition: 0ms !important;}
header .icons_block .search.openned .inner {
    width: auto;
    max-width: 300px;    
    background-color: #fff;
    box-shadow: 0 0 0 2px var(--maincolor) inset, -7px 0 7px 7px var(--bgcolor);
    transition: 320ms ease-out;
}
header .icons_block .search.openned input {
    width: 200px;
    padding: 5px 40px 5px 10px;
    margin: 5px;
    transition: 320ms ease-out;
}
header .icons_block .search.openned input::placeholder {color: var(--textcolor);}














@media screen and (min-width: 768px) {
    header:not(.fixed) .icons_block>*:not(.search.openned):hover span.text {
        bottom: -12px;
        opacity: 1;
    }
    header .icons_block>*:hover {background-color: var(--bgcolor2);}
    header .icons_block .search:not(.openned):hover {box-shadow: 0 0 0 2px var(--maincolor) inset;}
    header .icons_block>*:not(.search, .tel, .basket):hover::before {opacity: 1;}
}



/* ******* HEADER CONTACTS ******* */
header .contacts {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: flex-end;
}
header .contacts a {
    font-size: 18px;
    line-height: 1;
    font-weight: 600;
    color: var(--textcolor);
}
header .contacts span.recall {
    font-size: 13px;
    line-height: 1;
    font-weight: 400;
    color: var(--maincolor);
    text-decoration: underline;
    text-decoration-thickness: 4%;
    margin-top: 3px;
    cursor: pointer;
}

@media screen and (min-width: 768px) {
    header .contacts span.recall:hover {text-decoration-thickness: 10%;}
}


/* *****************************************************
********************* FIXED_BOTTOM_BTNS **********************
***************************************************** */
.fixed_bottom_btns {
    position: fixed;
    left: 50%;    
    transform: translateX(-50%);
    bottom: -60px;
    width: min(1320px, 100% - 120px);
    z-index: 11;
    transition: 600ms ease-in;
    justify-content: flex-end;
}

.fixed_bottom_btns .up_btn {
    position: relative;
    background-color: var(--maincolor);
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: center;
    padding-left: 14px;
    cursor: pointer;
}

.fixed_bottom_btns .up_btn span.icon {
    position: relative;
    width: 32px;
    height: 46px;
    flex-shrink: 0;
    order: 2;
    background-color: var(--maincolor);
    margin: 0;
}
.fixed_bottom_btns .up_btn span.icon::after {
    position: absolute;
    top: 11px;
    left: 0px;
    width: 18px;
    height: 24px;
    content: '';
    background-image: url(../img/sprite.svg);
    background-repeat: no-repeat;
    background-position: 0px -792px;
}
.fixed_bottom_btns .up_btn span.text {    
    max-width: 0;
    overflow: hidden;
    transition: 320ms ease-out 120ms;
    text-align: right;
    color: #fff;
    font-size: 16px;
    line-height: 1;
    font-weight: 500;
    opacity: 0;
}





@media screen and (min-width: 768px) {
    .fixed_bottom_btns .up_btn:hover span.text {
        max-width: 65px;
        padding: 0 10px 0 0;
        opacity: 1;
    }
}










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

/* *****************************************************
************************ BANNER ************************
***************************************************** */
section.banners {
    border-radius: 0 0 40px 40px;
    overflow: hidden;
}
section.banners .banner {
    position: relative;
    width: 100%;
    padding-top: 35%;
    background-size: cover;
    background-position: center;
}
section.banners .banner .overlay {
    position: absolute;
    top: 0; left: 0;
    height: calc(100% - 140px);
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 40px 40px 100px;
    background: rgba(152,30,50,0.35) linear-gradient(-235deg, rgba(131,24,42,0.7) 0%, rgba(131,24,42,0.3) 100%);
    border-bottom-right-radius: 100%;
    opacity: 0;
}
section.banners .banner .title {
    font-size: 42px;
    line-height: 1;
    font-weight: 700;
    color: #fff;
    opacity: 0;
}
section.banners .banner .description {
    font-size: 32px;
    line-height: 1.1;
    font-weight: 500;
    color: #fff;
    opacity: 0;
}
section.banners .banner .btn {
    margin-bottom: 7%;
    padding: 15px 40px;
    border-radius: 24px;
    opacity: 0;
}
section.banners .banner .btn span.icon.open {margin: 3px 0 0 10px;}

section.banners .banner_active .overlay {
    animation: slide_in_top_left 460ms both;
    animation-delay: 120ms;
    animation-timing-function: ease-in-out;
}
section.banners .banner_active .title {
    animation: slide_in_left 320ms both;
    animation-delay: 320ms;
    animation-timing-function: ease-in;
}
section.banners .banner_active .description {
    animation: slide_in_left 320ms both;
    animation-delay: 460ms;
    animation-timing-function: ease-in;
}
section.banners .banner_active .btn {
    animation: slide_in_left 320ms both;
    animation-delay: 600ms;
    animation-timing-function: ease-in;
}




section.banners .swiper_navigation {
    position: absolute;
    left: 40px;
    bottom: 40px;
    z-index: 3;
}

section.banners .arrow {
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
}
section.banners .arrow::after {background-position: 11px -349px;}

@media screen and (min-width: 768px) {
    section.banners .arrow:hover {
        background-color: transparent;
        box-shadow: none;
        opacity: 0.6;
    }
    section.banners .arrow:hover::after {
        background-position: 6px -349px;
        filter: saturate(0%) invert(100%) brightness(200%);
    }
}





/* *****************************************************
******************** CATALOG_BLOCK ********************
***************************************************** */
section.catalog_block .block_heading {opacity: 0;}
section.catalog_block.viewport .block_heading {animation: show_in_bottom 460ms ease both 600ms;}
section.catalog_block .subheading {text-align: right;}

.catalog_swiper {margin-top: -10px;}

.catalog_swiper a.delivery {padding: 12px 0 12px 40px;}
.catalog_swiper a.delivery span.icon {width: 69px;}

.catalog_swiper .cat_items.swiper-wrapper {margin-top: 30px;}

.cat_items .item {
    position: relative;
    height: auto !important;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    background-color: var(--textcolor);
    border-radius: 30px;
    overflow: hidden;
    color: #fff;
}

.cat_items .item form {height: 100%;}


.cat_items .item .image {
    position: relative;
    width: 100%;
    padding-top: 125%;
    background-size: cover;
    background-position: center;
}

.cat_items .item .add_to_favorite {
    position: absolute;
    right: 20px; top: 20px;
    width: 26px; height: 24px;
    cursor: pointer;
    outline: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.cat_items .item .add_to_favorite::before,
.cat_items .item .add_to_favorite::after {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    content: '';
    background-image: url(../img/sprite.svg);
    filter: saturate(0%) invert(100%) brightness(200%);
    transition: 230ms ease-out;
}

.cat_items .item .add_to_favorite::before {background-position: 0px -412px;}
.cat_items .item .add_to_favorite::after {
    opacity: 0;
    background-position: -56px -412px;
}

.cat_items .item .add_to_favorite:active::after {filter: saturate(100%) invert(0%) brightness(100%);}
.cat_items .item.in_favorits .add_to_favorite::before {opacity: 0;}
.cat_items .item.in_favorits .add_to_favorite::after {opacity: 1;}

.cat_items .item .image .name {
    position: absolute;
    bottom: 0; left: 0;
    width: calc(100% - 40px);
    padding: 50px 20px 0;
    background: linear-gradient(rgba(44,41,39,0) 0%, rgba(44,41,39,0.5) 40%, rgba(44,41,39,1) 100%);
}

.cat_items .item .image .name a {
    font-size: 20px;
    line-height: 1.1;
    font-weight: 700;
    color: #fff;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: 320ms ease;
    -webkit-tap-highlight-color: transparent;
}


.cat_items .item .info {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: stretch;
    flex: 1 1 auto;
    padding: 15px 20px 20px;
}
.cat_items .item .info>* {width: 100%;}

.cat_items .item .qtty_weight,
.cat_items .item .price,
.cat_items .item .desc,
.cat_items .item .btns a {color: #fff;}

.cat_items .item .qtty_weight,
.cat_items .item .price,
.cat_items .item .btns a {line-height: 1;}

.cat_items .item .qtty_weight {
    font-size: 16px;
    font-weight: 500;
}
.cat_items .item .price {
    font-size: 20px;
    font-weight: 700;
}

.cat_items .item .desc {
    font-size: 14px;
    line-height: 1.1;
    font-weight: 300;
    margin: 10px 0 20px;
}

.cat_items .item .btns a {
    position: relative;
    font-size: 16px;
    font-weight: 300;
    padding-bottom: 3px;
    border-bottom: 1px solid #fff;
}
.cat_items .item .btns a::after {
    position: absolute;
    left: 50%; bottom: -2px;
    transform: translateX(-50%);
    width: 0; height: 2px;
    content: '';
    background-color: var(--maincolor);
    transition: 230ms ease;
}



/* add_to_cart */
.cat_items .item .btns .qtty_input {position: relative;}

.cat_items .item .qtty_input .add_to_cart {
    position: absolute;
    top: 50%; left: 50%;
    margin: 0;
    width: auto;
    transform: translate(-50%, -50%);
    --atc_padding: 7px 23px;
    --anim_width: 60px;
    padding: var(--atc_padding);
    overflow: hidden;
    background-color: var(--maincolor);
    border-radius: 18px;
    color: #fff;
    font-size: 16px;
    line-height: 18px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 2;
    box-shadow: 0 0 0 2px transparent inset;
    transition: bacground-color 320ms ease, color 320ms ease;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.cat_items .item .qtty_input .add_to_cart:active,
.cat_items .item .qtty_input .add_to_cart:active:hover {background-color: var(--maincolor); color: var(--maincolor);}




.cat_items .item .qtty_input .add_to_cart::before,
.cat_items .item .qtty_input .add_to_cart::after {
    position: absolute;
    left: 50%;
    width: 65%;
    height: 50%;
    content: '';
    background-color: #fff;
    border-radius: 50%;    
    transform: translateX(-50%);
}
.cat_items .item .qtty_input .add_to_cart::before {bottom: -100%;}
.cat_items .item .qtty_input .add_to_cart::after {top: -100%;}

.cat_items .item.in_cart .qtty_input .add_to_cart::before,
.cat_items .item.in_cart .qtty_input .add_to_cart::after {transition: all 460ms ease 100ms, width 230ms ease 330ms;}
.cat_items .item.in_cart .qtty_input .add_to_cart::before {bottom: -50%; height: 80%; width: 75%;}
.cat_items .item.in_cart .qtty_input .add_to_cart::after {top: -50%; height: 80%; width: 75%;}

.cat_items .item.in_cart.just_added .qtty_input .add_to_cart {animation: add_to_cart 460ms both ease-out; animation-delay: 100ms;}
@keyframes add_to_cart {
    0% {
        background-color: var(--maincolor);
        color: var(--maincolor);
    }
    50% {
        width: var(--anim_width);
        padding: 7px 0px;
        outline: 0 solid transparent;
    }
    70% {
        width: auto;
        padding: var(--atc_padding);
        z-index: 2;
    }
    85% {opacity: 1;}
    99% {transform: translate(-50%, -50%) scale(1);}
    100% {
        background-color: var(--maincolor);
        color: var(--maincolor);
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
        z-index: 0;
    }
}
.cat_items .item.in_cart:not(.just_added) .qtty_input .add_to_cart {
    background-color: var(--maincolor);
    color: var(--maincolor);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    z-index: 0;
}


/* plus_minus */
.cat_items .item .qtty_input .btn:not(.add_to_cart) {
    position: absolute;
    top: 2px;
    width: 32px;
    height: 32px;
    border-radius: 16px;
    padding: 0;    
    transition: all 230ms ease, 
                left 0ms ease 0ms,
                right 0ms ease 0ms;    
}
.cat_items .item .qtty_input .minus {left: 32%;}
.cat_items .item .qtty_input .plus {right: 32%;}
.cat_items .item.in_cart .qtty_input .btn:not(.add_to_cart) {
    transition: all 230ms ease,
                left 120ms ease-out 330ms,
                right 120ms ease-out 330ms;
}
.cat_items .item.in_cart .qtty_input .minus {left: 2px;}
.cat_items .item.in_cart .qtty_input .plus {right: 2px;}


.cat_items .item .qtty_input .btn:not(.add_to_cart)::after {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    content: '';
    background-image: url(../img/sprite.svg);
    background-repeat: no-repeat;
    transition: 230ms ease;
}
.cat_items .item .qtty_input .minus::after {background-position: -59px -457px;}
.cat_items .item .qtty_input .plus::after {background-position: 9px -457px;}

.cat_items .item.in_cart.just_added .qtty_input .btn:not(.add_to_cart)::after {animation: plus_minus 230ms both 420ms;}
@keyframes plus_minus {
    0% {
        background-color: var(--maincolor);
        filter: saturate(100%) invert(0%) brightness(100%);
    }
    50% {background-color: transparent;}
    100% {filter: saturate(0%) invert(100%) brightness(200%);}
}
.cat_items .item.in_cart:not(.just_added) .qtty_input .btn:not(.add_to_cart)::after {
    filter: saturate(0%) invert(100%) brightness(200%);
}


.cat_items .item .qtty_input input {
    width: 45px;
    padding: 9px 46px;
    border-radius: 18px;
    font-size: 16px;
    line-height: 18px;
    font-weight: 500;
    background-color: #fff;
    color: var(--textcolor);
    text-align: center;    
}




.bottom_btn {
    margin-top: 10px;
    justify-content: flex-end;
}
.bottom_btn a {
    width: 246px;
    font-size: 14px;
    line-height: 16px;
    font-weight: 300;
    text-align: right;
    transition: 230ms ease-out;
}
    
.bottom_btn a span {
    font-weight: 600;
    color: var(--maincolor);
    text-decoration: underline 2px;
    text-underline-offset: 1px;
}

.bottom_btn a span.icon {margin-bottom: -3px;}
    

@media screen and (min-width: 768px) {
    .cat_items .item:not(.in_favorits) .add_to_favorite:hover::after {opacity: 0.5;}
    
    .cat_items .item .image .name a:hover {text-decoration-color: var(--maincolor);}
    .cat_items .item .info .btns a:hover::after {width: 100%;}

    .cat_items .item .qtty_input .add_to_cart:hover {
        background-color: #fff;
        color: var(--maincolor);
        box-shadow: 0 0 0 2px var(--maincolor) inset;
    }
    .cat_items .item .qtty_input .btn:not(.add_to_cart):hover::after {filter: saturate(100%) invert(0%) brightness(100%) !important;}
    
    .bottom_btn a:hover {color: var(--maincolor); font-weight: 600; }
}





/* *****************************************************
******************** SERVICES_BLOCK ********************
***************************************************** */
section.services_block .block_heading {
    margin-bottom: 2px;
    opacity: 0;
}
section.services_block.viewport .block_heading {animation: show_in_left 230ms ease-in 230ms both;}
section.services_block .arrows {align-self: flex-end;}
section.services_block .arrows .arr_prev {transform: rotate(90deg);}
section.services_block .arrows .arr_next {transform: rotate(-90deg);}

.services_swiper.swiper  {
    margin-top: 40px;
    padding: 0 40px;
    overflow: hidden;
}
.services_items .swiper-slide {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;     
    gap: 40px;
}
.services_items .item {
    width: 33%;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
}

.vertical_active .item {       
    animation-duration: 320ms;    
    animation-fill-mode: both;
    animation-timing-function: ease-out;
}
.vertical_active .item:nth-child(2) {animation-delay: 120ms;}
.vertical_active .item:nth-child(3) {animation-delay: 230ms;}


.services_items .item .image {
    width: 100%;
    padding-top: 58%;
    background-size: cover;
    background-position: center;
    border-bottom: 4px solid var(--maincolor);
    border-top-right-radius: 120px;
}

.services_items .item .text {
    padding-top: 10px;
    display: flex;
    flex-flow: column;
    gap: 10px 0;
    justify-content: space-between;
    align-items: stretch;
    flex: 1 1 auto;
}
.services_items .item .title {
    font-size: 21px;
    line-height: 23px;
    font-weight: 700;
    text-align: right;
    text-transform: uppercase;
}
.services_items .item .text p {
    font-size: 16px;
    line-height: 18px;
    font-weight: 300;
    text-align: right;
    margin-right: 10px;
}

.services_items .item .read_more {
    background-color: var(--maincolor);
    padding: 9px 12px 10px 15px;
    border-bottom-right-radius: 20px;
    color: #fff;
    font-size: 14px;
    line-height: 1;
    font-weight: 600;
    transition: 320ms ease-out;
}



@media screen and (min-width: 768px) {
    .services_items .item a:hover .read_more {padding: 9px 25px 10px 30px;}
    .services_items .item .text a:hover .read_more span.icon {filter: saturate(0%) invert(100%) brightness(200%); margin-left: 15px;}
}






/* *****************************************************
******************** PORTFOLIO_BLOCK *******************
***************************************************** */
section.port_block {margin-top: 100px;}
section.port_block .block_heading {text-align: right; opacity: 0;}
section.port_block.viewport .block_heading {animation: opacity_in 320ms ease-in 230ms both;}
.years {
    position: relative;
    margin: 20px auto 15px;
}
.years::before {
    position: absolute;
    left: 0; top: 6px;
    width: 100%;
    height: 1px;
    content: '';
    background-color: var(--textcolor);
}

.years .year {
    position: relative;
    width: 36px;
    padding-top: 20px;
    font-size: 10px;
    line-height: 1;
    font-weight: 400;
    text-align: center;
}
.years .year::before {
    position: absolute;
    left: 50%; top: 0;
    transform: translateX(-50%);
    width: 13px; height: 13px;
    border-radius: 50%;
    content: '';
    outline: 1px solid var(--textcolor);
    background-color: var(--bgcolor);
}
.years .div960 .year {
    font-weight: 700;
    color: var(--maincolor);
}
.years .div960::before {
    position: absolute;
    left: 14px; top: 4px;
    width: calc(100% - 28px);
    height: 5px;
    content: '';
    background-color: var(--maincolor);
}

.years .div960 .year::before {
    outline: 2px solid var(--maincolor);
}
.years .div960 .year::after {
    position: absolute;
    left: 50%; top: 2px;
    transform: translateX(-50%);
    width: 9px; height: 9px;
    border-radius: 50%;
    content: '';
    background-color: var(--maincolor);
}

section.port_block .desc p {
    font-size: 23px;
    line-height: 1.5;
    font-weight: 500;
}

.port_slider_block {
    position: relative;
    overflow: hidden;
}
.port_slider_block .grad {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 100%;
    background: linear-gradient(90deg, var(--bgcolor) 0%, transparent 100%);
    z-index: 3;
}
.port_slider_block .grad:nth-child(2) {
    left: auto;
    right: 0;
    transform: scaleX(-1);
}

.port_slider {position: absolute;}
.port_slider_block .swiper-wrapper {margin: 30px auto 20px;}
.port_items .item {
    align-self: stretch;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: stretch;
    user-select: none;
}
.port_items .item .image {
    position: relative;
    width: 100%;
    padding-top: 55%;
    background-size: 102% auto;
    background-position: center;
    border-radius: 10px 10px 0 0;
    transition: 320ms ease-out 120ms;
}
.port_items .item .image .cam_btn {
    position: absolute;
    bottom: 0; right: 10px;
    padding: 8px 6px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: center;
    background-color: var(--maincolor);
    transition: 120ms ease-out 120ms;
}

.port_items .item .image .cam_btn span:not(.icon) {
    overflow: hidden;
    max-width: 0;
    font-size: 10px;
    line-height: 1;
    font-weight: 400;
    color: #fff;
    transition: 320ms ease-out 120ms;
}
.port_items .item .image .cam_btn span.icon {margin: 0;}

.port_items .item .text {
    padding-top: 5px;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;    
    align-items: stretch;
    flex: 1 1 auto;
}
.port_items .item .title {
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--maincolor);
    transition: 320ms ease-out 120ms;
}
.port_items .item .text p {
    font-size: 12px;
    line-height: 1.1;
    font-weight: 300;
    margin-top: 2px;
}


.port_slider_navigation {gap: 0 30px;}
.port_slider_navigation .scrollbar_wrapper {
    position: relative;
    width: 100%;
}
.port_slider_navigation .arrows,
.port_slider_navigation .bottom_btn {margin: 0;}



@media screen and (min-width: 768px) {    
    .port_items .item:hover .image {background-size: 120% auto;}
    .port_items .item:hover .image .cam_btn {padding-left: 10px;}
    .port_items .item:hover .image .cam_btn span.icon {filter: saturate(0%) invert(100%) brightness(200%);}
    .port_items .item:hover .image .cam_btn span:not(.icon) {max-width: 200px; margin-right: 5px;}
    .port_items .item:hover .title {color: var(--maincolor);}
}






/* *****************************************************
********************** ADVANTAGES **********************
***************************************************** */
section.advantages {
    position: relative;
    margin-top: 100px;
    z-index: 4;
}
section.advantages .block_heading {
    text-align: right;
    padding: 40px 40px 0 0;
    opacity: 0;
}
section.advantages.viewport .block_heading {animation: show_in_left 320ms ease-in 230ms both;}


section.advantages .grid > * .inner {
    position: relative;
    background-color: var(--bgcolor2);
    padding: 40px;
    border-radius: 40px;
}

section.advantages .grid > * .inner::after {
    position: absolute;
    width: 40px;
    height: 40px;
    content: '';
    background-image: url(../img/sprite.svg);
    background-position: 0px -510px;
}
section.advantages .grid .left .inner::after {top: -40px; right: 0;}
section.advantages .grid .right .inner::after {bottom: -40px; left: 0; transform: rotate(180deg);}

section.advantages .grid .left .inner {border-top-right-radius: 0;}
section.advantages .grid .right .inner {border-bottom-left-radius: 0;}

section.advantages .item {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 0 20px;
    margin-bottom: 40px;
}
section.advantages .item:last-child {margin-bottom: 0;}

section.advantages .item .image {
    width: 43%;
    padding-top: 60%;
    background-size: cover;
    background-position: center;
    border-radius: 20px;
}
section.advantages .item .text {
    position: relative;
    width: 57%;
}
section.advantages .item .title {
    font-size: 30px;
    line-height: 1;
    font-weight: 700;
    color: var(--maincolor);
    margin-bottom: 15px;
    overflow-wrap: break-word;
}
section.advantages .item .text p {
    font-size: 16px;
    line-height: 1.4;
    font-weight: 500;
}
section.advantages .left .item:nth-child(1) .image,
section.advantages .right .item:nth-child(1) .image {border-bottom-left-radius: 160px;}
section.advantages .left .item:nth-child(2) .image,
section.advantages .right .item:nth-child(2) .image {border-top-right-radius: 160px;}
section.advantages .left .item:nth-child(2) .text,
section.advantages .right .item:nth-child(2) .text {text-align: right;}





/* *****************************************************
************************ CALL_US ***********************
***************************************************** */
section.call_us {
    position: relative;    
    margin: -265px auto 0;
    padding-top: 80px;
    background-color: var(--textcolor);
    background-image: url(../img/tile_w_8.svg);
    border-bottom-right-radius: 40px;
    overflow: hidden;
    background-size: 10%;
    z-index: 3;
}
section.call_us::before,
section.call_us::after {
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 100%;
    content: '';
    z-index: 0;
}

section.call_us::before {
    background: linear-gradient(90deg, #2C2927 0%, #201D1B 52%, #1E1B19 100%);
    opacity: 0.8;
}
section.call_us::after {
    background-image: url(../img/stone.webp);
    background-repeat: no-repeat;
    background-size: 80% auto;
    background-position: 100% 0%;
    transition: 320ms ease-out;
}

section.call_us * {color: #fff;}
section.call_us .grid {position: relative; z-index: 2;}
section.call_us .right {padding: 0 40px;}
section.call_us .left {    
    padding: 165px 40px;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
}
section.call_us .arrow_text p {
    font-size: 42px;
    line-height: 1;
    font-weight: 500;
}

section.call_us .arrow_text svg {width: 200px; margin-bottom: 4px;}


section.call_us .phone,
section.call_us .social {
    width: fit-content;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
}

section.call_us .phone {margin: 50px 0 30px;}


section.call_us .phone span.recall {
    margin-top: 4px;
    text-align: right;
    font-size: 23px;
    line-height: 1;
    font-weight: 300;
    text-decoration: underline 1px solid var(--maincolor);
    text-underline-offset: 3px;
    cursor: pointer;
    transition: 120ms ease-out;
}

section.call_us .phone a,
section.call_us .social a,
section.call_us .btn.red_btn {
    font-size: 30px;
    line-height: 1;
    font-weight: 500;
}

section.call_us .social a {margin-bottom: 10px;}
section.call_us .social a span:first-child {width: 155px; text-align: right;}
section.call_us .social a span.icon {margin: 0 5px 0 10px;}
section.call_us .social a span.icon+span {
    text-decoration: underline 2px solid var(--maincolor);
    text-underline-offset: 3px;
    transition: 120ms ease-out;
}

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




section.call_us .bottom_block {
    position: absolute;
    left: 0; bottom: 0;
    width: 40%;
    height: 80px;
    background-color: var(--bgcolor2);
    border-radius: 0 40px 0 0;
    z-index: 4;
}

section.call_us .bottom_block::before,
section.call_us .bottom_block::after {
    position: absolute;
    width: 40px;
    height: 40px;
    content: '';    
    background-image: url(../img/sprite.svg);
    background-position: 0px -510px;
    transform: rotate(90deg);
}
section.call_us .bottom_block::before {top: -40px; left: 0;}
section.call_us .bottom_block::after {bottom: 0; right: -40px;}





@media screen and (min-width: 768px) {   
    section.call_us .phone span.recall:hover {
        color: var(--maincolor);
        text-decoration-thickness: 2px;
    }
    section.call_us .social a:hover span.icon+span {color: var(--maincolor);}
    section.call_us .btn.red_btn:hover {box-shadow: none;}
}



/* *****************************************************
********************** FOUR_STEPS **********************
***************************************************** */
section.four_steps {
    position: relative;
    margin-top: 0px;
    background-color: var(--bgcolor2);
    border-bottom-left-radius: 160px;
    z-index: 2;
}
section.four_steps .left .block_heading {opacity: 0;}
section.four_steps.viewport .left .block_heading {animation: opacity_in 320ms ease-in 230ms both;}

section.four_steps .grid.col2 {grid-template-columns: auto 43%;}

section.four_steps .left {padding: 0 60px 60px 80px;}


section.four_steps .step {
    position: relative;
    padding-bottom: 40px;
}

section.four_steps .step::before {
    position: absolute;
    left: 27px; top: 54px;
    width: 4px;
    height: calc(100% - 54px);
    content: '';    
    background-image: url(../img/steps/dot.svg);
    background-repeat: repeat-y;
    background-position: center;
    z-index: 0;
}

section.four_steps .step .digit {
    position: relative;
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    border: 4px solid var(--maincolor);
    border-radius: 50%;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
    font-size: 30px;
    line-height: 1;
    font-weight: 700;
    background-color: var(--bgcolor2);    
    color: var(--maincolor);
    z-index: 2;
}
section.four_steps .step .title {
    font-size: 30px;
    line-height: 1;
    font-weight: 700;
}
section.four_steps .step .first_step_icons {
    width: 170px;
    height: 24px;
    background-image: url(../img/steps/fst_stp.svg);
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 30px;
    margin-top: 7px;
}

section.four_steps .step .text,
section.four_steps .step .image {
    padding-left: 75px;
    margin: 10px 0 20px;
}
section.four_steps .step .text:last-child,
section.four_steps .step .text p:last-child,
section.four_steps .step .image:last-child {margin-bottom: 0;}


section.four_steps .step .text p {
    font-size: 16px;
    line-height: 1.5;
    font-weight: 500;
    margin-bottom: 10px;
}

section.four_steps .step .text p a,
section.four_steps .step .text p span.modal_form {
    color: var(--maincolor);
    text-decoration: underline 1px;
    text-underline-offset: 2px;
}
section.four_steps .step .text p span.modal_form {
    font-weight: 700; 
    cursor: pointer;
}

section.four_steps .image img {width: 100%;}


section.four_steps .step1 .chat {
    padding: 30px;
    background: #fff url(../img/tile_b_3.svg);
    background-size: 15%;
    background-position: center;
    border-radius: 0 80px 0 80px;
    overflow: hidden;
}
section.four_steps .step1 .chat .message {width: calc(80% - 50px);}
section.four_steps .step1 .chat .message:first-child {    
    padding: 20px 30px 20px 20px;
    border-radius: 0 40px 40px 40px;
    background-color: var(--seccolor);
    margin-bottom: 20px;
    opacity: 0;    
}
section.four_steps .step1 .chat .message:last-child {
    margin-left: 20%;
    padding: 20px 20px 20px 30px;
    border-radius: 40px 40px 0 40px;
    background-color: var(--maincolor);
    opacity: 0;    
}

section.four_steps.viewport .step1 .chat .message:first-child {animation: show_in_bottom 230ms ease-in both; animation-delay: 730ms;}
section.four_steps.viewport .step1 .chat .message:last-child {animation: show_in_bottom 230ms ease-in both; animation-delay: 1600ms;}

section.four_steps .step1 .chat .message p {
    font-size: 14px;
    line-height: 1.2;
    color: #fff;
}
section.four_steps .step1 .chat .message .time {
    font-size: 12px;
    line-height: 1;
    font-weight: 300;
    text-align: right;
    color: #fff;
}


section.four_steps .step3 .fnw.fe {gap: 0 40px;}
section.four_steps .step3 .text p {text-align: right;}
section.four_steps .step3 a.pdf_kp {
    width: 125px;
    height: 250px;
    flex-shrink: 0;
    margin: 0;
    padding-right: 10px;
    text-align: right;
}


section.four_steps .step4 {padding-bottom: 20px;}
section.four_steps .step4 .image img {border-radius: 0 80px 0 80px;}
section.four_steps .step4 .text {padding-left: 140px;}

section.four_steps .step4 .bottom_btn_block {
    position: relative;
    margin-top: 30px;
}
section.four_steps .step4 .btn {
    padding: 15px 40px;
    border-radius: 24px;
    flex-shrink: 0;
}

section.four_steps .step4::before {height: calc(100% - 204px);}
section.four_steps .step4::after {
    position: absolute;
    left: 27px;
    bottom: 42px;
    width: 100px;
    height: 100px;
    content: '';
    background-image: url(../img/steps/dot_corner.svg);
    background-size: contain;
    background-position: left bottom;
}

section.four_steps .step4 .bottom_btn_block span.dots {
    position: absolute;
    top: 50%;
    left: 127px;
    width: calc(100% - 300px);
    height: 4px;
    margin-top: -2px;
    background-image: url(../img/steps/dot.svg);
    background-repeat: repeat-x;
    background-position: left center;
}


@media screen and (min-width: 768px) {
    section.four_steps .step .text p a:hover,
    section.four_steps .step .text p span.modal_form:hover {text-decoration-thickness: 2px;}
}


/*  ****** right ***** */
section.four_steps .right {
    background-color: #fff;
    background-image: url(../img/dot_tile_b_5.svg);
    margin: -40px 0;
    padding: 120px 90px 80px;
    border-radius: 0 0 40px 40px;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
}
section.four_steps .right .heart {
    position: relative;
    width: 204px;
    height: 180px;
    flex-shrink: 0;
    background-image: url(../img/heart.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: -260px auto 120px;
    animation: heartbeat 730ms ease-in infinite;
    z-index: 1;
}
@keyframes heartbeat {
    0%, 25% {transform: scale(1);}
    15%, 40% {transform: scale(1.05);}
}



section.four_steps .partners {
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;    
}
section.four_steps .partners .item {
    width: 40%;
    padding-top: 25%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}


section.four_steps .right .bonuses {
    position: sticky;
    top: 360px;
    left: -90px;
    width: calc(100% + 140px);
    padding: 40px 20px;
    background-color: var(--bgcolor2);
    /* background: linear-gradient(90deg, var(--bgcolor2) 0%, var(--bgcolor) 100%); */
    text-align: center;
    z-index: 2;
}

.bonuses .btn {
    width: fit-content;
    padding: 15px 40px;
    border-radius: 24px;
    margin: auto;
}
.bonuses .btn span.icon {margin: 1px 0 0 7px;}

.bonuses .top_corners,
.bonuses .bottom_corners {
    position: absolute;
    width: 100%;
    height: 40px;
    left: 0;
}
.bonuses .top_corners {top: -40px;}
.bonuses .bottom_corners {bottom: -40px;}

.bonuses .top_corners::before,
.bonuses .bottom_corners::before,
.bonuses .top_corners::after,
.bonuses .bottom_corners::after {
    position: absolute;
    width: 40px;
    height: 40px;
    content: '';    
    background-image: url(../img/sprite.svg);
    background-position: 0px -510px;
}
.bonuses .top_corners::before {bottom: 0; left: 0; transform: rotate(90deg);}
.bonuses .bottom_corners::before {top: 0; left: 0; transform: rotate(180deg);}
.bonuses .top_corners::after {
    bottom: 0; right: 0; 
    /* background-position: -42px -510px; */
}
.bonuses .bottom_corners::after {
    top: 0; right: 0; 
    transform: rotate(270deg); 
    /* background-position: -42px -510px; */
}





/* *****************************************************
************************ BOTTOM ************************
***************************************************** */
section.bottom {
    position: relative;
    margin-top: -220px;    
    z-index: 1;
    margin-bottom: 0;
}

section.bottom .bottom_inner {
    position: relative;
    padding: 460px 0 80px;
    background-image: url(../img/footer.webp);
    background-attachment: fixed;
    background-size: 1400px auto;
    background-position: center bottom;
    background-repeat: no-repeat;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    overflow: hidden;
    transition: 320ms ease-out;
}
section.bottom .bottom_inner::before {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    content: '';
    background: linear-gradient(rgba(0,0,0,0) 30%, rgba(0,0,0,0.9) 60%);
}

section.bottom .bottom_inner * {color: #fff;}


section.bottom .grid.col4 {
    grid-template-columns: 285px 210px 140px auto;
    grid-template-rows: 46px auto;
    grid-gap: 40px 80px;
}

section.bottom a.logo {
    width: 510px;
    height: 0;
    padding-top: 10%;
    filter: saturate(0%) invert(100%) brightness(200%);
}

section.bottom .menu_col,
section.bottom .contacts_col {
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
}

section.bottom .menu_col a:not(.btn) {
    font-size: 16px;
    line-height: 1.1;
    font-weight: 500;
    text-decoration: underline 1px solid var(--maincolor);
    text-underline-offset: 2px;
    margin-bottom: 10px;
    transition: 230ms ease-out;
}

section.bottom .menu_col a.btn {
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    padding: 10px 20px;
    border-radius: 18px;
    margin: 0 0 20px -20px;
}

section.bottom .menu_col .menu_cat_title {
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    padding: 10px 0;
    margin-bottom: 20px;
}


section.bottom .contacts_col {gap: 15px}
section.bottom .contacts_col p {
    font-size: 16px;
    line-height: 1.2;
    font-weight: 300;
}

section.bottom .contacts_col .phone a {
    font-size: 23px;
    line-height: 1;
    font-weight: 600;
}
section.bottom .contacts_col .phone span {
    font-size: 12px;
    line-height: 1;
    font-weight: 500;
    text-decoration: underline 1px solid var(--maincolor);
    text-underline-offset: 2px;
    margin-left: 10px;
    cursor: pointer;
    transition: 230ms ease-out;
}


section.bottom .contacts_col .social a {
    font-size: 16px;
    line-height: 1;
    font-weight: 500;
    display: inline-block;
    text-decoration: underline 1px solid var(--maincolor);
    text-underline-offset: 2px;
    transition: 230ms ease-out;
    margin: 0 20px 10px 0;
}
section.bottom .contacts_col .social a:last-child {margin-bottom: 0;}
section.bottom .contacts_col .social a span.icon {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin-right: 10px;
}
section.bottom .contacts_col .social a span.icon.wa {background-position: 0px -688px;}
section.bottom .contacts_col .social a span.icon.tg {background-position: 0px -722px;}
section.bottom .contacts_col .social a span.icon.mail {
    width: 24px;
    height: 18px;
    background-position: 0px -756px;
}




footer {
    position: sticky;
    bottom: 0; 
    padding: 20px 40px;
    z-index: -1; 
}
footer > * {opacity: 0.5;}

footer p {
    font-size: 14px;
    line-height: 1.1;
    font-weight: 300;
}

footer a.f23 {transition: 230ms ease-out;}
footer a.f23 p {
    font-size: 12px;
    text-align: right;
    margin-right: 10px;
}
footer a.f23 span {text-decoration: underline;}


@media screen and (min-width: 768px) {
    section.bottom .contacts_col .social a:hover,
    section.bottom .contacts_col .phone span:hover,
    section.bottom .menu_col a:not(.btn):hover {color: var(--maincolor);}
    section.bottom .menu_col a.btn:hover {box-shadow: none;}
    footer a.f23:hover {opacity: 1;}
}


























/* *****************************************************
******************** PRIDUCT_CARD *******************
***************************************************** */
section.product_card {padding-top: 20px;}
section.product_card .grid {grid-gap: 30px 40px;}
section.product_card .grid>* {min-height: 0;}

section.product_card .product_images {
    grid-area: 1/1/3/2;
    background-color: var(--bgcolor2);
    border-radius: 30px;
}
section.product_card .product_name {grid-area: 1/2/2/3;}
section.product_card .product_name {padding-left: 20px;}
section.product_card .product_info .short_description {padding: 0 20px;}
section.product_card .product_info {
    max-width: 560px;
    grid-area: 2/2/4/3;
}

/* ---------- priduct_gallery  ---------- */
.swiper.big_img,
.swiper.only_big_img {
    position: relative;
    border-radius: 30px;
}
.swiper.big_img .swiper-slide,
.swiper.only_big_img .swiper-slide {
    width: 100%;
    height: 0;
    padding-top: 111%;
    background-size: cover;
    background-position: center;
}

.swiper.big_img .arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    transition: 230ms ease-in 120ms;
}
.swiper.big_img .arrow.arr_prev {
    left: -50px;
    transform: translateY(-50%);
}
.swiper.big_img .arrow.arr_next {
    right: -50px;
    transform: translateY(-50%) rotate(180deg);
}


.swiper.thumbs {
    width: calc(100% - 40px);
    margin: 15px auto;
}
.swiper.thumbs .swiper-slide {
    position: relative;
    height: 0;
    padding-top: 18%;
    background-size: cover;
    background-position: center;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;    
    outline: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.swiper.thumbs .swiper-slide::after {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    content: '';    
    transition: 230ms ease-out;
    background-color: rgba(255,255,255,0.5);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.12) inset;
}
.swiper.thumbs .swiper-slide.swiper-slide-thumb-active::after {
    background-color: rgba(255,255,255,0);
    box-shadow: 0 0 0 4px var(--maincolor) inset;
}

@media screen and (min-width: 768px) {
    .swiper.big_img:hover .arrow.arr_prev {left: 10px;}
    .swiper.big_img:hover .arrow.arr_next {right: 10px;}
    .swiper.thumbs .swiper-slide:not(.swiper-slide-thumb-active):hover::after {background-color: rgba(255,255,255,0.1);}
}


/* ---------- product_info_block  ---------- */
section.product_card .product_info .sticky {
    position: sticky;
    top: 100px;
}
section.product_card .product_info form {gap: 0;}
section.product_card .short_description {
    font-size: 18px;
    line-height: 1.8;
    font-weight: 400;
    margin-bottom: 40px;
}


section.product_card .product_parameters {
    padding: 30px 20px;
    border-radius: 30px;
    background-color: var(--bgcolor2);
}
section.product_card .product_parameters .grid {grid-gap: 15px 30px;}
section.product_card .product_parameters .weight_price {margin: 0 auto 30px;}
section.product_card .product_parameters>*:last-child {margin-bottom: 0 !important;}

section.product_card .product_parameters span.caption {
    font-size: 18px;
    line-height: 1;
    font-weight: 300;
}
section.product_card .product_parameters .price span.caption {font-weight: 500;}
section.product_card .product_parameters .bju span.caption,
section.product_card .product_parameters .bju span.value {font-size: 14px; display: block;}
section.product_card .product_parameters .bju span.value {font-weight: 700;}

section.product_card .product_parameters span.value {
    font-size: 18px;
    line-height: 1;
    font-weight: 500;
}

section.product_card .product_parameters .ingredients span.value {
    font-size: 16px;
    line-height: 1.2;    
}

section.product_card .product_parameters .price span.value {font-weight: 700; color: var(--maincolor);}
section.product_card .product_parameters .price span.value span.unit {font-weight: 500; color: var(--textcolor);}


section.product_card .product_parameters .bju {
    width: calc(100% - 50px);    
    height: 50px;
    padding: 0 25px;
    border-radius: 25px;
    background-color: var(--bgcolor3);
    margin: 0 auto 30px;
}
section.product_card .product_parameters .bju * {text-align: center;}
section.product_card .product_parameters .ingredients {margin: 0 auto 40px;}
section.product_card .product_parameters .ingredients>div {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: flex-start;
}
section.product_card .product_parameters .ingredients>div span.caption {margin-right: 5px;}

section.product_card .minicalc_block.grid {
    grid-template-columns: minmax(190px, 35%) auto;
    grid-gap: 30px 40px;    
    align-items: center;
}


.qtty_input {position: relative;}

section.product_card .minicalc_block .qtty_input {padding-top: 6px;}


.qtty_input input {
    width: calc(100% - 120px);
    padding: 13px 60px;
    background-color: #fff;
    border-radius: 23px;
    font-size: 18px;
    line-height: 20px;
    font-weight: 500;
    text-align: center;
}
.qtty_input .btn {
    position: absolute;
    top: 6px;
    width: 46px;
    height: 46px;    
    border-radius: 23px;    
    transition: 230ms ease;
}
.qtty_input .minus {left: 0;}
.qtty_input .plus {right: 0;}

.qtty_input .btn::after {
    position: absolute;
    left: 16px; top: 16px;
    width: 14px; height: 14px;
    content: '';
    background-image: url(../img/sprite.svg);
    background-repeat: no-repeat;
    transition: 230ms ease;
    filter: saturate(0%) invert(100%) brightness(200%);
    transition: 230ms ease;
}
.qtty_input .btn:active::after {filter: brightness(100%);}
.qtty_input .minus::after {background-position: -68px -466px;}
.qtty_input .plus::after {background-position: 0px -466px;}



section.product_card .minicalc_block .summ {
    text-align: right;
    align-self: flex-end;
}
section.product_card .minicalc_block .summ span.caption {
    font-size: 18px;
    line-height: 1;
    font-weight: 500;
}
section.product_card .minicalc_block .summ span.value {
    font-size: 32px;
    line-height: 1;
    font-weight: 900;
    color: var(--maincolor);
    margin-left: 6px;
    white-space: nowrap;
}




section.product_card .minicalc_block .add_to_favorite {cursor: pointer;}
section.product_card .minicalc_block .add_to_favorite .btn {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}
section.product_card .minicalc_block .add_to_favorite .btn .icon {margin-bottom: -2px;}

section.product_card .minicalc_block .add_to_favorite .text {
    font-size: 18px;
    line-height: 1;
    font-weight: 500;
    margin-left: 10px;
}



section.product_card .minicalc_block button {
    padding: 12px 20px 13px;
    justify-content: center;
    align-items: center;
    border-radius: 25px;
    margin: 0;
}





@media screen and (min-width: 768px) {
    .qtty_input .btn:hover::after {filter: brightness(100%);}
    section.product_card .minicalc_block .add_to_favorite:hover .btn.red_btn {
        background-color: #fff;
        color: var(--maincolor);
        box-shadow: 0 0 0 2px var(--maincolor) inset;
    }
    section.product_card .minicalc_block .add_to_favorite:hover .red_btn span.icon {filter: saturate(100%) invert(0%) brightness(100%);}
}


/* ---------- text_content  ---------- */
.text_content .text_block {margin-bottom: 40px;}
.text_content .text_block .subheading {margin-bottom: 20px;}
.text_content .text_block p {
    font-size: 16px;
    line-height: 2;
    margin-bottom: 20px;
}
.text_content .image_text {
    display: grid;
    grid-template-columns: 65% auto;
    grid-gap: 40px;
}

.text_content .image_text .image {
    background-size: cover;
    background-position: center;
    border-radius: 20px 120px 20px 20px;
}


.text_content.bottom_text {
    padding-bottom: 160px;
    z-index: 2;
    background-color: var(--bgcolor);
    border-bottom-left-radius: 160px;
}


/* ---------- bonuses ---------- */
section.bonuses.div1400 {
    margin: 80px auto;
    background-color: var(--bgcolor2);
    border-radius: 0 80px 0 80px;
    z-index: 3;
}
@media screen and (min-width: 768px) {
    section.bonuses.div1400 .top_corners::after {display: none;}
    section.bonuses.div1400 .bottom_corners::before {display: none;}

    section.bonuses.div1400 .top_corners::before {
        transform-origin: left bottom;
        transform: scale(4) rotate(90deg) translateX(-100%);
    }
    section.bonuses.div1400 .bottom_corners::after {
        transform-origin: right top;
        transform: scale(4) rotate(-90deg) translateY(-100%);
    }
}


section.bonuses .inner {
    position: relative;
    width: min(860px, 100% - 40px);
    margin: auto;
    padding: 40px 0 60px;    
    overflow: hidden;
}
section.bonuses .inner .block_heading {text-align: center;}

section.bonuses .inner::before,
section.bonuses .inner::after {
    position: absolute;
    bottom: -2px;
    height: 77px;
    content: '';
    background-image: url(../img/gifts.svg);
    background-repeat: no-repeat;
}

section.bonuses .inner::before {
    width: 107px;
    left: 0;
    background-position: 0px 0px;
}
section.bonuses .inner::after {
    width: 120px;
    right: 0;
    background-position: -127px 0px;
}




/* *****************************************************
********************** CATALOG_PAGE **********************
***************************************************** */
section.catalog {padding-top: 20px;}
section.catalog .big_heading_line {
    margin-bottom: 30px;
    align-items: flex-start;
}
section.catalog .block_heading {margin: 0;}
section.catalog .heading_red_line {
    flex-shrink: 0;
    margin-left: 30px;
    padding: 26px 40px 25px 55px;
    background-color: var(--maincolor);
    background-image: url(../img/tile_w_8.svg);
    background-size: 10%;    
    border-radius: 50px 0 0 50px;
    gap: 0 30px;
}
section.catalog .heading_red_line span.icon.deli_car {
    width: 57px;
    height: 29px;
    background-position: 0px -884px;
    margin: 0;
}
section.catalog .heading_red_line span.icon.clock {
    width: 54px;
    height: 37px;
    background-position: 0px -956px;
    margin: 0;
}
section.catalog .heading_red_line span.text {
    font-size: 16px;
    line-height: 1.1;
    font-weight: 500;
    color: #fff;
    margin-left: 10px;
}





.side_menu_grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-gap: 0 20px;
}
.side_menu_grid .side_menu_col {
    grid-column: 1/2;
    padding-bottom: 90px;
}
.side_menu_grid .side_menu_col .side_menu {
    position: sticky;
    top: 80px;
    background-color: var(--bgcolor2);
    padding: 20px 20px 40px;
    border-radius: 30px;
}

.side_menu_grid .filter_group {margin-bottom: 10px;}
.side_menu_grid .filter_group .akkordeon .title span.text {
    font-size: 18px;
    font-weight: 900;
}
.side_menu_grid .filter_group .dropdown_btn.akkordeon .title span.icon {
    margin: 0px 17px -6px 10px; transform: scale(1.8);
}
.side_menu_grid .filter_group.dropdown_btn.akkordeon.openned .title span.icon {
    transform: scale(1.8) rotate(180deg);
}


.side_menu_grid .filter_group .filter_item {
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    transition: opacity 230ms ease-out 320ms;    
}
.side_menu_grid .filter_group .filter_item span.icon {
    transition: background-position 0ms, 
                opacity 230ms ease-out 320ms;
}
.side_menu_grid .filter_group .filter_item.disabled span.icon {
    opacity: 0;
    transition: background-position 0ms, 
                opacity 230ms ease-out 0ms;
}

.side_menu_grid .filter_group .filter_item>* {
    position: relative;
    z-index: 1;
}
.side_menu_grid .filter_group .filter_item .caption {text-transform: capitalize;}
.side_menu_grid .filter_group .filter_item.disabled {
    opacity: 0.4;
    cursor: default;    
    transition: opacity 230ms ease-out 0ms;
}

.side_menu_grid .filter_group .filter_item input {
    position: absolute;    
    opacity: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    z-index: 2;
    cursor: pointer;
}
.side_menu_grid .filter_group .filter_item input:disabled {cursor: default;}

.side_menu_grid .filter_group .filter_item.filter_reset {
    width: fit-content;
    align-self: flex-end;
    margin-top: 5px;
    font-size: 14px;
    line-height: 16px;
    padding: 6px 15px;
    border-radius: 14px;
    visibility: hidden;
    overflow: hidden;
    height: 0;
    opacity: 0;
    transition: opacity 120ms ease-out, height 120ms ease-out 120ms;
}
.side_menu_grid .filter_group.chkd .filter_item.filter_reset {
    transition: opacity 320ms ease-out 230ms, height 230ms ease-out;
    visibility: visible;
    opacity: 1;
    height: 16px;
}





.side_menu_grid .content_col {grid-column: 2/5;}
.side_menu_grid .content_col ul.breadcrumbs {margin-bottom: 0;}

.side_menu_grid .content_col .heading_line {align-items: flex-end;}
.sorter>span.text {    
    font-size: 16px;
    line-height: 1;
    font-weight: 600;
    padding: 11px 10px;
}
.sorter .dropdown_btn.select .title {min-width: 220px;}
.sorter .dropdown_list a.active {display: none;}


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

#mse2_mfilter button.btn_more {
    position: relative;
    display: flex;
    box-shadow: 0 0 0 2px transparent inset;
    width: auto;
    padding: 15px 50px;
    background-color: var(--maincolor);
    color: #fff;
    border: none;
    border-radius: 25px;
    margin: 20px auto;    
    overflow: hidden;    
    font-size: 18px;
    line-height: 20px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: 320ms ease;
    user-select: none;
}


section.catalog #pdopage>.sticky-pagination {display: none;}





/* *****************************************************
********************** CART_PAGE **********************
***************************************************** */
section.div1400.cart_section {margin-bottom: 120px;}
.cart_list_grid {
    display: grid;
    grid-template-columns: 8fr 4fr;
    grid-gap: 20px;
    margin: 20px 0;
}

.cart_list_grid .left .item {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: stretch;
    margin-bottom: 20px;
    border-radius: 20px;
    background-color: var(--bgcolor2);
}

.cart_list_grid .left .item .image {
    width: 23%;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    border-radius: 20px;
}

.cart_list_grid .left .item .text {
    width: 100%;
    padding: 20px;
}

.cart_list_grid .left .item .title {
    font-size: 20px;
    line-height: 1.2;
    display: inline-block;
    font-weight: 700;
    color: var(--maincolor);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.cart_list_grid .left .item .options {margin: 10px 0 20px;}
.cart_list_grid .left .item .options * {white-space: nowrap;}
.cart_list_grid .left .item .caption,
.cart_list_grid .left .item .value,
.cart_list_grid .left .item .unit {
    font-size: 16px;
    line-height: 1;
}
.cart_list_grid .left .item .caption {font-weight: 300;}
.cart_list_grid .left .item .value,
.cart_list_grid .left .item .unit {font-weight: 500;}


.cart_list_grid .left .item .price .caption,
.cart_list_grid .left .item .cost .caption {font-weight: 500;}
.cart_list_grid .left .item .price .value {
    color: var(--maincolor);
    font-weight: 700;
}



.cart_list_grid .left .item .buttons_line.fnw.fs {align-items: flex-end;}
.cart_list_grid .left .item .cost {
    width: 100%;
    text-align: right;
}
.cart_list_grid .left .item .cost .value,
.cart_list_grid .left .item .cost .unit {
    font-size: 23px;
    color: var(--maincolor);
    font-weight: 900;
    white-space: nowrap;
}


.btn_remove_item,
.btn_remove_all {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    padding: 10px;
    flex-shrink: 0;
    border: none;
    border-radius: 6px;
    background-color: var(--bgcolor3);
    font-size: 10px;
    font-weight: 500;
    color: var(--textcolor);
    margin-top: 0;
}

.btn_remove_all {width: 23%;}

.cart_list_grid .item .item_qtty {
    flex-shrink: 0;
    margin-left: 10%;
}

.cart_list_grid .item .qtty_input input {
    width: 40px;
    padding: 7px 40px;    
    border-radius: 16px;
    font-size: 16px;
    line-height: 18px;    
}
.cart_list_grid .item .qtty_input .btn {
    top: 0;
    width: 32px;
    height: 32px;    
    border-radius: 16px;    
}

.cart_list_grid .item .qtty_input .btn::after {left: 9px; top: 9px;}






.cart_list_grid .right .inner,
.ordering_grid>.right .inner {
    position: sticky;
    top: 80px;
    padding: 40px 0;
    border-radius: 20px;
    background-color: var(--bgcolor2);
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
}
.cart_list_grid .right .inner>*,
.ordering_grid>.right .inner>* {text-align: center;}


.cart_list_grid .right .total_cost {
    font-size: 32px;
    line-height: 1.6;
    font-weight: 700;
    margin-bottom: 20px;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
}
.cart_list_grid .right .total_cost span.ms2_total_cost {font-weight: 900;}


.tot_c_w {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}
.cart_list_grid .right .total_count,
.cart_list_grid .right .total_weight {
    font-size: 18px;
    line-height: 1.1;
    font-weight: 500;
    margin-bottom: 10px;
}
.cart_list_grid .right .total_count span,
.cart_list_grid .right .total_weight span {font-weight: 700;}


.cart_list_grid .right .order_btn,
.ordering_grid .right .red_btn {
    padding: 13px 30px 14px;
    border-radius: 30px;
    margin-top: 20px;
}

.ordering_grid .right .red_btn {width: fit-content;}


.person_calc {
    width: 100%;
    padding: 10px 0;
    margin: 10px 0;
    overflow: hidden;
    background-color: var(--bgcolor2);
    background-size: 23%;
    max-height: 23px;
    transition: max-height 320ms ease-out, background-color 320ms ease-out 120ms, background-image 320ms ease-out 230ms;
}
.person_calc.openned {
    max-height: 300px;
    background-color: var(--bgcolor3);
    background-image: url(../img/tile_w_25.svg);
}

.person_calc .heading_line {
    position: relative;
    cursor: pointer;
    margin-bottom: 20px;
}
.person_calc .heading_line p {
    font-size: 18px;
    line-height: 1.2;
    font-weight: 600;
    color: var(--maincolor);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.person_calc.openned .heading_line p {text-decoration: none;}

.person_calc .close {
    position: absolute;
    top: 0px; right: 10px;
    width: 26px;
    height: 26px;
    border-radius: 0px;
    cursor: pointer;
    transition: 230ms ease-out 120ms;
    z-index: 100;
    opacity: 0;
    transform: scale(0);
}
.person_calc.openned .close {
    opacity: 1;
    transform: scale(1);
}

.person_calc .close span {
    width: 16px;
    height: 16px;
    display: block;
    margin: 5px;
    background-image: url(../img/sprite.svg);
    background-position: -42px -1005px;
    transition: transform 230ms ease-out;
}

.pers_qtty, 
.pers_weight, 
.pers_price {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    opacity: 0;
    transform: translateY(200px);
}

.pers_qtty {transition: transform 230ms ease-out 120ms;}
.pers_weight {transition: transform 230ms ease-out 230ms;}
.pers_price {transition: transform 230ms ease-out 320ms;}

.person_calc.openned .pers_qtty, 
.person_calc.openned .pers_weight, 
.person_calc.openned .pers_price {
    opacity: 1;
    transform: translateY(0);
}

.pers_qtty>*, 
.pers_weight>*, 
.pers_price>* {width: 45%;}

.pers_qtty .caption, 
.pers_weight .caption, 
.pers_price .caption {
    text-align: right;
    font-size: 16px;
    line-height: 1.1;
    margin-right: 10px;
}
.pers_qtty .caption {font-weight: 600;}

.pers_weight .value, 
.pers_price .value {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1;
    text-align: left;
    text-indent: 32px;
}
.pers_qtty .qtty_input {width: 120px;} 



/* ordering */
.print_links {
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
}
.print_links a {
    font-size: 18px;
    font-weight: 700;
    color: var(--textcolor);
    text-decoration-color: var(--maincolor);
    text-decoration: underline;    
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    margin: 5px auto;
    transition: 320ms ease-out;
}

.print_links p {
    font-size: 18px;
    font-weight: 600;
    margin: 30px auto 20px;
}

.print_links .btn {
    padding: 13px 30px 14px;
    border-radius: 30px;
    text-decoration: none;
}




@media screen and (min-width: 768px) {
    .cart_list_grid .item .title:hover {text-decoration-thickness: 2px;}

    .btn_remove_item:hover,
    .btn_remove_all:hover {
        border: none;
        background-color: #fff;
        color: var(--textcolor);
        box-shadow: 0 0 0 2px var(--bgcolor3) inset;
    }

    .person_calc .close:hover span {transform: rotate(90deg);}
    .person_calc .heading_line:hover p {
        text-decoration: underline;
        text-underline-offset: 2px;
        text-decoration-thickness: 2px;
    }

    .print_links a:hover {
        color: var(--maincolor);
        text-decoration-thickness: 2px;
    }
}



/* *****************************************************
********************** LOGIN_PAGE **********************
***************************************************** */
body.login section.grid {
    grid-template-columns: 8fr minmax(440px, 4fr);
    min-height: 100vh;
}
body.login section.grid .image {
    background-image: url(../img/login/1.webp);
    background-size: cover;
    background-position: center;
}
body.login section.grid .login_block {padding: 100px 40px;}

body.login .login_block a.logo {
    width: 323px;
    height: 104px;
    background-image: url(../img/logo2.svg);
}


body.login .login_forms .dropdown_btn.akkordeon h4.title {
    position: relative;
    font-size: 27px;
    font-weight: 600;
    margin-bottom: 15px;
}

body.login .dropdown_btn.akkordeon h4.title span.icon {transform: scale(1.8); margin-right: 10px;}
body.login .dropdown_btn.akkordeon.openned h4.title span.icon {transform: scale(1.8) rotate(180deg);}

body.login .dropdown_btn.akkordeon h4.title::after {
    position: absolute;
    left: 0; bottom: -1px;
    width: 0;
    height: 2px;
    content: '';
    background-color: var(--maincolor);
    transition: 320ms ease-out 60ms;    
    z-index: 3;
}


body.login .dropdown_btn.akkordeon h4.title {border-bottom: 1px solid var(--textcolor);}
body.login .dropdown_btn.akkordeon.openned h4.title {color: var(--maincolor);}
body.login .dropdown_btn.akkordeon.openned h4.title::after {width: 100%;}


@media screen and (min-width: 768px) {    
    body.login .office-auth-login-wrapper.dropdown_btn.akkordeon h4.title,
    body.login .office-auth-login-wrapper.dropdown_btn.akkordeon.openned h4.title {
        border: none;
        color: var(--textcolor);
        cursor: default;
        justify-self: flex-end;
    } 
    body.login .office-auth-login-wrapper.dropdown_btn.akkordeon h4.title::after,
    body.login .office-auth-login-wrapper.dropdown_btn.akkordeon.openned h4.title::after {display: none;} 
    body.login .office-auth-login-wrapper.dropdown_btn.akkordeon .dropdown_list {max-height: 600px;} 
}



body.login .office-auth-login-wrapper,
body.login .office-auth-register-wrapper {
    margin: 60px 0 0;
    padding: 0;
    border: 0;
    background: none;
    min-height: auto;
    box-shadow: none;
}


body.login .dropdown_btn.akkordeon .dropdown_list,
body.login .dropdown_btn.akkordeon.openned .dropdown_list {border: 0;}
body.login .dropdown_btn.akkordeon .dropdown_list .inner {padding: 0;}
body.login .dropdown_btn.akkordeon .dropdown_list .inner > *,
body.login .dropdown_btn.akkordeon .dropdown_list .inner > *:hover {
    padding: 0;
    width: 100%;
    background: none;
    border: none;
}


body.login .form_field {
    display: grid;
    grid-template-columns: 85px auto;
    grid-gap: 10px;
    align-items: center;
    margin-bottom: 20px;
}
body.login .form_field p {
    font-size: 16px;
    font-weight: 500;    
    text-indent: 0;
}
body.login .form_field p.desc {
    grid-area: 2/2/3/3;
    font-size: 12px;
    font-weight: 300;
    padding: 0 18px;
}

body.login .btn {
    width: fit-content;
    margin-top: 20px;
    font-size: 16px;
    line-height: 18px;
    padding: 9px 50px;
    border-radius: 18px;
    justify-self: end;
}
body.login .form_field button {
    grid-area: 1/2/2/3;
    margin-top: 0;
}

body.login .office-auth-register-wrapper .inner>p {
    font-size: 16px;
    font-weight: 300;
    margin-bottom: 10px;
}



/* *****************************************************
********************** USER_PAGES **********************
***************************************************** */
section.pagetitle {margin-bottom: 20px;}
section.user_pages_grid {
    display: grid;
    grid-template-columns: 3fr 9fr;
    grid-gap: 40px;
    background-color: var(--bgcolor);
    z-index: 3;
}

section.user_pages_grid .left .inner {
    position: sticky;
    top: 80px;
    background-color: var(--bgcolor3);
    border-radius: 20px;
    padding: 30px 30px 40px;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-end;
}
section.user_pages_grid .left .inner a {
    font-size: 18px;
    line-height: 1;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--maincolor);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: 230ms ease-out;
    margin-bottom: 20px;
    cursor: pointer;
}
section.user_pages_grid .left .inner button {
    width: fit-content;    
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
    padding: 9px 30px;
}



.user_profile_grid {
    grid-template-columns: 210px auto;
    grid-gap: 40px 20px;    
}
.edit_user_grid {
    grid-template-columns: 6fr 3fr;
    grid-gap: 40px 20px;
}
.ordering_grid {
    grid-template-columns: 9fr 3fr;
    grid-gap: 20px;
}


.user_profile_grid .heart,
.edit_user_grid .heart {
    width: 210px;
    height: 184px;
    background-image: url(../img/heart.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.edit_user_grid .heart {
    position: sticky;
    top: 80px;
    margin: auto;
}

.user_profile_grid p {
    font-size: 18px;
    line-height: 1.1;
    font-weight: 300;
}
.user_profile_grid p strong {font-weight: 500;}
.user_profile_grid .user_info {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    margin-left: -50px;
}
.user_profile_grid .user_info p strong {
    width: 160px;
    display: inline-block;
    text-align: right;
    margin-right: 20px;
}

.user_adress {
    max-width: 800px;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.user_adress>p,
.user_adress_add_form>p {margin: 20px 0;}

.user_adress_list {
    width: 100%;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.user_adress_item {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

body.edit_profile .user_adress_item,
body.ordering .user_adress_item {
    width: calc(100% - 40px);
    background-color: var(--bgcolor3);
    padding: 10px 20px;
    border-radius: 20px;
}

.user_adress_item .left {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
}

.user_adress_item .left span.text {
    width: 100%;
    padding: 0;
    margin: 0;
    border-radius: 0;
    background: none;
    font-size: 16px;
    line-height: 1.1;
    font-weight: 300;
}
body.lk .user_adress_item:not(.checked) span.text {cursor: pointer;}



.user_adress_item .radio,
.payment_method .checkbox .radio {
    position: relative; 
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 11px;
    border: 2px solid var(--maincolor);
    background-color: #fff;
    margin-right: 10px;    
    min-height: unset !important;    
    margin-bottom: 0 !important;
}
.user_adress_item:not(.checked)  .radio,
.payment_method .checkbox:not(.checked)  .radio {cursor: pointer;}

.user_adress_item .radio::before,
.payment_method .checkbox .radio::before {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    opacity: 0;
    border-radius: 50%;
    content: '';
    background-color: var(--maincolor);
    transition: 230ms ease-out;
}
.user_adress_item.checked .radio::before,
.payment_method .checkbox.checked .radio::before {
    width: 10px; 
    height: 10px;
    opacity: 1;
}

.user_adress_item .text {
    font-size: 16px;
    line-height: 1.1;
    font-weight: 300;
}

body.lk .user_adress_item .remove,
body.lk .user_adress .add_adress {display: none !important;}





/* --- edit_profile --- */
.edit_user_grid .form_field,
.ordering_grid .form_field {
    display: grid;
    grid-template-columns: 170px auto;
    grid-gap: 3px 15px;
    align-items: center;
    margin-bottom: 15px;
}
.ordering_grid .form_field {grid-template-columns: 90px auto;}

.edit_user_grid .form_field p.caption,
.ordering_grid .form_field p.caption {
    font-size: 18px;
    line-height: 1;
    font-weight: 500;
    text-align: right;
    text-indent: 0;
}

.edit_user_grid .form_field p.desc, 
.ordering_grid .form_field p.desc, 
.edit_user_grid .form_field p.help-block {grid-area: 2/2/3/3;}
.edit_user_grid .form_field p.desc,
.ordering_grid .form_field p.desc,
.edit_user_grid .form_field p.help-block {
    font-size: 11px;
    font-weight: 300;
    text-indent: 0px;
    padding: 0 18px;
}
.edit_user_grid .form_field p.help-block {
    font-weight: 500;
    color: var(--maincolor);    
}
.edit_user_grid .form_field.has-error p.help-block {animation: blink 960ms ease both;}


.user_adress .add_adress {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    width: fit-content;    
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
    padding: 9px 30px;
    border-radius: 18px;
    align-self: flex-end;
}
.user_adress .add_adress span.icon {
    transform: rotate(45deg);
    margin-right: 10px;
}


.user_adress_item .remove {
    flex-shrink: 0;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;    
    cursor: pointer;
    margin-left: 10px;
}
.user_adress_item .remove span.icon {transition: 320ms ease-out;}
.user_adress_item .remove span.mh {
    font-size: 12px;
    line-height: 1;
    color: var(--maincolor);
}




.user_adress_add_form {width: 100%;}
.user_adress_add_form .form_buttons {margin-top: 20px;}
.user_adress_add_form .form_buttons button {
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
    padding: 9px 30px;
    border-radius: 18px;
    justify-content: center;
}
.user_adress_add_form .form_buttons button.cancel_new_address {
    grid-column: 2/3;
    background-color: var(--bgcolor2);
    color: var(--textcolor);
}
.user_adress_add_form .form_buttons button.save_new_address {grid-column: 1/3;}

#text_address {display: none;}



/* --- ordering --- */
body.ordering #msOrder {margin-top: 40px;}
section.ordering_grid .left.grid.col2 {
    grid-template-columns: minmax(470px, 1fr) 1fr;
    grid-gap: 20px;
}
section.ordering_grid .left.grid>* {
    display: flex;
    flex-flow: column;
    justify-content: stretch;
}

.field_frame {
    padding: 20px;
    background-color: var(--bgcolor2);
    border-radius: 20px;
    margin-bottom: 20px;
}
.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: 18px;
    font-weight: 700;
    line-height: 1;
    margin: 0 0 20px;
    flex-shrink: 0;
}


.field_frame.dely_date_time .form_fields_wrapper {
    flex-shrink: 0;
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px 20px;
}
.field_frame.dely_date_time .form_field {
    width: 50%;
    flex: 1;
    min-width: 170px;
    grid-template-columns: 70px auto;
    margin: 0;
    gap: 14px;
}
.field_frame.dely_date_time .form_field:last-child {min-width: 140px;}
.field_frame.dely_date_time .form_field input {
    width: calc(100% - 36px);
    min-width: 70px;
    flex-shrink: 0;
    text-align: center;
}
.field_frame.dely_date_time .form_field:last-child input {min-width: 40px;}

.ordering_grid .field_frame.comment {
    height: 100%;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
}
.ordering_grid .field_frame.comment textarea {height: calc(100% - 18px);}


.field_frame.other_receiver {padding: 0 20px;}
.field_frame.other_receiver .dropdown_btn.akkordeon .title {
    padding: 20px 0;
    margin: 0;
}
.field_frame.other_receiver .dropdown_btn.akkordeon .title::after {display: none;}
.field_frame.other_receiver .dropdown_btn.akkordeon .dropdown_list {border: none;}

.field_frame.other_receiver .dropdown_btn.akkordeon .dropdown_list .inner {padding: 0;}
.field_frame.other_receiver .dropdown_btn.akkordeon .dropdown_list .inner > * {
    padding: 0;
    border: 0;
}
.field_frame.other_receiver .dropdown_btn.akkordeon .dropdown_list .inner > *,
.field_frame.other_receiver .dropdown_btn.akkordeon .dropdown_list .inner > *:hover {background: none;}
.field_frame.addresses .user_adress {max-width: unset;}



.ordering_grid .right .total_cost {
    font-size: 32px;
    line-height: 1.6;
    font-weight: 700;
    margin-bottom: 20px;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
}











@media screen and (min-width: 768px) {
    section.user_pages_grid .left .inner a:hover {color: var(--maincolor); text-decoration-thickness: 2px;}
    .user_adress_item:not(.checked):hover .radio::before,
    .payment_method .checkbox:not(.checked):hover .radio::before {
        width: 100%; 
        height: 100%;
        opacity: 0.5;
    }
    .user_adress_item .remove:hover span.mh {text-decoration: underline;}
    .user_adress_item .remove:hover span.icon {transform: rotate(90deg);}
    .user_adress_add_form .form_buttons button.cancel_new_address:hover {
        background-color: #fff;        
        box-shadow: 0 0 0 2px var(--bgcolor3) inset;
    }
}

.payment_method .checkbox {margin: 20px 0;}
.payment_method .checkbox label input {display: none;}
.payment_method .checkbox label {
    font-weight: 500;
}
























.ms {display: none !important;}