/* ================================================================
   TerraFloor — main.css
   Только: переменные, сброс, базовые утилиты, контейнер, кнопки
   Всё остальное — в header.css, hero.css и т.д.
   ================================================================ */

/* ---- Шрифт ---- */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* ---- CSS Custom Properties ---- */
:root {
    --font-primary: 'Manrope', sans-serif;

    /* Цвета */
    --color-black:      #232223;
    --color-white:      #ffffff;
    --color-brown:      #a59a8a;
    --color-gray:       #666666;
    --color-light-gray: #e9e9e9;
    --color-bg:         #ffffff;

    /* Контейнер */
    --container-max: calc(1440px + var(--container-pad) * 2); /* ширина из макета */
    --container-pad:clamp(20px, 3vw, 240px);

    /* Переходы */
    --transition: 0.25s ease;
}

/* ---- Сброс ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-primary);
    font-size: 16px;
    color: var(--color-black);
    background: var(--color-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ---- Контейнер ---- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

/* ---- Базовая кнопка ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 50px;
    font-family: var(--font-primary);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
   
    cursor: pointer;
    border: none;
}


/* ================================================================
   Универсальный мобильный свайпер
   ================================================================ */

/* Дотсы — скрыты на десктопе, появляются через JS только на мобиле */
.swiper-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    width: 100%;
}

@media (max-width: 480px) {
   .swiper-dots {
   
    margin-top: 0;
}
}

.swiper-dot {
    width: auto;
    height: 3px;
    border-radius: 2px;
    border: none;
    background: var(--color-light-gray);
    cursor: pointer;
    padding: 0;
    transition: background var(--transition), width var(--transition);
    flex: 1;
}

.swiper-dot.is-active {
    background: var(--color-brown);
    width: auto;
    flex: 1;
}

/* Когда свайпер активен — карточки становятся блочными (display управляется JS) */
.is-swiper > * {
    width: 100% !important;
    flex: none !important;
}




/* ================================================================
   Адаптив контейнера
   ================================================================ */
@media (max-width: 1280px) {
    :root { --container-pad: 40px; }
}
@media (max-width: 768px) {
    :root { --container-pad: 20px; }
}


.page-template-page-service .hero__content {
    margin: 62px 0 0;
}
.page-template-page-service .hero__title {
    max-width: 765px;
}

.page-template-page-service .hero__badge {
    border-radius: 39px;
background: rgba(255, 255, 255, 0.89);
backdrop-filter: blur(3.5px);
    flex-direction: column;
}


.page-template-page-service .hero__overlay {
    width: 514px; 
}

.page-template-page-service .hero__badge-desc {
    max-width: 100%;
}

.page-id-44 .hero__badge-title {
    width: 277px;
}


.page-template-page-service .hero__badge-icon {
   
    justify-content: flex-end;
    width: 100%;
    height: auto;
    background: none;
    border-radius: 0;
    padding: 0;
    justify-self: flex-end;
  
   
}
.page-template-page-service .hero__badge-text{
     margin-top: -60px;
}

.page-template-page-service .hero__badge-icon img {
    width: 107px;
    height: 107px;
    margin-top: -60px;
}
.page-template-page-service .hero__features {
    flex-wrap: nowrap;
}


@media (max-width: 1440px) {
.page-template-page-service .hero__title {
        font-size: 42px;
    }

   .page-template-page-service .hero__btn {
    height: auto;
    padding: 15px 30px;
    font-size: 15px;
    
}

   .page-template-page-service .hero__btn img {
    height: 21px;
   width: 24px;
}
.page-template-page-service .hero__overlay {
    width: 450px;
}




}

@media (max-width: 1200px){
.page-template-page-service .hero__title {
    max-width: 100%;
    margin-bottom: 30px;
}

.page-template-page-service .hero__overlay {
    width: 525px;
    height: 220px;
    margin-top: -210px;


}

.page-id-88 .hero__overlay {
    width: 525px;
    height: 260px;
    margin-top: -270px;
}


}


