/* =============================================================
   Parea Sons — la scheda prodotto

   Due colonne: a sinistra la galleria, a destra i dati, che restano
   appiccicati mentre le fotografie scorrono. In fondo «Lasciati
   ispirare», che riusa la scheda del listino così com'è: per questo la
   pagina carica anche css/listino.css.

   E dentro la galleria, altre due colonne: le viste vanno A COPPIE.
   Sono da quattro a nove per colore, e una sotto l'altra un ravvicinato
   del collo veniva grande come un fronte a figura intera — cioè una
   toppa di lino alta quanto lo schermo, con la galleria che arrivava a
   seimila pixel. A coppie, un dettaglio resta un dettaglio.

   Le viste sono un MOSAICO CHE SI SCORRE, non un carosello: si scende
   ed è la pagina a portare da una all'altra. È anche la forma che la
   scheda ha senza JavaScript, identica — lo script aggiunge solo il
   segno di zoom e il visore.

   Regole del sito che qui non si negoziano:
   · nessun angolo arrotondato — l'unica eccezione di tutto il sito è
     il segno di zoom, ed è motivata in SISTEMA.md §4ter;
   · il filetto da 1px che si apre dal centro è l'unico gesto;
   · l'azione principale è UNA — «Aggiungi alla borsa» — e usa
     .bottone così com'è (SISTEMA.md §3).
   ============================================================= */

.prodotto,
.prodotto__strada,
.ispirazione {
  max-width: var(--larghezza-max);
  margin-inline: auto;
  padding-inline: var(--bordo-pagina);
}

/* --- Da dove si viene ----------------------------------------
   Non una briciola di pane con tre livelli: una porta sola, quella
   da cui si è entrati. La categoria è già un'ancora vera nel
   listino, quindi si torna esattamente allo scaffale giusto.     */

.prodotto__strada {
  padding-top: calc(var(--header-h) + var(--s-32));
  padding-bottom: var(--s-24);
}

.prodotto__ritorno {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  font-family: var(--font-display);
  font-size: var(--t-12);
  letter-spacing: var(--tracking-largo);
  text-transform: uppercase;
  color: var(--greige);
  transition: color var(--t-rapido) var(--ease);
}

/* La punta della freccia è disegnata col bordo, non con un carattere:
   un « invece della freccia cambierebbe forma a ogni carattere di
   ripiego. */
.prodotto__ritorno i {
  width: 7px;
  height: 7px;
  border-left: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--t-medio) var(--ease);
}

.prodotto__ritorno:hover { color: var(--rosso); }
.prodotto__ritorno:hover i { transform: rotate(45deg) translate(2px, -2px); }

.prodotto__ritorno:focus-visible {
  outline: 2px solid var(--rosso);
  outline-offset: 4px;
}

/* --- L'impianto ----------------------------------------------
   La colonna dei dati è larga quanto basta a una riga di testo che
   si legge senza rincorrerla; il resto è della fotografia.        */

.prodotto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: clamp(var(--s-48), 5vw, var(--s-96));
  align-items: start;
  padding-bottom: var(--s-128);
}

/* --- La galleria ---------------------------------------------

   Il palco si prende tutta la sua colonna: sono le COPPIE a tenere le
   fotografie a misura, non un limite sulla galleria. Il binario di
   miniature non c'è più — con le viste a due a due se ne vedono quasi
   tutte insieme, e una guida che dice quello che si sta già guardando è
   arredamento. Restano la lente, il visore a pieno schermo e le sue
   miniature, che il visore si scrive da solo.                        */

.prodotto__galleria { min-width: 0; }

/* --- Il palco ------------------------------------------------

   Tutte le viste sono uguali: mezza colonna, 3:4, nessuna eccezione.
   Larghe metà colonna sono alte due terzi di una schermata, quindi la
   vecchia regola — «il capo deve stare in una schermata» — si rispetta
   da sé e non serve più limitare niente.

   `--vista-piena` resta per l'unica lastra che la colonna se la prende
   tutta: il posto vuoto di un capo senza scatti.                     */
.palco {
  position: relative;
  --vista-piena: calc(100svh - var(--header-h-ridotto) - var(--s-64));
}

