/*
 * Cabecera en movil: que el icono del carrito no se mueva al agregar,
 * y que el logo no encogue al abrirle sitio.
 *
 * No se toca la disposicion de la cabecera. El tema usa flotados y
 * posicionamiento interno dentro del widget de menu, y forzar a flex su
 * contenedor dejaba el boton hamburguesa con tamano cero, es decir, sin zona
 * pulsable. Con la columna de la derecha repartida al 55% el carrito y el menu ya
 * caben en la misma fila por su cuenta.
 */

@media (max-width: 1024px) {

	/*
	 * Que el icono del carrito no salte al cambiar el contador.
	 *
	 * El icono y el contador "( 0 )" van en un solo bloque anclado a la derecha.
	 * Si el contador cambia de ancho, el bloque cambia de ancho y el icono se
	 * desplaza aunque no se haya tocado nada. Fijar un ancho minimo al contador
	 * mantiene el icono en su sitio y aun deja que crezca si hace falta.
	 */
	.elementor-2268 .wdt-shop-menu-cart-number {
		display: inline-block;
		min-width: 2.6em;
		text-align: left;
	}
}

/*
 * El logo, solo en movil (el breakpoint exacto que genera Elementor para este
 * widget).
 */
@media (max-width: 480px) {

	/*
	 * Que el logo no encogue al abrirle sitio al carrito.
	 *
	 * Elementor controla el ancho del logo con un porcentaje de la columna, y lo
	 * fija dos veces: en width y en max-width. Estrechar la columna del 70% al 45%
	 * para que cupieran el carrito y el menu encogio el logo, de 88px a 56px.
	 *
	 * Los numeros: el logo ocupaba 43.323% de una columna del 70%, o sea un
	 * 30.33% del ancho de la pantalla. Con la columna ahora al 45%, ese mismo
	 * 30.33% de pantalla son 30.33 / 45 = 67.4% de columna. Con ese valor el logo
	 * se ve igual que antes a cualquier ancho de movil, y deja de depender de lo
	 * ancha que sea la columna.
	 *
	 * Hay que pisar width y max-width: sobrescribir solo uno no basta, porque el
	 * otro sigue mandando. Y el ancho se escribe directo, sin la variable
	 * --container-widget-width que usa Elementor: esa variable esta definida en el
	 * elemento, asi que un "var(--container-widget-width, 67.4%)" devolveria el
	 * 43.323% original y el cambio no tendria efecto.
	 *
	 * El selector lleva un "body" delante a proposito: sin el, Elementor genera
	 * la misma regla con la misma especificidad, y entonces gana la que se cargue
	 * ultimo. Anadir el elemento sube la especificidad y deja el resultado seguro
	 * sin tener que recurrir a "important".
	 */
	body .elementor-2268 .elementor-element.elementor-element-e6c33e3 {
		width: 67.4%;
		max-width: 67.4%;
	}
}