/* kit.css — generatore di distinte.
 *
 * Allineato al marchio Turra: i colori sono presi dal logo (turra-logo-rosso.svg),
 * non scelti a occhio — nero #1d1d1b, rosso #e30613, verde #009640 — e il
 * carattere è Poppins, lo stesso del negozio.
 *
 * Una nota sul rosso: il logo usa #e30613, il tema del negozio #e31d27. Sono due
 * rossi diversi per pochi punti. Qui vale la regola dell'insieme: il pulsante
 * d'azione resta #e31d27 come su tutto lo shop, così chi passa dal catalogo a
 * questa pagina non vede cambiare colore all'azione. Il rosso del logo resta al
 * logo, dove è nato.
 */

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Poppins Regular'), local('Poppins-Regular');
}

:root {
  /* dal logo */
  --nero: #1d1d1b;
  --grigio-marchio: #3c3c3b;
  --verde: #009640;

  /* accento d'azione, allineato al negozio */
  --rosso: #e31d27;
  --rosso-scuro: #b81118;

  /* neutri con una punta di caldo, per non litigare col rosso */
  --grigio: #5f6360;
  --grigio-tenue: #8b8f8c;
  --linea: #e2e2e0;
  --linea-forte: #cfcfcc;
  --sfondo: #f5f5f3;
  --carta: #ffffff;

  --ambra: #8a5011;
  --ambra-sfondo: #fdf6ec;
  --rosso-errore: #9a2b2b;
  --rosso-errore-sfondo: #fbf0f0;

  --raggio: 8px;
  --ombra: 0 1px 2px rgba(29, 29, 27, .06);

  --testo: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --dati: ui-monospace, 'SF Mono', Consolas, 'Liberation Mono', monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --nero: #f0f0ee;
    --grigio-marchio: #c8c8c5;
    --verde: #3fbe72;
    --rosso: #f2545c;
    --rosso-scuro: #ff6d74;
    --grigio: #a5a9a6;
    --grigio-tenue: #7d817e;
    --linea: #33352f;
    --linea-forte: #4a4d46;
    --sfondo: #161714;
    --carta: #1e201c;
    --ambra: #e0ac6a;
    --ambra-sfondo: #2a2318;
    --rosso-errore: #e79a9a;
    --rosso-errore-sfondo: #2b1a1a;
    --ombra: none;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--sfondo);
  color: var(--nero);
  font-family: var(--testo);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── testata col marchio ─────────────────────────────────────────────────── */
.testata {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  background: var(--carta);
  border-bottom: 3px solid var(--rosso);
}

.marchio { display: flex; align-items: center; gap: 14px; text-decoration: none; }

.marchio img { display: block; height: 34px; width: auto; }

.marchio .reparto {
  padding-left: 14px;
  border-left: 1px solid var(--linea);
  font-size: 14px;
  font-weight: 600;
  color: var(--grigio);
  letter-spacing: .01em;
}

.testata a { color: var(--grigio-marchio); text-decoration: none; font-size: 15px; }
.testata .carrello:hover { color: var(--rosso); }

@media (prefers-color-scheme: dark) {
  /* il logo è pensato per fondo chiaro: gli si dà il suo fondo invece di
     schiarirlo, così il rosso resta quello del marchio */
  .marchio img { background: #fff; padding: 4px 8px; border-radius: 4px; }
}

/* ── impaginato ──────────────────────────────────────────────────────────── */
.foglio { max-width: 900px; margin: 0 auto; padding: 40px 20px 8px; }

h1 {
  margin: 0 0 14px;
  font-size: 34px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.occhiello { color: var(--grigio); margin: 0 0 28px; max-width: 62ch; }

/* ── il modulo ───────────────────────────────────────────────────────────── */
.richiesta {
  background: var(--carta);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  padding: 18px;
}

textarea {
  width: 100%;
  border: 1px solid var(--linea-forte);
  border-radius: var(--raggio);
  padding: 13px 14px;
  font-family: inherit;
  /* 16px non è estetica: sotto i 16px iOS ingrandisce la pagina al focus */
  font-size: 16px;
  line-height: 1.5;
  resize: vertical;
  color: inherit;
  background: var(--carta);
}

textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 3px solid var(--rosso);
  outline-offset: 2px;
}

.riga-invio { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 14px; }

#invia {
  background: var(--rosso);
  color: #fff;
  border: 0;
  border-radius: var(--raggio);
  padding: 0 26px;
  min-height: 48px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

#invia:hover { background: var(--rosso-scuro); }
#invia[disabled] { opacity: .5; cursor: default; }

.suggerimenti { font-size: 14px; color: var(--grigio); }

.esempio {
  background: none;
  border: 1px solid var(--linea-forte);
  border-radius: 20px;
  padding: 7px 14px;
  margin: 2px;
  font-family: inherit;
  font-size: 13px;
  color: var(--grigio-marchio);
  cursor: pointer;
  min-height: 34px;
}

.esempio:hover { border-color: var(--nero); color: var(--nero); }

.stato { margin: 22px 0; color: var(--grigio); }

/* ── quel che ho capito ──────────────────────────────────────────────────── */
.capito {
  background: var(--carta);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--nero);
  border-radius: 0 var(--raggio) var(--raggio) 0;
  padding: 16px 18px;
  margin: 28px 0 18px;
}

