/* ============================================================
   Le pagine: la tela e i suoi «widget»

   Misure prese dalla pagina Contatti del sito, a 1512px:

     riga testata   1512 piena, contenitore 1470 (padding 35 30 30),
                    due colonne 536,3 + 873,7 = 1410, senza distacco
     riga mappa     1512 piena, alta 500, senza contenitore
     riga contatti  1512 piena, contenitore 1260 (padding 55 30 0),
                    due colonne 371 + 140 + 689 = 1200

   Cioe': le righe sono larghe quanto la finestra e i contenitori stanno
   dentro. E' il motivo per cui le pagine hanno bisogno di `page.php` e non
   di `singular.php`, che incapsulava tutto in una colonna di lettura.
   ============================================================ */

/* --- la tela ---
   1410 di contenuto, come il contenitore delle pagine di glozin: su
   /terms-conditions/ il testo del sito va da x=51 a 1461. Prima qui c'era
   una misura di lettura da 1260 che il sito non ha. */
.of-pagina__contenuto > *{
  width:100%;
  max-width:var(--of-contenitore-max);
  margin-inline:auto;
  padding-inline:var(--of-contenitore-lato);
  box-sizing:border-box;
}
/* `alignwide`: la misura larga del tema, 1410 di contenuto. */
.of-pagina__contenuto > .alignwide{max-width:var(--of-contenitore-max)}
/* `alignfull`: tutta la finestra, e il respiro lo decide il blocco dentro. */
.of-pagina__contenuto > .alignfull{max-width:none;padding-inline:0}

/* ============================================================
   Widget: testata di pagina
   ============================================================ */
.of-testata-pagina{padding-block:0}
.of-testata-pagina > .of-contenitore{padding-block:35px 30px}
.of-testata-pagina__griglia{
  display:grid;
  /* 536,3 e 873,7 su 1410: la stessa proporzione della testata del catalogo. */
  grid-template-columns:38.035% 61.965%;
  align-items:start;
}
.of-testata-pagina__titolo{
  margin:0;
  font-size:35px;
  font-weight:600;
  line-height:1.21;          /* 42,35 / 35 */
  letter-spacing:-0.034em;   /* -1,19 sul sito: `heading-letter-spacing` */
  color:var(--wp--preset--color--dark);
}
/* La colonna destra tiene 30px di margine interno: sul sito il testo e' largo
   843,7 dentro una colonna da 873,7. */
.of-testata-pagina__destra{padding-inline-end:30px}
.of-testata-pagina__destra p{
  margin:0 0 16px;
  font-size:16px;
  line-height:1.714;         /* 27,424 / 16 */
  color:var(--wp--preset--color--text);
}
.of-testata-pagina__destra p:last-child{margin-bottom:0}
/* Il testo di presentazione salvato con la pagina: 10px sotto il bordo della
   colonna, come la descrizione dell'intestazione sul sito. */
.of-testata-pagina__descrizione{margin-top:10px}

/* ============================================================
   Widget: mappa a tutta larghezza
   ============================================================ */
