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

/* ══════════ PANIFICIO TICOZZI — Via San Maurilio 1 ══════════
   «Panettieri dagli anni 50.» (loro, su Instagram). La facciata rosa a bugne con tre vani e tre insegne ovali blu con le lettere
   oro sui pannelli crema: Panificio · Ticozzi · Pasticceria. La firma è il panettone capovolto (_tcz_firma.mjs). */
:root {
  --blu: #25375A;
  --blu-chiaro: #33497A;
  --oro: #E6C274;
  --oro-filo: #D4A94E;
  --oro-scuro: #7E5F1E;
  --crema: #F2E7D0;
  --crema-chiara: #FBF6EC;
  --rosa: #EBD3C8;
  --rosa-chiaro: #F3E2DA;
  --bugna: #D9BCAF;
  --telaio: #2E2A28;
  --pomodoro: #9E3325;
  --inchiostro: #2B2420;
  --grigio: #5E5249;
  --aperto: #1B6B45;
  --f-insegna: 'Rochester', 'Brush Script MT', cursive;
  --f-testo: 'Vesper Libre', 'Georgia', 'Times New Roman', serif;
  --gutter: 16px;
  --testata-h: 76px;
}
@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.1rem/1.62 var(--f-testo); background: var(--crema-chiara); }
a { color: var(--blu); }
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(--pomodoro); 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, .piede__nome, .mese__nome { overflow-wrap: anywhere; }

