/**
 * Tienda Ideal — Ajustes de header (todo el sitio)
 *
 * El header está construido con Elementor sobre el theme Rey. Dos notas:
 *
 * 1. Los selectores llevan prefijo `html body` porque Elementor inyecta sus
 *    reglas con IDs de elemento y hay que ganarle en especificidad.
 * 2. Se evita apuntar a los hashes de Elementor (.elementor-element-e388e84):
 *    si el cliente reconstruye el header esos hashes cambian y el CSS deja de
 *    aplicar en silencio. En su lugar se usa :has() para alcanzar al widget
 *    contenedor a partir del markup estable del theme Rey.
 *
 * Solo toca el header. Sin reglas globales.
 */

/* ---------------------------------------------------------------
   1. Menú principal — una sola línea
   "MUEBLES DE TV Y GUARDADO" y "COLCHONES Y SOMMIERS" se parten en dos
   líneas: eso es lo que lleva el header a 250px. El contenido necesita
   ~1130px y el widget está encajonado en 1123px (su contenedor padre
   tiene 1296px libres), así que además de nowrap hay que dejarlo crecer.
   --------------------------------------------------------------- */
html body header.rey-siteHeader .rey-mainMenu--desktop {
	gap: 22px !important;
	flex-wrap: nowrap !important;
}

html body header.rey-siteHeader .rey-mainMenu--desktop > li > a {
	white-space: nowrap !important;
	font-weight: 700 !important;
	letter-spacing: 0.05em !important;
	line-height: 1.2 !important;
}

/* El widget de Elementor que envuelve el menú: que ocupe el ancho disponible */
html body header.rey-siteHeader .elementor-element:has(> .elementor-widget-container > .rey-mainNavigation--desktop) {
	max-width: 100% !important;
	width: auto !important;
	flex: 1 1 auto !important;
}

/* Los submenús son verticales: ahí el wrap es correcto y no afecta el alto */
html body header.rey-siteHeader .rey-mainMenu--desktop .sub-menu a {
	white-space: normal !important;
	letter-spacing: normal !important;
	font-weight: 500 !important;
}

/* ---------------------------------------------------------------
   2. Buscador — más ancho, como en el diseño aprobado.
   El input está limitado por su widget (514px) dentro de un contenedor
   de 967px, así que hay que soltar el widget además del input.
   Solo desktop: en mobile el buscador ya ocupa el ancho disponible y
   forzarlo le quitaba 10px.
   --------------------------------------------------------------- */
@media (min-width: 1025px) {
	html body header.rey-siteHeader .elementor-element:has(> .elementor-widget-container > .rey-headerSearch--inline) {
		max-width: 640px !important;
		width: 100% !important;
		flex: 1 1 auto !important;
	}

	html body header.rey-siteHeader .rey-inlineSearch-wrapper,
	html body header.rey-siteHeader .rey-inlineSearch-form {
		max-width: 640px !important;
		width: 100% !important;
	}
}

/* ---------------------------------------------------------------
   3. Bloque "¿Compra Mayorista? Contactanos" — al ensanchar el
   buscador queda más ajustado y parte en dos líneas.
   --------------------------------------------------------------- */
@media (min-width: 1025px) {
	html body header.rey-siteHeader .elementor-widget-text-editor p {
		white-space: nowrap !important;
	}
}

/* ---------------------------------------------------------------
   4. Logo — el PNG de origen es cuadrado (1079x1079) con la marca al
   centro, así que a 121px de alto se ve chico y estira el header.
   --------------------------------------------------------------- */
html body header.rey-siteHeader .rey-siteLogo img.custom-logo {
	height: 84px !important;
	width: auto !important;
	max-height: 84px !important;
}

/* ---------------------------------------------------------------
   5. Pantallas medianas — a 13px los 8 items no entran ni con el
   widget suelto. Se baja un punto la tipografía y el gap.
   --------------------------------------------------------------- */
@media (max-width: 1366px) {
	html body header.rey-siteHeader .rey-mainMenu--desktop {
		gap: 16px !important;
	}
	html body header.rey-siteHeader .rey-mainMenu--desktop > li > a {
		font-size: 12px !important;
		letter-spacing: 0.03em !important;
	}
}

/* ---------------------------------------------------------------
   6. Mobile — el menú es un drawer vertical: ahí el wrap es correcto,
   así que no se aplica nowrap. Solo se ajusta el logo.
   --------------------------------------------------------------- */
@media (max-width: 1024px) {
	html body header.rey-siteHeader .rey-siteLogo img.custom-logo {
		height: 56px !important;
		max-height: 56px !important;
	}
}