/**
 * Icono de cuenta en el encabezado, a la derecha del carrito.
 */

.elementor-widget-woocommerce-menu-cart {
	display: flex;
	align-items: center;
	gap: 1.15rem;
}

/*
 * El selector lleva el widget adelante a propósito. El kit de Elementor pinta
 * todos los enlaces con `.elementor-kit-NNN a`, que suma (0,2,0); una sola
 * clase pierde y el icono queda negro sobre el encabezado oscuro.
 */
.elementor-widget-woocommerce-menu-cart a.kosmos-cuenta-icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	text-decoration: none;

	/*
	 * Blanco explícito, igual que el icono del carrito. Si alguna vez el
	 * encabezado pasa a fondo claro, este valor y el del carrito se cambian
	 * juntos.
	 */
	color: #fff;
	transition: opacity .15s ease;
}

.elementor-widget-woocommerce-menu-cart a.kosmos-cuenta-icono:hover,
.elementor-widget-woocommerce-menu-cart a.kosmos-cuenta-icono:focus {
	opacity: .7;
	color: #fff;
}

.elementor-widget-woocommerce-menu-cart a.kosmos-cuenta-icono:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: 3px;
	opacity: 1;
}

/* El tamaño del icono de fuente se controla por font-size, no por ancho. */
.kosmos-cuenta-icono .jki {
	font-size: 26px;
	line-height: 1;
	display: block;
}

/* Respaldo: si Jeg Kit no está disponible se dibuja un SVG en su lugar. */
.kosmos-cuenta-icono svg {
	flex: none;
	width: 26px;
	height: 26px;
	display: block;
}

@media (max-width: 48em) {
	.elementor-widget-woocommerce-menu-cart {
		gap: .85rem;
	}

	.kosmos-cuenta-icono .jki {
		font-size: 23px;
	}

	.kosmos-cuenta-icono svg {
		width: 23px;
		height: 23px;
	}
}