/* FUL — la SCHEDA di un numero della rivista (02/11/2026). Sopra magazine.css, che la accoda il mu-plugin
   ful-nuova-prodotto: la rivista, la pillola .fb, le card degli arretrati e le tre colonne della spedizione sono le
   STESSE della pagina Magazine. Qui solo ciò che è della scheda: il banco con la rivista che si apre, il modulo di
   WooCommerce vestito come il sito nuovo, il sommario. */

/* ── 0 · LA TESTATA: fissa sopra la pagina come sul resto del sito, ⛔ dentro il flusso (Francesco 02/11: «la dinamica
   dell'header è rotta e sposta la pagina»). Ferma (sticky) si stringeva scorrendo e tirava su tutta la scheda;
   fissa si stringe, sparisce e torna senza muovere niente. Piena e bianca da subito: sotto c'è carta chiara, ⛔ una foto */
body.ful-nuova--prodotto #ful-hd{position:fixed;top:0;left:0;right:0}

/* ── 1 · LA TESTA: a sinistra la rivista sul banco, a destra il nome, il prezzo, il carrello ─────────────────── */
.pr-testa{background:var(--carta-calda);padding:calc(var(--hd-h,150px) + clamp(40px,5vw,88px)) 0 clamp(56px,6vw,104px)}
.pr-testa__in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;row-gap:40px;align-items:center}
.pr-banco{grid-column:1/7;display:flex;flex-direction:column;align-items:center;gap:22px}
/* la colonna ha UNA misura (Francesco 02/11: «visivamente molto disordinato»): ogni pezzo si allinea agli stessi due bordi */
.pr-info{grid-column:8/13;min-width:0;max-width:30rem}

/* la rivista: stessa costruzione del 66 nella pagina Magazine (.ng-libro/.ng-cop/.riv--retro/--dentro), qui più grande.
   Si apre col mouse sopra o col tocco (.aperto); se non c'è una doppia vera da mostrare resta chiusa */
.pr-mano{position:relative;width:min(58%,380px);perspective:1800px;transition:scale 1.15s var(--curva)}
.pr-mano[role="button"]{cursor:pointer}
.pr-mano[role="button"]:focus-visible{outline:2px solid var(--arancio);outline-offset:10px}
.pr-mano .ng-libro{transform:rotate(-2deg)}
.pr-mano--chiusa .riv--grande{width:100%}
.pr-mano.aperto .ng-libro{transform:translateX(50%) rotate(0deg)}
.pr-mano.aperto .ng-cop{transform:rotateY(-174deg)}
@media (hover:hover){
  .pr-mano[role="button"]:hover .ng-libro{transform:translateX(50%) rotate(0deg)}
  .pr-mano[role="button"]:hover .ng-cop{transform:rotateY(-174deg)}}
/* aperta, la rivista è larga il doppio (2 × 58% = 116% del banco): resta centrata sul dorso e si stringe a .82, così la
   doppia sta nel banco. 03/11: lo scivolone a sinistra di prima (translate −25%) la mandava 104 px fuori dallo schermo a 1440 */
.pr-mano[role="button"]:is(.aperto,:hover){scale:.82}
.pr-banco__dida{margin:0;font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--grigio)}
.pr-tocco{display:none}
@media (hover:none){.pr-hover{display:none}.pr-tocco{display:inline}}

.pr-k{margin:0 0 clamp(14px,1.6vw,22px)}
.pr-h1{margin:0;font-size:clamp(3.4rem,2rem + 5vw,7.4rem);font-weight:600;letter-spacing:-.06em;line-height:.86;text-transform:uppercase}
.pr-h1 .hm-r{padding-bottom:.04em}
/* il colofone: la stessa tabellina dei riquadri di spedizione (etichetta in maiuscoletto, il fatto a destra in neretto,
   fili sottili), qui sotto il nome del numero. Mette in fila ciò che prima galleggiava in tre righe di peso diverso */
