/* Presentazione della scheda prodotto - Synthassi
   Palette del brand: bianco e nero, Lato, spigoli netti.

   10/08/2026, quarta tornata. Due passate distinte, in quest'ordine:
   1. CONSOLIDAMENTO, a pixel zero: tolte le dichiarazioni morte, unificati i
      blocchi scritti due o tre volte, dichiarato chi vince nella cascata.
   2. LIVELLO 1: il file non vale piu' per due sole schede ma per tutte
      (tranne i due prodotti-servizio, 3230 e 3247), e le tre regole che
      perdevano contro il Customizer sono state portate a (0,3,0).
   Backup di entrambi gli stati in uploads/synthassi-backup/.

   ⚠️ Questo file e' PRESENTAZIONE. Il contenuto specifico del Trilogy
   (selettore di formato, guida misure degli anelli, etichette del bundle,
   rassicurazioni) resta nel PHP e resta agganciato ai soli 372 e 1675: sono
   cose vere solo li'. Non spostare regole di contenuto qui dentro.

   ---------------------------------------------------------------------------
   LA REGOLA DI CASCATA DA CONOSCERE PRIMA DI TOCCARE QUESTO FILE
   ---------------------------------------------------------------------------
   Questo file e' accodato con wp_enqueue_style(..., array('flatsome-main'))),
   quindi esce nella <head> PRIMA del blocco <style id="wp-custom-css"> del
   Customizer. A parita' di specificita' e di !important vince chi e' stampato
   dopo: vince SEMPRE il Customizer.

   Le regole del Customizer che collidono con questo file (tutte a (0,2,0),
   tutte dentro @media (max-width:768px), md5 4bcfde3d005ae74c8462d1a0a6a6ae3f):
     .single-product .woocommerce-product-rating { margin-bottom:12px!important }
     .single-product .joly-review-count          { margin-bottom:16px!important }
     .single-product .product-short-description  { margin-bottom:24px!important }
     .single-product .price-wrapper              { margin-top:16px!important;
                                                   margin-bottom:24px!important }
     .single-product form.cart                   { margin-top:20px!important }
     .single-product form.cart > *:not(.wpcpb-bundle-products)
        :not(.wpcpb-alert):not(.wpcpb-bundle-summary) { margin-bottom:8px!important }

   Quindi: per avere l'ultima parola da questo file serve (0,3,0), cioe' un
   terzo selettore di classe (es. .col-inner). Dove qui sotto una regola sta
   a (0,2,0) su una di quelle proprieta', NON funziona: e' segnalata a voce.
   ⚠️ `single-product` e' una classe del BODY: si scrive `.x.single-product .y`,
   mai `body.x .single-product .y`, che non aggancia nulla.
   --------------------------------------------------------------------------- */


/* ==========================================================================
   1. Componenti nostri
   ========================================================================== */

