/* ==============================================================
 COMPONENTE PROPIO: CARRUSEL DE PRODUCTOS
ESTILO DE CONTENEDORES Y FLECHAS DEL CARRUSEL DE PRODUCTOS*/


div.carousel-productos{

    padding: 30px;

}
.product-carousel {

    position: relative;
    width: 100%;

}

.product-carousel__viewport {

    overflow: hidden;

}

.product-carousel__track{

    display:flex;
    overflow:visible;
    transition: transform .35s ease;
    list-style:none;
    margin:0;
    padding:0;
    gap: 15px;

}

.product-carousel__track .product {

    flex: 0 0 25%;

}

/* div de flechas de control del carrusel */
.product-carousel__controls {

    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transform: translateY(-50%);
    pointer-events: none;

}

.product-carousel__arrow {

    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    background: var(--background-color);
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    font-size: 18px;
    line-height: 1;
    font-family: inherit;
    pointer-events: auto;
    transition: all .2s ease;

}

.product-carousel__arrow:hover:not(:disabled), .product-carousel__arrow:active, .product-carousel__arrow:focus {

    background: var(--color-primary);
    color:  var(--button-text);

}

.product-carousel__arrow:disabled {

    background-color: #D1D5DB;
    color: var(--breadcrumbs-color-separator);
    border-color: #D1D5DB;
    cursor: default;

}
.product-carousel__arrow--prev {

    transform: translateX(-50%);

}

.product-carousel__arrow--next {

    transform: translateX(50%);

}


@media (max-width: 768px) {

    .product-carousel__track .product {
        flex: 0 0 50%;
    }

}