/* Wrapper makes scroller# horizontally scrollable */
.category-scroller-wrapper {
    transition: all 0.3s ease;
    overflow-x: auto;                     /* enable horizontal scroll */
    white-space: nowrap;                   /* keep all links in one line */
    -webkit-overflow-scrolling: touch;    /* smooth scroll on iOS */
/*    padding-bottom: 0;                       /* slightly more padding */
    background-color: transparent;                /* transparent background */
    scrollbar-width: thin;                 /* Firefox scrollbar */

    position: sticky;   /* <-- sticky behavior */
    top: 0;             /* stick when scrolled to top */
    z-index: 2;       /* stay above other content */
    margin: 0 20px 20px;
    display: flex;
    justify-content: space-around;
}

/* Hide scrollbar for Webkit browsers (Chrome, Safari) */
.category-scroller-wrapper::-webkit-scrollbar {
    height: 6px;
}
.category-scroller-wrapper::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.2);
    border-radius: 3px;
}

/* Inner container uses flex for horizontal layout */
.category-scroller {
    display: inline-flex;
    gap: 12px;                             /* space between links */
    align-items: center;                   /* vertically align links */
}

/* Individual category links */
.category-link {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    height: 40px;
    border-radius: 5px;
    padding: 10px;
    border: 1px solid #6e716e;
    background-color: #ffffff;
    cursor: pointer;
    font-size: 14px;
    line-height: 20px;
    font-variation-settings: "wght" 400, "opsz" 8;
    --ids-typography-name: mobile / bodyEmphasized;
    color: #000000 !important;
}

/* Hover effect */
.category-link:hover {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    height: 40px;
    border-radius: 5px;
    padding: 10px;
    border: 1px solid #f0f0f0 !important;
    background-color: #ffffff !important;
    cursor: pointer;
    font-size: 14px;
    line-height: 20px;
    font-variation-settings: "wght" 400, "opsz" 8;
    --ids-typography-name: mobile / bodyEmphasized;
    color: #000000 !important;
    text-decoration: none;
}

/* Active category */
.category-link.active {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    height: 40px;
    border-radius: 5px;
    padding: 10px;
    border: 1px solid #6e716e;
    background-color: #DCEDC8;
    cursor: pointer;
    font-size: 14px;
    line-height: 20px;
    font-variation-settings: "wght" 400, "opsz" 8;
    --ids-typography-name: mobile / bodyEmphasized;
    color: #000000 !important;
}

/* Responsive: smaller links on mobile */
@media (max-width: 768px) {
    .category-link {
        padding: 10px;
        font-size: 13px;
    }
    .category-scroller-wrapper {
        padding: 5px 0 10px;
    }
}

                /* @media (min-width: 768px), print {
    .page-layout-1column .filter-content {
        margin-top: 0 !important;
    }
} */

    .filter-options {
        margin-top: 10px !important;
    }