/* ============================================================
   favourites.css
   Heart favourite button and price-watch badge overlaid on the
   product gallery main image.
   Load on: product pages only (via print_html_headers extra_css).
   ============================================================ */

/* Wrapper so the button can be absolutely positioned over the image */
.ms-product-gallery__main-wrap {
    position: relative;
    display: inline-block;
    width: 100%;
}

/* Heart button */
.ms-fav-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.88);
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.22);
    transition: background 0.15s, transform 0.12s;
    z-index: 10;
}

.ms-fav-btn:hover {
    background: rgba(255,255,255,1);
    transform: scale(1.08);
}

/* Heart icon - grey by default */
.ms-fav-icon path {
    fill: #ccc;
    stroke: #999;
    stroke-width: 1;
    transition: fill 0.15s, stroke 0.15s;
}

/* Filled red heart when active (product is a favourite) */
.ms-fav-btn.ms-fav--active .ms-fav-icon path {
    fill: #e03;
    stroke: #c00;
}

.ms-fav-btn:hover .ms-fav-icon path {
    stroke: #c00;
}

/* Price-watch badge: gold pound-sign disc overlapping bottom-right of the heart */
.ms-fav-pw-badge {
    position: absolute;
    bottom: -3px;
    right: -3px;
    background: #c8a000;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.35);
    pointer-events: none;
    border: 2px solid #fff;
}