/* =========================================================
   Про-Велдинг — базовые токены и общие элементы
   Bootstrap 5.3.8 отвечает за сетку и JS-компоненты,
   вся оболочка блоков — свои БЭМ-классы.
   ========================================================= */

:root {
    /* переопределяем палитру Bootstrap под фирменную */
    --bs-primary: #d80e0e;
    --bs-primary-rgb: 216, 14, 14;
    --bs-secondary: #666666;
    --bs-secondary-rgb: 102, 102, 102;
    --bs-dark: #333333;
    --bs-dark-rgb: 51, 51, 51;
    --bs-body-color: #333333;
    --bs-link-color-rgb: 216, 14, 14;
    --bs-link-hover-color-rgb: 176, 11, 11;
    --bs-font-sans-serif: "Open Sans", sans-serif;

    /* собственные токены */
    --color-primary: #d80e0e;
    --color-primary-dark: #b00b0b;
    --color-dark: #333333;
    --color-muted: #666666;
    --color-line: #e5e5e3;
    --color-bg-soft: #f6f6f6;
    /* та же фирменная красная, но подложкой под иконки */
    --color-primary-soft: rgba(216, 14, 14, .08);

    --radius: 14px;
    --radius-sm: 8px;
    /* два слоя: короткий даёт контактную тень у самой кромки,
       длинный — рассеянный ореол. Однослойная выглядит наклейкой */
    --shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .08);
    --shadow-hover: 0 2px 4px rgba(0, 0, 0, .08), 0 16px 36px rgba(0, 0, 0, .14);
    /* тень карточки в покое — заметно легче ховерной */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .05), 0 2px 8px rgba(0, 0, 0, .05);

    /* один уровень подзаголовка вместо четырёх разных кеглей */
    --fs-h3: clamp(18px, 0.28vw + 16.94px, 21px);

    --anim: 0.4s ease;
}

body {
    font-family: var(--bs-font-sans-serif);
    color: var(--color-dark);
}

a {
    transition: color var(--anim);
}

/* якорные переходы плавные; в бережном режиме ниже возвращаем мгновенные */
html {
    scroll-behavior: smooth;
}

/* цель якоря не должна уезжать под липкую панель меню */
:target {
    scroll-margin-top: 84px;
}

/* фокус с клавиатуры виден всегда и одинаково; при клике мышью
   :focus-visible не срабатывает, поэтому обводка не мешает */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.title {
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 700;
    line-height: 1.2;
}

/* заголовки ломаются на строки равной длины, а не «шесть слов и одно»;
   абзацы просто не оставляют висячее слово в последней строке */
h1, h2, h3,
.title,
.hero__title,
.section__title,
.cta__title {
    text-wrap: balance;
}

p, .card-product__text, .card-adv__text {
    text-wrap: pretty;
}

/* телефоны и цены — моноширинными цифрами, чтобы столбики не плясали */
.header__phone,
.footer__phone,
.cta__phone,
.feedback__value,
.card-product__price span {
    font-variant-numeric: tabular-nums;
}

/* --- секционный заголовок ------------------------------- */
.section {
    padding: clamp(48px, 6vw, 88px) 0;
}

/* лента логотипов — связка между большими блоками, воздуха вокруг
   неё нужно меньше, иначе кажется полупустой */
.section--tight {
    padding: clamp(34px, 4.2vw, 60px) 0;
}

.section__head {
    margin-bottom: clamp(28px, 3.5vw, 44px);
}

/* вводная строка под заголовком светлой секции */
.section__lead {
    max-width: 68ch;
    font-size: 17px;
    line-height: 1.6;
    color: var(--color-muted);
}

.section__title {
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

.section__title::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin-top: 14px;
    background: linear-gradient(90deg, var(--color-primary), rgba(var(--bs-primary-rgb), .25));
}

/* --- кнопки --------------------------------------------- */
.btn {
    --bs-btn-padding-x: 24px;
    --bs-btn-padding-y: 12px;
    --bs-btn-border-radius: var(--radius-sm);
    --bs-btn-font-weight: 600;
    transition: background-color var(--anim), color var(--anim), border-color var(--anim),
        box-shadow var(--anim), transform var(--anim);
}

.btn-primary {
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-bg: var(--color-primary-dark);
    --bs-btn-hover-border-color: var(--color-primary-dark);
    --bs-btn-active-bg: var(--color-primary-dark);
    --bs-btn-active-border-color: var(--color-primary-dark);
    --bs-btn-disabled-bg: var(--color-primary);
    --bs-btn-disabled-border-color: var(--color-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

/* красная кнопка слегка приподнята над страницей — тень фирменного
   цвета, а не серая, иначе выглядит грязно */
.btn-primary {
    box-shadow: 0 4px 14px rgba(var(--bs-primary-rgb), .25);
}

.btn-primary:hover {
    box-shadow: 0 8px 22px rgba(var(--bs-primary-rgb), .32);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-outline-primary {
    --bs-btn-color: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-bg: var(--color-primary);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-active-bg: var(--color-primary-dark);
    --bs-btn-active-border-color: var(--color-primary-dark);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

/* =========================================================
   HEADER
   Раскладка (flex, gap, отступы, точки показа/скрытия) — на
   утилитах Bootstrap прямо в разметке. Здесь только то,
   чего в утилитах нет: цвета, типографика, sticky, кнопки-иконки.
   ========================================================= */
.header__top {
    border-bottom: 1px solid var(--color-line);
    background: #fff;
}

.header__logo {
    flex: 0 0 auto;
    max-width: 300px;
    color: var(--color-dark);
    text-decoration: none;
}

.header__logo-img {
    width: auto;
    height: 64px;
    flex: 0 0 auto;
}

.header__logo--compact .header__logo-img {
    height: 40px;
}

.header__logo-text {
    font-size: 12px;
    line-height: 1.35;
    color: var(--color-muted);
}

/* в мобильной панели слогану тесно между логотипом и кнопками */
.header__logo--compact .header__logo-text {
    font-size: 11px;
    line-height: 1.3;
    text-wrap: balance;
}

.header__info-label {
    font-size: 12px;
    color: var(--color-muted);
}

.header__info-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-dark);
    text-decoration: none;
}

a.header__info-value:hover {
    color: var(--color-primary);
}

.header__phone {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-dark);
    text-decoration: none;
    white-space: nowrap;
}

.header__phone:hover {
    color: var(--color-primary);
}

/* --- нижняя панель с меню -------------------------------- */
.header__bar {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: #fff;
    border-bottom: 1px solid var(--color-line);
    transition: box-shadow var(--anim), background-color var(--anim), border-color var(--anim);
}

/* прилипнув, панель становится матовым стеклом: под ней видно,
   что страница продолжается, а не обрывается встык */
.header__bar.is-stuck {
    box-shadow: var(--shadow);
    background: rgba(255, 255, 255, .88);
    border-bottom-color: transparent;
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    backdrop-filter: saturate(180%) blur(10px);
}

.header__bar-in {
    min-height: 60px;
    transition: min-height var(--anim);
}

/* прилипшая панель ужимается — отдаёт пару пикселей контенту
   и заодно подтверждает, что страница прокручена */
.header__bar.is-stuck .header__bar-in {
    min-height: 52px;
}

/* квадратные кнопки-иконки: поиск, бургер, мессенджеры */
.header__search-toggle,
.header__burger,
.header__social {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--color-dark);
    text-decoration: none;
    transition: color var(--anim), border-color var(--anim), background-color var(--anim);
}

.header__search-toggle:hover,
.header__search-toggle:not(.collapsed),
.header__burger:hover,
.header__social:hover {
    color: #fff;
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.header__search {
    border-top: 1px solid var(--color-line);
    background: var(--color-bg-soft);
}

/* иконки — геометрия Lucide, рисуются инлайновым svg */
.icon {
    flex: 0 0 auto;
}

/* =========================================================
   SEARCH — форма в шапке и страница результатов
   ========================================================= */
.search-form__input {
    height: 48px;
    border-color: var(--color-line);
    font-size: 16px;
}

.search-form__input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .15);
}

.search-result__link {
    color: var(--color-dark);
    text-decoration: none;
}

.search-result__link:hover {
    color: var(--color-primary);
}

