/*
|--------------------------------------------------------------------------
| FLASH SALE SECTION
|--------------------------------------------------------------------------
*/

:root {
    --fv-flash-primary:
        #ff587d;

    --fv-flash-primary-hover:
        #e9476c;

    --fv-flash-soft:
        #fff2f5;
}


/*
|--------------------------------------------------------------------------
| SECTION
|--------------------------------------------------------------------------
*/

.fv-home-flash-sale {
    padding:
        20px 0
        26px;

    background:
        #f5f5f5;
}


/*
|--------------------------------------------------------------------------
| CONTAINER
|--------------------------------------------------------------------------
*/

.fv-home-flash-container {
    width:
        min(
            1190px,
            calc(
                100% - 32px
            )
        );

    margin-inline:
        auto;
}


/*
|--------------------------------------------------------------------------
| TITLE
|--------------------------------------------------------------------------
*/

.fv-home-flash-container
> h2 {
    margin:
        0 0 9px;

    color:
        #303030;

    font-size:
        24px;

    line-height:
        1.25;

    font-weight:
        500;
}


/*
|--------------------------------------------------------------------------
| BOX
|--------------------------------------------------------------------------
*/

.fv-home-flash-box {
    width: 100%;

    position:
        relative;

    overflow:
        hidden;

    background:
        #ffffff;

    border:
        1px solid
        #eeeeee;

    border-radius:
        2px;
}


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

.fv-home-flash-head {
    min-height:
        60px;

    display: flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        0 12px
        0 20px;

    border-bottom:
        1px solid
        #dedede;

    background:
        #ffffff;
}


/*
|--------------------------------------------------------------------------
| ON SALE
|--------------------------------------------------------------------------
*/

.fv-home-flash-head
> span {
    color:
        var(
            --fv-flash-primary
        );

    font-size:
        14px;

    font-weight:
        500;
}


/*
|--------------------------------------------------------------------------
| SHOP ALL
|--------------------------------------------------------------------------
*/

.fv-home-flash-head
> a {
    min-height:
        38px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 14px;

    border:
        1px solid
        var(
            --fv-flash-primary
        );

    border-radius:
        2px;

    background:
        #ffffff;

    color:
        var(
            --fv-flash-primary
        );

    font-size:
        12px;

    line-height: 1;

    font-weight:
        600;

    text-decoration:
        none;

    transition:
        color
            0.16s ease,
        background
            0.16s ease,
        border-color
            0.16s ease;
}


.fv-home-flash-head
> a:hover {
    border-color:
        var(
            --fv-flash-primary-hover
        );

    background:
        var(
            --fv-flash-primary
        );

    color:
        #ffffff;
}


/*
|--------------------------------------------------------------------------
| SLIDER SHELL
|--------------------------------------------------------------------------
*/

.fv-flash-slider-shell {
    width: 100%;

    position:
        relative;

    overflow:
        hidden;

    background:
        #ffffff;
}


/*
|--------------------------------------------------------------------------
| VIEWPORT
|--------------------------------------------------------------------------
*/

.fv-flash-slider-viewport {
    width: 100%;

    overflow:
        hidden;

    touch-action:
        pan-y;

    transform:
        translateZ(0);
}


/*
|--------------------------------------------------------------------------
| TRACK
|--------------------------------------------------------------------------
*/

