/* ==================================================================
   OPEN ELECTRONICS — STRATO VERGE
   ==================================================================

   Questo file si carica DOPO `style.css` e ne riscrive solo la parte
   editoriale. Il negozio (fasce, faccette, filtri, schede prodotto,
   carrello) non viene toccato: resta identico al tema gemello.

   Le cinque mosse che fanno la differenza, in ordine di quanto si vedono:

   1. NIENTE SCHEDE. Angoli tondi e ombre via: si separa con filetti.
   2. TRE VOCI TIPOGRAFICHE invece di una — condensato pesante per i
      titoli, serif per i sommari, maiuscoletto per occhielli e firme.
   3. LA COLONNA "LATEST" a destra, che nel gemello non esiste.
   4. DENSITA': piu' titoli sopra la piega, meno aria fra i blocchi.
   5. FONDO BIANCO. Il gemello ha un grigio-verde tenue (#F6F9F7) che
      addolcisce tutto; la Verge sta sul bianco puro e lascia lavorare
      il nero e l'accento.
   ================================================================== */

:root{
  /* L'ACCENTO. La Verge usa un viola elettrico; qui c'e' il verde di Open
     Electronics, perche' questo resta il sito di OE e non una sua imitazione.
     Per provare l'effetto "Verge vera" basta cambiare questa riga:
        --vg-accento:#5200FF;  --vg-accento-scuro:#3D00BF;
     Tutto il resto del tema segue da solo. */
  --vg-accento:#15803D;
  --vg-accento-scuro:#0B4A24;

  --vg-nero:#08090A;
  --vg-testo:#1A1D1B;
  --vg-tenue:#5B6560;
  --vg-filetto:#111315;
  --vg-filetto-fine:#DEE3E0;
  --vg-fondo:#FFFFFF;

  /* L'altezza REALE della testata di Kadence, misurata nel browser il
     28/8 a 375, 900 e 1400 px di larghezza: 81 px, identica ai tre.
     Prima era solo il ripiego 72 px scritto dentro `var()`, e nessuno
     l'aveva mai verificato: la barra degli argomenti si incollava 9 px
     TROPPO IN ALTO e finiva mezza nascosta dietro la testata, che ha
     z-index piu' alto. Se un giorno la testata cambia, si cambia qui. */
  --vg-testa:81px;

  --vg-display:"Anton","Arial Narrow",Impact,sans-serif;
  --vg-serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --vg-sans:var(--oe-font,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif);
}

/* Il fondo tenue del gemello se ne va: qui si sta sul bianco. */
.vg,
body:has(.vg){ background:var(--vg-fondo); }


/* ------------------------------------------------------------------
   IL CARATTERE, 29 agosto. Boris: «uniforma il carattere, preferisco
   bastoni rispetto a un Times New Roman».

   La Verge usa un serif per il corpo, ed e' la ragione per cui c'era.
   Su un catalogo di elettronica pero' il corpo del testo e' fatto di
   misure e sigle, non di prosa: li' il bastoni si legge meglio, e il
   contrasto col titolo resta perche' i titoli sono in Anton, che e' un
   bastoni condensato e non somiglia al testo.

   `--vg-serif` resta DICHIARATO ma non piu' usato: toglierlo del tutto
   vorrebbe dire riscrivere il foglio per tornare indietro.
   ------------------------------------------------------------------ */
/* ------------------------------------------------------------------
   1. LA TESTATA BLOCCATA
   Boris: «il menu in alto di open lo terrei e lo bloccherei».
   Restano la testata di Kadence e la barra degli argomenti di OE,
   impilate e appiccicate in alto. `z-index` alti perche' il mega
   pannello delle categorie deve poter uscire sopra al contenuto.
   ------------------------------------------------------------------ */
#masthead,
.site-header{
  position:sticky; top:0; z-index:120;
  background:var(--vg-fondo);
  border-bottom:1px solid var(--vg-filetto-fine);
}
.oe-barra-blog,
.oe-barra-negozio{
  position:sticky; z-index:110;
  /* Si incolla SOTTO la testata. Il valore e' l'altezza reale della
     testata di Kadence a riposo; se un giorno cambia, cambia qui. */
  top:var(--vg-testa,72px);
}
/* ⚠️ Su schermo basso due barre incollate mangiano mezza pagina: sotto
   i 700px di altezza resta bloccata solo la testata. */
@media (max-height:700px){
  .oe-barra-blog,.oe-barra-negozio{ position:static; }
}
/* Gli ancoraggi non devono finire sotto le barre. */
.vg :target{ scroll-margin-top:calc(var(--vg-testa,72px) + 56px); }

/* ------------------------------------------------------------------
   2. L'IMPIANTO A DUE COLONNE
   Il giornale a sinistra, il flusso "Latest" a destra. La colonna
   destra scorre con la pagina e poi si ferma.
   ------------------------------------------------------------------ */
.vg-home{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:0 48px;
  align-items:start;
  padding-top:28px;
}
/* ⚠️ La colonna NON e' appiccicata e NON scorre per conto suo.
   Prima lo era, con `max-height:100vh` e `overflow-y:auto`: il risultato
   era che di dieci voci se ne vedevano quattro e le altre sei stavano
   dentro una barra di scorrimento che nessuno cerca. Una colonna che
   sembra finita dopo quattro voci e' esattamente il difetto che Boris ha
   chiamato «spoglia».
   Alla Verge quella colonna scorre INSIEME alla pagina ed e' lunga: la
   sua lunghezza e' parte del messaggio, dice «qui succedono cose». */
.vg-home__rail{
  /* Il filetto punteggiato che separa le due colonne: e' un dettaglio
     piccolo ed e' uno dei piu' riconoscibili della Verge. */
  border-left:1px dashed var(--vg-filetto-fine);
  padding-left:28px;
}
@media (max-width:1100px){
  .vg-home{ grid-template-columns:1fr; gap:0; }
  .vg-home__rail{
    position:static; max-height:none; overflow:visible;
    border-left:0; padding-left:0;
    border-top:3px solid var(--vg-filetto); margin-top:40px; padding-top:20px;
  }
}

/* ------------------------------------------------------------------
   3. L'OCCHIELLO E LA FIRMA
   Due elementi minuscoli che da soli spostano l'estetica: la categoria
   in maiuscoletto colorato invece che in pastiglia, e la firma in
   maiuscoletto con l'autore nell'accento.
   ------------------------------------------------------------------ */
.vg-occhiello{
  display:inline-block;
  font-family:var(--vg-sans);
  font-size:.688rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--vg-accento); text-decoration:none;
  /* Bersaglio da 24 px minimo (era 17,6): il padding allarga l'area cliccabile e il
     margine negativo la riassorbe, cosi' il disegno non si sposta di un pixel. Il
     titolo sotto ha line-height .92 e il suo link sporge sopra la riga di qualche px:
     senza z-index Lighthouse contava l'occhiello «coperto» (16,6 px liberi su 25,6). */
  padding:4px 0; margin:-4px 0 4px; position:relative; z-index:1;
}
.vg-occhiello:hover{ color:var(--vg-accento-scuro); text-decoration:underline; }

/* ⛔ La pastiglia verde del gemello si spegne dove la Verge disegna una
   scheda — e la Verge le disegna anche nel negozio (sezione 11), quindi
   qui NON serve il prefisso `.vg`.

   ⚠️ Non si usa `all:unset`, che c'era prima e non ha mai funzionato. Due
   ragioni, viste nel browser: azzera ANCHE `display`, `cursor` e il colore
   ereditato, e pesa (0,2,0) contro i (0,1,0) di `.vg-occhiello` — quindi
   vinceva lui, e l'occhiello usciva come testo grigio da 17 px invece che
   in maiuscoletto verde. Si spengono le SINGOLE proprieta' della pastiglia,
   su un selettore composto che pesa quanto basta a batterla. */
.oe-etichetta.vg-occhiello{
  background:none; border-radius:0; padding:0; line-height:1.7;
  color:var(--vg-accento);
}
.oe-etichetta.vg-occhiello:hover{ background:none; color:var(--vg-accento-scuro); }

.vg .vg-firma{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px;
  font-family:var(--vg-sans);
  font-size:.688rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--vg-tenue);
  margin-top:10px;
}
/* ⛔ `.vg-firma__autore` stava qui e non lo emetteva nessun modello: l'autore
   e' "OEADMIN" su tutti i 4.109 articoli e il 26/8 e' uscito dalle schede.
   La categoria ha preso il suo posto: stessa posizione, stesso peso visivo,
   ma dice qualcosa. */
.vg .vg-firma__cat{ color:var(--vg-accento); text-decoration:none; }
.vg .vg-firma__cat:hover{ text-decoration:underline; }
.vg .vg-firma time::before{ content:"·"; margin-right:8px; color:var(--vg-filetto-fine); }
/* Quando resta la sola data, il punto separatore non separa niente. */
.vg .vg-firma--sola time::before{ content:none; margin:0; }

/* ------------------------------------------------------------------
   4. L'APERTURA
   Il titolo entra NELLA foto, in un riquadro bianco che ne morde
   l'angolo in basso a sinistra. E' la mossa piu' vistosa della home
   della Verge, ed e' quella che il gemello non fa.
   ------------------------------------------------------------------ */
.vg-apertura{ position:relative; margin-bottom:44px; }
.vg-apertura__foto{ display:block; }
.vg-apertura__foto img{
  display:block; width:100%; height:clamp(280px,38vw,460px);
  object-fit:cover; border-radius:0;
}
.vg-apertura__blocco{
  position:relative;
  margin:-96px 0 0 0;
  width:min(88%,660px);
  background:var(--vg-fondo);
  padding:24px 28px 22px 0;
}
.vg-apertura__titolo{
  font-family:var(--vg-display);
  font-weight:400;
  font-size:clamp(2.4rem,5.2vw,4.1rem);
  line-height:.92;
  letter-spacing:-.005em;
  margin:0 0 12px;
  text-wrap:balance;
}
.vg-apertura__titolo a{ color:var(--vg-nero); text-decoration:none; }
.vg-apertura__titolo a:hover{ color:var(--vg-accento); }
.vg-apertura__sommario{
  font-family:var(--vg-sans);
  font-size:1.125rem; line-height:1.45; color:var(--vg-testo);
  margin:0; max-width:52ch;
}
@media (max-width:640px){
  .vg-apertura__blocco{ width:100%; margin-top:-52px; padding-right:0; }
}

/* ------------------------------------------------------------------
   5. LE SCHEDE — che qui non sono schede
   ------------------------------------------------------------------ */
/* ⚠️ TUTTO QUESTO BLOCCO STA SOTTO `.vg`, e non e' pignoleria.
   `.vg` esiste solo sulla home (`front-page.php`). Senza il prefisso queste
   regole disegnavano anche le schede prodotto di `/shop/` — che nel tema
   gemello sono disegnate da `style.css` — e i due negozi non erano affatto
   identici: misurato il 28/8 su `/shop/`, 16 `vg-scheda--prodotto` e zero
   `oe-scheda--prodotto`, angoli vivi contro angoli tondi, 180 px fissi
   contro 1:1, nessuna ombra contro l'ombra del gemello.
   Il prefisso serve anche alla specificita': `.oe-scheda--articolo
   .oe-scheda__foto img` di `style.css` pesa (0,2,1) e batterebbe
   `.vg-scheda__foto img` (0,1,1) pur venendo prima. Con `.vg` davanti
   si pareggia, e vince chi si carica dopo — cioe' questo file. */
.vg .vg-scheda{
  /* ⛔ Neutralizza il contenitore del gemello: e' la riga che cancella
     l'aspetto "card" da tutto il giornale. */
  background:none; border:0; border-radius:0; box-shadow:none; padding:0;
  display:flex; flex-direction:column;
}
.vg .vg-scheda:hover{ transform:none; box-shadow:none; border-color:transparent; }
.vg .vg-scheda__foto{ display:block; margin-bottom:12px; overflow:visible; }
.vg .vg-scheda__foto img{
  display:block; width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:0; padding:0;
}
.vg .vg-scheda:hover .vg-scheda__foto img{ transform:none; }
.vg .vg-scheda__corpo{ padding:0; display:flex; flex-direction:column; gap:0; }
.vg .vg-scheda__titolo{
  font-family:var(--vg-sans);
  font-weight:800; font-size:1.0625rem; line-height:1.22;
  letter-spacing:-.011em;
  margin:0; text-wrap:balance;
}
.vg .vg-scheda__titolo a{ color:var(--vg-nero); text-decoration:none; }
.vg .vg-scheda__titolo a:hover{ color:var(--vg-accento); text-decoration:underline; text-underline-offset:3px; }
.vg .vg-scheda__sommario{
  font-family:var(--vg-sans);
  font-size:.9375rem; line-height:1.45; color:var(--vg-testo);
  margin:8px 0 0;
}
/* Nelle fasce del NEGOZIO la scheda prodotto resta com'era: li' il
   contenitore serve, perche' c'e' un prezzo e un bottone. */
.vg .vg-scheda--prodotto{ background:#fff; border:1px solid var(--vg-filetto-fine); padding:14px; }

.vg-griglia{ display:grid; gap:30px 26px; }
.vg-griglia--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.vg-griglia--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:900px){ .vg-griglia--4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){
  .vg-griglia--2,.vg-griglia--4{ grid-template-columns:1fr; }
}

