/* Stazione Negozio — schermi TOUCH del punto vendita.
   Regole: bersagli grandi (min 56px), font grandi, niente hover-only,
   tutto raggiungibile con un dito o col lettore barcode. */

:root {
  --blu: #1976d2; --verde: #16a34a; --verde-scuro: #15803d;
  --rosso: #dc2626; --ambra: #d97706;
  --g900: #0f172a; --g700: #334155; --g500: #64748b;
  --g300: #cbd5e1; --g200: #e2e8f0; --g100: #f1f5f9; --g50: #f8fafc;
  --raggio: 14px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--g100); color: var(--g900);
  font: 17px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  touch-action: manipulation; user-select: none;
}
input, button, select { font: inherit; }
[hidden] { display: none !important; }

/* ------------------------------------------------------------- LOGIN */
#login { position: fixed; inset: 0; display: grid; place-items: center;
  background: linear-gradient(160deg, #14532d, #0f172a); z-index: 50; }
.card-login { width: min(420px, 92vw); background: #fff; border-radius: 20px;
  padding: 34px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.card-login h1 { margin: 0; font-size: 26px; }
.card-login .sotto { color: var(--g500); margin: 6px 0 22px; }
.card-login input { width: 100%; padding: 16px; font-size: 19px; border: 2px solid var(--g300);
  border-radius: 12px; margin-bottom: 12px; text-align: center; }
.card-login input:focus { outline: 0; border-color: var(--verde); }
.card-login button { width: 100%; padding: 18px; font-size: 20px; font-weight: 800;
  border: 0; border-radius: 12px; background: var(--verde); color: #fff; }
.card-login .errore { background: #fee2e2; color: #b91c1c; padding: 12px;
  border-radius: 10px; margin-bottom: 12px; }

/* ----------------------------------------------------------- STRUTTURA */
#app { display: flex; flex-direction: column; min-height: 100vh; }
#testata { display: flex; align-items: center; gap: 14px; padding: 10px 14px;
  background: var(--g900); color: #fff; position: sticky; top: 0; z-index: 20; }
#dove { flex: 1; line-height: 1.2; }
#dove b { font-size: 19px; }
#dove span { display: block; font-size: 13px; color: var(--g300); }
#orologio { font-size: 21px; font-variant-numeric: tabular-nums; }
.tondo { width: 52px; height: 52px; border-radius: 50%; border: 0; font-size: 22px;
  background: rgba(255,255,255,.12); color: #fff; }
.tondo:active { background: rgba(255,255,255,.3); }
main { flex: 1; padding: 16px; max-width: 1200px; width: 100%; margin: 0 auto; }

/* ------------------------------------------------------------ MATTONI */
.mattoni { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px; margin-top: 8px; }
.mattone { border: 0; border-radius: var(--raggio); padding: 28px 18px; background: #fff;
  box-shadow: 0 2px 8px rgba(15,23,42,.08); font-size: 21px; font-weight: 750;
  display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--g900); }
.mattone small { font-weight: 400; font-size: 14px; color: var(--g500); }
.mattone .emoji { font-size: 42px; }
.mattone:active { transform: scale(.97); }
.mattone.verde { background: var(--verde); color: #fff; }
.mattone.verde small { color: #dcfce7; }

.bottone { border: 0; border-radius: var(--raggio); padding: 18px 22px; font-size: 20px;
  font-weight: 800; background: var(--g200); color: var(--g900); min-height: 60px; }
.bottone:active { transform: scale(.97); }
.bottone.verde { background: var(--verde); color: #fff; }
.bottone.blu { background: var(--blu); color: #fff; }
.bottone.rosso { background: var(--rosso); color: #fff; }
.bottone.ghost { background: #fff; border: 2px solid var(--g300); }
.bottone:disabled { opacity: .4; }
.bottone.largo { width: 100%; }

/* --------------------------------------------------------------- CASSA */
.cassa { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
@media (max-width: 900px) { .cassa { grid-template-columns: 1fr; } }

#campo-scan { display: flex; gap: 10px; margin-bottom: 12px; }
#campo-scan input { flex: 1; padding: 18px; font-size: 24px; border: 3px solid var(--verde);
  border-radius: var(--raggio); font-family: ui-monospace, Menlo, monospace; background: #fff; }
#campo-scan input:focus { outline: 0; box-shadow: 0 0 0 4px rgba(22,163,74,.25); }

.righe { background: #fff; border-radius: var(--raggio); overflow: hidden;
  box-shadow: 0 2px 8px rgba(15,23,42,.08); }
.riga { display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-bottom: 1px solid var(--g100); }
.riga .info { flex: 1; min-width: 0; }
.riga .info b { font-size: 18px; }
.riga .info small { display: block; color: var(--g500); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.riga .tot { font-size: 20px; font-weight: 800; min-width: 86px; text-align: right; }
.passo { display: flex; align-items: center; gap: 4px; }
.passo button { width: 52px; height: 52px; font-size: 26px; font-weight: 800; border: 0;
  border-radius: 12px; background: var(--g100); }
.passo button:active { background: var(--g300); }
.passo .q { min-width: 44px; text-align: center; font-size: 21px; font-weight: 800; }
.riga .via { width: 48px; height: 48px; border: 0; border-radius: 10px;
  background: #fee2e2; color: #b91c1c; font-size: 20px; }

.pannello-tot { background: #fff; border-radius: var(--raggio); padding: 18px;
  box-shadow: 0 2px 8px rgba(15,23,42,.08); display: grid; gap: 12px;
  position: sticky; top: 76px; }
.pannello-tot .totale { text-align: center; }
.pannello-tot .totale small { color: var(--g500); }
.pannello-tot .totale .cifra { font-size: 52px; font-weight: 850; letter-spacing: -.02em;
  color: var(--verde-scuro); font-variant-numeric: tabular-nums; }

.vuota { text-align: center; color: var(--g500); padding: 44px 16px; background: #fff;
  border-radius: var(--raggio); }
.vuota .emoji { font-size: 46px; display: block; margin-bottom: 8px; }

/* --------------------------------------------------------------- VELO */
#velo { position: fixed; inset: 0; background: rgba(15,23,42,.6); display: grid;
  place-items: center; z-index: 40; padding: 14px; }
.modale { background: #fff; border-radius: 20px; padding: 22px;
  width: min(480px, 96vw); max-height: 92vh; overflow: auto; }
.modale h2 { margin: 0 0 14px; font-size: 23px; text-align: center; }
.modale .cifrona { text-align: center; font-size: 46px; font-weight: 850;
  color: var(--verde-scuro); margin-bottom: 14px; }
.modale label { display: block; font-size: 14px; font-weight: 700; color: var(--g700); margin: 10px 0 4px; }
.modale input, .modale select { width: 100%; padding: 15px; font-size: 22px;
  border: 2px solid var(--g300); border-radius: 12px; text-align: center; }
.modale input:focus { outline: 0; border-color: var(--blu); }
.paga-rapido { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 2px; }
.taglio { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.taglio button { padding: 13px 0; font-size: 18px; font-weight: 800; border: 2px solid var(--g300);
  border-radius: 10px; background: #fff; }
.taglio button:active { background: var(--g100); }
.modale .piede { display: flex; gap: 10px; margin-top: 16px; }
.modale .piede .bottone { flex: 1; }
.resto-grande { text-align: center; font-size: 30px; font-weight: 850; color: var(--blu); margin-top: 10px; }

/* ------------------------------------------------------------ TABELLE */
table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--raggio);
  overflow: hidden; box-shadow: 0 2px 8px rgba(15,23,42,.08); }
th { text-align: left; font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--g500); padding: 12px 14px; background: var(--g50); }
td { padding: 13px 14px; border-top: 1px solid var(--g100); font-size: 16px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, Menlo, monospace; }
.pill { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 13px; font-weight: 700; }
.pill.verde { background: #dcfce7; color: #15803d; }
.pill.rosso { background: #fee2e2; color: #b91c1c; }
.pill.blu { background: #dbeafe; color: #1d4ed8; }
.pill.viola { background: #ede9fe; color: #6d28d9; }
.pill.grigio { background: var(--g100); color: var(--g700); }
.pill.ambra { background: #fef3c7; color: #92400e; }
.mattone:disabled { opacity: .45; }

.testa-vista { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.testa-vista h2 { margin: 0; font-size: 24px; flex: 1; }

/* ------------------------------------------------------------ MESSAGGI */
#messaggi { position: fixed; right: 14px; bottom: 14px; display: grid; gap: 8px; z-index: 60; }
.messaggio { background: var(--g900); color: #fff; padding: 14px 18px; border-radius: 12px;
  font-size: 17px; box-shadow: 0 10px 25px rgba(0,0,0,.3); }
.messaggio.errore { background: var(--rosso); }
.messaggio.ok { background: var(--verde-scuro); }

/* --------------------------------------------------------------- STAMPA */
@media print {
  body * { visibility: hidden; }
  #stampa, #stampa * { visibility: visible; }
  #stampa { position: absolute; inset: 0; display: block !important; }
}

/* ------------------------------------------- BARRA "DOVE STA" IN CASSA */
#eco-scan { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #fff; border: 2px solid var(--g200); border-radius: var(--raggio);
  padding: 10px 14px; margin-bottom: 12px; }
#eco-scan .eco-nome { font-weight: 800; font-size: 16px; }
.eco-pill { padding: 7px 13px; border-radius: 99px; background: var(--g100);
  font-size: 15px; white-space: nowrap; }
.eco-pill b { font-size: 17px; }
.eco-pill.qui { background: #dcfce7; color: #15803d; }
#eco-scan .eco-nota { color: var(--g500); font-size: 14px; margin-left: auto; }

/* righe di reso in cassa */
.riga-reso { background: #fef2f2; border-left: 7px solid var(--rosso); }
.tag-reso { display: inline-block; background: var(--rosso); color: #fff; font-size: 13px;
  font-weight: 800; letter-spacing: .5px; padding: 2px 9px; border-radius: 6px;
  vertical-align: middle; margin-right: 6px; }
.riga .gira { width: 48px; height: 48px; border: 0; border-radius: 10px;
  background: var(--g100); font-size: 18px; }
.riga-reso .gira { background: #fee2e2; }
#modo-reso.rosso { background: var(--rosso); color: #fff; border-color: var(--rosso); }

/* Pulsantiera dei tasti rapidi: SOTTO le righe del conto, griglia grande
   sempre a portata di dito. */
#tasti-rapidi { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px; margin-top: 12px; }
.rapido { border: 2px solid var(--g300); background: #fff; border-radius: 14px;
  padding: 12px 10px; font-size: 17px; font-weight: 800; min-height: 66px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; box-shadow: 0 1px 4px rgba(15,23,42,.06); }
.rapido small { font-weight: 600; color: var(--g500); font-size: 13px; }
.rapido:active { background: var(--g100); transform: scale(.96); }
.rapido.ghost { border-style: dashed; color: var(--g500); box-shadow: none; }
.rapido.articolo { border-color: var(--blu); color: var(--blu); }

/* Tastierino del PIN operatore: tasti grandi da touch */
.tastierino {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin: 8px 0;
}
.tastierino button {
  min-height: 64px; font-size: 26px; font-weight: 700;
  border: 2px solid var(--g300); border-radius: 14px;
  background: #fff; cursor: pointer;
}
.tastierino button:active { background: var(--g100); }

/* Righe dei risultati nella ricerca cliente */
.riga-cliente {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; text-align: left; padding: 12px 14px; margin-top: 8px;
  border: 2px solid var(--g300); border-radius: 12px; background: #fff;
  font-size: 16px; cursor: pointer;
}
.riga-cliente small { color: var(--g500); }
.riga-cliente:active { background: var(--g100); }

/* Foto in cassa: banner dello scan e righe del conto */
.eco-foto { width: 42px; height: 42px; object-fit: contain; border-radius: 8px;
  background: #fff; flex: none; }
.riga .riga-foto { width: 46px; height: 46px; object-fit: contain; border-radius: 10px;
  background: #fff; flex: none; border: 1px solid var(--g100); }

/* Scelta taglia/colore e risultati della ricerca: bottoni grandi, da dito */
.lista-scelte { display: flex; flex-direction: column; gap: 8px; max-height: 56vh;
  overflow: auto; margin-top: 8px; }
.scelta-art { display: flex; align-items: center; gap: 12px; width: 100%;
  text-align: left; padding: 10px 12px; border: 2px solid var(--g300);
  border-radius: 12px; background: #fff; font-size: 16px; cursor: pointer; }
.scelta-art:active { background: var(--g100); }
.scelta-art img { width: 52px; height: 52px; object-fit: contain; border-radius: 10px;
  background: #fff; flex: none; }
.scelta-art .sa-info { flex: 1; min-width: 0; }
.scelta-art .sa-info b { font-size: 17px; }
.scelta-art .sa-info small { display: block; color: var(--g500); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.scelta-art .sa-dx { flex: none; text-align: right; }
.scelta-art .sa-dx small { display: block; color: var(--g500); }

.mono { font-family: ui-monospace, Menlo, monospace; }

/* ------------------------------------------ HOME (25-10-2026, rifatta)
   Funzioni a sinistra con icone grandi e sottili, «Da fare» a destra. */
main:has(.home) { max-width: 1440px; }
.home { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.home-saluto { font-size: 24px; font-weight: 300; color: var(--g700); margin: 4px 2px 18px; }
.home-saluto b { font-weight: 650; color: var(--g900); }
.home-saluto span { display: block; font-size: 14px; color: var(--g500); text-transform: capitalize; margin-top: 2px; }
.tessere { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.tessera { position: relative; border: 1px solid var(--g200); border-radius: 18px; background: #fff;
  padding: 22px 16px 18px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--g900); text-align: center; box-shadow: 0 1px 2px rgba(15,23,42,.04); transition: box-shadow .15s, transform .1s; }
.tessera:active { transform: scale(.97); }
.tessera:hover { box-shadow: 0 6px 18px rgba(15,23,42,.08); }
.tessera-icona { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center;
  background: var(--g50); color: var(--g700); margin-bottom: 4px; }
.tessera-icona svg { width: 36px; height: 36px; }
.tessera-titolo { font-size: 18px; font-weight: 650; letter-spacing: -.01em; }
.tessera-sotto { font-size: 13px; color: var(--g500); line-height: 1.3; }
.tessera.principale { grid-column: span 2; flex-direction: row; justify-content: flex-start; gap: 18px;
  text-align: left; background: var(--g900); border-color: var(--g900); color: #fff; padding: 22px 26px; }
.tessera.principale .tessera-icona { background: rgba(255,255,255,.1); color: #fff; width: 76px; height: 76px; margin: 0; }
.tessera.principale .tessera-icona svg { width: 44px; height: 44px; }
.tessera.principale .tessera-titolo { font-size: 26px; }
.tessera.principale .tessera-sotto { color: var(--g300); font-size: 15px; }
.tessera.principale > .tessera-titolo, .tessera.principale > .tessera-sotto { display: block; }
.tessera.principale { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 20px; align-items: center; }
.tessera.principale .tessera-icona { grid-row: span 2; }
.tessera.principale .tessera-titolo { align-self: end; }
.tessera.principale .tessera-sotto { align-self: start; }
.tessera-badge { position: absolute; top: 12px; right: 12px; min-width: 26px; height: 26px; padding: 0 8px;
  border-radius: 99px; background: var(--g700); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; }
.tessera-badge.rosso { background: var(--rosso); }
.tessera-badge.ambra { background: var(--ambra); }
.tessera-badge.blu { background: var(--blu); }
.tessera-badge:empty { display: none; }
.home-avvisi { background: #fff; border: 1px solid var(--g200); border-radius: 18px; padding: 18px; position: sticky; top: 92px; }
.home-avvisi h3 { margin: 0 0 12px; font-size: 15px; text-transform: uppercase; letter-spacing: .08em; color: var(--g500); font-weight: 650; }
.home-avvisi h3 span { background: var(--g900); color: #fff; border-radius: 99px; padding: 1px 9px; font-size: 12px; margin-left: 6px; }
.avviso-home { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; border: 0;
  border-left: 4px solid var(--g300); background: var(--g50); border-radius: 12px; padding: 14px 12px; margin-bottom: 10px; color: var(--g900); }
.avviso-home:active { transform: scale(.98); }
.avviso-icona { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: #fff; }
.avviso-icona svg { width: 24px; height: 24px; }
.avviso-testo { flex: 1; line-height: 1.25; }
.avviso-testo b { display: block; font-size: 16px; }
.avviso-testo small { color: var(--g500); font-size: 13px; }
.avviso-freccia { font-size: 26px; color: var(--g300); }
.avviso-home.ambra { border-left-color: var(--ambra); } .avviso-home.ambra .avviso-icona { color: var(--ambra); }
.avviso-home.rosso { border-left-color: var(--rosso); } .avviso-home.rosso .avviso-icona { color: var(--rosso); }
.avviso-home.blu { border-left-color: var(--blu); } .avviso-home.blu .avviso-icona { color: var(--blu); }
.avviso-home.viola { border-left-color: #7c3aed; } .avviso-home.viola .avviso-icona { color: #7c3aed; }
.avviso-home.rosa { border-left-color: #db2777; } .avviso-home.rosa .avviso-icona { color: #db2777; }
.avvisi-vuoti { text-align: center; color: var(--g500); padding: 24px 8px; }
.avvisi-vuoti svg { width: 44px; height: 44px; color: var(--verde); display: block; margin: 0 auto 8px; }
.avvisi-vuoti b { display: block; color: var(--g900); }
@media (max-width: 980px) {
  .home { grid-template-columns: 1fr; }
  .home-avvisi { position: static; order: -1; }
  .tessera.principale { grid-column: 1 / -1; }
}
/* 25-10: più pulita — sotto le tessere solo il nome; i numeri stanno nel bollino */
.tessera:not(.principale) .tessera-sotto { display: none; }
.tessera:not(.principale) { padding: 26px 16px 22px; }

/* =====================================================================
   STILE ELEGANTE PER TUTTE LE PAGINE (25-10-2026)
   Stessa mano della home: bianco, bordi sottili, blu notte per le azioni
   principali, icone dentro un riquadro chiaro, pesi meno urlati.
   È tutto qui in fondo: per tornare indietro basta togliere questo blocco.
   ===================================================================== */
:root { --notte: #0f172a; --raggio: 16px; }
body { background: #f4f6f9; letter-spacing: -.005em; }
main { padding: 20px 24px; }

/* intestazione delle pagine */
.testa-vista { gap: 10px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--g200); }
.testa-vista h2 { font-size: 26px; font-weight: 650; letter-spacing: -.02em; }
.testa-vista h2 small { font-weight: 400; color: var(--g500); }

/* bottoni: meno pesanti, bordi sottili */
.bottone { font-weight: 650; font-size: 18px; border-radius: 14px; min-height: 56px; padding: 14px 20px;
  background: var(--g100); transition: background .15s, box-shadow .15s; }
.bottone.ghost { border: 1px solid var(--g300); background: #fff; color: var(--g900); }
.bottone.ghost:hover { border-color: var(--g500); }
.bottone.blu { background: var(--notte); }
.bottone.verde { background: var(--verde-scuro); }
.bottone.rosso { background: #b91c1c; }

/* mattoni delle pagine interne: come le tessere della home */
.mattoni { gap: 14px; }
.mattone { border: 1px solid var(--g200); border-radius: 18px; box-shadow: 0 1px 2px rgba(15,23,42,.04);
  font-size: 18px; font-weight: 650; padding: 22px 16px; gap: 8px; }
.mattone small { font-size: 13px; }
.mattone .emoji { width: 60px; height: 60px; border-radius: 16px; background: var(--g50);
  display: grid; place-items: center; font-size: 30px; line-height: 1; }
.mattone.verde { background: var(--notte); border-color: var(--notte); }
.mattone.verde small { color: var(--g300); }
.mattone.verde .emoji { background: rgba(255,255,255,.1); }

/* campo del lettore */
#campo-scan { gap: 10px; margin-bottom: 14px; }
#campo-scan input { border: 1px solid var(--g300); border-radius: 14px; font-size: 21px; padding: 16px 18px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04); }
#campo-scan input:focus { border-color: var(--notte); box-shadow: 0 0 0 4px rgba(15,23,42,.08); }

/* tabelle e riquadri */
table { border: 1px solid var(--g200); box-shadow: none; border-radius: 16px; }
th { background: #fff; font-size: 12px; letter-spacing: .08em; font-weight: 650; border-bottom: 1px solid var(--g200); }
td { border-top: 1px solid var(--g100); }
tbody tr:hover td { background: #fafbfc; }
.vuota { border: 1px solid var(--g200); border-radius: 16px; }
.vuota .emoji { font-size: 38px; opacity: .8; }
.righe, .pannello-tot { border: 1px solid var(--g200); box-shadow: none; border-radius: 18px; }
.pannello-tot .totale .cifra { color: var(--notte); font-weight: 750; }
.pill { font-weight: 650; font-size: 12px; letter-spacing: .02em; }

/* finestre */
#velo { background: rgba(15,23,42,.45); backdrop-filter: blur(3px); }
.modale { border-radius: 22px; padding: 26px; box-shadow: 0 24px 60px rgba(15,23,42,.25); }
.modale h2 { font-size: 22px; font-weight: 650; letter-spacing: -.01em; }
.modale .cifrona { color: var(--notte); font-weight: 750; }
.modale input, .modale select { border: 1px solid var(--g300); font-size: 20px; }
.modale input:focus { border-color: var(--notte); box-shadow: 0 0 0 4px rgba(15,23,42,.08); }
.resto-grande { color: var(--notte); }

/* scelte, clienti, tasti rapidi, tastierino: bordi sottili */
.riga-cliente, .scelta-art, .rapido, .taglio button, .tastierino button { border-width: 1px; }
.rapido { font-weight: 650; box-shadow: none; }
.rapido.articolo { border-color: var(--notte); color: var(--notte); }
.messaggio { border-radius: 14px; font-size: 16px; }
.messaggio.ok { background: var(--notte); }

/* cartellini da cambiare (25-10-2026) */
.cartellini { display: grid; gap: 10px; max-height: 60vh; overflow: auto; }
.cartellino { display: grid; grid-template-columns: 56px 1fr auto auto; gap: 14px; align-items: center;
  border: 1px solid var(--g200); border-radius: 14px; padding: 10px 12px; }
.cartellino img { width: 56px; height: 56px; object-fit: contain; border-radius: 10px; background: var(--g50); }
.ct-info { min-width: 0; line-height: 1.3; }
.ct-info b { display: block; font-size: 16px; }
.ct-info small { display: block; color: var(--g500); font-size: 13px; }
.ct-prezzo { text-align: right; white-space: nowrap; }
.ct-prezzo s { display: block; color: var(--g500); font-size: 14px; }
.ct-prezzo b { font-size: 21px; color: var(--notte); }
@media (max-width: 640px) { .cartellino { grid-template-columns: 48px 1fr; } .ct-prezzo, .cartellino .bottone { grid-column: 2; text-align: left; } }