@import "../fancybox/fancybox.css";

/*Дэфолтные настройки*/
* {
    box-sizing: border-box;
}
ul li {
    list-style: none;
}
html,
body {
    margin: 0;
    position: relative;
    height: 100%;
    scroll-behavior: smooth;
}
body {
    overflow-x: clip;
}
section {
    position: relative;
}
h1,
h2,
h3,
h4,
h5,
p,
li,
a {
    margin: 0;
    padding: 0;
}
input,
textarea {
    font-family: "Stolzl", sans-serif;
}
input::placeholder,
textarea::placeholder {
    font-family: "Stolzl", sans-serif;
}
ul {
    padding: 0;
    margin: 0;
}
body {
    font-family: "Stolzl", sans-serif;
    padding: 0;
    margin: 0;
    background: #FFF;
    color: #000;
}
a {
    color: #151515;
    text-decoration: none;
}
.container {
    width: 100%;
    max-width: 1276px;
    margin: 0 auto;
    z-index: 5;
    padding: 0;
    position: relative;
}
input,
textarea {
    outline: none;
}
input:active,
textarea:active {
    outline: none;
}
:focus {
    outline: none;
}
textarea {
    resize: none;
}
textarea {
    resize: vertical;
}
textarea {
    resize: horizontal;
}
button:active,
button:focus {
    outline: none;
}
button::-moz-focus-inner {
    border: 0;
}
button {
    cursor: pointer;
    border: none;
}
button:hover {
    transition: 0.3s;
}

