@media all and (max-width: 1630px) 
{
    div.inner{margin-left: 15px; margin-right: 15px;}
    #header{display: flex; align-items: center;}
    #header div.inner{width: 100%; padding: 0;}
    #header div.inner div.left{align-items: center;}
    #header div.inner a.logo{height: 58px;}
    #header div.inner a.logo img{height: 100%;}
    #header div.inner div.left section{background: #fff; height: 54px;}
    #header div.inner div.left section:last-child{border-top-right-radius: 4px; border-bottom-right-radius: 4px;
    padding-right: 10px;}
    #header div.inner div.left section div.title{font-size: 14px;}

    #main-banner > div.text h1{font-size: 65px; line-height: 65px;}
    #main-banner > div.text p{font-size: 27px;}

    div.catalog div.products{grid-column-gap: 1.3333%;}
    div.catalog div.product{width: 100%; margin-bottom: 20px;}
    
    #content{padding-bottom: 40px;}
    #content.index{padding-bottom: 20px;}
    #content.cart-page{padding-bottom: 40px;}

    #content div.inner.checkout{margin-left: auto; margin-right: auto;}

    div.buy-sertificate div.inside{background-size: 30%;}
}

@media all and (max-width: 1500px) 
{
    #main-banner > div.text{padding-top: 15.5%; padding-left: 6%;}
    #main-banner > div.text h1{font-size: 46px; line-height: 46px; margin-bottom: 20px;}
    #main-banner > div.text p{font-size: 20px; margin-bottom: 20px;}

    #main-video{display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
    height: auto;}
    #main-video div.breadcrumbs{margin-bottom: 5%;}
    #main-video div.video-text{padding: 0;}
}

@media all and (max-width: 1350px) 
{
    #main-banner > div.text a.delivery, .button{height: 44px; font-size: 16px; font-weight: 700;}
    #apply-promo-code{height: 48px;}
    #main-banner > div.text a.delivery{width: 225px; padding-left: 54px; background-position-x: 20px;}

    #mobile-menu{padding: 0 0 20px 0; overflow-y: auto;}
    #mobile-menu div.wrapper{padding: 120px 17.5% 0 100px;}
    span.mobile-menu-close{right: 30px; top: 30px;}
    #mobile-menu div.wrapper ul.menu li a{font-size: 30px; line-height: 42px;}

    div.catalog{padding-top: 40px;}
    div.catalog div.title, div.catalog h1, div.catalog h2{font-size: 26px; line-height: 32px; margin-bottom: 15px;}
    div.catalog div.products{grid-template-columns: repeat(3, 32.8%); grid-column-gap: 1%;}
    div.catalog div.product{max-width: 385px;}

    #footer div.columns{background-size: 160px auto; padding-left: 22%;}
}

@media all and (max-width: 1200px)
{
    div.breadcrumbs{padding-top: 20px;}
    div.socials{gap: 10px;}
    #footer div.columns div.title{font-size: 16px;}
    #footer li{font-size: 14px;}
    #footer div.columns div.buttons button{width: 220px; font-size: 16px; height: 48px;}

    #header{height: 80px;}
    div.main-menu{height: 44px;}
    div.main-menu ul.categories li a{font-size: 14px; line-height: 14px;}
    div.main-menu div.icons #cart-total{font-size: 14px;}
}

