/* ========================================
   UI Kit - Navigation Bar
   ======================================== */

/* ========================================
   Desktop Navigation (Fixed + Glassmorphism)
   ======================================== */

.gc-desktop-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    padding: var(--space-2) 0;
    /* Обе темы: поверхность как у карточек/панелей (--bg-content-main), без отдельного #fff в light */
    background: var(--surface-panel) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--border-subtle);
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

[data-theme="light"] .gc-desktop-nav {
    background: var(--surface-panel) !important;
    border-bottom: 1px solid var(--border-subtle);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .gc-desktop-nav {
        background: var(--surface-panel) !important;
        border-bottom: 1px solid var(--border-subtle);
    }
}

/* Ограничиваем ширину контента в navbar */
.gc-desktop-nav .container-fluid {
    max-width: var(--layout-page-max-width);
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
}

/* Уменьшенный размер текста в десктопном navbar */
.gc-desktop-nav .navbar-nav {
    gap: var(--space-1); /* Расстояние между пунктами */
}

.gc-desktop-nav .navbar-nav .nav-link {
    font-size: var(--font-size-14);
    padding: var(--space-1) var(--space-2);
    font-weight: 500;
}

/* Активный пункт: контрастная плашка по теме (Fill/Primary) */
.gc-desktop-nav .navbar-nav .nav-link.active {
    background: var(--fill-primary);
    color: var(--surface-panel);
    border-radius: var(--radius-8);
    box-shadow: none;
}

.gc-desktop-nav .navbar-nav .nav-link.active:hover {
    background: var(--fill-primary);
    color: var(--surface-panel);
    filter: brightness(1.06);
}

/* Логотип компактнее */
.gc-desktop-nav .navbar-brand {
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
}

.gc-desktop-nav .navbar-brand img {
    max-height: 32px; /* Чуть меньше логотип */
}

/* Отступ для контента под фиксированным navbar */
@media (min-width: 992px) {
    body {
        --gc-body-pad-top: var(--gc-nav-bar-height);
        padding-top: var(--gc-body-pad-top);
    }

    body.inertia-shell {
        --gc-body-pad-bottom: 0px;
        padding-bottom: 0 !important;
    }
}

/* ========================================
   Mobile Navigation Bar
   ======================================== */

/* ========================================
   Floating Search Bar (Glassmorphism)
   ======================================== */

.gc-floating-search {
    position: fixed;
    /* Над нижним навбаром: высота бара + safe-area (внутри бара) + зазор */
    bottom: calc(var(--gc-mobile-bottom-nav-outer-height) + var(--space-2));
    left: 0;
    right: 0;
    padding: 0 var(--space-4);
    z-index: 1025; /* Ниже навбара (1030), но выше контента */
    box-sizing: border-box;
}

.gc-floating-search-inner {
    /* Glassmorphism эффект */
    background: color-mix(in srgb, var(--surface-canvas) 70%, transparent) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    
    border: 1px solid var(--border-subtle);
    
    /* Скругление */
    border-radius: var(--radius-full); /* Полное скругление */
    
    /* Внутренние отступы */
    padding: var(--space-2) var(--space-4);
    
    /* Flexbox для иконки + input */
    display: flex;
    align-items: center;
    gap: var(--space-2);
    
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.gc-floating-search-inner:focus-within {
    border-color: var(--border-default);
    box-shadow: 0 0 0 2px rgba(var(--accent-link-rgb), 0.15);
}

.gc-floating-search-inner i {
    color: var(--text-secondary);
    font-size: var(--font-size-18);
    flex-shrink: 0;
}

.gc-floating-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: var(--font-size-base);
    padding: 0;
}

.gc-floating-search-input::placeholder {
    color: var(--text-secondary);
}

[data-theme="light"] .gc-floating-search-inner {
    background: color-mix(in srgb, var(--text-on-solid) 85%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--fill-emphasis) 8%, transparent);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .gc-floating-search-inner {
        background: color-mix(in srgb, var(--text-on-solid) 85%, transparent) !important;
        border: 1px solid color-mix(in srgb, var(--fill-emphasis) 8%, transparent);
    }
}

/* ========================================*/

/*
 * Мобильный верхний навбар (только < lg): shell (inset) + разрозненные glass-элементы.
 * .gc-nav-content — только layout; фон/рамка — у title pill, icon-кнопок и .gc-nav-track.
 */
