/*==========================================================
    SEAN B SHOP MARKETPLACE
    COMPONENT:
    CARDS SYSTEM

    File:
    /assets/css/components/cards.css
==========================================================*/



/*==========================================================
    GLOBAL CARD
==========================================================*/


.card{

    background:#ffffff;

    border:1px solid #e5e7eb;

    border-radius:12px;

    overflow:hidden;

    transition:.25s ease;

}



.card:hover{

    transform:translateY(-4px);

    box-shadow:

    0 10px 30px rgba(0,0,0,.08);

}





/*==========================================================
    CARD IMAGE
==========================================================*/


.card-image{


    width:100%;

    height:180px;

    background:#f8fafc;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    position:relative;

}



.card-image img{


    width:100%;

    height:100%;

    object-fit:contain;

    padding:15px;

    transition:.3s ease;

}



.card:hover .card-image img{


    transform:scale(1.05);

}





/*==========================================================
    CARD BODY
==========================================================*/


.card-body{


    padding:15px;

}



.card-title{


    font-size:15px;

    font-weight:700;

    color:#0f172a;

    line-height:1.4;

    margin-bottom:8px;

}



.card-description{


    font-size:13px;

    color:#64748b;

    line-height:1.6;

}





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


.product-card{


    background:#ffffff;

    border:1px solid #eeeeee;

    border-radius:10px;

    overflow:hidden;

    position:relative;

    transition:.25s ease;

}





.product-card:hover{


    box-shadow:

    0 8px 25px rgba(0,0,0,.10);


    transform:translateY(-5px);

}





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


.product-card .product-image{


    height:160px;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

    background:#ffffff;

    overflow:hidden;

}



.product-card .product-image img{


    width:100%;

    height:100%;

    object-fit:contain;

    padding:12px;

}





/*==========================================================
    PRODUCT INFO
==========================================================*/


.product-info{


    padding:10px 12px;

}



.product-name{


    font-size:13px;

    font-weight:600;

    color:#1f2937;

    height:36px;

    overflow:hidden;

    line-height:1.4;

}





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


.product-price{


    margin-top:8px;

    display:flex;

    align-items:center;

    gap:8px;

}



.price-current{


    color:#e60000;

    font-size:15px;

    font-weight:800;

}



.price-old{


    font-size:11px;

    color:#94a3b8;

    text-decoration:line-through;

}





/*==========================================================
    PRODUCT RATING
==========================================================*/


.product-rating{


    display:flex;

    align-items:center;

    gap:5px;

    margin-top:6px;

    font-size:11px;

}



.product-rating i{


    color:#f59e0b;

}



.product-rating span{


    color:#64748b;

}





/*==========================================================
    PRODUCT ACTIONS
==========================================================*/


.product-actions{


    padding:0 12px 12px;

}



.product-cart-btn{


    width:100%;

    height:34px;

    border:none;

    border-radius:6px;

    background:#0b1f3a;

    color:#ffffff;

    font-size:12px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}



.product-cart-btn:hover{


    background:#e60000;

}







/*==========================================================
    WISHLIST BUTTON
==========================================================*/


.wishlist-btn{


    position:absolute;

    top:10px;

    right:10px;


    width:30px;

    height:30px;


    border-radius:50%;


    background:white;


    display:flex;

    align-items:center;

    justify-content:center;


    box-shadow:

    0 3px 12px rgba(0,0,0,.15);


    z-index:3;

}



.wishlist-btn i{


    font-size:13px;

    color:#0b1f3a;

}





/*==========================================================
    BADGES
==========================================================*/


.card-badge{


    position:absolute;

    top:10px;

    left:10px;


    padding:4px 8px;


    font-size:10px;

    font-weight:700;


    color:white;


    border-radius:5px;


    z-index:3;

}



.badge-sale{


    background:#e60000;

}



.badge-new{


    background:#16a34a;

}



.badge-stock{


    background:#f59e0b;

}





/*==========================================================
    CATEGORY CARDS
==========================================================*/


.category-card{


    background:white;


    border-radius:12px;


    padding:18px;


    text-align:center;


    border:1px solid #eee;


    transition:.25s;

}



.category-card:hover{


    transform:translateY(-5px);


    box-shadow:

    0 10px 25px rgba(0,0,0,.08);


}



.category-card img{


    width:70px;

    height:70px;

    object-fit:contain;

    margin:auto;

}



.category-card h3{


    margin-top:12px;


    font-size:14px;


    font-weight:700;

}





