@font-face { font-family: 'Alfa Slab One'; src: url('/assets/fonts/alfa-slab-one-latin-400-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Barlow'; font-weight: 400; src: url('/assets/fonts/barlow-latin-400-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Barlow'; font-weight: 500; src: url('/assets/fonts/barlow-latin-500-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Barlow'; font-weight: 600; src: url('/assets/fonts/barlow-latin-600-normal.woff2') format('woff2'); font-display: swap; }

:root {
  --nero: #0a0908;
  --fondo-2: #171411;
  --fondo-3: #231e19;
  --crema: #f2ede3;
  --tenue: #c3b8a4;
  --senape: #eaa52b;
  --senape-scura: #2a1e12;
  --errore: #ff9d7a;
  --margine: clamp(16px, 3vw, 40px);
  --stacco: clamp(88px, 12vw, 176px);
  --display: 'Alfa Slab One', 'Rockwell Extra Bold', Georgia, serif;
  --testo: 'Barlow', system-ui, sans-serif;
  --t-enorme: clamp(40px, 13.7vw, 290px);
  --t-grande: clamp(40px, 6.4vw, 100px);
  --t-medio: clamp(26px, 3vw, 44px);
  --t-testo: clamp(17px, 1.25vw, 19px);
  --t-piccolo: 15px;
  --curva: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 130px; }
body { margin: 0; background: var(--nero); color: var(--crema); font: 400 var(--t-testo)/1.5 var(--testo); overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
a { color: inherit; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2 { font-family: var(--display); font-weight: 400; line-height: 1.02; letter-spacing: -.012em; text-wrap: balance; }
h3 { font-size: var(--t-piccolo); font-weight: 600; color: var(--senape); margin-top: 20px; }
::selection { background: var(--senape); color: var(--nero); }
:focus-visible { outline: 3px solid var(--senape); outline-offset: 3px; }
[hidden] { display: none !important; }

.salta { position: absolute; left: var(--margine); top: -60px; background: var(--senape); color: var(--nero); padding: 10px 16px; z-index: 20; }
.salta:focus { top: 8px; }
.nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.nota { color: var(--tenue); font-size: var(--t-piccolo); }
.errore { color: var(--errore); font-weight: 500; }

.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 12px 24px;
  background: var(--senape); color: var(--nero); border: 0; border-radius: 0; font-weight: 600; font-size: 18px; text-decoration: none;
  cursor: pointer; transition: transform .18s var(--curva), background-color .18s;
}
.bottone:hover { background: var(--crema); }
.bottone:active { transform: scale(.97); }
.bottone:disabled { opacity: .55; cursor: default; }
.bottone-piccolo { min-height: 44px; padding: 8px 16px; font-size: 16px; }
.bottone-largo { width: 100%; }
.bottone-scuro { background: var(--nero); color: var(--crema); }
.bottone-scuro:hover { background: var(--senape-scura); }
.bottone-secondario { background: var(--fondo-3); color: var(--crema); }
.bottone-secondario:hover { background: var(--crema); color: var(--nero); }

.testata { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 24px; padding: 10px var(--margine); background: var(--nero); }
.testata-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); font-size: 18px; }
.testata-logo img { width: 52px; height: 52px; }
.testata-nav { display: flex; gap: clamp(14px, 2vw, 32px); margin-left: auto; }
.testata-nav a, .testata-account { text-decoration: none; font-weight: 500; transition: color .15s; }
.testata-nav a:hover, .testata-account:hover { color: var(--senape); }
.testata-azioni { display: flex; align-items: center; gap: 16px; }

/* Eroe */
.eroe { display: grid; grid-template-columns: 1.9fr 1fr; gap: 8px; padding: 0 var(--margine) 8px; }
.eroe-nome { grid-column: 1 / -1; font-size: var(--t-enorme); line-height: .92; letter-spacing: -.035em; white-space: nowrap; text-align: center; color: var(--senape); padding: .04em 0 .1em; overflow: hidden; }
.eroe-foto { min-height: 0; overflow: hidden; }
.eroe-foto img { width: 100%; height: 100%; max-height: 66vh; object-fit: cover; object-position: 50% 62%; animation: respiro 26s ease-in-out infinite alternate; }
.eroe-lato { display: flex; flex-direction: column; justify-content: flex-end; gap: 20px; padding: clamp(20px, 3vw, 44px); background: var(--fondo-2); }
.eroe-frase { font-size: clamp(24px, 2.3vw, 36px); line-height: 1.16; font-weight: 500; }
.eroe-stato { color: var(--crema); font-size: 17px; }
.eroe-marchio { width: clamp(120px, 12vw, 190px); height: auto; margin-bottom: auto; }
@keyframes respiro { from { transform: scale(1); } to { transform: scale(1.06); } }

/* Nastro */
.nastro { overflow: hidden; background: var(--senape); color: var(--nero); }
.nastro-corsa { display: flex; width: max-content; gap: 48px; padding: 12px 0; font-family: var(--display); font-size: clamp(24px, 3vw, 44px); animation: corsa 46s linear infinite; }
@keyframes corsa { to { transform: translateX(-33.333%); } }

/* Menu in lista */
.menu-lista { padding: var(--stacco) var(--margine) 0; }
.menu-lista h2 { font-size: var(--t-grande); max-width: 15em; margin-bottom: clamp(40px, 6vw, 88px); }
.menu-lista li { background: var(--nero); transition: background-color .2s; }
.menu-lista li + li { margin-top: 8px; }
.menu-lista a { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) auto 180px; gap: 24px; align-items: center; min-height: 136px; padding: 0 0 0 clamp(16px, 2vw, 28px); background: var(--fondo-2); text-decoration: none; transition: background-color .2s, color .2s; }
.menu-lista a:hover { background: var(--senape); color: var(--nero); }
.riga-nome { font-family: var(--display); font-size: var(--t-medio); line-height: 1.04; }
.riga-prezzo { font-weight: 600; white-space: nowrap; }
.menu-lista img { width: 180px; height: 136px; object-fit: cover; }

/* Pannelli foto */
.pannelli { padding: var(--stacco) var(--margine) 0; }
.pannelli h2 { font-size: var(--t-grande); margin-bottom: clamp(32px, 5vw, 72px); max-width: 15em; }
.pannelli-riga { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 8px; align-items: end; }
.pannelli img { width: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.pannelli .p-grande img { aspect-ratio: 5 / 6; }
figcaption { color: var(--tenue); font-size: var(--t-piccolo); padding-top: 8px; }

/* Invito a comporre */
.crea-invito { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; margin-top: var(--stacco); padding: clamp(40px, 6vw, 88px) var(--margine); background: var(--senape); color: var(--nero); align-items: center; }
.crea-invito h2 { font-size: var(--t-grande); margin-bottom: 20px; }
.crea-invito p { max-width: 34em; margin-bottom: 28px; font-weight: 500; font-size: 20px; }
.crea-invito-pila { display: grid; justify-items: center; gap: 6px; }
.crea-invito-pila img { width: min(320px, 70%); height: auto; }

/* Venerdì */
.venerdi { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: end; padding: var(--stacco) var(--margine) 0; }
.venerdi-giorno { font-family: var(--display); font-size: clamp(54px, 7.6vw, 140px); line-height: .94; color: var(--senape); }
.venerdi h2 { font-size: var(--t-medio); margin-bottom: 14px; }
.venerdi p:not(.venerdi-giorno) { margin-bottom: 20px; }
.venerdi img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Asporto */
.asporto { padding: var(--stacco) var(--margine) 0; }
.asporto h2 { font-size: var(--t-grande); margin-bottom: clamp(32px, 5vw, 64px); }
.asporto ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.asporto li { padding: clamp(20px, 2.4vw, 36px); background: var(--fondo-2); }
.asporto li:nth-child(2) { background: var(--fondo-3); }
.asporto strong { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2vw, 30px); line-height: 1.08; margin-bottom: 12px; color: var(--senape); }

/* Dove siamo */
.dove { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 4vw, 64px); padding: var(--stacco) var(--margine) var(--stacco); align-items: center; }
.dove img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 80%; }
.dove h2 { font-size: var(--t-grande); margin-bottom: 16px; }
.dove-indirizzo { font-size: 22px; font-weight: 500; margin-bottom: 20px; }
.orari { border-collapse: collapse; width: 100%; max-width: 480px; margin-bottom: 20px; }
.orari th { text-align: left; font-weight: 500; padding: 5px 16px 5px 0; }
.orari td { text-align: right; padding: 5px 0; font-variant-numeric: tabular-nums; }
.dove-telefono { display: inline-block; font-family: var(--display); font-size: clamp(30px, 4.2vw, 64px); color: var(--senape); text-decoration: none; }

