@charset "utf-8";
/* CSS Document */
/* File CSS di base per UV Smart Care */


/* Contenitore per il testo dinamico */
.dynamic-text-wrapper {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dynamic-text {
    font-family: Montserrat, Arial, sans-serif;
    font-size: 20px; /* Dimensione del testo desktop */
    color: #FFF;
    display: inline-block;
    position: relative; /* Cambiato da absolute */
    animation: scrolling-text 10s linear infinite;
    transform: translateX(100%); /* Posizione iniziale del testo */
    font-weight: bold; /* Testo in grassetto */
}
/* Animazione per il testo scorrevole */
@keyframes scrolling-text {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}




/* Reset base */
body, h1, h2, h3, p, ul, li, a {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Montserrat, Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #ffffff;
    padding: 0;
    margin: 0;
}
 
/* Contenitore per entrambi gli header */
.sticky-headers {
    position: sticky;
    top: 0;
    z-index: 1100; /* Assicura che i due header siano in primo piano */
    display: flex;
    flex-direction: column; /* Disposizione verticale */
    background: #005f99; /* Colore di sfondo del contenitore */
}

/* Nuovo Header */
.top-header {
    background: #005f99; /* Colore uniforme con il contenitore */
    color: white;
    text-align: center;
    font-weight: bold;
    padding: 10px 0;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2); /* Leggera ombra per separazione */
}

.top-header-title {
    margin: 0;
    font-size: 20px;
}

/* Header esistente */
.header {
    background: #00aaff; /* Colore differente per separare visivamente */
    color: white;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); /* Ombra per separazione */
}
header a {
    color: white;
    text-decoration: none;
    font-size: 1.2em;
}
  .shipping-info {
    font-size: 1.2em;
    font-weight: bold; /* Grassetto */
    margin: 0;
}

/* Banner Sticky al fondo */
.sticky-footer {
    position: sticky;
    bottom: 0;
    z-index: 900;
    background: #005f99; /* Colore uguale al top-header */
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.2); /* Ombra per separare dal contenuto */
    width: 100%;
    box-sizing: border-box;
}

 
/* Controlli quantità */
.quantity-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Pulsanti incrementa/decrementa */
.btn-decrement, .btn-increment {
    background: white;
    color: #005f99;
    border: none;
    font-size: 18px;
    font-weight: bold;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 5px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

/* Input quantità */
#quantity {
    width: 35px; /* Ridurre la larghezza dell'input */
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #005f99;
    border: 2px solid white;
    border-radius: 5px;
    padding: 5px;
    background: white;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

/* Pulsanti Acquista e Contrassegno */
.action-buttons {
    display: flex;
    gap: 10px;
}

.btn-purchase, .btn-cod {
    background: white;
    color: #005f99;
    border: none;
    font-size: 16px;
    font-weight: bold;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 5px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    transition: background 0.3s, color 0.3s;
    flex: 1; /* Per adattarsi meglio su schermi stretti */
    text-align: center;
}

/* Hover sui pulsanti */
.btn-purchase:hover {
    background: #0077cc;
    color: white;
}

.btn-cod {
    background: #28a745; /* Colore verde per Contrassegno */
    color: white;
}

.btn-cod:hover {
    background: #218838;
}
 
.popup-overlay {
    position: fixed;
    top: calc(var(--header-height, 100px) + 20px);
    left: 0;
    width: 100%;
    height: calc(100% - var(--header-height, 100px) - 20px);
    background: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: flex-start;
    z-index: 9999;
    overflow-y: auto;
    padding-top: 20px !important; /* Spostato più in alto */
}

 
.popup-container {
  position: relative;
  background: #fff;
  border-radius: 16px;
  width: 90%;
  max-width: 500px;
    max-height: calc(100vh - var(--header-height, 100px) - 20px - 120px); /* Riduci l'altezza disponibile */
  overflow-y: auto; /* Permette lo scrolling solo all'interno del popup */
  padding-bottom: 20px; /* Spazio extra per evitare che i pulsanti vengano coperti */
   
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
   
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.popup-overlay.show {
  display: flex; /* Mostra il popup */
}

.close-popup {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
}

.close-popup:hover {
  color: #f00;
}

.popup-title {
  font-size: 1.5rem;
  text-align: center;
  margin-bottom: 20px;
}

.product-detail {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.product-image-popup {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
}

.product-title-popup {
  flex: 1;
  font-size: 0.9rem;
  font-weight: bold;
}

.product-quantity {
  margin-top: 5px;
  font-weight: bold;
}

.shipping-section {
  margin-bottom: 20px;
}

.shipping-header {
  margin-bottom: 10px;
}

.shipping-method {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  align-items: center;
}
.fake-input {
  flex: 2;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #f9f9f9;
  font-size: 1rem;
  width: 100%;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
}
.savings {
    font-weight: bold;
    color: #28a745; /* Verde per evidenziare il risparmio */
    display: flex;
    justify-content: space-between;  /* Spazio tra l'icona/titolo e valore */
    align-items: center;
    font-size: 16px;
}

.savings-text {
    display: flex;
    align-items: center;
}

.savings-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;  /* Distanza tra l'icona e il testo */
}


.summary-section {
  background: #f9f9f9;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.summary-item, .summary-total {
  display: flex;
  justify-content: space-between;
  font-size: 1rem;
}

.summary-total {
  font-weight: bold;
  margin-top: 10px;
}

.shipping-address {
  margin-bottom: 20px;
}

.section-title {
  font-size: 1rem;
  text-align: center;
  margin-bottom: 15px; /* Distanza maggiore di 5px */
  font-weight: bold;
}

.address-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

label {
  flex: 1;
  font-size: 0.9rem;
   font-weight: bold;
}

input, textarea {
  flex: 2;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #f9f9f9;
}

textarea {
  resize: none;
}

.optional {
  text-align: center;
}

.popup-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.btn-confirm, .btn-cancel {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
}

.btn-confirm {
  background: #4caf50;
  color: #fff;
}

.btn-cancel {
  background: #f44336;
  color: #fff;
}




/* Stile generale per le recensioni */
.reviews-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 20px auto;
    max-width: 800px; /* Riduzione della larghezza */
    padding: 10px; /* Spaziatura interna */
    border: 1px solid #ddd; /* Bordo sottile per separare visivamente */
    border-radius: 10px; /* Bordo arrotondato */
    background-color: #f9f9f9; /* Sfondo leggero */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombreggiatura */
}

/* Header delle recensioni */
.reviews-header {
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}

.histogram-bar-container {
    width: 100px;
    background: #e0e0e0;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
}

.histogram-bar {
    height: 100%;
    background: #ffc107;
}

/* Filtro delle recensioni */
.reviews-filter {
    margin-top: 20px;
    display: flex;
    justify-content: flex-start; /* Allinea a sinistra */
    align-items: center;
    gap: 10px;
    max-width: 100%;
}

/* Combo box con freccia */
.reviews-filter select {
    appearance: none; /* Rimuove lo stile di default */
  /*  background: url('/img/down-arrow.png') no-repeat right 10px center; */
    padding-right: 30px; /* Spazio per la freccia */
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px 10px;
}

.reviews-divider {
    border-top: 1px solid rgba(0, 0, 0, 0.2); /* Bordo sopra */
    margin: 10px 0; /* Distanza tra gli elementi */
}

/* Recensione singola */
.review-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Stile per la classe stars-image */
.stars-image {
    display: inline-block;
    height: 20px; /* Dimensione normale delle stelline */
    width: auto;
}

/* Stelle di valutazione */
.review-stars {
    display: flex;
    gap: 2px; /* Spaziatura tra le stelle */
}

.review-item img {
    border-radius: 50%;
    margin-right: 10px;
    width: 40px; /* Dimensione icona utente */
    height: 40px;
}

.review-item .user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.review-item .title {
    font-weight: bold;
    color: #000;
}

.review-text {
    margin-top: 5px;
}

.combo-box, .reviews {
    text-align: left;
}

.reviews {
    margin-top: 10px;
}

.divider {
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    margin: 10px 0;
}

.star-container {
    display: flex;
    align-items: center;
}

.star {
    font-size: 20px; /* Dimensione uniforme per le stelle */
    line-height: 1;
}

.star.filled {
    color: #ffc107; /* Colore dorato */
}

.star.empty {
    color: #000; /* Colore nero */
}

/* CSS per la paginazione */
.pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

 
.product-page-9 {
    padding: 20px;
}

.reviews-header {
    text-align: center;
    margin-bottom: 30px;
}

.header-title {
    font-size: 24px;
    margin-bottom: 10px;
}

.reviews-filter {
    margin: 20px auto;
    display: flex;
    justify-content: center;
}

.custom-select {
    background: none;
    border: none;
    border-bottom: 2px solid #000;
    padding: 5px;
    font-size: 16px;
    outline: none;
    appearance: none;
    cursor: pointer;
}

.review-item {
    margin: 20px auto;
    max-width: 800px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
}

.review-stars {
    margin-bottom: 10px;
    text-align: left;
}

.stars-image {
    width: 100px;
    height: auto;
}

.review-user {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.user-icon {
    width: 30px;
    height: 30px;
    margin-right: 10px;
}
.user-pic {
    width: 80px !important;
    height: 80px !important;
    margin-right: 10px;
    object-fit: cover; /* Adatta l'immagine senza distorsioni, mantenendo le proporzioni */
    object-position: center; /* Centra l'immagine */
   /*  border-radius: 50%; Rende l'immagine rotonda */
}
.user-name {
    font-weight: bold;
    color: #00aaff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.review-title {
    font-size: 18px;
    font-weight: bold;
    color: #000;
    margin-bottom: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.review-text {
    font-size: 14px;
    line-height: 1.5;
}

#pagination-container {
    text-align: center;
    margin-top: 20px;
    font-size: 20px;
    padding: 5px 10px; /* Aggiunge spaziatura */
    margin: 0 5px; /* Aggiunge margini tra i numeri */
    color: #007BFF; /* Colore blu standard */
}

#pagination-container a {
    text-decoration: none; /* Rimuove la sottolineatura */
}

#pagination-container a:hover {
    color: #0056b3; /* Colore blu più scuro al passaggio del mouse */
}

.page-button {
    margin: 0 5px;
    padding: 5px 10px;
    background-color: #f0f0f0;
    text-decoration: none;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.page-button.selected {
    font-weight: bold;
    background-color: #007bff;
    color: white;
}

.page-button:hover {
    background-color: #ddd;
}

/* Icona hamburger */
.menu-icon {
    font-size: 30px;
    cursor: pointer;
    color: white;
}

/* Icona carrello */
.cart-icon img {
    width: 30px;
    height: 30px;
    cursor: pointer;
}

.product-page, .product-image-container, .product-image {
    position: relative;
    z-index: 1; /* Assicura che siano sotto il side-menu */
}

/* Menu laterale */
 
 .side-menu {
    position: fixed;
    top: 0;
    left: -250px; /* Nascondi inizialmente */
    width: 250px;
    height: 100%;
    background-color: #005f99;
    transition: 0.3s;
    padding-top: 60px;
    z-index: 99999; /* Maggiore di qualsiasi altro elemento */
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
}

.side-menu a {
    padding: 10px 15px;
    text-decoration: none;
    font-size: 22px;
    color: white;
    display: block;
    transition: 0.3s;
}

.side-menu a:hover {
    background-color: #004070;
}

/* Menu visibile */
.side-menu.open {
    left: 0;
}
/* Responsività per il menu */
 
  
  /* Bundle Offer */
.bundle-offer {
    padding: 20px;
    width: 100%;
    margin-top: 20px;
    border-radius: 10px;
    background: #f9f9f9;
}

.offer-title {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #00aaff;
    padding: 5px 0;
    position: relative;
}

.offer-title::before,
.offer-title::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40%;
    border-top: 2px solid #00aaff;
}

.offer-title::before {
    left: 0;
}

.offer-title::after {
    right: 0;
}

/* Bundle Options */
.bundle-option {
    display: flex !important; /* Forza flex per compatibilità */
    justify-content: center !important; /* Centra il contenuto */
    align-items: center !important;
    padding: 15px !important;
    border: 2px solid #ddd !important;
    border-radius: 5px !important;
    margin-bottom: 10px !important;
    cursor: pointer !important;
    background: #ffffff !important;
    color: #333 !important;
    transition: background 0.3s, border-color 0.3s !important;
}

.bundle-option:hover {
    background: #f3f4f6 !important;
}

.bundle-option.selected {
    background: #007bff !important;
    border-color: #00aaff !important;
    color: white !important;
}

.bundle-option input[type="radio"] {
    display: none !important;
}