.gc-mobile-nav-top {
    /* Bootstrap .navbar-light не подмешивает свой фон поверх токенов */
    --bs-navbar-bg: transparent;

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;

    /* Figma 1305:17530 — shell без inset; safe-area + padding только на title_bar / nav_bar */
    --bs-navbar-padding-y: 0;
    --bs-navbar-padding-x: 0;
    padding: env(safe-area-inset-top, 0px) 0 0;
    border-radius: 0 !important;
    overflow: visible;

    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: translateZ(0);
    backface-visibility: hidden;

    border: none !important;
    box-shadow: none;

    transition: background-color var(--transition-fast), border-color var(--transition-fast),
        transform var(--transition-base) ease-out;
}

/* Скрытие шапки при скролле вниз (mobile-nav-scroll-hide.js) */
@media (max-width: 991.98px) {
    .gc-mobile-nav-top.gc-mobile-nav-top--hidden {
        transform: translate3d(0, calc(-100% - 2px), 0);
        pointer-events: none;
    }
}

/* Layout-обёртка: без общего фона и рамки (Figma — glass только на pill/track) */
.gc-mobile-nav-top .gc-nav-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    overflow: visible;
}

/* ========================================
   Градиент под мобильной навигацией
   Только в пределах .gc-mobile-nav-top — не перекрывает контент ниже offset.
   ======================================== */

@media (max-width: 991.98px) {
    .gc-mobile-nav-top::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to bottom,
            var(--surface-canvas) 0%,
            color-mix(in srgb, var(--surface-canvas) 38%, transparent) 58%,
            color-mix(in srgb, var(--surface-canvas) 10%, transparent) 88%,
            transparent 100%
        );
        pointer-events: none;
        z-index: -1;
        transition: opacity var(--transition-fast);
    }

    .no-mobile-top-gradient .gc-mobile-nav-top::before {
        display: none;
    }

    .gc-mobile-nav-top.gc-mobile-nav-top--hidden::before {
        opacity: 0;
    }
}

/* Скрыть на десктопе */
@media (min-width: 992px) {
    .gc-mobile-nav-top {
        display: none !important;
    }
}

