/* ═══ NEGOZIO ═══
   Tutto quello che segue e' in piu' rispetto a pagine.css e ha il prefisso
   ng-, cosi' non si scontra con le classi del sito. Colori, raggi e font sono
   le stesse variabili: nessun valore nuovo. */

.ng-avviso {
  margin-top:var(--barra); padding:8px 20px; text-align:center;
  background:rgba(255,180,84,.08); border-bottom:1px solid rgba(255,180,84,.28);
  font-family:var(--fm); font-size:11.5px; letter-spacing:.05em; line-height:1.5; color:var(--amber);
}
.ng-avviso b { font-weight:500; letter-spacing:.16em; }
/* Con la striscia ANTEPRIMA lo spazio sotto la barra lo fa la striscia; nella
   versione online la striscia non c'e' e resta lo spazio di serie del sito. */
.ng-avviso + #vista .briciole { padding-top:26px; }
#vista .pag-testa { padding-top:22px; }

/* Il carrello occupa la terza colonna della barra, quella che sul sito tiene
   il selettore di lingua: il menu non si sposta di un pixel. */
.ng-cart-btn {
  grid-column:3; justify-self:end;
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--fb); font-size:13.5px; font-weight:600; color:var(--t1);
  background:rgba(255,255,255,.04); border:1px solid var(--line2); border-radius:10px;
  padding:8px 13px; cursor:pointer; transition:border-color .2s, background .2s;
}
/* Finche' non si paga online il carrello non si vede. Resta pero' al suo
   posto, invisibile: toglierlo del tutto sposterebbe il menu di 66 px. */
body[data-paga="no"] .ng-cart-btn { visibility:hidden; }
.ng-cart-btn:hover { border-color:var(--acc); background:rgba(30,155,255,.10); }
.ng-cart-n {
  min-width:20px; height:20px; padding:0 6px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--acc); color:#fff; font-family:var(--fm); font-size:11px;
}
.ng-cart-n[data-n="0"] { background:var(--line2); color:var(--t3); }

/* ─── ricerca e filtri ─── */
.ng-cerca {
  margin:30px auto 0; max-width:620px; display:flex; align-items:center; gap:10px;
  background:var(--panel); border:1px solid var(--line2); border-radius:14px;
  padding:7px 7px 7px 16px; transition:border-color .25s;
}
.ng-cerca:focus-within { border-color:var(--acc); }
.ng-cerca > svg { color:var(--t3); flex-shrink:0; }
.ng-cerca input {
  flex:1; min-width:0; background:none; border:none; outline:none;
  color:var(--t1); font-family:var(--fm); font-size:15px; letter-spacing:.04em; padding:9px 0;
}
.ng-cerca input::placeholder { color:var(--t3); }
.ng-cerca .btn { padding:11px 20px; font-size:13.5px; }
.ng-cerca-esito { min-height:22px; margin-top:12px; font-size:13.5px; color:var(--t2); }
.ng-cerca-esito b { color:var(--mint); font-weight:600; }
.ng-filtri-b { display:grid; gap:12px; margin-bottom:30px; }
.ng-filtri { display:flex; flex-wrap:wrap; gap:9px; justify-content:center; }
button.sigla { cursor:pointer; }
.sigla.on { border-color:var(--acc); color:var(--t1); background:rgba(30,155,255,.10); }

/* ─── schede prodotto ─── */
.ng-griglia { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.ng-card {
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--line); background:var(--panel); border-radius:16px;
  transition:border-color .3s, transform .3s var(--ease), background .3s;
}
.ng-card:hover { border-color:var(--acc); transform:translateY(-3px); background:var(--panel2); }
.ng-foto {
  position:relative; aspect-ratio:16/10; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse 80% 90% at 50% 0%, rgba(30,155,255,.14), transparent 70%), var(--bg2);
  border-bottom:1px solid var(--line);
}
.ng-foto img { width:100%; height:100%; object-fit:cover; }
.ng-foto svg { width:76%; height:auto; }
.ng-gen {
  position:absolute; top:12px; left:12px;
  font-family:var(--fm); font-size:10.5px; letter-spacing:.14em; color:var(--acc3);
  background:rgba(8,9,12,.72); border:1px solid var(--line2); border-radius:7px; padding:4px 9px;
}
.ng-corpo { flex:1; display:flex; flex-direction:column; gap:8px; padding:20px 22px 22px; }
.ng-corpo .tag { font-family:var(--fm); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--t3); }
.ng-corpo h2, .ng-card.vuota h2 { font-family:var(--fd); font-weight:700; font-size:17px; letter-spacing:-.01em; }
.ng-corpo p { margin:0; color:var(--t2); font-size:13.5px; }
/* Il part number si scrive col carattere a spaziatura fissa: 0 e O, 1 e I
   non si confondono, ed e' lo stesso che il sito usa per sigle e codici. */
