/* NUVRELL skeleton loader — used for product grids and PDP main image
   while API responses are inflight. Prevents the dreaded "Loading..." flash
   and reduces perceived TTI. Pairs with .nv-loaded class added by JS post-mount.
*/
.nv-skel {
  position: relative;
  overflow: hidden;
  background: #ece8e0;
  border-radius: 2px;
}
.nv-skel::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-100%);
  animation: nv-skel-shimmer 1.4s ease-in-out infinite;
}
@keyframes nv-skel-shimmer {
  100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .nv-skel::after { animation: none; }
}

.nv-skel-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nv-skel-card .nv-skel-img {
  aspect-ratio: 1 / 1;
  width: 100%;
}
.nv-skel-card .nv-skel-line {
  height: 12px;
  width: 80%;
  border-radius: 2px;
}
.nv-skel-card .nv-skel-line.s { width: 50%; }

/* Hide skeleton once .nv-loaded is added by JS */
[data-grid].nv-loaded .nv-skel-card { display: none; }