/*==================================================
    TIPA MART
    SHOP TOOLBAR
==================================================*/


/*==================================================
    SHOP TOOLBAR
==================================================*/

.shop-toolbar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    width:100%;

    margin-bottom:24px;

    padding:16px 20px;

    background:#FFFFFF;

    border:1px solid #E5E7EB;

    border-radius:8px;

}


/*==================================================
    LEFT
==================================================*/

.shop-toolbar__left{

    display:flex;

    align-items:center;

    min-width:0;

}


.shop-toolbar__count{

    color:#666666;

    font-size:14px;

    font-weight:400;

    line-height:1.5;

}


.shop-toolbar__count strong{

    color:#222222;

    font-weight:600;

}


/*==================================================
    RIGHT
==================================================*/

.shop-toolbar__right{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:20px;

}


/*==================================================
    FIELD
==================================================*/

.shop-toolbar__field{

    display:flex;

    align-items:center;

    gap:8px;

}


.shop-toolbar__field label{

    margin:0;

    color:#555555;

    font-size:14px;

    font-weight:400;

    white-space:nowrap;

}


/*==================================================
    SELECT
==================================================*/

.shop-toolbar__select{

    height:40px;

    min-width:145px;

    padding:0 34px 0 12px;

    border:1px solid #DCDCDC;

    border-radius:6px;

    background:#FFFFFF;

    color:#333333;

    font-family:inherit;

    font-size:14px;

    font-weight:400;

    cursor:pointer;

    outline:none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;

}


.shop-toolbar__select:hover{

    border-color:#BFC4CA;

}


.shop-toolbar__select:focus{

    border-color:#082C6C;

    box-shadow:
        0 0 0 3px rgba(8,44,108,.08);

}


/*==================================================
    VIEW BUTTONS
==================================================*/

.shop-toolbar__view{

    display:flex;

    align-items:center;

    gap:4px;

    padding:3px;

    border:1px solid #DCDCDC;

    border-radius:6px;

    background:#F8F9FA;

}


/*==================================================
    VIEW BUTTON
==================================================*/

.shop-toolbar__button{

    display:flex;

    align-items:center;

    justify-content:center;

    width:36px;

    height:34px;

    padding:0;

    border:0;

    border-radius:4px;

    background:transparent;

    color:#777777;

    font-size:14px;

    cursor:pointer;

    transition:
        background-color .2s ease,
        color .2s ease;

}


.shop-toolbar__button:hover{

    color:#082C6C;

    background:#FFFFFF;

}


/*==================================================
    ACTIVE VIEW
==================================================*/

.shop-toolbar__button.active{

    background:#082C6C;

    color:#FFFFFF;

}


/*==================================================
    ACTIVE VIEW HOVER
==================================================*/

.shop-toolbar__button.active:hover{

    background:#082C6C;

    color:#FFFFFF;

}


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

@media (max-width:1200px){

    .shop-toolbar{

        padding:15px 18px;

    }

    .shop-toolbar__right{

        gap:15px;

    }

    .shop-toolbar__select{

        min-width:135px;

    }

}


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

@media (max-width:992px){

    .shop-toolbar{

        align-items:flex-start;

        flex-direction:column;

        gap:15px;

    }

    .shop-toolbar__left{

        width:100%;

    }

    .shop-toolbar__right{

        width:100%;

        justify-content:space-between;

        flex-wrap:wrap;

        gap:12px;

    }

}


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

@media (max-width:768px){

    .shop-toolbar{

        margin-bottom:20px;

        padding:15px;

    }

    .shop-toolbar__right{

        justify-content:flex-start;

    }

    .shop-toolbar__field{

        flex:1 1 auto;

    }

    .shop-toolbar__select{

        min-width:130px;

    }

}


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

@media (max-width:576px){

    .shop-toolbar{

        gap:14px;

        padding:14px;

        border-radius:7px;

    }

    .shop-toolbar__count{

        font-size:13px;

    }

    .shop-toolbar__right{

        display:grid;

        grid-template-columns:1fr 1fr;

        width:100%;

        gap:10px;

    }

    .shop-toolbar__field{

        width:100%;

        flex-direction:column;

        align-items:stretch;

        gap:5px;

    }

    .shop-toolbar__field label{

        font-size:12px;

    }

    .shop-toolbar__select{

        width:100%;

        min-width:0;

        height:40px;

        font-size:13px;

    }

    .shop-toolbar__view{

        grid-column:1 / -1;

        width:100%;

        justify-content:center;

    }

}


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

@media (max-width:400px){

    .shop-toolbar{

        padding:12px;

    }

    .shop-toolbar__right{

        grid-template-columns:1fr;

    }

    .shop-toolbar__view{

        grid-column:auto;

    }

    .shop-toolbar__select{

        height:38px;

        font-size:12px;

    }

    .shop-toolbar__button{

        width:34px;

        height:32px;

    }

}