/* ******************************************** */
/** PRODUCTS CAROUSEL BTN
/* ******************************************** */


.c-carousel__top{
    position: relative;
}

.c-carousel__nav{
    position: absolute;
    left: -6px;
    right: -6px;
    top: 210px;
    transform: translateY(-50%);
    z-index: 10;
}

.c-carousel__nav-btn{
    /* font-size: clamp(2.2rem, 2.35vw, 3.3rem); */
    background-color: rgb(var(--color-darkest-rgb) / 50%);
    border-radius: 50%;
    padding: 7px;
    color: #FFFF;
    min-width: 48px;
    font-size: 34px;
    min-height: 48px;
}

.c-carousel__nav-btn--next{
    transform: rotate(180deg);
    position: absolute;
    right: 0;
}


/* ********************** de Tablet a DESKTOP ********************** */

@media (min-width: 980px) {

    .c-carousel__nav{
        right: 0;
        left: auto;
        top: 50%;
        margin-top: 2px;
    }

    .c-carousel__nav-btn{
        color: #FF7200;
        background: none;
    }

    .c-carousel__nav-btn:hover,
    .c-carousel__nav-btn:focus{
        color: var(--color-hover);
    }

    .c-carousel__nav-btn--next{
        position: relative;
    }
    
        
    /* has-background */ 
    
    .c-carousel.has-background .c-carousel__nav-btn{
        color: var(--color-lightest);
    }
}