/* =========================================================
   CARRUSEL DENTRO DE UN MÓDULO DE DIVI

   Divi da a sus listados de productos un ancho y unos márgenes
   propios con «!important» y con más peso que los del carrusel.
   Por eso aquí se repite la clase: gana sin tocar el tema.
   ========================================================= */

.superop-carousel.superop-divi.superop-divi ul.products {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: var(--so-gap) !important;
    margin: 0 !important;
    padding: 0 0 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

.superop-carousel.superop-divi.superop-divi ul.products > li.product {
    flex: 0 0 calc(
        (100% - (var(--so-visible) - 1) * var(--so-gap)) / var(--so-visible)
    ) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
}

/* Divi separa las filas con «nth-child»: dentro del carrusel no hay filas. */
.superop-carousel.superop-divi.superop-divi ul.products > li.product:nth-child(n) {
    margin: 0 !important;
    clear: none !important;
}

/* El módulo recorta lo que se sale; el carrusel necesita ver el desbordamiento
   para que las flechas queden fuera de la lista. */
.superop-carousel.superop-divi {
    overflow: visible;
}

/* Sitio para las flechas cuando la fila ocupa todo el ancho de la columna. */
.et_pb_module .superop-carousel.superop-divi .superop-prev {
    left: 2px;
}

.et_pb_module .superop-carousel.superop-divi .superop-next {
    right: 2px;
}

@media (min-width: 981px) {
    .et_pb_module .superop-carousel.superop-divi .superop-prev {
        left: calc(var(--so-arrow) / -2);
    }

    .et_pb_module .superop-carousel.superop-divi .superop-next {
        right: calc(var(--so-arrow) / -2);
    }
}