/* ==========================================================================
   Skeleton Loading States
   ========================================================================== */

@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.skeleton {
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton-card {
  border: 1.5px solid var(--color-parch-2);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-cream-card);
}

.skeleton-card__image {
  width: 100%;
  aspect-ratio: 1;
  background: var(--color-parch);
}

.skeleton-card__info {
  padding: var(--space-3);
}

.skeleton-card__line {
  height: 12px;
  border-radius: 2px;
  background: var(--color-parch);
  margin-bottom: var(--space-2);
}

.skeleton-card__line--short {
  width: 60%;
}

.skeleton-card__line--price {
  width: 40%;
  height: 16px;
  background: var(--color-parch-2);
}