/* Scoped navbar styles — avoids conflicts with Bootstrap site-wide styles */
.site-chrome {
    --nav-teal-950: #0b3d3f;
    --nav-teal-900: #0d3b3e;
    --nav-teal-600: #0f9c8f;
    --nav-teal-500: #14b8a6;
    --nav-teal-300: #5eead4;
    --nav-orange-600: #ea7c1f;
    --nav-orange-500: #f5a623;
    --nav-yellow-400: #ffd166;
    --nav-ink-900: #10262b;
    --nav-paper: #fafbfb;
    --nav-white: #ffffff;
    --nav-line: #e6ecec;
    --nav-container: 1200px;
    --nav-radius-sm: 10px;
    --nav-shadow-card: 0 4px 18px -8px rgba(11, 61, 63, 0.18);
    font-family: 'Inter', 'Cairo', sans-serif;
}

.site-chrome .site-container {
    max-width: var(--nav-container);
    margin: 0 auto;
    padding: 0 24px;
}

.site-chrome .topbar {
    background: var(--nav-teal-950);
    color: var(--nav-yellow-400);
    font-size: 13px;
}

.site-chrome .topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 24px;
    flex-wrap: wrap;
    gap: 6px;
}

.site-chrome .topbar__links a {
    color: var(--nav-white);
    opacity: 0.85;
    text-decoration: none;
}

.site-chrome .topbar__links a:hover { opacity: 1; }
.site-chrome .topbar__sep { opacity: 0.4; margin: 0 8px; }

.site-chrome .site-header {
    background: var(--nav-white);
    border-bottom: 1px solid var(--nav-line);
    position: relative;
}

.site-chrome .site-header__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 24px;
}

.site-chrome .brand {
    font-family: 'Cairo', 'Inter', sans-serif;
    font-weight: 900;
    font-size: 26px;
    letter-spacing: -0.02em;
    text-decoration: none;
    flex-shrink: 0;
}

.site-chrome .brand__mark { color: var(--nav-teal-600); }
.site-chrome .brand__mark--accent { color: var(--nav-orange-500); }

.site-chrome .site-search {
    flex: 1;
    display: flex;
    max-width: 560px;
    margin: 0 auto;
    position: relative;
}

.site-chrome .site-search input {
    flex: 1;
    padding: 12px 18px;
    border: 2px solid var(--nav-line);
    border-right: none;
    border-radius: var(--nav-radius-sm) 0 0 var(--nav-radius-sm);
    font-size: 14px;
    outline: none;
}

.site-chrome .site-search input:focus { border-color: var(--nav-teal-500); }

.site-chrome .site-search button {
    background: var(--nav-orange-500);
    border: none;
    color: var(--nav-white);
    padding: 0 20px;
    border-radius: 0 var(--nav-radius-sm) var(--nav-radius-sm) 0;
    cursor: pointer;
}

.site-chrome .site-header__actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.site-chrome .icon-btn {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nav-paper);
    color: var(--nav-ink-900);
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.site-chrome .icon-btn:hover { background: var(--nav-teal-300); }

.site-chrome .icon-btn__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--nav-orange-500);
    color: var(--nav-white);
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-chrome .main-nav {
    background: linear-gradient(90deg, var(--nav-teal-950), var(--nav-teal-900));
    position: relative;
}

.site-chrome .main-nav__inner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 24px;
}

.site-chrome .cat-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--nav-orange-500);
    color: var(--nav-white);
    border: none;
    padding: 14px 20px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}

.site-chrome .cat-toggle__chevron { margin-left: 4px; }

.site-chrome .main-nav__links {
    list-style: none;
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    flex: 1;
}

.site-chrome .main-nav__links a {
    display: block;
    padding: 16px 16px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.site-chrome .main-nav__links a:hover,
.site-chrome .main-nav__links a.is-active {
    color: var(--nav-yellow-400);
}

.site-chrome .nav-vendor-stats {
    display: flex;
    gap: 16px;
    margin-left: auto;
    padding: 8px 0;
}

.site-chrome .nav-vendor-stats a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-size: 13px;
}

