/*
|--------------------------------------------------------------------------
| MOBILE CATEGORY HUB
|--------------------------------------------------------------------------
*/

.fv-mobile-category-page {
    width:
        100%;

    min-height:
        600px;

    background:
        #ffffff;

    color:
        #202124;
}


/*
|--------------------------------------------------------------------------
| PAGE HEADER
|--------------------------------------------------------------------------
*/

.fv-cat-page-header {
    position:
        sticky;

    top:
        0;

    z-index:
        60;

    height:
        52px;

    display:
        grid;

    grid-template-columns:
        40px
        minmax(
            0,
            1fr
        )
        40px;

    align-items:
        center;

    border-bottom:
        1px solid
        #eeeeee;

    background:
        #ffffff;
}


.fv-cat-page-header
h1 {
    margin:
        0;

    color:
        #1e1f22;

    font-size:
        15px;

    line-height:
        1;

    font-weight:
        500;
}


.fv-cat-header-icon {
    width:
        40px;

    height:
        52px;

    display:
        grid;

    place-items:
        center;

    padding:
        0;

    border:
        0;

    background:
        transparent;

    color:
        #222222;

    font-size:
        18px;

    cursor:
        pointer;
}


/*
|--------------------------------------------------------------------------
| HEADER SEARCH MODE
|--------------------------------------------------------------------------
*/

.fv-cat-header-search {
    height:
        35px;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        0
        10px;

    border-radius:
        5px;

    background:
        #f4f5f7;

    color:
        #8a9099;
}


.fv-cat-header-search
i {
    font-size:
        11px;
}


.fv-cat-header-search
input {
    width:
        100%;

    min-width:
        0;

    height:
        35px;

    padding:
        0;

    border:
        0;

    outline:
        0;

    background:
        transparent;

    color:
        #30343a;

    font-size:
        11px;
}


/*
|--------------------------------------------------------------------------
| PAGE TWO-PANE CONTENT
|--------------------------------------------------------------------------
*/

.fv-cat-page-content {
    display:
        grid;

    grid-template-columns:
        100px
        minmax(
            0,
            1fr
        );

    height:
        calc(
            100dvh
            -
            52px
            -
            62px
        );

    min-height:
        480px;

    overflow:
        hidden;

    background:
        #ffffff;
}


/*
|--------------------------------------------------------------------------
| LEFT SIDEBAR
|--------------------------------------------------------------------------
*/

.fv-cat-sidebar {
    height:
        100%;

    overflow-y:
        auto;

    overflow-x:
        hidden;

    background:
        #f4f5f8;

    scrollbar-width:
        none;

    -ms-overflow-style:
        none;
}


.fv-cat-sidebar::-webkit-scrollbar {
    display:
        none;
}


.fv-cat-sidebar-item {
    width:
        100%;

    min-height:
        75px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        5px;

    padding:
        7px
        5px;

    border:
        0;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.45
        );

    background:
        transparent;

    color:
        #969da8;

    cursor:
        pointer;
}


.fv-cat-sidebar-item.active {
    background:
        #ffffff;

    color:
        #FF587D;
}


.fv-cat-sidebar-item
> span:last-child {
    width:
        100%;

    display:
        -webkit-box;

    overflow:
        hidden;

    font-size:
        9px;

    line-height:
        1.15;

    text-align:
        center;

    -webkit-line-clamp:
        2;

    -webkit-box-orient:
        vertical;
}


/*
|--------------------------------------------------------------------------
| LEFT VISUAL
|--------------------------------------------------------------------------
*/

.fv-cat-sidebar-visual {
    width:
        28px;

    height:
        27px;

    display:
        grid;

    place-items:
        center;

    overflow:
        hidden;

    color:
        #111111;

    font-size:
        19px;
}


.fv-cat-sidebar-item.active
.fv-cat-sidebar-visual {
    color:
        #FF587D;
}


.fv-cat-sidebar-visual.image
img {
    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

    user-select:
        none;

    -webkit-user-drag:
        none;
}


/*
|--------------------------------------------------------------------------
| RIGHT PANE
|--------------------------------------------------------------------------
*/

.fv-cat-right-pane {
    height:
        100%;

    overflow-y:
        auto;

    overflow-x:
        hidden;

    background:
        #ffffff;

    scrollbar-width:
        thin;

    scrollbar-color:
        #aaaaaa
        transparent;
}


