/* ═══════════════════════════════════════════════
   МОБИЛЬНАЯ ВЁРСТКА
   ═══════════════════════════════════════════════

   Всё, что относится к узкому экрану, живёт здесь и только здесь.
   Правка в site.css не задевает телефон, правка тут не задевает
   широкий экран — за этим и разделили: 06.09.2026 правки то и дело
   ломали соседнюю версию, потому что двадцать два медиа-блока были
   рассыпаны по двум с половиной тысячам строк.

   Файл подключается ПОСЛЕ site.css: при равной силе побеждает то,
   что ниже, поэтому переопределения здесь работают без !important.

   Печать и prefers-reduced-motion остались в site.css: это не
   мобильная версия, а другие условия показа.
*/

/* ═══════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr; }
  .hero-image { height: 50vh; }
  .hero-content { padding: 48px 40px; }

  .product { grid-template-columns: 1fr; }
  .product-image-zone { height: 50vh; }
  .product-info { padding: 48px 40px; }

  .process { padding: 80px 40px; }
  .process-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .lookbook-header { padding: 0 40px; }
  .lookbook-track { padding: 0 40px 40px; }
}

@media (max-width: 768px) {
  .pill-nav { display: none; }
  .hamburger { display: flex; }
  .est-label { display: none; }

  .canvas-section {
    position: relative;
    top: auto;
  }


  .hero-image { height: 45vh; min-height: 280px; }
  .hero-content { padding: 36px 24px 48px; }

  .lookbook { padding: 48px 0; }
  .lookbook-header { padding: 0 24px; margin-bottom: 28px; }
  .lookbook-track { padding: 0 24px 36px; gap: 16px; }
  .lookbook-card img { height: 45vh; min-height: 260px; border-radius: 24px; border-width: 6px; }
  .lookbook-footer { padding: 0 24px; }

  .product-image-zone { height: 50vh; cursor: auto; }
  .buy-circle { display: none; }
  .product-info { padding: 36px 24px 48px; }

  .process { padding: 60px 24px; }
  .timeline { padding-left: 28px; }
  .timeline::before { left: 0; }
  .timeline-item::before { left: -32px; }

  .video-content { padding: 24px; }

  .signature-content { padding: 24px; }
  .signature-bg-logo { font-size: 80px; }

  .mobile-nav {
    padding: 80px 32px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 768px) {
  .action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1px;
    background: var(--oat-deep);
    border-top: 1px solid var(--oat-deep);
  }

  .action-bar a {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--oat);
    color: var(--ink);
    font-size: 15px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
  }

  .action-bar a.primary {
    background: var(--ink);
    color: var(--oat);
  }

  /* Панель перекрывает низ страницы — освобождаем место */
  body {
    padding-bottom: 56px;
  }
}

@media (max-width: 768px) {
  /* Не перекрывать липкую панель записи */
  .cookie-banner {
    bottom: 72px;
  }
}

/* На узком экране в правом верхнем углу уже висит кнопка меню:
   кнопка «Для слабовидящих» налезала на неё, и нажатие попадало
   не туда. Уводим её влево и отдаём правый угол меню. */
@media (max-width: 768px) {
  .a11y-toggle {
    right: auto;
    left: 16px;
  }

  .a11y-panel {
    right: auto;
    left: 16px;
  }
}

/* Юридически значимый текст должен читаться с телефона: предупреждение
   о противопоказаниях обязательно по ФЗ-38 ст. 24, а единица измерения
   рядом с ценой отличает «290 ₽ за единицу» от «290 ₽ за процедуру».
   Правило в самом конце файла: выше оно молча перебивалось базовыми
   размерами той же специфичности. */
@media (max-width: 768px) {
  .legal-warning,
  .price-note,
  .price-unit,
  .consent,
  .consent-details {
    font-size: 15px;
  }

  .required-mark {
    font-size: 13px;
  }
}

@media (max-width: 768px) {
  .wizard .step {
    min-height: 240px;
  }

  .wizard-nav {
    gap: 20px;
  }

  .track-option,
  .delivery-option {
    padding: 18px 20px;
  }
}

@media (max-width: 768px) {
  .wizard [id^="id_q_"] label {
    padding: 16px 18px;
  }

  /* Кнопка «Для слабовидящих» закреплена в левом верхнем углу и
     накрывала заголовок шага. Отводим ей место сверху — и при первом
     показе, и при перелистывании шагов */
  .advisor-page .process-inner {
    padding-top: 56px;
  }

  .advisor-page .wizard {
    scroll-margin-top: 76px;
  }
}

/* На анкете главное действие — продолжить. Кнопка шага уезжала за нижний
   край, и человек не понимал, что делать после выбора. Закрепляем её внизу
   экрана, а общую панель «Услуги / Позвонить» убираем: две липкие полосы
   спорят друг с другом, и обе теряются. */
@media (max-width: 768px) {
  .advisor-page ~ .action-bar,
  body:has(.advisor-page) .action-bar {
    display: none;
  }

  body:has(.advisor-page) {
    padding-bottom: 0;
  }

  /* Закреплено у нижнего края, а не «прилипает при прокрутке»: кнопка
     должна быть видна сразу, иначе после выбора непонятно, что дальше */
  .advisor-page .wizard-nav,
  .advisor-page .wizard-submit {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    margin: 0;
    padding: 12px 24px calc(12px + env(safe-area-inset-bottom));
    background: var(--ink);
    border-top: 1px solid rgba(252, 250, 248, 0.12);
  }

  .advisor-page .wizard-submit {
    width: 100%;
    justify-content: center;
  }

  .advisor-page #wizardNext {
    margin-left: auto;
  }

  /* Место под закреплённую кнопку, чтобы она не закрывала последний блок */
  .advisor-page .wizard {
    padding-bottom: 128px;
  }
}

