/* Stili delle singole pagine del sito consumer. */

/* ---------- home: la vetrina ---------- */
.eroe { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(24px, 4vw, 64px); align-items: start; padding-block: clamp(28px, 5vw, 64px) clamp(28px, 4vw, 48px); }
.eroe__nome { margin-top: clamp(8px, 3vw, 40px); font-size: clamp(34px, 4.6vw, 60px); line-height: 1.04; font-weight: 800; font-variation-settings: 'wdth' 82; letter-spacing: -.024em; word-spacing: .05em; min-height: 2.1em; display: flex; align-items: flex-end; }
.eroe__cursore { display: none; width: .07em; height: .8em; background: var(--bosco); margin-left: .05em; vertical-align: -.04em; animation: cursore 1.05s steps(1) infinite; }
@keyframes cursore { 50% { opacity: 0; } }
.eroe.scrive .eroe__cursore { display: inline-block; }
.eroe__prezzo { margin-top: .16em; font-size: clamp(44px, 6vw, 78px); line-height: 1.05; font-weight: 800; font-variation-settings: 'wdth' 82; letter-spacing: -.024em; }
.eroe__frase { margin-top: 22px; font-size: clamp(var(--t-16), 1.4vw, var(--t-19)); color: var(--inchiostro-2); max-width: 46ch; min-height: 3.2em; }
.eroe__frase b { color: var(--inchiostro); }
.eroe .ricerca { margin-top: 22px; }
.eroe .meta { margin-top: 16px; }
.eroe__destra { justify-self: center; width: min(340px, 100%); display: grid; grid-template-rows: auto auto; align-content: start; min-height: 540px; }
.eroe__destra .scontrino-box__foglio { align-self: start; }
.eroe--semplice .eroe__nome { min-height: 0; }
.eroe--semplice { grid-template-columns: 1fr; }
.comandi { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; }
.comandi button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linea-2); background: var(--superficie); color: var(--inchiostro); display: grid; place-items: center; transition: background-color var(--t-passaggio), transform var(--t-pressione); }
.comandi button:hover { background: var(--carta-2); }
.comandi button:active { transform: scale(.95); }
.comandi svg { width: 16px; height: 16px; }
.comandi__conta { font: 650 var(--t-14)/1 var(--f-testo); color: var(--inchiostro-2); min-width: 56px; text-align: center; font-variant-numeric: tabular-nums; }
.comandi__barra { width: 64px; height: 3px; border-radius: 2px; background: var(--linea); overflow: hidden; }
.comandi__barra i { display: block; height: 100%; background: var(--bosco); transform-origin: left; transform: scaleX(0); }
.comandi__barra i.corre { animation: riempi 10s linear forwards; }
.comandi.ferma .comandi__barra i { animation-play-state: paused; }
@keyframes riempi { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 900px) {
  .eroe { grid-template-columns: 1fr; }
  .eroe__destra { justify-self: start; min-height: 0; }
  .eroe__nome { font-size: clamp(28px, 7vw, 40px); min-height: 2.2em; }
  .eroe__prezzo { font-size: clamp(38px, 11vw, 56px); }
  .eroe__cursore { display: none; }
}
@media (prefers-reduced-motion: reduce) { .eroe__cursore, .comandi__barra { display: none; } }
.fascia-loghi { border-block: 1px solid var(--linea); padding-block: 14px; }

