/* ============================================================
   «Сердце Питомца» — единая мобильная палитра (2026-10-20).
   Задача: на телефоне все страницы используют один тёплый набор
   цветов бренда. Меняются только цвета, рамки и тени —
   геометрия, отступы и типографика не затрагиваются.
   Палитра: фон #FFFCF8, поверхность #FFFFFF, линия #EFE4DD,
   текст #2A1A15 / #7D6860, акцент #E3124C.
   ============================================================ */
@media (max-width: 860px) {
  :root {
    --m-bg: #FFFCF8;
    --m-surface: #FFFFFF;
    --m-soft: #FCF6F0;
    --m-line: #EFE4DD;
    --m-line-strong: #E6D6CC;
    --m-ink: #2A1A15;
    --m-ink-2: #4E3A33;
    --m-muted: #7D6860;
    --m-brand: #E3124C;
    --m-brand-dark: #C40B3E;
    --m-brand-soft: #FDF0EA;
  }

  /* Ритм секций: чередование только тёплых подложек. */
  .section--soft,
  .section--cat,
  .section--urgent,
  .section--stories,
  .section-alt,
  .section--cream {
    background-color: #FCF6F0 !important;
    background-image: none !important;
  }
  .page-hero {
    background-image: linear-gradient(180deg, #FFF8F3 0%, #FFFCF8 100%) !important;
    border-bottom-color: #EFE4DD !important;
  }

  /* Шапка, меню, нижняя полоса. */
  .header,
  .header.header,
  #header-bar {
    background-color: rgba(255, 252, 248, 0.97) !important;
    border-bottom-color: #EFE4DD !important;
  }
  .nav,
  .nav__panel {
    background-color: #FFFFFF !important;
    border-color: #EFE4DD !important;
  }
  .tabbar {
    background-color: #FFFFFF !important;
    border-top-color: #EFE4DD !important;
  }

  /* Карточки и панели: один белый тон и одна рамка. */
  .card,
  .pet-card,
  .shelter-card,
  .story-card,
  .faq-item,
  .donate-card,
  .bl-card,
  .bl-rubric-card,
  .quick__item,
  .stat,
  .filters,
  .notify-card,
  .add-card,
  .gis-panel,
  .vet-card,
  .mp-search {
    background-color: #FFFFFF !important;
    border-color: #EFE4DD !important;
  }
  .pet-card__media,
  .shelter-card__media,
  .story-card__media,
  .bl-card__shot {
    background-color: #F6EAE1 !important;
  }

  /* Поля ввода и кнопки. */
  .input,
  .select,
  .textarea,
  select.select {
    background-color: #FFFFFF !important;
    border-color: #E6D6CC !important;
    color: #2A1A15 !important;
  }
  .input::placeholder,
  .textarea::placeholder {
    color: #A08C80 !important;
  }
  .btn--primary {
    background-color: #E3124C !important;
    border-color: #E3124C !important;
  }
  .btn--primary,
  .btn--primary * {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
  }
  .btn--ghost {
    background-color: #FFFFFF !important;
    border-color: #E6D6CC !important;
    color: #4E3A33 !important;
  }

  /* Чипы фильтров. */
  .chip {
    background-color: #FFFFFF !important;
    border-color: #E6D6CC !important;
    color: #4E3A33 !important;
  }
  .chip.is-active {
    background-color: #2B1813 !important;
    border-color: #2B1813 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
  }

  /* Текстовые уровни на белых поверхностях. */
  .card h2,
  .card h3,
  .card h4,
  .bl-card__title,
  .pet-card__title,
  .shelter-card__title,
  .story-card__title {
    color: #1E120D !important;
  }
  #main .muted,
  #main .lead,
  .bl-card__meta,
  .bl-list__date {
    color: #7D6860 !important;
    -webkit-text-fill-color: #7D6860 !important;
  }
}

@media (max-width: 860px) {
  /* Карточки объявлений: внутреннее содержимое должно оставаться на той же
     светлой поверхности, что и сама карточка. Это переопределяет прозрачные
     правила брендовых слоёв только на мобильных экранах и не меняет геометрию. */
  .pet-card__body,
  .pet-card__body > .pet-card__title,
  .pet-card__body > .pet-card__meta,
  .pet-card__body > .pet-card__foot,
  .pet-card__body > .pet-card__share {
    background-color: #FFFFFF !important;
    color: #2A1A15 !important;
  }
  .pet-card__body .pet-card__link,
  .pet-card__body .pet-card__title h3 {
    color: #1E120D !important;
    -webkit-text-fill-color: #1E120D !important;
  }
  .pet-card__body .pet-card__desc {
    color: #6E5A52 !important;
    -webkit-text-fill-color: #6E5A52 !important;
  }
  .pet-card__body .pet-card__loc,
  .pet-card__body .muted,
  .pet-card__body .pet-card__reviews {
    color: #7D6860 !important;
    -webkit-text-fill-color: #7D6860 !important;
  }
}

