/* ==========================================================
   SANLIA COUTURE — SKELETON UI / SHIMMER LOADING STYLES
   ========================================================== */

/* ── Shimmer keyframe animation ── */
@keyframes skeleton-shimmer {
    0%   { background-position: -800px 0; }
    100% { background-position: 800px 0; }
}

/* ── Base skeleton element ── */
.skeleton {
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e8e8e8 37%,
        #f0f0f0 63%
    );
    background-size: 800px 100%;
    animation: skeleton-shimmer 1.6s infinite linear;
    border-radius: 4px;
}

/* ── Skeleton card (matches .product-card proportions) ── */
.skeleton-card {
    flex: 0 0 calc((100% - 4rem) / 3);
    background: #fdfdfd;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    overflow: hidden;
    padding-bottom: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    flex-shrink: 0;
}

/* ── Skeleton image placeholder (4:5 aspect ratio) ── */
.skeleton-img {
    width: 100%;
    aspect-ratio: 4 / 5;
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e8e8e8 37%,
        #f0f0f0 63%
    );
    background-size: 800px 100%;
    animation: skeleton-shimmer 1.6s infinite linear;
}

/* ── Skeleton text lines inside card info ── */
.skeleton-info {
    padding: 1.5rem 1rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.skeleton-title {
    height: 16px;
    width: 75%;
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e8e8e8 37%,
        #f0f0f0 63%
    );
    background-size: 800px 100%;
    animation: skeleton-shimmer 1.6s infinite linear;
    border-radius: 4px;
}

.skeleton-price {
    height: 14px;
    width: 40%;
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e8e8e8 37%,
        #f0f0f0 63%
    );
    background-size: 800px 100%;
    animation: skeleton-shimmer 1.6s infinite linear;
    border-radius: 4px;
}

.skeleton-btn {
    height: 34px;
    width: 55%;
    margin-top: 0.25rem;
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e8e8e8 37%,
        #f0f0f0 63%
    );
    background-size: 800px 100%;
    animation: skeleton-shimmer 1.6s infinite linear;
    border-radius: 4px;
}

/* ── Skeleton section title ── */
.skeleton-section-title {
    height: 28px;
    width: 220px;
    margin: 0 auto 2rem;
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e8e8e8 37%,
        #f0f0f0 63%
    );
    background-size: 800px 100%;
    animation: skeleton-shimmer 1.6s infinite linear;
    border-radius: 4px;
}

/* ── Category skeleton card (3.2:4 aspect-ratio) ── */
.skeleton-category-card {
    flex: 0 0 calc((100% - 6rem) / 4);
    aspect-ratio: 3.2 / 4;
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e8e8e8 37%,
        #f0f0f0 63%
    );
    background-size: 800px 100%;
    animation: skeleton-shimmer 1.6s infinite linear;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
}

/* ── Two-category (kids-and-matching) skeleton ── */
.skeleton-two-category-card {
    flex: 1 1 calc(50% - 2rem);
    aspect-ratio: 0.85 / 1;
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e8e8e8 37%,
        #f0f0f0 63%
    );
    background-size: 800px 100%;
    animation: skeleton-shimmer 1.6s infinite linear;
    border-radius: 16px;
    overflow: hidden;
}

/* ── Hero skeleton ── */
.skeleton-hero {
    width: 100%;
    height: 95vh;
    background: linear-gradient(
        90deg,
        #f0ece8 25%,
        #ede8e3 37%,
        #f0ece8 63%
    );
    background-size: 1600px 100%;
    animation: skeleton-shimmer 2s infinite linear;
}

/* ── Visibility helpers ── */
.skeleton-wrapper,
.hero-skeleton-overlay,
.skeleton-loader,
#skeleton-container,
.skeleton-card,
.skeleton-category-card,
.skeleton-two-category-card,
.skeleton {
    display: none !important;
}

.skeleton-wrapper--hidden {
    display: none !important;
}

/* ── Responsive adjustments ── */
@media (max-width: 1200px) {
    .skeleton-category-card {
        flex: 0 0 calc((100% - 4.5rem) / 3);
    }
}

@media (max-width: 992px) {
    .skeleton-card {
        flex: 0 0 calc((100% - 2rem) / 2);
    }
    .skeleton-category-card {
        flex: 0 0 calc((100% - 1.5rem) / 2);
    }
    .skeleton-two-category-card {
        flex: 1 1 100%;
    }
}

@media (max-width: 576px) {
    .skeleton-card {
        flex: 0 0 100%;
    }
    .skeleton-category-card {
        flex: 0 0 100%;
    }
    .skeleton-two-category-card {
        flex: 1 1 100%;
    }
}