/* Assistente all'acquisto — riquadro di conversazione.
   Palette del sito: fondo #F8F6F2 · superficie #FFFFFF · testo #1C2320
   azione #B0540E · accento #E8751A · verde #2F4A38 · bordi #E2DDD4

   Nota per chi ci mette mano: qui NON si usa la scorciatoia `font:`.
   Il tema del negozio ha regole proprie su h2/p/button, quindi ogni misura
   va dichiarata per esteso, altrimenti vince il tema.                        */

.evox-a {
  --fondo: #F8F6F2;
  --superficie: #FFFFFF;
  --testo: #1C2320;
  --azione: #B0540E;
  --accento: #E8751A;
  --verde: #2F4A38;
  --bordi: #E2DDD4;
  --tenue: #6B7069;
  --ombra: 0 10px 34px rgba(28, 35, 32, .18);
  color: var(--testo);
}

.evox-a, .evox-a * , .evox-a *::before, .evox-a *::after { box-sizing: border-box; }

.evox-a h2, .evox-a p, .evox-a div, .evox-a span, .evox-a button, .evox-a textarea, .evox-a a {
  font-family: inherit;
  letter-spacing: normal;
  text-transform: none;
}
.evox-a h2, .evox-a p { margin: 0; }

/* ---------------------------------------------------------- pulsante fisso */

.evox-a__apri {
  position: fixed;
  right: 76px; /* 24 set 2026: lascia posto al pulsante accessibilita di EvoCompliance (48px a 16px dal bordo) */
  bottom: 20px;
  z-index: 9998;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px 13px 17px;
  border: 0;
  border-radius: 999px;
  background: var(--azione);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--ombra);
  transition: background .18s, transform .18s;
}
.evox-a__apri:hover { background: var(--accento); color: #fff; }
.evox-a__apri:active { transform: scale(.97); }
.evox-a__apri:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; }
.evox-a__apri svg { flex: none; }
.evox-a__apri[hidden] { display: none; }

/* --------------------------------------------------------------- riquadro */

.evox-a__pannello {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  width: min(420px, calc(100vw - 40px));
  height: min(640px, calc(100vh - 40px));
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--bordi);
  border-radius: 16px;
  box-shadow: var(--ombra);
  overflow: hidden;
}
.evox-a__pannello[hidden] { display: none; }

