/* ========================================================= Picture Thumbs Carousel - Tema OGuns (nopCommerce 4.30) Carosello orizzontale per le thumbnail prodotto con: - scroll "a pagina" tramite frecce - evidenziazione della thumbnail attiva - swipe touch su mobile - larghezza thumb responsive via calc() + variabili CSS - anti-FOUC: le thumb sono gia' dimensionate al primo render Le frecce e il carosello si attivano solo oltre la soglia definita in picture-thumbs-carousel.js (threshold). ========================================================= */ /* --------------------------------------------------------- ANTI-FOUC La classe .ptc-init viene messa su da uno script sincrono nel , PRIMA che la pagina venga disegnata. Cosi' le thumb partono gia' dimensionate come nel carosello, senza il flash "tutte su una riga che si rimpicciolisce". Il JS rimuove .ptc-init a setup completato. --------------------------------------------------------- */ /* Variabili condivise: valgono sia in fase pre-JS (.ptc-init) sia dopo, sul wrapper creato dal JS. */ html.ptc-init .picture-thumbs, .picture-thumbs-wrapper .picture-thumbs { --thumbs-visible: 4; --thumbs-gap: 8px; } /* Stato iniziale (pre-JS): il contenitore e' gia' flex, con overflow nascosto e thumb gia' della larghezza giusta. Niente "salto" quando il JS prende il controllo. */ html.ptc-init .picture-thumbs { display: flex; flex-wrap: nowrap; gap: var(--thumbs-gap); overflow: hidden; } html.ptc-init .picture-thumbs .thumb-item { box-sizing: border-box; flex: 0 0 calc((100% - (var(--thumbs-gap) * (var(--thumbs-visible) - 1))) / var(--thumbs-visible)); max-width: calc((100% - (var(--thumbs-gap) * (var(--thumbs-visible) - 1))) / var(--thumbs-visible)); width: auto; margin: 0; padding: 0; border: 2px solid transparent; border-radius: 4px; } html.ptc-init .picture-thumbs .thumb-item img { width: 100%; height: auto; display: block; } /* --------------------------------------------------------- Stato a regime (dopo il JS): wrapper + frecce --------------------------------------------------------- */ .picture-thumbs-wrapper { position: relative; display: flex; align-items: center; margin-top: 10px; } .picture-thumbs-wrapper .picture-thumbs { display: flex; flex-wrap: nowrap; overflow-x: hidden; scroll-behavior: smooth; flex: 1; gap: var(--thumbs-gap); -webkit-overflow-scrolling: touch; /* scroll fluido su iOS */ } .picture-thumbs-wrapper .picture-thumbs .thumb-item { box-sizing: border-box; flex: 0 0 calc((100% - (var(--thumbs-gap) * (var(--thumbs-visible) - 1))) / var(--thumbs-visible)); max-width: calc((100% - (var(--thumbs-gap) * (var(--thumbs-visible) - 1))) / var(--thumbs-visible)); width: auto; margin: 0; padding: 0; border: 2px solid transparent; border-radius: 4px; transition: border-color 0.2s ease; } .picture-thumbs-wrapper .picture-thumbs .thumb-item img { width: 100%; height: auto; display: block; } /* Thumbnail attiva - arancione accent OGuns */ .picture-thumbs-wrapper .picture-thumbs .thumb-item.active { border-color: #ff4f00; } /* --------------------------------------------------------- Responsive: cambia solo il numero di thumb per pagina. Larghezza e gap si ricalcolano da soli. --------------------------------------------------------- */ /* Tablet: 3 thumb per pagina */ @media (max-width: 991px) { html.ptc-init .picture-thumbs, .picture-thumbs-wrapper .picture-thumbs { --thumbs-visible: 3; } } /* Mobile: 3 thumb per pagina (porta a 2 se le vuoi piu' grandi) */ @media (max-width: 575px) { html.ptc-init .picture-thumbs, .picture-thumbs-wrapper .picture-thumbs { --thumbs-visible: 3; } } /* Frecce di navigazione */ .thumb-nav { background: rgba(0, 0, 0, 0.5); color: #fff; border: none; cursor: pointer; padding: 10px 12px; font-size: 18px; line-height: 1; z-index: 2; flex: 0 0 auto; user-select: none; } .thumb-nav:hover { background: rgba(0, 0, 0, 0.7); } .thumb-nav:disabled { opacity: 0.3; cursor: default; } /* Le frecce compaiono solo quando il carosello e' attivo */ .picture-thumbs-wrapper:not(.is-carousel) .thumb-nav { display: none; }