/* Free Shipping Progress Bar
   Colours come from admin as --fsb-* custom properties on the container
   (style attribute); the fallbacks below are the defaults. */
.fsb{
    box-sizing:border-box;
    padding:14px 16px;
    font-size:14px;
    line-height:1.4;
    text-align:center;
}
.fsb *{box-sizing:border-box}

/* ── Message ── */
.fsb-msg{
    margin:0 0 11px;
    color:var(--fsb-text,#2b2b2b);
    font-weight:500;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:8px;
}
/* Single flex item wrapping the whole message — without it, every text run and
   inline tag (amount span, <b>, trailing "!") becomes its own flex item and the
   sentence fragments into separate boxes instead of wrapping as one line of text. */
.fsb-text{
    min-width:0;
}
.fsb-msg b{font-weight:800;color:inherit}
.fsb-amount{
    font-weight:800;
    white-space:nowrap;
    letter-spacing:.2px;
}

/* ── Progress track ── */
.fsb-track{
    position:relative;
    width:100%;
    height:11px;
    background:var(--fsb-track,#e9edf0);
    border-radius:20px;
    overflow:hidden;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.09);
}
.fsb-fill{
    position:absolute;
    top:0;left:0;height:100%;
    min-width:11px;
    border-radius:20px;
    /* Yellow→green scale anchored to the FULL track (0–100%), revealed up to --pct.
       --pct / --c1 / --c2 are set inline (admin-configurable colours). */
    background-image:linear-gradient(90deg, var(--c1,#f1c40f), var(--c2,#2ecc71));
    background-repeat:no-repeat;
    background-position:left center;
    background-size:calc(10000% / var(--pct,100)) 100%;
    transition:width .6s cubic-bezier(.22,1,.36,1), background-size .6s cubic-bezier(.22,1,.36,1);
}
/* top gloss — independent of the inline background color */
.fsb-fill::before{
    content:"";
    position:absolute;inset:0;
    border-radius:inherit;
    background:linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,0) 62%);
    pointer-events:none;
}
/* animated shimmer sweep */
.fsb-fill::after{
    content:"";
    position:absolute;top:0;bottom:0;left:0;width:60%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
    transform:translateX(-120%);
    animation:fsb-shimmer 2.4s ease-in-out infinite;
    pointer-events:none;
}
@keyframes fsb-shimmer{
    0%{transform:translateX(-120%)}
    60%,100%{transform:translateX(280%)}
}

/* ── Reached state ── */
.fsb-done .fsb-msg{color:var(--fsb-done-text,#1e7e34);font-weight:700}
.fsb-done .fsb-fill{ /* solid success colour once earned */
    background-image:linear-gradient(90deg, var(--c2,#2ecc71), var(--c2,#2ecc71));
}
.fsb-done .fsb-fill::after{animation:none} /* calm, no shimmer once earned */

/* ── Mini-cart context: own <li> at the top of the dropdown ── */
.cart-content .cart-free-shipping{
    list-style:none;
    padding:0;
    margin:0;
    border-bottom:1px solid var(--fsb-border,#eee);
    background:var(--fsb-bg,#fafbfc);
}
.cart-content .cart-free-shipping.fsb-done{
    border-bottom-color:var(--fsb-done-border,#bfe5c7);
    background:var(--fsb-done-bg,#eef9f0);
}
.cart-content .cart-free-shipping .fsb{padding:13px 15px}

/* ── Cart / checkout page card ── */
.fsb-block{
    background:var(--fsb-bg,#f7f9fb);
    border:1px solid var(--fsb-border,#e6e9ec);
    border-radius:12px;
    margin-bottom:20px;
    padding:16px 18px;
    box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.fsb-block.fsb-done{
    border-color:var(--fsb-done-border,#bfe5c7);
    background:var(--fsb-done-bg,#eef9f0);
}

/* NOTE: no prefers-color-scheme:dark rules — the journal3 storefront is always
   light-themed and does not follow the OS dark mode. Dark-mode overrides here
   would turn the text light-grey on a white card (invisible). */