.fv-category-toolbar {
    min-height:
        98px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    border-bottom:
        1px solid
        #e8e9eb;
}


.fv-category-toolbar-title
h1 {
    margin: 0;

    color:
        #111111;

    font-size:
        18px;

    font-weight:
        700;

    text-transform:
        none;
}


.fv-category-toolbar-title
p {
    margin:
        6px 0 0;

    color:
        #777d87;

    font-size:
        12px;
}


.fv-category-toolbar-actions {
    display:
        flex;

    align-items:
        center;

    gap:
        20px;
}


.fv-category-toolbar-actions
label {
    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    color:
        #111111;

    font-size:
        11px;
}


.fv-category-toolbar-actions
select {
    width:
        210px;

    height:
        40px;

    padding:
        0 12px;

    border:
        1px solid
        #d7dade;

    border-radius:
        7px;

    background:
        #ffffff;

    outline: 0;
}


.fv-category-toolbar-actions
select:focus {
    border-color:
        #ff587d;
}


.fv-view-selector {
    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    font-size:
        11px;
}


.fv-view-selector
button {
    width:
        28px;

    height:
        28px;

    display:
        grid;

    place-items:
        center;

    border: 0;

    background:
        transparent;

    color:
        #d1d4d8;

    font-size:
        18px;

    cursor:
        pointer;
}


.fv-view-selector
button.active {
    color:
        #ff587d;
}


.fv-mobile-filter-btn {
    display:
        none;
}


@media (
    max-width: 900px
) {

    .fv-category-toolbar-actions {
        gap:
            9px;
    }


    .fv-category-toolbar-actions
    select {
        width:
            160px;
    }

}


@media (
    max-width: 720px
) {

    .fv-category-toolbar {
        min-height:
            auto;

        align-items:
            flex-start;

        flex-direction:
            column;

        padding:
            14px 0;
    }


    .fv-category-toolbar-title
    h1 {
        font-size:
            17px;
    }


    .fv-category-toolbar-actions {
        width:
            100%;

        justify-content:
            space-between;
    }


    .fv-mobile-filter-btn {
        min-height:
            36px;

        display:
            inline-flex;

        align-items:
            center;

        gap:
            6px;

        padding:
            0 12px;

        border:
            1px solid
            #ff587d;

        border-radius:
            5px;

        background:
            #ffffff;

        color:
            #ff587d;
    }


    .fv-category-toolbar-actions
    label > span {
        display:
            none;
    }


    .fv-category-toolbar-actions
    select {
        width:
            145px;

        height:
            36px;
    }

}