.fv-flash-slider-track {
    width: 100%;

    display: flex;

    align-items:
        stretch;

    will-change:
        transform;

    backface-visibility:
        hidden;

    transform:
        translate3d(
            0,
            0,
            0
        );

    transition:
        transform
        0.5s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


/*
|--------------------------------------------------------------------------
| PAGE
|--------------------------------------------------------------------------
|
| Desktop:
|
| 6 products × 1 row
|
*/

.fv-flash-slider-page {
    width: 100%;

    min-width:
        100%;

    flex:
        0 0 100%;

    display: grid;

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

    gap: 0;

    padding:
        9px 4px
        8px;

    background:
        #ffffff;
}


/*
|--------------------------------------------------------------------------
| CARD BORDER
|--------------------------------------------------------------------------
*/

.fv-flash-slider-page
> article {
    min-width: 0;

    border-right:
        1px solid
        #f0f0f0;
}


.fv-flash-slider-page
> article:last-child {
    border-right: 0;
}


/*
|--------------------------------------------------------------------------
| ARROWS
|--------------------------------------------------------------------------
*/

.fv-flash-arrow {
    width:
        36px;

    height:
        50px;

    position:
        absolute;

    top: 50%;

    z-index: 30;

    display: grid;

    place-items:
        center;

    padding: 0;

    border: 0;

    border-radius:
        0;

    background:
        rgba(
            0,
            0,
            0,
            0.27
        );

    color:
        #ffffff;

    font-size:
        14px;

    cursor:
        pointer;

    opacity: 0;

    transform:
        translateY(
            -50%
        );

    transition:
        opacity
            0.18s ease,
        background
            0.18s ease;
}


/*
|--------------------------------------------------------------------------
| SHOW ARROWS
|--------------------------------------------------------------------------
*/

.fv-home-flash-box:hover
.fv-flash-arrow {
    opacity: 1;
}


/*
|--------------------------------------------------------------------------
| ARROW HOVER
|--------------------------------------------------------------------------
*/

.fv-flash-arrow:hover {
    background:
        var(
            --fv-flash-primary
        );
}


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

.fv-flash-arrow-left {
    left: 0;
}


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

.fv-flash-arrow-right {
    right: 0;
}


/*
|--------------------------------------------------------------------------
| DOTS
|--------------------------------------------------------------------------
*/

.fv-flash-slider-dots {
    min-height:
        26px;

    display: flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    padding:
        3px 0 8px;

    background:
        #ffffff;
}


/*
|--------------------------------------------------------------------------
| DOT
|--------------------------------------------------------------------------
*/

.fv-flash-slider-dots
button {
    width:
        7px;

    height:
        7px;

    flex:
        0 0 auto;

    padding: 0;

    border: 0;

    border-radius:
        999px;

    background:
        #d7d7d7;

    cursor:
        pointer;

    transition:
        width
            0.2s ease,
        background
            0.2s ease;
}


/*
|--------------------------------------------------------------------------
| ACTIVE DOT
|--------------------------------------------------------------------------
*/

.fv-flash-slider-dots
button.active {
    width:
        21px;

    background:
        var(
            --fv-flash-primary
        );
}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (
    max-width: 1050px
)
and
(
    min-width: 768px
) {

    .fv-home-flash-container {
        width:
            min(
                calc(
                    100% - 24px
                ),
                1190px
            );
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (
    max-width: 767px
) {

    /*
    |--------------------------------------------------------------------------
    | SECTION
    |--------------------------------------------------------------------------
    */

    .fv-home-flash-sale {
        padding:
            14px 0
            18px;

        background:
            #f5f5f5;
    }


    /*
    |--------------------------------------------------------------------------
    | CONTAINER
    |--------------------------------------------------------------------------
    */

    .fv-home-flash-container {
        width:
            100%;

        margin: 0;
    }


    /*
    |--------------------------------------------------------------------------
    | TITLE
    |--------------------------------------------------------------------------
    */

    .fv-home-flash-container
    > h2 {
        margin: 0;

        padding:
            0 11px
            9px;

        font-size:
            19px;
    }


    /*
    |--------------------------------------------------------------------------
    | BOX
    |--------------------------------------------------------------------------
    */

    .fv-home-flash-box {
        border-left: 0;

        border-right: 0;
    }


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

    .fv-home-flash-head {
        min-height:
            49px;

        padding:
            0 10px
            0 12px;
    }


    /*
    |--------------------------------------------------------------------------
    | SALE LABEL
    |--------------------------------------------------------------------------
    */

    .fv-home-flash-head
    > span {
        font-size:
            12px;
    }


    /*
    |--------------------------------------------------------------------------
    | SHOP ALL
    |--------------------------------------------------------------------------
    */

    .fv-home-flash-head
    > a {
        min-height:
            32px;

        padding:
            0 9px;

        font-size:
            9px;
    }


    /*
    |--------------------------------------------------------------------------
    | MOBILE PAGE
    |--------------------------------------------------------------------------
    |
    | Exactly 2 products.
    |
    */

    .fv-flash-slider-page {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

        gap:
            1px;

        padding:
            1px;

        background:
            #eeeeee;
    }


    /*
    |--------------------------------------------------------------------------
    | MOBILE CARD
    |--------------------------------------------------------------------------
    */

    .fv-flash-slider-page
    > article {
        border: 0;

        background:
            #ffffff;
    }


    /*
    |--------------------------------------------------------------------------
    | MOBILE ARROWS
    |--------------------------------------------------------------------------
    |
    | Swipe + auto slide.
    |
    */

    .fv-flash-arrow {
        display:
            none;
    }


    /*
    |--------------------------------------------------------------------------
    | DOTS
    |--------------------------------------------------------------------------
    */

    .fv-flash-slider-dots {
        min-height:
            22px;

        padding:
            6px 0 5px;
    }


    .fv-flash-slider-dots
    button {
        width:
            6px;

        height:
            6px;
    }


    .fv-flash-slider-dots
    button.active {
        width:
            18px;
    }

}


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

@media (
    max-width: 360px
) {

    .fv-home-flash-head
    > a {
        padding:
            0 7px;

        font-size:
            8px;
    }

}


/*
|--------------------------------------------------------------------------
| REDUCED MOTION
|--------------------------------------------------------------------------
*/

@media (
    prefers-reduced-motion:
        reduce
) {

    .fv-flash-slider-track,
    .fv-flash-slider-dots
    button,
    .fv-flash-arrow {
        transition:
            none
            !important;
    }

}