body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  color: #333;
  /* margin: 20px; */
}

main {
  max-width: 1200px;
  margin: 0 auto;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
}

.product-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}

/* SEZIONE IMMAGINE */
.image-section {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-image {
  width: 100%;
  max-width: 500px; /* limite desktop */
  height: auto;
 / border: 1px solid #ddd;
  border-radius: 4px;
  display: block;
}

.thumbnail-container {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.thumbnail-container img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  transition: border 0.2s;
}

.thumbnail-container img:hover {
  border: 1px solid #000;
}

/* SEZIONE DESCRIZIONE */
.description-section {
  flex: 1 1 400px;
}

.description-section h1 {
  font-size: 1.8em;
  margin-bottom: 10px;
}

.description-section p {
  margin-bottom: 20px;
}

/* TABELLA */
.details-table-container {
  margin-top: 100px;
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow-x: auto; /* scroll orizzontale su mobile */
}

.details-table-container table {
  width: 100%;
  border-collapse: collapse;
  min-width: 100%; /* evita rottura su schermi piccoli */
}

.details-table-container th,
.details-table-container td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.details-table-container th {
  background-color: #f0f0f0;
}

/* TABLE SCROLL VERTICALE */
.details-table-container tbody {
  max-height: 150px;
  overflow-y: scroll; /* Forza la visibilità della scrollbar verticale */
  display: block;
  -webkit-overflow-scrolling: touch; /* Migliora l'interazione su dispositivi iOS */
  scrollbar-width: thin; /* Barra sottile su Firefox */
  scrollbar-color: #888 #f0f0f0; /* Colore della barra di scorrimento e traccia su Firefox */
  padding-right: 10px; /* Aggiungi un po' di spazio per la scrollbar */
  -webkit-scrollbar: 16px !important; /* Forza larghezza sempre visibile */
}

/* Per i browser Webkit (Chrome, Safari) */
.details-table-container tbody::-webkit-scrollbar {
  width: 12px !important; /* Larghezza fissa della scrollbar */
}

.details-table-container tbody::-webkit-scrollbar-thumb {
  background-color: #888 !important; /* Colore della maniglia della barra di scorrimento */
  border-radius: 4px; /* Rende la maniglia più arrotondata */
}

.details-table-container tbody::-webkit-scrollbar-track {
  background-color: #f0f0f0 !important; /* Colore di sfondo della traccia della barra di scorrimento */
}

/* LINK COLORATI */
.link-container {
  background-color: #666666;
  color: #FFFFFF;
  font-weight: bold;
  padding: 4px;
  margin: 5px 0;
  border-radius: 4px;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.3s;
}

.link-container a {
  text-decoration: none;
  color: #FFFFFF;
  display: block;
  padding: 4px 0;
}

.link-container:hover {
  background-color: #888888;
}

.link-container-red {
  background-color: #FF0000;
}

.link-container-red:hover {
  background-color: #FF5B5B;
}

.details-table-container thead,
.details-table-container tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

/* RESPONSIVE TABLET */
@media (max-width: 1024px) {
  .product-container {
    flex-direction: column;
    align-items: center;
  }

  .description-section {
    width: 100%;
  }
}

/* RESPONSIVE MOBILE */
@media (max-width: 600px) {
  main {
    padding: 15px;
  }

  .product-container {
    gap: 15px;
  }

  .main-image {
    max-width: 100%;
  }

  .description-section h1 {
    font-size: 1.4em;
  }

  .thumbnail-container img {
    width: 50px;
    height: 50px;
  }

  /* Forza la visibilità della scrollbar sempre */
  .details-table-container tbody {
    max-height: 200px; /* Impostato un max-height più grande su mobile */
    overflow-y: scroll !important; /* Forza la visibilità della scrollbar */
  }

  .details-table-container tbody::-webkit-scrollbar {
    width: 16px !important; /* Barra di scorrimento sempre visibile su mobile */
  }

  .details-table-container tbody::-webkit-scrollbar-thumb {
    background-color: #888 !important; /* Colore della maniglia della barra di scorrimento */
  }

  .details-table-container tbody::-webkit-scrollbar-track {
    background-color: #f0f0f0 !important; /* Colore di sfondo della traccia della barra di scorrimento */
  }

  /* Impostazione aggiuntiva per evitare la scomparsa automatica della scrollbar */
  .details-table-container tbody {
    -webkit-overflow-scrolling: auto !important; /* Forza la visibilità su Safari */
  }
}