.menu-root {
    --menu-header-height: 64px;
    --menu-category-height: 48px;
}

.menu-category-nav {
    background: var(--horoso-bg);
    border-bottom: 1px solid var(--horoso-line);
    color: var(--horoso-ink);
}

.menu-category-nav.is-enhanced {
    position: fixed;
    z-index: 1010;
    top: var(--menu-header-height);
    inset-inline: 0;
    visibility: hidden;
    pointer-events: none;
}

.menu-category-nav.is-enhanced.is-visible {
    visibility: visible;
    pointer-events: auto;
}

.menu-category-rail { position: relative; }
.menu-category-scroll {
    position: relative;
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-padding-inline: 44px;
}
.menu-category-scroll::-webkit-scrollbar { display: none; }
.is-enhanced .menu-category-scroll { cursor: grab; user-select: none; }
.is-enhanced .menu-category-scroll.is-dragging,
.is-dragging .menu-category-link { cursor: grabbing; }
.menu-category-link {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 10px 14px 7px;
    border-bottom: 3px solid transparent;
    color: var(--horoso-muted);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
}
.menu-category-link + .menu-category-link::before {
    content: '';
    position: absolute;
    left: 0;
    height: 14px;
    border-left: 1px solid var(--horoso-line);
}
.menu-category-link:hover,
.menu-category-link:focus-visible { color: var(--horoso-ink); background: var(--horoso-surface); }
.menu-category-link:focus-visible { outline: 2px solid var(--horoso-accent-strong); outline-offset: -3px; }
.menu-category-link.is-active { color: var(--horoso-accent-strong); border-bottom-color: var(--horoso-accent); }
.menu-category-rail::before,
.menu-category-rail::after {
    content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    /* Cover fractional scroll-clip edges without changing the 32px fade. */
    width: 33px;
    pointer-events: none;
    opacity: 0;
}
.menu-category-rail::before { left: -1px; background: linear-gradient(to right, var(--horoso-bg) 1px, transparent); }
.menu-category-rail::after { right: -1px; background: linear-gradient(to left, var(--horoso-bg) 1px, transparent); }
[data-overflow-start="true"]::before,
[data-overflow-end="true"]::after { opacity: 1; }
.menu-root [data-menu-category-section] { scroll-margin-top: calc(var(--menu-header-height) + var(--menu-category-height) + 8px); }
@media print { .menu-category-nav { display: none !important; } }