/* =========================================
   БАЗОВЫЕ СТИЛИ (ДЕКСТОП)
   ========================================= */

body {
    margin: 0;
    font-family: 'Wix Madefor Display', sans-serif;
    overflow-x: hidden;
    /* Глобальный фикс скролла */
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main {
    flex-grow: 1; /* Работает как пружина: занимает всё пустое пространство и выдавливает футер вниз */
}
*,
*::before,
*::after {
    box-sizing: border-box;
    /* Глобальный фикс размеров с учетом отступов */
}

.container {
    max-width: 1500px;
    margin: 0 auto;
}


/* Шапка */

.header {
    background: #ffffff;
    border-bottom: 1px solid #eee;
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 90px;
}

.header__logo img {
    height: 50px;
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.3s ease;
}


/* =========================================
   МЕНЮ В ШАПКЕ (И ВЫПАДАЮЩИЙ СПИСОК)
   ========================================= */

.menu {
    display: flex;
    align-items: center;
    gap: 30px;
    list-style: none;
    padding: 0;
    margin: 0;
}


/* Расширяем зону li, чтобы при сдвиге мышки меню не пропадало */

.menu>li {
    position: relative;
    padding: 25px 0;
}

.menu>li>a {
    position: relative;
    text-decoration: none;
    color: #333;
    font-size: 16px;
    font-weight: 500;
    transition: color 0.3s;
}


/* По вашей просьбе: цвет текста при наведении НЕ меняется */

.menu>li>a:hover {
    text-decoration: underline;
}


/* =========================================
   ФИКС ДЛЯ ИКОНКИ "ПРОДУКЦИЯ" И ВЫПАДАЮЩЕГО МЕНЮ
   ========================================= */


/* 1. Жестко отключаем появление любых иконок у пунктов ВНУТРИ выпадающего меню */

.sub-menu a::after {
    display: none !important;
    background-image: none !important;
    content: none !important;
}


/* Жестко убираем иконку у всех пунктов меню, КРОМЕ "Продукции" */

.menu>li:not(.menu-item--dropdown)>a::after {
    display: none !important;
    content: none !important;
    background-image: none !important;
}


/* 2. Фиксируем иконку у главного пункта "Продукция", чтобы она была видна ВСЕГДА */

.menu-item--dropdown>a::after {
    opacity: 1 !important;
    /* Делаем всегда видимой */
    transform: rotate(0deg) !important;
    /* Сбрасываем старые смещения в сторону */
    visibility: visible !important;
}


/* 3. При наведении на "Продукцию" галочка должна только переворачиваться вверх */

.menu-item--dropdown:hover>a::after {
    transform: rotate(180deg) !important;
}


/* --- 2. Стили для пункта с выпадающим меню ("Продукция") --- */


/* Галочка, которая видна ВСЕГДА */

.menu-item--dropdown>a::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 6px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    vertical-align: middle;
    transition: transform 0.3s ease;
}


/* При наведении на "Продукция" галочка плавно переворачивается вверх (как на макете) */

.menu-item--dropdown:hover>a::after {
    transform: rotate(180deg);
}


/* --- 3. Само выпадающее меню (Sub-menu) --- */

.sub-menu {
    position: absolute;
    top: 100%;
    /* Прилипает ровно к низу блока li */
    left: -20px;
    min-width: 230px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    /* Красивая мягкая тень */
    border-radius: 12px;
    padding: 15px 0;
    list-style: none;
    margin: 0;
    /* Прячем до наведения мышкой */
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    /* Легкий сдвиг вниз для анимации всплытия */
    transition: all 0.3s ease;
    z-index: 100;
}


/* Показываем выпадающее меню при наведении на пункт "Продукция" */

.menu-item--dropdown:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* Пункты внутри выпадающего списка */

.sub-menu li {
    margin: 0;
    padding: 0;
}

.sub-menu a {
    display: block;
    padding: 10px 25px;
    color: #333 !important;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}


/* Эффект наведения УЖЕ ВНУТРИ окошка (можно убрать, если не нужен) */

.sub-menu a:hover {
    background-color: #f9f9f9;
    color: #E85222 !important;
}


/* Контакты в шапке */

.header__contacts {
    display: flex;
    align-items: center;
    gap: 30px;
}

.header__phone-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.header__phone-label {
    font-size: 12px;
    color: #777;
    margin-bottom: 4px;
}

.header__phone {
    font-weight: 600;
    font-size: 18px;
    text-decoration: none;
    color: #000;
}

.header__phone:hover {
    color: #E85222;
}


/* Кнопки общие */


/* Кнопки общие */

.btn {
    padding: 14px 20px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 500;
    transition: 0.3s;
    font-family: 'Wix Madefor Display', sans-serif;
    display: inline-block;
    background: #e85c2a;
    color: #fff;
}

.btn--primary {
    background: #e85c2a;
    color: #fff;
    border: 1px solid #e85c2a;
}

.btn--primary:hover {
    background: #cf4f22;
}

.btn--outline {
    border: 1px solid #333;
    color: #333;
    background: #fff;
}

.btn--outline:hover {
    background: #333;
    color: #fff;
}


/* Общие заголовки */

.section-title {
    font-size: 36px;
    font-weight: 600;
    line-height: 1.2;
    max-width: 800px;
    font-family: 'Unbounded', sans-serif;
}

.section-title,
.section-title4,
.section-title5 {
    letter-spacing: 1px;
}

.section-title4,
.section-title5 {
    font-size: 36px;
    font-weight: 600;
    line-height: 1.2;
    max-width: 800px;
    font-family: 'Unbounded', sans-serif;
margin-top: 0;
}


/* --- 1 БЛОК (Hero) --- */

.hero {
    position: relative;
    padding: 80px 0 0 0;
    overflow: hidden;
}

.hero__inner {
    display: flex;
    justify-content: space-between;
}

.hero__top-text {
    font-size: 20px;
    color: #201B20;
    margin-bottom: 160px;
    font-weight: 600;
}

.hero__title {
    font-size: 58px;
    font-weight: 600;
    margin: 0 0 20px;
    font-family: 'Unbounded', sans-serif;
    letter-spacing: 3px;
}

.hero__types {
    display: flex;
    gap: 12px;
    font-weight: 600;
    font-size: 22px;
    margin-bottom: 20px;
    font-family: 'Unbounded', sans-serif;
    letter-spacing: 1px;
}

.hero__types span {
    position: relative;
}

.hero__types span:not(:last-child)::after {
    content: "|";
    color: #e85c2a;
    margin-left: 12px;
}

.hero__desc {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 30px;
    max-width: 800px;
}

.hero__buttons {
    display: flex;
    align-items: center;
    gap: 20px;
}

.hero__socials {
    display: flex;
    gap: 12px;
}

.hero__socials img,
.hero__socials svg {
    width: 40px;
    height: 40px;
}


/* =========================================
   ЭФФЕКТ НАВЕДЕНИЯ ДЛЯ СОЦСЕТЕЙ В 1 БЛОКЕ
   ========================================= */


/* Делаем так, чтобы иконка могла плавно увеличиваться */

.hero__socials a {
    display: block;
    transition: transform 0.3s ease;
}


/* Настраиваем плавную смену цвета для фонового круга (rect) внутри SVG */

.hero__socials a svg rect {
    transition: fill 0.3s ease;
}


/* При наведении на ссылку: */

.hero__socials a:hover svg rect {
    fill: #E85222;
    /* 2. Красим фоновый круг в фирменный оранжевый */
}

.hero__image {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    z-index: 2;
    margin-right: calc(-50vw + 50%);
}

.hero__image img {
    max-height: 782px;
    position: relative;
    z-index: 2;
    right: 0;
    display: block;
    /* 1. Добавляем плавность для эффекта наведения */
    transition: transform 0.4s ease;
    will-change: transform;
    /* Подсказка браузеру, чтобы анимация была максимально плавной */
}


/* 2. Добавляем само увеличение при наведении мышки на картинку */

.hero__image img:hover {
    transform: scale(1.03);
    /* Легкое увеличение на 3%, чтобы выглядело дорого и аккуратно */
}

.hero__bg-letter {
    position: absolute;
    top: 50%;
    right: 50px;
    transform: translateY(-50%);
    width: 700px;
    height: 700px;
    background-size: contain;
    z-index: 1;
    -webkit-mask-image: url("assetes/back-1.png");
    mask-image: url("assetes/back-1.png");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    overflow: hidden;
}

.hero__bg-letter video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Видео полностью заполнит форму буквы, не искажаясь */
    pointer-events: none;
    /* Запрещаем случайные клики/паузы по видео */
    z-index: 1;
}


/* --- 2 БЛОК (Преимущества) --- */

.benefits-section {
    background-color: #F4F4F4;
    padding: 50px 0;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

.benefits-grid>.card:nth-child(-n+3) {
    grid-column: span 2;
}

.stacked-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    grid-column: span 3;
}

.stacked-column .card {
    height: auto;
    flex: 1;
    justify-content: center;
}

.card {
    background: #ffffff;
    border-radius: 16px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    transition: transform 0.2s ease;
    height: 100%;
    overflow: hidden;
}

.card-height {
    height: 527px;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.card-title {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 20px 0;
    line-height: 1.3;
    font-family: 'Unbounded', sans-serif;
}

.card-desc {
    font-size: 20px;
    color: #7d7d7d;
    line-height: 1.5;
    margin: 0;
    font-family: 'Wix Madefor Display';
}


/* =========================================
   ИЗОБРАЖЕНИЯ И SVG-КОЛЬЦО В 2 БЛОКЕ
   ========================================= */

.card-image-wrapper {
    position: relative;
    margin: 20px auto 30px auto;
    width: 160px;
    height: 160px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-image-wrapper1 {
    width: 210px;
    height: 210px;
}

.card-image-wrapper3 {
    width: 200px;
    height: 220px;
}


/* 1. Настраиваем SVG-бублик */

.card-image-wrapper svg.bg-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 240px;
    height: 240px;
    z-index: 1;
    /* Кладем на задний план */
}


/* Задаем плотный серый цвет по умолчанию */

.card-image-wrapper svg.bg-ring path,
.card-image-wrapper svg.bg-ring circle {
    transition: fill 0.3s ease;
    fill: #F4F4F4 !important;
    /* Тот самый светло-серый */
    fill-opacity: 1 !important;
    /* Убиваем блеклую прозрачность из Фигмы, если она там есть */
}


/* При наведении красим в яркий оранжевый */

.card:hover .card-image-wrapper svg.bg-ring path,
.card:hover .card-image-wrapper svg.bg-ring circle {
    fill: #E85222 !important;
}


/* 2. Общие стили для прозрачных картинок */

.card-image-wrapper img {
    position: absolute;
    z-index: 2;
    /* Поверх SVG */
    max-width: none;
    max-height: none;
    pointer-events: none;
    width: 110%;
    /* Чтобы мышка не цеплялась за картинки */
}


/* --- 3. Индивидуальная подгонка и центрирование --- */


/* Трубы */

.benefits-grid>.card:nth-child(1) .card-image-wrapper img {
    width: 115%;
    height: auto;
    left: 50%;
    transform: translateX(-50%);
    /* Жестко центрируем */
}


/* Машина */

.benefits-grid>.card:nth-child(2) .card-image-wrapper img {
    width: 155%;
    height: auto;
    left: 50%;
    transform: translateX(-50%);
    /* Жестко центрируем */
}


/* Люди */

.benefits-grid>.card:nth-child(3) .card-image-wrapper img {

    width: auto;
    
    left: 50%;
    transform: translateX(-50%);
    /* Жестко центрируем */
}

.wide-card {
    grid-column: span 3;
    display: flex;
    position: relative;
    background: #ffffff;
    padding: 0 !important;
}

.wide-card-content {
    width: 70%;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 2;
    height: 100%;
}

.wide-desk {
    max-width: 300px;
}

.wide-card-image {
    position: absolute;
    bottom: -40px;
    right: -40px;
    width: 100%;
    height: 100%;
    pointer-events: none;
    display: flex;
    justify-content: flex-end;
}

.wide-card-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}


/* --- 3 БЛОК (Поставщик) --- */

.supplier-section {
    background: #ffffff;
}

.supplier__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: stretch;
    min-height: 600px;
}

.supplier__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 100px 0px;
}

.supplier__content .section-title {
    margin-top: 0; /* Убираем дефолтный отступ браузера */
    margin-bottom: 30px;
}

.supplier__text {
    font-size: 20px;
    line-height: 1.6;
    color: #666;
    margin-bottom: 5px;
    margin-top: 5px;
}

.supplier__buttons {
    margin-top: 40px;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.supplier__gallery-wrapper {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

.supplier__gallery {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    gap: 20px;
}

.gallery-column {
    display: flex;
    flex-direction: column;
    width: 50%;
    will-change: transform;
}

.supplier__gallery img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    border-radius: 16px;
    display: block;
    flex-shrink: 0;
    margin-bottom: 20px;
}

@keyframes scrollUp {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50%);
    }
}

@keyframes scrollDown {
    0% {
        transform: translateY(-50%);
    }
    100% {
        transform: translateY(0);
    }
}

.gallery-column--up {
    animation: scrollUp 20s linear infinite;
}

.gallery-column--down {
    animation: scrollDown 20s linear infinite;
}

.supplier__gallery-wrapper:hover .gallery-column {
    animation-play-state: paused;
}


/* --- 4 БЛОК (Каталог) --- */

.catalog-section {
    background: #f8f8f8;
    padding: 100px 0;
}

