/* ==================================
   Product Card Component
================================== */


/* Card */

.product-card {
    flex: 0 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    background: #fff;
    border-radius: 16px;
    padding: 15px;
    transition: all .25s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 6px 20px rgba(0,0,0,.06);
}

.product-card:hover {
    transform: translateY(-4px);
}


/* Image */

.product-image {
    position: relative;
}

.product-image img,
.product-card img {
    width:100%;
    height:auto;
    object-fit:contain;
    border-radius:12px;
}


/* Product Info */

.product-info {
    margin-top:12px;
    text-align:right;
    min-height:58px;
}


.product-title {
    font-size:14px;
    font-weight:600;
    margin:0 0 6px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    height:22px;
}


.product-title a {
    text-decoration:none;
    color:#222;
}


.product-author {
    font-size:13px;
    color:#777;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}


/* Price */

.product-price {

    background:#fafafa;

    margin:15px -15px -15px;

    padding:15px;

    border-radius:0 0 16px 16px;

    margin-top:auto;
}


.price-wrapper {

    display:flex;

    justify-content:space-between;

    align-items:center;

    min-height:48px;

}


.price-left {

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    text-align:right;

    justify-content:center;

}


.old-price {

    text-decoration:line-through;

    color:#999;

    font-size:13px;

}


.new-price {

    font-size:16px;

    font-weight:700;

    color:#4a148c;

}


.discount-percent {

    background:#ff4d4f;

    color:#fff;

    width:32px;

    height:27px;

    border-radius:7px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:12px;

    font-weight:600;

}


/* Badges */

.product-badges {

    position:absolute;

    top:10px;

    right:10px;

    display:flex;

    flex-direction:column;

    gap:6px;

}


.badge {

    background:#ff4d4f;

    color:#fff;

    font-size:11px;

    padding:4px 8px;

    border-radius:6px;

}


/* Skeleton */

.product-skeleton {

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e6e6e6 37%,
        #f0f0f0 63%
    );

    background-size:400% 100%;

    animation:shimmer 1.4s ease infinite;

    transition:opacity .3s ease;

}


@keyframes shimmer {

    0% {
        background-position:100% 0
    }

    100% {
        background-position:-100% 0
    }

}


/* Slider Mode */

.products-slider .product-card {

    flex:0 0 220px;

}

/* ==================================
   Product Author
================================== */

.product-author {

    margin-top:6px;

    font-size:13px;

    color:#777;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

    line-height:1.8;

}


.product-author a {

    color:#777;

    text-decoration:none;

    transition:color .2s ease;

}


.product-author a:hover {

    color:#2d8f52;

}

.product-title {
    margin-bottom:4px;
}


.product-author {
    margin-top:0;
}