/* Точечные правки главной: цветовая иерархия и порядок действий на телефоне.

   Файл подключается последним, поэтому его правила перекрывают остальные
   стили. Селекторы повторяют «вес» базовых (html body[class*="page-"] #main …):
   у базовых правил специфичность выше обычного класса, иначе переопределение
   не сработало бы. */

/* ── Блок «Узнавайте о пропажах рядом первыми» ──────────────────────────
   Он был залит бордовым градиентом, хотя заголовок и абзац в нём тёмные:
   текст почти не читался, а сам блок перетягивал внимание с объявлений.
   Возвращаем светлую карточку с фирменным акцентом только на кнопке. */
html body[class*="page-"] #main .alerts-cta {
  background: linear-gradient(180deg, #fff7f5 0%, #fffdfc 100%);
  border: 1px solid rgba(196, 64, 63, .16);
  box-shadow: 0 14px 34px rgba(120, 60, 40, .08);
}
html body[class*="page-"] #main .alerts-cta .alerts-cta__eyebrow {
  background: rgba(196, 64, 63, .10) !important;
  color: #a8322c !important;
  -webkit-text-fill-color: #a8322c !important;
  box-shadow: none !important;
}
/* Базовые стили блока писались под тёмный фон: они задают белый цвет ещё
   и через -webkit-text-fill-color, поэтому одного color недостаточно. */
html body[class*="page-"] #main .alerts-cta .alerts-cta__title {
  color: #1f2328 !important;
  -webkit-text-fill-color: #1f2328 !important;
}
html body[class*="page-"] #main .alerts-cta .alerts-cta__text {
  color: #5b514c !important;
  -webkit-text-fill-color: #5b514c !important;
  opacity: 1 !important;
}
html body[class*="page-"] #main .alerts-cta .alerts-cta__note {
  color: #8a7d76 !important;
  -webkit-text-fill-color: #8a7d76 !important;
  opacity: 1 !important;
}
html body[class*="page-"] #main .alerts-cta .alerts-cta__btn,
html body[class*="page-"] #main .alerts-cta a.alerts-cta__btn {
  background: #c4403f !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 8px 20px rgba(196, 64, 63, .24);
}
html body[class*="page-"] #main .alerts-cta .alerts-cta__btn:hover {
  background: #b3352f !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html body[class*="page-"] #main .alerts-cta .alerts-cta__btn svg,
html body[class*="page-"] #main .alerts-cta .alerts-cta__btn .ico {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

@media (max-width: 860px) {
  /* CTA загрузки приложения остаётся в фирменной палитре, без почти чёрной заливки. */
  html body[class*="page-"] #main .home-app-promo__cta {
    background: linear-gradient(135deg, #F3185B 0%, #C40B3E 100%) !important;
    background-image: linear-gradient(135deg, #F3185B 0%, #C40B3E 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #C40B3E !important;
    box-shadow: 0 8px 18px -10px rgba(227, 18, 76, .55) !important;
  }
  html body[class*="page-"] #main .home-app-promo__cta:hover {
    background: #C40B3E !important;
    background-image: none !important;
    color: #ffffff;
  }

  html body[class*="page-"] #main .cta-band .btn--primary {
    background: #ffffff !important;
    background-image: none !important;
    color: #b3352f !important;
    -webkit-text-fill-color: #b3352f !important;
    border: 1px solid rgba(196, 64, 63, .38) !important;
    box-shadow: none !important;
  }
  html body[class*="page-"] #main .cta-band .btn--primary:hover {
    background: #fff5f3;
    color: #b3352f;
  }

  /* «Все объявления» — второстепенное действие, чёрная заливка тут лишняя. */
  html body[class*="page-"] #main .btn--dark,
  html body[class*="page-"] #main .btn.btn--dark {
    background: #ffffff !important;
    background-image: none !important;
    color: #2b1813 !important;
    -webkit-text-fill-color: #2b1813 !important;
    border: 1px solid rgba(43, 24, 19, .16) !important;
    box-shadow: 0 1px 2px rgba(43, 24, 19, .05) !important;
  }
  html body[class*="page-"] #main .btn--dark svg { color: #2b1813 !important; stroke: #2b1813 !important; }

  /* Кнопка переезжает под карточки (переносит home-order.js): сначала человек
     смотрит, кого спасать, и только потом уходит в общий список. */
  .section-more {
    display: flex;
    justify-content: center;
    margin-top: 16px;
  }
  .section-more .btn { width: 100%; max-width: 380px; }
}

