/* ═══════════════════════════════════════════════════════════════════════════
   MotoMagic — Premium Empty States & Skeletons  (css/premium-states.css)
   Additive only. Enhances existing .pcard-sk / .shop-empty markup. No JS.
   Load AFTER app.css (and premium-cards.css).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Skeleton loader: premium shimmer, matches real card shape ─────────────*/
.pcard-sk {
  border-radius: var(--r-lg, 20px);
  border: 1px solid var(--line, rgba(255,255,255,.08));
  background: var(--card, #0f0f10);
  overflow: hidden;
}
.pcard-sk .sk-img {
  aspect-ratio: 1 / 1;          /* match real .pmedia square */
  width: 100%;
}
.pcard-sk .sk-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.pcard-sk .sk-line { height: 12px; border-radius: 6px; }

/* Shimmer sweep on every skeleton element */
.pcard-sk .sk-img,
.pcard-sk .sk-line {
  background: linear-gradient(
    100deg,
    rgba(255,255,255,.035) 30%,
    rgba(255,255,255,.09) 50%,
    rgba(255,255,255,.035) 70%
  );
  background-size: 200% 100%;
  animation: skShimmer 1.5s ease-in-out infinite;
}
.pcard-sk .sk-line:first-child { margin-top: 2px; }

@keyframes skShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Soft fade-in for the whole skeleton block */
.pcard-sk { animation: skShimmer 1.5s ease-in-out infinite, skFade .3s ease both; }
@keyframes skFade { from { opacity: 0; } to { opacity: 1; } }

/* ── Empty state: premium centered panel ───────────────────────────────────*/
.shop-empty {
  grid-column: 1 / -1;         /* span the full product grid width */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 72px 32px;
  border: 1px dashed var(--line2, rgba(255,255,255,.14));
  border-radius: var(--r-lg, 20px);
  background:
    radial-gradient(70% 80% at 50% 0%, rgba(227,6,19,.05), transparent 65%),
    var(--card, #0f0f10);
  animation: emptyIn .4s var(--ease, cubic-bezier(.22,1,.36,1)) both;
}

.shop-empty .shop-empty-icon {
  font-size: 52px;
  line-height: 1;
  margin-bottom: 18px;
  filter: grayscale(.2);
  animation: emptyFloat 3s ease-in-out infinite;
}

.shop-empty h3 {
  font-family: var(--font-d, sans-serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--white, #fff);
  margin-bottom: 8px;
}
.shop-empty p {
  font-size: 14px;
  color: var(--gray, #A0A0A0);
  max-width: 380px;
  line-height: 1.6;
  margin-bottom: 22px;
}
.shop-empty .btn {
  transition: transform .18s var(--ease), border-color .2s, background .2s;
}
.shop-empty .btn:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.05);
}

@keyframes emptyIn    { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes emptyFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ── Reduced motion ────────────────────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
  .pcard-sk, .pcard-sk .sk-img, .pcard-sk .sk-line,
  .shop-empty, .shop-empty .shop-empty-icon { animation: none !important; }
  .shop-empty .btn:hover { transform: none; }
}

/* ── Mobile ────────────────────────────────────────────────────────────────*/
@media (max-width: 600px) {
  .shop-empty { padding: 52px 20px; }
  .shop-empty .shop-empty-icon { font-size: 44px; }
  .shop-empty h3 { font-size: 18px; }
}