/*
 * Страница ингредиента. Свои классы vsd-s- без Tailwind: геометрия снята с принятого
 * мокапа Ингредиент_прототип.html (колонка 1176 px, плашка с радиусом 15 px,
 * герой 420 px + текст, «Ещё из категории» 1/2/3 колонки, миниатюра строки 56 px).
 */

.vsd-single {
	--vsd-page: #FAF8F5;
	--vsd-ink: #1C1917;
	--vsd-ink-soft: #44403C;
	--vsd-muted: #78716C;
	--vsd-faint: #A8A29E;
	--vsd-line: #E7E5E4;
	--vsd-cat-bg: #F5F5F0;
	--vsd-capsule-bg: #E8E8E0;
	--vsd-capsule-ink: #292524;

	background: var(--vsd-page);
	color: var(--vsd-ink);
	/* Tailwind preflight в мокапе держит базовую строку 1.5 на всём документе. */
	line-height: 1.5;
	font-family: Calibri, 'Carlito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
}

.vsd-single *,
.vsd-single *::before,
.vsd-single *::after {
	box-sizing: border-box;
}

.vsd-single__wrap {
	max-width: 1176px;
	margin: 0 auto;
	padding: 0 16px 64px;
}

.vsd-s-plate {
	margin-top: 12px;
	padding: 16px;
	background: #fff;
	border: 1px solid rgba(214, 211, 209, .7);
	border-radius: 15px;
	box-shadow: 0 10px 30px -22px rgba(28, 25, 23, .35);
}

/* ---------- хлебные крошки ---------- */
.vsd-s-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding-top: 20px;
	font-size: 13px;
}

.vsd-s-crumbs a,
.vsd-s-crumbs span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 9999px;
	font-size: 12.5px;
	line-height: 1.3;
	text-decoration: none;
}

.vsd-s-crumbs a {
	background: #fff;
	border: 1px solid var(--vsd-line);
	color: var(--vsd-muted);
}

.vsd-s-crumbs a:hover {
	color: var(--vsd-ink);
	border-color: var(--vsd-faint);
}

.vsd-s-crumbs .vsd-s-crumbs__here {
	background: var(--vsd-capsule-bg);
	color: var(--vsd-capsule-ink);
	font-weight: 600;
}

.vsd-s-crumbs .vsd-s-crumbs__sep {
	padding: 0;
	color: #D6D3D1;
}

/* ---------- герой ---------- */
.vsd-s-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}

.vsd-s-hero__pic {
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
}

.vsd-s-hero__pic img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 15px;
}

.vsd-s-hero__pic--empty {
	aspect-ratio: 1 / 1;
	border-radius: 15px;
	background: var(--vsd-cat-bg);
}

.vsd-s-hero__body {
	min-width: 0;
}

.vsd-s-hero__kicker {
	margin: 0;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--vsd-capsule-ink);
}

.vsd-s-title {
	margin: 6px 0 0;
	font-size: 25px;
	line-height: 1.15;
	font-weight: 700;
	color: var(--vsd-ink);
}

.vsd-s-hero__tail {
	margin: 6px 0 0;
	font-size: 14px;
	color: var(--vsd-muted);
}

/* SEO-строка под <h1>: подзаголовок страницы, стоит перед чипсами. */
.vsd-s-seo {
	margin: 6px 0 0;
	max-width: 46ch;
	font-size: 14px;
	line-height: 1.45;
	font-weight: 600;
	color: var(--vsd-ink-soft);
	overflow-wrap: anywhere;
}

.vsd-s-capsules {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
}