/* ------------------------------------------------------------------
   6. L'INTESTAZIONE DI SEZIONE
   Filetto spesso nero, etichetta in nero pieno, sottotitolo in corsivo
   serif dopo la barra. Nella Verge la barra dice "comincia un blocco".
   ------------------------------------------------------------------ */
.vg-sezione{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  border-top:4px solid var(--vg-accento);
  margin:52px 0 22px; padding-top:12px;
}
.vg-sezione__titolo{
  font-family:var(--vg-sans);
  font-weight:800; font-size:1.375rem; line-height:1.1; letter-spacing:-.015em;
  color:var(--vg-nero); margin:0;
}
/* ⛔ Qui stava `.vg-sezione__sottotitolo`, il corsivo dopo il titolo di
   sezione. Le tre frasi che lo riempivano sono uscite il 28/8 (ammiccavano
   a un presente che l'archivio non ha) e la regola e' uscita con loro. */
.vg-sezione__via{
  font-family:var(--vg-sans);
  font-size:.688rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--vg-accento); text-decoration:none; white-space:nowrap;
}
.vg-sezione__via:hover{ text-decoration:underline; }
>>>FINE


/* ------------------------------------------------------------------
   7. IL FLUSSO — dove sta la densita'
   Miniatura a DESTRA: cosi' i titoli cominciano tutti sullo stesso
   asse e l'occhio scorre una colonna di titoli, non una scala di foto.
   ------------------------------------------------------------------ */
.vg-flusso{ display:grid; grid-template-columns:1fr 1fr; gap:0 40px; }
@media (max-width:820px){ .vg-flusso{ grid-template-columns:1fr; } }

.vg-riga{
  display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
  padding:16px 0;
  border-bottom:1px solid var(--vg-filetto-fine);
  text-decoration:none;
  /* ⛔ neutralizza la riga del gemello */
  background:none; border-radius:0; box-shadow:none;
}
.vg-riga:hover .vg-riga__titolo{ color:var(--vg-accento); }
.vg-riga__corpo{ display:flex; flex-direction:column; min-width:0; }
.vg-riga__titolo{
  font-family:var(--vg-sans);
  font-weight:700; font-size:.9688rem; line-height:1.28; letter-spacing:-.008em;
  color:var(--vg-nero);
}
.vg-riga__foto{ flex:0 0 76px; }
.vg-riga__foto img{
  display:block; width:76px; height:76px; object-fit:cover; border-radius:0;
}
.vg-occhiello--riga{ font-size:.625rem; margin-bottom:5px; }
.vg-riga .vg-firma{ margin-top:7px; font-size:.625rem; }

/* Il sommario breve nel flusso (chiesto il 26/8). In serif, come tutti i
   sommari del tema: e' la voce tipografica che distingue "cosa dice il pezzo"
   da "come si chiama il pezzo". Tenuto a due righe perche' oltre quelle la
   riga diventa una scheda, e il flusso perde la sua ragione d'essere. */
.vg-riga__brief{
  font-family:var(--vg-sans);
  font-size:.8438rem; line-height:1.38; color:var(--vg-tenue);
  margin-top:5px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ------------------------------------------------------------------
   8. LA COLONNA "LATEST"
   Letta di seguito deve sembrare un live blog: firma, orario, prima
   frase in neretto, resto normale. E' il pezzo che da' alla home
   l'aria di essere viva adesso, non aggiornata stamattina.
   ------------------------------------------------------------------ */
/* ⚠️ Le linguette vanno a capo: "Open Source Projects" e' lunga tre volte
   "News", e su una colonna di 340 px le tre insieme non stanno su una riga.
   Andare a capo e' meglio che accorciare l'etichetta di una categoria vera. */
.vg-rail__testa{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  padding-bottom:14px; margin-bottom:4px;
  border-bottom:1px solid var(--vg-filetto-fine);
}
/* Sono <button>, non piu' <span> e <a>: cambiano il contenuto della
   colonna invece di portare via dalla pagina. Quindi vanno azzerati gli
   stili di sistema del bottone, che altrimenti si portano dietro font,
   fondo e bordo del sistema operativo. */
.vg-rail__pillola{
  appearance:none; -webkit-appearance:none;
  background:none; cursor:pointer;
  font-family:var(--vg-sans);
  font-size:.688rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--vg-tenue); text-decoration:none;
  padding:7px 15px; border-radius:999px; border:1px solid var(--vg-filetto-fine);
  line-height:1.2;
}
.vg-rail__pillola:hover{ color:var(--vg-nero); border-color:var(--vg-filetto); }
.vg-rail__pillola:focus-visible{ outline:3px solid var(--vg-accento); outline-offset:2px; }
/* ⚠️ MISURATO il 26/8: Kadence colora il fondo dei <button> al `:focus`.
   Dopo il clic la linguetta attiva diventava rgb(15,95,45) con testo nero
   sopra — contrasto ~2:1, cioe' illeggibile — perche' `button:focus` (0-1-1)
   batte `.vg-rail__pillola--attiva` (0-1-0). Le regole della pillola devono
   quindi vincere in TUTTI gli stati, non solo a riposo. Il segnale di focus
   resta, ma e' il contorno di `:focus-visible`, non il fondo. */
.vg-rail__pillola:focus,
.vg-rail__pillola:active{
  background:none; color:var(--vg-tenue);
}
.vg-rail__pillola--attiva,
.vg-rail__pillola--attiva:hover,
.vg-rail__pillola--attiva:focus,
.vg-rail__pillola--attiva:active{
  background:var(--vg-nero); color:#fff; border-color:var(--vg-nero);
}
.vg-rail__voce{ padding:16px 0; border-bottom:1px solid var(--vg-filetto-fine); }
.vg-rail__voce:last-child{ border-bottom:0; }
.vg-firma--rail{ margin:0 0 7px; }

/* La miniatura nella colonna. Alla Verge in questa posizione c'e' l'avatar
   dell'autore, che qui sarebbe la stessa faccia dieci volte: al suo posto va
   la foto dell'articolo, che e' l'unico elemento capace di dare varieta' a
   una colonna di soli paragrafi. `aria-hidden` perche' il link al titolo,
   subito accanto, porta allo stesso posto: per chi naviga da tastiera o con
   uno screen reader sarebbe una fermata in piu' che non aggiunge niente. */
.vg-rail__riga{ display:flex; align-items:flex-start; gap:12px; }
.vg-rail__foto{ flex:0 0 62px; display:block; }
.vg-rail__foto img{
  display:block; width:62px; height:62px; object-fit:cover; border-radius:0;
}
.vg-rail__testo{
  font-family:var(--vg-sans);
  font-size:.9375rem; line-height:1.44; color:var(--vg-testo);
  margin:0; min-width:0;
}
.vg-rail__testo a{ color:inherit; text-decoration:none; }
.vg-rail__testo a strong{ color:var(--vg-nero); font-weight:600; }
.vg-rail__testo a:hover strong{ color:var(--vg-accento); text-decoration:underline; }

/* ------------------------------------------------------------------
   9. LA STRISCIA DEL NEGOZIO
   Resta l'unico blocco pieno della pagina: nel resto del giornale non
   c'e' un solo fondo colorato, quindi qui salta all'occhio da sola —
   che e' esattamente quello che deve fare, una volta per pagina.
   ------------------------------------------------------------------ */
.vg .oe-striscia{ border-radius:0; margin:52px 0; }

/* ------------------------------------------------------------------
   8-bis. I RIQUADRI DELLA COLONNA
   Conto, newsletter, banner, negozio. Stanno DENTRO il flusso delle
   voci, non impilati in fondo: un riquadro incontrato mentre si legge
   viene visto, una pila in coda no.

   Un solo riquadro e' pieno (la newsletter, in nero): in una pagina che
   non ha un solo fondo colorato, quello salta all'occhio da solo. Se
   fossero pieni tutti, non risalterebbe piu' nessuno.
   ------------------------------------------------------------------ */
