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

.shop-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:20px;

    background:#ffffff;

    border:1px solid #ECECEC;

    border-radius:10px;

    padding:18px 24px;

    margin-bottom:30px;

}

.shop-toolbar__left{

    font-size:15px;

    color:#555;

}

.shop-toolbar__left strong{

    color:#082C6C;

}

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

.shop-toolbar__right{

    display:flex;

    align-items:center;

    gap:15px;

    flex-wrap:wrap;

}

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

.shop-toolbar__select{

    height:42px;

    padding:0 15px;

    border:1px solid #DDD;

    border-radius:8px;

    background:#ffffff;

    color:#444;

    font-size:14px;

    cursor:pointer;

}

.shop-toolbar__select:focus{

    outline:none;

    border-color:#082C6C;

}

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

.shop-toolbar__view{

    display:flex;

    gap:10px;

}

.shop-toolbar__button{

    width:42px;

    height:42px;

    border:1px solid #DDD;

    border-radius:8px;

    background:#ffffff;

    cursor:pointer;

    transition:.25s;

}

.shop-toolbar__button:hover{

    background:#F5B51D;

    border-color:#F5B51D;

    color:#082C6C;

}

.shop-toolbar__button.active{

    background:#082C6C;

    border-color:#082C6C;

    color:#ffffff;

}

/*==================================================
    SHOP TOOLBAR — LARGE TABLET
==================================================*/

@media (max-width:1200px){

    .shop-toolbar{

        padding:16px 20px;

        gap:16px;

    }

    .shop-toolbar__right{

        gap:12px;

    }

    .shop-toolbar__select{

        padding:0 12px;

    }

}


/*==================================================
    SHOP TOOLBAR — TABLET
==================================================*/

@media (max-width:992px){

    .shop-toolbar{

        padding:16px 18px;

    }

    .shop-toolbar__left{

        font-size:14px;

    }

    .shop-toolbar__right{

        gap:10px;

    }

    .shop-toolbar__select{

        height:40px;

        font-size:13px;

    }

    .shop-toolbar__button{

        width:40px;

        height:40px;

    }

}


/*==================================================
    SHOP TOOLBAR — SMALL TABLET
==================================================*/

@media (max-width:768px){

    .shop-toolbar{

        flex-direction:column;

        align-items:stretch;

        gap:14px;

        padding:16px;

    }

    .shop-toolbar__left{

        width:100%;

    }

    .shop-toolbar__right{

        width:100%;

        display:flex;

        align-items:center;

        gap:10px;

    }

    .shop-toolbar__select{

        flex:1;

        min-width:0;

        width:auto;

        height:42px;

    }

    .shop-toolbar__view{

        flex-shrink:0;

    }

}


/*==================================================
    SHOP TOOLBAR — MOBILE
==================================================*/

@media (max-width:576px){

    .shop-toolbar{

        padding:14px;

        border-radius:8px;

        gap:12px;

    }

    .shop-toolbar__left{

        font-size:13px;

    }

    .shop-toolbar__right{

        display:grid;

        grid-template-columns:1fr 1fr auto;

        width:100%;

        gap:8px;

    }

    .shop-toolbar__select{

        width:100%;

        min-width:0;

        height:42px;

        padding:0 10px;

        font-size:13px;

    }

    .shop-toolbar__view{

        display:flex;

        gap:6px;

    }

    .shop-toolbar__button{

        width:40px;

        height:42px;

    }

}


/*==================================================
    SHOP TOOLBAR — SMALL MOBILE
==================================================*/

@media (max-width:400px){

    .shop-toolbar{

        padding:12px;

    }

    .shop-toolbar__left{

        font-size:12px;

    }

    .shop-toolbar__right{

        grid-template-columns:1fr 1fr;

    }

    .shop-toolbar__select{

        font-size:12px;

        padding:0 8px;

    }

    .shop-toolbar__view{

        grid-column:1 / -1;

        justify-content:flex-end;

    }

    .shop-toolbar__button{

        width:42px;

        height:40px;

    }

}