/* ============================================================
   SLICK — core (mehanika slidera, ne dirati)
   ============================================================ */
.slick-slider { position: relative; display: block; box-sizing: border-box; user-select: none; -webkit-touch-callout: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; }
.slick-list:focus { outline: none; }
.slick-list.dragging { cursor: pointer; cursor: hand; }
.slick-slider .slick-track, .slick-slider .slick-list { transform: translate3d(0, 0, 0); }
.slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; }
.slick-track:before, .slick-track:after { display: table; content: ""; }
.slick-track:after { clear: both; }
.slick-loading .slick-track { visibility: hidden; }
.slick-slide { display: none; float: left; height: 100%; min-height: 1px; text-align: center; }
.slick-slide img { display: inherit; }
.slick-slide.slick-loading img { display: none; }
.slick-slide.dragging img { pointer-events: none; }
.slick-initialized .slick-slide { display: block; }
.slick-loading .slick-slide { visibility: hidden; }
.slick-vertical .slick-slide { display: block; height: auto; }
.slick-arrow.slick-hidden { display: none; }

/* ============================================================
   SLICK — theme (loading, strelice, tačkice)
   ============================================================ */
.slick-loading .slick-list { background: #fff url("/img/preloader.gif") center center no-repeat; }
.slick-prev, .slick-next { position: absolute; top: 50%; z-index: 50; display: block; width: 20px; height: 20px; padding: 0; transform: translate(0, -50%); border: none; outline: none; background: transparent; color: transparent; font-size: 0; line-height: 0; cursor: pointer; }
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { outline: none; background: transparent; color: transparent; }
.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; }
.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: .25; }
.slick-prev:before, .slick-next:before { font-size: 20px; line-height: 1; opacity: .75; color: #666; }
.slick-prev { left: -25px; }
.slick-prev:before { content: "\2190"; }
.slick-next { right: -25px; }
.slick-next:before { content: "\2192"; }
.slick-dotted.slick-slider { margin-bottom: 30px; }
.slick-dots { position: absolute; bottom: -25px; display: block; width: 100%; margin: 0; padding: 0; list-style: none; text-align: center; }
.slick-dots li { position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 5px; padding: 0; cursor: pointer; }
.slick-dots li button { display: block; width: 20px; height: 20px; padding: 5px; border: 0; outline: none; background: transparent; color: transparent; font-size: 0; line-height: 0; cursor: pointer; }
.slick-dots li button:hover, .slick-dots li button:focus { outline: none; }
.slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; }
.slick-dots li button:before { content: "\2022"; position: absolute; top: 0; left: 0; width: 20px; height: 20px; font-size: 6px; line-height: 20px; text-align: center; opacity: .25; color: #000; }
.slick-dots li.slick-active button:before { opacity: .75; color: #000; }

/* ============================================================
   GALERIJA PROIZVODA (v6: .product-photo .banner-slider)
   thumbnaili (vertikalno, levo) + glavna slika (desno)
   ============================================================ */
.slick-gallery img { max-width: 100%; }
.slick-gallery ul, .slick-gallery ul li { margin: 0; padding: 0; list-style-type: none; }
.thumbnail-image { min-width: 50px; min-height: 50px; aspect-ratio: 1 / 1; }

.banner-slider .slider.slider-for { float: left; z-index: 0; width: 100%; max-width: 84%; min-width: 400px; min-height: 400px; padding-right: 0; }
.banner-slider .slider.slider-nav { float: left; z-index: 0; width: 100%; max-width: 16%; height: 500px; overflow: hidden; }

.slider-banner-image { height: auto; }
.slider-banner-image img { aspect-ratio: 1 / 1; height: unset !important; width: unset !important; object-fit: cover; cursor: pointer; }
.slider-banner-image.slick-slide.slick-current.slick-active a:focus { outline: 0; }

.slider-nav .slick-slide { position: relative; overflow: hidden; border-radius: 8px; text-align: center; }
.slider-nav .slick-slide span { display: block; padding: 5px 0; font-size: 14px; }
.slider-nav .slick-slide.slick-current span { color: var(--theme-color); }
.slider-nav .slick-slide.thumbnail-image .thumbImg { max-width: 80%; }
.slider-nav .slick-slide.thumbnail-image .thumbImg img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid #ebebeb; cursor: pointer; }
.slider-banner-image img, .slider-nav .slick-slide.thumbnail-image .thumbImg img { border-radius: 8px; }
.slider-nav .thumbnail-image.slick-slide .thumbImg { position: relative; opacity: .5; }
.slider-nav .thumbnail-image.slick-slide .thumbImg:hover { opacity: 1; }
.slider-nav .thumbnail-image.slick-slide.slick-current.slick-active .thumbImg { position: relative; opacity: 1; }
.slider-nav .thumbnail-image.slick-slide.slick-current.slick-active img { border: 1px solid var(--theme-color); }

.slick-vertical .slick-slide:active, .slick-vertical .slick-slide:focus, .slick-arrow:hover, .slick-arrow:focus { border: 0; outline: 0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media screen and (max-width: 991px) {
    .banner-slider .slider.slider-for, .banner-slider .slider.slider-nav { float: none; max-width: 100%; }
    .banner-slider .slider.slider-for { padding-right: 0; }
    .banner-slider .slider.slider-nav { height: auto; }
    .slider-banner-image { height: 500px; }
    .slider.slider-nav.thumb-image { padding: 10px 30px 0; white-space: nowrap; }
    .slider-nav .slick-slide span { padding: 5px 0; }
    .slick-arrow { width: 30px; height: 30px; top: 50%; bottom: 0; padding: 0; transform: translateY(-50%) rotate(-90deg); }
    .slick-prev { left: 0; right: unset; }
    .slick-next { left: unset; right: 0; background-color: transparent; }
    .thumbnail-image.slick-slide { display: inline-block; float: none; min-width: 75px; padding: 0 5px; }
    .slider-nav { display: none; }
}

@media screen and (max-width: 767px) {
    .slider-banner-image { height: 400px; }
    .slider.slider-nav.thumb-image { margin: 10px 0 0; padding: 0 20px 0; }
    .slider-nav .slick-slide.thumbnail-image .thumbImg { max-width: 140px; height: 80px; }
    .slider-nav .slick-slide span { font-size: 12px; white-space: normal; }
}

@media screen and (max-width: 580px) {
    .slider-banner-image { height: 340px; }
}

@media screen and (max-width: 480px) {
    .slider-banner-image { height: 280px; }
}

@media screen and (min-width: 980px) and (max-width: 1052px) {
    .banner-slider .slider.slider-nav { max-width: min-content; height: 400px; padding: 0; }
}