@media (max-width: 860px) {
  /* Единый мобильный акцент для активных фильтров. */
  .chip.is-active,
  .filters__quick .chip:has(input:checked),
  .filters__quick .chip.is-on {
    background-color: #E3124C !important;
    border-color: #E3124C !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
  }

  /* CTA-кнопки используют общий акцент вместо отдельной коричневой темы. */
  html body #main .btn--dark,
  html body #main .btn.btn--dark {
    background-color: #E3124C !important;
    background-image: none !important;
    border-color: #E3124C !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
  }
  html body #main .btn--dark *,
  html body #main .btn--dark svg {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    stroke: #FFFFFF !important;
  }
}

/* Страница объявления: основной контент в общей светлой мобильной теме.
   Шапка, нижняя навигация и полноэкранный просмотрщик фото не затрагиваются. */
@media (max-width: 860px) {
  html:has(body.page-pet),
  body.page-pet {
    background: #FFFCF8 !important;
    color: #2A1A15 !important;
  }
  body.page-pet #main,
  body.page-pet #main > .page-hero,
  body.page-pet #main > .section {
    background: #FFFCF8 !important;
    color: #2A1A15 !important;
  }
  body.page-pet .page-hero {
    border-bottom: 1px solid #EFE4DD !important;
    background: linear-gradient(180deg, #FFF8F3 0%, #FFFCF8 100%) !important;
  }
  body.page-pet .page-hero .crumbs,
  body.page-pet .page-hero .crumbs a,
  body.page-pet .page-hero .h-l,
  body.page-pet .page-hero .lead {
    color: #2A1A15 !important;
    -webkit-text-fill-color: #2A1A15 !important;
  }
  body.page-pet .page-hero .crumbs a { color: #A34232 !important; }
  body.page-pet .pet-layout,
  body.page-pet .prose,
  body.page-pet .side {
    background: transparent !important;
    color: #2A1A15 !important;
  }
  body.page-pet .prose h2,
  body.page-pet .prose h3,
  body.page-pet .side h2,
  body.page-pet .side h3,
  body.page-pet .spec dd,
  body.page-pet .curator__name {
    color: #2A1A15 !important;
    -webkit-text-fill-color: #2A1A15 !important;
  }
  body.page-pet .prose > .lead,
  body.page-pet .side .muted,
  body.page-pet .reviews-card__note,
  body.page-pet .comment-login {
    color: #7D6860 !important;
    -webkit-text-fill-color: #7D6860 !important;
  }
  body.page-pet .card,
  body.page-pet .reviews-card,
  body.page-pet .spec > div {
    background: #FFFFFF !important;
    border-color: #EFE4DD !important;
    color: #2A1A15 !important;
  }
  body.page-pet .spec > div { background: #FCF6F0 !important; }
  body.page-pet .spec dt { color: #7D6860 !important; }
  body.page-pet .pet-photo,
  body.page-pet .pg__track,
  body.page-pet .pg .pg__slide,
  body.page-pet .pg__thumb {
    background: #F6EAE1 !important;
  }
  body.page-pet .pet-photo img,
  body.page-pet .pg .pg__slide img { background: transparent !important; }
  body.page-pet .reviews-form,
  body.page-pet .comment-form__input,
  body.page-pet input.input,
  body.page-pet textarea.textarea {
    background: #FFFFFF !important;
    color: #2A1A15 !important;
    border-color: #E6D6CC !important;
  }
  body.page-pet .tag:not(.tag--urgent),
  body.page-pet .btn--ghost {
    color: #4E3A33 !important;
  }
}

/* Финальное переопределение page-pet: перекрывает общий mobile dark layer. */
@media (max-width: 860px) {
  html body.page-pet section.page-hero,
  html body.page-pet #main > section.page-hero {
    background: linear-gradient(180deg, #FFF8F3 0%, #FFFCF8 100%) !important;
    background-image: linear-gradient(180deg, #FFF8F3 0%, #FFFCF8 100%) !important;
    border-bottom-color: #EFE4DD !important;
    color: #2A1A15 !important;
    filter: none !important;
    opacity: 1 !important;
  }
  html body.page-pet section.page-hero::before,
  html body.page-pet section.page-hero::after {
    background: none !important;
    opacity: 0 !important;
  }
  html body.page-pet section.page-hero .container,
  html body.page-pet section.page-hero .crumbs,
  html body.page-pet section.page-hero h1,
  html body.page-pet section.page-hero .h-l,
  html body.page-pet section.page-hero p,
  html body.page-pet section.page-hero .lead,
  html body.page-pet section.page-hero a,
  html body.page-pet section.page-hero span {
    color: #2A1A15 !important;
    -webkit-text-fill-color: #2A1A15 !important;
  }
  html body.page-pet section.page-hero .crumbs a {
    color: #A34232 !important;
    -webkit-text-fill-color: #A34232 !important;
  }
  html body.page-pet #main > section.section,
  html body.page-pet #main > section.section .container,
  html body.page-pet #main > section.section .pet-layout,
  html body.page-pet #main > section.section .prose,
  html body.page-pet #main > section.section .side {
    background: #FFFCF8 !important;
    color: #2A1A15 !important;
  }
  html body.page-pet #main .card,
  html body.page-pet #main .reviews-card,
  html body.page-pet #main .spec > div {
    background: #FFFFFF !important;
    background-image: none !important;
    border-color: #EFE4DD !important;
    color: #2A1A15 !important;
  }
  html body.page-pet #main .spec > div { background: #FCF6F0 !important; }
  html body.page-pet #main .card :is(h1,h2,h3,h4,h5,h6,p,li,b,strong,small,dd,dt,span,a,label),
  html body.page-pet #main .spec dd,
  html body.page-pet #main .curator__name {
    color: #2A1A15 !important;
    -webkit-text-fill-color: #2A1A15 !important;
  }
  html body.page-pet #main .card :is(.muted,.lead),
  html body.page-pet #main .spec dt {
    color: #7D6860 !important;
    -webkit-text-fill-color: #7D6860 !important;
  }
}

