}
/* Heart overlay inside hero image (top-left) */
.cf-hero { position: relative; }

.cf-heart-overlay {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
}

.cf-heart-overlay .cf-heart {
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  border-radius: 999px;
}
/* ─────────────────────────────────────────────
   Heart button states
   - Default: transparent outline heart
   - Active: filled heart
   ───────────────────────────────────────────── */
.cf-heart {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: white;                 /* outline color */
  -webkit-text-stroke: 1.5px white; /* gives it the hollow outline */
  text-shadow: 0 0 4px rgba(0,0,0,0.4); /* ensures visibility over photos */
  cursor: pointer;
  transition: transform 0.15s ease, color 0.15s ease;
}

.cf-heart:hover {
  transform: scale(1.15);
}

.cf-heart.is-active {
  color: #e11d48;               /* filled heart (rose-600) */
  -webkit-text-stroke: 0;       /* remove outline stroke when filled */
}
/* Hearts on trainer cards/front page */
.cf-card .cf-heart {
  font-size: 16px;               /* smaller for cards */
  color: #888;                   /* grey outline */
  -webkit-text-stroke: 1px #888; /* hollow grey heart */
  text-shadow: none;
}

.cf-card .cf-heart.is-active {
  color: #e11d48;                /* filled red when active */
  -webkit-text-stroke: 0;
}