/*
|--------------------------------------------------------------------------
| RIGHT 3-COLUMN GRID
|--------------------------------------------------------------------------
*/

.fv-cat-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    align-content:
        start;

    padding:
        7px
        7px
        18px;

    border-bottom:
        1px solid
        #eeeeee;
}


.fv-cat-grid-item {
    min-width:
        0;

    min-height:
        99px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        flex-start;

    gap:
        5px;

    padding:
        4px
        3px
        8px;

    color:
        #171717;

    text-align:
        center;
}


.fv-cat-grid-item
> span:last-child {
    width:
        100%;

    display:
        -webkit-box;

    overflow:
        hidden;

    font-size:
        9px;

    line-height:
        1.12;

    font-weight:
        500;

    -webkit-line-clamp:
        2;

    -webkit-box-orient:
        vertical;
}


/*
|--------------------------------------------------------------------------
| RIGHT CATEGORY IMAGE / ICON
|--------------------------------------------------------------------------
*/

.fv-cat-grid-visual {
    width:
        58px;

    height:
        55px;

    display:
        grid;

    place-items:
        center;

    overflow:
        hidden;

    background:
        #fafafa;

    color:
        #FF587D;

    font-size:
        26px;
}


.fv-cat-grid-visual.image {
    background:
        #ffffff;
}


.fv-cat-grid-visual.image
img {
    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

    user-select:
        none;

    -webkit-user-drag:
        none;
}


/*
|--------------------------------------------------------------------------
| STATE
|--------------------------------------------------------------------------
*/

.fv-cat-state {
    min-height:
        240px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        15px;

    color:
        #8b929c;

    font-size:
        10px;

    text-align:
        center;
}


.fv-cat-state
i {
    color:
        #FF587D;

    font-size:
        22px;
}


.fv-cat-state.error {
    color:
        #b42318;
}


.fv-cat-state.error
i {
    color:
        #b42318;
}


/*
|--------------------------------------------------------------------------
| DESKTOP / TABLET
|--------------------------------------------------------------------------
|
| The mobile screenshots are the primary target.
| Desktop still gets a usable two-pane category hub.
|
*/

@media (
    min-width: 768px
) {

    .fv-mobile-category-page {
        width:
            min(
                1190px,
                calc(
                    100% - 32px
                )
            );

        margin:
            18px
            auto
            40px;

        border:
            1px solid
            #e6e6e6;
    }


    .fv-cat-page-header {
        position:
            relative;

        height:
            58px;

        grid-template-columns:
            48px
            minmax(
                0,
                1fr
            )
            48px;
    }


    .fv-cat-page-header
    h1 {
        font-size:
            19px;
    }


    .fv-cat-header-icon {
        width:
            48px;

        height:
            58px;
    }


    .fv-cat-page-content {
        grid-template-columns:
            220px
            minmax(
                0,
                1fr
            );

        height:
            680px;
    }


    .fv-cat-sidebar-item {
        min-height:
            66px;

        flex-direction:
            row;

        justify-content:
            flex-start;

        gap:
            10px;

        padding:
            8px
            16px;
    }


    .fv-cat-sidebar-item
    > span:last-child {
        width:
            auto;

        font-size:
            11px;

        text-align:
            left;
    }


    .fv-cat-sidebar-visual {
        flex:
            0
            0
            30px;
    }


    .fv-cat-grid {
        grid-template-columns:
            repeat(
                6,
                minmax(
                    0,
                    1fr
                )
            );

        padding:
            14px;
    }


    .fv-cat-grid-item {
        min-height:
            120px;
    }


    .fv-cat-grid-visual {
        width:
            75px;

        height:
            72px;
    }


    .fv-cat-grid-item
    > span:last-child {
        font-size:
            11px;
    }

}


/*
|--------------------------------------------------------------------------
| VERY SMALL MOBILE
|--------------------------------------------------------------------------
*/

@media (
    max-width: 360px
) {

    .fv-cat-page-content {
        grid-template-columns:
            92px
            minmax(
                0,
                1fr
            );
    }


    .fv-cat-sidebar-item {
        min-height:
            72px;
    }


    .fv-cat-grid {
        padding-inline:
            4px;
    }


    .fv-cat-grid-visual {
        width:
            52px;

        height:
            50px;
    }


    .fv-cat-grid-item
    > span:last-child {
        font-size:
            8px;
    }

}