/* ============================================================================
 * Console del negozio: Ordini e Catalogo. Layout D, quello scelto per la
 * console: a sinistra un pannello grande con la cosa da fare adesso, a destra
 * una pila di pannelli secondari. Stessa pelle di skin.css.
 * ==========================================================================*/
/* L'accento viene dai token della console (--violet/--violet2): segue la grafica attiva,
   verde petrolio con skin.css, viola senza. Una sola fonte per i colori. */
.sc{--acc:var(--violet);--acc2:var(--violet2);--mut:#5f6d80;--soft:#8b98aa;--warn:#b87512;--ok:#12a06b;--no:#c8443a;
  --line:rgba(19,26,36,.08);color:var(--ink)}
.sc-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:start}
@media(max-width:1100px){.sc-grid{grid-template-columns:1fr}}
.sc-focus{padding:24px 26px 26px}
.sc-focus.hot{border:2px solid color-mix(in srgb,var(--acc) 50%,transparent)}
.sc-side{display:flex;flex-direction:column;gap:14px}
.sc-side .card{padding:18px 20px}
.sc .eyebrow{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);font-weight:700;
  display:flex;align-items:center;gap:8px;margin:0 0 8px}
.sc h2.t{font-size:26px;font-weight:750;letter-spacing:-.035em;margin:0;line-height:1.12}
.sc .who{font-size:24px;font-weight:750;letter-spacing:-.03em;margin-top:4px;line-height:1.15}
.sc .meta{font-size:12px;color:var(--mut);margin-top:6px;font-variant-numeric:tabular-nums}
.sc p.s{margin:8px 0 0;font-size:14px;color:var(--mut);max-width:60ch}
.sc p.s a{color:var(--acc);font-weight:600}
.sc .ptitle{font-size:11.5px;color:var(--mut);margin:0 0 10px;font-weight:650;display:flex;justify-content:space-between;
  align-items:center;gap:10px}
