/*
 * Тема витрины «Медиа-Марк».
 *
 * Дизайн-система взята из эталонов docs/reference (карточки товаров, калькулятор).
 * Все классы темы с префиксом mm-: контент страниц приходит из админки со своими
 * стилями (.fc2-article, .pjc и т.п.) и не должен ломаться от темы.
 * Голые теги стилизуются только внутри .mm-prose.
 */

/* ---------- шрифты (локальные, variable, latin + cyrillic) ----------
 * Имена семейств совпадают с эталонной вёрсткой: 'Inter' и 'Roboto Mono'. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter-cyrillic-wght.woff2) format('woff2-variations'), url(../fonts/inter-cyrillic-wght.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter-latin-wght.woff2) format('woff2-variations'), url(../fonts/inter-latin-wght.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 700;
  src: url(../fonts/roboto-mono-cyrillic-wght.woff2) format('woff2-variations'), url(../fonts/roboto-mono-cyrillic-wght.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 700;
  src: url(../fonts/roboto-mono-latin-wght.woff2) format('woff2-variations'), url(../fonts/roboto-mono-latin-wght.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- переменные ---------- */

:root {
  --white: #ffffff;
  --black: #0a0a0a;
  --navy: #132a5e;
  --navy-light: #1e3a7b;
  --gray-50: #fafafa;
  --gray-100: #f2f2f4;
  --gray-300: #dcdce1;
  --gray-500: #8b8b94;
  --text-muted: #43434a;
  --label-on-dark: #a9b6e6;
  --text-on-dark: #d3d9f7;
  --gray-600: #6b6b75;
  --green: #1a7f37;
  --amber: #9a6700;
  --red: #d1242f;
  --mm-focus-ring: 0 0 0 3px rgba(45, 152, 218, .45);
  --mm-btn-h: 36px;
  --shadow-color: 15, 23, 42;

  --mm-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mm-font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  --mm-gradient: linear-gradient(135deg, var(--navy), var(--black));
  --mm-gradient-soft: linear-gradient(135deg, rgba(19, 42, 94, .08), rgba(19, 42, 94, .04));
  --mm-shadow: 0 1px 2px rgba(var(--shadow-color), .04), 0 8px 24px rgba(var(--shadow-color), .06);
  --mm-shadow-card: 0 1px 2px rgba(var(--shadow-color), .04), 0 8px 24px rgba(var(--shadow-color), .06), 0 30px 60px -20px rgba(var(--shadow-color), .12);
  --mm-shadow-hover: 0 4px 10px rgba(var(--shadow-color), .06), 0 20px 34px -12px rgba(var(--shadow-color), .22);

  --mm-radius-card: 28px;
  --mm-radius: 24px;
  --mm-radius-sm: 18px;
  --mm-radius-pill: 100px;

  --mm-container: 1200px;
  --mm-gutter: 24px;
  --mm-header-h: 72px;
}

/* ---------- минимальный сброс ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--mm-font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video {
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
}

:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

/* ---------- раскладка ---------- */

.mm-container {
  width: 100%;
  max-width: var(--mm-container);
  margin-inline: auto;
  padding-inline: var(--mm-gutter);
}

.mm-main {
  flex: 1 0 auto;
}

.mm-page {
  padding-top: 24px;
  padding-bottom: 0px;
}

.mm-section {
  margin-block: 20px 0px;
}

.mm-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.mm-section__title {
  margin: 0;
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.2;
}

.mm-section__lead {
  margin: 8px 0 0;
  max-width: 640px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--gray-500);
}

.mm-grid {
  display: grid;
  gap: 20px;
}

.mm-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mm-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- типографика для обычного текста (только внутри .mm-prose) ---------- */

.mm-prose {
  max-width: 760px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-muted);
}

.mm-prose > :first-child { margin-top: 0; }
.mm-prose > :last-child { margin-bottom: 0; }

.mm-prose :where(h1, h2, h3, h4) {
  color: var(--black);
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.2;
  margin: 1.6em 0 .5em;
}

.mm-prose h1 { font-size: clamp(28px, 4.6vw, 44px); letter-spacing: -.02em; }
.mm-prose h2 { font-size: clamp(22px, 3vw, 28px); }
.mm-prose h3 { font-size: 19px; }
.mm-prose h4 { font-size: 16px; }

.mm-prose :where(p, ul, ol, blockquote, table) { margin: 0 0 1em; }
.mm-prose :where(ul, ol) { padding-left: 1.3em; }
.mm-prose li + li { margin-top: .35em; }
.mm-prose strong { color: var(--black); font-weight: 600; }

.mm-prose a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.mm-prose a:hover { text-decoration-thickness: 2px; }

.mm-prose img { border-radius: var(--mm-radius-sm); }

.mm-prose blockquote {
  padding: 16px 20px;
  border-left: 3px solid var(--navy);
  background: var(--gray-50);
  border-radius: 0 12px 12px 0;
}

.mm-prose table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mm-prose :where(th, td) { padding: 10px 12px; border-bottom: 1px solid var(--gray-100); text-align: left; }
.mm-prose th { color: var(--black); font-weight: 700; }

/* ---------- заголовки страниц темы ---------- */

.mm-title {
  margin: 0 0 12px;
  font-size: clamp(28px, 4.6vw, 44px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.14;
}

.mm-title span {
  background: var(--mm-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mm-subtitle {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--gray-600); /* 5,3:1 на белом (было --gray-500, 3,4:1) */
}

/* ---------- лейбл (Roboto Mono, капс) ---------- */

.mm-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mm-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--navy);
}

.mm-label--pill {
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--mm-radius-pill);
  background: var(--mm-gradient-soft);
}

.mm-label--pill::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.mm-label--muted { color: var(--gray-500); }

/* ---------- карточка ---------- */

.mm-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--mm-radius-card);
  box-shadow: var(--mm-shadow-card);
  overflow: hidden;
}

.mm-card--link {
  color: inherit;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}

.mm-card--link:hover {
  transform: translateY(-3px);
  box-shadow: var(--mm-shadow-hover);
}

.mm-card__media {
  aspect-ratio: 16 / 10;
  background:
    linear-gradient(135deg, rgba(19, 42, 94, .06), rgba(19, 42, 94, .02)),
    repeating-linear-gradient(45deg, var(--gray-100) 0, var(--gray-100) 1px, transparent 1px, transparent 14px);
  overflow: hidden;
}

.mm-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mm-card__media--contain img {
  object-fit: contain;
  padding: 16px;
}

.mm-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  padding: 24px 26px 26px;
}

.mm-card__title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.3;
  color: var(--black);
}

.mm-card__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

.mm-card__footer {
  margin-top: auto;
  padding-top: 6px;
}

.mm-card__price {
  font-family: var(--mm-font-mono);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--black);
}

.mm-card__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}

.mm-card__more::after {
  content: '→';
  transition: transform .2s ease;
}

.mm-card--link:hover .mm-card__more::after { transform: translateX(3px); }

/* ---------- кнопки (эталон docs/reference/product-top-block.html) ----------
 * Базовая кнопка блочная, на всю ширину, высота --mm-btn-h (36px, на телефоне 44px).
 * Для кнопок-ссылок в тексте страниц (герой, заголовки секций) модификатор --inline. */

.mm-btn { display: block; width: 100%; height: var(--mm-btn-h); padding: 0 20px; border-radius: 10px; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: filter .15s ease, box-shadow .15s ease; }
.mm-btn[hidden] { display: none; }
/* Кнопка-ссылка (<a class="mm-btn">): без этого текст прижат влево и подчёркнут браузером. */
.mm-btn { display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; }
.mm-btn:hover, .mm-btn:focus, .mm-btn:focus-visible, .mm-btn:active { text-decoration: none; }
a.mm-btn { color: inherit; }.mm-btn:focus-visible { outline: none; box-shadow: var(--mm-focus-ring); }
a.mm-btn--primary, .mm-btn--primary { color: #fff; background: linear-gradient(135deg, #00508a, black); border: 1px solid #2D98DA; }
.mm-btn--primary:hover { filter: brightness(1.18); }
a.mm-btn--secondary, .mm-btn--secondary { margin-top: 8px; color: var(--black); background: linear-gradient(180deg, #ffffff, #e9ecf0); border: 1px solid #d3d7de; }
.mm-btn--secondary:hover { filter: brightness(.97); }
/* Navy-градиент темы (корзина и оформление заказа). */
.mm-btn--navy, a.mm-btn--navy { color: #fff; background: var(--mm-gradient); border: 1px solid transparent; }
.mm-btn--navy:hover { filter: brightness(1.18); }
.mm-btn--inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  margin-top: 0;
  text-decoration: none;
  white-space: nowrap;
}

a.mm-btn--light, .mm-btn--light { color: var(--navy); background: #fff; border: 1px solid transparent; }
.mm-btn--light:hover { filter: brightness(.96); }

/* ---------- плашка (градиент navy) ---------- */

.mm-plate {
  position: relative;
  overflow: hidden;
  padding: 32px 34px;
  border-radius: var(--mm-radius);
  background: linear-gradient(150deg, var(--navy) 0%, var(--black) 100%);
  color: var(--white);
}

.mm-plate::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  pointer-events: none;
}

.mm-plate > * { position: relative; }

.mm-plate .mm-label { color: var(--label-on-dark); }

.mm-plate :where(h1, h2, h3) { color: var(--white); }

.mm-plate :where(p) { color: var(--text-on-dark); }

/* ---------- шапка ---------- */

.mm-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--gray-100);
}

.mm-header__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: var(--mm-container);
  min-height: var(--mm-header-h);
  margin-inline: auto;
  padding-inline: var(--mm-gutter);
}