.catalog-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 50px;
    gap: 40px;
}

.catalog-header .section-title4 {
    margin-bottom: 0;
    max-width: 900px;
}

.catalog-desc {
    max-width: 500px;
    font-size: 16px;
    line-height: 1.5;
    color: #666;
    margin-top: 10px;    
    text-align: left !important;
}

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

a.catalog-card {
    display: block;
    background-color: #ffffff;
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 0 !important;
    /* ДОБАВЛЯЕМ ЖЕСТКИЙ ФИКС ДЛЯ ОБРЕЗКИ УГЛОВ ПРИ АНИМАЦИИ */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
    transform: translateZ(0);
}

a.catalog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.catalog-card__image {
    width: 100%;
    height: 300px;
    position: relative;
    margin: 0;
    padding: 0;
    z-index: 1;
}

.catalog-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.catalog-card:hover .catalog-card__image img {
    transform: scale(1.08);
}

.catalog-card__content {
    margin-top: -40px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    position: relative;
    z-index: 2;
    background: #ffffff;
    padding: 30px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.catalog-card__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.catalog-card__title {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    font-family: 'Unbounded', sans-serif;
    color: #201B20;
    padding-right: 15px;
    /* 1. Добавляем плавность смены цвета */
    transition: color 0.3s ease;
}

.catalog-card:hover .catalog-card__title {
    color: #E85222;
}

.catalog-card__icon svg {
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.catalog-card:hover .catalog-card__icon svg {
    transform: translateX(5px);
}

.catalog-card__text {
    font-size: 14px;
    color: #888;
    line-height: 1.5;
    margin: 0;
}

.catalog-footer {
    display: flex;
    justify-content: center;
}

.btn--full-width {
    width: 100%;
    padding: 14px 20px;
    text-align: center;
    justify-content: center;
    display: flex;
    font-size: 16px;
    border-radius: 50px;
}


/* --- 5 БЛОК (Форма) --- */

.request-section {
    background: #ffffff;
    position: relative;
    padding: 100px 0;
}

.request__inner {
    display: grid;
    grid-template-columns: 0.5fr 0.5fr;
    gap: 80px;
    align-items: center;
}

.request__content {
    position: relative;
    z-index: 2;
    /* Защищает форму, чтобы она была поверх фото, если они пересекутся */
}

.section-title5 {
    margin: 0;
}

.request__desc {
    font-size: 16px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 40px;
    max-width: 480px;
}

.request__form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.request__form .btn {
    border: none !important;
    cursor: pointer;
}

.form-row {
    display: flex;
    gap: 15px;
    width: 100%;
}

.form-input {
    width: 100%;
    padding: 14px 20px;
    border-radius: 50px;
    background: #F4F4F4;
    border: none;
    font-size: 16px;
    font-family: 'Wix Madefor Display', sans-serif;
    color: #201B20;
    outline: none;
}

.form-input:focus {
    background: #ffffff;
    box-shadow: 0 0 0 2px #E85222;
}

.form-policy {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 5px;
}

.policy-text {
    font-size: 12px;
    color: #181A1DA6;
    line-height: 1.2;
}

.policy-text a {
    color: #181A1DA6;
    text-decoration: underline;
    cursor: pointer;
}

.custom-checkbox {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
}

.custom-checkbox input {
    opacity: 0;
    width: 0;
    height: 0;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 16px;
    width: 16px;
    background-color: #eee;
    border-radius: 4px;
}

.custom-checkbox input:checked~.checkmark {
    background-color: #E85222;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.custom-checkbox input:checked~.checkmark:after {
    display: block;
}

.request__image-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 49vw;
    border-bottom-left-radius: 200px;
    overflow: hidden;
    z-index: 1;
}

.request__image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* Модальное окно */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    z-index: 9998;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    /* Обязательно для работы в браузере Safari (iPhone/Mac) */
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content,
.burger-content-window {
    background: #fff;
    width: 90%;
    max-width: 600px;
    padding: 40px;
    border-radius: 20px;
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.burger-content-window {
    height: 100%;
    max-width: 100%;
    border-radius: 0;
    position: absolute;
    top: 0;
    right: 0;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

#burger-modal.active .burger-content-window {
    transform: translateX(0);
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 30px;
    cursor: pointer;
    color: #999;
    line-height: 1;
}

.modal-close:hover {
    color: #E85222;
}


/* --- 6 БЛОК (Услуги) --- */

.services-section {
    background: #F4F4F4;
    padding: 100px 0;
}

.services-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 50px;
    gap: 40px;
}


/* =========================================
   ЭФФЕКТ НАВЕДЕНИЯ ДЛЯ ИКОНОК УСЛУГ
   ========================================= */


/* 1. Добавляем плавность смены цвета для путей внутри SVG */

.service-card__icon svg path {
    transition: fill 0.3s ease;
}


/* 2. При наведении на саму карточку красим иконку в темно-оранжевый (как у кнопок) */

.service-card:hover .service-card__icon svg path {
    fill: #cf4f22;
}

.services-header .section-title {
    margin: 0;
    max-width: 650px;
}

.services-desc {
    max-width: 450px;
    font-size: 16px;
    line-height: 1.5;
    color: #666;
    margin: 0;
    text-align: right;
    margin-top: 10px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.service-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
}

.service-card__icon svg {
    width: 70px;
    height: 70px;
    display: block;
}

.service-card__title {
    font-family: 'Unbounded', sans-serif;
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.service-card__text {
    font-size: 15px;
    color: #777;
    margin: 0;
    flex-grow: 1;
}


/* --- 7 БЛОК (Контакты) --- */


/* =========================================
   ЭФФЕКТ НАВЕДЕНИЯ ДЛЯ СОЦСЕТЕЙ В КОНТАКТАХ
   ========================================= */


/* Делаем так, чтобы иконка могла плавно увеличиваться */

.contacts-socials .social-icon {
    display: block;
    transition: transform 0.3s ease;
}


/* Настраиваем плавную смену цвета для фонового круга (rect) внутри SVG */

.contacts-socials .social-icon svg rect {
    transition: fill 0.3s ease;
}


/* 2. Красим фоновый круг в фирменный темный цвет */

.contacts-socials .social-icon:hover svg rect {
    fill: #201B20;
    /* Если нужен прямо угольно-черный, замените на #000000 */
}

.contacts-section {
    position: relative;
    height: 900px;
    background: #f4f4f4;
    overflow: hidden;
}

.contacts-map {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 1;
}

.contacts-map [class*="-ground-pane"] {
    filter: grayscale(100%) opacity(0.8);
}

.contacts-inner {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    pointer-events: none;
}

.contacts-cards-wrapper {
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 480px;
}

.contacts-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

.contacts-card__title {
    font-family: 'Unbounded', sans-serif;
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 30px 0;
}

.contacts-card__body {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.contacts-info {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contacts-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.contacts-label {
    font-size: 12px;
    color: #888;
}

.contacts-value {
    font-size: 16px;
    font-weight: 600;
    color: #201B20;
    text-decoration: none;
    transition: color 0.3s ease;
}

a.contacts-value:hover {
    color: #E85222;
}

.contacts-socials {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contacts-telegram-card {
    background: #181A1D;
    color: #ffffff;
    border-radius: 20px;
    padding: 30px 40px;
    font-size: 22px;
    font-weight: 600;
    text-decoration: none;
    display: block;
    transition: 0.3s ease;
}

.contacts-telegram-card u {
    text-decoration: underline;
    text-decoration-color: #E85222;
    text-underline-offset: 4px;
}

.contacts-telegram-card:hover {
    background: #24272b;
    transform: translateY(-5px);
}


/* --- 8 ФУТЕР --- */

.footer {
    background-color: #181A1D;
    color: #ffffff;
    padding: 30px 0;
    font-size: 14px;
}

.footer__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    row-gap: 8px;
    align-items: center;
}


/* Ставим копирайт: 1 колонка, 1 строка (левый верхний угол) */

.footer__copyright {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    color: #cccccc;
}

.footer__left {
    display: flex;
    gap: 40px;
    align-items: center;
    color: #cccccc;
}

.footer__right {
    display: flex;
    gap: 30px;
    align-items: center;
    color: #cccccc;
}

.footer__policy,
.footer__dev a {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: rgba(255, 255, 255, 0.3);
    transition: 0.3s ease;
}

.footer__policy:hover,
.footer__dev a:hover {
    color: #E85222;
    text-decoration-color: #E85222;
}


/* =========================================
   ПЛАВНЫЙ АДАПТИВ (от 1500px до 1000px)
   ========================================= */

.container {
    width: 100%;
    box-sizing: border-box;
    padding: 0 40px;
}

@media (max-width: 1500px) {
    .menu {
        gap: clamp(15px, 2vw, 30px);
    }
    .header__contacts {
        gap: clamp(15px, 2vw, 30px);
    }
    .header__phone {
        font-size: clamp(14px, 1.2vw, 18px);
    }
    .hero__title {
        font-size: clamp(26px, 3.5vw, 58px);
    }
    .hero__types {
        font-size: clamp(16px, 1.5vw, 22px);
    }
    .hero__top-text {
        margin-bottom: clamp(60px, 10vw, 160px);
    }
    .hero__image img {
        max-height: clamp(500px, 50vw, 782px);
    }
    .hero__bg-letter {
        width: clamp(400px, 45vw, 700px);
        height: clamp(400px, 45vw, 700px);
    }
    .section-title,
    .section-title4,
    .section-title5 {
        font-size: clamp(28px, 2.5vw, 36px);
    }
    .wide-card-content {
        width: 60%;
        padding: clamp(20px, 3vw, 30px) !important;
    }
    .wide-card-image {
        width: 45%;
        bottom: -20px;
        right: -20px;
    }
    .supplier__inner {
        gap: clamp(30px, 4vw, 60px);
    }
    .supplier__gallery img {
        height: clamp(240px, 22vw, 280px);
    }
    .catalog-card__image {
        height: clamp(220px, 20vw, 300px) !important;
    }
    .catalog-card__content {
        padding: clamp(20px, 2vw, 30px) !important;
        margin-top: clamp(-40px, -3vw, -20px) !important;
    }
    .catalog-card__title {
        font-size: clamp(18px, 1.5vw, 22px);
    }
    .request__inner {
        gap: clamp(40px, 5vw, 80px);
    }
    .request-section {
        padding: clamp(60px, 7vw, 100px) 0;
    }
    .contacts-section {
        height: clamp(650px, 60vw, 900px);
    }
}


/* =========================================
   ПЕРЕХОД ШАПКИ (Плавное сжатие до 1100px)
   ========================================= */

.mobile-text {
    display: none;
}

.burger-btn-new {
    display: none;
}

/* 1. На экранах от 1100px до 1400px сильно сжимаем меню, но не прячем */
@media (max-width: 1400px) and (min-width: 1101px) {
    .menu { gap: 15px !important; }
    .menu > li > a { font-size: 14px !important; }
    .header__contacts { gap: 15px !important; }
    .header__phone { font-size: 15px !important; }
    .header__logo img { height: 40px !important; }
}

/* 2. И только с 1100px рубим меню и показываем бургер */
@media (max-width: 1100px) {
    .header__nav,
    .header__phone-block {
        display: none;
    }
    .desktop-text {
        display: none;
    }
    .mobile-text {
        display: inline;
    }
    .burger-btn-new {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 50px;
        height: 50px;
        background-color: #201B20;
        border-radius: 50%;
        border: none;
        cursor: pointer;
        flex-shrink: 0;
    }
    .burger-btn-new span {
        display: block;
        width: 20px;
        height: 2px;
        background-color: #ffffff;
        border-radius: 2px;
    }
    .header__contacts {
        gap: 15px;
    }
    .header__logo img { 
        height: 40px !important; 
    }
}


/* =========================================
   ФИНАЛЬНАЯ МОБИЛЬНАЯ ВЕРСИЯ (до 900px, фокус на 375px)
   ========================================= */

@media (max-width: 900px) {
    /* --- Глобальные контейнеры --- */
    .container {
        padding: 0 20px !important;
        box-sizing: border-box !important;
    }
    /* Сброс всех сложных сеток в 1 колонку */
    .benefits-grid,
    .catalog-grid,
    .services-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    .benefits-grid>.card,
    .stacked-column,
    .wide-card {
        grid-column: auto !important;
        width: 100% !important;
    }
    /* --- Шапка --- */
    .header__logo svg {
        width: 100% !important;
        max-width: 130px !important;
        height: auto !important;
    }
    .header__contacts {
        gap: 12px !important;
    }
    .header-btn {
        padding: 10px 16px !important;
        font-size: 14px !important;
    }
    .burger-btn-new {
        width: 44px !important;
        height: 44px !important;
    }
    /* Общие заголовки */
    .section-title,
    
    .section-title5 {
        font-size: 20px !important;
        margin-bottom: 25px !important;
        line-height: 1.3 !important;
    }
    /* --- 1 БЛОК (Hero) --- */
    .hero {
        padding-top: 40px !important;
    }
    .hero__inner {
        flex-direction: column !important;
    }
    .hero__top-text {
        margin-bottom: 30px !important;
        font-size: 14px !important;
    }
    .hero__title {
        font-size: 26px !important;
        line-height: 1.2 !important;
    }
    .hero__content {
        position: relative;
        z-index: 2;
    }
    .hero__types {
        flex-wrap: wrap !important;
        font-size: 16px !important;
        gap: 6px !important;
    }
    .hero__types span:not(:last-child)::after {
        margin-left: 6px !important;
    }
    .hero__buttons {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 15px !important;
        width: 100% !important;
    }
    .hero__buttons .btn--outline {
        display: none !important;
    }
    /* Скрываем вторую кнопку */
    .hero__buttons .btn {
        width: auto !important;
        flex-grow: 1 !important;
        padding: 14px 10px !important;
        font-size: 16px !important;
        white-space: nowrap !important;
        text-align: center !important;
    }
    .hero__socials {
        display: flex !important;
        gap: 8px !important;
        margin-top: 0 !important;
        justify-content: flex-end !important;
        flex-shrink: 0 !important;
    }
    .hero__socials img,
    .hero__socials svg {
        width: 32px !important;
        height: 32px !important;
    }
    .hero__image {
        display: flex !important;
        justify-content: flex-start !important;
        margin-top: 20px !important;
        margin-left: -20px !important;
        margin-right: 0 !important;
        position: relative !important;
    }
    .hero__image img {
        transform: scaleX(-1) !important;
        right: auto !important;
        max-width: 100% !important;
        height: auto !important;
    }
    .hero__bg-letter {
        width: 300px !important;
        height: 300px !important;
        top: 50% !important;
        left: 60% !important;
        transform: translate(-50%, -50%) !important;
        opacity: 0.4 !important;
        z-index: 1 !important;
    }
    /* --- 2 БЛОК (Преимущества) --- */
    .benefits-grid {
        gap: 12px !important;
    }
    .card {
        padding: 15px !important;
    }
    .card-title {
        font-size: 16px !important;
        margin-bottom: 5px !important;
    }
  
    .wide-card {
        flex-direction: row !important;
        align-items: flex-end !important;
        padding: 15px !important;
        gap: 10px !important;
    }
    .wide-card-content {
        width: 55% !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
    }
    .wide-card-image {
        width: 45% !important;
        height: auto !important;
        position: relative !important;
        bottom: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: flex-end !important;
    }
    .wide-card-image img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        object-position: bottom right !important;
    }
    /* --- 3 БЛОК (Поставщик + Галерея) --- */
    .supplier__inner {
        display: flex !important;
        flex-direction: column !important;
        gap: 25px !important;
    }
    .supplier-section {
        padding-bottom: 40px !important;
    }
    .supplier__text {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }
    .supplier__buttons {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .supplier__buttons .btn {
        width: 100% !important;
        padding: 14px !important;
        white-space: normal !important;
        text-align: center !important;
    }
    .supplier__gallery {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    .supplier__gallery {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    .gallery-column {
        height: 90px !important;
        display: flex !important;
        flex-direction: row !important;
        width: max-content !important;
        gap: 10px !important;
        animation: none !important;
    }
    .gallery-column img {
        height: 100% !important;
        width: 150px !important;
        margin: 0 !important;
        display: block !important;
        border-radius: 12px !important;
    }
    /* Горизонтальная анимация */
    @keyframes scrollLeftMob {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(-50%);
        }
    }
    @keyframes scrollRightMob {
        0% {
            transform: translateX(-50%);
        }
        100% {
            transform: translateX(0);
        }
    }
    .gallery-column--down {
        animation: scrollLeftMob 15s linear infinite !important;
    }
    .gallery-column--up {
        animation: scrollRightMob 15s linear infinite !important;
    }
    /* --- 4 БЛОК (Каталог) --- */
    .catalog-section {
        padding: 40px 0 !important;
    }
    .catalog-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        margin-bottom: 20px !important;
        gap: 5px !important;
    }
    .catalog-header .section-title4 {
        margin-bottom: 0 !important;
    }
    .catalog-grid {
        margin-bottom: 25px !important;
    }
    .catalog-card__image {
        height: 220px !important;
    }
    /* --- 5 БЛОК (Форма) --- */
    .request-section {
        padding: 40px 0 0 0 !important;
    }
    .request__inner {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
    }
    .form-row {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .form-input {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .request__image-wrapper {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: -20px !important;
        border-radius: 0 !important;
        height: 250px !important;
        position: relative !important;
        left: 0 !important;
        display: block !important;
        margin-bottom: 0 !important;
        order: 3 !important;
    }
    .request__image-wrapper img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }
    /* --- 6 БЛОК (Услуги) --- */
    .services-section {
        padding: 60px 0 !important;
    }
    .services-header {
        flex-direction: column !important;
        gap: 20px !important;
    }
    .services-desc {
        text-align: left !important;
        margin-top: 0 !important;
    }
    .service-card {
        padding: 30px !important;
        gap: 20px !important;
    }
    .service-card__title {
        font-size: 18px !important;
    }
    /* --- 7 БЛОК (Карта) --- */
    .contacts-section {
        height: auto !important;
        padding-top: 40px !important;
        padding-bottom: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .contacts-inner {
        padding-bottom: 30px !important;
        margin-bottom: 0 !important;
        order: 1 !important;
    }
    .contacts-cards-wrapper {
        max-width: 100% !important;
    }
    .contacts-card {
        padding: 30px 20px !important;
    }
    .contacts-card__title {
        font-size: 22px !important;
    }
    .contacts-telegram-card {
        padding: 25px 20px !important;
        font-size: 18px !important;
    }
    .contacts-map {
        position: relative !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: -20px !important;
        height: 380px !important;
        order: 2 !important;
    }
    /* --- 8 ФУТЕР --- */
    .footer__inner {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        gap: 15px !important;
    }
    .footer__left,
    .footer__right {
        font-size: 11px !important;
        line-height: 1.4 !important;
    }
    .footer__right {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        text-align: right !important;
        gap: 8px !important;
    }
    .footer__dev {
        order: 1 !important;
    }
    .footer__policy {
        order: 2 !important;
    }
}


/* =========================================
   ПРАВКИ: ОДИНАКОВЫЕ КНОПКИ ДЛЯ ВСЕГО САЙТА
   ========================================= */


/* Делаем все кнопки на сайте в едином, аккуратном стиле (как в 1 блоке) */

.btn,
.btn--full-width {
    padding: 14px 24px !important;
    border-radius: 30px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    height: auto !important;
}


/* =========================================
   ПРАВКИ: ФОРМА НА ПЛАНШЕТАХ И НОУТБУКАХ (до 1500px)
   ========================================= */


/* Чтобы поля не были узкими в процессе сужения экрана */

@media (max-width: 1500px) {
    .request__form {
        width: 100% !important;
        max-width: 100% !important;
    }
    .form-row {
        width: 100% !important;
        display: flex !important;
    }
    .form-input {
        width: 100% !important;
        flex-grow: 1 !important;
        /* Заставляет поля тянуться на всю доступную ширину */
        box-sizing: border-box !important;
    }
}


/* =========================================
   ПРАВКИ: ФИНАЛЬНЫЕ ШТРИХИ ДЛЯ ТЕЛЕФОНА (до 900px)
   ========================================= */

@media (max-width: 900px) {
    /* 1. Все базовые кнопки на телефоне делаем чуть компактнее */
    .btn,
    .btn--full-width {
        padding: 8px 16px !important;
        font-size: 16px !important;
    }
    /* 2. Шапка: Уменьшаем кнопку "Позвонить" и сам Бургер */
    .header-btn {
        padding: 8px 12px !important;
        font-size: 16px !important;
    }
    .burger-btn-new {
        width: 36px !important;
        height: 36px !important;
    }
    .burger-btn-new span {
        width: 18px !important;
        /* Делаем белые полоски бургера чуть короче */
    }
    /* 3. Блок 1: Уменьшаем только облака */
    .hero__bg-letter {
       
        bottom: 30px !important;
        right: -10px !important;
        opacity: 1 !important;
        background-size: contain !important;
        background-position: right bottom !important;
    }
    /* 4. Блок 2 (Цех): Заголовок на всю ширину, фото прилипло к правому нижнему краю */
    .wide-card {
        display: block !important;
        /* Убираем колонки */
        position: relative !important;
        padding: 0 !important;
        /* Полностью убираем отступы карточки, чтобы фото прилипло к краям */
        min-height: 160px !important;
        overflow: hidden !important;
    }
    .wide-card-content {
        width: 100% !important;
        padding: 15px 15px 90px 15px !important;
        /* Оставляем отступ снизу, чтобы текст не наехал на фото */
        position: relative !important;
        z-index: 2 !important;
    }
    .wide-card-image {
        position: absolute !important;
        /* Отвязываем фото от текста */
        bottom: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 55% !important;
        /* Регулируем размер фото */
        height: auto !important;
        z-index: 1 !important;
    }
    .wide-card-image img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        object-position: bottom right !important;
        /* Строго прижимаем в угол */
        display: block !important;
        margin: 0 !important;
    }
    /* 5. Блок 3 (Поставщик): Убираем дыру между текстом и галереей */
    .supplier__content {
        padding-top: 20px;
        padding-bottom: 0 !important;
        /* Убили лишний отступ снизу у текста */
    }
    .supplier__inner {
        gap: 15px !important;
        /* Сократили расстояние между блоком текста и галереей */
    }
}


/* =========================================
   ВНУТРЕННОСТИ БУРГЕР-МЕНЮ (Дизайн по макету)
   ========================================= */


/* Контейнер для центрирования всего содержимого */

.burger-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Центрируем по вертикали */
    align-items: center;
    /* Центрируем по горизонтали */
    height: 100%;
    /* Занимаем всю высоту окна */
    width: 100%;
}


/* Переопределяем кнопку закрытия именно для бургера */

.modal-close.burger-close {
    top: 25px !important;
    right: 25px !important;
    padding: 10px !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-close.burger-close svg {
    width: 28px;
    height: 28px;
}


/* Список навигации */

.burger-nav {
    list-style: none;
    padding: 0;
    margin: 0 0 60px 0;
    /* Отступ вниз до телефона */
    display: flex;
    flex-direction: column;
    gap: 35px;
    /* Расстояние между пунктами меню */
    text-align: center;
}


/* Ссылки в навигации */

.burger-nav a {
    text-decoration: none;
    color: #201B20;
    font-family: 'Wix Madefor Display', sans-serif;
    font-size: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: color 0.3s ease;
}

.burger-nav a:hover {
    color: #E85222;
}


/* Блок внизу (телефон и соцсети) */

.burger-footer-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 5px;
}


/* Текст "телефон для связи" */

.burger-phone-label {
    font-size: 14px;
    color: #888;
    font-family: 'Wix Madefor Display', sans-serif;
}


/* Сам номер телефона */

.burger-phone {
    font-family: 'Unbounded', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #201B20;
    text-decoration: none;
    margin-bottom: 15px;
    /* Отступ до соцсетей */
}


/* Иконки соцсетей */

.burger-socials {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.burger-socials .social-icon {
    display: block;
    transition: transform 0.3s ease;
}

.burger-socials .social-icon:hover {
    transform: scale(1.1);
}


/* =========================================
   ОРАНЖЕВАЯ ГАЛОЧКА ДЛЯ ВСЕХ ПУНКТОВ МЕНЮ
   ========================================= */


/* 1. Для десктопного хедера (перезаписываем старую галочку Vector.svg) */

.menu a::after {
    content: "";
    display: inline-block;
    width: 14px !important;
    height: 14px !important;
    margin-left: 8px !important;
    /* Встраиваем оранжевую двойную галочку прямо в код */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4.5L7 7.5L10 4.5' stroke='%23E85222' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 8L7 11L10 8' stroke='%23E85222' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: center !important;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease !important;
    transform: translateX(-5px);
    /* Легкий сдвиг влево до наведения */
}

.menu a:hover::after {
    opacity: 1;
    transform: translateX(0);
    /* Плавно выезжает вправо при наведении */
}


/* 2. Для мобильного бургер-меню */

.burger-nav a::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 8px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4.5L7 7.5L10 4.5' stroke='%23E85222' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 8L7 11L10 8' stroke='%23E85222' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateX(-5px);
}

.burger-nav a:hover::after {
    opacity: 1;
    transform: translateX(0);
}


/* =========================================
   УВЕДОМЛЕНИЕ О COOKIE (ПЛАВАЮЩЕЕ ОКНО)
   ========================================= */

.cookie-notice {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 100%;
    max-width: 1100px;
    /* Ширина плавающего окна */
    background: #ffffff;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
    /* Красивая объемная тень */
    border-radius: 16px;
    /* Скругление как на макете */
    z-index: 10000;
    padding: 30px;
    font-family: 'Wix Madefor Display', sans-serif;
    /* Анимация плавного выезда снизу */
    opacity: 0;
    visibility: hidden;
    transform: translateY(50px);
    transition: all 0.4s ease;
}


/* Класс, который добавляется через JS для показа окна */

.cookie-notice.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.cookie-notice__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    
}

.cookie-notice__text {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

.cookie-notice__text strong {
    color: #201B20;
    font-weight: 600;
}

.cookie-notice__text a {
    color: #666;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.3s ease;
}

.cookie-notice__text a:hover {
    color: #E85222;
}

.cookie-notice__btn {
    padding: 12px 35px !important;
    border: none !important;
    cursor: pointer;
    font-size: 14px !important;
}


/* --- Адаптив для телефонов --- */

@media (max-width: 1200px) {
    .cookie-notice {
        /* На телефоне окно занимает всю ширину с небольшими отступами по краям */
        bottom: 15px;
        right: 15px;
        left: 15px;
        width: auto;
        max-width: none;
        padding: 20px;
    }
    .cookie-notice__text {
        font-size: 12px;
    }
}


/* =========================================
   СТРАНИЦА КАТАЛОГА: ШАПКА НА ВСЮ ШИРИНУ
   ========================================= */

.catalog-intro {
    position: relative;
    background-color: #f8f8f8;
    /* Цвет фона под блоком (переход к карточкам) */
    padding: 50px 0;
    display: flex;
    align-items: center;
}


/* Облака справа (на заднем плане) */

.catalog-intro__bg-clouds {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 60%;
    /* Облака занимают правую часть экрана */
    background: url("assetes/catalog-clouds.png") no-repeat right center;
    background-size: cover;
    z-index: 1;
}


/* Черная плашка, прилипающая к левому краю экрана */

.catalog-intro__bg-black {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    /* Высчитываем ширину: половина экрана + 350px, чтобы плашка закрыла текст и красиво закруглилась */
    width: calc(50vw + 510px);
    max-width: 85%;
    /* Ограничитель, чтобы облака точно было видно */
    background-color: #201B20;
    border-radius: 0 0 230px 0;
    /* Огромное красивое скругление */
    z-index: 2;
}

.catalog-intro .position-relative {
    position: relative;
    z-index: 3;
    /* Текст гарантированно поверх черной плашки */
}

.catalog-intro__content {
    max-width: 1200px;
}

.catalog-intro__title {
    font-family: 'Unbounded', sans-serif;
    font-size: 42px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 15px 0;
    padding-top: 60px;
}

.catalog-intro__desc {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
    margin: 0;
}


/* Хлебные крошки */

.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

.breadcrumbs__link {
    display: flex;
    align-items: center;
    transition: opacity 0.3s;
}

.breadcrumbs__link:hover {
    opacity: 0.8;
}


/* Отступ для списка карточек на странице каталога */

.catalog-list {
    background-color: #f8f8f8;
    padding-bottom: 100px;
    padding-top: 100px;
}


/* =========================================
   ПРАВКА: МОБИЛЬНАЯ ШАПКА КАТАЛОГА ПО МАКЕТУ
   ========================================= */

@media (max-width: 900px) {
    .catalog-intro {
        padding: 40px 0 70px 0 !important;
        /* Увеличили отступ снизу, чтобы изгиб был хорошо виден */
        min-height: auto !important;
    }
    .catalog-intro__bg-black {
        width: 100% !important;
        /* Плашка чуть-чуть не доходит до правого края */
        border-radius: 0 0 100px 0 !important;
        /* Сильный, красивый изгиб, как на макете */
    }
    .catalog-intro__bg-clouds {
        width: 100% !important;
        opacity: 1 !important;
        /* Возвращаем облакам 100% яркости */
        background-position: right bottom !important;
        /* Строго в правый нижний угол */
        background-size: cover !important;
    }
    .catalog-intro__title {
        font-size: 28px !important;
        margin-bottom: 15px !important;
        padding-right: 10px !important;
        /* Чтобы текст не задевал скругление */
    }
    .catalog-intro__desc {
        font-size: 15px !important;
        padding-right: 20px !important;
        /* Ограничиваем ширину текста */
    }
    .breadcrumbs {
        margin-bottom: 25px !important;
    }
}


/* =========================================
   ТОЧНЫЙ АДАПТИВ ШАПКИ КАТАЛОГА ПО МАКЕТУ
   ========================================= */

@media (max-width: 900px) {
    .catalog-intro {
        padding: 30px 0 60px 0 !important;
    }
    .catalog-intro__bg-black {
        width: calc(100%) !important;
        /* Оставляем лишь тонкую полоску в 15px для облаков */
        max-width: none !important;
        /* ВАЖНО: Убиваем то самое ограничение от ПК версии! */
        border-radius: 0 0 90px 0 !important;
        /* Делаем красивый резкий изгиб внизу */
    }
    .catalog-intro__bg-clouds {
        width: 100% !important;
        opacity: 1 !important;
        background-size: cover !important;
        background-position: right bottom !important;
        /* Прижимаем картинку в правый нижний угол */
    }
    /* Сдвигаем текст немного левее, чтобы он не наехал на наш красивый изгиб */
    .catalog-intro__title,
    .catalog-intro__desc {
        padding-right: 25px !important;
    }
}


/* =========================================
   ПРАВКИ: КРОШКИ И ГАЛЕРЕЯ
   ========================================= */


/* 1. Чиним цвет ссылок в хлебных крошках */

.breadcrumbs__link {
    color: rgba(255, 255, 255, 0.6) !important;
    text-decoration: none !important;
    /* Убираем подчеркивание */
    transition: color 0.3s ease;
}

.breadcrumbs__link:hover {
    color: rgba(255, 255, 255, 1) !important;
    /* При наведении становятся белыми */
}

.breadcrumbs__current {
    color: #ffffff;
}


/* 2. Чиним блок галереи, чтобы его не сплющивало */

.product-main__gallery {
    flex: 1;
    min-width: 0;
    width: 100%;
}

.gallery-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* Отступ между большим фото и миниатюрами */
}


/* 3. Делаем миниатюры нормального размера (по макету они прямоугольные) */


/* =========================================
   БРОНЕБОЙНОЕ РЕШЕНИЕ ДЛЯ СКРОЛЛА МИНИАТЮР
   ========================================= */

.gallery-thumbs {
    display: flex !important;
    flex-direction: row !important;
    /* Строго выстраиваем в ряд */
    flex-wrap: nowrap !important;
    /* ЖЕСТКО ЗАПРЕЩАЕМ ПЕРЕНОС */
    overflow-x: auto !important;
    /* Включаем горизонтальный скролл */
    overflow-y: hidden !important;
    /* Прячем все, что пытается выпасть вниз */
    grid-template-columns: none !important;
    /* УБИВАЕМ СТАРУЮ СЕТКУ (GRID) */
    gap: 10px !important;
    width: 100% !important;
    padding-bottom: 10px !important;
    /* Отступ для красивого скроллбара */
    /* Стилизация ползунка скролла (для красоты) */
    scrollbar-width: thin;
}


/* Ползунок для Chrome/Safari/Edge */

.gallery-thumbs::-webkit-scrollbar {
    height: 6px;
}

.gallery-thumbs::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.thumb {
    /* Эта магия запрещает картинке сжиматься (0) и растягиваться (0), 
       жестко фиксируя её базовую ширину */
    flex: 0 0 calc(25% - 10px) !important;
    width: calc(25% - 10px) !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    cursor: pointer;
    border: 2px solid transparent !important;
    transition: 0.3s ease;
    opacity: 0.6;
    padding: 0 !important;
    margin: 0 !important;
}

.thumb.active,
.thumb:hover {
    opacity: 1;
}


/* Мобилка: показываем по 3 фото в ряду */

@media (max-width: 900px) {
    .gallery-thumbs {
        gap: 6px !important;
    }
    .thumb {
        flex: 0 0 calc(33.333% - 6px) !important;
        width: calc(33.333% - 6px) !important;
    }
}


/* Фикс позиционирования кнопок, если они съехали */

.gallery-main-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 20px;
    overflow: hidden;
}


/* =========================================
   СТРАНИЦА ТОВАРА (PRODUCT)
   ========================================= */

.product-page {
    background-color: #f8f8f8;
}


/* --- 1. Шапка с крошками --- */

.product-breadcrumb-bar {
    position: relative;
    padding: 20px 0;
    display: flex;
    align-items: center;
}

.product-breadcrumb-bar__bg-black {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: calc(50vw + 250px);
    max-width: 75%;
    background-color: #201B20;
    border-radius: 0 0 50px 0;
    z-index: 2;
}

.product-breadcrumb-bar__bg-clouds {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: url("assetes/catalog-clouds.png") no-repeat right center;
    background-size: cover;
    z-index: 1;
}

.product-breadcrumb-bar .breadcrumbs {
    margin-bottom: 0;
    position: relative;
    z-index: 5;
}


/* Ссылки в крошках */

.breadcrumbs__link {
    color: rgba(255, 255, 255, 0.6) !important;
    text-decoration: none !important;
    transition: color 0.3s ease;
}

.breadcrumbs__link:hover {
    color: rgba(255, 255, 255, 1) !important;
}

.breadcrumbs__current {
    color: #ffffff;
}


/* --- 2. Главная сетка товара (Flexbox) --- */

.product-main {
    padding: 60px 0 0px 0;
}

.product-main__inner {
    display: flex;
    gap: 10px !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
}


/* Колонки делят пространство поровну */

.product-main__info {
    flex: 1 1 50% !important;
    max-width: 700px !important;
}

.product-main__gallery {
    flex: 0 1 50% !important;
    /* Галерея теперь занимает не больше 40% свободного места */
    max-width: 650px !important;
    /* <- МЕНЯТЬ ЗДЕСЬ: жесткий лимит ширины (попробуйте 450px, если нужно еще меньше) */
    width: 100% !important;
}


/* --- 3. Левая колонка: Текст и Характеристики --- */

.product-main__subtitle {
    font-size: 14px;
    color: #888;
    display: block;
    margin-bottom: 10px;
}

.product-main__title {
    font-family: 'Unbounded', sans-serif;
    font-size: 30px;
    color: #201B20;
    margin: 0 0 25px 0;
    line-height: 1.2;
}

.product-main__desc p {
    font-size: 15px;
    color: #444;
    line-height: 1.6;
    margin-bottom: 15px;
}


/* Характеристики с точками */

.product-specs {
    list-style: none;
    padding: 0;
    margin: 30px 0 40px 0;
}

.product-specs li {
    display: flex;
    align-items: flex-end;
    margin-bottom: 12px;
    font-size: 15px;
}

.spec-name {
    color: #201B20;
    white-space: nowrap;
}

.spec-dots {
    flex-grow: 1;
    border-bottom: 1px dotted #ccc;
    margin: 0 10px;
    position: relative;
    top: -4px;
}

.spec-value {
    font-weight: 600;
    color: #201B20;
    white-space: nowrap;
    text-align: right;
}


/* Кнопки под характеристиками */

.product-main__actions {
    display: flex;
    gap: 15px;
}

.btn--outline {
    background: transparent !important;
    border: 1px solid #201B20 !important;
    color: #201B20 !important;
}

.btn--outline:hover {
    background: #201B20 !important;
    color: #fff !important;
}


/* --- 4. Правая колонка: Галерея --- */

.gallery-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.gallery-main-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    /* Строгая пропорция главного фото */
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
}

.gallery-main-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Кнопки-стрелочки */

.gallery-nav-btns {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
    z-index: 10;
}

.nav-btn {
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 25%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: 0.3s;
}

.nav-btn:hover {
    background: #E85222;
}

.nav-btn:hover svg path {
    stroke: #fff;
}


/* --- 5. Мобильный Адаптив --- */

@media (max-width: 900px) {
    .product-main__inner {
        flex-direction: column;
        gap: 40px;
    }
    .product-main__info,
    .product-main__gallery {
        flex: 1 1 100%;
        max-width: 100%;
    }
    .product-breadcrumb-bar__bg-black {
        width: 90%;
        border-radius: 0 0 30px 0;
    }
    .product-main__actions {
        flex-direction: column;
    }
    .gallery-nav-btns {
        bottom: 10px;
        right: 10px;
    }
}


/* =========================================
   БЛОК ДОКУМЕНТАЦИИ (DOCS SECTION)
   ========================================= */

.docs-section {
    padding: 130px 0;
    background-color: #f8f8f8;
    overflow: hidden;
    /* Чтобы карточки не вызывали скролл всей страницы */
}

.docs-section__inner {
    display: flex;
    gap: 30px;
    align-items: stretch
}


/* Левая часть с текстом */

.docs-section__info {
    flex: 0 0 450px;
    display: flex; 
    flex-direction: column;
}

.docs-section__title {
    font-family: 'Unbounded', sans-serif;
    font-size: 32px;
    line-height: 1.2;
    color: #201B20;
    margin: 0 0 25px 0;
}

.docs-section__text p {
    font-size: 15px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 15px;
}

.docs-section__text strong {
    color: #201B20;
    font-weight: 600;
}


/* Кнопки перелистывания */

.docs-section__nav {
    display: flex;
    gap: 12px;
    margin-top: auto;
}

.docs-nav-btn {
    width: 46px;
    height: 46px;
    background: #fff;
    border: none;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: 0.3s ease;
}

.docs-nav-btn:hover {
    box-shadow: 0 6px 20px rgba(232, 82, 34, 0.2);
    transform: translateY(-2px);
}


/* Правая часть со слайдером */

.docs-section__slider {
    flex: 1;
    min-width: 0;
}


/* ОБНОВЛЕННЫЙ КОНТЕЙНЕР ДЛЯ ИСПРАВЛЕНИЯ ТЕНИ */

.docs-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 10px 0 40px 0 !important;
    /* Немного компенсируем отступ сверху, чтобы карточки не «упали» слишком низко */
    margin-top: -10px !important;
    /* Скрываем стандартный скроллбар */
    scrollbar-width: none;
}

