/* ============================================
   ЛОКАЛ — /marshrut «Соберите свой день в Нижнем»
   На переменных index.css (без новых цветов). Мобайл-фёрст.
   Заголовки страницы — Inter (не Bebas): Bebas Neue не содержит кириллицы,
   из-за чего в строках с латиницей/цифрами шрифт «прыгал». Inter покрывает
   кириллицу и латиницу единообразно — чисто и без смешения. Микроподписи и
   время — JetBrains Mono (var(--font-mono)).
   ============================================ */

.mr {
  padding: calc(56px + var(--space-md)) 0 var(--space-2xl);
  min-height: 70vh;
}
.mr .container { max-width: 760px; }

/* hidden обязан побеждать .btn{display:inline-flex} из index.css —
   иначе скрытые кнопки навигации показываются все разом. */
.mr [hidden] { display: none !important; }

/* Сброс глобального section{padding: var(--space-2xl) 0} из index.css: из-за него
   интро раздувался на ~190px и появлялась пустота над прогрессом (padding-top
   секции визарда). Вертикальные отступы держим своими margin'ами. */
.mr-intro, .mr-wizard, .mr-result { padding: 0; }

/* Заголовки страницы — единый Inter, премиум-набор */
.mr-h1 {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.04;
  font-size: clamp(2.1rem, 6vw, 3.4rem);
  color: var(--color-black);
}
.mr-kicker {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-red);
}

/* --- Интро --- */
.mr-intro {
  max-width: 640px;
  margin: 0 auto var(--space-xl);
  text-align: center;
}
.mr-intro .mr-kicker { margin-bottom: var(--space-md); }
.mr-intro .mr-h1 { margin-bottom: var(--space-md); }
.mr-lead {
  font-size: 1.06rem;
  line-height: 1.65;
  color: var(--color-gray);
  max-width: 52ch;
  margin: 0 auto;
}

/* --- Визард --- */
.mr-wizard { max-width: 560px; margin: 0 auto; }

.mr-progress {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: var(--space-lg);   /* прогресс теперь ПОД опросником */
}
.mr-progress span {
  width: 32px; height: 3px; border-radius: 2px;
  background: var(--color-beige-dark);
  transition: background var(--duration-fast) var(--ease-out);
}
.mr-progress span.is-done { background: var(--color-gray-light); }
.mr-progress span.is-active { background: var(--color-red); }

.mr-step { display: none; border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.mr-step.is-active { display: block; animation: mr-fade var(--duration-normal) var(--ease-out); }
.mr-step-title {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 1.6rem;
  line-height: 1.15;
  color: var(--color-black);
  margin-bottom: 0.5rem;
}
/* программный .focus() на заголовок шага/результата (для скринридера) не должен
   рисовать видимую рамку — это не интерактивный контрол */
.mr-step-title:focus, .mr-result-head:focus { outline: none; }
.mr-step-hint {
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--color-gray);
  margin-bottom: var(--space-lg);
}

/* Чипы выбора */
.mr-options { display: flex; flex-wrap: wrap; gap: 10px; }
.mr-chip {
  display: inline-flex; align-items: center;
  min-height: 50px;
  padding: 0.75rem 1.15rem;
  border: 1.5px solid var(--color-beige-dark);
  background: var(--color-white);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font-body); font-size: 0.97rem; line-height: 1.25;
  color: var(--color-black); text-align: left;
  transition: border-color var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}
.mr-chip small { display: block; font-size: 0.78rem; color: var(--color-gray); margin-top: 2px; }
.mr-chip:hover { border-color: var(--color-black); }
.mr-chip[aria-pressed="true"] {
  background: var(--color-black); color: var(--color-white); border-color: var(--color-black);
}
.mr-chip[aria-pressed="true"] small { color: var(--color-beige-dark); }
.mr-chip:focus-visible { outline: 2.5px solid var(--color-red); outline-offset: 2px; }