/* ---------- home: sezioni ---------- */
.titolo-riga { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 24px; margin-bottom: 28px; }
.titolo-riga p { color: var(--inchiostro-2); max-width: 56ch; margin-top: 8px; }
.con-mascotte { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(20px, 4vw, 56px); align-items: center; }
.con-mascotte img { width: clamp(140px, 18vw, 220px); height: auto; }
@media (max-width: 700px) { .con-mascotte { grid-template-columns: 1fr; } .con-mascotte img { order: -1; width: 150px; } }
.negozi { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.negozio { display: grid; grid-template-columns: 34px 64px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: var(--r); background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linea); }
.negozio__pos { font: 750 var(--t-17)/1 var(--f-testo); color: var(--inchiostro-2); text-align: center; font-variant-numeric: tabular-nums; }
.negozio .insegna-tessera { height: 38px; min-width: 64px; padding: 6px 8px; }
.negozio .insegna-tessera img { max-height: 20px; max-width: 52px; }
.negozio__nome { font-weight: 700; }
.negozio__nome small { display: block; font-weight: 500; color: var(--inchiostro-2); font-size: var(--t-14); }
.negozio__prezzo { font-weight: 750; font-size: var(--t-17); font-variant-numeric: tabular-nums; text-align: right; }
.negozio__prezzo small { display: block; font-weight: 500; font-size: var(--t-12); color: var(--inchiostro-2); }
@media (max-width: 600px) { .negozio { grid-template-columns: 26px minmax(0, 1fr) auto; } .negozio .insegna-tessera, .negozio .voto { display: none; } }
.frase-numeri { font-size: clamp(var(--t-19), 2.2vw, var(--t-32)); line-height: 1.35; font-weight: 650; font-variation-settings: 'wdth' 90; letter-spacing: -.015em; max-width: 30ch; }
.frase-numeri .cifre { color: var(--bosco); font-weight: 800; }
.app-box { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; padding: clamp(24px, 4vw, 40px); border-radius: 22px; background: var(--bosco-tenue); }
.app-box img { width: clamp(140px, 16vw, 200px); }
.app-box p { color: var(--inchiostro-2); margin-top: 8px; max-width: 46ch; }
.app-box .bottone { margin-top: 18px; }
@media (max-width: 640px) { .app-box { grid-template-columns: 1fr; } }

