/*
 * «Мой магазин» МЕГАХЕНД — блок /stores-my/, согласованный дизайн 01.10.2026
 * (DESIGN фазы 2, §5.5). Визуал — из согласованного макета (styles.css,
 * calendar-preview.css): белая карточка с фото, бледно-синие панели, синий
 * #0c54a0, Arial, радиус 16 px; ячейки недели — как в календаре магазинов.
 *
 * Правила:
 *  • страница под meta-CSP style-src 'self': ни атрибутов style в разметке, ни
 *    элементов <style> и CSSOM из скрипта — всё оформление только отсюда;
 *  • ни одного адреса и url(...): img-src страницы разрешает лишь фото S3;
 *  • полосы — по ширине документа iframe (она же ширина оболочки КИТ):
 *    база A1 <340, A2 ≥340, B ≥480, C ≥768; ≥1051 и ≥1500 — косметика без
 *    изменения высоты; границы совпадают с @container-полосами снипета КИТ;
 *  • во встраивании высота блока — слот КИТ: .mhs-app занимает кадр целиком,
 *    не влезло — прокрутка внутри блока (страховка), а не обрезка;
 *  • ни фиксированного позиционирования, ни диалогов: виды встают на место
 *    карточки/деталей внутри слота;
 *  • светлая схема без вариантов (витрина белая), кольцо фокуса видно всегда;
 *    у обложки и миниатюр — внутрь, иначе его срежет край контейнера;
 *  • тексты переносятся по словам, без многоточий и обрезки строк.
 */

:root {
  color-scheme: light;
  --mhs-build: 4;
  --mhs-blue: #0c54a0;
  --mhs-blue-dark: #073f7c;
  --mhs-ink: #333333;
  --mhs-muted: #5f656c;
  --mhs-line: #e4e7eb;
  --mhs-pale: #eef5fc;
  --mhs-radius: 16px;
  --mhs-pale-ink: #576d82;
  --mhs-pale-ink-2: #597185;
  --mhs-addr: #656b73;
  --mhs-warn-bg: #fff4d6;
  --mhs-warn-ink: #7a4f00;
  /* Тоны дней — дословно календарь магазинов (stores-calendar/calendar.css). */
  --mhs-day-red: #ed1c24;
  --mhs-day-soft: #f5504a;
  --mhs-day-arr: #1a6fe0;
  --mhs-day-today: #005baa;
  --mhs-day-yellow: #ffe600;
  --mhs-day-ink: #1a1a1a;
  --mhs-day-head: #e9edf3;
  --mhs-day-blank: #c6cbd4;
  /*
   * Полоса с датой на цветном дне — подложка календаря (--mhc-on-dark): 16 %
   * чёрного поверх заливки дня, как .mhc-cell--max/soft/arr::before.
   * Решение владельца 02.10.2026: цвета дней и полоски с датами мини-недели —
   * как в магазинном календаре (#ed1c24 / #f5504a); контраст мелкого белого
   * текста 4,38:1 и 3,43:1 принят владельцем.
   */
  --mhs-day-on-dark: rgba(0, 0, 0, 0.16);
  /* Прочерк «нет данных» — нейтральный, 3,27:1 на белом (не текст, aria-hidden). */
  --mhs-wk-nodata: #878f99;
  --mhs-day-shadow: 0 1px 4px rgba(24, 38, 61, 0.12);
  --mhs-day-font: "Segoe UI", "Open Sans", Arimo, Arial, system-ui, sans-serif;
  --mhs-gutter: 16px;
  font-family: Arial, -apple-system, Roboto, sans-serif;
  color: var(--mhs-ink);
  font-synthesis: none;
}

html,
body {
  margin: 0;
  background: transparent;
}

:root:not([data-embed="1"]) body {
  background: #ffffff;
}

