/* caratteri serviti dal sito stesso (nessuna richiesta a Google) */
@font-face {
  font-family: "Jost"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("fonts/jost-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("fonts/jost-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/atkinson-hyperlegible-400-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/atkinson-hyperlegible-400-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/atkinson-hyperlegible-400-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/atkinson-hyperlegible-400-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/atkinson-hyperlegible-700-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/atkinson-hyperlegible-700-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* vetro e telaio */
  --glass: #12302a;
  --glass-deep: #0c241f;
  --glass-line: #24473f;
  --alu: #c3c9c5;
  --alu-dark: #8d9590;
  /* vinile */
  --vinyl: #f3f5f0;
  --vinyl-dim: #a9c4b9;
  /* carta */
  --paper: #fbf8ee;
  --paper-edge: #e4dfcd;
  --slip: #ffffff;
  --ink: #1b2522;
  --ink-soft: #4a5753;
  --tape: rgba(232, 219, 146, 0.78);
  /* muro della facciata */
  --wall: #dcd8cf;
  --wall-ink: #26302d;
  /* segnali */
  --led: #22c86a;
  --led-off: #34504a;
  --stamp-ok: #157a43;
  --stamp-low: #9a5a06;
  --stamp-no: #b0281f;
  --stamp-rx: #2a4f9a;

  --f-vinyl: "Jost", "Futura", "Century Gothic", sans-serif;
  --f-paper: "Atkinson Hyperlegible", "Verdana", sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: clamp(16px, 4vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

html { scroll-behavior: smooth; scrollbar-color: var(--alu-dark) var(--wall); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--wall);
  color: var(--wall-ink);
  font-family: var(--f-paper);
  font-size: 1.125rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--glass);
}

::selection { background: var(--led); color: var(--glass-deep); }

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
:focus-visible { outline: 3px solid var(--led); outline-offset: 3px; border-radius: 2px; }

p, h1, h2 { margin: 0; }
[id] { scroll-margin-top: 88px; } /* lascia spazio alla barra fissa */
svg { width: 1.2em; height: 1.2em; flex: none; }

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 10;
  background: var(--paper); color: var(--ink); padding: 10px 16px; font-weight: 700;
}
.skip:focus { top: 16px; }

/* segnaposto da confermare */
.todo {
  text-decoration: underline dashed;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  text-decoration-color: color-mix(in srgb, currentColor 60%, transparent);
}

/* ———————————————————— la porta ———————————————————— */

.door {
  max-width: 1320px;
  margin: clamp(0px, 2vw, 28px) auto 0;
  background: var(--glass);
  color: var(--vinyl);
  border: clamp(6px, 1vw, 12px) solid var(--alu);
  border-bottom-width: 0;
  outline: 1px solid var(--alu-dark);
  outline-offset: -1px;
  position: relative;
}
.door::before { /* filo interno del vetro */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 1px solid var(--glass-line);
}

/* sopraluce */
.transom {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px var(--gutter);
  border-bottom: clamp(6px, 1vw, 12px) solid var(--alu);
}
/* l'insegna è il titolo principale della pagina (H1): nome e città */
.sign-title { margin: 0 auto 0 0; font: inherit; min-width: 0; }
.sign { display: flex; align-items: center; gap: 18px; text-decoration: none; }
.sign-text { display: flex; flex-direction: column; line-height: 1; }
.sign-name {
  font-family: var(--f-vinyl); font-weight: 500; text-transform: uppercase;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem); letter-spacing: 0.14em;
}
.sign-town {
  font-family: var(--f-vinyl); font-size: 0.85rem; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--vinyl-dim); margin-top: 8px;
}

/* croce LED: cinque moduli a punti */
.cross {
  --cell: clamp(14px, 1.6vw, 18px);
  display: grid; grid-template-columns: repeat(3, var(--cell)); grid-template-rows: repeat(3, var(--cell));
  gap: 2px; flex: none;
}
.cross span {
  background-color: var(--led-off);
  background-image: radial-gradient(circle, rgba(255,255,255,0.0) 0 1.2px, var(--glass-deep) 1.6px);
  background-size: 4px 4px;
  transition: background-color 0.8s var(--ease-out);
}
.cross span:nth-child(1) { grid-area: 1 / 2; }
.cross span:nth-child(2) { grid-area: 2 / 1; }
.cross span:nth-child(3) { grid-area: 2 / 2; }
.cross span:nth-child(4) { grid-area: 2 / 3; }
.cross span:nth-child(5) { grid-area: 3 / 2; }
.cross.is-on span { background-color: var(--led); }
.cross.is-on span:nth-child(3) { animation: led 3.2s steps(1) infinite; }
@keyframes led { 50% { background-color: #5be393; } }
@media (prefers-reduced-motion: reduce) { .cross.is-on span:nth-child(3) { animation: none; } }

.vinyl-nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px); }
.vinyl-nav a {
  white-space: nowrap;
  font-family: var(--f-vinyl); font-size: 1.05rem; letter-spacing: 0.04em;
  text-decoration: none; padding: 8px 0; border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.vinyl-nav a:hover { border-bottom-color: var(--vinyl); }
.vinyl-nav .nav-call {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--vinyl); padding: 9px 16px; border-radius: 999px;
}
.vinyl-nav .nav-call:hover { background: var(--vinyl); color: var(--glass); }
.vinyl-nav a[aria-current] { border-bottom-color: var(--led); }

