/* BELARA SHOP STAGE3 REFINEMENT V17 */

/* The mobile catalogue already supplies its own heart artwork.  The older
   accessibility synchronizer intentionally clears the plugin's Unicode
   glyph, so desktop needs a deterministic non-emoji fallback. */
@media (min-width: 768px) {
    body.woocommerce-shop.belara2-site ul.products li.product > .belara2-wishlist-button,
    body.post-type-archive-product.belara2-site ul.products li.product > .belara2-wishlist-button {
        isolation: isolate !important;
        font-size: 0 !important;
        line-height: 1 !important;
    }

    body.woocommerce-shop.belara2-site ul.products li.product > .belara2-wishlist-button::before,
    body.post-type-archive-product.belara2-site ul.products li.product > .belara2-wishlist-button::before {
        content: "\2661" !important;
        display: block !important;
        color: #2a1210 !important;
        font-family: Arial, sans-serif !important;
        font-size: 32px !important;
        font-weight: 400 !important;
        line-height: 1 !important;
        transform: translateY(-1px) !important;
    }

    body.woocommerce-shop.belara2-site ul.products li.product > .belara2-wishlist-button.is-active::before,
    body.post-type-archive-product.belara2-site ul.products li.product > .belara2-wishlist-button.is-active::before {
        content: "\2665" !important;
        color: #a61e22 !important;
        font-size: 28px !important;
    }

    /* Keep the editorial badge consistent with its compact mobile treatment
       instead of allowing the product-link flex rule to stretch it edge to edge. */
    body.woocommerce-shop.belara2-site ul.products li.product > a.woocommerce-LoopProduct-link,
    body.post-type-archive-product.belara2-site ul.products li.product > a.woocommerce-LoopProduct-link {
        position: relative !important;
    }

    body.woocommerce-shop.belara2-site ul.products li.product .belara2-choice-label,
    body.post-type-archive-product.belara2-site ul.products li.product .belara2-choice-label {
        position: absolute !important;
        inset-block-start: 12px !important;
        inset-inline-end: 12px !important;
        z-index: 6 !important;
        width: max-content !important;
        max-width: calc(100% - 24px) !important;
        min-height: 30px !important;
        margin: 0 !important;
        padding: 6px 12px !important;
        border-radius: 999px !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
    }
}