/* === 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;
  }
}