/* OyeKudiye - card action icon set: heart (.lst-wish), quick view eye (.lst-qv), video play (.lst-play), PDP heart (.pdp-wish).
   One system: 24px viewBox glyphs, 1.5px stroke, ring r=9.5 (the play icon is the reference), 32px hit disc
   (>=44px touch target via ::after, layout unchanged). Doc: docs/frontend-wiring/CARD_ICONS.md */
:root{--ci-ink:#E6157F;--ci-ink-deep:#B00A60;--ci-plum:#3B0B3E;--ci-halo:rgba(230,21,127,.1);--ci-ease:cubic-bezier(.22,.9,.32,1)}
.lst-tools{gap:4px}
.lst-tools .lst-wish,.lst-tools .lst-qv,.lst-tools .lst-play{position:relative;box-sizing:border-box;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:transparent;
  color:var(--ci-ink) !important;cursor:pointer;display:grid;place-items:center;line-height:0;transform:none !important;-webkit-tap-highlight-color:transparent;
  transition:background-color .2s,color .2s}
.lst-tools .lst-wish::after,.lst-tools .lst-qv::after,.lst-tools .lst-play::after{content:"";position:absolute;inset:-6px -3px}
.lst-tools svg{width:24px;height:24px;display:block;overflow:visible;transition:transform .25s var(--ci-ease)}
.lst-tools .ci-ring,.lst-play svg circle{fill:transparent;stroke:currentColor;stroke-width:1.5;transition:fill .2s,stroke .2s}
.lst-tools .ci-glyph{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:fill .2s,stroke .2s}
.lst-tools .ci-pupil{fill:currentColor;stroke:none}
.lst-wish.is-on .ci-glyph{fill:var(--ci-ink);stroke:var(--ci-ink)}
.lst-wish.is-on{background:var(--ci-halo)}
.lst-wish.is-on .ci-ring{fill:transparent;stroke:var(--ci-ink)}
@media (hover:hover){
  .lst-tools .lst-wish:hover,.lst-tools .lst-qv:hover,.lst-tools .lst-play:hover{background:var(--ci-halo);color:var(--ci-ink-deep) !important}
  .lst-tools .lst-wish:hover svg,.lst-tools .lst-qv:hover svg,.lst-tools .lst-play:hover svg{transform:scale(1.1)}
}
.lst-tools .lst-wish:focus-visible,.lst-tools .lst-qv:focus-visible,.lst-tools .lst-play:focus-visible{outline:2px solid var(--ci-ink);outline-offset:2px;background:var(--ci-halo)}
.lst-tools .lst-wish:active svg,.lst-tools .lst-qv:active svg,.lst-tools .lst-play:active svg{transform:scale(.88);transition-duration:.08s}
.lst-wish[aria-busy="true"]{opacity:.7}
.lst-wish.is-pop svg,.pdp-wish.is-pop svg{animation:ciPop .42s var(--ci-ease)}
@keyframes ciPop{0%{transform:scale(.7)}55%{transform:scale(1.28)}100%{transform:scale(1)}}
@media (max-width:640px){
  .lst-tools{gap:2px}
  .lst-tools .lst-wish,.lst-tools .lst-qv,.lst-tools .lst-play{width:32px;height:32px}
  .lst-tools svg,.lst-play svg{width:24px;height:24px}
}
/* PDP heart: same ink/states on its white disc over the photo */
.pdp-wish{color:var(--ci-ink);transition:background-color .2s,color .2s,box-shadow .2s;box-shadow:inset 0 0 0 1px rgba(230,21,127,.28)}
.pdp-wish::after{content:"";position:absolute;inset:-3px}
.pdp-wish svg{transition:transform .25s var(--ci-ease);overflow:visible}
.pdp-wish svg path{stroke-width:1.5}
.pdp-wish.is-on{box-shadow:inset 0 0 0 1px var(--ci-ink)}
.pdp-wish:focus-visible{outline:2px solid var(--ci-ink);outline-offset:2px}
.pdp-wish:active svg{transform:scale(.88);transition-duration:.08s}
@media (hover:hover){.pdp-wish:hover{background:#fff;color:var(--ci-ink-deep);box-shadow:inset 0 0 0 1px var(--ci-ink)}.pdp-wish:hover svg{transform:scale(1.1)}}
@media (prefers-reduced-motion:reduce){.lst-tools svg,.pdp-wish svg{transition:none !important;animation:none !important}.lst-tools .lst-wish:hover svg,.lst-tools .lst-qv:hover svg,.lst-tools .lst-play:hover svg,.pdp-wish:hover svg{transform:none}}

/* Owner decision: only the video icon is circled. Heart and eye are bare thin-line glyphs (no ring, no disc/halo behind them);
   the play icon keeps its ring and halo. The glyph is drawn larger since it no longer sits inside the ring. */
.lst-tools .lst-wish .ci-ring,.lst-tools .lst-qv .ci-ring{display:none}
/* Owner: all three at 42px, desktop and phone alike - one fixed size, not responsive-scaled down. */
.lst-tools .lst-wish,.lst-tools .lst-qv,.lst-tools .lst-play{width:42px;height:42px}
.lst-tools .lst-wish svg,.lst-tools .lst-qv svg,.lst-tools .lst-play svg{width:30px;height:30px}
.lst-tools .lst-wish .ci-glyph,.lst-tools .lst-qv .ci-glyph{stroke-width:1.35}
.lst-tools .lst-wish,.lst-tools .lst-qv{background:transparent !important}
.lst-wish.is-on{background:transparent !important}
.lst-tools .lst-wish:focus-visible,.lst-tools .lst-qv:focus-visible{background:transparent !important;border-radius:8px}
@media (hover:hover){.lst-tools .lst-wish:hover,.lst-tools .lst-qv:hover{background:transparent !important}}
@media (max-width:640px){
  .lst-tools .lst-wish,.lst-tools .lst-qv,.lst-tools .lst-play{width:42px;height:42px}
  .lst-tools .lst-wish svg,.lst-tools .lst-qv svg,.lst-tools .lst-play svg{width:30px;height:30px}
}
/* PDP heart: keep the white backing disc (needed for contrast over the photo), drop the pink ring around it */
.pdp-wish,.pdp-wish.is-on,.pdp-wish:hover{box-shadow:none}