/* =====================================================================
   Dpiù Migliarino — foglio di stile comune
   Impostazione: chiara, ad alto contrasto, caratteri grandi.
   Il pubblico è di paese e in buona parte anziano: leggibilità prima
   di tutto, bersagli ampi da toccare, niente effetti gratuiti.
   ===================================================================== */

*,*::before,*::after{box-sizing:border-box}

:root{
  color-scheme:light;

  --rosso:#d81f26; --rosso-cupo:#a8151b; --rosso-tenue:#fdecec;
  --giallo:#ffc72c; --giallo-cupo:#3d2a00;
  --verde:#12783a; --verde-tenue:#e7f5ec;
  --ambra:#a8620a; --ambra-tenue:#fdf1de;
  --wa:#25d366;

  --ink:#16181d; --ink-2:#565c66; --ink-3:#878d97;
  --line:#e2e5ea; --line-forte:#c9ced7;
  --carta:#ffffff; --sfondo:#f4f6f8;

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --raggio:14px; --raggio-p:9px;
  --ombra:0 1px 2px rgba(22,24,29,.06),0 6px 20px rgba(22,24,29,.07);
  --ombra-alta:0 2px 6px rgba(22,24,29,.08),0 16px 40px rgba(22,24,29,.12);
  --zoccolo:0px;
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--sfondo);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  padding-bottom:var(--zoccolo);
}
img{display:block;max-width:100%;height:auto}
a{color:var(--rosso-cupo);text-underline-offset:3px}
button{font:inherit;cursor:pointer}
h1,h2,h3{line-height:1.15;letter-spacing:-.02em;margin:0;font-weight:800}
h1{font-size:clamp(1.9rem,5.6vw,2.9rem)}
h2{font-size:clamp(1.45rem,4.2vw,1.95rem)}
h3{font-size:1.06rem;font-weight:700;letter-spacing:-.01em}

.wrap{width:min(1120px,92vw);margin-inline:auto}
section{padding:2.8rem 0}
.occhiello{font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--rosso);margin:0 0 .45rem}
.sommario{color:var(--ink-2);max-width:58ch;margin:.35rem 0 1.6rem}
.testa-sezione{display:flex;align-items:flex-end;justify-content:space-between;gap:1.2rem;
  margin:0 0 1.4rem;flex-wrap:wrap}
