/* Календарь скидок магазина — публичная страница для встраивания в витрину КИТ.
 *
 * Один файл, mobile-first, СВЕТЛАЯ схема без вариантов: макет Claude Design
 * «Календарь скидок» (версия 2) нарисован под белую витрину, тёмной темы у него
 * нет. Поэтому здесь нет ни одного prefers-color-scheme и ни одного
 * [data-theme] — раньше они были и давали тёмную карточку посреди белой
 * страницы КИТ.
 *
 * Три слоя фона — это и есть каркас макета v2:
 *   страница (#ededed на web) → серая обёртка #f5f7fa с рамкой → БЕЛАЯ КАРТОЧКА
 *   КАЖДОГО МЕСЯЦА → белые ячейки с собственной тенью.
 * На телефоне обёртки и карточки месяца нет вовсе: фон страницы #f5f7fa, ячейки
 * лежат на нём напрямую.
 *
 * Раскладок ДВЕ, и переключает их только ширина:
 *   • <768px  — артборд «Телефон 390»: синяя шапка (её видит только отдельная
 *               страница), навбар месяца, ОДНА строка дней-плашек, дорожка
 *               месяцев на transform:translateX (свайп ведёт JS), точки-
 *               индикаторы. Ячейка 72px, всегда 6 строк;
 *   • >=768px — артборд «Веб 1280»: серая обёртка с шапкой (H1 + диапазон +
 *               «Сегодня» + стрелки) и ДВА месяца рядом, каждый — своя белая
 *               карточка с центрированным заголовком и своей строкой дней.
 *               Ячейка 100px.
 * Легенды в v2 нет ни на одном ярусе: цвета читаются из самих ячеек.
 *
 * Третий ярус — не раскладка, а БЮДЖЕТ: [data-embed="1"] это тот же web, но
 * внутри карточки витрины КИТ высотой 520px. Там всё сжато до размеров, при
 * которых худший случай (сетка всегда 42 ячейки = 6 строк, две карточки,
 * шапка, строка дней недели) укладывается в 520px на любой ширине iframe.
 * Молчаливого внутреннего скролла в embed быть не должно.
 *
 * Сетка ВСЕГДА 42 ячейки (6 строк): хвосты соседних месяцев рисуются blank-
 * ячейками с тусклыми датами. Высота дорожки на телефоне поэтому константа и
 * считается из --mhc-cell-h, а не измеряется в JS.
 *
 * Семейство классов одно — .mhc-*.
 */

/* ═══ Токены ══════════════════════════════════════════════════════════════
   Цвета — дословно из макета. Размеры ниже задают мобильный артборд; web и
   embed переопределяют ТОЛЬКО размерные токены (и несколько структурных
   правил, которые токеном не выразить). */

:root {
  color-scheme: light;

  --mhc-page: #f5f7fa;
  --mhc-card: #ffffff;
  --mhc-ink: #1a1a1a;
  --mhc-ink-2: #4d4d4d;
  --mhc-ink-3: #7a8699;
  --mhc-line: #e8e8ec;

  /* Обычная ячейка в v2 — БЕЛАЯ с тенью, а не серая плашка. */
  --mhc-cell-bg: #ffffff;
  --mhc-cell-bg-on: #fafbfc;
  --mhc-cell-bg-act: #f4f6f8;
  --mhc-cell-head: #e9edf3;
  --mhc-blank-bg: #fbfcfd;
  --mhc-blank-ink: #c6cbd4;

  /* Плашки дней недели: будни и выходные. */
  --mhc-wd-bg: #e8ecf2;
  --mhc-wd-ink: #7a8699;
  --mhc-we-bg: #fce9e9;
  --mhc-we-ink: #d4161d;

  --mhc-red: #ed1c24;
  --mhc-red-on: #d4161d;
  --mhc-soft: #f5504a;
  --mhc-soft-on: #ee443e;
  /* Завоз и добавление в v2 — ОДИН цвет: различает их только подпись. */
  --mhc-arr: #1a6fe0;
  --mhc-arr-on: #005baa;
  /* Синий интерфейса: пульс «сегодня», точки, бейдж «не опубликован». */
  --mhc-blue: #005baa;
  --mhc-yellow: #ffe600;

  /* Подложка шапки-даты и единица измерения на цветной ячейке. */
  --mhc-on-dark: rgba(0, 0, 0, 0.16);
  --mhc-on-dark-2: rgba(255, 255, 255, 0.85);

  --mhc-shadow-pop: 0 6px 18px rgba(15, 17, 21, 0.1);

  --mhc-font: "Segoe UI", "Open Sans", Arimo, Arial, system-ui, sans-serif;

  /* ─── Размеры: артборд «Телефон 390» ─────────────────────────────────── */
  --mhc-card-pad: 0;
  --mhc-card-radius: 0;
  --mhc-shell-bg: transparent;
  --mhc-shell-border: 0 none;
  --mhc-side: 12px;

  /* Карточки месяца на телефоне нет — слайд отдаёт ячейки прямо на фон. */
  --mhc-month-bg: transparent;
  --mhc-month-radius: 0;
  --mhc-month-pad: 0 var(--mhc-side);

  --mhc-radius: 9px;
  --mhc-gap: 4px;
  --mhc-cell-h: 72px;
  --mhc-cell-pad: 4px 3px;
  /* Тень белой ячейки. Токеном, а не правилом: её же подставляет выбранный
     день, чтобы чёрное кольцо не «утапливало» карточку. Прозрачная тень вместо
     none — иначе цветная ячейка ломала бы список теней у .is-sel. */
  --mhc-elev: 0 1px 2px rgba(15, 17, 21, 0.12), 0 2px 5px rgba(15, 17, 21, 0.06);
  --mhc-elev-off: 0 0 0 0 rgba(0, 0, 0, 0);

  /* Шапка-дата: полоса-оверлей поверх ячейки и число в её левом углу. */
  --mhc-head-h: 17px;
  --mhc-day-fz: 10.5px;
  --mhc-day-top: 3px;
  --mhc-day-left: 6px;
  --mhc-blank-fz: 10.5px;

  --mhc-narrow-fz: 25px;
  --mhc-wide-fz: 21px;
  --mhc-num-ls: -0.045em;
  /* Доля кегля числа, а не абсолютный размер: число вправе ужаться под ширину
     ячейки, и «%»/«₽» обязаны ужаться вместе с ним. Доли — ровно отношения
     макета: телефон 18/25 и 13/21, web (ниже) 30/42 и 21/36. */
  --mhc-unit-narrow: 0.72em;
  --mhc-unit-wide: 0.619em;
  /* Делители строк «30%» и «499₽» (см. .mhc-num--narrow/--wide). Замер живым
     Chromium в стеке страницы: «30%» — 1.720em на телефоне и 1.744em на web,
     «499₽» — 1.922em и 1.942em; делители на 2% больше — запас на метрики
     чужого шрифта. */
  --mhc-k-narrow: 1.76;
  --mhc-k-wide: 1.96;
  /* Синтетическое значение размытого месяца мельче настоящего (макет). */
  --mhc-ghost-fz: 21px;
  /* Ширина карточки: 100vw минус известные отступы яруса. Отсюда считается
     ширина колонки месяца, а из неё — сколько пикселей остаётся тексту в
     ячейке (--mhc-fit). Полоса прокрутки входит в 100vw, но делится на семь
     (а на web — на четырнадцать) колонок: ошибка меньше пикселя. */
  --mhc-cardw: 100vw;

  --mhc-word-fz: 11px;
  --mhc-word-mt: 5px;
  --mhc-free-fz: 9px;
  /* Сколько строк свободного текста влезает в ячейку фиксированной высоты. */
  --mhc-free-lines: 4;

  --mhc-badge-fz: 7px;
  --mhc-badge-lh: 1.1;
  --mhc-badge-pad: 1px 2px;
  --mhc-badge-radius: 4px;
  --mhc-badge-inset-x: 3px;
  --mhc-badge-inset-b: 3px;
  /* Сколько ширины съедают собственные поля плашки: на 320px-экране разница
     между 4px и 6px — это 7px кегля против 6.6px. */
  --mhc-badge-fit: 4px;
  /* Ниже этого кегля плашку не ужимаем — вместо этого пускаем текст на вторую
     строку (см. .mhc-badge). */
  --mhc-badge-min: 7px;

  --mhc-wd-h: 26px;
  --mhc-wd-r: 7px;
  --mhc-wd-fz: 11.5px;
  --mhc-wd-ls: 0.04em;

  /* Внешнее кольцо пульса «сегодня» уходит на 9px ЗА ячейку. На телефоне окно
     дорожки обрезает всё, что вылезло, — столько ему и нужно полей. На web
     дорожка ничего не обрезает, и место кольцу даёт padding карточки месяца. */
  --mhc-ring: 9px;
}