body {
  font-size: 14px;
  line-height: 1.4;
  color: var(--mhs-ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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

h1,
h2,
p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button,
input {
  margin: 0;
  font: inherit;
  color: inherit;
}

button {
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

button:disabled {
  cursor: default;
}

a {
  color: inherit;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

img {
  max-width: 100%;
}

img[data-broken] {
  visibility: hidden;
}

[hidden] {
  display: none !important;
}

.mhs-ic {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* Только для скринридера: живая строка статуса, «по московскому времени». */
.mhs-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;
}

/* ---------------------------------------------------------------- каркас */

.mhs-app {
  position: relative;
  min-width: 0;
}

/* Встраивание: блок занимает кадр витрины целиком; содержимое выше слота
   прокручивается внутри блока (страховка §4.5), горизонтальной прокрутки нет.
   Поля 4/8 px сверху и снизу — под кольца фокуса; боковых полей нет — их даёт
   секция КИТ. */
:root[data-embed="1"],
:root[data-embed="1"] body {
  height: 100%;
}

:root[data-embed="1"] body {
  overflow: hidden;
}

:root[data-embed="1"] .mhs-app {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: auto;
  padding: 4px 0 8px;
}

:root:not([data-embed="1"]) .mhs-app {
  max-width: 1240px;
  margin: 0 auto;
  padding: 16px;
}

.mhs-root,
.mhs-root > *,
.mhs-store-h,
.mhs-view__title,
.mhs-load__t,
.mhs-msg__title,
.mhs-welcome__title,
.mhs-h1 {
  scroll-margin-top: 16px;
}

/*
 * Якорная точка над открытым регионом (reveal в my-store.js). scroll-margin-top
 * из кадра на страницу КИТ не переносится, поэтому прокручиваем к точке выше
 * региона на высоту закреплённой шапки КИТ с запасом. Замер 01.10.2026
 * (megahand.market, Chromium 151 и Firefox 155): 104 px при 320–390, 144 px при
 * 768–1440; ширина кадра ширину окна КИТ не выдаёт — берём наибольшую + 16.
 * Абсолютная с top:auto стоит в своей статической позиции и не меняет ни
 * раскладку региона, ни блок-контейнер его потомков.
 */
:root {
  --mhs-kit-head: 16px;
}

:root[data-embed="1"] {
  --mhs-kit-head: 160px;
}

.mhs-anchor {
  position: absolute;
  display: block;
  width: 1px;
  height: 1px;
  margin-top: calc(-1 * var(--mhs-kit-head));
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}

.mhs-boot {
  padding: 24px 0;
  font-size: 14px;
  color: var(--mhs-muted);
}

.mhs-noscript {
  padding: 16px;
  font-size: 14px;
  line-height: 1.5;
}

/* ---------------------------------------------------------------- шапка блока */

.mhs-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.mhs-heading__text {
  min-width: 0;
}

.mhs-eyebrow {
  margin-bottom: 9px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  color: var(--mhs-blue);
  overflow-wrap: anywhere;
}

.mhs-h1 {
  font-size: 27px;
  line-height: 1.2;
  letter-spacing: -0.5px;
  font-weight: 700;
}

.mhs-intro {
  max-width: 100%;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--mhs-muted);
}

.mhs-heading__actions {
  flex-shrink: 0;
}

.mhs-heading__actions:empty {
  display: none;
}

/* ---------------------------------------------------------------- кнопки и ссылки */

.mhs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 12px 19px;
  border: 1px solid transparent;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  transition: background-color 0.15s, border-color 0.15s;
}

.mhs-btn .mhs-ic {
  width: 19px;
  height: 19px;
}

.mhs-btn--primary {
  background: var(--mhs-blue);
  color: #ffffff;
}

.mhs-btn--outline {
  border-color: #bdcfe2;
  background: #ffffff;
  color: var(--mhs-blue);
}

.mhs-btn:disabled {
  opacity: 0.6;
}

.mhs-change {
  min-height: 44px;
  margin: 0 6px;
  padding: 9px 12px;
  gap: 6px;
  font-size: 12px;
}

.mhs-change .mhs-ic {
  width: 15px;
  height: 15px;
}

.mhs-textlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--mhs-blue);
}

.mhs-textlink .mhs-ic {
  width: 16px;
  height: 16px;
}

/* Текстовые кнопки «Забыть», «Повторить», «Сбросить поиск»: цель ≥ 24 px. */
.mhs-linkbtn {
  display: inline-flex;
  align-items: center;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  font-weight: 700;
  color: var(--mhs-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mhs-linkbtn:disabled {
  color: var(--mhs-muted);
  text-decoration: none;
}

.mhs-iconbtn {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #f2f5f8;
  color: var(--mhs-ink);
}

.mhs-iconbtn .mhs-ic {
  width: 18px;
  height: 18px;
}

.mhs-warn {
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--mhs-warn-bg);
  color: var(--mhs-warn-ink);
  font-size: 12px;
  line-height: 1.45;
}

/* ---------------------------------------------------------------- карточка магазина */

.mhs-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--mhs-line);
  border-radius: var(--mhs-radius);
  overflow: hidden;
  background: #ffffff;
}

.mhs-photo {
  position: relative;
  height: 218px;
  background: #eef0f3;
}

.mhs-cover {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
}

.mhs-cover__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.mhs-cover__empty {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 16px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--mhs-pale-ink);
}

.mhs-photo-label {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  font-size: 11px;
  font-weight: 700;
  color: var(--mhs-ink);
  pointer-events: none;
}

.mhs-photo-label__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mhs-blue);
}

.mhs-photo-count {
  position: absolute;
  bottom: 14px;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 10px 13px;
  border-radius: 9px;
  background: #ffffff;
  font-size: 12px;
  font-weight: 700;
  color: var(--mhs-ink);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.07);
}

.mhs-photo-count .mhs-ic {
  width: 17px;
  height: 17px;
}

.mhs-photo-count:disabled {
  color: var(--mhs-muted);
}

.mhs-summary {
  min-width: 0;
  padding: 21px 18px 17px;
}

.mhs-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mhs-title-row__text {
  min-width: 0;
}