.pr-colofone{margin:clamp(26px,2.8vw,40px) 0 0;border-top:1px solid var(--ink)}
.pr-colofone>div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--filo)}
.pr-colofone dt{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--grigio)}
.pr-colofone dd{margin:0;font-weight:600;text-align:right}
.pr-colofone a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.pr-colofone a:hover{color:var(--arancio)}
/* il blocco d'acquisto: il prezzo a misura di cartellino (⛔ il cartello del discount), sotto la barra quantità + bottone */
.pr-compra{margin-top:clamp(28px,3vw,40px)}
.pr-prezzo{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2em .5em;margin:0;
  font-size:clamp(2rem,1.5rem + 1.2vw,2.75rem);font-weight:600;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.pr-prezzo s{font-size:.4em;font-weight:400;letter-spacing:0;color:var(--grigio)}

/* ── il modulo di WooCommerce: quantità tonda + la pillola .fb scura (il pieno bianco è per il nero) ────────────── */
.pr-cassa{margin-top:clamp(16px,1.6vw,20px)}
#magazine .pr-cassa form.cart{display:flex;align-items:center;gap:10px;margin:0}
/* la quantità: una pillola a filo con − 1 + (i due span del tema, resi tasti dallo script della scheda) */
#magazine .pr-cassa .quantity{display:inline-flex;align-items:center;height:56px;margin:0;border:1px solid rgba(21,21,21,.3);border-radius:99px}
#magazine .pr-cassa .quantity .qty{width:2.4em;height:100%;padding:0;border:0;background:transparent;color:var(--ink);font:inherit;font-weight:600;
  text-align:center;-moz-appearance:textfield}
#magazine .pr-cassa .quantity :is(.qodef-quantity-minus,.qodef-quantity-plus){display:grid;place-items:center;width:40px;height:100%;cursor:pointer;
  font-size:1.15rem;line-height:1;color:var(--ink-tenue);border-radius:99px;transition:color .25s}
#magazine .pr-cassa .qodef-quantity-minus::before{content:"−"}
#magazine .pr-cassa .qodef-quantity-plus::before{content:"+"}
#magazine .pr-cassa .quantity :is(.qodef-quantity-minus,.qodef-quantity-plus):hover{color:var(--arancio)}
#magazine .pr-cassa .quantity :is(.qodef-quantity-minus,.qodef-quantity-plus):focus-visible{outline:2px solid var(--arancio);outline-offset:-4px}
#magazine .pr-cassa .quantity{flex:none}
/* l'etichetta «FUL 43 quantity» è per i lettori di schermo: la nascondeva un foglio del tema che su certi numeri ⛔ arriva
   (02/11, FUL 43: scritta accanto alla quantità e bottone tagliato sul telefono). La regola è nostra, ⛔ dipende da nessuno */
#magazine .pr-cassa .screen-reader-text{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* il bottone arriva al bordo della colonna: quantità + bottone sono UNA barra, ⛔ due pezzi sparsi */
#magazine .pr-cassa .single_add_to_cart_button.fb{flex:1 1 auto;justify-content:space-between;height:56px;padding:0 24px 0 26px;border:0;border-radius:99px;background:var(--carbone);color:#fff;
  font:inherit;font-size:.9375rem;font-weight:600;letter-spacing:.01em;line-height:1;cursor:pointer}
@media (hover:hover){#magazine .pr-cassa .single_add_to_cart_button.fb:hover{background:var(--arancio);color:var(--carbone)}}
#magazine .pr-cassa .single_add_to_cart_button.fb:focus-visible{outline:2px solid var(--arancio);outline-offset:3px}
#magazine .pr-cassa .stock{margin:0 0 12px;font-size:.9rem;color:var(--ink-tenue)}
#magazine .pr-cassa .stock.out-of-stock{color:var(--ink);font-weight:600}
/* l'avviso «aggiunto al carrello»: sobrio, col filo arancio, ⛔ il riquadro blu di WooCommerce */
#magazine .pr-avvisi .woocommerce-message,#magazine .pr-avvisi .woocommerce-info,#magazine .pr-avvisi .woocommerce-error{
  margin:clamp(18px,2vw,26px) 0 0;padding:14px 16px;border:0;border-left:3px solid var(--arancio);background:rgba(255,255,255,.55);
  color:var(--ink);font-size:.9375rem;line-height:1.45;list-style:none}