.mm-header__logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--black);
  text-decoration: none;
}

.mm-header__logo img {
  display: block;
  width: auto;
  max-width: 170px;
  /*max-height: 40px;*/
}

.mm-nav {
  flex: 1;
  min-width: 0;
}

.mm-nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mm-nav__link {
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  border-radius: var(--mm-radius-pill);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}

.mm-nav__link:hover {
  background: var(--gray-100);
  color: var(--black);
}

.mm-nav__link.is-active {
  background: var(--mm-gradient-soft);
  color: var(--navy);
}

.mm-header__phone {
  flex: none;
  font-family: var(--mm-font-mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--black);
  text-decoration: none;
  white-space: nowrap;
}

.mm-header__phone:hover { color: var(--navy); }

/* ---------- футер ---------- */

.mm-footer {
  margin-top: auto;
  background: linear-gradient(150deg, var(--navy) 0%, var(--black) 100%);
  color: var(--text-on-dark);
}

.mm-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1.3fr);
  gap: 32px 40px;
  max-width: var(--mm-container);
  margin-inline: auto;
  padding: 56px var(--mm-gutter) 32px;
}

.mm-footer__brand {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--white);
}

.mm-footer__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 10px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mm-footer__link,
.mm-footer__email {
  font-size: 14px;
  color: var(--text-on-dark);
  text-decoration: none;
}

.mm-footer__link:hover,
.mm-footer__email:hover,
.mm-footer__phone:hover {
  color: var(--white);
}

.mm-footer__contacts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  line-height: 1.5;
}

.mm-footer__phone {
  font-family: var(--mm-font-mono);
  font-size: 17px;
  font-weight: 600;
  color: var(--white);
  text-decoration: none;
}

.mm-footer__hours {
  color: var(--label-on-dark);
}

.mm-footer__contacts > :empty { display: none; }

.mm-footer__copyright {
  grid-column: 1 / -1;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-family: var(--mm-font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--label-on-dark);
}

/* ---------- главная ---------- */

.mm-hero {
  padding: 56px 0 8px;
  text-align: center;
}

.mm-hero .mm-label { margin-bottom: 18px; }

.mm-hero .mm-subtitle {
  max-width: 530px;
  margin: 0 auto 28px;
}

.mm-hero__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.mm-category-card .mm-card__body { padding: 26px; }

.mm-contacts {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: 24px 40px;
}

.mm-contacts__title {
  margin: 12px 0 10px;
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 800;
  letter-spacing: -.015em;
}

.mm-contacts__list {
  display: grid;
  gap: 14px;
  margin: 0;
}

.mm-contacts__list dt {
  margin-bottom: 4px;
}

.mm-contacts__list dd {
  margin: 0;
  font-size: 15px;
  color: var(--white);
}

.mm-contacts__list a {
  color: var(--white);
  text-decoration: none;
}

.mm-contacts__phone {
  font-family: var(--mm-font-mono);
  font-size: 20px;
  font-weight: 600;
}

/* ---------- FAQ: сетка статей ---------- */

/* Под вступлением больше нет сетки статей: нижнего отступа до подвала нет (раньше 40px разделяли их). */
.mm-faq-intro { margin-bottom: 0; }

.mm-faq-head {
  max-width: 760px;
  margin: 24px auto 40px;
  text-align: center;
}

.mm-faq-head .mm-label { margin-bottom: 16px; }

/* ---------- ошибки ---------- */

.mm-errorpage {
  max-width: 640px;
  margin: 0 auto;
  padding: 72px 0 32px;
  text-align: center;
}

.mm-errorpage__code {
  margin-bottom: 18px;
}

.mm-errorpage .mm-subtitle { margin-bottom: 28px; }

.mm-errorpage__actions {
  display: flex;
  justify-content: center;      /* центрирование по горизонтали */
  align-items: center;          /* выравнивание по вертикали (по центру оси cross-axis) */
  gap: 12px;                    /* расстояние между кнопками */
  flex-wrap: wrap;              /* перенос, если не влезают */
}

/* Опционально: принудительно одинаковые высоты/отступы у кнопок */
.mm-errorpage__actions a.mm-btn {
  margin: 0;                    /* убираем внешние отступы */
  padding: 10px 16px;           /* одинаковые внутренние отступы */
  box-sizing: border-box;       /* чтобы padding не ломал размеры */
  height: 40px;                 /* или фиксированная высота, если нужно */
  width: 220px;
}

/* ---------- служебное ---------- */

.mm-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* «Перейти к содержимому» (layouts/site): скрыта, пока не получит фокус с клавиатуры, затем видна поверх шапки.
   Свой класс, а не .mm-visually-hidden: там position с !important, его не отменить при фокусе. */
.mm-skip-link:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.mm-skip-link:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--navy);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  outline: none;
  box-shadow: var(--mm-focus-ring);
}

/* Цель ссылки: main получает фокус программно, рамку вокруг всей страницы не рисуем. */
#main:focus { outline: none; }

/* ---------- адаптивность (брейкпоинты эталонов: 900 / 760 / 560) ---------- */

@media (max-width: 900px) {
  .mm-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mm-header__inner { gap: 16px; }
  .mm-footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mm-footer__brand { grid-column: 1 / -1; }
}

/* Шапка в одну строку на 761–899 px: меню, корзина и телефон не помещались («Контакты» налезали на «Корзину»).
   Здесь у корзины остаётся только значок (подпись — для чтения с экрана, как на телефоне), пункты меню плотнее.
   На ≤ 760 и ≥ 900 px вид не меняется. */
