/* Nuovo sito Pizzeria Gastronomia Jolly — mobile first, nessuna dipendenza esterna. */

:root {
    --rosso: #c8242c;
    --rosso-scuro: #8e181e;
    --oro: #e8b53a;
    --oro-scuro: #d4a02c;
    --verde: #1f7a44;
    --crema: #c19a5c;
    --carta: #ffffff;
    --testo: #23201d;
    --muted: #7a716a;
    --muted-scuro: #3a3229;
    --bordo: #e7ddd0;
    --ombra: 0 2px 10px rgba(35, 32, 29, .08);
}

* { box-sizing: border-box; }

/* alcuni elementi (.pizza, righe di .listino) impostano "display" esplicitamente: senza
   !important l'attributo "hidden" non li nasconderebbe davvero (l'author style vince sempre
   sul default del browser, a parita' di specificita') */
[hidden] { display: none !important; }

/* sfondo: beige scuro pieno + pizzette bianche (crosta irregolare a mano libera, non un cerchio
   con gli spicchi: sennò sembra una ruota) sparse come texture a bassa opacita' — mai sotto le
   card, che restano su var(--carta) bianco pieno: qui e' solo lo sfondo della pagina.
   SVG inline invece di un file: una texture non merita una richiesta HTTP in piu', e restando
   qui in css/jolly.css si aggiorna con lo stesso deploy di tutto il resto. */
body {
    margin: 0;
    background-color: var(--crema);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Cg fill='none' stroke='%23ffffff' stroke-linejoin='round' stroke-linecap='round' opacity='.3'%3E%3Cg transform='translate(31,33) rotate(-10)'%3E%3Cpath stroke-width='2.4' d='M20.5 -4.2 Q23.6 0.0 20.4 4.2 Q17.3 8.3 16.2 13.6 Q15.0 18.8 9.6 18.5 Q4.1 18.1 -0.4 20.0 Q-5.0 21.9 -8.1 18.0 Q-11.2 14.1 -16.1 12.1 Q-20.9 10.1 -20.4 5.0 Q-19.8 0.0 -20.6 -5.2 Q-21.4 -10.3 -16.5 -12.4 Q-11.5 -14.4 -8.2 -18.1 Q-5.0 -21.8 -0.4 -20.2 Q4.2 -18.5 9.4 -18.4 Q14.7 -18.4 16.1 -13.4 Q17.5 -8.4 20.5 -4.2 Z'/%3E%3Ccircle cx='6' cy='-6' r='2.6' fill='%23ffffff' stroke='none'/%3E%3Ccircle cx='-8' cy='1' r='2.1' fill='%23ffffff' stroke='none'/%3E%3Ccircle cx='1' cy='9' r='2.4' fill='%23ffffff' stroke='none'/%3E%3Ccircle cx='-4' cy='-10' r='1.8' fill='%23ffffff' stroke='none'/%3E%3Ccircle cx='10' cy='3' r='1.9' fill='%23ffffff' stroke='none'/%3E%3Ccircle cx='-12' cy='-6' r='1.6' fill='%23ffffff' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(99,95) rotate(24)'%3E%3Cpath stroke-width='2' d='M16.4 2.4 Q13.6 5.8 13.2 10.2 Q12.8 14.6 8.5 14.7 Q4.2 14.8 0.3 17.3 Q-3.5 19.7 -5.9 15.6 Q-8.3 11.5 -12.3 10.2 Q-16.3 8.9 -15.5 4.8 Q-14.6 0.7 -16.0 -3.3 Q-17.5 -7.4 -13.9 -9.6 Q-10.3 -11.7 -7.8 -15.3 Q-5.3 -18.9 -1.4 -16.3 Q2.4 -13.8 6.7 -14.5 Q11.0 -15.3 12.1 -11.2 Q13.2 -7.2 16.2 -4.0 Q19.2 -0.9 16.4 2.4 Z'/%3E%3Ccircle cx='4' cy='-5' r='2.2' fill='%23ffffff' stroke='none'/%3E%3Ccircle cx='-7' cy='2' r='1.9' fill='%23ffffff' stroke='none'/%3E%3Ccircle cx='0' cy='7' r='2.1' fill='%23ffffff' stroke='none'/%3E%3Ccircle cx='-3' cy='-8' r='1.5' fill='%23ffffff' stroke='none'/%3E%3Ccircle cx='8' cy='2' r='1.6' fill='%23ffffff' stroke='none'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    color: var(--testo);
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.5;
}

