/* ============================================================
   PALOMA — мобильная доводка (грузится ПОСЛЕДНИМ, только телефоны).
   Все правила внутри @media (max-width:600px) — десктоп не затрагивается.
   Цель: компактные заголовки как в iOS, плотный ритм, крупная зона нажатия.
   ============================================================ */
/* ─── БУРГЕР-МЕНЮ (телефоны И планшеты — бургер активен до 1024px) ───
   Верхний отступ панели был 140px (пустое поле), из-за чего нижние пункты
   уходили за экран и меню «не показывалось полностью». Подтягиваем контент
   под крестик, уплотняем пункты и включаем плавный скролл. */
@media (max-width: 1024px) {
  /* Убираем blur у шапки на телефонах/планшетах: размытие фона под фиксированной
     шапкой пересчитывается на каждом кадре скролла — дорогая перерисовка и лаги.
     Фон шапки и так почти непрозрачный, визуально почти не меняется. */
  .site-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .site-header__mobile-panel {
    padding-top: calc(108px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 22px !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .site-header__mobile-link { padding: 13px 0 !important; }
  .site-header__mobile-phone { margin-top: 16px !important; }
  .site-header__mobile-footer { margin-top: 16px !important; padding-top: 14px !important; gap: 10px !important; }

  /* Баннер «технические работы» из-за своего стекинг-контекста рендерился
     ПОВЕРХ открытого меню и закрывал верхние пункты (Каталог и т.д.).
     Пока меню открыто — прячем баннер. */
  body.is-nav-open .paloma-maint { display: none !important; }
}

/* ─── КОФЕЙНЯ: блоки «Лимонады», «Десерты», «Кофе на дом» ───
   Фото/видео «прилипает» сверху, а текстовая карточка со скруглённым
   верхом НАПЛЫВАЕТ ПОВЕРХ него при скролле (как шторки на ПК). */
@media (max-width: 900px) {
  /* фото/видео прилипает к верху и остаётся, пока листаем секцию */
  #cf-lemon .cf-hero__left,
  #cf-sweet .cf-hero__left,
  .cf-philo .ea-philo__media {
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
    align-self: start !important;
  }
  /* в блоке «Кофе на дом» видео должно быть сверху (по умолчанию текст первый) */
  .cf-philo .ea-philo__media { order: -1 !important; }

  /* текстовая карточка — поверх фото, непрозрачная, со скруглённым верхом */
  #cf-lemon .ea-hero__right,
  #cf-sweet .ea-hero__right,
  .cf-philo .ea-philo__text {
    position: relative;
    z-index: 3;
    background: #FFFFFF;
    border-radius: 28px 28px 0 0;
    padding-top: 40px;
    box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.12);
  }
  #cf-lemon.ea-panel,
  #cf-sweet.ea-panel,
  .cf-philo.ea-panel,
  #cf-lemon .ea-hero__left,
  #cf-sweet .ea-hero__left { overflow: visible !important; }

  /* Этапы «01/02/03» — горизонтальный скролл-джек как на ПК: раскладка живёт
     в coffee-ea.css (@media ≤900px), драйвер — coffee-ea.js. Здесь ничего. */

  /* ─── ГЛАВНАЯ: блоки «Оформляем однажды» (hero) и «У каждого события…»
     (philo) — то же наложение при скролле, что и на кофейне: медиа
     «прилипает», текстовая карточка со скруглённым верхом наплывает поверх.
     Механика та же — .ea-panel на телефоне relative/height:auto, у медиа
     задана высота (72/62vh), поэтому sticky пиннит его, а непрозрачный текст
     проезжает сверху. */
  #ea-home-hero .ea-hero__left,
  #ea-home-philo .ea-philo__media {
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
  }
  /* в philo медиа в DOM идёт после текста — поднимаем его наверх */
  #ea-home-philo .ea-philo__media { order: -1 !important; }

  #ea-home-hero .ea-hero__right,
  #ea-home-philo .ea-philo__text {
    position: relative;
    z-index: 3;
    background: #FFFFFF;
    border-radius: 28px 28px 0 0;
    padding-top: 34px;
    box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.12);
  }
  #ea-home-philo .ea-philo__text { border-bottom: none !important; }
  #ea-home-hero.ea-panel,
  #ea-home-philo.ea-panel,
  #ea-home-hero .ea-hero__left { overflow: visible !important; }

  /* ─── ОФОРМЛЕНИЕ (event-decoration): единый эффект наложения на трёх блоках —
     hero (#top), «философия» (#philosophy) и «Оформить событие» (#contact).
     Механика одна: МЕДИА во всю ширину экрана «прилипает» (sticky) с заданной
     высотой, а непрозрачная карточка со скруглённым верхом наплывает поверх при
     скролле. Тот же приём, что на главной и на карточке товара. */

  /* event-author.css задаёт .event-decoration-page .ea-hero/.ea-philo{height:100vh}
     БЕЗ медиазапроса, и по специфичности (2 класса) это перебивает мобильное
     height:auto → секция ужата до экрана, а фото+текст вылезают вниз и наезжают на
     следующий блок. ID-селектор (специфичнее) снимает фикс-высоту. */
  #top, #philosophy { height: auto !important; min-height: 0 !important; }

  /* Hero */
  #top.ea-panel { overflow: visible !important; }
  #top .ea-hero__left {
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
    min-height: 0 !important;
    height: 72vh !important;
    overflow: hidden !important;
  }
  #top .ea-hero__right {
    position: relative;
    z-index: 3;
    margin-top: -30px !important;
    background: #FFFFFF;
    border-radius: 28px 28px 0 0;
    padding: 38px 28px 44px !important;
    box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.12);
  }

  /* Философия: фото невесты во всю ширину прилипает, текст наплывает поверх */
  #philosophy.ea-panel { overflow: visible !important; }
  #philosophy .ea-philo__media {
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
    order: -1 !important;
    min-height: 0 !important;
    height: 72vh !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }
  #philosophy .ea-philo__media img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 28% !important;
    display: block !important;
  }
  #philosophy .ea-philo__text {
    position: relative;
    z-index: 3;
    margin-top: -30px !important;
    background: #FFFFFF;
    border-radius: 28px 28px 0 0;
    padding: 38px 28px 44px !important;
    box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.12);
    border-bottom: none !important;
  }

  /* «Оформить событие» (#contact): фото и поля меняются местами (фото сверху во
     всю ширину, без рамки), поля формы наплывают на фото при скролле. */
  #contact.ea-panel {
    overflow: visible !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
  }
  #contact .ea-cta__inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    max-width: none !important;
  }
  #contact .ea-cta__media {
    order: -1 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
    min-height: 0 !important;
    height: 72vh !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    overflow: hidden !important;
  }
  #contact .ea-cta__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  #contact .ea-cta__formcol {
    position: relative;
    z-index: 3;
    margin-top: -30px !important;
    background: #FFFFFF;
    border-radius: 28px 28px 0 0;
    padding: 38px 24px 40px !important;
    box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.12);
  }

  /* ─── ОФОРМЛЕНИЕ: блоки услуг (.ea-svc) ───
     На десктопе это «шторки» на весь экран с узкой карточкой-переворотом (по
     hover). На телефоне hover нет и карточка терялась. Делаем: секция по высоте
     контента (не 100vh), карточка во всю ширину поверх фото, переворот — по тапу
     (класс .is-flipped ставит JS). Фото услуги → тап → текст услуги. */
  .ea-svc {
    position: relative !important;
    min-height: 100vh !important;   /* высокое фоновое фото — как было */
    height: auto !important;
    padding: 0 !important;
    justify-content: center !important;  /* карточка по центру по вертикали */
    align-items: stretch !important;     /* но во всю ширину (минус поля) */
    box-shadow: none !important;
  }
  .ea-serv__card--flip {
    width: auto !important;
    margin: 0 clamp(16px, 5vw, 26px) !important;
    perspective: 1600px !important;
  }
  /* высота ≈ ширина карточки → почти квадрат, а не вытянутый прямоугольник */
  .ea-serv__flip { height: min(96vw, 440px) !important; }
  /* компактнее отступы на обороте, чтобы текст помещался в более низкую карточку */
  .ea-serv__face--back { padding: 26px 24px !important; }
  /* переворот только по тапу: отключаем focus-within (иначе фокус после тапа
     держит карточку перевёрнутой и обратно не вернуть) */
  .ea-serv__card--flip:focus-within .ea-serv__flip { transform: none; }
  .ea-serv__card--flip.is-flipped .ea-serv__flip { transform: rotateY(180deg) !important; }
  .ea-serv__hint { opacity: .95 !important; }

  /* ─── ЭТАПЫ ПРОЦЕССА (#process на «Оформлении», #cf-steps в кофейне) ───
     Было: очень высокая секция (250vh) + JS двигает трек translateX по
     вертикальному скроллу (scroll-jack) — на телефоне тряслось и лагало из-за
     динамической адресной строки. Стало: секция по высоте одного экрана, лента
     листается пальцем вбок (нативный горизонтальный скролл со snap). JS-драйвер
     выключен в coffee-ea.js / инлайне event-decoration.html. */
  #process, #cf-steps { height: auto !important; }
  #process .ea-proc__sticky, #cf-steps .ea-proc__sticky {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
    display: block !important;
  }
  #process .ea-proc__track, #cf-steps .ea-proc__track {
    transform: none !important;
    will-change: auto !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    height: 86vh !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
  }
  #process .ea-proc__track::-webkit-scrollbar,
  #cf-steps .ea-proc__track::-webkit-scrollbar { display: none !important; }
  #process .ea-proc__panel, #cf-steps .ea-proc__panel {
    flex: 0 0 auto !important;
    height: 100% !important;
    scroll-snap-align: center !important;
  }
  /* прогресс-бар был absolute внутри sticky — переносим под ленту обычным потоком */
  #process .ea-proc__progress, #cf-steps .ea-proc__progress {
    position: static !important;
    left: auto !important; right: auto !important; bottom: auto !important;
    margin: 14px 6vw 0 !important;
  }

  /* ─── БЛОГ ПОЛЬЗЫ: нативный горизонтальный свайп ───
     Убрали скролл-джек (высокая секция + sticky-pin + JS-трансформ трека):
     на телефоне он давал вертикальную тряску из-за динамической адресной строки
     и перерисовок sticky-слоя. Теперь карточки — обычная лента, которую листаешь
     пальцем вбок; вертикальный скролл страницы плавный и без дёрганья. */
  #homeBlog {
    height: auto !important;
    overflow: visible !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .home-blog__pin {
    position: static !important;
    height: auto !important;
    display: block !important;
    overflow: visible !important;
  }
  #homeBlog .home-blog__head {
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-bottom: 20px !important;
  }
  #homeBlog .home-blog__grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    gap: 14px !important;
    padding: 0 20px 6px !important;
    transform: none !important;
    will-change: auto !important;
    scrollbar-width: none !important;
  }
  #homeBlog .home-blog__grid::-webkit-scrollbar { display: none !important; }
  #homeBlog .home-blog__grid > .home-article-card {
    flex: 0 0 82% !important;
    scroll-snap-align: start !important;
  }
  /* карточки не должны остаться невидимыми из-за reveal-анимации */
  #homeBlog .home-reveal { opacity: 1 !important; transform: none !important; }

  /* ─── КАТЕГОРИИ «Выберите по поводу и настроению» — тоже нативный свайп ─── */
  #categories {
    height: auto !important;
    overflow: visible !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .home-categories__pin {
    position: static !important;
    height: auto !important;
    display: block !important;
    overflow: visible !important;
  }
  #categories .home-categories__head {
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-bottom: 20px !important;
  }
  #categories .home-categories__grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    gap: 12px !important;
    padding: 0 20px 6px !important;
    transform: none !important;
    will-change: auto !important;
    scrollbar-width: none !important;
  }
  #categories .home-categories__grid::-webkit-scrollbar { display: none !important; }
  #categories .home-categories__item {
    flex: 0 0 46% !important;
    scroll-snap-align: start !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (max-width: 600px) {

  /* ─── ГЛАВНАЯ ─────────────────────────────────────────── */

  /* Заголовки секций — компактно (было 36–40px) */
  .home-showcase__title,
  .home-categories__title,
  .home-blog__title {
    font-size: 25px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em;
  }
  /* Декоративный шрифт читается крупнее — делаем чуть меньше */
  .home-subscription__title { font-size: 31px !important; line-height: 1.15 !important; }
  .home-subscription__text { font-size: 12.5px !important; line-height: 1.5 !important; }
  .home-subscription__note { font-size: 11px !important; line-height: 1.3 !important; }
  .fmt__title { font-size: 25px !important; line-height: 1.15 !important; }
  .home-article-card__title { font-size: 22px !important; line-height: 1.2 !important; }

  /* Карточки «Наши преимущества»: плавный, медленный переворот по тапу —
     возвращаем анимацию даже при включённом «Уменьшении движения» на телефоне
     (иначе сторона меняется мгновенно). */
  .fmt__flip { transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1) !important; }

  /* Ссылка-«Все товары» под секцией категорий — была 19px, крупновато */
  .home-categories__all { font-size: 15px !important; }

  /* CTA-ссылки — читаемее и с нормальной зоной нажатия (было 10–11px / 25px) */
  .home-showcase__catalog-link,
  .home-product-card__more {
    font-size: 13px !important;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  /* Плотнее вертикальный ритм секций (было 48–72px) */
  .home-showcase   { padding-top: 34px !important; padding-bottom: 34px !important; }
  .home-categories { padding-top: 40px !important; padding-bottom: 44px !important; }
  .home-subscription { padding-top: 40px !important; padding-bottom: 40px !important; }

  /* ─── КАТАЛОГ ─────────────────────────────────────────── */
  .catalog-hero__title { font-size: 28px !important; line-height: 1.12 !important; letter-spacing: -0.01em; }
  .catalog-corporate__title { font-size: 24px !important; line-height: 1.18 !important; }
  .catalog-grid { gap: 12px !important; }

  /* ─── КАРТОЧКА ТОВАРА (PDP) ──────────────────────────────
     Фото товара — во всю ширину экрана и «прилипает» сверху, а карточка с
     названием/составом/размером наплывает поверх фото при скролле (как на
     главной). Галерея-миниатюры на телефоне скрыты — фото занимает весь кадр. */
  /* styles.css задаёт main{overflow-x:hidden}, из-за чего overflow-y становится
     auto — main превращается в скролл-контейнер и position:sticky не «прилипает».
     clip убирает горизонт. вылет, но НЕ создаёт скролл-контейнер (как на Оформлении). */
  main.pdp {
    overflow-x: clip !important;
    overflow-y: visible !important;
  }
  .pdp-layout {
    display: block !important;
    padding: 0 !important;
    gap: 0 !important;
    max-width: none !important;
  }
  .pdp-gallery {
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
    gap: 0 !important;
  }
  .pdp-gallery__main {
    aspect-ratio: 4 / 5 !important;
    border-radius: 0 !important;
  }
  .pdp-gallery__thumbs { display: none !important; }
  .pdp-info {
    position: relative;
    z-index: 3;
    margin-top: -30px;
    background: #FFFFFF;
    border-radius: 28px 28px 0 0;
    padding: 30px 20px 36px;
    box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.12);
  }
  #pdpAddToCart { font-size: 13px !important; }
  .pdp-size-btn { min-height: 42px; }

  /* ─── ФОРМЫ (чекаут, подписка, контакты) ────────────────
     Поля со шрифтом <16px заставляют iOS Safari зумить страницу при
     фокусе. Ставим 16px — назойливый зум при вводе пропадает. */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea { font-size: 16px !important; }

  /* ─── КОФЕЙНЯ / ОФОРМЛЕНИЕ (общие ea-классы) ───────────
     Заголовки и нумерованные шаги покрупнее нужного — компактнее.
     Общий класс → покрывает и кофейню, и «Оформление мероприятий». */
  .ea-title { font-size: 26px !important; line-height: 1.15 !important; }
  .ea-step__t { font-size: 26px !important; line-height: 1.15 !important; }

  /* ─── СВАДЬБЫ ─────────────────────────────────────────── */
  .w-hero__title, .w-form__title { font-size: 28px !important; line-height: 1.12 !important; letter-spacing: -0.01em; }
  .w-intro__title, .w-services__title, .w-process__title,
  .w-portfolio__title, .w-packages__title, .w-faq__title { font-size: 25px !important; line-height: 1.15 !important; }

  /* ─── ПОДПИСКА / ПОДАРОЧНЫЙ СЕРТИФИКАТ ─────────────────── */
  .subscription-hero__title { font-size: 30px !important; line-height: 1.12 !important; letter-spacing: -0.01em; }

  /* ─── КОНТАКТЫ / ДОСТАВКА ──────────────────────────────── */
  .contacts-studio__brand { font-size: 26px !important; }
  .contacts-channels__title { font-size: 24px !important; }

  /* ─── ПОДВАЛ: компактнее ──────────────────────────────────
     Колонки «Каталог» и «Информация» — рядом (2 столбца), блок с формой
     остаётся на всю ширину. Мессенджеры — в одну строку и чуть меньше. */
  .sf2 { grid-template-columns: 1fr 1fr !important; gap: 26px 18px !important; }
  .sf2-col--lead { grid-column: 1 / -1 !important; }
  .sf2-col--nav { font-size: 14px !important; }
  .sf2-socials { gap: 12px !important; flex-wrap: nowrap !important; }
  .sf2-soc { font-size: 13px !important; white-space: nowrap; }
}