.search-result__mark {
    background: rgba(var(--bs-primary-rgb), .12);
    color: var(--color-primary);
    font-weight: 600;
}

.pagination {
    --bs-pagination-color: var(--color-dark);
    --bs-pagination-hover-color: var(--color-primary);
    --bs-pagination-border-color: var(--color-line);
    --bs-pagination-active-bg: var(--color-primary);
    --bs-pagination-active-border-color: var(--color-primary);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .15);
}

/* =========================================================
   NAV — главное меню
   ========================================================= */
.nav-main__link {
    display: inline-block;
    padding: 18px 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-dark);
    text-decoration: none;
    position: relative;
}

.nav-main__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    height: 2px;
    background: var(--color-primary);
    transform: scaleX(0);
    transition: transform var(--anim);
}

.nav-main__link:hover {
    color: var(--color-primary);
}

.nav-main__link:hover::after,
.nav-main__item--active > .nav-main__link::after {
    transform: scaleX(1);
}

/* только сам активный пункт: без > красным становится и всё подменю внутри него,
   ведь hereClass висит и на предках открытой страницы */
.nav-main__item--active > .nav-main__link {
    color: var(--color-primary);
}

/* --- выпадающие подменю ----------------------------------
   Три уровня: раздел → группа оборудования → модель. Второй
   уровень падает вниз, третий уходит вбок — вниз ему уже не
   хватает высоты панели. Открывает наведение и :focus-within,
   так что подменю доступно и с клавиатуры. */
.nav-main__item {
    position: relative;
}

.nav-main__link .icon {
    width: 14px;
    height: 14px;
    transition: transform var(--anim);
}

.nav-main__list > .nav-main__item--has-sub:hover > .nav-main__link .icon,
.nav-main__list > .nav-main__item--has-sub:focus-within > .nav-main__link .icon {
    transform: rotate(180deg);
}

.nav-main__sub {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 30;
    min-width: 260px;
    padding: 8px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow);
    /* visibility, а не display: иначе не отработает переход и
       панель будет доступна для наведения в невидимом виде */
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--anim), transform var(--anim), visibility var(--anim);
}

.nav-main__item--has-sub:hover > .nav-main__sub,
.nav-main__item--has-sub:focus-within > .nav-main__sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* третий уровень: вбок, с поправкой на padding панели —
   чтобы первая строка встала вровень со своим пунктом */
.nav-main__sub .nav-main__sub {
    top: -9px;
    left: 100%;
    min-width: 300px;
    transform: translate(6px, 0);
}

.nav-main__sub .nav-main__item--has-sub:hover > .nav-main__sub,
.nav-main__sub .nav-main__item--has-sub:focus-within > .nav-main__sub {
    transform: translate(0, 0);
}

.nav-main__sub .nav-main__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
}

.nav-main__sub .nav-main__link::after {
    display: none;
}

.nav-main__sub .nav-main__link:hover,
.nav-main__sub .nav-main__item--active > .nav-main__link {
    background: var(--color-bg-soft);
    color: var(--color-primary);
}

.nav-main__sub .nav-main__link .icon {
    flex-shrink: 0;
    transform: rotate(-90deg);
}

/* Bootstrap задаёт панели ровно 400px, и на телефоне 360px она не влезает */
.offcanvas-end {
    width: min(400px, 86vw);
}

/* --- меню в offcanvas ------------------------------------
   Тот же трёхуровневый список, но подменю разворачивается
   вниз аккордеоном: вбок на телефоне уезжать некуда. */
.nav-mob__item {
    border-bottom: 1px solid var(--color-line);
}

.nav-mob__link {
    padding: 13px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-dark);
    text-decoration: none;
}

.nav-mob__link:hover,
.nav-mob__item--active > .nav-mob__link,
.nav-mob__item--active > .nav-mob__row > .nav-mob__link {
    color: var(--color-primary);
}

.nav-mob__toggle {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--color-dark);
    transition: color var(--anim), border-color var(--anim), background-color var(--anim);
}

.nav-mob__toggle:not(.collapsed) {
    color: #fff;
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.nav-mob__toggle .icon {
    width: 16px;
    height: 16px;
    transition: transform var(--anim);
}

.nav-mob__toggle:not(.collapsed) .icon {
    transform: rotate(180deg);
}

/* вложенные списки: рамка убрана, вложенность читается отступом
   и более мелким кеглем, иначе панель превращается в частокол линий */
.nav-mob__sub {
    padding-bottom: 8px;
}

.nav-mob__sub .nav-mob__item {
    border-bottom: 0;
}

.nav-mob__sub .nav-mob__link {
    padding: 8px 0 8px 16px;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-muted);
}

.nav-mob__sub .nav-mob__sub .nav-mob__link {
    padding-left: 32px;
    font-size: 14px;
}

.nav-mob__sub .nav-mob__link:hover,
.nav-mob__sub .nav-mob__item--active > .nav-mob__link,
.nav-mob__sub .nav-mob__item--active > .nav-mob__row > .nav-mob__link {
    color: var(--color-primary);
}

/* =========================================================
   HERO — слайдер на главной.
   Слайд: фотофон без надписей + текстовый блок поверх.
   Сторона текста задаётся в MIGX полем align и приезжает
   модификатором hero__slide--left / --right.
   ========================================================= */
/* слайдер белый на белом: без тени он висит в воздухе и первый экран
   выглядит незаконченным */
/* подкладка под первый экран: скруглённый слайдер на белой странице
   под белой шапкой висел без опоры. Фон тает к низу, чтобы граница
   с белым каталогом не превратилась в ещё одну линию */
.hero {
    background: linear-gradient(180deg, var(--color-bg-soft) 0%, var(--color-bg-soft) 78%, #fff 100%);
}

.hero__slider {
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.hero__slide {
    position: relative;
    /* флекс, чтобы затемнение тянулось на всю высоту слайда: swiper равняет
       слайды по самому высокому, и короткий слайд иначе обрывал скрим
       полосой над нижним краем фотографии */
    display: flex;
    /* одинаковая высота у всех слайдов: фоны разных пропорций иначе дёргали бы
       страницу при переключении. min-height, а не height: длинный заголовок
       на узком экране должен раздвинуть слайд, а не уехать под обрез */
    min-height: clamp(380px, 42vh, 520px);
}

.hero__pic,
.hero__img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* затемнение с той стороны, где лежит текст */
.hero__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    /* свои боковые поля: вложенный .container внутри уже суженного
       слайдера схлопывается до одного гаттера в 12px */
    padding-inline: clamp(24px, 4.5vw, 72px);
    color: #fff;
}

/* переход растянут по многим стопам — на фотографии не остаётся
   заметной полосы. Второй слой, лёгкая виньетка, даёт кадру глубину */
.hero__slide--left .hero__body {
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .78) 18%, rgba(0, 0, 0, .66) 34%, rgba(0, 0, 0, .48) 48%, rgba(0, 0, 0, .26) 62%, rgba(0, 0, 0, .1) 74%, rgba(0, 0, 0, 0) 84%),
        linear-gradient(180deg, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .38) 100%);
}

.hero__slide--right .hero__body {
    background:
        linear-gradient(270deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .78) 18%, rgba(0, 0, 0, .66) 34%, rgba(0, 0, 0, .48) 48%, rgba(0, 0, 0, .26) 62%, rgba(0, 0, 0, .1) 74%, rgba(0, 0, 0, 0) 84%),
        linear-gradient(180deg, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .38) 100%);
}

.hero__text-block {
    max-width: 640px;
    padding: 36px 0;
    /* страховка поверх скрима: на светлом пятне снимка буквы не
       растворяются, при этом тень не читается как приём */
    text-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 8px 28px rgba(0, 0, 0, .3);
}

.hero__slide--right .hero__text-block {
    margin-left: auto;
}

.hero__title {
    max-width: 560px;
    margin: 0;
    font-size: clamp(26px, 3.2vw, 44px);
    font-weight: 700;
    line-height: 1.12;
    text-transform: uppercase;
}

.hero__lead {
    max-width: 560px;
    margin: 20px 0 0;
    font-size: clamp(15px, 1.3vw, 18px);
    line-height: 1.5;
    color: rgba(255, 255, 255, .92);
}