@media all and (max-width: 1050px)
{
    #main-banner .swiper-arrows{display: none;}

    div.catalog div.product{height: 514px;}
    div.catalog div.product div.name{font-size: 16px; line-height: 22px;}
    div.catalog div.product div.description{font-size: 14px; line-height: 19px;}
    div.catalog div.product select{height: 36px; font-size: 14px; padding: 0 15px; width: calc(100% - 20px);}
    div.catalog div.product > *{margin-left: 10px; margin-right: 10px;}
    div.catalog div.product div.quantity{height: 44px;}
    div.bottom div.price{font-size: 16px; line-height: 22px;}
    div.bottom div.price span{font-size: 14px;}

    #modal-product{width: calc(100% - 200px); left: 100px;}
    #modal-product div.image{width: 48%;}
    #modal-product div.wrapper div.image img{max-width: 100%;}
    #modal-product div.content{width: 48%;}
    #modal-product div.content div.name, #modal-product div.content h3{font-size: 22px; line-height: 28px;}

    h1{font-size: 26px; line-height: 32px;}
    .editable h2{font-size: 26px; line-height: 32px;}
    #container.cart h1 a{width: 20px; height: 20px;}
    #container.cart #footer div.total{font-size: 18px; font-weight: 700;}
    #container.cart #footer .cart-totals .total{font-size: 26px; font-weight: 900;}

    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,
    div.checkout-form-block #address-section div.fields input, 
    div.checkout-form-block #address-section select,
    div.checkout-form-block #select-date-time > *,
    form.regular.customer div.field input{height: 48px;}

    form input + label.hint{transform: translate(0, -2.15rem)}
    form input:focus + label.hint, form input:not(:placeholder-shown) + label.hint{transform: translate(0, -4.5rem)}

    #main-video{margin-bottom: 40px;}
    #main-video div.breadcrumbs{margin-bottom: 7%;}
    #main-video div.video-text{width: 450px; left: calc((100% - 450px) / 2); top: 35%;}
    #main-video div.video-text h1{font-size: 30px; line-height: 30px; margin-bottom: 21px;}
    #main-video div.video-text h1 br{display: none;}
    #main-video div.video-text p{margin-bottom: 30px;}
    #main-video div.video-text button{height: 44px; font-size: 16px;}

    div.bonus-area{width: auto; margin-bottom: 40px; padding: 0 15px;}
    div.bonus-area h2{font-size: 26px; line-height: 32px;}
    div.bonus-area div.text{margin-bottom: 30px;}
    div.bonus-area div.icons > div{gap: 11px; width: 23%;}
    div.bonus-area div.icons > div > div.name, div.bonus-area div.icons > div p{font-size: 16px; line-height: 22px;}

    div.buy-sertificate{background-image: none;}
    div.buy-sertificate div.inside{background-size: 300px 220px;}
}

@media all and (max-width: 950px)
{
    div.catalog div.product{height: 430px;}

    #container{padding-bottom: 430px;}
    #footer{height: 430px;}
    #footer div.inner{padding-bottom: 20px;}
    #footer div.columns{padding: 85px 0 0 0;}
    #footer ul.bottom{flex-wrap: wrap; gap: 0;}
    #footer ul.bottom li{margin-right: 25px;}
    #footer ul.bottom li:last-child{width: 100%; margin-top: 13px;}

    #container.cart div.cart-wrapper{width: 100%;}
    div.cart-products div.data *, div.cart-products div.total{font-size: 16px !important;
    line-height: 22px !important;}

    div.buy-sertificate{height: auto; padding: 60px 15px 0 15px;}
    div.buy-sertificate div.inside{background-position: bottom center; padding: 0 0 230px 0;
    flex-direction: column; align-items: center; display: flex;}
    div.buy-sertificate div.inside div.title{text-align: center; font-size: 26px; line-height: 32px;
    margin-bottom: 20px;}
    div.buy-sertificate div.inside p{text-align: center;}
    div.buy-sertificate div.inside button{height: 44px; font-size: 16px;}

    div.location{margin: 0 15px 30px 15px; padding-top: 40px;}
    div.location button{height: 44px; font-size: 16px;}
    div.location div.title{font-size: 26px; line-height: 32px;}
    div.location p{margin-bottom: 25px;}
}

@media all and (max-width: 900px)
{ 
    #header div.inner div.left section:last-child{display: none;}
    #header div.inner div.right button.login{display: none;}
    #header div.inner div.left section{border-top-right-radius: 4px; border-bottom-right-radius: 4px;
    padding-right: 10px;}
    #mobile-menu-button{width: 40px; height: 40px; background: url(../images/icons/menu-mobile.svg) center no-repeat;
    margin-right: 5px;}
    #main-banner > div.text{padding-top: 18.5%; padding-left: 15px;}
    #main-banner > div.text h1{font-size: 30px; line-height: 30px; margin-bottom: 15px;}
    #main-banner > div.text p{font-size: 16px; margin-bottom: 12px; line-height: 22px;}

    #mobile-menu div.wrapper{padding: 100px 11% 0 80px;}
}

