/**
 * Recipe cost summary.
 */

.pasta-site-recipe-cost {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 12px 0 28px;
	padding: 12px 16px;
	border-left: 4px solid #667f2f;
	background: #f4f7ef;
	color: #30352d;
}

.recipe-ingredient {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: baseline;
	column-gap: 12px;
}

.recipe-ingredient__amount,
.recipe-ingredient__price {
	white-space: nowrap;
}

.recipe-ingredient__price {
	min-width: 4.5em;
	color: #667f2f;
	font-size: 0.9em;
	font-weight: 600;
	text-align: right;
}

.recipe-ingredients__total {
	align-items: baseline;
	border-top: 1px solid #d9e2cf;
	display: flex;
	gap: 16px;
	justify-content: flex-end;
	margin-top: 10px;
	padding: 10px 12px;
}

.recipe-ingredients__total-label {
	color: #596154;
	font-size: 0.9rem;
	font-weight: 600;
}

.recipe-ingredients__total-price {
	color: #62812f;
	font-size: 1rem;
	font-weight: 700;
	min-width: 4.5em;
	text-align: right;
	white-space: nowrap;
}

.post ol.recipe-step-list {
	margin-bottom: 0.55rem;
	margin-top: 0;
}

.post ol.recipe-step-list + ol.recipe-step-list {
	margin-top: 0;
}

.recipe-photo-slot {
	margin: 16px 0 24px;
}

.recipe-photo-slot__image {
	display: block;
	height: auto;
	max-width: 100%;
}

.pasta-site-recipe-cost__label {
	font-size: 0.95rem;
	font-weight: 600;
}

.pasta-site-recipe-cost__price {
	color: #526727;
	font-size: 1.2rem;
	white-space: nowrap;
}

@media (max-width: 599px) {
	.pasta-site-recipe-cost {
		margin: 10px 0 22px;
		padding: 11px 13px;
	}

	.recipe-ingredient {
		column-gap: 8px;
	}

	.recipe-ingredient__price {
		min-width: 4em;
	}

	.recipe-ingredients__total {
		gap: 10px;
		padding: 9px 10px;
	}
}