/* --- DOMYŚLNE STYLE WTYCZKI --- */
.images.nickx_product_images_with_video span.nickx-popup,
.show_lightbox span.nickx-popup_trigger {
  background-image: url('expand.svg');
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
  position: absolute;
  width: 30px;
}

.images.nickx_product_images_with_video span.nickx-popup {
  bottom: 10px;
  display: none;
  padding: 15px 0;
  right: 13px;
  z-index: 10;
}

.show_lightbox span.nickx-popup_trigger {
  display: block;
  overflow: hidden;
  padding-top: 25px;
  z-index: 2;
}

div.overlay-div {
  display: none;
}

.show_lightbox .nswiper-slide-active span.nickx-popup,
.tc_video_slide.nswiper-slide-active div.overlay-div {
  display: block;
}

.nswiper {
  width: 100%;
}

.nswiper.nickx-slider-for {
  height: 80%;
}

.nswiper.nickx-slider-nav {
  height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
}

.nickx_product_images_with_video.v-left .nswiper.nickx-slider-nav,
.nickx_product_images_with_video.v-right .nswiper.nickx-slider-nav {
  height: 80%;
  width: 120px;
  padding: 0;
  max-height: 430px;
}

.nickx_product_images_with_video.v-left,
.nickx_product_images_with_video.v-right {
  display: flex;
  flex-direction: row-reverse;
  gap: 10px;
}

.nickx_product_images_with_video.v-right {
  flex-direction: row !important;
}

.nswiper.nickx-slider-nav .nswiper-slide {
  max-height: 210px;
  max-width: 210px;
}

.grid div#nickx-gallery .nswiper-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(102px, 0fr));
  grid-gap: 5px;
}

.nswiper-slide {
  align-items: center;
  display: flex;
  justify-content: center;
  text-align: center;
  user-select: none;
}

.nswiper-slide-active iframe {
  display: block !important;
}

.nswiper-slide img,
.nswiper-slide video,
.nswiper-slide iframe {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nickx-slider-nav .nswiper-slide {
  opacity: 0.7;
}

.nickx-slider-nav .nswiper-slide-thumb-active,
.nickx-slider-nav .nickx-thumbnail:hover {
  opacity: 1;
}

.video-thumbnail {
  position: relative;
  cursor: pointer;
}

.nswiper-button-next,
.nswiper-button-prev {
  padding: 30px 20px;
  z-index: 999 !important;
  pointer-events: auto !important;
}

.nswiper-vertical .thumb_arrow {
  top: unset;
  transform: rotateZ(90deg);
}

.nswiper-vertical .nswiper-button-next.thumb_arrow {
  bottom: -9px;
  right: 0px;
  position-area: bottom;
}

.nswiper-vertical .nswiper-button-prev.thumb_arrow {
  position-area: top;
  top: 15px;
  left: 0;
}

.grid div#nickx-gallery .thumb_arrow {
  display: none;
}

.thumb_arrow {
  padding: 10px;
  font-size: 10px;
}

.thumb_arrow:after {
  font-size: 20px !important;
  font-weight: bold;
}

.video-thumbnail .video_icon_img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  z-index: 1;
}

.nickx-slider-for {
  position: relative;
}

.zoomContainer {
  z-index: 1 !important;
}

.nickx-slider-for .zoomContainer {
  top: 0 !important;
  left: 0 !important;
}

.admin-bar .fancybox-container {
  z-index: 999999;
}

.single-product.woocommerce span.onsale {
  z-index: 9;
}

.main_arrow,
.thumb_arrow {
  opacity: 0;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}

.nickx-slider-for:hover .main_arrow,
.nickx-slider-nav:hover .thumb_arrow {
  opacity: 1;
}

.nickx_product_images_with_video:not(:has(.nswiper.nickx-slider-nav .nswiper-slide:nth-child(2))) .thumb_arrow,
.nickx_product_images_with_video:not(:has(.nswiper.nickx-slider-nav .nswiper-slide:nth-child(2))) .main_arrow {
  display: none;
}

.images.nickx_product_images_with_video {
  max-width: 650px;
}

.images.nickx_product_images_with_video .fluid-width-video-wrapper {
  padding-top: 100% !important;
}

@media (max-width:767px) {

  .nickx_product_images_with_video.yes.v-left,
  .nickx_product_images_with_video.yes.v-right {
    flex-direction: column;
  }

  .nickx_product_images_with_video.yes.v-left .nswiper.nickx-slider-nav,
  .nickx_product_images_with_video.yes.v-right .nswiper.nickx-slider-nav {
    width: 100%;
    height: 20%;
    padding: 10px 0;
  }
}

