/* =================================================================
   Lavanda — мобильная вёрстка публичных страниц (PR-2.9.1).

   ОБЛАСТЬ ДЕЙСТВИЯ:
     — только публичные страницы (главная, /masters, /services, /about,
       /contacts, страницы мастеров).
     — НЕ затрагивает /cabinet/*, /cabinet/profile-wizard/*, /admin-login.

   Подключается через functions.php для всех страниц, кроме кабинета и
   визарда (там dequeue lavanda-style → этот файл тоже не подгружается).

   Структура:
     §0 reset + safe-area + overflow-x fix
     §1 header mobile + drawer-меню
     §2 footer mobile (stack vertical)
     §3 typographic scale на мобильном
     §4 hero (vertical stack)
     §5 sections + sliders helpers (.lav-slider)
     §6 cards-grid → 1 column
     §7 CTA-block → full-width
   ================================================================= */

/* =================================================================
   §0 базовые правила
   Только overflow-x на body — безопасно на всех ширинах. Остальные
   глобальные правила (max-width на секции, img) убраны: они ломали
   десктопную сетку — `.container { max-width: 1240px }` перебивался
   на 100%.
   ================================================================= */

html, body {
    overflow-x: hidden;
}

/* =================================================================
   §1 HEADER mobile + drawer
   ================================================================= */

/* Burger drawer — markup появляется через site-header.twig + JS.
   Видимый только когда .nav-drawer.is-open. */
.nav-drawer {
    position: fixed;
    inset: 0;
    z-index: 200;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity 240ms ease, visibility 240ms;
}
.nav-drawer.is-open {
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
}

.nav-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(42, 36, 41, 0.4);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.nav-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(440px, 100%);
    background: #FBF8F5;
    box-shadow: -16px 0 48px rgba(42, 36, 41, 0.12);
    transform: translateX(100%);
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
    padding-top: max(0px, env(safe-area-inset-top));
}
.nav-drawer.is-open .nav-drawer__panel {
    transform: translateX(0);
}

