/* ============================================================
   Главная, мобильная версия — палитра как на компьютере.
   Блок 1: шапка, выдвижное меню, нижнее меню.
   Только цвета: фон и цвет текста. Отступы, размеры и сетки
   не задаются, поэтому вёрстка не меняется.
   Значения сняты с компьютерной версии (1440px).
   ============================================================ */

@media (max-width: 860px) {
  /* Шапка: белая полупрозрачная, как на компьютере. */
  html body.page-home .header,
  html body.page-home .header.header,
  html body.page-home #header-bar,
  html body.page-home div#header-bar.header {
    background-color: rgba(255, 255, 255, 0.97) !important;
  }
  html body.page-home .header__inner { background-color: transparent !important; }

  /* Логотип и подпись под ним. */
  html body.page-home a.logo,
  html body.page-home .logo { color: #111111 !important; }
  html body.page-home a.brand-m,
  html body.page-home .brand-m,
  html body.page-home #header-bar .brand-m { color: #1E120D !important; }
  /* Части логотипа: название тёмное, «Heart» — фирменный красный. */
  html body.page-home .brand-m__text,
  html body.page-home .brand-m__name,
  html body.page-home #header-bar .brand-m__name { color: #1E120D !important; }
  html body.page-home .brand-m__name b,
  html body.page-home .brand-m b,
  html body.page-home #header-bar .brand-m b { color: #E3124C !important; }
  html body.page-home .brand-m__sub,
  html body.page-home #header-bar .brand-m__sub { color: #1E120D !important; }

  /* Выдвижное меню — светлая панель. */
  html body.page-home nav.nav,
  html body.page-home .nav { background-color: #FFFFFF !important; }
  html body.page-home .nav a,
  html body.page-home .nav__link { color: #1E120D !important; }

  /* Нижнее меню: белая панель, серые подписи, красный активный пункт. */
  html body.page-home .tabbar,
  html body.page-home .tabbar.tabbar { background-color: #FFFFFF !important; }
  html body.page-home .tabbar__item,
  html body.page-home .tabbar__item.tabbar__item { color: #7D6860 !important; }
  html body.page-home .tabbar__item.is-active,
  html body.page-home .tabbar__item[aria-current="page"] { color: #E3124C !important; }
  /* Иконки наследуют цвет пункта: красный у активного, серый у остальных. */
  html body.page-home .tabbar__ico { color: currentColor !important; }

  /* Иконки и кнопки шапки — значения с компьютерной версии. */
  html body.page-home .burger,
  html body.page-home .burger.burger {
    color: rgb(168, 50, 31) !important;
    background-color: rgba(255, 255, 255, 0.82) !important;
  }
  html body.page-home .burger__bars,
  html body.page-home .burger__bars.burger__bars { color: rgb(168, 50, 31) !important; }

  html body.page-home .icon-btn,
  html body.page-home .icon-btn.icon-btn { color: rgb(169, 54, 38) !important; }
  html body.page-home .icon-btn__box,
  html body.page-home .icon-btn__box.icon-btn__box { background-color: rgb(255, 240, 234) !important; }
  html body.page-home .icon-btn__label { color: rgb(107, 83, 72) !important; }

  html body.page-home .ya-btn,
  html body.page-home .ya-btn.ya-btn {
    background-color: rgb(255, 240, 234) !important;
    color: rgb(30, 18, 13) !important;
  }
  html body.page-home .ya-btn__text { color: rgb(30, 18, 13) !important; }

  /* Панель меню. */
  html body.page-home .nav__panel-title,
  html body.page-home .nav__auth { color: rgb(30, 18, 13) !important; }
  html body.page-home .nav__item,
  html body.page-home .nav__item.nav__item { color: rgb(201, 74, 53) !important; }
  html body.page-home .nav__act,
  html body.page-home .nav__act.nav__act {
    color: rgb(30, 18, 13) !important;
    background-color: rgb(239, 239, 239) !important;
  }

  /* ===== Компоненты по замерам ===== */
  html body.page-home #main article.community-review-card,
  html body.page-home #main blockquote.review-card__quote,
  html body.page-home #main details.footer__acc,
  html body.page-home #main div.community-rating__main,
  html body.page-home #main div.community-reviews__dashboard,
  html body.page-home #main div.cta-band,
  html body.page-home #main div.hero__intro,
  html body.page-home #main div.misha-intro__box,
  html body.page-home #main div.mp-search__quick,
  html body.page-home #main div.pet-card__body,
  html body.page-home #main div.review-card__head,
  html body.page-home #main div.site-review-form__fields,
  html body.page-home #main footer.review-card__author,
  html body.page-home #main form.mp-search__row,
  html body.page-home #main form.site-review-form,
  html body.page-home #main section.community-rating,
  html body.page-home #main section.community-review-form-card,
  html body.page-home #main section.community-review-list-wrap,
  html body.page-home #main section.container,
  html body.page-home #main section.hero {
    background-color: transparent !important;
  }
  html body.page-home #main a.pet-card__link,
  html body.page-home #main div.ms-chips,
  html body.page-home #main div.ms-cloud__body,
  html body.page-home #main div.ms-foot,
  html body.page-home #main div.pet-card__title,
  html body.page-home #main div.stat__num,
  html body.page-home #main label.site-review-field,
  html body.page-home #main label.site-review-rating__choice,
  html body.page-home #main span.review-card__byline,
  html body.page-home #main span.site-review-stars {
    color: rgb(30, 18, 13) !important;
    -webkit-text-fill-color: rgb(30, 18, 13) !important;
  }
  html body.page-home #main a.card,
  html body.page-home #main a.quick__item,
  html body.page-home #main article.pet-card,
  html body.page-home #main article.review-card,
  html body.page-home #main div.stat,
  html body.page-home #main div.stats,
  html body.page-home #main section.mp-search,
  html body.page-home #main textarea.ms-input {
    background-color: rgb(255, 255, 255) !important;
  }
  html body.page-home #main p.community-rating__note,
  html body.page-home #main p.site-review-form__privacy,
  html body.page-home #main span.site-review-rating__hint {
    color: rgb(133, 112, 102) !important;
    -webkit-text-fill-color: rgb(133, 112, 102) !important;
  }
  html body.page-home #main span.community-review-card__topic,
  html body.page-home #main span.review-card__avatar,
  html body.page-home #main span.review-card__label {
    background-color: rgb(255, 240, 234) !important;
    color: rgb(169, 54, 38) !important;
    -webkit-text-fill-color: rgb(169, 54, 38) !important;
  }
  html body.page-home #main span.footer-app-card__subtitle,
  html body.page-home #main span.footer-app-card__title,
  html body.page-home #main summary.footer__acc-head {
    color: rgb(220, 206, 197) !important;
    -webkit-text-fill-color: rgb(220, 206, 197) !important;
  }
  html body.page-home #main div.hero__community,
  html body.page-home #main div.ms-cloud,
  html body.page-home #main div.stat__label {
    background-color: transparent !important;
    color: rgb(30, 18, 13) !important;
    -webkit-text-fill-color: rgb(30, 18, 13) !important;
  }
  html body.page-home #main h3.h-s,
  html body.page-home #main p.community-rating__count {
    color: rgb(125, 104, 96) !important;
    -webkit-text-fill-color: rgb(125, 104, 96) !important;
  }
  html body.page-home #main span.pet-card__loc,
  html body.page-home #main span.review-card__result-label {
    color: rgb(115, 93, 83) !important;
    -webkit-text-fill-color: rgb(115, 93, 83) !important;
  }
  html body.page-home #main span.community-review-card__stars,
  html body.page-home #main span.site-review-stars__fill {
    color: rgb(217, 54, 62) !important;
    -webkit-text-fill-color: rgb(217, 54, 62) !important;
  }
  html body.page-home #main button.pet-card__fav {
    background-color: rgba(255, 255, 255, 0.95) !important;
  }
  html body.page-home #main div.header {
    background-color: rgba(255, 255, 255, 0.97) !important;
  }
  html body.page-home #main button.hero-stories__arrow {
    background-color: rgba(255, 255, 255, 0.1) !important;
  }
  html body.page-home #main div.muted {
    color: rgb(107, 83, 72) !important;
    -webkit-text-fill-color: rgb(107, 83, 72) !important;
  }
  html body.page-home #main div.pet-card__media {
    background-color: rgb(237, 240, 243) !important;
  }
  html body.page-home #main p.community-review-card__text {
    color: rgb(74, 53, 44) !important;
    -webkit-text-fill-color: rgb(74, 53, 44) !important;
  }
  html body.page-home #main p.ms-note {
    background-color: rgba(255, 255, 255, 0.94) !important;
    color: rgb(107, 90, 82) !important;
    -webkit-text-fill-color: rgb(107, 90, 82) !important;
  }
  html body.page-home #main button.ya-btn {
    background-color: rgb(255, 240, 234) !important;
    color: rgb(30, 18, 13) !important;
    -webkit-text-fill-color: rgb(30, 18, 13) !important;
  }
  html body.page-home #main p.community-review-form-card__lead {
    color: rgb(138, 117, 104) !important;
    -webkit-text-fill-color: rgb(138, 117, 104) !important;
  }
  html body.page-home #main span.site-review-stars__empty {
    color: rgba(43, 24, 19, 0.18) !important;
    -webkit-text-fill-color: rgba(43, 24, 19, 0.18) !important;
  }
  html body.page-home #main div.petbot-scan {
    background-color: rgba(13, 22, 39, 0.74) !important;
  }
  html body.page-home #main button.ms-hide {
    background-color: rgb(255, 255, 255) !important;
    color: rgb(107, 90, 82) !important;
    -webkit-text-fill-color: rgb(107, 90, 82) !important;
  }
  html body.page-home #main span.ms-cloud__fill {
    background-color: rgb(253, 246, 241) !important;
  }
  html body.page-home #main a.footer-app-card {
    background-color: rgba(255, 255, 255, 0.04) !important;
  }
  html body.page-home #main span.review-card__quote-mark {
    color: rgb(201, 74, 53) !important;
    -webkit-text-fill-color: rgb(201, 74, 53) !important;
  }
  html body.page-home #main small.site-review-field__counter {
    color: rgb(97, 74, 64) !important;
    -webkit-text-fill-color: rgb(97, 74, 64) !important;
  }
  html body.page-home #main div.stat__sub {
    background-color: transparent !important;
    color: rgb(115, 93, 83) !important;
    -webkit-text-fill-color: rgb(115, 93, 83) !important;
  }
  html body.page-home #main div.review-card__result {
    background-color: rgb(250, 244, 236) !important;
  }
  html body.page-home #main h1.h-xl {
    color: rgb(26, 15, 11) !important;
    -webkit-text-fill-color: rgb(26, 15, 11) !important;
  }
  html body.page-home #main footer.footer {
    background-color: rgb(28, 16, 11) !important;
  }
  html body.page-home #main div.avatars {
    color: rgb(83, 97, 114) !important;
    -webkit-text-fill-color: rgb(83, 97, 114) !important;
  }
  html body.page-home #main label.site-review-consent {
    background-color: transparent !important;
    color: rgb(138, 117, 104) !important;
    -webkit-text-fill-color: rgb(138, 117, 104) !important;
  }
