/* ============================================================
   Codex — Tema "Moderno" (galleria calda, oro misurato)
   Design system della nuova UI: token, base, componenti.
   Palette chiara: avorio #f7f4ee · inchiostro #1d1a14 · oro #a67c1b · verderame #3d6b5e
   Palette scura:  fondo #171410 · superficie #211d17 · avorio #ece5d6 · oro #d3a648
   ============================================================ */

/* ====== TOKEN ====== */
:root{
  --fondo:#f7f4ee; --superficie:#fffdf9; --bordo:#e4dccb;
  --testo:#1d1a14; --testo-2:#6b6353;
  --oro:#a67c1b; --oro-chiaro:#d9b85c; --oro-t:rgba(166,124,27,.12);
  /* colore del testo SOPRA l'oro: nel tema scuro l'oro e' chiaro e il bianco
     sopra scende a 2,3:1 di contrasto — serve inchiostro, non bianco */
  --su-oro:#fff;
  --verde:#3d6b5e; --rosso:#b0472f;
  --ombra:0 1px 2px rgba(29,26,20,.05),0 12px 32px -12px rgba(29,26,20,.14);
  --serif:Georgia,"Times New Roman",serif;
  --sans:"Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --raggio:12px; --raggio-lg:16px;
  --transizione:.18s ease;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --fondo:#171410; --superficie:#211d17; --bordo:#383226;
  --testo:#ece5d6; --testo-2:#a89c85;
  --oro:#d3a648; --oro-chiaro:#e6c675; --oro-t:rgba(211,166,72,.14);
  --su-oro:#1d1a14;
  --verde:#7fb3a2; --rosso:#d4795f;
  --ombra:0 1px 2px rgba(0,0,0,.4),0 14px 34px -12px rgba(0,0,0,.5);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --fondo:#171410; --superficie:#211d17; --bordo:#383226;
  --testo:#ece5d6; --testo-2:#a89c85;
  --oro:#d3a648; --oro-chiaro:#e6c675; --oro-t:rgba(211,166,72,.14);
  --su-oro:#1d1a14;
  --verde:#7fb3a2; --rosso:#d4795f;
  --ombra:0 1px 2px rgba(0,0,0,.4),0 14px 34px -12px rgba(0,0,0,.5);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --fondo:#f7f4ee; --superficie:#fffdf9; --bordo:#e4dccb;
  --testo:#1d1a14; --testo-2:#6b6353;
  --oro:#a67c1b; --oro-chiaro:#d9b85c; --oro-t:rgba(166,124,27,.12);
  --su-oro:#fff;
  --verde:#3d6b5e; --rosso:#b0472f;
  --ombra:0 1px 2px rgba(29,26,20,.05),0 12px 32px -12px rgba(29,26,20,.14);
  color-scheme:light;
}

/* ====== BASE ====== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--fondo);color:var(--testo);
  font-family:var(--sans);font-size:15.5px;line-height:1.6;
  min-height:100vh;display:flex;flex-direction:column;
}
main{flex:1}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px;width:100%}
/* Le barre di testata e pie' di pagina non seguono la larghezza del contenuto: restano
   sempre della stessa misura, la piu' larga che il sito usa (quella del catalogo).
   Prima il logo e il menu saltavano da 1120 a 1780 passando da /serie a /catalog, e in
   navigazione si vedeva la cornice muoversi sotto i piedi. */
.sito-header>.wrap,.sito-footer>.wrap{max-width:1780px}
.wrap-stretto{max-width:520px;margin:0 auto;padding:0 24px;width:100%}

h1,h2,h3{margin:0}
h1,h2{font-family:var(--serif);font-weight:400}
p{margin:0 0 .6em}
a{color:var(--oro);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
::selection{background:var(--oro-t)}

/* Titoli di pagina */
.titolo-pagina{font-size:clamp(28px,4vw,38px);line-height:1.15;margin:34px 0 8px;text-wrap:balance}
.sottotitolo{color:var(--testo-2);font-size:16px;max-width:60ch;margin-bottom:26px}
.occhiello{
  font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:var(--oro);
  font-weight:600;margin:0 0 14px;
}

/* ====== HEADER / NAV ====== */
.sito-header{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--fondo) 82%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--bordo);
}
.sito-header .wrap{display:flex;align-items:center;gap:26px;padding:14px 24px}
.logo{
  font-family:var(--serif);font-size:23px;letter-spacing:.5px;color:var(--testo);
  display:flex;align-items:center;gap:10px;text-decoration:none;
}
.logo:hover{text-decoration:none}
/* Il segno del marchio: una scheda telefonica con la sua banda magnetica.
   La banda e' un gradiente a scalini (non una sfumatura): a 17px di altezza una
   sfumatura morbida diventerebbe una macchia sporca, un bordo netto resta leggibile. */
.logo i{
  width:26px;height:17px;border-radius:3px;display:inline-block;position:relative;
  background:
    linear-gradient(to bottom,
      transparent 0 22%,
      color-mix(in srgb, var(--testo) 62%, transparent) 22% 46%,
      transparent 46% 100%),
    linear-gradient(135deg,var(--oro),var(--oro-chiaro));
  clip-path:polygon(0 0,100% 0,100% 100%,18% 100%,0 60%);
}
.nav-principale{display:flex;gap:24px;margin-left:auto;align-items:center}
.nav-principale a{color:var(--testo-2);font-size:14.5px;transition:color var(--transizione)}
.nav-principale a:hover{color:var(--testo);text-decoration:none}
.nav-principale a.attiva{color:var(--testo);box-shadow:0 2px 0 var(--oro)}

