/* --------------------------------------------------------------------------
   Nutrition Info Page
   -------------------------------------------------------------------------- */
.NutritionContent {
	padding:				80px 40px;
}

.NutritionContentInner {
	max-width:				1200px;
	margin:					0 auto;

	font-family:			var(--FontBody);
	font-size:				20px;
	font-weight:			300;

	color:					var(--ColorDarkGray);
}

.NutritionTitle {
	font-size:				clamp(32px, 4vw, 48px);
	font-family:			var(--FontHeader);
	font-weight:			900;
	text-align:				center;
	margin:					0 0 20px 0;
}

.NutritionIntro {
	text-align:				center;
	line-height:			1.3;
	max-width:				800px;
	margin:					0 auto 60px auto;
}

/* --------------------------------------------------------------------------
   Nutrition Cards Grid
   -------------------------------------------------------------------------- */
.NutritionCards {
	display:				grid;
	grid-template-columns:	repeat(4, 1fr);
	gap:					30px;
}

.NutritionCard {
}

.NutritionCardHeader {
	font-family:			var(--FontHeader);
	font-size:				20px;
	font-weight:			900;

	margin-bottom:			8px;
}

.NutritionCardDivider {
	height:					4px;
	background:				var(--ColorPurple);
	border:					none;
	margin:					0 0 15px 0;
}

.NutritionCardImageLink {
	display:				block;
	cursor:					pointer;
}

.NutritionCardImage {
	width:					100%;
	height:					auto;
	border:					1px solid var(--ColorGray);
	transition:				transform var(--TransitionBase), box-shadow var(--TransitionBase);
	box-shadow:				none;
	margin:					0;
}

.NutritionCardImage:hover {
	transform:				scale(1.02);
	box-shadow:				0 5px 15px rgba(0, 0, 0, 0.15);
}

.NutritionCardIngredients {
	margin-top:				15px;
}

.NutritionCardIngredientsLabel {
	font-weight:			700;
	font-size:				18px;
	display:				block;
	margin-bottom:			5px;
}

.NutritionCardIngredientsList {
	font-size:				16px;
	line-height:			1;
	color:					var(--ColorDarkGray);
}

/* --------------------------------------------------------------------------
   Nutrition Dialog
   -------------------------------------------------------------------------- */
.NutritionDialog {
	max-width:				500px;
	text-align:				center;
}

.NutritionDialogTitle {
	font-family:			var(--FontHeader);
	font-size:				clamp(24px, 4vw, 28px);
	font-weight:			900;
	margin-bottom:			20px;
	padding:				0 40px;
	display:				block;
}

.NutritionDialogImage {
	width:					100%;
	height:					auto;
	margin:					0;
	box-shadow:				none;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.NutritionCards {
		grid-template-columns:	repeat(2, 1fr);
		gap:					25px;
	}
}

@media (max-width: 600px) {
	.NutritionContent {
		padding:				50px 30px;
	}

	.NutritionCards {
		grid-template-columns:	1fr;
		gap:					40px;
	}

	.NutritionCardHeader {
		font-size:				22px;
	}

	.NutritionDialog {
		padding:				60px 20px 20px 20px;
	}

	.NutritionDialogTitle {
		font-size:				20px;
		padding:				0;
	}
}