.showroom-gallery .swiper.swiper-initialized .swiper-button-prev,.showroom-gallery .swiper.swiper-initialized .swiper-button-next{width:36px;height:36px;background:rgba(0,0,0,0.25);border-radius:50%;color:var(--card-bg)}
.showroom-gallery .swiper.swiper-initialized .swiper-button-prev:after,.showroom-gallery .swiper.swiper-initialized .swiper-button-next:after{font-size:16px}
.showroom-gallery .swiper.swiper-initialized .swiper-pagination-bullet-active{background:var(--accent-color)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--text-color:rgb(28,28,28);--secondary-text:rgb(60,60,60);--muted-text:rgb(110,110,110);--placeholder-text:rgb(150,150,150);--accent-color:rgb(199,124,74);--accent-dark:rgb(175,102,57);--light-bg:rgb(246,246,246);--section-bg:rgb(244,244,244);--card-bg:rgb(255,255,255);--table-header-bg:rgb(245,245,245);--table-border:rgb(220,220,220);--border-color:rgb(220,220,220);--alt-bg:rgb(248,248,248);--dark-bg:rgb(18,18,18);--offer-color:rgb(199,124,74);--offer-dark:rgb(175,102,57)}
body{font-family:Arial,Helvetica,sans-serif;line-height:1.5;color:var(--text-color);background:var(--card-bg);overflow-x:hidden}
body.no-scroll{overflow:hidden}
body.mobile-menu-open{overflow:hidden}
h1{font-size:50px;font-weight:700;line-height:68px;color:var(--text-color)}
h2{font-size:53px;font-weight:700;line-height:64px;color:var(--text-color)}
h3,h4,h5{font-weight:600;color:var(--text-color)}
a{color:var(--accent-color);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:90%;max-width:1200px;margin:0 auto}
section:nth-of-type(even){background:rgb(250,250,250)}
.navbar{background:var(--dark-bg);border-bottom:none}
/* Support both direct ul and .navbar__menu for backward compatibility */
.navbar ul,
.navbar__wrapper{position:relative;display:flex;align-items:center;justify-content:center;padding:0.5rem 0}
.navbar ul,
.navbar__menu{margin:0;list-style:none;display:flex;justify-content:center;align-items:center;gap:2rem;padding:0.5rem 0}
.navbar ul li,
.navbar__menu li{margin:0}
.navbar ul li a,
.navbar__menu li a{font-size:0.875rem;letter-spacing:0.05em;text-transform:uppercase;color:var(--card-bg);padding-bottom:0.25rem;border-bottom:2px solid transparent;transition:color 0.2s ease,border-color 0.2s ease;text-decoration:none}
.navbar ul li a:hover,.navbar ul li a:focus,
.navbar__menu li a:hover,.navbar__menu li a:focus{border-color:var(--accent-color);color:var(--accent-color)}
.navbar__mobile{position:absolute;right:0;top:50%;transform:translateY(-50%);display:none;align-items:center;gap:0.85rem}
.navbar__mobile-contact{max-width:none;min-width:0;width:auto;padding:0;border:none;box-shadow:none;background:transparent;align-items:center;gap:0.65rem;color:var(--card-bg)}
.navbar__mobile-contact svg{width:22px;height:22px;fill:var(--accent-color)}
.navbar__mobile-contact div{display:flex;flex-direction:column;gap:0.2rem;line-height:1.1}
.navbar__mobile-phone-number{color:var(--card-bg);text-decoration:none}
.navbar__mobile-phone-number:hover,.navbar__mobile-phone-number:focus{color:var(--accent-color)}
.navbar__mobile-call{color:rgba(255,255,255,0.75);font-size:0.75rem;text-decoration:none}
.navbar__mobile-call:hover,.navbar__mobile-call:focus{color:var(--accent-color)}
.navbar__toggle{width:46px;height:46px;border-radius:12px;border:1px solid rgba(255,255,255,0.25);background:rgba(255,255,255,0.08);display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0;cursor:pointer;transition:background 0.2s ease,border-color 0.2s ease}
.navbar__toggle span{display:block;width:22px;height:2px;border-radius:999px;background:var(--card-bg);transition:transform 0.2s ease,opacity 0.2s ease}
.navbar__toggle:hover,.navbar__toggle:focus{background:rgba(255,255,255,0.18);border-color:rgba(255,255,255,0.45)}
.navbar__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.navbar__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navbar__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:1100;display:none;justify-content:flex-end;pointer-events:none}
.mobile-menu__overlay{position:absolute;inset:0;background:rgba(0,0,0,0.45);opacity:0;transition:opacity 0.3s ease;pointer-events:none}
.mobile-menu__panel{position:relative;height:100%;width:min(320px,82%);max-width:360px;background:var(--card-bg);box-shadow:-18px 0 45px rgba(0,0,0,0.16);transform:translateX(100%);transition:transform 0.35s ease;padding:1.75rem 1.5rem 2.5rem;display:flex;flex-direction:column;gap:1.75rem;overflow-y:auto}
.mobile-menu__close{align-self:flex-end;width:42px;height:42px;border-radius:50%;background:rgba(0,0,0,0.05);border:none;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;position:relative}
.mobile-menu__close span{position:absolute;width:20px;height:2px;background:var(--text-color);border-radius:999px}
.mobile-menu__close span:first-child{transform:rotate(45deg)}
.mobile-menu__close span:last-child{transform:rotate(-45deg)}
.mobile-menu__nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem}
.mobile-menu__nav a{color:var(--text-color);font-weight:600;font-size:0.95rem;letter-spacing:0.04em;text-transform:uppercase;text-decoration:none}
.mobile-menu__nav a:hover,.mobile-menu__nav a:focus{color:var(--accent-color)}
.mobile-menu__info{display:flex;flex-direction:column;gap:1.25rem;padding-top:0.5rem;border-top:1px solid rgba(0,0,0,0.05)}
.mobile-menu__info .contact-item{max-width:none;min-width:0;line-height:1.4;color:var(--text-color);display:flex;align-items:center;gap:0.5rem}
.mobile-menu__info .contact-item,.mobile-menu__info .contact-item p,.mobile-menu__info .contact-item strong{color:var(--text-color)}
.mobile-menu__info .contact-item svg{fill:var(--accent-color);flex-shrink:0;width:24px;height:24px}
.mobile-menu__info .contact-item a{color:var(--accent-color);text-decoration:none}
.mobile-menu__info .contact-item a:hover,.mobile-menu__info .contact-item a:focus{color:var(--accent-dark)}
.mobile-menu__info .contact-item > div:not(.contact-item__messengers){flex:1;min-width:0}
.mobile-menu__info .contact-item__messengers{display:flex !important;gap:8px;margin-left:auto;flex-shrink:0}
.mobile-menu__info .contact-item__messengers .messenger{display:inline-flex !important;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border-radius:50%;background:rgba(199,124,74,0.1);border:1px solid rgba(199,124,74,0.2);box-shadow:0 2px 4px rgba(0,0,0,0.05);flex-shrink:0}
.mobile-menu__info .contact-item__messengers .messenger svg{width:18px;height:18px;fill:var(--accent-color) !important;display:block}
.mobile-menu__info .contact-item__messengers .messenger span{display:none !important}
.mobile-menu__info .contact-item__messengers .messenger:hover{background:rgba(199,124,74,0.15);transform:translateY(-1px);box-shadow:0 4px 8px rgba(0,0,0,0.1)}
.mobile-menu--open{display:flex;pointer-events:auto}
.mobile-menu--open .mobile-menu__overlay{opacity:1;pointer-events:auto}
.mobile-menu--open .mobile-menu__panel{transform:translateX(0)}
.info-bar{background:var(--dark-bg);color:var(--card-bg);border-bottom:none}
.info-bar .container{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 0}
.contact-item{display:flex;align-items:flex-start;gap:0.5rem;max-width:32%;min-width:250px;line-height:1.3}
.contact-item svg{flex-shrink:0;width:24px;height:24px;fill:var(--accent-color)}
.contact-item,.contact-item p,.contact-item strong{color:var(--card-bg)}
.hero{position:relative;padding:0;text-align:left;color:var(--card-bg);overflow:hidden;min-height:100vh;height:100vh;display:flex;align-items:center;justify-content:center}
/* Стили для видео - используются и для старого варианта (тег video), и для нового (контейнер с iframe) */
.hero__video{position:absolute;inset:0;width:100%;height:100%;transform:none;z-index:0;object-fit:cover;overflow:hidden}
/* Стили для iframe Kinescope (новый вариант) */
.hero__video-iframe{position:absolute;top:50%;left:50%;width:100vw;height:100vh;min-width:100%;min-height:100%;transform:translate(-50%,-50%);object-fit:cover;pointer-events:none}
/* Старый вариант: если используется тег <video class="hero__video">, то стили выше работают и для него */
.hero__overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:1}
.hero__content{position:relative;z-index:2;width:100%;max-width:1200px;padding:2.5rem 1rem;display:flex;flex-direction:column;align-items:flex-start;gap:1.5rem}
.hero__badge{display:inline-flex;align-items:center;gap:0.5rem;padding:0.4rem 1.1rem;border-radius:999px;background:rgba(255,255,255,0.14);color:rgba(255,255,255,0.85);text-transform:uppercase;letter-spacing:0.12em;font-size:0.75rem;font-weight:600}
.hero h1{font-size:50px;font-weight:700;line-height:68px;margin:0;text-shadow:0 2px 10px rgba(0,0,0,0.35);text-transform:none;color:var(--card-bg)}
.hero h1 .highlight{color:rgb(176,104,43)}
.hero__sub{margin:0;font-size:1.05rem;line-height:1.7;color:rgba(255,255,255,0.9);text-shadow:0 1px 6px rgba(0,0,0,0.35)}
.hero__features{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem 2.2rem;margin-top:0.5rem;max-width:720px}
.hero__feature{display:flex;align-items:flex-start;gap:1rem;min-width:0}
.hero__feature-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:rgba(199,124,74,0.22);color:var(--accent-color);box-shadow:0 18px 30px rgba(0,0,0,0.28);flex-shrink:0}
.hero__feature-icon svg{width:20px;height:20px;fill:currentColor}
.hero__feature p{margin:0;font-size:1rem;line-height:1.45;font-weight:600;color:rgba(255,255,255,0.92);text-shadow:0 1px 6px rgba(0,0,0,0.35)}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem;margin-top:1.5rem}
.hero__cta-btn{display:inline-flex;align-items:center;gap:0.65rem;padding:1rem 3.5rem 1rem 2.6rem;letter-spacing:0.14em;text-transform:uppercase;border-radius:999px;background:var(--accent-color);color:var(--card-bg);box-shadow:0 24px 40px rgba(199,124,74,0.45)}
.hero__cta-btn::after{content:'';width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.2);display:inline-flex;align-items:center;justify-content:center;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8 5v14l11-7z"/></svg>') no-repeat center / 18px 18px;background-color:var(--card-bg)}
.hero__cta-btn:hover{background:var(--accent-dark);transform:translateY(-2px);box-shadow:0 26px 42px rgba(199,124,74,0.5)}
.hero__hint{margin:0;max-width:320px;font-size:0.9rem;line-height:1.5;color:rgba(255,255,255,0.8);text-shadow:0 1px 4px rgba(0,0,0,0.35)}
section{background:rgb(255,255,255);padding:3rem 0}
section h2{position:relative;font-size:53px;font-weight:700;line-height:64px;margin-bottom:0;text-align:left;color:var(--text-color);letter-spacing:normal}
/* Draw the decorative accent bar only on section headings that do not explicitly opt out via the `.no-accent-bar` class.  Using `:not(.no-accent-bar)` here allows
   individual headings to suppress the bar without relying on separate override rules. */
