/* ============================================================
   PRIME HEADER v1.0 - Migrated from staging (3.81.229.41)
   Date: 2026-04-18
   Scope: logo + search bar + menu layout + sticky disable
   Safe to remove: delete link tag from head.tpl + this file
   ============================================================ */

/* ============================================================
   DESKTOP (≥992px): logo left, search center, icons right, menu below
   ============================================================ */
/* Logo size PRIME (desktop) */
@media (min-width:992px){
  html body img.logo.img-fluid{
    max-width:220px !important;
    max-height:none !important;
    width:auto !important;
    height:auto !important;
  }
  html body #desktop_logo,
  html body .col-header-center{
    display:flex !important;
    align-items:center !important;
  }
  /* Search bar: gap chico respecto al logo */
  html body #header .row.align-items-center > .col-12.col-search-relocated{
    margin-left:24px !important;
  }
  /* Menú (segunda fila): shift al <ul> del megamenu para que el ícono home
     arranque alineado con el borde izquierdo del search bar */
  html body .col-header-left.col-header-menu{
    padding-left:0 !important;
  }
  html body #cbp-hrmenu > ul,
  html body #iqitmegamenu-horizontal > nav#cbp-hrmenu > ul{
    padding-left:89px !important;
    margin-left:0 !important;
  }
}

/* Row del logo: wrap habilitado para que segunda fila funcione */
html body #header .row.align-items-center{flex-wrap:wrap !important}

/* Logo a la izquierda */
html body #header .row.align-items-center > .col-header-center,
html body #header .row.align-items-center > .col.col-auto.col-header-center{
  order:1 !important;flex:0 0 auto !important;text-align:left !important;
  margin:0 !important;padding-left:56px !important;padding-right:0 !important;
}

/* Search relocated en el medio (640px max) */
html body #header .row.align-items-center > .col-12.col-search-relocated{
  order:2 !important;flex:0 1 640px !important;max-width:640px !important;
  width:640px !important;padding:0 24px !important;margin-top:0 !important;margin-right:0 !important;margin-bottom:0 !important;
}

/* Iconos a la derecha con margin-left auto */
html body #header .row.align-items-center > .col.col-header-right,
html body #header .row.align-items-center > .col-header-right{
  order:3 !important;flex:0 0 auto !important;margin-left:auto !important;
  width:auto !important;max-width:none !important;padding-right:60px !important;
}

/* Nav (Tienda/Combos/Ofertas/Articulos/Contacto) DEBAJO en segunda fila */
html body #header .row.align-items-center > .col.col-header-left.col-header-menu{
  order:4 !important;flex:0 0 100% !important;max-width:100% !important;
  width:100% !important;padding-left:235px !important;padding-top:0 !important;
  padding-bottom:0 !important;margin-top:-9px !important;
}

/* Quitar negritas del nav inferior */
html body #header .col-header-menu #cbp-hrmenu .nav-link,
html body #header .col-header-menu .cbp-hrmenu-tab > a{
  font-weight:500 !important;text-transform:none !important;
}

/* Nav inferior: font-size 12px, compacto */
html body #header .col-header-menu #cbp-hrmenu,
html body #header .col-header-menu .cbp-hrmenu-tab,
html body #header .col-header-menu .cbp-hrmenu-tab > a,
html body #header .col-header-menu .nav-link{
  font-size:12px !important;line-height:1.2 !important;
}
html body #header .col-header-menu .cbp-hrmenu-tab > a{
  padding-top:2px !important;padding-bottom:2px !important;
}