/* ===== Ручные правила для неоднозначных компонентов ===== */
  /* Светлый фон страницы. */
  html body.page-home {
    background-color: #FFFCF9 !important;
    color: #1E120D !important;
  }

  /* Контейнеры-«холсты»: прозрачные, чтобы был виден фон страницы. */
  html body.page-home #main section.hero,
  html body.page-home #main .hero.hero,
  html body.page-home #main .container,
  html body.page-home #main .hero__grid,
  html body.page-home #main .hero__intro { background-color: transparent !important; }

  /* Заголовки и основной текст. */
  html body.page-home #main h1,
  html body.page-home #main h2,
  html body.page-home #main h3,
  html body.page-home #main h4,
  html body.page-home #main .h-xl,
  html body.page-home #main .h-l,
  html body.page-home #main .h-m {
    color: #1E120D !important;
    -webkit-text-fill-color: #1E120D !important;
  }
  html body.page-home #main p.lead,
  html body.page-home #main .lead {
    color: #57423A !important;
    -webkit-text-fill-color: #57423A !important;
  }
  html body.page-home #main p,
  html body.page-home #main li {
    color: #3A2620 !important;
    -webkit-text-fill-color: #3A2620 !important;
  }

  /* Карточки объявлений. */
  html body.page-home #main article.pet-card,
  html body.page-home #main .pet-card {
    background-color: #FFFFFF !important;
    border-color: #EFE4DD !important;
  }
  html body.page-home #main .pet-card__media { background-color: #f6eae1 !important; }
  html body.page-home #main .pet-card__title,
  html body.page-home #main .pet-card__link,
  html body.page-home #main .pet-card__meta,
  html body.page-home #main .pet-card__loc {
    color: #1E120D !important;
    -webkit-text-fill-color: #1E120D !important;
  }

  /* Поиск и поля ввода. */
  html body.page-home #main section.mp-search {
    background-color: #FFFFFF !important;
    border-color: #EFE4DD !important;
  }
  html body.page-home #main input,
  html body.page-home #main select,
  html body.page-home #main textarea {
    background-color: #FFFFFF !important;
    color: #1E120D !important;
    -webkit-text-fill-color: #1E120D !important;
    border-color: #EFE4DD !important;
  }

  /* Вторичная кнопка: белая плашка, тёмный текст. */
  html body.page-home #main .btn--ghost,
  html body.page-home #main a.btn--ghost,
  html body.page-home .btn--ghost {
    color: #48352D !important;
    -webkit-text-fill-color: #48352D !important;
    background-color: #FFFFFF !important;
    border-color: rgba(160, 120, 95, 0.24) !important;
  }

  /* Надзаголовки. */
  html body.page-home #main .eyebrow,
  html body.page-home #main .eyebrow.eyebrow-xs,
  html body.page-home #main .eyebrow--brand {
    color: #E3124C !important;
    -webkit-text-fill-color: #E3124C !important;
  }
  html body.page-home #main .eyebrow--success {
    color: #2F7A58 !important;
    -webkit-text-fill-color: #2F7A58 !important;
  }
  html body.page-home #main .eyebrow--indigo {
    color: #5B4B8A !important;
    -webkit-text-fill-color: #5B4B8A !important;
  }

  /* Аватары-кружки: буквы остаются белыми на цветном фоне. */
  html body.page-home #main .avatars span,
  html body.page-home #main .avatars b {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
  }

  /* Лента новостей: светлая подложка вместо тёмной. */
  html body.page-home #main .hero-stories__content,
  html body.page-home #main .hero-stories__card,
  html body.page-home #main .hero-stories {
    background-color: #FFFFFF !important;
    border-color: #EFE4DD !important;
  }
  html body.page-home #main .hero-stories__content h2,
  html body.page-home #main .hero-stories__content p {
    color: #1E120D !important;
    -webkit-text-fill-color: #1E120D !important;
  }
  html body.page-home #main .hero-stories__content p { color: #57423A !important; -webkit-text-fill-color: #57423A !important; }

  /* Выделения внутри текста. */
  html body.page-home #main b,
  html body.page-home #main strong {
    color: #1E120D !important;
    -webkit-text-fill-color: #1E120D !important;
  }

  /* Все секции верхнего уровня прозрачные: светлый фон страницы виден насквозь. */
  html body.page-home #main > * {
    background-color: transparent !important;
  }
  /* Карточки и ленты внутри при этом остаются со своими подложками. */
  html body.page-home #main > article.pet-card,
  html body.page-home #main > .hero-stories__card { background-color: #FFFFFF !important; }

  /* Сам контейнер main тоже был тёмным — это и был «холст» страницы. */
  html body.page-home #main,
  html body.page-home main {
    background-color: transparent !important;
    color: #1E120D !important;
  }

  /* Блок-приглашение и статистика: светлая подложка, тёмный текст. */
  html body.page-home #main .petbot-callout,
  html body.page-home #main .stats,
  html body.page-home #main .stat {
    background-color: #FFFFFF !important;
    border-color: #EFE4DD !important;
  }
  html body.page-home #main .petbot-callout *,
  html body.page-home #main .stats * ,
  html body.page-home #main .stat * {
    color: #57423A !important;
    -webkit-text-fill-color: #57423A !important;
  }
  html body.page-home #main .stat__num {
    color: #1E120D !important;
    -webkit-text-fill-color: #1E120D !important;
  }
  /* Подписи внутри кнопок наследуют цвет кнопки. */
  html body.page-home #main .btn span,
  html body.page-home #main a.btn span,
  html body.page-home #main button span {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
  }

  /* Тёмная панель-сканер остаётся тёмной: текст в ней белый. */
  html body.page-home #main .petbot-scan,
  html body.page-home #main .petbot-scan *,
  html body.page-home #main .petbot-scan b,
  html body.page-home #main .petbot-scan span {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
  }
  /* Ссылки-карточки: текст тёмный на белом. */
  html body.page-home #main a.card span,
  html body.page-home #main a.card b,
  html body.page-home #main a.card strong {
    color: #1E120D !important;
    -webkit-text-fill-color: #1E120D !important;
  }
  /* Мелкие подписи и счётчики на светлых карточках. */
  html body.page-home #main small {
    color: #7D6860 !important;
    -webkit-text-fill-color: #7D6860 !important;
  }

  /* Счётчики в карточках объявлений. */
  html body.page-home #main .pet-card small,
  html body.page-home #main .pet-card .muted {
    color: #7D6860 !important;
    -webkit-text-fill-color: #7D6860 !important;
  }

  /* Hero во всю ширину экрана: фото идёт сразу под шапкой, без боковых полей.
     Текст при этом остаётся с прежним отступом 24 px. */
  html body.page-home #main .hero__intro {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
  }
  /* Секция не должна обрезать выступ. */
  html body.page-home #main section.hero,
  html body.page-home #main .hero__grid {
    overflow: visible !important;
  }

  /* Убираем верхний зазор: фото начинается сразу под шапкой. */
  html body.page-home #main section.hero {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  html body.page-home #main .hero__grid {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* Фото без градиентной подложки: тёмный край градиента читался как линия
     между шапкой и изображением. */
  html body.page-home #main .hero__intro {
    background-image: url("/assets/img/hero-banner-2026.jpg") !important;
    background-size: 100% auto !important;
    background-position: top center !important;
    background-repeat: no-repeat !important;
  }

  /* Тонкая градиентная полоса под шапкой — убираем: на светлой теме она
     читается как чёрная линия между меню и фотографией. */
  html body.page-home .header::after,
  html body.page-home #header-bar::after {
    display: none !important;
  }
  html body.page-home .header {
    border-bottom-color: transparent !important;
    box-shadow: none !important;
  }

  /* Обёртка шапки имеет тёмный фон, который выглядывал полосой 1 px
     между меню и фотографией. Фон обёртки делаем прозрачным. */
  html body.page-home #site-header {
    background-color: transparent !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  /* ===== Компактный поиск на главной: поле + кнопка фильтра ===== */
  /* Убираем большой блок: селект, быстрые ссылки и раскрытую панель. */
  html body.page-home #main .mp-search select,
  html body.page-home #main .mp-search__quick,
  html body.page-home #main .mp-search__panel { display: none !important; }

  /* Сама секция становится просто строкой без подложки. */
  html body.page-home #main section.mp-search {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  html body.page-home #main form.mp-search__row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  /* Поле: пилюля с иконкой лупы внутри. */
  html body.page-home #main .mp-search input {
    flex: 1 1 auto !important;
    width: auto !important;
    height: 50px !important;
    border-radius: 16px !important;
    border: 1px solid #EFE4DD !important;
    background-color: #FFFFFF !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A7568' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 16px center !important;
    background-size: 20px 20px !important;
    padding: 0 16px 0 46px !important;
    color: #1E120D !important;
    -webkit-text-fill-color: #1E120D !important;
    font-size: 15px !important;
    box-shadow: none !important;
  }
  html body.page-home #main .mp-search input::placeholder {
    color: #8A7568 !important;
    -webkit-text-fill-color: #8A7568 !important;
  }

  /* Кнопка справа: бежевый квадрат с иконкой ползунков. */
  html body.page-home #main .mp-search button[type="submit"] {
    flex: 0 0 50px !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    border-radius: 16px !important;
    border: 1px solid #EFE4DD !important;
    background-color: #F7ECE4 !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C4402F' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M4 7h10M18 7h2M4 17h4M12 17h8'/%3E%3Ccircle cx='16' cy='7' r='2.2'/%3E%3Ccircle cx='10' cy='17' r='2.2'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 22px 22px !important;

    -webkit-text-fill-color: transparent !important;
    font-size: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
  }