/* ─── Ритм секций на телефоне ───────────────────────────────────────────
   Отступы скакали: у ленты 22/4, у следующих секций 52/52 и 44/48. Из-за
   этого блоки то липли друг к другу, то проваливались в пустоту. Сводим
   к одному шагу — 28 px между блоками и 40 px внутри крупных секций. */
@media (max-width: 860px) {
  html body[class*="page-"] #main .section--soft,
  html body[class*="page-"] #main .urgent-section {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
  html body[class*="page-"] #main .section--tight,
  html body[class*="page-"] #main .section--cream {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  html body[class*="page-"] #main .petbot-callout,
  html body[class*="page-"] #main .misha-intro {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }
}

/* ─── Плашка согласия на cookie ─────────────────────────────────────────
   Занимала 179 px и закрывала первые карточки объявлений. Делаем её
   компактнее: две строки текста, аккуратные кнопки в ряд, тонкая рамка. */
@media (max-width: 860px) {
  html body #analytics-consent.analytics-consent {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 14px 14px 12px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(43, 24, 19, .07);
    box-shadow: 0 12px 34px rgba(43, 24, 19, .16) !important;
    max-width: none !important;
  }
  #analytics-consent .analytics-consent__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
  }
  #analytics-consent .analytics-consent__head strong {
    font-size: 15px;
    line-height: 1.3;
  }
  #analytics-consent .analytics-consent__ico {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 10px;
  }
  #analytics-consent .analytics-consent__ico svg { width: 16px; height: 16px; }
  #analytics-consent p {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    margin: 0 0 4px !important;
    color: #5b514c;
    /* Длинный дружелюбный абзац обрезаем до двух строк: суть остаётся,
       плашка не расползается на треть экрана. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Правовую сноску не обрезаем: смысл важнее компактности. */
  #analytics-consent .analytics-consent__note {
    display: block;
    -webkit-line-clamp: none;
    font-size: 11.5px !important;
    line-height: 1.45 !important;
    color: #8a7d76 !important;
  }
  #analytics-consent .analytics-consent__actions {
    display: flex;
    gap: 8px;
    margin-top: 12px !important;
  }
  #analytics-consent .analytics-consent__actions .btn {
    flex: 1 1 0;
    padding: 11px 12px;
    font-size: 13px;
    min-height: 0;
  }
}

/* ─── Появление блоков ──────────────────────────────────────────────────
   Сдержаннее и доступнее: короткий подъём, и при «уменьшить движение»
   содержимое показывается сразу, без анимаций. */
@media (max-width: 860px) {
  .reveal { transition-duration: .32s !important; transition-timing-function: cubic-bezier(.22,.7,.3,1) !important; }
  .reveal:not(.is-in) { transform: translateY(6px) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal:not(.is-in) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ─── Карточки объявлений и плитки категорий ────────────────────────────
   Карточки были разной высоты из-за заголовков в 20 px, метки — 8 px,
   кнопка «в избранное» — плотный бордовый круг поверх фото. Приводим
   к одному спокойному виду: заголовок в одну строку, метки читаемые,
   избранное — полупрозрачный кружок с фирменным сердцем. */
@media (max-width: 860px) {
  html body[class*="page-"] #main .pet-card {
    border-radius: 16px !important;
    border: 1px solid rgba(43, 24, 19, .07) !important;
    box-shadow: 0 6px 18px rgba(60, 32, 24, .07) !important;
    overflow: hidden;
  }
  .pet-card__media {
    border-radius: 0 !important;
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }
  .pet-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .pet-card__body {
    padding: 9px 10px 10px !important;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 58px;
  }
  .pet-card__title {
    margin: 0 !important;
    font-size: 15.5px !important;
    font-weight: 600 !important;
    line-height: 1.28 !important;
    color: #1f2328;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .pet-card__body p,
  .pet-card__place,
  .pet-card__meta {
    font-size: 12px !important;
    line-height: 1.35 !important;
    color: #7a6b64 !important;
  }
  .pet-card .tag {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    letter-spacing: .01em;
  }
  /* Базовое правило для кнопки избранного тоже идёт с префиксом
     html body[class*="page-"] #main, поэтому размер задаём так же. */
  html body[class*="page-"] #main .pet-card__fav {
    width: 34px !important;
    height: 34px !important;
    position: relative;
    padding: 0 !important;
    display: inline-grid;
    place-items: center;
    background: rgba(255, 255, 255, .88) !important;
    border: 0 !important;
    color: #c4403f !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 8px rgba(43, 24, 19, .18) !important;
  }
  /* Пальцем сложно попасть в 34 px — расширяем зону нажатия до 46 px. */
  html body[class*="page-"] #main .pet-card__fav::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
  }
  html body[class*="page-"] #main .pet-card__fav svg { width: 17px; height: 17px; stroke: #c4403f; fill: none; }
  .pet-card__fav.is-on,
  .pet-card__fav[aria-pressed="true"] {
    background: #c4403f !important;
    color: #ffffff !important;
  }
  .pet-card__fav.is-on svg,
  .pet-card__fav[aria-pressed="true"] svg { stroke: #ffffff; fill: #ffffff; }

  /* Плитки: одинаковые, с тонкой рамкой и одной типографикой подписи. */
  html body[class*="page-"] #main .quick__item {
    border-radius: 16px !important;
    border: 1px solid rgba(43, 24, 19, .06);
    box-shadow: 0 2px 8px rgba(60, 32, 24, .05);
    padding: 10px 4px 11px !important;
  }
  .quick__item .quick__ico { width: 54px; height: 54px; }
  .quick__item .quick__ico img { width: 54px; height: 54px; object-fit: contain; }
  .quick__item h3 {
    margin: 6px 0 0 !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: .02em;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .quick__item .quick__cap { display: none; }

  /* Кнопки — одной высоты и одного веса, где бы ни стояли. */
  html body[class*="page-"] #main .btn {
    min-height: 48px !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    letter-spacing: .01em;
  }
}

