/* Wrapper: posizionato e largo al 100% */
.wcsa-wrapper {
  position: relative;
  display: block;
  width: 100%;
}

/* Il dropdown vero e proprio, con border-radius e scrollbar arrotondata */
.wcsa-suggestions {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: auto;
  background: #fff;
  border: 1px solid #ddd;
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 200px;
  overflow-y: auto;
  z-index: 9999;

  /* angoli arrotondati */
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

/* WebKit-only: arrotondare anche la track dello scrollbar */
.wcsa-suggestions::-webkit-scrollbar {
  width: 12px;
}
.wcsa-suggestions::-webkit-scrollbar-track {
  background: transparent;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.wcsa-suggestions::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  border: 3px solid transparent;
  background-clip: content-box;
}

.wcsa-suggestions li {
  padding: 4px;
  cursor: pointer;
  color: #000 !important;
}

/* grassetto per la parte evidenziata */
.wcsa-suggestions li strong {
  font-weight: bold;
  color: #000 !important;
}

/* hover e selezione */
.wcsa-suggestions li:hover,
.wcsa-suggestions li.wcsa-selected {
  border-radius: 5px
}

/* input dentro il wrapper */
.wcsa-wrapper input[name="s"] {
  width: 100%;
  box-sizing: border-box;
}

/* ─────────────────────────────────────────────────────────── */
/* NUOVI ELEMENTI: icona lente e mini-thumb prodotto           */
/* ─────────────────────────────────────────────────────────── */

/* icona lente: default nascosta, mostrata via JS quando richiesto */
.wcsa-icon-search {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: middle;
  background: no-repeat center center;
  background-size: contain;
  /* imposta qui l'URL della tua icona lente: */
  background-image: url('path/to/search-icon.svg');
}

/* miniatura prodotto: default nascosta, mostrata via JS quando richiesto */
.wcsa-thumb {
  display: inline-block;
  width: 32px;
  height: 32px;
  margin-right: 8px;
  vertical-align: middle;
  object-fit: cover;
  border-radius: 2px;
  background: #f5f5f5;
}

/* ─────────────────────────────────────────────────────────── */
/* UTILIZZO IN JS:                                            */
/*  - per mostrare l'icona, JS aggiunge .wcsa-icon-search  */
/*  - per mostrare la thumb, JS inserisce <img class="wcsa-thumb" ...> */
/*  - i container <li> si adeguano di conseguenza           */
/*                                                           */
/* Puoi sovrascrivere le dimensioni o il percorso immagine   */
/* direttamente dal tuo tema o inserendo inline-style via   */
/* wp_add_inline_style, utilizzando le nuove opzioni admin  */
/*                                                           */
/* Esempio override dall’admin:                              */
/*   --thumb-size: 24px;                                     */
/*   --icon-url: url("...");                                 */
/*                                                           */
/* .wcsa-icon-search { width: var(--thumb-size); }          */
/* .wcsa-thumb      { width: var(--thumb-size); }           */
/* .wcsa-icon-search { background-image: var(--icon-url); } */
/* ─────────────────────────────────────────────────────────── */