/* Page-pet final light surface: higher specificity than app-install mobile theme. */
html body.page-pet section.page-hero,
html body.page-pet #main section.page-hero {
  background: #FFFCF8 !important;
  background-image: linear-gradient(180deg, #FFF8F3 0%, #FFFCF8 100%) !important;
  border-bottom-color: #EFE4DD !important;
  color: #2A1A15 !important;
  filter: none !important;
  opacity: 1 !important;
}
html body.page-pet section.page-hero::before,
html body.page-pet section.page-hero::after { background: none !important; opacity: 0 !important; }
html body.page-pet section.page-hero .container,
html body.page-pet section.page-hero h1,
html body.page-pet section.page-hero h2,
html body.page-pet section.page-hero h3,
html body.page-pet section.page-hero .h-l,
html body.page-pet section.page-hero p,
html body.page-pet section.page-hero .lead,
html body.page-pet section.page-hero .crumbs,
html body.page-pet section.page-hero a,
html body.page-pet section.page-hero span {
  color: #2A1A15 !important;
  -webkit-text-fill-color: #2A1A15 !important;
}
html body.page-pet section.page-hero .crumbs a {
  color: #A34232 !important;
  -webkit-text-fill-color: #A34232 !important;
}
html body.page-pet #main > section.section,
html body.page-pet #main > section.section .container,
html body.page-pet #main .pet-layout,
html body.page-pet #main .prose,
html body.page-pet #main .side {
  background: #FFFCF8 !important;
  color: #2A1A15 !important;
}
html body.page-pet #main .card,
html body.page-pet #main .reviews-card,
html body.page-pet #main .spec > div {
  background: #FFFFFF !important;
  background-image: none !important;
  border-color: #EFE4DD !important;
  color: #2A1A15 !important;
}
html body.page-pet #main .spec > div { background: #FCF6F0 !important; }
html body.page-pet #main .card h1,
html body.page-pet #main .card h2,
html body.page-pet #main .card h3,
html body.page-pet #main .card h4,
html body.page-pet #main .card p,
html body.page-pet #main .card li,
html body.page-pet #main .card b,
html body.page-pet #main .card strong,
html body.page-pet #main .card small,
html body.page-pet #main .card span,
html body.page-pet #main .spec dd,
html body.page-pet #main .curator__name {
  color: #2A1A15 !important;
  -webkit-text-fill-color: #2A1A15 !important;
}
html body.page-pet #main .card .muted,
html body.page-pet #main .card .lead,
html body.page-pet #main .spec dt {
  color: #7D6860 !important;
  -webkit-text-fill-color: #7D6860 !important;
}

/* Финальная коррекция мобильных карточек объявлений.
   Все внутренние поверхности и текст должны оставаться светлыми независимо
   от базовой темы или правил конкретного блока. Десктоп не затрагивается. */
@media (max-width: 860px) {
  html body .pet-card,
  html body .pet-card__body,
  html body .pet-card__title,
  html body .pet-card__meta,
  html body .pet-card__foot,
  html body .pet-card__share {
    background: #FFFFFF !important;
    background-image: none !important;
    color: #2A1A15 !important;
  }

  html body .pet-card {
    border-color: #EFE4DD !important;
    box-shadow: 0 8px 22px rgba(60, 32, 24, 0.12) !important;
  }

  html body .pet-card__title,
  html body .pet-card__title h3,
  html body .pet-card__title .muted,
  html body .pet-card__link,
  html body .pet-card__meta,
  html body .pet-card__desc,
  html body .pet-card__loc,
  html body .pet-card__reviews,
  html body .pet-card__reviews > span,
  html body .pet-card__body small,
  html body .pet-card__body b,
  html body .pet-card__body strong {
    color: #2A1A15 !important;
    -webkit-text-fill-color: #2A1A15 !important;
  }

  html body .pet-card__desc,
  html body .pet-card__loc,
  html body .pet-card__reviews,
  html body .pet-card__reviews > span:last-child,
  html body .pet-card__body small,
  html body .pet-card__title .muted {
    color: #6E5A52 !important;
    -webkit-text-fill-color: #6E5A52 !important;
  }

  html body .pet-card__meta .tag,
  html body .pet-card__meta .chip {
    background: #F6EAE1 !important;
    background-image: none !important;
    border-color: #E6D6CC !important;
    color: #4E3A33 !important;
    -webkit-text-fill-color: #4E3A33 !important;
  }

  html body .pet-card__share .pet-share,
  html body .pet-card__share button,
  html body .pet-card__share a {
    background: #FFFFFF !important;
    background-image: none !important;
    border-color: #E6D6CC !important;
    color: #4E3A33 !important;
    -webkit-text-fill-color: #4E3A33 !important;
  }

  html body .pet-card__foot {
    border-top-color: #EFE4DD !important;
  }
}