/* Варианты «целого дня» по удалённости — переключатель над таймлайном */
.mr-variants { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--space-lg); }
.mr-variant {
  flex: 1 1 140px; display: flex; flex-direction: column; gap: 2px;
  min-height: 50px; padding: 0.7rem 1rem;
  border: 1.5px solid var(--color-beige-dark); background: var(--color-white);
  border-radius: var(--radius-md); cursor: pointer; text-align: left;
  font-family: var(--font-body); color: var(--color-black);
  transition: border-color var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.mr-variant:hover { border-color: var(--color-black); }
.mr-variant.is-active { background: var(--color-black); color: var(--color-white); border-color: var(--color-black); }
.mr-variant.is-active .mr-variant-sub { color: var(--color-beige-dark); }
.mr-variant:focus-visible { outline: 2.5px solid var(--color-red); outline-offset: 2px; }
.mr-variant-label { font-weight: 600; font-size: 0.97rem; }
.mr-variant-sub { font-size: 0.74rem; color: var(--color-gray); }

/* Тумблер «без лестниц» */
.mr-toggle {
  display: flex; align-items: center; gap: 14px;
  min-height: 56px; padding: 1rem 1.15rem;
  border: 1.5px solid var(--color-beige-dark); border-radius: var(--radius-md);
  cursor: pointer; user-select: none;
}
.mr-toggle:hover { border-color: var(--color-black); }
.mr-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mr-toggle-track {
  flex: 0 0 auto; width: 48px; height: 28px; border-radius: 14px;
  background: var(--color-beige-dark); position: relative;
  transition: background var(--duration-fast) var(--ease-out);
}
.mr-toggle-track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--color-white);
  transition: transform var(--duration-fast) var(--ease-out);
}
.mr-toggle input:checked + .mr-toggle-track { background: var(--color-red); }
.mr-toggle input:checked + .mr-toggle-track::after { transform: translateX(20px); }
.mr-toggle input:focus-visible + .mr-toggle-track { outline: 2.5px solid var(--color-red); outline-offset: 2px; }
.mr-toggle-label { font-size: 0.98rem; }
.mr-toggle-label small { display: block; font-size: 0.8rem; color: var(--color-gray); margin-top: 2px; }

.mr-nav { display: flex; align-items: center; gap: 10px; margin-top: var(--space-lg); }
.mr-nav .btn {
  min-height: 50px; padding: 0 1.7rem; border-radius: 999px;
  font-family: var(--font-mono); font-weight: 500;
  font-size: 0.78rem; letter-spacing: 0.07em; text-transform: uppercase;
}
.mr-nav .btn-ghost {
  border: 1px solid var(--color-beige-dark); background: transparent;
  color: var(--color-gray); text-decoration: none; padding: 0 1.4rem;
}
.mr-nav .btn-ghost:hover { border-color: var(--color-red); color: var(--color-red); }
.mr-nav .btn-outline { border: 1px solid var(--color-black); background: transparent; color: var(--color-black); }
.mr-nav .btn-outline:hover { border-color: var(--color-red); color: var(--color-red); background: transparent; }
.mr-nav [data-mr-next], .mr-nav [data-mr-build] { margin-left: auto; }

/* Disabled-состояния кнопок (только внутри /marshrut) */
.mr .btn:disabled, .mr .btn[disabled] {
  opacity: 0.38; cursor: not-allowed; pointer-events: none;
}

/* --- Результат --- */
.mr-result { max-width: 680px; margin: 0 auto; animation: mr-fade var(--duration-normal) var(--ease-out); }

.mr-result-head {
  padding-bottom: var(--space-lg);   /* отступ заголовок → черта */
  margin-bottom: var(--space-lg);    /* черта → модуль погоды: симметрично и компактнее (было --space-xl) */
  border-bottom: 1px solid var(--color-beige-dark);
}
.mr-result-head-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: var(--space-md);
}
.mr-result-head .mr-h1 { margin-bottom: 0.4rem; }
.mr-summary {
  font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.02em;
  color: var(--color-gray); line-height: 1.5;
}

