/* Bono keeps favorite state and handlers; both masks use its original heart contours. */
body .product-favorite-btn::before,
body .shop-item__icons-favorite::before {
    content: "" !important;
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -.0625em;
    color: inherit;
    background-color: currentColor;
    -webkit-mask: url("favorite-heart-outline.svg") no-repeat center / contain;
    mask: url("favorite-heart-outline.svg") no-repeat center / contain;
}

body .product-favorite-btn.in-favorite,
body .shop-item__icons-favorite.in-favorite,
body.catalog-product-reference .catalog-product-actions .product-favorite-btn.in-favorite {
    background: #fff;
    color: #d92d20;
    border-color: #fecdca;
    -webkit-box-shadow: none;
    box-shadow: none;
}

body .product-favorite-btn.in-favorite::before,
body .shop-item__icons-favorite.in-favorite::before {
    color: inherit;
    -webkit-mask-image: url("favorite-heart-filled.svg");
    mask-image: url("favorite-heart-filled.svg");
}

body .product-favorite-btn.in-favorite:hover,
body .product-favorite-btn.in-favorite:focus-visible,
body .shop-item__icons-favorite.in-favorite:hover,
body .shop-item__icons-favorite.in-favorite:focus-visible,
body.catalog-product-reference .catalog-product-actions .product-favorite-btn.in-favorite:hover,
body.catalog-product-reference .catalog-product-actions .product-favorite-btn.in-favorite:focus-visible {
    background: #fff1f0;
    color: #b42318;
    border-color: #fda29b;
    -webkit-box-shadow: none;
    box-shadow: none;
}

body .product-favorite-btn.in-favorite:focus-visible,
body .shop-item__icons-favorite.in-favorite:focus-visible {
    outline: 2px solid #d92d20;
    outline-offset: 2px;
}

/* The count must not take part in the header's flex sizing. */
.header-cart__link.header-favorite {
    position: relative;
}
.header-cart__link.header-favorite > sup {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
}

/* Bono moves the same link into its mobile container for mobile user agents.
   Keep the untouched native link visible when a desktop window is narrowed. */
@media (max-width: 767px) {
    .site-header-inner > .header-favorite.header-favorite--vis {
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 44px;
        height: 44px;
        margin: .5rem auto 0;
        padding: 0;
    }
}
/* Keep the signed-in toolbar on one row so it cannot cover the site header. */
@media (min-width: 783px) and (max-width: 1200px) {
    body.admin-bar #wpadminbar #wp-admin-bar-my-account > .ab-item {
        font-size: 0;
    }
    body.admin-bar #wpadminbar #wp-admin-bar-my-account > .ab-item .display-name {
        display: none;
    }
}