.vsd-s-capsule {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 9999px;
	background: var(--vsd-capsule-bg);
	color: var(--vsd-capsule-ink);
	font-size: 12.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* ---------- КБЖУ под героем (ratioHtml из мокапа) ---------- */
.vsd-s-ratio {
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

@media (min-width: 640px) {
	.vsd-s-ratio {
		flex-direction: row;
		align-items: center;
	}
}

.vsd-s-kcal {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	padding: 6px 12px;
	border-radius: 9999px;
	background: #0F2942;
	color: #FFFFFF;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.vsd-s-kcal__per { opacity: 0.6; }

.vsd-s-ratio__body {
	flex: 1 1 0%;
	min-width: 0;
}

.vsd-s-ratio__labels {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 16px;
	row-gap: 6px;
}

.vsd-s-macro {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #1C1917;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.vsd-s-macro__dot {
	width: 10px;
	height: 10px;
	flex-shrink: 0;
	border-radius: 9999px;
}

.vsd-s-ratio__bar {
	margin-top: 6px;
	display: flex;
	gap: 3px;
	width: 100%;
	height: 40px;
	overflow: hidden;
	border-radius: 9999px;
}

.vsd-s-ratio__seg {
	min-width: 0;
	border-radius: 9999px;
}

/* ---------- заголовки секций ---------- */
.vsd-s-h2 {
	margin: 0;
	font-size: 19px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--vsd-ink);
}

.vsd-s-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

.vsd-s-sub {
	margin: 0;
	font-size: 12px;
	color: var(--vsd-muted);
}

.vsd-s-note {
	margin: 12px 0 0;
	font-size: 11px;
	line-height: 1.6;
	color: var(--vsd-muted);
}

/* ---------- навигация атласа ---------- */
.vsd-s-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 16px;
}

.vsd-s-nav a {
	padding: 8px 16px;
	border: 1px solid #D6D3D1;
	border-radius: 9999px;
	background: #fff;
	color: var(--vsd-ink-soft);
	font-size: 13.5px;
	text-decoration: none;
}

.vsd-s-nav a:hover {
	border-color: var(--vsd-muted);
	color: var(--vsd-ink);
}

.vsd-s-nav__pos {
	font-size: 12.5px;
	color: var(--vsd-muted);
	font-variant-numeric: tabular-nums;
}

/* ---------- ещё из категории ---------- */
.vsd-s-related {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
	margin-top: 12px;
}

/* ---------- баннер книги ---------- */
.vsd-s-banner {
	display: block;
	margin-top: 20px;
	border: 1px solid var(--vsd-line);
	border-radius: 15px;
	overflow: hidden;
	background: #F5F5F0;
	box-shadow: 0 1px 2px rgba(28, 25, 23, .05);
	text-decoration: none;
}

/*
 * Мобильных баннеров четыре, пропорции у них разные, поэтому высота на телефоне
 * приходит из width/height самого файла. От 768 px показывает ПК-плашку, а атрибуты
 * у тега остаются от мобильного файла — там пропорцию задаёт правило ниже.
 */
.vsd-s-banner__pic {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 768px) {
	.vsd-s-banner__pic { aspect-ratio: 1983 / 793; }
}

/* ---------- дисклеймер ---------- */
.vsd-s-footer {
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid rgba(214, 211, 209, .7);
	font-size: 12px;
	line-height: 1.6;
	color: var(--vsd-muted);
}

@media (min-width: 640px) {
	.vsd-single__wrap { padding: 0 24px 64px; }
	.vsd-s-title { font-size: 26px; }
	.vsd-s-hero__tail { font-size: 15px; }
	.vsd-s-h2 { font-size: 21px; }
	.vsd-s-related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.vsd-s-hero { grid-template-columns: 420px minmax(0, 1fr); gap: 28px; }
	.vsd-s-title { font-size: 34px; line-height: 1.1; }
	.vsd-s-related { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
	.vsd-s-crumbs a,
	.vsd-s-nav a { transition: none; }
}

/*
 * Ниже — классы, которых в файле не было: аккордеон нутриентов, строки показателей,
 * чипы жирных кислот, плашки аналитики, блоки текстов и карточки связей. Все значения
 * переведены из утилит мокапа Ингредиент_прототип.html (gap-2.5 = 10 px, px-3.5 = 14 px,
 * h-[30px] = 30 px, w-[66px] = 66 px, w-[52px] = 52 px и т. д.), порядок и вложенность
 * соответствуют sectionHtml/rowHtml/fattyHtml/mkBlock.
 */

/* ---------- плашки по типам: p-4 / sm:p-5 / sm:p-6 / lg:p-7 ---------- */
.vsd-s-plate--hero,
.vsd-s-plate--pad,
.vsd-s-plate--sub,
.vsd-s-plate--wide {
	margin-top: 16px;
	padding: 16px;
}

.vsd-s-plate--hero { margin-top: 12px; }

/* в сетке аналитики и в секции кулинарии отступ несёт сама секция (mt-4) */
.vsd-s-analytics > .vsd-s-plate,
.vsd-s-cooking > .vsd-s-plate { margin-top: 0; }

/* «Чем заменить» в мокапе идёт с собственным mt-4 внутри той же сетки */
.vsd-s-plate--sub { margin-top: 16px; }

.vsd-s-analytics {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	margin-top: 16px;
}

.vsd-s-cooking { margin-top: 16px; }

/* ---------- заголовок 18/20 (Чем заменить, Ещё из категории) ---------- */
.vsd-s-h2--block { font-size: 18px; }

/* ---------- надписи секций аналитики ---------- */
.vsd-s-kicker {
	margin: 0;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--vsd-muted);
}

/* ---------- плашка «Что внутри» ---------- */
.vsd-s-lead {
	margin-top: 16px;
	padding: 20px;
	border-radius: 15px;
	background: var(--vsd-cat-bg);
}

.vsd-s-lead__kicker {
	display: inline-block;
	margin: 0;
	padding: 6px 14px;
	border-radius: 9999px;
	background: var(--vsd-capsule-bg, #E8E8E0);
	font-size: 15px;
	line-height: 1.35;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--vsd-capsule-ink, #292524);
}

.vsd-s-lead__body {
	margin-top: 8px;
	max-width: 62ch;
	font-size: 15px;
	line-height: 1.6;
	color: #292524;
}

.vsd-s-clamp { margin: 0; }

.vsd-s-readmore {
	display: none;
	margin: 8px 0 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--vsd-capsule-ink);
}

.vsd-s-capsule__dot { opacity: .7; }

/* ---------- натрий-калиевый индекс ---------- */
.vsd-s-nak__top {
	display: flex;
	align-items: flex-end;
	gap: 12px;
	margin-top: 8px;
}

.vsd-s-nak__value {
	margin: 0;
	font-size: 30px;
	line-height: 1;
	font-weight: 700;
	color: var(--vsd-ink);
	font-variant-numeric: tabular-nums;
}

.vsd-s-nak__pair {
	margin: 0;
	padding-bottom: 4px;
	font-size: 14px;
	font-weight: 500;
	color: #292524;
}

.vsd-s-nak__verdict {
	display: inline-block;
	margin: 12px 0 0;
	padding: 4px 12px;
	border-radius: 9999px;
	background: #FFF3E0;
	color: #C2410C;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.vsd-s-nak__text {
	margin: 4px 0 0;
	max-width: 62ch;
	font-size: 13px;
	line-height: 1.6;
	color: #57534E;
}

/* ---------- место в категории ---------- */
.vsd-s-place__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 8px;
}

