/* pysiecannouncement - pasek informacyjny nad headerem. Namespace .pysiec-announcement*. */

.pysiec-announcement {
  background: var(--pysiec-espresso, #3e2f23);
  color: var(--pysiec-bg, #faf8f3);
  text-align: center;
  /* Zmniejszone z 0.4375rem - na żądanie użytkownika, sesja 2026-09-17. */
  padding: 0.3125rem 1rem;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.pysiec-announcement__list {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pysiec-announcement__sep {
  opacity: 0.5;
}

/* Na wąskich telefonach flex-wrap:wrap (wyżej) łamał tekst na dwie linie
   ("...Wysyłka w 24h ·" / "30 dni na zwrot") zamiast trzymać go w jednym
   pasku - zgłoszone zrzutem ekranu (iPhone SE, 375px), sesja 2026-09-20.
   nowrap + mniejsza czcionka/odstępy, żeby zmieściło się w jednej linii;
   overflow-x jako siatka bezpieczeństwa na najwęższych ekranach (320px),
   gdyby mimo zmniejszenia dalej nie mieściło się w całości. */
@media (max-width: 480px) {
  .pysiec-announcement {
    padding: 0.3125rem 0.75rem;
  }

  .pysiec-announcement__list {
    flex-wrap: nowrap;
    /* flex-start (poprzednia wersja) było potrzebne TYLKO jako fallback na
       wypadek przepełnienia - ale w praktyce po zmniejszeniu czcionki tekst
       mieści się w jednej linii nawet na 375px, więc lewe wyrównanie
       wyglądało po prostu krzywo (zgłoszone zrzutem ekranu), zamiast
       ratować realny problem. Wracamy do center - overflow-x niżej dalej
       jest siatką bezpieczeństwa na węższych ekranach. Sesja 2026-09-20. */
    justify-content: center;
    gap: 0.3rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .pysiec-announcement__list::-webkit-scrollbar {
    display: none;
  }

  .pysiec-announcement__list,
  .pysiec-announcement__item {
    white-space: nowrap;
  }

  .pysiec-announcement {
    font-size: 0.625rem;
    letter-spacing: 0.02em;
  }
}


/**
 * Telefon (<768px): pasek się PRZESUWA (marquee) zamiast ucinać tekst - dwie identyczne listy
 * w .pysiec-announcement__marquee jadą w lewo o równo połowę szerokości (-50%), więc pętla jest
 * niewidoczna. Dotknięcie wstrzymuje. Przy prefers-reduced-motion zostaje statyczny, przewijalny
 * pasek (jak wcześniej). Na desktopie druga kopia jest ukryta, tekst wycentrowany jak dawniej.
 * Sesja 2026-10-05.
 */
.pysiec-announcement__list--clone {
  display: none;
}

@media (max-width: 767.98px) {
  .pysiec-announcement {
    overflow: hidden;
    padding-left: 0;
    padding-right: 0;
  }

  .pysiec-announcement__marquee {
    display: flex;
    width: max-content;
  }

  .pysiec-announcement__list,
  .pysiec-announcement__list--clone {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow: visible;
    padding-right: 2.5rem;
    white-space: nowrap;
  }

  @media (prefers-reduced-motion: no-preference) {
    .pysiec-announcement__marquee {
      animation: pysiec-announcement-marquee 26s linear infinite;
    }

    .pysiec-announcement:active .pysiec-announcement__marquee {
      animation-play-state: paused;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .pysiec-announcement__list--clone {
      display: none;
    }

    .pysiec-announcement {
      overflow-x: auto;
      scrollbar-width: none;
    }
  }
}

@keyframes pysiec-announcement-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}