/* productPage.css — style karty produktu (mobile slider + PhotoSwipe + desktop video) */
/* Załadowane bezpośrednim <link> z productPage.tpl. Nie używa wt_load_css. */

/* Wrapper relative dla overlay counter + arrows */
.srs-pp-photo-wrap { position: relative; }

/* Slide — natural aspect od img (wt_thumb_image generuje 650x650 czyli 1:1) */
.pr-carousel .pp-slide {
  display: block;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  line-height: 0;
}
.pr-carousel .pp-slide picture {
  display: block;
  width: 100%;
}
.pr-carousel .pp-slide picture img,
.pr-carousel .pp-slide > img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* Play overlay na video-slide */
.pp-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.pp-play-icon { width: 72px; height: 72px; opacity: 0.95; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4)); }

/* Counter pill (Julie Vos style) — tylko mobile */
.pp-counter {
  position: absolute;
  bottom: 14px;
  left: 14px;
  background: rgba(60, 60, 60, 0.75);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  z-index: 10;
  pointer-events: none;
  font-family: 'Montserrat', sans-serif;
  display: none;
}
.pr-carousel.slick-initialized ~ .pp-counter { display: block; }

/* Strzalki bottom-right (Julie Vos style) — tylko mobile po slick init */
.pr-carousel .pp-arrow {
  position: absolute;
  bottom: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #81d8d0;
  border: 1px solid #81d8d0;
  color: #fff;
  display: flex !important;
  align-items: center;
  justify-content: center;
  z-index: 10;
  cursor: pointer;
  padding: 0;
  font-size: 1rem;
  transition: opacity 0.15s, background 0.15s;
}
.pr-carousel .pp-arrow-prev { right: 62px; }
.pr-carousel .pp-arrow-next { right: 14px; }
.pr-carousel .pp-arrow.slick-disabled { opacity: 0.35; cursor: default; }
.pr-carousel .pp-arrow:hover { background: #6cc4bc; border-color: #6cc4bc; }

/* Ukrycie domyslnych elementow Slick'a (gdyby dots się pojawiały) */
.pr-carousel .slick-dots { display: none !important; }

/* Conditional show/hide mobile/desktop dla video markup */
.pp-only-mobile { display: block; }
.pp-only-desktop { display: none; }

/* Desktop — fix sztywnego iframe video */
@media (min-width: 960px) {
  .pp-only-mobile { display: none; }
  .pp-only-desktop { display: block; }

  /* Counter + strzalki tylko mobile */
  .pp-counter, .pr-carousel .pp-arrow { display: none !important; }

  .pr-video {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    aspect-ratio: 9 / 16;
  }
  .pr-video iframe,
  .pr-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    max-height: none;
  }

  /* Desktop: wylacz flex row, slidy jako block centered + max-width */
  #srs-pp-photo.pr-carousel {
    display: block;
    margin-left: 0;
    margin-right: 0;
    text-align: center;
  }
  .pr-carousel .pp-slide,
  .pr-carousel .pp-only-desktop {
    display: block;
    flex: none;
    width: 100%;
    max-width: 650px;
    margin: 0 auto 1.5rem;
    padding: 0;
    box-sizing: border-box;
  }
  .pr-carousel .pp-only-desktop.pr-video {
    max-width: 500px;
  }
}

/* PhotoSwipe — kontener video w modalu (iframe CF lub <video> MP4) */
/* Bez prefixu .pswp__content — PhotoSwipe v5 wstrzykuje HTML do .pswp__zoom-wrap */
.pp-pswp-video {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #000;
}
.pp-pswp-video iframe,
.pp-pswp-video video {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border: 0;
  display: block;
  background: #000;
  object-fit: contain;
}
/* Zapewnij ze PhotoSwipe content wrapper na slidzie video tez wypelnia ekran */
.pswp__item:has(.pp-pswp-video) .pswp__zoom-wrap,
.pswp__item:has(.pp-pswp-video) .pswp__content {
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
}