/* =====================================
   CLOVER MENU UI
   WHEEL HOT WINGS
===================================== */


.clover-menu{

    width:100%;

}


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


.category-wrapper{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:20px;

    margin:40px 0 50px;

}



/* CATEGORY HOLDER - SHOW 6 ONLY */

.tabs{

    width:960px;

    display:grid;

    grid-auto-flow:column;

    grid-auto-columns:150px;

    gap:14px;

    overflow:hidden;

}



/* CATEGORY BUTTON */

.tab{

    width:150px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:0 12px;

    border:1px solid #f5a400 !important;

    border-radius:8px;

    background:#fff !important;

    color:#111 !important;

    font-size:13px;

    font-weight:900;

    letter-spacing:1px;

    line-height:18px;

    text-transform:uppercase;

    cursor:pointer;

    transition:.25s;

}



.tab:hover{

    background:#ffe2a0 !important;

}



.tab.is-active{

    background:#f5a400 !important;

    color:#000 !important;

}







/* =====================================
   LEFT / RIGHT ARROWS
===================================== */


.cat-arrow,
.category-wrapper .cat-arrow{

    width:52px !important;

    height:52px !important;

    min-width:52px !important;


    display:flex !important;

    align-items:center !important;

    justify-content:center !important;


    padding:0 !important;


    border:none !important;

    outline:none !important;

    box-shadow:none !important;


    border-radius:50% !important;


    background:#111 !important;

    color:white !important;


    font-size:32px !important;

    font-weight:700 !important;

    line-height:1 !important;


    cursor:pointer !important;


    appearance:none !important;

    -webkit-appearance:none !important;


    transition:.25s;


}



.cat-arrow:hover{

    background:#e84b10 !important;

}







/* =====================================
   MENU BOARD
===================================== */


.menu-board{


    max-width:1000px;

    margin:0 auto 60px;


    padding:40px 45px;


    border:1px dashed #f5a400;


    border-radius:10px;


    background:rgba(255,255,255,.85);


    backdrop-filter:blur(4px);


}






.category-title{


    text-align:center;


    font-size:42px;


    font-weight:900;


    margin-bottom:35px;


    text-transform:uppercase;


}







/* =====================================
   MENU ITEM
===================================== */


.menu-item{


    display:flex !important;


    align-items:center;


    gap:25px;


    width:100%;


    padding:18px 0;


    border-bottom:1px solid rgba(0,0,0,.12);


}



.menu-item:last-child{

    border-bottom:none;

}







/* IMAGE */

.item-img{


    width:120px !important;


    height:90px !important;


    min-width:120px;


    overflow:hidden;


    border-radius:12px;


    background:#111;


}



.item-img img{


    width:100% !important;


    height:100% !important;


    display:block;


    object-fit:cover !important;


}








/* DETAILS */

.details{


    flex:1;


}



.details h3{


    margin:0;


    color:#111;


    font-size:22px;


    font-weight:900;


    letter-spacing:2px;


    text-transform:uppercase;


}



.details p{


    margin-top:8px;


    color:#666;


    font-size:15px;


}








/* PRICE */

.price{


    min-width:95px;


    height:46px;


    display:flex;


    align-items:center;


    justify-content:center;


    padding:0 22px;


    background:#e84b10;


    color:white;


    border-radius:30px;


    font-size:18px;


    font-weight:900;


    white-space:nowrap;


}









/* =====================================
   TABLET
===================================== */


@media(max-width:1100px){


.tabs{

    width:780px;

    grid-auto-columns:130px;

}


.tab{

    width:130px;

}



}









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


@media(max-width:700px){



.category-wrapper{


    gap:8px;


}



.tabs{


    width:calc(100vw - 110px);


    grid-auto-columns:130px;


}



.tab{


    width:130px;


    height:45px;


    font-size:11px;


}



.cat-arrow{


    width:42px !important;


    height:42px !important;


    min-width:42px !important;


    font-size:26px !important;


}






.menu-board{


    padding:20px;


}




.category-title{


    font-size:30px;


}






.menu-item{


    gap:15px;


}




.item-img{


    width:90px !important;


    height:70px !important;


    min-width:90px;


}






.details h3{


    font-size:16px;


    letter-spacing:1px;


}





.details p{


    font-size:13px;


}






.price{


    min-width:70px;


    height:36px;


    padding:0 12px;


    font-size:14px;


}



}