body { min-height: 100vh; }

.product-card {
  transition: transform .15s ease, box-shadow .15s ease;
}

.product-card:hover {
  transform: translateY(-2px);
}

.plus-one {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  font-weight: 900;
  font-size: 1rem;
  animation: plus-one-fly .7s cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes plus-one-fly {
  0% {
    opacity: 0;
    transform: translate(-50%, 4px) scale(.75);
  }

  20% {
    opacity: 1;
    transform: translate(-50%, -4px) scale(1.15);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -44px) scale(.95);
  }
}

.cart-bump {
  animation: cart-bump .22s ease-out;
}

@keyframes cart-bump {
  50% { transform: scale(1.28); }
}

.cart-reaction {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  font-size: 1.65rem;
  filter: drop-shadow(0 4px 8px rgb(0 0 0 / .16));
  animation: cart-reaction-fly .9s cubic-bezier(.18,.75,.25,1) forwards;
}

.cart-reaction.boom {
  animation: cart-reaction-boom .82s cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes cart-reaction-fly {
  0% {
    opacity: 0;
    transform: translate(-50%, 8px) scale(.55) rotate(-8deg);
  }

  18% {
    opacity: 1;
    transform: translate(-50%, -2px) scale(1.2) rotate(4deg);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -58px) scale(1) rotate(-4deg);
  }
}

@keyframes cart-reaction-boom {
  0% {
    opacity: 0;
    transform: translate(-50%, 6px) scale(.45);
  }

  25% {
    opacity: 1;
    transform: translate(-50%, -5px) scale(1.55);
  }

  55% {
    opacity: 1;
    transform: translate(-50%, -18px) scale(1.05);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -62px) scale(.8);
  }
}