/* Due colonne, e lo spazio fra le fotografie è lo stesso in tutte e due
   le direzioni: un mosaico ha una maglia sola.

   Stretto — 8px, un passo di griglia — e non 16: le fotografie hanno
   tutte lo stesso fondo avorio, quindi fra una e l'altra non c'è niente
   da separare, c'è solo da far vedere dove finisce una e comincia
   l'altra. Ci pensa il filetto. Uno spazio largo, con quel fondo, non
   legge come aria: legge come un buco. */
.palco__viste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-8);
  align-items: start;
}

/* La dichiarazione delle immagini generate (Reg. UE 2024/1689 art. 50).
   Sta sotto il mosaico, in Jost come le micro-etichette: deve essere
   chiara e leggibile, non deve gridare. Un avviso in rosso su una
   scheda prodotto direbbe «guasto», e qui non c'è nessun guasto —
   c'è una cosa che si dice perché il cliente ha diritto di saperla. */
.palco__nota {
  margin-top: var(--s-16);
  font-family: var(--font-dato);
  font-size: var(--t-12);
  line-height: 1.6;
  letter-spacing: var(--tracking-dato);
  color: var(--greige);
  max-width: 62ch;
}

/* **L'ambientata è una vista come le altre**, e la griglia non ha
   eccezioni: stessa cella, stessa misura, stesso 3:4. Ha avuto per un
   giorno la riga intera perché è quadrata — 1024×1024 — e in mezza
   colonna pareva la fotografia più piccola della scheda; ma una
   fotografia che in una griglia di uguali è grande il doppio non è un
   accento, è un'eccezione da spiegare, e insieme a lei se ne andavano
   il conto della parità e la prima vista distesa. Adesso il ritaglio lo
   fa `object-fit: cover` sulla cella: della barca, del campo, del
   maneggio si perde un quarto ai lati, e al centro resta il capo
   indossato, che è quello per cui la fotografia sta lì.

   Il file resta quadrato e intero: nel visore a pieno schermo si vede
   tutto il fotogramma. */

.palco__vista,
.palco__lastra {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  background: var(--fondo-scatto);
  border: 1px solid var(--filetto);
  overflow: hidden;
  /* Chi arriva qui scorrendo — un'ancora, il fuoco della tastiera —
     senza questo margine finirebbe sotto l'header fisso. */
  scroll-margin-top: calc(var(--header-h-ridotto) + var(--s-24));
}

/* La lastra vuota non sta nella griglia: è il posto di un capo che non
   ha nessuno scatto, e resta larga come una vista che apre. */
.palco__lastra {
  width: min(100%, calc(var(--vista-piena) * 3 / 4));
  margin-inline: auto;
}

.palco__vista img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Il passaggio da una vista all'altra ---------------------
   Ogni fotografia entra salendo e allargandosi, una volta sola. Non è
   una reazione al passaggio del cursore — è la comparsa allo scroll
   che il sito usa già nei mondi, in Inside e in «Lasciati ispirare»,
   quindi non è un gesto nuovo (SISTEMA.md §4).

   La posa di partenza la accende lo script (data-anima): senza
   JavaScript, o senza IntersectionObserver, non si nasconde niente e
   le tre viste si vedono tutte. È la stessa regola di js/rivela.js. */

.palco[data-anima="sì"] .palco__vista {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--t-ampio) var(--ease),
    transform var(--t-ampio) var(--ease);
}

.palco[data-anima="sì"] .palco__vista img {
  transform: scale(1.03);
  transition: transform 700ms var(--ease);
}

.palco[data-anima="sì"] .palco__vista[data-dentro="sì"] {
  opacity: 1;
  transform: none;
}

.palco[data-anima="sì"] .palco__vista[data-dentro="sì"] img {
  transform: none;
}

/* --- Il vetro: il bersaglio dello zoom ------------------------
   Un bottone trasparente grande quanto la fotografia. Nasce hidden e
   lo scopre lo script. Col cursore ospita il segno (§4ter); con la
   tastiera, Invio apre il visore.                                 */

.palco__vetro {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: zoom-in;
}

/* Mentre il segno è acceso PRENDE IL POSTO del cursore: due cose che
   si inseguono sarebbero una di troppo. */
.palco__vetro[data-segno="sì"] { cursor: none; }

