body {
    font-family: 'Montserrat', sans-serif;
}

/* Небольшой фикс для логотипа, чтобы имитировать картинку текстом */
.logo-box {
    line-height: 1;
}
.logo-icon {
    font-size: 2.5rem; /* Размер иконки-куба */
    line-height: 1;
}

/* Стили для ссылок меню */
.nav-link {
    font-weight: 500; /* Чуть жирнее обычного */
    color: #000 !important;
    font-size: 16px;
}
.nav-link:hover {
    opacity: 0.7;
}

/* Кастомный бургер (черный и жирный как на скрине) */
.navbar-toggler {
    border: none; /* Убираем рамку */
    padding: 0;
}
.navbar-toggler:focus {
    box-shadow: none; /* Убираем синюю обводку при клике */
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    width: 30px;
    height: 30px;
}
/* Настройки высоты и скругления */
.hero-radius {
    /* Высота блока: на мобилке 70% экрана, на десктопе фиксируем или 80vh */
    height: 70vh;
    min-height: 500px; /* Чтобы на маленьких экранах не схлопнулось */

    /* Скругление только снизу */
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;

    /* Исправление бага Safari с border-radius и overflow:hidden */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* Типографика как на скрине */
.hero-title {
    font-size: 1.8rem; /* Мобильный размер */
    line-height: 1.3;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3); /* Тень для читаемости */
}

.hero-subtitle {
    font-size: 1.1rem;
    opacity: 0.9;
}

/* Адаптив для десктопа (lg) */
@media (min-width: 992px) {
    .hero-radius {
        height: 80vh; /* На больших экранах чуть выше */
        border-bottom-left-radius: 60px; /* Радиус больше */
        border-bottom-right-radius: 60px;
    }

    .hero-title {
        font-size: 3rem; /* Крупнее на десктопе */
        max-width: 800px; /* Ограничим ширину строки */
    }

    .hero-subtitle {
        font-size: 1.5rem;
    }
}
/* Кнопки категорий */
.category-btn {
    font-size: 0.95rem;
    color: #6c757d !important; /* Серый по умолчанию */
    transition: color 0.3s;
    padding: 0;
}
.category-btn:hover,
.category-btn.active {
    color: #000 !important; /* Черный активный */
    font-weight: 700;
}

/* Логика смены картинок */
/* Логика смены картинок */
.product-card-img-wrapper {
    position: relative;
    overflow: hidden;
    /* aspect-ratio держит форму контейнера, чтобы он не схлопнулся,
       когда мы будем играть с прозрачностью */
    aspect-ratio: 3/4;
}

.product-img-main,
.product-img-hover {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.4s ease-in-out; /* Плавность для обоих */
}

/* Настройки второй картинки (ховер) */
.product-img-hover {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0; /* Скрыта по умолчанию */
    z-index: 2; /* Лежит поверх */
}

/* Настройки первой картинки (основная) */
.product-img-main {
    opacity: 1; /* Видна по умолчанию */
    z-index: 1;
}

/* --- МАГИЯ ТУТ --- */

/* При наведении: Показываем вторую */
.product-card:hover .product-img-hover {
    opacity: 1;
}

/* При наведении: СКРЫВАЕМ первую */
.product-card:hover .product-img-main {
    opacity: 0;
}

/* Кнопки карточки */
.btn-black {
    background-color: #000;
    color: #fff;
    border: 1px solid #000;
}
.btn-black:hover {
    background-color: #333;
    color: #fff;
}

.btn-outline-black {
    background-color: transparent;
    color: #000;
    border: 1px solid #000;
}
.btn-outline-black:hover {
    background-color: #000;
    color: #fff;
}



/* --- Стили для секции Features --- */

/* --- Стили для секции Features и указателей --- */

/* Базовые стили для ячеек */
.feature-text-cell,
.feature-img-cell {
    /* На мобилке высота авто */
    height: auto;
    position: relative; /* Важно для позиционирования указателя */
}

/* --- СТИЛИ ДЛЯ ДЕСКТОПА (Тут вся магия) --- */
@media (min-width: 992px) {
    /* Фиксированная высота для ровной плитки на больших экранах */
    .feature-text-cell,
    .feature-img-cell {
        height: 400px;
    }

    /* Поднимаем текстовый блок выше картинки, чтобы указатель перекрывал её */
    .feature-text-cell {
        z-index: 10;
    }

    /* --- Общие стили для треугольника --- */
    .has-pointer-right::after,
    .has-pointer-left::before {
        content: '';
        position: absolute;
        top: 50%;
        transform: translateY(-50%); /* Центрируем по вертикали */
        width: 0;
        height: 0;
        /* Размер треугольника (можно менять 20px на другое значение) */
        border-top: 20px solid transparent;
        border-bottom: 20px solid transparent;
        z-index: 11; /* Должен быть выше всего */
    }

    /* --- Указатель НАПРАВО (::after) --- */
    .has-pointer-right::after {
        right: -20px; /* Сдвигаем вправо на ширину треугольника */
    }

    /* Цвет для светлого фона (bg-light) */
    .feature-text-cell.bg-light.has-pointer-right::after {
        border-left: 20px solid #f8f9fa; /* Цвет Bootstrap bg-light */
    }
    /* Цвет для белого фона (bg-white) */
    .feature-text-cell.bg-white.has-pointer-right::after {
        border-left: 20px solid #ffffff;
    }


    /* --- Указатель НАЛЕВО (::before) --- */
    .has-pointer-left::before {
        left: -20px; /* Сдвигаем влево */
    }

    /* Цвет для светлого фона (bg-light) */
    .feature-text-cell.bg-light.has-pointer-left::before {
        border-right: 20px solid #f8f9fa;
    }
    /* Цвет для белого фона (bg-white) */
    .feature-text-cell.bg-white.has-pointer-left::before {
        border-right: 20px solid #ffffff;
    }
}