.docs-track::-webkit-scrollbar {
    display: none;
}


/* Карточка документа */

.doc-card {
    flex: 0 0 280px;
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.03);
    min-height: 380px;
    /* ДОБАВИЛИ: плавный переход для увеличения и тени */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}


/* ДОБАВИЛИ: Эффект при наведении (увеличение и усиление тени) */

.doc-card:hover {
    transform: scale(1.03);
    /* Увеличиваем карточку на 3% */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    /* Делаем тень более глубокой */
    z-index: 2;
    /* Выводим карточку поверх остальных, чтобы она не перекрывалась соседями при увеличении */
}

.doc-card__icon {
    margin-bottom: 20px;
}

.doc-card__subtitle {
    font-size: 13px;
    color: #888;
    margin-bottom: 10px;
    display: block;
}

.doc-card__title {
    font-family: 'Wix Madefor Display', sans-serif;
    font-weight: 700;
    color: #201B20;
    line-height: 1.3;
    margin: 0 0 20px 0;
}


/* Низ карточки (кнопка и ссылка) прижимаются к низу */

.doc-card__bottom {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.doc-card__btn {
    width: 100%;
    text-align: center;
    padding: 14px 20px;
    background-color: #E85222;
    color: #fff;
    border-radius: 100px;
    font-weight: 500;
    text-decoration: none;
    transition: 0.3s;
}

.doc-card__btn:hover {
    background-color: #d14519;
}

.doc-card__link {
    font-size: 13px;
    color: #444;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.3s;
}

.doc-card__link:hover {
    color: #E85222;
}


/* --- Адаптив --- */

@media (max-width: 900px) {
    .docs-section__inner {
        flex-direction: column;
        gap: 30px;
    }
    .docs-section__info {
        flex: auto;
        width: 100%;
    }
    .doc-card {
        flex: 0 0 260px;
        /* На мобилке карточки чуть уже */
    }
}


/* =========================================
   БЛОК "СМОТРИТЕ ТАК ЖЕ"
   ========================================= */

.related-products {
    padding: 60px 0 100px 0;
    background-color: #f8f8f8;
    /* Поддерживаем общий цвет фона */
}

.related-products__title {
    font-family: 'Unbounded', sans-serif;
    font-size: 32px;
    color: #201B20;
    margin: 0 0 40px 0;
}


/* Сетка из 3 колонок */

.related-products__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}


