/* =====================================================
   SHOP PRODUCT LOADING SYSTEM
===================================================== */

.shop-products-wrapper{
    position:relative;
}

/* REAL PRODUCTS START HIDDEN */

#shopRealProducts{
    display:none;
}


/* =====================================================
   PRODUCT SKELETON
===================================================== */

#shopProductSkeleton{
    display:flex;
}


/* SKELETON CARD */

.shop-skeleton-card{
    background:#fff;
    border-radius:14px;
    padding:10px;
    height:100%;
    border:1px solid #f0f0f0;
    overflow:hidden;
}


/* SKELETON BASE */

.shop-skeleton{
    position:relative;
    overflow:hidden;
    background:#eeeeee;
    border-radius:8px;
}


/* SHIMMER EFFECT */

.shop-skeleton::after{
    content:"";
    position:absolute;
    inset:0;

    transform:translateX(-100%);

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.75),
        transparent
    );

    animation:shopShimmer 1.2s infinite;
}


@keyframes shopShimmer{

    100%{
        transform:translateX(100%);
    }

}


/* SKELETON IMAGE */

.shop-skeleton-image{
    width:100%;
    height:230px;
    border-radius:10px;
}


/* SKELETON TEXT */

.shop-skeleton-name{
    width:85%;
    height:14px;
    margin-top:12px;
    border-radius:5px;
}


.shop-skeleton-brand{
    width:55%;
    height:11px;
    margin-top:9px;
    border-radius:5px;
}


.shop-skeleton-price{
    width:42%;
    height:14px;
    margin-top:12px;
    border-radius:5px;
}


/* =====================================================
   PRODUCTS HEADER
===================================================== */

.products-header{
    margin-bottom:18px;
}


.products-header h5{
    font-size:20px;
    font-weight:700;
    color:#111;
}


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

.product-card{ 
    background:#fff; 
    border-radius:14px; 
    padding:10px; 
    box-shadow:0 4px 12px rgba(0,0,0,0.08); 
    height:100%; 
    position:relative;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


/* DESKTOP HOVER EFFECT */

.product-card:hover{
    transform:translateY(-3px);
    box-shadow:
        0 10px 25px rgba(0,0,0,.10);
}


/* =====================================================
   SPECIAL OFFER BADGES
===================================================== */

/* LEFT SPECIAL OFFER BADGE */

.special-offer-badge{

    position:absolute;

    top:18px;
    left:18px;

    z-index:5;

    display:flex;
    align-items:center;
    gap:5px;

    padding:5px 9px;

    background:#111111;
    color:#ffffff;

    border-radius:20px;

    font-size:9px;
    font-weight:800;

    letter-spacing:.3px;

    line-height:1;

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

}


/* LIGHTNING ICON */

.special-offer-badge i{

    font-size:10px;

    color:#f9b233;

}


/* DISCOUNT BADGE */

.discount-badge{

    position:absolute;

    top:18px;
    right:18px;

    z-index:5;

    padding:7px 9px;

    background:#f9b233;

    color:#111111;

    border-radius:8px 8px 8px 8px;

    font-size:11px;

    font-weight:800;

    line-height:1;

    box-shadow:
        0 3px 8px rgba(0,0,0,.15);

}


/* BADGE HOVER */

.product-card:hover .special-offer-badge{

    transform:translateY(-1px);

}


.product-card:hover .discount-badge{

    transform:translateY(-1px);

}


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

.product-img{ 
    width:100%; 
    height:230px;
    overflow:hidden; 
    border-radius:10px;
    background:#f5f5f5;

    position:relative;
} 


.product-img img{ 
    width:100%; 
    height:230px; 
    object-fit:cover; 
    display:block;

    transition:transform .35s ease;
} 


.product-card:hover .product-img img{
    transform:scale(1.04);
}


/* =====================================================
   ADD TO CART BUTTON
===================================================== */

.add-to-cart-btn{ 
    position:absolute; 
    bottom:10px; 
    right:10px; 
    width:42px; 
    height:42px; 
    border-radius:50%; 
    background:#000; 
    color:#fff; 
    border:none; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    cursor:pointer; 
    opacity:0; 
    transform:scale(0.8); 
    transition:all 0.3s ease; 
    z-index:2;

    box-shadow:
        0 5px 15px rgba(0,0,0,.15);
} 


.add-to-cart-btn i{ 
    font-size:18px; 
} 


/* DESKTOP HOVER */

.product-card:hover .add-to-cart-btn{ 
    opacity:1; 
    transform:scale(1); 
} 


.add-to-cart-btn:hover{
    background:#222;
    transform:scale(1.08) !important;
}


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

.product-info{ 
    padding-top:10px; 
} 


.product-name{ 
    font-size:14px; 
    font-weight:600; 
    margin-bottom:2px;

    line-height:1.4;
    color:#171717;

    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;

    overflow:hidden;

    min-height:39px;
} 


.product-brand{ 
    font-size:12px; 
    color:#777; 
    margin-bottom:6px;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
} 


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

.product-price{ 
    display:flex; 
    align-items:center; 
    gap:7px; 
    flex-wrap:wrap; 
} 


.old-price{ 
    font-size:12px; 
    color:#888; 
    text-decoration:line-through; 
} 


.sale-price{ 
    font-size:15px; 
    font-weight:700; 
    color:#000; 
}


/* =====================================================
   MOBILE VIEW
===================================================== */

@media(max-width:768px){

    .products-header{
        margin-bottom:14px;
    }


    .products-header h5{
        font-size:18px;
    }


    /* SKELETON */

    .shop-skeleton-card{
        padding:8px;
        border-radius:12px;
    }


    .shop-skeleton-image{
        height:170px;
        border-radius:9px;
    }


    /* PRODUCT IMAGE */

    .product-img{
        height:170px;
        border-radius:9px;
    }


    .product-img img{ 
        height:170px; 
    }


    /* SPECIAL OFFER BADGES */

    .special-offer-badge{

        top:14px;
        left:13px;

        padding:4px 7px;

        font-size:8px;

        gap:4px;

    }


    .special-offer-badge i{
        font-size:9px;
    }


    .discount-badge{

        top:14px;
        right:13px;

        padding:6px 7px;

        font-size:9px;

        border-radius:6px;

    }


    /* ADD TO CART */

    .add-to-cart-btn{ 
        opacity:1; 
        transform:scale(1); 
        width:38px; 
        height:38px; 
        bottom:8px; 
        right:8px; 
    } 


    .add-to-cart-btn i{ 
        font-size:16px; 
    } 


    /* PRODUCT CARD */

    .product-card{ 
        padding:8px;
        border-radius:12px;

        box-shadow:
            0 3px 10px rgba(0,0,0,.07);
    } 


    /* PRODUCT NAME */

    .product-name{ 
        font-size:13px;
        min-height:36px;
        margin-bottom:3px;
    } 


    /* BRAND */

    .product-brand{ 
        font-size:11px; 
        margin-bottom:6px;
    } 


    /* PRICE */

    .sale-price{ 
        font-size:14px; 
    } 


    .old-price{
        font-size:11px;
    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media(max-width:380px){

    .product-card{
        padding:7px;
    }


    .product-img,
    .product-img img,
    .shop-skeleton-image{
        height:145px;
    }


    .product-name{
        font-size:12px;
    }


    .special-offer-badge{

        top:12px;
        left:11px;

        padding:4px 6px;

        font-size:7px;

    }


    .discount-badge{

        top:12px;
        right:11px;

        padding:5px 6px;

        font-size:8px;

    }

}