/* Skeleton Loader Styles - Prevents CLS */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    color: var(--text-secondary);
    font-size: 16px;
}

/* Reserve space for dynamically loaded grids */
.products-grid {
    min-height: 600px;
    /* Reserve space for 2 rows of products */
}

.blog-grid {
    min-height: 500px;
    /* Reserve space for blog posts */
}

.categories-grid {
    min-height: 400px;
    /* Reserve space for categories */
}

/* Skeleton card animation */
@keyframes skeleton-loading {
    0% {
        background-position: -200px 0;
    }

    100% {
        background-position: calc(200px + 100%) 0;
    }
}

.skeleton-card {
    background: linear-gradient(90deg,
            #f0f0f0 0px,
            #f8f8f8 40px,
            #f0f0f0 80px);
    background-size: 200px 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: var(--border-radius);
    height: 400px;
}

/* Prevent image loading CLS */
.product-image,
.blog-image {
    aspect-ratio: 16 / 9;
}

/* Ensure images have dimensions before loading */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

img[width][height] {
    height: auto;
}