@media all and (max-width: 1630px) 
{
    #header div.top div.inner{padding-right: 15px;}
    #header ul.bottom{padding: 0 15px;}
    #index-banner{margin: 0 15px 100px 15px;}
    div.inner{margin: 0 15px;}
    #footer div.inner{margin: 0 auto;}

    #content div.default-center a.logo{width: 15%; left: -18%;}
    #content div.default-center.editable a.logo{left: -18% !important;}
    div.default-center.regular{width: 70%; max-width: none;}

    div.catalog div.products{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 65px 10px;}
    div.catalog div.product{width: auto; height: auto; margin: 0;}
    div.catalog div.product div.bottom{padding-top: 15px;}
    div.catalog div.product div.warning{top: 63px;}
    div.catalog div.product div.description{height: auto;}
    div.catalog div.product.empty{display: none;}

    #content div.inner.checkout{margin: 0 auto 20px auto;}

    #footer{background-position: top right;}
    #container:has(.inner.checkout) #footer div.inner{margin: 0 auto;}
}

@media all and (max-width: 1500px) 
{
    #header div.categories-menu{width: calc(100% - 200px);}
    #header div.top div.icons{justify-content: flex-end; width: 200px;}
    #index-banner{margin-bottom: 60px;}
    #index-banner a.logo, #content div.default-center a.logo{width: 12%;}
    #index-banner div.swiper{margin-left: 25px; width: 80%; margin: 0 30px 0 60px;}
    #index-banner .swiper-slide img{width: calc(100%  - 130px); margin: 0 auto;}
}

@media all and (max-width: 1350px) 
{
    div.catalog div.products{grid-template-columns: 1fr 1fr 1fr;}

    body:has(div.cart-wrapper){padding-top: 0;}
    body:has(div.cart-wrapper) #header{height: 210px;}
    body:has(div.cart-wrapper) #header div.inner{margin: 0 25px; max-width: none !important; padding-top: 50px;}

    #container.cart div.cart-wrapper{position: static;}
    #container.cart div.cart-wrapper a.logo{width: 60px; top: 10px; left: 25px;}
    #content div.default-center a.logo{left: -12%;}
    #content.cart-page{margin-top: -70px;}
}

@media all and (max-width: 1200px)
{ 
    div.bonus-area div.percents{flex-wrap: wrap; justify-content: center; gap: 20px 30px;}
}

@media all and (max-width: 1050px) 
{
    #modal-product{width: calc(100% - 200px); left: 100px;}
    #modal-product div.image{width: 48%;}
    #modal-product div.image img{display: block; max-width: 100%;}
    #modal-product div.content{width: 48%;}

    #footer div.inner{padding-left: 0; padding-right: 0;}

    div.default-center.customer-orders{margin: 0; max-width: none; width: 100% !important;}
}

@media all and (max-width: 1000px) 
{
    h1{font-size: 24px !important; line-height: 28px !important; margin-bottom: 30px !important;}
    h1:has(a){display: flex; justify-content: center; align-items: center;}
    #container.cart h1 a{width: 30px; height: 30px; background-size: 120%; margin-right: 5px;}
    
    #content div.default-center{width: 560px;}
    #content div.default-center a.logo{width: 85px; left: -16%; top: -40px}
    div.delivery-icons div div, div.delivery-icons div p{font-size: 14px;}
    div.text-notice{margin-bottom: 40px;}
    div.qr-code-area{background-position: top 100px right 80px;}
    div.qr-code-area div.title, div.bonus-area div.title{font-size: 24px; line-height: 28px;}
    div.bonus-area > p{font-size: 14px;}

    div.delivery-prices{flex-direction: column; gap: 40px; margin-bottom: 40px;}
    div.delivery-prices > div{width: 100%;}

    #content div.inner.checkout{margin-top: -70px; font-size: 14px;}
    #telergam-section button{font-size: 14px; width: 175px;}
    #telergam-section input[type='text']{width: calc(100% - 190px)}
    div.checkout-form-block div.radio-field label{height: 75px; padding: 15px 20px;}
    div.checkout-form-block #address-section div.radio-field label{height: 50px;}
    div.checkout-form-block #select-date-time > *{height: 50px;}
    div.checkout-form-block #address-section div.fields input{height: 48px;}
}

