.ch-container {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 28px;
  cursor: pointer;
  user-select: none;
}

.ch-heart {
  width: 100%;
  height: 100%;
  cursor: pointer;
  display: inline-block;
  transform-origin: center center;
  transition: color 0.3s ease, transform 0.3s ease;
  color: #000; /* always black by default */
  transform: scale(1);
}

/* Hover: grow and turn pink */
.ch-heart:hover {
  color: #f9c0b8;
  transform: scale(1.2);
}

/* Animate on click only (temporary pulse) */
.ch-heart.animate {
  animation: ch-grow 0.4s ease forwards;
}

.ch-heart svg {
  width: 100%;
  height: 100%;
  fill: currentColor; /* allows CSS color to control the heart */
  transition: fill 0.3s ease;
  display: block;
}

.ch-count {
  position: absolute;
  top: -12px;
  right: -15px;
  background: transparent;
  color: #000;
  font-size: 0.7rem;
  font-weight: 300;
  padding: 0 6px;
  border-radius: 12px;
  line-height: 1.5;
  z-index: 2;
}

@keyframes ch-grow {
  0% { transform: scale(1); }
  50% { transform: scale(1.4); }
  100% { transform: scale(1); }
}