/* Единая шапка cosori.ru на три раздела (Магазин / Блог / Рецепты) по
   дизайн-системе. Эталоны: ds/vitrina-air.png, vitrina-info.png,
   vitrina-blog.png, vitrina-recipes.png (десктоп), ds/header-mobile.png и
   ds/menu-mobile.png (мобайл). Замеры сняты с PNG поэлементно: ряд меню 52px,
   бургер 20×17 (линии 2px, шаг 8), CTA-пилюля 50px, волосяные разделители
   #e7e7e7, узкие карточки списков под триггером radius 16.

   Корень шапки — [data-csh] (класс корня у разделов разный: .csh у Магазина,
   .csh-blog / .csh-recipes у остальных — см. Header.astro), внутренние
   элементы .csh__*. Значения — токены tokens.css с фолбэками (шаблон Django
   получает этот файл отдельно, вместе с tokens.css).

   Высоты 100 (десктоп) / 60 (мобайл) и точка бургера 1200 общие для всех
   разделов: под них свёрстаны верхние отступы страниц морды (.ic и др.),
   блогу и рецептам отступ даёт правило [data-csh] ~ main ниже.

   Смоук-инварианты Магазина (scripts/smoke_local.mjs) сохранены: панели
   открываются переключением visibility (hidden -> visible) через [data-open]. */

