@charset "UTF-8";
/* CSS Document */


.carousel-container {
    position: relative;
    overflow: hidden;
        padding-bottom:80px; 
    padding-top:80px; 
}
.carousel-btn{
    position: absolute;
    top: 20px;
    width: 80px;
    height: 40px;
    overflow-x: hidden;
    overflow-y: hidden;
        cursor: pointer;
}
.carousel-btn span{
    padding-left: 100px;
}

.carousel-btn{
    position: absolute;
    top: 20px;
    border: none;
    background-color: #1e1e1e;
    opacity: 1;
}
.carousel-btn.disabled{
opacity: 0.3;
    cursor:default;
}
.carousel-btn.prev{
    background-image: url(../img/arrow-prev.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 40px auto;
    left: 30px;
}
.carousel-btn.prev:hover{
    background-image: url("../img/arrow-prev_hover.svg");
}
.carousel-btn.next{
    background-image: url(../img/arrow-next.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 40px auto;
    right: 30px;
}
.carousel-btn.next:hover{
    background-image: url("../img/arrow-next_hover.svg");
}

.carousel-viewport {
    overflow: hidden;
    width: 100%;
}


.carousel-container {
    position: relative;
    overflow: hidden;
        padding-bottom:80px; 
    padding-top:80px; 
}
.carousel-btn{
    position: absolute;
    top: 20px;
    width: 80px;
    height: 40px;
    overflow-x: hidden;
    overflow-y: hidden;
        cursor: pointer;
}
.carousel-btn span{
    padding-left: 100px;
}

.carousel-btn{
    position: absolute;
    top: 20px;
    border: none;
    background-color: #1e1e1e;
    opacity: 1;
}
.carousel-btn.disabled{
opacity: 0.3;
    cursor:default;
}
.carousel-btn.prev{
    background-image: url(../img/arrow-prev.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 40px auto;
    left: 30px;
}
.carousel-btn.prev:hover{
    background-image: url("../img/arrow-prev_hover.svg");
}
.carousel-btn.next{
    background-image: url(../img/arrow-next.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 40px auto;
    right: 30px;
}
.carousel-btn.next:hover{
    background-image: url("../img/arrow-next_hover.svg");
}
.carousel-viewport {
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

/* Se il contenitore "utile" è davvero 1500px esatti, sblocca questa riga:
.carousel-viewport { width: 1500px; margin: 0 auto; }
*/

.carousel-track {
  display: flex;
  gap: 25px;         /* unico spazio orizzontale tra anteprime */
  transition: none;
  box-sizing: border-box;
}

/* Ogni item nel carosello: 350px fissi */
.carousel-track > * {
  flex: 0 0 350px;
  width: 350px;
  box-sizing: border-box;
}

/* Rimuovi lo spacing "doppiato" sugli articoli (prima avevi padding-left:25px) */
.categoria article {
  width: 350px;
  flex: 0 0 350px;
  padding-left: 0;      /* IMPORTANTISSIMO: evita il taglio per somma con gap */
  padding-right: 0;
  float: none;          /* meglio con flex: evita effetti collaterali */
  box-sizing: border-box;
  height: 600px;
  position: relative;
  background-color: #1e1e1e;
  transition: all 0.3s;
  overflow: hidden;
}

.padding_sinistra_25  {
    padding-left: 25px;
    
}

.categoria article {
    border-right: 1px solid #3d3c3f;
}
.categoria article:hover {
    border-right: 1px solid #FF2E34;
    transition: all 0.3s;
}
.carousel-container-single {
    position: relative;
    overflow: hidden;
        padding-bottom:80px; 
    padding-top:80px; 
}
.carousel-btn-single{
    position: absolute;
    top: 320px;
    width: 80px;
    height: 40px;
    overflow-x: hidden;
    overflow-y: hidden;
        cursor: pointer;
        border: none;
    background-color: #fff;
    opacity: 1;

}
.carousel-btn-single span{
    padding-left: 100px;
}
.carousel-btn-single.disabled{
opacity: 0.3;
    cursor:default;
}
.carousel-btn-single.prev{
    background-image: url(../img/arrow-prev.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 40px auto;
    left: 50%;
  transform: translateX(-550px);
}
.carousel-btn-single.prev:hover{
    background-image: url("../img/arrow-prev_hover.svg");
}
.carousel-btn-single.next{
    background-image: url(../img/arrow-next.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 40px auto;
    right: 50%;
  transform: translateX(550px);
}
.carousel-btn-single.next:hover{
    background-image: url("../img/arrow-next_hover.svg");
}

.carousel-viewport-single {
    overflow: hidden;
    width: 845px;
    margin-right: auto;
    margin-left: auto;
}

.carousel-track-single {
    display: flex;
    transition: none;
}

/* ----- carousel-single  */

.carousel-container-single {
    position: relative;
    overflow: hidden;
        padding-bottom:80px; 
    padding-top:80px; 
}
.carousel-btn-single{
    position: absolute;
    top: 320px;
    width: 80px;
    height: 40px;
    overflow-x: hidden;
    overflow-y: hidden;
        cursor: pointer;
        border: none;
    background-color: #fff;
    opacity: 1;

}
.carousel-btn-single span{
    padding-left: 100px;
}
.carousel-btn-single.disabled{
opacity: 0.3;
    cursor:default;
}
.carousel-btn-single.prev{
    background-image: url(../img/arrow-prev.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 40px auto;
    left: 50%;
  transform: translateX(-550px);
}
.carousel-btn-single.prev:hover{
    background-image: url("../img/arrow-prev_hover.svg");
}
.carousel-btn-single.next{
    background-image: url(../img/arrow-next.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 40px auto;
    right: 50%;
  transform: translateX(550px);
}
.carousel-btn-single.next:hover{
    background-image: url("../img/arrow-next_hover.svg");
}

.carousel-viewport-single {
    overflow: hidden;
    width: 845px;
    margin-right: auto;
    margin-left: auto;
}

.carousel-track-single {
    display: flex;
    transition: none;
}