/* ═══ Каркас страницы ═════════════════════════════════════════════════════ */

/* html/body прозрачны безусловно: в iframe витрины КИТ любой собственный фон
   страницы виден как плашка. Свой фон отдельная страница красит ниже. */
html,
body {
  margin: 0;
  padding: 0;
  background: transparent;
}

body {
  font-family: var(--mhc-font);
  color: var(--mhc-ink);
  -webkit-text-size-adjust: 100%;
}

:root:not([data-embed="1"]) body {
  background: var(--mhc-page);
}

* {
  -webkit-tap-highlight-color: transparent;
}

/* flow-root — чтобы внешние отступы карточки входили в высоту body: её
   измеряет postMessage высоты для родителя. */
.mhc-app {
  display: flow-root;
  min-height: 100%;
}

/* Спрятано от глаз, но прочитано скринридером. Носят этот класс двое:
   заголовок документа (на телефоне его роль играет синяя шапка, на web — H1
   внутри карточки, оба aria-hidden, чтобы заголовок не читался дважды) и
   строка статуса, когда она работает live-регионом смены месяца (см.
   announce). Второму этот класс ЗАМЕНЯЕТ .mhc-status целиком, а не дополняет
   его: у .mhc-status ниже есть ярусные поля (40px на web, 24px в витрине), они
   объявлены позже и перебили бы любой сброс — спрятанная строка добавляла
   странице 49 невидимых пикселей и заводила в витрине КИТ скролл в никуда. */
.mhc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.mhc-status {
  margin: 0;
  padding: 22px 16px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--mhc-ink-2);
}

.mhc-status[hidden] {
  display: none;
}

/* ═══ Обёртка ═════════════════════════════════════════════════════════════ */

.mhc-card {
  background: var(--mhc-shell-bg);
  border: var(--mhc-shell-border);
  border-radius: var(--mhc-card-radius);
  padding: var(--mhc-card-pad);
}

/* Синяя шапка мобильного артборда. В embed её нет: заголовок даёт карточка
   витрины КИТ, вторая полоса выглядела бы вставленным чужим блоком. */
.mhc-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  background: var(--mhc-blue);
  color: #ffffff;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

:root[data-embed="1"] .mhc-bar {
  display: none;
}

/* Навбар месяца (телефон): стрелка — название — стрелка. Разделительной линии
   под ним в v2 нет. */
.mhc-mnav {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 8px 4px;
}

.mhc-mnav__title {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.06em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mhc-mnav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--mhc-ink);
  cursor: pointer;
}

.mhc-mnav__btn:active {
  background: var(--mhc-wd-bg);
}

.mhc-mnav__btn[disabled] {
  opacity: 0.35;
  cursor: default;
}

