/* PLUMBING_V 4 — reset tecnico canonico (Toolkit/boilerplate/plumbing.css): solo correttezza, zero estetica. */
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ══════════ Silia Pizza al Trancio — la comanda ══════════
   Il banco nero (il marmo dietro il forno, le insegne), la carta termica al centro, il giallo delle magliette e delle
   sedie, il rame del campanello. Reddit Mono per la comanda, Lilita One per il logo stampato, Radio Canada Big fuori. */
:root {
  --banco: #121110;
  --banco-2: #1D1B18;
  --carta: #F6F4EE;
  --inchiostro: #1B1B1B;
  --inchiostro-2: #4A4945;
  --giallo: #F5C518;
  --evid: rgba(245, 197, 24, .62);
  --rame: #B8693E;
  --pomodoro: #B32E1B;
  /* 'Reddit Sans' arriva col solo sottoinsieme delle cifre (text=0123456789): lo zero di Reddit Mono è barrato */
  --mono: 'Reddit Sans', 'Reddit Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --disp: 'Lilita One', 'Reddit Mono', system-ui, sans-serif;
  --sans: 'Radio Canada Big', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --carta-w: min(680px, calc(100vw - 24px));
  --pad: clamp(16px, 4vw, 40px);
  --testata-h: 64px;
  --stampante-h: 76px;
  --fuori: clamp(40px, 3.6vw, 64px);
  --lato: clamp(210px, calc((100vw - var(--carta-w)) / 2 - var(--fuori) - 26px), 400px);
}
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--testata-h) + 18px); }
body {
  margin: 0; color: #EDEAE3; font-family: var(--sans); font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  background-color: var(--banco);
  /* le venature del marmo nero dietro il forno */
  background-image:
    radial-gradient(ellipse 60% 40% at 15% 8%, rgba(255, 240, 210, .05), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900'%3E%3Cg fill='none' stroke='%23C9A868' stroke-opacity='.10' stroke-width='1.2'%3E%3Cpath d='M-20 140c120 40 180-30 290 10s150 120 260 90 190-110 390-60'/%3E%3Cpath d='M60 520c80-60 170 10 230-40s60-150 170-170 140 60 240 20'/%3E%3Cpath d='M-30 760c140-20 200 60 330 30s170-140 300-120 170 90 330 50' stroke-opacity='.07'/%3E%3Cpath d='M420 0c-30 90 40 150 10 240s-110 120-90 220 110 150 70 260' stroke-opacity='.06'/%3E%3C/g%3E%3C/svg%3E");
  background-size: auto, 900px 900px;
}
a { color: inherit; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.simboli { position: absolute; width: 0; height: 0; overflow: hidden; }
.no-js .solo-js { display: none !important; }
html:not(.no-js) .solo-nojs { display: none !important; }
.salta-al-testo { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--giallo); color: var(--inchiostro); padding: 10px 16px; font-family: var(--mono); font-weight: 700; text-decoration: none; }
.salta-al-testo:focus { top: 10px; }
:focus-visible { outline: 3px solid var(--giallo); outline-offset: 2px; }
.carta :focus-visible, .cassetto :focus-visible { outline-color: var(--inchiostro); }

/* ══════════ la testata: l'insegna nera e gialla ══════════ */
.testata {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: var(--testata-h);
  display: flex; align-items: center; gap: 18px; padding: 0 clamp(12px, 2vw, 22px);
  background: #0B0A09; border-bottom: 1px solid #2A2621;
}
.testata__marchio { display: flex; align-items: center; gap: 10px; color: var(--giallo); text-decoration: none; flex: none; }
.testata__trancio { width: 46px; height: 26px; color: var(--giallo); }
.testata__nome { display: flex; flex-direction: column; font-family: var(--disp); font-size: 30px; line-height: .95; }
.testata__cosa { font-family: var(--mono); font-size: 10.5px; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; color: #D6D1C6; margin-top: 3px; }
.voci { display: flex; gap: 2px; margin: 0 auto; }
.voci a { font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #ECE8DF; text-decoration: none; padding: 9px 10px; border-radius: 3px; }
.voci a:hover { background: #24211D; color: var(--giallo); }
.testata__destra { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.lingue { display: flex; border: 1px solid #45403A; border-radius: 3px; overflow: hidden; }
.lingue button { font-family: var(--mono); font-size: 12.5px; font-weight: 700; background: transparent; color: #CFCAC0; border: 0; min-width: 40px; min-height: 36px; cursor: pointer; }
.lingue button[aria-pressed="true"] { background: #ECE8DF; color: #0B0A09; }
.testata__chiama { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; background: var(--giallo); color: #0B0A09; font-family: var(--mono); font-weight: 800; font-size: 13.5px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; border-radius: 3px; }
.burger { display: none; width: 46px; height: 42px; background: transparent; border: 1px solid #45403A; border-radius: 3px; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.burger span { display: block; width: 20px; height: 2px; background: #ECE8DF; }
.indice-mobile {
  position: fixed; top: var(--testata-h); left: 0; right: 0; z-index: 58; background: #0B0A09;
  padding: 6px clamp(16px, 5vw, 28px) 22px; border-bottom: 1px solid #2A2621; display: grid;
}
.indice-mobile a { display: flex; gap: 16px; align-items: baseline; padding: 13px 2px; color: #ECE8DF; text-decoration: none; font-family: var(--mono); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px dashed #332F29; }
.indice-mobile b { color: var(--giallo); font-weight: 800; }
@media (max-width: 1180px) { .voci { display: none; } .burger { display: flex; } }
@media (max-width: 520px) {
  :root { --testata-h: 58px; }
  .testata__nome { font-size: 26px; }
  .testata__cosa { font-size: 9.5px; letter-spacing: .1em; }
  .testata__chiama { display: none; }
}

/* ══════════ lo scontrino ══════════ */
.scontrino { position: relative; padding-top: calc(var(--testata-h) + 34px); overflow-x: clip; }
.carta, .coda {
  position: relative; width: var(--carta-w); box-sizing: border-box; margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad);
  background: var(--carta); color: var(--inchiostro); font-family: var(--mono); font-size: 15.5px; line-height: 1.6;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25), 0 30px 70px rgba(0, 0, 0, .55);
}
.carta { padding-top: 30px; padding-bottom: 8px; }
.carta:focus { outline: none; }
/* il bordo tagliato dalla lama della stampante */
.carta::before {
  content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 9px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M0 9L7 0l7 9z' fill='%23F6F4EE'/%3E%3C/svg%3E") repeat-x left bottom / 14px 9px;
}
/* la coda continua fino in fondo alla pagina: l'ultimo pezzo di carta è ancora dentro la stampante */
.coda { padding-top: 4px; padding-bottom: calc(var(--stampante-h) + 70px); text-align: center; }
.carta p { margin: 0 0 12px; }
.centro { text-align: center; }
.carta .centro, .coda .centro { margin: 0 0 3px; }
.piccolo { font-size: 13px; line-height: 1.5; color: var(--inchiostro-2); }
.carta b { font-weight: 800; }
.doppia { height: 5px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; margin: 18px 0; }
.tratteggio { height: 2px; margin: 18px 0; background: repeating-linear-gradient(90deg, currentColor 0 9px, transparent 9px 15px); opacity: .75; }
.evidenzia { background: linear-gradient(100deg, transparent .15em, var(--evid) .15em, var(--evid) calc(100% - .1em), transparent calc(100% - .1em)); padding: 0 .2em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* intestazione */
.testa { position: relative; padding-bottom: 30px; }
.testa__logo { text-align: center; }
.testa__trancio { display: block; width: 104px; height: 58px; margin: 4px auto 0; color: var(--inchiostro); }
.testa__nome { font-family: var(--disp); font-size: clamp(78px, 19vw, 136px); line-height: .88; letter-spacing: .01em; margin: 2px 0 0 !important; }
.testa__cosa { font-weight: 700; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; margin: 12px 0 16px !important; }
.colonne { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 !important; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 14px; }
.stato-riga { margin: 6px 0 0 !important; text-align: center; text-transform: uppercase; letter-spacing: .05em; font-size: 14px; font-weight: 600; }
.stato { background: linear-gradient(100deg, transparent .1em, var(--evid) .1em, var(--evid) calc(100% - .1em), transparent calc(100% - .1em)); padding: 1px .45em; }
.titolo { font-family: var(--mono); font-weight: 800; text-transform: uppercase; font-size: clamp(31px, 7.2vw, 56px); line-height: 1.02; letter-spacing: -.025em; margin: 26px 0 14px; }
.sotto { font-family: var(--mono); font-size: 18px; line-height: 1.5; margin: 0 0 20px !important; max-width: 34ch; }
.bottoni { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px !important; }
.bottone {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 22px; box-sizing: border-box;
  border: 2px solid var(--inchiostro); border-radius: 3px; background: transparent; color: var(--inchiostro);
  font-family: var(--mono); font-weight: 800; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer;
}
.bottone:hover { background: var(--giallo); }
.bottone--pieno { background: var(--inchiostro); color: var(--giallo); }
.bottone--pieno:hover { background: #000; color: #FFD84A; }

/* i tranci appoggiati: i loro taglieri scontornati */
.posato { margin: 0; pointer-events: none; rotate: var(--r, 0deg); }
.posato img { display: block; width: 100%; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .38)); }
.posato--testa { width: min(86%, 430px); margin: 14px auto -6px; --r: -6deg; }

/* capitoli: la riga in negativo */
.blocco { position: relative; padding: 6px 0 34px; }
.capo { display: flex; align-items: baseline; gap: 14px; margin: 0 calc(-1 * var(--pad)) 22px; padding: 15px var(--pad) 13px; background: var(--inchiostro); color: var(--carta); }
.capo__n { font-weight: 700; font-size: 14px; letter-spacing: .1em; color: #CFCBC2; }
.capo__t { margin: 0; font-family: var(--mono); font-weight: 800; text-transform: uppercase; font-size: clamp(22px, 4.6vw, 34px); line-height: 1.05; letter-spacing: -.01em; }
.capo__q { color: var(--giallo); }
.sottocapo { font-family: var(--mono); font-weight: 800; text-transform: uppercase; font-size: 17px; letter-spacing: .03em; margin: 30px 0 6px; padding-bottom: 8px; border-bottom: 2px solid var(--inchiostro); }

.citazione { margin: 22px 0; padding: 16px 18px; border: 2px solid var(--inchiostro); }
.citazione p { font-family: var(--mono); font-size: 18px; font-weight: 700; line-height: 1.45; margin: 0 !important; }
.citazione footer { margin-top: 8px; font-size: 13px; color: var(--inchiostro-2); }

/* righe coi puntini di guida */
.righe { margin: 22px 0; }
.righe > div { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; }
.righe dt { flex: 1 1 auto; display: flex; align-items: baseline; gap: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.righe dt::after { content: ""; flex: 1 1 auto; min-width: 16px; border-bottom: 2px dotted currentColor; opacity: .45; transform: translateY(-4px); }
.righe dd { margin: 0; text-align: right; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .righe--pila > div { display: block; padding: 4px 0 8px; }
  .righe--pila dt::after { display: none; }
  .righe--pila dd { text-align: left; }
}
.righe--larghe > div { display: block; padding: 0; }
.righe--larghe dt { white-space: normal; }
.righe--larghe dt::after { display: none; }
.righe--larghe dd { text-align: left; margin: 2px 0 16px; }

/* il menu è la comanda */
.menu { list-style: none; margin: 8px 0 0; padding: 0; }
.voce { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; padding: 12px 0; border-bottom: 2px dotted rgba(27, 27, 27, .32); }
.menu--special .voce, .menu--formule .voce, .menu--pronte .voce, .menu--cucina .voce { grid-template-columns: minmax(0, 1fr) auto; }
.voce__mini { width: 64px; height: auto; display: block; }
.voce__mini--vuota { display: flex; align-items: center; justify-content: center; height: 40px; color: rgba(27, 27, 27, .26); }
.voce__mini--vuota svg { width: 46px; height: 26px; }
.voce__nome { margin: 0 !important; font-weight: 800; text-transform: uppercase; font-size: 16px; letter-spacing: .02em; line-height: 1.3; }
.voce__loro { display: inline-block; text-transform: none; font-weight: 600; font-size: 13px; letter-spacing: 0; color: var(--pomodoro); }
.voce__ingr { margin: 2px 0 0 !important; font-size: 14px; line-height: 1.45; color: var(--inchiostro-2); }
.voce__cmd { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.voce__cmd:empty { display: none; }
.cmd {
  font-family: var(--mono); font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  min-height: 42px; padding: 0 11px; border: 2px solid var(--inchiostro); border-radius: 3px; background: transparent; color: var(--inchiostro); cursor: pointer;
}
.cmd:hover { background: var(--giallo); }
.cmd.appena { background: var(--inchiostro); color: var(--giallo); }
.voce.attiva .voce__nome { background: linear-gradient(100deg, transparent .1em, var(--evid) .1em, var(--evid) calc(100% - .1em), transparent calc(100% - .1em)); }

/* la vetrina: il trancio accanto allo scontrino (solo desktop largo) */
.vetrina { display: none; }

/* le note */
.note { list-style: none; margin: 8px 0 14px; padding: 0; }
.nota { padding: 14px 0; border-bottom: 2px dotted rgba(27, 27, 27, .32); }
.nota__chi { margin: 0 0 5px !important; font-weight: 800; font-size: 13.5px; text-transform: uppercase; letter-spacing: .04em; }
.nota__testo { margin: 0 !important; font-size: 15.5px; line-height: 1.55; }
.link { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 14px; }

/* dove e quando */
.indirizzo { font-size: 22px; font-weight: 800; line-height: 1.3; text-transform: uppercase; margin: 22px 0 6px !important; }
.indirizzo a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.dove .stato-riga, #dove .stato-riga { text-align: left; }
.orari { width: 100%; border-collapse: collapse; margin: 16px 0 6px; font-size: 15px; }
.orari th, .orari td { padding: 6px 4px; border-bottom: 1px dashed rgba(27, 27, 27, .3); font-weight: 600; text-align: left; }
.orari td { text-align: right; }
.orari tr.is-today th, .orari tr.is-today td { background: var(--evid); font-weight: 800; }
.mappa { margin: 22px calc(-1 * var(--pad)) 0; line-height: 0; }
.mappa iframe { width: 100%; height: 360px; border: 0; }

/* reveal (plumbing): lo stato nascosto vive solo dietro .js; senza JavaScript tutto è visibile */
.js .reveal { opacity: 0; }
.js .reveal.in-view { opacity: 1; }
html:not(.js) .reveal { opacity: 1; }

/* le foto: stampe appoggiate sul banco */
.foto { margin: 26px -6px; padding: 8px 8px 4px; background: #fff; box-shadow: 0 16px 34px rgba(0, 0, 0, .3); rotate: var(--r, 0deg); }
.foto img { display: block; width: 100%; }
.foto figcaption { font-family: var(--mono); font-size: 12.5px; line-height: 1.4; color: var(--inchiostro-2); padding: 7px 2px 3px; }
.foto-btn { all: unset; display: block; cursor: zoom-in; }
.foto-btn:focus-visible { outline: 3px solid var(--giallo); outline-offset: 3px; }
.foto--piena { margin-left: calc(-1 * var(--pad) - 6px); margin-right: calc(-1 * var(--pad) - 6px); }
.coppia { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.coppia .foto { margin: 8px 0 16px; }
.posato--sx, .posato--dx { width: min(70%, 320px); margin: 18px auto 6px; }

/* la coda */
.coda__grazie { font-weight: 800; text-transform: uppercase; font-size: clamp(18px, 3.6vw, 25px); line-height: 1.3; letter-spacing: .01em; margin: 20px auto 12px !important; max-width: 27ch; text-wrap: balance; }
.coda__trancio { display: block; width: 90px; height: 50px; margin: 0 auto 14px; }
.coda__cred { text-align: left; font-size: 12.5px; line-height: 1.55; color: var(--inchiostro-2); margin: 0 0 16px !important; }
.coda__su { font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: 14px; }

/* ══════════ desktop largo: foto e tranci sul banco, ai lati dello scontrino ══════════ */
@media (min-width: 1200px) {
  .foto--sx, .foto--dx, .posato--sx, .posato--dx { position: absolute; top: var(--t, 0px); margin: 0; width: var(--lato); z-index: 2; }
  .foto--dx, .posato--dx { left: calc(100% + var(--pad) + var(--fuori)); }
  .foto--sx, .posato--sx { right: calc(100% + var(--pad) + var(--fuori)); }
  .coppia { display: block; }
  .posato--testa { position: absolute; margin: 0; width: min(400px, calc(var(--lato) + 110px)); right: calc(-1 * var(--pad) - var(--lato) + 10px); top: -26px; --r: -9deg; z-index: 3; }
  .testa { min-height: 0; }
  .vetrina { display: block; position: absolute; top: 90px; bottom: 30px; left: calc(100% + var(--pad) + var(--fuori) - 20px); width: calc(var(--lato) + 40px); pointer-events: none; }
  .vetrina__in { position: sticky; top: calc(var(--testata-h) + 110px); text-align: center; }
  .vetrina__img { display: block; width: 100%; filter: drop-shadow(0 22px 22px rgba(0, 0, 0, .45)); rotate: 6deg; }
  .vetrina__nome { display: inline-block; margin: 14px 0 0; padding: 2px 12px; font-family: var(--disp); font-size: 30px; color: var(--giallo); background: var(--banco); }
  .voce[data-foto] { cursor: default; }
}

/* ══════════ mobile ══════════ */
@media (max-width: 560px) {
  body { font-size: 16px; }
  .carta, .coda { font-size: 15px; }
  .voce { grid-template-columns: 52px minmax(0, 1fr); padding: 12px 0 14px; }
  .voce__mini { width: 52px; }
  .voce__cmd { grid-column: 1 / -1; justify-content: flex-start; padding-left: 66px; }
  .menu--special .voce__cmd, .menu--formule .voce__cmd, .menu--pronte .voce__cmd, .menu--cucina .voce__cmd { padding-left: 0; }
  .menu--special .voce, .menu--formule .voce, .menu--pronte .voce, .menu--cucina .voce { grid-template-columns: minmax(0, 1fr) auto; }
  .cmd { min-height: 44px; }
  .titolo { font-size: clamp(29px, 8.6vw, 40px); }
  .sotto { font-size: 16.5px; }
  .righe dt { white-space: normal; }
  .coppia { grid-template-columns: 1fr; }
  .mappa iframe { height: 300px; }
}

/* ══════════ la stampante ══════════ */
.stampante {
  position: fixed; left: 50%; bottom: 0; z-index: 55; box-sizing: border-box;
  width: min(calc(var(--carta-w) + 56px), 100vw); height: var(--stampante-h);
  translate: -50% 0;
  display: flex; align-items: center; gap: 12px; padding: 16px 16px 10px;
  background: linear-gradient(#2A2622, #151311 60%); color: #F1EEE6; font-family: var(--mono);
  border-radius: 14px 14px 0 0; box-shadow: 0 -12px 30px rgba(0, 0, 0, .5), inset 0 1px 0 #423C35;
}
.stampante__fessura { position: absolute; top: 6px; left: 28px; right: 28px; height: 5px; border-radius: 3px; background: #050404; box-shadow: inset 0 2px 2px #000; }
.stampante__led { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #45D06E; box-shadow: 0 0 8px rgba(69, 208, 110, .8); }
.stampante[data-stato="stampa"] .stampante__led { background: var(--giallo); box-shadow: 0 0 10px var(--giallo); animation: lampeggia .3s steps(2, jump-none) infinite; }
@keyframes lampeggia { 50% { opacity: .25; } }
.campanello-vano { position: relative; flex: none; display: inline-flex; }
.campanello { width: 34px; height: 31px; }
.campanello-vano::before, .campanello-vano::after { content: ""; position: absolute; top: 2px; width: 7px; height: 2px; background: #E7A36F; border-radius: 2px; opacity: 0; }
.campanello-vano::before { left: -6px; rotate: 30deg; }
.campanello-vano::after { right: -6px; rotate: -30deg; }
.stampante.suona .campanello-vano::before, .stampante.suona .campanello-vano::after { animation: ding .8s ease-out; }
@keyframes ding { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; translate: 0 -6px; } }
.stampante__apri {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 0 16px;
  background: var(--giallo); color: #141311; border: 0; border-radius: 4px; cursor: pointer;
  font-family: var(--mono); font-weight: 800; font-size: 14px; letter-spacing: .05em; text-transform: uppercase;
}
.stampante__apri:hover { background: #FFD84A; }
.stampante__etichetta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stampante__conta { flex: none; background: #141311; color: var(--giallo); padding: 3px 9px; border-radius: 3px; font-size: 13px; }
.stampante__wa, .stampante__tel {
  flex: none; display: inline-flex; align-items: center; min-height: 48px; padding: 0 15px; box-sizing: border-box;
  border: 2px solid #F1EEE6; border-radius: 4px; color: #F1EEE6; text-decoration: none;
  font-weight: 800; font-size: 14px; letter-spacing: .05em; text-transform: uppercase;
}
.stampante__wa { flex: 1 1 auto; justify-content: center; background: var(--giallo); color: #141311; border-color: var(--giallo); }
.stampante__tel:hover { background: #F1EEE6; color: #141311; }
/* il bigliettino che esce dalla fessura a ogni «+» */
.biglietto-vano { position: absolute; left: 0; right: 0; bottom: calc(100% - 8px); height: 64px; overflow: hidden; pointer-events: none; }
.biglietto {
  position: absolute; left: 50%; bottom: 0; translate: -50% 0; transform: translateY(105%);
  max-width: calc(100% - 80px); box-sizing: border-box; padding: 10px 16px 12px; background: var(--carta); color: var(--inchiostro);
  font-family: var(--mono); font-weight: 800; font-size: 13px; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 -4px 14px rgba(0, 0, 0, .28);
}
@media (max-width: 560px) {
  :root { --stampante-h: 70px; }
  .stampante { gap: 9px; padding: 15px 10px 9px; border-radius: 12px 12px 0 0; }
  .stampante__fessura { left: 14px; right: 14px; }
  .campanello { width: 28px; height: 26px; }
  .stampante__apri { padding: 0 11px; font-size: 13px; }
  .stampante__tel { padding: 0 11px; font-size: 13px; }
}
.stampante__icona { display: none; width: 22px; height: 22px; }
@media (max-width: 370px) { .campanello-vano { display: none; } }
@media (max-width: 360px) {
  .stampante__tel { padding: 0 12px; }
  .stampante__tel span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .stampante__icona { display: block; }
}

/* ══════════ il cassetto: lo scontrino del visitatore ══════════ */
.cassetto { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; justify-content: center; background: rgba(8, 7, 6, .62); }
.cassetto__carta {
  width: min(560px, 100vw); box-sizing: border-box; max-height: min(88vh, 780px); max-height: min(88svh, 780px); overflow: auto; overscroll-behavior: contain;
  background: var(--carta); color: var(--inchiostro); font-family: var(--mono); font-size: 15px; line-height: 1.5;
  padding: 18px 20px calc(22px + env(safe-area-inset-bottom)); box-shadow: 0 -20px 50px rgba(0, 0, 0, .5);
  animation: esce .32s steps(8, jump-end);
}
@keyframes esce { from { transform: translateY(35%); } to { transform: none; } }
.cassetto__testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cassetto__titolo { margin: 0; font-weight: 800; text-transform: uppercase; font-size: 22px; letter-spacing: -.01em; }
.cassetto__chiudi { width: 44px; height: 44px; font-size: 26px; line-height: 1; background: transparent; border: 2px solid var(--inchiostro); border-radius: 3px; cursor: pointer; color: var(--inchiostro); }
.cassetto__vuota { margin: 8px 0; color: var(--inchiostro-2); }
.cassetto__righe { list-style: none; margin: 0; padding: 0; }
.riga { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px dashed rgba(27, 27, 27, .3); }
.riga__qta { display: flex; align-items: center; gap: 4px; }
.riga__qta button, .riga__via { width: 38px; height: 38px; border: 2px solid var(--inchiostro); border-radius: 3px; background: transparent; color: var(--inchiostro); font-family: var(--mono); font-weight: 800; font-size: 18px; cursor: pointer; }
.riga__qta output { min-width: 26px; text-align: center; font-weight: 800; }
.riga__nome { font-weight: 800; text-transform: uppercase; font-size: 14px; line-height: 1.3; }
.riga__misura { display: block; font-weight: 500; text-transform: none; color: var(--inchiostro-2); font-size: 13px; }
.cassetto__campi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.campo { display: grid; gap: 4px; font-weight: 800; text-transform: uppercase; font-size: 12.5px; letter-spacing: .05em; }
.campo--largo { grid-column: 1 / -1; }
.campo select, .campo input, .campo textarea { font-family: var(--mono); font-size: 16px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--inchiostro); background: #fff; border: 2px solid var(--inchiostro); border-radius: 3px; padding: 9px 10px; min-height: 44px; box-sizing: border-box; width: 100%; }
.campo textarea { resize: vertical; min-height: 64px; }
.cassetto__azioni { display: grid; gap: 8px; margin: 18px 0 10px; }
.cassetto__azioni .bottone { width: 100%; }
.cassetto__azioni .bottone--pieno[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.cassetto__nota { margin: 0 0 12px; }
.cassetto__svuota { background: transparent; border: 0; padding: 8px 0; font-family: var(--mono); font-weight: 700; font-size: 13px; text-decoration: underline; color: var(--inchiostro-2); cursor: pointer; }
@media (max-width: 420px) { .cassetto__campi { grid-template-columns: 1fr; } }

/* ══════════ lightbox ══════════ */
#lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(8, 7, 6, .92); display: flex; align-items: center; justify-content: center; padding: 20px; }
#lightboxImg { max-width: 100%; max-height: 90vh; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
#lightboxClose { position: absolute; top: 14px; right: 14px; width: 48px; height: 48px; font-size: 30px; line-height: 1; background: var(--giallo); color: #141311; border: 0; border-radius: 3px; cursor: pointer; }

/* ══════════ la firma: lo stato iniziale (la carta dentro la stampante) ══════════
   Lo mette lo script in testa, solo con JS e senza reduced-motion. Rete di sicurezza: se main.js non parte,
   dopo 4 s la carta è fuori comunque. */
.stampa-attesa .scontrino { transform: translateY(calc(100vh - var(--stampante-h) + 8px - var(--testata-h) - 34px)); animation: rete-carta .01s 4s forwards; }
.stampa-attesa .posato--testa { opacity: 0; animation: rete-posato .01s 4s forwards; }
@keyframes rete-carta { to { transform: none; } }
@keyframes rete-posato { to { opacity: 1; } }

/*MAPPACLIC*/
/* la mappa Google si carica solo al clic (giro privacy 1/10/2026) */
.mappa-clic { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: var(--mappa-h, 320px); box-sizing: border-box; padding: 24px; text-align: center; background: repeating-linear-gradient(0deg, rgba(127, 127, 127, 0.14) 0 1px, transparent 1px 28px), repeating-linear-gradient(90deg, rgba(127, 127, 127, 0.14) 0 1px, transparent 1px 28px); }
.mappa-clic__velo { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 32em; }
.mappa-clic__btn { display: inline-block; padding: 0.75em 1.4em; border: 2px solid currentColor; border-radius: 999px; color: inherit; font: inherit; font-weight: 600; line-height: 1.2; text-decoration: none; background: transparent; cursor: pointer; }
.mappa-clic__btn:hover, .mappa-clic__btn:focus-visible { text-decoration: underline; }
.mappa-clic__nota { margin: 0; font-size: 0.85em; line-height: 1.45; }
/*/MAPPACLIC*/