/* === MOBILE FIX — motor-dji.ru ===
   Дата: 2026-03-16
   Откат: удалить строку подключения в main.twig
   Не трогает десктоп (всё в @media max-width)
*/

/* =============================================
   ШАПКА — компактная на мобильном
   ============================================= */
@media (max-width: 767px) {
  /* Убираем белую пустоту */
  .header-top { padding: 8px 0 !important; }
  .header-top .row { margin: 0; }

  /* Телефоны — компактно в одну строку */
  .header-phones { 
    display: flex; 
    flex-wrap: wrap;
    gap: 4px 12px;
    align-items: center;
    margin-bottom: 4px !important;
    padding: 0 !important;
  }
  .header-phones .phone { display: inline; }
  .header-phones .phone a { font-size: 15px !important; font-weight: 700; }
  .header-phones .phone small { display: none !important; }
  .header-phones .mode { 
    font-size: 11px !important; 
    width: 100%;
    margin-top: 0 !important;
    color: #888;
  }
  .header-phones::after { display: none !important; }

  /* Логотип — меньше */
  .header .logo { padding: 6px 0 4px !important; }
  .header .logo img { max-width: 200px !important; margin: 0 auto; }
  .header .address { font-size: 12px !important; margin-top: 2px !important; }
  .header .address span { font-size: 12px !important; }
  
  /* Ali/Avito блок скрыть */
  .ali-avito { display: none !important; }

  /* User block компактнее */
  .user-block { padding: 4px 0 !important; }
  .cart-instr-block { display: none !important; }
  .btn-head-reviews { display: none !important; }

  /* Навигация */
  .header-menu { padding: 0 !important; margin-top: 0 !important; }
  .header-menu .nav > li > a { 
    padding: 10px 12px !important; 
    font-size: 13px !important;
  }
}

/* =============================================
   ПОИСКОВАЯ СТРОКА — компактная
   ============================================= */
@media (max-width: 767px) {
  .header-search { padding: 6px 0 !important; }
  .header-search .search-block input {
    height: 42px !important;
    font-size: 15px !important;
  }
}

/* =============================================
   КАТАЛОГ DROPDOWN — полноэкранный на мобильном
   ============================================= */
@media (max-width: 767px) {
  .nav-catalog-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    min-width: 100% !important;
    width: 100% !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
    flex-direction: column !important;
    padding-bottom: 60px !important;
  }
  .nav-catalog-menu .ncm-left,
  .nav-catalog-menu .ncm-right {
    width: 100% !important;
    min-width: 100% !important;
  }
}

/* =============================================
   ФИЛЬТРЫ — одна колонка, компактные
   ============================================= */
@media (max-width: 767px) {
  .catalog-filters { 
    padding: 10px 12px !important; 
    margin-bottom: 10px !important;
  }
  .cf-row { 
    flex-direction: column !important; 
    gap: 8px !important; 
  }
  .cf-group { 
    min-width: 100% !important; 
    width: 100% !important;
    flex: none !important;
  }
  .cf-group label { font-size: 11px !important; }
  .cf-group select { 
    font-size: 15px !important; 
    padding: 10px 12px !important;
    -webkit-appearance: none;
  }
  .cf-group-check label { font-size: 15px !important; }
  .cf-info { font-size: 15px !important; margin-top: 6px !important; }
}

/* =============================================
   КАРТОЧКИ ТОВАРОВ — читаемые
   ============================================= */
