/* Free-shipping messaging on the product page and cart (#2104). Markup: includes/functions/extra_functions/free_shipping_message.php
   A plain statement, B progress meter, C boxed promise. Colors come from the site's navy/amber, not Bootstrap defaults. */
.fsm {
    --fsm-navy: #3b4458;
    --fsm-amber: #ffa520;
    --fsm-amber-soft: #fff3d9;
    --fsm-ink: #1f2633;
    --fsm-muted: #5d6678;
    --fsm-track: #e3e6ec;
    --fsm-green: #1f7a4d;
    --fsm-green-soft: #e7f4ec;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 16px;
    color: var(--fsm-ink);
    line-height: 1.35;
}
.fsm__truck { flex: none; margin-top: 3px; color: var(--fsm-navy); }
.fsm__body { flex: 1; min-width: 0; }
.fsm__head { font-weight: 700; font-size: 1rem; }
.fsm__detail { margin-top: 2px; font-size: 0.8125rem; color: var(--fsm-muted); }

/* progress meter: the fill is the only moving part, and only when the page loads */
.fsm__meter { height: 6px; margin-top: 8px; border-radius: 3px; background: var(--fsm-track); overflow: hidden; }
.fsm__meter > span { display: block; height: 100%; border-radius: 3px; background: var(--fsm-navy); transition: width 500ms ease-out; }

/* C: boxed promise, above Add to Cart on the product page; wider and calmer on the cart */
.fsm--c { padding: 12px 14px; border: 2px solid var(--fsm-amber); border-radius: 6px; background: var(--fsm-amber-soft); }
.fsm--c .fsm__truck { color: var(--fsm-ink); }
.fsm--c .fsm__meter { background: #f3dfb4; }
.fsm--c .fsm__meter > span { background: var(--fsm-amber); }
.fsm--c.fsm--cart .fsm__head { font-size: 1.125rem; }

/* B: quieter; on the cart it sits as a neutral card */
.fsm--b.fsm--cart { padding: 12px 16px; border: 1px solid #d9dce3; border-radius: 6px; background: #f8f9fb; }

/* A: single line; on the cart a navy rule at the left */
.fsm--a.fsm--pdp .fsm__head { font-weight: 600; font-size: 0.9375rem; }
.fsm--a.fsm--cart { padding: 4px 0 4px 14px; border-left: 3px solid var(--fsm-navy); }

/* earned: green, every variant */
.fsm--earned .fsm__meter > span { background: var(--fsm-green); }
.fsm--c.fsm--earned { border-color: var(--fsm-green); background: var(--fsm-green-soft); }
.fsm--c.fsm--earned .fsm__head, .fsm--earned .fsm__truck { color: var(--fsm-green); }
.fsm--earned .fsm__head { color: var(--fsm-green); }

@media (max-width: 575.98px) {
    .fsm { margin-bottom: 12px; }
    .fsm--c { padding: 10px 12px; }
    .fsm__head { font-size: 0.9375rem; }
}
@media (prefers-reduced-motion: reduce) {
    .fsm__meter > span { transition: none; }
}