/* =============================================================
   Parea Sons — il listino

   Le due pagine di catalogo, Uomo e Donna. Il corpo è generato da
   tools/genera-listino.py a partire da data/products.json: qui c'è
   solo la forma.

   LA REGOLA DELLA SCHEDA
   A riposo si vede il capo sul MANICHINO INVISIBILE, fermo, contenuto
   dentro la lastra con il suo margine — è il modo in cui una maison
   mostra la fattura. Al passaggio del cursore lo stesso capo appare
   INDOSSATO, a pieno taglio: il capo non si muove, cambia solo il
   modo in cui lo si guarda. Nessun ingrandimento, nessuna ombra,
   nessuna cartella che scorre. L'unico altro segno è il filetto da
   1px che si apre dal centro sotto il nome, che è il gesto del sito.

   La lastra vuota resta bianca col filetto attorno, come nella
   vetrina: è il posto della fotografia che non è ancora arrivata.
   ============================================================= */

.listino {
  padding-top: calc(var(--header-h) + var(--s-64));
  padding-bottom: var(--s-128);
}

.listino__inner,
.listino__testa,
.barra__inner,
.filtri__inner {
  max-width: var(--larghezza-max);
  margin-inline: auto;
  padding-inline: var(--bordo-pagina);
}

/* --- La testa ------------------------------------------------ */

.listino__testa {
  display: grid;
  justify-items: center;
  gap: var(--s-16);
  text-align: center;
  padding-bottom: var(--s-64);
}

.listino__titolo {
  font-family: var(--font-testo);
  font-weight: 300;
  font-size: clamp(var(--t-48), 5.6vw, var(--t-72));
  line-height: 1.02;
  letter-spacing: -0.01em;
}

.listino__nota {
  font-size: var(--t-20);
  line-height: 1.5;
  color: var(--greige);
  max-width: 42ch;
}

/* Il prezzo totale, detto una volta per griglia. Stesso registro
   della riga sotto il prezzo nella scheda prodotto. */
.listino__iva {
  margin-top: var(--s-16);
  font-family: var(--font-dato);
  font-size: var(--t-12);
  letter-spacing: var(--tracking-dato);
  color: var(--greige);
}

/* --- La barra ------------------------------------------------
   Tre zone: quanti capi, i filtri, l'ordine. Il filetto sopra e
   sotto la tiene ferma senza doverle dare un fondo proprio.       */

.barra {
  border-block: 1px solid var(--filetto);
}

.barra__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-16);
  min-height: 64px;
}

.barra__conta {
  justify-self: start;
  font-family: var(--font-dato);
  font-size: var(--t-12);
  letter-spacing: var(--tracking-dato);
  color: var(--greige);
}

/* Il numero è il dato, la parola è l'etichetta: il numero è più
   scuro perché è quello che si legge davvero. */
.barra__numero {
  color: var(--inchiostro);
  margin-left: 0.4em;
  font-variant-numeric: tabular-nums;
}

.barra__voce {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  padding: var(--s-16) var(--s-8);
  font-family: var(--font-display);
  font-size: var(--t-12);
  font-weight: 400;
  letter-spacing: var(--tracking-medio);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--rosso);
  cursor: pointer;
}

.barra__voce--filtri { justify-self: center; }

/* Il filetto che si apre dal centro: sotto la parola, non sotto
   l'icona — è la parola che si preme. */
.barra__voce > span:first-of-type {
  position: relative;
}

.barra__voce > span:first-of-type::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--t-medio) var(--ease);
}

.barra__voce:hover > span:first-of-type::after,
.barra__voce:focus-visible > span:first-of-type::after,
.barra__voce[aria-expanded="true"] > span:first-of-type::after {
  transform: scaleX(1);
}

.barra__icona,
.barra__chevron {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.barra__chevron {
  width: 14px;
  height: 14px;
  transition: transform var(--t-medio) var(--ease);
}

.barra__voce[aria-expanded="true"] .barra__chevron { transform: rotate(180deg); }

/* Quanti filtri sono accesi. Rosso araldico: è un contatore, come
   quello della borsa, e vale la stessa regola. */
.barra__quanti {
  font-family: var(--font-dato);
  font-size: var(--t-12);
  letter-spacing: 0;
  color: var(--rosso-araldico);
  font-variant-numeric: tabular-nums;
}

/* --- L'ordine ------------------------------------------------ */

.ordina {
  position: relative;
  justify-self: end;
}

.ordina__menu {
  position: absolute;
  top: calc(100% - var(--s-8));
  right: 0;
  z-index: 30;
  min-width: 15rem;
  padding-block: var(--s-8);
  background: var(--bianco-lino);
  border: 1px solid var(--filetto);
}

.ordina__voce {
  display: block;
  width: 100%;
  padding: var(--s-8) var(--s-24);
  text-align: left;
  font-size: var(--t-16);
  line-height: 1.5;
  color: color-mix(in srgb, var(--inchiostro) 82%, transparent);
  cursor: pointer;
  transition: color var(--t-rapido) var(--ease);
}

.ordina__voce:hover { color: var(--rosso); }

/* Quello scelto resta in inchiostro e porta il filetto d'oro: sul
   lino l'oro dà 3,8:1, sopra la soglia dei segni. */
.ordina__voce[aria-checked="true"] {
  position: relative;
  color: var(--inchiostro);
}

.ordina__voce[aria-checked="true"]::before {
  content: "";
  position: absolute;
  left: var(--s-8);
  top: 50%;
  width: 10px;
  height: 1px;
  background: var(--oro);
}

/* --- I filtri ------------------------------------------------
   Si aprono sotto la barra, in linea: la griglia resta sotto gli
   occhi e si vede cambiare mentre si sceglie. Una tendina che
   copre i capi farebbe scegliere alla cieca.                      */

.filtri {
  background: var(--bianco-lino);
  border-bottom: 1px solid var(--filetto);
}

.filtri__inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-32) var(--s-48);
  align-items: start;
  padding-block: var(--s-32);
}

.filtro {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

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

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

.filtro__voce label {
  display: flex;
  align-items: center;
  gap: var(--s-8);
}

/* La pastiglia del colore. Quadrata come tutto il resto — il sito
   non ha un angolo arrotondato — e col filetto attorno, altrimenti
   il Bianco Ottico sul lino non avrebbe contorno. */
.filtro__tinta,
.tinta-punto {
  display: block;
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  background: var(--tinta);
  border: 1px solid var(--filetto-forte);
}

.filtri__piede {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-24);
  padding-top: var(--s-24);
  border-top: 1px solid var(--filetto);
}

.filtri__azzera {
  position: relative;
  font-family: var(--font-dato);
  font-size: var(--t-12);
  letter-spacing: var(--tracking-dato);
  color: var(--greige);
  cursor: pointer;
}

.filtri__azzera > span { position: relative; }

.filtri__azzera > span::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--t-medio) var(--ease);
}

.filtri__azzera:hover { color: var(--inchiostro); }
.filtri__azzera:hover > span::after,
.filtri__azzera:focus-visible > span::after { transform: scaleX(1); }

.filtri__chiudi { margin-left: auto; }

/* --- La griglia ---------------------------------------------- */

.listino__inner { padding-top: var(--s-64); }

/* --- Le categorie --------------------------------------------
   La pagina non è un mucchio di capi: è Polo, Girocollo, Lupetto e
   Giacche, nell'ordine in cui stanno a listino. Le ancore del menu
   — uomo.html#giacche — sono queste sezioni, quindi ci si arriva
   scorrendo invece che accendendo un filtro da soli.               */

.famiglia {
  scroll-margin-top: calc(var(--header-h-ridotto) + var(--s-24));
}

.famiglia + .famiglia { margin-top: var(--s-96); }

/* Una categoria rimasta senza capi se ne va con i suoi: un titolo
   che regge il vuoto è peggio del vuoto. */
.famiglia[data-fuori="sì"] { display: none; }

.famiglia__testa {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-24);
  padding-top: var(--s-16);
  margin-bottom: var(--s-32);
  /* Il bordo resta, ma trasparente: è lui a tenere l'altezza di 1px
     nel flusso. Il filetto che si vede lo disegna ::before, perché un
     bordo non si apre dal centro e uno pseudo sì. Senza questo
     doppione la testa salirebbe di un pixel. */
  border-top: 1px solid transparent;
}

