/* ==========================================================================
   Skeleton loaders — плейсхолдеры до AJAX
   ========================================================================== */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-bg-light) 0%,
    var(--color-border) 50%,
    var(--color-bg-light) 100%
  );
  background-size: 200% 100%;
  animation: mc-skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-md);
  color: transparent;
  user-select: none;
  pointer-events: none;
}

.skeleton-text {
  display: inline-block;
  height: 1em;
  width: 100%;
  border-radius: var(--radius-sm);
  background: linear-gradient(
    90deg,
    var(--color-bg-light) 0%,
    var(--color-border) 50%,
    var(--color-bg-light) 100%
  );
  background-size: 200% 100%;
  animation: mc-skeleton-shimmer 1.4s ease-in-out infinite;
  vertical-align: middle;
}

.skeleton-text--sm { height: 0.75em; }
.skeleton-text--lg { height: 1.5em; }

.skeleton-line {
  height: 14px;
  width: 100%;
  border-radius: var(--radius-sm);
  background: linear-gradient(
    90deg,
    var(--color-bg-light) 0%,
    var(--color-border) 50%,
    var(--color-bg-light) 100%
  );
  background-size: 200% 100%;
  animation: mc-skeleton-shimmer 1.4s ease-in-out infinite;
  margin-block-end: var(--space-2);
}

.skeleton-line:last-child { margin-block-end: 0; }
.skeleton-line--w-50 { width: 50%; }
.skeleton-line--w-75 { width: 75%; }

.skeleton-circle {
  border-radius: var(--radius-pill);
}

.skeleton-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.skeleton-card__media {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-card);
}

.skeleton-card__title { height: 18px; width: 80%; }
.skeleton-card__price { height: 24px; width: 50%; }
.skeleton-card__cta   { height: 44px; width: 100%; border-radius: var(--radius-pill); }