/* ============================================================
Project : Compro Doodle
Module  : Component
File    : product-card.css
Version : 3.1.0
Author  : Doodle IT Development
============================================================ */


/* ============================================================
PRODUCT CARD
============================================================ */

.product-card{

    display:flex;

    flex-direction:column;

    min-width:0;

    height:100%;

    overflow:hidden;

    background:
        var(--color-surface-alt);

    border:
        var(--border-width-thin)
        solid
        var(--color-border);

    border-radius:
        var(--product-card-radius);

    box-shadow:
        var(--shadow-sm);

    transition:
        transform var(--duration-normal) var(--ease-standard),
        box-shadow var(--duration-normal) var(--ease-standard),
        border-color var(--duration-normal) var(--ease-standard);

}

.product-card-link{

    display:flex;

    flex-direction:column;

    width:100%;

    height:100%;

    min-width:0;

    color:inherit;

    text-decoration:none;

}

.product-card:hover{

    transform:
        translateY(calc(var(--space-4) * -1));

    border-color:
        var(--color-primary-light);

    box-shadow:
        var(--shadow-md);

}


/* ============================================================
PRODUCT IMAGE
============================================================ */

.product-card-image{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    aspect-ratio:1 / 1;

    overflow:hidden;

    background:
        var(--color-surface-alt);

    padding:
        var(--space-16);

}

.product-card-image img{

    display:block;

    width:100%;

    height:100%;

    max-width:100%;

    max-height:100%;

    object-fit:contain;

    transition:
        transform var(--duration-normal) var(--ease-standard);

}

.product-card:hover
.product-card-image img{

    transform:
        scale(1.03);

}


/* ============================================================
PRODUCT BADGE
============================================================ */

.product-card-badge{

    position:absolute;

    top:var(--space-12);

    left:var(--space-12);

    z-index:var(--z-base);

    display:inline-flex;

    align-items:center;

    min-height:
        var(--badge-height);

    padding-inline:
        var(--badge-padding-inline);

    border-radius:
        var(--badge-radius);

    background:
        var(--color-primary);

    color:
        var(--color-text-white);

    font-size:
        var(--font-xs);

    font-weight:
        var(--font-semibold);

    line-height:
        var(--line-tight);

}


/* ============================================================
PRODUCT BODY
============================================================ */

.product-card-body{

    display:flex;

    flex:1;

    flex-direction:column;

    min-width:0;

    gap:
        var(--space-12);

    padding:
        var(--space-16);

    background:
        var(--color-surface-alt);

}


/* ============================================================
TITLE
============================================================ */

.product-card-title{

    display:-webkit-box;

    min-height:
        calc(
            var(--font-md) *
            var(--line-tight) *
            2
        );

    margin:0;

    overflow:hidden;

    color:
        var(--color-text);

    font-size:
        var(--font-md);

    font-weight:
        var(--font-medium);

    line-height:
        var(--line-tight);

    -webkit-box-orient:vertical;

    -webkit-line-clamp:2;

}


/* ============================================================
DESCRIPTION
============================================================ */

.product-card-description{

    display:-webkit-box;

    min-height:
        calc(
            var(--font-sm) *
            var(--line-normal) *
            2
        );

    margin:0;

    overflow:hidden;

    color:
        var(--color-text-secondary);

    font-size:
        var(--font-sm);

    font-weight:
        var(--font-regular);

    line-height:
        var(--line-normal);

    -webkit-box-orient:vertical;

    -webkit-line-clamp:2;

}


/* ============================================================
PRODUCT META
============================================================ */

.product-card-meta{

    display:flex;

    align-items:center;

    min-width:0;

    gap:
        var(--space-8);

    color:
        var(--color-text-muted);

    font-size:
        var(--font-xs);

    line-height:
        var(--line-tight);

}

.product-card-rating{

    display:inline-flex;

    align-items:center;

    min-width:0;

    gap:
        var(--space-4);

}

.product-card-rating-star{

    color:
        var(--color-primary);

    font-size:
        var(--font-sm);

    line-height:1;

}

.product-card-rating-value{

    color:
        var(--color-text-secondary);

    font-weight:
        var(--font-semibold);

}

.product-card-sold{

    min-width:0;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}


/* ============================================================
PRODUCT FOOTER
============================================================ */

.product-card-footer{

    display:flex;

    flex-direction:column;

    gap:
        var(--space-8);

    margin-top:auto;

    background:
        var(--color-surface-alt);

}


/* ============================================================
PRICE
============================================================ */

.product-card-price{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-width:0;

    gap:
        var(--space-8);

}

.product-card-price-main{

    display:flex;

    flex-wrap:wrap;

    align-items:baseline;

    min-width:0;

    gap:
        var(--space-4);

}

.product-price{

    color:
        var(--color-primary);

    font-size:
        var(--font-xl);

    font-weight:
        var(--font-bold);

    line-height:
        var(--line-tight);

}

.product-price-old{

    color:
        var(--color-text-muted);

    font-size:
        var(--font-xs);

    line-height:
        var(--line-tight);

    text-decoration:
        line-through;

}

.product-card-discount{

    flex:0 0 auto;

    padding-inline:
        var(--space-8);

    padding-block:
        var(--space-4);

    border-radius:
        var(--radius-sm);

    background:
        var(--color-primary-light);

    color:
        var(--color-primary);

    font-size:
        var(--font-xs);

    font-weight:
        var(--font-semibold);

    line-height:
        var(--line-tight);

}


/* ============================================================
RESPONSIVE
============================================================ */

@media (max-width:767px){

    .product-card{

        border-radius:
            var(--radius-lg);

    }

    .product-card-image{

        aspect-ratio:1 / 1;

        padding:
            var(--space-8);

    }

    .product-card-badge{

        top:var(--space-8);

        left:var(--space-8);

        min-height:
            var(--badge-height);

        padding-inline:
            var(--space-8);

        font-size:
            var(--font-xs);

    }

    .product-card-body{

        gap:
            var(--space-8);

        padding:
            var(--space-12);

    }

    .product-card-title{

        min-height:auto;

        font-size:
            var(--font-md);

        line-height:
            var(--line-tight);

    }

    .product-card-description{

        min-height:auto;

        font-size:
            var(--font-xs);

        line-height:
            var(--line-normal);

        -webkit-line-clamp:2;

    }

    .product-card-meta{

        gap:
            var(--space-8);

        font-size:
            var(--font-xs);

    }

    .product-card-rating{

        gap:
            var(--space-4);

    }

    .product-card-rating-star{

        font-size:
            var(--font-xs);

    }

    .product-card-price{

        align-items:flex-start;

        flex-direction:column;

        gap:
            var(--space-4);

    }

    .product-price{

        font-size:
            var(--font-lg);

    }

    .product-price-old{

        font-size:
            var(--font-xs);

    }

    .product-card-discount{

        font-size:
            var(--font-xs);

    }

}