/* Il filetto da 1px che si apre dal centro — il gesto unico del sito
   (SISTEMA.md §2), qui è la riga su cui la categoria poggia. A riposo
   sta aperto: la posa chiusa la accende js/rivela.js con data-anima,
   così senza JS la pagina ha tutte le sue righe. */
.famiglia__testa::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--filetto);
  transform: scaleX(1);
  transform-origin: center;
}

/* La maschera del titolo. Il padding sotto serve alle discendenti —
   la «g» di Giacche — che un overflow:hidden a filo di riga
   taglierebbe; il margine negativo lo restituisce al layout, e la
   linea di base del titolo resta quella di prima, allineata a
   «2 capi». */
.famiglia__titolo {
  overflow: hidden;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
  font-family: var(--font-testo);
  font-weight: 300;
  font-size: var(--t-32);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.famiglia__titolo > span { display: block; }

.famiglia__conta {
  flex: 0 0 auto;
  font-family: var(--font-dato);
  font-size: var(--t-12);
  letter-spacing: var(--tracking-dato);
  color: var(--greige);
  font-variant-numeric: tabular-nums;
}

/* --- La categoria che si scopre ------------------------------
   Tre tempi, in quest'ordine e non a caso: prima la riga, poi il
   nome che sale da sotto la riga, poi la conta. È il modo in cui si
   scrive un titolo su carta — si tira il filetto e ci si appoggia
   sopra la parola — ed è il motivo per cui il nome non sfuma ma
   scorre: sfumare è un effetto, salire da sotto una riga è un gesto
   che quella riga la usa.

   Le durate sono più lunghe del resto del sito (1100ms il filetto,
   900 il nome) perché qui non si sta rispondendo a un dito: si sta
   aprendo una pagina. Un gesto che risponde dev'essere rapido, un
   gesto che accoglie no.                                         */

.famiglia__testa[data-anima="sì"]::before {
  transform: scaleX(0);
  transition: transform 1100ms var(--ease);
}

.famiglia__testa[data-anima="sì"][data-visibile="sì"]::before {
  transform: scaleX(1);
}

/* 106% e non 100%: sotto la parola c'è il padding delle discendenti,
   e a 100% la punta della «g» resterebbe in vista. */
.famiglia__testa[data-anima="sì"] .famiglia__titolo > span {
  transform: translateY(106%);
  transition: transform 900ms var(--ease) 120ms;
}

.famiglia__testa[data-anima="sì"] .famiglia__conta {
  opacity: 0;
  transition: opacity 700ms var(--ease) 320ms;
}

.famiglia__testa[data-anima="sì"][data-visibile="sì"] .famiglia__titolo > span {
  transform: none;
}

.famiglia__testa[data-anima="sì"][data-visibile="sì"] .famiglia__conta {
  opacity: 1;
}

.griglia {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-64) var(--s-32);
}

/* Un capo escluso dai filtri esce dalla griglia: non si sbiadisce,
   se ne va. Un capo mezzo visibile è un capo che si prova a
   premere. */
.articolo[data-fuori="sì"] { display: none; }

/* --- La scheda ----------------------------------------------- */

.articolo {
  position: relative;
  display: grid;
  gap: var(--s-16);
  align-content: start;
  /* Ci si arriva da fuori — uomo.html#giacca-sailor — e sopra c'è
     l'header fisso: senza questo margine il capo finirebbe sotto. */
  scroll-margin-top: calc(var(--header-h-ridotto) + var(--s-32));
}

.articolo__scena { position: relative; }

/* Il fondo è quello dentro le fotografie: i tre capi che lo scatto non
   ce l'hanno ancora devono leggersi come la stessa superficie di quelli
   che ce l'hanno, non come un buco più chiaro nella stessa riga. */
.articolo__lastra {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  background: var(--fondo-scatto);
  border: 1px solid var(--filetto);
  overflow: hidden;
}

/* Tutti e due riempiono la lastra, senza margine attorno: il riquadro
   È la fotografia, non una cornice con dentro una foto più piccola.
   Per questo gli scatti vanno inquadrati 3:4 — le istruzioni per chi
   fotografa stanno in assets/prodotti/LEGGIMI.md. */
.articolo__scatto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--t-lento) var(--ease);
}

