/* responsive.css — адаптация под различные устройства */

/* ---------- Планшеты (от 768px до 992px) ---------- */
@media (max-width: 992px) {
    /* Скрываем навигационное меню (оно будет открываться бургером) */
    .header__nav {
        display: none;
    }
    .header__nav.active {
        display: block;
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background: var(--light-gray);
        box-shadow: var(--shadow-md);
        z-index: 99;
    }
    .header__nav.active .header__menu {
        flex-direction: column;
        align-items: center;
        padding: 20px;
    }
    .header__nav.active .header__menu li {
        width: 100%;
        text-align: center;
    }
    /* Показываем бургер-меню */
    .header__burger {
        display: flex;
    }

    /* Поиск немного сужаем */
    .header__search {
        max-width: 250px;
    }

    /* Подвал: перестраиваем в одну колонку */
    .footer__container {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .footer__nav {
        grid-template-columns: repeat(2, 1fr); /* две колонки */
    }
    .footer__contacts {
        text-align: left;
    }

    /* Категории: теперь 4 в ряд (было 8) */
    .categories__grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Услуги: 2 в ряд */
    .services__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Преимущества: 2 в ряд */
    .advantages__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Каталог: фильтр сверху, товары во всю ширину */
    .catalog__container {
        flex-direction: column;
    }
    .catalog__sidebar {
        width: 100%;
    }

    /* Товары в каталоге: 2 в ряд */
    .catalog__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Карточка товара: фото сверху, информация снизу */
    .product__container {
        flex-direction: column;
    }
    .product__gallery,
    .product__info {
        width: 100%;
    }

    /* Информационная страница: боковое меню сверху */
    .info__container {
        flex-direction: column;
    }
    .info__sidebar {
        width: 100%;
    }

    /* Контакты: филиалы в одну колонку */
    .contacts__list {
        grid-template-columns: 1fr;
    }
}

/* ---------- Мобильные устройства (до 768px) ---------- */
@media (max-width: 768px) {
    /* Шапка: уменьшаем высоту, убираем город и телефон, поиск на всю ширину */
    .header__container {
        height: 60px;
    }
    .header__logo-img {
        height: 35px;
    }
    .header__phone {
        display: none;
    }
    .header__city {
        display: none;
    }
    .header__search {
        margin: 0 5px;
        max-width: 100%;
    }
    .header__icons {
        gap: 10px;
    }

    /* Главный слайдер уменьшаем */
    .hero__slider {
        height: 300px;
    }
    .hero__title {
        font-size: 24px;
    }
    .hero__subtitle {
        font-size: 16px;
    }

    /* Категории: 3 в ряд */
    .categories__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Преимущества: 1 в ряд */
    .advantages__grid {
        grid-template-columns: 1fr;
    }

    /* Филиалы: одна колонка */
    .branches__list {
        grid-template-columns: 1fr;
    }

    /* Пагинация: уменьшаем отступы */
    .catalog__pagination {
        gap: 5px;
    }

    /* Карточка товара: цена и кнопки занимают всю ширину */
    .product__price {
        font-size: 28px;
    }
    .product__actions {
        flex-direction: column;
    }
    .product__actions .btn {
        width: 100%;
    }

    /* Табы на маленьких экранах можно сделать скроллируемыми */
    .tabs__nav {
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 5px;
    }
    .tabs__btn {
        flex: 0 0 auto;
        padding: 8px 15px;
    }

    /* Контактная форма: поля на всю ширину */
    .contacts__form {
        max-width: 100%;
    }
}

/* ---------- Очень маленькие телефоны (до 480px) ---------- */
@media (max-width: 480px) {
    /* Категории: 2 в ряд */
    .categories__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Услуги: 1 в ряд */
    .services__grid {
        grid-template-columns: 1fr;
    }

    /* Каталог: товары в одну колонку */
    .catalog__grid {
        grid-template-columns: 1fr;
    }

    /* Уменьшаем заголовки секций */
    .section-title {
        font-size: 24px;
    }

    /* Карточка товара: шрифт названия меньше */
    .product-card__title {
        font-size: 14px;
    }
    .product-card__price {
        font-size: 16px;
    }

    /* Хлебные крошки: делаем перенос */
    .breadcrumb {
        font-size: 12px;
    }
}
/* ---------- Мобильная иконка телефона ---------- */
.header__phone-mobile {
    display: none;
}

@media (max-width: 768px) {
    .header__phone-mobile {
        display: block;
        margin-left: 10px;
    }
    .header__phone-mobile a {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .header__phone {
        display: none;
    }
    /* Корректировка расположения иконок */
    .header__icons {
        margin-left: auto;
    }
}

/* Если нужно точнее подогнать отступы */
@media (max-width: 480px) {
    .header__phone-mobile {
        margin-left: 5px;
    }
}

/* Дополнительно: модальное окно быстрого просмотра (если добавим) */
/* Здесь можно описать стили для модалки */