/* barra fissa: la stessa insegna, in piccolo, che scende dall'alto mentre si scorre */
.dock {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  background: var(--glass); color: var(--vinyl);
  border-bottom: 4px solid var(--alu);
  transform: translateY(-110%); visibility: hidden;
  transition: transform 0.35s var(--ease-out), visibility 0s linear 0.35s;
}
.dock.is-visible { transform: none; visibility: visible; transition: transform 0.35s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .dock, .dock.is-visible { transition: none; } }
.dock-inner {
  max-width: 1320px; margin: 0 auto; height: 64px; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: clamp(12px, 3vw, 32px);
}
.dock-sign { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.cross--mini { --cell: 9px; gap: 1px; }
.cross--mini span { background-size: 3px 3px; }
.dock-name {
  font-family: var(--f-vinyl); font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; font-size: 1rem;
}
.dock-links { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); margin-left: auto; }
.dock-links a {
  font-family: var(--f-vinyl); font-size: 1.02rem; text-decoration: none; white-space: nowrap;
  padding: 6px 0; border-bottom: 2px solid transparent; transition: border-color 0.2s;
}
.dock-links a:hover { border-bottom-color: var(--vinyl-dim); }
.dock-links a[aria-current] { border-bottom-color: var(--led); }
.dock-short { display: none; }
.dock-call {
  display: inline-flex; align-items: center; gap: 8px; flex: none; text-decoration: none;
  background: var(--vinyl); color: var(--glass); padding: 9px 16px; border-radius: 999px;
  font-family: var(--f-vinyl); font-weight: 500; font-size: 1rem;
}
.dock-call:hover { background: #fff; }

/* anta: targa a sinistra, foglio a destra */
.leaf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "status sheet" "week sheet";
  grid-template-rows: auto 1fr;
  column-gap: clamp(32px, 6vw, 96px);
  padding: clamp(40px, 6vw, 80px) var(--gutter) clamp(48px, 6vw, 88px);
  align-items: start;
}
.plate { grid-area: status; max-width: 34rem; }
.week { grid-area: week; max-width: 34rem; }
.sheet-wrap { grid-area: sheet; }
.slot + .slot::before { content: " · "; }
.plate-label, .street-label {
  font-family: var(--f-vinyl); text-transform: uppercase; letter-spacing: 0.3em;
  font-size: 0.85rem; color: var(--vinyl-dim);
}
.status { margin-top: 18px; }
.status-word {
  display: flex; align-items: center; gap: 0.28em;
  font-family: var(--f-vinyl); font-weight: 500;
  font-size: clamp(3.6rem, 8vw, 6rem); line-height: 0.95; letter-spacing: -0.02em;
}
.status-dot {
  width: 0.32em; height: 0.32em; border-radius: 50%; flex: none;
  background: var(--led); margin-top: 0.06em;
}
.status[data-state="closed"] .status-dot { background: transparent; border: 3px solid var(--vinyl-dim); }
.status[data-state="loading"] .status-word { opacity: 0; }
.status-line {
  margin-top: 18px; font-family: var(--f-vinyl); font-size: clamp(1.3rem, 2.2vw, 1.65rem);
  line-height: 1.25;
}
.status-line strong { font-weight: 600; }

/* righello della giornata di apertura: ore già passate in grigio-verde, tempo di apertura che resta
   nel verde della croce (verde = ancora aperta), pallino bianco sull'ora attuale */
