.product-block{
    display: grid;
    grid-template-rows: auto;
    max-width: 100%;
    .image{
        grid-row: 1;
        grid-column: 1 / 2;
        max-width: 100%;
        img{
            border-radius: .75rem;
            width: 100%;
            height: auto;
            max-width: 100%;
            aspect-ratio: 1;
            object-fit: cover;
        }
    }

    .content{
        margin-block-start: 1.25rem;
        grid-row: 2;
        grid-column: 1 / 2;
        display: grid;
        grid-template-rows: 1fr 1fr 1fr;
        grid-auto-rows: minmax(2.5rem, auto);
        @media (min-width: 768px){
            grid-auto-rows: initial;
        }

        .product-title{
            font-weight: normal;
            font-size: var(--wp--preset--font-size--medium);
            margin: 0;
            color: var(--wp--preset--color--lrdv-dark);
            a{
                color: inherit;
                text-decoration: none;
            }
        }
        .product-brand{
            align-self: baseline;
            font-weight: 100;
            color: var(--wp--preset--color--lrdv-light-grey);
            text-transform: uppercase;
            font-size: var(--wp--preset--font-size--extra-small);
            margin-block: 0.5rem 1.25rem;
            font-weight: 300;
            a{
                color: inherit;
                text-decoration: none;
            }
        }
        .product-price{
            color: var(--wp--preset--color--lrdv-grey);
            font-size: var(--wp--preset--font-size--medium);
            margin-block: initial;
        }
    }

    .add-to-cart{
        svg{
            display: none;
        }
        button{
            background-color: var(--wp--preset--color--lrdv-dark);
            width: 100%;
            color: white;
            padding: 0.75rem 1rem;
            border-radius: 0.25rem;
            font-size: var(--wp--preset--font-size--small);
            cursor: pointer;
        }
        @media (min-width: 768px){
            grid-row: 1;
            grid-column: 1;
            padding: 0.75rem;
            place-self: end;
            svg{
                display: block;
            }
            span{
                display: none;
            }
            button{
                background-color: initial;
                width: initial;
                padding: 0;
            }
        }
    }

    .add-to-wishlist{
        grid-row: 1;
        grid-column: 1;
        place-self: start;
        padding: 0.75rem;
    }
    
    .add-to-wishlist button {
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .add-to-wishlist svg {
        stroke: var(--wp--preset--color--lrdv-cream);
        stroke-width: 4px;
        fill: none;
        transition: fill 0.3s ease;
    }

    /* Pulsing animation for loading state */
    .add-to-wishlist button.pulsing svg {
        animation: wishlist-pulse 0.8s ease-in-out infinite;
    }

    /* Ripple effect for fill/unfill */
    .add-to-wishlist button.ripple svg {
        animation: wishlist-ripple 0.5s ease-out;
    }

    .unique{
        grid-row: 1;
        grid-column: 1;
        place-self: start end;
        padding: 0.75rem;
    }


    button{
        background: none;
        outline: none;
        border: none;
        padding: 0;
    }
}

/* Keyframe animations for wishlist */
@keyframes wishlist-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.15);
        opacity: 0.8;
    }
}

@keyframes wishlist-ripple {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.6;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}