/* =====================================================================
   Home nuova (HomeNew.aspx) - componenti dell'hero: il foglio dell'esempio.
   Incluso SOLO da HomeNew.aspx: css/home-pianta.css?v=25 (alzare ?v= a ogni modifica; 18 e 19 li ha usati il giro 3;
   23 = giro 8 "struttura", 10/10/2026, sezione in fondo al file; 25 = giro 9 "rifinitura", 10/10/2026 sera, in fondo).
   09/10/2026 giro 5 (decisione interna: sulla cassa nessuna restrizione di paese): tolte le regole di "Solo per negozi
   in Italia." sotto la cassa dell'hero (.pzs-v-it, .pzs-posm-it) e della nota in fondo alla scheda di /cassa (.pzv-c-note);
   la griglia di /cassa non ha piu' la riga "note".
   09/10/2026 giro 4 (decisione interna): il file e' tornato com'era a fine giro 2 (cassa e schermi disegnati in HTML,
   impaginazione di allora); del giro 3 restavano solo le icone disegnate sp-o-*, che il giro 6 (09/10/2026, scelta interna) cambia con le sp-p-* del set A "nostre pulite" (sezione ICONE in fondo).
   09/10/2026 giro 2 (revisione punti 2 e 5): grigio #474F70 (8,01:1, prima #5D6688 5,64:1) e blu #1A47C2 (7,71:1, prima #1E4FCC
   6,90:1); note a 14 px; al telefono sezioni e schede piu' staccate; copertina dello spot piu' grande; "Solo per negozi in
   Italia." sotto la cassa; la frase della cassa al telefono non e' piu' sottolineata (non e' un link).
   09/10/2026 (correzioni dei verificatori): misure del testo sui token (--t-body 16, --t-small 14, --t-meta 13, niente
   mezze misure), elenchi a trattino col rientro, spot dell'hero senza pillola, cassa del telefono senza riquadro.
   08/10/2026 home senza tic: caratteri, rosso d'azione e ruoli tipografici puntano ai token di css/landing.css (:root);
   via icone decorative, occhielli, bollini, riquadri annidati, bordi sinistri colorati e maiuscole spaziate.
   Il nome del file e le classi pz-* restano quelle della prima versione: il pubblico non li vede.
   Passo 1 (07/10/2026): il disegno della pianta e' uscito. Nel foglio: la fila dei lavori
   (.pz-fila), le 4 schede del gestionale in griglia 2x2 (.pz-tiles), il piede (.pz-foot).
   Tutto e' sotto .pz (token e classi pz-*): non tocca landing.css ne' Servizi.aspx.
   Stato finale = stile di base. Lo stato iniziale della passata esiste solo sotto
   .pz-anim (messa da uno script in <head> e da js/home-pianta.js) e solo con il
   movimento consentito. Si animano solo opacita', colori, ombre e spostamenti di 2 px;
   animazioni con fill-mode backwards (mai both/forwards: stacking dei menu DevExpress).
   Numeri dei lavori in blu notte; il rosso resta al bottone e alla parola dell'H1.
   ===================================================================== */
.pz{
  --pz-deep:#1A2A66;--pz-ink:#1B2447;--pz-ink2:#2A3560;--pz-muted:#474F70;--pz-line:#E3E7F3;--pz-line2:#CFD6EA;
  --pz-red:var(--act);--pz-btn:var(--act);--pz-btn-hi:var(--act-hi);--pz-blue:#2F6BFF;--pz-blue-dk:#1A47C2;--pz-blue-bg:#EAF0FF;
  --pz-ok:#166534;--pz-ok-bg:#DCFCE7;--pz-warn:#92400E;--pz-warn-bg:#FEF3C7;--pz-green:#17A673;--pz-grey-n:#9AA3BF;--pz-grey-l:#CBD5E1;
  --pz-sheet:#F4F6FC;--pz-wall:#1B2447;--pz-fill:rgba(194,43,71,.14);--pz-route:#C22B47;--pz-lit:rgba(194,43,71,.34);
  --pz-ui:#0F172A;--pz-ui-b:#E2E8F0;
  --pz-disp:var(--f-sans);
  --pz-body:var(--f-sans);
  --pz-gut:clamp(16px,4vw,40px)}
