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

.product-card{

    display:flex;

    flex-direction:column;

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:5px;

    overflow:hidden;

    /*transition:.25s;*/

    position:relative;
    cursor:pointer;
}

.product-card:hover{

    border-color:var(--primary);

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

    /*transform:translateY(-4px);*/

}

/* ==========================================================
    Product Media
========================================================== */

.product-media{

    position:relative;

    aspect-ratio:1/1;

    overflow:hidden;

    background:#fff;

    border-bottom:1px solid var(--border);

}

.product-image{

    display:block;

    width:100%;

    height:100%;

}

.product-image img{

    display:block;

    width:100%;

    height:100%;

    object-fit:contain;

    object-position:center;

    transition:transform .35s ease;

}

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

    /*transform:scale(1.05);*/

}

/* ==========================================================
    Wishlist
========================================================== */

.wishlist-btn{

    position:absolute;

    top:12px;

    left:12px;

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.95);

    color:var(--text);

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:20;

    transition:.25s;

    box-shadow:0 6px 18px rgba(0,0,0,.08);

}

.wishlist-btn i{

    font-size:18px;

}

.wishlist-btn:hover{

    background:var(--primary);

    color:#fff;

    transform:scale(1.08);

}

/* ==========================================================
    Product Content
========================================================== */

.product-content{

    display:flex;

    flex-direction:column;

    gap:12px;

    padding:16px;

    flex:1;

}

.product-brand{

    font-size:12px;

    color:var(--text-muted);

    text-transform:uppercase;

    font-weight:600;

}

.product-title{
    margin:0;
    font-size:11px;
    line-height:1.9;
    font-weight:700;
    /*min-height:47px;*/
    min-height:21px;
}

.product-title a{

    color:var(--text);

    text-decoration:none;

    transition:.25s;

}

.product-title a:hover{

    color:var(--primary);

}

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

.product-rating{

    display:flex;

    align-items:center;

    gap:4px;

    color:#f59e0b;

    font-size:13px;

}

.product-rating span{

    margin-right:6px;

    color:var(--text-muted);

    font-size:12px;

}

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

.product-price{

    display:flex;

    flex-direction:column;

    gap:6px;

    margin-top:auto;

}

.product-price del{

    color:#9ca3af;

    font-size:13px;

    text-decoration-thickness:2px;

}

.product-price strong{

    font-size:13px;

    font-weight:800;

    color:var(--primary);

    line-height:1.3;

}

/* ==========================================================
    Product Buttons
========================================================== */

.product-buttons{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    /*margin-top:18px;*/
}
.product-buttons.grid-template-columns-none{
    grid-template-columns:none !important;
}

.btn-product{

    height:46px;

    border-radius:3px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    text-decoration:none;

    font-size:13px;

    font-weight:700;

    transition:.25s;

    border:1px solid transparent;

}

.btn-product i{

    font-size:15px;

}

/* ==========================================================
    View Button
========================================================== */

.btn-view{

    background:var(--surface-alt);

    border-color:var(--border);

    color:var(--text);

}

.btn-view:hover{

    background:#fff;

    border-color:var(--primary);

    color:var(--primary);

}

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

.btn-cart{

    background:var(--primary);

    color:#fff;

}

.btn-cart:hover{

    background:var(--primary-dark);

    transform:translateY(-2px);

    box-shadow:0 8px 20px rgba(0,0,0,.12);

}

/* ==========================================================
    Price hidden Button
========================================================== */
.btn-hidden-price{
    position: absolute;
    width: 50px;
    height: 50px;
    left: -10px;
    top: -23px;
    z-index: 9999;
}

/* ==========================================================
    Disabled Product
========================================================== */

.product-card.out-of-stock .btn-cart{

    background:#d1d5db;

    color:#6b7280;

    pointer-events:none;

    cursor:not-allowed;

}

.product-card.out-of-stock .product-image img{

    opacity:.6;

    filter:grayscale(.2);

}

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

.product-badges{

    position:absolute;

    top:12px;

    right:12px;

    left:62px;

    display:flex;

    flex-wrap:wrap;

    gap:6px;

    z-index:10;

    pointer-events:none;

}

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:28px;

    padding:0 10px;

    border-radius:2px;

    font-size:11px;

    font-weight:700;

    line-height:1;

    color:#fff;

    white-space:nowrap;

}

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

.badge-sale{

    background:#ef4444;

}

.badge-new{

    background:#2563eb;

}

.badge-best{

    background:#7c3aed;

}

.badge-featured{

    background:#f59e0b;

}

.badge-stock{

    background:#16a34a;

}

.badge-ending{

    background:#ea580c;

}

.badge-out{

    background:#6b7280;

}

/* ==========================================================
    Hover Animation
========================================================== */

.product-card{

    will-change:transform;

}

.product-card:hover{

    border-color:rgba(var(--primary),.35);

}

.product-card:hover .wishlist-btn{

    /*transform:scale(1.08);*/

}

.product-card:hover .badge{

    /*transform:translateY(-2px);*/

}

.badge{

    transition:.25s;

}

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

.product-media::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(to top,
    rgba(0,0,0,.04),
    transparent 45%);

    opacity:0;

    transition:.25s;

}

.product-card:hover .product-media::after{

    opacity:1;

}

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

@media (max-width:768px){

    .product-content{

        padding:12px;

        gap:10px;

    }

    .product-title{

        min-height:auto;

        font-size:11px;

        line-height:1.7;

    }

    .product-price strong{

        font-size:13px;

    }

    .product-price del{

        font-size:12px;

    }

    .product-buttons{

        gap:8px;

    }

    .btn-product{

        height:32px;

        font-size:12px;

    }

    .btn-product i{

        font-size:14px;

    }

    .wishlist-btn{
        width: 34px;
        height: 34px;
        top: 8px;
        left: 8px;
    }

    .badge{

        font-size:10px;

        min-height:24px;

        padding:0 8px;

    }

}