/* === Good Favorite Frontend v1.1.2 === */

/* ===== My Account menu — favorites tab heart icon ============== 
 * Astra Pro injects icons via <i>/<svg>/<span> children of the <a>.
 * Astra Child themes often add even more wrappers. This block uses
 * a "nuke everything that's not the link text" approach.
 *
 * Astra-specific known classes covered:
 *   .ast-icon, .ast-mobile-svg, .astra-svg-icon, .ast-customer-svg,
 *   .ast-account-tab-icon, .ast-mobile-menu-svg-icon
 * ============================================================ */

/* Nuke all known + unknown ICON child elements inside favorites link.
   We DO NOT touch <span> children — Astra Child themes wrap the menu
   label text in <span> and we'd accidentally hide "我的收藏" itself.
   Only target tags / classes that are clearly icons. */
li.woocommerce-MyAccount-navigation-link--favorites > a > i,
li.woocommerce-MyAccount-navigation-link--favorites > a > svg,
li.woocommerce-MyAccount-navigation-link--favorites > a > img,
li.woocommerce-MyAccount-navigation-link--favorites > a > [class*="icon"],
li.woocommerce-MyAccount-navigation-link--favorites > a > [class*="svg"],
li.woocommerce-MyAccount-navigation-link--favorites > a > [class*="dashicon"],
li.woocommerce-MyAccount-navigation-link--favorites > a > .ast-icon,
li.woocommerce-MyAccount-navigation-link--favorites > a > .menu-image,
li.woocommerce-MyAccount-navigation-link--favorites > a::after {
    display:none !important;
    visibility:hidden !important;
    width:0 !important;
    height:0 !important;
    margin:0 !important;
    padding:0 !important;
    background:none !important;
    content:none !important;
}

/* Inject our heart via ::before */
li.woocommerce-MyAccount-navigation-link--favorites > a::before {
    content:'' !important;
    display:inline-block !important;
    visibility:visible !important;
    width:1.1em !important;
    height:1.1em !important;
    margin-right:1em !important;             /* push "我的收藏" text ~3/5 char to the right */
    margin-left:-0.1em !important;
    vertical-align:-0.7em !important;          /* push heart further down */
    position:relative !important;
    top:5px !important;                          /* extra fine-tune downward */
    background-color:currentColor !important;
    -webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='currentColor'/%3E%3C/svg%3E") !important;
            mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='currentColor'/%3E%3C/svg%3E") !important;
    -webkit-mask-repeat:no-repeat !important;
            mask-repeat:no-repeat !important;
    -webkit-mask-position:center !important;
            mask-position:center !important;
    -webkit-mask-size:contain !important;
            mask-size:contain !important;
    background-image:none !important;
}
li.woocommerce-MyAccount-navigation-link--favorites.is-active > a::before,
li.woocommerce-MyAccount-navigation-link--favorites > a:hover::before {
    background-color:#F4A100 !important;
}

/* Ensure product li can host absolute-positioned heart */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
ul.products li.product{
    position:relative;
}

/* ===== Heart button (loop context) ===== */
.gf-favorite-btn{
    position:absolute;
    top:10px;
    right:10px;
    z-index:5;

    width:36px;
    height:36px;
    padding:0;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,0.92);
    box-shadow:0 1px 4px rgba(0,0,0,0.15);
    cursor:pointer;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    transition:transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    -webkit-tap-highlight-color:transparent;
}
.gf-favorite-btn svg{
    width:20px;
    height:20px;
    display:block;
    pointer-events:none;
}
.gf-favorite-btn:hover{
    transform:scale(1.08);
    box-shadow:0 2px 8px rgba(0,0,0,0.2);
    background:#fff;
}
.gf-favorite-btn:active{ transform:scale(0.95); }

/* Active state — fill heart */
.gf-favorite-btn.is-active svg path{
    fill:#F4A100;
    stroke:#F4A100;
}

/* Pop animation when toggled */
.gf-favorite-btn.is-popping{
    animation:gf-pop 0.35s ease;
}
@keyframes gf-pop{
    0%{ transform:scale(1); }
    40%{ transform:scale(1.25); }
    100%{ transform:scale(1); }
}

/* Loading state */
.gf-favorite-btn.is-loading{
    opacity:0.5;
    cursor:wait;
}

/* Hide label text in loop context */
.gf-favorite-btn .gf-label-text{ display:none; }

/* ===== Single product page — three placement variants ===== */

/* Common single-page styling: gf-context-single-* */
.gf-favorite-btn.gf-context-single-inline,
.gf-favorite-btn.gf-context-single-before,
.gf-favorite-btn.gf-context-single-after,
.gf-favorite-btn.gf-context-single  /* legacy v1.0.5 class */ {
    position:relative !important;
    top:auto !important;
    right:auto !important;
    left:auto !important;

    width:auto;
    height:auto;
    padding:10px 18px;
    border-radius:6px;
    background:#fff;
    border:1px solid #ddd;
    box-shadow:none;

    font-size:14px;
    line-height:1.2;
    color:#333;
    gap:8px;
    align-items:center;
    cursor:pointer;
    transition:border-color 0.2s, background 0.2s, color 0.2s;
}
.gf-favorite-btn.gf-context-single-inline svg,
.gf-favorite-btn.gf-context-single-before svg,
.gf-favorite-btn.gf-context-single-after svg,
.gf-favorite-btn.gf-context-single svg {
    width:18px;
    height:18px;
}
.gf-favorite-btn.gf-context-single-inline .gf-label-text,
.gf-favorite-btn.gf-context-single-before .gf-label-text,
.gf-favorite-btn.gf-context-single-after .gf-label-text,
.gf-favorite-btn.gf-context-single .gf-label-text {
    display:inline;
}
.gf-favorite-btn.gf-context-single-inline:hover,
.gf-favorite-btn.gf-context-single-before:hover,
.gf-favorite-btn.gf-context-single-after:hover,
.gf-favorite-btn.gf-context-single:hover {
    transform:none;
    border-color:#F4A100;
    background:#FFF8EC;
}
.gf-favorite-btn.gf-context-single-inline.is-active,
.gf-favorite-btn.gf-context-single-before.is-active,
.gf-favorite-btn.gf-context-single-after.is-active,
.gf-favorite-btn.gf-context-single.is-active {
    border-color:#F4A100;
    background:#FFF8EC;
    color:#D88E00;
}

/* "After the cart button" variant — block element, own line, top margin */
.gf-favorite-btn.gf-context-single-after,
.gf-favorite-btn.gf-context-single  /* legacy */ {
    display:flex;
    margin:14px 0;
}

/* "Before the cart button" — same as after but smaller bottom margin */
.gf-favorite-btn.gf-context-single-before {
    display:flex;
    margin:8px 0 14px;
}

/* "Inline with cart" — sits next to the WC add-to-cart submit button.
   Uses inline-flex so it lines up on the same row inside form.cart.
   We intentionally don't force vertical-align so themes that style
   .quantity / .single_add_to_cart_button can keep their layout.
   The form.cart is already display:flex in WC default; we just ride
   along with align-items:center via parent. */
.gf-favorite-btn.gf-context-single-inline {
    display:inline-flex;
    margin:0 0 0 8px;
    vertical-align:middle;
}
/* In themes that don't flex form.cart (Astra default does), give the
   form a flex layout so our heart sits to the right of the button. */
.woocommerce form.cart{
    flex-wrap:wrap;
    align-items:center;
}

/* ===== My Account context ===== */
.gf-favorites-page{ margin-top:10px; }

.gf-favorites-summary{
    margin-bottom:16px;
    color:#666;
    font-size:14px;
}

/* Force grid layout, override Astra's default ul.products width:100%/3-col */
.woocommerce-MyAccount-content .gf-favorites-list,
.gf-favorites-list{
    list-style:none !important;
    padding:0 !important;
    margin:0 !important;
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:24px !important;
    width:100% !important;
    max-width:100% !important;
    float:none !important;
}
.gf-favorites-list::before,
.gf-favorites-list::after{ content:none !important; display:none !important; }

@media (max-width:600px){
    .woocommerce-MyAccount-content .gf-favorites-list,
    .gf-favorites-list{
        grid-template-columns:1fr !important;
    }
}

/* Card. !important required to beat Astra's `ul.products li.product`
   width:30.79% / float:left rules. */
.woocommerce-MyAccount-content .gf-favorites-list .gf-favorite-item,
.gf-favorites-list .gf-favorite-item,
.gf-favorite-item{
    position:relative !important;
    background:#fff !important;
    border:1px solid #eee !important;
    border-radius:8px !important;
    padding:16px !important;
    margin:0 !important;
    width:auto !important;
    max-width:100% !important;
    float:none !important;
    box-shadow:0 1px 3px rgba(0,0,0,0.04);
    transition:box-shadow 0.2s, transform 0.2s;
    text-align:left !important;
    list-style:none !important;
}
.gf-favorite-item::before{ display:none !important; }
.gf-favorite-item:hover{
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
    transform:translateY(-2px);
}

/* Image wrapper — forces full-width display in card.
   Beats Astra's max-width:300px and similar inline rules.
   Also acts as positioning context for the centered heart overlay. */
.gf-favorite-item .gf-fav-link{
    display:block !important;
    text-decoration:none !important;
    color:inherit !important;
    margin-bottom:12px;
}
/* Square image wrap — uses padding-top:100% trick instead of
   aspect-ratio because some Astra Child overrides reset it.
   The trick: a block element with padding-top:100% gives a 1:1
   square based on its width. We then absolute-position the link +
   image to fill that square. */
.gf-favorite-item .gf-image-wrap{
    position:relative !important;
    display:block !important;
    width:100% !important;
    height:0 !important;
    padding-top:100% !important;          /* makes it square */
    margin:0 0 12px !important;
    overflow:hidden;
    border-radius:6px;
    background:#f8f8f8;
}
.gf-favorite-item .gf-image-link{
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    width:100% !important;
    height:100% !important;
    display:block !important;
    text-decoration:none !important;
}
.gf-favorite-item .gf-fav-link img,
.gf-favorite-item .gf-product-image,
.gf-favorite-item .gf-image-wrap img,
.gf-favorite-item .gf-image-link img,
.gf-favorite-item img.attachment-woocommerce_single,
.gf-favorite-item img.attachment-woocommerce_thumbnail,
.gf-favorite-item img.wp-post-image,
.gf-favorite-item img,
.woocommerce-MyAccount-content .gf-favorite-item img{
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:100% !important;
    max-height:100% !important;
    object-fit:cover !important;
    margin:0 !important;
    padding:0 !important;
    display:block !important;
    float:none !important;
    border-radius:0 !important;
}

.gf-favorite-item .woocommerce-loop-product__title{
    font-size:15px !important;
    font-weight:500 !important;
    margin:0 0 8px !important;
    padding:0 !important;
    line-height:1.4 !important;
    color:#222 !important;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    min-height:2.8em;
}

.gf-favorite-item .price{
    display:block !important;
    font-size:16px !important;
    font-weight:600 !important;
    color:#D88E00 !important;
    margin-bottom:10px !important;
}
.gf-favorite-item .price del,
.gf-favorite-item .price ins{
    display:inline;
    background:transparent !important;
}
.gf-favorite-item .price del{
    color:#999 !important;
    font-weight:400 !important;
    margin-right:6px;
}
.gf-favorite-item .price ins{
    text-decoration:none !important;
    color:#D88E00 !important;
}

/* Heart overlay — SMALL circular icon, TOP-LEFT corner of product image.
   Icon only, no text label. Click to remove from favorites. */
.gf-favorite-item .gf-favorite-btn.gf-context-myaccount{
    position:absolute !important;
    top:10px !important;
    left:10px !important;
    right:auto !important;
    bottom:auto !important;
    transform:none !important;
    width:36px !important;
    height:36px !important;
    padding:0 !important;
    margin:0 !important;
    border:none !important;
    border-radius:50%;
    background:rgba(255,255,255,0.95) !important;
    box-shadow:0 1px 4px rgba(0,0,0,0.15) !important;
    z-index:5;
    cursor:pointer;
    transition:transform 0.15s, box-shadow 0.15s, background 0.15s;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
}
.gf-favorite-item .gf-favorite-btn.gf-context-myaccount:hover{
    transform:scale(1.08) !important;
    box-shadow:0 2px 8px rgba(0,0,0,0.22) !important;
    background:#fff !important;
}
.gf-favorite-item .gf-favorite-btn.gf-context-myaccount svg{
    width:20px !important;
    height:20px !important;
    pointer-events:none;
}
.gf-favorite-item .gf-favorite-btn.gf-context-myaccount.is-active svg path{
    fill:#F4A100 !important;
    stroke:#F4A100 !important;
}
.gf-favorite-item .gf-favorite-btn.gf-context-myaccount .gf-label-text{
    display:none !important;
}

/* === BULLETPROOF MY-ACCOUNT FAVORITES IMAGE FILL ===
   Last-line-of-defense rules with maximal specificity to beat any
   theme override. The double-class + descendant chain bumps the
   specificity score above any single-class theme rules. */
.woocommerce-MyAccount-content ul.gf-favorites-list li.gf-favorite-item .gf-image-wrap,
ul.gf-favorites-list li.gf-favorite-item .gf-image-wrap{
    position:relative !important;
    display:block !important;
    width:100% !important;
    height:0 !important;
    padding-top:100% !important;
    margin:0 0 12px !important;
    overflow:hidden !important;
    border-radius:6px !important;
    background:#f8f8f8 !important;
}

.woocommerce-MyAccount-content ul.gf-favorites-list li.gf-favorite-item .gf-image-wrap a.gf-image-link,
ul.gf-favorites-list li.gf-favorite-item .gf-image-wrap a.gf-image-link{
    position:absolute !important;
    inset:0 !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100% !important;
    height:100% !important;
    display:block !important;
    text-decoration:none !important;
    z-index:1 !important;
}

.woocommerce-MyAccount-content ul.gf-favorites-list li.gf-favorite-item .gf-image-wrap img,
ul.gf-favorites-list li.gf-favorite-item .gf-image-wrap img{
    position:absolute !important;
    inset:0 !important;
    top:0 !important;
    left:0 !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:cover !important;
    margin:0 !important;
    padding:0 !important;
    display:block !important;
}

.woocommerce-MyAccount-content ul.gf-favorites-list li.gf-favorite-item .gf-image-wrap button.gf-favorite-btn,
ul.gf-favorites-list li.gf-favorite-item .gf-image-wrap button.gf-favorite-btn{
    position:absolute !important;
    top:10px !important;
    left:10px !important;
    right:auto !important;
    bottom:auto !important;
    z-index:10 !important;
}
.gf-fav-actions{
    margin:0 0 8px !important;
}
.gf-fav-actions .button,
.gf-fav-actions .added_to_cart,
.gf-fav-actions a.button{
    width:100% !important;
    text-align:center !important;
    box-sizing:border-box;
    margin:0 !important;
}

.gf-added-at{
    display:block !important;
    margin-top:6px !important;
    font-size:11px !important;
    color:#999 !important;
}

.gf-empty{
    text-align:center;
    padding:30px 20px;
    color:#888;
}

/* Toast / status message */
.gf-toast{
    position:fixed;
    bottom:30px;
    left:50%;
    transform:translateX(-50%) translateY(20px);
    background:#333;
    color:#fff;
    padding:10px 20px;
    border-radius:24px;
    font-size:14px;
    box-shadow:0 4px 16px rgba(0,0,0,0.25);
    opacity:0;
    transition:opacity 0.25s, transform 0.25s;
    z-index:99999;
    pointer-events:none;
}
.gf-toast.is-show{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}
.gf-toast-error{ background:#DC3232; }