.nav-drawer__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #E8E0D7;
}
.nav-drawer__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #2A2429;
    font: 500 18px/1 var(--font-display);
}
.nav-drawer__brand img { width: 28px; height: 28px; }
.nav-drawer__close {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #4A4348;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.nav-drawer__close:hover { background: #F1E8F3; }

/* Audience-toggle внутри drawer — критично для мобильного: на десктопе
   переключатель «Гостям/Мастерам» в шапке, на моб он скрыт. Без этого
   блока пользователь не сможет перейти в режим «Мастер» (секция аренды).

   Цвет активной кнопки зависит от текущей аудитории — это согласовано с
   аудиторными токенами всего сайта:
     - client → лавандовый (Лаванда 700)
     - master → графит (#2A2429) */
.nav-drawer__audience {
    margin: 12px 20px 4px;
    padding: 4px;
    background: #F1E8F3;
    border-radius: 999px;
    display: inline-flex;
    gap: 0;
    align-self: stretch;
    transition: background 0.3s ease;
}
[data-audience="master"] .nav-drawer__audience {
    background: #E5DFE2;
}
.nav-drawer__audience button {
    flex: 1 1 0;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: #4A4348;
    font: 500 14px/1 var(--font-sans, system-ui);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
/* Активная кнопка в client-режиме — лавандовая. */
[data-audience="client"] .nav-drawer__audience button[aria-pressed="true"] {
    background: #6B4F7A;
    color: #fff;
}
/* Активная кнопка в master-режиме — графит. */
[data-audience="master"] .nav-drawer__audience button[aria-pressed="true"] {
    background: #2A2429;
    color: #fff;
}

.nav-drawer__menu {
    flex: 1 0 auto;
    padding: 20px 12px;
    display: flex;
    flex-direction: column;
}
.nav-drawer__menu a {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    font: 500 22px/1.1 var(--font-sans);
    color: #2A2429;
    text-decoration: none;
    border-radius: 16px;
    transition: background 0.15s ease, color 0.15s ease;
}
.nav-drawer__menu a:hover,
.nav-drawer__menu a:active,
.nav-drawer__menu a.is-active {
    background: #F1E8F3;
    color: #6B4F7A;
}
.nav-drawer__menu a + a { margin-top: 4px; }

.nav-drawer__cta {
    padding: 20px 16px 8px;
    border-top: 1px solid #E8E0D7;
    margin-top: 8px;
}
.nav-drawer__cta .btn {
    width: 100%;
    height: 56px;
    justify-content: center;
    border-radius: 16px;
    font-size: 15px;
    background: #6B4F7A;
    color: #fff;
}

.nav-drawer__contacts {
    padding: 16px 20px 24px;
    color: #6B5D55;
    font: 400 14px/1.5 var(--font-sans);
}
.nav-drawer__contacts a { color: #6B4F7A; text-decoration: none; }

/* Body lock когда drawer открыт — отключает прокрутку фона. */
body.nav-drawer-open {
    overflow: hidden;
    touch-action: none;
}

/* =================================================================
   §2 МОБИЛЬНЫЕ ПРАВИЛА (≤ 768px)
   ================================================================= */
@media (max-width: 768px) {
    /* Картинки и видео не вылетают за viewport. На десктопе у них
       могут быть фиксированные размеры, поэтому ставим только в моб. */
    img, video, iframe {
        max-width: 100%;
        height: auto;
    }

    /* Секции/контейнеры не выходят за viewport (только на мобиле). */
    section, .section, .container, .footer-inner, .header-inner,
    .lav-music, .hero, .ritual, .reviews, .cta {
        max-width: 100%;
    }

    /* Safe-area + базовый padding контейнеров. */
    .container,
    .footer-inner,
    .header-inner,
    section > .container,
    .hero-stack,
    .section {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }

    /* HEADER: лого «Л.» и CTA «Записаться» одинаковой высоты — 40px.
       Бургер тоже 40×40. Все три элемента визуально согласованы. */
    .site-header { padding: 0; }
    .header-inner {
        height: 60px;
        padding: 0 14px !important;
        gap: 10px;
        max-width: 100vw;
        overflow: visible;
    }
    .brand-lockup {
        flex: 0 0 auto;
        margin-right: auto;
        gap: 8px;
    }
    .brand-lockup__full { display: none; }
    .brand-lockup__mark {
        display: block;
        width: 40px;
        height: 40px;
    }

    /* Audience-toggle [Гостям|Мастерам] на мобиле — работает по тому же
       принципу что и десктоп-вариант: ::before-плашка translateX-ится между
       кнопками, цвет плашки берётся из --zone-toggle-thumb (лавандовая для
       client, графитовая для master). Просто компактим размеры для шапки. */
    .audience-toggle--header {
        display: inline-grid !important;
        width: auto !important;       /* desktop фиксирует 224px — переопределяем */
        flex: 0 0 auto;
        padding: 4px !important;
    }
    .audience-toggle--header button {
        padding: 7px 14px !important;
        font-size: 12px !important;
        font-weight: 500 !important;
    }

    /* Скрываем «Кабинет», master-CTA и client-CTA из шапки на мобильном —
       переключение страниц теперь через audience-toggle (см. выше),
       «Записаться» доступен через main hero CTA. */
    .site-header .header-cabinet { display: none; }
    .site-header .is-master.header-cta { display: none !important; }
    .site-header .is-client.header-cta { display: none !important; }

    /* Audience-toggle В DRAWER скрываем — на мобиле он теперь в шапке.
       Дубль не нужен, экономит место drawer для nav-ссылок. */
    .nav-drawer__audience { display: none !important; }
    .audience-toggle--mobile { display: none !important; }

    /* Burger 40×40 — выравнено по высоте с лого и CTA. */
    .menu-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        color: #2A2429;
        flex: 0 0 auto;
    }
    .menu-toggle:hover { background: #F1E8F3 !important; border-radius: 50%; }
    .menu-toggle svg { width: 22px; height: 22px; }

    /* Все секции — отступы сверху/снизу 48px. */
    .section, section.section {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    /* HERO mobile.
       КРИТИЧНО: .hero-stack — это GRID-OVERLAY (две секции client+master в
       одной grid-area "hero"). Скрытая через opacity:0 всё равно занимает
       место → высота stack = max двух hero-контентов. Из-за этого пустота
       между h1/формой и следующей секцией. Решение: на моб неактивную hero
       полностью убираем из layout через display:none. */
    [data-audience="client"] .hero-stack > .hero.is-master,
    [data-audience="master"] .hero-stack > .hero.is-client {
        display: none !important;
    }

    /* Премиум crossfade при смене аудитории на мобиле.
       На десктопе обе hero-секции overlap в grid-area и кросс-фейдятся.
       На мобиле inactive через display:none — без фейда новая страница
       резко «выпрыгивает». Привязываемся к body.is-switching:
         220ms fade-OUT (быстрый) → JS свапает data-audience (display:none
         переключается под прикрытием opacity:0) → 540ms fade-IN с 140ms
         delay. Видим плавное затухание-проявление, без скачков. */
    .hero-stack > .hero {
        transition: opacity 540ms var(--ease-out) 140ms !important;
        transform: none !important; /* отменяем translateY(8px) от desktop — даёт мобильный jump */
    }
    body.is-switching .hero-stack > .hero {
        opacity: 0 !important;
        transition: opacity 220ms var(--ease-out) !important;
    }
    /* Компенсация sticky-шапки 88px (десктоп) не нужна — шапка 60px. */
    .hero-stack,
    .hero {
        margin-top: 0 !important;
        padding-top: 12px !important;
    }
    .hero {
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-bottom: 24px !important;
    }
    .hero-grid {
        display: flex !important;
        flex-direction: column-reverse !important;
        gap: 18px !important;
        min-height: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    .hero-card,
    .hero-collage,
    .hero-card .hero-search,
    .hero-card .hero-actions {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    /* Контраст текста описания — на «оранжевой подложке» был приглушённый
       #6B5D55 (zone-card-fg-muted). На моб фон страница (Крем), нужен
       более тёмный графит для читаемости. */
    .hero-card p {
        color: #2A2429 !important;
        font-size: 16px !important;
        line-height: 1.5 !important;
    }
    /* Hero-card на мобиле: убираем «оранжевую подложку» (zone-card-bg),
       reset min-height и margin-top: auto чтобы между текстом и формой
       поиска не было огромного пустого блока. На десктопе hero-card —
       карточка с фоном; на мобиле — текст прямо на странице. */
    .hero-card {
        padding: 0 !important;
        background: transparent !important;
        min-height: 0 !important;
        height: auto !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .hero-card::after { display: none !important; }
    .hero-card .hero-search,
    .hero-card .hero-actions {
        margin-top: 16px !important;
    }
    /* Tilt на hero-card отключаем (transform мешает на touch). */
    .tilt-card .hero-card { transform: none !important; }

    /* HERO photos на мобиле — одинаковый размер для обеих аудиторий.
       Client: hero-collage > tilt-card > hero-photo (главный + 2 мелких,
         которые скрываем).
       Master: hero-grid > tilt-card > hero-photo (только одно фото).
       Оба варианта приводим к aspect-ratio 5/6, max-height 50vh, scoped
       border-radius 24px. background-position: center top сохраняет
       видимость лица в client-фото и ресепшна в master-фото — никаких
       обрезанных голов. */
    .hero-collage {
        display: block !important;
        position: relative;
    }
    .hero-collage .hero-collage-row { display: none !important; }

    .hero-collage > .tilt-card:first-child,
    .hero.is-master .hero-grid > .tilt-card {
        display: block !important;
        aspect-ratio: 5 / 6 !important;
        max-height: 50vh !important;
        width: 100% !important;
        overflow: hidden !important;
        border-radius: 24px !important;
    }
    .hero-collage .hero-photo,
    .hero.is-master .hero-grid > .tilt-card .hero-photo {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        border-radius: 24px !important;
    }
    /* Client-фото: лицо/верх композиции в кадре. */
    .hero-collage .hero-photo {
        background-size: cover !important;
        background-position: 50% 20% !important;
    }
    /* Master-фото (девушка за ресепшеном): немного зум + bottom-align,
       чтобы рабочая зона (стол + лаванда + девушка) была в кадре по
       правилу третей. Wordmark на стене частично уходит вверх — ОК,
       основной фокус на женщине-резиденте. */
    .hero.is-master .hero-grid > .tilt-card .hero-photo {
        background-size: 130% auto !important;
        background-position: 50% 78% !important;
    }

    .hero-card .eyebrow {
        font-size: 11px;
        letter-spacing: 0.12em;
        margin-bottom: 10px;
    }
    .hero-card h1, .hero-card .hero-card-h1 {
        font-size: clamp(28px, 7.5vw, 34px) !important;
        line-height: 1.1 !important;
        letter-spacing: -0.012em;
        margin-bottom: 10px !important;
    }
    .hero-card p {
        font-size: 15px;
        line-height: 1.5;
        margin-bottom: 20px;
    }

    /* Hero-stats: сжимаем, на ≤480 скрываем (см. §3 ниже). */
    .hero-stats {
        gap: 18px !important;
        padding-top: 20px !important;
        margin-top: 20px !important;
        flex-wrap: nowrap !important;
        justify-content: space-between;
        border-top: 1px solid var(--ink-200, #E5DFE2);
    }
    .hero-stats > div {
        flex: 1 1 0 !important;
        min-width: 0;
        text-align: left;
    }
    .hero-stats dt { font-size: 22px !important; }
    .hero-stats dd { font-size: 10px !important; letter-spacing: 0.06em; }

    /* HERO MOBILE: фото сверху, текст ниже на page-bg.
       Раньше был overlay-режим (cream-текст поверх фото с тёмным градиентом),
       но при длинном h1 последние строки уезжали за фото и сливались с
       cream page-bg → «пропадают». Убираем overlay вообще, делаем простой
       читаемый стек: photo (5:6) → eyebrow + h1 + lead + form/CTA в графите.
       Цвета явно прибиваем к ink + lav-deep чтобы НЕ зависеть от zone-токенов
       (которые на мобильном transparent-bg давали low-contrast). */
    .hero .hero-card .eyebrow {
        color: var(--lav-deep, #6B5478) !important;
        opacity: 1 !important;
    }
    .hero .hero-card h1,
    .hero .hero-card .hero-card-h1 {
        color: var(--ink-900, #2A2429) !important;
        text-shadow: none !important;
    }
    .hero .hero-card .serif-italic {
        color: var(--lav-700, #6B4F7A) !important;
        font-style: italic;
    }
    .hero .hero-card p {
        color: var(--ink-900, #2A2429) !important;
        opacity: 0.85 !important;
    }

    /* SECTION HEAD — стек по центру, заголовок крупнее. */
    .section-head {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px;
        margin-bottom: 24px;
    }
    .section-head h2 {
        font-size: clamp(26px, 6vw, 32px) !important;
        line-height: 1.15;
    }
    .section-head__meta {
        text-align: left !important;
        font-size: 14px;
    }

    /* SLIDERS на мобильном: только ВИДИМЫЕ под текущей аудиторией секции
       становятся слайдером. Жёстко привязываемся к body[data-audience],
       иначе display:flex перебивает audience-switching display:none и
       секции дублируются (.is-client + .is-master видны одновременно). */
    .lav-slider,
    .masters-grid,
    .reviews-grid,
    body[data-audience="client"] .cards-grid.is-client,
    body[data-audience="master"] .cards-grid.is-master {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 12px !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        padding: 4px 16px 12px;
        margin: 0 -16px;
        scrollbar-width: none;
    }
    .lav-slider::-webkit-scrollbar,
    .cards-grid::-webkit-scrollbar,
    .masters-grid::-webkit-scrollbar,
    .reviews-grid::-webkit-scrollbar { display: none; }

    .lav-slider > *,
    body[data-audience="client"] .cards-grid.is-client > *,
    body[data-audience="master"] .cards-grid.is-master > *,
    .masters-grid > *,
    .reviews-grid > * {
        flex: 0 0 auto !important;
        width: calc(78vw - 16px);
        max-width: 320px;
        scroll-snap-align: start;
    }
    /* Точки-индикаторы. */
    .lav-slider-dots {
        display: flex;
        justify-content: center;
        gap: 6px;
        margin-top: 18px;
    }
    .lav-slider-dots__dot {
        width: 6px;
        height: 6px;
        border-radius: 3px;
        background: #DFD6CE;
        border: none;
        padding: 0;
        cursor: pointer;
        transition: width 200ms ease, background 200ms ease;
    }
    .lav-slider-dots__dot.is-active {
        width: 24px;
        background: #9B7BA8;
    }

    /* CARDS — на мобильном стопка карточек или слайдер. */
    .cards-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .masters-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .why-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .why-grid > div {
        border-right: 0 !important;
        border-bottom: 1px solid #E8E0D7;
        padding-bottom: 16px;
    }
    .why-grid > div:last-child { border-bottom: 0; }

    /* BUTTONS на мобильном — comfortable touch. */
    .btn--primary,
    .btn--secondary {
        min-height: 48px;
        padding: 12px 20px;
        font-size: 14px;
        border-radius: 16px;
    }
    .hero-card .btn,
    .cta .btn {
        width: 100%;
        justify-content: center;
        height: 56px;
        font-size: 15px;
    }

    /* CTA-BLOCK — полная ширина минус отступы. */
    .cta {
        padding: 40px 24px !important;
        border-radius: 28px;
        margin: 0 16px;
    }
    .cta h2 {
        font-size: clamp(24px, 6vw, 32px) !important;
        line-height: 1.15;
    }
    .cta p { font-size: 15px; line-height: 1.5; }

    /* RITUAL section grid */
    .ritual-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    /* FOOTER — single column. */
    .site-footer {
        padding: 48px 16px 24px !important;
    }
    .footer-top {
        flex-direction: column !important;
        gap: 32px !important;
        padding-bottom: 32px !important;
    }
    .footer-brand,
    .footer-locations,
    .footer-nav,
    .footer-contact {
        width: 100% !important;
        max-width: 100% !important;
    }
    .footer-nav {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .locations-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .footer-contact {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 24px 0 !important;
        gap: 16px;
    }
    .footer-contact__channels { width: 100%; }
    .footer-contact .btn { width: 100%; justify-content: center; }
    .footer-bottom {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 14px !important;
        font-size: 12px;
    }

    /* Тестимониалы и отзывы — слайдер. */
    .reviews .reviews-grid {
        display: flex !important;
        flex-direction: row !important;
        gap: 12px !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: 4px 16px 12px;
        margin: 0 -16px;
        scrollbar-width: none;
    }
    .reviews .reviews-grid::-webkit-scrollbar { display: none; }
    .reviews .reviews-grid > * {
        flex: 0 0 auto;
        width: calc(84vw - 16px);
        max-width: 360px;
        scroll-snap-align: start;
    }

    /* AUDIENCE-TOGGLE в hero и в drawer. */
    .audience-toggle {
        gap: 4px;
    }
    .audience-toggle button {
        flex: 1 1 0;
        padding: 10px 14px;
        font-size: 13px;
    }

    /* HERO-SEARCH на мобиле: упрощаем — селекты в стопку, кнопка широкая.
       Поля не должны выходить за viewport. */
    .hero-search {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px;
        padding: 8px !important;
        border-radius: 20px !important;
        background: #fff;
        max-width: 100%;
        box-sizing: border-box;
    }
    .hero-search > select,
    .hero-search > .select {
        width: 100% !important;
        max-width: 100%;
    }
    .hero-search > .btn,
    .hero-search > button {
        width: 100% !important;
        justify-content: center !important;
        border-radius: 14px !important;
        height: 52px;
        padding: 0 18px !important;
        font-size: 15px !important;
    }
    .hero-search .select__trigger {
        padding: 14px 14px !important;
        border-radius: 14px !important;
        font-size: 14px !important;
        width: 100%;
        box-sizing: border-box;
    }
    .hero-search .select + .select::before {
        left: 14px;
        right: 14px;
        top: 0;
        bottom: auto;
        width: auto;
        height: 1px;
    }
    .hero-search .select__menu {
        left: 0 !important;
        right: 0 !important;
        max-width: calc(100vw - 32px);
    }

    /* MASTERS list — карточки 1 в ряд. */
    .master-card,
    .room-card {
        max-width: 100%;
    }

    /* Картинки в карточках. */
    .room-card__photo,
    .master-card__photo {
        aspect-ratio: 16/10;
        height: auto !important;
        border-radius: 20px;
    }

    /* Tilt отключаем на мобильном — вызывает layout-shift и не работает с touch. */
    .tilt-card {
        transform: none !important;
    }
    .tilt-card__inner {
        transform: none !important;
    }

    /* Back-to-top: на мобиле — 16px от края, без magnetic transform.
       Десктопная позиция right:28 + magnetic-effect срезалась за viewport. */
    .to-top {
        right: 16px !important;
        bottom: 16px !important;
        width: 44px !important;
        height: 44px !important;
        --mag-x: 0 !important;
        --mag-y: 0 !important;
    }
    .to-top.is-visible,
    .to-top:hover,
    .to-top:active {
        transform: none !important;
    }
}

/* =================================================================
   §2.1 BOOKING MODAL — bottom-sheet на мобиле.
   На десктопе — центрированная карточка (стандарт). На мобиле — снизу,
   во всю ширину, с drag-handle, скроллится внутри.
   ================================================================= */
@media (max-width: 768px) {
    /* Затемнение чуть менее агрессивное на мобиле. */
    .modal {
        padding: 0 !important;
        align-items: flex-end !important;
    }

    .modal__panel {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 92vh;
        margin: 0 !important;
        border-radius: 24px 24px 0 0 !important;
        padding: 28px 20px max(20px, env(safe-area-inset-bottom)) !important;
        overflow-y: auto;
        transform: translateY(100%) !important;
        transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1) !important;
        -webkit-overflow-scrolling: touch;
        position: relative;
    }
    .modal[aria-hidden="false"] .modal__panel {
        transform: translateY(0) !important;
    }

    /* Drag handle сверху панели — визуальный индикатор «потянуть вниз». */
    .modal__panel::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: var(--ink-300, #C9C2C6);
        border-radius: 2px;
        margin: -10px auto 16px;
    }

    /* Заголовок и текст — компактнее. */
    .modal__panel h3 {
        font-size: 24px !important;
        line-height: 1.15 !important;
        margin-bottom: 8px !important;
    }
    .modal__panel > p {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin-bottom: 18px !important;
    }

    /* Поля формы внутри модалки — компактнее, full-width. */
    .modal__panel .field {
        margin-bottom: 14px !important;
    }
    .modal__panel .field input,
    .modal__panel .field select,
    .modal__panel .field textarea {
        width: 100%;
        font-size: 16px; /* 16px чтобы iOS не зумил при focus */
        padding: 14px 14px;
        box-sizing: border-box;
    }

    /* Submit button на всю ширину. */
    .modal__panel button[type="submit"],
    .modal__panel .btn--primary {
        width: 100%;
        justify-content: center;
        height: 52px;
    }

    /* Close-кнопка — крупнее тач-зону. */
    .modal__close {
        width: 36px !important;
        height: 36px !important;
        top: 16px !important;
        right: 16px !important;
    }

    /* Doc-modal (legal docs) — тот же bottom-sheet. */
    .modal__panel--doc {
        max-height: 92vh !important;
        padding: 28px 20px max(20px, env(safe-area-inset-bottom)) !important;
    }
}

/* =================================================================
   §3 МАЛЕНЬКИЕ МОБИЛЫ (≤ 480px)
   ================================================================= */
@media (max-width: 480px) {
    .hero-card h1 {
        font-size: 28px !important;
    }
    .section-head h2 {
        font-size: 24px !important;
    }
    .lav-slider > * {
        width: 84vw;
    }
    .cta {
        padding: 32px 20px !important;
    }
    /* Hero-stats скрываем на самых маленьких — освобождаем место для CTA. */
    .hero-stats { display: none !important; }
    /* Header сжатие на 360-380px шириной. */
    .header-inner { gap: 8px !important; }
    .site-header .is-client.header-cta {
        font-size: 12px !important;
        padding: 0 14px !important;
        height: 34px !important;
    }
}

/* =================================================================
   §3.5 MUSIC PLAYER на мобиле — компактный single-column.
   Десктопный grid 2-колонок (cover 320px + tracks 420px) на 393px viewport
   просто не помещается → правый/левый блоки съезжают за края.
   ================================================================= */
@media (max-width: 768px) {
    /* overflow-x: clip на секции — гарантия что ничего не вылезет. */
    .lav-music {
        overflow-x: clip;
        padding: 48px 0 56px;
    }

    .lav-music__inner {
        padding: 0 16px !important;
        max-width: 100%;
    }

    /* Заголовок и подзаголовок — компактнее. */
    .lav-music__title {
        font-size: clamp(26px, 6vw, 32px) !important;
        max-width: 100%;
    }
    .lav-music__sub {
        font-size: 15px !important;
        line-height: 1.55;
        margin: 12px 0 24px !important;
        max-width: 100%;
        /* Сокращаем визуально длинное описание — до 4 строк, потом ... */
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Главное: grid → single column, оба блока на 100% ширины. */
    .lav-music__grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    /* Cover — мельче, центрирован. */
    .lav-music__cover {
        width: min(260px, 68vw);
        margin: 0 auto;
        aspect-ratio: 1/1;
    }
    /* Cover-title «Тишина» — уменьшаем чтобы не обрезалось бордером. */
    .lav-music__cover-title {
        font-size: clamp(48px, 14vw, 72px) !important;
        line-height: 1 !important;
    }
    .lav-music__cover-sub {
        font-size: 11px !important;
        letter-spacing: 0.16em !important;
    }
    .lav-music__cover-meta,
    .lav-music__cover-foot {
        font-size: 9px !important;
        letter-spacing: 0.12em !important;
    }
    .lav-music__cover-mark {
        width: 24px !important;
        height: 24px !important;
    }

    /* Album-описание (под cover) — clamp до 4 строк, чтобы не было простыни. */
    .lav-music__album h3 {
        font-size: 22px !important;
    }
    .lav-music__album p {
        font-size: 14px !important;
        line-height: 1.55 !important;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .lav-music__album-italic {
        font-size: 14px !important;
        margin-top: 8px !important;
    }
    .lav-music__meta-row {
        font-size: 12px !important;
        flex-wrap: wrap;
    }

    /* Tracks/now-playing блок — занимает всю ширину под cover, без min-width. */
    .lav-music__player,
    .lav-music__now,
    .lav-music__tracks {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    /* Хвостовой блок описания (если был после cover/tracks) — вертикально. */
    .lav-music__caption {
        font-size: 14px;
        max-width: 100%;
    }
}

/* =================================================================
   §4 prefers-reduced-motion
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
    .nav-drawer__panel,
    .lav-slider {
        transition: none !important;
        scroll-behavior: auto !important;
    }
}