a { color: var(--rosso); }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.centro { text-align: center; }
.muted { color: var(--muted); font-size: 14px; }
/* come .muted ma per il testo appoggiato direttamente sullo sfondo pagina (beige scuro): li' il
   grigio-marrone normale di --muted si legge appena (contrasto ~1.8:1 contro il beige). Sulle
   card bianche invece --muted va benissimo cosi' com'e' (badge, ingredienti, descrizione
   prodotto...) e resta immutato. */
.muted-scuro { color: var(--muted-scuro); font-size: 14px; }

/* --- avviso --- */
.avviso {
    background: #ffe9a8;
    color: #5a4300;
    padding: 10px 16px;
    text-align: center;
    font-weight: 600;
}

/* --- header --- */
/* overflow: il bollino anniversario che arriva "timbrato" (ingrandito) non deve far scorrere la pagina di lato */
.top { background: var(--carta); border-bottom: 1px solid var(--bordo); box-shadow: var(--ombra); overflow: hidden; overflow: clip; }
.top-in { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }

.logo { text-decoration: none; color: var(--testo); display: flex; align-items: center; gap: 10px; line-height: 1.2; }
/* width/height nell'HTML riservano lo spazio (niente salto al caricamento); qui l'altezza reale */
.logo-img { display: block; height: 100px; width: auto; }
/* Caveat grassetto (Google Fonts, licenza OFL in fonts/), caricato dal sito: identico su tutti i
   dispositivi. Solo latino + accenti, per restare leggero. */
@font-face {
    font-family: "Caveat Jolly";
    src: url("../fonts/caveat-bold.woff") format("woff");
    font-weight: 700;
    font-display: swap;
}
/* 49px con interlinea .95 = da "Pizzeria" a "Gastronomia" alta 84px (misurato a video), il logo
   un po' piu' grande (100px); sui telefoni scende col logo */
.logo-sub { font-family: "Caveat Jolly", "Segoe Script", cursive; font-size: 49px; line-height: .95; font-weight: 700; text-transform: capitalize; color: var(--rosso); }
/* slogan sotto il logo (campo "Slogan" della tab Sito di jpizza): scuro e in grassetto perche'
   risalti; largo al massimo 440px (2 righe) cosi' non spinge via il menu, e mai oltre lo schermo */
.marchio { display: flex; flex-direction: column; gap: 8px; }
.slogan { max-width: min(440px, calc(100vw - 32px)); margin: 0; font-size: clamp(15px, 3.8vw, 16px); line-height: 1.35; font-weight: 600; font-style: italic; color: var(--testo); }
.marchio-riga { display: flex; align-items: center; gap: 16px; }

/* --- bollino anniversario accanto al logo (anni calcolati in Site.master.vb) ---
   sigillo rosso a 28 punte che gira piano, "28" a mano, nastro dorato "ANNI", un riflesso di
   luce ogni tanto; la prima volta nella sessione arriva timbrato e conta (js/jolly.js) */