.ng-pnt { font-family:var(--fm) !important; font-weight:500 !important; letter-spacing:.01em !important; }
.ng-var { display:grid; gap:3px; margin-top:6px; }
.ng-var span { font-size:11.5px; color:var(--t3); }
.ng-var b { font-family:var(--fm); font-size:11.5px; font-weight:400; letter-spacing:.12em; color:var(--acc3); line-height:1.7; }
.ng-modi { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.ng-modi span { font-size:11.5px; color:var(--t2); border:1px solid var(--line2); border-radius:999px; padding:3px 10px; }
.ng-piede { margin-top:auto; padding-top:16px; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.ng-da { font-size:12.5px; color:var(--t3); }
.ng-da b { display:block; font-family:var(--fd); font-size:22px; font-weight:800; letter-spacing:-.02em; line-height:1.15; color:var(--t1); }
.ng-vai { font-family:var(--fd); font-size:13.5px; font-weight:700; color:var(--acc); white-space:nowrap; }
.ng-card.vuota {
  border-style:dashed; align-items:center; justify-content:center; text-align:center;
  padding:30px 26px; gap:10px; min-height:260px;
}
.ng-card.vuota p { color:var(--t2); font-size:13.5px; margin:0; }
.ng-nulla { grid-column:1/-1; text-align:center; color:var(--t2); padding:30px 0; }

/* ─── pagina prodotto ─── */
.ng-prod {
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:44px; align-items:start; padding:26px 0 80px;
}
.ng-sx { display:grid; gap:30px; min-width:0; }
.ng-sx > .ng-foto { border:1px solid var(--line); border-radius:18px; }
.ng-sx h2 { font-family:var(--fd); font-size:19px; font-weight:800; letter-spacing:-.01em; margin-bottom:16px; }
.ng-sx .spunte, .ng-sx .passi { margin-left:0; margin-right:0; }
.ng-sx .sigle, .ng-sx .fatti { justify-content:flex-start; }
.ng-sx .fatti { margin-top:0; }
.ng-sx .scheda:hover { transform:none; }
.ng-ambra { border-color:rgba(255,180,84,.3); background:rgba(255,180,84,.05); }
.ng-ambra:hover { border-color:rgba(255,180,84,.3); background:rgba(255,180,84,.05); }
.ng-sx .ng-ambra h2 { color:var(--amber); font-size:16.5px; font-weight:700; margin-bottom:9px; }
.ng-pn-nota { margin-top:12px; font-size:12.5px; color:var(--t3); }

.ng-conf {
  position:sticky; top:calc(var(--barra) + 20px); min-width:0;
  display:grid; gap:22px; padding:28px 26px;
  border:1px solid var(--line2); background:var(--panel); border-radius:20px;
}
.ng-conf h1 { font-family:var(--fd); font-weight:800; font-size:clamp(24px,2.4vw,31px); letter-spacing:-.02em; line-height:1.12; margin-top:12px; }
.ng-disp { display:inline-flex; align-items:center; gap:10px; margin-top:12px; font-size:13px; color:var(--t2); }
.ng-disp::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 4px rgba(44,230,184,.14); }

.ng-passo { border:none; display:grid; gap:10px; min-width:0; }
.ng-passo legend { padding:0; margin-bottom:10px; font-family:var(--fm); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--t3); }
.ng-passo legend b { color:var(--acc); font-weight:500; margin-right:6px; }
.ng-marche { display:flex; flex-wrap:wrap; gap:8px; }
.ng-pill { position:relative; cursor:pointer; }
.ng-pill input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.ng-pill span {
  display:block; font-size:13.5px; font-weight:600; color:var(--t2);
  border:1px solid var(--line2); border-radius:10px; padding:8px 14px; background:var(--bg2);
  transition:border-color .2s, color .2s, background .2s;
}
.ng-pill.l span { font-family:var(--fm); min-width:40px; text-align:center; padding:8px 10px; }
.ng-pill input:checked + span { border-color:var(--acc); color:var(--t1); background:rgba(30,155,255,.12); }
.ng-pill input:focus-visible + span { outline:2px solid var(--acc3); outline-offset:2px; }