/* Светлая мобильная панель меню и страница объявления.
   app-install.css исторически задавал меню тёмным с !important, поэтому
   правила размещены последними и имеют не меньшую специфичность. */
@media (max-width: 860px) {
  html body .nav.is-open,
  html body #nav.is-open {
    background: #FFFFFF !important;
    background-image: none !important;
    border-bottom: 1px solid #EFE4DD !important;
    box-shadow: 0 18px 42px rgba(60, 32, 24, 0.16) !important;
  }
  html body .nav.is-open .nav__panel,
  html body #nav.is-open .nav__panel {
    background: #FFFFFF !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  html body .nav.is-open a,
  html body .nav.is-open .nav__panel a,
  html body #nav.is-open a {
    color: #2A1A15 !important;
    -webkit-text-fill-color: #2A1A15 !important;
    background: transparent !important;
    border-color: transparent !important;
  }
  html body .nav.is-open a:active,
  html body .nav.is-open a:hover,
  html body .nav.is-open a:focus-visible {
    background: #FDF0EA !important;
    color: #A34232 !important;
    -webkit-text-fill-color: #A34232 !important;
  }
  html body .nav.is-open .nav__panel-head {
    background: #FFFFFF !important;
    border-bottom-color: #EFE4DD !important;
  }
  html body .nav.is-open .nav__panel-title {
    color: #2A1A15 !important;
    -webkit-text-fill-color: #2A1A15 !important;
  }
  html body .nav.is-open .nav__act {
    color: #4E3A33 !important;
    -webkit-text-fill-color: #4E3A33 !important;
    background: #F6EAE1 !important;
    border-color: #E6D6CC !important;
  }
  html body .nav.is-open .nav__note,
  html body .nav.is-open .nav__foot,
  html body .nav.is-open .nav__panel p {
    color: #7D6860 !important;
    -webkit-text-fill-color: #7D6860 !important;
  }
  html body .nav.is-open .ico {
    color: #E3124C !important;
  }

  html body.page-pet,
  html body.page-pet #main,
  html body.page-pet #main > section,
  html body.page-pet #main > section.section,
  html body.page-pet #main > section.page-hero,
  html body.page-pet #main .pet-layout,
  html body.page-pet #main .prose,
  html body.page-pet #main .side {
    background: #FFFCF8 !important;
    background-image: none !important;
    color: #2A1A15 !important;
  }
  html body.page-pet #main .h-l,
  html body.page-pet #main .h-m,
  html body.page-pet #main h1,
  html body.page-pet #main h2,
  html body.page-pet #main h3,
  html body.page-pet #main p,
  html body.page-pet #main li,
  html body.page-pet #main a,
  html body.page-pet #main .crumbs,
  html body.page-pet #main .crumbs a {
    color: #2A1A15 !important;
    -webkit-text-fill-color: #2A1A15 !important;
  }
  html body.page-pet #main .muted,
  html body.page-pet #main .lead,
  html body.page-pet #main .spec dt {
    color: #7D6860 !important;
    -webkit-text-fill-color: #7D6860 !important;
  }
}


/* ============================================================
   Карточка объявления на телефоне: светлая тема без чёрных плашек.
   Мобильная тёмная тема (app-install.css) красила .tag, .ad-slot и
   кнопки в почти чёрный, а более поздние правки перекрасили текст в
   тёмный — получалось «тёмное на тёмном». Здесь задаём и фон, и текст
   сразу, с id-специфичностью, чтобы перекрыть любой слой выше.
   Не затрагиваем: шапку, нижнее меню, подвал и счётчик кадров на фото.
   ============================================================ */
