.product-wishlist {
    display: flex;
    justify-content: end;
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    .total-wishlist-safes {
        color: #fff;
    }
    .add-to-wishlist {
        cursor: pointer;
        display: flex;
        &:has(span) {
            display: flex;
            flex-direction: column;
            align-items: end;

            span {
                font-size: 14px;
            }
        }

        &.added {
            svg {
                animation: wishlist_bounce 0.5s linear;

                path {
                    fill: #fff
                }
            }
        }

        svg {
            width: 22px;
            height: 20px;

            path {
                stroke: #fff;
                fill: transparent;

            }
        }
    }

}

@keyframes wishlist_bounce {
    0% {
        transform: scale(1);
    }

    25% {
        transform: scale(1.5);
    }

    50% {
        transform: scale(0.9);
    }

    75% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}