.articolo__scatto--indossato { opacity: 0; }

.articolo[data-indossato="sì"]:hover .articolo__scatto--fermo,
.articolo[data-indossato="sì"]:focus-within .articolo__scatto--fermo { opacity: 0; }

.articolo[data-indossato="sì"]:hover .articolo__scatto--indossato,
.articolo[data-indossato="sì"]:focus-within .articolo__scatto--indossato { opacity: 1; }

/* --- L'onda delle schede -------------------------------------
   I capi non ci sono già: arrivano. Salgono di 32px mentre entrano
   in vista, a scaglioni — prima la colonna di sinistra, poi le altre
   a 70ms l'una — così una riga di quattro capi si legge come una
   riga e non come quattro cose comparse insieme. Il ritardo lo
   scrive js/listino.js su ogni scheda, perché la colonna vera la
   sanno solo le posizioni sullo schermo: i filtri riordinano la
   griglia e un nth-child mentirebbe al primo filtro acceso.

   Una volta sola. Una scheda che rientra scorrendo all'indietro è
   una scheda che si è già vista, e rifarle fare l'ingresso sarebbe
   un effetto al posto di una risposta.

   La posa di partenza la accende lo script (data-anima sul listino):
   senza JS, o senza IntersectionObserver, non si nasconde niente e
   il catalogo si vede tutto. È la regola di js/rivela.js.        */

.listino[data-anima="sì"] .articolo {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 820ms var(--ease),
    transform 820ms var(--ease);
}

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

/* --- Il respiro della fotografia -----------------------------
   Mentre la scheda attraversa lo schermo il capo si muove dentro la
   sua lastra, piano, in senso contrario allo scorrimento: la lastra
   sale e la fotografia scende. Non è un ingresso che parte e
   finisce — è legato alla mano, continua, e finché la scheda è in
   vista la pagina risponde.

   Sta in CSS, senza un solo ascoltatore di `scroll`:
   `animation-timeline: view()` lega l'avanzamento alla traversata
   dell'elemento nello scorritore. Dove il browser non ce l'ha, il
   blocco non esiste e la fotografia entra e basta (vedi sotto): il
   sito non dipende da questo per essere leggibile.

   I conti del margine: scala 1,08 lascia il 4% di fotografia fuori
   dalla lastra per lato, e l'escursione è 2,5% — resta un 1,5% di
   sicurezza, quindi il bordo del capo non scopre mai il fondo. Su
   una lastra da 427px sono 21px di movimento in tutto: si vede, e
   non si nota. */

@keyframes respiro-scatto {
  from { transform: scale(1.08) translateY(-2.5%); }
  to   { transform: scale(1.08) translateY(2.5%); }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .articolo__scatto {
      animation: respiro-scatto linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}

/* Dove il respiro non c'è, la fotografia fa quello che fa nel resto
   del sito: entra allargata e si assesta. Le due cose non possono
   convivere sullo stesso elemento — un'animazione vince sempre su
   una transizione della stessa proprietà — quindi qui è o l'una o
   l'altra, mai il conflitto. */
@supports not (animation-timeline: view()) {
  .listino[data-anima="sì"] .articolo__scatto {
    transform: scale(1.04);
    transition:
      opacity var(--t-lento) var(--ease),
      transform 900ms var(--ease);
  }

  .listino[data-anima="sì"] .articolo[data-dentro="sì"] .articolo__scatto {
    transform: none;
  }
}

/* --- Il cuore ------------------------------------------------
   Lo stesso dei preferiti nell'header, con la stessa regola: da
   spento è un tratto, da acceso è pieno di rosso araldico. Niente
   pastiglia sotto: il sito non ha un angolo arrotondato.          */

.articolo__cuore {
  position: absolute;
  top: var(--s-8);
  right: var(--s-8);
  z-index: 2;
  display: grid;
  place-content: center;
  width: 40px;
  height: 40px;
  color: var(--inchiostro);
  cursor: pointer;
}

.articolo__cuore svg {
  width: 20px;
  height: 20px;
  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);
}

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

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

/* --- La didascalia ------------------------------------------- */

.articolo__didascalia {
  display: grid;
  justify-items: center;
  gap: var(--s-8);
  text-align: center;
}

