/* Componenti del sito consumer. Regole della casa (vedi spec §3.6): niente
   pillole sopra i titoli, niente aloni, niente bordo sottile + ombra larga
   insieme, niente testo funzionale sotto i 12 px, rosso solo per "in offerta". */

/* ---------- cartellino del prezzo ---------- */
.cartellino {
  position: relative; display: inline-block; padding: .02em .3em .1em .56em;
  background: var(--segnale); color: var(--su-segnale); border-radius: .12em;
  transform: rotate(-1.8deg); transform-origin: left center;
  font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 800;
}
.cartellino::before {
  content: ""; position: absolute; left: .2em; top: 50%; width: .15em; height: .15em; margin-top: -.075em;
  border-radius: 50%; background: var(--carta); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .18);
}
.cartellino .da { font-weight: 620; font-size: .62em; letter-spacing: -.01em; }
.cartellino--piccolo { font-size: var(--t-19); padding: .06em .34em .1em .6em; border-radius: 6px; background: var(--bosco-tenue); color: var(--bosco-testo); box-shadow: inset 0 0 0 1px var(--bosco-bordo); }
.cartellino--piccolo::before { background: var(--superficie); box-shadow: inset 0 0 0 1px var(--bosco-bordo); }

.etichetta-offerta {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 6px;
  background: var(--offerta); color: var(--su-offerta); font: 700 var(--t-12)/1 var(--f-testo); letter-spacing: .02em;
}

