/* Product Viewer - front end
   Ogni colore passa dalle variabili impostate nel pannello Stile,
   cosi' ogni installazione si allinea al proprio brand senza CSS a mano. */

.pv-app{
  --pv-bg:#090C0F;
  --pv-panel:#12181D;
  --pv-panel-2:#171F25;
  --pv-text:#FFFFFF;
  --pv-muted:#999CA5;
  --pv-accent:#33B9BB;
  --pv-hover:#2A9A9C;
  --pv-line:rgba(255,255,255,.10);
  --pv-line-strong:rgba(255,255,255,.22);
  --pv-radius:6px;
  /* Grandezza dei caratteri: e' la base da cui discendono tutte le altre
     misure di testo del catalogo, che sono scritte come multipli di questa.
     Si cambia dal pannello Stile, senza toccare il CSS. */
  --pv-font:15px;
  --pv-min-col:268px;
  /* Scala di spaziature: tutto il layout usa questi quattro valori,
     cosi' i margini restano coerenti da un capo all'altro del catalogo. */
  --pv-space-1:8px;
  --pv-space-2:14px;
  --pv-space-3:20px;
  --pv-space-4:32px;
  background:var(--pv-bg);
  color:var(--pv-text);
  padding:var(--pv-space-1) 0 120px;
  font-size:var(--pv-font);
  line-height:1.5;
}
.pv-app *{box-sizing:border-box}
.pv-app a{color:inherit;text-decoration:none}
.pv-app :focus-visible{outline:2px solid var(--pv-accent);outline-offset:2px}

/* Reset degli stili che i temi applicano a bottoni e campi.
   Senza questo blocco ogni sito disegna il catalogo a modo suo: pillole
   colorate al posto delle intestazioni dei filtri, pulsanti che debordano
   dagli angoli delle schede. La classe e' ripetuta per alzare la
   specificita' sopra quella dei temi piu' invadenti. */
.pv-app.pv-app button,
.pv-app.pv-app input,
.pv-app.pv-app select{
  font:inherit;color:inherit;margin:0;box-shadow:none;text-transform:none;
  letter-spacing:normal;min-height:0;line-height:inherit;
}
.pv-app.pv-app button{
  background:none;border:none;border-radius:0;padding:0;width:auto;
  text-shadow:none;-webkit-appearance:none;appearance:none;
}
.pv-app.pv-app button:hover,
.pv-app.pv-app button:focus{box-shadow:none;text-decoration:none}

.pv-layout{display:grid;grid-template-columns:290px minmax(0,1fr);gap:44px;align-items:start}

/* colonna filtri */
.pv-rail{position:sticky;top:24px;max-height:calc(100vh - 48px);overflow-y:auto;
  /* lo spazio a destra tiene i conteggi lontani dalla barra di scorrimento */
  padding:24px var(--pv-space-3) 40px 0;scrollbar-gutter:stable;
  scrollbar-width:thin;scrollbar-color:var(--pv-line-strong) transparent}
.pv-rail::-webkit-scrollbar{width:6px}
.pv-rail::-webkit-scrollbar-track{background:transparent}
.pv-rail::-webkit-scrollbar-thumb{background:var(--pv-line-strong);border-radius:99px}
.pv-rail-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--pv-space-2)}
.pv-rail-head h2{margin:0;font-size:calc(var(--pv-font) * 0.8667);letter-spacing:.18em;text-transform:uppercase;font-weight:700}
.pv-reset{background:none;border:none;padding:0;cursor:pointer;font-size:calc(var(--pv-font) * 0.8);color:var(--pv-accent)}
.pv-reset:hover{color:var(--pv-hover)}
.pv-reset[disabled]{color:var(--pv-muted);opacity:.5;cursor:default}

.pv-search{position:relative;margin-bottom:var(--pv-space-3)}
.pv-search input{width:100%;background:var(--pv-panel);border:1px solid var(--pv-line);border-radius:var(--pv-radius);
  color:var(--pv-text);padding:11px 12px;font-size:calc(var(--pv-font) * 0.9333)}