.pz{font-family:var(--pz-body);line-height:1.55}
.pz *,.pz *::before,.pz *::after{box-sizing:border-box}
:where(.pz) p,:where(.pz) figure,:where(.pz) dl,:where(.pz) dd{margin:0}
:where(.pz) h1,:where(.pz) h3,:where(.pz) h4{margin:0;font-family:var(--pz-disp);letter-spacing:0;text-wrap:balance}
:where(.pz) ul,:where(.pz) ol{margin:0;padding:0;list-style:none}
:where(.pz) button{font:inherit;color:inherit}
:where(.pz) svg{display:block;max-width:100%}
.pz :focus-visible{outline:2px solid var(--pz-blue);outline-offset:2px;border-radius:4px}
.pz-hero :focus-visible{outline-color:#fff}
.pz-hero .pz-tavola :focus-visible,.pz-hero .pz-tess :focus-visible,.pz-dlg :focus-visible{outline-color:var(--pz-blue)}
.pz [hidden]{display:none!important}
.pz-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pz-ic{width:20px;height:20px;flex-shrink:0}
.pz-num{font-variant-numeric:tabular-nums}

/* ---------- bottoni ---------- */
.pz-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:0 22px;border-radius:10px;border:0;font:600 var(--t-btn)/1.15 var(--f-sans);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .15s,box-shadow .15s}
.pz-btn-red{background:var(--pz-btn);color:#fff}
.pz-btn-red:hover{background:var(--pz-btn-hi);color:#fff}
.pz-btn-line{background:transparent;color:#fff;padding:0 18px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}
.pz-btn-line:hover{color:#fff;box-shadow:inset 0 0 0 1.5px #fff;background:rgba(255,255,255,.06)}
.pz-cb{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 13px;border-radius:8px;border:1.5px solid var(--pz-line2);background:#fff;color:var(--pz-ink);font-weight:600;font-size:13.5px;cursor:pointer;white-space:nowrap}
.pz-cb .pz-ic{width:16px;height:16px}
.pz-cb:hover{border-color:var(--pz-ink)}
.pz-cb[aria-pressed="true"]{background:var(--pz-ink);color:#fff;border-color:var(--pz-ink)}
.pz-cb:disabled{opacity:.45;cursor:default}

/* =====================================================================
   S1 hero
   ===================================================================== */
.pz-hero{position:relative;overflow:hidden;background:var(--pz-deep);color:#fff;padding-block:18px 24px}
.pz-wrap{max-width:var(--pz-max,1440px);margin:0 auto;padding-inline:var(--pz-gut)}
/* colonna del testo 520 px (500 fra 1200 e 1365): con l'H1 a 44 px nessuna lingua lascia una parola sola sull'ultima riga
   (S30) e i bottoni dell'hero stanno su una riga; la cassa a destra resta larga come prima (.pzs-v-body piu' sotto) */
.pz-in{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:32px;align-items:start}
.pz-left{display:flex;flex-direction:column;padding-top:20px}
.pz-h1{order:2;margin-top:4px}
.pz-h1a{display:block;font-size:var(--t-h1);font-weight:var(--t-h1-w);font-stretch:var(--t-h1-s);line-height:var(--t-h1-lh);letter-spacing:var(--t-h1-ls);color:#fff;text-wrap:balance}
.pz-h1a.pz-lg{font-size:calc(var(--t-h1) * .9)}
/* collaudo giro 2: tetto a 39,9 px per la variante lunga; a 1440 e 1920 "Tutto il tuo supermercato / in un solo gestionale." resta su due righe come a 1366 */
/* la parola dell'attivita' nell'H1 prende il colore del titolo (prima in rosso) */
.pz-h1a em{font-style:normal;color:inherit}
.pz-h1b{display:block;margin-top:12px;font-size:clamp(1.125rem,1rem + .6vw,1.375rem);font-weight:400;line-height:1.3;letter-spacing:0;color:var(--on-deep-2)}
.pz-sel{order:3;margin-top:22px}
.pz-sub{order:4;margin-top:18px;font-size:16.5px;line-height:1.55;color:var(--on-deep-2);max-width:34em;text-wrap:pretty}
.pz-ctas{order:5;margin-top:22px;display:grid;grid-template-columns:auto auto;gap:8px 10px;justify-content:start;align-items:start}
/* correzioni del giro 2 (09/10/2026, verifica dell'aspetto, difetto 1): la riga sotto un bottone allarga la colonna fino a
   240 px come prima, ma se il bottone e' piu' largo prende tutta la sua larghezza (min-width 100% vince su max-width):
   cosi' in DE e HR, dove il bottone "Prenota" e' piu' largo di 240 px, sta su una riga */
.pz-cap{font-size:var(--t-small);line-height:1.4;color:var(--on-deep-2);max-width:240px;min-width:100%;text-wrap:balance}
.pz-call{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:7px;min-height:32px;color:#fff;font-weight:600;font-size:var(--t-small);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.45)}
.pz-call:hover{color:#fff}
.pz-call .pz-ic{width:15px;height:15px}
.pz-m-only{display:none}
.pz-prova{order:6;margin-top:16px;font-size:var(--t-small);line-height:1.45;color:var(--on-deep-2)}
.pz-prova a,.pz-cap a{color:#fff;font-weight:600;text-underline-offset:3px}
.pz-pv-parte a{display:inline-block;padding-block:3px}
.pz-refs{order:8;margin-top:14px;font-size:var(--t-small);color:var(--on-deep-2);display:none;gap:9px;align-items:flex-start;line-height:1.45}
.pz-refs b{color:#fff;font-weight:600}

/* selettore dell'attivita */
.pz-sel-top{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;margin-bottom:8px}
.pz-sel-l{font-size:14px;font-weight:600;color:var(--on-deep-2)}
.pz-pills{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.22fr);gap:8px}
.pz-pill{display:flex;align-items:center;gap:10px;min-height:52px;padding:7px 12px;border-radius:10px;border:1.5px solid rgba(255,255,255,.28);background:transparent;color:#fff;text-align:left;text-decoration:none;cursor:pointer;transition:background-color .15s,border-color .15s}
.pz-pill:hover{color:#fff;border-color:rgba(255,255,255,.62)}
.pz-pill .pz-ic{opacity:.9}
.pz-pill b{display:block;font-size:14.5px;font-weight:700;line-height:1.2}
.pz-pill small{display:block;font-size:12px;line-height:1.25;color:var(--on-deep-2);margin-top:1px}
.pz-pill[aria-selected="true"]{background:#fff;color:var(--pz-deep);border-color:#fff}
.pz-pill[aria-selected="true"] small{color:var(--pz-muted)}
.pz-sel-2{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:8px}
.pz-sel-2l{font-size:13.5px;color:var(--on-deep-2)}
.pz-pill-s{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 12px;border-radius:99px;border:1.5px dashed rgba(255,255,255,.45);color:#fff;font-weight:600;font-size:13.5px;text-decoration:none}
.pz-pill-s .pz-ic{width:16px;height:16px}
.pz-pill-s:hover{color:#fff;border-color:#fff}
.pz-pill-s[aria-selected="true"]{background:#fff;color:var(--pz-deep);border-style:solid;border-color:#fff}
.pz-sw-b{display:flex;align-items:center;gap:10px;min-height:36px;color:#fff;font-weight:600;font-size:14.5px;text-decoration:none;cursor:pointer}
.pz-sw-b:hover{color:#fff}
.pz-sw{position:relative;width:40px;height:24px;border-radius:99px;background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4);flex-shrink:0;transition:background-color .15s}
.pz-sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .15s}
.pz-sw-b[aria-checked="true"] .pz-sw{background:#4C7DFF;box-shadow:none}
.pz-sw-b[aria-checked="true"] .pz-sw::after{transform:translateX(16px)}
/* revisione 07/10: con "Ho piu' punti vendita" acceso nessuna attivita' resta bianca (scelta): le pillole vanno a meta' */
.pz-sel:has(.pz-sw-b[aria-checked="true"]) .pz-pills,.pz-sel:has(.pz-sw-b[aria-checked="true"]) .pz-sel-2{opacity:.6}
.pz-sel:has(.pz-sw-b[aria-checked="true"]) .pz-pill[aria-selected="true"],.pz-sel:has(.pz-sw-b[aria-checked="true"]) .pz-pill-s[aria-selected="true"]{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.pz-sel:has(.pz-sw-b[aria-checked="true"]) .pz-pill[aria-selected="true"] small{color:rgba(255,255,255,.72)}
.pz-sel:has(.pz-sw-b[aria-checked="true"]) .pz-pill-s[aria-selected="true"]{border-style:dashed}
/* revisione 07/10: titoli di sezione senza la parola sola a fine riga ("Ogni lavoro al suo / momento.") */
.pz h2,.hp h2,.hp h3{text-wrap:balance}
/* revisione 07/10: lo spot anche dall'hero, riga piccola sotto i bottoni */
.pz-ctas:has(.pz-h-spot) .pz-call{grid-column:auto}
/* 07/10/2026 (richiesta interna): da link sottolineato a bottone ben visibile, con il tasto play in un cerchio bianco */
.pz-h-spot{grid-column:auto;justify-self:start;display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 18px 0 6px;border:1.5px solid rgba(255,255,255,.55);border-radius:99px;background:rgba(255,255,255,.08);color:#fff;font:700 15px/1.2 var(--pz-body);text-decoration:none;cursor:pointer;margin-top:4px;transition:background-color .15s,border-color .15s}
.pz-h-spot:hover{background:rgba(255,255,255,.16);border-color:#fff}
.pz-h-spot .pz-ic{width:34px;height:34px;padding:10px 9px 10px 11px;border-radius:50%;background:#fff;color:var(--pz-deep);flex-shrink:0}
/* revisione 07/10: il cartellino di Persone nella fila ("Da Standard") */
.pz-fm-x .pz-fm-l small{display:block;margin-top:1px;font-size:11px;font-weight:600;line-height:1.1;color:var(--pz-muted);letter-spacing:0}
.pz-sel-m{display:none}
/* 07/10/2026: copertina dello spot al posto del selettore delle attivita' (apre #hpSpotDlg) */
.pz-spot-v{order:3;position:relative;display:block;width:100%;max-width:440px;margin-top:22px;padding:0;border:1.5px solid rgba(255,255,255,.35);border-radius:14px;overflow:hidden;background:#0F1A44;cursor:pointer;aspect-ratio:16/9;box-shadow:0 14px 34px rgba(0,0,0,.28);transition:border-color .15s,background-color .15s}
.pz-spot-v:hover{border-color:#fff}
.pz-spot-v:focus-visible{outline:3px solid #fff;outline-offset:3px}
.pz-spot-v img{display:block;width:100%;height:100%;object-fit:cover}
.pz-spot-p{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px 0 5px;border-radius:99px;background:rgba(15,26,68,.86);color:#fff;font:600 15px/1.2 var(--f-sans)}
.pz-spot-p .pz-ic{width:34px;height:34px;padding:9px;border-radius:50%;background:#fff;color:var(--pz-deep);flex-shrink:0}

/* ---------- il foglio dell'esempio, sul blu notte ---------- */
.pz-tavola{position:relative;background:var(--pz-sheet);color:var(--pz-ink);border-radius:12px;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 28px 70px rgba(4,9,36,.5),0 2px 6px rgba(4,9,36,.3);padding:12px 16px}
.pz-tv-bar{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;min-height:44px}
.pz-tv-tt{display:flex;align-items:center;gap:8px;margin:0;font:700 14.5px/1.2 var(--pz-disp);letter-spacing:.005em;color:inherit;text-transform:none}
.pz-tv-tt .pz-ic{width:18px;height:18px;color:var(--pz-muted)}
.pz-tv-st{min-width:6.5em;font-size:13px;color:var(--pz-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.pz-ctl{display:none;gap:6px;margin-left:auto;flex-wrap:wrap}
.pz-js .pz-ctl,.pz-anim .pz-ctl{display:flex}
.pz-cb-play{min-width:7.4em;justify-content:center}
/* movimento ridotto o spento (pz-ferma, dal <head>): niente Pausa/Rivedi, c'e' "Vedi passo per passo" */
.pz-ctl [data-pz-ctl="step"],.pz-ferma [data-pz-ctl="play"]{display:none}
.pz-ferma .pz-ctl [data-pz-ctl="step"]{display:inline-flex}
.pz-tv-body{position:relative;margin-top:10px}

/* la fila dei lavori: niente frecce fra i moduli (non sono i passi di un acquisto) */
.pz-fila{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.pz-fila li{min-width:0}
.pz-fm{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;margin:0;padding:0 8px;border-radius:9px;border:1.5px solid var(--pz-line2);background:#fff;color:var(--pz-ink);font:600 14px/1.15 var(--pz-body);text-decoration:none;cursor:pointer;white-space:nowrap;transition:border-color .2s,background-color .2s,box-shadow .2s,color .2s}
.pz-fm:hover{color:var(--pz-ink)}
.pz-fm .pz-ic{width:17px;height:17px;color:var(--pz-muted);transition:color .2s}
.pz-fm .pz-tn{transition:background-color .2s}
.pz-fm-l{overflow:hidden;text-overflow:ellipsis;min-width:0}
.pz-fm:hover,.pz-fm.pz-hv{border-color:var(--pz-blue)}
.pz-fm.pz-cur{border-color:var(--pz-blue);background:var(--pz-blue-bg);box-shadow:inset 0 -2px 0 var(--pz-blue)}
.pz-fm.pz-cur .pz-ic,.pz-fm.pz-hv .pz-ic,.pz-fm:hover .pz-ic{color:var(--pz-blue-dk)}

/* ---------- le schede del gestionale (look del prodotto), 2x2 ---------- */
.pz-tiles-col{min-width:0}
.pz-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.pz-tile{position:relative;display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--pz-ui-b);border-left:4px solid var(--pz-blue);border-radius:10px;padding:10px 14px 11px;box-shadow:0 1px 2px rgba(15,23,42,.05);transition:border-color .25s,box-shadow .25s,transform .3s}
.pz-tile:hover,.pz-tile.pz-hv{border-color:#C9D3E6;border-left-color:var(--pz-blue-dk);box-shadow:0 6px 18px rgba(15,23,42,.08)}
.pz-tile.pz-hl{box-shadow:0 0 0 2px var(--pz-blue),0 10px 24px rgba(15,23,42,.1)}
.pz-tile-h{display:flex;align-items:center;gap:8px;min-height:22px;font-size:12px;line-height:1.2}
.pz-tn{width:20px;height:20px;border-radius:50%;background:var(--pz-ink);color:#fff;font:700 11.5px/20px var(--pz-body);text-align:center;flex-shrink:0}
.pz-tr{font-weight:700;text-transform:none}
.pz-tw{margin-left:auto;color:var(--pz-muted);text-align:right;font-weight:600}
.pz-tt{margin:6px 0 8px;font:600 15px/1.3 var(--pz-body);letter-spacing:0;color:var(--pz-ui);text-wrap:pretty}
.pz-tb{all:unset;cursor:pointer;display:inline-block;min-height:24px}
.pz-tb::after{content:"";position:absolute;inset:0;border-radius:10px}
.pz-tb:focus-visible::after{box-shadow:0 0 0 2px var(--pz-blue)}
.pz-fr{margin-top:7px;padding-top:7px;border-top:1px solid #EEF1F6;font-variant-numeric:tabular-nums;font-size:13px;color:var(--pz-muted)}
/* revisione 07/10: il blocco dati sta in alto, sotto il titolo (prima in fondo: vuoto fra titolo e dati nella scheda 4) */
.pz-tile .pz-fr{margin-top:0;transition:opacity .35s ease}
.pz-fl{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:2px 8px;font-size:12px;font-weight:700;text-transform:none;color:var(--pz-muted)}
.pz-fl .pz-ic{width:13px;height:13px}
.pz-fl i{margin-left:auto;font-style:normal;font-weight:600;letter-spacing:0;text-transform:none;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.pz-fl i b{color:var(--pz-ui)}
.pz-kp{display:flex;flex-wrap:wrap;gap:2px 18px;margin-top:4px}
.pz-kp div{display:flex;align-items:baseline;gap:6px;min-width:0}
.pz-kp b{font-size:15px;font-weight:700;color:var(--pz-ui)}
.pz-kl{margin-top:4px;line-height:1.45}
.pz-kl b{color:var(--pz-ui);font-weight:700}
.pz-kl .pz-w,.pz-kl .pz-w b{color:var(--pz-warn)}
.pz-sep{margin:0 5px;color:#474F70}
.pz-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:5px;color:var(--pz-ui);font-size:13px}
.pz-grow{flex:1 1 auto;min-width:min(100%,9.5em);overflow-wrap:anywhere}
.pz-row .pz-ic{width:14px;height:14px;color:var(--pz-muted)}
.pz-chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;border-radius:99px;padding:2px 8px;white-space:nowrap;line-height:1.35}
.pz-chip .pz-ic{width:12px;height:12px}
.pz-c-ok{background:var(--pz-ok-bg);color:var(--pz-ok)}
.pz-c-w{background:var(--pz-warn-bg);color:var(--pz-warn)}
.pz-c-n{background:#EEF1F7;color:var(--pz-ink)}
.pz-c-b{background:var(--pz-blue-bg);color:var(--pz-blue-dk)}
.pz-st{position:relative;display:inline-grid}
.pz-st>*{grid-area:1/1;transition:opacity .2s}
.pz-st .pz-st-a{opacity:0}
.pz-pinok{transition:opacity .25s}
.pz-lab{display:flex;align-items:center;gap:6px;margin-top:5px;font-size:13px;font-weight:700;color:var(--pz-ink)}
.pz-lab .pz-ic{width:13px;height:13px}
.pz-tl{position:relative;z-index:2;display:inline-flex;align-items:center;gap:5px;min-height:24px;margin-top:4px;font-size:13px;font-weight:600;color:var(--pz-blue-dk);text-decoration:underline;text-underline-offset:2px;align-self:flex-start}
.pz-tl .pz-ic{width:13px;height:13px}
.pz-tag-r{display:inline-flex;font-size:12px;font-weight:700;text-transform:none;color:var(--pz-ink);border:1.2px dashed var(--pz-ink);border-radius:3px;padding:1px 5px}
.pz-sig{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:5px}
.pz-dots{display:inline-flex;gap:3px}
.pz-dots i{width:7px;height:7px;border-radius:50%;background:var(--pz-ui)}
.pz-sema{display:grid;gap:3px;margin-top:5px}
.pz-sema div{display:flex;align-items:center;gap:7px;color:var(--pz-ui)}
.pz-sema i{width:9px;height:9px;border-radius:50%;background:var(--pz-green);flex-shrink:0}
.pz-sema i.pz-y{background:#F59E0B}
.pz-sema span{color:var(--pz-muted)}
/* revisione 07/10: etichette di testo al posto dei pallini; quella in attesa in ambra */
.pz-sema div{display:block}
.pz-sema span.pz-w{color:var(--pz-warn);font-weight:600}
/* revisione 07/10: i numeri chiave del foglio grandi come nello spot (20-22 px, 800, cifre tabellari) */
.pz-tile .pz-kp{gap:2px 20px}
.pz-tile .pz-kp b,.pz-tile .pz-row>b.pz-num{font-size:21px;font-weight:700;line-height:1.15;letter-spacing:0;color:var(--pz-ui);font-variant-numeric:tabular-nums}
.pz-tile .pz-fl i b.pz-num,.pz-tile .pz-kl .pz-w b{font-size:20px;font-weight:700;line-height:1.1;letter-spacing:0;font-variant-numeric:tabular-nums}
.pz-tile .pz-fl i b.pz-num{color:var(--pz-ui)}
.pz-ex{margin-left:auto;font-size:10.5px;font-weight:700;text-transform:none;color:var(--pz-muted);border:1px solid var(--pz-line2);border-radius:4px;padding:2px 6px;background:#fff}
.pz-stepmode .pz-tile:not(.pz-hl){opacity:.5}

/* piede del foglio: la frase finale, "tocca una scheda", la nota d'esempio */
.pz-foot{margin-top:12px;padding-top:10px;border-top:1px solid rgba(27,36,71,.14);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 18px;align-items:baseline}
.pz-frase{grid-column:1/-1;font:700 15.5px/1.3 var(--pz-disp);color:var(--pz-ink);letter-spacing:0;text-wrap:balance}
/* revisione 07/10: "un solo gestionale" in blu (a fine passata, vedi .pz-anim piu' sotto) */
.pz-frase em{font-style:normal;color:var(--pz-blue-dk)}
.pz-hint{display:flex;align-items:flex-start;gap:7px;font-size:13px;line-height:1.4;color:var(--pz-ink)}
.pz-hint .pz-ic{width:14px;height:14px;margin-top:2px;color:var(--pz-blue-dk)}
.pz-exn{font-size:12.5px;line-height:1.4;color:var(--pz-muted);text-align:right}

/* "Vedi come elenco": i quattro passi (sempre nel DOM, visibili solo qui) */
.pz-list{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pz-as-list .pz-list{position:static;width:auto;height:auto;overflow:visible;clip:auto}
.pz-as-list .pz-fila,.pz-as-list .pz-tiles-col{display:none}
.pz-as-list .pz-hint{visibility:hidden}
.pz-list ol{display:grid;gap:8px}
.pz-list li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;background:#fff;border:1px solid var(--pz-ui-b);border-radius:8px;padding:10px 12px;font-size:14.5px;line-height:1.4}
.pz-list li .pz-tn{margin-top:1px}
.pz-list li small{display:block;color:var(--pz-muted);font-size:13px;margin-top:3px}
.pz-list-h{font:700 11.5px/1.3 var(--pz-body);text-transform:none;color:var(--pz-muted);margin:2px 0 8px}

/* ---------- tessera "Esempio" (telefono e tablet): 4 righe nel primo schermo ---------- */
.pz-tess{display:none;background:var(--pz-sheet);color:var(--pz-ink);border-radius:12px;padding:10px 12px 12px;box-shadow:0 14px 34px rgba(4,9,36,.4)}
.pz-ts-h{display:flex;align-items:center;gap:10px;min-height:48px;padding-bottom:8px;border-bottom:1px solid rgba(27,36,71,.14)}
.pz-ts-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:9px;background:#fff;border:1px solid var(--pz-line);color:var(--pz-muted);flex-shrink:0}
.pz-ts-ic .pz-ic{width:20px;height:20px}
.pz-ts-h>div{flex:1;min-width:0}
.pz-ts-h b{display:block;font:700 14.5px/1.2 var(--pz-disp)}
.pz-ts-h div span{display:block;font-size:12.5px;color:var(--pz-muted);margin-top:2px}
.pz-ts-h .pz-cb{width:44px;height:44px;min-height:44px;padding:0;justify-content:center;flex-shrink:0}
.pz-ts-rows{margin-top:4px}
.pz-ts-b{display:flex;align-items:center;gap:10px;width:calc(100% + 12px);min-height:36px;margin:0 -6px;padding:4px 6px;border:0;border-radius:8px;background:transparent;font-size:14px;line-height:1.3;color:var(--pz-ink);text-align:left;cursor:pointer;transition:background-color .2s,box-shadow .2s}
.pz-ts-b:hover{background:rgba(47,107,255,.07)}
.pz-n{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--pz-ink);color:#fff;font-size:12px;font-weight:700;flex-shrink:0}
.pz-ts-b b{font-weight:700}
.pz-w2{color:var(--pz-warn);font-weight:700;transition:color .25s}
.pz-ts-f{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:12.5px;color:var(--pz-muted)}
.pz-ts-f .pz-ic{width:14px;height:14px}

/* ---------- riquadro del lavoro (desktop accanto alla scheda, telefono dal basso) ---------- */
.pz-dlg{border:0;padding:0;margin:auto;color:var(--pz-ink);background:transparent;max-width:none;max-height:none;overflow:visible}
.pz-dlg::backdrop{background:rgba(10,16,48,.45)}
.pz-dlg-in{width:min(440px,calc(100vw - 32px));max-height:calc(100vh - 40px);overflow:auto;background:#fff;border-radius:16px;box-shadow:0 30px 80px rgba(4,9,36,.4);padding:22px 24px 24px}
.pz-dlg-h{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.pz-dlg-k{font-size:12px;font-weight:700;text-transform:none;color:var(--pz-muted);padding-top:8px}
.pz-x{flex-shrink:0;display:grid;place-items:center;width:44px;height:44px;margin:-6px -8px 0 0;border:1.5px solid var(--pz-line);border-radius:10px;background:#fff;color:var(--pz-ink);cursor:pointer}
.pz-x .pz-ic{width:18px;height:18px}
.pz-dlg-b{margin-top:10px}
.pz-rd{display:grid;gap:10px}
.pz-rd-t{font:700 18px/1.3 var(--pz-disp)}
.pz-rd .pz-fr{position:relative;background:#fff;border:1px solid var(--pz-ui-b);border-left:4px solid var(--pz-blue);border-radius:10px;padding:10px 12px;margin-top:0;font-size:13px}
.pz-rd .pz-fr .pz-ex{position:absolute;right:10px;top:-10px}
.pz-rd .pz-st-a{opacity:0!important}
.pz-rd .pz-st-b,.pz-rd .pz-pinok{opacity:1!important}
.pz-rd-txt{font-size:15px;color:var(--pz-muted)}
.pz-rd-note{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;background:var(--pz-sheet);border-radius:10px;padding:10px 14px;line-height:1.45}
.pz-rd-note .pz-ic{width:18px;height:18px;margin-top:1px;color:var(--pz-blue-dk)}
.pz-rd-note.pz-ia{background:#FFF8E6}
.pz-rd-note.pz-ia .pz-ic{color:var(--pz-warn)}
.pz-rd-where{font-size:14px;color:var(--pz-muted)}
.pz-rd-where b{color:var(--pz-ink)}
.pz-more{justify-self:start;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0;border:0;background:none;font-weight:700;font-size:15px;color:var(--pz-blue-dk);text-decoration:none;cursor:pointer}
.pz-more .pz-ic{width:16px;height:16px}
.pz-more:hover{text-decoration:underline;text-underline-offset:3px}
.pz-rdata{display:none!important}

/* ---------- segni (S3, S4, prezzi) ---------- */
.pz-sg{display:inline-block;width:16px;height:11px;flex-shrink:0;border-radius:1px}
.pz-sg-p{background:var(--pz-blue-bg);box-shadow:inset 0 0 0 1.5px var(--pz-blue-dk)}
.pz-sg-f{background:repeating-linear-gradient(45deg,rgba(27,36,71,.5) 0 1.2px,transparent 1.2px 4px);box-shadow:inset 0 0 0 1.2px rgba(27,36,71,.55)}
.pz-sg-r{border:1.5px dashed rgba(27,36,71,.6)}
/* "Sei qui" di "Come funziona": l'indice dei lavori */
.pz-qui{position:sticky;top:96px}
.pz-qui-h{font-size:14px;color:var(--pz-muted)}
.pz-qui-h b{color:var(--pz-ink);font-weight:600}
.pz-qui-l{margin-top:14px;display:grid;gap:2px}
.pz-qui-l a{display:flex;align-items:baseline;gap:10px;padding:7px 8px;border-radius:7px;text-decoration:none;color:var(--pz-muted);font-weight:400;font-size:var(--t-body);transition:background-color .2s,color .2s}
.pz-qui-l a span{display:inline-block;min-width:1.1em;font-size:var(--t-body);font-weight:700;font-stretch:80%;font-variant-numeric:tabular-nums;color:var(--pz-muted);transition:color .2s}
.pz-qui-l a:hover,.pz-qui-l a.pz-cur{color:var(--pz-ink);background:var(--pz-sheet)}
.pz-qui-l a.pz-cur{font-weight:600}
.pz-qui-l a.pz-cur span{background:none;color:var(--pz-ink)}
/* "Che cassa hai?": senza JS le risposte sono un elenco */
.pz-js [data-pz-casse-dl]{display:none}
/* senza JavaScript la tessera del telefono non ha il bottone Pausa (non farebbe nulla) */
html:not(.pz-js) .pz-tess [data-pz-ctl]{display:none}
html:not(.pz-js) [data-pz-casse-out],html:not(.pz-js) [data-pz-cassa]{display:none}

/* ---------- barra fissa del telefono (Prenota + telefono) ---------- */
.pz-sticky{display:none}
.pz-st-on .chat-fab{bottom:calc(20px + var(--pz-stk,64px))}
.pz-st-on .chat-panel{bottom:calc(92px + var(--pz-stk,64px))}

/* =====================================================================
   La passata (4,1 s, solo con movimento consentito). .pz-anim = stato iniziale (lavori in grigio,
   dati delle schede smorzati); .pz-on = lavoro gia' passato; .pz-cur = lavoro corrente; .pz-paused = in pausa.
   Il passo N seleziona il modulo N della fila e la scheda N. Niente si "accende": cambiano bordo e numero.
   ===================================================================== */
@media screen and (prefers-reduced-motion:no-preference){
@keyframes pzIn{from{opacity:0}}
.pz-frase em{transition:color .3s ease}
.pz-anim .pz-frase em{color:inherit}
.pz-snap,.pz-snap *{transition:none!important}
.pz-anim .pz-fm .pz-tn{background:var(--pz-grey-n)}
.pz-anim .pz-fm.pz-on .pz-tn{background:var(--pz-ink)}
.pz-anim .pz-fm.pz-cur .pz-tn{background:var(--pz-blue-dk)}
.pz-anim .pz-tile{border-left-color:var(--pz-grey-l)}
.pz-anim .pz-tile .pz-tn{background:var(--pz-grey-n);transition:background-color .2s}
.pz-anim .pz-tile .pz-fr{opacity:.38}
.pz-anim .pz-tile.pz-on{border-left-color:var(--pz-blue)}
.pz-anim .pz-tile.pz-on .pz-tn{background:var(--pz-ink)}
.pz-anim .pz-tile.pz-on .pz-fr{opacity:1}
.pz-anim .pz-tile.pz-cur{box-shadow:0 0 0 2px var(--pz-blue),0 12px 26px rgba(15,23,42,.12);transform:translateY(-2px)}
.pz-anim .pz-pinok{opacity:0}
.pz-anim .pz-pinok.pz-on{opacity:1}
.pz-anim .pz-st .pz-st-a{opacity:1}
.pz-anim .pz-st .pz-st-b{opacity:0}
.pz-anim .pz-st.pz-on .pz-st-a{opacity:0}
.pz-anim .pz-st.pz-on .pz-st-b{opacity:1}
.pz-anim .pz-ts-rows li .pz-n{background:var(--pz-grey-n);transition:background-color .2s}
.pz-anim .pz-ts-rows li.pz-on .pz-n{background:var(--pz-ink)}
.pz-anim .pz-ts-rows li.pz-cur .pz-ts-b{background:rgba(47,107,255,.1);box-shadow:inset 3px 0 0 var(--pz-blue)}
.pz-anim .pz-w2:not(.pz-on){color:inherit;font-weight:inherit}
.pz-paused,.pz-paused *{transition-duration:0s!important}
.pz-dlg[open]{animation:pzIn .15s ease-out backwards}
}

/* =====================================================================
   desktop stretto, tablet, telefono
   ===================================================================== */
@media (min-width:1200px) and (max-width:1365px){
  .pz-in{grid-template-columns:minmax(0,500px) minmax(0,1fr);gap:28px}
  .pz-ctas .pz-btn{font-size:.9375rem;padding:0 18px}
  .pz-fila{gap:6px}
  .pz-fm{gap:6px;padding:0 6px;font-size:13.5px}
  .pz-fm .pz-ic{display:none}
  .pz-fm-x .pz-ic{display:block}
  .pz-tile{padding:10px 12px 11px}
  .pz-tt{font-size:14.5px}
}
/* 1366-1439: con l'icona i nomi lunghi (DE "Rechnungen", EN "Warehouse") finivano coi puntini: icona e spazi piu' piccoli */
@media (min-width:1366px) and (max-width:1439px){
  .pz-fm{gap:5px;padding:0 5px;font-size:13.5px}
  .pz-fm .pz-ic{width:15px;height:15px}
}
/* tablet (collaudo 07/10): una forma sola, il foglio sotto le azioni e niente tessera (prima c'erano due volte gli stessi 4 lavori) */
@media (max-width:1199px){
  .pz-in{grid-template-columns:minmax(0,1fr);gap:28px}
  .pz-left{grid-column:1;grid-row:1;max-width:720px}
  .pz-tess{display:none}
  .pz-tavola{grid-column:1;width:100%;max-width:880px;margin-inline:auto}
  .pz-cap{max-width:none;text-wrap:balance}
}
@media (min-width:761px) and (max-width:959px){.pz-ctas{grid-template-columns:auto}}
/* tablet: la fila sta in 5 colonne strette, l'icona lascia il posto al nome (Persone, senza numero, la tiene) */
@media (min-width:761px) and (max-width:1023px){.pz-fm{gap:6px;padding:0 6px}.pz-fm .pz-ic{display:none}.pz-fm-x .pz-ic{display:block}}
@media (max-width:1023px){.pz-qui{display:none}}
@media (max-width:760px){
  .pz-hero{padding-block:14px 36px}
  .pz-in{display:flex;flex-direction:column;gap:0}
  .pz-left,.pz-ctas{display:contents}
  .pz-h1{margin-top:8px}
  .pz-h1b{font-size:18px;margin-top:6px}
  .pz-ctas .pz-btn-red{order:3;width:100%;min-height:50px;margin-top:14px;font-size:16px;white-space:normal;text-align:center}
  .pz-cap{display:none}
  .pz-call{order:5;display:flex;min-height:44px;font-weight:600;font-size:var(--t-body);text-decoration:none}
  .pz-call .pz-ic{width:17px;height:17px}
  .pz-m-only{display:inline;font-weight:400;color:var(--on-deep-2)}
  /* S29: spazio fra la riga dei clienti e il bottone dei prezzi */
  .pz-ctas .pz-btn-line{order:6;width:100%;min-height:46px;margin-top:16px;justify-content:center;padding:0 14px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
  .pz-tess{order:8;display:block;margin-top:10px}
  .pz-sel{display:none}
  .pz-sel-m{order:9;display:block;margin-top:14px}
  .pz-spot-v{order:9;max-width:none;margin-top:14px}
  .pz-sm-row{display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--pz-gut));padding:2px var(--pz-gut)}
  .pz-sm-row::-webkit-scrollbar{display:none}
  .pz-sm-l{flex:0 0 auto;font-size:13px;font-weight:600;color:var(--on-deep-2)}
  .pz-sm-b{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;padding:0 13px;border-radius:99px;border:1.5px solid rgba(255,255,255,.4);color:#fff;font-weight:600;font-size:13.5px;white-space:nowrap;text-decoration:none}
  .pz-sm-b:hover{color:#fff}
  .pz-sm-b[aria-current="true"]{background:#fff;color:var(--pz-deep);border-color:#fff}
  .pz-refs{order:10;display:flex;margin-top:10px;font-size:var(--t-small)}
  .pz-tavola{order:11;margin-top:18px;padding:10px 10px 12px}
  .pz-sub{order:12;margin-top:22px;font-size:16px}
  .pz-prova{order:13;font-size:var(--t-small)}
  .pz-ts-h{min-height:44px;padding-bottom:6px}
  .pz-ts-b{min-height:34px}
  .pz-tv-bar{gap:8px}
  .pz-tv-st{display:none}
  .pz-ctl{margin-left:0;width:100%}
  .pz-ctl .pz-cb{flex:1;min-height:44px;justify-content:center}
  .pz-tv-body{margin-top:12px}
  /* nomi interi anche a 360 px in DE ("Rechnungen"): la fila prende 4 px del margine del foglio, il nome scende fino a ~10 px */
  /* collaudo 07/10: a 360-390 px i nomi scendevano a 10 px e i numeri sporgevano. Quattro voci (Persone esce dalla fila
     del telefono), nomi a 11,5 px, numero dentro la tessera */
  .pz-fila{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .pz-fila li:has(.pz-fm-x){display:none}
  .pz-fm{flex-direction:column;gap:3px;min-height:58px;padding:7px 2px 6px;font-size:11.5px;letter-spacing:0}
  .pz-fm .pz-ic{width:18px;height:18px}
  .pz-fm .pz-tn{position:absolute;top:4px;left:4px;width:17px;height:17px;font-size:10.5px;line-height:17px}
  .pz-fm-l{max-width:100%;font-size:11.5px;letter-spacing:0}
  .pz-tiles{grid-template-columns:minmax(0,1fr)}
  .pz-tile{padding:10px 12px 11px}
  .pz-tt{font-size:14.5px}
  .pz-tile-h{flex-wrap:wrap}
  .pz-foot{grid-template-columns:minmax(0,1fr)}
  .pz-exn{text-align:left}
  .pz-dlg[open]{margin:auto 0 0 0;width:100%}
  .pz-dlg-in{width:100vw;max-height:70vh;border-radius:18px 18px 0 0;padding:16px 16px 24px}
  .pz-sticky{position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid var(--pz-line);box-shadow:0 -8px 20px rgba(27,36,71,.1);transform:translateY(110%);visibility:hidden}
  .pz-sticky.pz-show{transform:none;visibility:visible}
  /* il testo lungo del bottone ("Prenota una demo di 30 minuti") va a capo invece di uscire dal bordo */
  .pz-sticky .pz-btn-red{flex:1;min-height:48px;white-space:normal;line-height:1.15;font-size:.9375rem;padding:0 12px;text-align:center}
  .pz-st-tel{display:grid;place-items:center;width:52px;min-height:48px;border-radius:10px;color:var(--pz-ink);box-shadow:inset 0 0 0 1.5px var(--pz-line2)}
}
@media (max-width:380px){.pz-pills{grid-template-columns:minmax(0,1fr)}}
@media print{.pz-ctl,.pz-sticky,.pz-dlg{display:none!important}}

/* =====================================================================
   S1b "Le parti del gestionale - Da dove vuoi partire?" (#da-dove, HtmlParti; raccomandazione_linee 3.2 e 7.1).
   Stili dell'anteprima linee_prodotto/anteprima/_src/stile.css (prefisso lx-/lp-), rinominati pz-pt-*.
   Occhiello in blu (non in rosso); avvisi in ambra; schermate con "Esempio". Sul telefono: indice delle parti con
   il prezzo e schede che scorrono di lato con lo scatto, dentro la sezione (la pagina non scorre di lato).
   ===================================================================== */
.pz-pt{background:#fff;padding-block:56px 60px;border-bottom:1px solid var(--pz-line)}
.pz-pt-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 40px;align-items:end}
.pz-pt-head .hp-h{max-width:none}
.pz-pt-head .hp-sub{max-width:46em}
/* link senza freccia: sottolineati */
.pz-pt-more{display:inline-block;padding-block:3px;font-weight:600;font-size:var(--t-body);line-height:1.4;color:var(--pz-blue-dk);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.pz-pt-more:hover{color:var(--pz-blue-dk);text-decoration-thickness:2px}
.pz-nw{white-space:nowrap}
/* 2x2 del computer: testo e schermata di ogni scheda nella stessa riga della griglia (subgrid), la striscia "Si registra"
   del Contante nella riga sotto; cosi' prezzo e link (in fondo alla colonna) si allineano fra le due schede della riga */
/* revisione 07/10: sotto Lotti restava un buco bianco (circa 170 px) accanto alla scheda Contante, piu' alta per la striscia
   "Si registra". Ora, da 1366 px, la striscia sta nella colonna della schermata, sotto i saldi, una riga per modo: le due
   schede della riga hanno la stessa altezza (si stirano) e prezzo e link restano in fondo alla colonna del testo */
@media (min-width:1366px){
  .pz-pt-card:has(.pz-pt-dove){grid-template-rows:auto minmax(0,1fr)}
  .pz-pt-card:has(.pz-pt-dove) .pz-pt-txt{grid-column:1;grid-row:1/span 2}
  .pz-pt-card:has(.pz-pt-dove) .pz-pt-ui{grid-column:2;grid-row:1}
  .pz-pt-card .pz-pt-dove{grid-column:2;grid-row:2;border-top:0;padding-top:0}
  .pz-pt-card .pz-pt-dove ul{flex-direction:column;gap:4px}
  .pz-pt-card .pz-pt-dove li{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:7px;padding:6px 8px}
  .pz-pt-card .pz-pt-dove li em{margin-left:auto}
}
.pz-pt-idx{display:none}
.pz-pt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 40px;margin-top:30px}
.pz-pt-card{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:18px 20px;align-items:start;background:none;border:0;border-top:1px solid var(--pz-line);border-radius:0;padding:24px 0 0;min-width:0;scroll-margin-top:90px}
.pz-pt-txt{display:flex;flex-direction:column;min-width:0;height:100%}
.pz-pt-h{display:block}
.pz-pt h3{font:600 var(--t-h3)/1.2 var(--f-sans);letter-spacing:0;color:var(--pz-ink)}
.pz-pt-t{margin-top:10px;font-size:var(--t-body);line-height:1.5;color:var(--pz-ink2)}
.pz-pt-x{margin-top:8px;font-size:var(--t-small);line-height:1.45;color:var(--pz-muted)}
.pz-pt-it{display:block;margin-top:8px;font-size:var(--t-small);line-height:1.4;color:var(--pz-muted)}
.pz-pt-for{margin-top:10px;font-size:var(--t-small);line-height:1.45;color:var(--pz-muted)}
.pz-pt-price{margin-top:auto}
.pz-pt-price::before{content:"";display:block;margin:14px 0 12px;border-top:1px solid var(--pz-line)}
.pz-pt-pr{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
/* prezzi come i cartellini da scaffale: Archivo stretto, 700, cifre tabellari */
.pz-pt-pr b{font:700 var(--t-price-m)/1.05 var(--f-sans);font-stretch:var(--t-price-s);letter-spacing:0;font-variant-numeric:tabular-nums;color:var(--pz-ink)}
.pz-pt-pr span{font-size:var(--t-small);color:var(--pz-muted);font-weight:400}
.pz-pt-price small{display:block;margin-top:3px;font-size:var(--t-small);line-height:1.4;color:var(--pz-muted)}
.pz-pt-pr-t b{font-size:1.0625rem;font-stretch:100%;font-weight:600;line-height:1.25;letter-spacing:0}
.pz-pt-txt .pz-pt-more{margin-top:12px;align-self:flex-start}
.pz-pt-ui{margin:0;min-width:0}
.pz-pt-ui .hp-uiw{border-radius:12px;box-shadow:0 8px 22px rgba(15,23,42,.08)}
.pz-pt-ui .hp-uiw-h{padding:8px 11px;gap:8px;min-width:0}
.pz-pt-ui .hp-uiw-h b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pz-pt-ui .hp-uiw-h small{white-space:nowrap;font-size:12px}
.pz-pt-ui .hp-ex{flex-shrink:0}
.pz-pt-ui .hp-uiw-b{padding:10px 11px;font-size:12.5px}
.pz-pt-ui .hp-chip{font-size:10.5px;padding:0 6px}
.pz-pt-ui .hp-chip .pz-ic{width:11px;height:11px;margin-right:2px}
/* 1: chiusura + telefono del negozio online */
.pz-pt-ui.pz-pt-duo{display:grid;grid-template-columns:minmax(0,1fr) 122px;gap:10px;align-items:end}
.pz-pt-arr{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--pz-muted);margin-bottom:7px}
.pz-pt-kp{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.pz-pt-kp div,.pz-pt-sl div{background:#fff;border:1px solid var(--pz-ui-b);border-radius:9px;padding:6px 8px;min-width:0}
.pz-pt-kp div{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.pz-pt-kp span,.pz-pt-sl span{display:block;font-size:11.5px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--pz-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pz-pt-kp b{font-size:16px;font-weight:700;white-space:nowrap}
.pz-pt-rows{display:grid;background:#fff;border:1px solid var(--pz-ui-b);border-radius:9px;overflow:hidden;margin-top:7px}
.pz-pt-rows div{display:flex;justify-content:space-between;gap:8px;padding:5px 9px;border-bottom:1px solid #EEF0F4;font-size:12px;white-space:nowrap}
.pz-pt-rows div:last-child{border-bottom:0}
.pz-pt-rows span{overflow:hidden;text-overflow:ellipsis}
.pz-pt-rows b{font-weight:700}
.pz-pt-ph{background:#0F172A;border-radius:20px;padding:5px;box-shadow:0 10px 22px rgba(15,23,42,.22)}
.pz-pt-ph-s{background:#fff;border-radius:15px;overflow:hidden;color:var(--pz-ui)}
.pz-pt-ph-h{background:var(--pz-deep);color:#fff;font-weight:700;font-size:11px;padding:9px 9px 7px;line-height:1.25}
.pz-pt-ph-b{display:grid;gap:2px;padding:8px 9px 9px;font-size:11px;line-height:1.3}
.pz-pt-ph-b small{color:var(--pz-muted);font-size:10.5px}
.pz-pt-ph-b b.pz-pt-t1{font-size:12px}
.pz-pt-ph-b b.pz-pt-eur{font-size:16px;font-weight:700;margin-top:3px}
.pz-pt-ph-b .hp-chip{justify-self:start;margin-top:3px}
.hp-chip.pz-pt-chip-b{background:var(--pz-blue-bg);color:var(--pz-blue-dk)}
.pz-pt-ph-b small.pz-pt-src{margin-top:5px;border-top:1px solid #EEF0F4;padding-top:5px;font-size:9.5px}
/* 2: margini */
.pz-pt-bars{display:grid;gap:6px}
.pz-pt-bars div{display:grid;grid-template-columns:78px minmax(0,1fr) 50px;align-items:center;gap:7px;font-size:12px}
.pz-pt-bars span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pz-pt-bars i{display:block;height:9px;border-radius:5px;background:var(--pz-blue)}
.pz-pt-bars b{text-align:right;font-weight:700;white-space:nowrap}
.pz-pt-foot{display:flex;justify-content:space-between;gap:8px;margin-top:8px;padding:6px 9px;background:#fff;border:1px solid var(--pz-ui-b);border-radius:9px;font-size:12px}
.pz-pt-foot b{font-weight:700;white-space:nowrap}
.pz-pt-foot.pz-pt-w,.pz-pt-sl div.pz-pt-w{border-color:#F2D86B;background:#FFFBEB}
.pz-pt-foot.pz-pt-w b,.pz-pt-sl div.pz-pt-w b{color:var(--pz-warn)}
/* 3: lotto */
.pz-pt-lh{display:flex;justify-content:space-between;gap:8px;align-items:baseline;font-size:12px;color:var(--pz-muted);margin-bottom:6px}
.pz-pt-lh b{color:var(--pz-ink);font-size:13px}
.pz-pt-lt{display:grid;background:#fff;border:1px solid var(--pz-ui-b);border-radius:9px;overflow:hidden}
.pz-pt-lt div{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px;padding:5px 9px;border-bottom:1px solid #EEF0F4;font-size:12px;white-space:nowrap;align-items:baseline}
.pz-pt-lt div:last-child{border-bottom:0}
.pz-pt-lt em{font-style:normal;font-weight:600;color:var(--pz-muted);font-size:12px;letter-spacing:0;text-transform:none;min-width:60px}
.pz-pt-lt span{overflow:hidden;text-overflow:ellipsis}
.pz-pt-lt b{font-weight:700}
.pz-pt-or{margin-top:6px;font-size:11.5px;color:var(--pz-muted)}
.pz-pt-act{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap}
.pz-pt-act span{border:1px solid var(--pz-line2);background:#fff;border-radius:7px;padding:3px 7px;font-size:11.5px;font-weight:700;color:var(--pz-ink)}
.pz-pt-anche{margin-top:10px;font-size:12.5px;line-height:1.45;color:var(--pz-muted)}
.pz-pt-anche b{color:var(--pz-ink);font-weight:700}
/* 4: contante */
.pz-pt-sl{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pz-pt-sl b{display:block;font-size:15px;font-weight:700;white-space:nowrap}
.pz-pt-mv{display:grid;background:#fff;border:1px solid var(--pz-ui-b);border-radius:9px;overflow:hidden;margin-top:7px}
.pz-pt-mv>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;padding:5px 9px;border-bottom:1px solid #EEF0F4;font-size:12px}
.pz-pt-mv>div:last-child{border-bottom:0}
.pz-pt-mv>div>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pz-pt-mv>div>b{font-weight:700;text-align:right;white-space:nowrap}
.pz-pt-mv small{grid-column:1/-1;color:var(--pz-muted);font-size:11px;display:flex;flex-wrap:wrap;gap:3px 6px;align-items:center}
.pz-pt-dove{grid-column:1/-1;border-top:1px solid var(--pz-line);padding-top:12px}
.pz-pt-dove-h{font-size:11px;font-weight:700;text-transform:none;color:var(--pz-muted);margin-bottom:7px}
.pz-pt-dove ul{display:flex;gap:8px}
.pz-pt-dove li{flex:1 1 0;display:flex;flex-direction:column;gap:3px;background:var(--pz-sheet);border:1px solid var(--pz-line);border-radius:10px;padding:8px 9px;font-size:12.5px;line-height:1.3;font-weight:600;color:var(--pz-ink);min-width:0}
.pz-pt-dove li .pz-ic{width:17px;height:17px;color:var(--pz-blue-dk)}
.pz-pt-dove li em{font-style:normal;font-size:11.5px;font-weight:600;color:var(--pz-muted)}
.pz-pt-dove li em.pz-pt-ok{color:var(--pz-ok)}
/* banda Tutto insieme */
.pz-pt-all{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.2fr) minmax(0,.8fr);gap:28px;align-items:center;margin-top:40px;background:none;border:0;border-top:1px solid var(--pz-line);border-radius:0;padding:28px 0 0;scroll-margin-top:90px}
.pz-pt-all .pz-pt-t{font-size:var(--t-body)}
.pz-pt-mods{background:#fff;border:1px solid var(--pz-ui-b);border-radius:12px;padding:12px 14px;font-size:13.5px;font-weight:600;color:var(--pz-ink)}
.pz-pt-mods-h{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;font-weight:700;text-transform:none;color:var(--pz-muted);margin-bottom:8px}
.pz-pt-mods ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px}
.pz-pt-mods li{display:flex;align-items:center;gap:7px;min-width:0}
.pz-pt-mods li .pz-ic{width:16px;height:16px;color:var(--pz-green)}
.pz-pt-allpr .pz-pt-pr b{font-size:var(--t-price-l);line-height:1}
.pz-pt-allpr .pz-pt-pr span{font-size:var(--t-small)}
.pz-pt-allpr small{display:block;margin-top:6px;font-size:var(--t-small);line-height:1.45;color:var(--pz-muted)}
.pz-pt-allpr .hp-b{margin-top:14px}
/* niente testo tagliato con i puntini nelle schermate (DE "Obst und Gemuese", HR "Jucerasnje zakljucenje"): le etichette vanno a capo */
.pz-pt-ui .hp-uiw-h b,.pz-pt-kp span,.pz-pt-sl span,.pz-pt-bars span,.pz-pt-lt span,.pz-pt-rows span{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.pz-pt-lt div,.pz-pt-rows div{white-space:normal}
.pz-pt-bars span{line-height:1.2}
/* hero: la riga del telefono sotto il bottone Prezzi (solo sotto i 760 px) */
.pz-h-parte{display:none}
@media (max-width:1365px) and (min-width:761px){
  .pz-pt-grid{grid-template-columns:minmax(0,1fr)}
  .pz-pt-all{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pz-pt-all .pz-pt-allpr{grid-column:1/-1}
}
@media (max-width:760px){
  .pz-h-parte{order:7;display:inline-block;margin-top:10px;padding-block:3px;align-self:flex-start;color:#fff;font-weight:600;font-size:var(--t-body);line-height:1.4;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.5)}
  .pz-h-parte:hover{color:#fff}
  .pz-h-spot{order:7;display:inline-flex;align-self:flex-start;min-height:46px;margin-top:10px;font-size:15px;font-weight:700}
  .pz-h-spot .pz-ic{width:34px;height:34px}
  /* collaudo giro 2: il link "Anche solo una parte" della riga piccola ripeteva quello qui sopra */
  .pz-pv-parte{display:none}
  .pz-pt{padding-block:56px}
  .pz-pt-head{grid-template-columns:minmax(0,1fr)}
  .pz-pt-idx{display:grid;margin-top:18px;background:none;border:0;border-top:1px solid var(--pz-line);border-radius:0;overflow:hidden}
  .pz-pt-idx li{border-bottom:1px solid var(--pz-line)}
  .pz-pt-idx li:last-child{border-bottom:0}
  .pz-pt-idx a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;min-height:48px;padding:0 2px;color:var(--pz-ink);text-decoration:none;font-weight:600;font-size:var(--t-body);line-height:1.25}
  .pz-pt-idx a b{font-weight:700;font-stretch:80%;font-variant-numeric:tabular-nums;font-size:var(--t-body);white-space:nowrap}
  .pz-pt-idx li.pz-pt-idx-all a{background:none}
  /* giro 2 (revisione punto 2): sotto il nome la riga che spiega il prezzo, uguale alla scheda (fatture, cassa in aggiunta) */
  .pz-pt-idx a small{display:block;margin-top:3px;font-size:var(--t-small);font-weight:400;line-height:1.35;color:var(--pz-muted)}
  /* valori a parole ("nel gestionale", "In Premium"): corpo piccolo, a capo a destra; il nome della parte ha la riga intera */
  /* righe tutte alte uguali anche quando un nome lungo (DE, HR) va su due righe */
  .pz-pt-idx a{min-height:56px;padding-block:6px;font-size:var(--t-body)}
  .pz-pt-idx li.pz-pt-idx-t a b{max-width:11em;white-space:normal;text-align:right;font-size:var(--t-meta);font-weight:600;font-stretch:100%;line-height:1.25;color:var(--pz-muted)}
  .pz-pt-grid{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin:16px calc(-1 * var(--pz-gut)) 0;padding:2px var(--pz-gut) 10px;scroll-padding-inline:var(--pz-gut);scrollbar-width:none;align-items:flex-start;transition:height .2s ease}
  .pz-pt-grid::-webkit-scrollbar{display:none}
  .pz-pt-card{flex:0 0 88%;scroll-snap-align:start;grid-template-columns:minmax(0,1fr);padding:28px 0 0}
  .pz-pt-txt{order:1;height:auto}
  .pz-pt-ui{order:2}
  .pz-pt-dove{order:3}
  /* striscia "Si registra" corta: una riga per modo (la scheda del contante era la piu' alta) */
  .pz-pt-dove ul{flex-direction:column;gap:4px}
  .pz-pt-dove li{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:7px;padding:6px 8px}
  .pz-pt-dove li em{margin-left:auto}
  .pz-pt-ui.pz-pt-duo{grid-template-columns:minmax(0,1fr) 104px;gap:8px}
  .pz-pt-ui.pz-pt-duo .hp-uiw-h b{font-size:12px}
  /* collaudo giro 2: "Chiusura di ieri" su una riga a 390 (etichetta Esempio piu' piccola) */
  .pz-pt-ui.pz-pt-duo .hp-uiw-h{gap:5px}
  .pz-pt-ui.pz-pt-duo .hp-uiw-h,.pz-pt-ui.pz-pt-duo .hp-uiw-b{padding-inline:8px}
  .pz-pt-ui .hp-uiw-b{overflow-x:visible}
  /* niente puntini nelle schermate strette: il titolo va a capo, il nome del negozio esce, le etichette dei saldi vanno a capo */
  .pz-pt-ui .hp-uiw-h b{white-space:normal}
  .pz-pt-ui .hp-uiw-h small{display:none}
  .pz-pt-sl span{white-space:normal}
  .pz-pt-kp span{letter-spacing:0;font-size:11px}
  .pz-pt-kp div{flex-direction:column;align-items:flex-start;gap:1px}
  .pz-pt-kp b{font-size:14px}
  .pz-pt-bars div{grid-template-columns:70px minmax(0,1fr) 46px}
  .pz-pt-all{grid-template-columns:minmax(0,1fr);gap:16px;padding:28px 0 0}
  .pz-pt-allpr .hp-b{width:100%}
}
@media (max-width:380px){
  .pz-pt-card{flex-basis:90%}
  .pz-pt-ui.pz-pt-duo{grid-template-columns:minmax(0,1fr)}
  .pz-pt-ui.pz-pt-duo .pz-pt-ph{max-width:170px}
  .pz-pt-mods ul{grid-template-columns:minmax(0,1fr)}
}
@media print{.pz-pt-grid{display:block}.pz-pt-idx{display:none}}

/* =====================================================================
   HOME SNELLA (07/10/2026, verdetto home_wow/passo1/home_snella): 6 parti e 3 pagine a parte.
   pzs-* = disposizione della home snella (anteprima hs-*); pzv-* = la cassa in vetrina (anteprima pv-*);
   cs-* = lo schermo della nostra cassa (POS/POS.aspx) ricostruito in HTML, misure in em scalate con la cornice
   (1em = 14 px dello schermo vero, larghezza di progetto --dw). Colori veri della cassa, tranne DEL, X e ANNULLA:
   grigio scuro invece del rosso (il rosso sta solo sul bottone principale e sulla parola dell'H1).
   ===================================================================== */
/* ---------- lo schermo della cassa: PC touch su supporto ---------- */
.cs-dev{position:relative;container:csd/inline-size;background:#151A26;border-radius:14px;padding:9px 9px 11px;box-shadow:0 16px 36px rgba(4,9,36,.28),0 2px 6px rgba(4,9,36,.18);margin:0 0 22px}
.cs-dev::after{content:"";position:absolute;left:50%;bottom:-20px;width:22%;height:20px;transform:translateX(-50%);background:linear-gradient(#2B3142,#1B2030);clip-path:polygon(18% 0,82% 0,100% 100%,0 100%);border-radius:0 0 6px 6px}
.cs-dev::before{content:"";position:absolute;left:50%;top:3px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#3A4256}
.cs{--dw:1280;position:relative;overflow:hidden;border-radius:5px;background:#f8f9fa;color:#202124;font:400 calc(100cqw * 14 / var(--dw))/1.25 "Segoe UI",Arial,sans-serif;letter-spacing:0;display:flex;flex-direction:column;text-align:left}
.cs *{box-sizing:border-box}
.cs--full{--dw:1280;aspect-ratio:1280/800}
.cs--dlg{--dw:760;aspect-ratio:760/560}
.cs--dlg .cs-tr{grid-template-columns:minmax(0,1fr) 7.6em 5.2em}
.cs--dlg .cs-tr>:nth-child(1),.cs--dlg .cs-tr>:nth-child(3),.cs--dlg .cs-tr>:nth-child(6){display:none}
.cs--dlg .cs-tabs{grid-template-columns:1fr 1fr}
.cs--dlg .cs-tabs span:nth-child(n+3){display:none}
.cs--dlg .cs-pay{grid-template-columns:1fr}
.cs-top{flex:0 0 3.143em;display:flex;align-items:center;gap:.43em;padding:0 .57em;background:#202124;color:#fff;overflow:hidden;white-space:nowrap}
.cs-b{display:inline-flex;align-items:center;gap:.4em;height:2.3em;padding:0 .8em;border-radius:99px;font-size:.857em;font-weight:600;background:#3c4043;color:#fff;flex-shrink:0}
.cs-b-on{background:#34a853}
.cs-b-neg{background:#cfe2ff;color:#084298;border-radius:.7em}
.cs-b-op{background:#d1e7dd;color:#0f5132;border-radius:.7em}
.cs-b-op i{font-style:normal;background:#1a73e8;color:#fff;border-radius:99px;padding:0 .5em;font-weight:700}
.cs-b-op small{font-size:.9em;background:#fff;border-radius:.3em;padding:0 .35em;color:#202124}
.cs-main{flex:1;min-height:0;display:grid;grid-template-columns:3fr 2fr}
.cs-l{display:flex;flex-direction:column;gap:.43em;padding:.57em;min-width:0;min-height:0}
.cs-art{display:flex;align-items:center;gap:.57em;background:#fff;border-radius:.43em;padding:.57em;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.cs-art b{font-weight:600}
.cs-in{flex:1;min-width:0;height:2.857em;display:flex;align-items:center;padding:0 .86em;border:1.5px solid #dadce0;border-radius:.43em;color:#80868b;font-size:1.07em;white-space:nowrap;overflow:hidden}
.cs-cam{flex:0 0 2.857em;height:2.857em;border-radius:.43em;background:#5f6368;color:#fff;display:grid;place-items:center}
.cs-cam svg{width:1.45em;height:1.45em}
.cs-cerca{height:2.6em;padding:0 1.4em;border-radius:.43em;background:#1a73e8;color:#fff;font-weight:700;display:flex;align-items:center}
.cs-msg{background:#e6f4ea;border:1px solid #ceead6;color:#137333;border-radius:.43em;padding:.6em 1em;font-size:.93em;font-weight:600;white-space:nowrap;overflow:hidden}
.cs-cart{flex:1;min-height:0;background:#fff;border-radius:.43em;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.cs-tr{display:grid;grid-template-columns:2.2em minmax(0,1fr) 5.2em 7.6em 5.2em 2.4em;align-items:center;gap:0 .4em;padding:0 .7em;min-height:3.25em;border-bottom:1px solid #e8eaed;font-size:.93em}
.cs-th{min-height:2.5em;background:#e8eaed;color:#5f6368;font-size:.8em;font-weight:600;text-transform:uppercase}
.cs-th .cs-qh{text-align:center}
.cs-tr .r{text-align:right;white-space:nowrap}
.cs-nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-q{display:flex;align-items:center;justify-content:center;gap:.45em}
.cs-q i{font-style:normal;width:1.9em;height:1.9em;border:1px solid #dadce0;border-radius:.3em;display:grid;place-items:center;font-weight:700;background:#fff}
.cs-q b{min-width:2.4em;text-align:center}
.cs-x{width:1.9em;height:1.9em;border-radius:.3em;background:#5f6368;color:#fff;display:grid;place-items:center;font-weight:700;justify-self:end;font-size:.9em}
.cs-tot{display:flex;align-items:baseline;justify-content:flex-end;gap:1em;background:#fff;border-radius:.43em;padding:.65em 1em;color:#5f6368;font-size:.93em;box-shadow:0 1px 2px rgba(0,0,0,.08);white-space:nowrap}
.cs-tot b{font-size:1.55em;color:#202124;font-weight:800;margin-left:.5em}
.cs-kp{display:grid;grid-template-columns:repeat(4,1fr);gap:.29em}
.cs-kp span{height:2.75em;display:grid;place-items:center;background:#fff;border:1px solid #dadce0;border-radius:.33em;font-size:1.29em;font-weight:700}
.cs-kp .k-qta{background:#1a73e8;color:#fff;border-color:#1a73e8}
.cs-kp .k-del{background:#5f6368;color:#fff;border-color:#5f6368}
.cs-kp .k-c{background:#fbbc04;color:#202124;border-color:#fbbc04}
.cs-kp .k-ent{background:#34a853;color:#fff;border-color:#34a853}
.cs-act{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.29em}
.cs-act span{height:3.1em;display:grid;place-items:center;border-radius:.43em;color:#fff;font-weight:700}
.cs-totb{background:linear-gradient(#0d6efd,#0b5ed7)}
.cs-nuovo{background:#5f6368}
.cs-r{display:flex;flex-direction:column;min-width:0;min-height:0;background:#e8eaed;padding:0 0 .57em}
.cs-rc{margin:0 .57em;background:#fff;border-radius:0 0 .43em .43em;padding:.9em 1.2em;font:.93em/1.6 "Courier New",Courier,monospace;color:#202124}
.cs-rc div{display:flex;justify-content:space-between;gap:1em;white-space:nowrap}
.cs-rc .sep{color:#9aa0a6;justify-content:center}
.cs-rc .tt{font-weight:700;font-size:1.22em;margin-top:.25em}
.cs-tabs{display:grid;grid-template-columns:repeat(4,1fr);background:linear-gradient(#f8f9fa,#e9ecef);margin-top:.57em}
.cs-tabs span{display:grid;place-items:center;height:3.1em;font-weight:700;color:#3c4043;letter-spacing:.02em}
.cs-tabs .on{color:#0b5ed7;background:#fff;box-shadow:inset 0 -3px 0 #0b5ed7}
.cs-panel{flex:1;min-height:0;background:#fff;padding:.7em;display:flex;flex-direction:column;gap:.57em}
.cs-sch{display:flex;gap:.3em;align-items:center}
.cs-sch span{padding:.35em .9em;border:1px solid #dadce0;border-radius:.3em;font-weight:600;background:#fff}
.cs-sch .on{background:#1a73e8;color:#fff;border-color:#1a73e8}
.cs-sch .mod{margin-left:auto;font-size:.85em;background:#f8f9fa}
.cs-qk{display:grid;grid-template-columns:repeat(4,1fr);gap:.3em}
.cs-qk span{display:flex;flex-direction:column;align-items:center;padding:.45em .2em;background:#f8f9fa;border:1px solid #dadce0;border-radius:.3em;font-size:.86em;font-weight:700;text-align:center;line-height:1.2}
.cs-qk small{font-size:.83em;color:#80868b;font-weight:400;margin-top:.15em}
.cs-pay{display:grid;grid-template-columns:1fr 1fr;gap:.5em}
.cs-pay span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3em;height:4.6em;border-radius:.43em;font-weight:700;border:1px solid}
.cs-pay i{font-style:normal;font-size:.75em;background:#cfe2ff;color:#0b5ed7;border-radius:99px;padding:0 .55em}
.cs-p-cont{background:#d1e7dd;border-color:#a3cfbb!important;color:#0f5132}
.cs-p-carta{background:#fff3cd;border-color:#ffe69c!important;color:#664d03}
.cs-due{margin-top:auto;display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid #e8eaed;padding-top:.6em;color:#5f6368}
.cs-due b{font-size:1.7em;color:#202124;font-weight:800}
.cs-print{margin:.57em .57em 0;height:3.4em;display:grid;place-items:center;background:#202124;color:#fff;border-radius:.43em;font-weight:800;font-size:1.05em}
.cs-storico{margin:.43em .57em 0;height:2.6em;display:grid;place-items:center;background:#1a73e8;color:#fff;border-radius:.43em;font-weight:700}
.cs-ov{position:absolute;inset:0;background:rgba(32,33,36,.42);display:grid;place-items:center}
.cs-dlg{width:31em;max-width:92%;background:#fff;border-radius:.9em;padding:1.5em 1.7em;box-shadow:0 1em 3em rgba(0,0,0,.3);display:flex;flex-direction:column;gap:.8em}
.cs-dlg .d-h{font-size:1.3em;font-weight:700}
.cs-dlg .d-tot{background:#f1f3f4;border-radius:.43em;padding:.75em;text-align:center;font-size:1.12em}
.cs-dlg .d-l{font-weight:600;margin-bottom:-.4em}
.cs-dlg .d-in{height:2.6em;border:2px solid #1a73e8;border-radius:.43em;display:flex;align-items:center;justify-content:flex-end;padding:0 .8em;font-size:1.25em}
.cs-dlg .d-resto{background:#e6f4ea;border-radius:.43em;padding:.75em;text-align:center;font-size:1.45em}
.cs-dlg .d-btn{display:grid;grid-template-columns:1fr 1fr;gap:.5em}
.cs-dlg .d-btn span{height:2.9em;display:grid;place-items:center;border-radius:.43em;color:#fff;font-weight:700}
.cs-dlg .d-ok{background:#34a853}
.cs-dlg .d-no{background:#5f6368}
.cs-dlg .d-ban{display:grid;grid-template-columns:repeat(6,1fr);gap:.3em}
.cs-dlg .d-ban span{height:2.2em;display:grid;place-items:center;border:1px solid #a8c7fa;background:#e8f0fe;color:#1a73e8;border-radius:.3em;font-weight:700;font-size:.9em}
.cs-dlg .d-ban .ex{background:#34a853;color:#fff;border-color:#34a853}
/* cornice stretta (telefono): ritaglio sulla colonna della vendita, con i pagamenti sotto (come la cassa vera sotto i 900 px) */
@container csd (max-width:380px){
  .cs,.cs--full,.cs--dlg{--dw:470;aspect-ratio:auto}
  .cs-main{grid-template-columns:minmax(0,1fr)}
  .cs-top .cs-b:nth-child(n+4){display:none}
  .cs-cam,.cs-cerca{display:none}
  .cs-tr{grid-template-columns:minmax(0,1fr) 6.8em 4.8em}
  .cs-tr>:nth-child(1),.cs-tr>:nth-child(3),.cs-tr>:nth-child(6){display:none}
  .cs-kp,.cs-act,.cs-rc,.cs-print,.cs-storico{display:none}
  .cs-qk span:nth-child(n+5){display:none}
  .cs-r{padding:0 .57em .57em}
  .cs-tabs{margin-top:0}
  .cs-due{margin-top:.2em}
  .cs--dlg{min-height:39em}
  .cs-msg{white-space:normal}
}

/* ---------- la cassa in piccolo (telefono, primo schermo) e il gestionale accanto ---------- */
.pzv-mini{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:8px;align-items:center}
.pzv-mini-pos{background:#151A26;border-radius:8px;padding:4px;display:flex;flex-direction:column;overflow:hidden}
.pzv-mini-pos>div{background:#f8f9fa}
.pzv-mini-top{display:flex;gap:4px;padding:3px 4px;background:#202124!important;border-radius:4px 4px 0 0;font:600 9px/1.3 "Segoe UI",Arial,sans-serif;white-space:nowrap;overflow:hidden}
.pzv-mini-top span{background:#3c4043;color:#fff;border-radius:99px;padding:1px 6px}
.pzv-mini-top .on{background:#34a853}
.pzv-mini-tot{display:flex;justify-content:space-between;align-items:baseline;gap:6px;padding:6px 7px 4px;color:#5f6368;font:400 11px/1.2 "Segoe UI",Arial,sans-serif}
.pzv-mini-tot b{color:#202124;font-size:13.5px;font-weight:800;white-space:nowrap}
.pzv-mini-pay{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:2px 6px 6px;border-radius:0 0 4px 4px}
.pzv-mini-pay span{display:grid;place-items:center;height:26px;border-radius:4px;border:1px solid;font:700 10.5px/1 "Segoe UI",Arial,sans-serif}
.pzv-mini-pay .c{background:#d1e7dd;border-color:#a3cfbb;color:#0f5132;box-shadow:0 0 0 2px #1a73e8}
.pzv-mini-pay .k{background:#fff3cd;border-color:#ffe69c;color:#664d03}
.pzv-mini-g{display:flex;flex-direction:column;gap:1px;padding:7px 9px;border-radius:9px;background:#fff;color:#0F172A;box-shadow:none;font-size:12px;line-height:1.25;min-width:0}
.pzv-mini-g small{font-size:10.5px;font-weight:600;letter-spacing:0;text-transform:none;color:#474F70}
.pzv-mini-g b{font-size:13px;color:#0F172A}
.pzv-mini-g span{font-size:14px;font-weight:800}
.pzv-mini-g em{font-style:normal;font-size:11px;font-weight:700;color:#1A47C2}
/* i due passi della vetrina: il numero in tipografia, senza cerchio */
.pzv-step{display:flex;align-items:baseline;gap:7px;margin:0 0 7px;font-size:var(--t-meta);font-weight:600;letter-spacing:0;color:var(--pz-ink,#1B2447)}
.pzv-step span{display:inline;width:auto;height:auto;border-radius:0;background:none;color:var(--pz-ink,#1B2447);font-size:var(--t-body);font-weight:700;font-stretch:80%;font-variant-numeric:tabular-nums;flex-shrink:0}
.pzv-new{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:8px;padding:8px 10px;border-radius:9px;background:#EAF0FF;box-shadow:none;color:#0F172A;font-size:13px}
.pzv-new>span:first-child{flex:1 1 12em}
.pzv-new>b{font-size:16px;font-weight:700}
.pzv-mag{display:block;margin-top:8px;font-size:12.5px;color:#474F70;line-height:1.4}
.pzv-chip-b{background:#EAF0FF;color:#1A47C2}
.pzv-new .pzv-chip-b{background:#fff}
.pzv-carta{display:block;margin-top:2px;font-size:var(--t-small);color:#474F70}
.pzv-it{display:block;margin-top:8px;font-size:var(--t-small);line-height:1.4;color:#474F70}

/* ---------- "Da dove vuoi partire?": la scheda della cassa, la piu' grande ---------- */
.pzv-cassa{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:22px 32px;margin-top:26px;padding:32px 0 0;border-radius:0;background:none;border:0;border-top:1px solid var(--pz-line,#E3E7F3);scroll-margin-top:90px;color:var(--pz-ink,#1B2447)}
.pzv-cassa h3{font:600 var(--t-h3-lg)/1.2 var(--f-sans);letter-spacing:0;margin:0}
.pzv-cassa h2{font-size:var(--t-h2);font-weight:var(--t-h2-w);font-stretch:var(--t-h2-s);line-height:var(--t-h2-lh);letter-spacing:0;margin:0}
.pzv-c-lead{margin-top:12px;font-size:1.0625rem;line-height:1.5;color:#1B2447}
.pzv-c-list{margin-top:14px;display:grid;gap:7px}
/* elenchi a trattino col rientro: la riga che va a capo (e la nota della carta) parte sotto il testo, non sotto il trattino */
.pzv-c-list li{display:block;position:relative;padding-left:1.1em;font-size:var(--t-body);line-height:1.45;color:#2A3560}
.pzv-c-list li::before{content:"\2013";position:absolute;left:0;color:var(--pz-muted,#474F70)}
.pzv-cassa .pz-pt-for{margin-top:12px}
.pzv-c-price{margin-top:16px;padding-top:14px;border-top:1px solid #E3E7F3;display:grid;gap:5px}
.pzv-c-price .pz-pt-pr b{font-size:var(--t-price-l)}
.pzv-c-price small{font-size:var(--t-small);line-height:1.45;color:#474F70}
.pzv-c-cta{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.pzv-c-ui{margin:0;position:relative;min-width:0;padding-bottom:4px;align-self:start}
.pzv-c-float{position:relative;width:min(100%,330px);margin:-70px 0 0 auto;z-index:2}
.pzv-c-float .hp-uiw{box-shadow:0 18px 40px rgba(15,23,42,.22)}
.pzv-c-cap{margin-top:10px;font-size:var(--t-meta);color:#474F70}
.pzv-c-for{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.pzs-c-for{grid-template-columns:repeat(2,minmax(0,1fr))}
.pzv-f{display:flex;flex-direction:column;gap:8px;padding:16px 0 0;border-radius:0;background:none;border-top:1px solid var(--pz-line,#E3E7F3);min-width:0}
.pzs-c-for .pzv-f{flex-direction:row;flex-wrap:wrap;align-items:flex-start}
.pzs-c-for .pzv-f>p{flex:1 1 14em}
.pzs-c-for .pzv-f>.pzv-tav,.pzs-c-for .pzv-f>.pzv-ord{flex:1 1 15em;margin-top:0}
.pzv-f p{font-size:var(--t-body);line-height:1.45;color:#2A3560}
.pzv-f p b{color:#1B2447;font-weight:700}
/* il nome del riquadro; il prezzo nella frase ("40 EUR al mese in piu'") resta in linea */
.pzv-f p b:first-child{display:block;font:600 var(--t-lead)/1.3 var(--f-sans);margin-bottom:2px}
.pzv-tav{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:auto}
.pzv-tav div{background:#fffdf9;border:1px solid #d8d2c8;border-radius:10px;padding:7px 9px;display:flex;flex-direction:column;font-size:12px}
.pzv-tav b{font-size:13px;color:#202124}
.pzv-tav em{font-style:normal;font-weight:700;color:#b3541e;font-size:15px}
.pzv-tav .ok{color:#2e7d32}
.pzv-tav .w{color:#92400E;font-weight:600}
.pzv-ord{margin-top:auto;display:flex;flex-direction:column;gap:5px;background:#fff;border:1px solid #E2E8F0;border-radius:10px;padding:8px 10px;font-size:12.5px;color:#0F172A}
.pzv-ord-h{font-weight:700}
.pzv-ord-b{display:flex;justify-content:space-between;color:#474F70}
.pzv-ord-b b{color:#0F172A;font-size:15px}
.pzv-ord .hp-chip{align-self:flex-start;font-size:11.5px}
.pzv-grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pzv-grid3 .pz-pt-card{grid-template-columns:minmax(0,1fr)}
.pzs-grid3{margin-top:20px}

/* ---------- 1. hero: a sinistra titolo, spot e azioni; a destra la cassa ---------- */
.pzs-hero{padding-block:18px 30px}
.pzs-hero .pz-spot-v{max-width:340px;margin-top:20px}
.pzs-hero .pz-prova{margin-top:14px}
.pzs-refs{display:flex;order:7}
.pzs-posm{display:none}
.pzs-vetrina{position:relative;background:var(--pz-sheet,#F7F8FC);color:var(--pz-ink,#1B2447);border-radius:12px;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 28px 70px rgba(4,9,36,.5),0 2px 6px rgba(4,9,36,.3);padding:12px 18px 14px;margin-top:6px;min-width:0}
.pzs-vetrina :focus-visible{outline-color:var(--pz-blue)}
.pzs-v-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:34px}
.pzs-v-tt{display:block;font-weight:600;font-size:16px;letter-spacing:0}
.pzs-v-ex{font-size:var(--t-meta);font-weight:400;color:var(--pz-muted,#474F70);white-space:nowrap}
.pzs-v-body{position:relative;margin-top:8px;padding-right:150px;min-height:470px}
/* C7: la colonna del testo e' cresciuta di 40 px; lo schermo della cassa resta largo come prima */
@media (min-width:1200px){.pzs-v-body{padding-right:110px}}
@media (min-width:1200px) and (max-width:1365px){.pzs-v-body{padding-right:90px}.pzs-v-float{width:280px}}
.pzs-v-body>.cs-dev{margin-bottom:26px}
.pzs-v-float{position:absolute;right:0;bottom:2px;width:300px;z-index:2}
.pzs-v-float .pzv-step{background:var(--pz-sheet,#F7F8FC);border-radius:8px;padding:4px 6px;margin-left:-6px;width:max-content;max-width:100%}
.pzs-v-float .hp-uiw{box-shadow:0 18px 40px rgba(15,23,42,.24)}
.pzs-v-float .hp-uiw-h small{display:none}
.pzs-v-foot{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:12px;padding-top:11px;border-top:1px solid var(--pz-line,#E3E7F3);font-size:14px;line-height:1.45;color:var(--pz-ink2,#2A3560)}
.pzs-v-foot b{color:var(--pz-ink,#1B2447)}
.pzs-v-foot a{font-weight:600;white-space:nowrap;color:var(--pz-blue-dk,#1A47C2);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.pzs-v-foot a:hover{text-decoration-thickness:2px}

/* ---------- 3. Lo attiviamo noi: i clienti e le verifiche ---------- */
.pzs-fid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:20px 40px;margin-top:30px;padding-top:24px}
/* la riga sta dentro i margini della pagina (sul .wrap andava da bordo a bordo) */
.pzs-fid::before{content:"";position:absolute;top:0;left:var(--hp-gut,16px);right:var(--hp-gut,16px);border-top:1px solid var(--pz-line2,#CFD6EA)}
.pzs-fid h3{color:var(--pz-ink,#1B2447);font:600 var(--t-h3)/1.25 var(--f-sans);letter-spacing:0;margin:0}
.pzs-fid ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:7px}
.pzs-fid li{display:block;position:relative;padding-left:1.1em;font-size:var(--t-body);line-height:1.45;color:#2A3560}
.pzs-fid li::before{content:"\2013";position:absolute;left:0;color:var(--pz-muted,#474F70)}
.pzs-fid li b{color:var(--pz-ink,#1B2447);font-weight:600}
.pzs-fid-note{margin-top:10px;font-size:var(--t-small);line-height:1.45;color:var(--pz-muted,#474F70)}

/* ---------- 4. Prezzi ---------- */
.pzs-tutti{margin-top:14px;font-size:var(--t-body)}
.pzs-tutti a{font-weight:600;color:var(--hp-blue-dk,#1A47C2);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.pzs-tutti a:hover{text-decoration-thickness:2px}
/* "Tutto insieme": senza l'elenco dei moduli, due colonne */
#da-dove .pz-pt-all{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}

/* ---------- pagine a parte: testata, cassa, come arriva la vendita ---------- */
.pz-pg{padding-block:22px 34px}
/* il percorso "SP Software / La cassa": navigazione, non un occhiello */
.pz-pg-bc{font-size:var(--t-small);font-weight:400;color:var(--on-deep-2)}
.pz-pg-bc a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.45)}
.pz-pg-h1{margin:10px 0 0;font-size:var(--t-h1);font-weight:var(--t-h1-w);font-stretch:var(--t-h1-s);line-height:var(--t-h1-lh);letter-spacing:var(--t-h1-ls);color:#fff;max-width:22em;text-wrap:balance}
/* titolo di due frasi (HomeNew.aspx.vb, TitoloAFrasi): ogni frase va a capo per conto suo */
.pz-pg-h1 .pz-pg-fr{display:block}
.pz-pg-sub{margin-top:14px;font-size:1.0625rem;line-height:1.55;color:var(--on-deep-2);max-width:68ch}
.pz-pg-ctas{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
.pz-pg-cassa{padding-block:8px 40px}
.pzv-pagina{margin-top:20px}
.pzv-pagina .pzv-c-ui{padding-bottom:0}
.pzv-pagina{border-top:0;padding-top:8px}
/* S24 (/cassa): il gestionale nella colonna di sinistra, sotto il prezzo; lo schermo della cassa al centro delle due righe */
.pzv-c-gest .hp-uiw{box-shadow:0 8px 22px rgba(15,23,42,.08)}
@media (min-width:1200px){
  .pzv-pagina{grid-template-areas:"txt ui" "gest ui" "for for";align-items:start}
  .pzv-pagina .pzv-c-txt{grid-area:txt}
  .pzv-pagina .pzv-c-ui{grid-area:ui;align-self:center}
  .pzv-pagina .pzv-c-gest{grid-area:gest;max-width:420px}
  .pzv-pagina .pzv-c-for{grid-area:for}
}
.pz-pg-come .hp-rblocks{margin-top:24px}

/* ---------- tablet ---------- */
@media (max-width:1199px){
  .pzs-vetrina{max-width:880px;width:100%;margin-inline:auto}
  .pzv-cassa{grid-template-columns:minmax(0,1fr)}
  .pzv-c-for{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pzv-grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ---------- telefono ---------- */
@media (max-width:760px){
  .nav-right .hp-nav-acc{display:inline-flex!important;align-items:center;font-size:var(--t-body)}
  .pzs-vetrina{display:none}
  /* 09/10/2026: la cassa in piccolo sta direttamente sul blu (prima in un riquadro bordato: due livelli di riquadri) */
  .pzs-posm{order:3;display:flex;flex-direction:column;gap:10px;margin-top:18px;padding:0;border-radius:0;background:none;box-shadow:none;color:#fff;font-size:var(--t-body);line-height:1.45}
  .pzs-posm-t{display:block;color:#fff;text-decoration:none}
  .pzs-posm-t:hover{color:#fff}
  /* la frase della nostra cassa resta in evidenza (C10): 600 e sottolineata, il resto a 400 */
  .pzs-posm-h{font-weight:600}
  .pzs-posm-pr{margin:0;color:var(--on-deep-2);font-size:var(--t-small)}
  .pzs-posm-pr b{color:#fff;font-weight:700}
  .pzs-hero .pz-ctas .pz-btn-red{order:4}
  .pzs-hero .pz-spot-v{max-width:none}
  .pzs-refs{order:5;margin-top:6px}
  .pzv-cassa{margin-top:36px;padding:28px 0 0;gap:16px}
  .pzv-c-lead{font-size:var(--t-body)}
  .pzv-c-float{width:100%;margin:-8px 0 0}
  .pzv-c-for,.pzs-c-for{grid-template-columns:minmax(0,1fr)}
  .pzs-c-for .pzv-tav,.pzs-c-for .pzv-ord{display:none}
  /* le schede di "Da dove vuoi partire?" una sotto l'altra, senza esempi */
  .pz-pt-grid.pzs-grid3{display:grid;grid-template-columns:minmax(0,1fr);overflow:visible;margin:36px 0 0;padding:0;gap:40px;height:auto!important}
  .pzs-grid3 .pz-pt-card{flex:none;width:auto}
  .pzs-grid3 .pz-pt-ui{display:none}
  #da-dove .pz-pt-all{grid-template-columns:minmax(0,1fr)}
  /* correzioni del giro 2 (difetto 9): "Lo verifichiamo con te prima di partire" aveva 23 px sopra, ora come gli altri titoli */
  .pzs-fid{grid-template-columns:minmax(0,1fr);row-gap:36px}
  .pz-pg-sub{font-size:16px}
  .pz-pg-ctas .pz-btn-red{width:100%;min-height:50px}
  .cs-dev{padding:4px;border-radius:9px;margin-bottom:6px;box-shadow:0 8px 20px rgba(4,9,36,.18)}
  .cs-dev::after,.cs-dev::before{display:none}
}

/* ---------- correzioni del collaudo (07/10/2026 sera) ---------- */
/* hero al computer: lo spot e' un bottone con una miniatura minima (la vetrina accanto e' l'unica cassa grande) */
@media (min-width:761px){
  /* 09/10/2026: niente pillola bordata intorno (un riquadro in meno nell'hero): miniatura, play e la frase, sottolineata al passaggio */
  .pzs-hero .pz-spot-v{display:inline-flex;align-items:center;align-self:flex-start;gap:12px;width:auto;max-width:100%;aspect-ratio:auto;padding:0;border:0;border-radius:7px;background:none;box-shadow:none;overflow:visible}
  .pzs-hero .pz-spot-v:hover{background:none}
  /* giro 2 (revisione punto 5): copertina piu' grande (prima 96x54), un fotogramma con la cassa in uso */
  .pzs-hero .pz-spot-v img{width:224px;height:126px;border-radius:8px;flex-shrink:0;opacity:1}
  .pzs-hero .pz-spot-v .pz-spot-p{position:static;min-height:0;padding:0;background:none;font-size:var(--t-body);text-underline-offset:3px}
  .pzs-hero .pz-spot-v:hover .pz-spot-p{text-decoration:underline}
  .pzs-hero .pz-spot-v .pz-spot-p .pz-ic{width:30px;height:30px;padding:8px}
}
/* correzioni del giro 2 (difetto 4): copertina a 224 px solo con l'hero a due colonne; quando l'hero si impila (761-1199)
   resta piccola, cosi' non spinge sotto il primo schermo la cassa grande che viene dopo */
@media (min-width:761px) and (max-width:1199px){
  .pzs-hero .pz-spot-v img{width:128px;height:72px}
}
/* vetrina: "Vendite totali" su una riga */
.pzs-v-float .hp-kpi b{white-space:nowrap;font-size:19px;letter-spacing:0}
/* /cassa al telefono: la cassa in piccolo subito sotto il titolo */
.pz-pg-mini{display:none}
/* /moduli-e-prezzi: la sezione senza H2 non lascia il vuoto */
section.hp-sec.pz-pg-tutto{padding-top:28px}
.pz-pg-tutto .hp-signs{margin-top:0}
.pz-pg-tutto .hp-all-in{margin-top:24px}
/* ancore di prima di "Come funziona" (stanza-...): restano valide */
.pz-alias{display:block;height:0;overflow:hidden;scroll-margin-top:90px}
@media (max-width:760px){
  .pz-pg-mini{display:block;margin-top:16px;max-width:420px}
}

/* =====================================================================
   ICONE (giro 6, 09/10/2026, scelta interna): set A "nostre pulite", sprite sp-p-* in HomeNew.aspx, al posto delle
   sp-o-* disegnate del giro 3 (tenute nel giro 4). Accanto ai titoli delle parti di "Da dove vuoi partire?", dei blocchi
   di Come funziona (e /cassa) e dei riquadri "per chi" della cassa. Mai nei punti elenco, mai dentro riquadri colorati.
   Colori dalle variabili --sp-p-ink (tratto) e --sp-p-tinta (campitura). Le porte dell'hub stanno nello stile di
   HomeNew.aspx. Allineamento ottico: il centro del disegno sul centro delle maiuscole della prima riga del titolo, a ogni
   larghezza (i titoli crescono col clamp delle variabili). Archivo a peso 600: ascendente .88, discendente .21, maiuscole
   .69 em; con interlinea 1,2 il centro delle maiuscole sta a .59 em dalla cima della riga (1,3: .64 em). Margine =
   .59 x corpo - meta' icona, piu' una correzione misurata in pagina (giro6_icone\lavoro\esito_*.json, "delta").
   ===================================================================== */
/* sul blu notte dell'hero: la versione chiara del set A (oggi nell'hero non escono icone: la regola resta per la prossima) */
.pz-hero .sp-p{--sp-p-ink:#F4F6FC;--sp-p-tinta:#34478F}
/* ... ma la vetrina della cassa (computer) e' un foglio chiaro: li' i colori di sempre */
.pz-hero .pzs-vetrina .sp-p{--sp-p-ink:#1B2447;--sp-p-tinta:#DCE2F7}
/* "Da dove vuoi partire?": l'oggetto accanto al titolo di ogni parte; nei riquadri "per chi" accanto al nome */
.pz-pt-h{display:flex;align-items:flex-start;gap:12px}
.pz-pt-h .sp-p{margin-top:calc(var(--t-h3) * .59 - 16px)}
.pzv-cassa .pz-pt-h .sp-p{margin-top:calc(var(--t-h3-lg) * .59 - 16.8px)}
/* nei riquadri "per chi" l'icona sta sulla prima riga del nome (prima era centrata sul blocco: in croato
   "Prehrambene trgovine i supermarketi" va a capo a 1440 e l'icona scendeva fra le due righe); stessa regola dell'hub */
.pzv-f p b:first-child{display:flex;align-items:flex-start;gap:10px}
.pzv-f p b:first-child>.sp-p{margin-top:calc(var(--t-lead) * .64 - 14.8px)}
/* Come funziona: l'oggetto accanto al titolo del blocco (fuori dall'H3) */
.hp-rb-t{display:flex;align-items:flex-start;gap:14px}
.hp-rb-t .sp-p{margin-top:calc(var(--t-h3-lg) * .59 - 16.8px)}
.hp-rb-t h3{min-width:0}
@media (max-width:760px){
  .sp-p{width:28px;height:28px}
  .hp-rb-t{gap:12px}
  /* icona a 28 px: meta' icona 14 */
  .pz-pt-h .sp-p{margin-top:calc(var(--t-h3) * .59 - 14px)}
  .pzv-cassa .pz-pt-h .sp-p,.hp-rb-t .sp-p{margin-top:calc(var(--t-h3-lg) * .59 - 14.8px)}
}
/* un titolo lungo non allarga piu' la colonna dei blocchi (de 390 e 360: "3 Rechnungen Lieferantenrechnungen" faceva
   scorrere la pagina di lato); con il <wbr> dopo il nome nel titolo (HomeNew.aspx.vb, BloccoStanza) */
.hp-rblocks{grid-template-columns:minmax(0,1fr)}
.hp-rb{min-width:0}
.hp-rb h3{overflow-wrap:break-word}

/* =====================================================================
   GIRO 8 "STRUTTURA" (10/10/2026, decisione interna, con lo spot come bottone chiaro senza
   miniatura e le icone del set A di oggi). Proposta, revisione e foto: documenti di lavoro (proposta.md M1-M19 con i
   ritocchi R1-R10 e le note N*). Qui le regole della prima schermata (M2), di "Da dove vuoi partire?" (M4, R1, R5), dei
   titoli delle pagine (M3) e i token; il resto sta nello stile di HomeNew.aspx (phHeadPianta), in fondo. Le regole stanno
   DOPO quelle di prima (stesso ordine della proposta): dove ripetono una proprieta' vince questa.
   Ridare struttura (schede a UN SOLO livello, titoli forti, fascia scura a meta' pagina) senza decorazioni di maniera: stesso
   carattere (Archivo SP), stesso rosso, stesse icone; niente schede dentro schede.
   ===================================================================== */
:root{
  /* M3 (N2) scala piu' netta: H1 56 / H2 40 (sezioni principali) / H2 34 (domande) / H3 24 */
  --g8-h1:clamp(2.125rem, 1.3rem + 2.8vw, 3.5rem);     /* 34 -> 56 px */
  --g8-h2:clamp(1.75rem, 1.2rem + 1.45vw, 2.5rem);     /* 28 -> 40 px */
  --g8-h2b:clamp(1.625rem, 1.2rem + 1vw, 2.125rem);    /* 26 -> 34 px: domande */
  --g8-h3:clamp(1.3125rem, 1.15rem + .4vw, 1.5rem);    /* 21 -> 24 px */
  --g8-note:.9375rem;                                  /* 15 px: note, "Per chi:", avvertenze (prima 14 px) */
  --g8-note-c:#2A3560;                                 /* testo secondario: 11,6:1 su bianco (prima #474F70, 8:1) */
  --g8-card:#fff; --g8-card-b:#DCE1EE; --g8-r:16px; --g8-line:#E3E7F1;
  --g8-shadow:0 1px 2px rgba(27,36,71,.05),0 12px 28px -14px rgba(27,36,71,.16);
  --g8-cloud:#F4F6FC;
}

/* ---------- M3 titoli delle pagine piu' forti, stesso carattere ---------- */
.pz-h1a,.pz-pg-h1{font-size:var(--g8-h1);font-weight:700;font-stretch:100%;letter-spacing:-.018em;line-height:1.02}
.pz-h1a.pz-lg{font-size:calc(var(--g8-h1) * .88)}

/* ---------- M7 "Per chi:" in grassetto (HomeNew.aspx.vb, <b> attorno a "Per chi:") ---------- */
.pz-pt-for{margin-top:12px;line-height:1.45}
.pz-pt-for b{color:var(--pz-ink,#1B2447);font-weight:650}

/* ---------- M10 (N3) l'elenco della cassa: una scheda tecnica, una voce per riga tra due linee sottili, senza segno ---------- */
.pzv-c-list{gap:0;margin-top:16px;border-top:1px solid var(--g8-line)}
.pzv-c-list li{padding:9px 0 9px 0;border-bottom:1px solid var(--g8-line);color:var(--pz-ink,#1B2447)}

/* =====================================================================
   M2 PRIMA SCHERMATA (HomeNew.aspx.vb, HtmlHero e StrisciaHero)
   (R2) UNA sola immagine: la vetrina. Lo spot e' un bottone chiaro senza miniatura (.pz-h-spot, regole qui sopra),
   accanto a "oppure ti richiamiamo noi". (R8) "oppure ti richiamiamo noi" resta sotto i bottoni. La striscia in fondo
   porta telefono e orari (solo con il numero), la riga "Prezzi pubblici..." e chi siamo (ragione sociale, sede, P.IVA).
   ===================================================================== */
@media (min-width:761px){
  .pzs-hero{padding-block:22px 22px}
  .pz-ctas{order:3;margin-top:34px;row-gap:10px}
  .pz-ctas .pz-call{align-self:center;margin-top:6px}
  .pz-ctas .pz-h-spot{margin-top:6px;font-weight:600}
  .pzs-refs{order:4;margin-top:30px;font-size:1rem;color:#fff}
  .pz-cap{font-size:.9375rem;color:var(--on-deep-2)}
  /* vetrina: la cassa a sinistra, "Nel gestionale" a destra in una colonna separata da una linea (R2c: niente
     riquadro con ombra, niente scontrino in un terzo riquadro) */
  .pzs-vetrina{margin-top:26px;padding:14px 18px 14px}
  .pzs-v-body{display:grid;grid-template-columns:minmax(0,1fr) 210px;grid-template-rows:auto auto;column-gap:0;padding-right:0!important;min-height:0;margin-top:6px;align-items:start}
  .pzs-v-body>.pzv-step{grid-column:1;grid-row:1;align-self:end;padding-right:16px}
  .pzs-v-body>.cs-dev{grid-column:1;grid-row:2;margin:0 16px 22px 0}
  .pzs-v-float{display:contents}
  .pzs-v-float>.pzv-step{grid-column:2;grid-row:1;align-self:end;background:none;border-radius:0;padding:0 0 0 16px;margin:0 0 7px;width:auto;line-height:1.3}
  .pzs-v-float>.hp-uiw{grid-column:2;grid-row:2;align-self:stretch;background:none;border:0;border-left:1px solid var(--g8-line);border-radius:0;box-shadow:none;overflow:visible;padding:0 0 0 16px}
  .pzs-v-float .hp-uiw-h{background:none;border-bottom:1px solid var(--g8-line);padding:0 0 8px}
  .pzs-v-float .hp-uiw-h b{font-size:15px}
  .pzs-v-float .hp-uiw-b{padding:0;background:none}
  .pzs-v-float .hp-kpis{grid-template-columns:minmax(0,1fr);gap:0}
  .pzs-v-float .hp-kpi{flex-direction:row;justify-content:space-between;align-items:baseline;gap:8px;background:none;border:0;border-bottom:1px solid var(--g8-line);border-radius:0;padding:9px 0}
  .pzs-v-float .hp-kpi span{font-size:13.5px;color:var(--g8-note-c)}
  .pzs-v-float .hp-kpi b{font-size:17px;padding:0;margin:0}
  .pzs-v-float .pzv-new{margin:0;padding:9px 0;border-radius:0;background:none;border-bottom:1px solid var(--g8-line);font-size:13px;gap:2px 8px}
  .pzs-v-float .pzv-new>b{font-size:15px}
  .pzs-v-float .pzv-new .hp-chip{background:none;padding:0;border-radius:0;font-size:13px;color:#1A47C2}
  .pzs-v-float .pzv-mag{margin-top:9px;font-size:13px;color:var(--g8-note-c)}
  .pzs-v-foot{margin-top:0}
  /* piu' piccolo del bottone a contorno generico (M12, nello stile di HomeNew.aspx): qui il selettore e' piu' forte */
  .pzs-hero .pzs-v-foot a{min-height:38px;padding:0 14px;font-size:.875rem}
  /* striscia in fondo alla prima schermata: telefono e orari, condizioni, chi siamo (ultimo figlio di .pz-in) */
  .g8-hstrip{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.45fr) minmax(0,1fr);gap:0 36px;margin-top:22px;padding-top:15px;border-top:1px solid rgba(255,255,255,.18);font-size:.9375rem;line-height:1.45;color:var(--on-deep-2)}
  /* senza il numero di telefono restano due colonne (condizioni, chi siamo): nessun buco */
  .g8-hstrip.g8-hs-2{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
  .g8-hstrip.g8-hs-1{grid-template-columns:minmax(0,1fr)}
  .g8-hstrip p{margin:0}
  .g8-hstrip .g8-tel-l b{color:#fff;font-weight:600}
  .g8-hstrip .g8-tel-l a{color:inherit;text-decoration:none}
  .g8-hstrip .g8-tel-l a:hover{text-decoration:underline;text-underline-offset:3px}
  .g8-hstrip .pz-prova{order:0;margin:0;font-size:.9375rem;color:var(--on-deep-2)}
  .g8-hstrip .pz-prova a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.5)}
  .g8-hs-s b{color:#fff;font-weight:600}
}
/* le due colonne (testo | vetrina) solo da 1200 px. Fra 761 e 1199 (tablet) resta la colonna unica di prima ("tablet",
   collaudo 07/10, piu' su): il testo, sotto la vetrina con la cassa disegnata larga fino a 880 px, poi la striscia.
   Verifica del giro 8 (D1): con le due colonne gia' da 761 px la vetrina restava larga 100-500 px e i testi si accavallavano */
@media (min-width:1200px){
  .pz-in{grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:0 44px}
  /* la colonna sinistra sta in mezzo all'altezza della vetrina: niente vuoto sotto "Lo usano gia'" */
  .pz-left{align-self:center;padding-top:8px}
}
@media (min-width:761px) and (max-width:1199px){
  /* colonna unica (gap 28 px, regola "tablet" piu' su): fra il testo e la vetrina, e fra la vetrina e la striscia, lo
     stesso spazio di prima, 28 + 6 px */
  .pzs-vetrina{margin-top:6px}
  .g8-hstrip{margin-top:6px}
  .g8-hstrip,.g8-hstrip.g8-hs-2{grid-template-columns:minmax(0,1fr);row-gap:10px}
}
@media (min-width:1200px) and (max-width:1365px){
  .pz-in{grid-template-columns:minmax(0,500px) minmax(0,1fr);gap:0 32px}
  .pz-h1a{font-size:3.125rem}
  .pz-h1a.pz-lg{font-size:2.75rem}
  .pzs-v-body{grid-template-columns:minmax(0,1fr) 196px}
}
/* telefono: la striscia si scioglie e i suoi pezzi tornano al loro posto nella colonna. La riga del telefono qui non
   si mostra: il link sotto il bottone dice gia' "oppure chiamaci: numero, orari" (LinkContatto) */
@media (max-width:760px){
  .g8-hstrip,.g8-hs-c,.g8-hs-p,.g8-hs-s{display:contents}
  .g8-hstrip .g8-tel-l{display:none}
  .pzs-refs{order:6}
  .pz-ctas .pz-btn-line{order:7}
  .pz-h-parte{order:8}
  .pz-h-spot{order:9;margin-top:18px}
  .g8-hs-s p{order:14;margin-top:12px;font-size:var(--t-small);color:var(--on-deep-2)}
  .g8-hs-s b{color:#fff;font-weight:600}
  .pz-h1a{font-size:2.125rem}
}

/* =====================================================================
   M4 "DA DOVE VUOI PARTIRE?": una scheda per ogni parte, UN SOLO livello
   (R1) La fascia grigia in fondo alla scheda E' la finestra d'esempio: niente riquadro bianco con ombra dentro, la sua
   intestazione e' la prima riga, le righe sono separate da linee, i bollini e i bottoncini sono testo.
   ===================================================================== */
#da-dove.pz-pt{background:var(--g8-cloud);border-bottom:0;padding-block:76px 84px}
#da-dove .pz-pt-head{align-items:end}
#da-dove .pzv-cassa,#da-dove .pz-pt-card,#da-dove .pz-pt-all{background:var(--g8-card);border:1px solid var(--g8-card-b);border-radius:var(--g8-r);box-shadow:var(--g8-shadow)}
#da-dove .pzv-cassa{margin-top:34px;padding:34px 34px 30px;gap:24px 40px}
.pzv-c-lead{font-size:1.0625rem}
.pzv-c-price{border-top-color:var(--g8-card-b)}
.pzv-c-for{border-top:1px solid var(--g8-card-b);padding-top:22px;margin-top:4px;gap:40px}
.pzv-f{border-top:0;padding-top:0}
.pzs-c-for .pzv-f{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;align-items:start}
.pzv-f p{font-size:1rem}
.pzs-grid3{gap:20px!important;margin-top:20px!important}
#da-dove .pz-pt-card{display:flex;flex-direction:column;align-items:stretch;padding:28px 28px 0;overflow:hidden}
#da-dove .pz-pt-card .pz-pt-txt{flex:1 1 auto;height:auto}
/* (R5) le tre schede allineate riga per riga (subgrid, 7 righe con il posto di ogni pezzo fissato): titolo, testo,
   nota sul paese (pz-pt-it, solo dove serve), "Per chi", PREZZO, bottone, finestra. Se una scheda non ha la nota, la sua
   riga resta vuota e il resto resta allineato. Nei browser senza subgrid le schede restano giuste, solo non allineate. */
@media (min-width:1366px){
  #da-dove .pzs-grid3{grid-template-rows:repeat(7,auto)}
  #da-dove .pzs-grid3 .pz-pt-card{display:grid;grid-row:span 7;grid-template-rows:subgrid;row-gap:0}
  #da-dove .pzs-grid3 .pz-pt-txt{display:contents}
  #da-dove .pzs-grid3 .pz-pt-h{grid-row:1}
  #da-dove .pzs-grid3 .pz-pt-t{grid-row:2}
  #da-dove .pzs-grid3 .pz-pt-it{grid-row:3}
  #da-dove .pzs-grid3 .pz-pt-for{grid-row:4}
  #da-dove .pzs-grid3 .pz-pt-price{grid-row:5}
  #da-dove .pzs-grid3 .pz-pt-more{grid-row:6}
  #da-dove .pzs-grid3 .pz-pt-ui{grid-row:7}
  #da-dove .pzs-grid3 .pz-pt-price{margin-top:0}
  #da-dove .pzs-grid3 .pz-pt-more{align-self:start;justify-self:start}
  #da-dove .pzs-grid3 .pz-pt-card .pz-pt-ui{align-self:stretch}
}
#da-dove .pz-pt-card .pz-pt-price::before{border-top-color:var(--g8-card-b);margin:18px 0 12px}
#da-dove .pz-pt-txt .pz-pt-more{margin-top:16px}
/* la finestra: una fascia a filo dei bordi della scheda, fondo grigio-azzurro, nessun altro riquadro */
#da-dove .pz-pt-card .pz-pt-ui{margin:24px -28px 0;padding:0 24px 22px;background:var(--g8-cloud);border-top:1px solid var(--g8-card-b)}
#da-dove .pz-pt-ui .hp-uiw{background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
#da-dove .pz-pt-ui .hp-uiw-h{background:none;border-bottom:1px solid var(--g8-card-b);padding:14px 0 10px}
#da-dove .pz-pt-ui .hp-uiw-b{background:none;padding:6px 0 0}
#da-dove .pz-pt-ui .hp-uiw-h b{font-size:13.5px}
.pz-pt-foot,.pz-pt-lt,.pz-pt-mv{background:none;border:0;border-radius:0}
.pz-pt-foot{margin-top:6px;padding:7px 0 0;border-top:1px solid var(--g8-card-b)}
.pz-pt-foot.pz-pt-w,.pz-pt-sl div.pz-pt-w{background:#FFF6D6;border-color:var(--g8-card-b);border-radius:0}
.pz-pt-foot.pz-pt-w{padding:7px 6px}
.pz-pt-lt div{padding:6px 0;border-color:var(--g8-card-b)}
.pz-pt-mv{margin-top:6px}
.pz-pt-mv>div{padding:6px 0;border-color:var(--g8-card-b)}
.pz-pt-sl{gap:0 16px}
.pz-pt-sl div{background:none;border:0;border-bottom:1px solid var(--g8-card-b);border-radius:0;padding:6px 0}
.pz-pt-sl div.pz-pt-w{padding:6px 6px}
.pz-pt-or{font-size:12px}
/* i bottoncini "Etichetta / Certificato / Richiamo lotto" e i bollini diventano testo (HomeNew.aspx.vb, UiParte: g8-stato) */
.pz-pt-act{gap:4px 16px;margin-top:8px}
.pz-pt-act span{border:0;background:none;border-radius:0;padding:0;font-size:12px;font-weight:600;color:var(--pz-ink,#1B2447)}
.g8-stato{font-size:11.5px;font-weight:600;white-space:nowrap}
.g8-stato-ok{color:#2E6B3A}
.g8-stato-w{color:#8A4B0B}
/* "Tutto insieme": scheda larga, prezzo grande a destra. (R3) le colonne restano quelle di prima: due al computer
   (#da-dove .pz-pt-all, piu' su), una al telefono */
#da-dove .pz-pt-all{margin-top:20px;padding:30px 34px;gap:28px 48px}
#da-dove .pz-pt-allpr{border-left:1px solid var(--g8-card-b);padding-left:40px}
#da-dove .pz-pt-allpr .hp-b{margin-top:16px}
/* M14 (N6) "+ IVA" accanto a ogni prezzo, uno spazio solo, stesso peso di "al mese" */
.g8-iva{font-size:var(--g8-note);font-weight:400;color:var(--g8-note-c);white-space:nowrap}
.pz-pt-pr span{color:var(--g8-note-c);font-size:var(--g8-note)}
.pz-pt-pr span+.g8-iva{margin-left:-2px}
@media (max-width:1365px){#da-dove .pz-pt-allpr{border-left:0;padding-left:0}}
/* tablet (761-1099): nei riquadri "per chi" della scheda della cassa l'esempio va sotto il testo, come prima del giro 8;
   affiancati restavano due colonne di 130-200 px (secondo giro) */
@media (min-width:761px) and (max-width:1099px){.pzs-c-for .pzv-f{grid-template-columns:minmax(0,1fr)}}
/* (N8) al telefono: schede senza ombra, margini interni 18, meno spazio tra le sezioni */
@media (max-width:760px){
  #da-dove.pz-pt{padding-block:52px}
  #da-dove .pzv-cassa,#da-dove .pz-pt-card,#da-dove .pz-pt-all{box-shadow:none}
  #da-dove .pzv-cassa{padding:22px 18px;margin-top:26px}
  #da-dove .pz-pt-card{padding:22px 18px 22px}
  #da-dove .pz-pt-all{padding:22px 18px}
  .pz-pt-grid.pzs-grid3{gap:14px!important}
  .pzs-c-for .pzv-f{grid-template-columns:minmax(0,1fr)}
  .pzv-c-for{gap:18px}
  #da-dove .pz-pt-allpr .hp-b{white-space:normal;text-align:center}
}
/* (R1) anche nella scheda della cassa niente riquadri dentro: i tavoli del bar e l'ordine del negozio online diventano
   righe con una linea sopra (stesso testo), il bollino "In cassa, da incassare al ritiro" diventa testo */
#da-dove .pzv-tav{gap:6px 20px}
#da-dove .pzv-tav div{background:none;border:0;border-top:1px solid var(--g8-card-b);border-radius:0;padding:8px 0 0}
#da-dove .pzv-ord{background:none;border:0;border-top:1px solid var(--g8-card-b);border-radius:0;padding:8px 0 0}
/* testo, non piu' bollino: va a capo come il resto (prima, con il nowrap del bollino, in tedesco e in croato fra 761
   e 810 px usciva dallo schermo) */
#da-dove .pzv-ord .hp-chip{background:none;padding:0;border-radius:0;color:#1A47C2;font-weight:600;font-size:12.5px;white-space:normal}

/* =====================================================================
   GIRO 9 "RIFINITURA" (10/10/2026 sera, decisione interna, con la cornetta semplice al posto del
   telefono a disco). Anteprima, revisione e foto: documenti di lavoro (proposta.md G9-1..G9-9, ritocchi R1-R6, N3, N5;
   proposta.css). Applicazione: documenti di lavoro. Qui le regole della prima schermata, di "Da dove vuoi partire?",
   delle lettere e del telefono; quelle che ripetono una regola dello stile di HomeNew.aspx (phHeadPianta) stanno li', in
   fondo. Come nel giro 8: le regole stanno DOPO quelle di prima, dove ripetono una proprieta' vince questa.
   Stile sobrio: un solo rosso e solo per "Prenota"; nessun riquadro con bordo o ombra dentro un altro; nessuna
   sfumatura nuova; la cassa DISEGNATA resta in vetrina, mai piu' piccola del giro 8.
   ===================================================================== */

/* ---------- G9-5 (P13) lettere e prezzi: spaziatura normale, prezzi nello stesso carattere del resto (100%, non 80%).
   La cassa disegnata resta con la sua spaziatura. Il resto di G9-5 (titoli H2/H3, numeri dei passi, prezzi dei pacchetti)
   sta nello stile di HomeNew.aspx. Solo per la home e le sue pagine: css/landing.css serve anche Servizi.aspx ---------- */
:root{--t-price-s:100%}
body{letter-spacing:.012em}
.cs,.pzv-mini,.cs-dev{letter-spacing:normal}
.pz-h1a,.pz-pg-h1{letter-spacing:-.004em}
/* (R6) al telefono, nell'elenco delle parti, va a capo il PREZZO nella sua colonna ("25 EUR al mese" e sotto "per cassa"),
   non il nome della parte; i prezzi corti restano su una riga */
@media (max-width:760px){
  .pz-pt-idx a b{white-space:normal;max-width:7.5em;text-align:right;line-height:1.25;text-wrap:balance}
}

/* ---------- G9-1 (P9, R1, R2, R3, N3) PRIMA SCHERMATA: la cassa grande, "Nel gestionale" esce dalla colonna stretta ----------
   La vetrina e' una colonna sola: 1 la cassa, larga quanto la vetrina; 2 "Nel gestionale" in una fascia chiara sotto la
   cassa, con i numeri grandi in riga. Niente copre la cassa. Il markup non cambia (HomeNew.aspx.vb, VetrinaCassa). */
@media (min-width:761px){
  .pzs-v-body{display:block;margin-top:2px;padding-right:0!important}
  .pzs-v-body>.pzv-step{padding-right:0;margin-bottom:8px}
  .pzs-v-body>.cs-dev{margin:0 auto 22px;width:100%}
  .pzs-v-float{display:block;position:static;width:auto}
  .pzs-v-float>.pzv-step{margin:0 0 8px;padding:0;background:none;width:auto;line-height:1.3}
  /* la fascia: larga quanto la vetrina, fondo chiaro, nessun bordo, nessuna ombra. La disposizione si sceglie sulla
     larghezza della VETRINA (container g9v), non dello schermo: stretta = "Vendite di oggi" sopra e i tre numeri in riga;
     larga (da 680 px di contenuto) = "Vendite di oggi" e' la prima colonna */
  .pzs-vetrina{container:g9v / inline-size}
  /* (R2) le tre cifre sulla stessa linea di base e allineate a sinistra nella loro colonna; "appena chiuso" sulla riga
     dell'etichetta (o sotto, se non ci sta), mai accanto alla cifra. (N3) niente righe verticali fra le colonne: e' un pezzo
     del gestionale, non una "striscia di numeri" */
  .pzs-v-float>.hp-uiw{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1.5fr);align-items:end;column-gap:20px;row-gap:6px;margin:0 -18px;padding:12px 18px 11px;background:#E8EDF9;border:0;border-radius:0;box-shadow:none;overflow:visible}
  .pzs-v-float .hp-uiw-b,.pzs-v-float .hp-kpis{display:contents}
  .pzs-v-float .hp-uiw-h{grid-column:1/-1;grid-row:1;display:block;background:none;border:0;padding:0}
  .pzs-v-float .hp-uiw-h b{display:block;font-size:14px;line-height:1.25;font-weight:650;color:#1B2447}
  .pzs-v-float .hp-kpi,.pzs-v-float .pzv-new{grid-row:2;align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;background:none;border:0;border-radius:0;margin:0;padding:0;min-width:0}
  .pzs-v-float .hp-kpi span{font-size:13.5px;line-height:1.3;color:#2A3560}
  .pzs-v-float .hp-kpi b{font-size:22px;line-height:1.1;padding:0;margin:0;font-weight:700;color:#1B2447;white-space:nowrap;letter-spacing:-.01em}
  /* terza colonna: in riga a partire da sinistra, le righe in fondo; ordine: etichetta, "appena chiuso", cifra */
  .pzs-v-float .pzv-new{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-content:flex-end;align-items:baseline;column-gap:8px;row-gap:2px;font-size:13.5px;line-height:1.3;color:#2A3560}
  .pzs-v-float .pzv-new>span:first-child{order:1;flex:0 1 auto;white-space:nowrap}
  .pzs-v-float .pzv-new .hp-chip{order:2;background:none;padding:0;border-radius:0;font-size:13.5px;line-height:1.3;font-weight:650;color:#1A47C2;white-space:nowrap}
  .pzs-v-float .pzv-new>b{order:3;flex:0 0 100%;margin-top:2px;font-size:22px;line-height:1.1;font-weight:700;color:#1B2447;letter-spacing:-.01em;white-space:nowrap}
  .pzs-v-float .pzv-mag{grid-column:1/-1;grid-row:3;margin:2px 0 0;padding-top:7px;border-top:1px solid #D3DAEE;font-size:14px;line-height:1.35;color:#2A3560}
  @container g9v (min-width:680px){
    .pzs-v-float>.hp-uiw{grid-template-columns:auto minmax(0,.9fr) minmax(0,1fr) minmax(0,1.35fr);column-gap:24px;padding:13px 18px 12px;row-gap:8px}
    .pzs-v-float .hp-uiw-h{grid-column:1;grid-row:1;align-self:end;padding:0 4px 4px 0}
    .pzs-v-float .hp-uiw-h b{max-width:7.5em;font-size:15px}
    .pzs-v-float .hp-kpi,.pzs-v-float .pzv-new{grid-row:1}
    .pzs-v-float .hp-kpi span,.pzs-v-float .pzv-new,.pzs-v-float .pzv-new .hp-chip{font-size:14px}
    .pzs-v-float .hp-kpi b,.pzs-v-float .pzv-new>b{font-size:26px}
    .pzs-v-float .pzv-mag{grid-row:2}
  }
  /* fascia su due righe (vetrina sotto i 680 px di contenuto): l'etichetta della terza colonna mostra solo "Scontrino 95",
     cosi' non esce dalla vetrina e la fascia ha sempre la stessa altezza; "Cassa 1 . 10:43" resta nel markup (lo legge il
     lettore di schermo) e torna con la fascia su una riga */
  @container g9v (max-width:679px){
    .pzs-v-float .pzv-new>span:first-child{font-size:0}
    .pzs-v-float .pzv-new>span:first-child b{font-size:13.5px}
  }
  /* sotto la fascia: il prezzo della cassa e il collegamento, senza linea (la fascia fa gia' da separazione) */
  .pzs-v-foot{margin-top:0;padding-top:12px;border-top:0}
}
/* computer, da 1200 px (R1 e R3 della revisione).
   - La vetrina sale accanto al titolo. La striscia "chi siamo" segue SUBITO "Lo usano gia'" nella colonna di sinistra: la
     sua posizione dipende solo dal testo di sinistra, non dall'altezza della vetrina.
   - Testo di sinistra e striscia sono un blocco solo, centrato in altezza accanto alla vetrina (righe 1fr | testo |
     striscia | 1fr). Nelle finestre basse il blocco parte dall'alto, cosi' la striscia resta in vista (piu' giu').
   - Larghezza della vetrina (--g9-vw): quella che fa stare la vetrina intera nella finestra, ma MAI meno del giro 8
     (cassa 494 px da 1366 in su, 420 px fra 1200 e 1365) e mai piu' di 756 px (cassa 720).
     Formula: (altezza della finestra - --g9-k) x passo + 36 px (margini interni della vetrina). --g9-k = barra in alto +
     30 px sopra + 30 px sotto + le parti fisse della vetrina (titolo, passi, fascia, piede). Due tarature, misurate in it,
     en, de e hr (giro9_rifinitura\lavoro\matrice.mjs): fascia su due righe (finestre fino a 891 px di altezza, vetrina fino
     a 715 px): --g9-k 472 px, passo 1,72; fascia su una riga (da 892 px di altezza e da 1366 di larghezza, vetrina da 716 a
     756 px): --g9-k 459 px, passo 1,5711. Se cambiano i testi della vetrina vanno ritarate (la striscia non ne dipende).
   - 30 px di blu sopra e sotto la vetrina. */
@media (min-width:1200px){
  :root{--g9-k:472px;--g9-vw:clamp(456px, calc((100vh - var(--g9-k)) * 1.72 + 36px), 715px)}
  .pzs-hero{padding-block:30px 30px}
  .pz-in{grid-template-columns:minmax(500px,1fr) minmax(0,var(--g9-vw));grid-template-rows:minmax(0,1fr) auto auto minmax(0,1fr);column-gap:36px;row-gap:0;align-items:start}
  .pz-left{grid-column:1;grid-row:2;align-self:start;padding-top:0;max-width:620px}
  .pzs-vetrina{grid-column:2;grid-row:1/-1;align-self:center;margin-top:0;padding:12px 18px 12px}
  .g8-hstrip,.g8-hstrip.g8-hs-2{grid-column:1;grid-row:3;align-self:start;max-width:620px;grid-template-columns:minmax(0,1fr);row-gap:8px;margin-top:28px;padding-top:14px}
  .pzs-refs{margin-top:26px}
}
@media (min-width:1366px){
  :root{--g9-vw:clamp(530px, calc((100vh - var(--g9-k)) * 1.72 + 36px), 715px)}
  .pz-in{grid-template-columns:minmax(560px,1fr) minmax(0,var(--g9-vw));column-gap:44px}
}
@media (min-width:1366px) and (min-height:892px){
  :root{--g9-k:459px;--g9-vw:clamp(716px, calc((100vh - var(--g9-k)) * 1.5711 + 36px), 756px)}
}
/* finestre basse (portatili con le barre del browser: 1366 x 641, 1280 x 593, 1536 x 730): il blocco di sinistra parte
   dall'alto e i margini si stringono un poco, cosi' la striscia con sede e P.IVA resta nella prima schermata; la cassa
   resta almeno grande come nel giro 8 (la vetrina puo' finire sotto il bordo: si taglia nel piede, non sulle cifre) */
@media (min-width:1200px) and (max-height:760px){
  .pzs-hero{padding-top:16px}
  .pz-in{grid-template-rows:0 auto auto minmax(0,1fr)}
  .pz-ctas{margin-top:26px}
  .pzs-refs{margin-top:20px}
  .g8-hstrip,.g8-hstrip.g8-hs-2{margin-top:22px;padding-top:12px;row-gap:6px}
  .pzs-vetrina{padding-top:10px}
  .pzs-v-body>.pzv-step{margin-bottom:6px}
}
@media (min-width:1200px) and (max-height:620px){
  .pz-ctas{margin-top:22px}
  .g8-hstrip,.g8-hstrip.g8-hs-2{margin-top:18px}
}
/* finestre meno alte di 900 px: la riga del magazzino lascia il posto alla cassa */
@media (min-width:1200px) and (max-height:899px){
  .pzs-v-float .pzv-mag{display:none}
}

/* ---------- G9-8 (P17) striscia "chi siamo": stessa posizione, bianco pieno (13,4:1) ---------- */
@media (min-width:761px){
  .g8-hstrip{color:#fff}
  .g8-hstrip .pz-prova{color:#fff}
  .g8-hs-s p{color:#fff}
}
@media (max-width:760px){
  .pzs-hero .pz-prova,.g8-hs-s p{color:#fff}
}

/* ---------- G9-2 (P10) gerarchia dei bottoni, la parte di "Da dove vuoi partire?" e dello spot. Il resto (i "Vedi..." come
   testo blu, "Che cassa hai?", lo spot della demo) sta nello stile di HomeNew.aspx ---------- */
/* "Da dove vuoi partire?": l'unico bordato della sezione e' "Confronta i pacchetti", accanto al suo testo */
#da-dove .pz-pt-head .pz-pt-more{min-height:46px;padding:0 20px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1.5px #858CAB!important;color:#1B2447!important;font-weight:650;white-space:nowrap}
#da-dove .pz-pt-head .pz-pt-more:hover{text-decoration:none!important;box-shadow:inset 0 0 0 1.5px #1B2447!important}
@media (min-width:761px){
  #da-dove .pz-pt-head{grid-template-columns:minmax(0,47em) auto;justify-content:start;column-gap:32px;align-items:end}
  #da-dove .pz-pt-head .hp-sub{max-width:none}
  #da-dove .pz-pt-head .pz-pt-more{margin-bottom:4px}
}
/* al telefono un bottone vero: largo quanto lo schermo, scritta centrata (non una casella dove scrivere) */
@media (max-width:760px){
  #da-dove .pz-pt-head .pz-pt-more{width:100%;justify-content:center;margin-top:4px}
}
/* lo spot nella prima schermata e' un rimando, non un bottone: il triangolo e la scritta, senza bordo */
.pz-h-spot{border:0;background:none;padding:0;gap:12px;min-height:44px;font-weight:650}
.pz-h-spot:hover{background:none}
.pz-h-spot:hover span{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}

/* ---------- G9-4 (P12, R5) mini esempi di Bar e Negozio online in un riquadro chiaro, senza bordo ne' ombra; importi in
   inchiostro, stato in verde e ambra scuri (5,8:1 e 6,2:1). Niente "display": al telefono restano nascosti tutti e due
   (regola .pzs-c-for .pzv-tav, .pzs-c-for .pzv-ord) ---------- */
#da-dove .pzv-tav,#da-dove .pzv-ord{background:#F1F4FB;border:0;border-radius:12px;padding:14px 16px;box-shadow:none}
#da-dove .pzv-tav{grid-template-columns:1fr 1fr;gap:0}
#da-dove .pzv-tav div{border:0;border-radius:0;background:none;padding:0 0 0 16px;gap:2px;font-size:14px}
#da-dove .pzv-tav div:first-child{padding:0 16px 0 0;border-right:1px solid #D3DAEE}
#da-dove .pzv-tav b{font-size:15px;font-weight:600;color:#1B2447}
#da-dove .pzv-tav em{font-size:20px;font-weight:700;color:#1B2447;letter-spacing:-.01em}
#da-dove .pzv-tav small{font-size:14px;line-height:1.35;margin-top:2px}
#da-dove .pzv-tav .ok{color:#2E6B3A;font-weight:600}
#da-dove .pzv-tav .w{color:#8A4B0B;font-weight:600}
#da-dove .pzv-ord{gap:6px;font-size:14px}
#da-dove .pzv-ord-h{font-size:15px;font-weight:600;color:#1B2447}
#da-dove .pzv-ord-b{align-items:baseline;color:#2A3560}
#da-dove .pzv-ord-b b{font-size:20px;color:#1B2447;letter-spacing:-.01em}
#da-dove .pzv-ord .hp-chip{font-size:14px;font-weight:650;color:#1A47C2}

/* ---------- G9-6 (P14) esempi nelle schede: piu' aria, scritte piu' grandi (13,5-15 px). Nel contante restano casse,
   cassaforte e "da conciliare" in tre colonne (la casella "Versato a ..." non si scrive piu': HomeNew.aspx.vb, UiParte) ---------- */
#da-dove .pz-pt-ui .hp-uiw-h{padding:16px 0 11px}
#da-dove .pz-pt-ui .hp-uiw-h b{font-size:15px}
#da-dove .pz-pt-ui .hp-uiw-h small{font-size:13px}
#da-dove .pz-pt-ui .hp-ex{font-size:14px}
#da-dove .pz-pt-ui .hp-uiw-b{padding-top:10px;font-size:14px}
.pz-pt-bars{gap:10px}
.pz-pt-bars div{grid-template-columns:96px minmax(0,1fr) 62px;gap:10px;font-size:14px}
.pz-pt-bars i{height:10px}
.pz-pt-foot{margin-top:10px;padding:10px 0 0;font-size:14px}
.pz-pt-foot.pz-pt-w{padding:9px 8px}
.pz-pt-lt div{padding:7px 0;font-size:14px}
.pz-pt-lt em{font-size:14px;min-width:70px}
.pz-pt-lh{font-size:15px}
.pz-pt-or{font-size:14px;margin-top:8px}
.pz-pt-act{margin-top:10px;gap:4px 20px}
.pz-pt-act span{font-size:14px}
.pz-pt-sl{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 14px}
.pz-pt-sl div{padding:8px 0}
.pz-pt-sl div.pz-pt-w{padding:8px}
.pz-pt-sl span{font-size:13.5px}
.pz-pt-sl b{font-size:17px}
.pz-pt-mv{margin-top:8px}
.pz-pt-mv>div{padding:11px 0;font-size:14px}
.pz-pt-mv small{font-size:13px}
.g8-stato{font-size:13px}

/* ---------- G9-7 (P15) altezze e vuoti. Nelle tre schede testo, nota sul paese e "Per chi:" stanno in un solo blocco
   (HomeNew.aspx.vb, HtmlParti: div.g9-corpo), che occupa le righe 2-4 della griglia allineata: "Per chi" segue subito il
   testo (niente buco nella scheda Contante), prezzi, rimandi ed esempi restano alla stessa altezza tra le schede ---------- */
#da-dove .g9-corpo{display:block}
@media (min-width:1366px){
  #da-dove .pzs-grid3 .g9-corpo{grid-row:2/span 3}
}
/* la cassa: lo schermo d'esempio sta a meta' altezza del testo accanto, non lascia un buco sotto */
@media (min-width:1200px){#da-dove .pzv-cassa .pzv-c-ui{align-self:center}}
/* "Tutto insieme": la colonna del prezzo prende solo lo spazio che serve, il testo si allarga */
@media (min-width:1366px){
  #da-dove .pz-pt-all{grid-template-columns:minmax(0,1fr) auto;column-gap:56px}
  #da-dove .pz-pt-allpr{min-width:250px;padding-left:48px}
}
#da-dove .pz-pt-allpr .hp-b{margin-top:10px}

/* ---------- G9-9 telefono: "Prenota una demo" piu' vicino, togliendo spazio sopra (la mini cassa resta in vista) ---------- */
@media (max-width:760px){
  .pzs-hero{padding-top:14px}
  .pz-h1{margin-top:2px}
  .pzs-posm{margin-top:12px;gap:8px}
  .pzs-hero .pz-ctas .pz-btn-red{margin-top:10px}
}