.hero__features {
    margin-top: 28px !important;
    gap: 10px 12px;
}

/* пилюля со стеклянной подложкой: признаки читаются как перечень
   гарантий, а не как подпись мелким шрифтом поверх фотографии */
.hero__feature {
    padding: 10px 18px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-size: clamp(14px, 1.2vw, 16px);
    font-weight: 600;
    line-height: 1.35;
    color: #fff;
    text-shadow: none;
}

.hero__feature .icon {
    width: 20px;
    height: 20px;
    color: var(--color-primary);
}

.hero__btn {
    display: block;
    width: fit-content;
    margin-top: 28px;
    /* на плотной красной кнопке тень от .hero__text-block мылит подпись */
    text-shadow: none;
}

/* текст активного слайда въезжает лесенкой: заголовок, лид, признаки,
   кнопка. Только у активного — у соседних Swiper класс снимает, и при
   следующем показе анимация проигрывается заново */
.has-js .hero__slider .swiper-slide-active .hero__title,
.has-js .hero__slider .swiper-slide-active .hero__lead,
.has-js .hero__slider .swiper-slide-active .hero__features,
.has-js .hero__slider .swiper-slide-active .hero__btn {
    animation: hero-in .7s cubic-bezier(.22, .61, .36, 1) backwards;
}

.has-js .hero__slider .swiper-slide-active .hero__lead     { animation-delay: .1s; }
.has-js .hero__slider .swiper-slide-active .hero__features { animation-delay: .2s; }
.has-js .hero__slider .swiper-slide-active .hero__btn      { animation-delay: .3s; }

@keyframes hero-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

/* --- пагинация -------------------------------------------- */
.hero__pagination .swiper-pagination-bullet {
    width: 40px;
    height: 3px;
    border-radius: 2px;
    background: var(--color-line);
    opacity: 1;
    cursor: pointer;
    transition: background-color var(--anim);
}

.hero__pagination .swiper-pagination-bullet:hover {
    background: var(--color-muted);
}

/* активный штрих заполняется красным за 6 секунд — ровно столько живёт
   слайд в autoplay, получается индикатор оставшегося времени */
.hero__pagination .swiper-pagination-bullet-active {
    position: relative;
    overflow: hidden;
    background: var(--color-line);
}

.hero__pagination .swiper-pagination-bullet-active::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-primary);
    transform-origin: left;
    animation: hero-bullet 6s linear forwards;
}

@keyframes hero-bullet {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* Swiper вешает .swiper-autoplay-paused на слайдер, когда автопрокрутка
   встала под курсором — заполнение штриха замирает вместе с ней */
.swiper-autoplay-paused ~ .hero__pagination .swiper-pagination-bullet-active::after {
    animation-play-state: paused;
}

@media (max-width: 767.98px) {
    .hero__slide {
        min-height: clamp(360px, 58vh, 460px);
    }

    .hero__slide--left .hero__body,
    .hero__slide--right .hero__body {
        background: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .85) 100%);
        align-items: flex-end;
    }

    .hero__text-block {
        padding: 32px 0;
    }

    .hero__slide--right .hero__text-block {
        margin-left: 0;
    }

    .hero__pagination .swiper-pagination-bullet {
        width: 28px;
    }
}

/* =========================================================
   CATALOG — карточки блока «Наш каталог»
   ========================================================= */
/* красная плашка — продолжение каталога: сокращаем низ секции,
   чтобы CTA примыкала к карточкам, а не висела ровно посередине
   между каталогом и «О компании» */
.catalog {
    padding-bottom: clamp(24px, 3vw, 44px);
}

.card-product {
    position: relative;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-sm);
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    transition: border-color var(--anim), box-shadow var(--anim), transform var(--anim);
}

a.card-product:hover {
    border-color: transparent;
    box-shadow: var(--shadow-hover);
    transform: translateY(-4px);
}

/* фирменная полоса выезжает по верхней кромке карточки */
.card-product::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--anim);
}

a.card-product:hover::before {
    transform: scaleX(1);
}

/* высоту витрины задаёт утилита .ratio-4x3 в разметке, поэтому у всех
   карточек она одинаковая; .ratio растягивает первого потомка на всю
   коробку абсолютом, из-за чего внутренний отступ живёт на картинке */
.card-product__media {
    /* пьедестал: светлая подложка сверху и мягкая падающая тень под
       товаром — снимок на белом перестаёт висеть в пустоте */
    background:
        radial-gradient(56% 30% at 50% 88%, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 0) 70%),
        linear-gradient(180deg, var(--color-bg-soft) 0%, #fff 78%);
    border-bottom: 1px solid var(--color-line);
    overflow: hidden;
}

/* товар снят на белом и очень разного размера: scale-down вписывает
   крупные картинки и не раздувает мелкие сверх их натуральных пикселей */
.card-product__img {
    padding: 20px;
    object-fit: scale-down;
    transition: transform var(--anim);
}

/* сетка объектов: там не товар на белом, а фотография со стройки —
   снимок заполняет витрину целиком, без пьедестала и полей */
.cards--photo .card-product__media {
    background: var(--color-bg-soft);
}

.cards--photo .card-product__img {
    padding: 0;
    object-fit: cover;
}

/* внутри .content действует «.content img { height: auto }» — оно сильнее
   бутстраповского .ratio > * и не давало снимку занять витрину по высоте */
.content .card-product__img {
    width: 100%;
    height: 100%;
}

a.card-product:hover .card-product__img,
a.card-product:focus-visible .card-product__img {
    transform: scale(1.04);
}

a.card-product:hover .card-product__title,
a.card-product:focus-visible .card-product__title {
    color: var(--color-primary);
}

/* нажатие: карточка проседает — есть отклик и на клик, и на тап */
a.card-product:active {
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.card-product__body {
    padding: 24px;
}

.card-product__title {
    margin: 0;
    font-size: var(--fs-h3);
    font-weight: 700;
    line-height: 1.25;
    transition: color var(--anim);
}

.card-product__price {
    margin: 10px 0 0;
    font-size: 14px;
    color: var(--color-muted);
}

.card-product__price span {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-primary);
    white-space: nowrap;
}

/* дата новости — над заголовком карточки и над h1 статьи */
.card-product__date,
.page-head__date {
    font-size: 14px;
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
}

.card-product__text {
    /* описания приходят из лида страницы и бывают разной длины:
       три строки держат нижний край карточек на одной линии */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 14px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-muted);
}

/* «Узнать подробнее» — настоящая кнопка: текстовую ссылку внизу карточки
   посетители не замечали. Сама карточка — ссылка, поэтому это span */
.card-product__more {
    font-size: 15px;
}

a.card-product:hover .card-product__more,
a.card-product:focus-visible .card-product__more {
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}

.card-product__more .icon {
    transition: transform var(--anim);
}

a.card-product:hover .card-product__more .icon {
    transform: translateX(4px);
}

/* =========================================================
   CTA — полоса-призыв под каталогом
   ========================================================= */
/* весь вертикальный ритм отдан низу: следом идёт новая секция */
.cta {
    padding-bottom: clamp(48px, 6vw, 88px);
}

/* на внутренних страницах следом за плашкой идёт очередная секция со своим
   верхним отступом — двойного воздуха между ними не нужно */
.cta:has(+ .advantages) {
    padding-bottom: 0;
}

.cta__inner {
    position: relative;
    overflow: hidden;
    padding: clamp(24px, 4vw, 40px);
    border-radius: var(--radius);
    background: linear-gradient(120deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: #fff;
    box-shadow: 0 12px 30px rgba(var(--bs-primary-rgb), .22);
}

/* светлое пятно в углу — чтобы плашка не выглядела плоской заливкой */
.cta__inner::after {
    content: "";
    position: absolute;
    top: -40%;
    right: -60px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    pointer-events: none;
}

.cta__text {
    position: relative;
    max-width: 640px;
}

.cta__title {
    font-size: clamp(20px, 2.4vw, 28px);
    font-weight: 700;
    line-height: 1.25;
}

.cta__note {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .85);
}

.cta__actions {
    position: relative;
}