section h2:not(.no-accent-bar)::before{content:'';display:block;width:68px;height:4px;border-radius:999px;background:var(--accent-color);margin-bottom:1rem;box-shadow:0 8px 18px rgba(199,124,74,0.35)}
section h2 span.section-accent{color:var(--accent-color)}
section h2 em{font-style:normal;color:var(--accent-color)}
.video-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:2.5rem;align-items:stretch;margin-top:2rem}
.video-wrapper{position:relative;width:100%;aspect-ratio:16 / 9;min-height:320px;background:var(--dark-bg);border-radius:16px;overflow:hidden;cursor:pointer;box-shadow:0 24px 48px rgba(0,0,0,0.22)}
.custom-video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
.video-text{display:flex;flex-direction:column;gap:1.1rem;padding:2rem 2.25rem;background:var(--card-bg);border-radius:18px;box-shadow:0 22px 44px rgba(15,20,25,0.08);color:var(--secondary-text)}
.video-text h3{margin:0;font-size:1.35rem;line-height:1.45;color:var(--text-color)}
.video-text ul{margin:0;padding-left:1.2rem;display:flex;flex-direction:column;gap:0.6rem;font-size:0.95rem}
.video-text li{position:relative;padding-left:0.4rem}
.video-text li::marker{color:var(--accent-color)}
.video-result{margin-top:auto;font-size:1.3rem;font-weight:600;color:var(--accent-color)}
.products{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem;margin-top:2rem}
.product-card{border:1px solid var(--border-color);border-radius:8px;overflow:hidden;background:var(--card-bg);display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,0.06);transition:box-shadow 0.3s ease}
.product-card:hover{box-shadow:0 8px 24px rgba(0,0,0,0.12)}
/* Статическая иконка в тексте */
.section-note__hint{display:inline-flex;align-items:center;gap:0.5rem;justify-content:center}
.product-animation-icon-static{flex-shrink:0;width:24px;height:24px;fill:var(--accent-color)}
.product-animation-icon-static path{fill:var(--accent-color)}
/* Анимированная иконка для продуктов */
#products{position:relative}
.product-animation-icon{position:absolute;top:0;left:0;width:32px;height:32px;z-index:9999;pointer-events:none;opacity:0;will-change:transform;transform-origin:center;display:flex;align-items:center;justify-content:center}
.product-animation-icon svg{width:32px;height:32px;display:block;filter:drop-shadow(0 0 2px rgba(0,0,0,0.8)) drop-shadow(0 0 4px rgba(0,0,0,0.6)) drop-shadow(0 2px 4px rgba(0,0,0,0.4))}
.product-animation-icon svg path{fill:#ffffff !important;stroke:#000000;stroke-width:1px;stroke-linejoin:round;stroke-linecap:round;paint-order:stroke fill}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.product-card .image{width:100%;padding-bottom:75%;background:var(--dark-bg);position:relative;background-size:cover;background-position:center}
.product-card h3{font-size:1rem;margin:0.75rem 0 0.25rem}
.product-card p.price{font-size:0.875rem;color:var(--muted-text);margin-bottom:0.75rem}
.icon-list{list-style:none;padding-left:0}
.icon-list li{display:flex;align-items:flex-start;gap:0.5rem;margin-bottom:0.5rem;font-size:0.875rem}
.icon-list li svg{width:18px;height:18px;flex-shrink:0;fill:var(--accent-color);margin-top:2px}
.why-header{margin-top:0}
.why-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.75rem;margin-top:2rem}
.why-feature{text-align:left;background:var(--card-bg);border:1px solid rgba(199,124,74,0.1);border-radius:18px;padding:1.6rem 1.4rem;box-shadow:none}
.why-feature svg{width:64px;height:64px;padding:14px;border-radius:18px;background:rgba(199,124,74,0.14);fill:var(--accent-color);margin-bottom:1rem}
.why-feature p{margin:0;font-size:0.95rem;line-height:1.6;color:var(--text-color)}
.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;margin-top:2rem}
.project-card{border:1px solid var(--border-color);border-radius:8px;overflow:hidden;background:var(--card-bg);display:flex;flex-direction:column;box-shadow:0 2px 6px rgba(0,0,0,0.06)}
.project-card .image{width:100%;padding-bottom:56%;background:var(--dark-bg);position:relative;overflow:hidden}
.project-card .image::after{content:"Фото";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--placeholder-text);font-size:0.875rem;z-index:0}
.project-card .image img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1}
.project-card .image:has(img)::after{display:none}
.project-card .content{padding:1rem;flex-grow:1;display:flex;flex-direction:column}
.project-card h4{font-size:1rem;margin-bottom:0.5rem}
.project-card p{font-size:0.875rem;color:var(--muted-text);margin-bottom:1rem}
.project-card button{align-self:start;padding:0.5rem 1rem;border:none;background:var(--accent-color);color:var(--card-bg);border-radius:4px;cursor:pointer;font-size:0.875rem;transition:background 0.2s ease}
.project-card button:hover{background:var(--accent-dark)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.75rem;margin-top:2rem}
.step{position:relative;padding:1.75rem 1.5rem;border:1px solid var(--border-color);border-radius:18px;background:var(--card-bg);box-shadow:0 18px 35px rgba(0,0,0,0.06);display:flex;flex-direction:column;gap:1rem}
.step-number{display:flex;align-items:center;gap:0.65rem;font-size:2.8rem;font-weight:700;letter-spacing:0.08em;color:var(--accent-color)}
.step-number::after{content:"";flex:1 1 auto;height:1px;background:rgba(0,0,0,0.1)}
.step p{margin:0;font-size:0.95rem;line-height:1.55;color:var(--text-color)}
.audience{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin-top:2rem}
.audience-card{text-align:center;padding:1rem;border:1px solid var(--border-color);border-radius:8px;background:var(--alt-bg);box-shadow:0 2px 6px rgba(0,0,0,0.05)}
.audience-card svg{width:40px;height:40px;fill:var(--accent-color);margin-bottom:0.5rem}
.audience-card img,.audience-card .audience-icon{width:120px;height:120px;object-fit:contain;margin-bottom:0.5rem}
.audience-card p{font-size:0.875rem}
#offer{background:linear-gradient(180deg,rgba(255,240,227,0.55) 0%,#ffffff 100%);padding:3.75rem 0 4rem}
#offer .container{max-width:1180px}
.offer-box{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:2.5rem;padding:3rem 3.1rem;border-radius:32px;background:#ffffff;border:1px solid rgba(199,124,74,0.18);box-shadow:0 34px 70px rgba(199,124,74,0.18),0 18px 32px rgba(0,0,0,0.07);position:relative}
.offer-box__details,.offer-box__form{background:transparent;border-radius:0;padding:0;box-shadow:none;border:none}
.offer-box__details{display:flex;flex-direction:column;gap:1.5rem;padding-right:2.5rem;border-right:1px solid rgba(199,124,74,0.14)}
.offer-badge{align-self:flex-start;padding:0.45rem 1.4rem;border-radius:999px;background:rgba(199,124,74,0.15);color:var(--accent-color);letter-spacing:0.12em;font-size:0.75rem;font-weight:600;text-transform:uppercase}
.offer-benefits{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem;color:var(--text-color);font-size:0.95rem;line-height:1.65}
.offer-benefits li{position:relative;padding-left:1.6rem;font-weight:500}
.offer-benefits li::before{content:'';position:absolute;left:0.75rem;top:1.05rem;width:3px;height:3px;border-radius:50%;background:var(--accent-color)}
.offer-form__intro{position:relative;margin:0 0 0.6rem;padding-left:1rem;font-size:1.06rem;line-height:1.6;font-weight:600;color:var(--text-color)}
.offer-form__intro::before{content:'';position:absolute;left:0;top:0.3rem;bottom:0.3rem;width:3px;border-radius:999px;background:linear-gradient(180deg,rgba(199,124,74,0.85),rgba(199,124,74,0.4))}
.offer-box__form{padding-left:2.5rem;display:flex;flex-direction:column;gap:1.2rem}
.offer-box__form form{display:flex;flex-direction:column;gap:0.75rem}
.offer-box__form input,.offer-box__form textarea{width:100%;padding:0.9rem 1.1rem;border-radius:14px;border:1px solid rgba(199,124,74,0.28);background:#ffffff;font-size:0.95rem;transition:border-color 0.2s ease,box-shadow 0.2s ease,background 0.2s ease;resize:vertical}
.offer-box__form input:focus,.offer-box__form textarea:focus{outline:none;border-color:var(--accent-color);background:rgba(199,124,74,0.05);box-shadow:0 0 0 2px rgba(199,124,74,0.18)}
.offer-submit{align-self:stretch;padding:1.1rem 2.25rem;border:none;border-radius:999px;background:linear-gradient(135deg,#c77c4a 0%,#e89858 100%);color:#fff;font-size:0.95rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;transition:transform 0.2s ease,box-shadow 0.2s ease,filter 0.2s ease;box-shadow:0 22px 40px rgba(199,124,74,0.3)}
.offer-submit:hover{transform:translateY(-2px);filter:brightness(1.03);box-shadow:0 26px 46px rgba(199,124,74,0.32)}
.showroom-text h2{margin-bottom:1rem;color:var(--text-color)}
.process-hint{display:inline-flex;align-items:center;justify-content:center;gap:0.65rem;margin:1rem auto 0;font-size:0.9rem;color:var(--text-color);background:none;border-radius:999px;padding:0}
.process-hint__icon{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,rgba(199,124,74,0.9),rgba(199,124,74,0.55));display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.process-hint__icon svg{width:16px;height:16px}
.process-hint__text{display:inline-block;color:var(--text-color);text-align:center}
.section-heading--with-art{grid-template-columns:minmax(0,1fr) 200px;gap:2rem;align-items:center}
.section-heading--with-art .section-heading__text{max-width:720px}
.section-heading--with-art .section-heading__art{display:flex}
.section-heading__art{position:relative;grid-column:2;width:240px;height:220px;border-radius:24px;align-self:stretch}
.showroom-gallery .swiper-button-prev:after,.showroom-gallery .swiper-button-next:after{font-size:14px}
.sites-compare{position:relative;max-width:1400px;margin:2.5rem auto 0;border-radius:24px;overflow:hidden;background:var(--card-bg);box-shadow:0 28px 60px rgba(15,20,25,0.14)}
.sites-compare__inner{display:flex;position:relative}
.sites-compare__inner::after{content:"";position:absolute;top:-140px;right:-120px;width:520px;height:520px;background:radial-gradient(55% 55% at 50% 50%,rgba(255,204,204,0.5) 0%,rgba(255,231,231,0.15) 60%,rgba(255,240,240,0) 100%);pointer-events:none;z-index:0}
.sites-compare__wrapper{flex:0 0 60%;position:relative;overflow:hidden;display:flex}
.sites-compare__wrapper::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,0.35);z-index:1}
.sites-compare__background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.sites-compare__positive{position:relative;z-index:2;width:100%;padding:60px 60px;color:#ffffff;display:flex;flex-direction:column;gap:40px}
.sites-compare__header{display:flex;align-items:center;gap:20px}
.sites-compare__label,.sites-compare__negative-label{display:inline-flex;align-items:center;padding:6px 16px;border-radius:8px;background:rgba(255,255,255,0.9);color:#1a1a1a;font-size:14px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase}
.sites-compare__logo{padding:6px 16px;border-radius:8px;font-weight:700;font-size:16px;letter-spacing:0.12em;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.3);text-transform:uppercase}
.sites-compare__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px}
.sites-compare__item{display:flex;gap:18px;padding:20px 24px;border-radius:18px;background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.25);backdrop-filter:blur(12px)}
.sites-compare__icon{flex-shrink:0;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,0.28);color:rgba(50,191,124,0.95);font-weight:700;display:inline-flex;align-items:center;justify-content:center;font-size:18px}
.sites-compare__text{display:flex;flex-direction:column;gap:6px}
.sites-compare__key{margin:0;font-size:18px;font-weight:600}
.sites-compare__value{margin:0;font-size:14px;line-height:1.45;color:rgba(255,255,255,0.88)}
.sites-compare__negative{position:relative;flex:1;padding:60px 60px;display:flex;flex-direction:column;gap:32px;color:#2a2a2a;z-index:1}
.sites-compare__negative-header{display:flex;flex-direction:column;gap:16px}
.sites-compare__negative-text{margin:0;font-size:26px;font-weight:700;line-height:1.3}
.sites-compare__negative-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.sites-compare__negative-item{display:flex;gap:12px;align-items:flex-start;padding:18px 22px;border-radius:16px;background:rgba(255,230,230,0.9);border:1px solid rgba(255,214,214,0.8);font-size:14px;line-height:1.5;color:rgba(82,38,38,0.9)}
.sites-compare__negative-item span{font-size:20px;color:var(--accent-red,#d86161);flex-shrink:0;margin-top:2px}
.section-heading__art::before,.section-heading__art::after{content:'';position:absolute;width:168px;height:96px;border-radius:22px;background-size:cover;background-position:center;background-repeat:no-repeat;box-shadow:0 26px 36px rgba(94,62,33,0.32);filter:drop-shadow(0 18px 28px rgba(94,62,33,0.22))}
.section-heading__art::before{top:18px;left:24px;transform:rotate(-8deg);background-image:url('https://static.tildacdn.com/tild6666-3066-4736-b139-306364303839/f40f4af04b8863b7bf60.jpg')}
.section-heading__art::after{bottom:22px;right:18px;transform:rotate(9deg);box-shadow:0 32px 42px rgba(94,62,33,0.38);background-image:url('https://static.tildacdn.com/tild6666-3631-4230-b937-663339386334/13_1.jpg');filter:drop-shadow(0 22px 30px rgba(94,62,33,0.24))}
.section-heading__text .section-eyebrow{position:absolute;top:0;left:0}
.section-heading--plain .section-lead{grid-column:2;max-width:420px}
.reviews-section{padding:4.5rem 0}
.reviews{position:relative;width:100%;max-width:none;margin:0;padding-right:0}
.reviews-swiper .swiper-slide{height:auto}
.review-card{background:var(--card-bg);border-radius:24px;padding:2.25rem;box-shadow:none;border:1px solid rgba(16,21,28,0.08);height:100%;display:flex;flex-direction:column;gap:1.5rem;transition:transform 0.2s ease,border-color 0.2s ease,box-shadow 0.2s ease}
.review-card:hover{transform:none !important;border-color:rgba(16,21,28,0.12) !important;box-shadow:none !important}
.review-card__text{margin:0;font-size:0.95rem;line-height:1.7;color:var(--text-color)}
.review-card__meta{display:flex;flex-direction:column;gap:0.25rem;font-size:0.85rem;color:var(--secondary-text)}
.review-card__author{font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-color)}
.reviews-swiper .swiper-button-prev,.reviews-swiper .swiper-button-next{width:44px;height:44px;border-radius:999px;background:rgba(0,0,0,0.08);color:rgba(0,0,0,0.6);transition:background 0.2s ease,transform 0.2s ease;top:calc(50% - 30px)}
.reviews-swiper .swiper-button-prev:hover,.reviews-swiper .swiper-button-next:hover{background:rgba(0,0,0,0.16);transform:translateY(-2px)}
.reviews-swiper .swiper-button-prev:after,.reviews-swiper .swiper-button-next:after{font-size:16px}
.reviews-swiper .swiper-pagination{bottom:-16px}
.cert-title{margin:0 0 1rem;text-align:center;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent-color);font-size:0.85rem;font-weight:600}
.certificate-box{width:100%;position:relative;padding:0}
.certificate-box .swiper{overflow:hidden;width:100%;padding:0 2.4rem 2.2rem}
.certificate-box .swiper-slide{height:auto;display:flex;justify-content:center}
.certificate-box .gallery-item{display:block;width:100%;border:none;background:transparent;padding:0;cursor:pointer;border-radius:16px;overflow:hidden;transition:box-shadow 0.25s ease, transform 0.0s}
.certificate-box .gallery-item img{width:100%;height:auto;display:block;border-radius:12px;box-shadow:none}
.certificate-box .gallery-item:hover{transform:translateY(-6px);border-color:rgba(16,21,28,0.16);box-shadow:0 18px 42px rgba(15,20,25,0.08)}
.certificate-box .swiper-pagination{bottom:0}
.certificate-box .swiper-button-prev,.certificate-box .swiper-button-next{display:none}
.showroom{background:rgb(250,250,250) !important;border-top:1px solid rgb(224,224,224);padding:2.5rem 0}
.showroom-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:stretch;position:relative}
.showroom-text p{margin-bottom:1rem;font-size:0.875rem;color:var(--secondary-text)}
.showroom-gallery{margin-top:1.5rem;position:relative;width:100%;max-width:100% !important}
.showroom-gallery .swiper{width:100%;padding:0 0 2.2rem;overflow:hidden}
.showroom-gallery .swiper-slide{display:flex;justify-content:center;align-items:stretch;width:100% !important}
.showroom-gallery .swiper-slide:last-child{margin-right:0 !important}
.showroom-gallery .gallery-item{border:none;background:none;padding:0;cursor:pointer;border-radius:16px;overflow:hidden;transition:transform 0.3s ease;display:block;width:100%;aspect-ratio:4 / 3}
.showroom-gallery .gallery-item img{display:block;width:100%;height:100%;object-fit:cover;border-radius:16px}
.showroom-gallery .gallery-item:hover{transform:translateY(-4px)}
.showroom-gallery .swiper-button-prev,.showroom-gallery .swiper-button-next{width:38px;height:38px;background:rgba(0,0,0,0.32);border-radius:50%;color:#fff;top:50%;transform:translateY(-50%)}
.showroom-gallery .swiper-button-prev{left:4px}
.showroom-gallery .swiper-button-next{right:4px}
.showroom-gallery .swiper-pagination{bottom:0}
.site-footer{background:rgb(30,30,30);color:var(--card-bg);padding:1.5rem 0}
.site-footer .container{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:0.75rem}
.site-footer .privacy-link{color:var(--card-bg);font-size:0.85rem;text-decoration:none}
.site-footer .developer{font-size:0.85rem;color:rgba(255,255,255,0.8)}
.site-footer .developer a{color:var(--accent-color);text-decoration:none}
.site-footer .privacy-link:hover,.site-footer .developer a:hover{text-decoration:underline}
.image-lightbox{position:fixed;inset:0;background:rgba(0,0,0,0.85);display:none;align-items:center;justify-content:center;z-index:2000;padding:2rem}
.image-lightbox.active{display:flex}
.image-lightbox__content{max-width:min(90vw,960px);width:100%;max-height:90vh;display:flex;align-items:center;justify-content:center}
.image-lightbox__img{width:100%;height:auto;border-radius:12px;box-shadow:0 30px 60px rgba(0,0,0,0.35)}
.image-lightbox__close{position:absolute;top:1.5rem;right:1.5rem;background:none;border:none;color:#fff;font-size:2.5rem;line-height:1;cursor:pointer;opacity:0.7;transition:opacity 0.3s ease}
.image-lightbox__close:hover{opacity:1}
.showroom-map{position:relative;display:flex;height:100%}
.map-frame{position:relative;width:100%;height:100%;min-height:420px;border-radius:16px;overflow:hidden;box-shadow:0 24px 50px rgba(0,0,0,0.18);background:#000}
.map-overlay a{color:var(--card-bg);text-decoration:none}
.overlay-item{display:flex;align-items:center;gap:0.5rem}
.overlay-item svg{width:18px;height:18px;fill:var(--accent-color);flex-shrink:0}
#quiz-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);justify-content:center;align-items:center;z-index:1000}
#quiz-modal.active{display:flex}
.quiz-container{position:relative;width:92%;max-width:960px;border-radius:20px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,0.25)}
.quiz-content{display:flex;flex-wrap:wrap;background:var(--card-bg)}
.quiz-aside{flex:0 0 320px;background:linear-gradient(180deg,rgb(20,25,31) 0%,rgb(12,17,22) 100%);color:var(--card-bg);padding:2.5rem 2rem;display:flex;flex-direction:column;gap:1rem}
.quiz-aside small{font-size:0.75rem;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.6)}
.quiz-aside h3{margin:0;font-size:1.4rem;font-weight:700;line-height:1.2;text-transform:uppercase;color:var(--card-bg)}
.quiz-highlight{color:var(--accent-color);display:block;font-weight:700}
.quiz-aside p{margin:0 0 0.25rem;font-size:0.9rem;color:rgba(255,255,255,0.7)}
.quiz-aside figure{margin:0;border-radius:16px;overflow:hidden;position:relative;background:rgba(255,255,255,0.08)}
.quiz-aside figure img{display:block;width:100%;height:auto}
.quiz-aside ul{padding-left:1.2rem;display:flex;flex-direction:column;gap:0.2rem;font-size:0.9rem;color:rgba(255,255,255,0.75)}
.quiz-aside ul li::marker{color:var(--accent-color)}
.quiz-main{flex:1;padding:2.5rem 2.5rem 2rem;background:var(--card-bg)}
.quiz-progress{width:100%;height:8px;border-radius:4px;background:var(--light-bg);overflow:hidden;margin-bottom:2rem}
.quiz-progress-bar{height:100%;width:0;background:var(--accent-color);transition:width 0.3s ease}
.quiz-step{display:none;flex-direction:column;gap:1rem}
.quiz-step.active{display:flex}
.quiz-step h4{margin:0;font-size:1.3rem;color:var(--text-color)}
.quiz-step p{margin:0;color:var(--muted-text);font-size:0.95rem}
.quiz-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.quiz-option{position:relative;border:1px solid var(--border-color);border-radius:14px;padding:18px;background:var(--alt-bg);display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;cursor:pointer;transition:border-color 0.2s ease,background 0.2s ease;font-weight:500}
.quiz-option input{position:absolute;inset:0;opacity:0;cursor:pointer}
.quiz-option span{color:var(--text-color)}
.quiz-option__img{width:100%;height:70px;border-radius:10px;background:var(--light-bg);color:var(--placeholder-text);font-size:0.75rem;letter-spacing:0.1em;text-transform:uppercase;display:flex;align-items:center;justify-content:center}
.quiz-option.selected,.quiz-option input:checked + .quiz-option__img{border-color:var(--accent-color);background:rgba(199,124,74,0.12)}
.quiz-actions{display:flex;justify-content:space-between;gap:1rem;margin-top:1.5rem}
.quiz-actions button{flex:1;padding:0.75rem 1rem;border:none;border-radius:8px;font-size:0.875rem;font-weight:600;cursor:pointer;transition:background 0.2s ease}
.quiz-actions .prev{background:var(--light-bg);color:var(--text-color)}
.quiz-actions .next,.quiz-actions .submit{background:var(--accent-color);color:var(--card-bg)}
.quiz-actions .prev:hover{background:var(--border-color)}
.quiz-actions .next:hover,.quiz-actions .submit:hover{background:var(--accent-dark)}

/* Visually disable the "Next" button when it is inactive */
.quiz-actions .next:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}