[data-theme="dark"] .gc-mobile-nav-top,
[data-theme="light"] .gc-mobile-nav-top {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .gc-mobile-nav-top {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none;
    }
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .gc-mobile-nav-top {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* Улучшение читаемости контента внутри navbar */
.gc-mobile-nav-top .nav-title .gc-mobile-nav-logo {
    max-height: var(--font-size-20);
    width: auto;
    flex-shrink: 0;
}

.gc-mobile-nav-top .nav-title a {
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.gc-mobile-nav-top .nav-title.d-flex > :not(img):not(.nav-title-avatar):not(.nav-title-avatar-fallback) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/*
 * title_bar (Figma 628:696): pill по ширине текста, absolute center между icon-кнопками.
 * max-width — до упора в контролы; длинный текст — ellipsis.
 */
.gc-mobile-nav-top .gc-nav-header .nav-title {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 0;
    flex: none;
    min-width: 0;
    transform: translate(-50%, -50%);
    width: fit-content;
    max-width: calc(100% - 2 * var(--gc-mobile-nav-title-icon-size) - 2 * var(--gc-mobile-nav-inset-x));
    height: var(--gc-mobile-nav-title-icon-size);
    padding: 0 var(--space-4);
    background: var(--gc-mobile-nav-title-pill-bg);
    backdrop-filter: blur(var(--gc-mobile-nav-glass-blur));
    -webkit-backdrop-filter: blur(var(--gc-mobile-nav-glass-blur));
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    box-shadow: var(--gc-mobile-nav-icon-shadow);
    color: var(--text-primary);
    text-align: center;
    font-weight: 500;
    font-size: var(--font-size-14);
    line-height: var(--gc-mobile-nav-tab-line-height);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    box-sizing: border-box;
    pointer-events: none;
}

.gc-mobile-nav-top.navbar .nav-title {
    font-size: var(--font-size-14);
    margin: 0;
    flex-grow: 0;
    text-align: center;
}

.gc-mobile-nav-top .nav-title--center {
    justify-content: center;
    text-align: center;
}

.nav-title-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.nav-title-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: var(--surface-control);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: var(--font-size-13);
    font-weight: 600;
    line-height: 1;
}

/* title_bar: p lg (12px), icon 40×40 (Figma btns/icon) */
/* Иконки title_bar: surface/secondary, pill + тень */
.gc-mobile-nav-top .gc-nav-header .gc-nav-icon {
    background: var(--surface-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    padding: 0;
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast),
        transform var(--transition-fast);
    width: var(--gc-mobile-nav-title-icon-size);
    height: var(--gc-mobile-nav-title-icon-size);
    min-width: var(--gc-mobile-nav-title-icon-size);
    min-height: var(--gc-mobile-nav-title-icon-size);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary) !important;
    box-sizing: border-box;
    box-shadow: var(--gc-mobile-nav-icon-shadow);
}

.gc-mobile-nav-top .gc-nav-header .gc-nav-icon i {
    font-size: var(--font-size-20);
    line-height: 1;
}

.gc-mobile-nav-top .gc-nav-header .gc-nav-icon:hover {
    background: var(--surface-control-hover);
    transform: none;
    color: var(--text-primary) !important;
}

.gc-mobile-nav-top .gc-nav-header .gc-nav-icon:active,
.gc-mobile-nav-top .gc-nav-header .gc-nav-icon:focus {
    color: var(--text-primary) !important;
}

/* Дропдаун в навбаре (кроме icon-кнопок title_bar — у них surface/secondary) */
.gc-mobile-nav-top .gc-dropdown-toggle:not(.gc-nav-icon) {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

.gc-mobile-nav-top .gc-nav-header .gc-dropdown-toggle.gc-nav-icon {
    background: var(--surface-secondary) !important;
    box-shadow: var(--gc-mobile-nav-icon-shadow);
    border-radius: var(--radius-full);
}

.gc-mobile-nav-top .gc-dropdown-toggle::after {
    display: none !important;
    content: none !important;
}

/* Убираем border и псевдоэлементы у элементов меню в навбаре */
.gc-mobile-nav-top .gc-dropdown-menu .gc-dropdown-item,
.gc-mobile-nav-top .gc-dropdown-menu button.gc-dropdown-item,
.gc-mobile-nav-top .gc-dropdown-menu a.gc-dropdown-item {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.gc-mobile-nav-top .gc-dropdown-menu .gc-dropdown-item::after,
.gc-mobile-nav-top .gc-dropdown-menu .gc-dropdown-item::before,
.gc-mobile-nav-top .gc-dropdown-menu button::after,
.gc-mobile-nav-top .gc-dropdown-menu button::before {
    display: none !important;
    content: none !important;
}

/* ПРИМЕЧАНИЕ: Отступы .container-fluid внутри навбаров переопределены в layout.css */

/*
 * Высота stack (--gc-mobile-nav-*-inner-height в variables.css) должна совпадать
 * с .gc-mobile-nav-offset* — иначе контент наезжает на шапку.
 */
/* title_bar: flex-ряд контролов + pill заголовка absolute center (Figma 628:696) */
.gc-mobile-nav-top .gc-nav-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--gc-mobile-nav-inset-x);
    min-height: var(--gc-mobile-nav-header-row-min-height);
    box-sizing: border-box;
}

/* Spacer — одиночный контрол; display:contents → дочерний элемент в flex-ряду */
.gc-mobile-nav-top .gc-nav-spacer {
    display: contents;
}

.gc-mobile-nav-top .gc-nav-header > .gc-nav-spacer:first-child > *,
.gc-mobile-nav-top .gc-nav-header > .gc-dropdown,
.gc-mobile-nav-top .gc-nav-header > .gc-btn,
.gc-mobile-nav-top .gc-nav-header > .gc-nav-icon {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.gc-mobile-nav-top .gc-nav-header > .gc-nav-spacer:last-child > *,
.gc-mobile-nav-top .gc-nav-spacer--cluster {
    margin-left: auto;
}

.gc-mobile-nav-top .gc-nav-spacer--cluster {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

/*
 * nav_bar (Figma 1305:17265): внешний ряд — px = контент (--gc-mobile-nav-inset-x), без glass.
 * nav track (628:774): отдельная pill внутри — blur, border/subtle, p sm, gap xs.
 */
.gc-mobile-nav-top .gc-nav-bar,
.gc-three-col-subheader__tabs .gc-nav-bar {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    padding: 0 var(--gc-mobile-nav-inset-x);
    min-height: var(--gc-mobile-nav-tabs-row-min-height);
    box-sizing: border-box;
}

/* Inertia: inset уже на main — не второй слой px как у full-bleed Blade nav. */
.gc-three-col-subheader__tabs .gc-nav-bar {
    padding-inline: 0;
}

/*
 * Glass track + chip tabs. Host: Blade `.gc-mobile-nav-top`, Inertia `.gc-three-col-subheader__tabs`.
 */
.gc-nav-track-host .gc-nav-track {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--gc-mobile-nav-nav-track-padding);
    min-height: calc(
        var(--gc-mobile-nav-nav-track-padding) * 2 + var(--gc-mobile-nav-tab-chip-height)
    );
    box-sizing: border-box;
    background: var(--gc-mobile-nav-nav-track-bg);
    backdrop-filter: blur(var(--gc-mobile-nav-glass-blur));
    -webkit-backdrop-filter: blur(var(--gc-mobile-nav-glass-blur));
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    overflow: visible;
}

.gc-mobile-nav-top .gc-nav-tabs-sort,
.gc-nav-track-host .gc-nav-tabs-sort {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 0;
}

.gc-mobile-nav-top .gc-nav-tabs-sort .catalog-sort-dropdown-wrap,
.gc-nav-track-host .gc-nav-tabs-sort .catalog-sort-dropdown-wrap,
.gc-mobile-nav-top .gc-nav-tabs-sort .gc-dropdown,
.gc-nav-track-host .gc-nav-tabs-sort .gc-dropdown {
    display: flex;
    align-items: center;
    height: var(--gc-mobile-nav-tab-chip-height);
}

.gc-mobile-nav-top .gc-nav-tabs-sort .gc-skeleton,
.gc-nav-track-host .gc-nav-tabs-sort .gc-skeleton {
    width: var(--gc-mobile-nav-tab-chip-height);
    height: var(--gc-mobile-nav-tab-chip-height);
    border-radius: var(--radius-full);
}

/*
 * Сортировка — chip-сегмент внутри .gc-nav-track (как соседние табы).
 */
.gc-mobile-nav-top .gc-nav-tabs-sort .gc-dropdown > .gc-btn.gc-btn-icon-sm.gc-dropdown-toggle,
.gc-nav-track-host .gc-nav-tabs-sort .gc-dropdown > .gc-btn.gc-btn-icon-sm.gc-dropdown-toggle {
    width: var(--gc-mobile-nav-tab-chip-height);
    height: var(--gc-mobile-nav-tab-chip-height);
    min-width: var(--gc-mobile-nav-tab-chip-height);
    min-height: var(--gc-mobile-nav-tab-chip-height);
    max-width: var(--gc-mobile-nav-tab-chip-height);
    padding: 0;
    justify-content: center;
    box-sizing: border-box;
    border: none;
    border-radius: var(--radius-full);
    background: transparent;
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    color: var(--text-primary);
    --gc-btn-hairline: 0 0 #0000;
    --gc-btn-elevation: 0 0 #0000;
}

.gc-mobile-nav-top .gc-nav-tabs-sort .gc-dropdown > .gc-btn.gc-btn-icon-sm.gc-dropdown-toggle:hover,
.gc-nav-track-host .gc-nav-tabs-sort .gc-dropdown > .gc-btn.gc-btn-icon-sm.gc-dropdown-toggle:hover,
.gc-mobile-nav-top .gc-nav-tabs-sort .gc-dropdown > .gc-btn.gc-btn-icon-sm.gc-dropdown-toggle:focus-visible,
.gc-nav-track-host .gc-nav-tabs-sort .gc-dropdown > .gc-btn.gc-btn-icon-sm.gc-dropdown-toggle:focus-visible,
.gc-mobile-nav-top .gc-nav-tabs-sort .gc-dropdown > .gc-btn.gc-btn-icon-sm.gc-dropdown-toggle[aria-expanded="true"],
.gc-nav-track-host .gc-nav-tabs-sort .gc-dropdown > .gc-btn.gc-btn-icon-sm.gc-dropdown-toggle[aria-expanded="true"],
.gc-mobile-nav-top .gc-nav-tabs-sort .gc-dropdown > .gc-btn.gc-btn-icon-sm.gc-dropdown-toggle[data-state="open"],
.gc-nav-track-host .gc-nav-tabs-sort .gc-dropdown > .gc-btn.gc-btn-icon-sm.gc-dropdown-toggle[data-state="open"] {
    background: var(--surface-subtle);
    background-color: var(--surface-subtle);
    color: var(--text-primary);
    box-shadow: none;
}

.gc-mobile-nav-top .catalog-sort-dropdown--navbar .catalog-sort-dropdown__toggle--navbar::after,
.gc-nav-track-host .catalog-sort-dropdown--navbar .catalog-sort-dropdown__toggle--navbar::after {
    display: none !important;
}

.gc-mobile-nav-top .gc-nav-tabs-sort .catalog-sort-dropdown__toggle-lead i,
.gc-nav-track-host .gc-nav-tabs-sort .catalog-sort-dropdown__toggle-lead i {
    font-size: var(--font-size-18);
    line-height: 1;
}

.gc-nav-track-host .gc-nav-track:has(.gc-nav-tabs-sort) .gc-tabs-container {
    border-radius: 0 var(--radius-full) var(--radius-full) 0;
}

/*
 * Скролл табов — обрезка по скруглению pill (не прямоугольным overflow трека).
 * overflow на контейнере; горизонтальный scroll остаётся на .gc-tabs-scrollable.
 */
.gc-nav-track-host .gc-nav-track .gc-tabs-container {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    margin: 0;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: var(--radius-full);
    overflow: hidden;
}

.gc-nav-track-host .gc-nav-track .gc-tabs-scrollable {
    padding-left: 0;
    padding-right: 0;
}

/* Табы в nav track: ширина трека; режим fit/overflow выставляет tabs.js */
.gc-nav-track-host .gc-nav-track .gc-tabs-container:has(.gc-tabs) {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
}

.gc-nav-track-host .gc-nav-track .gc-tabs-container:has(.gc-tabs) > .gc-mobile-nav-tabs-skeleton,
.gc-nav-track-host .gc-nav-track .gc-tabs-container:has(.gc-tabs) > .gc-tabs {
    grid-area: 1 / 1;
    min-width: 0;
}

.gc-nav-track-host .gc-nav-track .gc-tabs-container:has(.gc-tabs) > .gc-tabs {
    position: relative;
    z-index: 1;
}

.gc-mobile-nav-tabs-skeleton {
    display: none;
    align-items: center;
    gap: var(--space-1);
    width: 100%;
    z-index: 0;
    pointer-events: none;
}

.gc-nav-track-host .gc-nav-track .gc-tabs-container:has(.gc-tabs:not(.initialized)) .gc-mobile-nav-tabs-skeleton {
    display: flex;
}

.gc-nav-track-host .gc-nav-track .gc-tabs-container:has(.gc-tabs.initialized) .gc-mobile-nav-tabs-skeleton {
    display: none;
}

/*
 * Табы в .gc-nav-track — без JS fit/overflow:
 * 1) помещаются → flex-grow делит свободную ширину (равные колонки, пока хватает места);
 * 2) не помещаются → min-width: max-content не даёт сжать подпись → горизонтальный скролл.
 * Старые классы gc-tabs--fit / --measuring / has-overflow больше не нужны для трека.
 */
.gc-nav-track-host .gc-nav-track .gc-tabs {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: auto;
    opacity: 0;
    transition: opacity 0.15s ease;
    /* Внутри glass pill — только chip-табы, без вложенного product-track / underline */
    background: transparent;
    border: none;
    box-shadow: none;
}

.gc-nav-track-host .gc-nav-track .gc-tabs::-webkit-scrollbar {
    display: none;
}

.gc-nav-track-host .gc-nav-track .gc-tabs.initialized {
    opacity: 1;
}

.gc-nav-track-host .gc-nav-track .gc-tabs > .gc-tab-item:not(.gc-tabs-indicator):not(.gc-tab-divider) {
    flex: 1 1 0;
    min-width: max-content;
}

.gc-nav-track-host .gc-nav-track .gc-tabs > .gc-tab-item:not(.gc-tabs-indicator):not(.gc-tab-divider) > .gc-tab-link,
.gc-nav-track-host .gc-nav-track .gc-tabs > .gc-tab-item:not(.gc-tabs-indicator):not(.gc-tab-divider) > button.gc-tab-link {
    width: 100%;
}

/* Контейнер табов */
.gc-nav-track-host .gc-tabs-container {
    width: 100%;
    margin: 0;
    padding: 0;
}

.gc-nav-track-host .gc-tabs {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    width: auto;
    min-height: 0;
    padding: 0;
    border-radius: 0 !important;
}

/* Скроллируемые табы (для длинных названий, например в профиле) */
.gc-nav-track-host .gc-tabs-scrollable {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling на iOS */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    scroll-behavior: auto; /* Мгновенная прокрутка по умолчанию, без анимации */
    width: 100%;
    flex-wrap: nowrap; /* Не переносим табы на новую строку */
    padding: 0;
}

/* Скрываем скроллбар в webkit */
.gc-nav-track-host .gc-tabs-scrollable::-webkit-scrollbar {
    display: none;
}

/* Pill-табы вне трека — компакт; в .gc-nav-track — grow + max-content (правила выше) */
.gc-nav-track-host .gc-tab-item {
    flex: 0 0 auto;
    min-width: fit-content;
}

.gc-nav-track-host .gc-tab-link,
.gc-nav-track-host button.gc-tab-link {
    width: auto;
    flex: 0 0 auto;
    align-self: center;
    justify-content: center;
    border-radius: var(--radius-full) !important;
    height: var(--gc-mobile-nav-tab-chip-height);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-14);
    font-weight: 500;
    line-height: var(--gc-mobile-nav-tab-line-height);
    min-height: 0;
    box-sizing: border-box;
}

/* Вертикальный разделитель между группами фильтров (Figma: 1×24, border/default) */
.gc-nav-track-host .gc-tabs-minimal .gc-tab-item.gc-tab-divider {
    display: block;
    flex: 0 0 auto;
    align-self: center;
    width: 1px;
    min-width: 1px;
    height: 24px;
    margin: 0 var(--space-1);
    padding: 0;
    background: var(--border-default);
    pointer-events: none;
    border: none;
    border-radius: 0;
}

.gc-nav-track-host .gc-tabs-minimal .gc-tab-item.gc-tab-divider .gc-tab-link {
    display: none;
}

/* Счётчики фильтров в табах шапки — размеры в badges.css (.gc-badge-counter / .gc-tab-filter-badge) */
.gc-nav-track-host .gc-tab-filter-badge {
    vertical-align: middle;
}

/* Legacy minimal (Blade + Inertia nav-track). Chip active, без underline-полоски. */
.gc-nav-track-host .gc-tabs-minimal .gc-tabs-indicator {
    display: none;
}

.gc-nav-track-host .gc-tabs-minimal .gc-tab-link,
.gc-nav-track-host .gc-tabs-minimal button.gc-tab-link {
    color: var(--text-primary);
    border: none;
    box-shadow: none;
    background: transparent;
}

.gc-nav-track-host .gc-tabs-minimal .gc-tab-link:hover:not(.active),
.gc-nav-track-host .gc-tabs-minimal .gc-tab-link:focus-visible:not(.active) {
    background: transparent;
    color: var(--text-primary);
}

.gc-nav-track-host .gc-tabs-minimal .gc-tab-link.active {
    background: var(--surface-subtle);
    color: var(--text-primary);
    box-shadow: none;
}

.gc-nav-track-host .gc-tabs-minimal .gc-tab-link.active:hover,
.gc-nav-track-host .gc-tabs-minimal .gc-tab-link.active:focus-visible {
    background: var(--surface-subtle);
    color: var(--text-primary);
    box-shadow: none;
}

/* Защита: underline/pill track в nav-track не используются */
.gc-nav-track-host .gc-tabs--underline::before,
.gc-nav-track-host .gc-tabs--underline .gc-tabs-indicator,
.gc-nav-track-host .gc-tabs--pill .gc-tabs-indicator {
    display: none;
}

.gc-nav-track-host .gc-tabs--underline .gc-tab-link,
.gc-nav-track-host .gc-tabs--underline button.gc-tab-link {
    margin-bottom: 0;
    font-weight: 500;
}

/* ========================================
   Нижний мобильный навбар — icon-only tab bar
   ======================================== */

.gc-mobile-nav-bottom {
    position: fixed;
    /* Instagram 2026 Liquid Glass: floating-капсула с боковым воздухом, не full-bleed и не max-content. */
    bottom: calc(var(--gc-mobile-bottom-nav-inset-x) + env(safe-area-inset-bottom, 0px));
    /* iOS WebKit: сдвиг к низу видимой области при схлопывании адресной строки (mobile-fixed-bottom-visual-viewport.js).
       Standalone web app — без Safari chrome, сдвиг = 0. */
    transform: translateY(var(--gc-visual-viewport-bottom-shift, 0px));
    left: calc(var(--gc-mobile-bottom-nav-inset-x) + env(safe-area-inset-left, 0px));
    right: calc(var(--gc-mobile-bottom-nav-inset-x) + env(safe-area-inset-right, 0px));
    height: auto;
    box-sizing: border-box;
    margin: 0;
    width: auto;
    z-index: var(--z-fixed, 1030);
    display: none;
    padding: var(--space-1) var(--space-2);
    background: var(--gc-mobile-nav-nav-track-bg);
    backdrop-filter: blur(var(--gc-mobile-nav-glass-blur));
    -webkit-backdrop-filter: blur(var(--gc-mobile-nav-glass-blur));
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    box-shadow: var(--gc-subheader-control-shadow);
    overflow: visible;
    transition: background-color var(--transition-fast), border-color var(--transition-fast),
        transform var(--transition-base) ease-out;
}

/* Показываем только на мобильных */
@media (max-width: 991.98px) {
    .gc-mobile-nav-bottom {
        display: block;
    }

    /* Скрытие таббара при скролле вниз (mobile-nav-scroll-hide.js).
       Сдвиг visual viewport сохраняем — иначе iOS-gap после возврата. */
    html.gc-mobile-chrome-scroll-hidden .gc-mobile-nav-bottom:not(.gc-nav-preview),
    .gc-mobile-nav-bottom.gc-mobile-nav-bottom--hidden {
        transform: translate3d(
            0,
            calc(
                100% + var(--gc-mobile-bottom-nav-inset-x) + env(safe-area-inset-bottom, 0px) + 2px
                    + var(--gc-visual-viewport-bottom-shift, 0px)
            ),
            0
        );
        pointer-events: none;
    }
}

.gc-mobile-nav-bottom__items {
    display: flex;
    align-items: stretch;
    height: var(--space-12);
    min-height: var(--space-12);
    margin: 0;
}

.gc-mobile-nav-bottom .nav-link {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--text-secondary);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.gc-mobile-nav-bottom .nav-link i {
    display: block;
    margin: 0;
    font-size: var(--font-size-22);
    line-height: 1;
    transition: color var(--transition-fast);
}

.gc-mobile-nav-bottom .nav-link.active {
    background: transparent;
    color: var(--text-primary);
    box-shadow: none;
}

@media (hover: hover) {
    .gc-mobile-nav-bottom .nav-link:hover {
        background: transparent;
        color: var(--text-primary);
    }
}

.gc-mobile-nav-bottom .nav-link:focus-visible {
    outline: var(--gc-focus-outline);
    outline-offset: var(--gc-focus-outline-offset);
}

.gc-mobile-nav-bottom .nav-link.active:hover {
    background: transparent;
    color: var(--text-primary);
    filter: none;
}

/* Закреплённые посты ленты канала — фикс. снизу (как нижний таббар) */
.gc-mobile-nav-pinned-fixed {
    position: fixed;
    bottom: 0;
    transform: translateY(var(--gc-visual-viewport-bottom-shift, 0px));
    left: 0;
    right: 0;
    padding-left: var(--space-2);
    padding-right: var(--space-2);
    padding-top: var(--space-2);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--space-2));
    z-index: var(--z-fixed, 1030);
    width: auto;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
    background: var(--surface-panel) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-top: 1px solid var(--border-subtle) !important;
    box-shadow: 0 -8px 32px 0 color-mix(in srgb, var(--fill-emphasis) 10%, transparent);
    transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

