/* ============================================================
   css/fsi-mobile.css — правки мобильной вёрстки.

   Подключается ПОСЛЕДНИМ, потому что у страниц есть собственные
   медиазапросы, которые перебивают общие правила. Здесь собрано то,
   что ломалось на телефоне: пустота в навбаре, панель фильтров,
   перекрытие панелей в кабинете, слишком заметный фон.
   ============================================================ */

/* ---------- НАВБАР ---------- */
@media (max-width: 900px) {
  /* Логотип и панели отступают от края одинаково — раньше логотип
     прижимался к самому краю экрана. */
  #topNav .nav-inner,
  .top-nav .nav-inner {
    margin-left: 12px !important;
    margin-right: 12px !important;
    padding: 8px 10px !important;
  }
  #topNav .nav-logo,
  .top-nav .nav-logo { margin-left: 4px !important; }

  /* Пустота левее кнопки входа: её давали скрытые кнопки соцсетей
     и контактов — они не показаны, но занимали отступы группы. */
  #topNav .nav-meta-wrap,
  .top-nav .nav-meta-wrap,
  .nav-meta-wrap {
    padding: 0 !important;
    gap: 8px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  /* скрытые кнопки соцсетей и контактов оставляли свои отступы —
     отсюда и пустое место левее кнопки входа */
  #topNav .nav-meta-wrap .nav-meta.meta-socials,
  #topNav .nav-meta-wrap .nav-meta.meta-contacts,
  .nav-meta-wrap .nav-meta.meta-socials,
  .nav-meta-wrap .nav-meta.meta-contacts {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 0 !important;
    border: 0 !important;
  }
  #topNav .nav-meta-wrap .nav-auth,
  #topNav .nav-meta-wrap .nav-account,
  .nav-meta-wrap .nav-auth,
  .nav-meta-wrap .nav-account { margin-left: 0 !important; }
}

/* ---------- ФОН-ПЛИТКА ----------
   На маленьком экране узор перетягивал на себя внимание: текста мало,
   фона много. Делаем его заметно тише. */
@media (max-width: 900px) {
  .fsi-bg-layer, .fsi-bg-seg { opacity: .10 !important; }
  .fsi-tile-seg.in, .fsi-tile-seg.done { opacity: .10 !important; }
}

/* ---------- МАГАЗИН: ФИЛЬТРЫ ----------
   Панель должна лежать за краем экрана и выезжать только по кнопке.
   У страницы свои медиазапросы, поэтому задаём положение жёстко. */
@media (max-width: 860px) {
  .shop-sidebar {
    position: fixed !important;
    top: 0 !important; left: 0 !important; bottom: 0 !important;
    width: min(88%, 340px) !important;
    max-width: none !important;
    z-index: 4600 !important;
    margin: 0 !important;
    border-radius: 0 16px 16px 0 !important;
    transform: translateX(-102%) !important;
    transition: transform .32s cubic-bezier(.22, .9, .41, 1) !important;
    overflow-y: auto !important;
    padding: 56px 16px 24px !important;
  }
  body .shop-sidebar.open,
  .shop-sidebar.open { transform: none !important; opacity: 1 !important; }
  /* панель не должна попадать под общий эффект появления блоков:
     он оставлял ей свой сдвиг и она не выезжала */
  .shop-sidebar.fsi-pv { opacity: 1 !important; }
  .sidebar-close { display: flex !important; }

  /* затемнение только когда панель открыта */
  .shop-backdrop {
    position: fixed !important; inset: 0 !important; z-index: 4550 !important;
    background: rgba(8, 5, 16, .55) !important;
    opacity: 0 !important; pointer-events: none !important;
    transition: opacity .28s ease !important;
  }
  .shop-backdrop.show { opacity: 1 !important; pointer-events: auto !important; }

  /* кнопка вызова фильтров — обычная кнопка в потоке */
  .filters-toggle {
    display: flex !important; width: 100% !important;
    align-items: center; justify-content: center; gap: 8px;
  }
  .shop-layout { grid-template-columns: 1fr !important; }
}

/* ---------- КАБИНЕТ ----------
   Вкладки и содержимое идут друг за другом, а не накладываются. */
@media (max-width: 860px) {
  .acc-shell, .acc-shell.show {
    display: block !important;
    grid-template-columns: 1fr !important;
  }
  .acc-side {
    position: static !important;
    width: auto !important;
    margin: 0 0 16px !important;
    display: block !important;
  }
  .acc-tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .acc-tab-btn {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
    justify-content: center !important;
    text-align: center;
  }
  .acc-content {
    position: static !important;
    width: auto !important;
    margin: 0 !important;
    clear: both;
  }
  .acc-pane { width: auto !important; }
  .av-grid { justify-content: center; }
}

/* ---------- общее для узких экранов ---------- */
@media (max-width: 560px) {
  .acc-tab-btn { flex: 1 1 100% !important; }
}