/* белая кнопка вместо btn-primary: красная на красном не читается */
.cta__btn {
    --bs-btn-color: var(--color-primary);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: var(--color-primary-dark);
    --bs-btn-hover-bg: #f2f2f2;
    --bs-btn-hover-border-color: #f2f2f2;
    --bs-btn-active-color: var(--color-primary-dark);
    --bs-btn-active-bg: #ececec;
    --bs-btn-active-border-color: #ececec;
    --bs-btn-focus-shadow-rgb: 255, 255, 255;
}

.cta__phone {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}

.cta__phone:hover {
    color: rgba(255, 255, 255, .8);
}

/* =========================================================
   ПРЕИМУЩЕСТВА
   ========================================================= */
/* секция лежит на фотографии цеха: снимок уже с боке, поэтому
   сверху только затемняющий градиент — чтобы белый текст читался */
.advantages {
    position: relative;
    background: var(--color-dark) url("../img/bg/advantages.jpg") center / cover no-repeat;
    color: #fff;
}

.advantages::before {
    content: "";
    position: absolute;
    inset: 0;
    /* тёплый фирменный подсвет справа сверху вместо ровного чёрного */
    background:
        radial-gradient(66% 90% at 88% 6%, rgba(var(--bs-primary-rgb), .22) 0%, rgba(var(--bs-primary-rgb), 0) 58%),
        linear-gradient(180deg, rgba(28, 28, 28, .86) 0%, rgba(28, 28, 28, .9) 100%);
}

.advantages > .container {
    position: relative;
}

.advantages .section__label {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

/* плашка рассрочки на тёмном становится белой карточкой */
.advantages .advantages__promo {
    border-color: transparent;
    background: #fff;
}

.advantages .advantages__promo-title {
    color: var(--color-dark);
}

.advantages__lead {
    /* мера строки, а не ширина колонки: 780px при 17px давали ~92 знака */
    max-width: 68ch;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .75);
}

.card-adv {
    padding: 24px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: #fff;
    transition: border-color var(--anim), box-shadow var(--anim), transform var(--anim);
}

/* на тёмном фоне тень не читается, поэтому отклик — подъём карточки
   и заливка иконки фирменным цветом */
.card-adv:hover {
    border-color: transparent;
    box-shadow: var(--shadow);
    transform: translateY(-4px);
}

.card-adv:hover .card-adv__icon {
    background: var(--color-primary);
    color: #fff;
}

/* на фотографии цеха var(--shadow) — чёрное по чёрному и не читается:
   отклик даём светлым ореолом, а тень оставляем глубокой */
.advantages .card-adv:hover {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .4), 0 18px 38px rgba(0, 0, 0, .45);
}

.card-adv__icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    transition: background-color var(--anim), color var(--anim);
}

/* размер иконки задаём стилями, а не параметром чанка: атрибуты
   width/height у svg перебиваются css, и один part.icon годится всюду */
.card-adv__icon .icon {
    width: 26px;
    height: 26px;
}

.card-adv__title {
    margin: 0 0 10px;
    font-size: var(--fs-h3);
    font-weight: 700;
    line-height: 1.3;
}

.card-adv__text {
    font-size: 15px;
    line-height: 1.55;
    color: var(--color-muted);
}

/* полоса с рассрочкой — единственный красный акцент блока,
   поэтому карточки выше намеренно оставлены нейтральными */
.advantages__promo {
    border: 1px solid var(--color-line);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius);
    background: #fff;
}

.advantages__promo-icon {
    width: 56px;
    height: 56px;
    border: 2px solid var(--color-primary);
    border-radius: 50%;
    background: #fff;
    color: var(--color-primary);
}

.advantages__promo-icon .icon {
    width: 28px;
    height: 28px;
}

.advantages__promo-title {
    font-size: var(--fs-h3);
    font-weight: 700;
    line-height: 1.3;
}

.advantages__promo-text {
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-muted);
}

/* =========================================================
   ПОРТФОЛИО
   ========================================================= */
.section__note {
    font-size: 14px;
    color: var(--color-muted);
}

/* соотношение задаёт .ratio-16x9 в разметке, здесь только оболочка */
.portfolio__link {
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--color-bg-soft);
}

.portfolio__img {
    object-fit: cover;
    transition: transform var(--anim);
}

.portfolio__link:hover .portfolio__img {
    transform: scale(1.06);
}

/* стрелки: под курсором заливаются фирменным, иначе жест не читается */
.portfolio__arrow:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.portfolio__caption {
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-muted);
}

.portfolio__arrow {
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-line);
    border-radius: 50%;
    background: #fff;
    color: var(--color-dark);
    transition: color var(--anim), border-color var(--anim), background-color var(--anim), opacity var(--anim);
}

/* класс вешает сам Swiper, когда листать в эту сторону некуда */
.portfolio__arrow.swiper-button-disabled {
    opacity: .4;
    pointer-events: none;
}

/* счётчик вместо точек: Swiper подставляет сюда номер и общее число */
.portfolio__counter {
    min-width: 62px;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    color: var(--color-muted);
    text-align: right;
}

.portfolio__counter .swiper-pagination-current {
    font-weight: 700;
    color: var(--color-dark);
}

/* =========================================================
   ЛУПА ПОВЕРХ КАРТИНКИ
   Общая подсказка «фото откроется» — и в портфолио, и у скана отзыва.
   ========================================================= */
/* курсор сразу говорит, что снимок раскроется */
.portfolio__link,
.content-gallery__link,
.content-photo {
    cursor: zoom-in;
}

.zoomer {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    opacity: 0;
    transition: opacity var(--anim);
}

.portfolio__link:hover .zoomer,
.portfolio__link:focus-visible .zoomer,
.service__slide-link:hover .zoomer,
.service__slide-link:focus-visible .zoomer,
.content-gallery__link:hover .zoomer,
.content-gallery__link:focus-visible .zoomer {
    opacity: 1;
}

.zoomer__btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    transform: scale(.85);
    transition: transform var(--anim);
}

.portfolio__link:hover .zoomer__btn,
.service__slide-link:hover .zoomer__btn,
.content-gallery__link:hover .zoomer__btn {
    transform: scale(1);
}

.zoomer__btn .icon {
    width: 22px;
    height: 22px;
}

/* =========================================================
   О КОМПАНИИ
   ========================================================= */
/* мягкая подложка разбивает череду белых секций: каталог и CTA белые,
   «О компании» серая, дальше тёмный блок преимуществ */
.about {
    background: var(--color-bg-soft);
}

/* фотография с отведённой красной рамкой — сама рамка живёт на обёртке,
   потому что .about__media обрезает всё по своим границам */
.about__frame::after {
    content: "";
    position: absolute;
    /* 0, а не -1: иначе рамка зависит от того, создала ли .reveal
       контекст наложения, и без js уезжает под фон секции */
    z-index: 0;
    /* вылет ровно в поля контейнера: больше — и на телефоне появится
       горизонтальная прокрутка */
    right: -12px;
    bottom: -12px;
    width: 62%;
    height: 62%;
    border: 2px solid var(--color-primary);
    border-radius: var(--radius);
}

.about__lead {
    max-width: 68ch;
    font-size: 17px;
    line-height: 1.6;
}

.about__text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-muted);
}

.about__subtitle {
    font-size: var(--fs-h3);
    font-weight: 700;
    line-height: 1.3;
}

.about__list {
    font-size: 15px;
}

.about__list .icon {
    color: var(--color-primary);
    flex-shrink: 0;
}