/* ---------- scontrino di confronto ---------- */
.scontrino-box { width: min(340px, 100%); }
.scontrino-box__foglio { transform: rotate(1.2deg); filter: drop-shadow(0 18px 22px rgb(14 26 18 / .17)) drop-shadow(0 2px 3px rgb(14 26 18 / .1)); }
.scontrino {
  background: var(--scontrino); color: var(--scontrino-testo);
  font: 400 12.5px/1.45 var(--f-cassa); font-variation-settings: 'wdth' 90;
  padding: 20px 18px 32px;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
}
.scontrino__testa { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 10px; border-bottom: 1px dashed var(--scontrino-linea); }
.scontrino__testa strong { font-weight: 700; letter-spacing: .2em; font-size: 12px; }
.scontrino__testa span { font-size: 12px; color: var(--scontrino-2); }
.scontrino__prodotto { padding: 10px 0 11px; border-bottom: 1px dashed var(--scontrino-linea); font: 700 14px/1.3 var(--f-testo); letter-spacing: -.01em; }
.scontrino__prodotto small { display: block; margin-top: 2px; font: 500 12px/1.3 var(--f-cassa); color: var(--scontrino-2); }
.scontrino__righe { list-style: none; margin: 0; padding: 8px 0; border-bottom: 1px dashed var(--scontrino-linea); display: grid; gap: 4px; }
.riga { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px; }
.riga__logo { grid-row: span 2; height: 30px; display: grid; place-items: center; background: #FFFFFF; border-radius: 6px; box-shadow: inset 0 0 0 1px #E3E8E4; }
.riga__logo img { max-height: 18px; max-width: 42px; width: auto; height: auto; }
.riga__logo b { font: 700 11px/1 var(--f-testo); color: var(--scontrino-2); }
.riga__insegna { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.riga__prezzo { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; text-align: right; }
.riga__data { font-size: 12px; color: var(--scontrino-2); }
.riga__diff { font-size: 12px; color: var(--scontrino-2); text-align: right; font-variant-numeric: tabular-nums; }
.riga__offerta { color: var(--scontrino-offerta); font-weight: 700; }
.riga--meglio { background: var(--scontrino-meglio); }
.riga--meglio .riga__diff { color: var(--scontrino-meglio-testo); font-weight: 700; }
.scontrino__risparmio { padding-top: 12px; display: grid; gap: 3px; }
.scontrino__risparmio span { font: 750 16px/1.25 var(--f-testo); letter-spacing: -.01em; }
.scontrino__risparmio small { font-size: 12px; color: var(--scontrino-2); }
.scontrino__nota { margin-top: 12px; font-size: 12px; line-height: 1.45; color: var(--scontrino-2); text-align: center; }
.scontrino.stampa { animation: carta var(--t-stampa) var(--curva) both; }
.scontrino.stampa .compare { animation: compare .34s var(--curva) both; animation-delay: calc(var(--i, 0) * 75ms); }
@keyframes carta { from { transform: translateY(-12px); } to { transform: none; } }
@keyframes compare { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- tessere delle insegne e striscia ---------- */
.insegna-tessera { height: 48px; min-width: 96px; padding: 8px 16px; display: grid; place-items: center; background: var(--tessera); border-radius: 10px; box-shadow: inset 0 0 0 1px var(--linea); }
.insegna-tessera img { max-height: 26px; max-width: 92px; width: auto; height: auto; }
.striscia { display: flex; align-items: center; gap: 18px; }
.striscia__titolo { flex: none; font: 650 var(--t-14)/1.3 var(--f-testo); color: var(--inchiostro-2); }
.striscia__nastro { flex: 1; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.striscia__scorre { display: flex; width: max-content; gap: 14px; animation: nastro 48s linear infinite; }
.striscia__nastro:hover .striscia__scorre, .striscia__nastro:focus-within .striscia__scorre { animation-play-state: paused; }
@keyframes nastro { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .striscia__scorre { flex-wrap: wrap; width: auto; } .striscia__scorre [aria-hidden="true"] { display: none; } }

/* ---------- stati vuoti, errori, caricamento ---------- */
.vuoto { display: grid; justify-items: center; text-align: center; gap: 14px; padding: 48px 16px; }
.vuoto img { width: min(180px, 46vw); height: auto; }
.vuoto h2, .vuoto h3 { font-size: var(--t-24); }
.vuoto p { color: var(--inchiostro-2); max-width: 46ch; }
.vuoto--compatto { padding: 24px 12px; }
.vuoto--compatto img { width: 120px; }
.segnaposto { background: var(--carta-3); border-radius: var(--r-piccolo); min-height: 1em; }
.avviso { padding: 14px 16px; border-radius: var(--r); background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linea); color: var(--inchiostro-2); font-size: var(--t-16); }
.avviso--errore { background: var(--attenzione-tenue); color: var(--attenzione-testo); box-shadow: inset 0 0 0 1px var(--attenzione-bordo); }

/* ---------- schede prodotto (ricerca, offerte) ---------- */
.schede { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.scheda {
  display: grid; gap: 10px; align-content: start; padding: 18px; border-radius: var(--r-grande);
  background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linea); color: var(--inchiostro); text-decoration: none;
  transition: box-shadow var(--t-passaggio), background-color var(--t-passaggio);
}
.scheda:hover { box-shadow: inset 0 0 0 1.5px var(--bosco); }
.scheda__nome { font: 700 var(--t-17)/1.3 var(--f-testo); }
.scheda__marca { font-size: var(--t-14); color: var(--inchiostro-2); }
.scheda__prezzo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.scheda__prezzo .cartellino { font-size: var(--t-19); }
.scheda__nota { display: grid; gap: 2px; font-size: var(--t-14); color: var(--inchiostro-2); }
.scheda__dove { color: var(--inchiostro); font-weight: 600; }

/* ---------- filtri ---------- */
.filtri { display: flex; flex-wrap: wrap; gap: 8px; }
.filtro { min-height: 36px; padding: 8px 14px; border-radius: var(--r-pillola); border: 1px solid var(--linea-2); background: var(--superficie); color: var(--inchiostro); font: 600 var(--t-14)/1 var(--f-testo); }
.filtro[aria-pressed="true"] { background: var(--inchiostro); color: var(--carta); border-color: var(--inchiostro); }
.filtro:hover { background: var(--carta-2); }
.filtro[aria-pressed="true"]:hover { background: var(--inchiostro); }

/* ---------- tabella ---------- */
.tabella-box { overflow-x: auto; }
.tabella { width: 100%; border-collapse: collapse; font-size: var(--t-16); min-width: 560px; }
.tabella th, .tabella td { text-align: left; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabella th { font: 650 var(--t-14)/1.3 var(--f-testo); color: var(--inchiostro-2); border-bottom: 2px solid var(--inchiostro); }
.tabella td.num, .tabella th.num { text-align: right; font-variant-numeric: tabular-nums; }
.voto { display: inline-grid; place-items: center; min-width: 40px; height: 28px; padding: 0 8px; border-radius: 7px; font: 750 var(--t-14)/1 var(--f-testo); font-variant-numeric: tabular-nums; }
.voto--buono { background: var(--fascia-bassa-tenue); color: var(--bosco-testo); }
.voto--medio { background: var(--fascia-media-tenue); color: var(--inchiostro); }
.voto--caro { background: var(--fascia-alta-tenue); color: var(--fascia-alta-testo); }

/* ---------- blocchi di pagina ---------- */
.pagina-testa { padding-block: clamp(32px, 6vw, 72px) clamp(20px, 3vw, 32px); display: grid; gap: 14px; }
.pagina-testa > p, .pagina-testa > div > p { color: var(--inchiostro-2); font-size: var(--t-19); max-width: 34em; }
.due-colonne { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .due-colonne { grid-template-columns: 1fr; } }
.riquadro { padding: 22px 24px; border-radius: var(--r-grande); background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linea); display: grid; gap: 12px; align-content: start; }
.fatti { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .fatti { grid-template-columns: 1fr; } }
.meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 550 var(--t-14)/1.5 var(--f-testo); color: var(--inchiostro-2); font-variant-numeric: tabular-nums; }
.meta .punto::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--segnale); margin-right: 8px; vertical-align: 1px; }

