/* Assicuriamoci che le sezioni abbiano bordi trasparenti di default */
#intro .row > div > section {
  position: relative;
  border-left: 0px solid transparent;
  border-right: 0px solid transparent;
  transition: border 0.3s ease;
}

/* Pseudo-elementi per il gradiente sui lati */
#intro .row > div > section:hover::before,
#intro .row > div > section:hover::after,
#intro .row > div > section.selected::before,
#intro .row > div > section.selected::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px; /* spessore bordo */
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(150,150,150,0.5), rgba(255,255,255,0));
  transition: background 0.3s ease;
}

/* lato sinistro */
#intro .row > div > section:hover::before,
#intro .row > div > section.selected::before  {
  left: 0;
}

/* lato destro */
#intro .row > div > section:hover::after,
#intro .row > div > section.selected::after {
  right: 0;
}

.button_ud{
  height: 35px;
  line-height: 35px; /* centra verticalmente il testo */
  display: inline-block; /* per sicurezza */
  padding: 0 15px;
  background-color:white;
  color:grey !important;
  margin-top:40px;
}

.button_selected{
    color:white !important;
    background-color: #e53359;
}

.button:hover{
    color:white !important;
}

.btn_sx{
    border-top-right-radius:0px; 
    border-bottom-right-radius:0px;
}
.btn_dx{
    border-top-left-radius:0px; 
    border-bottom-left-radius:0px;
}

    .carousel-custom {
    width: 100%; /* ✅ larghezza fissa */
    margin-top: -30px;
    }

    .carousel-img {
        width: 100%;          /* prende tutta la larghezza disponibile */
        height: 300px;
  object-fit: cover;       /* ✅ mantiene proporzioni */
        display: block;
    }


    /* Pulsanti fuori dalla foto */
.carousel-custom .carousel-control-prev,
.carousel-custom .carousel-control-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background-color: transparent; /* Rimuove sfondo */
  border: none;
  padding: 0;
  z-index: 2;
}

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M5.5 0l-4 4 4 4V0z'/%3E%3C/svg%3E");
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M2.5 0l4 4-4 4V0z'/%3E%3C/svg%3E");
}

.carousel-custom .carousel-control-prev {
  left: 0px; /* Sposta fuori a sinistra */
}

.carousel-custom .carousel-control-next {
  right: 0px; /* Sposta fuori a destra */
}

/* Riduci le icone se necessario */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  width: 40px;
  height: 40px;
  background-size: contain;
}



    section.box {
  height: 650px; /* o l’altezza fissa che preferisci */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* mantiene header e footer ben distanziati */
  overflow: hidden; /* evita che contenuti troppo lunghi escano */
  padding:0px;
}

ul.actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  margin: 0;
}

ul.actions li {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

ul.actions button {
  width: 100%;
  box-sizing: border-box; /* Evita che padding allarghi il bottone */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 5px; /* spazio tra testo e icona */
}

section.box p {
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal; /* ← permette l'andare a capo */
  flex-grow: 1; /* solo se vuoi che il paragrafo si espanda nello spazio disponibile */
}

.product-description {
  display: -webkit-box;
  -webkit-line-clamp: 2;      /* ✅ Mostra solo 3 righe */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: max-height 0.3s ease;
  word-break: break-word;
}