.wishlist-heart-group {
  display: inline-block;
  height: 34px;
  width: 48px;
  text-align: center;
  margin: 0px 2px 0px 15px;
}
.wishlist-heart-group input[type="checkbox"] {
  left: -999999px;
  position: absolute;
}
.wishlist-heart-group input[type="checkbox"] + label svg {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
.wishlist-heart-group input[type="checkbox"]:checked + label svg {
  -webkit-animation: wishlist-heart-wiggle 400ms 50ms forwards ease-in-out;
          animation: wishlist-heart-wiggle 400ms 50ms forwards ease-in-out;
}
.wishlist-heart-group input[type="checkbox"]:checked + label svg #heart-path {
  -webkit-animation: wishlist-heart-add 300ms forwards;
          animation: wishlist-heart-add 300ms forwards;
  stroke: #f8332a;
}

.wishlist-heart-group input[type="checkbox"] + label svg #heart-path {
  -webkit-transition: fill 200ms;
  transition: fill 200ms;
}
.wishlist-heart-group input[type="checkbox"] + label:hover svg #heart-path {
  -webkit-transition: stroke 150ms linear;
  transition: stroke 150ms linear;
  stroke: #f8332a;
}
.wishlist-heart-group input[type="checkbox"] + label:before {
  -webkit-box-align: center;
          align-items: center;
  background-color: #000;
  border-radius: 3px;
  box-sizing: border-box;
  color: #FFF;
  content: attr(data-hover-text);
  display: -webkit-box;
  display: flex;
  font-size: 0.8em;
  height: 25px;
  -webkit-box-pack: center;
          justify-content: center;
  left: 50%;
  line-height: 1;
  opacity: 0;
  padding: 0.5em;
  position: absolute;
  text-align: center;
  top: -2.25em;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-transition: opacity 100ms linear;
  transition: opacity 100ms linear;
  white-space: pre;
}
.wishlist-heart-group input[type="checkbox"] + label:hover:before {
  opacity: 1;
  -webkit-transition-delay: 400ms;
          transition-delay: 400ms;
}
.wishlist-heart-group label {
  display: inline-block;
  position: relative;
  width: 100%;
}
@-webkit-keyframes wishlist-heart-wiggle {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
  75% {
    -webkit-transform: rotate(8deg);
            transform: rotate(8deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes wishlist-heart-wiggle {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
  75% {
    -webkit-transform: rotate(8deg);
            transform: rotate(8deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@-webkit-keyframes wishlist-heart-add {
  0% {
    stroke-width: 5;
  }
  50% {
    stroke-width: 20;
  }
  100% {
    fill: #f8332a;
    stroke-width: 5;
  }
}
@keyframes wishlist-heart-add {
  0% {
    stroke-width: 5;
  }
  50% {
    stroke-width: 20;
  }
  100% {
    fill: #f8332a;
    stroke-width: 5;
  }
}