.evox-a__testata {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 13px 13px 17px;
  background: var(--verde);
  color: #fff;
  flex: none;
}
.evox-a__titolo {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
}
.evox-a__sotto {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: #fff;
  opacity: .82;
  margin-top: 2px;
}
.evox-a__chiudi {
  margin-left: auto;
  width: 34px; height: 34px;
  flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: 8px;
  padding: 0;
  background: rgba(255, 255, 255, .14);
  color: #fff; cursor: pointer;
}
.evox-a__chiudi:hover { background: rgba(255, 255, 255, .26); color: #fff; }
.evox-a__chiudi:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ------------------------------------------------------------ conversazione */

.evox-a__corpo {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  background: var(--fondo);
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.evox-a__msg {
  max-width: 92%;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
}
.evox-a__msg--io {
  align-self: flex-end;
  background: var(--verde);
  color: #fff;
  padding: 9px 13px;
  border-radius: 14px 14px 4px 14px;
  max-width: 85%;
}
.evox-a__msg--lei {
  align-self: flex-start;
  background: var(--superficie);
  border: 1px solid var(--bordi);
  padding: 11px 13px;
  border-radius: 14px 14px 14px 4px;
}
.evox-a__msg p { margin-bottom: .6em; font-size: inherit; line-height: inherit; }
.evox-a__msg p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------ schede dei prodotti */

.evox-a__schede { display: flex; flex-direction: column; gap: 9px; align-self: stretch; }

.evox-a__scheda {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 9px;
  background: var(--superficie);
  border: 1px solid var(--bordi);
  border-radius: 12px;
  text-decoration: none;
  color: var(--testo);
  transition: border-color .16s, box-shadow .16s;
}
.evox-a__scheda:hover { border-color: var(--accento); box-shadow: 0 4px 14px rgba(28, 35, 32, .09); text-decoration: none; }
.evox-a__scheda:focus-visible { outline: 3px solid var(--azione); outline-offset: 2px; }

.evox-a__foto {
  flex: none;
  width: 68px; height: 68px;
  object-fit: contain;
  background: var(--fondo);
  border-radius: 8px;
}
.evox-a__dati { min-width: 0; flex: 1 1 auto; }
.evox-a__marca {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tenue);
}
.evox-a__nome {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--testo);
  margin: 3px 0 5px;
}
.evox-a__prezzo { font-size: 15px; font-weight: 700; line-height: 1.2; color: var(--azione); }
.evox-a__barrato { font-size: 12px; font-weight: 400; color: var(--tenue); text-decoration: line-through; margin-left: 6px; }
.evox-a__fascia { font-size: 11.5px; font-weight: 400; line-height: 1.35; color: var(--tenue); margin-top: 3px; }
.evox-a__varianti { font-size: 11px; font-weight: 400; line-height: 1.4; color: var(--tenue); margin-top: 3px; }
.evox-a__esaurito { font-size: 11.5px; font-weight: 700; line-height: 1.2; color: #8a3a12; margin-top: 4px; }

/* ---------------------------------------------------- avvisi, spunti, stati */

.evox-a__avviso {
  align-self: stretch;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: #4a3a22;
  background: #FBF1E4;
  border: 1px solid #EBD9BF;
  border-left: 3px solid var(--accento);
  border-radius: 8px;
  padding: 9px 11px;
}

.evox-a__spunti { display: flex; flex-direction: column; gap: 7px; align-self: stretch; }
.evox-a__spunto {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  padding: 9px 13px;
  background: var(--superficie);
  border: 1px solid var(--bordi);
  border-radius: 10px;
  color: var(--verde);
  cursor: pointer;
}
.evox-a__spunto:hover { border-color: var(--accento); color: var(--azione); }
.evox-a__spunto:focus-visible { outline: 2px solid var(--azione); outline-offset: 2px; }

.evox-a__attesa { display: flex; gap: 5px; align-items: center; padding: 12px 14px; }
.evox-a__attesa span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accento);
  animation: evox-salta 1.1s infinite ease-in-out;
}
.evox-a__attesa span:nth-child(2) { animation-delay: .16s; }
.evox-a__attesa span:nth-child(3) { animation-delay: .32s; }
@keyframes evox-salta { 0%, 70%, 100% { opacity: .3; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
  .evox-a__attesa span { animation: none; opacity: .6; }
  .evox-a__apri, .evox-a__scheda { transition: none; }
}

.evox-a__errore {
  align-self: stretch;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  background: #FCEDE8;
  border: 1px solid #F0C9BC;
  border-radius: 10px;
  padding: 10px 12px;
  color: #7a2d12;
}
.evox-a__errore button {
  display: inline-block; margin-top: 6px;
  background: none; border: 0; padding: 0;
  font-size: 13px; font-weight: 600; line-height: 1;
  color: var(--azione);
  text-decoration: underline; cursor: pointer;
}

/* ------------------------------------------------------- riga di scrittura */

.evox-a__piede { flex: none; border-top: 1px solid var(--bordi); background: var(--superficie); padding: 10px 12px 11px; }
.evox-a__riga { display: flex; gap: 8px; align-items: flex-end; margin: 0; }
.evox-a__campo {
  flex: 1 1 auto;
  min-height: 42px; max-height: 120px;
  resize: none;
  padding: 11px 13px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--testo);
  background: var(--fondo);
  border: 1px solid var(--bordi);
  border-radius: 10px;
}
.evox-a__campo:focus { outline: 2px solid var(--azione); outline-offset: -1px; border-color: var(--azione); }
.evox-a__invia {
  flex: none;
  width: 42px; height: 42px;
  padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 10px;
  background: var(--azione); color: #fff; cursor: pointer;
}
.evox-a__invia:hover:not(:disabled) { background: var(--accento); color: #fff; }
.evox-a__invia:disabled { opacity: .45; cursor: default; }
.evox-a__invia:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }
.evox-a__nota { font-size: 10.5px; font-weight: 400; line-height: 1.45; color: var(--tenue); margin-top: 7px; }
.evox-a__nota a { color: var(--azione); }

/* --------------------------------------------------------------- telefono */

@media (max-width: 600px) {
  .evox-a__pannello {
    right: 0; bottom: 0; left: 0; top: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    border-radius: 0;
    border: 0;
  }
  .evox-a__apri { right: 76px; bottom: 14px; padding: 12px 17px 12px 15px; }
  .evox-a__corpo { padding: 14px; }
  .evox-a__campo { font-size: 16px; }   /* sotto i 16px iOS zooma da solo */
}

.evox-a__solo-lettori {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}