.option-details {
    display: inline-block !important; /* Inline-block per centratura */
    text-align: center !important; /* Centra il testo */
    font-size: 14px !important;
    white-space: nowrap !important; /* Impedisce il ritorno a capo */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.red-text {
    color: red !important; /* Rosso forzato */
}

.shipping-text {
    color: #333 !important; /* Nero forzato */
}

.bundle-option.selected .red-text,
.bundle-option.selected .shipping-text {
    color: white !important; /* Bianco forzato quando selezionato */
}

/* Pulsanti principali */
.button-container {
    display: flex !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
}

.buy-now-btn,
.cash-on-delivery-btn {
    padding: 15px 20px !important;
    font-size: 18px !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    width: 100% !important;
    margin-bottom: 5px !important;
}

.buy-now-btn {
    background: #00aaff !important;
    color: #fff !important;
}

.cash-on-delivery-btn {
    background: #28a745 !important;
    color: #fff !important;
}

.bundle-footer {
    color: #000 !important;
    display: flex !important;
    justify-content: center !important; /* Centra il pulsante */
    align-items: center !important;
    margin-top: 10px !important;
    font-size: 18px !important;
}

.buy-btn {
    width: 100% !important; /* Largo come i pulsanti option */
    padding: 15px !important; /* Altezza uniforme con bundle-option */
   /* #005f99  Blu invece di grigio */
    background:#28a745  !important;
    color: white !important;
    font-size: 16px !important;
    font-weight: bold !important;
    border: none !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    transition: background 0.3s !important;
    text-align: center !important;
}

.buy-btn:hover {
    background: #4a90e2 !important;
}

.buy-btn:active {
  /*  background: #003f66 !important; */
    background: #28a745 !important; 
}

/* Fine della sezione sostitutiva */

        .secure-checkout {
            text-align: center;
            margin: 20px 0;
        }

        .secure-checkout img {
            max-width: 40px;
            margin: 0 5px;
        }

       
      .faq {
    margin-top: 20px;
}

.faq-item {
    margin-bottom: 10px;
}

.faq-item button {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    position: relative;
    padding-right: 30px; /* Spazio per la freccia */
}

.faq-item button:after {
    content: '\25b6'; /* Freccia verso destra di default */
    position: absolute;
    right: 10px;
    transition: transform 0.3s ease; /* Opzionale: animazione fluida */
}

.faq-item.active button:after {
    content: '\25bc'; /* Freccia verso il basso quando attivo */
}

.faq-item .content {
    display: none;
    padding: 14px;
    background: #f1f1f1;
    border-radius: 4px;
}

.faq-item.active .content {
    display: block;
}

/* Bordi tra i pulsanti */
.faq-item:first-of-type button {
    border-bottom: 1px solid #ccc;
}

.faq-item:nth-of-type(2) button {
    border-bottom: 1px solid #ccc;
}

.faq-item:last-of-type button {
    border-bottom: 1px solid #ccc;
}
.product-page {
    padding: 80px;
    display: flex;
    flex-direction: column; /* Disposizione verticale predefinita per dispositivi mobili */
    gap: 20px;
}
.product-page-2 {
    padding: 80px;
    display: flex;
    flex-direction: column; /* Disposizione verticale predefinita per dispositivi mobili */
    gap: 20px;
}
.product-page-3 {
    padding: 80px;
    display: flex;
    flex-direction: column; /* Disposizione verticale predefinita per dispositivi mobili */
    gap: 20px;
}


.product-page-4 {
  font-family: Arial, sans-serif;
  color: #333;
}

/* Titolo principale */
.product-page-4 .title {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
}

.product-page-5 {
    padding: 80px;
    display: flex;
    flex-direction: column; /* Disposizione verticale predefinita per dispositivi mobili */
    gap: 20px;
}
.product-page-6 {
    padding: 80px;
    display: flex;
    flex-direction: column; /* Disposizione verticale predefinita per dispositivi mobili */
    gap: 20px;
}
/* Stili generali */
.product-page-10 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

/* Immagini */
.product-page-10 img {
    width: 100%; /* Imposta la larghezza di base */
    height: auto;
    border-radius: 5px; /* Angoli arrotondati */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombra per un look moderno */
}

/* Stili di base per il titolo e gli elementi della lista */
.product-page-2 .description-text p,
.product-page-5 .description-text p {
    margin-bottom: 20px; /* Distanza sotto il titolo */
}

.product-page-2 ul,
.product-page-5 ul {
    padding-left: 20px; /* Distanza a sinistra per la lista */
    margin-top: 10px; /* Distanza sopra la lista */
}

.product-page-2 li,
.product-page-5 li {
    margin-bottom: 10px; /* Distanza tra gli elementi della lista */
}




/* Versione mobile */
.product-image-container, .product-details {
    width: 100%; /* Larghezza piena per mobile */
}
 

.product-image {
    position: relative;
    width: 100%;
    height: 700px;
    z-index: 1;
}

.product-image img {
  
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}


/* Miniature */
.thumbnails {
    display: flex;
    justify-content: center;
    margin-top: 15px;
    gap: 10px;
}

.thumbnail {
    width: 100px;
    height: 100px;
    border: 2px solid transparent;
    cursor: pointer;
}

.thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Stile per la miniatura attiva */
.thumbnail img.active-thumbnail {
    border: 2px solid #00aaff; /* Bordo azzurro */
    border-radius: 4px; /* Opzionale, per rendere gli angoli arrotondati */
    box-sizing: border-box; /* Assicura che il bordo non influenzi le dimensioni */
}

/* Titoli e descrizioni */
.product-title {
    font-size: 36px;
    font-weight: bold;
    color: black;
}

.product-description {
    margin-top: 20px;
    font-size: 20px;
    color: #000;
}

/* Prezzi */
.product-price {
    font-size: 28px;
    color: #00aaff;
    font-weight: bold;
}

/* Prezzo barrato con linea più spessa */
.product-price .old-price,
.product-price .old-first-price {
    font-size: 28px;
    color:  #00aaff;
    text-decoration: line-through;
    text-decoration-thickness: 3px; /* Aumenta lo spessore */
    text-decoration-color: #ff0000; /* Puoi cambiare colore se vuoi */
    margin-left: 10px;
    font-weight: bold;
}

/* Caratteristiche prodotto */
.product-features {
    margin-top: 20px;
    font-size: 20px;
    color: #000;
}

.product-features li {
    list-style-type: none;
    position: relative;
    padding-left: 30px;
}

.product-features li::before {
    content: '✔';
    color: #00aaff;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 24px;
}

/* Footer */
footer {
    background: #333;
    color: white;
    text-align: center;
    padding: 10px 20px;
    margin-top: 20px;
}

footer p {
    font-size: 0.9em;
}

/* Stile generale per il blocco Checkout Sicuro */
.checkout-secure {
    display: flex;
    flex-direction: column; /* Disposizione verticale */
    align-items: center; /* Centro orizzontale */
    justify-content: center; /* Centro verticale */
    margin-top: 20px; /* Spazio sopra */
}

.checkout-secure p {
    font-size: 18px; /* Dimensione testo */
    font-weight: bold; /* Grassetto */
    margin-bottom: 10px; /* Spazio tra il testo e l'immagine */
    text-align: center; /* Allinea al centro */
}

.checkout-secure .payment-logo {
    max-width: 484px; /* Larghezza massima per desktop */
    width: 100%; /* Adatta alla larghezza disponibile */
    height: auto; /* Mantieni le proporzioni */
}
/* Sezione per smartphone */
.mobile-section {
    text-align: center;
    margin-top: 20px;
}

.mobile-image {
    max-width: 400px;
    width: 100%;
    height: auto;
}

/* Sezione descrizione con immagine/gif */
.product-description-section {
    display: flex;
    justify-content: space-between;
    margin: 40px 0;
}

.description-text {
    width: 48%;
}

.description-image {
    width: 48%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.description-image-img {
    width: 600px;
    height: 600px;
    border-radius: 20px; /* Arrotonda i bordi, regola il valore per maggiore o minore curvatura */
}

/* Stile di base per la sezione */
.video-section {
    background-color: #00aaff;
    text-align: center;
    padding: 50px 20px 20px;
}

/* Titolo sopra i video */
.video-title {
    color: white;
    font-weight: bold;
    font-size: 28px;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* Contenitore per i video */
.video-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Video stile base */
.video-item {
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    display: none;
    width: 100%;
}

/* Video attivo (mostrato nella galleria mobile) */
.video-item.active {
    display: block;
}

/* Frecce di navigazione */
.nav-arrow {
    position: absolute;
    top: 50%; /* Centrate in altezza */
    transform: translateY(-50%);
    font-size: 24px;
    color: white;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10;
    padding: 10px;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.nav-arrow:hover {
    opacity: 1;
}

/* Posizionamento delle frecce */
.prev-arrow {
    left: 10px;
}

.next-arrow {
    right: 10px;
}
/* Sezione per Desktop */
.desktop-section {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
}
/* Titolo */
.title {
    text-align: center;
    font-weight: bold;
    font-size: 24px;
    margin: 20px 0;
}
.left-column, .right-column {
    width: 300px;
    text-align: center;
}

.left-column h2, .right-column h2 {
    font-weight: bold;
    font-size: 20px;
}

.left-column p, .right-column p {
    font-size: 16px;
}

.product-image {
    width: 450px;
    height: 450px;
     border-radius: 20px;
}

.icon {
    width: 100px;
    height: 100px;
}

/* Sezione per Mobile */
.mobile-section {
    display: none;
}

.mobile-left-column, .mobile-right-column {
    text-align: center;
}

.mobile-left-column h2, .mobile-right-column h2 {
    font-weight: bold;
    font-size: 14px;
}

.mobile-left-column p, .mobile-right-column p {
    font-size: 12px;
}

.product-image-mobile {
    width: 100%;
    max-width: 350px;
     border-radius: 20px;
    height: auto;
}

.icon-mobile {
    width: 50px;
    height: 50px;
}

/* Bottom section */
.mobile-bottom-section {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}



.product-page-7 .banner {
    border: 3px solid #00aaff; /* Bordo banner */
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    background-color: #f9f9f9; /* Sfondo chiaro per contrasto */
    max-width: 600px;
    margin: 0 auto; /* Centrare il banner */
    margin-top: 40px; /* Aumenta lo spazio sopra */

}

.banner-image {
    width: 80px; /* Dimensione immagine */
    height: auto;
    margin-bottom: 15px;
}

.banner-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

.banner-subtitle {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #555;
}

.banner-description {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 20px;
    color: #666;
}

.button-container {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.buy-now-btn {
    background-color: #00aaff;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}
.cash-on-delivery-btn{
   background: #28a745; /* Verde */
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}



.buy-now-btn:hover, .cash-on-delivery-btn:hover {
    background-color: #0077cc;
}


/* Stile generale per il banner */
.product-page-8 .custom-banner-page-8 {
    background-color: #00aaff;
    color: white;
    text-align: center;
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
}

.banner-title-page-8 {
    font-size: 32px;
    color: white;
    font-weight: bold;
    margin-bottom: 10px;
}

.banner-subtitle-page-8 {
    font-size: 24px;
    color: white;
    font-weight: bold;
    margin-bottom: 20px;
}

.image-row-page-8 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Migliora l'allineamento orizzontale */
    gap: 20px;
    margin: 0 auto;
    max-width: 800px; /* Centra il contenitore delle immagini */
}

.image-container-page-8 {
    text-align: center;
    width: 175px;
}

.step-image-page-8 {
    width: 175px;
    height: 175px;
    border-radius: 20px; /* Arrotonda gli angoli */
    border: 3px solid white;
    object-fit: cover;
    margin: 0 auto 10px; /* Centro rispetto al testo */
}

.image-caption-page-8 {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

.product-page-11 {
    background-color: #f0f8ff; /* Colore di sfondo più chiaro di #00aaff */
    padding: 30px;
}

.faq-container {
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
}


.faq-box {
    background-color: white;
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.faq-question {
    background-color: #00aaff;
    color: white;
    border: none;
    padding: 10px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold; /* Testo in grassetto */
    border-radius: 5px;
}
.faq-answer {
    display: none;
    padding: 10px;
    background-color: #f9f9f9;
    margin-top: 10px;
    font-size: 14px;
    text-align: left;
}

.faq-question:hover {
    background-color: #005f99;
}

.faq-question:focus {
    outline: none;
}
.product-footer {
    background-color: #00aaff; /* Colore di sfondo */
    color: white; /* Colore del testo */
    width: 100%; /* Larghezza a tutto schermo */
    padding: 20px 0; /* Padding per il contenuto del footer */
}

.footer-content {
    text-align: center;
}

.footer-links {
    margin-bottom: 20px;
}

.footer-links a {
    display: block;
    color: white; /* Colore dei link */
    text-decoration: none; /* Rimuove la sottolineatura dai link */
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: bold; /* Link in grassetto */
}

.footer-links a:hover {
    color: #f0f0f0; /* Colore chiaro al passaggio del mouse */
}

.footer-bottom p {
    font-weight: bold; /* Testo in grassetto */
    font-size: 14px;
    margin-top: 20px;
}

/* Media Query per dispositivi desktop */
@media (min-width: 768px) {
   /* Ridurre la larghezza dell'input delle quantità per desktop */
    #quantity {
        width: 40px; /* Più stretto per desktop */
    }

    /* Distanza tra i pulsanti */
    .quantity-controls {
        gap: 15px; /* Aumenta il gap tra i pulsanti */
    }
    .footer-links {
        text-align: left;
        margin-left: 40px;
    }
    .footer-bottom {
        margin-top: 20px;
    }
    
    .faq-desktop {
        display: flex;
        justify-content: space-between;
    }

    .faq-column-left, .faq-column-right {
        width: 48%;
    }
    
    
   .reviews-container {
        max-width: 60%; /* Riduce la larghezza */
    }

    .reviews-filter {
        flex-direction: row;
    }

    .reviews-pagination {
        text-align: center;
    }
    
   .review-item {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .review-user {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .user-icon {
        height: 40px;
        width: 40px;
        border-radius: 50%;
    }
 .user-pic {
        width: 160px !important;
        height: 160px !important;
   /*      border-radius: 50%; */
    }
    .user-name {
        white-space: nowrap; /* Impedisce che il nome vada a capo */
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .review-title {
        font-weight: bold;
        color: black;
        white-space: nowrap; /* Evita che il titolo vada a capo */
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .review-text {
        margin-top: 5px;
    } 
    
  .product-page-4 .desktop-section {
    display: flex;
    justify-content: space-between; /* Spaziatura maggiore tra le sezioni */
    align-items: flex-start; 
    gap: 40px; /* Aumenta la distanza tra le colonne sinistra e destra */
  }

  .product-page-4 .left-column,
  .product-page-4 .right-column {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 20px;
  }

  .product-page-4 .left-column {
    align-items: flex-start; /* Allinea icone e contenuti a sinistra */
  }

  .product-page-4 .right-column {
    align-items: flex-end; /* Allinea icone e contenuti a destra */
  }

  /* Titoli allineati a sinistra */
  .product-page-4 .left-column h2,
  .product-page-4 .right-column h2 {
    text-align: left; /* Tutti i titoli allineati a sinistra */
    margin: 0;
  }

  /* Centra l'immagine centrale */
  .product-page-4 .image-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
  }

  .product-page-4 .product-image {
    max-width: 100%;
    border-radius: 20px;
  }

  /* Icone */
  .product-page-4 .icon {
    width: 100px;
    height: 100px;
    display: block;
  }
    
    
  .desktop-table {
        width: 100%;
        border-collapse: collapse;
    }

    .desktop-table td {
        padding: 10px;
        vertical-align: top;
    }

    .desktop-table .left-column, .desktop-table .right-column {
        width: 45%;
    }

    .desktop-table .image-container {
        width: 10%;
    }

    .product-image {
        width: 100%;
    }

    .icon {
        width: 100px;
        height: 100px;
    }
      .image-row-page-8 {
        justify-content: space-between; /* Distribuisce equamente gli spazi */
    }

    .banner-title-page-8 {
        font-size: 36px;
    }

    .banner-subtitle-page-8 {
        font-size: 28px;
    }

    .image-caption-page-8 {
        font-size: 18px;
    }
    
    
    
    
     .product-page-7 .banner {
        max-width: 1200px; /* Larghezza doppia per desktop */
        padding: 40px; /* Maggior padding */
        font-size: 18px;
       

    }

    .banner-image {
        width: 160px; /* Immagine più grande */
        margin-bottom: 20px;
    }

    .banner-title {
        font-size: 36px; /* Font più grande per il titolo */
        margin-bottom: 15px;
    }

    .banner-subtitle {
        font-size: 28px; /* Font più grande per il sottotitolo */
        margin-bottom: 20px;
    }

    .banner-description {
        font-size: 18px; /* Testo più leggibile */
        line-height: 1.8; /* Spaziatura maggiore */
    }

    .button-container {
        gap: 20px; /* Maggior spazio tra i pulsanti */
    }

    .buy-now-btn, .cash-on-delivery-btn {
        padding: 15px 25px; /* Pulsanti più grandi */
        font-size: 20px;
    }
    
    
    .desktop-section {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 30px;
    }

    .left-column {
        width: 300px;
        text-align: left; /* Allinea titolo e testo a sinistra */
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* Allinea anche le icone a sinistra */
        gap: 10px;
    }

    .right-column {
        width: 300px;
        text-align: left; /* Titolo e testo a sinistra */
        display: flex;
        flex-direction: column;
        align-items: flex-end; /* Allinea le icone a destra */
        gap: 10px;
    }

    .icon {
        width: 100px;
        height: 100px;
    }

    .product-image {
        width: 750px;
        height: 750px;
        border-radius: 20px;
    }
    .mobile-section {
        display: none;
    }
   .video-slider {
        display: flex;
        gap: 20px; /* Spazio tra i video */
    }

    .video-item {
        display: block; /* Mostra tutti i video */
        width: calc(25% - 20px); /* Quattro video affiancati */
        height: auto;
    }

    .nav-arrow {
        display: none; /* Nascondi le frecce su desktop */
    }
     .mobile-section {
        display: none;
        margin-top: 20px;
        clear: both;
    }
    .product-page {
        display: flex; /* Layout orizzontale */
        flex-direction: row;
        gap: 30px; /* Spazio tra immagine e dettagli */
        padding: 40px; /* Margine interno */
    }  
    .product-image-container {
        width: 50%; /* Larghezza metà schermo */
    }  
    .product-image {
        margin-bottom: 0; /* Nessun margine sotto l'immagine */
    }   
    .product-details {
        width: 50%; /* Larghezza metà schermo */
        padding: 20px; /* Aggiungi spazio interno per i dettagli */
    }   
    .product-title {
        font-size: 32px; /* Testo più grande per desktop */
        text-align: left; /* Allineamento a sinistra */
    }   
    .product-details h1 {
        font-size: 24px; /* Titolo dettagli più grande */
    }   
    .product-details p {
        font-size: 18px; /* Testo più leggibile su desktop */
    }   
    .button-container {
        flex-direction: row; /* Disporre i pulsanti in orizzontale */
        gap: 20px; /* Spazio tra i pulsanti */
        justify-content: flex-start; /* Allinea a sinistra */
    }   
    .buy-now-btn,
    .cash-on-delivery-btn {
        font-size: 18px; /* Pulsanti leggermente più grandi */
        padding: 15px 30px; /* Spazio maggiore nei pulsanti */
    }   
    .thumbnails {
        margin-top: 20px;
        gap: 10px; /* Spazio tra le miniature */
    }   
    .thumbnail {
        width: 80px;
        height: 80px;
    }  /* Frecce di navigazione */
    .arrow-left, .arrow-right {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        font-size: 24px;
        padding: 10px;
        cursor: pointer;
    }  
    .arrow-left {
        left: 10px;
    }   
    .arrow-right {
        right: 10px;
    }   
    .checkout-secure {
        margin-top: 30px; /* Spazio più ampio sopra su desktop */
    }    
    .checkout-secure p {
        font-size: 18px; /* Testo più grande su desktop */
    }    
    .checkout-secure .payment-logo {
        max-width: 400px; /* Logo più grande su desktop */
    }
    
    .description-text p {
    font-size: 28px; /* Imposta la dimensione del font */
    text-decoration: underline; /* Aggiunge la sottolineatura */
    font-weight: bold; /* Già impostato con <strong>, opzionale */
    margin-top: 0; /* Regola lo spazio superiore se necessario */
}
     
.description-text li {
    margin-top: 20px; /* Spazio sopra ogni paragrafo o elemento della lista */
    font-size: 20px; /* Dimensione del testo */
    color: #000; /* Colore del testo */
}
    .description-text ul {
    list-style: none; /* Rimuove i marker predefiniti */
    padding-left: 0; /* Allinea la lista a sinistra */
}

.description-text li {
    position: relative;
    padding-left: 40px; /* Aumenta lo spazio per la freccia e lo spazio */
}


.description-text li::before {
    content: '\27A4'; /* Freccia spessa a destra ➤ */
    position: absolute;
    left: 0; /* Posizione della freccia */
    color: #000; /* Colore della freccia */
    font-size: 20px; /* Dimensione della freccia */
}
    
    
    .mobile-section {
        display: none; /* Nascondi la sezione mobile */
    }

    .desktop-section {
        display: block; /* Mostra la sezione desktop */
        text-align: center;
        max-width: 1200px; /* Larghezza massima */
        margin: 0 auto; /* Centra la sezione */
        padding: 40px; /* Spazio interno */
    }

    .desktop-section img {
        width: 100%; /* Mantieni l'immagine responsiva */
        height: auto;
        max-width: 100%; /* Evita che superi il contenitore */
    }
    

}


 /* Media Query per dispositivi mobili */
@media (max-width: 768px) {
    
    .dynamic-text {
        font-size: 14px; /* Dimensione del testo mobile */
        font-weight: bold; /* Testo in grassetto */
    }
    
    
    /* Ridurre le dimensioni dei pulsanti per i dispositivi mobili */
    .btn-decrement, .btn-increment {
        font-size: 14px; /* Ridurre la dimensione del testo */
        width: 30px; /* Ridurre la larghezza */
        height: 30px; /* Ridurre l'altezza */
    }

     /* Ridurre la larghezza dell'input anche per smartphone */
    #quantity {
        width: 40px; /* Più stretto per adattarsi meglio a schermi piccoli */
    }
    
    /* Ridurre la spaziatura tra gli elementi */
    .quantity-controls {
        gap: 5px; /* Ridurre il gap per guadagnare spazio */
    }

    .btn-purchase, .btn-cod {
        font-size: 14px; /* Ridurre la dimensione del testo */
        padding: 6px 12px; /* Ridurre la dimensione dei padding */
    }

    /* Ridurre la spaziatura tra gli elementi */
    .sticky-footer {
        padding: 8px 15px;
    }
    
    
    .footer-links {
        text-align: center;
        margin-top: 20px;
    }
    
    
    .faq-mobile {
        display: block;
    }

    .faq-box {
        margin-bottom: 20px;
    }

    .faq-column-left, .faq-column-right {
        width: 100%;
    }
    
    
   .reviews-container {
        padding: 15px;
    }

    .reviews-header .rating-stars {
        font-size: 1.2em;
    }

    .reviews-header h2 {
        font-size: 1.5em;
        font-weight: bold;
    }

    .reviews-header h3 {
        font-size: 1.2em;
        font-weight: bold;
    }

    .histogram-bar-container {
        width: 100%;
        max-width: 100px;
    }

    .reviews-filter {
        flex-direction: column;
        align-items: flex-start;
    }

    .review-item {
        padding: 10px;
    }

    .review-item img {
        margin-bottom: 5px;
    }

    .review-item .user-info {
        flex-direction: row;
        gap: 10px;
        white-space: nowrap; /* Evita che il nome vada a capo */
    }

    .review-item .title {
        font-weight: bold;
        color: #000;
        white-space: nowrap; /* Evita il capo riga */
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .review-text {
        margin-top: 10px;
    }
    
    .review-item {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .review-stars {
        justify-content: flex-start; /* Stelline allineate a sinistra */
    }

    .stars-image {
        height: 20px; /* Dimensione normale per le stelline */
        width: auto;
    }

    .user-name,
    .review-title {
        white-space: nowrap; /* Evita che vadano a capo */
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
     .star {
        font-size: 16px;
    }

    .reviews-filter select {
        padding-right: 25px; /* Adatta il padding per la freccia */
    }
    
      .btn-purchase, .btn-cod {
        font-size: 14px;
        padding: 6px 10px;
    }

    #quantity {
        width: 40px;
    }
    
    
    
   .image-row-page-8 {
        flex-direction: column; /* Dispone immagini una sotto l’altra */
        align-items: center; /* Centra immagini e testo */
        gap: 20px;
    }

    .image-container-page-8 {
        width: 80%; /* Mantiene le immagini più grandi e centrate */
    }

    .step-image-page-8 {
        width: 100%; /* Immagini ridimensionate per lo schermo mobile */
        max-width: 175px; /* Limita la larghezza */
    }

    .banner-title-page-8 {
        font-size: 24px;
    }

    .banner-subtitle-page-8 {
        font-size: 18px;
    }

    .image-caption-page-8 {
        font-size: 14px; /* Font ridotto per lo smartphone */
    }
    
    
    
    
   
    
    .desktop-section {
        display: none;
    }

    .mobile-section {
        display: flex;
        flex-direction: column; /* Layout verticale per organizzare sezioni */
        gap: 10px;
        padding: 10px; /* Spazio dai bordi dello schermo */
        box-sizing: border-box;
    }

    /* Colonne sopra l'immagine */
    .mobile-left-column, .mobile-right-column {
        width: 48%; /* Ogni colonna occupa il 48% della larghezza */
        text-align: left;
        display: flex;
        flex-direction: column;
        gap: 10px;
        box-sizing: border-box;
    }

    /* Contenitore per le colonne sopra l'immagine */
    .mobile-section > .mobile-left-column, 
    .mobile-section > .mobile-right-column {
        display: inline-flex; /* Colonne affiancate */
    }

    /* Contenitore immagine */
    .mobile-image-container {
        width: 100%; /* L'immagine occupa l'intera larghezza */
        text-align: center;
        margin: 10px 0;
    }

    /* Sezione inferiore */
    .mobile-bottom-section {
        display: flex; /* Mantiene le colonne affiancate */
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 10px;
        padding: 10px;
        box-sizing: border-box;
    }

    .icon-mobile {
        width: 50px;
        height: 50px;
    }

    .product-image-mobile {
        width: 100%;
        max-width: 350px;
        border-radius: 20px;
        height: auto;
    }


.video-slider {
        display: flex;
        position: relative;
        overflow: hidden; /* Mostra solo un video alla volta */
    }

    .video-item {
        width: 100%; /* Video a tutta larghezza */
    }
  
    .mobile-section {
        display: block;
    }
    
    .menu-icon {
        font-size: 20px;
        cursor: pointer;
    }

    .shipping-info {
        font-size: 12px; /* Riduci la dimensione del testo */
        margin: 0;
         font-weight: bold; /* Grassetto */
    }

   .side-menu {
        width: 60%;
        left: -60%; /* Nascondi fuori dalla vista */
    }

    .side-menu.open {
        left: 0;
    }

       .bundle-offer {
        padding: 5px !important;
        margin-top: 5px !important;
        width: 90% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .offer-title {
        font-size: 12px !important;
    }

    .offer-title::before,
    .offer-title::after {
        width: 30% !important;
    }

    /* Rendere la bundle-option a una sola riga */
    .bundle-option {
        display: flex !important;
        justify-content: center !important; /* Centra su mobile */
        align-items: center !important;
        padding: 10px !important;
        font-size: 14px !important;
        border: 2px solid #ddd !important;
        border-radius: 5px !important;
        background: #ffffff !important;
        color: #333 !important;
    }

    .bundle-option .option-details {
        display: inline-block !important; /* Inline-block per centratura */
        text-align: center !important;
        font-size: 14px !important;
        white-space: nowrap !important; /* Impedisce il ritorno a capo */
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .bundle-footer-shipping {
        font-size: 14px !important;
    }

    .bundle-footer {
        display: flex !important;
        justify-content: center !important; /* Centra il pulsante */
        align-items: center !important;
        font-size: 10px !important;
    }

    .buy-btn {
        width: 100% !important; /* Largo come i pulsanti option */
        padding: 10px !important; /* Altezza uniforme */
    /*     background: #005f99 !important; Blu */
         background: #28a745 !important;
        
        color: white !important;
        font-size: 14px !important; /* Ridotto per mobile */
        font-weight: bold !important;
        border: none !important;
        border-radius: 5px !important;
        cursor: pointer !important;
    }
    .discount-tag {
        background-color: #ffcc00;
        padding: 1px 3px;
        border-radius: 3px;
        font-size: 10px; /* Ridurre il testo del tag di sconto */
    }

  .button-container {
        flex-direction: column; /* Disporre i pulsanti in verticale */
        gap: 20px;
    }

    .buy-now-btn
    {
        font-size: 16px;
        padding: 10px;
    }
 .cash-on-delivery-btn
     {
        font-size: 16px;
        padding: 10px;
    }
    
    .price-container {
        gap: 15px; /* Puoi ridurre lo spazio nei dispositivi mobili */
    }
    
     .product-page {
        flex-direction: column;
        padding: 20px;
    }
     
     .product-page-1 {
        flex-direction: column;
        padding: 5px;
    }
    .product-page-2 {
        flex-direction: column;
        padding: 20px;
    }
     .product-page-3 {
        flex-direction: column;
        padding: 20px;
    }
   
  /* Colonne superiori - mobile-up-section */
.product-page-4 .mobile-up-section {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 20px;
}

/* Colonne sinistra e destra (per entrambe le sezioni, superiore e inferiore) */
.product-page-4 .mobile-left-column,
.product-page-4 .mobile-right-column {
    display: flex;
    flex-direction: column;
    align-items: center;  /* Centra icona e testo */
    justify-content: flex-start;
    width: 48%;
}

/* Titoli */
.product-page-4 .mobile-left-column h2,
.product-page-4 .mobile-right-column h2 {
    margin-top: 10px;
    text-align: center;
    font-size: 18px;  /* Regola la dimensione del font */
}

/* Immagine prodotto */
.product-page-4 .product-image-mobile {
    max-width: 100%;
    border-radius: 20px;
    margin-top: 20px;
}

/* Icone - Colonne sinistra e destra */
.product-page-4 .icon-mobile {
    width: 50px;
    height: 50px;
    display: block;
    margin: 0 auto;  /* Centra l'icona */
}

/* Colonne inferiori (mobile-bottom-section) */
.product-page-4 .mobile-bottom-section {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 20px;
}

/* Allineamento corretto delle icone e dei testi (colonne inferiori) */
.product-page-4 .mobile-bottom-section .mobile-left-column,
.product-page-4 .mobile-bottom-section .mobile-right-column {
    display: flex;
    flex-direction: column;
    align-items: center; /* Allineamento centralizzato per icona e testo */
    justify-content: flex-start;
    width: 48%;
}

/* Forzare allineamento verticale uniforme delle icone (colonne superiori e inferiori) */
.product-page-4 .mobile-left-column,
.product-page-4 .mobile-right-column {
    display: flex;
    flex-direction: column;
    align-items: center;  /* Centra icona e testo */
    justify-content: center;
    text-align: center;
}

/* Miglioramento allineamento delle icone e dei testi (colonne superiori e inferiori) */
.product-page-4 .mobile-left-column img,
.product-page-4 .mobile-right-column img {
    margin: 0; /* Evita margini indesiderati */
    padding: 0; /* Elimina padding */
}
     .product-page-5 {
        flex-direction: column;
        padding: 20px;
    }
    
     /* Controlla il padding del titolo e della lista */
    .product-page-2 .description-text p,
    .product-page-5 .description-text p {
        margin-bottom: 10px;
    }

    .product-page-2 ul,
    .product-page-5 ul {
        padding-left: 20px; /* Assicurati che la lista non tocchi il bordo */
        margin-left: 0; /* Rimuovi eventuali margini indesiderati */
    }

    .product-page-2 li,
    .product-page-5 li {
        margin-bottom: 8px; /* Regola la distanza tra gli elementi della lista */
    }
    
    
     .product-page-6 {
        flex-direction: column;
        padding: 20px;
    }
    .product-image-container {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .product-image {
        position: relative; /* Necessario per posizionare le frecce */
        width: 100%;
        height: 100%; /* Assicurati che l'altezza non venga modificata */
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0; /* Rimuove margini esterni */
        padding: 0; /* Rimuove padding extra */
        margin-bottom: 10px; /* Aggiungi spazio sotto l'immagine */
    }

    .product-image img {
        height: 100%; /* Assicurati che l'immagine occupi tutta l'altezza */
        width: 100%; /* L'immagine principale occupa tutto lo spazio */
        object-fit: contain; /* Per mantenere la proporzione dell'immagine */
        margin: 0; /* Rimuove margini esterni */
    }

    .product-title {
        font-size: 24px;
        text-align: center;
        margin: 0; /* Rimuove margine superiore */
    }

    .product-details h1 {
        font-size: 18px;
        margin: 0; /* Rimuove margine superiore */
    }

    .product-details p {
        font-size: 16px;
    }

    .buy-now-btn {
        font-size: 16px;
        padding: 10px;
    }

    .cash-on-delivery-btn
     {
        font-size: 16px;
        padding: 10px;
        background: #28a745; /* Verde */
        color: #fff;
    }
    
    /* Aggiungere una distanza tra l'immagine e le miniature */
    .thumbnails {
        margin-top: 15px; /* Aggiungi spazio sopra le miniature */
        gap: 5px; /* Spazio tra le miniature */
    }

    .thumbnail {
        width: 60px;
        height: 60px;
        border: 1px solid transparent;
    }

    .thumbnail img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Frecce di navigazione */
    .arrow-left, .arrow-right {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        font-size: 24px;
        padding: 10px;
        cursor: pointer;
    }

    .arrow-left {
        left: 10px;
    }

    .arrow-right {
        right: 10px;
    }

    .faq-item button {
         font-size: 20px;
        padding: 10px;
    }

    .faq-item .content {
        font-size: 14px;
    }
    
  /* Stile generale per il blocco Checkout Sicuro */
.checkout-secure {
    display: flex;
    flex-direction: column; /* Disposizione verticale */
    align-items: center; /* Centro orizzontale */
    justify-content: center; /* Centro verticale */
    margin-top: 20px; /* Spazio sopra */
}

.checkout-secure p {
    font-size: 18px; /* Dimensione testo */
    font-weight: bold; /* Grassetto */
    margin-bottom: 10px; /* Spazio tra il testo e l'immagine */
    text-align: center; /* Allinea al centro */
}

.checkout-secure .payment-logo {
    max-width: 484px; /* Larghezza massima per desktop */
    width: 100%; /* Adatta alla larghezza disponibile */
    height: auto; /* Mantieni le proporzioni */
}

/* Stile specifico per dispositivi mobili */

    .checkout-secure {
        margin-top: 15px; /* Spazio ridotto sopra */
    }

    .checkout-secure p {
        font-size: 16px; /* Testo leggermente più piccolo su mobile */
    }

    .checkout-secure .payment-logo {
        max-width: 182px; /* Riduci larghezza massima a metà */
        width: 50%; /* Assicura che sia più piccola */
        height: auto; /* Mantieni proporzioni */
    }
 
 /* Sezioni aggiuntive */
    .product-description-section
    {
        width: 100%; /* Larghezza piena */
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        gap: 20px; /* Spazio tra gli elementi */
    }

    .description-text, .description-image {
        width: 100%; /* Elementi a tutta larghezza */
        text-align: center;
    }

    .description-text p {
    font-size: 28px; /* Imposta la dimensione del font */
    text-decoration: underline; /* Aggiunge la sottolineatura */
    font-weight: bold; /* Già impostato con <strong>, opzionale */
    margin-top: 0; /* Regola lo spazio superiore se necessario */
}
    
    .description-text ul {
    list-style: none; /* Rimuove i marker predefiniti */
    padding-left: 0; /* Allinea la lista a sinistra */
}

.description-text li {
    position: relative;
    padding-left: 40px; /* Aumenta lo spazio per la freccia e lo spazio */
}

.description-text li::before {
    content: '\27A4  '; /* Freccia spessa a destra ➤ */
    position: absolute;
    left: 0; /* Posizione della freccia */
    color: #000; /* Colore della freccia */
    font-size: 20px; /* Dimensione della freccia */
}

.description-text li {
    margin-top: 20px; /* Spazio sopra ogni paragrafo o elemento della lista */
    font-size: 20px; /* Dimensione del testo */
    color: #000; /* Colore del testo */
     text-align: justify; /* Giustifica il testo */
}   

    
    /* Titolo del prodotto */
    .product-title {
        font-size: 32px;
        text-align: left;
    }
    .description-image-img {
        width: 350px;
        height: 350px;
    }
  
  /* Sezione per smartphone */
.mobile-section {
    display: flex;
    flex-direction: column; /* Layout verticale per organizzare sezioni */
    gap: 10px;
    padding: 10px; /* Spazio dai bordi dello schermo */
    box-sizing: border-box;
}

.desktop-section {
    display: none; /* Nascondi nella visualizzazione mobile */
}   
     
/* Fix per smartphone */
@media (max-width: 768px) {
    .product-price .old-price,
    .product-price .old-first-price {
        text-decoration-thickness: 4px; /* Ancora più visibile su mobile */
    }
}
    
    
}