/* ps_heroslider – slider główny (bez zależności, ten sam kod w podglądzie panelu) */

.phs {
  --phs-speed: 700ms;
  --phs-interval: 5000ms;
  --phs-radius: 12px;
  --phs-ease: cubic-bezier(.65, 0, .35, 1);
  position: relative;
  margin: 0 0 1.5rem;
  -webkit-tap-highlight-color: transparent;
}

/* ---------------------------------------------------------------- scena: slajdy ułożone w jednej komórce siatki */
.phs__viewport {
  position: relative;
  display: grid;
  grid-template: 100% / 100%;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--phs-radius);
  aspect-ratio: var(--phs-ratio, auto);
  container-type: inline-size;
  touch-action: pan-y;
  user-select: none;
  background: rgba(0, 0, 0, .04);
}
@media (max-width: 768px) {
  .phs__viewport { aspect-ratio: var(--phs-ratio-m, var(--phs-ratio, auto)); }
}

.phs__slide {
  grid-area: 1 / 1;
  position: relative;
  min-width: 0;
  min-height: 0;
  z-index: 0;
  visibility: hidden;
  opacity: 0;
  transition:
    opacity var(--phs-speed) ease,
    transform var(--phs-speed) var(--phs-ease),
    clip-path var(--phs-speed) var(--phs-ease),
    visibility 0s linear var(--phs-speed);
}
.phs__slide.is-active { z-index: 2; visibility: visible; opacity: 1; transition-delay: 0s; }
.phs__slide.is-leaving { z-index: 1; visibility: visible; opacity: 1; transition-delay: 0s; }
.phs.is-dragging .phs__slide, .phs__slide.is-instant { transition: none !important; }
.phs--drag .phs__viewport { cursor: grab; }
.phs--drag.is-dragging .phs__viewport, .phs--drag.is-dragging .phs__viewport * { cursor: grabbing; }
.phs.is-dragging .phs__slide .phs__img { animation-play-state: paused; }

.phs__link { position: relative; display: block; height: 100%; color: inherit; text-decoration: none !important; outline-offset: -3px; }
.phs__media { display: block; height: 100%; }
.phs__img { display: block; width: 100%; height: 100%; max-width: none; object-fit: var(--pco-fit, var(--pcfit-fit, cover)); object-position: var(--pco-x, var(--pcfit-x, 50%)) var(--pco-y, var(--pcfit-y, 50%)); -webkit-user-drag: none; }
/* bez znanych proporcji: obraz w naturalnej wysokości */
.phs--auto-h .phs__img { height: auto; }
.phs--auto-h .phs__viewport { grid-template-rows: auto; align-items: start; }
@media (max-width: 768px) {
  .phs--auto-hm .phs__viewport { aspect-ratio: auto; grid-template-rows: auto; align-items: start; }
  .phs--auto-hm .phs__img { height: auto; }
  .phs--auto-h:not(.phs--auto-hm) .phs__viewport { grid-template-rows: 100%; align-items: stretch; }
  .phs--auto-h:not(.phs--auto-hm) .phs__img { height: 100%; }
}

/* ---------------------------------------------------------------- przejścia (klasa slajdu wchodzącego) */
/* przenikanie – wchodzący pojawia się nad poprzednim, bez „przygaszenia” w połowie */
.phs--t-fade { }

/* przesunięcie */
.phs__slide.phs--t-slide { opacity: 1; }
.phs__slide.phs--t-slide[data-from="next"] { transform: translate3d(100%, 0, 0); }
.phs__slide.phs--t-slide[data-from="prev"] { transform: translate3d(-100%, 0, 0); }
/* slajd wychodzący zostaje na miejscu pod wchodzącym – chyba że przejście mówi inaczej */
.phs__slide.is-leaving { transform: none; clip-path: inset(0); }
.phs__slide.is-leaving[data-out="slide-next"] { transform: translate3d(-30%, 0, 0); opacity: .4; }
.phs__slide.is-leaving[data-out="slide-prev"] { transform: translate3d(30%, 0, 0); opacity: .4; }

/* przybliżenie */
.phs__slide.phs--t-zoom { transform: scale(1.12); }
.phs__slide.is-leaving[data-out^="zoom"] { transform: scale(.96); }

/* kurtyna – odsłanianie zgodnie z kierunkiem */
.phs__slide.phs--t-curtain { opacity: 1; clip-path: inset(0 0 0 100%); }
.phs__slide.phs--t-curtain[data-from="prev"] { clip-path: inset(0 100% 0 0); }
.phs__slide.is-leaving[data-out^="curtain"] { transform: scale(1.04); }

