.myfavorites-btn {
  background: rgba(0, 0, 0, 0);
  border: 0;
  cursor: pointer;
  display: inline-block;
  height: var(--myf-btn-size, 24px);
  margin: 0;
  padding: 0;
  text-decoration: none;
  width: var(--myf-btn-size, 24px);
}
.myfavorites-btn-good {
  height: 48px;
  width: 48px;
}
.myfavorites-btn:focus {
  outline: none;
}
.myfavorites-btn:before {
  background-color: var(
    --myf-btn-icon-color,
    var(--myf-primary-color, #ffa900)
  );
  content: "";
  display: block;
  height: 100%;
  -webkit-mask-image: var(
    --myf-btn-icon,
    url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="%23ffa900" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3e%3cpath d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/%3e%3c/svg%3e')
  );
  mask-image: var(
    --myf-btn-icon,
    url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="%23ffa900" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3e%3cpath d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/%3e%3c/svg%3e')
  );
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-transition: var(
    --myf-btn-transition,
    background-color 0.2s ease-in-out
  );
  -o-transition: var(--myf-btn-transition, background-color 0.2s ease-in-out);
  transition: var(--myf-btn-transition, background-color 0.2s ease-in-out);
  width: 100%;
}
.myfavorites-btn.glow-hover:before {
  background-image: -o-linear-gradient(
    135deg,
    transparent 46.5%,
    var(--myf-btn-icon-color-hover, #fff) 50%,
    transparent 53.5%
  );
  background-image: linear-gradient(
    -45deg,
    transparent 46.5%,
    var(--myf-btn-icon-color-hover, #fff) 50%,
    transparent 53.5%
  );
  background-position: 100%;
  background-size: 300% 300%;
  -webkit-transition: background-position 0.6s;
  -o-transition: background-position 0.6s;
  transition: background-position 0.6s;
}
.myfavorites-btn.glow-hover:hover:before {
  background-position: 0;
}
.myfavorites-btn.animate:before {
  -webkit-animation: var(--myf-btn-animate, myfavorites-btn 0.2s 1);
  animation: var(--myf-btn-animate, myfavorites-btn 0.2s 1);
}
.myfavorites-btn.added:before {
  background-color: var(
    --myf-btn-added-icon-color,
    var(--myf-primary-color, #ffa900)
  );
  -webkit-mask-image: var(
    --myf-btn-added-icon,
    url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="%23ffa900" stroke="%23ffa900" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3e%3cpath d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/%3e%3c/svg%3e')
  );
  mask-image: var(
    --myf-btn-added-icon,
    url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="%23ffa900" stroke="%23ffa900" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3e%3cpath d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/%3e%3c/svg%3e')
  );
}
.myfavorites-counter {
  cursor: pointer;
  display: inline-block;
  position: relative;
  text-decoration: none;
}
.myfavorites-counter-mobile {
  display: none;
}
.myfavorites-counter:before {
  background-color: var(
    --myf-counter-icon-color,
    var(--myf-secondary-color, rgba(0, 0, 0, 0.549))
  );
  content: "";
  height: var(--myf-counter-size, 24px);
  -webkit-mask-image: var(
    --myf-counter-icon,
    url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="%23ffa900" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3e%3cpath d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/%3e%3c/svg%3e')
  );
  mask-image: var(
    --myf-counter-icon,
    url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="%23ffa900" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3e%3cpath d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/%3e%3c/svg%3e')
  );
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  width: var(--myf-counter-size, 24px);
}
.myfavorites-counter .counter-value,
.myfavorites-counter:before {
  display: block;
  -webkit-transition: var(--myf-counter-transition, all 0.2s ease-in-out);
  -o-transition: var(--myf-counter-transition, all 0.2s ease-in-out);
  transition: var(--myf-counter-transition, all 0.2s ease-in-out);
}
.myfavorites-counter .counter-value {
  background-color: var(
    --myf-counter-value-bg,
    var(--myf-primary-color, #ffa900)
  );
  border-radius: 50%;
  color: var(--myf-counter-value-color, #fff);
  font-size: var(--myf-counter-font-size, 9px);
  height: var(--myf-counter-value-size, 18px);
  line-height: var(--myf-counter-value-size, 18px);
  opacity: var(--myf-counter-value-opacity, 0.9);
  position: absolute;
  right: var(--myf-counter-value-offset, -9px);
  text-align: center;
  top: var(--myf-counter-value-offset, -9px);
  width: var(--myf-counter-value-size, 18px);
}
.myfavorites-counter:hover:before {
  background-color: var(
    --myf-counter-icon-color-hover,
    var(--myf-primary-color, #ffa900)
  );
}
.myfavorites-counter:hover .counter-value {
  opacity: var(--myf-counter-value-opacity-hover, 1);
}
.myfavorites-counter-mobile:before {
  background-color: #fff;
  width: var(--myf-counter-size-m, 24px);
  height: var(--myf-counter-size-m, 24px);
}
.myfavorites-counter-mobile .counter-value {
  background-color: #424f60;
}
@media screen and (max-width: 1250px) {
  .myfavorites-counter-mobile {
    display: block;
  }
}
@-webkit-keyframes myfavorites-btn {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  90% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes myfavorites-btn {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  90% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}