/*.product-icons {
    display: none
}
*/
.product-image img {
    background-color: rgb(var(--light-rgb))
}

.product-card {
    position: relative
}

    .product-card:hover .product-icons {
        display: block
    }

        .product-card:hover .product-icons .cart,
        .product-card:hover .product-icons .view,
        .product-card:hover .product-icons .wishlist {
            position: absolute;
            width: 1.75rem;
            height: 1.75rem;
            border-radius: .5rem;
            display: flex;
            align-items: center;
            justify-content: center
        }

            .product-card:hover .product-icons .cart i,
            .product-card:hover .product-icons .view i,
            .product-card:hover .product-icons .wishlist i {
                font-size: .9rem
            }

        .product-card:hover .product-icons .wishlist {
            background-color: rgba(var(--danger-rgb), .2);
            color: rgb(var(--danger-rgb));
            inset-block-start: 1.75rem;
            inset-inline-end: 1.75rem
        }

        .product-card:hover .product-icons .cart {
            background-color: rgba(var(--primary-rgb), .2);
            color: var(--primary-color);
            inset-block-start: 4rem;
            inset-inline-end: 1.75rem
        }

        .product-card:hover .product-icons .view {
            background-color: rgba(var(--success-rgb), .2);
            color: rgb(var(--success-rgb));
            inset-block-start: 6.25rem;
            inset-inline-end: 1.75rem
        }




.image-container {
    position: relative;
    display: inline-block;
}

.product-image {
    display: block;
    width: 100%;
    height: auto;
    cursor: pointer; /* Make the image clickable */
}

.icon-container {
    position: absolute;
    top: 10px; /* Adjust distance from top */
    right: 10px; /* Adjust distance from right */
    display: flex;
    flex-direction: column;
    gap: 2px; /* Space between icons */
    opacity: 0; /* Hide icons by default */
    pointer-events: none; /* Disable pointer events by default */
    transition: opacity 0.3s;
    z-index: 1; /* Ensure icons are on top of the image */
}

.image-container:hover .icon-container {
    opacity: 1; /* Show icons when hovering over the image */
    pointer-events: auto; /* Enable pointer events when hovering */
}

.icon-button {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    transition: color 0.3s;
}

    .icon-button:hover {
        color: yellow; /* Change color on hover for better visibility */
    }

    .icon-button[disabled] {
        opacity: 0.5; /* Slightly dim the icon to show it's disabled */
        cursor: not-allowed; /* Show a not-allowed cursor */
    }