/* ===== ГЛОБАЛЬНА МОБІЛЬНА ВЕРСТКА AutoChip ===== */

/* --- Навігація десктоп --- */
nav.main .container { padding: 0 8px; }

/* ====== БУРГЕР — точно як в оригіналі ====== */
/* На десктопі бургер прихований через Bootstrap d-md-none */
/* Не змінюємо глобальні стилі .btn.bar — вони вже правильні в shared/main.css */

@media (max-width: 767px) {
  /* ====== ХЕДЕР — відновлено до оригіналу ====== */
  header.main .logo a img {
    height: 42px;
  }
  header.main .logo a b {
    font-size: 1.1rem;
  }
  header.main .logo a span {
    font-size: 0.6rem;
    letter-spacing: 1.5px;
  }
  header.main .container {
    padding-top: 0.5rem !important;
    line-height: 13px;
  }
  header.main .logo .header {
    margin: 0;
  }

  /* ====== NAV — мобільне меню з темним фоном ====== */
  nav.main {
    display: none;
    background: #1a1a1a;
  }
  nav.main[style*="block"] {
    display: block !important;
  }
  nav.main ul {
    display: block;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  nav.main li,
  nav.main li:nth-child(3) {
    width: 50%;
    display: inline-block;
    border-bottom: 1px solid #333;
    vertical-align: top;
  }
  nav.main li a {
    color: #fff;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    padding: 18px 10px;
    display: block;
    text-decoration: none;
    border-right: 1px solid #333;
  }
  nav.main li a:hover,
  nav.main li a.active {
    background: #cb0a0e;
  }

  /* ====== ЗАГАЛЬНІ ====== */
  h1 { font-size: 1.25rem !important; }
  h2 { font-size: 1.05rem !important; }

  /* ====== ФІЛЬТР ====== */
  .ct-filter-custom { gap: 8px; }
  .ct-sel { flex: 1 1 100%; min-width: unset; font-size: 0.88rem; height: 42px; }

  /* ====== СІТКА БРЕНДІВ ====== */
  .brands-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px; }
  .brand-card { padding: 10px 5px; min-height: 75px; }
  .brand-card img { max-width: 52px; max-height: 34px; margin-bottom: 4px; }
  .brand-card span { font-size: 0.7rem; }

  /* ====== СІТКА МОДЕЛЕЙ ====== */
  .models-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  .model-card .model-photo-wrap { height: 90px; }
  .model-card .model-photo-img { height: 90px; }
  .model-card .model-name { font-size: 0.85rem; padding: 7px; }

  /* ====== ТАБЛИЦІ ====== */
  .ct-engines-table, .stage-table { overflow-x: auto; }
  .ct-engines-table th, .ct-engines-table td { padding: 7px 8px; font-size: 0.8rem; }
  .stage-table th, .stage-table td { padding: 7px 8px; font-size: 0.82rem; }

  /* ====== ФУТЕР ====== */
  footer.main { padding: 16px 12px !important; }
  footer.main > div { flex-direction: column !important; text-align: center; gap: 12px; }
  footer.main .footer-right { text-align: center; }

  /* ====== КНОПКИ ====== */
  .btn { padding: 10px 18px; font-size: 0.88rem; }
}

@media (max-width: 400px) {
  .brands-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ====== TABLET 768-1024 ====== */
@media (min-width: 768px) and (max-width: 1024px) {
  .brands-grid { grid-template-columns: repeat(4, 1fr) !important; }
  .models-grid { grid-template-columns: repeat(3, 1fr) !important; }
}