.pv-search input::placeholder{color:var(--pv-muted)}
.pv-search input:focus{border-color:var(--pv-accent);outline:none}
.pv-option:hover .pv-box{border-color:var(--pv-hover)}

.pv-group{border-top:1px solid var(--pv-line)}
.pv-group-head{width:100%;background:none;border:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;padding:15px 0;text-align:left;font-size:calc(var(--pv-font) * 0.8);letter-spacing:.14em;
  text-transform:uppercase;font-weight:600}
.pv-group-head .pv-arrow{transition:transform .18s ease}
.pv-group[data-open="false"] .pv-arrow{transform:rotate(-90deg)}
.pv-group[data-open="false"] .pv-group-body{display:none}
.pv-group-body{padding:0 0 var(--pv-space-2)}

.pv-option{display:flex;align-items:center;gap:10px;padding:7px 0;cursor:pointer;font-size:calc(var(--pv-font) * 0.9333)}
.pv-option input{position:absolute;opacity:0;width:0;height:0}
.pv-box{width:17px;height:17px;flex:0 0 17px;border:1px solid var(--pv-line-strong);border-radius:var(--pv-radius);
  display:grid;place-items:center;transition:.15s}
.pv-option input:checked + .pv-box{background:var(--pv-accent);border-color:var(--pv-accent)}
.pv-box svg{opacity:0;stroke:var(--pv-bg);stroke-width:3;fill:none}
.pv-option input:checked + .pv-box svg{opacity:1}
.pv-option input:focus-visible + .pv-box{outline:2px solid var(--pv-accent);outline-offset:2px}
.pv-option-label{flex:1;min-width:0}
.pv-count{color:var(--pv-muted);font-size:calc(var(--pv-font) * 0.8);font-variant-numeric:tabular-nums;
  flex:0 0 auto;min-width:18px;text-align:right}
.pv-option.is-empty{opacity:.38}
.pv-option.is-empty .pv-option-label{text-decoration:line-through}

/* barra risultati */
.pv-bar{padding:24px 0 var(--pv-space-2);border-bottom:1px solid var(--pv-line)}
.pv-bar-main{display:flex;align-items:center;gap:var(--pv-space-3);flex-wrap:nowrap;min-width:0}
.pv-total{font-size:calc(var(--pv-font) * 0.9333);color:var(--pv-muted);margin:0;white-space:nowrap;flex:0 0 auto}
.pv-total b{color:var(--pv-text);font-size:calc(var(--pv-font) * 1.3333);font-variant-numeric:tabular-nums;margin-right:4px}
.pv-sort{display:flex;align-items:center;gap:8px;font-size:calc(var(--pv-font) * 0.8667);color:var(--pv-muted);
  white-space:nowrap;flex:0 1 auto;min-width:0}
.pv-sort label{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.pv-app.pv-app .pv-sort select{background:var(--pv-panel);border:1px solid var(--pv-line);color:var(--pv-text);
  border-radius:var(--pv-radius);padding:7px 10px;font-size:calc(var(--pv-font) * 0.8667);max-width:100%;text-overflow:ellipsis}
.pv-chips{display:flex;flex-wrap:wrap;gap:var(--pv-space-1);margin-top:var(--pv-space-2)}
.pv-chips:empty{margin-top:0}
.pv-app.pv-app .pv-chip{display:inline-flex;align-items:center;gap:7px;background:var(--pv-panel);
  border:1px solid var(--pv-line);border-radius:var(--pv-radius);padding:6px 10px;font-size:calc(var(--pv-font) * 0.8);
  cursor:pointer;transition:border-color .15s,color .15s}
.pv-chip span{color:var(--pv-muted);text-transform:uppercase;letter-spacing:.08em;font-size:calc(var(--pv-font) * 0.6667)}
.pv-chip:hover{border-color:var(--pv-hover);color:var(--pv-hover)}

/* risultati */
.pv-section{padding:var(--pv-space-4) 0 0}
.pv-section h3{margin:0 0 4px;font-size:calc(var(--pv-font) * 1.4667);font-weight:700;display:flex;align-items:baseline;gap:12px}
.pv-section p.pv-section-desc{margin:0 0 var(--pv-space-3);color:var(--pv-muted);font-size:calc(var(--pv-font) * 0.9333);max-width:70ch}
.pv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--pv-min-col),1fr));gap:var(--pv-space-3)}