.hero__tags--flex{
    justify-content: flex-start !important;
    padding: 15px 0;
            width: 100% !important;
            margin-right: 0 !important;
}

.hero__tags--flex .hero__tag {
    padding: 3px 12px;
    font-size: 15px;
   
}

.page-id-88 .hero__badge-title {
  
    width: 314px;
}

.page-id-88 .where-section__inner {
    padding: 2.65vw;
    border-radius: 40px;
    gap: 0px;
}

.page-id-88 .where-card {
    gap: 10px;
 
}

.page-id-88 .where-section {
 
    margin: 50px auto 0;
}


@media (max-width: 768px){
    .page-id-88 .where-section__inner {
  
    border-radius: 0px !important;
    padding: 50px 20px !important;
}

}


@media (max-width: 480px){


.page-id-88 .hero__tags {
    width: 80%;
    display: none;
}


.page-template-page-service .hero__title {
    font-size: 30px;
}

.page-id-44 .hero__btn {
    flex:0;
    padding: 15px 17px;
    white-space: nowrap;
    width: auto;
    
}


.page-template-page-service .hero__badge {
   padding: 0 0 0 13px;
   flex-direction: row-reverse;
    max-width: 250px;
    
}

.page-template-page-service .hero__badge-icon img {
    width: 60px;
    height: 60px;
    margin-top: 0;
}
.page-template-page-service .hero__badge-text {
    margin-top: 0px;
}
.page-template-page-service .hero__badge-icon {
   
    width: auto;
    height: auto;
 
}

.page-template-page-service  .hero__badge-title {
    width: auto;
}
.page-template-page-service .hero__overlay {
    width: 100%;
    height: 60px;
    margin-top: -70px;
}


}



.services__head-row--kover {
   
    align-items: flex-end !important;
     
}

.page-id-88 .features-grid {
    flex-wrap: nowrap;
}
@media (max-width: 1024px){
.page-template-page-service  .services__desc {
    max-width: 100%; 
}

.services__head-row--kover {
   
    align-items: flex-start !important;
     
}
}

.where--stone .where-section__inner {
    padding: 5.208vw;
    border-radius: 60px;
    gap: 40px;
}


.where--stone .where-section__cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.where--stone .where-card {
   background: rgba(87, 87, 87, 0.30);

}

@media (max-width: 1199px){


.where--stone .where-section__cards {
    grid-template-columns: 1fr 1fr ;
}
}


.page-id-88 .cta-banner {
    padding-top: 100px;
}


@media (max-width: 768px){
.where--stone .where-section__cards {
   display: flex;
}
.page-id-88 .cta-banner {
    padding-top: 50px;
}
}




@media (max-width: 480px){
 .where--stone  .hero__btn {
    width: auto;
}
}


.page-id-88 .service-process__head {
    max-width: 733px;
   
}


.page-id-102 .features-section__head {
   max-width: 1000px;
}

.page-id-102 .services__head-row,
.page-id-110 .services__head-row--epox  {
    flex-direction: column;
}

.page-id-102 .where-section__title,
.page-id-110 .services__head-row--epox .where-section__title  {
    max-width: 100%;
}




.page-id-110 .hero__overlay,
.page-id-105 .hero__overlay,
.page-id-305 .hero__overlay,
.page-id-336 .hero__overlay {
    width: 357px;
}

.page-id-110 .hero__badge-title,
.page-id-105 .hero__badge-title,
.page-id-336 .hero__badge-title,
.page-id-305 .hero__badge-title {
   width: 221px;
}

.page-id-336 .hero__badge-desc {
    max-width: 70%;
}

.page-id-105 .features-grid {
   
    flex-wrap: nowrap;
   
}


.page-id-105 .services__head-row--epox {
    flex-direction: column;
}


.page-id-105 .where-section__title { 
    max-width: 100%;
}


