/* style.css */
.wc-dual-carousel { overflow: hidden; position: relative; width: 100%; max-width: 1200px; margin: auto; }

/* Aseguramos que no haya wrap y que los items estén pegados */
.carousel-row {
  display: flex;
  flex-wrap: nowrap;
  /* opcional: en lugar de gap puedes usar margin-right en .carousel-item */
}

/* Ajuste de animaciones: duración fijada en JS */
.top-row    { animation-name: scroll-left;  animation-timing-function: linear;  animation-iteration-count: infinite; }
.bottom-row { animation-name: scroll-right; animation-timing-function: linear;  animation-iteration-count: infinite; }

.carousel-item {
  flex: 0 0 auto;
  padding: 10px;
  border-radius: 10px;
  /* si usas gap en .carousel-row, mantenlo; sino, puedes poner margin-right aquí */
}

/* Keyframes mantienen el bucle limpio */
@keyframes scroll-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* -50% porque duplicamos el contenido */
}
@keyframes scroll-right {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}