@media all and (max-width: 930px) 
{
    .button, div.quantity{height: 40px; font-size: 14px;}
    .button.last{font-size: 18px; text-align: center; height: auto; padding: 10px 20px;}
    #job-request{font-size: 18px; height: 48px;}
    div.quantity{width: 120px;}
    div.bottom div.button.to-cart{width: 120px;}
    div.catalog div.product div.name{font-size: 14px;}
    div.bottom div.price{font-size: 14px;}
    div.catalog div.product select{font-size: 14px; padding: 8px 15px;}
    div.warning{font-size: 12px;}

    #container.cart div.cart-wrapper{width: auto; margin: 0 0 40px 0;}
    div.cart-products div.data, div.cart-products div.total{font-size: 14px;}
    div.gifts-section form{max-width: 400px; width: auto;}
    div.gifts-section form input{height: 40px;}

    div.additional .swiper, div.additional .swiper-arrows{width: calc(100% - 100px);}
    div.additional .swiper-button-prev, div.additional .swiper-button-next{width: 40px; height: 40px; top: -150px;}
    div.additional .swiper-button-prev{left: -50px;}
    div.additional .swiper-button-next{right: -50px;}
    div.additional .swiper .swiper-slide{width: 160px; height: 295px;}
    div.additional .swiper .swiper-slide div.name{font-size: 14px;}

    #container{padding-bottom: 500px;}
    #footer{height: 500px; background-size: contain;}
    #footer div.inner{flex-wrap: wrap; justify-content: space-between; padding-top: 80px;}
    #footer div.last{width: 100%; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; padding: 15px 0 30px 0;}
    #footer div.last p.copyright{display: inline; margin: 0 20px 0 0;}
    #footer div.last div.socials{width: 100%; margin-bottom: 30px;}
}

@media all and (max-width: 900px) 
{
    #header ul.bottom li:nth-child(5), #header ul.bottom li:nth-child(4){display: none;}
    
    #jobs-contents > div.editable h4{font-size: 18px; line-height: 140%; margin-bottom: 10px;}
}

@media all and (max-width: 800px) 
{
    body{padding-top: 45px;}
    #header div.top{height: 45px;}
    #header div.top ul.categories li a{font-size: 14px;}
    #content div.default-center.editable a.logo{top: -50px; left: -20% !important;}

    div.catalog div.title{font-size: 24px; margin-bottom: 20px;}

    #modal-product{width: 100%; height: 100%; left: 0; top: 0; overflow-y: auto;
    padding: 20px 50px;}
    #modal-product div.content div.name{font-size: 18px;}
    #modal-product div.content div.description{font-size: 14px;}
    #modal-product div.content select{font-size: 14px;}
    #modal-product div.text h3{font-size: 14px;}
    #modal-product span.navigation{width: 40px; height: 40px; bottom: calc(50% - 20px);}
    #modal-product span.navigation.prev{left: 0;}
    #modal-product span.navigation.next{right: 0;}

    div.gifts-section{padding: 40px 15px; gap: 20px; margin-bottom: 40px;}
    div.gifts-section div.title{font-size: 24px; line-height: 28px;}
    div.gifts-section div.gifts > div{font-size: 14px; height: 75px; padding: 1px 20px;}
    div.gifts-section div.subtitle{font-size: 18px;}
    div.gifts-section form input{font-size: 14px;}

    div.additional{margin-bottom: 40px;}
    div.additional div.subtitle{font-size: 18px; margin-bottom: 20px;}
}