.mhc-ic {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

/* Шапка web-артборда. На телефоне не нужна вовсе. */
.mhc-head {
  display: none;
}

/* ═══ Дни недели ══════════════════════════════════════════════════════════
   В v2 это ПЛАШКИ, а не голые подписи: будни на светло-серой, суббота и
   воскресенье на розовой. Цвет выходных ставит порядок ячейки, а не класс из
   скрипта: строка всегда ПН…ВС, шестая и седьмая — выходные. */

.mhc-wd {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--mhc-gap);
}

.mhc-wd > span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--mhc-wd-h);
  border-radius: var(--mhc-wd-r);
  background: var(--mhc-wd-bg);
  color: var(--mhc-wd-ink);
  font-size: var(--mhc-wd-fz);
  font-weight: 800;
  letter-spacing: var(--mhc-wd-ls);
}

.mhc-wd > span:nth-child(n + 6) {
  background: var(--mhc-we-bg);
  color: var(--mhc-we-ink);
}

/* Мобильная строка дней недели общая на все месяцы — она над дорожкой. */
.mhc-wd--mob {
  padding: 4px var(--mhc-side) 8px;
}

/* Строка дней недели web-артборда живёт ВНУТРИ карточки месяца: на телефоне
   её роль играет одна общая строка выше. */
.mhc-wd--top {
  display: none;
}

/* ═══ Дорожка месяцев ═════════════════════════════════════════════════════
   Одна разметка на оба режима. Телефон: окно фиксированной высоты, лента
   слайдов едет transform'ом (его ставит JS). Web: та же лента — обычный ряд из
   двух колонок, трансформ снят каскадом.

   Вертикальные поля дорожки — не воздух, а место для ВНЕШНЕГО кольца пульса
   «сегодня»: оно уходит на 9px за ячейку, а окно на телефоне обрезает всё, что
   вылезло. Без полей кольцо у первой и последней строки срезалось бы. */

.mhc-viewport {
  overflow: hidden;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  padding: var(--mhc-ring) 0;
  box-sizing: border-box;
  /* Сетка всегда 42 ячейки = 6 строк: высота дорожки — константа. */
  height: calc(var(--mhc-cell-h) * 6 + var(--mhc-gap) * 5 + var(--mhc-ring) * 2);
}

.mhc-viewport:focus-visible {
  outline: 2px solid var(--mhc-blue);
  outline-offset: 2px;
}

/* Ширина колонки месяца и остаток под текст ячейки объявлены на ЛЕНТЕ, а не
   на :root: одиночный месяц шире парного, а подстановка var() случается на том
   же элементе, где объявлено — с :root правило [data-cols] уже ничего не
   изменило бы. Из --mhc-fit считаются кегли числа и подписей: без этого
   «1499₽» и «90%» на узкой колонке обрезались по краю ячейки. */
.mhc-strip {
  display: flex;
  align-items: flex-start;
  will-change: transform;
  --mhc-colw: var(--mhc-cardw);
  /* 24px — поля слайда, 24px — шесть зазоров сетки, 6px — поля числа. */
  --mhc-fit: calc((var(--mhc-colw) - 48px) / 7 - 6px);
}

.mhc-slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  padding: var(--mhc-month-pad);
  background: var(--mhc-month-bg);
  border-radius: var(--mhc-month-radius);
  box-sizing: border-box;
}

/* Заголовок месяца с бейджем состояния — только web-артборд. */
.mhc-mhead {
  display: none;
}

.mhc-gridwrap {
  position: relative;
}

.mhc-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--mhc-gap);
  align-content: start;
}

/* Месяц без данных и неопубликованный месяц кликать не по чему. */
.mhc-grid--flat {
  pointer-events: none;
}

/* ═══ Ячейка ══════════════════════════════════════════════════════════════
   Высота ФИКСИРОВАНА на всех ярусах: дорожка на телефоне ростом ровно в шесть
   строк, витрина живёт в бюджете 520px, а на web ровные ряды — часть макета.
   Подпись из админки не имеет права раздуть ни одну из трёх раскладок, поэтому
   свободный текст режется по строкам (см. .mhc-free). */

.mhc-slot {
  position: relative;
  min-width: 0;
}

.mhc-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--mhc-cell-h);
  margin: 0;
  padding: var(--mhc-cell-pad);
  border: 0;
  border-radius: var(--mhc-radius);
  background: var(--mhc-cell-bg);
  box-shadow: var(--mhc-elev);
  color: var(--mhc-ink);
  font-family: inherit;
  text-align: center;
  overflow: hidden;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* Шапка-дата: полоса-ОВЕРЛЕЙ поверх ячейки, а не строка в потоке. Только так
   значение остаётся по центру ВСЕЙ ячейки, как в макете v2. */
.mhc-cell::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--mhc-head-h);
  background: var(--mhc-cell-head);
  pointer-events: none;
}

.mhc-cell:focus-visible {
  outline: 2px solid var(--mhc-ink);
  outline-offset: 1px;
}

/* Выбранный день. Кольцо ВНУТРЕННЕЕ: внешняя тень вылезала за ячейку и
   перекрывала соседей. Тень ячейки остаётся в списке — иначе белая карточка
   при выборе «проваливалась» в фон. */
.mhc-cell.is-sel {
  box-shadow: inset 0 0 0 3px var(--mhc-ink), var(--mhc-elev);
}

.mhc-cell--blank {
  background: var(--mhc-blank-bg);
  --mhc-elev: var(--mhc-elev-off);
  cursor: default;
}

/* У пустышки чужого месяца полосы-шапки нет — только тусклое число. */
.mhc-cell--blank::before {
  display: none;
}

.mhc-cell--max {
  background: var(--mhc-red);
  color: #ffffff;
  --mhc-elev: var(--mhc-elev-off);
}

.mhc-cell--soft {
  background: var(--mhc-soft);
  color: #ffffff;
  --mhc-elev: var(--mhc-elev-off);
}

