/* Lupa del header — inyectada por JS dentro de la fila interna del header
   (.elementor-element-9490765, renombrada .jm-header-row), sin tocar el
   _elementor_data ni el diseño existente. Ronda G: la lupa se reposiciona
   junto al CTA (antes quedaba pegada al borde exterior del header) y la
   apertura transforma la propia fila del header en vez de abrir un panel
   aparte debajo (ver .jm-header-search-bar más abajo). */

.jm-header-row{ position:relative !important; }

/* `display:contents` sigue formando parte de la cadena de DOM real para
   herencia CSS aunque no genere caja propia — se reenvía aquí el padding
   heredado para que `.jm-header-search-bar` (hijo real de este nodo) pueda
   a su vez heredarlo correctamente con `padding:inherit`. */
.jm-header-search{ display:contents; padding-left:inherit; padding-right:inherit; }

.jm-header-search-toggle{
  position:absolute; top:50%; transform:translateY(-50%);
  /* El botón "Pedir oferta" se alinea contra el mismo borde de contenido que
     usa este cálculo (max(16px, (100% - 1280px)/2), igual que el resto del
     header) — se replica aquí sumando el ancho del CTA + un hueco visual,
     para que la lupa quede siempre justo a su izquierda a cualquier ancho
     de escritorio, en vez de un valor fijo que solo cuadra en un tamaño. */
  right:calc(max(16px, (100% - 1280px) / 2) + 175px);
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  border:1px solid rgba(22,24,29,.12); background:#F7F5F2; color:#16181D; cursor:pointer;
  border-radius:50%; z-index:20;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, opacity .2s ease;
}
.jm-header-search-toggle svg{ width:20px; height:20px; }
.jm-header-search-toggle:hover{ background:#FDEEE3; color:#F97316; border-color:rgba(249,115,22,.35); transform:translateY(-50%) scale(1.06); }
.jm-header-search-toggle:focus-visible{ outline:2px solid #F97316; outline-offset:2px; }
.jm-site-header.jm-search-open .jm-header-search-toggle{ opacity:0; visibility:hidden; pointer-events:none; }

/* ---------- Tablet / móvil (≤1024px) ----------
   El toggle de menú (hamburguesa) de HFE se autocentra con márgenes "auto"
   dentro de un contenedor cuyo ancho disponible crece de forma no lineal
   según el viewport — anclar la lupa a su lado con un valor fijo en
   píxeles no era fiable (el hueco libre real varía de ~30px a >200px
   dentro de este mismo rango). El lockup del logo, en cambio, tiene ancho
   de contenido constante (no crece con el viewport, comprobado en varios
   anchos): se ancla la lupa a su borde derecho, que sí es estable, con un
   icono compacto para caber incluso en el hueco más estrecho (~320px de
   ancho). El área táctil real se amplía con un pseudo-elemento invisible
   (::before) para mantener ~44px de zona pulsable pese al icono pequeño. */
@media (max-width:1024px){
  .jm-header-search-toggle{
    position:absolute !important; top:50% !important; transform:translateY(-50%) !important;
    right:auto !important; left:267px !important;
    width:26px !important; height:26px !important; padding:0 !important;
    min-width:0 !important; min-height:0 !important;
  }
  .jm-header-search-toggle svg{ width:14px; height:14px; }
  .jm-header-search-toggle::before{
    content:''; position:absolute; inset:-9px; /* ~44px de área táctil */
  }
}

/* ---------- Header transformado: la barra de búsqueda ocupa la fila ----------
   Superpuesta a la misma caja del header (mismo alto, misma posición) para
   que abrir el buscador no desplace ni añada altura — solo cambia lo que
   se ve dentro de la fila ya existente. */
.jm-header-search-bar{
  position:absolute; inset:0; z-index:15;
  /* `inset:0` en un hijo absoluto llena la caja COMPLETA del padre (borde a
     borde), ignorando el padding del padre — no lo "hereda" como cabría
     esperar. Se hereda explícitamente aquí para que el buscador respete el
     mismo margen lateral que ya usan logo/menú/CTA a cualquier ancho,
     en vez de quedar pegado al borde real del viewport en móvil. */
  padding-left:inherit; padding-right:inherit;
  display:flex; align-items:center; justify-content:center; gap:10px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s ease;
}
.jm-site-header.jm-search-open .jm-header-search-bar{
  opacity:1; visibility:visible; pointer-events:auto;
}
/* El resto del contenido del header (logo, menú, CTA) se desvanece mientras
   se busca — misma fila, sin hueco, sin cambio de altura. */
.jm-site-header.jm-search-open .e-con-inner{
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .25s ease;
}
.jm-header-row > .e-con-inner{ transition:opacity .25s ease; }

/* Envoltorio único (input + botón buscar + botón cerrar) — es ESTE bloque el
   que se centra como una sola unidad dentro de `.jm-header-search-bar`. Antes
   el botón de cerrar quedaba fuera del bloque centrado, lo que desplazaba
   visualmente el conjunto hacia la izquierda (input+submit centrados, pero
   con el botón de cerrar añadiendo ancho solo a la derecha). Con todo dentro
   del mismo `max-width`, la distancia a ambos laterales del header queda
   igual a cualquier ancho de viewport (centrado real, no un margen fijo). */
.jm-header-search-inner{
  position:relative; display:flex; align-items:center; gap:10px;
  width:100%; max-width:720px;
}
.jm-header-search-form{
  flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:10px;
}
.jm-header-search-form-ic{ color:#8E939C; flex-shrink:0; }
.jm-header-search-input{
  flex:1 1 auto; min-width:0; border:1px solid #E0DBD3; border-radius:10px;
  padding:11px 14px; font-family:'Inter',sans-serif; font-size:15px; color:#16181D;
  background:#F7F5F2; transition:border-color .2s ease, background-color .2s ease;
}
.jm-header-search-input:focus{ outline:none; border-color:#F97316; background:#FFFFFF; }
.jm-header-search-submit{
  flex-shrink:0; border:none; border-radius:10px; padding:11px 18px;
  background:#F97316; color:#FFFFFF; font-family:'Inter',sans-serif; font-weight:600;
  font-size:14px; cursor:pointer; transition:background-color .2s ease;
}
.jm-header-search-submit:hover{ background:#EA580C; }
.jm-header-search-close{
  flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border:1px solid rgba(22,24,29,.12); background:#F7F5F2; color:#565B63; cursor:pointer;
  border-radius:50%; transition:background-color .2s ease, color .2s ease;
}
.jm-header-search-close:hover{ background:#EDEAE4; color:#16181D; }
.jm-header-search-close:focus-visible,
.jm-header-search-submit:focus-visible,
.jm-header-search-input:focus-visible{ outline:2px solid #F97316; outline-offset:2px; }

.jm-header-search-suggestions{
  position:absolute; top:100%; left:0; right:0; margin-top:8px;
  background:#FFFFFF; border:1px solid #E0DBD3;
  border-radius:10px; max-height:min(60vh,440px); overflow-y:auto;
  box-shadow:0 16px 32px -14px rgba(11,18,32,.24); z-index:16;
}
.jm-header-search-list{ list-style:none; margin:0; padding:6px; }
.jm-header-search-item{
  display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:8px;
  text-decoration:none !important; transition:background-color .15s ease;
}
.jm-header-search-item:hover,
.jm-header-search-item:focus-visible{ background:#F7F5F2; }
.jm-header-search-item img{ width:40px; height:40px; object-fit:contain; border:1px solid #E0DBD3; border-radius:6px; background:#FFFFFF; flex-shrink:0; }
.jm-header-search-item-body{ display:flex; flex-direction:column; min-width:0; flex:1 1 auto; }
.jm-header-search-item-title{ font-family:'Inter',sans-serif; font-weight:500; font-size:13.5px; color:#16181D; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jm-header-search-item-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:5px; font-family:'IBM Plex Mono',monospace; font-size:11px; color:#8E939C; margin-top:2px; }
.jm-header-search-item-sku{ color:#16181D; font-weight:600; }
.jm-header-search-item-sep{ color:#C9C2B6; }
.jm-header-search-item-price{ flex-shrink:0; font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600; color:#16181D; }
.jm-header-search-empty{ margin:0; padding:16px; font-family:'Inter',sans-serif; font-size:13.5px; color:#565B63; text-align:center; }
.jm-header-search-viewall{
  display:block; text-align:center; padding:10px; font-family:'Inter',sans-serif; font-weight:500;
  font-size:13px; color:#F97316 !important; text-decoration:none !important; border-top:1px solid #E0DBD3;
}
.jm-header-search-viewall:hover{ text-decoration:underline !important; }

@media (max-width:640px){
  .jm-header-search-bar{ gap:8px; }
  .jm-header-search-inner{ max-width:none; }
  .jm-header-search-form{ gap:8px; }
  .jm-header-search-input{
    font-size:16px; /* evita el zoom automático de iOS/Android en focus */
    padding:10px 12px;
  }
  .jm-header-search-submit{ padding:10px 14px; font-size:13px; }
  .jm-header-search-close{ width:38px; height:38px; }
  .jm-header-search-suggestions{ max-width:none; }
}

@media (prefers-reduced-motion:reduce){
  .jm-header-search-toggle,
  .jm-header-search-bar,
  .jm-header-row > .e-con-inner{ transition:none !important; }
}