#menu__toggle {
    opacity: 0;
}
#menu__toggle:checked ~ .menu__btn > span {
    transform: rotate(45deg);
}
#menu__toggle:checked ~ .menu__btn > span::before {
    top: 0;
    transform: rotate(0);
    display: none;
}
#menu__toggle:checked ~ .menu__btn > span::after {
    top: 0;
    transform: rotate(90deg);
}
#menu__toggle:checked ~ .menu__box {
    visibility: visible;
    right: 0;
}
.menu__btn {
    display: flex;
    align-items: center;
    cursor: pointer;
    z-index: 1000;
    top: -15px;
    transform: rotate(180deg);
    width: 48px;
    height: 48px;
    position: relative;
}
.video-rev__mySwiperHouses iframe {
    width: 100% !important;
    height: 100% !important;
}
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
    display: block;
    position: absolute;
    width: 30px;
    height: 3px;
    background-color: #000000;
    transition-duration: 0.25s;
    right: 10px;
    border-radius: 10px;
}
.span-burger {
    border: none;
    outline: none;
}
.menu__btn > span::before {
    content: "";
    top: -10px;
    transition: 0.3s;
    right: 0;
}
.menu__btn > span::after {
    content: "";
    top: 10px;
    transition: 0.3s;
    right: 0;
}
.menu__box {
    position: fixed;
    visibility: hidden;
    top: 0;
    right: -100%;
    width: 70%;
    height: 100%;
    margin: 0;
    list-style: none;
    background: rgba(255, 255, 255, 0.01);
    backdrop-filter: blur(10px);
    transition-duration: 0.25s;
    z-index: 999;
    padding: 30px 20px;
    padding-top: 70px;
}
.list-header{
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.hamburger-menu {
    display: none;
}
/*Дэфолтные настройки*/
header{
    position: fixed;
    width: 100%;
    z-index: 1000;
}
.section1{
	
    background-image: url("/wp-content/uploads/2024/01/bg-main_new.jpg") !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 202px;
    position: relative;
    padding-bottom: 70px;
	height: 800px;
}
.section1-bg{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(176, 176, 176, 0.50);
}
.section1-bg2{
    width: 100%;
    height: 394px;
    position: absolute;
    left: 0;
    bottom: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.00) 100%);
}
.header-container-top-right{
    display: flex;
    align-items: center;
    gap: 10px;
    color: #FFF;
    font-size: 21px;
    font-style: normal;
    font-weight: 400;
    line-height: 89.064%; /* 13.36px */
}
.content-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.content-gallery .item {
    width: calc(100% / 5 - 10px * 4 / 5);
}
.content-gallery .media-wrapper {
    padding-bottom: 100%;
}
.content-videos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.content-videos > .video__mySwiperHouses-block {
    width: calc(100% / 2 - 10px * 1 / 2);
}
span.media-wrapper iframe,
span.img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
span.media-wrapper {
    display: block;
    position: relative;
}
.header-container-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 13px;
    padding-bottom: 15px;
}
.header-container-top-left{
    display: flex;
    align-items: center;
    gap: 25px;
}
.header-container-top-left p{
    color: #FFF;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 89.064%; /* 13.36px */
}
.header-container-top-left a{
    color: #FFF;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 89.064%; /* 13.36px */
}
.header-container-logo{
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.header-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 21px;
    padding-bottom: 12px;
    border-top: 1px solid rgb(255,255,255,.3);
    border-bottom: 1px solid rgb(255,255,255,.3);
}
.header-container-menu{
    display: flex;
    align-items: center;
    gap: 36px;
}
.header-container-menu li a{
    color: #FFF;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 89.064%; /* 13.36px */
    letter-spacing: 0.45px;
    text-transform: uppercase;
}
.section1-container h1{
   /* display: flex; */
    align-items: center;
    color: #FFF;
    font-family: Ubuntu,sans-serif;
    gap: 15px;
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 33.6px */
}
.section1-container p{
    color: #FFF;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 21.6px */
    padding: 25px 0;
}
.section1-container-form span{
    color: #FFF;
    font-family: Montserrat,sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 130%; /* 20.8px */
}
.section1-container-inputs{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.section1-container-inputs input{
    border-radius: 2px;
    background: rgb(255,255,255,.3);
    backdrop-filter: blur(45px);
    padding-left: 23px;
    height: 50px;
    width: 407px;
    color: white;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 126%; /* 20.16px */
    border: none;
}
table td {
    border: 1px solid;
    padding: 5px;
}
.section1-container-inputs input::placeholder{
    color: #FFF;
}
.section1-container-inputs button{
    border-radius: 2px;
    background: #FF7A00;
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 21.6px */
}
.section1-container{
    max-width: 835px;
}
.section1-container-inputs{
    padding-top: 20px;
}
.section1-img-right{
    position: absolute;
    bottom: 81px;
    right: 150px;
    width: 450px;
}
.section2-container-left-text{
    font-size: 15px;
    font-style: normal;
    padding: 33px 0;
    font-weight: 300;
    line-height: 22px; /* 146.667% */
}
.section2-container-left h3{
    color: #151515;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%; /* 38.4px */
}
.section2{
    padding: 70px 0;
}
.section2-container-left-block{
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 176px;
}
.section2-container-left-bottom{
    display: flex;
    gap: 106px;
}
.section2-container-left-block span{
    color: #FF7A00;
    font-size: 26px;
    font-style: normal;
    font-weight: 550;
    line-height: 22px; /* 84.615% */
}
.section2-container-left-block p{
    color: #44474F;
    font-size: 15px;
    font-style: normal;
    font-weight: 300;
    line-height: 18px; /* 120% */
}
.section2-container-left{
    max-width: 626px;
}
.section2-container{
    display: flex;
    justify-content: space-between;
    gap: 35px;
    align-items: center;
}
.section2-container-right img{
    border-radius: 10px;
    width: 615px;
    height: 358.289px;
    object-fit: cover;
}
.section3-title{
    color: #151515;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%; /* 38.4px */
}
.section3-container{
    display: flex;
    justify-content: space-between;
    padding-top: 35px;
}
.section3-container-block{
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.25);
    background: #FFF;
    width: 236px;
    height: 70px;
    flex-shrink: 0;
    padding: 15px 9px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.section3-container-block p{
    color: #000;
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%; /* 18px */
}
.section4-container-block{
    border: 1px solid rgba(0, 0, 0, 0.25);
    padding: 11px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.section4-container-btn-price{
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    background: #FF7A00;
    height: 55px;
    width: 100%;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%; /* 19.2px */
}
.section4-container-left{
    max-width: 590px;
}
.section4-container-left h3{
    color: #151515;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%; /* 28.8px */
}
.section4-container-left p{
    font-size: 16px;
    padding: 25px 0;
    font-style: normal;
    font-weight: 300;
    line-height: 120%; /* 19.2px */
}
.section4-container-right img{
    width: 530px;
    height: auto;
    object-fit: cover;
}
.swiper-button-next:after,.swiper-button-prev:after{
    display: none!important;
}
.swiper-button-next,.swiper-button-prev{
    background-position: center;
    background-size: cover;
    width: 22.5px!important;
    height: 40px!important;
}
.swiper-button-prev{
    transform: rotate(180deg);
}
.swiper-button-prev{
    left: 0!important;
    margin-left: -32px!important;
}
.swiper-button-next{
    right: 0!important;
    margin-right: -32px!important;
}
.section5-title{
    color: #FFF;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%; /* 38.4px */
    padding-bottom: 35px;
}
.section5-container-product-block-img img{
    width: 230px;
    height: 230px;
    object-fit: cover;
}
.section5-container-product-block{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    width: 25%;
    padding: 32px 17px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(15px);
}
.section5-container-product-block p{
    color: #FFF;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 21.6px */
}
.section5-container-product-block-btns a{
    width: 50%;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 18px */
}
.section5-container-product-block-btns-orange{
    border-radius: 2px;
    background: #FF7A00;
}
.section5-container-product-block-btns-gray{
    border-radius: 2px;
    background: #44474F;
}
.section5-container-product-block-btns{
    width: 100%;
    display: flex;
    gap: 24px;
}
.section5-container-product-block{
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.section5-container-product{
    display: flex;
    flex-wrap: wrap;
}
.section5{
    padding: 65px 0;
}
.section5-container-product{
    padding-bottom: 100px;
}
.section5-container-equipment{
    display: flex;
}
.section5-container-product-block-equipment{
    width: 34%;
}
.section5{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.section6-title{
    color: #151515;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%; /* 38.4px */
    padding-bottom: 35px;
}
.section6-container-block{
    padding: 15px 8px;
    display: flex;
    gap: 10px;
    align-items: center;
    border: 1px solid rgba(0, 0, 0, 0.25);
    background: #FFF;
    border-radius: 10px;
    width: 241px;
}
.section6-container-block p{
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%; /* 18px */
}
.section6-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.section6{
    margin: 100px 0;
}
.section7-title{
    color: #151515;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%; /* 38.4px */
    padding-bottom: 94px;
}
.section7-container-block{
    width: 406px;
    padding: 20px 15px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.25);
    background: #FFF;
}
.section7-container-block span{
    color: #235923;
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: 72.4%; /* 30.408px */
}
.section7-container-block h3{
    color: #151515;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 33px */
    margin-top: 11px;
}
.section7-container-block-line{
    background: #235923;
    height: 1px;
    width: 175px;
    margin: 8px 0;
}
.section7-container-block p{
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%; /* 24px */
}
.section7-container{
    display: flex;
    flex-wrap: wrap;
    gap: 27px;
    justify-content: center;
}
.section7-container-block-long{
    width: 556px;
}
.section7{
    position: relative;
    padding-bottom: 185px;
}
.section7-bg-map{
    position: absolute;
    left: 50%;
    margin-left: -455px;
    top: 73px;
}
.section8-title{
    color: #151515;
    text-align: center;
    padding-bottom: 35px;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%; /* 38.4px */
}
.section8{
    margin: 100px 0;
}
.video-rev__mySwiperHouses-block{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}
.video-rev__mySwiperHouses-block-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.video-rev__mySwiperHouses-block > svg{
    position: relative;
    z-index: 999;
}
.video__mySwiperHouses-block{
    height: 620px;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}
.video-rev__mySwiperHouses{
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.section9-container-map iframe{
    width: 100%;
    height: 100%;
}
.section9-container-map{
    width: 75%;
}
.section9-container-info{
    display: flex;
    flex-direction: column;
    padding: 40px;
    padding-right: 65px;
}
.section9-container-info h3{
    color: #101010;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 33.6px */
    padding-bottom: 16px;
}
.section9-container-info-content-block{
    border-top: 1px solid rgb(0,0,0,.15);
}
.section9-container-info{
    border: 1px solid rgb(0,0,0,.15);
}
.section9-container{
    display: flex;
}
.section9-container-info-content-block{
    display: flex;
    gap: 6px;
    flex-direction: column;
    padding: 16px 0;
}
.section9-container-info-content-block p{
    color: #FF7A00;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 20.8px */
}
.section9-container-info-content-block a,.section9-container-info-content-block span{
    color: #101010;
    font-size: 18px;
    font-style: normal;
    font-weight: 350;
    line-height: 130%; /* 23.4px */
}
.section9-container-info-content-block-social{
    display: flex;
    gap: 15px;
    padding-top: 10px;
}
.section9-container-info-content-block:last-child{
    padding-bottom: 0;
}
.footer-container-left-logo{
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 10px;
}
footer{
    background: #131313;
    padding-top: 38px;
    padding-bottom: 30px;
    margin-top: 100px;
}
.footer-container-left p{
    color: #FFF;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 12px */
    max-width: 376px;
}
.footer-container-middle{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.footer-container-middle li a{
    color: #FFF;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 89.064%; /* 12.469px */
    letter-spacing: 0.42px;
    text-transform: uppercase;
}
.footer-container{
    display: flex;
    justify-content: space-between;
}
.footer-container-right{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 25px;
}
.footer-container-right p,.footer-container-right a{
    color: #FFF;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 89.064%; /* 14.25px */
}
.section5{
    margin-top: 100px;
}
.section3{
    margin-bottom: 100px;
}

.section1-container-inputs button,.section4-container-btn-price,.section5-container-product-block-btns-orange{
    transition: .3s;
}
.section-cart1-container-left a:hover,.section1-container-inputs button:hover,.section4-container-btn-price:hover,.section5-container-product-block-btns-orange:hover{
    transition: .3s;
    background: #FF8F28;
}
.section5-container-product-block-btns-gray{
    transition: .3s;
}
.section5-container-product-block-btns-gray:hover{
    transition: .3s;
    background: #25262B;
}
.section-cart1-container-left a,.section5-container-product-block,.section3-container-block,.section7-container-block,.section6-container-block{
    transition: .3s;
}
.section5-container-product-block:hover{
    transition: .3s;
    background: rgba(255, 255, 255, 0.01);
    backdrop-filter: blur(10px);
}
.section3-container-block:hover,.section6-container-block:hover{
    transition: .3s;
    border-color: #FF8F28;
}
.section7-container-block:hover{
    border-color: #235923;
}
.section-cart1-title{
    color: #151515;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%; /* 38.4px */
    padding-bottom: 35px;
}
.mySwiper2-img{
    width: 100%;
    object-fit: cover;
    height: 443.976px;
}
.section-cart1-container-slider{
    padding: 45px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    position: relative;
    padding-bottom: 90px;
}
.section-cart1-container-left{
    max-width: 514px;
}
.section-cart1{
    padding-top: 200px;
}
.swiper-pagination-bullet{
    background: #333!important;
    height: 4px!important;
    border-radius: 0!important;
    width: 56px!important;
    opacity: 1!important;
}
.swiper-pagination-bullet-active{
    background: #FF7A00!important;
}
.swiper-pagination{
    bottom: 40px!important;
}
.section-cart1-container-left a{
    width: 100%;
    color: #FFF;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%; /* 19.2px */
    height: 55px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 25px;
    background: #FF7A00;
}
.section-cart1-container-right{
    border: 1px solid rgba(0, 0, 0, 0.15);
    padding: 45px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 713px;
    width: 100%;
}
.section-cart1-container-right h1,
.section-cart1-container-right h2,
.section-cart1-container-right h3,
.section-cart1-container-right h4,
.section-cart1-container-right h5,
.section-cart1-container-right h6 {
    margin-top: 40px;
}
.section-cart1-container-right p{
    font-size: 15px;
    font-style: normal;
    font-weight: 350;
    line-height: 150%; /* 22.5px */
    letter-spacing: 0.15px;
}
.video__block-cart-catalog{
    height: 200px;
}
.section-cart1-container{
    display: flex;
    gap: 50px;
    justify-content: space-between;
}
.section-cart1-container-right h3{
    color: #151515;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%; /* 24px */
    padding-bottom: 15px;
}
.section-cart1-container-right ul li{
    color: #000;
    font-size: 15px;
    list-style-type: unset;
    font-style: normal;
    font-weight: 350;
    line-height: 150%; /* 22.5px */
    letter-spacing: 0.15px;
}
.section-cart1-container-right ul{
    padding-left: 15px;
    display: flex;
    flex-direction: column;
}
.section-cart2{
    margin-top: 40px;
    margin-bottom: 100px;
}
.section-cart2-container-block{
    display: flex;
    justify-content: space-between;
}
.section-cart2-container-block-left{
    color: #151515;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 22.4px */
    padding: 0 25px;
    width: 100%;
    display: flex;
    align-items: center;
}
.section-cart2-container-block-right{
    display: flex;
    align-items: center;
    color: #000;
    font-size: 16px;
    padding: 0 25px;
    font-style: normal;
    font-weight: 350;
    line-height: 140%; /* 22.4px */
    width: 522px;
    border-left: 1px solid rgba(0, 0, 0, 0.15);
}
.section-cart2-container-block{
    border: 1px solid rgba(0, 0, 0, 0.15);
    height: 62px;
}
.section-cart2-container{
    display: flex;
    flex-direction: column;
    margin: 40px 0;
}
.section-cart2-container table{
    width: 100% !important;
}
header{
    transition: .5s;
}
.header-fixed{
    background: rgba(255, 255, 255, 0.40);
    backdrop-filter: blur(15px);
    transition: .5s;
}

.modal-fone {
    display: none;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 350000;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.contact-form {
    padding: 3% 8% 0;
    margin-bottom: 3%;
}
.modal-fone .modal-form {
    width: calc(100% - 30px);
    max-width: 570px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    background: #fff;;
    top: 15%;
    padding: 2.85% 61px 2.7%;
}
.modal-fone .modal-form .close {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 25px;
    right: 25px;
    cursor: pointer;
}
.modal-fone .modal-form .close:hover{
	opacity: 0.7;
}
.modal-fone .modal-form .close svg{
	width: 20px;
    height: 20px;
}
#wpforms-error-noscript{
	display: none;
}
.modal-fone .modal-form {
	margin-bottom: 20px;
}
.modal-fone.show{
	display: block;
}
.modal-fone .modal-form input{
	border-radius: 2px;
    padding-left: 23px;
    height: 50px;
    width: 100%;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 126%;
    border: 1px solid #c4c4c4;
	
}
.modal-fone .modal-form button{
	border-radius: 2px;
    background: #FF7A00;
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
}
.modal-fone .modal-form .modal-title{
	font-size:24px;
	font-weight: 500;
	width: 100%;
	text-align: center;
	color: #333;
	margin-bottom: 10px;
}
.modal-fone #itemTitle {
    text-align: center;
    font-size: 18px;
    margin-bottom: 20px;
}
.modal-fone form{
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.modal-fone #color_button{
	border-radius: 2px;
    background: #FF7A00;
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
	border: 1px solid #FF7A00;
}
.modal-fone #color_button:hover{
	background: #fff;
	color: #FF7A00;
	cursor: pointer;
}
.section1-container-form .color_button {
    border-radius: 2px;
    background: #FF7A00;
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;

}
.section1-container-inputs p{
	padding: 0px;
}
.section1-container-inputs input{
	margin-bottom: 20px;
}
.section1-container-form .color_button:hover{
	opacity: 0.7;
	cursor:pointer;
}
.header-container{
	border-bottom: 0px;
}
.section1-logo-text{
	display: flex;
	align-items: center;
	gap: 10px;
	line-height: normal;
}
.section1-container p {
	max-width: 632px;
}
.section1-container-inputs input{
	width: 100%;
}
.section1-container-inputs{
	width: 100%;
}
.section1-container{
	max-width: 640px;
}
.section1-img-right{
	width: inherit;
	bottom: 20px;
	right: inherit;
	position: relative;
}
.section1-flex {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
#titleName{
	display: none;
}
.section1-container-inputs > div{
	width: 100%;
}
.section1-container-form .wpcf7-response-output{
	color: #fff;
	margin-top: 0 !important;

}
.wpcf7-spinner{
	display: none !important;
}
@media(max-width: 1650px){
	.section1-img-right{ 
		right: inherit;
	}
}
@media(max-width: 575px){
	.modal-fone .modal-form{
		padding: 9.85% 23px 2.7%;
		top: 7%;
	}
	
}
.video-rev__mySwiperHouses-block{
	display: none;
}
.video-rev__mySwiperHouses{
	display: block !important;
}
a:hover{
	opacity: 0.7;
}
.video__image {
  display: inline-block;
  position: relative;
  cursor: pointer;
}
.video__image img {
  vertical-align: middle;
	border-radius: 28px;
	width: 100%;
}
.video-preview {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-color: rgba(0,0,0,0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 28px;
}
.video-preview__circle {
  width: 66px;
  height: 66px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: rgba(0,0,0,0.5) 0 4px 20px 0.5px;
  background-color: rgba(255,255,255,0.8);
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
}
.video-preview:hover .video-preview__circle {
  background-color: #ffffff;

}


.video-play-button {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  box-sizing: content-box;
  display: block;
  width: 32px;
  height: 44px;
  border-radius: 50%;
  padding: 18px 20px 18px 28px;
}
.video-play-button:before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 80px;
  height: 80px;
  background: #FF7A00;
  border-radius: 50%;
  animation: pulse-border 1500ms ease-out infinite;
}
.video-play-button:after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 80px;
  height: 80px;
  background: #FF7A00;
  border-radius: 50%;
  transition: all 200ms;
}

@keyframes pulse-border {
  0% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
    opacity: 0;
  }
}
.video-preview__triagle {
  border: 16px solid transparent;
  border-left: 25px solid #fff;
  position: relative;
  z-index: 11;
  left: 9px;
}
.multibutton {
  position: fixed;
  bottom: 40px;
  position: fixed;
  z-index: 1000;
  box-sizing: border-box;
}

  .multibutton {
    right: 40px;
  }



.multibutton-icon {
  width: 60px;
  height: 60px;
  z-index: 30003;
  position: relative;
  background: #fff;
  border: 2px solid #FF7A00;
  border-radius: 50%;
  cursor: pointer;
}

.multibutton--main-icon, .multibutton--closed .multibutton--close-icon {
  display:none;
}
.multibutton--close-icon, .multibutton--closed .multibutton--main-icon {
  display: block;
}
.multibutton-icon-main {
  width: 58px;
  height: 58px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  padding: 16px;
}
.multibutton--closed .multibutton-icon {
  background: #FF7A00;
}
.multibutton--closed .multibutton-icon-main {
  padding: 6px;
}
.multibutton--closed .multibutton-icon::before, .multibutton--closed .multibutton-icon::after {
  content: "";
  background-color: inherit;
  display: block;
  position: absolute;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit;
  z-index: 0;
  top: 0;
  animation: multibutton-wave infinite 2.6s 0s linear;
  left: 0;
}
.multibutton--closed .multibutton-icon::before {
  animation-delay: 0s;
}
.multibutton--closed .multibutton-icon::after {
  animation-delay: 1.3s;
}
.multibutton-icon svg {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.multibutton-buttons {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 451px) {


      .multibutton-button:nth-child(1) {
        transform: translateY(-65px);
      }
      .multibutton-button:nth-child(2) {
        transform: translateX(125px);
      }


}
@media (max-width: 450px) {

      .multibutton-button:nth-child(1) {
        transform: translateY(-65px);
      }
      .multibutton-button:nth-child(2) {
        transform: translateX(125px);
      }
 
}

.multibutton--closed .multibutton-button {
  transform: translateX(0px);
}
.multibutton-button {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  position: absolute;
  padding: 5px;
  border-radius: 50%;
  transition: transform 0.2s linear, box-shadow 0.1s linear;
}
@media (hover: hover) {
  .multibutton-button:hover {
    box-shadow: 0px 1px 8px rgba(0,0,0,0.25);
  }
}
.multibutton-button svg {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.multibutton-button-telegram {
  background: #2ca8dd;
}
.multibutton-button-whatsapp {
  background: #57d163;
}
@keyframes multibutton-wave {
  0% {
    transform: scale(1, 1);
    opacity: 0.45;
  }
  40% {
    opacity: 0.45;
  }
  100% {
    transform: scale(1.35, 1.35);
    opacity: 0;
  }
}




/* ===== Логотип текстом (вместо прежних SVG-кривых) ===== */
.logo-txt-2,
.logo-txt-3{
    font-family: "Stolzl", sans-serif;
    display: block;
    color: #fff;
}
/* Название в две строки: перенос задан тегом <br>,
   чтобы он всегда падал после слова «станки». */
.logo-txt-2{
    font-size: 19px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .5px;
    text-transform: uppercase;
}
.logo-txt-3{ font-size: 15px; line-height: 1; color: #FF7A00; }

/* Тёмный вариант шапки — на страницах каталога. */
.header-container-logo2 .logo-txt-2{ color: #151515; }

/* Логотип внутри заголовка на первом экране. */
.logo-txt-hero{ font-family: "Stolzl", sans-serif; font-weight: 700; color: #FF7A00; }

@media (max-width: 767px){
    .logo-txt-2{ font-size: 15px; }
    .logo-txt-3{ font-size: 12px; }
}


/* CATALOG-HOME-START */
/* --- proto.css --- */
/* ============================================================
   Блок «Каталог» на главной — переработка.
   Прототип: перекрывает нынешние правила из style.css.
   Идея: станки без белой подложки лежат на матовом стекле поверх пейзажа.
   ============================================================ */

/* --- секция: чистый градиент вместо фотографии.
       Картинки нет вообще — ноль килобайт, ничего не растягивается,
       фон одинаков на любой ширине и высоте секции --- */
.section-home-catalog{
  position: relative;
  background-image: linear-gradient(180deg, #f7f9fc 0%, #eef2f7 46%, #dde5ee 100%) !important;
  background-color: #eef2f7;
  background-size: auto !important;
  background-repeat: no-repeat !important;
}
.section-home-catalog > .container{ position: relative; z-index: 1 }

/* --- заголовок секции --- */
.section-home-catalog .home-section-subtitle{ max-width: 620px }

/* --- сетка: 4 колонки, первая плитка 2×2, последняя клетка — CTA.
       minmax(0,1fr), а не 1fr: иначе широкая картинка раздувает трек --- */
.home-catalog-list{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  /* прежние три ряда 1fr тянули карточки на всю высоту секции — снимаем */
  grid-template-rows: none !important;
  grid-auto-rows: 252px !important;
  gap: 22px !important;
  margin-top: 42px !important;
  height: auto !important;
}
/* снимаем прежнюю раскладку по номерам — она была прибита к порядку категорий */
.home-catalog-list [id^="item-"]{
  grid-row: auto !important;
  grid-column: auto !important;
  max-height: none !important;
}
.home-catalog-list .home-shop-item:first-child{
  grid-column: span 2 !important;
  grid-row: span 2 !important;
}

/* --- карточка-стекло --- */
.home-shop-item{
  position: relative;
  display: flex !important;
  flex-direction: column;
  height: 100%;
  padding: 16px 18px 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 18px;
  /* фон градиентный и светлый — карточке нужна плотность, иначе она растворяется */
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  box-shadow: 0 2px 4px rgba(22,34,47,.04), 0 12px 28px rgba(22,34,47,.10);
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.home-shop-item:hover{
  transform: translateY(-4px);
  border-color: rgba(241,92,23,.55);
  box-shadow: 0 18px 42px rgba(20,32,48,.20), 0 0 0 1px rgba(241,92,23,.18);
}

/* --- фото: прозрачный PNG, поэтому contain, а не cover --- */
.home-shop-item img{
  flex: 1 1 auto;
  width: 100% !important;
  height: auto !important;
  min-height: 0;
  border-radius: 0 !important;
  object-fit: contain !important;
  object-position: center 45%;
  filter: drop-shadow(0 10px 14px rgba(18,28,42,.18));
  transition: transform .3s ease;
}
.home-shop-item:hover img{ transform: scale(1.04) }

/* --- подпись: под фото, а не плашкой поверх него --- */
.home-shop-item .name{
  position: static !important;
  width: auto !important;
  flex: 0 0 auto;
  margin-top: 10px;
  padding: 0 22px 0 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: #16222f !important;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
}
.home-catalog-list .home-shop-item:first-child .name{ font-size: 20px }

/* --- ключевой параметр категории: то, по чему реально выбирают станок --- */
.home-shop-item .spec{
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: 9px;
  padding: 5px 12px;
  border-radius: 8px;
  /* фирменный оранжевый: плашка — главный довод в карточке */
  background: #e85510;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-catalog-list .home-shop-item:first-child .spec{ font-size: 19px; padding: 8px 16px }

/* --- строка данных: сколько моделей и от какой цены --- */
.home-shop-item .meta{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-top: 5px;
  padding-right: 26px;
  font-size: 13px;
  line-height: 1.2;
}
.home-shop-item .meta__count{ color: #5b6b7c }
.home-shop-item .meta__price{ color: #16222f; font-weight: 700; white-space: nowrap }
.home-catalog-list .home-shop-item:first-child .meta{ margin-top: 8px; font-size: 15px }

/* стрелка вместо синей плашки */
.home-shop-item .name::after{
  content: "";
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 16px;
  height: 10px;
  background: currentColor;
  opacity: .38;
  transition: opacity .25s ease, transform .25s ease;
  -webkit-mask: no-repeat center/contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M10.6 0 9.5 1.1 12.1 3.7H0v1.6h12.1L9.5 8.9 10.6 10 16 4.5z'/%3E%3C/svg%3E");
  mask: no-repeat center/contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M10.6 0 9.5 1.1 12.1 3.7H0v1.6h12.1L9.5 8.9 10.6 10 16 4.5z'/%3E%3C/svg%3E");
}
.home-shop-item:hover .name::after{ opacity: 1; transform: translateX(3px); color: #f15c17 }

/* --- CTA-плитка вместо пустой клетки в сетке --- */
.home-catalog-cta{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: 20px;
  border-radius: 18px;
  background: linear-gradient(214deg, #f15c17 8%, #ff8a4c 96%);
  box-shadow: 0 12px 32px rgba(241,92,23,.30);
  color: #fff;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
.home-catalog-cta:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(241,92,23,.42);
  color: #fff;
  text-decoration: none;
}
.home-catalog-cta__title{ font-size: 20px; font-weight: 700; line-height: 1.15 }
.home-catalog-cta__note{ font-size: 14px; opacity: .92 }

/* нижнюю кнопку прячем — её роль забрала плитка в сетке */
.home-catalog-full{ display: none !important }

/* --- планшет --- */
@media (max-width: 1199px){
  .home-catalog-list{ grid-auto-rows: 228px !important }
}
@media (max-width: 991px){
  .home-catalog-list{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: 216px !important;
    gap: 16px !important;
  }
  /* backdrop-filter до 992 px не включаем: он ломает фиксированную панель
     поиска (проверено на этом сайте раньше) — берём плотностью фона */
  .home-shop-item{
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.78));
  }
  .home-catalog-list .home-shop-item:first-child .name{ font-size: 18px }
}

/* --- телефон --- */
@media (max-width: 680px){
  .home-catalog-list{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 196px !important;
    gap: 12px !important;
    margin-top: 28px !important;
  }
  .home-catalog-list .home-shop-item:first-child{
    grid-column: span 2 !important;
    grid-row: span 1 !important;
  }
  .home-shop-item{ padding: 12px 14px 11px; border-radius: 15px }
  .home-shop-item .name{ margin-top: 8px; font-size: 13px; padding-right: 18px !important }
  .home-catalog-list .home-shop-item:first-child .name{ font-size: 16px }
  .home-shop-item .meta{ margin-top: 3px; padding-right: 20px; font-size: 11.5px; gap: 2px 8px }
  .home-catalog-list .home-shop-item:first-child .meta{ font-size: 13px }
  /* на узкой плитке крупная плашка не помещается и обрезалась многоточием */
  .home-shop-item .spec{ margin-top: 7px; padding: 4px 8px; border-radius: 7px; font-size: 11.5px }
  .home-catalog-list .home-shop-item:first-child .spec{ font-size: 14px; padding: 5px 11px }
  .home-shop-item .name::after{ right: 13px; bottom: 13px; width: 13px; height: 8px }
  .home-catalog-cta{ padding: 16px }
  .home-catalog-cta__title{ font-size: 17px }
  .home-catalog-cta__note{ font-size: 13px }
}


/* --- proto-all.css --- */
/* ============================================================
   Режим «все категории»: 19 плиток + CTA.
   Сетка ровная — когда показаны все разделы, выделять первый незачем,
   а 20 клеток ложатся без дырок на 4, 3 и 2 колонки.
   ============================================================ */

.home-catalog-list{
  /* Ряд считается так: фотография должна быть крупнее текстового блока,
     поэтому высота = минимум фото (200) + самый длинный текст (~185) + поля. */
  grid-auto-rows: 440px !important;
  gap: 18px !important;
}

/* Высота фотографии фиксирована, а не «остаток места»: иначе она зависела от
   длины текста, и названия соседних плиток начинались на разной высоте.
   Значение подобрано так, чтобы фото было крупнее самого длинного текста. */
.home-shop-item img{
  flex: 0 0 auto !important;
  height: 214px !important;
}
/* у крупной плитки соседей по ряду нет — ей фото отдаём весь остаток */
.home-catalog-list .home-shop-item:first-child img{
  flex: 1 1 auto !important;
  height: auto !important;
}
.home-shop-item .body{ flex: 0 0 auto }

/* Крупный квадрат — «Лесопильные линии» (2×2). Справа от него две широкие
   плашки, под ними ещё две. Дальше остальные категории обычными плитками,
   CTA шириной в две клетки: 4 + 4×2 + 14 + 2 = 28 клеток, ровно 7 рядов. */
.home-catalog-list .home-shop-item:first-child{
  grid-column: span 2 !important;
  grid-row: span 2 !important;
}
.home-catalog-list .home-shop-item.wide{
  grid-column: span 2 !important;
}
.home-catalog-cta{ grid-column: span 2 }

/* --- деления внутри категории: вертикальный список со своими ссылками --- */
/* ссылка на категорию растянута на всю плитку, ссылки подтипов лежат выше неё */
.home-shop-item{ position: relative }
.home-shop-item .tile-link{
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.home-shop-item .subs{
  position: relative;
  z-index: 2;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  width: 100%;
}
.home-shop-item .subs li{ margin: 0 }
.home-shop-item .subs a{
  display: inline-block;
  padding: 1px 0;
  color: #66798c;
  font-size: 12.5px;
  line-height: 1.28;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.home-shop-item .subs a:hover{
  color: #e85510;
  border-bottom-color: rgba(232,85,16,.45);
}
.home-catalog-list .home-shop-item:first-child .subs a{ font-size: 15px; padding: 3px 0 }
.home-catalog-list .home-shop-item.wide .subs a{ font-size: 14px }

/* текстовая часть карточки */
.home-shop-item .body{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 0 0 auto;
  min-width: 0;
  width: 100%;
}

/* --- широкая плашка: текст слева, фотография справа --- */
.home-catalog-list .home-shop-item.wide{
  flex-direction: row !important;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
}
.home-catalog-list .home-shop-item.wide .body{
  flex: 1 1 46%;
  width: 46%;
  justify-content: center;
}
.home-catalog-list .home-shop-item.wide img{
  flex: 1 1 54%;
  width: 54% !important;
  height: 100% !important;
  min-width: 0;
  order: 2;
}
.home-catalog-list .home-shop-item.wide .name{
  margin-top: 0;
  font-size: 21px !important;
}
.home-catalog-list .home-shop-item.wide .spec{ margin-top: 10px; font-size: 17px; padding: 6px 14px }
.home-catalog-list .home-shop-item.wide .meta{ margin-top: 9px }
/* В широкой плашке текст стоит по центру, а приклеенная к углу стрелка
   отрывалась от него — ставим её в поток, сразу под строкой с ценой. */
.home-catalog-list .home-shop-item.wide .name::after{ display: none }
.home-catalog-list .home-shop-item.wide .body::after{
  content: "";
  display: block;
  width: 18px;
  height: 11px;
  margin-top: 14px;
  background: #16222f;
  opacity: .32;
  transition: opacity .25s ease, transform .25s ease, background-color .25s ease;
  -webkit-mask: no-repeat center/contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M10.6 0 9.5 1.1 12.1 3.7H0v1.6h12.1L9.5 8.9 10.6 10 16 4.5z'/%3E%3C/svg%3E");
  mask: no-repeat center/contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M10.6 0 9.5 1.1 12.1 3.7H0v1.6h12.1L9.5 8.9 10.6 10 16 4.5z'/%3E%3C/svg%3E");
}
.home-catalog-list .home-shop-item.wide:hover .body::after{
  opacity: 1;
  background: #f15c17;
  transform: translateX(3px);
}

/* в крупной плитке всё крупнее */
.home-catalog-list .home-shop-item:first-child .name{ font-size: 26px !important }
.home-catalog-list .home-shop-item:first-child .spec{ font-size: 15px; padding: 5px 12px }
.home-catalog-list .home-shop-item:first-child .meta{ font-size: 16px }

/* заголовки категорий крупнее — просьба заказчика */
.home-shop-item .name{
  margin-top: 12px;
  font-size: 18px !important;
  line-height: 1.22;
  letter-spacing: -.01em;
  /* место под две строки: у одних категорий название в строку, у других в две,
     и без резерва плашки с ценами в ряду вставали на разной высоте */
  min-height: 2.44em;
}
.home-shop-item .spec{ margin-top: 8px }
.home-shop-item .meta{ font-size: 13.5px }

/* держим строй: пустая плашка и пустой список занимают место, но не видны */
.home-shop-item .spec--ghost{ visibility: hidden }
/* место под три пункта, один из которых может перенестись на вторую строку */
.home-shop-item .subs{ min-height: 64px }
.home-catalog-list .home-shop-item:first-child .subs{ min-height: calc(3 * 1.28 * 15px + 12px) }
.home-catalog-list .home-shop-item.wide .subs{ min-height: calc(2 * 1.28 * 14px + 6px) }

/* CTA-плитка занимает последнюю клетку и говорит делом, а не «смотреть все» */
.home-catalog-cta__title{ font-size: 19px }
.home-catalog-cta__note{ font-size: 13.5px; line-height: 1.35 }

/* --- на широких мониторах даём секции больше ширины, чем общий контейнер
       сайта (1392 px): плитки становятся крупнее, поля по бокам — меньше --- */
@media (min-width: 1440px){
  .section-home-catalog .container{ max-width: 1600px }
}
@media (min-width: 1760px){
  .section-home-catalog .container{ max-width: 1800px }
  /* Пять колонок вместо четырёх: плитки уже, воздуха внутри меньше.
     Крупная плитка растягивается на три колонки — иначе справа от неё
     остаётся пустая клетка и сетка перестаёт сходиться.
     Счёт: крупная 6 клеток + 4 плашки по 2 + 14 обычных + CTA на 2 = 30,
     то есть ровно шесть рядов по пять. */
  .home-catalog-list{ grid-template-columns: repeat(5, minmax(0, 1fr)) !important }
  .home-catalog-list .home-shop-item:first-child{ grid-column: span 3 !important }
}
@media (min-width: 2100px){
  .section-home-catalog .container{ max-width: 1960px }
}

@media (max-width: 1199px){
  .home-catalog-list{ grid-auto-rows: 522px !important }
  .home-shop-item img{ height: 244px !important }
  .home-shop-item .name{ font-size: 17px !important }
  /* плитка узкая: длинные плашки («бревно до 1200 мм», «сечение до 400×300 мм»)
     обрезались многоточием — уменьшаем кегль и разрешаем перенос */
  /* плашке разрешён перенос, поэтому у одних она в строку, у других в две —
     резервируем место под две, иначе цены в ряду разъезжаются */
  .home-shop-item .spec{
    font-size: 12.5px; padding: 4px 9px; white-space: normal;
    min-height: 39px; align-items: center;
  }
  .home-catalog-list .home-shop-item.wide .spec{
    font-size: 15px; white-space: nowrap; min-height: 0;
  }
  /* «Ленточно-делительные станки» занимают три строки, а у части категорий
     строка «N моделей · от … ₽» переносится — держим место под максимум */
  .home-shop-item .name{ min-height: 3.66em }
  .home-shop-item .meta{ min-height: 36px }
  .home-catalog-list .home-shop-item.wide .name,
  .home-catalog-list .home-shop-item.wide .meta{ min-height: 0 }
}

@media (max-width: 991px){
  .home-catalog-list{ grid-auto-rows: 542px !important }
  .home-shop-item img{ height: 262px !important }
  .home-shop-item .name{ font-size: 16px !important }
  /* в трёх колонках широкая плашка не помещается рядом с крупной —
     возвращаем ей обычный размер, иначе справа от крупной зияет дыра */
  .home-catalog-list .home-shop-item.wide{
    grid-column: auto !important;
    flex-direction: column !important;
    padding: 16px 18px 14px;
    gap: 0;
  }
  /* в строчной раскладке фото занимало всю высоту плитки; став колоночной,
     оно должно вести себя как у обычных плиток, иначе текст выходит за край */
  .home-catalog-list .home-shop-item.wide img{
    width: 100% !important;
    height: 262px !important;
    flex: 0 0 auto !important;
    order: 0;
  }
  .home-catalog-list .home-shop-item.wide .body{ width: 100%; flex: 0 0 auto }
  .home-catalog-list .home-shop-item.wide .name{ margin-top: 10px; font-size: 16px !important }
  /* широкая плашка стала обычной плиткой — типографику тоже возвращаем обычную,
     иначе её текст вдвое выше соседей и не влезает в ряд */
  .home-catalog-list .home-shop-item.wide .spec{
    font-size: 12.5px; padding: 4px 9px; white-space: normal;
    min-height: 39px; margin-top: 10px;
  }
  .home-catalog-list .home-shop-item.wide .subs a{ font-size: 12.5px }
  .home-catalog-list .home-shop-item.wide .subs{ min-height: 66px }
  .home-catalog-list .home-shop-item.wide .name{ min-height: 3.66em }
  .home-catalog-list .home-shop-item.wide .meta{ min-height: 36px; margin-top: 5px }
  /* плашка стала обычной плиткой — и стрелка должна вести себя как у соседей */
  .home-catalog-list .home-shop-item.wide .name::after{ display: block; right: 18px; left: auto }
  .home-catalog-list .home-shop-item.wide .body::after{ display: none }
}

@media (max-width: 680px){
  /* На телефоне содержимое (название в две строки, плашка, список подтипов,
     цена) в фиксированную высоту не влезало и обрезалось. Отдаём высоту
     содержимому: внутри ряда карточки всё равно выравниваются по большей. */
  /* Замер показал: содержимому плитки на 390 нужно 240–260 px, крупной — до 340.
     grid-auto-rows:auto не помогает — у плитки height:100%, и ряд остаётся 165 px,
     поэтому задаём высоту явно и с запасом. */
  .home-catalog-list{ grid-auto-rows: 502px !important; gap: 12px !important }
  /* у сайта в @media(max-width:440px) стоит .home-shop-item{max-height:165px} —
     именно он резал плитку, а не наша сетка */
  .home-shop-item{ max-height: none !important }
  .home-shop-item .body{ flex-shrink: 0 }
  .home-shop-item img,
  .home-catalog-list .home-shop-item.wide img{ height: 236px !important }
  /* на узкой колонке длинные подтипы («двухвальные с гусеничной подачей»)
     разворачивались в три строки и перевешивали фото — ужимаем строку */
  .home-shop-item .subs a{ font-size: 11px; line-height: 1.18; padding: 0 }
  /* на узкой колонке названия занимают до трёх строк, а подтипы — до четырёх;
     резервируем место под максимум, иначе плашки и цены в ряду разъезжаются */
  .home-shop-item .subs{ margin-top: 5px; min-height: 70px }
  .home-shop-item .name{ min-height: 3.66em }
  .home-shop-item .spec{ min-height: 36px }
  .home-shop-item .subs a{ font-size: 12px; padding: 1px 0 }
  .home-shop-item .subs{ margin-top: 6px }
  /* плашке разрешаем перенос — иначе «пропил до 250 мм» обрезается на «до 250» */
  .home-shop-item .spec{ white-space: normal; margin-top: 6px; font-size: 11.5px }
  /* правило для широких плашек живёт в @media 1199 и достаёт сюда же —
     на телефоне они уже обычные плитки, возвращаем им перенос и мелкий кегль */
  .home-catalog-list .home-shop-item.wide .spec{ white-space: normal; font-size: 11.5px }
  /* на телефоне крупная плитка — во всю ширину, но в один ряд */
  .home-catalog-list .home-shop-item:first-child{
    grid-column: span 2 !important;
    grid-row: span 1 !important;
  }
  /* крупная плитка на телефоне занимает один ряд — её текст должен быть
     компактнее, иначе он перевешивает фотографию */
  .home-catalog-list .home-shop-item:first-child .name{ font-size: 17px !important }
  .home-catalog-list .home-shop-item:first-child .meta{ font-size: 12.5px }
  .home-catalog-list .home-shop-item:first-child .spec{ font-size: 12.5px }
  .home-catalog-list .home-shop-item:first-child .subs a{ font-size: 11.5px; padding: 0 }
  .home-catalog-list .home-shop-item:first-child .subs{ min-height: 52px }
  .home-shop-item .name{ margin-top: 9px; font-size: 14.5px !important }
  .home-shop-item .meta{ font-size: 12px }
}

/* на самых узких экранах названия переносятся в три строки — нужен ещё запас */
@media (max-width: 360px){
  /* названия переносятся в три строки — тексту нужно больше, фото не уменьшаем */
  .home-catalog-list{ grid-auto-rows: 522px !important }
}


/* --- bg-variants2.css --- */
/* ============================================================
   Варианты фона секции «Каталог». Класс вешается на .section-home-catalog.
   Всё, кроме css-haze и css-wood, — чистый CSS: ноль килобайт трафика.
   ============================================================ */

/* 1. Мягкое свечение: базовый градиент плюс два больших размытых пятна —
      фирменное тёплое сверху справа и холодное снизу слева. */
.section-home-catalog{
  background-image:
    url(/images/catalog-decor-top.webp),
    url(/images/catalog-decor-bottom.webp),
    radial-gradient(900px 520px at 88% 4%, rgba(241,92,23,.09), transparent 62%),
    radial-gradient(820px 460px at 6% 97%, rgba(87,112,143,.12), transparent 62%),
    linear-gradient(180deg, #f8fafc 0%, #eef2f7 50%, #e6edf4 100%) !important;
  background-size: 48% auto, 62% auto, auto, auto, auto !important;
  background-position:
    right -20px top -6px,
    left -40px bottom -6px,
    center, center, center !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat !important;
  /* под последним рядом карточек места нет — даём секции подвал,
     иначе нижний декор целиком уходит под плитки */
  padding-bottom: 230px !important;
}
@media (max-width: 991px){
  .section-home-catalog{
    background-size: 74% auto, 70% auto, auto, auto, auto !important;
  }
}
@media (max-width: 680px){
  /* на телефоне шапка узкая — верхняя картинка ушла бы под текст, оставляем
     только нижний декор: под последним рядом карточек место есть */
  .section-home-catalog{
    background-image:
      url(/images/catalog-decor-bottom.webp),
      linear-gradient(180deg, #f8fafc 0%, #eef2f7 50%, #e6edf4 100%) !important;
    background-size: 128% auto, auto !important;
    background-position: left -40px bottom -10px, center !important;
    background-repeat: no-repeat, no-repeat !important;
  }
}

/* 5. Пейзаж-дымка: единственный фотографический вариант, 42 КБ. */
/* CATALOG-HOME-END */


/* CATALOG-HOME-PSI-START */
/* Контейнер темы уже, чем на сайте-доноре (1276 px), поэтому длинные
   плашки вроде «сечение до 400x300 мм» не помещались в строку и
   обрезались многоточием. Разрешаем перенос — тот же приём, что донор
   применяет на узких экранах. */
.home-catalog-list .home-shop-item .spec{
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

/* На телефоне в две колонки длинные названия («Оцилиндровочные станки»,
   «Профилировочные станки») не помещались в карточку и вылезали за край.
   Разрешаем перенос по слогам — работает благодаря lang="ru" в шапке. */
@media (max-width: 680px){
    /* Текстовая часть карточки — колоночный флекс с align-items: flex-start,
       поэтому название тянулось по длине слова и вылезало за карточку.
       Растягиваем его на всю ширину и разрешаем перенос по слогам. */
    .home-catalog-list .home-shop-item .name{
        align-self: stretch;
        max-width: 100%;
        hyphens: auto;
        overflow-wrap: break-word;
        word-break: normal;
    }
}

/* Кнопка прайс-листа в верхней строке шапки.
   Цвет наследуется от строки, поэтому она читается и на светлых
   страницах каталога, где текст шапки становится тёмным. */
.header-prajs{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border: 1px solid currentColor;
    border-radius: 6px;
    color: inherit;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    opacity: .9;
    transition: opacity .2s ease, background-color .2s ease;
}
.header-prajs:hover{ opacity: 1; background: rgba(255,122,0,.18); color: inherit; }
.header-container-top-left a.header-prajs{ color: inherit; }
@media (max-width: 991px){
    .header-prajs{ font-size: 13px; padding: 4px 10px; }
}
@media (max-width: 680px){
    .header-prajs{ display: none; }
}

/* Кнопка скачивания прайс-листа под плитками каталога. */
.home-catalog-prajs{
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 26px;
}
.home-catalog-prajs__knopka{
    display: inline-flex;
    align-items: center;
    padding: 14px 28px;
    border-radius: 8px;
    background: #FF7A00;
    color: #fff;
    font-family: "Stolzl", sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: background .25s ease;
}
.home-catalog-prajs__knopka:hover{ background: #e85510; color: #fff; }
.home-catalog-prajs__note{
    font-family: "Stolzl", sans-serif;
    font-size: 14px;
    color: #6b7480;
}
@media (max-width: 680px){
    .home-catalog-prajs{ gap: 10px; margin-top: 20px; }
    .home-catalog-prajs__knopka{ width: 100%; justify-content: center; padding: 13px 20px; font-size: 15px; }
    .home-catalog-prajs__note{ font-size: 13px; }
}
/* CATALOG-HOME-PSI-END */