body{position: relative; font: 18px/21px 'RobotoFlex'; height: 100%; min-width: 340px; color: #3b261f;
padding-top: 60px;}
#container{min-height: 100%; padding-bottom: 425px; position: relative;}
#header{margin-bottom: 15px;}
#footer{position: absolute; left: 0; bottom: 0; width: 100%; height: 425px; background: #a1bd70 url(../images/footer.png) top center no-repeat;}
#overlay{background: #333; opacity: 0.7; position: fixed; z-index: 100; left: 0; top: 0; width: 100%; height: 100%;
display: none;}
h1{font: 56px 'RobotoFlexBold'; margin-bottom: 40px; text-align: center;}
div.inner{max-width: 1600px; margin: 0 auto;}
div.default-center{max-width: 800px; margin: 0 auto; position: relative;}
div.default-center.regular{max-width: 1060px; min-height: 36vw;}
.button{height: 48px; display: flex; justify-content: center; align-items: center; border: none; font-family: 'RobotoFlexBold';
background: #a1bd70; border-radius: 12px; cursor: pointer; padding: 0 20px; font-size: 18px; color: #3b261f;
transition: all 0.5s ease;}
.button:hover{background-color: #658430 !important;}
.button:active{background-color: #557125 !important;}
.button.light{color: #000; border: 2px solid #a1bd70; background: #fff;}
.button.light:hover{background-color: #e7f2d4;}
.button.light:active{background-color: #a1bd70;}
.button.last{margin: 0  auto 40px auto; width: fit-content; font-family: 'RobotoFlex';}
button:disabled{background: #e7f2d4; color: #96908e; cursor: default;}
button:disabled:hover{background: #e7f2d4 !important;}

@supports (not (-ms-ime-align:auto)) 
{
        form input + label.hint{transition: all 0.3s ease-out; transform: translate(0, -2.2rem);
        display: block; padding: 0 16px; pointer-events: none; color: #aaa; position: absolute;}
        form input:focus + label.hint, form input:not(:placeholder-shown) + label.hint{color: #3b261f; 
        transform: translate(0, -4.65rem); color: #3b261f; font-size: 16px;}
}

/* Header */
#header div.top{height: 60px; background: #a1bd70; position: fixed; top: 0; left: 0; width: 100%; z-index: 100;}
#header div.top div.inner{display: flex; justify-content: space-between; height: 100%; align-items: center;}
#header div.categories-menu{display: flex; width: calc(100% - 220px);}
#header div.categories-menu > span{width: 24px; height: 24px; cursor: pointer; visibility: hidden;}
#header div.categories-menu span.menu-scroll-left{background: url(../images/icons/chevron-left-green.svg) center no-repeat;}
#header div.categories-menu span.menu-scroll-right{background: url(../images/icons/chevron-right-green.svg) center no-repeat;}
#header div.top ul.categories{display: flex; gap: 30px; margin: 0 7px; overflow-x: auto; overflow-y: hidden;
scrollbar-width: none; -ms-overflow-style: none; scrollbar-width: none;}
#header div.top ul.categories::-webkit-scrollbar{display: none;}
#header div.top ul.categories li a{color: #3b261f; font: 16px 'RobotoFlexBold'; white-space: nowrap; transition: all 0.5s ease;}
#header div.top ul.categories li a:hover{color: #658430;}
#header div.top div.icons{display: flex; height: 42px; align-items: center; gap: 10px; width: 200px;}
#header div.top div.icons span.user{width: 42px; height: 42px; cursor: pointer; background: url(../images/icons/user.svg) no-repeat;}
#header div.top div.icons a.cart{height: 42px; background: url(../images/icons/cart.svg) no-repeat; position: relative;
padding-left: 54px; display: flex; align-items: center;}
#header div.top div.icons #cart-number{background: #658430; color: #fff; height: 16px; font-size: 9px; padding: 0 6px;
border-radius: 8px; position: absolute; top: 6px; left: 22px; display: flex; align-items: center;}
#header div.top div.icons #cart-total{color: #3b261f; font: 16px 'RobotoFlexBold';}
#header ul.bottom{height: 60px; display: flex; gap: 30px; align-items: center; justify-content: center;}
#header ul.bottom li{font-size: 14px;}
#header ul.bottom a{color: #3b261f; border-bottom: 2px solid #d8d4d2; padding-bottom: 4px; transition: all 0.5s ease;}
#header ul.bottom a:hover{color: #658430; border-color: transparent;}
#header ul.bottom li.phone{padding-left: 19px; background: url(../images/icons/phone.svg) top 2px left no-repeat;}
#header ul.bottom li.phone a{border: none;}
#header ul.bottom li.work-time{padding-left: 19px; background: url(../images/icons/clock.svg) left no-repeat;}
#header ul.bottom li.conditions{padding-left: 19px; background: url(../images/icons/delivery.svg) left no-repeat;}

.hvr-underline-from-center{overflow: visible;}
.hvr-underline-from-center::before{background: #658430; height: 2px; bottom: -1px;}

/* Mobile menu */
#mobile-footer{position: fixed; width: 100%; left: 0; bottom: 0; z-index: 30; height: 78px; display: flex; flex-direction: column;
justify-content: space-between; background: url(../images/tabbar.svg) bottom -16px center no-repeat; display: none;}
#mobile-footer a.cart-button{width: 48px; height: 48px; align-self: center; background: url(../images/icons/cart-white.svg) center no-repeat;
position: relative; margin-top: 5px;}
#mobile-footer a.cart-button span.cart-number{background: #658430; color: #fff; height: 16px; font-size: 9px; padding: 0 6px;
border-radius: 8px; position: absolute; top: 6px; left: 22px; display: flex; align-items: center;}
#mobile-footer div.bottom-section{display: flex; justify-content: space-between; width: 100%; height: 60px;
align-items: center; padding: 0 16%;}
#mobile-menu-button{background: url(../images/icons/menu.svg) center no-repeat; width: 20px; height: 20px; cursor: pointer;
display: inline-flex; margin-bottom: 2px;}
#mobile-menu-client{width: 20px; height: 20px; cursor: pointer; background: url(../images/icons/user-white.svg) center no-repeat;
display: inline-flex; margin-bottom: 2px;}
#mobile-footer span.cart-total{color: #fff; font-size: 12px; align-self: flex-end; margin-bottom: 6px; line-height: 12px;}

#mobile-menu{width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1000; display: none;
padding: 30px 0; background: #fff; overflow-y: auto;}
span.mobile-menu-close{width: 44px; height: 44px; cursor: pointer; background: url(../images/icons/close.svg) no-repeat center; 
display: inline-block; position: absolute; right: 12px; top: 12px;}
div.mobile-menu-top{display: flex; padding: 0 15px 20px 15px; gap: 31px;}
div.mobile-menu-top a.logo{height: 200px;}
div.mobile-menu-top a.logo img{display: block; max-height: 100%;}
div.mobile-menu-top ul.bottom{flex-direction: column; align-items: flex-start !important; gap: 20px !important;
height: auto !important; padding: 25px 0 0 0 !important; margin-bottom: 20px;}
div.mobile-menu-top ul.bottom li{white-space: nowrap;}
ul.mobile-menu-categories{background: #a1bd70; padding: 12px 40px; margin-bottom: 25px;}
ul.mobile-menu-categories li{font-family: 'RobotoFlexBold'; border-bottom: 2px solid #97ae68; padding: 15px 0;}
ul.mobile-menu-categories li:last-child{border: none;}
ul.mobile-menu-categories li a{color: #3b261f; font-size: 16px;}
ul.mobile-menu-pages{padding: 0 40px;}
ul.mobile-menu-pages li{padding: 12px 0;}
ul.mobile-menu-pages li a{color: #3b261f; font-size: 14px; border-bottom: 2px solid #d8d4d2; padding-bottom: 4px;}

/* Breadcrumbs */
div.breadcrumbs{padding: 20px 0 10px 0; font-size: 12px; color: #989e9d; line-height: 140%; width: 100%;
text-align: center;}
div.breadcrumbs a{color: #989e9d;}
div.breadcrumbs a::after{content: '/'; margin: 0 6px 0 6px;}

/* Main banner */
#index-banner{margin-bottom: 100px; display: flex; justify-content: space-between;}
#index-banner a.logo{margin-top: 30px;}
#index-banner a.logo img{display: block; max-width: 100%;}
#index-banner div.swiper{width: 1200px; margin:  0 70px 0 70px;}
#index-banner .swiper-slide{display: flex; align-items: center; justify-content: center;}
#index-banner .swiper-slide img{max-width: 100%; display: block;}
#index-banner .swiper-arrows > div{width: 50px; height: 50px;}
#index-banner .swiper-arrows div.swiper-button-prev{background: url(../images/icons/prev.svg) no-repeat;}
#index-banner .swiper-arrows div.swiper-button-next{background: url(../images/icons/next.svg) no-repeat;}
#index-banner .swiper-arrows > div::after{content: '';}
#index-banner .swiper-pagination{display: flex; justify-content: flex-end; gap: 5px; padding-right: 5%;}
#index-banner .swiper-pagination > span{width: 25px; height: 5px; background: url(../images/icons/bullet.svg) no-repeat;
opacity: 1 !important;}
#index-banner .swiper-pagination span.active{background: url(../images/icons/bullet-active.svg) no-repeat;}

/* Catalog and products */
div.catalog section{margin-bottom: 30px;}
div.catalog section:last-child{margin-bottom: 60px;}
div.catalog div.title, div.catalog h1, div.catalog h2{text-align: center; margin-bottom: 25px; font: 42px 'RobotoFlexBold';}
div.catalog div.products{display: flex; justify-content: space-between; flex-wrap: wrap;}
div.catalog div.product{margin-bottom: 65px; width: 385px; height: 700px; display: flex; flex-direction: column;
justify-content: flex-start; padding-bottom: 20px;}
div.catalog div.product.empty{height: 0; margin: 0;}
div.catalog div.product div.image{margin-bottom: 20px;}
div.catalog div.product div.image img{display: block; max-width: 100%; transition: all 1s ease;}
div.catalog div.product:hover div.image img{transform: scale(1.1)}
div.catalog div.product div.name{font-family: 'RobotoFlexBold'; height: 39px; line-height: 17px;}
div.catalog div.product div.description{font-size: 14px; line-height: 140%; height: 40px; margin-bottom: 5px;}
div.catalog div.product select{width: calc(100% - 20px); border-radius: 12px; border: 1px solid #99a4af; padding: 10px 15px; 
margin-bottom: 10px; color: #96908e; appearance: none; background: #fff url(../images/icons/chevron-down.svg) right 15px center no-repeat;}

div.bottom{margin-top: auto; display: flex; justify-content: space-between; flex-wrap: wrap;
align-items: center; position: relative;}
div.bottom div.price{font-family: 'RobotoFlexBold';}
div.bottom div.price span{color: #96908e; font: 14px 'RobotoFlex';}
div.bottom div.button.to-cart{width: 130px;}
div.bottom div.button.not-available{width: 100%; background: #e7f2d4; cursor: default;}
div.buttons:has(.not-available){width: 100%;}

div.quantity{width: 130px; display: flex; justify-content: space-between;
background: #e7f2d4; height: 48px; align-items: center; border-radius: 12px; padding: 0 10px;}
div.quantity span.number{font-family: 'RobotoFlexBold'}
div.quantity span.plus{cursor: pointer; height: 100%; width: 40px; 
background: url(../images/icons/plus.svg) center no-repeat;}
div.quantity span.minus{cursor: pointer; height: 100%; width: 40px; 
background: url(../images/icons/minus.svg) center no-repeat;}

div.warning{font-size: 14px; line-height: 150%; width: 100%; position: absolute; top: 48px;}
div.warning span.message span{color: #90071f; margin-right: 5px;}
div.warning span.address{padding-left: 17px; margin-right: 5px; white-space: nowrap;
background: url(../images/icons/map-pin-red.svg) left no-repeat;}
div.catalog div.product > *{margin-left: 10px; margin-right: 10px;}
div.catalog div.product > div.image{margin: 0 0 20px 0; overflow: hidden; display: flex; justify-content: center;}
div.catalog div.product:hover div.name{color: #658430;}

/* Modal product */
#modal-product{padding: 30px; background: #fff; position: fixed; z-index: 110; width: 900px; top: 70px; display: none;
left: calc((100% - 900px) / 2);}
#modal-product span.close{width: 44px; height: 44px; cursor: pointer;  background: url(../images/icons/close.svg) no-repeat center; 
display: inline-block; position: absolute; right: 12px; top: 12px; transition: all 1s ease;}
#modal-product span.close:hover{transform: rotate(360deg);}
#modal-product span.navigation{width: 50px; height: 50px; cursor: pointer; display: inline-block; position: absolute;
bottom: calc(50% - 25px);}
#modal-product span.navigation.prev{background: url(../images/icons/prev-black.svg) no-repeat center; left: -70px;}
#modal-product span.navigation.next{background: url(../images/icons/next-black.svg) no-repeat center; right: -70px;}
#modal-product div.wrapper{display: flex; justify-content: space-between;}
#modal-product div.content{padding: 20px 0 0 0; width: 410px;}
#modal-product div.content div.name, #modal-product div.content h3{font: 30px 'RobotoFlexBold'; margin-bottom: 20px;}
#modal-product div.content div.description{margin-bottom: 20px;}
#modal-product div.content select, #jobs-menu-select{width: 100%; border-radius: 12px; border: 1px solid #99a4af; 
padding: 10px 15px; margin-bottom: 20px; color: #96908e; appearance: none; 
background: #fff url(../images/icons/chevron-down.svg) right 15px center no-repeat;}
#modal-product div.content div.bottom{margin-bottom: 20px;}
#modal-product div.warning{position: static; background: #f6d5d7; border-radius: 12px; margin-bottom: 20px;
padding: 10px;}
#modal-product div.text{font-size: 14px; line-height: 140%;}
#modal-product div.text h4{font-size: 18px; margin-bottom: 10px;}

/* Cart */
#container.cart{padding-bottom: 80px;}
#container.cart #header div.inner{max-width: 1200px;}
#container.cart #header ul.bottom{height: auto; justify-content: flex-end; flex-direction: row !important;
padding: 0 !important;}
#container.cart #footer{height: 80px; background: #3b261f;}
#container.cart #footer div.inner{padding: 10px; display: flex; justify-content: space-between; align-items: center;
height: 80px; max-width: 800px;}

#container.cart h1 a{width: 40px; height: 40px; background: url(../images/icons/prev.svg) no-repeat center; display: inline-block;
margin-right: 10px;}
#container.cart div.cart-wrapper{width: 790px; margin: 0 auto 60px auto; position: relative;}
#container.cart div.cart-wrapper a.logo{position: absolute; left: -260px; top: -160px;}
#container.cart div.cart-wrapper a.logo img{display: block; max-width: 100%;}

div.cart-products > div{display: flex; width: 100%; padding: 10px 10px 10px 0; border-bottom: 1px solid #3b261f2e; min-height: 130px;
align-items: center;}
div.cart-products div.image{margin-right: 20px; width: 90px;}
div.cart-products div.image img{display: block; max-width: 100%;}
div.cart-products div.data{flex-grow: 1; display: flex; flex-direction: column; gap: 8px;}
div.cart-products div.data div.name{font-family: 'RobotoFlexBold';}
div.cart-products div.data div.attribute{color: #96908e; font-size: 16px;}
div.cart-products div.total{width: 110px; margin: 0 20px; font-family: 'RobotoFlexBold';}
div.cart-products div.delete{display: flex; width: 16px;}
div.cart-products div.delete span.remove{width: 16px; height: 16px; cursor: pointer;
background: url(../images/icons/delete.svg) no-repeat;}
div.cart-products #gift-product div.quantity{background: none; justify-content: center;}

div.gifts-section{padding: 60px; display: flex; justify-content: center; background: #e7f2d4; flex-direction: column;
align-items: center; gap: 30px; margin-bottom: 60px;}
div.gifts-section div.title{font: 42px 'RobotoFlexBold';}
div.gifts-section div.subtitle{font: 30px 'RobotoFlexBold';}
div.gifts-section div.gifts{display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; max-width: 620px;}
div.gifts-section div.gifts > div{width: 300px; height: 85px; display: flex; align-items: flex-start; flex-direction: column;
justify-content: center; border: 2px solid #96908e; border-radius: 12px; padding: 20px; color: #96908e;}
div.gifts-section div.gifts > div.active{border-color: #a1bd70; cursor: pointer;}
div.gifts-section div.gifts > div.active.selected{background: #a1bd70;}
div.gifts-section div.gifts > div.active.selected p{color: #fff;}
div.gifts-section div.gifts > div > div{font-family: 'RobotoFlexBold';}
div.gifts-section div.gifts > div > p{font-size: 14px;}
div.gifts-section div.gifts > div.active > div{color: #3b261f;}
div.gifts-section form{display: flex; gap: 10px; align-items: center; flex-wrap: wrap; width: 400px;}
div.gifts-section form input{padding: 0 16px; border: 1px solid #99a4af; border-radius: 12px; height: 48px;}
div.gifts-section form div.message{color: #557125; width: 100%; text-align: center;}
div.gifts-section form div.message.fail{color: #90071f;}

div.additional{margin-bottom: 60px;}
div.additional div.subtitle{font: 30px 'RobotoFlexBold'; text-align: center; margin-bottom: 30px;}
div.additional .swiper, div.additional .swiper-arrows{width: 790px; margin: 0 auto;}
div.additional .swiper-arrows{position: relative;}
div.additional .swiper .swiper-slide{display: flex; flex-direction: column; width: 190px; height: 340px; align-items: center;}
div.additional .swiper .swiper-slide div.image{margin-bottom: 10px; display: block; overflow: hidden;}
div.additional .swiper .swiper-slide img{max-width: 100%; transition: all 0.8s ease;}
div.additional .swiper .swiper-slide:hover div.image img{transform: scale(1.1);}
div.additional .swiper .swiper-slide div.name{font-family: 'RobotoFlexBold'; text-align: center;}
div.additional .swiper .swiper-slide button{width: 133px; padding: 0; margin-top: auto;}
div.additional .swiper-button-prev, div.additional .swiper-button-next{width: 50px; height: 50px; cursor: pointer;
top: -200px;}
div.additional .swiper-button-prev::after, div.additional .swiper-button-next::after{content: '';}
div.additional .swiper-button-prev{background: url(../images/icons/prev-black.svg) center no-repeat; left: -70px;}
div.additional .swiper-button-next{background: url(../images/icons/next-black.svg) center no-repeat; right: -70px;}

#container.cart #footer{position: fixed; z-index: 90;}
#container:has(.inner.checkout){padding-bottom: 0 !important;}
#container:has(.inner.checkout) #footer{height: 160px; position: static;}
#container:has(.inner.checkout) #footer div.inner{max-width: 630px; padding: 20px 0; height: 160px;}
#container.cart #footer div.total{font: 24px 'RobotoFlexBold'; color: #a1bd70;}
#container.cart #footer .button{height: 60px; border-radius: 12px; padding: 0 65px 0 30px; color: #3b261f; 
font: 18px 'RobotoFlexBold'; background: #a1bd70 url(../images/icons/arrow-right.svg) right 32px center no-repeat; 
display: flex; align-items: center;}
#container.cart #footer .cart-totals{color: #fff; display: grid; grid-template-columns: 270px 80px; gap: 10px 30px;
font-size: 18px;}
#container.cart #footer .cart-totals div{font-family: 'RobotoFlexBold';}
#container.cart #footer .cart-totals .green{color: #a1bd70;}
#container.cart #footer .cart-totals .total{font-family: 'RobotoFlexBold'; color: #fff;}

/* Checkout */
#content div.inner.checkout, #container div.inner.checkout div.cart-wrapper{max-width: 630px; margin-bottom: 20px;}
div.checkout-form-block div.section{font: 24px 'RobotoFlexBold'; margin-bottom: 20px; text-align: center;}
div.checkout-form-block form > div.field{margin-bottom: 33px;}
div.checkout-form-block form > div.field input[type='text'], div.checkout-form-block form > div.field textarea,
div.checkout-form-block form > div.field input[type='email'], div.checkout-form-block form > div.field input[type='tel'],
div.checkout-form-block form > div.field textarea{border: 1px solid #99a4af; width: 100%; padding: 12px 16px;
border-radius: 12px; height: 48px;}
div.checkout-form-block form div.form-message{margin-bottom: 35px;}

#telergam-section{padding: 20px; margin-bottom: 35px; border-radius: 12px; background: #e7f2d4; display: flex;
flex-wrap: wrap; justify-content: space-between;}
#telergam-section div.title{width: 100%; margin-bottom: 20px; font-family: 'RobotoFlexBold';}
#telergam-section .button{background: #a1bd70 url(../images/icons/telegram-send.svg) right 20px center no-repeat;
width: 200px; padding-right: 45px; height: 48px !important;}
#telergam-section input[type='text']{width: 365px; border-radius: 12px; border: 1px solid #99a4af; padding: 0 16px;
height: 48px;}

div.checkout-form-block div.radio-field{margin-bottom: 20px;}
div.checkout-form-block div.radio-field > div{display: flex; justify-content: space-between; align-items: flex-start;
width: 100%;}
div.checkout-form-block div.radio-field input{display: none;}
div.checkout-form-block div.radio-field label{width: 48%; height: 85px; padding: 20px; border: 2px solid #a1bd70; 
border-radius: 12px; font-family: 'RobotoFlexBold'; display: flex; flex-direction: column; gap: 3px;
justify-content: center;}
div.checkout-form-block div.radio-field label span{color: #96908e; display: block; font: 14px 'RobotoFlex';}
div.checkout-form-block div.radio-field input:checked + label{background: #a1bd70}
div.checkout-form-block div.radio-field input:checked + label span{color: #fff;}

div.checkout-form-block #address-section{padding: 40px 20px; margin-bottom: 20px; border-radius: 12px; background: #e7f2d4;}
div.checkout-form-block #address-section div.fields{display: flex; justify-content: space-between; flex-wrap: wrap;
margin-bottom: 20px;}
div.checkout-form-block #address-section div.fields input, div.checkout-form-block #address-section select{
border-radius: 12px; border: 1px solid #99a4af; padding: 0 16px; height: 48px;}
div.checkout-form-block #address-section div.fields div:has(input.street){width: 70%; margin-bottom: 35x;}
div.checkout-form-block #address-section div.fields div:has(input.house){width: 28%; margin-bottom: 35px;}
div.checkout-form-block #address-section div.fields div:has(input.small){width: 32%;}
div.checkout-form-block #address-section div.fields input{width: 100%;}
div.checkout-form-block #address-section div.message{margin-bottom: 20px; color: #658430;}
div.checkout-form-block #address-section div.message.fail{color: #90071f;}
div.checkout-form-block #address-section div.message.fade{opacity: 0.3;}
div.checkout-form-block #address-section div.message.second{margin-top: -15px;}
div.checkout-form-block #address-section div.radio-field{display: flex; justify-content: space-between;}
div.checkout-form-block #address-section div.radio-field label{height: 60px;}
div.checkout-form-block #address-section > select{width: 100%; margin-bottom: 20px; appearance: none;
background: #fff url(../images/icons/chevron-down.svg) right 15px center no-repeat;}
div.checkout-form-block #select-date-time{display: flex; justify-content: space-between;}
div.checkout-form-block #select-date-time > *{width: 48%; height: 56px; border: 1px solid #99a4af; border-radius: 12px;
background: #fff; padding: 0 16px;}
div.checkout-form-block #select-date-time input[type='text']{background: #fff url(../images/icons/calendar.svg) right 18px center no-repeat;}
div.checkout-form-block #select-date-time select{appearance: none; color: #000; height: 56px;
background: #fff url(../images/icons/chevron-down.svg) right 15px center no-repeat;}
#checkout_form_payment > label{width: 100%; height: 60px;}
div.agree{display: flex; align-items: flex-start;}
div.agree input{margin-right: 8px; margin-top: 3px;}
div.agree a{color: #658430;}

/* Forms */
div.form-message{margin-bottom: 20px; padding: 20px 25px; font-size: 15px;}
div.form-message ul{margin: 0;}
div.form-message li{margin-bottom: 1px; list-style: none; background: none; padding: 0;}
div.form-message li:last-child{margin: 0;}
div.form-message.errors{background: #f9f3d7; color: #90071f;}
div.form-message.success{color: #658430; background: #e2fdb5;}

form.regular{max-width: 630px; margin: 0 auto;}
form.regular div.field{margin-bottom: 20px; width: 100%;}
form.regular div.field input{border-radius: 12px; border: 1px solid #99a4af; padding: 0 16px; height: 56px;
width: 100%;}
form.regular div.buttons{display: flex; justify-content: space-between; width: 100%;}
form.regular.customer div.field{margin-bottom: 37px;}
form.regular.customer div.field input{padding: 12px 16px; height: 48px;}
form.regular.customer div.form-message{margin-bottom: 35px;}

/* Content */
#content div.default-center a.logo{position: absolute; left: -360px; top: 0;}
#content div.default-center a.logo img{display: block; max-width: 100%;}
#content div.default-center.regular a.logo{left: -250px;}

/* Delivery page */
div.delivery-icons{display: flex; justify-content: space-between; margin-bottom: 40px; align-items: flex-start;}
div.delivery-icons > div{width: 32%; display: flex; flex-direction: column; align-items: center; gap: 10px;
justify-content: center;}
div.delivery-icons div div{font-family: 'RobotoFlexBold'; text-align: center;}
div.delivery-icons p{color: #96908e;  text-align: center;}

div.delivery-prices{margin-bottom: 80px; background: #e7f2d4; padding: 40px 0; border-radius: 12px;
display: flex; justify-content: space-between;}
div.delivery-prices > div{display: flex; flex-direction: column; align-items: center; padding: 0 10px;
width: 48%;}
div.delivery-prices div div{text-align: center;}
div.delivery-prices div div.title{font: 24px 'RobotoFlexBold'; margin-bottom: 10px;}
div.delivery-prices div div.price{color: #658430; margin-bottom: 10px; font: 42px 'RobotoFlexBold';}
div.delivery-prices div div.price span{font-size: 20px;}
div.delivery-prices div div.extra{padding-bottom: 10px; margin-bottom: 5px; 
background: url(../images/content/accent.svg) left bottom no-repeat;}
div.delivery-prices div div.text{font-size: 14px; color: #96908e;}
div.delivery-prices > div:nth-child(2) div.price{color: #4c8680;}

#map{height: 600px; background: #d9d9d9;}

/* Loyalty page */
div.delivery-icons > div span.circle{width: 80px; height: 80px; margin-bottom: 10px; background: #e7f2d4;
color: #a1bd70; font: 30px 'RobotoFlexBold'; border-radius: 40px; display: flex; align-items: center;
justify-content: center; transition: all 0.5s ease;}
div.delivery-icons > div span.circle:hover{transform: scale(1.2);}
div.top-text{font-family: 'RobotoFlexBold'; margin-bottom: 40px; text-align: center;}
div.text-notice{font-size: 14px; text-align: center; margin-bottom: 60px;}
div.text-notice span{color: #90071f;}
div.qr-code-area{padding: 40px 3%; background: #e7f2d4 url(../images/content/arrow.svg) top 150px right 170px no-repeat; 
border-radius: 12px; margin-bottom: 60px; display: flex; flex-direction: column; gap: 40px; align-items: center;}
div.qr-code-area div.title{color: #000; font: 42px/50px 'RobotoFlexBold'; text-align: center;}
div.qr-code-area div.title span{color: #658430;}
div.qr-code-area div.notice{font-size: 14px; text-align: center;}
div.qr-code-area div.notice span{color: #90071f;}
div.bonus-area{display: flex; flex-direction: column; align-items: center; gap: 40px; color: #fff;
padding: 80px 3%; background: url(../images/content/bonus-back.png); margin-bottom: 40px;}
div.bonus-area div.title, div.bonus-area h2{font: 42px 'RobotoFlexBold';}
div.bonus-area > p{line-height: 30px; text-align: center;}
div.bonus-area > p span{color: #a1bd70;}
div.bonus-area div.percents{display: flex; align-items: center; gap: 20px;}
div.bonus-area div.percents > div{width: 240px; display: flex; flex-direction: column; gap: 14px; align-items: center;}
div.bonus-area div.percents div div{color: #a1bd70; font-family: 'RobotoFlexBold'; text-align: center;}
div.bonus-area div.percents div span.circle{width: 80px;  height: 80px; border-radius: 50%; display: flex; justify-content: center;
align-items: center; font: 30px 'RobotoFlexBold'; background: #a1bd70; color: #3b261f; transition: all 0.5s ease;}
div.bonus-area div.percents div span.circle:hover{transform: scale(1.2);}
div.bonus-area div.percents div p{font-size: 14px; text-align: center;}

/* Jobs */
div.subheader{font: 24px 'RobotoFlexBold'; margin-bottom: 10px; text-align: center;}
div.subcontent{margin-bottom: 60px; text-align: center;}
#jobs-menu{display: flex; justify-content: center; gap: 10px; margin-bottom: 30px;}
#jobs-menu li{background: #e7f2d4; font-size: 16px;}
#jobs-menu li.active{background: #a1bd70;}
#jobs-name{text-align: center; margin-bottom: 10px; font: 24px 'RobotoFlexBold'; color: #658430;}
#jobs-contents{width: 520px; margin: 0 auto 30px auto;}
#jobs-contents > div h4{text-align: center;}
#job-request{margin: 0 auto 30px auto; background: #a1bd70 url(../images/icons/file.svg) left 24px center no-repeat;
padding-left: 58px;}
#jobs-menu-select{display: none;}

/* Modal window */
div.modal-window{padding: 50px; background: #fff; position: fixed; z-index: 110; width: 600px; top: 5%; display: none;
left: calc((100% - 600px) / 2); border-radius: 12px; max-height: 90vh; overflow-y: auto;}
div.modal-window span.close{width: 44px; height: 44px; cursor: pointer; background: url(../images/icons/close.svg) no-repeat center;
display: inline-block; position: absolute; right: 12px; top: 12px; transition: all 1s ease;}
div.modal-window span.close:hover{transform: rotate(360deg);}
div.modal-window div.title{margin-bottom: 20px; text-align: center; font: 30px 'RobotoFlexBold';}
div.modal-window div.info{margin-bottom: 20px; text-align: center;}
div.modal-window form{display: flex; flex-direction: column; gap: 20px; margin-bottom: 20px;}
div.modal-window input[type='text'], div.modal-window select{border-radius: 12px; border: 1px solid #99a4af; padding: 0 16px;
height: 56px;}
div.modal-window select{background: #fff url(../images/icons/chevron-down.svg) right 15px center no-repeat;
color: #96908e; appearance: none;}
div.modal-window div.telegram-confirm{display: flex; justify-content: space-between; background: #e7f2d4;
border-radius: 12px; padding: 20px; align-items: center;}
div.modal-window .telegram-confirm .button{width: 200px; padding-right: 53px;
background: #a1bd70 url(../images/icons/telegram-send.svg) right 22px center no-repeat;}
div.modal-window div.telegram-confirm input[type='text']{width: 240px;}
div.modal-window div.agree{display: flex; align-items: center; font-size: 14px; line-height: 140%;}
div.modal-window div.agree input{margin-right: 8px; margin-top: -1px;}
div.modal-window button.button.submit{margin: 0 auto; min-width: 240px;}

/* Order */
h1.small{font-size: 42px;}
div.pay-text{margin-bottom: 25px; font-weight: bold; font-size: 20px; text-align: center;}
div.order-complete a.button{margin: 0 auto 40px auto; width: 300px;}
div.order-complete ul.details{margin-bottom: 30px;}
div.order-complete ul.details li{margin-bottom: 7px;}
div.order-complete div.order-cart{width: auto; margin-bottom: 30px; font-size: 16px;}
div.order-complete div.order-cart > div{display: flex; padding: 20px 0; border-bottom: 2px solid #e7f2d4;}
div.order-complete div.order-cart > div > div{padding-right: 15px; padding-left: 15px; height: auto;}
div.order-complete div.order-cart > div:first-child{font: 16px 'RobotoFlexBold'; font-weight: 600; color: #3b261f;
padding: 16px 0; background: #e7f2d4;}
div.order-complete div.order-cart div.name{width: 50%;}
div.order-complete div.order-cart div.price{width: 12%; white-space: nowrap;}
div.order-complete div.order-cart div.number{width: 20%;}
div.order-complete div.order-cart div.total{width: 12%; white-space: nowrap;}
div.order-complete ul.order-totals li{margin-bottom: 8px; font-family: 'RobotoFlexBold';}

.autocomplete-suggestions{border: 1px solid #989e9d; background: #fff; overflow: auto;}
.autocomplete-suggestion{padding: 3px 5px; white-space: nowrap; overflow: hidden; cursor: pointer;}
.autocomplete-selected{background: #eef2f1;}
.autocomplete-suggestions strong{font-weight: normal; color: #de633c;}
.autocomplete-group{padding: 2px 5px;}
.autocomplete-group strong{display: block; border-bottom: 1px solid #000;}

div.order-success{text-align: center; margin-bottom: 30px; padding-top: 100px; 
background: url(../images/success.svg) top center no-repeat}
div.order-success.fail{background: none; padding: 0;}
div.order-success h1{margin-bottom: 40px;}
div.order-success p{margin-bottom: 15px;}
div.order-success a.button-simple{display: inline-block; padding: 11px 30px 10px 30px; text-transform: uppercase;
border: 2px solid #254940; color: #1f2524; margin-top: 25px;}

/* Customer section */
ul.customer-menu{display: flex; justify-content: center; gap: 3%; margin-bottom: 40px;}
ul.customer-menu li{list-style: none; font-family: 'RobotoFlexBold'; color: #658430;}
ul.customer-menu li a{color: #658430;}
ul.customer-menu li span{cursor: pointer;}
ul.customer-menu li.active a{color: #3b261f;}

div.my-orders{margin-bottom: 50px;}
div.my-orders > div{width: 100%; display: flex; justify-content: space-between; gap: 2.5%;}
div.my-orders div.titles{background: #e7f2d4; font: 16px 'RobotoFlexBold';}
div.my-orders div.order{flex-wrap: wrap; width: 100%; border-bottom: 1px solid #e7f2d4;}
div.my-orders div.titles > div, div.my-orders div.order > div{width: 18%; flex-grow: 0;
padding: 14px 2%;}
div.my-orders div div{text-align: left !important;}
div.my-orders div div.number, div.my-orders div div.cost{white-space: nowrap;}

div.my-orders div.number span{cursor: pointer; margin-left: 5px; font-size: 16px;}
div.my-orders div.number span:hover{color: #658430;}

div.my-orders div.order > div.cart{width: 100%; font-size: 16px; background: #eee;}
div.my-orders div.order > div.cart div.product{display: flex; margin-bottom: 10px;}
div.my-orders div.order > div.cart div.product:last-child{margin: 0;}
div.my-orders div.order > div.cart div.product div.name{margin-right: 20px; width: 30%;}
div.my-orders div.order > div.cart div.product div.total{white-space: nowrap;}

/* Pagination */
div.pagination{margin-bottom: 50px; display: flex; justify-content: center;}
div.pagination div.pages{display: flex;}
div.pagination div.pages a{width: 35px; height: 35px; display: flex; border-radius: 5px;
justify-content: center; align-items: center; color: #1f2524; transition: all ease 0.5s;}
div.pagination div.pages a.active, div.pagination div.pages a:hover{background: #658430; color: #fff;}
div.pagination div.pages a.prev{background: url(../images/icons/chevron-left-green.svg) no-repeat center;}
div.pagination div.pages a.next{background: url(../images/icons/chevron-right-green.svg) no-repeat center;}
div.pagination div.pages a.prev:hover, div.pagination div.pages a.next:hover{background-color: #eef2f1;}

/* Footer */
#footer div.inner{display: flex; padding: 130px 4% 0 4%; font-size: 14px;}
#footer div.inner div.title{color: #658430; margin-bottom: 25px; font: 24px 'RobotoFlexBold';}
#footer div.middle{margin: 0 3%;}
#footer ul.menu{display: grid; grid-column-gap: 50px; grid-template-columns: 1fr 1fr; grid-row-gap: 20px;}
#footer ul.menu a{color: #3b261f; border-bottom: 2px solid #8d9f60; padding-bottom: 4px;}
#footer ul.menu a.hvr-underline-from-center::before{bottom: -2px;}
#footer ul.addresses{width: 240px;}
#footer ul.addresses li{margin-bottom: 20px; padding-left: 21px; transition: all 0.3s ease;
background: url(../images/icons/map-pin.svg) top 2px left no-repeat;}
#footer ul.addresses li:hover{background-position-y: -1px;}

div.socials{height: 40px; display: flex; gap: 20px; margin-bottom: auto;}
div.socials a{height: 40px; width: 40px; transition: all 0.3s ease; position: relative;}
div.socials a:hover{margin-top: -5px;}
div.socials a.telegram{background: url(../images/icons/telegram.svg) no-repeat;}
div.socials a.vk{background: url(../images/icons/vk.svg) no-repeat;}
div.socials a.instagram{background: url(../images/icons/instagram.svg) no-repeat;}

#footer div.last{display: flex; flex-direction: column; justify-content: flex-end; padding-top: 56px; align-items: flex-end;
padding-bottom: 15px; margin-left: auto;}
#footer div.last p.copyright{margin-bottom: 14px;}
#footer div.last a.author{color: #658430; border-bottom: 1px solid #658430;}

/* Cookie alert */
#cookie-alert{position: fixed; width: 750px; background: #eef2f1; border: 1px solid #254940; z-index: 5;
border-radius: 10px; padding: 20px 40px; bottom: 30px; left: calc((100% - 750px) / 2); display: flex;
justify-content: space-between; align-items: center;}
#cookie-alert p{margin-right: 30px;}
#cookie-alert span.agree{cursor: pointer; padding: 10px 20px; color: #fff; border-radius: 6px;
background: #254940; transition: all ease 0.5s;}
#cookie-alert span.agree:hover{background: #22423a;}

/* Animations */
/* ----------------------------------------------
 * Generated by Animista on 2024-4-29 13:53:34
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-elliptic-top-fwd
 * ----------------------------------------
 */
 @-webkit-keyframes slide-in-elliptic-top-fwd {
    0% {
      -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
              transform: translateY(-600px) rotateX(-30deg) scale(0);
      -webkit-transform-origin: 50% 100%;
              transform-origin: 50% 100%;
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0) rotateX(0) scale(1);
              transform: translateY(0) rotateX(0) scale(1);
      -webkit-transform-origin: 50% 1400px;
              transform-origin: 50% 1400px;
      opacity: 1;
    }
  }
  @keyframes slide-in-elliptic-top-fwd {
    0% {
      -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
              transform: translateY(-600px) rotateX(-30deg) scale(0);
      -webkit-transform-origin: 50% 100%;
              transform-origin: 50% 100%;
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0) rotateX(0) scale(1);
              transform: translateY(0) rotateX(0) scale(1);
      -webkit-transform-origin: 50% 1400px;
              transform-origin: 50% 1400px;
      opacity: 1;
    }
  }
   
.slide-in-elliptic-top-fwd {
	-webkit-animation: slide-in-elliptic-top-fwd 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-elliptic-top-fwd 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/**
 * ----------------------------------------
 * animation bounce-top
 * ----------------------------------------
 */
 @-webkit-keyframes bounce-top {
    0% {
      -webkit-transform: translateY(-45px);
              transform: translateY(-45px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
      opacity: 1;
    }
    24% {
      opacity: 1;
    }
    40% {
      -webkit-transform: translateY(-24px);
              transform: translateY(-24px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    65% {
      -webkit-transform: translateY(-12px);
              transform: translateY(-12px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    82% {
      -webkit-transform: translateY(-6px);
              transform: translateY(-6px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    93% {
      -webkit-transform: translateY(-4px);
              transform: translateY(-4px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    25%,
    55%,
    75%,
    87% {
      -webkit-transform: translateY(0px);
              transform: translateY(0px);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    100% {
      -webkit-transform: translateY(0px);
              transform: translateY(0px);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
      opacity: 1;
    }
  }
  @keyframes bounce-top {
    0% {
      -webkit-transform: translateY(-45px);
              transform: translateY(-45px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
      opacity: 1;
    }
    24% {
      opacity: 1;
    }
    40% {
      -webkit-transform: translateY(-24px);
              transform: translateY(-24px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    65% {
      -webkit-transform: translateY(-12px);
              transform: translateY(-12px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    82% {
      -webkit-transform: translateY(-6px);
              transform: translateY(-6px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    93% {
      -webkit-transform: translateY(-4px);
              transform: translateY(-4px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    25%,
    55%,
    75%,
    87% {
      -webkit-transform: translateY(0px);
              transform: translateY(0px);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    100% {
      -webkit-transform: translateY(0px);
              transform: translateY(0px);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
      opacity: 1;
    }
  }

.bounce-top {
	-webkit-animation: bounce-top 0.9s both;
	        animation: bounce-top 0.9s both;
}

/**
 * ----------------------------------------
 * animation rotate-center
 * ----------------------------------------
 */
 @-webkit-keyframes rotate-center {
        0% {
          -webkit-transform: rotate(0);
                  transform: rotate(0);
        }
        100% {
          -webkit-transform: rotate(360deg);
                  transform: rotate(360deg);
        }
      }
      @keyframes rotate-center {
        0% {
          -webkit-transform: rotate(0);
                  transform: rotate(0);
        }
        100% {
          -webkit-transform: rotate(360deg);
                  transform: rotate(360deg);
        }
      }
      

.rotate-center {
	-webkit-animation: rotate-center 0.6s ease-in-out both;
	        animation: rotate-center 0.6s ease-in-out both;
}