/* Wishlist hearts (snippet ks-wishlist; design.md 5.5): heart-line, heart-fill in strawberry once saved.
   Greenshift's script marks saved hearts .alreadywish and swaps the icon for a spinner while it saves. */
.ks-wish { display: contents; }
.ks-wish .wishlistcount { display: none; }
.gsheartplus .wishiconwrap { display: inline-flex; }
.gsheartplus .ks-wish__on { display: none; }
.gsheartplus.alreadywish .ks-wish__off { display: none; }
.gsheartplus.alreadywish svg.ks-wish__on { display: inline-block; color: var(--ks-color-strawberry); }
.gsheartplus.alreadywish span.ks-wish__on { display: inline; }
.gsheartplus.loading { cursor: progress; }
.gsheartplus .wishiconwrap > svg:not(.ks-icon) { width: 20px; height: 20px; fill: currentColor; }

/* on a product card's photo (catalog, search, "You may also like"): top right, solid white */
.ksc-heart { position: absolute; z-index: 3; top: var(--ks-space-2); right: var(--ks-space-2); pointer-events: auto; }
.ksc-heart.ks-icon-btn--on-image { background: var(--ks-color-white); color: var(--ks-color-graphite); }
.ksc-heart:focus-visible { outline: 3px solid var(--ks-color-focus); outline-offset: 2px; }
@media (max-width: 782px) {
	.ksc-heart { top: var(--ks-space-1); right: var(--ks-space-1); }
}

/* "Save for later" in the product page's utility row (a third column) */
.ks-util-row:has(.ks-wish-btn) { --ksp-utils: 3; }