/* ===============================================================
   SCAFFALE ED ELENCO (27/10/2026)

   Due modi di mettere in fila i libri, presi da come li mostra Tradition
   Publishing (solo l'impaginazione, niente dal loro sito):

   .scaffale  «Tutto il catalogo»: solo copertine, cinque per riga,
              piccole e fitte. Sulle copertine neutre (senza titolo
              stampato) il titolo si scrive sopra.
   .elenco    collana Agartha e collane: un libro per riga, copertina a
              sinistra, a destra titolo, autore, anno e 3-4 righe.
              Cliccando il libro si apre la sua pagina.
   =============================================================== */

/* ---------- scaffale: cinque copertine per riga ---------- */
.scaffale{
  list-style:none;margin:clamp(22px,3vw,40px) auto 0;padding:0 0 clamp(30px,4vw,52px);
  display:grid;grid-template-columns:repeat(5,130px);justify-content:center;
  gap:26px;
}
@media (max-width:820px){ .scaffale{grid-template-columns:repeat(4,minmax(0,130px));gap:20px} }
@media (max-width:600px){ .scaffale{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} }

.scaffale li{position:relative}
.scaffale .copertina{
  display:block;position:relative;max-width:100%;
  box-shadow:0 1px 2px rgba(0,0,0,.25),0 4px 10px rgba(0,0,0,.18);
  transition:transform .18s ease,box-shadow .18s ease;
}
.scaffale .copertina img{display:block;width:100%;height:auto;aspect-ratio:600/920;object-fit:cover}
.scaffale a.copertina:hover,
.scaffale a.copertina:focus-visible{transform:translateY(-3px);box-shadow:0 2px 4px rgba(0,0,0,.25),0 10px 18px rgba(0,0,0,.22)}
.scaffale a.copertina:focus-visible{outline:2px solid var(--rosso);outline-offset:3px}
@media (prefers-reduced-motion:reduce){ .scaffale .copertina{transition:none} }

/* copertina neutra: il titolo scritto sopra, dove starebbe quello stampato */
.scaffale .sopra small{display:block;font-size:9px;letter-spacing:.18em;margin-bottom:3px;opacity:.8}
.scaffale .sopra{
  position:absolute;left:8%;right:8%;top:9%;
  font-family:'Marcellus','Archivo',Georgia,serif;font-size:15px;line-height:1.15;
  text-align:center;text-transform:uppercase;letter-spacing:.04em;color:#C9A24A;
  text-wrap:balance;
}
@media (max-width:600px){ .scaffale .sopra{font-size:12px} }

/* ---------- elenco: un libro per riga ----------
   27/10/2026: piu' grande e centrato. Il blocco (copertina + testo) e'
   largo quanto il foglio permette, fino a 880 px, e sta in mezzo: niente
   colonna vuota a destra. */
.elenco{list-style:none;margin:clamp(20px,3vw,36px) auto 0;padding:0;max-width:880px;display:flex;flex-direction:column}
.elenco > li{
  display:grid;grid-template-columns:clamp(150px,22vw,230px) minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:center;
  padding-block:clamp(28px,4vw,46px);
}
.elenco > li + li{position:relative}
.elenco > li + li::before{
  content:"";position:absolute;top:0;left:50%;width:220px;margin-left:-110px;
  border-top:1px solid #B5B5B5;
}
@media (max-width:560px){
  .elenco > li{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:18px}
  .elenco .copertina{width:min(200px,60vw)}
  .elenco .testo{align-items:center}
  .elenco .riga-acquisto{justify-content:center}
}

.elenco .copertina{display:block;width:100%;box-shadow:0 2px 4px rgba(0,0,0,.25),0 10px 24px rgba(0,0,0,.18);transition:transform .18s ease}
.elenco a.copertina:hover{transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){ .elenco .copertina{transition:none} }
.elenco .copertina img{display:block;width:100%;height:auto;aspect-ratio:600/920;object-fit:cover}
.elenco .copertina.larga img{aspect-ratio:3/2}
.elenco a.copertina:focus-visible{outline:2px solid var(--rosso);outline-offset:3px}

.elenco .testo{min-width:0;display:flex;flex-direction:column;gap:6px}
.elenco .titolo{
  margin:0;font-family:'Marcellus','Archivo',Georgia,serif;font-weight:400;
  font-size:clamp(24px,2.6vw,32px);line-height:1.15;color:var(--rosso);text-wrap:balance;
}
.elenco .titolo a{color:inherit;text-decoration:none}
.elenco .titolo a:hover,.elenco .titolo a:focus-visible{text-decoration:underline;text-underline-offset:4px}
.elenco .autore{margin:0;font-style:italic;font-size:clamp(16px,1.5vw,19px);color:#222}
.elenco .anno{margin:0;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#6A6A6A;font-variant-numeric:tabular-nums}
.elenco .breve{margin:10px 0 0;font-size:clamp(15px,1.3vw,16.5px);line-height:1.65;color:#232323;max-width:58ch}
.elenco .riga-acquisto{margin:16px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;font-size:15px}
.elenco .riga-acquisto .pr{font-weight:700;font-size:18px;color:#111}
.elenco .riga-acquisto .pr.soon{font-weight:400;color:#6A6A6A;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase}
.elenco .riga-acquisto .apri{color:var(--rosso);font-size:15px}
/* nelle finestre col fondo grigio (catalogo) l'elenco sta su un foglio bianco */
.win .body-area > .elenco{background:#FFFFFF;max-width:none;margin-top:16px;padding:4px clamp(16px,5vw,80px)}

/* anteprima nella pagina della libreria: due file di copertine e il link */
.scaffale.anteprima{padding-bottom:0}
.tutto-link{margin:22px 0 clamp(30px,4vw,48px);text-align:center;font-size:14px;letter-spacing:.04em}
.tutto-link a{color:var(--rosso)}

/* «Mai uscito in italiano»: il valore dei titoli inediti, segnato dove compaiono */
.scaffale .nastro{
  position:absolute;left:0;right:0;bottom:12%;padding:4px 2px;
  background:var(--rosso);color:#FFFFFF;text-align:center;
  font-family:'Archivo',system-ui,sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.inedito{
  display:inline-block;align-self:flex-start;margin:4px 0 0;padding:3px 8px;
  background:var(--rosso);color:#FFFFFF;
  font-family:'Archivo',system-ui,sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}

/* sotto il titolo della sezione basta poco spazio */
.elenco > li:first-child{padding-top:clamp(6px,1.5vw,16px)}

/* sottocollane dei classici italiani: «Collana Pirandello» ecc. */
.sottocollana{
  margin:clamp(26px,3.5vw,40px) 0 0;text-align:center;
  font-family:'Marcellus','Archivo',Georgia,serif;font-weight:400;font-size:clamp(17px,1.8vw,21px);
  letter-spacing:.14em;text-transform:uppercase;color:var(--rosso);
}
.sottocollana + .scaffale{margin-top:16px}
.sottocollana + .elenco{margin-top:0}

/* pagina delle collane: le immagini delle collane sono larghe (3:2) */
.elenco.collane > li{grid-template-columns:clamp(220px,36vw,400px) minmax(0,1fr)}
@media (max-width:560px){ .elenco.collane .copertina{width:100%} }
.elenco.collane .copertina:not(.larga){width:min(230px,100%);justify-self:center}

/* ---------- vetrina della libreria (27/10/2026 sera) ----------
   Una collana = una fila di copertine, sotto il titolo e il carrello con
   il +. Niente didascalie: stanno nella pagina della collana. --col e'
   il numero di colonne scelto dal generatore sul numero dei libri (3, 4,
   5, 4+4...), cosi' la fila e' piena e centrata; --colm per il telefono. */
.vetrina{
  /* 27/10/2026 (2): griglia vera. Ogni collana occupa la stessa larghezza
     dentro il foglio, con i suoi margini; i libri si dividono la riga in
     colonne uguali e ognuno sta al centro della sua: con 3 libri le
     copertine si allargano sulla riga invece di stringersi al centro. */
  --c:var(--col);
  list-style:none;box-sizing:border-box;width:100%;max-width:1040px;
  margin:clamp(14px,2.4vw,28px) auto 0;padding:0 clamp(20px,3.6vw,44px) clamp(26px,3.5vw,44px);
  display:grid;grid-template-columns:repeat(var(--c2),minmax(0,1fr));
  column-gap:clamp(16px,2.6vw,30px);row-gap:clamp(30px,4vw,52px);
}
@media (max-width:600px){ .vetrina{--c2:var(--cm2)} ul.vetrina > li{grid-column:var(--sm,auto) / span 2} }
.vetrina > li{grid-column:var(--s,auto) / span 2;min-width:0;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
/* copertina, titolo e prezzi hanno la stessa larghezza: una colonna sola */
.vetrina > li > *{width:min(100%,166px)}   /* stessa misura in tutte le collane */
.vetrina .copertina{
  display:block;position:relative;width:min(100%,166px);
  box-shadow:0 1px 2px rgba(0,0,0,.25),0 6px 14px rgba(0,0,0,.18);
  transition:transform .18s ease,box-shadow .18s ease;
}
.vetrina .copertina img{display:block;width:100%;height:auto;aspect-ratio:600/920;object-fit:cover}
.vetrina a.copertina:hover,.vetrina a.copertina:focus-visible{transform:translateY(-3px);box-shadow:0 2px 4px rgba(0,0,0,.25),0 12px 20px rgba(0,0,0,.22)}
.vetrina a.copertina:focus-visible{outline:2px solid var(--rosso);outline-offset:3px}
@media (prefers-reduced-motion:reduce){ .vetrina .copertina{transition:none} }
.vetrina .nastro{
  position:absolute;left:0;right:0;bottom:12%;padding:4px 2px;background:var(--rosso);color:#FFFFFF;text-align:center;
  font-family:'Archivo',system-ui,sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.vetrina .titolo{
  margin:4px 0 0;font-family:'Marcellus','Archivo',Georgia,serif;font-size:clamp(14.5px,1.35vw,16px);line-height:1.25;
  color:var(--ink);text-wrap:balance;
}
.vetrina .titolo a{color:inherit;text-decoration:none}
.vetrina .titolo a:hover,.vetrina .titolo a:focus-visible{color:var(--rosso);text-decoration:underline;text-underline-offset:3px}
.vetrina .compra{margin:auto 0 0;display:flex;align-items:center;justify-content:center;gap:10px}
.vetrina .pr{font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}

/* il bottone del carrello: un bottone di Windows 98 con l'icona a pixel */
.carrello-piu{
  display:inline-flex;align-items:center;justify-content:center;min-width:38px;min-height:32px;padding:6px 9px;
  background:var(--face);cursor:pointer;
  border:2px solid;border-color:var(--lite) var(--dark) var(--dark) var(--lite);
  box-shadow:inset 1px 1px 0 #EAEAEA,inset -1px -1px 0 var(--shadow);
}
.carrello-piu .ico{display:block;width:16px;height:16px;image-rendering:pixelated}
.carrello-piu:active{border-color:var(--dark) var(--lite) var(--lite) var(--dark);box-shadow:none;padding:7px 8px 5px 10px}
.carrello-piu:focus-visible{outline:1px dotted var(--ink);outline-offset:-6px}

/* ---------- la collana intera, in cima alla pagina della collana ---------- */
.intera{display:flex;flex-direction:column;align-items:center;gap:14px;margin:clamp(18px,3vw,30px) auto 0;text-align:center}
.intera-img{display:block;width:min(640px,100%);height:auto;aspect-ratio:3/2;object-fit:cover;box-shadow:0 2px 4px rgba(0,0,0,.2),0 12px 28px rgba(0,0,0,.18)}
.intera-prezzo{margin:4px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:6px 14px;font-size:15px}
.intera-prezzo .quanti{color:#4A4A4A;letter-spacing:.06em;text-transform:uppercase;font-size:12.5px}
.intera-prezzo s{color:#6A6A6A;font-variant-numeric:tabular-nums}
.intera-prezzo .pr{font-weight:700;font-size:21px;color:#111;font-variant-numeric:tabular-nums}
.intera .btn{white-space:normal;max-width:100%}
.intera.piccola{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:10px 18px;margin-top:12px}
.intera.piccola .intera-prezzo{margin:0}
.intera.piccola .intera-prezzo .pr{font-size:17px}
.intera.piccola .btn{padding:9px 16px}
/* nel catalogo (finestra a fondo grigio) sta su un foglio bianco, come l'elenco */
.win .body-area > .intera{background:#FFFFFF;margin:16px 0 0;padding:26px clamp(16px,5vw,80px) 28px}

/* la collana come prima voce dell'elenco della sua pagina (27/10/2026) */
.elenco .voce-collana .copertina{box-shadow:0 2px 4px rgba(0,0,0,.3),0 12px 26px rgba(0,0,0,.22)}
.elenco .sconto{margin:12px 0 0;font-size:clamp(15px,1.3vw,16.5px);line-height:1.5;color:#232323;max-width:58ch}
.elenco .sconto s{color:#6A6A6A}

/* ---------- Libro / Ebook (27/10/2026) ----------
   Ogni titolo ha due righe, come un piccolo listino: tipo, prezzo,
   carrello. L'ebook costa la meta' del libro; nelle collane intere il
   prezzo pieno e' barrato. */
.formati{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px 10px;width:100%;text-align:left}
.formato{display:contents}
.formati .tipo{font-family:'Silkscreen','Archivo',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#3A3A3A}
.formati .prezzi{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-end;gap:2px 8px;font-variant-numeric:tabular-nums;text-align:right}
.formati .pr{font-weight:700;font-size:14px;color:#111}
.formati s{color:#6A6A6A;font-size:13px}
.vetrina .formati{margin-top:auto;padding-top:2px;gap:5px 8px}
.vetrina .formati .carrello-piu{min-width:34px;min-height:28px;padding:5px 7px}
/* nell'elenco: le due righe accanto al link della scheda */
.elenco .riga-acquisto .formati{width:auto;max-width:340px;flex:1 1 260px}
.elenco .riga-acquisto .formati .pr{font-size:16px}
.carrello-piu.con-testo{gap:8px;padding:6px 12px;font-family:'Silkscreen','Archivo',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
/* nella scheda del libro: due righe grandi */
.purchase .formati.grande{gap:10px 14px;margin-bottom:6px}
.purchase .formati.grande .tipo{font-size:12px}
.purchase .formati.grande .pr{font-size:22px}
.purchase .formati.grande .btn{padding:10px 16px}
/* la collana in cima alla sua pagina: piu' bassa, cosi' sotto si vedono i libri */
.elenco > li.voce-collana{grid-template-columns:clamp(110px,15vw,170px) minmax(0,1fr);padding-block:clamp(14px,2vw,22px)}
.elenco .voce-collana .breve{margin-top:6px;font-size:clamp(14.5px,1.25vw,15.5px);line-height:1.55}
.elenco .voce-collana .sconto{margin-top:8px;font-weight:600}
.elenco .voce-collana .riga-acquisto{margin-top:10px}
.intera.piccola .formati{width:auto;min-width:min(340px,100%)}
@media (max-width:560px){ .elenco .riga-acquisto .formati{max-width:none;width:100%} }

/* autore sotto il titolo nella vetrina; «a cura di» sotto il nome della collana (27/10/2026) */
.vetrina .titolo{margin-bottom:-4px}
.vetrina .autore{margin:0;font-size:12.5px;line-height:1.3;font-style:italic;color:#555049;text-wrap:balance}
.a-cura{margin:calc(-1 * clamp(8px,1.6vw,16px)) 0 0;text-align:center;font-family:'Marcellus','Archivo',Georgia,serif;
  font-size:clamp(13px,1.2vw,15px);font-style:italic;letter-spacing:.04em;color:#6A6259}

/* ---------- telefono: 3 libri per riga (Francesco, 28/10/2026) ----------
   La regola dei 600 px cambiava solo la variabile --c2, ma ogni vetrina la
   dichiara nel proprio style="" e quello vince sul foglio di stile: da
   telefono restavano 4 libri per riga, e i prezzi uscivano dalla colonna
   sovrapponendosi a quelli accanto. Qui le colonne si dichiarano dirette.
   In una colonna di ~90 px «LIBRO 16,00 € [carrello]» su una riga non ci sta:
   ogni formato diventa un blocchetto, la dicitura sopra e prezzo + carrello
   sotto. */
@media (max-width:600px){
  .vetrina{grid-template-columns:repeat(var(--cm2),minmax(0,1fr));column-gap:12px;row-gap:28px;
           padding-inline:clamp(12px,4vw,20px)}
  .vetrina > li{gap:7px}
  .vetrina .titolo{font-size:13px;line-height:1.22;margin-top:2px}
  .vetrina .autore{font-size:11px;line-height:1.25}
  .vetrina .nastro{font-size:7.5px;letter-spacing:.04em;padding:3px 1px}
  .vetrina .formati{display:flex;flex-direction:column;align-items:stretch;gap:7px;padding-top:4px}
  .vetrina .formato{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:4px;row-gap:1px}
  .vetrina .formati .tipo{grid-column:1 / -1;font-size:8.5px;letter-spacing:.06em;text-align:center}
  .vetrina .formati .prezzi{justify-content:flex-end;white-space:nowrap}
  .vetrina .formati .pr{font-size:12.5px}
  .vetrina .formati .carrello-piu{min-width:28px;min-height:24px;padding:3px 5px}
}

/* ---------- telefono: le pagine delle collane (28/10/2026) ----------
   Le regole dei 560 px in cima al file (copertina a 200 px, collana in
   colonna) venivano scavalcate da quelle scritte dopo, con la stessa
   forza: da telefono la copertina prendeva tutto lo schermo e «LIBRO» e
   «AGGIUNGI» toccavano i bordi della finestra. Qui, in fondo, vincono. */
@media (max-width:560px){
  .elenco > li{padding-inline:18px}
  .elenco .copertina:not(.larga){width:min(190px,52vw)}
  .elenco > li.voce-collana,.elenco.collane > li{grid-template-columns:minmax(0,1fr)}
  .elenco > li.voce-collana .copertina{width:min(150px,42vw)}
  .elenco .riga-acquisto .formati{max-width:320px;margin-inline:auto}
}

/* ---------- telefono: due libri per riga e niente caleidoscopio (Francesco, 29/10/2026) ----------
   Tre per riga si leggevano male. E sul telefono la carta da parati ai lati
   rubava spazio ai libri: il foglio bianco ora arriva ai bordi dello schermo.
   Vale per le pagine della libreria (il vetro) e per catalogo.html, che ha
   ancora il telaio vecchio (desk + schermo). */
@media (max-width:600px){
  .vetro{background:#FFFFFF;border:0;padding:0 0 28px}
  .vetro > .desk,.vetro > .veil{display:none}
  .foglio{width:100%;box-shadow:none}
  .foglio + .win,.vetro > .win{margin-inline:10px}
  body > .desk,body > .veil{display:none}
  .schermo{background:#FFFFFF;box-shadow:none;border-inline:0}
  .schermo > .win{padding:0;margin-bottom:0;background:#FFFFFF;border:0;box-shadow:none}
  .schermo .body-area{background:#FFFFFF;padding:0;border:0;box-shadow:none}
  .schermo .body-area > *{border:0;box-shadow:none}

  .scaffale{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
  .vetrina{column-gap:16px;row-gap:34px}
  .vetrina > li{gap:8px}
  .vetrina .titolo{font-size:15.5px;line-height:1.22}
  .vetrina .autore{font-size:12.5px}
  .vetrina .nastro{font-size:9px;letter-spacing:.05em;padding:4px 2px}
  .vetrina .formati{gap:9px}
  .vetrina .formato{column-gap:6px}
  .vetrina .formati .tipo{font-size:10px}
  .vetrina .formati .pr{font-size:15px}
  .vetrina .formati .carrello-piu{min-width:34px;min-height:30px;padding:4px 7px}
  /* dicitura, prezzo e carrello centrati sotto la copertina (Francesco, 29/10/2026) */
  .vetrina .formato{grid-template-columns:auto auto;justify-content:center;column-gap:10px}
  .vetrina .formati .tipo{text-align:center}
  .vetrina .formati .prezzi{justify-content:center}
}