/**
 * lv-product-formula — la fila «Cantidad justa» de la ficha de producto.
 *
 * Los selectores que tienen que ganarle a algo llevan `.elementor-element`
 * por delante: así no dependen del nombre del widget y superan al Theme Style
 * del kit (`.elementor-kit-N a`, especificidad 0,2,1) sin recurrir a
 * !important.
 */

.lv-formula {
	--lv-fm-gap: 18px;
	--lv-fm-img-height: 88px;

	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	gap: var(--lv-fm-gap);
}

.elementor-element .lv-formula .lv-formula__item {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	min-width: 0;
	text-align: center;
	text-decoration: none;
}

.elementor-element .lv-formula a.lv-formula__item:hover .lv-formula__caption {
	text-decoration: underline;
}

/* El hueco de la imagen se reserva siempre, haya foto o no: solo 3 de los 17
   ingredientes del catálogo tienen imagen, y sin el hueco los pies y los
   operadores quedan a alturas distintas. */
.lv-formula__media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--lv-fm-img-height);
}

/* `.elementor img { height: auto }` gana a un selector de una sola clase:
   por eso el alto va con dos. */
.elementor-element .lv-formula .lv-formula__image {
	display: block;
	width: auto;
	max-width: 100%;
	height: var(--lv-fm-img-height);
	object-fit: contain;
}

.lv-formula__caption {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.lv-formula__operator {
	flex: 0 0 auto;
	align-self: flex-start;
	font-size: 42px;
	font-weight: 500;
	line-height: 1;
	/* Se alinea con la banda de imágenes, no con el bloque entero. */
	margin-block-start: calc(var(--lv-fm-img-height) / 2 - 0.5em);
}

@media (max-width: 767px) {
	.lv-formula {
		flex-direction: column;
		align-items: center;
	}

	.lv-formula__operator {
		align-self: center;
		margin-block-start: 0;
	}
}