/* Компактные действия в шапке: «Поделиться» / «Изменить» */
.mr-head-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.mr-head-btn {
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.5rem 0.9rem; min-height: 38px;
  border: 1px solid var(--color-beige-dark); border-radius: 999px;
  background: transparent; color: var(--color-black); cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.mr-head-btn:hover { border-color: var(--color-red); color: var(--color-red); }
.mr-head-btn:focus-visible { outline: 2.5px solid var(--color-red); outline-offset: 2px; }

/* Сезон / гардероб / предупреждения — тихая строка */
.mr-weather {
  display: block; margin: 0 0 var(--space-lg);
  padding: 0.9rem 1.1rem; border-left: 2px solid var(--color-red);
  background: var(--color-beige-light); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.92rem; line-height: 1.55; color: var(--color-black-soft);
}
.mr-weather strong { font-weight: 600; }

/* ===================== Погодный баннер (LocalWeather) =====================
   Премиум-карточка вместо прежнего блока «Что надеть»: крупная температура
   (как время заката — var(--font-display), это цифры, кириллицы нет),
   mono-подписи, красный точечно (иконка). Место зарезервировано скелетоном —
   живые данные подъезжают без скачка вёрстки. */
.mr-wx {
  position: relative;
  display: block;
  margin: 0 0 var(--space-lg);
  padding: 0.95rem 1.15rem 0.9rem;
  min-height: 170px;                 /* резерв ≈ высоте живого баннера (замерено) → CLS ≈ 0 */
  background:
    radial-gradient(120% 120% at 90% 0%, rgba(218, 41, 28, 0.05), transparent 58%),
    linear-gradient(165deg, var(--color-beige-light), var(--color-white));
  border: 1px solid var(--color-beige-dark);
  border-radius: var(--radius-lg);
}

/* --- Скелетон загрузки --- */
.mr-wx[data-state="loading"] .mr-wx-skeleton { display: block; }
.mr-wx-skeleton {
  display: none;
  height: 140px;
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, var(--color-beige-light) 25%, var(--color-beige) 38%, var(--color-beige-light) 62%);
  background-size: 360% 100%;
  animation: mr-wx-shimmer 1.4s var(--ease-in-out) infinite;
}
@keyframes mr-wx-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* --- Шапка: иконка + температура + состояние в одну строку --- */
.mr-wx-main { display: flex; align-items: center; gap: 0.7rem; }
.mr-wx-ico { flex: 0 0 auto; width: 38px; height: 38px; color: var(--color-red); }
.mr-wx-ico svg { width: 38px; height: 38px; display: block; }

.mr-wx-headline { display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap; min-width: 0; }
.mr-wx-temp {
  font-family: var(--font-display);
  font-size: 2.15rem;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--color-black);
}
.mr-wx-state {
  font-size: 0.9rem;
  color: var(--color-black-soft);
}
.mr-wx-feels { color: var(--color-gray); font-size: 0.76rem; letter-spacing: 0.02em; }

/* --- Строки осадки/ветер/закат (mono-подписи) --- */
.mr-wx-rows {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  margin-top: 0.6rem;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-gray);
}
.mr-wx-evening { color: var(--color-red); }

/* --- Рекомендация (выведена из чисел) --- */
.mr-wx-advice {
  margin: 0.55rem 0 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--color-black-soft);
}
.mr-wx-advice strong { font-weight: 600; }

