.main-nav .nav-layout { display: flex; align-items: center; min-width: 0; }
.main-nav .nav-layout .nav-inner { flex: 1 1 auto; width: auto; min-width: 0; max-width: none; overflow-x: auto; scrollbar-width: none; }
.main-nav .nav-inner::-webkit-scrollbar { display: none; }
.main-nav .nav-inner > a { flex-shrink: 0; }
.main-nav .nav-layout > a.nav-feature { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; height: 52px; padding: 0 22px; border-left: 1px solid rgba(255,255,255,.2); background: var(--navy); color: #ffce37; font-size: 12px; font-weight: 800; white-space: nowrap; }
.main-nav .nav-layout > a.nav-feature:hover { background: #173c5e; }
.main-nav .nav-layout > a.nav-feature.active { background: #173c5e; box-shadow: inset 0 -3px 0 #ff9d00; color: #fff; }
.main-nav .nav-layout > a.nav-feature:focus-visible { outline: 2px solid #ff9d00; outline-offset: -3px; }

.main-nav .nav-inner > a.active {
    position: relative;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    box-shadow: inset 0 -3px 0 #ff9d00;
}

.main-nav .nav-inner > a.all-categories.active {
    background: #d96b00;
    box-shadow: inset 0 -3px 0 #fff;
}

.main-nav .nav-inner > a.active:hover { background: rgba(255, 255, 255, .2); }
.main-nav .nav-inner > a.all-categories.active:hover { background: #d96b00; }
.main-nav .nav-inner > a:focus-visible { outline: 2px solid #ff9d00; outline-offset: -3px; }

@media (max-width: 1100px) and (min-width: 761px) {
    .main-nav .nav-inner > a:nth-of-type(n+6) { display: flex; }
}

@media (max-width: 760px) {
    .main-nav .nav-inner > a { padding: 0 12px; }
    .main-nav .nav-inner > a.all-categories { padding: 0 12px; }
    .main-nav .nav-inner > a.all-categories span { margin-right: 6px; }
    .main-nav .nav-layout > a.nav-feature { padding: 0 11px; }
}