/* Компоненты SkinFormula (design/, дизайн-система макетов).
   Цвета, отступы и скругления — только из темы (темы.css).
   Правила: --accent и --accent-soft только на том, что нажимается; один
   полужирный на экран; касание не меньше 44 px; выбор не только цветом
   (галочка, рамка, метка). Порядок: компоненты из макетов как есть, затем
   раскладка экранов, затем то, что нужно настоящему приложению. */

.sf, .sf * { box-sizing: border-box; }
.sf { font-family: var(--font-system, -apple-system, Roboto, system-ui, sans-serif); color: var(--ink); -webkit-font-smoothing: auto; }
.sf :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sf a { text-decoration: none; }
.sf a:not(.sf-link) { color: inherit; }

/* ---------- Verdict tag: the one bold element on a card ---------- */
.sf-vt { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 5px 10px 5px 8px; border-radius: var(--radius-12); font-size: 14px; line-height: 20px; font-weight: 600; max-width: 100%; }
.sf-vt__icon { flex: none; width: 18px; height: 18px; display: block; }
.sf-vt--strong  { background: var(--v-strong-soft);  color: var(--v-strong); }
.sf-vt--support { background: var(--v-support-soft); color: var(--v-support); }
.sf-vt--weak    { background: var(--v-weak-soft);    color: var(--v-weak); }
.sf-vt--none    { background: var(--v-none-soft);    color: var(--v-none); }
.sf-vt--caution { background: var(--v-caution-soft); color: var(--v-caution); }
.sf-vt--no      { background: var(--v-no-soft);      color: var(--v-no); }

/* ---------- Neutral badge, amount and evidence scales ---------- */
.sf-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--neutral-badge); color: var(--neutral-badge-ink); font-size: 12px; line-height: 18px; font-weight: 400; white-space: nowrap; }
.sf-amt { display: inline-flex; align-items: center; gap: 6px; color: var(--neutral-badge-ink); font-size: 12px; line-height: 16px; font-weight: 400; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sf-amt__dots { width: 20px; height: 8px; flex: none; }

/* ---------- Product photo ---------- */
.sf-photo { flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--neutral-badge); overflow: hidden; }
.sf-photo img { object-fit: cover; display: block; }
.sf-photo--none { color: var(--line-strong); }

/* ---------- Action pills ---------- */
.sf-pill { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--tap-min, 44px); padding: 0 12px; border-radius: var(--radius-pill); border: 1px solid var(--accent-soft); background: transparent; color: var(--accent); font: inherit; font-size: 14px; line-height: 20px; font-weight: 500; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.sf-pill--fill { background: var(--accent-soft); }
.sf-pill:active { background: var(--accent); color: var(--on-accent); }
.sf-pill__icon { width: 16px; height: 16px; flex: none; }

/* ---------- Product card in a list ---------- */
.sf-pcard { display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-16); background: var(--surface); border-radius: var(--radius-20); }
.sf-pcard__main { display: flex; gap: var(--space-12); align-items: center; border-radius: var(--radius-12); -webkit-tap-highlight-color: transparent; }
.sf-pcard__text { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.sf-pcard__name { font-size: 16px; line-height: 22px; font-weight: 400; color: var(--ink); }
.sf-pcard__meta { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sf-pcard__text .sf-amt { margin-top: 2px; white-space: normal; }
.sf-pcard__verdict { display: flex; margin-top: -4px; }
.sf-vt { white-space: nowrap; }
.sf-pcard__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); padding-top: var(--space-12); border-top: 1px solid var(--line); }
.sf-pcard__actions { display: flex; gap: var(--space-8); }
.sf-price { font-size: 14px; line-height: 20px; color: var(--price); font-weight: 400; font-variant-numeric: tabular-nums; }
.sf-price__store { color: var(--ink-muted); }
.sf-price--none { color: var(--ink-muted); }

/* ---------- What it gives you ---------- */
.sf-give { display: flex; flex-direction: column; gap: 4px; padding: var(--space-16); background: var(--surface); border-radius: var(--radius-20); }
.sf-give__title { margin: 0 0 4px; font-size: 20px; line-height: 26px; font-weight: 600; color: var(--ink); }
.sf-give__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sf-give__item { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 0; border-top: 1px solid var(--line); }
.sf-give__item:first-child { border-top: 0; padding-top: 4px; }
.sf-give__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); width: 100%; }
.sf-give__name { font-size: 15px; line-height: 20px; font-weight: 500; color: var(--ink); }
.sf-give__does { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink); }
.sf-give__nodata { margin: 4px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sf a.sf-phint { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap-min, 44px); font-size: 14px; line-height: 20px; color: var(--accent); font-variant-numeric: tabular-nums; }
.sf-phint__arrow { width: 16px; height: 16px; flex: none; }