/* --- Метка времени + источник --- */
.mr-wx-meta {
  margin: 0.5rem 0 0;
  font-size: 0.64rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-gray-light);
}
.mr-wx-meta a {
  color: var(--color-gray);
  border-bottom: 1px solid transparent;
  transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.mr-wx-meta a:hover,
.mr-wx-meta a:focus-visible { color: var(--color-red); border-color: var(--color-red); outline: none; }

/* --- Фолбэк / устаревшее — приглушённая иконка --- */
.mr-wx[data-state="fallback"] .mr-wx-ico,
.mr-wx[data-state="stale"] .mr-wx-ico { color: var(--color-gray); }
.mr-wx-main--fb .mr-wx-state { color: var(--color-gray); }

@media (max-width: 480px) {
  .mr-wx { padding: 0.9rem 1rem; min-height: 212px; }   /* мобайл: текст переносится → выше (замерено) */
  .mr-wx-skeleton { height: 182px; }
}

@media (prefers-reduced-motion: reduce) {
  .mr-wx-skeleton { animation: none; }
}

/* Таймлайн */
.mr-timeline { list-style: none; position: relative; margin: 0 0 var(--space-xl); padding: 0; }
.mr-timeline::before {
  content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 2px;
  background: var(--color-beige-dark);
}
.mr-point { position: relative; padding: 0 0 var(--space-lg) 30px; }
.mr-point::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--color-white); border: 2px solid var(--color-black);
}
.mr-point.is-sunset::before { background: var(--color-red); border-color: var(--color-red); }
.mr-point-time {
  font-size: 0.78rem; letter-spacing: 0.04em; color: var(--color-red);
  text-transform: uppercase;
}
.mr-point-name {
  font-family: var(--font-body); font-weight: 600; letter-spacing: -0.01em;
  font-size: 1.28rem; line-height: 1.2; color: var(--color-black); margin: 3px 0 5px;
}
.mr-point.is-sunset .mr-point-name { color: var(--color-red); }
.mr-point-meta { font-size: 0.8rem; color: var(--color-gray); margin-bottom: 6px; line-height: 1.45; }
.mr-point-blurb { font-size: 0.96rem; line-height: 1.6; color: var(--color-black-soft); }
.mr-point-note {
  font-size: 0.86rem; line-height: 1.5; color: var(--color-black-soft); margin-top: 8px;
  padding: 0.55rem 0.75rem; background: var(--color-beige-light); border-radius: var(--radius-sm);
}
.mr-point-links { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; align-items: center; }
.mr-point-links a {
  font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.02em;
  color: var(--color-gray); text-decoration: none; border-bottom: 1px solid var(--color-beige-dark);
  padding-bottom: 1px; transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.mr-point-links a:hover { color: var(--color-red); border-color: var(--color-red); }

.mr-sunset-extra { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.mr-map-deep {
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--color-black);
  text-decoration: none; border-bottom: 1px solid var(--color-beige-dark); width: fit-content; padding-bottom: 1px;
}
.mr-map-deep:hover { color: var(--color-red); border-color: var(--color-red); }

/* Пеший интервал */
.mr-walk {
  position: relative; padding: 0 0 var(--space-lg) 30px; min-height: 18px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--color-gray); letter-spacing: 0.02em;
}
.mr-walk-badges { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.mr-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px;
  font-size: 0.7rem; letter-spacing: 0.02em; background: var(--color-beige-dark); color: var(--color-black);
}
.mr-badge.is-warn { background: var(--color-red); color: var(--color-white); }

/* Карта (click-to-load) + кнопка под ней */
.mr-map { margin: var(--space-lg) 0 var(--space-xl); }
.mr-map-frame {
  position: relative; width: 100%; aspect-ratio: 16 / 11; border-radius: var(--radius-md);
  overflow: hidden; background: var(--color-beige-dark);
}
.mr-map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.mr-map-load {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: 0; background: var(--color-beige-dark); color: var(--color-black);
  font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.05em; text-transform: uppercase;
}
.mr-map-load:hover { color: var(--color-red); }
.mr-map-load:focus-visible { outline: 2.5px solid var(--color-red); outline-offset: -3px; }
.mr-map-open {
  width: 100%; margin-top: 12px; min-height: 50px; border-radius: 999px;
  font-family: var(--font-mono); font-weight: 500;
  font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
}
.mr-map-open.btn-outline { border: 1px solid var(--color-black); }
.mr-map-open.btn-outline:hover { border-color: var(--color-red); color: var(--color-red); background: transparent; }

