/**
 * Flecha en el botón "Añadir al carrito" de las tarjetas (widget de Elementor).
 *
 * Solo en productos simples: "Seleccionar opciones" ya ocupa todo el ancho de
 * la fila junto a "Ver producto" y con la flecha salta a dos líneas.
 *
 * Va en ::before porque WooCommerce ya usa ::after para el giro de carga y el
 * check de "añadido". La flecha es una máscara pintada con currentColor, así
 * que toma el color del texto también en hover. El selector lleva a.button
 * para ganarle a woocommerce.css (.woocommerce ... a.button).
 */
.elementor-add-to-cart a.button.add_to_cart_button.product_type_simple {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.elementor-add-to-cart a.button.add_to_cart_button.product_type_simple::before {
	content: "";
	order: 1;
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h11M9 3.5 13.5 8 9 12.5'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h11M9 3.5 13.5 8 9 12.5'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform 0.2s ease;
}

.elementor-add-to-cart a.button.add_to_cart_button.product_type_simple:hover::before {
	transform: translateX(3px);
}

/* Mientras carga o ya añadido, WooCommerce pinta su propio icono. */
.elementor-add-to-cart a.button.add_to_cart_button.product_type_simple.loading::before,
.elementor-add-to-cart a.button.add_to_cart_button.product_type_simple.added::before {
	display: none;
}