/* ========================================= */
/* 1. ОСНОВНЫЕ СТИЛИ (ДЛЯ КОМПЬЮТЕРА) */
/* ========================================= */

/* Подключаем жирный шрифт */
@font-face {
    font-family: "Etelka Medium Pro";
    src: url("fonts/UniNeue-Trial-Heavy.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}

/* Подключаем обычный шрифт */
@font-face {
    font-family: "Uni Neue Regular";
    src: url("fonts/UniNeue-Trial-Regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #000000;
    font-family: "Uni Neue Regular", sans-serif; 
    min-height: 100vh;
}

html {
    scroll-behavior: smooth;
}

/* ===== HEADER (ПК) ===== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    /* 👇 1. ВЕРНУЛ НОРМАЛЬНЫЕ ОТСТУПЫ */
    padding: 20px 80px; 
    
    z-index: 100;
    background-color: rgba(139, 0, 0, 0.7); 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px);
    
    /* 👇 АНИМАЦИЯ ПОЯВЛЕНИЯ/ИСЧЕЗНОВЕНИЯ ПРИ СКРОЛЛЕ */
    transition: transform 0.3s ease-in-out;

    overflow: hidden; /* Обрезает всё, что торчит (тюльпан) */
}

.header.hide {
    transform: translateY(-100%);
}

/* Логотип-контейнер */
.header__logo {
    position: relative; /* Важно для позиционирования иконки */
    display: flex;
    align-items: center;
    
    /* Отступ слева, чтобы текст не наезжал на тюльпан */
    padding-left: 40px; 
    
    color: #ffffff;
    font-family: "Etelka Medium Pro", sans-serif;
    font-size: 23px;
    font-weight: normal;
    letter-spacing: 1px;
    min-height: 30px;
    line-height: 1;
    display: flex;
    align-items: center;
    
    /* 👇 ЭТО ОПУСТИТ ТЕКСТ */
    padding-top: 4px; /* Попробуй 2px, 4px или 6px */
    
    /* 👇 А ЭТО КОМПЕНСИРУЕТ ВЫСОТУ (чтобы хедер не рос) */
    padding-bottom: 0; 
    
    /* Или можно задать фиксированную высоту строки, равную высоте иконки */
    line-height: 1.2; 
}

/* САМ ТЮЛЬПАН (Гигантский и смещенный) */
.header__logo img {
    position: absolute;
    left: -90px;  /* Сдвигаем влево за край */
    top: 150%;     /* Сдвигаем ниже центра */
    transform: translateY(-50%);
    
    width: 180px; /* ОГРОМНЫЙ РАЗМЕР */
    height: auto;
    
    z-index: 10;
    
    /* Плавное исчезновение при открытии меню */
    transition: opacity 0.3s ease; 
}

/* Когда меню открыто: */
.header.menu-open {
    /* 👇 Разрешаем вылезать за края (чтобы показалось меню) */
    overflow: visible; 
}

/* При этом сам тюльпан мы прячем (этот код у тебя уже был, но проверь) */
.header.menu-open .header__logo img {
    opacity: 0;
    pointer-events: none;

     transition: none; /* Убирает плавность, пропадает сразу */
}
/* Меню на ПК (видны ссылки) */
.nav {
    display: flex;
    gap: 30px;
}

.nav__link {
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    transition: opacity 0.3s;
    letter-spacing: 1.2px; /* Можно 1.5px или 2px */
}

.nav__link:hover {
    opacity: 0.7;
}

/* БУРГЕР НА ПК СКРЫТ! */
.burger {
    display: none; 
}

/* ===== HERO (ПК) ===== */
.hero {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 100vh;
    padding: 20px 100px;
}

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

.hero__title {
    color: #ffffff;
    font-family: "Etelka Medium Pro", sans-serif; 
    font-size: 70px;
    font-weight: normal;
    text-align: left;
    line-height: 1;
    letter-spacing: 2px;
}

.hero__title--mobile {
    display: none;
}

/* Анимация текста */
.hero__title .line {
    display: block;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.hero__title .line.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===== КНОПКИ (ПК) ===== */
.hero__buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 25px;
}

.hero__buttons.visible {
    opacity: 1;
    transform: translateY(0);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 24px; /* Нормальные отступы */
    
    font-family: "Uni Neue Regular", sans-serif;
    font-size: 16px;
    font-weight: normal;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s;
    letter-spacing: 1px;
}

.btn:hover {
    opacity: 0.8;
    transform: translateY(-2px);
}

.btn--call {
    background-color: #8B0000;
    color: #ffffff;
    border: 1px solid #FFFFFF;
}

.btn--catalog {
    background-color: #ffffff;
    color: #000000;
    border: 1px solid #ffffff;
}

/* ===== ЛОКАЦИЯ (ПК) ===== */
.hero__location {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 20px;
    
    /* 👇 ВАЖНО: Ставим 1 или убираем строчку opacity совсем */
    opacity: 1; 
    
    /* 👇 Убираем анимацию, чтобы появлялось сразу */
    animation: none; 
}

.hero__location img {
    width: 24px;
    height: 24px;
    filter: invert(13%) sepia(30%) saturate(7499%) hue-rotate(350deg) brightness(97%) contrast(118%);
    transform: translateY(-3px);
}

.hero__location span {
    color: #ffffff;
    font-family: "Uni Neue Regular", sans-serif;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

/* ===== СЕКЦИИ (ПК) ===== */
.section {
    padding: 100px 80px;
}

.section__title {
    color: #ffffff;
    font-family: "Etelka Medium Pro", sans-serif;
    font-size: 40px;
    margin-bottom: 20px;
}

.section__text {
    color: #aaaaaa;
    font-family: "Uni Neue Regular", sans-serif;
    font-size: 18px;
    line-height: 1.6;
}

.counter {
    display: inline-block;
    font-weight: bold;
    color: #D70000; /* Сделаем цифру красной (под стиль сайта) */
    /* Или оставь color: #ffffff; если хочешь белую */
}

/* Специальный отступ для Каталога */
.catalog-section {
    min-height: auto;
    padding-top: 0;
    margin-top: 150px;
}

.catalog-section .carousel:first-of-type {
    margin-bottom: 200px;
}

/* ============================================== */
/* ЯДЕРНАЯ КАРУСЕЛЬ (ЧТОБЫ БЫЛО ОГРОМНО) */
/* ============================================== */

/* 1. КОНТЕЙНЕР: Рвет границы сайта на всю ширину */
.carousel {
    display: block !important;
    width: 100vw !important; /* На всю ширину экрана */
    
    /* Центрируем и игнорируем отступы родителя */
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    
    overflow: hidden; 
    padding: 0 !important;
    margin-bottom: 50px;
    background: #000; /* Черный фон, чтобы видеть границы (потом убери) */
}

/* 2. ТРЕК: Бесконечная лента */
.carousel-track {
    display: flex !important;
    width: max-content !important; /* Ширина = сумма всех картинок */
    align-items: center;
    gap: 20px; 
    animation: scroll 40s linear infinite;
}

/* 3. СЛАЙД (РАМКА КАРТИНКИ) */
.slide {
    /* Твои размеры (оставь как есть) */
    height: 500px !important; 
    width: auto !important;   
    flex-shrink: 0 !important; 
    margin: 0 !important;
    
    /* 👇 ДОБАВЛЯЕМ СКРУГЛЕНИЕ */
    border-radius: 3px !important; 
    overflow: hidden !important; /* Обрезает острые углы картинки */
}

/* 4. САМА КАРТИНКА */
.slide img {
    height: 100% !important;   
    width: auto !important;    
    min-width: 200px;          
    display: block;
    object-fit: contain;       
    
    /* 👇 НА ВСЯКИЙ СЛУЧАЙ ТУТ ТОЖЕ */
    border-radius: 3px !important;
}

/* Анимация для ПК */
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 10px)); }
}