.articolo__nome {
  position: relative;
  font-family: var(--font-testo);
  font-weight: 400;
  font-size: var(--t-20);
  line-height: 1.25;
  text-wrap: balance;
}

.articolo__nome::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--t-medio) var(--ease);
}

.articolo:hover .articolo__nome::after,
.articolo:focus-within .articolo__nome::after { transform: scaleX(1); }

/* Il collegamento prende tutta la riga del nome, non le sole lettere:
   il nome è centrato e chi punta poco a destra o poco a sinistra
   voleva comunque quel capo.

   Non si distende oltre. Il nome è position:relative per via del
   filetto, quindi questo ::after si ancora al nome e non alla scheda:
   provare a coprire anche la fotografia da qui non funziona ed è
   esattamente il difetto che la teneva inerte. La fotografia ha la sua
   .articolo__porta, qui sotto. */
.articolo__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* --- La porta sulla fotografia -------------------------------
   Lo stesso indirizzo del nome, ma esiste solo per il cursore e per
   il dito: tabindex="-1" e aria-hidden lo tolgono dal giro del
   tabulatore e dalla lettura a voce, così la fermata per capo resta
   una sola. Il cuore e le frecce hanno z-index 2 e stanno sopra.   */

.articolo__porta {
  display: block;
  cursor: pointer;
}

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

.articolo__materia {
  font-family: var(--font-testo);
  font-size: var(--t-16);
  line-height: 1.4;
  color: var(--rosso);
}

/* --- Il prezzo, che si scopre al passaggio -------------------
   A riposo la scheda dice il capo e la materia; il prezzo arriva
   quando ci si avvicina. È il modo in cui una maison presenta uno
   scaffale — prima la cosa, poi quanto costa.

   Tre cose sono volute e non si cambiano:

   · si nasconde con l'OPACITÀ, non con display né visibility. Il
     prezzo resta nell'albero di accessibilità, quindi chi legge la
     pagina a voce lo sente sempre. Nascondere davvero il prezzo a
     chi non ha un mouse sarebbe un difetto, non un effetto;
   · lo SPAZIO resta occupato, così la didascalia non si accorcia e
     la griglia non sobbalza quando il cursore la attraversa;
   · dove il passaggio del cursore NON ESISTE — telefoni, tavolette —
     il prezzo si vede sempre. È l'ultima regola del blocco.        */

.articolo__prezzo {
  font-family: var(--font-dato);
  font-size: var(--t-13);
  letter-spacing: var(--tracking-dato);
  color: color-mix(in srgb, var(--inchiostro) 82%, transparent);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity var(--t-medio) var(--ease);
}

.articolo:hover .articolo__prezzo,
.articolo:focus-within .articolo__prezzo { opacity: 1; }

@media (hover: none) {
  .articolo__prezzo { opacity: 1; }
}

/* --- Le frecce del colore ------------------------------------
   Cambiano la tinta della lastra senza scendere ai quadretti, come
   nel riferimento. Ci sono solo dove i colori fotografati sono
   almeno due: lo decide il generatore guardando quali file trova,
   non il CSS. Compaiono al passaggio, restano raggiungibili col
   tabulatore, e su chi non ha un cursore stanno sempre in vista.   */

.articolo__freccia {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  opacity: 0;
}

.articolo__freccia svg { width: 15px; height: 15px; }

.articolo__freccia[data-verso="prec"] { left: 0; }
.articolo__freccia[data-verso="succ"] { right: 0; }

.articolo:hover .articolo__freccia,
.articolo:focus-within .articolo__freccia { opacity: 1; }

@media (hover: none) {
  .articolo__freccia { opacity: 1; }
}

.articolo__tinte {
  display: flex;
  gap: 6px;
  margin-top: var(--s-8);
}

/* --- I colori premibili --------------------------------------
   Quando di un capo esistono gli scatti colore per colore, i
   quadretti diventano bottoni e la lastra sopra cambia. Finché non
   esistono restano segni: un bottone che non cambia niente è un
   bottone che tradisce, e a deciderlo è il generatore, non il CSS.

   Il quadretto resta di 12px — è un segno, non un bersaglio — ma il
   bersaglio vero è 24px, disteso oltre il disegno. Per questo qui la
   fila si allarga: due bersagli che si accavallano premono il
   colore sbagliato.                                                */