.about__media {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.about__img {
    object-fit: cover;
}

/* =========================================================
   ТАБЫ НА СТРАНИЦЕ ПОРТФОЛИО
   ========================================================= */
/* раскладку и состояния берём у nav-pills, но через его переменные,
   иначе останется синий цвет Bootstrap по умолчанию */
.portfolio-tabs .nav {
    --bs-nav-link-color: var(--color-dark);
    --bs-nav-link-hover-color: var(--color-primary);
    --bs-nav-link-padding-x: 18px;
    --bs-nav-link-padding-y: 9px;
    --bs-nav-pills-border-radius: 999px;
    --bs-nav-pills-link-active-bg: var(--color-primary);
    --bs-nav-pills-link-active-color: #fff;
}

.portfolio-tabs .nav-link {
    border: 1px solid var(--color-line);
    background: #fff;
    font-size: 15px;
    font-weight: 600;
    transition: color var(--anim), border-color var(--anim), background-color var(--anim);
}

.portfolio-tabs .nav-link:hover,
.portfolio-tabs .nav-link.active {
    border-color: var(--color-primary);
}

/* =========================================================
   КЛИЕНТЫ
   ========================================================= */
.clients {
    background: var(--color-bg-soft);
}

/* логотипы у клиентов с разными фонами — белыми, серыми, чёрными.
   Ставим каждый в одинаковую белую карточку, тогда разнобой
   перестаёт рвать ленту, а сами файлы трогать не нужно */
.clients__card {
    height: 110px;
    padding: 18px 22px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: #fff;
    transition: border-color var(--anim), box-shadow var(--anim), transform var(--anim);
}

div.clients__card {
    cursor: default;
}

/* поднимаем только те карточки, по которым есть куда кликнуть;
   у логотипа без ссылки остаётся одно снятие серого */
a.clients__card:hover,
a.clients__card:focus-visible {
    border-color: transparent;
    box-shadow: var(--shadow);
    transform: translateY(-4px);
}

.clients__logo {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    opacity: .65;
    filter: grayscale(1);
    transition: opacity var(--anim), filter var(--anim);
}

.clients__card:hover .clients__logo {
    opacity: 1;
    filter: none;
}

/* края ленты растворяются — видно, что список продолжается */
.clients__viewport {
    --fade: min(48px, 6vw);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
}

/* =========================================================
   ФОРМЫ
   ========================================================= */
.form__field + .form__field {
    margin-top: 16px;
}

.form__label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
}

.form .form-control {
    padding: 11px 14px;
    border-color: var(--color-line);
    border-radius: var(--radius-sm);
    /* ровно 16px: при меньшем кегле iOS зумит страницу на фокусе */
    font-size: 16px;
}

.form .form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .12);
}

.form__error {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--color-primary);
}

/* пустые сообщения не должны занимать место: и на сервере, и после ajax
   в этих блоках просто ничего нет, пока форму не отправили */
.form__error:empty,
.form__msg:empty {
    display: none;
}

.form__msg {
    margin-bottom: 16px;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-size: 15px;
}

.form__msg--ok {
    border: 1px solid rgba(25, 135, 84, .3);
    background: rgba(25, 135, 84, .08);
    color: #146c43;
}

.form__msg--err {
    border: 1px solid rgba(var(--bs-primary-rgb), .3);
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}

/* ловушка для ботов: человек её не видит, бот заполняет и уходит в отказ */
.form__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.form__submit {
    margin-top: 20px;
}

/* Яндекс SmartCaptcha: без ключа блок пустой и места не занимает */
.form__captcha {
    margin-top: 20px;
}

.form__captcha:empty {
    display: none;
}

/* согласие на обработку данных: раскладку даёт .form-check Bootstrap,
   свой класс отвечает только за размер и цвет */
.form__agree {
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--color-muted);
}

.form__agree .form-check-input {
    margin-top: .2em;
}

.form__agree .form-check-input:checked {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
}

.form__agree .form-check-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .12);
}

.form__agree a {
    color: var(--color-primary);
}

/* ошибка у чекбокса живёт под меткой, а не рядом с ней */
.form__agree .form__error {
    margin-left: -1.5em;
}

/* класс вешает formit.js на время запроса */
.form.formit-loading {
    opacity: .6;
    pointer-events: none;
}

/* =========================================================
   ОБРАТНАЯ СВЯЗЬ
   ========================================================= */
.feedback {
    background: var(--color-bg-soft);
}

.feedback__text {
    max-width: 68ch;
    font-size: 17px;
    line-height: 1.6;
    color: var(--color-muted);
}

.feedback__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.feedback__value {
    font-size: 16px;
    color: inherit;
    text-decoration: none;
}

a.feedback__value:hover {
    color: var(--color-primary);
}

.feedback__card {
    position: relative;
    overflow: hidden;
    padding: clamp(20px, 3vw, 32px);
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow);
}

/* фирменная кромка сверху — карточка формы становится главным
   объектом последнего экрана */
.feedback__card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-dark) 55%, rgba(var(--bs-primary-rgb), .25) 100%);
}

/* =========================================================
   ОТЗЫВЫ
   ========================================================= */
.reviews__lead {
    max-width: 68ch;
    font-size: 17px;
    line-height: 1.6;
}

.reviews__text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-muted);
}

/* виджет Яндекс.Карт: у оригинального кода фиксированные 560×800 —
   ширину делаем резиновой, иначе на телефоне рамка вылезает за контейнер;
   высота 480px по просьбе заказчика, внутри виджета отзывы прокручиваются */
.reviews-widget {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 560px;
    height: 480px;
}

.reviews-widget__frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
}

/* подпись Яндекса лежит поверх нижней кромки iframe — так задумано
   в их коде: она перекрывает служебную строку внутри виджета */
.reviews-widget__link {
    position: absolute;
    bottom: 8px;
    left: 0;
    display: block;
    width: 100%;
    max-height: 14px;
    padding: 0 16px;
    overflow: hidden;
    font-size: 10px;
    line-height: 14px;
    color: #b3b3b3;
    text-align: center;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--anim);
}

.reviews-widget__link:hover,
.reviews-widget__link:focus-visible {
    color: var(--color-primary);
}

/* =========================================================
   КАРТА САЙТА
   ========================================================= */
.sitemap__list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sitemap__sublist {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 10px 0 0;
    padding-left: 22px;
    border-left: 1px solid var(--color-line);
}

.sitemap__link {
    font-size: 16px;
    color: inherit;
    text-decoration: none;
}

.sitemap__link:hover {
    color: var(--color-primary);
}

.sitemap__link--parent {
    font-size: 18px;
    font-weight: 700;
}

/* =========================================================
   ПОДВАЛ
   ========================================================= */
/* та же точечная сетка, что и в блоке цифр: заливка #333 на всю ширину
   экрана без фактуры выглядит провалом внизу страницы */
.footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
}

.footer > * {
    position: relative;
}
.footer {
    position: relative;
    background: var(--color-dark);
    color: #fff;
}

.footer__company {
    font-size: 18px;
    font-weight: 700;
}

.footer__logo {
    color: inherit;
    text-decoration: none;
}

.footer__slogan,
.footer__muted {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .6);
}

.footer__title {
    margin: 0 0 18px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.footer__link {
    font-size: 15px;
    color: rgba(255, 255, 255, .8);
    text-decoration: none;
}

.footer__link:hover,
.footer__link--active > .footer__link {
    color: #fff;
}

.footer__phone {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}

.footer__phone:hover {
    color: var(--color-primary);
}

.footer__social {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    color: #fff;
    transition: border-color var(--anim), background-color var(--anim);
}

.footer__social:hover {
    border-color: var(--color-primary);
    background: var(--color-primary);
}

.footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.footer__copy {
    font-size: 13px;
    color: rgba(255, 255, 255, .6);
}

/* реквизиты — строкой ниже копирайта и ещё тише: юридическая обязанность,
   а не то, что читают */
.footer__requisites {
    font-size: 12px;
    color: rgba(255, 255, 255, .45);
}

/* =========================================================
   МОДАЛЬНОЕ ОКНО
   ========================================================= */
.modal-content {
    border: none;
    border-radius: var(--radius);
}

.modal__text {
    font-size: 15px;
    color: var(--color-muted);
}

/* =========================================================
   ПОЯВЛЕНИЕ ПРИ ПРОКРУТКЕ
   ========================================================= */
/* класс is-visible вешает IntersectionObserver в scripts.js.
   Начальное состояние включается только когда js жив (html.has-js),
   иначе при отключённом JS половина страницы осталась бы невидимой */
.has-js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease;
    will-change: opacity, transform;
}

.has-js .reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* карточки в ряду проявляются лесенкой */
.has-js .row > .reveal:nth-child(2) { transition-delay: .08s; }
.has-js .row > .reveal:nth-child(3) { transition-delay: .16s; }
.has-js .row > .reveal:nth-child(4) { transition-delay: .24s; }
.has-js .row > .reveal:nth-child(5) { transition-delay: .32s; }