/* ===== СТИЛИ ДЛЯ ВСПЛЫВАЮЩЕГО ОКНА (LIGHTBOX) ===== */
.lightbox {
    display: none; /* Скрыто по умолчанию */
    position: fixed;
    z-index: 9999; /* Поверх ВСЕГО */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Темный фон */
    justify-content: center;
    align-items: center;
    cursor: zoom-out; /* Курсор показывает, что можно закрыть */
}

.lightbox-content {
    max-width: 90%;
    max-height: 90%;
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
    animation: zoomIn 0.3s ease; /* Эффект появления */
}

.close {
    position: absolute;
    top: 20px;
    right: 40px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10000;
}

@keyframes zoomIn {
    from {transform: scale(0.8); opacity: 0;}
    to {transform: scale(1); opacity: 1;}
}

/* Красная галочка */
.red-check {
    color: #8B0000; /* Кроваво-красный (твой фирменный цвет) */
    font-weight: bold; /* Жирная */
    margin-right: 5px; /* Небольшой отступ справа от текста */
}

/* ===== СЛАЙДЕР ОТЗЫВОВ (АВТО) ===== */
.reviews-wrapper {
    width: 100%;
    overflow: hidden; /* Прячем лишнее */
}

/* Трек, который листается */
.reviews-track {
    display: flex;
    gap: 20px;
    
    /* Свойства для прокрутки пальцем */
    overflow-x: auto; 
    scroll-behavior: smooth;
    
    /* МАГИЯ ПРИЛИПАНИЯ */
    scroll-snap-type: x mandatory; /* Обязательно останавливаться на карточке */
    
    /* Скрываем полосу прокрутки */
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 20px;
}

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