.page-id-105 .composition__photo,
.page-id-336 .composition__photo {
    height: 904px;
}

.page-id-110 .composition--prom .composition__photo,
.page-id-305 .composition--prom .composition__photo {
    height: 856px;
}

.page-id-105 .composition__eyebrow,
.page-id-305 .composition__eyebrow,
.page-id-336 .composition__eyebrow,
.page-id-380 .composition__eyebrow,
.page-id-110 .composition__eyebrow {
    color: #F6F0EB;
   
}

.page-id-105 .composition__eyebrow,
.page-id-418 .composition__eyebrow,
.page-id-305 .composition__eyebrow,
.page-id-336 .composition__eyebrow,
.page-id-380 .composition__eyebrow,
.page-id-110 .composition__eyebrow {
    color: #F6F0EB;
   
}
.page-id-105 .composition__eyebrow-line,
.page-id-418 .composition__eyebrow-line,
.page-id-305 .composition__eyebrow-line,
.page-id-336 .composition__eyebrow-line,
.page-id-380 .composition__eyebrow-line,
.page-id-110 .composition__eyebrow-line { 
    border-top: 2px solid #F6F0EB;
}

.page-id-105 .cta-bottom__text-block {
    max-width: 866px;
}

 .composition--prom .composition-step__num {
    display: none;
}


.composition--prom .composition-step__title {
    font-size: 21px;
    line-height: 24px;
}

.composition--prom .composition-step {
    padding: 14px 19px;
 align-items: center;
}
.composition--prom .composition-step__body {
    gap: 0;
}

.features-section--prom1 .features-grid { 
    flex-wrap: nowrap;
}

.features-section--prom2 .features-card,
.where--uslugi2 .where-card {
    flex: 1 1 calc(32% - 15px);
}



.page-id-110 .compare-section .cta-bottom__desc {
   max-width: 840px;
}


.page-id-110 .composition__photo {
    height: 856px;
}

.page-id-110 .services__head-row--kover {
    align-items: flex-start !important;
}

.features-section--prom3 .features-card,
.features-section--3d .features-card {
    flex: 1 1 calc(24% - 15px);
}


.page-id-110 .features-section--prom3 .services__head-row {
    flex-direction: column;
}


.page-id-110 .features-section--prom3 .where-section__title { 
    max-width: 100%;
}

.page-id-110 .features-section--prom3 .services__desc {
    max-width: 100%;
}


.page-id-110 .where--prom .where-card {
    flex: 1 1 calc(19% - 15px);
}
.page-id-110 .where--prom .where-section__cards {
    flex-wrap: wrap;
}

.page-id-110 .cta-bottom__text-block {
    max-width: 1016px;
}

.page-id-305 .cta-banner {
    padding-bottom: 100px;
}

.page-id-305 .where--prom .where-card {
    flex: 1 1 calc(24% - 15px);
}
.page-id-305 .where--prom .where-section__cards {
    flex-wrap: wrap;
}


.page-id-305 .where--prom .services__head-row,
.page-id-336 .where--prom .services__head-row  {
    flex-direction: column;
}

.page-id-305 .where--prom .where-section__title,
.page-id-336 .where--prom .where-section__title {
    max-width: 100%;
}




.page-id-305 .features-section--prom3 .services__head-row {
    flex-direction: column;
     align-items: flex-start !important;
}


.page-id-305 .features-section--prom3 .where-section__title { 
    max-width: 100%;
}

.page-id-305 .features-section--prom3 .services__desc {
    max-width: 100%;
}


.page-id-336 .cta-banner {
    padding-top: 100px;
}


.features-section--3d .services__head-row {
    flex-direction: column;
    align-items: flex-start !important;
    position: relative;
}

.features-section--3d .features-section__title,
.features-section--3d .services__desc  {
    max-width: 70%;
}


