/* FIT-Z hearts - "♥ & worn by 54"
   Change the look with these variables (globally or per place). */

:root {
    --fitz-heart-fill: #E9FF98;          /* loved */
    --fitz-heart-fill-opacity: 0.5;      /* 1 = solid, 0.5 = half */
    --fitz-heart-stroke: #3A3A3A;        /* outline on light backgrounds */
    --fitz-heart-stroke-dark: #F4F4F4;   /* outline on dark backgrounds / photos */
    --fitz-heart-stroke-width: 0.5px;      /* keep 1px or more so it stays sharp */

    --fitz-heart-pdp-size: 20px;
    --fitz-heart-card-size: 22px;
    --fitz-heart-card-top: 10px;
    --fitz-heart-card-left: 10px;
}

.fitz-heart {
    display: block;
    flex: 0 0 auto;
    overflow: visible;
}

.fitz-heart path {
    fill: none;
    stroke: var(--fitz-heart-stroke);
    stroke-width: var(--fitz-heart-stroke-width);
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke; /* 1.5px at any size */
    transition: stroke .2s ease;
}

.fitz-hearts.is-loved .fitz-heart path {
    fill: var(--fitz-heart-fill);
    fill-opacity: var(--fitz-heart-fill-opacity, 1);
}

.fitz-hearts.is-on-dark .fitz-heart path {
    stroke: var(--fitz-heart-stroke-dark);
}

/* ---------- Product page: heart + text after the price ---------- */

.fitz-hearts--pdp {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 14px;
    font-size: 15px;
    line-height: 1.3;
}

.fitz-hearts--pdp .fitz-heart {
    width: var(--fitz-heart-pdp-size);
    height: var(--fitz-heart-pdp-size);
}

.fitz-hearts--pdp.is-on-dark .fitz-hearts__text {
    color: var(--fitz-heart-stroke-dark);
}

/* ---------- Cards / carousel: heart only, top-left of the image ---------- */

.fitz-hearts--card {
    position: absolute;
    top: var(--fitz-heart-card-top);
    left: var(--fitz-heart-card-left);
    z-index: 3;
    display: block;
    line-height: 0;
    pointer-events: none; /* display only - taps go to the product link */
}

.fitz-hearts--card .fitz-heart {
    width: var(--fitz-heart-card-size);
    height: var(--fitz-heart-card-size);
}

@media (max-width: 767px) {
    :root {
        --fitz-heart-card-size: 20px;
        --fitz-heart-card-top: 8px;
        --fitz-heart-card-left: 8px;
    }
}