/* ===== Кнопки и иконки — в фирменный цвет ===== */
  /* Вторичные кнопки и служебные кнопки: фирменный красный текст и иконки. */
  html body[class*="page-"] #main .btn--ghost,
  html body[class*="page-"] #main a.btn--ghost,
  html body[class*="page-"] #main a.btn.btn--ghost,
  html body[class*="page-"] #main button:not(.btn--primary):not(.is-active),
  html body[class*="page-"] #main .ms-btn,
  html body[class*="page-"] #main .capp__filters,
  html body[class*="page-"] #main .fmore__close,
  html body[class*="page-"] #main .fmore__title {
    color: #E3124C !important;
    -webkit-text-fill-color: #E3124C !important;
  }

  /* Иконки внутри кнопок берут цвет кнопки. */
  html body[class*="page-"] #main button svg,
  html body[class*="page-"] #main a.btn svg,
  html body[class*="page-"] #main .pet-card__fav svg,
  html body[class*="page-"] #main .icon-btn svg,
  html body[class*="page-"] #main .ms-btn svg,
  html body[class*="page-"] #main .capp__filters svg {
    color: inherit !important;
    stroke: currentColor !important;
  }

  /* На фирменном фоне текст и иконки остаются белыми. */
  html body[class*="page-"] #main .btn--primary,
  html body[class*="page-"] #main .btn--primary *,
  html body[class*="page-"] #main .chip.is-active,
  html body[class*="page-"] #main .chip.is-active *,
  html body[class*="page-"] #main .alert-btn,
  html body[class*="page-"] #main .alert-btn * {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
  }
  html body[class*="page-"] #main .btn--primary svg,
  html body[class*="page-"] #main .chip.is-active svg {
    stroke: #FFFFFF !important;
    color: #FFFFFF !important;
  }

  /* ===== Чёрные заливки кнопок → фирменный красный ===== */
  /* Кнопка «Фильтры» в панели каталога. */
  html body[class*="page-"] #main .capp__filters {
    background-color: #FFFFFF !important;
    background-image: none !important;
    border-color: #EFE4DD !important;
    color: #E3124C !important;
    -webkit-text-fill-color: #E3124C !important;
  }
  html body[class*="page-"] #main .capp__filters svg,
  html body[class*="page-"] #main .capp__filters * {
    color: #E3124C !important;
    -webkit-text-fill-color: #E3124C !important;
    stroke: #E3124C !important;
  }

  /* Круглые кнопки на карточке объявления (избранное, настройки). */
  html body[class*="page-"] #main .pet-card button,
  html body[class*="page-"] #main .pet-card__fav {
    background-color: #E3124C !important;
    background-image: none !important;
    border-color: #E3124C !important;
  }
  html body[class*="page-"] #main .pet-card button svg,
  html body[class*="page-"] #main .pet-card__fav svg,
  html body[class*="page-"] #main .pet-card button span {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    stroke: #FFFFFF !important;
  }

  /* Подпись на красной плашке «Фильтры» — белая. */
  html body[class*="page-"] #main .fmore__title,
  html body[class*="page-"] #main .fmore__title *,
  html body[class*="page-"] #main .capp__filters .fmore__title {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
  }

  /* Подпись «Фильтры» может рисоваться псевдоэлементом — возвращаем белый цвет. */
  html body[class*="page-"] #main .capp__filters::before,
  html body[class*="page-"] #main .capp__filters::after,
  html body[class*="page-"] #main .capp__filters-n::before,
  html body[class*="page-"] #main .capp__filters-n::after {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    background-image: none !important;
  }

  /* Подпись кнопки «Фильтры»: возвращаем текстом на плашке. */
  html body[class*="page-"] #main .capp__filters-n::after {
    content: "Фильтры";
    display: inline-block;
    margin-left: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
  }

  /* Полоса фильтров на каталоге: была пустой белой плашкой из-за белой подписи. */
  html body.page-catalog #main .fmore__head {
    background-color: #F7ECE4 !important;
    border: 1px solid #EFE4DD !important;
    border-radius: 16px !important;
    min-height: 50px !important;
    padding: 0 14px 0 44px !important;
    display: flex !important;
    align-items: center !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C4402F' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M4 7h10M18 7h2M4 17h4M12 17h8'/%3E%3Ccircle cx='16' cy='7' r='2.2'/%3E%3Ccircle cx='10' cy='17' r='2.2'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 14px center !important;
    background-size: 20px 20px !important;
  }
  html body.page-catalog #main .fmore__title,
  html body.page-catalog #main .fmore__title * {
    color: #1E120D !important;
    -webkit-text-fill-color: #1E120D !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 0 !important;
  }
  html body.page-catalog #main .fmore__close {
    margin-left: auto !important;
    color: #E3124C !important;
    -webkit-text-fill-color: #E3124C !important;
  }
  html body.page-catalog #main .fmore__close svg {
    stroke: #E3124C !important;
    color: #E3124C !important;
  }

  /* Тёмная кнопка («Все объявления»): светло-прозрачная заливка с белым текстом
     выглядела как пустое белое поле. Возвращаем тёмный фон. */
  html body[class*="page-"] #main .btn--dark,
  html body[class*="page-"] #main .btn.btn--dark {
    background-color: #2B1813 !important;
    background-image: none !important;
    border-color: #2B1813 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
  }
  html body[class*="page-"] #main .btn--dark *,
  html body[class*="page-"] #main .btn--dark svg {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    stroke: #FFFFFF !important;
  }
  /* Фильтр-кнопка на главной: белая пилюля превращается в аккуратную
     кнопку с фирменным текстом. */
  html body.page-home #main .mp-search button[type="submit"] {
    color: #E3124C !important;
  }

  /* Строка поиска под кнопкой на главной: отступ до карточек. */
  html body.page-home #main section.mp-search {
    margin-top: 20px !important;
    margin-bottom: 18px !important;
  }
}