/* --- NASZE MODYFIKACJE (FORK) --- */

/* 1. Ukrycie ikony lupki na stałe */
.images.nickx_product_images_with_video span.nickx-popup,
.show_lightbox span.nickx-popup_trigger {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 2. Zmiana kursora na zdjęciu, aby sugerował klikalność */
.nickx-slider-for .nswiper-slide img {
  cursor: pointer;
}

/* 3. Ustawienie slidera głównego jako punktu odniesienia */
.nickx-slider-for {
  position: relative !important;
}

/* 4. Pozycjonowanie i STYLIZACJA badge'a 'Promocja' */
.nickx-slider-for .onsale {
  /* --- POZYCJA --- */
  position: absolute !important;
  top: 15px !important;
  left: 15px !important;
  right: auto !important;
  z-index: 20 !important;
  margin: 0 !important;

  /* --- WYGLĄD (Czarne tło / Biały tekst) --- */
  background: #000000 !important;
  color: #ffffff !important;

  /* Formatowanie kształtu */
  padding: 6px 12px !important;
  border-radius: 0 !important;
  border: none !important;

  /* Formatowanie tekstu */
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase;
  line-height: 1.2 !important;

  /* Reset domyślnych stylów WooCommerce */
  min-width: auto !important;
  min-height: auto !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* --- 5. MINIATURKI: WSPÓLNE STYLE --- */
.nickx-slider-nav .nswiper-slide {
  opacity: 1 !important;
  /* Pełna widoczność */
  transition: none !important;
}

/* --- 6. MINIATURKI: DESKTOP (Pionowe, rozciągnięte) --- */
@media (min-width: 768px) {

  /* Układ kontenera */
  .nickx_product_images_with_video.v-left {
    position: relative !important;
    display: block !important;
    padding-left: 135px !important;
    /* Miejsce na pasek */
    min-height: 450px;
  }

  /* Slider główny */
  .nickx-slider-for {
    width: 100% !important;
    height: auto !important;
  }

  /* Pasek miniaturek - przyklejony i rozciągnięty */
  .nickx_product_images_with_video.v-left .nswiper.nickx-slider-nav {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 120px !important;
    height: 100% !important;
    max-height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .nickx-slider-nav .nswiper-wrapper {
    height: 100% !important;
  }

  /* Wysokie proporcje (3:4) tylko na desktopie */
  .nickx-slider-nav .nswiper-slide {
    aspect-ratio: 3 / 4 !important;
    height: auto !important;
    width: 100% !important;
    max-height: none !important;
    max-width: none !important;
  }

  .nickx-slider-nav .nswiper-slide img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
  }
}

/* --- 7. MINIATURKI: MOBILE (Niskie, zgrabne) --- */
@media (max-width: 767px) {

  /* Resetujemy style kontenera paska na mobile */
  .nswiper.nickx-slider-nav {
    height: auto !important;
    padding: 10px 0 !important;
  }

  /* Wymuszamy małą wysokość */
  .nickx-slider-nav .nswiper-slide {
    aspect-ratio: auto !important;
    height: 80px !important;
    /* Stała wysokość na telefonie */
    width: auto !important;
    max-width: 80px !important;
  }

  .nickx-slider-nav .nswiper-slide img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
  }
}

/* --- FIX NA OGROMNE MINIATURY (Układ sztywny pod spodem) --- */

/* 1. Kontener paska miniatur */
.nickx-slider-nav {
    margin-top: 15px !important; /* Odstęp od głównego zdjęcia */
    height: auto !important;     /* Wysokość dopasowana do zawartości */
    max-height: none !important;
    width: 100% !important;
}

/* 2. Wrapper wewnątrz paska */
.nickx-slider-nav .nswiper-wrapper {
    /* Upewniamy się, że układa się w poziomie */
    display: flex !important;
    flex-direction: row !important;
    transform: translate3d(0,0,0); /* Wspomaga wydajność */
}

/* 3. Pojedyncza miniatura (SLAJD) - TU USTAVIAMY ROZMIAR NA SZTYWNO */
.nickx-slider-nav .nswiper-slide {
    width: 80px !important;  /* SZEROKOŚĆ NA SZTYWNO (zmień na np. 100px jeśli wolisz większe) */
    height: 80px !important; /* WYSOKOŚĆ NA SZTYWNO (musi być taka sama lub proporcjonalna) */
    opacity: 0.5 !important;
    transition: opacity 0.3s;
    flex-shrink: 0 !important; /* Zapobiega ściskaniu */
    margin-right: 10px !important; /* Odstęp zdefiniowany też w JS, ale warto mieć w CSS */
    border: 1px solid transparent; /* Rezerwacja miejsca na ramkę */
}

/* Aktywna miniatura */
.nickx-slider-nav .nswiper-slide.nswiper-slide-thumb-active {
    opacity: 1 !important;
    border-color: #000 !important; /* Czarna ramka aktywnej miniatury */
}

/* 4. Obrazek wewnątrz miniatury */
.nickx-slider-nav .nswiper-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Ładne wypełnienie kwadratu */
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 5. Główne zdjęcie (dla pewności) */
.nickx-slider-for {
    margin-bottom: 0 !important; 
    width: 100% !important;
}

/* 6. Mobile vs Desktop - jeśli chcesz inne rozmiary na telefonie */
@media (max-width: 767px) {
    .nickx-slider-nav .nswiper-slide {
        width: 60px !important;  /* Mniejsze na telefonie */
        height: 60px !important;
    }
}

/* --- OPTYMALIZACJA WYDAJNOŚCI (CLS) --- */

/* Rezerwacja miejsca na główny slider PRZED załadowaniem JS/Obrazka */
.nickx-slider-for {
    /* Ustaw aspect-ratio zgodne z Twoimi zdjęciami. 
       Jeśli masz zdjęcia 3:4 (pionowe), wpisz 3/4. 
       Jeśli kwadraty, wpisz 1/1. */
    aspect-ratio: 3/4; 
    
    /* Zabezpieczenie: minimalna wysokość, żeby nie było 0px */
    min-height: 300px; 
    
    /* Zapobieganie skokom */
    overflow: hidden;
    background-color: #f7f7f7; /* Szare tło zanim wczyta się zdjęcie */
}

/* To samo dla slajdów */
.nickx-slider-for .nswiper-slide {
    height: 100% !important;
}

.nickx-slider-for .nswiper-slide img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover;
}

