/* =====================================================
   Страница продукта (калорийность и БЖУ) на perek.us.

   Цвета, кнопки, карточки, шапка, вопросы и подвал — из
   landing_perek.css: файл подключается после него и
   добавляет только то, чего у лендинга нет.

   Раскладка одна на все экраны:
   * телефон — колонка; карточка дневника сразу под
     этикеткой, дальше её заменяет липкая кнопка снизу;
   * планшет — та же колонка, парные блоки встают рядом;
   * от 1024 px — две колонки, карточка дневника справа
     и едет вместе со страницей.
   ===================================================== */

/* -------- Поиск в шапке -------- */
/* На широком экране — поле посередине шапки. На телефоне — круглая кнопка:
   нажатие ставит курсор в поле, и оно раскрывается поверх шапки. */
.fp-search {
  position: relative; flex: 1; max-width: 420px;
  display: flex; align-items: center;
}
.fp-search [data-lucide] {
  position: absolute; left: 14px; font-size: 17px; color: var(--text-3); pointer-events: none;
}
.fp-search input {
  width: 100%; height: 40px; padding: 0 14px 0 40px;
  font: inherit; font-size: 15px; color: var(--text);
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-pill);
  outline: none; -webkit-appearance: none; appearance: none;
}
.fp-search input::placeholder { color: var(--text-3); }
.fp-search input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
@media (max-width: 719px) {
  .bar-in { position: relative; }
  .fp-search { flex: none; width: 40px; margin-left: auto; }
  .fp-search input { padding: 0; color: transparent; cursor: pointer; }
  .fp-search input::placeholder { color: transparent; }
  .fp-search [data-lucide] { left: 11px; color: var(--text-2); }
  .fp-search:focus-within {
    position: absolute; left: 12px; right: 12px; top: 50%; width: auto; max-width: none;
    transform: translateY(-50%); z-index: 2;
  }
  .fp-search:focus-within input { padding: 0 14px 0 40px; color: var(--text); cursor: text; }
  .fp-search:focus-within input::placeholder { color: var(--text-3); }
}

/* Узкий телефон (или крупный шрифт в настройках): логотип, поиск и кнопка
   дневника не влезали, и страницу можно было сдвинуть вбок на 7–20 px. Сначала
   уходит значок кнопки, потом подпись у логотипа. Боковую прокрутку страницы
   отрезаем на всякий случай: clip, а не hidden — липкая шапка остаётся липкой. */
body.fp { overflow-x: clip; }
@media (max-width: 400px) {
  .fp .bar-in { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .fp .bar-cta [data-lucide] { display: none; }
  .fp .bar-cta { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 339px) {
  .fp .brand-name { display: none; }
}

/* -------- Хлебные крошки -------- */
.fp-crumbs {
  display: flex; align-items: center; gap: 6px;
  padding: 14px 0 2px; overflow-x: auto; white-space: nowrap; scrollbar-width: none;
  font-size: 13px; font-weight: 600; color: var(--text-3);
}
.fp-crumbs::-webkit-scrollbar { display: none; }
.fp-crumbs a:hover { color: var(--primary-600); }
.fp-crumbs [data-lucide] { flex: none; font-size: 13px; opacity: 0.7; }
.fp-crumbs [aria-current] { color: var(--text-2); }

/* -------- Раскладка -------- */
.fp-layout { display: grid; grid-template-columns: minmax(0, 1fr); padding-bottom: 20px; }
.fp-head { padding: 10px 0 18px; }
.fp-head h1 { font-size: 34px; line-height: 1.05; letter-spacing: -0.035em; }
/* Снимок продукта в шапке. Фон у снимка прозрачный, поэтому подложки под ним
   нет: он лежит прямо на теме оформления. На телефоне встаёт рядом с
   заголовком — над ним он оттеснил бы вниз цифры, за которыми пришли. */
.fp-head.has-pic { display: grid; grid-template-columns: minmax(0, 1fr) 104px; column-gap: 14px; align-items: start; }
/* Пока снимок летит, на его месте мягкое пятно в цвет страницы, а подпись
   картинки не мелькает текстом: alt нужен поиску по картинкам, но читать его
   человеку незачем — потому он и прозрачный. */
.fp-pic {
  width: 100%; height: auto; color: transparent;
  background: radial-gradient(closest-side, var(--line) 38%, transparent 76%);
}
.fp-pic.is-ready { background: none; }
.fp-lead { margin-top: 8px; font-size: 15.5px; color: var(--text-2); }
/* Флаг рынка: товар с казахстанской упаковки. Флаг — настоящий, с Викисклада
   (static/img/flags/kz.svg, общественное достояние): эмодзи-флаг на Windows
   показывается буквами «KZ», а самодельный выходил непохожим. */
.fp-flag {
  display: inline-block; flex: none; width: 20px; height: 10px; border-radius: 1.5px;
  background: center / cover no-repeat; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08);
}
.fp-flag-kz { background-image: url("/static/img/flags/kz.svg"); }
.fp-flag-ua { background-image: url("/static/img/flags/ua.svg"); }
.fp-market {
  display: flex; gap: 8px; align-items: baseline; max-width: 62ch; margin-top: 8px;
  font-size: 14.5px; line-height: 1.45; color: var(--text-2);
}
.fp-market .fp-flag { transform: translateY(1px); }
.fp-market b { color: var(--text); }
.fp-mk {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 1px 6px 1px 4px;
  border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--bg-2);
  font-size: 11px; font-weight: 700; letter-spacing: 0.03em; color: var(--text-2); vertical-align: 1px;
}
.fp-mk .fp-flag { width: 16px; height: 8px; }
.fp-h1-group { display: block; margin-top: 6px; font-size: 0.45em; letter-spacing: -0.01em; color: var(--text-2); }
/* Короткий ответ: первая фраза страницы с цифрами. Крупнее обычного текста —
   это и есть ответ на запрос, а не подводка к нему. */
