.container__menu-long {
    background-color: var(--navline-bgcolor);
}

/* Container for buttons and menu */
.menu-long-container {
    display: flex;
    align-items: center; /* Vertically align buttons with the menu */
    position: relative; /* Needed for potential absolute positioning if desired */
    /*background-color: rgba(0,0,0,0.03);*/
    background-color: transparent;
    padding: 0 5px; /* Add some padding around the container */
    border-radius: 0.25rem; /* Optional: match bootstrap styles */
}

/* Style for the scroll buttons */
.scroll-btn {
    align-items: center;
    display: flex;
    justify-content: center;
    z-index: 10; /* Ensure buttons are clickable */
    flex-shrink: 0; /* Prevent buttons from shrinking */
    
    background-color: rgba(0,0,0,.75);
    border-radius: 50%;
    border-width: 0;
    color: var(--color-default-10);
    pointer-events: auto;
    padding: 0;
    height: 26px;
    width: 26px;
}
.scroll-btn svg {
    flex-shrink: 0;
    align-items: center;
    display: flex;
    justify-content: center;
    vertical-align: middle;
    
    height: 16px;
    width: 16px;
}
.scroll-btn:disabled {
    opacity: 0;
    display: none;
    cursor: auto;
    width: 0;
}
.scroll-btn:hover:not(:disabled) {
    background-color: rgba(0,0,0,1.0);
    width: 26px;
}

/* Specific button margin */
#scroll-left-btn {
    margin-right: 5px;
}
#scroll-right-btn {
    margin-left: 5px;
}


/* Target the main navigation container by its ID */
#menu-long {
    /* --- HIDE SCROLLBAR --- */
    overflow-x: auto;   /* Still needs to be scrollable */
    /* Hide scrollbar for Chrome, Safari and Opera */
    &::-webkit-scrollbar {
        display: none; /* or height: 0; */
    }
    /* Hide scrollbar for IE, Edge and Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    /* --- End Hide Scrollbar --- */

    overflow-y: hidden; /* Hide vertical scrollbar */
    white-space: nowrap; /* Prevent text wrapping within the container itself */
    -webkit-overflow-scrolling: touch; /* Optional: Improves scrolling experience on iOS devices */

    flex-grow: 1; /* Allow menu to take available space */
    margin: 0; /* Reset margin if needed */
    padding-left: 0; /* Remove default padding if it interferes */
    padding-right: 0;

    /* Remove default navbar padding that might interfere */
    padding-top: 0;
    padding-bottom: 0;
}


/* Target the direct ul child within the main menu */
#menu-long > .navbar-nav {
    flex-wrap: nowrap; /* Keep items on one line */
    /* Ensure UL takes full width needed by items */
    display: inline-flex; /* Use inline-flex or flex depending on context */
    padding: 0; /* Restore vertical padding for links inside UL */
}


/* Optional: Ensure nav items don't shrink */
#menu-long .nav-item {
    flex-shrink: 0;
    padding: 5px 5px;
}
/* --- Other Styles --- */
#menu-long .nav-link {
    padding: 1px 9px;
    /*font-size: 18px;*/
    /*font-size: .875rem;*/
    font-size: calc(var(--font-body-scale) * 16px);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.25rem;
    
    color: black;
}
#menu-long .nav-link:hover,
#menu-long .nav-link:active,
#menu-long .nav-link.active {
    /*
    background-color: var(--base-2);
    color: var(--navbar-active-bgcolor);
    */
    background-color: var(--navbar-active-bgcolor);
    color: var(--navbar-active-color);
    text-decoration: none;
    transition: none;
}

#menu-long .nav-item.nav-item-sale .nav-link {
    background-color: var(--red);
    color: rgb(255,255,255);
}