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

.product-card{
    position: relative;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(15,23,42,.08);
    transition: .35s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.product-card:hover{
    transform: translateY(-8px);
    box-shadow: 0 20px 45px rgba(37,99,235,.18);
}


/* ==========================================
   Badge
   ========================================== */

.product-badge{
    position:absolute;
    top:15px;
    right:15px;
    z-index:10;

    padding:6px 14px;

    border-radius:50px;

    color:#fff;

    font-size:.80rem;

    font-weight:700;
}

.badge-new{

    background:#10b981;

}

.badge-sale{

    background:#ef4444;

}


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

.product-image{

    position:relative;

    overflow:hidden;

    background:#f8fafc;

}

.product-image img{

    width:100%;

    height:260px;

    object-fit:contain;

    padding:25px;

    transition:.45s;

}

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

    transform:scale(1.08);

}


/* ==========================================
   Overlay
   ========================================== */

.product-overlay{

    position:absolute;

    inset:0;

    background:rgba(15,23,42,.55);

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    opacity:0;

    transition:.35s;

}

.product-card:hover .product-overlay{

    opacity:1;

}

.overlay-btn{

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    background:#fff;

    color:#2563eb;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    font-size:1.2rem;

    transition:.3s;

}

.overlay-btn:hover{

    background:#2563eb;

    color:#fff;

    transform:scale(1.1);

}


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

.product-body{

    padding:22px;

    text-align:center;

    flex:1;

}

.product-body h5{

    margin-bottom:15px;

    min-height:55px;

}

.product-body h5 a{

    color:#1e293b;

    text-decoration:none;

    font-size:1.05rem;

    font-weight:700;

    transition:.3s;

}

.product-body h5 a:hover{

    color:#2563eb;

}

.product-price{

    font-size:1.35rem;

    font-weight:800;

    color:#16a34a;

}

.product-price small{

    font-size:.9rem;

    color:#64748b;

}


/* ==========================================
   Footer
   ========================================== */

.product-footer{

    padding:18px;

    border-top:1px solid #edf2f7;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:12px;

}


/* ==========================================
   Details Button
   ========================================== */

.btn-details{

    flex:1;

    background:#2563eb;

    color:#fff;

    text-decoration:none;

    text-align:center;

    padding:11px;

    border-radius:12px;

    transition:.3s;

    font-weight:600;

}

.btn-details:hover{

    background:#1d4ed8;

    color:#fff;

}


/* ==========================================
   Cart Button
   ========================================== */

.btn-cart{

    width:48px;

    height:48px;

    border:none;

    border-radius:12px;

    background:#f1f5f9;

    color:#2563eb;

    font-size:1.15rem;

    transition:.3s;

}

.btn-cart:hover{

    background:#2563eb;

    color:#fff;

}

.btn-cart:disabled{

    opacity:.6;

    cursor:not-allowed;

}


/* ==========================================
   Category Card
   ========================================== */

.category-card{

    background:#fff;

    border-radius:20px;

    text-align:center;

    padding:35px 25px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.35s;

    height:100%;

}

.category-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(37,99,235,.18);

}

.category-icon{

    width:80px;

    height:80px;

    margin:auto;

    border-radius:50%;

    background:#eff6ff;

    color:#2563eb;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:2rem;

    margin-bottom:20px;

}

.category-card h4{

    margin-bottom:12px;

    font-size:1.2rem;

    color:#1e293b;

}

.category-card p{

    color:#64748b;

    margin-bottom:25px;

}

.btn-category{

    display:inline-block;

    padding:10px 25px;

    border-radius:10px;

    background:#2563eb;

    color:#fff;

    text-decoration:none;

    transition:.3s;

}

.btn-category:hover{

    background:#1d4ed8;

    color:#fff;

}


/* ==========================================
   Responsive
   ========================================== */

@media(max-width:768px){

    .product-image img{

        height:220px;

    }

    .product-footer{

        flex-direction:column;

    }

    .btn-details{

        width:100%;

    }

    .btn-cart{

        width:100%;

    }

}