/* ══════════════════════════════════════════════════════════════════════════
   Gemora UX - pasek etapów + drabinka progów nad koszykiem.

   Wartości wzięte z żywego sklepu (karta produktu), żeby komponent nie
   odstawał od reszty strony:
     kontener  - promień 10px, ramka 1px solid #e8dde2, białe tło
     przycisk  - promień 9px, tło #6b1a33
     krój      - Montserrat
   ══════════════════════════════════════════════════════════════════════════ */

.gux {
  --gux-brand: #6b1a33;
  --gux-akcent: var(--global-palette2, #9c1146);
  --gux-atrament: var(--global-palette3, #232323);
  --gux-przygaszony: #8b7b83;
  --gux-ramka: #e8dde2;
  --gux-szyna: #f1e6ea;
  --gux-zloto: #a9822a;
  --gux-tlo-strony: #fff;
  --gux-promien: 10px;

  display: none;
  margin: 0 0 26px;
  font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.gux[data-gux-stan="gotowy"] { display: block; }

/* Motyw dokleja marginesy i wcięcia do p/ol/ul/li w treści strony regułami
   typu `.entry-content p` - specyficzność (0,1,1) bije naszą pojedynczą klasę
   (0,1,0). Stąd selektory z nazwą elementu. Zmierzone na produkcji 20.08.2026:
   bez tego <p> komunikatu dostawał 32 px marginesu, a <ol> etapów 32 px wcięcia
   (kreska wystawała przed pierwszą etykietę). */
.gux p.gux-komunikat { margin: 0; }
.gux ol.gux-etapy,
.gux ul.gux-wezly { margin: 0; padding: 0; list-style: none; }
.gux li.gux-etap,
.gux li.gux-wezel { margin: 0; list-style: none; }
.gux li.gux-wezel { padding: 0; }
/* wcięcie boczne pozycji = to ono "przecina" kreskę łączącą etapy */
.gux li.gux-etap { padding: 0 14px; }
.gux ol.gux-etapy > li.gux-etap:first-child { padding-left: 0; }
.gux ol.gux-etapy > li.gux-etap:last-child  { padding-right: 0; }

/* ── pasek etapów ─────────────────────────────────────────────────────────
   Trzy etapy = trzy realne strony (koszyk, kasa, podziękowanie). Numer przed
   nazwą, w jednym rzędzie. Kreska biegnie środkiem rzędu, a przecina ją tło
   CAŁEJ pozycji - gdyby tło siedziało na samej nazwie, kreska wychodziłaby
   w przerwie między numerem a tekstem. */
.gux ol.gux-etapy {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 20px;
  padding: 0;
}
.gux ol.gux-etapy::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  transform: translateY(-50%);
  background: var(--gux-ramka);
}
.gux-etap {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  min-width: 0;
  background: var(--gux-tlo-strony);
}
.gux-etap-nazwa {
  font-size: 12.5px;
  line-height: 1.25;
  color: var(--gux-przygaszony);
  white-space: nowrap;
}

.gux-etap-kropka {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--gux-ramka);
  background: #fff;
  color: #a3919a;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.gux-etap--teraz .gux-etap-nazwa {
  color: var(--gux-atrament);
  font-weight: 600;
}
.gux-etap--teraz .gux-etap-kropka {
  border-color: var(--gux-brand);
  background: var(--gux-brand);
  color: #fff;
}

/* ── karta drabinki ───────────────────────────────────────────────────────
   Biała karta z ramką i promieniem 10px - identycznie jak "Przewidywana
   dostawa" i "Często kupowane razem" na karcie produktu. */
.gux-karta {
  background: #fff;
  border: 1px solid var(--gux-ramka);
  border-radius: var(--gux-promien);
  padding: 15px 20px 16px;
}

.gux-naglowek {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}
.gux-komunikat {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
  color: var(--gux-atrament);
  font-weight: 500;
}
.gux-komunikat b {
  color: var(--gux-akcent);
  font-weight: 700;
  white-space: nowrap;
}
.gux-komunikat .gux-ok,
.gux-komunikat .gux-wstep { color: var(--gux-brand); font-weight: 600; }

/* ── tor z węzłami ───────────────────────────────────────────────────────
   overflow MUSI zostać widoczny: skrajne kropki wystają poza szynę o swój
   promień, a etykiety wychodzą pod tor. Kontener ma tylko wysokość kropki,
   więc każde `overflow:hidden` obcina i kropki, i podpisy. */
.gux-tor {
  position: relative;
  height: 22px;
  margin: 0 11px 42px;
  overflow: visible;
}
.gux-tor-szyna {
  position: absolute;
  inset: 50% 0 auto;
  transform: translateY(-50%);
  height: 5px;
  border-radius: 99px;
  background: var(--gux-szyna);
  overflow: hidden;
}
.gux-tor-wypelnienie {
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--gux-brand), var(--gux-akcent));
  transition: width .5s cubic-bezier(.22, .61, .36, 1);
}

.gux-wezly { list-style: none; margin: 0; padding: 0; overflow: visible; }
.gux-wezel {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  margin: 0;
  padding: 0;
  overflow: visible;
}

.gux-wezel-kropka {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--gux-ramka);
  background: #fff;
  color: #bda9b3;
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.gux-wezel .gux-ico--wezel   { width: 12px; height: 12px; }
.gux-wezel .gux-ico--ptaszek { width: 12px; height: 12px; position: absolute; opacity: 0; }