.phs__slide.is-leaving.phs--t-zoom:not([data-out^="zoom"]), .phs__slide.is-leaving.phs--t-curtain:not([data-out^="curtain"]) { transform: none; clip-path: inset(0); }

/* bez animacji */
.phs__slide.phs--t-none { transition-duration: 0s; }

.phs .phs__slide.is-active { transform: none; clip-path: inset(0); }
.phs .phs__slide.is-active.phs--t-curtain { clip-path: inset(0 0 0 0); }

/* Ken Burns – powolny ruch kamery przez cały czas wyświetlania */
.phs__slide.phs--t-kenburns:is(.is-active, .is-leaving) .phs__img {
  animation: phs-kb calc(var(--phs-interval) + var(--phs-speed) * 2) linear both;
  transform-origin: var(--kb-o, 50% 50%);
}
.phs__slide:nth-child(4n+1) { --kb-o: 30% 40%; --kb-x: -1.5%; }
.phs__slide:nth-child(4n+2) { --kb-o: 70% 35%; --kb-x: 1.5%; }
.phs__slide:nth-child(4n+3) { --kb-o: 40% 70%; --kb-x: 1%; }
.phs__slide:nth-child(4n+4) { --kb-o: 65% 60%; --kb-x: -1%; }
@keyframes phs-kb {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to { transform: scale(1.14) translate3d(var(--kb-x, 0), 0, 0); }
}
.phs.is-paused .phs__img { animation-play-state: paused; }