.anniv { flex: none; line-height: 0; }
.anniv-svg { display: block; height: 84px; width: auto; overflow: visible; }
.anniv-bordo { fill: var(--rosso); transform-box: fill-box; transform-origin: center; animation: anniv-gira 40s linear infinite; }
.anniv-fondo { fill: #fff8ec; stroke: #e0a526; stroke-width: 2.5; }
.anniv-cucitura { fill: none; stroke: var(--rosso); stroke-width: .9; stroke-dasharray: 2.2 1.8; opacity: .55; }
.anniv-num { font-family: "Caveat Jolly", "Segoe Script", cursive; font-weight: 700; font-size: 46px; fill: var(--rosso); text-anchor: middle; }
.anniv-luce { fill: #fff; opacity: .65; transform: translateX(-80px); animation: anniv-luce 7s ease-in-out 1.5s infinite; }
.anniv-nastro { fill: var(--oro); }
.anniv-coda { fill: #c9941f; }
.anniv-piega { fill: #8a6414; }
.anniv-scritta { font: 700 13px "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: 2.5px; fill: var(--rosso-scuro); text-anchor: middle; }
.anniv.entra { animation: anniv-timbro .8s cubic-bezier(.2, .9, .3, 1.3) .15s both; }
@keyframes anniv-gira { to { transform: rotate(360deg); } }
@keyframes anniv-luce { 0% { transform: translateX(-80px); } 22%, 100% { transform: translateX(80px); } }
@keyframes anniv-timbro {
    0% { transform: scale(1.8) rotate(-30deg); opacity: 0; }
    55% { transform: scale(.9) rotate(6deg); opacity: 1; }
    75% { transform: scale(1.06) rotate(-3deg); }
    100% { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .anniv-bordo, .anniv.entra { animation: none; }
    .anniv-luce { display: none; }
    .btn-ordina { transition: none; }
    .btn-ordina:hover { transform: none; }
}

.nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.nav a { text-decoration: none; color: var(--testo); font-weight: 600; }
.nav a:hover { color: var(--rosso); }

.stato { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.badge { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; color: #fff; }
.badge.aperto { background: var(--verde); }
.badge.chiuso { background: #8a8078; }
.badge.sospeso { background: #d98324; }
.badge-nota { font-size: 12px; color: var(--muted); }

/* --- bottoni --- */
.btn-ordina, .btn-tel, .btn-ghost, .btn-wa {
    display: inline-block; text-decoration: none; font-weight: 700;
    padding: 9px 18px; border-radius: 999px; white-space: nowrap;
}
/* CTA principale: oro come il nastro del bollino anniversario, cosi' non sparisce accanto al
   rosso del logo che ha di fianco nell'intestazione; piu' grande dei link del menu e con ombra,
   perche' si legga come un pulsante e non come l'ennesimo link. */
.btn-ordina {
    background: var(--oro); color: var(--rosso-scuro);
    padding: 13px 26px; font-size: 17px;
    box-shadow: 0 3px 10px rgba(35, 32, 29, .2);
    transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.btn-ordina:hover {
    background: var(--oro-scuro);
    box-shadow: 0 6px 16px rgba(35, 32, 29, .26);
    transform: translateY(-1px);
}
.btn-tel { background: #fff; color: var(--testo); border: 2px solid var(--bordo); }
.btn-wa { background: #25d366; color: #06301a; }
.btn-ghost { border: 2px solid var(--rosso); color: var(--rosso); }
.grande { padding: 13px 28px; font-size: 17px; }

/* h1 della home: solo per lettori di schermo e motori di ricerca, a video ci sono gia' logo e slogan */
.solo-lettori {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- sezioni --- */
/* Tutte le sezioni del menu (pizze del mese, classiche, speciali, altre) hanno lo stesso
   fondo pagina: la sezione .pdm aveva un beige proprio e spiccava come se fosse un'altra cosa. */
.sez { padding: 34px 0; }
.sez h2 { font-size: 26px; margin: 0 0 18px; }

/* --- vetrina foto in home --- */
.vetrina {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
}

.scheda {
    display: flex;
    flex-direction: column;
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--ombra);
    color: var(--testo);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}
.scheda:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(35, 32, 29, .16); }

.scheda-foto {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: #1d2b33;
}

/* pizza senza foto: riquadro colorato con il nome, cosi' la griglia resta regolare */
.segnaposto {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: linear-gradient(135deg, var(--rosso) 0%, var(--rosso-scuro) 100%);
    color: #fff;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
    text-transform: capitalize;
}

/* min-width:0 + overflow-wrap: un flex item di default non si restringe mai sotto la
   larghezza del suo contenuto — un nome lungo senza spazi spingerebbe la card oltre i suoi
   bordi invece di andare a capo. flex-wrap sulla riga fa scendere il prezzo se proprio non c'e' posto. */
.scheda-testo { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; flex: 1; min-width: 0; }
.scheda-riga { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px; }
.scheda h3 { margin: 0; font-size: 17px; text-transform: capitalize; min-width: 0; overflow-wrap: break-word; }
.scheda .prezzo { font-weight: 800; color: var(--rosso); white-space: nowrap; }
.scheda .ingr { margin: 0; color: var(--muted); font-size: 14px; overflow-wrap: break-word; }
.scheda.esaurita { opacity: .6; }

.etichetta {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--verde);
}

/* --- striscia "In negozio": prodotti in vendita in pizzeria ---
   Una riga sola che si sfoglia di lato: scroll-snap perche' il dito si fermi sempre su una
   scheda intera. La larghezza fissa (200px) e' scelta perche' su un telefono se ne veda una e
   mezza: se entrassero tutte e intere nessuno capirebbe che continua. */
.negozio { background: #fff8ec; border-top: 1px solid var(--bordo); border-bottom: 1px solid var(--bordo); }
.negozio-nota { margin: -12px 0 16px; color: var(--muted); font-size: 14px; }

.striscia {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* la barra di scorrimento non deve mangiarsi l'ombra delle schede */
    padding-bottom: 10px;
    scrollbar-width: thin;
}

.prod {
    flex: 0 0 200px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--ombra);
}
.prod-foto { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #f0e6d6; }

/* prodotto senza foto: riquadro col nome a mano, in tinta col nastro dell'anniversario — mai
   un'immagine rotta, e la scheda resta alta come le altre */
.prod-senza-foto {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    text-align: center;
    font-family: "Caveat Jolly", "Segoe Script", cursive;
    font-size: 30px;
    line-height: 1.05;
    color: var(--rosso-scuro);
    background: linear-gradient(135deg, #f7e3b8 0%, var(--oro) 100%);
}

.prod-testo { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; flex: 1; }
.prod-testo h3 { margin: 0; font-size: 17px; overflow-wrap: break-word; }
.prod-descr { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.35; overflow-wrap: break-word; }
/* il prezzo in fondo alla scheda: allineato anche se le descrizioni sono lunghe diverse */
.prod .prezzo { margin-top: auto; padding-top: 4px; font-weight: 800; color: var(--rosso-scuro); }

/* --- scheda dettaglio pizza --- */
.briciole { padding: 20px 0 0; }

.dettaglio-sez { padding-top: 12px; }
.dettaglio {
    display: grid;
    grid-template-columns: minmax(0, 420px) 1fr;
    gap: 32px;
    align-items: start;
}

.dettaglio-foto {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: var(--ombra);
}
.dettaglio-foto.segnaposto {
    font-size: 34px;
    border-radius: 14px;
}

.dettaglio-testo h1 { margin: 6px 0 4px; font-size: 30px; text-transform: capitalize; }
.dettaglio-prezzo { font-size: 24px; font-weight: 800; color: var(--rosso); margin: 0 0 8px; }
.dettaglio-testo h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 18px 0 6px; }
.dettaglio-ingr { font-size: 17px; margin: 0; }
.dettaglio-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

@media (max-width: 700px) {
    .dettaglio { grid-template-columns: 1fr; gap: 18px; }
    .dettaglio-testo h1 { font-size: 26px; }
}

/* --- griglia pizze e bibite (menu) ---
   .bibita ha la stessa card di .pizza: cambia solo cosa ci sta dentro (formato invece degli
   ingredienti, e nessun badge esaurita, perche' le bibite non hanno quello stato). */
.griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }

.pizza, .bibita {
    background: var(--carta); border: 1px solid var(--bordo); border-radius: 10px;
    padding: 14px; box-shadow: var(--ombra); display: flex; flex-direction: column; gap: 8px;
}
.pizza header, .bibita header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pizza h3, .bibita h3 { margin: 0; font-size: 17px; text-transform: capitalize; }
.pizza .prezzo, .bibita .prezzo { font-weight: 800; color: var(--rosso); white-space: nowrap; }
.pizza .ingr, .bibita .ingr { margin: 0; color: var(--muted); font-size: 14px; flex: 1; }
.pizza.esaurita { opacity: .55; }

.badge-esaurita {
    align-self: flex-start;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    background: #eee6da; color: #6b5f52; padding: 3px 8px; border-radius: 999px;
}

/* --- listino (aggiunte: sono tante e corte, la card le farebbe sembrare piatti) --- */
.listino { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 28px; }
.listino li {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 7px 0; border-bottom: 1px dashed var(--bordo); break-inside: avoid;
}
.listino li.esaurita { opacity: .5; }
.listino em { color: var(--muted); font-style: normal; font-size: 13px; }

/* --- ricerca --- */
.cerca-box { display: flex; align-items: center; gap: 12px; margin: 16px 0; flex-wrap: wrap; }
#cerca {
    flex: 1; min-width: 240px; padding: 11px 14px; font-size: 16px;
    border: 2px solid var(--bordo); border-radius: 999px; background: #fff;
}
#cerca:focus { outline: none; border-color: var(--rosso); }

.ancore { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.ancore a {
    text-decoration: none; font-size: 13px; font-weight: 600; color: var(--testo);
    border: 1px solid var(--bordo); background: #fff; padding: 6px 13px; border-radius: 999px;
}
.ancore a:hover { border-color: var(--rosso); color: var(--rosso); }
.ancore a.attivo { background: var(--rosso); border-color: var(--rosso); color: #fff; }

/* --- orari --- */
.orari { list-style: none; margin: 0; padding: 0; }
.orari li { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; }
.orari li.oggi { font-weight: 700; color: var(--rosso); }
.orari.grandi li { font-size: 17px; padding: 7px 0; border-bottom: 1px dashed var(--bordo); }

/* --- contatti --- */
.contatti-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
.indirizzo { font-size: 19px; }
.mappa { position: relative; padding-top: 62%; border-radius: 10px; overflow: hidden; box-shadow: var(--ombra); }
.mappa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- social (collegamenti alle pagine della pizzeria) --- */
.social { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    text-decoration: none; color: #fff; font-weight: 800; font-size: 13px;
    text-transform: uppercase; letter-spacing: .5px;
}
.social.grandi .ico { width: 48px; height: 48px; font-size: 15px; }
.ico.facebook { background: #1877f2; }
.ico.instagram { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); }
.ico.tiktok { background: #111; }
.ico.youtube { background: #ff0000; }
.ico.tripadvisor { background: #34e0a1; color: #000; }
.ico.maps { background: #1a73e8; }
.ico.whatsapp { background: #25d366; color: #06301a; }

/* --- ordina a voce dal sito (Chiama.aspx) --- */
.chiama { max-width: 720px; }
.chiama h1 { margin: 0 0 8px; }
.chiama-intro { font-size: 18px; margin: 0 0 20px; }
.chiama-box {
    background: var(--carta); border: 1px solid var(--bordo); border-radius: 14px;
    padding: 20px; box-shadow: var(--ombra);
}
.chiama-box > p:first-child { margin-top: 0; }
.chiama-azioni { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0; }
.btn-chiama, .btn-riaggancia {
    border: 0; border-radius: 999px; cursor: pointer; color: #fff;
    font-family: inherit; font-weight: 700;
}
.btn-chiama { background: var(--verde); }
.btn-chiama:disabled { opacity: .6; cursor: default; }
.btn-riaggancia { background: var(--rosso); }
.btn-riaggancia:hover { background: var(--rosso-scuro); }
.chiama-stato { min-height: 1.5em; font-weight: 600; margin: 10px 0; }
.chiama-stato.ok { color: var(--verde); }
.chiama-stato.errore { color: var(--rosso-scuro); }

/* --- area clienti: moduli (accedi, registrati) --- */
.modulo {
    max-width: 460px;
    background: var(--carta); border: 1px solid var(--bordo); border-radius: 14px;
    padding: 24px; box-shadow: var(--ombra);
}
.modulo h1 { margin: 0 0 6px; font-size: 26px; }
.modulo > p { margin: 0 0 18px; }
.modulo label { display: block; margin: 14px 0 5px; font-weight: 600; font-size: 14px; }
/* 16px: sotto questa misura il telefono ingrandisce la pagina appena tocchi il campo */
.modulo input[type="text"], .modulo input[type="password"], .modulo input[type="tel"] {
    width: 100%; padding: 12px 14px; font-size: 16px; font-family: inherit;
    border: 2px solid var(--bordo); border-radius: 10px; background: #fff; color: var(--testo);
}
.modulo input:focus { outline: none; border-color: var(--rosso); }
.modulo .btn-ordina { margin-top: 20px; width: 100%; text-align: center; border: 0; cursor: pointer; font-family: inherit; }

.modulo-privacy { display: flex; align-items: flex-start; gap: 9px; margin-top: 18px; font-size: 14px; }
.modulo-privacy label { display: inline; margin: 0; font-weight: 400; }
.modulo-privacy input { width: 18px; height: 18px; flex: none; margin-top: 2px; }

.modulo-piede { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; font-size: 14px; }
.modulo-piede a { color: var(--rosso); }

.modulo-ok, .modulo-errore {
    margin: 18px 0 0; padding: 11px 14px; border-radius: 10px; font-size: 14px; font-weight: 600;
}
.modulo-ok { background: #e4f3ea; color: #14613a; }
.modulo-errore { background: #f9e3e3; color: var(--rosso-scuro); }

/* --- area clienti: profilo --- */
.profilo-testa { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; }
.profilo-testa h1 { margin: 0 0 2px; font-size: 28px; text-transform: capitalize; }
.profilo-punti { text-align: center; background: var(--carta); border: 1px solid var(--bordo);
    border-radius: 14px; padding: 10px 20px; box-shadow: var(--ombra); }
.profilo-punti-n { display: block; font-size: 30px; font-weight: 800; color: var(--rosso); line-height: 1; }
.profilo-punti-t { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }

.profilo-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 18px; }
.profilo-box {
    background: var(--carta); border: 1px solid var(--bordo); border-radius: 14px;
    padding: 20px; box-shadow: var(--ombra); margin-top: 18px;
}
.profilo-griglia .profilo-box { margin-top: 0; }
.profilo-box h2 { margin: 0 0 4px; font-size: 19px; }
.profilo-box > p { margin: 0 0 6px; }
.profilo-box label { display: block; margin: 12px 0 5px; font-weight: 600; font-size: 14px; }
.profilo-box input[type="text"], .profilo-box input[type="password"] {
    width: 100%; padding: 11px 13px; font-size: 16px; font-family: inherit;
    border: 2px solid var(--bordo); border-radius: 10px; background: #fff; color: var(--testo);
}
.profilo-box input:focus { outline: none; border-color: var(--rosso); }
.profilo-box .btn-ordina { margin-top: 18px; border: 0; cursor: pointer; font-family: inherit; }
.profilo-riga { display: flex; gap: 12px; }
.profilo-riga > div { flex: 1; }

.profilo-ordini { list-style: none; margin: 10px 0 0; padding: 0; }
.profilo-ordini li {
    display: grid; grid-template-columns: 1fr auto; gap: 2px 14px;
    padding: 11px 0; border-bottom: 1px dashed var(--bordo);
}
.profilo-ordine-data { font-weight: 600; }
.profilo-ordine-tot { grid-row: 1 / span 2; align-self: center; font-weight: 800; color: var(--rosso); white-space: nowrap; }
.profilo-ordine-tipo { font-size: 13px; color: var(--muted); text-transform: capitalize; }
.profilo-ordine-pizze { grid-column: 1 / -1; font-size: 13px; color: var(--muted); }

.profilo-azioni { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 22px; }
.profilo-azioni .btn-ghost { background: none; cursor: pointer; font-family: inherit; font-size: inherit; }

/* --- footer --- */
.footer { background: #23201d; color: #e8e0d6; margin-top: 30px; padding: 34px 0 18px; }
.footer h3 { margin: 0 0 10px; font-size: 15px; text-transform: uppercase; letter-spacing: 1px; color: #ffb84d; }
.footer a { color: #e8e0d6; }
.foot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.copy { margin-top: 24px; padding-top: 14px; border-top: 1px solid #3a352f; font-size: 12px; color: #9d948a; }

@media (max-width: 780px) {
    .listino { columns: 1; }
    .contatti-grid, .foot-grid { grid-template-columns: 1fr; }
    .stato { margin-left: 0; width: 100%; }
}

/* Telefono: card della vetrina in stile lista — foto piccola a sinistra, testo a destra.
   Una sola colonna che usa tutta la larghezza disponibile, cosi' nome+prezzo hanno sempre
   spazio; il layout a griglia con foto grande in alto (va bene da tablet in su) su schermi
   stretti costringeva la card a essere piu' stretta del testo che doveva contenere. */
/* Telefono: logo e scritta "Pizzeria Gastronomia" scendono insieme restando alti uguali
   in proporzione; in vw cosi' entrano anche negli schermi da 320px. */
@media (max-width: 560px) {
    .logo-img { height: min(68px, 17.4vw); }
    .logo-sub { font-size: min(33px, 8.4vw); }
    .marchio-riga { gap: 8px; }
    .anniv-svg { height: min(60px, 15.4vw); }
}

/* Fino a 959px (telefono dritto e in orizzontale, tablet) il menu va comunque sotto il marchio:
   logo a sinistra, scritta al centro e bollino anniversario a destra riempiono tutta la larghezza,
   slogan centrato sotto. Da 960px in su (PC) marchio compatto con il menu accanto. */
@media (max-width: 959px) {
    .marchio { width: 100%; }
    .logo { flex: 1; min-width: 0; }
    .logo-sub { flex: 1; text-align: center; }
    .slogan { max-width: none; text-align: center; }
}

@media (max-width: 480px) {
    .vetrina { grid-template-columns: 1fr; gap: 10px; }

    .scheda { flex-direction: row; align-items: stretch; }

    /* Il riquadro copre tutta l'altezza della card (stretch): se fosse quadrato e centrato, nelle
       card con due righe di ingredienti resterebbe scoperto il bianco della card sopra e sotto la
       foto — si vedeva solo sulle pizze con la descrizione lunga, non su quelle da una riga.
       "contain" pero' e' indispensabile: con "cover" il box alto e stretto ritaglia i lati della
       pizza. Cosi' la pizza resta intera e il fondo scuro del riquadro completa lo spazio. */
    .scheda-foto {
        width: 96px; flex: 0 0 96px; aspect-ratio: auto; align-self: stretch;
        object-fit: contain;
    }
    .scheda-foto.segnaposto { padding: 6px; font-size: 13px; }

    .scheda-testo { padding: 10px 12px; gap: 3px; }
    .scheda h3 { font-size: 15px; }
    .scheda .prezzo { font-size: 14px; }
    .scheda .ingr {
        font-size: 12.5px;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
}