@media (min-width: 761px) and (max-width: 899px) {
  .mm-header__inner { gap: 12px; }
  .mm-nav__link { padding: 9px 11px; }
  .mm-cart { padding: 9px 10px; }
  .mm-cart__label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (max-width: 760px) {
  :root {
    --mm-gutter: 16px;
    --mm-header-h: 60px;
    --mm-btn-h: 44px;
  }

  .mm-grid--3,
  .mm-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .mm-section { margin-block: 40px; }
  .mm-page { padding-bottom: 56px; }

  /* Без бургер-меню: логотип и телефон в первой строке, меню прокручивается во второй. */
  .mm-header__inner {
    flex-wrap: wrap;
    row-gap: 0;
    padding-top: 8px;
  }

  .mm-header__phone { margin-left: auto; font-size: 14px; }

  .mm-nav {
    order: 3;
    flex-basis: 100%;
    margin-inline: calc(var(--mm-gutter) * -1);
    padding: 4px var(--mm-gutter) 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .mm-nav::-webkit-scrollbar { display: none; }

  .mm-nav__link { padding: 8px 12px; font-size: 13.5px; }

  .mm-card { border-radius: var(--mm-radius); }
  .mm-card__body { padding: 20px 20px 22px; }
  .mm-plate { padding: 26px 22px; border-radius: var(--mm-radius-sm); }

  .mm-contacts { grid-template-columns: 1fr; }

  .mm-hero { padding-top: 36px; }

  /* Телефон: кликабельные области шапки и подвала не ниже 44 px; промежутки уменьшены, чтобы высота подвала почти не выросла. */
  .mm-nav__link { min-height: 44px; }
  .mm-cart { min-height: 44px; }
  .mm-header__phone { display: inline-flex; align-items: center; min-height: 44px; }
  .mm-footer__list { row-gap: 0; }
  .mm-footer__link,
  .mm-footer__email,
  .mm-footer__phone { display: inline-flex; align-items: center; min-height: 44px; }
  .mm-footer__contacts { gap: 0; }
}

@media (max-width: 560px) {
  .mm-grid--2,
  .mm-grid--3,
  .mm-grid--4 { grid-template-columns: 1fr; }

  .mm-footer__inner { grid-template-columns: 1fr; padding-top: 40px; }
  .mm-footer__list { grid-template-columns: 1fr; }

  .mm-hero__actions .mm-btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ==========================================================================
   Страница товара: верхний блок и окно заявок.
   Перенесено из эталона docs/reference/product-top-block.html (без демо-панели).
   ========================================================================== */

/* Ширина — общая переменная --mm-container (1200 px вместе с отступами, как каталог, шапка и подвал; шаг hot-4). */
.mm-product-top{ max-width:var(--mm-container); margin:0 auto; padding:20px 24px 40px; }
.mm-crumbs{ display:flex; flex-wrap:wrap; gap:8px; font-size:13px; color:var(--gray-500); margin:0 0 20px; }
.mm-crumbs a{ color:inherit; text-decoration:none; }
.mm-crumbs a:hover{ color:var(--navy); }

.mm-product-top__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:start; }

/* Колонки верхнего блока не растягиваются под ширину ленты превью (иначе на телефоне галерея шире экрана). */
.mm-gallery, .mm-buy{ min-width:0; }

/* Настройки галереи — подкручивать здесь.
   --mm-gal-arrow-bg / --mm-gal-arrow-bg-hover: подложка стрелок в обычном состоянии и при наведении/фокусе
   (белый с альфой: 0 — прозрачно, 1 — непрозрачно). --mm-gal-bg / --mm-gal-pad: фон и внутренний отступ
   кадра и превью (фото вписывается целиком, contain). --mm-gal-frame: тонкая рамка плашек (чтобы белое фото
   не терялось на белом фоне). --mm-gal-active: цвет рамки активного превью. */
.mm-gallery{
  --mm-gal-arrow-bg: rgba(255, 255, 255, .4);
  --mm-gal-arrow-bg-hover: rgba(255, 255, 255, .85);
  --mm-gal-bg: #fff;
  --mm-gal-pad: 0px;
  --mm-gal-frame: var(--gray-300);
  --mm-gal-active: var(--navy);
}

/* Галерея: квадратная рамка (страница не «прыгает» при загрузке), внутри — лента кадров на scroll-snap. */
.mm-gallery__main{ position:relative; aspect-ratio:1 / 1; border-radius:20px; background:var(--mm-gal-bg); border:1px solid var(--mm-gal-frame); overflow:hidden; }
/* Фокус на ленте кадров: кольцо снаружи рамки (фото без отступа закрыло бы кольцо внутри). */
.mm-gallery__main:has(> .mm-gallery__track:focus-visible){ box-shadow:0 0 0 3px rgba(45,152,218,.45); }
.mm-gallery__track{ position:absolute; inset:0; display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-behavior:smooth; overscroll-behavior-x:contain; scrollbar-width:none; outline:none; }
.mm-gallery__track::-webkit-scrollbar{ display:none; }
.mm-gallery__slide{ flex:0 0 100%; height:100%; display:flex; align-items:center; justify-content:center; scroll-snap-align:start; scroll-snap-stop:always; padding:var(--mm-gal-pad); color:var(--gray-600); font-size:15px; user-select:none; }
/* Главное фото, как превью: вписано в квадрат целиком, без обрезки. */
.mm-gallery__slide img{ width:100%; height:100%; object-fit:contain; display:block; -webkit-user-drag:none; }

/* Стрелки — полукруги «D», прижатые к краям кадра; закруглена только внутренняя сторона.
   Видимая часть 36×72, область нажатия расширена до 44 px невидимым ::after. */
.mm-gallery__arrow{ position:absolute; top:50%; z-index:2; width:36px; height:72px; margin-top:-36px; padding:0; border:0; background:var(--mm-gal-arrow-bg); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); color:var(--black); cursor:pointer; display:flex; align-items:center; box-shadow:0 1px 6px rgba(15,23,42,.12); transition:background .15s ease; }
.mm-gallery__arrow::after{ content:""; position:absolute; top:0; bottom:0; width:44px; }
/* Тонкая светлая тень у шеврона: читается и на тёмных, и на светлых фото при прозрачной подложке. */
.mm-gallery__arrow svg{ display:block; flex:none; filter:drop-shadow(0 0 1.5px rgba(255,255,255,.95)) drop-shadow(0 0 1px rgba(255,255,255,.8)); }
.mm-gallery__arrow:hover{ background:var(--mm-gal-arrow-bg-hover); }
.mm-gallery__arrow:focus-visible{ outline:none; background:var(--mm-gal-arrow-bg-hover); box-shadow:0 0 0 3px rgba(45,152,218,.55); }
.mm-gallery__arrow--prev{ left:0; border-radius:0 36px 36px 0; justify-content:flex-start; padding-left:4px; }
.mm-gallery__arrow--prev::after{ left:0; }
.mm-gallery__arrow--next{ right:0; border-radius:36px 0 0 36px; justify-content:flex-end; padding-right:4px; }
.mm-gallery__arrow--next::after{ right:0; }

/* Счётчик «2 / 5» — на телефоне, где стрелок нет. */
.mm-gallery__counter{ position:absolute; right:12px; bottom:12px; z-index:2; display:none; padding:4px 10px; border-radius:100px; background:rgba(10,10,10,.55); color:#fff; font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; pointer-events:none; }

/* Превью: плашка 1:1 на белом фоне, фото вписано целиком (contain) без отступа; углы обрезает overflow:hidden.
   Рамка активного превью рисуется поверх фото (::after с inset-тенью), поэтому фото её не перекрывает. */
.mm-gallery__thumbs{ display:flex; gap:10px; list-style:none; margin:12px 0 0; padding:2px; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; }
.mm-gallery__thumbs::-webkit-scrollbar{ display:none; }
.mm-gallery__thumbs li{ flex:0 0 calc((100% - 40px) / 5); min-width:56px; scroll-snap-align:start; }
.mm-gallery__thumb{ position:relative; display:block; aspect-ratio:1 / 1; width:100%; padding:var(--mm-gal-pad); border:1px solid var(--mm-gal-frame); border-radius:12px; background:var(--mm-gal-bg); cursor:pointer; font:inherit; font-size:12px; color:var(--gray-600); overflow:hidden; opacity:.75; transition:opacity .15s ease, border-color .15s ease; }
.mm-gallery__thumb:hover{ opacity:1; }
.mm-gallery__thumb:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(45,152,218,.45); opacity:1; }
.mm-gallery__thumb img{ width:100%; height:100%; object-fit:contain; display:block; }
.mm-gallery__thumb::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; }
/* Активное: рамка 1 px того же цвета + 1 px внутрь поверх фото = 2 px; ширина рамки не меняется, превью не «прыгает». */
.mm-gallery__thumb.is-active{ border-color:var(--mm-gal-active); opacity:1; }
.mm-gallery__thumb.is-active::after{ box-shadow:inset 0 0 0 1px var(--mm-gal-active); }

@media (max-width: 760px), (hover: none) and (pointer: coarse){
  .mm-gallery__arrow{ display:none; }
  .mm-gallery__counter{ display:block; }
}

@media (prefers-reduced-motion: reduce){
  .mm-gallery__track{ scroll-behavior:auto; }
}

/* Кнопки покупки: раскладка («В корзину» на всю ширину, ниже два в ряд) — в блоке hot-10 в конце файла. */
.mm-buy__actions .mm-btn{ margin:0; }
.mm-buy .mm-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(45,152,218,.45); }

.mm-buy__title{ margin:0 0 14px; font-size:clamp(26px, 3.2vw, 36px); font-weight:800; letter-spacing:-.02em; line-height:1.15; }

.mm-price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:12px; margin:0 0 14px; }
.mm-price__now{ font-size:32px; font-weight:700; letter-spacing:-.01em; }
.mm-price__badge{ font-size:13px; font-weight:600; color:var(--red); background:rgba(209,36,47,.1); padding:3px 9px; border-radius:8px; }
.mm-price__old{ font-size:16px; color:var(--gray-500); text-decoration:line-through; }

