/* ══ WISHLIST ═══════════════════════════════════════════════════════════════
   The heart button, in two shapes:
     .wish-tile   — floats over a product image, top-right of .product-card
     .wish-inline — sits beside a page's Add to Bag button
   Plus the pieces the Saved Items panel adds on top of account.css.
   Colour tokens come from storefront.css :root, EXCEPT the red below.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── The heart red ───────────────────────────────────────────────────────
   The brand kit has no red: cos-300, club-900, club-500, blush-300 and
   sparkle-300 are the whole palette. The heart used var(--coral), which the
   rebrand alias layer remapped onto club-900, so a saved heart rendered as a
   solid near-black blob — the same alias failure that hit the Save pills on
   /membership.

   So this is a deliberate one-off outside the kit. A heart is a convention:
   people read red as "saved" and anything else as decoration, and the pair of
   states has to be legible at 17px over an arbitrary product photo. Rose-600
   sits closer to blush-300 than a fire-engine red would, so it reads as part
   of this palette rather than an alert.

   4.7:1 on white — comfortably past the 3:1 that WCAG asks of a non-text
   graphic, and it holds up on the translucent white tile disc too.

   Change it HERE and every heart, hover, pressed state and remove control
   moves together. */
:root{
  --wish-red:#E11D48;
  --wish-red-deep:#BE123C;   /* hover / active depth */
  --wish-red-tint:#FFF1F4;   /* the .wish-inline saved background */
}

.wish-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:none;background:none;padding:0;cursor:pointer;color:var(--wish-red);
  -webkit-tap-highlight-color:transparent;
}
.wish-btn svg{
  width:20px;height:20px;display:block;
  fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
  transition:fill .18s ease,stroke .18s ease,transform .18s ease;
}
/* Saved vs not-saved is carried by FILL, not colour: an outlined red heart is
   "not saved yet", a filled one is "saved". Using colour for the state as well
   would mean the unsaved heart had to be some other hue, which is what made it
   easy to miss before. */
.wish-btn:hover{color:var(--wish-red-deep);}
.wish-btn:focus-visible{outline:2px solid var(--wish-red);outline-offset:3px;border-radius:50%;}
.wish-btn[aria-pressed="true"]{color:var(--wish-red);}
.wish-btn[aria-pressed="true"] svg{fill:var(--wish-red);stroke:var(--wish-red);}
.wish-btn[aria-pressed="true"]:hover svg{fill:var(--wish-red-deep);stroke:var(--wish-red-deep);}

/* The pop on save. Kept to one short scale — a heart that bounces for half a
   second reads as a toy on a checkout-bearing page. */
.wish-btn.wish-pop svg{animation:wish-pop .34s ease;}
@keyframes wish-pop{
  0%{transform:scale(1);} 42%{transform:scale(1.3);} 100%{transform:scale(1);}
}
@media(prefers-reduced-motion:reduce){
  .wish-btn.wish-pop svg{animation:none;}
  .wish-btn svg{transition:none;}
}

/* ── Over a product tile ─────────────────────────────────────────────────
   The white disc is what keeps the red readable over a dark or busy product
   photo; without it a red heart on a red packshot disappears. */
.wish-tile{
  position:absolute;top:12px;right:12px;z-index:3;
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 2px 8px rgba(44,44,44,.16);
  transition:background .15s,box-shadow .15s,transform .12s;
}
.wish-tile:hover{background:#fff;box-shadow:0 4px 14px rgba(44,44,44,.22);}
.wish-tile:active{transform:scale(.93);}
.wish-tile svg{width:17px;height:17px;}

/* ── Beside Add to Bag ───────────────────────────────────────────────────── */
.pd-actions{display:flex;gap:12px;align-items:stretch;}
.pd-actions .pd-add{flex:1;}
.wish-inline{
  flex-shrink:0;padding:0 20px;border:1.5px solid var(--light-gray);
  border-radius:9px;background:#fff;font-family:var(--heading-font);
  font-size:13px;font-weight:700;color:var(--charcoal);
  transition:border-color .15s,color .15s,background .15s;
}
.wish-inline:hover{border-color:var(--wish-red);color:var(--wish-red);background:var(--wish-red-tint);}
.wish-inline[aria-pressed="true"]{border-color:var(--wish-red);background:var(--wish-red-tint);color:var(--wish-red);}
.wish-inline .wish-label{white-space:nowrap;}

/* ── Toast ──────────────────────────────────────────────────────────────── */
.wish-toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);
  background:var(--charcoal);color:#fff;font-size:13.5px;font-weight:600;
  padding:12px 20px;border-radius:30px;box-shadow:0 8px 26px rgba(0,0,0,.24);
  z-index:900;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
  display:flex;align-items:center;gap:12px;max-width:90vw;
}
.wish-toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto;}
.wish-toast a{color:var(--blush-pink);font-weight:700;text-decoration:underline;white-space:nowrap;}
@media(prefers-reduced-motion:reduce){.wish-toast{transition:none;}}

/* ── Saved Items panel on /account ─────────────────────────────────────── */
.saved-card{position:relative;}
.saved-card.removing{opacity:.35;pointer-events:none;transition:opacity .2s;}
.saved-remove{
  position:absolute;top:10px;right:10px;z-index:2;
  width:30px;height:30px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.92);color:var(--gray);
  box-shadow:0 2px 8px rgba(44,44,44,.16);
  display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1;
  transition:color .15s,background .15s;
}
/* Same red as the heart — this control unsaves the thing the heart saved. */
.saved-remove:hover{color:var(--wish-red);background:#fff;}
.saved-img-link{display:block;}
a.saved-name{display:block;color:var(--charcoal);text-decoration:none;}
a.saved-name:hover{color:var(--coral);}

/* Saved-items count beside the sidebar nav label */
.acct-nav-n{
  margin-left:auto;background:#e8f2fb;color:var(--soft-rose);
  font-family:var(--heading-font);font-size:10px;font-weight:700;
  min-width:20px;height:20px;padding:0 6px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
}
.acct-nav a.active .acct-nav-n{background:#fff;}