.mhs-kicker {
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--mhs-muted);
}

.mhs-store-h {
  font-size: 27px;
  line-height: 1.2;
  letter-spacing: -0.5px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.mhs-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-radius: 20px;
  background: var(--mhs-pale);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--mhs-blue);
}

.mhs-pill .mhs-ic {
  width: 14px;
  height: 14px;
}

.mhs-address {
  display: flex;
  gap: 7px;
  margin: 10px 0 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--mhs-addr);
  overflow-wrap: anywhere;
}

.mhs-address .mhs-ic {
  width: 17px;
  height: 17px;
  margin-top: 2px;
}

.mhs-closed {
  display: inline-block;
  margin: -8px 0 16px;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--mhs-warn-bg);
  color: var(--mhs-warn-ink);
  font-size: 12px;
  font-weight: 700;
}

.mhs-events {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
}

.mhs-today {
  min-width: 0;
  min-height: 140px;
  padding: 15px 13px;
  border-radius: 12px;
  background: var(--mhs-pale);
}

.mhs-stat-label {
  font-size: 11px;
  line-height: 1.45;
  color: var(--mhs-pale-ink);
}

.mhs-today__val {
  margin: 7px 0 3px;
  font-size: 46px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -1.6px;
  color: var(--mhs-blue);
  overflow-wrap: anywhere;
}

.mhs-today__val.is-text {
  margin-top: 12px;
  font-size: 20px;
  line-height: 1.23;
  letter-spacing: -0.3px;
}

.mhs-stat-note {
  font-size: 11px;
  line-height: 1.45;
  color: var(--mhs-pale-ink-2);
}

.mhs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
  font-size: 11px;
}

.mhs-chip {
  display: inline-block;
  padding: 3px 5px;
  border: 1px solid #d8e5f2;
  border-radius: 5px;
  background: #ffffff;
  line-height: 1.3;
  color: var(--mhs-ink);
}

.mhs-chip--more {
  min-width: 24px;
  min-height: 24px;
  font-weight: 700;
  color: var(--mhs-blue);
}

.mhs-supply {
  position: relative;
  min-width: 0;
  padding: 15px 12px;
  border: 1px solid var(--mhs-line);
  border-radius: 12px;
}

.mhs-supply .mhs-stat-label {
  max-width: 150px;
  font-size: 10px;
  color: var(--mhs-muted);
}

.mhs-supply .mhs-stat-note {
  color: var(--mhs-muted);
}

.mhs-stat-icon {
  position: absolute;
  top: 16px;
  right: 14px;
  display: none;
  color: var(--mhs-blue);
}

.mhs-supply__val {
  display: block;
  margin: 15px 0 6px;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.5px;
  overflow-wrap: anywhere;
}

.mhs-note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  background: #fff7e7;
  font-size: 12px;
  line-height: 1.5;
  color: #8d5d16;
}

.mhs-note .mhs-linkbtn {
  color: #6b4307;
}

.mhs-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 15px;
  margin-top: 20px;
}

.mhs-actions .mhs-textlink {
  align-self: center;
}

.mhs-save-slot {
  min-width: 0;
}

.mhs-save {
  width: 100%;
}

.mhs-saved {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mhs-saved__t {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--mhs-blue);
}

.mhs-saved__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 12px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--mhs-muted);
}

.mhs-small {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  color: var(--mhs-muted);
}

/* ---------------------------------------------------------------- детали: карта и визит */

.mhs-details {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-top: 18px;
}

.mhs-panel {
  min-width: 0;
  border: 1px solid var(--mhs-line);
  border-radius: var(--mhs-radius);
  overflow: hidden;
  background: #ffffff;
}

.mhs-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 18px var(--mhs-gutter);
}

.mhs-panel__title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -0.15px;
  font-weight: 700;
}

.mhs-panel__title .mhs-ic {
  width: 19px;
  height: 19px;
  color: var(--mhs-blue);
}

.mhs-panel__head .mhs-textlink {
  font-size: 12px;
}

.mhs-mapbox {
  position: relative;
  height: 240px;
  overflow: hidden;
  border-top: 1px solid var(--mhs-line);
  border-bottom: 1px solid var(--mhs-line);
  background: #f1f4ef;
}

.mhs-mapbox__ph {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 16px;
}

.mhs-mapframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.mhs-framestatus {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(241, 244, 239, 0.92);
  font-size: 13px;
  text-align: center;
  color: #555c63;
  pointer-events: none;
}

.mhs-framerr {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  height: 100%;
  min-height: 200px;
  padding: 16px;
  text-align: center;
}

.mhs-framerr__t {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--mhs-ink);
}

.mhs-mapcap {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 13px var(--mhs-gutter);
  font-size: 11px;
  line-height: 1.4;
  color: var(--mhs-addr);
  overflow-wrap: anywhere;
}

.mhs-mapcap__dot {
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--mhs-blue);
}

.mhs-visit {
  padding-bottom: 20px;
}