#magazine .pr-avvisi :is(.woocommerce-message,.woocommerce-info,.woocommerce-error)::before{display:none}
#magazine .pr-avvisi .button{float:right;margin-left:12px;padding:0;background:none;border:0;color:var(--ink);font-weight:600;
  text-decoration:underline;text-underline-offset:3px}

/* ── 2 · DENTRO QUESTO NUMERO: il sommario come l'indice della rivista ─────────────────────────────────────── */
.pr-dentro{padding-top:var(--sezione)}
.pr-dentro .pb-sez>h2{grid-column:1/10;max-width:none}
.pr-som{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap);border-top:1px solid var(--ink)}
.pr-som li{display:grid;grid-template-columns:3.2em minmax(0,1fr);column-gap:12px;padding:clamp(16px,1.6vw,22px) 0;border-bottom:1px solid var(--filo)}
.pr-som__n{grid-row:1/3;font-size:.8125rem;font-weight:600;letter-spacing:.06em;color:var(--arancio);padding-top:.35em;font-variant-numeric:tabular-nums}
.pr-som b{font-size:clamp(1.1rem,1.4vw,1.35rem);font-weight:600;letter-spacing:-.02em;line-height:1.2}
/* i numeri senza sommario (44, 45): il loro testo, alla misura del corpo e sotto il titolo, ⛔ il dek grigio a lato */
.pr-libero{max-width:62ch;margin-top:clamp(20px,2vw,28px)}
.pr-libero p{margin:0 0 1em;font-size:clamp(1.05rem,.98rem + .3vw,1.2rem);line-height:1.55;color:var(--ink);text-wrap:pretty}
.pr-som__s{margin-top:4px;color:var(--ink-tenue);font-size:.9375rem;line-height:1.45;text-wrap:pretty}

/* ── 3 · SPEDIZIONE (le tre colonne della Magazine) e GLI ALTRI NUMERI (le card degli arretrati) ─────────────── */
.pr-sped .mg-sped{margin-top:var(--sezione)}
/* lo spazio sotto gli arretrati: il banner che segue è a tutto fondo e ⛔ porta un margine suo */
.pr-altri{padding:var(--sezione) 0}
.pr-altri .testa-sez{margin-bottom:clamp(28px,3vw,44px)}
.pr-tutti{justify-self:end;font-size:.84rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;text-decoration:none;
  border-bottom:1px solid var(--ink);padding-bottom:3px}
.pr-tutti:hover{color:var(--arancio);border-color:var(--arancio)}
.pr-altri .ng-cat{max-width:none}

/* ── telefono e tablet: la rivista sopra, il resto sotto ──────────────────────────────────────────────────── */
@media (max-width:900px){
  .pr-banco,.pr-info{grid-column:1/-1}
  .pr-mano{width:min(52%,260px)}
  .pr-dentro .pb-sez>h2{grid-column:1/-1}
  .pr-som{grid-template-columns:1fr}}
@media (max-width:560px){
  .pr-testa{padding-top:calc(var(--hd-h,120px) + 28px)}
  /* quantità + bottone restano UNA barra anche a 390: tasti − + più stretti e l'etichetta un passo più piccola */
  #magazine .pr-cassa .quantity :is(.qodef-quantity-minus,.qodef-quantity-plus){width:34px}
  #magazine .pr-cassa .single_add_to_cart_button.fb{min-width:0;padding:0 16px 0 18px;font-size:.8125rem}
  .pr-altri .testa-sez{grid-template-columns:1fr}
  .pr-tutti{justify-self:start}}

/* l'entrata del motore (hm-js): la copertina e il titolo ⛔ si nascondono (sono l'LCP). Il resto della colonna parte
   nascosto QUI (.pr-js, tolto dallo script se GSAP manca), così ⛔ si vede un lampo prima che l'entrata cominci */
.pr-js .pr-k,.pr-js .pr-colofone,.pr-js .pr-compra,.pr-js .pr-banco__dida{visibility:hidden}
@media (prefers-reduced-motion:reduce){.pr-mano{transition:none}}