/* ── l'insegna ovale: blu, filo oro, il nome in corsivo oro ── */
.ovale { display: inline-flex; align-items: center; justify-content: center; min-width: 0; padding: .1em .95em .2em; border-radius: 50%; background: radial-gradient(ellipse 80% 70% at 50% 35%, var(--blu-chiaro), var(--blu) 72%); box-shadow: inset 0 0 0 2px var(--oro-filo), inset 0 0 0 5px var(--blu), inset 0 0 0 6px rgba(212, 169, 78, .5), 0 3px 8px -3px rgba(0, 0, 0, .5); }
.ovale__scritta { color: var(--oro); font: 400 1.9rem/1.25 var(--f-insegna); text-shadow: 0 1px 0 rgba(0, 0, 0, .35); white-space: nowrap; }
.ovale--centro .ovale__scritta { font-size: 2.2rem; }
.pannello { display: flex; justify-content: center; margin: 0; padding: 12px 10px 13px; background: linear-gradient(180deg, #F9F1DF, #E9DABB); box-shadow: inset 0 0 0 1px rgba(120, 90, 40, .25); }

/* ── la testata: il pannello crema ── */
.testata { position: sticky; top: 0; z-index: 50; background: linear-gradient(180deg, #F9F1DF, #EDE0C4); box-shadow: 0 3px 0 var(--telaio), 0 8px 18px -12px rgba(0, 0, 0, .6); }
.testata__dentro { display: flex; align-items: center; gap: 10px; max-width: 1280px; margin: 0 auto; padding: 8px var(--gutter); min-height: 76px; }
.marchio { display: inline-flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; }
.ovale--marchio { padding: .06em .8em .14em; }
.ovale--marchio .ovale__scritta { font-size: 1.55rem; }
.marchio__sotto { color: var(--oro-scuro); font: 700 .74rem/1.2 var(--f-testo); letter-spacing: .18em; text-transform: uppercase; }
.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(43, 36, 32, .35); background: transparent; color: var(--inchiostro); font: 700 .9rem var(--f-testo); cursor: pointer; }
.lingue button + button { border-left: 0; }
.lingue button.is-on { background: var(--blu); border-color: var(--blu); color: #FFFFFF; }
.chiama { display: none; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 20px; background: var(--blu); color: #FFFFFF; font: 700 1rem var(--f-testo); text-decoration: none; }
.chiama:hover { background: var(--blu-chiaro); }
.burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; border: 1px solid rgba(43, 36, 32, .35); border-radius: 22px; background: transparent; cursor: pointer; }
.burger span { display: block; height: 2px; background: var(--inchiostro); 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(--crema-chiara); box-shadow: 0 10px 24px rgba(0, 0, 0, .25); }
.menu-mobile a { display: block; padding: 11px 2px 9px; border-bottom: 1px solid rgba(43, 36, 32, .14); color: var(--blu); font: 700 1.3rem/1.3 var(--f-testo); text-decoration: none; }
.menu-mobile__tel { display: flex !important; justify-content: center; gap: 8px; margin-top: 14px; border: 0 !important; border-radius: 26px; background: var(--blu); color: #FFFFFF !important; font: 700 1.1rem/1.3 var(--f-testo) !important; padding: 13px 8px !important; }

/* ── l'apertura: la facciata rosa a bugne, tre vani ── */
.apertura { padding: 26px max(var(--gutter), calc((100% - 1280px) / 2)) 50px; background: repeating-linear-gradient(180deg, var(--rosa) 0 38px, var(--bugna) 38px 40px); }
.facciata { display: grid; gap: 18px; align-items: start; }
.vano { padding: 0 0 10px; border-radius: 3px; background: var(--telaio); box-shadow: 0 20px 30px -20px rgba(0, 0, 0, .7); }
.vano__vetro { margin: 10px 10px 0; background: var(--crema-chiara); box-shadow: inset 0 0 0 2px #1E1B19; }
.apertura__testo { padding: 24px 24px 22px; }
.apertura__sopra { margin: 0 0 10px; font: 700 .96rem/1.4 var(--f-testo); letter-spacing: .08em; text-transform: uppercase; color: var(--pomodoro); }
.titolo { margin: 0 0 14px; font: 900 clamp(2.6rem, 1.7rem + 3vw, 4.1rem)/1.06 var(--f-testo); color: var(--blu); text-wrap: balance; }
.apertura__frase { max-width: 30em; margin: 0 0 20px; font-size: 1.16rem; }
.citazione { margin: 0; padding: 12px 18px 10px; border-left: 4px solid var(--oro-filo); background: var(--crema); }
.citazione p { margin: 0; font: 400 clamp(1.55rem, 1.3rem + .8vw, 1.95rem)/1.25 var(--f-insegna); color: var(--blu); }
.citazione footer { margin-top: 4px; font-size: .98rem; color: var(--grigio); }
.porta { display: flex; flex-direction: column; gap: 4px; padding: 22px 14px 0; background: linear-gradient(180deg, #F7E9CC, #EDD6AA); }
.voto { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; }
.voto__n { font: 900 2.7rem/1 var(--f-testo); color: var(--inchiostro); }
.voto__su { font-size: 1.04rem; }
.voto--sezione { margin: -4px 0 28px; }
.stato { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 0; font: 700 1.02rem/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: 10px; margin-top: 18px; }
.bottone { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 2px 22px 0; border: 2px solid var(--inchiostro); border-radius: 26px; background: transparent; color: var(--inchiostro); font: 700 1.06rem/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(--blu); background: var(--blu); color: #FFFFFF; }
.bottone--pieno:hover { background: var(--blu-chiaro); border-color: var(--blu-chiaro); }
.bottone--vuoto:hover { background: var(--inchiostro); color: #FFFFFF; }
/* la soglia a mosaico coi cerchi, come quella della loro porta */
.porta .apertura__azioni { flex-direction: column; }
.porta .bottone { width: 100%; padding: 2px 12px 0; font-size: 1rem; }
.porta__soglia { height: 26px; margin: 22px -14px 0; background: radial-gradient(circle at 50% 50%, transparent 5px, #BFA98A 6px, #BFA98A 7px, transparent 8px) 0 0 / 26px 26px, #E3D5BC; box-shadow: inset 0 2px 0 rgba(0, 0, 0, .12); }

/* la firma nel vano di destra */
.apertura__firma { width: 100%; max-width: 520px; justify-self: center; }
.apertura__firma .vano__vetro { padding: 8px 8px 12px; background: var(--crema); }
.bottega { margin: 0; -webkit-user-select: none; user-select: none; }
.bottega__didascalia { min-height: 3em; margin: 12px 4px 0; font-size: 1.02rem; line-height: 1.45; text-align: center; }
.bottega__d { display: none; }
.bottega[data-modo="0"] .bottega__d[data-m="0"], .bottega[data-modo="1"] .bottega__d[data-m="1"], .bottega[data-modo="2"] .bottega__d[data-m="2"] { display: inline; }
.bottega__modi { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.bottega__modi button { min-height: 44px; padding: 2px 16px 0; border: 2px solid var(--blu); border-radius: 22px; background: #FFFFFF; color: var(--blu); font: 700 1rem/1.1 var(--f-testo); cursor: pointer; }
.bottega__modi button:hover { background: var(--crema-chiara); }
.bottega__modi button[aria-pressed="true"] { background: var(--blu); color: var(--oro); }
/* senza JS il dolce non cambia: i bottoni restano nascosti col loro posto (#240) */
.no-js .bottega__modi { visibility: hidden; }
.apertura__nota { max-width: 32em; margin: 12px auto 0; padding: 0 14px 2px; color: var(--crema); font-size: 1rem; line-height: 1.45; text-align: center; }

/* ── i capitoli ── */
.capitolo { padding: 64px max(var(--gutter), calc((100% - 1180px) / 2)) 62px; }
.capitolo--crema { background: var(--crema-chiara); }
.capitolo--rosa { background: var(--rosa-chiaro); }
.capitolo--blu { color: var(--crema-chiara); background: radial-gradient(ellipse 70% 60% at 50% 0, var(--blu-chiaro), var(--blu) 70%); }
.capitolo__testa { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 18px; }
.pannello--capitolo { display: inline-flex; padding: 10px 18px 11px; border-radius: 3px; }
.etichetta { margin: 0; font: 700 .95rem/1.3 var(--f-testo); letter-spacing: .14em; text-transform: uppercase; color: var(--pomodoro); }
.capitolo--blu .etichetta { color: var(--oro); }
.capitolo__titolo { max-width: 20em; margin: 6px 0 14px; font: 900 clamp(2rem, 1.4rem + 2.1vw, 2.9rem)/1.12 var(--f-testo); color: var(--blu); text-wrap: balance; }
.capitolo--blu .capitolo__titolo { color: #FFF4DA; }
.capitolo__sotto { max-width: 42em; margin: 0 0 30px; font-size: 1.12rem; }
figure { margin: 0; }
figcaption { margin-top: 7px; font-size: .98rem; line-height: 1.4; color: var(--grigio); }
.foto { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.foto img { display: block; width: 100%; height: auto; border-radius: 4px; }

/* il banco: il testo e il mosaico delle foto */
.banco { display: grid; gap: 30px; align-items: start; }
.banco__testo p { max-width: 34em; margin: 0 0 16px; }
.loro { margin: 0 0 20px !important; }
.loro__frase { display: block; font: 400 clamp(1.6rem, 1.35rem + .9vw, 2.1rem)/1.25 var(--f-insegna); color: var(--blu); }
.loro__chi { display: block; margin-top: 2px; font-size: .98rem; color: var(--grigio); }
.mosaico { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mosaico .foto img { aspect-ratio: 1 / 1; object-fit: cover; }
.mosaico__grande { grid-column: span 2; }
.mosaico__grande .foto img { aspect-ratio: 4 / 3; }

/* l'anno del banco: ogni festa col suo ovale */
.anno { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.mese { min-width: 0; padding: 12px 12px 14px; border-radius: 4px; background: var(--crema-chiara); color: var(--inchiostro); text-align: center; box-shadow: 0 16px 24px -18px rgba(0, 0, 0, .8); }
.mese img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 3px var(--oro-filo), 0 0 0 6px var(--blu); }
.mese__nome { margin: 14px 0 2px; font: 400 1.75rem/1.2 var(--f-insegna); color: var(--blu); }
.mese__cosa { margin: 0; font-size: 1rem; line-height: 1.4; }

/* la famiglia */
.famiglia { display: grid; gap: 22px; align-items: start; }
.motto { margin: 0 0 18px; }
.motto p { margin: 0; font: 400 clamp(1.7rem, 1.4rem + 1vw, 2.3rem)/1.25 var(--f-insegna); color: var(--blu); }
.motto footer { margin-top: 4px; font-size: .98rem; color: var(--grigio); }
.famiglia__testo p { max-width: 34em; }
.famiglia__sera, .famiglia__pirottini { max-width: 360px; }
.famiglia .foto img { aspect-ratio: 3 / 4; object-fit: cover; }

/* dicono */
.recensioni { columns: 1; column-gap: 24px; margin: 0; padding: 0; list-style: none; }
.recensione { break-inside: avoid; margin-bottom: 22px; padding: 20px 22px 16px; border-radius: 4px; background: #FFFFFF; box-shadow: inset 0 3px 0 var(--oro-filo), 0 12px 22px -18px rgba(43, 36, 32, .8); }
.recensione__testo { margin: 0; font-size: 1.05rem; line-height: 1.55; }
.recensione__chi { margin: 12px 0 0; font-size: .98rem; line-height: 1.4; color: var(--grigio); }
.recensione__chi b { display: block; color: var(--blu); font-size: 1.08rem; }
.dicono__nota { max-width: 46em; margin: 8px 0 0; font-size: 1.02rem; }
.dicono__nota a { font-weight: 700; }

/* orari */
.orari { display: grid; gap: 22px; align-items: start; max-width: 1000px; }
.stato--settimana { margin: 0 0 12px; }
.orari__nota { margin: 12px 0 0; font-size: 1rem; }
.settimana { max-width: 480px; padding: 8px 16px; border-radius: 4px; background: #FFFFFF; box-shadow: inset 0 3px 0 var(--oro-filo), 0 12px 22px -18px rgba(43, 36, 32, .8); }
.settimana__giorno { display: flex; justify-content: space-between; gap: 14px; padding: 9px 8px 7px; border-bottom: 1px solid rgba(43, 36, 32, .12); }
.settimana__giorno:last-child { border-bottom: 0; }
.settimana__giorno span:first-child { font-weight: 700; }
.settimana__giorno span:last-child { text-align: right; color: var(--grigio); }
.settimana__giorno.is-today { background: var(--blu); color: #FFFFFF; border-radius: 3px; }
.settimana__giorno.is-today span:last-child { color: var(--oro); }

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

/* ── la chiusura: il blu delle insegne ── */
.piede { background: var(--blu); color: var(--crema-chiara); box-shadow: inset 0 4px 0 var(--oro-filo); }
.piede__dentro { max-width: 900px; margin: 0 auto; padding: 46px var(--gutter) 100px; text-align: center; }
.piede__insegne { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 18px; }
.piede__insegne .ovale { box-shadow: inset 0 0 0 2px var(--oro-filo), 0 0 0 3px rgba(255, 255, 255, .12); }
.piede__insegne .ovale__scritta { font-size: 1.5rem; }
.piede__nome { margin: 0 0 10px; font: 900 1.8rem/1.15 var(--f-testo); color: #FFF4DA; }
.piede__dove, .piede__orario, .piede__social { margin: 0 0 8px; }
.piede a { color: var(--crema-chiara); }
.piede__cred { max-width: 54em; margin: 18px auto 10px; font-size: .98rem; color: #DCE2EE; }
.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(--telaio); box-shadow: 0 -3px 0 var(--oro-filo); 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.06rem var(--f-testo); text-decoration: none; }
.action-bar a:first-child { background: var(--blu); }
#lightbox { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(15, 18, 26, .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__sotto { display: none; }
}
@media (max-width: 379px) {
  .testata__dentro { gap: 6px; }
  .lingue button { min-width: 31px; }
  .ovale--marchio .ovale__scritta { font-size: 1.35rem; }
  .ovale__scritta { font-size: 1.6rem; }
  .ovale--centro .ovale__scritta { font-size: 1.85rem; }
  .apertura__testo { padding: 20px 16px 18px; }
  .stato { font-size: .96rem; }
  .bottega__modi button { padding: 2px 12px 0; }
  .bottone { padding: 2px 15px 0; }
  .vano__vetro { margin: 8px 8px 0; }
}
@media (min-width: 560px) {
  .chiama { display: inline-flex; }
  .anno { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 700px) {
  .mosaico { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mosaico__grande { grid-column: span 2; grid-row: span 2; }
  .mosaico__grande .foto img { aspect-ratio: auto; height: 100%; }
  .mosaico__grande .foto { height: calc(100% - 2.2em); }
}
@media (min-width: 760px) {
  .action-bar { display: none; }
  .piede__dentro { padding-bottom: 50px; }
  .recensioni { columns: 2; }
  .orari { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 48px; }
  .cartina iframe { height: 320px; }
  .famiglia { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, .8fr); gap: 28px; }
}
@media (min-width: 900px) {
  .banco { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 46px; }
  .banco--rovescio { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
  .banco--rovescio .banco__testo { order: 2; }
  .dove { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; }
  .anno { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1060px) {
  .testata__dentro { gap: 16px; }
  .voci { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-left: 18px; }
  .voci a { padding: 4px 1px 2px; color: var(--inchiostro); font: 700 1.02rem var(--f-testo); text-decoration: none; }
  .voci a:hover, .voci a[aria-current="true"] { color: var(--blu); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; }
  .burger { display: none; }
  .recensioni { columns: 3; }
  .facciata { grid-template-columns: minmax(0, 1fr) minmax(0, 270px) minmax(0, 500px); gap: 20px; }
  .apertura__firma { max-width: none; }
}

/*CAPOVOLTO*/
/* capovolto — generato da _tcz_firma.mjs: non modificare a mano */
.capovolto__svg { display: block; width: 100%; height: auto; overflow: hidden; background: #F2E7D0; }
.muro { fill: #F2E7D0; } .muro__piastrelle { fill: none; stroke: #E2CFA8; stroke-width: 1.5; }
.rastrelliera { fill: #3A3532; } .rastrelliera__gancio { fill: none; stroke: #3A3532; stroke-width: 5; stroke-linecap: round; }
.tavolo { fill: #A9AFB3; } .tavolo__piano { fill: #D3D7DA; }
.farina { fill: rgba(255, 255, 255, .8); }
.pasta { fill: #EFD9A6; stroke: #D9BD82; stroke-width: 1.5; }
.crosta { fill: url(#tcz-crosta); } .crosta__labbra { fill: #EAC98C; } .crosta__luce { fill: none; stroke: rgba(255, 230, 190, .45); stroke-width: 4; stroke-linecap: round; }
.segno__croce { fill: none; stroke: #9C7648; stroke-width: 3.2; stroke-linecap: round; }
.segno__glassa { fill: #EAD6AE; stroke: #CDB07C; stroke-width: 1.2; } .segno__mandorla { fill: #C4955E; stroke: #9E7240; stroke-width: 1; } .segno__granella { fill: #FFFFFF; }
.segno__cioccolato { fill: #4A2716; } .segno__codette { fill: none; stroke: #F6EDE0; stroke-width: 2.4; stroke-linecap: round; }
.pirottino { fill: #8C5A2B; } .pirottino__pieghe { fill: none; stroke: #74461E; stroke-width: 1.6; } .pirottino__fregio { fill: #C9A04A; } .pirottino__orlo { fill: #6F4420; }
.spillone { fill: none; stroke: #8F989E; stroke-width: 5; stroke-linecap: round; } .spillone--dietro { stroke: #B7BEC3; stroke-width: 4; } .spillone__testa { fill: #6C757B; }
.nastro__fascia, .nastro__fiocco, .nastro__code, .nastro__nodo { stroke: rgba(0, 0, 0, .18); stroke-width: 1; }
.modo--panettone .nastro__fascia, .modo--panettone .nastro__fiocco, .modo--panettone .nastro__code, .modo--panettone .nastro__nodo { fill: #B8392A; }
.modo--colomba .nastro__fascia, .modo--colomba .nastro__fiocco, .modo--colomba .nastro__code, .modo--colomba .nastro__nodo { fill: #8E6FAE; }
.modo--panettoncino .nastro__fascia, .modo--panettoncino .nastro__fiocco, .modo--panettoncino .nastro__code, .modo--panettoncino .nastro__nodo { fill: #C9A04A; }
.ovalino__filo { fill: none; stroke: #C9A04A; stroke-width: 1.6; }
.ovalino__ovale { fill: #25375A; stroke: #D4A94E; stroke-width: 2.2; }
.ovalino__nome { font: 400 19px/1 'Rochester', 'Brush Script MT', cursive; fill: #E3C57A; }
.bottega[data-modo="0"] .modo:not([data-m="0"]) { display: none; }
.bottega[data-modo="1"] .modo:not([data-m="1"]) { display: none; }
.bottega[data-modo="2"] .modo:not([data-m="2"]) { display: none; }
.firma-attesa .impasto[data-m="0"] { transform: translate(0px, -460px) translate(300px, 438px) scale(1, 0.42) translate(-300px, -438px); }
.firma-attesa .cottura[data-m="0"], .firma-attesa .spilloni[data-m="0"], .firma-attesa .ovalino[data-m="0"] { opacity: 0; }
.firma-attesa .segno[data-m="0"] { width: 0px; }
.firma-attesa .nastro[data-m="0"] { transform: translate(300px, 0px) scale(0, 1) translate(-300px, 0px); }
/*/CAPOVOLTO*/

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