/* Podpis w jednej linii - nazwa i kwota obok siebie. Dwie linie pod każdą
   kropką rozdymały baner o kilkadziesiąt pikseli. */
.gux-wezel-opis {
  position: absolute;
  top: 34px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}
.gux-wezel--start  .gux-wezel-opis { left: -11px; transform: none; }
.gux-wezel--koniec .gux-wezel-opis { left: auto; right: -11px; transform: none; }

.gux-wezel-opis b {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--gux-przygaszony);
  transition: color .3s ease;
}
.gux-wezel-opis em {
  font-style: normal;
  font-size: 11.5px;
  line-height: 1.2;
  color: #a9979f;
  font-variant-numeric: tabular-nums;
}

/* węzeł zdobyty - kropka wypełniona marką, ikona zamienia się w ptaszka */
.gux-wezel[data-gux-zdobyty="1"] .gux-wezel-kropka {
  background: var(--gux-brand);
  border-color: var(--gux-brand);
  color: #fff;
}
.gux-wezel[data-gux-zdobyty="1"] .gux-ico--wezel   { opacity: 0; }
.gux-wezel[data-gux-zdobyty="1"] .gux-ico--ptaszek { opacity: 1; }
.gux-wezel[data-gux-zdobyty="1"] .gux-wezel-opis b { color: var(--gux-atrament); }

/* węzeł, do którego klientowi aktualnie brakuje - obrys w kolorze marki */
.gux-wezel[data-gux-cel="1"] .gux-wezel-kropka {
  border-color: var(--gux-brand);
  color: var(--gux-brand);
}
.gux-wezel[data-gux-cel="1"] .gux-wezel-opis b { color: var(--gux-atrament); }

/* ── prezent premium: poza paskiem, jedna spokojna linia ─────────────────
   Bez własnej ramki i tła - to informacja o opcji ekskluzywnej, nie drugi
   równorzędny cel. Oddziela ją tylko włos linii. */
.gux-premium {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--gux-ramka);
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--gux-przygaszony);
}
.gux-premium .gux-ico--premium {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: var(--gux-zloto);
}
.gux-premium-tekst b {
  color: var(--gux-zloto);
  font-weight: 700;
  white-space: nowrap;
}
.gux-premium[data-gux-zdobyty="1"] { color: #6f5a24; }

/* ── telefon (94% ruchu) ──────────────────────────────────────────────────
   Inny układ, nie zmniejszony desktop. Etapy: numer NAD nazwą, żeby każdy
   punkt był podpisany bez zjadania szerokości na rząd kropka+tekst.
   Podpisy węzłów zostają pełne - równe odstępy między węzłami dały im tyle
   miejsca, że "Darmowa dostawa" mieści się w jednej linii nawet przy 288 px
   treści (sprawdzone na 348 / 320 / 300 / 288 px). */
@media (max-width: 600px) {
  .gux { margin-bottom: 22px; }

  .gux ol.gux-etapy { align-items: flex-start; margin-bottom: 18px; }
  .gux ol.gux-etapy::before { top: 11px; transform: none; }  /* środek kropki 22px */
  .gux li.gux-etap { padding: 0 6px; }
  .gux-etap { flex-direction: column; gap: 7px; }
  .gux-etap-kropka { width: 22px; height: 22px; font-size: 11px; }
  .gux-etap-nazwa { font-size: 10px; line-height: 1.2; text-align: center; }

  .gux-karta { padding: 13px 14px 12px; }
  .gux-naglowek { margin-bottom: 13px; }

  /* Komunikat ma się zmieścić w jednej linii. Zmierzone w Montserrat 500 przy
     318 px treści (telefon 380 px): z przedrostkiem "Masz darmową dostawę."
     najdłuższy wariant ma 391 px i nie mieści się nawet przy 11,5 px - dlatego
     przedrostek na telefonie znika, a nie kurczy się cały tekst. Bez niego
     najdłuższy wariant to 259 px przy 13 px pisma. */
  .gux-komunikat { font-size: 13px; }
  .gux-komunikat .gux-wstep { display: none; }

  .gux-tor { height: 20px; margin: 0 10px 46px; }
  .gux-wezel-kropka { width: 20px; height: 20px; }
  .gux-wezel .gux-ico--wezel,
  .gux-wezel .gux-ico--ptaszek { width: 11px; height: 11px; }
  .gux-wezel-opis {
    top: 29px;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    text-align: center;
  }
  .gux-wezel--start  .gux-wezel-opis { left: -10px; align-items: flex-start; text-align: left; }
  .gux-wezel--koniec .gux-wezel-opis { right: -10px; align-items: flex-end; text-align: right; }
  .gux-wezel-opis b  { font-size: 10.5px; line-height: 1.15; }
  .gux-wezel-opis em { font-size: 10px; line-height: 1.15; }

  /* premium: przy dwóch linijkach ikona ma trzymać się pierwszej, nie środka */
  .gux-premium {
    align-items: flex-start;
    margin-top: 11px;
    padding-top: 10px;
    font-size: 11px;
    gap: 7px;
  }
  .gux-premium .gux-ico--premium { width: 14px; height: 14px; margin-top: 1px; }
}

/* Najwęższe telefony (320 px = 258 px treści): przy 13 px najdłuższy komunikat
   ma 259 px i łamałby się o jeden piksel. Linia premium schodzi do 10,5 px -
   przy 11 px też się łamała. */
@media (max-width: 360px) {
  .gux-komunikat { font-size: 12px; }
  .gux-premium { font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .gux-tor-wypelnienie,
  .gux-wezel-kropka { transition: none; }
}