.ng-varinfo {
  margin-top:4px; padding:14px 15px; display:grid; gap:9px;
  border:1px solid var(--line2); background:var(--bg2); border-radius:13px;
}
.ng-varinfo p { margin:0; font-size:13px; color:var(--t2); line-height:1.55; }
.ng-vr { display:grid; grid-template-columns:118px minmax(0,1fr); gap:12px; align-items:baseline; }
.ng-vr span { font-family:var(--fm); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--t3); }
.ng-vr b { font-size:13px; font-weight:500; color:var(--t1); line-height:1.5; }
.ng-opz {
  display:grid; grid-template-columns:20px minmax(0,1fr) auto; gap:12px; align-items:start;
  border:1px solid var(--line2); background:var(--bg2); border-radius:13px; padding:14px 15px;
  cursor:pointer; transition:border-color .2s, background .2s;
}
.ng-opz:hover { border-color:#3C4557; }
.ng-opz:has(input:checked) { border-color:var(--acc); background:rgba(30,155,255,.08); }
.ng-opz input {
  appearance:none; -webkit-appearance:none; width:18px; height:18px; margin-top:2px;
  border:1.5px solid var(--line2); border-radius:50%; background:var(--panel);
  display:grid; place-content:center; cursor:pointer;
}
.ng-opz input[type=checkbox] { border-radius:5px; }
.ng-opz input:checked { border-color:var(--acc); background:var(--acc); }
.ng-opz input[type=radio]:checked::after { content:''; width:6px; height:6px; border-radius:50%; background:#fff; }
.ng-opz input[type=checkbox]:checked::after { content:'✓'; color:#fff; font-size:11px; font-weight:700; line-height:1; }
.ng-opz input:focus-visible { outline:2px solid var(--acc3); outline-offset:2px; }
.ng-opz input:disabled { opacity:.75; cursor:default; }
.ng-opz b { display:block; font-family:var(--fd); font-size:14.5px; font-weight:700; line-height:1.35; color:var(--t1); }
.ng-opz small { display:block; margin-top:3px; font-size:12.5px; line-height:1.5; color:var(--t3); }
.ng-eti {
  display:inline-block; margin-top:8px;
  font-family:var(--fm); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--amber); border:1px solid rgba(255,180,84,.35); border-radius:6px; padding:2px 7px;
}
.ng-pr { font-family:var(--fd); font-size:14.5px; font-weight:700; color:var(--t1); white-space:nowrap; text-align:right; }
.ng-pr.inc  { color:var(--mint);  font-size:12.5px; }
.ng-pr.prev { color:var(--amber); font-size:12.5px; }
.ng-pn-esito { min-height:18px; font-size:12.5px; }
.ng-pn-esito.ok  { color:var(--mint); }
.ng-pn-esito.dub { color:var(--amber); }
.ng-conf .campo input { font-family:var(--fm); letter-spacing:.06em; text-transform:uppercase; }
.ng-conf .campo input::placeholder { text-transform:none; letter-spacing:0; font-family:var(--fb); }

.ng-tot { border-top:1px solid var(--line); padding-top:18px; display:grid; gap:8px; }
.ng-riga { display:flex; justify-content:space-between; gap:14px; font-size:13.5px; color:var(--t2); }
.ng-riga span:last-child { white-space:nowrap; }
.ng-riga.tot { margin-top:6px; align-items:flex-end; color:var(--t1); }
.ng-riga.tot b { font-family:var(--fd); font-size:30px; font-weight:800; letter-spacing:-.02em; line-height:1.1; }
.ng-riga.tot b.prev { font-size:20px; color:var(--amber); }
.ng-riga.tot small { display:block; font-size:11.5px; color:var(--t3); text-align:right; }
.ng-conf .btn { justify-content:center; width:100%; white-space:normal; text-align:center; }
.ng-nota { font-size:12.5px; line-height:1.55; color:var(--t3); }

/* ─── carrello ─── */
.ng-velo {
  position:fixed; inset:0; z-index:290; background:rgba(4,5,8,.62);
  opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s;
}
.ng-velo.on { opacity:1; visibility:visible; }
.ng-carrello {
  position:fixed; top:0; right:0; bottom:0; z-index:300; width:min(430px,100%);
  display:flex; flex-direction:column;
  background:var(--panel); border-left:1px solid var(--line2); box-shadow:-30px 0 60px rgba(0,0,0,.5);
  transform:translateX(100%); visibility:hidden;
  transition:transform .35s var(--ease), visibility .35s;
}
.ng-carrello.on { transform:none; visibility:visible; }
.ng-car-testa { display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--line); }
.ng-car-testa h2 { font-family:var(--fd); font-size:18px; font-weight:800; }
.ng-x { background:none; border:1px solid var(--line2); border-radius:9px; color:var(--t2); width:34px; height:34px; font-size:18px; line-height:1; cursor:pointer; }
.ng-x:hover { color:var(--t1); border-color:var(--acc); }
.ng-car-corpo { flex:1; overflow:auto; padding:18px 22px; display:grid; gap:12px; align-content:start; }
.ng-car-vuoto { color:var(--t3); font-size:14px; text-align:center; padding:40px 0; }
.ng-voce { border:1px solid var(--line); background:var(--bg2); border-radius:13px; padding:14px 15px; display:grid; gap:6px; }
.ng-voce-t { display:flex; justify-content:space-between; gap:12px; align-items:baseline; }
.ng-voce-t a { font-size:14.5px; color:var(--t1); }
.ng-voce-t span { font-family:var(--fd); font-weight:700; white-space:nowrap; }
.ng-voce p { margin:0; font-size:12.5px; color:var(--t2); line-height:1.5; }
.ng-voce code { font-family:var(--fm); font-size:11.5px; color:var(--acc3); }
.ng-voce button { justify-self:start; background:none; border:none; padding:0; color:var(--t3); font-size:12px; text-decoration:underline; cursor:pointer; }
.ng-voce button:hover { color:var(--red); }
.ng-car-piede { border-top:1px solid var(--line); padding:18px 22px 22px; display:grid; gap:12px; }
.ng-car-piede .btn { justify-content:center; white-space:normal; text-align:center; }

.ng-toast {
  position:fixed; left:50%; bottom:28px; z-index:400; transform:translate(-50%,20px);
  max-width:min(520px, calc(100% - 32px)); padding:13px 18px; border-radius:12px;
  background:var(--panel2); border:1px solid var(--line2); box-shadow:0 20px 50px rgba(0,0,0,.55);
  font-size:13.5px; color:var(--t1); opacity:0; visibility:hidden;
  transition:opacity .25s, transform .25s var(--ease), visibility .25s;
}
.ng-toast.on { opacity:1; visibility:visible; transform:translate(-50%,0); }

#fab-wa {
  position:fixed; right:22px; bottom:22px; z-index:120; width:54px; height:54px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#25D366; box-shadow:0 10px 30px rgba(37,211,102,.35);
}

