/* ==========================================================================
   Panel de sugerencias del buscador (sustituye a FiboSearch)
   --------------------------------------------------------------------------
   El campo vive en una barra oscura, asi que al recibir el foco pasa a blanco
   con el filete naranja. El panel no hereda el ancho del campo: se centra bajo
   el con ancho propio, porque a 981px un campo ensanchado pisaria los enlaces
   de la derecha.
   ========================================================================== */

.lbm-head{
  --lbm-orange:#ef7d00;
  --lbm-ink:#23292c;
  --lbm-muted:#7a8287;
  --lbm-line:#ececee;
  --lbm-hover:#f6f7f8;
  --lbm-sug-w:390px;
}

/* ---------- el campo, al recibir el foco, se vuelve blanco ---------- */
/* Sin filete: el cambio de fondo ya indica el foco. La cabecera marca el foco
   del resto de elementos con un contorno naranja (.lbm-head :focus-visible),
   pero sobre el campo salia como un rectangulo de esquinas rectas encima del
   panel redondeado. Aqui se anula solo para el buscador. */
.lbm-head__search{transition:width .22s ease, background-color .18s ease}
.lbm-head__search:focus-within{
  background:#fff;
}
.lbm-head__search:focus-within input{color:var(--lbm-ink)}
.lbm-head__search:focus-within input::placeholder{color:#a6adb1}
.lbm-head__search:focus-within button{color:var(--lbm-muted);opacity:1}

.lbm-head__search input:focus,
.lbm-head__search input:focus-visible,
.lbm-mnav__search input:focus,
.lbm-mnav__search input:focus-visible{
  outline:none;
  box-shadow:none;
}

/* El campo no se ensancha al buscar: a 390px pisa categorias y carrito.
   El panel de sugerencias ya tiene ancho propio debajo. */

/* boton de borrar */
.lbm-search__clear{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:20px;height:20px;padding:0;border-radius:50%;
  color:currentColor;opacity:.55;line-height:0;
}
.lbm-search__clear:hover{opacity:1}
.lbm-search__clear svg{width:13px;height:13px}
.lbm-search__clear[hidden]{display:none}

/* pulso sobre la lupa mientras se consulta */
.lbm-head__search.is-loading > button[type="submit"],
.lbm-mnav__search.is-loading > button[type="submit"]{animation:lbm-sug-pulse .9s ease-in-out infinite}
@keyframes lbm-sug-pulse{0%,100%{opacity:.35}50%{opacity:1}}

/* ---------- el panel ---------- */
.lbm-mnav__search{position:relative}

.lbm-sug{
  position:absolute;
  top:calc(100% + 11px);
  left:50%;
  width:var(--lbm-sug-w,390px);
  z-index:100001;
  max-height:calc(100vh - 96px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  background:#fff;
  border-radius:14px;
  box-shadow:0 14px 40px -8px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.06);
  color:var(--lbm-ink,#23292c);
  font-family:'myriad_proregular',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  text-align:left;
  padding:8px 0;
  opacity:0;
  transform:translate(-50%,-6px);
  transition:opacity .16s ease, transform .18s cubic-bezier(.22,.61,.36,1);
}
.lbm-sug.is-open{opacity:1;transform:translate(-50%,0)}
.lbm-sug[hidden]{display:none}

.lbm-sug a{display:flex;align-items:center;text-decoration:none;color:inherit}
.lbm-sug a:hover,
.lbm-sug a.is-cursor{background:var(--lbm-hover,#f6f7f8)}
.lbm-sug mark{background:none;color:inherit;font-weight:800}

.lbm-sug__group + .lbm-sug__group{border-top:1px solid var(--lbm-line,#ececee);margin-top:6px;padding-top:6px}

.lbm-sug__head{
  margin:0;padding:8px 18px 6px;
  color:var(--lbm-orange,#ef7d00);
  font-family:'myriad_prosemibold',sans-serif;
  font-size:14.5px;line-height:1.2;
}

/* --- productos --- */
.lbm-sug__prod{gap:14px;padding:9px 18px}
.lbm-sug__prod img,
.lbm-sug__noimg{
  flex:none;width:56px;height:56px;object-fit:contain;
  border-radius:4px;background:#fff;
}
.lbm-sug__prodtxt{display:flex;flex-direction:column;gap:3px;min-width:0}
.lbm-sug__title{
  font-family:'myriad_prosemibold',sans-serif;
  font-size:15px;line-height:1.25;color:var(--lbm-ink,#23292c);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lbm-sug__price{
  font-family:'myriad_proregular',sans-serif;
  font-size:13.5px;line-height:1.2;color:var(--lbm-muted,#7a8287);
}
.lbm-sug__price.is-dto{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;
}
.lbm-sug__price del{
  color:#a6adb1;text-decoration:line-through;
}
.lbm-sug__price ins{
  text-decoration:none;color:var(--lbm-orange,#ef7d00);
  font-family:'myriad_prosemibold',sans-serif;
}

/* --- categorias --- */
.lbm-sug__cat{gap:16px;padding:8px 18px;justify-content:space-between}
.lbm-sug__cattxt{display:flex;flex-direction:column;gap:1px;min-width:0}
.lbm-sug__cat .lbm-sug__title{font-size:14.5px}
.lbm-sug__parent{
  font-size:12.5px;line-height:1.2;color:var(--lbm-muted,#7a8287);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lbm-sug__count{flex:none;font-size:12.5px;color:var(--lbm-muted,#7a8287)}

/* --- busquedas populares --- */
.lbm-sug__pop{gap:11px;padding:7px 18px;font-size:14.5px}
.lbm-sug__pop svg{width:14px;height:14px;flex:none;color:#a6adb1;display:block}

/* --- pie --- */
/* Pegado al fondo del panel: la llamada a la accion nunca queda fuera de
   vista, aunque la lista tenga que desplazarse. */
.lbm-sug__all{
  position:sticky;
  bottom:0;
  justify-content:center;
  margin-top:6px;padding:13px 18px;
  background:#fff;
  border-top:1px solid var(--lbm-line,#ececee);
  color:var(--lbm-orange,#ef7d00);
  font-family:'myriad_prosemibold',sans-serif;
  font-size:14.5px;
}

.lbm-sug__none{margin:0;padding:18px;color:var(--lbm-muted,#7a8287);font-size:14.5px;text-align:center}

/* ---------- movil: el panel ocupa el ancho de la pantalla ---------- */
@media (max-width:980px){
  /* Mismo trato que en escritorio, para que quitar el contorno no deje el
     campo sin ninguna senal de foco. */
  .lbm-mnav__search{
    height:34px;padding:0 13px;border-radius:99px;
    transition:background-color .18s ease;
  }
  .lbm-mnav__search:focus-within{background:#fff;opacity:1}
  .lbm-mnav__search:focus-within input{color:var(--lbm-ink,#23292c)}
  .lbm-mnav__search:focus-within input::placeholder{color:#a6adb1}
  .lbm-mnav__search:focus-within button{color:var(--lbm-muted,#7a8287);opacity:1}

  .lbm-mnav__search .lbm-sug{
    position:fixed;
    top:62px;left:12px;right:12px;
    width:auto;
    max-height:calc(100vh - 84px);
    border-radius:12px;
    transform:translateY(-6px);
  }
  .lbm-mnav__search .lbm-sug.is-open{transform:translateY(0)}
  .lbm-sug__prod img,.lbm-sug__noimg{width:48px;height:48px}
  .lbm-sug__title{font-size:14.5px}
}

@media (prefers-reduced-motion:reduce){
  .lbm-sug,.lbm-head__search{transition:none !important}
  .lbm-head__search.is-loading > button[type="submit"],
  .lbm-mnav__search.is-loading > button[type="submit"]{animation:none}
}