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

.product-card{

    position:relative;

    background:#fff;

    border:1px solid #e5e7eb;

    border-radius:22px;

    overflow:hidden;

    box-shadow:0 8px 25px rgba(0,0,0,.06);

    transition:.3s ease;

}

.product-card:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 40px rgba(0,0,0,.10);

}


/* ==========================================
   Image
========================================== */

.product-card__image{

    position:relative;

    background:#f8fafc;

    padding:25px;

}

.product-card__img{

    width:100%;

    height:220px;

    object-fit:contain;

    display:block;

}


/* ==========================================
   Badges
========================================== */

.product-card__discount,
.product-card__offer-badge{

    position:absolute;

    top:15px;

    z-index:2;

    padding:7px 12px;

    border-radius:999px;

    font-size:13px;

    font-weight:800;

}

.product-card__discount{

    left:15px;

    background:#ef4444;

    color:#fff;

}

.product-card__offer-badge{

    right:15px;

    background:#fbbf24;

    color:#111827;

}


/* ==========================================
   Body
========================================== */

.product-card__body{

    padding:22px;

}

.product-card__title{

    margin:0 0 10px;

    font-size:19px;

    line-height:1.5;

}

.product-card__title a{

    text-decoration:none;

    color:#111827;

}

.product-card__title a:hover{

    color:#f59e0b;

}


/* ==========================================
   Rating
========================================== */

.product-card__rating{

    min-height:20px;

    margin-bottom:12px;

}

.product-card__rating .star-rating{

    margin:0;

}


/* ==========================================
   Quantity Offer
========================================== */

.product-card__quantity-offer{

    background:#fff8df;

    border:1px solid #fcd34d;

    border-radius:14px;

    padding:10px 12px;

    margin-bottom:12px;

}

.product-card__quantity-offer strong{

    display:block;

    color:#111827;

    font-size:15px;

}

.product-card__quantity-offer span{

    display:block;

    margin-top:4px;

    color:#6b7280;

    font-size:12px;

}


/* ==========================================
   Price
========================================== */

.product-card__price{

    min-height:35px;

    margin-bottom:18px;

}

.product-card__price strong{

    font-size:22px;

    color:#111827;

}

.product-card__price del{

    color:#9ca3af;

    margin-left:8px;

}

.product-card__unit-price{

    font-weight:800;

}

.product-card__unit-price small{

    font-size:12px;

    color:#6b7280;

}


/* ==========================================
   Quantity Selector
========================================== */

.product-card__quantity{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:0;

    margin-bottom:14px;

    border:1px solid #e5e7eb;

    border-radius:12px;

    overflow:hidden;

}

.product-card__quantity button{

    width:42px;

    height:42px;

    border:0;

    background:#f8fafc;

    color:#111827;

    font-size:22px;

    cursor:pointer;

}

.product-card__quantity button:hover{

    background:#f59e0b;

}

.quantity-value{

    width:55px;

    text-align:center;

    font-weight:800;

}


/* ==========================================
   Add Button
========================================== */

.product-card__add{

    width:100%;

    border:0;

    border-radius:12px;

    padding:14px 18px;

    background:#f59e0b;

    color:#111827;

    font-size:16px;

    font-weight:800;

    cursor:pointer;

    transition:.3s ease;

}

.product-card__add:hover{

    background:#111827;

    color:#fff;

}


/* ==========================================
   Mobile
========================================== */

@media(max-width:768px){

    .product-card__img{

        height:180px;

    }

    .product-card__body{

        padding:18px;

    }

}