/**
 * lw-wishlist heart — state + minimal default chrome. Loads site-wide.
 *
 * Surfaces owned by typesense-search (search grid, related carousel,
 * collection widget) position and size the heart with their own
 * .lw-card__wish / .lw-card__wishlist rules; these defaults only need to
 * make the button presentable anywhere else (e.g. the [lw_wishlist_heart]
 * shortcode on a product page).
 *
 * State contract: .add = not in wishlist (outline), .remove = in wishlist
 * (filled red). heart.js swaps the classes.
 */

.lw-wishlist-heart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid #e5e7eb;
  border-radius: 50%;
  background: #fff;
  color: #4b5563;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.lw-wishlist-heart:hover {
  border-color: #d1d5db;
  transform: scale(1.05);
}

.lw-wishlist-heart .lw-heart-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  pointer-events: none; /* clicks always land on the button */
  transition: color 0.15s ease;
}

.lw-wishlist-heart.remove .lw-heart-icon,
.lw-wishlist-heart:hover .lw-heart-icon {
  color: #dc2626;
}

.lw-wishlist-heart.remove .lw-heart-icon {
  fill: currentColor;
}