.site-chrome .nav-vendor-stats .stat-value {
    font-weight: 700;
    font-size: 14px;
}

.site-chrome .nav-vendor-stats .stat-label {
    font-size: 11px;
    opacity: 0.75;
}

.site-chrome .cat-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 24px;
    z-index: 1000;
    width: min(320px, calc(100vw - 48px));
    max-height: 420px;
    overflow-y: auto;
    background: var(--nav-white);
    border-radius: var(--nav-radius-sm);
    box-shadow: var(--nav-shadow-card);
    border: 1px solid var(--nav-line);
}

.site-chrome .cat-menu.is-open { display: block; }

.site-chrome .cat-menu a {
    display: block;
    padding: 10px 16px;
    color: var(--nav-ink-900);
    font-size: 14px;
    text-decoration: none;
    border-bottom: 1px solid var(--nav-line);
}

.site-chrome .cat-menu a:hover {
    background: var(--nav-paper);
    color: var(--nav-teal-600);
}

.site-chrome .cat-menu__child {
    padding-left: 24px;
    font-size: 13px;
    color: #4a6367;
}

.site-chrome .site-chrome__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 24px;
    z-index: 1001;
    background: var(--nav-white);
    border: 1px solid var(--nav-line);
    border-radius: var(--nav-radius-sm);
    box-shadow: var(--nav-shadow-card);
}

.site-chrome .mobile-header {
    display: none;
    padding: 10px 16px;
    background: var(--nav-white);
    border-bottom: 1px solid var(--nav-line);
}

.site-chrome .mobile-header__inner {
    display: flex;
    align-items: center;
    gap: 10px;
}

.site-chrome .mobile-header__search {
    flex: 1;
    display: flex;
    position: relative;
}

.site-chrome .mobile-header__search input {
    flex: 1;
    padding: 8px 12px;
    border: 2px solid var(--nav-line);
    border-right: none;
    border-radius: var(--nav-radius-sm) 0 0 var(--nav-radius-sm);
    font-size: 14px;
}

.site-chrome .mobile-header__search button {
    background: var(--nav-orange-500);
    border: none;
    color: var(--nav-white);
    padding: 0 14px;
    border-radius: 0 var(--nav-radius-sm) var(--nav-radius-sm) 0;
    cursor: pointer;
}

.site-chrome .mobile-bottom-nav {
    display: none;
    background: linear-gradient(90deg, var(--nav-teal-950), var(--nav-teal-900));
}

.site-chrome .mobile-bottom-nav a {
    flex: 1;
    text-align: center;
    padding: 10px 4px;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 11px;
}

.site-chrome .mobile-bottom-nav a.is-active { color: var(--nav-yellow-400); }

.site-chrome .mobile-bottom-nav i {
    display: block;
    font-size: 16px;
    margin-bottom: 2px;
}

.site-chrome .mobile-bottom-nav__row {
    display: flex;
}

.site-chrome .menu-toggle {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--nav-radius-sm);
    background: var(--nav-teal-950);
    color: var(--nav-white);
    cursor: pointer;
    flex-shrink: 0;
}

@media (max-width: 991px) {
    .site-chrome .site-header__inner .site-search,
    .site-chrome .site-header__inner .brand { display: none; }
    .site-chrome .mobile-header { display: block; }
    .site-chrome .main-nav__links { display: none; }
    .site-chrome .mobile-bottom-nav { display: block; }
    .site-chrome .nav-vendor-stats { display: none; }
}

@media (min-width: 992px) {
    .site-chrome .mobile-header,
    .site-chrome .mobile-bottom-nav { display: none !important; }
}

.site-chrome .site-chrome__panel.collapse:not(.show) {
    display: none;
}

.site-chrome .site-chrome__panel.collapse.show {
    display: block;
}