/* ShopSmart marketplace — skeleton, empty, error states.
 * Loaded by /assets/marketplace.js. Sized to roughly match the live cards
 * defined in landing/index.html so the layout doesn't shift on render.
 */

@keyframes ss-skel-pulse {
  0%   { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}

.skel {
  background: linear-gradient(90deg, #eef2f7 0%, #f7fafc 50%, #eef2f7 100%);
  background-size: 200px 100%;
  background-repeat: no-repeat;
  animation: ss-skel-pulse 1.4s ease-in-out infinite;
  border-radius: 12px;
}

/* Sized to match .pcard: image area + body. Aspect targets ~190x310. */
.skel-product {
  height: 310px;
  border-radius: 12px;
  border: 1px solid #eef2f7;
}

/* Sized to match .pcard-h: 80px tall horizontal row, ~13px stacked gap. */
.skel-product-h {
  height: 86px;
  border-radius: 10px;
  margin-top: 10px;
  border: 1px solid #eef2f7;
}
.skel-product-h:first-child { margin-top: 0; }

/* Sized to match .cat-item — small column tile with circular icon. */
.skel-category {
  height: 96px;
  border-radius: 12px;
}

/* Sized to match .supplier-item — circular ring (~84px) plus two text rows. */
.skel-supplier {
  height: 132px;
  border-radius: 12px;
}

/* Sized to match .feat-supplier — banner card ~190px tall. */
.skel-featured-supplier {
  height: 200px;
  border-radius: 16px;
}

/* Empty + error states. Both are intentionally quiet — the goal is graceful
 * degradation, not loud failure (per Section 4 of Step 4 spec). */
.section-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 32px 16px;
  /* #94a3b8 was 2.6:1 on white; --ss-ink-3 is the lightest grey allowed on text. */
  color: var(--ss-ink-3, #5B6B84);
  font-size: 14px;
  font-weight: 500;
}

.section-error {
  opacity: 0.6;
}

/* Reduced-motion users get a static placeholder rather than the pulse. */
@media (prefers-reduced-motion: reduce) {
  .skel {
    animation: none;
    background: #eef2f7;
  }
}