/*==========================================================
    SERVICE CARDS
==========================================================*/


.service-card{


    background:white;


    padding:25px;


    border-radius:14px;


    text-align:center;


    border:1px solid #eee;

}



.service-card i{


    width:55px;

    height:55px;


    display:flex;

    align-items:center;

    justify-content:center;


    margin:auto;


    border-radius:50%;


    background:#0b1f3a;


    color:white;


    font-size:22px;


}



.service-card h3{


    margin-top:15px;


    font-size:16px;

}



.service-card p{


    font-size:13px;

    color:#64748b;

}





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


@media(max-width:768px){


.card-image{


    height:140px;

}



.product-card .product-image{


    height:120px;

}



.product-name{


    font-size:12px;

}



.price-current{


    font-size:13px;

}



.product-cart-btn{


    height:32px;

    font-size:11px;

}


}
/* ======================================================
   SEAN B SHOP
   PROFESSIONAL PRODUCT CARDS
   /assets/css/components/cards.css
====================================================== */


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

.product-card{

    background:#ffffff;

    border:1px solid #e5e7eb;

    border-radius:10px;

    overflow:hidden;

    transition:.25s ease;

    position:relative;

}



.product-card:hover{

    transform:translateY(-4px);

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

    border-color:#e60000;

}





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


.product-image{

    height:190px;

    background:#f8fafc;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    position:relative;

}



.product-image img{

    width:100%;

    height:100%;

    object-fit:contain;

    padding:12px;

    transition:.3s ease;

}



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

    transform:scale(1.05);

}





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


.product-body{

    padding:12px;

}





/* PRODUCT CATEGORY */


.product-category{

    font-size:11px;

    color:#64748b;

    margin-bottom:5px;

    text-transform:uppercase;

    font-weight:600;

}





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


.product-title{


    font-size:13px;


    line-height:1.4;


    font-weight:600;


    color:#0f172a;


    margin:0 0 6px;


    height:36px;


    overflow:hidden;


    display:-webkit-box;


    -webkit-line-clamp:2;


    -webkit-box-orient:vertical;


}



.product-title a{

    color:inherit;

}



.product-title a:hover{

    color:#e60000;

}





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


.product-description{


    font-size:11px;


    line-height:1.5;


    color:#64748b;


    margin-bottom:8px;


    height:32px;


    overflow:hidden;


}





/* ======================================================
   RATINGS
====================================================== */


.product-rating{


    display:flex;


    align-items:center;


    gap:5px;


    margin-bottom:8px;


}



.product-rating i{


    font-size:11px;


    color:#f59e0b;


}



.product-rating span{


    font-size:11px;


    color:#64748b;


}





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


.product-price{


    font-size:16px;


    font-weight:800;


    color:#e60000;


    margin-bottom:8px;


}



.product-old-price{


    font-size:11px;


    color:#94a3b8;


    text-decoration:line-through;


    margin-left:5px;


}





/* ======================================================
   STOCK STATUS
====================================================== */


.product-stock{


    font-size:11px;


    color:#16a34a;


    margin-bottom:10px;


}






/* ======================================================
   ACTION BUTTONS
====================================================== */


.product-actions{


    display:flex;


    gap:8px;


}



.product-btn{


    flex:1;


    height:34px;


    border-radius:6px;


    font-size:12px;


    font-weight:700;


    display:flex;


    align-items:center;


    justify-content:center;


}



.product-cart{


    background:#e60000;


    color:white;


}



.product-cart:hover{


    background:#c40000;


}



.product-view{


    background:#0b1f3a;


    color:white;


}





/* ======================================================
   PRODUCT BADGES
====================================================== */


.product-badge{


    position:absolute;


    top:10px;


    left:10px;


    background:#e60000;


    color:white;


    padding:4px 8px;


    border-radius:20px;


    font-size:10px;


    font-weight:700;


    z-index:2;


}




/* ======================================================
   SMALL MARKETPLACE GRID
====================================================== */


.shop-product-grid .product-card{


    min-width:0;

}



.shop-product-grid{


    gap:14px;

}





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


@media(max-width:1200px){


.product-image{

    height:170px;

}


.product-title{

    font-size:12px;

}


.product-price{

    font-size:15px;

}


}



@media(max-width:768px){


.product-image{

    height:140px;

}


.product-body{

    padding:10px;

}


.product-title{

    font-size:12px;

    height:34px;

}


.product-description{

    display:none;

}


.product-price{

    font-size:14px;

}


.product-btn{

    font-size:11px;

    height:32px;

}



}