@media (max-width:1080px) {
  .ng-griglia { grid-template-columns:repeat(2,1fr); }
  /* Su schermo stretto l'ordine e': foto, configuratore, poi i dettagli.
     display:contents scioglie la colonna sinistra cosi' i suoi pezzi si
     ordinano insieme al configuratore. */
  .ng-prod { grid-template-columns:minmax(0,1fr); gap:26px; }
  .ng-sx { display:contents; }
  .ng-sx > * { order:2; min-width:0; }
  .ng-sx > .ng-foto { order:0; }
  .ng-conf { position:static; order:1; }
}
@media (max-width:760px) {
  .ng-griglia { grid-template-columns:minmax(0,1fr); }
  .ng-conf { padding:22px 18px; }
  .ng-cart-btn .t, .ng-cerca .btn { display:none; }
  .ng-cerca { padding:5px 14px; }
  .ng-opz { grid-template-columns:20px minmax(0,1fr); }
  .ng-opz .ng-pr { grid-column:2; text-align:left; }
  .ng-vr { grid-template-columns:minmax(0,1fr); gap:2px; }
}
/* ═══ VISTA A MATRICE ═══
   La seconda vista dell'elenco: una riga per centralina, una casella per
   lettera. Stessi dati e stessi filtri delle schede; serve a chi ha il codice
   in mano e vuole vedere in un colpo quali varianti esistono. Prefisso mx-. */