/* ---------- Where to buy ---------- */
.sf-wtb { display: flex; flex-direction: column; gap: 4px; padding: var(--space-8); background: var(--surface); border-radius: var(--radius-20); }
.sf-wtb__title { margin: 8px 8px 4px; font-size: 20px; line-height: 26px; font-weight: 600; color: var(--ink); }
.sf-store { display: flex; align-items: center; gap: var(--space-12); min-height: 60px; padding: 8px; border-radius: var(--radius-12); -webkit-tap-highlight-color: transparent; }
.sf-store:active { background: var(--neutral-badge); }
.sf-store--best { background: var(--price-best); }
.sf-store__plate { flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-12); background: var(--store); color: var(--store-ink); font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: 0; }
.sf-store--best .sf-store__plate { background: var(--surface); }
.sf-store__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sf-store__name { font-size: 15px; line-height: 20px; color: var(--ink); }
.sf-store__rating { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.sf-store__star { width: 12px; height: 12px; }
.sf-store__best { font-size: 12px; line-height: 16px; color: var(--price-best-ink); }
.sf-store__price { font-size: 16px; line-height: 22px; color: var(--price); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-store--best .sf-store__price { font-weight: 600; }
.sf-store__price--none { font-size: 13px; color: var(--ink-muted); }
.sf-store__chev { width: 16px; height: 16px; flex: none; color: var(--ink-muted); }
.sf-wtb__analog { gap: 6px; padding: 0 8px; }

/* ---------- Ingredient chip ---------- */
.sf-chips { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.sf-chip { display: inline-flex; align-items: center; text-align: left; gap: var(--space-8); min-height: var(--tap-min, 44px); padding: 0 14px; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); font: inherit; font-size: 14px; line-height: 20px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sf-chip__n { font-size: 12px; line-height: 16px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.sf-chip__note { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.sf-chip--nodata { border-style: dashed; color: var(--ink-muted); }
.sf-chip:active, .sf-chip.is-pressed { background: var(--accent-soft); border: 2px solid var(--accent); padding: 0 13px; }
.sf-chip.is-pressed .sf-chip__name { font-weight: 500; }

/* ---------- 1 % trace line ---------- */
.sf-trace { display: flex; align-items: center; gap: var(--space-8); width: 100%; margin: var(--space-4) 0; }
.sf-trace__label { flex: none; font-size: 12px; line-height: 16px; color: var(--ink); font-variant-numeric: tabular-nums; }
.sf-trace__rule { flex: 1; height: 10px; background-image: linear-gradient(var(--line-strong), var(--line-strong)), repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 8px); background-size: 100% 1px, 100% 6px; background-position: 0 100%, 0 100%; background-repeat: no-repeat; }
.sf-trace__caption { flex: none; font-size: 12px; line-height: 16px; color: var(--ink-muted); }

/* ---------- Filter chip ---------- */
.sf-filters { display: flex; gap: var(--space-8); overflow-x: auto; scrollbar-width: none; }
.sf-filter { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap-min, 44px); padding: 0 16px; border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); font: inherit; font-size: 14px; line-height: 20px; font-weight: 500; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.sf-filter[aria-pressed="true"] { background: var(--accent-soft); border: 2px solid var(--accent); padding: 0 15px; color: var(--ink); }
.sf-filter[aria-pressed="true"] .sf-filter__check { color: var(--accent); }
.sf-filter__check { width: 14px; height: 14px; }
.sf-filter__caret { width: 12px; height: 12px; }
.sf-filter[disabled] { color: var(--ink-muted); border-style: dashed; cursor: default; }

/* ---------- Group heading, info note, empty state, link ---------- */
.sf-group { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-8); padding: 0 var(--space-4); }
.sf-group__title { font-size: 15px; line-height: 20px; font-weight: 500; color: var(--ink); margin: 0; }
.sf-group__count { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.sf-info { display: flex; gap: var(--space-8); padding: var(--space-16); background: var(--surface); border-radius: var(--radius-20); }
.sf-info__mark { flex: none; width: 20px; height: 20px; color: var(--ink-muted); margin-top: 1px; }
.sf-info__body { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.sf-info__title { margin: 0; font-size: 15px; line-height: 20px; font-weight: 500; color: var(--ink); }
.sf-info__text { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.sf-empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); padding: var(--space-16); background: var(--surface); border-radius: var(--radius-20); border: 1px dashed var(--line-strong); }
.sf-empty__mark { width: 32px; height: 32px; color: var(--ink-muted); }
.sf-empty__title { font-size: 16px; line-height: 22px; font-weight: 500; margin: 0; color: var(--ink); }
.sf-empty__body { font-size: 14px; line-height: 20px; color: var(--ink-muted); margin: 0; }
.sf-link { display: inline-flex; align-items: center; min-height: var(--tap-min, 44px); padding: 0; margin: 0; border: 0; background: none; font: inherit; font-size: 15px; line-height: 20px; font-weight: 500; color: var(--accent); cursor: pointer; }

/* ---------- Disclosure rows (Что внутри, аллергены, как мы судим) ---------- */
.sf-disc { background: var(--surface); border-radius: var(--radius-20); }
.sf-row { display: flex; align-items: center; gap: var(--space-8); width: 100%; min-height: 56px; padding: 8px var(--space-16); background: transparent; border: 0; border-radius: var(--radius-20); font: inherit; font-size: 15px; line-height: 20px; color: var(--ink); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sf-row:active { background: var(--neutral-badge); }
.sf-row__label { flex: 1; display: flex; flex-direction: column; gap: 2px; font-weight: 500; }
.sf-row__summary { font-size: 13px; line-height: 18px; font-weight: 400; color: var(--ink-muted); }
.sf-row__count { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.sf-row__caret { width: 16px; height: 16px; flex: none; color: var(--ink-muted); transition: transform .15s ease; }
.sf-row[aria-expanded="true"] .sf-row__caret { transform: rotate(180deg); }
.sf-panel { padding: 0 var(--space-16) var(--space-16); font-size: 14px; line-height: 20px; color: var(--ink); }
.sf-panel p { margin: 0 0 var(--space-8); }
.sf-panel__lead { color: var(--ink-muted); }
.sf-panel__note { color: var(--ink-muted); font-size: 12px; line-height: 16px; }
@media (prefers-reduced-motion: reduce) { .sf-row__caret { transition: none; } }

/* ---------- MainButton (mock of Telegram's native button) ---------- */
.sf-main { display: flex; align-items: center; justify-content: center; gap: var(--space-8); width: 100%; height: var(--main-button-h, 48px); border: 0; border-radius: var(--radius-12); background: var(--accent); color: var(--on-accent); font: inherit; font-size: 16px; line-height: 22px; font-weight: 500; cursor: pointer; }
.sf-main[disabled] { background: var(--line); color: var(--ink-muted); cursor: default; }
.sf-main__spinner { width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: sf-spin .8s linear infinite; }
@keyframes sf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sf-main__spinner { animation: none; border-right-color: currentColor; opacity: .6; } }


/* ================= Анкета и результат ================= */
.sf-mark { flex: none; width: 22px; height: 22px; color: var(--line-strong); }
.sf-mark--on { color: var(--accent); }
.sf-chev { flex: none; width: 16px; height: 16px; color: var(--ink-muted); }

/* BlockProgress */
.sf-bp { display: flex; flex-direction: column; gap: 8px; }
.sf-bp__bar { display: flex; gap: 4px; }
.sf-bp__seg { flex: 1; height: 6px; border-radius: var(--radius-pill); background: var(--line); }
.sf-bp__seg--done { background: var(--ink-muted); }
.sf-bp__seg--now { background: var(--ink); }
.sf-bp__cap { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }

/* QuestionCard */
.sf-q { display: flex; flex-direction: column; width: 100%; background: var(--surface); border-radius: var(--radius-20); }
.sf-q--active { padding: 16px 12px 8px; gap: 4px; }
.sf-q__title { margin: 0 4px; font-size: 16px; line-height: 22px; font-weight: 500; color: var(--ink); }
.sf-q__hint { margin: 0 4px; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.sf-q__opts { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.sf-opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 10px 12px; border: 0; border-radius: var(--radius-12); background: transparent; font: inherit; font-size: 16px; line-height: 22px; color: var(--ink); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sf-opt:active { background: var(--neutral-badge); }
.sf-opt--on { background: var(--accent-soft); }
.sf-q__dk { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap-min, 44px); margin: 4px 0 0; padding: 0 12px; border: 0; border-radius: var(--radius-pill); background: none; font: inherit; font-size: 15px; line-height: 20px; color: var(--ink-muted); cursor: pointer; }
.sf-q__dk--on { color: var(--ink); background: var(--accent-soft); }
.sf-q__dk .sf-mark { width: 18px; height: 18px; }
.sf-q--answered { flex-direction: row; align-items: center; gap: 12px; min-height: 56px; padding: 8px 16px; border: 0; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sf-q--answered:active { background: var(--neutral-badge); }
.sf-q__done { flex: none; width: 18px; height: 18px; color: var(--ink-muted); }
.sf-q__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sf-q--answered .sf-q__q { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sf-q__a { font-size: 15px; line-height: 20px; color: var(--ink); }
.sf-q--upcoming { flex-direction: row; align-items: center; gap: 12px; min-height: 44px; padding: 10px 16px; background: transparent; border-top: 1px solid var(--line); border-radius: 0; }
.sf-q--active + .sf-q--upcoming { border-top: 0; }
.sf-q--upcoming .sf-q__q { font-size: 15px; line-height: 20px; color: var(--ink-muted); }
.sf-q__num { flex: none; width: 18px; height: 2px; border-radius: 1px; background: var(--line-strong); }

/* ChoiceChips */
.sf-cc { display: flex; flex-direction: column; gap: 4px; padding: 16px 12px; background: var(--surface); border-radius: var(--radius-20); }
.sf-cc__row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; padding: 0 4px; }
.sf-cc__chip { font-weight: 400; font-size: 15px; }
.sf-cc__chip[aria-checked="true"] { background: var(--accent-soft); border: 2px solid var(--accent); padding: 0 15px; }
.sf-cc__chip[aria-checked="true"] .sf-filter__check { color: var(--accent); }

/* MultiSelectList */
.sf-ms__or { margin: 8px 12px 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sf-ms .sf-q__opts + .sf-ms__or + .sf-q__opts { margin-top: 2px; }

/* AutocompleteField */
.sf-ac { display: flex; flex-direction: column; gap: 4px; padding: 16px 12px 12px; background: var(--surface); border-radius: var(--radius-20); }
.sf-ac__field { display: flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 8px; padding: 0 4px 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-12); background: var(--surface); }
.sf-ac__field--focus { border: 2px solid var(--accent); padding-left: 11px; }
.sf-ac__icon { flex: none; width: 20px; height: 20px; color: var(--ink-muted); }
.sf-ac__value { flex: 1; font-size: 16px; line-height: 22px; color: var(--ink); }
.sf-ac__value--ph { color: var(--ink-muted); }
.sf-ac__caret { display: inline-block; width: 2px; height: 20px; margin-left: 1px; vertical-align: -4px; background: var(--accent); }
.sf-ac__clear { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: none; color: var(--ink-muted); cursor: pointer; }
.sf-ac__x { width: 18px; height: 18px; }
.sf-ac__list { list-style: none; margin: 4px 0 0; padding: 4px 0; border-radius: var(--radius-12); background: var(--neutral-badge); }
.sf-ac__opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 12px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sf-ac__opt:active { background: var(--line); }
.sf-ac__pin { flex: none; width: 20px; height: 20px; color: var(--ink-muted); }
.sf-ac__text { display: flex; flex-direction: column; gap: 2px; }
.sf-ac__name { font-size: 16px; line-height: 22px; color: var(--ink); }
.sf-ac__match { font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sf-ac__region { font-size: 13px; line-height: 18px; color: var(--ink-muted); }

/* GoalsReorder */
.sf-gr { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sf-gr__row { display: flex; align-items: center; gap: 4px; min-height: 60px; padding: 8px 4px 8px 16px; background: var(--surface); border-radius: var(--radius-20); }
.sf-gr__row--lifted { position: relative; z-index: 1; margin: 0 -4px 0 8px; border: 2px solid var(--line-strong); transform: rotate(-1.2deg); }
.sf-gr__slot { height: 60px; border: 1.5px dashed var(--line-strong); border-radius: var(--radius-20); }
.sf-gr__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sf-gr__label { font-size: 16px; line-height: 22px; color: var(--ink); }
.sf-gr__cap { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sf-gr__btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: var(--radius-pill); background: none; color: var(--ink-muted); cursor: pointer; }
.sf-gr__btn--empty { cursor: default; }
.sf-gr__grip { color: var(--ink); cursor: grab; touch-action: none; }
.sf-gr__upicon, .sf-gr__gripicon { width: 20px; height: 20px; }

/* AxisScale */
.sf-ax { display: flex; flex-direction: column; gap: 6px; }
.sf-ax__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; column-gap: 12px; }
.sf-ax__name { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.sf-ax__word { font-size: 15px; line-height: 20px; font-weight: 500; color: var(--ink); }
.sf-ax__word--unsure { font-weight: 400; color: var(--ink-muted); }
.sf-ax__track { position: relative; height: 12px; border-radius: var(--radius-pill); background: var(--axis-track); }
.sf-ax__track--unsure { background: transparent; border: 1.5px dashed var(--line-strong); }
.sf-ax__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--radius-pill); }
.sf-ax--oil .sf-ax__fill { background: var(--axis-oil); }
.sf-ax--sens .sf-ax__fill { background: var(--axis-sens); }
.sf-ax--pigm .sf-ax__fill { background: var(--axis-pigm); }
.sf-ax--wrink .sf-ax__fill { background: var(--axis-wrink); }
.sf-ax--barrier .sf-ax__fill { background: var(--axis-barrier); }
.sf-ax__mark { position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--axis-mark); border: 3px solid var(--surface); box-sizing: border-box; }
.sf-ax__mark[style*="left: 0%"] { margin-left: -2px; }
.sf-ax__mark[style*="left: 100%"] { margin-left: -16px; }
.sf-ax__poles { display: flex; justify-content: space-between; font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.sf-ax__why { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }

/* PortraitPlaceholder */
.sf-portrait { flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--portrait); color: var(--ink); font-weight: 500; line-height: 1; }

/* MarkTags */
.sf-marks { display: flex; flex-direction: column; gap: 6px; }
.sf-marks__label { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.sf-marks__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sf-marks__tag { padding: 4px 10px; border-radius: var(--radius-pill); background: var(--neutral-badge); color: var(--neutral-badge-ink); font-size: 13px; line-height: 18px; }

/* DoctorBlock */
.sf-doc { display: flex; gap: 12px; padding: 16px; border-radius: var(--radius-20); background: var(--doctor-soft); color: var(--ink); }
.sf-doc__icon { flex: none; width: 22px; height: 22px; color: var(--doctor); margin-top: 1px; }
.sf-doc__body { display: flex; flex-direction: column; gap: 8px; }
.sf-doc__eyebrow { margin: 0 0 -6px; font-size: 13px; line-height: 18px; color: var(--ink); }
.sf-doc--stop .sf-doc__icon { width: 26px; height: 26px; }
.sf-doc__title { margin: 0; font-size: 18px; line-height: 24px; font-weight: 500; }
.sf-doc__marked { margin: 0; font-size: 15px; line-height: 21px; }
.sf-doc__text { margin: 0; font-size: 14px; line-height: 20px; }

/* Block heading on result screen (не полужирный: полужирный один на экран) */
.sf-blockh { margin: 0; font-size: 18px; line-height: 24px; font-weight: 500; color: var(--ink); }

/* GoalLimit */
.sf-gl { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-top: 1px solid var(--line); }
.sf-gl:first-of-type { border-top: 0; }
.sf-gl__head { display: flex; align-items: baseline; gap: 8px; }
.sf-gl__goal { font-size: 16px; line-height: 22px; color: var(--ink); }
.sf-gl__main { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sf-gl__ceil { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); }
.sf-gl__icon { width: 18px; height: 18px; color: var(--ink); }
.sf-gl__text { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }

/* FactRows */
.sf-facts { margin: 0; display: flex; flex-direction: column; }
.sf-facts__row { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--line); }
.sf-facts__row:first-child { border-top: 0; padding-top: 4px; }
.sf-facts dt { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sf-facts dd { margin: 0; font-size: 15px; line-height: 20px; color: var(--ink); }
.sf-facts__note { margin: 4px 0 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }

/* NextStep */
.sf-next { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; border-radius: var(--radius-20); background: var(--care); }
.sf-next__text { margin: 0; font-size: 15px; line-height: 21px; color: var(--ink); }
.sf-next__link { gap: 4px; }
.sf-next__link .sf-chev { color: var(--accent); }

/* LimitsNote: тихо, на фоне экрана, без карточки */
.sf-limits { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 8px 4px 0; }
.sf-limits__title { margin: 0; font-size: 16px; line-height: 22px; font-weight: 500; color: var(--ink-muted); }
.sf-limits__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sf-limits__list li { display: flex; flex-direction: column; gap: 1px; }
.sf-limits__k { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-muted); }
.sf-limits__v { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sf-limits__fine { margin: 0; font-size: 12px; line-height: 16px; color: var(--ink-muted); }

/* ================= Мой уход ================= */
.sf-vt--spf { background: var(--v-none-soft); color: var(--v-none); }

/* GoalPicks */
.sf-picks { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.sf-picks__head { display: flex; flex-direction: column; gap: 2px; padding: 8px 4px 0; }
.sf-picks__cap { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sf-picks__empty { margin: 0 4px; font-size: 15px; line-height: 21px; color: var(--ink); }
.sf-picks__list { display: flex; flex-direction: column; gap: 8px; }
.sf-picks > .sf-link { align-self: flex-start; padding: 0 4px; }

/* RoleChip, StepNumber */
.sf-role { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 12px; line-height: 16px; color: var(--ink); }
.sf-role--cleanse { background: var(--role-cleanse); }
.sf-role--active { background: var(--role-active); }
.sf-role--hydrate { background: var(--role-hydrate); }
.sf-role--protect { background: var(--role-protect); }
.sf-step { flex: none; width: 16px; font-size: 13px; line-height: 18px; color: var(--ink-muted); text-align: center; font-variant-numeric: tabular-nums; }

/* ShelfCard */
.sf-shelf { display: flex; flex-direction: column; gap: 10px; padding: 12px 8px 16px 12px; background: var(--surface); border-radius: var(--radius-20); }
.sf-shelf__top { position: relative; display: flex; align-items: center; gap: 8px; }
.sf-shelf__main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; -webkit-tap-highlight-color: transparent; }
.sf-shelf__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sf-shelf__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sf-shelf__more { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: var(--radius-pill); background: none; color: var(--ink-muted); cursor: pointer; }
.sf-shelf__moreicon { width: 20px; height: 20px; }
.sf-shelf__menu { position: absolute; z-index: 2; right: 4px; top: 46px; list-style: none; margin: 0; padding: 4px; min-width: 210px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-12); }
.sf-shelf__mi { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 15px; line-height: 20px; color: var(--ink); text-align: left; cursor: pointer; }
.sf-shelf__mi:active { background: var(--neutral-badge); }
.sf-shelf__body { display: flex; flex-direction: column; gap: 10px; padding-left: 24px; padding-right: 4px; }
.sf-shelf__body .sf-pcard__verdict { margin-top: 0; }
.sf-shelf__note { display: flex; gap: 6px; margin: 0; font-size: 14px; line-height: 20px; color: var(--ink); }
.sf-shelf__noteicon { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--doctor); }

/* RoutineGroup */
.sf-routine { display: flex; flex-direction: column; gap: 8px; }
.sf-routine .sf-group { padding: 8px 4px 0; }
.sf-routine__list { display: flex; flex-direction: column; gap: 8px; }

/* CareReview */
.sf-review { display: flex; flex-direction: column; gap: 4px; padding: 16px; background: var(--surface); border-radius: var(--radius-20); }
.sf-review .sf-picks__cap { margin-bottom: 4px; }
.sf-review__list { margin: 0; display: flex; flex-direction: column; }
.sf-review__row { display: flex; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.sf-review__row:first-child { border-top: 0; }
.sf-review__icon { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--ink-muted); }
.sf-review__icon--warn { color: var(--doctor); }
.sf-review__body { display: flex; flex-direction: column; gap: 2px; }
.sf-review__body dt { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sf-review__body dd { margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 21px; color: var(--ink); }

/* CompareTable */
.sf-cmp { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius-20); padding: 8px 16px 4px; }
.sf-cmp__heads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 8px 0 12px; }
.sf-cmp__col { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.sf-cmp__label { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.sf-cmp__name { font-size: 15px; line-height: 20px; color: var(--ink); }
.sf-cmp__row { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); }
.sf-cmp__k { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sf-cmp__same { padding: 1px 8px; border-radius: var(--radius-pill); background: var(--neutral-badge); color: var(--neutral-badge-ink); font-size: 12px; line-height: 16px; }
.sf-cmp__cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sf-cmp__cell { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; font-size: 15px; line-height: 20px; color: var(--ink); }
.sf-cmp__row--same .sf-cmp__cell { color: var(--ink-muted); }
.sf-cmp__row--same .sf-vt { opacity: 1; }
.sf-cmp__cell .sf-vt { white-space: normal; }
.sf-cmp__act { display: flex; flex-direction: column; gap: 4px; }
.sf-cmp__act .sf-pill { width: 100%; }
.sf-cmp__act .sf-link { align-self: center; }

/* AnalogHeader */
.sf-analog__now { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink); }

/* ShelfEmpty */
.sf-shempty { display: flex; flex-direction: column; gap: 12px; }
.sf-shempty__top { display: flex; align-items: center; gap: 14px; padding: 8px 4px; }
.sf-shempty__top > div { display: flex; flex-direction: column; gap: 2px; }
.sf-shempty > .sf-link { align-self: flex-start; padding: 0 4px; }
.sf-shempty__quiet { margin: 0 4px; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sf-pcard__row--one .sf-pill { flex: none; padding: 0 16px; }
.sf-shelf .sf-pcard__actions .sf-pill { min-width: 0; padding: 0 8px; }
.sf-shelf .sf-pcard__actions { gap: 6px; }
.sf-shempty__path { display: flex; gap: 12px; padding: 16px; background: var(--surface); border-radius: var(--radius-20); }
.sf-shempty__icon { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--ink-muted); }
.sf-shempty__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sf-shempty__title { margin: 0; font-size: 17px; line-height: 22px; font-weight: 500; color: var(--ink); }
.sf-shempty__text { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.sf-shempty__path .sf-ac { padding: 0; background: none; }
.sf-shempty__path .sf-ac__field { margin-top: 4px; }
.sf-shempty__btn { align-self: flex-start; flex: none; margin-top: 4px; padding: 0 20px; }

/* Частота и закрытые карточки плана */
.sf-freq { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--neutral-badge); color: var(--neutral-badge-ink); font-size: 12px; line-height: 16px; }
.sf-shelf--locked { position: relative; overflow: hidden; }
.sf-shelf__blur { display: flex; flex-direction: column; gap: 10px; filter: blur(7px); opacity: .7; pointer-events: none; user-select: none; }
.sf-lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; line-height: 20px; font-weight: 500; color: var(--ink); }
.sf-lock__icon { width: 22px; height: 22px; color: var(--ink); }
.sf-lock span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px 6px 10px; border-radius: var(--radius-pill); background: var(--surface); }
.sf-lock .sf-lock__icon { width: 18px; height: 18px; }
.sf-unlock { display: flex; gap: 12px; padding: 16px; border-radius: var(--radius-20); background: var(--surface); }
.sf-unlock > .sf-lock__icon { flex: none; margin-top: 1px; }
.sf-unlock__body { display: flex; flex-direction: column; gap: 4px; }

/* Экран оплаты */
.sf-ph { padding: 28px 0 22px; overflow: hidden; background: var(--surface); border-radius: var(--radius-20); }
.sf-ph__row { display: flex; justify-content: center; gap: 14px; }
.sf-ph__item { position: relative; display: inline-flex; animation: sf-ph-in 6s ease-out infinite both; }
.sf-ph__item .sf-photo { width: 52px; height: 52px; }
.sf-ph__check { position: absolute; right: -6px; top: -6px; display: inline-flex; animation: sf-ph-tick 6s ease-out infinite both; }
.sf-ph__tick { width: 22px; height: 22px; }
@keyframes sf-ph-in { 0% { opacity: 0; transform: translateY(8px); } 8%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes sf-ph-tick { 0%, 4% { opacity: 0; transform: scale(.4); } 10%, 88% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sf-ph__item, .sf-ph__check { animation: none; opacity: 1; transform: none; } }
.sf-planopt { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-20); background: var(--surface); font: inherit; color: var(--ink); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sf-planopt--on { border: 2px solid var(--accent); padding: 11px 15px; background: var(--accent-soft); }
.sf-planopt__body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sf-planopt__title { font-size: 16px; line-height: 22px; font-weight: 500; }
.sf-planopt__note { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sf-planopt__price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.sf-planopt__sum { font-size: 16px; line-height: 22px; font-variant-numeric: tabular-nums; }
.sf-planopt__per { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sf-planopt__badge { position: absolute; top: -11px; left: 48px; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--v-strong-soft); color: var(--v-strong); font-size: 12px; line-height: 18px; font-weight: 500; }
.sf-perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sf-perks li { display: flex; gap: 10px; font-size: 15px; line-height: 21px; color: var(--ink); }
.sf-perks__icon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--ink-muted); }

/* Раскладка экранов (из макетов) */
.stack { display: flex; flex-direction: column; gap: 8px; }
.hero { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; background: var(--surface); border-radius: var(--radius-20); }
.hero__top { display: flex; gap: 14px; align-items: center; }
.hero__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hero__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.h1 { margin: 0; font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: 0; }
.h2 { margin: 0; font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: 0; }
.p16 { margin: 0; font-size: 16px; line-height: 22px; }
.p14 { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.bleed { margin: 0 -16px; padding: 0 16px; }

/* Анкета, результат, мой уход: раскладка экранов (из макетов) */
.main--quiz { gap: 12px; padding-bottom: 104px; }
.qhero { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 8px 4px 4px; }
.qframe { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: var(--radius-pill); background: var(--neutral-badge); color: var(--neutral-badge-ink); font-size: 13px; line-height: 18px; }
.qframe svg { width: 16px; height: 16px; }
.qsec { margin: 8px 4px 0; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-muted); }
.qnote { margin: 0 4px; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips .sf-filter { font-weight: 400; font-size: 15px; }
.kid { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; padding: 24px 24px 120px; }
.kid__mark { width: 48px; height: 48px; color: var(--ink-muted); }
.rhero { gap: 16px; align-items: stretch; }
.rhero__top { display: flex; align-items: center; gap: 16px; }
.rhero__top > div { display: flex; flex-direction: column; gap: 2px; }
.axes { display: flex; flex-direction: column; gap: 14px; }
.rline { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.card { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 16px; background: var(--surface); border-radius: var(--radius-20); }
.cardhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; margin-top: -10px; }
.rhero > .sf-link { align-self: flex-start; margin-top: -8px; }
.shead { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 8px 4px 0; }
.shead__goal { font-weight: 400; gap: 4px; padding: 0 12px 0 16px; }
.shead__goal .sf-chev { color: var(--ink-muted); }
.cmpamt { display: flex; flex-direction: column; gap: 2px; }

/* ================= Настоящее приложение (не из макетов) ================= */
/* Экран нового вида: колонка с отступом 16 px между блоками */
.sf-экран { display: flex; flex-direction: column; gap: var(--space-16); }
.sf-экран.main--quiz { gap: var(--space-12); padding-bottom: 0; }
/* Поле «Откуда вы»: настоящий ввод вместо макетной строки */
.sf-ac__input { flex: 1; min-width: 0; height: 46px; padding: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 16px; line-height: 22px; outline: none; -webkit-appearance: none; appearance: none; }
.sf-ac__input::placeholder { color: var(--ink-muted); opacity: 1; }
.sf-ac__field:focus-within { border: 2px solid var(--accent); padding-left: 11px; }
label.sf-q__title { display: block; }
.sf-ac__list[hidden] { display: none; }
/* Пока открыта клавиатура, под полем есть место: поле поднимается наверх */
.sf-ввод .приложение { padding-bottom: 70vh; }
/* Свободное поле F3 и пояснения базы под вариантами */
.sf-q__free { display: flex; flex-direction: column; gap: 6px; margin: 8px 4px 0; }
.sf-q__free label { display: flex; flex-direction: column; gap: 6px; }
.sf-q__input { width: 100%; min-height: 48px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-12); background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; }
.sf-q__input:focus { outline: none; border: 2px solid var(--accent); padding: 0 11px; }
.sf-q__note { margin-top: 8px; }
.sf-q__ready { align-self: flex-end; padding: 0 12px; }
.sf-limits__more { display: flex; flex-direction: column; gap: 8px; }
.sf-limits__more[hidden] { display: none; }
/* Цели: перетаскиваемая карточка поверх списка */
.sf-gr__row--lifted { margin: 0; }
.sf-filter[disabled]:not([aria-pressed="true"]) { opacity: 1; }
/* Кнопки-заголовки вопроса: шрифт как у страницы */
.sf button { font-family: inherit; }
.sf-shelf__main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
/* Экран средства (01.10.2026): полужирная только метка вердикта */
.sf-средство .h2, .sf-средство .sf-give__title, .sf-средство .sf-wtb__title { font-weight: 500; }
.sf-store--best .sf-store__price { font-weight: 500; }
.sf-средство__имя .название-средства { margin: 0; color: var(--ink); font-size: inherit; }
.sf-средство__имя .значок-копирования { color: var(--ink-muted); min-width: 44px; min-height: 44px; margin: -10px -12px -10px 0; }
.sf-goalline { margin: 4px 0; font-size: 15px; line-height: 21px; color: var(--ink); }
.sf-warn__line { margin: 4px 0; font-size: 15px; line-height: 21px; color: var(--ink); }
.sf-warn__line--stop { color: var(--v-no); }
.sf-warn__tip { margin: 6px 0 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.sf-warn__more[hidden], .sf-panel[hidden], .sf-give[hidden] { display: none; }
.sf-wtb__date { margin: 0 8px 4px; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sf-phint { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap-min, 44px); padding: 0; border: 0; background: none; font: inherit; font-size: 14px; line-height: 20px; color: var(--accent); cursor: pointer; text-align: left; font-variant-numeric: tabular-nums; }
.sf-phint svg { width: 16px; height: 16px; flex: none; }
button.sf-store { width: 100%; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; color: inherit; }
button.sf-store.sf-store--best { background: var(--price-best); }
.sf-chip { flex-wrap: wrap; row-gap: 0; padding-top: 6px; padding-bottom: 6px; }
.sf-hero-amount { margin: 0; }
.sf-низ { display: flex; flex-direction: column; }
button.sf-pcard__main { width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
/* Прежние блоки под карточкой (похожие, отзыв) в новом виде экрана */
.sf-низ h2 { font-size: 18px; line-height: 24px; font-weight: 500; margin: 8px 0 4px; }
.sf-низ .отзыв-причины .вариант { min-height: 44px; }
.sf-низ .похожее { min-height: 56px; }
/* Экран оплаты: тарифы с отступом под ярлык, строка и ссылка по центру */
.sf-оплата__тарифы { gap: 16px; margin-top: 8px; }
.sf-оплата__строка { text-align: center; }
.sf-оплата__условия { align-self: center; margin-top: -12px; }
.sf-planopt__note + .sf-planopt__note { margin-top: 2px; }
/* Мой уход v1 (ревью 1в) */
.sf-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sf-shelf__menu[hidden] { display: none; }
.sf-shelf__main .sf-portrait { flex: none; }
.sf-shempty__path .sf-ac__list { margin-top: 8px; }
.sf-уход__пути { display: flex; flex-direction: column; gap: 4px; }
.shead__goal { min-height: 44px; }
.sf-shelf .sf-vt--wait { background: var(--neutral-badge); color: var(--ink-muted); font-weight: 400; }
.sf-ac__clear[hidden] { display: none; }
/* Экран средства, ревью 1в */
.sf-средство .hero .sf-goalline { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink); }
.sf-chip .sf-amt { color: var(--ink-muted); }
.sf-give__head { flex-wrap: wrap; }
.sf-похожие[hidden] { display: none; }
.sf-похожее { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 8px 0; border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.sf-похожее:first-of-type { border-top: 0; }
.sf-похожее__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }