/* ==========================================================
   VBC Framework
   Product Toolbar
   Version: 2.0.0 -- trimmed to Sort by only
========================================================== */

.vbc-toolbar{
    display:flex;
    align-items:center;

    margin-bottom:40px;
    padding:22px 28px;

    background:var(--vbc-color-surface);

    border:1px solid var(--vbc-color-border);

    border-radius:0;

    box-shadow:var(--vbc-shadow-sm);
}

/* ==========================================================
   Sorting
========================================================== */

.vbc-toolbar__sorting{

    display:flex;

    align-items:center;

    gap:14px;

}

.vbc-toolbar__sorting label{

    color:var(--vbc-color-heading);

    font-size:14px;

    font-weight:600;

    white-space:nowrap;

}

.vbc-toolbar__sorting select{

    min-width:220px;

    height:46px;

    padding:0 18px;

    border:1px solid var(--vbc-color-border);

    border-radius:0;

    background:var(--vbc-color-background);

    color:var(--vbc-color-heading);

    font-size:14px;

    cursor:pointer;

    transition:.25s ease;

}

.vbc-toolbar__sorting select:hover{

    border-color:var(--vbc-color-primary);

}

.vbc-toolbar__sorting select:focus{

    outline:none;

    border-color:var(--vbc-color-primary);

    box-shadow:0 0 0 4px rgba(76,27,36,.08);

}

/* ==========================================================
   Responsive
========================================================== */

@media (max-width:768px){

    .vbc-toolbar{

        padding:20px;

    }

    .vbc-toolbar__sorting{

        width:100%;

        flex-direction:column;

        align-items:flex-start;

    }

    .vbc-toolbar__sorting select{

        width:100%;

        min-width:0;

    }

}