/* ---------------------------------------------------------------- tekst na slajdzie */
.phs__text {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .55em;
  padding: 6cqi 7cqi;
  font-size: clamp(13px, 1.6cqi, 18px);
  pointer-events: none;
}
.phs__text--left { align-items: flex-start; text-align: left; padding-right: 40%; }
.phs__text--right { align-items: flex-end; text-align: right; padding-left: 40%; }
.phs__text--center { align-items: center; text-align: center; padding-inline: 14%; }
.phs__text--bottom { justify-content: flex-end; align-items: flex-start; text-align: left; padding-right: 30%; }
.phs__text--light { color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.phs__text--dark { color: #111; }
.phs__text--light.phs__text--left { background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 70%); }
.phs__text--light.phs__text--right { background: linear-gradient(270deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 70%); }
.phs__text--light.phs__text--center { background: radial-gradient(ellipse at center, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 70%); }
.phs__text--light.phs__text--bottom { background: linear-gradient(0deg, rgba(0, 0, 0, .65), rgba(0, 0, 0, 0) 65%); }
.phs__text--dark.phs__text--left { background: linear-gradient(90deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 70%); }
.phs__text--dark.phs__text--right { background: linear-gradient(270deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 70%); }
.phs__text--dark.phs__text--center { background: radial-gradient(ellipse at center, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 70%); }
.phs__text--dark.phs__text--bottom { background: linear-gradient(0deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 65%); }
.phs__title { display: block; font-size: clamp(20px, 5.2cqi, 56px); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.phs__subtitle { display: block; font-size: clamp(13px, 2cqi, 22px); line-height: 1.35; opacity: .92; }
.phs__cta {
  display: inline-flex; align-items: center; gap: .5em; margin-top: .6em; padding: .8em 1.5em; border-radius: 999px;
  font-size: clamp(12px, 1.5cqi, 16px); font-weight: 700; letter-spacing: .02em; text-shadow: none;
  background: #fff; color: #111; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); pointer-events: auto;
  transition: transform .25s ease, box-shadow .25s ease;
}
.phs__cta::after { content: "→"; transition: transform .25s ease; }
.phs__text--dark .phs__cta { background: #111; color: #fff; }
.phs__link:hover .phs__cta { transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(0, 0, 0, .55); }
.phs__link:hover .phs__cta::after { transform: translateX(3px); }
/* wejście tekstu po kolei */
.phs__text > * { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity .6s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.phs__slide.is-active .phs__text > * { opacity: 1; transform: none; }
.phs__slide.is-active .phs__text > :nth-child(1) { transition-delay: calc(var(--phs-speed) * .5 + 60ms); }
.phs__slide.is-active .phs__text > :nth-child(2) { transition-delay: calc(var(--phs-speed) * .5 + 200ms); }
.phs__slide.is-active .phs__text > :nth-child(3) { transition-delay: calc(var(--phs-speed) * .5 + 340ms); }
@media (max-width: 575px) {
  .phs__text--left, .phs__text--right, .phs__text--bottom { padding-inline: 6cqi 18%; }
  .phs__subtitle { display: none; }
}

.phs__html { position: absolute; inset: auto 0 0 0; z-index: 3; padding: 4cqi 6cqi; color: #fff; }

/* ---------------------------------------------------------------- skórka nowoczesna */
.phs--modern .phs__viewport { box-shadow: 0 18px 40px -24px rgba(17, 24, 39, .45); }

.phs__arrow {
  position: absolute; top: 50%; z-index: 5; display: grid; place-items: center; width: 48px; height: 48px; margin-top: -24px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer; color: #111;
  background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .35);
  opacity: 0; transition: opacity .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1), background .2s ease;
}
.phs__arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.phs__arrow--prev { left: 18px; transform: translateX(-10px); }
.phs__arrow--next { right: 18px; transform: translateX(10px); }
.phs:hover .phs__arrow, .phs__arrow:focus-visible { opacity: 1; transform: none; }
.phs__arrow:hover { background: #fff; }
.phs__arrow:active { transform: scale(.94); }
@media (hover: none), (max-width: 768px) { .phs__arrow { display: none; } }

.phs__bar {
  position: absolute; left: 50%; bottom: 14px; z-index: 5; display: flex; align-items: center; gap: 10px;
  transform: translateX(-50%); padding: 7px 10px; border-radius: 999px; color: #fff;
  background: rgba(17, 17, 24, .38); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.phs__bar:empty { display: none; }
.phs__dots { display: flex; align-items: center; gap: 6px; }
.phs__dot { position: relative; display: block; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; overflow: hidden; background: rgba(255, 255, 255, .5); transition: width .4s cubic-bezier(.2, .8, .2, 1), background .3s ease; }
.phs__dot:hover { background: rgba(255, 255, 255, .85); }
.phs__dot.is-active { width: 26px; background: #fff; }
.phs__dot i { display: none; }
/* paski z postępem czasu */
.phs__dots--bars { gap: 5px; }
.phs__dots--bars .phs__dot { width: 30px; height: 4px; background: rgba(255, 255, 255, .35); }
.phs__dots--bars .phs__dot.is-active { width: 30px; background: rgba(255, 255, 255, .35); }
.phs__dots--bars .phs__dot.is-done { background: rgba(255, 255, 255, .85); }
.phs__dots--bars .phs__dot i { display: block; position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: #fff; }
.phs__dots--bars .phs__dot.is-active i { transform: scaleX(1); }
.phs.is-playing .phs__dots--bars .phs__dot.is-active i { animation: phs-fill var(--phs-interval) linear both; }
.phs.is-paused .phs__dots--bars .phs__dot.is-active i { animation-play-state: paused; }
@keyframes phs-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.phs__count { display: inline-flex; align-items: center; gap: 8px; padding: 0 4px; font: 600 13px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .04em; opacity: .9; }
.phs__count b { font-weight: 800; opacity: 1; }
.phs__count i { width: 22px; height: 1px; background: currentColor; opacity: .6; }

.phs__play { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #fff; background: rgba(255, 255, 255, .16); }
.phs__play:hover { background: rgba(255, 255, 255, .3); }
.phs__play svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.phs__play .phs__ico-play { display: none; fill: currentColor; stroke-width: 1; }
.phs.is-stopped .phs__play .phs__ico-pause { display: none; }
.phs.is-stopped .phs__play .phs__ico-play { display: block; }

/* miniatury – pod sliderem */
.phs--nav-thumbs .phs__bar { position: static; transform: none; justify-content: center; margin-top: 12px; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: #111; }
.phs--nav-thumbs .phs__play { color: #111; background: rgba(0, 0, 0, .06); }
.phs__thumbs { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.phs__thumbs::-webkit-scrollbar { display: none; }
.phs__thumb { position: relative; flex: 0 0 auto; width: 112px; aspect-ratio: var(--phs-ratio, 16 / 7); padding: 0; border: 0; border-radius: 8px; overflow: hidden; cursor: pointer; opacity: .55; background: #eee; transition: opacity .3s ease, transform .3s ease; }
.phs__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.phs__thumb i { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; transform-origin: left; transform: scaleX(0); background: var(--phs-accent, #111); }
.phs__thumb:hover { opacity: .85; }
.phs__thumb.is-active { opacity: 1; box-shadow: 0 0 0 2px var(--phs-accent, #111); }
.phs__thumb.is-active i { transform: scaleX(1); }
.phs.is-playing .phs__thumb.is-active i { animation: phs-fill var(--phs-interval) linear both; }
.phs.is-paused .phs__thumb.is-active i { animation-play-state: paused; }
@media (max-width: 768px) { .phs__thumb { width: 72px; border-radius: 6px; } }

/* liczniki – w prawym dolnym rogu */
.phs--nav-numbers .phs__bar { left: auto; right: 14px; transform: none; }

/* pasek postępu na dole obrazu */
.phs__progress { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; height: 3px; pointer-events: none; }
.phs--nav-thumbs .phs__progress { bottom: auto; top: 0; }
.phs__progress i { display: block; height: 100%; transform-origin: left; transform: scaleX(0); background: var(--phs-accent, #fff); box-shadow: 0 0 8px rgba(0, 0, 0, .25); }
.phs.is-playing .phs__progress i { animation: phs-fill var(--phs-interval) linear both; }
.phs.is-paused .phs__progress i { animation-play-state: paused; }

@media (max-width: 768px) {
  .phs__bar { bottom: 8px; gap: 8px; padding: 5px 8px; }
  .phs__dots--bars .phs__dot, .phs__dots--bars .phs__dot.is-active { width: 18px; height: 3px; }
  .phs__dot.is-active { width: 18px; }
  .phs__dot { width: 6px; height: 6px; }
}

/* ---------------------------------------------------------------- skórka klasyczna (wygląd dawnego slidera motywu)
 * Kolory w :where() – ustawienia kolorów motywu (cz_themeoptions) nadpisują je jak dawniej. */
.phs--classic .phs__viewport { background: none; }
.phs--classic .flex-control-nav,
.phs--classic .flex-direction-nav { margin: 0; padding: 0; list-style: none; }
.phs--classic .flex-control-nav {
  position: absolute; bottom: 7px; z-index: 3; display: block; width: 100%; text-align: center; line-height: 21px;
  transition: all 500ms ease;
}
.phs--classic .flex-control-nav li { display: inline-block; margin: 0 3px; vertical-align: bottom; }
.phs--classic .flex-control-paging li a {
  display: block; width: 12px; height: 12px; cursor: pointer; text-indent: -9999px; overflow: hidden;
  border-radius: 5px; transition: all 500ms ease;
}
/* (0,1,2): mocniej niż ogólne „a” motywu/Bootstrapa, słabiej niż kolory z ustawień motywu (0,2,2) */
:where(.phs--classic) .flex-control-paging li a { background: #111; }
:where(.phs--classic .flex-control-paging) li a:hover, :where(.phs--classic .flex-control-paging) li a.flex-active { background: #f6891a; border-color: #f6891a; }

.phs--classic .flex-direction-nav a {
  position: absolute; top: 45%; z-index: 8; display: block; width: 40px; height: 40px; overflow: hidden; cursor: pointer;
  font-size: 0; text-decoration: none; opacity: 0; border-width: 2px; border-style: solid; border-radius: 5px;
  transition: all 200ms ease;
}
:where(.phs--classic .flex-direction-nav) a { border-color: #f6891a; }
.phs--classic .flex-direction-nav a::before {
  display: inline-block; width: 32px; height: 32px; margin: 2px; padding: 2px 12px; float: none; vertical-align: top;
  font-family: "FontAwesome"; font-size: 21px; line-height: 27px; border-radius: 5px; transition: all .3s ease-in-out;
  box-sizing: content-box;
}
:where(.phs--classic .flex-direction-nav) a::before { color: #fff; background-color: #f6891a; }
.phs--classic .flex-direction-nav a.flex-prev::before { content: "\f104"; }
.phs--classic .flex-direction-nav a.flex-next::before { content: "\f105"; }
.phs--classic .flex-direction-nav .flex-prev { left: -10px; }
.phs--classic .flex-direction-nav .flex-next { right: -10px; text-align: right; }
.phs--classic:hover .flex-direction-nav .flex-prev { left: 30px; opacity: 1; }
.phs--classic:hover .flex-direction-nav .flex-next { right: 30px; opacity: 1; }
@media (max-width: 1199px) {
  .phs--classic:hover .flex-direction-nav .flex-prev { left: 10px; }
  .phs--classic:hover .flex-direction-nav .flex-next { right: 10px; }
}
@media (max-width: 991px) { .phs--classic .flex-direction-nav { display: none; } }
@media (max-width: 480px) { .phs--classic .flex-control-nav { bottom: 4px; line-height: 0; } }

/* ---------------------------------------------------------------- szerokość „obok menu kategorii” (górna strefa motywu)
 * Jak dawny slider: lewą kolumnę zajmuje rozwinięte menu kategorii. */
.phs--w-beside { float: right; width: 100%; margin: 15px 0 0; }
@media (min-width: 992px) {
  .phs--w-beside { width: calc(100% - 220px); }
  /* widget okazji stoi po prawej – slider po lewej */
  .display-top-inner .container:has(.hotdeal-placement--slider-right) .phs--w-beside,
  .hotdeal-has-slider-right .phs--w-beside { float: left; }
}
@media (min-width: 1200px) {
  .phs--w-beside { width: calc(100% - 300px); margin-top: 30px; }
}

/* ---------------------------------------------------------------- dostępność */
.phs [data-phs-dot]:focus-visible, .phs [data-phs-prev]:focus-visible, .phs [data-phs-next]:focus-visible, .phs__play:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(0, 0, 0, .6); }
/* ograniczony ruch (ustawienie systemu): łagodne przenikanie zamiast ruchu i zoomu.
 * Podgląd w panelu (html.phs-motion) pokazuje pełne efekty, żeby było widać, co zobaczą inni klienci. */
@media (prefers-reduced-motion: reduce) {
  /* przeciąganie palcem / myszą to ruch sterowany przez klienta – zostaje */
  :root:not(.phs-motion) .phs:not(.is-dragging):not(.is-settling) .phs__slide { transform: none !important; clip-path: none !important; }
  :root:not(.phs-motion) .phs__slide.phs--t-slide, :root:not(.phs-motion) .phs__slide.phs--t-curtain { opacity: 0; }
  :root:not(.phs-motion) .phs__slide.is-active, :root:not(.phs-motion) .phs__slide.is-leaving { opacity: 1; }
  :root:not(.phs-motion) .phs__img { animation: none !important; }
  :root:not(.phs-motion) .phs__text > * { transform: none !important; }
}

/* Telefon i tablet w pionie: kropki pod zdjęciem (na niskim banerze zasłaniały treść), małe i okrągłe */
@media (max-width: 767px) {
  .phs--classic .flex-control-nav { position: static; padding-top: 10px; line-height: 0; }
  .phs--classic .flex-control-nav li { margin: 0 3px; }
  .phs--classic .flex-control-paging li a { width: 8px; height: 8px; border-radius: 999px; }
  .phs--classic .flex-control-paging li a.flex-active { width: 20px; }
}

/* Telefon: pasek nawigacji nowoczesnej skórki pod zdjęciem – na niskim banerze zasłaniał treść (kody, linki) */
@media (max-width: 767px) {
  .phs--modern .phs__bar {
    position: static; transform: none; justify-content: center; margin-top: 10px; padding: 0;
    background: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: #111;
  }
  .phs--modern .phs__dot { background: rgba(0, 0, 0, .18); }
  .phs--modern .phs__dot.is-active { background: #222; }
  .phs--modern .phs__dots--bars .phs__dot,
  .phs--modern .phs__dots--bars .phs__dot.is-active { width: 22px; background: rgba(0, 0, 0, .14); }
  .phs--modern .phs__dots--bars .phs__dot.is-done { background: rgba(0, 0, 0, .4); }
  .phs--modern .phs__dots--bars .phs__dot i { background: #222; }
  .phs--modern .phs__play { color: #111; background: rgba(0, 0, 0, .06); }
  .phs--modern .phs__count { opacity: .8; }
}

/* ---- Dopasowanie wysokości w rzędzie sekcji Kompozytora ----
 * Slider rośnie do wysokości kolumny (zdjęcia kadrowane od środka), a w kolumnie dopasowanej do niższego wzorca maleje. */
.pc-sec--stretch > .pc-sec-col .phs { height: 100%; display: flex; flex-direction: column; box-sizing: border-box; }
.pc-sec--stretch > .pc-sec-col .phs__viewport { flex: 1 1 auto; min-height: 0; }
.pc-sec--stretch > .pc-sec-col .phs--auto-h .phs__viewport { grid-template-rows: 100%; align-items: stretch; }
.pc-sec--stretch > .pc-sec-col .phs--auto-h .phs__img { height: 100%; object-fit: var(--pco-fit, var(--pcfit-fit, cover)); object-position: var(--pco-x, var(--pcfit-x, 50%)) var(--pco-y, var(--pcfit-y, 50%)); }