.vsd-s-place__row { min-width: 0; }

.vsd-s-place__title {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--vsd-ink);
}

.vsd-s-place__value { color: var(--vsd-capsule-ink); }

.vsd-s-place__foot {
	margin: 12px 0 0;
	font-size: 12px;
	line-height: 1.6;
	color: var(--vsd-muted);
}

/* ---------- полосы вклада ---------- */
.vsd-s-bar {
	width: 100%;
	border-radius: 9999px;
	overflow: hidden;
}

.vsd-s-bar--thin { height: 6px; }
.vsd-s-bar--thick { height: 10px; }
.vsd-s-bar--filled { background: #F5F5F4; }

.vsd-s-row .vsd-s-bar,
.vsd-s-place__row .vsd-s-bar { margin-top: 6px; }

.vsd-s-plate > .vsd-s-bar { margin-top: 12px; }

.vsd-s-bar__fill {
	display: block;
	width: var(--vsd-w, 0%);
	height: 100%;
	border-radius: 9999px;
	background: var(--vsd-capsule-bg);
}

/* ---------- аккордеон нутриентов ---------- */
.vsd-s-accordion {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 12px;
}

.vsd-s-acc {
	border-radius: 15px;
	background: var(--vsd-cat-bg, #F5F5F0);
	box-shadow: 0 0 0 1px rgba(28, 25, 23, .07);
}

/*
 * Порядок секций в разметке фиксированный, поэтому цвет каждой плашки задан и литералом:
 * если инлайн-переменная категории не доедет до браузера (кэш копии листа), секция останется
 * пастельной, а не белой и не в цвете темы.
 */
.vsd-s-accordion > .vsd-s-acc:nth-of-type(1) { background: #FDF4EC; }
.vsd-s-accordion > .vsd-s-acc:nth-of-type(2) { background: #EEF4FB; }
.vsd-s-accordion > .vsd-s-acc:nth-of-type(3) { background: #F0F9F4; }
.vsd-s-accordion > .vsd-s-acc:nth-of-type(4) { background: #FFF9E8; }
.vsd-s-accordion > .vsd-s-acc:nth-of-type(5) { background: #F7F5FA; }

.vsd-s-acc__head {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 12px 14px;
	border: 0;
	background: none;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	/* тема (hello-elementor reset.css) красит все button в #c36 — без своей краски он течёт в плашку */
	color: var(--vsd-ink, #1C1917);
}

.vsd-s-acc__title {
	flex: 1 1 0%;
	min-width: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--vsd-ink, #1C1917);
}

.vsd-s-acc__count {
	flex-shrink: 0;
	font-size: 13px;
	color: var(--vsd-muted, #78716C);
	font-variant-numeric: tabular-nums;
}

.vsd-s-acc__chev {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--vsd-muted, #78716C);
}

.vsd-s-acc__list {
	padding: 0 14px 12px;
	overflow: hidden;
}

.vsd-s-acc__note {
	margin: 0;
	padding: 0 14px 12px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--vsd-muted, #78716C);
}

/* ---------- строка показателя ---------- */
.vsd-s-row {
	padding: 8px 0;
	border-bottom: 1px solid #F5F5F4;
}

.vsd-s-row:last-child { border-bottom: 0; }

.vsd-s-row__top {
	display: flex;
	align-items: center;
	gap: 10px;
}

.vsd-s-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border-radius: 9999px;
	box-shadow: 0 0 0 1px rgba(28, 25, 23, .05);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}

.vsd-s-row__label {
	flex: 1 1 0%;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--vsd-ink, #1C1917);
}

.vsd-s-row__short { display: inline; }
.vsd-s-row__full { display: none; }

.vsd-s-row__value {
	flex-shrink: 0;
	width: 78px;
	text-align: right;
	font-size: 17px;
	font-weight: 700;
	color: var(--vsd-ink, #1C1917);
	font-variant-numeric: tabular-nums;
}

.vsd-s-pct {
	flex-shrink: 0;
	width: 58px;
	text-align: right;
	font-size: 14.5px;
	font-weight: 700;
	color: #57534E;
	font-variant-numeric: tabular-nums;
}

.vsd-s-pct--strong { color: var(--vsd-ink); }

/* ---------- чипы жирных кислот ---------- */
.vsd-s-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-width: 62ch;
	padding: 0 14px 14px;
}

.vsd-s-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 13px;
	border-radius: 9999px;
	box-shadow: 0 0 0 1px rgba(28, 25, 23, .05);
	font-size: 13.5px;
}

.vsd-s-chip b { font-size: 13.5px; font-weight: 700; }

.vsd-s-chip__value {
	font-size: 13.5px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.vsd-s-chip__pct {
	font-size: 13.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* ---------- блоки текстов: «Как готовить» и «Любопытный факт» ---------- */
.vsd-s-block {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	min-width: 0;
}

.vsd-s-block__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	border-radius: 15px;
	background: var(--vsd-cat-bg);
}

.vsd-s-block__icon--40 { width: 40px; height: 40px; }

.vsd-s-block__icon img {
	width: 28px;
	height: 28px;
	object-fit: contain;
}

.vsd-s-block__icon--40 img { width: 24px; height: 24px; }

.vsd-s-block__body {
	flex: 1 1 0%;
	min-width: 0;
}

.vsd-s-h3 {
	display: inline-block;
	margin: 0;
	padding: 6px 14px;
	border-radius: 9999px;
	background: var(--vsd-capsule-bg, #E8E8E0);
	font-size: 18px;
	line-height: 1.35;
	font-weight: 700;
	color: var(--vsd-capsule-ink, #292524);
}

.vsd-s-block__text {
	margin: 8px 0 0;
	max-width: none;
	font-size: 17px;
	line-height: 1.7;
	color: #292524;
}

.vsd-s-fact {
	border-radius: 15px;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(231, 229, 228, .8);
}

.vsd-s-fact .vsd-s-block {
	gap: 14px;
	padding: 14px;
}

.vsd-s-fact .vsd-s-block__text { max-width: none; }

/* ---------- карточки замен и «Ещё из категории» ---------- */
.vsd-s-card {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	padding: 4px 12px;
	border-radius: 15px;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(231, 229, 228, .7);
	color: inherit;
	text-decoration: none;
}

.vsd-s-card:hover {
	box-shadow: 0 0 0 1px rgba(231, 229, 228, .7), 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
}

.vsd-s-card__thumb {
	display: block;
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	overflow: hidden;
	border-radius: 15px;
	background: var(--vsd-cat-bg);
}

.vsd-s-card__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vsd-s-card__body { min-width: 0; }

.vsd-s-card__num {
	display: block;
	font-size: 11px;
	color: var(--vsd-faint);
	font-variant-numeric: tabular-nums;
}

.vsd-s-card__name {
	display: block;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--vsd-ink, #1C1917);
}

.vsd-s-card__kb {
	display: block;
	margin-top: 4px;
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--vsd-ink-soft, #44403C);
}

.vsd-s-card__kcal {
	flex-shrink: 0;
	padding: 3px 9px;
	border-radius: 9999px;
	background: var(--vsd-capsule-bg, #E8E8E0);
	color: var(--vsd-capsule-ink, #292524);
	font-size: 13.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* ---------- «Чем заменить»: плашка категории вместо белой, миниатюра на белом ---------- */
.vsd-s-sub__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
	margin-top: 12px;
}

.vsd-s-sub__grid .vsd-s-card {
	background: var(--vsd-cat-bg);
	box-shadow: 0 0 0 1px rgba(28, 25, 23, .05);
}

.vsd-s-sub__grid .vsd-s-card:hover {
	box-shadow: 0 0 0 1px rgba(28, 25, 23, .05), 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
}

.vsd-s-sub__grid .vsd-s-card__thumb { background: #fff; }

/* в «Ещё из категории» имя обрезается многоточием, а КБЖУ-строка тянется на всю ширину */
.vsd-s-related .vsd-s-card__body { flex: 1 1 0%; }

.vsd-s-related .vsd-s-card__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---------- крошки: иконка категории и неактивная капсула ---------- */
.vsd-s-crumbs__icon {
	width: 16px;
	height: 16px;
	object-fit: contain;
}

.vsd-s-crumbs__plain {
	background: var(--vsd-capsule-bg);
	color: var(--vsd-capsule-ink);
	font-weight: 600;
}

/* ---------- навигация атласа ---------- */
.vsd-s-nav a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
}

.vsd-s-nav__card {
	color: var(--vsd-capsule-ink);
	font-variant-numeric: tabular-nums;
}

/* ---------- баннер книги: отступ несёт обёртка ---------- */
.vsd-s-bannerwrap { margin-top: 20px; }
.vsd-s-banner { margin-top: 0; }

/*
 * Тема Hello Elementor (assets/css/reset.css) держит свои состояния:
 *   [type=button]:hover, button:hover → background-color:#c36, color:#fff  (спека 0,2,0)
 *   [type=button], button            → border:1px solid #c36, color:#c36, white-space:nowrap (0,1,0)
 *   a:hover, a:active                → color:#336                                      (0,1,1)
 * Одиночный класс (0,1,0) их не перебивает, и порядок листов в <head> нам не garantирован,
 * поэтому все перекрытия носят префикс .vsd-single: база тянет 0,2,0, состояния — 0,3,0
 * и выигрывают у темы при любом порядке подключения.
 */
.vsd-single .vsd-s-acc__head,
.vsd-single .vsd-s-readmore {
	border: 0;
	border-radius: 0;
	background-color: transparent;
	color: var(--vsd-ink, #1C1917);
	white-space: normal;
}

.vsd-single .vsd-s-acc__head:active,
.vsd-single .vsd-s-acc__head:focus,
.vsd-single .vsd-s-acc__head:hover,
.vsd-single .vsd-s-readmore:active,
.vsd-single .vsd-s-readmore:focus,
.vsd-single .vsd-s-readmore:hover {
	border: 0;
	background-color: transparent;
	background-image: none;
	box-shadow: none;
	color: var(--vsd-ink, #1C1917);
	text-decoration: none;
}

.vsd-single .vsd-s-acc__head:focus-visible,
.vsd-single .vsd-s-readmore:focus-visible {
	background-color: transparent;
	box-shadow: none;
	color: var(--vsd-ink, #1C1917);
}

.vsd-single .vsd-s-card,
.vsd-single .vsd-s-banner,
.vsd-single .vsd-s-crumbs a,
.vsd-single .vsd-s-nav a {
	color: var(--vsd-ink, #1C1917);
}

.vsd-single .vsd-s-crumbs a,
.vsd-single .vsd-s-nav a {
	background-color: #fff;
}

.vsd-single .vsd-s-card:active,
.vsd-single .vsd-s-card:hover,
.vsd-single .vsd-s-banner:active,
.vsd-single .vsd-s-banner:hover,
.vsd-single .vsd-s-crumbs a:active,
.vsd-single .vsd-s-crumbs a:hover,
.vsd-single .vsd-s-nav a:active,
.vsd-single .vsd-s-nav a:hover {
	color: var(--vsd-ink, #1C1917);
	text-decoration: none;
}

/* ---------- появление чипов top-3 ---------- */
.rise {
	animation: rise 460ms cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes rise {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

/*
 * Сворачивание аккордеона, анимация полос и обрезка лид-абзаца живут только при
 * JavaScript: без него сервер уже напечатал всё, и прятать это незачем. Строки списка
 * нутриентов не скрываем — плашка обязана выводить все значения больше нуля.
 */
.vsd-js .vsd-s-acc__body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 240ms ease;
}

.vsd-js .vsd-s-acc__body > div { overflow: hidden; }
.vsd-js .vsd-s-acc--open .vsd-s-acc__body { grid-template-rows: 1fr; }
.vsd-js .vsd-s-acc__chev { transition: transform 240ms ease; }
.vsd-js .vsd-s-acc--open .vsd-s-acc__chev { transform: rotate(180deg); }

.vsd-js .vsd-s-bar--filled .vsd-s-bar__fill {
	width: 0;
	transition: width 420ms cubic-bezier(.22, .61, .36, 1);
}

.vsd-js .vsd-s-clamp {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.vsd-js .vsd-s-readmore--on { display: block; }

@media (min-width: 640px) {
	.vsd-s-plate--hero,
	.vsd-s-plate--sub,
	.vsd-s-plate--wide { padding: 24px; }

	.vsd-s-plate--pad { padding: 20px; }
	.vsd-s-h2--block { font-size: 20px; }

	.vsd-s-lead { padding: 24px; }

	.vsd-s-row__short { display: none; }
	.vsd-s-row__full { display: inline; }

	.vsd-js .vsd-s-clamp {
		display: block;
		-webkit-line-clamp: unset;
		overflow: visible;
	}

	.vsd-js .vsd-s-readmore--on { display: none; }

	.vsd-s-sub__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.vsd-s-plate--hero { padding: 28px; }
	.vsd-s-analytics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vsd-s-analytics .vsd-s-plate--sub { grid-column: span 2 / auto; }
}

@media (prefers-reduced-motion: reduce) {
	.vsd-js .vsd-s-acc__body,
	.vsd-js .vsd-s-acc__chev,
	.vsd-js .vsd-s-bar--filled .vsd-s-bar__fill { transition: none; }

	.rise { animation: none; }
}

/*
 * узкая мобильная колонка (базовая ширина владельца — 360 px):
 * 1) картинка продукта во всю ширину плашки, без белых закраин по бокам;
 * 2) «Чем заменить» — одна карточка в ряд, миниатюра слева: в 2 колонки имя при кегле 17 px
 *    резалось по слогам (колонка 118 px), здесь оно встаёт целиком;
 * 3) текстовые блоки занимают плашку целиком;
 * 4) тексты и цифры крупнее базовых кеглей.
 */
@media (max-width: 639px) {
	.vsd-s-plate--hero { overflow: hidden; }

	.vsd-s-hero__pic {
		width: auto;
		max-width: none;
		margin: 0 -16px;
	}

	.vsd-s-hero__pic img { border-radius: 0; }

	.vsd-s-sub__grid { gap: 8px; }

	.vsd-s-sub__grid .vsd-s-card__body { flex: 1 1 0%; }

	.vsd-s-sub__grid .vsd-s-card__kb {
		margin-top: 2px;
		font-size: 14px;
		line-height: 1.35;
	}

	/*
	 * С иконкой в одной колонке текст блока занимал 214 px из 280 плашки — дыра слева.
	 * Текст набирается на всю ширину плашки, сама иконка скрыта мобильным блоком ниже.
	 */
	.vsd-s-block { display: block; }

	.vsd-s-fact .vsd-s-block { padding: 14px; }

	.vsd-s-lead__body,
	.vsd-s-chips {
		max-width: none;
	}

	.vsd-s-lead__body {
		font-size: 16.5px;
		line-height: 1.6;
	}

	.vsd-s-hero__tail {
		font-size: 16px;
		line-height: 1.5;
	}

	.vsd-s-seo {
		max-width: none;
		font-size: 15.5px;
		line-height: 1.5;
	}

	.vsd-s-kcal {
		padding: 7px 14px;
		font-size: 15px;
	}

	.vsd-s-macro { font-size: 16px; }

	.vsd-s-acc__title { font-size: 18px; }
	.vsd-s-acc__count { font-size: 13.5px; }

	.vsd-s-acc__list { padding: 0 10px 12px; }

	.vsd-s-badge {
		width: 42px;
		height: 42px;
		font-size: 14px;
	}
}

/*
 * Вся мобильная версия (≤767 px): на десктопе ни одно из этих правил не действует.
 * 1) ряд нутриента собирается в одну линию,
 * 2) капсула заголовка компактнее, иконки рядом с ней скрыты.
 */
@media (max-width: 767px) {
	/*
	 * Название нутриента и его значение стоят на одной строке: метка занимает остаток ряда
	 * и добирается многоточием, полное имя остаётся в title. Значение и процент освобождены
	 * от фиксированной ширины — они не уезжают за правый край и не спрыгивают вниз.
	 */
	.vsd-s-row__top {
		align-items: center;
		flex-wrap: nowrap;
		gap: 8px;
	}

	.vsd-s-row__label {
		min-width: 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 16px;
	}

	.vsd-s-row__value {
		width: auto;
		min-width: 0;
		font-size: 16px;
	}

	.vsd-s-pct {
		width: auto;
		min-width: 0;
		font-size: 14px;
	}

	/* иконка отнимает ширину у капсулы заголовка: на мобилке её нет, на ПК она остаётся */
	.vsd-s-block__icon,
	.vsd-s-block__icon--40 { display: none; }

	.vsd-s-h3 {
		padding: 5px 10px;
		border-radius: 7px;
		font-size: 16px;
	}

	/* приставка «Что внутри» набрана КАПСом с разрядкой, поэтому её кегль на шаг меньше */
	.vsd-s-lead__kicker {
		padding: 5px 10px;
		border-radius: 7px;
		font-size: 15px;
	}
}