/* =========================================================
   ЦИФРЫ
   ========================================================= */
/* блок стоит сразу под тёмными преимуществами, поэтому отделяем его
   не сменой цвета, а фактурой: точечная сетка и тонкая красная линия */
.stats {
    position: relative;
    padding: clamp(40px, 5vw, 64px) 0;
    background: var(--color-dark);
    color: #fff;
    border-top: 3px solid var(--color-primary);
}

.stats::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .1) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
}

.stats > .container {
    position: relative;
}

.stat {
    position: relative;
    padding-left: 18px;
}

.stat::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    width: 3px;
    border-radius: 2px;
    background: var(--color-primary);
}

.stat__num {
    display: block;
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.stat__label {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .65);
}

/* =========================================================
   НАДЗАГОЛОВОК СЕКЦИИ
   ========================================================= */
.section__label {
    padding: 6px 14px;
    border-radius: 999px;
    /* надзаголовок должен быть тише заголовка: вес 600 вместо 700,
       кегль ниже, разрядка шире, плюс тонкая фирменная обводка */
    background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), .13) 0%, rgba(var(--bs-primary-rgb), .05) 100%);
    box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), .14);
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.section__label .icon {
    width: 15px;
    height: 15px;
}

/* на тёмном фоне подложка светлее, чем фирменная плашка */
.stats .section__label,
.footer .section__label {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

/* обводка на тёмном — светлая, фирменная там не видна */
.advantages .section__label,
.stats .section__label,
.footer .section__label {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}

/* =========================================================
   КНОПКА «НАВЕРХ»
   ========================================================= */
.to-top {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1030;
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity var(--anim), visibility var(--anim), transform var(--anim), background-color var(--anim);
}

.to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.to-top:hover {
    background: var(--color-primary-dark);
}

.to-top .icon {
    width: 22px;
    height: 22px;
}

/* =========================================================
   БЕРЕЖНЫЙ РЕЖИМ
   ========================================================= */
/* пользователь попросил систему не анимировать — выключаем всё,
   оставляя только смену цвета */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .hero__pagination .swiper-pagination-bullet-active::after {
        animation: none;
        transform: none;
    }

    .has-js .hero__slider .swiper-slide-active .hero__title,
    .has-js .hero__slider .swiper-slide-active .hero__lead,
    .has-js .hero__slider .swiper-slide-active .hero__features,
    .has-js .hero__slider .swiper-slide-active .hero__btn {
        animation: none;
    }

    .btn-primary:hover,
    a.card-product:hover,
    a.card-product:hover .card-product__img,
    .card-adv:hover,
    .clients__card:hover,
    .portfolio__link:hover .portfolio__img,
    .content-gallery__link:hover img {
        transform: none;
    }

    .has-js .reveal,
    .has-js .reveal.is-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .to-top {
        transition: opacity var(--anim), visibility var(--anim);
        transform: none;
    }

    .card-product:hover,
    .card-adv:hover,
    a.card-product:hover {
        transform: none;
    }

    .portfolio__link:hover .portfolio__img {
        transform: none;
    }
}

/* =========================================================
   BREADCRUMBS
   ========================================================= */
.crumbs__list {
    gap: 4px 8px;
    font-size: 14px;
}

.crumbs__item {
    color: var(--color-muted);
}

.crumbs__item + .crumbs__item::before {
    content: "/";
    margin-inline-end: 8px;
    color: var(--color-line);
}

.crumbs__link {
    color: var(--color-muted);
    text-decoration: none;
}

.crumbs__link:hover {
    color: var(--color-primary);
}

.crumbs__item--current {
    color: var(--color-dark);
}

/* =========================================================
   SERVICE — страница позиции каталога
   ========================================================= */
.service__media {
    min-height: 320px;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
}

.service__img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 420px;
    object-fit: contain;
}

/* --- слайдер карточки ----------------------------------- */
/* фотографии и чертежи модели показываются вверху страницы,
   рядом с ценой: рамка та же, что у одиночной картинки */
.service__slider {
    padding: 24px;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
}

.service__slide-link {
    position: relative;
    overflow: hidden;
    height: clamp(260px, 30vw, 380px);
    border-radius: var(--radius-sm);
    cursor: zoom-in;
}

.service__slide-link .service__img {
    max-height: 100%;
}

.service__arrow {
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-line);
    border-radius: 50%;
    background: #fff;
    color: var(--color-dark);
    transition: color var(--anim), border-color var(--anim), background-color var(--anim), opacity var(--anim);
}

.service__arrow:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* класс вешает сам Swiper, когда листать в эту сторону некуда */
.service__arrow.swiper-button-disabled {
    opacity: .4;
    pointer-events: none;
}

.service__counter {
    min-width: 56px;
    font-size: 14px;
    color: var(--color-muted);
    text-align: center;
}


.service__price {
    margin: 0 0 20px;
    font-size: 15px;
    color: var(--color-muted);
}

.service__price {
    margin-bottom: 0;
}

/* «Цена» — подпись над суммой, а не приставка к ней: правило ниже
   красит любой span, поэтому метку отделяем своим классом */
.service__price .service__price-label {
    display: block;
    margin-bottom: 2px;
    font-size: 15px;
    font-weight: 400;
    color: var(--color-muted);
}

.service__price span {
    font-size: 26px;
    font-weight: 700;
    color: var(--color-primary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.service__capacity {
    font-size: 15px;
    color: var(--color-dark);
}

.service__promo {
    padding: 6px 14px 6px 10px;
    border-radius: 999px;
    background: var(--color-bg-soft);
    font-size: 14px;
    color: var(--color-dark);
}

.service__promo .icon {
    width: 16px;
    height: 16px;
    color: var(--color-primary);
}

/* география поставок: страны перечнем-чипами */
.geo__item {
    padding: 10px 18px;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: #fff;
    font-size: 15px;
    color: var(--color-dark);
}

.geo__item--main {
    border-color: transparent;
    background: var(--color-primary);
    color: #fff;
    font-weight: 600;
}

.geo__item--main .icon {
    width: 18px;
    height: 18px;
}

/* предложение соседнего товара внутри текста страницы */
.cross {
    padding: clamp(16px, 2vw, 28px);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: var(--color-bg-soft);
}

.cross__media {
    overflow: hidden;
    border-radius: var(--radius);
    background: #fff;
}

.cross__media img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform var(--anim);
}

.cross__media:hover img {
    transform: scale(1.04);
}

.content .cross__title {
    margin: 0 0 10px;
    font-size: clamp(19px, 1.6vw, 23px);
}

.cross__text {
    margin: 0 0 18px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-muted);
}

/* =========================================================
   КОНТЕНТ СТРАНИЦЫ
   Текст перенесён со старого сайта как есть: заголовки, списки,
   таблицы характеристик и фотографии. Здесь им задаётся ритм.
   ========================================================= */
.content p {
    line-height: 1.6;
}

.content h2 {
    margin: 32px 0 14px;
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 700;
    line-height: 1.25;
}

.content h3,
.content h4 {
    margin: 24px 0 10px;
    font-size: var(--fs-h3);
    font-weight: 700;
    line-height: 1.3;
}

.content > :first-child {
    margin-top: 0;
}

.content ul,
.content ol {
    margin: 0 0 16px;
    padding-left: 22px;
    line-height: 1.6;
}

.content li + li {
    margin-top: 6px;
}

.content li::marker {
    color: var(--color-primary);
}

.content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}

/* широкие таблицы характеристик прокручиваются внутри своей обёртки,
   а не растягивают страницу */
.content .table-responsive {
    margin: 0 0 20px;
}

.content .table {
    --bs-table-border-color: var(--color-line);
    margin: 0;
    font-size: 15px;
}

.content .table th {
    background: var(--color-bg-soft);
    font-weight: 700;
}

.content blockquote {
    margin: 0 0 20px;
    padding-left: 20px;
    border-left: 3px solid var(--color-primary);
    color: var(--color-muted);
}

/* первый абзац страницы читается как вводка */
.content > p:first-child {
    font-size: 17px;
    line-height: 1.6;
}

