/* Адаптивность для средних экранов (ноутбуки, планшеты в ландшафтном режиме) */
@media (max-width: 1440px) {
  /* 1. Хедер: делаем поиск гибким, а отступы меньше */
  .header-container {
    gap: 15px; /* Уменьшаем зазоры между логотипом, кнопкой и поиском */
  }

  .logo-wrapper {
    min-width: auto; /* Убираем жесткий лимит ширины лого */
  }

  .search-form {
    width: auto; 
    flex: 1; /* Поиск теперь занимает всё свободное место, а не 492px */
    min-width: 200px;
  }

  /* 2. Баннер: уменьшаем шрифты и зазоры */
  .slide-title {
    font-size: 36px; /* Было 48px */
    line-height: 1.2;
  }

  .car-selector {
    width: 300px; /* Сужаем блок подбора */
    padding: 20px;
  }

  /* 3. Сетки товаров: переходим от фиксированных 338px к гибким колонкам */
  .products-grid {
    grid-template-columns: repeat(4, 1fr); /* 4 колонки, которые делят место поровну */
    gap: 15px;
  }

  .prod-card {
    width: 100%; /* Карточка занимает всю ширину своей колонки */
  }

  /* 4. Сетка категорий */
  .categories-grid {
    gap: 15px;
  }

  .cat-card {
    width: calc(16.66% - 13px); /* Распределяем 6 карточек равномерно */
  }

  /* 5. Акции */
  .promo-grid {
    grid-template-columns: repeat(3, 1fr); /* Было фиксировано 460px */
    gap: 20px;
  }

  .promo-card {
    width: 100%;
  }
}

