/* PLUMBING_V 1 — Bespoke Studio · 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; }
}

/* ══════════ Osteria Naviglio Grande — «Specialità cucina lombarda.» ══════════
   La pagina è la ricetta dell'osteria, impaginata come una ricetta di rivista (La Cucina Italiana, «Risotto alla
   milanese»): la testa con la categoria, il nome del piatto e le info; gli ingredienti in colonna; il procedimento in
   passaggi col minuto della cottura; le note in fondo. I colori sono i loro: la carta calda delle pareti, il legno scuro
   dell'insegna, lo zafferano, il mattone del bancone, il glicine appeso ai muri. */
:root {
  --carta: #FBF7EF;
  --carta-2: #F3ECDF;
  --riga: #E3D8C5;
  --inchiostro: #2A201A;
  --inchiostro-2: #5A4A3E;
  --legno: #2A201A;
  --crema: #F2EFE8;
  --zafferano: #E0A11B;
  --zafferano-grande: #BD7B0A;
  --zafferano-testo: #9A5F06;
  --pistillo: #B8421E;
  --mattone: #B4623F;
  --glicine: #8C6BB0;
  --glicine-scuro: #5E4485;
  --glicine-chiaro: #EDE6F5;
  --edera: #3F6B35;
  --f-titolo: 'Fanwood Text', 'Iowan Old Style', Georgia, serif;
  --f-testo: 'Gentium Book Plus', Georgia, 'Times New Roman', serif;
  --f-etichetta: 'Lexend Deca', 'Segoe UI', system-ui, sans-serif;
  --testata-h: 64px;
  --gutter: 20px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--carta); color: var(--inchiostro); font: 400 1.0625rem/1.62 var(--f-testo); }
a { color: var(--pistillo); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--zafferano); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--f-titolo); font-weight: 400; margin: 0; }
p { margin: 0 0 1em; }
button { font: inherit; }
.salta-al-testo { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--zafferano); color: var(--inchiostro); font: 600 .9rem var(--f-etichetta); text-decoration: none; border-radius: 4px; }
.salta-al-testo:focus { top: 10px; }
.intero { white-space: nowrap; }
section[id], [id].passo { scroll-margin-top: calc(var(--testata-h) + 18px); }

/* ══════════ testata: l'insegna, crema sul legno scuro ══════════ */
.testata { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--testata-h); display: flex; align-items: center; gap: 18px; padding: 0 var(--gutter); background: var(--legno); color: var(--crema); border-bottom: 1px solid rgba(242, 239, 232, .14); }
.marchio { display: block; flex: none; width: 96px; color: var(--crema); line-height: 0; }
.marchio svg { width: 100%; height: auto; }
.indice { display: none; align-items: center; gap: 2px; margin-left: auto; }
.indice a { display: inline-flex; align-items: baseline; gap: 5px; padding: 8px 9px; border-radius: 3px; color: var(--crema); font: 500 .8rem/1 var(--f-etichetta); letter-spacing: .02em; text-decoration: none; }
.indice a i { font-style: normal; color: var(--zafferano); font-size: .72rem; }
.indice a:hover, .indice a[aria-current="true"] { background: rgba(242, 239, 232, .1); }
.indice a[aria-current="true"] { box-shadow: inset 0 -2px 0 var(--zafferano); }
.testata__destra { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.lingue { display: flex; border: 1px solid rgba(242, 239, 232, .35); border-radius: 3px; overflow: hidden; }
.lingue button { min-width: 38px; min-height: 36px; padding: 0 8px; border: 0; background: transparent; color: var(--crema); font: 500 .78rem var(--f-etichetta); letter-spacing: .06em; cursor: pointer; }
.lingue button[aria-pressed="true"] { background: var(--crema); color: var(--legno); }
.testata__chiama { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 3px; background: var(--zafferano); color: var(--inchiostro); font: 600 .8rem var(--f-etichetta); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; }
.burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; border: 1px solid rgba(242, 239, 232, .4); border-radius: 3px; background: transparent; cursor: pointer; }
.burger span { display: block; height: 2px; background: var(--crema); border-radius: 2px; 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); }
.indice-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) 24px; background: var(--legno); }
.indice-mobile[hidden] { display: none; }
.indice-mobile a { display: grid; grid-template-columns: 1.6em 1fr; column-gap: 10px; padding: 12px 4px; border-bottom: 1px solid rgba(242, 239, 232, .14); color: var(--crema); text-decoration: none; }
.indice-mobile i { grid-row: span 2; font: 400 1.4rem/1 var(--f-testo); font-style: normal; color: var(--zafferano); }
.indice-mobile b { font: italic 400 1.25rem/1.2 var(--f-titolo); }
.indice-mobile span { font: 400 .78rem/1.4 var(--f-etichetta); letter-spacing: .03em; color: rgba(242, 239, 232, .78); }
.indice-mobile__chiama { display: flex !important; justify-content: center; gap: 8px; margin: 4px 0 10px; border: 0 !important; border-radius: 3px; background: var(--zafferano); color: var(--inchiostro) !important; font: 600 .9rem var(--f-etichetta) !important; }
.indice-mobile__chiama span { font: inherit !important; color: inherit !important; }

/* ══════════ bottoni e stato ══════════ */
.azioni { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; }
.bottone { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 0 20px; border: 1.5px solid var(--inchiostro); border-radius: 3px; color: var(--inchiostro); font: 600 .82rem/1.2 var(--f-etichetta); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; background: transparent; }
.bottone:hover { background: var(--inchiostro); color: var(--carta); }
.bottone--pieno { border-color: var(--pistillo); background: var(--pistillo); color: #fff; }
.bottone--pieno:hover { border-color: var(--inchiostro); }
.bottone--vuoto { border-color: transparent; padding-left: 4px; padding-right: 4px; text-decoration: underline; text-underline-offset: 5px; }
.bottone--vuoto:hover { background: transparent; color: var(--pistillo); }
.stato { display: inline-flex; align-items: center; gap: 8px; margin: 18px 0 0; font: 500 .85rem var(--f-etichetta); color: var(--inchiostro-2); }
.stato::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: .45; }
.stato.is-aperto::before { background: #4F9A3E; opacity: 1; box-shadow: 0 0 0 3px rgba(79, 154, 62, .22); }

/* ══════════ la testa della ricetta ══════════ */
.testa { display: grid; grid-template-areas: 'cat' 'tit' 'piatto' 'som' 'info' 'azioni' 'stato'; max-width: 1280px; margin: 0 auto; padding: calc(var(--testata-h) + 30px) var(--gutter) 40px; }
.testa__testo { display: contents; }
.categoria { grid-area: cat; margin: 0 0 14px; font: 500 .74rem/1.5 var(--f-etichetta); letter-spacing: .14em; text-transform: uppercase; color: var(--pistillo); }
.categoria__dove { display: block; color: var(--inchiostro-2); letter-spacing: .08em; }
.testa__titolo { grid-area: tit; font-size: clamp(2.9rem, 11vw, 6.4rem); line-height: .96; letter-spacing: -.012em; }
.testa__sommario { grid-area: som; max-width: 36em; margin: 22px 0 0; font-size: 1.14rem; font-style: italic; color: var(--inchiostro-2); }
.info-ricetta { grid-area: info; display: grid; grid-template-columns: 1fr 1fr; margin: 26px 0 0; border-top: 1px solid var(--inchiostro); border-bottom: 1px solid var(--riga); }
.info-ricetta div { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--riga); }
.info-ricetta div:nth-last-child(-n+2) { border-bottom: 0; }
.info-ricetta dt { font: 500 .68rem/1.4 var(--f-etichetta); letter-spacing: .14em; text-transform: uppercase; color: var(--inchiostro-2); }
/* le cifre mai in Fanwood Text: ha solo i numeri minuscoli, lo zero è una «o» («58o») → Gentium, che le ha maiuscole */
.info-ricetta dd { margin: 3px 0 0; font: 400 1.12rem/1.3 var(--f-testo); }
.info-ricetta dd b { font-weight: 400; color: var(--zafferano-testo); }
.testa .azioni { grid-area: azioni; }
.testa .stato { grid-area: stato; justify-self: start; }