.palco__vetro:focus-visible {
  outline: 2px solid var(--rosso);
  outline-offset: -3px;
}

/* --- I dati --------------------------------------------------
   Appiccicati: la colonna resta ferma mentre le fotografie scorrono,
   così il prezzo e la borsa non vanno mai cercati.

   Il max-height non è un vezzo. Nome, prezzo, colore, taglia, borsa,
   descrizione e tre riquadri sono più alti di una finestra, e una
   colonna appiccicata più alta della finestra è una colonna di cui il
   fondo non si raggiunge mai: resta lassù mentre le fotografie
   scorrono, e gli ultimi riquadri non si vedono più. Così invece
   scorre dentro di sé quel poco che serve, con la barra sottile. Nella
   maggior parte delle finestre non se ne accorge nessuno.

   NON è un riquadro che scorre per conto suo, e non deve diventarlo.
   La colonna è più alta di una schermata, e le due soluzioni facili
   sono tutte e due sbagliate: appiccicarla in cima e basta nasconde
   per sempre gli ultimi riquadri; darle overflow:auto le fa RUBARE LA
   ROTELLINA a chi stava scorrendo le fotografie e ci è passato sopra
   col cursore. Si vuole scendere sul capo e scende il pannello del
   prezzo: è il difetto che si sente per primo.

   La soluzione è il min() qui sotto. --alt-dati è l'altezza vera della
   colonna, che scrive js/scheda.js con un ResizeObserver.

   · se la colonna ci sta nella finestra, il minimo è il primo termine
     e si comporta come qualunque colonna appiccicata;
   · se è più alta, il minimo diventa NEGATIVO: la colonna sale insieme
     alla pagina finché il suo fondo non tocca il fondo della finestra,
     e lì si ferma.

   Si legge tutto, non si tocca la rotellina di nessuno, e non c'è un
   solo ascoltatore di scroll.                                       */

.prodotto__dati {
  position: sticky;
  top: min(
    calc(var(--header-h-ridotto) + var(--s-32)),
    calc(100svh - var(--s-32) - var(--alt-dati, 0px))
  );
}

.prodotto__dati-inner {
  display: grid;
  gap: var(--s-16);
  justify-items: start;
}

.prodotto__testa {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--s-16);
  width: 100%;
}

.prodotto__nome {
  font-family: var(--font-testo);
  font-weight: 400;
  font-size: clamp(var(--t-32), 2.6vw, 2.5rem);
  line-height: 1.1;
  text-wrap: balance;
}

/* I due segni accanto al nome: il cuore e il passamano. Il rientro
   negativo che prima stava sul cuore ora sta qui, sulla coppia — se no
   il secondo bersaglio da 44px spingerebbe il nome dentro la colonna. */
.prodotto__segni {
  flex: 0 0 auto;
  display: flex;
  align-items: start;
  margin: -10px -10px 0 0;
}

/* Lo stesso cuore dell'header e della griglia, alla stessa regola:
   tratto da spento, rosso araldico pieno da acceso. */
.prodotto__cuore {
  flex: 0 0 auto;
  display: grid;
  place-content: center;
  width: 44px;
  height: 44px;
  color: var(--inchiostro);
  cursor: pointer;
}

.prodotto__cuore svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition:
    stroke var(--t-rapido) var(--ease),
    fill   var(--t-rapido) var(--ease);
}

.prodotto__cuore[aria-pressed="true"] svg { stroke: var(--rosso-araldico); }
.prodotto__cuore[aria-pressed="true"] .icona-cuore { fill: var(--rosso-araldico); }

.prodotto__cuore:focus-visible {
  outline: 2px solid var(--rosso);
  outline-offset: -4px;
}

/* --- Il passamano ---------------------------------------------
   Il tasto che manda questa scheda a qualcun altro, e il suo foglio.
   La regola sta in SISTEMA.md §3quinquies: tre punti legati da due
   tratti, 1,3px come il cuore che gli sta a fianco, nessuna pastiglia
   sotto e nessun angolo tondo — l'unico del sito è il segno di zoom. */
.passamano { position: relative; }

.passamano__tasto {
  display: grid;
  place-content: center;
  width: 44px;
  height: 44px;
  color: var(--inchiostro);
  cursor: pointer;
}

.passamano__tasto svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  transition: stroke var(--t-rapido) var(--ease);
}

.passamano__tasto:hover svg,
.passamano[data-aperto] .passamano__tasto svg { stroke: var(--rosso); }

.passamano__tasto:focus-visible {
  outline: 2px solid var(--rosso);
  outline-offset: -4px;
}

/* Il foglio: una superficie sollevata, quindi bianco lino su fondo
   pagina, con il filetto di beige che il sito usa per ogni bordo. */
.passamano__foglio {
  position: absolute;
  top: calc(100% - var(--s-8));
  right: 0;
  z-index: 3;
  min-width: 13rem;
  padding: var(--s-8) 0;
  background: var(--bianco-lino);
  border: 1px solid var(--beige);
}

.passamano__foglio[hidden] { display: none; }

.passamano__voci {
  display: grid;
  list-style: none;
}

/* Il bersaglio è 44px come il cuore e la freccia (§4bis): con la sola
   spaziatura la riga veniva 34, che da scrivania basta e sotto un dito
   no. L'altezza minima non è una spaziatura e non tocca la griglia da
   8px — le distanze restano tutte `--s-*`. */
.passamano__voce {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: var(--s-8) var(--s-16);
  font-family: var(--font-dato);
  font-size: var(--t-12);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--inchiostro);
  cursor: pointer;
  transition: color var(--t-rapido) var(--ease);
}

.passamano__voce:hover,
.passamano__voce:focus-visible { color: var(--rosso); }

/* Il gesto unico del sito, anche qui: il filetto che si apre dal
   centro. Non se ne aggiunge un altro. */
.passamano__voce::after {
  content: "";
  position: absolute;
  inset: auto var(--s-16) calc(var(--s-8) - 2px) var(--s-16);
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--t-medio) var(--ease);
}

.passamano__voce:hover::after,
.passamano__voce:focus-visible::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .passamano__voce::after { transition: none; }
}

.prodotto__materia {
  margin-top: calc(var(--s-8) * -1);
  font-family: var(--font-testo);
  font-size: var(--t-20);
  color: var(--rosso);
}

.prodotto__prezzo {
  font-family: var(--font-dato);
  font-size: var(--t-20);
  letter-spacing: var(--tracking-dato);
  font-variant-numeric: tabular-nums;
}

.prodotto__iva {
  margin-top: calc(var(--s-8) * -1);
  font-family: var(--font-dato);
  font-size: var(--t-12);
  letter-spacing: var(--tracking-dato);
  color: var(--greige);
}

.prodotto__dati-inner .filetto {
  width: 100%;
  margin-block: var(--s-8);
  background: var(--filetto);
}

/* --- Le scelte: colore e taglia ------------------------------ */

/* Una <fieldset> non si fa griglia: la scatola anonima che avvolge
   tutto quello che non è la <legend> non eredita la larghezza, e le
   file di quadretti finiscono incolonnate a 20px. Resta un blocco con
   min-width azzerato e le distanze sui figli — la stessa soluzione che
   .filtro usa nel listino, per lo stesso identico motivo. */
.sceltacapo {
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  min-width: 0;
}

.sceltacapo + .sceltacapo { margin-top: var(--s-24); }

.sceltacapo__titolo {
  display: flex;
  gap: var(--s-8);
  padding: 0;
  margin-bottom: var(--s-16);
  font-family: var(--font-dato);
  font-size: var(--t-12);
  font-weight: 400;
  letter-spacing: var(--tracking-dato);
  text-transform: uppercase;
  color: var(--greige);
}

.sceltacapo__valore {
  color: var(--inchiostro);
  text-transform: none;
  letter-spacing: 0;
}

.sceltacapo__valore:empty::before {
  content: "da scegliere";
  color: var(--greige);
}