/* Карточка отзыва */
.review-card {
    /* На ПК ширина фиксированная */
    min-width: 400px; 
    
    background-color: #111;
    border: 1px solid #333;
    padding: 30px;
    border-radius: 5px;
    
    /* Карточка всегда центрируется при остановке скролла */
    scroll-snap-align: center;
    scroll-snap-stop: always;
    
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Остальные стили текста оставь те же (header, name, stars...) */
.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
.review-name { color: #fff; font-weight: bold; font-size: 18px; }
.review-stars { color: #8B0000; letter-spacing: 2px; }
.review-text { color: #aaaaaa; font-size: 16px; line-height: 1.5; font-style: italic; margin-bottom: 20px; }
.review-date { font-size: 14px; color: #555; text-align: right; }

/* ===== КОНТАКТЫ (ПК) ===== */
.contacts-wrapper {
    display: flex;
    flex-direction: column;   /* меняем направление */
    gap: 40px;
    align-items: flex-start;
}

.contacts-info {
    flex: 1; /* Занимает доступное место */
    max-width: 400px;
}

.contacts-info p {
    margin-bottom: 20px;
}

.contacts-map {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    
    /* 👇 ВЫСОТА НА ПК */
    height: 400px !important; 
    
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #333;
}

/* 2. Настройки самой карты (Iframe) */
.contacts-map iframe {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    border: none !important;
}

/* ===== СТРАНИЦА КАТАЛОГА ===== */

/* Сетка (Грид) */
.catalog-grid {
    display: grid;
    /* Автоматически расставляет по 300px, сколько влезет в экран */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

/* Карточка товара */
.product-card {
    background-color: #1a1a1a; /* Темно-серый фон */
    border: 1px solid #333;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    transition: transform 0.3s;
    letter-spacing: 1.6px;
}

.product-card:hover {
    transform: translateY(-5px); /* Всплывает при наведении */
    border-color: #8B0000;       /* Красная рамка */
}

.product-card img {
    width: 100%;
    
    /* 👇 ВАЖНО: Высота авто (пропорциональная), а не фиксированная */
    height: auto;
    
    /* 👇 Ограничиваем максимальную высоту, чтобы вертикальные фото не стали гигантскими */
    max-height: 400px; 
    
    /* 👇 ГЛАВНОЕ: Показываем картинку целиком, ничего не обрезая */
    object-fit: contain; 
    
    border-radius: 3px;
    margin-bottom: 15px;

}

.product-card h3 {
    color: #ffffff;
    margin-bottom: 10px;
    font-size: 20px;
    letter-spacing: 1.6px;
}

.product-card p {
    color: #aaaaaa;
    margin-bottom: 20px;
    font-size: 16px;
    letter-spacing: 1px;
}

/* ===== ПОДВАЛ (FOOTER) ===== */
.footer {
    background-color: #111; /* Чуть светлее фона сайта */
    padding: 60px 80px 20px 80px; /* Отступы */
    border-top: 1px solid #333;
    margin-top: 50px;
}

.footer__container {
    display: grid;
    /* 3 колонки: Логотип (широкая) - Меню - Контакты */
    grid-template-columns: 2fr 1fr 1fr; 
    gap: 50px;
    margin-bottom: 50px;
}

/* Логотип в подвале */
.footer__logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-family: "Etelka Medium Pro", sans-serif;
    font-size: 24px;
    margin-bottom: 20px;
}

.footer__logo img {
    width: 30px;
    height: auto;
}

.footer__desc {
    color: #888;
    line-height: 1.6;
    max-width: 300px;
}

/* Заголовки колонок */
.footer__title {
    color: #fff;
    font-size: 18px;
    margin-bottom: 20px;
    font-weight: bold;
}

/* Ссылки */
.footer__links {
    list-style: none;
}

.footer__links li {
    margin-bottom: 10px;
}

.footer__links a {
    color: #bbb;
    text-decoration: none;
    transition: color 0.3s;
}

.footer__links a:hover {
    color: #8B0000; /* Красный при наведении */
}

/* Контакты в подвале */
.footer__text {
    color: #bbb;
    margin-bottom: 10px;
    line-height: 1.5;
}

.footer__phone {
    display: block;
    color: #fff;
    font-size: 18px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 10px;
}

/* Нижняя полоска */
.footer__bottom {
    border-top: 1px solid #222;
    padding-top: 20px;
    text-align: center;
    color: #555;
    font-size: 14px;
}

/* ===== ГАЛЕРЕЯ НАШИ РАБОТЫ (MASONRY) ===== */


/* Эффект затемнения при наведении */
.masonry-item:hover {
    transform: translateY(-5px);
}

.masonry-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s;
}

.masonry-item:hover .masonry-overlay {
    opacity: 1;
}

.masonry-overlay span {
    color: #fff;
    font-weight: bold;
    font-size: 16px;
}

.pinterest-gallery {
    column-count: 4;
    column-gap: 20px;
}

.gallery-img {
    width: 100%;
    border-radius: 10px;
    cursor: zoom-in;
    transition: transform 0.3s ease;
    break-inside: avoid;
}

.gallery-img:hover {
    transform: scale(1.03);
}

/* ===== УНИВЕРСАЛЬНЫЙ ВОДЯНОЙ ЗНАК ===== */

.product-card,
.masonry-item,
.slide {
    position: relative;
}

.product-card::after,
.masonry-item::after,
.slide::after {
    content: "";
    position: absolute;

    top: 15px;
    right: 15px;

    width: 90px;
    height: 90px;

    background-image: url("images/tulip.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    opacity: 1; /* полностью непрозрачный */

    pointer-events: none;
    z-index: 999; /* чтобы был поверх всего */
}

/* ===== ФИКС ДЛЯ WORKS (masonry) ===== */

.masonry-item::after {
    content: "";
    position: absolute;

    top: 15px;
    right: 15px;

    width: 90px;
    height: 90px;

    background-image: url("images/tulip.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    opacity: 1;
    pointer-events: none;
    z-index: 99;
}

/* ========================= */
/* WORKS — ЖЁСТКИЙ ПЕРЕЗАПИСЫВАЮЩИЙ БЛОК */
/* ========================= */

.masonry-gallery {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 250px 70px !important; /* ← вертикаль / горизонталь */
}

.masonry-item {
    position: relative !important;
    margin: 0 !important; /* убираем старые margin */
}

.masonry-item img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

.masonry-item {
    margin-bottom: 50px !important;
}

.hero {
        position: relative;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 100px !important;
        min-height: 100vh;
        background: #000 !important;
        overflow: hidden !important; /* Обрезаем лишнее справа */
    }

    .hero__content {
        width: 40% !important; /* Тексту оставляем меньше места (было 50%) */
        z-index: 10;
        text-align: left !important;
    }

    /* АНГЕЛ */
    .hero-angel {
        display: block !important;
        position: absolute !important;
        
        /* 👇 СДВИГАЕМ ЕГО ПРАВЕЕ, чтобы он не налез на текст */
        right: -300px !important; 
        
        bottom: 0 !important;
        
        /* 👇 ДЕЛАЕМ ГИГАНТСКИМ */
        width: 60vh !important; /* Ширина зависит от высоты экрана (квадратный) */
        height: 60vh !important; /* На всю высоту */
        
        /* Или можно в процентах ширины: width: 70% !important; */
        
        z-index: 1;
        pointer-events: none;
    }

    .hero-angel img {
        width: 100% !important;
        height: 100% !important;
        
        /* 👇 Масштабируем картинку */
        transform: scale(2.5); /* Увеличиваем в 2.5 раза */
        transform-origin: bottom right; /* Растет от правого нижнего угла */
        
        object-fit: contain !important;
    }

.about-title {
    font-size: 60px;   /* Больше чем обычные 40px */
    line-height: 1.2;
    max-width: 1200px;
}

/* Перенос на новую строку только на ПК */
.about-title__break {
    display: block;
    margin-top: 10px;
}

.about-section {
    padding-top: 180px;  /* было 100px → опускаем ниже */
}

.about-section .section__text {
    font-size: 30px;   /* было 18px */
    line-height: 1.5;
    max-width: 800px;  /* чтобы строка не растягивалась слишком широко */
    margin-top: 25px;
}

/* ===== CTA ПК ===== */

.section h2.section__title {
    font-size: 60px;   /* было 40px */
    line-height: 1.2;
}

.section .section__text {
    font-size: 30px;   /* было 18px */
    line-height: 1.6;
    max-width: 900px;
}

/* Убираем тюльпан только на странице каталога */
.catalog-page .product-card::after,
.catalog-page .masonry-item::after,
.catalog-page .slide::after {
    content: none !important;
}

/* ========================================= */
/* 2. МОБИЛЬНАЯ ВЕРСИЯ (РЕЗИНОВАЯ) - ИСПРАВЛЕННАЯ */
/* ========================================= */
@media (max-width: 768px) {
    /* Хедер */
    .header {
        padding: 4vw 5vw; 
    }
    
    .header__logo {
        font-size: 7vw;
        padding-top: 1.2vw; 
    }

    .header__logo img {
        width: 30vw;   
        left: -12vw;
        top: 100%;
        transform: translateY(-50%);
    }

    /* Бургер */
    .burger {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        width: 10vw;
        gap: 1.6vw;
        background: none;
        border: none;
        padding: 0;
        z-index: 101;
    }
    
    .burger span {
        display: block;
        width: 100%;
        height: 0.8vw;
        background-color: #ffffff;
        border-radius: 10px;
        transition: all 0.3s ease-in-out;
    }

    .burger.active span:nth-child(1) { transform: translateY(2.4vw) rotate(45deg) scale(1.1); }
    .burger.active span:nth-child(2) { opacity: 0; transform: scale(0); }
    .burger.active span:nth-child(3) { transform: translateY(-2.4vw) rotate(-45deg) scale(1.1); }

    /* Меню на весь экран */
    .nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(139, 0, 0, 1); 
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8vw; 
        transform: translateX(100%);
        transition: transform 0.3s;
        z-index: 99;
    }

    .nav.active { transform: translateX(0); }
    .nav__link { font-size: 8vw; margin-top: 2vw; letter-spacing: 1.2px; /* Можно 1.5px или 2px */}

    /* Главный экран (Hero) */
    .hero {
        align-items: flex-start;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        padding: 0 6vw;      
        padding-top: 35vw;
    }

    .hero__location { gap: 2vw; margin-bottom: 6vw; }
    .hero__location img { width: 6vw; height: 6vw; transform: translateY(-0.5vw); }
    .hero__location span { font-size: 4.5vw; }

    .hero__title {
        font-size: 10vw; 
        letter-spacing: 0.2vw;
        line-height: 1;
        margin-top: -2vw;
    }

    .hero__title--desktop { display: none; }
    .hero__title--mobile { display: block; }

    .hero__buttons { margin-top: 7vw; gap: 3vw; }

    .btn {
        padding: 2vw 4vw; 
        font-size: 4vw;   
        border: 0.2vw solid #FFFFFF; 
        gap: 2vw;
        border-radius: 0;
    }
    .btn--call { border: 0.2vw solid #FFFFFF; }
    .btn svg { width: 4.5vw; height: 4.5vw; }

    /* Секции */
    .section {
        padding: 15vw 6vw; 
        min-height: auto; 
    }

    .section__title {
        font-size: 9vw;  
        line-height: 1.1; 
        letter-spacing: 0.2vw; 
        margin-bottom: 5vw;
        text-align: left;
    }

    .section__text {
        font-size: 6vw; 
        line-height: 1.2;
        letter-spacing: 0.1vw; 
        color: #a9a9a9;
    }

    /* Специальный отступ для Каталога на мобиле */
    .catalog-section {
        padding-top: 5vw; 
    }

    .catalog-section .section__title {
        margin-bottom: 7vw; 
    } 

    /* Карусель на мобильном */
    .slide {
        height: 400px !important; 
        border-radius: 3px !important;
    }
    
    .carousel-track {
        gap: 10px;
        animation: scroll 40s linear infinite;
    }
    
    @keyframes scroll {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(-50% - 5px)); }
    }

    /* ОТЗЫВЫ (ИДЕАЛЬНЫЙ ЦЕНТР) */
    .reviews-wrapper {
        width: 100vw;
        margin-left: -6vw; 
        overflow: hidden;
    }

    .reviews-track {
        display: flex;
        gap: 5vw; 
        padding: 0 10vw; /* Центрирование */
        
        overflow-x: auto;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 20px;
    }

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

    .review-card {
        min-width: 80vw;
        max-width: 80vw;
        border-radius: 10px;
        background-color: #111;
        border: 1px solid #333;
        padding: 20px;
        scroll-snap-align: center;
        scroll-snap-stop: always;
        flex-shrink: 0;
    }
    
    .review-text {
        font-size: 4.5vw;
    }

    .carousel + .section__title {
        /* 👇 Регулируй эту цифру (в процентах от ширины экрана) */
        margin-top: 20vw !important; 
    }

    /* КОНТАКТЫ */
    .contacts-wrapper {
        flex-direction: column; 
        gap: 8vw;
    }

    .contacts-info {
        max-width: 100%;
        text-align: left; 
    }

   .contacts-map {
        /* 👇 ВЫСОТА НА ТЕЛЕФОНЕ (500px, как ты хотел) */
        height: 500px !important;
        margin-top: 20px !important;
        width: 100% !important;
    }

    /* 2. САМА КАРТА (IFRAME) */
    .contacts-map iframe {
        position: absolute !important; /* Вырываем из потока */
        top: 0 !important;
        left: 0 !important;
        
        /* 👇 ЗАСТАВЛЯЕМ ЗАНЯТЬ ВСЁ МЕСТО */
        width: 100% !important; 
        height: 100% !important; 
        
        border: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .footer {
        padding: 10vw 6vw 5vw 6vw; /* Мобильные отступы */
    }

    .footer__container {
        display: flex;
        flex-direction: column; /* Все в одну колонку */
        gap: 8vw;
        text-align: center; /* Центрируем текст */
    }

        /* ЛОГОТИП В ПОДВАЛЕ (МОБИЛЬНЫЙ) */
    .footer__logo {
        position: relative; /* Чтобы иконка знала границы */
        display: flex;
        align-items: center;
        justify-content: center; /* Текст строго по центру */
        
        font-size: 6vw;
        margin-bottom: 20px;
        width: 100%; /* На всю ширину экрана */
        letter-spacing: 1px;
    }
    
    .footer__logo img {
        position: absolute; /* Вынимаем иконку из потока */
        
        /* 👇 РЕГУЛИРУЙ ЭТУ ЦИФРУ, ЧТОБЫ ДВИГАТЬ ИКОНКУ ВЛЕВО-ВПРАВО */
        left: 0%; /* 10% - левее, 25% - ближе к тексту */
        
        top: 60%;
        transform: translateY(-50%); /* Центрируем по вертикали */
        
        width: 25vw;
        height: auto;
        margin: 0; /* Убираем лишние отступы */
        
    }
    
    /* Текст логотипа */
    .footer__logo span {
        /* Если нужно подвинуть сам текст выше/ниже */
        /* display: block; */
        /* margin-top: 1vw; */
    }

    .footer__desc {
        margin: 0 auto; /* Центрируем описание */
        font-size: 4vw;
        letter-spacing: 0.8px;
        line-height: 1.2;
    }

    .footer__links a, .footer__text, .footer__phone {
        font-size: 4.5vw; /* Крупный текст */
        letter-spacing: 1px;
    }

    .footer__bottom {
        font-size: 3.5vw;
        margin-top: 5vw;
        letter-spacing: 0.7px;
        line-height: 1.6;
    }

    .about-section {
    padding-top: 40vw !important;
    padding-bottom: 4vw !important;  /* было 30vw */
}

    /* 2. Отступ у КАРУСЕЛИ сверху */
    .catalog-section {
        padding-top: 10vw !important;
    }
    
    .masonry-item {
        margin-bottom: 20px;
    }

    .pinterest-gallery { column-count: 1; }

    .product-card::after,
    .masonry-item::after,
    .slide::after {
        width: 18vw;
        height: 18vw;
        top: 4vw;
        right: 4vw;
    }

    .hero-angel { display: none !important; }

    /* 1. Сам контейнер */
    .hero {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: flex-start !important; /* Левый край */
        
        padding-top: 150px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        min-height: 100vh;

        background-image: url("images/hero-bg.jpg") !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-color: transparent !important;
    }

    /* 2. Обертка контента */
    .hero__content {
        width: 100% !important;
        max-width: 100% !important; /* Убираем ограничения ширины */
        display: block !important;  /* Сбрасываем флекс внутри, чтобы текст слушался align */
        text-align: left !important; /* Текст влево */
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 3. ЗАГОЛОВКИ (Самое важное) */
    .hero__title,
    .hero__title--mobile {
        text-align: left !important;
        align-self: flex-start !important;
        width: 100% !important;
        margin-left: 0 !important;
    }

    /* 4. КНОПКИ */
    .hero__buttons {
        display: flex !important;
        justify-content: flex-start !important; /* Кнопки влево */
        width: 100% !important;
        margin-left: 0 !important;
    }
    
    /* 5. ЛОКАЦИЯ */
    .hero__location {
        justify-content: flex-start !important;
    }

    .about-title {
    font-size: 9vw; /* Оставляем как у тебя было */
}

/* На мобиле текст снова идет как обычный */
.about-title__break {
    display: inline;
}

.catalog-section {
    padding-top: 0 !important;
    margin-top: 40vw !important;   /* вот это реально поднимет */
}

.catalog-section .section__title {
    margin-top: 0 !important;
}

/* --- Блок "Уже более 40 лет" --- */
.about-title {
    font-size: 9vw !important;   /* как было изначально */
    line-height: 1.1;
}

.about-section .section__text {
    font-size: 6vw !important;   /* текст под заголовком */
    line-height: 1.2;
}

/* --- Заголовки каруселей --- */
.catalog-section .section__title {
    font-size: 9vw !important;   /* как у остальных мобильных заголовков */
    line-height: 1.1;
}

/* --- CTA блок --- */
.cta-section .section__title,
.section:nth-of-type(4) .section__title {
    font-size: 9vw !important;
}

.cta-section .section__text,
.section:nth-of-type(4) .section__text {
    font-size: 6vw !important;
    line-height: 1.2;
}

.contacts-section .section__title {
    font-size: 9vw !important;   /* заголовок "Как нас найти?" */
    line-height: 1.1;
}

.contacts-section .section__text {
    font-size: 6vw !important;   /* адрес и режим работы */
    line-height: 1.3;
}

}