Restore a light background on mobile wishlist hearts

Fully transparent made the heart invisible against some product photos — keeps it smaller than the default but with a semi-transparent (60%) background circle instead of none, and stops dimming the icon itself.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

app/components/WishlistButton.tsx

@@ -33,9 +33,10 @@ export function WishlistButton({
    * reveals a `group-hover`-gated element the way a mouse hover does.
    * Rather than falling back to "always visible at full size" (which
    * recreates the exact "a heart on every card" visual noise this mode
-   * exists to avoid), touch devices get a smaller, backgroundless variant
-   * instead — present and tappable everywhere, but visually quiet enough
-   * not to read as a wall of hearts. */
+   * exists to avoid), touch devices get a smaller variant with a lighter
+   * (not removed — fully transparent made it invisible against some
+   * product photos) background instead — present and tappable everywhere,
+   * but visually quieter than the full-size default. */
   revealOnHover?: boolean;
 }) {
   const { isWishlisted, toggle } = useWishlist();
@@ -68,7 +69,7 @@ export function WishlistButton({
       disabled={pending}
       className={`flex h-9 w-9 items-center justify-center rounded-full bg-bg-base/90 backdrop-blur-sm transition-all active:scale-90 disabled:opacity-60 ${
         revealOnHover && !wishlisted
-          ? "opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100 pointer-coarse:opacity-100 pointer-coarse:h-7 pointer-coarse:w-7 pointer-coarse:bg-transparent pointer-coarse:backdrop-blur-none"
+          ? "opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100 pointer-coarse:opacity-100 pointer-coarse:h-7 pointer-coarse:w-7 pointer-coarse:bg-bg-base/60"
           : ""
       } ${className}`}
     >
@@ -77,7 +78,7 @@ export function WishlistButton({
         height="18"
         viewBox="0 0 20 18"
         fill={wishlisted ? "currentColor" : "none"}
-        className={`${wishlisted ? "text-brand" : "text-text-primary"} ${revealOnHover && !wishlisted ? "pointer-coarse:scale-75 pointer-coarse:opacity-70" : ""}`}
+        className={`${wishlisted ? "text-brand" : "text-text-primary"} ${revealOnHover && !wishlisted ? "pointer-coarse:scale-75" : ""}`}
       >
         <path
           d="M10 17S1 11.5 1 5.8C1 2.6 3.4 1 5.8 1c1.6 0 3.2.9 4.2 2.4C11 1.9 12.6 1 14.2 1 16.6 1 19 2.6 19 5.8 19 11.5 10 17 10 17Z"