/* На узком экране обе кнопки во всю ширину: так они одинаковые
   и попасть пальцем проще */
@media (max-width: 600px) {
  .result-reveal > summary,
  .result-actions .cta-link {
    min-width: 0;
    width: 100%;
  }
}

/* Кнопка «Для слабовидящих» висит поверх страницы и накрывала первую
   строку — крошки уезжали под неё и читались наполовину. Правило стоит
   в конце файла намеренно: базовые стили крошек добавлены сюда же,
   и при равной силе побеждает то, что ниже */
@media (max-width: 768px) {
  .crumbs {
    padding-top: 72px;
  }
}

/* Зона нажатия у крошек на телефоне. Ссылка «Главная» — это 23 px
   по высоте: пальцем в неё не попасть, а это единственный путь
   на уровень выше */
@media (max-width: 768px) {
  .crumbs a,
  .crumbs [aria-current="page"] {
    display: inline-block;
    padding: 11px 0;
  }

  .crumbs ol {
    align-items: center;
  }
}

/* На телефоне три колонки не помещаются: цена налезает на кнопку */
@media (max-width: 700px) {
  .price-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

@media (max-width: 768px) {
  .service-tile-name a {
    padding: 9px 0;
  }
}

@media (max-width: 768px) {
  .service-tile {
    width: 78vw;
    height: auto;
    min-height: 300px;
    padding: 24px;
  }

  .lookbook-lead {
    padding: 0 24px;
  }
}

@media (max-width: 768px) {
  .a11y-toggle {
    width: 44px;
    padding: 0;
    justify-content: center;
  }

  .a11y-icon {
    display: block;
  }

  .a11y-word {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .mobile-brand {
    display: flex;
  }

  /* Крошкам больше не нужно обходить широкую кнопку */
  .crumbs {
    padding-top: 76px;
  }
}

@media (max-width: 768px) {
  .lookbook-header {
    gap: 16px;
  }
}

/* ═══════ КАТАЛОГ И ЗАПИСЬ НА УЗКОМ ЭКРАНЕ ═══════ */
@media (max-width: 768px) {
  .catalog-inner {
    padding: 0 24px;
  }

  /* Две колонки на 375 px превращаются в кашу: цена наезжает
     на описание */
  .usluga {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .catalog-summary {
    padding: 18px 0;
  }

  /* Заголовок раздела и счётчик не должны стоять в одну строку:
     длинное название вытесняет счётчик за край */
  .catalog-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .zapis-page .process-inner {
    gap: 32px;
  }
}

/* Карточка врача на телефоне: фотография сверху, текст под ней —
   в две колонки на 375 px не помещается ни то, ни другое */
@media (max-width: 768px) {
  .vrach-card--foto {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .vrach-photo img {
    max-width: 260px;
  }
}

/* Название варианта и цена в одну строку на 375 px не помещаются:
   «Микроигольчатый RF, шея и брыли» отжимает цену за край */
@media (max-width: 768px) {
  .cena {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 7px 0;
  }

  .cena dd {
    text-align: left;
  }
}

/* ═══════ СТРАНИЦА ВРАЧА НА ТЕЛЕФОНЕ ═══════
   Две колонки на 375 px не помещаются: портрет и текст встают
   друг под друга. Портрету отводим пропорцию 4:5 — он остаётся
   портретом, но не занимает три экрана */
@media (max-width: 900px) {
  .vrach-top {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 40px;
  }

  .vrach-tekst {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

@media (max-width: 768px) {
  .vrach {
    padding: 24px 0 60px;
  }

  .vrach-inner {
    padding: 0 24px;
  }

  .vrach-portret img {
    max-height: 46vh;
    border-width: 6px;
    border-radius: 24px;
  }

  .vrach-rasskaz p {
    font-size: 15px;
    line-height: 1.8;
  }
}

/* ═══════ ПОДВАЛ НА ТЕЛЕФОНЕ ═══════ */
@media (max-width: 768px) {
  .signature {
    padding: 44px 20px 0;
  }

  /* На узком экране фоновое слово приходится ровно на телефон
     и мешает его прочесть */
  .signature-bg-logo {
    font-size: 72px;
    color: rgba(26, 23, 20, 0.02);
  }

  .signature-content {
    padding: 0;
  }

  /* Каждая ссылка отдельной строкой: в ряд они переносятся
     по одному слову и читаются как обрывки */
  .podval-ssylki {
    flex-direction: column;
    gap: 2px;
  }

  .podval-ssylki a {
    padding: 9px 0;
  }

  .podval-niz {
    margin-top: 28px;
  }
}

/* ═══════ ДОКУМЕНТЫ И СТАТЬИ НА ТЕЛЕФОНЕ ═══════ */
@media (max-width: 768px) {
  .dokument {
    padding: 36px 20px 64px;
  }

  .dokument-tekst h2,
  .dokument-inner > h2 {
    font-size: 22px;
  }
}