/* Sugabi Nutrition Facts — FDA 2020 panel
   Override any of the variables below from your theme's custom CSS. */

.sugabi-nf-wrap {
	--snf-font: Helvetica, Arial, sans-serif;
	--snf-ink: #000;
	--snf-paper: #fff;
	--snf-width: 280px;
	--snf-rule: 1px;
	--snf-rule-thick: 5px;
	--snf-rule-mid: 10px;
	max-width: 100%;
	line-height: 1.15;
}

/* Ingredients / allergen lines inherit the theme's font and color so they read
   correctly on dark sites; only the panel itself is forced black-on-white. */

.sugabi-nf-wrap p { margin: 0; }

.sugabi-nf {
	box-sizing: border-box;
	width: var(--snf-width);
	max-width: 100%;
	margin: 0 0 1em;
	padding: 6px 7px;
	border: var(--snf-rule) solid var(--snf-ink);
	background: var(--snf-paper);
	color: var(--snf-ink);
	font-size: 14px;
}

.sugabi-nf__title {
	margin: 0 0 2px;
	padding: 0 0 2px;
	border: 0;
	border-bottom: var(--snf-rule) solid var(--snf-ink);
	font-family: var(--snf-font);
	font-size: 30px;
	font-weight: 900;
	letter-spacing: -0.5px;
	line-height: 1;
	color: var(--snf-ink);
	text-align: left;
	text-transform: none;
}

.sugabi-nf__servings {
	font-size: 13px;
	padding: 2px 0 0;
}

.sugabi-nf__serving-size {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding: 2px 0 4px;
	border-bottom: var(--snf-rule-mid) solid var(--snf-ink);
	font-size: 15px;
	font-weight: 700;
}

.sugabi-nf__calories {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	padding: 4px 0 2px;
	border-bottom: var(--snf-rule-thick) solid var(--snf-ink);
}

.sugabi-nf__cal-label { display: flex; flex-direction: column; }
.sugabi-nf__amount-per { font-size: 11px; font-weight: 700; }
.sugabi-nf__cal-word { font-size: 26px; font-weight: 900; line-height: 1; }
.sugabi-nf__cal-value { font-size: 36px; font-weight: 900; line-height: 0.9; }

.sugabi-nf__dv-head {
	padding: 3px 0;
	border-bottom: var(--snf-rule) solid var(--snf-ink);
	font-size: 11px;
	font-weight: 700;
	text-align: right;
}

.sugabi-nf__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sugabi-nf__row {
	display: flex;
	align-items: baseline;
	gap: 4px;
	margin: 0;
	padding: 2px 0;
	border-bottom: var(--snf-rule) solid var(--snf-ink);
	font-size: 13px;
	line-height: 1.2;
}

.sugabi-nf__row--indent-1 { padding-left: 16px; }
.sugabi-nf__row--indent-2 { padding-left: 32px; }
.sugabi-nf__row--bold .sugabi-nf__name,
.sugabi-nf__pct { font-weight: 700; }

.sugabi-nf__name { flex: 0 1 auto; }
.sugabi-nf__row .sugabi-nf__amount { font-weight: 400; }
.sugabi-nf__pct { margin-left: auto; text-align: right; }

/* Protein is the last macro row: thick rule under it */
.sugabi-nf__list:not(.sugabi-nf__list--micros) .sugabi-nf__row:last-child {
	border-bottom: var(--snf-rule-mid) solid var(--snf-ink);
}

.sugabi-nf__list--micros .sugabi-nf__row:last-child {
	border-bottom: var(--snf-rule-thick) solid var(--snf-ink);
}

.sugabi-nf__row--micro .sugabi-nf__name { font-weight: 400; }
.sugabi-nf__row--micro .sugabi-nf__pct { font-weight: 400; }

.sugabi-nf__footnote {
	padding: 5px 0 0;
	font-size: 10px;
	line-height: 1.25;
}

.sugabi-nf__ingredients,
.sugabi-nf__allergens,
.sugabi-nf__note {
	max-width: 100%;
	margin: 0 0 0.5em;
	font-size: 13px;
	line-height: 1.4;
}

.sugabi-nf__allergens--may { font-style: italic; }
.sugabi-nf__note { font-size: 12px; opacity: 0.85; }

/* Keep the panel legible on dark themes: it always prints black on white. */
.sugabi-nf, .sugabi-nf * { -webkit-font-smoothing: antialiased; }

@media (max-width: 360px) {
	.sugabi-nf { width: 100%; }
	.sugabi-nf__title { font-size: 26px; }
	.sugabi-nf__cal-value { font-size: 32px; }
}

@media print {
	.sugabi-nf { break-inside: avoid; }
}