/* 🚀 Advanced Skeleton Loading Structure */
#skeleton-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    transition: opacity 0.3s ease-out;
}

.skel-section { padding: 15px 20px; }

/* Banner Skeleton */
.skel-banner {
    width: 100%;
    height: 130px;
    border-radius: 12px;
    background: #E2E8F0;
    animation: pulseLoading 1.5s infinite ease-in-out;
}

/* Category Skeleton */
.skel-cat-row {
    display: flex;
    gap: 12px;
    overflow: hidden;
    padding: 10px 20px;
}
.skel-chip {
    width: 85px;
    height: 36px;
    border-radius: 20px;
    background: #E2E8F0;
    flex-shrink: 0;
    animation: pulseLoading 1.5s infinite ease-in-out;
}

/* Product Grid Skeleton */
.skel-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    padding: 10px 20px 30px;
}
.skel-card {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 14px;
    border: 1px solid #E2E8F0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.02);
}
.skel-img {
    width: 100%;
    height: 110px;
    border-radius: 16px;
    background: #E2E8F0;
    animation: pulseLoading 1.5s infinite ease-in-out;
}
.skel-text { height: 14px; border-radius: 6px; background: #E2E8F0; animation: pulseLoading 1.5s infinite ease-in-out; }
.skel-title { width: 90%; height: 16px; margin-top: 5px; }
.skel-subtitle { width: 50%; height: 12px; }
.skel-price { width: 60%; height: 22px; margin-top: 10px; border-radius: 8px; }

@keyframes pulseLoading {
    0% { opacity: 0.4; }
    50% { opacity: 0.8; }
    100% { opacity: 0.4; }
}

/* 🚀 Smooth Fade In for Real Content */
.content-fade-in {
    animation: smoothFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes smoothFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}