@media screen and (max-width: 1520px){
	header#page__home:after{left: calc(50% - 2460px)}
}


@media screen and (max-width: 1460px){
	.container{width: 1300px; max-width: 100%;}
}

@media screen and (max-width: 1430px){
	.container{width: 1170px; max-width: 100%;}


	header nav ul{gap: 15px}
	header#page__home:after{left: calc(50% - 2390px)}
	header .lang{left: 10px}
	header .catalog{margin-left: 15px}
	header nav ul li a{ font-size: 16px;}

	#promo .text{margin: 100px 0;}
	#promo h1{font-size: 120px; line-height: 110%}
	#promo .count{top: 120px;}


	#services .image{width: calc(100% - 620px)}


	#why .text{max-width: 590px}
	#why .items{width: calc(100% - 620px)}


	.grid.grid-4{grid-template-columns: repeat(3, 1fr);}
}


@media screen and (max-width: 1200px){
	.container{width: 100%; max-width: 100%; padding: 0 20px;}
	body{padding: 0;}
	header .mobile-logo{display: inline;}
	header .logo{display: none;}
	#navigation__elements{z-index: 500}
	#navigation__elements{width: 100%; left: 0}
	#navigation__elements .col__first{padding: 40px; overflow-y: auto; float: right; max-width: calc(100% - 50px)}
	#navigation__elements .sub-menu{
		padding:10px 0
	}
	
    .menu-item-1712 a::after {
        display: none;
	}
	#navigation__elements .sub-menu li {
	font-size: 16px;
	line-height: 1.3;
	padding: 0 10px;
	margin: 8px 0;
	}
	#navigation__mobile{top: 72px}

	#modal__search input,#modal__search .search__results{width: calc(100% - 55px)}


	#navigation{display: none;}


	header#page__home{position: absolute; top: 0; left: 0; z-index: 300; width: 100%;}
	header .data{gap: 20px;}
	
	.pull, .close-pull {cursor: pointer;}

	header#page__home:after{display: none;}
	header .lang{display: none;}
	header nav{display: none;}


	#promo h1{font-size: 80px;width: 80%;}
	#promo .text{margin-top: 200px;}
	#promo .count{top: 210px; right: 20px;}


	#catalog__list .info{width: 100%; padding: 0 0 40px 0;}
	#catalog__list .list__swiper{width: 100%;}


	#catalog__list .swiper-button-next{right: 0; top: 100%; margin-top: 20px;}
	#catalog__list .swiper-button-prev{left: calc(100% - 140px); top: 100%; margin-top: 20px;}
	

	#before_after .filters a{width: 70px; height: 70px;}
	#before_after .slider img{min-height: 520px;}


	#services .text{max-width: 100%; width: 100%; margin-bottom: 40px}
	#services .image{width: 100%; max-width: 100%;}
	#services .image img{margin: 0 auto;}
	#services .image .note{left: -20px; border-radius: 0 5px 5px 0;}


	#why .text{width: 100%; max-width: 100%; margin-bottom: 40px;}
	#why .items{width: 100%; max-width: 100%; position: relative; bottom: 0; height: 500px}


	#faq .text{max-width: 100%; width: 100%; padding: 0 0 40px 0;}
	#faq .list__faq{width: 100%; max-width: 100%;}


	#news .swiper{overflow-x: visible;}
	#news .swiper-slide{width: 345px;}

	#partners .container{padding: 0}
	#partners .bt{padding-left: 20px;}
	#partners .swiper{overflow-x: visible; border-left: none; border-right: none;}
	#partners .swiper-slide{width: 290px;}

	.swiper.swiper__filters{overflow-x: visible;}

	.grid.grid-4{grid-template-columns: repeat(2, 1fr);}


	#content__page .article{width: calc(100% - 100px)}


	#pars .info img{display: none;}
	#pars .info .data{width: 100%;}


	.list__tth .col{width: 100%;}
	#product__information .swiper-wrapper{justify-content: flex-start;}
	#breadcrumbs .product__logo{display: none;}
	#breadcrumbs {margin-top: 60px;}
	#product__card .data{padding-left: 20px}

	.grid.grid-5{grid-template-columns: repeat(3, 1fr);}


	#product__information .prices{gap: 30px}
	#product__information .prices .product__content,#product__information .prices ul{width: 100%}


	footer .top{margin: 0}
	footer .top .container{padding: 0}
	footer .top .data{margin: 0; border-radius: 0; justify-content: center; text-align: center; gap: 40px; margin: 0}
	footer .bottom{padding: 60px 0;}
	footer .bottom .info{gap: 40px}
	footer .bottom .col{width: calc(50% - 30px);}
	footer .bottom .col:last-child{width: 100%;}
}