/* ЛОКАЛ — ненавязчивая закрывающая строка (не громоздкий блок) */
.mr-brand {
  margin: var(--space-xl) 0 var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-beige-dark);
}
.mr-brand-line { font-size: 0.96rem; line-height: 1.6; color: var(--color-black-soft); max-width: 52ch; }
.mr-brand-line strong { font-weight: 600; color: var(--color-black); }
.mr-brand-links { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 12px; }
.mr-link {
  font-size: 0.78rem; letter-spacing: 0.03em; color: var(--color-black);
  text-decoration: none; border-bottom: 1px solid var(--color-beige-dark); padding-bottom: 1px;
}
.mr-link:hover { color: var(--color-red); border-color: var(--color-red); }

/* Тост */
.mr-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(12px);
  background: var(--color-black); color: var(--color-white); padding: 0.7rem 1.2rem;
  border-radius: 999px; font-size: 0.9rem; opacity: 0; pointer-events: none; z-index: 9999;
  transition: opacity var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out);
}
.mr-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

.mr-noscript { max-width: 52ch; margin: var(--space-lg) auto; text-align: center; color: var(--color-black-soft); }
.mr-noscript a { color: var(--color-red); }

@keyframes mr-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (min-width: 720px) {
  .mr-options { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .mr-step.is-active, .mr-result { animation: none; }
  .mr-toast, .mr-progress span, .mr-chip, .mr-toggle-track, .mr-toggle-track::after,
  .mr-head-btn, .mr-point-links a, .mr-map-load { transition: none; }
}


/* ---------- Карусель товаров + SEO-секция: редакционный «журнальный» стиль (как в /guide) ---------- */
/* Серифный читательский шрифт и тёплые чернила — как в журнале (глобально не определены). */
.mr-products,
.mr-seo,
.mr-faq {
    --font-serif: 'Charter', 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Cambria', Georgia, serif;
    --ink: #211f1c;
    --ink-soft: #4a463f;
    --rule: rgba(33, 31, 28, 0.13);
}

/* Карусель: видно 2 карточки, листание стрелками / свайпом (рендерит инлайн-скрипт). */
.mr-products { max-width: 50rem; margin: var(--space-2xl) auto 0; padding-top: var(--space-xl); border-top: 1px solid var(--rule); }
.mr-products-kicker {
    display: flex; align-items: center; gap: 0.6rem;
    font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase;
    letter-spacing: 0.16em; color: var(--color-red); margin: 0 0 var(--space-md);
}
.mr-products-kicker::before { content: ""; width: 1.6rem; height: 1px; background: var(--color-red); opacity: 0.7; }
.article-products { position: relative; margin: 0; }
.article-products-track {
    display: flex; gap: var(--space-md);
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 5px 2px;
}
.article-products-track::-webkit-scrollbar { display: none; }
.article-product {
    flex: 0 0 calc(50% - var(--space-md) / 2);
    scroll-snap-align: start;
    display: flex; gap: var(--space-md); align-items: center;
    padding: var(--space-sm);
    border: 1px solid var(--rule); border-radius: var(--radius-md);
    text-decoration: none; background: rgba(255, 255, 255, 0.4);
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.article-product:hover { border-color: var(--color-red); transform: translateY(-1px); }
.article-product-media { flex: 0 0 96px; width: 96px; height: 96px; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-beige-dark); }
.article-product-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-product-body { display: flex; flex-direction: column; gap: 0.18rem; min-width: 0; }
.article-product-kicker { font-family: var(--font-mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-red); }
.article-product-name { font-family: var(--font-serif); font-weight: 600; font-size: 1.2rem; color: var(--ink); }
.article-product-desc { font-family: var(--font-serif); font-size: 0.95rem; color: var(--ink-soft); }
.article-product-price { font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink); }
.article-product-cta { margin-top: 0.25rem; font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-red); }
.article-products-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%;
    background: rgba(250, 250, 248, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    color: var(--color-black);
    box-shadow: 0 8px 24px rgba(26, 26, 26, 0.10), 0 2px 6px rgba(26, 26, 26, 0.06);
    cursor: pointer; z-index: 3;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease, background 0.22s ease, color 0.22s ease;
}
.article-products-arrow svg { width: 18px; height: 18px; display: block; }
.article-products-arrow:hover { background: var(--color-black); color: var(--color-beige-light); transform: translateY(-50%) scale(1.06); }
.article-products-prev { left: -8px; }
.article-products-next { right: -8px; }
.article-products-arrow[disabled] { opacity: 0; pointer-events: none; transform: translateY(-50%) scale(0.9); }