.of-mappa{
  position:relative;
  width:100%;
  height:500px;
  overflow:hidden;
  background:var(--wp--preset--color--surface,#f2f2f2);
}
.of-mappa iframe,
.of-mappa > *{
  display:block;
  width:100%;
  height:100%;
  border:0;
}

/* ============================================================
   Widget: due colonne (testo a sinistra, modulo a destra)
   ============================================================ */
.of-colonne > .of-contenitore--stretto{padding-block:55px 0}
.of-colonne__griglia{
  display:grid;
  /* 371 + 140 + 689 = 1200 */
  grid-template-columns:371fr 689fr;
  gap:140px;
  align-items:start;
}
.of-colonne__titolo,
.of-colonne h2{
  margin:0;
  font-size:24px;
  font-weight:600;
  line-height:1.21;          /* 29,04 / 24 */
  letter-spacing:normal;
  color:var(--wp--preset--color--dark);
}
.of-colonne p{
  margin:0;
  font-size:16px;
  line-height:1.6;           /* 25,6 / 16 */
  color:var(--wp--preset--color--text);
}
.of-colonne p + p{margin-top:10px}

/* ============================================================
   Il modulo di contatto

   Misure del sito: campi alti 49 con raggio 5 e contorno 1px #ebebeb, testo
   14px; nome ed email 334,5 affiancati con 20 di distacco; telefono e
   messaggio a tutta larghezza (689); messaggio alto 150 e SENZA raggio;
   pulsante 142,9x50 raggio 30 nero.
   ============================================================ */
.of-modulo{margin:0}
.of-modulo__riga{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:0 0 20px}
.of-modulo__riga--singola{grid-template-columns:1fr}
.of-modulo input[type="text"],
.of-modulo input[type="email"],
.of-modulo input[type="tel"],
.of-modulo textarea{
  width:100%;
  height:49px;
  /* 15px 20px, non 0 20px: e' la misura del sito, ed e' anche quella che
     allinea l'etichetta assoluta, che porta lo stesso padding. */
  padding:15px 20px;
  border:1px solid var(--of-campo-bordo,#ebebeb);
  border-radius:var(--of-radius-campo,5px);
  background:var(--of-campo-sfondo,#fff);
  box-sizing:border-box;
  font-family:inherit;
  font-size:14px;
  color:var(--wp--preset--color--text);
}
.of-modulo textarea{
  height:150px;
  padding:20px;
  border-radius:0;
  resize:both;
}
.of-modulo input::placeholder,
.of-modulo textarea::placeholder{color:var(--wp--preset--color--text-muted,#888)}

.of-modulo__consenso{display:flex;align-items:flex-start;gap:10px;margin:0 0 20px}
.of-modulo__consenso input[type="checkbox"]{
  flex:none;
  width:20px;
  height:20px;
  margin:0;
  accent-color:var(--wp--preset--color--dark);
}
.of-modulo__consenso label,
.of-modulo__consenso span{font-size:16px;line-height:1.6;color:var(--wp--preset--color--text)}

.of-modulo__invia,
.of-modulo button[type="submit"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:142.9px;
  height:50px;
  /* 16.5px 55px sul sito: con `box-sizing:border-box` e altezza 50 il
     padding verticale non allarga, ma quello orizzontale sì — ed e' lui a
     dare al pulsante la sua larghezza. */
  padding:16.5px 55px;
  border:1px solid var(--wp--preset--color--dark);
  border-radius:var(--of-radius-bottone,30px);
  background:var(--wp--preset--color--dark);
  color:#fff;
  font-family:inherit;
  font-size:15px;
  font-weight:600;
  line-height:1;
  cursor:pointer;
  transition:background .25s,border-color .25s;
}
.of-modulo__invia:hover,
.of-modulo button[type="submit"]:hover{
  background:var(--wp--preset--color--primary);
  border-color:var(--wp--preset--color--primary);
}

/* ============================================================
   Schermo stretto
   ============================================================ */
@media(max-width:1024px){
  .of-testata-pagina__griglia{grid-template-columns:1fr;gap:20px}
  .of-testata-pagina__destra{padding-inline-end:0}
  /* La colonna destra vuota (nessuna presentazione: Lista dei desideri,
     Carrello) non deve contare: con la griglia a una colonna aggiungeva i
     20 di distacco sotto il titolo. Sul sito il contenuto resta 30 sotto. */
  .of-testata-pagina__destra:not(:has(*)){display:none}
  .of-colonne__griglia{grid-template-columns:1fr;gap:40px}
}
/* Sul telefono (FAQ, Contatti a 375): la descrizione 10 sotto il titolo e
   larga 315, cioe' con i 30 di margine a destra come sul computer. */
@media(max-width:767px){
  .of-testata-pagina__griglia{gap:0}
  .of-testata-pagina__destra{padding-inline-end:30px}
}
@media(max-width:600px){
  .of-modulo__riga{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .of-modulo__invia,
  .of-modulo button[type="submit"]{transition:none}
}

/* ============================================================
   Il modulo di Contact Form 7, com'e' scritto davvero

   Il modulo salvato usa le classi di utilita' del vecchio tema —
   `d-flex`, `flex-wrap`, `flex-nowrap-md`, `gap-20`, `mb-20`, `w-100` — che
   stanno nel CSS di glozin, non qui. Senza queste regole nome ed email si
   impilavano invece di stare affiancati.

   Non e' una pezza: e' lo stesso principio degli shortcode scritti dentro le
   pagine. Il contenuto e' stato scritto per quel tema, e finche' resta quello
   il tema nuovo lo onora. Misure del sito: righe alte 49 con 20 di distacco,
   messaggio 158, consenso 28 con 30 sotto, pulsante 50.
   ============================================================ */
.of-modulo .contact-form-row{margin:0 0 20px}
.of-modulo .contact-form-row:last-of-type,
/* `:last-of-type` guarda il tag, non la classe: dopo l'ultima riga c'e'
   ancora il <div> dei messaggi di CF7, e i 20 di margine restavano — il
   footer di Contatti scendeva di 20. */
.of-modulo .contact-form-row:not(:has(~ .contact-form-row)){margin-bottom:0}
.of-modulo .contact-form-row.mb-30{margin-bottom:30px}
.of-modulo .contact-form-row.d-flex{display:flex;flex-wrap:wrap;gap:20px}
@media(min-width:768px){
  .of-modulo .contact-form-row.flex-nowrap-md{flex-wrap:nowrap}
}
/* Due campi in una riga si dividono lo spazio: (689 − 20) / 2 = 334,5. */
/*
 * Sotto md i campi si impilano, da md in su dividono la riga.
 *
 * Sul sito e' scritto nelle classi: ogni campo porta `w-100` — larghezza
 * piena — e la riga porta `flex-wrap` con `flex-nowrap-md`. Cioe' a schermo
 * stretto un campo largo quanto la riga manda l'altro a capo; da 768 in su il
 * `nowrap` li rimette in fila e se la dividono.
 *
 * Con `flex:1 1 0` e basta restavano affiancati anche a 375, due colonne da
 * 177,5: stretti al punto che l'etichetta «Nome e Cognome *» non ci stava.
 */
.of-modulo .contact-form-row.d-flex > .wpcf7-form-row{flex:1 1 100%;min-width:0}

@media(min-width:768px){
  .of-modulo .contact-form-row.d-flex > .wpcf7-form-row{flex:1 1 0}
}
/* Interlinea del corpo, non l'1,6 dei paragrafi delle colonne: e' la riga di
   riferimento che decide quanto sono alte le righe del modulo. Con 1,6 la
   riga del messaggio veniva 157,1 invece di 158,4 e quella del consenso 29,9
   invece di 28,4. */
.of-modulo .contact-form-row p{margin:0;line-height:1.714}
.of-modulo .wpcf7-form-control-wrap{display:block}
.of-modulo .wpcf7-form-row{position:relative}

/* --- l'etichetta dentro il campo ---
   Misurata sul sito: assoluta a `top:2px; left:0`, alta quanto il campo, con
   LO STESSO padding del campo (15px 20px) — ed e' quel padding a farla
   combaciare con il testo che si scrive. Corpo 16 con interlinea 16, colore
   `rgba(17,17,17,.6)`, e `pointer-events:none` perche' il clic deve arrivare
   al campo che ci sta sotto, non all'etichetta.

   Prima qui l'etichetta veniva nascosta e copiata nel `placeholder`: a
   vedersi e' un'altra cosa, e il testo spariva appena si scriveva. */
.of-modulo .wpcf7-form-row[data-of-etichetta-dentro] > p > label,
.of-modulo .wpcf7-form-row[data-of-etichetta-dentro] > label{
  position:absolute;
  inset-block-start:2px;
  inset-inline-start:0;
  height:100%;
  margin:0;
  padding:15px 20px;
  font-size:16px;
  line-height:16px;
  color:rgba(17,17,17,.6);
  pointer-events:none;
  transform-origin:left center;
  transition:transform .2s,opacity .2s;
}

/* Sale quando il campo prende il fuoco o ha del testo.
   Sul sito e' una classe `focused` messa dal JavaScript; qui sono due
   pseudo-classi, quindi funziona anche a script fermo. `:placeholder-shown`
   vale solo se un segnaposto c'e': lo mette `pagina.js`, uno spazio. */
.of-modulo .wpcf7-form-row[data-of-etichetta-dentro]:focus-within > p > label,
.of-modulo .wpcf7-form-row[data-of-etichetta-dentro]:focus-within > label,
.of-modulo .wpcf7-form-row[data-of-etichetta-dentro]:has(input:not(:placeholder-shown)) > p > label,
.of-modulo .wpcf7-form-row[data-of-etichetta-dentro]:has(textarea:not(:placeholder-shown)) > p > label{
  transform:translateY(-0.4rem) translateX(7px) scale(.75);
  opacity:.7;
}

@media(prefers-reduced-motion:reduce){
  .of-modulo .wpcf7-form-row[data-of-etichetta-dentro] > p > label,
  .of-modulo .wpcf7-form-row[data-of-etichetta-dentro] > label{transition:none}
}

/* Il consenso: casella 20x20 accanto al testo. */
/* `inline-flex` e non l'`inline-block` di serie di CF7: con inline-block la
   base del riquadro si allinea a quella del testo e la riga diventa 32,1
   invece di 28,4. Margine destro 16 come sul sito. */
.of-modulo .wpcf7-list-item{display:inline-flex;margin:0 16px 0 0}
.of-modulo .wpcf7-list-item label{
  display:flex;
  /* NON `center`: la voce e' un `inline-flex` e la sua base e' quella del
     primo elemento dentro. Centrando, la base scende e la riga passa da 28,4
     a 32,1. Sul sito questa etichetta ha l'allineamento di serie. */
  gap:10px;
  font-size:16px;
  line-height:1.714;
  color:var(--wp--preset--color--text);
}
.of-modulo .wpcf7-acceptance input[type="checkbox"]{
  flex:none;
  width:20px;
  height:20px;
  margin:0;
  accent-color:var(--wp--preset--color--dark);
}

/* Il pulsante di CF7 e' un `<button>`: le stesse misure dell'altro. */
.of-modulo .wpcf7-submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:142.9px;
  height:50px;
  /* 16.5px 55px sul sito: con `box-sizing:border-box` e altezza 50 il
     padding verticale non allarga, ma quello orizzontale sì — ed e' lui a
     dare al pulsante la sua larghezza. */
  padding:16.5px 55px;
  border:1px solid var(--wp--preset--color--dark);
  border-radius:var(--of-radius-bottone,30px);
  background:var(--wp--preset--color--dark);
  color:#fff;
  font-family:inherit;
  font-size:15px;
  font-weight:600;
  line-height:1;
  cursor:pointer;
}
.of-modulo .wpcf7-submit:hover{
  background:var(--wp--preset--color--primary);
  border-color:var(--wp--preset--color--primary);
}
/*
 * Spento finche' non si accetta l'informativa. E' Contact Form 7 a mettere
 * `disabled` sul pulsante quando nel modulo c'e' una casella di accettazione:
 * qui si dice soltanto come si vede. Misurato sul sito: opacita' 0,3 e
 * cursore «vietato».
 */
.of-modulo .wpcf7-submit:disabled,
.of-modulo .wpcf7-submit[disabled]{
  opacity:.3;
  cursor:not-allowed;
}
.of-modulo .wpcf7-submit:disabled:hover,
.of-modulo .wpcf7-submit[disabled]:hover{
  background:var(--wp--preset--color--dark);
  border-color:var(--wp--preset--color--dark);
}

/* ============================================================
   Le pagine che il tema rende leggendo la struttura di Elementor
   (inc/pagine.php). Una sola regola per le righe: le misure
   arrivano dai valori salvati, come variabili sull'elemento.
   ============================================================ */
.of-riga{
  /* I quattro valori si RIAZZERANO su ogni riga.
     Le variabili CSS si ereditano: senza questa riga una colonna prendeva le
     misure della madre. E' successo due volte — prima con il verso (le
     colonne della FAQ diventavano righe), poi con la larghezza (la griglia
     di Nuovi arrivi ereditava `calc(100% - 20vw)` e usciva 758 invece di
     1060, un prodotto per riga). Lo stile scritto sull'elemento vince su
     questa regola, i figli invece ripartono da qui. */
  --of-verso:column;
  --of-stacco:0;
  --of-stacco-riga:initial;   /* initial: vale il ripiego su --of-stacco */
  --of-stacco-m:initial;
  --of-larghezza:auto;
  --of-massimo:none;
  /* Il margine interno delle colonne: `initial` perche' il ripiego sotto
     scatti, invece di ereditare quello della colonna madre. */
  --of-imb-t:initial;
  --of-imb-m:initial;

  display:flex;
  flex-direction:var(--of-verso);
  gap:var(--of-stacco-riga,var(--of-stacco)) var(--of-stacco);   /* riga colonna, come Elementor */
  min-width:0;
}
/* Riga «incassata»: la misura salvata e' gia' quella del contenuto, quindi
   niente respiro della tela — con i 30 di `page.php` Contatti usciva 1140
   invece di 1200, cioe' 350/650 al posto di 371/689. */
.of-riga--incassata{max-width:var(--of-massimo);margin-inline:auto}
.of-pagina__contenuto > .of-riga--incassata{padding-inline:0}
/* Quando la finestra e' piu' stretta della misura salvata, il respiro torna:
   sul telefono le colonne di Contatti stanno a 15 dal bordo, come sul sito. */
@media(max-width:1229px){
  .of-pagina__contenuto > .of-riga--incassata:not(.of-riga--piena){padding-inline:15px}
}

/* Una riga senza misura propria prende la misura LARGA del tema, non quella
   stretta della tela: sul sito le colonne della FAQ stanno fra 51 e 1461,
   cioe' dentro 1410. Con i 1260 di serie uscivano di 150 piu' strette. */
.of-pagina__contenuto > .of-riga:not(.of-riga--incassata){max-width:var(--of-contenitore-max)}

/* La larghezza in percentuale vale solo per le colonne DENTRO una riga: alle
   righe di primo livello la misura la da' la tela. E `flex:0 1 auto` le lascia
   rimpicciolire — e' il restringimento che riporta 35%/65% a 371/689. */
.of-riga > .of-riga{width:var(--of-larghezza);flex:0 1 auto;margin-inline:0;max-width:none}

/* Le colonne con margine interno proprio (il riquadro grigio della FAQ). */
.of-riga--imbottita{padding:var(--of-imb)}
@media(max-width:1024px){.of-riga--imbottita{padding:var(--of-imb-t,var(--of-imb))}}
@media(max-width:767px){.of-riga--imbottita{padding:var(--of-imb-m,var(--of-imb-t,var(--of-imb)))}}
@media(min-width:768px){.of-riga--ferma{position:sticky;top:30px;align-self:flex-start}}

/* «Larghezza piena» in Elementor: la riga va da bordo a bordo, senza tela.
   E' la mappa di Contatti, larga 1512 a 1512. */
.of-pagina__contenuto > .of-riga.of-riga--piena{max-width:none;padding-inline:0}

.of-blocco__titolo{margin:0;font-size:var(--of-misura,inherit);color:var(--wp--preset--color--dark);letter-spacing:var(--of-spaziatura,normal)}
.of-blocco__titolo--h2{font-size:var(--of-misura,32px);font-weight:600;line-height:1.21}
.of-blocco__titolo--h3{font-size:var(--of-misura,28px);font-weight:600;line-height:1.21}
.of-blocco__titolo--h4{font-size:var(--of-misura,24px);font-weight:600;line-height:1.21}   /* 29,04 a 24px; 19,36 col 16 di Nuovi arrivi */
.of-blocco__titolo--h5{font-size:var(--of-misura,18px);font-weight:600;line-height:1.21}
.of-blocco__titolo--h6{font-size:var(--of-misura,16px);font-weight:600;line-height:19.36px}
.of-blocco__testo{font-size:16px;line-height:27.424px;color:var(--wp--preset--color--text)}
/* Il testo semplice di un titolo di glozin sul sito e' un <div>: niente
   margini. Da <p> ne prendeva 16 sopra e sotto, e su Contatti ogni riga di
   recapiti si staccava di 32px di troppo. */
p.of-blocco__testo{margin:0}
.of-blocco__testo :is(p,ul,ol):first-child{margin-block-start:0}
.of-blocco__testo :is(p,ul,ol):last-child{margin-block-end:0}
.of-blocco__riga{margin:0;border:0;border-top:var(--of-spessore,1px) solid var(--of-colore,var(--wp--preset--color--border,#ebebeb))}
.of-blocco__bottone{margin:0}

/* ---- la fisarmonica ----
   <details> nativo: si apre con la tastiera, la ricerca del browser trova
   anche il testo chiuso, e non serve JavaScript. */
.of-fisarmonica{display:flex;flex-direction:column}
.of-fisarmonica__voce{border-bottom:1px solid var(--wp--preset--color--border,#ebebeb)}
.of-fisarmonica__testa{
  position:relative;
  display:block;
  /* Come glozin: interlinea normale, 12 sopra e sotto, 50 a destra per il
     «+». Una riga fa 43,5 come prima; su due righe il telefono fa 63. */
  padding:12px 70px 12px 0;   /* 50 + i 20 che sul sito separano il titolo dal bordo */
  font-size:16px;
  font-weight:600;
  line-height:normal;
  color:var(--wp--preset--color--text);   /* #444 sul sito, non #111 */
  cursor:pointer;
  list-style:none;
}
.of-fisarmonica__testa::-webkit-details-marker{display:none}
/* Il «+»: due trattini da 12x1, il secondo ruotato; aprendo si raddrizza e
   resta il «−». 0,3s ease-out come sul sito. */
.of-fisarmonica__testa::before,
.of-fisarmonica__testa::after{
  content:"";
  position:absolute;
  inset-block-start:50%;
  inset-inline-end:.5px;
  width:12px;
  height:1px;
  background:currentColor;
  transition:transform .3s ease-out;
}
.of-fisarmonica__testa::after{transform:rotate(90deg)}
.of-fisarmonica__voce[open] > .of-fisarmonica__testa::after{transform:rotate(0)}
.of-fisarmonica__corpo{padding:5px 20px 20px 0;font-size:16px;line-height:27.424px;color:var(--wp--preset--color--text)}
.of-fisarmonica__corpo > :first-child{margin-block-start:0}
.of-fisarmonica__corpo > :last-child{margin-block-end:0}

/* ---- il pulsante di glozin ----
   Misurato sul sito (FAQ, «Contattaci»): 50 di altezza — 16,5 sopra e
   sotto, riga 15, bordo 1 — raggio 30, 15px/600. I colori li decide
   l'editor e arrivano come variabili; di serie nero con testo bianco.
   Al passaggio si inverte, come sul sito. */
.of-bottone--blocco{
  box-sizing:border-box;
  height:50px;
  padding:16.5px 20px;
  border:1px solid var(--of-bottone-bordo,var(--of-bottone-sfondo,#111));
  border-radius:var(--of-radius-bottone,30px);
  background:var(--of-bottone-sfondo,#111);
  color:var(--of-bottone-testo,#fff);
  font-size:15px;
  font-weight:600;
  line-height:15px;
}
.of-bottone--blocco:hover{
  background:var(--of-bottone-testo,#fff);
  border-color:currentColor;
  color:var(--of-bottone-sfondo,#111);
}

/* I widget nascosti solo su alcuni schermi (i limiti sono quelli di Elementor). */
@media(min-width:1025px){.of-nascosto-desktop{display:none}}
@media(min-width:768px) and (max-width:1024px){.of-nascosto-tablet{display:none}}
@media(max-width:767px){.of-nascosto-telefono{display:none}}

@media(max-width:782px){
  .of-riga{flex-direction:column;width:auto;gap:var(--of-stacco-m,var(--of-stacco-riga,var(--of-stacco)))}
  .of-riga > .of-riga{width:auto}
}

/* Contact Form 7 racchiude i campi nascosti in un <fieldset>: senza questa
   riga prende il bordo degli altri campi e in cima al modulo compare un
   riquadro vuoto alto una riga. Non si nasconde con `display:none` per non
   toccare come il plugin invia i suoi dati: basta togliergli la cornice. */
.of-modulo fieldset.hidden-fields-container{margin:0;padding:0;border:0}

/* ---- «Prodotti in evidenza»: foto 80x80, nome e prezzo accanto ---- */
.of-prodotti-stretti{margin:0;padding:0;list-style:none}
.of-prodotti-stretti__voce{display:flex;align-items:center;gap:15px;margin-block-end:20px}
.of-prodotti-stretti__voce:last-child{margin-block-end:0}
.of-prodotti-stretti__foto{flex:none;width:80px;height:80px;overflow:hidden;border-radius:5px}
.of-prodotti-stretti__foto img{display:block;width:80px;height:80px;object-fit:cover;border-radius:5px}
.of-prodotti-stretti__testo{display:flex;flex-direction:column;min-width:0}
.of-prodotti-stretti__nome{
  font-size:15px;
  font-weight:600;
  line-height:1.3;
  color:var(--wp--preset--color--dark);
  text-decoration:none;
}
.of-prodotti-stretti__nome:hover{color:var(--wp--preset--color--primary)}
.of-prodotti-stretti__prezzo{margin-block-start:11px;font-size:16px;font-weight:600;line-height:16.8px}
.of-prodotti-stretti__prezzo del{opacity:.5;font-weight:400;margin-inline-end:5px}

/* La griglia dentro una pagina non ha la barra dei filtri del catalogo:
   niente respiro in cima, e la larghezza la decide la colonna che la ospita. */
.of-catalogo--incorporato{padding:0;margin:0}


/* ============================================================
   La griglia di tutte le categorie

   Le card sono quelle della fila categorie del catalogo — stesse classi
   `of-catalogo__categoria-*`, quindi foto, proporzione e nome arrivano da
   li'. Qui si dice solo come stanno insieme: una griglia che va da due
   colonne su telefono a quattro su schermo largo, con lo stesso distacco
   della fila (20px).
   ============================================================ */
.of-categorie-griglia{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
  margin:0;
  padding:0;
  list-style:none;
}
@media(min-width:768px){
  .of-categorie-griglia{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:1200px){
  .of-categorie-griglia{grid-template-columns:repeat(4,1fr);gap:30px}
}
.of-categorie-griglia > li{min-width:0}
.of-categorie-griglia a{
  display:flex;
  flex-direction:column;
  gap:12px;
  color:inherit;
  text-decoration:none;
}

/* ============================================================
   I titoli dentro il testo di una pagina (il contenuto scritto
   nell'editor, es. Termini e condizioni): la scala di glozin,
   misurata sul sito — h3 27,83 con 19,48 sopra e sotto, ecc.
   Senza, un H3 usciva al corpo del testo (16px).
   ============================================================ */
.of-pagina__contenuto > :is(h1,h2,h3,h4,h5,h6),
.of-blocco__testo :is(h1,h2,h3,h4,h5,h6){font-weight:600;line-height:1.21;letter-spacing:normal;color:var(--wp--preset--color--dark)}
.of-pagina__contenuto > h1,.of-blocco__testo h1{margin-block:21.44px;font-size:32px}
.of-pagina__contenuto > h2,.of-blocco__testo h2{margin-block:24.8394px;font-size:35.4849px}
.of-pagina__contenuto > h3,.of-blocco__testo h3{margin-block:19.4798px;font-size:27.8283px}
/* Sul telefono l'h3 scende a 26 (margini 0,7em = 18,2), come glozin. */
@media(max-width:767px){.of-pagina__contenuto > h3,.of-blocco__testo h3{margin-block:18.2px;font-size:26px}}
.of-pagina__contenuto > h4,.of-blocco__testo h4{margin-block:18.2px;font-size:26px}
.of-pagina__contenuto > h5,.of-blocco__testo h5{margin-block:12.6px;font-size:18px}
.of-pagina__contenuto > h6,.of-blocco__testo h6{margin-block:11.2px;font-size:16px}

/* Gli elenchi nel testo di una pagina: 16 sopra e sotto, 20,8 di rientro e
   24 in fondo — i valori generali di glozin, misurati su Termini. */
.of-pagina__contenuto > :is(ul,ol),
.of-blocco__testo :is(ul,ol){margin-block:16px;padding:0 0 24px 20.8px}
.of-pagina__contenuto > :is(ul,ol){padding-inline:calc(var(--of-contenitore-lato) + 20.8px) var(--of-contenitore-lato)}
/* L'elenco dentro un blocco di testo tiene i suoi 16 sopra e sotto anche
   quando e' il primo o l'ultimo elemento (come nel widget di Elementor):
   la regola «primo/ultimo senza margine» qui non vale. */
.of-blocco__testo > ul:nth-child(n),
.of-blocco__testo > ol:nth-child(n){margin-block:16px}

/* «Load more» sotto la griglia dei prodotti delle pagine (Nuovi arrivi):
   pulsante nero 50 di altezza, 30 di lato, centrato. Senza JavaScript e'
   il collegamento dentro .of-griglia-pagine; con lo script quel blocco si
   nasconde e il pulsante lo mette app.js.
   Sotto l'elenco dei prodotti ci sono gia' 30px: con questi 15 il
   pulsante sta 45 sotto l'ultima scheda, come sul sito. */
.of-griglia-pagine{display:flex;justify-content:center;margin-block-start:15px}
.of-griglia-pagine[hidden]{display:none}
.of-griglia-pagine .of-bottone,
.of-catalogo--incorporato .of-carica-altri{padding-inline:30px;letter-spacing:-0.024em;transition:all .25s}
.of-catalogo--incorporato .of-carica-altri{display:flex;min-width:0;margin:15px auto 0}

/* Il modulo di Contatti sul telefono: sul sito i campi passano a 16px
   (interlinea normale, 51,5 di altezza) — e' quello che evita lo zoom
   automatico di iOS. */
@media(max-width:767px){
  .of-modulo input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
  .of-modulo textarea{font-size:16px;line-height:normal}
  .of-modulo input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]){height:51.5px}
}
.of-modulo .wpcf7-submit{letter-spacing:-0.024em}

/* Fra 768 e 1199 l'h2 di glozin e' a 32 (misurato a 1024 sulla Lista dei
   desideri): il titolo «Visualizzati di recente» scende da 35,48 a 32. */
@media(max-width:1199px){
  .of-visti--pagina .of-visti__titolo{font-size:32px;line-height:1.21}
}

/* Lista dei desideri sul telefono: «Torna allo Shop» largo 180 e il titolo
   «Visualizzati di recente» a 18 — sul sito l'h2 di glozin, sotto i 768,
   scende a 18px. */
@media(max-width:767px){
  .woocommerce a.button.of-preferiti__torna,
  .of-preferiti__torna{min-width:180px}
  .of-visti--pagina .of-visti__titolo{font-size:18px;line-height:21.78px}
}