/* =============================================================
   Parea Sons — ricerca e pannelli laterali
   ============================================================= */

/* ------------------------------------------------------------- velo */
.velo {
  position: fixed;
  inset: 0;
  z-index: var(--z-velo);
  background: var(--velo);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--t-lento) var(--ease),
    visibility 0s linear var(--t-lento);
}
.velo[data-visibile="sì"] {
  opacity: 1; visibility: visible; transition-delay: 0s;
}

/* --------------------------------------------------------- ricerca */
.ricerca {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--z-tendina);
  background: var(--bianco-lino);
  border-bottom: 1px solid var(--filetto);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity var(--t-medio) var(--ease),
    transform var(--t-medio) var(--ease),
    visibility 0s linear var(--t-medio);
}
.ricerca[data-aperta="sì"] {
  opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s;
}
.ricerca__inner {
  max-width: var(--larghezza-max);
  margin-inline: auto;
  padding: var(--s-32) var(--bordo-pagina) var(--s-48);
  display: grid;
  gap: var(--s-16);
}
.ricerca__campo {
  display: flex;
  align-items: center;
  gap: var(--s-16);
  border-bottom: 1px solid var(--filetto-forte);
}
.ricerca__campo input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font-family: var(--font-testo);
  font-weight: 300;
  font-size: clamp(var(--t-32), 4vw, var(--t-48));
  line-height: 1.2;
  color: var(--inchiostro);
  padding: var(--s-8) 0 var(--s-16);
}
.ricerca__campo input::placeholder { color: var(--greige); }
.ricerca__campo input:focus { outline: none; }
.ricerca__campo:focus-within { border-bottom-color: var(--rosso); }

/* La conta, e il «non ho trovato niente»: micro-etichetta come tutti i
   dati del sito. Vuota non occupa, così l'elenco non sobbalza. */
.ricerca__conta {
  font-family: var(--font-dato);
  font-size: var(--t-13);
  letter-spacing: var(--tracking-dato);
  text-transform: uppercase;
  color: var(--greige);
}
.ricerca__conta:empty { display: none; }

/* I risultati. La riga è quella delle tendine del menu — nome a
   sinistra, dato a destra, il rosso al passaggio — e non una forma
   nuova: è lo stesso gesto, «scegli una voce da un elenco», e il sito
   ne ha già una. Il filetto fra una riga e l'altra è l'unico ornamento.

   `hidden` lo mette e lo toglie js/ricerca.js: quando non c'è niente
   scritto l'elenco non esiste, e sotto restano i «cercati spesso». */
.ricerca__esiti {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ricerca__esiti[hidden] { display: none; }
.ricerca__esiti li + li { border-top: 1px solid var(--filetto); }

.esito {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-24);
  padding-block: var(--s-8);
  font-family: var(--font-testo);
  font-size: var(--t-20);
  line-height: 1.3;
  transition: color var(--t-rapido) var(--ease);
}
.esito:hover, .esito:focus-visible { color: var(--rosso); }

.esito__nota {
  font-family: var(--font-dato);
  font-size: var(--t-13);
  letter-spacing: var(--tracking-dato);
  text-transform: uppercase;
  color: var(--greige);
  white-space: nowrap;
}
.esito:hover .esito__nota, .esito:focus-visible .esito__nota { color: var(--rosso); }

.ricerca__suggerimenti {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8) var(--s-24);
  align-items: baseline;
}
.ricerca__suggerimenti[hidden] { display: none; }
.ricerca__suggerimenti .occhiello { margin-right: var(--s-8); }
.ricerca__chip {
  position: relative;
  font-size: var(--t-16);
  padding-bottom: 2px;
  transition: color var(--t-rapido) var(--ease);
}
.ricerca__chip::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);
}
.ricerca__chip:hover::after, .ricerca__chip:focus-visible::after { transform: scaleX(1); }

/* Mentre la ricerca è aperta il resto della pagina arretra. */
.contenuto, .site-footer {
  transition: opacity var(--t-medio) var(--ease);
}
body[data-ricerca="aperta"] .contenuto,
body[data-ricerca="aperta"] .site-footer { opacity: .3; }

/* -------------------------------------------------------- pannelli */
.pannello {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-pannello);
  width: min(420px, 100vw);
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--bianco-lino);
  border-left: 1px solid var(--filetto);
  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform var(--t-lento) var(--ease),
    visibility 0s linear var(--t-lento);
}
.pannello[data-aperto="sì"] {
  transform: translateX(0); visibility: visible; transition-delay: 0s;
}