.mm-stock{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; padding:6px 12px; border-radius:100px; margin:0 0 18px; }
.mm-stock__dot{ width:8px; height:8px; border-radius:50%; background:currentColor; }
/* Текст меток на тон темнее цветов темы (переменные не меняются): контраст ≥ 4,5:1 на своём фоне — 5,2 / 5,0 / 5,1. */
.mm-stock--in{ color:#17732f; background:rgba(26,127,55,.1); }
.mm-stock--pre{ color:#8a5c00; background:rgba(154,103,0,.12); }
.mm-stock--out{ color:#c0202a; background:rgba(209,36,47,.1); }

/* Метки товара (components/product-badges): наличие, затем «Хит». Отступ снизу — у обёртки. */
.mm-badges{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 18px; }
.mm-badges .mm-stock{ margin:0; }
/* Белый на #dc2626 — контраст 4,8:1. */
.mm-hit{ display:inline-flex; align-items:center; font-size:13px; font-weight:600; padding:6px 12px; border-radius:100px; color:#fff; background:#dc2626; }

.mm-buy__summary{ margin:22px 0 0; padding:18px 0 0; border-top:1px solid var(--gray-300); font-size:15px; line-height:1.6; color:var(--gray-600); }
.mm-buy__summary[hidden]{ display:none; }

.mm-modal[hidden]{ display:none; }
.mm-modal{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:16px; }
.mm-modal__backdrop{ position:absolute; inset:0; background:rgba(10,10,10,.5); }
.mm-modal__dialog{ position:relative; width:100%; max-width:440px; max-height:calc(100vh - 32px); overflow:auto; background:#fff; border-radius:24px; padding:28px; box-shadow:0 24px 60px rgba(15,23,42,.28); }
.mm-modal__close{ position:absolute; top:14px; right:14px; width:36px; height:36px; border:0; border-radius:50%; background:var(--gray-100); font-size:20px; line-height:1; cursor:pointer; color:var(--gray-500); }
.mm-modal__title{ margin:0 0 4px; font-size:22px; font-weight:800; letter-spacing:-.01em; }
.mm-modal__sub{ margin:0 0 20px; font-size:14px; color:var(--gray-500); }
.mm-field{ display:block; margin:0 0 14px; }
.mm-field > span{ display:block; margin:0 0 6px; font-size:13px; font-weight:600; }
.mm-field input, .mm-field textarea{ width:100%; font:inherit; font-size:15px; padding:10px 12px; border:1px solid var(--gray-300); border-radius:10px; background:#fff; color:var(--black); }
.mm-field textarea{ resize:vertical; min-height:96px; }
.mm-field input:focus, .mm-field textarea:focus{ outline:none; border-color:#2D98DA; box-shadow:0 0 0 3px rgba(45,152,218,.2); }
.mm-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.mm-consent{ display:flex; gap:10px; align-items:flex-start; margin:4px 0 16px; font-size:12.5px; line-height:1.45; color:var(--gray-600); }
.mm-consent input{ margin-top:2px; flex:none; }
.mm-consent a{ color:var(--navy); }
.mm-error{ margin:0 0 12px; font-size:13px; color:var(--red); }
.mm-error[hidden], .mm-modal__done[hidden], #askForm[hidden]{ display:none; }
.mm-modal__done{ text-align:center; padding:12px 0 4px; }
.mm-modal__done h3{ margin:0 0 6px; font-size:20px; }
.mm-modal__done p{ margin:0 0 18px; color:var(--gray-600); font-size:14px; }

@media (max-width: 760px){
  .mm-product-top__grid{ grid-template-columns:1fr; gap:24px; }
  .mm-gallery__thumbs li{ flex-basis:calc((100% - 30px) / 4); }
}

/* ---------- страница товара: дополнения к эталону ---------- */


/* Отправка заявки: кнопка неактивна, пока идёт запрос. */
.mm-btn[disabled]{ cursor:progress; filter:grayscale(.3) brightness(1.05); }

/* Описание товара приходит из админки со своей вёрсткой (.dnx-article и т.п.). */
.mm-product-desc{ padding:8px 0 0px; }

/* Шаг hot-4: внешняя обёртка оформленного описания (<div class="…-article"> прямо в .mm-product-desc) — на ширину
   --mm-container вместо своих 1040 px из <style> описания; разделитель и фото-карусель тянутся вместе с ней.
   Специфичность (0,2,1)/(0,3,1) выше правил описаний вида .xmc-article{…} (0,1,0) и .xmc-article .carousel{…} (0,2,0),
   поэтому !important не нужен. Внутренние блоки, пропорции кадров, страницы и статьи не затрагиваются. */
.mm-product-desc > div[class$="-article"]{ max-width:var(--mm-container); }
.mm-product-desc > div[class$="-article"] .section-gap{ max-width:none; }
.mm-product-desc > div[class$="-article"] .carousel{ max-width:none; }

.mm-related{ padding-bottom:72px; }

/* Временное сообщение (например, «Корзина появится на следующем шаге»). */
.mm-toast{ position:fixed; left:50%; bottom:24px; z-index:1100; max-width:calc(100% - 32px); padding:12px 18px; border-radius:12px; background:var(--black); color:#fff; font-size:14px; line-height:1.4; box-shadow:0 12px 32px rgba(15,23,42,.28); transform:translate(-50%, 12px); opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; }
.mm-toast.is-visible{ opacity:1; transform:translate(-50%, 0); }

/* ==========================================================================
   Каталог: заголовок, вкладки категорий, фильтры, карточки, пагинация.
   ========================================================================== */

.mm-catalog{ padding-top:20px; padding-bottom:72px; }
.mm-catalog__head{ margin-bottom:22px; }
.mm-catalog__title{ margin:0; font-size:clamp(28px, 4vw, 40px); font-weight:800; letter-spacing:-.02em; line-height:1.15; }
.mm-catalog__intro{ margin-top:14px; }
.mm-catalog__count{ margin:8px 0 0; font-size:14px; color:var(--gray-500); }

.mm-tabs{ display:flex; gap:8px; margin:0 0 20px; padding:2px; list-style:none; overflow-x:auto; scrollbar-width:none; }
.mm-tabs::-webkit-scrollbar{ display:none; }
.mm-tabs__link{ display:inline-flex; align-items:center; height:36px; padding:0 16px; border:1px solid var(--gray-300); border-radius:100px; background:#fff; color:var(--black); font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap; transition:border-color .15s ease, background .15s ease; }
.mm-tabs__link:hover{ border-color:var(--navy); }
.mm-tabs__link.is-active{ border-color:var(--navy); background:var(--mm-gradient-soft); color:var(--navy); }

.mm-filters{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)) auto; gap:12px; align-items:end; margin:0 0 28px; padding:18px; border:1px solid var(--gray-100); border-radius:20px; background:var(--gray-50); }
.mm-filters__field{ display:flex; flex-direction:column; gap:6px; min-width:0; margin:0; padding:0; border:0; }
.mm-filters__label{ padding:0; font-size:12px; font-weight:600; color:var(--gray-600); }
.mm-filters select,
.mm-filters input{ width:100%; height:var(--mm-btn-h); padding:0 10px; border:1px solid var(--gray-300); border-radius:10px; background:#fff; color:var(--black); font:inherit; font-size:14px; }
.mm-filters select:focus,
.mm-filters input:focus{ outline:none; border-color:#2D98DA; box-shadow:0 0 0 3px rgba(45,152,218,.2); }
.mm-filters__range{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.mm-filters__actions{ display:flex; gap:12px; align-items:center; }
.mm-filters__actions .mm-btn{ width:auto; }
.mm-filters__reset{ font-size:13px; color:var(--gray-600); white-space:nowrap; }
.mm-filters__reset:hover{ color:var(--navy); }

.mm-products{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:20px; }

.mm-product-card{ display:flex; flex-direction:column; min-width:0; overflow:hidden; border:1px solid var(--gray-100); border-radius:20px; background:#fff; color:inherit; text-decoration:none; box-shadow:var(--mm-shadow); transition:transform .25s ease, box-shadow .25s ease; }
.mm-product-card:hover{ transform:translateY(-3px); box-shadow:var(--mm-shadow-hover); }
.mm-product-card:focus-visible{ outline:none; box-shadow:var(--mm-focus-ring); }
.mm-product-card__media{ position:relative; aspect-ratio:1 / 1; background:var(--gray-100); overflow:hidden; }
.mm-product-card__media img{ display:block; width:100%; height:100%; object-fit:cover; }
.mm-product-card__placeholder{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:16px; color:var(--gray-500); font-size:13px; text-align:center; }
.mm-product-card__body{ display:flex; flex-direction:column; gap:8px; flex:1; padding:16px 18px 18px; }
.mm-product-card__title{ margin:0; font-size:15px; font-weight:700; line-height:1.35; color:var(--black); }
.mm-product-card__text{ display:-webkit-box; margin:0; overflow:hidden; font-size:13px; line-height:1.5; color:var(--gray-600); -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; }
.mm-product-card__footer{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin-top:auto; padding-top:4px; }
.mm-product-card .mm-price{ gap:8px; margin:0; }
.mm-product-card .mm-price__now{ font-size:19px; }
.mm-product-card .mm-price__now--request{ font-size:15px; font-weight:600; color:var(--gray-600); }
.mm-product-card .mm-price__old{ font-size:13px; }
.mm-product-card .mm-price__badge{ font-size:12px; padding:2px 7px; }
.mm-product-card .mm-stock{ margin:0; padding:4px 10px; font-size:12px; }
.mm-product-card .mm-badges{ margin:0; gap:6px; }
.mm-product-card .mm-hit{ padding:4px 10px; font-size:12px; }

.mm-empty{ padding:48px 24px; border:1px dashed var(--gray-300); border-radius:20px; text-align:center; }
.mm-empty__title{ margin:0 0 8px; font-size:19px; font-weight:800; }
.mm-empty p{ margin:0 0 18px; color:var(--gray-600); font-size:14px; }

.mm-pagination{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:36px 0 0; padding:0; list-style:none; }
.mm-pagination__link{ display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 12px; border:1px solid var(--gray-300); border-radius:10px; background:#fff; color:var(--black); font-size:14px; font-weight:600; text-decoration:none; }
a.mm-pagination__link:hover{ border-color:var(--navy); color:var(--navy); }
.mm-pagination__link.is-active{ border-color:var(--navy); background:var(--navy); color:#fff; }
.mm-pagination__link.is-disabled{ color:var(--gray-300); }

@media (max-width: 900px){
  .mm-products{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .mm-filters{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .mm-filters__actions{ grid-column:1 / -1; }
}

@media (max-width: 760px){
  .mm-products{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
  .mm-product-card{ border-radius:16px; }
  .mm-product-card__body{ padding:12px 12px 14px; }
  .mm-product-card__title{ font-size:14px; }
  .mm-product-card .mm-price__now{ font-size:16px; }
  .mm-filters__actions .mm-btn{ flex:1; }
}

@media (max-width: 380px){
  .mm-products{ grid-template-columns:1fr; }
  .mm-filters{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Корзина, оформление заказа, «Спасибо», ссылка на корзину в шапке.
   ========================================================================== */

/* Ссылка на корзину в шапке ({{cart_link}}): счётчик позиций, подсветка по data-section. */
.mm-cart{ display:inline-flex; align-items:center; gap:8px; flex:none; padding:9px 14px; border-radius:var(--mm-radius-pill); color:var(--text-muted); font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap; transition:background .2s ease, color .2s ease; }
.mm-cart:hover{ background:var(--gray-100); color:var(--black); }
.mm-cart.is-active{ background:var(--mm-gradient-soft); color:var(--navy); }
.mm-cart__count{ display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 6px; border-radius:100px; background:var(--navy); color:#fff; font-family:var(--mm-font-mono); font-size:12px; font-weight:700; line-height:1; }
.mm-cart__count[hidden]{ display:none; }
/* Значок 24 px, как в мобильной шапке; поля −3 px оставляют его место в строке прежним (18 px),
   поэтому положение «Корзины», счётчика и размер кнопки не меняются. */
.mm-cart__icon{ flex:none; width:24px; height:24px; margin:-3px; }

.mm-cart-page{ padding-top:20px; padding-bottom:72px; }
.mm-cart-page .mm-catalog__title{ margin-bottom:22px; }

.mm-alert{ margin:0 0 20px; padding:12px 16px; border:1px solid rgba(209,36,47,.25); border-radius:12px; background:rgba(209,36,47,.08); color:var(--red); font-size:14px; line-height:1.5; }

.mm-cart-layout{ display:grid; grid-template-columns:minmax(0, 1fr) 340px; gap:24px; align-items:start; }

.mm-cart-list{ display:grid; gap:12px; margin:0; padding:0; list-style:none; }

.mm-cart-item{ display:grid; grid-template-columns:96px minmax(0, 1fr) auto; gap:16px; align-items:center; padding:14px; border:1px solid var(--gray-100); border-radius:20px; background:#fff; box-shadow:var(--mm-shadow); }
.mm-cart-item__media{ display:block; width:96px; height:96px; border-radius:14px; background:var(--gray-100); overflow:hidden; }
.mm-cart-item__media img{ display:block; width:100%; height:100%; object-fit:cover; }
.mm-cart-item__body{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0; }
.mm-cart-item__title{ color:var(--black); font-size:16px; font-weight:700; line-height:1.3; text-decoration:none; }
.mm-cart-item__title:hover{ color:var(--navy); }
.mm-cart-item__stock{ margin:0; padding:3px 10px; font-size:12px; }
.mm-cart-item__price{ display:flex; align-items:baseline; gap:6px; font-size:14px; color:var(--gray-600); }
.mm-cart-item__unit{ font-weight:600; }
.mm-cart-item__hint{ font-size:12px; font-weight:400; color:var(--gray-500); }

.mm-cart-item__controls{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.mm-qty{ display:inline-flex; align-items:center; padding:0; border:1px solid var(--gray-300); border-radius:100px; background:#fff; }
.mm-qty__form{ display:contents; }
.mm-qty__btn{ display:inline-flex; align-items:center; justify-content:center; width:var(--mm-btn-h); height:var(--mm-btn-h); padding:0; border:0; border-radius:100px; background:none; color:var(--black); font:inherit; font-size:18px; line-height:1; cursor:pointer; transition:background .15s ease; }
.mm-qty__btn:hover:not(:disabled){ background:var(--gray-100); }
.mm-qty__btn:focus-visible{ outline:none; box-shadow:var(--mm-focus-ring); }
.mm-qty__btn:disabled{ color:var(--gray-300); cursor:default; }
.mm-qty__value{ min-width:28px; font-family:var(--mm-font-mono); font-size:15px; font-weight:600; text-align:center; }
.mm-qty[aria-busy="true"]{ opacity:.6; }
.mm-cart-item__sum{ font-family:var(--mm-font-mono); font-size:17px; font-weight:700; letter-spacing:-.02em; white-space:nowrap; }
.mm-cart-item__remove{ display:inline-flex; align-items:center; justify-content:center; width:var(--mm-btn-h); height:var(--mm-btn-h); padding:0; border:0; border-radius:100px; background:none; color:var(--gray-500); font:inherit; font-size:22px; line-height:1; cursor:pointer; transition:background .15s ease, color .15s ease; }
.mm-cart-item__remove:hover{ background:rgba(209,36,47,.08); color:var(--red); }
.mm-cart-item__remove:focus-visible{ outline:none; box-shadow:var(--mm-focus-ring); }

.mm-cart-summary{ padding:22px; border:1px solid var(--gray-100); border-radius:24px; background:#fff; box-shadow:var(--mm-shadow-card); }
.mm-cart-summary .mm-btn{ margin-top:14px; }
.mm-cart-summary__title{ margin:0 0 14px; font-size:18px; font-weight:800; letter-spacing:-.01em; }
.mm-cart-summary__rows{ margin:0; }
.mm-cart-summary__row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:6px 0; font-size:14px; color:var(--gray-600); }
.mm-cart-summary__row dt, .mm-cart-summary__row dd{ margin:0; }
.mm-cart-summary__row--total{ margin-top:6px; padding-top:14px; border-top:1px solid var(--gray-100); color:var(--black); font-size:16px; font-weight:700; }
.mm-cart-summary__row--total dd{ font-family:var(--mm-font-mono); font-size:20px; font-weight:800; letter-spacing:-.02em; color:var(--navy); }
.mm-cart-summary__note{ margin:8px 0 0; font-size:13px; line-height:1.5; color:var(--gray-600); }
.mm-cart-summary__more{ display:block; margin-top:14px; font-size:13px; text-align:center; color:var(--gray-600); }
.mm-cart-summary__more:hover{ color:var(--navy); }

.mm-cart-mini{ display:grid; gap:8px; margin:0 0 12px; padding:0 0 12px; list-style:none; border-bottom:1px solid var(--gray-100); }
.mm-cart-mini__item{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:14px; }
.mm-cart-mini__name{ min-width:0; color:var(--black); }
.mm-cart-mini__sum{ flex:none; font-family:var(--mm-font-mono); font-size:13px; font-weight:600; white-space:nowrap; }

.mm-checkout-form{ padding:24px; border:1px solid var(--gray-100); border-radius:24px; background:#fff; box-shadow:var(--mm-shadow-card); }
.mm-checkout-form__lead{ margin:0 0 20px; font-size:14px; line-height:1.6; color:var(--gray-600); }
.mm-field__hint{ display:block; margin:6px 0 0; font-size:12px; color:var(--gray-500); }
.mm-field .mm-error{ margin:6px 0 0; font-weight:400; }
.mm-field input[aria-invalid="true"]{ border-color:var(--red); }

.mm-thanks{ max-width:720px; margin:0 auto; text-align:center; }
.mm-thanks .mm-label{ margin-bottom:16px; }
.mm-thanks .mm-subtitle{ margin:0 0 12px; }
.mm-thanks__number{ font-family:var(--mm-font-mono); color:var(--navy); }
.mm-thanks__card{ max-width:520px; margin:24px auto; text-align:left; }
.mm-thanks .mm-errorpage__actions{ margin-top:8px; }

@media (max-width: 900px){
  .mm-cart-layout{ grid-template-columns:1fr; }
}

@media (max-width: 760px){
  /* Первая строка шапки: логотип, корзина (только значок и счётчик), телефон. */
  .mm-header__inner{ gap:8px; }
  .mm-cart{ margin-left:auto; padding:8px 10px; }
  .mm-cart__label{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .mm-header__phone{ margin-left:0; font-size:13px; }
  .mm-cart-item{ grid-template-columns:72px minmax(0, 1fr); gap:12px; }
  .mm-cart-item__media{ width:72px; height:72px; }
  .mm-cart-item__controls{ grid-column:1 / -1; flex-direction:row; align-items:center; justify-content:space-between; }
  .mm-checkout-form{ padding:18px; }
}

/* ==========================================================================
   Содержимое, перенесённое со старого сайта из блоков конструктора (шаг 6b):
   описания товаров и страницы вроде /offer. Общий контейнер .mm-content,
   внутри только простая разметка: h1–h3, p, ul/ol, .mm-specs, .mm-figures, .mm-video.
   ========================================================================== */

.mm-content{ max-width:880px; margin:0 auto; padding:8px var(--mm-gutter) 40px; font-size:16px; line-height:1.65; color:var(--black); }
.mm-content > :first-child{ margin-top:0; }
.mm-content h1{ margin:24px 0 16px; font-size:clamp(28px, 4vw, 40px); font-weight:800; letter-spacing:-.02em; line-height:1.15; }
.mm-content h2{ margin:40px 0 14px; font-size:clamp(22px, 3vw, 28px); font-weight:800; letter-spacing:-.015em; line-height:1.2; color:var(--navy); }
.mm-content h3{ margin:28px 0 10px; font-size:18px; font-weight:700; letter-spacing:-.01em; line-height:1.3; }
.mm-content p{ margin:0 0 14px; }
.mm-content ul, .mm-content ol{ margin:0 0 16px; padding-left:22px; }
.mm-content li{ margin:0 0 6px; }
.mm-content a{ color:var(--navy); }
.mm-content a:hover{ text-decoration:none; }

/* Характеристики: «название — значение» с пунктирной линией между ними. */
.mm-content .mm-specs{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:4px 32px; margin:0 0 8px; padding:0; list-style:none; }
.mm-content .mm-specs li{ display:flex; align-items:baseline; gap:10px; margin:0; padding:8px 0; border-bottom:1px solid var(--gray-100); font-size:15px; }
.mm-content .mm-specs li span:first-child{ flex:1 1 auto; min-width:0; color:var(--gray-600); }
.mm-content .mm-specs li span:last-child{ flex:0 1 auto; max-width:60%; font-weight:600; text-align:right; }

/* Картинки со слайдеров и галерей: сетка без скриптов. */
.mm-content .mm-figures{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:16px; margin:16px 0 24px; }
.mm-content figure{ margin:0; }
.mm-content figure img{ display:block; width:100%; height:auto; border-radius:var(--mm-radius-sm); background:var(--gray-100); }
.mm-content figcaption{ margin-top:8px; font-size:14px; line-height:1.5; color:var(--gray-600); }
.mm-content .mm-figure-wide{ margin:16px 0; }
.mm-content .mm-figure-wide img{ border-radius:var(--mm-radius); }

/* Видео 16:9. */
.mm-content .mm-video{ position:relative; aspect-ratio:16 / 9; margin:16px 0 24px; overflow:hidden; border-radius:var(--mm-radius-sm); background:var(--black); }
.mm-content .mm-video iframe, .mm-content .mm-video video{ position:absolute; inset:0; width:100%; height:100%; border:0; }

@media (max-width: 760px){
  .mm-content{ font-size:15px; }
  .mm-content .mm-specs{ grid-template-columns:1fr; }
  .mm-content .mm-figures{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Карусель «Хиты» — первый блок главной (components/hero-carousel, js/hero-carousel.js).
   Стиль neighbors: квадрат по центру, соседи слева и справа уменьшены и полупрозрачны.
   Стиль split: текст слева, квадрат справа; уже 900 px — квадрат сверху, текст под ним.
   Фон data-bg: navy (по умолчанию) / blur (размытая копия слайда) / light / custom (цвет из настроек,
   переменные --mm-hc-* задаёт шаблон). Положение слайдов — атрибут data-pos: center / prev / next / hidden.
   ========================================================================== */

.mm-hero-carousel{
  --mm-hc-size: 500px;          /* сторона квадрата (neighbors) */
  --mm-hc-photo: 540px;         /* сторона квадрата (split) */
  --mm-hc-side: .75;            /* масштаб соседей */
  --mm-hc-offset: 330px;        /* сдвиг центра соседа */
  --mm-hc-move: 650ms;          /* смена слайдов */
  --mm-hc-interval: 5s;         /* автопрокрутка (задаёт шаблон) */
  --mm-hc-bg: linear-gradient(150deg, var(--navy) 0%, var(--black) 100%);
  --mm-hc-text: var(--white);
  --mm-hc-accent: var(--label-on-dark);
  position: relative;
  overflow: hidden;             /* соседи не дают горизонтальной прокрутки страницы */
  isolation: isolate;
  background: var(--mm-hc-bg);
  color: var(--mm-hc-text);
}
.mm-hero-carousel[data-bg="light"]{ --mm-hc-bg: linear-gradient(180deg, var(--gray-50), var(--gray-100)); --mm-hc-text: var(--black); --mm-hc-accent: var(--navy); }
.mm-hero-carousel[data-bg="blur"]{ --mm-hc-bg: var(--gray-100); --mm-hc-text: var(--black); --mm-hc-accent: var(--navy); }

/* Размытая копия текущего слайда (маленькая копия 160 px) под светлой вуалью — тёмный текст читается на любом фото. */
.mm-hero-carousel__bgs{ position:absolute; inset:0; z-index:-1; }
.mm-hero-carousel__bgs::after{ content:""; position:absolute; inset:0; background:color-mix(in srgb, var(--white) 60%, transparent); }
.mm-hero-carousel__bg{ position:absolute; inset:-40px; background-size:cover; background-position:center; filter:blur(36px) saturate(1.15); transform:scale(1.15); opacity:0; transition:opacity var(--mm-hc-move) ease; }
.mm-hero-carousel__bg.is-active{ opacity:1; }

.mm-hero-carousel__inner{ max-width:var(--mm-container); margin:0 auto; padding:32px var(--mm-gutter) 22px; }
/* Шаг hot-11: метка «Хиты» (.mm-hit, 13px × line-height 1.5 = 19.5px + 12px отступов) была 31.5px высотой, из-за чего
   вся карусель получала высоту с «.5» (729.5 / 669.5 px) и нижняя граница тёмного блока падала на полпикселя —
   при дробном масштабе Windows (125 %, 150 %) браузер округляет край фона и край слоя по-разному, и под блоком
   остаётся светлая полоса. Целая высота строки (20px) делает высоту метки 32px, а карусели — целой. */
.mm-hero-carousel__label{ margin:0 0 16px; line-height:20px; }
.mm-hero-carousel__stage{ position:relative; touch-action:pan-y; user-select:none; }
.mm-hero-carousel__slide{ display:block; color:inherit; text-decoration:none; }
.mm-hero-carousel__slide:focus-visible{ outline:none; }
.mm-hero-carousel__slide:focus-visible .mm-hero-carousel__photo{ box-shadow:var(--mm-focus-ring), 0 18px 40px -12px rgba(0, 0, 0, .45); }

/* Квадрат: белая плашка, фото вписано целиком. */
.mm-hero-carousel__photo{ display:block; width:100%; aspect-ratio:1 / 1; border-radius:24px; overflow:hidden; /*background:var(--white);без белого фона: иначе вокруг contain-картинки видна белая щель*/ box-shadow:0 1px 2px rgba(0, 0, 0, .1), 0 18px 40px -12px rgba(0, 0, 0, .45); }
.mm-hero-carousel__photo img{ display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; }

.mm-hero-carousel__caption{ display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:16px; transition:opacity calc(var(--mm-hc-move) / 2) ease; }
.mm-hero-carousel__title{ font-size:clamp(22px, 2.6vw, 30px); font-weight:800; letter-spacing:-.02em; line-height:1.15; }
.mm-hero-carousel__more{ display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:600; color:var(--mm-hc-accent); }
.mm-hero-carousel__more span{ transition:transform .2s ease; }
.mm-hero-carousel__slide[data-pos="center"]:hover .mm-hero-carousel__more span{ transform:translateX(4px); }

/* --- neighbors --- */
.mm-hero-carousel--neighbors .mm-hero-carousel__inner{ text-align:center; }
.mm-hero-carousel--neighbors .mm-hero-carousel__stage{ height:calc(var(--mm-hc-size) + 100px); }
.mm-hero-carousel--neighbors .mm-hero-carousel__slide{ position:absolute; top:0; left:50%; width:var(--mm-hc-size); margin-left:calc(var(--mm-hc-size) / -2);
  transform-origin:50% 50%; transform:scale(var(--mm-hc-side)); opacity:0; z-index:1;
  transition:transform var(--mm-hc-move) cubic-bezier(.4, 0, .2, 1), opacity var(--mm-hc-move) ease; }
.mm-hero-carousel--neighbors .mm-hero-carousel__slide[data-pos="hidden"]{ pointer-events:none; }
.mm-hero-carousel--neighbors .mm-hero-carousel__slide[data-pos="center"]{ transform:none; opacity:1; z-index:3; }
.mm-hero-carousel--neighbors .mm-hero-carousel__slide[data-pos="prev"]{ transform:translateX(calc(var(--mm-hc-offset) * -1)) scale(var(--mm-hc-side)); opacity:.4; z-index:2; cursor:pointer; }
.mm-hero-carousel--neighbors .mm-hero-carousel__slide[data-pos="next"]{ transform:translateX(var(--mm-hc-offset)) scale(var(--mm-hc-side)); opacity:.4; z-index:2; cursor:pointer; }
.mm-hero-carousel--neighbors .mm-hero-carousel__slide:not([data-pos="center"]) .mm-hero-carousel__caption{ opacity:0; }

/* --- split --- */
.mm-hero-carousel--split .mm-hero-carousel__stage{ display:grid; }
.mm-hero-carousel--split .mm-hero-carousel__slide{ grid-area:1 / 1; display:grid; grid-template-columns:minmax(0, 1fr) var(--mm-hc-photo); gap:48px; align-items:center; opacity:0; visibility:hidden;
  transition:opacity 700ms ease, visibility 0s linear 700ms; }
.mm-hero-carousel--split .mm-hero-carousel__slide[data-pos="center"]{ opacity:1; visibility:visible; transition:opacity 700ms ease, visibility 0s; }
.mm-hero-carousel--split .mm-hero-carousel__caption{ order:-1; align-items:flex-start; gap:18px; margin:0; }
.mm-hero-carousel--split .mm-hero-carousel__title{ font-size:clamp(28px, 3.8vw, 52px); letter-spacing:-.025em; line-height:1.05; text-wrap:balance; }
.mm-hero-carousel--split .mm-hero-carousel__more{ font-size:16px; }

/* --- линии-таймеры: по одной на слайд, активная заполняется за интервал автопрокрутки; клик — переход --- */
.mm-hero-carousel__timers{ display:flex; gap:8px; max-width:var(--mm-hc-size); margin:4px auto 0; padding:0; list-style:none; }
.mm-hero-carousel--split .mm-hero-carousel__timers{ max-width:none; margin-top:24px; }
.mm-hero-carousel__timers li{ flex:1 1 0; }
.mm-hero-carousel__timer{ position:relative; display:block; width:100%; height:24px; padding:0; border:0; background:none; color:var(--mm-hc-text); cursor:pointer; }
.mm-hero-carousel__timer::before{ content:""; position:absolute; left:0; right:0; top:50%; height:3px; margin-top:-1.5px; border-radius:3px; background:currentColor; opacity:.28; }
.mm-hero-carousel__timer i{ position:absolute; left:0; top:50%; height:3px; margin-top:-1.5px; width:0; border-radius:3px; background:var(--mm-hc-accent); }
.mm-hero-carousel__timer.is-done i{ width:100%; }
.mm-hero-carousel__timer.is-active i{ animation:mm-hc-fill var(--mm-hc-interval) linear forwards; }
.mm-hero-carousel.is-paused .mm-hero-carousel__timer.is-active i,
.mm-hero-carousel:hover .mm-hero-carousel__timer.is-active i,
.mm-hero-carousel:focus-within .mm-hero-carousel__timer.is-active i{ animation-play-state:paused; }
.mm-hero-carousel.is-manual .mm-hero-carousel__timer.is-active i{ animation:none; width:100%; }
.mm-hero-carousel__timer:focus-visible{ outline:none; border-radius:6px; box-shadow:var(--mm-focus-ring); }
.mm-hero-carousel__sr{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@keyframes mm-hc-fill{ from{ width:0; } to{ width:100%; } }

@media (max-width: 1100px){
  .mm-hero-carousel{ --mm-hc-size: 440px; --mm-hc-photo: 440px; --mm-hc-offset: 290px; }
  .mm-hero-carousel--split .mm-hero-carousel__slide{ gap:32px; }
}
@media (max-width: 900px){
  .mm-hero-carousel--split .mm-hero-carousel__inner{ text-align:center; }
  .mm-hero-carousel--split .mm-hero-carousel__slide{ grid-template-columns:1fr; gap:16px; justify-items:center; align-items:start; }
  .mm-hero-carousel--split .mm-hero-carousel__photo{ width:min(var(--mm-hc-photo), 100%); }
  .mm-hero-carousel--split .mm-hero-carousel__caption{ order:0; align-items:center; gap:8px; }
}
/* Телефон: квадрат 72 % ширины экрана, соседи выглядывают по краям — подсказка, что можно листать. */
@media (max-width: 760px){
  .mm-hero-carousel{ --mm-hc-size: 72vw; --mm-hc-side: .8; --mm-hc-offset: 40vw; }
  .mm-hero-carousel__inner{ padding-top:22px; }
  .mm-hero-carousel--neighbors .mm-hero-carousel__stage{ height:calc(var(--mm-hc-size) + 96px);
    /* hot-11: 72vw даёт дробную высоту (на 390px — 376.8px) → целое значение, см. комментарий у .mm-hero-carousel__label */
    height:round(up, calc(var(--mm-hc-size) + 96px), 1px); }
}
@media (prefers-reduced-motion: reduce){
  .mm-hero-carousel__slide, .mm-hero-carousel__bg, .mm-hero-carousel__caption{ transition:none !important; }
  .mm-hero-carousel__timer.is-active i{ animation:none; width:100%; }
}

/* ==========================================================================
   Блоки главной (resources/views/home.blade.php, настройка «Ширина блока»).
   container — .mm-container.mm-home-block (1200 px, как раньше);
   bleed     — .mm-home-block--bleed: обёртка на всю ширину (для фона из «Стиля блока»), внутри .mm-container;
   full      — .mm-home-block--full: всё на всю ширину <main> (main без ограничения ширины, 100vw не нужен).
   Обёртки без отступов: поля секций внутри схлопываются между блоками так же, как в общем контейнере.
   ========================================================================== */

.mm-home-block--bleed,
.mm-home-block--full {
  width: 100%;
}

/* Последний блок на всю ширину (например, карта) прижат к футеру: у его последнего элемента нет нижнего поля
   (у .mm-section это 56 px, на узких 40 px). */
.mm-home-block--flush > :last-child {
  margin-bottom: 0;
}

/* «Каталог» на главной: заголовок и чипсы по центру; чипсы переносятся, а не прокручиваются. */
.mm-section--center-head .mm-section__head {
  justify-content: center;
  text-align: center;
}

.mm-section--center-head .mm-tabs {
  flex-wrap: wrap;
  justify-content: center;
  overflow-x: visible;
}

/* ==========================================================================
   Мобильная шапка (шаг hot-7): логотип | корзина, телефон-значок, бургер; меню — панелью под шапкой.
   ПОРОГ: до 790 px включительно — везде @media (max-width: 790px); то же значение в public/js/mobile-menu.js.
   Шире 790 px значок телефона и бургер скрыты, шапка прежняя.
   Разметку кнопок добавляет App\Support\MobileHeader: button.mm-burger и a.mm-header__call
   перед nav.mm-nav, которому добавлены класс .mm-mobile-menu и id (панель — тот же <nav>).
   Режим панели включается классом .mm-js на <html> (ставит mobile-menu.js); без скрипта ссылки меню
   видны строкой под логотипом с переносом.
   Слои: затемнение 49, шапка с панелью 50 (над контентом и каруселью), модальные окна 1000,
   плашка предпросмотра из админки 2147483647 — панель её не перекрывает.
   ========================================================================== */

.mm-burger,
.mm-header__call,
.mm-mobile-menu__backdrop { display: none; }

@media (max-width: 790px) {
  :root { --mm-header-h: 60px; }

  .mm-header__inner {
    flex-wrap: wrap;
    gap: 0 4px;
    padding-top: 0;
  }

  /* Со скриптом меню вынесено в панель: одна строка, логотип сжимается, а не переносит значки. */
  .mm-js .mm-header__inner { flex-wrap: nowrap; }

  /* Логотип до 170 px, на узких экранах сжимается, чтобы значки остались в одной строке с ним. */
  .mm-header__logo {
    flex: 0 1 170px;
    min-width: 0;
    margin-right: auto;
  }

  .mm-header__logo img { width: 100%; max-width: 170px; height: auto; }

  /* Корзина: значок и счётчик, слово «Корзина» скрыто (только для чтения с экрана).
     Значки корзины и трубки — 24 px, линии 1.8, цвет как у бургера. */
  .mm-cart {
    order: 1;
    justify-content: center;
    gap: 6px;
    min-width: 44px;
    min-height: 44px;
    margin-left: 0;
    padding: 0 10px;
    color: var(--black);
  }

  .mm-cart__icon { margin: 0; }

  .mm-cart__icon,
  .mm-header__call-icon { width: 24px; height: 24px; }

  .mm-cart__label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* Телефон: вместо номера — значок трубки (ссылка tel: с тем же номером). */
  .mm-header__phone { display: none; }

  .mm-header__call {
    order: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: var(--mm-radius-pill);
    color: var(--black);
    transition: background .2s ease, color .2s ease;
  }

  .mm-header__call:hover { background: var(--gray-100); color: var(--navy); }

  /* Без скрипта: ссылки меню отдельной строкой под логотипом, с переносом. */
  .mm-nav {
    order: 4;
    flex-basis: 100%;
    margin-inline: 0;
    padding: 0 0 8px;
    overflow: visible;
  }

  .mm-nav__list { flex-wrap: wrap; }

  /* Бургер: три полосы, при открытии — крестик (верхняя и нижняя повёрнуты на ±45°, средняя исчезает). */
  .mm-js .mm-burger {
    order: 3;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: none;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    padding: 0;
    border: 0;
    border-radius: var(--mm-radius-pill);
    background: none;
    color: var(--black);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .mm-js .mm-burger:hover { background: var(--gray-100); }

  /* Полосы 18 × 1.8 px — по ширине рисунка и толщине линий значков корзины и трубки. */
  .mm-burger__bar {
    display: block;
    width: 18px;
    height: 1.8px;
    border-radius: 1px;
    background: currentColor;
    transition: transform .2s ease, opacity .2s ease;
  }

  .mm-burger[aria-expanded="true"] .mm-burger__bar:nth-child(1) { transform: translateY(6.8px) rotate(45deg); }
  .mm-burger[aria-expanded="true"] .mm-burger__bar:nth-child(2) { opacity: 0; }
  .mm-burger[aria-expanded="true"] .mm-burger__bar:nth-child(3) { transform: translateY(-6.8px) rotate(-45deg); }

  /* Панель: на всю ширину сразу под шапкой; длинная прокручивается внутри. Закрытая не принимает фокус (visibility). */
  .mm-js .mm-mobile-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--mm-header-h) - 1px);
    max-height: calc(100dvh - var(--mm-header-h) - 1px);
    padding: 4px var(--mm-gutter) 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--white);
    border-bottom: 1px solid var(--gray-100);
    box-shadow: var(--mm-shadow);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }

  .mm-js .mm-mobile-menu.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .2s ease, transform .2s ease, visibility 0s;
  }

  .mm-js .mm-mobile-menu .mm-nav__list { display: block; }

  .mm-js .mm-mobile-menu .mm-nav__item + .mm-nav__item { border-top: 1px solid var(--gray-300); }

  .mm-js .mm-mobile-menu .mm-nav__link {
    display: flex;
    min-height: 56px;
    padding: 8px 0;
    border-radius: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--black);
    white-space: normal;
  }

  .mm-js .mm-mobile-menu .mm-nav__link:hover,
  .mm-js .mm-mobile-menu .mm-nav__link.is-active {
    background: none;
    color: var(--navy);
  }

  /* Внутри прокручиваемой панели рамка фокуса рисуется внутрь, чтобы не обрезалась. */
  .mm-js .mm-mobile-menu .mm-nav__link:focus-visible { outline-offset: -2px; }

  /* Затемнение под панелью (создаёт mobile-menu.js): клик по нему закрывает меню. */
  .mm-mobile-menu__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 49;
    background: rgba(var(--shadow-color), .35);
  }

  .mm-mobile-menu__backdrop[hidden] { display: none; }

  /* Пока меню открыто, страница под панелью не прокручивается. */
  body.mm-menu-open { overflow: hidden; }
}

@media (max-width: 790px) and (prefers-reduced-motion: reduce) {
  .mm-burger__bar,
  .mm-js .mm-mobile-menu,
  .mm-js .mm-mobile-menu.is-open { transition: none; }
}


/* ==========================================================================
   Заголовки страниц и горизонтальная прокрутка (шаг hot-9).

   1) Заголовок h1: один стиль у «Каталога», FAQ, «Условий», «Контактов» и других страниц из админки
      (шаблоны pages/default и pages/faq: у <main> класс mm-page; в каталоге у h1 класс mm-page-title).
      Эталон — заголовок FAQ. Собственные стили h1 в HTML страниц убраны командой pages:normalize-titles,
      поэтому !important не нужен. Страницы со своим стилем (калькулятор) перекрывают правило сами:
      их <style> идёт позже при равной специфичности.
   2) Отступ шапка → заголовок и заголовок → следующий блок у четырёх страниц как у FAQ.
   3) Каталог: заголовок и чипсы по центру.
   4) Страховка от горизонтальной прокрутки.
   ========================================================================== */

/* Цвет заголовка считается на :root: страницы со своим блоком переменных (например, FAQ задаёт
   --black: #333 внутри .faq-wrap) на него не влияют.
   --mm-page-title-gap — верхний внутренний отступ обёртки страницы до заголовка (FAQ: 20 / 36 / 28 px
   на его ширинах); с 24 px у main.mm-page это 44 / 60 / 52 px от шапки до h1. */
:root {
  --mm-title-color: var(--black);
  --mm-page-title-gap: 20px;
}

@media (max-width: 960px) { :root { --mm-page-title-gap: 36px; } }
@media (max-width: 640px) { :root { --mm-page-title-gap: 28px; } }

.mm-page h1,
h1.mm-page-title {
  margin: 0 0 16px;
  font-family: inherit;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.16;
  text-align: center;
  color: var(--mm-title-color);
}

.mm-page h1 span,
h1.mm-page-title span {
  background: var(--mm-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Отступы страниц с собственной обёрткой (специфичность на ступень выше правил внутри самих страниц,
   поэтому без !important). Заголовок → следующий блок: 48 px, как у FAQ и «Контактов». */
.mm-page .faq,
.mm-page .contacts,
.mm-page .dlv-article { padding-top: var(--mm-page-title-gap); }

.mm-page .dlv-article .hero { margin-bottom: 48px; }

/* Каталог: у .mm-catalog 20 px сверху и main без отступа, поэтому до 24 px main.mm-page + gap добавляется margin. */
.mm-catalog .mm-catalog__head {
  margin: calc(var(--mm-page-title-gap) + 4px) 0 48px;
  text-align: center;
}

.mm-catalog__head .mm-catalog__intro { max-width: 760px; margin-inline: auto; text-align: left; }

/* Чипсы категорий по центру и с переносом, как в блоке «Каталог» на главной. */
.mm-catalog > .mm-tabs {
  flex-wrap: wrap;
  justify-content: center;
  overflow-x: visible;
}

/* Горизонтальная прокрутка на главной и /faq: у блока .faq-wrap в HTML страницы и главной заданы width: 100vw и
   margin: calc(50% - 50vw). 100vw включает полосу прокрутки (~15 px), а сдвиг считается от ширины без неё, поэтому
   блок выходил за правый край на 7–8 px. Блок и так на всю ширину (внутри .faq своя max-width и margin: auto),
   поэтому берём ширину и поля родителя; специфичность выше правила .faq-wrap самой страницы. */
main .faq-wrap { width: auto; margin-inline: 0; }

/* Страховка: лишняя ширина обрезается, а не создаёт полосу прокрутки. clip, а не hidden: hidden делает html/body
   контейнером прокрутки и ломает position: sticky у шапки. */
html,
body { overflow-x: clip; }

/* ==========================================================================
   Карточка товара (шаг hot-10): колонка миниатюр слева, кнопки покупки, просмотр фото во весь экран.
   Порог мобильной версии — 790 px (@media (max-width: 790px)), как в hot-7 и в public/js/product-gallery.js.
   ========================================================================== */

/* --- Кнопки покупки: «В корзину» на всю ширину; «Купить в 1 клик» и «Задать вопрос» в один ряд по 50% --- */
.mm-buy__actions { display: grid; gap: 8px; }

.mm-buy__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  container-type: inline-size;
}

/* Шрифт обычный (15 px, как у остальных кнопок). Уменьшается только если текст не помещается в половину ряда,
   и ровно настолько, чтобы остаться в одной строке: «Купить в 1 клик» ≈ 7,9 px ширины на 1 px шрифта,
   ширина текста в кнопке = (ширина ряда − 24 px) / 2. */
.mm-buy__row .mm-btn {
  padding-inline: 8px;
  white-space: nowrap;
  font-size: clamp(10px, calc((100cqw - 24px) / 16), 15px);
}

/* Недоступно («нет в наличии»): неактивный вид, клики не проходят (у кнопок есть и disabled). */
.mm-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; filter: grayscale(1); }
.mm-btn[aria-disabled="true"]:hover { filter: grayscale(1); }

/* «Нет в наличии»: активная «Сообщить о поступлении» на всю ширину под тремя неактивными, с небольшим отступом. */
.mm-buy__actions .mm-buy__restock { margin-top: 8px; }

/* Галочка у «Перейти в корзину». */
.mm-btn__check { flex: none; margin-right: 8px; }

/* --- Галерея: главное фото открывает просмотр --- */
.mm-gallery__slide[data-full] img { cursor: zoom-in; }

/* Колонка миниатюр слева (шире 790 px, у товара несколько фото). Главное фото остаётся того же размера
   ((ширина сетки − 40 px) / 2), колонка добавляется сверх него и забирает ширину у блока покупки:
   100cqw — ширина содержимого .mm-product-top (= сетки). Ширина колонки: до 88 px, но так, чтобы блоку покупки
   осталось не меньше 380 px; на узких ширинах не меньше 48 px (тогда блок покупки уже, главное фото не уменьшается). */
@media (min-width: 791px) {
  .mm-product-top { container-type: inline-size; }

  .mm-product-top__grid--thumbs {
    --mm-thumb-w: clamp(48px, calc((100cqw - 40px) / 2 - 392px), 88px);
    grid-template-columns: calc((100% - 40px) / 2 + var(--mm-thumb-w) + 12px) minmax(0, 1fr);
  }

  .mm-product-top__grid--thumbs .mm-gallery {
    display: grid;
    grid-template-columns: var(--mm-thumb-w) minmax(0, 1fr);
    column-gap: 12px;
    align-items: start;
  }

  .mm-product-top__grid--thumbs .mm-gallery__main { grid-column: 2; grid-row: 1; }

  /* Высота колонки не больше высоты главного фото ((100cqw − 40px) / 2); лишнее прокручивается внутри
     (колесом и пальцем, полоса скрыта). */
  .mm-product-top__grid--thumbs .mm-gallery__thumbs {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    max-height: calc((100cqw - 40px) / 2);
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y proximity;
    overscroll-behavior: contain;
  }

  .mm-product-top__grid--thumbs .mm-gallery__thumbs li { flex: none; width: 100%; min-width: 0; }
}

/* --- Просмотр фото во весь экран (создаётся скриптом при открытии, public/js/product-gallery.js) ---
   Фон белый; слева колонка миниатюр (на ≤ 790 px — полоса внизу); кнопка закрытия 44×44 справа сверху. */
html.mm-lightbox-open { overflow: hidden; }

.mm-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  background: var(--white);
  color: var(--black);
  animation: mm-lightbox-in .15s ease;
}

.mm-lightbox--single { grid-template-columns: minmax(0, 1fr); }

@keyframes mm-lightbox-in { from { opacity: 0; } to { opacity: 1; } }

.mm-lightbox__rail { min-width: 0; min-height: 0; padding: 12px 0 12px 12px; }

.mm-lightbox__thumbs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  margin: 0;
  padding: 2px;
  list-style: none;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  overscroll-behavior: contain;
}

.mm-lightbox__thumbs::-webkit-scrollbar { display: none; }
.mm-lightbox__thumbs li { flex: none; }

.mm-lightbox__thumb {
  position: relative;
  display: block;
  width: 80px;
  height: 80px;
  padding: 0;
  border: 1px solid var(--gray-300);
  border-radius: 12px;
  background: var(--white);
  overflow: hidden;
  cursor: pointer;
  opacity: .75;
  transition: opacity .15s ease, border-color .15s ease;
}

.mm-lightbox__thumb:hover { opacity: 1; }
.mm-lightbox__thumb:focus-visible { outline: none; box-shadow: var(--mm-focus-ring); opacity: 1; }
.mm-lightbox__thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mm-lightbox__thumb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.mm-lightbox__thumb.is-active { border-color: var(--navy); opacity: 1; }
.mm-lightbox__thumb.is-active::after { box-shadow: inset 0 0 0 1px var(--navy); }

.mm-lightbox__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  padding: 64px 72px;
}

/* Размер картинки задаёт скрипт (вписывает в поле целиком, не крупнее оригинала): место не меняется,
   пока грузится крупная копия, и пустое место вокруг картинки — это пустое место окна. */
.mm-lightbox__img {
  display: block;
  flex: none;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.mm-lightbox__close,
.mm-lightbox__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--gray-300);
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: var(--black);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}

.mm-lightbox__close:hover,
.mm-lightbox__arrow:hover:not(:disabled) { background: var(--gray-100); border-color: var(--gray-500); }
.mm-lightbox__close:focus-visible,
.mm-lightbox__arrow:focus-visible { outline: none; box-shadow: var(--mm-focus-ring); }
.mm-lightbox__close { position: absolute; top: 12px; right: 12px; z-index: 3; }
.mm-lightbox__arrow { position: absolute; top: 50%; z-index: 2; margin-top: -22px; }
.mm-lightbox__arrow--prev { left: 12px; }
.mm-lightbox__arrow--next { right: 12px; }
.mm-lightbox__arrow:disabled { opacity: .3; cursor: default; }
.mm-lightbox__counter { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--gray-600); }

@media (max-width: 790px) {
  .mm-lightbox { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .mm-lightbox__stage { order: 1; padding: 60px 12px 12px; }
  .mm-lightbox__rail { order: 2; padding: 8px 12px 12px; }
  .mm-lightbox__thumbs { flex-direction: row; height: auto; overflow-x: auto; overflow-y: hidden; }
  .mm-lightbox__thumb { width: 64px; height: 64px; }
  .mm-lightbox__counter { bottom: 8px; }
}

/* На телефоне и планшете листают свайпом, стрелок нет. */
@media (hover: none) and (pointer: coarse) {
  .mm-lightbox__arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mm-lightbox { animation: none; }
  .mm-lightbox__thumb, .mm-lightbox__close, .mm-lightbox__arrow { transition: none; }
}