.articolo__tinte:has(.tinta-punto--scelta) { gap: 12px; }

.tinta-punto--scelta {
  position: relative;
  padding: 0;
  cursor: pointer;
  transition: outline-color var(--t-rapido) var(--ease);
  outline: 1px solid transparent;
  outline-offset: 2px;
}

.tinta-punto--scelta::after {
  content: "";
  position: absolute;
  inset: -6px;
}

/* Il colore scelto porta l'anello d'oro: sul chiaro l'oro dà 3,8:1,
   sopra la soglia dei segni, ed è già il filo di questo sito. */
.tinta-punto--scelta[aria-pressed="true"] { outline-color: var(--oro); }

.tinta-punto--scelta:hover { outline-color: var(--filetto-forte); }
.tinta-punto--scelta[aria-pressed="true"]:hover { outline-color: var(--oro); }

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

/* --- Quando non resta niente --------------------------------- */

.listino__vuoto {
  padding-block: var(--s-96);
  text-align: center;
  font-size: var(--t-20);
  color: var(--greige);
}

.listino__ripristina {
  position: relative;
  color: var(--rosso);
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--oro);
}

/* --- Larghezze minori ---------------------------------------- */

@media (max-width: 1200px) {
  .griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .listino { padding-top: calc(var(--header-h) + var(--s-48)); }
  .listino__testa { padding-bottom: var(--s-48); }
  .listino__inner { padding-top: var(--s-48); }
  .griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-48) var(--s-24); }
  .filtri__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  /* Il conteggio va sulla sua riga e le due azioni si dividono la
     barra a metà: in 343px non stanno in fila. */
  .barra__inner {
    grid-template-columns: 1fr 1fr;
    gap: 0;
    min-height: 0;
  }

  .barra__conta {
    grid-column: 1 / -1;
    justify-self: center;
    padding-top: var(--s-16);
  }

  .barra__voce--filtri { justify-self: center; }

  /* Il filetto che divide le due azioni cade sul confine vero fra le
     due metà della barra, non a lato del bottone: per questo la
     colonna si distende e il bottone si centra dentro. */
  .ordina {
    justify-self: stretch;
    display: flex;
    justify-content: center;
    border-left: 1px solid var(--filetto);
  }

  .ordina__menu { right: auto; left: 50%; transform: translateX(-50%); }

  .filtri__inner { grid-template-columns: minmax(0, 1fr); }

  .filtri__piede {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: var(--s-16);
  }

  .filtri__chiudi { margin-left: 0; }
  .filtri__azzera { justify-self: center; }

  .griglia { gap: var(--s-32) var(--s-16); }
  .articolo { gap: var(--s-8); }
  .articolo__nome { font-size: var(--t-16); }
  .articolo__materia { font-size: var(--t-13); }
  /* Il bersaglio resta 44px anche se il disegno rimpicciolisce: è la
     misura sotto la quale un dito sbaglia. */
  .articolo__cuore { width: 44px; height: 44px; top: 0; right: 0; }
  .articolo__cuore svg { width: 18px; height: 18px; }
}

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

@media (prefers-reduced-motion: reduce) {
  .articolo__scatto,
  .articolo__prezzo,
  .articolo__freccia,
  .barra__chevron { transition: none; }

  /* Chi ha chiesto meno movimento non deve aspettare un movimento per
     vedere il catalogo: tutto è già al suo posto, subito. Il respiro
     della fotografia non nasce nemmeno — sta dentro un
     `prefers-reduced-motion: no-preference`. */
  .listino[data-anima="sì"] .articolo,
  .famiglia__testa[data-anima="sì"] .famiglia__titolo > span,
  .famiglia__testa[data-anima="sì"] .famiglia__conta,
  .famiglia__testa[data-anima="sì"]::before { transition: none; }

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

  .listino[data-anima="sì"] .articolo__scatto { transform: none; }
  .famiglia__testa[data-anima="sì"] .famiglia__titolo > span { transform: none; }
  .famiglia__testa[data-anima="sì"] .famiglia__conta { opacity: 1; }
  .famiglia__testa[data-anima="sì"]::before { transform: scaleX(1); }
}