/* VPCrazy Recherche & Selections : styles par defaut, VOLONTAIREMENT neutres et exhaustivement
   surchargeables : chaque element porte une classe vpcsi-* stable. */

.vpcsi-box { position: relative; max-width: 480px; }
.vpcsi-input {
  width: 100%; padding: 10px 14px; font: inherit;
  border: 1px solid #d5d9d6; border-radius: 8px; background: #fff;
}
.vpcsi-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 99990;
  background: #fff; border: 1px solid #d5d9d6; border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .14); max-height: 70vh; overflow-y: auto;
}
.vpcsi-floating { min-width: 280px; }
.vpcsi-item {
  display: flex; gap: 10px; align-items: center; padding: 9px 12px;
  text-decoration: none; color: inherit; border-bottom: 1px solid #f0f2f0;
}
.vpcsi-item:hover { background: #f6f8f7; }
.vpcsi-item-img { flex: 0 0 44px; }
.vpcsi-item-img img { width: 44px; height: 44px; object-fit: contain; background: #fff; border-radius: 6px; }
.vpcsi-item-body { display: grid; gap: 2px; min-width: 0; }
.vpcsi-item-title { font-weight: 600; font-size: 14px; line-height: 1.25; }
.vpcsi-item-excerpt { font-size: 12px; color: #6b756f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vpcsi-item-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.vpcsi-item-price { font-weight: 700; font-size: 12.5px; }
.vpcsi-badge { font-size: 10.5px; background: #eef1ef; border-radius: 999px; padding: 1px 7px; }
.vpcsi-type { font-size: 10.5px; color: #8a938d; margin-left: auto; }
.vpcsi-empty { padding: 14px; font-size: 13px; color: #6b756f; }

/* Apparence reglable (BO > Apparence des suggestions) */
.vpcsi-item-img { flex-basis: var(--vpcsi-img, 44px); }
.vpcsi-item-img img { width: var(--vpcsi-img, 44px); height: var(--vpcsi-img, 44px); }
.vpcsi-no-img .vpcsi-item-img { display: none; }

/* Blindage contre les resets de themes (header Blocksy et consorts) */
.vpcsi-results .vpcsi-item { display: flex !important; gap: 10px; align-items: center; }
.vpcsi-results .vpcsi-item-img { display: block; flex: 0 0 var(--vpcsi-img, 44px); }
.vpcsi-results .vpcsi-item-img img {
  width: var(--vpcsi-img, 44px) !important;
  height: var(--vpcsi-img, 44px) !important;
  max-width: none !important; object-fit: contain;
}
/* Motif du !important : certains themes (header Blocksy) forcent img a largeur 0 dans leur
   conteneur de recherche ; la commande reste la variable --vpcsi-img reglee au BO. */
.vpcsi-results .vpcsi-item-body { display: grid; }

/* Espace vierge (CPT non-produit sans image de mise en avant) : garde l'alignement */
.vpcsi-results .vpcsi-item-img-empty { height: var(--vpcsi-img, 44px); background: transparent; }

/* Colonne PRIX a droite (live, 2 decimales + symbole), symetrique de l'image a gauche */
.vpcsi-results .vpcsi-item-price-col {
  margin-left: auto; flex: 0 0 auto; align-self: center;
  font-weight: 700; font-size: 13.5px; white-space: nowrap; text-align: right;
}
.vpcsi-results .vpcsi-item-price-col { display: grid; gap: 2px; justify-items: end; }
.vpcsi-item-price-admin { font-weight: 600; font-size: 11px; color: #8a5a00; background: #fdf3df; border-radius: 6px; padding: 1px 6px; }

/* Lien "Voir tous les resultats" en pied de suggestions cappees : colle en bas
   de la boite (elle scrolle), donc toujours visible. */
.vpcsi-see-all {
  display: block; position: sticky; bottom: 0;
  padding: 9px 12px; text-align: center;
  font-size: 12.5px; font-weight: 600; color: inherit; text-decoration: none;
  background: #f6f8f7; border-top: 1px solid #e4e8e5;
}
.vpcsi-see-all:hover { background: #eef1ef; text-decoration: underline; }

/* Portee de la recherche dans une rubrique : « Dans <rubrique> » | « Partout », en tete de liste.
   Les !important tiennent tete aux styles de bouton des themes dans leur en-tete (Blocksy). */
.vpcsi-results .vpcsi-portee {
  position: sticky; top: 0; z-index: 2; display: flex; gap: 6px; padding: 8px 10px;
  background: #fff; border-bottom: 1px solid #e4e8e5;
}
.vpcsi-results .vpcsi-portee .vpcsi-portee-btn {
  flex: 1 1 0; min-width: 0; min-height: 0 !important; height: auto !important; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 10px !important; margin: 0; border: 1px solid #d5d9d6 !important; border-radius: 999px !important;
  background: #f6f8f7 !important; color: #2b3330 !important; box-shadow: none !important;
  font: inherit; font-size: 12.5px !important; font-weight: 600; line-height: 1.3; letter-spacing: 0; text-transform: none; cursor: pointer;
}
.vpcsi-results .vpcsi-portee .vpcsi-portee-btn.is-active {
  background: var(--theme-palette-color-1, #14201a) !important; border-color: var(--theme-palette-color-1, #14201a) !important; color: #fff !important;
}
.vpcsi-portee-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vpcsi-portee-n { flex: 0 0 auto; font-weight: 500; opacity: .75; font-variant-numeric: tabular-nums; }