/* ===== VF Header — legibilidad del header de vallefeliz.cl =====
   El tema dejaba el buscador en blanco al 20% sobre rojo (casi invisible),
   los enlaces al 80% de opacidad y 24 categorías apretadas en tres filas. */

:root{
  --vf-rojo:#d32f2f;
  --vf-rojo-osc:#b3221f;
  --vf-nav:#2e2e2e;
  --vf-texto:#1f1f1f;
}

/* ---------- Buscador: campo blanco, legible ----------
   El botón se deja en el flujo del flex (al sacarlo con position:absolute,
   la columna flexible se desbordaba y tapaba el botón Acceder). */
.header-main .searchform .flex-row{ align-items:center; gap:8px; }
.header-main .searchform .flex-col.flex-grow{ min-width:0; padding-right:0 !important; }

.header-main .searchform input.search-field,
.header-main input[type="search"]{
  box-sizing:border-box !important; width:100% !important; max-width:100% !important;
  background:#fff !important;
  color:var(--vf-texto) !important;
  border:1px solid rgba(0,0,0,.08) !important;
  border-radius:999px !important;
  height:44px !important;
  padding:0 20px !important;
  font-size:15px !important;
  box-shadow:0 2px 8px rgba(0,0,0,.12) !important;
}
.header-main input.search-field::placeholder{ color:#8a8a8a !important; opacity:1 !important; }
.header-main input.search-field:focus{
  border-color:#fff !important;
  box-shadow:0 0 0 3px rgba(255,255,255,.45), 0 2px 8px rgba(0,0,0,.15) !important;
  outline:none !important;
}

/* Botón de lupa: círculo rojo junto al campo */
.header-main .searchform .ux-search-submit,
.header-main .searchform button[type="submit"]{
  width:44px !important; height:44px !important; min-height:0 !important;
  padding:0 !important; margin:0 !important; flex:none !important;
  background:#fff !important; border:0 !important; border-radius:50% !important;
  color:var(--vf-rojo) !important;
  box-shadow:0 2px 8px rgba(0,0,0,.15) !important;
  display:flex !important; align-items:center; justify-content:center;
  transition:background .18s, color .18s, transform .15s;
}
.header-main .searchform .ux-search-submit:hover{ transform:translateY(-1px); }
.header-main .searchform .ux-search-submit i,
.header-main .searchform .ux-search-submit svg{ color:inherit !important; fill:currentColor !important; font-size:17px; }

/* Resultados del autocompletado: sobre fondo claro */
.header-main .live-search-results{ border-radius:12px; overflow:hidden; box-shadow:0 12px 30px rgba(0,0,0,.25); }

/* ---------- Acceder: botón visible, no texto suelto ---------- */
.header-main .account-item{ margin-left:14px; }
.header-main .account-item a.nav-top-link{
  color:#fff !important; opacity:1 !important;
  border:2px solid rgba(255,255,255,.75) !important; border-radius:999px !important;
  padding:8px 18px !important; font-weight:700 !important; font-size:13px !important;
  letter-spacing:.02em; line-height:1 !important;
  transition:background .18s, border-color .18s, color .18s;
}
.header-main .account-item a.nav-top-link:hover{
  background:#fff !important; border-color:#fff !important; color:var(--vf-rojo) !important;
}

/* ---------- Carrito: acción principal, blanco sólido ---------- */
.header-main .header-cart-link.button{
  background:#fff !important; color:var(--vf-rojo) !important;
  border:0 !important; border-radius:999px !important;
  padding:0 20px !important; height:44px !important; line-height:44px !important;
  font-weight:800 !important; box-shadow:0 2px 8px rgba(0,0,0,.15) !important;
  transition:transform .15s, box-shadow .15s;
}
.header-main .header-cart-link.button:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.22) !important; }
.header-main .header-cart-link .cart-icon strong{
  background:var(--vf-rojo) !important; color:#fff !important; border-color:var(--vf-rojo) !important;
}

/* ---------- Barra de categorías: más contraste y más compacta ---------- */
.header-bottom{
  background:var(--vf-nav) !important;
  border-top:3px solid var(--vf-rojo);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.06);
}
.header-bottom .nav > li > a{
  color:#fff !important; opacity:1 !important;
  font-size:12.5px !important; font-weight:600 !important;
  letter-spacing:.01em !important;
  padding:9px 11px !important;
  border-radius:6px;
  transition:color .16s, background .16s;
}
.header-bottom .nav > li > a:hover{
  color:#fff !important; background:rgba(255,255,255,.10) !important;
}
/* Subrayado rojo al pasar el mouse y en la categoría actual */
.header-bottom .nav > li > a::after{
  content:""; position:absolute; left:11px; right:11px; bottom:2px; height:2px; border-radius:2px;
  background:var(--vf-rojo); transform:scaleX(0); transform-origin:center;
  transition:transform .22s cubic-bezier(.4,0,.2,1);
}
.header-bottom .nav > li{ position:relative; }
.header-bottom .nav > li > a:hover::after,
.header-bottom .nav > li.current-menu-item > a::after,
.header-bottom .nav > li.active > a::after{ transform:scaleX(1); }
.header-bottom .nav > li.current-menu-item > a{ color:#fff !important; }

/* ---------- Barra superior de avisos ---------- */
#top-bar{ background:var(--vf-rojo-osc) !important; }
#top-bar, #top-bar a, #top-bar .html{ color:#fff !important; opacity:1 !important; font-weight:600; }
#top-bar a:hover{ opacity:.85 !important; }

/* ---------- Logo con altura pareja ---------- */
#logo img{ max-height:58px !important; width:auto !important; }

@media (max-width:849px){
  .header-main .searchform input.search-field{ height:40px !important; }
  .header-main .header-cart-link.button{ height:40px !important; line-height:40px !important; padding:0 14px !important; }
  #logo img{ max-height:44px !important; }
}