/* Shared "add to favorites" (wishlist) heart for product cards across the storefront.
   Emitted by MarocDataStore.Helpers.WishlistHeart.Render(...) as
       <a class="mv-fav-heart" href="~/account/saveditems/add?id={bvin}">…heart svg…</a>
   and reused by the category listings (single-product-grid / single-product-list) and the
   product content blocks (ProductSlider, ProductSliderShorty, SelectProductGrid).

   Look matches the ProductTabsSlider reference heart: a small round white chip pinned to the
   top-right of the product image, OUTLINE by default and FILLED on hover. Colours come from the
   theme Site-Settings tokens (--site-*); the fallbacks only apply where no theme is present.

   The heart pins to the top-right of whatever box wraps the product image, so that box must be a
   positioning context. Each card layout's media box already is (mv-quickview-host, .product_image,
   .image, .mv-shorty-imglink, …); the rules below add position:relative as a safety net so the
   heart never escapes its card. */

.mv-fav-heart {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    border: 1px solid var(--site-border, #e0e0e0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    z-index: 3;
    box-sizing: border-box;
    text-decoration: none;
    padding: 0;
}

.mv-fav-heart svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--site-muted, #6b6b6b);
    stroke-width: 1.7;
    transition: stroke .15s ease, fill .15s ease;
}

.mv-fav-heart:hover svg {
    stroke: var(--site-button-bg, #e1251b);
    fill: var(--site-button-bg, #e1251b);
}

/* ProductSliderShorty mirrors the category grid card: heart pinned TOP-RIGHT, discount badge sits
   just BELOW it (see .mv-shorty-badge top:48px). */
.mv-shorty-card .mv-fav-heart {
    top: 8px;
    right: 8px;
}

/* Hardening: the theme forces high-specificity / !important rules on every <a> inside a product
   image (e.g. ".cell-product .image a{display:block!important;position:relative}") to make the photo
   click through. Those out-specify the bare ".mv-fav-heart" class and DESTROY its round chip — the
   heart loses its absolute pin + flex centering and drops into the card as a bare outline. Re-assert
   the chip with a higher-specificity, !important rule so it always renders as a round chip pinned to
   the TOP-RIGHT of the image (the manufacturer logo lives on the left). */
.cell-product .image a.mv-fav-heart,
.product_image a.mv-fav-heart,
.mv-quickview-host a.mv-fav-heart {
    position: absolute !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    line-height: 1 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .95) !important;
    border: 1px solid var(--site-border, #e0e0e0) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08) !important;
    z-index: 6 !important;
}

/* Bulletproof glyph centering: the theme forces the heart anchor to display:block on some cards,
   which defeats flex centering and drops the heart to the bottom of the chip. Absolutely center
   the SVG inside the chip (the chip is position:absolute = a positioning context) so it is dead
   center regardless of the anchor's display value. */
.cell-product .image a.mv-fav-heart svg,
.product_image a.mv-fav-heart svg,
.mv-quickview-host a.mv-fav-heart svg,
a.mv-fav-heart svg {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
}

/* Safety net: make sure the common product-image containers anchor the heart top-right.
   These all already exist as the media box of each card layout; position:relative is harmless
   where it is already set and prevents the heart from drifting to the page on layouts that
   forgot it. */
.product_image,
.cell-product .image,
.mv-quickview-host,
.mv-shorty-imglink,
.sf-cb-pslider .thumbnails li {
    position: relative;
}

/* "Already in favourites" state: when the signed-in customer already has the product in their
   wishlist, the heart renders filled (no duplicate add). Scoped like the chip hardening above so
   the filled glyph isn't out-specified by the theme's product-image anchor rules. */
.mv-fav-heart.is-saved svg,
.cell-product .image a.mv-fav-heart.is-saved svg,
.product_image a.mv-fav-heart.is-saved svg,
.mv-quickview-host a.mv-fav-heart.is-saved svg {
    stroke: var(--site-button-bg, #e1251b);
    fill: var(--site-button-bg, #e1251b);
}

/* Header favourites icon bounce when an item flies into it (wishlist-heart.js fly animation). */
.mv-fav-pop { animation: mvFavPop .45s ease; }
@keyframes mvFavPop { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }