/* Testarossa – visualizzatore 3D grip */
.tgv{max-width:720px;margin:0 auto}
.tgv-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 10px}
.tgv-btns button{border:1px solid #6b8f96;background:transparent;color:#6b8f96;padding:6px 16px;border-radius:18px;cursor:pointer;font:inherit;font-size:.95rem}
.tgv-btns button.on{background:#6b8f96;color:#fff}
.tgv-stage{position:relative;width:100%;aspect-ratio:1/1;max-height:70vh;touch-action:none}
.tgv-stage canvas{display:block;width:100%!important;height:100%!important}
.tgv-msg,.tgv-custom{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;color:#6b8f96;pointer-events:none;padding:20px}
.tgv-hint{text-align:center;font-size:.85rem;color:#8a8a8a;margin-top:6px}
/* L'attributo hidden va rinforzato: .tgv-custom ha display:flex, che altrimenti batte [hidden] dello user-agent (stessa lezione del lightbox Galleria) */
.tgv [hidden]{display:none!important}
/* Pagina GRIP - segnaposto per l'immagine del profilo con le tre inclinazioni del polso (2026-09-24) */
.testarossa-grip3d{margin:0 auto 32px}
.testarossa-grip3d-immagine{max-width:720px;margin:0 auto 32px;padding:48px 20px;border:1px dashed #6b8f96;color:#6b8f96;text-align:center;opacity:.85}
/* Sul sito i pulsanti forma usano il TASTO standard (.testarossa-btn, testarossa-design-system.css): qui solo
   bordo arrotondato/padding del TASTO e lo stato selezionato, che riprende il teal pieno di .testarossa-btn--ok.
   !important pareggiato perche' .testarossa-btn dichiara gia' !important su sfondo/bordo/colore (2026-09-24) */
.tgv-btns button.testarossa-btn{border-radius:4px;padding:10px 20px;font-size:.8em}
.tgv-btns button.testarossa-btn.on,.tgv-btns button.testarossa-btn.on:hover,.tgv-btns button.testarossa-btn.on:focus{background-image:none!important;background-color:var(--testarossa-teal,#6b8f96)!important;border-color:var(--testarossa-teal,#6b8f96)!important;color:#1c2426!important}
/* Scheda prodotto GRIP: il visualizzatore occupa la colonna della galleria immagini (stessa larghezza 593px
   e stesso margine di body.single-product .woocommerce-product-gallery in testarossa-design-system.css) */
body.single-product .testarossa-grip3d-colonna{margin-bottom:12px}
body.single-product .testarossa-grip3d-colonna .testarossa-grip3d{margin:0}
@media screen and (min-width:48em){body.single-product.woocommerce div.product>.testarossa-grip3d-colonna{flex:0 0 593px;width:593px;max-width:593px}}
/* Grassetto dei testi GRIP piu' leggero (2026-09-24, richiesta utente: "a meta' tra quello e il normale"): il tema da' 700,
   reso col file 800 di Libre Franklin (esistono solo 300/400/600/800) - 600 e' il peso reale intermedio, gia' caricato dal sito.
   Solo pagina GRIP e descrizione del prodotto GRIP (questo file si carica solo li'). */
body.testarossa-layout-grip3d .entry-content strong,body.single-product .woocommerce-Tabs-panel--description strong{font-weight:600}
/* Immagine delle inclinazioni del polso (2026-09-24). Pagina GRIP: affiancata al visualizzatore da 69em in su
   (altezza e allineamento al riquadro 3D calcolati in grip3d-init.js), impilata sotto su mobile. */
.testarossa-grip3d-affiancati{display:flex;flex-direction:column;align-items:center;gap:16px;margin:0 auto 32px}
.testarossa-grip3d-affiancati .testarossa-grip3d{margin:0;width:100%}
.testarossa-grip3d-angoli-pagina{margin:0;display:flex;align-items:center;justify-content:center}
.testarossa-grip3d-angoli-pagina img{display:block;width:auto;max-width:100%;height:auto}
/* affiancati solo quando entrambi ci stanno a piena misura: riquadro 3D 600px + 24px + immagine ~380px = ~1004px di colonna
   testo, cioe' finestra >= 69em (1104px: la colonna e' la finestra meno 96px di margini del tema). Sotto, impilati con il 3D
   sopra a piena larghezza - prima (soglia 48em + riquadro comprimibile) in quella fascia il 3D si schiacciava fino a sparire. */
@media screen and (min-width:69em){.testarossa-grip3d-affiancati{flex-direction:row;align-items:flex-start;justify-content:center;gap:24px}.testarossa-grip3d-affiancati .testarossa-grip3d{flex:0 0 600px}.testarossa-grip3d-angoli-pagina{flex:0 0 auto}}
/* Scheda prodotto: al posto del 3D quando si sceglie POLSO; il <button> e' ripulito dallo stile bottone del tema */
.testarossa-grip3d-angoli[hidden]{display:none!important}
.testarossa-grip3d-angoli-img{display:flex;align-items:center;justify-content:center;width:100%;background:none!important;border:0!important;padding:0!important;margin:0;box-shadow:none!important;cursor:pointer;line-height:0}
.testarossa-grip3d-angoli-img img{display:block;width:auto;max-width:100%;height:auto}