/**
 * ks_searchbar — estilos del desplegable de autocompletado (vehículos + productos).
 */
/* El panel se cuelga de <body> y se posiciona por JS (position:fixed) bajo el
   input, para que ninguna cabecera con overflow:hidden lo recorte. top/left/width
   los fija front.js; aquí solo el aspecto y un z-index por encima del header. */
.ks-sb-panel {
  position: fixed;
  z-index: 2147483000;
  max-height: 70vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.ks-sb-head {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #666;
  padding: 8px 14px 4px;
  background: #fafafa;
  border-bottom: 1px solid #f0f0f0;
}
/* Equivalencias de otra marca: "Opciones compatibles con BANNER …". Texto de
   frase (no versalitas: lleva una referencia que debe leerse tal cual). */
.ks-sb-head--compat {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  color: #124a7d;
  background: #eef4fa;
  border-bottom-color: #dbe6f1;
}

.ks-sb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  text-decoration: none;
  color: #222;
  border-bottom: 1px solid #f4f4f4;
  cursor: pointer;
}
.ks-sb-item:last-child { border-bottom: none; }
.ks-sb-item:hover,
.ks-sb-item.ks-sb-active { background: #f3f8ff; }

.ks-sb-ico { font-size: 18px; line-height: 1; flex: 0 0 auto; display: flex; align-items: center; color: #124a7d; }
.ks-sb-ico svg { width: 22px; height: 22px; }
.ks-sb-ico .ks-sb-typeimg { width: 32px; height: 32px; object-fit: contain; }
.ks-serp-chip .ks-sb-typeimg { width: 20px; height: 20px; vertical-align: -5px; margin-right: 2px; }
/* SVGs dentro de chips y cabeceras: alineados con el texto. */
.ks-sb-suggest-head svg,
.ks-serp-chip svg { width: 15px; height: 15px; vertical-align: -2px; margin-right: 2px; }
.ks-sb-cart svg { width: 18px; height: 18px; vertical-align: middle; }

.ks-sb-thumb {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex: 0 0 auto;
  border: 1px solid #eee;
  border-radius: 4px;
  background: #fff;
}

.ks-sb-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.ks-sb-label {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ks-sb-sub { font-size: 13px; color: #6b6b6b; } /* #9a9a9a daba 2,8:1; AA pide 4,5:1 */
.ks-sb-years { color: #5b6b80; font-weight: 600; }

.ks-sb-badge {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  color: #1a7f37;
  background: #e8f5ec;
  border-radius: 10px;
  padding: 2px 8px;
}

.ks-sb-vehicle .ks-sb-label { color: #14315c; }

/* Fila "Seguir con tu vehículo" (último vehículo consultado). */
.ks-sb-recent { background: #fffdf2; }
.ks-sb-recent .ks-sb-sub { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: #6f5f1f; }
.ks-sb-recent .ks-sb-label { color: #14315c; }

/* Fila de landing de tipo ("Baterías para Cortacésped →"). */
.ks-sb-typelanding { background: #f4f8fc; }
.ks-sb-typelanding .ks-sb-label { color: #124a7d; font-weight: 700; }
.ks-sb-go { flex: 0 0 auto; color: #124a7d; font-weight: 700; }

/* ── Barra de búsqueda a ancho completo bajo el menú (desktop) ─────────
   La crea front.js moviendo el #search_widget del tema. */
.ks-sb-bar {
  background: #f5f7fa;
  border-bottom: 1px solid #e4e8ee;
  padding: 12px 0 8px;
}
.ks-sb-bar #search_widget {
  width: 100%;
  min-width: 100%;
  float: none;
  padding: 0;
}
.ks-sb-bar #search_widget form {
  display: flex;
  width: 100%;
  position: relative;
  margin: 0;
}
.ks-sb-bar #search_widget input[type="text"],
.ks-sb-bar #search_widget input[name="s"] {
  width: 100%;
  height: 46px;
  font-size: 16px;
  padding: 0 46px 0 16px;
  border: 2px solid #14315c;
  border-radius: 8px;
  background: #fff;
}
/* Iconos del tema (lupa/clear) centrados a la derecha del input grande.
   inline-block en ::after evita heredar el subrayado del botón. */
.ks-sb-bar #search_widget .material-icons {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #14315c;
}
/* Chips de ejemplo (dentro del desplegable, al enfocar el buscador vacío). */
.ks-sb-hint {
  background: #f1f4f8;
  border: 1px solid #dde5ee;
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
  color: #124a7d;
  font-size: 13px;
}
.ks-sb-hint:hover { background: #e4ecf5; }
/* Chips de acción (panel en frío / red de seguridad q0): misma píldora que
   .ks-sb-hint pero como enlace con icono. */
.ks-sb-actions .ks-sb-hint { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.ks-sb-actions .ks-sb-hint svg { width: 15px; height: 15px; flex: 0 0 auto; }
.ks-sb-actions .ks-sb-hint:hover { text-decoration: none; color: #124a7d; }

/* Desktop: resultados más grandes y legibles (en móvil el tamaño compacto
   aprovecha mejor la pantalla). */
@media (min-width: 992px) {
  .ks-sb-panel { max-height: 75vh; }
  .ks-sb-item { padding: 12px 16px; gap: 12px; }
  .ks-sb-label { font-size: 17px; }
  .ks-sb-sub { font-size: 14px; }
  .ks-sb-thumb { width: 48px; height: 48px; }
  .ks-sb-ico { font-size: 22px; }
  .ks-sb-head { font-size: 12px; padding: 10px 16px 5px; }
  .ks-sb-badge { font-size: 12px; padding: 3px 10px; }
  .ks-sb-msg { font-size: 14px; }
  .ks-sb-note { font-size: 13px; }
  .ks-sb-rich .ks-product-title { font-size: 16px; }
  .ks-sb-rich .ks-sb-svc .ks-tag { font-size: 13px; }
  .ks-sb-rich .ks-sb-specs { font-size: 14px; }
  .ks-sb-cart { font-size: 13px; padding: 8px 14px; }
  .ks-sb-cart-txt { display: inline; }
  .ks-sb-pleft { width: 72px; }
  .ks-sb-pleft .ks-sb-thumb { width: 66px; height: 66px; }
  .ks-sb-price { font-size: 18px; }
}

/* Layout "precio protagonista, bajo la foto":
   [ foto + precio ] [ info izq ] [ botón Añadir ]. Centrado verticalmente. */
.ks-sb-product { align-items: center; }
.ks-sb-pleft {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 60px;
}
.ks-sb-pleft .ks-sb-thumb {
  width: 56px;
  height: 56px;
  border: 1px solid #ececec;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(20, 49, 92, .10);
  background: #fff;
}
.ks-sb-price {
  display: block;
  min-height: 1em; /* reserva el hueco aunque no haya precio → filas a igual altura */
  font-size: 16px;
  font-weight: 800;
  color: #124a7d;
  text-align: center;
  white-space: nowrap;
  line-height: 1;
}
.ks-sb-pright { min-width: 0; flex: 1 1 auto; text-align: left; }

/* Columna derecha: solo el botón "Añadir", centrado verticalmente. */
.ks-sb-aside {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  margin-left: 4px;
}

/* Fila de producto enriquecida: search_info (HTML de servidor con título,
   voltios, Ah, CCA, tecnología, medidas). Se compacta y alinea a la
   izquierda para que funcione como fila de dropdown junto a la miniatura. */
.ks-sb-rich { display: block; min-width: 0; flex: 1 1 auto; }
.ks-sb-rich .ks-product-title {
  text-align: left;
  margin: 0 0 3px;
  font-size: 15px;
  font-weight: 600;
  color: #222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Características: texto fino separado por puntos (debajo del título). */
.ks-sb-rich .ks-sb-specs {
  font-size: 13px;
  line-height: 1.4;
  color: #5a6470;
}
.ks-sb-rich .ks-sb-specs > span:not(:last-child)::after {
  content: " \00b7 ";
  color: #b9c0c8;
}
/* Marca y referencia (mpn) al inicio de las características. */
.ks-sb-rich .ks-sb-specs .ks-spec-brand { font-weight: 700; color: #1f2d3d; }
.ks-sb-rich .ks-sb-specs .ks-spec-mpn { font-weight: 600; color: #1f2d3d; }
/* Servicios (abajo): pastilla suave azul clara con check verde. */
.ks-sb-rich .ks-sb-svc { margin-top: 5px; line-height: 1; }
.ks-sb-rich .ks-sb-svc .ks-tag {
  display: inline-flex;
  align-items: center;
  background: #eaf3fb;
  color: #0e3a63;
  border-radius: 999px;
  padding: 3px 10px;
  margin: 3px 6px 0 0;
  font-size: 12px;
  font-weight: 600;
  white-space: normal;
}
.ks-sb-rich .ks-sb-svc .ks-tag::before {
  content: "\2713";
  color: #1a7f37;
  font-weight: 700;
  margin-right: 4px;
}

/* Red de seguridad: si el autocomplete nativo de ps_searchbar (jQuery UI)
   llegara a inicializarse pese al unregister del JS y al destroy del widget,
   su menú queda oculto — sin esto los artículos saldrían duplicados (el
   panel nuevo + el menú nativo debajo). Clase propia de ps_searchbar. */
ul.searchbar-autocomplete { display: none !important; }

/* Resaltado del texto buscado dentro de cada resultado. */
.ks-sb-hl { font-weight: 800; color: inherit; background: #fff3bf; border-radius: 2px; }

/* ── Sección extra en la página de resultados de búsqueda ──────────────
   Vehículos compatibles + categorías + equivalencias, inyectada por
   front.js encima del listado de productos del SearchController. */
.ks-serp-extra {
  margin: 0 0 24px;
  padding: 16px 18px;
  background: #f7fafd;
  border: 1px solid #e3ecf5;
  border-radius: 10px;
}
.ks-serp-dym { font-size: 15px; color: #5b6b80; margin: 0 0 10px; }
.ks-serp-dym a { color: #124a7d; }
.ks-serp-head {
  font-size: 15px;
  font-weight: 700;
  color: #14315c;
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.ks-serp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.ks-serp-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #e0e8f0;
  border-radius: 8px;
  text-decoration: none;
  color: #222;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.ks-serp-card:hover {
  border-color: #b9cde0;
  box-shadow: 0 4px 14px rgba(10, 30, 60, .12);
  text-decoration: none;
}
.ks-serp-card .ks-sb-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #14315c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ks-serp-card .ks-sb-sub { display: block; font-size: 12px; color: #6b6b6b; }
.ks-serp-card .ks-sb-text { min-width: 0; flex: 1 1 auto; }
.ks-serp-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.ks-serp-chip {
  background: #eef3f9;
  border: 1px solid #d9e4f0;
  border-radius: 999px;
  color: #124a7d;
  font-size: 13px;
  padding: 5px 14px;
  text-decoration: none;
}
.ks-serp-chip:hover { background: #e2ebf5; text-decoration: none; color: #0a2f54; }

/* Bloque de ejemplos dentro del desplegable (al enfocar el buscador vacío). */
.ks-sb-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px 14px;
}

/* Botón ✕ para cerrar el desplegable (arriba a la derecha del panel).
   Sticky y PRIMER hijo del panel: con absolute se iba con el scroll y en una
   lista larga no había forma de cerrar. Margen inferior negativo = no ocupa
   sitio en el flujo (6 + 26 − 32 = 0). */
.ks-sb-close {
  position: sticky;
  top: 6px;
  margin: 6px 6px -32px auto;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: #eef1f5;
  color: #5b6b80;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.ks-sb-close:hover { background: #e0e6ee; color: #16314f; }
/* Que la primera fila (cabecera, aviso o enlace: la de matrícula) no quede
   debajo de la ✕. */
.ks-sb-panel > .ks-sb-close + * { padding-right: 40px; }
/* Móvil: diana táctil de 44 px. */
@media (max-width: 767px) {
  .ks-sb-close { width: 44px; height: 44px; margin-bottom: -50px; font-size: 16px; }
  .ks-sb-panel > .ks-sb-close + * { padding-right: 58px; }
}

/* Nota de typo corregido ("¿Querías decir ford fiesta?"). */
.ks-sb-note {
  padding: 8px 14px;
  font-size: 12px;
  color: #6b6b6b;
  background: #fffbe8;
  border-bottom: 1px solid #f0ead2;
}
.ks-sb-note strong { color: #14315c; }

/* Filas CTA (equivalencias de referencia, matrícula, contacto, glosario). */
.ks-sb-cta .ks-sb-label { color: #124a7d; font-weight: 600; white-space: normal; } /* acciones: a 2 líneas antes que cortar la matrícula o la referencia */
.ks-sb-cta { background: #f7fafd; }

/* Categorías sugeridas. */
.ks-sb-category .ks-sb-label { color: #5a4a00; font-weight: 600; }

/* Botón "Añadir" del resultado de producto: CTA azul de marca, bajo el
   precio. En móvil muestra solo el icono (el texto se oculta); en escritorio
   "🛒 Añadir". */
.ks-sb-cart {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  padding: 7px 10px;
  border: none;
  border-radius: 6px;
  background: #124a7d;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}
.ks-sb-cart svg { width: 16px; height: 16px; }
.ks-sb-cart:hover { background: #0e3a63; }
.ks-sb-cart:disabled { opacity: .6; cursor: default; }
.ks-sb-cart.ks-sb-cart-ok {
  background: #1a7f37;
  color: #fff;
  font-weight: 700;
}
/* Móvil: solo el icono (la palabra se oculta para no apretar la fila). */
.ks-sb-cart-txt { display: none; }

/* Móvil/tableta (29-sep-2026): convierte 6,4% frente a 9,6% en escritorio.
   Botón "Añadir" con zona táctil de 44×44 px (antes ~30 px: fácil de fallar
   con el dedo) y precio algo mayor. Solo tamaños: mismo layout. */
@media (max-width: 991px) {
  .ks-sb-cart { min-width: 44px; min-height: 44px; padding: 10px; border-radius: 8px; }
  .ks-sb-cart svg { width: 20px; height: 20px; }
  .ks-sb-aside { margin-left: 8px; }
  .ks-sb-price { font-size: 17px; }
}

/* Filas informativas (cargando / sin resultados / error de red). */
.ks-sb-msg {
  padding: 14px;
  font-size: 13px;
  color: #6b6b6b;
  text-align: center;
}
.ks-sb-loading { color: #14315c; }
.ks-sb-empty { color: #6b6b6b; }
.ks-sb-error { color: #b3261e; }

/* Botón "Añadir" en estado de error (fallo del alta ajax): feedback visible. */
.ks-sb-cart-err {
  background: #b3261e !important;
  color: #fff !important;
}

/* Región solo-lectores-de-pantalla (anuncios aria-live del nº de resultados). */
.ks-sb-srlive {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Red de seguridad del search_info (antes era un <style> inline DENTRO de
   search_info.tpl, que se duplicaba por cada producto presentado en CUALQUIER
   página). Este front.css se carga en todo el sitio vía hookHeader, así que
   las mismas reglas viven aquí una sola vez. Sin scope a .ks-sb-rich a
   propósito: cubre el caso de que el desplegable aparezca donde el resto del
   CSS rico no aplique. */
.ks-product-title { display: block; text-align: left; margin: 0 0 3px; font-size: 0.92rem; font-weight: 600; }
.ks-sb-specs { font-size: 0.82rem; line-height: 1.4; color: #5a6470; }
.ks-sb-specs > span:not(:last-child)::after { content: " \00b7 "; color: #b9c0c8; }
.ks-sb-svc { margin-top: 4px; }
.ks-sb-svc .ks-tag { display: inline-flex; align-items: center; background: #eaf3fb; color: #0e3a63; border-radius: 999px; padding: 2px 10px; margin: 3px 6px 0 0; font-size: 0.76rem; font-weight: 600; white-space: normal; }
.ks-sb-svc .ks-tag::before { content: "\2713"; color: #1a7f37; font-weight: 700; margin-right: 4px; }