/* PDP gallery wishlist heart (Figma: circular white badge, top-right of the main image).
   Reuses the PLP card's own .product-item-actions/.actions-secondary/.action.towishlist
   classes (Webkul_Marketplace::css/product-card.css, already loaded globally) for the
   circle/color/background styling itself.

   POSITIONING: js/gallery-wishlist-position.js measures the real rendered image box
   (`[data-gallery-role="gallery-placeholder"]`) and sets `.gallery-wishlist-actions` to
   `position: absolute` with explicit top/left/width/height matching it exactly -- see that
   file's docblock for why (two earlier CSS-only attempts both mispositioned it: one
   anchored to `.product.media`, whose own box turned out much narrower than the visible
   image; the other moved the badge into the gallery widget's own DOM and got its fill state
   wiped by the widget's internal re-render). Once `.gallery-wishlist-actions` is itself
   positioned, the already-global `.actions-secondary { position: absolute !important;
   top: 12px; right: 12px; }` rule (product-card.css) anchors correctly inside it with no
   extra CSS needed here.

   `.gallery-wishlist-actions` covers the full image box as an invisible overlay
   (`pointer-events: none` from the JS), so image interactions (zoom, swipe) underneath
   aren't blocked -- only the actual heart link needs clicks, restored below. */
.gallery-wishlist-actions .actions-secondary {
    pointer-events: auto;
}

/* Trial: pink border on the circle, PDP gallery heart only (scoped via the
   .gallery-wishlist-actions wrapper, unique to this template) -- the shared
   .actions-secondary > .action rule in product-card.css sets `border: 1px solid
   transparent` for every other heart on the site (PLP, home cards, wishlist page).
   Once confirmed here, this same declaration moves into that shared rule so it applies
   everywhere instead of just here. */
.gallery-wishlist-actions .actions-secondary > .action.towishlist {
    border-color: #e91e63;
}

/* The PLP card's own icon-font suppression / heart-fill / loading-state rules
   (Webkul_Marketplace::css/product-card.css) are all scoped under a `.product-item`
   ancestor, which this template's markup never has (it isn't a product-list card). Without
   these, Luma's default `.action.towishlist:before` icon-font glyph rendered underneath/
   alongside the SVG (the visual distortion seen in the mobile screenshot), and the SVG
   never got its intended size or its filled-heart state after adding. Duplicated here,
   scoped to .gallery-wishlist-actions instead of .product-item, rather than adding a
   `.product-item` class to this markup purely to borrow unrelated PLP-card CSS. */
.gallery-wishlist-actions .action.towishlist:before {
    content: none;
}

.gallery-wishlist-actions .action.towishlist .wishlist-heart-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Desktop size, confirmed correct as-is (user: "desktop was correct earlier") -- matches
   the Figma reference's bolder proportions vs the PLP card's own 35px/16px. !important:
   the stock Luma desktop rule this competes with (line-height:35px; width:35px) ties on
   specificity (4 classes each), so without it the winner would come down to source order
   alone -- exactly the kind of razor-thin, easy-to-accidentally-flip margin this project
   has been bitten by before. */
.gallery-wishlist-actions .actions-secondary > .action.towishlist {
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
}

/* Mobile-only override, sized and confirmed live in DevTools on a real device (icon 12px
   inside a 20px circle) -- the desktop 40px/20px-icon size was confirmed correct at
   desktop width but too big at mobile width. */
@media (max-width: 767px) {
    .gallery-wishlist-actions .action.towishlist .wishlist-heart-icon {
        width: 12px;
        height: 12px;
    }

    .gallery-wishlist-actions .actions-secondary > .action.towishlist {
        width: 20px !important;
        height: 20px !important;
        line-height: 20px !important;
    }
}

.gallery-wishlist-actions .action.towishlist.in-wishlist .wishlist-heart-icon {
    fill: currentColor;
}

.gallery-wishlist-actions .action.towishlist.wishlist-loading {
    opacity: 0.6;
    pointer-events: none;
}