/**
 * Legend Eagle — Product card "Add to cart" icon.
 * Restyles the default Flatsome `.add-to-cart-grid` (+) button inside
 * `.product-small` cards to match the Flash Sale plugin's `.fs-card-cart-btn`
 * (red circle + shopping cart SVG, hover scale, loading/added states).
 */

html body .product-small .add-to-cart-grid,
html body .product-small .price-wrapper .add-to-cart-grid {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 36px;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 50% !important;
    background: #e53935 !important;
    color: #fff !important;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(229, 57, 53, 0.25);
    border: 0 !important;
    padding: 0 !important;
    margin: 0 0 0 auto !important;
    vertical-align: middle;
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
    cursor: pointer;
}

html body .product-small .add-to-cart-grid:hover,
html body .product-small .price-wrapper .add-to-cart-grid:hover {
    background: #c62828 !important;
    color: #fff !important;
    transform: scale(1.06);
}

html body .product-small .add-to-cart-grid.loading {
    opacity: 0.6;
    pointer-events: none;
}

html body .product-small .add-to-cart-grid.loading::after {
    display: none !important;
}

html body .product-small .add-to-cart-grid.added {
    background: #2e7d32 !important;
    box-shadow: 0 2px 6px rgba(46, 125, 50, 0.3);
}

/* Replace default "+" mark with shopping-cart SVG (same icon as Flash Sale) */
html body .product-small .add-to-cart-grid .cart-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #fff;
    line-height: 1;
}

html body .product-small .add-to-cart-grid .cart-icon strong {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") no-repeat center / contain !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px;
    overflow: hidden;
    background-color: transparent !important;
}

html body .product-small .add-to-cart-grid .cart-icon strong::after {
    display: none !important;
}

@media only screen and (max-width: 549px) {
html body .product-small .add-to-cart-grid {
        flex: 0 0 32px;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
    }
    html body .product-small .add-to-cart-grid .cart-icon,
    html body .product-small .add-to-cart-grid .cart-icon strong {
        width: 15px !important;
        height: 15px !important;
    }
}

/* ============================================================
 * Flash Sale / home card wishlist (.fs-card-wishlist) — match
 * shop-page wishlist look (40px light-gray circle + soft heart),
 * with red hover/active. Overrides flash-sale.css.
 * ============================================================ */
html body .fs-product-card .fs-card-wishlist,
html body .fs-card-wishlist {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: #f3f4f6 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s !important;
}

html body .fs-card-wishlist:hover {
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    transform: scale(1.05) !important;
}

.fs-card-wishlist .yith-add-to-wishlist-button-block {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    line-height: 1;
    width: 100%;
    height: 100%;
}

.fs-card-wishlist .yith-wcwl-add-to-wishlist-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: #9ca3af !important;       /* soft gray heart, same as shop */
    text-decoration: none !important;
    cursor: pointer;
    transition: color 0.15s !important;
}

.fs-card-wishlist:hover .yith-wcwl-add-to-wishlist-button,
.fs-card-wishlist .yith-wcwl-add-to-wishlist-button:hover,
.fs-card-wishlist .yith-wcwl-add-to-wishlist-button--added {
    color: #e53935 !important;       /* red on hover/added */
}

/* HOVER (not added): outline-only red heart — no fill. */
.fs-card-wishlist:hover .yith-wcwl-icon-svg,
.fs-card-wishlist:hover svg {
    fill: none !important;
    stroke: #e53935 !important;
}

/* ADDED state: filled red heart so user sees it persists. */
.fs-card-wishlist .yith-wcwl-add-to-wishlist-button--added .yith-wcwl-icon,
.fs-card-wishlist .yith-wcwl-add-to-wishlist-button--added svg {
    fill: #e53935 !important;
    stroke: #e53935 !important;
}

