/* ==========================================================================
   Мобильный нижний таб-бар (mobile tab-bar). Пара к mu-plugin theidol-mobile-tabbar.php
   и разметке inc_auto/.../blocks/mobile-tabbar.php.
   ВИЗУАЛ настраивается ТОЛЬКО токенами --tab-* ниже (шов для Claude Design):
   меняешь токены/иконки/тени → вид меняется без правки разметки и логики.

   z-шкала проекта (низ→верх): контент < ТАБ-БАР(--tab-z:90) ≈ .cookie(90)
     < .mobile-pane/.idol-sheet/mini-cart/.lk-drawer(≥9999) < Fancybox-модалки < тосты.
   Бар намеренно НИЖЕ оверлеев (шторка каталога/попапы перекрывают его).
   ========================================================================== */
:root {
  --tab-h: 60px;                 /* высота бара БЕЗ safe-area */
  --tab-bg: #ffffff;
  --tab-line: #ececec;           /* верхняя граница-хэйрлайн */
  --tab-ink: #1a1a1a;            /* активный пункт */
  --tab-muted: #8b8b8b;          /* неактивный пункт */
  --tab-badge-bg: #1a1a1a;
  --tab-badge-ink: #ffffff;
  --tab-label: 10.5px;           /* синхрон с prototype.html */
  --tab-icon: 23px;
  --tab-indicator: transparent;  /* верхняя риска активной вкладки (можно #1a1a1a) */
  --tab-z: 90;
  --tab-radius: 0px;
  --tab-font: "Inter", "Manrope", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* по умолчанию (десктоп ≥1024px) бар в DOM, но скрыт — десктоп-кэш не показывает бар.
   Порог ≤1023px = точный брейкпоинт нижнего таб-бара Wildberries (.navbar-mobile hide-desktop:
   показ ≤1023, скрыт ≥1024 — проверено эмпирически). У нас гамбургер-шапка живёт 0–1279px, поэтому
   при 901–1023 бар совместим (гамбургер есть → вкладка «Каталог» работает, десктоп-мега нет). */
.idol-tabbar { display: none; }

/* ФИКС «лишних точек» (безусловно, на всех вьюпортах — li в DOM и на десктопе): тема вешает буллет через
   `ul:not(вайтлист) li::before` (theme-tweaks.css:1088), а .idol-tabbar__list не в вайтлисте → каждый пункт
   получал точку. Гасим здесь. Актив-индикатор живёт на .idol-tabbar__link::before (ДРУГОЙ элемент) — не трогаем. */
.idol-tabbar__item::before { content: none !important; }

/* ==========================================================================
   WB-подобная ПЕРСИСТЕНТНОСТЬ бара между страницами (по возможности) — cross-document View Transitions.
   На поддерживающих браузерах (Chrome/Android/Samsung — доминируют на мобиле РФ) бар с view-transition-name
   морфится «на месте» при переходе → НЕ ре-рендерится/не мигает (как в приложении). iOS Safari (пока без
   cross-doc VT) и старые браузеры → обычная навигация = текущее поведение (прогрессивно, без регресса).
   Страницу ЦЕЛИКОМ не анимируем (root 0s) — плавно «остаётся» только бар, без fade всего сайта.
   Откат: удалить этот блок (чистый CSS, ни логики, ни JS). ========================================= */
@view-transition { navigation: auto; }
.idol-tabbar { view-transition-name: idol-tabbar; }
::view-transition-group(root) { animation-duration: 0s; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*) { animation-duration: 0s !important; }   /* уважаем «меньше движения» */
}

