.header-heart {
  --header-heart-base-color: currentColor;
  --header-heart-hover-color: #7a6348;
  --header-heart-liked-color: #be123c;
  --header-heart-stroke-width: 1;
  --header-heart-duration-ms: 900ms;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  line-height: 0;
  cursor: pointer;
  user-select: none;
}

.header-heart-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.header-heart-path,
.header-heart-anim {
  fill: none;
  stroke-width: var(--header-heart-stroke-width);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.header-heart-base-static {
  stroke: var(--header-heart-base-color);
  opacity: 1;
}

.header-heart-steady-hover {
  stroke: var(--header-heart-hover-color);
  opacity: 0.24;
}

.header-heart-steady-liked {
  stroke: var(--header-heart-liked-color);
  opacity: 0;
}

.header-heart-anim {
  opacity: 1;
  pointer-events: none;
}