/* ===============================
   CATEGORY SECTION
================================ */

.category-section{
    position:sticky;
    top:0;
    z-index:50;

    background:#fff;

    border-bottom:1px solid #eef2f7;
}



/* ===============================
   CATEGORY SLIDER
================================ */

.category-bar{
    display:flex;
    align-items:center;
    gap:8px;

    padding:0 8px;

    background:#fff;
}

/* ===============================
   NAVIGATION BUTTONS
================================ */

.category-nav{

    width:36px;
    height:36px;

    flex-shrink:0;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid #e5e7eb;
    border-radius:50%;

    background:#fff;

    color:#374151;

    cursor:pointer;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .15s ease,
        opacity .2s ease;
}

.category-nav:hover{

    background:#f97316;
    border-color:#f97316;
    color:#fff;

}

.category-nav:active{

    transform:scale(.94);

}

/* Disabled */

.category-nav.disabled{

    opacity:.35;

    pointer-events:none;

}

/* ===============================
   SCROLL CONTAINER
================================ */

.pill-scroll{
    flex:1;
    display:flex;
    align-items:center;

    gap:8px;

    padding:10px 10px;

    overflow-x:auto;
    overflow-y:hidden;

    white-space:nowrap;

    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;

    background:#fff;

    scrollbar-width:none;
}

.pill-scroll::-webkit-scrollbar{
    display:none;
}

.pill-scroll.hidden{
    display:none;
}

/* SUBCATEGORY DIVIDER */

#subcategoryPills{
    border-top:1px solid #f3f4f6;
}

/* ===============================
   PILL BUTTON
================================ */

.pill{
    flex:0 0 auto;

    display:flex;
    align-items:center;
    justify-content:center;

    height:36px;

    padding:0 14px;

    border-radius:999px;

    background:#f3f4f6;

    color:#111827;

    font-size:13px;
    font-weight:600;

    text-decoration:none;

    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease;

    user-select:none;
}

/* HOVER */

.pill:hover{
    background:#e5e7eb;
}

/* ACTIVE */

.pill.active{
    background:#f97316;
    color:#fff;

    box-shadow:
        0 4px 10px rgba(249,115,22,.22);
}

/* TAP EFFECT */

.pill:active{
    transform:scale(.96);
}

/* ===============================
   MOBILE APP STYLE
================================ */

@media (max-width:768px){

    .category-section{
        position:sticky;
        top:0;
    }

    .pill-scroll{
        gap:6px;

        padding:
            8px
            8px;
    }

    .pill{
        height:34px;

        padding:0 13px;

        font-size:12px;
    }


    .category-nav{
        display:none;
    }

    .category-bar{
        padding:0;
    }


}

/* ===============================
   EXTRA SMALL DEVICES
================================ */

@media (max-width:380px){

    .pill{
        height:32px;

        padding:0 11px;

        font-size:11.5px;
    }

}