/* Завоз и добавление — один цвет: их различает подпись, а не оттенок. */
.mhc-cell--arr,
.mhc-cell--add {
  background: var(--mhc-arr);
  color: #ffffff;
  --mhc-elev: var(--mhc-elev-off);
}

.mhc-cell:active {
  background: var(--mhc-cell-bg-act);
}

.mhc-cell--blank:active {
  background: var(--mhc-blank-bg);
}

.mhc-cell--max:active {
  background: var(--mhc-red-on);
}

.mhc-cell--soft:active {
  background: var(--mhc-soft-on);
}

.mhc-cell--arr:active,
.mhc-cell--add:active {
  background: var(--mhc-arr-on);
}

/* Число дня в левом верхнем углу — поверх полосы-шапки. */
.mhc-day {
  position: absolute;
  top: var(--mhc-day-top);
  left: var(--mhc-day-left);
  font-size: var(--mhc-day-fz);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.mhc-cell--blank .mhc-day {
  color: var(--mhc-blank-ink);
  font-size: var(--mhc-blank-fz);
}

.mhc-cell--max .mhc-day,
.mhc-cell--soft .mhc-day,
.mhc-cell--arr .mhc-day,
.mhc-cell--add .mhc-day {
  color: #ffffff;
}

.mhc-cell--max::before,
.mhc-cell--soft::before,
.mhc-cell--arr::before,
.mhc-cell--add::before {
  background: var(--mhc-on-dark);
}

/* Значение дня: проценты (narrow) крупнее и плотнее, рубли (wide) мельче —
   «1499₽» обязано влезать в ту же ширину. */
.mhc-num {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px;
  letter-spacing: var(--mhc-num-ls);
  white-space: nowrap;
}

/* Кегль числа — меньшее из размера макета и того, что реально влезает в
   ячейку. Делитель — ширина строки в кеглях, замеренная живым браузером в
   стеке страницы (см. значения у --mhc-k-narrow). Разрядность ставит скрипт
   классом --dN: без неё «1499₽» вылезал за край ячейки уже на макетных 1280px,
   а «90%» — на любой витрине уже 1150px. 1px — зазор между числом и единицей
   измерения: он абсолютный и в делитель не входит.
   Делители разрядных классов ниже откалиброваны каждый отдельно и от
   переменных НЕ считаются: у «100%» и «9999₽» запас другой. Артборды делят их
   между собой — замер телефона и web расходится меньше чем на 1.5%, а запас в
   делителе вдвое больше. */
.mhc-num--narrow {
  font-size: min(var(--mhc-narrow-fz), calc((var(--mhc-fit) - 1px) / var(--mhc-k-narrow)));
}

.mhc-num--narrow.mhc-num--d3 {
  font-size: min(var(--mhc-narrow-fz), calc((var(--mhc-fit) - 1px) / 2.34));
}

.mhc-num--wide {
  font-size: min(var(--mhc-wide-fz), calc((var(--mhc-fit) - 1px) / var(--mhc-k-wide)));
}

.mhc-num--wide.mhc-num--d4 {
  font-size: min(var(--mhc-wide-fz), calc((var(--mhc-fit) - 1px) / 2.55));
}

.mhc-num--wide.mhc-num--d5 {
  font-size: min(var(--mhc-wide-fz), calc((var(--mhc-fit) - 1px) / 3.11));
}

.mhc-num--wide.mhc-num--d6 {
  font-size: min(var(--mhc-wide-fz), calc((var(--mhc-fit) - 1px) / 3.67));
}

.mhc-num__val {
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Единица измерения — доля кегля числа: числу разрешено ужаться под ширину
   ячейки, и абсолютный размер «%» тогда разъехался бы с ним. Собственного
   цвета на белой ячейке у неё в v2 нет — «%» такой же чёрный, как число. */
.mhc-num__unit {
  font-weight: 800;
  line-height: 1;
}

.mhc-num--narrow .mhc-num__unit {
  font-size: var(--mhc-unit-narrow);
}

.mhc-num--wide .mhc-num__unit {
  font-size: var(--mhc-unit-wide);
}

.mhc-cell--max .mhc-num__unit,
.mhc-cell--soft .mhc-num__unit,
.mhc-cell--arr .mhc-num__unit,
.mhc-cell--add .mhc-num__unit {
  color: var(--mhc-on-dark-2);
}

/* Двухстрочная подпись цветной ячейки: «НОВЫЙ ЗАВОЗ», «ДОБАВ. ТОВАРА». */
/* Тот же приём, что у числа, но делитель НЕ константа. Раньше здесь стояло
   4.05 — ширина самого широкого штатного слова («ТОВАРА» — 4.02 кегля,
   «НОВЫЙ» — 3.96), снятая на одной машине. Запаса в ней было 0.8% — меньше,
   чем разница метрик между шрифтами: стек подписи (Segoe UI, Open Sans,
   Arimo, Arial) на разных системах разрешается в РАЗНЫЕ файлы, и на витрине
   КИТ, где телефон отдаёт iframe 358px и строке остаётся 38.3px, подпись
   переставала влезать. Дальше работало то, что ниже: перенос ломал слово
   посреди («НОВЫ/Й»), а плашка обрезала его многоточием («ДОБ…»).
   Поэтому ширину строки в кеглях снимает СКРИПТ — в том самом шрифте, которым
   устройство рисует ячейку, — и кладёт её в --mhc-k-line (см. lineEm в
   calendar.js). Значение по умолчанию оставлено прежним: если подпись
   почему-то не измерена, поведение ровно то, что было.
   0.4px — запас на дробную ширину колонки: сетка делит остаток на семь, и
   реальная ячейка бывает на сотые уже расчётной. */
.mhc-word {
  margin-top: var(--mhc-word-mt);
  width: 100%;
  text-align: center;
  font-size: min(var(--mhc-word-fz), calc((var(--mhc-fit) - 0.4px) / var(--mhc-k-line, 4.05)));
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.04em;
  overflow-wrap: break-word;
}

/* Строка подписи — отдельный span (их ставит fillLines): только целой строке
   можно запретить переноситься. Раньше вторая строка была текстовым узлом за
   <br>, и запретить перенос ей было нечем. */
.mhc-word > span {
  display: block;
}

/* Подпись, которой кегль подобран по ЕЁ ширине (--mhc-k-line): строка не
   переносится, не ломается посреди слова и не обрезается — ни на какой ширине
   колонки. Подпись, для которой такой кегль оказался бы нечитаемым (длинный
   текст из админки), этот класс не получает и остаётся на прежнем поведении —
   перенос по словам, обрезка по краю. */
.mhc-word--fit > span {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
  text-overflow: clip;
}

/* Свободный текст из админки (type='text'): длина не ограничена, поэтому
   мельче и с переносом по словам. Высота ячейки зафиксирована на всех ярусах,
   и длинная строка вылезала за ячейку и обрывалась ровно посреди буквы —
   обрезаем её по строкам с многоточием, а полный текст всё равно остаётся в
   aria-label. */
.mhc-free {
  width: 100%;
  text-align: center;
  /* Капитель ставит стиль, а не скрипт: в разметке лежит подпись из админки
     как есть, и в ячейке она выглядит так же, как «НОВЫЙ ЗАВОЗ» рядом. */
  text-transform: uppercase;
  font-size: var(--mhc-free-fz);
  font-weight: 700;
  line-height: 1.15;
  overflow-wrap: break-word;
  hyphens: auto;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--mhc-free-lines);
  line-clamp: var(--mhc-free-lines);
  overflow: hidden;
}

/* Жёлтая плашка события у скидочного дня. Прижата к низу абсолютом: значение
   стоит по центру ВСЕЙ ячейки, и делить с ним поток плашке нечем. */
.mhc-badge {
  position: absolute;
  left: var(--mhc-badge-inset-x);
  right: var(--mhc-badge-inset-x);
  bottom: var(--mhc-badge-inset-b);
  padding: var(--mhc-badge-pad);
  border-radius: var(--mhc-badge-radius);
  background: var(--mhc-yellow);
  color: var(--mhc-ink);
  font-weight: 800;
  line-height: var(--mhc-badge-lh);
  letter-spacing: -0.01em;
  text-align: center;
}

/* Кегль подписи плашки. Тот же приём, что у подписи ячейки, но кандидатов ДВА,
   и выбирает между ними каскад:
     • --mhc-k-all  — вся подпись ОДНОЙ строкой, как нарисовано в макете v2;
     • --mhc-k-line — самое широкое СЛОВО подписи.
   Берём одну строку, пока она не мельче --mhc-badge-min; иначе опускаемся ровно
   до кегля, при котором подпись переносится по словам и ни одно слово не
   ломается посреди себя. «НОВЫЙ ЗАВОЗ» на web так и остаётся одной строкой, а
   «ДОБАВЛЕНИЕ ТОВАРА» (11.3 кегля против 6.6 у самого длинного слова) на
   реальной ширине ячейки одной строкой не помещается ни при каком читаемом
   кегле — она переносится, но НЕ обрезается.
   Кегль стоит на СТРОКЕ, а не на плашке: у мобильного и десктопного вариантов
   подписи ширина разная, и один делитель на оба ужимал бы короткий вариант под
   длинный. Две строки — потолок: подпись из админки бывает любой длины («ЗАВОЗ
   ЗИМНЕЙ ОДЕЖДЫ»), и без обрезки она наехала бы на значение дня. Полный текст
   всё равно прочитан в aria-label ячейки. */
.mhc-badge > span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  /* Последняя черта обороны — одно слово из админки длиннее всей плашки. Штатных
     подписей это не касается: им кегль подобран так, что каждое слово влезает
     целиком. Без переноса такое слово просто срезалось бы краем, без многоточия. */
  overflow-wrap: break-word;
  font-size: min(
    var(--mhc-badge-fz),
    max(
      calc((var(--mhc-fit) - var(--mhc-badge-fit) - 0.4px) / var(--mhc-k-all, 8)),
      min(
        calc((var(--mhc-fit) - var(--mhc-badge-fit) - 0.4px) / var(--mhc-k-line, 4.05)),
        var(--mhc-badge-min)
      )
    )
  );
}

