/* =========================================================
   Legebiksen - Fri Fragt Bar Pro 4.3.1

   Baren er en kort rejse i 12 px hoejde. Alt liv skal komme
   fra de elementer der allerede er der, ikke fra nye lag.

   Vejen har stribet midterlinje. Foran bilen staar striberne
   stille; bag den streamer de forbi mens bilen rykker frem.
   Fysikken holdes aerlig: en parkeret bil paa en rullende vej
   ser forkert ud, ogsaa naar man ikke kan sige hvorfor.

   Groen hele vejen, i to trin: den friskere groenne mens kurven
   bygges, betalingsknappens dybe groenne ved ankomst. Samme farve,
   stoerre vaegt.

   Belobet bruger IKKE den lyse groenne. Den giver 3.4:1 paa hvid,
   og tallet er sat i 17 px, hvilket WCAG regner som normal tekst
   med krav om 4.5:1. Derfor staar tallet i den dybe groenne
   hele vejen igennem.

   Gaven for enden laaner farve i takt med fremdriften, saa den
   modnes i stedet for at ligge graa og se i stykker ud.

   Liv kommer fra karakter, ikke fra maengden af bevaegelse.
   Bilen har en foerer i forruden, motoren tikker synligt, og
   den reagerer naar kunden roerer baren. Til gengaeld er det
   uafbrudte lysstroeg og tomgangsvuggen fjernet: flere ting
   der roerer sig samtidig giver travlhed, ikke liv.

   Timingen er usynkron med vilje. 2600, 4600 og 5100 ms gaar
   ikke op i hinanden, saa de aldrig falder i takt.

   Efter ankomst skifter baren til transport: bilen holder i
   billedet og vejen ruller under den. Fri fragt er ikke en
   maalstreg, det er starten paa en forsendelse. Hjulets
   omdrejning paa 2835 ms er regnet ud fra vejens hastighed,
   ikke gaettet, saa hjul og vej ikke skrider fra hinanden.

   Al lobende bevaegelse koerer kun naar baren faktisk er i
   viewporten. JS saetter lffb-is-visible. Paa mobil er et
   evigt repaint i en kurv man ikke kan se en reel udgift.
   ========================================================= */

/* Registreret, saa gavens farve kan glide. En aendring i en
   uregistreret custom property udloeser ingen transition paa de
   egenskaber der afhaenger af den, saa color-mix hoppede foer.
   Uden @property virker vaerdien stadig, den hopper bare. */
@property --lffb-ripen {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 0%;
}

.lffb-wrap {
    --lffb-track: #e4efe8;
    --lffb-start: #2f9d5b;
    --lffb-done: #0f7a3d;
    --lffb-text: #26323f;
    --lffb-amount: #0f7a3d;
    --lffb-muted: #c2d3c8;
    --lffb-lane: #7ea38e;
    --lffb-percent: 0;
    --lffb-ripen: 0%;
    --lffb-height: 12px;
    --lffb-van-width: 54px;
    --lffb-goal-size: 28px;
    --lffb-travel: 780ms;
    --lffb-goal-beat: 2200ms;
    --lffb-tile: 18px;

    box-sizing: border-box;
    margin: 0 0 22px;
    padding: 0;
    color: var(--lffb-text);
}

.lffb-wrap.lffb-empty {
    display: none;
}

.lffb-wrap * {
    box-sizing: border-box;
}

/* Belobet er hovedpersonen i saetningen, ikke ordene omkring det. */
.lffb-message {
    margin: 0 0 11px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--lffb-text);
    transition: color 320ms ease;
}

/* Bevidst --lffb-amount og ikke --lffb-start. Se noten oeverst. */
.lffb-amount {
    font-size: 17px;
    font-weight: 800;
    color: var(--lffb-amount);
    transition: color 320ms ease;
}

/* Belobet er WooCommerces egen prismarkup, saa temaets regler for
   .woocommerce-Price-amount ville ellers overtage stoerrelse og farve. */
.lffb-amount .woocommerce-Price-amount,
.lffb-amount .woocommerce-Price-currencySymbol,
.lffb-amount bdi {
    font-size: inherit;
    font-weight: inherit;
    font-style: inherit;
    color: inherit;
    text-decoration: none;
    background: none;
}

.lffb-wrap.lffb-is-complete .lffb-message {
    color: var(--lffb-done);
    font-weight: 700;
}