/* Дополнительные правки для экранов около 1100px-1200px */
@media (max-width: 1200px) {
  /* Убираем лишний текст в хедере, чтобы не тесниться */
  .text-info {
    display: none; /* Скрываем надписи "Личный кабинет" и "Корзина", оставляем только иконки */
  }
  
  .user-cabinet, .cart-block {
    gap: 0;
  }

  .catalog-menu {
    width: 95%; /* Выпадающее меню больше не фиксированное 1200px */
  }

  /* Если карточки товаров становятся слишком узкими, переходим на 3 в ряд */
  .products-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Исправляем футер, чтобы бренды не ломались */
@media (max-width: 1300px) {
  .brands-columns {
    column-count: 5; /* Было 8, на 1300px лучше 5 */
  }
}

/* --- ГИБКАЯ СЕТКА КАТЕГОРИЙ (ПЕРЕНОС КАРТОЧЕК) --- */
@media (max-width: 1500px) {
  .categories-grid {
    display: flex !important;
    flex-wrap: wrap !important; /* Разрешаем карточкам переноситься */
    justify-content: center;
    gap: 20px !important;
  }

  .cat-card {
    /* На больших экранах их 6, здесь делаем так, чтобы помещалось 3 в ряд */
    width: calc(33.333% - 20px) !important; 
    min-width: 250px !important; /* Не даем сжиматься меньше этого значения */
    height: 250px !important;
  }
}

@media (max-width: 900px) {
  .cat-card {
    /* Переходим на 2 в ряд */
    width: calc(50% - 20px) !important;
    min-width: unset !important;
  }
}

@media (max-width: 560px) {
  .cat-card {
    width: 100% !important;
    height: 180px !important;
    border-radius: 12px !important;
  }
}

/* --- ПЕРЕРАБОТКА БАННЕРА (BANNER-INNER) --- */
@media (max-width: 1400px) {
  .banner-section {
    height: auto !important; /* Убираем жесткую высоту секции */
    padding: 40px 0;
  }

  .banner-inner {
    flex-direction: column !important; /* Складываем слайдер и подбор в столбик */
    height: auto !important;
    gap: 30px !important;
  }

  .slider-wrapper {
    width: 100% !important;
    max-width: 900px; /* Чтобы баннер не растягивался на пол-экрана по высоте */
    height: 400px !important;
    order: 1; /* Слайдер сверху */
  }

  .car-selector {
    width: 100% !important;
    max-width: 900px;
    height: auto !important;
    order: 2; /* Подбор снизу */
    margin: 0 auto;
    /* Делаем поля внутри подбора в ряд на планшетах */
    display: flex;
    flex-direction: column;
  }
  
  .car-selector .inputs-row {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Поля выбора в две колонки */
    gap: 15px;
    margin-bottom: 20px;
  }
}

/* --- ГИБКОСТЬ ТОВАРОВ --- */
@media (max-width: 1440px) {
  .products-grid {
    /* Вместо жестких 338px используем авто-подбор */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 20px !important;
  }

  .prod-card {
    width: 100% !important;
  }
}

/* --- АДАПТИВНОСТЬ СТРАНИЦЫ ТОВАРА (PRODUCT PAGE) --- */

@media (max-width: 1440px) {
  /* 1. Делаем галерею отзывчивой */
  .product-gallery {
    width: 100% !important; /* Убираем фикс 565px  */
    max-width: 100% !important;
  }

  /* 2. Перестраиваем сетку на 2 колонки, так как 3-я (340px) не влезает */
  .product-card-container {
    grid-template-columns: 1fr 340px !important; /* Галерея + Информация и Цена */
    gap: 30px !important; /* Уменьшаем зазоры  */
  }

  /* 3. Заголовок теперь должен занимать обе колонки, чтобы не тесниться */
  .product-header {
    grid-column: 1 / 3 !important;
    margin-bottom: 20px;
  }

  /* 4. Блок с опциями (центральный) и блок цены теперь идут друг под другом в правой колонке */
  .product-info-column {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  .product-actions-box {
    grid-column: 2 !important;
    grid-row: 3 !important; /* Цена встает под опции */
    width: 100% !important;
  }

  /* 5. Галерея занимает левую колонку и растягивается на высоту двух правых блоков */
  .product-gallery {
    grid-column: 1 !important;
    grid-row: 2 / 4 !important;
  }
}

/* Дополнительный фикс для средних ноутбуков (1100px - 1300px) */
@media (max-width: 1250px) {
  /* Уменьшаем шрифты, чтобы заголовок не был огромным */
  .product-title {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }

  /* Таблица характеристик (Description & Specs) */
  .desc-specs-container {
    grid-template-columns: 1fr !important; /* В одну колонку, иначе текст слишком узкий  */
    gap: 30px !important;
  }

  /* Отзывы и Вопросы — убираем сайдбары вбок, ставим под основной контент */
  .reviews-layout, .questions-layout {
    grid-template-columns: 1fr !important;
  }

  .sticky-wrapper {
    position: static !important; /* Отключаем прилипание */
    margin-top: 20px;
  }
}

/* Фикс хлебных крошек, чтобы они не перекрывались */
.breadcrumbs {
  padding: 20px 0 !important;
  line-height: 1.5;
}

/* --- СТРАНИЦА ОФОРМЛЕНИЯ ЗАКАЗА (CHECKOUT) --- */

@media (max-width: 1440px) {
  /* 1. Уменьшаем зазоры и сужаем правую колонку, чтобы она не "съедала" всё место */
  .page {
    gap: 20px !important;
    padding: 0 20px !important;
  }

  .right-col {
    width: 380px !important; /* Было 460px */
  }
}

@media (max-width: 1050px) {
  /* 2. Твоё предложение: спускаем правую колонку (Ваш заказ) вниз [cite: 764] */
  .page {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .left-col, 
  .right-col {
    width: 100% !important; /* Колонки занимают всю доступную ширину  */
  }

  /* 3. Оптимизируем поля ввода: переводим их из 3-х в 2 колонки, чтобы текст не обрезался  */
  .input-row {
    flex-wrap: wrap !important;
    gap: 15px !important;
  }

  .input-row .input-wrap {
    flex: 1 1 calc(50% - 15px) !important; /* Два поля в ряд */
  }

  /* 4. Настраиваем табы доставки (Доставка / Самовывоз) [cite: 752] */
  .delivery-options {
    gap: 10px !important;
  }

  .del-opt {
    padding: 15px !important;
  }
}

@media (max-width: 650px) {
  /* 5. На совсем маленьких экранах переводим все поля в одну колонку  */
  .input-row .input-wrap {
    flex: 1 1 100% !important;
  }

  /* Таблица служб доставки: убираем лишние колонки для компактности [cite: 756] */
  .courier-table thead td:nth-child(3),
  .courier-table tbody td:nth-child(3) {
    display: none !important; /* Скрываем колонку со сроками */
  }
}