.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.ng-vista { align-items:center; gap:9px 14px; }
.ng-veicolo select {
  font-family:var(--fb); font-size:13.5px; color:var(--t1); cursor:pointer;
  background:var(--panel); border:1px solid var(--line2); border-radius:9px; padding:7px 11px;
}
.ng-veicolo select:focus-visible { outline:2px solid var(--acc3); outline-offset:2px; }
.ng-vista-b { display:flex; gap:0; }
.ng-vista-b .sigla { display:inline-flex; align-items:center; gap:7px; }
.ng-vista-b .sigla:first-child { border-radius:9px 0 0 9px; }
.ng-vista-b .sigla:last-child { border-radius:0 9px 9px 0; margin-left:-1px; }
.ng-vista-b .sigla.on { position:relative; }

.mx-mat { --cella:26px; }
.mx-testa, .mx-riga {
  display:grid; align-items:center; column-gap:18px;
  grid-template-columns:128px minmax(0,1fr) auto 86px;
}
.mx-testa {
  position:sticky; top:var(--barra); z-index:20; padding:10px 0 9px;
  background:var(--bg2); border-bottom:1px solid var(--line2);
  font-size:11.5px; font-weight:600; letter-spacing:.04em; color:var(--t3);
}
.mx-testa > :last-child { text-align:right; }
.mx-celle { display:grid; grid-template-columns:repeat(var(--ncol), var(--cella)); gap:3px; }
.mx-testa .mx-celle span { text-align:center; font-family:var(--fm); font-weight:500; color:var(--t2); }
.mx-gruppo { display:flex; align-items:baseline; gap:10px; margin:24px 0 6px; font-family:var(--fd); font-size:15px; font-weight:800; }
.mx-gruppo span { font-family:var(--fb); font-size:13px; font-weight:500; color:var(--t3); }
.mx-righe { list-style:none; }
.mx-riga { margin:0 -12px; padding:0 12px; min-height:44px; border-bottom:1px solid var(--line); border-radius:8px; }
.mx-cod { font-family:var(--fm); font-weight:500; font-size:14.5px; color:var(--t1); padding:6px 0; }
.mx-su { display:flex; gap:6px; min-width:0; font-size:13px; color:var(--t3); }
.mx-su-t { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mx-su-n { flex-shrink:0; }
.mx-su b { color:var(--t2); font-weight:600; }
.mx-da { text-align:right; font-size:12px; color:var(--t3); font-variant-numeric:tabular-nums; }
.mx-da b { font-family:var(--fd); font-size:14.5px; font-weight:700; color:var(--t1); margin-left:4px; }

/* La casella-variante. Blu = a catalogo; ambra tratteggiata = esiste ma la
   verifichiamo sul telaio; piena = quella cercata; spenta = non c'entra con
   il codice scritto o con il veicolo scelto. */
.mx-c {
  width:var(--cella); height:var(--cella); border-radius:6px; display:grid; place-items:center;
  font-family:var(--fm); font-size:11.5px; font-weight:500; line-height:1; color:var(--acc3);
  background:rgba(30,155,255,.13); border:1px solid rgba(30,155,255,.3);
  transition:background .15s, border-color .15s, color .15s, transform .12s var(--ease);
}
.mx-c.amb { background:none; border:1px dashed rgba(255,180,84,.6); color:var(--amber); }
.mx-c.on { background:var(--acc); border:1px solid var(--acc); color:#fff; }
.mx-c.via { opacity:.22; }
.mx-c:active { transform:scale(.92); }
.mx-c:focus-visible, .mx-cod:focus-visible { outline:2px solid var(--acc3); outline-offset:2px; }
a.mx-c { scroll-margin-top:calc(var(--barra) + 60px); }
.mx-c0 { width:var(--cella); height:var(--cella); display:grid; place-items:center; }
.mx-c0::after { content:''; width:3px; height:3px; border-radius:50%; background:var(--line2); }
.mx-legenda { display:flex; flex-wrap:wrap; gap:8px 22px; margin-bottom:8px; font-size:13px; color:var(--t2); }
.mx-legenda span { display:inline-flex; align-items:center; gap:8px; }
.mx-legenda .mx-c, .mx-legenda .mx-c0 { --cella:18px; font-size:0; flex-shrink:0; }
@media (hover:hover) and (pointer:fine) {
  .mx-riga:hover { background:rgba(255,255,255,.03); }
  .mx-cod:hover { color:var(--acc3); }
  a.mx-c:hover { background:rgba(30,155,255,.34); border-color:var(--acc); color:#fff; opacity:1; }
  a.mx-c.amb:hover { background:rgba(255,180,84,.16); border-color:var(--amber); color:var(--amber); }
  a.mx-c.on:hover { background:var(--acc); }
}

/* Il riquadro che compare passando su una casella: nasce dalla casella, e
   dal secondo in poi non aspetta. */
#peek {
  position:fixed; z-index:260; left:0; top:0; width:268px; pointer-events:none;
  padding:13px 15px; border-radius:12px; display:grid; gap:7px;
  background:var(--panel2); border:1px solid var(--line2); box-shadow:0 18px 40px rgba(0,0,0,.5);
  opacity:0; visibility:hidden; transform:scale(.96); transform-origin:var(--da, 50% 100%);
  transition:opacity .14s var(--ease), transform .14s var(--ease), visibility .14s;
}
#peek.on { opacity:1; visibility:visible; transform:none; }
#peek.subito { transition:none; }
#peek b { font-family:var(--fm); font-weight:500; font-size:14px; color:var(--t1); }
#peek p { margin:0; font-size:12.5px; line-height:1.5; color:var(--t2); }
#peek p span { color:var(--t3); }

/* Ritocchi di risposta al tocco: il pulsante si abbassa quando lo premi, il
   carrello entra in 380 ms ed esce in 220. */
.btn:active { transform:scale(.97); transition-duration:.12s; }
.ng-carrello { transition:transform .22s cubic-bezier(.32,.72,0,1), visibility .22s; }
.ng-carrello.on { transition:transform .38s cubic-bezier(.32,.72,0,1), visibility 0s; }

@media (max-width:1150px) {
  /* Sotto questa larghezza la matrice diventa un elenco: codice e prezzo sulla
     prima riga, sotto le sole lettere che esistono, grandi quanto un dito. */
  .mx-testa { display:none; }
  .mx-riga { grid-template-columns:minmax(0,1fr) auto; row-gap:8px; padding:14px 12px; }
  .mx-su { grid-column:1 / -1; grid-row:2; }
  .mx-su-t { white-space:normal; }
  .mx-riga .mx-celle { grid-column:1 / -1; grid-row:3; --cella:40px; display:flex; flex-wrap:wrap; gap:6px; }
  .mx-riga .mx-c { font-size:14px; border-radius:9px; }
  .mx-riga .mx-c0 { display:none; }
  .mx-cod { font-size:16px; }
}
@media (prefers-reduced-motion:reduce) {
  .ng-carrello, .ng-carrello.on { transition:visibility 0s; }
  #peek, #peek.on { transform:none; }
  .btn:active, .mx-c:active { transform:none; }
}

/* ═══ SITO PUBBLICATO ═══
   Quello che e' servito passando dall'esempio in un file solo alle pagine
   vere di shop.mibsolution.it. */

/* Diversi blocchi hanno un display dichiarato (grid, flex): senza questa riga
   l'attributo hidden non li nasconderebbe. */
#vista [hidden] { display:none !important; }

.ng-sotto { margin-top:10px; font-size:14.5px; color:var(--t2); }
/* Codice e «centralina infotainment …» stanno nello stesso h1, su due righe:
   la seconda si riporta al carattere del testo, com'era quando era un
   paragrafo a parte. */
.ng-conf h1 span { display:block; }
.ng-conf h1 .ng-sotto { font-family:var(--fb); font-weight:400; letter-spacing:0; line-height:1.65; }
.ng-stretto { margin-top:6px; font-size:12.5px; color:var(--t3); }
.ng-stretto b { font-family:var(--fm); font-weight:500; letter-spacing:.02em; color:var(--t2); }
.ng-da.su b { font-size:16px; }
.mx-da { white-space:nowrap; }

/* la conferma chiesta a chi sceglie la modalita' riservata alle officine */
.ng-conferma { display:flex; gap:11px; align-items:flex-start; margin-top:4px; font-size:13.5px; line-height:1.5; color:var(--t2); cursor:pointer; }
.ng-conferma input { width:18px; height:18px; margin-top:1px; flex-shrink:0; accent-color:var(--acc); cursor:pointer; }

/* il pagamento non risponde: lo si dice dove il cliente sta guardando */
.ng-errore { padding:12px 14px; border-radius:11px; font-size:13.5px; line-height:1.55; color:var(--t1); border:1px solid rgba(255,90,72,.45); background:rgba(255,90,72,.08); }
.ng-errore a { color:var(--acc3); text-decoration:underline; text-underline-offset:3px; }
.ng-car-piede .btn:disabled { opacity:.5; cursor:default; transform:none; box-shadow:none; }

/* «Tutte le varianti»: la tabella in fondo alla pagina. E' il testo che dice
   a chi cerca un codice con la lettera che la pagina parla proprio di quello. */
.ng-tutte { padding:0 0 84px; }
.ng-tutte h2 { font-family:var(--fd); font-size:22px; font-weight:800; letter-spacing:-.01em; margin-bottom:18px; }
.ng-tab-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:14px; background:var(--panel); }
.ng-tab { width:100%; border-collapse:collapse; font-size:13.5px; }
.ng-tab th, .ng-tab td { text-align:left; vertical-align:top; padding:11px 16px; border-bottom:1px solid var(--line); color:var(--t2); line-height:1.5; }
.ng-tab tbody tr:last-child th, .ng-tab tbody tr:last-child td { border-bottom:0; }
.ng-tab thead th { font-family:var(--fm); font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--t3); white-space:nowrap; }
.ng-tab tbody th { white-space:nowrap; font-weight:500; }
.ng-tab tbody th a { font-family:var(--fm); color:var(--acc3); }
.ng-tab tbody th a:hover { text-decoration:underline; text-underline-offset:3px; }
/* lo stesso codice senza spazi, sotto quello con gli spazi */
.ng-tab-s { display:block; font-family:var(--fm); font-size:11.5px; font-weight:400; color:var(--t3); }

