/* nutriscrolls/top-foods — Figma "Top foods list" 21:841, "Ranking list item" 21:677 */
.ns-top-foods__title {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: 600;
	letter-spacing: -0.005em;
	line-height: var(--wp--custom--line-height--h-4);
	margin: 0 0 var(--wp--preset--spacing--10);
}
.ns-top-foods__subtitle {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--body-small);
	line-height: var(--wp--custom--line-height--body-small);
	margin: 0 0 var(--wp--preset--spacing--20);
}
.ns-top-foods__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ns-rank {
	border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--line);
	margin: 0;
}
.ns-rank__link {
	align-items: center;
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--ink);
	display: grid;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: 28px 48px minmax(0, 1fr) 72px 148px 52px;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
	text-decoration: none;
	transition: var(--ns-transition-hover, background-color 120ms);
}
.ns-rank__link:hover {
	background: var(--wp--preset--color--surface);
}
.ns-rank__link:hover .ns-rank__food {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.ns-rank__link:focus-visible {
	outline: var(--wp--custom--border--focus) solid var(--wp--preset--color--focus);
	outline-offset: 0;
}
.ns-rank__pos {
	color: var(--wp--preset--color--ink-muted);
	white-space: nowrap;
}
.ns-rank__thumb {
	background: var(--wp--preset--color--surface-strong);
	border-radius: var(--wp--custom--radius--md);
	display: block;
	height: 48px;
	overflow: hidden;
	width: 48px;
}
.ns-rank__img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}
.ns-rank__name {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.ns-rank__food {
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--label);
}
.ns-rank__group {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 500;
	line-height: var(--wp--custom--line-height--caption);
}
.ns-rank__amount,
.ns-rank__pct {
	text-align: end;
	white-space: nowrap;
}
.ns-top-foods__footer {
	margin: 0;
	padding-top: var(--wp--preset--spacing--40);
}

/* Controls (blocks/view/top-foods.js adds .is-ready; without script they stay hidden and the plain top list shows):
   "Rank by" as a segmented control like the settings menu, the food group menu, "Show more" under the list. */
.ns-top-foods__controls,
.ns-top-foods__more {
	display: none;
}
.ns-top-foods.is-ready .ns-top-foods__controls {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	margin: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--30);
}
.ns-top-foods__tabs {
	background: var(--wp--preset--color--surface-strong);
	border-radius: var(--wp--custom--radius--md);
	display: flex;
	gap: 2px;
	padding: var(--wp--preset--spacing--10);
}
.ns-top-foods__tab {
	background: transparent;
	border: var(--wp--custom--border--hairline) solid transparent;
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--ink-muted);
	cursor: pointer;
	font: inherit;
	font-size: var(--wp--preset--font-size--label-small);
	font-weight: 600;
	height: 36px;
	line-height: 1;
	padding: 0 var(--wp--preset--spacing--30);
	white-space: nowrap;
}
.ns-top-foods__tab:hover {
	color: var(--wp--preset--color--ink);
}
.ns-top-foods__tab[aria-pressed="true"] {
	background: var(--wp--preset--color--surface-raised);
	border-color: var(--wp--preset--color--line-strong);
	box-shadow: var(--wp--preset--shadow--sm);
	color: var(--wp--preset--color--ink);
}
.ns-top-foods__group select {
	appearance: none;
	background: var(--wp--preset--color--surface-raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2366758a' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--line-strong);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	font: inherit;
	font-size: var(--wp--preset--font-size--label-small);
	font-weight: 600;
	height: 44px;
	padding: 0 36px 0 var(--wp--preset--spacing--30);
}
.ns-top-foods.is-ready .ns-top-foods__more:not([hidden]) {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--30);
}
.ns-top-foods__more-btn {
	background: var(--wp--preset--color--surface-raised);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--line-strong);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--link-default);
	cursor: pointer;
	font: inherit;
	font-size: var(--wp--preset--font-size--label-small);
	font-weight: 600;
	height: 44px;
	padding: 0 var(--wp--preset--spacing--40);
}
.ns-top-foods__more-btn:hover {
	color: var(--wp--preset--color--link-hover);
}
.ns-top-foods__count {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--caption);
}
.ns-top-foods.is-loading .ns-top-foods__list {
	opacity: 0.55;
	transition: opacity 120ms;
}

/* What the % is of, in one plain line under the subtitle (TopFoodsBlock::note()); the vitamin A line does not apply to
   the per-100-kcal ranking, which shows the share of the top food. */
.ns-top-foods__note {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--caption);
	line-height: var(--wp--custom--line-height--caption);
	margin: 0 0 var(--wp--preset--spacing--20);
}
.ns-top-foods[data-basis="kcal"] > .ns-top-foods__note--vit-a {
	display: none;
}
.ns-rank__share {
	color: var(--wp--preset--color--ink-muted);
}

/* Which ranking shows. Without a local choice the site's units decide (base.css hides the inactive ns-u variant) and
   the per-100-kcal list is hidden. data-basis on the block (Rank by) overrides the site's units for this block only;
   the region rules keep working on the variants that carry a region too. */
.ns-top-foods:not([data-basis="kcal"]) > [data-b="kcal"],
.ns-top-foods[data-basis="kcal"] > .ns-u,
.ns-top-foods[data-basis="cup"] > .ns-u[data-u="g"],
.ns-top-foods[data-basis="g"] > .ns-u[data-u="cup"] {
	display: none !important;
}
html:not([data-region="eu"]) .ns-top-foods[data-basis="cup"] > .ns-u[data-u="cup"]:not([data-r="eu"]),
html[data-region="eu"] .ns-top-foods[data-basis="cup"] > .ns-u[data-u="cup"]:not([data-r="us"]),
html:not([data-region="eu"]) .ns-top-foods[data-basis="g"] > .ns-u[data-u="g"]:not([data-r="eu"]),
html[data-region="eu"] .ns-top-foods[data-basis="g"] > .ns-u[data-u="g"]:not([data-r="us"]) {
	display: block !important;
}

@media (max-width: 599px) {
	.ns-rank__link {
		gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
		grid-template-areas: "pos thumb name amount pct" "bar bar bar bar bar";
		grid-template-columns: 26px 40px minmax(0, 1fr) auto auto;
	}
	.ns-rank__pos { grid-area: pos; }
	.ns-rank__thumb { grid-area: thumb; height: 40px; width: 40px; }
	.ns-rank__name { grid-area: name; }
	.ns-rank__amount { grid-area: amount; }
	.ns-rank__pct { grid-area: pct; }
	.ns-rank__bar { grid-area: bar; }
}

@media (max-width: 599px) {
	.ns-top-foods__tabs {
		flex: 1 1 100%;
	}
	.ns-top-foods__tab {
		flex: 1 1 0;
		padding: 0 var(--wp--preset--spacing--10);
	}
	.ns-top-foods__group,
	.ns-top-foods__group select {
		width: 100%;
	}
}