@media all and (max-width: 758px)
{
    #content div.default-center a.logo{display: none;}
    #mobile-footer{display: flex;}

    div.catalog div.products{display: flex; flex-direction: column; gap: 30px;}
    div.catalog div.product{display: block; padding: 0;}
    div.catalog div.product > div.image{width: 25%; float: left; margin: 0 0 10px 0;}
    div.catalog div.product div.name, div.catalog div.product div.description{width: 70%; margin: 0 0 10px 0;
    float: right; height: auto;}
    div.catalog div.product select{width: 100%; margin: 0 0 10px 0; clear: both;}
    div.catalog div.product div.bottom{padding: 0; clear: both; margin: 0;}
    div.bottom div.button.to-cart, div.quantity{width: 160px;}
    div.quantity{padding: 0 25px;}
    div.catalog div.product div.warning{position: static; margin-top: 10px;}
}

@media all and (max-width: 700px) 
{
    #container{padding-bottom: 0;}
    #footer{height: auto; position: relative; padding-bottom: 65px;}
    #footer{background-size: auto 110px;}
    #footer div.inner{flex-direction: column; justify-content: flex-start; gap: 40px; align-items: center;}
    #container.cart #footer div.inner{flex-direction: row; padding: 10px 0;}
    #footer div.inner div.title{text-align: center; margin-bottom: 20px;}
    #footer ul.menu{display: flex; flex-direction: column; align-items: center;}
    #footer div.middle{margin: 0;}
    #footer ul.addresses{width: auto; display: flex; flex-direction: column; align-items: center;}
    #footer div.last{padding: 0; justify-content: center;}
    #footer div.last div.socials{justify-content: center;}
    #footer div.last p.copyright{margin-right: auto;}
    #footer div.last a.author{margin-left: auto;}
}

@media all and (max-width: 650px) 
{
    #modal-product div.image{width: 30%;}
    #modal-product div.content{width: 65%;}

    div.cart-products > div{flex-wrap: wrap; justify-content: space-between;}
    div.cart-products div.image{margin-bottom: 10px;}
    div.cart-products div.data{width: calc(100% - 110px); margin-bottom: 10px;}
    div.cart-products div.quantity{width: 120px; padding: 0;}
    div.cart-products > div.extra div.image{display: none;}

    #content div.inner.checkout{margin: -70px 15px 20px 15px;}

    #container:has(.inner.checkout){padding-bottom: 220px;}
    #container:has(.inner.checkout) #footer{height: 220px;}
    #container:has(.inner.checkout) #footer div.inner{margin: 0 15px; display: flex; flex-direction: column;
    height: auto; align-items: center; gap: 14px; padding: 20px 0 0 0;}
}

