/* views/css/cart-fly.css */

/* BASE clone — used for cart button clones too */
.suck-to-cart-clone {
  display: inline-block;              /* simpler & safe for buttons */
  /* remove background/color/font overrides */
  /* background: inherit; */           /* ❌ remove */
  /* color: inherit; */                /* ❌ remove */
  /* font: inherit; */                 /* ❌ remove */
  white-space: nowrap;

  /* optional cosmetics (keep if you like the pop) */
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
}

.suck-start { transform: scale(0.95); transition: transform .15s ease; }

@keyframes cart-bump-kf {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.cart-bump, .wishlist-bump {
  animation: cart-bump-kf .42s ease !important;
  display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
  /* Don’t hide the flying clone; just remove motion */
  .suck-to-cart-clone {
    animation: none !important;
    transition: none !important;
  }
  .cart-bump, .wishlist-bump { animation: none !important; }
}

@keyframes fly-arc {
  0%   { transform: translate(0,0)         scale(1);   opacity: 1; }
  45%  { transform: translate(var(--mx), var(--hop)) scale(0.9); opacity: .9; }
  100% { transform: translate(var(--dx), var(--dy))  scale(0.1); opacity: .2; }
}

/* (optional legacy) If you still clone the icon element sometimes, this forces it red. */
.suck-to-cart-clone.an_wishlist-icon,
.suck-to-cart-clone.an_wishlist-icon-active,
.suck-to-cart-clone.ceicon-heart,
.suck-to-cart-clone.ceicon-heart-o {
  color: red !important;
  fill: red !important;
}

/* HEART-only clone cleanup — stays transparent, no shadows/borders */
.suck-to-cart-clone.heart-clone {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}