.vg-riq{ margin:22px 0; padding:18px 0; }
.vg-riq__occhiello{
  display:block;
  font-family:var(--vg-sans);
  font-size:.625rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
  color:var(--vg-accento); margin-bottom:8px;
}
.vg-riq__occhiello--tenue{ color:var(--vg-tenue); }
.vg-riq__titolo{
  font-family:var(--vg-sans);
  font-weight:800; font-size:1.0625rem; line-height:1.2; letter-spacing:-.012em;
  color:var(--vg-nero); margin:0 0 8px;
}
.vg-riq__testo{
  font-family:var(--vg-sans);
  font-size:.9063rem; line-height:1.42; color:var(--vg-testo); margin:0 0 14px;
}
.vg-riq__nota{
  font-family:var(--vg-sans);
  font-size:.6875rem; line-height:1.4; color:var(--vg-tenue); margin:10px 0 0;
}
/* La newsletter: l'unico blocco pieno della colonna. */
.vg-riq--news{
  background:var(--vg-nero); color:#fff;
  padding:20px 18px; margin:26px 0;
}
.vg-riq--news .vg-riq__occhiello{ color:#fff; opacity:.62; }
.vg-riq--news .vg-riq__titolo{ color:#fff; }
.vg-riq--news .vg-riq__testo{ color:rgba(255,255,255,.82); }
.vg-riq--news .vg-riq__nota{ color:rgba(255,255,255,.5); }

.vg-riq__modulo{ display:flex; flex-direction:column; gap:8px; }
/* A iscrizione avvenuta il modulo sparisce, e senza questa riga non sparisce:
   `display:flex` qui sopra batte il `display:none` che il browser da' a
   [hidden], e il modulo restava li' a invitare un secondo invio. */
.vg-riq__modulo[hidden]{ display:none; }
.vg-riq__modulo input[type=email]{
  width:100%; padding:11px 12px;
  font-family:var(--vg-sans); font-size:.875rem;
  border:1px solid rgba(255,255,255,.25); border-radius:0;
  background:rgba(255,255,255,.06); color:#fff;
}
.vg-riq__modulo input[type=email]::placeholder{ color:rgba(255,255,255,.42); }
.vg-riq__modulo input[type=email]:focus{
  outline:2px solid var(--vg-accento); outline-offset:1px;
  background:rgba(255,255,255,.1);
}
.vg-riq__modulo button{
  padding:11px 16px; border:0; border-radius:0; cursor:pointer;
  font-family:var(--vg-sans);
  font-size:.75rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  background:var(--vg-accento); color:#fff;
}
.vg-riq__modulo button:hover{ background:#fff; color:var(--vg-nero); }
.vg-riq__modulo button[disabled]{ opacity:.55; cursor:default; }
.vg-riq__esito{
  font-family:var(--vg-sans); font-size:.75rem; line-height:1.4;
  margin:10px 0 0; color:#fff;
  border-left:3px solid var(--vg-accento); padding-left:10px;
}
.vg-riq__esito--ko{ border-left-color:#F59E0B; color:rgba(255,255,255,.9); }

/* Lo spazio banner, e la promozione di casa che lo riempie quando in
   galleria non c'e' una creativita' valida. */
.vg-riq--banner{ border-top:1px solid var(--vg-filetto-fine); padding-top:14px; }
.vg-riq--banner img{ display:block; width:100%; height:auto; }
.vg-promo{
  display:block; text-decoration:none;
  border:1px solid var(--vg-filetto); padding:18px 16px;
  background:var(--vg-accento-velo,#F2F7F4);
}
.vg-promo__occhiello{
  display:block; font-family:var(--vg-sans);
  font-size:.625rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
  color:var(--vg-accento); margin-bottom:8px;
}
.vg-promo__titolo{
  display:block; font-family:var(--vg-display); font-weight:400;
  font-size:1.375rem; line-height:1.02; color:var(--vg-nero); margin-bottom:8px;
}
.vg-promo__testo{
  display:block; font-family:var(--vg-sans);
  font-size:.875rem; line-height:1.4; color:var(--vg-testo); margin-bottom:14px;
}
.vg-promo__bottone{
  display:inline-block; font-family:var(--vg-sans);
  font-size:.6875rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:#fff; background:var(--vg-nero); padding:9px 14px;
}
.vg-promo:hover .vg-promo__bottone{ background:var(--vg-accento); }

/* Tre prodotti, taglio basso: chiudono la colonna senza gridare. */
.vg-riq--negozio{ border-top:3px solid var(--vg-filetto); padding-top:14px; }
.vg-mini{
  display:flex; gap:12px; align-items:center;
  padding:11px 0; border-bottom:1px solid var(--vg-filetto-fine);
  text-decoration:none;
}
.vg-mini__foto{ flex:0 0 52px; }
.vg-mini__foto img{ display:block; width:52px; height:52px; object-fit:contain; }
.vg-mini__corpo{ min-width:0; }
.vg-mini__titolo{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-family:var(--vg-sans); font-size:.8125rem; font-weight:700; line-height:1.24;
  color:var(--vg-nero);
}
.vg-mini:hover .vg-mini__titolo{ color:var(--vg-accento); }
.vg-mini__prezzo{
  display:block; margin-top:3px;
  font-family:var(--vg-sans); font-size:.75rem; font-weight:700; color:var(--vg-tenue);
}
.vg-mini__prezzo .amount{ color:var(--vg-nero); }
.vg-riq__via{
  display:inline-block; margin-top:12px;
  font-family:var(--vg-sans);
  font-size:.6875rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--vg-accento); text-decoration:none;
}
.vg-riq__via:hover{ text-decoration:underline; }

/* ------------------------------------------------------------------
   9-bis. LE SCHEDE PRODOTTO IN HOME — l'allineamento
   Boris, 26/8: «le colonne dello store devono essere allineate, i
   pulsanti sono tutti storti».

   🔑 La causa non era il CSS del bottone: erano i TITOLI. Uno va a capo
   una volta, un altro tre, e tutto quello che sta sotto scivola giu' di
   conseguenza. Aggiustare il bottone non serve a niente finche' quello
   che sta sopra ha altezza libera.

   La cura e' in tre pezzi, e servono tutti e tre:
     a) le schede si tirano all'altezza della riga (`stretch` + height 100%)
     b) dentro, il corpo e' una colonna flessibile
     c) il PREZZO prende `margin-top:auto` — cosi' tutto lo spazio avanzato
        finisce SOPRA di lui, e prezzo e bottone si appoggiano al fondo.
   Il bottone, essendo l'ultimo, resta incollato al bordo inferiore in
   tutte le schede: e' quello che allinea davvero i pulsanti.
   ------------------------------------------------------------------ */
.vg .oe-vetrina .oe-griglia,
.vg .oe-griglia{ align-items:stretch; }

.vg .vg-scheda--prodotto{
  display:flex; flex-direction:column; height:100%;
}
.vg .vg-scheda--prodotto .vg-scheda__corpo{
  display:flex; flex-direction:column; flex:1 1 auto;
}
/* La foto: ALTEZZA FISSA, non rapporto fisso.
   ⚠️ Con `aspect-ratio:4/3` la fascia dell'immagine cresceva insieme alla
   larghezza della scheda: nelle griglie da 3 le schede sono larghe ~430 px,
   quindi la fascia diventava alta ~320 px e una foto di prodotto piccola ci
   galleggiava dentro lasciando un buco bianco a meta' scheda. Un'altezza
   in pixel dà la stessa fascia in tutte le griglie, da 3 e da 4. */
.vg .vg-scheda--prodotto .vg-scheda__foto img{
  width:100%; height:180px; object-fit:contain; background:#fff; aspect-ratio:auto;
}
/* ⚠️ TRE righe, non due. Con due, nomi come «Power Over Ethernet HAT (F)
   For Raspberry Pi 5 / CM 5» venivano tagliati a «Power Over Ethernet
   HAT (F)…» — e su una scheda prodotto il nome NON e' un sommario che si
   puo' accorciare: e' l'informazione. Un titolo tagliato a meta' costa
   piu' di una riga di disallineamento, che tanto e' gia' risolta dal
   `margin-top:auto` qui sotto. */
.vg .vg-scheda--prodotto .vg-scheda__titolo{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}
.vg .vg-scheda--prodotto .oe-scheda__prezzo{
  margin-top:auto;      /* ← la riga che fa tutto il lavoro */
  padding-top:12px;
}
.vg .vg-scheda--prodotto .oe-bottone{
  margin-top:10px; width:100%; text-align:center;
}

/* ==================================================================
   11. IL NEGOZIO
   ==================================================================

   🔑 REGOLA DI METODO: qui NON si tocca una riga di PHP. Tutto lo strato
   negozio e' CSS, e sta solo in questo file. Cosi' `functions.php` e
   `style.css` restano identici, riga per riga, a quelli del tema gemello:
   una correzione alla LOGICA del negozio (IVA, faccette, prezzi, cassa)
   si continua a copiare fra i due temi senza cercarla in mezzo alle
   regole estetiche. Diverge la pelle, non il meccanismo.

   Il negozio del gemello e' costruito su fasce a fondo pieno — verde,
   petrolio, arancione — e schede con angoli tondi e ombra. E' il
   contrario esatto della grammatica del giornale che sta qui accanto,
   e un lettore che passa dal blog allo shop se ne accorge subito.
   Qui le fasce restano (sono una decisione a verbale: "New in Arduino"
   vive nello shop), ma perdono il fondo pieno e tengono il titolo.
   ================================================================== */

/* Anche la ricerca. `body:has(.vg)` non la prende: la pagina dei
   risultati e' fatta di voci di Kadence, senza il marcatore `.vg`, e la
   scheda Products lo era per via di `woocommerce-page`. Cosi' Articles
   usciva col grigio-verde del gemello e Products in bianco — «gli
   articoli hanno uno sfondino verde, i prodotti no» (Boris, 3/9). */
body.search,
body.woocommerce-page,
body.woocommerce{ background:var(--vg-fondo); }

/* ------------------------------------------------------------------
   11.1 La testata del negozio
   Il gemello ha un rettangolo verde in sfumatura con dentro il titolo e
   la ricerca. Qui diventa un blocco chiaro con il titolo in condensato,
   perche' e' la stessa voce che apre gli articoli: uno solo sito.
   ------------------------------------------------------------------ */
.oe-testa-shop{
  background:none; border:0; border-radius:0;
  border-top:4px solid var(--vg-accento);
  border-bottom:1px solid var(--vg-filetto-fine);
  padding:26px 0 30px; margin-bottom:34px;
  color:var(--vg-nero);
}
.oe-testa-shop__banner{ background:none; box-shadow:none; }
.oe-testa-shop__occhiello{
  font-family:var(--vg-sans);
  font-size:.6875rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
  color:var(--vg-accento);
}
.oe-testa-shop__parole h1,
.oe-testa-shop__parole h2,
.oe-testa-shop h1,.oe-testa-shop h2{
  font-family:var(--vg-display); font-weight:400;
  font-size:clamp(2rem,4.4vw,3.25rem); line-height:.96; letter-spacing:-.005em;
  color:var(--vg-nero); margin:6px 0 10px;
}
.oe-testa-shop__sotto{
  font-family:var(--vg-sans); font-size:1.0625rem; line-height:1.42;
  color:var(--vg-testo); max-width:52ch;
}

/* La ricerca: un rettangolo con un filetto, non una pillola.
   ⚠️ Chi dipinge il fondo deve dipingere anche l'inchiostro: `style.css`
   da' alla casella della barra scura fondo traslucido e testo BIANCO
   (#fff), e questa regola le mette sotto un fondo bianco. Senza `color`
   qui, quello che si scrive in alto e' bianco su bianco: invisibile,
   con il cursore. Trovato da Boris il 3/9 scrivendo nella barra. */
.oe-cerca__campo,
.oe-cerca input[type=search],
.oe-cerca input[type=text]{
  border-radius:0; border:1px solid var(--vg-filetto);
  font-family:var(--vg-sans); padding:12px 14px; background:#fff;
  color:var(--vg-testo); caret-color:var(--vg-testo);
}
.oe-cerca input[type=search]::placeholder,
.oe-cerca input[type=text]::placeholder{ color:var(--vg-tenue); }
/* A destra del testo devono starci la lente E la × nativa di Chrome
   (`::-webkit-search-cancel-button`, che si disegna al bordo del
   contenuto, cioe' subito prima del padding). Il `padding:12px 14px` qui
   sopra aveva appiattito anche il padding destro che style.css riservava
   alla lente: con 14px la × finiva SOTTO la lente — «controlla la X che
   e' sotto la lente» (Boris, 3/9). Misurato: lente 32px a .6rem dal
   bordo nella casella grande, 28px a .25rem in quella della barra. */
.oe-cerca--grande input[type=search]{ padding-right:3.9rem; }

/* Nella barra scura la casella e' un campo DELLA barra, non un cartellino
   bianco appoggiato sopra: il rettangolo bianco col filetto qui sopra
   vale per le caselle sul fondo bianco. Era proprio quel rettangolo,
   con il suo padding, a fare 69 px di altezza e a tirarsi dietro tutta
   la barra. Qui: fondo appena piu' chiaro del nero della barra, filetto
   tenue, testo bianco, lente senza riquadro — lo stesso grigio-verde
   delle icone social accanto (#9FB3A8, style.css), e alta come loro.
   Boris, 3/9: «quello da parte ai social mi sembra un po' abbandonato
   li' a se stesso». */
.oe-barra .oe-cerca--barra .oe-cerca__campo{ background:transparent; border:0; padding:0; }
.oe-barra .oe-cerca--barra input[type=search]{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18);
  color:#fff; caret-color:#fff;
  padding:5px 2.8rem 5px 10px; font-size:.78rem; line-height:1.4;
}
.oe-barra .oe-cerca--barra input[type=search]::placeholder{ color:#9FB3A8; }
.oe-barra .oe-cerca--barra input[type=search]:focus{
  background:rgba(255,255,255,.11); border-color:#9FB3A8;
  outline:2px solid var(--vg-accento); outline-offset:1px;
}
.oe-barra .oe-cerca--barra button{ background:transparent; color:#9FB3A8; right:.15rem; padding:.2rem; }
.oe-barra .oe-cerca--barra button:hover{ background:transparent; color:#fff; }
.oe-barra .oe-cerca--barra svg{ width:16px; height:16px; }
.oe-cerca button,
.oe-cerca__dove{ border-radius:0; }
.oe-cerca button{
  background:var(--vg-nero); color:#fff; border:0;
  font-family:var(--vg-sans);
  font-size:.75rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
}
.oe-cerca button:hover{ background:var(--vg-accento); }

/* Kadence stampa un suo blocco titolo sopra la pagina: qui e' un doppione
   della testata, e due titoli uno sopra l'altro sono sempre un errore. */
.woocommerce-shop .entry-hero,
.tax-product_cat .entry-hero{ display:none; }

/* ------------------------------------------------------------------
   11.2 Le fasce di categoria
   Restano. Perdono il fondo pieno colorato — quattro rettangoli verdi,
   petrolio e arancioni erano la cosa piu' rumorosa della pagina, e
   l'unica che non poteva convivere col giornale.
   Il colore non sparisce: si ritira nel FILETTO sopra il titolo, che e'
   lo stesso segnale usato per le sezioni del blog.
   ------------------------------------------------------------------ */
.oe-fascia{
  background:none !important; border-radius:0; box-shadow:none;
  display:block; padding:0; margin:46px 0;
  border-top:4px solid var(--vg-accento);
}
.oe-fascia--petrolio{ border-top-color:var(--oe-verde-petrolio,#0E5F55); }
.oe-fascia--accento{ border-top-color:var(--oe-accento,#C2410C); }

.oe-fascia__sfondo{ display:none; }
/* ⚠️ NON flex. Dentro `oe-fascia__testa` il titolo, la descrizione e il
   bottone sono TRE FRATELLI, non due blocchi: con `justify-content:
   space-between` finivano sparpagliati su una riga e il "View all"
   cadeva sotto al titolo, al centro. Serve un blocco normale col
   bottone tolto dal flusso e agganciato a destra. */
.oe-fascia__testa{
  background:none !important; color:var(--vg-nero);
  display:block; position:relative;
  padding:12px 130px 18px 0; width:auto; min-height:0;
}
.oe-fascia__testa .oe-bottone{
  position:absolute; right:0; top:14px;
}
.oe-fascia__testa h2,
.oe-fascia__testa h3{
  font-family:var(--vg-sans);
  font-weight:800; font-size:1.375rem; line-height:1.1; letter-spacing:-.015em;
  color:var(--vg-nero); margin:0;
}
.oe-fascia__testa p{
  font-family:var(--vg-sans); font-style:italic;
  font-size:.9375rem; color:var(--vg-tenue); margin:4px 0 0;
}
/* Il bottone "View all" della fascia: da pillola bianca su fondo pieno a
   collegamento in maiuscoletto, come i "All news →" del giornale. */
.oe-fascia__testa .oe-bottone{
  background:none; color:var(--vg-accento); padding:0; border:0;
  font-size:.6875rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  white-space:nowrap;
}
.oe-fascia__testa .oe-bottone:hover{ text-decoration:underline; background:none; }
.oe-fascia__contenuto{ background:none !important; padding:0; }

/* ------------------------------------------------------------------
   11.3 Le schede prodotto
   Due sistemi diversi convivono nel negozio e vanno tutti e due:
   `.oe-scheda` nelle fasce e in "New products", e le classi di
   Kadence/WooCommerce nella griglia "All products".
   ------------------------------------------------------------------ */
.oe-fascia .oe-scheda,
.oe-vetrina .oe-scheda,
.oe-testa-shop .oe-scheda,
.woocommerce ul.products li.product{
  background:#fff; border:1px solid var(--vg-filetto-fine);
  border-radius:0; box-shadow:none;
}
.oe-fascia .oe-scheda:hover,
.oe-vetrina .oe-scheda:hover,
.oe-testa-shop .oe-scheda:hover{ transform:none; box-shadow:none; border-color:var(--vg-filetto); }
.woocommerce ul.products li.product:hover{ border-color:var(--vg-filetto); }

/* ⚠️ `.oe-testa-shop` mancava dall'elenco qui sopra, e le quattro schede di
   "New products" restavano con angoli tondi e ombra mentre tutto il resto
   del negozio e' squadrato. Prima non si vedeva perche' a spianarle ci
   pensava per sbaglio una regola del GIORNALE (`.vg-scheda`, che non era
   ristretta alla home). Tolta quella, il buco e' venuto a galla: misurato
   nel browser il 28/8 su /shop/, 4 schede con raggio 12px e ombra contro
   36 schede squadrate.

   Stessa storia per la fascia immagine: senza questa regola le foto delle
   schede del tema tornavano quadrate alla larghezza della colonna — 400px
   nelle fasce, 290px in testata, contro i 170px della griglia. */
.oe-fascia .oe-scheda__foto img,
.oe-vetrina .oe-scheda__foto img,
.oe-testa-shop .oe-scheda__foto img{
  border-radius:0; height:170px; aspect-ratio:auto;
  object-fit:contain; background:#fff; padding:0;
}

/* Stessa cura sulla griglia "All products": fascia immagine di altezza
   fissa, cosi' i corpi delle schede partono tutti dalla stessa quota. */
.woocommerce ul.products li.product img{
  border-radius:0; height:170px; object-fit:contain; background:#fff;
}
.woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--vg-sans);
  font-weight:800; font-size:.9375rem; line-height:1.24; letter-spacing:-.01em;
  color:var(--vg-nero);
}
.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title{
  color:var(--vg-accento);
}
.product-excerpt{
  font-family:var(--vg-sans); font-size:.8438rem; line-height:1.4; color:var(--vg-tenue);
}
.woocommerce ul.products li.product .price,
.oe-scheda__prezzo{
  font-family:var(--vg-sans); font-weight:800; color:var(--vg-nero);
}
.oe-iva{
  font-family:var(--vg-sans); font-weight:600; font-size:.6875rem;
  letter-spacing:.04em; color:var(--vg-tenue); text-transform:none;
}

/* 🔑 L'allineamento, la stessa cura della home: lo spazio avanzato va
   SOPRA il prezzo, cosi' prezzo e bottone si appoggiano al fondo e i
   pulsanti stanno tutti sulla stessa riga anche con titoli di lunghezza
   diversa. Senza questo, una griglia di venti prodotti e' una scalinata. */
.woocommerce ul.products{ align-items:stretch; }
.woocommerce ul.products li.product{ display:flex; flex-direction:column; }
.woocommerce ul.products li.product .product-details{
  display:flex; flex-direction:column; flex:1 1 auto;
}
.woocommerce ul.products li.product .price{ margin-top:auto; padding-top:10px; }
.woocommerce ul.products li.product .product-action-wrap{ margin-top:10px; }
.woocommerce-loop-product__title{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

/* I pulsanti: squadrati, in maiuscoletto. Il verde resta, ma smette di
   essere una pastiglia arrotondata su ogni scheda. */
.oe-bottone,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce ul.products li.product .button{
  border-radius:0;
  font-family:var(--vg-sans);
  font-size:.6875rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  padding:11px 16px;
}
.woocommerce ul.products li.product .button{ width:100%; text-align:center; }

/* ------------------------------------------------------------------
   11.4 Le faccette e i filtri
   Erano riquadri; diventano elenchi separati da filetti, come tutto il
   resto del tema.
   ------------------------------------------------------------------ */
.oe-faccette,.oe-filtro{
  background:none; border:0; border-radius:0; box-shadow:none; padding:0;
}
.oe-faccette__titolo,
.oe-filtro h3,.oe-filtro h4{
  font-family:var(--vg-sans);
  font-size:.6875rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--vg-nero);
  border-top:2px solid var(--vg-filetto); padding-top:10px; margin:22px 0 8px;
}
.oe-filtro__voce{
  display:flex; align-items:center; gap:8px;
  padding:6px 0; border-bottom:1px solid var(--vg-filetto-fine);
}
.oe-filtro__nome{
  font-family:var(--vg-sans); font-size:.8125rem; color:var(--vg-testo);
}
.oe-filtro__quanti{
  margin-left:auto; font-family:var(--vg-sans); font-size:.6875rem; color:var(--vg-tenue);
}
.oe-faccette__voci a{
  border-radius:0; font-family:var(--vg-sans);
  font-size:.75rem; font-weight:700; letter-spacing:.02em;
}
.oe-faccette__voci a.attivo{ background:var(--vg-nero); color:#fff; border-color:var(--vg-nero); }

/* La barra degli strumenti di Kadence (risultati, ordinamento, vista). */
.kadence-shop-top-row,
.woocommerce-result-count,
.kadence-woo-results-count,
.woocommerce .woocommerce-ordering select{
  font-family:var(--vg-sans); font-size:.75rem; letter-spacing:.03em;
}
.kadence-shop-top-row{
  border-top:1px solid var(--vg-filetto-fine);
  border-bottom:1px solid var(--vg-filetto-fine);
  padding:10px 0;
}
.woocommerce .woocommerce-ordering select{ border-radius:0; }

/* ------------------------------------------------------------------
   11.5 LA SCHEDA PRODOTTO
   Riferimento scelto da Boris il 28/8: `adafruit.com/product/6513`.
   Le decisioni stanno in `SCHEDA-PRODOTTO.md`, la meccanica in
   `scheda-prodotto.php`, l'impaginazione in
   `woocommerce/content-single-product.php`.

   Quattro fasce:
     TESTA    titolo, sommario, SKU        a tutta larghezza
     CORPO    galleria, descrizione, specifiche
     COLONNA  acquisto (si incolla) + documentazione
     FONDO    tutorial, correlati          a tutta larghezza

   ⛔ Nessun tab. Le regole di `.woocommerce-tabs` che stavano qui sono
   state tolte: le linguette non vengono piu' stampate, e regole per un
   elemento che non esiste sono solo un modo per far credere a chi legge
   il foglio che la pagina abbia ancora le schede.
   ------------------------------------------------------------------ */

/* 🔑 QUANTO IN ALTO SI INCOLLA LA COLONNA.
   Sotto ci sono DUE barre gia' bloccate: la testata di Kadence
   (`--vg-testa`, 81px misurati) e la barra del negozio (56px). Un
   blocco che si incolla a `top:0` finirebbe sotto tutte e due.
   ⚠️ Sotto i 700px di altezza la barra del negozio torna statica
   (regola in §1): li' l'aggancio deve risalire, altrimenti resta un
   buco di 56px sopra il prezzo. */
:root{ --oe-scheda-aggancio:calc(var(--vg-testa,81px) + 56px + 16px); }
@media (max-height:700px){
  :root{ --oe-scheda-aggancio:calc(var(--vg-testa,81px) + 16px); }
}

/* ------------------------------------------------------------------
   LO SPAZIO SOPRA LA SCHEDA.

   🔑 Fra la barra del negozio e il titolo c'erano 64px di vuoto (il
   `margin-top:80px` di `#primary`, che sul giornale ci sta e su una
   scheda prodotto no) piu' 38px di briciole di pane coi loro margini.
   Centodue pixel prima ancora di cominciare, su ogni scheda del
   negozio. Misurato, non stimato: vedi `DEMO-SCHEDA.md §5`.

   ⛔ Le briciole restano — su un negozio con 4.277 prodotti e un albero
   di categorie profondo servono davvero. Si stringono, non si tolgono.
   ------------------------------------------------------------------ */
.single-product .oe-barra-negozio{ margin-bottom:12px; }
.single-product #primary{ margin-top:20px; }
/* E sulla ricerca: 80 px fra il menu e il riquadro dei risultati erano
   un buco. «Riduci lo spazio tra il menu e la ricerca» (Boris, 3/9). */
body.search #primary{ margin-top:24px; }
.single-product #kadence-breadcrumbs{ margin-top:0; margin-bottom:8px; }

/* ------------------------------------------------------------------
   L'impianto. ⚠️ WooCommerce impagina la scheda con due `float` al 48%
   e Kadence ci mette del suo: vanno tolti tutti e due, altrimenti la
   griglia riceve elementi che si sfilano dal flusso e la colonna
   destra finisce sotto la galleria.
   ------------------------------------------------------------------ */
.single-product div.product.oe-prodotto{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:0 48px;
  align-items:stretch;
}
.oe-prodotto .oe-prodotto__testa,
.oe-prodotto .oe-prodotto__fondo,
.oe-prodotto .oe-avviso-demo{ grid-column:1 / -1; }

.single-product div.product.oe-prodotto .woocommerce-product-gallery,
.single-product div.product.oe-prodotto .summary,
.single-product div.product.oe-prodotto .oe-prodotto__corpo,
.single-product div.product.oe-prodotto .oe-prodotto__colonna{
  float:none; width:auto; max-width:none; margin-left:0; margin-right:0;
}
.oe-prodotto__corpo{ min-width:0; }

/* La colonna. Il filetto punteggiato e' lo stesso della colonna
   "Latest" della home: le due colonne del sito si dichiarano parenti. */
.oe-prodotto__colonna{
  border-left:1px dashed var(--vg-filetto-fine);
  padding-left:28px;
  min-width:0;
}

/* 🔑 IL PUNTO DELICATO DI TUTTA LA PAGINA.
   Si incolla `.oe-colonna__interno`, cioe' acquisto E documentazione
   INSIEME, non il solo blocco d'acquisto.

   ⚠️ Perche' non il solo acquisto, che sarebbe piu' corto: `sticky`
   non toglie l'elemento dal flusso — lo sposta solo VISIVAMENTE. Quello
   che gli sta sotto nello stesso contenitore resta dov'era e, appena si
   scorre, gli passa DIETRO. Con l'acquisto incollato e la
   documentazione sotto, alla prima rotellina i due blocchi si
   sovrappongono e i link ai datasheet finiscono sotto il prezzo.
   Provato prima di scriverlo.

   ⚠️ E `sticky` tiene fermo un blocco solo finche' quel blocco e' PIU'
   CORTO DELLA FINESTRA. E' il vero motivo per cui i correlati stanno in
   fondo e non qui: e' un budget di altezza, non un contenitore.
   L'altezza vera misurata in pagina sta in `DEMO-SCHEDA.md`. */
.oe-colonna__interno{
  position:sticky;
  top:var(--oe-scheda-aggancio);
}
/* Su schermo basso il budget non c'e' piu': meglio una colonna che
   scorre che una colonna incollata di cui si vede solo la cima. */
@media (max-height:600px){
  .oe-colonna__interno{ position:static; }
}

/* ------------------------------------------------------------------
   La testa

   🔑 QUI SI DECIDE A CHE ALTEZZA COMINCIA LA FOTO, ed e' il rilievo di
   Boris del 28/8: «l'immagine non e' lenta, e' solo troppo in basso.»
   Misurato sulla scheda lunga a 1440px, con la demo spenta: la foto
   cominciava a 581px, cioe' quasi due terzi di schermata di roba prima
   dell'unica cosa che il visitatore e' venuto a vedere. I numeri
   prima/dopo, su quattro schede e a due larghezze, stanno in
   `DEMO-SCHEDA.md §5`.

   Tre tagli, tutti qui dentro:
     - il titolo: era `clamp(1.9rem,3.6vw,3rem)` su 22 caratteri di
       misura, e su tre schede su quattro andava a DUE righe da 47px.
       Misura piu' larga e corpo piu' contenuto: due righe diventano una
       nella maggior parte dei casi, e quando restano due sono piu'
       basse. Il riferimento (Adafruit) ha il titolo molto piu' piccolo
       di cosi'.
     - SKU e categorie: scesi SOTTO LA FOTO (`oe_scheda_identita()`).
     - i margini della fascia: 20+26 → 12+18.
   ------------------------------------------------------------------ */
.oe-prodotto__testa{
  border-bottom:1px solid var(--vg-filetto-fine);
  padding-bottom:12px; margin-bottom:18px;
}
.single-product .oe-prodotto__testa .product_title{
  font-family:var(--vg-display); font-weight:400;
  font-size:clamp(1.7rem,2.6vw,2.35rem); line-height:1.02; letter-spacing:-.005em;
  color:var(--vg-nero); margin:0 0 8px; text-wrap:balance; max-width:34ch;
}
/* Il sommario: la descrizione breve, e solo quando non e' un ritaglio
   della lunga. Su meta' del catalogo che arrivera' (2.440 prodotti su
   4.288) lo e', e li' questo blocco non viene proprio stampato — il
   controllo sta in `oe_scheda_sommario()`. */
/* ⚠️ A TUTTA LARGHEZZA, chiesto da Boris il 29/8. Il limite di 70 caratteri
   per riga e' la regola tipografica di leggibilita', e qui si toglie apposta:
   il sommario ha mediana 109 caratteri, quindi anche a piena larghezza sta in
   una riga o due, e il costo di leggibilita' non si paga. Su un sommario
   lungo il testo si spezza a 100ch, che e' il punto in cui l'occhio comincia
   davvero a perdere la riga dopo. */
.oe-prodotto__sommario{
  font-family:var(--vg-sans); font-size:1.0625rem; line-height:1.45;
  color:var(--vg-testo); max-width:none; margin:0;
}
.oe-prodotto__sommario p{ max-width:100ch; }
.oe-prodotto__sommario p{ margin:0 0 6px; }
.oe-prodotto__sommario p:last-child{ margin-bottom:0; }

/* Il sommario LUNGO — oltre i 300 caratteri — non sta sotto il titolo ma
   in cima alla descrizione: sotto il titolo costerebbe alla piega piu' di
   quanto la piega abbia da dare. Il perche', coi numeri, sta in
   `oe_scheda_sommario_in_testa()`. Qui e' l'attacco della descrizione, e
   si legge un filo piu' grande del resto perche' e' il sommario: non un
   paragrafo qualunque che si e' trovato li' per caso. */
.oe-descrizione__attacco{
  font-family:var(--vg-sans); font-size:1.0625rem; line-height:1.45;
  color:var(--vg-testo); margin:0 0 16px;
}
.oe-descrizione__attacco p{ margin:0 0 8px; }
.oe-descrizione__attacco p:last-child{ margin-bottom:0; }

/* L'identita': SKU, EAN, tipologia, categorie. Sta SOTTO LA FOTO, non
   sopra — vedi il riquadro qui accanto e `oe_scheda_identita()`.
   ⛔ Peso e misure NON ci sono: sono il dato di spedizione, e in pagina
   contraddicevano la descrizione (il cavo USB diceva «about 1 meter» e
   la tabella «100 mm»). */
.oe-prodotto__identita{
  font-family:var(--vg-sans); font-size:.75rem; color:var(--vg-tenue);
  margin:-22px 0 30px; display:flex; flex-wrap:wrap; gap:5px 16px;
  border-bottom:1px solid var(--vg-filetto-fine); padding-bottom:12px;
}
.oe-identita__sku{ font-weight:700; letter-spacing:.03em; color:var(--vg-nero); }
.oe-prodotto__identita a{ color:var(--vg-tenue); }
.oe-prodotto__identita a:hover{ color:var(--vg-accento); }

/* Il bollino «non piu' disponibile». Decisione di Boris del 28/8: i
   prodotti usciti di produzione restano online etichettati, non
   acquistabili. Nero pieno e non rosso: non e' un errore, e' uno stato. */
.oe-bollino{
  display:inline-block; margin:0 0 12px; padding:5px 11px;
  font-family:var(--vg-sans);
  font-size:.6875rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
}
.oe-bollino--ritirato{ background:var(--vg-nero); color:#fff; }

/* ------------------------------------------------------------------
   Il corpo: galleria, descrizione, specifiche — tutto aperto
   ------------------------------------------------------------------ */
/* ------------------------------------------------------------------
   LA GALLERIA — rifatta il 29/8, e il perche' e' misurato.

   🔴 IL DIFETTO CHE HA CHIUSO: le miniature COPRIVANO il fondo della
   foto principale. Misurato in pagina su tre schede e quattro foto
   ciascuna (`docker/scripts/misura-galleria.js`): il fondo
   dell'immagine finiva SEMPRE 33px sotto il bordo alto della striscia.
   Sempre lo stesso numero — quindi una regola, non un caso limite.

   La regola era di KADENCE, non di WooCommerce:
     .woocommerce div.product div.images .flex-control-thumbs{ margin:-32px 0 0 }
   cioe' le miniature tirate SU di 32px, appoggiate sopra la foto. Su una
   foto con del bianco in basso non si vede; su una in cui il prodotto
   arriva al bordo mangia l'ultimo centimetro di scheda.

   ⚠️ E qui sotto c'era gia' `.single-product .flex-control-thumbs{
      margin-top:10px }`, che NON HA MAI FUNZIONATO: due classi contro
      quattro classi e due elementi. In pagina il margine calcolato
      restava -32px. Le regole di `.flex-*` sono state tolte tutte: la
      galleria non e' piu' quella di flexslider, e regole per elementi
      che non esistono servono solo a far credere a chi legge il foglio
      che la pagina sia ancora fatta cosi'.

   COM'E' FATTA ADESSO:

     .oe-galleria__scena     ── telaio ── pista (scorre) ── foto x N
                             │            frecce
                             └── strip (le miniature)

   La pista e' un `overflow-x:auto` con `scroll-snap`: sul telefono da'
   trascinamento, inerzia e scatto sulla foto senza una riga di
   javascript. Le frecce e il trascinamento col mouse sono in
   `galleria.js`, che e' migliorativo — senza, la galleria scorre lo
   stesso.
   ------------------------------------------------------------------ */
.single-product .oe-galleria{ margin-bottom:34px; }
.single-product .oe-galleria img{ border-radius:0; }

.oe-galleria__scena{ display:flex; flex-direction:column; gap:12px; }

/* 🔑 L'ALTEZZA E' FISSA PER TUTTE LE FOTO DELLA GALLERIA, e la scrive
   PHP a partire dall'altezza VERA della foto principale (fra 240 e
   420px). Due difetti chiusi insieme:
     - la pagina non salta piu' cambiando foto. Prima il `.flex-viewport`
       aveva un'altezza inline diversa per ogni foto e la animava in
       mezzo secondo: 263px → 391px sullo SDcard shield, misurato;
     - non c'e' cornice vuota intorno a una foto piccola, perche'
       l'altezza e' quella della foto e non un numero fisso.
   Il tetto di 420px difende la misura che questo progetto tiene: foto,
   prezzo e ADD TO CART sopra la piega (417px a 1440). */
/* 🔑 L'ALTEZZA DELLA CORNICE E' IL MINIMO FRA DUE COSE, e ci sono
   voluti due tentativi per capire che sono due:

     - `--oe-gal-h`, l'altezza VERA della foto principale (fra 240 e
       420px), che la scrive PHP. Difende la piega sugli schermi larghi;
     - quanto la foto e' ALTA DAVVERO alla larghezza che la colonna le
       concede, cioe' (larghezza della colonna − le due fasce delle
       frecce) diviso le proporzioni.

   ⚠️ La prima da sola era giusta sul portatile e sbagliata sul telefono:
   misurato, sulla scheda lunga a 390px la cornice restava alta 420px
   mentre la foto, stretta dalla colonna, ne occupava 250 — 75px di
   bianco sopra e sotto, e la foto che cominciava 40px piu' in basso.

   ⚠️ E il secondo tentativo, `aspect-ratio` sulla pista con un
   `max-height`, era peggio di tutti e due: le foto uscivano piu' PICCOLE
   del dovuto (la principale dello SDcard shield alta 180px invece di
   241) perche' l'altezza percentuale dei riquadri non si calcolava piu'
   sull'altezza limitata. Misurato anche quello, e scartato.

   `100cqw` e' la larghezza della galleria: serve `container-type` sul
   contenitore, ed e' l'unico modo in CSS di far dipendere un'altezza da
   una larghezza senza scriverla in javascript. */
.oe-galleria{ container-type:inline-size; }
.oe-galleria__telaio{
  position:relative; min-width:0;
  height:min( var(--oe-gal-h,380px), calc((100cqw - 108px) / var(--oe-gal-ar,1)) );
}

.oe-galleria__pista{
  display:flex; height:100%;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none;
  border:1px solid var(--vg-filetto-fine);
  background:#fff;
  overscroll-behavior-x:contain;
  touch-action:pan-y pinch-zoom;
}
.oe-galleria__pista::-webkit-scrollbar{ display:none; }
.oe-galleria__pista:focus-visible{ outline:2px solid var(--vg-accento); outline-offset:2px; }
.oe-galleria__pista.sta-trascinando{ cursor:grabbing; scroll-snap-type:none; user-select:none; }
/* ⚠️ Le foto non si trascinano: il trascinamento nativo del browser —
   quello che serve a portare un'immagine in un'altra finestra — si prende
   il gesto al secondo movimento e la pista non scorre piu'. Misurato. */
.oe-galleria .woocommerce-product-gallery__image img{ -webkit-user-drag:none; user-drag:none; }

/* ⛔ LE FRECCE NON STANNO SOPRA LA FOTO. Il rilievo di Boris era
   «la galleria copre l'immagine principale»: rimediare alle miniature e
   poi appoggiare due frecce sul prodotto sarebbe la stessa cosa con un
   altro nome. Il riquadro di ogni foto ha 54px di margine a destra e a
   sinistra, e le frecce stanno LI' DENTRO — sul bianco, mai sul
   prodotto. Su telefono 40px. */
.oe-galleria .woocommerce-product-gallery__image,
.oe-galleria .woocommerce-product-gallery__image--placeholder{
  scroll-snap-align:center; scroll-snap-stop:always;
  align-items:center; justify-content:center;
  padding:10px 54px; box-sizing:border-box;
  overflow:hidden;
}

/* 🔴 IL SELETTORE LUNGO NON E' UN VEZZO: e' l'unico modo di vincere.
   Kadence, in `woocommerce.min.css`, tiene DUE regole sulle foto diverse
   dalla prima — la sua impaginazione di riserva per quando flexslider
   non gira, cioe' esattamente il caso nostro:

     … .woocommerce-product-gallery__image:nth-child(n+2){
           display:inline-block; height:65px; width:33%; margin-top:-31px }   (0,6,2)
     … .woocommerce-product-gallery__image:nth-child(n+2) img{ height:65px }  (0,6,3)

   Le regole qui sopra, scritte corte, valgono (0,2,0) e (0,2,1): perdevano
   su `display`, `height` e `margin-top`. L'effetto in pagina sembrava un
   guasto di tutt'altra natura — dalla seconda foto in poi si vedeva un
   francobollo da 64x45 al centro di una cornice da 852x263, e la prima
   foto invece stava benissimo. Misurato prima di scrivere queste righe,
   leggendo quali regole colpivano davvero l'elemento; e il `-31px` e' poi
   lo stesso agguato del `margin:-32px` delle miniature in un'altra veste.

   Queste valgono (0,7,2) e (0,7,3) e vincono. ⛔ Niente `!important`: uno
   qui obbligherebbe a metterne un altro ogni volta che una regola vicina
   deve cambiare qualcosa. */
.woocommerce div.product div.images.oe-galleria
  .woocommerce-product-gallery__wrapper.oe-galleria__pista
  > .woocommerce-product-gallery__image,
.woocommerce div.product div.images.oe-galleria
  .woocommerce-product-gallery__wrapper.oe-galleria__pista
  > .woocommerce-product-gallery__image--placeholder{
  display:flex; flex:0 0 100%; width:100%; height:100%; margin:0;
}
.woocommerce div.product div.images.oe-galleria
  .woocommerce-product-gallery__wrapper.oe-galleria__pista
  .woocommerce-product-gallery__image a{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; min-height:0; margin:0;
}
.woocommerce div.product div.images.oe-galleria
  .woocommerce-product-gallery__wrapper.oe-galleria__pista
  .woocommerce-product-gallery__image img{
  display:block; margin:0;
  width:auto; height:auto; max-width:100%; max-height:100%;
  object-fit:contain;
}
/* ⚠️ Sul collegamento serve `height:100%` e NON `max-height:100%`: una
   `max-height` non da' un'altezza DEFINITA, e senza un'altezza definita
   il `max-height:100%` dell'immagine dentro non ha niente su cui
   calcolarsi — il browser lo ignora. Misurato: la foto da 600x600 del
   DC motor driver usciva alta 600px dentro un telaio da 420, sbordando
   di 90px sopra e sotto, e tornava a coprire le miniature. Lo stesso
   difetto di prima con un'altra causa. Le due regole sono qui sotto,
   nel blocco a selettore lungo, perche' li' devono stare per vincere.
   ⛔ E niente ingrandimenti: una foto da 350px stirata a 900 e'
   sgranata, quindi `width/height:auto` e mai `100%`. */

.oe-galleria__freccia{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:#fff; color:var(--vg-nero);
  border:1px solid var(--vg-filetto); border-radius:0;
  cursor:pointer; box-shadow:none;
  transition:background .12s ease, color .12s ease;
}
.oe-galleria__freccia--prec{ left:8px; }
.oe-galleria__freccia--succ{ right:8px; }
.oe-galleria__freccia svg{ width:20px; height:20px; fill:currentColor; }
.oe-galleria__freccia:hover:not(:disabled){ background:var(--vg-nero); color:#fff; border-color:var(--vg-nero); }
.oe-galleria__freccia:focus-visible{ outline:2px solid var(--vg-accento); outline-offset:2px; }
/* ⚠️ Ai capi si DISABILITANO, non spariscono: una freccia che sparisce
   sposta la foto di qualche pixel a ogni cambio. */
.oe-galleria__freccia:disabled{ opacity:.28; cursor:default; }

/* ------------------------------------------------------------------
   LA STRISCIA DELLE MINIATURE — UNA RIGA SOLA CHE SCORRE.

   🔴 Boris, 29/8, su una scheda con 31 foto: «troppo grosso questo
      riquadro, una sola riga con le frecce per scorrerle tutte».

   ⚠️ QUI C'ERA `flex-wrap:wrap`, E IL DIFETTO SI VEDEVA SOLO CON MOLTE
      FOTO. Con due o tre miniature — le schede su cui era stata provata
      la galleria il 28/8 — una riga sola ci sta e la regola non fa
      niente. Con trentuno diventa un blocco di quattro file che riempie
      la finestra. Misurato con `docker/scripts/misura-striscia.js` sul
      robot cingolato:

        1440x900   striscia 466px su 4 righe   blocco galleria 915px
         390x844   striscia 580px su 7 righe   blocco galleria 871px

      🔑 Su telefono e' il numero che conta di piu': nell'ordine del
      telefono la striscia sta FRA la foto e il carrello (`order:3` e
      `order:4` piu' sotto), quindi quei 580px spingevano ADD TO CART
      sotto la piega su ogni prodotto con piu' di quattro foto.

   Adesso e' la stessa meccanica della pista delle foto grandi:
   `nowrap` + `overflow-x:auto`. Sul telefono il dito scorre da solo,
   con l'inerzia, senza una riga di javascript — e le frecce sono in
   piu', non al posto del dito.
   ------------------------------------------------------------------ */
.oe-galleria__nastro{
  display:flex; align-items:center; gap:6px; min-width:0;
}
.oe-galleria__strip{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:nowrap; align-items:center; gap:8px;
  flex:1 1 auto; min-width:0;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -ms-overflow-style:none;
  overscroll-behavior-x:contain;
}
.oe-galleria__strip::-webkit-scrollbar{ display:none; }
/* ⛔ Niente `touch-action` qui. Sulla PISTA delle foto grandi c'e'
   `pan-y pinch-zoom` — una scelta sua — ma sulla striscia bloccherebbe
   proprio il gesto che Boris ha chiesto: «su telefono la striscia deve
   scorrere col dito». Il valore di partenza del browser (`auto`) e'
   quello giusto, e si scrive che e' voluto perche' la riga qui sopra
   sembra una dimenticanza. */
.oe-galleria__strip li{ margin:0; padding:0; flex:0 0 auto; }

/* ⛔ LE FRECCE DELLA STRISCIA NON SONO QUELLE DELLA FOTO, e non devono
   sembrarlo: sono due comandi che fanno due cose diverse.

     foto      dentro il telaio, 38x38, BORDATE, centrate sull'immagine
               — CAMBIANO la foto;
     striscia  ai capi della striscia, strette 28px e alte quanto una
               miniatura, SENZA cornice e di colore tenue — FANNO
               SCORRERE la striscia, la foto resta dov'e'.

   ⛔ E stanno FUORI dalla striscia, non sopra: appoggiate sulle
      miniature coprirebbero una miniatura, che e' lo stesso difetto del
      28/8 — «la galleria copre la foto» — spostato di dieci centimetri.
      Costano 72px di larghezza a 1440 e 60 a 390.

   ⛔ E NASCONO NASCOSTE: le accende `galleria.js` solo quando la
      striscia scorre davvero (`.puo-scorrere`). Con nove miniature su
      nove visibili due frecce spente sono due bottoni da interpretare,
      e senza javascript non farebbero niente comunque — mentre la
      striscia continua a scorrere col dito e con la rotellina. */
.oe-striscia__freccia{
  display:none; flex:0 0 auto;
  width:28px; height:76px; padding:0;
  align-items:center; justify-content:center;
  background:#fff; color:var(--vg-tenue);
  border:0; border-radius:0; box-shadow:none; cursor:pointer;
  transition:color .12s ease;
}
.oe-galleria__nastro.puo-scorrere .oe-striscia__freccia{ display:flex; }
.oe-striscia__freccia svg{ width:16px; height:16px; fill:currentColor; }
.oe-striscia__freccia:hover:not(:disabled){ color:var(--vg-nero); }
.oe-striscia__freccia:focus-visible{ outline:2px solid var(--vg-accento); outline-offset:2px; }
.oe-striscia__freccia:disabled{ opacity:.22; cursor:default; }

/* ⚠️ IL BORDO E' 2px SU TUTTE, anche su quelle spente — e non e' una
   scelta di gusto. Con 1px sulle spente e 2px sull'attiva ogni miniatura
   cambiava larghezza E ALTEZZA di due pixel quando si accendeva: la
   striscia sussultava a ogni cambio di foto, e — misurato — la riga da
   cinque miniature a 390px sbordava di ESATTAMENTE 2 pixel, cioe' il
   bordo in piu' dell attiva. Due pixel sono anche quello che faceva
   sbagliare il conto delle righe allo strumento di misura. Con un bordo
   uniforme il conto torna e la striscia sta ferma. */
.oe-galleria__mini{
  display:block; padding:0; border:2px solid var(--vg-filetto-fine);
  background:#fff; cursor:pointer; border-radius:0; box-shadow:none;
  opacity:.55; transition:opacity .12s ease, border-color .12s ease;
}
/* 🔴 LE MINIATURE NON SONO MAI STATE QUADRATE, e si e' visto solo
   misurandole con molte foto. Questa regola c'era gia' e diceva
   `width:72px; height:72px`, ma valeva (0,1,1) e perdeva contro Kadence:

     woocommerce.min.css  .woocommerce div.product div.images img{ height:auto }   (0,3,3)

   In pagina le miniature uscivano larghe 72 e alte 45, 49, 56, 72…
   secondo le proporzioni del file. Con `flex-wrap:wrap` e tre foto non
   si notava; con trentuno erano quattro file sfalsate, ed e' meta' del
   «troppo grosso» di Boris. ⚠️ E' lo STESSO agguato gia' documentato
   qui sopra per `:nth-child(n+2)`: una regola che sembra scritta e non
   e' mai stata applicata. Si vede solo leggendo lo stile CALCOLATO.

   Questa vale (0,6,3) e vince. ⛔ Niente `!important`, per la stessa
   ragione di sempre: uno qui ne obbliga un altro alla riga dopo. */
.woocommerce div.product div.images.oe-galleria
  .oe-galleria__nastro .oe-galleria__mini img{
  display:block; width:72px; height:72px; object-fit:contain; margin:0;
  max-width:none;
}
.oe-galleria__mini:hover,
.oe-galleria__mini.is-attiva{ opacity:1; border-color:var(--vg-filetto); }
.oe-galleria__mini.is-attiva{ border-color:var(--vg-accento); }
.oe-galleria__mini:focus-visible{ outline:2px solid var(--vg-accento); outline-offset:2px; }

/* 🔑 SOPRA O DI LATO, DECISO DALLE PROPORZIONI DELLA FOTO — non dalla
   larghezza della finestra soltanto.

   Una foto alta e stretta lascia spazio VUOTO ai lati e la striscia ci
   sta comoda; una larga e bassa no. La classe la scrive PHP guardando
   le dimensioni vere della foto principale: sotto 0,95 di
   larghezza/altezza va «di lato», altrimenti «sotto».

   Misurato sul catalogo locale: 908 orizzontali, 593 quadrate, 17
   verticali su 1.518. «Di lato» e' l'1,1% dei casi — ma e' proprio
   quello in cui la striscia sotto sprecava mezza schermata.

   ⚠️ La larghezza del telaio, di lato, e' quella che la foto occupa
      DAVVERO a quell'altezza (altezza x proporzioni) piu' i 108px delle
      due fasce delle frecce: cosi' non resta bianco fra la foto e le
      miniature. */
@media (min-width:860px){
  .oe-galleria--lato .oe-galleria__scena{ flex-direction:row; align-items:flex-start; gap:16px; }
  .oe-galleria--lato .oe-galleria__telaio{
    flex:0 0 auto;
    width:min(100%, calc(var(--oe-gal-h,380px) * var(--oe-gal-ar,1) + 108px));
  }
  /* 🔑 DI LATO LA RIGA DIVENTA UNA COLONNA CHE SCORRE. Stessa meccanica,
     asse ruotato: `nowrap` in verticale e `overflow-y:auto`. E' il
     comportamento che va conservato — la striscia sceglie da se' se
     stare sotto o di lato in base alle proporzioni della foto — e senza
     questo blocco «di lato» sarebbe tornato a impilare le miniature una
     sull'altra all'infinito, che con 31 foto e' una colonna da 2.400px.

     ⚠️ L'altezza del nastro e' scritta a mano e vale `--oe-gal-h`, cioe'
     l'altezza del telaio. Non e' un doppione per pigrizia: senza
     un'altezza DEFINITA `overflow-y:auto` non ha niente su cui
     calcolarsi e la colonna cresce quanto le pare, portandosi dietro la
     riga. E' lo stesso agguato del `max-height:100%` sul collegamento
     della foto, poche righe piu' su. */
  /* ⚠️ `flex:0 0 auto`, non `1 1 auto`: con la colonna larga 76px e il
     nastro elastico, la striscia si ritrovava CENTRATA in mezzo allo
     spazio che avanzava — 170px di bianco fra la foto e le miniature, e
     le miniature staccate da quello che descrivono. Visto in pagina sul
     plotter taglia polistirolo, non dedotto. Adesso il nastro e' largo
     quanto le miniature e sta appoggiato alla foto; il bianco resta
     tutto a destra, dove e' margine e non buco. */
  .oe-galleria--lato .oe-galleria__nastro{
    flex:0 0 auto; flex-direction:column; align-items:center;
    height:var(--oe-gal-h,380px);
  }
  .oe-galleria--lato .oe-galleria__strip{
    flex-direction:column; flex:1 1 auto;
    min-height:0; width:auto;
    overflow-y:auto; overflow-x:hidden;
    overscroll-behavior-y:contain;
  }
  /* Le frecce si coricano: larghe quanto una miniatura, basse 24px. ⛔ La
     punta ruota di 90°, perche' una freccia che indica a destra sopra una
     colonna che scorre in giu' dice una cosa falsa. */
  .oe-galleria--lato .oe-striscia__freccia{ width:76px; height:24px; }
  .oe-galleria--lato .oe-striscia__freccia--prec svg{ transform:rotate(90deg); }
  .oe-galleria--lato .oe-striscia__freccia--succ svg{ transform:rotate(90deg); }
}
/* Sotto gli 860px si torna sempre sotto: di lato non ci sta niente. */

/* Una foto sola: niente frecce, niente striscia, e le fasce laterali si
   stringono — le frecce non ci sono piu', quel bianco non serve a nulla. */
.woocommerce div.product div.images.oe-galleria.oe-galleria--sola
  .woocommerce-product-gallery__wrapper.oe-galleria__pista
  > .woocommerce-product-gallery__image{ padding:8px 12px; }

/* Su telefono le fasce delle frecce si stringono: 54px su una colonna da
   358 sono un terzo della foto. Misurato: con 40px la foto in vista
   guadagna 28px di larghezza e la cornice si accorcia altrettanto. */
@media (max-width:700px){
  .woocommerce div.product div.images.oe-galleria
    .woocommerce-product-gallery__wrapper.oe-galleria__pista
    > .woocommerce-product-gallery__image{ padding:8px 40px; }
  .oe-galleria__telaio{
    height:min( var(--oe-gal-h,380px), calc((100cqw - 80px) / var(--oe-gal-ar,1)) );
  }
  .oe-galleria__freccia{ width:32px; height:32px; }
  .oe-galleria__freccia--prec{ left:4px; }
  .oe-galleria__freccia--succ{ right:4px; }
  .woocommerce div.product div.images.oe-galleria
    .oe-galleria__nastro .oe-galleria__mini img{ width:60px; height:60px; }
  /* Le frecce della striscia seguono la miniatura: 62px di altezza (60
     dell'immagine + i due bordi) e 24 di larghezza. Su 342px di colonna
     due frecce da 28 sarebbero il 16% della striscia. */
  .oe-galleria__nastro{ gap:4px; }
  .oe-striscia__freccia{ width:24px; height:64px; }
  .oe-striscia__freccia svg{ width:14px; height:14px; }
}

.oe-titolo-sezione{
  font-family:var(--vg-sans);
  font-weight:800; font-size:1.375rem; line-height:1.15; letter-spacing:-.015em;
  color:var(--vg-nero);
  border-top:4px solid var(--vg-accento); padding-top:12px; margin:0 0 18px;
}
.oe-titolo-sezione--piccolo{
  font-size:.8125rem; letter-spacing:.08em; text-transform:uppercase;
  border-top-width:3px; padding-top:9px; margin-bottom:12px;
}
.oe-blocco{ margin:0 0 40px; }
.oe-blocco--descrizione{
  font-family:var(--vg-sans); font-size:1.0625rem; line-height:1.6; color:var(--vg-testo);
}
.oe-blocco--descrizione img{ max-width:100%; height:auto; border-radius:0; }
/* ------------------------------------------------------------------
   LE FOTO DENTRO LA DESCRIZIONE — «centra quando possibile».

   ⚠️ La classe `oe-foto-centrata` NON la scrive chi ha fatto la scheda:
   la mette `oe_descrizione_foto()` in PHP, e solo sulle immagini che
   stanno DA SOLE in un blocco. Le altre due specie restano dove sono:
   quelle che il testo affianca di proposito (`align="left"`, `float`)
   e quelle in mezzo a una frase — un'iconcina centrata spezza la riga
   in tre. La differenza non si vede dall'immagine ma da cosa c'e'
   intorno, e in CSS quel dato non c'e': per questo la decisione e' in
   PHP e qui c'e' solo il disegno.

   Misurato sulle 1.527 schede locali: 532 hanno almeno una foto nella
   descrizione, 1.123 foto vengono centrate, 24 restano affiancate al
   testo, 25 restano dentro una frase.
   ------------------------------------------------------------------ */
.oe-blocco--descrizione img.oe-foto-centrata{
  display:block; margin-left:auto; margin-right:auto;
}
/* ⚠️ E il paragrafo che la contiene: senza questo una foto centrata
   dentro un `<p style="text-align:left">` resta a sinistra, perche' il
   `margin:auto` non ha effetto su un elemento senza larghezza propria
   piu' stretta del contenitore. */
.oe-blocco--descrizione p:has(> img.oe-foto-centrata:only-child),
.oe-blocco--descrizione div:has(> img.oe-foto-centrata:only-child),
.oe-blocco--descrizione td:has(> img.oe-foto-centrata:only-child){ text-align:center; }

/* ⚠️ Le descrizioni importate da OpenCart portano tabelle di
   impaginazione con larghezze in pixel: dentro una colonna piu' stretta
   sfondano. Si lasciano scorrere per conto loro invece di allargare la
   pagina. */
.oe-blocco--descrizione table{ max-width:100%; }
.oe-blocco--descrizione > table,
.oe-blocco--descrizione .oe-tabella-larga{ display:block; overflow-x:auto;
  /* 🔴 30/8: molte di quelle tabelle portano ANCHE un'altezza fissa in pixel
     nello style originale (es. `height:359px`), eredita' da futuranet, che ora
     diventa l'altezza di QUESTO contenitore (display:block la fa sua). Il
     contenuto vero e' quasi sempre piu' alto: risultato, una finestrella
     tagliata con l'ascensore verticale (vista su `6080-SFD02`: «Package
     contents» e «Documentation» sparivano dentro 359px).
     ⚠️ Non basta scrivere `overflow-y:visible`: la specifica CSS impone che
     se i due assi di overflow non sono UGUALI, quello "visible" diventa
     "auto" anche lui appena l'altro non lo e' — quindi un
     `overflow-x:auto` costringe SEMPRE anche la verticale ad "auto", quale
     che sia il valore scritto qui. L'unico modo e' togliere il vincolo
     all'origine: l'altezza fissa e' inline nell'HTML (vince su qualunque
     regola non `!important`), va spenta qui. */
  height:auto !important; }

/* «Technical details», costruita da quello che la descrizione DICE.
   🔴 Prima qui c'era la tabella degli attributi di WooCommerce, con
   dentro PESO e MISURE del backend — che sono il collo, non l'oggetto.
   Sul cavo USB la descrizione diceva «about 1 meter, about 100 grams» e
   la tabella sotto «100 mm, 0,2 kg»: la stessa pagina si smentiva da
   sola. Adesso le righe escono da `oe_dati_tecnici()`, che estrae solo
   coppie «Etichetta: valore» scritte per esteso nel testo, e quando non
   trova niente non stampa la sezione. Resa misurata sul catalogo in
   arrivo: 58,3%. */
.oe-specifiche{
  /* ⚠️ Non a tutta larghezza: su un corpo da 900px etichetta e valore
     finiscono a mezzo schermo di distanza e l'occhio perde la riga. */
  width:100%; max-width:44rem; border-collapse:collapse;
  font-family:var(--vg-sans); font-size:.875rem;
}
.oe-specifiche th,
.oe-specifiche td{
  text-align:left; vertical-align:top; padding:9px 12px 9px 0;
  border-bottom:1px solid var(--vg-filetto-fine); background:none;
}
.oe-specifiche th{
  font-weight:700; color:var(--vg-tenue); width:38%;
  font-size:.75rem; letter-spacing:.03em; text-transform:uppercase;
}
.oe-specifiche td{ color:var(--vg-nero); padding-right:0; }
.oe-specifiche tr:last-child th,
.oe-specifiche tr:last-child td{ border-bottom:0; }
/* ------------------------------------------------------------------
   La colonna: il blocco d'acquisto
   ------------------------------------------------------------------ */
.oe-acquisto{
  border-top:4px solid var(--vg-filetto);
  padding-top:16px;
}
.single-product .oe-acquisto .price,
.single-product .oe-acquisto .summary .price{
  font-family:var(--vg-sans); font-weight:800;
  font-size:1.75rem; line-height:1.1; color:var(--vg-nero);
  border-bottom:0; padding-bottom:0; margin:0 0 4px;
}
.single-product .oe-acquisto .oe-iva,
.single-product .oe-acquisto .oe-prezzo-nota{
  display:block; font-size:.6875rem; color:var(--vg-tenue);
}

/* ------------------------------------------------------------------
   I DUE PREZZI AFFIANCATI — netto e ivato, sempre tutti e due.
   Decisione di Boris del 28/8 col riferimento in mano (RS Components).

   🔑 Perche' affiancati e non con un interruttore: un interruttore ha
   uno stato, e uno stato che cambia la pagina la fa esistere in due
   versioni — prima o poi la cache ne consegna una a chi si aspettava
   l'altra. Cosi' la pagina e' UNA SOLA per chiunque, e con Cloudflare
   in arrivo la settimana prossima e' l'unica forma che non si rompe.

   Il markup lo costruisce `oe_prezzo_coppia()` nel plugin del negozio,
   dove sta tutta l'IVA: il tema disegna e non calcola.
   ------------------------------------------------------------------ */
.oe-prezzo2{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 18px; }
.oe-prezzo2__voce{ display:flex; flex-direction:column; }
.oe-prezzo2__cifra{ line-height:1.05; }
.oe-prezzo2__nota{
  font-family:var(--vg-sans); font-weight:600;
  font-size:.625rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--vg-tenue); margin-top:3px;
}
/* Nella colonna: il netto grande, l'ivato accanto piu' sobrio — che e'
   esattamente la forma del riferimento. */
.single-product .oe-acquisto .oe-prezzo2__voce--netto .oe-prezzo2__cifra{
  font-size:1.75rem; font-weight:800; color:var(--vg-nero);
}
.single-product .oe-acquisto .oe-prezzo2__voce--lordo .oe-prezzo2__cifra{
  font-size:1.125rem; font-weight:700; color:var(--vg-tenue);
}
/* ⚠️ Il suffisso «incl. VAT» del plugin resta stampato solo quando la
   coppia NON c'e' (reverse charge, extra-UE): li' spiega perche' l'IVA
   manca, e serve. Dove c'e' la coppia lo dicono gia' le due note. */
.oe-prezzo2 + .oe-iva{ display:none; }

/* La nota di trasparenza sotto i due prezzi. Piccola e sobria: e' un
   chiarimento, non un avviso — e sta solo sulla scheda, dove si decide. */
.single-product .oe-acquisto .oe-nota-iva{
  font-family:var(--vg-sans); font-size:.6875rem; line-height:1.4;
  color:var(--vg-tenue); margin:8px 0 0; max-width:34ch;
}

/* ⚠️ La sobrieta' dell'ivato e' la regola PREDEFINITA, non un'eccezione
   per la scheda: nei listini le schede prodotto sono impaginate da
   Kadence e i loro nomi di classe non sono gli stessi ovunque. Una
   regola che vale dappertutto e non dipende dal contenitore e' l'unica
   che non si scopre rotta in una pagina che nessuno ha guardato. */
.oe-prezzo2__voce--netto .oe-prezzo2__cifra{ font-weight:800; color:var(--vg-nero); }
.oe-prezzo2__voce--lordo .oe-prezzo2__cifra{
  font-size:.8125em; font-weight:600; color:var(--vg-tenue);
}
.single-product .oe-acquisto .stock{
  font-family:var(--vg-sans);
  font-size:.6875rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  margin:14px 0 10px;
}
.single-product .oe-acquisto .stock.in-stock{ color:var(--vg-accento); }
.single-product .oe-acquisto .stock.out-of-stock{ color:#B4310F; }

.single-product .oe-acquisto form.cart{ margin:0; display:flex; gap:10px; align-items:stretch; }
.single-product .oe-acquisto form.variations_form{ display:block; }
.single-product .oe-acquisto .quantity input{
  border-radius:0; font-family:var(--vg-sans); width:74px; height:100%;
  border:1px solid var(--vg-filetto);
}
.single-product .oe-acquisto .single_add_to_cart_button{
  border-radius:0; padding:14px 20px; flex:1 1 auto;
  font-family:var(--vg-sans);
  font-size:.8125rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
}

/* Gli sconti a quantita': DENTRO la colonna, come nel riferimento.
   Su futuranet ci sono gia' su alcuni prodotti. */
.oe-sconti{ margin:16px 0 0; border-top:1px solid var(--vg-filetto-fine); padding-top:12px; }
.oe-sconti__titolo{
  font-family:var(--vg-sans);
  font-size:.6875rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--vg-tenue); margin:0 0 8px;
}
.oe-sconti__tavola{ width:100%; border-collapse:collapse; font-family:var(--vg-sans); }
.oe-sconti__tavola th,
.oe-sconti__tavola td{
  border:0; border-bottom:1px solid var(--vg-filetto-fine);
  padding:6px 0; font-size:.8125rem; background:none;
}
.oe-sconti__tavola th{ text-align:left; font-weight:600; color:var(--vg-tenue); }
.oe-sconti__tavola td{ text-align:right; font-weight:800; color:var(--vg-nero); }
.oe-sconti__tavola tr:last-child th,
.oe-sconti__tavola tr:last-child td{ border-bottom:0; }
/* Nella tabella degli sconti la coppia sta su una riga sola: la colonna
   e' larga 340px e due colonne di prezzi ci stanno solo se sono in
   linea. */
.oe-sconti__tavola .oe-prezzo2{ justify-content:flex-end; gap:2px 10px; }
.oe-sconti__tavola .oe-prezzo2__voce{ align-items:flex-end; }

/* 🔴 IL PREZZO SCONTATO E' PIU' PICCOLO DEL PREZZO. Boris, 29/8: «un po'
   piu' piccoli i prezzi degli sconti.»

   ⚠️ Non e' una questione di gusto ma di lettura. La riga degli sconti
   nasceva con gli STESSI corpi del prezzo principale — misurati in
   pagina: 28px il netto, 18px l'ivato, per tutti e due i blocchi — e
   quindi il numero dello sconto pesava come il prezzo. Lo sconto pero'
   non e' il prezzo del prodotto: e' una CONDIZIONE, vale solo da tre
   pezzi in su. Chi guarda in fretta legge il numero piu' grosso, e a
   parita' di corpo legge quello piu' in basso — che e' sempre il piu'
   conveniente. L'errore andava sempre nella stessa direzione.

   🔑 Si scala tutto, non si cambia: il rapporto fra i due numeri della
   riga resta quello del prezzo principale (28/18 = 1,556 → 18/11,6 =
   1,552). Le etichette scendono da 10 a 9px e non a 6: sotto i 9 non si
   leggono piu', e una nota illeggibile tanto vale toglierla. */
.single-product .oe-acquisto .oe-sconti__tavola .oe-prezzo2__voce--netto .oe-prezzo2__cifra{
  font-size:1.125rem;      /* 18px, era 28 */
}
.single-product .oe-acquisto .oe-sconti__tavola .oe-prezzo2__voce--lordo .oe-prezzo2__cifra{
  font-size:.725rem;       /* 11,6px, era 18 */
  font-weight:600; color:var(--vg-tenue);
}
.oe-sconti__tavola .oe-prezzo2__nota{
  font-size:.5625rem;      /* 9px, era 10 */
  margin-top:2px;
}

/* Lo stato, quando non e' semplicemente «in stock». */
.oe-stato{ margin:14px 0; padding:12px 14px; border:1px solid var(--vg-filetto); }
.oe-stato--ritirato{ background:#F4F5F5; }
.oe-stato__titolo{
  font-family:var(--vg-sans);
  font-size:.75rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  margin:0 0 6px; color:var(--vg-nero);
}
.oe-stato__nota{
  font-family:var(--vg-sans); font-size:.875rem; line-height:1.4;
  color:var(--vg-tenue); margin:0;
}

/* La documentazione: sotto il blocco d'acquisto, dentro la colonna.
   ⚠️ Da 0 a ~5 voci, e ZERO e' il caso piu' frequente: quando non ce
   n'e' nessuna la sezione non viene proprio stampata (`scheda-prodotto.php`),
   perche' un titolo con niente sotto sembra un guasto. */
.oe-documenti{ margin-top:26px; }
.oe-documenti__elenco{ list-style:none; margin:0; padding:0; }
.oe-documenti__elenco li{
  display:flex; align-items:baseline; gap:8px;
  border-bottom:1px solid var(--vg-filetto-fine); padding:9px 0;
}
.oe-documenti__elenco li:last-child{ border-bottom:0; }
.oe-documenti__tipo{
  font-family:var(--vg-sans); font-size:.625rem; font-weight:800; letter-spacing:.07em;
  border:1px solid var(--vg-filetto-fine); padding:2px 5px; color:var(--vg-tenue);
}
.oe-documenti__nome{ font-family:var(--vg-sans); font-size:.875rem; font-weight:600; }
.oe-documenti__elenco a{ color:var(--vg-nero); display:flex; gap:8px; align-items:baseline; }
.oe-documenti__elenco a:hover .oe-documenti__nome{ color:var(--vg-accento); }
.oe-documenti__peso{
  margin-left:auto; font-family:var(--vg-sans); font-size:.6875rem; color:var(--vg-tenue);
}

/* ------------------------------------------------------------------
   Il fondo: tutorial e correlati, a tutta larghezza
   ------------------------------------------------------------------ */
.oe-prodotto__fondo{ margin-top:8px; }

.oe-tutorial{ margin:48px 0 0; }
.oe-tutorial__regola{
  font-family:var(--vg-sans); font-style:italic; font-size:.9375rem;
  color:var(--vg-tenue); margin:-8px 0 22px; max-width:70ch;
}
.oe-tutorial__griglia{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:26px;
}
.oe-tutorial__foto{ display:block; border:1px solid var(--vg-filetto-fine); }
.oe-tutorial__foto img{ width:100%; height:150px; object-fit:cover; display:block; }
/* Molti articoli del blog non hanno immagine in evidenza: il buco va
   riempito con un rettangolo, non lasciato bianco — altrimenti la
   griglia sembra un'immagine che non ha caricato. */
.oe-tutorial__vuoto{
  display:block; height:150px;
  background:repeating-linear-gradient(45deg,#DCE2DF 0 9px,#EDF1EF 9px 18px);
}
.oe-tutorial__voce h3{
  font-family:var(--vg-sans); font-weight:800; font-size:1rem; line-height:1.24;
  letter-spacing:-.01em; margin:10px 0 4px;
}
.oe-tutorial__voce h3 a{ color:var(--vg-nero); }
.oe-tutorial__voce h3 a:hover{ color:var(--vg-accento); }
.oe-tutorial__data{
  font-family:var(--vg-sans); font-size:.6875rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--vg-tenue); margin:0;
}

/* I correlati. 🔑 Stanno QUI e non nella colonna: otto schede dentro la
   colonna la renderebbero piu' alta di qualunque schermo, e il carrello
   sempre raggiungibile — che e' la richiesta che conta di piu' — se ne
   andrebbe. A tutta larghezza restano comunque «subito visibili, non
   dietro un tab», che era la richiesta vera.
   ⚠️ Su molte schede saranno ZERO (527 prodotti li perdono tutti):
   WooCommerce in quel caso non stampa la sezione, e la pagina deve
   chiudersi sulle specifiche senza sembrare tagliata. Per questo il
   fondo non ha bordi propri. */
.oe-prodotto .related,
.oe-prodotto .upsells{ grid-column:1 / -1; width:auto; float:none; margin:48px 0 0; }
.oe-prodotto .related > h2,
.oe-prodotto .upsells > h2{
  font-family:var(--vg-sans);
  font-weight:800; font-size:1.375rem; letter-spacing:-.015em; color:var(--vg-nero);
  border-top:4px solid var(--vg-accento); padding-top:12px; margin:0 0 22px;
}
/* ⚠️ QUATTRO colonne contate, non `auto-fill`. Con `auto-fill` a 1440px
   ne entravano CINQUE, e otto correlati facevano 5 + 3: una seconda riga
   monca con due buchi in fondo. Otto e quattro sono numeri scelti
   insieme (il riferimento ne mette otto su quattro colonne), e vanno
   scritti tutti e due. */
.oe-prodotto .related ul.products,
.oe-prodotto .upsells ul.products{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px;
  margin:0; padding:0; float:none;
}
@media (max-width:1240px){
  .oe-prodotto .related ul.products,
  .oe-prodotto .upsells ul.products{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
.oe-prodotto .related ul.products li.product,
.oe-prodotto .upsells ul.products li.product{ width:auto; margin:0; float:none; }

/* ⚠️ La nota IVA e' obbligatoria e resta, ma in una scheda larga 200px
   si avvolgeva attorno al prezzo su tre righe e la fascia dei correlati
   diventava piu' alta delle foto. Va a capo per conto suo: stessa
   informazione, un terzo dell'altezza. Misurato in pagina il 28/8. */
.oe-prodotto .related .oe-iva,
.oe-prodotto .upsells .oe-iva{ display:block; margin-top:2px; line-height:1.3; }

/* ------------------------------------------------------------------
   I SEGNAPOSTO DELLA DEMO.
   Si vedono apposta. Un dato finto che non si dichiara e' una bugia che
   qualcuno prima o poi misura. Spegnendo `OE_DEMO_SCHEDA` spariscono
   insieme ai dati che etichettano.
   ------------------------------------------------------------------ */
/* ⚠️ Alto 65px con 26 di margine, stava fra le briciole e il titolo e
   spingeva la foto 91px piu' in basso su OGNI scheda. E' roba nostra
   provvisoria: sparira' con l'importazione, e nel frattempo non deve
   costare mezza schermata. Adesso e' una riga sola, ~30px. */
.oe-avviso-demo{
  border-left:4px solid var(--vg-accento);
  background:#FAFBFA; padding:6px 12px; margin:0 0 14px;
}
.oe-avviso-demo p{
  font-family:var(--vg-sans); font-size:.6875rem; line-height:1.4;
  color:var(--vg-tenue); margin:0;
}
.oe-avviso-demo strong{ color:var(--vg-nero); }
.oe-etichetta-demo{
  display:inline-block; vertical-align:middle; margin-left:6px;
  font-family:var(--vg-sans);
  font-size:.5625rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  background:var(--vg-accento); color:#fff; padding:2px 6px; border-radius:0;
}

/* ------------------------------------------------------------------
   IL TELEFONO.
   ⚠️ Una colonna e basta non basta: nell'ordine del documento il blocco
   d'acquisto sta DOPO tutta la descrizione, e su telefono finirebbe a
   tremila pixel dalla foto. Con `display:contents` i figli delle due
   fasce diventano fratelli della stessa colonna e si rimettono in fila
   nell'ordine giusto: foto, prezzo e carrello, POI il testo.
   ------------------------------------------------------------------ */
@media (max-width:1000px){
  .single-product div.product.oe-prodotto{ display:flex; flex-direction:column; }
  .oe-prodotto__corpo,
  .oe-prodotto__colonna,
  .oe-colonna__interno{ display:contents; }
  .oe-prodotto__colonna{ border-left:0; padding-left:0; }

  .oe-avviso-demo{ order:1; }
  .oe-prodotto__testa{ order:2; margin-bottom:14px; }
  .single-product div.product.oe-prodotto .oe-galleria{ order:3; margin-bottom:18px; }
  /* ⚠️ Su telefono l'identita' NON sta sotto la foto ma DOPO il
     carrello: fra la foto e il pulsante non ci va niente, o si scorre
     due volte per comprare. Sul desktop invece sta sotto la foto,
     perche' li' il carrello e' a fianco e non in coda. */
  .oe-acquisto{ order:4; }
  .oe-prodotto__identita{ order:5; margin:20px 0 0; }
  .oe-blocco--descrizione{ order:6; }
  .oe-blocco--specifiche{ order:7; }
  .oe-documenti{ order:8; margin-top:0; margin-bottom:34px; }
  .oe-prodotto__fondo{ order:9; }

  .single-product .oe-prodotto__testa .product_title{ max-width:none; }
  /* ⚠️ Le briciole su telefono andavano a due righe (46px). Restano
     tutte — su un albero di categorie profondo servono — ma su una riga
     sola che scorre di lato invece di impilarsi sopra la foto. */
  .single-product #kadence-breadcrumbs{
    white-space:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
  .oe-acquisto{ border-top-width:3px; }
  .oe-tutorial__griglia{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:18px; }
  .oe-prodotto .related ul.products,
  .oe-prodotto .upsells ul.products{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
}
/* ------------------------------------------------------------------
   11.6 Carrello e cassa
   Tocco leggero e voluto: qui si incassa, e ogni regola in piu' e' un
   modo per rompere qualcosa che funziona. Si squadrano gli angoli, si
   uniformano i pulsanti e la tipografia. Nient'altro.
   ------------------------------------------------------------------ */
.woocommerce table.shop_table,
.woocommerce table.shop_table td,
.woocommerce table.shop_table th,
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #payment,
.woocommerce form .form-row input,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea{
  border-radius:0;
}
.woocommerce table.shop_table th,
.woocommerce-checkout #payment .payment_methods label{
  font-family:var(--vg-sans);
  font-size:.75rem; font-weight:800; letter-spacing:.06em;
}
.woocommerce .checkout-button,
.woocommerce #place_order{
  border-radius:0;
  font-family:var(--vg-sans);
  font-size:.8125rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:15px 28px;
}

/* ==================================================================
   12. LA PAGINA ARTICOLO
   ==================================================================
   E' la pagina piu' visitata del sito — 4.109 pezzi — ed era rimasta
   quella del gemello: pastiglia verde, titolo in grassetto normale,
   "By oeadmin", corpo in sans.
   Anche qui: solo CSS, nessun modello PHP toccato.
   ================================================================== */

/* Il titolo prende la stessa voce dell'apertura in home e del nome
   prodotto. E' il segnale piu' forte che le tre pagine sono un sito solo. */
.single-post .entry-title{
  font-family:var(--vg-display); font-weight:400;
  font-size:clamp(2.1rem,4.6vw,3.6rem); line-height:.96; letter-spacing:-.005em;
  color:var(--vg-nero); text-wrap:balance;
  margin:0 0 14px;
}

/* L'occhiello: maiuscoletto colorato, non una pastiglia verde. */
.single-post .entry-taxonomies,
.single-post .entry-taxonomies .category-style-pill{
  background:none !important; padding:0 !important; border-radius:0 !important;
  margin:0 0 10px;
}
.single-post .entry-taxonomies a{
  background:none !important; padding:0 !important; border-radius:0 !important;
  font-family:var(--vg-sans);
  font-size:.6875rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
  color:var(--vg-accento) !important; text-decoration:none;
}
.single-post .entry-taxonomies a:hover{ text-decoration:underline; }

/* ⛔ Via l'autore, come nelle schede e nella colonna: sui 4.109 articoli
   importati e' "oeadmin" per tutti, e "By oeadmin" sotto ogni titolo non
   dice niente a nessuno. Resta la data. */
.single-post .entry-meta .posted-by,
.single-post .entry-meta .entry-meta-divider-dot:first-of-type{ display:none; }
.single-post .entry-meta{
  font-family:var(--vg-sans);
  font-size:.6875rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--vg-tenue);
  border-bottom:1px solid var(--vg-filetto-fine); padding-bottom:16px; margin-bottom:26px;
}
.single-post .entry-meta a{ color:var(--vg-tenue); text-decoration:none; }

/* Via il contenitore-scheda: qui come altrove si separa con i filetti. */
.single-post .content-bg,
.single-post .entry-content-wrap{
  background:none; box-shadow:none; border-radius:0;
}
/* ⚠️ MA la testata il fondo bianco lo deve tenere, ed e' un difetto che ho
   introdotto io togliendolo: Kadence fa risalire il blocco del titolo SOPRA
   l'immagine in evidenza, e senza fondo l'occhiello verde finiva stampato
   su una foto rossa — illeggibile. Il bianco qui non e' decorazione, e'
   quello che rende leggibile il testo che morde la foto. Stessa soluzione
   dell'apertura in home (`.vg-apertura__blocco`). */
.single-post .entry-header{
  position:relative;
  background:var(--vg-fondo);
  padding:22px 0 0;
}
.single-post .post-thumbnail img{ border-radius:0; }

/* ------------------------------------------------------------------
   12.1 Il corpo dell'articolo
   In serif. E' la scelta piu' discutibile del tema e la dichiaro: la
   Verge ha il corpo in serif, si legge meglio su testi lunghi, e il
   font e' gia' caricato per i sommari — quindi costa zero byte in piu'.
   La misura e' limitata a ~68 caratteri: oltre, l'occhio perde la riga.
   ------------------------------------------------------------------ */
.single-post .entry-content{
  font-family:var(--vg-sans);
  font-size:1.1875rem; line-height:1.62; color:var(--vg-testo);
}
.single-post .entry-content > p,
.single-post .entry-content > ul,
.single-post .entry-content > ol,
.single-post .entry-content > h2,
.single-post .entry-content > h3,
.single-post .entry-content > h4,
.single-post .entry-content > blockquote{
  max-width:68ch;
}
.single-post .entry-content p{ margin:0 0 1.15em; }

/* I titoli interni restano in sans pesante: sono segnali di struttura,
   non testo da leggere di seguito. */
.single-post .entry-content h2,
.single-post .entry-content h3,
.single-post .entry-content h4{
  font-family:var(--vg-sans); font-weight:800; letter-spacing:-.015em;
  color:var(--vg-nero); line-height:1.16;
  margin:2em 0 .6em;
}
.single-post .entry-content h2{ font-size:1.625rem; border-top:3px solid var(--vg-filetto); padding-top:.5em; }
.single-post .entry-content h3{ font-size:1.25rem; }
.single-post .entry-content h4{ font-size:1.0625rem; }

.single-post .entry-content a{
  color:var(--vg-nero); text-decoration:underline;
  text-decoration-color:var(--vg-accento); text-underline-offset:3px;
  text-decoration-thickness:2px;
}
.single-post .entry-content a:hover{ color:var(--vg-accento); }

.single-post .entry-content blockquote{
  border-left:4px solid var(--vg-accento); border-radius:0;
  margin:1.6em 0; padding:.2em 0 .2em 20px; background:none;
  font-size:1.25rem; line-height:1.45; color:var(--vg-nero);
}

/* Codice e blocchi preformattati: gli articoli di OE ne sono pieni.
   ⚠️ `pre` NON prende la misura di 68 caratteri: una riga di codice
   spezzata a meta' e' peggio di una barra di scorrimento. */
.single-post .entry-content pre,
.single-post .entry-content .wp-block-preformatted,
.single-post .entry-content code{
  font-family:"JetBrains Mono",SFMono-Regular,Consolas,monospace;
  border-radius:0;
}
.single-post .entry-content pre,
.single-post .entry-content .wp-block-preformatted{
  font-size:.875rem; line-height:1.5;
  background:#F6F7F6; border:1px solid var(--vg-filetto-fine);
  padding:16px 18px; overflow-x:auto; max-width:none;
}
.single-post .entry-content code{
  font-size:.875em; background:#F6F7F6; padding:.1em .35em;
}

.single-post .entry-content img{ border-radius:0; height:auto; }
.single-post .entry-content figcaption{
  font-family:var(--vg-sans); font-size:.75rem; color:var(--vg-tenue);
  border-bottom:1px solid var(--vg-filetto-fine); padding-bottom:10px; margin-top:8px;
}
.single-post .entry-content table{ border-radius:0; font-family:var(--vg-sans); font-size:.9375rem; }

/* Il pie' di pagina dell'articolo e i tag. */
.single-post .entry-footer{
  border-top:3px solid var(--vg-filetto); padding-top:16px; margin-top:44px;
  font-family:var(--vg-sans); font-size:.6875rem; letter-spacing:.06em; text-transform:uppercase;
}

/* ------------------------------------------------------------------
   10. ACCESSIBILITA'
   ------------------------------------------------------------------ */
.vg a:focus-visible,
.vg-rail a:focus-visible{
  outline:3px solid var(--vg-accento); outline-offset:2px; border-radius:2px;
}
@media (prefers-reduced-motion:reduce){
  .vg *{ transition:none !important; animation:none !important; }
}