.lffb-lane {
    display: flex;
    align-items: center;
    gap: 11px;
}

.lffb-track {
    position: relative;
    flex: 1 1 auto;
    height: var(--lffb-height);
    border-radius: calc(var(--lffb-height) / 2);
    background: var(--lffb-track);
    /* Bilen er hoejere end vejen og maa ikke klippes. */
    overflow: visible;
}

/* ---------- Vejen forude ---------- */

/* Ingen opacity paa indpakningen. Den blev ganget sammen med en
   i forvejen lys stribefarve, og resultatet gav 1.39:1 mod sporet,
   mod 2.13:1 for striberne bag bilen. Vejen saa derfor ud til at
   holde op praecis ved bilen. --lffb-lane er nu valgt saa de to
   lag har samme vaegt. */
.lffb-road-ahead {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
}

.lffb-road-ahead::after {
    content: "";
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
    width: 200%;
    height: 2px;
    background: repeating-linear-gradient(
        90deg,
        var(--lffb-lane) 0,
        var(--lffb-lane) 8px,
        transparent 8px,
        transparent var(--lffb-tile)
    );
}

/* ---------- Vejen der er koert ---------- */

.lffb-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: calc(var(--lffb-percent) * 1%);
    border-radius: calc(var(--lffb-height) / 2);
    background: var(--lffb-start);
    overflow: hidden;
    transition:
        width var(--lffb-travel) cubic-bezier(0.24, 0.72, 0.26, 1),
        background-color 520ms ease;
}

.lffb-wrap.lffb-is-complete .lffb-fill {
    background: var(--lffb-done);
}

/* Lys forkant, saa fronten laeses som bilens kolvand. Den er ogsaa
   det der holder fronten synlig naar bar og bil har samme farve. */
.lffb-wrap:not(.lffb-is-complete) .lffb-fill::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.86);
}

/* Striberne bag bilen. En tile er 18 px, saa -18 px looper roent. */
.lffb-fill-road {
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
    width: 200%;
    /* En smal udfyldning giver en smal 200%, som ellers kunne slippe
       op naar laget forskydes en hel tile. */
    min-width: 140px;
    height: 2px;
    background: repeating-linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.58) 0,
        rgba(255, 255, 255, 0.58) 8px,
        transparent 8px,
        transparent var(--lffb-tile)
    );
    pointer-events: none;
}

/* Begge stribelag faar praecis samme animation. Koerte kun det ene,
   opstod der et faseskift ved udfyldningens kant. */
.lffb-wrap.lffb-is-moving .lffb-fill-road,
.lffb-wrap.lffb-is-moving .lffb-road-ahead::after {
    animation: lffb-road-stream 620ms linear infinite;
}

/* Lysstroeget. Det ene der maa koere uafbrudt: det er den
   konvention kunder i forvejen laeser som "der sker noget". */
.lffb-fill-sweep {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

.lffb-fill-sweep::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 38%;
    min-width: 26px;
    transform: translateX(-140%);
    background: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.44) 50%,
        rgba(255, 255, 255, 0) 100%
    );
}

/* Fyrer en gang efter et ryk frem. Tidligere koerte den i ring,
   og det var mere stoej end liv. */
.lffb-wrap.lffb-is-moving .lffb-fill-sweep::after {
    animation: lffb-sweep 900ms cubic-bezier(0.35, 0, 0.35, 1) both;
}

.lffb-wrap.lffb-is-complete .lffb-fill-sweep::after {
    animation: none;
    opacity: 0;
}

/* ---------- Destinationen ---------- */

.lffb-goal {
    flex: 0 0 var(--lffb-goal-size);
    width: var(--lffb-goal-size);
    height: var(--lffb-goal-size);
    color: var(--lffb-muted);
    transform-origin: 50% 85%;
    transition:
        --lffb-ripen var(--lffb-travel) cubic-bezier(0.24, 0.72, 0.26, 1),
        color 460ms ease;
}

/* Gaven modnes: knap tonet tidligt, naesten fuld farve til sidst.
   --lffb-ripen og ikke --lffb-percent, fordi den foerste er
   registreret ovenfor og derfor kan interpoleres. */
@supports (color: color-mix(in srgb, red, blue)) {
    .lffb-goal {
        color: color-mix(in srgb, var(--lffb-start) var(--lffb-ripen), var(--lffb-muted));
    }
}

.lffb-goal svg {
    display: block;
    width: 100%;
    height: 100%;
}

