/*
|--------------------------------------------------------------------------
| FLASH SALE PRODUCT CARD
|--------------------------------------------------------------------------
*/

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

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

    --fv-flash-soft:
        #fff3f6;

    --fv-flash-text:
        #171717;

    --fv-flash-muted:
        #8d8d8d;
}


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

.fv-flash-card {
    min-width: 0;

    height: 100%;

    position: relative;

    overflow: hidden;

    background:
        #ffffff;

    color:
        #212121;

    transform:
        translateZ(0);

    transition:
        transform
            0.2s ease,
        box-shadow
            0.2s ease;
}


/*
|--------------------------------------------------------------------------
| CARD HOVER
|--------------------------------------------------------------------------
*/

.fv-flash-card:hover {
    z-index: 3;

    transform:
        translateY(
            -2px
        );

    box-shadow:
        0 8px 22px
        rgba(
            15,
            23,
            42,
            0.08
        );
}


/*
|--------------------------------------------------------------------------
| IMAGE AREA
|--------------------------------------------------------------------------
*/

.fv-flash-card-image {
    width: 100%;

    height: 190px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    position: relative;

    background:
        #ffffff;

    text-decoration: none;
}


/*
|--------------------------------------------------------------------------
| IMAGE
|--------------------------------------------------------------------------
*/

.fv-flash-card-image
img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit:
        contain;

    object-position:
        center;

    user-select: none;

    -webkit-user-drag:
        none;

    transform:
        scale(1);

    transition:
        transform
        0.24s ease;
}


.fv-flash-card:hover
.fv-flash-card-image
img {
    transform:
        scale(
            1.045
        );
}


/*
|--------------------------------------------------------------------------
| IMAGE PLACEHOLDER
|--------------------------------------------------------------------------
*/

.fv-flash-card-image-placeholder {
    width: 100%;

    height: 100%;

    display: grid;

    place-items:
        center;

    background:
        #fafafa;

    color:
        #c2c7ce;

    font-size:
        30px;
}


/*
|--------------------------------------------------------------------------
| BODY
|--------------------------------------------------------------------------
*/

.fv-flash-card-body {
    padding:
        8px 9px
        12px;
}


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

.fv-flash-card-title {
    min-height:
        38px;

    display:
        -webkit-box;

    overflow: hidden;

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

    font-size:
        13px;

    line-height:
        1.38;

    font-weight:
        400;

    text-decoration:
        none;

    -webkit-line-clamp:
        2;

    -webkit-box-orient:
        vertical;

    transition:
        color
        0.15s ease;
}


.fv-flash-card-title:hover {
    color:
        var(
            --fv-flash-primary
        );
}


/*
|--------------------------------------------------------------------------
| PRICE
|--------------------------------------------------------------------------
*/

.fv-flash-card-price {
    margin-top:
        5px;

    display: flex;

    align-items:
        baseline;

    gap: 1px;

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

    font-size:
        18px;

    line-height:
        1.15;

    font-weight:
        500;
}


.fv-flash-card-price
span {
    font-size:
        16px;
}


/*
|--------------------------------------------------------------------------
| OLD PRICE
|--------------------------------------------------------------------------
*/

.fv-flash-card-old-price {
    min-height:
        20px;

    display: flex;

    align-items:
        center;

    gap: 6px;

    margin-top:
        3px;

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

    font-size:
        10px;
}


.fv-flash-card-old-price
del {
    color:
        #989898;
}


/*
|--------------------------------------------------------------------------
| DISCOUNT
|--------------------------------------------------------------------------
*/

.fv-flash-discount {
    color:
        var(
            --fv-flash-primary
        );

    font-weight:
        600;
}


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

@media (
    max-width: 900px
) {

    .fv-flash-card-image {
        height:
            175px;
    }

}


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

@media (
    max-width: 720px
) {

    .fv-flash-card-image {
        height:
            145px;
    }


    .fv-flash-card-body {
        padding:
            7px 7px
            10px;
    }


    .fv-flash-card-title {
        min-height:
            34px;

        font-size:
            11px;
    }


    .fv-flash-card-price {
        font-size:
            15px;
    }


    .fv-flash-card-price
    span {
        font-size:
            13px;
    }


    .fv-flash-card-old-price {
        font-size:
            9px;
    }

}


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

@media (
    max-width: 360px
) {

    .fv-flash-card-image {
        height:
            132px;
    }


    .fv-flash-card-title {
        font-size:
            10.5px;
    }

}


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

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

    .fv-flash-card,
    .fv-flash-card-image
    img {
        transition:
            none;
    }

}