.header-z {
  background: #111;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between; /* Para separar logo y el resto del contenido */
  
  gap: 24px;
  padding: 10px 24px;
  position: relative; /* Para el menú móvil absoluto/fijo */
  z-index: 999; /* Por encima del overlay del popup, pero debajo del popup mismo y menú móvil */
}

.header-z .logo-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* margin-right: auto; Ya no es necesario con justify-content: space-between en .header-z */
}

.header-z .logo-block img {
  height: 38px;
  width: auto;
  display: block;
}

.header-z .logo-info {
  font-size: 10px;
  line-height: 1.2;
  color: #aaa;
  margin-top: 4px;
}

/* Contenedor para buscador y nav-links */
.header-menu-content {
  display: flex;
  align-items: center;
  flex-grow: 1; /* Ocupa el espacio restante */
  gap: 24px; /* Espacio entre search-box y nav-links */
}


.header-z .search-box {
  flex-grow: 1;
  display: flex;
  gap: 8px;
}

.header-z .search-box input[type="text"] {
  flex-grow: 1;
  padding: 8px 10px;
  border: 1px solid #555;
  border-radius: 4px;
  background-color: #333;
  color: #fff;
}

.header-z .search-box input[type="text"]::placeholder { color: #aaa; }

.header-z .search-box select,
.header-z .search-box button {
  padding: 8px 12px;
  border: 1px solid #555;
  border-radius: 4px;
  background: #444;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s;
}

.header-z .search-box button:hover { background-color: #555; }

.header-z .nav-links {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header-z .nav-links a {
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  transition: opacity .2s;
}

.header-z .nav-links a:hover { opacity: .8; }
.header-z .nav-links .cart { font-size: 24px; line-height: 1; }

/* Icono de Hamburguesa (oculto por defecto en PC) */
.hamburger-icon {
  display: none;
  font-size: 28px; /* Tamaño del icono de hamburguesa */
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
}


/* --- Vista Tablet (ej: 769px - 1023px) --- */
@media (max-width: 1023px) {
  .header-z .search-box {
    display: none; /* Oculta la barra de búsqueda principal */
  }
  .header-z .nav-links {
    display: none; /* Oculta los enlaces de navegación principales */
  }
  .hamburger-icon {
    display: block; /* Muestra el icono de hamburguesa */
    margin-left: auto; /* Empuja el icono a la derecha si hay otros elementos */
  }

  /* Ajustes para el logo en tablet si es necesario */
  .header-z .logo-block img {
    height: 35px;
  }
  .header-z .logo-info {
    font-size: 9px;
  }

}

/* --- Vista Móvil (ej: hasta 768px) --- */
@media (max-width: 768px) {
  .header-z {
    padding: 10px 15px; /* Menos padding en móviles */
    gap: 15px;
  }

  .header-z .logo-block img {
    height: 24px; /* Logo más pequeño en móviles */
  }
  .header-z .logo-info {
    display: none; /* Opcional: ocultar info del logo si es muy pequeño */
  }

  .header-z .search-box {
    display: none; /* Asegura que esté oculto */
  }
  .header-z .nav-links {
    display: none; /* Asegura que esté oculto */
  }
  .hamburger-icon {
    display: block;
    margin-left: auto; /* Asegura que esté a la derecha */
  }

}



#open-centralized-menu-btn {
  color: white;              /* texto e ícono en blanco */
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;      /* permite alinear texto + icono */
  align-items: center;       /* centra verticalmente */
  gap: 6px;                  /* ✅ espacio entre ícono y texto */
}

#open-centralized-menu-btn i {
  color: white;              /* ícono blanco */
  font-size: 1.1em;          /* ligeramente más grande */
}









/* Relativo al contenedor de la barra de búsqueda para posicionar los resultados */
.search-box {
  position: relative;
}

.search-results-dropdown {
  display: none;
  /* Oculto por defecto */
  position: absolute;
  top: 100%;
  /* Justo debajo de la barra de búsqueda */
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 400px;
  overflow-y: auto;
}

.search-result-item {
  padding: 12px 15px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-item:hover {
  background-color: #f5f5f5;
}

.search-result-item .result-text {
  font-size: 15px;
  color: #333;
}

.search-result-item .result-type {
  font-size: 12px;
  color: #888;
  background-color: #eee;
  padding: 2px 6px;
  border-radius: 4px;
}