.pannello__testa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-24);
  padding: var(--s-32) var(--s-32) var(--s-24);
  border-bottom: 1px solid var(--filetto);
}
.pannello__titolo {
  font-family: var(--font-display);
  font-size: var(--t-13);
  font-weight: 400;
  letter-spacing: var(--tracking-largo);
  text-transform: uppercase;
}
.pannello__chiudi {
  position: relative;
  font-family: var(--font-dato);
  font-size: var(--t-12);
  letter-spacing: var(--tracking-dato);
  color: var(--greige);
  transition: color var(--t-rapido) var(--ease);

  /* IL BERSAGLIO È 45px, IL TESTO STA DOVE STAVA. La parola «Chiudi»
     è alta 19px, e 19 è sotto i 24 che il criterio 2.5.8 di WCAG 2.2
     chiede a un comando — misurato il 1° settembre 2026, ed era il
     solo rilievo rimasto su tutto il sito coi pannelli aperti. Il
     resto del sito i suoi 44px ce li ha già: questa crocetta era
     l'eccezione, non la regola.

     Il padding allarga il riquadro e il margine negativo lo rimette
     dov'era: la testa del pannello resta alta 77px e la parola resta
     sulla linea di base del titolo, che è un allineamento voluto
     (`align-items: baseline` qui sopra). Misurato prima e dopo. */
  padding-block: 13px;
  margin-block: -13px;
}
.pannello__chiudi:hover { color: var(--inchiostro); }

.pannello__corpo {
  overflow-y: auto;
  padding: var(--s-24) var(--s-32);
}

.pannello__pieno {
  padding: var(--s-24) var(--s-32) var(--s-32);
  border-top: 1px solid var(--filetto);
  display: grid;
  gap: var(--s-16);
}

/* Schermata vuota: è un invito ad agire, non un dispiacere. */
.vuoto { display: grid; gap: var(--s-16); justify-items: start; padding-block: var(--s-32); }
.vuoto p {
  font-size: var(--t-20);
  line-height: 1.4;
  color: color-mix(in srgb, var(--inchiostro) 72%, transparent);
  max-width: 26ch;
}
.vuoto a {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--t-12);
  letter-spacing: var(--tracking-medio);
  text-transform: uppercase;
  padding-bottom: var(--s-8);
}
.vuoto a::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px;
  background: currentColor; transform: scaleX(1); transform-origin: center;
}

/* --- Riga articolo ------------------------------------------- */
.riga-capo {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: var(--s-16);
  align-items: start;
  padding-block: var(--s-16);
  border-bottom: 1px solid var(--filetto);
}
.riga-capo:last-child { border-bottom: 0; }
.riga-capo img {
  width: 64px; aspect-ratio: 2/3; object-fit: cover;
  background: var(--tortora-chiaro);
}
.riga-capo__nome { font-size: var(--t-16); line-height: 1.35; }
.riga-capo__meta {
  font-family: var(--font-dato);
  font-size: var(--t-12);
  letter-spacing: var(--tracking-dato);
  color: var(--greige);
  margin-top: 4px;
}
.riga-capo__prezzo {
  font-family: var(--font-dato);
  font-size: var(--t-13);
  letter-spacing: var(--tracking-dato);
  white-space: nowrap;
}
.riga-capo__togli {
  grid-column: 2 / -1;
  justify-self: start;
  font-family: var(--font-dato);
  font-size: var(--t-12);
  letter-spacing: var(--tracking-dato);
  color: var(--greige);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--t-rapido) var(--ease);
}
.riga-capo__togli:hover { color: var(--rosso-araldico); }

.totale {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--font-dato);
  font-size: var(--t-13);
  letter-spacing: var(--tracking-dato);
}
.totale strong { font-weight: 500; }

/* I bottoni stanno in css/bottoni.css: sono un sistema a sé e li
   usano tutte le pagine. Qui non se ne parla. */

/* --- Modulo account ------------------------------------------ */
.modulo { display: grid; gap: var(--s-24); }
.campo { display: grid; gap: var(--s-8); }
.campo label {
  font-family: var(--font-dato);
  font-size: var(--t-12);
  letter-spacing: var(--tracking-dato);
  color: var(--greige);
}
.campo input {
  border: 0;
  border-bottom: 1px solid var(--filetto-forte);
  background: none;
  font-family: var(--font-testo);
  font-size: var(--t-20);
  color: var(--inchiostro);
  padding: var(--s-8) 0;
}
.campo input:focus { outline: none; border-bottom-color: var(--rosso); }
.campo input[disabled] { color: var(--greige); cursor: not-allowed; }