@media (max-width: 860px) {
  /* Плашки: тип, срочность, дата, просмотры. */
  html body.page-pet #main .tag {
    background: #FCF6F0 !important;
    background-image: none !important;
    border: 1px solid #EFE4DD !important;
    color: #4E3A33 !important;
    -webkit-text-fill-color: #4E3A33 !important;
  }
  html body.page-pet #main .tag :is(svg,use,.ico) { color: #A34232 !important; }
  html body.page-pet #main .tag--urgent,
  html body.page-pet #main .tag--danger {
    background: #E3124C !important;
    border-color: #E3124C !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
  }
  html body.page-pet #main .tag--success {
    background: #17784E !important;
    border-color: #17784E !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
  }
  html body.page-pet #main .tag--brand {
    background: #FDF0EA !important;
    border-color: #F4D3C6 !important;
    color: #C40B3E !important;
    -webkit-text-fill-color: #C40B3E !important;
  }

  /* Хлебные крошки, заголовок, адрес. */
  html body.page-pet #main .crumbs,
  html body.page-pet #main .crumbs span { color: #7D6860 !important; -webkit-text-fill-color: #7D6860 !important; }
  html body.page-pet #main .crumbs a { color: #A34232 !important; -webkit-text-fill-color: #A34232 !important; }
  html body.page-pet #main .page-hero .h-l,
  html body.page-pet #main .page-hero h1 { color: #1E120D !important; -webkit-text-fill-color: #1E120D !important; }
  html body.page-pet #main .page-hero .lead,
  html body.page-pet #main .page-hero p { color: #6B564D !important; -webkit-text-fill-color: #6B564D !important; }

  /* Секция и колонки. */
  html body.page-pet #main > .section,
  html body.page-pet #main > .section > .container,
  html body.page-pet #main .pet-layout,
  html body.page-pet #main .pet-layout .prose,
  html body.page-pet #main .pet-layout .side {
    background: #FFFCF8 !important;
    background-image: none !important;
    color: #2A1A15 !important;
  }

  /* Белые поверхности: карточки, характеристики, отзывы, форма. */
  html body.page-pet #main .card,
  html body.page-pet #main .reviews-card,
  html body.page-pet #main .reviews-write,
  html body.page-pet #main .comment,
  html body.page-pet #main .spec > div {
    background: #FFFFFF !important;
    background-image: none !important;
    border-color: #EFE4DD !important;
    color: #2A1A15 !important;
  }
  html body.page-pet #main .spec > div { background: #FCF6F0 !important; }
  html body.page-pet #main .spec dt,
  html body.page-pet #main .muted,
  html body.page-pet #main .reviews-rating__meta { color: #7D6860 !important; -webkit-text-fill-color: #7D6860 !important; }
  html body.page-pet #main .spec dd,
  html body.page-pet #main .card :is(h1,h2,h3,h4,h5,h6,p,li,b,strong,small,span,label),
  html body.page-pet #main .curator__name { color: #2A1A15 !important; -webkit-text-fill-color: #2A1A15 !important; }

  /* Рекламный слот больше не чёрный прямоугольник. */
  html body.page-pet #main .ad-slot {
    background: #FCF6F0 !important;
    background-image: none !important;
    border: 1px solid #EFE4DD !important;
  }

  /* Кнопки и иконки. */
  html body.page-pet #main .btn--ghost {
    background: #FFFFFF !important;
    border-color: #E6D6CC !important;
    color: #4E3A33 !important;
    -webkit-text-fill-color: #4E3A33 !important;
  }
  html body.page-pet #main .btn--primary {
    background: #E3124C !important;
    border-color: #E3124C !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
  }
  html body.page-pet #main .btn--success {
    background: #17784E !important;
    border-color: #17784E !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
  }
  html body.page-pet #main .icon-box {
    background: #FCF6F0 !important;
    color: #E3124C !important;
  }

  /* Поля ввода. */
  html body.page-pet #main .input,
  html body.page-pet #main .textarea,
  html body.page-pet #main .select,
  html body.page-pet #main select {
    background: #FFFFFF !important;
    border-color: #E6D6CC !important;
    color: #2A1A15 !important;
    -webkit-text-fill-color: #2A1A15 !important;
  }
}

@media (max-width: 860px) {
  html body.page-pet #main #comment-text,
  html body.page-pet #main .comment-form__input,
  html body.page-pet #main .reviews-form input,
  html body.page-pet #main .reviews-form textarea,
  html body.page-pet #main .field input,
  html body.page-pet #main .field textarea {
    background: #FFFFFF !important;
    border-color: #E6D6CC !important;
    color: #2A1A15 !important;
    -webkit-text-fill-color: #2A1A15 !important;
  }
  html body.page-pet #main .field label,
  html body.page-pet #main .field__label,
  html body.page-pet #main .reviews-form__title {
    color: #4E3A33 !important;
    -webkit-text-fill-color: #4E3A33 !important;
  }
}

@media (max-width: 860px) {
  /* Шапка карточки: кремовый фон вместо чёрной полосы. */
  html body.page-pet #main .page-hero {
    background: #FFFCF8 !important;
    background-image: linear-gradient(180deg, #FFF8F3 0%, #FFFCF8 100%) !important;
    border-bottom: 1px solid #EFE4DD !important;
    color: #2A1A15 !important;
  }
  html body.page-pet #main .page-hero::before,
  html body.page-pet #main .page-hero::after { background: none !important; opacity: 0 !important; }
}


/* ============================================================
   Точечные исправления контраста (20.10.2026, после рендер-аудита).
   ============================================================ */
