/* Exclusive Fara — UI-слой 18.10.2026
   Быстрые ссылки разделов, фильтр каталога, компактные карточки
   «Ранее вы смотрели» / «Похожие», мобильное меню каталога, H1 карточки.
   Подключается из /include/fc-seo-head.php. */

:root {
  --fc-red: #e0263c;
  --fc-red-dark: #c31529;
  --fc-ink: #1b1f27;
  --fc-line: #eceef3;
  --fc-muted: #7a8190;
}

/* ---------- 1. Быстрые ссылки сверху раздела ---------- */

.fc-quick {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 16px;
  font-size: 13px;
}
.fc-quick__label {
  margin-right: 2px;
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fc-muted);
  white-space: nowrap;
}
.fc-quick a {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  max-width: 100%;
  padding: 8px 13px;
  border: 1px solid #e4e7ee;
  border-radius: 999px;
  background: #fff;
  color: #2a2f38;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.15;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}
.fc-quick a:hover,
.fc-quick a:focus-visible {
  border-color: #f2b9c1;
  background: #fff5f6;
  color: var(--fc-red-dark);
  box-shadow: 0 2px 8px rgba(224, 38, 60, .08);
}
.fc-quick a.is-active {
  border-color: var(--fc-red);
  background: var(--fc-red);
  color: #fff;
  box-shadow: 0 6px 16px rgba(224, 38, 60, .22);
}
.fc-quick a.fc-quick__more {
  border-style: dashed;
  color: var(--fc-red-dark);
}

/* Старый блок «лэндингов» Aspro дублирует навигацию и часто содержит
   случайные ссылки (один и тот же «X3 2021» на разных моделях).
   Скрываем его только там, где уже есть наши быстрые ссылки. */
.top-content-block:has(.fc-quick) .landings-list { display: none !important; }

/* На модели/подразделе карточки подразделов дублируют чипы и выглядят
   пустыми (у разделов нет превью), поэтому оставляем только чипы.
   Сетку моделей на странице марки не трогаем. */
.top-content-block:has(.fc-quick--model) .section-block,
.top-content-block:has(.fc-quick--sub) .section-block { display: none !important; }

@media (max-width: 575px) {
  .fc-quick {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    margin: 0 0 12px;
    padding: 2px 2px 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .fc-quick::-webkit-scrollbar { display: none; }
  .fc-quick a { padding: 7px 11px; font-size: 12.5px; }
  .fc-quick__label { font-size: 10px; }
}

/* ---------- 2. Фильтр каталога ---------- */

.bx_filter .bx_filter_section,
.bx_filter .bx_filter_parameters_box { background: #fff; }

.bx_filter .bx_filter_parameters_box > .bx_filter_parameters_box_title:not(.filter_title) {
  color: var(--fc-ink) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -.01em;
}
.bx_filter .bx_filter_parameters_box_title.filter_title { color: var(--fc-ink) !important; }

.bx_filter .bx_filter_parameters_box .bx_filter_parameters_box_title .svg-inline-down { color: #9aa1b0; }

.bx_filter .bx_filter_param_label {
  margin: 0 0 6px !important;
  padding: 3px 0 3px 32px !important;
  color: #3a414d !important;
  font-size: 14px !important;
  line-height: 20px !important;
  cursor: pointer;
}
.bx_filter .bx_filter_param_label::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  top: 2px !important;
  width: 20px !important;
  height: 20px !important;
  box-sizing: border-box !important;
  border: 1.5px solid #d6dae3 !important;
  border-radius: 6px !important;
  background: #fff !important;
  transition: background .14s ease, border-color .14s ease;
}
.bx_filter .bx_filter_param_label::after { display: none !important; }
.bx_filter .bx_filter_param_label:hover::before { border-color: #b9c0cc !important; }
.bx_filter .bx_filter_param_label:has(input:checked)::before {
  border-color: var(--fc-red) !important;
  background: var(--fc-red) !important;
}
.bx_filter .bx_filter_param_label:has(input:checked)::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  top: 2px !important;
  width: 20px !important;
  height: 20px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.3l2.7 2.7 6.2-6.3' fill='none' stroke='%23fff' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat !important;
}
.bx_filter .bx_filter_param_text { color: inherit !important; font-size: 14px !important; }
.bx_filter .bx_filter_input_checkbox { min-height: 20px !important; }

.bx_filter input[type="text"],
.bx_filter .form-control {
  height: 38px !important;
  border: 1px solid #e2e5ec !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.bx_filter .filter-bnt-wrapper {
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom)) !important;
  border-top: 1px solid var(--fc-line) !important;
  background: #fff !important;
}
.bx_filter .bx_filter_search_button {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 16px 18px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #f0475a 0%, var(--fc-red) 45%, var(--fc-red-dark) 100%) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: 0 10px 24px rgba(224, 38, 60, .24) !important;
}
.bx_filter .bx_filter_search_reset {
  padding: 10px 14px !important;
  border: 1px solid var(--fc-line) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #5c6472 !important;
  font-size: 13px !important;
}

@media (min-width: 992px) {
  /* фильтр в строке над товарами — те же «таблетки», что и быстрые ссылки */
  .filter-compact-block .bx_filter .bx_filter_parameters_box { padding: 0 !important; background: none !important; }
  .filter-compact-block .bx_filter .bx_filter_parameters_box_title:not(.filter_title) {
    padding: 8px 14px !important;
    border: 1px solid #e6e8ee !important;
    border-radius: 999px !important;
    background: #fff !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #2a2f38 !important;
    transition: border-color .16s ease, color .16s ease, background .16s ease;
  }
  .filter-compact-block .bx_filter .bx_filter_parameters_box_title:not(.filter_title):hover {
    border-color: #f2b9c1 !important;
    color: var(--fc-red-dark) !important;
  }
  .filter-compact-block .bx_filter .bx_filter_param_label { margin: 0 !important; padding: 0 0 0 28px !important; }
  .filter-compact-block .bx_filter .bx_filter_param_label::before,
  .filter-compact-block .bx_filter .bx_filter_param_label:has(input:checked)::after { top: 0 !important; }

  .left_block .bx_filter.bx_filter_vertical {
    overflow: hidden;
    border: 1px solid var(--fc-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(20, 24, 34, .05);
  }
  .left_block .bx_filter .bx_filter_parameters_box { padding: 14px 16px; }
  .left_block .bx_filter .filter-bnt-wrapper { padding: 12px 16px !important; }
}

@media (max-width: 991px) {
  /* кнопка-триггер фильтра — в одном стиле с чипами */
  .filter-panel__filter .bx-filter-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px !important;
    border: 1px solid #e6e8ee;
    border-radius: 999px;
    background: #fff;
  }
  .filter-panel__filter .bx-filter-title .font_upper_md { font-size: 12px; letter-spacing: .06em; }
  .filter-panel__filter .bx-filter-title .svg-inline-icon svg path { fill: var(--fc-red); }

  .bx_filter.bx_filter_vertical {
    overflow: hidden;
    border-radius: 0 18px 18px 0;
    box-shadow: 0 30px 70px rgba(15, 20, 30, .22);
  }
  .bx_filter .bx_filter_parameters_box { padding: 14px 18px 16px !important; }
  .bx_filter .bx_filter_parameters_box.title { padding: 18px 18px !important; border-bottom: 1px solid var(--fc-line); }
  .bx_filter .bx_filter_parameters_box.title .filter_title { font-size: 16px !important; font-weight: 700 !important; }
}

/* ---------- 3. Компактные карточки «Ранее вы смотрели» / «Похожие» ---------- */

@media (max-width: 575px) {
  .viewed_product_block .viewed-wrapper h3,
  .similar_product_block h3,
  .bigdata-wrapper .subtitle {
    margin-bottom: 10px !important;
    font-size: 17px !important;
    line-height: 1.25 !important;
  }

  /* слайдер превращаем в сетку 2×N — как карточки в каталоге */
  .viewed_product_block .block-items.owl-carousel .owl-stage,
  .similar_product_block .block-items.owl-carousel .owl-stage,
  .bigdata-wrapper .block-items.owl-carousel .owl-stage {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100% !important;
    transform: none !important;
    align-items: start;
  }
  .viewed_product_block .block-items.owl-carousel .owl-item,
  .similar_product_block .block-items.owl-carousel .owl-item,
  .bigdata-wrapper .block-items.owl-carousel .owl-item {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
  }
  .viewed_product_block .block-items.owl-carousel .owl-item.cloned,
  .similar_product_block .block-items.owl-carousel .owl-item.cloned,
  .bigdata-wrapper .block-items.owl-carousel .owl-item.cloned { display: none !important; }

  /* стрелки и точки не нужны: все товары видны сразу */
  .viewed_product_block .block-items.owl-carousel .owl-nav,
  .viewed_product_block .block-items.owl-carousel .owl-dots,
  .similar_product_block .block-items.owl-carousel .owl-nav,
  .similar_product_block .block-items.owl-carousel .owl-dots,
  .bigdata-wrapper .block-items.owl-carousel .owl-nav,
  .bigdata-wrapper .block-items.owl-carousel .owl-dots { display: none !important; }

  .viewed_product_block .block-item,
  .similar_product_block .block-item,
  .bigdata-wrapper .block-item { border-radius: 12px !important; height: 100%; }

  .viewed_product_block .block-item__inner,
  .similar_product_block .block-item__inner,
  .bigdata-wrapper .block-item__inner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 5px !important;
    height: 100% !important;
    padding: 8px 8px 10px !important;
    text-align: left !important;
  }
  .viewed_product_block .block-item__info,
  .similar_product_block .block-item__info,
  .bigdata-wrapper .block-item__info {
    padding: 0 !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto;
  }
  .viewed_product_block .block-item__image,
  .similar_product_block .block-item__image,
  .bigdata-wrapper .block-item__image {
    width: 100% !important;
    flex: 0 0 auto !important;
    height: 66px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
  }
  .viewed_product_block .block-item__image img,
  .similar_product_block .block-item__image img,
  .bigdata-wrapper .block-item__image img {
    width: auto !important;
    max-width: 100% !important;
    max-height: 64px !important;
  }
  .viewed_product_block .block-item__title,
  .similar_product_block .block-item__title,
  .bigdata-wrapper .block-item__title {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }
  .viewed_product_block .block-item__title a,
  .similar_product_block .block-item__title a,
  .bigdata-wrapper .block-item__title a {
    display: -webkit-box;
    overflow: hidden;
    font-size: 11.5px !important;
    line-height: 1.28 !important;
    text-align: left !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .viewed_product_block .block-item__cost,
  .similar_product_block .block-item__cost,
  .bigdata-wrapper .block-item__cost {
    margin-top: 2px !important;
    font-size: 13px !important;
    text-align: left !important;
  }

  /* служебные кнопки карточек в рекомендациях только раздувают блок */
  .viewed_product_block .js-info-block,
  .viewed_product_block .more-btn,
  .viewed_product_block .sa_block,
  .similar_product_block .js-info-block,
  .similar_product_block .more-btn,
  .similar_product_block .sa_block,
  .bigdata-wrapper .js-info-block,
  .bigdata-wrapper .more-btn,
  .bigdata-wrapper .sa_block { display: none !important; }
}

/* ---------- 4. Мобильное меню каталога ---------- */

@media (max-width: 991px) {
  /* верхний уровень: плотные строки */
  .mobilemenu-v1 .top-mobile-menu > ul.top > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 46px;
    padding: 11px 15px !important;
    color: var(--fc-ink);
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -.01em;
    text-decoration: none;
  }
  .mobilemenu-v1 .top-mobile-menu > ul.top > li + li > a { border-top: 1px solid #f1f2f6; }
  .mobilemenu-v1 .top-mobile-menu > ul.top > li > a:active { background: #f7f8fa; }
  .mobilemenu-v1 .top-mobile-menu > ul.top > li.selected > a {
    color: var(--fc-red-dark);
    background: #fff5f6;
    box-shadow: inset 3px 0 0 var(--fc-red);
  }

  /* стрелка в круге — крупнее цель, спокойнее вид */
  .mobilemenu-v1 .top-mobile-menu .arrow:not(.menu_back .arrow) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: auto;
    border-radius: 50%;
    background: #f5f6f9;
  }
  .mobilemenu-v1 .top-mobile-menu .arrow .svg { width: 11px; height: 11px; opacity: .5; }
  .mobilemenu-v1 .top-mobile-menu > ul.top > li.selected > a .arrow { background: #ffe3e7; }
  .mobilemenu-v1 .top-mobile-menu > ul.top > li.selected > a .arrow .svg { opacity: .9; }

  /* Каталог в мобильном меню: по одной марке в строке — логотип слева, название справа */
  .mobilemenu-v1 .top-mobile-menu li.expanded > ul.dropdown:has(> li > a.top-mobile-menu__link) {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 10px 12px 18px !important;
    background: #f7f8fa;
  }
  .mobilemenu-v1 .top-mobile-menu li.expanded > ul.dropdown:has(> li > a.top-mobile-menu__link) > li.menu_back,
  .mobilemenu-v1 .top-mobile-menu li.expanded > ul.dropdown:has(> li > a.top-mobile-menu__link) > li.menu_title { grid-column: 1 / -1; }
  /* шапка подменю «Назад / Каталог» без дефолтных отступов шаблона */
  .mobilemenu-v1 .top-mobile-menu li.expanded > ul.dropdown:has(> li > a.top-mobile-menu__link) > li.menu_title {
    padding: 4px 2px 2px !important;
    margin: 0 !important;
    background: transparent !important;
  }
  .mobilemenu-v1 .top-mobile-menu li.expanded > ul.dropdown:has(> li > a.top-mobile-menu__link) > li.menu_title > a {
    min-height: 0 !important;
    padding: 4px 0 6px !important;
  }
  .mobilemenu-v1 .top-mobile-menu li.expanded > ul.dropdown:has(> li > a.top-mobile-menu__link) > li.menu_back { margin: 0 0 2px !important; }

  .mobilemenu-v1 .top-mobile-menu a.top-mobile-menu__link {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    height: 100%;
    min-height: 56px;
    padding: 6px 10px !important;
    border: 1px solid #eceef3;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(20, 24, 34, .04);
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .mobilemenu-v1 .top-mobile-menu a.top-mobile-menu__link:active {
    border-color: #f2b9c1;
    box-shadow: 0 4px 12px rgba(224, 38, 60, .1);
  }
  .mobilemenu-v1 .top-mobile-menu a.top-mobile-menu__link .top-mobile-menu__title {
    display: block !important;
    color: #2a2f38;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
  }
  .mobilemenu-v1 .top-mobile-menu a.top-mobile-menu__link .top-mobile-menu__image {
    flex: 0 0 64px;
    width: 64px !important;
    height: 44px !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f4f6fa;
  }
  .mobilemenu-v1 .top-mobile-menu a.top-mobile-menu__link .top-mobile-menu__image img {
    max-width: 56px;
    max-height: 40px;
    width: auto;
    height: auto;
    object-fit: contain;
  }
  .mobilemenu-v1 .top-mobile-menu a.top-mobile-menu__link .arrow { display: none !important; }

  /* без :has (старые браузеры) — привычные строки, ничего не ломаем */
  @supports not (selector(:has(*))) {
    .mobilemenu-v1 .top-mobile-menu a.top-mobile-menu__link .top-mobile-menu__title { display: inline !important; }
    .mobilemenu-v1 .top-mobile-menu a.top-mobile-menu__link .arrow { display: flex !important; }
    .mobilemenu-v1 .top-mobile-menu a.top-mobile-menu__link {
      flex-direction: row;
      justify-content: flex-start;
      gap: 10px;
      min-height: 46px;
      padding: 11px 15px !important;
      border: 0;
      border-radius: 0;
      box-shadow: none;
    }
  }

  /* второй уровень (модели) — компактные строки с разделителями */
  .mobilemenu-v1 .top-mobile-menu ul.dropdown > li > a:not(.top-mobile-menu__link) {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 11px 15px !important;
    color: #2a2f38;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
  }
  .mobilemenu-v1 .top-mobile-menu ul.dropdown > li + li > a:not(.top-mobile-menu__link) { border-top: 1px solid #f4f5f8; }
  .mobilemenu-v1 .top-mobile-menu .menu_back > a { border-radius: 10px; margin-bottom: 4px;
    color: #4a5261 !important;
    font-size: 12px !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    background: #f1f3f7;
  }
  .mobilemenu-v1 .top-mobile-menu .menu_title > a {
    font-size: 11px !important;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--fc-red-dark) !important;
  }

  /* служебные строки меню (кабинет, корзина, телефон) — чуть компактнее */
  .mobilemenu-v1 .menu.middle > ul > li > a { padding: 11px 15px !important; font-size: 13.5px; }
  .mobilemenu-v1 .contacts { padding: 12px 15px 6px; }
  .mobilemenu-v1 .contacts .title { margin-bottom: 6px; font-size: 11px; letter-spacing: .06em; }
  .mobilemenu-v1 .social-icons { padding: 6px 15px 12px; }
}

/* ---------- 5. H1 карточки товара на мобильном ---------- */

@media (max-width: 575px) {
  body.detail_page #pagetitle,
  body.detail_page h1 {
    font-size: 22px !important;
    line-height: 1.26 !important;
    letter-spacing: -.01em !important;
  }
  body.detail_page .topic__heading { padding-right: 0 !important; }
}
/* ---------- 6. Модели внутри марки в мобильном меню ---------- */

@media (max-width: 991px) {
  /* второй уровень каталога: 2 модели в ряд, картинка + короткое название */
  .mobilemenu-v1 .top-mobile-menu ul.dropdown ul.dropdown:has(> li > a.top-mobile-menu__link) {
    padding: 10px 12px 18px !important;
    background: #f7f8fa;
  }
  .mobilemenu-v1 .top-mobile-menu ul.dropdown ul.dropdown:has(> li > a.top-mobile-menu__link) > li > a.top-mobile-menu__link {
    min-height: 92px;
    padding: 9px 6px 10px !important;
  }
  .mobilemenu-v1 .top-mobile-menu ul.dropdown ul.dropdown:has(> li > a.top-mobile-menu__link) > li > a.top-mobile-menu__link .top-mobile-menu__image img {
    max-width: 74px;
    max-height: 46px;
  }
  .mobilemenu-v1 .top-mobile-menu ul.dropdown ul.dropdown:has(> li > a.top-mobile-menu__link) > li > a.top-mobile-menu__link .top-mobile-menu__title {
    display: -webkit-box !important;
    margin-top: 4px;
    overflow: hidden;
    color: #3a414d;
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}
/* ---------- 7. Поиск и алфавит над сеткой марок (/catalog/) ---------- */

.fc-brands-bar {
  position: relative;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0 0 14px;
}
.fc-brands-search { position: relative; display: flex; }
.fc-brands-search input {
  width: 100%;
  height: 44px;
  padding: 0 14px 0 40px;
  border: 1px solid #e4e7ee;
  border-radius: 12px;
  background: #fff;
  color: var(--fc-ink);
  font-size: 14px;
  line-height: 1;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.fc-brands-search input::placeholder { color: #9aa1b0; }
.fc-brands-search input:focus {
  border-color: #f2b9c1;
  box-shadow: 0 0 0 3px rgba(224, 38, 60, .08);
}
.fc-brands-search::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8190' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}
.fc-brands-alpha {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1px 1px 3px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.fc-brands-alpha::-webkit-scrollbar { display: none; }
.fc-brands-alpha button {
  flex: 0 0 auto;
  min-width: 30px;
  height: 30px;
  padding: 0 9px;
  border: 1px solid #e4e7ee;
  border-radius: 999px;
  background: #fff;
  color: #3a414d;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.fc-brands-alpha button:hover { border-color: #f2b9c1; color: var(--fc-red-dark); }
.fc-brands-alpha button.is-active {
  border-color: var(--fc-red);
  background: var(--fc-red);
  color: #fff;
}
.fc-brands-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: 560px;
  margin: 4px auto 18px;
  padding: 22px 18px;
  border: 1px dashed #e4e7ee;
  border-radius: 16px;
  background: #fafbfd;
  color: var(--fc-muted);
  font-size: 13px;
  text-align: center;
}
.fc-brands-empty b { color: var(--fc-ink); font-size: 14.5px; font-weight: 600; }
.fc-brands-empty span { max-width: 36ch; line-height: 1.45; }
/* в пустом состоянии показываем модели, найденные по русскому запросу */
.fc-brands-empty__models {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 10px 0 2px;
  max-width: 100%;
}
.fc-brands-empty__models[hidden] { display: none !important; }
.fc-brands-empty__model {
  display: inline-flex;
  align-items: baseline;
  max-width: 100%;
  text-align: left;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid #eceef4;
  border-radius: 999px;
  background: #fff;
  color: var(--fc-ink);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
.fc-brands-empty__model b {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--fc-muted);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.fc-brands-empty__model:hover { border-color: #f2b9c1; color: var(--fc-red-dark); }
.fc-brands-reset {
  margin-top: 8px;
  padding: 9px 16px;
  border: 1px solid #f2b9c1;
  border-radius: 999px;
  background: #fff;
  color: var(--fc-red-dark);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.fc-brands-reset:hover { border-color: var(--fc-red); background: var(--fc-red); color: #fff; }
.fc-brands-reset:active { transform: scale(.97); }
.catalog_section_list.fc-cards .item_block.fc-hidden { display: none !important; }

@media (min-width: 992px) {
  .fc-brands-bar { flex-direction: row; align-items: center; gap: 12px; }
  .fc-brands-search { flex: 0 1 260px; }
  .fc-brands-alpha { flex: 1 1 auto; flex-wrap: wrap; overflow-x: visible; gap: 5px; }
  .fc-brands-alpha button { min-width: 28px; padding: 0 8px; }
}

/* ---------- 8. Поиск марки в мобильном меню ---------- */

.mobilemenu-v1 .top-mobile-menu li.fc-mm-search {
    grid-column: 1 / -1;
    margin: 0 0 2px !important;
    padding: 0 !important;
    list-style: none;
  }
  .mobilemenu-v1 .top-mobile-menu li.fc-mm-search input {
    width: 100%;
    height: 38px;
    padding: 0 12px 0 36px;
    border: 1px solid #e4e7ee;
    border-radius: 10px;
    background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8190' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") 12px 50% / 14px 14px no-repeat;
    color: var(--fc-ink);
    font-size: 13.5px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
  }
  .mobilemenu-v1 .top-mobile-menu li.fc-mm-search input:focus {
    border-color: #f2b9c1;
    box-shadow: 0 0 0 3px rgba(224, 38, 60, .08);
  }
  .mobilemenu-v1 .top-mobile-menu li.fc-mm-empty {
    grid-column: 1 / -1;
    padding: 10px 4px !important;
    color: var(--fc-muted);
    font-size: 12.5px;
    list-style: none;
  }
  .mobilemenu-v1 .top-mobile-menu li.fc-hidden { display: none !important; }

/* [hidden] проигрывает шаблонным правилам display у li — гасим пустое состояние явно */
.mobilemenu-v1 .top-mobile-menu li.fc-mm-empty[hidden],
.fc-brands-empty[hidden] { display: none !important; }

/* ---------- 9. Мобильный каталог: липкая панель и аккуратные карточки марок ---------- */
/* .catalog_page — это .right_block страницы каталога (на body такого класса нет).
   CSS разделов печатается в <body> ПОСЛЕ fc-ui.css, поэтому на равной специфичности
   его правила побеждают: там, где оно пересекается, ставим !important. */

@media (max-width: 575px) {
  .catalog_page #pagetitle { font-size: 24px !important; line-height: 1.2; margin: 0 0 8px !important; }
  .catalog_page .breadcrumbs { margin-bottom: 10px !important; font-size: 11.5px !important; }

  /* панель поиска и букв: во всю ширину, прилипает под шапкой */
  .fc-brands-bar {
    position: sticky;
    top: 63px;
    z-index: 40;
    gap: 8px;
    margin: 0 -16px 12px;
    padding: 9px 16px 10px;
    background: rgba(255, 255, 255, .97);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #eef0f5;
    transition: box-shadow .18s ease;
  }
  .fc-brands-bar.is-stuck { box-shadow: 0 10px 24px rgba(20, 24, 32, .10); }

  .fc-brands-search input {
    height: 42px;
    padding: 0 14px 0 38px;
    border-radius: 12px;
    font-size: 16px; /* iOS не приближает страницу при фокусе */
  }
  .fc-brands-search::before { left: 13px; width: 15px; height: 15px; }

  .fc-brands-alpha { gap: 6px; padding: 1px 1px 3px; scroll-snap-type: x proximity; }
  .fc-brands-alpha.is-scrollable {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
  }
  .fc-brands-alpha.is-end { -webkit-mask-image: none; mask-image: none; }
  .fc-brands-alpha button {
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border-color: #e8eaf1;
    border-radius: 12px;
    font-size: 13px;
    scroll-snap-align: center;
    box-shadow: 0 1px 2px rgba(20, 24, 32, .04);
  }
  .fc-brands-alpha button.is-active {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(224, 38, 60, .28);
  }
  .fc-brands-alpha button:active { transform: scale(.96); }

  .fc-brands-empty { margin: 6px 0 14px; padding: 18px 14px; border-radius: 14px; font-size: 12.5px; }
  .fc-brands-empty b { font-size: 14px; }
  .fc-brands-reset { margin-top: 6px; padding: 8px 15px; }

  /* карточки марок: ровная сетка, мягкие плитки, отклик на нажатие */
  .catalog_page .catalog_section_list.fc-cards { gap: 10px !important; margin-top: 2px !important; }
  .catalog_page .fc-cards .section_item {
    border-radius: 14px !important;
    border-color: #eef0f5 !important;
    box-shadow: 0 1px 2px rgba(20, 24, 32, .05) !important;
    transition: transform .12s ease, box-shadow .12s ease;
  }
  .catalog_page .fc-cards .section_item:active {
    transform: scale(.985);
    box-shadow: 0 4px 14px rgba(20, 24, 32, .12) !important;
  }
  .catalog_page .fc-cards .thumb { height: 88px !important; padding: 10px !important; background: linear-gradient(180deg, #fafbfd, #f1f3f8) !important; }
  .catalog_page .fc-cards .thumb img { max-height: 68px !important; }
  .catalog_page .fc-cards td.section_info { padding: 9px 8px 11px !important; }
  .catalog_page .fc-cards li.name .font_md {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.25;
    letter-spacing: -.01em;
  }

  /* поиск в мобильном меню — в том же ритме, без зума на iOS */
  .mobilemenu-v1 .top-mobile-menu li.fc-mm-search input {
    height: 42px;
    padding: 0 12px 0 38px;
    border-radius: 12px;
    font-size: 16px;
  }
}

/* ---------- 10. Живой поиск: подсказки и анимация карточек ---------- */

.fc-brands-suggest {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  left: 0;
  right: auto;
  min-width: 100%;
  width: max-content;
  max-width: min(92vw, 420px);
  max-height: min(56vh, 380px);
  overflow-y: auto;
  padding: 6px;
  border: 1px solid #eceef5;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(20, 24, 32, .16);
  animation: fcSuggestIn .18s ease-out both;
}
@keyframes fcSuggestIn {
  from { opacity: 0; transform: translateY(-6px) scale(.99); }
  to { opacity: 1; transform: none; }
}
.fc-brands-suggest__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--fc-ink);
  font-size: 14px;
  line-height: 1.3;
  text-decoration: none;
  animation: fcSuggestItem .22s ease-out both;
}
@keyframes fcSuggestItem {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.fc-brands-suggest__item:hover,
.fc-brands-suggest__item.is-active { background: #fff3f5; color: var(--fc-ink); }
.fc-brands-suggest__item.is-active { box-shadow: inset 0 0 0 1px rgba(224, 38, 60, .16); }
.fc-brands-suggest__logo { flex: 0 0 auto; width: 28px; height: 28px; object-fit: contain; }
.fc-brands-suggest__logo--blank { border-radius: 8px; background: #f4f6fa; }
.fc-brands-suggest__text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.fc-brands-suggest__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* товар в подсказках: название в две строки, иконка вместо логотипа марки */
.fc-brands-suggest__item.is-product .fc-brands-suggest__name {
  display: -webkit-box;
  white-space: normal;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.25;
}
.fc-brands-suggest__logo--product {
  background: #f4f6fa url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a90a0' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7.5 12 3l8.5 4.5v9L12 21l-8.5-4.5z'/%3E%3Cpath d='M3.5 7.5 12 12l8.5-4.5M12 12v9'/%3E%3C/svg%3E") center / 17px 17px no-repeat;
}
.fc-brands-suggest__sub { margin-top: 1px; color: #8a90a0; font-size: 11px; line-height: 1.2; }
.fc-brands-suggest__wait { padding: 10px 12px; color: #8a90a0; font-size: 12.5px; line-height: 1.3; }
.fc-brands-suggest__name b { color: var(--fc-red-dark); font-weight: 700; }
.fc-brands-suggest__count {
  flex: 0 0 auto;
  padding: 1px 8px;
  border-radius: 100px;
  background: #f4f6fa;
  color: #6b7280;
  font-size: 11.5px;
  font-weight: 600;
}

/* карточки марок: плавно уходят и появляются при живом поиске */
.fc-cards .item_block { transition: opacity .16s ease, transform .16s ease; }
.fc-cards .item_block.fc-vanish { opacity: 0; transform: scale(.96); }
.fc-cards .item_block.fc-appear { animation: fcCardIn .24s ease-out both; }
@keyframes fcCardIn {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 575px) {
  .fc-brands-suggest { width: 100%; max-width: none; max-height: 46vh; border-radius: 12px; }
  .fc-brands-suggest__item { padding: 9px 10px; font-size: 14.5px; }
  /* пока открыты подсказки, плавающая кнопка звонка не перекрывает список */
  body.fc-suggest-open .fc-call { visibility: hidden; pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fc-brands-suggest,
  .fc-brands-suggest__item,
  .fc-cards .item_block.fc-appear { animation: none !important; }
  .fc-cards .item_block { transition: none !important; }
}

/* ---------- 9. Марки на телефоне: одна карточка в строку ---------- */
/* Просьба: на /catalog/ карточки марок выстроить в один столбец,
   логотип слева, название и количество позиций справа.
   Правила с !important перекрывают мобильный блок из fc-section-lib.php. */
@media (max-width: 575px) {
  body .catalog_section_list.fc-cards { grid-template-columns: 1fr !important; gap: 8px !important; margin-top: 6px !important; }
  body .fc-cards .section_item { height: auto !important; display: block !important; border-radius: 14px !important; padding: 0 !important; }
  body .fc-cards table.section_item_inner,
  body .fc-cards table.section_item_inner tbody { display: block !important; width: 100% !important; }
  body .fc-cards table.section_item_inner tr {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    height: auto !important;
  }
  body .fc-cards td.image { flex: 0 0 96px !important; width: 96px !important; padding: 0 !important; display: block !important; }
  body .fc-cards .thumb {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 96px !important;
    height: 64px !important;
    padding: 8px !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, #f7f8fb, #eef1f7);
  }
  body .fc-cards .thumb img { max-width: 80px !important; max-height: 48px !important; width: auto !important; height: auto !important; }
  body .fc-cards td.section_info {
    flex: 1 1 auto !important;
    display: block !important;
    width: auto !important;
    min-width: 0;
    padding: 12px 14px 12px 12px !important;
    text-align: left !important;
  }
  body .fc-cards .section_info ul { width: 100% !important; margin: 0 !important; padding: 0 !important; }
  body .fc-cards li.name {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    margin: 0 !important;
  }
  body .fc-cards li.name .font_md { font-size: 14px !important; line-height: 1.25 !important; white-space: normal !important; }
  body .fc-cards .element-count { display: inline-flex !important; align-items: center; flex: 0 0 auto; }
  body .fc-cards li.sect { display: none !important; }
}

/* ---------- 10. «Возможно, вы имели в виду» на пустой выдаче ---------- */
.fc-search-dym {
  margin: 0 0 18px;
  padding: 16px 18px;
  border: 1px solid var(--fc-line);
  border-radius: 12px;
  background: #fafbfd;
}

.fc-search-dym__title {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--fc-ink);
}

.fc-search-dym__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fc-search-dym__item {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid var(--fc-line);
  border-radius: 9px;
  background: #fff;
  color: var(--fc-ink);
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
  transition: border-color .15s, color .15s, box-shadow .15s;
}

.fc-search-dym__item b {
  color: var(--fc-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.fc-search-dym__item:hover,
.fc-search-dym__item:focus {
  border-color: var(--fc-red);
  color: var(--fc-red-dark);
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(224, 38, 60, .08);
}

.fc-search-dym__item:hover b,
.fc-search-dym__item:focus b { color: var(--fc-red); }

@media (max-width: 575px) {
  .fc-search-dym { padding: 14px; }
  .fc-search-dym__list { flex-direction: column; align-items: stretch; }
  .fc-search-dym__item { justify-content: flex-start; }
}