/* il piatto della firma */
.piatto { grid-area: piatto; justify-self: center; width: min(100%, 440px); margin: 20px 0 6px; }
.piatto__svg { display: block; width: 100%; height: auto; overflow: hidden; }
.piatto__didascalia { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 16px; margin-top: 6px; text-align: center; }
.piatto__pronto { font: italic 400 1.28rem/1.3 var(--f-titolo); color: var(--inchiostro-2); }
.piatto__rifai { min-height: 36px; padding: 0 12px; border: 1px solid var(--riga); border-radius: 3px; background: var(--carta); color: var(--pistillo); font: 500 .74rem var(--f-etichetta); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.piatto__rifai:hover { border-color: var(--pistillo); }
.piatto__rifai:disabled { opacity: .45; cursor: default; }
/* il bottone serve solo col codice e col movimento: senza JS e con reduced-motion non c'è (nell'HTML è spento finché
   la firma non finisce: niente salto quando arriva il codice) */
.no-js .piatto__rifai { display: none; }
@media (prefers-reduced-motion: reduce) { .piatto__rifai { display: none; } }

/* ══════════ la ricetta: ingredienti + procedimento ══════════ */
.ricetta { max-width: 1280px; margin: 0 auto; padding: 10px var(--gutter) 40px; }
.ingredienti__dentro { padding: 22px 20px 18px; background: var(--carta-2); border-top: 3px solid var(--zafferano); }
.ingredienti__titolo { font-size: 2rem; line-height: 1.1; }
.ingredienti__titolo small { display: block; margin-top: 2px; font: italic 400 1.02rem var(--f-testo); color: var(--inchiostro-2); }
.ingredienti__lista { list-style: none; margin: 16px 0 0; padding: 0; }
.ingredienti__lista a { display: grid; grid-template-columns: 4.9rem 1fr; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px dotted #C9BBA3; color: var(--inchiostro); text-decoration: none; }
.ingredienti__lista a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.ingredienti__lista b { font: 600 .9rem/1.3 var(--f-etichetta); color: var(--zafferano-testo); font-variant-numeric: tabular-nums; }
.ingredienti__lista span { font-size: 1rem; line-height: 1.35; }
.ingredienti__nota { margin: 12px 0 0; font-size: .92rem; font-style: italic; color: var(--inchiostro-2); }
.procedimento { margin-top: 44px; }
.procedimento__titolo { padding-bottom: 12px; border-bottom: 1px solid var(--inchiostro); font-size: clamp(2.2rem, 6vw, 3rem); line-height: 1.05; }

/* un passaggio */
.passo { padding: 40px 0 44px; border-bottom: 1px solid var(--riga); }
.passo:last-child { border-bottom: 0; }
.passo__testa { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: end; margin-bottom: 18px; }
.passo__numero { grid-row: span 3; align-self: start; min-width: .62em; font: 400 4.6rem/.82 var(--f-testo); color: var(--zafferano-grande); }
.passo__minuto { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 500 .72rem/1 var(--f-etichetta); letter-spacing: .12em; text-transform: uppercase; color: var(--inchiostro-2); }
.timer { width: 26px; height: 26px; flex: none; }
.timer__fondo { fill: none; stroke: var(--riga); stroke-width: 4; }
.timer__arco { fill: none; stroke: var(--zafferano); stroke-width: 4.4; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transform-box: fill-box; }
.passo__titolo { font-size: clamp(1.9rem, 5.4vw, 2.7rem); font-style: italic; line-height: 1.08; }
.passo__sotto { margin: 6px 0 0; font: 500 .74rem/1.4 var(--f-etichetta); letter-spacing: .12em; text-transform: uppercase; color: var(--pistillo); }
.passo__gesto { position: relative; margin: 0 0 18px; padding: 2px 0 2px 16px; border-left: 3px solid var(--zafferano); font-style: italic; font-size: 1.12rem; color: var(--inchiostro-2); }
.passo > p, .passo__coppia p { max-width: 38em; }
.passo__coppia { display: grid; gap: 22px; margin-top: 26px; }
.foto { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; line-height: 0; }
.foto img { display: block; width: 100%; height: auto; }
.foto-grande, .foto-alta { margin: 22px 0 0; }
.foto-alta { max-width: 420px; }
figcaption { margin-top: 8px; font: 400 .8rem/1.45 var(--f-etichetta); letter-spacing: .01em; color: var(--inchiostro-2); }
.nota { margin: 18px 0 0; font-size: .92rem; font-style: italic; color: var(--inchiostro-2); }

/* la citazione del brodo */
.citazione { margin: 24px 0 8px; padding: 0; }
.citazione p { margin: 0; font: italic 400 clamp(1.9rem, 5.5vw, 2.5rem)/1.12 var(--f-titolo); color: var(--inchiostro); }
.citazione p::before { content: ''; display: block; width: 44px; height: 3px; margin-bottom: 14px; background: var(--zafferano); }
.citazione footer { margin-top: 10px; font: 400 .8rem var(--f-etichetta); color: var(--inchiostro-2); }

/* i piatti dello zafferano */
.piatti { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; list-style: none; margin: 24px 0 0; padding: 0; }
.piatti li { min-width: 0; }
.piatti figure { margin: 0; }
.piatti .foto { aspect-ratio: 1 / 1; overflow: hidden; }
.piatti .foto img { width: 100%; height: 100%; object-fit: cover; }
.piatti__primo { grid-column: span 2; }
.piatti__primo .foto { aspect-ratio: 5 / 4; }
.piatti__primo .foto img { object-position: 50% 58%; }

/* le serate */
.serate { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; list-style: none; margin: 26px 0 0; padding: 0; }
.serate li { min-width: 0; }
.serate figure { margin: 0; }
.serate .foto { aspect-ratio: 4 / 5; overflow: hidden; }
.serate .foto img { width: 100%; height: 100%; object-fit: cover; }
.serate li:last-child .foto img { object-position: 50% 0; }

/* all'onda: le recensioni */
.onda__voto { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 20px; font: 500 .8rem var(--f-etichetta); letter-spacing: .06em; text-transform: uppercase; color: var(--inchiostro-2); }
.onda__voto b { font: 400 2.8rem/1 var(--f-testo); letter-spacing: 0; text-transform: none; color: var(--zafferano-testo); }
.recensioni { display: grid; gap: 14px; }
.recensione { margin: 0; padding: 18px 20px 16px; background: var(--carta-2); border-left: 3px solid var(--zafferano); }
.recensione p { margin: 0; font-size: 1.02rem; line-height: 1.55; }
.recensione footer { margin-top: 10px; font: 500 .76rem var(--f-etichetta); letter-spacing: .03em; color: var(--inchiostro-2); }
.taglio { color: var(--inchiostro-2); }
.onda__grazie { margin: 24px 0 0; font-style: italic; color: var(--inchiostro-2); }

/* ══════════ le note della ricetta: dove e quando ══════════ */
.dove { max-width: 1280px; margin: 0 auto; padding: 50px var(--gutter) 56px; border-top: 1px solid var(--inchiostro); }
.dove__occhiello { margin: 0 0 6px; font: 500 .74rem var(--f-etichetta); letter-spacing: .14em; text-transform: uppercase; color: var(--pistillo); }
.dove h2 { font-size: clamp(2.3rem, 7vw, 3.4rem); line-height: 1; }
.dove__griglia { display: grid; gap: 30px; margin-top: 26px; }
.dove__indirizzo { font: 400 1.4rem/1.25 var(--f-testo); }
.orari { width: 100%; max-width: 480px; margin: 18px 0 0; border-collapse: collapse; font: 400 .92rem/1.3 var(--f-etichetta); }
.orari caption { padding-bottom: 8px; text-align: left; font: 500 .7rem var(--f-etichetta); letter-spacing: .14em; text-transform: uppercase; color: var(--inchiostro-2); }
.orari th, .orari td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--riga); text-align: left; font-weight: 400; }
.orari thead th { font-size: .74rem; letter-spacing: .06em; color: var(--inchiostro-2); }
.orari tbody th { font-weight: 500; }
.orari tr.is-today { background: #F7E7C2; }
.orari tr.is-today th::after { content: ' ●'; color: var(--pistillo); font-size: .7rem; }
.orari__sera { margin: 10px 0 0; font-style: italic; }
.dove__contatti { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; }
.dove__social { margin-top: 18px; font: 500 .85rem var(--f-etichetta); }
.mappa { position: relative; aspect-ratio: 4 / 3; background: var(--carta-2); }
.mappa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(.8); }
.dove__foto { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.dove__foto figure { margin: 0; }
.dove__foto .foto { aspect-ratio: 1 / 1; overflow: hidden; }
.dove__foto .foto img { width: 100%; height: 100%; object-fit: cover; }
/* la facciata inquadrata a sinistra: la porta con l'insegna al centro, l'insegna della seconda vetrina del tutto fuori
   (al centro restava tagliata al 64%: ritagli-check) */
.dove__foto figure:last-child .foto img { object-position: 0 50%; }
.domande { max-width: 780px; margin-top: 40px; }
.domande h3 { font-size: 1.9rem; margin-bottom: 8px; }
.domande details { border-bottom: 1px solid var(--riga); }
.domande summary { padding: 14px 28px 14px 0; font: 500 .98rem/1.4 var(--f-etichetta); cursor: pointer; list-style: none; position: relative; }
.domande summary::-webkit-details-marker { display: none; }
.domande summary::after { content: '+'; position: absolute; right: 4px; top: 10px; font: 400 1.4rem var(--f-titolo); color: var(--pistillo); }
.domande details[open] summary::after { content: '–'; }
.domande details p { margin: 0 0 16px; }
.tag { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 34px 0 0; padding: 0; }
.tag li { padding: 7px 14px; border-radius: 999px; background: var(--glicine-chiaro); color: var(--glicine-scuro); font: 500 .8rem var(--f-etichetta); letter-spacing: .03em; }

/* ══════════ piede ══════════ */
.piede { padding: 40px var(--gutter) 44px; background: var(--legno); color: var(--crema); text-align: center; }
.piede a { color: var(--crema); }
.piede__marchio { display: inline-block; width: 150px; color: var(--crema); line-height: 0; }
.piede__marchio svg { width: 100%; height: auto; }
.piede__dove { margin: 20px 0 10px; font: 400 .9rem/1.5 var(--f-etichetta); }
.piede__cred { max-width: 640px; margin: 0 auto 16px; font: 400 .78rem/1.55 var(--f-etichetta); color: rgba(242, 239, 232, .78); }
.piede__su { font: 500 .8rem var(--f-etichetta); }

/* ══════════ lightbox (meccanica del plumbing) ══════════ */
#lightbox { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(28, 21, 17, .95); }
#lightbox[hidden] { display: none !important; }
#lightbox img { max-width: min(1300px, 100%); max-height: 88vh; width: auto; border-radius: 3px; }
#lightboxClose { position: absolute; top: 14px; right: 16px; width: 48px; height: 48px; border: 1px solid rgba(242, 239, 232, .6); border-radius: 50%; background: transparent; color: var(--crema); font-size: 32px; line-height: 1; cursor: pointer; }

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

/*RISOTTO*/
/* generato da _ong_risotto.mjs: le cinque tinte dei chicchi e lo stato d'attesa della firma */
.chicchi .k1 { fill: #ECB53A; }
.chicchi .k2 { fill: #E5A92D; }
.chicchi .k3 { fill: #F1C24E; }
.chicchi .k4 { fill: #DE9F22; }
.chicchi .k5 { fill: #F4C95E; }
.firma-attesa .chicchi .k1 { fill: #F4EFE2; }
.firma-attesa .chicchi .k2 { fill: #F1EADB; }
.firma-attesa .chicchi .k3 { fill: #F6F2E7; }
.firma-attesa .chicchi .k4 { fill: #EFE7D5; }
.firma-attesa .chicchi .k5 { fill: #F3EDDF; }
.firma-attesa .crema--gialla, .firma-attesa .pistillo { opacity: 0; }
/*/RISOTTO*/

/* il piatto (fisso, non generato) */
.piatto__ombra { fill: url(#g-ombra); }
.piatto__bordo { fill: url(#g-piatto); stroke: #E2DACB; stroke-width: 1.2; }
.piatto__filo { fill: none; stroke: var(--inchiostro); stroke-opacity: .22; stroke-width: 1.1; }
.piatto__fondo { fill: url(#g-fondo); }
.piatto__riflesso { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; opacity: .8; }
.crema--bianca { fill: url(#g-crema-bianca); }
.crema--gialla { fill: url(#g-crema-gialla); }
.risotto__volume { fill: url(#g-volume); pointer-events: none; }
.onda-luce { fill: url(#g-luce); opacity: 0; }
.pistillo__alone { fill: #D9861A; opacity: .42; }
.pistillo__filo { fill: none; stroke: var(--pistillo); stroke-width: 2.3; stroke-linecap: round; }
.pistillo__punta { fill: #A93A18; }

/* ══════════ larghezze ══════════ */
@media (max-width: 419px) {
  .testata { gap: 8px; }
  .marchio { width: 70px; }
  .testata__chiama { display: none; }
}
@media (min-width: 560px) {
  .info-ricetta { grid-template-columns: repeat(4, auto); justify-content: start; column-gap: 0; }
  .info-ricetta div { padding: 12px 22px 12px 0; margin-right: 22px; border-bottom: 0; border-right: 1px solid var(--riga); }
  .info-ricetta div:last-child { border-right: 0; margin-right: 0; }
  .piatti { grid-template-columns: repeat(3, 1fr); }
  /* il primo piatto occupa due colonne e due righe: l'altezza la danno le righe dei quadrati accanto, la foto riempie
     senza spingere (assoluta), così le righe non si allungano sulla sua misura naturale */
  .piatti__primo { grid-column: span 2; grid-row: span 2; }
  .piatti__primo figure { display: grid; grid-template-rows: 1fr auto; height: 100%; }
  .piatti__primo .foto { position: relative; aspect-ratio: auto; min-height: 260px; }
  .piatti__primo .foto img { position: absolute; inset: 0; }
  .serate { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 760px) {
  :root { --gutter: 32px; --testata-h: 76px; }
  .marchio { width: 112px; }
  .passo__coppia { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); align-items: start; }
  .passo__coppia .foto-alta { margin-top: 0; }
  .passo__coppia--lavagne { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
  .recensioni { grid-template-columns: 1fr 1fr; }
  .recensione:first-child { grid-column: span 2; }
  .dove__griglia { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 40px; }
}
@media (min-width: 1000px) {
  :root { --gutter: 48px; }
  .testa { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); grid-template-rows: auto auto auto auto auto 1fr; grid-template-areas: 'cat piatto' 'tit piatto' 'som piatto' 'info piatto' 'azioni piatto' 'stato piatto'; column-gap: 48px; align-items: start; padding-top: calc(var(--testata-h) + 54px); padding-bottom: 56px; }
  .piatto { align-self: center; width: min(100%, 500px); margin: 0; }
  .ricetta { display: grid; grid-template-columns: 320px minmax(0, 1fr); column-gap: 60px; align-items: start; }
  .ingredienti { align-self: stretch; }
  .ingredienti__dentro { position: sticky; top: calc(var(--testata-h) + 24px); }
  .procedimento { margin-top: 0; }
}
@media (min-width: 1180px) {
  .indice { display: flex; }
  .burger { display: none; }
  .testata__destra { margin-left: 6px; }
}

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