/* ============================================================
   IL CATALOGO + la minicard unificata `tile-scheda`
   (redesign in produzione dal 18/08/2026, storia in docs/CATALOGO2.md).
   Vive accanto a theme.css (token e componenti di base stanno la').
   La minicard `tile-scheda` VIVE IN theme.css (fase 2 del 18/08/2026):
   qui restano barra filtri, chip, viste, paginazione, scheletri, OCR.
   ============================================================ */

.wrap-cat2{max-width:1780px;margin:0 auto;padding:0 24px;width:100%}

/* ====== BARRA FILTRI ======
   Stessa meccanica della pagina attuale: colonne decise dal JS che sposta i select nel
   pannello quando l'ingombro sborda (misurato, non a soglie fisse). Qui cambia solo la
   pelle: campi piu' morbidi, fuoco oro. */
.c2-filtri{
  display:grid;gap:8px;align-items:center;padding:10px 0 6px;
  grid-template-columns:minmax(220px,1.6fr) repeat(5,minmax(120px,1fr)) auto auto;
  position:sticky;top:var(--h-header,60px);z-index:20;
  background:var(--fondo);
}
/* rete di sicurezza se il JS non compatta (script in cache vecchia, errore di rete) */
@media (max-width:1100px){
  .c2-filtri:not(.js-ok){display:flex;flex-wrap:wrap;gap:8px}
  .c2-filtri:not(.js-ok)>*{flex:1 1 150px;min-width:0}
}
.c2-filtri select,.c2-filtri input[type="search"]{
  padding:8px 11px;font-size:13.5px;border-radius:10px;
}
.c2-filtri input[type="search"]{background:var(--superficie)}
.c2-filtri .selDef{color:var(--testo-2)}
.c2-foto{display:inline-flex;align-items:center;justify-content:center;width:36px;padding:8px 0;flex:0 0 auto}
.c2-foto svg{fill:currentColor;display:block}

/* Flyout filtri avanzati (identico nel comportamento, tondo nel disegno) */
.filtri-extra{position:relative}
.filtri-extra>button{position:relative}
#extraFiltersCount{
  position:absolute;top:-6px;right:-6px;background:var(--rosso);color:#fff;
  font-size:10.5px;font-weight:700;border-radius:99px;min-width:17px;height:17px;
  display:grid;place-items:center;padding:0 4px;
}
#extraFiltersMenu{
  position:absolute;right:0;top:calc(100% + 8px);width:290px;
  background:var(--superficie);border:1px solid var(--bordo);border-radius:var(--raggio);
  box-shadow:var(--ombra);padding:16px;display:none;z-index:50;
}
#extraFiltersMenu.aperta{display:grid;gap:12px}

/* ====== CHIP DEI FILTRI ATTIVI ======
   La risposta a «numero e tipo di filtri evidenziati»: ogni filtro attivo diventa un chip
   con il suo nome, il valore e una ✕ per toglierlo al volo. Compare solo quando serve. */
.c2-chips{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  padding:0 0 8px;min-height:0;
}
.c2-chips:empty{display:none}
.c2-chip{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;line-height:1;padding:6px 9px;border-radius:99px;
  background:var(--oro-t);border:1px solid color-mix(in srgb,var(--oro) 40%,var(--bordo));
  color:var(--testo);white-space:nowrap;max-width:280px;
}
.c2-chip b{font-weight:600;overflow:hidden;text-overflow:ellipsis}
.c2-chip small{color:var(--testo-2);font-size:11px}
.c2-chip button{
  all:unset;cursor:pointer;display:grid;place-items:center;
  width:15px;height:15px;border-radius:99px;font-size:12px;line-height:1;
  color:var(--testo-2);
}
.c2-chip button:hover{background:var(--oro);color:var(--su-oro)}
.c2-chip-azzera{
  all:unset;cursor:pointer;font-size:12px;color:var(--testo-2);
  padding:6px 9px;border-radius:99px;border:1px dashed var(--bordo);
}
.c2-chip-azzera:hover{color:var(--oro);border-color:var(--oro)}
.c2-chip-tot{font-size:12px;color:var(--testo-2);margin-left:auto;white-space:nowrap}
@media (max-width:700px){
  /* su telefono i chip scorrono in orizzontale invece di impilarsi in tre righe */
  .c2-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:8px}
  .c2-chips::-webkit-scrollbar{display:none}
  .c2-chip-tot{margin-left:0}
}