/* ============================================================
   Карточка новостей на главной, мобильная версия (fix 2026-10-20).
   Светлая тема выше делала подложку блока белой: заголовок новости
   рисовался чёрным на белом прямоугольнике поверх фото, а надзаголовок
   «Новости» и ссылка «Читать новость» оставались белыми и исчезали.
   Возвращаем затемнённое фото с белым текстом, как на десктопе.
   ============================================================ */
@media (max-width: 860px) {
  /* Фон и рамка карточки — снова тёмные. */
  html body.page-home #main #hero-stories {
    background-color: #211712 !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    overflow: hidden !important;
  }

  /* Затемнение под текстом: ровный градиент без резкой границы. */
  html body.page-home #main #hero-stories .hero-stories__shade {
    background:
      linear-gradient(180deg,
        rgba(16, 12, 20, 0.08) 0%,
        rgba(16, 12, 20, 0.30) 38%,
        rgba(16, 12, 20, 0.74) 66%,
        rgba(16, 12, 20, 0.94) 100%) !important;
  }

  /* Текстовая плашка прозрачная, с отступом от стрелок. */
  html body.page-home #main #hero-stories .hero-stories__content {
    background: transparent !important;
    background-color: transparent !important;
    left: 16px !important;
    right: 16px !important;
    bottom: 58px !important;
    padding: 0 !important;
    gap: 6px !important;
  }

  /* Надзаголовок «Новости» с точкой — снова виден. */
  html body.page-home #main #hero-stories .hero-stories__eyebrow,
  html body.page-home #main #hero-stories .hero-stories__eyebrow * {
    color: #FFE3D4 !important;
    -webkit-text-fill-color: #FFE3D4 !important;
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
    margin: 0 0 2px 0 !important;
  }

  /* Заголовок: белый, не больше трёх строк. */
  html body.page-home #main #hero-stories .hero-stories__content h2 {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    font-size: clamp(19px, 5.4vw, 24px) !important;
    line-height: 1.16 !important;
    letter-spacing: -0.02em !important;
    font-weight: 800 !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* Дата. */
  html body.page-home #main #hero-stories .hero-stories__content p {
    color: rgba(255, 255, 255, 0.80) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.80) !important;
    font-size: 11.5px !important;
    margin: 0 !important;
  }

  /* Ссылка «Читать новость» — контрастная, с тач-таргетом. */
  html body.page-home #main #hero-stories .hero-stories__link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 34px !important;
    padding: 7px 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.42) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.16) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
  }
  html body.page-home #main #hero-stories .hero-stories__link .ico,
  html body.page-home #main #hero-stories .hero-stories__link svg {
    color: #FFFFFF !important;
    stroke: currentColor !important;
  }

  /* Стрелки — на затемнённом фоне, читаемые. */
  html body.page-home #main #hero-stories .hero-stories__controls {
    bottom: 12px !important;
    right: 12px !important;
  }
  html body.page-home #main #hero-stories .hero-stories__arrow {
    background-color: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    color: #FFFFFF !important;
  }
}



