/* Personalizzatore nella scheda prodotto.
   Colori presi dal tema quando ci sono, con un ripiego esplicito: una variabile che non esiste
   rende il colore « niente » e il blocco diventa illeggibile senza dare errore. */
.dpi-pers{--p-bordo:#E3E7EE;--p-testo:#1A2233;--p-muto:#5A6472;--p-tenue:#8A94A6;--p-acc:#1B44AB;
  --p-acc-soft:#EEF3FF;--p-panel:#F7F9FC;--p-ambra:#B45309;
  margin:28px 0;font-family:inherit;color:var(--p-testo);
  /* 🔴 `clear:both` NON e' un dettaglio estetico: senza, il blocco finiva accanto alla galleria
     del prodotto — che nel tema e' in FLOAT — e il contenuto si schiacciava in una colonna larga
     un carattere, alta 4.400 px. Il riquadro misurava 1.140 px giusti: e' per questo che una
     misura della larghezza diceva « a posto » mentre a video era illeggibile.
     ⇒ La larghezza dell'elemento non e' la larghezza del testo dentro. `display:flow-root` chiude
       anche i float dei figli, cosi' il riquadro non si apre mai su una riga altrui. */
  clear:both;display:flow-root}
.dpi-pers-in{border:1px solid var(--p-bordo);border-radius:16px;background:#fff;overflow:hidden}
.dpi-pers-head{padding:20px 22px 6px}
.dpi-pers-occhiello{margin:0;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--p-acc);font-weight:700}
.dpi-pers-tit{margin:4px 0 0;font-size:22px;line-height:1.25;font-weight:700}
.dpi-pers-sot{margin:6px 0 0;font-size:13.5px;line-height:1.55;color:var(--p-muto);max-width:70ch}
.dpi-pers-vuoto{margin:20px 0;padding:12px 14px;border:1px dashed var(--p-bordo);border-radius:12px;
  color:var(--p-muto);font-size:13.5px;line-height:1.5}
.dpi-pers-nojs{padding:0 22px 18px;color:var(--p-muto)}

/* le viste */
.dpi-pers-viste{display:flex;gap:8px;flex-wrap:wrap;padding:16px 22px 0}
.dpi-pers-vista{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--p-bordo);
  background:#fff;color:var(--p-testo);border-radius:999px;padding:7px 14px;font:inherit;font-size:13px;cursor:pointer}
.dpi-pers-vista.dpi-on{border-color:var(--p-acc);background:var(--p-acc-soft);color:var(--p-acc);font-weight:600}
.dpi-pers-pallino{font-size:9px;color:var(--p-acc)}