/* Мобильный и десктопный варианты подписи плашки лежат в разметке оба, а
   выбирает каскад: при повороте экрана пересборки ячеек нет. */
.mhc-badge > .mhc-badge__web {
  display: none;
}

/* Мерных строк, которыми скрипт снимает ширину подписи в кеглях (--mhc-k-line,
   --mhc-k-all), ДВЕ. Начертание и трекинг НЕ повторены здесь, а взяты с самой
   подписи: скрипт вешает на мерную строку класс .mhc-word или .mhc-badge, и
   правило ниже переопределяет ей только кегль, поля и способ позиционирования.
   Одной строки на обе не хватает: трекинг у подписи ячейки -0.04em, а у плашки
   -0.01em, и общий замер врал на 4.5% — ровно столько, сколько «ДОБАВЛЕНИЕ
   ТОВАРА» потом не влезало. right/bottom обязаны сброситься: у .mhc-badge они
   заданы, и с ними мерная строка растянулась бы по контейнеру вместо
   собственной ширины. Высота нулевая: страница сообщает свою высоту витрине
   КИТ через postMessage, и мерная строка не имеет права в неё войти. */
.mhc-probe {
  position: absolute;
  left: -9999px;
  right: auto;
  top: 0;
  bottom: auto;
  display: inline-block;
  width: auto;
  height: 0;
  margin: 0;
  padding: 0;
  background: none;
  overflow: hidden;
  font-size: 100px;
  white-space: pre;
  pointer-events: none;
}

/* Неопубликованный месяц: значения синтетические, поэтому размыты и без
   цветов — это декорация, а не данные. */
