/* Shared shimmer skeleton (components/common/Skeleton.tsx) — used wherever a
   page/section is loading real data (product grid, product detail, cart,
   checkout, wishlist). Animated gradient sweep instead of a flat gray box. */
@keyframes sw-shimmer-sweep {
  0% {
    background-position: -400px 0;
  }
  100% {
    background-position: 400px 0;
  }
}
.sw-skeleton {
  display: block;
  background: linear-gradient(90deg, #eee 25%, #f6f6f6 37%, #eee 63%);
  background-size: 800px 100%;
  animation: sw-shimmer-sweep 1.4s ease-in-out infinite;
  border-radius: 6px;
}
.sw-skeleton.circle {
  border-radius: 50%;
}