/* ---- Selettore di formato ---- */
.joly-formati{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 6px}
.joly-formato{position:relative;display:block;border:1.5px solid #E5E5E5;background:#fff;padding:10px 12px;text-decoration:none;color:#131313;border-radius:0;transition:border-color .15s}
.joly-formato:hover{border-color:#9A9A9A;color:#131313}
.joly-formato.is-attivo{border-color:#131313;box-shadow:0 0 0 1px #131313;background:#FAFAFA}
.joly-formato__nome{display:block;font-size:12px;color:#6E6E6E;line-height:1.3}
.joly-formato__prezzo{display:block;font-weight:700;font-size:19px;margin-top:2px;line-height:1.2;color:#131313}
.joly-formato__prezzo .amount{font-size:19px;color:#131313}
.joly-formato__tag{position:absolute;top:-9px;right:8px;background:#131313;color:#fff;font-size:10px;font-weight:700;padding:3px 8px;letter-spacing:.03em;white-space:nowrap;border-radius:0}
/* Tolte le due regole su `del` e `ins` dentro .joly-formato__prezzo: il prezzo
   lo costruisce wc_price() nello snippet (riga 227), che stampa solo l'importo
   formattato e non produce mai barrato/offerta. Erano codice morto, e quella su
   `del` sarebbe diventata dannosa il giorno in cui si passasse a
   get_price_html(): nasconderebbe il prezzo precedente che l'Omnibus impone di
   mostrare. Se un domani serve il prezzo scontato, si riparte da qui. */

/* Riga spedizione dentro la scheda formato (10/08 sera, richiesta di Andrea):
   il costo si legge dove si sceglie, non al checkout. Grigio e piccola: e'
   informazione di servizio, non deve competere col prezzo. */
.joly-formato__sped{display:block;font-size:11px;line-height:1.3;color:#6E6E6E;margin-top:3px}
.joly-formato__sped .amount{font-size:11px;color:#6E6E6E;font-weight:700}
.joly-formato__sped .woocommerce-Price-currencySymbol{font-size:11px}

/* ---- Guida misure ---- */
.joly-guida-riga{margin:0 0 6px;text-align:right}
.joly-guida-link{font-size:13px;font-weight:700;color:#131313;text-decoration:underline;text-underline-offset:3px}
.joly-size-hint{font-size:13px!important;font-weight:700!important;color:#131313!important;letter-spacing:.05em;text-transform:uppercase;margin:10px 0 2px!important}

/* ---- Rassicurazioni compatte ---- */
.joly-fiducia{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 0}
.joly-chip{border:1px solid #E5E5E5;background:#fff;padding:9px 6px;text-align:center;font-size:11px;line-height:1.35;color:#3A3A3A;border-radius:0}
.joly-chip b{display:block;font-size:11px;color:#131313}
.joly-pagamenti{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:12px}
.joly-pagamenti span{border:1px solid #E5E5E5;background:#fff;font-size:10.5px;font-weight:700;padding:4px 8px;color:#3A3A3A;letter-spacing:.02em;border-radius:0}
.joly-cod{text-align:center;color:#6E6E6E;font-size:11.5px;margin:8px 0 0;line-height:1.5}
.joly-cod a{color:#131313;text-decoration:underline}

/* ---- Foto degli anelli indossati (solo schede Trilogy) ----
   Prima stava nel layout globale, preceduta da un distanziatore da 60px del
   costruttore di pagine. Qui lo stacco e' 16px: il vuoto da 60 serviva a
   staccarla dal blocco CTA, ma ora sopra ci sono gia' chip, pagamenti e riga
   contrassegno, che fanno da separazione da soli. */
.joly-foto-indossata{margin-top:16px}
.joly-foto-indossata img{width:100%;height:auto;display:block}

/* ---- Scheda guida misure che si apre in pagina ---- */
.joly-sheet-velo{position:fixed;inset:0;background:rgba(19,19,19,.45);z-index:9998;opacity:0;transition:opacity .25s}
.joly-sheet-velo.is-aperta{opacity:1}
.joly-sheet{position:fixed;left:0;right:0;bottom:0;z-index:9999;background:#fff;border-top:1px solid #E5E5E5;padding:16px 20px 26px;max-height:82vh;overflow-y:auto;transform:translateY(102%);transition:transform .3s cubic-bezier(.3,.9,.3,1);border-radius:0}
.joly-sheet.is-aperta{transform:translateY(0)}
.joly-sheet__grab{width:36px;height:4px;background:#DCDCDC;margin:0 auto 14px}
.joly-sheet h3{font-size:21px;font-weight:700;margin:0 0 12px;color:#131313}
.joly-passi{margin:0 0 12px;padding-left:20px}
.joly-passi li{font-size:13.5px;line-height:1.55;color:#3A3A3A;margin-bottom:7px}
.joly-tabella-wrap{overflow-x:auto;margin:0 0 12px}
.joly-tabella{width:100%;border-collapse:collapse;font-size:13px}
.joly-tabella th,.joly-tabella td{border:1px solid #E5E5E5;padding:7px 6px;text-align:center}
.joly-tabella th{background:#F2F2F2;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:#131313}
.joly-nota{font-size:12.5px;line-height:1.55;color:#3A3A3A;margin:0 0 12px}
.joly-sheet__aiuto{background:#F5F5F5;border:1px solid #E0E0E0;padding:12px 14px;font-size:12.5px;line-height:1.55;color:#333}
.joly-sheet__aiuto a{color:#131313;text-decoration:underline}
.joly-sheet__chiudi{width:100%;height:50px;margin-top:14px;border:0;background:#131313;color:#fff;font-family:inherit;font-weight:700;font-size:14.5px;cursor:pointer;border-radius:0}


/* ==========================================================================
   2. Elementi del tema, su tutte le larghezze
   ========================================================================== */

/* ---- Spigoli netti ---- */
.single-product .joly-formato,
.single-product .joly-chip,
.single-product .variable-items-wrapper .variable-item,
.single-product .single_add_to_cart_button,
.single-product .sticky-add-to-cart button,
.single-product .sticky-add-to-cart .button{border-radius:0!important}

/* ---- Pillole misura ---- */
.single-product .variable-items-wrapper .variable-item{border:1.5px solid #E5E5E5!important;box-shadow:none!important;min-width:46px;height:42px;background:#fff!important}
.single-product .variable-items-wrapper .variable-item.selected{border-color:#131313!important;background:#131313!important;box-shadow:none!important}
.single-product .variable-items-wrapper .variable-item.selected .variable-item-span{color:#fff!important;font-weight:700}

/* ---- Bottone principale ----
   (0,2,0) senza !important e batte comunque il Customizer, che sul bottone
   scrive a (0,1,0): .single_add_to_cart_button e .button,.single_add_to_cart_button.
   Restano al Customizer i soli stati :active/:focus/.added, che sono a (0,2,0)
   con !important - voluto, sono stati transitori. */
.single-product .single_add_to_cart_button{width:100%;height:54px;font-size:16px;font-weight:700;letter-spacing:.02em;background:#131313;border-color:#131313;color:#fff}
.single-product .single_add_to_cart_button:hover{background:#000;border-color:#000}
.single-product .single_add_to_cart_button.disabled,
.single-product .single_add_to_cart_button:disabled{background:#EAEAEA;border-color:#EAEAEA;color:#9A9A9A}

/* ---- Barra fissa ---- */
.sticky-add-to-cart{border-top:1px solid #E5E5E5}
.sticky-add-to-cart .price,.sticky-add-to-cart .amount{color:#131313;font-weight:700}

/* Flatsome costruisce la barra fissa CLONANDO tutto il `form.cart`, e nel form
   di queste schede c'e' anche il blocco rassicurazioni del tema child. Risultato
   misurato su Ellipse (2467) il 10/08: barra alta 285px, cioe' un terzo dello
   schermo coperto da informazioni gia' presenti in pagina, con l'elenco
   "Consegna / Reso / Pagamenti / WhatsApp" ripetuto dentro una barra che serve
   solo a comprare. Nascondendo i duplicati la barra scende a 148px e il bottone
   resta intero (325x54).
   ⚠️ Non e' un difetto che abbiamo introdotto noi: senza il nostro CSS la barra
   era gia' 266px. Si vede adesso perche' prima queste schede non le guardavamo.
   Inerte su 372 e 1675, dove la barra e' alta 58px e non contiene nulla di
   tutto questo (verificato). */
.single-product .sticky-add-to-cart .joly-cta-reassure,
.single-product .sticky-add-to-cart .joly-fiducia,
.single-product .sticky-add-to-cart .joly-pagamenti,
.single-product .sticky-add-to-cart .joly-cod,
.single-product .sticky-add-to-cart .joly-size-guide,
.single-product .sticky-add-to-cart .joly-guida-riga{display:none!important}

/* ---- Stelle recensioni: oro, non grigio ----
   Con il colore ereditato dal tema sembrava che le recensioni non ci fossero.
   ⚠️ Il colore delle stelle PIENE va scritto sullo pseudo-elemento, non sul
   contenitore: il tema lo imposta direttamente su .star-rating span:before
   (rgba(0,0,0,0.49)), e un colore ereditato non batte mai un colore assegnato
   direttamente, con o senza !important. Era nero al 49% di trasparenza, che
   lascia passare quello che ha sotto: per questo la prima stella sembrava piu'
   scura delle altre. Misurato il 10/08 (sera) con browser reale. */
.single-product .star-rating{color:#C9A227!important}
.single-product .star-rating span:before{color:#C9A227!important}
.single-product .star-rating:before{color:#E2E2E2!important}
.single-product .joly-review-count{color:#131313!important}

/* ---- Un solo oro in pagina (scelta delegata a Synthassi, 10/08 sera) ----
   Le stelle in cima sono #C9A227; il plugin recensioni usava un giallo piu'
   acceso per le sue (#FFBC00) e un gradiente giallo-arancio per le barre
   dell'istogramma (255,206,0 -> 255,167,0), quindi la sezione recensioni
   sembrava di un altro sito. Scelto di tenere #C9A227, piu' sobrio e coerente
   col bianco/nero del brand, e di allinearci il plugin: e' il colore che vede
   il 100% del traffico nella prima schermata.
   Il plugin NON ha un'opzione per il colore delle stelle (verificate le opzioni
   ivole_*: ci sono solo i colori di email e modulo), quindi la via e' il CSS.
   ⚠️ Vale solo dove questo file viene caricato (372 e 1675): altrove le stelle
   del plugin restano #FFBC00. */
.single-product .cr-rating-icon{stroke:#C9A227!important;fill:#C9A227!important}
.single-product .cr-rating-icon-bg{stroke:#E2E2E2!important;fill:none!important}
.single-product .cr-histogram-rating-icon{fill:#C9A227!important}
.single-product .ivole-meter-bar{background:linear-gradient(#D9B23A,#C9A227)!important}

/* ---- Riga contrassegno: fuori solo dal desktop (decisione Andrea 10/08 sera) ----
   Il layout del Live monta la scheda in due colonne speculari: .col.show-for-small
   (mobile) e .col.hide-for-small (desktop), quindi di questa riga esistono due
   copie. Qui si spegne solo quella desktop. Su mobile resta, ed e' voluto: e'
   l'unico punto della scheda che dichiara il +4 EUR del contrassegno e offre
   WhatsApp per i dubbi sulla misura, e da mobile arriva il 96% del traffico. */
.single-product .col.hide-for-small .joly-cod{display:none!important}

/* ---- Prezzo del tema dove c'e' il selettore di formato (12/08/2026) ----
   Da oggi il selettore si disegna in ENTRAMBE le colonne, non piu' nella sola
   mobile (doc: docs/2026-08-12-09-19-59-selettore-formato-su-desktop.md).
   In tutte e due .product-price-container sta DENTRO .colonna-dx-cta, subito
   sopra il form: senza questa regola il prezzo sarebbe detto due volte a un
   centimetro di distanza, una dal tema e una dalle schede formato - lo stesso
   difetto corretto su mobile il 10/08.
   ⚠️ L'annidamento e' stato VERIFICATO sul DOM del Live il 12/08, non dedotto:
   la struttura annotata in RIPRESA §5 dava .product-price-container come
   fratello di .colonna-dx-cta, e con quella una regola figlia non avrebbe
   agganciato niente.
   ⚠️ Volutamente NON tocca il prezzo della colonna centrale (sotto il titolo,
   visibile da 850px in su): quello e' il prezzo classico del prodotto, sta in
   un'altra colonna e lontano dalle schede.
   Stesso gate :has(.joly-formati) del §3c: dove il selettore non viene disegnato
   - il 2 set e le altre schede - il prezzo resta. Se :has() non fosse supportato
   la regola cade e il prezzo si vede: il fallimento va nella direzione sicura.
   ⚠️ Rende ridondante la regola equivalente dentro @media (max-width:549px)
   (§3c), che NON e' stata toccata oggi: la 372 e' sotto misura fino al 13/08 e
   il valore calcolato su mobile e' identico con o senza. Da consolidare dopo. */
.single-product:has(.joly-formati) .colonna-dx-cta .product-price-container{display:none!important}

/* ---- Icone del blocco "Materiali Premium / Pagamenti Sicuri / Reso Facile" ----
   Tre icone caricate dal CDN esterno flaticon.com, scritte con width="50" ma
   SENZA height: finche' non arrivano dalla rete il browser non sa quanto spazio
   riservare. Qui l'altezza e' dichiarata nel CSS, che vale subito.
   Stanno in una scheda personalizzata salvata PER PRODOTTO (postmeta
   wc_productdata_options, 17 prodotti), non nel testo del prodotto: sistemarle
   alla fonte vorrebbe dire riscrivere 17 blocchi serializzati.
   ⚠️ ONESTA' SUL PERCHE' ESISTE QUESTA REGOLA: era stata scritta credendo che
   fosse LA causa del CLS 0,19, perche' l'analisi di Chrome indicava "unsized
   image" come possibile causa. Era una pista sbagliata: messa la regola, il CLS
   non si e' mosso di un millesimo (0,1930 -> 0,1932). La causa vera e' la
   galleria, qui sotto. Questa regola resta perche' e' comunque giusta - quelle
   icone davvero non dichiarano l'altezza - ma non e' lei ad aver chiuso il CLS.
   Sono quadrate all'origine (128x128), quindi 50x50 rispetta la proporzione. */
.single-product img[src*="cdn-icons-png.flaticon.com"]{width:50px;height:50px;object-fit:contain}

/* ---- Descrizione breve: via il rientro ----
   Nel testo del prodotto c'e' un <p style="padding-left:40px"> lasciato da un
   copia-incolla (classe "p1", tipica di Word/Pages). Il rientro e' nel
   contenuto, non nel layout: qui lo si annulla senza toccare la scheda
   prodotto in WooCommerce. Se un giorno si ripulisce il testo alla fonte,
   questa regola diventa inerte e si puo' togliere. */
.single-product .product-short-description p{padding-left:0!important}


/* ==========================================================================
   3. MOBILE: la prima schermata deve contenere tutto il percorso d'acquisto
   Ogni regola qui sotto recupera pixel misurati sopra il bottone.
   ========================================================================== */
@media (max-width:549px){

  /* ------------------------------------------------------------------
     3a. Layout standard di Flatsome - agganci di scorta.
     Sul Live queste regole sono INERTI: la produzione monta ogni scheda
     con un layout personalizzato di UX Builder (product_layout='custom',
     'layout-prodotto-anelli-trilogy', globale su tutti i prodotti), che
     non ha .product-main, .product-info ne' .product-gallery.
     Restano perche' costano nulla e coprono lo staging e l'eventuale
     ritorno al layout standard. Non aggiungerne altre qui.
     ------------------------------------------------------------------ */
  .single-product .product-main{padding-top:8px!important}
  .single-product .product-info{padding-top:4px}

  /* Briciole di navigazione: restano nel codice per la SEO, non occupano schermo */
  .single-product .product-info .woocommerce-breadcrumb,
  .single-product .product-main .woocommerce-breadcrumb{display:none!important}

  /* Galleria: si scorre con il dito, le miniature non servono (-98px) */
  .single-product .product-gallery .product-thumbnails,
  .single-product .product-gallery .thumbnails{display:none!important}
  .single-product .product-info .next-prev-thumbs{display:none!important}
  .single-product .product-info .is-divider{display:none!important}

  .single-product .woocommerce-product-gallery__image img,
  .single-product .product-images img,
  .single-product .product-gallery .slider img{max-height:33vh!important;width:100%;object-fit:cover}
  .single-product .product-gallery .product-images,
  .single-product .woocommerce-product-gallery{margin-bottom:6px!important}

  /* ------------------------------------------------------------------
     3b. Layout personalizzato del Live (UX Builder) - questo e' quello
     che si vede davvero in produzione.
     Nota: lo slider della galleria scrive l'altezza direttamente
     sull'elemento, quindi qui serve height e non basta max-height.
     ------------------------------------------------------------------ */

  /* padding-top a 0: la banda bianca fra header e foto era un padding di 8px
     messo da noi. A zero si guadagnano 8px sopra la foto e altri 8 sopra il
     titolo. Il padding-bottom resta 8px. (Prima erano due regole in conflitto
     nello stesso file, 8px scritto sopra e 0 scritto sotto.) */
  .single-product .custom-product-page > .section{padding-top:0!important;padding-bottom:8px!important}

  /* ⚠️ QUESTA RIGA CHIUDE IL CLS, e vale la pena sapere perche'.
     Prima: CLS 0,19 (soglia 0,10), e non era un difetto invisibile - la colonna
     con prezzo, misure e bottone SALTAVA SU DI 248 px a 649 ms dal caricamento,
     in piena prima schermata. Causa: la galleria nasce come elenco di immagini
     impilate e solo dopo il JS di Flatsome (flickity) diventa un carosello alto
     una sola foto. Due immagini da 31vh impilate fanno 504 px, una sola ne fa
     252: quei 248 px spariscono di colpo e tutto il resto risale.
     Dichiarando qui l'altezza del contenitore con overflow nascosto, lo spazio
     e' corretto dal primo pixel disegnato e non si muove piu' niente.
     Misurato con PerformanceObserver sulle voci 'layout-shift': CLS da 0,1932 a
     0,0000, con galleria funzionante (flickity attivo, 5 slide) e tutte le
     posizioni finali identiche al pixel. */
  .single-product .custom-product-page .woocommerce-product-gallery{height:31vh!important;overflow:hidden!important}
  .single-product .custom-product-page .flickity-viewport{height:31vh!important}
  .single-product .custom-product-page .woocommerce-product-gallery__image,
  .single-product .custom-product-page .woocommerce-product-gallery__image img{height:31vh!important;max-height:31vh!important;object-fit:cover}
  .single-product .custom-product-page .product-images{margin-bottom:4px!important}

  /* La fascia bianca sopra la foto era un paragrafo vuoto lasciato dal
     costruttore di pagine, con 21px di margine. */
  .single-product .custom-product-page .section-content > p:first-child{display:none!important}

  /* ------------------------------------------------------------------
     3c. Testa della scheda: titolo, descrizione, recensioni, prezzo
     ------------------------------------------------------------------ */

  .single-product .product-title{font-size:25px;line-height:1.1;margin:0 0 3px!important}

  /* Il trattino grigio sotto il titolo (.is-divider del tema) e' alto 3px ma
     porta 16px di margine sopra e sotto. Togliendolo le stelle salgono e con
     loro tutto quello che segue. Resa netta misurata: 19px (i margini
     collassano con quelli vicini, quindi non sono 35). */
  .single-product .product-title-container .is-divider{display:none!important}

  /* Descrizione breve: intera (niente taglio a meta' frase), allineata a
     sinistra, grigia e piccola.
     Prima era scritta in tre punti diversi del file che si contraddicevano:
     il primo la tagliava a due righe con -webkit-line-clamp e display:-webkit-box,
     il terzo annullava entrambi. Qui resta solo lo stato finale.
     ⚠️ Il margin-bottom sta nella riga a (0,3,0) apposta, e non e' pedanteria:
     a (0,2,0) il Customizer scrive 24px!important alla STESSA specificita' e
     vince perche' stampato dopo. Per mesi il valore reale sotto la descrizione
     e' stato 24px mentre qui c'era scritto 8. Si vedeva nelle misure del 10/08
     senza che ce ne accorgessimo: descrizione fino a 478, blocco formato a 502. */
  .single-product .product-short-description{font-size:12.5px;line-height:1.4;color:#6E6E6E;
    display:block;text-align:left;overflow:visible;margin:0!important}
  .single-product .col-inner .product-short-description{margin-bottom:8px!important}
  .single-product .product-short-description p{margin-bottom:0!important}

  /* Stelle e numero recensioni sulla stessa riga (-25px).
     Il blocco era alto il doppio del necessario: il contatore ha un
     margin-top:4px inline (tema child) e un margin-bottom:16px dal Customizer,
     quindi il suo box e' alto 32px mentre il testo ne occupa 14 - e
     align-items:center centra il box, non il testo.
     ⚠️ I due margin-bottom stanno a (0,3,0) apposta: a (0,2,0) perderebbero
     contro il Customizer (12px sul blocco, 16px sul contatore). */
  .single-product .woocommerce-product-rating{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:0}
  .single-product .col-inner .woocommerce-product-rating{margin:0 0 6px!important}
  .single-product .woocommerce-product-rating>a,
  .single-product .woocommerce-product-rating .star-rating{margin:0!important}
  .single-product .woocommerce-product-rating>div{margin-top:0!important}
  .single-product .woocommerce-product-rating .joly-review-count{font-size:13px;margin-bottom:0!important}

  /* Il prezzo lo dicono gia' le due schede formato: sopra era ripetuto.
     ⚠️ Si nasconde SOLO dove quelle schede esistono davvero.
     Perche': sul "2 set" (1675) il selettore di formato non viene mai disegnato
     - e' un bundle woosb, quindi 'woocommerce_before_variations_form' non esiste
     (vive solo in variable.php), e nel layout personalizzato UX Builder del Live
     'woocommerce_single_product_summary' non viene eseguito. Con la regola
     incondizionata quella pagina restava SENZA ALCUN PREZZO, e l'unico prezzo
     visibile in tutta l'altezza era il 72,90 EUR del Set Duo nell'upsell, cioe'
     di un altro prodotto. Misurato il 10/08/2026 con browser reale.
     Se :has() non fosse supportato la regola cade e il prezzo si vede
     (al massimo due volte su 372): il fallimento va nella direzione sicura. */
  .single-product:has(.joly-formati) .product-price-container{display:none!important}

  /* Prezzo: margini stretti come tutto il resto della colonna.
     ⚠️ Anche questa deve stare a (0,3,0). La vecchia regola era
     .single-product .price-wrapper{margin-bottom:0} a (0,2,0) e SENZA
     !important, contro un Customizer che sulla stessa classe scrive
     margin-top:16px!important e margin-bottom:24px!important: non ha mai
     avuto effetto. Sulla 372 non si notava perche' il prezzo e' nascosto dal
     gate qui sopra, ma su ogni altra scheda quei 40px c'erano davvero. */
  .single-product .col-inner .price-wrapper{margin-top:0!important;margin-bottom:8px!important}

  /* ------------------------------------------------------------------
     3d. Form, misure, guida, bottone
     ------------------------------------------------------------------ */

  .joly-formati{margin:8px 0 2px}
  .single-product .joly-size-hint{margin-top:6px!important}
  .single-product .variations{margin-bottom:10px!important}

  /* I 16px vuoti fra le schede formato e la CTA non erano margini: il form
     e' un flex con gap:16px (Flatsome). I figli hanno gia' 8px di margine
     sotto (dal Customizer, regola form.cart > *), quindi lo stacco resta
     leggibile anche a gap zero.
     ⚠️ Scritta su `form.cart` e non su `form.variations_form` per due motivi.
     Primo: sui bundle il form NON e' un form di variazioni, quindi la vecchia
     regola non li toccava e li' i gap sono tre (guida, quantita', bottone),
     cioe' 32px. Secondo: a (0,2,1) il margin-top perdeva contro il Customizer,
     che scrive .single-product form.cart{margin-top:20px!important} alla
     stessa specificita' - un altro valore che credevamo a zero ed era 20.
     Un prodotto variabile ha entrambe le classi, quindi questa regola copre
     anche i casi che copriva quella di prima. */
  .single-product .col-inner form.cart{margin-top:0!important;row-gap:0!important}
  .single-product .add-to-cart-container{margin-top:0!important;padding-top:0!important}

  /* L'etichetta "MISURE" della tabella variazioni ripeteva la CTA che sta
     appena sopra ("Seleziona la misura dell'anello"): 21px per un'informazione
     gia' data. ⚠️ NON si cancella con display:none, perche' e' un
     <label for="misure"> legato al select nascosto ed e' l'unico nome
     accessibile del controllo (le pillole non hanno aria-label): qui viene
     resa invisibile ma resta nell'albero di accessibilita'. Stesso spazio
     recuperato, nessuna perdita per chi usa uno screen reader.
     ⚠️ `tr:only-child` NON e' un vezzo: e' la condizione che rende la regola
     sicura su tutto il catalogo. Con un solo attributo il nome e' ridondante
     (lo dice gia' la CTA sopra) e si puo' nascondere; con DUE attributi
     nasconderlo renderebbe impossibile capire quale selettore e' quale.
     Caso reale e pubblicato: 2236 Onda, che ha "Prodotto" e "Colore" - senza
     questa condizione la regola nascondeva entrambe le etichette.
     Verificato il 10/08 sulle pagine vive: su 372 colpisce 1 etichetta
     (MISURE, il comportamento di prima), su 2236 ne colpisce 0. */
  .single-product table.variations tr:only-child th.label{
    position:absolute!important;width:1px!important;height:1px!important;
    margin:-1px!important;padding:0!important;overflow:hidden!important;
    clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}

  /* "Che misura porto?" centrato invece che a destra (chiesto da Andrea). */
  .single-product .joly-guida-riga{text-align:center!important}

  /* Stacco fra bottone e rassicurazioni: e' un altro flex con gap:16px
     (.woocommerce-variation-add-to-cart, stesso schema del form). A 8px la
     riga dei chip entra per intero nella prima schermata. */
  .single-product .woocommerce-variation-add-to-cart{row-gap:8px!important}

  .joly-fiducia{gap:6px}
  .joly-chip{padding:8px 4px;font-size:10.5px}

  /* ------------------------------------------------------------------
     3e. Riquadro componenti del bundle (pagina "2 set", 1675)
     Su quella pagina il bottone stava a 907px, molto sotto la piega.
     ⚠️ Dentro il bundle `.variations` e' un DIV e l'etichetta e' `div.label >
     label`: NON e' la `table.variations th.label` della scheda principale,
     quindi quella regola non lo intercettava. Markup diverso, regola dedicata.
     Anche qui l'etichetta e' resa invisibile con la tecnica clip, non
     cancellata, per non togliere il nome al controllo della misura.
     Misurato il 10/08 iniettando una regola alla volta: bottone 907 -> 876 con
     le due etichette, -> 869 aggiungendo il margine, -> 847 accorciando
     l'avviso (che si cambia dal PHP, con il filtro woosb_localization_*).
     Inerte su 372, che non ha .woosb-wrap.
     ------------------------------------------------------------------ */
  .single-product .woosb-wrap .variation > .label{
    position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;
    padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;
    white-space:nowrap!important;border:0!important}
  .single-product .woosb-products{margin-bottom:8px!important}

  /* ------------------------------------------------------------------
     3f. Header: logo piu' piccolo e barra piu' bassa.
     Sono 47px recuperati nel punto piu' prezioso della pagina.
     ⚠️ Vale solo dove questo file si carica. La decisione di Andrea del
     10/08 e' di portarlo su tutto il sito dalle opzioni del tema: quando si
     fa, questo blocco si CANCELLA (il tema ricalcola da se' line-height,
     segnaposto sticky e offset).
     ------------------------------------------------------------------ */
  .single-product img.header-logo-dark,
  .single-product img.header-logo{height:46px!important;max-height:46px!important;width:auto!important}
  .single-product .header-main,
  .single-product .header-main .header-inner,
  .single-product .header-main .nav > li > a{height:64px!important;min-height:0!important}
  .single-product .header-wrapper.stuck .header-main{height:64px!important}

  /* Icona carrello: il tema centra le voci dell'header con line-height:91px,
     misura calcolata sull'header da 111px. Abbassando la barra a 64px quel
     valore e' rimasto, e .cart-icon (che e' un blocco) diventava alta 91px:
     l'icona e il badge del contatore finivano 37px fuori dall'header, a
     cavallo della foto. Le altre voci non ne soffrono perche' sono <i> in
     linea, centrate dal flex. Qui basta togliere il line-height ereditato:
     ci pensa align-items:center del link. Misurato il 10/08 (sera): icona 14-50,
     badge 18-46, in linea con hamburger (17-47) e account (20-44). */
  .single-product .header-main .cart-icon{line-height:1!important}

  /* ------------------------------------------------------------------
     3g. Set Duo in fondo: scheda larga con foto a sinistra, come nel mockup.
     Il tema imponeva altezze uguali da griglia: qui vanno azzerate.
     ------------------------------------------------------------------ */
  .single-product .up-sells .row{display:block!important}
  .single-product .up-sells .product-small.col{width:100%!important;max-width:100%!important;padding:0!important;margin:0!important}
  .single-product .up-sells .col-inner > .product-small.box{display:flex!important;align-items:center!important;
    border:1px solid #E5E5E5;background:#fff;height:172px!important;max-height:172px!important;overflow:hidden!important}
  .single-product .up-sells .box-image{flex:0 0 130px!important;width:130px!important;align-self:stretch!important;margin:0!important}
  .single-product .up-sells .box-image img{height:172px!important;width:130px!important;object-fit:cover!important;max-width:none!important}
  .single-product .up-sells .box-text{flex:1;padding:12px 14px!important;text-align:left!important;
    display:flex;flex-direction:column;justify-content:center}
  .single-product .up-sells .box-text .category{display:none!important}
  .single-product .up-sells .name.product-title{font-size:14px!important;line-height:1.3!important;
    min-height:0!important;height:auto!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
    overflow:hidden;margin-bottom:4px!important}
  .single-product .up-sells .title-wrapper,
  .single-product .up-sells .box-text .price-wrapper{padding:0!important;min-height:0!important;height:auto!important}
}