@media all and (max-width: 600px) 
{
    #header{display: flex; flex-direction: column;}
    #header div.top div.inner{padding: 0;}
    #header div.categories-menu{width: 100%;}
    #header div.top div.icons{display: none;}
    #header ul.bottom{padding: 0 3% 0 100px; flex-direction: column; height: auto; gap: 15px;
    align-items: flex-start; align-self: flex-start; height: 210px; justify-content: center;}
    #content div.default-center a.logo{display: none;}
    #header > ul.bottom{display: none;}
    #container:has(#index-banner) #header > ul.bottom{display: flex; height: 210px; margin-bottom: 10px;}
    div.breadcrumbs{padding: 5px 0 10px 0;}
    div.default-center.regular{width: 100%;}
    div.default-center.regular{font-size: 16px;}

    #index-banner a.logo{position: absolute; top: 10px; margin: 0; width: 60px;}
    #index-banner div.swiper{width: 100%; margin: 0; display: flex; flex-direction: column;}
    #index-banner .swiper-wrapper{margin-bottom: 25px;}
    #index-banner .swiper-arrows{display: none;}
    #index-banner .swiper-slide img{width: 100%;}
    #index-banner .swiper-pagination{justify-content: center;}

    div.modal-window{width: 100%; height: 100%; overflow-y: auto; left: 0; top: 0; padding: 40px 3% 20px 3%;
    border-radius: 0;}
    div.modal-window div.title{font-size: 18px; margin-bottom: 15px;}
    div.modal-window div.info{font-size: 16px;}
    div.modal-window div.telegram-confirm{flex-direction: column; justify-content: center; gap: 20px;}
    div.modal-window div.agree{align-items: flex-start;}
    div.modal-window div.agree input{margin-top: 0;}
    div.modal-window input[type="text"], div.modal-window select{font-size: 16px; height: 50px;}

    #container.cart #footer{height: 70px;}
    #container.cart #footer div.inner{height: 70px; flex-wrap: nowrap;}
    #container.cart #footer div.total{font-size: 18px;}
    #container.cart #footer .button{width: 205px; background-position: right 10px center; padding: 0 35px 0 10px;
    height: 50px;}

    div.additional .swiper, div.additional .swiper-arrows{width: auto; margin: 0 15px;}
    div.additional .swiper-button-prev{left: -15px; border-radius: 50%; top: -190px;}
    div.additional .swiper-button-next{right: -15px; border-radius: 50%; top: -190px;}

    div.bonus-area{padding: 80px 15px; gap: 30px;}
    div.bonus-area div.percents > div{width: 45%;}
    div.bonus-area div.text{text-align: center;}

    #content div.default-center{width: auto;}
    div.delivery-icons{flex-wrap: wrap; justify-content: center; gap: 20px;}
    div.delivery-icons > div{width: 180px;}
    div.qr-code-area{background-image: none;}

    #jobs-contents{margin: 0 0 30px 0; width: auto;}
    #jobs-menu{display: none;}
    #jobs-menu-select{display: block; margin-bottom: 15px;}

    div.order-complete div.order-cart > div{flex-wrap: wrap;}
    div.order-complete div.order-cart > div div{width: 33.33% !important;}
    div.order-complete div.order-cart div.name{width: 100% !important; margin-bottom: 13px;
    font-weight: bold;}

    ul.customer-menu{gap: 5%; margin-bottom: 30px;}
    div.my-orders div.titles > div, div.my-orders div.order > div{width: 31.5%;}
    div.my-orders div.delivery, div.my-orders div.payment{display: none;}
    div.my-orders div.titles > div, div.my-orders div.order > div{padding: 12px 3.5%;}
    div.my-orders div.order > div.cart{font-size: 15px;}
    div.my-orders div.order > div.cart div.product{margin-bottom: 7px;}
    div.my-orders div.order > div.cart div.product div.name{width: 80%;}
}

@media all and (max-width: 450px) 
{
    #modal-product div.wrapper{flex-direction: column; justify-content: flex-start; gap: 20px; align-items: center;}
    #modal-product div.image{width: 150px;}
    #modal-product div.content{width: 100%; padding: 0;}
    div.bottom div.button.to-cart, div.quantity{width: 130px;}

    div.gifts-section div.gifts > div{width: 100%;}
    #telergam-section{flex-direction: column; padding: 20px 12px;}
    #telergam-section button{margin-bottom: 20px;}
    #telergam-section input[type="text"]{width: 100%;}

    div.checkout-form-block div.radio-field input:checked + label{width: 49%;}
    div.checkout-form-block div.radio-field label{height: 95px;}
    div.checkout-form-block #address-section input.street{width: 66%;}
    div.checkout-form-block #address-section input.house{width: 32%;}
    div.checkout-form-block #address-section div.radio-field label{height: 70px; font-family: 'RobotoFlex';}
    div.checkout-form-block #select-date-time select{width: 49%; font-weight: bold; background-position: right 4px center;
    padding: 0 10px;}
    #container:has(.inner.checkout) #footer div.inner > *{width: 100%;}
    #container.cart #footer .cart-totals{grid-template-columns: 3fr 1fr;}

    div.delivery-icons{flex-direction: column; align-items: center;}
    .button.last{margin: 0 15px 40px 15px;}
    div.gifts-section form{width: 100%; justify-content: space-between;}
    div.gifts-section form input{width: 67%;}
    div.gifts-section form .button{width: 30%;}

    div.my-orders div div.number{white-space: wrap; display: flex; flex-direction: column;}
    div.my-orders div.number span{margin: 0; font-size: 14px;}
}