/* ==========================================================================
   Popular Choices Smart Carousel — skeleton.css
   Skeleton / placeholder loading state for product cards
   ========================================================================== */

/* ── Skeleton Grid ────────────────────────────────────────────────────────── */
.pcsc-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 0;
  /* Hidden by default; shown via JS while AJAX loads */
  display: none;
}

/* Show skeleton when the widget is loading */
.pcsc-widget.is-loading .pcsc-skeleton-grid {
  display: grid;
}

.pcsc-widget.is-loading .pcsc-carousel-wrap {
  display: none;
}

/* ── Skeleton Card ────────────────────────────────────────────────────────── */
.pcsc-skeleton-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
  padding: 0 0 16px;
}

/* ── Generic Skeleton Block ───────────────────────────────────────────────── */
.pcsc-skeleton {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 37%,
    #f0f0f0 63%
  );
  background-size: 400% 100%;
  animation: pcsc-shimmer 1.4s ease infinite;
  border-radius: 6px;
}

/* ── Skeleton Shapes ──────────────────────────────────────────────────────── */
.pcsc-skeleton--image {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 16px 16px 0 0;
  margin-bottom: 14px;
}

.pcsc-skeleton--title {
  height: 18px;
  width: 70%;
  margin: 0 16px 10px;
}

.pcsc-skeleton--price {
  height: 22px;
  width: 45%;
  margin: 0 16px 14px;
}

.pcsc-skeleton--btn {
  height: 42px;
  width: 100px;
  border-radius: 55px 0 55px 0;
  margin-left: auto;
  margin-right: 0;
}

/* ── Shimmer Keyframe ─────────────────────────────────────────────────────── */
@keyframes pcsc-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .pcsc-skeleton-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .pcsc-skeleton-grid { grid-template-columns: 1fr; }
}