/*=========================================================
    CATEGORY NAVIGATION
=========================================================*/

.kk-category-nav{

    position:sticky;

    top:70px;

    z-index:50;

    background:#FFFDF9;

    border-bottom:1px solid #F0E6D8;

}

.kk-category-scroll{

    display:flex;

    gap:16px;

    overflow-x:auto;

    padding:18px;

    scrollbar-width:none;

}

.kk-category-scroll::-webkit-scrollbar{

    display:none;

}

.kk-category-tab{

    min-width:105px;

    background:#fff;

    border:1px solid #EFE4D3;

    border-radius:20px;

    padding:16px 14px;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-decoration:none;

    color:#333;

    transition:.30s;

    flex-shrink:0;

}

.kk-category-tab:hover{

    background:var(--kk-primary);

    color:#fff;

    transform:translateY(-3px);

}

.kk-category-tab-icon{

    width:52px;

    height:52px;

    border-radius:50%;

    background:#FFF4E8;

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--kk-primary);

    font-size:22px;

    margin-bottom:10px;

}

.kk-category-tab:hover .kk-category-tab-icon{

    background:#fff;

}

.kk-category-tab span{

    font-size:14px;

    font-weight:700;

    text-align:center;

}
/*=========================================================
    ACTIVE CATEGORY
=========================================================*/

.kk-category-tab.active{

    background:var(--kk-primary);

    color:#fff;

    box-shadow:0 10px 25px rgba(139,0,0,.25);

    transform:translateY(-3px);

}

.kk-category-tab.active .kk-category-tab-icon{

    background:#fff;

    color:var(--kk-primary);

}

/*=========================================
    MOBILE
=========================================*/

@media(max-width:768px){

    .kk-category-nav{

        top:65px;

    }

    .kk-category-scroll{

        padding:14px;

        gap:12px;

    }

    .kk-category-tab{

        min-width:60px;

        padding:8px 8px;

    }

    .kk-category-tab-icon{

        width:30px;

        height:30px;

        font-size:13px;

    }

    .kk-category-tab span{

        font-size:10px;

    }

}