.mhs-visit .mhs-panel__head {
  padding-bottom: 6px;
}

.mhs-visit__sub {
  margin: 0 var(--mhs-gutter) 17px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--mhs-muted);
}

.mhs-opencal {
  display: flex;
  width: calc(100% - 2 * var(--mhs-gutter));
  margin: 5px var(--mhs-gutter) 17px;
  min-height: 45px;
  padding: 9px;
  font-size: 13px;
}

.mhs-contact {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 var(--mhs-gutter);
  padding-top: 14px;
  border-top: 1px solid var(--mhs-line);
  font-size: 12px;
  line-height: 1.5;
}

.mhs-contact > .mhs-ic {
  width: 17px;
  height: 17px;
  margin-top: 1px;
  color: var(--mhs-muted);
}

.mhs-contact__text {
  min-width: 0;
}

.mhs-contact__label {
  display: block;
  margin-bottom: 3px;
  font-size: 10px;
  color: var(--mhs-muted);
}

.mhs-contact__val {
  max-width: 100%;
  color: #555555;
  overflow-wrap: anywhere;
}

.mhs-contact--phone {
  padding-top: 11px;
  border-top: 0;
}

.mhs-phones {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
}

.mhs-phone {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-size: 13px;
  color: var(--mhs-blue);
}

/* ---------------------------------------------------------------- мини-неделя (ячейки календаря) */

.mhs-week {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 0 var(--mhs-gutter) 15px;
}

.mhs-week.is-msg {
  grid-template-columns: minmax(0, 1fr);
}

.mhs-week__msg {
  font-size: 13px;
  line-height: 1.5;
  color: var(--mhs-muted);
}

.mhs-wd {
  --d-bg: #ffffff;
  --d-ink: var(--mhs-day-ink);
  --d-bar: var(--mhs-day-head);
  container-type: inline-size;
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(26px, 1fr) auto;
  align-items: stretch;
  min-width: 0;
  min-height: 76px;
  border-radius: 9px;
  background: var(--d-bg);
  color: var(--d-ink);
  box-shadow: var(--mhs-day-shadow);
  font-family: var(--mhs-day-font);
  font-variant-numeric: tabular-nums;
}

/* Решение владельца 02.10.2026: тоны и полосы дней — токены календаря. */
.mhs-wd--max {
  --d-bg: var(--mhs-day-red);
  --d-ink: #ffffff;
  --d-bar: var(--mhs-day-on-dark);
}

.mhs-wd--soft {
  --d-bg: var(--mhs-day-soft);
  --d-ink: #ffffff;
  --d-bar: var(--mhs-day-on-dark);
}

.mhs-wd--arr,
.mhs-wd--add {
  --d-bg: var(--mhs-day-arr);
  --d-ink: #ffffff;
  --d-bar: var(--mhs-day-on-dark);
}

.mhs-wd.is-today {
  box-shadow: inset 0 0 0 2px var(--mhs-day-today), var(--mhs-day-shadow);
}

.mhs-wd__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  min-width: 0;
  min-height: 20px;
  padding: 3px;
  border-radius: 9px 9px 0 0;
  background: var(--d-bar);
}

.mhs-wd__wd,
.mhs-wd__day {
  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

.mhs-wd__val {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  margin: 3px 2px 5px;
  font-weight: 800;
  line-height: 1.08;
  text-align: center;
  overflow-wrap: anywhere;
}

.mhs-wd__num-val {
  --mhs-fit: 1.78;
  flex-direction: row;
  align-items: baseline;
  align-self: center;
  gap: 1px;
  font-size: clamp(11px, calc((100cqi - 6px) / var(--mhs-fit)), 23px);
  white-space: nowrap;
  overflow-wrap: normal;
}

/* Делители макета по числу знаков (вместо инлайн-стиля --value-fit). */
.mhs-val--d3 {
  --mhs-fit: 2.34;
}

.mhs-val--p3 {
  --mhs-fit: 1.98;
}

.mhs-val--p4 {
  --mhs-fit: 2.55;
}

.mhs-val--p5 {
  --mhs-fit: 3.11;
}

.mhs-val--p6 {
  --mhs-fit: 3.67;
}

.mhs-wd__amount {
  line-height: 1;
}

.mhs-wd__unit {
  font-size: 0.7143em;
  line-height: 1;
}

.mhs-wd__unit--price {
  font-size: 0.5833em;
}

.mhs-wd__word {
  gap: 1px;
  font-size: clamp(8px, 20cqi, 10px);
  line-height: 1.15;
  text-transform: uppercase;
}

.mhs-wd__free {
  font-size: clamp(8px, 21cqi, 13px);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

.mhs-wd__nodata {
  font-size: 14px;
  font-weight: 700;
  color: var(--mhs-wk-nodata);
}

.mhs-wd__badge {
  display: block;
  align-self: end;
  justify-self: stretch;
  min-width: 0;
  margin: 0 3px 4px;
  padding: 2px 1px;
  border-radius: 3px;
  background: var(--mhs-day-yellow);
  color: var(--mhs-day-ink);
  font-size: 8px;
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

/* Полная подпись плашки — только когда она помещается по словам. */
.mhs-wd__badge-full {
  display: none;
}

.mhs-wd__badge-short {
  display: block;
}

@container (min-width: 72px) {
  .mhs-wd__badge-full {
    display: block;
  }

  .mhs-wd__badge-short {
    display: none;
  }
}

/* ---------------------------------------------------------------- список магазинов */

.mhs-pick {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mhs-pick__label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--mhs-ink);
}

/* Рамка и кольцо фокуса — у самого поля (#mhs-q), иконка лежит поверх его левого поля. */
.mhs-search {
  position: relative;
  display: block;
}

.mhs-search .mhs-ic {
  position: absolute;
  top: 12px;
  left: 15px;
  color: var(--mhs-blue);
  pointer-events: none;
}

.mhs-q {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 11px 14px 11px 45px;
  /* Контур — единственная видимая граница поля: ≥ 3:1 (WCAG 1.4.11), 3,4:1 на белом. */
  border: 1px solid #7f8c99;
  border-radius: 11px;
  background: #ffffff;
  font-size: 16px;
  line-height: 20px;
  color: var(--mhs-ink);
  -webkit-appearance: none;
  appearance: none;
}

.mhs-count {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  min-height: 18px;
  margin: 12px 0 10px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--mhs-muted);
}

.mhs-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.mhs-li {
  min-width: 0;
}

.mhs-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 44px;
  padding: 8px;
  border: 1px solid var(--mhs-line);
  border-radius: 12px;
  background: #ffffff;
  text-align: left;
}