.page-template-page-service .features-section--3d .hero__btn {

    position: absolute;
    bottom: 0;
    right: 0;
}


.page-id-336 .calc,
.page-id-418 .calc {
    margin-top: 100px;
}


.hero__tags--uslugi {
    width: 300px;
    position: absolute;
    top: 62px;
    right: 4.375vw;
}

.hero__tags--uslugi .hero__tag {
    border-radius: 12px;
background: rgba(165, 154, 138, 0.86);
backdrop-filter: blur(3.5px);
color: #fff;
}



.where--uslugi .where-section__inner {
    padding: clamp(20px, 2.6vw, 50px);
    border-radius: 40px;
  gap: 0;
}
.where--uslugi  {
    padding-top: 100px;
  
}


.where--uslugi2 .where-section__cards {
    flex-wrap: wrap;
}

.where--uslugi2 .services__head-row {
    align-items: flex-start !important;
    flex-direction: column;
}

.where--uslugi2 .where-section__title,
.where--uslugi2 .where-section__desc {
    max-width: 100%;
}

.page-id-418 .hero__badge-title {
    width: 413px;
}


.page-id-418 .where-section .services__head-row--kover {
    align-items: flex-start !important;
    gap: 40px;
    flex-direction: column;
}

.page-id-451 .composition-step {
    flex-direction: column;
}

.page-id-451 .features-section--prom3 .features-grid {
    display: none;
}


.page-id-451 .features-section--prom3 {
    margin-bottom: -100px;
   
     padding-block: 0; 
}


.page-id-451 .where--stone .services__head-row {
    align-items: flex-start !important;
    flex-direction: column;
}


.page-id-451 .service-card:nth-child(1),
.page-id-451 .service-card:nth-child(2),
.page-id-451 .service-card:nth-child(3),
.page-id-451 .service-card:nth-child(4) {
     flex: 1 1 calc(50% - 20px);
}


.page-id-451 .service-card:nth-child(1) .service-card__desc,
.page-id-451 .service-card:nth-child(2) .service-card__desc,
.page-id-451 .service-card:nth-child(3) .service-card__desc,
.page-id-451 .service-card:nth-child(4) .service-card__desc {
   
     min-height: calc(21px * 4); 
}

.page-id-451 .services__head-row {
    flex-direction: column;
    align-items: center;

}
.page-id-451 .services__head {
    display: flex;
    flex-direction: column;
    align-items: center;

}
.page-id-451 .services__title,
.page-id-451 .services__desc {
    max-width: 878px;
    text-align: center;
}






@media (max-width: 1200px){
.hero__tags--uslugi {
    position: relative;
    top: -390px;
}
}


@media (max-width: 768px){
.features-section--prom2 .features-card,
.features-section--prom3 .features-card,
.features-section--3d .features-card, 
.where--uslugi2 .where-card, 
.page-id-110 .where--prom .where-card,
.page-id-305 .where--prom .where-card    {
    flex: 1 1 100%;
}

.page-id-305 .cta-banner {
    padding-bottom: 50px;
}
.page-id-336 .cta-banner {
    padding-top: 50px;
}

.page-template-page-service .features-section--3d .hero__btn {
width: auto;
    position: relative;
    bottom: auto;
    right: auto;
}

.features-section--3d .features-section__title,
.features-section--3d .services__desc  {
    max-width: 100%;
}


.page-id-336 .calc,
.page-id-418 .calc {
    margin-top: 50px;
}

.where--uslugi  {
    padding-top: 50px;
  
}
.where--uslugi .where-section__inner,
.where--stone .where-section__inner {
    border-radius: 0px;
}

.page-id-451 .features-section--prom3 {
    margin-bottom: -50px;
}

.page-id-451 .service-card:nth-child(1),
.page-id-451 .service-card:nth-child(2),
.page-id-451 .service-card:nth-child(3),
.page-id-451 .service-card:nth-child(4) {
      flex: 0 0 100%;
        scroll-snap-align: start;
        padding: 24px;
        border-radius: 24px;
}


}