/* Карточка */

.related-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}


/* Эффект при наведении на всю карточку */

.related-card:hover {
    transform: translateY(-5px);
    /* Слегка приподнимаем вверх */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    /* Усиливаем тень */
}


/* Блок с фото */

.related-card__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.related-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}


/* При наведении фото слегка увеличивается внутри контейнера */

.related-card:hover .related-card__img img {
    transform: scale(1.05);
}


/* Белый блок с текстом */

.related-card__content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /* Если заголовки разной длины, подвал всегда прижмется к низу */
}

.related-card__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
}

.related-card__title {
    font-family: 'Wix Madefor Display', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #201B20;
    margin: 0;
    line-height: 1.3;
}

.related-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 3px;
    /* Выравниваем по первой строке заголовка */
}

.related-card__state {
    font-size: 13px;
    color: #888;
    margin: auto 0 0 0;
    /* Авто-отступ прижмет этот текст к самому низу */
}

.related-card__state span {
    color: #888;
}


/* --- Адаптив для телефонов и планшетов --- */

@media (max-width: 1024px) {
    .related-products__grid {
        grid-template-columns: repeat(2, 1fr);
        /* По 2 карточки на планшете */
    }
}

@media (max-width: 768px) {
    .related-products__grid {
        grid-template-columns: 1fr;
        /* По 1 карточке на телефоне */
        gap: 20px;
    }
    .related-products__title {
        font-size: 26px;
        margin-bottom: 30px;
    }
}