@media (max-width: 1023px) {   /* WB-паритет: показ ≤1023, скрыт ≥1024 (см. коммент у .idol-tabbar выше) */

  .idol-tabbar {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--tab-z);
    background: var(--tab-bg);
    border-top: 1px solid var(--tab-line);
    border-radius: var(--tab-radius) var(--tab-radius) 0 0;
    /* safe-area iPhone: реальная высота = бар + нижний вырез */
    height: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    font-family: var(--tab-font);
  }

  .idol-tabbar__list {
    height: var(--tab-h); width: 100%; box-sizing: border-box;
    margin: 0 !important; padding: 0 !important; list-style: none;   /* !important бьёт возможный темовый ul-паддинг → ячейки на всю ширину */
    display: grid; grid-template-columns: repeat(5, 1fr);
  }
  .idol-tabbar__item { min-width: 0; padding: 0 !important; margin: 0 !important; }  /* бьём темовый li-паддинг (сжимал ссылку → обрезка подписи) */

  .idol-tabbar__link {
    width: 100%; box-sizing: border-box;   /* заполняем ячейку → label получает полную ширину (иначе link сжимался → обрезка) */
    height: 100%; min-height: 44px;         /* тап-зона ≥44px */
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    text-decoration: none; color: var(--tab-muted);
    position: relative; padding: 6px 1px 5px;
    -webkit-tap-highlight-color: transparent;
  }
  .idol-tabbar__ic { width: var(--tab-icon); height: var(--tab-icon); display: block; flex: 0 0 auto; }
  .idol-tabbar__label {
    font-size: var(--tab-label); line-height: 1; letter-spacing: .01em; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  }

  /* активная вкладка */
  .idol-tabbar__item.is-active .idol-tabbar__link { color: var(--tab-ink); font-weight: 500; }
  .idol-tabbar__item.is-active .idol-tabbar__link::before {
    content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 26px; height: 2px; border-radius: 0 0 2px 2px; background: var(--tab-indicator);
  }
  .idol-tabbar__item.is-active .idol-tabbar__ic { stroke-width: 2; }

  /* бейдж-счётчик (избранное/корзина) */
  .idol-tabbar__badge {
    position: absolute; top: 4px; left: calc(50% + 8px);
    min-width: 15px; height: 15px; padding: 0 4px;
    background: var(--tab-badge-bg); color: var(--tab-badge-ink); border-radius: 9px;
    font-size: 9.5px; line-height: 15px; text-align: center; font-weight: 600;
  }
  .idol-tabbar__badge[data-count="0"] { display: none; }   /* пусто → не показываем */

  .idol-tabbar__link:focus-visible { outline: 2px solid var(--tab-ink); outline-offset: -3px; border-radius: 8px; }

  /* контент не уезжает под фикс-бар. Опора на ФАКТИЧЕСКОЕ присутствие бара в DOM (:has), а не на
     body_class — тема зануляет body_class (filters.php:20 __return_empty_array) и не зовёт body_class().
     Бар в DOM только когда mu-plugin его отрисовал (should_render) → :has эквивалентно «бар показан». */
  body:has(.idol-tabbar) { padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px)); }

  /* --- ПОЛНОЭКРАННОЕ НАВ-МЕНЮ (шторка каталога/гамбургера) НЕ перекрывает бар (как в приложении WB) ---
     Вкладка «Каталог»/гамбургер открывают .mobile-pane (position:fixed; top:--header-offset;
     height:calc(100vh - --header-offset); z:9999) — она тянется до самого низа и накрывала бар.
     Резервируем баром его полосу: ставим панели bottom = высота бара (+safe-area) и height:auto —
     панель заканчивается РОВНО у верха бара, её содержимое скроллится внутри, бар всегда видим и
     кликабелен. top/right/left/transform-слайд не трогаем. Бар и панель используют один якорь
     фикс-вьюпорта (bottom) → совпадают при любом состоянии тулбара (в т.ч. 100vh≠visual на iOS).
     Только .mobile-pane (нав-меню). Модалки с СОБСТВЕННОЙ нижней кнопкой (фильтры .idol-sheet
     «Применить/Сбросить», мини-корзина «оформить», логин) НАМЕРЕННО берут весь экран — их нижний
     CTA заменяет бар, поэтому их НЕ трогаем (иначе бар перекрыл бы их кнопки = регресс). */
  body:has(.idol-tabbar) .mobile-pane {
    bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px));
    height: auto;
  }

  /* --- Попап «Войти» (#login-popup в Fancybox) НЕ перекрывает бар — бар всегда виден ---
     Fancybox-контейнер (position:fixed; inset:0; z:max-int) накрывал весь экран, включая бар.
     Резервируем баром его полосу ТОЛЬКО когда контейнер держит #login-popup (`:has`) — галереи
     фото товара (зум) при этом остаются полноэкранными (их не трогаем). Контейнер кончается у
     верха бара; попап (он выше вьюпорта) скроллится внутри своей области; backdrop не затемняет
     полосу бара; бар кликабелен. !important — перебиваем инлайн/высокоспецифичные стили Fancybox.
     Backdrop — тоже: он `position:fixed; inset:0`, поэтому «сбегает» из укороченного контейнера и
     тянется на весь вьюпорт (и живёт в max-int стек-контексте контейнера → был ПОВЕРХ бара);
     укорачиваем и его. */
  body:has(.idol-tabbar) .fancybox__container:has(#login-popup),
  body:has(.idol-tabbar) .fancybox__container:has(#login-popup) .fancybox__backdrop {
    bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px)) !important;
    height: auto !important;
  }

  /* --- коллизии с существующими нижними фикс-элементами --- */
  /* cookie-баннер (theme-tweaks.css: z:90; bottom:5%) — поднять над баром */
  body:has(.idol-tabbar) .cookie {
    bottom: calc(5% + var(--tab-h) + env(safe-area-inset-bottom, 0px));
  }
  /* back-to-top (bottom задан в бандле assets/) — приподнять над баром через transform,
     чтобы не воевать со специфичностью бандла. Проверить визуально на dev; при своей
     transform-анимации кнопки — заменить на bottom-override. */
  body:has(.idol-tabbar) .back-to-top {
    transform: translateY(calc(-1 * (var(--tab-h) + env(safe-area-inset-bottom, 0px)))) !important;
  }
}