/* ═══════════════════════════════════════════════════════════
   PRODUCT DETAIL PAGE — legacy overrides removed.
   Layout is now in css/pdp-layout.css.
   This file is kept for backward compatibility but intentionally
   empty of layout rules so there is no conflict.
═══════════════════════════════════════════════════════════ */

/* The animated emoji drop and affirmation layer are retained
   as they don't affect layout. */

[data-page="product"] .product-affirmation-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 40;
}

[data-page="product"] .product-emoji-drop {
  position: fixed;
  top: -3rem;
  font-size: clamp(1.1rem, 1.8vw, 1.45rem);
  line-height: 1;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  filter: drop-shadow(0 6px 10px rgba(91, 75, 122, 0.12));
  animation: product-emoji-fall var(--fall-duration, 6.4s) linear forwards;
}

[data-page="product"] .product-affirmation {
  position: fixed;
  max-width: min(280px, calc(100vw - 2rem));
  padding: 0.8rem 1rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 244, 240, 0.96), rgba(232, 160, 168, 0.9));
  color: var(--plum);
  font-size: 0.92rem;
  line-height: 1.4;
  box-shadow: 0 16px 34px rgba(91, 75, 122, 0.16);
  pointer-events: none;
  animation: product-affirmation-float 3.5s ease forwards;
}

@keyframes product-emoji-fall {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  10% { opacity: 0.95; }
  50% { transform: translate3d(var(--drift-mid, 18px), 50vh, 0) rotate(8deg); opacity: 0.92; }
  100% { transform: translate3d(var(--drift-end, -22px), 104vh, 0) rotate(-8deg); opacity: 0; }
}

@keyframes product-affirmation-float {
  0% { opacity: 0; transform: translate(-50%, 12px) scale(0.96); }
  12%, 82% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -12px) scale(0.98); }
}