@media all and (max-width: 1620px) 
{
    #content{padding: 20px 0;}
    div.right-column{width: calc(100% - 300px - 50px);}
    div.inner{margin: 0 3%; width: auto;}
    #index-banner .swiper-slide > div{padding-top: 90px;}
    #index-banner .swiper-slide div.content p:nth-child(2){font-size: 50px; line-height: 50px; margin-bottom: 30px;}
    #index-banner div.controls{bottom: 50px;}

    div.products-list{justify-content: space-evenly; gap: 20px;}
    div.products-list div.product{width: 230px; height: 465px; margin-bottom: 20px;}
    div.products-list div.product div.in-stock{margin-bottom: 6px;}
    div.products-list div.product a.name{font-size: 14px; line-height: 19px;}
    div.products-list div.product div.bottom div.price{font-size: 16px; line-height: 22px;}
    div.products-list div.product div.bottom div.price span.old{font-size: 13px;}
    div.products-list div.product div.bottom div.cart{width: 36px; height: 36px;}
}

@media all and (max-width: 1400px) 
{
    #index-banner{margin-bottom: 50px;}
    #index-banner .swiper-slide > div{padding-top: 40px;}
    #index-banner .swiper-slide div.content p:nth-child(2){font-size: 40px; line-height: 40px; margin-bottom: 25px;}
    #index-banner .swiper-slide div.content a.link{margin-top: 0;}
    #index-banner div.controls{bottom: 40px;}

    #index-content{padding: 0 3%; margin-bottom: 70px;}
    #index-content h1{font-size: 36px; line-height: 40px; margin-bottom: 45px;}
    #index-content p{font-size: 16px; line-height: 22px; margin-bottom: 12px; margin-left: 15%;}

    #index-products-wrapper{padding: 70px 0 40px 0;}
    #index-products-wrapper div.title{margin: 0 0 30px 0;}

    #index-content h1, #content h1{font-size: 28px; line-height: 32px;}
    #product-name h1 span.back{margin-top: 2px;}
    #product-images, div.product-bottom-wrapper div.properties{width: 620px;}
    #product-navigation, div.product-bottom-wrapper div.description{width: calc(100% - 620px - 50px)}
}

@media all and (max-width: 1300px)
{
    div.cart-products div.name{max-width: none;}
}

@media all and (max-width: 1200px)
{
    div.checkout-modal{top: 0 !important; left: 0 !important; margin: 0 !important; width: 100% !important;
    height: 100% !important; padding: 30px 12px 12px 12px !important; border-radius: 0;}
    div.checkout-modal div.columns div.left{width: 280px !important;}
    div.checkout-modal div.columns div.right{width: calc(100% - 300px) !important; overflow: hidden !important;}
}