.lffb-goal-lid,
.lffb-goal-bow {
    transform-box: fill-box;
    transform-origin: 50% 100%;
}

.lffb-wrap.lffb-is-complete .lffb-goal {
    color: var(--lffb-done);
}

/* Et kort ryk, som om der er noget levende i den. */
.lffb-wrap.lffb-is-visible:not(.lffb-is-complete) .lffb-goal {
    animation: lffb-goal-wait 4600ms ease-in-out infinite;
}

.lffb-wrap.lffb-is-visible.lffb-is-near .lffb-goal {
    animation-duration: 2300ms;
}

.lffb-wrap.lffb-is-unlocking .lffb-goal {
    animation: lffb-goal-arrive 620ms cubic-bezier(0.22, 0.9, 0.26, 1.32) 620ms both;
}

/* ---------- Varebilen ---------- */

.lffb-van {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: var(--lffb-van-width);

    /* Bilen holdes inden for sporet i begge ender.
       Tidligere sad den paa left: <procent>% med translateX(-58%),
       hvilket lagde den 31 px uden for venstre kant ved 0 procent
       og 23 px uden for hoejre ved 100. Sporet har overflow: visible
       for ikke at klippe bilen lodret, saa der var intet der skjulte
       det, og tom kurv er en helt almindelig tilstand.

       Midterled: bilens centrum paa udfyldningens forkant.
       Yderled: parkeret praecis ved start og slut. */
    left: clamp(
        0px,
        calc(var(--lffb-percent) * 1% - var(--lffb-van-width) / 2),
        calc(100% - var(--lffb-van-width))
    );

    /* Hjulcentrum ligger 75.8% nede i tegningen. Faktoren holder
       bilen paa vejen uanset hvilken bredde den faar. */
    margin-top: calc(var(--lffb-van-width) * -0.3133);
    color: var(--lffb-start);
    transition:
        left var(--lffb-travel) cubic-bezier(0.24, 0.72, 0.26, 1),
        color 520ms ease;
}

.lffb-wrap.lffb-is-complete .lffb-van {
    color: var(--lffb-done);
}

.lffb-van-inner {
    position: relative;
    display: block;
}

.lffb-van svg {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 3px 5px rgba(15, 35, 62, 0.18));
}

.lffb-wheel {
    transform-box: fill-box;
    transform-origin: center;
}

/* Motoren tikker. Et synligt ryk, ikke en usynlig sinusbolge:
   stille det meste af tiden, saa et kort saet. */
.lffb-wrap.lffb-is-visible:not(.lffb-is-near):not(.lffb-is-complete) .lffb-van-inner {
    animation: lffb-engine 2600ms linear infinite;
}

/* Taet paa maalet bliver den utaalmodig. */
.lffb-wrap.lffb-is-visible.lffb-is-near .lffb-van-inner {
    animation: lffb-impatient 1800ms ease-in-out infinite;
}

/* Bilen maerker kunden. Den ene ting der gor mest for at den
   foles levende, og den koster ingenting. */
.lffb-wrap.lffb-is-poked .lffb-van-inner,
.lffb-wrap.lffb-is-visible.lffb-is-poked .lffb-van-inner {
    animation: lffb-poke 640ms cubic-bezier(0.25, 0.9, 0.3, 1.32) both;
}

.lffb-wrap.lffb-is-poked .lffb-wheel {
    animation: lffb-wheel-nudge 640ms cubic-bezier(0.3, 0.9, 0.3, 1) both;
}

/* ---------- Foereren ---------- */

.lffb-driver {
    transform-box: fill-box;
    transform-origin: 50% 90%;
    transition: transform 420ms cubic-bezier(0.3, 0.8, 0.35, 1);
}

/* Kigger frem mod gaven med jaevne mellemrum. */
.lffb-wrap.lffb-is-visible:not(.lffb-is-near):not(.lffb-is-complete) .lffb-driver {
    animation: lffb-glance 5100ms ease-in-out infinite;
}

/* Taet paa laener han sig fremad og bliver der. */
.lffb-wrap.lffb-is-near .lffb-driver {
    transform: translate(1.6px, -0.6px);
}

.lffb-wrap.lffb-is-unlocking .lffb-driver {
    animation: lffb-driver-cheer 640ms cubic-bezier(0.25, 0.9, 0.3, 1.3) 620ms both;
}

/* Naesen loefter sig i starten, dykker ved bremsning, og
   affjedringen giver to svingninger foer den staar stille. */
.lffb-wrap.lffb-is-moving .lffb-van-inner,
.lffb-wrap.lffb-is-visible.lffb-is-moving .lffb-van-inner,
.lffb-wrap.lffb-is-visible.lffb-is-near.lffb-is-moving .lffb-van-inner {
    animation: lffb-launch var(--lffb-travel) cubic-bezier(0.3, 0.7, 0.3, 1) both;
}

.lffb-wrap.lffb-is-moving .lffb-wheel {
    animation: lffb-wheel-spin 340ms linear infinite;
}

/* Fartstriber bag bilen, kun mens den koerer. */
.lffb-trail {
    position: absolute;
    top: 46%;
    right: 92%;
    display: block;
    width: 26px;
    height: 10px;
    opacity: 0;
    pointer-events: none;
}

.lffb-trail span {
    position: absolute;
    right: 0;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    opacity: 0.55;
}

.lffb-trail span:nth-child(1) { top: 0; width: 13px; }
.lffb-trail span:nth-child(2) { top: 4px; width: 20px; }
.lffb-trail span:nth-child(3) { top: 8px; width: 9px; }

.lffb-wrap.lffb-is-moving .lffb-trail {
    animation: lffb-trail-flash var(--lffb-travel) ease-out both;
}

.lffb-wrap.lffb-is-moving .lffb-trail span:nth-child(2) {
    animation: lffb-trail-stretch var(--lffb-travel) ease-out both;
}

.lffb-wrap.lffb-is-unlocking .lffb-message {
    animation: lffb-message-swap 620ms cubic-bezier(0.25, 0.85, 0.3, 1) 480ms both;
}

/* Fejringen kan slaas fra uden at resten aendrer sig. */
.lffb-wrap[data-lffb-celebration="none"].lffb-is-unlocking .lffb-goal {
    animation: none;
}

/* ---------- Efter ankomst: transport ----------
   Bilen holder position, vejen ruller under den. :not-erne holder
   ankomsten og selve rykket frem uforstyrret, saa kun en regel
   rammer ad gangen i stedet for en specificitetskamp. */

.lffb-wrap.lffb-is-visible.lffb-is-complete[data-lffb-cruise="1"]:not(.lffb-is-unlocking):not(.lffb-is-moving) .lffb-fill-road,
.lffb-wrap.lffb-is-visible.lffb-is-complete[data-lffb-cruise="1"]:not(.lffb-is-unlocking):not(.lffb-is-moving) .lffb-road-ahead::after {
    animation: lffb-road-stream 2400ms linear infinite;
}

/* 2835 ms er regnet ud fra vejens 7.5 px/s og hjulets omkreds.
   Samme tal i mini-kurven, fordi stribe og bil skalerer ens. */
.lffb-wrap.lffb-is-visible.lffb-is-complete[data-lffb-cruise="1"]:not(.lffb-is-unlocking):not(.lffb-is-moving) .lffb-wheel {
    animation: lffb-wheel-spin 2835ms linear infinite;
}

.lffb-wrap.lffb-is-visible.lffb-is-complete[data-lffb-cruise="1"]:not(.lffb-is-unlocking):not(.lffb-is-moving) .lffb-van-inner {
    animation: lffb-cruise 2100ms ease-in-out infinite;
}

/* Foereren holder oeje med vejen i stedet for at fryse. */
.lffb-wrap.lffb-is-visible.lffb-is-complete:not(.lffb-is-unlocking) .lffb-driver {
    animation: lffb-glance 5100ms ease-in-out infinite;
}

/* Gaven er hjemme, og det er den livligste tilstand i baren.
   Belonningen skal ikke vaere roligere end vejen dertil.

   En gestus med forskudte dele: kassen hopper med squash, laaget
   letter et oejeblik efter, sloejfen slaeber bagefter. Samme takt,
   forskellige faser. Foer 4.3.0 stod her en skalering paa 4,5%,
   altsaa 1,26 px over 3,8 sekunder, hvilket ingen kunne se. */
.lffb-wrap.lffb-is-visible.lffb-is-complete:not(.lffb-is-unlocking) .lffb-goal {
    animation: lffb-goal-hop var(--lffb-goal-beat) cubic-bezier(0.3, 0.7, 0.35, 1) infinite;
}

