/* Quick.Cms.Ext v6.x slider stylesheet */
/* Quick.Slider */

/* GLOBAL — slajd absolute wymaga wysokości rodzica, inaczej treść „wjeżdża” pod karuzelę */
.quick-slider{
  position:relative;
  margin:0 auto;
  overflow:hidden;
  z-index:1;
  isolation:isolate;
  min-height:240px;
  touch-action:pan-y;
}
.quick-slider ul{
  position:relative;
  padding:0;
  margin:0;
  list-style:none;
  min-height:240px;
}
.quick-slider-slide{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  display:none;
  text-align:left;
  overflow:hidden;
}
.quick-slider-slide:first-child{display:block;}
.quick-slider-nav-arrows{z-index:5;position:absolute;top:50%;transform:translateY(-50%);float:right;display:block;min-height:60px;height:40%;margin:0;padding:0px 10px;border:0;background:rgba(0,0,0,0.4);opacity:0.5;transition:all 0.3s ease;}
.quick-slider-nav-arrows:hover{opacity:1;}
.quick-slider-nav-arrows:before{content:"";display:block;position:relative;top:50%;transform:translateY(-50%);width:32px;height:32px;background:url('img/arrows.png') no-repeat 0 0;}
.quick-slider-nav-arrows-prev:before{background-position:0 -32px;}
.quick-slider-nav-arrows-next{right:0;}
.quick-slider-nav-arrows-prev{left:0;}
.quick-slider-nav-dots-wrapper{position:absolute;bottom:1.5rem;width:100%;list-style:none;text-align:center;}
.quick-slider-nav-dots-wrapper li{display:inline-block;}
.quick-slider-nav-dots{display:inline-block;width:12px;height:12px;margin:0 12px 0 0;background:rgba(0,0,0,0.5);border-radius:50%;color:transparent;font-size:0.5em;}
.quick-slider-nav-dots.active, .quick-slider-nav-dots:hover{background:#fff;transition:all 0.3s ease;color:transparent;}
.quick-slider-slide .description a{color:inherit;}
.quick-slider-slide .description a:hover{text-decoration:none;}
div[id^="slider-"] > ul > li{display:none;} /* hide slides (and descriptions) before slider images will be loaded and everything is set */

/* CUSTOM - TOP SLIDER */
#slider-1{
  position:relative;
  clear:both;
  display:none;
  min-height:280px;
  height:auto;
  overflow:hidden;
  color:#fff;
  z-index:1;
  contain:layout paint;
  will-change:transform;
}
#slider-1 .quick-slider,
#slider-1 .quick-slider > ul{
  min-height:280px;
}
@media screen and (min-width:900px){
  #slider-1,
  #slider-1 .quick-slider,
  #slider-1 .quick-slider > ul{
    min-height:360px;
  }
}
#slider-1 li.img{overflow:hidden;line-height:0;}
#slider-1 li.img img{width:100%;height:auto;display:block;}
#slider-1 li.no-img{min-height:280px;}

/* STACKING slajdów przez CSS grid — wszystkie slajdy w tej samej komórce (nakładają się),
   kontener = wysokość najwyższego slajdu. Eliminuje pionowe układanie i skoki wysokości
   podczas przejścia fade (niezależnie od inline-height ustawianego przez JS). */
#slider-1{
  height:auto !important; /* neutralizuje inline height ustawiany przez skrypt slidera */
}
#slider-1 > ul{
  display:grid !important;
  grid-template-columns:100%;
  grid-auto-rows:auto;
  height:auto !important;
  min-height:0 !important;
  align-items:stretch;
  position:relative;
}
/* Wszystkie slajdy w tej samej komórce siatki — nakładają się, kontener = najwyższy slajd */
#slider-1 > ul > li{
  grid-column:1 !important;
  grid-row:1 !important;
  position:relative !important;
  left:auto !important;
  top:auto !important;
  width:100% !important;
  height:auto !important;
  margin:0 !important;
}
@media screen and (max-height:400px){
  #slider-1{max-height:50vh;}
}

