/**
 * ks_searchbar — rediseño del header (flag KS_SEARCHBAR_PRETTY).
 *
 * Capa de estilo sobre el header existente: tira superior, tira de confianza,
 * menú y barra de búsqueda. No toca markup del tema — todo CSS, reversible
 * desde el dashboard del módulo. `html.ks-fullbar-on` la añade front.js solo
 * cuando la barra a ancho completo se activó (así nada se esconde si el JS
 * no pudo moverla).
 *
 * Paleta del tema: --azul #124a7d · --amarillo #f9cc0f · --azul-oscuro #1e3144
 */

/* ── 1. Tira superior ────────────────────────────────────────────────
   NO se toca su layout: el tema ya coloca logo + teléfonos + cuenta sobre
   el fondo azul oscuro (#header { background: var(--azul-oscuro) }) y
   cualquier flex/align desde aquí los agolpaba. */

/* ── 2. Claim: tira de confianza visible, con estrellas de marca ────── */
@media (min-width: 992px) {
  /* El header es OSCURO (azul-oscuro): no imponer fondos aquí. */
  .header-top > .container > .row {
    font-size: 16px !important;   /* pisa el style inline del tpl */
    letter-spacing: .02em;
  }
  .header-top .col-md-8 span {
    font-weight: 500;
    color: #fff;
  }
  .header-top .col-md-8 span::before {
    content: '★ ';
    color: var(--amarillo, #f9cc0f);
  }
  .header-top .col-md-8 span::after {
    content: ' ★';
    color: var(--amarillo, #f9cc0f);
  }
  html.ks-fullbar-on .header-top .header-top-right { display: none; }
  html.ks-fullbar-on .header-top .col-md-8 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ── 3. Menú principal: banda en azul de marca, items blancos ────────
   La clase .ks-menu-band la pone front.js sobre el wrapper del menú (no
   tiene selector estable propio). Solo se colorea cuando la barra se movió
   (html.ks-fullbar-on): con el flag apagado, el tema queda intacto. */
@media (min-width: 992px) {
  /* LOOK PRIMOR: el menú comparte el MISMO fondo oscuro que el header
     (un único bloque, sin bandas de colores). Full-bleed con el truco
     100vw porque el elemento vive dentro del container y su blanco
     original es regla de ID del tema. El filo amarillo cierra el bloque. */
  html.ks-fullbar-on #header #_desktop_top_menu {
    background: var(--azul-oscuro, #1e3144);
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-bottom: 0;
    padding: 2px 0 10px;
    border-bottom: 3px solid var(--amarillo, #f9cc0f);
    /* Categorías + chips "Busca tu batería por…" en la misma línea. */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
  }

  /* Chips de modos de búsqueda junto a las categorías. */
  .ks-finder {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .ks-finder-label {
    color: rgba(255, 255, 255, .75);
    font-size: 13px;
    margin-right: 2px;
  }
  .ks-finder-chip {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    color: #fff;
    font-size: 12.5px;
    padding: 4px 12px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
  }
  .ks-finder-chip:hover {
    background: var(--amarillo, #f9cc0f);
    border-color: var(--amarillo, #f9cc0f);
    color: var(--azul, #124a7d);
  }
  /* 100vw incluye la barra de scroll vertical: clip evita el scroll lateral
     fantasma sin romper position:sticky (overflow:hidden sí lo rompería). */
  html.ks-fullbar-on body { overflow-x: clip; }
  /* El wrapper que rodea al menú no debe aportar fondo ni padding propios. */
  html.ks-fullbar-on #header .ks-menu-band {
    background: transparent;
    padding-top: 0;
    padding-bottom: 0;
  }
  /* Centrar los items elimina el vacío a la derecha de la banda. */
  html.ks-fullbar-on #header ul#top-menu {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 0;
  }
  #header .top-menu a[data-depth="0"] {
    font-weight: 600;
    padding: 10px 16px;
    border-radius: 6px;
    position: relative;
    transition: background .15s ease, color .15s ease;
  }
  html.ks-fullbar-on #header .ks-menu-band .top-menu a[data-depth="0"],
  html.ks-fullbar-on #header #_desktop_top_menu .top-menu a[data-depth="0"] {
    color: #fff;
  }
  html.ks-fullbar-on #header .ks-menu-band .top-menu a[data-depth="0"]:hover,
  html.ks-fullbar-on #header #_desktop_top_menu .top-menu a[data-depth="0"]:hover {
    background: rgba(255, 255, 255, .12);
  }
  /* "Simplemente en texto": OFERTAS pierde la pastilla y queda como texto
     amarillo (todos los idiomas). Doble ID para ganar a la regla del tema. */
  html.ks-fullbar-on #header .top-menu #lnk-ofertas a[data-depth="0"],
  html.ks-fullbar-on #header .top-menu #lnk-offers a[data-depth="0"],
  html.ks-fullbar-on #header .top-menu #lnk-offres a[data-depth="0"],
  html.ks-fullbar-on #header .top-menu #lnk-offerte a[data-depth="0"],
  html.ks-fullbar-on #header .top-menu #lnk-bietet-an a[data-depth="0"] {
    background: transparent;
    color: var(--amarillo, #f9cc0f);
    border-radius: 6px;
  }
  /* Subrayado amarillo que crece al pasar el ratón. */
  #header .top-menu a[data-depth="0"]::after {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 4px;
    height: 3px;
    border-radius: 2px;
    background: var(--amarillo, #f9cc0f);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .18s ease;
  }
  #header .top-menu a[data-depth="0"]:hover::after {
    transform: scaleX(1);
  }
}

/* ── 4. Buscador en la línea del logo (look Primor) ───────────────────
   logo | input blanco redondeado MUY ancho con lupa simple | cuenta y
   carrito. Una sola línea sobre el fondo oscuro del header, y el menú
   debajo con el mismo fondo: bloque único, como Primor. */
@media (min-width: 992px) {
  /* Línea logo+búsqueda+iconos FIJA al hacer scroll (el JS compensa la
     altura con padding-top en #header para que nada salte). */
  html.ks-headerbar .header-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background: var(--azul-oscuro, #1e3144);
    /* Sin sombra en reposo (creaba una "tira" oscura sobre el bloque del
       mismo color). Aparece solo al hacer scroll, cuando separa de verdad. */
    box-shadow: none;
    transition: box-shadow .2s ease;
  }
  html.ks-headerbar.ks-scrolled .header-nav {
    box-shadow: 0 2px 12px rgba(0, 0, 0, .3);
  }
  html.ks-headerbar .header-nav .container > .row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
  }
  html.ks-headerbar #_desktop_logo {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
  html.ks-headerbar .ks-header-search {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 2%;   /* % en lugar de px fijos: el input gana ancho real */
  }
  /* La columna del teléfono queda vacía (movido al claim); la zona derecha
     (idioma/cuenta/carrito) se compacta a su contenido. */
  html.ks-headerbar .header-nav .hidden-sm-down {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
  }
  html.ks-headerbar .header-nav .hidden-sm-down > .col-md-4 { display: none; }
  html.ks-headerbar .header-nav .hidden-sm-down > .col-md-5 {
    width: auto;
    flex: 0 0 auto;
  }

  html.ks-headerbar .ks-header-search #search_widget {
    width: 100%;
    min-width: 100%;
    float: none;
    padding: 0;
  }
  html.ks-headerbar .ks-header-search #search_widget form {
    display: flex;
    width: 100%;
    position: relative;
    margin: 0;
  }
  /* Input estilo Primor: blanco, muy redondeado, limpio, sin sombras
     aparatosas; la lupa es un icono simple dentro, a la derecha. */
  /* Con #search_widget en el selector: el CSS de ps_searchbar declara
     `#search_widget form input { padding: 10px 20px 10px 40px; … }` (el
     hueco izquierdo de 40px era para su lupa antigua) y su ID ganaba a
     cualquier regla de clases. */
  html.ks-headerbar .ks-header-search #search_widget form input[type="text"],
  html.ks-headerbar .ks-header-search #search_widget form input[name="s"] {
    border: none;
    border-radius: 999px;
    height: 46px;
    width: 100%;
    font-size: 15px;
    padding: 10px 52px 10px 20px;   /* texto con un respiro a la izquierda */
    background: #fff;
    box-shadow: none;
    transition: box-shadow .18s ease;
  }
  html.ks-headerbar .ks-header-search #search_widget form input:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(249, 204, 15, .4);
  }
  html.ks-headerbar .ks-header-search #search_widget form input::placeholder { color: #2b3542; }

  html.ks-headerbar .ks-header-search .material-icons.search {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    background: transparent;
    color: var(--azul, #124a7d);
    border-radius: 0;
    font-size: 24px;
    box-shadow: none;
    cursor: pointer;
  }

  /* Teléfono como icono ☎ en el grupo derecho (tel: clicable, tooltip). */
  html.ks-headerbar .right-nav .ks-phone-link {
    display: flex;
    align-items: center;
    color: #fff;
    transition: opacity .15s ease;
  }
  html.ks-headerbar .right-nav .ks-phone-link:hover { opacity: .8; }
  html.ks-headerbar .right-nav .ks-phone-link .material-icons {
    font-size: 26px;
    line-height: 1;
  }

  /* ── Iconos de la derecha: solo icono, con tooltip (el title lo pone JS) ─ */
  html.ks-headerbar #_desktop_user_info .user-info a > span { display: none; }
  html.ks-headerbar .blockcart .header span.hidden-sm-down { display: none; }
  html.ks-headerbar #_desktop_user_info .material-icons,
  html.ks-headerbar .blockcart .material-icons {
    font-size: 26px;
    vertical-align: middle;
  }
  /* Contador del carrito como burbuja amarilla sobre el icono. */
  html.ks-headerbar .blockcart .cart-products-count {
    background: var(--amarillo, #f9cc0f);
    color: var(--azul, #124a7d);
    border-radius: 999px;
    padding: 1px 7px;
    font-size: 12px;
    font-weight: 700;
    position: relative;
    top: -9px;
    left: -6px;
  }
  /* Grupo derecho: TODOS los elementos de .right-nav centrados verticalmente
     y alineados a la derecha, sin floats ni márgenes heredados del tema. */
  html.ks-headerbar #header .right-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    float: none;
    width: auto;
    flex: 0 0 auto;
  }
  html.ks-headerbar #header .right-nav > * {
    float: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
  }

  /* ── Selector de idioma como pastilla discreta, centrada en el eje ── */
  html.ks-headerbar #header .right-nav .language-selector-wrapper,
  html.ks-headerbar #header .right-nav .language-selector {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
  }
  html.ks-headerbar .language-selector-wrapper .language-selector button {
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    padding: 5px 12px;
    transition: background .15s ease, border-color .15s ease;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    line-height: 1;
  }
  html.ks-headerbar .language-selector-wrapper .language-selector button .expand-more {
    display: inline-flex;
    align-items: center;
    line-height: 1;
  }
  html.ks-headerbar .language-selector-wrapper .language-selector button i.material-icons {
    font-size: 18px;
    line-height: 1;
    width: auto;
    height: auto;
  }
  html.ks-headerbar .language-selector-wrapper .language-selector button:hover {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .5);
  }
  html.ks-headerbar .language-selector-wrapper .lang-flag { border-radius: 2px; }

  /* Aire vertical real alrededor del input: el theme.css de classic pone
     max-height:50px a .header-nav (se comía cualquier padding) y la línea
     azul oscura era un border-bottom 2px de custom.css. */
  html.ks-headerbar #header .header-nav {
    max-height: none;
    height: auto;
    padding: 20px 0 20px;   /* aire simétrico arriba y abajo */
    border-bottom: none;
  }

  /* Iconos (idioma/sesión/carrito) centrados verticalmente respecto al
     input: fuera márgenes/paddings heredados del tema, todo flex centrado. */
  html.ks-headerbar #header .header-nav .user-info,
  html.ks-headerbar #header .header-nav .blockcart,
  html.ks-headerbar #header .header-nav .language-selector-wrapper,
  html.ks-headerbar #header .header-nav .currency-selector {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
  }
  html.ks-headerbar #header .header-nav .blockcart {
    background: transparent;
    height: auto;
  }
  html.ks-headerbar #header .header-nav .blockcart .header {
    display: flex;
    align-items: center;
    margin: 0;
  }
  html.ks-headerbar #header .header-nav .user-info a {
    display: flex;
    align-items: center;
  }

  /* header-top deshabilitado (petición de David): el claim y su línea
     desaparecen en desktop; el bloque pasa de logo+buscador al menú. */
  html.ks-headerbar #header .header-top { display: none; }
}