.lffb-wrap.lffb-is-visible.lffb-is-complete:not(.lffb-is-unlocking) .lffb-goal-lid {
    animation: lffb-goal-lid var(--lffb-goal-beat) cubic-bezier(0.25, 0.8, 0.3, 1.2) infinite;
}

.lffb-wrap.lffb-is-visible.lffb-is-complete:not(.lffb-is-unlocking) .lffb-goal-bow {
    animation: lffb-goal-bow var(--lffb-goal-beat) cubic-bezier(0.25, 0.85, 0.3, 1.25) infinite;
}

/* ---------- Keyframes ---------- */

@keyframes lffb-road-stream {
    to {
        transform: translateX(calc(var(--lffb-tile) * -1));
    }
}

/* Intet keyframe maa saette left paa .lffb-van: klemningen ovenfor
   er det ene sted bilens vandrette position bestemmes. */

@keyframes lffb-sweep {
    0% {
        transform: translateX(-140%);
    }
    62%, 100% {
        transform: translateX(400%);
    }
}

@keyframes lffb-engine {
    0%, 88%, 100% { transform: translateY(0) rotate(0deg); }
    90% { transform: translateY(-0.8px) rotate(-0.5deg); }
    92% { transform: translateY(0.6px) rotate(0.4deg); }
    95% { transform: translateY(-0.3px) rotate(0deg); }
    98% { transform: translateY(0) rotate(0deg); }
}

@keyframes lffb-impatient {
    0%, 54%, 100% { transform: translateY(0) rotate(0deg); }
    64% { transform: translateY(-0.8px) rotate(-1.8deg); }
    74% { transform: translateY(0) rotate(1.5deg); }
    84% { transform: translateY(-0.3px) rotate(-0.9deg); }
    93% { transform: translateY(0) rotate(0.3deg); }
}

@keyframes lffb-poke {
    0% { transform: translateY(0) scale(1, 1); }
    22% { transform: translateY(-4px) scale(0.96, 1.06); }
    52% { transform: translateY(0) scale(1.06, 0.94); }
    74% { transform: translateY(-1.3px) scale(1, 1); }
    88% { transform: translateY(0) scale(1.01, 0.99); }
    100% { transform: translateY(0) scale(1, 1); }
}

@keyframes lffb-wheel-nudge {
    to { transform: rotate(155deg); }
}

@keyframes lffb-glance {
    0%, 72%, 100% { transform: translate(0, 0); }
    79% { transform: translate(1.5px, -0.6px); }
    88% { transform: translate(1.3px, -0.4px); }
    95% { transform: translate(0, 0); }
}

@keyframes lffb-driver-cheer {
    0% { transform: translate(0, 0); }
    34% { transform: translate(0.4px, -2.4px); }
    62% { transform: translate(0, 0.4px); }
    100% { transform: translate(0, 0); }
}