/* ---------- scheda prodotto ---------- */
.prodotto-testa { display: grid; gap: 10px; }
.prodotto-testa .marca { color: var(--inchiostro-2); font-weight: 600; }
.prodotto-prezzo { font-size: clamp(38px, 5vw, 60px); font-weight: 800; font-variation-settings: 'wdth' 82; letter-spacing: -.02em; margin-top: 6px; }
.alternative { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.alternativa { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r); background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linea); color: var(--inchiostro); text-decoration: none; }
.alternativa:hover { box-shadow: inset 0 0 0 1.5px var(--bosco); }
.alternativa small { display: block; color: var(--inchiostro-2); font-size: var(--t-14); }
.alternativa .risparmio { color: var(--bosco-testo); font-weight: 750; font-size: var(--t-16); text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- supermercati ---------- */
.mappa { height: clamp(360px, 56vh, 620px); border-radius: var(--r-grande); overflow: hidden; background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linea); position: relative; }
.mappa .maplibregl-ctrl-attrib { font-size: 11px; }
.segnaposto-mappa { position: absolute; inset: 0; display: grid; place-items: center; color: var(--inchiostro-2); }
.pin-negozio { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #FFFFFF; box-shadow: 0 1px 4px rgb(0 0 0 / .35); cursor: pointer; }
.pin-negozio { padding: 0; }
.pin-negozio--buono { background: var(--fascia-bassa); } .pin-negozio--medio { background: var(--fascia-media); } .pin-negozio--caro { background: var(--fascia-alta); }
.pin-negozio--assente { background: #FFFFFF; border-color: #8A968D; width: 10px; height: 10px; box-shadow: none; }
:root[data-theme="dark"] .mappa .maplibregl-canvas { filter: invert(.9) hue-rotate(180deg) brightness(.95) contrast(.9); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mappa .maplibregl-canvas { filter: invert(.9) hue-rotate(180deg) brightness(.95) contrast(.9); } }
.maplibregl-popup-content { font: 400 14px/1.45 var(--f-testo); color: #0E1A12; border-radius: 10px; padding: 12px 30px 12px 14px; }
.legenda i.buono { background: var(--fascia-bassa); } .legenda i.medio { background: var(--fascia-media); } .legenda i.caro { background: var(--fascia-alta); } .legenda i.assente { background: #FFFFFF; border: 2px solid #8A968D; }
.legenda { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: var(--t-14); color: var(--inchiostro-2); margin-top: 12px; }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }

/* ---------- pagine di testo ---------- */
.pagina-testo { max-width: 58em; }
.pagina-testo h2 { font-size: var(--t-24); margin-top: 36px; }
.pagina-testo h3 { margin-top: 24px; }
.pagina-testo p, .pagina-testo li { color: var(--inchiostro-2); max-width: 36em; }
.legale td { max-width: 32em; }
.pagina-testo p + p { margin-top: 12px; }
.pagina-testo ul { padding-left: 1.2em; display: grid; gap: 6px; }
.livelli { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
@media (max-width: 760px) { .livelli { grid-template-columns: 1fr; } }
.livelli .riquadro h3 { margin: 0; }

/* ---------- errori ---------- */
.errore-pagina { min-height: 60vh; display: grid; place-items: center; }

/* ---------- testi legali ---------- */
.legale h2 { font-size: var(--t-24); margin-top: 32px; }
.legale strong { color: var(--inchiostro); }
.legale table { width: 100%; border-collapse: collapse; font-size: var(--t-16); margin-top: 12px; }
.legale th, .legale td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--linea); color: var(--inchiostro-2); }
.legale th { color: var(--inchiostro); font-weight: 700; border-bottom: 2px solid var(--inchiostro); }

/* ---------- grafici (grafico.js) ---------- */
.gr-quadro { position: relative; }
.grafico { display: block; max-width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.grafico:focus-visible { outline: 2px solid var(--bosco); outline-offset: 4px; border-radius: 6px; }
.gr-griglia { stroke: var(--grafico-griglia); stroke-width: 1; }
.gr-base { stroke: var(--linea-2); }
.gr-asse { fill: var(--grafico-asse); font: 550 12px/1 var(--f-testo); font-variant-numeric: tabular-nums; }
.gr-linea { fill: none; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.gr-linea--offerta { stroke: var(--offerta); stroke-width: 3; }
.gr-salto { fill: none; stroke-width: 1.8; stroke-dasharray: 3 4; stroke-linecap: round; opacity: .75; }
.gr-punto { stroke: var(--superficie); stroke-width: 1.5; }
.gr-offerta { fill: var(--offerta); stroke: var(--superficie); stroke-width: 1.5; }
.gr-tocco { fill: transparent; cursor: crosshair; }
.gr-guida__riga { stroke: var(--inchiostro-3); stroke-width: 1; stroke-dasharray: 2 3; }
@media (prefers-reduced-motion: no-preference) {
  .gr-anima { stroke-dasharray: 1; stroke-dashoffset: 1; animation: grDisegna .9s var(--curva) .1s forwards; }
}
@keyframes grDisegna { to { stroke-dashoffset: 0; } }
.gr-fumetto { position: absolute; top: 8px; z-index: 2; min-width: 180px; max-width: 260px; padding: 10px 12px; border-radius: 12px;
  background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linea-2), var(--ombra); font-size: var(--t-14); pointer-events: none; }
.gr-fumetto strong { display: block; margin-bottom: 6px; font-weight: 750; }
.gr-fumetto ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.gr-fumetto li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; column-gap: 8px; align-items: center; }
.gr-fumetto li i { width: 12px; height: 4px; border-radius: 2px; }
.gr-fumetto li b { font-variant-numeric: tabular-nums; }
.gr-fumetto li em, .gr-fumetto li small { grid-column: 2 / -1; font-style: normal; font-size: var(--t-12); }
.gr-fumetto li em { color: var(--offerta-testo); font-weight: 700; }
.gr-fumetto li small { color: var(--inchiostro-3); }
.gr-legenda { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--t-14); color: var(--inchiostro-2); }
.gr-legenda li { display: inline-flex; align-items: center; gap: 7px; }
.gr-legenda b { color: var(--inchiostro); font-variant-numeric: tabular-nums; }
.gr-legenda i { width: 14px; height: 4px; border-radius: 2px; }
.gr-legenda__offerta { background: var(--offerta); height: 4px !important; }
.gr-legenda__salto { height: 0 !important; border-top: 2px dashed var(--inchiostro-3); background: none !important; }
.riassunto-storico { margin-bottom: 14px; font-size: var(--t-16); color: var(--inchiostro-2); max-width: 36em; }
.riassunto-storico b { color: var(--inchiostro); }
.pannello { padding: 20px 22px; border-radius: var(--r-grande); background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linea); }
.titolo-sezione { font-size: var(--t-24); margin-bottom: 4px; }