.solo-lettori{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------------------------------------------------- bottoni */
.bottone{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.9rem 1.5rem;border-radius:999px;font-weight:700;font-size:1rem;
  text-decoration:none;border:1px solid transparent;transition:.18s;
  background:none;color:inherit;line-height:1.2;
}
.bottone svg{flex:none}
.b-rosso{background:var(--rosso);color:#fff}
.b-rosso:hover{background:var(--rosso-cupo)}
.b-giallo{background:var(--giallo);color:var(--giallo-cupo)}
.b-giallo:hover{background:#ffd75c}
.b-wa{background:var(--wa);color:#06331a}
.b-wa:hover{filter:brightness(.94)}
.b-linea{background:var(--carta);color:var(--ink);border-color:var(--line-forte)}
.b-linea:hover{border-color:var(--ink-2)}
.b-piccolo{padding:.6rem 1.1rem;font-size:.9rem}

/* --------------------------------------------------------- schede */
.scheda{background:var(--carta);border:1px solid var(--line);border-radius:var(--raggio);
  box-shadow:var(--ombra)}
.riquadro{padding:1.5rem}

/* ------------------------------------------------------ intestazione */
header.testa{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.barra{display:flex;align-items:center;gap:1rem;padding:.65rem 0}
.marchio{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);
  margin-right:auto}
.marchio .segno{display:grid;place-items:center;width:38px;height:38px;border-radius:9px;
  background:var(--rosso);color:#fff;font-weight:800;font-size:1.02rem;letter-spacing:-.04em;flex:none}
.marchio b{font-size:1.02rem;font-weight:800;letter-spacing:-.02em;display:block}
.marchio i{font-style:normal;font-size:.72rem;color:var(--ink-2)}
.menu{display:flex;gap:.3rem;list-style:none;margin:0;padding:0}
.menu a{display:block;padding:.5rem .85rem;border-radius:999px;text-decoration:none;
  color:var(--ink-2);font-weight:600;font-size:.94rem}
.menu a:hover{background:var(--sfondo);color:var(--ink)}
.menu a[aria-current="page"]{background:var(--rosso-tenue);color:var(--rosso-cupo)}
@media(max-width:900px){.menu a{padding:.5rem .55rem;font-size:.86rem}}
@media(max-width:640px){.menu{display:none}}

/* pulsante lista con contatore */
.tasto-lista{position:relative;display:inline-flex;align-items:center;gap:.5rem;
  padding:.55rem 1.05rem;border-radius:999px;background:var(--ink);color:#fff;
  text-decoration:none;font-weight:700;font-size:.92rem}
.tasto-lista:hover{background:#2a2f38}
.tasto-lista .conta{display:none;min-width:22px;height:22px;padding:0 6px;border-radius:999px;
  background:var(--giallo);color:var(--giallo-cupo);font-size:.78rem;font-weight:800;
  display:grid;place-items:center}
.tasto-lista .conta:empty,.tasto-lista .conta[hidden]{display:none}

/* ------------------------------------------------------- stato negozio */
.stato{display:inline-flex;align-items:center;gap:.55rem;padding:.45rem 1rem;border-radius:999px;
  font-weight:800;font-size:.92rem;border:1px solid transparent}
.stato .pallino{width:9px;height:9px;border-radius:50%;background:currentColor;
  box-shadow:0 0 0 4px color-mix(in srgb,currentColor 22%,transparent);flex:none}
.stato.aperto{background:var(--verde-tenue);color:var(--verde);border-color:#bfe3cd}
.stato.chiuso{background:var(--rosso-tenue);color:var(--rosso-cupo);border-color:#f6cdcf}
.stato.avviso{background:var(--ambra-tenue);color:var(--ambra);border-color:#f3ddb8}

/* ---------------------------------------------------------- avvisi */
.avviso{display:none;gap:.85rem;align-items:flex-start;padding:1rem 1.25rem;
  background:var(--ambra-tenue);border:1px solid #f3ddb8;border-radius:var(--raggio);
  color:#5c3a08;margin:0 0 1.5rem}
.avviso.attivo{display:flex}
.avviso b{display:block}

/* banner cookie, fatto in casa */
.banner-cookie{position:fixed;left:0;right:0;bottom:0;z-index:900;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.9rem 1.4rem;
  padding:.9rem 1.25rem calc(.9rem + env(safe-area-inset-bottom));
  background:var(--ink);color:#fff;box-shadow:0 -6px 24px rgba(22,24,29,.18)}
.banner-cookie p{margin:0;font-size:.86rem;line-height:1.4;color:#d7d9dd;max-width:62ch}
.banner-cookie a{color:#fff;text-decoration-color:rgba(255,255,255,.55)}
.banner-cookie button{flex:none}
@media(max-width:860px){.banner-cookie{bottom:var(--zoccolo,0);justify-content:flex-start}}

/* nastro dati dimostrativi — sparisce quando arrivano le offerte vere */
.nastro-demo{background:var(--giallo-cupo);color:var(--giallo);text-align:center;
  padding:.55rem 1rem;font-size:.86rem;font-weight:700;letter-spacing:.02em}

/* ------------------------------------------------------- volantino */
.fascia-volantino{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:1rem 1.35rem;border-radius:var(--raggio);
  background:linear-gradient(135deg,var(--rosso),#b31920);color:#fff;box-shadow:var(--ombra)}
.fascia-volantino b{font-size:1.05rem}
.fascia-volantino .resta{margin-left:auto;display:inline-flex;align-items:center;gap:.45rem;
  background:rgba(255,255,255,.16);padding:.45rem .95rem;border-radius:999px;
  font-weight:800;font-size:.9rem}
@media(max-width:640px){.fascia-volantino .resta{margin-left:0}}

/* ---------------------------------------------------- gioco risparmio */
.gioco-risparmio{text-align:center;padding:2.2rem 1.5rem}
.gioco-risparmio .cifra{font-size:clamp(2.6rem,10vw,4.2rem);font-weight:800;
  letter-spacing:-.03em;color:var(--verde);font-variant-numeric:tabular-nums;
  line-height:1;margin:.3rem 0;transition:transform .25s cubic-bezier(.2,.9,.3,1)}
.gioco-risparmio .cifra.sale{transform:scale(1.06)}
.gioco-risparmio .messaggio{color:var(--ink-2);font-size:1.02rem;margin:.4rem 0 1.4rem;min-height:1.5em}
.gioco-risparmio .messaggio.record{color:var(--verde);font-weight:700}

/* ------------------------------------------------------- offerte */
.vetrina{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
@media(max-width:520px){.vetrina{grid-template-columns:repeat(2,1fr);gap:.75rem}}

.offerta{position:relative;display:flex;flex-direction:column;background:var(--carta);
  border:1px solid var(--line);border-radius:var(--raggio);overflow:hidden;
  transition:box-shadow .2s,border-color .2s}
.offerta:hover{box-shadow:var(--ombra-alta);border-color:var(--line-forte)}
.offerta .figura{position:relative;aspect-ratio:1/1;background:var(--sfondo);overflow:hidden}
.offerta .figura img{width:100%;height:100%;object-fit:contain;padding:.9rem;
  mix-blend-mode:multiply}
.offerta .senza-foto{display:grid;place-items:center;height:100%;color:var(--ink-3);
  font-size:.8rem;text-align:center;padding:1rem}

/* i due contrassegni stanno in una barra unica: così un bollino lungo
   spinge di lato la percentuale invece di coprirla */
.bollini{position:absolute;inset:.6rem .6rem auto;z-index:2;display:flex;
  align-items:flex-start;justify-content:space-between;gap:.4rem;pointer-events:none}
.sconto{background:var(--giallo);color:var(--giallo-cupo);font-weight:800;font-size:.86rem;
  padding:.28rem .6rem;border-radius:var(--raggio-p);letter-spacing:-.01em;
  box-shadow:0 2px 6px rgba(0,0,0,.14);flex:none}
.bollino{background:var(--ink);color:#fff;font-weight:700;font-size:.7rem;
  padding:.26rem .55rem;border-radius:var(--raggio-p);text-transform:uppercase;
  letter-spacing:.05em;line-height:1.25;max-width:58%;margin-left:auto;text-align:right}

.offerta .corpo{padding:.85rem .95rem 1rem;display:flex;flex-direction:column;gap:.15rem;flex:1}
.offerta .marca{font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-2)}
.offerta .nome{font-size:.99rem;font-weight:700;line-height:1.28;margin:.1rem 0 .05rem}
.offerta .formato{font-size:.84rem;color:var(--ink-2)}

.prezzi{display:flex;align-items:baseline;gap:.5rem;margin-top:auto;padding-top:.7rem;flex-wrap:wrap}
.prezzo{font-size:1.6rem;font-weight:800;letter-spacing:-.03em;color:var(--rosso);
  font-variant-numeric:tabular-nums;line-height:1}
.prezzo-pieno{font-size:.94rem;color:var(--ink-3);text-decoration:line-through;
  font-variant-numeric:tabular-nums}
.unitario{font-size:.78rem;color:var(--ink-2);font-variant-numeric:tabular-nums;
  width:100%;margin-top:.15rem}

.tasto-aggiungi{margin:.8rem .95rem 1rem;padding:.65rem;border-radius:999px;border:1px solid var(--line-forte);
  background:var(--carta);color:var(--ink);font-weight:700;font-size:.92rem;
  display:flex;align-items:center;justify-content:center;gap:.4rem;transition:.16s}
.tasto-aggiungi:hover{border-color:var(--rosso);color:var(--rosso)}
.tasto-aggiungi.dentro{background:var(--verde-tenue);border-color:#bfe3cd;color:var(--verde)}

/* ------------------------------------------------------- filtri */
.filtri{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 1.4rem}
.filtro{padding:.55rem 1.05rem;border-radius:999px;border:1px solid var(--line-forte);
  background:var(--carta);color:var(--ink-2);font-weight:600;font-size:.92rem;white-space:nowrap}
.filtro:hover{border-color:var(--ink-3)}
.filtro[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

.cerca{position:relative;margin:0 0 1.2rem}
.cerca input{width:100%;padding:.95rem 1.1rem .95rem 2.9rem;font-size:1.02rem;
  border:1px solid var(--line-forte);border-radius:999px;background:var(--carta);color:var(--ink)}
.cerca input:focus{outline:2px solid var(--rosso);outline-offset:1px;border-color:transparent}
.cerca svg{position:absolute;left:1.05rem;top:50%;transform:translateY(-50%);color:var(--ink-3)}

/* ------------------------------------------------------- ricette */
.ricette{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.ricetta{display:flex;flex-direction:column;background:var(--carta);border:1px solid var(--line);
  border-radius:var(--raggio);overflow:hidden;text-align:left;transition:box-shadow .2s}
.ricetta:hover{box-shadow:var(--ombra-alta)}
.ricetta .figura{aspect-ratio:16/10;background:var(--sfondo);overflow:hidden}
.ricetta .figura img{width:100%;height:100%;object-fit:cover}
.ricetta .corpo{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.ricetta .dati{display:flex;gap:1rem;font-size:.84rem;color:var(--ink-2);margin-top:.1rem}
.ricetta .risparmio{margin-top:auto;padding-top:.9rem;font-size:.9rem;color:var(--verde);font-weight:700}

/* ------------------------------------------------------- la lista */
.riga-lista{display:flex;align-items:center;gap:1rem;padding:.95rem 0;border-bottom:1px solid var(--line)}
.riga-lista .figura{width:62px;height:62px;flex:none;border-radius:var(--raggio-p);
  background:var(--sfondo);overflow:hidden}
.riga-lista .figura img{width:100%;height:100%;object-fit:contain;padding:.35rem;mix-blend-mode:multiply}
.riga-lista .dati{flex:1;min-width:0}
.riga-lista .nome{font-weight:700;font-size:1rem;line-height:1.3}
.riga-lista .sotto{font-size:.86rem;color:var(--ink-2)}
.riga-lista .costo{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:1.05rem}

.quantita{display:inline-flex;align-items:center;border:1px solid var(--line-forte);border-radius:999px;
  overflow:hidden;flex:none}
.quantita button{width:44px;height:44px;border:0;background:var(--carta);color:var(--ink);
  font-size:1.2rem;font-weight:700;line-height:1;display:grid;place-items:center}
.quantita button:hover{background:var(--sfondo)}
.quantita span{min-width:32px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums;
  font-size:.98rem}

.totale{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:1.3rem 0 .4rem;font-size:1.2rem;font-weight:800}
.totale .cifra{font-size:1.9rem;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.risparmio-totale{display:flex;justify-content:space-between;gap:1rem;color:var(--verde);
  font-weight:700;padding:.2rem 0 1.2rem;border-bottom:1px solid var(--line);margin-bottom:1.3rem}

.vuoto{text-align:center;padding:3.5rem 1rem;color:var(--ink-2)}
.vuoto svg{margin:0 auto 1rem;color:var(--line-forte)}

/* ------------------------------------------------------- orari */
.orari{width:100%;border-collapse:collapse}
.orari th{text-align:left;font-weight:600;color:var(--ink-2);padding:.6rem .2rem}
.orari td{text-align:right;font-variant-numeric:tabular-nums;padding:.6rem .2rem;font-weight:600}
.orari tr+tr th,.orari tr+tr td{border-top:1px solid var(--line)}
.orari tr.oggi th,.orari tr.oggi td{color:var(--rosso);font-weight:800}
.orari tr.oggi th::after{content:" · oggi";font-size:.75rem;font-weight:700}
.orari td.serrato{color:var(--ink-3)}

/* ------------------------------------------------------- piede */
footer.piede{background:var(--ink);color:#c9cdd4;padding:2.6rem 0;font-size:.94rem;margin-top:1rem}
footer.piede a{color:#fff}
footer.piede .righe{display:flex;flex-wrap:wrap;gap:2.4rem;justify-content:space-between}
footer.piede p{margin:.2rem 0}
footer.piede strong{color:#fff}
.legale{margin-top:1.8rem;padding-top:1.2rem;border-top:1px solid #2b2f37;
  font-size:.83rem;color:#8b919b}

/* -------------------------------------------- zoccolo mobile */
.zoccolo{position:fixed;inset:auto 0 0;z-index:70;display:none;gap:.55rem;
  padding:.65rem 4vw calc(.65rem + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.zoccolo .bottone{flex:1;padding:.8rem .5rem;font-size:.93rem}
@media(max-width:860px){
  .zoccolo{display:flex}
  body{--zoccolo:4.9rem}
}

/* -------------------------------------------- avviso di aggiunta */
.brindisi{position:fixed;left:50%;bottom:calc(var(--zoccolo) + 1.1rem);transform:translate(-50%,140%);
  z-index:90;background:var(--ink);color:#fff;padding:.85rem 1.4rem;border-radius:999px;
  font-weight:700;font-size:.95rem;box-shadow:var(--ombra-alta);transition:transform .28s cubic-bezier(.2,.9,.3,1);
  display:flex;align-items:center;gap:.5rem;pointer-events:none;max-width:88vw}
.brindisi.visibile{transform:translate(-50%,0)}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}