.fs-card-wishlist .yith-wcwl-add-to-wishlist-button__label,
.fs-card-wishlist .yith-wcwl-add-to-wishlist-button__tooltip {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.fs-card-wishlist .yith-wcwl-add-to-wishlist-button-icon,
.fs-card-wishlist .yith-wcwl-icon-svg,
.fs-card-wishlist svg {
    width: 18px !important;
    height: 18px !important;
    font-size: 18px !important;
    margin: 0 !important;
    display: block !important;
    stroke-width: 1.8 !important;
    /* Force outline-only heart in default state to match mockup
       (YITH ships a filled heart SVG with default black stroke). */
    fill: none !important;
    stroke: #9ca3af !important;
}

/* Hover/added overrides above defaults — needs higher specificity than
   the rule above because both target svg directly.
   HOVER = red outline only (fill:none). ADDED = filled red. */
html body .fs-card-wishlist:hover .yith-wcwl-icon-svg,
html body .fs-card-wishlist:hover svg {
    fill: none !important;
    stroke: #e53935 !important;
}
html body .fs-card-wishlist .yith-wcwl-add-to-wishlist-button--added .yith-wcwl-icon-svg,
html body .fs-card-wishlist .yith-wcwl-add-to-wishlist-button--added svg {
    fill: #e53935 !important;
    stroke: #e53935 !important;
}

/* Loading spinner on any wishlist button while AJAX in flight. */
.yith-wcwl-add-to-wishlist-button--loading {
    pointer-events: none;
    opacity: 0.6;
}
.yith-wcwl-add-to-wishlist-button--loading svg {
    animation: le-wishlist-spin 0.8s linear infinite;
    transform-origin: center;
}
@keyframes le-wishlist-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
 * Unified UXBuilder (Flatsome) product card wishlist styling —
 * match the Flash Sale card wishlist (white circle + heart SVG).
 * Overrides Flatsome's default outline button look inside .image-tools.
 * ============================================================ */
html body .product-small .image-tools .wishlist-icon {
    margin: 0 !important;
    /* Flatsome's .image-tools.show-on-hover applies pointer-events:none so the
     * whole strip doesn't block product-link clicks. We want the wishlist to
     * always be clickable regardless of hover state. */
    pointer-events: auto !important;
}

html body .product-small .image-tools .wishlist-icon .wishlist-button {
    pointer-events: auto !important;
}

/* Keep the whole .image-tools strip inert EXCEPT the wishlist (inheritance). */
/* html body .product-small .image-tools.show-on-hover {
    pointer-events: none;
} */

html body .product-small .image-tools .wishlist-icon .wishlist-button {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #f3f4f6 !important;            /* light gray as mockup */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    color: #9ca3af !important;                 /* soft gray heart */
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.15s, background 0.15s, color 0.15s !important;
}

html body .product-small .image-tools .wishlist-icon .wishlist-button:hover {
    background: #ffffff !important;
    transform: scale(1.05) !important;
    color: #e53935 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

html body .product-small .image-tools .wishlist-icon .wishlist-button.wishlist-added,
html body .product-small .image-tools .wishlist-icon .wishlist-button[aria-pressed="true"] {
    color: #e53935 !important;
    background: #ffffff !important;
}

html body .product-small .image-tools .wishlist-icon .wishlist-button i.icon-heart {
    font-size: 18px !important;
    line-height: 1 !important;
}

/* Fade in on image hover — keep existing show-on-hover behavior but match Flash Sale position. */
/* html body .product-small .image-tools.show-on-hover {
    top: 8px !important;
    right: 8px !important;
}
 */
/* Hide YITH block output hidden behind Flatsome's popup wrapper (Flatsome shows its own visible button). */
.product-small .wishlist-popup .yith-wcwl-add-to-wishlist-button__label,
.product-small .wishlist-popup .yith-wcwl-add-to-wishlist-button__tooltip {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ============================================================
 * Vietnamese wishlist toast notification.
 * ============================================================ */
.le-wishlist-toast {
    position: fixed;
    left: 50%;
    bottom: 32px;
    transform: translate(-50%, 20px);
    z-index: 99999;
    min-width: 220px;
    max-width: 90vw;
    padding: 12px 20px;
    border-radius: 999px;
    background: rgba(33, 33, 33, 0.95);
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.le-wishlist-toast--visible {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

.le-wishlist-toast[data-type="success"] {
    background: rgba(46, 125, 50, 0.95);
}

.le-wishlist-toast[data-type="error"] {
    background: rgba(198, 40, 40, 0.95);
}

.le-wishlist-toast[data-type="info"] {
    background: rgba(33, 33, 33, 0.95);
}

/* ============================================================
 * Quick View ("Xem nhanh") pill button — matches legendeagle.com/shop
 * reference. Overrides Flatsome's default link rendering to a centered
 * white pill with eye icon + text, revealed on card hover.
 * ============================================================ */
html body .product-small .box-image {
    position: relative;
    overflow: hidden;
}

/* The anchor Flatsome outputs: <a class="quick-view">Xem nhanh</a>.
 * It normally lives inside .image-tools (top-right strip). We pull it out
 * visually and re-center it with absolute positioning. */
html body .product-small .box-image .quick-view {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(0.92) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 11px 22px !important;
    min-width: 150px !important;
    max-width: 85% !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #111827 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-transform: none !important;
    letter-spacing: 0.2px !important;
    text-decoration: none !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 4 !important;
    transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease, color 0.2s ease !important;
    cursor: pointer !important;
}

/* Prepend an eye SVG icon via ::before. */
html body .product-small .box-image .quick-view::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") no-repeat center / contain;
    flex: 0 0 18px;
    transition: filter 0.2s ease;
}

/* Reveal on product card hover. */
html body .product-small:hover .box-image .quick-view,
html body .product-small.has-hover:hover .box-image .quick-view,
html body .product-small .box-image:hover .quick-view,
html body .product-small .box-image:focus-within .quick-view {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
    pointer-events: auto !important;
}

/* Hover state on the pill itself — invert to black pill + white text/icon. */
html body .product-small .box-image .quick-view:hover,
html body .product-small .box-image .quick-view:focus-visible {
    background: #111827 !important;
    color: #ffffff !important;
    transform: translate(-50%, -50%) scale(1.04) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28) !important;
    outline: none !important;
}

html body .product-small .box-image .quick-view:hover::before,
html body .product-small .box-image .quick-view:focus-visible::before {
    /* Swap stroke from near-black to white by replacing the data-URI stroke color. */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

/* Active press. */
html body .product-small .box-image .quick-view:active {
    transform: translate(-50%, -50%) scale(0.98) !important;
}

/* If Flatsome left .quick-view inside .image-tools (top-right hover strip),
 * ensure any inherited inline positioning from .image-tools doesn't override
 * the center placement. */
html body .product-small .image-tools .quick-view {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    margin: 0 !important;
}

/* Mobile — hide Quick View entirely on touch devices.
   Rationale: tapping the product card already opens the product page,
   so the Quick View pill is redundant and visually clutters the grid. */
@media (max-width: 549px) {
    html body .product-small .box-image .quick-view {
        display: none !important;
    }
	ins span.amount bdi {
    font-size: 21px;
}
}

/* ============================================================
 * FIX UX: Sync visible Flatsome `.wishlist-button` with YITH
 * `--added` state. YITH renders the real anchor inside a hidden
 * `.wishlist-popup` (opacity:0), so on page reload the visible
 * button stayed gray even though YITH knew the product was in
 * the wishlist. Use `:has()` to color the visible heart red
 * whenever the wrapper contains a YITH anchor with `--added`.
 * Also covers `.fs-card-wishlist` and any other wrapper using
 * the same dual-element pattern.
 * ============================================================ */
html body .wishlist-icon:has(.yith-wcwl-add-to-wishlist-button--added) .wishlist-button,
html body .wishlist-icon:has(.yith-wcwl-add-to-wishlist-button--added) .wishlist-button:hover,
html body .product-small .image-tools .wishlist-icon:has(.yith-wcwl-add-to-wishlist-button--added) .wishlist-button {
    color: #e53935 !important;
    background: #ffffff !important;
    border-color: transparent !important;
}

html body .wishlist-icon:has(.yith-wcwl-add-to-wishlist-button--added) .wishlist-button .icon-heart,
html body .product-small .image-tools .wishlist-icon:has(.yith-wcwl-add-to-wishlist-button--added) .wishlist-button i.icon-heart {
    color: #e53935 !important;
}

/* Ensure consistency: any wrapper that contains an --added YITH anchor
   should display its visible icon as red. Covers Flash Sale + custom skins. */
html body .yith-add-to-wishlist-button-block:has(.yith-wcwl-add-to-wishlist-button--added) ~ .wishlist-button,
html body .wishlist-icon:has(.yith-wcwl-add-to-wishlist-button--added) > .wishlist-button {
    color: #e53935 !important;
}

/* Defensive fallback: if Flatsome JS toggles `wishlist-added` on the visible
   button (older Flatsome versions), respect that as well. */
html body .wishlist-icon .wishlist-button.wishlist-added,
html body .wishlist-icon .wishlist-button.wishlist-added .icon-heart {
    color: #e53935 !important;
}

/* ============================================================
 * Size Guide link relocated into the variation TH by
 * size-guide-position.js. Lay out: label on the left,
 * "Hướng dẫn chọn size" link on the right of the same row.
 * ============================================================ */
.variations th.label.le-th-with-size-guide {
    display: flex !important;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.variations th.label.le-th-with-size-guide .sgp-link {
    margin-left: auto;
    font-size: 13px;
    font-weight: 400;
    color: #3b82f6;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    line-height: 1;
    white-space: nowrap;
}

.variations th.label.le-th-with-size-guide .sgp-link:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.variations th.label.le-th-with-size-guide .sgp-link svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ============================================================
 * Generic YITH wishlist hover/added behavior — applies anywhere
 * the YITH SVG is the visible element (shop page, product page,
 * widget, etc.). Mirrors the .fs-card-wishlist rules above.
 *
 * HOVER  = red outline only (no fill) so user sees a hint of
 *          intent without committing to the "added" look.
 * ADDED  = filled red so the persistence is obvious after reload.
 * ============================================================ */
html body a.yith-wcwl-add-to-wishlist-button:hover .yith-wcwl-icon-svg,
html body a.yith-wcwl-add-to-wishlist-button:hover svg {
    fill: none !important;
    stroke: #e53935 !important;
}

html body a.yith-wcwl-add-to-wishlist-button--added .yith-wcwl-icon-svg,
html body a.yith-wcwl-add-to-wishlist-button--added svg {
    fill: #e53935 !important;
    stroke: #e53935 !important;
}

/* ============================================================
 * Replace Flatsome icon font `.icon-heart` (a FILLED heart
 * character) with a Lucide-style outline heart drawn via CSS
 * mask. Color follows `currentColor` so the existing hover/
 * added rules just work:
 *   default → gray outline
 *   :hover  → red outline (matches legendeagle.com mockup)
 *   --added → red filled
 *
 * Mask SVGs (encoded inline):
 *   - outline-mask : path with stroke only (outline-only mask)
 *   - filled-mask  : path with fill (solid-heart mask, used in
 *                    the `--added` state)
 * ============================================================ */
html body .wishlist-icon .wishlist-button i.icon-heart {
    /* Kill the Flatsome icon font character. */
    font-size: 0 !important;
    line-height: 0 !important;
    width: 20px !important;
    height: 20px !important;
    display: inline-block !important;
    /* Color of the mask = currentColor (set by .wishlist-button rules). */
    background-color: currentColor !important;
    /* Outline heart mask. */
    -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7Z'/%3E%3C/svg%3E") center / 20px 20px no-repeat !important;
            mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7Z'/%3E%3C/svg%3E") center / 20px 20px no-repeat !important;
}

/* Cancel the Flatsome icon font ::before character if present. */
html body .wishlist-icon .wishlist-button i.icon-heart::before {
    content: '' !important;
    display: none !important;
}

/* Added state → switch mask to filled heart so the icon LOOKS solid. */
html body .wishlist-icon:has(.yith-wcwl-add-to-wishlist-button--added) .wishlist-button i.icon-heart {
    -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7Z'/%3E%3C/svg%3E") center / 20px 20px no-repeat !important;
            mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7Z'/%3E%3C/svg%3E") center / 20px 20px no-repeat !important;
}


/* ============================================================
 * Explicit color propagation to .icon-heart so currentColor on
 * the mask is guaranteed to follow hover/added state, matching
 * legendeagle.com mockup color (#DC143C crimson).
 * ============================================================ */
html body .product-small .image-tools .wishlist-icon .wishlist-button:hover {
    color: #DC143C !important;
    background: #ffffff !important;
}

html body .product-small .image-tools .wishlist-icon .wishlist-button:hover i.icon-heart,
html body .wishlist-icon:has(.yith-wcwl-add-to-wishlist-button--added) .wishlist-button i.icon-heart {
    color: #DC143C !important;
    background-color: #DC143C !important;
}

/* ============================================================
 * HIDE Flatsome's `.wishlist-popup` (dark tooltip that appears
 * BELOW the wishlist heart on hover). We have our own custom
 * wishlist toast notification, the popup is redundant noise.
 * ============================================================ */
html body .wishlist-popup,
html body .product-small .wishlist-popup {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ============================================================
 * UNIFY Flash Sale `.fs-card-wishlist` icon with the Flatsome
 * card wishlist look. The YITH SVG inside Flash Sale uses a
 * slightly different path (smaller, different proportions);
 * we hide it and overlay the same Lucide-style outline heart
 * mask used elsewhere, so all wishlist hearts on the site
 * render identically.
 * ============================================================ */

/* Kill the original YITH SVG inside Flash Sale wrapper. */
html body .fs-card-wishlist .yith-wcwl-icon-svg,
html body .fs-card-wishlist svg.yith-wcwl-icon {
    display: none !important;
}

/* Make the YITH anchor a proper flex container the SAME size
   as the Flatsome wishlist-button (40px circle), so the mask
   pseudo-element below sits in the middle. */
html body .fs-card-wishlist .yith-wcwl-add-to-wishlist-button {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #9ca3af !important;  /* default gray */
    transition: color 0.15s !important;
}

/* Add the Lucide-style outline heart via :before, sized 20x20. */
html body .fs-card-wishlist .yith-wcwl-add-to-wishlist-button::before {
    content: '' !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    background-color: currentColor !important;
    -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7Z'/%3E%3C/svg%3E") center / 20px 20px no-repeat !important;
            mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7Z'/%3E%3C/svg%3E") center / 20px 20px no-repeat !important;
}

/* Hover: switch wrapper bg to white + color crimson + scale, like Flatsome. */
html body .fs-card-wishlist:hover {
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    transform: scale(1.05) !important;
}
html body .fs-card-wishlist:hover .yith-wcwl-add-to-wishlist-button,
html body .fs-card-wishlist .yith-wcwl-add-to-wishlist-button:hover {
    color: #DC143C !important;
}

/* Added state: filled red heart (same as Flatsome cards). */
html body .fs-card-wishlist .yith-wcwl-add-to-wishlist-button--added {
    color: #DC143C !important;
}
html body .fs-card-wishlist .yith-wcwl-add-to-wishlist-button--added::before {
    -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7Z'/%3E%3C/svg%3E") center / 20px 20px no-repeat !important;
            mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7Z'/%3E%3C/svg%3E") center / 20px 20px no-repeat !important;
}

/* ============================================================
 * FINE-TUNE: Icon size + perfect centering to match mockup.
 * Mockup ratio: 16/36 = 44%. Our btn is 40px → 18px icon.
 * Force display:block + flex container so the <i>/<a> baseline
 * doesn't push the heart up by ~1-2px.
 * ============================================================ */

/* Flatsome card wishlist — center the icon-heart pixel-perfect */
html body .product-small .image-tools .wishlist-icon .wishlist-button {
    line-height: 0 !important;
}

html body .wishlist-icon .wishlist-button i.icon-heart {
    width: 18px !important;
    height: 18px !important;
    -webkit-mask-size: 18px 18px !important;
            mask-size: 18px 18px !important;
    vertical-align: middle !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Flash Sale wrapper — same proportions */
html body .fs-card-wishlist .yith-wcwl-add-to-wishlist-button {
    line-height: 0 !important;
}

html body .fs-card-wishlist .yith-wcwl-add-to-wishlist-button::before {
    width: 18px !important;
    height: 18px !important;
    -webkit-mask-size: 18px 18px !important;
            mask-size: 18px 18px !important;
    vertical-align: middle !important;
}

/* ============================================================
 * Force block display on icon-heart so the inline baseline
 * doesn't offset the heart upward (-1.5px we saw on the rect).
 * Flex parent + block child = pixel-perfect centering.
 * ============================================================ */
html body .wishlist-icon .wishlist-button i.icon-heart {
    display: block !important;
}

html body .fs-card-wishlist .yith-wcwl-add-to-wishlist-button::before {
    display: block !important;
}

/* ============================================================
 * The button markup is `<button> <i.icon-heart></i> </button>`
 * with whitespace text nodes around the <i>. In a flex layout
 * those text nodes count as flex items and shift the icon by
 * the line-height of the parent's font-size. Setting font-size
 * to 0 on the button collapses them. The icon-heart re-sets
 * its own width/height so its mask is unaffected.
 * ============================================================ */
html body .product-small .image-tools .wishlist-icon .wishlist-button {
    font-size: 0 !important;
}

/* Same for Flash Sale wrapper (anchor has whitespace + the SVG/before). */
html body .fs-card-wishlist .yith-wcwl-add-to-wishlist-button {
    font-size: 0 !important;
}

/* ============================================================
 * PIXEL-PERFECT centering: 40px wrapper - 18px icon = 22px
 * gap (odd), which flexbox rounds asymmetrically (10+12 instead
 * of 11+11). Use absolute positioning with transform: translate
 * so the icon center sits exactly on the wrapper center.
 * ============================================================ */
html body .product-small .image-tools .wishlist-icon .wishlist-button {
    position: relative !important;
}
html body .product-small .image-tools .wishlist-icon .wishlist-button i.icon-heart {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

html body .fs-card-wishlist .yith-wcwl-add-to-wishlist-button {
    position: relative !important;
}
html body .fs-card-wishlist .yith-wcwl-add-to-wishlist-button::before {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* ============================================================
 * INCREASE distance of wishlist icon from card corner.
 * Mockup (legendeagle.com) uses top-3 right-3 (~12px). We use
 * 14px for slightly more breathing room, so the icon doesn't
 * feel cramped against the product image corner.
 * ============================================================ */
html body .product-small .box-image .image-tools.is-small.top.right,
html body .product-small .box-image .image-tools {
    padding: 14px 14px 0 0 !important;
}

/* Flash Sale section — match the same corner distance. */
html body .fs-product-card .fs-card-wishlist {
    top: 14px !important;
    right: 14px !important;
}

/* ============================================================
 * Single product page (chi tiết sản phẩm) uses `.product-images`
 * (WooCommerce gallery) instead of `.product-small`. Broaden
 * the centering rules so they apply to ANY `.wishlist-icon`
 * context — product cards, gallery, widgets, etc.
 * ============================================================ */
html body .wishlist-icon .wishlist-button {
    position: relative !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

html body .wishlist-icon .wishlist-button i.icon-heart {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* ============================================================
 * Make wishlist-button always 40x40 with the same circle look
 * regardless of context. Previously the size/bg rules were
 * scoped to `.product-small` so on the single product page
 * the button collapsed to its intrinsic content size (which
 * is now ~4px because we set font-size:0 and the heart is
 * absolutely positioned).
 * ============================================================ */
html body .wishlist-icon .wishlist-button {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #f3f4f6 !important;
    color: #9ca3af !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s !important;
}

html body .wishlist-icon .wishlist-button:hover {
    background: #ffffff !important;
    color: #DC143C !important;
    transform: scale(1.05) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}


/* ============================================================
 * Custom Product Tab tables — styling applies in BOTH places:
 *   (1) On product page: inside the "Bảng thông số" / "Tính
 *       năng nổi bật" tabs rendered by the plugin
 *       (wrapper: `.wb_cptb_content`).
 *   (2) In Popup Maker overlays after JS injects the tab via
 *       le_size_guide_popup_swap_js() (same `.wb_cptb_content`
 *       wrapper, additionally annotated with
 *       `.le-size-chart-from-tab`).
 * Selectors target `.wb_cptb_content table` so both contexts
 * pick up identical styling.
 * ============================================================ */
.wb_cptb_content {
    color: #2c2c2c;
    font-size: 14px;
    line-height: 1.5;
}

.wb_cptb_content table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    margin: 0 0 20px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    border: 1px solid #ececec;
}

.wb_cptb_content table th,
.wb_cptb_content table td {
    border-bottom: 1px solid #ececec;
    border-right: 1px solid #ececec;
    padding: 9px 10px;
    text-align: center;
    vertical-align: middle;
    background: #fff;
    color: #333;
    font-weight: 400;
    width: auto;
}

.wb_cptb_content table tr td:last-child,
.wb_cptb_content table tr th:last-child {
    border-right: 0;
}

.wb_cptb_content table tr:last-child td {
    border-bottom: 0;
}

/* Caption-style row (e.g. "Đvt: Inch") — single colspan cell on
 * the first row. Light + italic; NOT the header. */
.wb_cptb_content table tbody tr:first-child td[colspan]:only-child {
    background: #fafafa;
    text-align: left;
    text-transform: none;
    font-weight: 500;
    color: #555;
    font-style: italic;
    font-size: 13px;
    letter-spacing: 0;
}

/* Header row — dark, high-contrast.
 * Two cases handled with `:has()`:
 *   (a) Table has caption row first → header is row 2.
 *   (b) No caption row → header is row 1. */
.wb_cptb_content table thead tr td,
.wb_cptb_content table thead tr th,
.wb_cptb_content table tbody:has(> tr:first-child td[colspan]:only-child) > tr:nth-child(2) td,
.wb_cptb_content table tbody:not(:has(> tr:first-child td[colspan]:only-child)) > tr:first-child td {
    background: #111 !important;
    color: #fff !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.6px;
    border-color: #111;
}

/* Footnote row (e.g., "Lưu ý: Sai số …") — colspan but not first row. */
.wb_cptb_content table tbody tr:not(:first-child) td[colspan] {
    background: #fffaf0;
    text-align: left;
    font-style: italic;
    color: #6b5b1d;
    font-size: 12.5px;
}

.wb_cptb_content table tbody tr:nth-child(even) td:not([colspan]) {
    background: #fafbfc;
}

.wb_cptb_content table tbody tr:hover td:not([colspan]) {
    background: #f0f7ff;
}

/* Popup wrapper — extra polish only when inside Popup Maker
 * (drop bottom margin since the popup has its own padding). */
.pum .pum-content .wb_cptb_content table {
    margin-bottom: 0;
}

@media (max-width: 600px) {
    .wb_cptb_content {
        font-size: 12px;
    }
    .wb_cptb_content table th,
    .wb_cptb_content table td {
        padding: 6px 5px;
    }
}

/* ============================================================
 * Quick View modal — "Thêm vào giỏ hàng" + "Mua ngay" on the
 * SAME row. The quantity selector keeps its own row above at
 * its natural compact width.
 *
 * Pseudo `::after` is a flex line-break: it forces the two
 * buttons onto the next row without stretching the qty box.
 * ============================================================ */
.product-quick-view-container form.cart .woocommerce-variation-add-to-cart,
.product-quick-view-container form.cart.variations_form .woocommerce-variation-add-to-cart {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
}

.product-quick-view-container form.cart .woocommerce-variation-add-to-cart::after {
    content: "";
    flex: 0 0 100%;
    order: 1;
    height: 0;
    margin: 0;
}

.product-quick-view-container form.cart .woocommerce-variation-add-to-cart > .quantity {
    order: 0;
    flex: 0 0 auto;
    margin: 0;
}

.product-quick-view-container form.cart .woocommerce-variation-add-to-cart .single_add_to_cart_button,
.product-quick-view-container form.cart .woocommerce-variation-add-to-cart .buy_now_button {
    order: 2;
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
}

@media (max-width: 480px) {
    .product-quick-view-container form.cart .woocommerce-variation-add-to-cart {
        gap: 6px;
    }
    .product-quick-view-container form.cart .woocommerce-variation-add-to-cart .single_add_to_cart_button,
    .product-quick-view-container form.cart .woocommerce-variation-add-to-cart .buy_now_button {
        font-size: 12px;
        padding: 0 8px;
        white-space: nowrap;
    }
}