.pv-card{background:var(--pv-panel);border:1px solid var(--pv-line);border-radius:var(--pv-radius);
  display:flex;flex-direction:column;overflow:hidden;transition:border-color .18s,transform .18s;
  isolation:isolate}
.pv-card:hover{border-color:var(--pv-hover);transform:translateY(-2px)}
.pv-card-media{aspect-ratio:4/3;background:rgba(127,127,127,.05);display:grid;place-items:center;
  padding:var(--pv-space-3);border-bottom:1px solid var(--pv-line)}
.pv-card-media img{max-width:100%;max-height:100%;object-fit:contain}
.pv-card-media .pv-placeholder{color:var(--pv-muted);font-size:calc(var(--pv-font) * 0.7333);letter-spacing:.16em;text-transform:uppercase}
.pv-card-body{padding:var(--pv-space-3) var(--pv-space-3) 0;flex:1}
.pv-card-eyebrow{font-size:calc(var(--pv-font) * 0.6667);letter-spacing:.18em;text-transform:uppercase;color:var(--pv-accent);margin:0 0 6px}
.pv-card h4{margin:0 0 8px;font-size:calc(var(--pv-font) * 1.1333);font-weight:700}
.pv-card-excerpt{margin:0 0 var(--pv-space-3);font-size:calc(var(--pv-font) * 0.8667);color:var(--pv-muted);line-height:1.45}

/* targhetta specifiche
   La targhetta e' figlia della scheda, non del corpo: il margine negativo che
   serviva quando stava dentro al corpo la faceva sporgere oltre i bordi, e il
   padding finiva speso tutto per rientrare, lasciando le scritte appiccicate
   alla cornice. Qui il margine non c'e' e il padding e' aria vera.
   La classe e' ripetuta per stare sopra i temi che azzerano dl, dt e dd. */
.pv-app.pv-app .pv-plate{border-top:1px solid var(--pv-line);margin:0;
  padding:var(--pv-space-3)}
.pv-app.pv-app .pv-plate dl{margin:0;padding:0;display:grid;grid-template-columns:auto 1fr;
  gap:10px var(--pv-space-3);font-size:calc(var(--pv-font) * 0.8)}
.pv-app.pv-app .pv-plate dt{margin:0;padding:2px 0 0;color:var(--pv-muted);letter-spacing:.06em;
  text-transform:uppercase;font-size:calc(var(--pv-font) * 0.6667);line-height:1.35}
.pv-app.pv-app .pv-plate dd{margin:0;padding:0;text-align:right;font-variant-numeric:tabular-nums;
  line-height:1.35;overflow-wrap:anywhere}

/* Piede della scheda: le due voci stanno al centro della loro meta', cosi'
   restano leggibili anche quando la scheda e' stretta e nessuna delle due
   finisce appiccicata alla cornice. */
.pv-card-foot{display:flex;border-top:1px solid var(--pv-line)}
.pv-app.pv-app .pv-card-foot a{flex:1 1 0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:var(--pv-space-2) var(--pv-space-3);
  font-size:calc(var(--pv-font) * 0.8667);font-weight:600}
.pv-card-foot a:hover{color:var(--pv-hover)}
.pv-app.pv-app .pv-compare{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  text-align:center;border-left:1px solid var(--pv-line);cursor:pointer;
  padding:var(--pv-space-2) var(--pv-space-3);font-size:calc(var(--pv-font) * 0.8);color:var(--pv-muted);border-radius:0;
  transition:background .15s,color .15s}
.pv-compare:hover{color:var(--pv-hover)}
.pv-compare[aria-pressed="true"]{background:var(--pv-accent);color:var(--pv-bg);font-weight:700}
.pv-compare[aria-pressed="true"]:hover{background:var(--pv-hover);color:var(--pv-bg)}