/* ─── Нижнее меню на узких экранах ──────────────────────────────────────
   На 360 px подписи обрезались: «Объявлен…», «Размести…». Уменьшаем кегль
   и разрядку — слова помещаются целиком, высота меню не меняется. */
@media (max-width: 380px) {
  html body .tabbar a,
  html body .tabbar a span {
    font-size: 10px !important;
    letter-spacing: -.01em !important;
  }
  html body .tabbar a { padding-left: 2px !important; padding-right: 2px !important; }
  html body .tabbar a svg { width: 20px; height: 20px; }
}


/* Мобильный аудит главной: поиск следует сразу за первым экраном, без
   промежуточного новостного слайдера; верхний шаг одинаков на телефоне и планшете.
   Фиксируем светлые нативные контролы, чтобы тема ОС не окрашивала select/inputs. */
@media (max-width: 860px) {
  :root { color-scheme: light; }
  html body.page-home #main .home-feed { margin-top: 12px !important; }
  html body.page-home #main .home-feed > .mp-search { margin: 0 0 8px !important; }
}


/* Первый экран мобильной главной: равный, компактный зазор от второй кнопки
   до поиска. Само изображение и типографика hero не уменьшаются. */
@media (max-width: 860px) {
  html body.page-home #main .hero { padding-bottom: 8px !important; }
  html body.page-home #main .hero__actions { margin-bottom: 8px !important; }
  /* На телефоне story-слайд отключён: не оставляем под ним пустую обёртку. */
  html body.page-home #main .home-news-slot { display: none !important; }
}


/* Самые узкие телефоны: длинные подписи нижней навигации не должны обрезаться. */
@media (max-width: 340px) {
  html body .tabbar a,
  html body .tabbar a span {
    font-size: 9px !important;
    letter-spacing: -.035em !important;
  }
  html body .tabbar a { padding-left: 0 !important; padding-right: 0 !important; }
}


/* Экран 320–340 px: поиск остаётся однострочным, подпись основного действия
   не обрезается. Иконки и минимальная зона нажатия остаются прежними. */
@media (max-width: 340px) {
  html body.page-home #main .home-feed > .mp-search .mp-search__row {
    flex-wrap: nowrap !important;
  }
  html body.page-home #main .home-feed > .mp-search .mp-search__row input {
    flex: 1 1 0% !important;
    width: 0 !important;
    min-width: 0 !important;
  }
  html body.page-home #main .home-feed > .mp-search .mp-search__row button {
    flex: 0 0 50px !important;
    width: 50px !important;
    min-width: 50px !important;
  }
  html body .tabbar a[href="/add"],
  html body .tabbar a[href="/add"] span:last-child {
    font-size: 9px !important;
    letter-spacing: -.04em !important;
  }
}


/* На коротких экранах помощник остаётся доступным, но не перекрывает текст. */
@media (max-width: 360px) {
  html body.page-home .ms-root {
    bottom: calc(64px + env(safe-area-inset-bottom)) !important;
  }
  html body.page-home .ms-btn {
    width: 44px !important;
    height: 68px !important;
  }
  html body.page-home .ms-btn img {
    width: 38px !important;
    height: 64px !important;
    object-fit: contain !important;
  }
}


