/*
|--------------------------------------------------------------------------
| JUST FOR YOU PRODUCT CARD
|--------------------------------------------------------------------------
*/

:root {
    --jfy-card-primary:
        #ff587d;

    --jfy-card-primary-hover:
        #e9476c;

    --jfy-card-soft:
        #fff3f6;
}


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

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

    height: 100%;

    position:
        relative;

    overflow: hidden;

    background:
        #ffffff;

    color:
        #212121;

    transform:
        translateZ(0);

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


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

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

    transform:
        translateY(
            -2px
        );

    box-shadow:
        0 5px 18px
        rgba(
            0,
            0,
            0,
            0.10
        );
}


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

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

    height:
        190px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    position:
        relative;

    background:
        #ffffff;

    text-decoration:
        none;
}


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

.fv-jfy-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.22s ease;
}


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

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


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

.fv-jfy-image-placeholder {
    width:
        100%;

    height:
        100%;

    display:
        grid;

    place-items:
        center;

    background:
        #fafafa;

    color:
        #c4c8cd;

    font-size:
        30px;
}


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

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


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

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

    display:
        -webkit-box;

    overflow:
        hidden;

    color:
        #151515;

    text-decoration:
        none;

    font-size:
        13px;

    line-height:
        1.38;

    font-weight:
        400;

    -webkit-line-clamp:
        2;

    -webkit-box-orient:
        vertical;

    transition:
        color
        0.15s ease;
}


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

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


/*
|--------------------------------------------------------------------------
| FLAG
|--------------------------------------------------------------------------
*/

.fv-jfy-flag {
    display:
        inline-block;

    margin-right:
        5px;

    padding:
        1px 4px;

    border-radius:
        2px;

    font-size:
        8px;

    line-height:
        1.4;

    font-weight:
        700;

    vertical-align:
        1px;
}


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

.fv-jfy-price {
    margin-top:
        4px;

    display:
        flex;

    align-items:
        baseline;

    gap:
        1px;

    color:
        var(
            --jfy-card-primary
        );

    font-size:
        17px;

    line-height:
        1.1;

    font-weight:
        500;
}


.fv-jfy-price
> span {
    font-size:
        15px;
}


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

.fv-jfy-discount-row {
    min-height:
        17px;

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    margin-top:
        3px;

    color:
        #919191;

    font-size:
        9px;
}


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

.fv-jfy-discount-row
del {
    color:
        #a1a1a1;
}


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

.fv-jfy-discount-percent {
    color:
        var(
            --jfy-card-primary
        );

    font-weight:
        600;
}


/*
|--------------------------------------------------------------------------
| RATING ROW
|--------------------------------------------------------------------------
*/

.fv-jfy-rating-row {
    min-height:
        18px;

    display:
        flex;

    align-items:
        center;

    gap:
        4px;

    margin-top:
        3px;
}


/*
|--------------------------------------------------------------------------
| STARS
|--------------------------------------------------------------------------
*/

.fv-jfy-stars {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        1px;

    color:
        #f8b530;
}


.fv-jfy-stars
i {
    font-size:
        9px;
}


/*
|--------------------------------------------------------------------------
| REVIEW COUNT
|--------------------------------------------------------------------------
*/

.fv-jfy-rating-row
small {
    color:
        #9b9b9b;

    font-size:
        8px;
}


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

@media (
    max-width: 1050px
) {

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

}


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

@media (
    max-width: 720px
) {

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

    .fv-jfy-card-image {
        height:
            155px;
    }


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

    .fv-jfy-card-body {
        padding:
            6px 6px
            9px;
    }


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

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

        font-size:
            11px;
    }


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

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


    .fv-jfy-price
    > span {
        font-size:
            13px;
    }

}


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

@media (
    max-width: 360px
) {

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


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

}


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

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

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

}