.sceltacapo__file {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* Un colore senza fotografia resta un segno e non si preme: mostrare
   il capo in una tinta e scriverne un'altra sarebbe una bugia. Il
   tratteggio dice che manca qualcosa, senza gridarlo. */
.tinta-punto--assente {
  opacity: 0.55;
  border-style: dashed;
}

.sceltacapo__file--taglie { gap: var(--s-8); }

.taglia {
  min-width: 52px;
  padding: 12px 8px;
  font-family: var(--font-dato);
  font-size: var(--t-12);
  letter-spacing: var(--tracking-dato);
  color: var(--greige);
  background: transparent;
  border: 1px solid var(--filetto);
  cursor: pointer;
  transition:
    border-color var(--t-rapido) var(--ease),
    color var(--t-rapido) var(--ease);
}

.taglia:hover { border-color: var(--filetto-forte); color: var(--inchiostro); }

.taglia[aria-pressed="true"] {
  border-color: var(--inchiostro);
  color: var(--inchiostro);
}

.taglia:focus-visible {
  outline: 2px solid var(--rosso);
  outline-offset: 2px;
}

/* --- L'azione ------------------------------------------------ */

.prodotto__aggiungi {
  width: 100%;
  margin-top: var(--s-8);
}

.prodotto__avviso {
  font-family: var(--font-dato);
  font-size: var(--t-12);
  letter-spacing: var(--tracking-dato);
  color: var(--rosso-araldico);
}

.prodotto__avviso:empty { display: none; }

/* --- Quello che ancora non c'è -------------------------------
   In chiaro, come i punti aperti di privacy.html e termini.html: un
   segnaposto che si vede è un promemoria, uno nascosto è un
   dimenticatoio.                                                  */

.da-completare {
  font-family: var(--font-testo);
  font-size: var(--t-16);
  line-height: 1.55;
  color: var(--greige);
  border-left: 1px solid var(--oro);
  padding-left: var(--s-16);
}

.da-completare--riga {
  margin-top: var(--s-16);
  font-size: var(--t-13);
  line-height: 1.5;
}

.prodotto__descrizione { margin-top: var(--s-8); }

/* --- La guida alle taglie ------------------------------------
   Si apre sotto i bottoni della taglia, dove nasce il dubbio: chi non
   sa quale premere non deve andare a cercarla in un'altra pagina e
   perdere il capo che stava guardando.

   È il <details> dei tre riquadri qui sotto, in minuta: stessa
   meccanica — nativo, tastiera, niente JavaScript — e stesso segno,
   il più che diventa meno. Cambia solo la voce, che qui è
   un'etichetta in Jost come «Taglia» e non un titolo in Cormorant:
   dentro una fieldset, un titolo da 20px farebbe da secondo capo
   sezione e la legenda vera sparirebbe sotto.                     */

.guida {
  margin-top: var(--s-16);
  border-top: 1px solid var(--filetto);
}

.guida__titolo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-16);
  padding-block: var(--s-16);
  font-family: var(--font-dato);
  font-size: var(--t-12);
  letter-spacing: var(--tracking-dato);
  text-transform: uppercase;
  color: var(--greige);
  cursor: pointer;
  list-style: none;
  transition: color var(--t-rapido) var(--ease);
}

.guida__titolo::-webkit-details-marker { display: none; }
.guida__titolo:hover { color: var(--inchiostro); }

.guida__titolo:focus-visible {
  outline: 2px solid var(--rosso);
  outline-offset: -2px;
}

/* Lo stesso segno dei riquadri: due tratti, uno si corica. */
.guida__titolo i {
  position: relative;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
}

.guida__titolo i::before,
.guida__titolo i::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: currentColor;
  transition: transform var(--t-medio) var(--ease);
}

.guida__titolo i::after { transform: rotate(90deg); }
.guida[open] .guida__titolo i::after { transform: rotate(0deg); }

.guida__corpo { padding-bottom: var(--s-24); }

.guida__nota {
  margin-bottom: var(--s-16);
  font-family: var(--font-testo);
  font-size: var(--t-16);
  line-height: 1.55;
  color: var(--inchiostro);
}

/* La colonna dei dati è larga poco più di 380px e le corrispondenze
   sono da tre a cinque colonne: sotto una certa larghezza la tabella
   scorre da sé invece di spezzare le celle. Scorre LEI, non la
   pagina — è lo stesso `overflow-x` di .tabella-scorre, che però sta
   in css/collezione.css e questa pagina non lo carica. */
.guida__scorre { overflow-x: auto; }

/* La tabella di maison ha un'altra misura e un altro posto: quella
   sta larga in una pagina, questa sta stretta in una colonna. I dati
   sono gli stessi e vengono dallo stesso posto — TAGLIE_NAZIONALI in
   tools/capi.py — ma il vestito no. */
