.wishlist-icon {
    display: flex;
    align-items: center;
    padding: 7px;
    gap: 5px;
}

.wishlist-icon i {
    display: inherit;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background-color: rgba(51, 77, 99, 1);
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}

.wishlist-icon.wishlist--add i {
    -webkit-mask-image: url(images/i-heart-s.svg);
    mask-image: url(images/i-heart-s.svg);
}

.wishlist-icon.wishlist--added i {
    background: url(images/i-heart-f.svg) no-repeat center;
}