/* --- СТИЛИ ДЛЯ МОБИЛКИ (Сброс) --- */
@media (max-width: 991.98px) {
    /* Превращаем картинку в круглую аватарку */
    .feature-img-cell {
        display: flex;
        justify-content: center;
        padding-top: 2rem;
        background-color: transparent !important;
    }

    .feature-img {
        width: 150px !important;
        height: 150px !important;
        border-radius: 50%;
        object-fit: cover;
    }

    /* Стили для текста на мобилке */
    .feature-text-cell {
        background-color: transparent !important; /* Убираем фон */
        padding-bottom: 2rem !important;
        border-bottom: 1px solid #e0e0e0;
        margin-bottom: 1rem;
    }

    /* На мобилке указатели не нужны, они скрываются автоматически,
       т.к. стили выше обернуты в медиа-запрос min-width: 992px */
}


/* --- Стили для галереи --- */
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px; /* Легкое скругление углов */
    cursor: pointer;
    height: 100%; /* Заполняем высоту колонки */
}

.gallery-img {
    transition: transform 0.3s ease-in-out;
}

/* Иконка лупы */
.zoom-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.6); /* Полупрозрачный черный фон */
    color: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0; /* Скрыта по умолчанию */
    transition: opacity 0.3s ease-in-out;
}

/* Эффекты при наведении */
.gallery-item:hover .zoom-icon {
    opacity: 1; /* Показываем лупу */
}

.gallery-item:hover .gallery-img {
    transform: scale(1.05); /* Легкий зум картинки */
}

/* --- Стили для модального окна --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Темный фон с затемнением */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050; /* Поверх всего */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    cursor: zoom-out; /* Курсор "уменьшить" */
}

/* Класс для открытия модалки */
.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-img-container {
    max-width: 90%;
    max-height: 90%;
}

.modal-img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Чтобы картинка влезала целиком */
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}


/* --- Стили для секции Преимуществ --- */

.advantage-card {
    position: relative;
    /* Отступ слева, чтобы текст не наезжал на цифру слишком сильно,
       но при этом создавался эффект наложения */
    padding-left: 30px;
    padding-top: 20px;
}

.big-number {
    position: absolute;
    top: -60px; /* Поднимаем цифру над текстом */
    left: 0;

    font-size: 10rem; /* Огромный размер */
    font-weight: 700;
    line-height: 1;
    color: rgba(0, 0, 0, 0.04); /* Очень прозрачный серый */

    z-index: 0; /* Уводим на задний план */
    pointer-events: none; /* Чтобы цифра не мешала выделять текст */
    user-select: none;

    font-family: 'Montserrat', sans-serif; /* Тот же шрифт, что и везде */
}

.advantage-content {
    position: relative;
    z-index: 1; /* Текст должен быть НАД цифрой */
}

/* --- Адаптив для мобилок --- */
@media (max-width: 991.98px) {
    .advantage-row {
        margin-bottom: 4rem !important; /* Больше отступа между блоками на мобиле */
    }

    .big-number {
        font-size: 8rem; /* Чуть меньше на телефонах */
        top: -40px;
        left: -10px;
    }

    .advantage-card {
        padding-left: 10px; /* Уменьшаем отступ контента */
    }

    /* Выравниваем текст по центру на мобилках для красоты (опционально) */
    /*
    .advantage-card { text-align: center; }
    .big-number { left: 50%; transform: translateX(-50%); }
    */
}


/* --- Стили для Футера --- */

/* Социальные кнопки - черные круги */
.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: #000; /* Черный фон */
    color: #fff !important; /* Белая иконка */
    border-radius: 50%; /* Круг */
    transition: transform 0.2s, background-color 0.2s;
    text-decoration: none;
}

.social-btn:hover {
    background-color: #333; /* Чуть светлее при наведении */
    transform: translateY(-2px); /* Легкий подскок */
}

/* Ссылка на почту */
.contact-info a:hover {
    color: #555 !important;
}

/* Ссылки в подвале */
.footer-legal a:hover {
    text-decoration: underline !important;
}
.product-card:hover .product-img-hover {
    opacity: 1 !important;
}
.product-card:hover .product-img-main {
    opacity: 0; /* Если нужно скрывать основную */
}