.wh-fsb {
  --wh-fsb-bar: var(--wh-color-primary, var(--bs-primary, #0049ff));
  --wh-fsb-bg: #eaf0ff;
  box-sizing: border-box;
  width: 100%;
  margin: var(--wh-space-sm, 0.75rem) 0;
  background: var(--wh-fsb-bg);
  border-radius: var(--wh-radius, var(--bs-border-radius, 0.375rem));
}

.wh-fsb * {
  box-sizing: border-box;
}

.wh-fsb__text {
  padding: var(--wh-space-xs, 0.5rem) 0;
  margin: 0;
  font-family: var(--wh-font-base, var(--bs-body-font-family, inherit));
  font-size: var(--wh-font-size-sm, 0.875rem);
  line-height: 1.3;
  color: var(
    --wh-fsb-text,
    var(--wh-color-text, var(--bs-body-color, #212529))
  );
}

.wh-fsb__track {
  position: relative;
  width: 100%;
  height: 0.5rem;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  overflow: hidden;
}

.wh-fsb__fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--wh-fsb-bar);
  border-radius: 999px;
  transition: width var(--wh-fsb-anim, 1.2s) ease;
}

/* Prog osiagniety — pelny pasek. */
.wh-fsb--reached .wh-fsb__fill {
  width: 100% !important;
}

/* Wariant topbar (hook displayTop) — kompaktowy, bez marginesow. */
.wh-fsb--topbar {
  margin: 0;
  border-radius: 0;
  text-align: center;
}

/* Wariant w rozwijanym koszyku (.blockcart .body) — mniejszy tekst. */
.wh-fsb--dropdown {
  margin: 0 0 0.75rem;
}

.wh-fsb--dropdown .wh-fsb__text {
  font-size: var(--wh-font-size-xs, 0.75rem);
}

/* Wariant pasek przy krawedzi (hook displayBanner) — pelna szerokosc, bez zaokraglen. */
.wh-fsb--page_top {
  margin: 0;
  border-radius: 0;
  text-align: center;
}

/* Wrapper page_top: <div class="container wh-fsb-container"> — trzyma pasek w
   szerokosci motywu (Bootstrap .container: max-width + margin auto). */
.wh-fsb-container {
  width: 100%;
}

/* Fixed: pinowany jest WRAPPER (.container), nie sam pasek — dzieki temu pasek
   zostaje wysrodkowany do szerokosci kontenera zamiast rozciagac sie na caly
   ekran. inset left/right 0 + max-width + margin auto => wysrodkowanie. */
.wh-fsb-container--fixed {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1030;
}

/* Kompensacja wysokosci przyklejonego paska gornego, by nie zaslonil tresci.
   Klase i zmienna --wh-fsb-fixed-h ustawia wh-freeshippingbar.js (applyFixedOffset). */
body.wh-fsb-has-fixed-top {
  padding-top: var(--wh-fsb-fixed-h, 0px);
}

/* page_top jest renderowany serwerowo w .header-banner (wewnatrz sticky #header),
   a JS przenosi go na poczatek <body> i nadaje .wh-fsb--placed. Ukryj do czasu
   przeniesienia, by nie mignal w headerze. UWAGA: bez JS pasek page_top sie nie pokaze. */
.wh-fsb--page_top:not(.wh-fsb--placed) {
  display: none;
}

.wh-fsb__inner {
  display: flex;
  flex-direction: column;
}

.wh-fsb--text-below .wh-fsb__text {
  order: 1;
  margin: 0.5rem 0 0;
}