.tns-nav {
  text-align: center;
  margin: 10px 0;
 position: absolute;
  bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    width: 80%;
z-index:1000;
}
.tns-nav > [aria-controls] {
  flex: 1;
  width: 9px;
  height: 3px;
  padding: 0;
  margin: 0 2px;
  border-radius: 0%;
  background: #f9f7f0;
  border: 0;
  transition: background-color 0.3s;

}
.tns-nav > .tns-nav-active { background: #999; }
.tns-lazy-img {
    display: none;
}

.peek-it {
  animation: peek-slider 0.8s ease-out;  
}

@keyframes peek-slider {
}


/* DESKTOP HOVER SLIDER */
.desktop-hover-slider {
    position: relative;
    width: 100%;
    cursor: crosshair; /* Sugeruje interakcję */
    overflow: hidden;
}

.desktop-hover-slider .hover-slide-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
    pointer-events: none; /* Żeby element nie przeszkadzał w detekcji myszki kontenerowi */
}

/* Pierwsze zdjęcie musi być relative, żeby nadawać wysokość całemu wrapperowi */
.desktop-hover-slider .hover-slide-item:first-child {
    position: relative;
}

/* Aktywny item */
.desktop-hover-slider .hover-slide-item.active {
    opacity: 1;
    z-index: 2;
}


/* Naprawa znikających odznak (Sold Out, Sale itp.) na desktopie */
.product-wrapper .product-thumbnail .product-badges {
    z-index: 10 !important;
    position: absolute; /* Motyw Minimog i tak to ma, ale dodajemy dla pewności */
}

/* Upewniamy się, że cały kontener miniatury odpowiednio zarządza warstwami */
.product-thumbnail .thumbnail {
    position: relative;
    z-index: 1;
}