/* На компактных телефонах помощник не должен закрывать поиск или действия. */
@media (max-width: 400px) {
  html body.page-home .ms-root {
    bottom: calc(58px + env(safe-area-inset-bottom)) !important;
  }
  html body.page-home .ms-btn {
    width: 44px !important;
    height: 48px !important;
  }
  html body.page-home .ms-btn img {
    width: 28px !important;
    height: 46px !important;
    object-fit: contain !important;
  }
}
@media (max-width: 340px) {
  html body.page-home .ms-root { right: 0 !important; }
}
@media (min-width: 341px) and (max-width: 380px) {
  html body .tabbar a[href="/add"],
  html body .tabbar a[href="/add"] span:last-child {
    font-size: 10px !important;
    letter-spacing: -.025em !important;
  }
}
@media (max-width: 340px) {
  html body .tabbar a[href="/add"],
  html body .tabbar a[href="/add"] span:last-child {
    font-size: 9px !important;
    letter-spacing: -.04em !important;
  }
}


/* Mobile home CTA system: one berry primary style and one quiet outlined
   secondary style. Keep shape, contrast and touch targets consistent. */
@media (max-width: 860px) {
  html body.page-home #main .hero__actions .btn--primary,
  html body.page-home #main .alerts-cta .alerts-cta__btn,
  html body.page-home #main .alerts-cta a.alerts-cta__btn,
  html body.page-home #main .home-app-promo__cta {
    border-radius: 16px !important;
    font-family: Manrope, system-ui, -apple-system, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -.01em !important;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease !important;
  }
  html body.page-home #main .hero__actions .btn--primary,
  html body.page-home #main .alerts-cta .alerts-cta__btn,
  html body.page-home #main .alerts-cta a.alerts-cta__btn,
  html body.page-home #main .home-app-promo__cta {
    background: linear-gradient(135deg, #F3185B 0%, #C40B3E 100%) !important;
    background-image: linear-gradient(135deg, #F3185B 0%, #C40B3E 100%) !important;
    border: 1px solid #C40B3E !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    box-shadow: 0 8px 18px -10px rgba(227, 18, 76, .55) !important;
  }
  html body.page-home #main .alerts-cta .alerts-cta__btn,
  html body.page-home #main .alerts-cta a.alerts-cta__btn { min-height: 50px !important; }
  html body.page-home #main .hero__actions .btn--primary { min-height: 50px !important; }
  html body.page-home #main .home-app-promo__cta { min-height: 56px !important; }

  html body.page-home #main .hero__actions .btn--primary:active,
  html body.page-home #main .alerts-cta .alerts-cta__btn:active,
  html body.page-home #main .alerts-cta a.alerts-cta__btn:active,
  html body.page-home #main .home-app-promo__cta:active {
    background: #C40B3E !important;
    background-image: none !important;
    transform: translateY(1px) !important;
    box-shadow: 0 4px 12px -8px rgba(227, 18, 76, .55) !important;
  }
  html body.page-home #main .hero__actions .btn--primary svg,
  html body.page-home #main .alerts-cta .alerts-cta__btn svg,
  html body.page-home #main .alerts-cta a.alerts-cta__btn svg,
  html body.page-home #main .home-app-promo__cta svg,
  html body.page-home #main .home-app-promo__cta .home-app-promo__ico {
    color: #FFFFFF !important;
    stroke: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
  }

  html body.page-home #main .hero-action-map,
  html body.page-home #main .home-app-promo__ghost {
    background: #FFFFFF !important;
    background-image: none !important;
    color: #C40B3E !important;
    -webkit-text-fill-color: #C40B3E !important;
    border: 1px solid rgba(227, 18, 76, .24) !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 8px rgba(43, 24, 19, .045) !important;
    font-family: Manrope, system-ui, -apple-system, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -.005em !important;
  }
  html body.page-home #main .hero-action-map { min-height: 50px !important; }
  html body.page-home #main .home-app-promo__ghost { min-height: 56px !important; }
  html body.page-home #main .hero-action-map svg,
  html body.page-home #main .hero-action-map .ico { color: #C40B3E !important; stroke: #C40B3E !important; }
  html body.page-home #main .hero-action-map:active,
  html body.page-home #main .home-app-promo__ghost:active {
    background: #FFF4F7 !important;
    background-image: none !important;
    transform: translateY(1px) !important;
  }
  html body.page-home #main .hero__actions .btn--primary:focus-visible,
  html body.page-home #main .alerts-cta .alerts-cta__btn:focus-visible,
  html body.page-home #main .hero-action-map:focus-visible,
  html body.page-home #main .home-app-promo__cta:focus-visible,
  html body.page-home #main .home-app-promo__ghost:focus-visible {
    outline: 3px solid rgba(227, 18, 76, .28) !important;
    outline-offset: 2px !important;
  }
}