/* Preserve the existing wishlist icons while making their buttons focusable. */
#product button.card__info-favorite[data-wishlist-control],
button.catalog__item-favorite[data-wishlist-control] {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: inherit;
  appearance: none;
  -webkit-appearance: none;
  overflow: visible;
}

#product button.card__info-favorite[data-wishlist-control] {
  position: relative;
}

/* The selected icon keeps the legacy cover/100% mask geometry, not the button. */
#product button.card__info-favorite[data-wishlist-control].active {
  -webkit-mask: none;
  mask: none;
  background-color: transparent;
  background-image: none;
}

#product button.card__info-favorite[data-wishlist-control].active::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  background-color: red;
  -webkit-mask: url("../img/favorite-accent.svg") no-repeat 100% 100%;
  mask: url("../img/favorite-accent.svg") no-repeat 100% 100%;
  -webkit-mask-size: cover;
  mask-size: cover;
}

#product button.card__info-favorite[data-wishlist-control]:focus-visible,
button.catalog__item-favorite[data-wishlist-control]:focus-visible {
  outline: 2px solid #222;
  outline-offset: 3px;
}

/* Keep a repeated tap on the button; letting it through can open the card below. */
#product button.card__info-favorite[data-wishlist-control].loading,
button.catalog__item-favorite[data-wishlist-control].loading {
  pointer-events: auto;
}

.product-wishlist-message {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 100001;
  width: calc(100% - 32px);
  max-width: 420px;
  box-sizing: border-box;
  padding: 12px 16px;
  border: 1px solid #d7b494;
  background: #fff;
  color: #222;
  font: inherit;
  line-height: 1.4;
}

.product-wishlist-message[hidden] {
  display: none;
}