/* ===== Header: cuenta y buscador ===== */

/* "Mi cuenta" (logueado) se muestra como ícono de persona; sin sesión se
   muestra el texto LOGIN (las mayúsculas ya las aplica .ql_login-btn). */
.ql_login-btn--account {
	line-height: 1;
}

.ql_login-btn--account .rburgos-icon {
	font-size: 20px;
	vertical-align: middle;
}

/* El contenedor del enlace de cuenta con solo padding lateral de 5px. */
.login_btn_wrap {
	padding: 0;
}

/* Enlace de cuenta: padding uniforme de 5px. */
.ql_login-btn {
    padding: 5px 0px 5px 5px;
    border: none;
    margin-right: -8px;
}

/* Botón del carrito: padding ajustado. */
.ql_cart-btn {
	padding: 10px 40px 10px 10px;
}

/* Buscador: lupa sola por defecto; al abrirse el input se expande a la
   izquierda y la lupa queda como botón de envío. */
.ql_search_wrap {
	float: right;
	display: inline-block;
	margin: 5px 0;
}

.ql_search_form {
	display: flex;
	align-items: center;
}

.ql_search_input {
	width: 0;
	padding: 0;
	margin: 0;
	height: 30px;
	background-color: #fff;
	border: 1px solid transparent;
	border-radius: 2px;
	font-family: "Raleway", Helvetica, Arial, sans-serif;
	font-size: var(--font-size-sm);
	color: #4d4d4d;
	opacity: 0;
	-webkit-transition: width 200ms ease, opacity 200ms ease, padding 200ms ease, border-color 200ms ease;
	-o-transition: width 200ms ease, opacity 200ms ease, padding 200ms ease, border-color 200ms ease;
	transition: width 200ms ease, opacity 200ms ease, padding 200ms ease, border-color 200ms ease;
}

.ql_search_form.is-open .ql_search_input {
	width: 150px;
	padding: 0 35px 0 10px;
	opacity: 1;
	border-color: #b3b3b3;
	margin-right: -38px;
}

.ql_search_submit {
	background: transparent;
	border: none;
	padding: 5px 10px;
	margin: 0;
	cursor: pointer;
	color: #777777;
	font-size: 20px;
	line-height: 1;
	outline: 0 !important;
}

.ql_cart-btn i {
    padding-top: 5px;
}

.ql_search_submit:hover,
.ql_search_submit:focus {
	color: var(--main-brand-color);
}

/* Header en un único contenedor flex: la navegación (logo + menú) ocupa el
   espacio restante y carrito/cuenta/buscador quedan a la derecha, en la misma
   línea, sin caer abajo en pantallas menores a 1346px. */
#header .row {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
}

#header .ql_logo_nav {
	flex: 1 1 auto;
	width: auto;
	float: none;
	min-width: 0;
	padding-left: 0;
	padding-right: 0;
}

#header .login_cart_wrap {
	flex: 0 0 auto;
	width: auto;
	float: none;
	margin: 0;
	padding-bottom: 18px;
	padding-right: 0px;
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
}

/* El menú principal (#ql-navigation) sin padding lateral. */
#ql-navigation {
	padding-left: 0;
	padding-right: 0;
}

/* El menú principal: padding lateral y color de marca en los enlaces. */
#jqueryslidemenu ul.nav > li > a {
	padding-left: 9px;
	padding-right: 9px;
	color: var(--main-brand-color);
}

#jqueryslidemenu ul.nav > li > a:hover {
	background-color: var(--main-brand-color);
	color: #ffffff;
}

.ql_cart-btn i.ql-chevron-down {
    padding-top: 0;
}

/* Reduce el alto del header ~20px arriba y abajo (escritorio/tablet). */
@media (min-width: 768px) {
	.logo_container {
		margin-top: 10px;
	}

	#jqueryslidemenu {
		margin-top: 20px;
		margin-bottom: 15px;
	}
}

/* En móvil el grupo de la derecha cambia su padding vertical. */
@media (max-width: 767px) {
	#header .login_cart_wrap {
		padding-bottom: 0;
		padding-top: 12px;
	}
}