/* ============================================
   SKELETON LOADERS & SSOT STYLES
   ============================================ */

/* Skeleton Loaders */
.skeleton-loader {
    padding: 20px;
}

.skeleton-category {
    height: 60px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 12px;
    margin-bottom: 20px;
}

.skeleton-products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
    margin-bottom: 30px;
}

.skeleton-product {
    height: 120px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 12px;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Empty Category */
.empty-category {
    padding: 40px 20px;
    text-align: center;
    color: var(--gray-color);
}

.empty-category p {
    margin: 10px 0;
    font-size: 1rem;
}

.empty-category .text-muted {
    font-size: 0.9rem;
    opacity: 0.7;
}

/* Badge styles */
.promo-badge.bg-gray {
    background-color: #999 !important;
}

/* No products message */
.no-products {
    padding: 30px;
    text-align: center;
    color: var(--gray-color);
    font-style: italic;
}