/* ═══════════════════════════════════════════════════════════
   AT-DSG — Responsive Desktop / Tablet Styles
   Breakpoints:
     1024px–1199px : medium desktop / large tablet
     769px–1023px  : tablet
     769px–899px   : narrow tablet (icon-only top bar)
   ═══════════════════════════════════════════════════════════ */

/* ─── Общий сброс жёсткой ширины ─────────────────────────── */
@media (max-width: 1199px) {
  .container {
    width: 100% !important;
    max-width: 1200px !important;
    box-sizing: border-box !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .banners {
    width: 100% !important;
    max-width: 850px !important;
    height: auto !important;
    aspect-ratio: 850 / 350 !important;
  }
}

/* ─── Средний десктоп / большой планшет  1024px–1199px ───── */
@media (min-width: 1024px) and (max-width: 1199px) {

  .header {
    padding: 14px 20px !important;
    gap: 14px !important;
  }

  .header-section-1 {
    gap: 14px !important;
  }

  .navigation {
    font-size: 13px !important;
  }

  .navigation__item,
  a.navigation__item.-link {
    padding: 4px 10px !important;
    white-space: nowrap !important;
  }

  .search-form .search-form__input {
    height: 44px !important;
    font-size: 13px !important;
  }

  .search-form .search-form__button {
    height: 44px !important;
    width: 44px !important;
  }
}

/* ─── Планшет  769px–1023px ──────────────────────────────── */
@media (min-width: 769px) and (max-width: 1023px) {

  .header {
    padding: 10px 16px !important;
    gap: 10px !important;
  }

  .header__row {
    gap: 8px !important;
  }

  .header-section-1 {
    gap: 10px !important;
  }

  .header-additional__item {
    gap: 6px !important;
  }

  .header-additional__item-phone {
    font-size: 11px !important;
  }

  .logo {
    flex-shrink: 0 !important;
  }

  .logo__img-icon {
    width: 40px !important;
    height: 40px !important;
  }

  .search-form .search-form__input {
    height: 40px !important;
    font-size: 12px !important;
    padding-left: 12px !important;
  }

  .search-form .search-form__button {
    height: 40px !important;
    width: 40px !important;
  }

  .navigation {
    font-size: 11px !important;
    gap: 0 !important;
  }

  .navigation__item,
  a.navigation__item.-link {
    padding: 4px 8px !important;
    white-space: nowrap !important;
  }

  .language-wrapper {
    margin-left: 6px !important;
  }
}

/* ─── Сетка категорий для планшета  769px–1199px ─────────── */
@media (min-width: 769px) and (max-width: 1199px) {

  /* Убираем горизонтальный скролл, переключаем на 3-колоночный грид */
  .main-categories {
    overflow-x: visible !important;
    padding-bottom: 0 !important;
  }

  .main-categories__grid,
  .main-categories__bottom-row {
    min-width: 0 !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-auto-rows: 200px !important;
    gap: 10px !important;
  }

  /* Большая карточка «Valve Body» — на всю ширину строки */
  .category-card--mechatronics {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    grid-auto-rows: 220px !important;
  }

  /* Остальные именованные карточки — авто-расстановка */
  .category-card--gaskets,
  .category-card--friction,
  .category-card--pistons,
  .category-card--filters,
  .category-card--hydro {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  /* Карточки нижней строки — авто, без фиксированных span */
  .main-categories__bottom-row .category-card:nth-child(n) {
    grid-column: auto !important;
  }

  .category-card__title {
    font-size: 14px !important;
  }

  .category-card--mechatronics .category-card__title {
    font-size: 16px !important;
  }
}

/* ─── Узкий планшет  769px–899px  (иконки без подписей) ─── */
@media (min-width: 769px) and (max-width: 899px) {

  /* Скрываем текстовые подписи в верхней строке, оставляем иконки */
  .header-additional__item-phone {
    display: none !important;
  }

  /* Корзина: скрываем текст «Basket / Корзина» */
  .header-cart-label {
    display: none !important;
  }

  .header-section-1 {
    gap: 8px !important;
  }

  .navigation {
    font-size: 10px !important;
  }

  .navigation__item,
  a.navigation__item.-link {
    padding: 4px 5px !important;
  }
}