/* Piede */
.piede { background: var(--senape); color: var(--nero); padding: clamp(40px, 5vw, 72px) var(--margine) 0; overflow: hidden; }
.piede-colonne { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; font-weight: 500; }
.piede h2 { font-family: var(--testo); font-weight: 600; font-size: 18px; margin-bottom: 12px; }
.piede li + li, .piede p + p { margin-top: 6px; }
.piede-nome { font-family: var(--display); font-size: var(--t-enorme); line-height: .9; letter-spacing: -.035em; white-space: nowrap; text-align: center; margin-top: 48px; padding-bottom: .06em; }

/* Pagine categoria */
.subnav { position: sticky; top: 72px; z-index: 9; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 8px var(--margine); background: var(--nero); }
.subnav a { flex: none; padding: 8px 14px; min-height: 44px; display: flex; align-items: center; background: var(--fondo-2); text-decoration: none; font-weight: 500; transition: background-color .15s; }
.subnav a:hover { background: var(--fondo-3); }
.subnav a[aria-current] { background: var(--senape); color: var(--nero); }
.cat-testa { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; padding: clamp(40px, 6vw, 88px) var(--margine) clamp(40px, 5vw, 72px); }
.cat-testa h1 { font-size: var(--t-grande); color: var(--senape); margin-bottom: 16px; }
.cat-testa p { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.3; max-width: 32em; }
.disegno { width: auto; height: clamp(96px, 13vw, 200px); }