/* i passi */
.dpi-pers-col{padding:6px 22px 0}
.dpi-pers-passo{padding:16px 0;border-bottom:1px solid var(--p-bordo)}
.dpi-pers-passo-h{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.dpi-pers-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;background:var(--p-acc);color:#fff;font-size:12px;font-weight:700;flex:none}
.dpi-pers-passo-t{font-size:14.5px;font-weight:600}

.dpi-pers-chips{display:flex;gap:8px;flex-wrap:wrap}
.dpi-pers-chip{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;
  border:1px solid var(--p-bordo);background:#fff;color:var(--p-testo);border-radius:12px;
  padding:9px 13px;font:inherit;cursor:pointer;text-align:left}
.dpi-pers-chip.dpi-on{border-color:var(--p-acc);background:var(--p-acc-soft)}
.dpi-pers-chip-n{font-size:13.5px;font-weight:600}
.dpi-pers-chip-v{font-size:11.5px;color:var(--p-muto)}

.dpi-pers-drop{display:flex;flex-direction:column;gap:3px;border:1.5px dashed var(--p-bordo);
  border-radius:12px;padding:18px;cursor:pointer;background:var(--p-panel)}
.dpi-pers-drop:hover{border-color:var(--p-acc)}
.dpi-pers-drop-t{font-size:14px;font-weight:600}
.dpi-pers-drop-s{font-size:12px;color:var(--p-muto)}
.dpi-pers-inp{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.dpi-pers-catalogo{margin-top:8px;border:none;background:none;color:var(--p-acc);font:inherit;
  font-size:13px;text-decoration:underline;cursor:pointer;padding:0}
.dpi-pers-file{display:flex;align-items:center;gap:10px;background:var(--p-acc-soft);
  border:1px solid var(--p-bordo);border-radius:12px;padding:10px 13px}
.dpi-pers-file-n{font-size:13.5px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dpi-pers-linkbtn{border:none;background:none;color:var(--p-muto);font:inherit;font-size:12.5px;
  text-decoration:underline;cursor:pointer}

.dpi-pers-cm{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.dpi-pers-per{color:var(--p-muto);font-size:13px}
.dpi-pers-num-in,.dpi-pers-txt{border:1px solid var(--p-bordo);border-radius:10px;padding:8px 10px;
  font:inherit;font-size:13.5px;box-sizing:border-box}
/* ⚠️ Il tema mette `width:100%` su ogni input: senza una regola piu' specifica il campo
   « quanti pezzi » si allargava per tutta la pagina — 1.140 px per scriverci « 100 ». */
.dpi-pers .dpi-pers-num-in{width:96px;max-width:96px}
.dpi-pers .dpi-pers-txt{width:100%;max-width:320px}
.dpi-pers-txt{width:100%;max-width:320px;margin-top:8px}
.dpi-pers-qty{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.dpi-pers-qty-l{font-size:13px;color:var(--p-muto)}
.dpi-pers-nota{margin:6px 0 0;font-size:12px;line-height:1.5;color:var(--p-muto)}
.dpi-pers-attesa{margin:0;font-size:13px;color:var(--p-muto);line-height:1.5}
.dpi-pers-check{display:flex;align-items:center;gap:9px;font-size:13.5px;cursor:pointer}

/* il catalogo grafiche */
.dpi-pers-cat{margin-top:12px;border-top:1px solid var(--p-bordo);padding-top:12px}
.dpi-pers-cat-cerca{display:flex;gap:8px;align-items:center}
.dpi-pers-cat-cerca .dpi-pers-txt{margin-top:0;max-width:260px}
.dpi-pers-cat-esito{margin-top:10px;font-size:12.5px;color:var(--p-muto)}
.dpi-pers-cat-griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:9px;max-height:320px;overflow:auto;padding-right:2px}
.dpi-pers-cat-card{border:1px solid var(--p-bordo);border-radius:10px;background:#fff;padding:6px;
  cursor:pointer;display:flex;flex-direction:column;gap:4px}
.dpi-pers-cat-card img{width:100%;height:80px;object-fit:contain;display:block;background:#F7F9FC;border-radius:6px}
.dpi-pers-cat-aut{font-size:10.5px;color:var(--p-tenue);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* la barra dei prezzi */
.dpi-pers-barra{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:16px 22px 20px;background:var(--p-panel);border-top:1px solid var(--p-bordo);margin-top:6px}
.dpi-pers-voci{display:flex;flex-direction:column;gap:5px;min-width:0}
.dpi-pers-voce{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.dpi-pers-voce-n{font-size:13px;color:var(--p-muto);min-width:74px}
.dpi-pers-voce-v{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.dpi-pers-voce-s{font-size:11.5px;color:var(--p-tenue)}
.dpi-pers-tot{text-align:right;margin-left:auto}
.dpi-pers-tot-num{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1}
.dpi-pers-tot-num--no{font-size:18px;color:var(--p-ambra)}
.dpi-pers-tot-num--vuoto{color:var(--p-tenue)}
.dpi-pers-tot-nota{font-size:11.5px;color:var(--p-muto);margin-top:3px;max-width:46ch}
.dpi-pers-ristampa-nota{flex-basis:100%;font-size:12px;line-height:1.5;color:var(--p-ambra);
  border-top:1px dashed var(--p-bordo);padding-top:9px;margin-top:4px}

@media (max-width:600px){
  .dpi-pers-tot{text-align:left;margin-left:0}
  .dpi-pers-tot-num{font-size:22px}
}

/* aggiungi al carrello */
.dpi-pers-azione{flex-basis:100%;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border-top:1px solid var(--p-bordo);padding-top:12px;margin-top:4px}
.dpi-pers .dpi-pers-cta{border:none;background:var(--p-acc);color:#fff;border-radius:11px;
  padding:12px 22px;font:inherit;font-size:14.5px;font-weight:700;cursor:pointer}
.dpi-pers .dpi-pers-cta[disabled]{background:#C9CFD8;cursor:not-allowed}
.dpi-pers-esito{font-size:12.5px;color:var(--p-muto);line-height:1.5}
.dpi-pers-esito--ok{color:#15803D}
.dpi-pers-esito--no{color:var(--p-ambra)}
.dpi-pers-vaicarrello{color:var(--p-acc);font-weight:600}

/* ═══ LA SCENA — il capo con l'area di stampa ═══════════════════════════════════════════════
   Due colonne come il prototipo: a sinistra si guarda, a destra si sceglie. Sotto i 900 px
   diventa una colonna sola, con la scena sopra: su un telefono si decide guardando. */
.dpi-pers-due{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:0;align-items:start}
@media (max-width:900px){.dpi-pers-due{grid-template-columns:1fr}}
.dpi-pers-scena{padding:16px 22px 18px;background:linear-gradient(180deg,#F5F8FC,#EDF2F8);
  border-right:1px solid var(--p-bordo);display:flex;flex-direction:column;gap:12px}
@media (max-width:900px){.dpi-pers-scena{border-right:0;border-bottom:1px solid var(--p-bordo)}}
.dpi-pers-capo{position:relative;width:100%;max-width:380px;margin:0 auto;aspect-ratio:3/4;
  background:#fff;border:1px solid var(--p-bordo);border-radius:14px;overflow:hidden;
  box-shadow:0 14px 30px -18px rgba(16,24,40,.35)}
.dpi-pers-capo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.dpi-pers-capo-vuoto{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--p-tenue);font-size:12.5px;text-align:center;padding:20px}
.dpi-pers-area{position:absolute;border:1.5px dashed rgba(27,68,171,.55);border-radius:3px;
  background:rgba(27,68,171,.06);display:flex;align-items:center;justify-content:center;
  overflow:hidden;cursor:grab;touch-action:none;user-select:none}
.dpi-pers-area.dpi-preso{cursor:grabbing;border-style:solid;border-color:var(--p-acc);background:rgba(27,68,171,.12)}
.dpi-pers-area-img{width:100%;height:100%;object-fit:contain;pointer-events:none;display:block}
.dpi-pers-area-t{font-size:10.5px;line-height:1.25;color:var(--p-acc);font-weight:600;text-align:center;
  padding:4px;pointer-events:none;overflow:hidden}
/* 🔴 QUESTA CLASSE SI CHIAMAVA `dpi-pers-misura` — E QUEL NOME ERA GIÀ PRESO.
   Lo usa il contenitore del passo 3 (« Misura e quantità »), scritto un'ora prima. Dandolo
   anche alla pastiglia dei centimetri, che è `position:absolute` con fondo bianco, TUTTO il
   passo 3 è diventato una pastiglia bianca che galleggiava sopra la barra dei prezzi.
   ⚠️ E la geometria diceva che andava tutto bene: `getBoundingClientRect` del contenitore
     misurava 67 px — giusto, perché il contenuto era uscito. Il difetto si è visto solo
     GUARDANDO la foto. Un nome per due cose: la stessa forma di stamattina. */
.dpi-pers-tagcm{position:absolute;transform:translateX(-50%);background:#fff;border:1px solid var(--p-bordo);
  border-radius:7px;padding:2px 8px;font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--p-testo);box-shadow:0 2px 6px rgba(16,24,40,.10);pointer-events:none;white-space:nowrap}
.dpi-pers-scena .dpi-pers-viste{padding:0;justify-content:center}
.dpi-pers-scena-nota{margin:0;font-size:11.5px;line-height:1.5;color:var(--p-muto);text-align:center;max-width:44ch;
  margin-left:auto;margin-right:auto}
.dpi-pers-due .dpi-pers-col{padding:6px 22px 0}