/* ═══════════════════════════════════════════════════════════════════
   mobile-v2.css — мобильная версия сайта (≤767px), светлая тема по макету 2026-09-30.
   Заменяет mobile-redesign.css на страницах, переведённых на новый дизайн
   (подключает tools/gen_mobile_v2.py, версия ?v= — хэш файла).
   Десктоп ≥768px не затрагивается: вне медиа-запросов здесь только правила,
   которые ПРЯЧУТ мобильные элементы (.m2-only, нижняя панель, точки каруселей).
   ═══════════════════════════════════════════════════════════════════ */

.m2-only { display: none !important; }
#mobileStickyBar { display: none; }
.diseases-dots, .treatment-dots { display: none; }

@media (max-width: 767px) {

  /* ── 0. Токены ─────────────────────────────────────────────────── */
  :root {
    --m2-ink: #111C2D;        /* основной текст */
    --m2-muted: #586577;      /* второстепенный текст */
    --m2-line: #DCE2EA;       /* границы, разделители */
    --m2-bg: #F4F6F9;         /* фон чередующихся секций */
    --m2-tint: #EAF2FB;       /* выбранное / подсветка */
    --m2-primary: #1B4B82;    /* кнопки — фирменный синий */
    --m2-primary-d: #153D6B;
    --m2-link: #1D65B5;       /* ссылки */
    --m2-gold: #C9A368;       /* фирменное золото — только акценты */
    --m2-r: 10px;
    --m2-nav-h: 64px;
    --m2-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }

  .m2-only { display: block !important; }
  .m2-only.m2-flex { display: flex !important; }
  .m2-only.m2-inline { display: inline !important; }
  .m2-hide { display: none !important; }

  /* ── 1. База: без горизонтальной прокрутки, системный шрифт ───── */
  html { overflow-x: hidden !important; overflow-x: clip !important; max-width: 100vw !important; width: 100% !important; }
  body {
    overflow-x: hidden !important; overflow-x: clip !important; max-width: 100vw !important; width: 100% !important;
    position: relative; overscroll-behavior-x: none;
    background: #fff; color: var(--m2-ink);
    padding-bottom: 0 !important;
  }
  body > * { max-width: 100vw; }
  body > section, body > footer { max-width: 100vw; overflow-x: clip; }

  html body, html body :where(h1, h2, h3, h4, p, a, span, div, li, button, input, select, textarea, label, small, strong, b, em, summary, option) {
    font-family: var(--m2-font) !important;
  }
  /* Фирменная антиква остаётся только в логотипе */
  html body #navbar a:first-child .font-display,
  html body #mobileDrawer #mmTitle > div:first-child {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
  }

  /* iOS: поля < 16px вызывают авто-зум страницы */
  input, select, textarea, .form-field, .form-input, .form-textarea, .bf-input, .bf-select { font-size: 16px !important; }

  /* ── 2. Шапка ──────────────────────────────────────────────────── */
  html body #navbar,
  html body #navbar:not(.scrolled),
  html body #navbar.scrolled {
    background: #fff !important;
    box-shadow: none !important;
    border-bottom: 1px solid var(--m2-line);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    padding: 12px 12px 11px 14px !important;
  }
  #navbar > .max-w-6xl, #navbar > div { padding-left: 0 !important; padding-right: 0 !important; }
  #navbar > .max-w-6xl > a:first-child,
  #navbar > div > a:first-child {
    gap: 9px !important; margin-right: 8px !important; min-width: 0 !important; overflow: hidden !important;
  }
  #navbar .logo-emblem,
  #navbar a[href="index"] > div:first-child,
  #navbar a[href="/en/"] > div:first-child { width: 40px !important; height: 40px !important; flex-shrink: 0 !important; }
  #navbar a:first-child > .flex.flex-col,
  #navbar .navbar-logo-text { display: flex !important; visibility: visible !important; min-width: 0 !important; max-width: 100% !important; }
  #navbar a:first-child .font-display {
    color: #0B2D5C !important; font-size: 1.06rem !important; line-height: 1.05 !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
  }
  #navbar a:first-child .font-body {
    color: var(--m2-muted) !important; font-size: 0.58rem !important; letter-spacing: 0.07em !important;
    margin-top: 3px !important; gap: 5px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important;
  }
  /* правая группа: язык + меню */
  #navbar > .max-w-6xl > div:last-child,
  #navbar > div > div:last-child {
    margin-left: 0 !important; padding-left: 0 !important; border-left: 0 !important; gap: 8px !important;
  }
  #navbar a[href^="tel:"].md\:hidden,
  #navbar a[href*="wa.me"].md\:hidden { display: none !important; }
  #navbar #menuBtn {
    width: 44px !important; height: 44px !important; flex-shrink: 0 !important; margin: 0 !important;
    background: transparent !important; border: 0 !important; border-radius: 10px !important;
  }
  #navbar #menuBtn .drawer-bar, #navbar #menuBtn span { background: var(--m2-ink) !important; width: 22px !important; }

  /* переключатель языка: только выпадающий список */
  body #navbar .lang-seg,
  body #navbar [data-lang-switcher="mobile"] {
    display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; overflow: hidden !important; pointer-events: none !important;
  }
  body.has-mobile-bar #navbar .lang-switch-wrap,
  body #navbar .lang-switch-wrap { display: inline-flex !important; visibility: visible !important; flex-shrink: 0 !important; }
  #navbar .lang-switch {
    background: #fff !important; border: 1px solid var(--m2-line) !important; color: var(--m2-ink) !important;
    padding: 0 10px !important; height: 36px; font-size: 0.8125rem !important; font-weight: 600; gap: 4px !important; border-radius: 8px !important;
  }
  #navbar .lang-switch .lang-globe { display: none !important; }
  #navbar .lang-switch .lang-chevron { display: inline-block !important; opacity: 0.6; }
  #navbar .lang-menu {
    min-width: 168px; max-height: none !important; overflow: visible !important;
    background: #fff !important; border: 1px solid var(--m2-line) !important; border-radius: 12px !important;
    box-shadow: 0 12px 32px rgba(17,28,45,0.16) !important;
  }
  #navbar #langMenu > a, #navbar #langMenu > *, #navbar .lang-menu > a, #navbar .lang-menu .lang-item, #navbar .lang-menu [data-lang] {
    display: flex !important; visibility: visible !important; opacity: 1 !important; height: auto !important; min-height: 44px !important;
    width: auto !important; overflow: visible !important; pointer-events: auto !important; text-decoration: none !important;
  }
  #navbar .lang-item { color: var(--m2-ink) !important; }
  #navbar .lang-item.is-active { background: var(--m2-tint) !important; color: var(--m2-link) !important; }

  /* ── 3. Главная: первый экран (.m2-hero) ───────────────────────── */
  html body #hero.hero-bg,
  html body.bar-visible #hero {
    background: #fff !important;
    padding: calc(var(--m2-nav-h) + 14px) 16px 6px !important;
  }
  /* 641–767px: над шапкой остаётся полоса «Приём 7 дней в неделю» — сдвигаем первый экран на её высоту */
  @media (min-width: 641px) { html body.bar-visible #hero { padding-top: calc(var(--m2-nav-h) + 18px + var(--wb-h, 38px)) !important; } }
  #hero .hero-dots, #hero .hero-dots-2 { display: none !important; }
  .m2-hero { color: var(--m2-ink); }
  .m2-h1 { font-size: clamp(1.2rem, 5.9vw, 1.7rem); line-height: 1.16; text-wrap: balance; font-weight: 800; letter-spacing: -0.02em; margin: 0; color: var(--m2-ink); }
  .m2-sub { font-size: 1rem; line-height: 1.35; color: var(--m2-muted); margin: 4px 0 10px; }
  .m2-photo { border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 10; background: #E7ECF2; }
  .m2-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
  @media (max-height: 640px) { .m2-photo { aspect-ratio: 2.2 / 1; } }
  @media (min-width: 520px) { .m2-photo { aspect-ratio: auto; height: 250px; } }
  .m2-name { font-size: 1.3125rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; margin: 10px 0 4px; }
  .m2-meta { font-size: 0.9375rem; line-height: 1.5; color: var(--m2-muted); margin: 0; }
  .m2-rating {
    display: inline-flex; align-items: center; gap: 7px; min-height: 36px; margin-top: 4px;
    color: var(--m2-link); font-size: 0.9375rem; text-decoration: none;
  }
  .m2-rating b { color: var(--m2-ink); font-weight: 700; }
  .m2-star { color: var(--m2-gold); flex: none; margin-top: -2px; }
  .m2-rating > svg:last-child { flex: none; opacity: 0.85; }

  .m2-offer { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--m2-line); }
  .m2-offer-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .m2-offer-t { font-size: 1.125rem; font-weight: 700; }
  .m2-offer-p { font-size: 1.25rem; font-weight: 700; white-space: nowrap; }
  .m2-offer-d { font-size: 0.9375rem; color: var(--m2-muted); margin: 2px 0 10px; }
  .m2-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    height: 54px; border-radius: var(--m2-r);
    background: var(--m2-primary); color: #fff !important;
    font-size: 1.0625rem; font-weight: 600; text-decoration: none;
    -webkit-tap-highlight-color: transparent; transition: background 0.15s;
  }
  .m2-btn:active { background: var(--m2-primary-d); }
  .m2-next { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 6px; margin-top: 10px; font-size: 0.875rem; color: var(--m2-muted); text-decoration: none; }
  .m2-next[hidden] { display: none !important; }
  .m2-next b { color: var(--m2-ink); font-weight: 600; }
  .m2-next-dot { width: 8px; height: 8px; border-radius: 50%; background: #2FA35B; flex: none; }
  .m2-contacts { display: grid; grid-template-columns: 1fr 1fr; margin-top: 6px; }
  .m2-contact {
    display: flex; align-items: center; justify-content: center; gap: 9px; height: 50px;
    color: var(--m2-link); font-size: 1rem; font-weight: 500; text-decoration: none; position: relative;
  }
  .m2-contact + .m2-contact::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: var(--m2-line); }
  .m2-hours { font-size: 0.9375rem; color: var(--m2-muted); margin: 0; text-align: center; }

  .m2-topics { margin-top: 18px; padding-top: 20px; border-top: 1px solid var(--m2-line); }
  .m2-h2 { font-size: 1.25rem; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 4px; }
  .m2-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 54px; border-bottom: 1px solid var(--m2-line);
    color: var(--m2-ink); font-size: 1.0625rem; text-decoration: none;
  }
  .m2-row svg { color: var(--m2-ink); flex: none; opacity: 0.8; }
  .m2-more { display: inline-flex; align-items: center; gap: 8px; min-height: 50px; color: var(--m2-link); font-size: 1rem; font-weight: 500; text-decoration: none; }

  /* ── 4. Секции: общие заголовки и отступы ──────────────────────── */
  section .section-eyebrow { display: none !important; }
  section .ornament { display: none !important; }
  html body section h2,
  html body section h2.font-display {
    font-size: 1.4375rem !important; line-height: 1.2 !important; font-weight: 700 !important;
    letter-spacing: -0.015em !important; color: var(--m2-ink) !important; font-style: normal;
  }
  #symptom-matcher, #diseases, #reviews, #faq, #contact { padding: 30px 16px !important; position: relative; }
  #symptom-matcher > div > .text-center:first-child,
  #diseases > div > .text-center:first-of-type,
  #reviews > div > .text-center:first-child,
  #faq > div > .text-center:first-child,
  #contact > div > .text-center:first-child { text-align: left !important; margin-bottom: 18px !important; }
  #symptom-matcher > div > .text-center:first-child p,
  #diseases > div > .text-center:first-of-type p,
  #reviews > div > .text-center:first-child p,
  #faq > div > .text-center:first-child p,
  #contact > div > .text-center:first-child p {
    margin-left: 0 !important; margin-right: 0 !important; font-size: 0.9375rem !important; line-height: 1.5 !important; color: var(--m2-muted) !important;
  }
  section h2.font-display.mb-4, section h2.font-display.mb-3 { margin-bottom: 6px !important; }

  /* кнопки */
  html body .btn-primary {
    background: var(--m2-primary) !important; border-radius: var(--m2-r) !important; box-shadow: none !important;
    font-weight: 600; animation: none !important;
  }
  html body .btn-primary:hover { transform: none; }

  /* ── 5. Преимущества ───────────────────────────────────────────── */
  html body #key-benefits { background: var(--m2-bg) !important; padding: 30px 16px !important; margin-top: 0 !important; }
  #key-benefits::before, #key-benefits::after, #key-benefits .kb-orb-right, #key-benefits .kb-eyebrow { display: none !important; }
  #key-benefits .kb-inner { padding: 0 !important; max-width: none !important; }
  html body #key-benefits .kb-heading {
    text-align: left !important; font-size: 1.4375rem !important; line-height: 1.2 !important; font-weight: 700 !important;
    color: var(--m2-ink) !important; margin: 0 0 16px !important; letter-spacing: -0.015em !important;
  }
  #key-benefits .kb-heading em { font-style: normal !important; color: inherit !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
  html body #key-benefits .kb-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; margin: 0 0 18px !important; }
  html body #key-benefits .kb-card {
    position: relative; background: #fff !important; border: 1px solid var(--m2-line) !important; border-radius: 12px !important;
    box-shadow: none !important; padding: 14px 14px 14px 62px !important; min-height: 64px; transform: none !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important; overflow: visible !important;
  }
  #key-benefits .kb-card::before, #key-benefits .kb-card::after { display: none !important; }
  html body #key-benefits .kb-icon-wrap {
    position: absolute; left: 14px; top: 14px; width: 36px !important; height: 36px !important; margin: 0 !important;
    border-radius: 10px !important; background: var(--m2-tint) !important; box-shadow: none !important;
  }
  html body #key-benefits .kb-icon-wrap svg { width: 20px !important; height: 20px !important; stroke: var(--m2-primary) !important; }
  #key-benefits .kb-badge, #key-benefits .kb-day-pills { display: none !important; }
  html body #key-benefits .kb-card-title { font-size: 1rem !important; line-height: 1.3 !important; font-weight: 600 !important; color: var(--m2-ink) !important; margin: 0 0 3px !important; }
  html body #key-benefits .kb-card-desc { font-size: 0.875rem !important; line-height: 1.45 !important; color: var(--m2-muted) !important; }
  html body #key-benefits .kb-cta { display: block !important; text-align: left !important; }
  html body #key-benefits .kb-cta-text { display: none !important; }
  html body #key-benefits .kb-cta-btn {
    display: flex !important; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; padding: 8px 14px !important;
    border-radius: var(--m2-r) !important; background: var(--m2-primary) !important; color: #fff !important; box-shadow: none !important;
    font-size: 1rem !important; line-height: 1.25 !important; font-weight: 600 !important; border: 0 !important; animation: none !important; text-align: center;
  }

  /* ── 6. Подбор по симптомам ────────────────────────────────────── */
  html body #symptom-matcher { background: #fff !important; }
  #sm-gender-row { justify-content: flex-start !important; margin-bottom: 14px !important; }
  html body .sm-gender { border-radius: 8px !important; padding: 9px 16px !important; color: var(--m2-ink) !important; border-color: #C6CFDB !important; font-size: 0.9375rem !important; }
  html body .sm-gender-active { background: var(--m2-primary) !important; border-color: var(--m2-primary) !important; color: #fff !important; }
  html body .sm-chip { border-radius: 10px !important; box-shadow: none !important; border-color: var(--m2-line) !important; color: var(--m2-ink) !important; }
  html body .sm-chip-ico { color: var(--m2-primary) !important; }
  html body .sm-chip-active { background: var(--m2-primary) !important; border-color: var(--m2-primary) !important; color: #fff !important; }
  html body .sm-chip-active .sm-chip-ico { color: #fff !important; }
  html body .sm-card { border-radius: 12px !important; border-color: var(--m2-line) !important; box-shadow: none !important; padding: 16px !important; }
  html body .sm-card-top { border: 2px solid var(--m2-link) !important; background: var(--m2-tint) !important; }
  html body .sm-card-icon { background: var(--m2-primary) !important; border-radius: 10px !important; }
  html body .sm-card-badge { color: var(--m2-link) !important; letter-spacing: 0.04em !important; }
  html body .sm-card-title { font-size: 1.0625rem !important; color: var(--m2-ink) !important; }
  html body .sm-card-desc { font-size: 0.875rem !important; color: var(--m2-muted) !important; }
  html body .sm-card-arrow { color: var(--m2-link) !important; }
  #sm-empty { padding: 14px 0 0 !important; text-align: left !important; color: var(--m2-muted) !important; }
  html body #sm-float { background: var(--m2-primary) !important; border-radius: var(--m2-r) !important; box-shadow: 0 8px 24px rgba(17,28,45,0.22) !important; }

  /* ── 7. Направления (карусель карточек) ────────────────────────── */
  #diseases .max-w-6xl > .grid { gap: 12px !important; }
  #diseases .disease-card { border-radius: 12px !important; box-shadow: none !important; border-color: var(--m2-line) !important; padding: 18px !important; }
  #diseases .disease-card h3 { color: var(--m2-ink) !important; font-size: 1.0625rem !important; }

  /* ── 8. Полоса «Как проходит лечение» ──────────────────────────── */
  html body section.px-6.py-10[style*="0B2D5C"] { background: var(--m2-tint) !important; padding: 24px 16px !important; }
  html body section.px-6.py-10[style*="0B2D5C"] h2 { color: var(--m2-ink) !important; font-size: 1.25rem !important; }
  section.px-6.py-10[style*="0B2D5C"] .flex { align-items: flex-start !important; gap: 14px !important; }
  section.px-6.py-10[style*="0B2D5C"] .flex-shrink-0 { width: 100%; }
  html body .cta-treatment-btn {
    display: flex !important; width: 100%; height: 50px; border-radius: var(--m2-r) !important;
    background: #fff !important; color: var(--m2-link) !important; border: 1.5px solid var(--m2-link);
    font-size: 1rem !important; padding: 0 16px !important;
  }
  .cta-treatment-play { background: var(--m2-tint) !important; color: var(--m2-link) !important; }

  /* ── 9. Стоимость ──────────────────────────────────────────────── */
  html body #pricing { background: var(--m2-bg) !important; padding: 30px 16px !important; }
  #pricing .max-w-4xl { padding: 0 !important; }
  html body #pricing .pr-card {
    background: #fff !important; border: 1px solid var(--m2-line) !important; border-radius: 14px !important;
    box-shadow: none !important; color: var(--m2-ink) !important; padding: 20px 16px 18px !important;
  }
  #pricing .pr-card::before { display: none !important; }
  html body #pricing .pr-eyebrow { color: var(--m2-muted) !important; font-size: 0.9375rem !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: 500 !important; }
  #pricing .pr-eyebrow::before { display: none !important; }
  html body #pricing .pr-price {
    font-size: 2.125rem !important; line-height: 1.1 !important; font-weight: 800 !important; letter-spacing: -0.02em !important; margin-top: 4px !important;
    background: none !important; -webkit-text-fill-color: var(--m2-ink) !important; color: var(--m2-ink) !important;
  }
  html body #pricing .pr-lead { color: var(--m2-muted) !important; font-size: 0.9375rem !important; margin-top: 8px !important; max-width: none !important; }
  html body #pricing .pr-steps { margin-top: 18px !important; }
  html body #pricing .pr-step { background: var(--m2-bg) !important; border: 1px solid var(--m2-line) !important; border-radius: 12px !important; padding: 16px 14px !important; }
  html body #pricing .pr-step--course { background: var(--m2-tint) !important; border-color: #C5D9F0 !important; }
  html body #pricing .pr-fig { fill: #C3D0E0 !important; }
  html body #pricing .pr-in .pr-fig { fill: var(--m2-primary) !important; }
  html body #pricing .pr-step h3 { color: var(--m2-ink) !important; font-size: 1.0625rem !important; margin-top: 10px !important; }
  html body #pricing .pr-step p { color: var(--m2-muted) !important; font-size: 0.9375rem !important; }
  html body #pricing .pr-step-price { color: var(--m2-ink) !important; font-size: 1.375rem !important; }
  html body #pricing .pr-foot { color: var(--m2-primary) !important; font-size: 0.875rem !important; }
  html body #pricing .pr-badge { background: #F3E6CC !important; color: #6A4F1C !important; }
  html body #pricing .pr-conn { min-height: 46px !important; }
  html body #pricing .pr-conn path { stroke: #B5C3D5 !important; }
  html body #pricing .pr-conn span { background: #fff !important; border-color: var(--m2-line) !important; color: var(--m2-muted) !important; }
  html body #pricing .pr-pay { color: var(--m2-muted) !important; font-size: 0.8125rem !important; }
  html body #pricing .pr-btn { height: 52px; padding: 0 16px !important; border-radius: var(--m2-r) !important; font-size: 1rem !important; font-weight: 600 !important; box-shadow: none !important; }
  html body #pricing .pr-btn--gold { background: var(--m2-primary) !important; color: #fff !important; }
  html body #pricing .pr-btn--ghost { background: #fff !important; color: var(--m2-link) !important; border: 1.5px solid var(--m2-link) !important; }

  /* ── 10. Отзывы, вопросы, контакты ─────────────────────────────── */
  #reviews .rv-badge { margin-left: 0 !important; border-radius: 10px !important; background: var(--m2-bg) !important; font-size: 0.9375rem !important; flex-wrap: wrap; row-gap: 2px !important; }
  #reviews .rv-card { border-radius: 12px !important; box-shadow: none !important; border-color: var(--m2-line) !important; padding: 16px !important; }
  #reviews .rv-name { color: var(--m2-ink) !important; }
  #reviews .rv-text { color: #2B3748 !important; }
  #reviews .rv-actions { flex-direction: column; gap: 10px !important; margin-top: 18px !important; }
  #reviews .rv-btn { width: 100%; height: 50px; padding: 0 16px !important; border-radius: var(--m2-r) !important; box-shadow: none !important; }
  #reviews .rv-btn--ghost { background: #fff !important; border: 1.5px solid var(--m2-line) !important; color: var(--m2-ink) !important; }

  html body #faq { background: var(--m2-bg) !important; }
  #faq .faq-item { border-radius: 12px !important; border-color: var(--m2-line) !important; box-shadow: none !important; }
  #faq .faq-item.open { border-color: #B9CFEA !important; box-shadow: none !important; }
  #faq .faq-btn { padding: 15px 14px !important; min-height: 54px; }
  #faq .faq-btn span { font-size: 1rem !important; line-height: 1.35; color: var(--m2-ink) !important; font-weight: 600; }
  #faq .faq-icon, #faq .faq-item.open .faq-icon { color: var(--m2-link) !important; }
  #faq .faq-answer p { padding: 0 14px 16px !important; font-size: 0.9375rem !important; color: #2B3748 !important; }
  #faq .text-center.mt-6 > button { border-radius: var(--m2-r) !important; background: #fff !important; border: 1.5px solid var(--m2-line); color: var(--m2-ink) !important; width: 100%; justify-content: center; height: 50px; }
  #faq .text-center.mt-6 .btn-primary { width: 100%; justify-content: center; height: 52px; padding: 0 16px !important; }

  #contact .max-w-6xl > div { gap: 16px !important; }
  #contact .btn-primary { display: flex !important; width: 100%; justify-content: center; height: 52px; padding: 0 16px !important; }
  #diseases p.text-center, #diseases .text-center:not(:first-of-type) { text-align: left !important; }

  /* ── 11. Подвал: фирменный тёмно-синий ─────────────────────────── */
  footer.quote-strip, footer.py-8.px-4 {
    padding-top: 2rem !important;
    padding-bottom: calc(2rem + 76px + env(safe-area-inset-bottom, 0px)) !important;
    position: relative;
  }
  footer.quote-strip::before, footer.py-8.px-4::before {
    content: ''; position: absolute; top: 0; left: 16px; width: 44px; height: 2px; border-radius: 2px; background: var(--m2-gold);
  }

  /* ── 12. Нижняя панель: WhatsApp + звонок + запись ─────────────── */
  #mobileStickyBar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 46;
    display: grid; grid-template-columns: 48px 48px 1fr; gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff; border-top: 1px solid var(--m2-line);
    box-shadow: 0 -6px 20px rgba(17,28,45,0.06);
    transition: transform 0.28s ease, opacity 0.2s;
  }
  #mobileStickyBar:has(.msb-tg) { grid-template-columns: 48px 48px 48px 1fr; }
  #mobileStickyBar a { display: flex; align-items: center; justify-content: center; text-decoration: none; -webkit-tap-highlight-color: transparent; }
  #mobileStickyBar .msb-icon { width: 48px; height: 48px; border-radius: var(--m2-r); background: #fff; border: 1px solid var(--m2-line); box-shadow: none; }
  #mobileStickyBar .msb-wa { color: #1FA855; }
  #mobileStickyBar .msb-phone { color: var(--m2-primary); }
  #mobileStickyBar .msb-tg { color: #229ED9; }
  #mobileStickyBar .msb-book {
    height: 48px; min-width: 0; border-radius: var(--m2-r); background: var(--m2-primary); color: #fff;
    font-weight: 600; font-size: clamp(0.875rem, 3.6vw, 1rem); gap: 6px; padding: 0 12px; white-space: nowrap; overflow: hidden; box-shadow: none;
  }
  #mobileStickyBar .msb-book span { overflow: hidden; text-overflow: ellipsis; }
  body.modal-open #mobileStickyBar,
  body.drawer-on #mobileStickyBar,
  #mobileStickyBar.msb-hidden,
  body:has(#sm-float.visible) #mobileStickyBar { transform: translateY(110%) !important; opacity: 0 !important; pointer-events: none !important; }
  #scrollTop { bottom: 84px !important; left: auto !important; right: 12px !important; width: 44px !important; height: 44px !important; border-width: 1px !important; border-color: var(--m2-line) !important; box-shadow: 0 4px 14px rgba(17,28,45,0.12) !important; }
  #floatWA, #mobileFAB-wa, #mobileFAB-phone, #mobileFAB-book { display: none !important; }

  /* ── 13. Меню (drawer) ─────────────────────────────────────────── */
  html body #mobileDrawer { background: #fff !important; }
  #mobileDrawer > div[aria-hidden="true"] { display: none !important; }
  #mobileDrawer > div:nth-of-type(2) { border-bottom: 1px solid var(--m2-line) !important; padding: 12px 12px 11px 16px !important; }
  #mobileDrawer #mmTitle > div:first-child { color: #0B2D5C !important; }
  #mobileDrawer #mmTitle > div:last-child { color: var(--m2-muted) !important; letter-spacing: 0.07em !important; }
  #mobileDrawer > div:nth-of-type(2) > button { border: 0 !important; background: transparent !important; color: var(--m2-ink) !important; }
  #mobileDrawer > nav { padding: 4px 16px 16px !important; }
  #mobileDrawer .mm-list .mm-item { border-bottom: 1px solid var(--m2-line) !important; }
  #mobileDrawer .mm-link {
    color: var(--m2-ink) !important; font-size: 1.125rem !important; font-weight: 600 !important; line-height: 1.3 !important; padding: 17px 0 !important;
  }
  #mobileDrawer .mm-link:active { color: var(--m2-link) !important; transform: none !important; }
  #mobileDrawer .mm-arrow { opacity: 0.55 !important; color: var(--m2-ink); }
  #mobileDrawer .wl-mm-hint { color: var(--m2-link) !important; }
  #mobileDrawer .wl-mm-group + .wl-mm-group { border-top: 1px solid var(--m2-line) !important; }
  #mobileDrawer .wl-mm-eyebrow { color: var(--m2-muted) !important; letter-spacing: 0.08em !important; font-size: 0.75rem !important; padding: 12px 0 4px !important; }
  #mobileDrawer .wl-mm-eyebrow::before { display: none !important; }
  #mobileDrawer .wl-mm-link { color: var(--m2-ink) !important; padding: 6px 0 !important; }
  #mobileDrawer .wl-mm-link:active { background: var(--m2-bg) !important; transform: none !important; }
  #mobileDrawer .wl-mm-ico { background: var(--m2-tint) !important; border: 0 !important; color: var(--m2-primary) !important; border-radius: 9px !important; }
  #mobileDrawer .wl-mm-t { color: var(--m2-ink) !important; font-size: 1rem !important; }
  #mobileDrawer .wl-mm-link.is-current .wl-mm-t { color: var(--m2-link) !important; font-weight: 600; }
  #mobileDrawer .wl-mm-link.is-current .wl-mm-ico { background: var(--m2-primary) !important; color: #fff !important; }
  #mobileDrawer .wl-mm-sym { background: var(--m2-tint) !important; border: 0 !important; color: var(--m2-muted) !important; border-radius: 10px !important; }
  #mobileDrawer .wl-mm-sym strong { color: var(--m2-link) !important; }
  #mobileDrawer .wl-lang { background: var(--m2-bg) !important; color: var(--m2-muted) !important; }
  #mobileDrawer > div:last-child {
    background: #fff !important; border-top: 1px solid var(--m2-line) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important; grid-template-columns: 1fr 1fr 1.3fr !important;
  }
  #mobileDrawer .mm-cta { border-radius: var(--m2-r) !important; min-height: 48px !important; font-size: 0.875rem !important; box-shadow: none !important; padding: 0 6px !important; }
  #mobileDrawer .mm-cta-outline { background: #fff !important; border: 1px solid var(--m2-line) !important; color: var(--m2-primary) !important; }
  #mobileDrawer .mm-cta-wa { background: #fff !important; border: 1px solid var(--m2-line) !important; color: #1A8F48 !important; }
  #mobileDrawer .mm-cta-primary { background: var(--m2-primary) !important; color: #fff !important; }

  /* ── 14. Форма записи: на весь экран, шаги ─────────────────────── */
  html body #bookingModal { padding: 0 !important; align-items: stretch !important; }
  #bookingModal > .absolute { display: none !important; }
  html body #bookingModal > .relative {
    max-width: none !important; width: 100% !important; max-height: none !important; height: 100% !important;
    border-radius: 0 !important; box-shadow: none !important;
  }
  html body #modalHeader {
    height: 56px; padding: 0 6px !important; border-radius: 0 !important; border-bottom: 1px solid var(--m2-line) !important;
    gap: 2px; flex-shrink: 0;
  }
  #modalHeader .bk-hdr-back, #modalHeader > button:last-child {
    width: 44px !important; height: 44px !important; border: 0; background: transparent !important; color: var(--m2-ink) !important;
    align-items: center; justify-content: center; border-radius: 10px !important; flex: none; padding: 0;
  }
  #modalHeader > div { flex: 1; min-width: 0; padding-left: 4px; }
  html body #modalHeader .section-eyebrow {
    display: block !important; font-size: 1.0625rem !important; font-weight: 600 !important; letter-spacing: 0 !important;
    text-transform: none !important; color: var(--m2-ink) !important; margin: 0 !important; line-height: 1.2 !important;
  }
  #modalHeader .section-eyebrow::before { display: none !important; }
  #modalHeader h2 { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #bookingModal > .relative > div:last-child { padding: 18px 16px calc(20px + env(safe-area-inset-bottom, 0px)) !important; }

  #bookingModal .bk-steps { display: block !important; margin: 0 0 2px !important; }
  #bookingModal .bk-dot, #bookingModal .bk-step-sep { display: none !important; }
  #bookingModal .bk-step-n { display: block; font-size: 0.875rem; font-weight: 500; color: var(--m2-muted); }
  #bookingModal .bk-step-q { display: block; font-size: 1.625rem; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; color: var(--m2-ink); margin-top: 8px; }
  #bookingModal label.block { font-size: 1.0625rem !important; font-weight: 700 !important; color: var(--m2-ink) !important; margin-bottom: 10px !important; }
  #bookingModal #bkStep2 label.block { font-size: 1rem !important; font-weight: 500 !important; margin-bottom: 8px !important; }

  #bookingModal .gender-btn input + .gender-label {
    border-radius: 8px !important; padding: 0 6px !important; height: 50px; background: #fff !important; border: 1.5px solid #C6CFDB !important;
    font-size: 0.9375rem !important; font-weight: 500 !important; color: var(--m2-ink) !important;
  }
  #bookingModal .gender-btn input:checked + .gender-label { border: 2px solid var(--m2-link) !important; background: var(--m2-tint) !important; color: var(--m2-link) !important; font-weight: 600 !important; }
  #bookingModal #bkStep1 > div:first-child > div { gap: 8px !important; }

  #bookingModal .bk-quick { grid-template-columns: 1fr !important; gap: 8px !important; margin-bottom: 8px !important; }
  #bookingModal .bk-chip {
    display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 14px !important; text-align: left !important;
    border: 1.5px solid #C6CFDB !important; border-radius: 8px !important; background: #fff !important;
    font-size: 1rem !important; font-weight: 400 !important; color: var(--m2-ink) !important;
  }
  #bookingModal .bk-chip::before {
    content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #8C99AB; background: #fff; box-sizing: border-box;
  }
  #bookingModal .bk-chip.is-on { border: 2px solid var(--m2-link) !important; background: var(--m2-tint) !important; padding: 0 13.5px !important; }
  #bookingModal .bk-chip.is-on::before { border: 2px solid var(--m2-link); background: radial-gradient(circle, var(--m2-link) 0 42%, #fff 46%); }
  #bookingModal .bk-chip-d, #bookingModal .bk-chip small { display: none !important; }
  #bookingModal .bk-chip-m { flex: 1; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
  #bookingModal .bk-chip-time { font-weight: 600; font-variant-numeric: tabular-nums; }
  #bookingModal .bk-chip--alt {
    justify-content: center; height: 50px; border-color: var(--m2-link) !important; color: var(--m2-link) !important; font-weight: 600 !important;
  }
  #bookingModal .bk-chip--alt::before { display: none; }
  #bookingModal #customCalendar, #bookingModal #timeRow { border-radius: 10px !important; background: #fff !important; border-color: #C6CFDB !important; }
  #bookingModal #timeRow > div { display: block !important; padding: 12px !important; }
  #bookingModal #timeRow > div > svg, #bookingModal #timeRow > div > span { display: none !important; }
  #bookingModal #timeSlots { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 8px !important; }
  #bookingModal #timeSlots button { padding: 11px 0 !important; font-size: 0.9375rem !important; text-align: center; }
  #bookingModal #timeSlots .no-slots-hint { grid-column: 1 / -1; font-size: 0.9375rem !important; }

  html body #book-today-note { background: var(--m2-bg) !important; border: 0 !important; border-radius: 8px !important; padding: 12px 14px !important; margin-top: 12px !important; }
  #book-today-note > svg { display: none !important; }
  #book-today-note > div { font-size: 0.9375rem !important; color: var(--m2-muted) !important; }
  #book-today-note strong { color: var(--m2-muted) !important; font-weight: 400 !important; display: block; }
  #book-today-note a { color: var(--m2-link) !important; font-weight: 500 !important; text-decoration: underline; font-size: 1rem; }
  html body #book-vacation-note { border-radius: 8px !important; background: var(--m2-tint) !important; border: 0 !important; padding: 12px 14px !important; }
  #book-vacation-note > div { font-size: 0.9375rem !important; }

  #bookingModal .bk-price {
    align-items: baseline; justify-content: space-between; gap: 12px; border-top: 1px solid var(--m2-line);
    padding-top: 16px; margin-top: 18px !important; font-size: 1.0625rem; font-weight: 600; color: var(--m2-ink);
  }
  #bookingModal .bk-price-v { font-weight: 700; white-space: nowrap; }
  #bookingModal [data-vt][hidden] { display: none !important; }
  #bookingModal #bkNext, #bookingModal #submit-btn { height: 54px; padding: 0 16px !important; font-size: 1.0625rem !important; margin-top: 12px !important; }
  #bookingModal .bk-sticky { position: static !important; background: none !important; padding: 0 !important; margin-top: 0 !important; }

  #bookingModal .bk-summary { background: var(--m2-tint) !important; border: 0 !important; border-radius: 8px !important; padding: 14px !important; font-size: 1rem !important; font-weight: 400 !important; color: var(--m2-ink) !important; }
  #bookingModal .bk-sum-ico { display: none; }
  #bookingModal .bk-sum-dt { font-weight: 700; }
  #bookingModal .bk-summary button { color: var(--m2-link) !important; font-size: 0.9375rem !important; font-weight: 500 !important; min-height: 32px; }
  #bookingModal .form-field { border-radius: 8px !important; background: #fff !important; border: 1.5px solid #C6CFDB !important; padding: 14px !important; color: var(--m2-ink) !important; }
  #bookingModal .form-field:focus { border-color: var(--m2-link) !important; box-shadow: 0 0 0 3px rgba(29,101,181,0.14) !important; }

  #bookingModal .bk-more { border-top: 1px solid var(--m2-line); border-bottom: 1px solid var(--m2-line); padding: 6px 0; }
  #bookingModal .bk-more summary { padding: 8px 0 !important; color: var(--m2-ink) !important; font-size: 1rem !important; font-weight: 500 !important; justify-content: space-between; align-items: flex-start !important; min-height: 48px; }
  #bookingModal .bk-more summary::after { content: "+" !important; font-size: 1.6rem !important; font-weight: 300; line-height: 1; transform: none !important; color: var(--m2-ink); }
  #bookingModal .bk-more[open] summary::after { content: "−" !important; }
  #bookingModal .bk-more-m small { display: block; font-size: 0.8125rem; font-weight: 400; color: var(--m2-muted); margin-top: 3px; }
  #bookingModal #consent { width: 22px !important; height: 22px !important; margin-top: 1px !important; accent-color: var(--m2-link) !important; }
  #bookingModal #consent + span { font-size: 0.9375rem; color: var(--m2-ink); line-height: 1.45; }
  #bookingModal #consent + span strong { color: var(--m2-ink) !important; font-weight: 400 !important; }
  #bookingModal #consent + span a { color: var(--m2-link) !important; }
  #bookingModal #bkStep2 > label { gap: 12px !important; }
  #bookingModal .bk-secure { display: none !important; }
  #bookingModal .bk-confirm { text-align: center; font-size: 0.8125rem; color: var(--m2-muted); margin: 10px 0 0; }
  #bookingModal form + .mt-4 { margin-top: 18px !important; padding-top: 6px; border-top: 1px solid var(--m2-line); }
  #bookingModal form + .mt-4 a { color: var(--m2-link) !important; font-size: 1rem !important; font-weight: 500; min-height: 50px; gap: 9px !important; }
  #bookingModal form + .mt-4 a svg { fill: var(--m2-link) !important; width: 22px !important; height: 22px !important; }

  /* ── 16. Внутренние страницы ───────────────────────────────────── */
  /* Кнопка «Позвонить» из десктопной шапки на телефоне вылезала за экран и прятала бургер */
  html body #navbar a.btn-primary.btn-call-pulse { display: none !important; }

  html body section.hero-bg:not(#hero) {
    background: #fff !important; color: var(--m2-ink); padding: calc(var(--m2-nav-h) + 16px) 16px 22px !important;
  }
  section.hero-bg:not(#hero) .section-eyebrow { display: none !important; }
  html body section.hero-bg:not(#hero) a.text-sm { font-size: 0.875rem !important; color: var(--m2-link) !important; }
  html body section.hero-bg:not(#hero) h1 {
    font-size: 1.625rem !important; line-height: 1.18 !important; font-weight: 800 !important; letter-spacing: -0.02em !important;
    color: var(--m2-ink) !important; margin: 8px 0 12px !important;
  }
  html body section.hero-bg:not(#hero) p { font-size: 1rem !important; line-height: 1.55 !important; color: var(--m2-muted) !important; margin-bottom: 18px !important; }
  section.hero-bg:not(#hero) p a { color: var(--m2-link) !important; }
  section.hero-bg:not(#hero) .flex.flex-wrap.gap-4 { flex-direction: column; gap: 10px !important; }
  html body section.hero-bg:not(#hero) .flex.flex-wrap.gap-4 > a {
    width: 100%; justify-content: center; min-height: 52px; padding: 0 16px !important; border-radius: var(--m2-r) !important; font-size: 1rem !important; box-shadow: none !important;
  }
  html body section.hero-bg:not(#hero) a[style*="border-color:var(--navy)"],
  html body section.hero-bg:not(#hero) .border-2.border-navy { border: 1.5px solid var(--m2-link) !important; color: var(--m2-link) !important; background: #fff !important; }

  /* «О докторе»: светлый первый экран, фото между именем и описанием */
  html body .ab-hero { background: #fff !important; color: var(--m2-ink) !important; padding: calc(var(--m2-nav-h) + 16px) 0 20px !important; }
  .ab-hero::before, .ab-hero::after, .ab-hero-photo::before, .ab-photo::before, .ab-photo-badge, .ab-hero .ab-eyebrow { display: none !important; }
  html body .ab-hero-grid { display: flex !important; flex-direction: column; gap: 0 !important; }
  html body .ab-hero-grid { align-items: stretch !important; }
  html body .ab-hero .ab-hero-text > * { text-align: left !important; }
  html body .ab-hero .ab-crumbs, html body .ab-hero .ab-chips, html body .ab-hero .ab-cta { justify-content: flex-start !important; }
  html body .ab-hero .ab-lead { margin-left: 0 !important; margin-right: 0 !important; }
  html body .ab-wrap { padding: 0 16px !important; }
  html body .ab-hero-text { display: contents !important; }
  .ab-hero .ab-crumbs { order: 1; color: var(--m2-muted) !important; margin-bottom: 8px !important; }
  .ab-hero .ab-crumbs a { color: var(--m2-link) !important; }
  html body .ab-hero .ab-h1 { order: 2; font-size: 1.625rem !important; line-height: 1.18 !important; font-weight: 800 !important; letter-spacing: -0.02em !important; color: var(--m2-ink) !important; margin: 0 0 4px !important; }
  .ab-hero .ab-h1 em { font-style: normal !important; font-weight: inherit !important; background: none !important; color: inherit !important; -webkit-text-fill-color: currentColor !important; }
  html body .ab-hero .ab-role { order: 3; text-transform: none !important; letter-spacing: 0 !important; color: var(--m2-muted) !important; font-size: 1rem !important; font-weight: 400 !important; margin: 0 0 14px !important; }
  html body .ab-hero-photo { order: 4; width: 100% !important; margin: 0 0 14px !important; }
  html body .ab-photo { aspect-ratio: 3 / 4 !important; border-radius: 12px !important; box-shadow: none !important; }
  html body .ab-photo img { object-position: 50% 45% !important; }
  html body .ab-hero .ab-lead { order: 5; font-size: 1rem !important; color: var(--m2-muted) !important; margin: 0 0 16px !important; }
  html body .ab-hero .ab-stats { order: 6; display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 8px !important; margin: 0 0 14px !important; }
  html body .ab-hero .ab-stat { background: var(--m2-bg); border-radius: 10px; padding: 12px 8px !important; text-align: center; }
  html body .ab-hero .ab-stat b { font-size: 1.375rem !important; background: none !important; color: var(--m2-ink) !important; -webkit-text-fill-color: var(--m2-ink) !important; }
  html body .ab-hero .ab-stat span { color: var(--m2-muted) !important; font-size: 0.75rem !important; }
  html body .ab-hero .ab-chips { order: 7; margin: 0 0 8px !important; }
  html body .ab-hero .ab-chip { background: #fff !important; border: 1px solid var(--m2-line) !important; color: var(--m2-ink) !important; border-radius: 8px !important; font-size: 0.8125rem !important; }
  html body .ab-hero .ab-cta { order: 8; }
  html body .ab-hero .ab-rating { color: var(--m2-link) !important; font-size: 0.9375rem !important; padding: 8px 0 !important; }
  .ab-hero .ab-star { color: var(--m2-gold) !important; }
  /* «О докторе»: остальные секции — без тёмных полос и золотых кнопок */
  html body .ab-sec--navy { background: var(--m2-bg) !important; color: var(--m2-ink) !important; }
  .ab-sec--navy::before, .ab-sec--navy::after { display: none !important; }
  html body .ab-sec--navy .ab-eyebrow, html body .ab-eyebrow--gold { color: var(--m2-muted) !important; }
  html body .ab-sec--navy h2, html body .ab-sec--navy .ab-h2 { color: var(--m2-ink) !important; }
  html body .ab-trust { background: #fff !important; border: 1px solid var(--m2-line) !important; border-radius: 12px !important; padding: 16px !important; }
  html body .ab-trust-ico { background: var(--m2-tint) !important; border: 0 !important; color: var(--m2-primary) !important; }
  html body .ab-trust h3, html body .ab-trust b { color: var(--m2-ink) !important; }
  html body .ab-trust p { color: var(--m2-muted) !important; }
  html body .ab-final-p { color: var(--m2-muted) !important; }
  html body .ab-btn { border-radius: var(--m2-r) !important; box-shadow: none !important; min-height: 52px; }
  html body .ab-btn--gold { background: var(--m2-primary) !important; color: #fff !important; }
  html body .ab-btn--white { background: #fff !important; color: var(--m2-link) !important; border: 1.5px solid var(--m2-link) !important; }
  html body .ab-btn--ghost { background: #fff !important; color: var(--m2-ink) !important; border: 1.5px solid var(--m2-line) !important; }
  html body .ab-doc-year { background: var(--m2-tint) !important; color: var(--m2-primary) !important; }
  html body .ab-qmark { color: var(--m2-line) !important; }
  html body .ab-eyebrow::before, html body .ab-orn, html body .ab-orn--gold { display: none !important; }
  html body .ab-exp-ico { background: var(--m2-tint) !important; color: var(--m2-primary) !important; box-shadow: none !important; border-radius: 12px !important; }

  /* ── 15. Плашка cookie: компактная, не закрывает кнопку записи ── */
  html body .ck-notice {
    left: 8px !important; right: 8px !important; bottom: 8px !important; padding: 10px 12px !important; gap: 8px 10px !important;
    border-radius: 12px !important; box-shadow: 0 8px 28px rgba(17,28,45,0.18) !important; border-color: var(--m2-line) !important;
    flex-wrap: nowrap !important; align-items: center !important;
  }
  html body .ck-notice .ck-ic, html body .ck-notice .ck-title { display: none !important; }
  html body .ck-notice .ck-body { flex: 1 1 auto !important; min-width: 0; }
  html body .ck-notice .ck-text { font-size: 0.75rem !important; line-height: 1.35 !important; color: var(--m2-muted) !important; }
  html body .ck-notice .ck-actions { flex-direction: column !important; width: auto !important; order: 0 !important; gap: 2px !important; flex: none !important; align-items: stretch !important; }
  html body .ck-notice .ck-btn { flex: none !important; background: var(--m2-primary) !important; box-shadow: none !important; border-radius: 8px !important; padding: 9px 14px !important; font-size: 0.8125rem !important; }
  html body .ck-notice .ck-decline { padding: 6px 4px !important; font-size: 0.75rem !important; }
}

/* ── Карусели (как раньше): направления на главной, шаги лечения на «Как мы лечим» ── */
@media (max-width: 639px) {
  #diseases > .max-w-6xl > .grid {
    display: flex !important; flex-wrap: nowrap; overflow-x: auto; overflow-y: visible;
    -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: none;
    padding: 4px 16px 14px; margin: 0 -16px; scroll-padding-left: 16px;
  }
  #diseases > .max-w-6xl > .grid::-webkit-scrollbar { display: none; }
  #diseases .disease-card { flex: 0 0 78vw; scroll-snap-align: start; box-sizing: border-box; }
  .diseases-dots, .treatment-dots { display: flex; justify-content: center; gap: 7px; margin-top: 10px; }
  .diseases-dots > i, .treatment-dots > i { display: block; width: 6px; height: 6px; border-radius: 50%; background: rgba(17,28,45,0.2); transition: width 0.25s ease, background 0.25s ease; }
  .diseases-dots > i.is-active, .treatment-dots > i.is-active { width: 18px; border-radius: 3px; background: #1B4B82; }
  .treatment-steps {
    display: flex !important; flex-wrap: nowrap; overflow-x: auto; overflow-y: visible;
    -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: none;
    gap: 12px; padding: 6px 16px 16px; margin: 0 -16px; scroll-padding-left: 16px;
  }
  .treatment-steps::-webkit-scrollbar { display: none; }
  .treatment-steps > div { flex: 0 0 44vw; scroll-snap-align: start; box-sizing: border-box; }
}