/**
 * Owleys Customer Wishlist
 * Scoped storefront heart component for eligible account members.
 */

.product-card__thumb,
.deal-flash-card {
    position: relative;
}

.owleys-wishlist-toggle {
    position: absolute;
    z-index: 5;
    top: 10px;
    right: 10px;
    display: inline-flex;
    width: 36px;
    height: 36px;
    padding: 0;
    align-items: center;
    justify-content: center;
    color: #171717;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, .4) 0%,
        rgba(255, 255, 255, .25) 100%
    );
    border: 1.5px solid rgba(0, 0, 0, .15);
    border-radius: 50%;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, .35),
        0 2px 6px rgba(0, 0, 0, .25),
        inset 0 1px 0 rgba(255, 255, 255, .8),
        inset 0 -1px 2px rgba(0, 0, 0, .05);
    cursor: pointer;
    opacity: 1;
    transform: none;
    transition: color .2s ease, background .25s ease, border-color .2s ease, box-shadow .25s ease, opacity .2s ease, transform .08s ease;
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
}

.owleys-wishlist-toggle svg {
    width: 18px;
    height: 18px;
    overflow: visible;
    fill: transparent;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.owleys-wishlist-toggle.is-saved,
.owleys-wishlist-toggle[aria-pressed="true"] {
    color: #ff8338;
    border-color: rgba(255, 131, 56, .45);
}

.owleys-wishlist-toggle.is-saved svg,
.owleys-wishlist-toggle[aria-pressed="true"] svg {
    fill: currentColor;
}

.owleys-wishlist-toggle:focus-visible {
    color: #fff;
    background: linear-gradient(135deg, #ff8338 0%, #f57528 100%);
    border-color: rgba(0, 0, 0, .15);
    box-shadow:
        0 6px 20px rgba(255, 131, 56, .5),
        inset 0 1px 0 rgba(255, 255, 255, .35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.owleys-wishlist-toggle:focus-visible svg {
    fill: currentColor;
}

.owleys-wishlist-toggle:focus-visible {
    outline: 2px solid #171717;
    outline-offset: 3px;
}

.owleys-wishlist-toggle:active {
    transform: scale(.98);
}

.owleys-wishlist-toggle[disabled],
.owleys-wishlist-toggle[aria-busy="true"] {
    cursor: wait;
    opacity: .55;
}

@media (hover: hover) and (pointer: fine) {
    .owleys-wishlist-toggle:hover {
        color: #fff;
        background: linear-gradient(135deg, #ff8338 0%, #f57528 100%);
        border-color: rgba(0, 0, 0, .15);
        box-shadow:
            0 6px 20px rgba(255, 131, 56, .5),
            inset 0 1px 0 rgba(255, 255, 255, .35);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    .owleys-wishlist-toggle:hover svg {
        fill: currentColor;
    }
}

@media (max-width: 767px) {
    .owleys-wishlist-toggle {
        top: 8px;
        right: 8px;
        width: 32px;
        height: 32px;
        background: linear-gradient(
            135deg,
            rgba(255, 255, 255, .45) 0%,
            rgba(255, 255, 255, .3) 100%
        );
        border-color: rgba(0, 0, 0, .2);
        box-shadow:
            0 3px 12px rgba(0, 0, 0, .3),
            0 1px 4px rgba(0, 0, 0, .2),
            inset 0 1px 0 rgba(255, 255, 255, .8);
        backdrop-filter: blur(12px) saturate(180%);
        -webkit-backdrop-filter: blur(12px) saturate(180%);
    }

    .owleys-wishlist-toggle svg {
        width: 16px;
        height: 16px;
    }

    .owleys-wishlist-toggle.is-saved,
    .owleys-wishlist-toggle[aria-pressed="true"] {
        border-color: rgba(255, 131, 56, .45);
    }

    .owleys-wishlist-toggle:focus-visible {
        background: linear-gradient(135deg, #ff8338 0%, #f57528 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .owleys-wishlist-toggle {
        transition-duration: .01ms;
    }
}