.day { margin-top: 26px; max-width: 28rem; padding-top: 28px; }
.day-track { position: relative; height: 8px; border-radius: 4px; background: var(--led); }
.day-done {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  border-radius: 4px 0 0 4px; background: #5d7a72;
  transition: width 1.2s var(--ease-out);
}
.day-now {
  position: absolute; top: 50%; left: 0; width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border-radius: 50%; background: var(--vinyl); border: 4px solid var(--glass);
  transition: left 1.2s var(--ease-out);
}
.day-now-label {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  font-family: var(--f-vinyl); font-weight: 600; font-size: 1rem; line-height: 1;
  color: var(--vinyl); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.day-now[data-side="start"] .day-now-label { left: -3px; transform: none; }
.day-now[data-side="end"] .day-now-label { left: auto; right: -3px; transform: none; }
.day-ticks { position: relative; height: 1.4em; margin-top: 14px; }
.tick {
  position: absolute; top: 0; transform: translateX(-50%);
  font-family: var(--f-vinyl); font-size: 0.95rem; line-height: 1; color: var(--vinyl-dim);
  font-variant-numeric: tabular-nums;
}
.tick::before {
  content: ""; position: absolute; left: 50%; top: -10px; width: 1px; height: 5px; background: var(--vinyl-dim);
}
.tick.is-first { transform: none; }
.tick.is-first::before { left: 0; }
.tick.is-last { transform: translateX(-100%); }
.tick.is-last::before { left: auto; right: 0; }
.status[data-state="closed"] .day { display: none; }
.status[data-soon="true"] .day-track { background: #e9d27a; } /* ultima mezz'ora: il tratto che resta diventa giallo */
.status[data-soon="true"] .status-line strong { color: #f3e3a2; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.status-next { margin-top: 12px; color: var(--vinyl-dim); font-size: 1.05rem; }

.hours {
  margin-top: 40px; width: 100%; max-width: 26rem; border-collapse: collapse;
  font-family: var(--f-vinyl); font-size: 1.2rem; font-variant-numeric: tabular-nums;
}
.hours th, .hours td { text-align: left; padding: 10px 12px; border-top: 1px solid var(--glass-line); font-weight: 400; }
.hours td { text-align: right; color: var(--vinyl); }
.hours tr.is-closed td { color: var(--vinyl-dim); }
/* oggi: la riga diventa una fascia chiara, come una targhetta in evidenza sul vetro */
.hours tr.is-today th, .hours tr.is-today td {
  background: var(--vinyl); color: var(--glass); font-weight: 600; border-top-color: transparent;
}
.hours tr.is-today th { border-radius: 4px 0 0 4px; }
.hours tr.is-today td { border-radius: 0 4px 4px 0; }
.hours tr.is-today + tr th, .hours tr.is-today + tr td { border-top-color: transparent; }
.hours tr.is-today th::after {
  content: "oggi"; margin-left: 10px; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  background: var(--glass); color: var(--vinyl); padding: 3px 8px; border-radius: 999px; vertical-align: 2px; font-weight: 500;
}
.plate-note { margin-top: 14px; font-size: 0.95rem; color: var(--vinyl-dim); }

/* ———————————————————— foglio col nastro ———————————————————— */

.sheet-wrap { position: relative; padding-top: 12px; }
.sheet {
  position: relative; z-index: 2;
  background: var(--paper); color: var(--ink);
  padding: clamp(28px, 3.6vw, 48px);
  transform: rotate(-0.7deg);
  border: 1px solid var(--paper-edge);
}
.tape {
  position: absolute; top: -14px; width: 104px; height: 30px; background: var(--tape);
  border-left: 1px dashed rgba(120, 100, 40, 0.25); border-right: 1px dashed rgba(120, 100, 40, 0.25);
}
.tape-l { left: -22px; transform: rotate(-32deg); }
.tape-r { right: -22px; transform: rotate(29deg); }

.sheet-title {
  font-family: var(--f-vinyl); font-weight: 600; font-size: clamp(2.3rem, 4vw, 3.4rem);
  line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance;
}
.sheet-lede { margin-top: 16px; color: var(--ink-soft); max-width: 32ch; }

/* Ricerca: un campo grande, un pulsante grande, niente menu a comparsa */
.ask { margin-top: 28px; }
.ask-label { display: block; font-weight: 700; font-size: 1.1rem; margin-bottom: 10px; }
/* campo con il completamento in trasparenza: il testo grigio sta sotto, il campo vero (trasparente) sopra */
.ask-field { position: relative; background: var(--slip); border-radius: 4px; }
.ask-input, .ask-ghost {
  font: inherit; font-size: 1.4rem; line-height: 1.4; letter-spacing: normal;
  padding: 14px 18px; border: 2px solid transparent; border-radius: 4px;
}
.ask-input {
  position: relative; display: block; width: 100%; min-height: 64px;
  color: var(--ink); background: transparent; border-color: var(--ink);
}
.ask-ghost {
  position: absolute; inset: 0; overflow: hidden; white-space: pre; pointer-events: none;
}
.ask-ghost-typed { color: transparent; }
.ask-ghost-rest { color: #8a948f; }
.ask-suggest {
  display: block; margin-top: 10px; padding: 10px 14px; width: 100%; text-align: left; cursor: pointer;
  background: #eef3ef; color: var(--ink); border: 1px solid #cfdcd4; border-radius: 4px;
  font: inherit; font-size: 1.05rem;
}
.ask-suggest strong { color: var(--glass); }
.ask-suggest:hover { background: #e2ece6; }
.ask-suggest[hidden] { display: none; }
.ask-input::placeholder { color: #6b7672; }
.ask-input:focus { outline: 3px solid var(--led); outline-offset: 2px; }
.ask-input[aria-invalid="true"] { border-color: var(--stamp-no); }
.ask-hint { margin-top: 10px; font-size: 1rem; color: var(--ink-soft); }
.ask-hint.is-error { color: var(--stamp-no); font-weight: 700; }
.ask-btn {
  margin-top: 18px; width: 100%; min-height: 64px;
  display: flex; justify-content: center; align-items: center; gap: 12px;
  border: 0; border-radius: 4px; background: var(--glass); color: var(--vinyl); cursor: pointer;
  font-family: var(--f-vinyl); font-size: 1.4rem; font-weight: 500; letter-spacing: 0.02em;
  transition: background 0.2s;
}
.ask-btn svg { width: 1.2em; height: 1.2em; transition: transform 0.25s var(--ease-out); }
.ask-btn:hover { background: var(--glass-deep); }
.ask-btn:hover svg { transform: translateX(3px); }
.ask-btn:active { transform: translateY(1px); }
.ask-btn[aria-busy="true"] { opacity: 0.75; cursor: progress; }
.ask-btn[aria-busy="true"] svg { display: none; }

/* ———————————————————— bigliettino della risposta ———————————————————— */

.slip {
  position: relative; z-index: 1;
  margin: -14px 4% 0 6%;
  background: var(--slip); color: var(--ink);
  border: 1px solid var(--paper-edge);
  padding: 34px clamp(22px, 3vw, 34px) 26px;
  transform: rotate(0.6deg);
  scroll-margin: 24px;
}
.slip:focus { outline: none; }
.slip.is-in { animation: slip-out 0.6s var(--ease-out) both; }
@keyframes slip-out {
  from { transform: translateY(-40%) rotate(0deg); clip-path: inset(40% 0 0 0); }
  to { transform: translateY(0) rotate(0.6deg); clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) { .slip.is-in { animation: none; } }

.slip-title { font-family: var(--f-vinyl); font-weight: 600; font-size: 1.6rem; line-height: 1.15; }
.slip[data-kind="loading"] .slip-title { color: var(--ink-soft); }
.slip-maybe { font-weight: 700; font-size: 1.1rem; margin-bottom: 14px; }
.slip-name { margin-top: 14px; font-weight: 700; font-size: 1.4rem; line-height: 1.3; }
.slip-text { margin-top: 10px; color: var(--ink-soft); font-size: 1.15rem; max-width: 44ch; }
.slip-note { font-size: 1rem; }

/* risposta: prima il verdetto grande (parola + icona + colore), poi le confezioni in elenco compatto */
.verdict {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--f-vinyl); font-weight: 600; font-size: clamp(1.7rem, 3vw, 2.1rem); line-height: 1.1;
}
.verdict svg { width: 1.25em; height: 1.25em; flex: none; }
.verdict--ok { color: var(--stamp-ok); }
.verdict--low, .verdict--uno { color: var(--stamp-low); }
.verdict--no { color: var(--stamp-no); }
.slip-count { margin-top: 10px; font-size: 1.2rem; font-weight: 700; color: var(--ink); }

.packs-label {
  margin-top: 24px; font-family: var(--f-vinyl); font-size: 0.85rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-soft);
}
.slip > .packs-label:first-child { margin-top: 0; font-size: 0.9rem; color: var(--ink); }
.packs-count {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  background: var(--paper-edge); color: var(--ink); letter-spacing: 0; font-weight: 600;
}
/* riquadro che scorre: si vedono circa 5 righe e mezza, la riga tagliata fa capire che c'è dell'altro */
.packs-scroll {
  position: relative; margin-top: 10px; max-height: 21rem; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--paper-edge); border-radius: 4px; background: #fdfcf8;
  scrollbar-width: auto; scrollbar-color: var(--ink-soft) var(--paper-edge);
}
.packs-scroll:focus-visible { outline: 3px solid var(--led); outline-offset: 2px; }
.packs-scroll::-webkit-scrollbar { width: 12px; }
.packs-scroll::-webkit-scrollbar-track { background: var(--paper-edge); }
.packs-scroll::-webkit-scrollbar-thumb { background: var(--ink-soft); border-radius: 6px; border: 2px solid var(--paper-edge); }
.packs { list-style: none; margin: 0; padding: 0 14px; }
.packs li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--paper-edge);
}
.packs li:last-child { border-bottom: 0; }
/* nome e stato sulla stessa riga, il pulsante per WhatsApp sotto */
.packs li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 8px; align-items: baseline; }
.pack-actions { grid-column: 1 / -1; }
.pack-hold {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px 6px 10px;
  border: 1.5px solid var(--glass); border-radius: 999px; color: var(--glass); text-decoration: none;
  font-weight: 700; font-size: 0.95rem; background: #fff; transition: background 0.2s, color 0.2s;
}
.pack-hold svg { width: 20px; height: 20px; }
.pack-hold:hover { background: var(--glass); color: var(--vinyl); }
button.pack-hold { font-family: inherit; cursor: pointer; }
.pack-hold.is-in { background: #e3f4ea; border-color: var(--stamp-ok); color: var(--stamp-ok); }
.pack-hold.is-in:hover { background: #d3ecdd; color: var(--stamp-ok); }

/* richiesta in corso: barra fissa in basso, nello stesso vetro della porta */
.request {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--glass); color: var(--vinyl); border-top: 4px solid var(--alu);
  padding-bottom: env(safe-area-inset-bottom);
  animation: request-in 0.35s var(--ease-out);
}
.request[hidden] { display: none; }
@keyframes request-in { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .request { animation: none; } }
.request-inner { max-width: 1320px; margin: 0 auto; padding: 10px var(--gutter); }
.request-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.request-summary { margin-right: auto; font-family: var(--f-vinyl); font-size: 1.05rem; }
.request-summary span { color: var(--vinyl-dim); margin-left: 6px; }
.request-toggle {
  min-height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  background: rgba(243, 245, 240, 0.12); color: var(--vinyl); border: 0;
  font-family: var(--f-vinyl); font-size: 1rem;
}
.request-send {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 999px;
  background: var(--led); color: var(--glass-deep); text-decoration: none; font-family: var(--f-vinyl); font-weight: 600; font-size: 1.05rem;
}
.request-send svg { width: 20px; height: 20px; }
.request-send:hover { background: #4bd88a; }
.request-list { display: none; list-style: none; margin: 0 0 10px; padding: 0; max-height: 40vh; overflow-y: auto; }
.request.is-open .request-list { display: block; }
.request-list li {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--glass-line); font-size: 1rem;
}
.request-note { display: block; font-size: 0.85rem; color: var(--vinyl-dim); }
.request-remove {
  flex: none; min-height: 40px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--vinyl); border: 1.5px solid var(--vinyl-dim); font: inherit; font-size: 0.95rem;
}
.request-remove:hover { border-color: var(--vinyl); }
/* lo spazio in fondo alla pagina non resta coperto dalla barra */
body.has-request { padding-bottom: 96px; }
@media (max-width: 520px) {
  .request-summary { width: 100%; }
  .request-send { flex: 1; justify-content: center; white-space: nowrap; padding: 0 14px; }
}
.packs-hint { margin-top: 8px; font-size: 0.95rem; color: var(--ink-soft); }
.pack-name { font-size: 1.05rem; line-height: 1.35; min-width: 0; }
.pack-state {
  display: inline-flex; align-items: center; gap: 6px; flex: none; white-space: nowrap;
  font-weight: 700; font-size: 1rem;
}
.pack-state svg { width: 1.1em; height: 1.1em; align-self: center; }
.pack-state--ok { color: var(--stamp-ok); }
.pack-state--low, .pack-state--uno { color: var(--stamp-low); }
.pack-state--no { color: var(--stamp-no); }
.slip-actions { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.call-btn {
  display: flex; justify-content: center; align-items: center; gap: 10px; min-height: 58px;
  background: var(--glass); color: var(--vinyl); text-decoration: none; border-radius: 4px;
  font-family: var(--f-vinyl); font-size: 1.3rem; font-weight: 500; font-variant-numeric: tabular-nums;
  transition: background 0.2s;
}
.call-btn:hover { background: var(--glass-deep); }
.again-btn {
  min-height: 54px; background: transparent; color: var(--ink); cursor: pointer;
  border: 2px solid var(--ink); border-radius: 4px;
  font: inherit; font-weight: 700; font-size: 1.1rem;
  transition: background 0.2s;
}
.again-btn:hover { background: #eef3ef; }
.slip-demo { margin-top: 18px; font-size: 0.95rem; color: var(--ink-soft); border-top: 1px dashed var(--paper-edge); padding-top: 12px; }

/* zoccolo in alluminio che chiude la porta in basso */
.door > main { border-bottom: clamp(6px, 1vw, 12px) solid var(--alu); }

/* ———————————————————— sul muro: servizi ———————————————————— */

.wall { padding: clamp(64px, 9vw, 120px) var(--gutter) 0; }
.wall-inner, .street-inner, .gallery-inner { max-width: 1320px; margin: 0 auto; }
.wall-title, .street h2, .gallery-title {
  font-family: var(--f-vinyl); font-weight: 500; font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05; letter-spacing: -0.015em; text-wrap: balance;
}
.wall-grid {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid; grid-template-columns: minmax(0, 46rem);
}

.sheet--list { transform: rotate(0.5deg); }

/* servizi: tanti fogli sulla bacheca, in colonne come appesi al muro */
.wall-lede { margin-top: 14px; max-width: 62ch; color: #3f4744; }
.wall-lede a { color: var(--wall-ink); font-weight: 700; }
.board { margin-top: clamp(36px, 4vw, 52px); columns: 3 290px; column-gap: clamp(24px, 3vw, 40px); }
.note {
  /* inline-block: il foglio non si spezza mai tra due colonne (nemmeno il nastro) */
  display: inline-block; width: 100%; break-inside: avoid; margin: 14px 0 clamp(30px, 3vw, 42px);
  padding: 26px clamp(20px, 2vw, 26px) 18px;
}
.note:nth-child(3n + 1) { transform: rotate(-0.6deg); }
.note:nth-child(3n + 2) { transform: rotate(0.5deg); }
.note:nth-child(3n) { transform: rotate(-0.2deg); }
.note-title { margin: 0; font-family: var(--f-vinyl); font-weight: 600; font-size: 1.35rem; line-height: 1.15; }
/* intestazione del foglio: icona nel tondo di vetro + titolo */
.note-head { display: flex; align-items: center; gap: 12px; }
.note-icon {
  flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--glass); color: var(--vinyl);
}
.note-icon svg { width: 22px; height: 22px; }
.svc { list-style: none; margin: 14px 0 0; padding: 0; }
.svc li {
  position: relative; padding: 8px 0 8px 18px; line-height: 1.4; font-size: 1.02rem;
  border-top: 1px dashed var(--paper-edge);
}
.svc li:first-child { border-top: 0; }
.svc li::before {
  content: ""; position: absolute; left: 2px; top: 0.95em; width: 7px; height: 7px; border-radius: 50%; background: var(--led);
}
.svc-note { display: block; font-size: 0.9rem; color: var(--ink-soft); }
.tag {
  display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: 999px; vertical-align: 1px;
  background: #e3f4ea; color: var(--stamp-ok); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em;
}
/* reparti: stesso elenco degli altri fogli, su due colonne perché le voci sono brevi */
.svc--due { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
.svc--due li:nth-child(2) { border-top: 0; }
@media (max-width: 400px) {
  .svc--due { grid-template-columns: 1fr; }
  .svc--due li:nth-child(2) { border-top: 1px dashed var(--paper-edge); }
}
.list-title { margin: 0; font-family: var(--f-vinyl); font-weight: 600; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.05; }
.list-sub { margin-top: 8px; color: var(--ink-soft); }
.prices { list-style: none; margin: 26px 0 0; padding: 0; font-variant-numeric: tabular-nums; }
/* puntini di guida: partono dalla fine del nome, anche quando il nome va a capo,
   e il prezzo si allinea all'ultima riga del nome */
.prices li { display: flex; align-items: last baseline; gap: 10px; padding: 9px 0; }
.prices li > span:first-child { flex: 1; min-width: 0; overflow: hidden; line-height: 1.4; }
/* larghezza netta zero (100% meno 100%): i puntini non mandano mai a capo il nome da soli */
.prices li > span:first-child::after {
  content: ""; display: inline-block; box-sizing: border-box; width: 100%; height: 4px; margin-right: -100%;
  padding-left: 10px; vertical-align: 0.3em;
  background: radial-gradient(circle, #b9b3a0 1.2px, transparent 1.6px) 0 50% / 6px 4px repeat-x content-box;
}
.price { font-family: var(--f-vinyl); font-weight: 600; font-size: 1.2rem; white-space: nowrap; }
.list-foot {
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--paper-edge);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; color: var(--ink-soft);
}
.list-call {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  background: var(--glass); color: var(--vinyl); padding: 12px 20px; border-radius: 2px;
  font-family: var(--f-vinyl); font-weight: 500; font-size: 1.1rem; transition: background 0.2s;
}
.list-call:hover { background: var(--glass-deep); }
.rating { margin-top: 16px; font-size: 0.95rem; color: var(--ink-soft); }
.rating strong { color: var(--ink); }

/* le foto della farmacia: un nastro che scorre lento da sinistra a destra, senza fine */
.gallery { padding: clamp(56px, 8vw, 104px) 0 0; }
.gallery-inner { padding: 0 var(--gutter); }
.reel {
  --h: clamp(220px, 28vw, 380px); --g: clamp(24px, 3vw, 44px);
  margin-top: clamp(28px, 4vw, 48px); overflow: hidden; padding: 26px 0 30px;
}
.reel-track { display: flex; width: max-content; animation: reel 48s linear infinite; }
/* le foto come stampe attaccate al muro: bordo bianco, nastro in alto, stessa altezza, larghezza secondo il formato */
.reel .photo {
  flex: none; height: var(--h); margin-right: var(--g);
  background: #fff; padding: clamp(6px, 0.8vw, 10px); border: 1px solid #d4cfc4;
}
.reel .photo--land { aspect-ratio: 4 / 3; }
.reel .photo--port { aspect-ratio: 3 / 4; }
.reel .photo img { width: 100%; height: 100%; object-fit: cover; }
.reel .photo:nth-child(odd) { transform: rotate(-1.2deg); }
.reel .photo:nth-child(even) { transform: rotate(1deg) translateY(10px); }
/* metà nastro = le quattro foto con i loro spazi: si riparte da lì e il giro non si vede */
@keyframes reel { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .reel { overflow-x: auto; scroll-snap-type: x mandatory; }
  .reel-track { animation: none; padding: 0 var(--gutter); }
  .reel .photo { scroll-snap-align: start; }
  .reel .photo[aria-hidden="true"] { display: none; }
}

/* foto (segnaposto finché non arrivano le foto vere) */
.photo { position: relative; margin: 0; transform: rotate(-1deg); }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo--placeholder {
  aspect-ratio: 4 / 3;
  background-color: #e8e4da;
  background-image: repeating-linear-gradient(135deg, #d3cdc0 0 1.5px, transparent 1.5px 14px);
  border: 1px solid #c2bdb2;
}
.photo-empty {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px;
  text-align: center; color: #4c5551; font-family: var(--f-vinyl); font-size: 1.05rem; line-height: 1.3;
}
.photo-empty svg { width: 36px; height: 36px; }
.photo-empty span { background: #e8e4da; padding: 4px 10px; }
.tape-c { left: 50%; transform: translateX(-50%) rotate(-3deg); }

/* ———————————————————— sulla via ———————————————————— */

.street { padding: clamp(72px, 9vw, 120px) var(--gutter) clamp(48px, 6vw, 80px); }
.street-grid {
  margin-top: 0; display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 32px clamp(24px, 4vw, 64px);
}
.ways { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; color: #3f4744; }
.ways li { display: flex; gap: 12px; align-items: flex-start; }
.ways svg { margin-top: 0.15em; }
.street-col { border-top: 2px solid var(--wall-ink); padding-top: 16px; }
.street-label { color: #4c5551; }
.street-big { margin-top: 10px; font-family: var(--f-vinyl); font-size: 1.5rem; line-height: 1.3; }
.street-big a { text-decoration: none; }
.street-small { margin-top: 10px; color: #4b5450; }
.street-link {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700;
}

.kick { background: var(--alu); color: #2d3532; border-top: 1px solid var(--alu-dark); }
.kick-inner { max-width: 1320px; margin: 0 auto; padding: 22px var(--gutter) 28px; font-size: 0.95rem; }
.kick-note { margin-top: 6px; color: #3f4744; }

/* pagina non trovata */
.door--lost { border-bottom-width: clamp(6px, 1vw, 12px); margin-bottom: clamp(0px, 2vw, 28px); }
.lost { padding: clamp(48px, 8vw, 104px) var(--gutter); display: grid; justify-items: center; }
.lost .sheet { max-width: 34rem; width: 100%; }
.lost-actions { margin-top: 28px; }

/* stampa: solo le informazioni utili, senza vetro e nastro */
@media print {
  body, .door, .kick { background: #fff; color: #000; }
  .door { border: 0; outline: 0; }
  .vinyl-nav, .sheet-wrap, .tape, .photo, .day, .skip { display: none; }
  .cross span { background: #000; }
  .status-word, .hours td, .hours th, .sign-town, .plate-label { color: #000; }
  .leaf { display: block; }
  .sheet { transform: none; border: 1px solid #000; }
}


/* pulsante "Menu" (solo telefono): una pastiglia morbida sul vetro, icona e parola */
.menu-btn {
  display: none; align-items: center; gap: 9px; flex: none; cursor: pointer;
  background: rgba(243, 245, 240, 0.12); color: var(--vinyl); border: 0; border-radius: 999px;
  height: 44px; padding: 0 16px 0 12px; font-family: var(--f-vinyl); font-size: 1rem; font-weight: 500; line-height: 1;
  transition: background 0.2s;
}
.menu-btn svg { width: 22px; height: 22px; }
.menu-btn:hover, .menu-btn[aria-expanded="true"] { background: rgba(243, 245, 240, 0.22); }

/* menu: un pannello che scende dall'alto sopra la pagina (che resta visibile, velata) */
.menu { position: fixed; inset: 0; z-index: 40; }
.menu[hidden] { display: none; }
.menu-backdrop { position: absolute; inset: 0; background: rgba(6, 20, 17, 0.6); animation: menu-fade 0.25s ease-out; }
.menu-sheet {
  position: relative; max-height: 100dvh; overflow-y: auto;
  background: var(--glass); color: var(--vinyl);
  border-bottom: 6px solid var(--alu); border-radius: 0 0 16px 16px;
  padding: 10px var(--gutter) 20px;
  animation: menu-drop 0.36s var(--ease-out);
}
@keyframes menu-fade { from { opacity: 0; } }
@keyframes menu-drop { from { transform: translateY(-28px); opacity: 0; } }
@keyframes menu-item { from { transform: translateY(8px); opacity: 0; } }
.menu-head { display: flex; align-items: center; gap: 12px; min-height: 56px; }
.menu-title {
  margin-right: auto; font-family: var(--f-vinyl); font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 0.95rem;
}
.menu-close {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center; cursor: pointer;
  background: rgba(243, 245, 240, 0.12); color: var(--vinyl); border: 0; border-radius: 50%;
  transition: background 0.2s;
}
.menu-close:hover { background: rgba(243, 245, 240, 0.22); }
.menu-close svg { width: 22px; height: 22px; }
.menu-status {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 4px;
  padding: 7px 14px 7px 12px; border-radius: 999px; background: rgba(243, 245, 240, 0.08);
  font-family: var(--f-vinyl); font-size: 1rem;
}
.menu-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--led); flex: none; }
.menu-status.is-closed .menu-dot { background: transparent; border: 2px solid var(--vinyl-dim); }
.menu-links { display: flex; flex-direction: column; margin-top: 16px; }
.menu-links a {
  display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 14px;
  padding: 13px 6px; border-top: 1px solid var(--glass-line); text-decoration: none; border-radius: 6px;
  animation: menu-item 0.4s var(--ease-out) both;
}
.menu-links a:nth-child(2) { animation-delay: 0.04s; }
.menu-links a:nth-child(3) { animation-delay: 0.08s; }
.menu-links a:nth-child(4) { animation-delay: 0.12s; }
.menu-links a:nth-child(5) { animation-delay: 0.16s; }
.menu-links a:last-child { border-bottom: 1px solid var(--glass-line); }
.menu-links a:hover, .menu-links a:active { background: rgba(243, 245, 240, 0.06); }
.menu-label { font-family: var(--f-vinyl); font-size: 1.4rem; font-weight: 500; line-height: 1.15; }
.menu-hint { grid-column: 1; margin-top: 3px; font-size: 0.95rem; color: var(--vinyl-dim); }
.menu-links svg { grid-column: 2; grid-row: 1 / span 2; width: 22px; height: 22px; color: var(--vinyl-dim); }
.menu-links a[aria-current] .menu-label::after {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 10px; vertical-align: middle;
  border-radius: 50%; background: var(--led);
}
.menu-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.menu-call, .menu-map {
  display: flex; justify-content: center; align-items: center; gap: 9px; min-height: 54px;
  border-radius: 10px; text-decoration: none; font-family: var(--f-vinyl); font-size: 1.1rem; font-weight: 500;
}
.menu-call { background: var(--vinyl); color: var(--glass); }
.menu-map { border: 1.5px solid var(--vinyl); color: var(--vinyl); }
.menu-call svg, .menu-map svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) {
  .menu-backdrop, .menu-sheet, .menu-links a { animation: none; }
}
body.menu-open { overflow: hidden; }

/* ———————————————————— telefono ———————————————————— */

@media (max-width: 960px) {
  .leaf { grid-template-columns: minmax(0, 1fr); grid-template-areas: "status" "week" "sheet"; grid-template-rows: auto; row-gap: 48px; }
  .plate, .week { max-width: none; }
  .week .hours { margin-top: 0; }
  .street-grid, .wall-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  /* sul telefono: Menu a sinistra, insegna al centro, Chiama a destra; le sezioni stanno nel menu */
  .transom { gap: 12px; padding-top: 16px; padding-bottom: 16px; }
  .menu-btn { display: inline-flex; }
  .sign { gap: 10px; min-width: 0; margin-right: auto; }
  .sign .cross { --cell: 11px; }
  .sign-name { font-size: 1rem; letter-spacing: 0.1em; }
  .sign-town { font-size: 0.75rem; margin-top: 5px; }
  .vinyl-nav a:not(.nav-call) { display: none; }
  /* Chiama diventa un tondo con la cornetta: il numero completo è nel menu e in fondo alla pagina */
  .vinyl-nav .nav-call, .dock-call { width: 44px; height: 44px; padding: 0; justify-content: center; flex: none; }
  .nav-call span, .dock-call span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .nav-call svg, .dock-call svg { width: 22px; height: 22px; }
  .hours { max-width: none; font-size: 1.1rem; }
  .hours th { vertical-align: top; }
  .slot { display: block; }
  .slot + .slot::before { content: none; }
  .day { max-width: none; }
  .tape { width: 72px; }
  .tape-l { left: -8px; }
  .tape-r { right: -8px; }
  .door, .wall, .street, .gallery { overflow-x: clip; }
  .sheet--list { padding-left: 22px; padding-right: 22px; }
  .slip { margin: -10px 2% 0 4%; }
}
@media (max-width: 1100px) {
  .dock-name { display: none; }
}
@media (max-width: 960px) {
  .menu-btn { display: inline-flex; }
  .transom { gap: 12px; }
  .sign { margin-right: auto; min-width: 0; }
  .vinyl-nav a:not(.nav-call) { display: none; }
  .dock-links { display: none; }
  .dock-name { display: inline; }
  .dock-sign { margin-right: auto; min-width: 0; flex: 0 1 auto; overflow: hidden; }
}
@media (max-width: 720px) {
  .dock-inner { height: 58px; gap: 12px; }
  .dock-links { display: none; }
  .dock-name { display: inline; font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dock-sign { margin-right: auto; min-width: 0; flex: 0 1 auto; overflow: hidden; }
}
@media (max-width: 350px) {
  .menu-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}