/* ====== CONTENITORE RISULTATI ====== */
#catalog-results{min-height:300px;padding:2px 0 4px}
#catalog-results-pagination{
  display:flex;align-items:center;justify-content:flex-end;gap:14px;
  flex-wrap:wrap;padding:10px 2px;font-size:13px;
  position:sticky;bottom:0;z-index:20;
  background:var(--fondo);border-top:1px solid var(--bordo);margin-top:8px;
}
.sito-footer{margin-top:0}

/* Modalita' «strumento» da desktop: scorre SOLO l'elenco, testata/filtri/paginazione/piede
   restano dove sono. Stessa meccanica misurata della pagina attuale (il JS attiva la
   classe solo se lo spazio c'e' davvero). */
html.cat2-fisso, html.cat2-fisso body{height:100dvh;overflow:hidden}
html.cat2-fisso #catalog-results{overflow-y:auto;box-sizing:border-box;min-height:0;padding-right:6px}
html.cat2-fisso .c2-filtri,
html.cat2-fisso #catalog-results-pagination{position:static}

/* ====== PAGINAZIONE ====== */
.pag-gruppo{display:inline-flex;align-items:center;gap:7px}
.pag-gruppo .pageGoInput{width:70px;padding:6px 9px;font-size:13px}
.pag-gruppo select{width:auto;padding:6px 26px 6px 9px;font-size:13px}
.pag-tot{margin-right:auto}

/* selettore di vista: tre icone, una accesa */
.c2-viste{display:inline-flex;gap:2px;border:1px solid var(--bordo);border-radius:9px;padding:2px;background:var(--superficie)}
.c2-viste button{
  all:unset;cursor:pointer;display:grid;place-items:center;
  width:28px;height:24px;border-radius:7px;color:var(--testo-2);
}
.c2-viste button:hover{color:var(--oro)}
.c2-viste button[aria-pressed="true"]{background:var(--oro-t);color:var(--oro)}
.c2-viste svg{width:14px;height:14px;fill:currentColor}

/* ====== SCHELETRI DI CARICAMENTO ======
   Al posto di «Caricamento…»: la griglia che sta arrivando, in filigrana. Il testo
   resta, invisibile, per gli screen reader. */
.ts-skel{pointer-events:none}
.ts-skel .ts-media{border-bottom-color:transparent}
.ts-skel .sk{
  background:linear-gradient(100deg,var(--bordo) 35%,color-mix(in srgb,var(--superficie) 70%,var(--bordo)) 50%,var(--bordo) 65%);
  background-size:220% 100%;border-radius:6px;
  animation:c2-shimmer 1.1s linear infinite;
}
@media (prefers-reduced-motion:reduce){ .ts-skel .sk{animation:none} }
@keyframes c2-shimmer{from{background-position:130% 0}to{background-position:-90% 0}}
.ts-skel .sk-img{position:absolute;inset:10px;border-radius:8px}
.ts-skel .sk-r1{height:14px;width:82%}
.ts-skel .sk-r2{height:10px;width:60%}
.visivamente-nascosto{
  position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;
}

/* ingresso morbido della griglia (solo dissolvenza, niente salti) */
#catalog-results .griglia-ts{animation:c2-entra .22s ease}
@media (prefers-reduced-motion:reduce){ #catalog-results .griglia-ts{animation:none} }
@keyframes c2-entra{from{opacity:.35}to{opacity:1}}

/* ====== BLOCCO OCR (testo stampato): stesse minicard, vista compatta ====== */
.ocr-blocco{margin-top:22px;padding-top:14px;border-top:1px dashed var(--bordo)}
.ocr-testata h3{font-family:var(--serif);font-weight:400;font-size:19px}
.ocr-testata .muto{font-size:12.5px;margin:2px 0 12px}

/* ====== TELEFONO ====== */
@media (max-width:700px){
  .wrap-cat2{padding:0 14px}
  #catalog-results-pagination{
    gap:8px;flex-wrap:nowrap;justify-content:space-between;
    padding:7px 2px;font-size:12.5px;
  }
  .pag-vai{display:none}
  .pag-per label{display:none}
  .pag-per select{padding:5px 22px 5px 8px;font-size:12.5px}
  .pag-tot{font-size:12px;white-space:nowrap;margin-right:0}
  .pag-tot-eti{display:none}
  .paginazione{gap:3px}
  .paginazione a{min-width:27px;height:27px;padding:0 5px;font-size:12.5px;border-radius:7px}
}