/* TA — le tre sezioni commerciali. r3, 30/10/2026.

   ⛔ PERCHE' LA r3. Le schede della r2 erano BIANCHE su un sito blu notte:
      stonavano con tutto. Il difetto non era il contrasto (quello era giusto):
      era l'ESTRANEITA'. Una sezione nuova non deve farsi notare per lo stile,
      deve sembrare sempre stata li'.

   ⭐ NIENTE E' INVENTATO QUI. Ogni valore e' stato MISURATO sulla pagina viva
      con il browser, leggendo la vetrina di casa:
        fondo pagina   rgb(7,12,30)      · testo       rgb(238,242,251)
        bordo scheda   rgb(44,60,112)    · raggio      22px
        prezzo         rgb(255,178,0)    · Montserrat 900
        misura (targa) rgb(124,192,236)  · Inter 13px
        pulsante       linear-gradient(#FFB200,#FF9900), testo #2A1A00,
                       raggio 12px, altezza 56px, ombra 0 5px 0 #B56D00
      I caratteri sono quelli gia' caricati dal sito: nessun carattere nuovo.

   ⛔ I pulsanti occupano TUTTA la larghezza della scheda: cosi' sono identici
      fra loro per costruzione. (La Presidenza ha segnalato che nella vetrina
      di casa ognuno ha una larghezza diversa.)

   ⛔ Si guarda col dito prima che col mouse: una colonna sotto i 600 px. */

.ta-sz {
  --ta-fondo:   #0E1733;   /* la scheda: un gradino sopra il fondo pagina */
  --ta-bordo:   #2C3C70;
  --ta-testo:   #EEF2FB;
  --ta-tenue:   #9FB0D0;
  --ta-ambra:   #FFB200;
  --ta-ambra2:  #FF9900;
  --ta-ombra:   #B56D00;
  --ta-inchio:  #2A1A00;
  --ta-targa:   #7CC0EC;
  --ta-rosso:   #D3302A;
  margin: 3rem 0 0;
}
.ta-sz + .ta-sz { margin-top: 2.5rem; }

.ta-sz .ta-sz-h {
  font-family: Montserrat, system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  line-height: 1.15;
  color: var(--ta-testo) !important;
  margin: 0 0 1.1rem;
}

/* ══ COME SI DISPONGONO LE SCHEDE ═══════════════════════════════════
   ⛔ Segnalato dalla Presidenza il 30/10: le schede stavano a due a due e
      meta' schermo restava vuoto. La causa vera era la POSIZIONE (eravamo
      dentro una colonna stretta da 669 px), corretta nel componente. Qui si
      rende la griglia capace di riempire tutta la fascia quando c'e'.
   ⛔ E sul TELEFONO non si impilano piu' una sotto l'altra: scorrono di
      lato, come chiede il Presidente, cosi' la sezione occupa l'altezza di
      UNA scheda invece che di venti. */
.ta-sz-griglia {
  display: grid; gap: 1rem; align-items: stretch;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  grid-template-columns: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  padding-bottom: .6rem;
  /* la barra di scorrimento resta discreta ma visibile: deve capirsi che
     c'e' altro a destra */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,178,0,.55) transparent;
}
.ta-sz-griglia > * { scroll-snap-align: start; }
.ta-sz-griglia::-webkit-scrollbar { height: 6px; }
.ta-sz-griglia::-webkit-scrollbar-thumb {
  background: rgba(255,178,0,.55); border-radius: 3px;
}
/* dal tablet in su torna una griglia normale, che riempie la riga */
@media (min-width: 700px) {
  .ta-sz-griglia {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    overflow-x: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }
}

.ta-sz .ta-sz-card,
.ta-sz .ta-sz-conf {
  background: var(--ta-fondo);
  border: 1px solid var(--ta-bordo);
  border-radius: 22px;
  padding: 1rem;
  color: var(--ta-testo) !important;
  position: relative;
  display: flex; flex-direction: column; gap: .55rem;
}
.ta-sz .ta-sz-card > *, .ta-sz .ta-sz-conf > * { color: inherit; }

/* la fotografia sta su una piastra chiara: i prodotti sono fotografati su
   fondo bianco, e su fondo scuro sparirebbero */
.ta-sz .ta-sz-foto {
  background: #fff; border-radius: 14px; padding: .5rem;
  display: flex; align-items: center; justify-content: center;
  height: 150px;
}
.ta-sz .ta-sz-foto img { max-width: 100%; max-height: 134px; object-fit: contain; }
.ta-sz .ta-sz-foto--conf { height: 112px; width: 112px; flex: 0 0 112px; }

.ta-sz .ta-sz-nome {
  font-family: Inter, system-ui, sans-serif;
  font-size: .98rem; font-weight: 600; line-height: 1.32;
  color: var(--ta-testo) !important; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ta-sz .ta-sz-targa {
  align-self: flex-start;
  font-size: .8rem; letter-spacing: .04em;
  color: var(--ta-targa) !important;
  border: 1px solid rgba(124,192,236,.4);
  border-radius: 8px; padding: .12rem .45rem;
}
.ta-sz .ta-sz-riga { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.ta-sz .ta-sz-prezzo {
  font-family: Montserrat, system-ui, sans-serif;
  font-weight: 900; font-size: 1.5rem; line-height: 1;
  color: var(--ta-ambra) !important;
}
.ta-sz .ta-sz-pieno {
  text-decoration: line-through; font-size: .9rem;
  color: var(--ta-tenue) !important;
}
.ta-sz .ta-sz-sped,
.ta-sz .ta-sz-meta {
  font-size: .82rem; line-height: 1.4;
  color: var(--ta-tenue) !important; margin: 0;
}
.ta-sz .ta-sz-codice {
  align-self: flex-start;
  font-weight: 700; font-size: .85rem; letter-spacing: .03em;
  color: var(--ta-testo) !important;
  background: rgba(255,255,255,.08);
  border-radius: 8px; padding: .22rem .5rem;
}
.ta-sz .ta-sz-sconto {
  position: absolute; top: .75rem; right: .75rem; z-index: 2;
  background: var(--ta-rosso); color: #fff !important;
  font-weight: 800; font-size: .82rem;
  padding: .16rem .5rem; border-radius: 8px;
}

/* ── il pulsante: identico ovunque, largo quanto la scheda ────────── */
.ta-sz .ta-sz-cta {
  margin-top: auto;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: .1rem; text-align: center;
  width: 100%; min-height: 56px; box-sizing: border-box;
  padding: .7rem 1rem;
  background: linear-gradient(var(--ta-ambra), var(--ta-ambra2));
  color: var(--ta-inchio) !important;
  border-radius: 12px; text-decoration: none;
  box-shadow: 0 5px 0 0 var(--ta-ombra);
  transition: transform .14s, box-shadow .14s;
}
.ta-sz .ta-sz-cta * { color: var(--ta-inchio) !important; }
.ta-sz .ta-sz-cta:hover { transform: translateY(2px); box-shadow: 0 3px 0 0 var(--ta-ombra); }
.ta-sz .ta-sz-cta:focus-visible { outline: 3px solid var(--ta-targa); outline-offset: 3px; }
.ta-sz .ta-sz-cta-t { font-size: .82rem; font-weight: 600; opacity: .85; }
.ta-sz .ta-sz-cta-n { font-size: 1rem; font-weight: 800; line-height: 1.2; }
@media (prefers-reduced-motion: reduce) {
  .ta-sz .ta-sz-cta { transition: none; }
  .ta-sz .ta-sz-cta:hover { transform: none; }
}

/* ── il confronto ──────────────────────────────────────────────────
   ⛔ Segnalato il 30/10: le schede di confronto stavano incolonnate una
      sotto l'altra con tutto lo spazio a destra vuoto. Ora: due per riga dal
      tablet in su, e scorrimento laterale sul telefono. */
.ta-sz-confronti-fila {
  display: grid; gap: 1rem;
  grid-auto-flow: column; grid-auto-columns: 86%;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; padding-bottom: .6rem;
  scrollbar-width: thin; scrollbar-color: rgba(255,178,0,.55) transparent;
}
.ta-sz-confronti-fila > * { scroll-snap-align: start; }
.ta-sz-confronti-fila::-webkit-scrollbar { height: 6px; }
.ta-sz-confronti-fila::-webkit-scrollbar-thumb {
  background: rgba(255,178,0,.55); border-radius: 3px;
}
@media (min-width: 700px) {
  .ta-sz-confronti-fila {
    grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow-x: visible; scroll-snap-type: none; padding-bottom: 0;
  }
}
.ta-sz .ta-sz-conf {
  flex-direction: row; gap: 1rem; align-items: flex-start; margin-bottom: 0;
}
@media (max-width: 559px) { .ta-sz .ta-sz-conf { flex-direction: column; } }
.ta-sz .ta-sz-conf-c { flex: 1 1 auto; min-width: 0; display: flex;
  flex-direction: column; gap: .5rem; }
.ta-sz .ta-sz-lista { list-style: none; margin: .2rem 0 0; padding: 0;
  display: flex; flex-direction: column; gap: .5rem; }
.ta-sz .ta-sz-lista li {
  display: grid; grid-template-columns: 1fr minmax(180px, 230px);
  gap: .8rem; align-items: center;
  padding: .55rem 0; border-top: 1px solid rgba(255,255,255,.1);
}
@media (max-width: 559px) { .ta-sz .ta-sz-lista li { grid-template-columns: 1fr; } }
.ta-sz .ta-sz-lista li:first-child { border-top: 0; }
.ta-sz .ta-sz-lista-sx { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.ta-sz .ta-sz-lista .ta-sz-cta { min-height: 46px; padding: .45rem .8rem; }
.ta-sz .ta-sz-lista .ta-sz-cta-n { font-size: .92rem; }
.ta-sz .ta-sz-migliore .ta-sz-prezzo { font-size: 1.7rem; }

.ta-sz .ta-sz-nota, .ta-sz .ta-sz-data, .ta-sz-data {
  font-size: .88rem; color: var(--ta-tenue) !important; margin: .6rem 0 0;
}

/* ══ IL BANNER DELLE PROMOZIONI ════════════════════════════════════════
   ⛔ Segnalato il 31/10: con una promozione sola la scheda restava stretta
      a sinistra e mezzo schermo rimaneva vuoto. Una promozione non e' un
      prodotto in vetrina: e' un annuncio, e un annuncio sta su una FASCIA.
      Qui diventa una riga a tutta larghezza: a sinistra che cos'e' e da chi,
      a destra il pulsante. Sul telefono si impila dentro la stessa fascia. */
.ta-sz-offerte .ta-sz-griglia {
  grid-auto-flow: row;
  grid-template-columns: 1fr;
  grid-auto-columns: auto;
  overflow-x: visible;
  scroll-snap-type: none;
  padding-bottom: 0;
  gap: .7rem;
}
@media (min-width: 700px) {
  .ta-sz-offerte .ta-sz-griglia { grid-template-columns: 1fr; }
}
.ta-sz-offerte .ta-sz-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: .35rem;
  align-items: center;
  /* il pulsante e' piu' alto del testo: senza questo le righe del testo si
     allontanano per riempire la sua altezza, e il banner sembra vuoto */
  align-content: center;
  padding: 1rem 1.1rem;
}
@media (min-width: 700px) {
  .ta-sz-offerte .ta-sz-card {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1.4rem;
  }
  /* titolo, codice e riga di servizio stanno nella prima colonna */
  .ta-sz-offerte .ta-sz-card .ta-sz-nome,
  .ta-sz-offerte .ta-sz-card .ta-sz-codice,
  .ta-sz-offerte .ta-sz-card .ta-sz-meta,
  .ta-sz-offerte .ta-sz-card .ta-sz-riga { grid-column: 1; }
  /* il pulsante sta a destra, su tutte le righe della scheda */
  .ta-sz-offerte .ta-sz-card .ta-sz-cta {
    grid-column: 2; grid-row: 1 / -1;
    width: 260px; margin-top: 0; align-self: center;
  }
}
.ta-sz-offerte .ta-sz-card .ta-sz-nome {
  font-size: 1.12rem; -webkit-line-clamp: 2;
}
.ta-sz-offerte .ta-sz-foto { display: none; }   /* un annuncio non ha vetrina */

/* ══ I CERCHI IN LEGA, SUL TELEFONO ════════════════════════════════════
   Il contenitore ha gli stili scritti dentro l'elemento con «!important»:
   nessun foglio esterno puo' cambiarlo. Lo aggiusta il componente, che
   aggiunge questa classe; qui c'e' solo il come. */
.ta-fila-scorre {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: 78% !important;
  grid-template-columns: none !important;
  overflow-x: auto !important;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-bottom: .6rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,178,0,.55) transparent;
}
.ta-fila-scorre > * { scroll-snap-align: start; }
.ta-fila-scorre::-webkit-scrollbar { height: 6px; }
.ta-fila-scorre::-webkit-scrollbar-thumb {
  background: rgba(255,178,0,.55); border-radius: 3px;
}


/* ───────────────────────────────────────────────────────────────────────
   LA PORTA — si disegna quando nel paese del lettore non abbiamo merce.
   ⭐ 01/11/2026, guardando la pagina ELABORAZIONE con gli occhi di un
   lettore italiano: la porta era UNA sola, una scheda stretta appoggiata a
   sinistra su una riga larga 1200 px. Sembrava un pezzo rimasto a meta'.
   Le porte sono poche per definizione: niente scorrimento laterale, e la
   riga si tiene al centro.
   ─────────────────────────────────────────────────────────────────────── */
.ta-sz-porta .ta-sz-griglia {
  grid-auto-flow: row;
  grid-template-columns: 1fr;
  grid-auto-columns: auto;
  overflow-x: visible;
  scroll-snap-type: none;
  padding-bottom: 0;
}
@media (min-width: 700px) {
  .ta-sz-porta .ta-sz-griglia {
    grid-template-columns: repeat(auto-fit, minmax(240px, 300px));
    justify-content: start;   /* allineata al titolo, non al centro della riga */
  }
}
.ta-sz-porta .ta-sz-griglia > :only-child {
  width: 100%; max-width: 420px;
}