.prodotti { display: grid; gap: clamp(56px, 8vw, 120px); padding: 0 var(--margine); }
.prodotto { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; scroll-margin-top: 140px; }
.prodotto-inverso figure { order: 2; }
.prodotto figure { overflow: hidden; }
.prodotto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s var(--curva); }
.prodotto:hover img { transform: scale(1.025); }
.prodotto-riga { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; }
.prodotto h2 { font-size: clamp(30px, 3.7vw, 60px); }
.prezzo { font-family: var(--display); font-size: clamp(22px, 2.3vw, 34px); color: var(--senape); white-space: nowrap; }
.allergeni div { display: flex; gap: 10px; }
.allergeni dt { flex: none; font-weight: 600; }
.allergeni dt::after { content: ':'; }
.prodotto .bottone { margin-top: 24px; }
.scelta-contorno { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px; }
.scelta-contorno legend { font-size: var(--t-piccolo); font-weight: 600; color: var(--senape); margin-bottom: 4px; }
.scelta-contorno label { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; cursor: pointer; }
input[type='radio'], input[type='checkbox'] { accent-color: var(--senape); width: 20px; height: 20px; margin: 0; flex: none; }

.crea-esempi { padding: var(--stacco) var(--margine) 0; }
.crea-esempi h2 { font-size: var(--t-grande); margin-bottom: clamp(24px, 4vw, 56px); }
.crea-esempi-riga { display: grid; grid-template-columns: 1.3fr 1fr 1.3fr; gap: 8px; align-items: end; }
.crea-esempi img { width: 100%; aspect-ratio: 1; object-fit: cover; }

.nota-allergeni { display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px; margin: var(--stacco) var(--margine); padding: clamp(24px, 3vw, 44px); background: var(--fondo-2); }
.nota-allergeni h2 { font-size: var(--t-medio); }