.mhs-item[aria-current="true"] {
  border-color: #78a3cf;
  background: #f4f8fc;
}

.mhs-item__ph {
  display: block;
  flex: 0 0 auto;
  width: 68px;
  height: 65px;
  overflow: hidden;
  border-radius: 8px;
  background: #eef2f6;
}

.mhs-item__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mhs-item__copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.mhs-item__city {
  margin-bottom: 3px;
  font-size: 15px;
  line-height: 1.3;
  color: var(--mhs-ink);
  overflow-wrap: anywhere;
}

.mhs-item__addr {
  font-size: 11px;
  line-height: 1.45;
  color: var(--mhs-muted);
  overflow-wrap: anywhere;
}

.mhs-item__marks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.mhs-item__mark {
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--mhs-pale);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--mhs-blue);
}

.mhs-item__mark--closed {
  background: var(--mhs-warn-bg);
  color: var(--mhs-warn-ink);
}

.mhs-item__ic {
  width: 18px;
  height: 18px;
  color: var(--mhs-blue);
}

.mhs-pager {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.mhs-pager__btn {
  flex: 1 1 0;
  min-height: 44px;
  padding: 10px 12px;
  font-size: 13px;
}

.mhs-listmsg {
  display: grid;
  gap: 12px;
  padding: 8px 0 4px;
}

.mhs-listmsg__t {
  font-size: 14px;
  line-height: 1.5;
  color: var(--mhs-ink);
}

/* ---------------------------------------------------------------- приветствие и сообщения */

.mhs-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  border-radius: var(--mhs-radius);
}

.mhs-welcome {
  border: 1px solid #e1eaf4;
  background: #f0f6fc;
}

.mhs-welcome__copy {
  min-width: 0;
  padding: 27px 22px 20px;
}

.mhs-mini {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
  font-size: 12px;
  font-weight: 700;
  color: var(--mhs-blue);
}

.mhs-mini .mhs-ic {
  width: 17px;
  height: 17px;
}

.mhs-welcome__title {
  margin-bottom: 16px;
  font-size: 29px;
  line-height: 1.12;
  letter-spacing: -0.7px;
  font-weight: 700;
  color: var(--mhs-ink);
}

.mhs-welcome__text {
  max-width: 100%;
  font-size: 13px;
  line-height: 1.65;
  color: #5f7185;
}

.mhs-welcome__copy .mhs-warn {
  margin-top: 16px;
}

.mhs-welcome .mhs-pick {
  padding: 0 22px 22px;
}

.mhs-welcome .mhs-count {
  color: var(--mhs-pale-ink);
}

.mhs-intro-grid--msg {
  border: 1px solid var(--mhs-line);
  background: #ffffff;
}

.mhs-intro-grid--msg .mhs-pick {
  margin: 0 18px;
  padding: 18px 0;
  border-top: 1px solid var(--mhs-line);
}

.mhs-msg {
  min-width: 0;
  padding: 22px 18px;
}

.mhs-msg--load,
.mhs-msg--fatal {
  border: 1px solid var(--mhs-line);
  border-radius: var(--mhs-radius);
  background: #ffffff;
}

.mhs-msg__title {
  margin-bottom: 8px;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--mhs-ink);
  overflow-wrap: anywhere;
}

.mhs-msg__text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--mhs-muted);
}