@media all and (max-width: 1160px) 
{
    div.left-column{display: none;}
    div.right-column{width: 100%;}
    div.catalog-top-bar{background: #eef2f1; flex-wrap: wrap;}
    div.catalog-top-bar h1{width: 100%; background: #fff; padding-bottom: 15px;}
    
    div.catalog-top-bar #filters-toggle{display: block; margin-left: 2%;}
    div.left-column .filters #close-filters, div.left-column .filters div.mobile-name{display: block;}

    div.pagination{margin-bottom: 30px;}

    #product-images div.main{width: 300px;}
    #product-images div.main a{display: block;}
    #product-images div.main a img{display: block; max-width: 100%;}
    #product-images, div.product-bottom-wrapper div.properties{width: 400px;}
    #product-navigation, div.product-bottom-wrapper div.description{width: calc(100% - 400px - 30px)}
    #product-images, #product-navigation{margin-bottom: 50px;}

    div.cart-products > div{align-items: flex-start;}
    div.cart-products div.data{padding: 0;}
    div.cart-products div.total{padding-top: 9px;}
    div.cart-products div.delete{padding-top: 13px;}
    div.cart-products div.total span.old{margin-left: 10px;}

    div.contacts-page{flex-direction: column;}
    div.contacts-page div.data{margin: 0 0 30px 0; width: auto;}
    div.contacts-page div.comply{max-width: 350px; width: auto;}
}

@media all and (max-width: 1100px) 
{
    #header div.inner{justify-content: flex-start;}
    #header div.top div.inner{justify-content: space-between;}
    #header a.logo{width: 116px;}
    #header ul.main-menu{display: none;}
    #mobile-menu-button{display: block; margin-right: 2%;}
    #header div.icons{margin-left: auto;}
    #header div.icons span.search{margin-right: 15px;}
    #header div.icons a.account{margin-right: 15px;}
    #search-form{right: 165px;}

    #footer div.inner > div:first-child{margin-right: 30px;}

    div.cart-totals{width: 360px; padding: 20px 20px;}
    div.cart-products > div{flex-wrap: wrap; padding-bottom: 20px;}
    div.cart-products div.image{margin-bottom: 20px;}
    div.cart-products div.quantity{margin-right: 30px;}
    div.cart-products div.data{width: calc(100% - 110px); margin: 0 0 20px 0;}
    div.cart-products div.total{flex-direction: row;}
    div.cart-products div.delete{padding-top: 13px; margin-left: auto;}
}

@media all and (max-width: 1000px) 
{
    #index-banner{margin-bottom: 30px;}
    #index-banner .swiper-slide > div{padding: 25px 10px 0 3%;}
    #index-banner .swiper-slide div.content p{margin-bottom: 10px;}
    #index-banner .swiper-slide div.content p:first-child{font-size: 12px; line-height: 17px;}
    #index-banner .swiper-slide div.content p:nth-child(2){font-size: 24px; line-height: 30px; margin-bottom: 20px;}
    #index-banner .swiper-slide div.content a.link{height: 40px; font-size: 12px;}
    #index-banner div.controls{bottom: 12px; left: 53%;}
    #index-banner div.controls .swiper-pagination-fraction{font-size: 12px;}

    div.cart-products{max-width: 950px; width: 100%;}
}

@media all and (max-width: 900px) 
{
    #product-images div.extra{width: 60px;}
    #product-images div.main{width: calc(100% - 80px);}
    #product-navigation div.product-colors{width: 304px;}
    #product-navigation div.buttons-wrapper{padding: 20px 15px; width: auto; max-width: none;}
    #product-navigation div.buttons-wrapper div.notice{font-size: 14px;}
}

@media all and (max-width: 850px) 
{
    #product-images, #product-navigation, div.product-bottom-wrapper div.properties,
    div.product-bottom-wrapper div.description{width: 100%;}

    div.product-bottom-wrapper{flex-direction: column; margin-bottom: 0;}
    div.product-bottom-wrapper div.title{font-size: 20px; line-height: 28px; margin-bottom: 12px;}
    div.product-bottom-wrapper div.properties-table{margin-bottom: 30px;}
    div.product-bottom-wrapper div.properties-table > div{margin-bottom: 15px;}
    
    #product-images{margin: 0 auto 30px auto; max-width: 450px;}
    #product-images div.mobile{max-width: 450px; position: relative; margin: 0 auto;}
    #product-name{margin-bottom: 10px;}
}

@media all and (max-width: 800px) 
{
    #index-content{margin-bottom: 30px;}
    #index-content h1, #content h1{font-size: 20px; line-height: 28px; margin-bottom: 10px;}
    #index-content h1 br{display: none;}
    #product-name h1 span.back{margin: 4px 8px 0 0; width: 20px; height: 20px;}
    #index-content p{margin-left: 0;}
    #index-content p:first-child{margin-bottom: 10px;}
    #index-content p:first-child strong{font: 12px/17px 'RobotoMedium';}

    #index-products-wrapper{padding: 30px 0;}
    #index-products-wrapper div.title{margin: 0 0 20px 0; font-size: 20px; line-height: 28px;}
    #index-products-wrapper div.products-list{gap: 10px;}

    div.catalog-top-bar h1{padding-bottom: 10px; margin-bottom: 0 !important;}
    div.catalog-top-bar h1 span{font-size: 12px;}
    div.visited-products div.title{margin-bottom: 15px;}
    div.visited-products{padding: 30px 0 30px 0;}
    div.visited-products div.title span{font-size: 20px; line-height: 28px;}

    div.cart-wrapper{flex-direction: column; margin: 0;}
    div.cart-products{margin-bottom: 10px;}
    div.cart-totals{margin: 0; padding: 30px 15px; width: 100%;}

    div.checkout-form-block{width: 100%; margin-bottom: 30px;}
    div.checkout-form-block form > div.field{margin-bottom: 15px;}
    div.checkout-form-block div.radio-field label{width: 49%; padding: 10px 12px 10px 34px;
    background-position: left 6px top 10px;}
    div.checkout-form-block #checkout_form_payment label{width: 100%;}
    div.checkout-form-block div.radio-field label span{font-size: 12px; line-height: 17px;}
    div.checkout-form-block div.section{font-size: 16px; line-height: 22px; margin-bottom: 15px;}
    div.cart-totals.checkout div.inside{padding: 15px 15px !important;}
    div.cart-totals.checkout div.agree input{padding: 10px; transform: scale(1.2); margin-right: 5px; bottom: -1px;}

    div.order-complete div.order-cart{width: 100%;}
    div.order-complete div.order-cart > div{margin-bottom: 15px; font-size: 14px; flex-wrap: wrap;}
    div.order-complete div.order-cart > div:first-child{padding: 10px 0;}
    div.order-complete div.order-cart > div:first-child > div{display: none;}
    div.order-complete div.order-cart > div:first-child > div:first-child{display: block; margin: 0;}
    div.order-complete div.order-cart div.name{width: 100%; margin-bottom: 7px;}
    div.order-complete div.order-cart div.price{display: none;}

    #product-delivery-cities{top: 0; left: 0; width: 100%; height: 100%;}
    #product-delivery-cities div.cities{grid-template-columns: 1fr 1fr 1fr;}
}

@media all and (max-width: 750px)
{
    #index-banner{margin-bottom: 60px;}
    #index-banner .swiper-slide{flex-direction: column; align-items: center; justify-content: flex-start;}
    #index-banner .swiper-slide > img{width: 100%; max-width: 500px;}
    #index-banner .swiper-slide > div{width: 100%; height: 260px; padding: 20px 3% 20px 3%; max-width: 500px;}
    #index-banner .swiper-slide div.content p:nth-child(2){margin-bottom: 10px;}
    #index-banner div.controls{position: static; margin: -40px auto 0 auto;}

    div.products-list{margin-bottom: 10px; gap: 5px;}
    div.products-list div.product{width: 160px; height: 375px;}
    div.products-list div.product a.name{font-size: 12px; line-height: 17px;}
    div.products-list div.product div.bottom div.price span.old{margin-left: 5px;}

    div.checkout-modal{overflow-y: auto;}
    div.checkout-modal div.title{font-size: 18px;}
    div.checkout-modal div.columns{flex-direction: column; gap: 24px; justify-content: center; align-items: flex-start;}
    div.checkout-modal div.columns > div.left, div.checkout-modal div.columns > div.right{width: 100% !important;}
    div.checkout-modal div.shops-list ul{height: 250px;}
    div.checkout-modal div.back{display: none;}

    #shop-promo-banner{left: 0; right: 0; bottom: 0; width: 100%; padding: 12px 16px 12px 14px; gap: 12px;}
    #shop-promo-banner p{font-size: 14px;}
    #shop-promo-banner .shop-promo-close{font-size: 24px; width: 36px; height: 36px;}
    body:has(#shop-promo-banner) #cookie-alert{bottom: 52px;}
    #cookie-alert{width: 94%; left: 3%; bottom: 15px; padding: 12px 5%; font-size: 14px;}
    #cookie-alert p{margin-right: 15px;}
}

@media all and (max-width: 680px)
{
    div.products-list{justify-content: space-around;}
}

@media all and (max-width: 600px)
{
    #container{padding-bottom: 170px;}
    body:has(#shop-promo-banner) #container{padding-bottom: calc(170px + 56px);}
    #header div.top{font-size: 12px;}
    #content{min-height: 300px;}
    #content{padding: 10px 0 20px 0;}
    div.breadcrumbs{padding: 0 10px 10px 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
    .editable h1, #content h1{font-size: 20px; line-height: 28px; margin-bottom: 10px;}
    .editable h3{font-size: 16px; line-height: 22px; margin-bottom: 15px;}

    #footer{padding: 20px 3% 0 3%; height: 170px;}
    body:has(.footer-address) #footer{height: auto; min-height: 170px; padding-bottom: 30px;}
    #footer div.inner{flex-direction: column; text-align: center;}
    #footer div.inner > div:first-child{margin: 0;}
    #footer div.inner > div > p{display: flex; flex-direction: column;}
    #footer div.inner > div > p.footer-address{display: inline-block; text-align: left;}
    #footer div.inner > div > p > a{margin: 0 !important;}
    #footer div.inner > div > p > a:first-child{margin-bottom: 5px !important;}

    div.pagination{margin-bottom: 20px;}
    div.pagination div.pages a{width: 28px; height: 28px; font-size: 14px;}
    div.pagination div.pages a.prev, div.pagination div.pages a.next{display: none;}

    div.products-list div.product{height: 350px;}
    div.products-list div.product div.in-stock, div.products-list div.product a.name{
    margin-left: 0; margin-right: 0;}
    div.products-list div.product div.bottom{padding-left: 0; padding-right: 0;}

    #product-delivery-cities div.title{margin-bottom: 15px; font-size: 18px;}
    #product-delivery-cities #search-city{margin-bottom: 20px;}
    #product-delivery-cities{overflow-y: auto; padding: 25px;}
    #product-delivery-cities span.close{top: 10px; right: 10px;}
    #product-delivery-cities div.cities{grid-template-columns: 1fr 1fr;}

    div.modal-window{width: 100%; padding-left: 20px; padding-right: 20px; top: 0; left: 0; margin: 0;}
}

@media all and (max-width: 540px)
{
    div.products-list{justify-content: space-evenly;}
}

@media all and (max-width: 500px) 
{
    #index-banner div.controls{margin-left: 3%;}
    #product-navigation div.product-colors{width: 100%;}

    #header div.icons a.cart{min-width: auto;}
    #header div.icons a.cart span.cost{display: none;}
    #search-form{bottom: -42px; right: 0;}
    #search-form input{width: 100%;}

    #header div.top div.inner > *{display: none;}
    #header #main-city{display: block;}
    #header .main-city-static{display: block;}
}