/* V12 chrome (как V11):
   Mobile каталог: document scroll, хедер relative (уезжает), чипы sticky, бар fixed.
   Mobile лот: хедер sticky. Desktop: sticky header + document scroll.
   Shell держит один DOM хедера/бара между табами — без remount при catalog↔catalog.
   Safe-area заморожен JS (ratchet) → --v12-nav-safe / --v10-nav-safe в px.
   Бар: height=--v12-nav-h (4rem) + padding-bottom=safe (content-box).
   --v12-nav-total = 4rem+safe — только для scroll-padding / резерва контента. */

html {
  --v12-header-h: 4rem;
  --v12-header-total: calc(var(--v12-header-h) + 1px);
  /* Desktop chrome: разделы теперь в одной строке с логотипом и поиском. */
  --v12-header-desk-h: 4rem;
  --v12-header-desk-total: calc(var(--v12-header-desk-h) + 1px);
  --v12-nav-h: 4rem;
  --v12-nav-safe: 0px;
  --v12-nav-total: calc(var(--v12-nav-h) + var(--v12-nav-safe));
  /*
    Всегда scroll-track + gutter + единый moto-scrollbar.css (10px):
    ширина хедера стабильна между страницами (заглушка stock тоже).
  */
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

/* Фон совпадает с темой, чтобы во время сборки оболочки не было вспышки. */
html.v12-page {
  background: #ffffff;
}
html.v12-page.dark {
  background: #0f172a;
}

/* Прячем контент, пока JS не соберёт хедер + нижний бар.
   Показываем всё одним кадром → нет мелькания «скелетон без бара». */
body.v12-page {
  opacity: 0;
}
html.v12-ready body.v12-page {
  opacity: 1;
  transition: opacity 0.12s ease;
}

/* Мгновенное подтверждение клика без scale: transform конфликтует со Swiper. */
a.catalog-lot-card.is-navigating {
  opacity: 0.72;
  transition: opacity 0.12s ease;
}

/* Плейсхолдер под хедер занимает размер до выполнения v12-chrome.js. */
#v12-chrome-header {
  display: block;
  min-height: var(--v12-header-total);
}
/* Desktop: слот сразу под однострочный chrome, иначе
   #v12-scroll «прыгает» при замене плейсхолдера на #main-header. */
@media (min-width: 768px) {
  body:not(.home-lab-page) #v12-chrome-header {
    min-height: var(--v12-header-desk-total);
  }
}
/* Плейсхолдер бара не резервирует поток — бар фиксированный (out of flow). */
#v12-chrome-nav {
  display: block;
  min-height: 0;
}

/* Счётчик «N мотоциклов»: резерв высоты до прихода COUNT – иначе сетка
   съезжает вниз на ~24px (CLS 0.01 в логах). */
#total-count-container {
  min-height: 2.5rem;
}
@media (min-width: 768px) {
  #total-count-container {
    min-height: 1.5rem;
  }
}

/* Legacy: лот без bottom-nav. V12 лот теперь с nav + sticky над ним. */
body.v12-no-nav #v12-scroll {
  padding-bottom: calc(
    var(--v8-sticky-bar-height, var(--stock-sticky-bar-height, 6.5rem)) + 1rem
  ) !important;
}

/* ——— Desktop: один chrome-хедер, sticky на ВСЕХ страницах (каталог / stock / лот) ——— */
@media (min-width: 768px) {
  body.v12-page #main-header {
    position: sticky !important;
    top: 0;
    z-index: 50;
    background-color: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    /* desktop experiment 2026-07-23: убрать нижнюю границу хедера */
    border-bottom: none !important;
  }
  html.dark body.v12-page #main-header,
  body.v12-page.dark #main-header {
    background-color: rgba(15, 23, 42, 0.9);
  }
}

/* Лот: те же sticky-правила (mobile тоже) + blur уже задан выше на desktop */
body.v12-lot-page #main-header {
  z-index: 50;
}

body.v12-lot-page #lot-title-mobile-header {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* SSR отдаёт текст лота сразу, а слайды галереи появляются после ответа API.
   Пустой контейнер должен читаться как загрузка, а не как «фото нет». */
@keyframes v12-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

#main-gallery-wrapper:empty {
  width: 100%;
  height: 100%;
  background-color: rgb(229 231 235);
  animation: v12-skeleton-pulse 1.4s ease-in-out infinite;
}

