.category-shimmer-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 16px;
}

.category-skeleton {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90px;
}

/* Circular image shimmer */
.skeleton-img-circle {
    width: 80px;
    height: 80px;
    border-radius: 50% !important;
    margin-bottom: 10px;
}
@media (max-width: 768px) {
  #featured-skeleton .col-6 {
    display: none;
  }
  .category-skeleton:nth-child(n+4) {
    display: none;
  }
  .category-shimmer-wrapper {
    display: flex;
    flex-wrap: wrap !important;
    }
  .category-skeleton {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc((100% / 3) - 18px) !important;
 }
 .skeleton-img-circle {
    width: 100% !important;
    height: 126px !important;
    border-radius: 50% !important;
    margin-bottom: 10px;
}
}
@media (max-width: 534px) {
    .skeleton-img-circle {
    width: 100% !important;
    height: 80px !important;
    border-radius: 50% !important;
    margin-bottom: 10px;
    }
    #featured_products_list {
         max-width: unset !important; 
        margin: 0 auto;
    }
}
/* Override text width for category label */
.category-skeleton .skeleton-text {
    width: 60px;
}
        
         /* 1. Base Skeleton Animation */
    .skeleton {
        background-color: #ffe4bc; /* Base gray color */
        /* The shimmer gradient */
       background-image: linear-gradient(
  90deg,
  #fde9c8 0px,
  #fff3dc 50%,
  #fde9c8 100%
);
        background-size: 200% 100%; /* Large background for movement */
        animation: shimmer 1.5s infinite linear; /* The moving animation */
        border-radius: 4px; /* Soft edges */
    }

    /* 2. Specific Element Sizes */
    .skeleton-card {
        background: #ffe4bc;
        padding: 10px;
        border-radius: 8px;
        /* Optional: Add a border if your real products have borders */
        /* border: 1px solid #eee; */
    }

    .skeleton-img {
        width: 100%;
        height: 180px; /* IMPORTANT: Adjust this to match your real product image height */
        border-radius: 6px;
        margin-bottom: 10px;
    }

    .skeleton-text {
        height: 14px; /* Height of a text line */
        margin-bottom: 8px; /* Space between lines */
        border-radius: 4px;
    }

    /* 3. The Animation Keyframes */
    @keyframes shimmer {
        0% {
            background-position: -200% 0;
        }
        100% {
            background-position: 200% 0;
        }
    }