/* TabBar — мобильная навигация, закреплённая внизу экрана (Figma: файл главной
   dtoQqDWPH4y3kno7blcDcl, инстансы мастера TabBar, вариант Page=Default).

   НОДЫ: base ← 5822:97418 (320×60) · tablet ← 5822:98258 (768×60).
   НА ДЕСКТОПЕ БЛОКА НЕТ ВООБЩЕ: в фреймах 1024/1280/1920 его не существует —
   там навигация живёт в шапке (см. описание компонента Header в Figma:
   «навигационное меню на мобильных разрешениях переносится и фиксируется внизу
   страницы»). Поэтому у блока только две точки, а на экране он подключается
   ниже десктопа.

   Раскладка между 320 и 768 не меняется: пять вкладок делят ширину поровну
   (62px при 320, 152px при 768), поэтому ни флагов, ни @container не нужно. */

.tabbar,
.tabbar * { box-sizing: border-box; }

/* Рамка сверху — inset box-shadow (stroke в Figma стоит INSIDE и только сверху),
   она идёт первой, чтобы не спорить с внешней тенью.

   ⚠ ТОКЕНА НА ЭТУ ТЕНЬ НЕТ. В ноде 0 -4px 12px rgba(20,20,20,0.08) — тень
   направлена ВВЕРХ, потому что панель приклеена к низу экрана. В tokens.css
   всего два теневых токена (--shadow-4 и --shadow-12), оба со смещением вниз и
   другой прозрачностью, поэтому подставить нечего. Значение взято из ноды как
   есть; нужно решение владельца — завести токен вроде --shadow-up-12. */
.tabbar {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: var(--spacing-4);
  background: var(--color-gray-0);
  box-shadow:
    inset 0 1px 0 var(--color-gray-50),
    0 -4px 12px rgba(20, 20, 20, 0.08);
  font-family: var(--font-family-base);
  /* Inter Variable сужает глифы осью opsz против статического Inter в Figma. */
  font-optical-sizing: none;
}

.tabbar__tab {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-4);
  padding: var(--spacing-8) 0 var(--spacing-4);
  border-radius: var(--radius-12);
  color: var(--color-gray-400);
  text-decoration: none;
  /* вкладка — носитель абсолютного счётчика */
  position: relative;
}

/* Иконка неактивной вкладки темнее подписи — так в макете (gray-900 против
   gray-400), поэтому цвет задан не через currentColor всей вкладки. */
.tabbar__icon {
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--color-gray-900);
}

.tabbar__label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Активная вкладка: подложка accent-25, иконка и подпись accent-600. */
.tabbar__tab--active {
  background: var(--color-accent-25);
  color: var(--color-accent-600);
}

.tabbar__tab--active .tabbar__icon { color: var(--color-accent-600); }

/* Счётчик корзины висит над иконкой. Привязан к ЦЕНТРУ вкладки, а не к её
   левому краю: в узкой ноде это x=35 при вкладке 62 (центр 31 + 4), в широкой
   x=80 при вкладке 152 (центр 76 + 4). С фиксированными 35px на планшете
   счётчик уезжал влево — зона давала 20.65% расхождения. */
.tabbar__counter {
  position: absolute;
  top: 0;
  left: calc(50% + var(--spacing-4));
}