/* Avatar + menu utente */
.avatar{
  width:34px;height:34px;border-radius:50%;background:var(--oro-t);color:var(--oro);
  display:grid;place-items:center;font-weight:600;font-size:14px;border:1px solid var(--oro);
  cursor:pointer;flex:none;
}
.menu-utente{position:relative}
.menu-utente>button{background:none;border:none;padding:0;cursor:pointer}
.tendina{
  position:absolute;right:0;top:calc(100% + 10px);min-width:210px;
  background:var(--superficie);border:1px solid var(--bordo);border-radius:var(--raggio);
  box-shadow:var(--ombra);padding:8px;display:none;z-index:101;
}
.tendina.aperta{display:block}
.tendina a,.tendina button{
  display:block;width:100%;text-align:left;padding:8px 12px;border-radius:8px;
  color:var(--testo);font-size:14px;background:none;border:none;cursor:pointer;
  font-family:inherit;
}
.tendina a:hover,.tendina button:hover{background:var(--oro-t);text-decoration:none}
.tendina hr{border:none;border-top:1px solid var(--bordo);margin:6px 4px}
.tendina .voce-muta{color:var(--testo-2);font-size:12px;padding:4px 12px}

/* Toggle tema */
.tema-toggle{
  background:none;border:1px solid var(--bordo);border-radius:99px;cursor:pointer;
  width:34px;height:34px;display:grid;place-items:center;color:var(--testo-2);
  font-size:15px;transition:color var(--transizione),border-color var(--transizione);flex:none;
}
.tema-toggle:hover{color:var(--oro);border-color:var(--oro)}

/* Hamburger mobile */
.nav-burger{
  display:none;background:none;border:1px solid var(--bordo);border-radius:8px;
  cursor:pointer;padding:6px 9px;color:var(--testo);font-size:17px;line-height:1;
}

/* ====== BOTTONI ====== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:none;border-radius:var(--raggio);padding:12px 24px;font-size:15px;font-weight:600;
  background:var(--testo);color:var(--fondo);cursor:pointer;font-family:inherit;
  transition:opacity var(--transizione);text-decoration:none;
}
.btn:hover{opacity:.85;text-decoration:none;color:var(--fondo)}
.btn:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-oro{background:var(--oro);color:var(--su-oro,#fff)}
.btn-oro:hover{color:var(--su-oro,#fff)}
.btn-contorno{
  background:none;border:1px solid var(--bordo);color:var(--testo);
}
.btn-contorno:hover{opacity:1;border-color:var(--oro);color:var(--oro)}
.btn-piccolo{padding:8px 16px;font-size:13.5px;border-radius:10px}
.btn-blocco{width:100%}

/* I due inviti del pannello «collezione vuota». Affiancati stanno meglio, ma con il
   riempimento normale sommano 365px in un pannello che su un telefono ne offre 343: vanno
   a capo per una trentina di pixel, e sembra una scelta invece che un incidente. Sotto i
   560px si stringe il riempimento quanto basta e si lascia che si dividano la riga.
   Il flex-wrap resta: su un telefono davvero stretto tornano incolonnati, che e' meglio
   di due bottoni schiacciati. */
