/* Orgoglio Tirchio — mini app.
 *
 * Impianto da APP, non da post ingrandito. La versione precedente ricalcava
 * la grafica delle immagini del bot (testata a gradiente arancione, cornici,
 * titoli di sezione colorati): sul canale funziona, perche' un post deve
 * farsi notare in mezzo ad altri post; su una pagina che si scorre per
 * minuti quella stessa intensita' stanca e fa sembrare tutto una pubblicita'.
 *
 * Qui l'arancione del marchio resta, ma fa SOLO l'accento: la pill dello
 * sconto, la tab attiva, il puntino del minimo storico. Il resto e' fondo
 * neutro, carte bianche e molta aria — cioe' l'aspetto che ha qualunque app
 * di shopping, e che lascia il colore ai prodotti.
 */
:root {
  --accento:   #ff6a00;   /* marchio: SOLO accenti */
  --accento-2: #e85d00;   /* stessa famiglia, per il testo su fondo chiaro */
  --verde:     #1f7a37;
  --rosso:     #c62828;
  --testo:     #17181c;
  --testo-2:   #43464e;
  --fioco:     #7c828d;
  --fondo:     #f6f6f8;
  --carta:     #ffffff;
  --bordo:     #ebebef;
  --ombra:     0 1px 2px rgba(16,18,22,.05), 0 4px 14px rgba(16,18,22,.05);
  --raggio:    14px;
}

/* Tema scuro: l'arancione non cambia — e' il marchio — cambiano i fondi e i
   grigi. Su Telegram vale anche il tema dell'app, applicato da app.js con la
   classe .scuro. */
@media (prefers-color-scheme: dark) {
  :root:not(.chiaro) {
    --testo: #f1f2f5; --testo-2: #c7cad1; --fioco: #949aa4;
    --fondo: #131417; --carta: #1c1d21; --bordo: #2a2c32;
    --verde: #4caf6a; --accento-2: #ff8534;
    --ombra: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
  }
}
:root.scuro {
  --testo: #f1f2f5; --testo-2: #c7cad1; --fioco: #949aa4;
  --fondo: #131417; --carta: #1c1d21; --bordo: #2a2c32;
  --verde: #4caf6a; --accento-2: #ff8534;
  --ombra: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}

/* --- Testata: niente banner colorato, solo testo su fondo pagina -------- */
.testata {
  max-width: 760px;
  margin: 0 auto;
  padding: 26px 18px 14px;
  padding-top: calc(26px + env(safe-area-inset-top));
}
.testata h1 {
  margin: 0;
  font-size: 25px;
  font-weight: 750;
  letter-spacing: -.5px;
  line-height: 1.2;
}
.sottotitolo {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--fioco);
}

/* --- Tab ---------------------------------------------------------------- */
.tabs {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  gap: 8px;
  max-width: 760px;
  margin: 0 auto;
  padding: 10px 14px 12px;
  /* Il fondo e' pieno, non trasparente: le card che scorrono sotto le tab
     devono sparire, non trasparire. */
  background: var(--fondo);
  border-bottom: 1px solid var(--bordo);
}
.tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  color: var(--testo-2);
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.tab:hover { border-color: #d8d9de; }
.tab.attiva {
  background: var(--accento);
  border-color: var(--accento);
  color: #fff;
}
.tab:focus-visible { outline: 2px solid var(--accento-2); outline-offset: 2px; }

/* Il conteggio e' un dato di servizio: sulla tab attiva deve restare
   leggibile ma non competere col nome della sezione. */
.conteggio {
  font-size: 12px;
  font-weight: 650;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  color: var(--fioco);
}
.tab.attiva .conteggio { background: rgba(255,255,255,.25); color: #fff; }
:root.scuro .conteggio, :root:not(.chiaro) .conteggio { background: rgba(255,255,255,.08); }
.tab.attiva .conteggio { background: rgba(255,255,255,.25); }

/* --- Lista -------------------------------------------------------------- */
main { padding: 14px 14px 4px; max-width: 760px; margin: 0 auto; }

.stato {
  padding: 48px 16px;
  text-align: center;
  color: var(--fioco);
  font-size: 14px;
}
.stato.errore { color: var(--rosso); }
.stato[hidden] { display: none; }

.rotella {
  display: block;
  width: 22px; height: 22px;
  margin: 0 auto 12px;
  border: 2px solid var(--bordo);
  border-top-color: var(--accento);
  border-radius: 50%;
  animation: gira .7s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rotella { animation: none; } }

.griglia { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .griglia { grid-template-columns: 1fr 1fr; } }

/* --- Card --------------------------------------------------------------- */
.card {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 11px;
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  text-decoration: none;
  color: inherit;
  transition: transform .12s ease, box-shadow .12s ease;
}
@media (hover: hover) {
  .card:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(16,18,22,.06), 0 10px 24px rgba(16,18,22,.08);
  }
}
.card:active { transform: scale(.995); }

.foto {
  flex: 0 0 88px;
  width: 88px; height: 88px;
  border-radius: 10px;
  overflow: hidden;
  /* Le foto prodotto di Amazon sono su bianco: su tema scuro un fondo bianco
     dietro l'immagine evita l'alone grigio dei PNG con trasparenza. */
  background: #fff;
}
.foto img { width: 100%; height: 100%; object-fit: contain; display: block; }

.corpo { flex: 1; min-width: 0; }

.titolo {
  margin: 1px 0 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--testo);
  /* Tre righe al massimo: le card devono restare alte uguali, altrimenti in
     due colonne la griglia diventa un dente di sega. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.etichette {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
  min-height: 0;
}
.etichette:empty { display: none; }

.condizione, .minimo {
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.condizione {
  color: var(--testo-2);
  background: rgba(0,0,0,.045);
  border: 1px solid var(--bordo);
}
:root.scuro .condizione, :root:not(.chiaro) .condizione { background: rgba(255,255,255,.06); }
.condizione:empty, .minimo:empty { display: none; }

/* Minimo storico: SENZA riquadro, solo un puntino arancione e testo tenue.
   Misurato sui dati veri, l'etichetta compare sull'81% delle offerte nuove:
   a quella frequenza un badge pieno non distingue piu' niente, fa solo
   rumore e si mette a litigare con la pill dello sconto, che invece deve
   essere l'unica cosa che salta all'occhio. Resta scritta perche' e'
   informazione vera, ma al volume che le compete. */
.minimo {
  color: var(--fioco);
  background: none;
  border: 0;
  padding: 2px 0;
  font-weight: 500;
}
.minimo::before {
  content: "●";
  color: var(--accento);
  font-size: 8px;
  vertical-align: middle;
  margin-right: 5px;
}

.prezzi {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 9px;
}
.ora { font-size: 18px; font-weight: 750; letter-spacing: -.3px; }
.prima {
  font-size: 13px;
  color: var(--fioco);
  text-decoration: line-through;
}
.prima:empty { display: none; }

/* La pill dello sconto: il pezzo di arancione che deve saltare all'occhio. */
.pill {
  margin-left: auto;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: -.2px;
  color: #fff;
  background: var(--accento);
  padding: 3px 9px;
  border-radius: 8px;
  white-space: nowrap;
}
.pill:empty { display: none; }

/* --- Caricamento progressivo -------------------------------------------- */
.sentinella { height: 1px; }
.sentinella[hidden] { display: none; }

.altro {
  padding: 18px 10px 6px;
  text-align: center;
  font-size: 13px;
  color: var(--fioco);
}

/* --- Piede -------------------------------------------------------------- */
.piede {
  max-width: 760px;
  margin: 0 auto;
  padding: 26px 18px calc(26px + env(safe-area-inset-bottom));
  text-align: center;
  font-size: 12px;
  color: var(--fioco);
  line-height: 1.5;
}
.piede p { margin: 4px 0; }
.piede .fioco { opacity: .8; }