.capito strong {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--grigio-tenue);
  margin-bottom: 5px;
}

/* ── la distinta ─────────────────────────────────────────────────────────── */
.tabella-avvolta {
  overflow-x: auto;
  background: var(--carta);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
}

table { border-collapse: collapse; width: 100%; min-width: 680px; }

th, td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--linea);
  vertical-align: top;
}

th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--grigio-tenue);
  font-weight: 600;
}

td.n, th.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-bottom: 0; }

.pezzo a { color: var(--nero); text-decoration: none; font-weight: 600; line-height: 1.4; }
.pezzo a:hover { color: var(--rosso); }

.codice {
  font-family: var(--dati);
  font-size: 12px;
  color: var(--grigio-tenue);
  margin-top: 3px;
}

.motivo { color: var(--grigio); font-size: 13.5px; margin-top: 5px; }

tfoot td { border-top: 2px solid var(--nero); font-weight: 700; font-size: 17px; }
tfoot .iva { font-weight: 400; color: var(--grigio); font-size: 13px; }

/* ── la foto del pezzo ───────────────────────────────────────────────────
   Chi non fa questo mestiere non sa che aspetto abbia una "piastra di
   collegamento": senza foto la lista non si controlla prima di ordinare.
   La miniatura è quella che PrestaShop genera già per il carrello, quindi
   esiste per ogni prodotto e non aggiunge lavoro al server. */
.colonna-foto { width: 84px; padding-right: 0; }

.foto {
  display: block;
  width: 68px;
  height: 68px;
  /* le foto del catalogo sono su fondo bianco: resta bianco anche in tema
     scuro, altrimenti un pezzo inox satinato sparisce nel fondo */
  background: #fff;
  border: 1px solid var(--linea-forte);
  border-radius: 6px;
  overflow: hidden;
}

.foto:hover { border-color: var(--rosso); }
.foto img { width: 100%; height: 100%; object-fit: contain; display: block; }

.foto--vuota {
  background: repeating-linear-gradient(45deg, transparent, transparent 7px,
              var(--linea) 7px, var(--linea) 8px);
}

.qta {
  display: inline-block;
  min-width: 34px;
  padding: 4px 9px;
  background: var(--nero);
  color: var(--carta);
  border-radius: 6px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* ── azioni ─────────────────────────────────────────────────────────────── */
.azioni { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 22px 0 8px; }

#aggiungi {
  /* il verde del logo, non un verde qualsiasi */
  background: var(--verde);
  color: #fff;
  border: 0;
  border-radius: var(--raggio);
  padding: 0 26px;
  min-height: 50px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

#aggiungi:hover { filter: brightness(1.1); }
#aggiungi[disabled] { opacity: .5; cursor: default; }

/* ── avvisi, note, domande ──────────────────────────────────────────────── */
.avvisi { margin: 20px 0; padding: 0; list-style: none; }

.avvisi li {
  background: var(--ambra-sfondo);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--ambra);
  border-radius: 0 var(--raggio) var(--raggio) 0;
  padding: 12px 16px;
  margin-bottom: 8px;
  color: var(--ambra);
}

.note { margin: 20px 0; padding-left: 20px; color: var(--grigio); }

.domande {
  background: var(--carta);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  padding: 20px;
  margin: 22px 0;
}

.domanda { margin-bottom: 20px; }
.domanda:last-of-type { margin-bottom: 0; }
.domanda p { margin: 0 0 4px; font-weight: 600; }
.domanda .perche { font-weight: 400; color: var(--grigio); font-size: 14px; margin-bottom: 10px; }

.opzioni { display: flex; flex-wrap: wrap; gap: 8px; }

.opzione {
  background: none;
  border: 1px solid var(--linea-forte);
  border-radius: 22px;
  padding: 9px 18px;
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
  min-height: 44px;
  color: inherit;
}

.opzione:hover { border-color: var(--nero); }
.opzione[aria-pressed="true"] { background: var(--nero); color: var(--carta); border-color: var(--nero); }

.errore {
  background: var(--rosso-errore-sfondo);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--rosso-errore);
  border-radius: 0 var(--raggio) var(--raggio) 0;
  padding: 16px 18px;
  color: var(--rosso-errore);
}

/* ── piede ──────────────────────────────────────────────────────────────── */
.pie {
  max-width: 900px;
  margin: 0 auto;
  padding: 28px 20px 56px;
  color: var(--grigio);
  font-size: 14px;
}

.pie a { color: var(--grigio-marchio); }

.visivamente-nascosto {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .testata { padding: 12px 16px; }
  .marchio img { height: 28px; }
  .marchio .reparto { display: none; }
  .foglio { padding: 26px 16px 8px; }
  h1 { font-size: 25px; }
  #invia { width: 100%; }
  .colonna-foto { width: 62px; }
  .foto { width: 50px; height: 50px; }
  th, td { padding: 12px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   IL PERCORSO GUIDATO
   Una domanda per schermata: chi non conosce i codici non deve leggere un
   modulo, deve solo riconoscere la cosa che ha davanti. Per questo le scelte
   hanno la foto di un prodotto vero e non un'icona disegnata.
   ══════════════════════════════════════════════════════════════════════════ */

.domanda-titolo {
  margin: 0 0 6px;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.domanda-aiuto {
  margin: 0 0 22px;
  max-width: 60ch;
  color: var(--grigio);
  font-size: 15px;
}

/* ── le tipologie ────────────────────────────────────────────────────────── */
.tipologie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.tipologia {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--carta);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  text-align: left;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease;
}

.tipologia:hover { border-color: var(--nero); transform: translateY(-1px); }

/* la foto è una scena, non un pezzo su fondo bianco: si taglia a riempire e
   si prende lo spazio che merita, perché è quella che fa riconoscere il lavoro */
.tipologia__foto {
  flex: 0 0 auto;
  width: 104px;
  height: 104px;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
}

.tipologia__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tipologia__testo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tipologia__nome { font-weight: 600; font-size: 16px; }
.tipologia__nota { font-size: 13.5px; color: var(--grigio); line-height: 1.4; }

/* ── le scelte dentro un passo ───────────────────────────────────────────── */
.scelte {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}

.scelta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--carta);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  text-align: left;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  min-height: 64px;
  transition: border-color .15s ease, transform .15s ease;
}

.scelta:hover { border-color: var(--nero); transform: translateY(-1px); }
.scelta--presa { border-color: var(--rosso); box-shadow: 0 0 0 2px var(--rosso) inset; }

.scelta__foto {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: 5px;
  overflow: hidden;
}

.scelta__foto img { width: 100%; height: 100%; object-fit: contain; display: block; }

.scelta__testo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.scelta__nome { font-weight: 600; font-size: 15.5px; }
.scelta__nota { font-size: 13px; color: var(--grigio); line-height: 1.4; }

/* ── il passo con la misura ──────────────────────────────────────────────── */
.misura {
  background: var(--carta);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 460px;
}

.misura__riga { display: flex; align-items: baseline; gap: 10px; }

.misura__riga input {
  width: 130px;
  border: 1px solid var(--linea-forte);
  border-radius: var(--raggio);
  padding: 10px 12px;
  font-family: inherit;
  font-size: 24px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: inherit;
  background: var(--carta);
}

.misura__unita { color: var(--grigio); font-size: 16px; }

.misura input[type="range"] { width: 100%; accent-color: var(--rosso); height: 28px; }

.avanti {
  align-self: flex-start;
  background: var(--rosso);
  color: #fff;
  border: 0;
  border-radius: var(--raggio);
  padding: 0 30px;
  min-height: 48px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.avanti:hover { background: var(--rosso-scuro); }

/* ── dove sono e come torno indietro ─────────────────────────────────────── */
.briciole {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 10px;
  font-size: 13px;
}

.briciole__fam { font-weight: 600; }
.briciole__passo { color: var(--grigio-tenue); }

.avanzamento {
  height: 4px;
  background: var(--linea);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 22px;
}

.avanzamento__fatto {
  display: block;
  height: 100%;
  background: var(--rosso);
  transition: width .2s ease;
}

.passo-azioni { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.indietro {
  background: none;
  border: 1px solid var(--linea-forte);
  border-radius: var(--raggio);
  padding: 0 18px;
  min-height: 44px;
  font-family: inherit;
  font-size: 14px;
  color: var(--grigio-marchio);
  cursor: pointer;
}

.indietro:hover { border-color: var(--nero); color: var(--nero); }

/* ── quando la distinta non la calcoliamo noi ────────────────────────────── */
.specifica {
  margin: 0 0 18px;
  padding: 18px 22px 18px 40px;
  background: var(--carta);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
}

.specifica li { margin-bottom: 6px; }
.specifica li:last-child { margin-bottom: 0; }

.spiegazione { max-width: 64ch; color: var(--grigio); margin: 0 0 18px; }

.bottone-secondario {
  display: inline-flex;
  align-items: center;
  padding: 0 24px;
  min-height: 50px;
  background: var(--nero);
  color: var(--carta);
  border-radius: var(--raggio);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

.bottone-secondario:hover { opacity: .88; color: var(--carta); }

/* ── la scrittura libera, di lato ────────────────────────────────────────── */
.scrittura { margin-top: 44px; border-top: 1px solid var(--linea); padding-top: 22px; }

.scrittura summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--grigio-marchio);
  padding: 6px 0;
  list-style: revert;
}

.scrittura summary:hover { color: var(--nero); }
.scrittura[open] summary { margin-bottom: 14px; }

.nota-immagini {
  margin: 14px 0 0;
  max-width: 66ch;
  font-size: 13px;
  color: var(--grigio-tenue);
}

@media (max-width: 640px) {
  .domanda-titolo { font-size: 21px; }
  .tipologie, .scelte { grid-template-columns: 1fr; }
  .tipologia__foto { width: 84px; height: 84px; }
  .avanti { width: 100%; text-align: center; }
  .misura__riga input { width: 110px; font-size: 21px; }
}


/* ══ IL MODULO "FATECELA CONTROLLARE" ═══════════════════════════════════════
   Chi arriva qui ha gia' fatto il percorso e ha la lista davanti: il modulo
   deve chiedere il minimo indispensabile. Nome ed email bastano a rispondere,
   il resto e' facoltativo e lo si dice. */
.verifica {
  background: var(--carta);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  padding: 22px;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.verifica .domanda-titolo { margin: 0; }
.verifica .domanda-aiuto { margin: 0; }

.campo { display: flex; flex-direction: column; gap: 5px; }

.campo label { font-weight: 600; font-size: 15px; }

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo textarea {
  border: 1px solid var(--linea-forte);
  border-radius: var(--raggio);
  padding: 12px 14px;
  font-family: inherit;
  /* 16px non e' estetica: sotto i 16px iOS ingrandisce la pagina al focus */
  font-size: 16px;
  color: inherit;
  background: var(--carta);
  min-height: 48px;
}

.campo textarea { min-height: 84px; resize: vertical; }

.campo__aiuto { font-size: 13px; color: var(--grigio); }

.campo__errore { font-size: 13.5px; color: var(--rosso); font-weight: 600; }
.campo__errore:empty { display: none; }

.campo--consenso label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-weight: 400;
  font-size: 14.5px;
  color: var(--grigio);
  cursor: pointer;
}

.campo--consenso input { margin-top: 3px; width: 20px; height: 20px; accent-color: var(--rosso); }

/* il campo trappola: fuori dallo schermo, non display:none — certi robot
   riempiono solo i campi che il browser considera "presenti" */
.trappola {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.fatto {
  background: var(--carta);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--verde);
  border-radius: 0 var(--raggio) var(--raggio) 0;
  padding: 22px;
  max-width: 620px;
}

.fatto strong {
  display: block;
  font-size: 19px;
  margin-bottom: 8px;
}

.fatto p { margin: 0 0 18px; color: var(--grigio); }