html.dark #main-gallery-wrapper:empty {
  background-color: rgb(51 65 85);
}

@media (max-width: 767px) {
  /* На мобильном нижняя навигация полностью заменяет подвал.
     HTML остаётся в документе для десктопа и поисковых роботов. */
  body.v12-page footer {
    display: none !important;
  }

  body.v12-lot-page #price-block-favorite-strip {
    display: none !important;
  }
}

/* ——— Mobile ———
   Каталог / stock: хедер relative → логотип уезжает, липнут только чипы.
   Лот: хедер sticky (назад / название / избранное).
   Нижний бар fixed. Скроллит документ → pull-to-refresh. */
@media (max-width: 767px) {
  html.v12-page {
    height: auto;
    /* Fixed bottom nav: scrollIntoView / якоря / «доскролл» учитывают бар */
    scroll-padding-bottom: calc(var(--v12-nav-total) + 0.75rem);
  }

  /* ВАЖНО: без overflow-x:hidden — иначе ломается position:sticky у чипов. */
  body.v12-page {
    margin: 0;
    min-height: 100svh;
  }

  /* Каталог / статистика / stock: хедер уезжает со скроллом (только mobile) */
  body.v12-page:not(.v12-lot-page) #main-header {
    position: relative !important;
    top: auto;
    z-index: 30;
    background-color: #ffffff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html.dark body.v12-page:not(.v12-lot-page) #main-header,
  body.v12-page.dark:not(.v12-lot-page) #main-header {
    background-color: #0f172a; /* slate-900 */
  }

  /* Карточка лота: хедер остаётся */
  body.v12-lot-page #main-header {
    position: sticky !important;
    top: 0;
    z-index: 50;
    background-color: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  html.dark body.v12-lot-page #main-header,
  body.v12-lot-page.dark #main-header {
    background-color: rgba(15, 23, 42, 0.9);
  }

  /* #v12-scroll — обычный блок, НЕ скроллер (скроллит документ).
     Запас под fixed-бар: футер на mobile display:none, без этого низ контента под баром. */
  body.v12-page #v12-scroll {
    padding-bottom: calc(var(--v12-nav-total) + 1.25rem);
  }

  /* Лот: bottom nav + sticky CTA над ним (высота sticky — из JS) */
  body.v12-lot-page #v12-scroll {
    padding-bottom: calc(
      var(--v12-nav-total) + var(--v8-sticky-bar-height, var(--stock-sticky-bar-height, 56px)) + 10px
    ) !important;
  }

  /* Legacy: лот без nav – только sticky */
  body.v12-no-nav #v12-scroll {
    padding-bottom: calc(
      var(--v8-sticky-bar-height, var(--stock-sticky-bar-height, 56px)) + 1rem
    ) !important;
  }

  /* Нижний бар фиксирован к низу видимой области */
  body.v12-page #v10-bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 40;
  }

  /* Sticky CTA: встык к верхнему краю bottom nav, высота по контенту */
  body.v12-lot-page #v8-sticky-widget,
  body.v12-lot-page #stock-sticky-widget {
    bottom: var(--v12-nav-total) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 45;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    box-sizing: border-box !important;
    overflow: visible;
    max-width: 100%;
  }

  /* Не назначаем overflow:hidden самому body: это создаёт scroll-container
     и ломает sticky header карточки. clip убирает горизонтальный spill без
     изменения владельца вертикального scroll. */
  body.v12-lot-page {
    overflow-x: clip;
  }
  body.v12-lot-page #v12-scroll {
    overflow-x: hidden;
  }

  body.v12-page #v12-scroll .min-h-screen {
    min-height: 0 !important;
  }
}

/* Desktop: обычный документный скролл */
@media (min-width: 768px) {
  /* На desktop chrome вставляется синхронно из слота. Не прячем всю страницу
     до DOMContentLoaded – переход выглядит так же быстро, как в проде. */
  body.v12-page {
    opacity: 1;
  }

  body.v12-page #v12-scroll {
    overflow: visible;
  }

  /* Короткие заглушки (stock/favorites/…): подвал у низа окна, без «дырки» под ним */
  body.v12-static-page {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
  }
  body.v12-static-page #main-header {
    flex-shrink: 0;
  }
  body.v12-static-page #v12-scroll {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  body.v12-static-page #v12-scroll > main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  body.v12-static-page #v12-scroll > footer {
    flex-shrink: 0;
  }
}

/* Хедер */
#main-header .v10-header-row,
.v10-header-row {
  height: var(--v12-header-h) !important;
  min-height: var(--v12-header-h) !important;
  max-height: var(--v12-header-h) !important;
  box-sizing: border-box;
}

/* На desktop разделы (Аукционы/Статистика/В наличии) переехали в одну строку
   с логотипом и поиском — вторая строка убрана, шапка везде однострочная. */
@media (min-width: 768px) {
  body.v12-page #main-header[data-v12-header="default"] {
    min-height: 4rem;
  }

  body.v12-page #main-header[data-v12-header="default"] .v10-header-row {
    height: 4rem !important;
    min-height: 4rem !important;
    max-height: 4rem !important;
  }

  /* На главной шапка однострочная: разделы и поиск есть в самой странице. */
  body.home-lab-page #main-header[data-v12-header="default"] {
    min-height: 4rem;
  }
}

body.home-lab-page .moto-desk-nav,
body.home-lab-page #v12-header-search {
  display: none !important;
}

/* Высота бара:
   – ряд иконок = --v12-nav-h (4rem)
   – safe-area = ТОЛЬКО padding-bottom под иконками
   – content-box: padding не вычитается из 4rem и не удваивает total
   --v12-nav-total (4rem+safe) — для scroll-padding / резерва контента, не для height. */
#v10-bottom-nav {
  box-sizing: content-box !important;
  height: var(--v12-nav-h) !important;
  min-height: var(--v12-nav-h) !important;
  max-height: none !important;
  padding-top: 0 !important;
  padding-bottom: var(--v12-nav-safe) !important;
  overflow: hidden;
  flex-shrink: 0;
}

#v10-bottom-nav.pb-safe {
  padding-bottom: var(--v12-nav-safe) !important;
}

/* Ripple-слой: полный ряд иконок.
   overflow-y режет верх/низ 4rem; overflow-x clip/hidden – wash под соседние
   табы внутри ширины бара, без spill за край (иначе overflow-x:visible
   + overflow-y:hidden → computed auto → полоска-скроллбар снизу бара). */
#v10-bottom-nav .v10-nav-inner {
  position: relative;
  overflow-x: hidden; /* fallback: no scrollbar if clip unsupported */
  overflow-x: clip;
  overflow-y: hidden;
  height: var(--v12-nav-h) !important;
  min-height: var(--v12-nav-h) !important;
  max-height: var(--v12-nav-h) !important;
  box-sizing: border-box;
  align-items: stretch;
}

#v10-bottom-nav .v10-nav-link,
#v10-bottom-nav .v10-nav-inner > a,
#v10-bottom-nav .v10-nav-inner > button {
  position: relative;
  z-index: 1;
  overflow: visible;
  height: var(--v12-nav-h) !important;
  min-height: var(--v12-nav-h) !important;
  max-height: var(--v12-nav-h) !important;
  padding-top: 0.5rem;
  padding-bottom: 0.25rem;
  box-sizing: border-box;
  font-family: Geist, 'Geist Fallback', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Иконка/подпись поверх parent-ripple (z-index 0). */
#v10-bottom-nav .v10-nav-link > svg,
#v10-bottom-nav .v10-nav-link > span,
#v10-bottom-nav .v10-nav-inner > a > svg,
#v10-bottom-nav .v10-nav-inner > a > span,
#v10-bottom-nav .v10-nav-inner > button > svg,
#v10-bottom-nav .v10-nav-inner > button > span,
#v10-bottom-nav .v10-nav-cabinet-slot > a > svg,
#v10-bottom-nav .v10-nav-cabinet-slot > a > span,
#v10-bottom-nav .v10-nav-cabinet-slot > button > svg,
#v10-bottom-nav .v10-nav-cabinet-slot > button > span {
  position: relative;
  z-index: 1;
}

/* Tap feedback: мягкая серая капсула на .v10-nav-inner (не внутри таба).
   Центр = иконка таба (JS). Старт ~27px → макс ~96px; только вертикальный клип ряда. */
