.pixel-banner {
  position: relative;
  width: 100%;
  margin: 0 0 1rem;
  line-height: 0;
  /* Zaokraglenie schodzi z opakowania motywu (w koszyku .new-card ma 6px).
     Motyw moze je nadpisac ustawiajac --pcb-radius na kontenerze. */
  border-radius: var(--pcb-radius, inherit);
}

/* Kazdy slajd i obrazek dostaje to samo zaokraglenie wprost, zamiast liczyc na
   przyciecie przez overflow przodka: przegladarki nie przycinaja zaokraglonym
   overflow potomkow, ktore maja wlasne transform - a slajdy sa transformowane,
   wiec w trakcie animacji rogi robily sie kanciaste. */
.pixel-banner__item,
.pixel-banner__item > a,
.pixel-banner picture,
.pixel-banner img {
  border-radius: inherit;
}

.pixel-banner__item {
  width: 100%;
}

.pixel-banner picture {
  display: block;
  width: 100%;
}

.pixel-banner img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* ------------------------------------------------------------------ slider */

/* Wysokosc kontenera bierze sie z proporcji pierwszego baneru, zeby przy
   zmianie slajdu nie skakal uklad strony. */
.pixel-banner--slider {
  aspect-ratio: var(--pcb-width, 1440) / var(--pcb-height, 150);
  overflow: hidden;
  border-radius: var(--pcb-radius, inherit);
}

.pixel-banner--slider .pixel-banner__item {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--pcb-duration, 800ms) ease-in-out,
    transform var(--pcb-duration, 800ms) ease-in-out;
}

.pixel-banner--slider .pixel-banner__item.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

.pixel-banner--slider .pixel-banner__item.is-leaving {
  opacity: 0;
  z-index: 1;
}

/* Powrot slajdu na pozycje startowa nie moze byc animowany - inaczej widac,
   jak "cofa sie" przez caly kontener. */
.pixel-banner__item.pcb-no-transition {
  transition: none !important;
}

.pixel-banner--slider .pixel-banner__item > a,
.pixel-banner--slider .pixel-banner__item > picture,
.pixel-banner--slider .pixel-banner__item > img,
.pixel-banner--slider .pixel-banner__item > a > picture {
  display: block;
  width: 100%;
  height: 100%;
}

.pixel-banner--slider img {
  height: 100%;
  object-fit: cover;
}

/* --- efekty ----------------------------------------------------------- */

/* fade: sama zmiana krycia, bez transformacji */

/* Przesuwanie ma byc czystym ruchem - bez zmiany krycia. Slajdy poza kadrem
   chowa overflow kontenera, wiec opacity nie jest do niczego potrzebne. */
.pixel-banner--slide .pixel-banner__item,
.pixel-banner--slide-vertical .pixel-banner__item,
.pixel-banner--slide .pixel-banner__item.is-active,
.pixel-banner--slide .pixel-banner__item.is-leaving,
.pixel-banner--slide-vertical .pixel-banner__item.is-active,
.pixel-banner--slide-vertical .pixel-banner__item.is-leaving {
  opacity: 1;
}

.pixel-banner--slide .pixel-banner__item,
.pixel-banner--slide-vertical .pixel-banner__item {
  transition: transform var(--pcb-duration, 800ms) ease-in-out;
}

/* Slajd startuje o wlasna szerokosc PLUS odstep dalej, zeby w trakcie animacji
   miedzy wychodzacym a wchodzacym byla widoczna przerwa, a nie styk krawedzi. */
.pixel-banner--slide .pixel-banner__item {
  transform: translateX(calc(100% + var(--pcb-gap, 16px)));
}
.pixel-banner--slide .pixel-banner__item.is-active {
  transform: translateX(0);
}
.pixel-banner--slide .pixel-banner__item.is-leaving {
  transform: translateX(calc(-100% - var(--pcb-gap, 16px)));
}

.pixel-banner--slide-vertical .pixel-banner__item {
  transform: translateY(calc(100% + var(--pcb-gap, 16px)));
}
.pixel-banner--slide-vertical .pixel-banner__item.is-active {
  transform: translateY(0);
}
.pixel-banner--slide-vertical .pixel-banner__item.is-leaving {
  transform: translateY(calc(-100% - var(--pcb-gap, 16px)));
}

.pixel-banner--zoom .pixel-banner__item {
  transform: scale(1.08);
}
.pixel-banner--zoom .pixel-banner__item.is-active {
  transform: scale(1);
}
.pixel-banner--zoom .pixel-banner__item.is-leaving {
  transform: scale(0.96);
}

/* Grafika mobilna ma zwykle inne proporcje niz desktopowa (np. 800x800 zamiast
   1440x150), wiec ponizej breakpointa kontener musi zmienic ksztalt. */
@media (max-width: 767.98px) {
  .pixel-banner--slider {
    aspect-ratio: var(--pcb-width-mobile, var(--pcb-width, 1440))
      / var(--pcb-height-mobile, var(--pcb-height, 150));
  }
}

/* Fallback dla przegladarek bez aspect-ratio (Safari < 15). */
@supports not (aspect-ratio: 1 / 1) {
  .pixel-banner--slider {
    height: 0;
    padding-top: calc(var(--pcb-height, 150) / var(--pcb-width, 1440) * 100%);
  }

  @media (max-width: 767.98px) {
    .pixel-banner--slider {
      padding-top: calc(
        var(--pcb-height-mobile, var(--pcb-height, 150))
        / var(--pcb-width-mobile, var(--pcb-width, 1440)) * 100%
      );
    }
  }
}

/* Uzytkownik prosil system o mniej animacji - zostaje pierwszy baner. */
@media (prefers-reduced-motion: reduce) {
  .pixel-banner--slider .pixel-banner__item {
    transition: none;
  }
}

/* ----------------------------------------------------------- warianty --- */

.pixel-banner--side {
  margin-bottom: 0;
}

/* Baner w koszyku siedzi juz w .new-card, ktora daje margines. */
.pixel-banner--cart {
  margin-bottom: 0;
}