/* CUSTOM - WIDGET SLIDER */
/* Stary SVG overlay (cache) — bez foreignObject w markup */
.slider-caption-svg{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:3;
}
.slider-caption-svg *{
  text-shadow:none !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Nakładka HTML dla gości — ta sama geometria co edycja inline; współrzędne względem slajdu (li), nie viewport */
.slider .slider-caption--overlay.description.slider-caption{
  pointer-events:none;
  text-shadow:none !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Tekst opisu: bez tła — kolor klasami; pozycja inline (left/top %, translate -50%) z panelu */
/* Dla admina z edycją inline - HTML opis pozostaje widoczny */
.slider .description.slider-caption,
.slider .slider-slide-description.description{
  z-index:3;
  position:absolute;
  min-width:120px;
  max-width:min(92%, 42rem);
  padding:0;
  margin:0;
  background:none;
  line-height:1.35;
  box-sizing:border-box;
  text-align:center;
  font-weight:300;
}
/* Dla zwykłych użytkowników - ukryj zduplikowany HTML opis (gdy był osobno od SVG); widoczna nakładka: .slider-caption--overlay */
.slider .description.slider-caption:not(.slider-slide-description--admin-editable):not(.slider-caption--overlay){
  display:none;
}
.slider .description.slider-caption p,
.slider .slider-slide-description.description p{
  font-weight:300;
}
.slider .description.slider-caption h1,
.slider .description.slider-caption h2,
.slider .description.slider-caption h3{
  margin:0.35em 0;
  font-weight:300;
  line-height:1.2;
  color:inherit;
}
.slider .description.slider-caption strong,
.slider .description.slider-caption b,
.slider .slider-slide-description.description strong,
.slider .slider-slide-description.description b{
  font-weight:700;
}
.slider .description.slider-caption h1{ font-size:1.75em; }
.slider .description.slider-caption h2{ font-size:1.4em; }
.slider .description.slider-caption h3{ font-size:1.15em; }
/* Mobile: ukryj opis slidera (caption HTML + SVG overlay) */
@media screen and (max-width:640px){
  .slider .description.slider-caption,
  .slider .slider-slide-description.description,
  .slider-caption-svg,
  .slider .slider-caption--overlay{
    display:none !important;
  }
}
.slider .slider-caption--text-white{ color:#fff; }
.slider .slider-caption--text-black{ color:#111; }
#slider-1 .slider-caption--text-black{ color:#111 !important; }

.widget.type-3 .slider{clear:both;display:none;color:#fff;text-align:center;}
.widget.type-3 .quick-slider,
.widget.type-3 .quick-slider > ul{min-height:200px;}
.widget.type-3 .slider li.no-img{min-height:150px;}
.widget.type-3 .slider .description.slider-caption{ font-size:0.875em; }
/* subpages slider */
.pages-slider li{line-height:1.25em;} /* you can also set height here */
.pages-slider .image{float:left;padding-right:1em;}
.pages-slider .description{padding:0.5em 0;}
.pages-slider li.no-img .description{width:100%;}
.pages-slider .quick-slider-nav-arrows{top:20%;}
.pages-slider .quick-slider-nav-dots-wrapper{bottom:0px;text-align:center;}

@media screen and (max-width:767px){
  .quick-slider-nav-arrows{display:none;}
  .slick-next,
  .slick-prev{display:none !important;}
  .slider-slide-description__body{display:none;}
  .widget .quick-slider,
  .widget-section__inner .quick-slider{
    max-width:100%;
    overflow:hidden;
  }
  .widget .quick-slider ul,
  .widget-section__inner .quick-slider ul{
    max-width:100%;
  }
  .widget .quick-slider-slide,
  .widget-section__inner .quick-slider-slide{
    max-width:100%;
    box-sizing:border-box;
  }
}

@media print{
  /* PRINT STYLES */
  #slider-1, .quick-slider img, .quick-slider-nav-arrows, .quick-slider-nav-dots{display:none;}
}

/* PLUGINS */

/* PROMOTED PAGES */
/* 3 klasy → wyższa specyficzność niż .pages-gallery{display:grid} — wymusza blokowy układ dla Slick */
.widget.type-27 .promoted-slider.slick-slider,
.widget.type-35 .bestsellers-slider.slick-slider{
  display:block !important;
  gap:0 !important;
  grid-template-columns:none;
}
.widget.type-27 .promoted-slider:not(.slider-free){overflow:hidden;}
.widget.type-27 .slick-list{padding-bottom:20px;}
.widget.type-27 .slick-slide{box-sizing:border-box;padding:0 0.4rem;}
.widget.type-35 .slick-slide{box-sizing:border-box;padding:0 0.4rem;}
@media screen and (max-width:460px){
  .widget.type-27{width:98%;}
}

/* SUBPAGES SLIDER (type-36) */
.widget.type-36 .subpages-slider.slick-slider,
.widget.type-35 .bestsellers-slider.slick-slider{
  display:block !important;
  gap:0 !important;
}
.widget.type-36 .subpages-slider{overflow:visible;padding-bottom:35px;}
.widget.type-36 .slick-list{overflow:hidden;padding-bottom:0;}
.widget.type-36 .slick-dots{bottom:0;}
.widget.type-36 .slick-slide{box-sizing:border-box;padding:0 0.4rem;}

/* COMMENTS_EXT */
.comments-slider > ul > li{min-height:100px;line-height:1.25rem;}
.comments-slider .quick-slider-nav-dots-wrapper{right:0px;top:0px;width:auto;}

/* PAGE IMAGES SLIDER — min. wysokość zanim obrazki (np. ~100KB) się wczytają; img blok żeby list liczył szerokość */
.images-slider-5{clear:both;margin-bottom:20px;}
.images-slider-6{clear:both;padding:1rem 0;}
[class*="images-slider-"] ul{position:relative;}
[class*="images-slider-"] .quick-slider{
  min-height:200px;
}
[class*="images-slider-"] .quick-slider ul{
  min-height:200px;
}
[class*="images-slider-"] .quick-slider-slide{float:left;position:relative;width:auto;padding:0 10px;display:block;}
[class*="images-slider-"] .quick-slider-slide img{
  display:block;
  max-width:100%;
  height:auto;
}
[class*="images-slider-"] .quick-slider-slide p{z-index:3;position:absolute;bottom:0;max-width:70%;padding:5px 10px;text-align:left;background:rgba(0,0,0,0.3);line-height:1.25em;color:white;font-size:0.75em;}

/* RELATED PAGES */
#pages-related .pages-slider{margin-top:1em;padding-bottom:1em;}

/* Plynnosc sliderow produktow (slick) — akceleracja GPU podczas gestu */
.subpages-slider .slick-track,
.promoted-slider .slick-track,
.bestsellers-slider .slick-track{
  will-change:transform;
  backface-visibility:hidden;
}
.subpages-slider .slick-list,
.promoted-slider .slick-list,
.bestsellers-slider .slick-list{
  -webkit-overflow-scrolling:touch;
}

/* ==========================================================================
   Slidery produktow — plynne przewijanie zamiast skoku o caly slajd.
   Wlaczane klasa .slider-free (patrz $config['products_slider_free_scroll']).

   Model jak w galeriach Apple: kafelek ma STALA szerokosc, a liczba widocznych
   kafelkow wynika z szerokosci ekranu. Dzieki temu kolejny kafelek zawsze
   wystaje zza krawedzi i widac, ze jest co przewijac.
   Swiadomie bez zmiennej "ile na ekran" w @media — regula bazowa ma wyzsza
   specyficznosc niz zapytanie medialne i nadpisywala je.
   ========================================================================== */
.slider-free,
.pages-gallery.slider-free,
.widget .pages-gallery.slider-free,
.widget-section__inner .pages-gallery.slider-free{
  --slider-free-gap: 1.25rem;
  --slider-free-card: clamp( 16rem, 82vw, 23.75rem );
  position:relative;
  display:flex !important;
  flex-wrap:nowrap !important;
  grid-template-columns:none !important;
  gap:var(--slider-free-gap) !important;
  row-gap:var(--slider-free-gap) !important;
  /* Pelna szerokosc okna: tor wychodzi poza kolumne tresci, a kafelki startuja
     rowno z trescia. --vw ustawia skrypt (100vw bez paska przewijania). */
  --slider-free-gutter: calc( max( ( var( --vw, 100vw ) - var( --layout-max, 1400px ) ) / 2, 0px ) + var( --layout-pad-x, 1rem ) );
  width:var( --vw, 100vw ) !important;
  max-width:var( --vw, 100vw ) !important;
  margin:0 0 0 calc( 50% - var( --vw, 100vw ) / 2 );
  padding:2px var(--slider-free-gutter) .75rem;
  scroll-padding-left:var(--slider-free-gutter);
  overflow-x:auto !important;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  /* proximity, bo twarde przyciaganie potrafi walczyc z wlasna animacja strzalek;
     na telefonie (nizej) zostaje mandatory, bo tam prowadzi palec */
  scroll-snap-type:x proximity;
  /* auto, bo animacje strzalek prowadzi skrypt — natywne smooth dublowalo ruch */
  scroll-behavior:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  /* Podpowiedz dla przegladarki: ten kontener bedzie przewijany */
  will-change:scroll-position;
}
.slider-free::-webkit-scrollbar{ display:none; }
.slider-free > *,
.pages-gallery.slider-free > *,
.widget .pages-gallery.slider-free > *,
.widget-section__inner .pages-gallery.slider-free > *{
  flex:0 0 var(--slider-free-card) !important;
  width:var(--slider-free-card) !important;
  max-width:none !important;
  min-width:0;
  margin:0 !important;
  scroll-snap-align:start;
}
/* Ekrany, na ktorych 23.75rem to i tak za duzo na dwa kafelki obok siebie */
@media (min-width:768px){
  .slider-free,
  .pages-gallery.slider-free,
  .widget .pages-gallery.slider-free,
  .widget-section__inner .pages-gallery.slider-free{
    --slider-free-card: 23.75rem;
  }
}
@media (max-width:767px){
  .slider-free,
  .pages-gallery.slider-free,
  .widget .pages-gallery.slider-free,
  .widget-section__inner .pages-gallery.slider-free{
    scroll-snap-type:x mandatory;
  }
}

/* Strzalki sterujace — pasek NAD torem, wyrownany do prawej krawedzi tresci */
.slider-free-wrap{ position:relative; }
.slider-free-nav{
  display:flex;
  justify-content:flex-end;
  gap:.5rem;
  margin:0 0 .85rem;
}
.slider-free-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  width:2.5rem;
  height:2.5rem;
  padding:0;
  border:1px solid var(--color-divider);
  border-radius:var(--radius-pill);
  background:var(--color-white);
  color:var(--color-secondary);
  font-size:1.25rem;
  line-height:1;
  cursor:pointer;
  transition:opacity .15s ease, background .15s ease, border-color .15s ease;
}
.slider-free-arrow:hover:not([disabled]){
  border-color:var(--color-primary);
  color:var(--color-primary);
}
.slider-free-arrow[disabled]{
  opacity:.35;
  cursor:default;
  pointer-events:none;
}
@media (max-width:767px){
  .slider-free-nav{ margin-bottom:.6rem; }
  .slider-free-arrow{ width:2.25rem; height:2.25rem; font-size:1.1rem; }
}