#v10-bottom-nav .v12-nav-ripple {
  position: absolute !important;
  left: 0;
  top: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 9999px;
  pointer-events: none;
  z-index: 0;
  background: rgba(0, 0, 0, 0.24);
  transform: scale(0.28);
  opacity: 0.85;
  will-change: transform, opacity;
  font-size: 0 !important;
  line-height: 0 !important;
  white-space: normal !important;
  font-weight: 400 !important;
  display: block;
  flex: none !important;
}
html.dark #v10-bottom-nav .v12-nav-ripple,
body.dark #v10-bottom-nav .v12-nav-ripple {
  background: rgba(255, 255, 255, 0.26);
}
#v10-bottom-nav .v12-nav-ripple.v12-nav-ripple--run {
  animation: v12-nav-ripple 400ms ease-out forwards;
}
@keyframes v12-nav-ripple {
  0% {
    transform: scale(0.28);
    opacity: 0.85;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

#v10-bottom-nav .v10-nav-cabinet-slot {
  position: relative;
  z-index: 1;
  flex: 1 1 0%;
  min-width: 0;
  height: var(--v12-nav-h) !important;
  min-height: var(--v12-nav-h) !important;
  max-height: var(--v12-nav-h) !important;
}

#v10-bottom-nav .v10-nav-cabinet-slot > a,
#v10-bottom-nav .v10-nav-cabinet-slot > button,
#v10-bottom-nav .v10-nav-cabinet-slot > .v10-nav-link {
  position: absolute;
  inset: 0;
  overflow: visible;
  width: 100%;
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  padding-top: 0.5rem;
  padding-bottom: 0.25rem;
  box-sizing: border-box;
  font-family: Geist, 'Geist Fallback', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

#v10-bottom-nav .v10-nav-inner > a,
#v10-bottom-nav .v10-nav-inner > button,
#v10-bottom-nav .v10-nav-cabinet-slot > a,
#v10-bottom-nav .v10-nav-cabinet-slot > button,
#v10-bottom-nav .v10-nav-inner span {
  font-weight: 600 !important;
}

#v10-bottom-nav .v10-nav-inner span {
  font-size: clamp(8px, 2.7vw, 10px) !important;
  line-height: 1 !important;
  white-space: nowrap;
}

/* CTA футеры фильтров = та же модель высоты, что нижний бар.
   Sticky на лоте — отдельно (компактная кнопка), не форсим высоту nav. */
#v10-filter-cta-footer,
#v10-subsheet-footer {
  box-sizing: content-box !important;
  height: var(--v12-nav-h) !important;
  min-height: var(--v12-nav-h) !important;
  max-height: none !important;
  padding-top: 0 !important;
  padding-bottom: var(--v12-nav-safe) !important;
  overflow: hidden;
}

#v10-filter-cta-footer.pb-safe,
#v10-subsheet-footer.pb-safe {
  padding-bottom: var(--v12-nav-safe) !important;
}

#v10-filter-cta-footer .v10-chrome-inner,
#v10-subsheet-footer .v10-chrome-inner {
  height: var(--v12-nav-h) !important;
  min-height: var(--v12-nav-h) !important;
  max-height: var(--v12-nav-h) !important;
  box-sizing: border-box;
}

/* Sticky CTA: высота по кнопке, низ панели = верх bottom nav */
#v8-sticky-widget,
#stock-sticky-widget {
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
}

body.v12-lot-page #v8-sticky-widget,
body.v12-lot-page #stock-sticky-widget {
  bottom: var(--v12-nav-total) !important;
}

/* Sheet: выезд справа налево */
#v10-filter-sheet.v10-filter-sheet {
  transform: translate3d(100%, 0, 0);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
  backface-visibility: hidden;
}
#v10-filter-sheet.v10-filter-sheet--open {
  transform: translate3d(0, 0, 0);
}

/* Form holder: off-screen (mobile form lives in sheet). Must live in shell CSS –
   page <style> from partials is injected, but this is the safety net. */
#v10-filter-form-holder {
  position: fixed !important;
  left: -9999px !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  overflow: visible !important;
  pointer-events: none !important;
  z-index: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}
#v10-filter-form-holder .custom-dropdown-content:not(.hidden),
#v10-filter-form-holder .model-dropdown-content:not(.hidden) {
  pointer-events: auto;
}