/*
 * Il pannello dei suggerimenti.
 *
 * Prende i colori dal tema quando ci sono (le variabili di theme.json) e ha un ripiego
 * neutro per quando non ci sono: cosi' il plugin resta usabile anche sotto un altro tema,
 * che e' il motivo per cui e' un plugin.
 *
 * L'ombra qui e' l'unica di tutto il sito, ed e' giustificata: questo riquadro GALLEGGIA
 * sopra la pagina, e senza uno stacco sembrerebbe incastrato nella testata.
 */
.abn-sugg-ancora { position: relative; }

.abn-sugg {
  position: absolute;
  z-index: 60;
  top: calc(100% + 8px);
  right: 0;
  width: min(29rem, calc(100vw - 32px));
  max-height: min(70vh, 30rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--wp--preset--color--carta, #fff);
  border: 1px solid var(--wp--preset--color--linea, #dcd8ce);
  border-radius: 12px;
  box-shadow: 0 18px 44px -20px rgba(20, 26, 18, 0.45);
  padding: 6px;
}

.abn-sugg__stato {
  margin: 0;
  padding: 16px 14px;
  font-size: 0.9rem;
  color: var(--wp--preset--color--tenue, #6b7266);
  max-width: none;
}
.abn-sugg__stato strong { color: var(--wp--preset--color--inchiostro, #2e312a); }

.abn-sugg__voce {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
}
/* Tastiera e puntatore accendono la stessa riga: chi arriva con le frecce deve vedere
   esattamente quello che vedrebbe col mouse. */
.abn-sugg__voce:hover,
.abn-sugg__voce.scelto,
.abn-sugg__tutti:hover,
.abn-sugg__tutti.scelto {
  background: var(--wp--preset--color--fondo, #f7f4ed);
  text-decoration: none;
}

.abn-sugg__voce img,
.abn-sugg__nofoto {
  width: 52px;
  height: 52px;
  flex: none;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--wp--preset--color--linea, #dcd8ce);
  border-radius: 6px;
}

.abn-sugg__testo { display: grid; gap: 3px; min-width: 0; }

.abn-sugg__nome {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--wp--preset--color--inchiostro, #2e312a);
  /* Due righe: i nomi di questo catalogo sono lunghissimi e su una riga sola si
     taglierebbero proprio sul formato, che e' quello che distingue due articoli. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.abn-sugg__riga {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}
.abn-sugg__fase {
  font-weight: 700;
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--wp--preset--color--verde-tenue, #e4f0e2);
  color: var(--wp--preset--color--verde-cupo, #0a3d22);
}
.abn-sugg__prezzo { font-weight: 700; color: var(--wp--preset--color--inchiostro, #2e312a); }
.abn-sugg__prezzo.insaldo { color: var(--wp--preset--color--saldo, #b02a1f); }
.abn-sugg__esaurito { color: var(--wp--preset--color--tenue, #6b7266); }

.abn-sugg__tutti {
  display: block;
  margin-top: 4px;
  padding: 12px 10px;
  border-top: 1px solid var(--wp--preset--color--linea, #dcd8ce);
  border-radius: 0 0 8px 8px;
  font-size: 0.88rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  color: var(--wp--preset--color--verde, #00733a);
}

/* Sul telefono il pannello non sta accanto al campo: sta sotto la testata, largo quanto
   lo schermo, perche' 29 rem non ci stanno. */
@media (max-width: 640px) {
  .abn-sugg {
    position: fixed;
    left: 12px;
    right: 12px;
    width: auto;
    top: auto;
    margin-top: 8px;
  }
}

/* Il pannello risponde a chi sta scrivendo: compare in un decimo di secondo, salendo di
   quattro pixel. Piu' lento sembrerebbe lento; senza movimento sembrerebbe uno scatto. */
.abn-sugg { animation: abn-sugg-entra 0.13s ease-out; }
@keyframes abn-sugg-entra {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .abn-sugg { animation: none; }
}