/* ============================
   Skeleton Loader
============================ */

.skeleton {
    position: relative;
    overflow: hidden;
    background: #f2f2f2;
    border-radius: 6px;
}

.skeleton::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.7),
        transparent
    );
    animation: skeleton-loading 1.3s infinite;
}

@keyframes skeleton-loading {
    100% {
        transform: translateX(100%);
    }
}

.skeleton-image{
    width:100%;
    aspect-ratio:1/1;
}

.skeleton-title{
    height:18px;
    width:85%;
    margin:15px auto 10px;
}

.skeleton-text{
    height:14px;
    width:65%;
    margin:10px auto;
}

.skeleton-price{
    height:18px;
    width:45%;
    margin:15px auto;
}

.skeleton-button{
    width:90%;
    height:42px;
    margin:15px auto;
}

/*==============================
Cart Skeleton
===============================*/

.cart-skeleton-item{
    display:flex;
    gap:15px;
    padding:15px 0;
    border-bottom:1px solid #eee;
}

.skeleton-cart-image{
    width:80px;
    height:80px;
    border-radius:8px;
    flex-shrink:0;
}

.cart-skeleton-content{
    flex:1;
}

.skeleton-cart-title{
    width:90%;
    height:18px;
    margin-bottom:12px;
}

.skeleton-cart-price{
    width:60%;
    height:16px;
    margin-bottom:12px;
}

.skeleton-cart-qty{
    width:45%;
    height:14px;
}

.skeleton-wishlist-image{
    width:100%;
    aspect-ratio:1;
}

.skeleton-wishlist-title{
    height:18px;
    width:85%;
    margin:15px auto;
}

.skeleton-wishlist-price{
    height:16px;
    width:50%;
    margin:auto;
}

.wishlist-btn i {
    transition: all .3s ease;
}

.wishlist-btn:hover i {
    transform: scale(1.15);
}

.fa-heart.wishlist-added {
    animation: heartPop .4s ease;
}

@keyframes heartPop {

    0% {
        transform: scale(0.7);
    }

    50% {
        transform: scale(1.35);
    }

    100% {
        transform: scale(1);
    }

}