/* Wrapper */
.kfds-viewer{
  display:flex;
  gap:16px;
  align-items:flex-start;
}

/* Stage */
.kfds-viewer__stage{
  flex:1 1 auto;
}
.kfds-viewer__img{
  display:block;
  width:100%;
  height:auto;
  border-radius:6px;
}

/* ===== DESKTOP: colonna thumbs a SINISTRA ===== */
.kfds-thumbcol{
  order:-1;
  width:110px;
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height: calc(var(--kfds-thumbs-h, 6) * 110px);
  overflow:auto;
  padding-right:4px;
  margin-right:16px;
}
.kfds-thumb{
  border:1px solid #ddd;
  background:#fff;
  padding:0;
  border-radius:6px;
  cursor:pointer;
  line-height:0;
}
.kfds-thumb.is-active{
  outline: 2px solid #111;
  outline-offset: 0;
  border-color: #111;
}
.kfds-thumb__img{
  display:block;
  width:100%;
  height:auto;
  border-radius:6px;
}

/* ===== MOBILE: Splide sotto ===== */
.kfds-viewer__thumbs-splide{ display:none; }

@media (max-width: 768px){
  .kfds-viewer{ flex-direction:column; }

  .kfds-thumbcol{ display:none; }
  .kfds-viewer__thumbs-splide{
    display:block;
    position:relative;
    padding: 4px 36px; /* spazio per i bottoni */
  }
  .kfds-viewer__thumbs-splide .splide__slide{
    width:auto;
  }
  .kfds-viewer__thumbs-splide .kfds-thumb{
    width:96px;
  }

  .kfds-splide-nav .kfds-splide-prev,
  .kfds-splide-nav .kfds-splide-next{
    position:absolute;
    top:50%;
    transform: translateY(-50%);
    width:28px; height:28px; border-radius:50%;
    border:1px solid #ddd; background:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:18px; line-height:1; cursor:pointer; user-select:none;
    z-index:2;
  }
  .kfds-splide-nav .kfds-splide-prev{ left:6px; }
  .kfds-splide-nav .kfds-splide-next{ right:6px; }
}

/* scrollbar estetica per colonna desktop */
.kfds-thumbcol::-webkit-scrollbar{ width:8px; }
.kfds-thumbcol::-webkit-scrollbar-thumb{ background:#c9c9c9; border-radius:4px; }