.mhs-msg__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 16px;
}

.mhs-msg .mhs-warn {
  margin-top: 14px;
}

.mhs-load {
  padding: 35px 20px;
  border: 1px solid var(--mhs-line);
  border-radius: var(--mhs-radius);
  background: #fafbfd;
  text-align: center;
}

.mhs-load__t {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--mhs-muted);
}

/* ---------------------------------------------------------------- виды внутри слота */

.mhs-view {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--mhs-line);
  border-radius: var(--mhs-radius);
  background: #ffffff;
}

.mhs-view__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px var(--mhs-gutter);
}

.mhs-view__text {
  min-width: 0;
}

.mhs-view__eyebrow {
  margin-bottom: 5px;
}

.mhs-view__title {
  font-size: 19px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--mhs-ink);
  overflow-wrap: anywhere;
}

.mhs-pickerview .mhs-pick {
  padding: 0 var(--mhs-gutter) var(--mhs-gutter);
}

/* Галерея */
.mhs-gal__count {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--mhs-muted);
}

.mhs-gal__stage {
  position: relative;
  margin: 0 var(--mhs-gutter);
  overflow: hidden;
  border-radius: 10px;
  background: #f4f5f7;
  touch-action: pan-y;
}

.mhs-gal__frame {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
}

.mhs-gal__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mhs-gal__msg {
  position: relative;
  padding: 12px;
  font-size: 13px;
  text-align: center;
  color: var(--mhs-muted);
}

.mhs-gal__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.mhs-gal__nav--prev {
  left: 8px;
}

.mhs-gal__nav--next {
  right: 8px;
}

.mhs-gal__thumbs {
  display: flex;
  gap: 8px;
  margin: 12px var(--mhs-gutter) var(--mhs-gutter);
  padding: 3px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-inline: 4px;
  scrollbar-width: thin;
}

.mhs-gal__thumbs > li {
  flex: 0 0 auto;
}

.mhs-thumb {
  position: relative;
  display: block;
  width: 86px;
  height: 64px;
  padding: 0;
  overflow: hidden;
  border-radius: 7px;
  background: #eef2f6;
  box-shadow: 0 0 0 1px #dddddd;
}

.mhs-thumb[aria-current="true"] {
  box-shadow: 0 0 0 3px var(--mhs-blue);
}

.mhs-thumb.is-broken {
  background: #f4f5f7;
}

.mhs-thumb.is-broken .mhs-thumb__img {
  visibility: hidden;
}

.mhs-thumb__img {
  display: block;
  width: 86px;
  height: 64px;
  object-fit: cover;
}

/* Полный календарь: высота кадра — по ширине самого кадра (слоты KIT 612/504,
   содержимое календаря 607/498); порог коробки = порог окна календаря. */
.mhs-calbox {
  container-type: inline-size;
  position: relative;
  min-width: 0;
}

.mhs-calframe {
  display: block;
  width: 100%;
  height: 612px;
  border: 0;
  background: transparent;
}

@container (min-width: 768px) {
  .mhs-calframe {
    height: 504px;
  }
}

.mhs-framerr--cal {
  min-height: 240px;
}

.mhs-calday {
  padding: 14px var(--mhs-gutter) 16px;
  border-top: 1px solid var(--mhs-line);
  background: #f8fafd;
}

.mhs-calday__h {
  margin-bottom: 8px;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--mhs-ink);
}

.mhs-calday__hint {
  font-size: 13px;
  line-height: 1.5;
  color: var(--mhs-muted);
}

.mhs-calday__list,
.mhs-daylist {
  display: grid;
  gap: 8px;
}

.mhs-ev {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.mhs-ev__dot {
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--mhs-blue);
}

.mhs-ev--arr .mhs-ev__dot {
  background: var(--mhs-day-arr);
}

.mhs-ev--max .mhs-ev__dot {
  background: var(--mhs-day-red);
}

/* «День» и «ссылка» */
.mhs-dayview .mhs-daylist {
  margin: 0 var(--mhs-gutter) 16px;
}

.mhs-dayview > .mhs-btn {
  margin: 0 var(--mhs-gutter) var(--mhs-gutter);
}

.mhs-linkview {
  padding: 16px var(--mhs-gutter) 18px;
}

.mhs-link-text {
  margin: 10px 0 8px;
  font-size: 14px;
  line-height: 1.5;
}

.mhs-link-url {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #7f8c99;
  border-radius: 10px;
  background: #f8fafd;
  font-size: 16px;
  color: var(--mhs-ink);
}

.mhs-link-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.mhs-link-msg {
  min-height: 18px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--mhs-muted);
}

/* ---------------------------------------------------------------- сноска */

.mhs-foot {
  max-width: 760px;
  margin: 20px 2px 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--mhs-muted);
}

/* ---------------------------------------------------------------- фокус */

:focus-visible {
  outline: 3px solid var(--mhs-blue);
  outline-offset: 2px;
}

