/* Global Image Skeleton Loader - Auto-applies to lazy-loading images */
.image-skeleton-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    background: transparent; /* No background by default */
    overflow: hidden;
}

/* Only show background when skeleton is actually loading */
.image-skeleton-wrapper.skeleton-loading {
    background: #f0f0f0;
}

.image-skeleton-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: skeleton-shimmer 1.5s infinite;
    z-index: 1;
}

@keyframes skeleton-shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.image-skeleton-wrapper img {
    position: relative;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.3s ease-in;
    width: 100%;
    height: auto;
    display: block;
}

.image-skeleton-wrapper img.loaded {
    opacity: 1;
}

.image-skeleton-wrapper.skeleton-loading::before {
    display: block;
}

.image-skeleton-wrapper:not(.skeleton-loading)::before {
    display: none;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .image-skeleton-wrapper {
        background: #374151;
    }
}

/* Product image specific */
.product-image-skeleton,
.gallery-image-skeleton,
.product-card-image-skeleton {
    aspect-ratio: 1 / 1;
    background: #f0f0f0;
}

/* Gallery main image */
.gallery-main-image,
.product-gallery img,
.swiper-slide img[loading="lazy"] {
    background: #f0f0f0;
}

/* Exclude category boxes and product cards from skeleton styling */
.tp-category-item,
.category-item,
.tp-category-box,
.category-box,
.tp-category-main-box,
.tp-featured-category-item,
.tp-product-item,
.product-item,
.product-card {
    /* Remove any skeleton wrapper styling */
}

.tp-category-item .image-skeleton-wrapper,
.category-item .image-skeleton-wrapper,
.tp-category-box .image-skeleton-wrapper,
.category-box .image-skeleton-wrapper,
.tp-category-main-box .image-skeleton-wrapper,
.tp-featured-category-item .image-skeleton-wrapper,
.tp-product-item .image-skeleton-wrapper,
.product-item .image-skeleton-wrapper,
.product-card .image-skeleton-wrapper {
    background: transparent !important;
}

.tp-category-item .image-skeleton-wrapper::before,
.category-item .image-skeleton-wrapper::before,
.tp-category-box .image-skeleton-wrapper::before,
.category-box .image-skeleton-wrapper::before,
.tp-category-main-box .image-skeleton-wrapper::before,
.tp-featured-category-item .image-skeleton-wrapper::before,
.tp-product-item .image-skeleton-wrapper::before,
.product-item .image-skeleton-wrapper::before,
.product-card .image-skeleton-wrapper::before {
    display: none !important; /* Hide shimmer on category boxes */
}