/* Wrapper del widget: necesario para posicionar las flechas */
.avdiv_slider_widget {
  position: relative;
}

/* Carril del slider: ya no necesitamos scroll horizontal */
.avdiv_wid_slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

/* Cada slide ocupa todo el espacio y se apila uno encima de otro */
.avdivimg_slider_big {
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  opacity: 0;
  transition: opacity 0.4s ease; /* efecto suave al cambiar */
}

.avdivimg_slider_big img {
  width: 100%;
  height: 100%;
  object-fit: var(--object-fit-big, cover);
  display: block;
}

/* Solo el activo es visible */
.avdivimg_slider_big.active {
  opacity: 1;
  z-index: 1;
}

/* Miniaturas como las tenías: */
.avdiv_wid_thumnails {
  display: flex;
  flex-wrap: wrap;
  cursor: pointer;
  gap: var(--thumbnails-gap, 5px);
  justify-content: space-between;
}
.avdivimg_slider_thumn {
  overflow: hidden;
  position: relative;
}
.avimg_slider_thumn {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ejemplo de 3 por fila (el resto igual que ya tenías) */
.avdiv_wid_thumnails_3 .avdivimg_slider_thumn {
  flex: 0 0 calc(33.33% - var(--thumbnails-gap, 5px) / 1.5);
}

/* Flechas visibles siempre, con borde blanco */
.avslider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  border: 2px solid #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 9999;
  transition: background 0.3s ease, transform 0.2s ease;
}

.avslider-arrow:hover {
  background: rgba(255, 255, 255, 0.9);
  color: #000;
  transform: translateY(-50%) scale(1.05);
}

.avslider-prev {
  left: 12px;
}
.avslider-next {
  right: 12px;
}

@media (max-width: 640px) {
  .avslider-arrow {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
}