/* === fix38: Quiz option label sizing & spacing ===
   Reduce the font size of quiz option titles and eliminate excessive margin
   so long names like "Лиственница" wrap gracefully and sit closer to their image. */
.quiz-option span {
  font-size: 0.9rem;
  line-height: 1.35;
  margin-top: 0.3rem;
  flex-grow: 0;
}
.quiz-close{position:absolute;top:1rem;right:1rem;background:rgba(0,0,0,0.35);color:var(--card-bg);border:none;width:36px;height:36px;border-radius:50%;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.quiz-input{width:100%;padding:0.75rem 1rem;border:1px solid var(--border-color);border-radius:10px;font-size:0.95rem;color:var(--text-color);background:var(--alt-bg)}
.quiz-input:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 2px rgba(199,124,74,0.15)}
.btn-primary{padding:0.75rem 1.75rem;background:var(--accent-color);color:var(--card-bg);border:none;border-radius:999px;font-size:0.95rem;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;cursor:pointer;transition:background 0.2s ease,transform 0.2s ease,box-shadow 0.2s ease;box-shadow:0 4px 12px rgba(199,124,74,0.3)}
.btn-primary:hover{background:var(--accent-dark);transform:translateY(-2px);box-shadow:0 6px 20px rgba(199,124,74,0.4)}
.hero .btn-primary{margin-top:1rem;box-shadow:0 4px 16px rgba(0,0,0,0.3)}
#quiz-modal,#cta-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);justify-content:center;align-items:center;z-index:1000}
#quiz-modal.active,#cta-modal:target{display:flex}
.cta-container{background:var(--card-bg);border-radius:0;padding:3rem 2.5rem;width:90%;max-width:540px;position:relative;box-shadow:0 24px 50px rgba(0,0,0,0.3);display:flex;flex-direction:column;gap:0}
.cta-container h2{margin:0 0 1.5rem 0;font-size:32px;font-weight:700;line-height:1.2;color:var(--text-color);text-align:left;letter-spacing:0.5px}
.cta-subtitle{font-size:16px;line-height:1.5;color:var(--text-color);margin:0 0 2rem 0}
.cta-privacy{margin:1.5rem 0 0 0;font-size:13px;line-height:1.4;color:var(--text-color);text-align:left}
.cta-privacy a{color:var(--text-color);text-decoration:underline}
.cta-container input{width:100%;padding:18px 20px;border:1px solid #d0d0d0;border-radius:0;font-size:16px;line-height:1.5;color:var(--text-color);background:var(--card-bg);margin-bottom:1rem;transition:border-color 0.3s;box-sizing:border-box}
.cta-container input:focus{outline:none;border-color:var(--accent-color);box-shadow:none}
.cta-submit,.cta-container button[type="submit"]{width:100%;padding:18px 20px;background:var(--accent-color);color:var(--card-bg);border:none;border-radius:0;font-size:16px;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:background 0.3s;margin-bottom:0}
.cta-submit:hover,.cta-container button[type="submit"]:hover{background:var(--accent-dark);transform:none}
.cta-close{position:absolute;top:1.5rem;right:1.5rem;background:none;border:none;color:var(--text-color);font-size:2rem;line-height:1;cursor:pointer;opacity:0.6;transition:opacity 0.3s}
.cta-close:hover{opacity:1}
.cta-trigger{display:inline-flex;align-items:center;justify-content:center;padding:0.6rem 1.4rem;border-radius:999px;background:var(--accent-color);color:var(--card-bg);font-size:0.85rem;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;transition:background 0.2s ease}
.cta-trigger:hover{background:var(--accent-dark)}
.faq{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 64px}
.faq-item{padding:26px 0;border-top:1px solid rgba(0,0,0,0.08)}
.faq-item:nth-child(-n + 2){border-top:none}
.faq-item:nth-last-child(-n + 2){border-bottom:1px solid rgba(0,0,0,0.08)}
.faq-question{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;font-size:18px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;line-height:1.35;color:var(--text-color)}
.faq-question::after{content:'+';font-size:28px;line-height:1;color:rgba(0,0,0,0.4);transition:transform 0.25s ease,color 0.25s ease}
.faq-item.active .faq-question::after{transform:rotate(45deg);color:rgba(0,0,0,0.65)}
.faq-answer{display:none;margin-top:14px;font-size:16px;line-height:1.7;color:rgba(0,0,0,0.62)}
.faq-item.active .faq-answer{display:block}
.help-choice{background:rgb(250,250,250);padding:3rem 0}
.help-card{background:linear-gradient(135deg,rgba(199,124,74,0.1) 0%,rgba(255,255,255,0.9) 100%);border:1px solid rgba(199,124,74,0.25);border-radius:24px;padding:2.5rem 2.25rem;box-shadow:0 28px 55px rgba(0,0,0,0.08);display:grid;gap:2rem}
.help-card__header h2{margin:0.5rem 0 1.25rem 0;color:var(--text-color)}
.help-card__eyebrow{display:inline-block;padding:0.35rem 0.85rem;background:rgba(199,124,74,0.15);border-radius:999px;text-transform:uppercase;letter-spacing:0.08em;font-size:0.75rem;font-weight:600;color:var(--accent-color)}
.help-card__intro{margin:0;font-size:0.95rem;color:var(--muted-text);max-width:520px}
.help-card__body{display:flex;flex-wrap:wrap;gap:2rem;align-items:center}
.help-card__list{list-style:none;padding:0;margin:0;flex:1 1 320px;display:flex;flex-direction:column;gap:1rem}
.help-card__list li{display:flex;align-items:flex-start;gap:0.85rem;font-size:0.95rem;line-height:1.55;color:var(--text-color)}
.help-card__list li svg{width:26px;height:26px;flex-shrink:0;fill:var(--accent-color);background:rgba(199,124,74,0.15);border-radius:50%;padding:4px}
.help-card__actions{display:flex;flex-direction:column;gap:0.85rem;flex:0 0 220px}
.help-btn{display:flex;align-items:center;gap:0.75rem;padding:0.85rem 1.25rem;border-radius:14px;font-weight:600;font-size:0.95rem;text-decoration:none;color:#fff;box-shadow:0 18px 24px rgba(0,0,0,0.1);transition:transform 0.2s ease,box-shadow 0.2s ease;border:none;cursor:pointer}
.help-btn:hover{transform:translateY(-2px);box-shadow:0 22px 32px rgba(0,0,0,0.12)}
.help-btn__icon svg{width:22px;height:22px;fill:currentColor}
.help-btn--whatsapp{ /* removed platform-specific background to unify colours */ }
.help-btn--telegram{ /* removed platform-specific background to unify colours */ }
.certificate-box .swiper,.showroom-gallery .swiper{overflow:hidden}
.certificate-box .swiper-wrapper,.showroom-gallery .swiper-wrapper{display:flex}
.certificate-box .swiper-slide,.showroom-gallery .swiper-slide{flex-shrink:0}
.video-play-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:88px;height:88px;border-radius:50%;background:radial-gradient(64.29% 64.29% at 50% 50%,rgba(255,255,255,0.85) 0%,rgba(255,255,255,0.15) 100%);box-shadow:0 30px 50px rgba(0,0,0,0.35);display:flex;align-items:center;justify-content:center;color:var(--accent-color);pointer-events:none !important;transition:opacity 0.3s ease,transform 0.3s ease,background 0.3s ease !important;z-index:1}
.video-wrapper.playing .video-play-button{opacity:0 !important;pointer-events:none !important}
.video-wrapper:not(.playing) .video-play-button{opacity:1 !important;pointer-events:auto !important}
.video-play-button::after{content:'';position:absolute;inset:-16px;border-radius:50%;background:rgba(255,255,255,0.12);filter:blur(12px);z-index:-1}
.video-play-button svg{width:34px;height:34px;margin-left:4px}
.video-wrapper:hover .video-play-button{transform:translate(-50%,-50%) scale(1.06);background:radial-gradient(64.29% 64.29% at 50% 50%,rgba(255,255,255,0.95) 0%,rgba(255,255,255,0.25) 100%)}
.section-heading{display:grid;grid-template-columns:minmax(0,1fr) 240px minmax(0,320px);gap:2.5rem;align-items:center;margin-bottom:2.5rem}
.section-heading__text{position:relative;display:flex;flex-direction:column;gap:1.2rem;padding-top:2.25rem;grid-column:1;max-width:680px}
.section-eyebrow{display:inline-flex;align-items:center;gap:0.5rem;padding:0.35rem 0.95rem;border-radius:999px;background:rgba(199,124,74,0.12);color:var(--accent-color);text-transform:uppercase;letter-spacing:0.14em;font-size:0.7rem;font-weight:600;margin-bottom:1rem}
.section-heading__text h2{margin:0}
.section-heading__art--leaf{display:flex;align-items:center;justify-content:center;padding:1.5rem}
.section-heading__art--leaf svg{width:100%;height:auto;filter:drop-shadow(0 18px 32px rgba(173,89,45,0.25))}
.section-lead{grid-column:3;margin:0;font-size:18px;font-weight:400;line-height:1.6;letter-spacing:0.01em;color:#545454;max-width:540px}
.section-heading--plain{grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:2.25rem}
.section-heading--plain .section-heading__art{display:none}
.section-heading--stretch{grid-template-columns:minmax(0,1fr);gap:1.75rem}
.section-heading--stretch .section-heading__text,.section-heading--stretch .section-lead{grid-column:1;max-width:none}
.section-heading--solo{grid-template-columns:minmax(0,1fr);gap:1.5rem}
.section-heading--solo .section-heading__text{max-width:720px}
.section-heading--solo .section-heading__art,.section-heading--solo .section-lead{display:none}
a.cta-trigger{display:inline-flex;align-items:center;justify-content:center;gap:0.35rem;padding:0.7rem 1.55rem;border-radius:999px;background:var(--accent-color);color:var(--card-bg);font-size:0.9rem;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;text-decoration:none;box-shadow:0 10px 24px rgba(199,124,74,0.18);transition:transform 0.2s ease,box-shadow 0.2s ease,background-color 0.2s ease}
a.cta-trigger:link,a.cta-trigger:visited{color:var(--card-bg);text-decoration:none}
a.cta-trigger:hover,a.cta-trigger:focus{color:var(--card-bg);text-decoration:none;background:var(--accent-dark);box-shadow:0 12px 28px rgba(199,124,74,0.22);transform:translateY(-1px)}
a.cta-trigger:focus-visible{outline:3px solid rgba(199,124,74,0.35);outline-offset:3px}
.product-card .cta-trigger,.project-card .cta-trigger{margin-top:auto;margin-bottom:1rem}
.product-card .cta-trigger{align-self:center}
.project-card .cta-trigger{align-self:flex-start}
button,input[type="button"],input[type="submit"],input[type="reset"],.cta-submit,.offer-submit,.quiz-actions button,.help-btn,.project-card button{text-decoration:none;font-family:inherit}
.map-overlay{bottom:0 !important;top:auto !important}
.cta-success,.quiz-success{text-align:center;padding:1.5rem 1rem}
.cta-success h3,.quiz-success h3{font-size:1.5rem;margin-bottom:0.5rem}
.showroom-map__iframe{position:absolute;inset:0;width:100%;height:500px;min-height:500px;border:0}
.showroom-map .map-frame{position:relative}
.showroom-map .map-frame .map-overlay{position:absolute !important;bottom:0 !important;left:0 !important;right:0 !important;background:rgba(0,0,0,0.6);color:var(--card-bg);padding:0.75rem 1rem;font-size:0.75rem;display:flex;flex-direction:column;gap:0.5rem;z-index:2}
.showroom-map .map-frame .map-overlay a{color:var(--card-bg);text-decoration:none}
.showroom-map .map-frame .overlay-item{display:flex;align-items:center;gap:0.5rem}
.showroom-map .map-frame .overlay-item svg{width:18px;height:18px;fill:var(--accent-color);flex-shrink:0}
@media (max-width:1200px){
.offer-box{grid-template-columns:1fr;padding:2.5rem}
.offer-box__details{border-right:none;padding-right:0}
.offer-box__form{padding-left:0}
}

/* Ensure mobile menu contact info stacks phone and call link vertically */
.mobile-menu__info .contact-item > div:not(.contact-item__messengers) {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Style the promo leaf image to scale within the art container */
#promo-leaf {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* When both solo and with-art modifiers are applied, ensure the art is visible */
.section-heading--with-art.section-heading--solo .section-heading__art {
  display: flex;
}

/* Hide decorative pseudo-elements on headings where no-decor is specified */
.section-heading__art.no-decor::before,
.section-heading__art.no-decor::after {
  display: none;
  content: none;
}

/* Mobile overrides for quiz actions and options */
@media (max-width:640px) {
  /* Keep quiz navigation buttons on one line */
  .quiz-actions {
    flex-direction: row !important;
  }
  .quiz-actions button {
    width: auto !important;
    flex: 1 !important;
  }
  /* Show two quiz options per row */
  .quiz-options {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* Make each quiz option vertical to avoid text overlap */
  .quiz-option {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.4rem !important;
    text-align: left !important;
  }
  .quiz-option__img {
    width: 56px !important;
    height: 56px !important;
    margin-bottom: 0.35rem !important;
  }
  .quiz-option span {
    font-size: 0.8rem !important;
    line-height: 1.2 !important;
  }
}
@media (max-width:1024px){
.certificate-box .swiper{padding:0 1.8rem 2rem}
.quiz-aside{flex:1 1 100%;align-items:center;text-align:center}
.quiz-main{flex:1 1 100%}
.quiz-options{grid-template-columns:1fr}
}
@media (max-width:992px){
.navbar__wrapper{width:100%;justify-content:space-between;padding:calc(0.85rem + env(safe-area-inset-top,0px)) 0 0.85rem}
.navbar ul,
.navbar__menu{display:none}
.navbar__mobile{position:static;transform:none;display:inline-flex;width:100%;align-items:center;justify-content:space-between;gap:0.75rem;padding:0.32rem 0.45rem 0.42rem}
.navbar__mobile-contact{display:flex;align-items:center;gap:0.38rem;min-width:0}
.navbar__mobile-contact br{display:block}
.navbar__mobile-contact svg{width:20px;height:20px}
.navbar__mobile-contact div{display:flex;flex-direction:column;gap:0.16rem;line-height:1.2}
.navbar__mobile-contact strong{font-size:0.96rem;display:block;line-height:1.18}
.navbar__mobile-call{font-size:0.72rem;line-height:1.12;margin-top:0;display:inline-block}
.navbar__toggle{margin-left:auto}
.video-content{grid-template-columns:1fr;gap:1.75rem}
.video-wrapper{min-height:260px}
.video-text{padding:1.75rem}
.section-heading--with-art{grid-template-columns:1fr;gap:1.5rem}
.section-heading--with-art .section-heading__art{display:none}
.section-heading--plain .section-lead{max-width:320px}
.section-heading--stretch{grid-template-columns:1fr}
.section-heading--stretch .section-heading__text,.section-heading--stretch .section-lead{max-width:none}
.section-heading--solo{grid-template-columns:1fr}
.sites-compare__inner{flex-direction:column}
.sites-compare__wrapper,.sites-compare__negative{flex:none;width:100%}
.sites-compare__positive{padding:40px}
.sites-compare__negative{padding:40px}
.section-heading__art::before,.section-heading__art::after{width:132px;height:76px}
.section-heading__art::before{top:12px;left:16px}
.section-heading__art::after{bottom:16px;right:14px}
.reviews-section{padding:3.5rem 0}
.showroom-gallery{max-width:100%;margin-bottom:1.5rem}
.showroom-gallery .swiper{padding:0 18px 2rem}
.showroom-gallery .swiper-slide{height:auto;justify-content:center}
.showroom-gallery .swiper-button-prev,.showroom-gallery .swiper-button-next{display:none}
.showroom-gallery .swiper-pagination{position:static;margin-top:1rem}
.faq{grid-template-columns:1fr;gap:0}
.hero{padding-top:4rem;height:auto}
.section-heading{grid-template-columns:minmax(0,1fr) 200px minmax(0,1fr);gap:2rem}
.section-heading--plain{grid-template-columns:minmax(0,1fr)}
.section-heading__art{width:200px;height:180px}
}
/* На планшетах и телефонах в info-bar скрываем текст в мессенджерах, оставляем только иконки */
@media (max-width:992px){
.info-bar .contact-item__messengers .messenger span{display:none}
.info-bar .contact-item__messengers .messenger{padding:6px;width:32px;height:32px;justify-content:center}
.info-bar .contact-item__messengers .messenger svg{width:18px;height:18px}
}
@media (max-width:768px){
.info-bar{display:none}
h1{font-size:29px;line-height:39px}
h2{font-size:32px;line-height:38px}
.offer-benefits{font-size:0.9rem}
.section-heading__text,.section-heading__art{grid-column:1;max-width:100%}
.section-heading__text,.section-heading__art,.section-lead{grid-column:1;max-width:100%}
.section-heading__text,.section-lead{grid-column:1;max-width:100%}
.section-heading__art{display:none}
.section-heading--plain{grid-template-columns:1fr}
.section-heading--plain .section-lead{display:none}
.section-lead{font-size:16px;line-height:1.55;display:none}
.section-heading--solo .section-heading__text{max-width:100%}
.reviews-swiper .swiper-button-prev,.reviews-swiper .swiper-button-next{display:none}
.review-card{padding:1.8rem;border-radius:20px}
.certificate-box .swiper{padding:0.5rem 0 1.8rem}
.certificate-box .swiper-slide{justify-content:center}
.certificate-box .gallery-item{max-width:420px;margin:0 auto}
.certificate-box .swiper-pagination{position:static;margin-top:1rem;display:flex;justify-content:center}
.offer-box{padding:1.85rem 1.45rem;border-radius:24px;gap:1.45rem;background:linear-gradient(180deg,rgba(255,240,227,0.6) 0%,#ffffff 100%);border:1px solid rgba(199,124,74,0.15);box-shadow:0 22px 44px rgba(199,124,74,0.16)}
.offer-box__details,.offer-box__form{background:none;padding:0;border-radius:0;border:none;box-shadow:none}
.offer-box__details{padding-right:0;border-right:none;padding-bottom:1.1rem}
.offer-box__form{padding-left:0;padding-top:0.15rem}
.offer-form__intro{padding-left:0.9rem;font-size:1.02rem}
.offer-badge{align-self:center}
.offer-submit{align-self:stretch}
.showroom-gallery .gallery-item{aspect-ratio:3 / 2}
.contact-item{max-width:100%}
.info-bar .container{gap:1.5rem}
.faq-item{padding:22px 0}
.faq-question{font-size:16px;letter-spacing:0.06em}
.faq-question::after{font-size:24px}
.faq-answer{font-size:15px;line-height:1.65}
.map-frame{height:320px;min-height:320px}
.help-card{padding:2rem 1.5rem}
.help-card__body{flex-direction:column;align-items:stretch}
.help-card__actions{flex-direction:row;justify-content:space-between}
.help-btn{flex:1;justify-content:center}
.hero{height:100vh;padding:3rem 0;min-height:100vh}
.hero__content{align-items:center;text-align:center;gap:1.25rem}
.hero h1{font-size:29px;line-height:39px}
.hero__sub{font-size:0.95rem;line-height:1.6}
.hero__features{width:100%;grid-template-columns:1fr;gap:0.85rem;text-align:left}
.hero__feature{justify-content:flex-start;text-align:left}
.hero__feature p{text-align:left}
.hero__cta-btn{width:100%;justify-content:center}
.hero__hint{max-width:100%}
.section-heading{grid-template-columns:1fr !important;display:flex;flex-direction:column;gap:1.25rem}
.section-heading__text,.section-lead,.section-heading__art{max-width:100% !important;width:100% !important}
section h2{font-size:32px;line-height:38px;width:100%;text-align:left}
.showroom-grid{grid-template-columns:1fr;gap:1.75rem}
.showroom-gallery{max-width:100%}
.showroom-gallery .swiper{width:100% !important;max-width:100% !important;padding:0 18px 1.75rem !important}
.showroom-gallery .swiper-wrapper{width:100% !important}
.showroom-gallery .swiper-slide{height:auto;width:calc(100% - 36px) !important;margin-right:18px !important;display:flex;justify-content:center}
.showroom-gallery .swiper-slide:last-child{margin-right:0 !important}
.showroom-gallery .swiper-button-prev,.showroom-gallery .swiper-button-next{display:none !important}
.showroom-gallery .swiper-pagination{position:static !important;margin-top:0.75rem !important}
#offer .offer-box{display:flex;flex-direction:column;gap:1.35rem;padding:1.75rem 1.3rem;border-radius:24px;background:#ffffff;border:none;box-shadow:0 26px 52px rgba(199,124,74,0.12)}
#offer .offer-box__details,#offer .offer-box__form{background:none;padding:0;border:none;border-radius:0;box-shadow:none}
#offer .offer-box__details{display:flex;flex-direction:column;gap:1.15rem;border-right:none;border-bottom:1px solid rgba(199,124,74,0.18);padding-bottom:1rem}
#offer .offer-box__form{padding-top:0.25rem}
#offer .offer-box__form form{gap:0.75rem}
#offer .offer-box__form input,#offer .offer-box__form textarea{border-radius:14px}
#offer .offer-submit{align-self:stretch}
}
@media (max-width:640px){
.quiz-container{width:94%}
.quiz-main{padding:2rem 1.5rem}
.quiz-actions{flex-direction:row}
.quiz-actions button{flex:1;width:auto}
}
@media (max-width:576px){
.step{padding:1.5rem 1.25rem}
.step-number{font-size:2.2rem;gap:0.5rem}
.sites-compare__positive,.sites-compare__negative{padding:32px 24px}
.sites-compare__item,.sites-compare__negative-item{padding:16px 18px}
.sites-compare__key{font-size:16px}
.sites-compare__negative-text{font-size:22px}
.process-hint{margin:1.5rem auto 0}
.site-footer .container{flex-direction:column;align-items:flex-start}
.section-heading{gap:1rem}
.showroom-grid{gap:1.5rem}
.showroom-gallery .swiper{padding:0 12px 1.6rem !important}
.showroom-gallery .swiper-slide{width:calc(100% - 24px) !important;margin-right:12px !important}
}
@media (max-width:480px){
.help-card__actions{flex-direction:column}
}
@media (min-width:992px){
.process-hint{display:flex;width:100%;justify-content:center;margin-left:auto;margin-right:auto}
.showroom-gallery .swiper-slide{width:auto !important}
.showroom-gallery .showroom-swiper .swiper-slide{width:calc((100% - 24px) / 2) !important;margin-right:24px}
}
@media (min-width:993px){
.mobile-menu{display:none !important}
}

/* QUIZ: one height across steps + sticky actions */
.quiz{display:flex;flex-direction:column;min-height:min(720px,100vh - 120px)}
.quiz-viewport{flex:1;overflow:auto}
.quiz-actions{position:sticky;bottom:0;z-index:5;background:rgba(255,255,255,0.9);backdrop-filter:saturate(120%) blur(6px);-webkit-backdrop-filter:saturate(120%) blur(6px);border-top:1px solid rgba(0,0,0,0.06);padding:0.75rem 1rem}
@media (prefers-color-scheme: dark){
  /* Override dark scheme: keep quiz actions background light to match the rest of the quiz */
  .quiz-actions{background:rgba(255,255,255,0.9);border-top:1px solid rgba(0,0,0,0.06)}
}
.quiz-actions .next,.quiz-actions .prev{min-width:120px}

/*
 * Constrain the answers area to a fixed height and allow scrolling when content overflows.
 * This wrapper is applied around quiz options or input fields on each step (see index.php).
 */
.quiz-answers{max-height:160px;overflow-y:auto}

/*
 * Ограничиваем высоту контейнера с вариантами (quiz-options) на всех шагах
 * квиза. Это обеспечивает фиксированный размер области ответов (160px),
 * аналогично блоку .quiz-answers. Если содержимое не помещается,
 * появляется вертикальная прокрутка. Такое поведение нужно, чтобы
 * варианты или поля ввода не вытесняли навигационные кнопки вниз.
 */
.quiz-step .quiz-options{
  max-height:160px;
  overflow-y:auto;
  align-items:start;
  justify-items:stretch;
}

/*
 * List-view variant for quiz options. When the 'list-view' class is applied to a
 * .quiz-options container, it hides thumbnails and displays options similar to
 * the first step, arranged in columns for a more compact layout. Remove the class
 * to return to the default image-based layout.
 */
.quiz-options.list-view{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.quiz-options.list-view .quiz-option{display:flex;align-items:center;gap:.6rem;padding:.65rem .75rem;border-radius:12px;background:rgba(0,0,0,0.03)}
@media (prefers-color-scheme: dark){.quiz-options.list-view .quiz-option{background:rgba(255,255,255,0.06)}}
.quiz-options.list-view .quiz-option__img{display:none !important}

/* Step 0: simple vertical list, no images */
.quiz-step[data-step="0"] .quiz-option__img{display:none !important}
.quiz-step[data-step="0"] .quiz-options{display:flex;flex-direction:column;gap:.6rem}
.quiz-step[data-step="0"] .quiz-option{display:flex;align-items:center;gap:.6rem;padding:.65rem .75rem;border-radius:12px;background:rgba(0,0,0,0.03)}
@media (prefers-color-scheme: dark){
  .quiz-step[data-step="0"] .quiz-option{background:rgba(255,255,255,0.06)}
}
.quiz-step[data-step="0"] .quiz-option input[type="checkbox"],
.quiz-step[data-step="0"] .quiz-option input[type="radio"]{width:18px;height:18px}

/* Other steps: compact cards with thumbnails */
.quiz-step:not([data-step="0"]) .quiz-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
@media (max-width:768px){
  .quiz-step:not([data-step="0"]) .quiz-options{grid-template-columns:1fr}
}
.quiz-option{display:flex;gap:.6rem;align-items:center;padding:.65rem .75rem;border-radius:12px;background:rgba(0,0,0,0.03)}
@media (prefers-color-scheme: dark){
  .quiz-option{background:rgba(255,255,255,0.06)}
}
.quiz-option__img{width:84px;height:84px;border-radius:10px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#eee}
@media (max-width:768px){.quiz-option__img{width:64px;height:64px}}
.quiz-option span{font-size:15px;line-height:1.4}

.section-heading__art--leaf img{width:100%;height:auto;display:block;filter:drop-shadow(0 14px 28px rgba(0,0,0,.18))}
.section-heading__art--leaf::before,.section-heading__art--leaf::after{content:none !important;background:none !important;box-shadow:none !important;filter:none !important}


/* --- Map overlay pinned to bottom over the map --- */
.map-frame{position:relative;}
.showroom-map__iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block; z-index:1;}
.map-overlay{position:absolute !important; left:0; right:0; bottom:0 !important; top:auto !important; z-index:4; 
  background:rgba(0,0,0,.50); color:#fff; padding:.75rem 1rem; display:flex; flex-direction:column; gap:.5rem; pointer-events:auto;}
.map-frame .overlay-item{display:flex; align-items:center; gap:.5rem;}
.map-frame .overlay-item svg{width:18px; height:18px; fill:var(--accent-color, #F47A45); flex-shrink:0;}
.map-overlay a{ color: var(--card-bg, #fff); text-decoration: none; }



/* --- Quiz options: left aligned + compact grid --- */
/* Merged into .quiz-step .quiz-options rule above */
.quiz-option{
  display:grid;
  grid-template-columns: 20px 56px minmax(0,1fr); /* input + thumb + text */
  gap:.6rem; align-items:start; justify-items:start;
  text-align:left !important; width:100%;
  padding:.55rem .7rem; border-radius:12px; background:rgba(0,0,0,0.03);
}
.quiz-option input{ align-self:start; margin-top:.2rem; }
.quiz-option__img{ width:56px; height:56px; border-radius:10px; background:#eee; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.quiz-option span{ font-size:15px; line-height:1.35; }

/* Step 0 = simple list, no thumbs */
.quiz-step[data-step="0"] .quiz-option__img{ display:none !important; }
.quiz-step[data-step="0"] .quiz-option{ grid-template-columns: 20px minmax(0,1fr); }
.quiz-step[data-step="0"] .quiz-options{ display:flex; flex-direction:column; gap:.6rem; }

/* Grid columns for other steps: desktop=4, tablet=3, mobile=2 */
@media (min-width:1200px){
  .quiz-step:not([data-step="0"]) .quiz-options{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; }
}
@media (min-width:768px) and (max-width:1199px){
  .quiz-step:not([data-step="0"]) .quiz-options{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem; }
}
@media (max-width:767px){
  .quiz-step:not([data-step="0"]) .quiz-options{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }
}

/*
 * Equalise heights for quiz options with images.  When the quiz uses
 * thumbnail cards (steps other than the first), enforce equal height
 * rows using grid-auto-rows and stretch each option to fill its cell.
 */
.quiz-step:not([data-step="0"]) .quiz-options{
  grid-auto-rows: 1fr;
  align-items: stretch;
}

/* Each card should fill its grid cell and arrange its contents vertically.
 * This prevents cards with longer text from becoming taller than their
 * neighbours.  Padding and flex direction ensure consistent spacing.  */
.quiz-step:not([data-step="0"]) .quiz-option{
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}
.quiz-step:not([data-step="0"]) .quiz-option span{
  display: block;
  margin-top: 0.3rem;
  /* Do not stretch the label to fill the card; keep it close to the thumbnail */
  flex-grow: 0;
}



/* === Patch v12 === */
@media (max-width: 767.98px) {
  #quiz-modal.active .quiz-aside figure,
  #quiz-modal .quiz-aside figure,
  #quiz-modal figure { display:none !important; }

  .quiz-container, .quiz-content { overflow: visible !important; max-height: none !important; }
  .quiz-step .quiz-options { max-height: 160px !important; overflow-y: auto !important; align-content: start !important; scrollbar-gutter: stable; }
  #quiz-modal { align-items:flex-start !important; }
  #quiz-modal .quiz-close { position:absolute !important; top:8px !important; right:8px !important; display:flex !important; opacity:1 !important; z-index:9999 !important; }
}
/* columns for wood/paint steps */
.quiz-step[data-step="2"] .quiz-option,
.quiz-step[data-step="3"] .quiz-option { display:flex !important; flex-direction:column !important; align-items:flex-start !important; text-align:left !important; }
.quiz-step[data-step="2"] .quiz-option span,
.quiz-step[data-step="3"] .quiz-option span { display:block !important; text-align:left !important; }
/* navbar */
@media (max-width: 992px) {
  .navbar__mobile { position: static !important; transform:none !important; display:flex !important; align-items:center !important; gap:.25rem !important; }
  .navbar__mobile-phone-number, .navbar__mobile-call { margin:0 !important; line-height:1 !important; white-space:nowrap !important; }
}



/* ===== Custom fixes per client request (fix20) ===== */

/* (2) List-view: equal height for options, regardless of text length */
.quiz-options.list-view {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  align-items: stretch;
}
.quiz-options.list-view .quiz-option {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border-color, #e6e6e6);
  border-radius: 12px;
  background: var(--card-bg, #fff);
}
.quiz-options.list-view .quiz-option__img {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--muted-bg, #f4f6f8);
  font-weight: 600;
}

/* (3) Products: stats above image + CTA rename */
.product-card .product-stats {
  font-size: 12px;
  line-height: 1.4;
  margin-bottom: 6px;
  color: var(--secondary-text, #555);
}

/* (6) Contact messengers */
.contact-item__messengers {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}
.messenger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
  box-shadow: 0 1px 1px rgba(0,0,0,0.04);
  font-size: 13px;
  text-decoration: none;
}

/*
 * Make messenger links behave like buttons.  The default global anchor styles
 * underline links on hover, which looked inconsistent for the chat buttons.
 * Prevent any underlines and ensure the label colour follows the icon colour.
 */
.messenger:hover,
.messenger:focus {
  text-decoration: none !important;
}
.messenger span {
  /* Inherit colour from the parent so the text matches the icon colour */
  color: inherit;
}
.messenger svg {
  width: 16px;
  height: 16px;
}

/* ---------------------------------------------------------------------------
 * Messenger colouring
 * Force all messenger badges (Telegram/WhatsApp) to use the site accent colour
 * instead of their default blue/green brand colours.  Using `!important`
 * ensures these values override earlier definitions in this file.
 */
.messenger {
  color: var(--accent-color) !important;
}
.messenger svg {
  /* Ensure icons adopt the same colour as the text */
  fill: currentColor !important;
}

/* ---------------------------------------------------------------------------
 * Help card buttons
 * Style the WhatsApp and Telegram buttons in the help card using the
 * site's accent colour and a neutral background.  The important flags
 * override earlier platform‑specific colour definitions.
 */
.help-btn--whatsapp,
.help-btn--telegram {
  background: var(--card-bg) !important;
  color: var(--accent-color) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}
.help-btn--whatsapp .help-btn__icon svg,
.help-btn--telegram .help-btn__icon svg {
  fill: currentColor !important;
}

/* (7) Help-choice: two columns (photo left, content right) */
.help-card__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 24px;
}
@media (max-width: 900px) {
  .help-card__grid { grid-template-columns: 1fr; }
}
.help-card__media {
  border-radius: 16px;
  overflow: hidden;
  /* Remove the light grey background on desktop so only the photo shows. */
  background: transparent;
  display: grid;
  place-items: center;
}
.help-card__media img {
  max-width: 100%;
  height: auto;
  display: block;
}

/*
 * On mobile screens the decorative illustration in the help card takes up
 * valuable vertical space.  Hide it below 900px so the section remains
 * compact and focused on the text and buttons.
 */
@media (max-width: 900px) {
  .help-card__media {
    display: none !important;
  }
}

/* (8) Certificates: two columns */
/* Certificates: two columns on desktop.  Use equal-width columns so the slider and text share space evenly */
.certificate-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 900px) {
  .certificate-two-col { grid-template-columns: 1fr; }
}
.certificate-two-col__text p { margin-bottom: 10px; }


/* === fix22: certificates + product-stats + help-choice tuning === */

/* 1) Certificates: no hover "jumping", stable height - transition merged into main .certificate-box .gallery-item rule above */
.certificate-box .gallery-item:hover{transform:none;box-shadow:0 8px 22px rgba(15,20,25,0.08)}

/* Keep slider from shifting - merged into main certificate-two-col__media block below */

/* 2) Product stats: add spacing + visual pill */
.product-card .product-stats{
  display:inline-flex;align-items:center;gap:.5rem;
  margin:8px 0 10px;
  padding:6px 10px;
  background:rgb(243,247,255);
  border:1px solid rgba(18,24,32,0.08);
  border-radius:999px;
  font-size:.82rem;font-weight:600;
}
.product-card .product-stats::before{
  content:"★";font-size:.9rem;line-height:1;opacity:.7;
}

/* 3) Help-choice: closer to mock (header inside right column, tighter spacing) */
.help-card__grid{gap:20px}
.help-card__content .help-card__eyebrow{display:inline-block;margin-bottom:6px}
.help-card__content h2{margin:2px 0 10px}
.help-card__content .help-card__intro{margin-bottom:14px}
.help-card__list{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}
.help-card__list li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:flex-start}
.help-card__list svg{width:20px;height:20px;color:var(--accent-color)}
.help-card__actions{margin-top:8px}


/* === fix25: certificate text styling & buttons in help === */

/* Certificate right column text block — styled card in site palette */
.certificate-two-col__text{
  position:relative;
  background: linear-gradient(180deg, #ffffff, #fafafa);
  border:1px solid rgba(18,24,32,0.06);
  border-radius:16px;
  padding:18px 20px 20px 24px;
  box-shadow: 0 10px 28px rgba(15,20,25,0.06);
}
.certificate-two-col__text::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:4px;
  background: var(--accent-color);
  border-radius:16px 0 0 16px;
}
.certificate-two-col__text p{margin:0 0 10px 0; color: var(--secondary-text)}
.certificate-two-col__text p:first-child{color:var(--text-color);font-weight:700;font-size:1.05rem}
.certificate-two-col__text p:last-child{margin-bottom:0}
.certificate-two-col__text strong{color:var(--accent-color)}

/* 4) Help actions buttons — align to mock */
.help-card__actions{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px;
}
@media (max-width:700px){ .help-card__actions{ grid-template-columns:1fr } }
.help-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 14px; border-radius:12px; border:1px solid rgba(0,0,0,0.08);
  font-weight:700; text-decoration:none;
  transition:transform .15s ease, box-shadow .2s ease;
}
.help-btn:hover{ transform: translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,0.08) }
.help-btn--whatsapp{ /* removed duplicate platform-specific styling */ }
.help-btn--telegram{ /* removed duplicate platform-specific styling */ }
.help-btn__icon svg{ width:18px; height:18px; display:block }

/* 5) Quiz options highlight when selected */
.quiz-options .quiz-option{ transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease }
.quiz-options .quiz-option.is-selected{
  border-color: var(--accent-color);
  background: rgba(47,128,237,0.06); /* fallback tint */
  box-shadow: 0 8px 22px rgba(15,20,25,0.06);
}
.quiz-options .quiz-option.is-selected .quiz-option__img{
  background: var(--accent-color); color:#fff;
}


/* === fix26: certificate slider sizing & text formatting === */
/* Убрано ограничение ширины - колонки должны быть равными */
/* .certificate-two-col{
  grid-template-columns: minmax(300px, 440px) 1fr;
} */
/* Убрано ограничение max-width для сертификатов - они должны использовать всю ширину колонки */
/* .certificate-two-col__media{align-self:start; justify-self:start}
.certificate-two-col__media .certificate-box{max-width: 440px; width:100%}
.certificate-two-col__media .certificate-box .swiper{max-width: 440px; margin:0; padding:0 1rem 1.2rem}
.certificate-two-col__media .certificate-box .swiper-slide{width:100%} */

/* Right text formatting — bullets for paragraphs 2..n */
.certificate-two-col__text p:not(:first-child){
  position:relative; padding-left:26px;
}
.certificate-two-col__text p:not(:first-child)::before{
  content:"✔"; position:absolute; left:4px; top:0.2em;
  font-size:0.95rem; line-height:1; color:var(--accent-color);
}


/* === fix27: equal columns + full-height certificate + strong quiz selected === */
.certificate-two-col{
  grid-template-columns: 1fr 1fr !important;
  align-items: stretch !important;
}
.certificate-two-col__media{
  align-self: stretch !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}
/* Certificate box rules merged into main block below (lines 1382+) to avoid duplication */

/* Stronger highlight for selected quiz options */
.quiz-options.list-view > .quiz-option.selected,
.quiz-options.list-view > .quiz-option.is-selected,
.quiz-options > .quiz-option.selected,
.quiz-options > .quiz-option.is-selected{
  border-color: var(--accent-color) !important;
  background: rgba(47,128,237,0.08) !important;
  box-shadow: 0 0 0 1px rgba(47,128,237,0.25);
}
.quiz-options .quiz-option.selected .quiz-option__img,
.quiz-options .quiz-option.is-selected .quiz-option__img{
  background: var(--accent-color) !important;
  color:#fff !important;
}


/* === New: Process videos slider (#process-videos) === */
.process-videos{background:rgb(250,250,250);padding:2.5rem 0}
.process-videos .section-heading h2{font-size:2rem;text-align:center;margin-bottom:.3rem}
.process-videos .section-lead{max-width:840px;margin:.25rem auto 1.25rem;text-align:center;color:var(--secondary-text)}
.process-videos__slider{margin-top:1rem}
.process-videos .swiper{overflow:hidden}
.process-videos .swiper-slide{height:auto}
.video-card{position:relative;display:block;border-radius:16px;overflow:hidden;background:#000}
.video-card img{display:block;width:100%;height:auto;object-fit:cover;opacity:.95;transition:transform .3s ease, opacity .3s ease}
.video-card__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:68px;height:68px;border-radius:50%;background:rgba(0,0,0,.45);box-shadow:0 8px 22px rgba(0,0,0,.25)}
.video-card__play::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-40%,-50%);border-style:solid;border-width:12px 0 12px 18px;border-color:transparent transparent transparent #fff}
.video-card:hover img{transform:scale(1.03);opacity:1}

/* Swiper breakpoints for process videos */
@media (min-width:1024px){
  .process-videos .swiper{padding:0 0 1.5rem}
}

/* Showroom / Contacts split */
.contacts-section{background:#fff;padding:2.8rem 0;border-top:1px solid rgb(228,228,228)}
.contacts-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.contacts-list{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:10px}
.contacts-item{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:start}
.contacts-item svg{width:20px;height:20px;color:var(--accent-color)}
.contacts-left .privacy-note{margin-top:10px}
@media (max-width:900px){.contacts-grid{grid-template-columns:1fr}}

/* Right showroom gallery (instead of map) */
.showroom-gallery--right .swiper{overflow:hidden;padding-bottom:1.5rem}


/* === fix30: videos frame + contacts callback + showroom cleanup === */
/* Video frame (process-videos) */
.vsw__frame{position:relative;border-radius:16px;overflow:hidden;background:#111;aspect-ratio:16/9;box-shadow:0 10px 28px rgba(0,0,0,.08)}
.vsw__video{width:100%;height:100%;object-fit:cover;display:block;opacity:.94;transition:opacity .3s ease, transform .3s ease}
.vsw__overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(transparent, rgba(0,0,0,.25));text-decoration:none;cursor:pointer;z-index:1}
.vsw__play{width:68px;height:68px;filter:drop-shadow(0 8px 22px rgba(0,0,0,.35))}
.vsw__frame:hover .vsw__video{opacity:1;transform:scale(1.02)}

/* Contacts: callback link */
.contacts-callback{font-weight:700;text-transform:uppercase;letter-spacing:.02em}
.contacts-item--callback svg{opacity:.8}

/* Right showroom caption */
.showroom-gallery__caption{margin-top:.6rem;color:var(--accent-color);font-size:.9rem}


/* === fix31: showroom right-only gallery & layout tidy === */
.showroom-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:start}
@media (max-width:980px){.showroom-grid{grid-template-columns:1fr}}
.showroom-gallery--right .swiper{position:relative;width:100%;padding:0 0 1.2rem}
.showroom-gallery--right .swiper-slide{height:auto}
.showroom-gallery--right .gallery-item{display:block;border-radius:16px;overflow:hidden;background:#fff}
.showroom-gallery--right .gallery-item img{display:block;width:100%;height:auto;object-fit:cover}
.showroom-gallery--right .swiper-button-prev,
.showroom-gallery--right .swiper-button-next{color:var(--accent-color);}
.showroom-gallery--right .swiper-pagination-bullet-active{background:var(--accent-color)}

/* === fix32: ensure only one image visible in showroom slider === */
.showroom-gallery--right .showroom-swiper .swiper-slide{
  width:100% !important;
  margin-right:24px !important;
}

/* === fix33: process videos pagination and heading layout === */
/*
 * The process‑videos section features a Swiper carousel of video thumbnails.  On
 * smaller screens the default Swiper pagination bullets were overlaid on top
 * of the videos because the slider container had no bottom padding and the
 * pagination was absolutely positioned.  Additionally, the generic
 * section‑heading grid layout hid the lead text entirely via a global
 * `.section-lead{display:none}` rule and attempted to place the lead into a
 * separate grid column.  For this section we override those defaults to
 * provide a vertically stacked heading and subtitle and to move the
 * pagination bullets below the slider.
 */

/* Give the process videos slider some bottom padding so there is room for pagination */
.process-videos .swiper{
  padding:0 0 1.5rem;
}

/* Position the pagination bullets statically and center them below the slides */
.process-videos .swiper-pagination{
  position:static;
  margin-top:1rem;
  display:flex;
  justify-content:center;
}

/* Stack the heading and subtitle vertically and center align them */
.process-videos .section-heading{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.75rem;
  margin-bottom:2rem;
}

/* Ensure the heading text remains centered */
.process-videos .section-heading h2{
  text-align:center;
}

/* Make the lead/description visible and match the mock‑up styling */
.process-videos .section-lead{
  display:block;
  max-width:840px;
  margin:0.25rem auto 1.5rem;
  text-align:center;
  color:var(--text-color);
  font-size:1rem;
  line-height:1.5;
  font-weight:500;
}

/* === fix34: responsive certificates & balanced height in why-us section === */
/*
 * On narrow screens the certificate slider should stack below the text and
 * never overflow the viewport width.  The previous equal‑columns hack used
 * `height:100%` on the slider elements which forced the slide to match the
 * height of its container.  On mobile this produced giant certificate
 * images that extended beyond the screen.  Here we restore a single
 * column layout for small screens, reset the heights to auto so the
 * images maintain their natural proportions, and vertically center the
 * slider within its column on larger screens.  These overrides are
 * targeted specifically to the `certificate-two-col` layout inside
 * the `why-us` section.
 */

@media (max-width: 900px) {
  /* Stack certificate/media and text on top of each other */
  .certificate-two-col{
    grid-template-columns: 1fr !important;
  }
}

/* Override conflicting Swiper slide widths for the showroom gallery.
   Many previous declarations set varying widths like `calc(100% - 36px)` or
   percentages that cause multiple images to appear at once.  To ensure
   consistent behaviour, force each showroom slide to occupy the full
   available width and eliminate inter-slide margins.  This applies at
   all breakpoints and uses `!important` to override earlier rules. */
.showroom-gallery .swiper-slide{
  width:100% !important;
  margin-right:0 !important;
}

/* Remove flex centering on larger screens so certificate aligns to the top like the text */
@media (min-width: 900px) {
  .certificate-two-col__media{
    display:block;
  }
}

@media (max-width: 900px) {
  /* Reset full‑height rules on the certificate slider so it does not stretch on small screens */
  .certificate-two-col__media .certificate-box,
  .certificate-two-col__media .certificate-box .swiper,
  .certificate-two-col__media .certificate-box .swiper-wrapper,
  .certificate-two-col__media .certificate-box .swiper-slide{
    height:auto !important;
  }
  /* Stack the gallery item contents normally and allow images to scale */
  .certificate-two-col__media .certificate-box .gallery-item{
    height:auto !important;
    display:block;
    /* Set an aspect ratio to stabilise slide height on small screens */
    aspect-ratio:3/4;
  }
  .certificate-two-col__media .certificate-box .gallery-item img{
    width:100%;
    height:auto !important;
    object-fit:contain;
    display:block;
  }

  /* Ensure the swiper itself is not constrained to a small max-width on mobile */
  .certificate-two-col__media .certificate-box .swiper{
    max-width:100% !important;
    width:100% !important;
  }

  /* Prevent the entire certificate block from horizontally scrolling on small screens by
     hiding any overflow.  Allow the slider to grow to the full width of the container. */
  .certificate-two-col__media .certificate-box{
    overflow:hidden;
    max-width:none !important;
    width:100%;
  }
  /* Ensure each slide uses the full width of its parent so only one certificate shows at a time */
  .certificate-two-col__media .certificate-box .swiper-slide{
    width:100% !important;
    margin-right:0 !important;
  }

/* Collapse the certificate columns into a single stack on narrow screens.
   On mobile we switch to flexbox so the slider sits above the text. */
@media (max-width: 900px) {
  .certificate-two-col {
    display:flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
  }
  .certificate-two-col__media{
    margin-bottom:1.5rem !important;
  }
}

/* === fix37: help-choice tweaks === */
/* Hide the eyebrow prompt in the help card.  This is done via CSS so it can be easily re-enabled later. */
.help-card__eyebrow {
  display: none !important;
}

/* Remove the decorative accent bar before the “Не можете определиться…” heading in the help card.
   The global `section h2::before` rule inserts a horizontal bar for every h2 inside a section.
   Because our help‑choice heading lives deep inside a section, we need to override the pseudo‑element
   with higher specificity.  Use multiple selectors to ensure nothing reintroduces the bar later. */
#help-choice h2::before,
#help-choice .no-accent-bar::before,
section.help-choice h2::before {
  content: none !important;
  display: none !important;
}

/* When the no-accent-bar class is applied to a heading anywhere on the site,
   suppress the default decorative bar inserted via `section h2::before`.  This helper works
   outside the help-choice scope too.  Use an element selector alongside the class
   to increase specificity and ensure the override wins even if other rules
   targeting `section h2::before` appear later in the cascade. */
h2.no-accent-bar::before,
.no-accent-bar::before {
  content: none !important;
  display: none !important;
}

/* === fix38: decorative bar removals & certificate sizing === */
/*
 * 1) Remove the small accent bar before specific headings.  Even though we
 *    assign the `.no-accent-bar` class on the <h2> elements in our HTML,
 *    some headings still receive the default `section h2::before` rule due
 *    to selector ordering or additional wrappers.  Target the affected
 *    sections directly with higher specificity to ensure the pseudo‑element
 *    is suppressed.
 */
/* Hide the decorative bar for the process videos section */
#process-videos h2::before {
  content: none !important;
  display: none !important;
}

/*
 * Additional bar overrides: some headings still displayed the accent bar due to
 * other selectors or cascading issues.  Target the specific headings in the
 * help‑choice and process‑videos sections by combining the section IDs
 * with the `.no-accent-bar` class on the <h2> element.  Using both the ID
 * and class increases specificity so these rules win over the default
 * `section h2::before` declaration.  Marking the properties as important
 * guarantees the pseudo‑element is suppressed.  If more sections require
 * the decorative bar to be removed, add additional selectors here.
 */
#help-choice h2.no-accent-bar::before,
#process-videos h2.no-accent-bar::before {
  content: none !important;
  display: none !important;
}

/*
 * Certificate layout tuning (desktop): ensure both columns occupy the same
 * width and the slider uses the full width of its container.  Previously
 * various max‑width settings and nested containers limited the slider to
 * 440&nbsp;px, causing an imbalanced layout.  These rules override those
 * constraints within the why‑us section, aligning the media and text columns
 * evenly.  They also reset the Swiper elements to 100% width and height so
 * the certificate images scale properly without extra margins.
 */
#why-us .certificate-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr !important;
  align-items: stretch;
  gap: 32px;
}
#why-us .certificate-two-col__media .certificate-box {
  max-width: none !important;
  width: 100% !important;
}
#why-us .certificate-two-col__media .certificate-box .swiper {
  /* Remove any internal padding and width constraints so the swiper
     occupies the full width of its parent column.  This override
     ensures that the certificates fill their half of the grid on
     desktop without leftover margins from earlier declarations. */
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
#why-us .certificate-two-col__media .certificate-box .swiper,
#why-us .certificate-two-col__media .certificate-box .swiper-wrapper,
#why-us .certificate-two-col__media .certificate-box .swiper-slide {
  width: 100% !important;
  height: 100% !important;
}
#why-us .certificate-two-col__media .certificate-box .swiper-slide {
  /* Force each slide to occupy the full width of its container on desktop.
     Swiper's JS sets a flex-basis based on slidesPerView (e.g. 33.33%),
     which causes multiple thumbnails to appear per row.  By resetting
     flex properties here, each certificate fills the entire column,
     presenting one certificate at a time. */
  margin-right: 0 !important;
  width: 100% !important;
  flex: 0 0 100% !important;
}
#why-us .certificate-two-col__media .certificate-box .gallery-item,
#why-us .certificate-two-col__media .certificate-box .gallery-item img {
  width: 100% !important;
  height: 100% !important;
  display: flex;
  align-items: stretch;
  object-fit: contain;
  /* Remove the white background on certificate images so the SVG artwork
     itself defines the edge of the slide.  A transparent background
     allows the certificate to sit directly against the column bounds. */
  background: transparent !important;
}
/* Ensure the help-choice heading never draws a bar */
#help-choice h2::before {
  content: none !important;
  display: none !important;
}

/*
 * === Global certificate slider overrides ===
 * These rules ensure that the certificate carousel fills its parent column
 * on desktop and mobile.  Without them Swiper may constrain each slide to
 * a fixed pixel width (e.g. 120px) and center the carousel within a
 * narrow max-width.  We remove all fixed widths/margins/padding on the
 * swiper container and slides, and force each slide to occupy the full
 * available width of its column.  Additionally, we remove any background
 * or border radius on the certificate images so that only the SVG artwork
 * defines the edges; this eliminates the white box effect around the
 * certificate content.
 */
.certificate-two-col__media .certificate-box {
  position: relative;
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}
.certificate-two-col__media .certificate-box .swiper {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
}
.certificate-two-col__media .certificate-box .swiper-wrapper {
  width: 100% !important;
}
.certificate-two-col__media .certificate-box .swiper-slide {
  /* Allow swiper to control slide width based on slidesPerView */
  max-width: 100% !important;
  margin-right: 0 !important;
  padding: 0 !important;
  height: auto !important;
  will-change: auto;
  /* Prevent slide from stretching the grid column */
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.certificate-two-col__media .certificate-box .gallery-item {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  /* Prevent the gallery item from stretching the grid column */
  min-width: 0 !important;
  /*
   * When the certificate slider was originally built the gallery items were
   * constrained to a maximum width (see `.certificate-box .gallery-item` at
   * ~line 490).  This prevented the images from ever stretching to fill
   * their grid column and left large empty gutters on desktop.  To ensure
   * each slide occupies the full width of its parent, explicitly reset
   * `max-width` to `none`.  Without this override the inherited value of
   * `max-width:420px` continues to apply even when `width:100%` is set,
   * because `max-width` takes precedence in the box model.
   */
  max-width: none !important;

  /*
   * Remove any background colour applied on the button itself.  The global
   * gallery styles assign a transparent background, but some overrides or
   * hover effects later in the cascade may set a white fill.  Setting
   * `background:none` here and in the hover state guarantees that the
   * certificate SVG defines the edges of the slide without an extra box.
   */
  background: none !important;
}
.certificate-two-col__media .certificate-box .gallery-item img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  /*
   * Strip away any default background (often white) from the <img> tag so
   * that only the certificate artwork is visible.  This also helps when
   * hovering: the image should not display a different background colour
   * than its parent container.
   * max-width: 100% prevents the image from stretching the grid column.
   */
  background: none !important;
  border-radius: 0 !important;
  display: block !important;
}

/*
 * Remove background and highlight effects on hover for certificates.
 * Some base styles add a drop shadow or change the background when
 * hovering over gallery items.  While the shadow can remain for a
 * subtle depth effect, any fill colour is undesirable because the
 * certificates already have their own coloured borders.  This
 * override clears the background of the button and image when
 * hovering and cancels any border colour that might appear.  The
 * transform remains unchanged to preserve the existing non-jumping
 * behaviour defined earlier.
 */
.certificate-two-col__media .certificate-box .gallery-item:hover {
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}
.certificate-two-col__media .certificate-box .gallery-item:hover img {
  background: transparent !important;
}
/* Убираем белый фон при наведении для всех сертификатов - объединено с правилом выше */

/*
 * 2) Certificates slider sizing - merged with rules above to avoid duplication.
 *    The certificates carousel was previously constrained by various
 *    `max-width` rules and side paddings.  On desktop this caused the
 *    slide thumbnails to appear much smaller than the available space,
 *    leaving a large gap to the right.  Override those restrictions so
 *    that the carousel fills the full width of its column and each
 *    thumbnail spreads evenly.  The grid container already assigns
 *    equal columns via `grid-template-columns: 1fr 1fr !important`.  By
 *    removing the `max-width` and horizontal padding on the swiper
 *    container, and allowing each slide to grow, the thumbnails will
 *    occupy the available space.
 *    NOTE: Rules merged into the block above (lines 1382-1408) to avoid duplication.
 */

/* Ensure messenger icons and labels share the same colour and icons adopt the current colour.
   The `.messenger` anchors already set their `color` via modifier classes.  Apply `fill:currentColor`
   so the SVG icons inherit this colour, and let the `<span>` labels inherit the same colour. */
.messenger svg {
  fill: currentColor;
}
.messenger span {
  color: inherit;
}
/* === Custom fixes (client request, November 2025) === */

/* Ensure contact phone numbers display in full without wrapping or truncation. */
.contact-item strong,
.contact-item a {
  white-space: nowrap;
}

/* Certificates: ensure the slider occupies the full width of its column and slides distribute evenly.  Without this
   override, the Swiper library sets fixed pixel widths (e.g. 120px) on each slide and adds horizontal padding,
   causing the certificate images to appear compressed and leave unused space.
   NOTE: Rules merged into the main block above (lines 1382-1408) to avoid duplication.
 */


/*
 * 3. Use the site accent colour for messenger buttons instead of platform colours.
 *    Это обеспечивает согласованность цветовой схемы и избавляет от зелёных и
 *    синих надписей. Псевдоэлементы наследуют цвет через currentColor.
 */
.messenger--telegram,
.messenger--whatsapp {
  /* Override any platform-specific colours (e.g. green/blue) so both links
     and icons use the site accent colour.  Important flag ensures this
     definition takes precedence over earlier rules. */
  color: var(--accent-color) !important;
}

/*
 * Force messenger SVG icons to inherit the current colour.  Without this,
 * some icons may keep their default fill and appear mismatched.
 */
.messenger svg {
  fill: currentColor !important;
}

/*
 * 4. Style showroom info block (адрес и время работы).
 */
.showroom-info p {
  margin: 0 0 0.5rem 0;
  font-size: 0.9rem;
}

/*
 * 5. Hide the caption under the showroom gallery (handled in markup but add a
 *    safety fallback in case старый класс присутствует).  Скрываем подпись
 *    под галереей, если она по ошибке попала в сборку.
 */
.showroom-gallery__caption {
  display: none !important;
}

/*
 * Additional overrides to ensure the old site's markup still reflects the
 * desired changes even if the HTML structure has not been updated.  These
 * rules are scoped broadly and use !important to override previous styles.
 */

/* 1) Hide any paragraph captions inside the showroom gallery.  The live site
 *    still outputs the caption as plain text rather than with the
 *    .showroom-gallery__caption class, so hide all paragraph children of
 *    the gallery wrapper to remove the redundant caption. */
.showroom-gallery p {
  display: none !important;
}

/* === fix38: equal widths for certificate column and slider === */
/*
 * The certificates slider and its accompanying text live in the "why-us" section.  Earlier
 * versions of the stylesheet defined conflicting `max-width` values and padding on the Swiper
 * container, causing the slider to occupy only 300–440px on wide screens while the text
 * expanded to fill the remaining space.  To ensure both columns occupy equal space on
 * desktop, override those restrictions at the end of the file.  We target the #why-us
 * section specifically to avoid unintended side effects in other layouts.
 */
#why-us .certificate-two-col {
  /* Two equal columns: slider on the left, text on the right */
  grid-template-columns: 1fr 1fr !important;
  display: grid !important;
  align-items: stretch !important;
}

/* Reset any hardcoded widths or margins on the slider container and its internal Swiper
   elements.  Without these overrides, earlier declarations limited the slider to a
   small max-width and applied extra padding, which squeezed the certificate images. */
#why-us .certificate-two-col__media .certificate-box,
#why-us .certificate-two-col__media .certificate-box .swiper,
#why-us .certificate-two-col__media .certificate-box .swiper-wrapper,
#why-us .certificate-two-col__media .certificate-box .swiper-slide {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
}

/* Allow each certificate slide to flex to fill available space.  Without this,
   Swiper sets fixed pixel widths (e.g. 120px) which compresses the images on large screens. */
#why-us .certificate-two-col__media .certificate-box .swiper-slide {
  /* Each certificate slide should occupy the full width of its container. */
  flex: 0 0 100% !important;
}

/* On screens narrower than 900px, stack the slider above the text.  We re‑enable
   a single column layout and let the slider scale naturally.  This media query comes
   after the equal‑column declarations so it takes precedence on small screens. */
@media (max-width: 900px) {
  #why-us .certificate-two-col {
    grid-template-columns: 1fr !important;
    display: block !important;
  }
}

/* Removed duplicate messenger/button overrides to consolidate with unified rules */