/* ---------- /offerte: numeri, comandi, altre ---------- */
.numeri { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .numeri { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.numeri li { padding: 14px 16px; border-radius: var(--r-grande); background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linea); display: grid; gap: 2px; }
.numeri b { font: 800 clamp(1.5rem, 3vw, 2rem)/1.05 var(--f-testo); letter-spacing: -.02em; font-variant-numeric: tabular-nums; font-variation-settings: 'wdth' 88; }
.numeri li:nth-child(3) b, .numeri li:nth-child(4) b { color: var(--offerta-testo); }
.numeri span { font-size: var(--t-14); color: var(--inchiostro-2); }
.comandi-offerte { display: grid; gap: 12px; padding: 16px; margin-bottom: 16px; border-radius: var(--r-grande); background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linea); }
.comandi-offerte__riga { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: center; }
.comandi-offerte__riga--fine { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 760px) { .comandi-offerte__riga, .comandi-offerte__riga--fine { grid-template-columns: 1fr; gap: 6px; } }
.comandi-offerte__etichetta { font: 700 var(--t-14)/1.2 var(--f-testo); color: var(--inchiostro-2); }
.filtri--scorri { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.filtri--scorri .filtro { flex: none; }
.filtro { display: inline-flex; align-items: center; gap: 7px; }
.filtro__logo { height: 16px; width: auto; max-width: 40px; border-radius: 3px; background: var(--tessera); padding: 1px 2px; }
.campo-filtro { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--linea-2); background: var(--superficie); max-width: 420px; }
.campo-filtro:focus-within { outline: 2px solid var(--bosco); outline-offset: 1px; }
.campo-filtro svg { width: 18px; height: 18px; color: var(--inchiostro-3); flex: none; }
.campo-filtro input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font: 500 var(--t-16)/1 var(--f-testo); color: var(--inchiostro); }
.segmenti { display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; background: var(--carta-2); flex-wrap: wrap; }
.segmenti button { border: 0; background: transparent; padding: 8px 12px; border-radius: 8px; font: 650 var(--t-14)/1 var(--f-testo); color: var(--inchiostro-2); transition: background-color var(--t-passaggio), color var(--t-passaggio); }
.segmenti button[aria-pressed="true"] { background: var(--superficie); color: var(--inchiostro); box-shadow: var(--ombra-piccola); }
.altre { display: flex; justify-content: center; margin-top: 22px; }
.nota-fonte { margin-top: 26px; font-size: var(--t-14); color: var(--inchiostro-2); max-width: 40em; }
.alternativa .risparmio small { display: block; font-size: var(--t-14); font-weight: 650; color: var(--bosco-testo); }
.alternativa .risparmio em { display: block; font-style: normal; font-size: var(--t-12); font-weight: 700; color: var(--offerta-testo); }
.alternativa .risparmio { color: var(--inchiostro); font-size: var(--t-17); }
.offerta-in-corso { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 4px; font-weight: 650; color: var(--offerta-testo); }
.offerta-in-corso s { color: var(--inchiostro-3); font-weight: 500; }
.offerta-in-corso .offerta__sconto { font-size: var(--t-14); padding: 4px 7px; }
.rosso { color: var(--offerta-testo); font-weight: 700; }
@media (max-width: 760px) { .segmenti { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; } .segmenti button { padding: 9px 6px; text-align: center; } }
.prodotto-testa > p { max-width: 36em; }