[data-csh] {
  --csh-o: var(--cs-accent, #fe5834);
  --csh-o-hover: var(--cs-accent-hover, #e94b2c);
  --csh-d: var(--cs-ink, #231f20);
  --csh-muted: var(--cs-muted, #717171);
  --csh-line: var(--cs-hairline, #e7e7e7);
  --csh-h: 100px;

  position: fixed;
  inset: 0 0 auto;
  /* Выше Bootstrap .sticky-top (1020): липкая колонка рецепта рисовалась
     поверх шапки при скролле (приёмка 04.09). */
  z-index: 1030;
  background: var(--cs-bg, #fff);
  --csh-f: var(--cs-font, 'Manrope', Arial, sans-serif);
  font-family: var(--csh-f);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
[data-csh] *,
[data-csh] *::before,
[data-csh] *::after { box-sizing: border-box; }

/* Блог и рецепты: контент начинается под фиксированной шапкой. У морды свои
   отступы в слепках, поэтому правило адресное — по разделу. */
[data-csh='blog'] ~ main,
[data-csh='recipes'] ~ main { padding-top: 100px; }

/* Контейнер 1200 + поля 20 — сетка ДС (как у панелей и футера). */
.csh__bar {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1240px;
  min-height: var(--csh-h);
  margin-inline: auto;
  padding-inline: 20px;
}

/* Лого + подпись раздела («Блог» / «Рецепты» оранжевым мелко, эталон). */
.csh__logo { display: inline-flex; align-items: flex-end; gap: 6px; flex: none; }
.csh__logo-mark { display: block; line-height: 0; }
.csh__logo-mark img { display: block; width: 121px; height: auto; }
.csh__logo-sub {
  display: block;
  margin-bottom: -2px;
  font: 600 12px/1 var(--csh-f);
  color: var(--csh-o);
  text-decoration: none;
  white-space: nowrap;
}
.csh__logo-sub:hover { text-decoration: underline; }

/* Навигация одним рядом после лого (эталон: первый пункт ~56px от лого,
   между пунктами ~36px). */
.csh__nav { min-width: 0; margin-left: 52px; }
.csh__list {
  display: flex;
  align-items: center;
  gap: 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Пункт с выпадающим списком — якорь для карточки под триггером. */
.csh__item--drop { position: relative; }

.csh__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 0;
  border: 0;
  border-radius: var(--cs-r-8, 8px);
  background: none;
  font: var(--cs-t-nav, 500 16px/1.55 var(--csh-f));
  color: var(--csh-d);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.csh__link:hover,
.csh__link[aria-expanded='true'] { color: var(--csh-o); }
/* aria-current в разметке стоит (для скринридеров), но цветом текущую страницу
   не выделяем — как в эталоне ДС. */

/* Треугольник 6×6 у раскрывашек — как в эталоне (▾, вверх при открытой). */
.csh__caret {
  position: relative;
  flex: none;
  width: 6px;
  height: 6px;
  margin-left: -1px;
}
.csh__caret::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1px;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4.5px solid currentColor;
}
.csh__link[aria-expanded='true'] .csh__caret::before {
  border-top: 0;
  border-bottom: 4.5px solid currentColor;
}

/* ------------------------------------------------- правая группа --
   Иконки 44×44 (поле нажатия ДС), CTA-пилюля. */
.csh__tools {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
  margin-left: auto;
}
.csh__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--csh-d);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.csh__icon:hover,
.csh__icon[aria-expanded='true'] { color: var(--csh-o); background: var(--cs-surface, #f6f6f6); }
.csh__icon svg { display: block; }
/* Тумблер темы — неброско: приглушённый, меньше иконка. */
.csh__icon--theme { color: var(--csh-muted); }
.csh__icon--theme .csh__ic-moon { display: none; }
/* Блог, тёмная тема: шапка на поверхности блога, а не белая полоса
   (приёмка 04.09: у прежней шапки блога фон в dark = rgb(33,29,23)). */
:root[data-theme='dark'] .csh-blog {
  --cs-bg: var(--color-surface-default, #211d17);
  --csh-d: var(--color-text-primary, #f3efe8);
  --csh-muted: var(--color-neutral-600, #b8b0a3);
  --csh-line: rgba(255, 255, 255, .08);
}
:root[data-theme='dark'] .csh__icon--theme .csh__ic-sun { display: none; }
:root[data-theme='dark'] .csh__icon--theme .csh__ic-moon { display: block; }

/* CTA-пилюля: белая, тонкая оранжевая рамка, оранжевый текст; на hover
   заливается акцентом (эталон). */
.csh__buy {
  display: inline-flex;
  align-items: center;
  flex: none;
  margin-left: 12px;
  height: 50px;
  padding: 0 28px;
  border: 1.5px solid var(--csh-o);
  border-radius: var(--cs-r-pill, 999px);
  background: var(--cs-bg, #fff);
  color: var(--csh-o);
  font: var(--cs-t-nav-strong, 600 16px/1.2 var(--csh-f));
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.csh__buy:hover { background: var(--csh-o); color: #fff; }

/* ------------------------------------------------------- панели меню --
   Открытие — [data-open] (JS), visibility переключается отложенно на конец
   анимации закрытия (на этом стоит smoke_local). */
.csh__panel {
  position: absolute;
  top: 8px;
  left: 0;
  background: var(--cs-bg, #fff);
  border-radius: var(--cs-r-32, 32px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06), 0 32px 72px rgba(0, 0, 0, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.16s, transform 0.16s, visibility 0s 0.16s;
}
.csh__panel[data-open] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.16s, transform 0.16s, visibility 0s;
}

/* Мега-меню Магазина: прибито к сетке 1200 (эталон vitrina-air — панель
   во всю сетку). */
.csh__panels {
  position: absolute;
  top: var(--csh-h);
  left: 0;
  right: 0;
  padding-inline: 20px;
}
.csh__panels-in {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
}
.csh__panel--mega { width: 100%; }

/* Узкая карточка списка — ровно под своим триггером (эталоны vitrina-info,
   vitrina-blog): левый край карточки на левом краю пункта, верх — на нижней
   кромке полосы шапки. */
.csh__panel--list {
  /* Пункт (≈45px) стоит по центру полосы 100px: до её нижней кромки ≈28px,
     плюс тот же зазор 8px, что у мега-меню. */
  top: calc(100% + 35px);
  left: -16px;
  width: max-content;
  min-width: 230px;
  max-width: 320px;
  border-radius: var(--cs-r-16, 16px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06), 0 24px 56px rgba(0, 0, 0, 0.14);
  z-index: 2;
}
/* Мостик над карточкой: зазор 35px между пунктом и списком был «ничьей
   землёй» — при медленном ведении мыши срабатывал mouseleave шапки и меню
   пропадало до выбора пункта (Founder 04.09). Прозрачная зона — часть
   карточки, указатель не покидает шапку. Без фона и тени (утренняя «белая
   плашка» — тень карточки случайно уехала сюда). */
.csh__panel--list::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 36px;
  background: transparent;
  box-shadow: none;
}

/* ------------------------------------------------------- Аэрогрили --
   Сетка: карточки моделей слева, справа колонка 327 (сравнение + промо). */

.csh__mega {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 327px;
  column-gap: 48px;
  padding: 40px 48px 48px;
}

.csh__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  column-gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.csh__card { position: relative; height: 92px; }
.csh__card::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--csh-line);
}
.csh__card-l {
  position: absolute;
  inset: 0 0 1px;
  padding: 21px 0 0 2px;
  font: 500 16px/22.4px var(--csh-f);
  color: var(--csh-d);
  text-decoration: none;
}
.csh__card-l:hover { color: var(--csh-o); }

.csh__badge {
  display: inline-block;
  position: relative;
  top: -1px;
  vertical-align: top;
  height: 22px;
  margin-left: 7px;
  padding: 0 8px;
  border-radius: var(--cs-r-pill, 999px);
  background: var(--csh-o);
  color: #fff;
  font: 500 14px/22px var(--csh-f);
}

.csh__thumbs {
  position: absolute;
  top: 18px;
  right: 4px;
  display: flex;
  gap: 6px;
}
.csh__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background: var(--cs-surface, #f6f6f6);
}
.csh__thumb img { display: block; }

.csh__mega-side { padding-top: 8px; }
.csh__mega-side--aks { padding-top: 0; }

.csh__cmp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 64px;
  border: 1.5px solid var(--csh-o);
  border-radius: var(--cs-r-pill, 999px);
  background: var(--cs-bg, #fff);
  color: var(--csh-o);
  font: 600 16px/1.2 var(--csh-f);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.csh__cmp-ic {
  flex: none;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url(/assets/static/tild3939-6236-4166-b633-363530366536/red.svg) center / contain no-repeat;
  mask: url(/assets/static/tild3939-6236-4166-b633-363530366536/red.svg) center / contain no-repeat;
}
.csh__cmp:hover { background: var(--csh-o); color: #fff; }

/* Промо-плитка: плоский оранжевый тайл radius 20 с водяным знаком «%»
   (эталон). Разметка прежняя (три картинки — их число держит смоук):
   фон-картинка (однотонный оранжевый) тянется на всю плитку, светлая
   фото-панель старого дизайна скрыта, «%» обесцвечен в полупрозрачный
   белый и обрезан скруглением. */
.csh__promo {
  position: relative;
  height: 126px;
  border-radius: var(--cs-r-20, 20px);
  background: var(--csh-o);
  overflow: hidden;
}
.csh__cmp + .csh__promo { margin-top: 24px; }
.csh__promo img { position: absolute; display: block; }
.csh__promo-bg { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.csh__promo img.csh__promo-panel { display: none; }
.csh__promo-pct {
  left: auto;
  right: -14px;
  top: 8px;
  width: 106px;
  height: 141px;
  filter: grayscale(1) brightness(12);
  opacity: 0.3;
}
.csh__promo-t {
  position: absolute;
  left: 24px;
  top: 20px;
  width: 190px;
  font: 600 18px/21.6px var(--csh-f);
  color: #fff;
}
.csh__promo-b {
  position: absolute;
  left: 24px;
  top: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 36px;
  border-radius: var(--cs-r-pill, 999px);
  background: #fff;
  color: var(--csh-o);
  font: 600 14px/21px var(--csh-f);
  text-decoration: none;
}
.csh__promo-b:hover { background: var(--cs-accent-soft, #fff5f2); }

/* ------------------------------------------------------ Аксессуары -- */

.csh__aks {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 327px;
  column-gap: 48px;
  padding: 40px 48px 44px;
}
.csh__aks-h {
  margin: 0;
  font: 500 18px/24px var(--csh-f);
  color: var(--csh-d);
}
.csh__aks-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 16px;
  margin-top: 24px;
}
.csh__aks-b {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  border: 1.5px solid var(--csh-line);
  border-radius: var(--cs-r-20, 20px);
  background: var(--cs-bg, #fff);
  color: var(--csh-o);
  font: 600 28px/1.3 var(--csh-f);
  text-decoration: none;
  transition: border-color 0.15s;
}
.csh__aks-b:hover { border-color: var(--csh-o); }
.csh__aks-n {
  margin: 0;
  font: 400 14px/19.6px var(--csh-f);
  color: var(--csh-muted);
}

/* ------------------------------------------------- списки в карточках --
   «Инфо», «Все статьи», меню аккаунта: строки 50px, волосяные разделители
   с отступом 16 по краям (эталон). */

.csh__info {
  margin: 0;
  padding: 6px 0 8px;
  list-style: none;
}
.csh__info li + li { position: relative; }
.csh__info li + li::before {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  top: 0;
  height: 1px;
  background: var(--csh-line);
}
.csh__info a,
.csh__info button {
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  padding: 0 16px;
  border: 0;
  background: none;
  font: 500 16px/22px var(--csh-f);
  color: var(--csh-d);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.csh__info a:hover,
.csh__info button:hover { color: var(--csh-o); }
.csh__info form { margin: 0; }

/* Меню аккаунта (рецепты, вошедший): карточка под иконкой, правым краем
   по правому краю иконки (эталон vitrina-recipes). */
.csh__account { position: relative; }
.csh__account .csh__panel--list { left: auto; right: 0; }

/* ------------------------------------------------------------- бургер --
   Иконка по эталону header-mobile.png: 20×17, линии 2px, шаг 8. */

.csh__burger {
  display: none;
  padding: 12px;
  border: 0;
  background: none;
  cursor: pointer;
}
.csh__burger-ic { display: block; width: 20px; height: 17px; position: relative; }
.csh__burger-ic i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--csh-d);
  border-radius: 1px;
  transition: transform 0.2s, opacity 0.2s;
}
.csh__burger-ic i:nth-child(1) { top: 0; }
.csh__burger-ic i:nth-child(2) { top: 7.5px; }
.csh__burger-ic i:nth-child(3) { top: 15px; }
.csh__burger[aria-expanded='true'] i:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.csh__burger[aria-expanded='true'] i:nth-child(2) { opacity: 0; }
.csh__burger[aria-expanded='true'] i:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* --------------------------------------------------------- мобильное --
   Эталон ds/menu-mobile.png: строки 52px c волосяными разделителями,
   тонкие шевроны, подпункты с объёмом справа, «Все …» акцентом,
   CTA-пилюля 50px во всю ширину. */

.csh__mob {
  position: fixed;
  inset: var(--csh-h) 0 0;
  z-index: 1029;
  overflow-y: auto;
  background: var(--cs-bg, #fff);
  -webkit-overflow-scrolling: touch;
}
.csh__mob[hidden] { display: none; }
.csh__mob-inner { padding: 8px 16px 32px; }
.csh__mob-list { margin: 0; padding: 0; list-style: none; }
.csh__mob-list > li { border-bottom: 1px solid var(--csh-line); }

.csh__mob-row,
.csh__acc > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 14px 4px;
  font: var(--cs-t-menu-row, 600 17px/1.2 var(--csh-f));
  color: var(--csh-d);
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}
.csh__acc > summary::-webkit-details-marker { display: none; }
.csh__mob-row[aria-current='page'] { color: var(--csh-o); }
/* Раскрытый раздел в эталоне остаётся тёмным (меняется только шеврон). */
.csh__acc[open] > summary { color: var(--csh-d); }

/* В мобильном меню каретка — тонкий шеврон (эталон), а не треугольник. */
.csh__mob .csh__caret {
  width: 14px;
  height: 14px;
  margin: 0 4px 0 0;
}
.csh__mob .csh__caret::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 2px;
  width: 9px;
  height: 9px;
  border: 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s;
}
.csh__acc[open] > summary .csh__caret::before {
  border: 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  top: 6px;
  transform: rotate(-135deg);
}

.csh__acc ul { margin: 0 0 12px; padding: 0; list-style: none; }
.csh__acc a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 4px 11px 16px;
  font: var(--cs-t-menu-sub, 500 16px/1.3 var(--csh-f));
  color: var(--csh-d);
  text-decoration: none;
}
.csh__acc a[aria-current='page'] { color: var(--csh-o); }
/* «Все аэрогрили / Все аксессуары» — акцентом (эталон). */
.csh__acc a.csh__all { color: var(--csh-o); font-weight: 600; }
.csh__size { color: var(--csh-muted); font-size: 14px; white-space: nowrap; }

.csh__cta {
  display: block;
  margin-top: 24px;
  padding: 15px 20px;
  border-radius: var(--cs-r-pill, 999px);
  background: var(--csh-o);
  /* Лейбл белый — по эталону menu-mobile.png (пипетка: заливка #fe5834,
     текст #fff). */
  color: #fff;
  font: 600 17px/1.2 var(--csh-f);
  text-align: center;
  text-decoration: none;
}
.csh__cta:hover { background: var(--csh-o-hover); }

/* Фон под открытым меню/поиском не прокручиваем; кнопка «наверх» блога
   под ними не нужна. */
html.csh-lock, html.csh-lock body { overflow: hidden; }
/* Блокировка прокрутки убирает полосу скролла, и вьюпорт расширяется на её
   ширину — центрированная шапка и карточка поиска «дёргались» (Founder 05.09).
   Скрипт шапки пишет ширину полосы в --csh-sbw; компенсируем её справа и у
   документа, и у фиксированных слоёв (они на padding html не реагируют). */
html.csh-lock { padding-right: var(--csh-sbw, 0px); }
html.csh-lock [data-csh], html.csh-lock .csh__search, html.csh-lock .csh__mob { padding-right: var(--csh-sbw, 0px); }
html.csh-lock .cs-top { display: none; }

/* ------------------------------------------------------ поиск (оверлей) --
   Под шапкой затемнение, сверху белая карточка с полем Pagefind.
   Стили результатов Pagefind — через его CSS-переменные на .cs-search. */
.csh__search {
  position: fixed;
  inset: var(--csh-h) 0 0;
  z-index: 1029;
  padding: 24px 16px;
  background: rgba(35, 31, 32, 0.48);
  overflow-y: auto;
}
.csh__search[hidden] { display: none; }
.csh__search-card {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 20px 24px 24px;
  border-radius: var(--cs-r-20, 20px);
  background: var(--cs-bg, #fff);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2);
}
.csh__search-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.csh__search-title { font: var(--cs-t-title-m, 600 20px/1.3 var(--csh-f)); color: var(--csh-d); }
.csh__search-hint { margin: 12px 0 0; font: var(--cs-t-body-s, 400 14px/1.4 var(--csh-f)); color: var(--csh-muted); }
.csh__search .cs-search {
  --pagefind-ui-primary: var(--csh-o);
  --pagefind-ui-text: var(--csh-d);
  --pagefind-ui-background: var(--cs-bg, #fff);
  --pagefind-ui-border: var(--cs-line, #d9d9d9);
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: 12px;
  --pagefind-ui-font: var(--csh-f);
  --pagefind-ui-scale: 0.9;
}
/* Pagefind UI в нашем стиле (Founder 04.09, второй круг). Только переопределение
   его классов/переменных, библиотека не патчится. Селекторы с запасом
   специфичности: CSS Pagefind подгружается ПОСЛЕ инлайна шапки и его
   svelte-классы дают (0,3,0). */
.csh__search .csh__search-card .cs-search .pagefind-ui__search-input {
  font: 500 18px/1.3 var(--csh-f);
  color: var(--csh-d);
  border: 1px solid var(--cs-line, #d9d9d9);
  transition: border-color 0.15s;
}
.csh__search .csh__search-card .cs-search .pagefind-ui__search-input::placeholder { color: var(--csh-muted); }
/* Без общей акцентной обводки шапки: у поля вместо неё тонкая рамка. */
[data-csh] .csh__search .csh__search-card .cs-search .pagefind-ui__search-input:focus,
[data-csh] .csh__search .csh__search-card .cs-search .pagefind-ui__search-input:focus-visible {
  outline: none;
  border-color: var(--cs-line, #d9d9d9);
  border-radius: 12px;
  /* Фокус — мягким ореолом акцентного тона, а не цветной обводкой. */
  box-shadow: 0 0 0 3px var(--cs-accent-soft, #fff5f2);
}
.csh__search .csh__search-card .cs-search .pagefind-ui__search-clear {
  color: var(--csh-muted);
  font: 500 13px/1 var(--csh-f);
  border: 0;
  background: none;
}
.csh__search .csh__search-card .cs-search .pagefind-ui__search-clear:hover { color: var(--csh-d); }
/* «N результатов по запросу: …» — тонкой серой строкой, без подложки. */
.csh__search .csh__search-card .cs-search .pagefind-ui__message {
  height: auto;
  padding: 16px 0 4px;
  border-radius: 0;
  background: none;
  font: var(--cs-t-body-s, 400 14px/1.4 var(--csh-f));
  color: var(--csh-muted);
}
.csh__search .csh__search-card .cs-search .pagefind-ui__results-area { margin-top: 4px; }
.csh__search .csh__search-card .cs-search .pagefind-ui__result {
  padding: 18px 0 20px;
  border-top: 1px solid var(--cs-line, #d9d9d9);
}
.csh__search .csh__search-card .cs-search .pagefind-ui__result:last-of-type { border-bottom: 0; }
.csh__search .csh__search-card .cs-search .pagefind-ui__result-inner { margin-top: 0; }
.csh__search .csh__search-card .cs-search .pagefind-ui__result-title {
  font: 600 18px/1.3 var(--csh-f);
  color: var(--csh-d);
}
.csh__search .csh__search-card .cs-search .pagefind-ui__result-link { color: var(--csh-d); }
.csh__search .csh__search-card .cs-search .pagefind-ui__result-link:hover { color: var(--csh-o); text-decoration: none; }
.csh__search .csh__search-card .cs-search .pagefind-ui__result-excerpt {
  margin-top: 6px;
  font: 400 15px/1.5 var(--csh-f);
  color: var(--cs-ink-2, #4a4f53);
}
/* Совпадения — мягким оранжевым фоном, не жёлтым маркером браузера. */
.csh__search .csh__search-card .cs-search .pagefind-ui__result-excerpt mark,
.csh__search .csh__search-card .cs-search .pagefind-ui__result-title mark {
  padding: 0 2px;
  border-radius: 3px;
  background: var(--cs-accent-soft, #fff5f2);
  color: var(--csh-o);
}
.csh__search .csh__search-card .cs-search .pagefind-ui__button {
  border: 1.5px solid var(--csh-o);
  border-radius: var(--cs-r-pill, 999px);
  background: var(--cs-bg, #fff);
  color: var(--csh-o);
  font: 600 15px/1.2 var(--csh-f);
}
.csh__search .csh__search-card .cs-search .pagefind-ui__button:hover { background: var(--csh-o); color: #fff; }

/* ------------------------------------------------------------ адаптив --
   Точка бургера 1200 и высоты 100/60 общие (правило Founder 31.08: видов
   два — мобильный и десктопный, граница = бургер). */

@media screen and (max-width: 1279px) {
  .csh__nav { margin-left: 36px; }
  .csh__list { gap: 26px; }
  .csh__mega, .csh__aks { column-gap: 24px; padding: 32px 32px 40px; }
}

/* ---------------------------------------------------- ниже 1200: бургер --
   Эталон ds/header-mobile.png: полоса 60px, лого слева на 16, справа —
   иконки (поиск/аккаунт/тема, 44×44) и бургер; CTA уходит в меню. */

@media screen and (max-width: 1199px) {
  [data-csh] {
    --csh-h: 60px;
    border-bottom: 1px solid var(--cs-line, #d9d9d9);
    overflow-x: hidden;  /* для Safari < 16: clip там ещё не понимают */
    overflow-x: clip;
  }
  [data-csh='blog'] ~ main,
  [data-csh='recipes'] ~ main { padding-top: 60px; }
  .csh__nav, .csh__panels, .csh__buy { display: none; }
  .csh__bar {
    padding: 0 8px 0 16px;
    min-height: var(--csh-h);
    gap: 0;
  }
  .csh__logo-mark img { width: 119px; }
  .csh__tools { gap: 0; margin-left: auto; }
  .csh__icon { width: 44px; height: 44px; }
  .csh__burger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    margin-left: 0;
  }
  .csh__search { padding: 16px 12px; }
  .csh__search-card { padding: 16px 16px 20px; }
  /* Меню аккаунта (рецепты) под иконкой 44px в полосе 60: карточка от нижней кромки полосы. */
  .csh__account .csh__panel--list { top: calc(100% + 16px); right: -8px; }
}

/* Клавиатурный фокус виден всегда — обводка акцентом. */
[data-csh] :focus-visible {
  outline: 2px solid var(--csh-o);
  outline-offset: 2px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .csh__panel, .csh__burger-ic i, .csh__buy, .csh__cmp, .csh__aks-b, .csh__icon { transition: none; }
}

/* Переход из оверлея поиска в каталог рецептов (карточка 011, п. 3) */
.csh__search-catalog { display: inline-block; margin: 10px 0 2px; color: var(--cs-accent, #fe5834); font-weight: 600; font-size: 14px; text-decoration: none; }
.csh__search-catalog:hover { text-decoration: underline; }