.guida__tavola {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-dato);
  font-size: var(--t-12);
  letter-spacing: var(--tracking-dato);
  white-space: nowrap;
}

.guida__tavola th,
.guida__tavola td {
  padding: 10px var(--s-16) 10px 0;
  text-align: left;
  border-bottom: 1px solid var(--filetto);
}

.guida__tavola thead th {
  font-weight: 400;
  text-transform: uppercase;
  color: var(--greige);
  border-bottom-color: var(--filetto-forte);
}

.guida__tavola tbody th {
  font-weight: 400;
  font-family: var(--font-display);
  letter-spacing: var(--tracking-medio);
  color: var(--inchiostro);
}

.guida__tavola tbody td { color: var(--greige); }
.guida__tavola tbody tr:last-child th,
.guida__tavola tbody tr:last-child td { border-bottom: 0; }

/* Il filetto che si apre dal centro, come ogni collegamento del
   sito. Porta a maison.html#taglie, che è dove la misura si spiega
   per esteso — qui si sceglie una taglia, lì si impara a prenderla. */
.guida__oltre {
  position: relative;
  display: inline-block;
  margin-top: var(--s-16);
  padding-bottom: 2px;
  font-family: var(--font-dato);
  font-size: var(--t-12);
  letter-spacing: var(--tracking-dato);
  text-transform: uppercase;
  color: var(--inchiostro);
}

.guida__oltre::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--t-medio) var(--ease);
}

.guida__oltre:hover::after,
.guida__oltre:focus-visible::after { transform: scaleX(1); }

/* --- I tre riquadri ------------------------------------------
   <details> nativo: si aprono con la tastiera e funzionano anche
   senza JavaScript. Nessuna libreria, nessun ascoltatore.         */

.riquadro {
  width: 100%;
  border-top: 1px solid var(--filetto);
}

.riquadro:last-of-type { border-bottom: 1px solid var(--filetto); }

.riquadro__titolo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-16);
  padding-block: var(--s-24);
  font-family: var(--font-testo);
  font-size: var(--t-20);
  cursor: pointer;
  list-style: none;
  transition: color var(--t-rapido) var(--ease);
}

.riquadro__titolo::-webkit-details-marker { display: none; }
.riquadro__titolo:hover { color: var(--rosso); }

.riquadro__titolo:focus-visible {
  outline: 2px solid var(--rosso);
  outline-offset: -2px;
}

/* Il più che diventa meno: due tratti, uno dei quali si corica.
   Nessuna rotazione di icona, nessun cerchio. */
.riquadro__titolo i {
  position: relative;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
}

.riquadro__titolo i::before,
.riquadro__titolo i::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: currentColor;
  transition: transform var(--t-medio) var(--ease);
}

.riquadro__titolo i::after { transform: rotate(90deg); }
.riquadro[open] .riquadro__titolo i::after { transform: rotate(0deg); }

.riquadro__corpo { padding-bottom: var(--s-24); }

/* Il dato certo in cima al riquadro, sopra a quello che è ancora da
   scrivere: l'etichetta in Jost come i prezzi, il valore in Cormorant
   come il testo. La composizione fibrosa è l'unico che oggi c'è. */
.riquadro__dato {
  margin-bottom: var(--s-16);
  font-family: var(--font-testo);
  font-size: var(--t-16);
  color: var(--inchiostro);
}

.riquadro__dato span {
  display: block;
  margin-bottom: var(--s-8);
  font-family: var(--font-dato);
  font-size: var(--t-12);
  letter-spacing: var(--tracking-dato);
  text-transform: uppercase;
  color: var(--greige);
}

/* --- Lasciati ispirare ---------------------------------------
   Le quattro schede sono quelle del listino, senza i quadretti e
   senza le frecce del colore: qui si guarda, non si sceglie.      */

.ispirazione {
  padding-block: var(--s-96) var(--s-128);
  border-top: 1px solid var(--filetto);
}

.ispirazione__titolo {
  margin-bottom: var(--s-64);
  font-family: var(--font-testo);
  font-weight: 400;
  font-size: var(--t-32);
  text-align: center;
}