@media (max-width: 860px) {
  /* Cookie-плашка тёмная — кнопка в ней должна быть светлой. */
  #analytics-consent .btn--ghost,
  .analytics-consent .btn--ghost {
    background: transparent !important;
    border-color: rgba(255, 255, 255, .38) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
  }

  /* Счётчик кадров на фото — тёмная пилюля, читаемая на любом снимке. */
  .pg__counter {
    background: rgba(20, 19, 26, .72) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    border-radius: 999px !important;
  }

  /* Бейдж «Срочно» на карте: белый текст на красном, а не коричневый. */
  .gis-badge--urgent {
    background: #E3124C !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
  }
  .gis-badge--lost { color: #A92F25 !important; }
  .gis-badge--found { color: #1F7048 !important; }

  /* Заголовки внутри белых карточек не должны наследовать белый цвет. */
  .card > h1, .card > h2, .card > h3, .card > h4,
  .card h3.h-m, .card h2.h-l, .card h1.h-xl {
    color: #1E120D !important;
    -webkit-text-fill-color: #1E120D !important;
  }

  /* Подписи-акценты на светлых экранах. */
  .page-add b, .page-add strong { color: #C40B3E !important; -webkit-text-fill-color: #C40B3E !important; }
}


@media (max-width: 860px) {
  /* Кнопка «Разместить» в нижнем меню — красная пилюля с белым текстом. */
  .tabbar__item[href="/add"],
  .tabbar__item[href="/add"] span {
    background-image: linear-gradient(135deg, #D6533A 0%, #B8372A 100%) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
  }
  /* Шапка страницы приютов: тёмный текст на светлом фоне. */
  .page-hero .eyebrow,
  .page-hero h1, .page-hero h2, .page-hero h3,
  .page-hero .h-l, .page-hero .h-m,
  .page-hero p, .page-hero .lead { color: inherit !important; -webkit-text-fill-color: currentColor !important; }
}


@media (max-width: 860px) {
  /* Мастер «Отдам в добрые руки» намеренно тёмный — текст внутри светлый. */
  .lw b, .lw strong, .lw #lw-progress-meta {
    color: #F6E9E1 !important;
    -webkit-text-fill-color: #F6E9E1 !important;
  }
  .lw p, .lw li, .lw label, .lw small { color: rgba(246,233,225,.82) !important; }
}


/* 20.10.2026: хлебные крошки и подписи статистики больше не белые на светлом. */
@media (max-width: 860px) {
  .crumbs, .crumbs li, .crumbs span { color: #7D6860 !important; -webkit-text-fill-color: #7D6860 !important; }
  .crumbs a { color: #A34232 !important; -webkit-text-fill-color: #A34232 !important; }
  .stat__label { color: #7D6860 !important; -webkit-text-fill-color: #7D6860 !important; }
  .stat__value, .stat b, .stat strong { color: #1E120D !important; -webkit-text-fill-color: #1E120D !important; }
}


@media (max-width: 860px) {
  html body #main .crumbs,
  html body #main .crumbs li,
  html body #main .crumbs span { color: #7D6860 !important; -webkit-text-fill-color: #7D6860 !important; }
  html body #main .crumbs a { color: #A34232 !important; -webkit-text-fill-color: #A34232 !important; }
  html body #main .stat__label { color: #7D6860 !important; -webkit-text-fill-color: #7D6860 !important; }
  html body #main .stat__value { color: #1E120D !important; -webkit-text-fill-color: #1E120D !important; }
}


/* ============================================================
   20.10.2026. Светлая шапка, нижнее меню и блог.
   Тёмная тема app-install.css красила .header и .tabbar в чёрный,
   а страницы блога — в тёмный фон с белым текстом.
   ============================================================ */
@media (max-width: 860px) {
  /* Шапка */
  html body .header {
    background: rgba(255, 252, 248, .97) !important;
    border-bottom: 1px solid #EFE4DD !important;
    box-shadow: 0 4px 16px rgba(43, 24, 19, .06) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
  }
  html body .header__logo,
  html body .header__logo *,
  html body .header .logo,
  html body .header .logo *,
  html body .header__city,
  html body .header__nav a,
  html body .header__link { color: #1E120D !important; -webkit-text-fill-color: #1E120D !important; }
  html body .header .burger {
    color: #4E3A33 !important;
    background: #FFFFFF !important;
    border-color: #EFE4DD !important;
  }
  html body .header .burger__bars i { background: #4E3A33 !important; }

  /* Нижнее меню */
  html body .tabbar {
    background: rgba(255, 252, 248, .98) !important;
    border-top: 1px solid #EFE4DD !important;
    box-shadow: 0 -4px 18px rgba(43, 24, 19, .07) !important;
  }
  html body .tabbar__item { color: #7D6860 !important; -webkit-text-fill-color: #7D6860 !important; }
  html body .tabbar__item .tabbar__ico { color: #A08C80 !important; }
  html body .tabbar__item.is-active { color: #E3124C !important; -webkit-text-fill-color: #E3124C !important; }
  html body .tabbar__item.is-active .tabbar__ico { color: #E3124C !important; }

  /* Блог: светлый фон и тёмный текст */
  html body.page-blog,
  html body.page-blog #main,
  html body.page-blog .section,
  html body.page-blog .bl-hero {
    background: #FFFCF8 !important;
    background-image: none !important;
    color: #2A1A15 !important;
  }
  html body.page-blog :is(h1, h2, h3, h4, .h-xl, .h-l, .h-m, .bl-hero__title, .bl-post__title, .bl-mini b, .bl-side__card h2) {
    color: #1E120D !important;
    -webkit-text-fill-color: #1E120D !important;
  }
  html body.page-blog :is(p, .lead, .muted, .bl-hero__lead, .bl-post__meta, .bl-post__meta span, .bl-mini span, .bl-comments__note) {
    color: #6B564D !important;
    -webkit-text-fill-color: #6B564D !important;
  }
  html body.page-blog :is(.bl-list__item, .bl-side__card, .bl-mini, .bl-rubric-card, .card, .bl-talk) {
    background: #FFFFFF !important;
    border-color: #EFE4DD !important;
  }
  html body.page-blog :is(.bl-talk input, .bl-talk textarea, .bl-comment-form input, .bl-comment-form textarea) {
    background: #FFFFFF !important;
    color: #2A1A15 !important;
    -webkit-text-fill-color: #2A1A15 !important;
    border-color: #E6D6CC !important;
  }
  html body.page-blog :is(.bl-share__btn, .bl-share__btn--vk) {
    background: #FFFFFF !important;
    border-color: #E6D6CC !important;
    color: #4E3A33 !important;
  }
}

/* ============================================================
   20.10.2026. Светлое выпадающее меню.
   app-install.css красил шторку меню в #0F0E13 с белыми пунктами;
   на светлой шапке это выглядело чёрной дырой. Селекторы с #header-bar
   и #nav перебивают app-install по весу, файл подключён последним.
   ============================================================ */
@media (max-width: 860px) {
  html body #header-bar nav.nav,
  html body #header-bar nav.nav.is-open,
  html body #nav.is-open,
  html body .nav.is-open {
    background: #FFFCF8 !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 1px solid #EFE4DD !important;
    border-radius: 0 !important;
    box-shadow: 0 24px 60px rgba(43, 24, 19, .16) !important;
  }
  html body #header-bar nav.nav a,
  html body #header-bar nav.nav .nav__more-btn,
  html body .nav.is-open a,
  html body .nav.is-open .nav__panel a,
  html body #nav.is-open a {
    color: #2A1A15 !important;
    -webkit-text-fill-color: #2A1A15 !important;
  }
  html body .nav.is-open a:active { background: rgba(227, 18, 76, .08) !important; }
  html body #header-bar nav.nav .ico,
  html body .nav.is-open .ico { color: #B4553C !important; }
  html body .nav__panel-head { border-bottom: 1px solid #EFE4DD !important; }
  html body .nav__panel-title { color: #1E120D !important; -webkit-text-fill-color: #1E120D !important; }
  html body .nav__act {
    color: #4E3A33 !important;
    background: #F7EFE9 !important;
    border: 1px solid #EFE4DD !important;
  }
  html body .nav__note,
  html body .nav__foot,
  html body .nav__panel p { color: #7D6860 !important; }
  html body .nav__panel hr,
  html body .nav hr { border: 0 !important; border-top: 1px solid #EFE4DD !important; }
  html body #header-bar nav.nav a.is-active,
  html body #nav a.is-active,
  html body .nav.is-open a.is-active {
    color: #A92F25 !important;
    -webkit-text-fill-color: #A92F25 !important;
    background: rgba(227, 18, 76, .10) !important;
  }
  html body.is-nav-open::after { background: rgba(30, 18, 13, .28) !important; }
}

/* 20.10.2026. Нижнее меню: колонки 1fr растягивались по содержимому,
   и «Разместить» уезжало за правый край экрана. */
@media (max-width: 860px) {
  html body .tabbar { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  html body .tabbar__item { min-width: 0 !important; overflow: hidden !important; }
  html body .tabbar__item > span,
  html body .tabbar__item > b {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  html body .tabbar__item[href="/add"] {
    margin: 1px 0 !important;
    padding: 3px 4px !important;
    font-size: 9px !important;
    letter-spacing: -.01em !important;
  }
}

/* 20.10.2026. Вторичная кнопка в плашке cookie была белой на белом,
   а подпись «Разместить» в нижнем меню не влезала в колонку. */
@media (max-width: 860px) {
  html body .analytics-consent__actions .btn--ghost,
  html body .analytics-consent__actions .btn:not(.btn--primary) {
    background: #F7EFE9 !important;
    color: #4E3A33 !important;
    -webkit-text-fill-color: #4E3A33 !important;
    border: 1px solid #EFE4DD !important;
  }
  html body .tabbar__item[href="/add"] {
    font-size: 8.5px !important;
    letter-spacing: -.02em !important;
    padding: 3px 2px !important;
  }
}

/* 20.10.2026. Текст вторичной кнопки плашки cookie был белым на белом:
   подписи мешали правила с id-весом, поэтому селектор тоже с #analytics-consent. */
@media (max-width: 860px) {
  html body #analytics-consent .analytics-consent__actions .btn,
  html body #analytics-consent .analytics-consent__actions .btn--ghost {
    background: #F7EFE9 !important;
    color: #4E3A33 !important;
    -webkit-text-fill-color: #4E3A33 !important;
    border: 1px solid #E6D6CC !important;
  }
  html body #analytics-consent .analytics-consent__actions .btn--primary {
    background: #E3124C !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    border: 1px solid #E3124C !important;
  }
  html body .tabbar__item[href="/add"] { font-size: 8px !important; letter-spacing: -.03em !important; }
}

/* 20.10.2026. Кнопка «Поделиться» в карточке объявления была почти чёрной,
   а подпись — красной на красном: возвращаем белый текст и фирменную заливку. */
@media (max-width: 860px) {
  html body .pet-card .listing-share-cta,
  html body .pet-card .listing-share-cta * {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
  }
  html body .pet-card .listing-share-cta {
    background: #E3124C !important;
    background-image: linear-gradient(135deg, #E3124C 0%, #D40A3F 100%) !important;
    border: 1px solid rgba(227, 18, 76, .22) !important;
    box-shadow: 0 9px 20px rgba(227, 18, 76, .18) !important;
  }
  html body .pet-card .listing-share-cta__icon { background: rgba(255, 255, 255, .18) !important; }
  html body .pet-card .listing-share-cta__icon svg { stroke: #FFFFFF !important; }
  html body .pet-card button:not(.listing-share-cta) {
    background: #FFFFFF !important;
    background-image: none !important;
    color: #4E3A33 !important;
    -webkit-text-fill-color: #4E3A33 !important;
    border: 1px solid #EFE4DD !important;
  }
  html body .pet-card button:not(.listing-share-cta) svg { stroke: #4E3A33 !important; }
}

/* 20.10.2026. Круглые кнопки-стрелки у адресов в карточке объявления
   (класс .pet-card__cue) были почти чёрными — делаем белыми. */
@media (max-width: 860px) {
  html body .pet-card__cue {
    background: #FFFFFF !important;
    background-image: none !important;
    color: #4E3A33 !important;
    -webkit-text-fill-color: #4E3A33 !important;
    border: 1px solid #EFE4DD !important;
    box-shadow: 0 4px 12px rgba(43, 24, 19, .08) !important;
  }
  html body .pet-card__cue svg { stroke: #4E3A33 !important; fill: none !important; }
  html body .pet-card__cue:hover { background: #F7EFE9 !important; }
}

/* ============================================================
   20.10.2026. Единый цвет кнопок: яркий малиново-красный градиент
   (как на согласованном образце). Меняются только заливки кнопок —
   текстовые акценты сайта остаются в тёплой терракотовой гамме.
   Файл подключён последним, поэтому block перекрывает style.css.
   ============================================================ */
:root{
  --btn-brand:#E3124C;
  --btn-brand-deep:#D40A3F;
  --btn-brand-light:#F3185B;
  --btn-brand-press:#BF0836;
  --btn-brand-shadow:rgba(227,18,76,.26);
}

html body .btn--primary.btn--primary,
html body .header__cta .btn--primary.btn--primary,
html body .header__lost-main.header__lost-main,
html body .mp-search__row button,
html body .listing-share-cta.listing-share-cta,
html body .tabbar__item[href="/add"],
html body .ful .btn--primary,
html body .fab,
html body .kl-tab.is-on,
html body .share-modal__action--system,
html body .btn.btn--brand,
html body .hero .btn--primary.btn--primary{
  background:#E3124C !important;
  background-image:linear-gradient(135deg,#F3185B 0%,#D40A3F 100%) !important;
  border-color:#D40A3F !important;
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
  box-shadow:0 8px 20px var(--btn-brand-shadow) !important;
}

html body .btn--primary.btn--primary:hover,
html body .header__cta .btn--primary.btn--primary:hover,
html body .header__lost-main.header__lost-main:hover,
html body .mp-search__row button:hover,
html body .listing-share-cta.listing-share-cta:hover,
html body .tabbar__item[href="/add"]:hover,
html body .fab:hover,
html body .kl-tab.is-on:hover,
html body .share-modal__action--system:hover,
html body .btn.btn--brand:hover,
html body .hero .btn--primary.btn--primary:hover{
  background:#D40A3F !important;
  background-image:linear-gradient(135deg,#E3124C 0%,#BF0836 100%) !important;
  border-color:#BF0836 !important;
  box-shadow:0 12px 26px rgba(227,18,76,.32) !important;
}

html body .btn--primary.btn--primary:active,
html body .header__lost-main.header__lost-main:active,
html body .listing-share-cta.listing-share-cta:active,
html body .tabbar__item[href="/add"]:active,
html body .mp-search__row button:active{
  background:#BF0836 !important;
  background-image:none !important;
  border-color:#BF0836 !important;
}

/* Иконка внутри «Поделиться» и круглые кнопки-стрелки остаются читаемыми */
html body .listing-share-cta svg{stroke:#FFFFFF !important}
html body .listing-share-cta__icon{background:rgba(255,255,255,.18) !important}
html body .tabbar__item[href="/add"] svg{stroke:#FFFFFF !important}

/* 20.10.2026. Активная вкладка в шапке: раньше попадала в список кнопок
   и получала белый текст на светлом фоне — надпись пропадала.
   Теперь это тёмно-малиновый текст с мягкой подложкой, без «пилюли». */
@media (min-width: 861px) {
  html body .header .nav a.is-active,
  html body #header-bar nav.nav a.is-active {
    background: #FDE9F0 !important;
    background-image: none !important;
    color: #B80D3C !important;
    -webkit-text-fill-color: #B80D3C !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
  html body .header .nav a.is-active:hover,
  html body #header-bar nav.nav a.is-active:hover {
    background: #FADCE7 !important;
    color: #96072E !important;
    -webkit-text-fill-color: #96072E !important;
  }
}