@media all and (max-width: 830px)
{
    div.catalog div.product{height: 445px;}
    div.catalog div.product div.name{font-size: 14px; line-height: 19px;}
    div.bottom div.button.to-cart{width: 100px; font-size: 14px;}
    div.catalog div.product div.quantity{width: 105px;}
    div.catalog div.quantity span.plus, div.catalog div.quantity span.minus{
    width: 25px;}

    div.delivery-icons div div, div.delivery-icons p{font-size: 16px; line-height: 22px;}
    div.delivery-icons + h2{font-size: 26px; line-height: 32px; margin-bottom: 30px;}
    div.delivery-prices{margin-bottom: 40px;}
    div.delivery-prices div div.price{font-size: 26px;}
    div.delivery-prices div div.extra{font-size: 16px;}
}

@media all and (max-width: 800px)
{
    span.mobile-menu-close{width: 30px; height: 30px; top: 20px; right: 20px; background-size: contain;}
    #mobile-menu div.wrapper{padding: 80px 5% 30px 30px}
    #mobile-menu div.wrapper ul.menu li{margin-bottom: 20px;}
    #mobile-menu div.wrapper ul.menu li a{font-size: 18px; line-height: 25px;}

    div.main-menu div.inner{margin: 0;}
    div.main-menu div.categories-menu{width: calc(100% - 150px);}
    div.main-menu div.categories-menu > span{flex-shrink: 0;}
    div.main-menu div.icons{width: 135px;}

    #modal-product{width: 100%; height: 100%; left: 0; top: 0; overflow-y: auto; padding: 30px 45px;}
    #modal-product span.navigation{bottom: calc(50% - 20px); width: 40px; height: 40px; background-size: contain;}
    #modal-product span.navigation.prev{left: 0;}
    #modal-product span.navigation.next{right: 0;}

    div.gifts-section{margin-bottom: 45px;}
    div.gifts-section div.title{font-size: 26px;}
    div.gifts-section div.gifts > div{height: 70px};
    div.gifts-section div.gifts > div > div{font-size: 16px;}
    div.gifts-section div.gifts > div > p{font-size: 14px;}
    div.gifts-section div.subtitle{font-size: 16px;}

    div.additional div.subtitle{font-size: 26px;}
    div.additional .swiper{width: 100%;}
    div.additional .swiper-arrows{display: none;}
    div.additional .swiper .swiper-slide{width: 160px; height: 243px;}
    div.additional .swiper .swiper-slide div.name{font-size: 14px; line-height: 16px;}
    div.additional .swiper .swiper-slide button{width: 100px; height: 35px; font-size: 15px;}

    div.photo-gallery{grid-template-columns: 1fr 1fr;}
}

@media all and (max-width: 730px) 
{
    #main-banner > div.text{padding-top: 20%;}

    div.catalog div.products{display: block;}
    div.catalog div.product{width: 100%; height: auto; max-width: none; flex-direction: row; flex-wrap: wrap;
    justify-content: space-between; padding-bottom: 10px;}
    div.catalog div.product > div.image{width: 90px; border-radius: 4px; margin: 10px 10px 12px 10px;}
    div.catalog div.product > div.texts{width: calc(100% - 115px); margin: 10px 0 12px 0;}
    div.catalog div.product div.name{height: auto; margin-bottom: 8px;}
    div.catalog div.product div.description{height: auto; margin: 0;}
    div.catalog div.product div.bottom{width: 100%;}
}