@media (max-width: 480px){
.page-id-110 .hero__badge-title,
.page-id-105 .hero__badge-title,
.page-id-336 .hero__badge-title,
.page-id-305 .hero__badge-title {
    width: 93px;
}
.page-id-418 .hero__badge-title {
    width: 142px;
}

.page-id-105 .composition__photo {
    height: 400px;
}
.page-id-110 .composition--prom .composition__photo,
.page-id-305 .composition--prom .composition__photo,
.page-id-110 .composition__photo,
.page-id-336 .composition__photo {
    height: 450px;
}
.page-id-105 .features-grid {
   
    flex-wrap: wrap;
   
}

.composition--prom .composition-step__title {
    font-size: 16px;
    line-height: 21px;
}

.composition .hero__btn {
    width: auto;
}
.hero__tags--uslugi {
 display: none !important;
}




}



/* ---- WYSIWYG общие стили (блог + кейс) ---- */
.wysiwyg-content {
    color: var(--color-gray);
    font-size: 16px;
    line-height: 28px;
    
}

.wysiwyg-content h2 {
    color: var(--color-black);
    font-size: 34px;
    line-height: 40px;
    font-weight: 600;
    margin: 48px 0 20px;
}
.wysiwyg-content h3 {
    color: var(--color-black);
    font-size: 26px;
    line-height: 32px;
    font-weight: 600;
    margin: 36px 0 16px;
}
.wysiwyg-content p { margin: 0 0 20px; }
.wysiwyg-content ul,
.wysiwyg-content ol {
    margin: 0 0 20px;
    padding-left: 24px;
}


.wysiwyg-content ol {
   list-style: auto;
}

.wysiwyg-content ul {
  list-style: disc;
}

.wysiwyg-content li { margin-bottom: 8px; }
.wysiwyg-content img {
    border-radius: 16px;
    margin: 24px 0;
    max-width: 100%;
}
.wysiwyg-content a {
    color: var(--color-brown);
    text-decoration: underline;
}
.wysiwyg-content blockquote {
    border-left: 3px solid var(--color-brown);
    padding-left: 20px;
    margin: 24px 0;
    font-style: italic;
}
.wysiwyg-content strong { color: var(--color-black); }






.wysiwyg-content ul li::marker {
    color: var(--color-brown);
}

.wysiwyg-content ol li::marker {
    color: var(--color-brown);
    font-weight: 700;
}

.wysiwyg-content img {
    width: 100% !important;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 40px;
    display: block;
    margin: 40px 0;
}
.wysiwyg-content figure img {
    width: 100% !important;
    max-width: 100%;
    height: auto;
 
}

figure{
    width: 100% !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}


@media (max-width: 768px) {
   
    .wysiwyg-content h2 { font-size: 28px; }
    .wysiwyg-content h3 { font-size: 20px; }
}


.service-popup .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.service-popup .wpcf7-acceptance label{
    font-size: 14px;
}

.service-popup .wpcf7-acceptance a{
    text-decoration: uppercase;
}



/* Светлый кастомный селект (для фильтров блога/портфолио/галереи) */
.custom-select--light .custom-select__trigger {
    background: var(--color-white);
    border: 1px solid var(--color-light-gray);
    border-radius: 50px;
    padding: 16px 48px 16px 20px;
    color: var(--color-black);
    height: auto;
    font-size: 15px;
    backdrop-filter: none;
}

.custom-select--light .custom-select__trigger svg path {
    stroke: var(--color-gray);
}

.custom-select--light .custom-select__trigger.is-selected {
    color: var(--color-black);
}

.custom-select--light .custom-select__dropdown {
    background: var(--color-white);
    border: 1px solid var(--color-light-gray);
    border-radius: 20px;
    box-shadow: 0px 15px 50px 0px rgba(0, 0, 0, 0.07);
}