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

/* ══════════ TABERNA SAN TOMASO — Via San Tomaso 5 ══════════
   «Un ristorante con antiche tradizioni.» (loro, su Instagram). Il muro giallo della sala, il legno scuro delle mensole e delle
   travi, il loro distintivo tondo giallo col nastro marrone, i vetri a piombo, le candele. La firma è una loro candela sulla cera delle
   sere prima (_tsm_firma.mjs). */
:root {
  --giallo: #F0B323;
  --muro: #F3D98B;
  --muro-chiaro: #FBF2D9;
  --crema: #FFF8E8;
  --carta: #F6ECD4;
  --nastro: #5B3A26;
  --legno: #2E1D14;
  --legno-medio: #4A3020;
  --legno-chiaro: #6B4526;
  --rosso: #B23428;
  --rosso-scuro: #8E271E;
  --notte: #1E2D47;
  --ambra: #E6B85C;
  --ottone: #C9A45C;
  --filetto: #8A6A45;
  --inchiostro: #2A1C12;
  --grigio: #5C4A38;
  --panna: #F6E9CC;
  --aperto: #1B6B45;
  --f-titoli: 'Stoke', 'Georgia', serif;
  --f-mano: 'Fondamento', 'Palatino Linotype', 'Book Antiqua', serif;
  --f-testo: 'Caudex', 'Georgia', 'Times New Roman', serif;
  --gutter: 16px;
  --testata-h: 72px;
}
@media (min-width: 760px) { :root { --gutter: 24px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--inchiostro); font: 400 1.12rem/1.62 var(--f-testo); background: var(--muro-chiaro); }
a { color: var(--rosso-scuro); }
b, strong { font-weight: 700; }
.salta { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: #fff; color: #111; font-weight: 700; text-decoration: none; }
.salta:focus { top: 10px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
section[id] { scroll-margin-top: calc(var(--testata-h) + 14px); }
.intero { white-space: nowrap; }
:focus-visible { outline: 3px solid var(--rosso); outline-offset: 2px; }
/* finché i caratteri non arrivano il ripiego è più largo: una parola lunga va a capo invece di uscire (riserva-check, #233) */
h1, h2, h3, .marchio__nome, .piede__nome, .cartellino__nome, .foglio__titolo, .insegna__nastro { overflow-wrap: anywhere; }

/* ── il distintivo: il tondo giallo, l'anello, il nastro marrone ── */
.distintivo__fondo { fill: var(--giallo); stroke: #3A2618; stroke-width: 5; }
.distintivo__anello { fill: none; stroke: #3A2618; stroke-width: 3; }
.distintivo__nastro { fill: var(--nastro); }
.distintivo__coda { fill: #3F2718; }
.distintivo__scritta { font: 400 15px/1 var(--f-titoli); letter-spacing: .04em; fill: #3A2618; }
.distintivo__piccola { font: 400 10px/1 var(--f-titoli); letter-spacing: .12em; fill: #F6E3BC; }
.distintivo__grande { font: 400 19px/1 var(--f-titoli); letter-spacing: .04em; fill: #F6E3BC; }

/* ── la testata di legno scuro ── */
.testata { position: sticky; top: 0; z-index: 50; background: var(--legno); box-shadow: 0 3px 0 var(--legno-chiaro), 0 8px 18px -10px rgba(0, 0, 0, .7); }
.testata__dentro { display: flex; align-items: center; gap: 10px; max-width: 1240px; margin: 0 auto; padding: 8px var(--gutter); min-height: 72px; }
.marchio { display: inline-flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; }
.marchio__tondo { flex: none; width: 50px; height: 50px; }
.marchio__testo { display: flex; flex-direction: column; min-width: 0; line-height: 1.05; }
.marchio__nome { color: var(--panna); font: 400 1.3rem/1.05 var(--f-titoli); }
.marchio__citta { margin-top: 3px; color: var(--ambra); font: 700 .74rem/1 var(--f-testo); letter-spacing: .32em; }
.voci { display: none; }
.testata__azioni { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.lingue { display: flex; }
.lingue button { min-width: 34px; min-height: 38px; padding: 0 5px; border: 1px solid rgba(246, 233, 204, .45); background: transparent; color: var(--panna); font: 700 .92rem var(--f-testo); cursor: pointer; }
.lingue button + button { border-left: 0; }
.lingue button.is-on { background: var(--panna); border-color: var(--panna); color: var(--legno); }
.chiama { display: none; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 3px; background: var(--rosso); color: #FFFFFF; font: 700 1.02rem var(--f-testo); text-decoration: none; }
.chiama:hover { background: var(--rosso-scuro); }
.burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; border: 1px solid rgba(246, 233, 204, .45); border-radius: 3px; background: transparent; cursor: pointer; }
.burger span { display: block; height: 2px; background: var(--panna); transition: transform .2s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.menu-mobile { position: fixed; top: var(--testata-h); left: 0; right: 0; z-index: 49; max-height: calc(100vh - var(--testata-h)); overflow-y: auto; padding: 10px var(--gutter) 22px; background: var(--legno); box-shadow: 0 10px 24px rgba(0, 0, 0, .35); }
.menu-mobile a { display: block; padding: 11px 2px 9px; border-bottom: 1px solid rgba(246, 233, 204, .16); color: var(--panna); font: 400 1.35rem/1.3 var(--f-titoli); text-decoration: none; }
.menu-mobile__tel { display: flex !important; justify-content: center; gap: 8px; margin-top: 14px; border: 0 !important; border-radius: 3px; background: var(--rosso); color: #FFFFFF !important; font: 700 1.12rem/1.3 var(--f-testo) !important; padding: 13px 8px !important; }

/* ── l'apertura: il muro giallo ── */
.apertura { display: grid; gap: 30px; padding: 36px max(var(--gutter), calc((100% - 1240px) / 2)) 58px; background: radial-gradient(ellipse 70% 60% at 18% 12%, rgba(255, 250, 225, .5), transparent 70%), radial-gradient(ellipse 60% 70% at 92% 88%, rgba(190, 130, 35, .2), transparent 70%), var(--muro); }
.apertura__sopra { margin: 0 0 12px; font: 700 .98rem/1.4 var(--f-testo); letter-spacing: .1em; text-transform: uppercase; color: var(--rosso-scuro); }
.titolo { margin: 0 0 16px; font: 400 clamp(2.6rem, 1.5rem + 3.6vw, 4.4rem)/1.08 var(--f-titoli); color: var(--nastro); text-wrap: balance; }
.apertura__frase { max-width: 30em; margin: 0 0 22px; font-size: 1.22rem; }
.citazione { max-width: 30em; margin: 0 0 22px; padding: 14px 20px 12px; background: var(--crema); border-radius: 2px; box-shadow: inset 0 0 0 4px var(--crema), inset 0 0 0 5px var(--filetto), 0 12px 22px -16px rgba(42, 28, 18, .7); }
.citazione p { margin: 0; font: 400 clamp(1.3rem, 1.15rem + .6vw, 1.6rem)/1.35 var(--f-mano); color: var(--nastro); }
.citazione footer { margin-top: 6px; font-size: 1rem; color: var(--grigio); }
.voto { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; }
.voto__n { font: 400 2.6rem/1 var(--f-titoli); color: var(--inchiostro); }
.voto__su { font-size: 1.06rem; }
.voto--sezione { margin: -4px 0 28px; }
.stato { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0; font: 700 1.04rem/1.4 var(--f-testo); color: var(--inchiostro); }
.stato::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: currentColor; opacity: .45; flex: none; }
.stato.is-aperto::before { opacity: 1; background: var(--aperto); box-shadow: 0 0 0 3px rgba(27, 107, 69, .3); }
.apertura__azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.bottone { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 2px 24px 0; border: 2px solid var(--inchiostro); border-radius: 3px; background: transparent; color: var(--inchiostro); font: 700 1.08rem/1.1 var(--f-testo); text-align: center; text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.bottone--pieno { border-color: var(--rosso); background: var(--rosso); color: #FFFFFF; }
.bottone--pieno:hover { background: var(--rosso-scuro); border-color: var(--rosso-scuro); }
.bottone--vuoto:hover { background: var(--inchiostro); color: #FFFFFF; }

/* il quadro di legno con l'insegna intagliata, e dentro la candela */
.apertura__firma { width: 100%; max-width: 640px; justify-self: center; }
.quadro { padding: 12px 12px 16px; border-radius: 4px; background: linear-gradient(180deg, #3A2618, var(--legno)); box-shadow: inset 0 0 0 3px #4E3322, 0 26px 36px -24px rgba(42, 28, 18, .9); }
.insegna { display: flex; justify-content: center; margin: 0 0 10px; }
.insegna__nastro { display: inline-block; padding: 7px 34px 5px; background: linear-gradient(180deg, #EDD69A, #D7B96F); color: #3A2618; font: 400 1.25rem/1.2 var(--f-titoli); letter-spacing: .06em; text-align: center; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%, 14px 50%); }
.tavola { margin: 0; -webkit-user-select: none; user-select: none; }
.cera__svg { border-radius: 2px; }
.tavola__didascalia { min-height: 3em; margin: 14px 0 0; color: var(--panna); font-size: 1.04rem; line-height: 1.45; text-align: center; }
.tavola__d { display: none; }
.tavola[data-modo="0"] .tavola__d[data-m="0"], .tavola[data-modo="1"] .tavola__d[data-m="1"], .tavola[data-modo="2"] .tavola__d[data-m="2"] { display: inline; }
.tavola__modi { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.tavola__modi button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 2px 16px 0 12px; border: 2px solid rgba(246, 233, 204, .6); border-radius: 3px; background: transparent; color: var(--panna); font: 700 1.02rem/1.1 var(--f-testo); cursor: pointer; }
.tavola__modi button::before { content: ''; width: 9px; height: 20px; border-radius: 2px 2px 3px 3px; background: #C63A2E; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); flex: none; }
.tavola__modi button[data-modo="1"]::before { background: #F2EBDD; }
.tavola__modi button[data-modo="2"]::before { background: #E0702E; }
.tavola__modi button:hover { border-color: var(--panna); }
.tavola__modi button[aria-pressed="true"] { background: var(--panna); border-color: var(--panna); color: var(--legno); }
/* senza JS la candela non cambia: i bottoni restano nascosti col loro posto (#240) */
.no-js .tavola__modi { visibility: hidden; }
.apertura__nota { max-width: 36em; margin: 14px auto 0; font-size: 1rem; text-align: center; }

/* ── i capitoli ── */
.capitolo { padding: 68px max(var(--gutter), calc((100% - 1180px) / 2)) 66px; }
.capitolo--muro { background: radial-gradient(ellipse 60% 50% at 85% 10%, rgba(255, 250, 225, .45), transparent 70%), #F5DF9C; }
.capitolo--chiaro { background: var(--muro-chiaro); }
.capitolo--legno { color: var(--panna); background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 160px), linear-gradient(180deg, #34211A, var(--legno)); }
.etichetta { margin: 0; font: 700 .95rem/1.3 var(--f-testo); letter-spacing: .16em; text-transform: uppercase; color: var(--rosso-scuro); }
.capitolo--legno .etichetta { color: var(--ambra); }
.capitolo__titolo { max-width: 20em; margin: 6px 0 14px; font: 400 clamp(2rem, 1.4rem + 2.2vw, 3rem)/1.14 var(--f-titoli); color: var(--nastro); text-wrap: balance; }
.capitolo--legno .capitolo__titolo { color: #FBEFD2; }
.capitolo__sotto { max-width: 42em; margin: 0 0 30px; font-size: 1.14rem; }
figure { margin: 0; }
figcaption { margin-top: 8px; font-size: 1rem; line-height: 1.45; color: var(--grigio); }
.capitolo--legno figcaption { color: #E4D3AE; }
.foto { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.foto img { display: block; width: 100%; height: auto; border-radius: 3px; }

/* le proposte del giorno: il foglio appeso al muro */
.proposte { display: grid; gap: 34px; align-items: start; }
.proposte__foto { max-width: 520px; margin-top: 4px; }
.proposte__foto img { box-shadow: 0 16px 24px -18px rgba(42, 28, 18, .8); }
.proposte__link { margin: 18px 0 0; font-weight: 700; }
.foglio { max-width: 480px; width: 100%; justify-self: center; padding: 18px 8px 8px; }
.foglio__carta { position: relative; padding: 38px 30px 26px; background: #FFFBF0; transform: rotate(-1.2deg); box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 22px 30px -20px rgba(42, 28, 18, .75); text-align: center; }
.foglio__carta::before { content: ''; position: absolute; left: 50%; top: -9px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #F4DC9A, #B8903F 60%, #7A5A22); box-shadow: 0 3px 4px rgba(0, 0, 0, .35); }
.foglio__data { margin: 0; font: 400 1.15rem/1.3 var(--f-mano); color: var(--grigio); }
.foglio__titolo { margin: 4px 0 16px; font: 400 clamp(1.8rem, 1.5rem + 1vw, 2.2rem)/1.15 var(--f-mano); color: var(--rosso-scuro); }
.foglio__voci { margin: 0; padding: 0; list-style: none; }
.foglio__voci li { padding: 10px 0 8px; font: 400 1.28rem/1.3 var(--f-mano); color: var(--inchiostro); }
.foglio__voci li + li { border-top: 1px dashed rgba(92, 74, 56, .35); }
.foglio__nota { margin: 16px 0 0; font: italic 400 1rem/1.3 var(--f-testo); color: var(--grigio); }

/* la carta sulle mensole: ogni capitolo una mensola, ogni piatto un cartellino come le etichette delle bottiglie vecchie */
.scaffale { display: grid; gap: 40px; max-width: 1080px; margin: 0 auto; }
.mensola { position: relative; }
.mensola::after { content: ''; display: block; height: 16px; margin: 0 -10px; border-radius: 2px; background: linear-gradient(180deg, #7A5130, #4A3020 70%, #3A2618); box-shadow: 0 12px 14px -8px rgba(0, 0, 0, .7); }
.mensola__nome { display: inline-block; margin: 0 0 14px; padding: 7px 16px 5px; border-radius: 2px; background: linear-gradient(180deg, #E8C985, #B8903F); color: #2A1C12; font: 400 1.15rem/1.2 var(--f-titoli); letter-spacing: .06em; box-shadow: inset 0 0 0 1px rgba(60, 40, 10, .45), 0 4px 8px -4px rgba(0, 0, 0, .6); }
.mensola__voci { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: end; margin: 0; padding: 0; list-style: none; }
.cartellino { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 118px; padding: 14px 14px 12px; border-radius: 2px; background: var(--carta); color: var(--inchiostro); text-align: center; box-shadow: inset 0 0 0 4px var(--carta), inset 0 0 0 5px var(--filetto), inset 0 0 0 7px var(--carta), inset 0 0 0 8px var(--filetto), 0 10px 12px -10px rgba(0, 0, 0, .8); }
.cartellino img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin: 0 0 10px; border-radius: 2px; }
.cartellino__nome { display: block; font: 700 1.02rem/1.3 var(--f-testo); }
.carta__nota { max-width: 1080px; margin: 30px auto 0; font-size: 1.04rem; color: #E4D3AE; }

/* la sala, dalla finestra a piombo: le foto nei vetri a losanga */
.finestra { max-width: 1000px; margin: 0 auto; padding: 14px; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, #4A3020, #3A2618); box-shadow: inset 0 0 0 3px #5A3B24, 0 30px 40px -30px rgba(42, 28, 18, .8); }
.finestra::after { content: ''; display: block; height: 14px; margin: 14px -24px -14px; border-radius: 2px; background: linear-gradient(180deg, #6B4526, #4A3020); box-shadow: 0 10px 12px -8px rgba(0, 0, 0, .6); }
.finestra__vetri { position: relative; aspect-ratio: 4 / 10; margin: 0; padding: 0; list-style: none; overflow: hidden; background: #262321; }
.vetro { position: absolute; left: calc(var(--mx, 0) * 25%); top: calc(var(--my, 0) * 12.5%); width: 50%; height: 25%; clip-path: polygon(50% 3px, calc(100% - 3px) 50%, 50% calc(100% - 3px), 3px 50%); }
.vetro--largo { display: none; }
.vetro .foto { position: relative; width: 100%; height: 100%; }
.vetro .foto:focus-visible { outline: none; }
.vetro .foto:focus-visible::after { content: ''; position: absolute; inset: 0; background: #FFE9A8; clip-path: polygon(evenodd, 50% 0, 100% 50%, 50% 100%, 0 50%, 50% 0, 50% 12px, 12px 50%, 50% calc(100% - 12px), calc(100% - 12px) 50%, 50% 12px); }
.vetro img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform .35s; }
.vetro .foto:hover img { transform: scale(1.05); }
.vetro--ambra { background: linear-gradient(135deg, rgba(255, 255, 255, .22), transparent 45%), linear-gradient(160deg, #F2C063, #C98A22); }
.vetro--giallo { background: linear-gradient(135deg, rgba(255, 255, 255, .25), transparent 45%), linear-gradient(160deg, #F7DD8C, #DDAE3E); }
.vetro--blu { background: linear-gradient(135deg, rgba(255, 255, 255, .14), transparent 45%), linear-gradient(160deg, #3B5580, var(--notte)); }
.vetro--verde { background: linear-gradient(135deg, rgba(255, 255, 255, .16), transparent 45%), linear-gradient(160deg, #869F62, #4B6436); }
.finestra__nota { max-width: 46em; margin: 34px auto 0; font-size: 1.04rem; text-align: center; }

/* dicono: i biglietti sul muro */
.recensioni { columns: 1; column-gap: 24px; margin: 0; padding: 0; list-style: none; }
.recensione { break-inside: avoid; margin-bottom: 22px; padding: 22px 24px 18px; border-radius: 2px; background: var(--crema); box-shadow: inset 0 0 0 4px var(--crema), inset 0 0 0 5px var(--filetto), 0 12px 22px -18px rgba(42, 28, 18, .8); }
.recensione__testo { margin: 0; font-size: 1.08rem; line-height: 1.55; }
.recensione__chi { margin: 12px 0 0; font-size: 1rem; line-height: 1.4; color: var(--grigio); }
.recensione__chi b { display: block; font: 400 1.3rem/1.3 var(--f-mano); color: var(--nastro); }
.dicono__nota { max-width: 46em; margin: 8px 0 0; font-size: 1.04rem; }
.dicono__nota a { font-weight: 700; }

/* orari, sotto l'orologio */
.orari { display: grid; gap: 34px; align-items: start; max-width: 1000px; margin: 0 auto; }
.orari__foto { max-width: 340px; justify-self: center; }
.orari__foto img { aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 8px #1E1B19, 0 0 0 10px var(--ottone), 0 20px 30px -18px rgba(0, 0, 0, .9); }
.orari__foto figcaption { margin-top: 20px; text-align: center; }
.orari__sotto { margin: 0 0 6px; font-size: 1.14rem; }
.capitolo--legno .stato { color: var(--panna); }
.capitolo--legno .stato.is-aperto::before { background: #4FC285; box-shadow: 0 0 0 3px rgba(79, 194, 133, .3); }
.stato--settimana { margin: 0 0 14px; }
.settimana { max-width: 460px; }
.settimana__giorno { display: flex; justify-content: space-between; gap: 14px; padding: 9px 10px 7px; border-bottom: 1px solid rgba(246, 233, 204, .18); }
.settimana__giorno span:first-child { font-weight: 700; }
.settimana__giorno span:last-child { text-align: right; color: #E4D3AE; }
.settimana__giorno.is-today { background: rgba(240, 179, 35, .16); box-shadow: inset 3px 0 0 var(--giallo); }
.settimana__giorno.is-today span:last-child { color: var(--panna); }
.orari__nota { margin: 16px 0 0; font-size: 1rem; color: #E4D3AE; }

/* dove */
.dove { display: grid; gap: 30px; align-items: start; }
.dove__porta { max-width: 640px; }
.cartina { overflow: hidden; margin-bottom: 20px; border-radius: 3px; box-shadow: 0 0 0 5px var(--legno-medio); }
.cartina iframe { display: block; width: 100%; height: 300px; border: 0; }
.indirizzo { margin: 0 0 16px; }
.indirizzo div { display: grid; grid-template-columns: 7.4em minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(42, 28, 18, .14); }
.indirizzo dt { font: 700 .88rem/1.9 var(--f-testo); letter-spacing: .1em; text-transform: uppercase; color: var(--rosso-scuro); }
.indirizzo dd { margin: 0; overflow-wrap: anywhere; }
.dove__prenota { margin: 0 0 16px; }
.dove__azioni { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }

/* ── la chiusura: il legno, il distintivo ── */
.piede { background: var(--legno); color: var(--panna); box-shadow: inset 0 4px 0 var(--legno-chiaro); }
.piede__dentro { max-width: 900px; margin: 0 auto; padding: 46px var(--gutter) 100px; text-align: center; }
.piede__distintivo { display: block; width: 150px; height: 150px; margin: 0 auto 14px; }
.piede__nome { margin: 0 0 10px; font: 400 1.9rem/1.15 var(--f-titoli); color: #FBEFD2; }
.piede__dove, .piede__orario, .piede__social { margin: 0 0 8px; }
.piede a { color: var(--panna); }
.piede__cred { max-width: 54em; margin: 18px auto 10px; font-size: 1rem; color: #E4D3AE; }
.piede__su { font-weight: 700; }

/* ── reveal (plumbing) ── */
.js .reveal { opacity: 0; }
.js .reveal.in-view { opacity: 1; }
html:not(.js) .reveal { opacity: 1; }
.reduced-motion .reveal { opacity: 1 !important; }

/* ── la barra e la lightbox ── */
.action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1fr 1fr; background: var(--legno); box-shadow: 0 -3px 0 var(--legno-chiaro); transform: translateY(110%); transition: transform .25s; }
.action-bar.is-visible { transform: translateY(0); }
.action-bar a { display: flex; align-items: center; justify-content: center; min-height: 54px; color: #fff; font: 700 1.08rem var(--f-testo); text-decoration: none; }
.action-bar a:first-child { background: var(--rosso); }
#lightbox { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(20, 15, 10, .95); }
#lightbox[hidden] { display: none !important; }
#lightbox img { width: auto; max-width: min(1400px, 100%); max-height: 88vh; }
#lightboxClose { position: absolute; top: 14px; right: 16px; width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 50%; background: transparent; color: #fff; font-size: 32px; line-height: 1; cursor: pointer; }

/* ── le larghezze ── */
@media (max-width: 419px) {
  .marchio__citta { display: none; }
  .marchio__nome { font-size: 1.08rem; }
  .marchio__tondo { width: 42px; height: 42px; }
}
@media (max-width: 379px) {
  .testata__dentro { gap: 6px; }
  .lingue button { min-width: 31px; }
  .marchio { gap: 7px; }
  .marchio__nome { font-size: 1rem; }
  .stato { font-size: .96rem; }
  .tavola__modi button { padding: 2px 11px 0 9px; gap: 6px; }
  .bottone { padding: 2px 16px 0; }
  .quadro { padding: 8px 8px 12px; }
  .foglio__carta { padding: 34px 18px 22px; }
  .cartellino { padding: 12px 10px 10px; }
  .cartellino__nome { font-size: .95rem; }
}
@media (min-width: 560px) {
  .chiama { display: inline-flex; }
}
@media (min-width: 700px) {
  .finestra { padding: 18px; }
  .finestra__vetri { aspect-ratio: 8 / 6.25; }
  .vetro { left: calc(var(--x, 0) * 12.5%); top: calc(var(--y, 0) * 20%); width: 25%; height: 40%; }
  .vetro--largo { display: block; }
  .vetro--stretto { display: none; }
  .mensola__voci { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 760px) {
  .action-bar { display: none; }
  .piede__dentro { padding-bottom: 50px; }
  .recensioni { columns: 2; }
  .orari { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 54px; align-items: center; }
  .cartina iframe { height: 320px; }
}
@media (min-width: 900px) {
  .proposte { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 50px; }
  .dove { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
}
@media (min-width: 960px) {
  .apertura { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: 48px; }
}
@media (min-width: 1060px) {
  .testata__dentro { gap: 16px; }
  .voci { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-left: 26px; }
  .voci a { padding: 4px 1px 2px; color: var(--panna); font: 700 1.04rem var(--f-testo); text-decoration: none; }
  .voci a:hover, .voci a[aria-current="true"] { color: var(--ambra); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; }
  .burger { display: none; }
  .recensioni { columns: 3; }
}

/*FINESTRA*/
/* le posizioni dei vetri — scritte da tsm_finestra.cjs */
.vetro--f1 { --x: 0; --y: 0; --mx: 0; --my: 0; }
.vetro--f2 { --x: 4; --y: 0; --mx: 2; --my: 0; }
.vetro--f3 { --x: 6; --y: 0; --mx: 0; --my: 2; }
.vetro--f4 { --x: 1; --y: 1; --mx: 1; --my: 1; }
.vetro--f5 { --x: 5; --y: 1; --mx: 1; --my: 3; }
.vetro--f6 { --x: 2; --y: 2; --mx: 0; --my: 4; }
.vetro--f7 { --x: 4; --y: 2; --mx: 2; --my: 4; }
.vetro--f8 { --x: 1; --y: 3; --mx: 0; --my: 6; }
.vetro--f9 { --x: 3; --y: 3; --mx: 2; --my: 6; }
.vetro--l1 { --x: 2; --y: 0; }
.vetro--l2 { --x: 3; --y: 1; }
.vetro--l3 { --x: 0; --y: 2; }
.vetro--l4 { --x: 6; --y: 2; }
.vetro--l5 { --x: 5; --y: 3; }
.vetro--l6 { --x: -1; --y: -1; }
.vetro--l7 { --x: 1; --y: -1; }
.vetro--l8 { --x: 3; --y: -1; }
.vetro--l9 { --x: 5; --y: -1; }
.vetro--l10 { --x: 7; --y: -1; }
.vetro--l11 { --x: -1; --y: 1; }
.vetro--l12 { --x: 7; --y: 1; }
.vetro--l13 { --x: -1; --y: 3; }
.vetro--l14 { --x: 7; --y: 3; }
.vetro--l15 { --x: 0; --y: 4; }
.vetro--l16 { --x: 2; --y: 4; }
.vetro--l17 { --x: 4; --y: 4; }
.vetro--l18 { --x: 6; --y: 4; }
.vetro--s1 { --mx: 2; --my: 2; }
.vetro--s2 { --mx: 1; --my: 5; }
.vetro--s3 { --mx: -1; --my: -1; }
.vetro--s4 { --mx: 1; --my: -1; }
.vetro--s5 { --mx: 3; --my: -1; }
.vetro--s6 { --mx: -1; --my: 1; }
.vetro--s7 { --mx: 3; --my: 1; }
.vetro--s8 { --mx: -1; --my: 3; }
.vetro--s9 { --mx: 3; --my: 3; }
.vetro--s10 { --mx: -1; --my: 5; }
.vetro--s11 { --mx: 3; --my: 5; }
.vetro--s12 { --mx: -1; --my: 7; }
.vetro--s13 { --mx: 1; --my: 7; }
.vetro--s14 { --mx: 3; --my: 7; }
/*/FINESTRA*/

/*CERA*/
/* cera su cera — generato da _tsm_firma.mjs: non modificare a mano */
.cera__svg { display: block; width: 100%; height: auto; overflow: hidden; background: #7E5E26; }
.muro { fill: #7E5E26; } .muro__zoccolo { fill: #6A4D1F; } .muro__cimasa { fill: #3A2618; }
.luce { fill: url(#tsm-alone); }
.finestrella__telaio { fill: #3A2618; } .finestrella__vetro { fill: url(#tsm-notte); }
.finestrella__piombo { fill: none; stroke: #121417; stroke-width: 3; }
.finestrella__riflesso { fill: rgba(255, 255, 255, .06); } .finestrella__traversa { fill: #3A2618; } .finestrella__davanzale { fill: #4A3020; }
.rami { fill: none; stroke: #D8CCAE; stroke-width: 3.2; stroke-linecap: round; }
.lucina__alone { fill: rgba(255, 226, 140, .32); } .lucina { fill: #FFF6D2; }
.tavolo { fill: #3E2817; } .tavolo__bordo { fill: #5A3B24; } .tavolo__venature { fill: none; stroke: #2E1D10; stroke-width: 2; stroke-linecap: round; }
.cera__cima { fill: #7A1E18; } .cera__conca { fill: #5A1511; }
.cera__grumo--a { fill: #8A241C; } .cera__grumo--b { fill: #701A15; } .cera__grumo--c { fill: #9A2C23; }
.orologio__staffa { fill: none; stroke: #1E1B19; stroke-width: 4; stroke-linecap: round; }
.orologio__cassa { fill: #1E1B19; } .orologio__quadrante { fill: #EFE8D6; }
.orologio__tacche { fill: none; stroke: #1E1B19; stroke-width: 2.2; stroke-linecap: round; }
.orologio__ore, .orologio__minuti { fill: none; stroke: #1E1B19; stroke-linecap: round; } .orologio__ore { stroke-width: 4; } .orologio__minuti { stroke-width: 2.6; }
.orologio__perno { fill: #1E1B19; }
.cera__lago { fill: #7E1D17; }
.cera__corpo { fill: #8E231C; }
.cera__lingua--a { fill: #9E2A22; } .cera__lingua--b { fill: #7E1D17; } .cera__lingua--c { fill: #B0362A; }
.cera__lingua--bianca { fill: #E6DCC8; } .cera__lingua--arancio { fill: #C65E28; }
.cera__riflesso { fill: none; stroke: rgba(255, 190, 170, .38); stroke-width: 2.2; stroke-linecap: round; }
.cera__orlo { fill: none; stroke: #C4463A; stroke-width: 2.6; stroke-linecap: round; }
.candela__luce { fill: rgba(255, 255, 255, .16); } .candela__ombra { fill: rgba(50, 12, 6, .2); }
.stoppino, .fiamma__stoppino { fill: none; stroke: #2A1A12; stroke-width: 2.4; stroke-linecap: round; }
.fiamma__alone { fill: rgba(255, 214, 120, .3); } .fiamma__fuori { fill: #FFB547; } .fiamma__dentro { fill: #FFF1BD; } .fiamma__blu { fill: rgba(80, 118, 214, .85); }
.scintilla { fill: #FFF6C8; }
.pozza__lustro { fill: rgba(255, 255, 255, .5); }
.cola { fill: none; stroke-width: 8; stroke-linecap: round; }
.modo--rossa .candela__corpo { fill: #C63A2E; } .modo--rossa .candela__cima { fill: #A52C22; } .modo--rossa .pozza__lago { fill: #D95546; } .modo--rossa .cola { stroke: #D44B3D; }
.modo--bianca .candela__corpo { fill: #F2EBDD; } .modo--bianca .candela__cima { fill: #DCD2BE; } .modo--bianca .pozza__lago { fill: #FFFDF7; } .modo--bianca .cola { stroke: #FFFFFF; filter: drop-shadow(1.5px 1px 0 rgba(90, 70, 40, .28)); }
.modo--bianca .candela__ombra { fill: rgba(90, 70, 40, .16); }
.modo--arancio .candela__corpo { fill: #E0702E; } .modo--arancio .candela__cima { fill: #C45C22; } .modo--arancio .pozza__lago { fill: #F08E4E; } .modo--arancio .cola { stroke: #EE8545; }
.tavola[data-modo="0"] .modo:not([data-m="0"]) { display: none; }
.tavola[data-modo="1"] .modo:not([data-m="1"]) { display: none; }
.tavola[data-modo="2"] .modo:not([data-m="2"]) { display: none; }
.firma-attesa .candela[data-m="0"] { transform: translate(0px, -420px); }
.firma-attesa .scintilla[data-m="0"], .firma-attesa .fiamma[data-m="0"], .firma-attesa .luce[data-m="0"], .firma-attesa .pozza[data-m="0"] { opacity: 0; }
.firma-attesa .cola1[data-m="0"] { stroke-dashoffset: 132px; } .firma-attesa .cola2[data-m="0"] { stroke-dashoffset: 205px; }
/*/CERA*/

/*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*/