.pv-empty{padding:70px 0;text-align:center;border-top:1px solid var(--pv-line);margin-top:var(--pv-space-4)}
.pv-empty p{color:var(--pv-muted);max-width:46ch;margin:0 auto var(--pv-space-3)}
.pv-app.pv-app .pv-btn{display:inline-block;background:var(--pv-accent);color:var(--pv-bg);font-weight:700;
  padding:11px var(--pv-space-3);border-radius:var(--pv-radius);cursor:pointer;font-size:calc(var(--pv-font) * 0.9333);
  transition:background .15s}
.pv-btn:hover{background:var(--pv-hover)}
.pv-btn[disabled]{opacity:.45;cursor:default}
.pv-btn[disabled]:hover{background:var(--pv-accent)}
.pv-loading{color:var(--pv-muted);padding:40px 0}

/* vassoio confronto
   Tre colonne: elenco a sinistra, pulsanti al centro, e la terza colonna
   resta vuota di proposito. L'angolo in basso a destra e' dove i siti
   mettono la bolla della chat e i banner dei cookie: un pulsante li' finisce
   coperto, e chi lo cerca non lo trova. */
.pv-tray{position:fixed;left:0;right:0;bottom:0;background:var(--pv-bg);
  border-top:1px solid var(--pv-line-strong);box-shadow:0 -8px 24px rgba(0,0,0,.18);
  padding:var(--pv-space-2) var(--pv-space-4);display:grid;
  grid-template-columns:1fr auto 1fr;align-items:center;
  gap:var(--pv-space-3);z-index:40}
.pv-tray[hidden]{display:none}
.pv-tray-list{grid-column:1;display:flex;gap:var(--pv-space-1);flex-wrap:wrap;min-width:0}
.pv-tray-actions{grid-column:2;justify-self:center;display:flex;align-items:center;
  gap:var(--pv-space-2);flex-wrap:wrap;justify-content:center}
.pv-tray-item{display:flex;align-items:center;gap:8px;border:1px solid var(--pv-line);
  border-radius:var(--pv-radius);padding:6px 10px;font-size:calc(var(--pv-font) * 0.8)}
.pv-tray-item button{background:none;border:none;cursor:pointer;color:var(--pv-muted);font-size:var(--pv-font);line-height:1}
.pv-tray-item button:hover{color:var(--pv-hover)}
.pv-compare-table{width:100%;border-collapse:separate;border-spacing:0;margin-top:var(--pv-space-3);
  font-size:calc(var(--pv-font) * 0.8667);border:1px solid var(--pv-line);border-radius:var(--pv-radius);overflow:hidden}
.pv-compare-table th,.pv-compare-table td{border-bottom:1px solid var(--pv-line);
  border-right:1px solid var(--pv-line);padding:var(--pv-space-2) var(--pv-space-3);text-align:left}
.pv-compare-table tr:last-child th,.pv-compare-table tr:last-child td{border-bottom:none}
.pv-compare-table th:last-child,.pv-compare-table td:last-child{border-right:none}
.pv-compare-table th{color:var(--pv-muted);text-transform:uppercase;font-size:calc(var(--pv-font) * 0.6667);letter-spacing:.1em}

@media(max-width:860px){
  .pv-tray{grid-template-columns:1fr;justify-items:center;text-align:center}
  .pv-tray-list{grid-column:1;justify-content:center}
  .pv-tray-actions{grid-column:1}
}

.pv-open-filters{display:none}
@media(max-width:1080px){
  .pv-layout{grid-template-columns:1fr;gap:0}
  .pv-app.pv-app .pv-open-filters{display:inline-flex;align-items:center;gap:8px;margin:12px 0;
    background:var(--pv-panel);border:1px solid var(--pv-line-strong);border-radius:var(--pv-radius);
    padding:10px var(--pv-space-3);font-size:calc(var(--pv-font) * 0.8667);cursor:pointer;font-weight:600}
  .pv-rail{position:fixed;inset:0;z-index:50;background:var(--pv-bg);max-height:none;
    padding:24px var(--pv-space-3) 100px;overflow-y:auto;display:none}
  .pv-rail.is-open{display:block}
}
@media(prefers-reduced-motion:reduce){.pv-app *{transition:none!important}}

.pv-card-spacer{flex:1}