/* ===================================
   OPTIMIZED SKELETON LOADER STYLES
   =================================== */
@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
/* ===================================
   BASE SKELETON STYLES
   =================================== */
.skeleton {
  background: linear-gradient(90deg, #e0e0e0 25%, #f4f4f4 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite ease-in-out;
  height: 100px;
  border-radius: 4px;
  border-radius: 8px;
}
/* ===================================
   LOADING GRID
   =================================== */
.loading-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 16px;
  width: 100%;
}
/* ===================================
   PRODUCT SKELETON
   =================================== */
.skeleton-product {
  display: inline-block;
  width: 20%;
  background: #fff;
  border-radius: 4px;
  padding: 10px 10px 40px;
}
.skeleton-product.swiper-slide {
  display: block;
  margin-right: 10px;
}
.skeleton-product .skeleton-image {
  background: linear-gradient(90deg, #e0e0e0 25%, #f4f4f4 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite ease-in-out;
  height: 170px;
  border-radius: 4px;
  margin-bottom: 1rem;
}
.skeleton-product .skeleton-title {
  background: linear-gradient(90deg, #e0e0e0 25%, #f4f4f4 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite ease-in-out;
  height: 25px;
  border-radius: 4px;
  margin-bottom: 1rem;
}
.skeleton-product .skeleton-price {
  background: linear-gradient(90deg, #e0e0e0 25%, #f4f4f4 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite ease-in-out;
  height: 15px;
  border-radius: 4px;
  width: 50%;
}
/* ===================================
   PROMOTION GRID SKELETON
   =================================== */
.skeleton-promotion-grid {
  padding: 0;
  border-radius: 0;
}
.skeleton-promotion-grid .image {
  background: linear-gradient(90deg, #e0e0e0 25%, #f4f4f4 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite ease-in-out;
  height: 200px;
  border-radius: 4px;
  margin-bottom: 10px;
  border-radius: 0;
}
.skeleton-promotion-grid .content-container {
  padding: 10px;
}
.skeleton-promotion-grid .content-container .title {
  background: linear-gradient(90deg, #e0e0e0 25%, #f4f4f4 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite ease-in-out;
  height: 20px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.skeleton-promotion-grid .content-container .subtitle {
  background: linear-gradient(90deg, #e0e0e0 25%, #f4f4f4 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite ease-in-out;
  height: 10px;
  border-radius: 4px;
}
/* ===================================
   CATEGORY LOGO SKELETON
   =================================== */
.product-cats-logo-wrappers .swiper-wrapper .swiper-slide {
  width: 10.5% !important;
}
.product-cats-logo-wrappers .swiper-wrapper .swiper-slide.skeleton {
  margin-right: 10px;
}
/* ===================================
   RESPONSIVE BREAKPOINTS
   =================================== */
@media (max-width: 991px) {
  .skeleton-product {
    width: 25%;
  }
  .product-cats-logo-wrappers .swiper-wrapper .swiper-slide {
    width: 19.5% !important;
  }
}
@media (max-width: 575px) {
  .skeleton-product {
    width: 50%;
  }
  .skeleton-product .skeleton-image {
    background: linear-gradient(90deg, #e0e0e0 25%, #f4f4f4 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite ease-in-out;
    height: 80px;
    border-radius: 4px;
  }
  .product-cats-logo-wrappers .swiper-wrapper .swiper-slide {
    width: 16.22% !important;
  }
  .product-cats-logo-wrappers .swiper-wrapper .swiper-slide.skeleton {
    background: linear-gradient(90deg, #e0e0e0 25%, #f4f4f4 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite ease-in-out;
    height: 60px;
    border-radius: 4px;
  }
  .home-page-campaign-shortcuts .skeleton {
    background: linear-gradient(90deg, #e0e0e0 25%, #f4f4f4 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite ease-in-out;
    height: 25px;
    border-radius: 4px;
  }
}
@media (max-width: 400px) {
  .skeleton-product {
    width: 100%;
    margin-bottom: 10px;
  }
  .loading-grid {
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 12px;
  }
}
/* ===================================
   ACCESSIBILITY & PERFORMANCE
   =================================== */
@media (prefers-reduced-motion: reduce) {
  .skeleton, .skeleton-image, .skeleton-title, .skeleton-price, .skeleton-promotion-grid .image, .skeleton-promotion-grid .title, .skeleton-promotion-grid .subtitle {
    animation: none;
    background: #e0e0e0;
  }
}
.skeleton::after {
  content: "Loading...";
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}