.cdx-vuoto-azioni{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:560px){
  .cdx-vuoto-azioni .btn{flex:1 1 auto;white-space:nowrap;padding:12px 12px;font-size:14px}
}
.btn-pericolo{background:var(--rosso);color:var(--su-oro,#fff)}
.btn-pericolo:hover{color:var(--su-oro,#fff)}

/* ====== FORM ====== */
.campo{margin-bottom:18px}
.campo label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px}
.campo .aiuto{font-size:12.5px;color:var(--testo-2);margin-top:5px}
input[type="text"],input[type="search"],input[type="email"],input[type="password"],
input[type="number"],input[type="date"],select,textarea{
  width:100%;padding:11px 14px;font-size:15px;font-family:inherit;
  background:var(--superficie);color:var(--testo);
  border:1px solid var(--bordo);border-radius:var(--raggio);
  transition:border-color var(--transizione);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--oro);outline-offset:-2px;border-color:var(--oro)}
input::placeholder,textarea::placeholder{color:var(--testo-2);opacity:.7}
input[type="checkbox"],input[type="radio"]{accent-color:var(--oro);width:16px;height:16px}
.campo-inline{display:flex;align-items:center;gap:9px;font-size:14px}
.campo-inline label{margin:0;font-weight:400}

/* Barra di ricerca composta (input + bottone) */
.cerca{display:flex;box-shadow:var(--ombra);border-radius:var(--raggio);overflow:hidden}
.cerca input{border-right:none;border-radius:var(--raggio) 0 0 var(--raggio);padding:14px 18px}
.cerca .btn{border-radius:0 var(--raggio) var(--raggio) 0;padding:14px 24px}

/* Meter robustezza password */
.pw-meter{height:6px;border-radius:99px;background:var(--bordo);overflow:hidden;margin-top:8px}
.pw-meter i{display:block;height:100%;border-radius:99px;width:0;transition:width .25s,background .25s}
.pw-meter[data-forza="1"] i{width:25%;background:var(--rosso)}
.pw-meter[data-forza="2"] i{width:50%;background:#c98a2e}
.pw-meter[data-forza="3"] i{width:75%;background:var(--oro)}
.pw-meter[data-forza="4"] i{width:100%;background:var(--verde)}

/* ====== PANNELLI / CARD ====== */
.pannello{
  background:var(--superficie);border:1px solid var(--bordo);border-radius:var(--raggio-lg);
  box-shadow:var(--ombra);padding:26px 28px;
}
.pannello-piatto{box-shadow:none}

/* Tile del catalogo */
.griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px}
.tile{
  background:var(--superficie);border:1px solid var(--bordo);border-radius:var(--raggio-lg);
  overflow:hidden;box-shadow:var(--ombra);position:relative;
  transition:transform var(--transizione),box-shadow var(--transizione);
}
.tile:hover{transform:translateY(-4px)}
.tile>a{color:inherit;display:block}
.tile>a:hover{text-decoration:none}
.tile .img{
  aspect-ratio:1.6;display:flex;align-items:flex-end;padding:12px 14px;
  background:var(--oro-t);position:relative;overflow:hidden;
}
.tile .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile .corpo{padding:15px 18px 17px}
.tile h3{font-family:var(--serif);font-weight:400;font-size:17.5px;line-height:1.25}
.tile .meta{font-size:13px;color:var(--testo-2);margin:4px 0 0}
.trend-su{color:var(--verde);font-weight:600}
.trend-giu{color:var(--rosso);font-weight:600}

/* Badge stato collezione sul tile */
.badge-posseduta{
  position:absolute;top:12px;right:12px;z-index:1;
  font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;
  border-radius:99px;padding:3px 10px;
  background:var(--superficie);color:var(--oro);border:1px solid var(--oro);
}

/* Aggiunta rapida: spunta di collezione sul tile (fast input) */
.tile.mia{border-color:color-mix(in srgb,var(--oro) 55%,var(--bordo))}
.fi-spunta{
  position:absolute;top:10px;right:10px;z-index:2;
  width:32px;height:32px;border-radius:99px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;line-height:0;
  background:color-mix(in srgb,var(--superficie) 88%,transparent);
  color:var(--testo-2);border:1px dashed var(--bordo);
  backdrop-filter:blur(3px);
  transition:background .15s,color .15s,border-color .15s,transform .1s;
}
.fi-spunta svg{width:17px;height:17px}
.fi-spunta .fi-si{display:none}
.fi-spunta:hover{color:var(--oro);border-color:var(--oro);border-style:solid}
.fi-spunta:active{transform:scale(.9)}
.fi-spunta:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
.fi-spunta[aria-pressed="true"]{
  background:var(--oro);color:var(--su-oro,#fff);border:1px solid var(--oro);border-style:solid;
}
.fi-spunta[aria-pressed="true"] .fi-si{display:block}
.fi-spunta[aria-pressed="true"] .fi-no{display:none}
.fi-spunta[aria-busy="true"]{opacity:.55;pointer-events:none}
/* su touch la spunta resta sempre leggibile: non c'e' hover a rivelarla */
@media (hover:hover){
  .tile .fi-spunta[aria-pressed="false"]{opacity:.72}
  .tile:hover .fi-spunta,.tile .fi-spunta:focus-visible{opacity:1}
}

/* Comandi in blocco ("possiedo tutta la serie") */
.fi-azioni{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 14px}
.fi-azioni .muto{font-size:12.5px}

/* Conferma delle operazioni in blocco */
.fi-dialogo{
  border:1px solid var(--bordo);border-radius:16px;padding:24px 26px;
  max-width:min(92vw,460px);background:var(--superficie);color:var(--testo);
  box-shadow:0 24px 60px rgba(0,0,0,.32);
}
.fi-dialogo::backdrop{background:rgba(0,0,0,.5);backdrop-filter:blur(2px)}
.fi-dialogo h3{font-family:var(--serif);font-size:21px;margin:0 0 10px}
.fi-dialogo p{font-size:14px;line-height:1.55;margin:0 0 10px}
.fi-dialogo .fi-d-nota{font-size:12.5px}
.fi-d-azioni{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
@media (max-width:420px){
  .fi-dialogo{padding:20px 18px}
  .fi-d-azioni{flex-direction:column-reverse}
  .fi-d-azioni .btn{width:100%}
}

/* Pannello rapido: conservazione senza aprire la scheda */
.fi-matita{
  position:absolute;top:10px;right:48px;z-index:2;
  width:32px;height:32px;border-radius:99px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;line-height:0;
  background:color-mix(in srgb,var(--superficie) 88%,transparent);
  color:var(--testo-2);border:1px solid var(--bordo);
  backdrop-filter:blur(3px);
  transition:background .15s,color .15s,border-color .15s,transform .1s;
}
.fi-matita svg{width:15px;height:15px}
.fi-matita:hover{color:var(--oro);border-color:var(--oro)}
.fi-matita:active{transform:scale(.9)}
.fi-matita:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
/* compare solo sulle schede possedute: sulle altre non avrebbe niente da modificare */
.tile:not(.mia) .fi-matita{display:none}
@media (hover:hover){
  .tile .fi-matita{opacity:0}
  .tile:hover .fi-matita,.tile .fi-matita:focus-visible{opacity:1}
}

.fi-pannello{max-width:min(92vw,400px)}
.fi-p-riga{
  display:flex;align-items:center;gap:12px;
  padding:11px 0;border-top:1px solid var(--bordo);
}
.fi-p-riga label{display:flex;align-items:center;gap:8px;min-width:96px;cursor:pointer}
.fi-p-riga select{
  flex:1;padding:7px 10px;border-radius:9px;font:inherit;font-size:13.5px;
  background:var(--fondo);color:var(--testo);border:1px solid var(--bordo);
}
.fi-p-riga input[type=number]{
  width:62px;padding:7px 8px;border-radius:9px;font:inherit;font-size:13.5px;text-align:center;
  background:var(--fondo);color:var(--testo);border:1px solid var(--bordo);
}
.fi-p-riga input[type=number]:disabled{opacity:.4}
.fi-p-doppioni{font-size:12.5px;margin:10px 0 0;color:var(--oro)}
.fi-p-scambio{
  display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13.5px;
  padding:12px 0;border-top:1px solid var(--bordo);border-bottom:1px solid var(--bordo);
  margin-bottom:12px;
}
.fi-pannello input[type=checkbox]{width:16px;height:16px;accent-color:var(--oro);margin:0}

/* Riquadro di conferma per la cancellazione dell'account */
.canc-dialogo{
  border:1px solid var(--bordo);border-radius:16px;padding:24px 26px;
  max-width:min(94vw,480px);background:var(--superficie);color:var(--testo);
  box-shadow:0 24px 60px rgba(0,0,0,.34);
}
.canc-dialogo::backdrop{background:rgba(0,0,0,.55);backdrop-filter:blur(2px)}
.canc-dialogo h3{font-family:var(--serif);font-size:21px;margin:0 0 10px}
.canc-dialogo .canc-p{font-size:14px;line-height:1.55;margin:0 0 10px}
.canc-dialogo .canc-ul{margin:0 0 12px;padding-left:20px}
.canc-dialogo .canc-ul li{font-size:13.5px;line-height:1.7}
.canc-dialogo .canc-nota{
  font-size:12.5px;line-height:1.5;color:var(--testo-2);margin:0 0 8px;
}
.canc-dialogo .canc-azioni{display:flex;gap:10px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.canc-dialogo .canc-esito{font-size:13px;color:var(--rosso,#b3341f);margin-top:10px}
@media (max-width:480px){
  .canc-dialogo{padding:20px 18px}
  .canc-dialogo .canc-azioni{flex-direction:column-reverse}
  .canc-dialogo .canc-azioni .btn{width:100%}
}

/* Ricerca nel testo stampato sulle schede (OCR) */
.ocr-blocco{
  margin:26px 0 8px;padding:18px 20px;border:1px solid var(--bordo);
  border-radius:14px;background:var(--oro-t);
}
.ocr-testata h3{font-family:var(--serif);font-size:19px;margin:0 0 4px}
.ocr-testata .muto{font-size:13px;margin:0}
.ocr-griglia{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px;margin-top:14px;
}
.ocr-scheda{
  display:flex;flex-direction:column;gap:5px;text-decoration:none;color:inherit;
  padding:8px;border-radius:10px;border:1px solid transparent;transition:border-color .15s,background .15s;
}
.ocr-scheda:hover{border-color:var(--oro);background:var(--superficie)}
.ocr-scheda img{width:100%;aspect-ratio:1.6;object-fit:contain;border-radius:7px;background:var(--superficie)}
.ocr-tit{font-size:12.5px;line-height:1.3;font-weight:500;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ocr-cod{font-family:ui-monospace,monospace;font-size:11px;color:var(--testo-2)}
.ocr-vuoto{background:transparent}
.ocr-vuoto .muto{font-size:13px;margin:0}

/* Riscontro delle operazioni rapide */
.fi-avviso{
  position:fixed;left:50%;bottom:22px;transform:translate(-50%,14px);z-index:9999;
  max-width:min(92vw,420px);padding:10px 16px;border-radius:99px;
  background:var(--testo);color:var(--fondo);
  font-size:13.5px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.28);
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;
}
.fi-avviso.err{background:var(--rosso);color:var(--su-oro,#fff)}
/* errore mostrato DENTRO un <dialog> (il toast finirebbe dietro al top layer) */
.fi-p-errore{color:var(--rosso);font-size:13px;font-weight:600;margin:8px 0 0}
.fi-avviso.visibile{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){
  .fi-spunta,.fi-avviso{transition:none}
}

/* Pillole / etichette generiche */
.pillola{
  display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
  border-radius:99px;padding:3px 11px;background:var(--oro-t);color:var(--oro);
}
.pillola-neutra{background:var(--bordo);color:var(--testo-2)}
.pillola-verde{background:color-mix(in srgb,var(--verde) 14%,transparent);color:var(--verde)}
.pillola-rossa{background:color-mix(in srgb,var(--rosso) 14%,transparent);color:var(--rosso)}

/* ====== SEZIONI ====== */
section{padding:44px 0 8px}
.testata{display:flex;align-items:baseline;gap:18px;margin-bottom:22px}
.testata h2{font-size:26px}
.testata .azione{margin-left:auto;font-size:14px;white-space:nowrap}

/* Barre di progresso serie */
.barra{height:7px;border-radius:99px;background:var(--bordo);overflow:hidden}
.barra i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--oro),var(--oro-chiaro))}

/* KPI */
.kpi small{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--testo-2)}
.kpi b{font-family:var(--serif);font-size:30px;font-weight:400;display:block;font-variant-numeric:tabular-nums}

/* ====== TABELLE ====== */
.tabella-scroll{overflow-x:auto}
table.tabella{width:100%;border-collapse:collapse;font-size:14px}
.tabella th{
  text-align:left;font-size:12px;letter-spacing:1px;text-transform:uppercase;
  color:var(--testo-2);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--bordo);
}
.tabella td{padding:10px 12px;border-bottom:1px solid var(--bordo)}
.tabella tr:last-child td{border-bottom:none}
.tabella tbody tr:hover{background:var(--oro-t)}

/* ====== AVVISI ====== */
.avviso{
  border:1px solid var(--bordo);border-left:3px solid var(--oro);
  background:var(--superficie);border-radius:var(--raggio);
  padding:13px 17px;font-size:14px;margin:0 0 18px;
}
.avviso-ok{border-left-color:var(--verde)}
.avviso-errore{border-left-color:var(--rosso)}

/* La proposta di cercare con una foto quando il catalogo non ha trovato niente. Sta dentro
   l'avviso, staccata da una riga: e' un'offerta, non un errore in piu'. */
.cat-vuoto-foto{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;
  margin-top:11px;padding-top:11px;border-top:1px solid var(--bordo);
  font-size:13.5px;color:var(--testo-2);
}

/* «Forse cercavi». Sta SOPRA la proposta della foto e senza riga di separazione: e' la
   continuazione della frase «Nessuna scheda trovata», non un blocco a se'. Il termine e'
   un collegamento vero perche' deve sembrare cliccabile senza doverlo spiegare. */
.cat-forse{
  margin-top:8px;font-size:14.5px;color:var(--testo-2);
  display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;justify-content:center;
}
.cat-forse a{color:var(--oro);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.cat-forse a:hover{text-decoration:none}
.cat-forse-n{font-size:13px;color:var(--testo-2);opacity:.8}

/* ====== FOOTER ====== */
.sito-footer{border-top:1px solid var(--bordo);color:var(--testo-2);font-size:13px;margin-top:56px}
.sito-footer .wrap{padding:22px 24px;display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.sito-footer a{color:inherit}
.sito-footer a:hover{color:var(--testo)}
/* Su telefono il footer sta su UNA riga: corpo e respiri ridotti quanto basta.
   Misurato a 360/390/414px con le cinque voci attuali; se se ne aggiunge una,
   rimisurare prima di fidarsi. */
@media (max-width:520px){
  .sito-footer .wrap{gap:8px 10px;padding:18px 12px;font-size:11.5px;justify-content:space-between}
}

/* ====== DIALOG ====== */
dialog.cdx-dialog{
  border:1px solid var(--bordo);border-radius:var(--raggio-lg);box-shadow:var(--ombra);
  background:var(--superficie);color:var(--testo);padding:0;max-width:min(92vw,440px);width:100%;
}
dialog.cdx-dialog::backdrop{background:rgba(20,14,6,.45);backdrop-filter:blur(2px)}
.cdx-dialog-testa{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--bordo)}
.cdx-dialog-testa h3{font-size:19px}
.cdx-dialog-x{background:none;border:none;font-size:22px;line-height:1;cursor:pointer;color:var(--testo-2);padding:2px 6px}
.cdx-dialog-x:hover{color:var(--testo)}
.cdx-dialog-corpo{padding:18px 20px}
.cdx-dialog-piede{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--bordo)}

/* ====== PAGINAZIONE ====== */
.paginazione{display:flex;list-style:none;margin:0;padding:0;gap:4px}
.paginazione a{
  display:grid;place-items:center;min-width:32px;height:32px;padding:0 8px;
  border:1px solid var(--bordo);border-radius:9px;color:var(--testo);font-size:13.5px;
  font-variant-numeric:tabular-nums;
}
.paginazione a:hover{border-color:var(--oro);color:var(--oro);text-decoration:none}
.paginazione .active a{background:var(--oro);border-color:var(--oro);color:var(--su-oro,#fff);pointer-events:none}
.paginazione .disabled a{opacity:.4;pointer-events:none}

/* ====== COMPAT (classi usate dai JS condivisi con la vecchia UI) ====== */
.d-none{display:none!important}
/* Spinner di caricamento (classi usate dai JS condivisi: contatti, ecc.).
   Il tema nuovo non include Bootstrap, quindi lo definiamo qui. */
.spinner-border{
  display:inline-block;width:1.1em;height:1.1em;vertical-align:-.15em;
  border:.16em solid currentColor;border-right-color:transparent;border-radius:50%;
  animation:cdx-spin .7s linear infinite;
}
.spinner-border-sm{width:.9em;height:.9em;border-width:.14em}
@keyframes cdx-spin{to{transform:rotate(360deg)}}
.alert{
  border:1px solid var(--bordo);border-left:3px solid var(--oro);
  background:var(--superficie);border-radius:var(--raggio);
  padding:13px 17px;font-size:14px;margin:14px 0;
}
.alert-danger{border-left-color:var(--rosso);color:var(--rosso)}
.alert-success{border-left-color:var(--verde);color:var(--verde)}
/* il colore resta sul bordo; il TESTO usa l'inchiostro del tema: interi paragrafi
   in ambra su avorio stavano a 2,9:1 di contrasto nel tema chiaro */
.alert-warning{border-left-color:#c98a2e;color:var(--testo)}
.alert-info{border-left-color:var(--oro);color:var(--testo)}
/* Avviso «vai a guardare la posta» — registrazione fatta, recupero chiesto, account non
   ancora attivo. E' un riquadro in evidenza e non una riga di testo perche' sostituisce
   proprio una riga di testo che non veniva letta: chi si registrava leggeva «controlla la
   tua email» di sfuggita, non trovava niente in arrivo e concludeva che il sito fosse
   rotto. Il fondo e' la velatura d'oro, cosi' stacca dal pannello che lo contiene. */
.avviso-posta{
  border:1px solid var(--bordo);border-left:3px solid var(--oro);
  background:var(--oro-t);border-radius:var(--raggio);
  padding:18px 20px;margin:16px 0;
}
.avviso-posta[hidden]{display:none}
.avviso-posta .ap-testa{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.avviso-posta .ap-testa svg{flex:none;color:var(--oro)}
.avviso-posta .ap-titolo{font-family:var(--serif);font-size:18px;line-height:1.2}
.avviso-posta p{font-size:14px;line-height:1.55;margin:0 0 10px}
.avviso-posta p:last-child{margin-bottom:0}
/* `anywhere` e non `break-all`: spezza solo quando serve davvero e preferisce i punti
   naturali, cosi' un indirizzo lungo non si taglia a meta' di una parola se piu' avanti
   c'e' una chiocciola o un punto dove andare a capo. */
.avviso-posta .ap-indirizzo{font-family:var(--mono);font-size:13px;overflow-wrap:anywhere}
/* Il consiglio sullo spam sta in un riquadro suo: e' la cosa che serve davvero a chi
   l'email non la trova, e in mezzo agli altri paragrafi si perdeva. */
.avviso-posta .ap-spam{
  background:var(--superficie);border:1px dashed var(--oro);
  border-radius:var(--raggio);padding:12px 14px;margin-top:14px;
}
.avviso-posta .ap-azioni{margin-top:14px}
.avviso-posta .ap-esito{font-size:13.5px;margin-top:10px}
.avviso-posta .ap-esito.ok{color:var(--verde)}
.avviso-posta .ap-esito.ko{color:var(--rosso)}

.invalid-feedback{display:none;font-size:12.5px;color:var(--rosso);margin-top:5px}
.was-validated input:invalid,.was-validated select:invalid{border-color:var(--rosso)}
.was-validated input:invalid~.invalid-feedback,
.was-validated select:invalid~.invalid-feedback,
.was-validated .form-check-input:invalid~.invalid-feedback{display:block}
.progress{height:6px;border-radius:99px;background:var(--bordo);overflow:hidden;margin-top:8px}
.progress-bar{display:block;height:100%;border-radius:99px;background:var(--oro);transition:width .25s,background-color .25s}
.progress-bar.bg-danger{background:var(--rosso)}
.progress-bar.bg-warning{background:#c98a2e}
.progress-bar.bg-info{background:var(--oro)}
.progress-bar.bg-success{background:var(--verde)}
.toggle-password{
  position:absolute;top:36px;right:12px;cursor:pointer;color:var(--testo-2);
  width:20px;height:20px;display:grid;place-items:center;
}
.toggle-password:hover{color:var(--oro)}

/* ====== AUTH ====== */
.auth-scatola{max-width:460px;margin:56px auto 40px;padding:0 20px}
.auth-scatola .pannello{padding:32px 34px}
.auth-scatola h1{font-size:27px;text-align:center;margin-bottom:24px}
.auth-alt{display:flex;align-items:center;gap:14px;color:var(--testo-2);font-size:13px;margin:22px 0}
/* I due accessi sociali: lo spazio sta qui e non nel margine dei pulsanti, cosi'
   aggiungerne un terzo non richiede di ricordarsi di nulla. */
.auth-social{display:grid;gap:10px}
.auth-alt::before,.auth-alt::after{content:"";flex:1;height:1px;background:var(--bordo)}
.auth-nota{text-align:center;font-size:13.5px;color:var(--testo-2);margin-top:18px}

/* ====== UTILITY ====== */
.muto{color:var(--testo-2)}
.serif{font-family:var(--serif);font-weight:400}
.mono{font-family:var(--mono)}
.num{font-variant-numeric:tabular-nums}
.centro{text-align:center}
.flex{display:flex;align-items:center;gap:12px}
.flex-tra{display:flex;align-items:center;justify-content:space-between;gap:12px}
.nascosto{display:none!important}
/* visibile solo ai lettori di schermo (etichette di campi altrimenti evidenti) */
.visivamente-nascosto{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:40px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.mb-4{margin-bottom:40px}

/* Skeleton di caricamento */
@keyframes cdx-pulse{0%,100%{opacity:.55}50%{opacity:.25}}
.skeleton{background:var(--bordo);border-radius:8px;animation:cdx-pulse 1.4s infinite}

/* ====== RESPONSIVE ====== */
@media (max-width:880px){
  .sito-header .wrap{gap:14px;flex-wrap:wrap}
  .nav-burger{display:block;margin-left:auto}
  .nav-principale{
    display:none;flex-direction:column;align-items:flex-start;gap:4px;
    width:100%;order:10;padding:10px 0 6px;margin-left:0;
    border-top:1px solid var(--bordo);
  }
  .nav-principale.aperta{display:flex}
  .nav-principale a{padding:8px 4px;font-size:15.5px;width:100%}
  .nav-principale a.attiva{box-shadow:inset 3px 0 0 var(--oro);padding-left:12px}
  .menu-utente{order:5}
  .tema-toggle{order:4;margin-left:auto}
  .nav-burger{order:6;margin-left:0}
}
@media (max-width:560px){
  .wrap,.wrap-stretto{padding:0 16px}
  .pannello{padding:20px 18px}
  .griglia{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}

  /* Topbar su una sola riga: con gap/padding pieni logo+tema+Registrati+utente+burger
     superavano i 375px e l'hamburger finiva a capo (header alto 116px). */
  .sito-header .wrap{gap:8px;padding:12px 14px}
  .sito-header .logo{font-size:19px}
  .sito-header .btn-piccolo{padding:5px 11px;font-size:13px}
  .tema-toggle,.nav-burger{flex:none}
}

/* Riduzione animazioni. Lo spinner resta escluso: fermo diventerebbe un anello
   statico indistinguibile da un'icona, senza piu' indicare attivita' in corso. */
@media (prefers-reduced-motion:reduce){
  *:not(.spinner-border):not(.spinner-border-sm){animation:none!important;transition:none!important}
}

/* ====== PAGINE LEGALI (privacy, termini) ======
   Il testo e' condiviso con la UI classica, quindi arriva senza classi del tema: qui gli si
   da' respiro e gerarchia, invece del riquadro bianco che si portava dietro da Bootstrap. */
/* Solo padding verticale: la classe convive con .wrap sullo STESSO div e questa regola
   vince (viene dopo). Un `padding:28px 0 56px` azzerava i 24/16px laterali di .wrap e
   su telefono il testo toccava i bordi. */
.pagina-legale{max-width:820px;margin:0 auto;padding-top:28px;padding-bottom:56px}
.pagina-legale h1{font-size:clamp(26px,3.4vw,34px);margin:0 0 6px}
.pagina-legale h2{font-size:19px;margin:30px 0 8px;padding-top:14px;border-top:1px solid var(--bordo)}
.pagina-legale h3{font-size:15.5px;margin:18px 0 6px;color:var(--oro);font-family:var(--sans)}
.pagina-legale p{margin:0 0 12px;line-height:1.65}
.pagina-legale ul{margin:0 0 14px;padding-left:20px}
.pagina-legale li{margin-bottom:7px;line-height:1.6}
.pagina-legale code{
  font-family:ui-monospace,monospace;font-size:12.5px;background:var(--oro-t);
  padding:1px 6px;border-radius:5px;
}
.pagina-legale .muto{color:var(--testo-2)}

/* LA BANDIERINA DELLE SCHEDE NON ITALIANE.
   Piccolissima e in un angolo: serve a dire «questa non e' italiana» a colpo d'occhio, non a
   decorare. Compare solo quando il server manda `paese_iso2`, cioe' mai sull'Italia — su
   3.624 schede su 3.626 sarebbe rumore invece che informazione.
   Sta accanto al segno del bilingue e ne condivide la posizione: sono due eccezioni dello
   stesso tipo, e chi le cerca guarda nello stesso punto. */
.tc-img img.tc-flag{
  /* Il selettore e' `.tc-img img.tc-flag` e non `.tc-flag` perche' `.tc-img img` esiste gia'
     e stira ogni immagine a tutta l'area (inset:0, width:100%): con la sola classe la
     bandierina veniva disegnata grande quanto la scheda, coprendola. Stessa specificita' e
     un pezzo in piu': vince questa, senza dover ricorrere a !important. */
  position:absolute; inset:auto 6px 6px auto;
  width:14px; height:11px; border-radius:1px; object-fit:fill;
  box-shadow:0 0 0 1px rgba(0,0,0,.28), 0 1px 2px rgba(0,0,0,.35);
  background:none; pointer-events:none;
}
.tc-bi + .tc-img img.tc-flag,
.tc-img .tc-bi + img.tc-flag{ right:26px; }   /* se ci sono entrambi, non si sovrappongono */

/* Nella scheda: la riga «Nazione», con la bandierina prima del nome. */
.cdx-paese-flag{
  width:15px; height:12px; border-radius:1px; vertical-align:-1px; margin-right:6px;
  box-shadow:0 0 0 1px rgba(0,0,0,.22);
}

/* Sui riquadri di serie e temi: stessa bandierina del catalogo, stesso angolo.
   Il selettore e' `.tile .img img.tile-flag` e non `.tile-flag` per la ragione gia'
   spiegata sopra per `.tc-flag`: `.tile .img img` stira ogni immagine a tutta l'area
   (inset:0, width:100%, height:100%), e con la sola classe la bandierina veniva disegnata
   grande quanto la scheda. Stessa specificita' piu' un pezzo: vince questa, senza
   `!important`. */
.tile .img img.tile-flag{
  position:absolute; inset:auto 8px 8px auto;
  width:16px; height:13px; border-radius:1px; object-fit:fill;
  box-shadow:0 0 0 1px rgba(0,0,0,.28), 0 1px 2px rgba(0,0,0,.35);
  background:none; pointer-events:none; z-index:1;
}


/* ============================================================
   LA MINICARD UNIFICATA — tile-scheda
   Un solo DOM (parts/tile_scheda.php ↔ tileScheda() nel JS),
   tre disposizioni decise dal contenitore (.v-griglia/.v-fitta/.v-lista).
   ============================================================ */
/* ====== IL DOSAGGIO DELLE TRE VISTE (rivisto col proprietario, 18/08) ======
   griglia  = immagine grande + titolo, meta, scadenza/tiratura, codici
   compatta = immagine + titolo + codici (su telefono: solo immagine e titolo, molto fitta)
   lista    = TUTTO, in righe strette: e' la vista della densita', deve dare di piu' */
.griglia-ts{display:grid;gap:14px}
.v-griglia{grid-template-columns:repeat(auto-fill,minmax(206px,1fr))}
.v-fitta{grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:10px}
.v-lista{grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:10px}

.tile-scheda{
  background:var(--superficie);border:1px solid var(--bordo);border-radius:var(--raggio-lg);
  overflow:hidden;box-shadow:var(--ombra);position:relative;min-width:0;
  transition:transform var(--transizione),box-shadow var(--transizione),border-color var(--transizione);
  display:flex;flex-direction:column;
}
.tile-scheda:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(29,26,20,.06),0 18px 40px -14px rgba(29,26,20,.22)}
.tile-scheda.mia{border-color:color-mix(in srgb,var(--oro) 55%,var(--bordo))}
.tile-scheda.mia::after{
  /* il segno «e' mia»: un filo d'oro in alto, piu' discreto della vecchia barra laterale */
  content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--oro);opacity:.85;
}

/* --- palcoscenico immagine --- */
.ts-media{
  position:relative;aspect-ratio:8/5;flex:none;
  background:
    radial-gradient(120% 90% at 50% 8%,color-mix(in srgb,var(--oro-t) 60%,transparent),transparent 70%),
    color-mix(in srgb,var(--superficie) 62%,var(--fondo));
  border-bottom:1px solid var(--bordo);
}
.ts-link{position:absolute;inset:0;display:block;perspective:900px}
.ts-flip3d{
  position:absolute;inset:10px;display:block;
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.3,.7,.3,1);
}
.ts-flip3d.girata{transform:rotateY(180deg)}
.ts-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  filter:drop-shadow(0 3px 8px rgba(29,26,20,.22));
}
.ts-retro{transform:rotateY(180deg)}
/* chi preferisce meno movimento gira senza il 3D: dissolvenza secca */
@media (prefers-reduced-motion:reduce){
  .ts-flip3d{transition:none;transform:none!important}
  .ts-flip3d.girata .ts-fronte{visibility:hidden}
  .ts-flip3d.girata .ts-retro{transform:none}
  .tile-scheda:hover{transform:none}
}

/* bandierina e bilingue insieme in alto a sinistra; il basso e' del prezzo e del flip */
.ts-marchi{position:absolute;top:8px;left:8px;display:flex;gap:5px;align-items:center}
.ts-flag{border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.ts-bi{
  background:var(--verde);color:#fff;
  border-radius:50%;width:20px;height:20px;display:grid;place-items:center;
}
.ts-bi svg{fill:currentColor}
/* LA QUOTAZIONE, da badge sull'immagine: stile asta, zero altezza in piu' */
.ts-prezzo{
  position:absolute;bottom:8px;left:8px;z-index:2;
  background:color-mix(in srgb,var(--superficie) 90%,transparent);
  border:1px solid color-mix(in srgb,var(--oro) 55%,var(--bordo));
  color:var(--oro);font-size:11.5px;font-weight:600;line-height:1;
  padding:4px 7px;border-radius:8px;backdrop-filter:blur(3px);
  font-variant-numeric:tabular-nums;
}
/* N/U: etichette di condizione dentro il badge, piu' piccole e quiete del numero */
.ts-prezzo b{font-weight:700;font-size:8.5px;opacity:.7;letter-spacing:.4px;vertical-align:.5px}
.ts-prezzo i{font-style:normal;opacity:.45;padding:0 1px}
.ts-flip{
  position:absolute;bottom:8px;right:8px;z-index:2;
  width:28px;height:28px;border-radius:99px;padding:0;border:1px solid var(--bordo);
  display:grid;place-items:center;cursor:pointer;color:var(--testo-2);
  background:color-mix(in srgb,var(--superficie) 88%,transparent);
  backdrop-filter:blur(3px);
  transition:color var(--transizione),border-color var(--transizione),transform .1s;
}
.ts-flip svg{fill:currentColor}
.ts-flip:hover{color:var(--oro);border-color:var(--oro)}
.ts-flip:active{transform:scale(.9)}
/* col mouse il flip avviene da solo passando sull'immagine: il bottone resta per il
   touch, dove non c'e' hover, e si nasconde dove l'hover c'e' */
@media (hover:hover) and (pointer:fine){ .ts-flip{opacity:0;pointer-events:none} }

/* strumenti collezione: gli stessi fi- di fast_input (stili in theme.css).
   Qui solo la disposizione: spunta in alto a destra, matita subito sotto. */
.ts-strumenti .fi-spunta{top:8px;right:8px;width:30px;height:30px}
.ts-strumenti .fi-matita{position:absolute;top:44px;right:8px;z-index:2}
@media (hover:hover){
  .tile-scheda .fi-matita{opacity:0}
  .tile-scheda:hover .fi-matita,.tile-scheda .fi-matita:focus-visible{opacity:1}
  .tile-scheda .fi-spunta[aria-pressed="false"]{opacity:.72}
  .tile-scheda:hover .fi-spunta,.tile-scheda .fi-spunta:focus-visible{opacity:1}
}

/* --- corpo ---
   OGNI RIGA HA UN'ALTEZZA RISERVATA e viene resa anche vuota: cosi' i testi delle
   minicard adiacenti stanno alla stessa quota, qualunque campo manchi (titolo di una
   riga o due, meta assente...). Era la stonatura grafica segnalata dal proprietario. */
.ts-corpo{padding:8px 12px 10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.ts-titolo{margin:0;font:inherit;min-width:0;min-height:calc(2 * 1.28em)}
.ts-titolo a{
  font-family:var(--serif);font-weight:400;font-size:15.5px;line-height:1.28;color:var(--testo);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ts-titolo a:hover{color:var(--oro);text-decoration:none}
.ts-sep{font-style:normal;color:var(--bordo);padding:0 4px}
.ts-meta,.ts-meta2{margin:0;font-size:12.5px;color:var(--testo-2);min-height:1.35em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ts-codici{
  margin:1px 0 0;font-family:var(--mono);font-size:11px;color:var(--testo-2);min-height:1.45em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ts-codici span+span{position:relative;padding-left:16px}
.ts-codici span+span::before{content:"·";position:absolute;left:6px;color:var(--bordo)}
/* la riga «lista» (serie · produttore · emissione) vive SOLO nella vista Lista */
.ts-extra{display:none;margin:1px 0 0;font-size:11.5px;color:var(--testo-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* --- vista COMPATTA: piu' colonne, solo titolo e codici (su PC e' «perfetta» cosi') --- */
.v-fitta .ts-corpo{padding:8px 10px 9px;gap:2px}
.v-fitta .ts-titolo{min-height:calc(2 * 1.25em)}
.v-fitta .ts-titolo a{font-size:13px;line-height:1.25}
.v-fitta .ts-meta,.v-fitta .ts-meta2,.v-fitta .ts-extra{display:none}
.v-fitta .ts-codici{font-size:10px;min-height:1.4em}
.v-fitta .ts-flip3d{inset:7px}
.v-fitta .ts-strumenti .fi-matita{display:none}
.v-fitta .ts-strumenti .fi-spunta{width:26px;height:26px}
.v-fitta .fi-spunta svg{width:14px;height:14px}
.v-fitta .ts-prezzo{font-size:10px;padding:3px 5px;bottom:6px;left:6px}

/* --- vista LISTA: righe strette e PIENE — e' la vista della densita'.
   Piu' stretta di un quarto rispetto alla prima stesura (330px, non 430): su un 1780
   entrano cinque colonne, e ogni riga porta anche scadenza/tiratura e serie/produttore/
   emissione, che le altre viste non mostrano. --- */
.v-lista .tile-scheda{flex-direction:row;align-items:stretch}
.v-lista .ts-media{width:106px;min-height:104px;aspect-ratio:auto;border-bottom:0;border-right:1px solid var(--bordo);flex:none}
.v-lista .ts-flip3d{inset:6px}
.v-lista .ts-corpo{flex:1;padding:8px 11px;justify-content:center;gap:2px}
.v-lista .ts-titolo{min-height:0}                          /* in lista il titolo sta su UNA riga: */
.v-lista .ts-titolo a{font-size:13.5px;-webkit-line-clamp:1}  /* l'allineamento lo danno le righe fisse */
.v-lista .ts-meta,.v-lista .ts-meta2{font-size:11.5px;min-height:1.3em}
.v-lista .ts-codici{font-size:10.5px}
.v-lista .ts-extra{display:block;min-height:1.3em}
.v-lista .ts-strumenti .fi-spunta{top:6px;right:6px;width:26px;height:26px}
.v-lista .ts-strumenti .fi-matita{display:none}            /* riga stretta: la matita non ci sta piu' */
.v-lista .ts-marchi{top:5px;left:5px}
.v-lista .ts-bi{width:16px;height:16px}
.v-lista .ts-prezzo{font-size:10px;padding:3px 5px;bottom:5px;left:5px}
.v-lista .ts-flip{width:22px;height:22px;bottom:5px;right:5px}

/* --- minicard su telefono (le regole di pagina restano nel CSS del catalogo) --- */
@media (max-width:700px){
  /* Su telefono griglia e compatta DEVONO essere due cose diverse (prima erano quasi
     identiche): la griglia resta larga e informativa, la compatta scende a tre colonne
     con solo immagine e titolo — la vista da ricognizione veloce. */
  .v-griglia{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:10px}
  .v-fitta{grid-template-columns:repeat(auto-fill,minmax(106px,1fr));gap:7px}
  .v-lista{grid-template-columns:1fr}
  .v-griglia .ts-corpo{padding:8px 10px 10px}
  .v-griglia .ts-titolo a{font-size:13px}
  .v-griglia .ts-titolo{min-height:calc(2 * 1.28em)}
  .v-griglia .ts-meta,.v-griglia .ts-meta2{font-size:11.5px}
  .v-griglia .ts-codici{font-size:9.5px}
  .v-fitta .ts-corpo{padding:6px 8px 7px}
  .v-fitta .ts-titolo{min-height:calc(2 * 1.2em)}
  .v-fitta .ts-titolo a{font-size:11px;line-height:1.2}
  .v-fitta .ts-codici{display:none}
  .v-fitta .ts-flip{display:none}
  .v-fitta .ts-strumenti .fi-spunta{width:24px;height:24px;top:5px;right:5px}
}