/* Заголовок вида получает фокус программно — кольцо только при клавиатуре. */
[tabindex="-1"]:focus:not(:focus-visible) {
  outline: none;
}

.mhs-q:focus,
.mhs-q:focus-visible {
  outline: 3px solid var(--mhs-blue);
  outline-offset: 2px;
}

/* Внутри обрезающих контейнеров (обложка, полоса миниатюр, коробка карты) —
   кольцо внутрь, с белой подложкой поверх фото. */
.mhs-cover:focus-visible {
  outline: 3px solid var(--mhs-blue);
  outline-offset: -3px;
}

.mhs-cover:focus-visible::after,
.mhs-thumb:focus-visible::after {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: 1;
  box-shadow: inset 0 0 0 2px #ffffff;
  pointer-events: none;
}

.mhs-thumb:focus-visible {
  outline: 3px solid var(--mhs-blue);
  outline-offset: -3px;
}

.mhs-mapframe:focus-visible,
.mhs-calframe:focus-visible {
  outline: 3px solid var(--mhs-blue);
  outline-offset: -3px;
}

/* ---------------------------------------------------------------- A2: ≥340 */

@media (min-width: 340px) {
  .mhs-events {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .mhs-week {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------- B: ≥480 */

@media (min-width: 480px) {
  :root {
    --mhs-gutter: 20px;
  }

  .mhs-heading {
    flex-wrap: nowrap;
  }

  .mhs-intro {
    max-width: 320px;
  }

  .mhs-change {
    min-height: 44px;
    margin-top: 20px;
    padding: 10px 12px;
  }

  .mhs-photo {
    height: 260px;
  }

  .mhs-summary {
    padding: 23px 22px 18px;
  }

  .mhs-title-row {
    flex-wrap: nowrap;
  }

  .mhs-store-h {
    font-size: 28px;
  }

  .mhs-pill {
    padding: 7px 9px;
    font-size: 11px;
  }

  .mhs-events {
    gap: 12px;
  }

  .mhs-today {
    min-height: 148px;
    padding: 17px 19px;
  }

  .mhs-stat-label,
  .mhs-stat-note {
    font-size: 12px;
  }

  .mhs-today__val {
    font-size: 52px;
  }

  .mhs-today__val.is-text {
    font-size: 23px;
  }

  .mhs-supply {
    padding: 18px;
  }

  .mhs-supply .mhs-stat-label {
    padding-right: 20px;
    font-size: 11px;
  }

  .mhs-stat-icon {
    display: block;
  }

  .mhs-supply__val {
    margin: 13px 0 6px;
    font-size: 25px;
  }

  .mhs-actions {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }

  .mhs-save {
    width: auto;
  }

  .mhs-small {
    margin-top: 10px;
    font-size: 12px;
    text-align: left;
  }

  .mhs-panel__head {
    padding: 18px 20px;
  }

  .mhs-panel__title {
    gap: 9px;
    font-size: 18px;
  }

  .mhs-panel__head .mhs-textlink {
    font-size: 13px;
  }

  .mhs-mapbox {
    height: 440px;
  }

  .mhs-mapcap {
    font-size: 12px;
  }

  .mhs-visit .mhs-panel__head {
    padding-top: 21px;
  }

  .mhs-week {
    gap: 7px;
  }

  .mhs-wd__head {
    padding: 3px 5px;
  }

  .mhs-wd__wd,
  .mhs-wd__day {
    font-size: 10px;
  }

  .mhs-item {
    gap: 14px;
    padding: 10px;
  }

  .mhs-item__ph {
    width: 86px;
    height: 70px;
  }

  .mhs-item__city {
    font-size: 16px;
  }

  .mhs-item__addr {
    font-size: 12px;
  }

  .mhs-welcome__copy {
    padding: 28px 26px 22px;
  }

  .mhs-welcome__title {
    font-size: 31px;
  }

  .mhs-welcome__text {
    font-size: 14px;
  }

  .mhs-welcome .mhs-pick {
    padding: 0 26px 26px;
  }

  .mhs-intro-grid--msg .mhs-pick {
    margin: 0 24px;
    padding: 22px 0;
  }

  .mhs-msg {
    padding: 26px 24px;
  }

  .mhs-msg__title {
    font-size: 22px;
  }

  .mhs-load {
    padding: 50px 24px;
  }

  .mhs-view__head {
    padding: 18px 20px;
  }

  .mhs-view__title {
    font-size: 22px;
  }

  .mhs-gal__frame {
    max-height: 420px;
  }

  .mhs-calday {
    padding: 16px 20px 18px;
  }
}

/* ---------------------------------------------------------------- C: ≥768 */

@media (min-width: 768px) {
  :root {
    --mhs-gutter: 18px;
  }

  .mhs-root,
  .mhs-root > *,
  .mhs-store-h,
  .mhs-view__title,
  .mhs-load__t,
  .mhs-msg__title,
  .mhs-welcome__title,
  .mhs-h1 {
    scroll-margin-top: 96px;
  }

  .mhs-heading {
    align-items: center;
    gap: 24px;
    margin-bottom: 23px;
  }

  .mhs-heading .mhs-eyebrow {
    font-size: 11px;
  }

  .mhs-h1 {
    font-size: 30px;
  }

  .mhs-intro {
    max-width: none;
    margin-top: 10px;
    font-size: 15px;
  }

  .mhs-change {
    min-height: 46px;
    margin-top: 0;
    padding: 12px 19px;
    gap: 10px;
    font-size: 14px;
  }

  .mhs-change .mhs-ic {
    width: 19px;
    height: 19px;
  }

  .mhs-card {
    grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
  }

  .mhs-photo {
    height: auto;
    min-height: 365px;
  }

  .mhs-photo-label {
    top: 18px;
    left: 18px;
  }

  .mhs-photo-count {
    bottom: 18px;
    left: 18px;
  }

  .mhs-summary {
    padding: 23px 22px 17px;
  }

  .mhs-address {
    margin: 11px 0 18px;
  }

  .mhs-today {
    padding: 16px 18px;
  }

  .mhs-today__val {
    font-size: 48px;
  }

  .mhs-supply {
    padding: 15px 13px;
  }

  .mhs-supply .mhs-stat-label {
    padding-right: 0;
  }

  .mhs-stat-icon {
    display: none;
  }

  .mhs-supply__val {
    font-size: 22px;
  }

  .mhs-actions {
    flex-wrap: wrap;
    gap: 12px;
  }

  .mhs-actions .mhs-btn {
    padding: 12px 15px;
  }

  .mhs-details {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 18px;
  }

  .mhs-panel__head {
    padding: 18px;
  }

  .mhs-mapcap {
    padding: 13px 20px;
  }

  .mhs-visit {
    padding-bottom: 17px;
  }

  .mhs-week {
    gap: 5px;
  }

  .mhs-opencal {
    margin-top: 0;
    min-height: 44px;
  }

  .mhs-contact__val {
    max-width: 370px;
  }

  .mhs-foot {
    font-size: 12px;
  }

  .mhs-intro-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .mhs-welcome__copy {
    padding: 34px 25px;
  }

  .mhs-welcome .mhs-pick {
    padding: 24px 24px 24px 0;
  }

  .mhs-intro-grid--msg .mhs-pick {
    margin: 0;
    padding: 24px 24px 24px 0;
    border-top: 0;
  }

  .mhs-msg {
    padding: 34px 28px;
  }

  .mhs-msg__title {
    font-size: 24px;
  }

  .mhs-intro-grid .mhs-list,
  .mhs-pickerview .mhs-list {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }

  .mhs-pager {
    max-width: 420px;
  }

  .mhs-view__head {
    padding: 20px 22px;
  }

  .mhs-view__title {
    font-size: 24px;
  }

  .mhs-gal__frame {
    height: 440px;
    max-height: none;
    aspect-ratio: auto;
  }

  .mhs-calday {
    padding: 16px 22px 20px;
  }
}

/* ---------------------------------------------------------------- ≥1051: косметика (высота та же) */

@media (min-width: 1051px) {
  :root {
    --mhs-gutter: 22px;
  }

  .mhs-summary {
    padding: 27px 28px 20px;
  }

  .mhs-store-h {
    font-size: 30px;
  }

  .mhs-address {
    margin-bottom: 22px;
  }

  .mhs-today__val {
    font-size: 52px;
  }

  .mhs-supply {
    padding: 17px 16px;
  }

  .mhs-supply .mhs-stat-label {
    padding-right: 20px;
  }

  .mhs-stat-icon {
    display: block;
  }

  .mhs-supply__val {
    font-size: 24px;
  }

  .mhs-actions {
    flex-wrap: nowrap;
    gap: 14px;
  }

  .mhs-details {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 22px;
    margin-top: 22px;
  }

  .mhs-panel__head {
    padding: 20px 22px;
  }

  .mhs-welcome__copy {
    padding: 44px 40px;
  }

  .mhs-welcome__title {
    font-size: 36px;
  }

  .mhs-welcome__text {
    max-width: 370px;
  }
}

@media (min-width: 1500px) {
  :root:not([data-embed="1"]) .mhs-app {
    max-width: 1320px;
  }

  .mhs-photo {
    min-height: 380px;
  }
}

/* ---------------------------------------------------------------- наведение */

@media (hover: hover) {
  .mhs-btn--primary:hover {
    background: var(--mhs-blue-dark);
  }

  .mhs-btn--outline:hover:not(:disabled) {
    border-color: var(--mhs-blue);
    background: #f2f7fc;
  }

  .mhs-textlink:hover {
    text-decoration: underline;
  }

  .mhs-iconbtn:hover {
    background: #e7edf3;
  }

  .mhs-cover:not(:disabled):hover .mhs-cover__img {
    transform: scale(1.03);
  }

  .mhs-item:hover {
    border-color: #78a3cf;
    background: #f4f8fc;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}