/* SEARCH WIDGET - styling completo */
html body #header #search_widget,
html body #header #search_widget form,
html body #header #search_widget .input-group{
  width:100% !important;position:relative !important;display:block !important;
}
html body #header #search_widget .form-search-control{
  width:100% !important;border:1.5px solid #d0d0d0 !important;
  background:#fafafa !important;padding:10px 60px 10px 18px !important;
  border-radius:4px !important;font-size:14px !important;height:auto !important;
  box-shadow:none !important;
}
html body #header #search_widget .form-search-control:focus{
  border-color:#9ca3af !important;background:#fff !important;border-width:2px !important;
  box-shadow:0 0 0 4px rgba(156,163,175,0.25) !important;outline:none !important;
}
/* Botón buscar rojo con icono blanco */
html body #header #search_widget button.search-btn,
html body #header #search_widget .input-group button.search-btn,
html body #search_widget .input-group .search-btn{
  position:absolute !important;right:0 !important;top:0 !important;bottom:0 !important;
  height:100% !important;width:54px !important;min-width:54px !important;max-width:54px !important;
  border-radius:0 4px 4px 0 !important;
  background-color:#FF0D09 !important;background:#FF0D09 !important;
  border:none !important;color:#fff !important;cursor:pointer !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  padding:0 !important;z-index:5 !important;transform:none !important;
}
html body #header #search_widget button.search-btn:hover,
html body #search_widget .input-group .search-btn:hover{
  background-color:#d10c08 !important;background:#d10c08 !important;
}
html body #header #search_widget button.search-btn i,
html body #search_widget .input-group .search-btn i{
  color:#fff !important;font-size:20px !important;margin:0 !important;line-height:1 !important;
}

/* Hide original search position (estaba al lado de los iconos) */
html body #header .col.col-search.header-btn-w{display:none !important}

/* Header total height compactado */
html body #header .header-top,
html body #header #desktop-header{
  padding-top:4px !important;padding-bottom:4px !important;
}

/* Icons container: inward nudge */
html body #header .col-header-right{
  transform:none !important;position:relative !important;right:-7px !important;
}
html body #header .col-header-right > .row{margin-right:60px !important}
html body #header .row.align-items-center > .col.col-header-right{padding-right:60px !important}
html body #header .col-header-right .row.no-gutters.justify-content-end{margin-right:0 !important}

/* Previene overflow horizontal (antes causaba por transform:translateX) */
html body{overflow-x:hidden !important}

/* Autocomplete dropdown (desktop): alineado con el search */
html body .autocomplete-suggestions{
  width:592px !important;max-width:592px !important;left:244px !important;
  top:auto !important;margin-top:2px !important;
  border:1px solid #e5e5e5 !important;border-radius:4px !important;
  box-shadow:0 8px 24px rgba(0,0,0,0.18),0 2px 6px rgba(0,0,0,0.08) !important;
  background:#fff !important;overflow:hidden !important;
}
html body .autocomplete-suggestions .autocomplete-suggestion{
  border-bottom:1px solid #f0f0f0 !important;
}
html body .autocomplete-suggestions .autocomplete-suggestion:last-child{
  border-bottom:none !important;
}

/* ============================================================
   MOBILE (≤991px): logo centered, search compact below
   ============================================================ */
