/* ==========================================================================
   Colihue Aventura – Encabezado
   Se reordena el header que ya existe (Elementor). Los bloques se identifican
   por lo que contienen (:has), no por su ID, para que siga funcionando si
   alguien mueve algo en el editor.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Celular: dos filas en vez de cinco bloques apilados
   Fila 1: logo + menú.   Fila 2: buscador + carrito.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	header.elementor-location-header > .e-con {
		position: relative;   /* el desplegable se ancla acá, no a la columna */
		flex-direction: row !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 10px !important;
		padding: 10px 12px !important;
	}

	/* Elementor fija el ancho de cada columna con su propia variable. */
	header.elementor-location-header .e-con.e-child {
		--width: auto;
		width: auto !important;
		max-width: none !important;
		flex-basis: auto !important;
		flex-direction: row !important;
		align-items: center !important;
		gap: 8px !important;
		padding: 0 !important;
		margin: 0 !important;
		position: static !important;
	}

	/* Fila 1: menú a la izquierda · LOGO al centro · carrito a la derecha.
	   Fila 2: buscador a todo el ancho.
	   La columna que agrupa carrito y buscador pasa a "contents" para que sus
	   dos widgets se acomoden por separado. */
	header.elementor-location-header .e-con:has(> .elementor-widget-nav-menu) {
		flex: 0 0 52px !important;
		width: 52px !important;
		max-width: 52px !important;
		justify-content: flex-start !important;
		order: 1;
	}
	header.elementor-location-header .e-con:has(> .elementor-widget-theme-site-logo) {
		flex: 1 1 auto !important;
		min-width: 0;
		justify-content: center !important;
		order: 2;
	}
	header.elementor-location-header .e-con:has(> .elementor-widget-woocommerce-menu-cart) {
		display: contents !important;
	}
	header.elementor-location-header .elementor-widget-woocommerce-menu-cart {
		flex: 0 0 52px !important;
		width: 52px !important;
		display: flex !important;
		justify-content: flex-end;
		order: 3;
	}
	header.elementor-location-header .elementor-widget-shortcode {
		flex: 1 1 100% !important;
		width: 100% !important;
		min-width: 0;
		order: 4;
	}

	/* Logo centrado y a tamaño cómodo. */
	header.elementor-location-header .elementor-widget-theme-site-logo {
		width: auto !important;
		max-width: 190px;
		margin: 0 auto;
	}
	header.elementor-location-header .elementor-widget-theme-site-logo img {
		max-width: 100%;
		max-height: 48px;
		width: auto !important;
		height: auto;
		display: block;
		margin: 0 auto;
	}

	/* "MENU" escrito sobra: al lado está el ícono. */
	header.elementor-location-header .elementor-widget-heading { display: none !important; }

	/* El widget del menú trae position:relative y el desplegable se anclaba a
	   él (42px de ancho), quedando fuera de pantalla. */
	header.elementor-location-header .elementor-widget-nav-menu {
		width: auto !important;
		max-width: 52px;
		position: static !important;
	}
	header.elementor-location-header .elementor-menu-toggle {
		width: 42px;
		height: 42px;
		border-radius: 12px;
		background: rgba(0, 0, 0, .05);
		display: flex !important;
		align-items: center;
		justify-content: center;
		transition: background-color .18s ease;
	}
	header.elementor-location-header .elementor-menu-toggle:hover { background: rgba(255, 109, 0, .14); }

	/* Desplegable: panel flotante anclado al header, dentro de la pantalla. */
	header.elementor-location-header .elementor-nav-menu--dropdown {
		position: absolute !important;
		top: calc(100% + 6px);
		right: 10px;
		left: auto;
		width: min(320px, calc(100vw - 32px)) !important;
		max-width: none;
		max-height: 70vh;
		overflow-y: auto;
		z-index: 999;
		border-radius: 14px;
		background: #ffffff;
		box-shadow: 0 14px 36px rgba(0, 0, 0, .18);
	}

	header.elementor-location-header .elementor-menu-cart__toggle .elementor-button {
		display: inline-flex !important;
		align-items: center;
		gap: 5px;
		padding: 0 !important;
		font-size: 0;
	}
	header.elementor-location-header .elementor-menu-cart__toggle .elementor-button-icon { font-size: 22px; }
}

/* --------------------------------------------------------------------------
   Escritorio: una sola línea, todo alineado y con menos aire
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
	header.elementor-location-header > .e-con {
		align-items: center !important;
		padding-top: 10px !important;
		padding-bottom: 10px !important;
	}
	/* Cada columna centra su contenido en vertical: antes el logo quedaba
	   abajo, "MENU" arriba y el buscador a otra altura. */
	header.elementor-location-header .e-con.e-child {
		justify-content: center !important;
		align-items: center !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
	/* Carrito y buscador, en la misma línea a la derecha. */
	header.elementor-location-header .e-con:has(> .elementor-widget-woocommerce-menu-cart) {
		--width: auto;
		flex: 1 1 auto !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: flex-end !important;
		gap: 14px !important;
	}
	header.elementor-location-header .e-con:has(> .elementor-widget-woocommerce-menu-cart) .elementor-widget-shortcode {
		flex: 1 1 auto;
		min-width: 0;
		max-width: 380px;
	}
	header.elementor-location-header .e-con:has(> .elementor-widget-woocommerce-menu-cart) .elementor-widget-woocommerce-menu-cart {
		flex: 0 0 auto;
		width: auto !important;
	}
	/* "MENU" y su ícono, juntos y centrados. */
	header.elementor-location-header .e-con:has(> .elementor-widget-nav-menu) { gap: 2px !important; }
	header.elementor-location-header .elementor-widget-heading { margin: 0 !important; }
	header.elementor-location-header .elementor-widget-heading .elementor-heading-title { line-height: 1.1; }

	header.elementor-location-header .elementor-widget-theme-site-logo img { max-height: 66px; width: auto !important; height: auto; }
}