/* ===========================================================
   Logowanie telefonem (wtyczka Digits) — wygląd okna.

   Wtyczka ma własne style i dopisuje je w środku strony, więc
   wygrywa z każdym zwykłym arkuszem. Dlatego każda reguła zaczyna się
   od ":not(#ww)" — to nic nie wybiera, a tylko "dodaje siły" regule,
   żeby nasze kolory i kształty wygrały z wtyczką.

   Kolory biorą się z ww-tokens.css (z zapasowymi wartościami,
   gdyby okno pojawiło się na stronie bez naszych tokenów).
   =========================================================== */

/* --- Kolory wtyczki → kolory sklepu ---------------------- */

.digits-form_page:not(#ww),
.digits-form_page:not(#ww) .digits-form_container {
  --ww-d-surface: var(--surface, #f4ecdb);
  --ww-d-field: var(--bg, #ece4d2);
  --ww-d-ink: var(--ink, #221f1a);
  --ww-d-soft: var(--ink-soft, #5d574a);
  --ww-d-line: var(--line, #ded4be);
  --ww-d-accent: var(--accent, #eb6300);
  --ww-d-accent-ink: var(--accent-ink, #1c1a17);

  /* Zmienne samej wtyczki — tak samo jak w jej ustawieniach kolorów. */
  --dprimary: var(--ww-d-accent);
  --dtitle: var(--ww-d-ink);
  --dfield_bg: var(--ww-d-field);
  --daccent: var(--ww-d-accent);
  --dform_bg: var(--ww-d-surface);
  --dbutton_text: var(--ww-d-accent-ink);

  /* Zawsze jasne okno — także gdy telefon ma tryb ciemny. */
  color-scheme: light;
}

/* --- Tło za oknem ---------------------------------------- */

/* Same nakładki, bez rozmywania strony pod spodem — rozmycie bardzo
   obciąża przeglądarkę i przy ruchomych elementach animacje się tną.
   Dotyczy okna logowania i okienka wyboru multipaku. */
.digits_popup_wrapper,
.digits_popup_wrapper *,
.digits_popup_wrapper::before,
.digits_popup_wrapper::after,
.digits_main_wrapper,
.dig_load_overlay,
.ww-mp,
.ww-mp *,
.ww-mp__backdrop::before,
.ww-mp__backdrop::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.ww-mp__backdrop { background-color: rgba(22, 16, 11, .58) !important; }

.digits_popup_wrapper:not(#ww) {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
  overflow-y: auto !important;
  /* Bez rozmycia strony pod spodem — przy ruchomych paskach na stronie
     przeglądarka musiałaby rozmywać ją od nowa w każdej klatce. */
  background: rgba(22, 16, 11, .58) !important;
}

.digits_popup_wrapper:not(#ww) .digits-form_page {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100% !important;
  height: auto !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  background: transparent !important;
}

/* --- Karta ----------------------------------------------- */

.digits_popup_wrapper:not(#ww) .digits-form_container {
  position: relative !important;
  display: block !important;
  width: min(440px, 100%) !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: auto !important;
  padding: clamp(24px, 4vw, 34px) !important;
  box-sizing: border-box !important;
  background: var(--ww-d-surface) !important;
  border: 1.5px solid var(--ww-d-line) !important;
  border-radius: var(--radius-lg, 30px) !important;
  box-shadow: 0 24px 48px -28px rgba(20, 12, 6, .55) !important;
}

.digits_popup_wrapper:not(#ww) .digits-form_wrapper {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Krój pisma sklepu na KAŻDYM elemencie okna — wtyczka nadaje swój krój
   przyciskom, zakładkom i polom osobno, więc samo okno nie wystarcza.
   Nagłówek i nazwa sklepu dostają niżej krój nagłówków. */
.digits-form_page:not(#ww) .digits-form_container,
.digits-form_page:not(#ww) .digits-form_container :where(*) {
  font-family: var(--font-body, 'Space Grotesk', system-ui, sans-serif) !important;
}
.digits-form_page:not(#ww) .digits-form_container {
  color: var(--ww-d-ink);
  text-align: left;
}

/* --- Zamknięcie (×) -------------------------------------- */

.digits_popup_wrapper:not(#ww) .digits-cancel {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 3 !important;
  width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: transparent !important;
  background-image: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  color: var(--ww-d-soft);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.digits_popup_wrapper:not(#ww) .digits-cancel:hover {
  background: color-mix(in oklab, var(--ww-d-ink) 8%, var(--ww-d-surface)) !important;
  color: var(--ww-d-ink);
}
.digits_popup_wrapper:not(#ww) .digits-cancel::before {
  content: "×" !important;
  position: static !important;
  transform: none !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  font: 400 24px/1 system-ui, sans-serif !important;
  color: inherit !important;
}
.digits_popup_wrapper:not(#ww) .digits-cancel::after { display: none !important; }

/* --- Dopiski: logo, wprowadzenie, regulamin -------------- */

.digits-form_page:not(#ww) .ww-dig-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-family: var(--font-display, 'Bricolage Grotesque', system-ui, sans-serif) !important;
  font-weight: var(--display-weight, 800);
  font-size: 18px;
  letter-spacing: -.02em;
  color: var(--ww-d-ink);
}
.digits-form_page:not(#ww) .ww-dig-brand__name {
  font-family: var(--font-display, 'Bricolage Grotesque', system-ui, sans-serif) !important;
}
.digits-form_page:not(#ww) .ww-dig-brand__mark {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ww-d-accent);
  color: var(--ww-d-accent-ink);
  font-family: var(--font-body, 'Space Grotesk', system-ui, sans-serif);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0;
}

.digits-form_page:not(#ww) .ww-dig-lead {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ww-d-soft);
}
.digits-form_page:not(#ww) .ww-dig-lead__email { display: none; }

/* Zakładka "E-mail" włączona → inny tekst wprowadzenia (klasę ustawia skrypt). */
.digits-form_page:not(#ww) .ww-dig-lead.is-email .ww-dig-lead__phone { display: none; }
.digits-form_page:not(#ww) .ww-dig-lead.is-email .ww-dig-lead__email { display: inline; }

.digits-form_page:not(#ww) .ww-dig-fine {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--ww-d-line);
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
  color: var(--ww-d-soft);
}
.digits-form_page:not(#ww) .ww-dig-fine a {
  color: var(--ww-d-ink) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.digits-form_page:not(#ww) .ww-dig-fine a:hover { color: var(--ww-d-accent) !important; }

/* Stopka "Protected by digits" (plakietkę "test site" usuwa skrypt). */
.digits-form_page:not(#ww) .digits_site_footer_box,
.digits-form_page:not(#ww) .protected_by_digits { display: none !important; }

/* --- Nagłówek -------------------------------------------- */

.digits-form_page:not(#ww) .digits-form_heading {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  text-align: left !important;
}
/* Ikonka "wstecz" — na pierwszym kroku ukryta, żeby nie robiła wcięcia.
   Na kolejnych krokach (np. hasło po wpisaniu maila) to okrągły
   przycisk przed nagłówkiem, w środku okna (wtyczka wypycha go za okno). */
.digits-form_page:not(#ww) .digits_back_icon.digits_hide_back { display: none !important; }
.digits-form_page:not(#ww) .digits_back_icon:not(.digits_hide_back) {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  flex: none !important;
  display: grid !important;
  place-items: center !important;
  width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--ww-d-line) !important;
  background: var(--ww-d-field) none !important;
  color: var(--ww-d-ink) !important;
  cursor: pointer;
  transition: border-color .18s, color .18s;
}
.digits-form_page:not(#ww) .digits_back_icon:not(.digits_hide_back):hover {
  border-color: var(--ww-d-accent) !important;
  color: var(--ww-d-accent) !important;
}
/* Strzałka — wtyczka rysuje ją tłem, my rysujemy swoją. */
.digits-form_page:not(#ww) .digits_back_icon:not(.digits_hide_back)::before {
  content: "" !important;
  display: block !important;
  position: static !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  border: 0 !important;
  transform: none !important;
  background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m11 18-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m11 18-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.digits-form_page:not(#ww) .digits_back_icon:not(.digits_hide_back)::after { display: none !important; }

.digits-form_page:not(#ww) .digits-form_heading_text {
  font-family: var(--font-display, 'Bricolage Grotesque', system-ui, sans-serif) !important;
  font-weight: var(--display-weight, 800) !important;
  font-size: clamp(28px, 6vw, 36px) !important;
  line-height: 1.02 !important;
  letter-spacing: var(--display-spacing, -0.03em) !important;
  color: var(--ww-d-ink) !important;
}

/* --- Zakładki Telefon / E-mail jako przełącznik ---------- */

.digits-form_page:not(#ww) .digits-form_tabs { margin: 0 0 14px !important; }

.digits-form_page:not(#ww) .digits-form_tab-bar {
  position: relative !important;
  display: flex !important;
  gap: 4px !important;
  padding: 4px !important;
  margin: 0 !important;
  background: var(--ww-d-field) !important;
  border: 1.5px solid var(--ww-d-line) !important;
  border-radius: 999px !important;
}
.digits-form_page:not(#ww) .digits-form_tab-item {
  flex: 1 1 0 !important;
  margin: 0 !important;
  padding: 9px 12px !important;
  border-radius: 999px !important;
  text-align: center !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ww-d-soft) !important;
  cursor: pointer;
  transition: background .18s, color .18s, box-shadow .18s;
}
.digits-form_page:not(#ww) .digits-form_tab-item:hover { color: var(--ww-d-ink) !important; }
.digits-form_page:not(#ww) .digits-form_tab-item.digits-tab_active {
  background: var(--ww-d-surface) !important;
  color: var(--ww-d-ink) !important;
  box-shadow: 0 1px 0 var(--ww-d-line), 0 6px 14px -10px rgba(40, 30, 20, .6) !important;
}
/* Pasek podkreślenia wtyczki — zastąpiony podświetleniem całej zakładki. */
.digits-form_page:not(#ww) .digits-slider_line { display: none !important; }

/* --- Pola ------------------------------------------------ */

.digits-form_page:not(#ww) .digits-form_input_row { margin: 0 0 14px !important; }

/* E-mail i hasło. */
.digits-form_page:not(#ww) .digits-form_input input[type="email"],
.digits-form_page:not(#ww) .digits-form_input input[type="password"] {
  width: 100% !important;
  height: 52px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
  background: var(--ww-d-field) !important;
  border: 1.6px solid var(--ww-d-line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--ww-d-ink) !important;
  transition: border-color .18s, box-shadow .18s;
}
.digits-form_page:not(#ww) .digits-form_input input[type="email"]:focus,
.digits-form_page:not(#ww) .digits-form_input input[type="password"]:focus {
  outline: none !important;
  border-color: var(--ww-d-accent) !important;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--ww-d-accent) 16%, transparent) !important;
}

/* Telefon: całe pole (kierunkowy + numer) to jedna ramka. */
.digits-form_page:not(#ww) .digits-mobile_wrapper.digits-form_border {
  position: relative !important;
  background: var(--ww-d-field) !important;
  border: 1.6px solid var(--ww-d-line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  transition: border-color .18s, box-shadow .18s;
}
.digits-form_page:not(#ww) .digits-mobile_wrapper.digits-form_border:focus-within {
  border-color: var(--ww-d-accent) !important;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--ww-d-accent) 16%, transparent) !important;
}
.digits-form_page:not(#ww) .digits-mobile_wrapper .digits-form_input { margin: 0 !important; }

/* Numer. Odstęp z lewej ustawia wtyczka (zależy od szerokości kierunkowego). */
.digits-form_page:not(#ww) .digits-mobile_wrapper input.mobile_field {
  width: 100% !important;
  height: 50px !important;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  outline: none !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: .03em !important;
  color: var(--ww-d-ink) !important;
}

/* Kierunkowy "+48" z flagą.
   Układ zostawiamy wtyczce: to ona robi w tym polu miejsce na flagę
   i na tej podstawie wylicza, gdzie zaczyna się numer. Tu tylko kolory,
   krój, odstęp z prawej i cienka kreska oddzielająca od numeru. */
.digits-form_page:not(#ww) .digits-form_countrycode input.countrycode {
  height: 50px !important;
  margin: 0 !important;
  padding-right: 12px !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  background: linear-gradient(var(--ww-d-line), var(--ww-d-line)) no-repeat right center / 1.5px 22px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--ww-d-ink) !important;
}

/* Numer zaczyna się zaraz za kreską — odsuwamy sam tekst o kawałek. */
.digits-form_page:not(#ww) .digits-mobile_wrapper input.mobile_field { text-indent: 12px; }

/* Pozostałe pola wtyczki (np. kod z SMS-a) — tylko kolory i krój. */
.digits-form_page:not(#ww) .digits-form_container input:not([type="checkbox"]):not([type="radio"]) {
  color: var(--ww-d-ink) !important;
}
.digits-form_page:not(#ww) .digits-form_container input::placeholder {
  color: color-mix(in oklab, var(--ww-d-soft) 70%, transparent) !important;
  font-weight: 500;
  letter-spacing: normal;
}

/* "Zapamiętaj mnie". */
.digits-form_page:not(#ww) .digits-form_rememberme { margin: 2px 0 16px !important; }
.digits-form_page:not(#ww) .digits-form_rememberme label,
.digits-form_page:not(#ww) .digits-form_rememberme .dig_input_wrapper {
  font-size: 14px !important;
  color: var(--ww-d-soft) !important;
  cursor: pointer;
}
.digits-form_page:not(#ww) .digits-form_rememberme .dig_input_wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.digits-form_page:not(#ww) .digits-form_rememberme input[type="checkbox"] { accent-color: var(--ww-d-accent); }

/* --- Przyciski ------------------------------------------- */

.digits-form_page:not(#ww) .digits-form_button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 52px !important;
  margin: 0 !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
  border-radius: 14px !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, background .2s, color .2s, border-color .2s;
}
.digits-form_page:not(#ww) .digits-form_button-text { color: inherit !important; }

/* Główny — pomarańczowy, jak w całym sklepie. */
.digits-form_page:not(#ww) .digits-form_submit-btn {
  background: var(--ww-d-accent) !important;
  color: var(--ww-d-accent-ink) !important;
  border: 0 !important;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .18) !important;
}
.digits-form_page:not(#ww) .digits-form_submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 rgba(0, 0, 0, .18) !important;
}
.digits-form_page:not(#ww) .digits-form_submit-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .18) !important;
}

/* Drugi ("Zaloguj się bez hasła") — obrys, ciemny po najechaniu. */
.digits-form_page:not(#ww) .digits-form_passwordless_login {
  background: transparent !important;
  color: var(--ww-d-ink) !important;
  border: 1.6px solid var(--ww-d-line) !important;
  box-shadow: none !important;
}
.digits-form_page:not(#ww) .digits-form_passwordless_login:hover {
  background: var(--ww-d-ink) !important;
  color: var(--ww-d-surface) !important;
  border-color: var(--ww-d-ink) !important;
}

/* Strzałka w przycisku — zwykły znak, w kolorze napisu. */
.digits-form_page:not(#ww) .digits-form_button_ic {
  width: auto !important;
  height: auto !important;
  background: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}
.digits-form_page:not(#ww) .digits-form_button_ic::before {
  content: "→" !important;
  position: static !important;
  display: inline !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  transform: none !important;
  font-size: 16px;
  color: inherit;
}
.digits-form_page:not(#ww) .digits-form_button_ic::after { display: none !important; }

/* "lub" między przyciskami. */
.digits-form_page:not(#ww) .digits-form_login_separator {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 16px 0 !important;
  border: 0 !important;
  background: none !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--ww-d-soft) !important;
}
.digits-form_page:not(#ww) .digits-form_login_separator::before,
.digits-form_page:not(#ww) .digits-form_login_separator::after {
  content: "" !important;
  flex: 1 !important;
  height: 1px !important;
  background: var(--ww-d-line) !important;
}
.digits-form_page:not(#ww) .digits-form_login_separator span {
  background: none !important;
  padding: 0 !important;
  color: inherit !important;
}

/* "Nie masz konta? Załóż konto". */
.digits-form_page:not(#ww) .dig_login_signup_bar {
  margin: 18px 0 0 !important;
  text-align: center !important;
  font-size: 14px !important;
  color: var(--ww-d-soft) !important;
}
.digits-form_page:not(#ww) .dig_login_signup_bar a {
  margin-left: 4px;
  color: var(--ww-d-ink) !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}
.digits-form_page:not(#ww) .dig_login_signup_bar a:hover { color: var(--ww-d-accent) !important; }

/* Kręciołek ładowania w kolorach sklepu. */
.digits-form_page:not(#ww) .dig_load_overlay {
  background: color-mix(in oklab, var(--ww-d-surface) 80%, transparent) !important;
  border-radius: inherit;
}
.digits-form_page:not(#ww) .dig_double-bounce1,
.digits-form_page:not(#ww) .dig_double-bounce2 { background: var(--ww-d-accent) !important; }

/* --- Telefon --------------------------------------------- */

@media (max-width: 480px) {
  .digits_popup_wrapper:not(#ww) .digits-form_page { padding: 12px !important; }
  .digits_popup_wrapper:not(#ww) .digits-form_container { padding: 22px 20px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .digits-form_page:not(#ww) .digits-form_button { transition: none; }
}


/* =========================================================
   Nagłówek strony: "Loguj" → ikonka ludzika (jak w makiecie)
   Napis zostaje dla czytników ekranu, tylko go nie widać.
   ========================================================= */

:is(header, .ct-header, #header) :is(.digits-login-modal:not(li), li.digits-login-modal > a, .ww-login-icon) {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ink, #221f1a) !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-decoration: none !important;
  transition: background-color .18s, color .18s;
}
:is(header, .ct-header, #header) :is(.digits-login-modal:not(li), li.digits-login-modal > a, .ww-login-icon):hover {
  background: color-mix(in oklab, var(--ink, #221f1a) 8%, transparent) !important;
  color: var(--accent, #e8650c) !important;
}
:is(header, .ct-header, #header) :is(.digits-login-modal:not(li), li.digits-login-modal > a, .ww-login-icon) > * {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}
:is(header, .ct-header, #header) :is(.digits-login-modal:not(li), li.digits-login-modal > a, .ww-login-icon)::before {
  content: "" !important;
  display: block !important;
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.2 3.6-7 8-7s8 2.8 8 7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.2 3.6-7 8-7s8 2.8 8 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
:is(header, .ct-header, #header) :is(.digits-login-modal:not(li), li.digits-login-modal > a, .ww-login-icon)::after { display: none !important; }
:is(header, .ct-header, #header) :is(.digits-login-modal:not(li), li.digits-login-modal > a, .ww-login-icon) { cursor: pointer; }

/* Ikonka siedzi w obudowie przewijanego paska (.ticker) — ta obudowa
   ma stać w miejscu, inaczej ikonka jeździ razem z paskiem u góry.
   Pierwsza reguła działa od razu, druga to zapas ze skryptu. */
:is(header, .ct-header, #header) :is(.ticker, .ticker__track):has(.digits-login-modal, .ww-login-icon),
.ww-login-still {
  animation: none !important;
  transform: none !important;
  width: auto !important;
  overflow: visible !important;
}
:is(header, .ct-header, #header) :is(.digits-login-modal:not(li), li.digits-login-modal > a, .ww-login-icon):focus-visible {
  outline: 2px solid var(--accent, #e8650c) !important;
  outline-offset: 2px;
}