@media screen and (max-width: 767px){
	
	#navigation__elements .sub-menu .sub-menu li {padding: 0 5px; margin: 0}
	 #navigation__elements .sub-menu {
    display: none; /* будет управляться через JS */
    position: static; /* убираем absolute, чтобы вложенность работала */
    width: 100%;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: #f4f4f4;
  }
	#navigation__elements .sub-menu li a {
		padding-left: 10px
	}
  #navigation__elements li.open > .sub-menu {
    display: block;
	  margin-top: 10px
  }
	#navigation__elements .sub-menu li a::after {
		display: none
	}
	/* Это сработает на любом уровне вложенности */
#navigation__elements li.has-submenu > a::after,
#navigation__elements li.menu-item-has-children > a::after {
 content: "▼";
    margin-left: 6px;
    font-size: 0.6em;
    color: #888;
    display: inline-block;
    left: auto;
    border-radius: 0;
    background: transparent;
    top: 6px;
    width: auto;
    height: auto;
}

	.bt{font-size: 28px; line-height: 36px; margin-bottom: 40px;}


	header{padding: 11px 0;}
	header .logo{width: 116px;}
	header .search{margin: 0}
	header .catalog{margin: 0}
	header .catalog .current{padding: 0 15px;}
	header .catalog .current:after{display: none;}


	#promo{min-height: 100vh}
	#promo .text{width: 100%; max-width: 100%; text-align: center; margin: 150px 0 200px}
	#promo .text h1{font-size: 50px; margin: 25px auto;}
	#promo .text p{margin: 0 auto; max-width: 280px; font-size: 22px;}
	#promo .count{box-sizing: border-box; width: 134px; height: 160px; top: calc(100% - 160px); right: calc(50% - 67px); padding: 15px 20px 0;}
	#promo .count span{font-size: 78px; width: 100%; line-height: 1}
	#promo .count p{font-size: 16px;}


	#catalog{padding: 50px 0 0;}
	.swiper__catalog{overflow-x: visible; padding-bottom: 125px}
	.swiper__catalog .swiper-slide{max-width: 354px;}
	#catalog .swiper-button-prev,#catalog .swiper-button-next{top: 100%; margin-top: 10px}
	#catalog .btn-scroll-right{top: 100%; margin-top: -80px}
	.swiper__filters .swiper-slide a{padding: 0 25px; height: 42px; font-size: 16px;}

	.swiper__actions{width: calc(100% + 40px); margin-left: -20px}
	.swiper__actions .image img{min-height: 800px; border-radius: 0}
	.swiper__actions .data{height: 344px; width: calc(100% - 40px); top: calc(100% - 364px); padding: 20px; box-sizing: border-box;}
	.swiper__actions .title{margin-bottom: 20px; font-size: 30px; line-height: 1;}
	.swiper__actions p{font-size: 13px;}
	.swiper__actions .logo{display: none;}
	.autoplay-progress{left: 40px; bottom: 26px}


	#catalog__list{padding: 50px 0 1px;}
	#catalog__list .swiper{overflow-x: visible; margin-bottom: 130px}
	#catalog__list .swiper-slide{width: 100%; background: #E9EAEB!important; color: #3A3333!important}
	#catalog__list .swiper-slide .content li:after{background: #3A3333!important}
	#catalog__list .swiper-button-prev,#catalog__list .swiper-button-next{margin-top: -90px}


	#before_after{display: none;}


	#services{padding: 50px 0;}


	#services .tabs{padding: 40px 0 0;}


	#why{padding: 0 0 50px; background: #E9EAEB; color: #3A3333;}
	#why .text p{font-size: 24px; line-height: 36px; margin-bottom: 0}
	#why .text img{display: none;}


	#faq{padding: 50px 0 135px; position: relative;}
	#faq .text p{margin-bottom: 0}
	#faq .text .btn{position: absolute; bottom: 50px; left: 20px;}



	#news{padding: 50px 0; background: #F3F3F3;}
	#news .flex__center{justify-content: flex-start;}


	#partners{padding: 50px 0 100px;}
	#partners .bt{font-family: "Manrope", sans-serif; font-size: 28px; line-height: 36px; text-transform: none; margin-bottom: 40px;}


	.grid.grid-4{grid-template-columns: repeat(1, 1fr);}


	#breadcrumbs{padding: 0px 0 30px;}
	#breadcrumbs h1{font-size: 32px; line-height: 36px;}


	#category__filters{padding: 10px 0; background: transparent;}
	#category__filters .list__filters{display: none;}
	#category__filters .filters__btn{display: block;}
	#category__filters .filters__btn .btn{border-radius: 5px;}


	#news__page,#content__page{padding: 0 0 50px}


	#error__page{padding: 50px 0}
	#error__page .error{font-size: 156px; line-height: 231px;}


	#content__page .thumbnail{margin-bottom: 30px;}
	#content__page .socials{width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 15px; margin-bottom: 30px}
	#content__page .socials a{margin: 0;}
	#content__page .article{width: 100%}
	#content__page .video a{transform: scale(0.5);}


	#gallery__page,#gallery__post{padding-bottom: 50px}
	.item__gallery{margin-bottom: 5px;}


	#advantages{padding: 50px 0;}


	#pars{padding: 0 0 50px}
	#pars .text{font-size: 24px; margin-bottom: 20px;}
	#pars .image{margin-bottom: 20px}
	#pars .image img{height: 240px;}
	#pars .info h2{font-size: 24px;}


	#why.orange{background: var(--orange); color: #fff; padding: 50px 0;}


	#contacts{padding: 0 0 50px}


	#breadcrumbs{padding-top: 15px}


	#map .actions{top: calc(100% - 192px)}
	#map .data{width: 100%; padding: 20px;}
	#map .data p{font-size: 16px; line-height: normal;}


	#product__information{padding: 30px 0 50px;}
	#product__information .swiper{margin-bottom: 20px;}


	#product__card{padding-bottom: 30px}
	#product__card .data{padding-left: 0; width: 100%;}
	#product__card .images{width: 100%; margin-bottom: 20px;}
	#product__card .images img{object-fit: cover; height: 272px;}


	#product__information .tab__docs .inn{width: 100%; box-sizing: border-box; padding-left: 40px; justify-content: flex-start; padding-top: 20px;}
	#product__information .tab__gallery img{height: 90px}


	.grid.grid-5{gap: 10px}
  .grid.grid-7 {
    grid-template-columns: repeat(2,1fr);
  }

	.box__modal{padding: 20px}
	.box__modal .bt{margin-bottom: 20px; font-size: 24px; line-height: 36px;}
	.box__modal .btn{width: 100%;}
	.form .flex .wpcf7-form-control-wrap{width: 100%; margin-bottom: 20px}
	.fancybox-close-small{width: 34px; height: 34px; background-size: 120%; top: 10px; right: 10px;}
	.box__modal .flex__btns{gap: 10px}
	.box__modal .flex__btns .btn{width: auto;}


	footer .top .data{padding: 70px 20px;}
	footer .top .text{font-size: 24px; line-height: 31px;}
	footer .top .text br{display: none;}
	footer .bottom{padding: 30px 0;}
	footer .bottom .col{width: 100%!important}
	footer .bottom .title{margin-bottom: 20px;}
	footer .bottom .col:last-child{display: none;}
	footer .privacy{margin-top: 30px; padding-top: 20px;}
	footer .privacy .copyright{width: 100%; margin-bottom: 20px;}
	header .logo, .mobile-logo {
		max-width: 120px
	}
	
 #catalog__list .data {
    display: grid;
    grid-template-areas:
      "info"
      "swiper";
  }

  #catalog__list .info {
    width: 100%;
    max-width: 100%;
    padding: 20px 15px;
    box-sizing: border-box;
  }

  #catalog__list .list__swiper {
    grid-area: swiper;
    width: 100%;
  }

  #catalog__list .buttons-wrapper {
    position: absolute;
    top: 730px; /* подвинуть под блок info */
    width: 100%;
	  left: 0;
    display: flex;
    justify-content: flex-start;
    gap: 1rem;
  }

  #catalog__list {
    padding-bottom: 120px; /* оставить место под кнопки */
  }
	#product__information .swiper-wrapper{
		overflow-x: auto
	}
}



@media screen and (max-width: 424px){
	header .logo{width: 100px;}
	header .data{gap: 10px;}
	header .data .pull{margin: 0}
	
}