/* Ejemplos como chips claros con texto azul (sobre la banda blanca). */
/* (El rayo de los ejemplos es ahora un SVG inline que pone el JS.) */
.ks-sb-hint {
  background: #eef3f9;
  border: 1px solid #d9e4f0;
  border-radius: 999px;
  padding: 3px 12px;
  margin-right: 8px;
  color: var(--azul, #124a7d);
  text-decoration: none;
  font-size: 12.5px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ks-sb-hint:hover {
  background: var(--amarillo, #f9cc0f);
  border-color: var(--amarillo, #f9cc0f);
  color: var(--azul, #124a7d);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(18, 74, 125, .18);
}
.ks-sb-hint:not(:last-child)::after { content: none; }

/* (La barra independiente bajo el menú ya no existe: el buscador vive en la
   tira del header — opción B. Las reglas .ks-sb-bar de front.css quedan como
   base inerte por si se recupera ese layout.) */

/* ── 5. Desplegable de resultados a juego (pretty+) ─────────────────── */
.ks-sb-panel {
  border: none;
  border-radius: 12px;
  box-shadow: 0 14px 44px rgba(10, 30, 60, .25);
  margin-top: 4px;
  animation: ks-sb-pop .16s ease-out;
  transform-origin: top center;
}
@keyframes ks-sb-pop {
  from { opacity: 0; transform: translateY(-6px) scale(.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ks-sb-head {
  background: #f2f6fb;
  color: #5b6b80;
  border-bottom: 1px solid #e6edf5;
}

/* Scrollbar fino y tematizado (WebKit). */
.ks-sb-panel::-webkit-scrollbar { width: 8px; }
.ks-sb-panel::-webkit-scrollbar-track { background: transparent; }
.ks-sb-panel::-webkit-scrollbar-thumb {
  background: #c4d2e2;
  border-radius: 4px;
}
.ks-sb-panel::-webkit-scrollbar-thumb:hover { background: #9fb4cc; }

/* Filas con vida: filo azul que aparece al pasar/seleccionar. */
.ks-sb-item { border-left: 3px solid transparent; transition: background .12s ease, border-color .12s ease; }
.ks-sb-item:hover,
.ks-sb-item.ks-sb-active { border-left-color: var(--amarillo, #f9cc0f); }

/* Resaltado del texto buscado: marcador sutil en vez de bloque chillón. */
.ks-sb-hl {
  background: transparent;
  font-weight: 800;
  box-shadow: inset 0 -6px 0 rgba(249, 204, 15, .45);
  border-radius: 0;
}

/* Badge de nº de baterías con degradado. */
.ks-sb-badge {
  background: linear-gradient(180deg, #e9f7ee, #d7efe0);
  border: 1px solid #bfe3c9;
}

/* Botón del carrito: pequeño salto al añadir. */
.ks-sb-cart.ks-sb-cart-ok { animation: ks-sb-added .25s ease; }
@keyframes ks-sb-added {
  0% { transform: scale(1); }
  50% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* Accesibilidad: sin animaciones si el usuario las tiene desactivadas. */
@media (prefers-reduced-motion: reduce) {
  .ks-sb-panel, .ks-sb-cart.ks-sb-cart-ok { animation: none; }
  .ks-sb-item, .ks-sb-hint, .ks-sb-bar #search_widget input,
  #header .top-menu a[data-depth="0"]::after { transition: none; }
}