/*
 * Shoppex — sitio unificado: lo que el teléfono necesita y no es de una página.
 *
 * Lo cargan los mu-plugins de shoppexcorp.com (shoppex-sitio-unificado.php)
 * desde wp-content/mu-plugins/shoppex-sitio/. Los tamaños de letra de cada
 * página NO viven aquí: están en los ajustes «para teléfono» de Elementor,
 * donde Eduardo los ve y los cambia (tools/wordpress/unificacion/9-movil.php).
 * Aquí va lo compartido: el encabezado, el pie, el aviso de cookies y el sello
 * del BBB. Medido el 1-oct-2026 a 375 px de ancho.
 *
 * Los selectores empiezan con «body .ekit-template-content-…» a propósito:
 * Elementor escribe los suyos con tres clases, y uno más corto pierde.
 * Los números (3597de4, b4b2e5e…) son los elementos de Elementor dentro de las
 * plantillas del encabezado; no cambian aunque la plantilla se reimporte.
 */

@media (max-width: 767px) {
	/*
	 * El encabezado en inglés medía 108 px: el logo ocupaba 130 px de ancho y
	 * el botón del catálogo iba en dos renglones. Queda en una fila de 84 px:
	 * el logo a 44 px, el botón en un renglón y el menú a la derecha.
	 */
	body .ekit-template-content-header .elementor-element.elementor-element-3597de4 {
		--width: 64px;
		width: 64px;
		flex: 0 0 64px;
	}

	body .ekit-template-content-header .elementor-element.elementor-element-3b137a2 img {
		width: 44px;
		height: auto;
	}

	body .ekit-template-content-header .elementor-element.elementor-element-b5b5ac4 {
		--width: auto;
		width: auto;
		flex: 1 1 auto;
	}

	body .ekit-template-content-header .elementor-element.elementor-element-b53a1c7 {
		flex: 0 0 auto;
	}

	body .ekit-template-content-header .elementor-element.elementor-element-dcc05de .elementor-button {
		padding: 10px 14px;
		font-size: 14px;
		white-space: nowrap;
	}

	/* El pie: los enlaces medían 23 px de alto, y con el dedo se tocaba el de al lado. */
	body .ekit-template-content-footer .elementor-icon-list-item > a {
		display: inline-flex;
		align-items: center;
		min-height: 40px;
	}

	/*
	 * Títulos que son enlaces («View full catalog >»): medían 23 px de alto
	 * para el dedo.
	 */
	body .elementor-widget-heading .elementor-heading-title > a {
		display: inline-block;
		padding-block: 8px;
	}

	/*
	 * Fast Partner: el título del formulario vive dentro del HTML del
	 * formulario de Kit, no en un título de Elementor, y medía 40,5 px.
	 */
	body .elementor-element.elementor-element-f509d11 h2,
	body .elementor-element.elementor-element-8d408c3 h2 {
		font-size: 28px;
		line-height: 1.2;
	}

	/* El aviso de cookies ocupaba un sexto de la pantalla, encima del contenido. */
	body #cookie-notice .cookie-notice-container {
		padding: 10px 44px 12px 14px;
		text-align: left;
	}

	body #cookie-notice #cn-notice-text {
		display: block;
		margin: 0 0 8px;
		font-size: 13px;
		line-height: 1.4;
	}

	body #cookie-notice #cn-notice-buttons {
		display: flex;
		gap: 8px;
		margin: 0;
	}

	/* El plugin escribe la suya con «:not(.cn-button-custom)»: sin eso, pierde. */
	body #cookie-notice .cn-button:not(.cn-button-custom) {
		margin: 0;
		padding: 11px 20px;
		font-size: 14px;
		line-height: 1;
	}

	body #cookie-notice #cn-close-notice {
		top: 16px;
		right: 12px;
	}

	/*
	 * El sello del BBB flotaba abajo a la izquierda, encima del contenido y del
	 * aviso de cookies. En el teléfono no se muestra; en tableta y computadora
	 * sigue igual. No se puede bajar al final de la página: el guion del BBB lo
	 * inserta fuera del <body>, directo en <html>, y sin posición fija queda a
	 * mitad de la pantalla (probado el 1-oct-2026). Es un id, no una clase.
	 */
	html #bbb-badge {
		display: none !important;
	}

	/*
	 * Las tablas de las entradas del blog (de tres y cuatro columnas) no caben
	 * en el teléfono y empujaban toda la página hacia el lado: en «¿Cuánto
	 * dinero necesito para empezar a vender perfumes?» y en «Importar perfumes
	 * a Panamá», también en el sitio real. Ahora se desplazan dentro de su
	 * propio recuadro y el resto de la página queda quieto.
	 */
	.elementor-widget-text-editor table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
	}
}