/* Configuratori */
.crea { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 4vw, 64px); padding: 0 var(--margine); align-items: start; }
.crea-scelte { display: grid; gap: 40px; }
legend { font-family: var(--display); font-size: var(--t-medio); margin-bottom: 12px; }
.opzione { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; min-height: 54px; padding: 8px 16px; background: var(--fondo-2); cursor: pointer; transition: background-color .15s, color .15s; margin-bottom: 4px; }
.opzione:hover { background: var(--fondo-3); }
.opzione:has(input:checked) { background: var(--senape); color: var(--nero); font-weight: 600; }
.opzione input { accent-color: var(--nero); }
.prezzo-opzione { white-space: nowrap; font-variant-numeric: tabular-nums; }
.crea-riepilogo, .pasta-riepilogo { position: sticky; top: 136px; display: grid; gap: 14px; padding: clamp(20px, 2.4vw, 32px); background: var(--fondo-2); }
.pila { display: grid; justify-items: center; gap: 3px; min-height: 180px; align-content: center; }
.pila img { width: min(240px, 66%); height: auto; max-height: 76px; object-fit: contain; }
.pila img:nth-child(n + 8) { max-height: 34px; }
.strato-nuovo { animation: cade .34s var(--curva); }
@keyframes cade { from { transform: translateY(-26px); opacity: 0; } }
.crea-totale { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-weight: 500; font-size: 20px; }
.crea-totale strong { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 3vw, 44px); color: var(--senape); white-space: nowrap; }
.crea-elenco { font-size: var(--t-piccolo); color: var(--tenue); }