/* «Altre centraline»: i rimandi alle vicine, in fondo alla pagina */
.ng-vicine { padding:0 0 84px; }
.ng-vicine h2 { font-family:var(--fd); font-size:22px; font-weight:800; letter-spacing:-.01em; margin-bottom:18px; }
.ng-vicine .sigle { justify-content:flex-start; }
.ng-vicine .ng-pn-nota a { color:var(--acc3); white-space:nowrap; }
.ng-vicine .ng-pn-nota a:hover { text-decoration:underline; text-underline-offset:3px; }

/* la pagina dell'indirizzo sbagliato */
.ng-404 { padding:150px 0 110px; text-align:center; }
.ng-404 h1 { font-family:var(--fd); font-weight:800; font-size:clamp(28px,4vw,44px); letter-spacing:-.02em; }
.ng-404 p { margin:14px auto 28px; max-width:520px; color:var(--t2); }
.ng-404 .cta-row { justify-content:center; }

@media (max-width:760px) {
  .ng-tab thead { display:none; }
  .ng-tab, .ng-tab tbody, .ng-tab tr, .ng-tab th, .ng-tab td { display:block; }
  .ng-tab tr { padding:12px 16px; border-bottom:1px solid var(--line); }
  .ng-tab tbody tr:last-child { border-bottom:0; }
  .ng-tab th, .ng-tab td { padding:2px 0; border:0; }
}

/* La foto della centralina, senza fondo: poggia sulla scheda e l'ombra la
   stacca. «contain» e non «cover»: di un ricambio si deve vedere tutto. */
.ng-foto img.ng-ritaglio { object-fit:contain; padding:7% 9%; filter:drop-shadow(0 16px 18px rgba(0,0,0,.55)); }
.ng-indic { position:absolute; right:14px; bottom:11px; font-size:11.5px; color:var(--t3); }