/* ── Skeleton shimmer ─────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    rgba(254, 240, 247, 1)   25%,
    rgba(232, 67, 122, 0.14) 50%,
    rgba(254, 240, 247, 1)   75%
  );
  background-size: 1200px 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border-radius: 2px;
}

.skeleton--text {
  display: block;
}

/* ── Slide-in for cart drawer ─────────────────────────── */
@keyframes slideInRight {
  from { transform: translateX(100%); }
  to   { transform: translateX(0);    }
}

.cart-panel {
  animation: slideInRight 0.28s cubic-bezier(.25,.46,.45,.94);
}

/* ── Fade in for modal ────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.96) translateY(12px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

#product-modal:not([hidden]) .modal-backdrop { animation: fadeIn  0.22s ease; }
#product-modal:not([hidden]) .modal-panel    { animation: scaleIn 0.28s cubic-bezier(.25,.46,.45,.94); }