/* SEO-секция — редакционный лонгрид: серифная колонка, буквица, hairline-акценты. */
.mr-seo { max-width: 50rem; margin: var(--space-2xl) auto 0; }
.mr-seo > h2 {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 6.5vw, 3.6rem);
    line-height: 0.95; letter-spacing: 0.01em; color: var(--ink);
    margin: 0 0 var(--space-lg);
}
.mr-seo h3 {
    font-family: var(--font-serif); font-weight: 600;
    font-size: clamp(1.4rem, 3.4vw, 1.9rem); line-height: 1.2; letter-spacing: -0.01em;
    color: var(--ink); margin: var(--space-xl) 0 var(--space-sm);
}
.mr-seo p { font-family: var(--font-serif); font-size: 1.18rem; line-height: 1.78; color: var(--ink-soft); margin: 0 0 var(--space-md); }
.mr-seo > p:first-of-type::first-letter {
    font-family: var(--font-display); font-size: 3.4em; line-height: 0.7;
    float: left; margin: 0.08em 0.12em 0 0; color: var(--color-red);
}
.mr-seo ul { list-style: none; padding: 0; margin: 0 0 var(--space-md); }
.mr-seo li { font-family: var(--font-serif); font-size: 1.15rem; line-height: 1.62; color: var(--ink-soft); position: relative; padding-left: 1.5rem; margin-bottom: 0.7rem; }
.mr-seo li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.5rem; height: 1px; background: var(--color-red); }
.mr-seo li strong, .mr-seo strong { color: var(--ink); font-weight: 600; }
.mr-seo a {
    color: var(--color-red); text-decoration: none;
    background-image: linear-gradient(var(--color-red), var(--color-red));
    background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 1.15em;
    transition: background-size 0.2s ease; padding-bottom: 1px;
}
.mr-seo a:hover { background-size: 100% 2px; }

/* FAQ — редакционные строки с +/− */
.mr-faq { max-width: 50rem; margin: var(--space-xl) auto 0; }
.mr-faq h2 { font-family: var(--font-display); font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1; color: var(--ink); margin: 0 0 var(--space-sm); }
.mr-faq details { border-top: 1px solid var(--rule); padding: 0.95rem 0; }
.mr-faq summary { cursor: pointer; font-family: var(--font-serif); font-weight: 600; font-size: 1.18rem; color: var(--ink); list-style: none; }
.mr-faq summary::-webkit-details-marker { display: none; }
.mr-faq summary::after { content: "+"; float: right; color: var(--color-red); font-family: var(--font-mono); margin-left: 1rem; }
.mr-faq details[open] summary::after { content: "\2212"; }
.mr-faq details p { font-family: var(--font-serif); margin: 0.6rem 0 0; color: var(--ink-soft); font-size: 1.08rem; line-height: 1.72; }

@media (max-width: 768px) {
    .article-product { flex-basis: 86%; flex-direction: column; align-items: flex-start; }
    .article-product-media { width: 100%; height: auto; aspect-ratio: 3 / 2; flex-basis: auto; }
    .article-products-arrow { display: none; }
}

/* ---------- Мобильное меню: подгонка под полный nav ----------
   База .mobile-menu в index.css рассчитана на ~6 пунктов (центрирование, gap 2.5rem,
   шрифт 2.5rem, без отступа под фикс-шапку) → 9 пунктов уезжают под лого и не влезают.
   Грузимся после index.css, поэтому переопределяем здесь (только на /marshrut). */
.mobile-menu {
    justify-content: flex-start;
    gap: var(--space-md);
    padding: 92px var(--space-lg) var(--space-2xl);
    overflow-y: auto;
}
.mobile-menu a { font-size: clamp(1.6rem, 6.8vw, 2.2rem); }