.wh-fsb {
  /* Domyslne kolory paska = TOKENY BRANDU. Admin moze je nadpisac w konfiguracji
     — wtedy szablon wstrzykuje --wh-fsb-* inline (bar.tpl). Pole puste w adminie
     = pasek idzie za brandem sklepu. */
  --wh-fsb-bar: var(--wh-color-primary, var(--bs-primary, #0049ff));
  --wh-fsb-bg: var(--wh-color-bg-subtle, #eaf0ff);
  box-sizing: border-box;
  width: 100%;
  margin: var(--wh-space-sm, 0.75rem) 0;
  /* --wh-radius NIE istnieje w tokenach (sa --wh-radius-xs/sm/md/lg/pill). */
  border-radius: var(--wh-radius-sm, 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;
  /* Tokeny nazywaja sie --wh-font-body / --wh-font-size-small
     (--wh-font-base i --wh-font-size-sm NIE istnieja -> dzialal tylko fallback). */
  font-family: var(--wh-font-body, var(--bs-body-font-family, inherit));
  font-size: var(--wh-font-size-small, 0.875rem);
  line-height: 1.3;
  color: var(
    --wh-fsb-text,
    var(--wh-color-text-primary, var(--bs-body-color, #212529))
  );
}

.wh-fsb__track {
  position: relative;
  width: 100%;
  height: 0.5rem;
  /* Tor paska = przyciemnione tlo sekcji, nie stala czern. `color-mix` z przezroczystoscia
     odtwarza rgba(0,0,0,.08) co do piksela na domyslnej palecie, ale idzie za brandem:
     na ciemnej branzy tor nie robi sie niewidzialna plama. */
  background: color-mix(in srgb, var(--wh-color-text-primary, #000) 8%, transparent);
  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;
}

/* ===== Tryb placeholder (cache-friendly) =====
   Pasek renderowany z hooka NIE zawiera danych koszyka (sa per-user i zepsulyby
   full-page cache). Do czasu hydracji AJAX-em chowamy zawartosc przez
   `visibility: hidden` — element zachowuje wysokosc, wiec nie ma skoku layoutu (CLS).
   JS (updateBar) zdejmuje klase `wh-fsb--loading` po otrzymaniu danych.
   Bez JS pasek zostaje pusty — swiadomy kompromis: lepsze to niz pokazanie
   wszystkim kwoty pierwszego odwiedzajacego, zamrozonej w cache. */
.wh-fsb--loading .wh-fsb__inner {
  visibility: hidden;
}