/* Ensure container is relative for absolute positioning */
.image-wrapper {
    position: relative;
}

@media (min-width: 1024px) {
    .pdp-image-wishlist {
        left: 10px;
        right: auto !important;
    }
}

.wishlist-toggle {
    position: absolute;
    top: 10px;
    /* Updated to 10px */
    right: 10px;
    /* Updated to 10px */
    z-index: 10;
    background: #ffffff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    /* Removed width and height as requested */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    outline: none;
    padding: 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.wishlist-toggle:hover {
    transform: scale(1.1);
}

.wishlist-toggle svg {
    width: 20px;
    /* Keep icon size controlled */
    height: 20px;
    transition: all 0.3s ease;
    padding: 2px;
}

/* Specific styles for the "added" state */
.wishlist-toggle.active svg {
    fill: #ff4d4d;
    stroke: #ff4d4d;
    /* Usually fully red when active looks best */
}

/* Specific styles for the "not added" state */
.wishlist-toggle:not(.active) svg {
    fill: none;
    stroke: black;
    /* Black stroke again */
    stroke-width: 1.5;
}

.wishlist-toggle.loading {
    opacity: 0.7;
    pointer-events: none;
}