/* Miniaturki też potrzebują stałego miejsca */
.nickx-slider-nav {
    min-height: 80px; /* Tyle ile ustaliliśmy wcześniej na sztywno */
}

/* --- WYMUSZENIE PIONOWEGO WIDEO (SHORTS/REELS) --- */

/* Reset dla wrapperów, które mogą narzucać 16:9 */
.images.nickx_product_images_with_video .fluid-width-video-wrapper {
    padding-top: 0 !important;
    height: 100% !important;
    width: 100% !important;
}

/* Stylizacja samego iframe/video */
.product_video_iframe {
    display: block;
    width: 100% !important;
    /* Height jest nadawany przez JS, ale dla bezpieczeństwa: */
    min-height: 100%; 
    object-fit: cover; /* Dla wideo HTML5 (lokalnego) */
    border: none;
}

/* Specyficznie dla Mobile - dopasowanie kontenera slajdu */
@media (max-width: 767px) {
    .tc_video_slide.nswiper-slide {
        height: auto !important; /* Pozwalamy JS ustawić wysokość */
        display: flex;
        align-items: center;
        justify-content: center;
        background: #000; /* Czarne tło, żeby nie było białych pasów przy ładowaniu */
    }
    
    /* Ukrycie paska tytułu YouTube (opcjonalnie, zależy od API) */
    .product_video_iframe {
        margin-top: 0;
    }
}

/* --- FIX: PIONOWE WIDEO W LIGHTBOXIE (FANCYBOX) NA MOBILE --- */

@media (max-width: 767px) {
    /* 1. Kontener wideo w lightboxie */
    .nfancybox-slide--video .nfancybox-content,
    .nfancybox-slide--iframe .nfancybox-content {
        /* Wymuszamy szerokość prawie całego ekranu */
        width: 90% !important; 
        
        /* Wymuszamy proporcje pionowe (9:16) - klucz do sukcesu */
        aspect-ratio: 9 / 16 !important; 
        
        /* Resetujemy wysokość, żeby aspect-ratio zadziałało */
        height: auto !important; 
        
        /* Usuwamy ograniczenia maksymalne */
        max-width: none !important;
        max-height: 90vh !important; /* Żeby nie wyszło poza ekran w pionie */
        
        /* Czarne tło i brak paddingu */
        padding: 0 !important;
        background: #000 !important;
        overflow: hidden !important;
    }

    /* 2. Sam iframe (YouTube) wewnątrz kontenera */
    .nfancybox-iframe, 
    .nfancybox-video {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
    }
    
    /* 3. Przycisk zamknięcia (X) */
    /* Upewniamy się, że nie zniknie pod wideo lub nie wyjedzie poza ekran */
    .nfancybox-button--close {
        background: rgba(0, 0, 0, 0.5) !important;
        border-radius: 50%;
        top: 10px !important;
        right: 10px !important;
    }
}