/* --- ГЛОБАЛЬНЫЕ НАСТРОЙКИ --- */
body { 
    margin: 0; 
    padding: 0; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #e5e5e5; 
}

/* --- ШАПКА (HEADER) --- */
.main-header {
    background: #fff;
    border-bottom: 2px solid #f0f0f0;
    height: 90px;
    display: flex;
    align-items: center;
}

.header-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.logo-box { display: flex; align-items: center; text-decoration: none; color: #000; }
.logo-img { width: 100px; margin-right: 5px; }
.company-name { display: block; font-size: 20px; font-weight: bold; }
.company-desc { font-size: 13px; }

.main-nav { display: flex; gap: 40px; }
.main-nav a { text-decoration: none; color: #000; font-weight: 600; font-size: 16px; }

.header-contacts { display: flex; align-items: center; }
.phone-img { width: 32px; height: 32px; margin-right: 10px; }
.contacts-text-box { display: flex; flex-direction: column; justify-content: center; }
.phones { font-weight: 700; font-size: 16px; line-height: 1.1; margin: 0; }
.address { font-size: 13px; color: #333; margin-top: 2px; }

/* --- БАННЕР (HERO SECTION) --- */
.banner-wrapper {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: 15px auto 0 auto;
}

.main-banner { width: 100%; height: auto; display: block; }

.hero-btn {
    position: absolute;
    bottom: 170px;
    left: 70px;
    background-color: #4a90e2;  
    color: #fff;
    padding: 15px 17px;
    border: none;
    border-radius: 7px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.hero-btn:hover { background-color: #357abd; }

/* --- БЛОК КОНТАКТОВ С КАРТОЙ --- */
.contacts-wrapper {
    max-width: 1100px;
    margin: 5px auto; /* Убрал большой отступ сверху, чтобы прижать блок */
    padding: 40px;
    background: #ffffff;
    border-radius: 12px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    box-sizing: border-box;
}

.contacts-info { flex: 1; }
.contacts-title { font-size: 36px; font-weight: 700; margin: 0 0 20px 0; }
.phone-line { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.icon { width: 38px; height: 38px; }
.contacts-phones { font-size: 22px; font-weight: 650; line-height: 0.7; margin: 0; }
.contacts-details { margin-top: 25px; font-size: 15px; color: #333; line-height: 2.4; }
.contacts-email { color: #000000; text-decoration: underline; display: block; margin-top: 10px; }

.contacts-map {
    flex: 0 0 50%;
    max-width: 50%;
    height: 300px;
    border-radius: 12px;
    overflow: hidden;
}
.contacts-map img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Убираем стандартные рамки ссылок вокруг изображений */
a img {
    border: none;
    outline: none;
    transition: transform 0.2s; /* Добавляем легкую анимацию при наведении */
}

/* Эффект при наведении на иконку (опционально) */
a img:hover {
    transform: scale(1.1); /* Иконка слегка увеличивается */
}

.site-footer {
    background-color: #0c2d58; /* Тёмно-синий фон */
    color: #ffffff;
    padding: 40px 20px 20px;
    margin-top: 40px;
}


/* --- ПОДВАЛ --- */
.site-footer {
    background-color: #0c2d58;
    color: #fff;
    padding: 35px 40px 30px 40px;
    border-radius: 15px;
    max-width: 1100px;
    margin: 20px auto;
    box-sizing: border-box;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    align-items: flex-start;
}

.footer-col { flex: 1; }

/* --- ТЕКСТ И ЗАГОЛОВКИ --- */
.footer-title { 
    margin: 0 0 20px 0; 
    font-size: 24px; 
}

.footer-item { 
    display: flex; 
    align-items: center; 
    margin-bottom: 10px; 
    font-size: 14px; 
}

.dot { 
    width: 8px; 
    height: 8px; 
    background-color: #3b82f6; 
    border-radius: 50%; 
    margin-right: 10px; 
    flex-shrink: 0;
}

.footer-phones { 
    font-weight: bold; 
    font-size: 16px; 
    margin: 5px 0 15px 20px; 
    line-height: 1.4; 
}

.footer-desc { 
    font-size: 14px; 
    line-height: 1.5; 
}

/* --- СОЦСЕТИ --- */
.footer-socials { 
    display: flex;        
    flex-direction: row;  
    flex-wrap: wrap;      
    gap: 15px;            
    margin: 15px 0; 
}

.social-btn { 
    display: flex; 
    align-items: center; 
    color: #fff; 
    text-decoration: none; 
    font-size: 13px;      
}

.social-btn img { 
    width: 32px;          
    height: 32px; 
    margin-right: 8px;    
}

/* --- КАРТА И АДРЕС --- */
.footer-address { 
    margin-bottom: 10px; 
    font-size: 14px; 
}

.footer-map { 
    width: 100%;
    height: 180px;            
    border-radius: 12px;      
    overflow: hidden;
    margin-top: 10px;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

/* --- КОПИРАЙТ --- */
.footer-copyright {
    margin-top: 1px; 
    font-size: 12px;
    color: #b0c4de;
    text-align: left;
}


/* --- ХЛЕБНЫЕ КРОШКИ --- */

.breadcrumbs-container a {
    text-decoration: none;
    color: #0c2d58;            /* Твой фирменный темно-синий цвет */
}

.breadcrumbs-container a:hover {
    text-decoration: underline;
}


/* --- ОПТИМИЗАЦИЯ ДЛЯ МОБИЛОК --- */

@media (max-width: 768px) {
    /* Делаем контейнеры на всю ширину */
    .header-container, 
    .banner-wrapper, 
    .contacts-wrapper, 
    .site-footer {
        width: 100% !important;
        padding: 0 15px !important;
        box-sizing: border-box;
    }

    /* Шапка: скрываем или перестраиваем контакты */
    .header-contacts { display: none; }

    /* Контакты: карта под текст */
    .contacts-wrapper {
        flex-direction: column;
    }
    .contacts-map {
        flex: 0 0 100%;
        max-width: 100%;
        height: 250px;
        margin-top: 20px;
    }

    /* Подвал: колонки друг под другом */
    .footer-content {
        flex-direction: column;
        gap: 30px;
    }
    
    /* Убираем лишние отступы для кнопок в мобильной версии */
    .hero-btn {
        bottom: 20px;
        left: 20px;
        padding: 10px 15px;
        font-size: 14px;
    }
}


/* --- СЕКЦИЯ --- */
.features-section {
    padding: 10px 20px;
    background-color: transparent; 
}

/* --- КОНТЕЙНЕР --- */
.features-container {
    max-width: 1100px; 
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px; 
}

/* --- КАРТОЧКА --- */
.feature-card {
    background-color: #ffffff; 
    padding: 30px;
    border-radius: 1px; 
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); 
    display: flex;
    flex-direction: column;
    text-align: left;
}

/* --- НОВЫЙ КОНТЕЙНЕР ДЛЯ ИКОНКИ И ЗАГОЛОВКА --- */
.feature-header {
    display: flex;
    align-items: center; /* Выравнивание по центру по вертикали */
    margin-bottom: 15px;
    gap: 12px; /* Расстояние между иконкой и текстом */
}

.feature-icon {
    width: 35px; /* Немного меньше для лучшего вида в строке */
    height: 35px;
    object-fit: contain;
}

.feature-card h3 {
    margin: 0; /* Убираем лишние отступы */
    font-size: 18px;
    font-weight: 700;
    color: #000;
    font-family: sans-serif;
}

/* --- ТЕКСТ --- */
.feature-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    font-family: sans-serif;
}

/* --- АДАПТИВ --- */
@media (max-width: 768px) {
    .features-container {
        grid-template-columns: 1fr;
    }
}

/* --- КАРТОЧКА --- */
.feature-card {
    background-color: #ffffff;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    
    /* ДОБАВЛЕНО: Плавная анимация для увеличения и тени */
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}

/* --- ЭФФЕКТ ПРИ НАВЕДЕНИИ (НОВОЕ) --- */
.feature-card:hover {
    transform: scale(1.03); /* Чуть-чуть увеличиваем карточку (на 3%) */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); /* Делаем тень чуть больше и заметнее */
}

.reviews-wrapper { max-width: 1100px; margin: 40px auto; padding: 0 20px; }
.reviews-title { font-size: 36px; margin-bottom: 30px; }

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

.review-text { font-size: 14px; line-height: 1.5; color: #333; margin-bottom: 20px; }

.reviewer { display: flex; align-items: center; font-weight: 600; }
.avatar { width: 50px; height: 50px; border-radius: 50%; margin-right: 15px; object-fit: cover; }

.btn-review { 
    background-color: #4a90e2; color: #fff; padding: 15px 30px; 
    text-decoration: none; border-radius: 5px; font-weight: bold; 
    display: inline-block; 
}

/* Адаптив для мобилок */
@media (max-width: 768px) {
    .reviews-grid { grid-template-columns: 1fr; }
}

/* Контейнер-подложка как на фото 1 */
.reviews-container {
    background-color: #ffffff;
    max-width: 1200px; /* или ваш размер */
    margin: 40px auto;
    padding: 40px;
    border-radius: 20px; /* скругление углов */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* легкая тень для объема */
}

/* Удалите margin из .reviews-wrapper, так как теперь отступы у контейнера */
.reviews-wrapper { 
    max-width: 1100px; 
    margin: 0 auto; 
    padding: 0; 
}

.reviews-title { font-size: 36px; margin-bottom: 30px; }

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

/* Остальные стили можно оставить без изменений */
.review-text { font-size: 14px; line-height: 1.5; color: #333; margin-bottom: 20px; }
.reviewer { display: flex; align-items: center; font-weight: 600; }
.avatar { width: 50px; height: 50px; border-radius: 50%; margin-right: 15px; object-fit: cover; }
.btn-review { 
    background-color: #4a90e2; color: #fff; padding: 15px 30px; 
    text-decoration: none; border-radius: 5px; font-weight: bold; 
    display: inline-block; 
}

@media (max-width: 768px) {
    .reviews-container { padding: 20px; }
    .reviews-grid { grid-template-columns: 1fr; }
}



.reviews-wrapper {
    max-width: 1000px;
    margin: 20px auto;
    background-color: #ffffff; /* Белый фон */
    padding: 50px;             /* Внутренние отступы */
    border-radius: 10px;       /* Закругление углов */
    height: 370px; /* Блок будет ровно 300 пикселей */
}

.reviews-wrapper {
    max-width: 1020px;
    margin: 5px auto;
    background-color: #ffffff;
    
    /* Регулируй эти значения: */
    padding: 30px 40px; /* 60px сверху/снизу, 40px слева/справа */
    
    border-radius: 15px;
}


/* 1. Регулировка отступа после хлебных крошек */
.breadcrumbs {
    margin-bottom: 10px !important; /* Уменьшаем расстояние до заголовка "Отзывы" */
}

/* 2. Регулировка отступа после самого заголовка "Отзывы" */
.reviews-title {
    font-size: 36px;
    margin-bottom: 20px; /* Уменьшаем расстояние между заголовком и карточками */
    margin-top: 0;       /* Убираем лишний верхний отступ, если он есть */
}

.contacts-map-title {
    font-size: 36px;
    margin-bottom: 200px; /* Уменьшаем расстояние между заголовком и карточками */
    margin-top: 0;       /* Убираем лишний верхний отступ, если он есть */
}


.reviews-wrapper2 {
    max-width: 1000px;
    margin: 20px auto;
    background-color: #ffffff; /* Белый фон */
    padding: 50px;             /* Внутренние отступы */
    border-radius: 10px;       /* Закругление углов */
    height: 280px; /* Блок будет ровно 300 пикселей */
}

.reviews-wrapper2 {
    max-width: 1020px;
    margin: 5px auto;
    background-color: #ffffff;
    
    /* Регулируй эти значения: */
    padding: 40px 40px; /* 60px сверху/снизу, 40px слева/справа */
    
    border-radius: 15px;
}


/* 2. Регулировка отступа после самого заголовка "Отзывы" */
.reviews-title2 {
    font-size: 36px;
    margin-bottom: 20px; /* Уменьшаем расстояние между заголовком и карточками */
    margin-top: 0;       /* Убираем лишний верхний отступ, если он есть */
}

.contacts-map-title {
    font-size: 36px;
    margin-bottom: 200px; /* Уменьшаем расстояние между заголовком и карточками */
    margin-top: 0;       /* Убираем лишний верхний отступ, если он есть */
}





/*Католог css*/



/* Базовые стили для секции */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.catalog-title { font-size: 32px; margin-bottom: 30px; }

/* Сетка 4 колонки */
.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Карточка товара */
.product-card {
    border-radius: 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.product-img { width: 100%; height: auto; margin-bottom: 15px; }
.product-name { font-size: 18px; margin: 10px 0; }
.product-info { font-size: 14px; color: #555; text-align: left; margin-bottom: 15px; }
.product-price { font-size: 20px; font-weight: bold; margin-bottom: 15px; margin-top: auto; }

/* Кнопка */
.buy-btn {
    background-color: #3b82f6;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}
.buy-btn:hover { background-color: #2563eb; }

/* Адаптив для планшетов */
@media (max-width: 992px) {
    .products-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Удаляем фон и рамки, делаем элементы чистыми */
.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px; /* Немного увеличим расстояние, чтобы не слипались */
    margin: 40px 0;
}

.product-card {
    background: transparent; /* Убираем белый фон */
    border: none;           /* Убираем рамку */
    display: flex;
    flex-direction: column;
    text-align: left;       /* Текст выравниваем влево, как на фото */
}

/* Настройки изображения */
.product-img {
    width: 100%;
    aspect-ratio: 1 / 1;    /* Квадратная форма для единообразия */
    object-fit: contain;    /* Картинка полностью помещается без обрезки */
    background: #f4f4f4;    /* Можно оставить легкий серый фон под фото */
    border-radius: 8px;
    margin-bottom: 15px;
}

/* Текстовые стили */
.product-name { font-size: 20px; font-weight: bold; margin: 10px 0; }
.product-info { font-size: 14px; color: #333; margin-bottom: 10px; line-height: 1.4; }
.product-price { font-size: 20px; font-weight: 800; margin-bottom: 15px; }

/* Кнопка "Заказать" */
.buy-btn {
    background-color: #4a90e2;
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    width: 100%;
}



/* Убираем серый фон и делаем фото чуть меньше */
.product-img {
    width: 85%;          /* Уменьшили размер картинки */
    margin: 0 auto 15px; /* Центрируем и добавляем отступ снизу */
    background: none;    /* Убрали серый фон */
    display: block;
}

/* Настройка шрифтов (убираем лишнюю жирность) */
.product-card {
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    text-align: left;
    font-weight: 400; /* Стандартный вес шрифта (не жирный) */
}

.product-name { 
    font-size: 18px; 
    font-weight: 600; /* Чуть жирнее заголовка, но не "bold" */
    margin: 10px 0; 
}

.product-info { 
    font-size: 13px; 
    color: #555; 
    margin-bottom: 10px; 
}

.product-price { 
    font-size: 18px; 
    font-weight: 700; /* Цена остается акцентной */
    margin-bottom: 15px; 
}


/* Этот класс гарантирует, что контент не выйдет за рамки подвала */
.container {
    max-width: 120px; /* Ширина твоего контента */
    margin: 0 auto;    /* Центрирует по середине */
    padding: 0 20px;   /* Отступы по бокам (чтобы контент не прилипал к краям) */
}

/* Сетка товаров */
.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 колонки */
    gap: 20px; /* Расстояние между товарами */
    width: 100%; /* Занимает всю ширину контейнера */
}

/* Контейнер для выравнивания по ширине подвала */
.container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.catalog-title {
    font-size: 32px;
    margin: 40px 0;
    font-weight: 700;
}

/* Сетка продукции */
.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

/* Карточки */
.product-card {
    display: flex;
    flex-direction: column;
    text-align: left;
    background: transparent;
}

.product-img {
    width: 85%;
    margin: 0 0 15px 0;
    display: block;
}

.product-name {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 10px 0;
}

.product-info {
    font-size: 13px;
    color: #444;
    margin-bottom: 10px;
    line-height: 1.4;
}

.product-price {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
    margin-top: auto;
}

.buy-btn {
    background-color: #4a90e2; 
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    width: 100%;
}

.buy-btn:hover {
    background-color: #357abd;
}



/* --- Сетка товаров --- */
.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px; /* Уменьшили расстояние между карточками как на рефе */
    margin-bottom: 40px;
}

/* --- Карточка товара --- */
.product-card {
    display: flex;
    flex-direction: column;
    padding: 0; /* Убираем лишние отступы внутри */
    background: transparent;
    border: none;
}

/* --- Фото --- */
.product-img {
    width: 60%; /* Уменьшаем фото, чтобы оно не занимало весь блок */
    margin: 0 auto 20px auto; /* Центрируем фото и даем отступ снизу */
    display: block;
    object-fit: contain;
}

/* --- Текст --- */
.product-name {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 10px 0;
    line-height: 1.2;
}

.product-info {
    font-size: 13px;
    color: #444;
    margin-bottom: 10px;
    line-height: 1.4;
}

.product-price {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 15px;
    margin-top: auto; /* Прижимает цену к кнопке */
}

/* --- Кнопка (как на рефе) --- */
.buy-btn {
    background-color: #4a90e2; /* Тот самый синий цвет */
    color: white;
    border: none;
    padding: 10px 0;
    width: 100%;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s;
}

.buy-btn:hover {
    background-color: #357abd;
}


.product-img {
    width: 125%; /* Попробуй это значение, оно будет занимать 80% ширины карточки */
    margin: 0 auto 20px auto; /* Центрирование */
    display: block;
    object-fit: contain; /* Чтобы картинка не растягивалась и не искажалась */
}



/* 1. Сетка: гарантируем, что она занимает ровно 100% ширины контейнера */
.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 100%; /* Должна быть строго 100% от контейнера */
}

/* 2. Карточка: фиксируем, чтобы ничего не вылезало */
.product-card {
    display: flex;
    flex-direction: column;
    width: 100%; /* Карточка должна быть шириной ровно в свою колонку */
    min-width: 0; /* Важно: это не дает содержимому растягивать карточку */
    background: transparent;
}

/* 3. Картинка: делаем её послушной */
.product-img {
    display: block;
    width: 100%;       /* Занимает всю ширину карточки */
    height: 400px;     /* Задай фиксированную высоту (подбери под свой вкус) */
    object-fit: contain; /* Картинка масштабируется внутри, не ломая верстку */
    margin: 0 auto 20px auto;
}


.product-img {
    display: block;
    width: 100%;
    height: 300px; /* Уменьши здесь, если 400 много */
    object-fit: contain; 
    /* margin: 0 auto 5px auto; */ /* Поставь здесь 5px вместо 20px, чтобы прижать к тексту */
}

/* 1. Сетка товаров */
.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px; /* Расстояние между карточками */
    width: 100%;
}

/* 2. Карточка товара */
.product-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* Важно: убери любой padding или border, если они есть */
    padding: 0;
    margin: 0;
    background: transparent;
}

/* 3. Картинка - вот тут самое главное для исправления внешнего вида */
.product-img {
    display: block;
    width: 100%;       /* Картинка заполняет ширину карточки */
    height: 250px;     /* Установи фиксированную высоту (подбери под свой вкус) */
    object-fit: contain; /* Картинка будет "вписана" в блок, а не растянута */
    margin: 0 auto 15px auto; /* Центрируем и ставим отступ до текста */
    background: #ffffff; /* Если нужно, чтобы был белый фон */
}

.product-img {
    width: 100%;
    height: 320px;       /* Установи единую высоту для всех */
    object-fit: contain; /* Картинка НЕ растягивается, а вписывается в 250px */
    display: block;
    margin: 0 auto 20px auto;
}


/* Жирность заголовка товара */
.product-name {
    font-weight: 700; /* Меняй здесь */
}

/* Жирность описания */
.product-info {
    font-weight: 400; /* Обычно оставляют обычным */
}

/* Жирность цены */
.product-price {
    font-weight: 700; /* Делает цену акцентной */
}



.buy-btn {
    /* Настройка высоты */
    padding: 12px 0; /* Меняй первое число (12px), чтобы менять высоту */
    
    /* Дополнительно для идеального вида */
    font-weight: 500; /* Жирность текста внутри кнопки */
    border: none;
    cursor: pointer;
}


/* 1. Заголовок товара */
.product-name {
    font-size: 20px;       /* РАЗМЕР ТЕКСТА: поменяй на свой */
    font-weight: 700;      /* Жирность */
    margin-bottom: -1px;   /* Отступ */
}

/* 2. Описание товара */
.product-info {
    font-size: 14px;       /* РАЗМЕР ТЕКСТА: поменяй на свой */
    font-weight: 450;      /* Жирность */
    margin-bottom: 10px;   /* Отступ до цены */
}

/* 3. Цена */
.product-price {
    font-size: 22px;       /* РАЗМЕР ТЕКСТА: поменяй на свой */
    font-weight: 700;      /* Жирность */
    margin-bottom: 15px;   /* Отступ до кнопки */
}

/* Добавь это к твоему классу .product-img */
.product-img {
    display: block;
    width: 100%;
    height: 310px; 
    object-fit: contain;
    margin: 0 auto 15px auto;
    
    /* Эти две строчки отвечают за плавность */
    transition: transform 0.3s ease; 
}

/* А это — само действие при наведении */
.product-card:hover .product-img {
    transform: scale(1.05); /* Увеличивает картинку на 5% */
}


.breadcrumbs {
    font-size: 14px;
    margin: 10px 0 -5px 0; /* Отступы сверху и снизу */
    color: #333;
}

.breadcrumbs a {
    color: #4a90e2; /* Синий цвет для ссылки */
    text-decoration: none;
}

.breadcrumbs a:hover {
    text-decoration: underline;
}

.breadcrumbs span {
    color: #777; /* Серый цвет для текущей страницы */
}
.breadcrumbs {
    font-size: 14px;
    /* margin: верх право низ лево */
    margin: 30px 0 1px 0; 
    color: #333;
}


/* Настройка хлебных крошек */
.breadcrumbs {
    font-size: 14px;
    margin: 30px 0 15px 0; 
    color: #333;
}

/* Настройка заголовка Продукция */
.catalog-title {
    margin-top: 0;        /* Полностью убираем отступ сверху */
    margin-bottom: 25px;  /* Отступ снизу до начала карточек товаров */
    font-size: 32px;      /* Размер шрифта, если нужно изменить */
}



/* --- АДАПТИВ ДЛЯ ТЕЛЕФОНОВ --- */
@media (max-width: 768px) {
    /* 1. Делаем сетку в 2 колонки вместо 4 */
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px; /* Уменьшаем отступы между карточками */
    }

    /* 2. Уменьшаем размеры шрифтов */
    .product-name {
        font-size: 16px !important;
    }
    
    .product-price {
        font-size: 16px !important;
    }

    .product-info {
        font-size: 12px !important;
    }

    /* 3. Уменьшаем высоту картинок для мобилок */
    .product-img {
        height: 150px; 
    }

    /* 4. Немного уменьшаем саму кнопку */
    .buy-btn {
        padding: 8px 0;
        font-size: 13px;
    }
}


/* Убираем синий цвет и подчеркивание для твоих ссылок */
.contact-link {
    color: inherit;         /* Цвет будет таким же, как у обычного текста */
    text-decoration: none;  /* Убирает подчеркивание */
}

.contact-link:hover {
    text-decoration: underline; /* Появляется подчеркивание при наведении */
    color: #4a90e2;             /* Можно добавить легкий цвет при наведении */
}

/* Применяем к твоим ссылкам */
.contact-link {
    color: #777;            /* Укажи здесь точный цвет твоего копирайта (hex или rgb) */
    text-decoration: none;  /* Убираем подчеркивание */
    cursor: pointer;        /* Оставляем курсор в виде "руки", чтобы было понятно, что это ссылка */
}

/* Отменяем изменение цвета при наведении */
.contact-link:hover {
    color: #777;            /* Цвет остается тем же при наведении */
    text-decoration: none;  /* Подчеркивание не появляется */
}

/* Отменяем изменение цвета, если ссылка уже была посещена */
.contact-link:visited {
    color: #777;
}


/* Применяем к классу ссылки в футере */
.contact-link,
.contact-link:visited,
.contact-link:hover,
.contact-link:active {
    color: #777 !important; /* Укажи тут точный серый цвет копирайта */
    text-decoration: none;
    background-color: transparent;
}


.buy-btn {
    display: block;
    width: 100%;
    padding: 10px 0;
    text-align: center;
    background-color: #4a90e2; /* Твой цвет фона */
    color: white !important;    /* Принудительно белый текст */
    text-decoration: none !important; /* Убирает подчеркивание */
    border-radius: 4px;        /* Твои скругленные углы */
    box-sizing: border-box;    /* Чтобы паддинги не ломали ширину */
}

/* Чтобы при наведении ничего не менялось */
.buy-btn:hover {
    color: white !important;
    text-decoration: none !important;
}










.about-section {
    background-color: #ffffff;      /* Белый фон, как в блоке контактов */
    padding: 35px 40px;            /* Отступы внутри, как в подвале */
    border-radius: 10px;           /* Скругление углов, как везде */
    max-width: 1100px;             /* Ограничение ширины */
    margin: 20px auto;             /* Центрирование на странице */
    box-sizing: border-box;        /* Чтобы отступы не ломали ширину */
    line-height: 1.4;              /* Комфортное чтение текста */
}

.about-section h2 {
    font-size: 35px;
    margin: 0 0 20px 0;
}

.about-section h3 {
    font-size: 25px;
    margin: 20px 0 10px 0;
}

.about-section ul {
    padding-left: 20px;
    margin: 0;
}

.about-section li {
    margin-bottom: 10px;
}


.services-section {
    background-color: #ffffff;
    padding: 35px 40px;
    border-radius: 10px;
    max-width: 1100px;
    margin: 20px auto;
    box-sizing: border-box;
    line-height: 1.5;
}

.services-section h2 {
    font-size: 28px;
    margin: 25px 0 15px 0;
}

/* Убираем верхний отступ у первого заголовка */
.services-section h2:first-child {
    margin-top: 0;
}

.services-section p {
    margin-bottom: 15px;
}

.services-section ul, 
.services-section ol {
    padding-left: 20px;
    margin-bottom: 20px;
}

.services-section li {
    margin-bottom: 10px;
}










/* Контейнер блока */
.popular-products-section {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 10px;
    max-width: 1100px;
    margin: 20px auto;
    box-sizing: border-box;
}

/* Заголовок блока */
.section-title {
    font-size: 28px;
    margin-bottom: 30px;
    color: #000;
}

/* Ссылка "Перейти в каталог" */
.catalog-link-wrapper {
    text-align: right; /* Как на референсе, прижата к правому краю */
    margin-top: 20px;
}

.catalog-more-link {
    color: #3b82f6; /* Ваш фирменный синий */
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    display: inline-block;
    transition: opacity 0.2s;
}

.catalog-more-link:hover {
    opacity: 0.8;
}


.popular-products-section {
    
    /* 1. Уменьшаем внутренние отступы, чтобы контент "растянулся" */
    /* Было 40px, ставим 20px сверху/снизу и 20px по бокам */
    padding: 15px 1px; 
    margin: 20px auto;
    box-sizing: border-box;
}