.ispirazione__pista { position: relative; }

.ispirazione__freccia {
  position: absolute;
  top: 34%;
  z-index: 2;
  transform: translateY(-50%);
}

.ispirazione__freccia[data-scorri="prec"] { left: calc(var(--s-8) * -1); }
.ispirazione__freccia[data-scorri="succ"] { right: calc(var(--s-8) * -1); }

/* La comparsa allo scroll, come nelle pagine di collezione. */
.ispirazione[data-anima="sì"] .articolo {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--t-lento) var(--ease),
    transform var(--t-lento) var(--ease);
}

.ispirazione[data-anima="sì"][data-visibile="sì"] .articolo {
  opacity: 1;
  transform: none;
}

.ispirazione[data-anima="sì"][data-visibile="sì"] .articolo:nth-child(2) { transition-delay: 60ms; }
.ispirazione[data-anima="sì"][data-visibile="sì"] .articolo:nth-child(3) { transition-delay: 120ms; }
.ispirazione[data-anima="sì"][data-visibile="sì"] .articolo:nth-child(4) { transition-delay: 180ms; }

/* --- Larghezze minori ----------------------------------------
   Sotto i 1024px la colonna dei dati non sta più accanto alla
   galleria senza strizzarla: si passa a una colonna sola, e i dati
   smettono di essere appiccicati — non hanno più niente accanto a cui
   restare fermi.                                                   */

@media (max-width: 1024px) {
  .prodotto {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-48);
  }

  .prodotto__dati { position: static; }

  .prodotto__dati-inner { max-width: 520px; }

  /* Senza la colonna dei dati accanto, la galleria si prenderebbe tutta
     la pagina: a 1024 farebbe due viste da 480px, più grandi che su un
     computer largo. Si tiene alla misura che aveva quando la colonna
     c'era, e si centra.

     I dati scendono sotto e si mettono nella stessa scatola: il prezzo
     comincia dove comincia la fotografia, non venti pixel più a
     sinistra.

     La larghezza è dichiarata e non un massimo: con `max-width` e i
     margini automatici una casella di griglia smette di distendersi e
     si stringe sul contenuto — i dati sarebbero diventati una colonna
     da 520px centrata in mezzo alla pagina. */
  .prodotto__galleria,
  .prodotto__dati {
    width: min(100%, 880px);
    margin-inline: auto;
  }

}

@media (max-width: 900px) {
  .ispirazione__titolo { font-size: var(--t-20); }

  /* Quattro capi non ci stanno in fila: la fascia diventa una pista
     che scorre, e le frecce servono davvero. */
  .ispirazione__griglia {
    grid-auto-flow: column;
    grid-auto-columns: minmax(200px, 46%);
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: var(--s-24);
    padding-bottom: var(--s-8);
  }

  .ispirazione__griglia .articolo { scroll-snap-align: start; }

}

@media (max-width: 640px) {
  /* Sul telefono le coppie finiscono: due colonne su 375px sono lastre
     da 160, e un capo largo 160px non si guarda — si indovina. Una
     colonna sola, a tutta larghezza, e chi prendeva la riga intera non
     ha più niente di diverso da fare. */
  .palco__viste { grid-template-columns: minmax(0, 1fr); }

  .prodotto__strada { padding-top: calc(var(--header-h) + var(--s-16)); }
  .prodotto { padding-bottom: var(--s-96); }
  .prodotto__materia { font-size: var(--t-16); }
  .prodotto__prezzo { font-size: var(--t-16); }
  .ispirazione { padding-block: var(--s-64) var(--s-96); }
  .ispirazione__griglia { grid-auto-columns: minmax(180px, 72%); }
}

/* --- Dove il cursore non esiste ------------------------------
   Il segno di zoom non nasce nemmeno — lo decide js/scheda.js con la
   stessa domanda — e un tocco sulla fotografia apre il visore.     */

@media (hover: none) {
  .palco__vetro { cursor: pointer; }
}

/* --- Movimento ridotto --------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .freccia,
  .prodotto__ritorno i,
  .riquadro__titolo i::before,
  .riquadro__titolo i::after,
  .guida__titolo i::before,
  .guida__titolo i::after,
  .guida__oltre::after,
  .palco[data-anima="sì"] .palco__vista,
  .palco[data-anima="sì"] .palco__vista img,
  .ispirazione[data-anima="sì"] .articolo { transition: none; }

  .ispirazione__griglia { scroll-behavior: auto; }

  /* La comparsa delle viste non si fa aspettare: si vedono e basta. */
  .palco[data-anima="sì"] .palco__vista,
  .ispirazione[data-anima="sì"] .articolo {
    opacity: 1;
    transform: none;
  }

  .palco[data-anima="sì"] .palco__vista img { transform: none; }
}

/* --- La cura, che è una targhetta -------------------------------

   `.riquadro__dato` da solo mette l'etichetta SOPRA il valore, ed è
   giusto per un dato solo: la composizione. Per le cinque righe della
   cura no — diventerebbero dieci righe, e cinque valori incolonnati
   sotto cinque etichette non si scorrono con l'occhio. Qui l'etichetta
   sta a sinistra e il valore a destra, che è poi la forma della
   targhetta cucita dentro il capo. */
.riquadro__dato--riga {
  display: grid;
  grid-template-columns: minmax(0, 10rem) 1fr;
  gap: var(--s-16);
  align-items: baseline;
  margin-bottom: var(--s-8);
}

.riquadro__dato--riga span { margin-bottom: 0; }

/* La riga senza etichetta — «evitare i bottoni durante la stiratura» —
   è l'unica istruzione della targhetta che non è una coppia. Rientra
   quanto i valori, così legge come la sesta riga della tabella e non
   come un commento a parte. */
.riquadro__nota {
  margin: var(--s-16) 0 0;
  padding-left: calc(10rem + var(--s-16));
  font-family: var(--font-testo);
  font-size: var(--t-16);
  color: var(--inchiostro);
}

/* Da dove vengono questi dati. Non è una nota di stile: su un capo da
   249 euro la differenza fra «lavare a mano» scritto da noi e «lavare
   a mano» letto sull'etichetta è tutta, e chi la legge ha diritto di
   sapere quale delle due sta guardando. */
.riquadro__fonte {
  margin: var(--s-24) 0 0;
  padding-top: var(--s-16);
  border-top: 1px solid var(--filetto);
  font-family: var(--font-dato);
  font-size: var(--t-12);
  line-height: 1.6;
  letter-spacing: var(--tracking-dato);
  color: var(--greige);
}

/* Il collegamento che esce dal riquadro: «Il diritto di recesso, e il
   modulo». È il filetto da 1px che si apre dal centro, come ogni
   collegamento del sito, e VESTE LA STESSA REGOLA DI `.guida__oltre`
   invece di riscriverla — sono lo stesso gesto nello stesso posto, uno
   dentro la guida alle taglie e uno dentro «Resi e cambi».

   Sta dopo `.riquadro__fonte`, che ha già il filetto sopra di sé:
   l'ordine è dato, fonte, collegamento — chi legge il riquadro finisce
   sapendo da dove viene quello che ha letto e dove andare a leggerne
   di più. */
.riquadro__oltre {
  position: relative;
  display: inline-block;
  margin-top: var(--s-16);
  padding-bottom: 2px;
  font-family: var(--font-dato);
  font-size: var(--t-12);
  letter-spacing: var(--tracking-dato);
  text-transform: uppercase;
  color: var(--inchiostro);
}

.riquadro__oltre::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--t-medio) var(--ease);
}

.riquadro__oltre:hover::after,
.riquadro__oltre:focus-visible::after { transform: scaleX(1); }

/* Il segnaposto dentro un riquadro pieno non è più il corpo del
   riquadro: è una riga in mezzo ai dati, e deve leggersi come tale.
   Rientra quanto i valori — come `.riquadro__nota` — così sta nella
   colonna giusta invece di cominciare sotto l'etichetta. */
.riquadro__corpo .da-completare--riga {
  padding-left: calc(10rem + var(--s-16));
}

@media (max-width: 640px) {
  /* In colonna stretta 10rem di etichetta lascerebbero al valore meno
     di quanto gliene serve: si torna all'etichetta sopra. */
  .riquadro__dato--riga { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
  .riquadro__nota { padding-left: 0; }
  .riquadro__corpo .da-completare--riga { padding-left: 0; }
}