.sc .row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:10px 0;font-size:13.5px}
.sc .row+.row{border-top:1px solid var(--line)}
.sc .row b{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.sc .row.tot{font-size:15px;border-top:2px solid var(--ink)!important;margin-top:4px;padding-top:12px}
.sc .row .q{color:var(--mut);font-size:12.5px}
.sc .acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:20px}
.sc .btn.big{height:48px;padding:0 24px;font-size:14.5px}
.sc .btn.no{color:var(--no);border:1px solid rgba(200,68,58,.35);background:#fff}
.sc .btn.no:hover{background:rgba(200,68,58,.06)}
.sc .btn-ghost{background:rgba(255,255,255,.92);border:1px solid var(--line2)}
.sc .muted{color:var(--mut);font-size:12.5px}

/* stato del servizio */
.sc .sw{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.sc .sw+.sw{border-top:1px solid var(--line)}
.sc .sw .n{font-weight:650;font-size:14px}
.sc .sw .d{font-size:12.5px;color:var(--mut);margin-top:2px;max-width:48ch}
.sc .tog{width:46px;height:27px;border-radius:999px;flex:0 0 46px;position:relative;border:none;cursor:pointer;
  background:rgba(19,26,36,.16);box-shadow:inset 0 1px 3px rgba(19,26,36,.2);transition:background .2s}
.sc .tog::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;
  box-shadow:0 2px 5px rgba(19,26,36,.35);transition:left .2s}
.sc .tog.on{background:linear-gradient(180deg,var(--acc2),var(--acc))}
.sc .tog.on::after{left:22px}
.sc .tog.sm{width:38px;height:23px;flex-basis:38px}
.sc .tog.sm::after{width:17px;height:17px}
.sc .tog.sm.on::after{left:18px}
.sc .step{display:flex;align-items:center;gap:8px}
.sc .step button{width:34px;height:34px;border-radius:50%;border:1px solid var(--line2);background:#fff;font-size:17px;
  font-weight:600;cursor:pointer;color:var(--ink)}
.sc .step b{min-width:64px;text-align:center;font-variant-numeric:tabular-nums}

/* pillole di stato */
.sc .pill{display:inline-block;border-radius:999px;padding:4px 11px;font-size:11px;font-weight:700;white-space:nowrap}
.sc .pill.ok{background:rgba(18,160,107,.14);color:#0b7a51}
.sc .pill.w{background:rgba(192,125,18,.16);color:#8f5c05}
.sc .pill.n{background:rgba(19,26,36,.07);color:#5f6d80}
.sc .pill.a{background:color-mix(in srgb,var(--acc) 13%,transparent);color:var(--acc)}
.sc .pill.no{background:rgba(200,68,58,.12);color:#9b2f27}
.sc .live{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 3px rgba(18,160,107,.18);animation:scpulse 1.6s ease-in-out infinite}
@keyframes scpulse{50%{box-shadow:0 0 0 6px rgba(18,160,107,.06)}}

/* ordine in arrivo */
.sc .inhd{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.sc .timer{font-size:30px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.04em;color:var(--warn);
  text-align:right;line-height:1}
/* Con un accento caldo (arancione, rosa) il colore pieno si confonde con il rosso degli allarmi:
   i numeri "tranquilli" usano la sfumatura del marchio, il rosso pieno resta solo per il ritardo. */
.sc .timer.calm,.sc .promise b{background:linear-gradient(180deg,var(--acc2),var(--acc));-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;color:var(--acc)}
.sc .timerl{display:block;font-size:11px;color:var(--mut);text-align:right;margin-top:5px}
.sc .note{margin-top:14px;padding:12px 15px;border-radius:14px;background:rgba(192,125,18,.1);color:#7a4f06;font-size:13.5px}
.sc .note b{font-weight:700}
.sc .promise{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:18px;padding:14px 16px;border-radius:16px;
  background:color-mix(in srgb,var(--acc2) 9%,transparent)}
.sc .promise.late{background:rgba(200,68,58,.1);box-shadow:inset 0 0 0 1.5px rgba(200,68,58,.35)}
.sc .promise.late .lab{color:var(--no)}
.sc .promise.late b{background:none;-webkit-text-fill-color:var(--no);color:var(--no)}
.sc .promise .lab{font-size:12.5px;color:var(--mut);font-weight:650;margin-right:auto}
.sc .promise b{font-size:26px;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--acc);
  min-width:84px;text-align:center}
.sc .promise button{height:32px;min-width:44px;padding:0 10px;border-radius:999px;border:1px solid var(--line2);
  background:#fff;font-size:12.5px;font-weight:700;cursor:pointer;color:var(--ink)}
.sc .reasons{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.sc .reasons button{padding:9px 14px;border-radius:999px;border:1px solid var(--line2);background:#fff;font-size:12.5px;
  font-weight:650;cursor:pointer;color:var(--ink)}
.sc .reasons button.on{border-color:var(--no);color:var(--no);background:rgba(200,68,58,.06)}

/* coda a destra */
.sc .oc{display:block;width:100%;text-align:left;padding:13px 15px;border-radius:16px;border:1px solid var(--line);
  background:rgba(255,255,255,.92);cursor:pointer;box-shadow:0 10px 22px -20px rgba(19,26,36,.8);font:inherit;color:inherit}
.sc .oc+.oc{margin-top:8px}
.sc .oc.sel{border-color:var(--acc);box-shadow:0 12px 24px -16px color-mix(in srgb,var(--acc) 80%,transparent)}
.sc .oc .t1{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:5px}
.sc .oc .nm{font-weight:650;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc .oc .mt{font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums}
.sc .empty{font-size:13px;color:var(--mut);padding:6px 0 2px}
.sc .hist{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.sc .hist .row{padding:6px 0;font-size:12.5px;color:var(--mut)}
.sc .hist .row+.row{border-top:none}
.sc .x{float:right;border:none;background:rgba(19,26,36,.06);width:32px;height:32px;border-radius:50%;cursor:pointer;
  font-size:16px;color:var(--mut)}
.sc .link{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;background:#fff;border:1px solid var(--line2);
  border-radius:12px;padding:10px 12px;word-break:break-all;margin-bottom:10px}

/* catalogo */
.sc .search{width:100%;height:44px;border-radius:13px;border:1px solid var(--line2);background:#fff;padding:0 15px;
  font:inherit;font-size:14px;margin:18px 0 6px;outline:none}
.sc .search:focus{border-color:var(--acc);box-shadow:var(--ring)}
.sc .grp{margin-top:18px}
.sc .irow{display:flex;align-items:center;gap:13px;padding:11px 0;cursor:pointer}
.sc .irow+.irow{border-top:1px solid var(--line)}
.sc .irow:hover .dn{color:var(--acc)}
.sc .irow .sc-ph{width:44px;height:44px;border-radius:13px;flex:0 0 44px;display:grid;place-items:center;font-weight:800;
  font-size:17px;color:rgba(19,26,36,.3);background:linear-gradient(150deg,#e2edf0,#eae4f2);
  overflow:hidden;position:relative}
/* La foto sta sopra l'iniziale, non al suo posto: se non arriva, sotto c'e' gia' qualcosa. */
.sc .irow .sc-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sc .irow.off .sc-ph img{filter:grayscale(1) opacity(.5)}
.sc .irow .dn{font-weight:650;font-size:14px}
.sc .irow .dd{font-size:12px;color:var(--mut);margin-top:2px}
.sc .irow .dp{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums;font-size:14px;white-space:nowrap}
.sc .irow .un{font-size:11.5px;color:var(--mut);font-weight:600;white-space:nowrap}
.sc .irow.off .dn,.sc .irow.off .dp{color:var(--soft)}
.sc .crow{display:flex;align-items:center;gap:8px;padding:8px 0;font-size:13.5px}
.sc .crow+.crow{border-top:1px solid var(--line)}
.sc .crow .cn{flex:1;font-weight:600;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc .crow .cn.off{color:var(--soft);text-decoration:line-through}
.sc .ib{width:28px;height:28px;border-radius:9px;border:1px solid var(--line2);background:#fff;cursor:pointer;
  color:var(--mut);font-size:13px;display:grid;place-items:center;flex:0 0 28px}
.sc .ib:hover{color:var(--ink)}
.sc .ib[disabled]{opacity:.35;cursor:default}
.sc .addrow{display:flex;gap:8px;margin-top:12px}
.sc .addrow input{flex:1;height:38px;border-radius:12px;border:1px solid var(--line2);padding:0 12px;font:inherit;font-size:13.5px}
@media (prefers-reduced-motion:reduce){.sc .live{animation:none}}

/* importazione del catalogo: le quattro strade, l'attesa, la revisione */
/* al telefono il titolo non si stringe accanto al bottone: il bottone va sotto */
.sc .im .inhd{flex-wrap:wrap}
.sc .im .inhd>div{flex:1 1 260px;min-width:0}
.sc .imopts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px}
@media(max-width:640px){.sc .imopts{grid-template-columns:1fr}}
.sc .imopt{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;padding:18px 18px 16px;
  border-radius:20px;border:1px solid var(--line2);background:#fff;cursor:pointer;font:inherit;color:inherit;
  box-shadow:0 12px 26px -22px rgba(19,26,36,.7);transition:border-color .15s,box-shadow .15s,transform .15s}
.sc .imopt:hover{border-color:color-mix(in srgb,var(--acc) 45%,transparent);transform:translateY(-1px);
  box-shadow:0 16px 30px -20px color-mix(in srgb,var(--acc) 60%,transparent)}
.sc .imopt b{font-size:15px;font-weight:700}
.sc .imopt span:not(.imic){font-size:12.5px;color:var(--mut);line-height:1.4}
.sc .imopt em{position:absolute;top:14px;right:14px;font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--acc);background:color-mix(in srgb,var(--acc) 11%,transparent);padding:4px 9px;border-radius:999px}
.sc .imic{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;margin-bottom:4px;color:var(--acc);
  background:linear-gradient(150deg,color-mix(in srgb,var(--acc2) 16%,#fff),color-mix(in srgb,var(--acc) 12%,#fff))}
.sc .imic svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sc .imdrop{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:22px;padding:30px 20px;border-radius:20px;
  border:1.5px dashed color-mix(in srgb,var(--acc) 40%,var(--line2));background:color-mix(in srgb,var(--acc2) 4%,#fff);
  cursor:pointer;text-align:center}
.sc .imdrop:hover{background:color-mix(in srgb,var(--acc2) 8%,#fff)}
.sc .imdrop b{font-size:15px}
.sc .imdrop span:not(.imic){font-size:12.5px;color:var(--mut)}
.sc .imths{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;margin-top:16px}
.sc .imths.small{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));margin-top:0}
.sc .imth{position:relative;aspect-ratio:3/4;max-width:100%;border-radius:14px;overflow:hidden;border:1px solid var(--line2);
  background:#f3f5f8;padding:0;cursor:pointer}
.sc .imth img{width:100%;height:100%;object-fit:cover;display:block}
.sc .impdf{display:grid;place-items:center;width:100%;height:100%;font-weight:800;color:var(--mut);font-size:13px}
.sc .imn{position:absolute;left:6px;bottom:6px;background:rgba(19,26,36,.7);color:#fff;font-size:11px;font-weight:700;
  border-radius:999px;padding:2px 7px}
.sc .imx,.imlb .imx{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;border:none;
  background:rgba(19,26,36,.65);color:#fff;font-size:15px;cursor:pointer;line-height:1}
.sc .imsite{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.sc .imsite input{flex:1;min-width:0;height:48px;border-radius:14px;border:1px solid var(--line2);padding:0 16px;font:inherit;
  font-size:15px;outline:none;background:#fff}
.sc .imsite input:focus{border-color:var(--acc);box-shadow:var(--ring)}
.sc .imwait{padding:28px 0 8px}
.sc .imdots{display:inline-flex;gap:7px;margin-bottom:18px}
.sc .imdots i{width:11px;height:11px;border-radius:50%;background:linear-gradient(180deg,var(--acc2),var(--acc));
  animation:imdot 1.2s ease-in-out infinite}
.sc .imdots i:nth-child(2){animation-delay:.15s}
.sc .imdots i:nth-child(3){animation-delay:.3s}
@keyframes imdot{0%,80%,100%{transform:scale(.6);opacity:.45}40%{transform:scale(1);opacity:1}}
.sc .imsum{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.sc .imgrp{margin-top:20px}
.sc .imgrp.look{padding:12px 14px 6px;border-radius:18px;background:rgba(192,125,18,.07);box-shadow:inset 0 0 0 1px rgba(192,125,18,.18)}
.sc .imgrp.look .ptitle{color:#8f5c05}
.sc .imrow{display:flex;align-items:flex-start;gap:12px;padding:10px 0}
.sc .imrow+.imrow{border-top:1px solid var(--line)}
.sc .imck{width:18px;height:18px;margin-top:9px;accent-color:var(--acc);flex:0 0 18px;cursor:pointer}
.sc .imtx{flex:1;min-width:0}
.sc .imname{width:100%;border:1px solid transparent;border-radius:10px;padding:6px 8px;margin-left:-8px;font:inherit;
  font-size:14px;font-weight:650;background:transparent;color:var(--ink)}
.sc .imname:hover{border-color:var(--line2);background:#fff}
.sc .imname:focus{border-color:var(--acc);background:#fff;outline:none;box-shadow:var(--ring)}
.sc .imdd{font-size:12px;color:var(--mut);margin-top:1px}
.sc .imwhy{font-size:12px;color:#8f5c05;font-weight:600;margin-top:4px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sc .imok{border:1px solid rgba(192,125,18,.35);background:#fff;color:#8f5c05;border-radius:999px;font:inherit;font-size:11.5px;
  font-weight:700;padding:3px 10px;cursor:pointer}
.sc .imfixed{color:#0b7a51}
.sc .impr{display:flex;align-items:center;gap:5px;flex:0 0 auto;margin-top:2px}
.sc .imprice{width:84px;height:36px;text-align:right;border-radius:11px;border:1px solid var(--line2);padding:0 10px;font:inherit;
  font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;background:#fff}
.sc .imprice:focus{border-color:var(--acc);outline:none;box-shadow:var(--ring)}
.sc .imrow.warn .imprice{border-color:rgba(192,125,18,.55);background:#fff8eb}
.sc .imprice.bad{border-color:var(--no)}
.sc .imunit{border:none;background:none;font:inherit;font-size:12px;color:var(--mut);font-weight:650;cursor:pointer;
  padding:3px 1px;border-bottom:1px dashed var(--line2);min-width:30px;text-align:left}
.sc .imunit:hover{color:var(--acc);border-bottom-color:var(--acc)}
.sc .imst{flex:0 0 112px;text-align:right;margin-top:8px}
.sc .imb{display:inline-block;font:inherit;font-size:11px;font-weight:700;border-radius:999px;padding:4px 10px;white-space:nowrap;border:none}
.sc .imb.new{background:color-mix(in srgb,var(--acc) 12%,transparent);color:var(--acc)}
.sc .imb.chg{background:rgba(19,26,36,.07);color:var(--ink2)}
.sc .imb.same{background:rgba(18,160,107,.12);color:#0b7a51}
.sc .imb.use{background:#fff;color:var(--acc);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 40%,transparent);cursor:pointer}
.sc .imrow.off .imname,.sc .imrow.off .imprice,.sc .imrow.off .imdd{opacity:.45;text-decoration:line-through}
.sc .imfoot{position:sticky;bottom:0;display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;margin:22px -26px -26px;
  padding:16px 26px;border-top:1px solid var(--line);background:rgba(255,255,255,.96);border-radius:0 0 var(--r) var(--r)}
.sc .imfoot .muted{flex:1 1 220px;min-width:0}
.sc .imbtns{display:flex;gap:10px;margin-left:auto;flex:0 0 auto}
.imlb{position:fixed;inset:0;z-index:200;background:rgba(19,26,36,.82);display:grid;place-items:center;padding:24px;cursor:zoom-out}
.imlb img{max-width:100%;max-height:100%;border-radius:12px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.sc .linkbtn{border:none;background:none;padding:0;font:inherit;color:var(--acc);font-weight:650;cursor:pointer;text-decoration:underline}
@media(max-width:640px){.sc .imrow{flex-wrap:wrap}.sc .imst{flex-basis:auto}.sc .imprice{width:74px}}
@media (prefers-reduced-motion:reduce){.sc .imdots i{animation:none}}

/* consegna: chi la porta, foto del pacco, corrieri stasera */
.sc .crr{margin-top:16px;padding:14px 16px 6px;border-radius:16px;background:rgba(19,26,36,.04)}
.sc .crr .ptitle{margin-bottom:8px}
.sc .csel{width:100%;height:42px;border-radius:12px;border:1px solid var(--line2);background-color:#fff;padding:0 12px;font:inherit;
  font-size:14px;font-weight:600;margin-bottom:6px}
.sc .thumb{width:52px;height:52px;border-radius:12px;overflow:hidden;border:1px solid var(--line2);padding:0;background:#f3f5f8;
  cursor:zoom-in;flex:0 0 52px;display:block}
.sc .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sc .dotv{display:inline-block;width:8px;height:8px;border-radius:50%;background:rgba(19,26,36,.18);margin-right:8px;vertical-align:middle}
.sc .dotv.on{background:var(--ok);box-shadow:0 0 0 3px rgba(18,160,107,.18)}
.sc .crow .muted{white-space:nowrap}
.sc .minimap{height:210px;border-radius:14px;margin:10px 0 12px;overflow:hidden;background:#e9ede9}
.sc .leaflet-container{font:inherit}
.mk-shop i,.mk-courier i{display:block;width:100%;height:100%;border-radius:50%;border:2.5px solid #fff;box-shadow:0 2px 6px rgba(19,26,36,.4)}
.mk-shop i{background:#5f6d80}
.mk-courier i{background:linear-gradient(180deg,var(--brand-1),var(--brand-2))}
.mk-courier.lost i{background:#8b98aa}
.mk-dest i{display:block;width:24px;height:24px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#131a24;border:2.5px solid #fff;
  box-shadow:0 2px 6px rgba(19,26,36,.4)}

/* attivazione: i passi */
.sc .prog{height:8px;border-radius:999px;background:rgba(19,26,36,.08);margin-top:16px;overflow:hidden}
.sc .prog i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--acc2),var(--acc));transition:width .4s}
.sc .asteps{margin-top:18px}
.sc .astep{display:flex;align-items:center;gap:14px;padding:14px 0}
.sc .astep+.astep{border-top:1px solid var(--line)}
.sc .an{width:34px;height:34px;border-radius:50%;flex:0 0 34px;display:grid;place-items:center;font-weight:800;font-size:14px;
  background:rgba(19,26,36,.07);color:var(--mut)}
.sc .astep.done .an{background:rgba(18,160,107,.14);color:#0b7a51}
.sc .astep.todo .an{background:linear-gradient(180deg,var(--acc2),var(--acc));color:#fff}
.sc .atx{flex:1;min-width:0}
.sc .at{font-weight:700;font-size:14.5px}
.sc .at em{font-style:normal;font-size:11px;color:var(--soft);font-weight:600;margin-left:6px}
.sc .ad{font-size:12.5px;color:var(--mut);margin-top:2px}
.sc .astep .btn{flex:0 0 auto}
.sc .qrbox{background:#fff;border:1px solid var(--line2);border-radius:16px;padding:12px;display:inline-block}
@media(max-width:640px){.sc .astep{flex-wrap:wrap}.sc .astep .btn{margin-left:48px}}
/* abbonamento: i piani */
.seg{display:inline-flex;background:rgba(19,26,36,.06);border-radius:999px;padding:3px}
.seg button{border:none;background:transparent;font:inherit;font-size:12.5px;font-weight:700;padding:7px 14px;border-radius:999px;cursor:pointer;color:var(--muted)}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 4px 10px -6px rgba(19,26,36,.6)}
.plan{border:1px solid var(--line2);border-radius:20px;padding:20px;background:#fff;display:flex;flex-direction:column;gap:6px}
.plan.top{border-color:color-mix(in srgb,var(--brand-2) 45%,transparent);box-shadow:0 18px 36px -26px color-mix(in srgb,var(--brand-2) 70%,transparent)}
.plan .pn{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.plan .pp{font-size:34px;font-weight:800;letter-spacing:-.04em;line-height:1}
.plan .pp small{font-size:14px;font-weight:600;color:var(--muted);letter-spacing:0}
.plan .pv{font-size:11.5px;color:var(--muted2)}
.plan ul{margin:8px 0 14px;padding-left:18px;font-size:13px;color:var(--ink2);flex:1}
.plan li{margin:4px 0}

/* ---------- contanti: incasso e resto ---------- */
.sc .cashrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 0 12px}
.sc .cashrow label{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:8px}
.sc .cashrow input{width:96px;padding:8px 10px;border-radius:10px;border:1px solid var(--line);
  background:var(--surface);font:inherit;font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.sc .cashrow #scChange{font-size:12.5px;font-weight:700;flex:1}
.sc .cashrow #scChange.ok{color:var(--ok)}
.sc .cashrow #scChange.no{color:var(--no)}
.sc .cashrow .btn{margin-left:auto}

/* ---------- contanti di oggi, nella colonna di lato ---------- */
.sc .cash .crow{display:flex;justify-content:space-between;gap:10px;padding:7px 0;font-size:13px}
.sc .cash .crow+.crow{border-top:1px solid var(--line)}
.sc .cash .owed{color:var(--no);font-weight:700}

/* ---------- la comanda da stampare ---------- */
#scPrint{display:none}
@media print{
  body>*{display:none!important}
  #scPrint{display:block!important;font:15px/1.45 ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
    color:#000;background:#fff;padding:6mm 4mm;max-width:76mm}
  #scPrint .phead{display:flex;justify-content:space-between;align-items:baseline;
    border-bottom:2px solid #000;padding-bottom:4px;margin-bottom:8px}
  #scPrint .phead b{font-size:30px;line-height:1}
  #scPrint .phead span{font-size:13px;text-transform:uppercase;letter-spacing:.08em}
  #scPrint .pwho{font-size:18px;font-weight:700}
  #scPrint .pwhen{font-size:17px;font-weight:700;margin-top:2px}
  #scPrint .paddr{font-size:15px;margin-top:2px}
  #scPrint .plines{width:100%;border-collapse:collapse;margin:10px 0;font-size:17px}
  #scPrint .plines td{padding:5px 0;border-bottom:1px dashed #999;vertical-align:top}
  #scPrint .plines .q{width:4.5em;font-weight:800}
  #scPrint .plines .p{text-align:right;white-space:nowrap;padding-left:6px}
  #scPrint .pnote{font-size:14px;font-style:italic}
  /* Sulla carta non c'e' il colore: si tiene il riquadro. Una comanda stampata in bianco e nero
     con «senza insalata» in corsivo fra le altre righe non la legge nessuno. */
  #scPrint .psenza{font-size:15px;font-weight:800;letter-spacing:.04em;border:2px solid #000;
    display:block;padding:1px 6px;margin-top:3px;width:fit-content}
  #scPrint .pfee{text-align:right;font-size:15px}
  #scPrint .ptot{font-size:22px;font-weight:800;text-align:right;margin-top:6px;border-top:2px solid #000;padding-top:6px}
  #scPrint .ppay{font-size:16px;font-weight:700;text-align:right;margin-top:2px}
  #scPrint .pcli{margin-top:10px;font-size:15px;border:1px solid #000;padding:6px}
  #scPrint .pfoot{margin-top:12px;font-size:12px;text-align:center}
  @page{margin:6mm}
}

/* ---------- storico degli ordini ---------- */
.sc .hfilt{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px}
.sc .hfilt input.search{flex:1 1 220px;min-width:180px;padding:10px 14px;border-radius:12px;
  border:1px solid var(--line);background:var(--surface);font:inherit}
.sc .hfilt label{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.sc .hfilt input[type=date],.sc .hfilt select{padding:8px 10px;border-radius:10px;border:1px solid var(--line);
  background:var(--surface);font:inherit;font-size:13px}
.sc .htab{margin-top:16px;border-top:1px solid var(--line)}
.sc .hrow{display:grid;grid-template-columns:64px 96px 1fr 150px 110px;gap:10px;align-items:center;width:100%;
  text-align:left;padding:11px 6px;border-bottom:1px solid var(--line);background:none;font:inherit}
.sc .hrow:hover{background:rgba(19,26,36,.03)}
.sc .hrow .n{font-weight:800;font-variant-numeric:tabular-nums}
.sc .hrow .w{font-size:12.5px;color:var(--muted)}
.sc .hrow .c{font-size:13.5px;min-width:0;overflow:hidden}
.sc .hrow .p{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;font-size:13.5px}
.sc .hrow .muted{font-size:11.5px}
.sc .hpag{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px;font-size:13px;color:var(--muted)}
@media(max-width:900px){
  .sc .hrow{grid-template-columns:56px 1fr 92px;grid-template-areas:"n c p" "w s s";row-gap:2px}
  .sc .hrow .n{grid-area:n}.sc .hrow .c{grid-area:c}.sc .hrow .p{grid-area:p}
  .sc .hrow .w{grid-area:w}.sc .hrow .s{grid-area:s}
}

/* ---------- varianti e aggiunte ---------- */
#scOpt .grp{margin-bottom:18px;padding-bottom:8px;border-bottom:1px solid var(--line)}
#scOpt .grp:last-of-type{border-bottom:none}
#scOpt .addrow{display:flex;gap:8px;margin-top:8px}
#scOpt .addrow input{flex:1;padding:9px 12px;border-radius:10px;border:1px solid var(--line);
  background:var(--surface);font:inherit;font-size:13px}
#scOpt .crow .cn.off{text-decoration:line-through;color:var(--muted2)}
@media print{ #scPrint .popt{font-size:15px;font-weight:700} }

/* ---------- ingredienti e allergeni ----------
   Gli stemmi devono leggersi in fila senza pesare: un ingrediente ne ha uno o due, un piatto anche
   cinque, e su una riga alta quarantaquattro pixel non c'e' spazio per i riquadri pieni. */
.sc .alg{display:inline-block;font-size:11px;font-weight:650;letter-spacing:.01em;
  padding:1px 7px;border-radius:999px;margin-right:4px;
  color:var(--brand-ink);background:color-mix(in srgb,var(--brand-2) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--brand-2) 22%,transparent)}
.sc .alg.none{color:var(--mut);background:transparent;border-color:var(--line);font-weight:500}
/* Un ingrediente finito resta leggibile: e' un'informazione, non un errore. */
.sc .irow.ing.off .dn{color:var(--mut)}
.sc .irow.ing.off .alg{opacity:.5}
.sc .irow.ing{gap:10px}
.sc .irow.ing .dd{display:flex;align-items:center;flex-wrap:wrap;gap:2px}

/* I due interruttori, e i quattordici allergeni nel pannello di correzione. */
.algpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:6px}
.algp{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);
  border-radius:11px;cursor:pointer;font-size:13.5px;background:var(--surf)}
.algp:hover{border-color:color-mix(in srgb,var(--brand-2) 35%,transparent)}
.algp input{accent-color:var(--brand-2);width:16px;height:16px;flex:none}
.algp:has(input:checked){border-color:var(--brand-2);
  background:color-mix(in srgb,var(--brand-2) 7%,transparent)}
.chk{display:flex;align-items:center;gap:9px;padding:9px 2px;cursor:pointer;font-size:14px}
.chk input{accent-color:var(--brand-2);width:17px;height:17px;flex:none}
.lbl{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin:0 0 7px}

/* Due sole scelte, una accanto all'altra: «da guardare» e «tutti». */
.sc .segm{display:inline-flex;gap:3px;padding:3px;border-radius:12px;background:rgba(19,26,36,.05)}
.sc .segm button{font:inherit;font-size:13px;font-weight:650;color:var(--mut);background:none;border:0;
  padding:6px 13px;border-radius:9px;cursor:pointer}
.sc .segm.wide{display:flex;width:100%}
.sc .segm.wide button{flex:1;text-align:center;white-space:nowrap;font-size:12.5px}
.sc .segm button[aria-pressed="true"],.sc .segm button.on{background:var(--surf);color:var(--ink);box-shadow:0 2px 6px -3px rgba(19,26,36,.5)}

/* «Confermo» si vede ma non grida: e' ripetuto una volta per riga. */
.sc .btn-ghost.ok{color:#0b7a51;border-color:rgba(18,160,107,.4)}
.sc .btn-ghost.ok:hover{background:rgba(18,160,107,.07)}
/* L'interruttore «ce l'ho» sta acceso quasi sempre: acceso e' quieto, spento si fa notare.
   Al contrario, settantaquattro interruttori nel colore del marchio sono solo rumore. */
.sc .irow.ing .tog{background:rgba(200,68,58,.7)}
.sc .irow.ing .tog.on{background:rgba(19,26,36,.2)}

/* ---------- certificazioni ----------
 * La schermata comincia con la differenza fra «questo piatto» e «questo locale», perche' e'
 * l'unica cosa che chi arriva qui deve capire, e una spiegazione in fondo non la legge nessuno.
 * L'anteprima mostra la frase esatta che vedra' il cliente: si dichiara sapendo cosa si sta
 * mettendo in vetrina, non dopo averlo scoperto.
 */
.sc .warnbox{border-left:4px solid var(--warn,#c07d12);background:rgba(192,125,18,.07)}
.sc .warnbox p{margin:0;font-size:13.5px}
.sc .warnbox p+p{margin-top:8px}
.sc .cert-spiega h3{margin:0 0 12px;font-size:16px;font-weight:750;letter-spacing:-.02em}
.sc .cert-spiega .due{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sc .cert-spiega .due>div{border:1px solid var(--line);border-radius:14px;padding:13px 15px}
.sc .cert-spiega .due p{margin:6px 0 0;font-size:13px;color:var(--mut);line-height:1.5}
.sc .cert-spiega .et{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mut)}
.sc .cert-spiega .et.forte{color:#0b7a51}
.sc .cert-spiega .due>div:has(.forte){border-color:rgba(18,160,107,.42);background:rgba(18,160,107,.05)}
.sc .cert-spiega>.s{margin:14px 0 0;font-size:12.5px}

.sc .certpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin-top:12px}
.sc .certopt{text-align:left;padding:13px 15px;border:1px solid var(--line2);border-radius:14px;
  background:rgba(255,255,255,.92);font:inherit;cursor:pointer;display:block}
.sc .certopt:hover{border-color:var(--ink);box-shadow:0 8px 18px -14px rgba(19,26,36,.7)}
.sc .certopt b{display:block;font-size:14px;font-weight:700}
.sc .certopt span{display:block;margin-top:4px;font-size:12px;color:var(--mut);line-height:1.45}

.sc .cert.spenta{opacity:.66}
.sc .anteprima{border:1px dashed var(--line2);border-radius:14px;padding:13px 15px;margin:4px 0 12px;
  background:rgba(18,160,107,.04)}
.sc .anteprima p{margin:8px 0 0;font-size:13.5px;line-height:1.5}
.sc .anteprima .lh{display:block;margin-top:9px;font-size:11.5px;color:var(--mut)}
.sc .anteprima.grande{margin-bottom:16px}
.sc .cstemma{display:inline-block;padding:5px 13px;border-radius:999px;background:#12a06b;color:#fff;
  font-size:12px;font-weight:750;letter-spacing:.01em}
.sc .cert.spenta .cstemma{background:var(--mut)}
.sc .kv{margin-top:2px}
.sc .firma{margin-top:12px}
.sc .firma summary{font-size:12.5px;color:var(--mut);cursor:pointer;font-weight:650}
.sc .firma p{margin:9px 0 0;font-size:12.5px;color:var(--mut);line-height:1.55;
  border-left:3px solid var(--line2);padding-left:12px}
.sc .pill.no{background:rgba(200,68,58,.13);color:#a8382e}
.sc .pill.warn{background:rgba(192,125,18,.16);color:#8f5c05}
.sc .btn-ghost.danger{color:#a8382e;border-color:rgba(200,68,58,.35)}
.sc .btn-ghost.danger:hover{background:rgba(200,68,58,.07)}

/* La spunta di responsabilita' non e' una casella qualsiasi: si legge per intero, quindi sta in
   un riquadro suo e il testo va a capo invece di stare su una riga sola. */
.chk.decl{align-items:flex-start;border:1.5px solid var(--line2);border-radius:14px;padding:13px 15px;
  background:rgba(19,26,36,.02);margin-top:6px}
.chk.decl span{font-size:12.5px;line-height:1.55;color:var(--ink)}
.chk.decl input{margin-top:2px}

@media (max-width:760px){ .sc .cert-spiega .due{grid-template-columns:1fr} }

/* «SENZA INSALATA»: chi prepara legge venti righe al minuto con le mani occupate. Salta all'occhio
   o non serve a niente. */
.sc .senza{display:inline-block;margin-top:4px;font-size:11.5px;font-weight:800;letter-spacing:.03em;
  padding:2px 8px;border-radius:6px;background:rgba(192,125,18,.16);color:#8f5c05}

/* «Oggi manca»: righe strette, un tocco per rimettere. */
.sc .mrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0}
.sc .mrow+.mrow{border-top:1px solid var(--line)}
.sc .mrow b{font-weight:700;font-size:13.5px}
.sc .mrow .q{display:block;font-size:11.5px;color:var(--mut);margin-top:1px}
.sc .card.manca{border-left:4px solid var(--warn,#c07d12)}
.drawer .mrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0}
.drawer .mrow+.mrow{border-top:1px solid var(--line)}
.drawer .mrow b{font-weight:700;font-size:13.5px}
.drawer .mrow .q{display:block;font-size:11.5px;color:var(--mut);margin-top:1px}

/* ---------- orari ----------
 * La settimana si legge per righe: il giorno a sinistra, le sue fasce a destra. Un giorno vuoto
 * dice «Chiuso» invece di non dire niente: una riga bianca sembra un errore di caricamento.
 */
.sc .card.stato{border-left:4px solid var(--mut)}
.sc .card.stato.on{border-left-color:#12a06b}
.sc .drow{display:flex;align-items:center;gap:14px;padding:11px 0;flex-wrap:wrap}
.sc .drow+.drow{border-top:1px solid var(--line)}
.sc .dnome{flex:0 0 108px;font-weight:700;font-size:13.5px}
.sc .dfasce{flex:1;min-width:210px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.sc .dchiuso{font-size:12.5px;color:var(--mut)}
.sc .dfascia{display:inline-flex;align-items:center;gap:5px;background:rgba(19,26,36,.04);
  border-radius:12px;padding:4px 6px 4px 8px}
.sc .dfascia input[type=time]{font:inherit;font-size:13px;font-variant-numeric:tabular-nums;
  border:0;background:none;color:var(--ink);padding:2px}
.sc .dfascia em{color:var(--mut);font-style:normal}
.sc .dfascia .dx{border:0;background:none;color:var(--mut);font-size:16px;line-height:1;
  cursor:pointer;padding:0 4px}
.sc .dfascia .dx:hover{color:#a8382e}
.sc .dazioni{display:flex;gap:7px;flex-wrap:wrap}
@media (max-width:760px){ .sc .dnome{flex-basis:100%} }

/* La riga dell'orario nella schermata di lavoro: «chiudo adesso» deve essere a portata di dito. */
.sc .orariga{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:14px;padding:11px 14px;border-radius:14px;background:rgba(19,26,36,.04)}
.sc .orariga.amano{background:rgba(192,125,18,.11)}
.sc .orariga b{display:block;font-size:14px;font-weight:700}
.sc .orariga span{display:block;font-size:12px;color:var(--mut);margin-top:1px}

/* Il perche' dell'orario proposto: sta sotto la promessa, piccolo, e non ruba la scena al bottone. */
.sc p.s.coda{margin:6px 0 0;font-size:12.5px;color:var(--mut)}
.sc p.s.coda b{color:var(--ink)}
.sc .dfascia input[type=number]{font:inherit;font-size:13px;font-variant-numeric:tabular-nums;
  border:0;background:none;color:var(--ink);padding:2px;width:4em;text-align:right}

/* Senza rete: una striscia che non si puo' non vedere, ma che non urla «e' rotto tutto». */
.sc .reteout{margin-bottom:14px;padding:11px 16px;border-radius:14px;font-size:13.5px;
  background:rgba(200,68,58,.1);color:#8f2b22;border-left:4px solid #c8443a}

/* La guida dentro il pannello: si legge, non si scorre. */
.drawer .guida h4{margin:16px 0 4px;font-size:13px;font-weight:750;letter-spacing:-.01em}
.drawer .guida h4:first-child{margin-top:0}
.drawer .guida p{margin:0 0 6px;font-size:13px;line-height:1.55;color:var(--mut)}
.drawer .guida b{color:var(--ink);font-weight:700}
.drawer .guida ul{margin:4px 0 0;padding-left:18px}
.drawer .guida li{font-size:13px;line-height:1.6;color:var(--mut);margin-bottom:3px}

/* I due modi di farsi avvisare: si scelgono guardando il costo, non dopo. */
.sc .modi{display:grid;gap:8px}
.sc .modo{text-align:left;padding:11px 13px;border:1.5px solid var(--line2);border-radius:13px;
  background:rgba(255,255,255,.9);font:inherit;cursor:pointer}
.sc .modo[aria-pressed="true"]{border-color:var(--ink);background:var(--surf)}
.sc .modo b{display:block;font-size:13.5px;font-weight:700}
.sc .modo span{display:block;margin-top:3px;font-size:12px;line-height:1.45;color:var(--mut)}
.sc .modo span b{display:inline;font-size:inherit}

/* I consigli del giro: suggerimenti, e si vede che lo sono. */
.sc p.s.consiglio{margin:9px 0 0;padding-left:11px;border-left:3px solid var(--line2);
  font-size:12.5px;line-height:1.5}

/* La miniatura del piatto e' anche il bottone della foto: il posto dove guardi e' il posto dove tocchi. */
.sc button.sc-ph{border:0;padding:0;cursor:pointer;position:relative}
.sc button.sc-ph:hover{outline:2px solid var(--ink);outline-offset:1px}
.sc button.sc-ph.mia::after{content:'';position:absolute;right:-2px;bottom:-2px;width:9px;height:9px;
  border-radius:50%;background:#12a06b;border:2px solid var(--surf)}
.drawer .fotobox{text-align:center}
.drawer .fotobox img{width:100%;max-width:260px;border-radius:16px;display:block;margin:0 auto}
.drawer .fotobox label.btn{display:inline-flex;cursor:pointer}

/* ==========================================================================
 * La vetrina: la schermata dove il negoziante sceglie la sua prima pagina.
 *
 * Si sceglie guardando. Per questo i tre modelli sono tre figure e non tre
 * parole, e l'anteprima a fianco e' la pagina vera disegnata dalla stessa
 * funzione del sito: un disegnino a parte, prima o poi, mente.
 * ========================================================================== */
.vt-scelte{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
@media (max-width:640px){ .vt-scelte{grid-template-columns:1fr} }
.vt-scelta{display:block;text-align:left;padding:12px;border-radius:16px;cursor:pointer;
  background:var(--surface,#fff);border:1.5px solid var(--line,rgba(19,26,36,.12));font:inherit;
  color:inherit;transition:border-color .12s,box-shadow .12s}
.vt-scelta:hover{border-color:var(--brand-2)}
.vt-scelta.on{border-color:var(--brand-2);box-shadow:0 0 0 3px rgba(232,56,109,.16)}
.vt-scelta b{display:block;font-size:14px;font-weight:750;margin-top:9px}
.vt-scelta .vt-per{display:block;font-size:12px;line-height:1.35;color:var(--muted,#5f6d80);margin-top:3px}

/* Le figurine: tre rettangoli che dicono dov'e' la foto e dov'e' il nome. Non
   sono le pagine in piccolo, sono la loro pianta: a questa misura una pagina
   vera rimpicciolita e' una macchia grigia. */
.vt-mini{display:block;height:72px;border-radius:11px;overflow:hidden;position:relative;
  background:linear-gradient(160deg,rgba(255,138,61,.16),rgba(232,56,109,.14))}
.vt-mini i{position:absolute;display:block;border-radius:3px;background:rgba(19,26,36,.30)}
.vt-mini-FOTOGRAFICA{background:linear-gradient(160deg,#6b7280,#374151)}
.vt-mini-FOTOGRAFICA i:nth-child(1){left:9px;right:9px;top:9px;height:40px;background:rgba(255,255,255,.34);border-radius:6px}
.vt-mini-FOTOGRAFICA i:nth-child(2){left:9px;width:30px;top:53px;height:5px;background:rgba(255,255,255,.9)}
.vt-mini-FOTOGRAFICA i:nth-child(3){left:9px;right:9px;top:62px;height:6px;background:rgba(255,255,255,.55);border-radius:3px}
.vt-mini-PULITA i:nth-child(1){left:9px;width:14px;height:14px;top:10px;border-radius:4px}
.vt-mini-PULITA i:nth-child(2){left:9px;width:44px;top:30px;height:7px}
.vt-mini-PULITA i:nth-child(3){left:9px;right:9px;top:45px;height:16px;border-radius:5px;background:rgba(19,26,36,.16)}
.vt-mini-CALDA i:nth-child(1){left:50%;margin-left:-13px;width:26px;height:26px;top:8px;border-radius:50%}
.vt-mini-CALDA i:nth-child(2){left:50%;margin-left:-19px;width:38px;top:40px;height:6px}
.vt-mini-CALDA i:nth-child(3){left:9px;right:9px;top:54px;height:12px;border-radius:5px;background:rgba(19,26,36,.16)}

/* Le tavolozze pronte: «scegli due colori» davanti a un cerchio di infiniti
   colori e' una domanda a cui quasi tutti rispondono male. */
.vt-tav{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.vt-tavo{display:flex;align-items:center;gap:8px;padding:7px 13px 7px 8px;border-radius:999px;
  border:1.5px solid var(--line,rgba(19,26,36,.12));background:var(--surface,#fff);cursor:pointer;
  font:inherit;font-size:13px;font-weight:600;color:inherit}
.vt-tavo span{width:20px;height:20px;border-radius:50%;display:block}
.vt-tavo.on{border-color:var(--brand-2);box-shadow:0 0 0 3px rgba(232,56,109,.16)}

.vt-picker{display:flex;align-items:center;gap:16px;margin-top:14px;flex-wrap:wrap}
.vt-picker label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.vt-picker input[type=color]{width:38px;height:38px;padding:0;border-radius:11px;cursor:pointer;
  border:1px solid var(--line,rgba(19,26,36,.14));background:none}

/* Il telefono dell'anteprima: una cornice, non un giocattolo. Serve a dire
   «questa e' la larghezza vera», perche' e' li' che il cliente decide. */
.vt-tel{margin-top:10px;height:560px;border-radius:26px;overflow:hidden;position:relative;
  border:1px solid var(--line,rgba(19,26,36,.14));background:linear-gradient(168deg,#f2f7fa,#f6f4fb);
  box-shadow:inset 0 2px 10px rgba(19,26,36,.06)}
.vt-tel .vt{height:100%;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.vt-tel .vt::-webkit-scrollbar{width:0}