.mhc-ghost .mhc-num,
.mhc-ghost .mhc-word,
.mhc-ghost .mhc-badge {
  filter: blur(9px);
}

.mhc-ghost .mhc-num--narrow {
  font-size: min(var(--mhc-ghost-fz), calc((var(--mhc-fit) - 1px) / var(--mhc-k-narrow)));
}

.mhc-ghost .mhc-num--narrow .mhc-num__unit {
  font-size: 0.762em;
}

/* Пульс «сегодня». Кольцо и подложка — отдельный слой поверх ячейки: свой
   box-shadow ячейки занят выбором дня, а внешнее кольцо обязано выходить ЗА
   границы ячейки (место под него дают поля дорожки и карточки месяца).
   1700ms — это шаг макета 850ms: в демо-логике setInterval раз в 850ms
   перекидывал кольцо между двумя фазами, то есть 850ms длится ПОЛОВИНА цикла,
   а весь цикл (туда и обратно) — 1700ms. Крутит его каскад, а не таймер. */
.mhc-today {
  position: absolute;
  inset: 0;
  border-radius: var(--mhc-radius);
  pointer-events: none;
  box-shadow: inset 0 0 0 3px var(--mhc-blue), 0 0 0 0 rgba(0, 91, 170, 0.55);
  animation: mhc-ring 1700ms ease-in-out infinite;
}

.mhc-today__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--mhc-blue);
  opacity: 0;
  animation: mhc-fill 1700ms ease-in-out infinite;
}

@keyframes mhc-ring {
  0%,
  100% {
    box-shadow: inset 0 0 0 3px var(--mhc-blue), 0 0 0 0 rgba(0, 91, 170, 0.55);
  }

  50% {
    box-shadow: inset 0 0 0 5px var(--mhc-blue), 0 0 0 9px rgba(0, 91, 170, 0.18);
  }
}

@keyframes mhc-fill {
  0%,
  100% {
    opacity: 0;
  }

  50% {
    opacity: 0.2;
  }
}

/* ═══ Оверлеи состояний месяца ════════════════════════════════════════════ */

.mhc-over {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  pointer-events: none;
}

.mhc-over__box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border: 1px solid var(--mhc-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  color: var(--mhc-ink);
  box-shadow: var(--mhc-shadow-pop);
}

.mhc-over--soon .mhc-over__box {
  border-color: #d3e1f2;
  box-shadow: 0 6px 18px rgba(15, 17, 21, 0.12);
}

.mhc-over__ic {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  color: var(--mhc-ink-3);
}

.mhc-over--soon .mhc-over__ic {
  color: var(--mhc-blue);
}

.mhc-over__txt {
  min-width: 0;
}

.mhc-over__t1 {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

.mhc-over--soon .mhc-over__t1 {
  color: var(--mhc-blue);
}

.mhc-over__t2 {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--mhc-ink-3);
}

/* ═══ Точки-индикаторы (телефон) ══════════════════════════════════════════ */

.mhc-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 0;
}

/* Кнопка ВЫГЛЯДИТ на 26px (макет v2), но тач-таргет обязан остаться 44px —
   иначе на телефоне в точку не попасть. Добираем невидимым псевдоэлементом:
   он не занимает места в потоке и вида не меняет. */
.mhc-dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.mhc-dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.mhc-dot__pt {
  grid-area: 1 / 1;
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: #cbd3de;
}

.mhc-dot.is-on .mhc-dot__pt {
  background: var(--mhc-blue);
}

.mhc-dot:focus-visible {
  outline: 2px solid var(--mhc-blue);
  outline-offset: 0;
  border-radius: 10px;
}

/* ═══ Артборд «Веб 1280» (>=768px) ════════════════════════════════════════ */