.campo select {
  border: 0;
  border-bottom: 1px solid var(--filetto-forte);
  border-radius: 0;
  background: none;
  font-family: var(--font-testo);
  font-size: var(--t-20);
  color: var(--inchiostro);
  padding: var(--s-8) 0;
  appearance: none;
  /* La freccia è disegnata qui, non lasciata al sistema: quella del
     sistema porterebbe dentro la pagina un altro linguaggio. */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--inchiostro) 50%),
    linear-gradient(135deg, var(--inchiostro) 50%, transparent 50%);
  background-size: 6px 6px, 6px 6px;
  background-position: right 7px center, right 1px center;
  background-repeat: no-repeat;
}

.campo select:focus { outline: none; border-bottom-color: var(--rosso); }

.campo textarea {
  border: 0;
  border-bottom: 1px solid var(--filetto-forte);
  background: none;
  font-family: var(--font-testo);
  font-size: var(--t-20);
  line-height: 1.5;
  color: var(--inchiostro);
  padding: var(--s-8) 0;
  resize: vertical;
  min-height: 7rem;
}

.campo textarea:focus { outline: none; border-bottom-color: var(--rosso); }

.campo__facoltativo { text-transform: none; letter-spacing: 0; }

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

.campo__errore:empty { display: none; }
.modulo__nota {
  font-family: var(--font-dato);
  font-size: var(--t-12);
  line-height: 1.6;
  letter-spacing: var(--tracking-dato);
  color: var(--greige);
}

.modulo__nota:empty { display: none; }
.modulo__nota[data-tipo="errore"] { color: var(--rosso-araldico); }

.modulo__nota a {
  color: var(--inchiostro);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--oro);
}
.modulo__nota a:hover { color: var(--rosso); text-decoration-color: currentColor; }

/* --- Consensi -------------------------------------------------
   Caselle vere, spente in partenza. Non sono interruttori
   scorrevoli: una casella vuota si vede vuota, e su un consenso
   questo conta più dell'eleganza.                                 */

.scelte {
  border: 0;
  border-top: 1px solid var(--filetto);
  margin: 0;
  padding: var(--s-32) 0 0;
  display: grid;
  gap: var(--s-24);
}

.scelte__titolo {
  padding: 0;
  font-family: var(--font-dato);
  font-size: var(--t-12);
  letter-spacing: var(--tracking-dato);
  text-transform: uppercase;
  color: var(--greige);
}

.scelta {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--s-16);
  align-items: start;
  margin: 0;
}

.scelta input[type="checkbox"] {
  appearance: none;
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  border: 1px solid var(--filetto-forte);
  background: var(--bianco-lino);
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: border-color var(--t-rapido) var(--ease);
}

.scelta input[type="checkbox"]::after {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 1.4px solid var(--bianco-lino);
  border-bottom: 1.4px solid var(--bianco-lino);
  transform: rotate(-45deg) translate(1px, -1px) scale(0);
  transition: transform var(--t-rapido) var(--ease);
}

.scelta input[type="checkbox"]:checked {
  background: var(--rosso);
  border-color: var(--rosso);
}

.scelta input[type="checkbox"]:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }

.scelta input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--rosso);
  outline-offset: 2px;
}

.scelta label {
  font-size: var(--t-16);
  line-height: 1.5;
  color: color-mix(in srgb, var(--inchiostro) 82%, transparent);
  cursor: pointer;
}

.scelte__nota,
.scelta__data {
  font-family: var(--font-dato);
  font-size: var(--t-12);
  line-height: 1.6;
  letter-spacing: var(--tracking-dato);
  color: var(--greige);
  margin: 0;
}

/* Chi è entrato: saluto e due strade, l'area personale e l'uscita. */
.conto__benvenuto {
  font-size: var(--t-20);
  line-height: 1.3;
  margin-bottom: var(--s-8);
}
.conto__benvenuto strong { font-weight: 500; }

.pannello__azioni {
  display: grid;
  gap: var(--s-8);
  margin-top: var(--s-24);
}

body[data-pannello="aperto"] { overflow: hidden; }