/* Pasek komunikatów (widżet Creative Elements "abc-topbar-slider") - wygląd domyślny w kolorach sklepu.
   Kolory przez zmienne, żeby zakładka Styl i tryb promocji nadpisywały je w jednym miejscu.
   :not(#abc) podnosi priorytet ponad regułę motywu "#header a { color: #232323 }" (bez zależności od id).
   Progi jak w CE: tablet ≤1024, telefon ≤767. */
.abc-topbar { --abc-tb-h: 36px; --abc-tb-color: #328497; --abc-tb-extra: #55615F; height: var(--abc-tb-h); overflow: hidden; }
.abc-topbar--promo { --abc-tb-color: #FFFFFF; --abc-tb-extra: #C9C9C9; }
.abc-topbar-track { transition: transform .5s ease-in-out; }
/* Kilka komunikatów: przesuwanie palcem w pionie obsługuje skrypt widżetu (pasek nie przewija strony, tekst się nie zaznacza) */
.abc-topbar--multi { touch-action: none; -webkit-user-select: none; user-select: none; }
.abc-topbar-slide { display: flex; align-items: center; justify-content: center; height: var(--abc-tb-h); padding: 0 12px; box-sizing: border-box; }
.abc-topbar-msg { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; height: 100%; color: var(--abc-tb-color); font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; }
a.abc-topbar-msg:not(#abc), a.abc-topbar-msg:not(#abc):hover, a.abc-topbar-msg:not(#abc):focus { color: var(--abc-tb-color); text-decoration: none; }
/* Komunikat z linkiem: główny tekst zawsze podkreślony (widać, że to link, także na telefonie bez najechania) */
a.abc-topbar-msg .abc-topbar-text { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a.abc-topbar-msg:not(#abc):focus:not(:focus-visible) { outline: 0; }
a.abc-topbar-msg:not(#abc):focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
/* overflow: hidden (wielokropek) ucinał podkreślenie pod linią tekstu - 6 px miejsca pod spodem, oddane ujemnym marginesem */
.abc-topbar-text { overflow: hidden; text-overflow: ellipsis; padding: 6px 0; margin: -6px 0; }
/* W promocji pogrubione tylko hasło z plakietką (np. "-20% na wszystko"), reszta komunikatów jak zwykle */
.abc-topbar--promo .abc-topbar-tag + .abc-topbar-text { font-weight: 800; }
.abc-topbar-extra { color: var(--abc-tb-extra); font-weight: 500; }
.abc-topbar-icon { flex: 0 0 auto; font-size: 13px; }
.abc-topbar-arrow { flex: 0 0 auto; font-size: 11px; }
.abc-topbar-tag { flex: 0 0 auto; display: inline-flex; align-items: center; padding: 3px 6px 2px; background-color: #111111; color: #FFFFFF; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; }
.abc-topbar--promo .abc-topbar-tag { background-color: #FFFFFF; color: #111111; }

@media (max-width: 1024px) {
  .abc-topbar { --abc-tb-h: 40px; }
}

@media (max-width: 360px) {
  .abc-topbar-slide { padding: 0 10px; }
  .abc-topbar-msg { gap: 6px; font-size: 13px; }
  .abc-topbar-tag { padding: 3px 5px 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .abc-topbar-track { transition: none; }
}