/* =========================================
   СТРАНИЦА 404 (ERROR PAGE)
   ========================================= */

.page-404,
.page-spasibo {
    background-color: #F5F5F5;
    /* Белый фон страницы */
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - 150px - 100px);
    /* Чтобы контент центрировался по вертикали, если экран большой */
}

.error-section,
.spasibo-section {
    padding: 40px 0 80px 0;
    text-align: center;
}


/* --- Визуальный блок --- */


/* --- Визуальный блок --- */


/* --- Визуальный блок --- */

.error-section__visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 80px auto;
    padding-top: 135px;
    padding-bottom: 80px;
    width: 100%;
    max-width: none;
}

.spasibo-section__visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 80px auto;
    padding-top: 200px;
    padding-bottom: 140px;
    width: 100%;
    max-width: none;
}


/* Форма неба с прямым низом по макету */

.error-section__sky-bg {
    position: absolute;
    left: 0;
    right: 0;
    height: 330px;
    background: url("assetes/404-clouds-bg.png") no-repeat center center;
    background-size: cover;
    /* ИЗМЕНЕНИЕ ЗДЕСЬ: 
       Верхний-левый и верхний-правый углы - 300px (сильно круглые).
       Нижний-правый и нижний-левый - 0 (абсолютно прямые). */
    border-radius: 300px 300px 0 0;
    z-index: 1;
}


/* Картинка с цифрами 404 */

.error-section__img {
    position: relative;
    z-index: 2;
    /* Выводим поверх неба */
    display: block;
    max-width: 50%;
    /* На большом экране картинка занимает 80% ширины */
    height: auto;
    /* Смещаем картинку вниз, чтобы она вылезала за пределы неба */
    transform: translateY(60px);
}

.spasibo-section__img {
    position: relative;
    z-index: 2;
    /* Выводим поверх неба */
    display: block;
    max-width: 65%;
    /* На большом экране картинка занимает 80% ширины */
    height: auto;
    /* Смещаем картинку вниз, чтобы она вылезала за пределы неба */
    transform: translateY(120px);
}


/* --- Текстовый блок (остается почти таким же) --- */

.error-section__content {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 5;
    text-align: center;
}

.error-section__title {
    font-family: 'Unbounded', sans-serif;
    font-size: 32px;
    font-weight: 600;
    color: #201B20;
    margin: 0 0 20px 0;
}

.error-section__desc {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
    margin: 0 0 40px 0;
}


/* Кнопки */

.error-section__actions {
    display: flex;
    justify-content: center;
    gap: 20px;
}


/* --- Адаптив --- */

@media (max-width: 1200px) {
    .error-section__sky-bg {
        height: 300px;
        border-radius: 200px 200px 0 0;
    }
    .error-section__img {
        max-width: 90%;
        /* На планшете картинка может быть шире */
        transform: translateY(50px);
    }
}

@media (max-width: 900px) {
    .error-section__sky-bg {
        height: 220px;
        border-radius: 150px 150px 0 0;
    }
    .error-section__img {
        transform: translateY(40px);
    }
    .error-section__title {
        font-size: 26px;
    }
}

@media (max-width: 600px) {
    .error-section__sky-bg {
        height: 140px;
        border-radius: 100px 100px 0 0;
    }
    .error-section__img {
        max-width: 95%;
        transform: translateY(20px);
    }
    .error-section__title {
        font-size: 22px;
    }
    .error-section__desc br {
        display: none;
    }
    .error-section__actions {
        flex-direction: column;
        gap: 15px;
    }
}


/* =========================================
   МОДАЛЬНОЕ ОКНО "ЗАКАЗАТЬ КОНСУЛЬТАЦИЮ"
   ========================================= */

.callback-modal-content {
    max-width: 650px;
    padding: 50px 60px;
    text-align: center;
}

.callback-modal__title {
    font-family: 'Unbounded', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #201B20;
    margin: 0 0 15px 0;
    line-height: 1.3;
}

.callback-modal__desc {
    font-size: 15px;
    color: #666;
    line-height: 1.5;
    margin: 0 0 30px 0;
}

.callback-modal__form {
    max-width: 100% !important;
    /* Убираем лимит ширины от обычной формы, чтобы поля тянулись */
    margin: 0 auto;
}


/* Центрируем блок с галочкой "согласия" */

.justify-center {
    justify-content: center;
    text-align: left;
}


/* --- Адаптив для телефона --- */

@media (max-width: 600px) {
    .callback-modal-content {
        padding: 40px 20px 30px 20px;
    }
    .callback-modal__title {
        font-size: 20px;
    }
    .callback-modal__desc {
        font-size: 13px;
        margin-bottom: 20px;
    }
}


/* =========================================
   СТИЛИ ДЛЯ ОШИБОК В ФОРМАХ
   ========================================= */


/* Красная обводка для полей с ошибкой */

.form-input.input-error {
    box-shadow: 0 0 0 2px #ff3b30 !important;
    background-color: #fff5f5 !important;
    color: #ff3b30 !important;
}


/* Красная обводка для галочки согласия (если забыли нажать) */

.custom-checkbox.checkbox-error .checkmark {
    box-shadow: 0 0 0 2px #ff3b30 !important;
}


/* Тряска формы при ошибке (для привлечения внимания) */

@keyframes shake {
    0%,
    100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-5px);
    }
    75% {
        transform: translateX(5px);
    }
}

.shake-animation {
    animation: shake 0.3s ease-in-out;
}


/* =========================================
   ФИКС ДЛЯ КНОПКИ "ЗАГРУЗИТЬ ЕЩЕ" В КАТАЛОГЕ
   ========================================= */

.catalog-card.is-hidden {
    display: none !important;
}

/* Стили для текстовых страниц (Политика и т.д.) */
.text-format {
    max-width: 1000px; /* Чтобы строки не были слишком длинными и их было удобно читать */
    color: #333;
}
.text-format p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
}
.text-format h2 {
    font-family: 'Unbounded', sans-serif;
    font-size: 24px;
    margin-top: 40px;
    margin-bottom: 20px;
    color: #201B20;
}
.text-format ul {
    margin-bottom: 20px;
    padding-left: 20px;
}
.text-format li {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 10px;
}
.text-format a {
    color: #E85222;
    text-decoration: underline;
}

/* =========================================
   НОВЫЕ СТИЛИ ДЛЯ СОЦСЕТЕЙ ИЗ MIGX
   ========================================= */

/* Общие стили для всех иконок соцсетей */
.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    text-decoration: none;
}

/* Размеры по умолчанию (для шапки, футера, бургера) */
.social-icon svg {
    width: 40px;
    height: 40px;
    transition: 0.3s ease;
}

/* Плавная смена цвета для любых фигур внутри SVG (круги, фоны, пути) */
.social-icon svg circle,
.social-icon svg rect,
.social-icon svg path {
    transition: fill 0.3s ease, stroke 0.3s ease;
}

/* Эффект увеличения при наведении (общий) */
.social-icon:hover {
    transform: scale(1.1);
}

/* =========================================
   ПЕРЕОПРЕДЕЛЕНИЕ ТОЛЬКО ДЛЯ БЛОКА КОНТАКТОВ
   ========================================= */

/* 1. Уменьшаем размер иконок в контактах */
.contacts-socials .social-icon svg {
    width: 40px; 
    height: 40px;
}

/* 2. Красим фон иконки в черный при наведении именно в контактах */
.contacts-socials .social-icon:hover svg circle,
.contacts-socials .social-icon:hover svg rect {
    fill: #201B20 !important; 
}
/* =========================================
   ЭКСТРЕННЫЙ ФИКС ДЛЯ МОБИЛОК (ПРЕЗЕНТАЦИЯ)
   Вставлять строго в самый низ файла!
   ========================================= */

@media (max-width: 900px) {
    /* 1. ФИКС ЛОГОТИПА (Чтобы не плющило и не прыгало) */
    .header__logo {
        flex-shrink: 0; /* Запрещаем сжиматься при нехватке места */
    }
    .header__logo img {
        height: 38px !important; /* Оптимальная высота для телефона */
        width: auto !important;
        max-width: none !important;
    }

    /* 2. ФИКС КРУЖОЧКОВ С ФОТО (2 БЛОК) */
    .card-image-wrapper {
        width: 130px !important;
        height: 130px !important;
        margin: 10px auto 30px auto !important;
    }
    /* Строго уменьшаем SVG-кольцо, чтобы оно не вываливалось */
    .card-image-wrapper svg.bg-ring {
        width: 180px !important;
        height: 180px !important;
    }
    /* Картинки внутри выравниваем по новому размеру */
    .card-image-wrapper img {
        width: 125% !important; 
    }
    /* 3-я картинка (люди) требует особого позиционирования из-за своей формы */
    .benefits-grid > .card:nth-child(3) .card-image-wrapper img {
        bottom: -15px !important;

    }

    /* 3. ФИКС ШИРОКОЙ КАРТОЧКИ (Цех) */
    /* Чтобы текст не залезал под фотографию на узких экранах */
    .wide-card-content {
        padding: 20px 20px 160px 20px !important; /* Делаем большой отступ снизу под фото */
    }
    .wide-card-image {
        width: 180px !important; /* Фиксируем размер фото, иначе проценты его раздуют */
        right: -10px !important;
        bottom: -10px !important;
    }

    /* 4. ГЛОБАЛЬНЫЙ ФИКС ГОРИЗОНТАЛЬНОГО СКРОЛЛА */
    /* Меняем 100vw на calc, чтобы исключить ширину ползунка скролла */
    .request__image-wrapper,
    .contacts-map {
        width: calc(100% + 40px) !important; /* Ширина контейнера + боковые отступы (20px*2) */
        margin-left: -20px !important;
        max-width: none !important;
    }

    /* 5. МЕЛКИЙ ФИКС ФОРМЫ */
    /* Чтобы чекбокс согласия не прилипал к кнопке */
    .form-policy {
        margin-top: 15px !important;
        align-items: flex-start !important;
    }
    .custom-checkbox {
        margin-top: 2px !important;
    }
}