/* ============================================================
   ФИРМЕННЫЙ СВЕТЛЫЙ ПОДВАЛ (СЕРДЦЕ ПИТОМЦА) — DESKTOP + MOBILE
   Цвет подвала: нежный фирменный персиково-кремовый #FFF1E8
   ============================================================ */

html body #site-footer,
html body .footer,
html body footer.footer,
.footer {
  background: #FFF1E8 !important;
  background-color: #FFF1E8 !important;
  background-image: linear-gradient(180deg, #FFF1E8 0%, #FEEAE0 100%) !important;
  color: #4E3A33 !important;
  border-top: 1px solid #F2DDD2 !important;
  box-shadow: 0 -10px 30px -20px rgba(78, 58, 51, 0.15) !important;
}

html body .footer__grid {
  border-bottom: 1px solid #F2DDD2 !important;
}

/* Заголовки */
html body .footer h1,
html body .footer h2,
html body .footer h3,
html body .footer h4,
html body .footer h4 *,
html body .footer strong,
html body .footer b,
html body .footer .footer__acc-head h4 {
  color: #1E120D !important;
  -webkit-text-fill-color: #1E120D !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
}

/* Текст и списки */
html body .footer p,
html body .footer li,
html body .footer span,
html body .footer time,
html body .footer div,
html body .footer__about,
html body .socials__note {
  color: #4E3A33 !important;
  -webkit-text-fill-color: #4E3A33 !important;
}

/* Ссылки */
html body .footer a,
html body .footer li a,
html body .footer__acc ul a,
html body .footer__app-link a,
html body .footer__contacts a {
  color: #4E3A33 !important;
  -webkit-text-fill-color: #4E3A33 !important;
  text-decoration: none !important;
  transition: color 0.15s ease, opacity 0.15s ease !important;
}

html body .footer a:hover,
html body .footer a:focus-visible,
html body .footer li a:hover,
html body .footer__acc ul a:hover,
html body .footer__app-link a:hover,
html body .footer__contacts a:hover {
  color: #E3124C !important;
  -webkit-text-fill-color: #E3124C !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* Логотип */
html body .footer .logo,
html body .footer .logo b,
html body .footer .logo strong {
  color: #1E120D !important;
  -webkit-text-fill-color: #1E120D !important;
}
html body .footer .logo .logo__heart {
  color: #E3124C !important;
  -webkit-text-fill-color: #E3124C !important;
}
html body .footer .logo small {
  color: #7D6860 !important;
  -webkit-text-fill-color: #7D6860 !important;
}
html body .footer .logo__img {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Телефон горячей линии — фирменным акцентным */
html body .footer .footer__phone,
html body .footer__phone,
html body .footer__phone:hover {
  color: #E3124C !important;
  -webkit-text-fill-color: #E3124C !important;
  font-weight: 800 !important;
}

/* Приглушенные строки: копирайт, оператор, документы */
html body .footer small,
html body .footer__copy,
html body .footer__operator,
html body .footer__docs a,
html body .footer__acc-ico {
  color: #7D6860 !important;
  -webkit-text-fill-color: #7D6860 !important;
}
html body .footer__docs a:hover {
  color: #E3124C !important;
  -webkit-text-fill-color: #E3124C !important;
  text-decoration: underline !important;
}
html body .footer .footer__acc-ico .ico {
  stroke: #7D6860 !important;
  color: #7D6860 !important;
}

/* Нижняя панель */
html body .footer__bottom {
  border-top: 1px solid #F2DDD2 !important;
  color: #7D6860 !important;
}

/* Кнопки в подвале: фирменный розово-красный градиент с белым текстом */
html body .footer .btn--primary,
html body .footer .btn--primary:hover,
html body .footer .btn,
html body .footer .btn:hover {
  background: linear-gradient(150deg, #E3124C 0%, #C40B3E 100%) !important;
  background-image: linear-gradient(150deg, #E3124C 0%, #C40B3E 100%) !important;
  border: 1px solid #C40B3E !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-weight: 700 !important;
  box-shadow: 0 10px 22px -10px rgba(227, 18, 76, 0.75) !important;
  text-decoration: none !important;
}
html body .footer .btn--primary:hover,
html body .footer .btn:hover {
  background: linear-gradient(150deg, #F01A55 0%, #D40A3F 100%) !important;
  box-shadow: 0 12px 26px -8px rgba(227, 18, 76, 0.85) !important;
  transform: translateY(-1px) !important;
}
html body .footer .btn--primary *,
html body .footer .btn--primary .btn__label,
html body .footer .btn *,
html body .footer .btn .btn__label {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* Соцсети: аккуратные белые плашки с цветными иконками */
html body .footer .socials a,
html body .footer .socials a[href*="vk.ru"],
html body .footer .socials a[href*="vkontakte"],
html body .footer .socials a[href*="max.ru"],
html body .footer .socials a[href^="mailto:"] {
  background: #FFFFFF !important;
  background-image: none !important;
  border: 1px solid #F0DCD2 !important;
  color: #C40B3E !important;
  box-shadow: 0 4px 12px rgba(78, 58, 51, 0.08) !important;
}
html body .footer .socials a[href*="vk.ru"],
html body .footer .socials a[href*="vkontakte"] { color: #2787F5 !important; }
html body .footer .socials a[href*="max.ru"] { color: #E3124C !important; }
html body .footer .socials a[href^="mailto:"] { color: #7D6860 !important; }

html body .footer .socials a:hover {
  background: #FFFFFF !important;
  border-color: #F6C6D6 !important;
  box-shadow: 0 8px 18px rgba(227, 18, 76, 0.22) !important;
  transform: translateY(-2px) !important;
}
html body .footer .socials a[href*="vk.ru"] .ico,
html body .footer .socials a[href*="vkontakte"] .ico {
  color: #2787F5 !important;
  fill: #2787F5 !important;
}
html body .footer .socials a[href*="max.ru"] .ico {
  color: #E3124C !important;
  fill: #E3124C !important;
}
html body .footer .socials a[href^="mailto:"] .ico {
  color: #7D6860 !important;
  stroke: #7D6860 !important;
  fill: none !important;
}
html body .footer .footer__brand .socials::before {
  background: #FDE9F0 !important;
  background-image: none !important;
  border: 1px solid #F6CFDC !important;
  color: #C40B3E !important;
  -webkit-text-fill-color: #C40B3E !important;
  font-weight: 700 !important;
  border-radius: 13px !important;
}

/* Карточка приложения */
html body .footer .footer-app-card,
html body a.footer-app-card {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
  border: 1px solid #F0DCD2 !important;
  box-shadow: 0 8px 22px rgba(78, 58, 51, 0.08) !important;
  color: #1E120D !important;
}
html body .footer .footer-app-card:hover,
html body a.footer-app-card:hover {
  background: #FFFFFF !important;
  border-color: #F6C6D6 !important;
  box-shadow: 0 12px 28px rgba(227, 18, 76, 0.16) !important;
  transform: translateY(-2px) !important;
}
html body .footer .footer-app-card__badge,
html body .footer .footer-app-card:hover .footer-app-card__badge {
  background: linear-gradient(150deg, #FDE9F0 0%, #F9D6E4 100%) !important;
  border: 1px solid #F3C6D3 !important;
  box-shadow: none !important;
}
html body .footer .footer-app-card__badge .ico,
html body .footer .footer-app-card__badge svg {
  color: #C40B3E !important;
  fill: #C40B3E !important;
}
html body .footer .footer-app-card__title,
html body span.footer-app-card__title {
  color: #1E120D !important;
  -webkit-text-fill-color: #1E120D !important;
  font-weight: 700 !important;
}
html body .footer .footer-app-card__subtitle,
html body span.footer-app-card__subtitle {
  color: #7D6860 !important;
  -webkit-text-fill-color: #7D6860 !important;
}
html body .footer .footer-app-card__arrow {
  color: #E3124C !important;
}

/* Мобильные аккордеоны */
html body .footer details.footer__acc,
html body .footer .footer__acc,
html body details.footer__acc {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid #F2DDD2 !important;
}



/* Mobile map CTA: keep its outline in the berry brand palette after the
   shared ghost-button rules above. */
@media (max-width: 860px) {
  html body.page-home #main .hero-action-map.btn--ghost {
    border: 1px solid rgba(227, 18, 76, .24) !important;
    border-color: rgba(227, 18, 76, .24) !important;
  }
}