@media (min-width: 768px) {
  :root {
    /* Серая обёртка макета живёт на чуть более тёмной странице — иначе рамка
       вокруг неё не читается. */
    --mhc-page: #ededed;
    --mhc-shell-bg: #f5f7fa;
    --mhc-shell-border: 1px solid var(--mhc-line);
    --mhc-card-pad: 20px 22px 18px;
    --mhc-card-radius: 14px;
    --mhc-side: 0px;

    --mhc-month-bg: var(--mhc-card);
    --mhc-month-radius: 12px;
    --mhc-month-pad: 14px 14px 12px;

    --mhc-radius: 12px;
    --mhc-gap: 6px;
    --mhc-cell-h: 100px;
    --mhc-cell-pad: 8px 4px;
    --mhc-elev: 0 1px 2px rgba(15, 17, 21, 0.12), 0 2px 6px rgba(15, 17, 21, 0.06);

    --mhc-head-h: 23px;
    --mhc-day-fz: 13px;
    --mhc-day-top: 5px;
    --mhc-day-left: 9px;
    --mhc-blank-fz: 13px;

    --mhc-narrow-fz: 42px;
    --mhc-wide-fz: 36px;
    --mhc-num-ls: -0.035em;
    --mhc-unit-narrow: 0.7143em;
    --mhc-unit-wide: 0.5833em;
    --mhc-k-narrow: 1.78;
    --mhc-k-wide: 1.98;
    --mhc-ghost-fz: 42px;

    /* Карточка макета — 1280px, вокруг неё отбивка страницы 28px. */
    --mhc-cardw: min(1280px, calc(100vw - 56px));

    --mhc-word-fz: 17px;
    --mhc-word-mt: 7px;
    --mhc-free-fz: 13px;
    --mhc-free-lines: 4;

    --mhc-badge-fz: 8.5px;
    --mhc-badge-pad: 2px 3px;
    --mhc-badge-radius: 5px;
    --mhc-badge-inset-x: 4px;
    --mhc-badge-inset-b: 5px;
    --mhc-badge-fit: 6px;

    --mhc-wd-h: 30px;
    --mhc-wd-r: 8px;
    --mhc-wd-fz: 13px;
    --mhc-wd-ls: 0.08em;
  }

  .mhc-app {
    padding: 28px;
    box-sizing: border-box;
  }

  .mhc-card {
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .mhc-bar,
  .mhc-mnav,
  .mhc-wd--mob,
  .mhc-dots {
    display: none;
  }

  /* Разделительной линии под шапкой в v2 нет: обёртку и месяцы разводит фон. */
  .mhc-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 16px;
  }

  .mhc-head__h1 {
    margin: 0;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  .mhc-head__range {
    font-size: 15px;
    font-weight: 600;
    color: var(--mhc-ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mhc-head__nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
  }

  .mhc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 18px;
    border: 1px solid var(--mhc-line);
    border-radius: 10px;
    background: var(--mhc-card);
    color: var(--mhc-ink);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
  }

  .mhc-btn--icon {
    width: 44px;
    padding: 0;
  }

  .mhc-btn:hover {
    background: #ececec;
  }

  .mhc-btn[disabled] {
    opacity: 0.4;
    cursor: default;
  }

  .mhc-btn[disabled]:hover {
    background: var(--mhc-card);
  }

  .mhc-btn .mhc-ic {
    width: 20px;
    height: 20px;
  }

  /* Дорожка на web — обычный ряд из двух колонок. Инлайновый transform ставит
     JS для мобильной карусели; здесь он обязан сниматься КАСКАДОМ, а не
     порядком вызовов, иначе после поворота планшета лента остаётся уехавшей.
     Поля дорожки на web не нужны: место внешнему кольцу пульса даёт padding
     самой карточки месяца. */
  .mhc-viewport {
    height: auto;
    overflow: visible;
    touch-action: auto;
    padding: 0;
  }

  .mhc-strip {
    gap: 22px;
    transform: none !important;
    transition: none !important;
    /* 44px — поля обёртки, 22px — зазор между карточками месяцев. */
    --mhc-colw: calc((var(--mhc-cardw) - 44px - 22px) / 2);
    /* 28px — поля карточки месяца, 36px — шесть зазоров сетки, 8px — поля числа. */
    --mhc-fit: calc((var(--mhc-colw) - 64px) / 7 - 8px);
  }

  .mhc-slide {
    flex: 1 1 0;
  }

  /* Вторая пара месяцев в разметке есть всегда — показывает нужную JS. */
  .mhc-slide.is-off {
    display: none;
  }

  /* Один доступный месяц не растягиваем на всю обёртку: ячейка 175px рядом с
     ничем читается как сломанная вёрстка. Держим ширину колонки пары. */
  .mhc-strip[data-cols="1"] {
    --mhc-colw: min(620px, calc(var(--mhc-cardw) - 44px));
  }

  .mhc-strip[data-cols="1"] .mhc-slide {
    flex: 0 1 620px;
    margin: 0 auto;
  }

  /* Заголовок месяца в v2 — ПО ЦЕНТРУ карточки и без линии под ним. */
  .mhc-mhead {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 2px 0 12px;
  }

  .mhc-mhead__name {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.06em;
  }

  .mhc-tag {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border-radius: 99px;
    background: #e6e6e6;
    color: var(--mhc-ink-2);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
  }

  .mhc-tag--soon {
    background: #e3edf9;
    color: var(--mhc-blue);
  }

  .mhc-wd--top {
    display: grid;
    padding: 0 0 8px;
  }

  .mhc-cell:hover {
    background: var(--mhc-cell-bg-on);
  }

  .mhc-cell--blank:hover {
    background: var(--mhc-blank-bg);
  }

  .mhc-cell--max:hover {
    background: var(--mhc-red-on);
  }

  .mhc-cell--soft:hover {
    background: var(--mhc-soft-on);
  }

  .mhc-cell--arr:hover,
  .mhc-cell--add:hover {
    background: var(--mhc-arr-on);
  }

  /* На web в плашке события — ПОЛНАЯ подпись макета («ДОБАВЛЕНИЕ ТОВАРА»),
     на телефоне остаётся короткая. */
  .mhc-badge > .mhc-badge__web {
    display: -webkit-box;
  }

  .mhc-badge > .mhc-badge__mob {
    display: none;
  }

  .mhc-status {
    padding: 40px 16px;
  }
}

/* ═══ Планшет в отдельной странице (768…1059px) ═══════════════════════════
   Два календаря макета требуют ширины: колонка пары ужимается до 43px на
   ячейку, и число дня приходится тянуть до 12px — читать нечего. Поэтому на
   планшете пара не сжимается, а СТАНОВИТСЯ СТОЛБИКОМ: месяцы друг под другом
   в макетных размерах. Витрины КИТ это не касается — у неё бюджет высоты,
   и там пара остаётся в строку (со своим, изначально мелким, кеглем).

   Граница 1059, а не 999: на 1000px пара в строку давала ячейку 57px, где
   «1499₽» уже тянется до 20px и читается хуже, чем тот же месяц столбиком. */

@media (min-width: 768px) and (max-width: 1059px) {
  :root:not([data-embed="1"]) .mhc-strip {
    flex-wrap: wrap;
    --mhc-colw: calc(var(--mhc-cardw) - 44px);
  }

  :root:not([data-embed="1"]) .mhc-strip[data-cols="1"] {
    --mhc-colw: calc(var(--mhc-cardw) - 44px);
  }

  :root:not([data-embed="1"]) .mhc-slide,
  :root:not([data-embed="1"]) .mhc-strip[data-cols="1"] .mhc-slide {
    flex: 1 1 100%;
  }
}

/* ═══ Витрина КИТ: карточка 520px ([data-embed="1"], >=768px) ══════════════
   Тот же web-артборд, сжатый под бюджет высоты. Считается он так:
   поля обёртки 8+8, шапка 30+8, поля карточек месяца 8+6, заголовок месяца
   ~14+6, строка дней недели 22+6, сетка 6*H + 5*4.
   При H=58 сумма ≈ 454px, при H=60 ≈ 466px — запас к 520px тратится на
   округления шрифтов и на то, что в v2 нет ни легенды, ни второй строки дней
   недели (в v1 они съедали ~60px и держали потолок ячейки на 54px). */

@media (min-width: 768px) {
  :root[data-embed="1"] {
    /* Серый фон обёртки в витрине остаётся: без него белые карточки месяцев
       сливаются с белой карточкой КИТ и макет перестаёт читаться. Рамку и
       скругление снимаем — их роль играет сама карточка витрины. */
    --mhc-card-pad: 8px 10px;
    --mhc-card-radius: 0;
    --mhc-shell-border: 0 none;

    --mhc-month-pad: 8px 8px 6px;
    --mhc-month-radius: 10px;

    --mhc-gap: 4px;
    --mhc-radius: 9px;
    --mhc-cell-h: 60px;
    --mhc-cell-pad: 4px 3px;
    --mhc-elev: 0 1px 2px rgba(15, 17, 21, 0.12), 0 2px 5px rgba(15, 17, 21, 0.06);

    --mhc-head-h: 15px;
    --mhc-day-fz: 9.5px;
    --mhc-day-top: 2px;
    --mhc-day-left: 5px;
    --mhc-blank-fz: 9px;

    --mhc-narrow-fz: 21px;
    --mhc-wide-fz: 18px;
    --mhc-ghost-fz: 18px;

    /* Витрина отдаёт iframe во всю свою ширину, отбивки страницы нет. */
    --mhc-cardw: 100vw;

    --mhc-word-fz: 10px;
    --mhc-word-mt: 3px;
    --mhc-free-fz: 8px;
    --mhc-free-lines: 3;

    --mhc-badge-fz: 7px;
    --mhc-badge-lh: 1;
    --mhc-badge-pad: 1px 2px;
    --mhc-badge-radius: 4px;
    --mhc-badge-inset-x: 3px;
    --mhc-badge-inset-b: 2px;
    --mhc-badge-fit: 4px;

    --mhc-wd-h: 22px;
    --mhc-wd-r: 6px;
    --mhc-wd-fz: 10px;
  }

  /* Карточку рисует витрина: свои внешние поля страница снимает. */
  :root[data-embed="1"] .mhc-app {
    padding: 0;
  }

  :root[data-embed="1"] .mhc-card {
    max-width: none;
  }

  /* H1 в embed лишний: заголовок над iframe уже дала витрина. */
  :root[data-embed="1"] .mhc-head__h1 {
    display: none;
  }

  :root[data-embed="1"] .mhc-head {
    gap: 10px;
    padding-bottom: 8px;
  }

  :root[data-embed="1"] .mhc-head__range {
    font-size: 13px;
  }

  :root[data-embed="1"] .mhc-head__nav {
    gap: 6px;
  }

  :root[data-embed="1"] .mhc-btn {
    height: 30px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 12.5px;
  }

  :root[data-embed="1"] .mhc-btn--icon {
    width: 30px;
    padding: 0;
  }

  :root[data-embed="1"] .mhc-btn .mhc-ic {
    width: 16px;
    height: 16px;
  }

  :root[data-embed="1"] .mhc-strip {
    gap: 16px;
    /* 20px — поля обёртки, 16px — зазор между карточками месяцев. */
    --mhc-colw: calc((var(--mhc-cardw) - 20px - 16px) / 2);
    /* 16px — поля карточки месяца, 24px — шесть зазоров сетки, 6px — поля числа. */
    --mhc-fit: calc((var(--mhc-colw) - 40px) / 7 - 6px);
  }

  :root[data-embed="1"] .mhc-strip[data-cols="1"] {
    --mhc-colw: min(620px, calc(var(--mhc-cardw) - 20px));
  }

  :root[data-embed="1"] .mhc-mhead {
    gap: 8px;
    padding: 0 0 6px;
  }

  :root[data-embed="1"] .mhc-mhead__name {
    font-size: 13px;
    letter-spacing: 0.06em;
  }

  :root[data-embed="1"] .mhc-tag {
    height: 16px;
    padding: 0 7px;
    font-size: 8.5px;
  }

  :root[data-embed="1"] .mhc-wd--top {
    padding: 0 0 6px;
  }

  /* В витрине КИТ плашка подписывается КОРОТКО, как на телефоне. Колонка здесь
     самая узкая из web-яруса (iframe 880px → ячейка 54.6px, плашке остаётся
     44px), а «ДОБАВЛЕНИЕ» это 7 кеглей: семёркой слово требует 49px, и кегль
     опускался до 6.3px — читаемо, но мельче всего остального на странице.
     «ДОБАВ. ТОВАРА» в те же 44px встаёт полными 7px. На отдельной странице
     подпись остаётся полной — там ячейка 100px и места хватает. */
  :root[data-embed="1"] .mhc-badge > .mhc-badge__web {
    display: none;
  }

  :root[data-embed="1"] .mhc-badge > .mhc-badge__mob {
    display: -webkit-box;
  }

  :root[data-embed="1"] .mhc-over__box {
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
  }

  :root[data-embed="1"] .mhc-over__ic {
    width: 16px;
    height: 16px;
  }

  :root[data-embed="1"] .mhc-over__t1 {
    font-size: 12px;
  }

  :root[data-embed="1"] .mhc-over__t2 {
    font-size: 10.5px;
  }

  :root[data-embed="1"] .mhc-status {
    padding: 24px 16px;
    font-size: 13px;
  }
}

/* ═══ Уважение к настройкам движения ══════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .mhc-today {
    animation: none;
    box-shadow: inset 0 0 0 3px var(--mhc-blue);
  }

  .mhc-today__fill {
    animation: none;
    opacity: 0;
  }

  .mhc-strip {
    transition: none !important;
  }
}