@media (max-width: 1024px) {
	/*
	 * El menú que abre el botón de las tres rayas era un panel gris con cuatro
	 * enlaces negros, la X en un recuadro y la flecha de las marcas en un
	 * círculo, y quedaba debajo del aviso de cookies (Adrian, 2-oct-2026).
	 * Queda blanco, con el logo arriba, separadores, el cambio de idioma y el
	 * botón del catálogo (los agrega unificacion/12-menu-movil.php), y por
	 * encima del aviso de cookies.
	 */
	/* El menú del español fija su propio fondo (negro) con una regla de cuatro clases: por eso el !important. */
	body .ekit-template-content-header .elementskit-menu-container.elementskit-menu-offcanvas-elements {
		display: flex;
		flex-direction: column;
		width: min(86vw, 360px) !important;
		max-width: 360px !important;
		padding: 0 0 24px;
		background: #fff !important;
		box-shadow: 0 0 32px rgba(15, 33, 103, 0.25);
		overflow-y: auto;
		z-index: 100002;
	}

	body .ekit-template-content-header .elementskit-menu-overlay.active {
		background-color: rgba(15, 33, 103, 0.45);
		z-index: 100001;
	}

	body .ekit-template-content-header .elementskit-menu-offcanvas-elements .elementskit-nav-identity-panel {
		order: -1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: static;
		padding: 12px 10px 12px 20px !important;
		border-bottom: 1px solid #e8ecf4;
	}

	body .ekit-template-content-header .elementskit-nav-identity-panel .elementskit-nav-logo img {
		width: auto;
		max-height: 36px;
	}

	body .ekit-template-content-header .elementskit-menu-offcanvas-elements .elementskit-menu-close {
		position: static;
		width: 44px;
		height: 44px;
		margin-left: auto;
		padding: 0;
		border: 0 !important;
		background: transparent;
		color: #0f2167;
		font-size: 22px;
		line-height: 44px;
	}

	body .ekit-template-content-header .elementskit-menu-offcanvas-elements .elementskit-navbar-nav > li > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 15px 20px !important;
		border-bottom: 1px solid #eef1f6;
		color: #0f2167 !important;
		font-size: 17px !important;
		font-weight: 500;
		line-height: 1.3;
	}

	body .ekit-template-content-header .elementskit-menu-offcanvas-elements .elementskit-submenu-indicator {
		width: 44px;
		height: 44px;
		margin: -12px -12px -12px 0;
		border: 0 !important;
		border-radius: 0;
		color: #0f2167;
		font-size: 13px;
		line-height: 44px;
		text-align: center;
	}

	body .ekit-template-content-header .elementskit-menu-offcanvas-elements .elementskit-submenu-panel {
		padding: 4px 0;
		background-color: #f7f9fc;
	}

	body .ekit-template-content-header .elementskit-menu-offcanvas-elements .elementskit-submenu-panel > li > a {
		padding: 11px 20px 11px 34px !important;
		color: #3a4060 !important;
		font-size: 15px !important;
	}

	/* El cambio de idioma: en azul, como un enlace. */
	body .ekit-template-content-header .elementskit-menu-offcanvas-elements .elementskit-navbar-nav > li.lang-item > a {
		color: #008dda !important;
		font-weight: 600;
	}

	/*
	 * Con el menú abierto no se montan encima el aviso de cookies ni el chat:
	 * el panel vive en la capa del encabezado y no puede pasarles por arriba.
	 */
	body:has(.ekit-template-content-header .elementskit-menu-overlay.active) #cookie-notice,
	body:has(.ekit-template-content-header .elementskit-menu-overlay.active) .saa-widget {
		display: none !important;
	}

	/* El catálogo: un botón, no un renglón más. */
	body .ekit-template-content-header .elementskit-menu-offcanvas-elements .elementskit-navbar-nav > li.shx-menu-catalogo > a {
		justify-content: center;
		margin: 20px 20px 0;
		border: 0;
		border-radius: 6px;
		background-color: #0f2167;
		color: #fff !important;
		font-weight: 600;
	}

	/*
	 * El botón del menú del encabezado en español queda fijo arriba a la
	 * derecha mientras se baja por la página. Con fondo blanco se ve también
	 * encima de las fotos oscuras.
	 */
	body .ekit-template-content-header .elementor-element.elementor-element-b4b2e5e .elementskit-menu-hamburger {
		background-color: #fff;
		border-color: rgba(15, 33, 103, 0.25);
		border-radius: 6px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	}
}

@media (min-width: 1025px) {
	/* El cambio de idioma y el catálogo del menú son solo para el teléfono: en la computadora el encabezado ya tiene su botón y sus banderas. */
	body .ekit-template-content-header .elementskit-navbar-nav > li.shx-solo-movil,
	body .ekit-template-content-header .elementskit-navbar-nav > li.lang-item {
		display: none !important;
	}
}