.content a:not(.btn):not(.content-photo):not(.card-product):not(.contacts__value):not(.benefit--link):not(.cross__media) {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.content a:not(.btn):not(.content-photo):not(.card-product):not(.contacts__value):not(.benefit--link):not(.cross__media):hover {
    color: var(--color-primary-dark);
}

/* одиночная фотография в тексте: не растягивается и не липнет к строкам */
.content > p > img,
.content > img {
    display: block;
    margin: 20px 0;
}

/* плашка-оффер внутри текста: рассрочка, бесплатная доставка */
.content__offer {
    display: inline-block;
    margin: 0 0 16px;
    padding: 10px 18px;
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
    font-weight: 600;
}

/* --- фотографии страницы ---------------------------------- */
/* сканы документов показываются листом A4: своя утилита пропорции, потому
   что в Bootstrap таких нет — без переменной у блока нулевая высота
   и картинку съедает overflow */
.ratio-3x4 {
    --bs-aspect-ratio: 133.333%;
}

.ratio-doc {
    --bs-aspect-ratio: 141.4%;
}

/* документ нельзя кадрировать: показываем лист целиком на белом поле */
.content-gallery__link--doc {
    border: 1px solid var(--color-line);
    background: #fff;
}

/* поле у листа задаётся отступом самой картинки: внутри .ratio она
   позиционируется абсолютно и padding обёртки её не сдвинет */
.content-gallery__link--doc img {
    padding: 10px;
    object-fit: contain;
}

/* сканы документов не отдаём «сохранить картинку»: без меню по долгому
   нажатию и без перетаскивания — и на плитке, и в просмотрщике */
.content-gallery__link--doc,
.content-gallery__link--doc img,
body:has(.content-gallery__link--doc) .gslide-image img {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

.content-gallery__link {
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--color-bg-soft);
}

.content-gallery__caption {
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-muted);
}

.content-gallery__link img {
    /* .content img задаёт height:auto и перебивает .ratio > * — возвращаем
       картинке габариты плитки, иначе она не заполняет её целиком */
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    transition: transform var(--anim);
}

.content-gallery__link:hover img {
    transform: scale(1.06);
}

/* сетка карточек, вставленная прямо в текст раздела, живёт по своим
   правилам: подчёркивание ссылок и книжная мера строки к ней не относятся */
.content .card-product__title {
    margin: 0;
}


/* =========================================================
   ШАПКА ВНУТРЕННЕЙ СТРАНИЦЫ
   Крошки, заголовок и лид на мягкой подложке — та же ступень,
   что и первый экран главной, только ниже ростом.
   ========================================================= */
.page-head {
    padding: clamp(20px, 2.6vw, 34px) 0 clamp(10px, 1.2vw, 16px);
    background: linear-gradient(180deg, var(--color-bg-soft) 0%, var(--color-bg-soft) 62%, #fff 100%);
}

.page-head__lead {
    max-width: 62ch;
    font-size: clamp(16px, .3vw + 15px, 18px);
    line-height: 1.6;
    color: var(--color-muted);
}

/* =========================================================
   КАРТОЧКИ ВЫГОДЫ И СХЕМЫ В ТЕКСТЕ
   Материалы завода: выгоды по модели плитками, чертежи и схемы
   очистки — на белом поле с рамкой, чтобы линии не сливались с фоном.
   ========================================================= */
.benefit {
    padding: clamp(16px, 1.6vw, 20px);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

/* карточка-ссылка (страница 404, подборки разделов): весь блок кликабельный,
   поэтому ссылочные правила .content к нему применять нельзя */
a.benefit--link {
    color: inherit;
    text-decoration: none;
    transition: border-color var(--anim), box-shadow var(--anim), transform var(--anim);
}

a.benefit--link:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

a.benefit--link:hover .benefit__title {
    color: var(--color-primary);
}

.benefit__icon {
    width: 38px;
    height: 38px;
    margin-bottom: 12px;
    border-radius: 12px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.benefit__title {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

.benefit__text {
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-muted);
}

.content-figure {
    margin: 20px 0;
    padding: clamp(12px, 1.4vw, 20px);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: #fff;
}

.content-figure img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
    border-radius: 0;
}

/* =========================================================
   СТРАНИЦА «О НАС»
   Фотография цеха, цифры о производстве и перечень загрязнений
   карточками — вместо сплошной простыни текста.
   ========================================================= */
/* первый абзац страницы «О нас» — вводка, набирается крупнее остального */
.about-lead {
    font-size: clamp(17px, .3vw + 16px, 19px);
    line-height: 1.55;
}

.about-shot {
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--color-bg-soft);
    box-shadow: var(--shadow);
}

.about-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.fact {
    padding: clamp(16px, 1.6vw, 22px);
    border: 1px solid var(--color-line);
    border-top: 3px solid var(--color-primary);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.fact__num {
    display: block;
    font-size: clamp(26px, 3.4vw, 38px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}

.fact__num sup {
    font-size: .5em;
}

.fact__label {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-muted);
}

.clean {
    padding: 14px 16px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: var(--color-bg-soft);
}

.clean__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #fff;
    color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.clean__text {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

/* =========================================================
   ПОРТФОЛИО: ВКЛАДКИ И ПЛИТКИ
   Фильтр по типу оборудования и сетка работ на отдельной странице.
   ========================================================= */
.portfolio-tabs__nav .nav-link {
    padding: 9px 18px;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: #fff;
    color: var(--color-dark);
    font-size: 15px;
    font-weight: 600;
    transition: color var(--anim), border-color var(--anim), background var(--anim);
}

.portfolio-tabs__nav .nav-link:hover {
    border-color: rgba(var(--bs-primary-rgb), .45);
    color: var(--color-primary);
}

.portfolio-tabs__nav .nav-link.active {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #fff;
}

/* счётчик работ во вкладке проставляется скриптом по факту загруженного */
.portfolio-tabs__count {
    margin-left: 8px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    opacity: .65;
}

/* подпись лежит на самой фотографии: сетка не рвётся строчками разной длины */
.portfolio__label {
    top: auto;
    height: auto;
    padding: 30px 14px 12px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .74) 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

.portfolio__link--tile .zoomer {
    /* затемнение только сверху — низ и так закрыт подписью */
    background: linear-gradient(180deg, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, .1) 60%);
}

/* =========================================================
   КОНТАКТЫ
   Телефон, почта, адрес и часы — четыре плитки рядом с картой.
   ========================================================= */
.contacts {
    display: grid;
    gap: 12px;
}

.contacts__item {
    padding: clamp(14px, 1.4vw, 18px);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--anim), box-shadow var(--anim);
}

.contacts__item:hover {
    border-color: rgba(var(--bs-primary-rgb), .3);
    box-shadow: var(--shadow);
}

.contacts__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.contacts__label {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.contacts__value {
    display: block;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--color-dark);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

a.contacts__value {
    transition: color var(--anim);
}

a.contacts__value:hover {
    color: var(--color-primary);
}

/* адрес и часы — не ссылки, им хватает полужирного */
.contacts__value--plain {
    font-size: 16px;
    font-weight: 600;
}

.contacts__map {
    overflow: hidden;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: var(--color-bg-soft);
}

/* ссылка «Все услуги» в заголовке секции */
.link-more {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    white-space: nowrap;
}

.link-more .icon {
    transition: transform var(--anim);
}

.link-more:hover .icon {
    transform: translateX(4px);
}

/* =========================================================
   ТРЕКИНГ
   Чем крупнее кегль — тем плотнее набор; капс наоборот требует
   разрядки, и тем большей, чем он мельче.
   ========================================================= */
.hero__title {
    letter-spacing: .015em;
}

.section__title,
.title {
    letter-spacing: -.015em;
}

.cta__title,
.advantages__promo-title {
    letter-spacing: -.01em;
}

.stat__num {
    letter-spacing: -.02em;
}

.footer__title {
    letter-spacing: .08em;
}

/* =========================================================
   ФОКУС НА ТЁМНОМ И НА КРАСНОМ
   Глобальное кольцо фирменное, но на подвале и на плашке CTA
   красное по красному не видно — там перекрашиваем в белое.
   ========================================================= */
.footer__link:focus-visible,
.footer__phone:focus-visible,
.footer__logo:focus-visible,
.footer__social:focus-visible,
.cta__phone:focus-visible,
.cta__btn:focus-visible {
    outline-color: #fff;
}

/* =========================================================
   БЕРЕЖНЫЙ РЕЖИМ — хвост
   Основной блок лежит выше правил, добавленных последними
   правками, поэтому те гасим отдельным блоком в самом конце:
   иначе они выигрывают по порядку следования.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    a.card-product:hover .card-product__more .icon,
    a.card-product:focus-visible .card-product__more .icon,
    a.card-product:focus-visible .card-product__img,
    a.card-product:active,
    a.clients__card:hover,
    a.clients__card:focus-visible,
    .link-more:hover .icon {
        transform: none;
    }

    .nav-main__link::after {
        transition: none;
    }
}

/* =========================================================
   PRICES — прайсы гидрофильтров аккордеоном.
   Четыре таблицы по двенадцать строк подряд читались как
   одна бесконечная простыня; первая панель открыта, чтобы
   страница цен встречала цифрами, а не полосками.
   .faq — те же панели под «часто задаваемые вопросы»:
   оформление общее, чтобы раскрывашки на сайте выглядели одинаково.
   ========================================================= */
.prices,
.faq {
    --bs-accordion-border-color: var(--color-line);
    --bs-accordion-border-radius: var(--radius);
    --bs-accordion-inner-border-radius: var(--radius);
    --bs-accordion-btn-padding-y: 16px;
    --bs-accordion-btn-padding-x: clamp(14px, 1.4vw, 20px);
    --bs-accordion-btn-color: var(--color-dark);
    --bs-accordion-btn-bg: #fff;
    --bs-accordion-active-color: var(--color-primary);
    --bs-accordion-active-bg: var(--color-bg-soft);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .15);
    --bs-accordion-body-padding-x: clamp(14px, 1.4vw, 20px);
    --bs-accordion-body-padding-y: 20px;
    /* стрелка Bootstrap — своя, из того же набора Lucide, что и остальные иконки */
    --bs-accordion-btn-icon-width: 18px;
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d80e0e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e");
}

/* .accordion-header — это h2, и общий отступ заголовков контента
   разрывал панель: над кнопкой оставалось 32px пустоты, а стык
   панелей читался двойной линией */
.prices .accordion-header,
.faq .accordion-header {
    margin: 0;
}

/* обводка фокуса нужна клавиатуре, а не мыши: после клика по панели
   она висела вокруг заголовка и выглядела ошибкой */
.prices .accordion-button:focus:not(:focus-visible),
.faq .accordion-button:focus:not(:focus-visible) {
    box-shadow: none;
}

.faq {
    margin: 24px 0;
}

.faq .accordion-button {
    font-weight: 700;
}

.faq .accordion-body > :first-child {
    margin-top: 0;
}

.faq .accordion-body > :last-child {
    margin-bottom: 0;
}

.prices__name {
    font-size: clamp(16px, .4vw + 15px, 18px);
    font-weight: 700;
    line-height: 1.3;
}

/* цена «от» прямо в заголовке: закрытую панель не надо открывать,
   чтобы понять порядок сумм */
.prices__from {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-primary);
    white-space: nowrap;
}