@keyframes lffb-launch {
    0% { transform: translateY(0) rotate(0deg); }
    12% { transform: translateY(-1.4px) rotate(-2.8deg); }
    56% { transform: translateY(0) rotate(-1deg); }
    74% { transform: translateY(0.8px) rotate(2.2deg); }
    85% { transform: translateY(-0.5px) rotate(-1.1deg); }
    93% { transform: translateY(0.3px) rotate(0.5deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

@keyframes lffb-wheel-spin {
    to { transform: rotate(360deg); }
}

@keyframes lffb-cruise {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    22% { transform: translateY(-0.7px) rotate(-0.35deg); }
    48% { transform: translateY(0.4px) rotate(0.3deg); }
    74% { transform: translateY(-0.4px) rotate(-0.2deg); }
}

/* Hoppet er det baerende: 3 px paa et 28 px ikon, altsaa 11 procent.
   Laag og sloejfe er sekundaer tekstur, under en px hver, men de
   forskudte faser er det der gor gestussen levende. */
@keyframes lffb-goal-hop {
    0%, 56%, 100% { transform: translateY(0) scale(1, 1); }
    63% { transform: translateY(0.6px) scale(1.1, 0.9); }
    73% { transform: translateY(-3px) scale(0.94, 1.08); }
    83% { transform: translateY(0) scale(1.09, 0.92); }
    91% { transform: translateY(-0.9px) scale(0.99, 1.01); }
    96% { transform: translateY(0) scale(1.01, 0.99); }
}

@keyframes lffb-goal-lid {
    0%, 60%, 100% { transform: translateY(0) rotate(0deg); }
    72% { transform: translateY(-4px) rotate(-4deg); }
    84% { transform: translateY(0.8px) rotate(2deg); }
    93% { transform: translateY(0) rotate(-0.6deg); }
}

@keyframes lffb-goal-bow {
    0%, 62%, 100% { transform: rotate(0deg) scale(1); }
    76% { transform: rotate(-12deg) scale(1.1); }
    87% { transform: rotate(6deg) scale(1.02); }
    95% { transform: rotate(-2deg) scale(1); }
}

@keyframes lffb-trail-flash {
    0% { opacity: 0; }
    18% { opacity: 1; }
    72% { opacity: 0.7; }
    100% { opacity: 0; }
}

@keyframes lffb-trail-stretch {
    0% { width: 6px; }
    30% { width: 24px; }
    100% { width: 10px; }
}

@keyframes lffb-goal-wait {
    0%, 70%, 100% { transform: rotate(0deg) scale(1); }
    76% { transform: rotate(-5deg) scale(1.04); }
    83% { transform: rotate(4deg) scale(1.02); }
    90% { transform: rotate(-2deg) scale(1); }
    96% { transform: rotate(0.8deg) scale(1); }
}

@keyframes lffb-goal-arrive {
    0% { transform: scale(0.82) rotate(-6deg); }
    46% { transform: scale(1.16) rotate(3deg); }
    72% { transform: scale(0.97) rotate(-1deg); }
    100% { transform: scale(1) rotate(0deg); }
}

@keyframes lffb-message-swap {
    0% { opacity: 0; transform: translateY(7px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Mini-kurven har mindre plads end kurvsiden. */
.widget_shopping_cart .lffb-wrap,
.wc-block-mini-cart .lffb-wrap {
    --lffb-height: 10px;
    --lffb-van-width: 42px;
    --lffb-goal-size: 22px;
    --lffb-tile: 14px;
    margin-bottom: 16px;
}

.widget_shopping_cart .lffb-message,
.wc-block-mini-cart .lffb-message {
    font-size: 14px;
}

.widget_shopping_cart .lffb-amount,
.wc-block-mini-cart .lffb-amount {
    font-size: 15px;
}

@media (prefers-reduced-motion: reduce) {
    .lffb-fill,
    .lffb-van,
    .lffb-goal,
    .lffb-message,
    .lffb-amount {
        transition-duration: 1ms !important;
    }

    .lffb-wrap *,
    .lffb-wrap *::before,
    .lffb-wrap *::after {
        animation: none !important;
    }

    .lffb-trail {
        display: none;
    }

    .lffb-fill-sweep {
        display: none;
    }
}

/* Luni Sales Pro integration: this component only replaces the free-shipping
   status inside the Luni mini-cart drawer. */
.luni-epa__cartdrawer .luni-epa__cartdrawerpanel .luni-epa__cartdrawerinner .luni-epa__cartfree.lspcc-lffb {
    --lffb-height: 10px;
    --lffb-van-width: 42px;
    --lffb-goal-size: 22px;
    --lffb-tile: 14px;

    display: block !important;
    flex: 0 0 auto !important;
    align-items: initial !important;
    gap: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: none !important;
    margin: 12px 16px 2px !important;
    padding: 13px 15px 14px !important;
    overflow: visible !important;
    border: 1px solid rgba(15, 122, 61, 0.13) !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 7px 20px rgba(15, 35, 62, 0.06) !important;
}

.luni-epa__cartdrawer .lspcc-lffb .lffb-message {
    margin: 0 0 11px !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

.luni-epa__cartdrawer .lspcc-lffb .lffb-amount {
    font-size: 15px !important;
}

.luni-epa__cartdrawer .lspcc-lffb .lffb-lane {
    width: 100%;
    min-width: 0;
}

.luni-epa__cartdrawer .lspcc-lffb .lffb-track {
    min-width: 0;
}

@media (max-width: 480px) {
    .luni-epa__cartdrawer .luni-epa__cartdrawerpanel .luni-epa__cartdrawerinner .luni-epa__cartfree.lspcc-lffb {
        --lffb-van-width: 39px;
        --lffb-goal-size: 21px;
        margin: 10px 12px 2px !important;
        padding: 12px 13px 13px !important;
    }

    .luni-epa__cartdrawer .lspcc-lffb .lffb-lane {
        gap: 9px;
    }

    .luni-epa__cartdrawer .lspcc-lffb .lffb-message {
        font-size: 13.5px !important;
    }
}