.pasta { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; padding: 0 var(--margine); }
.pasta-formati { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.pasta-formati legend { width: 100%; }
.etichetta-scelta { cursor: pointer; }
.etichetta-scelta input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.etichetta-scelta span { display: flex; align-items: center; min-height: 54px; padding: 8px 20px; background: var(--fondo-2); font-weight: 500; transition: background-color .15s; }
.etichetta-scelta:hover span { background: var(--fondo-3); }
.etichetta-scelta input:checked + span { background: var(--senape); color: var(--nero); font-weight: 600; }
.etichetta-scelta input:focus-visible + span { outline: 3px solid var(--crema); outline-offset: 2px; }
.pasta-salse { grid-column: 1 / 9; display: grid; gap: 6px; }
.salsa { display: grid; grid-template-columns: auto 180px 1fr; gap: 16px; align-items: center; padding-right: 16px; background: var(--fondo-2); cursor: pointer; transition: background-color .15s, color .15s; }
.salsa input { margin-left: 16px; }
.salsa img { width: 180px; height: 128px; object-fit: cover; }
.salsa-testo { display: grid; }
.salsa-testo strong { font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1.1; }
.salsa small { font-size: 14px; color: var(--tenue); }
.salsa:has(input:checked) { background: var(--senape); color: var(--nero); }
.salsa:has(input:checked) small { color: var(--senape-scura); }
.salsa:has(input:checked) input { accent-color: var(--nero); }
.pasta-riepilogo { grid-column: 9 / -1; align-self: start; }

/* Tabella allergeni */
.tabella-scorri { overflow-x: auto; margin: 0 var(--margine); }
.matrice { border-collapse: collapse; min-width: 980px; width: 100%; font-size: 16px; }
.matrice th, .matrice td { padding: 7px 6px; text-align: center; }
.matrice thead th { font-weight: 600; vertical-align: bottom; height: 130px; background: var(--nero); }
.matrice thead th span { writing-mode: vertical-rl; transform: rotate(180deg); }
.matrice thead th:first-child, .matrice tbody th { text-align: left; }
.matrice tbody th { font-weight: 500; min-width: 240px; position: sticky; left: 0; background: var(--nero); }
.matrice tbody tr:nth-child(even) td, .matrice tbody tr:nth-child(even) th { background: var(--fondo-2); }
.matrice td span { color: var(--senape); font-size: 18px; }
.matrice .gruppo th { position: static; font-family: var(--display); font-weight: 400; font-size: 22px; padding-top: 28px; background: var(--nero) !important; color: var(--senape); }

/* Contatti */
.contatti { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(24px, 4vw, 64px); padding: clamp(40px, 6vw, 88px) var(--margine) 0; align-items: center; }
.contatti h1 { font-size: var(--t-grande); color: var(--senape); margin-bottom: 28px; }
.contatti p { margin-top: 16px; }
.contatti img { width: 100%; }
.contatti-foto { display: grid; grid-template-columns: 1fr 1.3fr 1.3fr; gap: 8px; padding: var(--stacco) var(--margine); align-items: end; }
.contatti-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Pagine applicative */
.app-pagina { padding: clamp(40px, 6vw, 80px) var(--margine) var(--stacco); max-width: 1120px; margin-inline: auto; min-height: 60vh; }
.app-pagina h1 { font-size: var(--t-grande); color: var(--senape); margin-bottom: clamp(24px, 4vw, 48px); }
.app-pagina h2 { font-size: var(--t-medio); margin-bottom: 14px; }
.app-pagina form { display: grid; gap: 14px; align-content: start; }
label { display: grid; gap: 6px; font-weight: 500; }
input:not([type='radio'], [type='checkbox']), select, textarea { width: 100%; min-height: 52px; padding: 10px 14px; background: var(--fondo-3); border: 0; border-radius: 0; color: var(--crema); font-size: 18px; }
input:not([type='radio'], [type='checkbox']):focus, select:focus, textarea:focus { outline: 3px solid var(--senape); outline-offset: 0; }
.spunta { display: flex; gap: 10px; align-items: center; min-height: 44px; }
.accedi-colonne { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.accedi-colonne form { padding: clamp(20px, 3vw, 36px); background: var(--fondo-2); }
.carrello { display: grid; gap: 6px; }
.carrello li { display: grid; grid-template-columns: 1fr auto 96px; gap: 16px; align-items: center; padding: 12px 16px; background: var(--fondo-2); }
.carrello small { display: block; color: var(--tenue); font-size: var(--t-piccolo); }
.quantita { display: flex; align-items: center; gap: 4px; }
.quantita button { width: 44px; height: 44px; background: var(--fondo-3); border: 0; font-size: 22px; cursor: pointer; transition: background-color .15s; }
.quantita button:hover { background: var(--senape); color: var(--nero); }
.quantita span { min-width: 28px; text-align: center; font-variant-numeric: tabular-nums; }
.carrello-prezzo { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.carrello-totale { display: flex; justify-content: space-between; align-items: baseline; padding: 20px 16px; font-size: 22px; font-weight: 500; }
.carrello-totale strong { font-family: var(--display); font-weight: 400; font-size: clamp(30px, 4vw, 52px); color: var(--senape); }
.prenota, .accesso-richiesto { padding: clamp(20px, 3vw, 36px); background: var(--fondo-3); display: grid; gap: 14px; justify-items: start; }
.prenota > *, .prenota label { width: 100%; }
.prenota select, .prenota textarea { background: var(--nero); }
.conferma { padding: clamp(24px, 4vw, 48px); background: var(--senape); color: var(--nero); display: grid; gap: 14px; justify-items: start; }
.conferma-codice { font-family: var(--display); font-size: clamp(36px, 6vw, 72px); line-height: 1; }
.conferma .bottone { background: var(--nero); color: var(--crema); }
.ordini { display: grid; gap: 8px; }
.ordine { padding: 18px 20px; background: var(--fondo-2); display: grid; gap: 6px; justify-items: start; }
.ordine > * { width: 100%; }
.ordine .bottone { width: auto; }
.ordine-testa { display: flex; justify-content: space-between; gap: 12px; font-size: 20px; }
.ordine-testa strong { font-family: var(--display); font-weight: 400; color: var(--senape); }
.stato-annullato, .stato-ritirato { opacity: .68; }
.stato-pronto .stato { color: var(--senape); font-weight: 600; }
.account-azioni { display: flex; flex-wrap: wrap; gap: 24px; align-items: start; margin-top: 40px; }
.account-azioni details { flex: 1 1 320px; }
summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 500; }
.staff { max-width: none; }
.avviso-fermo { position: sticky; top: 0; z-index: 8; margin-top: 16px; padding: 16px 20px; background: var(--errore); color: var(--nero); font-size: 20px; font-weight: 600; line-height: 1.3; }
.staff-colonne { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: start; margin-top: 20px; }
.staff-colonne section { display: grid; gap: 8px; }
.staff-colonne small { display: block; color: var(--tenue); }
.ordine-nota { background: var(--senape); color: var(--nero); padding: 6px 10px; font-weight: 600; }
.ordine-azioni { display: flex; flex-wrap: wrap; gap: 8px; }
.testo { max-width: 780px; }
.testo h2 { margin-top: 32px; }
.testo p, .testo li { margin-top: 10px; }

.avviso { position: fixed; left: 50%; bottom: 16px; translate: -50% 0; z-index: 30; width: min(560px, calc(100vw - 32px)); padding: 14px 18px; background: var(--crema); color: var(--nero); font-weight: 500; box-shadow: 0 8px 32px rgb(0 0 0 / .5); animation: sale .25s var(--curva); }
@keyframes sale { from { transform: translateY(12px); opacity: 0; } }

.da-entrare { opacity: 0; transform: translateY(24px); transition: opacity .55s var(--curva) var(--ritardo, 0ms), transform .55s var(--curva) var(--ritardo, 0ms); }
.da-entrare.entrato { opacity: 1; transform: none; }

@media (max-width: 1000px) {
  .testata { position: static; flex-wrap: wrap; row-gap: 4px; }
  .testata-azioni { margin-left: auto; }
  .testata-nav { order: 3; width: 100%; margin: 0; justify-content: space-between; }
  .testata-nav a { min-height: 44px; display: flex; align-items: center; }
  .subnav { top: 0; }
  .crea-riepilogo, .pasta-riepilogo { top: 0; }
  .menu-lista a { grid-template-columns: minmax(0, 1fr) 120px; gap: 4px 16px; min-height: 120px; padding-block: 0; }
  .menu-lista img { grid-row: 1 / 4; grid-column: 2; width: 120px; height: 100%; min-height: 120px; }
  .riga-nome { padding-top: 12px; }
  .riga-prezzo { padding-bottom: 12px; }
  .crea, .prodotto, .dove, .contatti, .crea-invito, .nota-allergeni, .venerdi { grid-template-columns: 1fr; }
  .crea-riepilogo { position: static; }
  .prodotto-inverso figure { order: 0; }
  .pasta-salse, .pasta-riepilogo { grid-column: 1 / -1; }
  .pasta-riepilogo { position: static; }
  .staff-colonne { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  html { scroll-padding-top: 130px; }
  .testata { gap: 10px; }
  .testata-logo span { display: none; }
  .eroe { grid-template-columns: 1fr; }
  .eroe-marchio { display: none; }
  .eroe-foto img { max-height: none; aspect-ratio: 4 / 3; }
  .pannelli-riga { grid-template-columns: 1fr 1fr; }
  .pannelli .p-grande { grid-column: 1 / -1; }
  .crea-esempi-riga { grid-template-columns: 1fr 1fr; }
  .crea-esempi-riga figure:first-child { grid-column: 1 / -1; }
  .asporto ol, .piede-colonne, .accedi-colonne, .contatti-foto { grid-template-columns: 1fr; }
  .salsa { grid-template-columns: auto 104px 1fr; gap: 12px; padding-right: 10px; }
  .salsa img { width: 104px; height: 104px; }
  .salsa-testo strong { font-size: 20px; }
  .cat-testa { grid-template-columns: 1fr; }
  .disegno { display: none; }
  .carrello li { grid-template-columns: 1fr auto; }
  .carrello-prezzo { grid-column: 1 / -1; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .eroe-foto img, .nastro-corsa, .strato-nuovo, .avviso { animation: none; }
  .da-entrare { opacity: 1; transform: none; transition: none; }
  .bottone, .prodotto img { transition: none; }
}