/* cs_freeshippingbar: functionele basis; het thema doet de echte styling.
   Variabelen: het thema zet --cs-fsb-* of de algemene --cs-* (bijv. --cs-fsb-fill: var(--llh-pink)); anders Bootstrap (--bs-*). */
.cs-fsb{display:flex;flex-direction:column;gap:4px;margin:10px 0 1rem;padding:var(--cs-fsb-padding,0);border-radius:var(--cs-radius,var(--bs-border-radius,10px));background:var(--cs-fsb-bg,transparent);color:var(--cs-ink,var(--bs-body-color,#212529));font-size:.875rem}
.cs-fsb[hidden]{display:none}
.cs-fsb--done{background:var(--cs-fsb-done-bg,var(--cs-fsb-bg,transparent))}
.cs-fsb__text{display:flex;align-items:center;gap:8px;margin:0}
.cs-fsb__icon{flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.cs-fsb__amount,.cs-fsb__threshold{font-variant-numeric:tabular-nums;white-space:nowrap}
.cs-fsb__track{height:8px;border-radius:8px;background:var(--cs-fsb-track,var(--cs-line,var(--bs-border-color,#DEE2E6)));overflow:hidden}
.cs-fsb__fill{height:100%;border-radius:8px;background:var(--cs-fsb-fill,var(--cs-accent,var(--bs-primary,#0D6EFD)));transition:width .3s}
.cs-fsb--done .cs-fsb__fill{background:var(--cs-fsb-done-fill,var(--cs-fsb-fill,var(--cs-accent,var(--bs-success,#198754))))}
@media (prefers-reduced-motion:reduce){.cs-fsb__fill{transition:none}}