[data-theme="dark"] .gc-mobile-nav-pinned-fixed {
    background: var(--surface-panel) !important;
}

[data-theme="light"] .gc-mobile-nav-pinned-fixed {
    box-shadow: 0 -8px 32px 0 color-mix(in srgb, var(--fill-emphasis) 8%, transparent);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .gc-mobile-nav-pinned-fixed {
        box-shadow: 0 -8px 32px 0 color-mix(in srgb, var(--fill-emphasis) 8%, transparent);
    }
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .gc-mobile-nav-pinned-fixed {
        background: var(--surface-panel) !important;
    }
}

.gc-mobile-nav-pinned-fixed .gc-mobile-nav-pinned {
    width: 100%;
}

.gc-mobile-nav-pinned-fixed .channel-pinned-switcher {
    padding: var(--space-2) var(--space-2);
    gap: var(--space-2);
    cursor: pointer;
}

.gc-mobile-nav-pinned-fixed .sidebar-list-title {
    font-size: var(--font-size-14);
    -webkit-line-clamp: 1;
    line-clamp: 1;
}

@supports not (backdrop-filter: blur(20px)) {
    .gc-mobile-nav-pinned-fixed {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

@media (min-width: 992px) {
    .gc-mobile-nav-pinned-fixed {
        display: none !important;
    }
}

/* --gc-body-pad-bottom = высота .gc-mobile-nav-bottom (ряд + padding + safe-area).
   Classic: padding на body (документ скроллится). Inertia — на колонке (layout-utilities),
   потому что body.inertia-shell { padding-bottom: 0 }.
   + space/6 — воздух над баром: футер <992 скрыт и больше не даёт этот зазор.
   Compose-док канала перебивает padding-bottom в posts.css. */
@media (max-width: 991.98px) {
    body:has(.gc-mobile-nav-bottom) {
        --gc-body-pad-bottom: var(--gc-mobile-bottom-nav-outer-height);
    }

    body:not(.inertia-shell):has(.gc-mobile-nav-bottom):not(:has(.channel-feed-mobile-dock.has-compose)):not(:has(#post-compose-dock)) {
        padding-bottom: calc(var(--space-6) + var(--gc-body-pad-bottom));
    }
}

/* ========================================
   Дуэль - специальная навигация для переключения раундов
   ======================================== */

.gc-duel-nav-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 0 var(--space-4);
}

.gc-duel-nav-btn {
    color: var(--text-primary);
    min-width: 40px;
    height: 60px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: var(--transition-fast);
}

.gc-duel-nav-btn:hover:not(:disabled) {
    opacity: 0.85;
}

.gc-duel-nav-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Перекрываем .gc-btn-ghost (font-secondary) и .gc-btn:disabled (opacity 0.9) в нижнем баре дуэли */
.gc-mobile-nav-bottom .gc-duel-nav-btn.gc-btn-ghost {
    color: var(--text-primary);
}

.gc-mobile-nav-bottom .gc-duel-nav-btn.gc-btn:disabled {
    opacity: 0.35 !important;
    background: transparent !important;
}

.gc-duel-nav-title {
    flex-grow: 1;
    text-align: center;
    color: var(--text-primary);
    font-size: var(--font-size-14);
}

/* ========================================
   UI Kit Docs Preview Styles
   ======================================== */

/* Контейнер для превью нижнего навбара в документации */
.gc-nav-preview-container {
    width: 430px;
    min-height: 96px;
    position: relative;
    margin: 0 auto;
}

/* Превью нижнего навбара — floating-капсула, внутри phone-frame */
.gc-mobile-nav-bottom.gc-nav-preview {
    position: absolute !important;
    bottom: var(--gc-mobile-bottom-nav-inset-x) !important;
    left: var(--gc-mobile-bottom-nav-inset-x) !important;
    right: var(--gc-mobile-bottom-nav-inset-x) !important;
    transform: none !important;
    display: block !important;
}

/* Контейнер для превью верхнего навбара */
.gc-nav-preview-top-container {
    width: 430px;
    min-height: 160px;
    position: relative;
    margin: 0 auto;
}

/* Маленький контейнер для navbar level 2 (без табов) */
.gc-nav-preview-top-container-small {
    min-height: 80px;
}

/* Превью верхнего навбара - позиционируем абсолютно внутри контейнера */
nav.gc-mobile-nav-top.gc-nav-preview-top {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    display: block !important; /* Переопределяем display none на больших экранах */
}