.fp-answer { margin-top: 10px; max-width: 62ch; font-size: 16.5px; line-height: 1.5; color: var(--text); }
.fp-link { color: var(--primary-600); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.fp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Формы продукта: сегменты, как переключатель на упаковке. */
.fp-forms {
  display: inline-flex; gap: 4px; margin-top: 14px; padding: 4px;
  border-radius: var(--r-pill); background: var(--bg-2); border: 1.5px solid var(--line);
}
.fp-form {
  padding: 7px 16px; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 700; color: var(--text-2);
}
.fp-form:hover { color: var(--text); }
.fp-form.is-on { background: var(--card); color: var(--text); box-shadow: 2px 2px 0 var(--stamp); }

/* -------- Этикетка -------- */
.fp-label { padding: 16px 16px 18px; }
.fp-label-h {
  padding-bottom: 10px; border-bottom: 2.5px solid var(--text);
  font-size: 12.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
}
/* На телефоне кнопки порций листаются вбок и не переносятся: две строки
   кнопок отодвигали число калорий за первый экран. */
.fp-portions {
  display: flex; gap: 8px; margin: 12px -16px 0; padding: 2px 16px 6px;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
}
.fp-portions::-webkit-scrollbar { display: none; }
.fp-portion {
  flex: none; scroll-snap-align: start;
  display: grid; align-content: center; gap: 1px; min-height: 50px;
  padding: 7px 14px; text-align: left; cursor: pointer;
  font: inherit; color: var(--text);
  background: var(--bg); border: 1.5px solid var(--line); border-radius: 14px;
  transition: transform 0.15s var(--ease), background 0.15s var(--ease);
}
.fp-portion b { font-size: 14.5px; font-weight: 750; white-space: nowrap; }
.fp-portion span { font-size: 12px; font-weight: 600; color: var(--text-3); white-space: nowrap; }
.fp-portion:active { transform: scale(0.97); }
.fp-portion.is-on {
  background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg);
  box-shadow: 0 2px 0 var(--btn-base);
}
.fp-portion.is-on span { color: inherit; opacity: 0.75; }
.fp-own { cursor: text; }
.fp-own-in { display: inline-flex; align-items: baseline; gap: 3px; }
.fp-own input {
  width: 46px; padding: 0; border: none; border-bottom: 1.5px dashed var(--text-3);
  background: transparent; color: inherit; outline: none;
  font: inherit; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.fp-own.is-on input { border-bottom-color: currentColor; }
.fp-own.is-on input::placeholder { color: inherit; opacity: 0.6; }

.fp-energy {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 10px; padding-bottom: 6px; border-bottom: 6px solid var(--text);
}
.fp-kcal b {
  font-size: 58px; font-weight: 800; line-height: 1; letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}
.fp-kcal span { font-size: 20px; font-weight: 750; }
.fp-for { font-size: 15px; font-weight: 650; color: var(--text-2); white-space: nowrap; }

.fp-macro {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center;
  column-gap: 10px; row-gap: 1px; padding: 10px 0;
  border-bottom: 1.5px solid var(--line);
}
.fp-dot { width: 10px; height: 10px; border-radius: 50%; }
.fp-macro-name { font-size: 15.5px; font-weight: 650; }
.fp-macro-val { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.fp-macro-share { grid-column: 2; font-size: 12px; color: var(--text-3); }
/* Те же три тёплых оттенка, что у калькулятора нормы на лендинге. */
.b-p { background: #c0563a; }
.b-f { background: #e0a23a; }
.b-c { background: #a8763f; }
/* Спирт у алкоголя: калории мимо БЖУ, свой холодный оттенок. */
.b-a { background: #7d6a9c; }
.fp-split {
  display: flex; gap: 2px; height: 10px; margin-top: 14px;
  border-radius: var(--r-pill); overflow: hidden;
}
.fp-split span { min-width: 3px; }
.fp-extras { margin-top: 12px; font-size: 13.5px; color: var(--text-2); }
.fp-norm {
  margin-top: 10px; padding-top: 10px; border-top: 1.5px dashed var(--border);
  font-size: 14px; color: var(--text-2);
}
.fp-norm b { color: var(--text); font-variant-numeric: tabular-nums; }
.fp-norm a, .fp-cta-alt a, .fp-sources a {
  color: var(--primary-600); font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px;
}

/* -------- Карточка дневника -------- */
.fp-aside { margin-top: 16px; }
.fp-cta {
  display: grid; gap: 10px; padding: 20px 18px;
  background:
    radial-gradient(circle, var(--holes) 1.7px, transparent 1.8px) 0 0 / 20px 20px,
    var(--bg-2);
}
.fp-cta .cap { margin: 0; }
.fp-cta h2 { font-size: 23px; line-height: 1.15; }
.fp-cta-portion { display: flex; flex-wrap: wrap; gap: 8px; }
.fp-cta-portion > span {
  padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--card); border: 1.5px solid var(--line);
  font-size: 14px; font-weight: 600; color: var(--text-2);
}
.fp-cta-portion b { font-size: 16px; color: var(--text); font-variant-numeric: tabular-nums; }
.fp-cta-text { font-size: 14.5px; color: var(--text-2); }
.fp-cta-go { width: 100%; margin-top: 4px; }
.fp-cta-note { font-size: 13px; font-weight: 600; color: var(--text-3); text-align: center; }
.fp-cta-alt { font-size: 13.5px; color: var(--text-2); text-align: center; }
.fp-cta-legal { font-size: 11.5px; line-height: 1.4; color: var(--text-3); text-align: center; }
.fp-cta-legal a { text-decoration: underline; text-underline-offset: 2px; }
.fp-cta-go.is-busy { opacity: 0.7; pointer-events: none; }

/* -------- Разделы -------- */
.fp-sec { margin-top: 38px; }
.fp-sec > h2 { font-size: 23px; line-height: 1.15; margin-bottom: 14px; }
.fp-note { margin-top: 10px; font-size: 12.5px; line-height: 1.45; color: var(--text-3); }

.fp-meter {
  display: block; height: 8px; border-radius: var(--r-pill); overflow: hidden;
  background: color-mix(in srgb, var(--primary) 16%, transparent);
}
.fp-meter i { display: block; height: 100%; min-width: 3px; border-radius: inherit; background: var(--primary); }

/* О товаре: производитель, страна, состав. */
.fp-info { padding: 6px 18px 16px; }
.fp-info-rows { display: grid; }
.fp-info-row {
  display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.fp-info-row dt { font-size: 14px; color: var(--text-3); }
.fp-info-row dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.fp-info-h { margin-top: 14px; font-size: 15px; font-weight: 700; }
.fp-info-text { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.fp-info-warn { color: var(--text-3); }
.fp-info-h small { margin-left: 6px; font-size: 13px; font-weight: 600; color: var(--text-3); }

/* -------- Коротко о товаре: карточки с иконкой (webapp/food_review.py) --------
   Иконка слева, заголовок и одна строка справа: страницу читают по
   диагонали, и абзацы подряд здесь выглядели бы документом. */
.fp-brief { display: grid; gap: 10px; list-style: none; }
@media (min-width: 640px) { .fp-brief { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fp-brief-card {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 2px;
  align-content: start; padding: 14px 16px;
}
.fp-brief-ic {
  grid-row: 1 / span 2; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 12px; font-size: 20px;
  background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary-600);
}
.fp-brief-card.is-ok .fp-brief-ic { background: color-mix(in srgb, #3f8f5a 16%, transparent); color: #2f7a48; }
.fp-brief-card.is-warn .fp-brief-ic { background: color-mix(in srgb, #c0563a 16%, transparent); color: #a8452b; }
.fp-brief-card b { align-self: end; font-size: 15.5px; line-height: 1.3; color: var(--text); }
.fp-brief-card > span:last-child { font-size: 14px; line-height: 1.45; color: var(--text-2); }

/* -------- Разбор состава: метки над текстом и подсветка в нём -------- */
.fp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; list-style: none; }
.fp-chip {
  padding: 5px 11px; border-radius: var(--r-pill); font-size: 13px; font-weight: 650; line-height: 1.3;
  background: var(--bg-2); color: var(--text-2); border: 1.5px solid var(--line);
}
.fp-chip.is-sugar { background: color-mix(in srgb, #c0563a 12%, var(--card)); border-color: color-mix(in srgb, #c0563a 30%, transparent); color: var(--text); }
.fp-chip.is-sweet { background: color-mix(in srgb, #7d6a9c 14%, var(--card)); border-color: color-mix(in srgb, #7d6a9c 32%, transparent); color: var(--text); }
.fp-chip.is-fat { background: color-mix(in srgb, #e0a23a 16%, var(--card)); border-color: color-mix(in srgb, #e0a23a 38%, transparent); color: var(--text); }
.fp-chip.is-ok { background: color-mix(in srgb, #3f8f5a 12%, var(--card)); border-color: color-mix(in srgb, #3f8f5a 30%, transparent); color: var(--text); }
.fp-hl { padding: 0 2px; border-radius: 4px; color: inherit; font: inherit; }
.fp-hl.is-sugar { background: color-mix(in srgb, #c0563a 20%, transparent); }
.fp-hl.is-sweet { background: color-mix(in srgb, #7d6a9c 22%, transparent); }
.fp-hl.is-fat { background: color-mix(in srgb, #e0a23a 26%, transparent); }
.fp-hl.is-add { background: none; text-decoration: underline dotted; text-underline-offset: 3px; }
/* Свёрнутый состав: три строки текста, затухание в цвет карточки и кнопка
   под ним. Открытый — целиком, с расшифровкой добавок. */
.fp-fold { position: relative; margin-top: 6px; }
.fp-fold .fp-info-text { margin-top: 0; }
.fp-fold-cb { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.fp-fold-cb:not(:checked) ~ .fp-fold-body { position: relative; max-height: 4.5em; overflow: hidden; font-size: 14px; }
.fp-fold-cb:not(:checked) ~ .fp-fold-body::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.6em;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--card) 0%, transparent), var(--card) 85%);
  pointer-events: none;
}
.fp-fold-more {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 7px 14px;
  font-size: 13.5px; font-weight: 700; color: var(--primary-600);
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-pill);
  cursor: pointer; user-select: none; transition: border-color 0.15s;
}
.fp-fold-more:hover { border-color: var(--primary); }
.fp-fold-more [data-lucide] { font-size: 16px; transition: transform 0.2s; }
.fp-fold-close, .fp-fold-cb:checked ~ .fp-fold-more .fp-fold-open { display: none; }
.fp-fold-cb:checked ~ .fp-fold-more .fp-fold-close { display: inline; }
.fp-fold-cb:checked ~ .fp-fold-more [data-lucide] { transform: rotate(180deg); }
.fp-fold-cb:focus-visible ~ .fp-fold-more {
  outline: 3px solid color-mix(in srgb, var(--primary) 40%, transparent); outline-offset: 2px;
}
.fp-adds { margin-top: 10px; font-size: 14px; }
.fp-adds summary { cursor: pointer; font-weight: 650; color: var(--primary-600); }
.fp-adds ul { display: grid; gap: 4px; margin-top: 8px; list-style: none; }
@media (min-width: 640px) { .fp-adds ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fp-adds li { display: flex; gap: 8px; align-items: baseline; color: var(--text-2); }
.fp-adds li b { flex: none; min-width: 52px; color: var(--text); font-variant-numeric: tabular-nums; }
.fp-adds p { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--text-3); }

/* -------- Похожие товары других брендов -------- */
.fp-cmp th[scope="row"] { white-space: normal; min-width: 150px; max-width: 360px; font-weight: 600; }
.fp-cmp th[scope="row"] small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 500; color: var(--text-3); }
.fp-cmp tr.is-self th, .fp-cmp tr.is-self td { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.fp-cmp thead th:first-child { text-transform: none; }

/* Как едят в дневниках. */
.fp-usage { display: grid; gap: 12px; }
.fp-stat, .fp-meals { padding: 16px 18px; }
.fp-stat .cap, .fp-meals .cap { margin-bottom: 6px; }
.fp-stat-num {
  font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.fp-stat-num span { font-size: 20px; letter-spacing: 0; }
.fp-stat-sub { margin-top: 8px; font-size: 14px; color: var(--text-2); }
.fp-meals ul { display: grid; gap: 9px; margin-top: 4px; }
.fp-meals li {
  display: grid; grid-template-columns: 76px minmax(0, 1fr) 40px; align-items: center; gap: 10px;
  font-size: 14px;
}
.fp-meals-name { font-weight: 650; }
.fp-meals b { text-align: right; font-variant-numeric: tabular-nums; }

/* Две формы продукта. */
.fp-twin { padding: 16px; }
.fp-twin-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fp-twin-item {
  display: grid; gap: 4px; padding: 12px 14px;
  border: 1.5px solid var(--line); border-radius: var(--r-md);
  font-size: 13.5px; font-weight: 650; color: var(--text-2);
}
.fp-twin-item b { font-size: 26px; font-weight: 800; color: var(--text); letter-spacing: -0.03em; }
.fp-twin-item small { font-size: 13px; font-weight: 700; letter-spacing: 0; }
.fp-twin-item.is-on { background: var(--bg-2); }
a.fp-twin-item { transition: box-shadow 0.15s var(--ease), transform 0.15s var(--ease); }
a.fp-twin-item:hover { box-shadow: 3px 3px 0 var(--stamp); transform: translate(-1px, -1px); }
.fp-twin > p { margin-top: 12px; font-size: 14.5px; color: var(--text-2); }

/* Витамины и минералы. */
.fp-micros { padding: 6px 16px 8px; }
.fp-micro-head {
  display: flex; justify-content: flex-end; gap: 12px; padding: 8px 0 6px;
  border-bottom: 2.5px solid var(--text);
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3);
}
.fp-micro-head span:first-child { margin-right: auto; }
.fp-micro {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 56px 40px;
  align-items: center; gap: 10px; padding: 10px 0;
  border-bottom: 1.5px dashed var(--border);
  font-size: 14.5px;
}
.fp-micro-name { font-weight: 650; }
.fp-micro-amount { color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fp-micro-pct { text-align: right; font-variant-numeric: tabular-nums; }
.fp-more > .fp-micro-list .fp-micro:last-child { border-bottom: none; }
.fp-more summary {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 0 8px; cursor: pointer; list-style: none;
  font-size: 14px; font-weight: 700; color: var(--primary-600);
}
.fp-more summary::-webkit-details-marker { display: none; }
.fp-more summary [data-lucide] { transition: transform var(--dur) var(--ease); }
.fp-more[open] summary { order: 2; }
.fp-more[open] summary span { display: none; }
.fp-more[open] summary [data-lucide] { transform: rotate(180deg); }
.fp-more[open] { display: flex; flex-direction: column; }

/* Похожие продукты. */
.fp-similar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fp-sim {
  display: grid; gap: 4px; height: 100%; padding: 12px 14px;
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-md);
}
/* Карточка со снимком: кадр слева, текст справа. Вторая колонка появляется
   только у карточек с картинкой (класс ставит шаблон), потому что нарисована
   она не у всех, а от пустого места название съезжало бы вправо без причины. */
.fp-sim.has-pic { display: flex; align-items: center; gap: 12px; }
.fp-sim-body { display: grid; gap: 4px; min-width: 0; }
.fp-sim.has-pic .fp-sim-body { flex: 1; }
.fp-sim-pic { flex: none; width: 44px; height: 44px; object-fit: contain; }
.fp-sim-name { font-size: 14px; font-weight: 650; color: var(--text-2); }
.fp-sim b { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fp-sim small { font-size: 12.5px; font-weight: 700; letter-spacing: 0; color: var(--text-3); }
.fp-sim-sub { font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
/* БЖУ на карточке соседа: одна строка мелким кеглем, цвета точек те же, что у
   большой таблицы выше, — глаз переносит значение без подписи. */
.fp-sim-macros {
  display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 2px;
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.fp-sim-macros > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.fp-sim-macros .fp-dot { width: 7px; height: 7px; flex: none; }
/* На телефоне карточки идут по две в ряд, и три пары «буква + число» влезают
   в строку только поджатыми: иначе углеводы переносятся на вторую строку и
   ряд карточек становится разной высоты. */
@media (max-width: 599px) {
  .fp-sim-macros { gap: 2px 7px; font-size: 12px; }
  .fp-sim-macros > span { gap: 4px; }
  /* На телефоне карточек две в ряд, и снимок в 44 пикселя отъедал у длинного
     названия половину строки: «Гречка с луком и шампиньонами» переносилась
     втрое. Поэтому здесь кадр мельче и стоит ближе к тексту. */
  .fp-sim.has-pic { gap: 8px; padding: 12px 12px 12px 10px; }
  .fp-sim-pic { width: 32px; height: 32px; }
}
a.fp-sim { box-shadow: 3px 3px 0 var(--stamp); transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease); }
a.fp-sim .fp-sim-name { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border); }
a.fp-sim:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--stamp); }

/* Фото вместо весов: шоколадная плашка. */
.fp-photo {
  margin-top: 38px; padding: 22px 20px;
  display: grid; gap: 16px;
  background: var(--dark); color: var(--cream);
  border-radius: var(--r-lg);
}
.fp-photo { position: relative; }
/* Зум в цвете продукта. Стоит у края плашки и ни в текст, ни в кнопку не
   лезет: на телефоне — на верхнем крае, на компьютере — третьей колонкой
   справа (webapp/food_mascot.py). */
.zum-food {
  display: block; width: 92px; height: auto;
  pointer-events: none; -webkit-user-select: none; user-select: none;
}
.fp-photo.has-zum { margin-top: 76px; }
.fp-photo .zum-food { position: absolute; right: 12px; bottom: calc(100% - 44px); }
.fp-photo h2 { font-size: 23px; }
.fp-photo p { margin-top: 6px; font-size: 15px; opacity: 0.78; }
.fp-photo .btn { justify-self: start; }

.fp-sec .faq { margin-top: 0; }

/* Источники: мелко, но с живыми ссылками — им верят больше, чем голым числам. */
.fp-sources { margin-top: 30px; font-size: 13px; color: var(--text-3); }
.fp-sources .cap { margin-bottom: 6px; font-size: 11px; }
.fp-sources ul { display: grid; gap: 4px; }
.fp-sources a { font-weight: 600; color: var(--text-2); }
.fp-sources p { margin-top: 8px; }

/* -------- Указатель, разделы и меню сетей -------- */
.fp-page { padding-bottom: 20px; }
.fp-hub-search {
  position: relative; display: flex; gap: 8px; margin-top: 18px; max-width: 560px;
}
.fp-hub-search [data-lucide] {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  font-size: 18px; color: var(--text-3); pointer-events: none;
}
.fp-hub-search input {
  flex: 1; min-width: 0; height: 50px; padding: 0 16px 0 44px;
  font: inherit; font-size: 16px; color: var(--text);
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-pill);
  outline: none; -webkit-appearance: none; appearance: none;
}
.fp-hub-search input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
.fp-hub-search .btn { flex: none; }
/* Второй путь поиска под строкой: по штрихкоду (/food/shtrihkod). */
.fp-hub-alt { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 10px; font-size: 14.5px; }
.fp-hub-alt a { display: inline-flex; align-items: center; gap: 6px; }
.fp-hub-alt [data-lucide] { font-size: 16px; }

/* -------- Справочник в цифрах -------- */
/* Счётчики под поиском: без плашек и теней, чтобы не спорить с плитками
   разделов ниже. На телефоне — две пары в ряд, это пара строк, а не экран. */
.fp-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px;
  margin-top: 22px; max-width: 820px;
}
.fp-facts li {
  display: grid; align-content: start; gap: 3px; padding-left: 12px;
  border-left: 2.5px solid color-mix(in srgb, var(--primary) 55%, transparent);
}
.fp-facts b {
  font-size: 26px; font-weight: 800; line-height: 1.05; letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fp-facts span { font-size: 13px; line-height: 1.3; font-weight: 600; color: var(--text-2); }
/* Пятый счётчик (штрихкоды) на телефоне — на всю ширину, а не сиротой в паре. */
.fp-facts li:nth-child(5):last-child { grid-column: 1 / -1; }

/* Блок перед плашкой дневника: что ещё есть в справочнике, кроме калорий.
   Фон в дырочку крекера — тот же, что у карточки дневника на странице продукта. */
.fp-inside {
  padding: 20px 18px 18px;
  background:
    radial-gradient(circle, var(--holes) 1.7px, transparent 1.8px) 0 0 / 20px 20px,
    var(--bg-2);
}
.fp-inside .cap { margin-bottom: 6px; }
.fp-inside h2 { font-size: 23px; line-height: 1.15; }
.fp-inside-grid { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 8px; }
.fp-inside-grid li {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; row-gap: 2px;
  padding: 14px 0; border-bottom: 1.5px dashed var(--border);
}
.fp-inside-grid li:last-child { border-bottom: none; }
.fp-inside-ic {
  grid-row: span 2; display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r-sm);
  background: var(--card); border: 1.5px solid var(--line); box-shadow: 2px 2px 0 var(--stamp);
  color: var(--primary); font-size: 20px;
}
.fp-inside-ic .fp-flag { width: 22px; height: 11px; }
.fp-inside-num { font-size: 15px; font-weight: 700; line-height: 1.3; }
.fp-inside-num b {
  font-size: 24px; font-weight: 800; letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fp-inside-text { font-size: 14px; line-height: 1.45; color: var(--text-2); }
.fp-inside-src { margin-top: 14px; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }

/* -------- Подсказки поиска -------- */
/* Обёртка поля: от неё отсчитываются и лупа, и крестик, и выпадающий список,
   поэтому она, а не форма, держит позиционирование. */
.fp-search-box { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
/* Свой крестик рядом со встроенным в поле выглядел бы опечаткой вёрстки, а
   встроенный ещё и не умеет закрывать список подсказок. */
.fp-search-box input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.fp-search-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--text-3); cursor: pointer;
}
/* Свой display перебивает встроенное правило для [hidden], поэтому скрытие
   приходится повторять явно — иначе крестик висит над пустым полем. */
.fp-search-clear[hidden], .fp-suggest[hidden] { display: none; }
.fp-search-clear:hover { color: var(--text); background: var(--line); }
.fp-search-clear [data-lucide] { position: static; transform: none; font-size: 16px; }
/* Место под крестик, чтобы он не лёг поверх набранного текста. */
.fp-search-box:has(.fp-search-clear:not([hidden])) input { padding-right: 40px; }

.fp-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
  max-height: min(60vh, 420px); overflow-y: auto; overscroll-behavior: contain;
  padding: 6px; margin: 0; list-style: none;
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-md);
  box-shadow: 4px 4px 0 var(--stamp), 0 8px 24px rgb(0 0 0 / 0.10);
}
.fp-suggest li {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: var(--r-sm); cursor: pointer;
}
.fp-suggest li[aria-selected="true"] { background: color-mix(in srgb, var(--primary) 12%, transparent); }
/* Отказ по лимиту: одна строка текста, не подсказка. */
.fp-suggest li.fp-sg-note { display: block; cursor: default; font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.fp-sg-text { flex: 1; min-width: 0; display: grid; }
.fp-sg-name { font-size: 14.5px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Совпавшие буквы: их подчёркивает цвет, а не только жир — на мелком
   кегле одного начертания мало, чтобы разница читалась. */
.fp-sg-name b { font-weight: 800; color: var(--primary-600); }
.fp-sg-text small { font-size: 12px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-sg-kcal { flex: none; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fp-sg-kcal small { font-size: 11px; font-weight: 700; color: var(--text-3); }
.fp-sg-pic, .fp-sg-logo { flex: none; width: 36px; height: 36px; border-radius: var(--r-sm); object-fit: cover; }
.fp-sg-icon {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--r-sm);
  background: var(--line); color: var(--text-3);
}
.fp-sg-icon [data-lucide] { position: static; transform: none; font-size: 17px; }
.fp-sg-mark {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--r-sm);
  background: var(--mark); color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: -0.02em;
}

/* Дата проверки под цифрами этикетки. */
.fp-checked {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line);
  font-size: 12.5px; color: var(--text-3);
}
.fp-checked [data-lucide] { font-size: 14px; color: var(--primary-600); }
.fp-checked a { color: var(--text-3); text-decoration: underline; text-underline-offset: 2px; }
.fp-checked a:hover { color: var(--text-2); }
.fp-checked.is-verified { color: var(--text-2); }
.fp-checked.is-verified b { color: var(--primary-600); font-weight: 700; }

/* -------- Лабораторные проверки (webapp/food_lab.py) --------
   Нейтрально, без красного и зелёного: таблица показывает числа авторов
   проверок рядом с этикеткой, а не наш вердикт. Этикетка — первый столбец,
   чуть выделен фоном, как «эта страница» в сравнении брендов. */
.fp-label-src { margin: -4px 0 10px; font-size: 13px; color: var(--text-3); }
.fp-label-src a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
.fp-label-src a:hover { color: var(--primary-600); }
.fp-lab-lead { margin-bottom: 10px; font-size: 14.5px; line-height: 1.5; color: var(--text-2); }
/* Четыре столбца должны влезть в телефон: подписи переносятся, первый
   столбец узкий (у общих таблиц он от 150 px — там длинные названия). */
.fp-table.fp-lab th, .fp-table.fp-lab td { padding: 10px 8px; white-space: normal; }
.fp-table.fp-lab thead th {
  text-transform: none; letter-spacing: 0; font-size: 12.5px; line-height: 1.25; vertical-align: bottom;
}
.fp-table.fp-lab th[scope="row"] { min-width: 0; width: 1%; }
.fp-table.fp-lab thead th:first-child { white-space: nowrap; }
.fp-lab thead th small, .fp-lab td small {
  display: block; margin-top: 2px; font-size: 11.5px; font-weight: 500; line-height: 1.3; color: var(--text-3);
}
.fp-lab td { font-weight: 700; vertical-align: top; }
.fp-lab td.is-label { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.fp-lab-quote { margin-top: 10px; padding: 12px 16px; }
.fp-lab-who { font-size: 13px; color: var(--text-3); }
.fp-lab-who b { color: var(--text); }
.fp-lab-quote ul { margin: 6px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.fp-lab-src { margin: 12px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.fp-lab-src a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.fp-lab-src a:hover { color: var(--primary-600); }

/* Найденные страницы-указатели над списком товаров. */
.fp-found-pages { margin-bottom: 12px; }

/* -------- Знак плитки: бренд, раздел или подборка -------- */
/* Клетка одна на все три списка указателя. У бренда в ней буквы или логотип,
   у раздела и подборки — иконка предмета: без знака плитки разделов стояли
   бы другим ростом, чем плитки сетей под ними. */
.fp-mark {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; min-width: 0; border-radius: var(--r-sm);
  background: var(--mark); color: #fff; font-size: 14px; font-weight: 800; letter-spacing: -0.02em;
}
.fp-mark-logo { object-fit: contain; background: none; }
/* Значок раздела и подборки — одна линия, без подложки: буквы бренда без
   плашки не прочесть, а иконка предмета читается и так. Клетка при этом та
   же, 40×40, поэтому названия в трёх списках стоят по одной линии. */
.fp-mark-ic { background: none; color: var(--primary); }
.fp-mark-ic [data-lucide] { font-size: 22px; }

/* Остальные бренды: свёрнуты, но в разметке лежат сразу — поисковик обязан
   видеть ссылки на все страницы брендов. */
.fp-more { margin-top: 10px; }
.fp-more summary {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
  font-size: 14px; font-weight: 700; color: var(--text-2);
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-pill);
  cursor: pointer; list-style: none;
}
.fp-more summary::-webkit-details-marker { display: none; }
.fp-more summary:hover { color: var(--text); border-color: var(--border); }
.fp-more[open] summary { margin-bottom: 10px; }
.fp-more .fp-more-close, .fp-more[open] .fp-more-open { display: none; }
.fp-more[open] .fp-more-close { display: inline; }

/* Плитки указателя: знак, название, счётчик. Колонки добавляются по мере
   того, как названия перестают в них помещаться: «Молочные продукты и сыры»
   рядом со знаком и счётчиком требуют примерно 230 px, и на телефоне такая
   плитка бывает только одна в ряд. */
.fp-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.fp-tile {
  display: flex; align-items: center; gap: 10px; height: 100%;
  padding: 14px 16px; background: var(--card); border: 1.5px solid var(--line);
  border-radius: var(--r-md); box-shadow: 3px 3px 0 var(--stamp);
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
/* Название забирает всё, что осталось от знака и счётчика, и переносится
   внутри своей доли. Без переноса длинного слова («морепродукты») строка
   вылезала за свою долю и ложилась поверх счётчика. */
.fp-tile b { flex: 1; min-width: 0; font-size: 15px; overflow-wrap: anywhere; }
/* Счётчик позиций. Цифры табличные и в клетке постоянной ширины: в столбце
   плиток счётчики стоят колонкой, а не пляшут по длине числа. Цвет спокойный:
   малиновый на плитке уже занят знаком, и два акцента спорили бы. */
.fp-count {
  flex: none; display: flex; align-items: center; justify-content: center;
  min-width: 30px; height: 22px; padding: 0 8px; border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--text-2); background: var(--bg-2);
}
/* Подпись найденной страницы — словами («12 продуктов», «подборка»). Это не
   счётчик, поэтому и не пилюля: текст в клетке счётчика читался бы как число
   и растягивал бы её на всю плитку. */
.fp-tile-note { flex: none; font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.fp-tile:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--stamp); }
@media (min-width: 520px) {
  .fp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 800px) {
  .fp-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Таблица КБЖУ: ради неё приходят по запросам «таблица калорийности».
   На телефоне первая колонка прилипает, цифры листаются вбок. */
.fp-table-wrap { margin-top: 6px; padding: 4px 0; overflow-x: auto; }
.fp-table { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.fp-table th, .fp-table td { padding: 10px 12px; text-align: right; white-space: nowrap; }
.fp-table thead th {
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3); border-bottom: 2.5px solid var(--text);
}
.fp-table th[scope="row"], .fp-table thead th:first-child { text-align: left; }
/* Заголовок столбца — кнопка сортировки (static/js/food_page.js): бледная
   двойная стрелка у всех, у выбранного столбца — направление. */
.fp-sort {
  all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
}
.fp-sort::after { content: "↕"; font-size: 12px; letter-spacing: 0; opacity: 0.35; }
.fp-sort:hover, .fp-table [aria-sort] > .fp-sort { color: var(--text); }
.fp-sort:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 3px; border-radius: 4px; }
.fp-table [aria-sort="descending"] > .fp-sort::after { content: "↓"; opacity: 1; }
.fp-table [aria-sort="ascending"] > .fp-sort::after { content: "↑"; opacity: 1; }
.fp-table th[scope="row"] {
  position: sticky; left: 0; z-index: 1; min-width: 150px; max-width: 280px;
  white-space: normal; font-weight: 650; background: var(--card);
}
/* Снимок в строке таблицы. Мелкий и без подложки: в списке он помогает найти
   нужное глазами, а не рассматривается. */
.fp-t-pic { width: 30px; height: 30px; margin: -6px 8px -6px 0; vertical-align: middle; object-fit: contain; }
.fp-table th[scope="row"] a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border); }
.fp-table th[scope="row"] a:hover { color: var(--primary-600); text-decoration-color: currentColor; }
.fp-table tbody tr + tr > * { border-top: 1.5px dashed var(--border); }
.fp-t-kcal { font-weight: 800; }
/* «1 средний банан, 118 г — 105 ккал»: текст, а не число — не прижимаем вправо. */
.fp-table td.fp-t-piece { text-align: left; font-size: 13px; color: var(--text-2); }
/* Чей товар — в подборке по брендам: «Энергетик Ultra» есть и у Monster, и
   у Burn. Отдельной строкой под названием, мельче и тише. */
.fp-t-note { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
/* Название со снимком: картинка слева, название и бренд столбиком справа
   (владелец 29.09.2026: строка бренда уходила под картинку). */
.fp-t-name { display: flex; align-items: center; gap: 8px; }
.fp-t-name .fp-t-pic { flex: none; margin: -6px 0; }
/* Подборка по брендам (владелец 29.09.2026: «Первый русский протеин» не найти
   в куче одинаковых «Сывороточный протеин»): знак бренда вместо снимка, бренд
   первой строкой и крупнее названия товара. */
.fp-t-mark { width: 36px; height: 36px; font-size: 12px; letter-spacing: -0.03em; border-radius: 9px; }
/* Три буквы («ПРП») в клетку не влезают тем же кеглем. */
.fp-t-mark.is-long { font-size: 10.5px; letter-spacing: -0.05em; }
.fp-t-brand { display: block; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; color: var(--text); }
.fp-t-brand + a { display: inline; font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.fp-table tbody tr[hidden] { display: none; }
/* Поиск бренда над таблицей: поле словами и список всех брендов. */
.fp-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 14px; }
.fp-filter-field, .fp-filter-pick { position: relative; display: flex; align-items: center; min-width: 0; }
.fp-filter-field { flex: 1 1 260px; max-width: 440px; }
.fp-filter-pick { flex: 0 1 260px; }
.fp-filter [data-lucide] { position: absolute; font-size: 17px; color: var(--text-3); pointer-events: none; }
.fp-filter-field [data-lucide] { left: 14px; }
.fp-filter-pick [data-lucide] { right: 14px; color: var(--text-2); }
.fp-filter input, .fp-filter select {
  width: 100%; height: 44px; font: inherit; color: var(--text);
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-pill);
  outline: none; -webkit-appearance: none; appearance: none;
}
/* 16 px в поле: меньше — и iPhone увеличивает страницу при нажатии. */
.fp-filter input { padding: 0 14px 0 40px; font-size: 16px; }
.fp-filter select { padding: 0 40px 0 16px; font-size: 15px; font-weight: 650; cursor: pointer; text-overflow: ellipsis; }
.fp-filter input::placeholder { color: var(--text-3); }
.fp-filter input:focus, .fp-filter select:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}
/* «По брендам / По белку»: две кнопки одной пилюлей. */
.fp-view {
  flex: none; display: inline-flex; padding: 3px; gap: 2px;
  background: var(--bg-2); border: 1.5px solid var(--line); border-radius: var(--r-pill);
}
.fp-view button {
  all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 14px; border-radius: var(--r-pill); cursor: pointer;
  font-size: 14.5px; font-weight: 700; color: var(--text-2);
}
.fp-view button [data-lucide] { position: static; font-size: 16px; color: inherit; }
.fp-view button[aria-pressed="true"] { background: var(--card); color: var(--text); box-shadow: 0 1px 3px rgba(58, 36, 22, 0.14); }
.fp-view button:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 2px; }
/* Группы брендов: заголовок во всю ширину, у товаров под ним бренд и знак не
   повторяются. В сплошном виде заголовков нет, бренд снова в каждой строке. */
.fp-table:not(.is-grouped) .fp-t-group { display: none; }
.fp-table.is-grouped tr:not(.fp-t-group) .fp-t-mark,
.fp-table.is-grouped .fp-t-brand { display: none; }
.fp-table.is-grouped .fp-t-brand + a { font-size: 14.5px; font-weight: 650; color: var(--text); }
.fp-table tbody tr.fp-t-group > th {
  padding: 14px 12px 4px; text-align: left; white-space: normal; background: var(--card);
  border-top: 2px solid var(--line);
}
.fp-table tbody tr.fp-t-group:first-child > th { border-top: 0; padding-top: 12px; }
.fp-table tbody tr.fp-t-group + tr > * { border-top: 0; }
/* Таблица листается вбок на телефоне — заголовок бренда остаётся у левого края. */
.fp-t-group-in { position: sticky; left: 12px; display: inline-flex; align-items: center; gap: 10px; }
.fp-t-group-in a, .fp-t-group-in b { font-size: 16.5px; font-weight: 800; letter-spacing: -0.01em; color: var(--text); text-decoration: none; }
.fp-t-group-in a:hover { color: var(--primary-600); }
.fp-t-group-in small { font-size: 13px; font-weight: 600; color: var(--text-3); }
.fp-t-gmark { width: 32px; height: 32px; font-size: 11.5px; letter-spacing: -0.03em; border-radius: 8px; }
.fp-t-gmark.is-long { font-size: 10px; letter-spacing: -0.05em; }
.fp-filter-count { flex-basis: 100%; margin: 0; font-size: 14px; font-weight: 600; color: var(--text-2); }
.fp-filter-count:empty { display: none; }
@media (max-width: 519px) {
  .fp-filter-field, .fp-filter-pick, .fp-view { flex: 1 1 100%; max-width: none; }
  .fp-view button { flex: 1; justify-content: center; }
}
/* Лабораторные проверки в подборке: автор и белок, ссылка на видео или пост. */
.fp-table td.fp-t-labs { text-align: left; white-space: normal; min-width: 120px; }
.fp-t-lab {
  display: inline-block; margin: 2px 4px 2px 0; padding: 2px 8px; border-radius: var(--r-pill);
  font-size: 12.5px; color: var(--text-2); text-decoration: none; white-space: nowrap;
  border: 1px solid var(--border); background: var(--card);
}
.fp-t-lab b { color: var(--text); font-weight: 750; }
.fp-t-lab:hover { color: var(--primary-600); border-color: currentColor; }
.fp-t-nolab { color: var(--text-3); }

/* Текст служебной страницы «Откуда цифры». */
.fp-prose { display: grid; gap: 12px; padding: 18px 20px; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.fp-prose b { color: var(--text); }
.fp-about .fp-sec { max-width: 760px; }

/* -------- Липкая кнопка на телефоне -------- */
.fp-bar {
  position: fixed; left: 14px; right: 14px; z-index: 30;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 9px; padding: 13px 20px;
  border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  box-shadow: 0 3px 0 var(--btn-base), 0 10px 26px rgba(58, 36, 22, 0.28);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.fp-bar [data-lucide] { flex: none; font-size: 20px; }
.fp-bar-label { font-size: 16px; font-weight: 750; }
.fp-bar-portion { margin-left: auto; font-size: 13.5px; font-weight: 600; opacity: 0.8; font-variant-numeric: tabular-nums; }
.fp-bar.is-hidden { opacity: 0; transform: translateY(130%); pointer-events: none; }

/* -------- Меню сети: «Собери заказ» (static/js/food_order.js) -------- */
.fp-order-hint {
  display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 14px;
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-md);
  box-shadow: 3px 3px 0 var(--stamp);
  font-size: 14.5px; line-height: 1.4; color: var(--text-2);
}
.fp-order-hint b { color: var(--text); }
.fp-order-hint-icon {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary-600); font-size: 20px;
}
.fp-table th.fp-t-add, .fp-table td.fp-t-add { width: 1%; padding: 6px 12px 6px 4px; }
.fp-add {
  all: unset; box-sizing: border-box; display: inline-grid; place-items: center;
  min-width: 36px; height: 36px; padding: 0 6px; border-radius: 18px; cursor: pointer;
  background: var(--card); border: 1.5px solid var(--line); box-shadow: 2px 2px 0 var(--stamp);
  font-size: 21px; font-weight: 800; line-height: 1; color: var(--primary-600);
  transition: transform 0.15s var(--ease);
}
.fp-add:active { transform: scale(0.92); }
.fp-add:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 2px; }
.fp-add.is-on {
  background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg);
  box-shadow: 0 2px 0 var(--btn-base); font-size: 15px;
}

/* Меню на телефоне: шесть столбцов в 340 px не помещались, белки, жиры и
   углеводы уезжали за край. Здесь строка — название, под ним калории, порция
   и БЖУ одной строкой, «+» справа. Порядок столбцов на компьютере прежний. */
@media (max-width: 599px) {
  .fp-table.is-menu thead { display: none; }
  .fp-table.is-menu, .fp-table.is-menu tbody { display: block; }
  .fp-table.is-menu tr {
    position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px;
    padding: 12px 62px 12px 14px;
  }
  .fp-table.is-menu tbody tr + tr { border-top: 1.5px dashed var(--border); }
  .fp-table.is-menu tbody tr + tr > * { border-top: none; }
  .fp-table.is-menu th[scope="row"] {
    position: static; flex: 1 0 100%; min-width: 0; max-width: none; padding: 0; background: none;
    font-size: 15px;
  }
  .fp-table.is-menu td { padding: 0; text-align: left; font-size: 13.5px; color: var(--text-2); }
  .fp-table.is-menu td.fp-t-kcal { order: 1; font-size: 15px; color: var(--text); }
  .fp-table.is-menu td.fp-t-kcal::after { content: " ккал"; font-size: 13px; font-weight: 650; }
  .fp-table.is-menu td.fp-t-portion { order: 2; color: var(--text-3); }
  .fp-table.is-menu td.fp-t-p { order: 3; }
  .fp-table.is-menu td.fp-t-f { order: 4; }
  .fp-table.is-menu td.fp-t-c { order: 5; }
  .fp-table.is-menu td.fp-t-p::before { content: "Б "; color: var(--text-3); }
  .fp-table.is-menu td.fp-t-f::before { content: "Ж "; color: var(--text-3); }
  .fp-table.is-menu td.fp-t-c::before { content: "У "; color: var(--text-3); }
  .fp-table.is-menu td.fp-t-add {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: auto; padding: 0;
  }
  .fp-table.is-menu .fp-t-pic { width: 26px; height: 26px; margin: -4px 7px -4px 0; }
}

.fp-order[hidden] { display: none; }
.fp-order-bar {
  position: fixed; left: 14px; right: 14px; z-index: 42;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 10px; padding: 11px 18px 11px 11px;
  border: none; border-radius: var(--r-pill); cursor: pointer; font: inherit; text-align: left;
  background: var(--btn-bg); color: var(--btn-fg);
  box-shadow: 0 3px 0 var(--btn-base), 0 10px 26px rgba(58, 36, 22, 0.28);
}
.fp-order-bar [data-lucide] { flex: none; font-size: 20px; }
.fp-order-count {
  display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 9px;
  border-radius: 16px; background: var(--btn-fg); color: var(--btn-bg);
  font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.fp-order-label { font-size: 16px; font-weight: 750; }
.fp-order-sum { margin-left: auto; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fp-order-sum b { font-weight: 800; }
.fp-order-bar.is-bump { animation: fp-bump 0.35s var(--ease); }
@keyframes fp-bump { 40% { transform: scale(1.04); } }
.fp-order.is-open .fp-order-bar { display: none; }
.fp-order-shade {
  position: fixed; inset: 0; z-index: 40; background: rgba(30, 18, 10, 0.38);
  opacity: 0; pointer-events: none; transition: opacity 0.2s var(--ease);
}
.fp-order.is-open .fp-order-shade { opacity: 1; pointer-events: auto; }
.fp-order-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
  display: grid; gap: 12px; max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain;
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  background: var(--card); border-radius: 26px 26px 0 0;
  box-shadow: 0 -10px 30px rgba(58, 36, 22, 0.18);
}
.fp-order-sheet[hidden] { display: none; }
.fp-order-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fp-order-top .cap { margin: 0; }
.fp-order-top h2 { font-size: 25px; line-height: 1.1; }
.fp-order-x {
  all: unset; box-sizing: border-box; flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer; background: var(--bg-2); font-size: 20px;
}
.fp-order-list { display: grid; margin: 0; padding: 0; list-style: none; }
.fp-order-line {
  display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-bottom: 1.5px dashed var(--border);
}
.fp-order-line > div:first-child { flex: 1; min-width: 0; display: grid; gap: 2px; }
.fp-order-line a { font-size: 15px; font-weight: 650; color: var(--text); }
.fp-order-line span { font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.fp-step { display: flex; align-items: center; gap: 8px; }
.fp-step button {
  all: unset; box-sizing: border-box; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; border: 1.5px solid var(--line); background: var(--bg); cursor: pointer;
  font-size: 18px; font-weight: 800; color: var(--text);
}
.fp-step button:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 2px; }
.fp-step b { min-width: 16px; text-align: center; font-variant-numeric: tabular-nums; }
.fp-order-total { display: grid; gap: 6px; }
.fp-order-kcal { font-size: 16px; font-weight: 700; color: var(--text-2); }
.fp-order-kcal b { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.fp-order-macros { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; color: var(--text-2); }
.fp-order-macros span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.fp-order-macros b { color: var(--text); font-variant-numeric: tabular-nums; }
.fp-order-macros .fp-dot { width: 8px; height: 8px; }
.fp-order-norm { font-size: 13.5px; color: var(--text-2); }
.fp-order-norm a { color: var(--primary-600); font-weight: 700; }
.fp-order-go { width: 100%; }
.fp-order-go.is-busy { opacity: 0.7; pointer-events: none; }
.fp-order-clear {
  all: unset; justify-self: center; cursor: pointer; padding: 4px 8px;
  font-size: 13.5px; font-weight: 650; color: var(--text-3); text-decoration: underline; text-underline-offset: 3px;
}
body.has-order { padding-bottom: 76px; }
html.fp-order-lock { overflow: hidden; }
@media (min-width: 600px) {
  .fp-order-bar { left: 50%; right: auto; width: 420px; transform: translateX(-50%); }
  .fp-order-bar.is-bump { animation: none; }
  .fp-order-sheet {
    left: 50%; right: auto; width: 480px; transform: translateX(-50%);
    padding: 22px 24px 24px;
  }
}

/* Подборки в меню сети: на телефоне по четыре карточки, иначе до самого меню
   приходится листать два экрана. */
@media (max-width: 599px) {
  .fp-picks li:nth-child(n+5) { display: none; }
}

/* -------- Планшет -------- */
@media (min-width: 600px) {
  .fp-head h1 { font-size: 42px; }
  .fp-head.has-pic { grid-template-columns: minmax(0, 1fr) 180px; column-gap: 24px; }
  .fp-label { padding: 20px 22px 22px; }
  .fp-portions { flex-wrap: wrap; overflow: visible; margin: 14px 0 0; padding: 0 0 4px; }
  .fp-kcal b { font-size: 66px; }
  .fp-macro { grid-template-columns: 10px minmax(0, 1fr) auto 110px; }
  .fp-macro-share { grid-column: auto; text-align: right; font-size: 13px; }
  /* Текст карточки дневника слева, кнопка справа: во всю ширину планшета
     кнопка растягивалась в полосу, которую не читают как кнопку. */
  .fp-cta {
    grid-template-columns: minmax(0, 1fr) 280px; column-gap: 28px; align-items: center;
    padding: 24px;
  }
  .fp-cta > * { grid-column: 1; }
  .fp-cta-go, .fp-cta-note, .fp-cta-alt { grid-column: 2; }
  .fp-cta-go { grid-row: 2 / span 2; align-self: end; }
  .fp-cta-note { grid-row: 4; }
  .fp-cta-alt { grid-row: 5; }
  .fp-usage { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .fp-micro { grid-template-columns: minmax(0, 1fr) auto 120px 44px; gap: 14px; }
  .fp-similar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fp-answer { font-size: 17.5px; }
  .fp-photo { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 26px 28px; }
  .fp-photo .btn { justify-self: end; }
  .fp-sec > h2, .fp-photo h2 { font-size: 26px; }
  /* В один ряд, сколько бы счётчиков ни было: четыре или пять со штрихкодами. */
  .fp-facts {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    gap: 12px 20px; max-width: 1000px;
  }
  .fp-facts li:nth-child(5):last-child { grid-column: auto; }
  .fp-facts b { font-size: 30px; }
  .fp-inside { padding: 24px 26px 22px; }
  .fp-inside h2 { font-size: 26px; }
  /* Две колонки фактов; черта снизу у каждой строки, у последней пары — нет. */
  .fp-inside-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .fp-inside-grid li:nth-last-child(-n+2):nth-child(odd),
  .fp-inside-grid li:last-child { border-bottom: none; }
}

/* -------- Компьютер -------- */
@media (min-width: 1024px) {
  .fp-layout {
    grid-template-columns: minmax(0, 1fr) 340px; column-gap: 44px; align-items: start;
  }
  /* Места хватает — Зум встаёт в строку с текстом и кнопкой. */
  .fp-photo.has-zum { margin-top: 38px; grid-template-columns: minmax(0, 1fr) auto auto; }
  .fp-photo .zum-food {
    position: static; width: 132px; margin: -24px 0 -16px 10px; align-self: end;
  }
  .fp-layout > * { grid-column: 1; }
  /* Колонка дневника занимает все строки слева, чтобы липкой карточке было
     куда ехать. Промежутков между строками у сетки нет, поэтому лишние пустые
     строки высоты не добавляют. */
  .fp-aside { grid-column: 2; grid-row: 1 / span 16; align-self: stretch; margin-top: 18px; }
  .fp-cta {
    position: sticky; top: calc(var(--bar-h) + 20px);
    grid-template-columns: minmax(0, 1fr); padding: 22px 20px;
  }
  .fp-cta > *, .fp-cta-go, .fp-cta-note, .fp-cta-alt { grid-column: 1; grid-row: auto; }
  .fp-head { padding-top: 14px; }
  .fp-head h1 { font-size: 48px; }
  .fp-bar { display: none; }
  .site-footer { padding-bottom: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .fp-bar, .fp-portion, .fp-sim, .fp-twin-item { transition: none; }
}