#prime-mobile-search{display:none}
@media (max-width:991px){
  /* Show mobile-header */
  html body #mobile-header{display:block !important;height:auto !important;background:#fff !important}
  html body #mobile-header .sticky-mobile-wrapper{background:#fff !important}
  /* Row protection */
  html body #mobile-header #mobile-header-sticky .row-mobile-header{flex-wrap:nowrap !important}
  html body #mobile-header #mobile-header-sticky .col-mobile-btn{flex:0 0 auto !important}
  html body #mobile-header #mobile-header-sticky .col-mobile-logo{flex:1 1 auto !important;min-width:0 !important}
  /* Logo mobile reducido */
  html body img.logo.img-fluid{max-width:140px !important;max-height:38px !important}
  /* Search wrapper pegado al logo */
  #prime-mobile-search{
    display:block !important;background:#fff !important;
    padding:0 12px 8px !important;margin-top:-12px !important;
    border:none !important;box-sizing:border-box !important;width:100% !important;margin-bottom:0 !important;
  }
  #prime-mobile-search #search_widget{
    display:block !important;width:100% !important;padding:0 !important;
    background:#fff !important;margin:0 !important;position:static !important;
  }
  #prime-mobile-search #search_widget form{position:relative !important;display:block !important;width:100% !important;margin:0 !important}
  #prime-mobile-search #search_widget .input-group{position:relative !important;display:block !important;width:100% !important}
  #prime-mobile-search #search_widget .form-search-control{
    width:100% !important;height:42px !important;padding:10px 52px 10px 14px !important;
    border:1.5px solid #d0d0d0 !important;background:#fff !important;
    border-radius:4px !important;font-size:14px !important;outline:none !important;box-sizing:border-box !important;
  }
  #prime-mobile-search #search_widget .form-search-control:focus{border-color:#9ca3af !important;background:#fff !important;border-width:2px !important;box-shadow:0 0 0 4px rgba(156,163,175,0.25) !important}
  #prime-mobile-search #search_widget button.search-btn{
    position:absolute !important;right:0 !important;top:0 !important;
    height:42px !important;width:46px !important;border-radius:0 4px 4px 0 !important;
    background:#FF0D09 !important;border:none !important;color:#fff !important;
    display:flex !important;align-items:center !important;justify-content:center !important;padding:0 !important;
  }
  #prime-mobile-search #search_widget button.search-btn i{color:#fff !important;font-size:15px !important}
  #prime-mobile-search #search_widget button.search-btn{
    font-family:"FontAwesome","Font Awesome 5 Free","Font Awesome 6 Free",sans-serif !important;
    font-size:16px !important;color:#fff !important;
  }
  #prime-mobile-search #search_widget button.search-btn i,
  #prime-mobile-search #search_widget button.search-btn svg,
  #prime-mobile-search #search_widget button.search-btn .material-icons{
    color:#fff !important;font-size:16px !important;opacity:1 !important;
    visibility:visible !important;display:inline-block !important;fill:#fff !important;
  }
  #prime-mobile-search #search_widget button.search-btn::before{content:none !important;display:none !important}
  #prime-mobile-search #search_widget button.search-btn *{color:#fff !important;fill:#fff !important}
  /* Ocultar iconos lupa antiguos */
  html body #mobile-header .fa-search,
  html body #mobile-header [class*="search-toggle"],
  html body #mobile-header [data-target*="search"],
  html body #mobile-header [href*="search"],
  html body #mobile-header .header-btn[class*="search"],
  html body #header-search-btn,
  html body .fullscreen-search,
  html body .header-search-btn-mobile,
  html body .mobile-header-search-toggle{
    display:none !important;
  }
}

/* ============================================================
   STICKY HEADER OFF - desktop + mobile
   ============================================================ */
html body.sticky-header #header,
html body #header.sticky,
html body #header.sticky-on,
html body #header.sticky-header,
html body #header.is-sticky,
html body #header.has-sticky-header,
html body .header-top.sticky,
html body .header-top.sticky-on,
html body #desktop-header.sticky,
html body #desktop-header.sticky-on,
html body #mobile-header.sticky,
html body #mobile-header.sticky-on,
html body #mobile-header-sticky.sticky,
html body #mobile-header-sticky.sticky-on,
html body #mobile-header .sticky-mobile-wrapper.sticky,
html body #mobile-header .sticky-mobile-wrapper.sticky-on{
  position:static !important;
  top:auto !important;bottom:auto !important;
  transform:none !important;box-shadow:none !important;
}
html body.has-sticky-header,
html body.sticky-header{
  padding-top:0 !important;
}

/* v=15 - Placeholder styling: light gray + 90% opacity */
html body #header #search_widget .form-search-control::placeholder,
html body #prime-mobile-search #search_widget .form-search-control::placeholder,
html body #header #search_widget .form-search-control::-webkit-input-placeholder,
html body #prime-mobile-search #search_widget .form-search-control::-webkit-input-placeholder{
  color:#9ca3af !important;
  opacity:0.9 !important;
}

/* v=21 - Icons (Iniciar sesión + Carrito) push down: SOLO desktop */
@media (min-width:992px){
  html body #header .col-header-right{
    margin-top:32px !important;
  }
}

/* v=22 - Iconos header (Iniciar sesión + Carrito) +30% tamaño (desktop) */
@media (min-width:992px){
  html body #header .col-header-right .header-btn i.fa,
  html body #header .col-header-right .header-btn i.icon,
  html body #header .col-header-right i.fa.icon{
    font-size:26px !important;
    line-height:1 !important;
  }
}


/* v=30 - Mobile: shift iniciar sesión + carrito 3px a la izquierda */
@media (max-width:991px){
  html body #mobile-header #mobile-header-sticky .col-mobile-btn-account{transform:translateX(-13px) !important}
  html body #mobile-header #mobile-header-sticky .col-mobile-btn-cart{transform:translateX(-5px) !important}
}

/* v=33 - Mobile: +20% tamaño íconos menu, iniciar sesión, carrito */
@media (max-width:991px){
  html body #mobile-header .col-mobile-btn-menu .m-nav-btn i,
  html body #mobile-header .col-mobile-btn-menu i.fa-bars,
  html body #mobile-header .col-mobile-btn-account .m-nav-btn i,
  html body #mobile-header .col-mobile-btn-account i.fa-user,
  html body #mobile-header .col-mobile-btn-cart .m-nav-btn i,
  html body #mobile-header .col-mobile-btn-cart i.fa-shopping-bag,
  html body #mobile-header .col-mobile-btn-cart i.mobile-bag-icon{
    font-size:24px !important;
    line-height:1 !important;
  }
}

/* v=35 - Desktop: reducir 20% la altura del banner top (Rev Slider)
   SIN tocar el tamaño del texto. Se logra reduciendo el padding vertical
   del .header-nav (contenedor) y el min-height del módulo rs-module. */
@media (min-width:992px){
  html body #header .header-nav{
    padding-top:0 !important;
    padding-bottom:0 !important;
  }
  html body #header .header-nav rs-module,
  html body #header .header-nav rs-module-wrap{
    min-height:0 !important;
  }
}

/* v=36 - Sticky header OFF (selectores adicionales específicos del theme warehouse)
   El theme usa .stuck-header + .sticky-desktop-wrapper + stickyHeader JS.
   Los rules previos (sticky, is-sticky, sticky-on) no cubrían estas clases. */
html body .sticky-desktop-wrapper,
html body .sticky-desktop-wrapper.stuck-header,
html body #desktop-header.stuck-header,
html body #header.stuck-header,
html body .stuck-header,
html body #mobile-header .sticky-mobile-wrapper.stuck-header,
html body #mobile-header.stuck-header{
  position:static !important;
  top:auto !important;
  bottom:auto !important;
  transform:none !important;
  box-shadow:none !important;
  width:auto !important;
  left:auto !important;
  right:auto !important;
  z-index:auto !important;
}
/* Evitar padding-top que el theme añade al body cuando activa el sticky wrapper */
html body.sticky-desktop-wrapper,
html body.has-stuck-header{
  padding-top:0 !important;
}

/* v=37 - Sticky OFF en MOBILE: el theme aplica .sticky-mobile-wrapper al
   wrapper mobile y lo fija cuando scrolleas. Forzamos static para liberar
   el header al scroll.  */
html body #mobile-header .sticky-mobile-wrapper,
html body #mobile-header-sticky,
html body #mobile-header-sticky .sticky-mobile-wrapper,
html body #mobile-header #mobile-header-sticky,
html body .sticky-mobile-wrapper.stuck-header,
html body .sticky-mobile-wrapper.sticky,
html body .sticky-mobile-wrapper.sticky-on,
html body .sticky-mobile-wrapper.is-sticky{
  position:static !important;
  top:auto !important;
  bottom:auto !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;
  box-shadow:none !important;
  width:auto !important;
  z-index:auto !important;
}
/* Evitar padding-top que el theme añade al body en mobile cuando activa el sticky */
html body.sticky-mobile-wrapper,
html body.has-sticky-mobile,
html body.has-stuck-mobile-header{
  padding-top:0 !important;
}

/* v=38 - Desktop: shift UP 10px todo EXCEPTO el logo.
   Afecta: banner .header-nav, search bar, iconos der (iniciar/cart), menú nav.
   El logo queda en su posición actual. */
@media (min-width:992px){
  html body #header .row.align-items-center > .col-12.col-search-relocated{
    margin-top:-6px !important;
  }
  html body #header .col-header-right{
    margin-top:26px !important; /* -6 */
  }
  html body #header .row.align-items-center > .col.col-header-left.col-header-menu{
    margin-top:-15px !important; /* -6 */
  }
}