/* =========================================================
   BUSCADOR — overlay con búsqueda en vivo (AJAX)
   Los !important son para ganarle a los estilos globales de
   botones/inputs de Storefront y WooCommerce.
   ========================================================= */
.arqe-search-overlay{
  position:fixed; inset:0; z-index:9999;
  display:flex; justify-content:center; align-items:flex-start;
  opacity:0; transition:opacity .2s ease;
}
.arqe-search-overlay.open{ opacity:1; }
.arqe-search-overlay[hidden]{ display:none; }

.arqe-search-overlay__backdrop{
  position:absolute; inset:0;
  background:hsl(var(--foreground)/.45);
  backdrop-filter:blur(4px);
}

.arqe-search-panel{
  position:relative; z-index:1;
  width:100%; max-width:44rem; margin:1rem; margin-top:4.5rem;
  background:var(--c-card); border-radius:var(--radius);
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  transform:translateY(-12px); transition:transform .2s ease;
  overflow:hidden;
}
.arqe-search-overlay.open .arqe-search-panel{ transform:translateY(0); }
@media(min-width:640px){ .arqe-search-panel{ margin-top:6rem; } }

/* -------- Botón de la lupa en el header --------
   Reset sobre los estilos de botón de Storefront (que lo pintaban
   como una pastilla gris con el icono en blanco/invisible). */
#arqe-search-toggle{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  color:var(--c-fg) !important;
}
#arqe-search-toggle:hover{ background:var(--c-muted) !important; }
#arqe-search-toggle svg{ display:block; }

/* -------- Formulario -------- */
.arqe-search-form{
  display:flex; align-items:center; gap:.75rem;
  padding:1.1rem 1.25rem; border-bottom:1px solid hsl(var(--border)/.6);
}
.arqe-search-form__icon{ color:var(--c-mutedfg); flex:none; }

/* -------- Input transparente, sin fondo ni bordes --------
   Reset sobre los estilos de input de Storefront. */
.arqe-search-input,
input[type="search"].arqe-search-input{
  flex:1; width:100%;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  outline:0 !important;
  padding:0 !important;
  font-family:"Archivo",sans-serif; font-size:1.15rem; color:var(--c-fg);
}
.arqe-search-input::placeholder{ color:var(--c-mutedfg); opacity:1; }
.arqe-search-input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }

/* -------- Botón cerrar (visible, con contraste navy) -------- */
.arqe-search-close{
  flex:none; display:flex; align-items:center; justify-content:center;
  height:2.25rem; width:2.25rem;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  border-radius:999px; cursor:pointer;
  color:var(--c-navy) !important; transition:.2s;
}
.arqe-search-close:hover{ background:var(--c-muted) !important; color:var(--c-orange) !important; }
.arqe-search-close svg{ display:block; }

/* -------- Resultados -------- */
.arqe-search-results{ max-height:60vh; overflow-y:auto; }
.arqe-search-list{ list-style:none; margin:0; padding:.5rem; }
.arqe-search-item a{
  display:flex; align-items:center; gap:1rem;
  padding:.65rem .75rem; border-radius:var(--radius); transition:background .15s;
}
.arqe-search-item a:hover{ background:var(--c-secondary); }
.arqe-search-item__img{
  flex:none; width:3.25rem; height:3.25rem;
  border-radius:calc(var(--radius) - 2px); overflow:hidden; background:var(--c-secondary);
}
.arqe-search-item__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.arqe-search-item__body{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.arqe-search-item__title{
  font-family:"Archivo",sans-serif; font-weight:600; font-size:.95rem; color:var(--c-fg);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.arqe-search-item__price{ font-family:"Archivo",sans-serif; font-weight:700; font-size:.85rem; color:var(--c-orange); }
.arqe-search-item__price del{ color:var(--c-mutedfg); font-weight:500; margin-right:.4rem; }

.arqe-search-viewall{
  display:block; padding:.9rem 1.25rem; border-top:1px solid var(--c-border);
  font-family:"Archivo",sans-serif; font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.14em; color:var(--c-navy); transition:color .2s;
}
.arqe-search-viewall:hover{ color:var(--c-orange); }

.arqe-search-empty, .arqe-search-loading{
  padding:1.5rem 1.25rem; margin:0; font-size:.9rem; color:var(--c-mutedfg); text-align:center;
}