/* ФИКС ДЛЯ СОВСЕМ МАЛЕНЬКИХ ЭКРАНОВ (Например, iPhone SE - 375px) */
@media (max-width: 400px) {
    .card-image-wrapper {
        width: 110px !important;
        height: 110px !important;
    }
    .card-image-wrapper svg.bg-ring {
        width: 150px !important;
        height: 150px !important;
    }
    .wide-card-content {
        padding: 15px 15px 130px 15px !important;
    }
    .wide-card-image {
        width: 150px !important;
    }
    .card-title {
        font-size: 15px !important;
    }
}
/* =========================================
   PIXEL-PERFECT АДАПТИВ (ФИНАЛ ДЛЯ ЗАКАЗЧИКА)
   Вставлять строго в самый конец css.css!
   ========================================= */

@media (max-width: 900px) {

    /* 1. ГЛОБАЛЬНЫЕ ЗАКРУГЛЕНИЯ 16px ВМЕСТО 30px (Скрин 5) */
    .card,
    .catalog-card,
    .catalog-card__content,
    .service-card,
    .related-card,
    .contacts-card,
    .request__image-wrapper,
    .burger-content-window {
        border-radius: 16px !important;
    }

    /* 2. ЛОГОТИП (чтобы не плющило) */
    .header__logo { flex-shrink: 0 !important; }
    .header__logo img {
        height: 38px !important;
        width: auto !important;
        max-width: none !important;
    }

    /* 3. СПАСЕНИЕ КРУЖОЧКОВ (Скрин 1/3) */
    /* Убиваем глючное SVG-кольцо, делаем чистый CSS-круг с обрезкой как в макете */
    .card-image-wrapper {
        width: 150px !important;
        height: 150px !important;
        margin: 15px auto 20px auto !important;
        border-radius: 50% !important; /* Идеальный круг */
        background: #F4F4F4 !important;
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .card-image-wrapper svg.bg-ring {
        display: none !important; /* Прячем векторный бублик */
    }
    .card-image-wrapper img {
        position: static !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* Картинка заполняет круг без искажений */
        transform: none !important;
    }

    /* 4. ШРИФТЫ В КАРТОЧКАХ (Заголовок больше описания) */
    .card-title {
        font-size: 18px !important; /* Заголовок КРУПНЕЕ */
        line-height: 1.3 !important;
        margin-bottom: 10px !important;
    }
    .card-desc {
        font-size: 16px !important; /* Описание МЕЛЬЧЕ */
        line-height: 1.4 !important;
    }

    /* Широкая карточка (Цех) на мобилке */
    .wide-card { padding: 0 !important; overflow: hidden !important; }
    .wide-card-content { padding: 20px !important; }
    .wide-card-image {
        position: relative !important;
        width: 100% !important;
        height: 150px !important;
        display: block !important;
        bottom: 0 !important; right: 0 !important;
    }
    .wide-card-image img {
        width: 100% !important; height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    /* 5. ГАЛЕРЕЯ ПОСТАВЩИКА (Статичная 2х2 по макету, без прокрутки) */
    .supplier__gallery-wrapper {
        margin-top: 20px;
        height: auto !important;
        border-radius: 16px !important;
    }
    .supplier__gallery {
        position: static !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        height: auto !important;
    }
    .gallery-column {
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
        animation: none !important; /* Останавливаем скролл */
        width: 100% !important;
        height: auto !important;
    }
    /* Оставляем ровно 4 фото (2 ряда по 2), дубликаты прячем */
    .gallery-column img {
        display: none !important;
        width: calc(50% - 5px) !important;
        height: 140px !important;
        margin: 0 !important;
        border-radius: 12px !important;
    }
    .gallery-column img:nth-child(1),
    .gallery-column img:nth-child(2) {
        display: block !important;
    }

    /* 6. БЛОК ФОРМЫ (Картинка снизу не режется и отступ политики) */
    .form-policy {
        margin-top: 0 !important; /* Убрали отступ сверху */
        align-items: flex-start !important;
    }
    .custom-checkbox { margin-top: 2px !important; }
    
    .request__image-wrapper {
        position: relative !important;
        width: 100% !important; /* Убили 100vw, который рвал экран вправо */
        max-width: 100% !important;
        margin-left: 0 !important;
        height: 240px !important;
        border-radius: 16px !important; /* Скругление 16px */
        order: 3 !important; /* Ставим строго под форму */
        margin-top: 20px !important;
    }

    /* 7. ИКОНКИ УСЛУГ (Скрин 7 - Уменьшаем огромные SVG) */
    .service-card__icon svg {
        width: 44px !important;
        height: 44px !important;
    }
    .service-card {
        padding: 25px 20px !important;
        gap: 15px !important;
    }
}
/* =========================================
   ТОЧЕЧНЫЕ ФИКСЫ ПОСЛЕ ТЕСТОВ (ДЛЯ МОБИЛКИ)
   ========================================= */

@media (max-width: 900px) {

    /* 1. УБИРАЕМ ВЫСОТУ КАРТОЧЕК С КРУЖОЧКАМИ */
    .card, 
    .card-height {
        height: auto !important;
        min-height: 0 !important;
    }

    /* 2. СПАСАЕМ МУЖЧИНУ В 3 КРУЖКЕ (Фокус на верхнюю часть фото) */
    .card-image-wrapper img {
        position: absolute !important;
        top: 0 !important; left: 0 !important;
        width: 100% !important; height: 100% !important;
        object-fit: cover !important;
    }
    .benefits-grid > .card:nth-child(3) .card-image-wrapper img {
        object-position: top center !important; /* Смещаем камеру на лицо */
    }

    /* 3. ВОЗВРАЩАЕМ КАРТИНКУ "СОБСТВЕННЫЙ ЦЕХ" И ДЕЛАЕМ КАК НА МАКЕТЕ */
    .wide-card {
        position: relative !important;
        display: block !important;
        min-height: 190px !important;
    }
    .wide-card-content {
        padding: 20px 20px 80px 20px !important; /* Оставляем место внизу для трубы */
    }
    .wide-card-image {
        position: absolute !important;
        bottom: -10px !important;
        right: -10px !important;
        width: 140px !important; /* Жестко задаем размер */
        height: 140px !important;
        display: block !important;
    }
    .wide-card-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: bottom right !important; /* Прижимаем деталь в правый нижний угол */
    }

  

    /* 5. ПОЛНОЕ СКРУГЛЕНИЕ КАРТИНКИ У ФОРМЫ (Хак для Safari и Chrome) */
    .request__image-wrapper {
        border-radius: 16px !important;
        overflow: hidden !important;
        margin: 20px 0 0 0 !important;
        /* Этот код заставляет браузер жестко обрезать края картинки */
        -webkit-mask-image: -webkit-radial-gradient(white, black);
        mask-image: radial-gradient(white, black);
    }
    .request__image-wrapper img {
        border-radius: 16px !important;
    }

    /* 6. УМЕНЬШАЕМ ОТСТУП СНИЗУ В УСЛУГАХ */
    .services-section {
        padding-bottom: 20px !important;
    }
}
/* =========================================
   ФИНАЛЬНЫЙ ФИКС ДЛЯ МОБИЛКИ (ПРЕЗЕНТАЦИЯ)
   Вставлять строго в самый конец css.css!
   ========================================= */

@media (max-width: 900px) {

    /* 1. БЛОК ФОРМЫ (Картинка снизу не режется и отступ политики) */
    .form-policy {
        margin-top: 0 !important; /* Убрали отступ сверху для чекбокса */
        align-items: flex-start !important;
    }
    .custom-checkbox { margin-top: 2px !important; }
    
    /* 2. СПАСЕНИЕ КАРТИНКИ И ЕЁ СКРУГЛЕНИЯ */
    .request__image-wrapper {
        margin-top: 0 !important; /* УБРАЛИ ОТСТУП СВЕРХУ, ЧТОБЫ ВОССТАНОВИТЬ СКРУГЛЕНИЕ */
        
        /* ХАК ДЛЯ ПРИЖАТИЯ К КРАЮ ЭКРАНА, ИГНОРИРУЯ СЕТКУ */
        margin-left: -20px !important; /* Игнорируем левый отступ контейнера */
        margin-right: -20px !important; /* Игнорируем правый отступ контейнера */
        width: calc(100% + 40px) !important; /* Растягиваем на всю ширину экрана */
        
        /* ОСТАЛЬНЫЕ ВАЖНЫЕ НАСТРОЙКИ */
        max-width: none !important; /* Убираем max-width, если он есть */
        height: 240px !important;
        border-radius: 16px !important; /* Скругление 16px */
        overflow: hidden !important;
        
        /* Позиционирование в потоке (чтобы было под формой) */
        position: relative !important;
        display: block !important;
        order: 3 !important; /* Ставим строго под форму */
        
        /* ХАК ДЛЯ ПОЛНОГО СКРУГЛЕНИЯ НА ВСЕХ УСТРОЙСТВАХ */
        -webkit-mask-image: -webkit-radial-gradient(white, black);
        mask-image: radial-gradient(white, black);
    }
    .request__image-wrapper img {
        border-radius: 16px !important;
    }
    /* 2. ИДЕАЛЬНАЯ КАРТИНКА У ФОРМЫ (ПО СЕТКЕ СЛЕВА, НАВЫЛЕТ СПРАВА) */
    .request__image-wrapper {
        margin-top: 30px !important; /* Аккуратный отступ от чекбокса */
        
        margin-right: -20px !important; /* СПРАВА: прижимаем вплотную к краю экрана */
        
        height: 240px !important; /* Жестко фиксируем высоту */
        
        /* Скругляем ТОЛЬКО левые углы (16px), правые прямые (0), т.к. они у края */
        border-radius: 0px 0 0 100px !important; 
        overflow: hidden !important;
        position: relative !important;
        display: block !important;
        order: 3 !important; 
        
        /* Жесткий аппаратный фикс для iOS, чтобы углы резались идеально гладко */
        transform: translateZ(0) !important;
        -webkit-mask-image: -webkit-radial-gradient(white, black);
    }
    
    .request__image-wrapper img {
        position: absolute !important;
        top: 0 !important; 
        left: 0 !important;
        margin: 0 !important; /* ЖЕСТКО УБИВАЕМ отступ, который опускал картинку вниз */
        padding: 0 !important;
        width: 100% !important; 
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 0px 0 0 100px !important;
    }
}
/* =========================================
   ПРАВИЛЬНЫЙ ПОРЯДОК В КАРТОЧКЕ ТОВАРА (МОБИЛКА)
   ========================================= */

@media (max-width: 900px) {
    /* 1. "Растворяем" контейнер с информацией, чтобы получить доступ к заголовкам и тексту */
    .product-main__info {
        display: contents !important;
    }

    /* 2. Расставляем элементы в нужном порядке (сверху вниз) */
    
    /* Шаг 1: Подзаголовок (Позиция со склада...) */
    .product-main__subtitle {
        order: 1 !important;
        margin-bottom: 10px !important;
    }
    
    /* Шаг 2: Главный заголовок (Обсадная труба...) */
    .product-main__title {
        order: 2 !important;
        margin-bottom: 20px !important;
    }
    
    /* Шаг 3: Галерея с фото */
    .product-main__gallery {
        order: 3 !important;
        margin-bottom: 25px !important; /* Отступ после фото */
    }
    
    /* Шаг 4: Текстовое описание */
    .product-main__desc {
        order: 4 !important;
    }
    
    /* Шаг 5: Характеристики */
    .product-specs {
        order: 5 !important;
        margin-top: 10px !important;
        margin-bottom: 30px !important;
    }
    
    /* Шаг 6: Кнопки действий (если они есть) */
    .product-main__actions {
        order: 6 !important;
    }
}
/* =========================================
   ФИКС ШИРИНЫ ХАРАКТЕРИСТИК И КНОПОК В ТОВАРЕ
   ========================================= */

@media (max-width: 900px) {
    /* 1. Заставляем блок характеристик тянуться на всю ширину */
    .product-specs {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
    }
    
    .product-specs li {
        width: 100% !important;
    }

    /* 2. Растягиваем кнопки действий под характеристиками */
    .product-main__actions {
        display: flex !important;
        flex-direction: column !important; /* Ставим кнопки друг под другом */
        width: 100% !important;
        gap: 12px !important; /* Аккуратный отступ между кнопками */
    }

    /* Сами кнопки внутри блока занимают 100% ширины */
    .product-main__actions .btn,
    .product-main__actions a {
        width: 100% !important;
        text-align: center !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }
}

/* =========================================
   ПЛАВНОЕ, "РЕЗИНОВОЕ" УМЕНЬШЕНИЕ ЛОГОТИПА
   ========================================= */

/* Контейнер логотипа */
.header__logo {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

/* Сама картинка или SVG */
.header__logo img,
.header__logo svg {

    width: auto !important; /* Ширина подстраивается сама, без искажений */
    max-width: 100vw !important; /* Защита от багов */
    object-fit: contain !important;
    display: block !important;
}
/* =========================================
   ФИКС ГОРИЗОНТАЛЬНОГО СКРОЛЛА ДОКУМЕНТОВ
   ========================================= */

/* 1. Жестко ограничиваем родителя, чтобы он не растягивался за пределы экрана */
.docs-section__slider {
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important; 
}

/* 2. Настраиваем саму дорожку с документами */
.docs-track {
    display: flex !important;
    flex-wrap: nowrap !important; /* ЖЕСТКО запрещаем карточкам падать вниз */
    overflow-x: auto !important; /* Включаем горизонтальный скролл */
    -webkit-overflow-scrolling: touch !important; /* Делаем скролл плавным на iPhone/Safari */
    gap: 20px !important;
    padding-bottom: 20px !important; /* Оставляем место снизу, чтобы не обрезалась тень */
    scrollbar-width: none; /* Прячем страшный системный скроллбар в Firefox */
}

/* Прячем страшный системный скроллбар в Chrome/Safari, но оставляем возможность свайпать */
.docs-track::-webkit-scrollbar {
    display: none !important;
}

/* 3. Запрещаем карточкам сжиматься */
.doc-card {
    flex: 0 0 280px !important; /* Карточка ВСЕГДА 280px, даже если не влезает */
    max-width: 280px !important;
}

/* 4. Адаптив для телефонов */
@media (max-width: 900px) {
    .doc-card {
        flex: 0 0 260px !important; /* На мобилке чуть поуже */
        max-width: 260px !important;
    }
    
    .docs-track {
        /* Добавляем отступ справа, чтобы последний документ не прилипал к краю экрана при скролле */
        padding-right: 20px !important; 
    }
}
/* Убираем скругление у выезжающего меню бургера */
@media (max-width: 900px) {
    .burger-content-window {
        border-radius: 0 !important;
    }
}
/* Контейнер: распределяем пространство */
.burger-inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Расталкиваем контент */
    padding: 80px 0 50px 0; /* Даем пространство сверху (для крестика) и снизу (от края экрана) */
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

/* Навигация: авто-отступы отцентрируют её по вертикали */
.burger-nav {
    margin: auto 0; /* Это магия флексбокса: блок выровняется строго по центру */
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 35px;
    text-align: center;
}
/* --- СОЦСЕТИ В БУРГЕРЕ --- */

/* 1. Отключаем увеличение при наведении */
.burger-socials .social-icon:hover {
    transform: none !important; 
}

/* 2. Делаем кружки оранжевыми по умолчанию */
.burger-socials .social-icon svg circle,
.burger-socials .social-icon svg rect {
    fill: #E85222 !important;
    transition: fill 0.3s ease !important;
}

/* 3. Делаем кружки черными при наведении */
.burger-socials .social-icon:hover svg circle,
.burger-socials .social-icon:hover svg rect {
    fill: #201B20 !important;
}
/* 1. Контейнер: прижимаем всё к верху и задаем начальный отступ */
.burger-inner {
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important; /* Изменили с center на flex-start */
    padding: 100px 0 50px 0 !important; /* 100px — это твой отступ меню сверху. Можешь сделать больше или меньше */
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

/* 2. Навигация: убираем лишние отступы, чтобы она слушалась родителя */
.burger-nav {
    margin: 0 !important; 
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 35px;
    text-align: center;
}

/* 3. Подвал бургера: магия флексбокса выталкивает его в самый низ */
.burger-footer-block {
    margin-top: auto !important; /* Забирает всё свободное пространство сверху и падает вниз */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 5px;
}
/* =========================================
   ПРАВКИ: ДОКУМЕНТЫ НАВЫЛЕТ И УВЕЛИЧЕНИЕ КАРТОЧЕК (ПК)
   ========================================= */

@media (min-width: 901px) {
    /* 1. Заставляем слайдер игнорировать правый край контейнера */
    .docs-section__slider {
        /* Уводим правый край блока далеко за пределы экрана */
        margin-right: -50vw !important; 
    }
    
    .docs-track {
        /* Возвращаем пространство внутри скролла, чтобы последний документ 
           не прилипал к краю экрана, когда докрутишь до конца */
        padding-right: 50vw !important; 
        /* Увеличиваем расстояние между большими карточками */
        gap: 30px !important; 
    }

    /* 2. Увеличиваем сами карточки документов (как на 2 скрине) */
    .doc-card {
        flex: 0 0 420px !important; /* Делаем их значительно шире (было 280px) */
        max-width: 420px !important;
        padding: 40px !important; /* Делаем внутренние отступы просторнее */
        min-height: 440px !important;
    }

    /* 3. Адаптируем шрифты под новый большой размер карточки */
    .doc-card__title {
        font-size: 26px !important;
        margin: 0 0 25px 0 !important;
        line-height: 1.4 !important;
    }
    
    .doc-card__subtitle {
        font-size: 18px !important;
        margin-bottom: 15px !important;
    }

    /* Слегка увеличиваем иконку в документах */
    .doc-card__icon svg {
        width: 40px !important;
        height: 40px !important;
    }
}
/* =========================================
   ПРАВКА: КНОПКИ СЛАЙДЕРА ДОКУМЕНТОВ НА МОБИЛКЕ (ФИНАЛ)
   ========================================= */

@media (max-width: 900px) {
    /* 1. Уменьшаем огромную дыру между карточками и кнопками */
    .docs-track {
        padding-bottom: 15px !important; /* Убрали лишние 40px с десктопа, оставили только место для легкой тени */
    }

   
    .docs-section__inner {
        position: relative !important;
        padding-bottom: 70px !important; /* Это высота всей "зеленой зоны" в инспекторе */
    }

    .docs-section__nav {
    position: absolute !important;
    bottom: 45px !important; /* БЫЛО 25px. Сделали 45px, чтобы поднять на 20px выше */
    left: 0 !important;
    width: 100% !important;
    margin: 0 !important; /* Оставляем нули, чтобы ничего не мешало */
    display: flex !important;
    justify-content: space-between !important;
    z-index: 10;
    pointer-events: none; 
    /* margin-bottom удалили, он тут не нужен */
}


    .docs-nav-btn {
        pointer-events: auto; /* Возвращаем кликабельность самим кнопкам */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
    }  
}
/* =========================================
   ПРАВКА: УЗКАЯ ЧЕРНАЯ ШТОРКА НА СТРАНИЦЕ ТОВАРА (МОБИЛКА)
   ========================================= */

@media (max-width: 900px) {
    /* 1. Убираем огромные отступы сверху и снизу у шторки на странице товара */
    .product-page .catalog-intro {
        padding: 15px 0 25px 0 !important; 
        min-height: auto !important;
    }

    /* 2. Убиваем нижний маржин у хлебных крошек, который тоже давал пустоту */
    .product-page .catalog-intro .breadcrumbs {
        margin-bottom: 0 !important; 
    }

    /* 3. Уменьшаем радиус скругления (90px на такой узкой полоске будет смотреться криво) */
    .product-page .catalog-intro__bg-black {
        border-radius: 0 0 30px 0 !important; 
    }
}
/* =========================================
   ПРАВКА: КОМПАКТНАЯ ШТОРКА И ОТСТУП ДО КАРТОЧЕК (КАТАЛОГ И КАТЕГОРИИ)
   ========================================= */

@media (max-width: 900px) {
    /* 1. Сжимаем черную шторку (убираем лишнюю пустоту сверху и снизу текста) */
    .catalog-intro {
        padding: 20px 0 35px 0 !important; /* Было 40px 0 70px 0 */
        min-height: auto !important;
    }

    /* Уменьшаем изгиб, чтобы он гармонично смотрелся на невысокой плашке */
    .catalog-intro__bg-black {
        border-radius: 0 0 40px 0 !important; /* Было 90px */
    }

    /* 2. Подтягиваем блок с карточками выше к шторке */
    .catalog-list,
    .catalog-section {
        padding-top: 30px !important; /* Убиваем десктопные 100px */
    }
}
/* =========================================
   СОЦСЕТИ В КОНТАКТАХ (Поведение как в бургере)
   ========================================= */

/* 1. Отключаем увеличение при наведении */
.contacts-socials .social-icon:hover {
    transform: none !important; 
}

/* 2. Делаем кружки оранжевыми по умолчанию */
.contacts-socials .social-icon svg circle,
.contacts-socials .social-icon svg rect {
    fill: #E85222 !important;
    transition: fill 0.3s ease !important;
}

/* 3. Делаем кружки черными при наведении */
.contacts-socials .social-icon:hover svg circle,
.contacts-socials .social-icon:hover svg rect {
    fill: #201B20 !important;
}


/* =========================================
   ФИНАЛЬНЫЙ ФИКС: КАРТИНКА "ЦЕХ" (Прилипание + Зум)
   ========================================= */

/* 4. Настраиваем саму картинку и готовим к анимации */
.wide-card-image img {
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    object-position: bottom right !important; /* Центр тяжести — правый нижний угол */
    
    /* Настройки анимации */
    transform-origin: bottom right !important; /* Увеличиваться она будет ИЗ угла, а не во все стороны */
    transition: transform 0.4s ease !important; /* Плавность зума */
}

/* 5. Эффект увеличения при наведении на карточку */
.wide-card:hover .wide-card-image img {
    transform: scale(1.03) !important; /* Зум на 8%. Можно сделать 1.05, если нужно слабее */
}


/* =========================================
   АДАПТИВ ДЛЯ УЛЬТРАШИРОКИХ ЭКРАНОВ (2560px+)
   ========================================= */
@media (min-width: 2500px) {
    /* Главный контейнер */
    .container { max-width: 2100px; }
    
    /* Шапка */
    .header__inner { height: 130px; }
    .header__logo img { height: 75px !important; }
    .menu { gap: 70px; }
    .menu > li > a { font-size: 24px; }
    .header__phone-label { font-size: 16px; margin-bottom: 8px; }
    .header__phone { font-size: 28px; }
    
    /* Общие элементы (Кнопки и Заголовки) */
    .btn { padding: 22px 40px !important; font-size: 20px !important; border-radius: 50px !important; }
    .section-title, .section-title4, .section-title5 { font-size: 72px; max-width: 1400px; margin-bottom: 50px; }
    
    /* 1 БЛОК (Hero) */
    .hero { padding-top: 140px; }
    .hero__top-text { font-size: 26px; margin-bottom: 220px; }
    .hero__title { font-size: 96px; margin-bottom: 40px; letter-spacing: 5px; }
    .hero__types { font-size: 34px; gap: 20px; margin-bottom: 40px; }
    .hero__types span:not(:last-child)::after { margin-left: 20px; }
    .hero__desc { font-size: 28px; max-width: 1300px; margin-bottom: 60px; line-height: 1.6; }
    
    .hero__socials img, .hero__socials svg { width: 64px !important; height: 64px !important; }
    .hero__socials { gap: 20px; }
    
    /* Правая часть 1 блока (Облако и Картинка) */
    .hero__bg-letter { 
        width: 900px; 
        height: 1600px; 
        right: calc(56vw - 1370px);/* Держим в пределах видимости */
    }
    .hero__image img { max-height: 1500px; }
    
    /* 2 БЛОК (Преимущества) */
    .benefits-section { padding: 100px 0; }
    .benefits-grid { gap: 30px; }
    .card { padding: 50px; border-radius: 24px; }
    .card-title { font-size: 34px; margin-bottom: 25px; }
    .card-desc { font-size: 24px; }
    
    .card-image-wrapper { width: 220px !important; height: 220px !important; margin: 40px auto 50px auto !important; }
    
    .wide-card-content { padding: 50px; }
    .wide-card-image { width: auto; height: 110%; bottom: -10; right: -10; }
    
    /* 3 БЛОК (Поставщик) */
    .supplier__inner { gap: 120px; min-height: 800px; }
    .supplier__content { padding: 150px 0; }
    .supplier__text { font-size: 26px; line-height: 1.7; }
    .supplier__gallery img { height: 450px; margin-bottom: 30px; border-radius: 24px; }
    
    /* 4 БЛОК (Каталог) */
    .catalog-section { padding: 150px 0; }
    .catalog-grid { gap: 40px; margin-bottom: 50px; }
    .catalog-card__image { height: 500px; }
    .catalog-card__content { padding: 50px; margin-top: -60px; border-top-left-radius: 40px; border-top-right-radius: 40px; }
    .catalog-card__title { font-size: 32px; }
    .catalog-card__text { font-size: 20px; }
    .catalog-card__icon svg { width: 36px; height: 36px; }
    
    /* 5 БЛОК (Форма) - Как на скриншоте */
    .request-section { padding: 180px 0; }
    .request__inner { gap: 150px; }
    .request__desc { font-size: 26px; max-width: 800px; margin-bottom: 60px; line-height: 1.6; }
    
    /* Увеличиваем поля ввода */
    .request__form { gap: 25px; }
    .form-row { gap: 25px; }
    .form-input { padding: 25px 40px; font-size: 22px; border-radius: 60px; }
    
    /* Увеличиваем чекбокс и текст политики */
    .form-policy { margin-top: 15px; gap: 15px; }
    .policy-text { font-size: 16px; }
    .custom-checkbox { width: 24px; height: 24px; }
    .checkmark { width: 24px; height: 24px; border-radius: 6px; }
    .checkmark:after { left: 8px; top: 3px; width: 6px; height: 12px; border-width: 0 3px 3px 0; }
    
    /* Мега-изгиб картинки справа */
    .request__image-wrapper { 
        width: 45vw; 
        border-bottom-left-radius: 500px; /* Тот самый огромный радиус как на макете */
    }
    
    /* ДОКУМЕНТЫ */
    .docs-section { padding: 200px 0; }
    .docs-section__title { font-size: 52px; }
    .docs-section__text p { font-size: 24px; }
    .doc-card { flex: 0 0 650px !important; max-width: 650px !important; min-height: 550px !important; padding: 60px !important; border-radius: 30px; }
    .doc-card__title { font-size: 34px !important; }
    .doc-card__subtitle { font-size: 22px !important; }
    .doc-card__icon svg { width: 60px !important; height: 60px !important; }
    
    /* ФУТЕР */
    .footer { padding: 60px 0; font-size: 20px; }
    .footer__left, .footer__right { gap: 80px; }

.services-desc{
font-size: 25px;
}
.section-title{
font-size: 60px;
}

/* =========================================
   ФИКС БЕЛОЙ ПОЛОСЫ ПЕРЕД ФУТЕРОМ
   ========================================= */

/* Делаем сам main flex-контейнером */
main {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Ваше старое свойство, оставляем его */
}

/* Заставляем последнюю секцию растянуться до самого футера */
main > section:last-child {
    flex-grow: 1; 
}
/* =========================================
   ФИКС ОТСТУПА В ТОВАРЕ НА НОУТБУКАХ (до 1500px)
   ========================================= */
@media (max-width: 1500px) and (min-width: 901px) {
    .product-main__inner {
        gap: 5% !important; /* Резиновый отступ в 5% от ширины экрана */
    }
    .product-main__info {
        flex: 0 0 55% !important;
        max-width: 55% !important;
    }
    .product-main__gallery {
        flex: 0 0 40% !important;
        max-width: 40% !important;
    }
}
/* =========================================
   ФИКС ОГРОМНОЙ ДЫРЫ В ТОВАРЕ НА БОЛЬШИХ ЭКРАНАХ (от 1501px)
   ========================================= */
@media (min-width: 1501px) {
    .product-main__inner {
        justify-content: center !important; /* Центрируем контент, убивая разлет по краям */
        gap: 80px !important; /* Ставим фиксированный, аккуратный отступ */
    }
    
    /* Слегка разрешаем колонкам стать шире, чтобы на 4K мониторах они не казались узенькими полосками */
    .product-main__info {
        max-width: 800px !important;
    }
    .product-main__gallery {
        max-width: 750px !important;
    }
}



/* =========================================
   ФИКС ХАРАКТЕРИСТИК (ВИДИМЫЕ ТОЧКИ И ПЕРЕНОС)
   ========================================= */
.product-specs li {
    display: flex !important;
    align-items: flex-end !important;
    width: 100% !important;
    justify-content: space-between !important;
}

.spec-name {
    white-space: normal !important;
    max-width: 45% !important;
    flex-shrink: 0 !important; 
}

.spec-dots {
    flex-grow: 1 !important; 
    min-width: 15px !important;
    height: 0 !important; /* Жестко нулевая высота */
    border-bottom: 2px dotted #bcbcbc !important; /* Точки 2px и чуть темнее - бронебойно для Safari */
    margin: 0 10px 6px 10px !important; /* Поднимаем маржином, а не position: relative */
    position: static !important; /* Убиваем relative, чтобы блок не глючило */
}

.spec-value {
    white-space: normal !important;
    text-align: right !important;
    max-width: 50% !important;
    flex-shrink: 0 !important;
    line-height: 1.3 !important;
}
/* =========================================
   ФИКС ХАРАКТЕРИСТИК (СХЛОПЫВАНИЕ ТОЧЕК И ПЕРЕНОС)
   ========================================= */
.product-specs li {
    display: flex !important;
    align-items: flex-end !important;
    width: 100% !important;
    justify-content: space-between !important;
}

.spec-name {
    white-space: normal !important;
    max-width: 45% !important;
    flex-shrink: 0 !important; /* Запрещаем тексту сплющиваться */
}

.spec-dots {
    flex-grow: 1 !important; /* ЖЕСТКО заставляем точки заполнять ВСЮ пустоту */
    min-width: 15px !important;
    margin: 0 10px !important;
    border-bottom: 1px dotted #ccc !important;
    position: relative !important;
    top: -6px !important; /* Ровняем точки по базовой линии текста */
}

.spec-value {
    white-space: normal !important;
    text-align: right !important;
    max-width: 50% !important;
    flex-shrink: 0 !important;
    line-height: 1.3 !important;
}

/* =========================================
   МАСШТАБ КАРТОЧКИ ТОВАРА НА БОЛЬШИХ ЭКРАНАХ
   ========================================= */



/* Экстремальное увеличение для 2560px+ */
@media (min-width: 2500px) {
 .breadcrumbs{
font-size: 24px !important; /* Уменьшаем шрифт */
}
.header__phone-label{
font-size: 20px !important;
}
.catalog-intro__title{
font-size: 65px;
}
.catalog-card__title, .service-card__title, .contacts-card__title{
font-size: 40px;
}
.callback-modal__title{
font-size: 30px;
}
.catalog-intro__desc, .category-desc, .service-card__text, .contacts-value, .contacts-telegram-card, .callback-modal__desc, .policy-text, .text-format p{
font-size: 24px;
}
.sub-menu a, .contacts-label{
font-size: 20px;
}

    /* Расширяем колонки, чтобы убить пустые фиолетовые поля по бокам */
    .product-main__inner { gap: 120px !important; }
    .product-main__info { max-width: 1100px !important; flex: 0 0 50% !important; }
    .product-main__gallery { max-width: 1000px !important; flex: 0 0 45% !important; }

    /* Гигантские шрифты для страницы товара */
    .product-main__subtitle { font-size: 28px !important; margin-bottom: 30px !important; }
    .product-main__title { font-size: 70px !important; margin-bottom: 40px !important; }
    .product-main__desc p { font-size: 32px !important; line-height: 1.6 !important; margin-bottom: 40px !important; }

    /* Растягиваем сами характеристики */
    .product-specs { margin: 60px 0 80px 0 !important; }
    .product-specs li { font-size: 30px !important; margin-bottom: 30px !important; }
    .spec-name, .spec-value { font-size: 24px !important; line-height: 1.4 !important; }
    .spec-dots { top: -10px !important; } /* Точки чуть выше из-за крупного шрифта */
}

    /* Точки чуть выше из-за крупного шрифта на большом экране */
    .spec-dots { margin-bottom: 12px !important; } 
}
/* =========================================
   БРОНЕБОЙНЫЙ ФИКС ТОЧЕК ДЛЯ SAFARI / MAC
   ========================================= */
.spec-dots {
    display: block !important; /* Safari требует блок, чтобы отрисовать пустой span */
    flex: 1 1 auto !important; /* Максимально надежное растягивание */
    min-width: 15px !important;
    height: 1px !important; /* Даем реальную высоту, иначе Safari схлопнет блок в 0 */
    border-bottom: 2px dotted #bcbcbc !important; 
    margin: 0 10px 7px 10px !important; /* Двигаем точки по высоте отступом снизу */
    position: static !important; 
}


/* =========================================
   АДАПТИВ ХЛЕБНЫХ КРОШЕК (ПЕРЕНОС СТРОК)
   ========================================= */
/* Глобально разрешаем крошкам переноситься как обычному тексту */
.breadcrumbs {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important; /* Главная магия: разрешаем перенос */
    row-gap: 8px !important; /* Отступ между верхней и нижней строкой при переносе */
    column-gap: 10px !important;
    line-height: 1.4 !important;
}

/* =========================================
   ФИНАЛЬНОЕ ИСПРАВЛЕНИЕ СЕТКИ КАРТОЧКИ ТОВАРА (ДЛЯ ВСЕХ ЭКРАНОВ ПК)
   ========================================= */

/* 1. Глобально запрещаем колонкам разлетаться по краям контейнера */
.product-main__inner {
    justify-content: flex-start !important; 
}

/* 2. Для стандартных ноутбуков (от 901px до 1500px) */
@media (min-width: 901px) and (max-width: 1500px) {
    .product-main__inner {
        gap: 5% !important; /* Резиновый отступ в 5% */
    }
    .product-main__info {
        flex: 0 0 55% !important;
        max-width: 55% !important;
    }
    .product-main__gallery {
        flex: 0 0 40% !important;
        max-width: 40% !important;
    }
}
/* 3. Для средних мониторов (от 1501px до 2499px) */
@media (min-width: 1501px) and (max-width: 2499px) {
    .product-main__inner {
        justify-content: flex-start !important; 
        gap: 5% !important; /* Резиновый отступ, который не разорвет контейнер */
    }
    .product-main__info {
        /* Единица по центру разрешает блоку сжиматься, если не хватает места */
        flex: 0 1 55% !important; 
        max-width: 55% !important;
        width: 100% !important;
    }
    .product-main__gallery {
        flex: 0 1 40% !important;
        max-width: 40% !important;
        width: 100% !important;
    }
}

/* 4. Для огромных экранов (2500px+) */
@media (min-width: 2500px) {
    .product-main__inner {
        justify-content: center !important; /* Центрируем всю конструкцию */
        gap: 120px !important; /* Огромный отступ для огромного экрана */
    }
    .product-main__info { 
        flex: 0 0 auto !important; 
        max-width: 1100px !important; 
        width: 100% !important;
    }
    .product-main__gallery { 
        flex: 0 0 auto !important; 
        max-width: 1000px !important; 
        width: 100% !important;
    }
}
/* =========================================
   ФИКС ШАПКИ ДЛЯ ОЧЕНЬ УЗКИХ ЭКРАНОВ (до 400px - iPhone SE)
   ========================================= */
@media (max-width: 400px) {
    /* Делаем логотип компактнее */
    .header__logo img {
        height: 26px !important; 
    }
    /* Сближаем элементы правой части */
    .header__contacts {
        gap: 8px !important; 
    }
    /* Уменьшаем кнопку "Позвонить" */
    .header-btn {
        padding: 8px 12px !important; 
        font-size: 13px !important;
    }
    /* Уменьшаем сам кружок бургера и полоски в нем */
    .burger-btn-new {
        width: 32px !important; 
        height: 32px !important;
    }
    .burger-btn-new span {
        width: 16px !important; 
    }
}

/* =========================================
   ФИКС СРЕЗАННОГО УГЛА В ГАЛЕРЕЕ (Мобильные экраны)
   ========================================= */
@media (max-width: 900px) {
    /* Лечим контейнер галереи: заставляем браузер честно обрезать края */
    .supplier__gallery-wrapper {
        border-radius: 12px !important;
        overflow: hidden !important;
        -webkit-mask-image: -webkit-radial-gradient(white, black);
        mask-image: radial-gradient(white, black);
    }
    
    /* Жестко сбрасываем любые случайные обрезки у самих картинок */
    .gallery-column img {
        border-radius: 8px !important;
        border-top-left-radius: 8px !important; 
        border-top-right-radius: 8px !important;
        border-bottom-left-radius: 8px !important;
        border-bottom-right-radius: 8px !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }
}
/* =========================================
   БРОНЕБОЙНАЯ ФИКСИРОВАННАЯ ШАПКА (МОБИЛЬНАЯ ВЕРСИЯ)
   ========================================= */
@media (max-width: 900px) {
    .header {
        position: fixed !important; /* Вырываем шапку и фиксируем намертво */
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 9999 !important; /* Ставим поверх всех картинок и блоков */
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08) !important;
    }
    
    /* Т.к. шапка теперь "летает", она не занимает места в документе. 
       Чтобы контент сайта не залез ПОД неё при загрузке, 
       мы отодвигаем весь сайт вниз ровно на высоту шапки (90px) */
    body {
        padding-top: 90px !important; 
    }
}
/* =========================================
   ПОЛНОЭКРАННАЯ ГАЛЕРЕЯ (LIGHTBOX)
   ========================================= */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Темный фон с прозрачностью 85% */
    z-index: 10000; /* Поверх вообще всего сайта */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    backdrop-filter: blur(5px); /* Красивое размытие сайта на заднем фоне */
}

/* Класс для активации окна */
.lightbox-overlay.active {
    opacity: 1;
    visibility: visible;
}

#lightbox-img {
    max-width: 85%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); /* Тень для объема */
}

/* Кнопка закрытия (Крестик) */
.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 50px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.3s;
    z-index: 10001;
    line-height: 1;
}
.lightbox-close:hover {
    color: #E85222; /* Фирменный оранжевый при наведении */
}

/* Стрелки слайдера */
.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    cursor: pointer;
    padding: 15px 25px;
    border-radius: 50%;
    transition: background 0.3s, color 0.3s;
    z-index: 10001;
}
.lightbox-prev { left: 40px; }
.lightbox-next { right: 40px; }

.lightbox-prev:hover,
.lightbox-next:hover {
    background: #E85222;
    color: #fff;
}

/* Указатель лупы для фоток на сайте */
.gallery-main-wrapper img, 
.gallery-thumbs .thumb {
    cursor: zoom-in !important;
}

/* Адаптив галереи для мобилок */
@media (max-width: 900px) {
    .lightbox-prev { left: 10px; padding: 10px 20px; font-size: 30px; }
    .lightbox-next { right: 10px; padding: 10px 20px; font-size: 30px; }
    .lightbox-close { top: 10px; right: 15px; font-size: 40px; }
    #lightbox-img { max-width: 95%; max-height: 80vh; }
}
/* =========================================
   ФИКС ОТСТУПА, ЕСЛИ НЕТ БЛОКА ДОКУМЕНТОВ
   ========================================= */

/* Добавляем верхний отступ форме, только если она идет сразу после товара */
.product-main + .request-section {
    margin-top: 80px !important; 
}

/* Адаптив для мобильных (отступ поменьше) */
@media (max-width: 900px) {
    .product-main + .request-section {
        margin-top: 40px !important;
    }
}

/* Адаптив для гигантских экранов (отступ побольше) */
@media (min-width: 2500px) {
    .product-main + .request-section {
        margin-top: 120px !important;
    }
}

/* СПАМ-ЛОВУШКА ДЛЯ БОТОВ */
.honeypot-field {
    display: none !important;
    visibility: hidden !important;
    opacity: 0;
    position: absolute;
    top: -9999px;
    left: -9999px;
    height: 0;
    width: 0;
}