.prices .accordion-body img {
    /* чертёж шириной 850px нельзя растягивать на всю панель: он мылится,
       а таблица уезжает вниз на пол-экрана */
    max-width: min(100%, 700px);
    margin-bottom: 16px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
}

.prices .table {
    margin-bottom: 0;
}

/* =========================================================
   ПЛАШКА НАЛИЧИЯ, ВРЕЗКА ДЛЯ ДИЛЕРОВ И ПОДПИСЬ ПОД СХЕМОЙ
   Заказчик просил показывать наличие у цены и отдельно
   рассказывать про условия для монтажников и дилеров.
   ========================================================= */
.stock {
    /* единственная зелёная точка на сайте: наличие — это «можно брать»,
       красной фирменной такое не скажешь, она здесь значит «внимание» */
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(22, 140, 68, .1);
    color: #168c44;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}

.callout {
    margin: 24px 0;
    padding: clamp(18px, 2vw, 28px);
    border: 1px solid var(--color-line);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius);
    background: var(--color-bg-soft);
}

.callout__title {
    margin: 0 0 10px;
    font-size: var(--fs-h3);
    font-weight: 700;
    line-height: 1.3;
}

.callout > :last-child {
    margin-bottom: 0;
}

.content-figure__caption {
    display: block;
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--color-muted);
    text-align: center;
}

.cookie-warning {
    position: fixed;
    bottom: 8px;
    transform: translateX(-50%);
    left: 50%;
    display: none;
    justify-content: space-between;
    width: 100%;
    padding: 32px;
    border-radius: 8px;
    box-sizing: border-box;
    background-color: white;
    color: rgb(0, 0, 0);
    max-width: 836px;
    box-shadow: 0 0 16px 0 rgb(0, 0, 0, 0.2);
}

.cookie-warning--active {
    display: flex;
    align-items: center;
    z-index: 1000;
}

.cookie-warning__text {
    font-size: 16px;
    line-height: 160%;
    margin-right: 30px;
    max-width: 630px;
}

.cookie-warning__text a {
    color: inherit;
}

.cookie-warning__read {
    display: block;
    margin-left: 15px;
    color: white;
    text-decoration: underline;
}

.cookie-warning__apply {
    cursor: pointer;
    padding: 8px 18px;
    background-color: var(--color-primary);
    border: none;
    border-radius: 4px;
    color: white;
}

@media (max-width: 767px) {
    .cookie-warning--active {
        flex-direction: column;
        text-align: center;
        align-items: center;
        gap: 8px;
        bottom: 0;
        padding: 16px 12px 12px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .cookie-warning__text {
        margin-right: 0;
        font-size: 14px;
        line-height: 1.2;
    }

    .cookie-warning__apply {
        width: 100%;
    }
}
/* --- Патч: липкая панель меню (fixed при is-stuck) --------
   Переопределяет .header__bar чтобы она вылетала из потока при
   прокрутке — иначе sticky внутри короткого <header> уезжает вместе
   с ним за пределы экрана. Высоту компенсирует спейсер в scripts.js. */
.header__bar { position: relative; }
.header__bar.is-stuck {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    backdrop-filter: saturate(180%) blur(10px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    border-bottom-color: transparent;
}

.tpwidget {
    position: fixed;
    bottom: 20px;
    left: 20px;
    /* overflow: hidden; */
    z-index: 999;
}

.tpwidget__button {
    padding: 12px;
    border: none;
    background: #43d854;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    color: white;
    position: relative;
}

.tpwidget__button::before,
.tpwidget__button::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid #43d854;
    transform-origin: center;
    transform-box: fill-box;
    animation: flyBorder1 6s linear infinite;
}

.tpwidget__button::after {
    animation: flyBorder2 3s linear infinite;
    border: 1px solid #43d854;
}

@keyframes flyBorder1 {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0;
        transform: scale(2);
    }

    99% {
        opacity: 0;
    }
}

@keyframes flyBorder2 {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0;
        transform: scale(2);
    }

    99% {
        opacity: 0;
    }
}

.tpwidget__button svg {
    fill: currentColor;
    color: inherit;
    animation: rotateWidgetSvg 3s linear infinite;
}

@keyframes rotateWidgetSvg {

    0%,
    100% {
        transform: scaleX(0) scaleY(0.5);
    }

    50% {
        transform: scaleX(1) scaleY(1)
    }
}

.tpwidget__button-icon--opened {
    display: none;
}

.tpwidget__button--open svg,
.tpwidget__button--open::before,
.tpwidget__button--open::after {
    animation: none;
}

.tpwidget__button--open .tpwidget__button-icon--opened {
    display: block;
    width: 24px;
    height: 24px;
}

.tpwidget__button--open .tpwidget__button-icon--closed {
    display: none;
}

.tpwidget__list {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
}

.tpwidget__list--open {
    display: flex;
}

.tpwidget__list svg {
    width: 32px;
    height: 32px;
    fill: currentColor;
    color: white;
}

.tpwidget__list > * {
    width: 64px;
    height: 64px;
    background-color: #43d854;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: white;
}