@media all and (max-width: 650px) 
{
    #header div.inner div.left section{display: none;}
    #main-banner{flex-direction: column; margin: 0 0 10px 0; gap: 20px;}
    #main-banner > div.text{padding-top: 20px; width: 100%;}
    #main-banner div.banner{width: 100%;}

    #mobile-menu div.wrapper{flex-direction: column; gap: 30px; padding-left: 30px; padding-right: 30px;}

    #container{padding-bottom: 0;}
    #footer{height: auto; position: relative;}
    #footer div.columns{background-position: top center; flex-direction: column; align-items: center;
    gap: 30px; margin-bottom: 30px;}
    #footer div.columns div.title, #footer li{text-align: center;}
    #footer div.columns ul.menu{align-items: center;}
    #footer div.socials{justify-content: center;}
    #footer ul.bottom{flex-direction: column; gap: 20px;}
    #footer ul.bottom li{text-align: center; margin: 0 !important; padding: 0 !important;}

    div.cart-products > div{flex-wrap: wrap; justify-content: flex-end;}
    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{margin-right: auto;}
    div.cart-products div.total{margin: 0 10px;}
    div.cart-products div.extra div.image{display: none;}

    #content{padding-bottom: 20px;}
    #content div.inner.checkout{margin-left: 15px; margin-right: 15px;}
    #telergam-section .button{margin-bottom: 20px;}
    #telergam-section input[type="text"]{width: 100%;}
    div.checkout-form-block div.radio-field > div{align-items: stretch;}
    div.checkout-form-block div.radio-field label{height: auto !important; padding: 18px 10px; 
    justify-content: flex-start;}
    div.checkout-form-block #address-section div.radio-field label{justify-content: center;}
    #container:has(.inner.checkout) #footer div.inner{width: auto; margin: 0 15px;}
    #container.cart #footer .cart-totals{grid-template-columns: 180px 75px;}

    div.my-orders div.titles{display: none;}
    div.my-orders div.order{margin-bottom: 12px; padding-bottom: 7px; justify-content: space-between;}
    div.my-orders div.order > *{padding: 0 10px !important; margin: 0 0 5px 0; width: 48% !important;}
    div.my-orders div div.number{background: #e7f2f2; width: 100% !important; margin-bottom: 15px;
    font-weight: 700; padding: 10px !important;}
    div.my-orders div.order > div.cart{width: 100% !important; padding: 12px !important;}

    #jobs-menu{display: none;}
    #jobs-menu-select{display: block;}
    .editable li{list-style-position: inside !important;}
    #jobs-contents{width: 100%;}

    div.bonus-area div.icons{display: grid; grid-template-columns: 1fr 1fr;}
    div.bonus-area div.icons > div{width: auto; max-width: 160px; margin: 0 auto;}
}

@media all and (max-width: 600px)
{
    div.modal-window{width: 100%; height: 100%; overflow-y: auto; padding: 5%; left: 0; top: 0;
    max-height: none; border-radius: 0;}
    div.modal-window span.close{width: 35px; height: 35px; background-size: contain;}
    div.modal-window div.title{font-size: 26px; line-height: 32px;}

    div.delivery-icons{flex-direction: column; align-items: center; gap: 20px; margin-bottom: 30px;}
    div.delivery-prices{flex-direction: column; align-items: center; gap: 40px;}

    #main-video video{display: none;}
    #main-video div.video-cover{height: 400px; position: static; opacity: 1;
    background: url(../images/karaoke-mobile.png) no-repeat center; background-size: cover;}
    #main-video div.breadcrumbs{margin-bottom: 7%;}
    #main-video div.video-text h1{line-height: 35px;}
}

@media all and (max-width: 550px)
{
    #modal-product div.wrapper{flex-direction: column; align-items: center;}
    #modal-product div.wrapper > *{width: 100%;}
    #modal-product div.wrapper div.image img{max-width: 250px; margin: 0 auto; display: block;}
    #modal-product div.content div.name, #modal-product div.content h3{text-align: center;}

    #container.cart #footer div.inner{padding: 10px 15px;}
    #container.cart #footer div.total{display: flex; flex-direction: column; gap: 5px; flex-shrink: 0;}
    #container.cart #footer .button{padding: 0 45px 0 12px; background-position: right 7% center; width: 230px;
    height: 48px; white-space: nowrap}
}

@media all and (max-width: 500px)
{
    #container:has(.inner.checkout) #footer{height: auto;}
    #container:has(.inner.checkout) #footer div.inner{flex-direction: column; gap: 10px; height: auto; gap: 20px;}
    #container.cart #footer .cart-totals{grid-template-columns: 75% 25%; width: 100%; grid-column-gap: 0;}
}

@media all and (max-width: 450px) 
{
    div.gifts-section{padding: 60px 0; margin-bottom: 40px;}
    div.gifts-section div.gifts > div{width: calc(100% - 30px); margin: 0 15px;}
    div.gifts-section form{justify-content: space-between; width: calc(100% - 30px);}
    div.gifts-section form input{width: calc(100% - 130px);}
    div.gifts-section form #apply-promo-code{width: 120px;}

    div.order-complete div.order-cart div.price{display: none;}
    div.order-complete div.order-cart > div:first-child .number{color: transparent;}

    form.regular.customer .button{width: 100%;}

    #main-video div.video-text{left: 0; width: 100%; padding: 0 15px; top: 26%;}
}

@media all and (max-width: 400px) 
{
    #mobile-menu div.wrapper div.buttons button{width: 100%;}
    #mobile-menu div.wrapper div.buttons button.login{background-position-x: 25%;}
}