@media (max-width: 767px) {
  .cf-card-name { 
    font-size: 15px !important; 
    height: auto !important; 
    line-height: 1.35 !important;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .cf-card-oem { font-size: 13px !important; }
  .cf-card-brand { font-size: 13px !important; }
  .cf-card-price { font-size: 20px !important; font-weight: 700 !important; }
  .cf-card-price .old { font-size: 15px !important; }
  .cf-card-body { padding: 10px 14px 14px !important; }
  .cf-card-img { height: 200px !important; }
}

/* =============================================
   BREADCRUMBS — компактные
   ============================================= */
@media (max-width: 767px) {
  .breadcrumbs-block,
  .breadcrumb { 
    font-size: 13px !important; 
    padding: 8px 12px !important;
    margin-bottom: 8px !important;
  }
}

/* =============================================
   ЗАГОЛОВОК H1 
   ============================================= */
@media (max-width: 767px) {
  h1.title { 
    font-size: 22px !important; 
    line-height: 1.25 !important;
    margin-bottom: 10px !important;
  }
}

/* =============================================
   ОБЩАЯ ТИПОГРАФИКА — читаемые шрифты
   ============================================= */
@media (max-width: 767px) {
  body { font-size: 15px !important; }
  p, li, td, th { font-size: 15px !important; line-height: 1.5 !important; }
  .page-content { padding: 0 4px !important; }
}

/* =============================================
   КАТЕГОРИИ КАРУСЕЛЬ НА ГЛАВНОЙ
   ============================================= */
@media (max-width: 767px) {
  .agg-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .agg-card__name { font-size: 13px !important; }
}
@media (max-width: 400px) {
  .agg-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* =============================================
   СПЕЦИАЛЬНЫЕ ПРЕДЛОЖЕНИЯ (слайдер на главной)
   ============================================= */
@media (max-width: 767px) {
  .special .item .name { font-size: 14px !important; }
  .special .item .price { font-size: 18px !important; }
}

/* =============================================
   ФУТЕР — читаемый
   ============================================= */
@media (max-width: 767px) {
  .footer { font-size: 14px !important; }
  .footer a { font-size: 14px !important; }
}

/* =============================================
   КНОПКА ЗВОНКА (LiveTex) — не перекрывать контент
   ============================================= */
@media (max-width: 767px) {
  #liveagent-btn,
  .calltouch-cb-widget { 
    bottom: 10px !important; 
    right: 10px !important;
    width: 48px !important;
    height: 48px !important;
  }
}

/* === FIX: убираем 70px белую пустоту из modern-2026.css === */
@media (max-width: 767px) {
  .header-top {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
}

/* === FIX 2: скрываем телефоны и user-block на мобильном, только лого+поиск === */
@media (max-width: 767px) {
  /* Прячем телефоны — они есть в футере и по клику на иконку */
  .header-top .phones { display: none !important; }
  
  /* Прячем user-block (вход/регистрация) — есть в бургере */
  .header-top .col-md-3 { display: none !important; }
  
  /* Логотип — компактнее */
  .header-top .logo { 
    padding: 6px 0 2px !important; 
    margin: 0 !important;
  }
  .header .logo img { max-width: 180px !important; }
  
  /* Адрес под лого — скрыть на мобильном */
  .header .address { display: none !important; }
  
  /* Расписание вылезает под поиском — убираем */
  .header-phones .mode { display: none !important; }
  .mode { display: none !important; }

  /* Зелёная полоса поиска — убираем нижний padding */
  .header-search { 
    padding: 4px 0 4px !important;
    margin-bottom: 0 !important;
  }
  
  /* Голубая полоска — если это элемент загрузки */
  .pace, .pace-progress, #nprogress, .nprogress-bar,
  .loading-bar, .progress-bar { display: none !important; }
}

/* === FIX 3: компактные фильтры — прячем второстепенные === */
@media (max-width: 767px) {
  /* Прячем "На странице" и "Сортировка" — не критичны на мобильном */
  .cf-group:has(#cf-perpage),
  .cf-group:has(#cf-sort) {
    display: none !important;
  }
  /* Fallback без :has — по id родителя */
  #cf-perpage { display: none !important; }
  #cf-sort { display: none !important; }
  
  /* Лейблы над перепасом/сортировкой тоже */
  .cf-group label[for="cf-perpage"],
  .cf-group label[for="cf-sort"] {
    display: none !important;
  }

  /* Кнопка Категории — компактнее */
  .btn-categories,
  a[href="/catalogs"].btn {
    padding: 8px 16px !important;
    font-size: 14px !important;
    margin-bottom: 6px !important;
  }

  /* Фильтры — уменьшаем padding */
  .catalog-filters {
    padding: 8px 10px !important;
    margin-bottom: 8px !important;
  }
  .cf-group {
    margin-bottom: 0 !important;
  }
  .cf-group select {
    padding: 8px 10px !important;
    font-size: 14px !important;
  }
  .cf-group label {
    font-size: 10px !important;
    margin-bottom: 2px !important;
  }
  .cf-group-check label {
    font-size: 14px !important;
  }
  
  /* Breadcrumbs ещё компактнее */
  .breadcrumbs-block,
  .breadcrumb {
    padding: 6px 10px !important;
    margin-bottom: 4px !important;
    font-size: 12px !important;
  }
  
  /* H1 на страницах каталога */
  h1.title.text-center {
    font-size: 20px !important;
    margin: 8px 0 12px !important;
  }
}

/* === FIX 4: карточки товаров — 2 колонки на мобильном === */
@media (max-width: 767px) {
  /* Сетка — 2 в ряд */
  #cf-products .cf-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 0 4px !important;
  }
  #cf-products .cf-item {
    width: 100% !important;
    padding: 0 !important;
  }
  
  /* Фото — компактные квадраты */
  .cf-card-img {
    height: 140px !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
  
  /* Карточка — плотнее */
  .cf-card {
    border-radius: 8px !important;
    overflow: hidden;
  }
  .cf-card-body {
    padding: 6px 8px 10px !important;
  }
  
  /* OEM и бренд — мельче */
  .cf-card-oem {
    font-size: 11px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
    display: inline-block;
  }
  .cf-card-brand {
    font-size: 11px !important;
  }
  
  /* Название — 2 строки макс */
  .cf-card-name {
    font-size: 13px !important;
    height: 34px !important;
    line-height: 1.3 !important;
    margin: 4px 0 !important;
    overflow: hidden;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }
  
  /* Цена — крупная и заметная */
  .cf-card-price {
    font-size: 17px !important;
    font-weight: 700 !important;
    margin: 4px 0 2px !important;
  }
  .cf-card-price .old {
    font-size: 12px !important;
    display: block !important;
    margin-left: 0 !important;
    margin-top: 2px;
  }
}

/* Совсем маленькие экраны — всё равно 2 колонки но ещё компактнее */
@media (max-width: 380px) {
  .cf-card-img {
    height: 110px !important;
  }
  .cf-card-name {
    font-size: 12px !important;
    height: 30px !important;
  }
  .cf-card-price {
    font-size: 15px !important;
  }
}

/* === FIX 5: каталог-меню — full-screen overlay на мобильном === */
@media (max-width: 767px) {
  /* Полноэкранный overlay */
  .nav-catalog-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    z-index: 99999 !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    animation: none !important;
    padding-bottom: 80px !important;
  }
  
  /* Левая колонка — на всю ширину, вертикальный список */
  .nav-cat-groups {
    width: 100% !important;
    min-width: 100% !important;
    border-radius: 0 !important;
    padding: 60px 0 10px !important;
    background: #1a1e24 !important;
  }
  
  /* Группы — крупнее, удобнее для пальца */
  .nav-cat-group-item {
    padding: 14px 20px !important;
    font-size: 15px !important;
    border-left-width: 4px !important;
  }
  
  /* Панели — под группами */
  .nav-cat-panels {
    width: 100% !important;
    min-width: 100% !important;
    padding: 12px 16px 30px !important;
  }
  
  /* Ссылки в панелях — крупнее */
  .nav-cat-panel a {
    padding: 12px 12px !important;
    font-size: 15px !important;
  }
  
  /* Кнопка закрытия (CSS-only через ::before на groups) */
  .nav-cat-groups::before {
    content: "✕ Закрыть";
    display: block;
    position: absolute;
    top: 12px;
    right: 16px;
    color: #a0a8b4;
    font-size: 14px;
    font-weight: 600;
    padding: 6px 12px;
    cursor: pointer;
    z-index: 100000;
  }
}

/* === FIX 5b: бургер-меню (header-menu) тоже full-screen === */
@media (max-width: 767px) {
  .header-menu {
    position: fixed !important;
    top: 0 !important;
    left: -100%;
    width: 85% !important;
    max-width: 320px !important;
    height: 100vh !important;
    background: #fff !important;
    z-index: 99998 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    box-shadow: 4px 0 30px rgba(0,0,0,0.2) !important;
    padding-top: 20px !important;
    
  }
  
  .header-menu .nav > li > a {
    padding: 14px 20px !important;
    font-size: 15px !important;
    border-bottom: 1px solid #f0f0f0 !important;
  }
  
  .header-menu .nav > li > a:hover,
  .header-menu .nav > li > a:active {
    background: #f0faf4 !important;
    color: #2ea85a !important;
  }
}

/* === FIX 6: кнопка закрытия меню каталога === */
@media (max-width: 767px) {
  .nav-catalog-menu .ncm-close-btn {
    position: fixed;
    top: 12px;
    right: 16px;
    z-index: 100001;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    font-size: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  
  /* Убираем CSS ::before "Закрыть" — заменяем настоящей кнопкой */
  .nav-cat-groups::before { display: none !important; }
}

/* === FIX 7: стилизация фильтров — современный вид === */
@media (max-width: 767px) {
  /* Фильтры — убираем бежевый фон, делаем чистый минимализм */
  .catalog-filters {
    background: #fff !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 12px !important;
    padding: 12px 14px 10px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
  }
  
  /* Лейблы — мягче */
  .cf-group label {
    color: #999 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
  }
  
  /* Селекты — современные */
  .cf-group select {
    background: #f8f8f8 !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    color: #333 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
  }
  
  /* Чекбокс — зелёный акцент */
  .cf-group-check label {
    font-size: 14px !important;
    color: #444 !important;
    font-weight: 500 !important;
  }
  .cf-group-check input[type="checkbox"] {
    accent-color: #46c673 !important;
  }
  
  /* "Найдено" — мягче */
  .cf-info {
    color: #888 !important;
    font-size: 13px !important;
    padding-top: 4px !important;
    border-top: 1px solid #f0f0f0 !important;
    margin-top: 8px !important;
  }
  
  /* Стрелки карусели — прячем на мобильном, свайп достаточно */
  .agg-nav {
    display: none !important;
  }
  
  /* Кнопка Категории — скругления, тень */
  .btn-categories,
  a[href="/catalogs"].btn,
  #agg-tiles + .btn,
  .agg-wrap + a.btn {
    border-radius: 10px !important;
    font-weight: 600 !important;
  }
}

/* Десктоп тоже чуть освежим фильтры */
.catalog-filters {
  background: #fafafa !important;
  border: 1px solid #eee !important;
  border-radius: 10px !important;
}

/* === FIX 8: Brand carousel + Car select inline === */
@media (max-width: 767px) {
  /* Brand carousel */
  .mfr-carousel {
    margin: 0 0 10px;
    overflow: hidden;
  }
  .mfr-track {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 6px 12px;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .mfr-track::-webkit-scrollbar { display: none; }
  
  .mfr-pill {
    flex-shrink: 0;
    padding: 7px 14px;
    border-radius: 20px;
    border: 1px solid #e0e0e0;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    font-family: inherit;
  }
  .mfr-pill:active { transform: scale(0.95); }
  .mfr-pill.active {
    background: #46c673;
    color: #fff;
    border-color: #46c673;
    box-shadow: 0 2px 8px rgba(70,198,115,0.3);
  }
  
  /* Car select inline */
  .mobile-car-select {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    padding: 0 4px;
  }
  .mobile-car-label {
    font-size: 12px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .mobile-car-select select {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #f8f8f8;
    font-size: 14px;
    color: #333;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
  }
}

/* === FIX 9: Категории + Марка авто в одну строку === */
@media (max-width: 767px) {
  .mobile-car-select {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 4px;
    flex-direction: row;
  }
  .mobile-car-label { display: none; }
  .mobile-car-select select {
    flex: 1;
    padding: 10px 32px 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background: #fff;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
  }
}

/* === FIX 10: Категории + Марка авто INLINE === */
@media (max-width: 767px) {
  .mobile-cat-car-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 4px;
  }
  .mobile-car-inline {
    flex: 1;
    padding: 10px 32px 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background: #fff;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    height: 44px;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
  }
}

/* === FIX 11: Brand logos in pills === */
@media (max-width: 767px) {
  .mfr-pill {
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .mfr-pill-logo {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 2px;
  }
}

/* === FIX 12: цвет текста в мобильном меню (белый фон) === */
@media (max-width: 767px) {
  .header-menu .nav > li > a,
  .header-menu .nav > li > a:focus,
  .header-menu .nav > li > a:hover {
    color: #333 !important;
    border-bottom: 1px solid #f0f0f0 !important;
  }
  .header-menu .nav > li > a:after {
    background: none !important;
  }
  .header-menu .nav-catalog-toggle {
    color: #333 !important;
  }
  .header-menu .callback-link,
  .header-menu .add-bookmark,
  .header-menu .btn-menu-reviews,
  .header-menu .mobile-account-link {
    color: #333 !important;
    border-color: #ccc !important;
  }
}