/* Single product page: the custom "add to wishlist" button.
 *
 * Every value below is copied from what the site currently renders for
 * YITH's own button, not from YITH's plugin CSS, but from the site's
 * Customizer "Additional CSS" (stored in wp_options, not in any file, which
 * is why it doesn't show up in a code search): targeted at
 * .product .yith-add-to-wishlist-button-block / .product .yith-wcwl-icon
 * with !important, so it wins regardless of the plugin's own styling.
 * Read directly from computed styles on the live button. The one thing that
 * carries over unchanged either way is the icon/label colour: the
 * Customizer rule forces the SAME grey (#9f9f9f / #7d7d7d) in both states,
 * there is no colour-based "added" indicator on this site today, only the
 * heart's outline-vs-filled shape and the label text.
 *
 * Most of this store's traffic is mobile Safari. The button's tap target is
 * padded out to Apple's ~44pt minimum without changing how it looks: the
 * padding is offset by an equal negative margin, so the icon and label sit
 * exactly where the original, zero-padding button sits, and only the
 * invisible hit area grows. -webkit-tap-highlight-color and touch-action
 * are there so a tap does not flash iOS's default grey highlight or wait out
 * its ~300ms double-tap-to-zoom delay. */

.pwtw-wishlist {
  display: block;
  width: max-content;
  height: 30px;
  margin: 20px 0 7px -5px;
}

.pwtw-wishlist__button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 8px;
  margin: -13px -8px;
  font-size: 14px;
  color: #7d7d7d;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* An <a>, not a <button> — see Wishlist.php — so "disabled" is our own
 * aria-disabled convention (set by wishlist.js), not :disabled.
 *
 * Deliberately no visual change here (no opacity dip, no anything) —
 * aria-disabled only blocks the click handler while the initial status
 * fetch is in flight. An opacity change tied to that fetch is exactly the
 * kind of load-time flicker Core Web Vitals penalises, and this fetch is
 * usually fast enough that the dip was pure noise anyway. */
.pwtw-wishlist__button[aria-disabled="true"] {
  cursor: default;
}

.pwtw-wishlist__button--pulse {
  animation: pwtw-wishlist-pulse 0.25s ease-out;
}

.pwtw-wishlist__icon {
  width: 30px;
  height: 25px;
  margin-right: -5px;
  fill: none;
  stroke: #9f9f9f;
  stroke-width: 1.5;
  flex-shrink: 0;
}

.pwtw-wishlist--added .pwtw-wishlist__icon {
  fill: #9f9f9f;
}

@keyframes pwtw-wishlist-pulse {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}