/* ============================================================
   «Сердце Питомца» — единая мобильная палитра (2026-10-20).
   Задача: на телефоне все страницы используют один тёплый набор
   цветов бренда. Меняются только цвета, рамки и тени —
   геометрия, отступы и типографика не затрагиваются.
   Палитра: фон #FFFCF8, поверхность #FFFFFF, линия #EFE4DD,
   текст #2A1A15 / #7D6860, акцент #C4402F.
   ============================================================ */
@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: #C4402F;
    --m-brand-dark: #9E2F22;
    --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: #C4402F !important;
    border-color: #C4402F !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: #C4402F !important;
    border-color: #C4402F !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
  }

  /* CTA-кнопки используют общий акцент вместо отдельной коричневой темы. */
  html body #main .btn--dark,
  html body #main .btn.btn--dark {
    background-color: #C4402F !important;
    background-image: none !important;
    border-color: #C4402F !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;
}