/* ---------- funzioni del sito, per famiglia (home, /la-mia-spesa) ---------- */
.famiglie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
@media (max-width: 960px) { .famiglie { grid-template-columns: 1fr; } }
.famiglia { display: grid; gap: 14px; padding: 22px; border-radius: var(--r-grande); background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linea); }
.famiglia__testa h3 { font-size: var(--t-24); font-variation-settings: 'wdth' 88; letter-spacing: -.02em; }
.famiglia__testa p { margin-top: 4px; color: var(--inchiostro-2); font-size: var(--t-16); }
.famiglia__testa a { color: inherit; text-decoration: none; }
.famiglia__testa a:hover { text-decoration: underline; }
.funzioni { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.funzione { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px; margin-inline: -10px; border-radius: var(--r);
  color: var(--inchiostro); text-decoration: none; transition: background-color var(--t-passaggio); }
.funzione:hover { background: var(--carta); }
.funzione svg { width: 40px; height: 40px; padding: 9px; border-radius: 11px; background: var(--bosco-tenue); color: var(--bosco-testo); }
.funzione strong { display: block; font-weight: 720; line-height: 1.3; }
.funzione small { display: block; margin-top: 2px; color: var(--inchiostro-2); font-size: var(--t-14); line-height: 1.45; }
.funzioni--larghe { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.funzioni--larghe .funzione { margin: 0; padding: 18px; background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linea); }
.funzioni--larghe .funzione:hover { box-shadow: inset 0 0 0 1.5px var(--bosco); background: var(--superficie); }
@media (max-width: 700px) { .striscia { flex-direction: column; align-items: stretch; gap: 10px; } }

/* ---------- scheda offerta (offerta.js): dove, sconto, cosa, prezzo, risparmio, scadenza, altrove ---------- */
.offerte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.offerta {
  height: 100%; display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 14px; border-radius: var(--r-grande);
  background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linea); color: var(--inchiostro); text-decoration: none;
  transition: box-shadow var(--t-passaggio), transform var(--t-passaggio) var(--curva);
}
.offerta:hover { box-shadow: inset 0 0 0 1.5px var(--bosco), var(--ombra); transform: translateY(-2px); }
.offerta:active { transform: translateY(0); }
.offerta__testa { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.offerta__insegna { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--t-14); color: var(--inchiostro-2); min-width: 0; }
.offerta__logo { flex: none; width: 44px; height: 26px; display: grid; place-items: center; border-radius: 6px; background: var(--tessera); box-shadow: inset 0 0 0 1px var(--linea); }
.offerta__logo img { max-width: 38px; max-height: 17px; width: auto; height: auto; }
.offerta__sconto { flex: none; padding: 5px 9px; border-radius: 8px; background: var(--offerta); color: var(--su-offerta); font: 800 var(--t-16)/1 var(--f-testo); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.offerta__nome { font: 700 var(--t-17)/1.3 var(--f-testo); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.offerta__marca { font-size: var(--t-14); color: var(--inchiostro-2); }
.offerta__prezzi { display: flex; align-items: baseline; gap: 10px; margin-top: auto; padding-top: 8px; }
.offerta__prezzo { font: 800 1.75rem/1 var(--f-testo); letter-spacing: -.02em; font-variant-numeric: tabular-nums; font-variation-settings: 'wdth' 88; }
.offerta__pieno { font-size: var(--t-16); color: var(--inchiostro-3); font-variant-numeric: tabular-nums; }
.offerta__righe { display: grid; gap: 3px; padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--linea); font-size: var(--t-14); color: var(--inchiostro-2); }
.offerta__risparmio { color: var(--bosco-testo); font-weight: 750; }
.offerta__nota { color: var(--inchiostro-3); }
.offerta__scadenza--urgente { color: var(--attenzione-testo); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .offerta-voce { animation: offertaEntra .38s var(--curva) both; animation-delay: calc(min(var(--i, 0), 12) * 35ms); }
}
@keyframes offertaEntra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }